@akanaka/tokens 0.4.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 +103 -1
  2. package/dist/index.js +107 -4
  3. package/dist/index.js.map +1 -1
  4. package/dist/tokens.css +84 -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";
@@ -14,6 +15,7 @@ declare const colors: {
14
15
  readonly 300: "#D6D3D1";
15
16
  readonly 400: "#A8A29E";
16
17
  readonly 500: "#78716C";
18
+ readonly 600: "#57534E";
17
19
  readonly 700: "#44403C";
18
20
  readonly 900: "#1C1917";
19
21
  };
@@ -121,6 +123,7 @@ declare const semantic: {
121
123
  readonly nav: "#FADDD5";
122
124
  readonly navHover: "#F4B8A6";
123
125
  readonly navActive: "#E07A5F";
126
+ readonly primarySubtle: "#FADDD5";
124
127
  };
125
128
  readonly foreground: {
126
129
  readonly default: "#1C1917";
@@ -142,6 +145,55 @@ declare const semantic: {
142
145
  readonly strong: "#D6D3D1";
143
146
  readonly primary: "#E07A5F";
144
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)";
145
197
  };
146
198
  };
147
199
  declare const cssVars: {
@@ -161,6 +213,7 @@ declare const cssVars: {
161
213
  readonly 300: "var(--color-neutral-300)";
162
214
  readonly 400: "var(--color-neutral-400)";
163
215
  readonly 500: "var(--color-neutral-500)";
216
+ readonly 600: "var(--color-neutral-600)";
164
217
  readonly 700: "var(--color-neutral-700)";
165
218
  readonly 900: "var(--color-neutral-900)";
166
219
  };
@@ -185,6 +238,51 @@ declare const cssVars: {
185
238
  readonly nav: "var(--background-nav)";
186
239
  readonly navHover: "var(--background-nav-hover)";
187
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)";
188
286
  };
189
287
  readonly foreground: {
190
288
  readonly default: "var(--foreground-default)";
@@ -206,8 +304,12 @@ declare const cssVars: {
206
304
  readonly strong: "var(--border-strong)";
207
305
  readonly primary: "var(--border-primary)";
208
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)";
209
311
  };
210
312
  };
211
313
  };
212
314
 
213
- export { colors, cssVars, radius, semantic, 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",
@@ -15,6 +16,7 @@ var colors = {
15
16
  300: "#D6D3D1",
16
17
  400: "#A8A29E",
17
18
  500: "#78716C",
19
+ 600: "#57534E",
18
20
  700: "#44403C",
19
21
  900: "#1C1917"
20
22
  },
@@ -121,7 +123,8 @@ var semantic = {
121
123
  info: "#EFF6FF",
122
124
  nav: "#FADDD5",
123
125
  navHover: "#F4B8A6",
124
- navActive: "#E07A5F"
126
+ navActive: "#E07A5F",
127
+ primarySubtle: "#FADDD5"
125
128
  },
126
129
  foreground: {
127
130
  default: "#1C1917",
@@ -142,7 +145,56 @@ var semantic = {
142
145
  muted: "#F5F5F4",
143
146
  strong: "#D6D3D1",
144
147
  primary: "#E07A5F",
145
- error: "#EF4444"
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)"
146
198
  }
147
199
  };
148
200
  var cssVars = {
@@ -162,6 +214,7 @@ var cssVars = {
162
214
  300: "var(--color-neutral-300)",
163
215
  400: "var(--color-neutral-400)",
164
216
  500: "var(--color-neutral-500)",
217
+ 600: "var(--color-neutral-600)",
165
218
  700: "var(--color-neutral-700)",
166
219
  900: "var(--color-neutral-900)"
167
220
  },
@@ -185,7 +238,52 @@ var cssVars = {
185
238
  info: "var(--background-info)",
186
239
  nav: "var(--background-nav)",
187
240
  navHover: "var(--background-nav-hover)",
188
- navActive: "var(--background-nav-active)"
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)"
189
287
  },
190
288
  foreground: {
191
289
  default: "var(--foreground-default)",
@@ -206,7 +304,11 @@ var cssVars = {
206
304
  muted: "var(--border-muted)",
207
305
  strong: "var(--border-strong)",
208
306
  primary: "var(--border-primary)",
209
- error: "var(--border-error)"
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)"
210
312
  }
211
313
  }
212
314
  };
@@ -215,6 +317,7 @@ export {
215
317
  cssVars,
216
318
  radius,
217
319
  semantic,
320
+ semanticDark,
218
321
  shadows,
219
322
  spacing,
220
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 400: \"#A8A29E\",\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 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 },\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 },\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 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 },\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 },\n },\n} as const;\n"],"mappings":"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","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
@@ -20,6 +20,7 @@
20
20
  --color-neutral-300: #D6D3D1;
21
21
  --color-neutral-400: #A8A29E;
22
22
  --color-neutral-500: #78716C;
23
+ --color-neutral-600: #57534E;
23
24
  --color-neutral-700: #44403C;
24
25
  --color-neutral-900: #1C1917;
25
26
  --color-green-50: #F0FDF4;
@@ -101,6 +102,7 @@
101
102
  --background-nav: var(--color-primary-100);
102
103
  --background-nav-hover: var(--color-primary-200);
103
104
  --background-nav-active: var(--color-primary-500);
105
+ --background-primary-subtle: var(--color-primary-100);
104
106
  --foreground-default: var(--color-neutral-900);
105
107
  --foreground-muted: var(--color-neutral-500);
106
108
  --foreground-subtle: var(--color-neutral-400);
@@ -118,8 +120,90 @@
118
120
  --border-strong: var(--color-neutral-300);
119
121
  --border-primary: var(--color-primary-500);
120
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);
121
127
  --transition-fast: 150ms ease;
122
128
  --transition-base: 200ms ease;
123
129
  --transition-slow: 300ms ease;
124
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
+ }
125
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-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-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\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\n /* -------------------------------------------------------------------------\n Transitions\n ------------------------------------------------------------------------- */\n --transition-fast: 150ms ease;\n --transition-base: 200ms ease;\n --transition-slow: 300ms ease;\n}"],"mappings":";;;;;;;;AAaA;AAIE,iBAAe;AACf,sBAAoB;AACpB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AAKrB,sBAAoB;AACpB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AAErB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AACrB,uBAAqB;AAGrB,oBAAkB;AAClB,qBAAmB;AACnB,qBAAmB;AACnB,qBAAmB;AACnB,qBAAmB;AACnB,qBAAmB;AAGnB,oBAAkB;AAClB,qBAAmB;AACnB,qBAAmB;AACnB,qBAAmB;AACnB,qBAAmB;AACnB,qBAAmB;AAGnB,kBAAgB;AAChB,mBAAiB;AACjB,mBAAiB;AACjB,mBAAiB;AACjB,mBAAiB;AACjB,mBAAiB;AAGjB,mBAAiB;AACjB,oBAAkB;AAClB,oBAAkB;AAClB,oBAAkB;AAClB,oBAAkB;AAClB,oBAAkB;AAKlB,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,wBAAsB,IAAI;AAC1B,qBAAmB,IAAI;AACvB,sBAAoB,IAAI;AACxB,uBAAqB,IAAI;AACzB,yBAAuB,IAAI;AAC3B,wBAAsB,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;AACvC,wBAAsB,IAAI;AAC1B,wBAAsB,IAAI;AAC1B,wBAAsB,IAAI;AAC1B,sBAAoB,IAAI;AACxB,qBAAmB,IAAI;AACvB,oBAAkB,IAAI;AACtB,0BAAwB,IAAI;AAC5B,2BAAyB,IAAI;AAK7B,wBAAsB,IAAI;AAC1B,sBAAoB,IAAI;AACxB,uBAAqB,IAAI;AACzB,wBAAsB,IAAI;AAC1B,wBAAsB,IAAI;AAC1B,wBAAsB,IAAI;AAC1B,sBAAoB,IAAI;AACxB,qBAAmB,IAAI;AACvB,2BAAyB;AACzB,oBAAkB,IAAI;AACtB,0BAAwB,IAAI;AAC5B,2BAAyB,IAAI;AAK7B,oBAAkB,IAAI;AACtB,kBAAgB,IAAI;AACpB,mBAAiB,IAAI;AACrB,oBAAkB,IAAI;AACtB,kBAAgB,IAAI;AAKpB,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.4.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
  },