@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.
Files changed (21) hide show
  1. package/dist/index.cjs +304 -16
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +304 -16
  4. package/dist/index.js.map +1 -1
  5. package/package.json +2 -2
  6. package/src/art-deco/tailwind.css +22 -0
  7. package/src/art-deco/tokens.css +16 -2
  8. package/src/nihon-minimal/tailwind.css +22 -0
  9. package/src/nihon-minimal/tokens.css +16 -2
  10. package/src/nihon-traditional/tailwind.css +22 -0
  11. package/src/nihon-traditional/tokens.css +16 -2
  12. package/src/nordic-modern/tailwind.css +22 -0
  13. package/src/nordic-modern/tokens.css +16 -2
  14. package/src/renaissance/tailwind.css +22 -0
  15. package/src/renaissance/tokens.css +16 -2
  16. package/src/shuimo-modern/tailwind.css +22 -0
  17. package/src/shuimo-modern/tokens.css +16 -2
  18. package/src/swiss-international/tailwind.css +22 -0
  19. package/src/swiss-international/tokens.css +16 -2
  20. package/src/tang-imperial/tailwind.css +22 -0
  21. package/src/tang-imperial/tokens.css +16 -2
package/dist/index.js CHANGED
@@ -893,8 +893,22 @@ var meta_default = {
893
893
  };
894
894
 
895
895
  // src/art-deco/_css.ts
896
- var css = `/* art-deco \u2014 Design Tokens */
897
- /* Generated by @syncupsuite/transformers */
896
+ 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
897
+ * art-deco \u2014 Design Tokens
898
+ * Generated by @syncupsuite/transformers
899
+ *
900
+ * CONSUMER API \u2014 Use these semantic tokens in your styles:
901
+ *
902
+ * Backgrounds: var(--background-canvas | surface | muted)
903
+ * Text: var(--text-primary | secondary | muted | inverse)
904
+ * Interactive: var(--interactive-primary | primary-hover | primary-active)
905
+ * Borders: var(--border-default | strong)
906
+ * Status: var(--status-error | success | warning | info)
907
+ * Focus: var(--focus-ring)
908
+ *
909
+ * Dark mode: Add [data-theme="dark"] to a parent element.
910
+ * Primitives: --primitive-color-*, --primitive-spacing-*, etc.
911
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
898
912
 
899
913
  :root {
900
914
  /* --- Primitive Colors --- */
@@ -1416,6 +1430,28 @@ var tailwindCss = `@import "tailwindcss";
1416
1430
 
1417
1431
  }
1418
1432
 
1433
+ /* === Semantic Color API \u2014 theme-aware Tailwind utilities === */
1434
+ @theme {
1435
+ --color-canvas: var(--background-canvas);
1436
+ --color-surface: var(--background-surface);
1437
+ --color-muted: var(--background-muted);
1438
+ --color-foreground: var(--text-primary);
1439
+ --color-foreground-secondary: var(--text-secondary);
1440
+ --color-foreground-muted: var(--text-muted);
1441
+ --color-foreground-inverse: var(--text-inverse);
1442
+ --color-primary: var(--interactive-primary);
1443
+ --color-primary-hover: var(--interactive-primary-hover);
1444
+ --color-primary-active: var(--interactive-primary-active);
1445
+ --color-border: var(--border-default);
1446
+ --color-border-strong: var(--border-strong);
1447
+ --color-error: var(--status-error);
1448
+ --color-success: var(--status-success);
1449
+ --color-warning: var(--status-warning);
1450
+ --color-info: var(--status-info);
1451
+ --color-ring: var(--focus-ring);
1452
+ --color-focus-visible: var(--accessibility-focus-visible);
1453
+ }
1454
+
1419
1455
  /* Primitive aliases + light mode semantic tokens */
1420
1456
  :root {
1421
1457
  /* --primitive-color-* aliases \u2192 @theme --color-* (for semantic var() resolution) */
@@ -2407,8 +2443,22 @@ var meta_default2 = {
2407
2443
  };
2408
2444
 
2409
2445
  // src/nihon-minimal/_css.ts
2410
- var css2 = `/* nihon-minimal \u2014 Design Tokens */
2411
- /* Generated by @syncupsuite/transformers */
2446
+ 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
2447
+ * nihon-minimal \u2014 Design Tokens
2448
+ * Generated by @syncupsuite/transformers
2449
+ *
2450
+ * CONSUMER API \u2014 Use these semantic tokens in your styles:
2451
+ *
2452
+ * Backgrounds: var(--background-canvas | surface | muted)
2453
+ * Text: var(--text-primary | secondary | muted | inverse)
2454
+ * Interactive: var(--interactive-primary | primary-hover | primary-active)
2455
+ * Borders: var(--border-default | strong)
2456
+ * Status: var(--status-error | success | warning | info)
2457
+ * Focus: var(--focus-ring)
2458
+ *
2459
+ * Dark mode: Add [data-theme="dark"] to a parent element.
2460
+ * Primitives: --primitive-color-*, --primitive-spacing-*, etc.
2461
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
2412
2462
 
2413
2463
  :root {
2414
2464
  /* --- Primitive Colors --- */
@@ -2890,6 +2940,28 @@ var tailwindCss2 = `@import "tailwindcss";
2890
2940
 
2891
2941
  }
2892
2942
 
2943
+ /* === Semantic Color API \u2014 theme-aware Tailwind utilities === */
2944
+ @theme {
2945
+ --color-canvas: var(--background-canvas);
2946
+ --color-surface: var(--background-surface);
2947
+ --color-muted: var(--background-muted);
2948
+ --color-foreground: var(--text-primary);
2949
+ --color-foreground-secondary: var(--text-secondary);
2950
+ --color-foreground-muted: var(--text-muted);
2951
+ --color-foreground-inverse: var(--text-inverse);
2952
+ --color-primary: var(--interactive-primary);
2953
+ --color-primary-hover: var(--interactive-primary-hover);
2954
+ --color-primary-active: var(--interactive-primary-active);
2955
+ --color-border: var(--border-default);
2956
+ --color-border-strong: var(--border-strong);
2957
+ --color-error: var(--status-error);
2958
+ --color-success: var(--status-success);
2959
+ --color-warning: var(--status-warning);
2960
+ --color-info: var(--status-info);
2961
+ --color-ring: var(--focus-ring);
2962
+ --color-focus-visible: var(--accessibility-focus-visible);
2963
+ }
2964
+
2893
2965
  /* Primitive aliases + light mode semantic tokens */
2894
2966
  :root {
2895
2967
  /* --primitive-color-* aliases \u2192 @theme --color-* (for semantic var() resolution) */
@@ -4069,8 +4141,22 @@ var meta_default3 = {
4069
4141
  };
4070
4142
 
4071
4143
  // src/nihon-traditional/_css.ts
4072
- var css3 = `/* nihon-no-iro-traditional \u2014 Design Tokens */
4073
- /* Generated by @syncupsuite/transformers */
4144
+ 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
4145
+ * nihon-no-iro-traditional \u2014 Design Tokens
4146
+ * Generated by @syncupsuite/transformers
4147
+ *
4148
+ * CONSUMER API \u2014 Use these semantic tokens in your styles:
4149
+ *
4150
+ * Backgrounds: var(--background-canvas | surface | muted)
4151
+ * Text: var(--text-primary | secondary | muted | inverse)
4152
+ * Interactive: var(--interactive-primary | primary-hover | primary-active)
4153
+ * Borders: var(--border-default | strong)
4154
+ * Status: var(--status-error | success | warning | info)
4155
+ * Focus: var(--focus-ring)
4156
+ *
4157
+ * Dark mode: Add [data-theme="dark"] to a parent element.
4158
+ * Primitives: --primitive-color-*, --primitive-spacing-*, etc.
4159
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
4074
4160
 
4075
4161
  :root {
4076
4162
  /* --- Primitive Colors --- */
@@ -4672,6 +4758,28 @@ var tailwindCss3 = `@import "tailwindcss";
4672
4758
 
4673
4759
  }
4674
4760
 
4761
+ /* === Semantic Color API \u2014 theme-aware Tailwind utilities === */
4762
+ @theme {
4763
+ --color-canvas: var(--background-canvas);
4764
+ --color-surface: var(--background-surface);
4765
+ --color-muted: var(--background-muted);
4766
+ --color-foreground: var(--text-primary);
4767
+ --color-foreground-secondary: var(--text-secondary);
4768
+ --color-foreground-muted: var(--text-muted);
4769
+ --color-foreground-inverse: var(--text-inverse);
4770
+ --color-primary: var(--interactive-primary);
4771
+ --color-primary-hover: var(--interactive-primary-hover);
4772
+ --color-primary-active: var(--interactive-primary-active);
4773
+ --color-border: var(--border-default);
4774
+ --color-border-strong: var(--border-strong);
4775
+ --color-error: var(--status-error);
4776
+ --color-success: var(--status-success);
4777
+ --color-warning: var(--status-warning);
4778
+ --color-info: var(--status-info);
4779
+ --color-ring: var(--focus-ring);
4780
+ --color-focus-visible: var(--accessibility-focus-visible);
4781
+ }
4782
+
4675
4783
  /* Primitive aliases + light mode semantic tokens */
4676
4784
  :root {
4677
4785
  /* --primitive-color-* aliases \u2192 @theme --color-* (for semantic var() resolution) */
@@ -5815,8 +5923,22 @@ var meta_default4 = {
5815
5923
  };
5816
5924
 
5817
5925
  // src/nordic-modern/_css.ts
5818
- var css4 = `/* nordic-modern \u2014 Design Tokens */
5819
- /* Generated by @syncupsuite/transformers */
5926
+ 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
5927
+ * nordic-modern \u2014 Design Tokens
5928
+ * Generated by @syncupsuite/transformers
5929
+ *
5930
+ * CONSUMER API \u2014 Use these semantic tokens in your styles:
5931
+ *
5932
+ * Backgrounds: var(--background-canvas | surface | muted)
5933
+ * Text: var(--text-primary | secondary | muted | inverse)
5934
+ * Interactive: var(--interactive-primary | primary-hover | primary-active)
5935
+ * Borders: var(--border-default | strong)
5936
+ * Status: var(--status-error | success | warning | info)
5937
+ * Focus: var(--focus-ring)
5938
+ *
5939
+ * Dark mode: Add [data-theme="dark"] to a parent element.
5940
+ * Primitives: --primitive-color-*, --primitive-spacing-*, etc.
5941
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
5820
5942
 
5821
5943
  :root {
5822
5944
  /* --- Primitive Colors --- */
@@ -6378,6 +6500,28 @@ var tailwindCss4 = `@import "tailwindcss";
6378
6500
 
6379
6501
  }
6380
6502
 
6503
+ /* === Semantic Color API \u2014 theme-aware Tailwind utilities === */
6504
+ @theme {
6505
+ --color-canvas: var(--background-canvas);
6506
+ --color-surface: var(--background-surface);
6507
+ --color-muted: var(--background-muted);
6508
+ --color-foreground: var(--text-primary);
6509
+ --color-foreground-secondary: var(--text-secondary);
6510
+ --color-foreground-muted: var(--text-muted);
6511
+ --color-foreground-inverse: var(--text-inverse);
6512
+ --color-primary: var(--interactive-primary);
6513
+ --color-primary-hover: var(--interactive-primary-hover);
6514
+ --color-primary-active: var(--interactive-primary-active);
6515
+ --color-border: var(--border-default);
6516
+ --color-border-strong: var(--border-strong);
6517
+ --color-error: var(--status-error);
6518
+ --color-success: var(--status-success);
6519
+ --color-warning: var(--status-warning);
6520
+ --color-info: var(--status-info);
6521
+ --color-ring: var(--focus-ring);
6522
+ --color-focus-visible: var(--accessibility-focus-visible);
6523
+ }
6524
+
6381
6525
  /* Primitive aliases + light mode semantic tokens */
6382
6526
  :root {
6383
6527
  /* --primitive-color-* aliases \u2192 @theme --color-* (for semantic var() resolution) */
@@ -7511,8 +7655,22 @@ var meta_default5 = {
7511
7655
  };
7512
7656
 
7513
7657
  // src/renaissance/_css.ts
7514
- var css5 = `/* renaissance \u2014 Design Tokens */
7515
- /* Generated by @syncupsuite/transformers */
7658
+ 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
7659
+ * renaissance \u2014 Design Tokens
7660
+ * Generated by @syncupsuite/transformers
7661
+ *
7662
+ * CONSUMER API \u2014 Use these semantic tokens in your styles:
7663
+ *
7664
+ * Backgrounds: var(--background-canvas | surface | muted)
7665
+ * Text: var(--text-primary | secondary | muted | inverse)
7666
+ * Interactive: var(--interactive-primary | primary-hover | primary-active)
7667
+ * Borders: var(--border-default | strong)
7668
+ * Status: var(--status-error | success | warning | info)
7669
+ * Focus: var(--focus-ring)
7670
+ *
7671
+ * Dark mode: Add [data-theme="dark"] to a parent element.
7672
+ * Primitives: --primitive-color-*, --primitive-spacing-*, etc.
7673
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
7516
7674
 
7517
7675
  :root {
7518
7676
  /* --- Primitive Colors --- */
@@ -8074,6 +8232,28 @@ var tailwindCss5 = `@import "tailwindcss";
8074
8232
 
8075
8233
  }
8076
8234
 
8235
+ /* === Semantic Color API \u2014 theme-aware Tailwind utilities === */
8236
+ @theme {
8237
+ --color-canvas: var(--background-canvas);
8238
+ --color-surface: var(--background-surface);
8239
+ --color-muted: var(--background-muted);
8240
+ --color-foreground: var(--text-primary);
8241
+ --color-foreground-secondary: var(--text-secondary);
8242
+ --color-foreground-muted: var(--text-muted);
8243
+ --color-foreground-inverse: var(--text-inverse);
8244
+ --color-primary: var(--interactive-primary);
8245
+ --color-primary-hover: var(--interactive-primary-hover);
8246
+ --color-primary-active: var(--interactive-primary-active);
8247
+ --color-border: var(--border-default);
8248
+ --color-border-strong: var(--border-strong);
8249
+ --color-error: var(--status-error);
8250
+ --color-success: var(--status-success);
8251
+ --color-warning: var(--status-warning);
8252
+ --color-info: var(--status-info);
8253
+ --color-ring: var(--focus-ring);
8254
+ --color-focus-visible: var(--accessibility-focus-visible);
8255
+ }
8256
+
8077
8257
  /* Primitive aliases + light mode semantic tokens */
8078
8258
  :root {
8079
8259
  /* --primitive-color-* aliases \u2192 @theme --color-* (for semantic var() resolution) */
@@ -9207,8 +9387,22 @@ var meta_default6 = {
9207
9387
  };
9208
9388
 
9209
9389
  // src/shuimo-modern/_css.ts
9210
- var css6 = `/* shuimo-modern \u2014 Design Tokens */
9211
- /* Generated by @syncupsuite/transformers */
9390
+ 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
9391
+ * shuimo-modern \u2014 Design Tokens
9392
+ * Generated by @syncupsuite/transformers
9393
+ *
9394
+ * CONSUMER API \u2014 Use these semantic tokens in your styles:
9395
+ *
9396
+ * Backgrounds: var(--background-canvas | surface | muted)
9397
+ * Text: var(--text-primary | secondary | muted | inverse)
9398
+ * Interactive: var(--interactive-primary | primary-hover | primary-active)
9399
+ * Borders: var(--border-default | strong)
9400
+ * Status: var(--status-error | success | warning | info)
9401
+ * Focus: var(--focus-ring)
9402
+ *
9403
+ * Dark mode: Add [data-theme="dark"] to a parent element.
9404
+ * Primitives: --primitive-color-*, --primitive-spacing-*, etc.
9405
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
9212
9406
 
9213
9407
  :root {
9214
9408
  /* --- Primitive Colors --- */
@@ -9770,6 +9964,28 @@ var tailwindCss6 = `@import "tailwindcss";
9770
9964
 
9771
9965
  }
9772
9966
 
9967
+ /* === Semantic Color API \u2014 theme-aware Tailwind utilities === */
9968
+ @theme {
9969
+ --color-canvas: var(--background-canvas);
9970
+ --color-surface: var(--background-surface);
9971
+ --color-muted: var(--background-muted);
9972
+ --color-foreground: var(--text-primary);
9973
+ --color-foreground-secondary: var(--text-secondary);
9974
+ --color-foreground-muted: var(--text-muted);
9975
+ --color-foreground-inverse: var(--text-inverse);
9976
+ --color-primary: var(--interactive-primary);
9977
+ --color-primary-hover: var(--interactive-primary-hover);
9978
+ --color-primary-active: var(--interactive-primary-active);
9979
+ --color-border: var(--border-default);
9980
+ --color-border-strong: var(--border-strong);
9981
+ --color-error: var(--status-error);
9982
+ --color-success: var(--status-success);
9983
+ --color-warning: var(--status-warning);
9984
+ --color-info: var(--status-info);
9985
+ --color-ring: var(--focus-ring);
9986
+ --color-focus-visible: var(--accessibility-focus-visible);
9987
+ }
9988
+
9773
9989
  /* Primitive aliases + light mode semantic tokens */
9774
9990
  :root {
9775
9991
  /* --primitive-color-* aliases \u2192 @theme --color-* (for semantic var() resolution) */
@@ -10903,8 +11119,22 @@ var meta_default7 = {
10903
11119
  };
10904
11120
 
10905
11121
  // src/swiss-international/_css.ts
10906
- var css7 = `/* swiss-international-style \u2014 Design Tokens */
10907
- /* Generated by @syncupsuite/transformers */
11122
+ 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
11123
+ * swiss-international-style \u2014 Design Tokens
11124
+ * Generated by @syncupsuite/transformers
11125
+ *
11126
+ * CONSUMER API \u2014 Use these semantic tokens in your styles:
11127
+ *
11128
+ * Backgrounds: var(--background-canvas | surface | muted)
11129
+ * Text: var(--text-primary | secondary | muted | inverse)
11130
+ * Interactive: var(--interactive-primary | primary-hover | primary-active)
11131
+ * Borders: var(--border-default | strong)
11132
+ * Status: var(--status-error | success | warning | info)
11133
+ * Focus: var(--focus-ring)
11134
+ *
11135
+ * Dark mode: Add [data-theme="dark"] to a parent element.
11136
+ * Primitives: --primitive-color-*, --primitive-spacing-*, etc.
11137
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
10908
11138
 
10909
11139
  :root {
10910
11140
  /* --- Primitive Colors --- */
@@ -11466,6 +11696,28 @@ var tailwindCss7 = `@import "tailwindcss";
11466
11696
 
11467
11697
  }
11468
11698
 
11699
+ /* === Semantic Color API \u2014 theme-aware Tailwind utilities === */
11700
+ @theme {
11701
+ --color-canvas: var(--background-canvas);
11702
+ --color-surface: var(--background-surface);
11703
+ --color-muted: var(--background-muted);
11704
+ --color-foreground: var(--text-primary);
11705
+ --color-foreground-secondary: var(--text-secondary);
11706
+ --color-foreground-muted: var(--text-muted);
11707
+ --color-foreground-inverse: var(--text-inverse);
11708
+ --color-primary: var(--interactive-primary);
11709
+ --color-primary-hover: var(--interactive-primary-hover);
11710
+ --color-primary-active: var(--interactive-primary-active);
11711
+ --color-border: var(--border-default);
11712
+ --color-border-strong: var(--border-strong);
11713
+ --color-error: var(--status-error);
11714
+ --color-success: var(--status-success);
11715
+ --color-warning: var(--status-warning);
11716
+ --color-info: var(--status-info);
11717
+ --color-ring: var(--focus-ring);
11718
+ --color-focus-visible: var(--accessibility-focus-visible);
11719
+ }
11720
+
11469
11721
  /* Primitive aliases + light mode semantic tokens */
11470
11722
  :root {
11471
11723
  /* --primitive-color-* aliases \u2192 @theme --color-* (for semantic var() resolution) */
@@ -12599,8 +12851,22 @@ var meta_default8 = {
12599
12851
  };
12600
12852
 
12601
12853
  // src/tang-imperial/_css.ts
12602
- var css8 = `/* tang-imperial \u2014 Design Tokens */
12603
- /* Generated by @syncupsuite/transformers */
12854
+ 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
12855
+ * tang-imperial \u2014 Design Tokens
12856
+ * Generated by @syncupsuite/transformers
12857
+ *
12858
+ * CONSUMER API \u2014 Use these semantic tokens in your styles:
12859
+ *
12860
+ * Backgrounds: var(--background-canvas | surface | muted)
12861
+ * Text: var(--text-primary | secondary | muted | inverse)
12862
+ * Interactive: var(--interactive-primary | primary-hover | primary-active)
12863
+ * Borders: var(--border-default | strong)
12864
+ * Status: var(--status-error | success | warning | info)
12865
+ * Focus: var(--focus-ring)
12866
+ *
12867
+ * Dark mode: Add [data-theme="dark"] to a parent element.
12868
+ * Primitives: --primitive-color-*, --primitive-spacing-*, etc.
12869
+ * \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
12604
12870
 
12605
12871
  :root {
12606
12872
  /* --- Primitive Colors --- */
@@ -13162,6 +13428,28 @@ var tailwindCss8 = `@import "tailwindcss";
13162
13428
 
13163
13429
  }
13164
13430
 
13431
+ /* === Semantic Color API \u2014 theme-aware Tailwind utilities === */
13432
+ @theme {
13433
+ --color-canvas: var(--background-canvas);
13434
+ --color-surface: var(--background-surface);
13435
+ --color-muted: var(--background-muted);
13436
+ --color-foreground: var(--text-primary);
13437
+ --color-foreground-secondary: var(--text-secondary);
13438
+ --color-foreground-muted: var(--text-muted);
13439
+ --color-foreground-inverse: var(--text-inverse);
13440
+ --color-primary: var(--interactive-primary);
13441
+ --color-primary-hover: var(--interactive-primary-hover);
13442
+ --color-primary-active: var(--interactive-primary-active);
13443
+ --color-border: var(--border-default);
13444
+ --color-border-strong: var(--border-strong);
13445
+ --color-error: var(--status-error);
13446
+ --color-success: var(--status-success);
13447
+ --color-warning: var(--status-warning);
13448
+ --color-info: var(--status-info);
13449
+ --color-ring: var(--focus-ring);
13450
+ --color-focus-visible: var(--accessibility-focus-visible);
13451
+ }
13452
+
13165
13453
  /* Primitive aliases + light mode semantic tokens */
13166
13454
  :root {
13167
13455
  /* --primitive-color-* aliases \u2192 @theme --color-* (for semantic var() resolution) */