@syncupsuite/themes 0.2.2 → 0.3.1

package/src/tang-imperial/tailwind.css

@@ -0,0 +1,421 @@
+@import "tailwindcss";
+
+@theme {
+  /* --- Colors --- */
+  /* Zhūshā Hóng (朱砂红) 50 */
+  --color-zh-sh-h-ng-50: #FFEBE5;
+  /* Zhūshā Hóng (朱砂红) 100 */
+  --color-zh-sh-h-ng-100: #FFC7BF;
+  /* Zhūshā Hóng (朱砂红) 200 */
+  --color-zh-sh-h-ng-200: #F0A399;
+  /* Zhūshā Hóng (朱砂红) 300 */
+  --color-zh-sh-h-ng-300: #DE7F74;
+  /* Zhūshā Hóng (朱砂红) 400 */
+  --color-zh-sh-h-ng-400: #CA5B50;
+  /* Zhūshā Hóng (朱砂红) 500 */
+  --color-zh-sh-h-ng-500: #B5312A;
+  /* Zhūshā Hóng (朱砂红) 600 */
+  --color-zh-sh-h-ng-600: #8D1715;
+  /* Zhūshā Hóng (朱砂红) 700 */
+  --color-zh-sh-h-ng-700: #670000;
+  /* Zhūshā Hóng (朱砂红) 800 */
+  --color-zh-sh-h-ng-800: #420000;
+  /* Zhūshā Hóng (朱砂红) 900 */
+  --color-zh-sh-h-ng-900: #200000;
+  /* Jīn Sè (金色) 50 */
+  --color-j-n-s-50: #FEF4DF;
+  /* Jīn Sè (金色) 100 */
+  --color-j-n-s-100: #F2E3C1;
+  /* Jīn Sè (金色) 200 */
+  --color-j-n-s-200: #E7D3A2;
+  /* Jīn Sè (金色) 300 */
+  --color-j-n-s-300: #DCC284;
+  /* Jīn Sè (金色) 400 */
+  --color-j-n-s-400: #D0B164;
+  /* Jīn Sè (金色) 500 */
+  --color-j-n-s-500: #C5A03F;
+  /* Jīn Sè (金色) 600 */
+  --color-j-n-s-600: #937317;
+  /* Jīn Sè (金色) 700 */
+  --color-j-n-s-700: #634900;
+  /* Jīn Sè (金色) 800 */
+  --color-j-n-s-800: #382200;
+  /* Jīn Sè (金色) 900 */
+  --color-j-n-s-900: #110200;
+  /* Cuì Lǜ (翠绿) 50 */
+  --color-cu-l-50: #EAFAEF;
+  /* Cuì Lǜ (翠绿) 100 */
+  --color-cu-l-100: #C6DFCF;
+  /* Cuì Lǜ (翠绿) 200 */
+  --color-cu-l-200: #A3C5B0;
+  /* Cuì Lǜ (翠绿) 300 */
+  --color-cu-l-300: #81AC91;
+  /* Cuì Lǜ (翠绿) 400 */
+  --color-cu-l-400: #5E9373;
+  /* Cuì Lǜ (翠绿) 500 */
+  --color-cu-l-500: #3B7A57;
+  /* Cuì Lǜ (翠绿) 600 */
+  --color-cu-l-600: #235B3D;
+  /* Cuì Lǜ (翠绿) 700 */
+  --color-cu-l-700: #0B3E25;
+  /* Cuì Lǜ (翠绿) 800 */
+  --color-cu-l-800: #00230F;
+  /* Cuì Lǜ (翠绿) 900 */
+  --color-cu-l-900: #000A01;
+  /* Mò Hēi (墨黑) 50 */
+  --color-m-h-i-50: #F5F5F5;
+  /* Mò Hēi (墨黑) 100 */
+  --color-m-h-i-100: #C4C4C4;
+  /* Mò Hēi (墨黑) 200 */
+  --color-m-h-i-200: #959595;
+  /* Mò Hēi (墨黑) 300 */
+  --color-m-h-i-300: #686868;
+  /* Mò Hēi (墨黑) 400 */
+  --color-m-h-i-400: #3F3F3F;
+  /* Mò Hēi (墨黑) 500 */
+  --color-m-h-i-500: #1A1A1A;
+  /* Mò Hēi (墨黑) 600 */
+  --color-m-h-i-600: #141414;
+  /* Mò Hēi (墨黑) 700 */
+  --color-m-h-i-700: #0F0F0F;
+  /* Mò Hēi (墨黑) 800 */
+  --color-m-h-i-800: #0A0A0A;
+  /* Mò Hēi (墨黑) 900 */
+  --color-m-h-i-900: #060606;
+  /* Xuān Zhǐ (宣紙) 50 */
+  --color-xu-n-zh-50: #F6F5F2;
+  /* Xuān Zhǐ (宣紙) 100 */
+  --color-xu-n-zh-100: #F6F3EE;
+  /* Xuān Zhǐ (宣紙) 200 */
+  --color-xu-n-zh-200: #F5F2EB;
+  /* Xuān Zhǐ (宣紙) 300 */
+  --color-xu-n-zh-300: #F4F0E7;
+  /* Xuān Zhǐ (宣紙) 400 */
+  --color-xu-n-zh-400: #F4EFE4;
+  /* Xuān Zhǐ (宣紙) 500 */
+  --color-xu-n-zh-500: #F3EDE0;
+  /* Xuān Zhǐ (宣紙) 600 */
+  --color-xu-n-zh-600: #B0AA9F;
+  /* Xuān Zhǐ (宣紙) 700 */
+  --color-xu-n-zh-700: #716C63;
+  /* Xuān Zhǐ (宣紙) 800 */
+  --color-xu-n-zh-800: #37342D;
+  /* Xuān Zhǐ (宣紙) 900 */
+  --color-xu-n-zh-900: #070603;
+  /* Zǐ Tán (紫檀) 50 */
+  --color-z-t-n-50: #FFF0F5;
+  /* Zǐ Tán (紫檀) 100 */
+  --color-z-t-n-100: #DEC6CE;
+  /* Zǐ Tán (紫檀) 200 */
+  --color-z-t-n-200: #BC9DA8;
+  /* Zǐ Tán (紫檀) 300 */
+  --color-z-t-n-300: #9B7583;
+  /* Zǐ Tán (紫檀) 400 */
+  --color-z-t-n-400: #7B5060;
+  /* Zǐ Tán (紫檀) 500 */
+  --color-z-t-n-500: #5B2C3F;
+  /* Zǐ Tán (紫檀) 600 */
+  --color-z-t-n-600: #471F2F;
+  /* Zǐ Tán (紫檀) 700 */
+  --color-z-t-n-700: #341220;
+  /* Zǐ Tán (紫檀) 800 */
+  --color-z-t-n-800: #220612;
+  /* Zǐ Tán (紫檀) 900 */
+  --color-z-t-n-900: #110106;
+  /* Neutral 50 */
+  --color-neutral-50: #FFF5F3;
+  /* Neutral 100 */
+  --color-neutral-100: #F8EBE9;
+  /* Neutral 200 */
+  --color-neutral-200: #E7DBD9;
+  /* Neutral 300 */
+  --color-neutral-300: #CDC1BF;
+  /* Neutral 400 */
+  --color-neutral-400: #A19594;
+  /* Neutral 500 */
+  --color-neutral-500: #766C6A;
+  /* Neutral 600 */
+  --color-neutral-600: #544A49;
+  /* Neutral 700 */
+  --color-neutral-700: #3A302F;
+  /* Neutral 800 */
+  --color-neutral-800: #211817;
+  /* Neutral 900 */
+  --color-neutral-900: #0C0605;
+  /* Accent 50 */
+  --color-accent-50: #E1FBFC;
+  /* Accent 100 */
+  --color-accent-100: #C2ECEE;
+  /* Accent 200 */
+  --color-accent-200: #A2DDE0;
+  /* Accent 300 */
+  --color-accent-300: #81CDD2;
+  /* Accent 400 */
+  --color-accent-400: #5DBEC4;
+  /* Accent 500 */
+  --color-accent-500: #2BAFB6;
+  /* Accent 600 */
+  --color-accent-600: #008187;
+  /* Accent 700 */
+  --color-accent-700: #00565C;
+  /* Accent 800 */
+  --color-accent-800: #002E33;
+  /* Accent 900 */
+  --color-accent-900: #000B0F;
+
+  /* --- Spacing (8px grid) --- */
+  /* Spacing 0 (0px) */
+  --spacing-0: 0px;
+  /* Spacing 1 (4px) */
+  --spacing-1: 4px;
+  /* Spacing 2 (8px) */
+  --spacing-2: 8px;
+  /* Spacing 3 (12px) */
+  --spacing-3: 12px;
+  /* Spacing 4 (16px) */
+  --spacing-4: 16px;
+  /* Spacing 5 (20px) */
+  --spacing-5: 20px;
+  /* Spacing 6 (24px) */
+  --spacing-6: 24px;
+  /* Spacing 8 (32px) */
+  --spacing-8: 32px;
+  /* Spacing 10 (40px) */
+  --spacing-10: 40px;
+  /* Spacing 12 (48px) */
+  --spacing-12: 48px;
+  /* Spacing 16 (64px) */
+  --spacing-16: 64px;
+  /* Spacing 20 (80px) */
+  --spacing-20: 80px;
+  /* Spacing 0.5 (2px) */
+  --spacing-0-5: 2px;
+  /* Spacing 1.5 (6px) */
+  --spacing-1-5: 6px;
+
+  /* --- Font Families --- */
+  /* Heading font family */
+  --font-heading: "Source Serif 4", "Times New Roman", serif;
+  /* Body font family */
+  --font-body: "Source Serif 4", "Times New Roman", serif;
+  /* Monospace font family */
+  --font-mono: "JetBrains Mono", "Fira Code", monospace;
+
+  /* --- Font Sizes --- */
+  /* Font size xs */
+  --text-xs: 0.75rem;
+  /* Font size sm */
+  --text-sm: 0.875rem;
+  /* Font size base */
+  --text-base: 1rem;
+  /* Font size lg */
+  --text-lg: 1.125rem;
+  /* Font size xl */
+  --text-xl: 1.25rem;
+  /* Font size 2xl */
+  --text-2xl: 1.5rem;
+  /* Font size 3xl */
+  --text-3xl: 1.875rem;
+  /* Font size 4xl */
+  --text-4xl: 2.25rem;
+
+  /* --- Border Radius --- */
+  /* Border radius none */
+  --radius-none: 0px;
+  /* Border radius sm */
+  --radius-sm: 2px;
+  /* Border radius md */
+  --radius-md: 4px;
+  /* Border radius lg */
+  --radius-lg: 6px;
+  /* Border radius xl */
+  --radius-xl: 8px;
+  /* Border radius full */
+  --radius-full: 9999px;
+
+}
+
+/* === Semantic Color API — theme-aware Tailwind utilities === */
+@theme {
+  --color-canvas: var(--background-canvas);
+  --color-surface: var(--background-surface);
+  --color-muted: var(--background-muted);
+  --color-foreground: var(--text-primary);
+  --color-foreground-secondary: var(--text-secondary);
+  --color-foreground-muted: var(--text-muted);
+  --color-foreground-inverse: var(--text-inverse);
+  --color-primary: var(--interactive-primary);
+  --color-primary-hover: var(--interactive-primary-hover);
+  --color-primary-active: var(--interactive-primary-active);
+  --color-border: var(--border-default);
+  --color-border-strong: var(--border-strong);
+  --color-error: var(--status-error);
+  --color-success: var(--status-success);
+  --color-warning: var(--status-warning);
+  --color-info: var(--status-info);
+  --color-ring: var(--focus-ring);
+  --color-focus-visible: var(--accessibility-focus-visible);
+}
+
+/* Primitive aliases + light mode semantic tokens */
+:root {
+  /* --primitive-color-* aliases → @theme --color-* (for semantic var() resolution) */
+  --primitive-color-zh-sh-h-ng-50: var(--color-zh-sh-h-ng-50);
+  --primitive-color-zh-sh-h-ng-100: var(--color-zh-sh-h-ng-100);
+  --primitive-color-zh-sh-h-ng-200: var(--color-zh-sh-h-ng-200);
+  --primitive-color-zh-sh-h-ng-300: var(--color-zh-sh-h-ng-300);
+  --primitive-color-zh-sh-h-ng-400: var(--color-zh-sh-h-ng-400);
+  --primitive-color-zh-sh-h-ng-500: var(--color-zh-sh-h-ng-500);
+  --primitive-color-zh-sh-h-ng-600: var(--color-zh-sh-h-ng-600);
+  --primitive-color-zh-sh-h-ng-700: var(--color-zh-sh-h-ng-700);
+  --primitive-color-zh-sh-h-ng-800: var(--color-zh-sh-h-ng-800);
+  --primitive-color-zh-sh-h-ng-900: var(--color-zh-sh-h-ng-900);
+  --primitive-color-j-n-s-50: var(--color-j-n-s-50);
+  --primitive-color-j-n-s-100: var(--color-j-n-s-100);
+  --primitive-color-j-n-s-200: var(--color-j-n-s-200);
+  --primitive-color-j-n-s-300: var(--color-j-n-s-300);
+  --primitive-color-j-n-s-400: var(--color-j-n-s-400);
+  --primitive-color-j-n-s-500: var(--color-j-n-s-500);
+  --primitive-color-j-n-s-600: var(--color-j-n-s-600);
+  --primitive-color-j-n-s-700: var(--color-j-n-s-700);
+  --primitive-color-j-n-s-800: var(--color-j-n-s-800);
+  --primitive-color-j-n-s-900: var(--color-j-n-s-900);
+  --primitive-color-cu-l-50: var(--color-cu-l-50);
+  --primitive-color-cu-l-100: var(--color-cu-l-100);
+  --primitive-color-cu-l-200: var(--color-cu-l-200);
+  --primitive-color-cu-l-300: var(--color-cu-l-300);
+  --primitive-color-cu-l-400: var(--color-cu-l-400);
+  --primitive-color-cu-l-500: var(--color-cu-l-500);
+  --primitive-color-cu-l-600: var(--color-cu-l-600);
+  --primitive-color-cu-l-700: var(--color-cu-l-700);
+  --primitive-color-cu-l-800: var(--color-cu-l-800);
+  --primitive-color-cu-l-900: var(--color-cu-l-900);
+  --primitive-color-m-h-i-50: var(--color-m-h-i-50);
+  --primitive-color-m-h-i-100: var(--color-m-h-i-100);
+  --primitive-color-m-h-i-200: var(--color-m-h-i-200);
+  --primitive-color-m-h-i-300: var(--color-m-h-i-300);
+  --primitive-color-m-h-i-400: var(--color-m-h-i-400);
+  --primitive-color-m-h-i-500: var(--color-m-h-i-500);
+  --primitive-color-m-h-i-600: var(--color-m-h-i-600);
+  --primitive-color-m-h-i-700: var(--color-m-h-i-700);
+  --primitive-color-m-h-i-800: var(--color-m-h-i-800);
+  --primitive-color-m-h-i-900: var(--color-m-h-i-900);
+  --primitive-color-xu-n-zh-50: var(--color-xu-n-zh-50);
+  --primitive-color-xu-n-zh-100: var(--color-xu-n-zh-100);
+  --primitive-color-xu-n-zh-200: var(--color-xu-n-zh-200);
+  --primitive-color-xu-n-zh-300: var(--color-xu-n-zh-300);
+  --primitive-color-xu-n-zh-400: var(--color-xu-n-zh-400);
+  --primitive-color-xu-n-zh-500: var(--color-xu-n-zh-500);
+  --primitive-color-xu-n-zh-600: var(--color-xu-n-zh-600);
+  --primitive-color-xu-n-zh-700: var(--color-xu-n-zh-700);
+  --primitive-color-xu-n-zh-800: var(--color-xu-n-zh-800);
+  --primitive-color-xu-n-zh-900: var(--color-xu-n-zh-900);
+  --primitive-color-z-t-n-50: var(--color-z-t-n-50);
+  --primitive-color-z-t-n-100: var(--color-z-t-n-100);
+  --primitive-color-z-t-n-200: var(--color-z-t-n-200);
+  --primitive-color-z-t-n-300: var(--color-z-t-n-300);
+  --primitive-color-z-t-n-400: var(--color-z-t-n-400);
+  --primitive-color-z-t-n-500: var(--color-z-t-n-500);
+  --primitive-color-z-t-n-600: var(--color-z-t-n-600);
+  --primitive-color-z-t-n-700: var(--color-z-t-n-700);
+  --primitive-color-z-t-n-800: var(--color-z-t-n-800);
+  --primitive-color-z-t-n-900: var(--color-z-t-n-900);
+  --primitive-color-neutral-50: var(--color-neutral-50);
+  --primitive-color-neutral-100: var(--color-neutral-100);
+  --primitive-color-neutral-200: var(--color-neutral-200);
+  --primitive-color-neutral-300: var(--color-neutral-300);
+  --primitive-color-neutral-400: var(--color-neutral-400);
+  --primitive-color-neutral-500: var(--color-neutral-500);
+  --primitive-color-neutral-600: var(--color-neutral-600);
+  --primitive-color-neutral-700: var(--color-neutral-700);
+  --primitive-color-neutral-800: var(--color-neutral-800);
+  --primitive-color-neutral-900: var(--color-neutral-900);
+  --primitive-color-accent-50: var(--color-accent-50);
+  --primitive-color-accent-100: var(--color-accent-100);
+  --primitive-color-accent-200: var(--color-accent-200);
+  --primitive-color-accent-300: var(--color-accent-300);
+  --primitive-color-accent-400: var(--color-accent-400);
+  --primitive-color-accent-500: var(--color-accent-500);
+  --primitive-color-accent-600: var(--color-accent-600);
+  --primitive-color-accent-700: var(--color-accent-700);
+  --primitive-color-accent-800: var(--color-accent-800);
+  --primitive-color-accent-900: var(--color-accent-900);
+
+  /* Semantic tokens */
+  /* Page background */
+  --background-canvas: var(--primitive-color-neutral-50);
+  /* Card/surface background */
+  --background-surface: #FFFFFF;
+  /* Muted background */
+  --background-muted: var(--primitive-color-neutral-100);
+  /* Primary text */
+  --text-primary: var(--primitive-color-neutral-900);
+  /* Secondary text */
+  --text-secondary: var(--primitive-color-neutral-600);
+  /* Muted/disabled text */
+  --text-muted: var(--primitive-color-neutral-500);
+  /* Text on dark backgrounds */
+  --text-inverse: var(--primitive-color-neutral-50);
+  /* Primary interactive (buttons, links) */
+  --interactive-primary: var(--primitive-color-zh-sh-h-ng-500);
+  /* Primary interactive hover */
+  --interactive-primary-hover: var(--primitive-color-zh-sh-h-ng-600);
+  /* Primary interactive active */
+  --interactive-primary-active: var(--primitive-color-zh-sh-h-ng-700);
+  /* Default border */
+  --border-default: var(--primitive-color-neutral-200);
+  /* Strong border */
+  --border-strong: var(--primitive-color-neutral-400);
+  /* Error — WCAG-compliant red */
+  --status-error: #DC2626;
+  /* Success — WCAG-compliant green */
+  --status-success: #16A34A;
+  /* Warning — WCAG AA amber (4.5:1+ on white) */
+  --status-warning: #A16207;
+  /* Info status */
+  --status-info: var(--primitive-color-zh-sh-h-ng-500);
+  /* Focus ring color */
+  --focus-ring: var(--primitive-color-zh-sh-h-ng-500);
+  /* Keyboard focus indicator */
+  --accessibility-focus-visible: var(--primitive-color-zh-sh-h-ng-500);
+}
+
+/* Dark mode semantic tokens */
+[data-theme="dark"] {
+  /* Page background — dark */
+  --background-canvas: var(--primitive-color-neutral-900);
+  /* Card/surface — dark */
+  --background-surface: var(--primitive-color-neutral-800);
+  /* Muted background — dark */
+  --background-muted: var(--primitive-color-neutral-700);
+  /* Primary text — dark */
+  --text-primary: var(--primitive-color-neutral-50);
+  /* Secondary text — dark */
+  --text-secondary: var(--primitive-color-neutral-300);
+  /* Muted text — dark */
+  --text-muted: var(--primitive-color-neutral-500);
+  /* Text on light backgrounds — dark */
+  --text-inverse: var(--primitive-color-neutral-900);
+  /* Primary interactive — dark */
+  --interactive-primary: var(--primitive-color-zh-sh-h-ng-400);
+  /* Primary hover — dark */
+  --interactive-primary-hover: var(--primitive-color-zh-sh-h-ng-300);
+  /* Primary active — dark */
+  --interactive-primary-active: var(--primitive-color-zh-sh-h-ng-200);
+  /* Default border — dark */
+  --border-default: var(--primitive-color-neutral-700);
+  /* Strong border — dark */
+  --border-strong: var(--primitive-color-neutral-500);
+  /* Error — WCAG-compliant red (dark) */
+  --status-error: #EF4444;
+  /* Success — WCAG-compliant green (dark) */
+  --status-success: #22C55E;
+  /* Warning — WCAG-compliant amber (dark) */
+  --status-warning: #EAB308;
+  /* Info — dark */
+  --status-info: var(--primitive-color-zh-sh-h-ng-400);
+  /* Focus ring — dark */
+  --focus-ring: var(--primitive-color-zh-sh-h-ng-400);
+  /* Keyboard focus — dark */
+  --accessibility-focus-visible: var(--primitive-color-zh-sh-h-ng-400);
+}