@helixui/tokens 3.0.0 → 3.2.0-next.102
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/dist/index.d.ts +1232 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/tokens.css +187 -106
- package/dist/tokens.json +1381 -132
- package/package.json +1 -1
- package/src/tokens.json +1381 -132
package/dist/tokens.json
CHANGED
|
@@ -1,122 +1,163 @@
|
|
|
1
1
|
{
|
|
2
2
|
"color": {
|
|
3
3
|
"primary": {
|
|
4
|
-
"50": { "value": "#
|
|
5
|
-
"100": { "value": "#
|
|
6
|
-
"200": { "value": "#
|
|
7
|
-
"300": { "value": "#
|
|
8
|
-
"400": { "value": "#
|
|
9
|
-
"500": { "value": "#
|
|
10
|
-
"600": { "value": "#
|
|
11
|
-
"700": { "value": "#
|
|
12
|
-
"800": { "value": "#
|
|
13
|
-
"900": { "value": "#
|
|
14
|
-
"950": { "value": "#
|
|
4
|
+
"50": { "value": "#EBF8F8" },
|
|
5
|
+
"100": { "value": "#DBF0F0" },
|
|
6
|
+
"200": { "value": "#BCE1E1" },
|
|
7
|
+
"300": { "value": "#97CDCC" },
|
|
8
|
+
"400": { "value": "#6AB1B1" },
|
|
9
|
+
"500": { "value": "#429797" },
|
|
10
|
+
"600": { "value": "#0F7078" },
|
|
11
|
+
"700": { "value": "#0F6363" },
|
|
12
|
+
"800": { "value": "#07494A" },
|
|
13
|
+
"900": { "value": "#0B3232" },
|
|
14
|
+
"950": { "value": "#061B1B" }
|
|
15
15
|
},
|
|
16
16
|
"secondary": {
|
|
17
|
-
"50": { "value": "#
|
|
18
|
-
"100": { "value": "#
|
|
19
|
-
"200": { "value": "#
|
|
20
|
-
"300": { "value": "#
|
|
21
|
-
"400": { "value": "#
|
|
22
|
-
"500": { "value": "#
|
|
23
|
-
"600": { "value": "#
|
|
24
|
-
"700": { "value": "#
|
|
25
|
-
"800": { "value": "#
|
|
26
|
-
"900": { "value": "#
|
|
27
|
-
"950": { "value": "#
|
|
17
|
+
"50": { "value": "#EAF8FA" },
|
|
18
|
+
"100": { "value": "#DAF0F3" },
|
|
19
|
+
"200": { "value": "#BBE1E5" },
|
|
20
|
+
"300": { "value": "#96CCD2" },
|
|
21
|
+
"400": { "value": "#69B1B9" },
|
|
22
|
+
"500": { "value": "#40969F" },
|
|
23
|
+
"600": { "value": "#0F6B7E" },
|
|
24
|
+
"700": { "value": "#0B626A" },
|
|
25
|
+
"800": { "value": "#04494F" },
|
|
26
|
+
"900": { "value": "#0A3135" },
|
|
27
|
+
"950": { "value": "#061B1D" }
|
|
28
28
|
},
|
|
29
29
|
"accent": {
|
|
30
|
-
"50": { "value": "#
|
|
31
|
-
"100": { "value": "#
|
|
32
|
-
"200": { "value": "#
|
|
33
|
-
"300": { "value": "#
|
|
34
|
-
"400": { "value": "#
|
|
35
|
-
"500": { "value": "#
|
|
36
|
-
"600": { "value": "#
|
|
37
|
-
"700": { "value": "#
|
|
38
|
-
"800": { "value": "#
|
|
39
|
-
"900": { "value": "#
|
|
40
|
-
"950": { "value": "#
|
|
30
|
+
"50": { "value": "#F0F5FF" },
|
|
31
|
+
"100": { "value": "#E2EBFF" },
|
|
32
|
+
"200": { "value": "#C8D9FC" },
|
|
33
|
+
"300": { "value": "#A3C0FF" },
|
|
34
|
+
"400": { "value": "#769FFD" },
|
|
35
|
+
"500": { "value": "#4C7EFB" },
|
|
36
|
+
"600": { "value": "#3A4BC9" },
|
|
37
|
+
"700": { "value": "#254BB6" },
|
|
38
|
+
"800": { "value": "#19378A" },
|
|
39
|
+
"900": { "value": "#12265D" },
|
|
40
|
+
"950": { "value": "#081534" }
|
|
41
41
|
},
|
|
42
42
|
"neutral": {
|
|
43
43
|
"0": { "value": "#FFFFFF" },
|
|
44
|
-
"50": { "value": "#
|
|
45
|
-
"100": { "value": "#
|
|
46
|
-
"200": { "value": "#
|
|
47
|
-
"300": { "value": "#
|
|
48
|
-
"400": { "value": "#
|
|
49
|
-
"500": { "value": "#
|
|
50
|
-
"600": { "value": "#
|
|
51
|
-
"700": { "value": "#
|
|
52
|
-
"800": { "value": "#
|
|
53
|
-
"900": { "value": "#
|
|
54
|
-
"950": { "value": "#
|
|
44
|
+
"50": { "value": "#F5F8F3" },
|
|
45
|
+
"100": { "value": "#EBEEE9" },
|
|
46
|
+
"200": { "value": "#D6DBD5" },
|
|
47
|
+
"300": { "value": "#B6BFB9" },
|
|
48
|
+
"400": { "value": "#8E9C98" },
|
|
49
|
+
"500": { "value": "#66787B" },
|
|
50
|
+
"600": { "value": "#4A5362" },
|
|
51
|
+
"700": { "value": "#313E4B" },
|
|
52
|
+
"800": { "value": "#202B39" },
|
|
53
|
+
"900": { "value": "#0D1825" },
|
|
54
|
+
"950": { "value": "#010714" }
|
|
55
55
|
},
|
|
56
56
|
"success": {
|
|
57
|
-
"50": { "value": "#
|
|
58
|
-
"100": { "value": "#
|
|
59
|
-
"200": { "value": "#
|
|
60
|
-
"300": { "value": "#
|
|
61
|
-
"400": { "value": "#
|
|
62
|
-
"500": { "value": "#
|
|
63
|
-
"600": { "value": "#
|
|
64
|
-
"700": { "value": "#
|
|
65
|
-
"800": { "value": "#
|
|
66
|
-
"900": { "value": "#
|
|
67
|
-
"950": { "value": "#
|
|
57
|
+
"50": { "value": "#EAFAEC" },
|
|
58
|
+
"100": { "value": "#DAF3DE" },
|
|
59
|
+
"200": { "value": "#BAE6C2" },
|
|
60
|
+
"300": { "value": "#94D3A1" },
|
|
61
|
+
"400": { "value": "#66B879" },
|
|
62
|
+
"500": { "value": "#3B9E58" },
|
|
63
|
+
"600": { "value": "#0E8A4A" },
|
|
64
|
+
"700": { "value": "#146831" },
|
|
65
|
+
"800": { "value": "#0B4D23" },
|
|
66
|
+
"900": { "value": "#073516" },
|
|
67
|
+
"950": { "value": "#051D0B" }
|
|
68
68
|
},
|
|
69
69
|
"warning": {
|
|
70
|
-
"50": { "value": "#
|
|
71
|
-
"100": { "value": "#
|
|
72
|
-
"200": { "value": "#
|
|
73
|
-
"300": { "value": "#
|
|
74
|
-
"400": { "value": "#
|
|
75
|
-
"500": { "value": "#
|
|
76
|
-
"600": { "value": "#
|
|
77
|
-
"700": { "value": "#
|
|
78
|
-
"800": { "value": "#
|
|
79
|
-
"900": { "value": "#
|
|
80
|
-
"950": { "value": "#
|
|
70
|
+
"50": { "value": "#FFF3EA" },
|
|
71
|
+
"100": { "value": "#FEE6D4" },
|
|
72
|
+
"200": { "value": "#FACFAE" },
|
|
73
|
+
"300": { "value": "#EEB383" },
|
|
74
|
+
"400": { "value": "#DA904F" },
|
|
75
|
+
"500": { "value": "#C2711C" },
|
|
76
|
+
"600": { "value": "#B8650E" },
|
|
77
|
+
"700": { "value": "#804605" },
|
|
78
|
+
"800": { "value": "#603301" },
|
|
79
|
+
"900": { "value": "#422202" },
|
|
80
|
+
"950": { "value": "#261101" }
|
|
81
81
|
},
|
|
82
82
|
"error": {
|
|
83
|
-
"50": { "value": "#
|
|
84
|
-
"100": { "value": "#
|
|
85
|
-
"200": { "value": "#
|
|
86
|
-
"300": { "value": "#
|
|
87
|
-
"400": { "value": "#
|
|
88
|
-
"500": { "value": "#
|
|
89
|
-
"600": { "value": "#
|
|
90
|
-
"700": { "value": "#
|
|
91
|
-
"800": { "value": "#
|
|
92
|
-
"900": { "value": "#
|
|
93
|
-
"950": { "value": "#
|
|
83
|
+
"50": { "value": "#FFF2F0" },
|
|
84
|
+
"100": { "value": "#FEE5E1" },
|
|
85
|
+
"200": { "value": "#FCCBC4" },
|
|
86
|
+
"300": { "value": "#FDA79C" },
|
|
87
|
+
"400": { "value": "#FC7264" },
|
|
88
|
+
"500": { "value": "#E5493E" },
|
|
89
|
+
"600": { "value": "#C92A2A" },
|
|
90
|
+
"700": { "value": "#A21312" },
|
|
91
|
+
"800": { "value": "#7A090A" },
|
|
92
|
+
"900": { "value": "#530D0A" },
|
|
93
|
+
"950": { "value": "#2F0806" }
|
|
94
94
|
},
|
|
95
95
|
"info": {
|
|
96
|
-
"50": { "value": "#
|
|
97
|
-
"100": { "value": "#
|
|
98
|
-
"200": { "value": "#
|
|
99
|
-
"300": { "value": "#
|
|
100
|
-
"400": { "value": "#
|
|
101
|
-
"500": { "value": "#
|
|
102
|
-
"600": { "value": "#
|
|
103
|
-
"700": { "value": "#
|
|
104
|
-
"800": { "value": "#
|
|
105
|
-
"900": { "value": "#
|
|
106
|
-
"950": { "value": "#
|
|
96
|
+
"50": { "value": "#EFF6FE" },
|
|
97
|
+
"100": { "value": "#DDEDFF" },
|
|
98
|
+
"200": { "value": "#BEDCFC" },
|
|
99
|
+
"300": { "value": "#93C6FA" },
|
|
100
|
+
"400": { "value": "#4EA8FE" },
|
|
101
|
+
"500": { "value": "#0C8BEB" },
|
|
102
|
+
"600": { "value": "#1B6FD4" },
|
|
103
|
+
"700": { "value": "#0E5997" },
|
|
104
|
+
"800": { "value": "#064172" },
|
|
105
|
+
"900": { "value": "#052D4F" },
|
|
106
|
+
"950": { "value": "#001830" }
|
|
107
107
|
},
|
|
108
108
|
"text": {
|
|
109
109
|
"primary": { "value": "var(--hx-color-neutral-900)" },
|
|
110
|
-
"
|
|
111
|
-
|
|
110
|
+
"strong": {
|
|
111
|
+
"value": "var(--hx-color-neutral-800)",
|
|
112
|
+
"description": "Strong text for labels and headings. Sits between primary and secondary in weight."
|
|
113
|
+
},
|
|
114
|
+
"secondary": {
|
|
115
|
+
"value": "var(--hx-color-neutral-700)",
|
|
116
|
+
"description": "Secondary body text. Bumped from neutral-600 to neutral-700 in 3.2.0 alongside text.muted moving from neutral-500 to neutral-600 — preserves the primary > strong > secondary > muted hierarchy now that muted occupies the slot secondary used to live in. neutral-700 (#313E4B) on surface.default (#FFFFFF) = 10.93:1, on surface.raised (#F5F8F3) = 10.20:1, on surface.sunken (#EBEEE9) = 9.34:1 — all AAA."
|
|
117
|
+
},
|
|
118
|
+
"muted": {
|
|
119
|
+
"value": "var(--hx-color-neutral-600)",
|
|
120
|
+
"description": "Muted body text. Bumped from neutral-500 to neutral-600 in 3.2.0. The new precision-cool neutral-500 (#66787B) on surface.raised (#F5F8F3) = 4.32:1 — fails the 4.5:1 body-text floor. neutral-600 (#4A5362) on surface.raised = 7.25:1, on surface.default = 7.76:1, on surface.sunken = 6.63:1 — AA pass everywhere. Pre-existing palette bug from commit 2 caught by the new contrast regression matrix."
|
|
121
|
+
},
|
|
122
|
+
"placeholder": {
|
|
123
|
+
"value": "var(--hx-color-neutral-500)",
|
|
124
|
+
"description": "Placeholder text in form inputs. Distinct from muted so it can diverge per mode — placeholders must remain clearly non-value across themes."
|
|
125
|
+
},
|
|
112
126
|
"disabled": { "value": "var(--hx-color-neutral-400)" },
|
|
113
127
|
"inverse": { "value": "var(--hx-color-neutral-0)" },
|
|
114
|
-
"on-primary": {
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
128
|
+
"on-primary": {
|
|
129
|
+
"value": "var(--hx-color-neutral-900)",
|
|
130
|
+
"description": "Dark text on primary surface. neutral-0 (white) on the precision-cool primary-500 (#429797) was 3.44:1 — WCAG AA fail. neutral-900 on primary-500 = 5.20:1 (AA pass). Matches the on-success/on-warning pattern."
|
|
131
|
+
},
|
|
132
|
+
"on-secondary": {
|
|
133
|
+
"value": "var(--hx-color-neutral-900)",
|
|
134
|
+
"description": "Dark text on secondary surface. neutral-0 on the precision-cool secondary-500 (#40969F) was 3.45:1 — WCAG AA fail. neutral-900 on secondary-500 = 5.18:1 (AA pass)."
|
|
135
|
+
},
|
|
136
|
+
"on-error": {
|
|
137
|
+
"value": "var(--hx-color-neutral-900)",
|
|
138
|
+
"description": "Dark text on error surface. neutral-0 on the precision-cool error-500 (#E5493E) was 3.92:1 — WCAG AA fail. neutral-900 on error-500 = 4.56:1 (AA pass)."
|
|
139
|
+
},
|
|
140
|
+
"on-success": {
|
|
141
|
+
"value": "var(--hx-color-neutral-900)",
|
|
142
|
+
"description": "Dark text on success surface. neutral-0 (white) on the precision-cool success-500 (#3B9E58) is 3.38:1 — WCAG AA fail for body text. neutral-900 on success-500 = 5.29:1 (AA pass). Matches the on-warning pattern."
|
|
143
|
+
},
|
|
118
144
|
"on-warning": { "value": "var(--hx-color-neutral-900)" },
|
|
119
|
-
"on-info": {
|
|
145
|
+
"on-info": {
|
|
146
|
+
"value": "var(--hx-color-neutral-900)",
|
|
147
|
+
"description": "Dark text on info surface. neutral-0 on the precision-cool info-500 (#0C8BEB) was 3.55:1 — WCAG AA fail. neutral-900 on info-500 = 5.03:1 (AA pass)."
|
|
148
|
+
},
|
|
149
|
+
"on-primary-strong": {
|
|
150
|
+
"value": "var(--hx-color-neutral-0)",
|
|
151
|
+
"description": "White text override for primary surfaces darker than primary-500 (i.e. primary-600 hover, primary-700 active). The AA-tuned text.on-primary (neutral-900) only meets AA against primary-500; on primary-600 (#0F7078) it drops to 3.07:1 and on primary-700 (#0F6363) to 2.54:1 — both AA fails. neutral-0 on primary-600 = 5.82:1 (AA pass) and on primary-700 = 7.03:1 (AA pass). Added in 3.2.1 to remediate the token-cascade campaign findings where component variants were pinning to neutral-0 directly to escape this exact AA gap; routes the white-on-darker-primary pin through the semantic tier instead of the raw primitive."
|
|
152
|
+
},
|
|
153
|
+
"on-success-strong": {
|
|
154
|
+
"value": "var(--hx-color-neutral-0)",
|
|
155
|
+
"description": "White text override for success surfaces darker than success-500 (i.e. the success-700 #146831 fill that hx-toast--success and other emphasis-success surfaces paint). The AA-tuned text.on-success (neutral-900) only meets AA against success-500 (#3B9E58 = 5.29:1); on success-700 it drops to 2.60:1 — AA fail. neutral-0 on success-700 = 6.88:1 AA pass. Sister token to text.on-primary-strong / text.on-error-strong; same 3.2.1 token-cascade rationale (route the white-on-darker-success pin through the semantic tier instead of letting components consume neutral-0 directly)."
|
|
156
|
+
},
|
|
157
|
+
"on-error-strong": {
|
|
158
|
+
"value": "var(--hx-color-neutral-0)",
|
|
159
|
+
"description": "White text override for error surfaces darker than error-500 (i.e. error-600 hover, error-700 active). The AA-tuned text.on-error (neutral-900) only meets AA against error-500; on error-600 (#C92A2A) it drops to 3.28:1 and on error-700 (#A21312) to 2.25:1 — both AA fails. neutral-0 on error-600 = 5.46:1 (AA pass) and on error-700 = 7.96:1 (AA pass). Sister token to text.on-primary-strong; same 3.2.1 token-cascade remediation rationale."
|
|
160
|
+
},
|
|
120
161
|
"link": { "value": "var(--hx-color-primary-600)" },
|
|
121
162
|
"link-hover": { "value": "var(--hx-color-primary-700)" },
|
|
122
163
|
"link-visited": { "value": "var(--hx-color-secondary-600)" },
|
|
@@ -124,28 +165,133 @@
|
|
|
124
165
|
},
|
|
125
166
|
"error-text": {
|
|
126
167
|
"value": "var(--hx-color-error-600)",
|
|
127
|
-
"description": "WCAG AA compliant error text color (4.5:1+ contrast on white). Use for error text, labels, and validation messages. #
|
|
168
|
+
"description": "WCAG AA compliant error text color (4.5:1+ contrast on white). Use for error text, labels, and validation messages. #C92A2A = 5.46:1 on white."
|
|
128
169
|
},
|
|
129
170
|
"success-text": {
|
|
130
|
-
"value": "var(--hx-color-success-
|
|
131
|
-
"description": "WCAG AA compliant success text color (4.5:1+ contrast on white). Use for success text and confirmation messages. #
|
|
171
|
+
"value": "var(--hx-color-success-700)",
|
|
172
|
+
"description": "WCAG AA compliant success text color (4.5:1+ contrast on white). Use for success text and confirmation messages. #146831 = 6.88:1 on white. Rebound from success-600 in 3.2.0 because the new 'precision cool' success-600 (#0E8A4A = 4.42:1) drifted under AA; success-700 restores AA headroom."
|
|
132
173
|
},
|
|
133
174
|
"surface": {
|
|
134
175
|
"default": { "value": "var(--hx-color-neutral-0)" },
|
|
135
176
|
"raised": { "value": "var(--hx-color-neutral-50)" },
|
|
136
177
|
"sunken": { "value": "var(--hx-color-neutral-100)" },
|
|
137
|
-
"
|
|
178
|
+
"inverse": {
|
|
179
|
+
"value": "var(--hx-color-neutral-900)",
|
|
180
|
+
"description": "Inverse surface for dark-always components (tooltips, inverse nav). Flips to a light surface in dark mode; uses system Canvas in forced-colors."
|
|
181
|
+
},
|
|
182
|
+
"overlay": { "value": "rgba(0, 0, 0, 0.75)" },
|
|
183
|
+
"success-strong": {
|
|
184
|
+
"value": "var(--hx-color-success-700)",
|
|
185
|
+
"description": "Emphasis success surface for high-prominence components (e.g. hx-toast--success). Pairs with text.on-success-strong (neutral-0, no dark-mode flip) for AA — neutral-0 on success-700 (#146831) = 6.88:1. Do NOT pair with text.inverse: surface.success-strong itself does not dark-mode-flip (the value stays success-700 in light and dark), but text.inverse does flip to neutral-900 in dark mode — pairing the two produces dark text on a dark fill (sub-AA). Added in 3.2.1 to route the toast variant fills through the semantic tier instead of consuming success-700 directly."
|
|
186
|
+
},
|
|
187
|
+
"warning-strong": {
|
|
188
|
+
"value": "var(--hx-color-warning-500)",
|
|
189
|
+
"description": "Emphasis warning surface for high-prominence components (e.g. hx-toast--warning). Pairs with text.on-warning (neutral-900) for AA — neutral-900 on warning-500 (#C2711C) = 4.83:1. Stays on the lighter -500 stop because warning's on-token contract is tuned for it; see toast variant rationale."
|
|
190
|
+
},
|
|
191
|
+
"danger-strong": {
|
|
192
|
+
"value": "var(--hx-color-error-600)",
|
|
193
|
+
"description": "Emphasis danger surface for high-prominence components (e.g. hx-toast--danger). Pairs with text.on-error-strong (neutral-0, no dark-mode flip) for AA — neutral-0 on error-600 (#C92A2A) = 5.46:1. Do NOT pair with text.inverse: surface.danger-strong itself does not dark-mode-flip (the value stays error-600 in light and dark), but text.inverse does flip to neutral-900 in dark mode — pairing the two produces dark text on a dark fill (sub-AA). Tracks action.danger.bg-hover by value (also error-600) but is exposed as a surface semantic so non-interactive consumers (toasts, banners) don't reach into the action.* hover state to find it."
|
|
194
|
+
},
|
|
195
|
+
"info-strong": {
|
|
196
|
+
"value": "var(--hx-color-primary-600)",
|
|
197
|
+
"description": "Emphasis info surface for high-prominence components (e.g. hx-toast--info). Pairs with text.on-primary-strong (neutral-0, no dark-mode flip) for AA — neutral-0 on primary-600 (#0F7078) = 5.82:1. Do NOT pair with text.inverse: surface.info-strong itself does not dark-mode-flip (the value stays primary-600 in light and dark), but text.inverse does flip to neutral-900 in dark mode — pairing the two produces dark text on a dark fill (sub-AA). Tracks action.primary.bg-hover by value but exposed under surface.* so toasts/banners consume a surface semantic, not an action-state semantic."
|
|
198
|
+
},
|
|
199
|
+
"on-dark-overlay-default": {
|
|
200
|
+
"value": "var(--hx-overlay-white-30)",
|
|
201
|
+
"description": "Translucent fill on dark surfaces — the resting/hover background for inverted secondary, ghost, and tertiary buttons painted on surface.inverse (which is dark in light mode, light in dark mode). Renamed from border.on-dark-default in 3.2.2: it was always used as a fill, never a border, and its 30% alpha cannot honour WCAG 1.4.11 3:1 against either neutral-900 (2.07:1) or neutral-0 (1.30:1) — borders need higher alpha. As a fill, contrast is irrelevant: it tints, it doesn't delimit."
|
|
202
|
+
},
|
|
203
|
+
"on-dark-overlay-subtle": {
|
|
204
|
+
"value": "var(--hx-overlay-white-10)",
|
|
205
|
+
"description": "Lowest-emphasis translucent fill on dark surfaces — the resting background for inverted-tertiary buttons and inverted hover affordances on dark side-nav. Renamed from border.on-dark-subtle in 3.2.2 for the same reason as on-dark-overlay-default: it is a fill, not a border."
|
|
206
|
+
}
|
|
138
207
|
},
|
|
139
208
|
"border": {
|
|
140
209
|
"default": { "value": "var(--hx-color-neutral-200)" },
|
|
141
210
|
"subtle": { "value": "var(--hx-color-neutral-100)" },
|
|
142
|
-
"strong": {
|
|
143
|
-
|
|
211
|
+
"strong": {
|
|
212
|
+
"value": "var(--hx-color-neutral-500)",
|
|
213
|
+
"description": "Strong border for state-conveying form-control borders (text input, select, checkbox, radio, switch track, file upload dropzone, side-nav dividers, etc.). Light-mode pairs with surface.default (white) at 4.63:1 — clears the WCAG 1.4.11 3:1 floor for non-text UI components and the 3:1 floor for state-conveying borders. Pre-3.2.2 this was neutral-400 (#8E9C98) which lands at 2.85:1 on white — a sub-3:1 fail systemic to every form-control border across the library. Dark mode flips to neutral-400 (#8E9C98 on #0D1825 = 6.27:1) via the dark.color.border.strong override — the flip both preserves mode differentiation (outline button parity) and keeps the dark border bright enough to remain crisp on the dark page."
|
|
214
|
+
},
|
|
215
|
+
"focus": { "value": "var(--hx-color-primary-500)" },
|
|
216
|
+
"on-dark-strong": {
|
|
217
|
+
"value": "var(--hx-overlay-white-70)",
|
|
218
|
+
"description": "Strong border treatment on dark surfaces (e.g. inverted button outlines on a dark page). overlay-white-70 on neutral-900 ≈ 5.0:1 — clears WCAG 1.4.11 3:1 floor for non-text UI. Added in 3.2.1 alongside the action.* layer for the token-cascade remediation; only the strong tier survived the 3.2.2 audit because the lower-alpha siblings (overlay-white-30/10) cannot honour a border-contract — they were renamed to surface.on-dark-overlay-* (which is what they always were: translucent fills)."
|
|
219
|
+
}
|
|
220
|
+
},
|
|
221
|
+
"focus-ring": {
|
|
222
|
+
"value": "var(--hx-color-primary-600)",
|
|
223
|
+
"description": "Light-mode focus-ring color. Pairs with surface.default (white) at 5.82:1 — clears the WCAG 1.4.11 3:1 floor for non-text UI components with comfortable headroom. Pre-3.2.2 this resolved to primary-400 (#6AB1B1) which lands at 2.45:1 on white — a sub-3:1 fail for any focus indicator drawn at full opacity (outline-style focus on hx-link, border-flip on hx-text-input, etc.). The dark.color.focus-ring override keeps primary-400 because primary-400 on dark surface.default = 7.27:1 (AA pass) while primary-600 on dark = 3.07:1 (just below 3:1 floor). Color-mix box-shadow ring treatments (hx-text-input wrapper) layer their alpha on top of this base; the change only sharpens, never weakens, the ring against light surfaces."
|
|
144
224
|
},
|
|
145
|
-
"focus-ring": { "value": "var(--hx-color-primary-400)" },
|
|
146
225
|
"selection": {
|
|
147
226
|
"bg": { "value": "var(--hx-color-primary-200)" },
|
|
148
227
|
"color": { "value": "var(--hx-color-neutral-900)" }
|
|
228
|
+
},
|
|
229
|
+
"action": {
|
|
230
|
+
"_comment": "Semantic action surfaces — the interactive-state layer between the primitive ramp (color.{role}.{stop}) and component-tier overrides (--hx-{component}-bg, --hx-{component}-hover-bg, etc). Pre-3.2.1, components reached straight to ramp stops (e.g. --hx-button-bg: var(--hx-color-primary-500)) which violated the three-tier cascade contract — consumers had no themable hook between the primitive and the component. The token-cascade campaign found 21 high-severity bare-primitive consumptions across hx-button, hx-toast, and hx-side-nav/hx-nav-item; this block is the systemic fix. Components rebind their --hx-{component}-bg etc. through these semantics so theme overrides at the action.* tier propagate everywhere.",
|
|
231
|
+
"primary": {
|
|
232
|
+
"bg": {
|
|
233
|
+
"value": "var(--hx-color-primary-500)",
|
|
234
|
+
"description": "Resting interactive primary surface (button bg, active nav-item bg, primary toast bg). Resolves to primary-500 in light/dark and the HC primary-500 override in HC."
|
|
235
|
+
},
|
|
236
|
+
"bg-inverted-rest": {
|
|
237
|
+
"value": "var(--hx-color-primary-500)",
|
|
238
|
+
"description": "Resting state for primary surfaces that live on the inverse surface (e.g. inverted-mode primary buttons). Tracks action.primary.bg (primary-500) in light mode where surface.inverse is dark (#0D1825) and primary-500 lands at 5.20:1. Dark-mode override flips to primary-600 because surface.inverse becomes light (#EBEEE9) in dark mode and primary-500 on light = 2.94:1 (sub-3:1 fail for the WCAG 1.4.11 UI-component boundary). Decoupled from action.primary.bg so the standard non-inverted button keeps its primary-500 fill against the dark page in dark mode (the documented architectural intent — see dark.action._comment)."
|
|
239
|
+
},
|
|
240
|
+
"bg-hover": {
|
|
241
|
+
"value": "var(--hx-color-primary-600)",
|
|
242
|
+
"description": "Hover state for interactive primary surfaces. Pairs with text.on-primary-strong (neutral-0) for AA — primary-600 on neutral-0 = 5.82:1."
|
|
243
|
+
},
|
|
244
|
+
"bg-active": {
|
|
245
|
+
"value": "var(--hx-color-primary-700)",
|
|
246
|
+
"description": "Active/pressed state for interactive primary surfaces. Pairs with text.on-primary-strong (neutral-0) — primary-700 on neutral-0 = 7.03:1 AA."
|
|
247
|
+
},
|
|
248
|
+
"bg-inverted-hover": {
|
|
249
|
+
"value": "var(--hx-color-primary-400)",
|
|
250
|
+
"description": "Hover state for primary surfaces that live on a dark/inverted background — flips lighter rather than darker so the affordance reads against an already-dark page. Matches the precision-cool inverted-button hover pattern in hx-button."
|
|
251
|
+
}
|
|
252
|
+
},
|
|
253
|
+
"secondary": {
|
|
254
|
+
"fg": {
|
|
255
|
+
"value": "var(--hx-color-primary-600)",
|
|
256
|
+
"description": "Foreground (text + icon) color for resting secondary/outline interactive treatments. primary-600 on surface.default = 5.82:1 AA."
|
|
257
|
+
},
|
|
258
|
+
"border": {
|
|
259
|
+
"value": "var(--hx-color-primary-600)",
|
|
260
|
+
"description": "Border color for resting secondary/outline interactive treatments. Matches action.secondary.fg so the affordance reads as a single chromatic outline."
|
|
261
|
+
},
|
|
262
|
+
"bg-hover": {
|
|
263
|
+
"value": "var(--hx-color-primary-50)",
|
|
264
|
+
"description": "Hover surface fill for secondary/outline interactive treatments — the lightest primary tint (#EBF8F8) so the hover affordance is felt without flipping to a full primary fill. Foreground stays bound to action.secondary.fg in the consuming component."
|
|
265
|
+
}
|
|
266
|
+
},
|
|
267
|
+
"ghost": {
|
|
268
|
+
"fg": {
|
|
269
|
+
"value": "var(--hx-color-primary-600)",
|
|
270
|
+
"description": "Foreground color for resting ghost (text-only, no border) interactive treatments. Shares its value with action.secondary.fg by design — ghost is secondary minus the outline — but kept as a separate semantic so theming can diverge if a brand wants ghost ≠ secondary."
|
|
271
|
+
},
|
|
272
|
+
"bg-hover": {
|
|
273
|
+
"value": "var(--hx-color-primary-50)",
|
|
274
|
+
"description": "Hover surface fill for ghost interactive treatments. Mirrors action.secondary.bg-hover; same divergence rationale."
|
|
275
|
+
}
|
|
276
|
+
},
|
|
277
|
+
"danger": {
|
|
278
|
+
"bg": {
|
|
279
|
+
"value": "var(--hx-color-error-500)",
|
|
280
|
+
"description": "Resting interactive danger surface (destructive button bg, danger toast bg). Pairs with text.on-error (neutral-900, AA-tuned) on error-500."
|
|
281
|
+
},
|
|
282
|
+
"bg-hover": {
|
|
283
|
+
"value": "var(--hx-color-error-600)",
|
|
284
|
+
"description": "Hover state for danger surfaces. Pairs with text.on-error-strong (neutral-0) for AA — error-600 on neutral-0 = 5.46:1."
|
|
285
|
+
},
|
|
286
|
+
"bg-active": {
|
|
287
|
+
"value": "var(--hx-color-error-700)",
|
|
288
|
+
"description": "Active/pressed state for danger surfaces. Pairs with text.on-error-strong (neutral-0) — error-700 on neutral-0 = 7.96:1 AA."
|
|
289
|
+
},
|
|
290
|
+
"bg-inverted-hover": {
|
|
291
|
+
"value": "var(--hx-color-error-400)",
|
|
292
|
+
"description": "Hover/pressed state for danger surfaces that live on a dark/inverted background — flips lighter rather than darker so the affordance reads against an already-dark page. error-400 (#FC7264) on surface.inverse (neutral-900, #0D1825) = 6.58:1, clears the WCAG 1.4.11 3:1 UI floor. Sister token to action.primary.bg-inverted-hover; added in 3.2.1 round-7 to close the inverted-mode :active regression where base error-700 (#A21312) on dark surface dropped to ~3:1."
|
|
293
|
+
}
|
|
294
|
+
}
|
|
149
295
|
}
|
|
150
296
|
},
|
|
151
297
|
"body": {
|
|
@@ -299,7 +445,10 @@
|
|
|
299
445
|
}
|
|
300
446
|
},
|
|
301
447
|
"focus": {
|
|
302
|
-
"ring-color": {
|
|
448
|
+
"ring-color": {
|
|
449
|
+
"value": "var(--hx-color-primary-600)",
|
|
450
|
+
"description": "Light-mode focus ring color. Mirrors color.focus-ring (primary-600 = #0F7078, 5.82:1 on white surface — AA pass for the 3:1 UI-component floor). Pre-3.2.2 this was primary-400 (#6AB1B1, 2.45:1 on white — sub-3:1 fail). Dark mode keeps primary-400 via dark.focus.ring-color override (7.27:1 on dark surface)."
|
|
451
|
+
},
|
|
303
452
|
"ring-width": { "value": "2px" },
|
|
304
453
|
"ring-offset": { "value": "2px" },
|
|
305
454
|
"ring-style": { "value": "solid" },
|
|
@@ -417,20 +566,20 @@
|
|
|
417
566
|
},
|
|
418
567
|
"primary": {
|
|
419
568
|
"25": {
|
|
420
|
-
"value": "rgba(
|
|
421
|
-
"description": "Primary-500 at 25% — focus ring fallback for browsers without color-mix()"
|
|
569
|
+
"value": "rgba(66, 151, 151, 0.25)",
|
|
570
|
+
"description": "Primary-500 (#429797) at 25% — focus ring fallback for browsers without color-mix()"
|
|
422
571
|
}
|
|
423
572
|
},
|
|
424
573
|
"error": {
|
|
425
574
|
"25": {
|
|
426
|
-
"value": "rgba(
|
|
427
|
-
"description": "Error-500 at 25% — error focus ring fallback for browsers without color-mix()"
|
|
575
|
+
"value": "rgba(229, 73, 62, 0.25)",
|
|
576
|
+
"description": "Error-500 (#E5493E) at 25% — error focus ring fallback for browsers without color-mix()"
|
|
428
577
|
}
|
|
429
578
|
},
|
|
430
579
|
"neutral": {
|
|
431
580
|
"12": {
|
|
432
|
-
"value": "rgba(13,
|
|
433
|
-
"description": "Neutral-900 at 12% — listbox shadow fallback for browsers without color-mix()"
|
|
581
|
+
"value": "rgba(13, 24, 37, 0.12)",
|
|
582
|
+
"description": "Neutral-900 (#0D1825) at 12% — listbox shadow fallback for browsers without color-mix()"
|
|
434
583
|
}
|
|
435
584
|
}
|
|
436
585
|
},
|
|
@@ -451,17 +600,25 @@
|
|
|
451
600
|
"color": {
|
|
452
601
|
"error-text": {
|
|
453
602
|
"value": "var(--hx-color-error-400)",
|
|
454
|
-
"description": "WCAG AA compliant error text for dark backgrounds. #F87171 = 6.
|
|
603
|
+
"description": "WCAG AA compliant error text for dark backgrounds. #F87171 = 6.46:1 on neutral-900 dark surface."
|
|
455
604
|
},
|
|
456
605
|
"success-text": {
|
|
457
606
|
"value": "var(--hx-color-success-400)",
|
|
458
|
-
"description": "WCAG AA compliant success text for dark backgrounds. #4ADE80 = 10.
|
|
607
|
+
"description": "WCAG AA compliant success text for dark backgrounds. #4ADE80 = 10.26:1 on neutral-900 dark surface."
|
|
459
608
|
},
|
|
460
609
|
"text": {
|
|
461
610
|
"primary": { "value": "var(--hx-color-neutral-100)" },
|
|
611
|
+
"strong": { "value": "var(--hx-color-neutral-50)" },
|
|
462
612
|
"secondary": { "value": "var(--hx-color-neutral-300)" },
|
|
463
613
|
"muted": { "value": "var(--hx-color-neutral-400)" },
|
|
464
|
-
"
|
|
614
|
+
"placeholder": {
|
|
615
|
+
"value": "var(--hx-color-neutral-400)",
|
|
616
|
+
"description": "Dark-mode placeholder bumped from neutral-500 to neutral-400 in 3.2.0. The new precision-cool neutral-500 (#66787B) sits at 3.86:1 on dark-mode surface.default (neutral-900 = #0D1825) — fails WCAG AA for form-input placeholder text. neutral-400 (#8E9C98) = 6.27:1, AA pass."
|
|
617
|
+
},
|
|
618
|
+
"disabled": {
|
|
619
|
+
"value": "var(--hx-color-neutral-500)",
|
|
620
|
+
"description": "Dark-mode disabled text. The precision-cool neutral-600 (#4A5362) on dark surface.default (#0D1825) = 2.30:1 — fails the 3:1 UI-component floor (disabled is WCAG-exempt under 1.4.3, but we still gate at 3:1 so it remains visibly distinct rather than invisible). Bumped to neutral-500 (#66787B) = 3.86:1, AA UI pass. Stays muted enough to read as 'disabled' (text.muted in dark mode is neutral-400 = 6.27:1, so disabled is meaningfully dimmer)."
|
|
621
|
+
},
|
|
465
622
|
"inverse": { "value": "var(--hx-color-neutral-900)" },
|
|
466
623
|
"link": { "value": "var(--hx-color-primary-400)" },
|
|
467
624
|
"link-hover": { "value": "var(--hx-color-primary-300)" },
|
|
@@ -469,27 +626,83 @@
|
|
|
469
626
|
"link-active": { "value": "var(--hx-color-primary-200)" }
|
|
470
627
|
},
|
|
471
628
|
"surface": {
|
|
629
|
+
"_comment": "Dark-mode surface.{role}-strong tokens intentionally do NOT flip — emphasis brand fills remain brand-colored against the dark page, matching the action.{primary,danger}.bg pattern (see action._comment above). The base light values resolve through the same primitives in dark mode.",
|
|
472
630
|
"default": { "value": "var(--hx-color-neutral-900)" },
|
|
473
631
|
"raised": { "value": "var(--hx-color-neutral-800)" },
|
|
474
632
|
"sunken": { "value": "var(--hx-color-neutral-950)" },
|
|
475
|
-
"
|
|
633
|
+
"inverse": { "value": "var(--hx-color-neutral-100)" },
|
|
634
|
+
"overlay": { "value": "rgba(0, 0, 0, 0.85)" },
|
|
635
|
+
"on-dark-overlay-default": {
|
|
636
|
+
"value": "var(--hx-overlay-black-30)",
|
|
637
|
+
"description": "Dark-mode override. surface.inverse flips light (#EBEEE9) in dark mode, so the base overlay-white-30 binding tints white-on-light (~1.05:1) and disappears. overlay-black-30 tints dark-on-light against the now-light inverse surface and reads correctly."
|
|
638
|
+
},
|
|
639
|
+
"on-dark-overlay-subtle": {
|
|
640
|
+
"value": "var(--hx-overlay-black-10)",
|
|
641
|
+
"description": "Dark-mode override mirroring on-dark-overlay-default's flip rationale. Lowest-emphasis tint on the (now-light in dark mode) inverse surface."
|
|
642
|
+
}
|
|
476
643
|
},
|
|
477
644
|
"border": {
|
|
478
645
|
"default": { "value": "var(--hx-color-neutral-700)" },
|
|
479
646
|
"subtle": { "value": "var(--hx-color-neutral-800)" },
|
|
480
|
-
"strong": {
|
|
481
|
-
|
|
647
|
+
"strong": {
|
|
648
|
+
"value": "var(--hx-color-neutral-400)",
|
|
649
|
+
"description": "Dark-mode override. Light mode binds border.strong to neutral-500 (#66787B); dark flips to neutral-400 (#8E9C98) so (a) the border resolves to a different value across modes — preserving the dark-mode-resolution outline-button parity contract — and (b) on dark surface.default (#0D1825) neutral-400 lands at 6.27:1, clearing the WCAG 1.4.11 3:1 floor with comfortable headroom (vs neutral-500's 3.86:1 dark-mode floor)."
|
|
650
|
+
},
|
|
651
|
+
"focus": { "value": "var(--hx-color-primary-400)" },
|
|
652
|
+
"on-dark-strong": {
|
|
653
|
+
"value": "var(--hx-overlay-black-50)",
|
|
654
|
+
"description": "Dark-mode override. surface.inverse flips light (#EBEEE9) in dark mode, so the original overlay-white-70 binding paints white-ish on light = 1.12:1 (invisible). overlay-black-50 over #EBEEE9 = 3.84:1, clears the WCAG 1.4.11 3:1 floor for inverted-mode button outlines and focus rings drawn on the (now-light) inverse surface. Symmetrical with the light-mode 70% intent: dark text on light reaches the equivalent perceptual strength at a lower alpha than light text on dark."
|
|
655
|
+
}
|
|
482
656
|
},
|
|
483
657
|
"focus-ring": { "value": "var(--hx-color-primary-400)" },
|
|
484
658
|
"selection": {
|
|
485
659
|
"bg": { "value": "var(--hx-color-primary-800)" },
|
|
486
660
|
"color": { "value": "var(--hx-color-neutral-100)" }
|
|
661
|
+
},
|
|
662
|
+
"action": {
|
|
663
|
+
"_comment": "Dark-mode overrides for the action.* semantic layer. Filled-action surfaces (primary.bg/bg-hover/bg-active, danger.*) intentionally do NOT flip in dark mode for the standard non-inverted button — the brand fill remains brand-colored against the dark page, which is the standard dark-theme treatment for primary/destructive buttons. Outline/ghost treatments DO flip: the resting fg primary-600 fails AA (3.07:1) on dark surface.default, and primary-50 hover-bg is far too bright on a dark page. Mirrors the dark.text.link cascade (light primary-600 link → dark primary-400 link). Inverted-rest filled surfaces (action.primary.bg-inverted-rest) ALSO flip — they paint on surface.inverse, which becomes light (#EBEEE9) in dark mode, and the brand-resting fill needs to clear the WCAG 1.4.11 3:1 UI-component floor against the now-light inverse surface.",
|
|
664
|
+
"primary": {
|
|
665
|
+
"bg-inverted-rest": {
|
|
666
|
+
"value": "var(--hx-color-primary-600)",
|
|
667
|
+
"description": "Dark-mode override. surface.inverse becomes light (#EBEEE9) in dark mode, and primary-500 on #EBEEE9 = 2.94:1 — sub-3:1 fail for the inverted-mode primary button boundary. primary-600 on #EBEEE9 = 4.97:1, clears the WCAG 1.4.11 floor with headroom. Sister to action.secondary.fg's dark flip (primary-600 → primary-400 — opposite direction because secondary.fg paints on surface.default whereas inverted-rest paints on surface.inverse)."
|
|
668
|
+
}
|
|
669
|
+
},
|
|
670
|
+
"secondary": {
|
|
671
|
+
"fg": {
|
|
672
|
+
"value": "var(--hx-color-primary-400)",
|
|
673
|
+
"description": "Dark-mode action.secondary.fg flips to primary-400 (#6AB1B1) — primary-600 on dark surface.default = 3.07:1 (AA fail). primary-400 = 7.27:1 (AA pass). Mirrors dark.text.link's primary-600→primary-400 flip."
|
|
674
|
+
},
|
|
675
|
+
"border": {
|
|
676
|
+
"value": "var(--hx-color-primary-400)",
|
|
677
|
+
"description": "Dark-mode action.secondary.border tracks the fg flip so the outline reads as a single chromatic affordance."
|
|
678
|
+
},
|
|
679
|
+
"bg-hover": {
|
|
680
|
+
"value": "var(--hx-color-primary-900)",
|
|
681
|
+
"description": "Dark-mode hover surface — primary-50 (light fill) on a dark page would be too bright. primary-900 (#0B3232) gives action.secondary.fg (primary-400 = #6AB1B1) on primary-900 = 5.63:1, AA pass. primary-800 was tested first but only reaches 4.14:1, just shy of the body-text floor."
|
|
682
|
+
}
|
|
683
|
+
},
|
|
684
|
+
"ghost": {
|
|
685
|
+
"fg": {
|
|
686
|
+
"value": "var(--hx-color-primary-400)",
|
|
687
|
+
"description": "Dark-mode action.ghost.fg flips to primary-400 alongside action.secondary.fg (same AA gap, same fix)."
|
|
688
|
+
},
|
|
689
|
+
"bg-hover": {
|
|
690
|
+
"value": "var(--hx-color-primary-900)",
|
|
691
|
+
"description": "Dark-mode action.ghost.bg-hover mirrors action.secondary.bg-hover (primary-900 for AA headroom over primary-800)."
|
|
692
|
+
}
|
|
693
|
+
}
|
|
487
694
|
}
|
|
488
695
|
},
|
|
489
696
|
"body": {
|
|
490
697
|
"bg": { "value": "var(--hx-color-surface-default)" },
|
|
491
698
|
"color": { "value": "var(--hx-color-text-primary)" }
|
|
492
699
|
},
|
|
700
|
+
"focus": {
|
|
701
|
+
"ring-color": {
|
|
702
|
+
"value": "var(--hx-color-primary-400)",
|
|
703
|
+
"description": "Dark-mode focus ring flips to primary-400 (#6AB1B1) — primary-600 on dark surface.default = 3.07:1 (sub-3:1 UI floor fail). primary-400 on dark surface = 7.27:1, AA pass. Mirrors the dark.color.focus-ring override and the dark.text.link cascade (primary-600 → primary-400)."
|
|
704
|
+
}
|
|
705
|
+
},
|
|
493
706
|
"shadow": {
|
|
494
707
|
"sm": { "value": "0 1px 2px 0 rgb(0 0 0 / 0.3)" },
|
|
495
708
|
"md": { "value": "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3)" },
|
|
@@ -501,45 +714,50 @@
|
|
|
501
714
|
"high-contrast": {
|
|
502
715
|
"color": {
|
|
503
716
|
"primary": {
|
|
504
|
-
"500": { "value": "#3B82F6", "description": "High-contrast primary —
|
|
505
|
-
"600": { "value": "#60A5FA", "description": "High-contrast primary-600 —
|
|
506
|
-
"700": { "value": "#93C5FD", "description": "High-contrast primary-700 —
|
|
717
|
+
"500": { "value": "#3B82F6", "description": "High-contrast primary — 5.71:1 on #000" },
|
|
718
|
+
"600": { "value": "#60A5FA", "description": "High-contrast primary-600 — 8.26:1 on #000" },
|
|
719
|
+
"700": { "value": "#93C5FD", "description": "High-contrast primary-700 — 11.65:1 on #000" }
|
|
507
720
|
},
|
|
508
721
|
"secondary": {
|
|
509
|
-
"500": { "value": "#22D3EE", "description": "High-contrast secondary —
|
|
722
|
+
"500": { "value": "#22D3EE", "description": "High-contrast secondary — 11.62:1 on #000" },
|
|
510
723
|
"600": {
|
|
511
724
|
"value": "#67E8F9",
|
|
512
|
-
"description": "High-contrast secondary-600 —
|
|
725
|
+
"description": "High-contrast secondary-600 — 14.49:1 on #000"
|
|
513
726
|
}
|
|
514
727
|
},
|
|
515
728
|
"error": {
|
|
516
|
-
"500": { "value": "#F87171", "description": "High-contrast error —
|
|
517
|
-
"600": { "value": "#FCA5A5", "description": "High-contrast error-600 —
|
|
729
|
+
"500": { "value": "#F87171", "description": "High-contrast error — 7.59:1 on #000" },
|
|
730
|
+
"600": { "value": "#FCA5A5", "description": "High-contrast error-600 — 11.06:1 on #000" }
|
|
518
731
|
},
|
|
519
732
|
"error-text": {
|
|
520
733
|
"value": "#FCA5A5",
|
|
521
|
-
"description": "WCAG AAA compliant error text on #000 surface —
|
|
734
|
+
"description": "WCAG AAA compliant error text on #000 surface — 11.06:1 contrast"
|
|
522
735
|
},
|
|
523
736
|
"warning": {
|
|
524
|
-
"500": { "value": "#FBBF24", "description": "High-contrast warning —
|
|
525
|
-
"600": { "value": "#FCD34D", "description": "High-contrast warning-600 —
|
|
737
|
+
"500": { "value": "#FBBF24", "description": "High-contrast warning — 12.58:1 on #000" },
|
|
738
|
+
"600": { "value": "#FCD34D", "description": "High-contrast warning-600 — 14.56:1 on #000" }
|
|
526
739
|
},
|
|
527
740
|
"success": {
|
|
528
|
-
"500": { "value": "#4ADE80", "description": "High-contrast success —
|
|
529
|
-
"600": { "value": "#86EFAC", "description": "High-contrast success-600 — 14.
|
|
741
|
+
"500": { "value": "#4ADE80", "description": "High-contrast success — 12.05:1 on #000" },
|
|
742
|
+
"600": { "value": "#86EFAC", "description": "High-contrast success-600 — 14.96:1 on #000" }
|
|
530
743
|
},
|
|
531
744
|
"success-text": {
|
|
532
745
|
"value": "#86EFAC",
|
|
533
|
-
"description": "WCAG AAA compliant success text on #000 surface — 14.
|
|
746
|
+
"description": "WCAG AAA compliant success text on #000 surface — 14.96:1 contrast"
|
|
534
747
|
},
|
|
535
748
|
"info": {
|
|
536
|
-
"500": { "value": "#38BDF8", "description": "High-contrast info —
|
|
537
|
-
"600": { "value": "#7DD3FC", "description": "High-contrast info-600 —
|
|
749
|
+
"500": { "value": "#38BDF8", "description": "High-contrast info — 9.80:1 on #000" },
|
|
750
|
+
"600": { "value": "#7DD3FC", "description": "High-contrast info-600 — 12.60:1 on #000" }
|
|
538
751
|
},
|
|
539
752
|
"text": {
|
|
540
753
|
"primary": { "value": "#FFFFFF", "description": "21:1 contrast on #000 — WCAG AAA" },
|
|
754
|
+
"strong": { "value": "#FFFFFF", "description": "21:1 contrast on #000 — WCAG AAA" },
|
|
541
755
|
"secondary": { "value": "#FFFFFF", "description": "21:1 contrast on #000" },
|
|
542
756
|
"muted": { "value": "#E0E0E0", "description": "~16:1 contrast on #000" },
|
|
757
|
+
"placeholder": {
|
|
758
|
+
"value": "#B0B0B0",
|
|
759
|
+
"description": "~9:1 contrast on #000 — clearly readable but distinct from entered text at 21:1"
|
|
760
|
+
},
|
|
543
761
|
"disabled": {
|
|
544
762
|
"value": "#767676",
|
|
545
763
|
"description": "4.5:1 contrast on #000 — WCAG AA minimum"
|
|
@@ -551,6 +769,18 @@
|
|
|
551
769
|
"on-success": { "value": "#000000", "description": "Black text on bright HC success" },
|
|
552
770
|
"on-warning": { "value": "#000000", "description": "Black text on bright HC warning" },
|
|
553
771
|
"on-info": { "value": "#000000", "description": "Black text on bright HC info" },
|
|
772
|
+
"on-primary-strong": {
|
|
773
|
+
"value": "#000000",
|
|
774
|
+
"description": "HC override for text.on-primary-strong. The light/dark value (neutral-0 / white) is unreadable on HC primary-600 (#60A5FA) and primary-700 (#93C5FD), which are bright fills. Black on HC primary-600 = 8.26:1, on HC primary-700 = 11.65:1 — both AAA. Mirrors the existing on-primary HC override pattern."
|
|
775
|
+
},
|
|
776
|
+
"on-error-strong": {
|
|
777
|
+
"value": "#000000",
|
|
778
|
+
"description": "HC override for text.on-error-strong. White is unreadable on HC error-600 (#FCA5A5 — light red). Black on HC error-600 = 11.06:1, AAA. action.danger.bg-active also has its own HC override (flips to HC error-500) so the base error-700 stop is never paired with this token at runtime; both pairings are asserted in the regression matrix."
|
|
779
|
+
},
|
|
780
|
+
"on-success-strong": {
|
|
781
|
+
"value": "#000000",
|
|
782
|
+
"description": "HC override for text.on-success-strong. The light/dark value (neutral-0 / white) is unreadable on the HC bright-fill success surfaces. Black on HC success-500 (#4ADE80) = 12.05:1 AAA. Sister token to on-primary-strong / on-error-strong HC overrides."
|
|
783
|
+
},
|
|
554
784
|
"link": { "value": "#FFFF00", "description": "19.56:1 contrast on #000 — high visibility" },
|
|
555
785
|
"link-hover": { "value": "#FFFF99", "description": "High-contrast hover link" },
|
|
556
786
|
"link-visited": { "value": "#FF80FF", "description": "High-contrast visited link" },
|
|
@@ -560,18 +790,59 @@
|
|
|
560
790
|
"default": { "value": "#000000" },
|
|
561
791
|
"raised": { "value": "#1A1A1A" },
|
|
562
792
|
"sunken": { "value": "#000000" },
|
|
563
|
-
"
|
|
793
|
+
"inverse": {
|
|
794
|
+
"value": "#FFFFFF",
|
|
795
|
+
"description": "Inverse of HC canvas — white surface for dark-always components in HC mode"
|
|
796
|
+
},
|
|
797
|
+
"overlay": { "value": "rgba(0, 0, 0, 0.95)" },
|
|
798
|
+
"success-strong": {
|
|
799
|
+
"value": "var(--hx-color-success-500)",
|
|
800
|
+
"description": "HC override for surface.success-strong. Light/dark resolves to success-700 (#146831) which is too dark to read against the HC #000 canvas as a fill. Flip to HC success-500 (#4ADE80, 12.05:1 on #000) so emphasis success surfaces remain visible. Pairs with text.inverse (HC = #000000) for 12.05:1 AAA."
|
|
801
|
+
},
|
|
802
|
+
"warning-strong": {
|
|
803
|
+
"value": "var(--hx-color-warning-500)",
|
|
804
|
+
"description": "HC override for surface.warning-strong. Resolves to HC warning-500 (#FBBF24) — bright yellow visible against the HC canvas. Pairs with text.on-warning (HC = #000000) for 12.58:1 AAA."
|
|
805
|
+
},
|
|
806
|
+
"danger-strong": {
|
|
807
|
+
"value": "var(--hx-color-error-500)",
|
|
808
|
+
"description": "HC override for surface.danger-strong. Light/dark resolves to error-600 which has no HC override (palette gap); flip to HC error-500 (#FCA5A5 — bright red) for visibility on the HC canvas. Pairs with text.inverse (HC = #000000) for AA."
|
|
809
|
+
},
|
|
810
|
+
"info-strong": {
|
|
811
|
+
"value": "var(--hx-color-primary-500)",
|
|
812
|
+
"description": "HC override for surface.info-strong. Light/dark resolves to primary-600. HC primary-600 (#60A5FA) is defined but pinning to HC primary-500 (#3B82F6, 5.71:1 on #000) keeps the info-strong surface visually distinct from the primary-strong action layer. Pairs with text.inverse (HC = #000000) for 5.71:1 AA pass."
|
|
813
|
+
},
|
|
814
|
+
"on-dark-overlay-default": {
|
|
815
|
+
"value": "#FFFFFF",
|
|
816
|
+
"description": "HC override for surface.on-dark-overlay-default. Translucent overlays disappear on the HC canvas; pin to solid white so inverted-secondary/ghost hover fills remain visible. Pairs with text.inverse (HC = #000000) for 21:1 AAA when inverted controls are in their hover state."
|
|
817
|
+
},
|
|
818
|
+
"on-dark-overlay-subtle": {
|
|
819
|
+
"value": "#C0C0C0",
|
|
820
|
+
"description": "HC override for surface.on-dark-overlay-subtle. Pinned to neutral silver so the subtle inverted hover affordance remains distinguishable from the strong tier in HC."
|
|
821
|
+
}
|
|
564
822
|
},
|
|
565
823
|
"border": {
|
|
566
824
|
"default": { "value": "#FFFFFF", "description": "21:1 contrast on #000" },
|
|
567
825
|
"subtle": { "value": "#C0C0C0" },
|
|
568
826
|
"strong": { "value": "#FFFFFF" },
|
|
569
|
-
"focus": { "value": "#FFFF00", "description": "High-visibility yellow focus — WCAG 2.4.7" }
|
|
827
|
+
"focus": { "value": "#FFFF00", "description": "High-visibility yellow focus — WCAG 2.4.7" },
|
|
828
|
+
"on-dark-strong": {
|
|
829
|
+
"value": "#FFFFFF",
|
|
830
|
+
"description": "HC override for border.on-dark-strong. The base overlay-white-70 reads softly against translucent darks but is invisible against the HC #000 canvas — pin to solid #FFFFFF (21:1 on #000) so inverted button outlines remain visible in HC."
|
|
831
|
+
}
|
|
570
832
|
},
|
|
571
833
|
"focus-ring": { "value": "#FFFF00", "description": "High-visibility yellow focus ring" },
|
|
572
834
|
"selection": {
|
|
573
835
|
"bg": { "value": "#1AEBFF", "description": "High-contrast cyan selection" },
|
|
574
836
|
"color": { "value": "#000000" }
|
|
837
|
+
},
|
|
838
|
+
"action": {
|
|
839
|
+
"_comment": "HC overrides for the action.* layer. Filled action surfaces in HC must paint a bright system-aligned fill so text.on-{role}-strong (HC = #000000) reads at AA. Without these overrides the base error-700 / primary-700 stops resolve unchanged in HC and pair with #000 at sub-AA ratios (Codex token-cascade finding: text.on-error-strong × action.danger.bg-active = 2.56:1 on base error-700).",
|
|
840
|
+
"danger": {
|
|
841
|
+
"bg-active": {
|
|
842
|
+
"value": "var(--hx-color-error-500)",
|
|
843
|
+
"description": "HC override for action.danger.bg-active. Base error-700 (#A21312) has no HC override, so HC consumers paint black on #A21312 = 2.64:1 — AA fail. Flip to HC error-500 (#F87171, 7.59:1 on #000) so danger pressed states pair with text.on-error-strong (HC = #000000) at AA. Mirrors surface.danger-strong HC pattern (also flips to error-500)."
|
|
844
|
+
}
|
|
845
|
+
}
|
|
575
846
|
}
|
|
576
847
|
},
|
|
577
848
|
"body": {
|
|
@@ -610,5 +881,983 @@
|
|
|
610
881
|
},
|
|
611
882
|
"2xl": { "value": "0 25px 50px -12px rgb(255 255 255 / 0.4)" }
|
|
612
883
|
}
|
|
884
|
+
},
|
|
885
|
+
"component": {
|
|
886
|
+
"_comment": "Manifest of per-component design tokens authored inline in @helixui/library .styles.ts files. NOT emitted to CSS — components own their token defaults via the cascade (undefined unless overridden). This block exists for the Figma kit and audit tooling to know which tokens consumers can override. Drift is gated by component-manifest-sync.test.ts.",
|
|
887
|
+
"hx-accordion": {
|
|
888
|
+
"--hx-accordion-border-color": null,
|
|
889
|
+
"--hx-accordion-border-radius": null,
|
|
890
|
+
"--hx-accordion-content-color": null,
|
|
891
|
+
"--hx-accordion-content-padding": null,
|
|
892
|
+
"--hx-accordion-font-family": null,
|
|
893
|
+
"--hx-accordion-icon-color": null,
|
|
894
|
+
"--hx-accordion-icon-size": null,
|
|
895
|
+
"--hx-accordion-item-font-family": null,
|
|
896
|
+
"--hx-accordion-trigger-bg": null,
|
|
897
|
+
"--hx-accordion-trigger-color": null,
|
|
898
|
+
"--hx-accordion-trigger-hover-bg": null,
|
|
899
|
+
"--hx-accordion-trigger-padding": null
|
|
900
|
+
},
|
|
901
|
+
"hx-action-bar": {
|
|
902
|
+
"--hx-action-bar-bg": null,
|
|
903
|
+
"--hx-action-bar-border": null,
|
|
904
|
+
"--hx-action-bar-border-radius": null,
|
|
905
|
+
"--hx-action-bar-gap": null,
|
|
906
|
+
"--hx-action-bar-padding": null,
|
|
907
|
+
"--hx-action-bar-padding-block-end": null,
|
|
908
|
+
"--hx-action-bar-padding-block-start": null,
|
|
909
|
+
"--hx-action-bar-z-index": null
|
|
910
|
+
},
|
|
911
|
+
"hx-alert": {
|
|
912
|
+
"--hx-alert-accent-width": null,
|
|
913
|
+
"--hx-alert-bg": null,
|
|
914
|
+
"--hx-alert-border-color": null,
|
|
915
|
+
"--hx-alert-border-radius": null,
|
|
916
|
+
"--hx-alert-border-width": null,
|
|
917
|
+
"--hx-alert-close-btn-focus-ring-color": null,
|
|
918
|
+
"--hx-alert-color": null,
|
|
919
|
+
"--hx-alert-font-family": null,
|
|
920
|
+
"--hx-alert-gap": null,
|
|
921
|
+
"--hx-alert-icon-color": null,
|
|
922
|
+
"--hx-alert-padding": null
|
|
923
|
+
},
|
|
924
|
+
"hx-avatar": {
|
|
925
|
+
"--hx-avatar-bg": null,
|
|
926
|
+
"--hx-avatar-border-radius": null,
|
|
927
|
+
"--hx-avatar-color": null,
|
|
928
|
+
"--hx-avatar-font-family": null,
|
|
929
|
+
"--hx-avatar-font-size": null,
|
|
930
|
+
"--hx-avatar-size": null
|
|
931
|
+
},
|
|
932
|
+
"hx-badge": {
|
|
933
|
+
"--hx-badge-bg": null,
|
|
934
|
+
"--hx-badge-border-radius": null,
|
|
935
|
+
"--hx-badge-color": null,
|
|
936
|
+
"--hx-badge-dot-size": null,
|
|
937
|
+
"--hx-badge-error-bg": null,
|
|
938
|
+
"--hx-badge-error-color": null,
|
|
939
|
+
"--hx-badge-font-family": null,
|
|
940
|
+
"--hx-badge-font-size": null,
|
|
941
|
+
"--hx-badge-font-weight": null,
|
|
942
|
+
"--hx-badge-info-bg": null,
|
|
943
|
+
"--hx-badge-info-color": null,
|
|
944
|
+
"--hx-badge-neutral-bg": null,
|
|
945
|
+
"--hx-badge-neutral-color": null,
|
|
946
|
+
"--hx-badge-padding-x": null,
|
|
947
|
+
"--hx-badge-padding-y": null,
|
|
948
|
+
"--hx-badge-primary-bg": null,
|
|
949
|
+
"--hx-badge-primary-color": null,
|
|
950
|
+
"--hx-badge-pulse-color": null,
|
|
951
|
+
"--hx-badge-pulse-color-internal": null,
|
|
952
|
+
"--hx-badge-pulse-duration": null,
|
|
953
|
+
"--hx-badge-pulse-easing": null,
|
|
954
|
+
"--hx-badge-secondary-bg": null,
|
|
955
|
+
"--hx-badge-secondary-color": null,
|
|
956
|
+
"--hx-badge-success-bg": null,
|
|
957
|
+
"--hx-badge-success-color": null,
|
|
958
|
+
"--hx-badge-warning-bg": null,
|
|
959
|
+
"--hx-badge-warning-color": null
|
|
960
|
+
},
|
|
961
|
+
"hx-banner": {
|
|
962
|
+
"--hx-banner-action-color": null,
|
|
963
|
+
"--hx-banner-action-focus-ring-color": null,
|
|
964
|
+
"--hx-banner-bg": null,
|
|
965
|
+
"--hx-banner-border-color": null,
|
|
966
|
+
"--hx-banner-border-width": null,
|
|
967
|
+
"--hx-banner-close-btn-focus-ring-color": null,
|
|
968
|
+
"--hx-banner-color": null,
|
|
969
|
+
"--hx-banner-font-family": null,
|
|
970
|
+
"--hx-banner-gap": null,
|
|
971
|
+
"--hx-banner-icon-color": null,
|
|
972
|
+
"--hx-banner-padding": null,
|
|
973
|
+
"--hx-banner-position": null,
|
|
974
|
+
"--hx-banner-z-index": null
|
|
975
|
+
},
|
|
976
|
+
"hx-breadcrumb": {
|
|
977
|
+
"--hx-breadcrumb-font-family": null,
|
|
978
|
+
"--hx-breadcrumb-font-size": null,
|
|
979
|
+
"--hx-breadcrumb-item-max-width": null,
|
|
980
|
+
"--hx-breadcrumb-link-color": null,
|
|
981
|
+
"--hx-breadcrumb-link-focus-ring-color": null,
|
|
982
|
+
"--hx-breadcrumb-link-hover-color": null,
|
|
983
|
+
"--hx-breadcrumb-separator-color": null,
|
|
984
|
+
"--hx-breadcrumb-separator-content": null,
|
|
985
|
+
"--hx-breadcrumb-separator-gap": null,
|
|
986
|
+
"--hx-breadcrumb-text-color": null
|
|
987
|
+
},
|
|
988
|
+
"hx-button": {
|
|
989
|
+
"--hx-button-active-bg": null,
|
|
990
|
+
"--hx-button-bg": null,
|
|
991
|
+
"--hx-button-border-color": null,
|
|
992
|
+
"--hx-button-border-radius": null,
|
|
993
|
+
"--hx-button-color": null,
|
|
994
|
+
"--hx-button-focus-ring-color": null,
|
|
995
|
+
"--hx-button-font-family": null,
|
|
996
|
+
"--hx-button-font-weight": null,
|
|
997
|
+
"--hx-button-hover-bg": null,
|
|
998
|
+
"--hx-button-inverted-color": null,
|
|
999
|
+
"--hx-button-inverted-danger-interactive-color": null,
|
|
1000
|
+
"--hx-button-inverted-focus-ring-color": null,
|
|
1001
|
+
"--hx-button-inverted-ghost-hover-bg": null,
|
|
1002
|
+
"--hx-button-inverted-primary-interactive-color": null
|
|
1003
|
+
},
|
|
1004
|
+
"hx-button-group": {
|
|
1005
|
+
"--hx-button-group-border-radius": null,
|
|
1006
|
+
"--hx-button-group-divider-offset": null,
|
|
1007
|
+
"--hx-button-group-focus-z-index": null,
|
|
1008
|
+
"--hx-button-group-focus-z-index-hc": null
|
|
1009
|
+
},
|
|
1010
|
+
"hx-card": {
|
|
1011
|
+
"--hx-card-bg": null,
|
|
1012
|
+
"--hx-card-body-color": null,
|
|
1013
|
+
"--hx-card-border-color": null,
|
|
1014
|
+
"--hx-card-border-radius": null,
|
|
1015
|
+
"--hx-card-color": null,
|
|
1016
|
+
"--hx-card-featured-border-color": null,
|
|
1017
|
+
"--hx-card-featured-border-width": null,
|
|
1018
|
+
"--hx-card-focus-ring-color": null,
|
|
1019
|
+
"--hx-card-font-family": null,
|
|
1020
|
+
"--hx-card-gap": null,
|
|
1021
|
+
"--hx-card-image-aspect-ratio": null,
|
|
1022
|
+
"--hx-card-padding": null,
|
|
1023
|
+
"--hx-card-shadow": null,
|
|
1024
|
+
"--hx-card-shadow-floating": null,
|
|
1025
|
+
"--hx-card-shadow-hover": null
|
|
1026
|
+
},
|
|
1027
|
+
"hx-carousel": {
|
|
1028
|
+
"--hx-carousel-focus-ring-color": null,
|
|
1029
|
+
"--hx-carousel-nav-btn-bg": null,
|
|
1030
|
+
"--hx-carousel-nav-btn-border-color": null,
|
|
1031
|
+
"--hx-carousel-nav-btn-color": null,
|
|
1032
|
+
"--hx-carousel-nav-btn-hover-bg": null,
|
|
1033
|
+
"--hx-carousel-nav-btn-hover-border-color": null,
|
|
1034
|
+
"--hx-carousel-nav-btn-size": null,
|
|
1035
|
+
"--hx-carousel-pagination-dot-active-bg": null,
|
|
1036
|
+
"--hx-carousel-pagination-dot-bg": null,
|
|
1037
|
+
"--hx-carousel-pagination-dot-size": null,
|
|
1038
|
+
"--hx-carousel-play-pause-color": null,
|
|
1039
|
+
"--hx-carousel-play-pause-hover-bg": null
|
|
1040
|
+
},
|
|
1041
|
+
"hx-checkbox": {
|
|
1042
|
+
"--hx-checkbox-bg": null,
|
|
1043
|
+
"--hx-checkbox-border-color": null,
|
|
1044
|
+
"--hx-checkbox-border-radius": null,
|
|
1045
|
+
"--hx-checkbox-checked-bg": null,
|
|
1046
|
+
"--hx-checkbox-checked-border-color": null,
|
|
1047
|
+
"--hx-checkbox-checkmark-color": null,
|
|
1048
|
+
"--hx-checkbox-error-color": null,
|
|
1049
|
+
"--hx-checkbox-focus-ring-color": null,
|
|
1050
|
+
"--hx-checkbox-focus-ring-offset": null,
|
|
1051
|
+
"--hx-checkbox-focus-ring-width": null,
|
|
1052
|
+
"--hx-checkbox-font-family": null,
|
|
1053
|
+
"--hx-checkbox-help-text-color": null,
|
|
1054
|
+
"--hx-checkbox-hover-border-color": null,
|
|
1055
|
+
"--hx-checkbox-label-color": null,
|
|
1056
|
+
"--hx-checkbox-size": null
|
|
1057
|
+
},
|
|
1058
|
+
"hx-checkbox-group": {
|
|
1059
|
+
"--hx-checkbox-group-error-color": null,
|
|
1060
|
+
"--hx-checkbox-group-font-family": null,
|
|
1061
|
+
"--hx-checkbox-group-gap": null,
|
|
1062
|
+
"--hx-checkbox-group-help-text-color": null,
|
|
1063
|
+
"--hx-checkbox-group-label-color": null
|
|
1064
|
+
},
|
|
1065
|
+
"hx-clinical-status": {
|
|
1066
|
+
"--hx-clinical-status-accent-color": null,
|
|
1067
|
+
"--hx-clinical-status-accent-width": null,
|
|
1068
|
+
"--hx-clinical-status-bg": null,
|
|
1069
|
+
"--hx-clinical-status-border-color": null,
|
|
1070
|
+
"--hx-clinical-status-border-radius": null,
|
|
1071
|
+
"--hx-clinical-status-border-width": null,
|
|
1072
|
+
"--hx-clinical-status-color": null,
|
|
1073
|
+
"--hx-clinical-status-compact-padding": null,
|
|
1074
|
+
"--hx-clinical-status-emergent-accent-width": null,
|
|
1075
|
+
"--hx-clinical-status-font-family": null,
|
|
1076
|
+
"--hx-clinical-status-gap": null,
|
|
1077
|
+
"--hx-clinical-status-icon-color": null,
|
|
1078
|
+
"--hx-clinical-status-padding": null
|
|
1079
|
+
},
|
|
1080
|
+
"hx-code-snippet": {
|
|
1081
|
+
"--hx-code-snippet-bg": null,
|
|
1082
|
+
"--hx-code-snippet-border-radius": null,
|
|
1083
|
+
"--hx-code-snippet-color": null,
|
|
1084
|
+
"--hx-code-snippet-font-family": null,
|
|
1085
|
+
"--hx-code-snippet-font-size": null,
|
|
1086
|
+
"--hx-code-snippet-inline-bg": null,
|
|
1087
|
+
"--hx-code-snippet-inline-color": null,
|
|
1088
|
+
"--hx-code-snippet-inline-padding-x": null,
|
|
1089
|
+
"--hx-code-snippet-inline-padding-y": null,
|
|
1090
|
+
"--hx-code-snippet-line-number-color": null,
|
|
1091
|
+
"--hx-code-snippet-padding": null,
|
|
1092
|
+
"--hx-code-snippet-tab-size": null
|
|
1093
|
+
},
|
|
1094
|
+
"hx-color-picker": {
|
|
1095
|
+
"--hx-color-picker-focus-ring-color": null,
|
|
1096
|
+
"--hx-color-picker-grid-height": null,
|
|
1097
|
+
"--hx-color-picker-panel-shadow": null,
|
|
1098
|
+
"--hx-color-picker-swatch-border": null,
|
|
1099
|
+
"--hx-color-picker-swatch-border-hover": null,
|
|
1100
|
+
"--hx-color-picker-thumb-border": null,
|
|
1101
|
+
"--hx-color-picker-thumb-shadow": null,
|
|
1102
|
+
"--hx-color-picker-trigger-hover-border-color": null,
|
|
1103
|
+
"--hx-color-picker-width": null,
|
|
1104
|
+
"--hx-color-picker-z-index": null
|
|
1105
|
+
},
|
|
1106
|
+
"hx-combobox": {
|
|
1107
|
+
"--hx-combobox-bg": null,
|
|
1108
|
+
"--hx-combobox-border-color": null,
|
|
1109
|
+
"--hx-combobox-border-radius": null,
|
|
1110
|
+
"--hx-combobox-chip-bg": null,
|
|
1111
|
+
"--hx-combobox-chip-color": null,
|
|
1112
|
+
"--hx-combobox-chip-remove-hover-bg": null,
|
|
1113
|
+
"--hx-combobox-color": null,
|
|
1114
|
+
"--hx-combobox-error-color": null,
|
|
1115
|
+
"--hx-combobox-focus-ring-color": null,
|
|
1116
|
+
"--hx-combobox-font-family": null,
|
|
1117
|
+
"--hx-combobox-label-color": null,
|
|
1118
|
+
"--hx-combobox-listbox-bg": null,
|
|
1119
|
+
"--hx-combobox-listbox-max-height": null,
|
|
1120
|
+
"--hx-combobox-listbox-shadow": null,
|
|
1121
|
+
"--hx-combobox-option-focus-ring-offset": null,
|
|
1122
|
+
"--hx-combobox-option-hover-bg": null,
|
|
1123
|
+
"--hx-combobox-option-selected-bg": null
|
|
1124
|
+
},
|
|
1125
|
+
"hx-container": {
|
|
1126
|
+
"--hx-container-bg": null,
|
|
1127
|
+
"--hx-container-gutter": null,
|
|
1128
|
+
"--hx-container-max-width": null
|
|
1129
|
+
},
|
|
1130
|
+
"hx-copy-button": {
|
|
1131
|
+
"--hx-copy-button-bg": null,
|
|
1132
|
+
"--hx-copy-button-border-color": null,
|
|
1133
|
+
"--hx-copy-button-border-radius": null,
|
|
1134
|
+
"--hx-copy-button-color": null,
|
|
1135
|
+
"--hx-copy-button-copied-border-color": null,
|
|
1136
|
+
"--hx-copy-button-copied-color": null,
|
|
1137
|
+
"--hx-copy-button-focus-ring-color": null,
|
|
1138
|
+
"--hx-copy-button-font-family": null
|
|
1139
|
+
},
|
|
1140
|
+
"hx-counter": {
|
|
1141
|
+
"--hx-counter-color": null,
|
|
1142
|
+
"--hx-counter-font-family": null,
|
|
1143
|
+
"--hx-counter-font-size-lg": null,
|
|
1144
|
+
"--hx-counter-font-size-md": null,
|
|
1145
|
+
"--hx-counter-font-size-sm": null,
|
|
1146
|
+
"--hx-counter-font-weight": null
|
|
1147
|
+
},
|
|
1148
|
+
"hx-data-table": {
|
|
1149
|
+
"--hx-data-table-border-color": null,
|
|
1150
|
+
"--hx-data-table-cell-color": null,
|
|
1151
|
+
"--hx-data-table-checkbox-accent-color": null,
|
|
1152
|
+
"--hx-data-table-empty-color": null,
|
|
1153
|
+
"--hx-data-table-focus-ring-color": null,
|
|
1154
|
+
"--hx-data-table-font-family": null,
|
|
1155
|
+
"--hx-data-table-header-bg": null,
|
|
1156
|
+
"--hx-data-table-header-color": null,
|
|
1157
|
+
"--hx-data-table-min-width": null,
|
|
1158
|
+
"--hx-data-table-row-hover-bg": null,
|
|
1159
|
+
"--hx-data-table-row-selected-bg": null,
|
|
1160
|
+
"--hx-data-table-shimmer-duration": null,
|
|
1161
|
+
"--hx-data-table-sort-icon-active-color": null
|
|
1162
|
+
},
|
|
1163
|
+
"hx-date-picker": {
|
|
1164
|
+
"--hx-date-picker-bg": null,
|
|
1165
|
+
"--hx-date-picker-border-color": null,
|
|
1166
|
+
"--hx-date-picker-border-radius": null,
|
|
1167
|
+
"--hx-date-picker-calendar-bg": null,
|
|
1168
|
+
"--hx-date-picker-calendar-border-color": null,
|
|
1169
|
+
"--hx-date-picker-calendar-border-radius": null,
|
|
1170
|
+
"--hx-date-picker-calendar-min-width": null,
|
|
1171
|
+
"--hx-date-picker-calendar-shadow": null,
|
|
1172
|
+
"--hx-date-picker-color": null,
|
|
1173
|
+
"--hx-date-picker-day-hover-bg": null,
|
|
1174
|
+
"--hx-date-picker-error-color": null,
|
|
1175
|
+
"--hx-date-picker-focus-ring-color": null,
|
|
1176
|
+
"--hx-date-picker-font-family": null,
|
|
1177
|
+
"--hx-date-picker-label-color": null,
|
|
1178
|
+
"--hx-date-picker-selected-bg": null,
|
|
1179
|
+
"--hx-date-picker-selected-color": null,
|
|
1180
|
+
"--hx-date-picker-selected-hover-bg": null,
|
|
1181
|
+
"--hx-date-picker-today-color": null,
|
|
1182
|
+
"--hx-date-picker-trigger-color": null,
|
|
1183
|
+
"--hx-date-picker-trigger-hover-color": null
|
|
1184
|
+
},
|
|
1185
|
+
"hx-dialog": {
|
|
1186
|
+
"--hx-dialog-backdrop-color": null,
|
|
1187
|
+
"--hx-dialog-backdrop-opacity": null,
|
|
1188
|
+
"--hx-dialog-bg": null,
|
|
1189
|
+
"--hx-dialog-body-padding": null,
|
|
1190
|
+
"--hx-dialog-border-radius": null,
|
|
1191
|
+
"--hx-dialog-close-btn-color": null,
|
|
1192
|
+
"--hx-dialog-close-btn-focus-ring-color": null,
|
|
1193
|
+
"--hx-dialog-close-btn-hover-bg": null,
|
|
1194
|
+
"--hx-dialog-close-btn-hover-color": null,
|
|
1195
|
+
"--hx-dialog-color": null,
|
|
1196
|
+
"--hx-dialog-font-family": null,
|
|
1197
|
+
"--hx-dialog-footer-border-color": null,
|
|
1198
|
+
"--hx-dialog-footer-padding": null,
|
|
1199
|
+
"--hx-dialog-header-border-color": null,
|
|
1200
|
+
"--hx-dialog-header-padding": null,
|
|
1201
|
+
"--hx-dialog-heading-color": null,
|
|
1202
|
+
"--hx-dialog-shadow": null,
|
|
1203
|
+
"--hx-dialog-width": null
|
|
1204
|
+
},
|
|
1205
|
+
"hx-divider": {
|
|
1206
|
+
"--hx-divider-label-color": null,
|
|
1207
|
+
"--hx-divider-label-font-size": null,
|
|
1208
|
+
"--hx-divider-label-gap": null
|
|
1209
|
+
},
|
|
1210
|
+
"hx-drawer": {
|
|
1211
|
+
"--hx-drawer-backdrop-color": null,
|
|
1212
|
+
"--hx-drawer-backdrop-opacity": null,
|
|
1213
|
+
"--hx-drawer-bg": null,
|
|
1214
|
+
"--hx-drawer-body-padding": null,
|
|
1215
|
+
"--hx-drawer-close-btn-color": null,
|
|
1216
|
+
"--hx-drawer-close-btn-focus-ring-color": null,
|
|
1217
|
+
"--hx-drawer-close-btn-hover-bg": null,
|
|
1218
|
+
"--hx-drawer-close-btn-hover-color": null,
|
|
1219
|
+
"--hx-drawer-color": null,
|
|
1220
|
+
"--hx-drawer-font-family": null,
|
|
1221
|
+
"--hx-drawer-footer-border-color": null,
|
|
1222
|
+
"--hx-drawer-footer-padding": null,
|
|
1223
|
+
"--hx-drawer-header-border-color": null,
|
|
1224
|
+
"--hx-drawer-header-padding": null,
|
|
1225
|
+
"--hx-drawer-shadow": null,
|
|
1226
|
+
"--hx-drawer-size-md": null,
|
|
1227
|
+
"--hx-drawer-title-color": null
|
|
1228
|
+
},
|
|
1229
|
+
"hx-dropdown": {
|
|
1230
|
+
"--hx-dropdown-panel-bg": null,
|
|
1231
|
+
"--hx-dropdown-panel-border-color": null,
|
|
1232
|
+
"--hx-dropdown-panel-border-radius": null,
|
|
1233
|
+
"--hx-dropdown-panel-min-width": null,
|
|
1234
|
+
"--hx-dropdown-panel-shadow": null,
|
|
1235
|
+
"--hx-dropdown-panel-z-index": null
|
|
1236
|
+
},
|
|
1237
|
+
"hx-field": {
|
|
1238
|
+
"--hx-field-error-color": null,
|
|
1239
|
+
"--hx-field-font-family": null,
|
|
1240
|
+
"--hx-field-gap": null,
|
|
1241
|
+
"--hx-field-help-text-color": null
|
|
1242
|
+
},
|
|
1243
|
+
"hx-field-label": {
|
|
1244
|
+
"--hx-field-label-color": null,
|
|
1245
|
+
"--hx-field-label-required-color": null
|
|
1246
|
+
},
|
|
1247
|
+
"hx-file-upload": {
|
|
1248
|
+
"--hx-file-upload-dropzone-active-bg": null,
|
|
1249
|
+
"--hx-file-upload-dropzone-bg": null,
|
|
1250
|
+
"--hx-file-upload-dropzone-border-color": null,
|
|
1251
|
+
"--hx-file-upload-dropzone-border-radius": null,
|
|
1252
|
+
"--hx-file-upload-error-color": null,
|
|
1253
|
+
"--hx-file-upload-focus-ring-color": null,
|
|
1254
|
+
"--hx-file-upload-font-family": null,
|
|
1255
|
+
"--hx-file-upload-progress-color": null,
|
|
1256
|
+
"--hx-file-upload-progress-height": null
|
|
1257
|
+
},
|
|
1258
|
+
"hx-help-text": {
|
|
1259
|
+
"--hx-help-text-color": null,
|
|
1260
|
+
"--hx-help-text-font-family": null,
|
|
1261
|
+
"--hx-help-text-font-size": null,
|
|
1262
|
+
"--hx-help-text-font-weight": null,
|
|
1263
|
+
"--hx-help-text-icon-gap": null,
|
|
1264
|
+
"--hx-help-text-line-height": null
|
|
1265
|
+
},
|
|
1266
|
+
"hx-icon": {
|
|
1267
|
+
"--hx-icon-color": null,
|
|
1268
|
+
"--hx-icon-size": null
|
|
1269
|
+
},
|
|
1270
|
+
"hx-icon-button": {
|
|
1271
|
+
"--hx-icon-button-bg": null,
|
|
1272
|
+
"--hx-icon-button-border-color": null,
|
|
1273
|
+
"--hx-icon-button-border-radius": null,
|
|
1274
|
+
"--hx-icon-button-color": null,
|
|
1275
|
+
"--hx-icon-button-focus-ring-color": null,
|
|
1276
|
+
"--hx-icon-button-size": null
|
|
1277
|
+
},
|
|
1278
|
+
"hx-image": {
|
|
1279
|
+
"--hx-image-aspect-ratio": null,
|
|
1280
|
+
"--hx-image-border-radius": null,
|
|
1281
|
+
"--hx-image-caption-color": null,
|
|
1282
|
+
"--hx-image-caption-font-size": null,
|
|
1283
|
+
"--hx-image-caption-padding": null,
|
|
1284
|
+
"--hx-image-fallback-bg": null,
|
|
1285
|
+
"--hx-image-fallback-color": null,
|
|
1286
|
+
"--hx-image-fallback-min-height": null,
|
|
1287
|
+
"--hx-image-object-fit": null
|
|
1288
|
+
},
|
|
1289
|
+
"hx-link": {
|
|
1290
|
+
"--hx-link-color": null,
|
|
1291
|
+
"--hx-link-color-active": null,
|
|
1292
|
+
"--hx-link-color-danger": null,
|
|
1293
|
+
"--hx-link-color-danger-hover": null,
|
|
1294
|
+
"--hx-link-color-disabled": null,
|
|
1295
|
+
"--hx-link-color-hover": null,
|
|
1296
|
+
"--hx-link-color-subtle": null,
|
|
1297
|
+
"--hx-link-focus-ring-color": null,
|
|
1298
|
+
"--hx-link-font-family": null,
|
|
1299
|
+
"--hx-link-text-decoration": null,
|
|
1300
|
+
"--hx-link-text-decoration-hover": null,
|
|
1301
|
+
"--hx-link-underline-offset": null
|
|
1302
|
+
},
|
|
1303
|
+
"hx-list": {
|
|
1304
|
+
"--hx-list-divider-color": null,
|
|
1305
|
+
"--hx-list-gap": null,
|
|
1306
|
+
"--hx-list-item-bg-hover": null,
|
|
1307
|
+
"--hx-list-item-bg-selected": null,
|
|
1308
|
+
"--hx-list-item-color": null,
|
|
1309
|
+
"--hx-list-item-color-selected": null,
|
|
1310
|
+
"--hx-list-item-description-color": null,
|
|
1311
|
+
"--hx-list-item-font-family": null,
|
|
1312
|
+
"--hx-list-item-padding": null
|
|
1313
|
+
},
|
|
1314
|
+
"hx-menu": {
|
|
1315
|
+
"--hx-menu-bg": null,
|
|
1316
|
+
"--hx-menu-border-color": null,
|
|
1317
|
+
"--hx-menu-border-radius": null,
|
|
1318
|
+
"--hx-menu-divider-color": null,
|
|
1319
|
+
"--hx-menu-item-color": null,
|
|
1320
|
+
"--hx-menu-item-focus-ring-color": null,
|
|
1321
|
+
"--hx-menu-item-focus-ring-offset": null,
|
|
1322
|
+
"--hx-menu-item-font-family": null,
|
|
1323
|
+
"--hx-menu-item-hover-bg": null,
|
|
1324
|
+
"--hx-menu-max-height": null,
|
|
1325
|
+
"--hx-menu-min-width": null,
|
|
1326
|
+
"--hx-menu-shadow": null
|
|
1327
|
+
},
|
|
1328
|
+
"hx-meter": {
|
|
1329
|
+
"--hx-meter-color-danger": null,
|
|
1330
|
+
"--hx-meter-color-optimum": null,
|
|
1331
|
+
"--hx-meter-color-warning": null,
|
|
1332
|
+
"--hx-meter-font-family": null,
|
|
1333
|
+
"--hx-meter-indicator-color": null,
|
|
1334
|
+
"--hx-meter-label-color": null,
|
|
1335
|
+
"--hx-meter-track-color": null,
|
|
1336
|
+
"--hx-meter-track-height": null,
|
|
1337
|
+
"--hx-meter-track-radius": null
|
|
1338
|
+
},
|
|
1339
|
+
"hx-nav": {
|
|
1340
|
+
"--hx-nav-bg": null,
|
|
1341
|
+
"--hx-nav-border-radius": null,
|
|
1342
|
+
"--hx-nav-color": null,
|
|
1343
|
+
"--hx-nav-focus-ring-color": null,
|
|
1344
|
+
"--hx-nav-font-family": null,
|
|
1345
|
+
"--hx-nav-font-size": null,
|
|
1346
|
+
"--hx-nav-item-active-bg": null,
|
|
1347
|
+
"--hx-nav-item-active-color": null,
|
|
1348
|
+
"--hx-nav-item-active-hover-bg": null,
|
|
1349
|
+
"--hx-nav-item-color": null,
|
|
1350
|
+
"--hx-nav-item-focus-ring-color": null,
|
|
1351
|
+
"--hx-nav-item-font-family": null,
|
|
1352
|
+
"--hx-nav-item-host-bg": null,
|
|
1353
|
+
"--hx-nav-item-hover-bg": null,
|
|
1354
|
+
"--hx-nav-item-hover-color": null,
|
|
1355
|
+
"--hx-nav-item-padding": null,
|
|
1356
|
+
"--hx-nav-item-tooltip-bg": null,
|
|
1357
|
+
"--hx-nav-item-tooltip-color": null,
|
|
1358
|
+
"--hx-nav-link-active-bg": null,
|
|
1359
|
+
"--hx-nav-link-active-color": null,
|
|
1360
|
+
"--hx-nav-link-color": null,
|
|
1361
|
+
"--hx-nav-link-hover-bg": null,
|
|
1362
|
+
"--hx-nav-link-hover-color": null,
|
|
1363
|
+
"--hx-nav-padding": null,
|
|
1364
|
+
"--hx-nav-shadow": null,
|
|
1365
|
+
"--hx-nav-submenu-bg": null,
|
|
1366
|
+
"--hx-nav-submenu-min-width": null
|
|
1367
|
+
},
|
|
1368
|
+
"hx-number-input": {
|
|
1369
|
+
"--hx-number-input-bg": null,
|
|
1370
|
+
"--hx-number-input-border-color": null,
|
|
1371
|
+
"--hx-number-input-border-radius": null,
|
|
1372
|
+
"--hx-number-input-color": null,
|
|
1373
|
+
"--hx-number-input-error-color": null,
|
|
1374
|
+
"--hx-number-input-focus-ring-color": null,
|
|
1375
|
+
"--hx-number-input-font-family": null,
|
|
1376
|
+
"--hx-number-input-icon-size": null,
|
|
1377
|
+
"--hx-number-input-label-color": null
|
|
1378
|
+
},
|
|
1379
|
+
"hx-overflow-menu": {
|
|
1380
|
+
"--hx-overflow-menu-button-color": null,
|
|
1381
|
+
"--hx-overflow-menu-focus-ring-color": null,
|
|
1382
|
+
"--hx-overflow-menu-item-color": null,
|
|
1383
|
+
"--hx-overflow-menu-item-hover-bg": null,
|
|
1384
|
+
"--hx-overflow-menu-panel-bg": null,
|
|
1385
|
+
"--hx-overflow-menu-panel-border": null,
|
|
1386
|
+
"--hx-overflow-menu-panel-border-radius": null,
|
|
1387
|
+
"--hx-overflow-menu-panel-min-width": null,
|
|
1388
|
+
"--hx-overflow-menu-panel-shadow": null,
|
|
1389
|
+
"--hx-overflow-menu-panel-z-index": null,
|
|
1390
|
+
"--hx-overflow-menu-trigger-hover-bg": null,
|
|
1391
|
+
"--hx-overflow-menu-trigger-open-bg": null
|
|
1392
|
+
},
|
|
1393
|
+
"hx-pagination": {
|
|
1394
|
+
"--hx-pagination-active-bg": null,
|
|
1395
|
+
"--hx-pagination-active-border-color": null,
|
|
1396
|
+
"--hx-pagination-active-color": null,
|
|
1397
|
+
"--hx-pagination-bg": null,
|
|
1398
|
+
"--hx-pagination-border-color": null,
|
|
1399
|
+
"--hx-pagination-border-radius": null,
|
|
1400
|
+
"--hx-pagination-button-size": null,
|
|
1401
|
+
"--hx-pagination-color": null,
|
|
1402
|
+
"--hx-pagination-ellipsis-color": null,
|
|
1403
|
+
"--hx-pagination-focus-ring-color": null,
|
|
1404
|
+
"--hx-pagination-font-family": null,
|
|
1405
|
+
"--hx-pagination-gap": null,
|
|
1406
|
+
"--hx-pagination-hover-bg": null,
|
|
1407
|
+
"--hx-pagination-hover-border-color": null,
|
|
1408
|
+
"--hx-pagination-page-size-label-color": null
|
|
1409
|
+
},
|
|
1410
|
+
"hx-patient-banner": {
|
|
1411
|
+
"--hx-patient-banner-bg": null,
|
|
1412
|
+
"--hx-patient-banner-border-color": null,
|
|
1413
|
+
"--hx-patient-banner-font-family": null,
|
|
1414
|
+
"--hx-patient-banner-gap": null,
|
|
1415
|
+
"--hx-patient-banner-invalid-accent-color": null,
|
|
1416
|
+
"--hx-patient-banner-invalid-bg": null,
|
|
1417
|
+
"--hx-patient-banner-invalid-border-color": null,
|
|
1418
|
+
"--hx-patient-banner-label-color": null,
|
|
1419
|
+
"--hx-patient-banner-label-font-size": null,
|
|
1420
|
+
"--hx-patient-banner-padding": null,
|
|
1421
|
+
"--hx-patient-banner-photo-bg": null,
|
|
1422
|
+
"--hx-patient-banner-photo-size": null,
|
|
1423
|
+
"--hx-patient-banner-value-color": null,
|
|
1424
|
+
"--hx-patient-banner-value-font-size": null
|
|
1425
|
+
},
|
|
1426
|
+
"hx-phi-field": {
|
|
1427
|
+
"--hx-phi-field-disabled-opacity": null,
|
|
1428
|
+
"--hx-phi-field-focus-ring-color": null,
|
|
1429
|
+
"--hx-phi-field-font-family": null,
|
|
1430
|
+
"--hx-phi-field-letter-spacing": null,
|
|
1431
|
+
"--hx-phi-field-masked-color": null,
|
|
1432
|
+
"--hx-phi-field-toggle-color": null,
|
|
1433
|
+
"--hx-phi-field-value-color": null
|
|
1434
|
+
},
|
|
1435
|
+
"hx-popover": {
|
|
1436
|
+
"--hx-popover-arrow-size": null,
|
|
1437
|
+
"--hx-popover-bg": null,
|
|
1438
|
+
"--hx-popover-border-color": null,
|
|
1439
|
+
"--hx-popover-border-radius": null,
|
|
1440
|
+
"--hx-popover-color": null,
|
|
1441
|
+
"--hx-popover-focus-ring-color": null,
|
|
1442
|
+
"--hx-popover-font-family": null,
|
|
1443
|
+
"--hx-popover-font-size": null,
|
|
1444
|
+
"--hx-popover-max-width": null,
|
|
1445
|
+
"--hx-popover-padding": null,
|
|
1446
|
+
"--hx-popover-shadow": null,
|
|
1447
|
+
"--hx-popover-transition-duration": null,
|
|
1448
|
+
"--hx-popover-z-index": null
|
|
1449
|
+
},
|
|
1450
|
+
"hx-popup": {
|
|
1451
|
+
"--hx-popup-transition": null,
|
|
1452
|
+
"--hx-popup-z-index": null
|
|
1453
|
+
},
|
|
1454
|
+
"hx-progress-bar": {
|
|
1455
|
+
"--hx-progress-bar-border-radius": null,
|
|
1456
|
+
"--hx-progress-bar-height-lg": null,
|
|
1457
|
+
"--hx-progress-bar-height-md": null,
|
|
1458
|
+
"--hx-progress-bar-height-sm": null,
|
|
1459
|
+
"--hx-progress-bar-indeterminate-duration": null,
|
|
1460
|
+
"--hx-progress-bar-indicator-bg": null,
|
|
1461
|
+
"--hx-progress-bar-label-color": null,
|
|
1462
|
+
"--hx-progress-bar-label-font-family": null,
|
|
1463
|
+
"--hx-progress-bar-label-font-size": null,
|
|
1464
|
+
"--hx-progress-bar-label-font-weight": null,
|
|
1465
|
+
"--hx-progress-bar-track-bg": null
|
|
1466
|
+
},
|
|
1467
|
+
"hx-progress-ring": {
|
|
1468
|
+
"--hx-progress-ring-font-family": null,
|
|
1469
|
+
"--hx-progress-ring-indicator-color": null,
|
|
1470
|
+
"--hx-progress-ring-label-color": null,
|
|
1471
|
+
"--hx-progress-ring-track-color": null
|
|
1472
|
+
},
|
|
1473
|
+
"hx-radio-group": {
|
|
1474
|
+
"--hx-radio-group-error-color": null,
|
|
1475
|
+
"--hx-radio-group-font-family": null,
|
|
1476
|
+
"--hx-radio-group-gap": null,
|
|
1477
|
+
"--hx-radio-group-help-text-color": null,
|
|
1478
|
+
"--hx-radio-group-label-color": null
|
|
1479
|
+
},
|
|
1480
|
+
"hx-rating": {
|
|
1481
|
+
"--hx-rating-color": null,
|
|
1482
|
+
"--hx-rating-empty-color": null,
|
|
1483
|
+
"--hx-rating-gap": null,
|
|
1484
|
+
"--hx-rating-hover-color": null,
|
|
1485
|
+
"--hx-rating-size": null
|
|
1486
|
+
},
|
|
1487
|
+
"hx-select": {
|
|
1488
|
+
"--hx-select-bg": null,
|
|
1489
|
+
"--hx-select-border-color": null,
|
|
1490
|
+
"--hx-select-border-radius": null,
|
|
1491
|
+
"--hx-select-chevron-color": null,
|
|
1492
|
+
"--hx-select-chevron-size": null,
|
|
1493
|
+
"--hx-select-color": null,
|
|
1494
|
+
"--hx-select-error-color": null,
|
|
1495
|
+
"--hx-select-focus-ring-color": null,
|
|
1496
|
+
"--hx-select-font-family": null,
|
|
1497
|
+
"--hx-select-label-color": null,
|
|
1498
|
+
"--hx-select-listbox-bg": null,
|
|
1499
|
+
"--hx-select-listbox-max-height": null,
|
|
1500
|
+
"--hx-select-listbox-shadow": null,
|
|
1501
|
+
"--hx-select-option-focus-ring-offset": null,
|
|
1502
|
+
"--hx-select-option-hover-bg": null,
|
|
1503
|
+
"--hx-select-option-selected-bg": null,
|
|
1504
|
+
"--hx-select-placeholder-color": null
|
|
1505
|
+
},
|
|
1506
|
+
"hx-side-nav": {
|
|
1507
|
+
"--hx-side-nav-bg": null,
|
|
1508
|
+
"--hx-side-nav-border-color": null,
|
|
1509
|
+
"--hx-side-nav-collapsed-width": null,
|
|
1510
|
+
"--hx-side-nav-color": null,
|
|
1511
|
+
"--hx-side-nav-focus-ring-color": null,
|
|
1512
|
+
"--hx-side-nav-footer-padding": null,
|
|
1513
|
+
"--hx-side-nav-header-padding": null,
|
|
1514
|
+
"--hx-side-nav-toggle-color": null,
|
|
1515
|
+
"--hx-side-nav-toggle-hover-color": null,
|
|
1516
|
+
"--hx-side-nav-width": null
|
|
1517
|
+
},
|
|
1518
|
+
"hx-skeleton": {
|
|
1519
|
+
"--hx-skeleton-bg": null,
|
|
1520
|
+
"--hx-skeleton-border-radius-circle": null,
|
|
1521
|
+
"--hx-skeleton-button-radius": null,
|
|
1522
|
+
"--hx-skeleton-duration": null,
|
|
1523
|
+
"--hx-skeleton-rect-radius": null,
|
|
1524
|
+
"--hx-skeleton-shimmer-color": null,
|
|
1525
|
+
"--hx-skeleton-shimmer-width": null,
|
|
1526
|
+
"--hx-skeleton-text-radius": null
|
|
1527
|
+
},
|
|
1528
|
+
"hx-slider": {
|
|
1529
|
+
"--hx-slider-disabled-fill-bg": null,
|
|
1530
|
+
"--hx-slider-disabled-thumb-border-color": null,
|
|
1531
|
+
"--hx-slider-fill-bg": null,
|
|
1532
|
+
"--hx-slider-focus-ring-color": null,
|
|
1533
|
+
"--hx-slider-font-family": null,
|
|
1534
|
+
"--hx-slider-help-text-color": null,
|
|
1535
|
+
"--hx-slider-input-padding-block": null,
|
|
1536
|
+
"--hx-slider-label-color": null,
|
|
1537
|
+
"--hx-slider-range-label-color": null,
|
|
1538
|
+
"--hx-slider-thumb-bg": null,
|
|
1539
|
+
"--hx-slider-thumb-border-color": null,
|
|
1540
|
+
"--hx-slider-thumb-border-width": null,
|
|
1541
|
+
"--hx-slider-thumb-shadow": null,
|
|
1542
|
+
"--hx-slider-thumb-size-lg": null,
|
|
1543
|
+
"--hx-slider-thumb-size-md": null,
|
|
1544
|
+
"--hx-slider-thumb-size-sm": null,
|
|
1545
|
+
"--hx-slider-tick-color": null,
|
|
1546
|
+
"--hx-slider-track-bg": null,
|
|
1547
|
+
"--hx-slider-track-height-lg": null,
|
|
1548
|
+
"--hx-slider-track-height-md": null,
|
|
1549
|
+
"--hx-slider-track-height-sm": null,
|
|
1550
|
+
"--hx-slider-value-color": null
|
|
1551
|
+
},
|
|
1552
|
+
"hx-spinner": {
|
|
1553
|
+
"--hx-spinner-color": null,
|
|
1554
|
+
"--hx-spinner-track-color": null
|
|
1555
|
+
},
|
|
1556
|
+
"hx-split-button": {
|
|
1557
|
+
"--hx-split-button-bg": null,
|
|
1558
|
+
"--hx-split-button-border-color": null,
|
|
1559
|
+
"--hx-split-button-border-radius": null,
|
|
1560
|
+
"--hx-split-button-color": null,
|
|
1561
|
+
"--hx-split-button-divider-color": null,
|
|
1562
|
+
"--hx-split-button-focus-ring-color": null,
|
|
1563
|
+
"--hx-split-button-font-family": null,
|
|
1564
|
+
"--hx-split-button-font-weight": null,
|
|
1565
|
+
"--hx-split-button-menu-bg": null,
|
|
1566
|
+
"--hx-split-button-menu-border-color": null,
|
|
1567
|
+
"--hx-split-button-menu-border-radius": null,
|
|
1568
|
+
"--hx-split-button-menu-max-height": null,
|
|
1569
|
+
"--hx-split-button-menu-shadow": null
|
|
1570
|
+
},
|
|
1571
|
+
"hx-split-panel": {
|
|
1572
|
+
"--hx-split-panel-btn-icon-size": null,
|
|
1573
|
+
"--hx-split-panel-divider-color": null,
|
|
1574
|
+
"--hx-split-panel-divider-hover-color": null,
|
|
1575
|
+
"--hx-split-panel-divider-size": null,
|
|
1576
|
+
"--hx-split-panel-focus-ring-color": null
|
|
1577
|
+
},
|
|
1578
|
+
"hx-stat": {
|
|
1579
|
+
"--hx-stat-color": null,
|
|
1580
|
+
"--hx-stat-font-family": null,
|
|
1581
|
+
"--hx-stat-gap": null,
|
|
1582
|
+
"--hx-stat-header-gap": null,
|
|
1583
|
+
"--hx-stat-icon-color": null,
|
|
1584
|
+
"--hx-stat-label-color": null,
|
|
1585
|
+
"--hx-stat-label-font-size-lg": null,
|
|
1586
|
+
"--hx-stat-label-font-size-md": null,
|
|
1587
|
+
"--hx-stat-label-font-size-sm": null,
|
|
1588
|
+
"--hx-stat-trend-down-bg": null,
|
|
1589
|
+
"--hx-stat-trend-down-color": null,
|
|
1590
|
+
"--hx-stat-trend-up-bg": null,
|
|
1591
|
+
"--hx-stat-trend-up-color": null,
|
|
1592
|
+
"--hx-stat-value-color": null,
|
|
1593
|
+
"--hx-stat-value-font-size-lg": null,
|
|
1594
|
+
"--hx-stat-value-font-size-md": null,
|
|
1595
|
+
"--hx-stat-value-font-size-sm": null,
|
|
1596
|
+
"--hx-stat-value-font-weight": null
|
|
1597
|
+
},
|
|
1598
|
+
"hx-status-indicator": {
|
|
1599
|
+
"--hx-status-indicator-color-away": null,
|
|
1600
|
+
"--hx-status-indicator-color-busy": null,
|
|
1601
|
+
"--hx-status-indicator-color-default": null,
|
|
1602
|
+
"--hx-status-indicator-color-offline": null,
|
|
1603
|
+
"--hx-status-indicator-color-online": null,
|
|
1604
|
+
"--hx-status-indicator-color-unknown": null,
|
|
1605
|
+
"--hx-status-indicator-label-color": null,
|
|
1606
|
+
"--hx-status-indicator-label-font-size": null,
|
|
1607
|
+
"--hx-status-indicator-pulse-color": null,
|
|
1608
|
+
"--hx-status-indicator-pulse-duration": null,
|
|
1609
|
+
"--hx-status-indicator-pulse-scale": null,
|
|
1610
|
+
"--hx-status-indicator-size-lg": null,
|
|
1611
|
+
"--hx-status-indicator-size-md": null,
|
|
1612
|
+
"--hx-status-indicator-size-sm": null
|
|
1613
|
+
},
|
|
1614
|
+
"hx-steps": {
|
|
1615
|
+
"--hx-steps-active-bg": null,
|
|
1616
|
+
"--hx-steps-active-border-color": null,
|
|
1617
|
+
"--hx-steps-active-color": null,
|
|
1618
|
+
"--hx-steps-active-label-color": null,
|
|
1619
|
+
"--hx-steps-complete-bg": null,
|
|
1620
|
+
"--hx-steps-complete-border-color": null,
|
|
1621
|
+
"--hx-steps-complete-color": null,
|
|
1622
|
+
"--hx-steps-complete-label-color": null,
|
|
1623
|
+
"--hx-steps-connector-color": null,
|
|
1624
|
+
"--hx-steps-connector-complete-color": null,
|
|
1625
|
+
"--hx-steps-connector-thickness": null,
|
|
1626
|
+
"--hx-steps-description-color": null,
|
|
1627
|
+
"--hx-steps-description-font-size": null,
|
|
1628
|
+
"--hx-steps-disabled-bg": null,
|
|
1629
|
+
"--hx-steps-disabled-border-color": null,
|
|
1630
|
+
"--hx-steps-disabled-color": null,
|
|
1631
|
+
"--hx-steps-error-bg": null,
|
|
1632
|
+
"--hx-steps-error-border-color": null,
|
|
1633
|
+
"--hx-steps-error-color": null,
|
|
1634
|
+
"--hx-steps-error-label-color": null,
|
|
1635
|
+
"--hx-steps-focus-ring-color": null,
|
|
1636
|
+
"--hx-steps-font-family": null,
|
|
1637
|
+
"--hx-steps-indicator-bg": null,
|
|
1638
|
+
"--hx-steps-indicator-border-color": null,
|
|
1639
|
+
"--hx-steps-indicator-color": null,
|
|
1640
|
+
"--hx-steps-indicator-font-size": null,
|
|
1641
|
+
"--hx-steps-indicator-icon-size": null,
|
|
1642
|
+
"--hx-steps-indicator-size": null,
|
|
1643
|
+
"--hx-steps-item-flex": null,
|
|
1644
|
+
"--hx-steps-item-width": null,
|
|
1645
|
+
"--hx-steps-label-color": null,
|
|
1646
|
+
"--hx-steps-label-font-size": null
|
|
1647
|
+
},
|
|
1648
|
+
"hx-structured-list": {
|
|
1649
|
+
"--hx-structured-list-border-color": null,
|
|
1650
|
+
"--hx-structured-list-border-width": null,
|
|
1651
|
+
"--hx-structured-list-condensed-padding-block": null,
|
|
1652
|
+
"--hx-structured-list-condensed-padding-inline": null,
|
|
1653
|
+
"--hx-structured-list-label-color": null,
|
|
1654
|
+
"--hx-structured-list-padding-block": null,
|
|
1655
|
+
"--hx-structured-list-padding-inline": null,
|
|
1656
|
+
"--hx-structured-list-stripe-bg": null,
|
|
1657
|
+
"--hx-structured-list-value-color": null
|
|
1658
|
+
},
|
|
1659
|
+
"hx-switch": {
|
|
1660
|
+
"--hx-switch-error-color": null,
|
|
1661
|
+
"--hx-switch-focus-ring-color": null,
|
|
1662
|
+
"--hx-switch-font-family": null,
|
|
1663
|
+
"--hx-switch-help-text-color": null,
|
|
1664
|
+
"--hx-switch-label-color": null,
|
|
1665
|
+
"--hx-switch-thumb-bg": null,
|
|
1666
|
+
"--hx-switch-thumb-offset": null,
|
|
1667
|
+
"--hx-switch-thumb-shadow": null,
|
|
1668
|
+
"--hx-switch-thumb-size-lg": null,
|
|
1669
|
+
"--hx-switch-thumb-size-md": null,
|
|
1670
|
+
"--hx-switch-thumb-size-sm": null,
|
|
1671
|
+
"--hx-switch-track-bg": null,
|
|
1672
|
+
"--hx-switch-track-checked-bg": null,
|
|
1673
|
+
"--hx-switch-track-checked-hover-bg": null,
|
|
1674
|
+
"--hx-switch-track-height-lg": null,
|
|
1675
|
+
"--hx-switch-track-height-md": null,
|
|
1676
|
+
"--hx-switch-track-height-sm": null,
|
|
1677
|
+
"--hx-switch-track-hover-bg": null,
|
|
1678
|
+
"--hx-switch-track-width-lg": null,
|
|
1679
|
+
"--hx-switch-track-width-md": null,
|
|
1680
|
+
"--hx-switch-track-width-sm": null
|
|
1681
|
+
},
|
|
1682
|
+
"hx-table": {
|
|
1683
|
+
"--hx-table-font-family": null,
|
|
1684
|
+
"--hx-table-header-bg": null,
|
|
1685
|
+
"--hx-table-header-color": null,
|
|
1686
|
+
"--hx-table-row-hover-bg": null,
|
|
1687
|
+
"--hx-table-stripe-bg": null
|
|
1688
|
+
},
|
|
1689
|
+
"hx-tabs": {
|
|
1690
|
+
"--hx-tabs-border-color": null,
|
|
1691
|
+
"--hx-tabs-border-width": null,
|
|
1692
|
+
"--hx-tabs-focus-ring-color": null,
|
|
1693
|
+
"--hx-tabs-font-family": null,
|
|
1694
|
+
"--hx-tabs-gap": null,
|
|
1695
|
+
"--hx-tabs-indicator-color": null,
|
|
1696
|
+
"--hx-tabs-indicator-size": null,
|
|
1697
|
+
"--hx-tabs-panel-color": null,
|
|
1698
|
+
"--hx-tabs-panel-padding": null,
|
|
1699
|
+
"--hx-tabs-tab-active-color": null,
|
|
1700
|
+
"--hx-tabs-tab-active-font-weight": null,
|
|
1701
|
+
"--hx-tabs-tab-color": null,
|
|
1702
|
+
"--hx-tabs-tab-disabled-color": null,
|
|
1703
|
+
"--hx-tabs-tab-font-family": null,
|
|
1704
|
+
"--hx-tabs-tab-font-size": null,
|
|
1705
|
+
"--hx-tabs-tab-font-weight": null,
|
|
1706
|
+
"--hx-tabs-tab-hover-bg": null,
|
|
1707
|
+
"--hx-tabs-tab-hover-color": null,
|
|
1708
|
+
"--hx-tabs-tab-padding-x": null,
|
|
1709
|
+
"--hx-tabs-tab-padding-y": null,
|
|
1710
|
+
"--hx-tabs-vertical-width": null
|
|
1711
|
+
},
|
|
1712
|
+
"hx-tag": {
|
|
1713
|
+
"--hx-tag-bg": null,
|
|
1714
|
+
"--hx-tag-border-color": null,
|
|
1715
|
+
"--hx-tag-border-radius": null,
|
|
1716
|
+
"--hx-tag-border-radius-pill": null,
|
|
1717
|
+
"--hx-tag-color": null,
|
|
1718
|
+
"--hx-tag-danger-bg": null,
|
|
1719
|
+
"--hx-tag-danger-border-color": null,
|
|
1720
|
+
"--hx-tag-danger-color": null,
|
|
1721
|
+
"--hx-tag-default-bg": null,
|
|
1722
|
+
"--hx-tag-default-border-color": null,
|
|
1723
|
+
"--hx-tag-default-color": null,
|
|
1724
|
+
"--hx-tag-font-family": null,
|
|
1725
|
+
"--hx-tag-font-size": null,
|
|
1726
|
+
"--hx-tag-font-weight": null,
|
|
1727
|
+
"--hx-tag-padding-x": null,
|
|
1728
|
+
"--hx-tag-padding-y": null,
|
|
1729
|
+
"--hx-tag-primary-bg": null,
|
|
1730
|
+
"--hx-tag-primary-border-color": null,
|
|
1731
|
+
"--hx-tag-primary-color": null,
|
|
1732
|
+
"--hx-tag-success-bg": null,
|
|
1733
|
+
"--hx-tag-success-border-color": null,
|
|
1734
|
+
"--hx-tag-success-color": null,
|
|
1735
|
+
"--hx-tag-warning-bg": null,
|
|
1736
|
+
"--hx-tag-warning-border-color": null,
|
|
1737
|
+
"--hx-tag-warning-color": null
|
|
1738
|
+
},
|
|
1739
|
+
"hx-text": {
|
|
1740
|
+
"--hx-text-color": null,
|
|
1741
|
+
"--hx-text-danger-color": null,
|
|
1742
|
+
"--hx-text-default-color": null,
|
|
1743
|
+
"--hx-text-disabled-color": null,
|
|
1744
|
+
"--hx-text-font-family": null,
|
|
1745
|
+
"--hx-text-font-size": null,
|
|
1746
|
+
"--hx-text-font-weight": null,
|
|
1747
|
+
"--hx-text-inverse-color": null,
|
|
1748
|
+
"--hx-text-letter-spacing": null,
|
|
1749
|
+
"--hx-text-line-height": null,
|
|
1750
|
+
"--hx-text-sm": null,
|
|
1751
|
+
"--hx-text-subtle-color": null,
|
|
1752
|
+
"--hx-text-success-color": null,
|
|
1753
|
+
"--hx-text-warning-color": null
|
|
1754
|
+
},
|
|
1755
|
+
"hx-text-input": {
|
|
1756
|
+
"--hx-text-input-bg": null,
|
|
1757
|
+
"--hx-text-input-border-color": null,
|
|
1758
|
+
"--hx-text-input-border-color-focus": null,
|
|
1759
|
+
"--hx-text-input-border-color-hover": null,
|
|
1760
|
+
"--hx-text-input-border-color-invalid": null,
|
|
1761
|
+
"--hx-text-input-border-radius": null,
|
|
1762
|
+
"--hx-text-input-border-width": null,
|
|
1763
|
+
"--hx-text-input-color": null,
|
|
1764
|
+
"--hx-text-input-disabled-bg": null,
|
|
1765
|
+
"--hx-text-input-disabled-color": null,
|
|
1766
|
+
"--hx-text-input-error-color": null,
|
|
1767
|
+
"--hx-text-input-focus-ring-color": null,
|
|
1768
|
+
"--hx-text-input-focus-ring-offset": null,
|
|
1769
|
+
"--hx-text-input-focus-ring-width": null,
|
|
1770
|
+
"--hx-text-input-font-family": null,
|
|
1771
|
+
"--hx-text-input-font-size": null,
|
|
1772
|
+
"--hx-text-input-help-text-color": null,
|
|
1773
|
+
"--hx-text-input-label-color": null,
|
|
1774
|
+
"--hx-text-input-lg-font-size": null,
|
|
1775
|
+
"--hx-text-input-padding-x": null,
|
|
1776
|
+
"--hx-text-input-padding-y": null,
|
|
1777
|
+
"--hx-text-input-placeholder-color": null,
|
|
1778
|
+
"--hx-text-input-sm-font-size": null
|
|
1779
|
+
},
|
|
1780
|
+
"hx-textarea": {
|
|
1781
|
+
"--hx-textarea-bg": null,
|
|
1782
|
+
"--hx-textarea-border-color": null,
|
|
1783
|
+
"--hx-textarea-border-color-focus": null,
|
|
1784
|
+
"--hx-textarea-border-color-invalid": null,
|
|
1785
|
+
"--hx-textarea-border-radius": null,
|
|
1786
|
+
"--hx-textarea-color": null,
|
|
1787
|
+
"--hx-textarea-counter-color": null,
|
|
1788
|
+
"--hx-textarea-error-color": null,
|
|
1789
|
+
"--hx-textarea-font-family": null,
|
|
1790
|
+
"--hx-textarea-font-size": null,
|
|
1791
|
+
"--hx-textarea-help-text-color": null,
|
|
1792
|
+
"--hx-textarea-label-color": null,
|
|
1793
|
+
"--hx-textarea-min-height": null,
|
|
1794
|
+
"--hx-textarea-padding-x": null,
|
|
1795
|
+
"--hx-textarea-padding-y": null,
|
|
1796
|
+
"--hx-textarea-placeholder-color": null
|
|
1797
|
+
},
|
|
1798
|
+
"hx-time-picker": {
|
|
1799
|
+
"--hx-time-picker-bg": null,
|
|
1800
|
+
"--hx-time-picker-border-color": null,
|
|
1801
|
+
"--hx-time-picker-border-radius": null,
|
|
1802
|
+
"--hx-time-picker-chevron-color": null,
|
|
1803
|
+
"--hx-time-picker-color": null,
|
|
1804
|
+
"--hx-time-picker-error-color": null,
|
|
1805
|
+
"--hx-time-picker-focus-ring-color": null,
|
|
1806
|
+
"--hx-time-picker-font-family": null,
|
|
1807
|
+
"--hx-time-picker-label-color": null,
|
|
1808
|
+
"--hx-time-picker-listbox-bg": null,
|
|
1809
|
+
"--hx-time-picker-listbox-max-height": null,
|
|
1810
|
+
"--hx-time-picker-listbox-shadow": null,
|
|
1811
|
+
"--hx-time-picker-option-color": null,
|
|
1812
|
+
"--hx-time-picker-option-hover-bg": null,
|
|
1813
|
+
"--hx-time-picker-option-hover-color": null,
|
|
1814
|
+
"--hx-time-picker-option-selected-bg": null,
|
|
1815
|
+
"--hx-time-picker-option-selected-color": null
|
|
1816
|
+
},
|
|
1817
|
+
"hx-toast": {
|
|
1818
|
+
"--hx-toast-bg": null,
|
|
1819
|
+
"--hx-toast-border-radius": null,
|
|
1820
|
+
"--hx-toast-color": null,
|
|
1821
|
+
"--hx-toast-enter-translate": null,
|
|
1822
|
+
"--hx-toast-font-family": null,
|
|
1823
|
+
"--hx-toast-shadow": null,
|
|
1824
|
+
"--hx-toast-width": null
|
|
1825
|
+
},
|
|
1826
|
+
"hx-toggle-button": {
|
|
1827
|
+
"--hx-toggle-button-bg": null,
|
|
1828
|
+
"--hx-toggle-button-border-color": null,
|
|
1829
|
+
"--hx-toggle-button-border-radius": null,
|
|
1830
|
+
"--hx-toggle-button-color": null,
|
|
1831
|
+
"--hx-toggle-button-focus-ring-color": null,
|
|
1832
|
+
"--hx-toggle-button-font-family": null,
|
|
1833
|
+
"--hx-toggle-button-font-weight": null,
|
|
1834
|
+
"--hx-toggle-button-pressed-bg": null,
|
|
1835
|
+
"--hx-toggle-button-pressed-color": null
|
|
1836
|
+
},
|
|
1837
|
+
"hx-tooltip": {
|
|
1838
|
+
"--hx-tooltip-arrow-size": null,
|
|
1839
|
+
"--hx-tooltip-bg": null,
|
|
1840
|
+
"--hx-tooltip-border-radius": null,
|
|
1841
|
+
"--hx-tooltip-color": null,
|
|
1842
|
+
"--hx-tooltip-font-family": null,
|
|
1843
|
+
"--hx-tooltip-font-size": null,
|
|
1844
|
+
"--hx-tooltip-max-width": null,
|
|
1845
|
+
"--hx-tooltip-padding": null,
|
|
1846
|
+
"--hx-tooltip-shadow": null,
|
|
1847
|
+
"--hx-tooltip-transition-duration": null,
|
|
1848
|
+
"--hx-tooltip-z-index": null
|
|
1849
|
+
},
|
|
1850
|
+
"hx-top-nav": {
|
|
1851
|
+
"--hx-top-nav-bg": null,
|
|
1852
|
+
"--hx-top-nav-border-color": null,
|
|
1853
|
+
"--hx-top-nav-color": null,
|
|
1854
|
+
"--hx-top-nav-focus-ring-color": null,
|
|
1855
|
+
"--hx-top-nav-font-family": null,
|
|
1856
|
+
"--hx-top-nav-height": null,
|
|
1857
|
+
"--hx-top-nav-padding-x": null,
|
|
1858
|
+
"--hx-top-nav-toggle-color": null,
|
|
1859
|
+
"--hx-top-nav-toggle-hover-bg": null,
|
|
1860
|
+
"--hx-top-nav-z-index": null
|
|
1861
|
+
}
|
|
613
1862
|
}
|
|
614
1863
|
}
|