@syncupsuite/themes 0.3.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -926,8 +926,22 @@ var meta_default = {
926
926
  };
927
927
 
928
928
  // src/art-deco/_css.ts
929
- var css = `/* art-deco \u2014 Design Tokens */
930
- /* Generated by @syncupsuite/transformers */
929
+ var css = `/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
930
+ * art-deco \u2014 Design Tokens
931
+ * Generated by @syncupsuite/transformers
932
+ *
933
+ * CONSUMER API \u2014 Use these semantic tokens in your styles:
934
+ *
935
+ * Backgrounds: var(--background-canvas | surface | muted)
936
+ * Text: var(--text-primary | secondary | muted | inverse)
937
+ * Interactive: var(--interactive-primary | primary-hover | primary-active)
938
+ * Borders: var(--border-default | strong)
939
+ * Status: var(--status-error | success | warning | info)
940
+ * Focus: var(--focus-ring)
941
+ *
942
+ * Dark mode: Add [data-theme="dark"] to a parent element.
943
+ * Primitives: --primitive-color-*, --primitive-spacing-*, etc.
944
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
931
945
 
932
946
  :root {
933
947
  /* --- Primitive Colors --- */
@@ -1449,6 +1463,28 @@ var tailwindCss = `@import "tailwindcss";
1449
1463
 
1450
1464
  }
1451
1465
 
1466
+ /* === Semantic Color API \u2014 theme-aware Tailwind utilities === */
1467
+ @theme {
1468
+ --color-canvas: var(--background-canvas);
1469
+ --color-surface: var(--background-surface);
1470
+ --color-muted: var(--background-muted);
1471
+ --color-foreground: var(--text-primary);
1472
+ --color-foreground-secondary: var(--text-secondary);
1473
+ --color-foreground-muted: var(--text-muted);
1474
+ --color-foreground-inverse: var(--text-inverse);
1475
+ --color-primary: var(--interactive-primary);
1476
+ --color-primary-hover: var(--interactive-primary-hover);
1477
+ --color-primary-active: var(--interactive-primary-active);
1478
+ --color-border: var(--border-default);
1479
+ --color-border-strong: var(--border-strong);
1480
+ --color-error: var(--status-error);
1481
+ --color-success: var(--status-success);
1482
+ --color-warning: var(--status-warning);
1483
+ --color-info: var(--status-info);
1484
+ --color-ring: var(--focus-ring);
1485
+ --color-focus-visible: var(--accessibility-focus-visible);
1486
+ }
1487
+
1452
1488
  /* Primitive aliases + light mode semantic tokens */
1453
1489
  :root {
1454
1490
  /* --primitive-color-* aliases \u2192 @theme --color-* (for semantic var() resolution) */
@@ -2440,8 +2476,22 @@ var meta_default2 = {
2440
2476
  };
2441
2477
 
2442
2478
  // src/nihon-minimal/_css.ts
2443
- var css2 = `/* nihon-minimal \u2014 Design Tokens */
2444
- /* Generated by @syncupsuite/transformers */
2479
+ var css2 = `/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
2480
+ * nihon-minimal \u2014 Design Tokens
2481
+ * Generated by @syncupsuite/transformers
2482
+ *
2483
+ * CONSUMER API \u2014 Use these semantic tokens in your styles:
2484
+ *
2485
+ * Backgrounds: var(--background-canvas | surface | muted)
2486
+ * Text: var(--text-primary | secondary | muted | inverse)
2487
+ * Interactive: var(--interactive-primary | primary-hover | primary-active)
2488
+ * Borders: var(--border-default | strong)
2489
+ * Status: var(--status-error | success | warning | info)
2490
+ * Focus: var(--focus-ring)
2491
+ *
2492
+ * Dark mode: Add [data-theme="dark"] to a parent element.
2493
+ * Primitives: --primitive-color-*, --primitive-spacing-*, etc.
2494
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
2445
2495
 
2446
2496
  :root {
2447
2497
  /* --- Primitive Colors --- */
@@ -2923,6 +2973,28 @@ var tailwindCss2 = `@import "tailwindcss";
2923
2973
 
2924
2974
  }
2925
2975
 
2976
+ /* === Semantic Color API \u2014 theme-aware Tailwind utilities === */
2977
+ @theme {
2978
+ --color-canvas: var(--background-canvas);
2979
+ --color-surface: var(--background-surface);
2980
+ --color-muted: var(--background-muted);
2981
+ --color-foreground: var(--text-primary);
2982
+ --color-foreground-secondary: var(--text-secondary);
2983
+ --color-foreground-muted: var(--text-muted);
2984
+ --color-foreground-inverse: var(--text-inverse);
2985
+ --color-primary: var(--interactive-primary);
2986
+ --color-primary-hover: var(--interactive-primary-hover);
2987
+ --color-primary-active: var(--interactive-primary-active);
2988
+ --color-border: var(--border-default);
2989
+ --color-border-strong: var(--border-strong);
2990
+ --color-error: var(--status-error);
2991
+ --color-success: var(--status-success);
2992
+ --color-warning: var(--status-warning);
2993
+ --color-info: var(--status-info);
2994
+ --color-ring: var(--focus-ring);
2995
+ --color-focus-visible: var(--accessibility-focus-visible);
2996
+ }
2997
+
2926
2998
  /* Primitive aliases + light mode semantic tokens */
2927
2999
  :root {
2928
3000
  /* --primitive-color-* aliases \u2192 @theme --color-* (for semantic var() resolution) */
@@ -4102,8 +4174,22 @@ var meta_default3 = {
4102
4174
  };
4103
4175
 
4104
4176
  // src/nihon-traditional/_css.ts
4105
- var css3 = `/* nihon-no-iro-traditional \u2014 Design Tokens */
4106
- /* Generated by @syncupsuite/transformers */
4177
+ var css3 = `/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
4178
+ * nihon-no-iro-traditional \u2014 Design Tokens
4179
+ * Generated by @syncupsuite/transformers
4180
+ *
4181
+ * CONSUMER API \u2014 Use these semantic tokens in your styles:
4182
+ *
4183
+ * Backgrounds: var(--background-canvas | surface | muted)
4184
+ * Text: var(--text-primary | secondary | muted | inverse)
4185
+ * Interactive: var(--interactive-primary | primary-hover | primary-active)
4186
+ * Borders: var(--border-default | strong)
4187
+ * Status: var(--status-error | success | warning | info)
4188
+ * Focus: var(--focus-ring)
4189
+ *
4190
+ * Dark mode: Add [data-theme="dark"] to a parent element.
4191
+ * Primitives: --primitive-color-*, --primitive-spacing-*, etc.
4192
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
4107
4193
 
4108
4194
  :root {
4109
4195
  /* --- Primitive Colors --- */
@@ -4705,6 +4791,28 @@ var tailwindCss3 = `@import "tailwindcss";
4705
4791
 
4706
4792
  }
4707
4793
 
4794
+ /* === Semantic Color API \u2014 theme-aware Tailwind utilities === */
4795
+ @theme {
4796
+ --color-canvas: var(--background-canvas);
4797
+ --color-surface: var(--background-surface);
4798
+ --color-muted: var(--background-muted);
4799
+ --color-foreground: var(--text-primary);
4800
+ --color-foreground-secondary: var(--text-secondary);
4801
+ --color-foreground-muted: var(--text-muted);
4802
+ --color-foreground-inverse: var(--text-inverse);
4803
+ --color-primary: var(--interactive-primary);
4804
+ --color-primary-hover: var(--interactive-primary-hover);
4805
+ --color-primary-active: var(--interactive-primary-active);
4806
+ --color-border: var(--border-default);
4807
+ --color-border-strong: var(--border-strong);
4808
+ --color-error: var(--status-error);
4809
+ --color-success: var(--status-success);
4810
+ --color-warning: var(--status-warning);
4811
+ --color-info: var(--status-info);
4812
+ --color-ring: var(--focus-ring);
4813
+ --color-focus-visible: var(--accessibility-focus-visible);
4814
+ }
4815
+
4708
4816
  /* Primitive aliases + light mode semantic tokens */
4709
4817
  :root {
4710
4818
  /* --primitive-color-* aliases \u2192 @theme --color-* (for semantic var() resolution) */
@@ -5848,8 +5956,22 @@ var meta_default4 = {
5848
5956
  };
5849
5957
 
5850
5958
  // src/nordic-modern/_css.ts
5851
- var css4 = `/* nordic-modern \u2014 Design Tokens */
5852
- /* Generated by @syncupsuite/transformers */
5959
+ var css4 = `/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
5960
+ * nordic-modern \u2014 Design Tokens
5961
+ * Generated by @syncupsuite/transformers
5962
+ *
5963
+ * CONSUMER API \u2014 Use these semantic tokens in your styles:
5964
+ *
5965
+ * Backgrounds: var(--background-canvas | surface | muted)
5966
+ * Text: var(--text-primary | secondary | muted | inverse)
5967
+ * Interactive: var(--interactive-primary | primary-hover | primary-active)
5968
+ * Borders: var(--border-default | strong)
5969
+ * Status: var(--status-error | success | warning | info)
5970
+ * Focus: var(--focus-ring)
5971
+ *
5972
+ * Dark mode: Add [data-theme="dark"] to a parent element.
5973
+ * Primitives: --primitive-color-*, --primitive-spacing-*, etc.
5974
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
5853
5975
 
5854
5976
  :root {
5855
5977
  /* --- Primitive Colors --- */
@@ -6411,6 +6533,28 @@ var tailwindCss4 = `@import "tailwindcss";
6411
6533
 
6412
6534
  }
6413
6535
 
6536
+ /* === Semantic Color API \u2014 theme-aware Tailwind utilities === */
6537
+ @theme {
6538
+ --color-canvas: var(--background-canvas);
6539
+ --color-surface: var(--background-surface);
6540
+ --color-muted: var(--background-muted);
6541
+ --color-foreground: var(--text-primary);
6542
+ --color-foreground-secondary: var(--text-secondary);
6543
+ --color-foreground-muted: var(--text-muted);
6544
+ --color-foreground-inverse: var(--text-inverse);
6545
+ --color-primary: var(--interactive-primary);
6546
+ --color-primary-hover: var(--interactive-primary-hover);
6547
+ --color-primary-active: var(--interactive-primary-active);
6548
+ --color-border: var(--border-default);
6549
+ --color-border-strong: var(--border-strong);
6550
+ --color-error: var(--status-error);
6551
+ --color-success: var(--status-success);
6552
+ --color-warning: var(--status-warning);
6553
+ --color-info: var(--status-info);
6554
+ --color-ring: var(--focus-ring);
6555
+ --color-focus-visible: var(--accessibility-focus-visible);
6556
+ }
6557
+
6414
6558
  /* Primitive aliases + light mode semantic tokens */
6415
6559
  :root {
6416
6560
  /* --primitive-color-* aliases \u2192 @theme --color-* (for semantic var() resolution) */
@@ -7544,8 +7688,22 @@ var meta_default5 = {
7544
7688
  };
7545
7689
 
7546
7690
  // src/renaissance/_css.ts
7547
- var css5 = `/* renaissance \u2014 Design Tokens */
7548
- /* Generated by @syncupsuite/transformers */
7691
+ var css5 = `/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
7692
+ * renaissance \u2014 Design Tokens
7693
+ * Generated by @syncupsuite/transformers
7694
+ *
7695
+ * CONSUMER API \u2014 Use these semantic tokens in your styles:
7696
+ *
7697
+ * Backgrounds: var(--background-canvas | surface | muted)
7698
+ * Text: var(--text-primary | secondary | muted | inverse)
7699
+ * Interactive: var(--interactive-primary | primary-hover | primary-active)
7700
+ * Borders: var(--border-default | strong)
7701
+ * Status: var(--status-error | success | warning | info)
7702
+ * Focus: var(--focus-ring)
7703
+ *
7704
+ * Dark mode: Add [data-theme="dark"] to a parent element.
7705
+ * Primitives: --primitive-color-*, --primitive-spacing-*, etc.
7706
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
7549
7707
 
7550
7708
  :root {
7551
7709
  /* --- Primitive Colors --- */
@@ -8107,6 +8265,28 @@ var tailwindCss5 = `@import "tailwindcss";
8107
8265
 
8108
8266
  }
8109
8267
 
8268
+ /* === Semantic Color API \u2014 theme-aware Tailwind utilities === */
8269
+ @theme {
8270
+ --color-canvas: var(--background-canvas);
8271
+ --color-surface: var(--background-surface);
8272
+ --color-muted: var(--background-muted);
8273
+ --color-foreground: var(--text-primary);
8274
+ --color-foreground-secondary: var(--text-secondary);
8275
+ --color-foreground-muted: var(--text-muted);
8276
+ --color-foreground-inverse: var(--text-inverse);
8277
+ --color-primary: var(--interactive-primary);
8278
+ --color-primary-hover: var(--interactive-primary-hover);
8279
+ --color-primary-active: var(--interactive-primary-active);
8280
+ --color-border: var(--border-default);
8281
+ --color-border-strong: var(--border-strong);
8282
+ --color-error: var(--status-error);
8283
+ --color-success: var(--status-success);
8284
+ --color-warning: var(--status-warning);
8285
+ --color-info: var(--status-info);
8286
+ --color-ring: var(--focus-ring);
8287
+ --color-focus-visible: var(--accessibility-focus-visible);
8288
+ }
8289
+
8110
8290
  /* Primitive aliases + light mode semantic tokens */
8111
8291
  :root {
8112
8292
  /* --primitive-color-* aliases \u2192 @theme --color-* (for semantic var() resolution) */
@@ -9240,8 +9420,22 @@ var meta_default6 = {
9240
9420
  };
9241
9421
 
9242
9422
  // src/shuimo-modern/_css.ts
9243
- var css6 = `/* shuimo-modern \u2014 Design Tokens */
9244
- /* Generated by @syncupsuite/transformers */
9423
+ var css6 = `/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
9424
+ * shuimo-modern \u2014 Design Tokens
9425
+ * Generated by @syncupsuite/transformers
9426
+ *
9427
+ * CONSUMER API \u2014 Use these semantic tokens in your styles:
9428
+ *
9429
+ * Backgrounds: var(--background-canvas | surface | muted)
9430
+ * Text: var(--text-primary | secondary | muted | inverse)
9431
+ * Interactive: var(--interactive-primary | primary-hover | primary-active)
9432
+ * Borders: var(--border-default | strong)
9433
+ * Status: var(--status-error | success | warning | info)
9434
+ * Focus: var(--focus-ring)
9435
+ *
9436
+ * Dark mode: Add [data-theme="dark"] to a parent element.
9437
+ * Primitives: --primitive-color-*, --primitive-spacing-*, etc.
9438
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
9245
9439
 
9246
9440
  :root {
9247
9441
  /* --- Primitive Colors --- */
@@ -9803,6 +9997,28 @@ var tailwindCss6 = `@import "tailwindcss";
9803
9997
 
9804
9998
  }
9805
9999
 
10000
+ /* === Semantic Color API \u2014 theme-aware Tailwind utilities === */
10001
+ @theme {
10002
+ --color-canvas: var(--background-canvas);
10003
+ --color-surface: var(--background-surface);
10004
+ --color-muted: var(--background-muted);
10005
+ --color-foreground: var(--text-primary);
10006
+ --color-foreground-secondary: var(--text-secondary);
10007
+ --color-foreground-muted: var(--text-muted);
10008
+ --color-foreground-inverse: var(--text-inverse);
10009
+ --color-primary: var(--interactive-primary);
10010
+ --color-primary-hover: var(--interactive-primary-hover);
10011
+ --color-primary-active: var(--interactive-primary-active);
10012
+ --color-border: var(--border-default);
10013
+ --color-border-strong: var(--border-strong);
10014
+ --color-error: var(--status-error);
10015
+ --color-success: var(--status-success);
10016
+ --color-warning: var(--status-warning);
10017
+ --color-info: var(--status-info);
10018
+ --color-ring: var(--focus-ring);
10019
+ --color-focus-visible: var(--accessibility-focus-visible);
10020
+ }
10021
+
9806
10022
  /* Primitive aliases + light mode semantic tokens */
9807
10023
  :root {
9808
10024
  /* --primitive-color-* aliases \u2192 @theme --color-* (for semantic var() resolution) */
@@ -10936,8 +11152,22 @@ var meta_default7 = {
10936
11152
  };
10937
11153
 
10938
11154
  // src/swiss-international/_css.ts
10939
- var css7 = `/* swiss-international-style \u2014 Design Tokens */
10940
- /* Generated by @syncupsuite/transformers */
11155
+ var css7 = `/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
11156
+ * swiss-international-style \u2014 Design Tokens
11157
+ * Generated by @syncupsuite/transformers
11158
+ *
11159
+ * CONSUMER API \u2014 Use these semantic tokens in your styles:
11160
+ *
11161
+ * Backgrounds: var(--background-canvas | surface | muted)
11162
+ * Text: var(--text-primary | secondary | muted | inverse)
11163
+ * Interactive: var(--interactive-primary | primary-hover | primary-active)
11164
+ * Borders: var(--border-default | strong)
11165
+ * Status: var(--status-error | success | warning | info)
11166
+ * Focus: var(--focus-ring)
11167
+ *
11168
+ * Dark mode: Add [data-theme="dark"] to a parent element.
11169
+ * Primitives: --primitive-color-*, --primitive-spacing-*, etc.
11170
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
10941
11171
 
10942
11172
  :root {
10943
11173
  /* --- Primitive Colors --- */
@@ -11499,6 +11729,28 @@ var tailwindCss7 = `@import "tailwindcss";
11499
11729
 
11500
11730
  }
11501
11731
 
11732
+ /* === Semantic Color API \u2014 theme-aware Tailwind utilities === */
11733
+ @theme {
11734
+ --color-canvas: var(--background-canvas);
11735
+ --color-surface: var(--background-surface);
11736
+ --color-muted: var(--background-muted);
11737
+ --color-foreground: var(--text-primary);
11738
+ --color-foreground-secondary: var(--text-secondary);
11739
+ --color-foreground-muted: var(--text-muted);
11740
+ --color-foreground-inverse: var(--text-inverse);
11741
+ --color-primary: var(--interactive-primary);
11742
+ --color-primary-hover: var(--interactive-primary-hover);
11743
+ --color-primary-active: var(--interactive-primary-active);
11744
+ --color-border: var(--border-default);
11745
+ --color-border-strong: var(--border-strong);
11746
+ --color-error: var(--status-error);
11747
+ --color-success: var(--status-success);
11748
+ --color-warning: var(--status-warning);
11749
+ --color-info: var(--status-info);
11750
+ --color-ring: var(--focus-ring);
11751
+ --color-focus-visible: var(--accessibility-focus-visible);
11752
+ }
11753
+
11502
11754
  /* Primitive aliases + light mode semantic tokens */
11503
11755
  :root {
11504
11756
  /* --primitive-color-* aliases \u2192 @theme --color-* (for semantic var() resolution) */
@@ -12632,8 +12884,22 @@ var meta_default8 = {
12632
12884
  };
12633
12885
 
12634
12886
  // src/tang-imperial/_css.ts
12635
- var css8 = `/* tang-imperial \u2014 Design Tokens */
12636
- /* Generated by @syncupsuite/transformers */
12887
+ var css8 = `/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
12888
+ * tang-imperial \u2014 Design Tokens
12889
+ * Generated by @syncupsuite/transformers
12890
+ *
12891
+ * CONSUMER API \u2014 Use these semantic tokens in your styles:
12892
+ *
12893
+ * Backgrounds: var(--background-canvas | surface | muted)
12894
+ * Text: var(--text-primary | secondary | muted | inverse)
12895
+ * Interactive: var(--interactive-primary | primary-hover | primary-active)
12896
+ * Borders: var(--border-default | strong)
12897
+ * Status: var(--status-error | success | warning | info)
12898
+ * Focus: var(--focus-ring)
12899
+ *
12900
+ * Dark mode: Add [data-theme="dark"] to a parent element.
12901
+ * Primitives: --primitive-color-*, --primitive-spacing-*, etc.
12902
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
12637
12903
 
12638
12904
  :root {
12639
12905
  /* --- Primitive Colors --- */
@@ -13195,6 +13461,28 @@ var tailwindCss8 = `@import "tailwindcss";
13195
13461
 
13196
13462
  }
13197
13463
 
13464
+ /* === Semantic Color API \u2014 theme-aware Tailwind utilities === */
13465
+ @theme {
13466
+ --color-canvas: var(--background-canvas);
13467
+ --color-surface: var(--background-surface);
13468
+ --color-muted: var(--background-muted);
13469
+ --color-foreground: var(--text-primary);
13470
+ --color-foreground-secondary: var(--text-secondary);
13471
+ --color-foreground-muted: var(--text-muted);
13472
+ --color-foreground-inverse: var(--text-inverse);
13473
+ --color-primary: var(--interactive-primary);
13474
+ --color-primary-hover: var(--interactive-primary-hover);
13475
+ --color-primary-active: var(--interactive-primary-active);
13476
+ --color-border: var(--border-default);
13477
+ --color-border-strong: var(--border-strong);
13478
+ --color-error: var(--status-error);
13479
+ --color-success: var(--status-success);
13480
+ --color-warning: var(--status-warning);
13481
+ --color-info: var(--status-info);
13482
+ --color-ring: var(--focus-ring);
13483
+ --color-focus-visible: var(--accessibility-focus-visible);
13484
+ }
13485
+
13198
13486
  /* Primitive aliases + light mode semantic tokens */
13199
13487
  :root {
13200
13488
  /* --primitive-color-* aliases \u2192 @theme --color-* (for semantic var() resolution) */