@mirohq/design-system-themes 1.3.3 → 1.3.4
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/metadata.json +1097 -0
- package/package.json +5 -3
package/metadata.json
ADDED
|
@@ -0,0 +1,1097 @@
|
|
|
1
|
+
{
|
|
2
|
+
"backgroundAlpha": {
|
|
3
|
+
"description": "⚠️ Deprecated. Do not use."
|
|
4
|
+
},
|
|
5
|
+
"backgroundAlphaActive": {
|
|
6
|
+
"description": "⚠️ Deprecated. Do not use."
|
|
7
|
+
},
|
|
8
|
+
"backgroundAlphaHover": {
|
|
9
|
+
"description": "⚠️ Deprecated. Do not use."
|
|
10
|
+
},
|
|
11
|
+
"backgroundAlphaNeutralsOverlay": {
|
|
12
|
+
"description": "⚠️ Deprecated. Use `background-overlay` instead."
|
|
13
|
+
},
|
|
14
|
+
"backgroundAlphaNeutralsOverlaySubtle": {
|
|
15
|
+
"description": "⚠️ Deprecated. Use `background-overlay` instead."
|
|
16
|
+
},
|
|
17
|
+
"backgroundAlphaSubtle": {
|
|
18
|
+
"description": "⚠️ Deprecated. Do not use."
|
|
19
|
+
},
|
|
20
|
+
"backgroundCanvas": {
|
|
21
|
+
"description": "The base layer of the application canvas. Use exclusively for the root viewport background. Do not use for any component, surface, or container."
|
|
22
|
+
},
|
|
23
|
+
"backgroundDisabled": {
|
|
24
|
+
"description": "The background for any disabled component or element that is not interactive. Use to visually communicate that a surface is unavailable or inactive. Do not use for enabled elements in any state, even if they visually appear muted. Always pair with `text-on-disabled` for text on top."
|
|
25
|
+
},
|
|
26
|
+
"backgroundElevated": {
|
|
27
|
+
"description": "The background for dialogs and other elements that float above the canvas with a drop shadow. Use when elevation is communicated through shadow rather than a distinct surface color. Do not use for components with their own background token (e.g. popovers, toasts). Do not use for flat content containers; use `background-surface` for those. Do not use for toolbars, panels, or dropdowns; use `background-layout` for those."
|
|
28
|
+
},
|
|
29
|
+
"backgroundInverted": {
|
|
30
|
+
"description": "A theme-responsive inverted surface — dark in light themes, light in dark themes. Use for callouts, badges, and UI elements that need strong contrast reversal. Do not use for tooltips; use `tooltip-background` for those. Do not use when the surface must stay dark regardless of theme; use `background-static-dark` for that. Do not use as the primary page background."
|
|
31
|
+
},
|
|
32
|
+
"backgroundInvertedSecondary": {
|
|
33
|
+
"description": "A secondary shade of the inverted background for elements nested within an inverted surface. Use for sub-regions, inset sections, or layered content inside an inverted container. Do not use as the primary inverted background; use `background-inverted` for that."
|
|
34
|
+
},
|
|
35
|
+
"backgroundLayout": {
|
|
36
|
+
"description": "The background for toolbars, panels, and dropdowns. Use for UI chrome and container components that organize content within the application. Do not use for cards or flat content containers; use `background-surface` for those. Do not use for floating layers; use `background-elevated` for those. Do not use as the page background; use `background-canvas` for that."
|
|
37
|
+
},
|
|
38
|
+
"backgroundOverlay": {
|
|
39
|
+
"description": "The semi-transparent scrim that appears behind elevated dialogs and modals to obscure and block interaction with the content beneath. Use exclusively as the backdrop layer behind a dialog or modal — never as a surface or container background. Always pair with `background-elevated` for the dialog itself."
|
|
40
|
+
},
|
|
41
|
+
"backgroundStaticDark": {
|
|
42
|
+
"description": "⚠️ Deprecated. Use `Colors/Background/background-static-dark` instead."
|
|
43
|
+
},
|
|
44
|
+
"backgroundStaticDarkSubtle": {
|
|
45
|
+
"description": "⚠️ Deprecated. Use `Colors/Background/background-static-dark-subtle` instead."
|
|
46
|
+
},
|
|
47
|
+
"backgroundStaticLight": {
|
|
48
|
+
"description": "A light background that does not change between light and dark themes. Use for components that must always appear light regardless of the user's theme. Do not use for theme-responsive surfaces; use `background-surface` for those. Do not use when the surface must stay dark; use `background-static-dark` for that."
|
|
49
|
+
},
|
|
50
|
+
"backgroundSurface": {
|
|
51
|
+
"description": "The background for flat content containers that sit directly on the canvas without visual elevation. Use for cards, tiles, and inline content blocks. Do not use for floating or overlaid layers; use `background-elevated` for those. When used inside a nested surface, pair with `border-subtle` to distinguish it from its parent. For nested regions that don't require a border, use `background-surface-secondary`."
|
|
52
|
+
},
|
|
53
|
+
"backgroundSurfaceSecondary": {
|
|
54
|
+
"description": "A secondary background for content nested inside a surface or elevated container. Use for inner sections, inset regions, or sub-sections within a card, modal, or drawer. Do not use as a primary container background; use `background-surface` or `background-elevated` for those."
|
|
55
|
+
},
|
|
56
|
+
"backgroundTransparent": {
|
|
57
|
+
"description": "A fully transparent background fill. Use when an element needs to participate in layout or receive interaction (hover, press) without displaying any background color. Do not use as a substitute for removing a fill altogether; only use when the transparent state is intentional and needs to be explicitly declared."
|
|
58
|
+
},
|
|
59
|
+
"backgroundDangerProminent": {
|
|
60
|
+
"description": "⚠️ Deprecated. Use `background-interactive-danger` instead."
|
|
61
|
+
},
|
|
62
|
+
"backgroundDangerProminentActive": {
|
|
63
|
+
"description": "⚠️ Deprecated. Use `background-interactive-danger-pressed` instead."
|
|
64
|
+
},
|
|
65
|
+
"backgroundDangerProminentHover": {
|
|
66
|
+
"description": "⚠️ Deprecated. Use `background-interactive-danger-hover` instead."
|
|
67
|
+
},
|
|
68
|
+
"backgroundDangerProminentPressed": {
|
|
69
|
+
"description": "⚠️ Deprecated. Use `background-interactive-danger-pressed` instead."
|
|
70
|
+
},
|
|
71
|
+
"backgroundDangerSubtle": {
|
|
72
|
+
"description": "⚠️ Deprecated. Use `status-background-error` instead."
|
|
73
|
+
},
|
|
74
|
+
"backgroundDangerSubtleActive": {
|
|
75
|
+
"description": "⚠️ Deprecated. Use `status-background-error` instead."
|
|
76
|
+
},
|
|
77
|
+
"backgroundDangerSubtleHover": {
|
|
78
|
+
"description": "⚠️ Deprecated. Use `status-background-error` instead."
|
|
79
|
+
},
|
|
80
|
+
"backgroundDangerSubtlePressed": {
|
|
81
|
+
"description": "⚠️ Deprecated. Use `status-background-error` instead."
|
|
82
|
+
},
|
|
83
|
+
"backgroundInteractiveDanger": {
|
|
84
|
+
"description": "The resting-state background for destructive interactive elements that are not Button components — dangerous inline actions, destructive toggles. Do not use on Button components; use `button-background-danger` for those. Do not use for warning states; use `status-background-warning`."
|
|
85
|
+
},
|
|
86
|
+
"backgroundInteractiveDangerHover": {
|
|
87
|
+
"description": "The hover-state background for destructive interactive elements. Do not use on Button components; use `button-background-danger-hover`."
|
|
88
|
+
},
|
|
89
|
+
"backgroundInteractiveDangerPressed": {
|
|
90
|
+
"description": "The pressed/active-state background for destructive interactive elements. Do not use on Button components; use `button-background-danger-pressed`."
|
|
91
|
+
},
|
|
92
|
+
"backgroundInteractivePrimary": {
|
|
93
|
+
"description": "The resting-state background for high-emphasis interactive elements — nav items, toggles, and CTAs that are not Button components. Do not use on Button components; use `button-background-primary` for those. Do not use hover or pressed variants for resting state."
|
|
94
|
+
},
|
|
95
|
+
"backgroundInteractivePrimaryHover": {
|
|
96
|
+
"description": "The hover-state background for high-emphasis interactive elements. Do not use on Button components; use `button-background-primary-hover` for those. Do not use for resting or pressed states."
|
|
97
|
+
},
|
|
98
|
+
"backgroundInteractivePrimaryPressed": {
|
|
99
|
+
"description": "The pressed/active-state background for high-emphasis interactive elements. Do not use on Button components; use `button-background-primary-pressed` for those. Do not confuse with selected state; pressed is transient during activation."
|
|
100
|
+
},
|
|
101
|
+
"backgroundInteractiveSelected": {
|
|
102
|
+
"description": "The background for elements in a selected or active state — nav items, tabs, list options, and toggles. Do not use on Button components. Do not use for hover or pressed states."
|
|
103
|
+
},
|
|
104
|
+
"backgroundInteractiveSurfaceHover": {
|
|
105
|
+
"description": "The hover-state background for interactive elements using `background-surface`. Use when a flat content container (card, tile, or row) is clickable and needs hover feedback. Always pair with `background-surface` as the resting state — do not use on elements without a `background-surface` base. Do not use for buttons or controls; use `background-interactive-primary` or button-specific tokens for those."
|
|
106
|
+
},
|
|
107
|
+
"backgroundInteractiveSurfaceSecondaryHover": {
|
|
108
|
+
"description": "The hover-state background for interactive elements using `background-surface-secondary`. Use when a nested region inside a surface is clickable and needs subtle hover feedback. Always pair with `background-surface-secondary` as the resting state. Do not use on elements without a `background-surface-secondary` base."
|
|
109
|
+
},
|
|
110
|
+
"backgroundNeutrals": {
|
|
111
|
+
"description": "⚠️ Deprecated. Use `background-surface` instead."
|
|
112
|
+
},
|
|
113
|
+
"backgroundNeutralsActive": {
|
|
114
|
+
"description": "⚠️ Deprecated. Use `background-interactive-surface-hover` instead."
|
|
115
|
+
},
|
|
116
|
+
"backgroundNeutralsContainer": {
|
|
117
|
+
"description": "⚠️ Deprecated. Use `background-surface` instead."
|
|
118
|
+
},
|
|
119
|
+
"backgroundNeutralsControl": {
|
|
120
|
+
"description": "⚠️ Deprecated. Use `switch-background-default`, `slider-background`, or `slider-notch-background` depending on component."
|
|
121
|
+
},
|
|
122
|
+
"backgroundNeutralsControlHover": {
|
|
123
|
+
"description": "⚠️ Deprecated. Use `switch-background-hover` depending on component."
|
|
124
|
+
},
|
|
125
|
+
"backgroundNeutralsControlPressed": {
|
|
126
|
+
"description": "⚠️ Deprecated. No direct replacement — use the appropriate component-specific token for the active state."
|
|
127
|
+
},
|
|
128
|
+
"backgroundNeutralsDisabled": {
|
|
129
|
+
"description": "⚠️ Deprecated. Use `background-disabled` instead."
|
|
130
|
+
},
|
|
131
|
+
"backgroundNeutralsHover": {
|
|
132
|
+
"description": "⚠️ Deprecated. Use `background-interactive-surface-hover` instead."
|
|
133
|
+
},
|
|
134
|
+
"backgroundNeutralsInactive": {
|
|
135
|
+
"description": "⚠️ Deprecated. Use `background-disabled` instead."
|
|
136
|
+
},
|
|
137
|
+
"backgroundNeutralsInactiveHover": {
|
|
138
|
+
"description": "⚠️ Deprecated. Use `background-disabled` instead."
|
|
139
|
+
},
|
|
140
|
+
"backgroundNeutralsInverted": {
|
|
141
|
+
"description": "⚠️ Deprecated. Use `background-inverted` instead."
|
|
142
|
+
},
|
|
143
|
+
"backgroundNeutralsInvertedSubtle": {
|
|
144
|
+
"description": "⚠️ Deprecated. Use `background-inverted-secondary` instead."
|
|
145
|
+
},
|
|
146
|
+
"backgroundNeutralsLayout": {
|
|
147
|
+
"description": "⚠️ Deprecated. Use `background-layout` instead."
|
|
148
|
+
},
|
|
149
|
+
"backgroundNeutralsPage": {
|
|
150
|
+
"description": "⚠️ Deprecated. Use `background-surface` instead."
|
|
151
|
+
},
|
|
152
|
+
"backgroundNeutralsPageSubtle": {
|
|
153
|
+
"description": "⚠️ Deprecated. Use `background-surface-secondary` instead."
|
|
154
|
+
},
|
|
155
|
+
"backgroundNeutralsPressed": {
|
|
156
|
+
"description": "⚠️ Deprecated. Use `background-interactive-surface-hover` instead."
|
|
157
|
+
},
|
|
158
|
+
"backgroundNeutralsScrollbar": {
|
|
159
|
+
"description": "⚠️ Deprecated. Use `scrollbar-background` instead."
|
|
160
|
+
},
|
|
161
|
+
"backgroundNeutralsScrollbarActive": {
|
|
162
|
+
"description": "⚠️ Deprecated. Use `scrollbar-background` instead."
|
|
163
|
+
},
|
|
164
|
+
"backgroundNeutralsScrollbarHover": {
|
|
165
|
+
"description": "⚠️ Deprecated. Use `scrollbar-background-hover` instead."
|
|
166
|
+
},
|
|
167
|
+
"backgroundNeutralsSubtle": {
|
|
168
|
+
"description": "⚠️ Deprecated. Use `background-surface-secondary` instead."
|
|
169
|
+
},
|
|
170
|
+
"backgroundNeutralsSubtleActive": {
|
|
171
|
+
"description": "⚠️ Deprecated. Use `background-interactive-surface-secondary-hover` instead."
|
|
172
|
+
},
|
|
173
|
+
"backgroundNeutralsSubtleHover": {
|
|
174
|
+
"description": "⚠️ Deprecated. Use `background-interactive-surface-secondary-hover` instead."
|
|
175
|
+
},
|
|
176
|
+
"backgroundNeutralsSubtlePressed": {
|
|
177
|
+
"description": "⚠️ Deprecated. Use `background-interactive-surface-secondary-hover` instead."
|
|
178
|
+
},
|
|
179
|
+
"backgroundNeutralsTransparent": {
|
|
180
|
+
"description": "⚠️ Deprecated. Use `background-transparent` instead."
|
|
181
|
+
},
|
|
182
|
+
"backgroundPrimaryProminent": {
|
|
183
|
+
"description": "⚠️ Deprecated. Use `background-interactive-primary` instead."
|
|
184
|
+
},
|
|
185
|
+
"backgroundPrimaryProminentActive": {
|
|
186
|
+
"description": "⚠️ Deprecated. Use `background-interactive-primary-pressed` instead."
|
|
187
|
+
},
|
|
188
|
+
"backgroundPrimaryProminentHover": {
|
|
189
|
+
"description": "⚠️ Deprecated. Use `background-interactive-primary-hover` instead."
|
|
190
|
+
},
|
|
191
|
+
"backgroundPrimaryProminentPressed": {
|
|
192
|
+
"description": "⚠️ Deprecated. Use `background-interactive-primary-pressed` instead."
|
|
193
|
+
},
|
|
194
|
+
"backgroundPrimaryProminentSelected": {
|
|
195
|
+
"description": "⚠️ Deprecated. Use `background-interactive-selected` instead."
|
|
196
|
+
},
|
|
197
|
+
"backgroundPrimarySubtle": {
|
|
198
|
+
"description": "⚠️ Deprecated. Use `status-background-info` instead."
|
|
199
|
+
},
|
|
200
|
+
"backgroundPrimarySubtleActive": {
|
|
201
|
+
"description": "⚠️ Deprecated. Use `status-background-info` instead."
|
|
202
|
+
},
|
|
203
|
+
"backgroundPrimarySubtleHover": {
|
|
204
|
+
"description": "⚠️ Deprecated. Use `status-background-info` instead."
|
|
205
|
+
},
|
|
206
|
+
"backgroundPrimarySubtlePressed": {
|
|
207
|
+
"description": "⚠️ Deprecated. Use `status-background-info` instead."
|
|
208
|
+
},
|
|
209
|
+
"backgroundPrimarySubtleSelected": {
|
|
210
|
+
"description": "⚠️ Deprecated. Use `background-interactive-selected` instead."
|
|
211
|
+
},
|
|
212
|
+
"statusBackgroundError": {
|
|
213
|
+
"description": "The background for error status containers — error banners, validation panels, and surfaces communicating a failure or critical problem. Use when the status represents something that has gone wrong and requires attention. Do not use for warnings (cautionary but not failed); use `status-background-warning`. Do not use for danger interactive elements; use `background-interactive-danger`."
|
|
214
|
+
},
|
|
215
|
+
"statusBackgroundInfo": {
|
|
216
|
+
"description": "The background for informational status containers — info banners, alert panels, and notification surfaces communicating a neutral, non-urgent message. Use when the status conveys context or guidance without urgency. Do not use for errors, warnings, or success states; use their respective status backgrounds. Do not use on general UI surfaces unrelated to a status message."
|
|
217
|
+
},
|
|
218
|
+
"statusBackgroundSuccess": {
|
|
219
|
+
"description": "The background for success status containers — confirmation banners and surfaces communicating a completed or positive outcome. Use when the status represents a successful action or positive state. Do not use for informational messages; use `status-background-info`. Do not use on general UI surfaces unrelated to a success event."
|
|
220
|
+
},
|
|
221
|
+
"statusBackgroundWarning": {
|
|
222
|
+
"description": "The background for warning status containers — alert panels and surfaces communicating a cautionary state requiring user attention. Use when the status signals a potential problem but not an outright failure. Do not use for errors; use `status-background-error`. Do not use for destructive actions; use `background-interactive-danger`."
|
|
223
|
+
},
|
|
224
|
+
"backgroundSuccessProminent": {
|
|
225
|
+
"description": "⚠️ Deprecated. Use `status-background-success` instead."
|
|
226
|
+
},
|
|
227
|
+
"backgroundSuccessProminentActive": {
|
|
228
|
+
"description": "⚠️ Deprecated. Use `status-background-success` instead."
|
|
229
|
+
},
|
|
230
|
+
"backgroundSuccessProminentHover": {
|
|
231
|
+
"description": "⚠️ Deprecated. Use `status-background-success` instead."
|
|
232
|
+
},
|
|
233
|
+
"backgroundSuccessProminentPressed": {
|
|
234
|
+
"description": "⚠️ Deprecated. Use `status-background-success` instead."
|
|
235
|
+
},
|
|
236
|
+
"backgroundSuccessSubtle": {
|
|
237
|
+
"description": "⚠️ Deprecated. Use `status-background-success` instead."
|
|
238
|
+
},
|
|
239
|
+
"backgroundWarningProminent": {
|
|
240
|
+
"description": "⚠️ Deprecated. Use `status-background-warning` instead."
|
|
241
|
+
},
|
|
242
|
+
"backgroundWarningSubtle": {
|
|
243
|
+
"description": "⚠️ Deprecated. Use `status-background-warning` instead."
|
|
244
|
+
},
|
|
245
|
+
"borderDefault": {
|
|
246
|
+
"description": "The standard default border color for containers, inputs, dividers, and UI elements on a standard background. Use as the baseline border for components that need a visible but neutral edge. Do not use for focused, hovered, or interactive borders; use interactive border tokens. Do not use for disabled elements; use `border-disabled`."
|
|
247
|
+
},
|
|
248
|
+
"borderDisabled": {
|
|
249
|
+
"description": "The border color for disabled, non-interactive components. Use when a component has a border and enters a disabled state. Do not use for enabled components regardless of visual weight. Always pair with `background-disabled` and `text-disabled`."
|
|
250
|
+
},
|
|
251
|
+
"borderInverted": {
|
|
252
|
+
"description": "The primary border color for elements on dark or inverted backgrounds. Use when a standard border lacks sufficient contrast on an inverted surface. Do not use on standard light backgrounds; use `border-default`. Do not use for subtle inverted borders; use `border-inverted-subtle`."
|
|
253
|
+
},
|
|
254
|
+
"borderInvertedSubtle": {
|
|
255
|
+
"description": "A low-emphasis border for elements on dark or inverted backgrounds. Use when a subtle separator or edge is needed on an inverted surface. Do not use as the primary border on inverted surfaces; use `border-inverted`."
|
|
256
|
+
},
|
|
257
|
+
"borderStaticDark": {
|
|
258
|
+
"description": "A border color for elements on always-dark static surfaces — borders that must remain visible on backgrounds that are permanently dark across all themes. Use for component edges within static-dark surfaces like code blocks or dark toolbars. Do not use on theme-responsive inverted surfaces; use `border-inverted` for those."
|
|
259
|
+
},
|
|
260
|
+
"borderStaticDarkSubtle": {
|
|
261
|
+
"description": "A subtle border for elements on always-dark static surfaces. Use for low-emphasis separators and dividers within permanently dark components. Do not use as the primary border on static-dark surfaces; use `border-static-dark`."
|
|
262
|
+
},
|
|
263
|
+
"borderStrong": {
|
|
264
|
+
"description": "A high-emphasis border color for boundaries that need to be clearly visible or prominent — selected states, strongly delineated containers, or focused regions. Use when a border must draw clear attention to an element or region. Do not use for default or subtle borders; use `border-default` or `border-subtle`."
|
|
265
|
+
},
|
|
266
|
+
"borderSubtle": {
|
|
267
|
+
"description": "A low-emphasis border color for dividers, separators, and understated container edges. Use as the standard token for horizontal and vertical dividers between sections or list items, and for container edges that should not draw attention. Do not use as the primary border for interactive or focused elements. Do not use for strong boundaries; use `border-default` or `border-strong`."
|
|
268
|
+
},
|
|
269
|
+
"borderTransparent": {
|
|
270
|
+
"description": "A fully transparent border. Use when an element must maintain border layout space — preserving consistent sizing — without displaying a visible stroke. Do not use as a substitute for removing a border entirely; this is for cases where border presence is structural but visually invisible."
|
|
271
|
+
},
|
|
272
|
+
"borderDanger": {
|
|
273
|
+
"description": "⚠️ Deprecated. Use `border-interactive-danger` instead."
|
|
274
|
+
},
|
|
275
|
+
"borderDangerActive": {
|
|
276
|
+
"description": "⚠️ Deprecated. Use `border-interactive-danger-pressed` instead."
|
|
277
|
+
},
|
|
278
|
+
"borderDangerHover": {
|
|
279
|
+
"description": "⚠️ Deprecated. Use `border-interactive-danger-hover` instead."
|
|
280
|
+
},
|
|
281
|
+
"borderDangerPressed": {
|
|
282
|
+
"description": "⚠️ Deprecated. Use `border-interactive-danger-pressed` instead."
|
|
283
|
+
},
|
|
284
|
+
"borderDangerSubtle": {
|
|
285
|
+
"description": "⚠️ Deprecated. Use `border-interactive-secondary` instead."
|
|
286
|
+
},
|
|
287
|
+
"borderFocusErrorInner": {
|
|
288
|
+
"description": "⚠️ Deprecated. Focus now uses one style: `focus-keyboard`."
|
|
289
|
+
},
|
|
290
|
+
"borderFocusErrorMiddle": {
|
|
291
|
+
"description": "⚠️ Deprecated. Focus now uses one style: `focus-keyboard`."
|
|
292
|
+
},
|
|
293
|
+
"borderFocusErrorOuter": {
|
|
294
|
+
"description": "⚠️ Deprecated. Focus now uses one style: `focus-keyboard`."
|
|
295
|
+
},
|
|
296
|
+
"borderFocusInner": {
|
|
297
|
+
"description": "⚠️ Deprecated. Focus now uses one style: `focus-keyboard`."
|
|
298
|
+
},
|
|
299
|
+
"borderFocusMiddle": {
|
|
300
|
+
"description": "⚠️ Deprecated. Focus now uses one style: `focus-keyboard`."
|
|
301
|
+
},
|
|
302
|
+
"borderFocusOuter": {
|
|
303
|
+
"description": "⚠️ Deprecated. Focus now uses one style: `focus-keyboard`."
|
|
304
|
+
},
|
|
305
|
+
"borderFocusSuccessInner": {
|
|
306
|
+
"description": "⚠️ Deprecated. Focus now uses one style: `focus-keyboard`."
|
|
307
|
+
},
|
|
308
|
+
"borderFocusSuccessMiddle": {
|
|
309
|
+
"description": "⚠️ Deprecated. Focus now uses one style: `focus-keyboard`."
|
|
310
|
+
},
|
|
311
|
+
"borderFocusSuccessOuter": {
|
|
312
|
+
"description": "⚠️ Deprecated. Focus now uses one style: `focus-keyboard`."
|
|
313
|
+
},
|
|
314
|
+
"focusKeyboard": {
|
|
315
|
+
"description": "Apply to the outline-color property of interactive elements for keyboard navigation focus indicators within the application. Use when users navigate using keyboard and need clear visual feedback showing which element currently has focus."
|
|
316
|
+
},
|
|
317
|
+
"borderInteractiveDanger": {
|
|
318
|
+
"description": "The resting-state border for destructive interactive elements that are not Button components. Do not use on Button components; use `button-border-danger`. Do not use for form input error borders; use `input-border-error`."
|
|
319
|
+
},
|
|
320
|
+
"borderInteractiveDangerHover": {
|
|
321
|
+
"description": "The hover-state border for destructive interactive elements. Do not use on Button components; use `button-border-danger-hover`."
|
|
322
|
+
},
|
|
323
|
+
"borderInteractiveDangerPressed": {
|
|
324
|
+
"description": "The pressed/active-state border for destructive interactive elements. Do not use on Button components; use `button-border-danger-pressed`."
|
|
325
|
+
},
|
|
326
|
+
"borderInteractivePrimary": {
|
|
327
|
+
"description": "The resting-state border for primary interactive elements that are not Button components — high-emphasis controls with a visible edge. Do not use on Button components; use `button-border-primary` for those."
|
|
328
|
+
},
|
|
329
|
+
"borderInteractivePrimaryHover": {
|
|
330
|
+
"description": "The hover-state border for primary interactive elements. Do not use on Button components; use `button-border-primary-hover`. Do not apply to resting or pressed states."
|
|
331
|
+
},
|
|
332
|
+
"borderInteractivePrimaryPressed": {
|
|
333
|
+
"description": "The pressed/active-state border for primary interactive elements. Do not use on Button components; use `button-border-primary-pressed`. Do not use for hover or resting states."
|
|
334
|
+
},
|
|
335
|
+
"borderInteractiveSecondary": {
|
|
336
|
+
"description": "The resting-state border for secondary interactive elements that are not Button components — medium-emphasis controls with a visible stroke. Do not use on Button components; use `button-border-secondary` for those."
|
|
337
|
+
},
|
|
338
|
+
"borderInteractiveSecondaryHover": {
|
|
339
|
+
"description": "The hover-state border for secondary interactive elements. Do not use on Button components; use `button-border-secondary-hover`. Do not apply to resting or pressed states."
|
|
340
|
+
},
|
|
341
|
+
"borderInteractiveSecondaryPressed": {
|
|
342
|
+
"description": "The pressed/active-state border for secondary interactive elements. Do not use on Button components; use `button-border-secondary-pressed`."
|
|
343
|
+
},
|
|
344
|
+
"borderInteractiveSelected": {
|
|
345
|
+
"description": "Apply to the border-color property of elements for actions, links, and selected options when in selected state. Use when interactive element borders have been toggled on or chosen from a set of options."
|
|
346
|
+
},
|
|
347
|
+
"borderNeutrals": {
|
|
348
|
+
"description": "⚠️ Deprecated. Use `border-default` instead."
|
|
349
|
+
},
|
|
350
|
+
"borderNeutralsActive": {
|
|
351
|
+
"description": "⚠️ Deprecated. Use `border-interactive-secondary-pressed` instead."
|
|
352
|
+
},
|
|
353
|
+
"borderNeutralsControls": {
|
|
354
|
+
"description": "⚠️ Deprecated. Use `input-border-selection-control` instead."
|
|
355
|
+
},
|
|
356
|
+
"borderNeutralsControlsDisabled": {
|
|
357
|
+
"description": "⚠️ Deprecated. Use `border-disabled` instead."
|
|
358
|
+
},
|
|
359
|
+
"borderNeutralsDisabled": {
|
|
360
|
+
"description": "⚠️ Deprecated. Use `border-disabled` instead."
|
|
361
|
+
},
|
|
362
|
+
"borderNeutralsHover": {
|
|
363
|
+
"description": "⚠️ Deprecated. Use `border-interactive-secondary-hover` instead."
|
|
364
|
+
},
|
|
365
|
+
"borderNeutralsInverted": {
|
|
366
|
+
"description": "⚠️ Deprecated. Use `border-inverted` instead."
|
|
367
|
+
},
|
|
368
|
+
"borderNeutralsPressed": {
|
|
369
|
+
"description": "⚠️ Deprecated. Use `border-interactive-secondary-pressed` instead."
|
|
370
|
+
},
|
|
371
|
+
"borderNeutralsSubtle": {
|
|
372
|
+
"description": "⚠️ Deprecated. Use `border-subtle` instead."
|
|
373
|
+
},
|
|
374
|
+
"borderNeutralsSubtleHover": {
|
|
375
|
+
"description": "⚠️ Deprecated. Use `border-interactive-secondary-pressed` instead."
|
|
376
|
+
},
|
|
377
|
+
"borderNeutralsSubtlePressed": {
|
|
378
|
+
"description": "⚠️ Deprecated. Use `border-interactive-secondary-pressed` instead."
|
|
379
|
+
},
|
|
380
|
+
"borderNeutralsText": {
|
|
381
|
+
"description": "⚠️ Deprecated. Use `border-default` instead."
|
|
382
|
+
},
|
|
383
|
+
"borderNeutralsTextActive": {
|
|
384
|
+
"description": "⚠️ Deprecated. Use `border-default` instead."
|
|
385
|
+
},
|
|
386
|
+
"borderNeutralsTextHover": {
|
|
387
|
+
"description": "⚠️ Deprecated. Use `border-default` instead."
|
|
388
|
+
},
|
|
389
|
+
"borderNeutralsTextSubtle": {
|
|
390
|
+
"description": "⚠️ Deprecated. Use `border-default` instead."
|
|
391
|
+
},
|
|
392
|
+
"borderNeutralsTextSubtleActive": {
|
|
393
|
+
"description": "⚠️ Deprecated. Use `border-default` instead."
|
|
394
|
+
},
|
|
395
|
+
"borderNeutralsTextSubtleHover": {
|
|
396
|
+
"description": "⚠️ Deprecated. Use `border-default` instead."
|
|
397
|
+
},
|
|
398
|
+
"borderNeutralsTransparent": {
|
|
399
|
+
"description": "⚠️ Deprecated. Use `border-transparent` instead."
|
|
400
|
+
},
|
|
401
|
+
"borderPrimary": {
|
|
402
|
+
"description": "⚠️ Deprecated. Use `border-interactive-primary` instead."
|
|
403
|
+
},
|
|
404
|
+
"borderPrimaryActive": {
|
|
405
|
+
"description": "⚠️ Deprecated. Use `border-interactive-primary-pressed` instead."
|
|
406
|
+
},
|
|
407
|
+
"borderPrimaryHover": {
|
|
408
|
+
"description": "⚠️ Deprecated. Use `border-interactive-primary-hover` instead."
|
|
409
|
+
},
|
|
410
|
+
"borderPrimaryInverted": {
|
|
411
|
+
"description": "⚠️ Deprecated. Use `border-inverted` instead."
|
|
412
|
+
},
|
|
413
|
+
"borderPrimaryPressed": {
|
|
414
|
+
"description": "⚠️ Deprecated. Use `border-interactive-primary-pressed` instead."
|
|
415
|
+
},
|
|
416
|
+
"borderPrimarySelected": {
|
|
417
|
+
"description": "⚠️ Deprecated. Use `border-interactive-selected` instead."
|
|
418
|
+
},
|
|
419
|
+
"borderPrimarySubtle": {
|
|
420
|
+
"description": "⚠️ Deprecated. Use `border-interactive-secondary` instead."
|
|
421
|
+
},
|
|
422
|
+
"statusBorderError": {
|
|
423
|
+
"description": "The border color for error status containers — error banners, alert panels, and Callout components communicating failure. Use to delineate the edge of error-state UI elements. Do not use for form input error borders; use `input-border-error`. Do not confuse with danger interactive borders."
|
|
424
|
+
},
|
|
425
|
+
"statusBorderInfo": {
|
|
426
|
+
"description": "The border color for informational status containers — info banners, alert panels, and Callout components. Use to delineate the edge of info-state UI elements. Do not use on interactive components; use interactive border tokens. Do not use for other status types."
|
|
427
|
+
},
|
|
428
|
+
"statusBorderSuccess": {
|
|
429
|
+
"description": "The border color for success status containers — confirmation banners, positive outcome panels, and Callout components. Use to delineate the edge of success-state UI elements. Do not use for form input success borders; use `input-border-success`."
|
|
430
|
+
},
|
|
431
|
+
"statusBorderWarning": {
|
|
432
|
+
"description": "The border color for warning status containers — cautionary banners, alert panels, and Callout components. Use to delineate the edge of warning-state UI elements. Do not use for error or info status borders."
|
|
433
|
+
},
|
|
434
|
+
"borderSuccess": {
|
|
435
|
+
"description": "⚠️ Deprecated. Use `status-border-success` instead."
|
|
436
|
+
},
|
|
437
|
+
"borderSuccessActive": {
|
|
438
|
+
"description": "⚠️ Deprecated. Use `status-border-success` instead."
|
|
439
|
+
},
|
|
440
|
+
"borderSuccessHover": {
|
|
441
|
+
"description": "⚠️ Deprecated. Use `status-border-success` instead."
|
|
442
|
+
},
|
|
443
|
+
"borderSuccessPressed": {
|
|
444
|
+
"description": "⚠️ Deprecated. Use `status-border-success` instead."
|
|
445
|
+
},
|
|
446
|
+
"borderSuccessSubtle": {
|
|
447
|
+
"description": "⚠️ Deprecated. Use `border-interactive-secondary` instead."
|
|
448
|
+
},
|
|
449
|
+
"borderWarning": {
|
|
450
|
+
"description": "⚠️ Deprecated. Use `status-border-warning` instead."
|
|
451
|
+
},
|
|
452
|
+
"borderWarningSubtle": {
|
|
453
|
+
"description": "⚠️ Deprecated. Use `status-border-warning` instead."
|
|
454
|
+
},
|
|
455
|
+
"buttonBackgroundDanger": {
|
|
456
|
+
"description": "The resting-state background for danger Button components — delete, remove, or irreversible action buttons. Use exclusively within the Button component for destructive actions. Do not use for warning states; use `status-background-warning`. Do not use for non-button danger elements; use `background-interactive-danger` for those."
|
|
457
|
+
},
|
|
458
|
+
"buttonBackgroundDangerHover": {
|
|
459
|
+
"description": "The hover-state background for danger Button components. Use exclusively within danger buttons when a pointer is hovering. Do not use for resting or pressed danger states."
|
|
460
|
+
},
|
|
461
|
+
"buttonBackgroundDangerPressed": {
|
|
462
|
+
"description": "The pressed/active-state background for danger Button components. Use exclusively within danger buttons when being actively clicked. Do not use for hover or resting danger states."
|
|
463
|
+
},
|
|
464
|
+
"buttonBackgroundGhost": {
|
|
465
|
+
"description": "The transparent resting-state background for ghost Button components. Use exclusively within ghost Button components at rest. Pair with `button-background-ghost-hover` for hover and `button-background-ghost-pressed` for pressed states."
|
|
466
|
+
},
|
|
467
|
+
"buttonBackgroundGhostHover": {
|
|
468
|
+
"description": "The hover-state background for ghost Button components — buttons with no visible background at rest. Use when a transparent button reveals a subtle fill on hover. Do not use for tertiary buttons that have a resting background; use `button-background-tertiary-hover` for those."
|
|
469
|
+
},
|
|
470
|
+
"buttonBackgroundGhostPressed": {
|
|
471
|
+
"description": "The pressed/active-state background for ghost Button components. Use when a transparent button is being actively clicked. Do not use for tertiary buttons with a resting background."
|
|
472
|
+
},
|
|
473
|
+
"buttonBackgroundPrimary": {
|
|
474
|
+
"description": "The resting-state background for primary Button components — the highest-emphasis call-to-action button. Use exclusively within primary Button components at rest. Do not use for secondary, tertiary, or ghost buttons. Do not use for non-button interactive elements; use `background-interactive-primary` for those."
|
|
475
|
+
},
|
|
476
|
+
"buttonBackgroundPrimaryHover": {
|
|
477
|
+
"description": "The hover-state background for primary Button components. Use exclusively within primary buttons when a pointer is hovering. Do not use for resting or pressed states."
|
|
478
|
+
},
|
|
479
|
+
"buttonBackgroundPrimaryPressed": {
|
|
480
|
+
"description": "The pressed/active-state background for primary Button components. Use exclusively within primary buttons when being actively clicked. Do not use for hover or resting states."
|
|
481
|
+
},
|
|
482
|
+
"buttonBackgroundSecondary": {
|
|
483
|
+
"description": "The resting-state background for secondary Button components — medium-emphasis buttons typically paired with a border. Use exclusively within secondary Button components at rest. Do not use for primary, tertiary, or ghost buttons. Do not use for non-button interactive elements."
|
|
484
|
+
},
|
|
485
|
+
"buttonBackgroundSecondaryHover": {
|
|
486
|
+
"description": "The hover-state background for secondary Button components. Use exclusively within secondary buttons when a pointer is hovering. Do not use for resting or pressed states."
|
|
487
|
+
},
|
|
488
|
+
"buttonBackgroundSecondaryPressed": {
|
|
489
|
+
"description": "The pressed/active-state background for secondary Button components. Use exclusively within secondary buttons when being actively clicked. Do not use for hover or resting states."
|
|
490
|
+
},
|
|
491
|
+
"buttonBackgroundTertiary": {
|
|
492
|
+
"description": "The resting-state background for tertiary Button components — low-emphasis buttons that blend into the surface until interacted with. Use for icon buttons, toolbar actions, and supporting controls within the Button component. At rest this is often transparent. Do not use for primary or secondary buttons; do not use for non-button interactive elements."
|
|
493
|
+
},
|
|
494
|
+
"buttonBackgroundTertiaryHover": {
|
|
495
|
+
"description": "The hover-state background for tertiary Button components. Use within tertiary buttons when a pointer is hovering. Do not use for ghost buttons with no resting background; use `button-background-ghost-hover` instead."
|
|
496
|
+
},
|
|
497
|
+
"buttonBackgroundTertiaryPressed": {
|
|
498
|
+
"description": "The pressed/active-state background for tertiary Button components. Use when a tertiary button is being actively activated. Do not use for hover or resting states."
|
|
499
|
+
},
|
|
500
|
+
"buttonBorderDanger": {
|
|
501
|
+
"description": "The resting-state border for danger Button components. Use exclusively within danger Button components at rest. Do not use for form input error borders; use `input-border-error`. Do not use for non-button danger elements; use `border-interactive-danger`."
|
|
502
|
+
},
|
|
503
|
+
"buttonBorderDangerHover": {
|
|
504
|
+
"description": "The hover-state border for danger Button components. Use exclusively within danger buttons on hover."
|
|
505
|
+
},
|
|
506
|
+
"buttonBorderDangerPressed": {
|
|
507
|
+
"description": "The pressed/active-state border for danger Button components. Use exclusively within danger buttons when being activated."
|
|
508
|
+
},
|
|
509
|
+
"buttonBorderGhostHover": {
|
|
510
|
+
"description": "The hover-state border for ghost Button components — buttons with no visible border at rest. Use exclusively when a ghost button reveals a border on hover. Do not use for tertiary buttons that have a resting border; use `button-border-tertiary-hover` for those."
|
|
511
|
+
},
|
|
512
|
+
"buttonBorderGhostPressed": {
|
|
513
|
+
"description": "The pressed/active-state border for ghost Button components. Use exclusively within ghost buttons when being activated."
|
|
514
|
+
},
|
|
515
|
+
"buttonBorderPrimary": {
|
|
516
|
+
"description": "The resting-state border for primary Button components. Use exclusively within primary Button components at rest. Do not use for non-button interactive elements; use `border-interactive-primary` for those."
|
|
517
|
+
},
|
|
518
|
+
"buttonBorderPrimaryHover": {
|
|
519
|
+
"description": "The hover-state border for primary Button components. Use exclusively within primary buttons on hover. Do not use for resting or pressed states."
|
|
520
|
+
},
|
|
521
|
+
"buttonBorderPrimaryPressed": {
|
|
522
|
+
"description": "The pressed/active-state border for primary Button components. Use exclusively within primary buttons when being activated. Do not use for hover or resting states."
|
|
523
|
+
},
|
|
524
|
+
"buttonBorderSecondary": {
|
|
525
|
+
"description": "The resting-state border for secondary Button components. Use exclusively within secondary Button components at rest. Do not use for non-button interactive elements; use `border-interactive-secondary` for those."
|
|
526
|
+
},
|
|
527
|
+
"buttonBorderSecondaryHover": {
|
|
528
|
+
"description": "The hover-state border for secondary Button components. Use exclusively within secondary buttons on hover. Do not use for resting or pressed states."
|
|
529
|
+
},
|
|
530
|
+
"buttonBorderSecondaryPressed": {
|
|
531
|
+
"description": "The pressed/active-state border for secondary Button components. Use exclusively within secondary buttons when being activated. Do not use for hover or resting states."
|
|
532
|
+
},
|
|
533
|
+
"buttonBorderTertiary": {
|
|
534
|
+
"description": "The resting-state border for tertiary Button components with a visible edge at rest. Use exclusively within tertiary buttons that display a border. Do not use for ghost buttons; use `button-border-ghost-hover` for those."
|
|
535
|
+
},
|
|
536
|
+
"buttonBorderTertiaryHover": {
|
|
537
|
+
"description": "The hover-state border for tertiary Button components. Use exclusively within tertiary buttons on hover. Do not use for ghost buttons."
|
|
538
|
+
},
|
|
539
|
+
"buttonBorderTertiaryPressed": {
|
|
540
|
+
"description": "The pressed/active-state border for tertiary Button components. Use exclusively within tertiary buttons when being activated."
|
|
541
|
+
},
|
|
542
|
+
"buttonIconOnDanger": {
|
|
543
|
+
"description": "The icon color for icons inside danger Button components. Use exclusively within danger buttons to ensure icon legibility over `button-background-danger` and its states. Do not use on non-button danger elements; use `icon-on-interactive-danger` for those."
|
|
544
|
+
},
|
|
545
|
+
"buttonIconOnPrimary": {
|
|
546
|
+
"description": "The icon color for icons inside primary Button components. Use exclusively within primary buttons to ensure icon legibility over `button-background-primary` and its states. Do not use on non-button interactive elements; use `icon-on-interactive-primary` for those."
|
|
547
|
+
},
|
|
548
|
+
"buttonIconOnSecondary": {
|
|
549
|
+
"description": "The icon color for icons inside secondary Button components. Use exclusively within secondary buttons. Do not use on non-button interactive elements; use `icon-on-interactive-secondary` for those."
|
|
550
|
+
},
|
|
551
|
+
"buttonIconOnTertiary": {
|
|
552
|
+
"description": "The icon color for icons inside tertiary and ghost Button components. Use exclusively within tertiary and ghost buttons. Do not use for primary or secondary button icons; use `button-icon-on-primary` or `button-icon-on-secondary` for those."
|
|
553
|
+
},
|
|
554
|
+
"buttonTextOnDanger": {
|
|
555
|
+
"description": "The text color for labels on danger Button components. Use exclusively for button label text over `button-background-danger` and its states. Do not use on non-button danger elements; use `text-on-interactive-danger` for those."
|
|
556
|
+
},
|
|
557
|
+
"buttonTextOnPrimary": {
|
|
558
|
+
"description": "The text color for labels on primary Button components. Use exclusively for button label text over `button-background-primary` and its states. Do not use on non-button interactive elements; use `text-on-interactive-primary` for those."
|
|
559
|
+
},
|
|
560
|
+
"buttonTextOnSecondary": {
|
|
561
|
+
"description": "The text color for labels on secondary Button components. Use exclusively for button label text over secondary button surfaces. Do not use on non-button interactive elements; use `text-on-interactive-secondary` for those."
|
|
562
|
+
},
|
|
563
|
+
"buttonTextOnTertiary": {
|
|
564
|
+
"description": "The text color for labels on tertiary and ghost Button components. Use exclusively for button label text over `button-background-tertiary` or ghost button surfaces. Do not use for primary or secondary button labels; use `button-text-on-primary` or `button-text-on-secondary` for those."
|
|
565
|
+
},
|
|
566
|
+
"chipBackground": {
|
|
567
|
+
"description": "The resting-state background for Chip components. Use exclusively within Chip components at rest. Do not use for buttons or badges; each has its own background token."
|
|
568
|
+
},
|
|
569
|
+
"chipBackgroundHover": {
|
|
570
|
+
"description": "The hover-state background for Chip components. Use exclusively within Chip components when a pointer is hovering. Do not use for resting state; use `chip-background` for that."
|
|
571
|
+
},
|
|
572
|
+
"chipText": {
|
|
573
|
+
"description": "The text color for labels inside Chip components. Use exclusively within Chip components. Do not use for buttons or badges; each has its own text token."
|
|
574
|
+
},
|
|
575
|
+
"formatIconDiagram": {
|
|
576
|
+
"description": "Icon color exclusively for the `icon-diagramming` icon. Use to visually distinguish diagram and flowchart-type content items. Do not use for any other format icon."
|
|
577
|
+
},
|
|
578
|
+
"formatIconDocs": {
|
|
579
|
+
"description": "Icon color exclusively for the `icon-doc-format` icon. Use to visually distinguish document-type content items in file pickers, navigation trees, and content lists. Do not use for any other format icon."
|
|
580
|
+
},
|
|
581
|
+
"formatIconExternal": {
|
|
582
|
+
"description": "Icon color exclusively for the `icon-external-format` icon. Use to visually distinguish externally-hosted content items that link outside the application. Do not use for any other format icon."
|
|
583
|
+
},
|
|
584
|
+
"formatIconKanban": {
|
|
585
|
+
"description": "Icon color exclusively for the `icon-kanban` icon. Use to visually distinguish kanban board-type content items. Do not use for any other format icon."
|
|
586
|
+
},
|
|
587
|
+
"formatIconPrototype": {
|
|
588
|
+
"description": "Icon color exclusively for the `icon-prototype-format` icon. Use to visually distinguish interactive prototype content items. Do not use for any other format icon."
|
|
589
|
+
},
|
|
590
|
+
"formatIconSlides": {
|
|
591
|
+
"description": "Icon color exclusively for the `icon-slide-format` icon. Use to visually distinguish presentation and slides-type content items. Do not use for any other format icon."
|
|
592
|
+
},
|
|
593
|
+
"formatIconTable": {
|
|
594
|
+
"description": "Icon color exclusively for the `icon-table-format` icon. Use to visually distinguish table and spreadsheet-type content items. Do not use for any other format icon."
|
|
595
|
+
},
|
|
596
|
+
"formatIconTimeline": {
|
|
597
|
+
"description": "Icon color exclusively for the `icon-timeline-format` icon. Use to visually distinguish timeline and Gantt-type content items. Do not use for any other format icon."
|
|
598
|
+
},
|
|
599
|
+
"inputBackgroundActive": {
|
|
600
|
+
"description": "The component-specific focused/active-state background for input fields. Use within Input, Textarea, and Select components when the field is focused and receiving input. Do not confuse with hover state; active implies keyboard focus or active editing."
|
|
601
|
+
},
|
|
602
|
+
"inputBackgroundAltActive": {
|
|
603
|
+
"description": "The component-specific focused/active-state background for alternative-style input fields. Use within alt-variant inputs when focused. Do not use for standard input focus state."
|
|
604
|
+
},
|
|
605
|
+
"inputBackgroundAltDefault": {
|
|
606
|
+
"description": "The component-specific default resting-state background for alternative-style input fields — a secondary visual variant of the input. Use when an input requires a distinct surface style from the standard variant (e.g., inline editing, minimal inputs). Do not use as the default input background; use `input-background-default`."
|
|
607
|
+
},
|
|
608
|
+
"inputBackgroundAltHover": {
|
|
609
|
+
"description": "The component-specific hover-state background for alternative-style input fields. Use within alt-variant inputs on hover. Do not use for standard input hover; use `input-background-hover`."
|
|
610
|
+
},
|
|
611
|
+
"inputBackgroundDefault": {
|
|
612
|
+
"description": "The component-specific default resting-state background for input and form field components. Use exclusively within Input, Textarea, and Select components at rest. Do not use for non-input surfaces; use semantic background tokens for those."
|
|
613
|
+
},
|
|
614
|
+
"inputBackgroundDisabled": {
|
|
615
|
+
"description": "The component-specific background for disabled input fields. Use within Input, Textarea, and Select components when the field is not interactive. Do not use for read-only inputs that are still selectable; this is for fully disabled states only."
|
|
616
|
+
},
|
|
617
|
+
"inputBackgroundHover": {
|
|
618
|
+
"description": "The component-specific hover-state background for input fields. Use within Input, Textarea, and Select components when a cursor is hovering over an unfocused field. Do not apply to focused or disabled states."
|
|
619
|
+
},
|
|
620
|
+
"inputBorderActive": {
|
|
621
|
+
"description": "The component-specific focused/active-state border for input fields. Use within Input, Textarea, and Select components when the field is focused. Do not confuse with hover state. Do not use when the field is in an error or success validation state; use those specific tokens instead."
|
|
622
|
+
},
|
|
623
|
+
"inputBorderDefault": {
|
|
624
|
+
"description": "The component-specific default resting-state border for input fields. Use within Input, Textarea, and Select components at rest. Do not use for hover, focused, error, or success states — each has its own border token."
|
|
625
|
+
},
|
|
626
|
+
"inputBorderDisabled": {
|
|
627
|
+
"description": "The component-specific border for disabled input fields. Use within Input, Textarea, and Select components in a disabled state. Always pair with `input-background-disabled`."
|
|
628
|
+
},
|
|
629
|
+
"inputBorderError": {
|
|
630
|
+
"description": "The component-specific border for input fields in a validation error state. Use within Input, Textarea, and Select components when the submitted or entered value fails validation. Do not use for general error status containers; use `status-border-error` for those. Always accompany with an error message using `status-text-error`."
|
|
631
|
+
},
|
|
632
|
+
"inputBorderHover": {
|
|
633
|
+
"description": "The component-specific hover-state border for input fields. Use within Input, Textarea, and Select components when a cursor hovers over an unfocused field. Do not apply to focused or default states."
|
|
634
|
+
},
|
|
635
|
+
"inputBorderSelectionControl": {
|
|
636
|
+
"description": "The border color for selection control elements — checkboxes and radio inputs — at their default resting state. Use exclusively within Checkbox and Radio components. Do not use for text input borders; use `input-border-default` for those."
|
|
637
|
+
},
|
|
638
|
+
"inputBorderSuccess": {
|
|
639
|
+
"description": "The component-specific border for input fields in a validation success state. Use within Input, Textarea, and Select components when the entered value passes validation. Do not use for general success containers; use `status-border-success` for those."
|
|
640
|
+
},
|
|
641
|
+
"notificationBackground": {
|
|
642
|
+
"description": "The component-specific background for in-app notification and toast components. Use within Notification and Toast components as the default surface fill. Do not use for status banners or alert panels; those use semantic status background tokens."
|
|
643
|
+
},
|
|
644
|
+
"notificationBorder": {
|
|
645
|
+
"description": "The component-specific border color for notification and toast components. Use within Notification and Toast components to define the visible container edge. Do not use for status banners; use `status-border-info`, `status-border-error`, `status-border-warning`, or `status-border-success` for those."
|
|
646
|
+
},
|
|
647
|
+
"notificationBorderSubtle": {
|
|
648
|
+
"description": "The component-specific subtle border for notification and toast components — a softer edge option for notifications that need reduced visual weight. Use when the standard notification border is too prominent. Do not use as the default notification border; use `notification-border` for that."
|
|
649
|
+
},
|
|
650
|
+
"popoverBackground": {
|
|
651
|
+
"description": "The background color for the Popover component. Use exclusively within the Popover component. Do not use for any other floating surface; use `tooltip-background` for tooltips, `background-elevated` for dialogs."
|
|
652
|
+
},
|
|
653
|
+
"popoverBorder": {
|
|
654
|
+
"description": "Border for the Popover component. Use to define the visible edge of Popover surfaces. Do not use for Tooltip borders; tooltips do not use a border token. Do not use for modal or dialog borders; those are separate surface types."
|
|
655
|
+
},
|
|
656
|
+
"scrollbarBackground": {
|
|
657
|
+
"description": "The background color for scrollbar tracks and inactive scrollbar components. Use exclusively within scrollbar elements. Do not use for any other background surface; use semantic background tokens for those."
|
|
658
|
+
},
|
|
659
|
+
"scrollbarBackgroundHover": {
|
|
660
|
+
"description": "The hover-state background for the scrollbar thumb. Use within scrollbar components when a cursor is hovering over the thumb. Do not use for the resting scrollbar track; use `scrollbar-background` for that."
|
|
661
|
+
},
|
|
662
|
+
"sliderBackground": {
|
|
663
|
+
"description": "The background for the Slider track — the rail along which the thumb travels. Use exclusively within the Slider component track element. Do not use for the notch markers; use `slider-notch-background` for those."
|
|
664
|
+
},
|
|
665
|
+
"sliderNotchBackground": {
|
|
666
|
+
"description": "The background for step notch markers along the Slider track. Use exclusively for the discrete step indicators within the Slider component. Do not use for the main track; use `slider-background` for that."
|
|
667
|
+
},
|
|
668
|
+
"switchBackgroundDefault": {
|
|
669
|
+
"description": "The resting-state background for the Switch component track. Use exclusively within the Switch component at rest. Do not use for hover state; use `switch-background-hover`. Do not use for the thumb element; use `switch-control-background`."
|
|
670
|
+
},
|
|
671
|
+
"switchBackgroundHover": {
|
|
672
|
+
"description": "The hover-state background for the Switch component track. Use within the Switch component when a cursor is hovering over it. Do not use for the resting state; use `switch-background-default`."
|
|
673
|
+
},
|
|
674
|
+
"switchControlBackground": {
|
|
675
|
+
"description": "The background for the Switch thumb — the circular element that slides within the track. Use exclusively for the thumb element of the Switch component. Do not use for the track; use `switch-background-default` for the track at rest, or `switch-background-hover` for the track on hover."
|
|
676
|
+
},
|
|
677
|
+
"tooltipBackground": {
|
|
678
|
+
"description": "The component-specific background color for tooltip components. Use within the Tooltip component to surface contextual hints and label text. Do not use for Popover surfaces; use `popover-background` for those. Do not use for dropdowns or other floating surfaces."
|
|
679
|
+
},
|
|
680
|
+
"tooltipBackgroundInset": {
|
|
681
|
+
"description": "Background for UI elements nested inside a Tooltip container — such as hotkey badges and inline labels. Do not use as the tooltip surface itself; use `tooltip-background` for that."
|
|
682
|
+
},
|
|
683
|
+
"iconDanger": {
|
|
684
|
+
"description": "⚠️ Deprecated. Use `status-icon-error` instead."
|
|
685
|
+
},
|
|
686
|
+
"iconDangerActive": {
|
|
687
|
+
"description": "⚠️ Deprecated. Use `status-icon-error` instead."
|
|
688
|
+
},
|
|
689
|
+
"iconDangerHover": {
|
|
690
|
+
"description": "⚠️ Deprecated. Use `status-icon-error` instead."
|
|
691
|
+
},
|
|
692
|
+
"iconDangerInverted": {
|
|
693
|
+
"description": "⚠️ Deprecated. Use `icon-inverted` instead."
|
|
694
|
+
},
|
|
695
|
+
"iconDangerPressed": {
|
|
696
|
+
"description": "⚠️ Deprecated. Use `status-icon-error` instead."
|
|
697
|
+
},
|
|
698
|
+
"iconDefault": {
|
|
699
|
+
"description": "The primary default icon color for the application. Use as the baseline fill for standard icons on default backgrounds. Do not use for secondary, muted, disabled, or interactive icons — each has its own token. Do not use on inverted or dark surfaces; use `icon-inverted`."
|
|
700
|
+
},
|
|
701
|
+
"iconDisabled": {
|
|
702
|
+
"description": "The icon color for icons belonging to disabled, non-interactive elements. Use when an icon is part of a component that cannot be interacted with. Do not use for icons that are merely de-emphasized; use `icon-muted` or `icon-secondary`."
|
|
703
|
+
},
|
|
704
|
+
"iconInverted": {
|
|
705
|
+
"description": "The primary icon color for use on dark or inverted backgrounds. Use when standard icon colors lack sufficient contrast against an inverted surface. Do not use on standard light backgrounds; use `icon-default`. Do not use for secondary icons on inverted surfaces; use `icon-inverted-secondary`."
|
|
706
|
+
},
|
|
707
|
+
"iconInvertedSecondary": {
|
|
708
|
+
"description": "A secondary icon color for supporting icons on dark or inverted backgrounds. Use for supplemental or lower-emphasis icons on inverted surfaces. Do not use as the primary icon on inverted surfaces; use `icon-inverted`."
|
|
709
|
+
},
|
|
710
|
+
"iconMuted": {
|
|
711
|
+
"description": "A low-emphasis icon color for decorative, tertiary, or background icons. Use when an icon needs to be visually present but clearly subordinate to primary and secondary icons. Do not use for interactive or actionable icons. Do not use for placeholder icons; use `icon-placeholder`."
|
|
712
|
+
},
|
|
713
|
+
"iconOnDisabled": {
|
|
714
|
+
"description": "The icon color for icons rendered on top of a disabled background fill (`background-disabled`). Use to maintain icon visibility within disabled component surfaces. Do not use for icons in enabled states. Always pair with `background-disabled`."
|
|
715
|
+
},
|
|
716
|
+
"iconOnStaticDark": {
|
|
717
|
+
"description": "The primary icon color for always-dark static surfaces — icons on backgrounds that remain dark in both themes. Use for primary icons on static-dark components like code blocks or dark toolbars. Do not use on theme-responsive inverted surfaces; use `icon-inverted` for those."
|
|
718
|
+
},
|
|
719
|
+
"iconOnStaticDarkSubtle": {
|
|
720
|
+
"description": "A secondary icon color for always-dark static surfaces. Use for supporting or lower-emphasis icons on components with a static dark background. Do not use as the primary icon on static-dark surfaces; use `icon-on-static-dark`."
|
|
721
|
+
},
|
|
722
|
+
"iconPlaceholder": {
|
|
723
|
+
"description": "The icon color for placeholder icons inside empty states, unset fields, or unfilled UI slots. Use for icons that indicate where content or user input is expected. Do not use for active, filled, or interactive icons."
|
|
724
|
+
},
|
|
725
|
+
"iconSecondary": {
|
|
726
|
+
"description": "A reduced-emphasis icon color for supplementary or supporting icons that accompany primary content. Use for icons that provide context but should not draw primary visual attention. Do not use as the default icon color; use `icon-default`. Do not use for disabled, placeholder, or interactive icons."
|
|
727
|
+
},
|
|
728
|
+
"iconInteractiveSelected": {
|
|
729
|
+
"description": "The icon color for icons belonging to an element in a selected or toggled-on state — such as active nav items, selected toolbar buttons, or toggled controls. Use when the parent element is in a persistent selected state (not transient hover or press). Pairs with `background-interactive-selected`. Do not use for hover or pressed states; each has its own token."
|
|
730
|
+
},
|
|
731
|
+
"iconLink": {
|
|
732
|
+
"description": "The default resting-state color for icons paired with text links or anchor elements. Use for icons that visually support or accompany inline link text. Do not use for icons on buttons; use `icon-on-interactive-primary`, `icon-on-interactive-secondary`, or `button-icon-on-tertiary`. Do not use for icons on inverted surfaces; use `icon-link-on-inverted`."
|
|
733
|
+
},
|
|
734
|
+
"iconLinkHover": {
|
|
735
|
+
"description": "The hover-state color for icons paired with text links. Use when the parent link element is in a hover state. Do not apply to resting or pressed icon states."
|
|
736
|
+
},
|
|
737
|
+
"iconLinkOnInverted": {
|
|
738
|
+
"description": "The default resting-state color for icons paired with text links on dark or inverted backgrounds. Use for link icons that need contrast against inverted surfaces. Do not use on standard light backgrounds."
|
|
739
|
+
},
|
|
740
|
+
"iconLinkOnInvertedHover": {
|
|
741
|
+
"description": "The hover-state color for icons paired with links on inverted backgrounds. Use when a link on an inverted surface is in a hover state."
|
|
742
|
+
},
|
|
743
|
+
"iconLinkOnInvertedPressed": {
|
|
744
|
+
"description": "The pressed/active-state color for icons paired with links on inverted backgrounds. Use when a link on an inverted surface is being actively activated."
|
|
745
|
+
},
|
|
746
|
+
"iconLinkOnInvertedSecondary": {
|
|
747
|
+
"description": "The default resting-state color for secondary-priority icons paired with text links on dark or inverted backgrounds. Use for lower-emphasis link icons on inverted surfaces where the icon should be present but not compete with the primary link. Do not use for primary link icons on inverted surfaces; use `icon-link-on-inverted`. Do not use on standard light backgrounds; use `icon-link-secondary`."
|
|
748
|
+
},
|
|
749
|
+
"iconLinkOnInvertedSecondaryHover": {
|
|
750
|
+
"description": "The hover-state color for secondary-priority icons paired with links on dark or inverted backgrounds. Use exclusively when hovering over a secondary link on an inverted surface."
|
|
751
|
+
},
|
|
752
|
+
"iconLinkOnInvertedSecondaryPressed": {
|
|
753
|
+
"description": "The pressed/active-state color for secondary-priority icons paired with links on dark or inverted backgrounds. Use when a secondary link on an inverted surface is being actively activated."
|
|
754
|
+
},
|
|
755
|
+
"iconLinkPressed": {
|
|
756
|
+
"description": "The pressed/active-state color for icons paired with text links. Use when the parent link is being actively activated. Do not use for hover or resting states."
|
|
757
|
+
},
|
|
758
|
+
"iconLinkSecondary": {
|
|
759
|
+
"description": "Icon color for icons paired with secondary-priority links — lower-emphasis links that share the same color as secondary text. Use when the parent link is less prominent than the primary link on a surface. Do not use for icons on primary links; use `icon-link`."
|
|
760
|
+
},
|
|
761
|
+
"iconLinkSecondaryHover": {
|
|
762
|
+
"description": "The hover-state color for icons paired with secondary-priority links. Use when the parent secondary link is in a hover state."
|
|
763
|
+
},
|
|
764
|
+
"iconLinkSecondaryPressed": {
|
|
765
|
+
"description": "The pressed/active-state color for icons paired with secondary-priority links. Use when the parent secondary link is being actively activated."
|
|
766
|
+
},
|
|
767
|
+
"iconOnInteractiveDanger": {
|
|
768
|
+
"description": "The icon color for icons inside destructive interactive elements that are not Button components. Do not use on Button components; use `button-icon-on-danger` for those. Do not use for standalone danger icons; use `status-icon-error`."
|
|
769
|
+
},
|
|
770
|
+
"iconOnInteractivePrimary": {
|
|
771
|
+
"description": "The icon color for icons inside primary interactive elements that are not Button components. Do not use on Button components; use `button-icon-on-primary` for those."
|
|
772
|
+
},
|
|
773
|
+
"iconOnInteractiveSecondary": {
|
|
774
|
+
"description": "The icon color for icons inside secondary interactive elements that are not Button components. Do not use on Button components; use `button-icon-on-secondary` for those."
|
|
775
|
+
},
|
|
776
|
+
"iconOnInteractiveSelected": {
|
|
777
|
+
"description": "The icon color for icons placed on top of a selected interactive element's background fill (`background-interactive-selected`). Use to ensure icon legibility over the selected-state surface. Do not use for icons in resting, hover, or pressed states — use `icon-on-interactive-primary`, `icon-on-interactive-secondary`, or `button-icon-on-tertiary` for those."
|
|
778
|
+
},
|
|
779
|
+
"iconNeutrals": {
|
|
780
|
+
"description": "⚠️ Deprecated. Use `icon-default` instead."
|
|
781
|
+
},
|
|
782
|
+
"iconNeutralsDisabled": {
|
|
783
|
+
"description": "⚠️ Deprecated. Use `icon-disabled` instead."
|
|
784
|
+
},
|
|
785
|
+
"iconNeutralsHover": {
|
|
786
|
+
"description": "⚠️ Deprecated. Use `icon-default` instead."
|
|
787
|
+
},
|
|
788
|
+
"iconNeutralsInactive": {
|
|
789
|
+
"description": "⚠️ Deprecated. Use `icon-disabled` instead."
|
|
790
|
+
},
|
|
791
|
+
"iconNeutralsInactiveHover": {
|
|
792
|
+
"description": "⚠️ Deprecated. Use `icon-disabled` instead."
|
|
793
|
+
},
|
|
794
|
+
"iconNeutralsInverted": {
|
|
795
|
+
"description": "⚠️ Deprecated. Use `icon-inverted` instead."
|
|
796
|
+
},
|
|
797
|
+
"iconNeutralsInvertedHover": {
|
|
798
|
+
"description": "⚠️ Deprecated. Use `icon-link-on-inverted-hover` instead."
|
|
799
|
+
},
|
|
800
|
+
"iconNeutralsInvertedSubtle": {
|
|
801
|
+
"description": "⚠️ Deprecated. Use `icon-inverted-secondary` instead."
|
|
802
|
+
},
|
|
803
|
+
"iconNeutralsInvertedSubtleHover": {
|
|
804
|
+
"description": "⚠️ Deprecated. Use `icon-link-on-inverted-secondary-hover` instead."
|
|
805
|
+
},
|
|
806
|
+
"iconNeutralsPlaceholder": {
|
|
807
|
+
"description": "⚠️ Deprecated. Use `icon-placeholder` instead."
|
|
808
|
+
},
|
|
809
|
+
"iconNeutralsPressed": {
|
|
810
|
+
"description": "⚠️ Deprecated. Use `icon-default` instead."
|
|
811
|
+
},
|
|
812
|
+
"iconNeutralsSearch": {
|
|
813
|
+
"description": "⚠️ Deprecated. Use `icon-default` instead."
|
|
814
|
+
},
|
|
815
|
+
"iconNeutralsSubtle": {
|
|
816
|
+
"description": "⚠️ Deprecated. Use `icon-secondary` instead."
|
|
817
|
+
},
|
|
818
|
+
"iconNeutralsSubtleHover": {
|
|
819
|
+
"description": "⚠️ Deprecated. Use `icon-link-secondary-hover` instead."
|
|
820
|
+
},
|
|
821
|
+
"iconNeutralsSubtlePressed": {
|
|
822
|
+
"description": "⚠️ Deprecated. Use `icon-link-secondary-pressed` instead."
|
|
823
|
+
},
|
|
824
|
+
"iconNeutralsText": {
|
|
825
|
+
"description": "⚠️ Deprecated. Use `icon-default` instead."
|
|
826
|
+
},
|
|
827
|
+
"iconPrimary": {
|
|
828
|
+
"description": "⚠️ Deprecated. Use `icon-link` instead."
|
|
829
|
+
},
|
|
830
|
+
"iconPrimaryActive": {
|
|
831
|
+
"description": "⚠️ Deprecated. Use `icon-link-pressed` instead."
|
|
832
|
+
},
|
|
833
|
+
"iconPrimaryHover": {
|
|
834
|
+
"description": "⚠️ Deprecated. Use `icon-link-hover` instead."
|
|
835
|
+
},
|
|
836
|
+
"iconPrimaryInverted": {
|
|
837
|
+
"description": "⚠️ Deprecated. Use `icon-link-on-inverted` instead."
|
|
838
|
+
},
|
|
839
|
+
"iconPrimaryInvertedHover": {
|
|
840
|
+
"description": "⚠️ Deprecated. Use `icon-link-on-inverted-hover` instead."
|
|
841
|
+
},
|
|
842
|
+
"iconPrimaryPressed": {
|
|
843
|
+
"description": "⚠️ Deprecated. Use `icon-link-pressed` instead."
|
|
844
|
+
},
|
|
845
|
+
"iconPrimarySelected": {
|
|
846
|
+
"description": "⚠️ Deprecated. Use `icon-interactive-selected` instead."
|
|
847
|
+
},
|
|
848
|
+
"statusIconError": {
|
|
849
|
+
"description": "Icon color for standalone error icons on standard (non-status) backgrounds — form validation icons, inline error indicators. Use when an icon alone communicates an error state. Do not use for icons on error status backgrounds; use `status-icon-on-error`."
|
|
850
|
+
},
|
|
851
|
+
"statusIconOnError": {
|
|
852
|
+
"description": "Icon color for icons on top of an error status background. Use inside error banners, destructive alert panels, and error state containers. Do not use on standard backgrounds; use `status-icon-error` for that."
|
|
853
|
+
},
|
|
854
|
+
"statusIconOnInfo": {
|
|
855
|
+
"description": "Icon color for icons displayed on top of an info status background. Use for icons inside informational banners or alert panels. Do not use on standard backgrounds; use a semantic icon color instead. Always pair with `status-background-info`."
|
|
856
|
+
},
|
|
857
|
+
"statusIconOnSuccess": {
|
|
858
|
+
"description": "Icon color for icons on top of a success status background. Use inside success banners and positive confirmation panels. Do not use on standard backgrounds; use `status-icon-success` for that."
|
|
859
|
+
},
|
|
860
|
+
"statusIconOnWarning": {
|
|
861
|
+
"description": "Icon color for icons on top of a warning status background. Use inside warning banners and cautionary alert panels. Do not use on standard backgrounds; use `status-icon-warning` for that."
|
|
862
|
+
},
|
|
863
|
+
"statusIconSuccess": {
|
|
864
|
+
"description": "Icon color for standalone success icons on standard (non-status) backgrounds — confirmation checkmarks, inline success indicators. Use when an icon alone communicates a positive or completed state. Do not use for icons on success status backgrounds; use `status-icon-on-success`."
|
|
865
|
+
},
|
|
866
|
+
"statusIconWarning": {
|
|
867
|
+
"description": "Icon color for standalone warning icons on standard (non-status) backgrounds — cautionary alerts and inline warning indicators. Use when an icon alone communicates a warning. Do not use on warning status backgrounds; use `status-icon-on-warning`."
|
|
868
|
+
},
|
|
869
|
+
"iconSuccess": {
|
|
870
|
+
"description": "⚠️ Deprecated. Use `status-icon-success` instead."
|
|
871
|
+
},
|
|
872
|
+
"iconSuccessActive": {
|
|
873
|
+
"description": "⚠️ Deprecated. Use `status-icon-success` instead."
|
|
874
|
+
},
|
|
875
|
+
"iconSuccessHover": {
|
|
876
|
+
"description": "⚠️ Deprecated. Use `status-icon-success` instead."
|
|
877
|
+
},
|
|
878
|
+
"iconSuccessInverted": {
|
|
879
|
+
"description": "⚠️ Deprecated. Use `icon-inverted` instead."
|
|
880
|
+
},
|
|
881
|
+
"iconSuccessPressed": {
|
|
882
|
+
"description": "⚠️ Deprecated. Use `status-icon-success` instead."
|
|
883
|
+
},
|
|
884
|
+
"iconWarning": {
|
|
885
|
+
"description": "⚠️ Deprecated. Use `status-icon-warning` instead."
|
|
886
|
+
},
|
|
887
|
+
"iconWarningProminent": {
|
|
888
|
+
"description": "⚠️ Deprecated. Use `status-icon-warning` instead."
|
|
889
|
+
},
|
|
890
|
+
"iconWarningSubtle": {
|
|
891
|
+
"description": "⚠️ Deprecated. Use `status-icon-warning` instead."
|
|
892
|
+
},
|
|
893
|
+
"textDanger": {
|
|
894
|
+
"description": "⚠️ Deprecated. Use `status-text-error` instead."
|
|
895
|
+
},
|
|
896
|
+
"textDangerActive": {
|
|
897
|
+
"description": "⚠️ Deprecated. Use `status-text-error` instead."
|
|
898
|
+
},
|
|
899
|
+
"textDangerHover": {
|
|
900
|
+
"description": "⚠️ Deprecated. Use `status-text-error` instead."
|
|
901
|
+
},
|
|
902
|
+
"textDangerInverted": {
|
|
903
|
+
"description": "⚠️ Deprecated. Use `text-inverted` instead."
|
|
904
|
+
},
|
|
905
|
+
"textDangerPressed": {
|
|
906
|
+
"description": "⚠️ Deprecated. Use `status-text-error` instead."
|
|
907
|
+
},
|
|
908
|
+
"textInteractiveSelected": {
|
|
909
|
+
"description": "The text color for a selected or active element — the text belonging to a nav item, tab, or option that is currently chosen. Use when the element itself is in a selected state. Do not use for text placed on top of a selected background fill; use `text-on-interactive-selected` for that."
|
|
910
|
+
},
|
|
911
|
+
"textLink": {
|
|
912
|
+
"description": "The default resting-state color for inline text links and anchor elements. Use for hyperlinks embedded within prose, navigation items, and any clickable text on a standard background. Do not use for buttons; use interactive background tokens. Do not use for links on inverted surfaces; use `text-link-on-inverted`."
|
|
913
|
+
},
|
|
914
|
+
"textLinkHover": {
|
|
915
|
+
"description": "The hover-state color for inline text links. Use exclusively when a cursor is hovering over a link. Do not apply to resting or pressed states. Do not apply manually; drive from hover interaction state."
|
|
916
|
+
},
|
|
917
|
+
"textLinkOnInverted": {
|
|
918
|
+
"description": "The default resting-state color for text links displayed on dark or inverted backgrounds. Use for links that must remain legible and visually identifiable on inverted surfaces. Do not use on standard light backgrounds; use `text-link` instead."
|
|
919
|
+
},
|
|
920
|
+
"textLinkOnInvertedHover": {
|
|
921
|
+
"description": "The hover-state color for text links on inverted backgrounds. Use exclusively when hovering over a link displayed on a dark or inverted surface."
|
|
922
|
+
},
|
|
923
|
+
"textLinkOnInvertedPressed": {
|
|
924
|
+
"description": "The pressed/active-state color for text links on inverted backgrounds. Use when a link on a dark or inverted surface is being actively activated."
|
|
925
|
+
},
|
|
926
|
+
"textLinkOnInvertedSecondary": {
|
|
927
|
+
"description": "The default resting-state color for secondary-priority text links on dark or inverted backgrounds. Use for lower-emphasis links on inverted surfaces where the link should be present but not compete with the primary link. Do not use for primary links on inverted surfaces; use `text-link-on-inverted`. Do not use on standard light backgrounds; use `text-link-secondary`."
|
|
928
|
+
},
|
|
929
|
+
"textLinkOnInvertedSecondaryHover": {
|
|
930
|
+
"description": "The hover-state color for secondary-priority text links on dark or inverted backgrounds. Use exclusively when hovering over a secondary link on an inverted surface."
|
|
931
|
+
},
|
|
932
|
+
"textLinkOnInvertedSecondaryPressed": {
|
|
933
|
+
"description": "The pressed/active-state color for secondary-priority text links on dark or inverted backgrounds. Use when a secondary link on an inverted surface is being actively activated."
|
|
934
|
+
},
|
|
935
|
+
"textLinkPressed": {
|
|
936
|
+
"description": "The pressed/active-state color for inline text links. Use when a link is being actively clicked or tapped. Do not use for hover or resting states."
|
|
937
|
+
},
|
|
938
|
+
"textLinkSecondary": {
|
|
939
|
+
"description": "The color for secondary-priority links — lower-emphasis links that share the same color as secondary text. Use when a link is less prominent than the primary link on a surface. Do not use as the default link color; use `text-link` for primary links."
|
|
940
|
+
},
|
|
941
|
+
"textLinkSecondaryHover": {
|
|
942
|
+
"description": "The hover-state color for secondary-priority links. Use exclusively when hovering over a secondary link. Do not use for primary link hover; use `text-link-hover`."
|
|
943
|
+
},
|
|
944
|
+
"textLinkSecondaryPressed": {
|
|
945
|
+
"description": "The pressed/active-state color for secondary-priority links. Use when a secondary link is being actively activated. Do not use for primary link pressed state."
|
|
946
|
+
},
|
|
947
|
+
"textOnInteractiveDanger": {
|
|
948
|
+
"description": "The text color for labels on destructive interactive elements that are not Button components. Do not use on Button components; use `button-text-on-danger` for those. Do not use for danger text on non-interactive surfaces; use `status-text-error`."
|
|
949
|
+
},
|
|
950
|
+
"textOnInteractivePrimary": {
|
|
951
|
+
"description": "The text color for labels on primary interactive elements that are not Button components. Do not use on Button components; use `button-text-on-primary` for those."
|
|
952
|
+
},
|
|
953
|
+
"textOnInteractiveSecondary": {
|
|
954
|
+
"description": "The text color for labels on secondary interactive elements that are not Button components. Do not use on Button components; use `button-text-on-secondary` for those."
|
|
955
|
+
},
|
|
956
|
+
"textOnInteractiveSelected": {
|
|
957
|
+
"description": "The text color for content placed on top of a selected background fill (`background-interactive-selected`). Use to ensure legibility of text rendered over the selected-state surface. Do not use for the selected element's own label; use `text-interactive-selected` for that."
|
|
958
|
+
},
|
|
959
|
+
"textNeutrals": {
|
|
960
|
+
"description": "⚠️ Deprecated. Use `text-default` instead."
|
|
961
|
+
},
|
|
962
|
+
"textNeutralsActive": {
|
|
963
|
+
"description": "⚠️ Deprecated. Use `text-default` instead."
|
|
964
|
+
},
|
|
965
|
+
"textNeutralsDisabled": {
|
|
966
|
+
"description": "⚠️ Deprecated. Use `text-disabled` instead."
|
|
967
|
+
},
|
|
968
|
+
"textNeutralsHover": {
|
|
969
|
+
"description": "⚠️ Deprecated. Use `text-default` instead."
|
|
970
|
+
},
|
|
971
|
+
"textNeutralsInverted": {
|
|
972
|
+
"description": "⚠️ Deprecated. Use `text-inverted` instead."
|
|
973
|
+
},
|
|
974
|
+
"textNeutralsInvertedHover": {
|
|
975
|
+
"description": "⚠️ Deprecated. Use `text-link-on-inverted-hover` instead."
|
|
976
|
+
},
|
|
977
|
+
"textNeutralsInvertedSubtle": {
|
|
978
|
+
"description": "⚠️ Deprecated. Use `text-inverted-secondary` instead."
|
|
979
|
+
},
|
|
980
|
+
"textNeutralsInvertedSubtleHover": {
|
|
981
|
+
"description": "⚠️ Deprecated. Use `text-link-on-inverted-secondary-hover` instead."
|
|
982
|
+
},
|
|
983
|
+
"textNeutralsPlaceholder": {
|
|
984
|
+
"description": "⚠️ Deprecated. Use `text-placeholder` instead."
|
|
985
|
+
},
|
|
986
|
+
"textNeutralsPlaceholderOnly": {
|
|
987
|
+
"description": "⚠️ Deprecated. Use `text-placeholder` instead."
|
|
988
|
+
},
|
|
989
|
+
"textNeutralsPressed": {
|
|
990
|
+
"description": "⚠️ Deprecated. Use `text-default` instead."
|
|
991
|
+
},
|
|
992
|
+
"textNeutralsSubtle": {
|
|
993
|
+
"description": "⚠️ Deprecated. Use `text-secondary` instead."
|
|
994
|
+
},
|
|
995
|
+
"textNeutralsSubtleActive": {
|
|
996
|
+
"description": "⚠️ Deprecated. Use `text-link-secondary-pressed` instead."
|
|
997
|
+
},
|
|
998
|
+
"textNeutralsSubtleHover": {
|
|
999
|
+
"description": "⚠️ Deprecated. Use `text-link-secondary-hover` instead."
|
|
1000
|
+
},
|
|
1001
|
+
"textNeutralsSubtlePressed": {
|
|
1002
|
+
"description": "⚠️ Deprecated. Use `text-link-secondary-pressed` instead."
|
|
1003
|
+
},
|
|
1004
|
+
"textPrimary": {
|
|
1005
|
+
"description": "⚠️ Deprecated. Use `text-link` instead."
|
|
1006
|
+
},
|
|
1007
|
+
"textPrimaryActive": {
|
|
1008
|
+
"description": "⚠️ Deprecated. Use `text-link-pressed` instead."
|
|
1009
|
+
},
|
|
1010
|
+
"textPrimaryHover": {
|
|
1011
|
+
"description": "⚠️ Deprecated. Use `text-link-hover` instead."
|
|
1012
|
+
},
|
|
1013
|
+
"textPrimaryInverted": {
|
|
1014
|
+
"description": "⚠️ Deprecated. Use `text-inverted` instead."
|
|
1015
|
+
},
|
|
1016
|
+
"textPrimaryInvertedSubtle": {
|
|
1017
|
+
"description": "⚠️ Deprecated. Use `text-inverted-secondary` instead."
|
|
1018
|
+
},
|
|
1019
|
+
"textPrimaryPressed": {
|
|
1020
|
+
"description": "⚠️ Deprecated. Use `text-link-pressed` instead."
|
|
1021
|
+
},
|
|
1022
|
+
"textPrimarySelected": {
|
|
1023
|
+
"description": "⚠️ Deprecated. Use `text-interactive-selected` instead."
|
|
1024
|
+
},
|
|
1025
|
+
"statusTextError": {
|
|
1026
|
+
"description": "Text color for inline error messages, field validation text, and error state labels displayed on standard (non-status) backgrounds. Use when text alone needs to communicate an error without a status background fill. Do not use for text on error status backgrounds; use `status-text-on-error` for that."
|
|
1027
|
+
},
|
|
1028
|
+
"statusTextOnError": {
|
|
1029
|
+
"description": "Text color for content displayed on top of an error status background (`status-background-error`). Use for labels and messages inside error banners or alert panels. Do not use on standard backgrounds; use `status-text-error` for standalone error text."
|
|
1030
|
+
},
|
|
1031
|
+
"statusTextOnInfo": {
|
|
1032
|
+
"description": "Text color for content displayed on top of an info status background (`status-background-info`). Use for labels, messages, and headings inside informational banners or alert panels. Do not use on standard or non-status backgrounds. Always pair with `status-background-info`. Note: there is no standalone `status-text-info` variant — info text on standard backgrounds should use `text-default` or `text-secondary`."
|
|
1033
|
+
},
|
|
1034
|
+
"statusTextOnSuccess": {
|
|
1035
|
+
"description": "Text color for content displayed on top of a success status background (`status-background-success`). Use for labels and messages inside success banners or confirmation panels. Do not use on standard backgrounds; use `status-text-success` for standalone success text."
|
|
1036
|
+
},
|
|
1037
|
+
"statusTextOnWarning": {
|
|
1038
|
+
"description": "Text color for content displayed on top of a warning status background (`status-background-warning`). Use for labels and messages inside warning banners or cautionary panels. Do not use on standard backgrounds; use `status-text-warning` for standalone warning text."
|
|
1039
|
+
},
|
|
1040
|
+
"statusTextSuccess": {
|
|
1041
|
+
"description": "Text color for inline success messages and confirmation labels displayed on standard (non-status) backgrounds. Use when text alone communicates a positive or completed state. Do not use for text on success status backgrounds; use `status-text-on-success`."
|
|
1042
|
+
},
|
|
1043
|
+
"statusTextWarning": {
|
|
1044
|
+
"description": "Text color for inline warning messages and cautionary labels displayed on standard (non-status) backgrounds. Use when text alone needs to communicate caution or alert without a background fill. Do not use on warning status backgrounds; use `status-text-on-warning` for that."
|
|
1045
|
+
},
|
|
1046
|
+
"textSuccess": {
|
|
1047
|
+
"description": "⚠️ Deprecated. Use `status-text-success` instead."
|
|
1048
|
+
},
|
|
1049
|
+
"textSuccessActive": {
|
|
1050
|
+
"description": "⚠️ Deprecated. Use `status-text-success` instead."
|
|
1051
|
+
},
|
|
1052
|
+
"textSuccessHover": {
|
|
1053
|
+
"description": "⚠️ Deprecated. Use `status-text-success` instead."
|
|
1054
|
+
},
|
|
1055
|
+
"textSuccessInverted": {
|
|
1056
|
+
"description": "⚠️ Deprecated. Use `text-inverted` instead."
|
|
1057
|
+
},
|
|
1058
|
+
"textSuccessPressed": {
|
|
1059
|
+
"description": "⚠️ Deprecated. Use `status-text-success` instead."
|
|
1060
|
+
},
|
|
1061
|
+
"textDefault": {
|
|
1062
|
+
"description": "The primary text color for the application. Use as the default for body copy, headings, labels, and any readable text on standard backgrounds. Do not use for secondary, muted, placeholder, or disabled text — each has its own token. Do not use on inverted or dark surfaces; use `text-inverted`."
|
|
1063
|
+
},
|
|
1064
|
+
"textDisabled": {
|
|
1065
|
+
"description": "The text color for content belonging to a disabled, non-interactive element. Use when a label, value, or description is part of a component that cannot be interacted with. Do not use for content that is merely de-emphasized but still interactive; use `text-muted` or `text-secondary`."
|
|
1066
|
+
},
|
|
1067
|
+
"textInverted": {
|
|
1068
|
+
"description": "The primary text color for use on dark or inverted backgrounds. Use when standard text colors lack sufficient contrast against an inverted or dark surface. Do not use on standard light backgrounds; use `text-default` instead. Do not use for secondary text on inverted surfaces; use `text-inverted-secondary`."
|
|
1069
|
+
},
|
|
1070
|
+
"textInvertedSecondary": {
|
|
1071
|
+
"description": "A secondary text color for supporting content on dark or inverted backgrounds. Use for descriptions, metadata, and supplemental text on inverted surfaces where full-weight inverted text would be too heavy. Do not use as the primary text on inverted surfaces; use `text-inverted`."
|
|
1072
|
+
},
|
|
1073
|
+
"textMuted": {
|
|
1074
|
+
"description": "A low-emphasis text color for de-prioritized content such as timestamps, helper text, captions, and fine print. Use when text should be present but clearly subordinate to primary and secondary text. Do not use for interactive or actionable text. Do not use for placeholder text in inputs; use `text-placeholder`."
|
|
1075
|
+
},
|
|
1076
|
+
"textOnDisabled": {
|
|
1077
|
+
"description": "The text color for content rendered on top of a disabled background fill (`background-disabled`). Use to ensure legibility of text inside disabled component surfaces. Do not use for text in standard enabled states. Always pair with `background-disabled`."
|
|
1078
|
+
},
|
|
1079
|
+
"textOnStaticDark": {
|
|
1080
|
+
"description": "The primary text color for use on always-dark static surfaces — backgrounds that remain dark in both light and dark themes. Use for primary readable text on static-dark components like code blocks or dark tooltips. Do not use on theme-responsive inverted surfaces; use `text-inverted` for those."
|
|
1081
|
+
},
|
|
1082
|
+
"textOnStaticDarkSubtle": {
|
|
1083
|
+
"description": "A secondary, reduced-emphasis text color for use on always-dark static surfaces. Use for supporting or metadata text on static-dark components. Do not use as the primary text on static-dark surfaces; use `text-on-static-dark`."
|
|
1084
|
+
},
|
|
1085
|
+
"textPlaceholder": {
|
|
1086
|
+
"description": "The text color for placeholder content inside form inputs, textareas, and selects. Use exclusively for the placeholder attribute text in input fields. Do not use for actual entered content, labels, or hint text outside of inputs. Do not confuse with `text-muted` — placeholder is input-specific."
|
|
1087
|
+
},
|
|
1088
|
+
"textSecondary": {
|
|
1089
|
+
"description": "A slightly reduced-emphasis text color for supporting copy, descriptions, and metadata that accompanies primary content. Use when text needs to be readable but less visually dominant than primary text. Do not use as the default body text color; use `text-default`. Do not use for placeholder or disabled text."
|
|
1090
|
+
},
|
|
1091
|
+
"textWarning": {
|
|
1092
|
+
"description": "⚠️ Deprecated. Use `status-text-warning` instead."
|
|
1093
|
+
},
|
|
1094
|
+
"textWarningSubtle": {
|
|
1095
|
+
"description": "⚠️ Deprecated. Use `status-text-warning` instead."
|
|
1096
|
+
}
|
|
1097
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-themes",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.4",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -18,7 +18,8 @@
|
|
|
18
18
|
"./light.css": "./light.css",
|
|
19
19
|
"./dark.css": "./dark.css",
|
|
20
20
|
"./new-light.css": "./new-light.css",
|
|
21
|
-
"./new-dark.css": "./new-dark.css"
|
|
21
|
+
"./new-dark.css": "./new-dark.css",
|
|
22
|
+
"./metadata.json": "./metadata.json"
|
|
22
23
|
},
|
|
23
24
|
"files": [
|
|
24
25
|
"dist",
|
|
@@ -26,7 +27,8 @@
|
|
|
26
27
|
"light.css",
|
|
27
28
|
"dark.css",
|
|
28
29
|
"new-light.css",
|
|
29
|
-
"new-dark.css"
|
|
30
|
+
"new-dark.css",
|
|
31
|
+
"metadata.json"
|
|
30
32
|
],
|
|
31
33
|
"publishConfig": {
|
|
32
34
|
"access": "public"
|