@syncupsuite/themes 0.3.0 → 0.4.0

package/src/tang-imperial/tailwind.css

@@ -235,6 +235,28 @@
 
 }
 
+/* === 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) */

package/src/tang-imperial/tokens.css

@@ -1,5 +1,19 @@
-/* tang-imperial — Design Tokens */
-/* Generated by @syncupsuite/transformers */
+/* ═══════════════════════════════════════════════════════════════
+ * tang-imperial — Design Tokens
+ * Generated by @syncupsuite/transformers
+ *
+ * CONSUMER API — Use these semantic tokens in your styles:
+ *
+ * Backgrounds:  var(--background-canvas | surface | muted)
+ * Text:         var(--text-primary | secondary | muted | inverse)
+ * Interactive:  var(--interactive-primary | primary-hover | primary-active)
+ * Borders:      var(--border-default | strong)
+ * Status:       var(--status-error | success | warning | info)
+ * Focus:        var(--focus-ring)
+ *
+ * Dark mode:    Add [data-theme="dark"] to a parent element.
+ * Primitives:   --primitive-color-*, --primitive-spacing-*, etc.
+ * ═══════════════════════════════════════════════════════════════ */
 
 :root {
   /* --- Primitive Colors --- */

package/src/wiener-werkstaette/meta.json

@@ -0,0 +1,44 @@
+{
+  "id": "wiener-werkstaette",
+  "name": "Wiener Werkstätte",
+  "description": "Wiener Werkstätte — Vienna Workshop, founded 1903. Josef Hoffmann and Koloman Moser's Gesamtkunstwerk vocabulary: geometric rigor, Klimt gilding, and Biedermeier warmth.",
+  "foundation": {
+    "story": "Josef Hoffmann and Koloman Moser's Vienna Workshop unified fine art and craft under geometric rigor. Their black-and-white checkerboard motifs, Klimt-gilded surfaces, and Biedermeier cream walls created a distinctly Viennese vocabulary that lives between ornament and abstraction.",
+    "philosophy": "Gesamtkunstwerk — the total work of art, where every object from building to teaspoon belongs to the same aesthetic whole",
+    "era": "Early Modernist — 1903–1932",
+    "harmonyMode": "golden-ratio",
+    "radiusTendency": "subtle",
+    "typographyCategory": "geometric-sans"
+  },
+  "seedColors": [
+    {
+      "hex": "#C8A96E",
+      "name": "Gold (Klimt-Gold)",
+      "tradition": "Klimt gilding — gold leaf on Secession paintings. The warmth and material opulence of Vienna's artistic golden age.",
+      "source": "Gustav Klimt: Painting, Design and Modern Life, T. Natter & G. Frodl"
+    },
+    {
+      "hex": "#B5473A",
+      "name": "Crimson (Werkstätte Rot)",
+      "tradition": "Werkstätte textile dyes — lacquered tin boxes and woven fabric. The warm red of Viennese craft tradition.",
+      "source": "Wiener Werkstätte: Design in Vienna 1903–1932, C. Brandstätter"
+    },
+    {
+      "hex": "#1C1C1A",
+      "name": "Charcoal (Schmiedeeisen)",
+      "tradition": "Secession building wrought iron — Josef Hoffmann's geometric ironwork. The black of structural craft.",
+      "source": "Josef Hoffmann: Interiors 1902–1913, C. Long"
+    },
+    {
+      "hex": "#F5F0E8",
+      "name": "Cream (Wiener Weiß)",
+      "tradition": "Viennese plasterwork walls — Biedermeier domestic interiors. The warm white ground of all Werkstätte composition.",
+      "source": "Vienna 1900: Art, Life & Culture, C. Schorske"
+    }
+  ],
+  "validation": {
+    "schema": true,
+    "contrast": false,
+    "completeness": true
+  }
+}

package/src/wiener-werkstaette/tailwind.css

@@ -0,0 +1,361 @@
+@import "tailwindcss";
+
+@theme {
+  /* --- Colors --- */
+  /* Gold (Klimt-Gold) 50 */
+  --color-gold-klimt-gold-50: #FCF4E5;
+  /* Gold (Klimt-Gold) 100 */
+  --color-gold-klimt-gold-100: #F2E5CE;
+  /* Gold (Klimt-Gold) 200 */
+  --color-gold-klimt-gold-200: #E7D6B6;
+  /* Gold (Klimt-Gold) 300 */
+  --color-gold-klimt-gold-300: #DDC79E;
+  /* Gold (Klimt-Gold) 400 */
+  --color-gold-klimt-gold-400: #D2B886;
+  /* Gold (Klimt-Gold) 500 */
+  --color-gold-klimt-gold-500: #C8A96E;
+  /* Gold (Klimt-Gold) 600 */
+  --color-gold-klimt-gold-600: #947A46;
+  /* Gold (Klimt-Gold) 700 */
+  --color-gold-klimt-gold-700: #634D21;
+  /* Gold (Klimt-Gold) 800 */
+  --color-gold-klimt-gold-800: #362500;
+  /* Gold (Klimt-Gold) 900 */
+  --color-gold-klimt-gold-900: #0E0300;
+  /* Crimson (Werkstätte Rot) 50 */
+  --color-crimson-werkst-tte-rot-50: #FFEDE7;
+  /* Crimson (Werkstätte Rot) 100 */
+  --color-crimson-werkst-tte-rot-100: #FDCBC3;
+  /* Crimson (Werkstätte Rot) 200 */
+  --color-crimson-werkst-tte-rot-200: #EDABA0;
+  /* Crimson (Werkstätte Rot) 300 */
+  --color-crimson-werkst-tte-rot-300: #DB8A7D;
+  /* Crimson (Werkstätte Rot) 400 */
+  --color-crimson-werkst-tte-rot-400: #C9695C;
+  /* Crimson (Werkstätte Rot) 500 */
+  --color-crimson-werkst-tte-rot-500: #B5473A;
+  /* Crimson (Werkstätte Rot) 600 */
+  --color-crimson-werkst-tte-rot-600: #8C2D23;
+  /* Crimson (Werkstätte Rot) 700 */
+  --color-crimson-werkst-tte-rot-700: #65120C;
+  /* Crimson (Werkstätte Rot) 800 */
+  --color-crimson-werkst-tte-rot-800: #400000;
+  /* Crimson (Werkstätte Rot) 900 */
+  --color-crimson-werkst-tte-rot-900: #1D0000;
+  /* Charcoal (Schmiedeeisen) 50 */
+  --color-charcoal-schmiedeeisen-50: #F5F5F4;
+  /* Charcoal (Schmiedeeisen) 100 */
+  --color-charcoal-schmiedeeisen-100: #C4C4C3;
+  /* Charcoal (Schmiedeeisen) 200 */
+  --color-charcoal-schmiedeeisen-200: #969694;
+  /* Charcoal (Schmiedeeisen) 300 */
+  --color-charcoal-schmiedeeisen-300: #6A6A68;
+  /* Charcoal (Schmiedeeisen) 400 */
+  --color-charcoal-schmiedeeisen-400: #41413F;
+  /* Charcoal (Schmiedeeisen) 500 */
+  --color-charcoal-schmiedeeisen-500: #1C1C1A;
+  /* Charcoal (Schmiedeeisen) 600 */
+  --color-charcoal-schmiedeeisen-600: #161614;
+  /* Charcoal (Schmiedeeisen) 700 */
+  --color-charcoal-schmiedeeisen-700: #10100F;
+  /* Charcoal (Schmiedeeisen) 800 */
+  --color-charcoal-schmiedeeisen-800: #0A0A09;
+  /* Charcoal (Schmiedeeisen) 900 */
+  --color-charcoal-schmiedeeisen-900: #060605;
+  /* Cream (Wiener Weiß) 50 */
+  --color-cream-wiener-wei-50: #F6F5F3;
+  /* Cream (Wiener Weiß) 100 */
+  --color-cream-wiener-wei-100: #F6F4F1;
+  /* Cream (Wiener Weiß) 200 */
+  --color-cream-wiener-wei-200: #F6F3EE;
+  /* Cream (Wiener Weiß) 300 */
+  --color-cream-wiener-wei-300: #F5F2EC;
+  /* Cream (Wiener Weiß) 400 */
+  --color-cream-wiener-wei-400: #F5F1EA;
+  /* Cream (Wiener Weiß) 500 */
+  --color-cream-wiener-wei-500: #F5F0E8;
+  /* Cream (Wiener Weiß) 600 */
+  --color-cream-wiener-wei-600: #B1ADA6;
+  /* Cream (Wiener Weiß) 700 */
+  --color-cream-wiener-wei-700: #716E68;
+  /* Cream (Wiener Weiß) 800 */
+  --color-cream-wiener-wei-800: #373530;
+  /* Cream (Wiener Weiß) 900 */
+  --color-cream-wiener-wei-900: #070604;
+  /* Neutral 50 */
+  --color-neutral-50: #FCF8F1;
+  /* Neutral 100 */
+  --color-neutral-100: #F2EEE7;
+  /* Neutral 200 */
+  --color-neutral-200: #E1DDD7;
+  /* Neutral 300 */
+  --color-neutral-300: #C7C4BD;
+  /* Neutral 400 */
+  --color-neutral-400: #9B9891;
+  /* Neutral 500 */
+  --color-neutral-500: #716E68;
+  /* Neutral 600 */
+  --color-neutral-600: #504D47;
+  /* Neutral 700 */
+  --color-neutral-700: #35322D;
+  /* Neutral 800 */
+  --color-neutral-800: #1D1A15;
+  /* Neutral 900 */
+  --color-neutral-900: #090704;
+  /* Accent 50 */
+  --color-accent-50: #F8F1FF;
+  /* Accent 100 */
+  --color-accent-100: #E1D6FD;
+  /* Accent 200 */
+  --color-accent-200: #CCBCF0;
+  /* Accent 300 */
+  --color-accent-300: #B6A2E3;
+  /* Accent 400 */
+  --color-accent-400: #A289D6;
+  /* Accent 500 */
+  --color-accent-500: #8E6FC8;
+  /* Accent 600 */
+  --color-accent-600: #694E9A;
+  /* Accent 700 */
+  --color-accent-700: #472E6E;
+  /* Accent 800 */
+  --color-accent-800: #271045;
+  /* Accent 900 */
+  --color-accent-900: #0B0020;
+
+  /* --- 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: "Inter", "Futura", system-ui, sans-serif;
+  /* Body font family */
+  --font-body: "Inter", system-ui, sans-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-gold-klimt-gold-50: var(--color-gold-klimt-gold-50);
+  --primitive-color-gold-klimt-gold-100: var(--color-gold-klimt-gold-100);
+  --primitive-color-gold-klimt-gold-200: var(--color-gold-klimt-gold-200);
+  --primitive-color-gold-klimt-gold-300: var(--color-gold-klimt-gold-300);
+  --primitive-color-gold-klimt-gold-400: var(--color-gold-klimt-gold-400);
+  --primitive-color-gold-klimt-gold-500: var(--color-gold-klimt-gold-500);
+  --primitive-color-gold-klimt-gold-600: var(--color-gold-klimt-gold-600);
+  --primitive-color-gold-klimt-gold-700: var(--color-gold-klimt-gold-700);
+  --primitive-color-gold-klimt-gold-800: var(--color-gold-klimt-gold-800);
+  --primitive-color-gold-klimt-gold-900: var(--color-gold-klimt-gold-900);
+  --primitive-color-crimson-werkst-tte-rot-50: var(--color-crimson-werkst-tte-rot-50);
+  --primitive-color-crimson-werkst-tte-rot-100: var(--color-crimson-werkst-tte-rot-100);
+  --primitive-color-crimson-werkst-tte-rot-200: var(--color-crimson-werkst-tte-rot-200);
+  --primitive-color-crimson-werkst-tte-rot-300: var(--color-crimson-werkst-tte-rot-300);
+  --primitive-color-crimson-werkst-tte-rot-400: var(--color-crimson-werkst-tte-rot-400);
+  --primitive-color-crimson-werkst-tte-rot-500: var(--color-crimson-werkst-tte-rot-500);
+  --primitive-color-crimson-werkst-tte-rot-600: var(--color-crimson-werkst-tte-rot-600);
+  --primitive-color-crimson-werkst-tte-rot-700: var(--color-crimson-werkst-tte-rot-700);
+  --primitive-color-crimson-werkst-tte-rot-800: var(--color-crimson-werkst-tte-rot-800);
+  --primitive-color-crimson-werkst-tte-rot-900: var(--color-crimson-werkst-tte-rot-900);
+  --primitive-color-charcoal-schmiedeeisen-50: var(--color-charcoal-schmiedeeisen-50);
+  --primitive-color-charcoal-schmiedeeisen-100: var(--color-charcoal-schmiedeeisen-100);
+  --primitive-color-charcoal-schmiedeeisen-200: var(--color-charcoal-schmiedeeisen-200);
+  --primitive-color-charcoal-schmiedeeisen-300: var(--color-charcoal-schmiedeeisen-300);
+  --primitive-color-charcoal-schmiedeeisen-400: var(--color-charcoal-schmiedeeisen-400);
+  --primitive-color-charcoal-schmiedeeisen-500: var(--color-charcoal-schmiedeeisen-500);
+  --primitive-color-charcoal-schmiedeeisen-600: var(--color-charcoal-schmiedeeisen-600);
+  --primitive-color-charcoal-schmiedeeisen-700: var(--color-charcoal-schmiedeeisen-700);
+  --primitive-color-charcoal-schmiedeeisen-800: var(--color-charcoal-schmiedeeisen-800);
+  --primitive-color-charcoal-schmiedeeisen-900: var(--color-charcoal-schmiedeeisen-900);
+  --primitive-color-cream-wiener-wei-50: var(--color-cream-wiener-wei-50);
+  --primitive-color-cream-wiener-wei-100: var(--color-cream-wiener-wei-100);
+  --primitive-color-cream-wiener-wei-200: var(--color-cream-wiener-wei-200);
+  --primitive-color-cream-wiener-wei-300: var(--color-cream-wiener-wei-300);
+  --primitive-color-cream-wiener-wei-400: var(--color-cream-wiener-wei-400);
+  --primitive-color-cream-wiener-wei-500: var(--color-cream-wiener-wei-500);
+  --primitive-color-cream-wiener-wei-600: var(--color-cream-wiener-wei-600);
+  --primitive-color-cream-wiener-wei-700: var(--color-cream-wiener-wei-700);
+  --primitive-color-cream-wiener-wei-800: var(--color-cream-wiener-wei-800);
+  --primitive-color-cream-wiener-wei-900: var(--color-cream-wiener-wei-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-gold-klimt-gold-500);
+  /* Primary interactive hover */
+  --interactive-primary-hover: var(--primitive-color-gold-klimt-gold-600);
+  /* Primary interactive active */
+  --interactive-primary-active: var(--primitive-color-gold-klimt-gold-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-gold-klimt-gold-500);
+  /* Focus ring color */
+  --focus-ring: var(--primitive-color-gold-klimt-gold-500);
+  /* Keyboard focus indicator */
+  --accessibility-focus-visible: var(--primitive-color-gold-klimt-gold-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-gold-klimt-gold-400);
+  /* Primary hover — dark */
+  --interactive-primary-hover: var(--primitive-color-gold-klimt-gold-300);
+  /* Primary active — dark */
+  --interactive-primary-active: var(--primitive-color-gold-klimt-gold-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-gold-klimt-gold-400);
+  /* Focus ring — dark */
+  --focus-ring: var(--primitive-color-gold-klimt-gold-400);
+  /* Keyboard focus — dark */
+  --accessibility-focus-visible: var(--primitive-color-gold-klimt-gold-400);
+}