169 lines
8.0 KiB
CSS
169 lines
8.0 KiB
CSS
/* 定义应用原始色板 */
|
|
@layer theme {
|
|
:root {
|
|
--font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
|
|
--color-light-fg: hsla(0, 0%, 0%, 0.87);
|
|
--color-light-bg: hsla(0, 0%, 86%, 0.85);
|
|
--color-dark-fg: hsla(0, 0%, 100%, 0.87);
|
|
--color-dark-bg: hsla(0, 0%, 14%, 0.85);
|
|
--color-slate: hsl(215, 19%, 35%);
|
|
--color-gray: hsl(0, 0%, 52%);
|
|
--color-zinc: hsl(240, 5%, 34%);
|
|
--color-neutral: hsl(0, 0%, 32%);
|
|
--color-stone: hsl(33, 5%, 32%);
|
|
--color-bright-blue: hsl(217, 100%, 50%);
|
|
--color-blue: hsl(233, 73%, 45%);
|
|
--color-yellow: hsl(57, 69%, 52%);
|
|
--color-bright-green: hsl(99, 67%, 52%);
|
|
--color-green: hsl(140, 72%, 52%);
|
|
--color-tomato: hsl(21, 88%, 52%);
|
|
--color-bright-red: hsl(341, 88%, 52%);
|
|
--color-red: hsl(0, 89%, 52%);
|
|
--color-bright-orange: hsl(40, 100%, 51%);
|
|
--color-orange: hsl(32, 98%, 51%);
|
|
--color-violet: hsl(267, 70%, 52%);
|
|
--color-pink: hsl(302, 88%, 52%);
|
|
--color-blue-gray: hsl(228, 11%, 44%);
|
|
--color-indigo: hsl(230, 33%, 45%);
|
|
--color-white: hsl(0, 0%, 100%);
|
|
--color-black: hsl(0, 0%, 0%);
|
|
|
|
/* chinese colors */
|
|
/* theme colors */
|
|
--color-yuanweilan: hsl(197, 80%, 40%);
|
|
--color-pinlan: hsl(207, 61%, 43%);
|
|
--color-cuilan: hsl(188, 71%, 41%);
|
|
--color-xinglan: hsl(206, 38%, 69%);
|
|
--color-mantianxingzi: hsl(238, 46%, 33%);
|
|
--color-yuhong: hsl(356, 49%, 52%);
|
|
--color-hedinghong: hsl(4, 80%, 46%);
|
|
--color-jidanhuang: hsl(42, 97%, 53%);
|
|
--color-furonghong: hsl(17, 94%, 61%);
|
|
--color-baoshilv: hsl(117, 49%, 46%);
|
|
--color-gongdianlv: hsl(146, 62%, 33%);
|
|
--color-bohelv: hsl(148, 60%, 31%);
|
|
--color-dancuilv: hsl(125, 28%, 83%);
|
|
--color-youlv: hsl(118, 26%, 19%);
|
|
--color-jingtailan: hsl(207, 65%, 43%);
|
|
--color-yejuzi: hsl(240, 25%, 43%);
|
|
/* background colors */
|
|
--color-yunshanlv: hsl(146, 25%, 11%);
|
|
--color-wumeizi: hsl(305, 22%, 10%);
|
|
--color-yanhanlan: hsl(222, 31%, 11%);
|
|
--color-zise: hsl(0, 20%, 24%);
|
|
--color-meihei: hsl(18, 21%, 16%);
|
|
--color-qihei: hsl(231, 23%, 11%);
|
|
--color-mangconglv: hsl(162, 20%, 10%);
|
|
--color-hujishenglv: hsl(130, 7%, 18%);
|
|
/* neutral colors */
|
|
--color-yuanshanzi: hsl(240, 11%, 82%);
|
|
--color-jianfengzi: hsl(280, 7%, 24%);
|
|
--color-xinhui: hsl(351, 3%, 46%);
|
|
--color-xuanqing: hsl(246, 14%, 27%);
|
|
--color-yaqing: hsl(197, 10%, 29%);
|
|
--color-mose: hsl(205, 15%, 37%);
|
|
--color-lvhui: hsl(163, 20%, 24%);
|
|
--color-xiayunhui: hsl(184, 8%, 41%);
|
|
--color-yuzanlv: hsl(148, 26%, 72%);
|
|
--color-yueyingbai: hsl(165, 3%, 76%);
|
|
--color-yudubai: hsl(42, 38%, 95%);
|
|
--color-qianbai: hsl(240, 15%, 95%);
|
|
--color-yuebai: hsl(189, 87%, 94%);
|
|
|
|
--spacing: 2px;
|
|
--spacing-n: calc(var(--spacing) * 0);
|
|
--spacing-xxs: calc(var(--spacing) * 1);
|
|
--spacing-xs: calc(var(--spacing) * 2);
|
|
--spacing-s: calc(var(--spacing) * 3);
|
|
--spacing-m: calc(var(--spacing) * 4);
|
|
--spacing-l: calc(var(--spacing) * 6);
|
|
--spacing-xl: calc(var(--spacing) * 8);
|
|
--spacing-xxl: calc(var(--spacing) * 12);
|
|
|
|
--border-radius: 2px;
|
|
--border-radius-n: calc(var(--border-radius) * 0);
|
|
--border-radius-xxs: calc(var(--border-radius) * 1);
|
|
--border-radius-xs: calc(var(--border-radius) * 2);
|
|
--border-radius-s: calc(var(--border-radius) * 3);
|
|
--border-radius-m: calc(var(--border-radius) * 4);
|
|
--border-radius-l: calc(var(--border-radius) * 6);
|
|
--border-radius-xl: calc(var(--border-radius) * 8);
|
|
--border-radius-xxl: calc(var(--border-radius) * 12);
|
|
|
|
--font-size: 1rem;
|
|
--font-size-xxs: calc(var(--font-size) * 0.5);
|
|
--font-size-xs: calc(var(--font-size) * 0.65);
|
|
--font-size-s: calc(var(--font-size) * 0.8);
|
|
--font-size-m: calc(var(--font-size) * 1);
|
|
--font-size-l: calc(var(--font-size) * 1.25);
|
|
--font-size-xl: calc(var(--font-size) * 1.5);
|
|
--font-size-xxl: calc(var(--font-size) * 2);
|
|
|
|
--color-primary: var(--color-bright-blue);
|
|
--color-primary-hover: oklch(from var(--color-primary) calc(l + (1 - l) * 0.3) c h);
|
|
--color-primary-active: oklch(from var(--color-primary) calc(l * 0.8) c h);
|
|
--color-primary-focus: oklch(from var(--color-primary) calc(l + (1 - l) * 0.5) c h);
|
|
--color-primary-disabled: oklch(from var(--color-primary) calc(l * 0.8) calc(c * 0.1) h);
|
|
|
|
--color-secondary: oklch(from var(--color-primary) l c calc(h + 30));
|
|
--color-secondary-hover: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.3) c h);
|
|
--color-secondary-active: oklch(from var(--color-secondary) calc(l * 0.8) c h);
|
|
--color-secondary-focus: oklch(from var(--color-secondary) calc(l + (1 - l) * 0.5) c h);
|
|
--color-secondary-dissabled: oklch(from var(--color-secondary) calc(l * 0.8) calc(c * 0.1) h);
|
|
|
|
--color-accent: oklch(from var(--color-primary) l c calc(h + 180 - 30));
|
|
--color-accent-hover: oklch(from var(--color-accent) calc(l + (1 - l) * 0.3) c h);
|
|
--color-accent-active: oklch(from var(--color-accent) calc(l * 0.8) c h);
|
|
--color-accent-focus: oklch(from var(--color-accent) calc(l + (1 - l) * 0.5) c h);
|
|
--color-accent-disabled: oklch(from var(--color-accent) calc(l * 0.8) calc(c * 0.1) h);
|
|
|
|
--color-neutral: var(--color-slate);
|
|
--color-neutral-hover: oklch(from var(--color-neutral) calc(l + (1 - l) * 0.3) c h);
|
|
--color-neutral-active: oklch(from var(--color-neutral) calc(l * 0.8) c h);
|
|
--color-neutral-focus: oklch(from var(--color-neutral) calc(l + (1 - l) * 0.5) c h);
|
|
--color-neutral-disabled: oklch(from var(--color-neutral) calc(l * 0.8) calc(c * 0.1) h);
|
|
|
|
--color-danger: var(--color-red);
|
|
--color-danger-hover: oklch(from var(--color-danger) calc(l + (1 - l) * 0.3) c h);
|
|
--color-danger-active: oklch(from var(--color-danger) calc(l * 0.8) c h);
|
|
--color-danger-focus: oklch(from var(--color-danger) calc(l + (1 - l) * 0.5) c h);
|
|
--color-danger-disabled: oklch(from var(--color-danger) calc(l * 0.8) calc(c * 0.1) h);
|
|
|
|
--color-warn: var(--color-orange);
|
|
--color-warn-hover: oklch(from var(--color-warn) calc(l + (1 - l) * 0.3) c h);
|
|
--color-warn-active: oklch(from var(--color-warn) calc(l * 0.8) c h);
|
|
--color-warn-focus: oklch(from var(--color-warn) calc(l + (1 - l) * 0.5) c h);
|
|
--color-warn-disabled: oklch(from var(--color-warn) calc(l * 0.8) calc(c * 0.1) h);
|
|
|
|
--color-success: var(--color-green);
|
|
--color-success-hover: oklch(from var(--color-success) calc(l + (1 - l) * 0.3) c h);
|
|
--color-success-active: oklch(from var(--color-success) calc(l * 0.8) c h);
|
|
--color-success-focus: oklch(from var(--color-success) calc(l + (1 - l) * 0.5) c h);
|
|
--dolor-success-disabled: oklch(from var(--color-success) calc(l * 0.8) calc(c * 0.1) h);
|
|
|
|
--color-info: var(--color-indigo);
|
|
--color-info-hover: oklch(from var(--color-info) calc(l + (1 - l) * 0.3) c h);
|
|
--color-info-active: oklch(from var(--color-info) calc(l * 0.8) c h);
|
|
--color-info-focus: oklch(from var(--color-info) calc(l + (1 - l) * 0.5) c h);
|
|
--color-info-disabled: oklch(from var(--color-info) calc(l * 0.8) calc(c * 0.1) h);
|
|
|
|
--color-border: oklch(from var(--color-neutral) calc(l + (1 - l) * 0.3) c h);
|
|
--color-border-focused: oklch(from var(--color-border) calc(l + (1 - l) * 0.2) c h);
|
|
|
|
--color-link: var(--color-blue);
|
|
--color-link-hover: oklch(from var(--color-link) calc(l + (1 - l) * 0.3) c h);
|
|
--color-link-active: oklch(from var(--color-link) calc(l * 0.8) c h);
|
|
--color-link-focus: oklch(from var(--color-link) calc(l + (1 - l) * 0.5) c h);
|
|
--color-link-disabled: oklch(from var(--color-link) calc(l * 0.8) calc(c * 0.1) h);
|
|
|
|
--color-typo-light: var(--color-xuanqing);
|
|
--color-typo-light-lightness: oklch(from var(--color-typo-light) calc(l + (1 - l) * 0.5) c h);
|
|
--color-typo-light-darkness: oklch(from var(--color-typo-light) calc(l * 0.5) c h);
|
|
|
|
--color-typo-dark: var(--color-yudubai);
|
|
--color-typo-dark-lightness: oklch(from var(--color-typo-dark) calc(l + (1 - l) * 0.5) c h);
|
|
--color-typo-dark-darkness: oklch(from var(--color-typo-dark) calc(l * 0.5) c h);
|
|
}
|
|
}
|