@syncupsuite/themes 0.3.0 → 0.4.0

package/src/nihon-minimal/tailwind.css

@@ -195,6 +195,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/nihon-minimal/tokens.css

@@ -1,5 +1,19 @@
-/* nihon-minimal — Design Tokens */
-/* Generated by @syncupsuite/transformers */
+/* ═══════════════════════════════════════════════════════════════
+ * nihon-minimal — 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/nihon-traditional/tailwind.css

@@ -255,6 +255,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/nihon-traditional/tokens.css

@@ -1,5 +1,19 @@
-/* nihon-no-iro-traditional — Design Tokens */
-/* Generated by @syncupsuite/transformers */
+/* ═══════════════════════════════════════════════════════════════
+ * nihon-no-iro-traditional — 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/nordic-modern/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/nordic-modern/tokens.css

@@ -1,5 +1,19 @@
-/* nordic-modern — Design Tokens */
-/* Generated by @syncupsuite/transformers */
+/* ═══════════════════════════════════════════════════════════════
+ * nordic-modern — 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/renaissance/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/renaissance/tokens.css

@@ -1,5 +1,19 @@
-/* renaissance — Design Tokens */
-/* Generated by @syncupsuite/transformers */
+/* ═══════════════════════════════════════════════════════════════
+ * renaissance — 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/shuimo-modern/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/shuimo-modern/tokens.css

@@ -1,5 +1,19 @@
-/* shuimo-modern — Design Tokens */
-/* Generated by @syncupsuite/transformers */
+/* ═══════════════════════════════════════════════════════════════
+ * shuimo-modern — 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/swiss-international/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/swiss-international/tokens.css

@@ -1,5 +1,19 @@
-/* swiss-international-style — Design Tokens */
-/* Generated by @syncupsuite/transformers */
+/* ═══════════════════════════════════════════════════════════════
+ * swiss-international-style — 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/swiss-modernist/meta.json

@@ -0,0 +1,62 @@
+{
+  "id": "swiss-modernist",
+  "name": "Swiss Modernist",
+  "description": "Swiss Modernist — International Typographic Style from Zürich and Basel schools, 1950s–70s. Müller-Brockmann's grid precision, Helvetica, and disciplined color.",
+  "foundation": {
+    "story": "Josef Müller-Brockmann, Armin Hofmann, and Emil Ruder established the International Typographic Style at Zürich's Kunstgewerbeschule and Basel's Allgemeine Gewerbeschule. Helvetica arrived in 1957, designed to say nothing but the message itself. One typeface, one grid, one accent color — the rest is discipline.",
+    "philosophy": "Objectivity over expression. The grid is not a constraint — it is liberation. Typography carries the visual weight; color is used once, with surgical precision.",
+    "era": "Modernist — 1950s–1970s",
+    "harmonyMode": "monochromatic",
+    "radiusTendency": "none",
+    "typographyCategory": "neo-grotesque"
+  },
+  "seedColors": [
+    {
+      "hex": "#3B6EA5",
+      "name": "Himmelblau",
+      "tradition": "Sky blue recurring across Josef Müller-Brockmann's Zürich concert poster series, 1960–72. The structural color of the ITS canon.",
+      "source": "Josef Müller-Brockmann: Pioneer of Swiss Graphic Design, L. Müller"
+    },
+    {
+      "hex": "#C8202A",
+      "name": "Rotkreuz",
+      "tradition": "Red Cross red; Swiss national identity. The single vivid accent deployed against the neutral field — restraint is the principle.",
+      "source": "Swiss Graphic Design: Origins and Growth, R. Hollis"
+    },
+    {
+      "hex": "#64748B",
+      "name": "Bleigrau",
+      "tradition": "Lead gray (Blei = lead). The color of moveable type blocks before inking; the unprinted color of typographic infrastructure.",
+      "source": "Typography, E. Ruder"
+    },
+    {
+      "hex": "#8FA3B1",
+      "name": "Stahl",
+      "tradition": "Steel blue-gray from Swiss precision engineering and Alpine industrial heritage — the color of structural metal and machine casings.",
+      "source": "Grid Systems in Graphic Design, J. Müller-Brockmann"
+    },
+    {
+      "hex": "#4A7C59",
+      "name": "Alpenklee",
+      "tradition": "Alpine clover (Alpenklee). Nature as quiet counterpoint to industrial precision; from Swiss landscape graphic tradition.",
+      "source": "Armin Hofmann: His Work, Quest and Philosophy, A. Hofmann"
+    },
+    {
+      "hex": "#F5F3EE",
+      "name": "Elfenbein",
+      "tradition": "Ivory; the warm white of quality uncoated Swiss printing paper. The ground of all composition.",
+      "source": "Typographic Design: Form and Communication, R. Carter"
+    },
+    {
+      "hex": "#1A2530",
+      "name": "Russ",
+      "tradition": "Soot black (Russ = soot). The color of letterpress ink on uncoated paper — ink-black with depth, not flat digital black.",
+      "source": "The New Typography, J. Tschichold"
+    }
+  ],
+  "validation": {
+    "schema": true,
+    "contrast": true,
+    "completeness": true
+  }
+}