haus-tokens 0.1.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 (9) hide show
  1. package/README.md +85 -0
  2. package/dist/index.d.ts +186 -0
  3. package/dist/index.js +146 -0
  4. package/dist/index.js.map +1 -0
  5. package/dist/motion.css +47 -0
  6. package/dist/primitives.css +158 -0
  7. package/dist/semantics.css +162 -0
  8. package/dist/tokens.json +269 -0
  9. package/package.json +54 -0
package/README.md ADDED
@@ -0,0 +1,85 @@
1
+ # haus-tokens
2
+
3
+ The haus design tokens — OKLCH colour, type, spacing, radius, shadow, motion —
4
+ in three forms, from one source of truth.
5
+
6
+ | Form | Import | For |
7
+ |---|---|---|
8
+ | CSS custom properties | `haus-tokens/primitives.css`, `/semantics.css`, `/motion.css` | styling components |
9
+ | Typed JS constants | `import { tokens } from 'haus-tokens'` | build config, style-in-JS, media queries |
10
+ | W3C-DTCG JSON | `haus-tokens/tokens.json` | design-tool sync, external tooling |
11
+
12
+ ## Install
13
+
14
+ ```bash
15
+ npm install haus-tokens
16
+ ```
17
+
18
+ ```ts
19
+ import 'haus-tokens/primitives.css'
20
+ import 'haus-tokens/semantics.css'
21
+ import 'haus-tokens/motion.css'
22
+ ```
23
+
24
+ Load them in that order: `primitives` declares raw values, `semantics` gives
25
+ them meaning, `motion` adds duration and easing. All three are wrapped in
26
+ `@layer haus.*`, so your own styles win without a specificity fight.
27
+
28
+ ## The two layers
29
+
30
+ ```
31
+ primitives.css --aronia-500: oklch(52% 0.138 300)
32
+ ↓
33
+ semantics.css --primary-default: var(--aronia-500)
34
+ ↓
35
+ your component background: var(--primary-default)
36
+ ```
37
+
38
+ **Components must never reference a primitive directly.** A primitive is a raw
39
+ value with no opinion; a semantic token carries the decision. Reaching past the
40
+ semantic layer is what makes a theme swap impossible later.
41
+
42
+ ## Typed constants
43
+
44
+ Custom properties cannot be used inside `@media` conditions, and build tools
45
+ can't read CSS. The JS export covers that:
46
+
47
+ ```ts
48
+ import { tokens } from 'haus-tokens'
49
+
50
+ tokens.color.aronia[500] // 'oklch(52% 0.138 300)'
51
+ tokens.breakpoint.lg // '1024px' — breakpoints are JS-only, by necessity
52
+ tokens.motion['fade-in'] // '200ms cubic-bezier(0.00, 0.00, 0.20, 1.00)'
53
+ ```
54
+
55
+ This is the **primitive** layer only. Semantic tokens live in `semantics.css`
56
+ and in `tokens.json`, because their whole job is to be swappable at runtime —
57
+ freezing them into a JS constant would defeat the point.
58
+
59
+ ## The DTCG JSON
60
+
61
+ `tokens.json` conforms to the [W3C Design Tokens](https://tr.designtokens.org/format/)
62
+ format, so it round-trips through design tooling. It stores *typed* values
63
+ rather than CSS strings — a font family is an array, a cubic-bezier is four
64
+ numbers, a composite is an alias:
65
+
66
+ ```jsonc
67
+ "font": { "family": { "sans": { "$type": "fontFamily", "$value": ["Manrope", "system-ui", "sans-serif"] } } },
68
+ "easing": { "enter": { "$type": "cubicBezier", "$value": [0.0, 0.0, 0.2, 1.0] } },
69
+ "motion": { "fade-in": { "$type": "string", "$value": "{duration.normal} {easing.enter}" } }
70
+ ```
71
+
72
+ ## Three copies, one truth
73
+
74
+ Stating the same tokens three times invites exactly the drift this design
75
+ system exists to prevent — so `tokens.test.ts` checks it mechanically on every
76
+ run. It compares all three forms *after* resolving DTCG's typed values and
77
+ aliases, so a real value change fails the build while a formatting difference
78
+ does not, and it fails if any form declares a token the others don't.
79
+
80
+ That covers 133 tokens against the JSON and 112 against the CSS. Change a value
81
+ in one place and the suite tells you about the other two.
82
+
83
+ ## Licence
84
+
85
+ MIT
package/dist/index.d.ts ADDED
@@ -0,0 +1,186 @@
1
+ declare const tokens: {
2
+ readonly color: {
3
+ readonly aronia: {
4
+ readonly 100: "oklch(97% 0.012 300)";
5
+ readonly 200: "oklch(92% 0.028 300)";
6
+ readonly 300: "oklch(84% 0.058 300)";
7
+ readonly 400: "oklch(72% 0.100 300)";
8
+ readonly 500: "oklch(52% 0.138 300)";
9
+ readonly 600: "oklch(43% 0.125 300)";
10
+ readonly 700: "oklch(35% 0.105 300)";
11
+ readonly 800: "oklch(26% 0.080 300)";
12
+ readonly 900: "oklch(18% 0.052 300)";
13
+ readonly 950: "oklch(12% 0.032 300)";
14
+ };
15
+ readonly damson: {
16
+ readonly 0: "oklch(100% 0 0)";
17
+ readonly 50: "oklch(99% 0.003 290)";
18
+ readonly 100: "oklch(97% 0.006 290)";
19
+ readonly 200: "oklch(93% 0.008 290)";
20
+ readonly 300: "oklch(86% 0.010 290)";
21
+ readonly 400: "oklch(74% 0.010 290)";
22
+ readonly 500: "oklch(60% 0.008 290)";
23
+ readonly 600: "oklch(48% 0.007 290)";
24
+ readonly 700: "oklch(37% 0.006 290)";
25
+ readonly 800: "oklch(27% 0.005 290)";
26
+ readonly 900: "oklch(18% 0.003 290)";
27
+ readonly 950: "oklch(11% 0.002 290)";
28
+ };
29
+ readonly elderberry: {
30
+ readonly 100: "oklch(97% 0.020 265)";
31
+ readonly 200: "oklch(93% 0.040 265)";
32
+ readonly 400: "oklch(74% 0.160 265)";
33
+ readonly 500: "oklch(55% 0.200 265)";
34
+ readonly 700: "oklch(42% 0.160 265)";
35
+ readonly 900: "oklch(30% 0.120 265)";
36
+ };
37
+ readonly greengage: {
38
+ readonly 100: "oklch(97% 0.030 148)";
39
+ readonly 200: "oklch(93% 0.055 148)";
40
+ readonly 400: "oklch(75% 0.150 148)";
41
+ readonly 500: "oklch(58% 0.185 148)";
42
+ readonly 700: "oklch(45% 0.150 148)";
43
+ readonly 900: "oklch(33% 0.110 148)";
44
+ };
45
+ readonly mango: {
46
+ readonly 100: "oklch(97% 0.025 65)";
47
+ readonly 200: "oklch(93% 0.045 65)";
48
+ readonly 400: "oklch(76% 0.145 65)";
49
+ readonly 500: "oklch(60% 0.175 65)";
50
+ readonly 700: "oklch(47% 0.142 65)";
51
+ readonly 900: "oklch(38% 0.110 65)";
52
+ };
53
+ readonly cherry: {
54
+ readonly 100: "oklch(97% 0.030 27)";
55
+ readonly 200: "oklch(93% 0.055 27)";
56
+ readonly 400: "oklch(74% 0.160 27)";
57
+ readonly 500: "oklch(58% 0.200 27)";
58
+ readonly 700: "oklch(44% 0.168 27)";
59
+ readonly 900: "oklch(33% 0.110 27)";
60
+ };
61
+ };
62
+ readonly font: {
63
+ readonly family: {
64
+ readonly sans: "'Manrope', system-ui, sans-serif";
65
+ readonly mono: "'Fira Code', ui-monospace, monospace";
66
+ };
67
+ readonly size: {
68
+ readonly 11: "0.6875rem";
69
+ readonly 12: "0.75rem";
70
+ readonly 13: "0.8125rem";
71
+ readonly 14: "0.875rem";
72
+ readonly 16: "1rem";
73
+ readonly 20: "1.25rem";
74
+ readonly 24: "1.5rem";
75
+ readonly 30: "1.875rem";
76
+ };
77
+ readonly weight: {
78
+ readonly regular: 400;
79
+ readonly medium: 500;
80
+ readonly semibold: 600;
81
+ readonly bold: 700;
82
+ };
83
+ readonly lineHeight: {
84
+ readonly tight: 1.15;
85
+ readonly tighter: 1.2;
86
+ readonly snug: 1.25;
87
+ readonly compact: 1.3;
88
+ readonly normal: 1.4;
89
+ readonly relaxed: 1.5;
90
+ readonly loose: 1.6;
91
+ };
92
+ readonly tracking: {
93
+ readonly tight: "-0.01em";
94
+ readonly normal: "0em";
95
+ readonly wide: "0.02em";
96
+ readonly widest: "0.08em";
97
+ };
98
+ };
99
+ readonly spacing: {
100
+ readonly 1: "0.25rem";
101
+ readonly 2: "0.5rem";
102
+ readonly 3: "0.75rem";
103
+ readonly 4: "1rem";
104
+ readonly 5: "1.25rem";
105
+ readonly 6: "1.5rem";
106
+ readonly 7: "1.75rem";
107
+ readonly 8: "2rem";
108
+ readonly 10: "2.5rem";
109
+ readonly 12: "3rem";
110
+ readonly 16: "4rem";
111
+ readonly 20: "5rem";
112
+ };
113
+ readonly radius: {
114
+ readonly none: "0";
115
+ readonly sm: "0.25rem";
116
+ readonly md: "0.5rem";
117
+ readonly lg: "0.75rem";
118
+ readonly xl: "1rem";
119
+ readonly '2xl': "1.5rem";
120
+ readonly full: "9999px";
121
+ };
122
+ readonly duration: {
123
+ readonly instant: "50ms";
124
+ readonly fast: "100ms";
125
+ readonly normal: "200ms";
126
+ readonly moderate: "300ms";
127
+ readonly slow: "500ms";
128
+ };
129
+ readonly easing: {
130
+ readonly enter: "cubic-bezier(0.00, 0.00, 0.20, 1.00)";
131
+ readonly exit: "cubic-bezier(0.40, 0.00, 1.00, 1.00)";
132
+ readonly move: "cubic-bezier(0.40, 0.00, 0.20, 1.00)";
133
+ readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1.00)";
134
+ readonly linear: "linear";
135
+ };
136
+ readonly motion: {
137
+ readonly 'fade-in': "200ms cubic-bezier(0.00, 0.00, 0.20, 1.00)";
138
+ readonly 'fade-out': "100ms cubic-bezier(0.40, 0.00, 1.00, 1.00)";
139
+ readonly 'slide-in': "300ms cubic-bezier(0.00, 0.00, 0.20, 1.00)";
140
+ readonly 'slide-out': "100ms cubic-bezier(0.40, 0.00, 1.00, 1.00)";
141
+ readonly micro: "100ms cubic-bezier(0.40, 0.00, 0.20, 1.00)";
142
+ readonly interactive: "200ms cubic-bezier(0.40, 0.00, 0.20, 1.00)";
143
+ };
144
+ readonly shadow: {
145
+ readonly none: "none";
146
+ readonly sm: "0 1px 2px oklch(18% 0.003 290 / 0.06)";
147
+ readonly md: "0 4px 6px -1px oklch(18% 0.003 290 / 0.10), 0 2px 4px -2px oklch(18% 0.003 290 / 0.10)";
148
+ readonly lg: "0 10px 15px -3px oklch(18% 0.003 290 / 0.10), 0 4px 6px -4px oklch(18% 0.003 290 / 0.07)";
149
+ readonly xl: "0 20px 25px -5px oklch(18% 0.003 290 / 0.10), 0 8px 10px -6px oklch(18% 0.003 290 / 0.10)";
150
+ };
151
+ readonly zIndex: {
152
+ readonly base: 0;
153
+ readonly raised: 10;
154
+ readonly dropdown: 100;
155
+ readonly sticky: 200;
156
+ readonly overlay: 300;
157
+ readonly modal: 400;
158
+ readonly toast: 500;
159
+ readonly tooltip: 600;
160
+ };
161
+ readonly borderWidth: {
162
+ readonly default: "1px";
163
+ readonly thick: "2px";
164
+ };
165
+ readonly opacity: {
166
+ readonly disabled: 0.4;
167
+ readonly overlay: 0.6;
168
+ };
169
+ readonly iconSize: {
170
+ readonly xs: "0.75rem";
171
+ readonly sm: "1rem";
172
+ readonly md: "1.25rem";
173
+ readonly lg: "1.5rem";
174
+ readonly xl: "2rem";
175
+ };
176
+ readonly breakpoint: {
177
+ readonly sm: "640px";
178
+ readonly md: "768px";
179
+ readonly lg: "1024px";
180
+ readonly xl: "1280px";
181
+ readonly '2xl': "1536px";
182
+ };
183
+ };
184
+ type Tokens = typeof tokens;
185
+
186
+ export { type Tokens, tokens };
package/dist/index.js ADDED
@@ -0,0 +1,146 @@
1
+ // src/index.ts
2
+ var dur = {
3
+ instant: "50ms",
4
+ fast: "100ms",
5
+ normal: "200ms",
6
+ moderate: "300ms",
7
+ slow: "500ms"
8
+ };
9
+ var ease = {
10
+ enter: "cubic-bezier(0.00, 0.00, 0.20, 1.00)",
11
+ exit: "cubic-bezier(0.40, 0.00, 1.00, 1.00)",
12
+ move: "cubic-bezier(0.40, 0.00, 0.20, 1.00)",
13
+ spring: "cubic-bezier(0.34, 1.56, 0.64, 1.00)",
14
+ linear: "linear"
15
+ };
16
+ var tokens = {
17
+ color: {
18
+ aronia: {
19
+ 100: "oklch(97% 0.012 300)",
20
+ 200: "oklch(92% 0.028 300)",
21
+ 300: "oklch(84% 0.058 300)",
22
+ 400: "oklch(72% 0.100 300)",
23
+ 500: "oklch(52% 0.138 300)",
24
+ 600: "oklch(43% 0.125 300)",
25
+ 700: "oklch(35% 0.105 300)",
26
+ 800: "oklch(26% 0.080 300)",
27
+ 900: "oklch(18% 0.052 300)",
28
+ 950: "oklch(12% 0.032 300)"
29
+ },
30
+ damson: {
31
+ 0: "oklch(100% 0 0)",
32
+ 50: "oklch(99% 0.003 290)",
33
+ 100: "oklch(97% 0.006 290)",
34
+ 200: "oklch(93% 0.008 290)",
35
+ 300: "oklch(86% 0.010 290)",
36
+ 400: "oklch(74% 0.010 290)",
37
+ 500: "oklch(60% 0.008 290)",
38
+ 600: "oklch(48% 0.007 290)",
39
+ 700: "oklch(37% 0.006 290)",
40
+ 800: "oklch(27% 0.005 290)",
41
+ 900: "oklch(18% 0.003 290)",
42
+ 950: "oklch(11% 0.002 290)"
43
+ },
44
+ elderberry: {
45
+ 100: "oklch(97% 0.020 265)",
46
+ 200: "oklch(93% 0.040 265)",
47
+ 400: "oklch(74% 0.160 265)",
48
+ 500: "oklch(55% 0.200 265)",
49
+ 700: "oklch(42% 0.160 265)",
50
+ 900: "oklch(30% 0.120 265)"
51
+ },
52
+ greengage: {
53
+ 100: "oklch(97% 0.030 148)",
54
+ 200: "oklch(93% 0.055 148)",
55
+ 400: "oklch(75% 0.150 148)",
56
+ 500: "oklch(58% 0.185 148)",
57
+ 700: "oklch(45% 0.150 148)",
58
+ 900: "oklch(33% 0.110 148)"
59
+ },
60
+ mango: {
61
+ 100: "oklch(97% 0.025 65)",
62
+ 200: "oklch(93% 0.045 65)",
63
+ 400: "oklch(76% 0.145 65)",
64
+ 500: "oklch(60% 0.175 65)",
65
+ 700: "oklch(47% 0.142 65)",
66
+ 900: "oklch(38% 0.110 65)"
67
+ },
68
+ cherry: {
69
+ 100: "oklch(97% 0.030 27)",
70
+ 200: "oklch(93% 0.055 27)",
71
+ 400: "oklch(74% 0.160 27)",
72
+ 500: "oklch(58% 0.200 27)",
73
+ 700: "oklch(44% 0.168 27)",
74
+ 900: "oklch(33% 0.110 27)"
75
+ }
76
+ },
77
+ font: {
78
+ family: {
79
+ sans: "'Manrope', system-ui, sans-serif",
80
+ mono: "'Fira Code', ui-monospace, monospace"
81
+ },
82
+ size: {
83
+ 11: "0.6875rem",
84
+ 12: "0.75rem",
85
+ 13: "0.8125rem",
86
+ 14: "0.875rem",
87
+ 16: "1rem",
88
+ 20: "1.25rem",
89
+ 24: "1.5rem",
90
+ 30: "1.875rem"
91
+ },
92
+ weight: { regular: 400, medium: 500, semibold: 600, bold: 700 },
93
+ lineHeight: { tight: 1.15, tighter: 1.2, snug: 1.25, compact: 1.3, normal: 1.4, relaxed: 1.5, loose: 1.6 },
94
+ tracking: { tight: "-0.01em", normal: "0em", wide: "0.02em", widest: "0.08em" }
95
+ },
96
+ spacing: {
97
+ 1: "0.25rem",
98
+ 2: "0.5rem",
99
+ 3: "0.75rem",
100
+ 4: "1rem",
101
+ 5: "1.25rem",
102
+ 6: "1.5rem",
103
+ 7: "1.75rem",
104
+ 8: "2rem",
105
+ 10: "2.5rem",
106
+ 12: "3rem",
107
+ 16: "4rem",
108
+ 20: "5rem"
109
+ },
110
+ radius: { none: "0", sm: "0.25rem", md: "0.5rem", lg: "0.75rem", xl: "1rem", "2xl": "1.5rem", full: "9999px" },
111
+ duration: dur,
112
+ easing: ease,
113
+ motion: {
114
+ "fade-in": `${dur.normal} ${ease.enter}`,
115
+ "fade-out": `${dur.fast} ${ease.exit}`,
116
+ "slide-in": `${dur.moderate} ${ease.enter}`,
117
+ "slide-out": `${dur.fast} ${ease.exit}`,
118
+ "micro": `${dur.fast} ${ease.move}`,
119
+ "interactive": `${dur.normal} ${ease.move}`
120
+ },
121
+ shadow: {
122
+ none: "none",
123
+ sm: "0 1px 2px oklch(18% 0.003 290 / 0.06)",
124
+ md: "0 4px 6px -1px oklch(18% 0.003 290 / 0.10), 0 2px 4px -2px oklch(18% 0.003 290 / 0.10)",
125
+ lg: "0 10px 15px -3px oklch(18% 0.003 290 / 0.10), 0 4px 6px -4px oklch(18% 0.003 290 / 0.07)",
126
+ xl: "0 20px 25px -5px oklch(18% 0.003 290 / 0.10), 0 8px 10px -6px oklch(18% 0.003 290 / 0.10)"
127
+ },
128
+ zIndex: {
129
+ base: 0,
130
+ raised: 10,
131
+ dropdown: 100,
132
+ sticky: 200,
133
+ overlay: 300,
134
+ modal: 400,
135
+ toast: 500,
136
+ tooltip: 600
137
+ },
138
+ borderWidth: { default: "1px", thick: "2px" },
139
+ opacity: { disabled: 0.4, overlay: 0.6 },
140
+ iconSize: { xs: "0.75rem", sm: "1rem", md: "1.25rem", lg: "1.5rem", xl: "2rem" },
141
+ breakpoint: { sm: "640px", md: "768px", lg: "1024px", xl: "1280px", "2xl": "1536px" }
142
+ };
143
+
144
+ export { tokens };
145
+ //# sourceMappingURL=index.js.map
146
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";AAAA,IAAM,GAAA,GAAM;AAAA,EACV,OAAA,EAAU,MAAA;AAAA,EACV,IAAA,EAAU,OAAA;AAAA,EACV,MAAA,EAAU,OAAA;AAAA,EACV,QAAA,EAAU,OAAA;AAAA,EACV,IAAA,EAAU;AACZ,CAAA;AAEA,IAAM,IAAA,GAAO;AAAA,EACX,KAAA,EAAQ,sCAAA;AAAA,EACR,IAAA,EAAQ,sCAAA;AAAA,EACR,IAAA,EAAQ,sCAAA;AAAA,EACR,MAAA,EAAQ,sCAAA;AAAA,EACR,MAAA,EAAQ;AACV,CAAA;AAEO,IAAM,MAAA,GAAS;AAAA,EACpB,KAAA,EAAO;AAAA,IACL,MAAA,EAAQ;AAAA,MACN,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK;AAAA,KACP;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,CAAA,EAAK,iBAAA;AAAA,MACL,EAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK;AAAA,KACP;AAAA,IACA,UAAA,EAAY;AAAA,MACV,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK;AAAA,KACP;AAAA,IACA,SAAA,EAAW;AAAA,MACT,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK,sBAAA;AAAA,MACL,GAAA,EAAK;AAAA,KACP;AAAA,IACA,KAAA,EAAO;AAAA,MACL,GAAA,EAAK,qBAAA;AAAA,MACL,GAAA,EAAK,qBAAA;AAAA,MACL,GAAA,EAAK,qBAAA;AAAA,MACL,GAAA,EAAK,qBAAA;AAAA,MACL,GAAA,EAAK,qBAAA;AAAA,MACL,GAAA,EAAK;AAAA,KACP;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,GAAA,EAAK,qBAAA;AAAA,MACL,GAAA,EAAK,qBAAA;AAAA,MACL,GAAA,EAAK,qBAAA;AAAA,MACL,GAAA,EAAK,qBAAA;AAAA,MACL,GAAA,EAAK,qBAAA;AAAA,MACL,GAAA,EAAK;AAAA;AACP,GACF;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,MAAA,EAAQ;AAAA,MACN,IAAA,EAAM,kCAAA;AAAA,MACN,IAAA,EAAM;AAAA,KACR;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,WAAA;AAAA,MACJ,EAAA,EAAI,SAAA;AAAA,MACJ,EAAA,EAAI,WAAA;AAAA,MACJ,EAAA,EAAI,UAAA;AAAA,MACJ,EAAA,EAAI,MAAA;AAAA,MACJ,EAAA,EAAI,SAAA;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN;AAAA,IACA,MAAA,EAAY,EAAE,OAAA,EAAS,GAAA,EAAK,QAAQ,GAAA,EAAK,QAAA,EAAU,GAAA,EAAK,IAAA,EAAM,GAAA,EAAI;AAAA,IAClE,UAAA,EAAY,EAAE,KAAA,EAAO,IAAA,EAAM,SAAS,GAAA,EAAK,IAAA,EAAM,IAAA,EAAM,OAAA,EAAS,KAAK,MAAA,EAAQ,GAAA,EAAK,OAAA,EAAS,GAAA,EAAK,OAAO,GAAA,EAAI;AAAA,IACzG,QAAA,EAAY,EAAE,KAAA,EAAO,SAAA,EAAW,QAAQ,KAAA,EAAO,IAAA,EAAM,QAAA,EAAU,MAAA,EAAQ,QAAA;AAAS,GAClF;AAAA,EACA,OAAA,EAAS;AAAA,IACP,CAAA,EAAG,SAAA;AAAA,IAAY,CAAA,EAAG,QAAA;AAAA,IAAY,CAAA,EAAG,SAAA;AAAA,IAAY,CAAA,EAAG,MAAA;AAAA,IAChD,CAAA,EAAG,SAAA;AAAA,IAAY,CAAA,EAAG,QAAA;AAAA,IAAY,CAAA,EAAG,SAAA;AAAA,IAAY,CAAA,EAAG,MAAA;AAAA,IAChD,EAAA,EAAI,QAAA;AAAA,IAAU,EAAA,EAAI,MAAA;AAAA,IAAW,EAAA,EAAI,MAAA;AAAA,IAAW,EAAA,EAAI;AAAA,GAClD;AAAA,EACA,MAAA,EAAQ,EAAE,IAAA,EAAM,GAAA,EAAK,IAAI,SAAA,EAAW,EAAA,EAAI,QAAA,EAAU,EAAA,EAAI,WAAW,EAAA,EAAI,MAAA,EAAQ,KAAA,EAAO,QAAA,EAAU,MAAM,QAAA,EAAS;AAAA,EAC7G,QAAA,EAAU,GAAA;AAAA,EACV,MAAA,EAAQ,IAAA;AAAA,EACR,MAAA,EAAQ;AAAA,IACN,WAAc,CAAA,EAAG,GAAA,CAAI,MAAM,CAAA,CAAA,EAAI,KAAK,KAAK,CAAA,CAAA;AAAA,IACzC,YAAc,CAAA,EAAG,GAAA,CAAI,IAAI,CAAA,CAAA,EAAI,KAAK,IAAI,CAAA,CAAA;AAAA,IACtC,YAAc,CAAA,EAAG,GAAA,CAAI,QAAQ,CAAA,CAAA,EAAI,KAAK,KAAK,CAAA,CAAA;AAAA,IAC3C,aAAc,CAAA,EAAG,GAAA,CAAI,IAAI,CAAA,CAAA,EAAI,KAAK,IAAI,CAAA,CAAA;AAAA,IACtC,SAAc,CAAA,EAAG,GAAA,CAAI,IAAI,CAAA,CAAA,EAAI,KAAK,IAAI,CAAA,CAAA;AAAA,IACtC,eAAc,CAAA,EAAG,GAAA,CAAI,MAAM,CAAA,CAAA,EAAI,KAAK,IAAI,CAAA;AAAA,GAC1C;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM,MAAA;AAAA,IACN,EAAA,EAAM,uCAAA;AAAA,IACN,EAAA,EAAM,wFAAA;AAAA,IACN,EAAA,EAAM,0FAAA;AAAA,IACN,EAAA,EAAM;AAAA,GACR;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM,CAAA;AAAA,IAAG,MAAA,EAAQ,EAAA;AAAA,IAAI,QAAA,EAAU,GAAA;AAAA,IAAK,MAAA,EAAQ,GAAA;AAAA,IAC5C,OAAA,EAAS,GAAA;AAAA,IAAK,KAAA,EAAO,GAAA;AAAA,IAAK,KAAA,EAAO,GAAA;AAAA,IAAK,OAAA,EAAS;AAAA,GACjD;AAAA,EACA,WAAA,EAAa,EAAE,OAAA,EAAS,KAAA,EAAO,OAAO,KAAA,EAAM;AAAA,EAC5C,OAAA,EAAa,EAAE,QAAA,EAAU,GAAA,EAAK,SAAS,GAAA,EAAI;AAAA,EAC3C,QAAA,EAAa,EAAE,EAAA,EAAI,SAAA,EAAW,EAAA,EAAI,MAAA,EAAQ,EAAA,EAAI,SAAA,EAAW,EAAA,EAAI,QAAA,EAAU,EAAA,EAAI,MAAA,EAAO;AAAA,EAClF,UAAA,EAAa,EAAE,EAAA,EAAI,OAAA,EAAS,EAAA,EAAI,OAAA,EAAS,EAAA,EAAI,QAAA,EAAU,EAAA,EAAI,QAAA,EAAU,KAAA,EAAO,QAAA;AAC9E","file":"index.js","sourcesContent":["const dur = {\n instant: '50ms',\n fast: '100ms',\n normal: '200ms',\n moderate: '300ms',\n slow: '500ms',\n} as const\n\nconst ease = {\n enter: 'cubic-bezier(0.00, 0.00, 0.20, 1.00)',\n exit: 'cubic-bezier(0.40, 0.00, 1.00, 1.00)',\n move: 'cubic-bezier(0.40, 0.00, 0.20, 1.00)',\n spring: 'cubic-bezier(0.34, 1.56, 0.64, 1.00)',\n linear: 'linear',\n} as const\n\nexport const tokens = {\n color: {\n aronia: {\n 100: 'oklch(97% 0.012 300)',\n 200: 'oklch(92% 0.028 300)',\n 300: 'oklch(84% 0.058 300)',\n 400: 'oklch(72% 0.100 300)',\n 500: 'oklch(52% 0.138 300)',\n 600: 'oklch(43% 0.125 300)',\n 700: 'oklch(35% 0.105 300)',\n 800: 'oklch(26% 0.080 300)',\n 900: 'oklch(18% 0.052 300)',\n 950: 'oklch(12% 0.032 300)',\n },\n damson: {\n 0: 'oklch(100% 0 0)',\n 50: 'oklch(99% 0.003 290)',\n 100: 'oklch(97% 0.006 290)',\n 200: 'oklch(93% 0.008 290)',\n 300: 'oklch(86% 0.010 290)',\n 400: 'oklch(74% 0.010 290)',\n 500: 'oklch(60% 0.008 290)',\n 600: 'oklch(48% 0.007 290)',\n 700: 'oklch(37% 0.006 290)',\n 800: 'oklch(27% 0.005 290)',\n 900: 'oklch(18% 0.003 290)',\n 950: 'oklch(11% 0.002 290)',\n },\n elderberry: {\n 100: 'oklch(97% 0.020 265)',\n 200: 'oklch(93% 0.040 265)',\n 400: 'oklch(74% 0.160 265)',\n 500: 'oklch(55% 0.200 265)',\n 700: 'oklch(42% 0.160 265)',\n 900: 'oklch(30% 0.120 265)',\n },\n greengage: {\n 100: 'oklch(97% 0.030 148)',\n 200: 'oklch(93% 0.055 148)',\n 400: 'oklch(75% 0.150 148)',\n 500: 'oklch(58% 0.185 148)',\n 700: 'oklch(45% 0.150 148)',\n 900: 'oklch(33% 0.110 148)',\n },\n mango: {\n 100: 'oklch(97% 0.025 65)',\n 200: 'oklch(93% 0.045 65)',\n 400: 'oklch(76% 0.145 65)',\n 500: 'oklch(60% 0.175 65)',\n 700: 'oklch(47% 0.142 65)',\n 900: 'oklch(38% 0.110 65)',\n },\n cherry: {\n 100: 'oklch(97% 0.030 27)',\n 200: 'oklch(93% 0.055 27)',\n 400: 'oklch(74% 0.160 27)',\n 500: 'oklch(58% 0.200 27)',\n 700: 'oklch(44% 0.168 27)',\n 900: 'oklch(33% 0.110 27)',\n },\n },\n font: {\n family: {\n sans: \"'Manrope', system-ui, sans-serif\",\n mono: \"'Fira Code', ui-monospace, monospace\",\n },\n size: {\n 11: '0.6875rem',\n 12: '0.75rem',\n 13: '0.8125rem',\n 14: '0.875rem',\n 16: '1rem',\n 20: '1.25rem',\n 24: '1.5rem',\n 30: '1.875rem',\n },\n weight: { regular: 400, medium: 500, semibold: 600, bold: 700 },\n lineHeight: { tight: 1.15, tighter: 1.2, snug: 1.25, compact: 1.3, normal: 1.4, relaxed: 1.5, loose: 1.6 },\n tracking: { tight: '-0.01em', normal: '0em', wide: '0.02em', widest: '0.08em' },\n },\n spacing: {\n 1: '0.25rem', 2: '0.5rem', 3: '0.75rem', 4: '1rem',\n 5: '1.25rem', 6: '1.5rem', 7: '1.75rem', 8: '2rem',\n 10: '2.5rem', 12: '3rem', 16: '4rem', 20: '5rem',\n },\n radius: { none: '0', sm: '0.25rem', md: '0.5rem', lg: '0.75rem', xl: '1rem', '2xl': '1.5rem', full: '9999px' },\n duration: dur,\n easing: ease,\n motion: {\n 'fade-in': `${dur.normal} ${ease.enter}`,\n 'fade-out': `${dur.fast} ${ease.exit}`,\n 'slide-in': `${dur.moderate} ${ease.enter}`,\n 'slide-out': `${dur.fast} ${ease.exit}`,\n 'micro': `${dur.fast} ${ease.move}`,\n 'interactive':`${dur.normal} ${ease.move}`,\n },\n shadow: {\n none: 'none',\n sm: '0 1px 2px oklch(18% 0.003 290 / 0.06)',\n md: '0 4px 6px -1px oklch(18% 0.003 290 / 0.10), 0 2px 4px -2px oklch(18% 0.003 290 / 0.10)',\n lg: '0 10px 15px -3px oklch(18% 0.003 290 / 0.10), 0 4px 6px -4px oklch(18% 0.003 290 / 0.07)',\n xl: '0 20px 25px -5px oklch(18% 0.003 290 / 0.10), 0 8px 10px -6px oklch(18% 0.003 290 / 0.10)',\n },\n zIndex: {\n base: 0, raised: 10, dropdown: 100, sticky: 200,\n overlay: 300, modal: 400, toast: 500, tooltip: 600,\n },\n borderWidth: { default: '1px', thick: '2px' },\n opacity: { disabled: 0.4, overlay: 0.6 },\n iconSize: { xs: '0.75rem', sm: '1rem', md: '1.25rem', lg: '1.5rem', xl: '2rem' },\n breakpoint: { sm: '640px', md: '768px', lg: '1024px', xl: '1280px', '2xl': '1536px' },\n} as const\n\nexport type Tokens = typeof tokens\n"]}
package/dist/motion.css ADDED
@@ -0,0 +1,47 @@
1
+ /* ─── haus / motion ──────────────────────────────────────────────────────────
2
+ Easing curves and durations.
3
+ All animation tokens live here — components must not hardcode values.
4
+ ─────────────────────────────────────────────────────────────────────────── */
5
+
6
+ @layer haus.motion {
7
+
8
+ :root {
9
+
10
+ /* ── Durations ────────────────────────────────────────────────────────── */
11
+ --duration-instant: 50ms;
12
+ --duration-fast: 100ms; /* micro-interactions: checkbox, toggle */
13
+ --duration-normal: 200ms; /* most UI transitions: hover, focus */
14
+ --duration-moderate: 300ms; /* panels, drawers, modals entering */
15
+ --duration-slow: 500ms; /* page transitions, complex sequences */
16
+
17
+ /* ── Easing curves ────────────────────────────────────────────────────── */
18
+
19
+ /* Elements appearing — start slow, arrive with energy */
20
+ --ease-enter: cubic-bezier(0.00, 0.00, 0.20, 1.00);
21
+
22
+ /* Elements leaving — leave quickly, no lingering */
23
+ --ease-exit: cubic-bezier(0.40, 0.00, 1.00, 1.00);
24
+
25
+ /* Position changes within the UI — balanced, physical */
26
+ --ease-move: cubic-bezier(0.40, 0.00, 0.20, 1.00);
27
+
28
+ /* Spring-like — slight overshoot for interactive feedback */
29
+ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.00);
30
+
31
+ /* Linear — for opacity fades where easing adds no value */
32
+ --ease-linear: linear;
33
+
34
+ /* ── Composite motion tokens (duration + easing pairs) ─────────────────── */
35
+ --motion-fade-in: var(--duration-normal) var(--ease-enter);
36
+ --motion-fade-out: var(--duration-fast) var(--ease-exit);
37
+ --motion-slide-in: var(--duration-moderate) var(--ease-enter);
38
+ --motion-slide-out: var(--duration-fast) var(--ease-exit);
39
+ --motion-micro: var(--duration-fast) var(--ease-move);
40
+ --motion-interactive: var(--duration-normal) var(--ease-move);
41
+
42
+ /* ── Reduced motion ───────────────────────────────────────────────────── */
43
+ /* Components use these via @media (prefers-reduced-motion: reduce) */
44
+ --duration-reduced: 0ms;
45
+
46
+ }
47
+ }
package/dist/primitives.css ADDED
@@ -0,0 +1,158 @@
1
+ /* ─── haus / primitives ──────────────────────────────────────────────────────
2
+ Raw values only. No component or semantic meaning.
3
+ Nothing outside this file should define raw values.
4
+ Components must never reference these directly — use semantics.css.
5
+ ─────────────────────────────────────────────────────────────────────────── */
6
+
7
+ @layer haus.primitives {
8
+
9
+ :root {
10
+
11
+ /* ── Aronia (Dusty Purple) ── H=300° ────────────────────────────────────── */
12
+ --aronia-100: oklch(97% 0.012 300);
13
+ --aronia-200: oklch(92% 0.028 300);
14
+ --aronia-300: oklch(84% 0.058 300);
15
+ --aronia-400: oklch(72% 0.100 300);
16
+ --aronia-500: oklch(52% 0.138 300); /* dusty plum anchor */
17
+ --aronia-600: oklch(43% 0.125 300);
18
+ --aronia-700: oklch(35% 0.105 300);
19
+ --aronia-800: oklch(26% 0.080 300);
20
+ --aronia-900: oklch(18% 0.052 300);
21
+ --aronia-950: oklch(12% 0.032 300);
22
+
23
+ /* ── Damson (Cool Neutral) ── H=290°, very low chroma ──────────────────── */
24
+ /* Same hue family as Aronia — monochromatic, highly cohesive. */
25
+ --damson-0: oklch(100% 0 0);
26
+ --damson-50: oklch(99% 0.003 290); /* near-white, barely-lavender */
27
+ --damson-100: oklch(97% 0.006 290);
28
+ --damson-200: oklch(93% 0.008 290);
29
+ --damson-300: oklch(86% 0.010 290);
30
+ --damson-400: oklch(74% 0.010 290);
31
+ --damson-500: oklch(60% 0.008 290);
32
+ --damson-600: oklch(48% 0.007 290);
33
+ --damson-700: oklch(37% 0.006 290);
34
+ --damson-800: oklch(27% 0.005 290);
35
+ --damson-900: oklch(18% 0.003 290);
36
+ --damson-950: oklch(11% 0.002 290);
37
+
38
+ /* ── Elderberry (Indigo) ── H=265°, distinct from Aronia H=300° ─────────── */
39
+ --elderberry-100: oklch(97% 0.020 265);
40
+ --elderberry-200: oklch(93% 0.040 265);
41
+ --elderberry-400: oklch(74% 0.160 265);
42
+ --elderberry-500: oklch(55% 0.200 265);
43
+ --elderberry-700: oklch(42% 0.160 265);
44
+ --elderberry-900: oklch(30% 0.120 265);
45
+
46
+ /* ── Greengage (Green) ── H=148° ────────────────────────────────────────── */
47
+ --greengage-100: oklch(97% 0.030 148);
48
+ --greengage-200: oklch(93% 0.055 148);
49
+ --greengage-400: oklch(75% 0.150 148);
50
+ --greengage-500: oklch(58% 0.185 148);
51
+ --greengage-700: oklch(45% 0.150 148);
52
+ --greengage-900: oklch(33% 0.110 148);
53
+
54
+ /* ── Mango (Golden) ── H=65° ─────────────────────────────────────────────── */
55
+ --mango-100: oklch(97% 0.025 65);
56
+ --mango-200: oklch(93% 0.045 65);
57
+ --mango-400: oklch(76% 0.145 65);
58
+ --mango-500: oklch(60% 0.175 65);
59
+ --mango-700: oklch(47% 0.142 65);
60
+ --mango-900: oklch(38% 0.110 65);
61
+
62
+ /* ── Cherry (Red) ── H=27° ───────────────────────────────────────────────── */
63
+ --cherry-100: oklch(97% 0.030 27);
64
+ --cherry-200: oklch(93% 0.055 27);
65
+ --cherry-400: oklch(74% 0.160 27);
66
+ --cherry-500: oklch(58% 0.200 27);
67
+ --cherry-700: oklch(44% 0.168 27);
68
+ --cherry-900: oklch(33% 0.110 27);
69
+
70
+ /* ── Type scale ───────────────────────────────────────────────────────────── */
71
+ --font-sans: 'Manrope', system-ui, sans-serif;
72
+ --font-mono: 'Fira Code', ui-monospace, monospace;
73
+
74
+ --text-11: 0.6875rem; /* 11px */
75
+ --text-12: 0.75rem; /* 12px */
76
+ --text-13: 0.8125rem; /* 13px */
77
+ --text-14: 0.875rem; /* 14px */
78
+ --text-16: 1rem; /* 16px */
79
+ --text-20: 1.25rem; /* 20px */
80
+ --text-24: 1.5rem; /* 24px */
81
+ --text-30: 1.875rem; /* 30px */
82
+
83
+ --weight-regular: 400;
84
+ --weight-medium: 500;
85
+ --weight-semibold: 600;
86
+ --weight-bold: 700;
87
+
88
+ --leading-tight: 1.15;
89
+ --leading-tighter: 1.2;
90
+ --leading-snug: 1.25;
91
+ --leading-compact: 1.3;
92
+ --leading-normal: 1.4;
93
+ --leading-relaxed: 1.5;
94
+ --leading-loose: 1.6;
95
+
96
+ --tracking-tight: -0.01em;
97
+ --tracking-normal: 0em;
98
+ --tracking-wide: 0.02em;
99
+ --tracking-widest: 0.08em;
100
+
101
+ /* ── Spacing scale (4px base) ────────────────────────────────────────────── */
102
+ --space-1: 0.25rem; /* 4px */
103
+ --space-2: 0.5rem; /* 8px */
104
+ --space-3: 0.75rem; /* 12px */
105
+ --space-4: 1rem; /* 16px */
106
+ --space-5: 1.25rem; /* 20px */
107
+ --space-6: 1.5rem; /* 24px */
108
+ --space-7: 1.75rem; /* 28px */
109
+ --space-8: 2rem; /* 32px */
110
+ --space-10: 2.5rem; /* 40px */
111
+ --space-12: 3rem; /* 48px */
112
+ --space-16: 4rem; /* 64px */
113
+ --space-20: 5rem; /* 80px */
114
+
115
+ /* ── Radius ───────────────────────────────────────────────────────────────── */
116
+ --radius-none: 0;
117
+ --radius-sm: 0.25rem;
118
+ --radius-md: 0.5rem;
119
+ --radius-lg: 0.75rem;
120
+ --radius-xl: 1rem;
121
+ --radius-2xl: 1.5rem;
122
+ --radius-full: 9999px;
123
+
124
+ /* ── Shadows — tinted with damson H=290° ─────────────────────────────────── */
125
+ --shadow-none: none;
126
+ --shadow-sm: 0 1px 2px oklch(18% 0.003 290 / 0.06);
127
+ --shadow-md: 0 4px 6px -1px oklch(18% 0.003 290 / 0.10), 0 2px 4px -2px oklch(18% 0.003 290 / 0.10);
128
+ --shadow-lg: 0 10px 15px -3px oklch(18% 0.003 290 / 0.10), 0 4px 6px -4px oklch(18% 0.003 290 / 0.07);
129
+ --shadow-xl: 0 20px 25px -5px oklch(18% 0.003 290 / 0.10), 0 8px 10px -6px oklch(18% 0.003 290 / 0.10);
130
+ /* --shadow-focus is in semantics.css — references semantic colour tokens */
131
+
132
+ /* ── Z-index ──────────────────────────────────────────────────────────────── */
133
+ --z-base: 0;
134
+ --z-raised: 10;
135
+ --z-dropdown: 100;
136
+ --z-sticky: 200;
137
+ --z-overlay: 300;
138
+ --z-modal: 400;
139
+ --z-toast: 500;
140
+ --z-tooltip: 600;
141
+
142
+ /* ── Border width ─────────────────────────────────────────────────────────── */
143
+ --border-width-default: 1px;
144
+ --border-width-thick: 2px;
145
+
146
+ /* ── Opacity ──────────────────────────────────────────────────────────────── */
147
+ --opacity-disabled: 0.4;
148
+ --opacity-overlay: 0.6;
149
+
150
+ /* ── Icon sizes (Font Awesome — pairs with type scale) ────────────────────── */
151
+ --icon-xs: 0.75rem; /* 12px — label-xs */
152
+ --icon-sm: 1rem; /* 16px — label, body-sm */
153
+ --icon-md: 1.25rem; /* 20px — body-lg, heading-sm */
154
+ --icon-lg: 1.5rem; /* 24px — heading */
155
+ --icon-xl: 2rem; /* 32px — standalone / decorative */
156
+
157
+ }
158
+ }
package/dist/semantics.css ADDED
@@ -0,0 +1,162 @@
1
+ /* ─── haus / semantics ───────────────────────────────────────────────────────
2
+ Intent aliases. Light mode only.
3
+ No component references a primitive directly.
4
+ No raw values live in this file.
5
+
6
+ Naming rules:
7
+ · Brand colour uses a role name at this layer: primary (aronia).
8
+ Palette names only appear in primitives.css.
9
+ · Every surface token has a paired on-* text token.
10
+ · Every interactive scale has a disabled state.
11
+ ─────────────────────────────────────────────────────────────────────────── */
12
+
13
+ @layer haus.semantics {
14
+
15
+ :root {
16
+ color-scheme: light;
17
+ }
18
+
19
+ :root {
20
+
21
+ /* ── Surface ──────────────────────────────────────────────────────────── */
22
+ --color-surface-default: var(--damson-0);
23
+ --color-surface-subtle: var(--damson-100);
24
+ --color-surface-raised: var(--damson-0); /* elevation via shadow, not colour */
25
+ --color-surface-overlay: var(--damson-50); /* modal / popover — barely off-white */
26
+ --color-surface-sunken: var(--damson-200);
27
+ --color-surface-inverse: var(--damson-900); /* dark chip, tooltip bg in light mode */
28
+ --color-surface-disabled: var(--damson-100);
29
+
30
+ /* ── Ink (text) ───────────────────────────────────────────────────────── */
31
+ --color-ink-primary: var(--damson-900);
32
+ --color-ink-secondary: var(--damson-700);
33
+ --color-ink-tertiary: var(--damson-500);
34
+ --color-ink-disabled: var(--damson-400);
35
+ --color-ink-inverse: var(--damson-0);
36
+ --color-ink-link: var(--aronia-500);
37
+ --color-ink-on-aronia: var(--damson-0);
38
+
39
+ /* ── Border ───────────────────────────────────────────────────────────── */
40
+ --color-border-subtle: var(--damson-100);
41
+ --color-border-default: var(--damson-200);
42
+ --color-border-strong: var(--damson-300);
43
+ --color-border-focus: var(--color-primary-default);
44
+ --color-border-disabled: var(--damson-200);
45
+
46
+ /* ── Primary — Aronia ─────────────────────────────────────────────────── */
47
+ --color-primary-default: var(--aronia-500);
48
+ --color-primary-hover: var(--aronia-600);
49
+ --color-primary-pressed: var(--aronia-700);
50
+ --color-primary-subtle: var(--aronia-100);
51
+ --color-primary-on-subtle: var(--aronia-700);
52
+ --color-primary-disabled: var(--damson-200);
53
+
54
+ /* ── Feedback — Info (Elderberry · Indigo) ────────────────────────────── */
55
+ --color-info-subtle: var(--elderberry-100);
56
+ --color-info-border: var(--elderberry-200);
57
+ --color-info-default: var(--elderberry-500);
58
+ --color-info-on-subtle: var(--elderberry-700);
59
+ --color-info-on-default: var(--damson-0);
60
+ --color-info-emphasis: var(--elderberry-900);
61
+
62
+ /* ── Feedback — Success (Greengage · Green) ───────────────────────────── */
63
+ --color-success-subtle: var(--greengage-100);
64
+ --color-success-border: var(--greengage-200);
65
+ --color-success-default: var(--greengage-500);
66
+ --color-success-on-subtle: var(--greengage-700);
67
+ --color-success-on-default: var(--damson-900); /* dark text — greengage-500 fails with white */
68
+ --color-success-solid: var(--greengage-700); /* 700-level: white text passes at 6.82:1 */
69
+ --color-success-emphasis: var(--greengage-900);
70
+
71
+ /* ── Feedback — Warning (Mango · Golden) ──────────────────────────────── */
72
+ --color-warning-subtle: var(--mango-100);
73
+ --color-warning-border: var(--mango-200);
74
+ --color-warning-default: var(--mango-500);
75
+ --color-warning-on-subtle: var(--mango-700);
76
+ --color-warning-on-default: var(--damson-900); /* dark text — mango-500 fails with white */
77
+ --color-warning-solid: var(--mango-700); /* 700-level: white text passes at 7.05:1 */
78
+ --color-warning-emphasis: var(--mango-900);
79
+
80
+ /* ── Feedback — Error (Cherry · Red) ─────────────────────────────────── */
81
+ --color-error-subtle: var(--cherry-100);
82
+ --color-error-border: var(--cherry-200);
83
+ --color-error-default: var(--cherry-500);
84
+ --color-error-on-subtle: var(--cherry-700);
85
+ --color-error-on-default: var(--damson-0);
86
+ --color-error-emphasis: var(--cherry-900);
87
+
88
+ /* ── Backdrop (Modal, Drawer, etc.) ──────────────────────────────────── */
89
+ /* Relative colour syntax: damson-950's l/c/h at --opacity-overlay alpha */
90
+ --color-backdrop: oklch(from var(--damson-950) l c h / var(--opacity-overlay));
91
+
92
+ /* ── Inverse surface interactions (UI placed on dark/inverted surfaces) ── */
93
+ /* Relative colour syntax: white (damson-0) at three opacity levels. */
94
+ /* Opacity fractions here are interaction-layer values, not raw colours. */
95
+ --color-border-inverse: oklch(from var(--damson-0) l c h / 0.30);
96
+ --color-border-inverse-hover: oklch(from var(--damson-0) l c h / 0.50);
97
+ --color-surface-inverse-hover: oklch(from var(--damson-0) l c h / 0.10);
98
+
99
+ /* ── Focus ring ───────────────────────────────────────────────────────── */
100
+ /* Inner ring matches surface (creates gap), outer ring is focus colour */
101
+ --shadow-focus: 0 0 0 2px var(--color-surface-default), 0 0 0 4px var(--color-border-focus);
102
+
103
+ /* ── Typography roles ─────────────────────────────────────────────────── */
104
+ /* Use all four props together. Components must not mix roles. */
105
+
106
+ --type-label-xs-size: var(--text-11);
107
+ --type-label-xs-weight: var(--weight-medium);
108
+ --type-label-xs-leading: var(--leading-normal);
109
+ --type-label-xs-tracking: var(--tracking-widest);
110
+
111
+ --type-label-sm-size: var(--text-12);
112
+ --type-label-sm-weight: var(--weight-medium);
113
+ --type-label-sm-leading: var(--leading-normal);
114
+ --type-label-sm-tracking: var(--tracking-wide);
115
+
116
+ --type-label-size: var(--text-13);
117
+ --type-label-weight: var(--weight-medium);
118
+ --type-label-leading: var(--leading-normal);
119
+ --type-label-tracking: var(--tracking-normal);
120
+
121
+ --type-body-sm-size: var(--text-13);
122
+ --type-body-sm-weight: var(--weight-regular);
123
+ --type-body-sm-leading: var(--leading-relaxed);
124
+ --type-body-sm-tracking: var(--tracking-normal);
125
+
126
+ --type-body-size: var(--text-14);
127
+ --type-body-weight: var(--weight-regular);
128
+ --type-body-leading: var(--leading-relaxed);
129
+ --type-body-tracking: var(--tracking-normal);
130
+
131
+ --type-body-lg-size: var(--text-16);
132
+ --type-body-lg-weight: var(--weight-regular);
133
+ --type-body-lg-leading: var(--leading-loose);
134
+ --type-body-lg-tracking: var(--tracking-normal);
135
+
136
+ --type-heading-sm-size: var(--text-16);
137
+ --type-heading-sm-weight: var(--weight-semibold);
138
+ --type-heading-sm-leading: var(--leading-compact);
139
+ --type-heading-sm-tracking: var(--tracking-tight);
140
+
141
+ --type-heading-size: var(--text-20);
142
+ --type-heading-weight: var(--weight-semibold);
143
+ --type-heading-leading: var(--leading-snug);
144
+ --type-heading-tracking: var(--tracking-tight);
145
+
146
+ --type-heading-lg-size: var(--text-24);
147
+ --type-heading-lg-weight: var(--weight-semibold);
148
+ --type-heading-lg-leading: var(--leading-tighter);
149
+ --type-heading-lg-tracking: var(--tracking-tight);
150
+
151
+ --type-display-size: var(--text-30);
152
+ --type-display-weight: var(--weight-bold);
153
+ --type-display-leading: var(--leading-tight);
154
+ --type-display-tracking: var(--tracking-tight);
155
+
156
+ --type-mono-size: var(--text-13);
157
+ --type-mono-weight: var(--weight-regular);
158
+ --type-mono-leading: var(--leading-loose);
159
+ --type-mono-tracking: var(--tracking-normal);
160
+
161
+ }
162
+ }
package/dist/tokens.json ADDED
@@ -0,0 +1,269 @@
1
+ {
2
+ "$schema": "https://tr.designtokens.org/format/",
3
+ "color": {
4
+ "$type": "color",
5
+ "aronia": {
6
+ "100": { "$value": "oklch(97% 0.012 300)", "$description": "Subtle background" },
7
+ "200": { "$value": "oklch(92% 0.028 300)" },
8
+ "300": { "$value": "oklch(84% 0.058 300)" },
9
+ "400": { "$value": "oklch(72% 0.100 300)" },
10
+ "500": { "$value": "oklch(52% 0.138 300)", "$description": "Default — dusty plum anchor" },
11
+ "600": { "$value": "oklch(43% 0.125 300)", "$description": "Hover" },
12
+ "700": { "$value": "oklch(35% 0.105 300)", "$description": "Pressed / on-subtle text" },
13
+ "800": { "$value": "oklch(26% 0.080 300)" },
14
+ "900": { "$value": "oklch(18% 0.052 300)" },
15
+ "950": { "$value": "oklch(12% 0.032 300)" }
16
+ },
17
+ "damson": {
18
+ "0": { "$value": "oklch(100% 0 0)", "$description": "White" },
19
+ "50": { "$value": "oklch(99% 0.003 290)", "$description": "Near-white — barely-lavender cool cream" },
20
+ "100": { "$value": "oklch(97% 0.006 290)", "$description": "Subtle surface — cool cream" },
21
+ "200": { "$value": "oklch(93% 0.008 290)", "$description": "Sunken surface / default border" },
22
+ "300": { "$value": "oklch(86% 0.010 290)", "$description": "Strong border" },
23
+ "400": { "$value": "oklch(74% 0.010 290)", "$description": "Disabled / muted" },
24
+ "500": { "$value": "oklch(60% 0.008 290)", "$description": "Placeholder text" },
25
+ "600": { "$value": "oklch(48% 0.007 290)", "$description": "Tertiary text" },
26
+ "700": { "$value": "oklch(37% 0.006 290)", "$description": "Secondary text" },
27
+ "800": { "$value": "oklch(27% 0.005 290)" },
28
+ "900": { "$value": "oklch(18% 0.003 290)", "$description": "Primary text / near-black" },
29
+ "950": { "$value": "oklch(11% 0.002 290)", "$description": "Near-black" }
30
+ },
31
+ "elderberry": {
32
+ "$description": "Indigo — H=265°, distinct from aronia H=300°",
33
+ "100": { "$value": "oklch(97% 0.020 265)", "$description": "Subtle background" },
34
+ "200": { "$value": "oklch(93% 0.040 265)", "$description": "Subtle border" },
35
+ "400": { "$value": "oklch(74% 0.160 265)", "$description": "Icon on subtle background" },
36
+ "500": { "$value": "oklch(55% 0.200 265)", "$description": "Default" },
37
+ "700": { "$value": "oklch(42% 0.160 265)", "$description": "Text on subtle background" },
38
+ "900": { "$value": "oklch(30% 0.120 265)", "$description": "Emphasis / high-contrast text" }
39
+ },
40
+ "greengage": {
41
+ "$description": "Green — H=148°",
42
+ "100": { "$value": "oklch(97% 0.030 148)", "$description": "Subtle background" },
43
+ "200": { "$value": "oklch(93% 0.055 148)", "$description": "Subtle border" },
44
+ "400": { "$value": "oklch(75% 0.150 148)", "$description": "Icon on subtle background" },
45
+ "500": { "$value": "oklch(58% 0.185 148)", "$description": "Default" },
46
+ "700": { "$value": "oklch(45% 0.150 148)", "$description": "Text on subtle background" },
47
+ "900": { "$value": "oklch(33% 0.110 148)", "$description": "Emphasis / high-contrast text" }
48
+ },
49
+ "mango": {
50
+ "$description": "Golden — H=65°",
51
+ "100": { "$value": "oklch(97% 0.025 65)", "$description": "Subtle background" },
52
+ "200": { "$value": "oklch(93% 0.045 65)", "$description": "Subtle border" },
53
+ "400": { "$value": "oklch(76% 0.145 65)", "$description": "Icon on subtle background" },
54
+ "500": { "$value": "oklch(60% 0.175 65)", "$description": "Default" },
55
+ "700": { "$value": "oklch(47% 0.142 65)", "$description": "Text on subtle background" },
56
+ "900": { "$value": "oklch(38% 0.110 65)", "$description": "Emphasis / high-contrast text" }
57
+ },
58
+ "cherry": {
59
+ "$description": "Red — H=27°",
60
+ "100": { "$value": "oklch(97% 0.030 27)", "$description": "Subtle background" },
61
+ "200": { "$value": "oklch(93% 0.055 27)", "$description": "Subtle border" },
62
+ "400": { "$value": "oklch(74% 0.160 27)", "$description": "Icon on subtle background" },
63
+ "500": { "$value": "oklch(58% 0.200 27)", "$description": "Default" },
64
+ "700": { "$value": "oklch(44% 0.168 27)", "$description": "Text on subtle background" },
65
+ "900": { "$value": "oklch(33% 0.110 27)", "$description": "Emphasis / high-contrast text" }
66
+ }
67
+ },
68
+ "font": {
69
+ "family": {
70
+ "sans": { "$type": "fontFamily", "$value": ["Manrope", "system-ui", "sans-serif"] },
71
+ "mono": { "$type": "fontFamily", "$value": ["Fira Code", "ui-monospace", "monospace"] }
72
+ },
73
+ "size": {
74
+ "11": { "$type": "dimension", "$value": "0.6875rem" },
75
+ "12": { "$type": "dimension", "$value": "0.75rem" },
76
+ "13": { "$type": "dimension", "$value": "0.8125rem" },
77
+ "14": { "$type": "dimension", "$value": "0.875rem" },
78
+ "16": { "$type": "dimension", "$value": "1rem" },
79
+ "20": { "$type": "dimension", "$value": "1.25rem" },
80
+ "24": { "$type": "dimension", "$value": "1.5rem" },
81
+ "30": { "$type": "dimension", "$value": "1.875rem" }
82
+ },
83
+ "weight": {
84
+ "regular": { "$type": "number", "$value": 400 },
85
+ "medium": { "$type": "number", "$value": 500 },
86
+ "semibold": { "$type": "number", "$value": 600 },
87
+ "bold": { "$type": "number", "$value": 700 }
88
+ },
89
+ "lineHeight": {
90
+ "tight": { "$type": "number", "$value": 1.15, "$description": "Display" },
91
+ "tighter": { "$type": "number", "$value": 1.2, "$description": "heading-lg" },
92
+ "snug": { "$type": "number", "$value": 1.25, "$description": "Heading" },
93
+ "compact": { "$type": "number", "$value": 1.30, "$description": "Heading-sm — between snug and normal" },
94
+ "normal": { "$type": "number", "$value": 1.40, "$description": "Labels, short UI text" },
95
+ "relaxed": { "$type": "number", "$value": 1.50, "$description": "Body" },
96
+ "loose": { "$type": "number", "$value": 1.60, "$description": "Body-lg, code" }
97
+ },
98
+ "tracking": {
99
+ "tight": { "$type": "string", "$value": "-0.01em" },
100
+ "normal": { "$type": "string", "$value": "0em" },
101
+ "wide": { "$type": "string", "$value": "0.02em" },
102
+ "widest": { "$type": "string", "$value": "0.08em" }
103
+ }
104
+ },
105
+ "spacing": {
106
+ "$type": "dimension",
107
+ "1": { "$value": "0.25rem", "$description": "4px" },
108
+ "2": { "$value": "0.5rem", "$description": "8px" },
109
+ "3": { "$value": "0.75rem", "$description": "12px" },
110
+ "4": { "$value": "1rem", "$description": "16px" },
111
+ "5": { "$value": "1.25rem", "$description": "20px" },
112
+ "6": { "$value": "1.5rem", "$description": "24px" },
113
+ "7": { "$value": "1.75rem", "$description": "28px" },
114
+ "8": { "$value": "2rem", "$description": "32px" },
115
+ "10": { "$value": "2.5rem", "$description": "40px" },
116
+ "12": { "$value": "3rem", "$description": "48px" },
117
+ "16": { "$value": "4rem", "$description": "64px" },
118
+ "20": { "$value": "5rem", "$description": "80px" }
119
+ },
120
+ "semantic": {
121
+ "$description": "Intent aliases over primitives. Components reference these only — never primitives directly.",
122
+ "color": {
123
+ "$type": "color",
124
+ "surface-default": { "$value": "{color.damson.0}", "$description": "Page / default surface" },
125
+ "surface-subtle": { "$value": "{color.damson.100}", "$description": "Subtle container, hover bg" },
126
+ "surface-raised": { "$value": "{color.damson.0}", "$description": "Card surface — elevation via shadow" },
127
+ "surface-overlay": { "$value": "{color.damson.50}", "$description": "Modal / popover background" },
128
+ "surface-sunken": { "$value": "{color.damson.200}", "$description": "Inset / well surface" },
129
+ "surface-inverse": { "$value": "{color.damson.900}", "$description": "Dark chip, inverse surface" },
130
+ "surface-disabled": { "$value": "{color.damson.100}", "$description": "Disabled input / control" },
131
+
132
+ "ink-primary": { "$value": "{color.damson.900}", "$description": "Primary text" },
133
+ "ink-secondary": { "$value": "{color.damson.700}", "$description": "Secondary / supporting text" },
134
+ "ink-tertiary": { "$value": "{color.damson.500}", "$description": "Placeholder, hint text" },
135
+ "ink-disabled": { "$value": "{color.damson.400}", "$description": "Disabled text" },
136
+ "ink-inverse": { "$value": "{color.damson.0}", "$description": "Text on dark surfaces" },
137
+ "ink-link": { "$value": "{color.aronia.500}", "$description": "Anchor link colour" },
138
+ "ink-on-aronia": { "$value": "{color.damson.0}", "$description": "Text on primary-filled surfaces" },
139
+
140
+ "border-subtle": { "$value": "{color.damson.100}", "$description": "Faintest border — section dividers" },
141
+ "border-default": { "$value": "{color.damson.200}", "$description": "Standard border" },
142
+ "border-strong": { "$value": "{color.damson.300}", "$description": "Emphasis border" },
143
+ "border-focus": { "$value": "{color.aronia.500}", "$description": "Keyboard focus ring colour" },
144
+ "border-disabled": { "$value": "{color.damson.200}", "$description": "Disabled control border" },
145
+
146
+ "primary-default": { "$value": "{color.aronia.500}", "$description": "Primary interactive" },
147
+ "primary-hover": { "$value": "{color.aronia.600}" },
148
+ "primary-pressed": { "$value": "{color.aronia.700}" },
149
+ "primary-subtle": { "$value": "{color.aronia.100}", "$description": "Tinted primary surface" },
150
+ "primary-on-subtle": { "$value": "{color.aronia.700}", "$description": "Text on primary-subtle" },
151
+ "primary-disabled": { "$value": "{color.damson.200}" },
152
+
153
+ "info-subtle": { "$value": "{color.elderberry.100}" },
154
+ "info-border": { "$value": "{color.elderberry.200}" },
155
+ "info-default": { "$value": "{color.elderberry.500}" },
156
+ "info-on-subtle": { "$value": "{color.elderberry.700}" },
157
+ "info-on-default": { "$value": "{color.damson.0}" },
158
+ "info-emphasis": { "$value": "{color.elderberry.900}" },
159
+
160
+ "success-subtle": { "$value": "{color.greengage.100}" },
161
+ "success-border": { "$value": "{color.greengage.200}" },
162
+ "success-default": { "$value": "{color.greengage.500}" },
163
+ "success-on-subtle": { "$value": "{color.greengage.700}" },
164
+ "success-on-default": { "$value": "{color.damson.900}", "$description": "Dark text — greengage-500 fails with white" },
165
+ "success-solid": { "$value": "{color.greengage.700}", "$description": "Solid badge bg — white text passes at 6.82:1" },
166
+ "success-emphasis": { "$value": "{color.greengage.900}" },
167
+
168
+ "warning-subtle": { "$value": "{color.mango.100}" },
169
+ "warning-border": { "$value": "{color.mango.200}" },
170
+ "warning-default": { "$value": "{color.mango.500}" },
171
+ "warning-on-subtle": { "$value": "{color.mango.700}" },
172
+ "warning-on-default": { "$value": "{color.damson.900}", "$description": "Dark text — mango-500 fails with white" },
173
+ "warning-solid": { "$value": "{color.mango.700}", "$description": "Solid badge bg — white text passes at 7.05:1" },
174
+ "warning-emphasis": { "$value": "{color.mango.900}" },
175
+
176
+ "error-subtle": { "$value": "{color.cherry.100}" },
177
+ "error-border": { "$value": "{color.cherry.200}" },
178
+ "error-default": { "$value": "{color.cherry.500}" },
179
+ "error-on-subtle": { "$value": "{color.cherry.700}" },
180
+ "error-on-default": { "$value": "{color.damson.0}" },
181
+ "error-emphasis": { "$value": "{color.cherry.900}" },
182
+
183
+ "backdrop": { "$value": "{color.damson.950}", "$description": "Modal scrim — applied at --opacity-overlay (0.6) in CSS" },
184
+ "border-inverse": { "$value": "{color.damson.0}", "$description": "Button border on dark surface — 30% alpha applied in CSS" },
185
+ "border-inverse-hover": { "$value": "{color.damson.0}", "$description": "Hover border on dark surface — 50% alpha applied in CSS" },
186
+ "surface-inverse-hover": { "$value": "{color.damson.0}", "$description": "Hover bg on dark surface — 10% alpha applied in CSS" }
187
+ }
188
+ },
189
+ "radius": {
190
+ "$type": "dimension",
191
+ "none": { "$value": "0" },
192
+ "sm": { "$value": "0.25rem" },
193
+ "md": { "$value": "0.5rem" },
194
+ "lg": { "$value": "0.75rem" },
195
+ "xl": { "$value": "1rem" },
196
+ "2xl": { "$value": "1.5rem", "$description": "Panels, dialogs, sheets" },
197
+ "full": { "$value": "9999px" }
198
+ },
199
+ "duration": {
200
+ "$type": "duration",
201
+ "instant": { "$value": "50ms" },
202
+ "fast": { "$value": "100ms" },
203
+ "normal": { "$value": "200ms" },
204
+ "moderate": { "$value": "300ms" },
205
+ "slow": { "$value": "500ms" }
206
+ },
207
+ "easing": {
208
+ "enter": { "$type": "cubicBezier", "$value": [0.00, 0.00, 0.20, 1.00], "$description": "Elements appearing — start slow, arrive with energy" },
209
+ "exit": { "$type": "cubicBezier", "$value": [0.40, 0.00, 1.00, 1.00], "$description": "Elements leaving — leave quickly, no lingering" },
210
+ "move": { "$type": "cubicBezier", "$value": [0.40, 0.00, 0.20, 1.00], "$description": "Position changes — balanced, physical" },
211
+ "spring": { "$type": "cubicBezier", "$value": [0.34, 1.56, 0.64, 1.00], "$description": "Slight overshoot for interactive feedback" },
212
+ "linear": { "$type": "string", "$value": "linear", "$description": "For opacity fades where easing adds no value" }
213
+ },
214
+ "motion": {
215
+ "$description": "Composite duration + easing pairs for common patterns.",
216
+ "fade-in": { "$type": "string", "$value": "{duration.normal} {easing.enter}" },
217
+ "fade-out": { "$type": "string", "$value": "{duration.fast} {easing.exit}" },
218
+ "slide-in": { "$type": "string", "$value": "{duration.moderate} {easing.enter}" },
219
+ "slide-out": { "$type": "string", "$value": "{duration.fast} {easing.exit}" },
220
+ "micro": { "$type": "string", "$value": "{duration.fast} {easing.move}", "$description": "Checkbox, toggle" },
221
+ "interactive":{ "$type": "string", "$value": "{duration.normal} {easing.move}", "$description": "Hover, focus" }
222
+ },
223
+ "shadow": {
224
+ "none": { "$type": "string", "$value": "none" },
225
+ "sm": { "$type": "string", "$value": "0 1px 2px oklch(18% 0.003 290 / 0.06)", "$description": "Subtle card lift, form inputs" },
226
+ "md": { "$type": "string", "$value": "0 4px 6px -1px oklch(18% 0.003 290 / 0.10), 0 2px 4px -2px oklch(18% 0.003 290 / 0.10)", "$description": "Dropdowns, select menus" },
227
+ "lg": { "$type": "string", "$value": "0 10px 15px -3px oklch(18% 0.003 290 / 0.10), 0 4px 6px -4px oklch(18% 0.003 290 / 0.07)", "$description": "Modals, dialogs" },
228
+ "xl": { "$type": "string", "$value": "0 20px 25px -5px oklch(18% 0.003 290 / 0.10), 0 8px 10px -6px oklch(18% 0.003 290 / 0.10)", "$description": "Full-page overlays" },
229
+ "focus": { "$type": "string", "$value": "0 0 0 2px {color.surface-default}, 0 0 0 4px {color.primary-default}", "$description": "Keyboard focus ring — defined in semantics layer" }
230
+ },
231
+ "zIndex": {
232
+ "$type": "number",
233
+ "base": { "$value": 0, "$description": "Default page flow" },
234
+ "raised": { "$value": 10, "$description": "Inline elevated elements" },
235
+ "dropdown": { "$value": 100, "$description": "Menus, selects, popovers" },
236
+ "sticky": { "$value": 200, "$description": "Sticky headers, fixed toolbars" },
237
+ "overlay": { "$value": 300, "$description": "Sheet backgrounds, scrim" },
238
+ "modal": { "$value": 400, "$description": "Dialogs, modals" },
239
+ "toast": { "$value": 500, "$description": "Toast notifications" },
240
+ "tooltip": { "$value": 600, "$description": "Tooltips — always on top" }
241
+ },
242
+ "borderWidth": {
243
+ "$type": "dimension",
244
+ "default": { "$value": "1px", "$description": "Borders, dividers, inputs" },
245
+ "thick": { "$value": "2px", "$description": "Focus rings, active emphasis" }
246
+ },
247
+ "opacity": {
248
+ "$type": "number",
249
+ "disabled": { "$value": 0.4, "$description": "Disabled elements" },
250
+ "overlay": { "$value": 0.6, "$description": "Scrim / backdrop" }
251
+ },
252
+ "iconSize": {
253
+ "$type": "dimension",
254
+ "$description": "Font Awesome. Sizes pair with the type scale.",
255
+ "xs": { "$value": "0.75rem", "$description": "12px — with label-xs" },
256
+ "sm": { "$value": "1rem", "$description": "16px — with label, body-sm" },
257
+ "md": { "$value": "1.25rem", "$description": "20px — with body-lg, heading-sm" },
258
+ "lg": { "$value": "1.5rem", "$description": "24px — with heading" },
259
+ "xl": { "$value": "2rem", "$description": "32px — standalone / decorative" }
260
+ },
261
+ "breakpoint": {
262
+ "$description": "CSS custom properties cannot be used in @media queries. Consume from index.ts in JS/TS and Tailwind config instead.",
263
+ "sm": { "$type": "dimension", "$value": "640px", "$description": "Large phones, small tablets" },
264
+ "md": { "$type": "dimension", "$value": "768px", "$description": "Tablets" },
265
+ "lg": { "$type": "dimension", "$value": "1024px", "$description": "Small laptops" },
266
+ "xl": { "$type": "dimension", "$value": "1280px", "$description": "Desktops" },
267
+ "2xl": { "$type": "dimension", "$value": "1536px", "$description": "Large screens" }
268
+ }
269
+ }
package/package.json ADDED
@@ -0,0 +1,54 @@
1
+ {
2
+ "name": "haus-tokens",
3
+ "version": "0.1.0",
4
+ "description": "haus design tokens — OKLCH colour, type, spacing, radius, shadow and motion, as W3C-DTCG JSON, CSS custom properties, and typed JS constants.",
5
+ "license": "MIT",
6
+ "author": "hipuku",
7
+ "homepage": "https://github.com/hipuku/haus/tree/main/packages/tokens#readme",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "git+https://github.com/hipuku/haus.git",
11
+ "directory": "packages/tokens"
12
+ },
13
+ "keywords": [
14
+ "design-tokens",
15
+ "design-system",
16
+ "oklch",
17
+ "dtcg",
18
+ "w3c-design-tokens",
19
+ "css-custom-properties",
20
+ "haus"
21
+ ],
22
+ "type": "module",
23
+ "sideEffects": [
24
+ "*.css"
25
+ ],
26
+ "main": "./dist/index.js",
27
+ "module": "./dist/index.js",
28
+ "types": "./dist/index.d.ts",
29
+ "exports": {
30
+ ".": {
31
+ "types": "./dist/index.d.ts",
32
+ "import": "./dist/index.js"
33
+ },
34
+ "./primitives.css": "./dist/primitives.css",
35
+ "./semantics.css": "./dist/semantics.css",
36
+ "./motion.css": "./dist/motion.css",
37
+ "./tokens.json": "./dist/tokens.json"
38
+ },
39
+ "files": [
40
+ "dist"
41
+ ],
42
+ "scripts": {
43
+ "build": "tsup",
44
+ "test": "vitest run",
45
+ "test:watch": "vitest",
46
+ "typecheck": "tsc --noEmit",
47
+ "prepublishOnly": "npm run build && npm run test"
48
+ },
49
+ "devDependencies": {
50
+ "tsup": "^8.5.1",
51
+ "typescript": "^5.4.5",
52
+ "vitest": "^2.1.0"
53
+ }
54
+ }