@syncupsuite/themes 0.1.0 → 0.2.0

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 (10) hide show
  1. package/README.md +91 -0
  2. package/dist/index.cjs +184 -8
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.js +184 -8
  5. package/dist/index.js.map +1 -1
  6. package/package.json +6 -5
  7. package/src/nihon-traditional/meta.json +1 -1
  8. package/src/nihon-traditional/tailwind.css +96 -3
  9. package/src/swiss-international/meta.json +1 -1
  10. package/src/swiss-international/tailwind.css +86 -3
package/README.md ADDED
@@ -0,0 +1,91 @@
1
+ # @syncupsuite/themes
2
+
3
+ Pre-built, culturally-grounded design themes. Production-ready CSS and TypeScript.
4
+
5
+ Zero runtime dependencies. Security-audited. 195 tests.
6
+
7
+ ## Install
8
+
9
+ ```bash
10
+ npm install @syncupsuite/themes
11
+ ```
12
+
13
+ ## CSS usage
14
+
15
+ Import directly into your stylesheet (Tailwind v4, Vite, or any CSS bundler):
16
+
17
+ ```css
18
+ /* Swiss International — modernist grid, geometric sans-serif */
19
+ @import '@syncupsuite/themes/swiss-international/tailwind.css';
20
+
21
+ /* Nihon Traditional — Edo-period Japanese colour palette */
22
+ @import '@syncupsuite/themes/nihon-traditional/tailwind.css';
23
+ ```
24
+
25
+ Or import plain CSS custom properties (`:root` block, no Tailwind):
26
+
27
+ ```css
28
+ @import '@syncupsuite/themes/swiss-international/tokens.css';
29
+ @import '@syncupsuite/themes/nihon-traditional/tokens.css';
30
+ ```
31
+
32
+ ## TypeScript usage
33
+
34
+ ```typescript
35
+ import { swissInternational } from '@syncupsuite/themes';
36
+
37
+ // swissInternational.css — plain CSS string
38
+ // swissInternational.tailwindCss — Tailwind v4 @theme block string
39
+ // swissInternational.tokens — DTCG token tree (JSON)
40
+ // swissInternational.meta — theme metadata and validation summary
41
+
42
+ import { nihonTraditional } from '@syncupsuite/themes';
43
+ ```
44
+
45
+ ## Available themes
46
+
47
+ | Theme | Import | Cultural basis |
48
+ |-------|--------|----------------|
49
+ | Swiss International | `swiss-international` | Swiss graphic design — Neue Haas Grotesk, grid systems, International Typographic Style |
50
+ | Nihon Traditional | `nihon-traditional` | Nihon no Dentou Iro — 465 traditional Japanese colours catalogued from the Edo period |
51
+
52
+ ## Token structure
53
+
54
+ Each theme exports a four-layer token system:
55
+
56
+ ```
57
+ primitive.color.* — 9-step lightness scales per seed color (50–900)
58
+ primitive.color.neutral — Hue-tinted neutrals (not dead grays)
59
+ semantic.light.* — Purpose-mapped tokens for light mode
60
+ semantic.dark.* — Purpose-mapped tokens for dark mode
61
+ typography.* — Font stacks, type scale, weights, line heights
62
+ spacing.* — 8px grid (0–24 steps)
63
+ radius.* — Border radius scale (none → full)
64
+ ```
65
+
66
+ Semantic tokens use CSS custom property references — dark mode is a parallel semantic mapping, not a filter:
67
+
68
+ ```css
69
+ /* Light mode */
70
+ --background-canvas: var(--primitive-color-neutral-50);
71
+
72
+ /* Dark mode */
73
+ [data-theme="dark"] --background-canvas: var(--primitive-color-neutral-900);
74
+ ```
75
+
76
+ ## Build your own theme
77
+
78
+ The `theme-inspired-tokens` Claude Code skill (available in the [webplatform4sync marketplace](https://github.com/syncupsuite/webplatform4sync)) walks through building custom cultural foundations from scratch using `@syncupsuite/foundations` and `@syncupsuite/transformers`.
79
+
80
+ ## Package ecosystem
81
+
82
+ | Package | Description |
83
+ |---------|-------------|
84
+ | [`@syncupsuite/tokens`](https://npmjs.com/package/@syncupsuite/tokens) | DTCG types, utilities, validation — zero deps |
85
+ | [`@syncupsuite/foundations`](https://npmjs.com/package/@syncupsuite/foundations) | Cultural data + color/typography engine |
86
+ | [`@syncupsuite/transformers`](https://npmjs.com/package/@syncupsuite/transformers) | CSS and Tailwind v4 output |
87
+ | `@syncupsuite/themes` | **This package** — pre-built theme packs |
88
+
89
+ ## License
90
+
91
+ MIT
package/dist/index.cjs CHANGED
@@ -1046,7 +1046,7 @@ var meta_default = {
1046
1046
  ],
1047
1047
  validation: {
1048
1048
  schema: true,
1049
- contrast: true,
1049
+ contrast: null,
1050
1050
  completeness: true
1051
1051
  }
1052
1052
  };
@@ -1609,9 +1609,9 @@ var tailwindCss = `@import "tailwindcss";
1609
1609
  /* Spacing 20 (80px) */
1610
1610
  --spacing-20: 80px;
1611
1611
  /* Spacing 0.5 (2px) */
1612
- --spacing-0.5: 2px;
1612
+ --spacing-0-5: 2px;
1613
1613
  /* Spacing 1.5 (6px) */
1614
- --spacing-1.5: 6px;
1614
+ --spacing-1-5: 6px;
1615
1615
 
1616
1616
  /* --- Font Families --- */
1617
1617
  /* Heading font family */
@@ -1655,8 +1655,101 @@ var tailwindCss = `@import "tailwindcss";
1655
1655
 
1656
1656
  }
1657
1657
 
1658
- /* Light mode semantic tokens (default) */
1658
+ /* Primitive aliases + light mode semantic tokens */
1659
1659
  :root {
1660
+ /* --primitive-color-* aliases \u2192 @theme --color-* (for semantic var() resolution) */
1661
+ --primitive-color-hanada-50: var(--color-hanada-50);
1662
+ --primitive-color-hanada-100: var(--color-hanada-100);
1663
+ --primitive-color-hanada-200: var(--color-hanada-200);
1664
+ --primitive-color-hanada-300: var(--color-hanada-300);
1665
+ --primitive-color-hanada-400: var(--color-hanada-400);
1666
+ --primitive-color-hanada-500: var(--color-hanada-500);
1667
+ --primitive-color-hanada-600: var(--color-hanada-600);
1668
+ --primitive-color-hanada-700: var(--color-hanada-700);
1669
+ --primitive-color-hanada-800: var(--color-hanada-800);
1670
+ --primitive-color-hanada-900: var(--color-hanada-900);
1671
+ --primitive-color-sakura-nezumi-50: var(--color-sakura-nezumi-50);
1672
+ --primitive-color-sakura-nezumi-100: var(--color-sakura-nezumi-100);
1673
+ --primitive-color-sakura-nezumi-200: var(--color-sakura-nezumi-200);
1674
+ --primitive-color-sakura-nezumi-300: var(--color-sakura-nezumi-300);
1675
+ --primitive-color-sakura-nezumi-400: var(--color-sakura-nezumi-400);
1676
+ --primitive-color-sakura-nezumi-500: var(--color-sakura-nezumi-500);
1677
+ --primitive-color-sakura-nezumi-600: var(--color-sakura-nezumi-600);
1678
+ --primitive-color-sakura-nezumi-700: var(--color-sakura-nezumi-700);
1679
+ --primitive-color-sakura-nezumi-800: var(--color-sakura-nezumi-800);
1680
+ --primitive-color-sakura-nezumi-900: var(--color-sakura-nezumi-900);
1681
+ --primitive-color-wasurenagusa-iro-50: var(--color-wasurenagusa-iro-50);
1682
+ --primitive-color-wasurenagusa-iro-100: var(--color-wasurenagusa-iro-100);
1683
+ --primitive-color-wasurenagusa-iro-200: var(--color-wasurenagusa-iro-200);
1684
+ --primitive-color-wasurenagusa-iro-300: var(--color-wasurenagusa-iro-300);
1685
+ --primitive-color-wasurenagusa-iro-400: var(--color-wasurenagusa-iro-400);
1686
+ --primitive-color-wasurenagusa-iro-500: var(--color-wasurenagusa-iro-500);
1687
+ --primitive-color-wasurenagusa-iro-600: var(--color-wasurenagusa-iro-600);
1688
+ --primitive-color-wasurenagusa-iro-700: var(--color-wasurenagusa-iro-700);
1689
+ --primitive-color-wasurenagusa-iro-800: var(--color-wasurenagusa-iro-800);
1690
+ --primitive-color-wasurenagusa-iro-900: var(--color-wasurenagusa-iro-900);
1691
+ --primitive-color-kitsune-iro-50: var(--color-kitsune-iro-50);
1692
+ --primitive-color-kitsune-iro-100: var(--color-kitsune-iro-100);
1693
+ --primitive-color-kitsune-iro-200: var(--color-kitsune-iro-200);
1694
+ --primitive-color-kitsune-iro-300: var(--color-kitsune-iro-300);
1695
+ --primitive-color-kitsune-iro-400: var(--color-kitsune-iro-400);
1696
+ --primitive-color-kitsune-iro-500: var(--color-kitsune-iro-500);
1697
+ --primitive-color-kitsune-iro-600: var(--color-kitsune-iro-600);
1698
+ --primitive-color-kitsune-iro-700: var(--color-kitsune-iro-700);
1699
+ --primitive-color-kitsune-iro-800: var(--color-kitsune-iro-800);
1700
+ --primitive-color-kitsune-iro-900: var(--color-kitsune-iro-900);
1701
+ --primitive-color-enji-50: var(--color-enji-50);
1702
+ --primitive-color-enji-100: var(--color-enji-100);
1703
+ --primitive-color-enji-200: var(--color-enji-200);
1704
+ --primitive-color-enji-300: var(--color-enji-300);
1705
+ --primitive-color-enji-400: var(--color-enji-400);
1706
+ --primitive-color-enji-500: var(--color-enji-500);
1707
+ --primitive-color-enji-600: var(--color-enji-600);
1708
+ --primitive-color-enji-700: var(--color-enji-700);
1709
+ --primitive-color-enji-800: var(--color-enji-800);
1710
+ --primitive-color-enji-900: var(--color-enji-900);
1711
+ --primitive-color-rikyuu-nezumi-50: var(--color-rikyuu-nezumi-50);
1712
+ --primitive-color-rikyuu-nezumi-100: var(--color-rikyuu-nezumi-100);
1713
+ --primitive-color-rikyuu-nezumi-200: var(--color-rikyuu-nezumi-200);
1714
+ --primitive-color-rikyuu-nezumi-300: var(--color-rikyuu-nezumi-300);
1715
+ --primitive-color-rikyuu-nezumi-400: var(--color-rikyuu-nezumi-400);
1716
+ --primitive-color-rikyuu-nezumi-500: var(--color-rikyuu-nezumi-500);
1717
+ --primitive-color-rikyuu-nezumi-600: var(--color-rikyuu-nezumi-600);
1718
+ --primitive-color-rikyuu-nezumi-700: var(--color-rikyuu-nezumi-700);
1719
+ --primitive-color-rikyuu-nezumi-800: var(--color-rikyuu-nezumi-800);
1720
+ --primitive-color-rikyuu-nezumi-900: var(--color-rikyuu-nezumi-900);
1721
+ --primitive-color-shironeri-50: var(--color-shironeri-50);
1722
+ --primitive-color-shironeri-100: var(--color-shironeri-100);
1723
+ --primitive-color-shironeri-200: var(--color-shironeri-200);
1724
+ --primitive-color-shironeri-300: var(--color-shironeri-300);
1725
+ --primitive-color-shironeri-400: var(--color-shironeri-400);
1726
+ --primitive-color-shironeri-500: var(--color-shironeri-500);
1727
+ --primitive-color-shironeri-600: var(--color-shironeri-600);
1728
+ --primitive-color-shironeri-700: var(--color-shironeri-700);
1729
+ --primitive-color-shironeri-800: var(--color-shironeri-800);
1730
+ --primitive-color-shironeri-900: var(--color-shironeri-900);
1731
+ --primitive-color-neutral-50: var(--color-neutral-50);
1732
+ --primitive-color-neutral-100: var(--color-neutral-100);
1733
+ --primitive-color-neutral-200: var(--color-neutral-200);
1734
+ --primitive-color-neutral-300: var(--color-neutral-300);
1735
+ --primitive-color-neutral-400: var(--color-neutral-400);
1736
+ --primitive-color-neutral-500: var(--color-neutral-500);
1737
+ --primitive-color-neutral-600: var(--color-neutral-600);
1738
+ --primitive-color-neutral-700: var(--color-neutral-700);
1739
+ --primitive-color-neutral-800: var(--color-neutral-800);
1740
+ --primitive-color-neutral-900: var(--color-neutral-900);
1741
+ --primitive-color-accent-50: var(--color-accent-50);
1742
+ --primitive-color-accent-100: var(--color-accent-100);
1743
+ --primitive-color-accent-200: var(--color-accent-200);
1744
+ --primitive-color-accent-300: var(--color-accent-300);
1745
+ --primitive-color-accent-400: var(--color-accent-400);
1746
+ --primitive-color-accent-500: var(--color-accent-500);
1747
+ --primitive-color-accent-600: var(--color-accent-600);
1748
+ --primitive-color-accent-700: var(--color-accent-700);
1749
+ --primitive-color-accent-800: var(--color-accent-800);
1750
+ --primitive-color-accent-900: var(--color-accent-900);
1751
+
1752
+ /* Semantic tokens */
1660
1753
  /* Page background */
1661
1754
  --background-canvas: var(--primitive-color-neutral-50);
1662
1755
  /* Card/surface background */
@@ -2699,7 +2792,7 @@ var meta_default2 = {
2699
2792
  ],
2700
2793
  validation: {
2701
2794
  schema: true,
2702
- contrast: true,
2795
+ contrast: null,
2703
2796
  completeness: true
2704
2797
  }
2705
2798
  };
@@ -3222,9 +3315,9 @@ var tailwindCss2 = `@import "tailwindcss";
3222
3315
  /* Spacing 20 (80px) */
3223
3316
  --spacing-20: 80px;
3224
3317
  /* Spacing 0.5 (2px) */
3225
- --spacing-0.5: 2px;
3318
+ --spacing-0-5: 2px;
3226
3319
  /* Spacing 1.5 (6px) */
3227
- --spacing-1.5: 6px;
3320
+ --spacing-1-5: 6px;
3228
3321
 
3229
3322
  /* --- Font Families --- */
3230
3323
  /* Heading font family */
@@ -3268,8 +3361,91 @@ var tailwindCss2 = `@import "tailwindcss";
3268
3361
 
3269
3362
  }
3270
3363
 
3271
- /* Light mode semantic tokens (default) */
3364
+ /* Primitive aliases + light mode semantic tokens */
3272
3365
  :root {
3366
+ /* --primitive-color-* aliases \u2192 @theme --color-* (for semantic var() resolution) */
3367
+ --primitive-color-schwarz-50: var(--color-schwarz-50);
3368
+ --primitive-color-schwarz-100: var(--color-schwarz-100);
3369
+ --primitive-color-schwarz-200: var(--color-schwarz-200);
3370
+ --primitive-color-schwarz-300: var(--color-schwarz-300);
3371
+ --primitive-color-schwarz-400: var(--color-schwarz-400);
3372
+ --primitive-color-schwarz-500: var(--color-schwarz-500);
3373
+ --primitive-color-schwarz-600: var(--color-schwarz-600);
3374
+ --primitive-color-schwarz-700: var(--color-schwarz-700);
3375
+ --primitive-color-schwarz-800: var(--color-schwarz-800);
3376
+ --primitive-color-schwarz-900: var(--color-schwarz-900);
3377
+ --primitive-color-weiss-50: var(--color-weiss-50);
3378
+ --primitive-color-weiss-100: var(--color-weiss-100);
3379
+ --primitive-color-weiss-200: var(--color-weiss-200);
3380
+ --primitive-color-weiss-300: var(--color-weiss-300);
3381
+ --primitive-color-weiss-400: var(--color-weiss-400);
3382
+ --primitive-color-weiss-500: var(--color-weiss-500);
3383
+ --primitive-color-weiss-600: var(--color-weiss-600);
3384
+ --primitive-color-weiss-700: var(--color-weiss-700);
3385
+ --primitive-color-weiss-800: var(--color-weiss-800);
3386
+ --primitive-color-weiss-900: var(--color-weiss-900);
3387
+ --primitive-color-rot-signal-red-50: var(--color-rot-signal-red-50);
3388
+ --primitive-color-rot-signal-red-100: var(--color-rot-signal-red-100);
3389
+ --primitive-color-rot-signal-red-200: var(--color-rot-signal-red-200);
3390
+ --primitive-color-rot-signal-red-300: var(--color-rot-signal-red-300);
3391
+ --primitive-color-rot-signal-red-400: var(--color-rot-signal-red-400);
3392
+ --primitive-color-rot-signal-red-500: var(--color-rot-signal-red-500);
3393
+ --primitive-color-rot-signal-red-600: var(--color-rot-signal-red-600);
3394
+ --primitive-color-rot-signal-red-700: var(--color-rot-signal-red-700);
3395
+ --primitive-color-rot-signal-red-800: var(--color-rot-signal-red-800);
3396
+ --primitive-color-rot-signal-red-900: var(--color-rot-signal-red-900);
3397
+ --primitive-color-mittelgrau-50: var(--color-mittelgrau-50);
3398
+ --primitive-color-mittelgrau-100: var(--color-mittelgrau-100);
3399
+ --primitive-color-mittelgrau-200: var(--color-mittelgrau-200);
3400
+ --primitive-color-mittelgrau-300: var(--color-mittelgrau-300);
3401
+ --primitive-color-mittelgrau-400: var(--color-mittelgrau-400);
3402
+ --primitive-color-mittelgrau-500: var(--color-mittelgrau-500);
3403
+ --primitive-color-mittelgrau-600: var(--color-mittelgrau-600);
3404
+ --primitive-color-mittelgrau-700: var(--color-mittelgrau-700);
3405
+ --primitive-color-mittelgrau-800: var(--color-mittelgrau-800);
3406
+ --primitive-color-mittelgrau-900: var(--color-mittelgrau-900);
3407
+ --primitive-color-hellgrau-50: var(--color-hellgrau-50);
3408
+ --primitive-color-hellgrau-100: var(--color-hellgrau-100);
3409
+ --primitive-color-hellgrau-200: var(--color-hellgrau-200);
3410
+ --primitive-color-hellgrau-300: var(--color-hellgrau-300);
3411
+ --primitive-color-hellgrau-400: var(--color-hellgrau-400);
3412
+ --primitive-color-hellgrau-500: var(--color-hellgrau-500);
3413
+ --primitive-color-hellgrau-600: var(--color-hellgrau-600);
3414
+ --primitive-color-hellgrau-700: var(--color-hellgrau-700);
3415
+ --primitive-color-hellgrau-800: var(--color-hellgrau-800);
3416
+ --primitive-color-hellgrau-900: var(--color-hellgrau-900);
3417
+ --primitive-color-dunkelblau-50: var(--color-dunkelblau-50);
3418
+ --primitive-color-dunkelblau-100: var(--color-dunkelblau-100);
3419
+ --primitive-color-dunkelblau-200: var(--color-dunkelblau-200);
3420
+ --primitive-color-dunkelblau-300: var(--color-dunkelblau-300);
3421
+ --primitive-color-dunkelblau-400: var(--color-dunkelblau-400);
3422
+ --primitive-color-dunkelblau-500: var(--color-dunkelblau-500);
3423
+ --primitive-color-dunkelblau-600: var(--color-dunkelblau-600);
3424
+ --primitive-color-dunkelblau-700: var(--color-dunkelblau-700);
3425
+ --primitive-color-dunkelblau-800: var(--color-dunkelblau-800);
3426
+ --primitive-color-dunkelblau-900: var(--color-dunkelblau-900);
3427
+ --primitive-color-neutral-50: var(--color-neutral-50);
3428
+ --primitive-color-neutral-100: var(--color-neutral-100);
3429
+ --primitive-color-neutral-200: var(--color-neutral-200);
3430
+ --primitive-color-neutral-300: var(--color-neutral-300);
3431
+ --primitive-color-neutral-400: var(--color-neutral-400);
3432
+ --primitive-color-neutral-500: var(--color-neutral-500);
3433
+ --primitive-color-neutral-600: var(--color-neutral-600);
3434
+ --primitive-color-neutral-700: var(--color-neutral-700);
3435
+ --primitive-color-neutral-800: var(--color-neutral-800);
3436
+ --primitive-color-neutral-900: var(--color-neutral-900);
3437
+ --primitive-color-accent-50: var(--color-accent-50);
3438
+ --primitive-color-accent-100: var(--color-accent-100);
3439
+ --primitive-color-accent-200: var(--color-accent-200);
3440
+ --primitive-color-accent-300: var(--color-accent-300);
3441
+ --primitive-color-accent-400: var(--color-accent-400);
3442
+ --primitive-color-accent-500: var(--color-accent-500);
3443
+ --primitive-color-accent-600: var(--color-accent-600);
3444
+ --primitive-color-accent-700: var(--color-accent-700);
3445
+ --primitive-color-accent-800: var(--color-accent-800);
3446
+ --primitive-color-accent-900: var(--color-accent-900);
3447
+
3448
+ /* Semantic tokens */
3273
3449
  /* Page background */
3274
3450
  --background-canvas: var(--primitive-color-neutral-50);
3275
3451
  /* Card/surface background */