Color 颜色

Licht UI 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。

亮色

亮色

primary

success

danger

info

warning

<template>
	<LiRow justify="center">
		<LiCol :span="4">
			<div
				:style="`width: 80px; text-align: center;color:var(--li--color-primary)`"
			>
				primary
			</div>
			<div
				class="block"
				v-for="index in 9"
				:style="`background: var(--li--color-primary-light-${index});`"
				@click="
					() => CopyColor('primary', `--li--color-primary-light-${index}`)
				"
			/>
		</LiCol>
		<LiCol :span="4">
			<div
				:style="`width: 80px; text-align: center;color:var(--li--color-success)`"
			>
				success
			</div>
			<div
				class="block"
				v-for="index in 9"
				:style="`background: var(--li--color-success-light-${index});`"
				@click="
					() => CopyColor('success', `--li--color-success-light-${index}`)
				"
			/>
		</LiCol>
		<LiCol :span="4">
			<div
				style="width: 80px; text-align: center"
				:style="`width: 80px; text-align: center;color:var(--li--color-danger)`"
			>
				danger
			</div>
			<div
				class="block"
				v-for="index in 9"
				:style="`background: var(--li--color-danger-light-${index});`"
				@click="() => CopyColor('danger', `--li--color-danger-light-${index}`)"
			/>
		</LiCol>
		<LiCol :span="4">
			<div
				style="width: 80px; text-align: center"
				:style="`width: 80px; text-align: center;color:var(--li--color-info)`"
			>
				info
			</div>
			<div
				class="block"
				v-for="index in 9"
				:style="`background: var(--li--color-info-light-${index});`"
				@click="() => CopyColor('info', `--li--color-info-light-${index}`)"
			/>
		</LiCol>
		<LiCol :span="4">
			<div
				:style="`width: 80px; text-align: center;color:var(--li--color-warning)`"
			>
				warning
			</div>
			<div
				class="block"
				v-for="index in 9"
				:style="`background: var(--li--color-warning-light-${index});`"
				@click="
					() => CopyColor('warning', `--li--color-warning-light-${index}`)
				"
			/>
		</LiCol>
	</LiRow>
</template>
<script setup lang="ts">
	import { message } from "@licht-ui/components";

	const CopyColor = (type: any, color: string) => {
		message({
			content: `已复制：${color}`,
			type,
		});
	};
</script>
<style scope lang="scss">
	.block {
		width: 25px;
		height: 25px;
		border: solid 1px transparent;
		cursor: pointer;
		&:hover {
			border: solid 1px white;
			box-shadow: 0 0 2px #333;
		}
	}
</style>

暗色

暗色

<template>
	<LiRow justify="center">
		<LiCol :span="4">
			<div
				class="block"
				v-for="index in 9"
				:style="`background: var(--li--color-primary-dark-${index});`"
				@click="() => CopyColor('primary', `--li--color-primary-dark-${index}`)"
			/>
		</LiCol>
		<LiCol :span="4">
			<div
				class="block"
				v-for="index in 9"
				:style="`background: var(--li--color-success-dark-${index});`"
				@click="() => CopyColor('success', `--li--color-success-dark-${index}`)"
			/>
		</LiCol>
		<LiCol :span="4">
			<div
				class="block"
				v-for="index in 9"
				:style="`background: var(--li--color-danger-dark-${index});`"
				@click="() => CopyColor('danger', `--li--color-danger-dark-${index}`)"
			/>
		</LiCol>
		<LiCol :span="4">
			<div
				class="block"
				v-for="index in 9"
				:style="`background: var(--li--color-info-dark-${index});`"
				@click="() => CopyColor('info', `--li--color-info-dark-${index}`)"
			/>
		</LiCol>
		<LiCol :span="4">
			<div
				class="block"
				v-for="index in 9"
				:style="`background: var(--li--color-warning-dark-${index});`"
				@click="() => CopyColor('warning', `--li--color-warning-dark-${index}`)"
			/>
		</LiCol>
	</LiRow>
</template>
<script setup lang="ts">
	import { message } from "@licht-ui/components";

	const CopyColor = (type: any, color: string) => {
		message({
			content: `已复制：${color}`,
			type,
		});
	};
</script>
<style scope lang="scss">
	.block {
		min-width: 75px;
		height: 25px;
		border: solid 1px transparent;
		cursor: pointer;
		display: block;
		&:hover {
			border: solid 1px white;
			box-shadow: 0 0 2px #333;
		}
	}
</style>