@syncupsuite/themes 0.1.1 → 0.2.2
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/README.md +91 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +8 -6
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
|