@airframeui/tokens 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -4
- package/dist/catalog.json +60 -24
- package/dist/tokens.css +1006 -982
- package/dist/tokens.js +77 -36
- package/dist/tokens.json +77 -36
- package/package.json +2 -2
package/dist/tokens.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export const tokens = {
|
|
2
2
|
"meta": {
|
|
3
3
|
"version": "0.0.1",
|
|
4
|
-
"generatedAt": "2026-08-
|
|
4
|
+
"generatedAt": "2026-08-22T07:15:44.406Z"
|
|
5
5
|
},
|
|
6
6
|
"primitives": {
|
|
7
7
|
"base-primary--light": "#0876dd",
|
|
@@ -59,11 +59,13 @@ export const tokens = {
|
|
|
59
59
|
"space-7": "40px",
|
|
60
60
|
"space-8": "48px",
|
|
61
61
|
"radius-0": "0px",
|
|
62
|
-
"radius-sm": "
|
|
63
|
-
"radius-md": "
|
|
64
|
-
"radius-lg": "
|
|
65
|
-
"radius-xl": "
|
|
62
|
+
"radius-sm": "4px",
|
|
63
|
+
"radius-md": "8px",
|
|
64
|
+
"radius-lg": "12px",
|
|
65
|
+
"radius-xl": "16px",
|
|
66
66
|
"radius-full": "9999px",
|
|
67
|
+
"radius": "var(--af-radius-md)",
|
|
68
|
+
"pill-radius": "var(--af-radius-full)",
|
|
67
69
|
"font-primary": "var(--af-base-font-sans)",
|
|
68
70
|
"font-mono": "var(--af-base-font-mono)",
|
|
69
71
|
"text-xs": "0.75rem",
|
|
@@ -165,6 +167,8 @@ export const tokens = {
|
|
|
165
167
|
"switch-height": "var(--af-choice-size)",
|
|
166
168
|
"switch-width-ratio": "0.8",
|
|
167
169
|
"switch-thumb-inset": "2px",
|
|
170
|
+
"range-track-height": "0.625rem",
|
|
171
|
+
"range-thumb-size": "1.25rem",
|
|
168
172
|
"color-focus": "var(--af-color-primary)",
|
|
169
173
|
"color-primary": "var(--af-base-primary)",
|
|
170
174
|
"color-secondary": "var(--af-base-secondary)",
|
|
@@ -247,11 +251,11 @@ export const tokens = {
|
|
|
247
251
|
"color-border-strong": "var(--af-color-border-strong--light)"
|
|
248
252
|
},
|
|
249
253
|
"components": {
|
|
250
|
-
"control-min-height": "
|
|
251
|
-
"control-radius": "var(--af-radius
|
|
254
|
+
"control-min-height": "var(--af-hit-size)",
|
|
255
|
+
"control-radius": "var(--af-radius)",
|
|
252
256
|
"control-padding-y": "var(--af-space-2)",
|
|
253
257
|
"control-padding-x": "var(--af-space-3)",
|
|
254
|
-
"control-border-width": "
|
|
258
|
+
"control-border-width": "var(--af-border-width)",
|
|
255
259
|
"control-border": "var(--af-color-border)",
|
|
256
260
|
"control-border-hover": "var(--af-color-border-strong)",
|
|
257
261
|
"link-primary": "var(--af-color-primary)",
|
|
@@ -259,14 +263,14 @@ export const tokens = {
|
|
|
259
263
|
"link-decoration": "underline",
|
|
260
264
|
"link-hover-decoration": "underline",
|
|
261
265
|
"btn-min-height": "var(--af-control-min-height)",
|
|
262
|
-
"btn-radius": "var(--af-radius
|
|
266
|
+
"btn-radius": "var(--af-radius)",
|
|
263
267
|
"btn-padding-y": "var(--af-control-padding-y)",
|
|
264
268
|
"btn-padding-x": "var(--af-space-4)",
|
|
265
269
|
"btn-gap": "var(--af-space-2)",
|
|
266
270
|
"btn-icon-size": "1.25rem",
|
|
267
271
|
"btn-icon-button-size": "var(--af-hit-size)",
|
|
268
272
|
"btn-font-weight": "var(--af-weight-medium)",
|
|
269
|
-
"btn-border-width": "
|
|
273
|
+
"btn-border-width": "var(--af-border-width)",
|
|
270
274
|
"btn-border": "transparent",
|
|
271
275
|
"btn-border-hover": "initial",
|
|
272
276
|
"btn-border-focus": "initial",
|
|
@@ -319,7 +323,7 @@ export const tokens = {
|
|
|
319
323
|
"input-font-size": "var(--af-text-md)",
|
|
320
324
|
"input-leading": "var(--af-leading-normal)",
|
|
321
325
|
"input-placeholder-color": "var(--af-color-text-muted)",
|
|
322
|
-
"card-radius": "var(--af-radius
|
|
326
|
+
"card-radius": "var(--af-radius)",
|
|
323
327
|
"card-padding": "var(--af-space-5)",
|
|
324
328
|
"card-border-width": "1px",
|
|
325
329
|
"card-shadow": "var(--af-shadow-sm)",
|
|
@@ -356,7 +360,8 @@ export const tokens = {
|
|
|
356
360
|
"color-text-muted": "var(--af-color-text-muted--light)",
|
|
357
361
|
"color-text-inverse": "var(--af-color-text-inverse--light)",
|
|
358
362
|
"color-border": "var(--af-color-border--light)",
|
|
359
|
-
"color-border-strong": "var(--af-color-border-strong--light)"
|
|
363
|
+
"color-border-strong": "var(--af-color-border-strong--light)",
|
|
364
|
+
"hard-toward": "black"
|
|
360
365
|
}
|
|
361
366
|
},
|
|
362
367
|
"dark": {
|
|
@@ -470,8 +475,8 @@ export const tokens = {
|
|
|
470
475
|
},
|
|
471
476
|
"catalog": {
|
|
472
477
|
"meta": {
|
|
473
|
-
"generatedAt": "2026-08-
|
|
474
|
-
"count":
|
|
478
|
+
"generatedAt": "2026-08-22T07:15:44.406Z",
|
|
479
|
+
"count": 366
|
|
475
480
|
},
|
|
476
481
|
"groups": [
|
|
477
482
|
{
|
|
@@ -1205,8 +1210,8 @@ export const tokens = {
|
|
|
1205
1210
|
"category": "component",
|
|
1206
1211
|
"group": "component",
|
|
1207
1212
|
"kind": "static",
|
|
1208
|
-
"description": "af-btn border width.",
|
|
1209
|
-
"value": "
|
|
1213
|
+
"description": "af-btn border width. Defaults to --af-border-width.",
|
|
1214
|
+
"value": "var(--af-border-width)"
|
|
1210
1215
|
},
|
|
1211
1216
|
{
|
|
1212
1217
|
"name": "--af-btn-danger-border",
|
|
@@ -1565,8 +1570,8 @@ export const tokens = {
|
|
|
1565
1570
|
"category": "component",
|
|
1566
1571
|
"group": "component",
|
|
1567
1572
|
"kind": "static",
|
|
1568
|
-
"description": "af-btn corner radius
|
|
1569
|
-
"value": "var(--af-radius
|
|
1573
|
+
"description": "af-btn corner radius. Defaults to --af-radius. Set to --af-pill-radius for pills.",
|
|
1574
|
+
"value": "var(--af-radius)"
|
|
1570
1575
|
},
|
|
1571
1576
|
{
|
|
1572
1577
|
"name": "--af-btn-secondary-active",
|
|
@@ -1793,8 +1798,8 @@ export const tokens = {
|
|
|
1793
1798
|
"category": "component",
|
|
1794
1799
|
"group": "component",
|
|
1795
1800
|
"kind": "static",
|
|
1796
|
-
"description": "af-card corner radius.",
|
|
1797
|
-
"value": "var(--af-radius
|
|
1801
|
+
"description": "af-card corner radius. Defaults to --af-radius.",
|
|
1802
|
+
"value": "var(--af-radius)"
|
|
1798
1803
|
},
|
|
1799
1804
|
{
|
|
1800
1805
|
"name": "--af-card-shadow",
|
|
@@ -3992,8 +3997,8 @@ export const tokens = {
|
|
|
3992
3997
|
"category": "component",
|
|
3993
3998
|
"group": "component",
|
|
3994
3999
|
"kind": "static",
|
|
3995
|
-
"description": "Shared form-control border width.",
|
|
3996
|
-
"value": "
|
|
4000
|
+
"description": "Shared form-control border width. Defaults to --af-border-width.",
|
|
4001
|
+
"value": "var(--af-border-width)"
|
|
3997
4002
|
},
|
|
3998
4003
|
{
|
|
3999
4004
|
"name": "--af-control-min-height",
|
|
@@ -4002,7 +4007,7 @@ export const tokens = {
|
|
|
4002
4007
|
"group": "component",
|
|
4003
4008
|
"kind": "static",
|
|
4004
4009
|
"description": "Shared form-control min-height (default auto). Inputs use --af-input-min-height instead.",
|
|
4005
|
-
"value": "
|
|
4010
|
+
"value": "var(--af-hit-size)"
|
|
4006
4011
|
},
|
|
4007
4012
|
{
|
|
4008
4013
|
"name": "--af-control-padding-x",
|
|
@@ -4028,8 +4033,8 @@ export const tokens = {
|
|
|
4028
4033
|
"category": "component",
|
|
4029
4034
|
"group": "component",
|
|
4030
4035
|
"kind": "static",
|
|
4031
|
-
"description": "Shared form-control radius (inputs, selects).",
|
|
4032
|
-
"value": "var(--af-radius
|
|
4036
|
+
"description": "Shared form-control radius (inputs, selects). Defaults to --af-radius.",
|
|
4037
|
+
"value": "var(--af-radius)"
|
|
4033
4038
|
},
|
|
4034
4039
|
{
|
|
4035
4040
|
"name": "--af-divider-spacing",
|
|
@@ -4331,7 +4336,7 @@ export const tokens = {
|
|
|
4331
4336
|
"category": "component",
|
|
4332
4337
|
"group": "component",
|
|
4333
4338
|
"kind": "static",
|
|
4334
|
-
"description": "Text input border width.",
|
|
4339
|
+
"description": "Text input border width. Defaults to --af-control-border-width, then --af-border-width.",
|
|
4335
4340
|
"value": "var(--af-control-border-width)"
|
|
4336
4341
|
},
|
|
4337
4342
|
{
|
|
@@ -4406,7 +4411,7 @@ export const tokens = {
|
|
|
4406
4411
|
"category": "component",
|
|
4407
4412
|
"group": "component",
|
|
4408
4413
|
"kind": "static",
|
|
4409
|
-
"description": "Text input corner radius.",
|
|
4414
|
+
"description": "Text input corner radius. Defaults to --af-control-radius, then --af-radius.",
|
|
4410
4415
|
"value": "var(--af-control-radius)"
|
|
4411
4416
|
},
|
|
4412
4417
|
{
|
|
@@ -4505,6 +4510,24 @@ export const tokens = {
|
|
|
4505
4510
|
"hc-dark": "#1678d4"
|
|
4506
4511
|
}
|
|
4507
4512
|
},
|
|
4513
|
+
{
|
|
4514
|
+
"name": "--af-pill-radius",
|
|
4515
|
+
"key": "pill-radius",
|
|
4516
|
+
"category": "semantic",
|
|
4517
|
+
"group": "space",
|
|
4518
|
+
"kind": "static",
|
|
4519
|
+
"description": "Capsule / pill radius. Used by af-pill, steps, and .af-radius-full. Defaults to --af-radius-full. Set --af-btn-radius to this for pill buttons.",
|
|
4520
|
+
"value": "var(--af-radius-full)"
|
|
4521
|
+
},
|
|
4522
|
+
{
|
|
4523
|
+
"name": "--af-radius",
|
|
4524
|
+
"key": "radius",
|
|
4525
|
+
"category": "semantic",
|
|
4526
|
+
"group": "space",
|
|
4527
|
+
"kind": "static",
|
|
4528
|
+
"description": "Default corner radius for cards, controls, buttons, dialogs, and surfaces. Override this to retheme the product. Set --af-btn-radius to --af-pill-radius for pill buttons.",
|
|
4529
|
+
"value": "var(--af-radius-md)"
|
|
4530
|
+
},
|
|
4508
4531
|
{
|
|
4509
4532
|
"name": "--af-radius-0",
|
|
4510
4533
|
"key": "radius-0",
|
|
@@ -4520,7 +4543,7 @@ export const tokens = {
|
|
|
4520
4543
|
"category": "semantic",
|
|
4521
4544
|
"group": "space",
|
|
4522
4545
|
"kind": "static",
|
|
4523
|
-
"description": "
|
|
4546
|
+
"description": "Scale step for a capsule (9999px). Prefer --af-pill-radius in CSS.",
|
|
4524
4547
|
"value": "9999px"
|
|
4525
4548
|
},
|
|
4526
4549
|
{
|
|
@@ -4529,8 +4552,8 @@ export const tokens = {
|
|
|
4529
4552
|
"category": "semantic",
|
|
4530
4553
|
"group": "space",
|
|
4531
4554
|
"kind": "static",
|
|
4532
|
-
"description": "Large radius —
|
|
4533
|
-
"value": "
|
|
4555
|
+
"description": "Large radius (12px) — cards and dialogs when you want more rounding than --af-radius.",
|
|
4556
|
+
"value": "12px"
|
|
4534
4557
|
},
|
|
4535
4558
|
{
|
|
4536
4559
|
"name": "--af-radius-md",
|
|
@@ -4538,8 +4561,8 @@ export const tokens = {
|
|
|
4538
4561
|
"category": "semantic",
|
|
4539
4562
|
"group": "space",
|
|
4540
4563
|
"kind": "static",
|
|
4541
|
-
"description": "Medium radius
|
|
4542
|
-
"value": "
|
|
4564
|
+
"description": "Medium radius (8px). Default source for --af-radius.",
|
|
4565
|
+
"value": "8px"
|
|
4543
4566
|
},
|
|
4544
4567
|
{
|
|
4545
4568
|
"name": "--af-radius-sm",
|
|
@@ -4547,8 +4570,8 @@ export const tokens = {
|
|
|
4547
4570
|
"category": "semantic",
|
|
4548
4571
|
"group": "space",
|
|
4549
4572
|
"kind": "static",
|
|
4550
|
-
"description": "Small radius — chips,
|
|
4551
|
-
"value": "
|
|
4573
|
+
"description": "Small radius (4px) — chips, badges, kbd, tooltips. Compact chrome; does not follow --af-radius.",
|
|
4574
|
+
"value": "4px"
|
|
4552
4575
|
},
|
|
4553
4576
|
{
|
|
4554
4577
|
"name": "--af-radius-xl",
|
|
@@ -4556,8 +4579,26 @@ export const tokens = {
|
|
|
4556
4579
|
"category": "semantic",
|
|
4557
4580
|
"group": "space",
|
|
4558
4581
|
"kind": "static",
|
|
4559
|
-
"description": "Extra-large radius — large panels.",
|
|
4560
|
-
"value": "
|
|
4582
|
+
"description": "Extra-large radius (16px) — large panels.",
|
|
4583
|
+
"value": "16px"
|
|
4584
|
+
},
|
|
4585
|
+
{
|
|
4586
|
+
"name": "--af-range-thumb-size",
|
|
4587
|
+
"key": "range-thumb-size",
|
|
4588
|
+
"category": "semantic",
|
|
4589
|
+
"group": "other",
|
|
4590
|
+
"kind": "static",
|
|
4591
|
+
"description": "Range slider thumb diameter. Also the control height.",
|
|
4592
|
+
"value": "1.25rem"
|
|
4593
|
+
},
|
|
4594
|
+
{
|
|
4595
|
+
"name": "--af-range-track-height",
|
|
4596
|
+
"key": "range-track-height",
|
|
4597
|
+
"category": "semantic",
|
|
4598
|
+
"group": "other",
|
|
4599
|
+
"kind": "static",
|
|
4600
|
+
"description": "Range slider track thickness.",
|
|
4601
|
+
"value": "0.625rem"
|
|
4561
4602
|
},
|
|
4562
4603
|
{
|
|
4563
4604
|
"name": "--af-shadow-lg",
|
package/dist/tokens.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"meta": {
|
|
3
3
|
"version": "0.0.1",
|
|
4
|
-
"generatedAt": "2026-08-
|
|
4
|
+
"generatedAt": "2026-08-22T07:15:44.406Z"
|
|
5
5
|
},
|
|
6
6
|
"primitives": {
|
|
7
7
|
"base-primary--light": "#0876dd",
|
|
@@ -59,11 +59,13 @@
|
|
|
59
59
|
"space-7": "40px",
|
|
60
60
|
"space-8": "48px",
|
|
61
61
|
"radius-0": "0px",
|
|
62
|
-
"radius-sm": "
|
|
63
|
-
"radius-md": "
|
|
64
|
-
"radius-lg": "
|
|
65
|
-
"radius-xl": "
|
|
62
|
+
"radius-sm": "4px",
|
|
63
|
+
"radius-md": "8px",
|
|
64
|
+
"radius-lg": "12px",
|
|
65
|
+
"radius-xl": "16px",
|
|
66
66
|
"radius-full": "9999px",
|
|
67
|
+
"radius": "var(--af-radius-md)",
|
|
68
|
+
"pill-radius": "var(--af-radius-full)",
|
|
67
69
|
"font-primary": "var(--af-base-font-sans)",
|
|
68
70
|
"font-mono": "var(--af-base-font-mono)",
|
|
69
71
|
"text-xs": "0.75rem",
|
|
@@ -165,6 +167,8 @@
|
|
|
165
167
|
"switch-height": "var(--af-choice-size)",
|
|
166
168
|
"switch-width-ratio": "0.8",
|
|
167
169
|
"switch-thumb-inset": "2px",
|
|
170
|
+
"range-track-height": "0.625rem",
|
|
171
|
+
"range-thumb-size": "1.25rem",
|
|
168
172
|
"color-focus": "var(--af-color-primary)",
|
|
169
173
|
"color-primary": "var(--af-base-primary)",
|
|
170
174
|
"color-secondary": "var(--af-base-secondary)",
|
|
@@ -247,11 +251,11 @@
|
|
|
247
251
|
"color-border-strong": "var(--af-color-border-strong--light)"
|
|
248
252
|
},
|
|
249
253
|
"components": {
|
|
250
|
-
"control-min-height": "
|
|
251
|
-
"control-radius": "var(--af-radius
|
|
254
|
+
"control-min-height": "var(--af-hit-size)",
|
|
255
|
+
"control-radius": "var(--af-radius)",
|
|
252
256
|
"control-padding-y": "var(--af-space-2)",
|
|
253
257
|
"control-padding-x": "var(--af-space-3)",
|
|
254
|
-
"control-border-width": "
|
|
258
|
+
"control-border-width": "var(--af-border-width)",
|
|
255
259
|
"control-border": "var(--af-color-border)",
|
|
256
260
|
"control-border-hover": "var(--af-color-border-strong)",
|
|
257
261
|
"link-primary": "var(--af-color-primary)",
|
|
@@ -259,14 +263,14 @@
|
|
|
259
263
|
"link-decoration": "underline",
|
|
260
264
|
"link-hover-decoration": "underline",
|
|
261
265
|
"btn-min-height": "var(--af-control-min-height)",
|
|
262
|
-
"btn-radius": "var(--af-radius
|
|
266
|
+
"btn-radius": "var(--af-radius)",
|
|
263
267
|
"btn-padding-y": "var(--af-control-padding-y)",
|
|
264
268
|
"btn-padding-x": "var(--af-space-4)",
|
|
265
269
|
"btn-gap": "var(--af-space-2)",
|
|
266
270
|
"btn-icon-size": "1.25rem",
|
|
267
271
|
"btn-icon-button-size": "var(--af-hit-size)",
|
|
268
272
|
"btn-font-weight": "var(--af-weight-medium)",
|
|
269
|
-
"btn-border-width": "
|
|
273
|
+
"btn-border-width": "var(--af-border-width)",
|
|
270
274
|
"btn-border": "transparent",
|
|
271
275
|
"btn-border-hover": "initial",
|
|
272
276
|
"btn-border-focus": "initial",
|
|
@@ -319,7 +323,7 @@
|
|
|
319
323
|
"input-font-size": "var(--af-text-md)",
|
|
320
324
|
"input-leading": "var(--af-leading-normal)",
|
|
321
325
|
"input-placeholder-color": "var(--af-color-text-muted)",
|
|
322
|
-
"card-radius": "var(--af-radius
|
|
326
|
+
"card-radius": "var(--af-radius)",
|
|
323
327
|
"card-padding": "var(--af-space-5)",
|
|
324
328
|
"card-border-width": "1px",
|
|
325
329
|
"card-shadow": "var(--af-shadow-sm)",
|
|
@@ -356,7 +360,8 @@
|
|
|
356
360
|
"color-text-muted": "var(--af-color-text-muted--light)",
|
|
357
361
|
"color-text-inverse": "var(--af-color-text-inverse--light)",
|
|
358
362
|
"color-border": "var(--af-color-border--light)",
|
|
359
|
-
"color-border-strong": "var(--af-color-border-strong--light)"
|
|
363
|
+
"color-border-strong": "var(--af-color-border-strong--light)",
|
|
364
|
+
"hard-toward": "black"
|
|
360
365
|
}
|
|
361
366
|
},
|
|
362
367
|
"dark": {
|
|
@@ -470,8 +475,8 @@
|
|
|
470
475
|
},
|
|
471
476
|
"catalog": {
|
|
472
477
|
"meta": {
|
|
473
|
-
"generatedAt": "2026-08-
|
|
474
|
-
"count":
|
|
478
|
+
"generatedAt": "2026-08-22T07:15:44.406Z",
|
|
479
|
+
"count": 366
|
|
475
480
|
},
|
|
476
481
|
"groups": [
|
|
477
482
|
{
|
|
@@ -1205,8 +1210,8 @@
|
|
|
1205
1210
|
"category": "component",
|
|
1206
1211
|
"group": "component",
|
|
1207
1212
|
"kind": "static",
|
|
1208
|
-
"description": "af-btn border width.",
|
|
1209
|
-
"value": "
|
|
1213
|
+
"description": "af-btn border width. Defaults to --af-border-width.",
|
|
1214
|
+
"value": "var(--af-border-width)"
|
|
1210
1215
|
},
|
|
1211
1216
|
{
|
|
1212
1217
|
"name": "--af-btn-danger-border",
|
|
@@ -1565,8 +1570,8 @@
|
|
|
1565
1570
|
"category": "component",
|
|
1566
1571
|
"group": "component",
|
|
1567
1572
|
"kind": "static",
|
|
1568
|
-
"description": "af-btn corner radius
|
|
1569
|
-
"value": "var(--af-radius
|
|
1573
|
+
"description": "af-btn corner radius. Defaults to --af-radius. Set to --af-pill-radius for pills.",
|
|
1574
|
+
"value": "var(--af-radius)"
|
|
1570
1575
|
},
|
|
1571
1576
|
{
|
|
1572
1577
|
"name": "--af-btn-secondary-active",
|
|
@@ -1793,8 +1798,8 @@
|
|
|
1793
1798
|
"category": "component",
|
|
1794
1799
|
"group": "component",
|
|
1795
1800
|
"kind": "static",
|
|
1796
|
-
"description": "af-card corner radius.",
|
|
1797
|
-
"value": "var(--af-radius
|
|
1801
|
+
"description": "af-card corner radius. Defaults to --af-radius.",
|
|
1802
|
+
"value": "var(--af-radius)"
|
|
1798
1803
|
},
|
|
1799
1804
|
{
|
|
1800
1805
|
"name": "--af-card-shadow",
|
|
@@ -3992,8 +3997,8 @@
|
|
|
3992
3997
|
"category": "component",
|
|
3993
3998
|
"group": "component",
|
|
3994
3999
|
"kind": "static",
|
|
3995
|
-
"description": "Shared form-control border width.",
|
|
3996
|
-
"value": "
|
|
4000
|
+
"description": "Shared form-control border width. Defaults to --af-border-width.",
|
|
4001
|
+
"value": "var(--af-border-width)"
|
|
3997
4002
|
},
|
|
3998
4003
|
{
|
|
3999
4004
|
"name": "--af-control-min-height",
|
|
@@ -4002,7 +4007,7 @@
|
|
|
4002
4007
|
"group": "component",
|
|
4003
4008
|
"kind": "static",
|
|
4004
4009
|
"description": "Shared form-control min-height (default auto). Inputs use --af-input-min-height instead.",
|
|
4005
|
-
"value": "
|
|
4010
|
+
"value": "var(--af-hit-size)"
|
|
4006
4011
|
},
|
|
4007
4012
|
{
|
|
4008
4013
|
"name": "--af-control-padding-x",
|
|
@@ -4028,8 +4033,8 @@
|
|
|
4028
4033
|
"category": "component",
|
|
4029
4034
|
"group": "component",
|
|
4030
4035
|
"kind": "static",
|
|
4031
|
-
"description": "Shared form-control radius (inputs, selects).",
|
|
4032
|
-
"value": "var(--af-radius
|
|
4036
|
+
"description": "Shared form-control radius (inputs, selects). Defaults to --af-radius.",
|
|
4037
|
+
"value": "var(--af-radius)"
|
|
4033
4038
|
},
|
|
4034
4039
|
{
|
|
4035
4040
|
"name": "--af-divider-spacing",
|
|
@@ -4331,7 +4336,7 @@
|
|
|
4331
4336
|
"category": "component",
|
|
4332
4337
|
"group": "component",
|
|
4333
4338
|
"kind": "static",
|
|
4334
|
-
"description": "Text input border width.",
|
|
4339
|
+
"description": "Text input border width. Defaults to --af-control-border-width, then --af-border-width.",
|
|
4335
4340
|
"value": "var(--af-control-border-width)"
|
|
4336
4341
|
},
|
|
4337
4342
|
{
|
|
@@ -4406,7 +4411,7 @@
|
|
|
4406
4411
|
"category": "component",
|
|
4407
4412
|
"group": "component",
|
|
4408
4413
|
"kind": "static",
|
|
4409
|
-
"description": "Text input corner radius.",
|
|
4414
|
+
"description": "Text input corner radius. Defaults to --af-control-radius, then --af-radius.",
|
|
4410
4415
|
"value": "var(--af-control-radius)"
|
|
4411
4416
|
},
|
|
4412
4417
|
{
|
|
@@ -4505,6 +4510,24 @@
|
|
|
4505
4510
|
"hc-dark": "#1678d4"
|
|
4506
4511
|
}
|
|
4507
4512
|
},
|
|
4513
|
+
{
|
|
4514
|
+
"name": "--af-pill-radius",
|
|
4515
|
+
"key": "pill-radius",
|
|
4516
|
+
"category": "semantic",
|
|
4517
|
+
"group": "space",
|
|
4518
|
+
"kind": "static",
|
|
4519
|
+
"description": "Capsule / pill radius. Used by af-pill, steps, and .af-radius-full. Defaults to --af-radius-full. Set --af-btn-radius to this for pill buttons.",
|
|
4520
|
+
"value": "var(--af-radius-full)"
|
|
4521
|
+
},
|
|
4522
|
+
{
|
|
4523
|
+
"name": "--af-radius",
|
|
4524
|
+
"key": "radius",
|
|
4525
|
+
"category": "semantic",
|
|
4526
|
+
"group": "space",
|
|
4527
|
+
"kind": "static",
|
|
4528
|
+
"description": "Default corner radius for cards, controls, buttons, dialogs, and surfaces. Override this to retheme the product. Set --af-btn-radius to --af-pill-radius for pill buttons.",
|
|
4529
|
+
"value": "var(--af-radius-md)"
|
|
4530
|
+
},
|
|
4508
4531
|
{
|
|
4509
4532
|
"name": "--af-radius-0",
|
|
4510
4533
|
"key": "radius-0",
|
|
@@ -4520,7 +4543,7 @@
|
|
|
4520
4543
|
"category": "semantic",
|
|
4521
4544
|
"group": "space",
|
|
4522
4545
|
"kind": "static",
|
|
4523
|
-
"description": "
|
|
4546
|
+
"description": "Scale step for a capsule (9999px). Prefer --af-pill-radius in CSS.",
|
|
4524
4547
|
"value": "9999px"
|
|
4525
4548
|
},
|
|
4526
4549
|
{
|
|
@@ -4529,8 +4552,8 @@
|
|
|
4529
4552
|
"category": "semantic",
|
|
4530
4553
|
"group": "space",
|
|
4531
4554
|
"kind": "static",
|
|
4532
|
-
"description": "Large radius —
|
|
4533
|
-
"value": "
|
|
4555
|
+
"description": "Large radius (12px) — cards and dialogs when you want more rounding than --af-radius.",
|
|
4556
|
+
"value": "12px"
|
|
4534
4557
|
},
|
|
4535
4558
|
{
|
|
4536
4559
|
"name": "--af-radius-md",
|
|
@@ -4538,8 +4561,8 @@
|
|
|
4538
4561
|
"category": "semantic",
|
|
4539
4562
|
"group": "space",
|
|
4540
4563
|
"kind": "static",
|
|
4541
|
-
"description": "Medium radius
|
|
4542
|
-
"value": "
|
|
4564
|
+
"description": "Medium radius (8px). Default source for --af-radius.",
|
|
4565
|
+
"value": "8px"
|
|
4543
4566
|
},
|
|
4544
4567
|
{
|
|
4545
4568
|
"name": "--af-radius-sm",
|
|
@@ -4547,8 +4570,8 @@
|
|
|
4547
4570
|
"category": "semantic",
|
|
4548
4571
|
"group": "space",
|
|
4549
4572
|
"kind": "static",
|
|
4550
|
-
"description": "Small radius — chips,
|
|
4551
|
-
"value": "
|
|
4573
|
+
"description": "Small radius (4px) — chips, badges, kbd, tooltips. Compact chrome; does not follow --af-radius.",
|
|
4574
|
+
"value": "4px"
|
|
4552
4575
|
},
|
|
4553
4576
|
{
|
|
4554
4577
|
"name": "--af-radius-xl",
|
|
@@ -4556,8 +4579,26 @@
|
|
|
4556
4579
|
"category": "semantic",
|
|
4557
4580
|
"group": "space",
|
|
4558
4581
|
"kind": "static",
|
|
4559
|
-
"description": "Extra-large radius — large panels.",
|
|
4560
|
-
"value": "
|
|
4582
|
+
"description": "Extra-large radius (16px) — large panels.",
|
|
4583
|
+
"value": "16px"
|
|
4584
|
+
},
|
|
4585
|
+
{
|
|
4586
|
+
"name": "--af-range-thumb-size",
|
|
4587
|
+
"key": "range-thumb-size",
|
|
4588
|
+
"category": "semantic",
|
|
4589
|
+
"group": "other",
|
|
4590
|
+
"kind": "static",
|
|
4591
|
+
"description": "Range slider thumb diameter. Also the control height.",
|
|
4592
|
+
"value": "1.25rem"
|
|
4593
|
+
},
|
|
4594
|
+
{
|
|
4595
|
+
"name": "--af-range-track-height",
|
|
4596
|
+
"key": "range-track-height",
|
|
4597
|
+
"category": "semantic",
|
|
4598
|
+
"group": "other",
|
|
4599
|
+
"kind": "static",
|
|
4600
|
+
"description": "Range slider track thickness.",
|
|
4601
|
+
"value": "0.625rem"
|
|
4561
4602
|
},
|
|
4562
4603
|
{
|
|
4563
4604
|
"name": "--af-shadow-lg",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@airframeui/tokens",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Airframe UI Tokens, CSS variables, JSON, and typed exports used by @airframeui/core",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"homepage": "https://airframeui.com",
|
|
@@ -33,6 +33,6 @@
|
|
|
33
33
|
"dev": "node ./build/build-tokens.mjs --watch",
|
|
34
34
|
"generate-responsive": "node ../core/build/generate-responsive.mjs",
|
|
35
35
|
"lint": "stylelint \"src/**/*.css\" && eslint build",
|
|
36
|
-
"test": "node --test build
|
|
36
|
+
"test": "node --test build/*.test.mjs"
|
|
37
37
|
}
|
|
38
38
|
}
|