@syncupsuite/themes 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syncupsuite/themes",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Pre-built, culturally-grounded design themes — ready to use",
   "license": "MIT",
   "repository": {
@@ -54,7 +54,7 @@
     "typescript": "^5.7.0",
     "vitest": "^4.0.18",
     "@syncupsuite/foundations": "0.2.0",
-    "@syncupsuite/transformers": "0.2.0"
+    "@syncupsuite/transformers": "0.2.1"
   },
   "scripts": {
     "build": "tsup",

package/src/art-deco/tailwind.css

@@ -215,6 +215,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/art-deco/tokens.css

@@ -1,5 +1,19 @@
-/* art-deco — Design Tokens */
-/* Generated by @syncupsuite/transformers */
+/* ═══════════════════════════════════════════════════════════════
+ * art-deco — 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-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/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 --- */