@syncupsuite/themes 0.2.2 → 0.3.1

package/src/shuimo-modern/meta.json

@@ -0,0 +1,56 @@
+{
+  "id": "shuimo-modern",
+  "name": "Shuǐmò Modern (水墨)",
+  "description": "Shuǐmò Modern (水墨) — Chinese ink wash painting reimagined for digital interfaces, where emptiness speaks as loudly as mark-making",
+  "foundation": {
+    "story": "Shuǐmò (水墨, water-ink) painting distills landscape and emotion to pure tonality — ink diluted across paper, from jet black to pale wash. Originating in Tang Dynasty and perfected through Song and Yuan masters like Mi Fu and Ni Zan, it values the space between strokes. This modern interpretation preserves the tonal hierarchy while adding mineral pigment accents from traditional palette practice.",
+    "philosophy": "留白 (Liúbái) — the eloquence of empty space; what is left unpainted matters as much as what is painted",
+    "era": "Tang Dynasty (618 CE) through contemporary ink art",
+    "harmonyMode": "monochromatic",
+    "radiusTendency": "subtle",
+    "typographyCategory": "humanist-serif"
+  },
+  "seedColors": [
+    {
+      "hex": "#151413",
+      "name": "Mò Shí (墨石)",
+      "tradition": "Ink stone — the She inkstone (歙砚) from Anhui, on which solid ink sticks are ground with water to create painting medium. Nearly black, with a warm undertone from soot and animal glue.",
+      "source": "The Art of Chinese Calligraphy, Jean Long"
+    },
+    {
+      "hex": "#F4EFE1",
+      "name": "Xuān Zhǐ (宣紙)",
+      "tradition": "Xuan paper ground — the warm, absorbent surface that receives ink wash. Its tone is alive, never sterile white.",
+      "source": "Paper and Printing (Science and Civilisation in China), Tsien Tsuen-Hsuin"
+    },
+    {
+      "hex": "#4A6FA5",
+      "name": "Qīng Huā (青花)",
+      "tradition": "Blue-and-white mineral cobalt from Song Dynasty ceramics. The only chromatic color regularly paired with ink wash in literati painting traditions.",
+      "source": "Chinese Ceramics: From the Paleolithic Period to the Qing Dynasty, Li Zhiyan"
+    },
+    {
+      "hex": "#B5473E",
+      "name": "Zhū Yìn (朱印)",
+      "tradition": "Cinnabar seal impression — the vermilion chop mark stamped on finished paintings, the artist's signature in red against ink monochrome.",
+      "source": "Artists' Seals in Chinese Painting, Wang Fangyu"
+    },
+    {
+      "hex": "#8B8680",
+      "name": "Yān Huī (烟灰)",
+      "tradition": "Smoke ash grey — the color of incense residue in a scholar's studio, where painting was a meditative practice.",
+      "source": "Elegant Gathering of the Chinese Literati, Li Chu-tsing"
+    },
+    {
+      "hex": "#5E8C6E",
+      "name": "Qīng Zhú (青竹)",
+      "tradition": "Bamboo green — the living frame around ink paintings. Bamboo was both subject and symbol: flexible, hollow, upright. One of the Four Gentlemen (四君子).",
+      "source": "The Mustard Seed Garden Manual of Painting, Wang Gai"
+    }
+  ],
+  "validation": {
+    "schema": true,
+    "contrast": true,
+    "completeness": true
+  }
+}

package/src/shuimo-modern/tailwind.css

@@ -0,0 +1,421 @@
+@import "tailwindcss";
+
+@theme {
+  /* --- Colors --- */
+  /* Mò Shí (墨石) 50 */
+  --color-m-sh-50: #F5F5F5;
+  /* Mò Shí (墨石) 100 */
+  --color-m-sh-100: #C3C2C1;
+  /* Mò Shí (墨石) 200 */
+  --color-m-sh-200: #929291;
+  /* Mò Shí (墨石) 300 */
+  --color-m-sh-300: #656463;
+  /* Mò Shí (墨石) 400 */
+  --color-m-sh-400: #3B3A39;
+  /* Mò Shí (墨石) 500 */
+  --color-m-sh-500: #151413;
+  /* Mò Shí (墨石) 600 */
+  --color-m-sh-600: #11100F;
+  /* Mò Shí (墨石) 700 */
+  --color-m-sh-700: #0D0C0B;
+  /* Mò Shí (墨石) 800 */
+  --color-m-sh-800: #090908;
+  /* Mò Shí (墨石) 900 */
+  --color-m-sh-900: #060605;
+  /* Xuān Zhǐ (宣紙) 50 */
+  --color-xu-n-zh-50: #F6F5F1;
+  /* Xuān Zhǐ (宣紙) 100 */
+  --color-xu-n-zh-100: #F6F4EE;
+  /* Xuān Zhǐ (宣紙) 200 */
+  --color-xu-n-zh-200: #F5F3EB;
+  /* Xuān Zhǐ (宣紙) 300 */
+  --color-xu-n-zh-300: #F5F1E8;
+  /* Xuān Zhǐ (宣紙) 400 */
+  --color-xu-n-zh-400: #F4F0E4;
+  /* Xuān Zhǐ (宣紙) 500 */
+  --color-xu-n-zh-500: #F4EFE1;
+  /* Xuān Zhǐ (宣紙) 600 */
+  --color-xu-n-zh-600: #B0ACA0;
+  /* Xuān Zhǐ (宣紙) 700 */
+  --color-xu-n-zh-700: #716D64;
+  /* Xuān Zhǐ (宣紙) 800 */
+  --color-xu-n-zh-800: #37352D;
+  /* Xuān Zhǐ (宣紙) 900 */
+  --color-xu-n-zh-900: #070603;
+  /* Qīng Huā (青花) 50 */
+  --color-q-ng-hu-50: #EBF6FF;
+  /* Qīng Huā (青花) 100 */
+  --color-q-ng-hu-100: #C9DAF2;
+  /* Qīng Huā (青花) 200 */
+  --color-q-ng-hu-200: #A8BFDF;
+  /* Qīng Huā (青花) 300 */
+  --color-q-ng-hu-300: #88A4CC;
+  /* Qīng Huā (青花) 400 */
+  --color-q-ng-hu-400: #6989B8;
+  /* Qīng Huā (青花) 500 */
+  --color-q-ng-hu-500: #4A6FA5;
+  /* Qīng Huā (青花) 600 */
+  --color-q-ng-hu-600: #31517F;
+  /* Qīng Huā (青花) 700 */
+  --color-q-ng-hu-700: #1A355C;
+  /* Qīng Huā (青花) 800 */
+  --color-q-ng-hu-800: #051B3A;
+  /* Qīng Huā (青花) 900 */
+  --color-q-ng-hu-900: #00041B;
+  /* Zhū Yìn (朱印) 50 */
+  --color-zh-y-n-50: #FFEDE8;
+  /* Zhū Yìn (朱印) 100 */
+  --color-zh-y-n-100: #FDCBC4;
+  /* Zhū Yìn (朱印) 200 */
+  --color-zh-y-n-200: #EDAAA2;
+  /* Zhū Yìn (朱印) 300 */
+  --color-zh-y-n-300: #DB8A80;
+  /* Zhū Yìn (朱印) 400 */
+  --color-zh-y-n-400: #C9695F;
+  /* Zhū Yìn (朱印) 500 */
+  --color-zh-y-n-500: #B5473E;
+  /* Zhū Yìn (朱印) 600 */
+  --color-zh-y-n-600: #8C2D26;
+  /* Zhū Yìn (朱印) 700 */
+  --color-zh-y-n-700: #651210;
+  /* Zhū Yìn (朱印) 800 */
+  --color-zh-y-n-800: #400000;
+  /* Zhū Yìn (朱印) 900 */
+  --color-zh-y-n-900: #1D0000;
+  /* Yān Huī (烟灰) 50 */
+  --color-y-n-hu-50: #F6F5F3;
+  /* Yān Huī (烟灰) 100 */
+  --color-y-n-hu-100: #E0DEDB;
+  /* Yān Huī (烟灰) 200 */
+  --color-y-n-hu-200: #CAC7C3;
+  /* Yān Huī (烟灰) 300 */
+  --color-y-n-hu-300: #B5B1AC;
+  /* Yān Huī (烟灰) 400 */
+  --color-y-n-hu-400: #A09B96;
+  /* Yān Huī (烟灰) 500 */
+  --color-y-n-hu-500: #8B8680;
+  /* Yān Huī (烟灰) 600 */
+  --color-y-n-hu-600: #66625C;
+  /* Yān Huī (烟灰) 700 */
+  --color-y-n-hu-700: #433F3B;
+  /* Yān Huī (烟灰) 800 */
+  --color-y-n-hu-800: #23201D;
+  /* Yān Huī (烟灰) 900 */
+  --color-y-n-hu-900: #070504;
+  /* Qīng Zhú (青竹) 50 */
+  --color-q-ng-zh-50: #EDF9F0;
+  /* Qīng Zhú (青竹) 100 */
+  --color-q-ng-zh-100: #CFE2D5;
+  /* Qīng Zhú (青竹) 200 */
+  --color-q-ng-zh-200: #B2CCBA;
+  /* Qīng Zhú (青竹) 300 */
+  --color-q-ng-zh-300: #96B6A0;
+  /* Qīng Zhú (青竹) 400 */
+  --color-q-ng-zh-400: #7AA187;
+  /* Qīng Zhú (青竹) 500 */
+  --color-q-ng-zh-500: #5E8C6E;
+  /* Qīng Zhú (青竹) 600 */
+  --color-q-ng-zh-600: #40684E;
+  /* Qīng Zhú (青竹) 700 */
+  --color-q-ng-zh-700: #234530;
+  /* Qīng Zhú (青竹) 800 */
+  --color-q-ng-zh-800: #082615;
+  /* Qīng Zhú (青竹) 900 */
+  --color-q-ng-zh-900: #000902;
+  /* Neutral 50 */
+  --color-neutral-50: #FDF7F1;
+  /* Neutral 100 */
+  --color-neutral-100: #F3EDE8;
+  /* Neutral 200 */
+  --color-neutral-200: #E3DDD7;
+  /* Neutral 300 */
+  --color-neutral-300: #C9C3BD;
+  /* Neutral 400 */
+  --color-neutral-400: #9D9792;
+  /* Neutral 500 */
+  --color-neutral-500: #736E69;
+  /* Neutral 600 */
+  --color-neutral-600: #514C47;
+  /* Neutral 700 */
+  --color-neutral-700: #36322D;
+  /* Neutral 800 */
+  --color-neutral-800: #1E1A16;
+  /* Neutral 900 */
+  --color-neutral-900: #0A0704;
+  /* Accent 50 */
+  --color-accent-50: #F9F4F0;
+  /* Accent 100 */
+  --color-accent-100: #D6CFC8;
+  /* Accent 200 */
+  --color-accent-200: #B4ABA2;
+  /* Accent 300 */
+  --color-accent-300: #94887D;
+  /* Accent 400 */
+  --color-accent-400: #74675A;
+  /* Accent 500 */
+  --color-accent-500: #564739;
+  /* Accent 600 */
+  --color-accent-600: #413428;
+  /* Accent 700 */
+  --color-accent-700: #2E2319;
+  /* Accent 800 */
+  --color-accent-800: #1B120A;
+  /* Accent 900 */
+  --color-accent-900: #0A0501;
+
+  /* --- 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: "Noto Serif JP", "Noto Serif", Georgia, serif;
+  /* Body font family */
+  --font-body: "Noto Serif JP", "Noto Serif", Georgia, 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-m-sh-50: var(--color-m-sh-50);
+  --primitive-color-m-sh-100: var(--color-m-sh-100);
+  --primitive-color-m-sh-200: var(--color-m-sh-200);
+  --primitive-color-m-sh-300: var(--color-m-sh-300);
+  --primitive-color-m-sh-400: var(--color-m-sh-400);
+  --primitive-color-m-sh-500: var(--color-m-sh-500);
+  --primitive-color-m-sh-600: var(--color-m-sh-600);
+  --primitive-color-m-sh-700: var(--color-m-sh-700);
+  --primitive-color-m-sh-800: var(--color-m-sh-800);
+  --primitive-color-m-sh-900: var(--color-m-sh-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-q-ng-hu-50: var(--color-q-ng-hu-50);
+  --primitive-color-q-ng-hu-100: var(--color-q-ng-hu-100);
+  --primitive-color-q-ng-hu-200: var(--color-q-ng-hu-200);
+  --primitive-color-q-ng-hu-300: var(--color-q-ng-hu-300);
+  --primitive-color-q-ng-hu-400: var(--color-q-ng-hu-400);
+  --primitive-color-q-ng-hu-500: var(--color-q-ng-hu-500);
+  --primitive-color-q-ng-hu-600: var(--color-q-ng-hu-600);
+  --primitive-color-q-ng-hu-700: var(--color-q-ng-hu-700);
+  --primitive-color-q-ng-hu-800: var(--color-q-ng-hu-800);
+  --primitive-color-q-ng-hu-900: var(--color-q-ng-hu-900);
+  --primitive-color-zh-y-n-50: var(--color-zh-y-n-50);
+  --primitive-color-zh-y-n-100: var(--color-zh-y-n-100);
+  --primitive-color-zh-y-n-200: var(--color-zh-y-n-200);
+  --primitive-color-zh-y-n-300: var(--color-zh-y-n-300);
+  --primitive-color-zh-y-n-400: var(--color-zh-y-n-400);
+  --primitive-color-zh-y-n-500: var(--color-zh-y-n-500);
+  --primitive-color-zh-y-n-600: var(--color-zh-y-n-600);
+  --primitive-color-zh-y-n-700: var(--color-zh-y-n-700);
+  --primitive-color-zh-y-n-800: var(--color-zh-y-n-800);
+  --primitive-color-zh-y-n-900: var(--color-zh-y-n-900);
+  --primitive-color-y-n-hu-50: var(--color-y-n-hu-50);
+  --primitive-color-y-n-hu-100: var(--color-y-n-hu-100);
+  --primitive-color-y-n-hu-200: var(--color-y-n-hu-200);
+  --primitive-color-y-n-hu-300: var(--color-y-n-hu-300);
+  --primitive-color-y-n-hu-400: var(--color-y-n-hu-400);
+  --primitive-color-y-n-hu-500: var(--color-y-n-hu-500);
+  --primitive-color-y-n-hu-600: var(--color-y-n-hu-600);
+  --primitive-color-y-n-hu-700: var(--color-y-n-hu-700);
+  --primitive-color-y-n-hu-800: var(--color-y-n-hu-800);
+  --primitive-color-y-n-hu-900: var(--color-y-n-hu-900);
+  --primitive-color-q-ng-zh-50: var(--color-q-ng-zh-50);
+  --primitive-color-q-ng-zh-100: var(--color-q-ng-zh-100);
+  --primitive-color-q-ng-zh-200: var(--color-q-ng-zh-200);
+  --primitive-color-q-ng-zh-300: var(--color-q-ng-zh-300);
+  --primitive-color-q-ng-zh-400: var(--color-q-ng-zh-400);
+  --primitive-color-q-ng-zh-500: var(--color-q-ng-zh-500);
+  --primitive-color-q-ng-zh-600: var(--color-q-ng-zh-600);
+  --primitive-color-q-ng-zh-700: var(--color-q-ng-zh-700);
+  --primitive-color-q-ng-zh-800: var(--color-q-ng-zh-800);
+  --primitive-color-q-ng-zh-900: var(--color-q-ng-zh-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-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);
+}
+
+/* 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-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);
+}