@airframeui/tokens 0.3.1 → 0.4.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 -1
- package/dist/catalog.json +45 -27
- package/dist/tokens.css +5 -6
- package/dist/tokens.js +51 -33
- package/dist/tokens.json +51 -33
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,6 +4,8 @@ Airframe UI Tokens — CSS variables, JSON, and a typed JavaScript export.
|
|
|
4
4
|
|
|
5
5
|
Most apps should install [`@airframeui/core`](https://www.npmjs.com/package/@airframeui/core), which depends on this package and loads the tokens stylesheet for you. Install tokens directly when you need the token map in tooling, or want tokens without the full core CSS.
|
|
6
6
|
|
|
7
|
+
Docs: [Tokens](https://airframeui.com/docs/tokens) · [Changelog](https://airframeui.com/docs/changelog)
|
|
8
|
+
|
|
7
9
|
```bash
|
|
8
10
|
npm install @airframeui/core
|
|
9
11
|
# or, tokens only:
|
|
@@ -79,8 +81,9 @@ See [Theming](https://airframeui.com/docs/theming) and [Tokens](https://airframe
|
|
|
79
81
|
|
|
80
82
|
## Related
|
|
81
83
|
|
|
82
|
-
- [`@airframeui/core`](https://www.npmjs.com/package/@airframeui/core) —
|
|
84
|
+
- [`@airframeui/core`](https://www.npmjs.com/package/@airframeui/core) — structure, shells, patterns, utilities
|
|
83
85
|
- [Documentation](https://airframeui.com/docs)
|
|
86
|
+
- [Changelog](https://airframeui.com/docs/changelog)
|
|
84
87
|
|
|
85
88
|
## License
|
|
86
89
|
|
package/dist/catalog.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"meta": {
|
|
3
|
-
"generatedAt": "2026-08-
|
|
4
|
-
"count":
|
|
3
|
+
"generatedAt": "2026-08-23T05:52:30.895Z",
|
|
4
|
+
"count": 368
|
|
5
5
|
},
|
|
6
6
|
"groups": [
|
|
7
7
|
{
|
|
@@ -1410,8 +1410,8 @@
|
|
|
1410
1410
|
"hc-dark": "color-mix( in srgb, var(--af-color-action), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
1411
1411
|
},
|
|
1412
1412
|
"hex": {
|
|
1413
|
-
"light": "#
|
|
1414
|
-
"dark": "#
|
|
1413
|
+
"light": "#0a4984",
|
|
1414
|
+
"dark": "#7cb3e6",
|
|
1415
1415
|
"hc-light": "#04417a",
|
|
1416
1416
|
"hc-dark": "#7fb5e7"
|
|
1417
1417
|
}
|
|
@@ -1722,8 +1722,8 @@
|
|
|
1722
1722
|
"hc-dark": "color-mix( in srgb, var(--af-color-danger), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
1723
1723
|
},
|
|
1724
1724
|
"hex": {
|
|
1725
|
-
"light": "#
|
|
1726
|
-
"dark": "#
|
|
1725
|
+
"light": "#7f1d1f",
|
|
1726
|
+
"dark": "#e98586",
|
|
1727
1727
|
"hc-light": "#791515",
|
|
1728
1728
|
"hc-dark": "#ec8888"
|
|
1729
1729
|
}
|
|
@@ -1848,8 +1848,8 @@
|
|
|
1848
1848
|
"hc-dark": "color-mix( in srgb, var(--af-color-info), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
1849
1849
|
},
|
|
1850
1850
|
"hex": {
|
|
1851
|
-
"light": "#
|
|
1852
|
-
"dark": "#
|
|
1851
|
+
"light": "#257093",
|
|
1852
|
+
"dark": "#8ed8fa",
|
|
1853
1853
|
"hc-light": "#1f6888",
|
|
1854
1854
|
"hc-dark": "#92dbfb"
|
|
1855
1855
|
}
|
|
@@ -2313,8 +2313,8 @@
|
|
|
2313
2313
|
"hc-dark": "color-mix( in srgb, var(--af-color-primary), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
2314
2314
|
},
|
|
2315
2315
|
"hex": {
|
|
2316
|
-
"light": "#
|
|
2317
|
-
"dark": "#
|
|
2316
|
+
"light": "#0a4984",
|
|
2317
|
+
"dark": "#7cb3e6",
|
|
2318
2318
|
"hc-light": "#04417a",
|
|
2319
2319
|
"hc-dark": "#7fb5e7"
|
|
2320
2320
|
}
|
|
@@ -2418,8 +2418,8 @@
|
|
|
2418
2418
|
"hc-dark": "color-mix( in srgb, var(--af-color-secondary), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
2419
2419
|
},
|
|
2420
2420
|
"hex": {
|
|
2421
|
-
"light": "#
|
|
2422
|
-
"dark": "#
|
|
2421
|
+
"light": "#7e8391",
|
|
2422
|
+
"dark": "#e8ecf8",
|
|
2423
2423
|
"hc-light": "#787c86",
|
|
2424
2424
|
"hc-dark": "#ebeff9"
|
|
2425
2425
|
}
|
|
@@ -2523,8 +2523,8 @@
|
|
|
2523
2523
|
"hc-dark": "color-mix( in srgb, var(--af-color-success), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
2524
2524
|
},
|
|
2525
2525
|
"hex": {
|
|
2526
|
-
"light": "#
|
|
2527
|
-
"dark": "#
|
|
2526
|
+
"light": "#19743e",
|
|
2527
|
+
"dark": "#82dda5",
|
|
2528
2528
|
"hc-light": "#136c34",
|
|
2529
2529
|
"hc-dark": "#85dfa6"
|
|
2530
2530
|
}
|
|
@@ -3042,8 +3042,8 @@
|
|
|
3042
3042
|
"hc-dark": "color-mix( in srgb, var(--af-color-tertiary), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
3043
3043
|
},
|
|
3044
3044
|
"hex": {
|
|
3045
|
-
"light": "#
|
|
3046
|
-
"dark": "#
|
|
3045
|
+
"light": "#0f1520",
|
|
3046
|
+
"dark": "#797e87",
|
|
3047
3047
|
"hc-light": "#090d15",
|
|
3048
3048
|
"hc-dark": "#7c8088"
|
|
3049
3049
|
}
|
|
@@ -3354,8 +3354,8 @@
|
|
|
3354
3354
|
"hc-dark": "color-mix( in srgb, var(--af-color-warning), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
3355
3355
|
},
|
|
3356
3356
|
"hex": {
|
|
3357
|
-
"light": "#
|
|
3358
|
-
"dark": "#
|
|
3357
|
+
"light": "#90711e",
|
|
3358
|
+
"dark": "#fada85",
|
|
3359
3359
|
"hc-light": "#8a6914",
|
|
3360
3360
|
"hc-dark": "#fddc87"
|
|
3361
3361
|
}
|
|
@@ -3759,19 +3759,19 @@
|
|
|
3759
3759
|
"category": "knob",
|
|
3760
3760
|
"group": "knob",
|
|
3761
3761
|
"kind": "static",
|
|
3762
|
-
"description": "Mix target for *-hard
|
|
3763
|
-
"value": "
|
|
3762
|
+
"description": "Mix target for *-hard. Defaults to --af-color-text so dark-first --light brands stay AA. Do not set freely per component.",
|
|
3763
|
+
"value": "var(--af-color-text)",
|
|
3764
3764
|
"css": {
|
|
3765
|
-
"light": "
|
|
3766
|
-
"dark": "
|
|
3767
|
-
"hc-light": "
|
|
3768
|
-
"hc-dark": "
|
|
3765
|
+
"light": "var(--af-color-text)",
|
|
3766
|
+
"dark": "var(--af-color-text)",
|
|
3767
|
+
"hc-light": "var(--af-color-text)",
|
|
3768
|
+
"hc-dark": "var(--af-color-text)"
|
|
3769
3769
|
},
|
|
3770
3770
|
"hex": {
|
|
3771
|
-
"light": "#
|
|
3772
|
-
"dark": "#
|
|
3771
|
+
"light": "#0d1117",
|
|
3772
|
+
"dark": "#f8fafc",
|
|
3773
3773
|
"hc-light": "#000000",
|
|
3774
|
-
"hc-dark": "#
|
|
3774
|
+
"hc-dark": "#ffffff"
|
|
3775
3775
|
}
|
|
3776
3776
|
},
|
|
3777
3777
|
{
|
|
@@ -4035,6 +4035,15 @@
|
|
|
4035
4035
|
"hc-dark": "#1678d4"
|
|
4036
4036
|
}
|
|
4037
4037
|
},
|
|
4038
|
+
{
|
|
4039
|
+
"name": "--af-navbar-height",
|
|
4040
|
+
"key": "navbar-height",
|
|
4041
|
+
"category": "semantic",
|
|
4042
|
+
"group": "other",
|
|
4043
|
+
"kind": "static",
|
|
4044
|
+
"description": "Offset for af-nav-collapse.af-is-overlay. Panel is position:fixed from this value to the bottom. Override on the navbar when the bar is taller than 3.5rem.",
|
|
4045
|
+
"value": "3.5rem"
|
|
4046
|
+
},
|
|
4038
4047
|
{
|
|
4039
4048
|
"name": "--af-pill-radius",
|
|
4040
4049
|
"key": "pill-radius",
|
|
@@ -4152,6 +4161,15 @@
|
|
|
4152
4161
|
"description": "Low elevation — resting cards and inputs.",
|
|
4153
4162
|
"value": "0 1px 2px rgba(0, 0, 0, 0.06)"
|
|
4154
4163
|
},
|
|
4164
|
+
{
|
|
4165
|
+
"name": "--af-sidebar-collapsed-width",
|
|
4166
|
+
"key": "sidebar-collapsed-width",
|
|
4167
|
+
"category": "semantic",
|
|
4168
|
+
"group": "other",
|
|
4169
|
+
"kind": "static",
|
|
4170
|
+
"description": "Collapsed af-app rail width (af-app.af-is-collapsed from lg up). Default 3.5rem. Distinct from --af-sidebar-width.",
|
|
4171
|
+
"value": "3.5rem"
|
|
4172
|
+
},
|
|
4155
4173
|
{
|
|
4156
4174
|
"name": "--af-sidebar-width",
|
|
4157
4175
|
"key": "sidebar-width",
|
package/dist/tokens.css
CHANGED
|
@@ -140,15 +140,18 @@
|
|
|
140
140
|
--af-hover-mix: 12%;
|
|
141
141
|
--af-active-mix: 18%;
|
|
142
142
|
--af-soft-mix: 12%;
|
|
143
|
-
/* Hard text on soft tints: mix toward
|
|
143
|
+
/* Hard text on soft tints: mix toward canvas text (dark on light, light on
|
|
144
|
+
dark). Follows dark-first --light brands instead of the scheme name. */
|
|
144
145
|
--af-hard-mix: 45%;
|
|
145
|
-
--af-hard-toward:
|
|
146
|
+
--af-hard-toward: var(--af-color-text);
|
|
146
147
|
--af-border-mix: 22%;
|
|
147
148
|
|
|
148
149
|
/* --- Layout semantics --- */
|
|
149
150
|
--af-layout-gap: var(--af-space-4);
|
|
150
151
|
--af-sidebar-width: 16rem;
|
|
152
|
+
--af-sidebar-collapsed-width: 3.5rem;
|
|
151
153
|
--af-drawer-width: 20rem;
|
|
154
|
+
--af-navbar-height: 3.5rem;
|
|
152
155
|
--af-divider-spacing: var(--af-space-5);
|
|
153
156
|
--af-container-padding-x: var(--af-space-4);
|
|
154
157
|
--af-container-max-w: 90em; /* 1440px */
|
|
@@ -577,7 +580,6 @@
|
|
|
577
580
|
.af-force-light {
|
|
578
581
|
color-scheme: light;
|
|
579
582
|
color: var(--af-color-text);
|
|
580
|
-
--af-hard-toward: black;
|
|
581
583
|
--af-btn-hover-brightness: 0.9;
|
|
582
584
|
--af-btn-active-brightness: 0.82;
|
|
583
585
|
}
|
|
@@ -657,7 +659,6 @@
|
|
|
657
659
|
--af-color-border: var(--af-color-border--dark);
|
|
658
660
|
--af-color-border-strong: var(--af-color-border-strong--dark);
|
|
659
661
|
|
|
660
|
-
--af-hard-toward: white;
|
|
661
662
|
--af-btn-hover-brightness: 1.12;
|
|
662
663
|
--af-btn-active-brightness: 1.2;
|
|
663
664
|
}
|
|
@@ -689,7 +690,6 @@
|
|
|
689
690
|
--af-color-border: var(--af-color-border--dark);
|
|
690
691
|
--af-color-border-strong: var(--af-color-border-strong--dark);
|
|
691
692
|
|
|
692
|
-
--af-hard-toward: white;
|
|
693
693
|
--af-btn-hover-brightness: 1.12;
|
|
694
694
|
--af-btn-active-brightness: 1.2;
|
|
695
695
|
}
|
|
@@ -763,7 +763,6 @@
|
|
|
763
763
|
--af-color-border: var(--af-color-border--light);
|
|
764
764
|
--af-color-border-strong: var(--af-color-border-strong--light);
|
|
765
765
|
|
|
766
|
-
--af-hard-toward: black;
|
|
767
766
|
--af-btn-hover-brightness: 0.9;
|
|
768
767
|
--af-btn-active-brightness: 0.82;
|
|
769
768
|
}
|
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-23T05:52:30.896Z"
|
|
5
5
|
},
|
|
6
6
|
"primitives": {
|
|
7
7
|
"base-primary--light": "#0876dd",
|
|
@@ -110,10 +110,12 @@ export const tokens = {
|
|
|
110
110
|
"ease-linear": "linear",
|
|
111
111
|
"border-width": "1px",
|
|
112
112
|
"hit-size": "2.75rem",
|
|
113
|
-
"hard-toward": "
|
|
113
|
+
"hard-toward": "var(--af-color-text)",
|
|
114
114
|
"layout-gap": "var(--af-space-4)",
|
|
115
115
|
"sidebar-width": "16rem",
|
|
116
|
+
"sidebar-collapsed-width": "3.5rem",
|
|
116
117
|
"drawer-width": "20rem",
|
|
118
|
+
"navbar-height": "3.5rem",
|
|
117
119
|
"divider-spacing": "var(--af-space-5)",
|
|
118
120
|
"container-padding-x": "var(--af-space-4)",
|
|
119
121
|
"container-max-w": "90em",
|
|
@@ -360,8 +362,7 @@ export const tokens = {
|
|
|
360
362
|
"color-text-muted": "var(--af-color-text-muted--light)",
|
|
361
363
|
"color-text-inverse": "var(--af-color-text-inverse--light)",
|
|
362
364
|
"color-border": "var(--af-color-border--light)",
|
|
363
|
-
"color-border-strong": "var(--af-color-border-strong--light)"
|
|
364
|
-
"hard-toward": "black"
|
|
365
|
+
"color-border-strong": "var(--af-color-border-strong--light)"
|
|
365
366
|
}
|
|
366
367
|
},
|
|
367
368
|
"dark": {
|
|
@@ -400,8 +401,7 @@ export const tokens = {
|
|
|
400
401
|
"color-text-muted": "var(--af-color-text-muted--dark)",
|
|
401
402
|
"color-text-inverse": "var(--af-color-text-inverse--dark)",
|
|
402
403
|
"color-border": "var(--af-color-border--dark)",
|
|
403
|
-
"color-border-strong": "var(--af-color-border-strong--dark)"
|
|
404
|
-
"hard-toward": "white"
|
|
404
|
+
"color-border-strong": "var(--af-color-border-strong--dark)"
|
|
405
405
|
}
|
|
406
406
|
},
|
|
407
407
|
"high-contrast-light": {
|
|
@@ -475,8 +475,8 @@ export const tokens = {
|
|
|
475
475
|
},
|
|
476
476
|
"catalog": {
|
|
477
477
|
"meta": {
|
|
478
|
-
"generatedAt": "2026-08-
|
|
479
|
-
"count":
|
|
478
|
+
"generatedAt": "2026-08-23T05:52:30.895Z",
|
|
479
|
+
"count": 368
|
|
480
480
|
},
|
|
481
481
|
"groups": [
|
|
482
482
|
{
|
|
@@ -1885,8 +1885,8 @@ export const tokens = {
|
|
|
1885
1885
|
"hc-dark": "color-mix( in srgb, var(--af-color-action), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
1886
1886
|
},
|
|
1887
1887
|
"hex": {
|
|
1888
|
-
"light": "#
|
|
1889
|
-
"dark": "#
|
|
1888
|
+
"light": "#0a4984",
|
|
1889
|
+
"dark": "#7cb3e6",
|
|
1890
1890
|
"hc-light": "#04417a",
|
|
1891
1891
|
"hc-dark": "#7fb5e7"
|
|
1892
1892
|
}
|
|
@@ -2197,8 +2197,8 @@ export const tokens = {
|
|
|
2197
2197
|
"hc-dark": "color-mix( in srgb, var(--af-color-danger), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
2198
2198
|
},
|
|
2199
2199
|
"hex": {
|
|
2200
|
-
"light": "#
|
|
2201
|
-
"dark": "#
|
|
2200
|
+
"light": "#7f1d1f",
|
|
2201
|
+
"dark": "#e98586",
|
|
2202
2202
|
"hc-light": "#791515",
|
|
2203
2203
|
"hc-dark": "#ec8888"
|
|
2204
2204
|
}
|
|
@@ -2323,8 +2323,8 @@ export const tokens = {
|
|
|
2323
2323
|
"hc-dark": "color-mix( in srgb, var(--af-color-info), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
2324
2324
|
},
|
|
2325
2325
|
"hex": {
|
|
2326
|
-
"light": "#
|
|
2327
|
-
"dark": "#
|
|
2326
|
+
"light": "#257093",
|
|
2327
|
+
"dark": "#8ed8fa",
|
|
2328
2328
|
"hc-light": "#1f6888",
|
|
2329
2329
|
"hc-dark": "#92dbfb"
|
|
2330
2330
|
}
|
|
@@ -2788,8 +2788,8 @@ export const tokens = {
|
|
|
2788
2788
|
"hc-dark": "color-mix( in srgb, var(--af-color-primary), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
2789
2789
|
},
|
|
2790
2790
|
"hex": {
|
|
2791
|
-
"light": "#
|
|
2792
|
-
"dark": "#
|
|
2791
|
+
"light": "#0a4984",
|
|
2792
|
+
"dark": "#7cb3e6",
|
|
2793
2793
|
"hc-light": "#04417a",
|
|
2794
2794
|
"hc-dark": "#7fb5e7"
|
|
2795
2795
|
}
|
|
@@ -2893,8 +2893,8 @@ export const tokens = {
|
|
|
2893
2893
|
"hc-dark": "color-mix( in srgb, var(--af-color-secondary), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
2894
2894
|
},
|
|
2895
2895
|
"hex": {
|
|
2896
|
-
"light": "#
|
|
2897
|
-
"dark": "#
|
|
2896
|
+
"light": "#7e8391",
|
|
2897
|
+
"dark": "#e8ecf8",
|
|
2898
2898
|
"hc-light": "#787c86",
|
|
2899
2899
|
"hc-dark": "#ebeff9"
|
|
2900
2900
|
}
|
|
@@ -2998,8 +2998,8 @@ export const tokens = {
|
|
|
2998
2998
|
"hc-dark": "color-mix( in srgb, var(--af-color-success), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
2999
2999
|
},
|
|
3000
3000
|
"hex": {
|
|
3001
|
-
"light": "#
|
|
3002
|
-
"dark": "#
|
|
3001
|
+
"light": "#19743e",
|
|
3002
|
+
"dark": "#82dda5",
|
|
3003
3003
|
"hc-light": "#136c34",
|
|
3004
3004
|
"hc-dark": "#85dfa6"
|
|
3005
3005
|
}
|
|
@@ -3517,8 +3517,8 @@ export const tokens = {
|
|
|
3517
3517
|
"hc-dark": "color-mix( in srgb, var(--af-color-tertiary), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
3518
3518
|
},
|
|
3519
3519
|
"hex": {
|
|
3520
|
-
"light": "#
|
|
3521
|
-
"dark": "#
|
|
3520
|
+
"light": "#0f1520",
|
|
3521
|
+
"dark": "#797e87",
|
|
3522
3522
|
"hc-light": "#090d15",
|
|
3523
3523
|
"hc-dark": "#7c8088"
|
|
3524
3524
|
}
|
|
@@ -3829,8 +3829,8 @@ export const tokens = {
|
|
|
3829
3829
|
"hc-dark": "color-mix( in srgb, var(--af-color-warning), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
3830
3830
|
},
|
|
3831
3831
|
"hex": {
|
|
3832
|
-
"light": "#
|
|
3833
|
-
"dark": "#
|
|
3832
|
+
"light": "#90711e",
|
|
3833
|
+
"dark": "#fada85",
|
|
3834
3834
|
"hc-light": "#8a6914",
|
|
3835
3835
|
"hc-dark": "#fddc87"
|
|
3836
3836
|
}
|
|
@@ -4234,19 +4234,19 @@ export const tokens = {
|
|
|
4234
4234
|
"category": "knob",
|
|
4235
4235
|
"group": "knob",
|
|
4236
4236
|
"kind": "static",
|
|
4237
|
-
"description": "Mix target for *-hard
|
|
4238
|
-
"value": "
|
|
4237
|
+
"description": "Mix target for *-hard. Defaults to --af-color-text so dark-first --light brands stay AA. Do not set freely per component.",
|
|
4238
|
+
"value": "var(--af-color-text)",
|
|
4239
4239
|
"css": {
|
|
4240
|
-
"light": "
|
|
4241
|
-
"dark": "
|
|
4242
|
-
"hc-light": "
|
|
4243
|
-
"hc-dark": "
|
|
4240
|
+
"light": "var(--af-color-text)",
|
|
4241
|
+
"dark": "var(--af-color-text)",
|
|
4242
|
+
"hc-light": "var(--af-color-text)",
|
|
4243
|
+
"hc-dark": "var(--af-color-text)"
|
|
4244
4244
|
},
|
|
4245
4245
|
"hex": {
|
|
4246
|
-
"light": "#
|
|
4247
|
-
"dark": "#
|
|
4246
|
+
"light": "#0d1117",
|
|
4247
|
+
"dark": "#f8fafc",
|
|
4248
4248
|
"hc-light": "#000000",
|
|
4249
|
-
"hc-dark": "#
|
|
4249
|
+
"hc-dark": "#ffffff"
|
|
4250
4250
|
}
|
|
4251
4251
|
},
|
|
4252
4252
|
{
|
|
@@ -4510,6 +4510,15 @@ export const tokens = {
|
|
|
4510
4510
|
"hc-dark": "#1678d4"
|
|
4511
4511
|
}
|
|
4512
4512
|
},
|
|
4513
|
+
{
|
|
4514
|
+
"name": "--af-navbar-height",
|
|
4515
|
+
"key": "navbar-height",
|
|
4516
|
+
"category": "semantic",
|
|
4517
|
+
"group": "other",
|
|
4518
|
+
"kind": "static",
|
|
4519
|
+
"description": "Offset for af-nav-collapse.af-is-overlay. Panel is position:fixed from this value to the bottom. Override on the navbar when the bar is taller than 3.5rem.",
|
|
4520
|
+
"value": "3.5rem"
|
|
4521
|
+
},
|
|
4513
4522
|
{
|
|
4514
4523
|
"name": "--af-pill-radius",
|
|
4515
4524
|
"key": "pill-radius",
|
|
@@ -4627,6 +4636,15 @@ export const tokens = {
|
|
|
4627
4636
|
"description": "Low elevation — resting cards and inputs.",
|
|
4628
4637
|
"value": "0 1px 2px rgba(0, 0, 0, 0.06)"
|
|
4629
4638
|
},
|
|
4639
|
+
{
|
|
4640
|
+
"name": "--af-sidebar-collapsed-width",
|
|
4641
|
+
"key": "sidebar-collapsed-width",
|
|
4642
|
+
"category": "semantic",
|
|
4643
|
+
"group": "other",
|
|
4644
|
+
"kind": "static",
|
|
4645
|
+
"description": "Collapsed af-app rail width (af-app.af-is-collapsed from lg up). Default 3.5rem. Distinct from --af-sidebar-width.",
|
|
4646
|
+
"value": "3.5rem"
|
|
4647
|
+
},
|
|
4630
4648
|
{
|
|
4631
4649
|
"name": "--af-sidebar-width",
|
|
4632
4650
|
"key": "sidebar-width",
|
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-23T05:52:30.896Z"
|
|
5
5
|
},
|
|
6
6
|
"primitives": {
|
|
7
7
|
"base-primary--light": "#0876dd",
|
|
@@ -110,10 +110,12 @@
|
|
|
110
110
|
"ease-linear": "linear",
|
|
111
111
|
"border-width": "1px",
|
|
112
112
|
"hit-size": "2.75rem",
|
|
113
|
-
"hard-toward": "
|
|
113
|
+
"hard-toward": "var(--af-color-text)",
|
|
114
114
|
"layout-gap": "var(--af-space-4)",
|
|
115
115
|
"sidebar-width": "16rem",
|
|
116
|
+
"sidebar-collapsed-width": "3.5rem",
|
|
116
117
|
"drawer-width": "20rem",
|
|
118
|
+
"navbar-height": "3.5rem",
|
|
117
119
|
"divider-spacing": "var(--af-space-5)",
|
|
118
120
|
"container-padding-x": "var(--af-space-4)",
|
|
119
121
|
"container-max-w": "90em",
|
|
@@ -360,8 +362,7 @@
|
|
|
360
362
|
"color-text-muted": "var(--af-color-text-muted--light)",
|
|
361
363
|
"color-text-inverse": "var(--af-color-text-inverse--light)",
|
|
362
364
|
"color-border": "var(--af-color-border--light)",
|
|
363
|
-
"color-border-strong": "var(--af-color-border-strong--light)"
|
|
364
|
-
"hard-toward": "black"
|
|
365
|
+
"color-border-strong": "var(--af-color-border-strong--light)"
|
|
365
366
|
}
|
|
366
367
|
},
|
|
367
368
|
"dark": {
|
|
@@ -400,8 +401,7 @@
|
|
|
400
401
|
"color-text-muted": "var(--af-color-text-muted--dark)",
|
|
401
402
|
"color-text-inverse": "var(--af-color-text-inverse--dark)",
|
|
402
403
|
"color-border": "var(--af-color-border--dark)",
|
|
403
|
-
"color-border-strong": "var(--af-color-border-strong--dark)"
|
|
404
|
-
"hard-toward": "white"
|
|
404
|
+
"color-border-strong": "var(--af-color-border-strong--dark)"
|
|
405
405
|
}
|
|
406
406
|
},
|
|
407
407
|
"high-contrast-light": {
|
|
@@ -475,8 +475,8 @@
|
|
|
475
475
|
},
|
|
476
476
|
"catalog": {
|
|
477
477
|
"meta": {
|
|
478
|
-
"generatedAt": "2026-08-
|
|
479
|
-
"count":
|
|
478
|
+
"generatedAt": "2026-08-23T05:52:30.895Z",
|
|
479
|
+
"count": 368
|
|
480
480
|
},
|
|
481
481
|
"groups": [
|
|
482
482
|
{
|
|
@@ -1885,8 +1885,8 @@
|
|
|
1885
1885
|
"hc-dark": "color-mix( in srgb, var(--af-color-action), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
1886
1886
|
},
|
|
1887
1887
|
"hex": {
|
|
1888
|
-
"light": "#
|
|
1889
|
-
"dark": "#
|
|
1888
|
+
"light": "#0a4984",
|
|
1889
|
+
"dark": "#7cb3e6",
|
|
1890
1890
|
"hc-light": "#04417a",
|
|
1891
1891
|
"hc-dark": "#7fb5e7"
|
|
1892
1892
|
}
|
|
@@ -2197,8 +2197,8 @@
|
|
|
2197
2197
|
"hc-dark": "color-mix( in srgb, var(--af-color-danger), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
2198
2198
|
},
|
|
2199
2199
|
"hex": {
|
|
2200
|
-
"light": "#
|
|
2201
|
-
"dark": "#
|
|
2200
|
+
"light": "#7f1d1f",
|
|
2201
|
+
"dark": "#e98586",
|
|
2202
2202
|
"hc-light": "#791515",
|
|
2203
2203
|
"hc-dark": "#ec8888"
|
|
2204
2204
|
}
|
|
@@ -2323,8 +2323,8 @@
|
|
|
2323
2323
|
"hc-dark": "color-mix( in srgb, var(--af-color-info), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
2324
2324
|
},
|
|
2325
2325
|
"hex": {
|
|
2326
|
-
"light": "#
|
|
2327
|
-
"dark": "#
|
|
2326
|
+
"light": "#257093",
|
|
2327
|
+
"dark": "#8ed8fa",
|
|
2328
2328
|
"hc-light": "#1f6888",
|
|
2329
2329
|
"hc-dark": "#92dbfb"
|
|
2330
2330
|
}
|
|
@@ -2788,8 +2788,8 @@
|
|
|
2788
2788
|
"hc-dark": "color-mix( in srgb, var(--af-color-primary), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
2789
2789
|
},
|
|
2790
2790
|
"hex": {
|
|
2791
|
-
"light": "#
|
|
2792
|
-
"dark": "#
|
|
2791
|
+
"light": "#0a4984",
|
|
2792
|
+
"dark": "#7cb3e6",
|
|
2793
2793
|
"hc-light": "#04417a",
|
|
2794
2794
|
"hc-dark": "#7fb5e7"
|
|
2795
2795
|
}
|
|
@@ -2893,8 +2893,8 @@
|
|
|
2893
2893
|
"hc-dark": "color-mix( in srgb, var(--af-color-secondary), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
2894
2894
|
},
|
|
2895
2895
|
"hex": {
|
|
2896
|
-
"light": "#
|
|
2897
|
-
"dark": "#
|
|
2896
|
+
"light": "#7e8391",
|
|
2897
|
+
"dark": "#e8ecf8",
|
|
2898
2898
|
"hc-light": "#787c86",
|
|
2899
2899
|
"hc-dark": "#ebeff9"
|
|
2900
2900
|
}
|
|
@@ -2998,8 +2998,8 @@
|
|
|
2998
2998
|
"hc-dark": "color-mix( in srgb, var(--af-color-success), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
2999
2999
|
},
|
|
3000
3000
|
"hex": {
|
|
3001
|
-
"light": "#
|
|
3002
|
-
"dark": "#
|
|
3001
|
+
"light": "#19743e",
|
|
3002
|
+
"dark": "#82dda5",
|
|
3003
3003
|
"hc-light": "#136c34",
|
|
3004
3004
|
"hc-dark": "#85dfa6"
|
|
3005
3005
|
}
|
|
@@ -3517,8 +3517,8 @@
|
|
|
3517
3517
|
"hc-dark": "color-mix( in srgb, var(--af-color-tertiary), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
3518
3518
|
},
|
|
3519
3519
|
"hex": {
|
|
3520
|
-
"light": "#
|
|
3521
|
-
"dark": "#
|
|
3520
|
+
"light": "#0f1520",
|
|
3521
|
+
"dark": "#797e87",
|
|
3522
3522
|
"hc-light": "#090d15",
|
|
3523
3523
|
"hc-dark": "#7c8088"
|
|
3524
3524
|
}
|
|
@@ -3829,8 +3829,8 @@
|
|
|
3829
3829
|
"hc-dark": "color-mix( in srgb, var(--af-color-warning), var(--af-hard-toward) var(--af-hard-mix) )"
|
|
3830
3830
|
},
|
|
3831
3831
|
"hex": {
|
|
3832
|
-
"light": "#
|
|
3833
|
-
"dark": "#
|
|
3832
|
+
"light": "#90711e",
|
|
3833
|
+
"dark": "#fada85",
|
|
3834
3834
|
"hc-light": "#8a6914",
|
|
3835
3835
|
"hc-dark": "#fddc87"
|
|
3836
3836
|
}
|
|
@@ -4234,19 +4234,19 @@
|
|
|
4234
4234
|
"category": "knob",
|
|
4235
4235
|
"group": "knob",
|
|
4236
4236
|
"kind": "static",
|
|
4237
|
-
"description": "Mix target for *-hard
|
|
4238
|
-
"value": "
|
|
4237
|
+
"description": "Mix target for *-hard. Defaults to --af-color-text so dark-first --light brands stay AA. Do not set freely per component.",
|
|
4238
|
+
"value": "var(--af-color-text)",
|
|
4239
4239
|
"css": {
|
|
4240
|
-
"light": "
|
|
4241
|
-
"dark": "
|
|
4242
|
-
"hc-light": "
|
|
4243
|
-
"hc-dark": "
|
|
4240
|
+
"light": "var(--af-color-text)",
|
|
4241
|
+
"dark": "var(--af-color-text)",
|
|
4242
|
+
"hc-light": "var(--af-color-text)",
|
|
4243
|
+
"hc-dark": "var(--af-color-text)"
|
|
4244
4244
|
},
|
|
4245
4245
|
"hex": {
|
|
4246
|
-
"light": "#
|
|
4247
|
-
"dark": "#
|
|
4246
|
+
"light": "#0d1117",
|
|
4247
|
+
"dark": "#f8fafc",
|
|
4248
4248
|
"hc-light": "#000000",
|
|
4249
|
-
"hc-dark": "#
|
|
4249
|
+
"hc-dark": "#ffffff"
|
|
4250
4250
|
}
|
|
4251
4251
|
},
|
|
4252
4252
|
{
|
|
@@ -4510,6 +4510,15 @@
|
|
|
4510
4510
|
"hc-dark": "#1678d4"
|
|
4511
4511
|
}
|
|
4512
4512
|
},
|
|
4513
|
+
{
|
|
4514
|
+
"name": "--af-navbar-height",
|
|
4515
|
+
"key": "navbar-height",
|
|
4516
|
+
"category": "semantic",
|
|
4517
|
+
"group": "other",
|
|
4518
|
+
"kind": "static",
|
|
4519
|
+
"description": "Offset for af-nav-collapse.af-is-overlay. Panel is position:fixed from this value to the bottom. Override on the navbar when the bar is taller than 3.5rem.",
|
|
4520
|
+
"value": "3.5rem"
|
|
4521
|
+
},
|
|
4513
4522
|
{
|
|
4514
4523
|
"name": "--af-pill-radius",
|
|
4515
4524
|
"key": "pill-radius",
|
|
@@ -4627,6 +4636,15 @@
|
|
|
4627
4636
|
"description": "Low elevation — resting cards and inputs.",
|
|
4628
4637
|
"value": "0 1px 2px rgba(0, 0, 0, 0.06)"
|
|
4629
4638
|
},
|
|
4639
|
+
{
|
|
4640
|
+
"name": "--af-sidebar-collapsed-width",
|
|
4641
|
+
"key": "sidebar-collapsed-width",
|
|
4642
|
+
"category": "semantic",
|
|
4643
|
+
"group": "other",
|
|
4644
|
+
"kind": "static",
|
|
4645
|
+
"description": "Collapsed af-app rail width (af-app.af-is-collapsed from lg up). Default 3.5rem. Distinct from --af-sidebar-width.",
|
|
4646
|
+
"value": "3.5rem"
|
|
4647
|
+
},
|
|
4630
4648
|
{
|
|
4631
4649
|
"name": "--af-sidebar-width",
|
|
4632
4650
|
"key": "sidebar-width",
|
package/package.json
CHANGED