@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/README.md
CHANGED
|
@@ -45,17 +45,17 @@ Also: `@airframeui/tokens/catalog.json`
|
|
|
45
45
|
|
|
46
46
|
## Themes
|
|
47
47
|
|
|
48
|
-
Light is the default. Switch **color scheme** with `data-theme` or the `.dark` class. Switch **brand palettes** with `data-brand` (composes with scheme):
|
|
48
|
+
Light is the default. Switch **color scheme** with `data-theme` or the `.dark` class. Switch **brand palettes** with `data-brand` (composes with scheme). Lock a subtree to the catalog light or dark canvas with `.af-force-light` / `.af-force-dark` (surfaces and text; intents still follow the brand):
|
|
49
49
|
|
|
50
50
|
```html
|
|
51
|
-
<html data-theme="dark" data-brand="
|
|
51
|
+
<html data-theme="dark" data-brand="delta">
|
|
52
52
|
…
|
|
53
53
|
</html>
|
|
54
54
|
```
|
|
55
55
|
|
|
56
56
|
```js
|
|
57
57
|
document.documentElement.setAttribute('data-theme', 'dark');
|
|
58
|
-
document.documentElement.setAttribute('data-brand', '
|
|
58
|
+
document.documentElement.setAttribute('data-brand', 'delta');
|
|
59
59
|
```
|
|
60
60
|
|
|
61
61
|
## Customize
|
|
@@ -69,7 +69,7 @@ Override variables in your own CSS — no rebuild of this package:
|
|
|
69
69
|
}
|
|
70
70
|
```
|
|
71
71
|
|
|
72
|
-
See [Theming](https://airframeui.com/docs/theming)
|
|
72
|
+
See [Theming](https://airframeui.com/docs/theming) and [Tokens](https://airframeui.com/docs/tokens) (Figma Variables export is on the [roadmap](https://airframeui.com/docs/roadmap)).
|
|
73
73
|
|
|
74
74
|
## Token model
|
|
75
75
|
|
package/dist/catalog.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"meta": {
|
|
3
|
-
"generatedAt": "2026-08-
|
|
4
|
-
"count":
|
|
3
|
+
"generatedAt": "2026-08-22T07:15:44.406Z",
|
|
4
|
+
"count": 366
|
|
5
5
|
},
|
|
6
6
|
"groups": [
|
|
7
7
|
{
|
|
@@ -735,8 +735,8 @@
|
|
|
735
735
|
"category": "component",
|
|
736
736
|
"group": "component",
|
|
737
737
|
"kind": "static",
|
|
738
|
-
"description": "af-btn border width.",
|
|
739
|
-
"value": "
|
|
738
|
+
"description": "af-btn border width. Defaults to --af-border-width.",
|
|
739
|
+
"value": "var(--af-border-width)"
|
|
740
740
|
},
|
|
741
741
|
{
|
|
742
742
|
"name": "--af-btn-danger-border",
|
|
@@ -1095,8 +1095,8 @@
|
|
|
1095
1095
|
"category": "component",
|
|
1096
1096
|
"group": "component",
|
|
1097
1097
|
"kind": "static",
|
|
1098
|
-
"description": "af-btn corner radius
|
|
1099
|
-
"value": "var(--af-radius
|
|
1098
|
+
"description": "af-btn corner radius. Defaults to --af-radius. Set to --af-pill-radius for pills.",
|
|
1099
|
+
"value": "var(--af-radius)"
|
|
1100
1100
|
},
|
|
1101
1101
|
{
|
|
1102
1102
|
"name": "--af-btn-secondary-active",
|
|
@@ -1323,8 +1323,8 @@
|
|
|
1323
1323
|
"category": "component",
|
|
1324
1324
|
"group": "component",
|
|
1325
1325
|
"kind": "static",
|
|
1326
|
-
"description": "af-card corner radius.",
|
|
1327
|
-
"value": "var(--af-radius
|
|
1326
|
+
"description": "af-card corner radius. Defaults to --af-radius.",
|
|
1327
|
+
"value": "var(--af-radius)"
|
|
1328
1328
|
},
|
|
1329
1329
|
{
|
|
1330
1330
|
"name": "--af-card-shadow",
|
|
@@ -3522,8 +3522,8 @@
|
|
|
3522
3522
|
"category": "component",
|
|
3523
3523
|
"group": "component",
|
|
3524
3524
|
"kind": "static",
|
|
3525
|
-
"description": "Shared form-control border width.",
|
|
3526
|
-
"value": "
|
|
3525
|
+
"description": "Shared form-control border width. Defaults to --af-border-width.",
|
|
3526
|
+
"value": "var(--af-border-width)"
|
|
3527
3527
|
},
|
|
3528
3528
|
{
|
|
3529
3529
|
"name": "--af-control-min-height",
|
|
@@ -3532,7 +3532,7 @@
|
|
|
3532
3532
|
"group": "component",
|
|
3533
3533
|
"kind": "static",
|
|
3534
3534
|
"description": "Shared form-control min-height (default auto). Inputs use --af-input-min-height instead.",
|
|
3535
|
-
"value": "
|
|
3535
|
+
"value": "var(--af-hit-size)"
|
|
3536
3536
|
},
|
|
3537
3537
|
{
|
|
3538
3538
|
"name": "--af-control-padding-x",
|
|
@@ -3558,8 +3558,8 @@
|
|
|
3558
3558
|
"category": "component",
|
|
3559
3559
|
"group": "component",
|
|
3560
3560
|
"kind": "static",
|
|
3561
|
-
"description": "Shared form-control radius (inputs, selects).",
|
|
3562
|
-
"value": "var(--af-radius
|
|
3561
|
+
"description": "Shared form-control radius (inputs, selects). Defaults to --af-radius.",
|
|
3562
|
+
"value": "var(--af-radius)"
|
|
3563
3563
|
},
|
|
3564
3564
|
{
|
|
3565
3565
|
"name": "--af-divider-spacing",
|
|
@@ -3861,7 +3861,7 @@
|
|
|
3861
3861
|
"category": "component",
|
|
3862
3862
|
"group": "component",
|
|
3863
3863
|
"kind": "static",
|
|
3864
|
-
"description": "Text input border width.",
|
|
3864
|
+
"description": "Text input border width. Defaults to --af-control-border-width, then --af-border-width.",
|
|
3865
3865
|
"value": "var(--af-control-border-width)"
|
|
3866
3866
|
},
|
|
3867
3867
|
{
|
|
@@ -3936,7 +3936,7 @@
|
|
|
3936
3936
|
"category": "component",
|
|
3937
3937
|
"group": "component",
|
|
3938
3938
|
"kind": "static",
|
|
3939
|
-
"description": "Text input corner radius.",
|
|
3939
|
+
"description": "Text input corner radius. Defaults to --af-control-radius, then --af-radius.",
|
|
3940
3940
|
"value": "var(--af-control-radius)"
|
|
3941
3941
|
},
|
|
3942
3942
|
{
|
|
@@ -4035,6 +4035,24 @@
|
|
|
4035
4035
|
"hc-dark": "#1678d4"
|
|
4036
4036
|
}
|
|
4037
4037
|
},
|
|
4038
|
+
{
|
|
4039
|
+
"name": "--af-pill-radius",
|
|
4040
|
+
"key": "pill-radius",
|
|
4041
|
+
"category": "semantic",
|
|
4042
|
+
"group": "space",
|
|
4043
|
+
"kind": "static",
|
|
4044
|
+
"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.",
|
|
4045
|
+
"value": "var(--af-radius-full)"
|
|
4046
|
+
},
|
|
4047
|
+
{
|
|
4048
|
+
"name": "--af-radius",
|
|
4049
|
+
"key": "radius",
|
|
4050
|
+
"category": "semantic",
|
|
4051
|
+
"group": "space",
|
|
4052
|
+
"kind": "static",
|
|
4053
|
+
"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.",
|
|
4054
|
+
"value": "var(--af-radius-md)"
|
|
4055
|
+
},
|
|
4038
4056
|
{
|
|
4039
4057
|
"name": "--af-radius-0",
|
|
4040
4058
|
"key": "radius-0",
|
|
@@ -4050,7 +4068,7 @@
|
|
|
4050
4068
|
"category": "semantic",
|
|
4051
4069
|
"group": "space",
|
|
4052
4070
|
"kind": "static",
|
|
4053
|
-
"description": "
|
|
4071
|
+
"description": "Scale step for a capsule (9999px). Prefer --af-pill-radius in CSS.",
|
|
4054
4072
|
"value": "9999px"
|
|
4055
4073
|
},
|
|
4056
4074
|
{
|
|
@@ -4059,8 +4077,8 @@
|
|
|
4059
4077
|
"category": "semantic",
|
|
4060
4078
|
"group": "space",
|
|
4061
4079
|
"kind": "static",
|
|
4062
|
-
"description": "Large radius —
|
|
4063
|
-
"value": "
|
|
4080
|
+
"description": "Large radius (12px) — cards and dialogs when you want more rounding than --af-radius.",
|
|
4081
|
+
"value": "12px"
|
|
4064
4082
|
},
|
|
4065
4083
|
{
|
|
4066
4084
|
"name": "--af-radius-md",
|
|
@@ -4068,8 +4086,8 @@
|
|
|
4068
4086
|
"category": "semantic",
|
|
4069
4087
|
"group": "space",
|
|
4070
4088
|
"kind": "static",
|
|
4071
|
-
"description": "Medium radius
|
|
4072
|
-
"value": "
|
|
4089
|
+
"description": "Medium radius (8px). Default source for --af-radius.",
|
|
4090
|
+
"value": "8px"
|
|
4073
4091
|
},
|
|
4074
4092
|
{
|
|
4075
4093
|
"name": "--af-radius-sm",
|
|
@@ -4077,8 +4095,8 @@
|
|
|
4077
4095
|
"category": "semantic",
|
|
4078
4096
|
"group": "space",
|
|
4079
4097
|
"kind": "static",
|
|
4080
|
-
"description": "Small radius — chips,
|
|
4081
|
-
"value": "
|
|
4098
|
+
"description": "Small radius (4px) — chips, badges, kbd, tooltips. Compact chrome; does not follow --af-radius.",
|
|
4099
|
+
"value": "4px"
|
|
4082
4100
|
},
|
|
4083
4101
|
{
|
|
4084
4102
|
"name": "--af-radius-xl",
|
|
@@ -4086,8 +4104,26 @@
|
|
|
4086
4104
|
"category": "semantic",
|
|
4087
4105
|
"group": "space",
|
|
4088
4106
|
"kind": "static",
|
|
4089
|
-
"description": "Extra-large radius — large panels.",
|
|
4090
|
-
"value": "
|
|
4107
|
+
"description": "Extra-large radius (16px) — large panels.",
|
|
4108
|
+
"value": "16px"
|
|
4109
|
+
},
|
|
4110
|
+
{
|
|
4111
|
+
"name": "--af-range-thumb-size",
|
|
4112
|
+
"key": "range-thumb-size",
|
|
4113
|
+
"category": "semantic",
|
|
4114
|
+
"group": "other",
|
|
4115
|
+
"kind": "static",
|
|
4116
|
+
"description": "Range slider thumb diameter. Also the control height.",
|
|
4117
|
+
"value": "1.25rem"
|
|
4118
|
+
},
|
|
4119
|
+
{
|
|
4120
|
+
"name": "--af-range-track-height",
|
|
4121
|
+
"key": "range-track-height",
|
|
4122
|
+
"category": "semantic",
|
|
4123
|
+
"group": "other",
|
|
4124
|
+
"kind": "static",
|
|
4125
|
+
"description": "Range slider track thickness.",
|
|
4126
|
+
"value": "0.625rem"
|
|
4091
4127
|
},
|
|
4092
4128
|
{
|
|
4093
4129
|
"name": "--af-shadow-lg",
|