@syncupsuite/themes 0.2.0 → 0.3.0

package/src/shuimo-modern/tokens.css

@@ -0,0 +1,325 @@
+/* shuimo-modern — Design Tokens */
+/* Generated by @syncupsuite/transformers */
+
+:root {
+  /* --- Primitive Colors --- */
+  /* Mò Shí (墨石) 50 */
+  --primitive-color-m-sh-50: #F5F5F5;
+  /* Mò Shí (墨石) 100 */
+  --primitive-color-m-sh-100: #C3C2C1;
+  /* Mò Shí (墨石) 200 */
+  --primitive-color-m-sh-200: #929291;
+  /* Mò Shí (墨石) 300 */
+  --primitive-color-m-sh-300: #656463;
+  /* Mò Shí (墨石) 400 */
+  --primitive-color-m-sh-400: #3B3A39;
+  /* Mò Shí (墨石) 500 */
+  --primitive-color-m-sh-500: #151413;
+  /* Mò Shí (墨石) 600 */
+  --primitive-color-m-sh-600: #11100F;
+  /* Mò Shí (墨石) 700 */
+  --primitive-color-m-sh-700: #0D0C0B;
+  /* Mò Shí (墨石) 800 */
+  --primitive-color-m-sh-800: #090908;
+  /* Mò Shí (墨石) 900 */
+  --primitive-color-m-sh-900: #060605;
+  /* Xuān Zhǐ (宣紙) 50 */
+  --primitive-color-xu-n-zh-50: #F6F5F1;
+  /* Xuān Zhǐ (宣紙) 100 */
+  --primitive-color-xu-n-zh-100: #F6F4EE;
+  /* Xuān Zhǐ (宣紙) 200 */
+  --primitive-color-xu-n-zh-200: #F5F3EB;
+  /* Xuān Zhǐ (宣紙) 300 */
+  --primitive-color-xu-n-zh-300: #F5F1E8;
+  /* Xuān Zhǐ (宣紙) 400 */
+  --primitive-color-xu-n-zh-400: #F4F0E4;
+  /* Xuān Zhǐ (宣紙) 500 */
+  --primitive-color-xu-n-zh-500: #F4EFE1;
+  /* Xuān Zhǐ (宣紙) 600 */
+  --primitive-color-xu-n-zh-600: #B0ACA0;
+  /* Xuān Zhǐ (宣紙) 700 */
+  --primitive-color-xu-n-zh-700: #716D64;
+  /* Xuān Zhǐ (宣紙) 800 */
+  --primitive-color-xu-n-zh-800: #37352D;
+  /* Xuān Zhǐ (宣紙) 900 */
+  --primitive-color-xu-n-zh-900: #070603;
+  /* Qīng Huā (青花) 50 */
+  --primitive-color-q-ng-hu-50: #EBF6FF;
+  /* Qīng Huā (青花) 100 */
+  --primitive-color-q-ng-hu-100: #C9DAF2;
+  /* Qīng Huā (青花) 200 */
+  --primitive-color-q-ng-hu-200: #A8BFDF;
+  /* Qīng Huā (青花) 300 */
+  --primitive-color-q-ng-hu-300: #88A4CC;
+  /* Qīng Huā (青花) 400 */
+  --primitive-color-q-ng-hu-400: #6989B8;
+  /* Qīng Huā (青花) 500 */
+  --primitive-color-q-ng-hu-500: #4A6FA5;
+  /* Qīng Huā (青花) 600 */
+  --primitive-color-q-ng-hu-600: #31517F;
+  /* Qīng Huā (青花) 700 */
+  --primitive-color-q-ng-hu-700: #1A355C;
+  /* Qīng Huā (青花) 800 */
+  --primitive-color-q-ng-hu-800: #051B3A;
+  /* Qīng Huā (青花) 900 */
+  --primitive-color-q-ng-hu-900: #00041B;
+  /* Zhū Yìn (朱印) 50 */
+  --primitive-color-zh-y-n-50: #FFEDE8;
+  /* Zhū Yìn (朱印) 100 */
+  --primitive-color-zh-y-n-100: #FDCBC4;
+  /* Zhū Yìn (朱印) 200 */
+  --primitive-color-zh-y-n-200: #EDAAA2;
+  /* Zhū Yìn (朱印) 300 */
+  --primitive-color-zh-y-n-300: #DB8A80;
+  /* Zhū Yìn (朱印) 400 */
+  --primitive-color-zh-y-n-400: #C9695F;
+  /* Zhū Yìn (朱印) 500 */
+  --primitive-color-zh-y-n-500: #B5473E;
+  /* Zhū Yìn (朱印) 600 */
+  --primitive-color-zh-y-n-600: #8C2D26;
+  /* Zhū Yìn (朱印) 700 */
+  --primitive-color-zh-y-n-700: #651210;
+  /* Zhū Yìn (朱印) 800 */
+  --primitive-color-zh-y-n-800: #400000;
+  /* Zhū Yìn (朱印) 900 */
+  --primitive-color-zh-y-n-900: #1D0000;
+  /* Yān Huī (烟灰) 50 */
+  --primitive-color-y-n-hu-50: #F6F5F3;
+  /* Yān Huī (烟灰) 100 */
+  --primitive-color-y-n-hu-100: #E0DEDB;
+  /* Yān Huī (烟灰) 200 */
+  --primitive-color-y-n-hu-200: #CAC7C3;
+  /* Yān Huī (烟灰) 300 */
+  --primitive-color-y-n-hu-300: #B5B1AC;
+  /* Yān Huī (烟灰) 400 */
+  --primitive-color-y-n-hu-400: #A09B96;
+  /* Yān Huī (烟灰) 500 */
+  --primitive-color-y-n-hu-500: #8B8680;
+  /* Yān Huī (烟灰) 600 */
+  --primitive-color-y-n-hu-600: #66625C;
+  /* Yān Huī (烟灰) 700 */
+  --primitive-color-y-n-hu-700: #433F3B;
+  /* Yān Huī (烟灰) 800 */
+  --primitive-color-y-n-hu-800: #23201D;
+  /* Yān Huī (烟灰) 900 */
+  --primitive-color-y-n-hu-900: #070504;
+  /* Qīng Zhú (青竹) 50 */
+  --primitive-color-q-ng-zh-50: #EDF9F0;
+  /* Qīng Zhú (青竹) 100 */
+  --primitive-color-q-ng-zh-100: #CFE2D5;
+  /* Qīng Zhú (青竹) 200 */
+  --primitive-color-q-ng-zh-200: #B2CCBA;
+  /* Qīng Zhú (青竹) 300 */
+  --primitive-color-q-ng-zh-300: #96B6A0;
+  /* Qīng Zhú (青竹) 400 */
+  --primitive-color-q-ng-zh-400: #7AA187;
+  /* Qīng Zhú (青竹) 500 */
+  --primitive-color-q-ng-zh-500: #5E8C6E;
+  /* Qīng Zhú (青竹) 600 */
+  --primitive-color-q-ng-zh-600: #40684E;
+  /* Qīng Zhú (青竹) 700 */
+  --primitive-color-q-ng-zh-700: #234530;
+  /* Qīng Zhú (青竹) 800 */
+  --primitive-color-q-ng-zh-800: #082615;
+  /* Qīng Zhú (青竹) 900 */
+  --primitive-color-q-ng-zh-900: #000902;
+  /* Neutral 50 */
+  --primitive-color-neutral-50: #FDF7F1;
+  /* Neutral 100 */
+  --primitive-color-neutral-100: #F3EDE8;
+  /* Neutral 200 */
+  --primitive-color-neutral-200: #E3DDD7;
+  /* Neutral 300 */
+  --primitive-color-neutral-300: #C9C3BD;
+  /* Neutral 400 */
+  --primitive-color-neutral-400: #9D9792;
+  /* Neutral 500 */
+  --primitive-color-neutral-500: #736E69;
+  /* Neutral 600 */
+  --primitive-color-neutral-600: #514C47;
+  /* Neutral 700 */
+  --primitive-color-neutral-700: #36322D;
+  /* Neutral 800 */
+  --primitive-color-neutral-800: #1E1A16;
+  /* Neutral 900 */
+  --primitive-color-neutral-900: #0A0704;
+  /* Accent 50 */
+  --primitive-color-accent-50: #F9F4F0;
+  /* Accent 100 */
+  --primitive-color-accent-100: #D6CFC8;
+  /* Accent 200 */
+  --primitive-color-accent-200: #B4ABA2;
+  /* Accent 300 */
+  --primitive-color-accent-300: #94887D;
+  /* Accent 400 */
+  --primitive-color-accent-400: #74675A;
+  /* Accent 500 */
+  --primitive-color-accent-500: #564739;
+  /* Accent 600 */
+  --primitive-color-accent-600: #413428;
+  /* Accent 700 */
+  --primitive-color-accent-700: #2E2319;
+  /* Accent 800 */
+  --primitive-color-accent-800: #1B120A;
+  /* Accent 900 */
+  --primitive-color-accent-900: #0A0501;
+
+  /* --- Typography --- */
+  /* Heading font family */
+  --primitive-typography-family-heading: "Noto Serif JP", "Noto Serif", Georgia, serif;
+  /* Body font family */
+  --primitive-typography-family-body: "Noto Serif JP", "Noto Serif", Georgia, serif;
+  /* Monospace font family */
+  --primitive-typography-family-mono: "JetBrains Mono", "Fira Code", monospace;
+  /* Font size xs */
+  --primitive-typography-size-xs: 0.75rem;
+  /* Font size sm */
+  --primitive-typography-size-sm: 0.875rem;
+  /* Font size base */
+  --primitive-typography-size-base: 1rem;
+  /* Font size lg */
+  --primitive-typography-size-lg: 1.125rem;
+  /* Font size xl */
+  --primitive-typography-size-xl: 1.25rem;
+  /* Font size 2xl */
+  --primitive-typography-size-2xl: 1.5rem;
+  /* Font size 3xl */
+  --primitive-typography-size-3xl: 1.875rem;
+  /* Font size 4xl */
+  --primitive-typography-size-4xl: 2.25rem;
+  /* Font weight normal */
+  --primitive-typography-weight-normal: 400;
+  /* Font weight medium */
+  --primitive-typography-weight-medium: 500;
+  /* Font weight semibold */
+  --primitive-typography-weight-semibold: 600;
+  /* Font weight bold */
+  --primitive-typography-weight-bold: 700;
+  /* Line height tight */
+  --primitive-typography-lineHeight-tight: 1.25;
+  /* Line height normal */
+  --primitive-typography-lineHeight-normal: 1.5;
+  /* Line height relaxed */
+  --primitive-typography-lineHeight-relaxed: 1.75;
+
+  /* --- Spacing --- */
+  /* Spacing 0 (0px) */
+  --primitive-spacing-0: 0px;
+  /* Spacing 1 (4px) */
+  --primitive-spacing-1: 4px;
+  /* Spacing 2 (8px) */
+  --primitive-spacing-2: 8px;
+  /* Spacing 3 (12px) */
+  --primitive-spacing-3: 12px;
+  /* Spacing 4 (16px) */
+  --primitive-spacing-4: 16px;
+  /* Spacing 5 (20px) */
+  --primitive-spacing-5: 20px;
+  /* Spacing 6 (24px) */
+  --primitive-spacing-6: 24px;
+  /* Spacing 8 (32px) */
+  --primitive-spacing-8: 32px;
+  /* Spacing 10 (40px) */
+  --primitive-spacing-10: 40px;
+  /* Spacing 12 (48px) */
+  --primitive-spacing-12: 48px;
+  /* Spacing 16 (64px) */
+  --primitive-spacing-16: 64px;
+  /* Spacing 20 (80px) */
+  --primitive-spacing-20: 80px;
+  /* Spacing 0.5 (2px) */
+  --primitive-spacing-0-5: 2px;
+  /* Spacing 1.5 (6px) */
+  --primitive-spacing-1-5: 6px;
+
+  /* --- Border Radius --- */
+  /* Border radius none */
+  --primitive-radius-none: 0px;
+  /* Border radius sm */
+  --primitive-radius-sm: 2px;
+  /* Border radius md */
+  --primitive-radius-md: 4px;
+  /* Border radius lg */
+  --primitive-radius-lg: 6px;
+  /* Border radius xl */
+  --primitive-radius-xl: 8px;
+  /* Border radius full */
+  --primitive-radius-full: 9999px;
+
+  /* --- Semantic Tokens (Light) --- */
+  /* 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-m-sh-500);
+  /* Primary interactive hover */
+  --interactive-primary-hover: var(--primitive-color-m-sh-600);
+  /* Primary interactive active */
+  --interactive-primary-active: var(--primitive-color-m-sh-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-m-sh-500);
+  /* Focus ring color */
+  --focus-ring: var(--primitive-color-m-sh-500);
+  /* Keyboard focus indicator */
+  --accessibility-focus-visible: var(--primitive-color-m-sh-500);
+}
+
+[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-y-n-400);
+  /* Primary hover — dark */
+  --interactive-primary-hover: var(--primitive-color-zh-y-n-300);
+  /* Primary active — dark */
+  --interactive-primary-active: var(--primitive-color-zh-y-n-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-y-n-400);
+  /* Focus ring — dark */
+  --focus-ring: var(--primitive-color-zh-y-n-400);
+  /* Keyboard focus — dark */
+  --accessibility-focus-visible: var(--primitive-color-zh-y-n-400);
+}