@akanaka/tokens 0.3.0 → 0.4.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 (6) hide show
  1. package/dist/index.d.ts +215 -1
  2. package/dist/index.js +216 -0
  3. package/dist/index.js.map +1 -1
  4. package/dist/tokens.css +141 -0
  5. package/dist/tokens.css.map +1 -1
  6. package/package.json +2 -1
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  declare const colors: {
2
+ readonly white: "#FFFFFF";
2
3
  readonly primary: {
3
4
  readonly 50: "#FDF4F1";
4
5
  readonly 100: "#FADDD5";
@@ -12,7 +13,9 @@ declare const colors: {
12
13
  readonly 100: "#F5F5F4";
13
14
  readonly 200: "#E7E5E4";
14
15
  readonly 300: "#D6D3D1";
16
+ readonly 400: "#A8A29E";
15
17
  readonly 500: "#78716C";
18
+ readonly 600: "#57534E";
16
19
  readonly 700: "#44403C";
17
20
  readonly 900: "#1C1917";
18
21
  };
@@ -22,6 +25,38 @@ declare const colors: {
22
25
  readonly error: "#EF4444";
23
26
  readonly info: "#3B82F6";
24
27
  };
28
+ readonly green: {
29
+ readonly 50: "#F0FDF4";
30
+ readonly 100: "#DCFCE7";
31
+ readonly 200: "#BBF7D0";
32
+ readonly 500: "#22C55E";
33
+ readonly 600: "#16A34A";
34
+ readonly 700: "#15803D";
35
+ };
36
+ readonly amber: {
37
+ readonly 50: "#FFFBEB";
38
+ readonly 100: "#FEF3C7";
39
+ readonly 200: "#FDE68A";
40
+ readonly 500: "#F59E0B";
41
+ readonly 600: "#D97706";
42
+ readonly 700: "#B45309";
43
+ };
44
+ readonly red: {
45
+ readonly 50: "#FEF2F2";
46
+ readonly 100: "#FEE2E2";
47
+ readonly 200: "#FECACA";
48
+ readonly 500: "#EF4444";
49
+ readonly 600: "#DC2626";
50
+ readonly 700: "#B91C1C";
51
+ };
52
+ readonly blue: {
53
+ readonly 50: "#EFF6FF";
54
+ readonly 100: "#DBEAFE";
55
+ readonly 200: "#BFDBFE";
56
+ readonly 500: "#3B82F6";
57
+ readonly 600: "#2563EB";
58
+ readonly 700: "#1D4ED8";
59
+ };
25
60
  };
26
61
  declare const typography: {
27
62
  readonly fontFamily: {
@@ -72,6 +107,95 @@ declare const transitions: {
72
107
  readonly base: "200ms ease";
73
108
  readonly slow: "300ms ease";
74
109
  };
110
+ declare const semantic: {
111
+ readonly background: {
112
+ readonly default: "#FFFFFF";
113
+ readonly page: "#FAFAF9";
114
+ readonly muted: "#F5F5F4";
115
+ readonly subtle: "#E7E5E4";
116
+ readonly elevated: "#FFFFFF";
117
+ readonly overlay: "rgba(28, 25, 23, 0.5)";
118
+ readonly primary: "#E07A5F";
119
+ readonly success: "#F0FDF4";
120
+ readonly warning: "#FFFBEB";
121
+ readonly error: "#FEF2F2";
122
+ readonly info: "#EFF6FF";
123
+ readonly nav: "#FADDD5";
124
+ readonly navHover: "#F4B8A6";
125
+ readonly navActive: "#E07A5F";
126
+ readonly primarySubtle: "#FADDD5";
127
+ };
128
+ readonly foreground: {
129
+ readonly default: "#1C1917";
130
+ readonly muted: "#78716C";
131
+ readonly subtle: "#A8A29E";
132
+ readonly primary: "#A8503A";
133
+ readonly success: "#15803D";
134
+ readonly warning: "#B45309";
135
+ readonly error: "#B91C1C";
136
+ readonly info: "#1D4ED8";
137
+ readonly onPrimary: "#FFFFFF";
138
+ readonly nav: "#44403C";
139
+ readonly navHover: "#1C1917";
140
+ readonly navActive: "#FFFFFF";
141
+ };
142
+ readonly border: {
143
+ readonly default: "#E7E5E4";
144
+ readonly muted: "#F5F5F4";
145
+ readonly strong: "#D6D3D1";
146
+ readonly primary: "#E07A5F";
147
+ readonly error: "#EF4444";
148
+ readonly success: "#BBF7D0";
149
+ readonly warning: "#FDE68A";
150
+ readonly info: "#BFDBFE";
151
+ readonly errorSubtle: "#FECACA";
152
+ };
153
+ };
154
+ declare const semanticDark: {
155
+ readonly background: {
156
+ readonly default: "#1C1917";
157
+ readonly page: "#0f0e0d";
158
+ readonly muted: "#44403C";
159
+ readonly subtle: "#78716C";
160
+ readonly elevated: "#44403C";
161
+ readonly overlay: "rgba(0, 0, 0, 0.7)";
162
+ readonly primary: "#E07A5F";
163
+ /** Tinted surfaces; see tokens.css for color-mix in runtime */
164
+ readonly primarySubtle: "#3d2a24";
165
+ readonly success: "#1a2e1f";
166
+ readonly warning: "#2e2618";
167
+ readonly error: "#2e1212";
168
+ readonly info: "#152238";
169
+ readonly nav: "#44403C";
170
+ readonly navHover: "#78716C";
171
+ readonly navActive: "#E07A5F";
172
+ };
173
+ readonly foreground: {
174
+ readonly default: "#F5F5F4";
175
+ readonly muted: "#A8A29E";
176
+ readonly subtle: "#78716C";
177
+ readonly primary: "#F4B8A6";
178
+ readonly success: "#BBF7D0";
179
+ readonly warning: "#FDE68A";
180
+ readonly error: "#FECACA";
181
+ readonly info: "#BFDBFE";
182
+ readonly onPrimary: "#FFFFFF";
183
+ readonly nav: "#D6D3D1";
184
+ readonly navHover: "#F5F5F4";
185
+ readonly navActive: "#FFFFFF";
186
+ };
187
+ readonly border: {
188
+ readonly default: "#78716C";
189
+ readonly muted: "#57534E";
190
+ readonly strong: "#A8A29E";
191
+ readonly primary: "#E07A5F";
192
+ readonly error: "#EF4444";
193
+ readonly success: "rgba(34, 197, 94, 0.5)";
194
+ readonly warning: "rgba(245, 158, 11, 0.5)";
195
+ readonly info: "rgba(59, 130, 246, 0.5)";
196
+ readonly errorSubtle: "rgba(239, 68, 68, 0.5)";
197
+ };
198
+ };
75
199
  declare const cssVars: {
76
200
  readonly colors: {
77
201
  readonly primary: {
@@ -87,7 +211,9 @@ declare const cssVars: {
87
211
  readonly 100: "var(--color-neutral-100)";
88
212
  readonly 200: "var(--color-neutral-200)";
89
213
  readonly 300: "var(--color-neutral-300)";
214
+ readonly 400: "var(--color-neutral-400)";
90
215
  readonly 500: "var(--color-neutral-500)";
216
+ readonly 600: "var(--color-neutral-600)";
91
217
  readonly 700: "var(--color-neutral-700)";
92
218
  readonly 900: "var(--color-neutral-900)";
93
219
  };
@@ -96,6 +222,94 @@ declare const cssVars: {
96
222
  readonly error: "var(--color-error)";
97
223
  readonly info: "var(--color-info)";
98
224
  };
225
+ readonly semantic: {
226
+ readonly background: {
227
+ readonly default: "var(--background-default)";
228
+ readonly page: "var(--background-page)";
229
+ readonly muted: "var(--background-muted)";
230
+ readonly subtle: "var(--background-subtle)";
231
+ readonly elevated: "var(--background-elevated)";
232
+ readonly overlay: "var(--background-overlay)";
233
+ readonly primary: "var(--background-primary)";
234
+ readonly success: "var(--background-success)";
235
+ readonly warning: "var(--background-warning)";
236
+ readonly error: "var(--background-error)";
237
+ readonly info: "var(--background-info)";
238
+ readonly nav: "var(--background-nav)";
239
+ readonly navHover: "var(--background-nav-hover)";
240
+ readonly navActive: "var(--background-nav-active)";
241
+ readonly primarySubtle: "var(--background-primary-subtle)";
242
+ };
243
+ readonly foreground: {
244
+ readonly default: "var(--foreground-default)";
245
+ readonly muted: "var(--foreground-muted)";
246
+ readonly subtle: "var(--foreground-subtle)";
247
+ readonly primary: "var(--foreground-primary)";
248
+ readonly success: "var(--foreground-success)";
249
+ readonly warning: "var(--foreground-warning)";
250
+ readonly error: "var(--foreground-error)";
251
+ readonly info: "var(--foreground-info)";
252
+ readonly onPrimary: "var(--foreground-on-primary)";
253
+ readonly nav: "var(--foreground-nav)";
254
+ readonly navHover: "var(--foreground-nav-hover)";
255
+ readonly navActive: "var(--foreground-nav-active)";
256
+ };
257
+ readonly border: {
258
+ readonly default: "var(--border-default)";
259
+ readonly muted: "var(--border-muted)";
260
+ readonly strong: "var(--border-strong)";
261
+ readonly primary: "var(--border-primary)";
262
+ readonly error: "var(--border-error)";
263
+ readonly success: "var(--border-success)";
264
+ readonly warning: "var(--border-warning)";
265
+ readonly info: "var(--border-info)";
266
+ readonly errorSubtle: "var(--border-error-subtle)";
267
+ };
268
+ };
269
+ readonly semanticDark: {
270
+ readonly background: {
271
+ readonly default: "var(--background-default)";
272
+ readonly page: "var(--background-page)";
273
+ readonly muted: "var(--background-muted)";
274
+ readonly subtle: "var(--background-subtle)";
275
+ readonly elevated: "var(--background-elevated)";
276
+ readonly overlay: "var(--background-overlay)";
277
+ readonly primary: "var(--background-primary)";
278
+ readonly success: "var(--background-success)";
279
+ readonly warning: "var(--background-warning)";
280
+ readonly error: "var(--background-error)";
281
+ readonly info: "var(--background-info)";
282
+ readonly nav: "var(--background-nav)";
283
+ readonly navHover: "var(--background-nav-hover)";
284
+ readonly navActive: "var(--background-nav-active)";
285
+ readonly primarySubtle: "var(--background-primary-subtle)";
286
+ };
287
+ readonly foreground: {
288
+ readonly default: "var(--foreground-default)";
289
+ readonly muted: "var(--foreground-muted)";
290
+ readonly subtle: "var(--foreground-subtle)";
291
+ readonly primary: "var(--foreground-primary)";
292
+ readonly success: "var(--foreground-success)";
293
+ readonly warning: "var(--foreground-warning)";
294
+ readonly error: "var(--foreground-error)";
295
+ readonly info: "var(--foreground-info)";
296
+ readonly onPrimary: "var(--foreground-on-primary)";
297
+ readonly nav: "var(--foreground-nav)";
298
+ readonly navHover: "var(--foreground-nav-hover)";
299
+ readonly navActive: "var(--foreground-nav-active)";
300
+ };
301
+ readonly border: {
302
+ readonly default: "var(--border-default)";
303
+ readonly muted: "var(--border-muted)";
304
+ readonly strong: "var(--border-strong)";
305
+ readonly primary: "var(--border-primary)";
306
+ readonly error: "var(--border-error)";
307
+ readonly success: "var(--border-success)";
308
+ readonly warning: "var(--border-warning)";
309
+ readonly info: "var(--border-info)";
310
+ readonly errorSubtle: "var(--border-error-subtle)";
311
+ };
312
+ };
99
313
  };
100
314
 
101
- export { colors, cssVars, radius, shadows, spacing, transitions, typography };
315
+ export { colors, cssVars, radius, semantic, semanticDark, shadows, spacing, transitions, typography };
package/dist/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  // src/tokens.ts
2
2
  var colors = {
3
+ white: "#FFFFFF",
3
4
  primary: {
4
5
  50: "#FDF4F1",
5
6
  100: "#FADDD5",
@@ -13,7 +14,9 @@ var colors = {
13
14
  100: "#F5F5F4",
14
15
  200: "#E7E5E4",
15
16
  300: "#D6D3D1",
17
+ 400: "#A8A29E",
16
18
  500: "#78716C",
19
+ 600: "#57534E",
17
20
  700: "#44403C",
18
21
  900: "#1C1917"
19
22
  },
@@ -22,6 +25,38 @@ var colors = {
22
25
  warning: "#F59E0B",
23
26
  error: "#EF4444",
24
27
  info: "#3B82F6"
28
+ },
29
+ green: {
30
+ 50: "#F0FDF4",
31
+ 100: "#DCFCE7",
32
+ 200: "#BBF7D0",
33
+ 500: "#22C55E",
34
+ 600: "#16A34A",
35
+ 700: "#15803D"
36
+ },
37
+ amber: {
38
+ 50: "#FFFBEB",
39
+ 100: "#FEF3C7",
40
+ 200: "#FDE68A",
41
+ 500: "#F59E0B",
42
+ 600: "#D97706",
43
+ 700: "#B45309"
44
+ },
45
+ red: {
46
+ 50: "#FEF2F2",
47
+ 100: "#FEE2E2",
48
+ 200: "#FECACA",
49
+ 500: "#EF4444",
50
+ 600: "#DC2626",
51
+ 700: "#B91C1C"
52
+ },
53
+ blue: {
54
+ 50: "#EFF6FF",
55
+ 100: "#DBEAFE",
56
+ 200: "#BFDBFE",
57
+ 500: "#3B82F6",
58
+ 600: "#2563EB",
59
+ 700: "#1D4ED8"
25
60
  }
26
61
  };
27
62
  var typography = {
@@ -73,6 +108,95 @@ var transitions = {
73
108
  base: "200ms ease",
74
109
  slow: "300ms ease"
75
110
  };
111
+ var semantic = {
112
+ background: {
113
+ default: "#FFFFFF",
114
+ page: "#FAFAF9",
115
+ muted: "#F5F5F4",
116
+ subtle: "#E7E5E4",
117
+ elevated: "#FFFFFF",
118
+ overlay: "rgba(28, 25, 23, 0.5)",
119
+ primary: "#E07A5F",
120
+ success: "#F0FDF4",
121
+ warning: "#FFFBEB",
122
+ error: "#FEF2F2",
123
+ info: "#EFF6FF",
124
+ nav: "#FADDD5",
125
+ navHover: "#F4B8A6",
126
+ navActive: "#E07A5F",
127
+ primarySubtle: "#FADDD5"
128
+ },
129
+ foreground: {
130
+ default: "#1C1917",
131
+ muted: "#78716C",
132
+ subtle: "#A8A29E",
133
+ primary: "#A8503A",
134
+ success: "#15803D",
135
+ warning: "#B45309",
136
+ error: "#B91C1C",
137
+ info: "#1D4ED8",
138
+ onPrimary: "#FFFFFF",
139
+ nav: "#44403C",
140
+ navHover: "#1C1917",
141
+ navActive: "#FFFFFF"
142
+ },
143
+ border: {
144
+ default: "#E7E5E4",
145
+ muted: "#F5F5F4",
146
+ strong: "#D6D3D1",
147
+ primary: "#E07A5F",
148
+ error: "#EF4444",
149
+ success: "#BBF7D0",
150
+ warning: "#FDE68A",
151
+ info: "#BFDBFE",
152
+ errorSubtle: "#FECACA"
153
+ }
154
+ };
155
+ var semanticDark = {
156
+ background: {
157
+ default: colors.neutral[900],
158
+ page: "#0f0e0d",
159
+ muted: colors.neutral[700],
160
+ subtle: colors.neutral[500],
161
+ elevated: colors.neutral[700],
162
+ overlay: "rgba(0, 0, 0, 0.7)",
163
+ primary: colors.primary[500],
164
+ /** Tinted surfaces; see tokens.css for color-mix in runtime */
165
+ primarySubtle: "#3d2a24",
166
+ success: "#1a2e1f",
167
+ warning: "#2e2618",
168
+ error: "#2e1212",
169
+ info: "#152238",
170
+ nav: colors.neutral[700],
171
+ navHover: colors.neutral[500],
172
+ navActive: colors.primary[500]
173
+ },
174
+ foreground: {
175
+ default: colors.neutral[100],
176
+ muted: colors.neutral[400],
177
+ subtle: colors.neutral[500],
178
+ primary: colors.primary[200],
179
+ success: colors.green[200],
180
+ warning: colors.amber[200],
181
+ error: colors.red[200],
182
+ info: colors.blue[200],
183
+ onPrimary: "#FFFFFF",
184
+ nav: colors.neutral[300],
185
+ navHover: colors.neutral[100],
186
+ navActive: colors.white
187
+ },
188
+ border: {
189
+ default: colors.neutral[500],
190
+ muted: colors.neutral[600],
191
+ strong: colors.neutral[400],
192
+ primary: colors.primary[500],
193
+ error: colors.semantic.error,
194
+ success: "rgba(34, 197, 94, 0.5)",
195
+ warning: "rgba(245, 158, 11, 0.5)",
196
+ info: "rgba(59, 130, 246, 0.5)",
197
+ errorSubtle: "rgba(239, 68, 68, 0.5)"
198
+ }
199
+ };
76
200
  var cssVars = {
77
201
  colors: {
78
202
  primary: {
@@ -88,7 +212,9 @@ var cssVars = {
88
212
  100: "var(--color-neutral-100)",
89
213
  200: "var(--color-neutral-200)",
90
214
  300: "var(--color-neutral-300)",
215
+ 400: "var(--color-neutral-400)",
91
216
  500: "var(--color-neutral-500)",
217
+ 600: "var(--color-neutral-600)",
92
218
  700: "var(--color-neutral-700)",
93
219
  900: "var(--color-neutral-900)"
94
220
  },
@@ -96,12 +222,102 @@ var cssVars = {
96
222
  warning: "var(--color-warning)",
97
223
  error: "var(--color-error)",
98
224
  info: "var(--color-info)"
225
+ },
226
+ semantic: {
227
+ background: {
228
+ default: "var(--background-default)",
229
+ page: "var(--background-page)",
230
+ muted: "var(--background-muted)",
231
+ subtle: "var(--background-subtle)",
232
+ elevated: "var(--background-elevated)",
233
+ overlay: "var(--background-overlay)",
234
+ primary: "var(--background-primary)",
235
+ success: "var(--background-success)",
236
+ warning: "var(--background-warning)",
237
+ error: "var(--background-error)",
238
+ info: "var(--background-info)",
239
+ nav: "var(--background-nav)",
240
+ navHover: "var(--background-nav-hover)",
241
+ navActive: "var(--background-nav-active)",
242
+ primarySubtle: "var(--background-primary-subtle)"
243
+ },
244
+ foreground: {
245
+ default: "var(--foreground-default)",
246
+ muted: "var(--foreground-muted)",
247
+ subtle: "var(--foreground-subtle)",
248
+ primary: "var(--foreground-primary)",
249
+ success: "var(--foreground-success)",
250
+ warning: "var(--foreground-warning)",
251
+ error: "var(--foreground-error)",
252
+ info: "var(--foreground-info)",
253
+ onPrimary: "var(--foreground-on-primary)",
254
+ nav: "var(--foreground-nav)",
255
+ navHover: "var(--foreground-nav-hover)",
256
+ navActive: "var(--foreground-nav-active)"
257
+ },
258
+ border: {
259
+ default: "var(--border-default)",
260
+ muted: "var(--border-muted)",
261
+ strong: "var(--border-strong)",
262
+ primary: "var(--border-primary)",
263
+ error: "var(--border-error)",
264
+ success: "var(--border-success)",
265
+ warning: "var(--border-warning)",
266
+ info: "var(--border-info)",
267
+ errorSubtle: "var(--border-error-subtle)"
268
+ }
269
+ },
270
+ semanticDark: {
271
+ background: {
272
+ default: "var(--background-default)",
273
+ page: "var(--background-page)",
274
+ muted: "var(--background-muted)",
275
+ subtle: "var(--background-subtle)",
276
+ elevated: "var(--background-elevated)",
277
+ overlay: "var(--background-overlay)",
278
+ primary: "var(--background-primary)",
279
+ success: "var(--background-success)",
280
+ warning: "var(--background-warning)",
281
+ error: "var(--background-error)",
282
+ info: "var(--background-info)",
283
+ nav: "var(--background-nav)",
284
+ navHover: "var(--background-nav-hover)",
285
+ navActive: "var(--background-nav-active)",
286
+ primarySubtle: "var(--background-primary-subtle)"
287
+ },
288
+ foreground: {
289
+ default: "var(--foreground-default)",
290
+ muted: "var(--foreground-muted)",
291
+ subtle: "var(--foreground-subtle)",
292
+ primary: "var(--foreground-primary)",
293
+ success: "var(--foreground-success)",
294
+ warning: "var(--foreground-warning)",
295
+ error: "var(--foreground-error)",
296
+ info: "var(--foreground-info)",
297
+ onPrimary: "var(--foreground-on-primary)",
298
+ nav: "var(--foreground-nav)",
299
+ navHover: "var(--foreground-nav-hover)",
300
+ navActive: "var(--foreground-nav-active)"
301
+ },
302
+ border: {
303
+ default: "var(--border-default)",
304
+ muted: "var(--border-muted)",
305
+ strong: "var(--border-strong)",
306
+ primary: "var(--border-primary)",
307
+ error: "var(--border-error)",
308
+ success: "var(--border-success)",
309
+ warning: "var(--border-warning)",
310
+ info: "var(--border-info)",
311
+ errorSubtle: "var(--border-error-subtle)"
312
+ }
99
313
  }
100
314
  };
101
315
  export {
102
316
  colors,
103
317
  cssVars,
104
318
  radius,
319
+ semantic,
320
+ semanticDark,
105
321
  shadows,
106
322
  spacing,
107
323
  transitions,
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/tokens.ts"],"sourcesContent":["/* ==========================================================================\n Design Tokens — TypeScript Constants\n Mirrors tokens.css for programmatic access.\n ========================================================================== */\n\nexport const colors = {\n primary: {\n 50: \"#FDF4F1\",\n 100: \"#FADDD5\",\n 200: \"#F4B8A6\",\n 500: \"#E07A5F\",\n 600: \"#C9664A\",\n 700: \"#A8503A\",\n },\n neutral: {\n 50: \"#FAFAF9\",\n 100: \"#F5F5F4\",\n 200: \"#E7E5E4\",\n 300: \"#D6D3D1\",\n 500: \"#78716C\",\n 700: \"#44403C\",\n 900: \"#1C1917\",\n },\n semantic: {\n success: \"#22C55E\",\n warning: \"#F59E0B\",\n error: \"#EF4444\",\n info: \"#3B82F6\",\n },\n} as const;\n\nexport const typography = {\n fontFamily: {\n sans: \"'Manrope', system-ui, -apple-system, sans-serif\",\n mono: \"'JetBrains Mono', ui-monospace, monospace\",\n },\n fontWeight: {\n regular: 400,\n medium: 500,\n semibold: 600,\n bold: 700,\n extrabold: 800,\n },\n fontSize: {\n caption: \"0.75rem\",\n overline: \"0.6875rem\",\n bodySm: \"0.8125rem\",\n body: \"0.875rem\",\n h3: \"1rem\",\n h2: \"1.125rem\",\n h1: \"1.5rem\",\n display: \"2.25rem\",\n },\n} as const;\n\nexport const spacing = {\n 1: \"0.25rem\",\n 2: \"0.5rem\",\n 3: \"0.75rem\",\n 4: \"1rem\",\n 6: \"1.5rem\",\n 8: \"2rem\",\n 12: \"3rem\",\n} as const;\n\nexport const radius = {\n sm: \"0.25rem\",\n md: \"0.375rem\",\n lg: \"0.5rem\",\n full: \"9999px\",\n} as const;\n\nexport const shadows = {\n sm: \"0 1px 2px rgba(28, 25, 23, 0.05)\",\n md: \"0 4px 6px rgba(28, 25, 23, 0.07)\",\n lg: \"0 10px 15px rgba(28, 25, 23, 0.1)\",\n focus: \"0 0 0 3px rgba(224, 122, 95, 0.3)\",\n} as const;\n\nexport const transitions = {\n fast: \"150ms ease\",\n base: \"200ms ease\",\n slow: \"300ms ease\",\n} as const;\n\n// CSS variable references for use in Tailwind config or JS\nexport const cssVars = {\n colors: {\n primary: {\n 50: \"var(--color-primary-50)\",\n 100: \"var(--color-primary-100)\",\n 200: \"var(--color-primary-200)\",\n 500: \"var(--color-primary-500)\",\n 600: \"var(--color-primary-600)\",\n 700: \"var(--color-primary-700)\",\n },\n neutral: {\n 50: \"var(--color-neutral-50)\",\n 100: \"var(--color-neutral-100)\",\n 200: \"var(--color-neutral-200)\",\n 300: \"var(--color-neutral-300)\",\n 500: \"var(--color-neutral-500)\",\n 700: \"var(--color-neutral-700)\",\n 900: \"var(--color-neutral-900)\",\n },\n success: \"var(--color-success)\",\n warning: \"var(--color-warning)\",\n error: \"var(--color-error)\",\n info: \"var(--color-info)\",\n },\n} as const;\n"],"mappings":";AAKO,IAAM,SAAS;AAAA,EACpB,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AAAA,EACA,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;AAEO,IAAM,aAAa;AAAA,EACxB,YAAY;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACV,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,EACX;AACF;AAEO,IAAM,UAAU;AAAA,EACrB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AACN;AAEO,IAAM,SAAS;AAAA,EACpB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;AAEO,IAAM,UAAU;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AACT;AAEO,IAAM,cAAc;AAAA,EACzB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AACR;AAGO,IAAM,UAAU;AAAA,EACrB,QAAQ;AAAA,IACN,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,IACA,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AACF;","names":[]}
1
+ {"version":3,"sources":["../src/tokens.ts"],"sourcesContent":["/* ==========================================================================\n Design Tokens — TypeScript Constants\n Mirrors tokens.css for programmatic access.\n ========================================================================== */\n\nexport const colors = {\n white: \"#FFFFFF\",\n primary: {\n 50: \"#FDF4F1\",\n 100: \"#FADDD5\",\n 200: \"#F4B8A6\",\n 500: \"#E07A5F\",\n 600: \"#C9664A\",\n 700: \"#A8503A\",\n },\n neutral: {\n 50: \"#FAFAF9\",\n 100: \"#F5F5F4\",\n 200: \"#E7E5E4\",\n 300: \"#D6D3D1\",\n 400: \"#A8A29E\",\n 500: \"#78716C\",\n 600: \"#57534E\",\n 700: \"#44403C\",\n 900: \"#1C1917\",\n },\n semantic: {\n success: \"#22C55E\",\n warning: \"#F59E0B\",\n error: \"#EF4444\",\n info: \"#3B82F6\",\n },\n green: {\n 50: \"#F0FDF4\",\n 100: \"#DCFCE7\",\n 200: \"#BBF7D0\",\n 500: \"#22C55E\",\n 600: \"#16A34A\",\n 700: \"#15803D\",\n },\n amber: {\n 50: \"#FFFBEB\",\n 100: \"#FEF3C7\",\n 200: \"#FDE68A\",\n 500: \"#F59E0B\",\n 600: \"#D97706\",\n 700: \"#B45309\",\n },\n red: {\n 50: \"#FEF2F2\",\n 100: \"#FEE2E2\",\n 200: \"#FECACA\",\n 500: \"#EF4444\",\n 600: \"#DC2626\",\n 700: \"#B91C1C\",\n },\n blue: {\n 50: \"#EFF6FF\",\n 100: \"#DBEAFE\",\n 200: \"#BFDBFE\",\n 500: \"#3B82F6\",\n 600: \"#2563EB\",\n 700: \"#1D4ED8\",\n },\n} as const;\n\nexport const typography = {\n fontFamily: {\n sans: \"'Manrope', system-ui, -apple-system, sans-serif\",\n mono: \"'JetBrains Mono', ui-monospace, monospace\",\n },\n fontWeight: {\n regular: 400,\n medium: 500,\n semibold: 600,\n bold: 700,\n extrabold: 800,\n },\n fontSize: {\n caption: \"0.75rem\",\n overline: \"0.6875rem\",\n bodySm: \"0.8125rem\",\n body: \"0.875rem\",\n h3: \"1rem\",\n h2: \"1.125rem\",\n h1: \"1.5rem\",\n display: \"2.25rem\",\n },\n} as const;\n\nexport const spacing = {\n 1: \"0.25rem\",\n 2: \"0.5rem\",\n 3: \"0.75rem\",\n 4: \"1rem\",\n 6: \"1.5rem\",\n 8: \"2rem\",\n 12: \"3rem\",\n} as const;\n\nexport const radius = {\n sm: \"0.25rem\",\n md: \"0.375rem\",\n lg: \"0.5rem\",\n full: \"9999px\",\n} as const;\n\nexport const shadows = {\n sm: \"0 1px 2px rgba(28, 25, 23, 0.05)\",\n md: \"0 4px 6px rgba(28, 25, 23, 0.07)\",\n lg: \"0 10px 15px rgba(28, 25, 23, 0.1)\",\n focus: \"0 0 0 3px rgba(224, 122, 95, 0.3)\",\n} as const;\n\nexport const transitions = {\n fast: \"150ms ease\",\n base: \"200ms ease\",\n slow: \"300ms ease\",\n} as const;\n\nexport const semantic = {\n background: {\n default: \"#FFFFFF\",\n page: \"#FAFAF9\",\n muted: \"#F5F5F4\",\n subtle: \"#E7E5E4\",\n elevated: \"#FFFFFF\",\n overlay: \"rgba(28, 25, 23, 0.5)\",\n primary: \"#E07A5F\",\n success: \"#F0FDF4\",\n warning: \"#FFFBEB\",\n error: \"#FEF2F2\",\n info: \"#EFF6FF\",\n nav: \"#FADDD5\",\n navHover: \"#F4B8A6\",\n navActive: \"#E07A5F\",\n primarySubtle: \"#FADDD5\",\n },\n foreground: {\n default: \"#1C1917\",\n muted: \"#78716C\",\n subtle: \"#A8A29E\",\n primary: \"#A8503A\",\n success: \"#15803D\",\n warning: \"#B45309\",\n error: \"#B91C1C\",\n info: \"#1D4ED8\",\n onPrimary: \"#FFFFFF\",\n nav: \"#44403C\",\n navHover: \"#1C1917\",\n navActive: \"#FFFFFF\",\n },\n border: {\n default: \"#E7E5E4\",\n muted: \"#F5F5F4\",\n strong: \"#D6D3D1\",\n primary: \"#E07A5F\",\n error: \"#EF4444\",\n success: \"#BBF7D0\",\n warning: \"#FDE68A\",\n info: \"#BFDBFE\",\n errorSubtle: \"#FECACA\",\n },\n} as const;\n\nexport const semanticDark = {\n background: {\n default: colors.neutral[900],\n page: \"#0f0e0d\",\n muted: colors.neutral[700],\n subtle: colors.neutral[500],\n elevated: colors.neutral[700],\n overlay: \"rgba(0, 0, 0, 0.7)\",\n primary: colors.primary[500],\n /** Tinted surfaces; see tokens.css for color-mix in runtime */\n primarySubtle: \"#3d2a24\",\n success: \"#1a2e1f\",\n warning: \"#2e2618\",\n error: \"#2e1212\",\n info: \"#152238\",\n nav: colors.neutral[700],\n navHover: colors.neutral[500],\n navActive: colors.primary[500],\n },\n foreground: {\n default: colors.neutral[100],\n muted: colors.neutral[400],\n subtle: colors.neutral[500],\n primary: colors.primary[200],\n success: colors.green[200],\n warning: colors.amber[200],\n error: colors.red[200],\n info: colors.blue[200],\n onPrimary: \"#FFFFFF\",\n nav: colors.neutral[300],\n navHover: colors.neutral[100],\n navActive: colors.white,\n },\n border: {\n default: colors.neutral[500],\n muted: colors.neutral[600],\n strong: colors.neutral[400],\n primary: colors.primary[500],\n error: colors.semantic.error,\n success: \"rgba(34, 197, 94, 0.5)\",\n warning: \"rgba(245, 158, 11, 0.5)\",\n info: \"rgba(59, 130, 246, 0.5)\",\n errorSubtle: \"rgba(239, 68, 68, 0.5)\",\n },\n} as const;\n\n// CSS variable references for use in Tailwind config or JS\nexport const cssVars = {\n colors: {\n primary: {\n 50: \"var(--color-primary-50)\",\n 100: \"var(--color-primary-100)\",\n 200: \"var(--color-primary-200)\",\n 500: \"var(--color-primary-500)\",\n 600: \"var(--color-primary-600)\",\n 700: \"var(--color-primary-700)\",\n },\n neutral: {\n 50: \"var(--color-neutral-50)\",\n 100: \"var(--color-neutral-100)\",\n 200: \"var(--color-neutral-200)\",\n 300: \"var(--color-neutral-300)\",\n 400: \"var(--color-neutral-400)\",\n 500: \"var(--color-neutral-500)\",\n 600: \"var(--color-neutral-600)\",\n 700: \"var(--color-neutral-700)\",\n 900: \"var(--color-neutral-900)\",\n },\n success: \"var(--color-success)\",\n warning: \"var(--color-warning)\",\n error: \"var(--color-error)\",\n info: \"var(--color-info)\",\n },\n semantic: {\n background: {\n default: \"var(--background-default)\",\n page: \"var(--background-page)\",\n muted: \"var(--background-muted)\",\n subtle: \"var(--background-subtle)\",\n elevated: \"var(--background-elevated)\",\n overlay: \"var(--background-overlay)\",\n primary: \"var(--background-primary)\",\n success: \"var(--background-success)\",\n warning: \"var(--background-warning)\",\n error: \"var(--background-error)\",\n info: \"var(--background-info)\",\n nav: \"var(--background-nav)\",\n navHover: \"var(--background-nav-hover)\",\n navActive: \"var(--background-nav-active)\",\n primarySubtle: \"var(--background-primary-subtle)\",\n },\n foreground: {\n default: \"var(--foreground-default)\",\n muted: \"var(--foreground-muted)\",\n subtle: \"var(--foreground-subtle)\",\n primary: \"var(--foreground-primary)\",\n success: \"var(--foreground-success)\",\n warning: \"var(--foreground-warning)\",\n error: \"var(--foreground-error)\",\n info: \"var(--foreground-info)\",\n onPrimary: \"var(--foreground-on-primary)\",\n nav: \"var(--foreground-nav)\",\n navHover: \"var(--foreground-nav-hover)\",\n navActive: \"var(--foreground-nav-active)\",\n },\n border: {\n default: \"var(--border-default)\",\n muted: \"var(--border-muted)\",\n strong: \"var(--border-strong)\",\n primary: \"var(--border-primary)\",\n error: \"var(--border-error)\",\n success: \"var(--border-success)\",\n warning: \"var(--border-warning)\",\n info: \"var(--border-info)\",\n errorSubtle: \"var(--border-error-subtle)\",\n },\n },\n semanticDark: {\n background: {\n default: \"var(--background-default)\",\n page: \"var(--background-page)\",\n muted: \"var(--background-muted)\",\n subtle: \"var(--background-subtle)\",\n elevated: \"var(--background-elevated)\",\n overlay: \"var(--background-overlay)\",\n primary: \"var(--background-primary)\",\n success: \"var(--background-success)\",\n warning: \"var(--background-warning)\",\n error: \"var(--background-error)\",\n info: \"var(--background-info)\",\n nav: \"var(--background-nav)\",\n navHover: \"var(--background-nav-hover)\",\n navActive: \"var(--background-nav-active)\",\n primarySubtle: \"var(--background-primary-subtle)\",\n },\n foreground: {\n default: \"var(--foreground-default)\",\n muted: \"var(--foreground-muted)\",\n subtle: \"var(--foreground-subtle)\",\n primary: \"var(--foreground-primary)\",\n success: \"var(--foreground-success)\",\n warning: \"var(--foreground-warning)\",\n error: \"var(--foreground-error)\",\n info: \"var(--foreground-info)\",\n onPrimary: \"var(--foreground-on-primary)\",\n nav: \"var(--foreground-nav)\",\n navHover: \"var(--foreground-nav-hover)\",\n navActive: \"var(--foreground-nav-active)\",\n },\n border: {\n default: \"var(--border-default)\",\n muted: \"var(--border-muted)\",\n strong: \"var(--border-strong)\",\n primary: \"var(--border-primary)\",\n error: \"var(--border-error)\",\n success: \"var(--border-success)\",\n warning: \"var(--border-warning)\",\n info: \"var(--border-info)\",\n errorSubtle: \"var(--border-error-subtle)\",\n },\n },\n} as const;\n"],"mappings":"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","names":[]}
package/dist/tokens.css CHANGED
@@ -7,6 +7,7 @@
7
7
 
8
8
  /* src/tokens.css */
9
9
  :root {
10
+ --color-white: #FFFFFF;
10
11
  --color-primary-50: #FDF4F1;
11
12
  --color-primary-100: #FADDD5;
12
13
  --color-primary-200: #F4B8A6;
@@ -17,9 +18,35 @@
17
18
  --color-neutral-100: #F5F5F4;
18
19
  --color-neutral-200: #E7E5E4;
19
20
  --color-neutral-300: #D6D3D1;
21
+ --color-neutral-400: #A8A29E;
20
22
  --color-neutral-500: #78716C;
23
+ --color-neutral-600: #57534E;
21
24
  --color-neutral-700: #44403C;
22
25
  --color-neutral-900: #1C1917;
26
+ --color-green-50: #F0FDF4;
27
+ --color-green-100: #DCFCE7;
28
+ --color-green-200: #BBF7D0;
29
+ --color-green-500: #22C55E;
30
+ --color-green-600: #16A34A;
31
+ --color-green-700: #15803D;
32
+ --color-amber-50: #FFFBEB;
33
+ --color-amber-100: #FEF3C7;
34
+ --color-amber-200: #FDE68A;
35
+ --color-amber-500: #F59E0B;
36
+ --color-amber-600: #D97706;
37
+ --color-amber-700: #B45309;
38
+ --color-red-50: #FEF2F2;
39
+ --color-red-100: #FEE2E2;
40
+ --color-red-200: #FECACA;
41
+ --color-red-500: #EF4444;
42
+ --color-red-600: #DC2626;
43
+ --color-red-700: #B91C1C;
44
+ --color-blue-50: #EFF6FF;
45
+ --color-blue-100: #DBEAFE;
46
+ --color-blue-200: #BFDBFE;
47
+ --color-blue-500: #3B82F6;
48
+ --color-blue-600: #2563EB;
49
+ --color-blue-700: #1D4ED8;
23
50
  --color-success: #22C55E;
24
51
  --color-warning: #F59E0B;
25
52
  --color-error: #EF4444;
@@ -61,8 +88,122 @@
61
88
  --shadow-md: 0 4px 6px rgba(28, 25, 23, 0.07);
62
89
  --shadow-lg: 0 10px 15px rgba(28, 25, 23, 0.1);
63
90
  --shadow-focus: 0 0 0 3px rgba(224, 122, 95, 0.3);
91
+ --background-default: var(--color-white);
92
+ --background-page: var(--color-neutral-50);
93
+ --background-muted: var(--color-neutral-100);
94
+ --background-subtle: var(--color-neutral-200);
95
+ --background-elevated: var(--color-white);
96
+ --background-overlay: rgba(28, 25, 23, 0.5);
97
+ --background-primary: var(--color-primary-500);
98
+ --background-success: var(--color-green-50);
99
+ --background-warning: var(--color-amber-50);
100
+ --background-error: var(--color-red-50);
101
+ --background-info: var(--color-blue-50);
102
+ --background-nav: var(--color-primary-100);
103
+ --background-nav-hover: var(--color-primary-200);
104
+ --background-nav-active: var(--color-primary-500);
105
+ --background-primary-subtle: var(--color-primary-100);
106
+ --foreground-default: var(--color-neutral-900);
107
+ --foreground-muted: var(--color-neutral-500);
108
+ --foreground-subtle: var(--color-neutral-400);
109
+ --foreground-primary: var(--color-primary-700);
110
+ --foreground-success: var(--color-green-700);
111
+ --foreground-warning: var(--color-amber-700);
112
+ --foreground-error: var(--color-red-700);
113
+ --foreground-info: var(--color-blue-700);
114
+ --foreground-on-primary: #FFFFFF;
115
+ --foreground-nav: var(--color-neutral-700);
116
+ --foreground-nav-hover: var(--color-neutral-900);
117
+ --foreground-nav-active: var(--color-white);
118
+ --border-default: var(--color-neutral-200);
119
+ --border-muted: var(--color-neutral-100);
120
+ --border-strong: var(--color-neutral-300);
121
+ --border-primary: var(--color-primary-500);
122
+ --border-error: var(--color-error);
123
+ --border-success: var(--color-green-200);
124
+ --border-warning: var(--color-amber-200);
125
+ --border-info: var(--color-blue-200);
126
+ --border-error-subtle: var(--color-red-200);
64
127
  --transition-fast: 150ms ease;
65
128
  --transition-base: 200ms ease;
66
129
  --transition-slow: 300ms ease;
67
130
  }
131
+ @media (prefers-color-scheme: dark) {
132
+ :root:not(.light) {
133
+ --background-default: var(--color-neutral-900);
134
+ --background-page: #0f0e0d;
135
+ --background-muted: var(--color-neutral-700);
136
+ --background-subtle: var(--color-neutral-500);
137
+ --background-elevated: var(--color-neutral-700);
138
+ --background-overlay: rgba(0, 0, 0, 0.7);
139
+ --background-primary: var(--color-primary-500);
140
+ --background-nav: var(--color-neutral-700);
141
+ --background-nav-hover: var(--color-neutral-500);
142
+ --background-nav-active: var(--color-primary-500);
143
+ --background-primary-subtle: color-mix(in srgb, var(--color-primary-500) 30%, var(--color-neutral-900));
144
+ --background-success: color-mix(in srgb, var(--color-green-500) 22%, var(--color-neutral-900));
145
+ --background-warning: color-mix(in srgb, var(--color-amber-500) 22%, var(--color-neutral-900));
146
+ --background-error: color-mix(in srgb, var(--color-red-500) 22%, var(--color-neutral-900));
147
+ --background-info: color-mix(in srgb, var(--color-blue-500) 22%, var(--color-neutral-900));
148
+ --foreground-default: var(--color-neutral-100);
149
+ --foreground-muted: var(--color-neutral-400);
150
+ --foreground-subtle: var(--color-neutral-500);
151
+ --foreground-primary: var(--color-primary-200);
152
+ --foreground-success: var(--color-green-200);
153
+ --foreground-warning: var(--color-amber-200);
154
+ --foreground-error: var(--color-red-200);
155
+ --foreground-info: var(--color-blue-200);
156
+ --foreground-on-primary: #FFFFFF;
157
+ --foreground-nav: var(--color-neutral-300);
158
+ --foreground-nav-hover: var(--color-neutral-100);
159
+ --foreground-nav-active: var(--color-white);
160
+ --border-default: var(--color-neutral-500);
161
+ --border-muted: var(--color-neutral-600);
162
+ --border-strong: var(--color-neutral-400);
163
+ --border-primary: var(--color-primary-500);
164
+ --border-error: var(--color-error);
165
+ --border-success: color-mix(in srgb, var(--color-green-500) 50%, transparent);
166
+ --border-warning: color-mix(in srgb, var(--color-amber-500) 50%, transparent);
167
+ --border-info: color-mix(in srgb, var(--color-blue-500) 50%, transparent);
168
+ --border-error-subtle: color-mix(in srgb, var(--color-red-500) 50%, transparent);
169
+ }
170
+ }
171
+ .dark {
172
+ --background-default: var(--color-neutral-900);
173
+ --background-page: #0f0e0d;
174
+ --background-muted: var(--color-neutral-700);
175
+ --background-subtle: var(--color-neutral-500);
176
+ --background-elevated: var(--color-neutral-700);
177
+ --background-overlay: rgba(0, 0, 0, 0.7);
178
+ --background-primary: var(--color-primary-500);
179
+ --background-nav: var(--color-neutral-700);
180
+ --background-nav-hover: var(--color-neutral-500);
181
+ --background-nav-active: var(--color-primary-500);
182
+ --background-primary-subtle: color-mix(in srgb, var(--color-primary-500) 30%, var(--color-neutral-900));
183
+ --background-success: color-mix(in srgb, var(--color-green-500) 22%, var(--color-neutral-900));
184
+ --background-warning: color-mix(in srgb, var(--color-amber-500) 22%, var(--color-neutral-900));
185
+ --background-error: color-mix(in srgb, var(--color-red-500) 22%, var(--color-neutral-900));
186
+ --background-info: color-mix(in srgb, var(--color-blue-500) 22%, var(--color-neutral-900));
187
+ --foreground-default: var(--color-neutral-100);
188
+ --foreground-muted: var(--color-neutral-400);
189
+ --foreground-subtle: var(--color-neutral-500);
190
+ --foreground-primary: var(--color-primary-200);
191
+ --foreground-success: var(--color-green-200);
192
+ --foreground-warning: var(--color-amber-200);
193
+ --foreground-error: var(--color-red-200);
194
+ --foreground-info: var(--color-blue-200);
195
+ --foreground-on-primary: #FFFFFF;
196
+ --foreground-nav: var(--color-neutral-300);
197
+ --foreground-nav-hover: var(--color-neutral-100);
198
+ --foreground-nav-active: var(--color-white);
199
+ --border-default: var(--color-neutral-500);
200
+ --border-muted: var(--color-neutral-600);
201
+ --border-strong: var(--color-neutral-400);
202
+ --border-primary: var(--color-primary-500);
203
+ --border-error: var(--color-error);
204
+ --border-success: color-mix(in srgb, var(--color-green-500) 50%, transparent);
205
+ --border-warning: color-mix(in srgb, var(--color-amber-500) 50%, transparent);
206
+ --border-info: color-mix(in srgb, var(--color-blue-500) 50%, transparent);
207
+ --border-error-subtle: color-mix(in srgb, var(--color-red-500) 50%, transparent);
208
+ }
68
209
  /*# sourceMappingURL=tokens.css.map */
package/dist/tokens.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/tokens.css"],"sourcesContent":["/* Fonts */\n@import \"@fontsource/manrope/400.css\";\n@import \"@fontsource/manrope/500.css\";\n@import \"@fontsource/manrope/600.css\";\n@import \"@fontsource/manrope/700.css\";\n@import \"@fontsource/manrope/800.css\";\n@import \"@fontsource/jetbrains-mono/400.css\";\n\n/* ==========================================================================\n Design Tokens — CSS Variables\n Source of truth for the design system.\n ========================================================================== */\n\n:root {\n /* -------------------------------------------------------------------------\n Colors — Primary (Terracotta)\n ------------------------------------------------------------------------- */\n --color-primary-50: #FDF4F1;\n --color-primary-100: #FADDD5;\n --color-primary-200: #F4B8A6;\n --color-primary-500: #E07A5F;\n --color-primary-600: #C9664A;\n --color-primary-700: #A8503A;\n\n /* -------------------------------------------------------------------------\n Colors — Neutrals (Warm Stone)\n ------------------------------------------------------------------------- */\n --color-neutral-50: #FAFAF9;\n --color-neutral-100: #F5F5F4;\n --color-neutral-200: #E7E5E4;\n --color-neutral-300: #D6D3D1;\n --color-neutral-500: #78716C;\n --color-neutral-700: #44403C;\n --color-neutral-900: #1C1917;\n\n /* -------------------------------------------------------------------------\n Colors — Semantic\n ------------------------------------------------------------------------- */\n --color-success: #22C55E;\n --color-warning: #F59E0B;\n --color-error: #EF4444;\n --color-info: #3B82F6;\n\n /* -------------------------------------------------------------------------\n Typography — Font Families\n ------------------------------------------------------------------------- */\n --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;\n --font-mono: 'JetBrains Mono', ui-monospace, monospace;\n\n /* -------------------------------------------------------------------------\n Typography — Font Weights\n ------------------------------------------------------------------------- */\n --font-weight-regular: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-extrabold: 800;\n\n /* -------------------------------------------------------------------------\n Typography — Font Sizes\n ------------------------------------------------------------------------- */\n --font-size-caption: 0.75rem; /* 12px */\n --font-size-overline: 0.6875rem; /* 11px */\n --font-size-body-sm: 0.8125rem; /* 13px */\n --font-size-body: 0.875rem; /* 14px */\n --font-size-h3: 1rem; /* 16px */\n --font-size-h2: 1.125rem; /* 18px */\n --font-size-h1: 1.5rem; /* 24px */\n --font-size-display: 2.25rem; /* 36px */\n\n /* -------------------------------------------------------------------------\n Spacing\n ------------------------------------------------------------------------- */\n --spacing-1: 0.25rem; /* 4px */\n --spacing-2: 0.5rem; /* 8px */\n --spacing-3: 0.75rem; /* 12px */\n --spacing-4: 1rem; /* 16px */\n --spacing-6: 1.5rem; /* 24px */\n --spacing-8: 2rem; /* 32px */\n --spacing-12: 3rem; /* 48px */\n\n /* -------------------------------------------------------------------------\n Border Radius\n ------------------------------------------------------------------------- */\n --radius-sm: 0.25rem; /* 4px */\n --radius-md: 0.375rem; /* 6px */\n --radius-lg: 0.5rem; /* 8px */\n --radius-full: 9999px;\n\n /* -------------------------------------------------------------------------\n Shadows\n ------------------------------------------------------------------------- */\n --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);\n --shadow-md: 0 4px 6px rgba(28, 25, 23, 0.07);\n --shadow-lg: 0 10px 15px rgba(28, 25, 23, 0.1);\n --shadow-focus: 0 0 0 3px rgba(224, 122, 95, 0.3);\n\n /* -------------------------------------------------------------------------\n Transitions\n ------------------------------------------------------------------------- */\n --transition-fast: 150ms ease;\n --transition-base: 200ms ease;\n --transition-slow: 300ms ease;\n}"],"mappings":";;;;;;;;AAaA;AAIE,sBAAoB;AACpB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AAKrB,sBAAoB;AACpB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AAKrB,mBAAiB;AACjB,mBAAiB;AACjB,iBAAe;AACf,gBAAc;AAKd;AAAA,IAAa,SAAS;AAAA,IAAE,SAAS;AAAA,IAAE,aAAa;AAAA,IAAE;AAClD;AAAA,IAAa,gBAAgB;AAAA,IAAE,YAAY;AAAA,IAAE;AAK7C,yBAAuB;AACvB,wBAAsB;AACtB,0BAAwB;AACxB,sBAAoB;AACpB,2BAAyB;AAKzB,uBAAqB;AACrB,wBAAsB;AACtB,uBAAqB;AACrB,oBAAkB;AAClB,kBAAgB;AAChB,kBAAgB;AAChB,kBAAgB;AAChB,uBAAqB;AAKrB,eAAa;AACb,eAAa;AACb,eAAa;AACb,eAAa;AACb,eAAa;AACb,eAAa;AACb,gBAAc;AAKd,eAAa;AACb,eAAa;AACb,eAAa;AACb,iBAAe;AAKf,eAAa,EAAE,IAAI,IAAI,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AACxC,eAAa,EAAE,IAAI,IAAI,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AACxC,eAAa,EAAE,KAAK,KAAK,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AAC1C,kBAAgB,EAAE,EAAE,EAAE,IAAI,KAAK,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE;AAK7C,qBAAmB,MAAM;AACzB,qBAAmB,MAAM;AACzB,qBAAmB,MAAM;AAC3B;","names":[]}
1
+ {"version":3,"sources":["../src/tokens.css"],"sourcesContent":["/* Fonts */\n@import \"@fontsource/manrope/400.css\";\n@import \"@fontsource/manrope/500.css\";\n@import \"@fontsource/manrope/600.css\";\n@import \"@fontsource/manrope/700.css\";\n@import \"@fontsource/manrope/800.css\";\n@import \"@fontsource/jetbrains-mono/400.css\";\n\n/* ==========================================================================\n Design Tokens — CSS Variables\n Source of truth for the design system.\n ========================================================================== */\n\n:root {\n /* -------------------------------------------------------------------------\n Colors — Primary (Terracotta)\n ------------------------------------------------------------------------- */\n --color-white: #FFFFFF;\n --color-primary-50: #FDF4F1;\n --color-primary-100: #FADDD5;\n --color-primary-200: #F4B8A6;\n --color-primary-500: #E07A5F;\n --color-primary-600: #C9664A;\n --color-primary-700: #A8503A;\n\n /* -------------------------------------------------------------------------\n Colors — Neutrals (Warm Stone)\n ------------------------------------------------------------------------- */\n --color-neutral-50: #FAFAF9;\n --color-neutral-100: #F5F5F4;\n --color-neutral-200: #E7E5E4;\n --color-neutral-300: #D6D3D1;\n /* Neutral addition */\n --color-neutral-400: #A8A29E;\n --color-neutral-500: #78716C;\n --color-neutral-600: #57534E;\n --color-neutral-700: #44403C;\n --color-neutral-900: #1C1917;\n\n /* Green */\n --color-green-50: #F0FDF4;\n --color-green-100: #DCFCE7;\n --color-green-200: #BBF7D0;\n --color-green-500: #22C55E;\n --color-green-600: #16A34A;\n --color-green-700: #15803D;\n\n /* Amber */\n --color-amber-50: #FFFBEB;\n --color-amber-100: #FEF3C7;\n --color-amber-200: #FDE68A;\n --color-amber-500: #F59E0B;\n --color-amber-600: #D97706;\n --color-amber-700: #B45309;\n\n /* Red */\n --color-red-50: #FEF2F2;\n --color-red-100: #FEE2E2;\n --color-red-200: #FECACA;\n --color-red-500: #EF4444;\n --color-red-600: #DC2626;\n --color-red-700: #B91C1C;\n\n /* Blue */\n --color-blue-50: #EFF6FF;\n --color-blue-100: #DBEAFE;\n --color-blue-200: #BFDBFE;\n --color-blue-500: #3B82F6;\n --color-blue-600: #2563EB;\n --color-blue-700: #1D4ED8;\n\n /* -------------------------------------------------------------------------\n Colors — Semantic\n ------------------------------------------------------------------------- */\n --color-success: #22C55E;\n --color-warning: #F59E0B;\n --color-error: #EF4444;\n --color-info: #3B82F6;\n\n /* -------------------------------------------------------------------------\n Typography — Font Families\n ------------------------------------------------------------------------- */\n --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;\n --font-mono: 'JetBrains Mono', ui-monospace, monospace;\n\n /* -------------------------------------------------------------------------\n Typography — Font Weights\n ------------------------------------------------------------------------- */\n --font-weight-regular: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-extrabold: 800;\n\n /* -------------------------------------------------------------------------\n Typography — Font Sizes\n ------------------------------------------------------------------------- */\n --font-size-caption: 0.75rem; /* 12px */\n --font-size-overline: 0.6875rem; /* 11px */\n --font-size-body-sm: 0.8125rem; /* 13px */\n --font-size-body: 0.875rem; /* 14px */\n --font-size-h3: 1rem; /* 16px */\n --font-size-h2: 1.125rem; /* 18px */\n --font-size-h1: 1.5rem; /* 24px */\n --font-size-display: 2.25rem; /* 36px */\n\n /* -------------------------------------------------------------------------\n Spacing\n ------------------------------------------------------------------------- */\n --spacing-1: 0.25rem; /* 4px */\n --spacing-2: 0.5rem; /* 8px */\n --spacing-3: 0.75rem; /* 12px */\n --spacing-4: 1rem; /* 16px */\n --spacing-6: 1.5rem; /* 24px */\n --spacing-8: 2rem; /* 32px */\n --spacing-12: 3rem; /* 48px */\n\n /* -------------------------------------------------------------------------\n Border Radius\n ------------------------------------------------------------------------- */\n --radius-sm: 0.25rem; /* 4px */\n --radius-md: 0.375rem; /* 6px */\n --radius-lg: 0.5rem; /* 8px */\n --radius-full: 9999px;\n\n /* -------------------------------------------------------------------------\n Shadows\n ------------------------------------------------------------------------- */\n --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);\n --shadow-md: 0 4px 6px rgba(28, 25, 23, 0.07);\n --shadow-lg: 0 10px 15px rgba(28, 25, 23, 0.1);\n --shadow-focus: 0 0 0 3px rgba(224, 122, 95, 0.3);\n\n /* -------------------------------------------------------------------------\n Semantic — Backgrounds\n ------------------------------------------------------------------------- */\n --background-default: var(--color-white);\n --background-page: var(--color-neutral-50);\n --background-muted: var(--color-neutral-100);\n --background-subtle: var(--color-neutral-200);\n --background-elevated: var(--color-white);\n --background-overlay: rgba(28, 25, 23, 0.5);\n --background-primary: var(--color-primary-500);\n --background-success: var(--color-green-50);\n --background-warning: var(--color-amber-50);\n --background-error: var(--color-red-50);\n --background-info: var(--color-blue-50);\n --background-nav: var(--color-primary-100);\n --background-nav-hover: var(--color-primary-200);\n --background-nav-active: var(--color-primary-500);\n --background-primary-subtle: var(--color-primary-100);\n\n /* -------------------------------------------------------------------------\n Semantic — Foregrounds (text/icons)\n ------------------------------------------------------------------------- */\n --foreground-default: var(--color-neutral-900);\n --foreground-muted: var(--color-neutral-500);\n --foreground-subtle: var(--color-neutral-400);\n --foreground-primary: var(--color-primary-700);\n --foreground-success: var(--color-green-700);\n --foreground-warning: var(--color-amber-700);\n --foreground-error: var(--color-red-700);\n --foreground-info: var(--color-blue-700);\n --foreground-on-primary: #FFFFFF;\n --foreground-nav: var(--color-neutral-700);\n --foreground-nav-hover: var(--color-neutral-900);\n --foreground-nav-active: var(--color-white);\n\n /* -------------------------------------------------------------------------\n Semantic — Borders\n ------------------------------------------------------------------------- */\n --border-default: var(--color-neutral-200);\n --border-muted: var(--color-neutral-100);\n --border-strong: var(--color-neutral-300);\n --border-primary: var(--color-primary-500);\n --border-error: var(--color-error);\n --border-success: var(--color-green-200);\n --border-warning: var(--color-amber-200);\n --border-info: var(--color-blue-200);\n --border-error-subtle: var(--color-red-200);\n\n /* -------------------------------------------------------------------------\n Transitions\n ------------------------------------------------------------------------- */\n --transition-fast: 150ms ease;\n --transition-base: 200ms ease;\n --transition-slow: 300ms ease;\n}\n\n/* -------------------------------------------------------------------------\n Dark Mode\n Activation: .dark class OR prefers-color-scheme (class takes priority)\n ------------------------------------------------------------------------- */\n\n@media (prefers-color-scheme: dark) {\n :root:not(.light) {\n --background-default: var(--color-neutral-900);\n --background-page: #0f0e0d;\n --background-muted: var(--color-neutral-700);\n --background-subtle: var(--color-neutral-500);\n --background-elevated: var(--color-neutral-700);\n --background-overlay: rgba(0, 0, 0, 0.7);\n --background-primary: var(--color-primary-500);\n --background-nav: var(--color-neutral-700);\n --background-nav-hover: var(--color-neutral-500);\n --background-nav-active: var(--color-primary-500);\n --background-primary-subtle: color-mix(in srgb, var(--color-primary-500) 30%, var(--color-neutral-900));\n --background-success: color-mix(in srgb, var(--color-green-500) 22%, var(--color-neutral-900));\n --background-warning: color-mix(in srgb, var(--color-amber-500) 22%, var(--color-neutral-900));\n --background-error: color-mix(in srgb, var(--color-red-500) 22%, var(--color-neutral-900));\n --background-info: color-mix(in srgb, var(--color-blue-500) 22%, var(--color-neutral-900));\n\n --foreground-default: var(--color-neutral-100);\n --foreground-muted: var(--color-neutral-400);\n --foreground-subtle: var(--color-neutral-500);\n --foreground-primary: var(--color-primary-200);\n --foreground-success: var(--color-green-200);\n --foreground-warning: var(--color-amber-200);\n --foreground-error: var(--color-red-200);\n --foreground-info: var(--color-blue-200);\n --foreground-on-primary: #FFFFFF;\n --foreground-nav: var(--color-neutral-300);\n --foreground-nav-hover: var(--color-neutral-100);\n --foreground-nav-active: var(--color-white);\n\n --border-default: var(--color-neutral-500);\n --border-muted: var(--color-neutral-600);\n --border-strong: var(--color-neutral-400);\n --border-primary: var(--color-primary-500);\n --border-error: var(--color-error);\n --border-success: color-mix(in srgb, var(--color-green-500) 50%, transparent);\n --border-warning: color-mix(in srgb, var(--color-amber-500) 50%, transparent);\n --border-info: color-mix(in srgb, var(--color-blue-500) 50%, transparent);\n --border-error-subtle: color-mix(in srgb, var(--color-red-500) 50%, transparent);\n }\n}\n\n.dark {\n --background-default: var(--color-neutral-900);\n --background-page: #0f0e0d;\n --background-muted: var(--color-neutral-700);\n --background-subtle: var(--color-neutral-500);\n --background-elevated: var(--color-neutral-700);\n --background-overlay: rgba(0, 0, 0, 0.7);\n --background-primary: var(--color-primary-500);\n --background-nav: var(--color-neutral-700);\n --background-nav-hover: var(--color-neutral-500);\n --background-nav-active: var(--color-primary-500);\n --background-primary-subtle: color-mix(in srgb, var(--color-primary-500) 30%, var(--color-neutral-900));\n --background-success: color-mix(in srgb, var(--color-green-500) 22%, var(--color-neutral-900));\n --background-warning: color-mix(in srgb, var(--color-amber-500) 22%, var(--color-neutral-900));\n --background-error: color-mix(in srgb, var(--color-red-500) 22%, var(--color-neutral-900));\n --background-info: color-mix(in srgb, var(--color-blue-500) 22%, var(--color-neutral-900));\n\n --foreground-default: var(--color-neutral-100);\n --foreground-muted: var(--color-neutral-400);\n --foreground-subtle: var(--color-neutral-500);\n --foreground-primary: var(--color-primary-200);\n --foreground-success: var(--color-green-200);\n --foreground-warning: var(--color-amber-200);\n --foreground-error: var(--color-red-200);\n --foreground-info: var(--color-blue-200);\n --foreground-on-primary: #FFFFFF;\n --foreground-nav: var(--color-neutral-300);\n --foreground-nav-hover: var(--color-neutral-100);\n --foreground-nav-active: var(--color-white);\n\n --border-default: var(--color-neutral-500);\n --border-muted: var(--color-neutral-600);\n --border-strong: var(--color-neutral-400);\n --border-primary: var(--color-primary-500);\n --border-error: var(--color-error);\n --border-success: color-mix(in srgb, var(--color-green-500) 50%, transparent);\n --border-warning: color-mix(in srgb, var(--color-amber-500) 50%, transparent);\n --border-info: color-mix(in srgb, var(--color-blue-500) 50%, transparent);\n --border-error-subtle: color-mix(in srgb, var(--color-red-500) 50%, transparent);\n}"],"mappings":"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","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akanaka/tokens",
3
- "version": "0.3.0",
3
+ "version": "0.4.1",
4
4
  "description": "Design tokens for the design system",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -12,6 +12,7 @@
12
12
  "import": "./dist/index.js"
13
13
  },
14
14
  "./css": "./dist/tokens.css",
15
+ "./tokens.css": "./dist/tokens.css",
15
16
  "./tailwind": "./dist/tailwind.preset.cjs",
16
17
  "./tailwind-v4": "./dist/tailwind-v4.css"
17
18
  },