@airframeui/tokens 0.0.2 → 0.0.3

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 (4) hide show
  1. package/dist/tokens.css +69 -24
  2. package/dist/tokens.js +41 -26
  3. package/dist/tokens.json +41 -26
  4. package/package.json +1 -1
package/dist/tokens.css CHANGED
@@ -7,7 +7,10 @@
7
7
  @layer af.tokens {
8
8
  :root {
9
9
  /* --- Color primitives --- */
10
- --af-base-primary: #1f3fe0;
10
+ --af-base-primary: var(
11
+ --af-base-primary--hc-light,
12
+ var(--af-base-primary--dark, #1f3fe0)
13
+ );
11
14
  --af-base-secondary: #dbe1f4;
12
15
  --af-base-tertiary: #111827;
13
16
  --af-base-success: #22c55e;
@@ -24,9 +27,9 @@
24
27
  --af-base-neutral-400: #94a3b8;
25
28
  --af-base-neutral-500: #64748b;
26
29
  --af-base-neutral-600: #475569;
27
- --af-base-neutral-700: #334155;
28
- --af-base-neutral-800: #1f2937;
29
- --af-base-neutral-900: #111827;
30
+ --af-base-neutral-700: #1d2434;
31
+ --af-base-neutral-800: #121620;
32
+ --af-base-neutral-900: #0d1117;
30
33
 
31
34
  /* --- Breakpoints --- */
32
35
  --af-bp-xs: 360px;
@@ -118,15 +121,16 @@
118
121
  --af-ease-linear: linear;
119
122
 
120
123
  /* --- Borders --- */
121
- --af-border-width: 2px;
124
+ --af-border-width: 1px;
122
125
  --af-hit-size: 2.75rem;
123
126
 
124
127
  /* --- Global knobs (for color-mix derivations) --- */
125
128
  --af-hover-mix: 12%;
126
129
  --af-active-mix: 18%;
127
130
  --af-soft-mix: 12%;
128
- /* Dark enough that success/warning/info hard text clears WCAG AA on soft tints */
131
+ /* Hard text on soft tints: mix toward black in light, white in dark */
129
132
  --af-hard-mix: 45%;
133
+ --af-hard-toward: black;
130
134
  --af-border-mix: 22%;
131
135
 
132
136
  /* --- Layout semantics --- */
@@ -192,15 +196,18 @@
192
196
 
193
197
  /* Shared control tokens (for inputs, selects, etc.) */
194
198
  --af-control-min-height: auto;
195
- --af-control-radius: var(--af-radius-xl);
199
+ --af-control-radius: var(--af-radius-lg);
196
200
  --af-control-padding-y: var(--af-space-2);
197
201
  --af-control-padding-x: var(--af-space-3);
202
+ --af-control-border-width: 1px;
198
203
  --af-control-border: var(--af-color-border);
204
+ --af-control-border-hover: var(--af-color-border-strong);
199
205
 
200
206
  /* Choice controls (checkbox, radio, switch track) */
201
207
  --af-choice-size: 1.5rem;
202
208
  --af-switch-height: var(--af-choice-size);
203
209
  --af-switch-width-ratio: 0.8;
210
+ --af-switch-thumb-inset: 2px;
204
211
 
205
212
  /* Link */
206
213
  --af-link-primary: var(--af-color-primary);
@@ -212,9 +219,13 @@
212
219
  --af-btn-padding-y: var(--af-control-padding-y);
213
220
  --af-btn-padding-x: var(--af-space-4);
214
221
  --af-btn-gap: var(--af-space-2);
215
- --af-btn-icon-size: 1.25em;
222
+ --af-btn-icon-size: 1.25rem;
223
+ --af-btn-icon-button-size: var(--af-hit-size);
216
224
  --af-btn-font-weight: var(--af-weight-medium);
217
- --af-btn-border-width: var(--af-border-width);
225
+ --af-btn-border-width: 1px;
226
+ /* Hover darkens in light theme; dark theme flips these toward lighten */
227
+ --af-btn-hover-brightness: 0.9;
228
+ --af-btn-active-brightness: 0.82;
218
229
 
219
230
  --af-btn-default-bg: var(--af-color-primary);
220
231
  --af-btn-default-color: var(--af-color-on-primary);
@@ -223,12 +234,13 @@
223
234
 
224
235
  --af-btn-secondary-bg: var(--af-color-secondary);
225
236
  --af-btn-secondary-color: var(--af-color-on-secondary);
226
- --af-btn-secondary-hover: color-mix(in srgb, var(--af-btn-secondary-bg), black 4%);
227
- --af-btn-secondary-active: color-mix(in srgb, var(--af-btn-secondary-bg), black 8%);
237
+ --af-btn-secondary-hover: var(--af-color-secondary-hover);
238
+ --af-btn-secondary-active: var(--af-color-secondary-active);
228
239
 
229
240
  --af-btn-outline-color: var(--af-color-primary);
230
241
  --af-btn-outline-border: var(--af-color-primary);
231
- --af-btn-outline-hover: var(--af-btn-outline-border);
242
+ --af-btn-outline-hover: var(--af-color-primary-hover);
243
+ --af-btn-outline-hover-bg: var(--af-color-primary-soft);
232
244
  --af-btn-outline-active: color-mix(
233
245
  in srgb,
234
246
  var(--af-color-primary),
@@ -236,19 +248,25 @@
236
248
  );
237
249
 
238
250
  /* Input */
239
- --af-input-min-height: var(--af-control-min-height);
251
+ --af-input-min-height: var(--af-hit-size);
240
252
  --af-input-radius: var(--af-control-radius);
241
253
  --af-input-padding-y: var(--af-control-padding-y);
242
254
  --af-input-padding-x: var(--af-control-padding-x);
255
+ --af-input-border-width: var(--af-control-border-width);
256
+ --af-input-border: var(--af-control-border);
257
+ --af-input-border-hover: var(--af-control-border-hover);
258
+ --af-input-border-focus: var(--af-color-primary);
243
259
  --af-input-font-size: var(--af-text-md);
244
260
  --af-input-leading: var(--af-leading-normal);
245
261
  --af-input-placeholder-color: var(--af-color-text-muted);
246
262
 
247
263
  /* Card */
248
264
  --af-card-radius: var(--af-radius-lg);
249
- --af-card-padding: var(--af-space-4);
265
+ --af-card-padding: var(--af-space-5);
266
+ --af-card-border-width: 1px;
250
267
  --af-card-shadow: var(--af-shadow-sm);
251
268
  --af-card-shadow-hover: var(--af-shadow-md);
269
+ --af-card-gap: var(--af-space-3);
252
270
 
253
271
  /* Focus ring */
254
272
  --af-color-focus: var(--af-color-primary);
@@ -316,7 +334,7 @@
316
334
  var(--af-color-primary),
317
335
  var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))
318
336
  );
319
- --af-color-primary-hard: color-mix(in srgb, var(--af-color-primary), black var(--af-hard-mix));
337
+ --af-color-primary-hard: color-mix(in srgb, var(--af-color-primary), var(--af-hard-toward) var(--af-hard-mix));
320
338
 
321
339
  --af-color-action-hover: color-mix(in srgb, var(--af-color-action), black var(--af-hover-mix));
322
340
  --af-color-action-active: color-mix(
@@ -329,7 +347,7 @@
329
347
  var(--af-color-action),
330
348
  var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))
331
349
  );
332
- --af-color-action-hard: color-mix(in srgb, var(--af-color-action), black var(--af-hard-mix));
350
+ --af-color-action-hard: color-mix(in srgb, var(--af-color-action), var(--af-hard-toward) var(--af-hard-mix));
333
351
 
334
352
  --af-color-secondary-hover: color-mix(
335
353
  in srgb,
@@ -349,7 +367,7 @@
349
367
  --af-color-secondary-hard: color-mix(
350
368
  in srgb,
351
369
  var(--af-color-secondary),
352
- black var(--af-hard-mix)
370
+ var(--af-hard-toward) var(--af-hard-mix)
353
371
  );
354
372
 
355
373
  --af-color-tertiary-hover: color-mix(
@@ -370,7 +388,7 @@
370
388
  --af-color-tertiary-hard: color-mix(
371
389
  in srgb,
372
390
  var(--af-color-tertiary),
373
- black var(--af-hard-mix)
391
+ var(--af-hard-toward) var(--af-hard-mix)
374
392
  );
375
393
 
376
394
  --af-color-success-hover: color-mix(
@@ -388,7 +406,7 @@
388
406
  var(--af-color-success),
389
407
  var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))
390
408
  );
391
- --af-color-success-hard: color-mix(in srgb, var(--af-color-success), black var(--af-hard-mix));
409
+ --af-color-success-hard: color-mix(in srgb, var(--af-color-success), var(--af-hard-toward) var(--af-hard-mix));
392
410
 
393
411
  --af-color-warning-hover: color-mix(
394
412
  in srgb,
@@ -405,7 +423,7 @@
405
423
  var(--af-color-warning),
406
424
  var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))
407
425
  );
408
- --af-color-warning-hard: color-mix(in srgb, var(--af-color-warning), black var(--af-hard-mix));
426
+ --af-color-warning-hard: color-mix(in srgb, var(--af-color-warning), var(--af-hard-toward) var(--af-hard-mix));
409
427
 
410
428
  --af-color-danger-hover: color-mix(in srgb, var(--af-color-danger), black var(--af-hover-mix));
411
429
  --af-color-danger-active: color-mix(
@@ -418,7 +436,7 @@
418
436
  var(--af-color-danger),
419
437
  var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))
420
438
  );
421
- --af-color-danger-hard: color-mix(in srgb, var(--af-color-danger), black var(--af-hard-mix));
439
+ --af-color-danger-hard: color-mix(in srgb, var(--af-color-danger), var(--af-hard-toward) var(--af-hard-mix));
422
440
 
423
441
  --af-color-info-hover: color-mix(in srgb, var(--af-color-info), black var(--af-hover-mix));
424
442
  --af-color-info-active: color-mix(in srgb, var(--af-color-info), black var(--af-active-mix));
@@ -427,7 +445,7 @@
427
445
  var(--af-color-info),
428
446
  var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))
429
447
  );
430
- --af-color-info-hard: color-mix(in srgb, var(--af-color-info), black var(--af-hard-mix));
448
+ --af-color-info-hard: color-mix(in srgb, var(--af-color-info), var(--af-hard-toward) var(--af-hard-mix));
431
449
  }
432
450
 
433
451
  /* Reduced motion support - override timing variables */
@@ -499,11 +517,11 @@
499
517
  /* --- Borders --- */
500
518
  --af-color-border: var(
501
519
  --af-color-border--hc-light,
502
- var(--af-color-border--dark, var(--af-base-neutral-200))
520
+ var(--af-color-border--dark, var(--af-base-neutral-300))
503
521
  );
504
522
  --af-color-border-strong: var(
505
523
  --af-color-border-strong--hc-light,
506
- var(--af-color-border-strong--dark, var(--af-base-neutral-300))
524
+ var(--af-color-border-strong--dark, var(--af-base-neutral-400))
507
525
  );
508
526
  }
509
527
  }
@@ -562,6 +580,16 @@
562
580
 
563
581
  /* --- Intents (override on-success for dark mode) --- */
564
582
  --af-color-on-success--dark: var(--af-color-on-success--hc-dark, var(--af-base-white));
583
+
584
+ /* Primary: lighter blue for contrast on dark surfaces */
585
+ --af-base-primary--dark: var(--af-base-primary--hc-dark, #2463eb);
586
+
587
+ /* Hard emphasis lightens on dark surfaces (chips, badges, inline code) */
588
+ --af-hard-toward: white;
589
+
590
+ /* Button hover lightens on dark surfaces */
591
+ --af-btn-hover-brightness: 1.12;
592
+ --af-btn-active-brightness: 1.2;
565
593
  }
566
594
  }
567
595
 
@@ -626,8 +654,25 @@
626
654
  /* --- Action (optional: override CTA/brand color in dark mode; primary follows) --- */
627
655
  /* --af-color-action--dark: #yourcolor; --af-color-on-action--dark: #fff; */
628
656
 
657
+ /* Primary: lighter blue for contrast on dark surfaces */
658
+ --af-base-primary--dark: var(--af-base-primary--hc-dark, #2463eb);
659
+
660
+ /* Hard emphasis lightens on dark surfaces (chips, badges, inline code) */
661
+ --af-hard-toward: white;
662
+
663
+ /* Button hover lightens on dark surfaces */
664
+ --af-btn-hover-brightness: 1.12;
665
+ --af-btn-active-brightness: 1.2;
666
+
629
667
  /* Derived interaction tokens (hover, active, soft, hard) are defined in base.css */
630
668
  }
669
+
670
+ /* Forced light theme: darken on hover even if OS prefers dark */
671
+ [data-theme='light'] {
672
+ --af-hard-toward: black;
673
+ --af-btn-hover-brightness: 0.9;
674
+ --af-btn-active-brightness: 0.82;
675
+ }
631
676
  }
632
677
 
633
678
 
package/dist/tokens.js CHANGED
@@ -1,10 +1,10 @@
1
1
  export const tokens = {
2
2
  "meta": {
3
3
  "version": "0.0.1",
4
- "generatedAt": "2026-08-09T19:57:44.714Z"
4
+ "generatedAt": "2026-08-11T14:45:39.200Z"
5
5
  },
6
6
  "primitives": {
7
- "base-primary": "#1f3fe0",
7
+ "base-primary": "var(\n --af-base-primary--hc-light,\n var(--af-base-primary--dark, #1f3fe0)\n )",
8
8
  "base-secondary": "#dbe1f4",
9
9
  "base-tertiary": "#111827",
10
10
  "base-success": "#22c55e",
@@ -20,9 +20,9 @@ export const tokens = {
20
20
  "base-neutral-400": "#94a3b8",
21
21
  "base-neutral-500": "#64748b",
22
22
  "base-neutral-600": "#475569",
23
- "base-neutral-700": "#334155",
24
- "base-neutral-800": "#1f2937",
25
- "base-neutral-900": "#111827",
23
+ "base-neutral-700": "#1d2434",
24
+ "base-neutral-800": "#121620",
25
+ "base-neutral-900": "#0d1117",
26
26
  "base-font-sans": "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,\n 'Apple Color Emoji', 'Segoe UI Emoji'",
27
27
  "base-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',\n monospace"
28
28
  },
@@ -98,8 +98,9 @@ export const tokens = {
98
98
  "ease-out": "cubic-bezier(0, 0, 0.2, 1)",
99
99
  "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
100
100
  "ease-linear": "linear",
101
- "border-width": "2px",
101
+ "border-width": "1px",
102
102
  "hit-size": "2.75rem",
103
+ "hard-toward": "black",
103
104
  "layout-gap": "var(--af-space-4)",
104
105
  "container-padding-x": "var(--af-space-4)",
105
106
  "container-max-w": "90em",
@@ -152,6 +153,7 @@ export const tokens = {
152
153
  "choice-size": "1.5rem",
153
154
  "switch-height": "var(--af-choice-size)",
154
155
  "switch-width-ratio": "0.8",
156
+ "switch-thumb-inset": "2px",
155
157
  "color-focus": "var(--af-color-primary)",
156
158
  "color-primary": "var(--af-base-primary)",
157
159
  "color-secondary": "var(--af-base-secondary)",
@@ -172,35 +174,35 @@ export const tokens = {
172
174
  "color-primary-hover": "color-mix(\n in srgb,\n var(--af-color-primary),\n black var(--af-hover-mix)\n )",
173
175
  "color-primary-active": "color-mix(\n in srgb,\n var(--af-color-primary),\n black var(--af-active-mix)\n )",
174
176
  "color-primary-soft": "color-mix(\n in srgb,\n var(--af-color-primary),\n var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))\n )",
175
- "color-primary-hard": "color-mix(in srgb, var(--af-color-primary), black var(--af-hard-mix))",
177
+ "color-primary-hard": "color-mix(in srgb, var(--af-color-primary), var(--af-hard-toward) var(--af-hard-mix))",
176
178
  "color-action-hover": "color-mix(in srgb, var(--af-color-action), black var(--af-hover-mix))",
177
179
  "color-action-active": "color-mix(\n in srgb,\n var(--af-color-action),\n black var(--af-active-mix)\n )",
178
180
  "color-action-soft": "color-mix(\n in srgb,\n var(--af-color-action),\n var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))\n )",
179
- "color-action-hard": "color-mix(in srgb, var(--af-color-action), black var(--af-hard-mix))",
181
+ "color-action-hard": "color-mix(in srgb, var(--af-color-action), var(--af-hard-toward) var(--af-hard-mix))",
180
182
  "color-secondary-hover": "color-mix(\n in srgb,\n var(--af-color-secondary),\n black var(--af-hover-mix)\n )",
181
183
  "color-secondary-active": "color-mix(\n in srgb,\n var(--af-color-secondary),\n black var(--af-active-mix)\n )",
182
184
  "color-secondary-soft": "color-mix(\n in srgb,\n var(--af-color-secondary),\n var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))\n )",
183
- "color-secondary-hard": "color-mix(\n in srgb,\n var(--af-color-secondary),\n black var(--af-hard-mix)\n )",
185
+ "color-secondary-hard": "color-mix(\n in srgb,\n var(--af-color-secondary),\n var(--af-hard-toward) var(--af-hard-mix)\n )",
184
186
  "color-tertiary-hover": "color-mix(\n in srgb,\n var(--af-color-tertiary),\n black var(--af-hover-mix)\n )",
185
187
  "color-tertiary-active": "color-mix(\n in srgb,\n var(--af-color-tertiary),\n black var(--af-active-mix)\n )",
186
188
  "color-tertiary-soft": "color-mix(\n in srgb,\n var(--af-color-tertiary),\n var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))\n )",
187
- "color-tertiary-hard": "color-mix(\n in srgb,\n var(--af-color-tertiary),\n black var(--af-hard-mix)\n )",
189
+ "color-tertiary-hard": "color-mix(\n in srgb,\n var(--af-color-tertiary),\n var(--af-hard-toward) var(--af-hard-mix)\n )",
188
190
  "color-success-hover": "color-mix(\n in srgb,\n var(--af-color-success),\n black var(--af-hover-mix)\n )",
189
191
  "color-success-active": "color-mix(\n in srgb,\n var(--af-color-success),\n black var(--af-active-mix)\n )",
190
192
  "color-success-soft": "color-mix(\n in srgb,\n var(--af-color-success),\n var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))\n )",
191
- "color-success-hard": "color-mix(in srgb, var(--af-color-success), black var(--af-hard-mix))",
193
+ "color-success-hard": "color-mix(in srgb, var(--af-color-success), var(--af-hard-toward) var(--af-hard-mix))",
192
194
  "color-warning-hover": "color-mix(\n in srgb,\n var(--af-color-warning),\n black var(--af-hover-mix)\n )",
193
195
  "color-warning-active": "color-mix(\n in srgb,\n var(--af-color-warning),\n black var(--af-active-mix)\n )",
194
196
  "color-warning-soft": "color-mix(\n in srgb,\n var(--af-color-warning),\n var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))\n )",
195
- "color-warning-hard": "color-mix(in srgb, var(--af-color-warning), black var(--af-hard-mix))",
197
+ "color-warning-hard": "color-mix(in srgb, var(--af-color-warning), var(--af-hard-toward) var(--af-hard-mix))",
196
198
  "color-danger-hover": "color-mix(in srgb, var(--af-color-danger), black var(--af-hover-mix))",
197
199
  "color-danger-active": "color-mix(\n in srgb,\n var(--af-color-danger),\n black var(--af-active-mix)\n )",
198
200
  "color-danger-soft": "color-mix(\n in srgb,\n var(--af-color-danger),\n var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))\n )",
199
- "color-danger-hard": "color-mix(in srgb, var(--af-color-danger), black var(--af-hard-mix))",
201
+ "color-danger-hard": "color-mix(in srgb, var(--af-color-danger), var(--af-hard-toward) var(--af-hard-mix))",
200
202
  "color-info-hover": "color-mix(in srgb, var(--af-color-info), black var(--af-hover-mix))",
201
203
  "color-info-active": "color-mix(in srgb, var(--af-color-info), black var(--af-active-mix))",
202
204
  "color-info-soft": "color-mix(\n in srgb,\n var(--af-color-info),\n var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))\n )",
203
- "color-info-hard": "color-mix(in srgb, var(--af-color-info), black var(--af-hard-mix))",
205
+ "color-info-hard": "color-mix(in srgb, var(--af-color-info), var(--af-hard-toward) var(--af-hard-mix))",
204
206
  "color-background": "var(\n --af-color-background--hc-light,\n var(--af-color-background--dark, var(--af-base-white))\n )",
205
207
  "color-surface-primary": "var(\n --af-color-surface-primary--hc-light,\n var(--af-color-surface-primary--dark, var(--af-base-white))\n )",
206
208
  "color-surface-secondary": "var(\n --af-color-surface-secondary--hc-light,\n var(--af-color-surface-secondary--dark, var(--af-base-neutral-50))\n )",
@@ -211,15 +213,17 @@ export const tokens = {
211
213
  "color-text": "var(\n --af-color-text--hc-light,\n var(--af-color-text--dark, var(--af-base-neutral-900))\n )",
212
214
  "color-text-muted": "var(\n --af-color-text-muted--hc-light,\n var(--af-color-text-muted--dark, var(--af-base-neutral-700))\n )",
213
215
  "color-text-inverse": "var(\n --af-color-text-inverse--hc-light,\n var(--af-color-text-inverse--dark, var(--af-base-white))\n )",
214
- "color-border": "var(\n --af-color-border--hc-light,\n var(--af-color-border--dark, var(--af-base-neutral-200))\n )",
215
- "color-border-strong": "var(\n --af-color-border-strong--hc-light,\n var(--af-color-border-strong--dark, var(--af-base-neutral-300))\n )"
216
+ "color-border": "var(\n --af-color-border--hc-light,\n var(--af-color-border--dark, var(--af-base-neutral-300))\n )",
217
+ "color-border-strong": "var(\n --af-color-border-strong--hc-light,\n var(--af-color-border-strong--dark, var(--af-base-neutral-400))\n )"
216
218
  },
217
219
  "components": {
218
220
  "control-min-height": "auto",
219
- "control-radius": "var(--af-radius-xl)",
221
+ "control-radius": "var(--af-radius-lg)",
220
222
  "control-padding-y": "var(--af-space-2)",
221
223
  "control-padding-x": "var(--af-space-3)",
224
+ "control-border-width": "1px",
222
225
  "control-border": "var(--af-color-border)",
226
+ "control-border-hover": "var(--af-color-border-strong)",
223
227
  "link-primary": "var(--af-color-primary)",
224
228
  "link-hover-primary": "var(--af-color-primary-hover)",
225
229
  "btn-min-height": "var(--af-control-min-height)",
@@ -227,32 +231,42 @@ export const tokens = {
227
231
  "btn-padding-y": "var(--af-control-padding-y)",
228
232
  "btn-padding-x": "var(--af-space-4)",
229
233
  "btn-gap": "var(--af-space-2)",
230
- "btn-icon-size": "1.25em",
234
+ "btn-icon-size": "1.25rem",
235
+ "btn-icon-button-size": "var(--af-hit-size)",
231
236
  "btn-font-weight": "var(--af-weight-medium)",
232
- "btn-border-width": "var(--af-border-width)",
237
+ "btn-border-width": "1px",
238
+ "btn-hover-brightness": "0.9",
239
+ "btn-active-brightness": "0.82",
233
240
  "btn-default-bg": "var(--af-color-primary)",
234
241
  "btn-default-color": "var(--af-color-on-primary)",
235
242
  "btn-default-hover": "var(--af-color-primary-hover)",
236
243
  "btn-default-active": "var(--af-color-primary-active)",
237
244
  "btn-secondary-bg": "var(--af-color-secondary)",
238
245
  "btn-secondary-color": "var(--af-color-on-secondary)",
239
- "btn-secondary-hover": "color-mix(in srgb, var(--af-btn-secondary-bg), black 4%)",
240
- "btn-secondary-active": "color-mix(in srgb, var(--af-btn-secondary-bg), black 8%)",
246
+ "btn-secondary-hover": "var(--af-color-secondary-hover)",
247
+ "btn-secondary-active": "var(--af-color-secondary-active)",
241
248
  "btn-outline-color": "var(--af-color-primary)",
242
249
  "btn-outline-border": "var(--af-color-primary)",
243
- "btn-outline-hover": "var(--af-btn-outline-border)",
250
+ "btn-outline-hover": "var(--af-color-primary-hover)",
251
+ "btn-outline-hover-bg": "var(--af-color-primary-soft)",
244
252
  "btn-outline-active": "color-mix(\n in srgb,\n var(--af-color-primary),\n var(--af-color-surface-primary) 84%\n )",
245
- "input-min-height": "var(--af-control-min-height)",
253
+ "input-min-height": "var(--af-hit-size)",
246
254
  "input-radius": "var(--af-control-radius)",
247
255
  "input-padding-y": "var(--af-control-padding-y)",
248
256
  "input-padding-x": "var(--af-control-padding-x)",
257
+ "input-border-width": "var(--af-control-border-width)",
258
+ "input-border": "var(--af-control-border)",
259
+ "input-border-hover": "var(--af-control-border-hover)",
260
+ "input-border-focus": "var(--af-color-primary)",
249
261
  "input-font-size": "var(--af-text-md)",
250
262
  "input-leading": "var(--af-leading-normal)",
251
263
  "input-placeholder-color": "var(--af-color-text-muted)",
252
264
  "card-radius": "var(--af-radius-lg)",
253
- "card-padding": "var(--af-space-4)",
265
+ "card-padding": "var(--af-space-5)",
266
+ "card-border-width": "1px",
254
267
  "card-shadow": "var(--af-shadow-sm)",
255
268
  "card-shadow-hover": "var(--af-shadow-md)",
269
+ "card-gap": "var(--af-space-3)",
256
270
  "focus-ring-color": "var(--af-color-focus)",
257
271
  "focus-ring-width": "2px",
258
272
  "focus-ring-offset": "2px"
@@ -271,8 +285,8 @@ export const tokens = {
271
285
  "color-text": "var(\n --af-color-text--hc-light,\n var(--af-color-text--dark, var(--af-base-neutral-900))\n )",
272
286
  "color-text-muted": "var(\n --af-color-text-muted--hc-light,\n var(--af-color-text-muted--dark, var(--af-base-neutral-700))\n )",
273
287
  "color-text-inverse": "var(\n --af-color-text-inverse--hc-light,\n var(--af-color-text-inverse--dark, var(--af-base-white))\n )",
274
- "color-border": "var(\n --af-color-border--hc-light,\n var(--af-color-border--dark, var(--af-base-neutral-200))\n )",
275
- "color-border-strong": "var(\n --af-color-border-strong--hc-light,\n var(--af-color-border-strong--dark, var(--af-base-neutral-300))\n )"
288
+ "color-border": "var(\n --af-color-border--hc-light,\n var(--af-color-border--dark, var(--af-base-neutral-300))\n )",
289
+ "color-border-strong": "var(\n --af-color-border-strong--hc-light,\n var(--af-color-border-strong--dark, var(--af-base-neutral-400))\n )"
276
290
  }
277
291
  },
278
292
  "dark": {
@@ -291,6 +305,7 @@ export const tokens = {
291
305
  "color-border--dark": "var(--af-color-border--hc-dark, var(--af-base-neutral-600))",
292
306
  "color-border-strong--dark": "var(\n --af-color-border-strong--hc-dark,\n var(--af-base-neutral-500)\n )",
293
307
  "color-on-success--dark": "var(--af-color-on-success--hc-dark, var(--af-base-white))",
308
+ "hard-toward": "black",
294
309
  "color-action--dark": "#yourcolor",
295
310
  "color-on-action--dark": "#fff"
296
311
  }
package/dist/tokens.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "meta": {
3
3
  "version": "0.0.1",
4
- "generatedAt": "2026-08-09T19:57:44.714Z"
4
+ "generatedAt": "2026-08-11T14:45:39.200Z"
5
5
  },
6
6
  "primitives": {
7
- "base-primary": "#1f3fe0",
7
+ "base-primary": "var(\n --af-base-primary--hc-light,\n var(--af-base-primary--dark, #1f3fe0)\n )",
8
8
  "base-secondary": "#dbe1f4",
9
9
  "base-tertiary": "#111827",
10
10
  "base-success": "#22c55e",
@@ -20,9 +20,9 @@
20
20
  "base-neutral-400": "#94a3b8",
21
21
  "base-neutral-500": "#64748b",
22
22
  "base-neutral-600": "#475569",
23
- "base-neutral-700": "#334155",
24
- "base-neutral-800": "#1f2937",
25
- "base-neutral-900": "#111827",
23
+ "base-neutral-700": "#1d2434",
24
+ "base-neutral-800": "#121620",
25
+ "base-neutral-900": "#0d1117",
26
26
  "base-font-sans": "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,\n 'Apple Color Emoji', 'Segoe UI Emoji'",
27
27
  "base-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',\n monospace"
28
28
  },
@@ -98,8 +98,9 @@
98
98
  "ease-out": "cubic-bezier(0, 0, 0.2, 1)",
99
99
  "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
100
100
  "ease-linear": "linear",
101
- "border-width": "2px",
101
+ "border-width": "1px",
102
102
  "hit-size": "2.75rem",
103
+ "hard-toward": "black",
103
104
  "layout-gap": "var(--af-space-4)",
104
105
  "container-padding-x": "var(--af-space-4)",
105
106
  "container-max-w": "90em",
@@ -152,6 +153,7 @@
152
153
  "choice-size": "1.5rem",
153
154
  "switch-height": "var(--af-choice-size)",
154
155
  "switch-width-ratio": "0.8",
156
+ "switch-thumb-inset": "2px",
155
157
  "color-focus": "var(--af-color-primary)",
156
158
  "color-primary": "var(--af-base-primary)",
157
159
  "color-secondary": "var(--af-base-secondary)",
@@ -172,35 +174,35 @@
172
174
  "color-primary-hover": "color-mix(\n in srgb,\n var(--af-color-primary),\n black var(--af-hover-mix)\n )",
173
175
  "color-primary-active": "color-mix(\n in srgb,\n var(--af-color-primary),\n black var(--af-active-mix)\n )",
174
176
  "color-primary-soft": "color-mix(\n in srgb,\n var(--af-color-primary),\n var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))\n )",
175
- "color-primary-hard": "color-mix(in srgb, var(--af-color-primary), black var(--af-hard-mix))",
177
+ "color-primary-hard": "color-mix(in srgb, var(--af-color-primary), var(--af-hard-toward) var(--af-hard-mix))",
176
178
  "color-action-hover": "color-mix(in srgb, var(--af-color-action), black var(--af-hover-mix))",
177
179
  "color-action-active": "color-mix(\n in srgb,\n var(--af-color-action),\n black var(--af-active-mix)\n )",
178
180
  "color-action-soft": "color-mix(\n in srgb,\n var(--af-color-action),\n var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))\n )",
179
- "color-action-hard": "color-mix(in srgb, var(--af-color-action), black var(--af-hard-mix))",
181
+ "color-action-hard": "color-mix(in srgb, var(--af-color-action), var(--af-hard-toward) var(--af-hard-mix))",
180
182
  "color-secondary-hover": "color-mix(\n in srgb,\n var(--af-color-secondary),\n black var(--af-hover-mix)\n )",
181
183
  "color-secondary-active": "color-mix(\n in srgb,\n var(--af-color-secondary),\n black var(--af-active-mix)\n )",
182
184
  "color-secondary-soft": "color-mix(\n in srgb,\n var(--af-color-secondary),\n var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))\n )",
183
- "color-secondary-hard": "color-mix(\n in srgb,\n var(--af-color-secondary),\n black var(--af-hard-mix)\n )",
185
+ "color-secondary-hard": "color-mix(\n in srgb,\n var(--af-color-secondary),\n var(--af-hard-toward) var(--af-hard-mix)\n )",
184
186
  "color-tertiary-hover": "color-mix(\n in srgb,\n var(--af-color-tertiary),\n black var(--af-hover-mix)\n )",
185
187
  "color-tertiary-active": "color-mix(\n in srgb,\n var(--af-color-tertiary),\n black var(--af-active-mix)\n )",
186
188
  "color-tertiary-soft": "color-mix(\n in srgb,\n var(--af-color-tertiary),\n var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))\n )",
187
- "color-tertiary-hard": "color-mix(\n in srgb,\n var(--af-color-tertiary),\n black var(--af-hard-mix)\n )",
189
+ "color-tertiary-hard": "color-mix(\n in srgb,\n var(--af-color-tertiary),\n var(--af-hard-toward) var(--af-hard-mix)\n )",
188
190
  "color-success-hover": "color-mix(\n in srgb,\n var(--af-color-success),\n black var(--af-hover-mix)\n )",
189
191
  "color-success-active": "color-mix(\n in srgb,\n var(--af-color-success),\n black var(--af-active-mix)\n )",
190
192
  "color-success-soft": "color-mix(\n in srgb,\n var(--af-color-success),\n var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))\n )",
191
- "color-success-hard": "color-mix(in srgb, var(--af-color-success), black var(--af-hard-mix))",
193
+ "color-success-hard": "color-mix(in srgb, var(--af-color-success), var(--af-hard-toward) var(--af-hard-mix))",
192
194
  "color-warning-hover": "color-mix(\n in srgb,\n var(--af-color-warning),\n black var(--af-hover-mix)\n )",
193
195
  "color-warning-active": "color-mix(\n in srgb,\n var(--af-color-warning),\n black var(--af-active-mix)\n )",
194
196
  "color-warning-soft": "color-mix(\n in srgb,\n var(--af-color-warning),\n var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))\n )",
195
- "color-warning-hard": "color-mix(in srgb, var(--af-color-warning), black var(--af-hard-mix))",
197
+ "color-warning-hard": "color-mix(in srgb, var(--af-color-warning), var(--af-hard-toward) var(--af-hard-mix))",
196
198
  "color-danger-hover": "color-mix(in srgb, var(--af-color-danger), black var(--af-hover-mix))",
197
199
  "color-danger-active": "color-mix(\n in srgb,\n var(--af-color-danger),\n black var(--af-active-mix)\n )",
198
200
  "color-danger-soft": "color-mix(\n in srgb,\n var(--af-color-danger),\n var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))\n )",
199
- "color-danger-hard": "color-mix(in srgb, var(--af-color-danger), black var(--af-hard-mix))",
201
+ "color-danger-hard": "color-mix(in srgb, var(--af-color-danger), var(--af-hard-toward) var(--af-hard-mix))",
200
202
  "color-info-hover": "color-mix(in srgb, var(--af-color-info), black var(--af-hover-mix))",
201
203
  "color-info-active": "color-mix(in srgb, var(--af-color-info), black var(--af-active-mix))",
202
204
  "color-info-soft": "color-mix(\n in srgb,\n var(--af-color-info),\n var(--af-color-surface-primary) calc(100% - var(--af-soft-mix))\n )",
203
- "color-info-hard": "color-mix(in srgb, var(--af-color-info), black var(--af-hard-mix))",
205
+ "color-info-hard": "color-mix(in srgb, var(--af-color-info), var(--af-hard-toward) var(--af-hard-mix))",
204
206
  "color-background": "var(\n --af-color-background--hc-light,\n var(--af-color-background--dark, var(--af-base-white))\n )",
205
207
  "color-surface-primary": "var(\n --af-color-surface-primary--hc-light,\n var(--af-color-surface-primary--dark, var(--af-base-white))\n )",
206
208
  "color-surface-secondary": "var(\n --af-color-surface-secondary--hc-light,\n var(--af-color-surface-secondary--dark, var(--af-base-neutral-50))\n )",
@@ -211,15 +213,17 @@
211
213
  "color-text": "var(\n --af-color-text--hc-light,\n var(--af-color-text--dark, var(--af-base-neutral-900))\n )",
212
214
  "color-text-muted": "var(\n --af-color-text-muted--hc-light,\n var(--af-color-text-muted--dark, var(--af-base-neutral-700))\n )",
213
215
  "color-text-inverse": "var(\n --af-color-text-inverse--hc-light,\n var(--af-color-text-inverse--dark, var(--af-base-white))\n )",
214
- "color-border": "var(\n --af-color-border--hc-light,\n var(--af-color-border--dark, var(--af-base-neutral-200))\n )",
215
- "color-border-strong": "var(\n --af-color-border-strong--hc-light,\n var(--af-color-border-strong--dark, var(--af-base-neutral-300))\n )"
216
+ "color-border": "var(\n --af-color-border--hc-light,\n var(--af-color-border--dark, var(--af-base-neutral-300))\n )",
217
+ "color-border-strong": "var(\n --af-color-border-strong--hc-light,\n var(--af-color-border-strong--dark, var(--af-base-neutral-400))\n )"
216
218
  },
217
219
  "components": {
218
220
  "control-min-height": "auto",
219
- "control-radius": "var(--af-radius-xl)",
221
+ "control-radius": "var(--af-radius-lg)",
220
222
  "control-padding-y": "var(--af-space-2)",
221
223
  "control-padding-x": "var(--af-space-3)",
224
+ "control-border-width": "1px",
222
225
  "control-border": "var(--af-color-border)",
226
+ "control-border-hover": "var(--af-color-border-strong)",
223
227
  "link-primary": "var(--af-color-primary)",
224
228
  "link-hover-primary": "var(--af-color-primary-hover)",
225
229
  "btn-min-height": "var(--af-control-min-height)",
@@ -227,32 +231,42 @@
227
231
  "btn-padding-y": "var(--af-control-padding-y)",
228
232
  "btn-padding-x": "var(--af-space-4)",
229
233
  "btn-gap": "var(--af-space-2)",
230
- "btn-icon-size": "1.25em",
234
+ "btn-icon-size": "1.25rem",
235
+ "btn-icon-button-size": "var(--af-hit-size)",
231
236
  "btn-font-weight": "var(--af-weight-medium)",
232
- "btn-border-width": "var(--af-border-width)",
237
+ "btn-border-width": "1px",
238
+ "btn-hover-brightness": "0.9",
239
+ "btn-active-brightness": "0.82",
233
240
  "btn-default-bg": "var(--af-color-primary)",
234
241
  "btn-default-color": "var(--af-color-on-primary)",
235
242
  "btn-default-hover": "var(--af-color-primary-hover)",
236
243
  "btn-default-active": "var(--af-color-primary-active)",
237
244
  "btn-secondary-bg": "var(--af-color-secondary)",
238
245
  "btn-secondary-color": "var(--af-color-on-secondary)",
239
- "btn-secondary-hover": "color-mix(in srgb, var(--af-btn-secondary-bg), black 4%)",
240
- "btn-secondary-active": "color-mix(in srgb, var(--af-btn-secondary-bg), black 8%)",
246
+ "btn-secondary-hover": "var(--af-color-secondary-hover)",
247
+ "btn-secondary-active": "var(--af-color-secondary-active)",
241
248
  "btn-outline-color": "var(--af-color-primary)",
242
249
  "btn-outline-border": "var(--af-color-primary)",
243
- "btn-outline-hover": "var(--af-btn-outline-border)",
250
+ "btn-outline-hover": "var(--af-color-primary-hover)",
251
+ "btn-outline-hover-bg": "var(--af-color-primary-soft)",
244
252
  "btn-outline-active": "color-mix(\n in srgb,\n var(--af-color-primary),\n var(--af-color-surface-primary) 84%\n )",
245
- "input-min-height": "var(--af-control-min-height)",
253
+ "input-min-height": "var(--af-hit-size)",
246
254
  "input-radius": "var(--af-control-radius)",
247
255
  "input-padding-y": "var(--af-control-padding-y)",
248
256
  "input-padding-x": "var(--af-control-padding-x)",
257
+ "input-border-width": "var(--af-control-border-width)",
258
+ "input-border": "var(--af-control-border)",
259
+ "input-border-hover": "var(--af-control-border-hover)",
260
+ "input-border-focus": "var(--af-color-primary)",
249
261
  "input-font-size": "var(--af-text-md)",
250
262
  "input-leading": "var(--af-leading-normal)",
251
263
  "input-placeholder-color": "var(--af-color-text-muted)",
252
264
  "card-radius": "var(--af-radius-lg)",
253
- "card-padding": "var(--af-space-4)",
265
+ "card-padding": "var(--af-space-5)",
266
+ "card-border-width": "1px",
254
267
  "card-shadow": "var(--af-shadow-sm)",
255
268
  "card-shadow-hover": "var(--af-shadow-md)",
269
+ "card-gap": "var(--af-space-3)",
256
270
  "focus-ring-color": "var(--af-color-focus)",
257
271
  "focus-ring-width": "2px",
258
272
  "focus-ring-offset": "2px"
@@ -271,8 +285,8 @@
271
285
  "color-text": "var(\n --af-color-text--hc-light,\n var(--af-color-text--dark, var(--af-base-neutral-900))\n )",
272
286
  "color-text-muted": "var(\n --af-color-text-muted--hc-light,\n var(--af-color-text-muted--dark, var(--af-base-neutral-700))\n )",
273
287
  "color-text-inverse": "var(\n --af-color-text-inverse--hc-light,\n var(--af-color-text-inverse--dark, var(--af-base-white))\n )",
274
- "color-border": "var(\n --af-color-border--hc-light,\n var(--af-color-border--dark, var(--af-base-neutral-200))\n )",
275
- "color-border-strong": "var(\n --af-color-border-strong--hc-light,\n var(--af-color-border-strong--dark, var(--af-base-neutral-300))\n )"
288
+ "color-border": "var(\n --af-color-border--hc-light,\n var(--af-color-border--dark, var(--af-base-neutral-300))\n )",
289
+ "color-border-strong": "var(\n --af-color-border-strong--hc-light,\n var(--af-color-border-strong--dark, var(--af-base-neutral-400))\n )"
276
290
  }
277
291
  },
278
292
  "dark": {
@@ -291,6 +305,7 @@
291
305
  "color-border--dark": "var(--af-color-border--hc-dark, var(--af-base-neutral-600))",
292
306
  "color-border-strong--dark": "var(\n --af-color-border-strong--hc-dark,\n var(--af-base-neutral-500)\n )",
293
307
  "color-on-success--dark": "var(--af-color-on-success--hc-dark, var(--af-base-white))",
308
+ "hard-toward": "black",
294
309
  "color-action--dark": "#yourcolor",
295
310
  "color-on-action--dark": "#fff"
296
311
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@airframeui/tokens",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "description": "Design tokens for Airframe UI — CSS variables, JSON, and typed exports used by @airframeui/core",
5
5
  "license": "MIT",
6
6
  "homepage": "https://airframeui.com",