@webority/theme 0.82.1 → 0.83.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -0
- package/dist/purge-safelist.json +6 -0
- package/dist/webority-brand-signal.css +1 -1
- package/dist/webority-theme.css +1 -1
- package/package.json +4 -2
- package/scss/_brand-signal.scss +58 -47
- package/scss/_tokens.scss +184 -0
- package/scss/_wui-aliases.scss +92 -0
- package/scss/wui/_media.scss +9 -0
- package/scss/wui/_rich-text.scss +4 -0
- package/token-meanings.json +270 -0
package/scss/_wui-aliases.scss
CHANGED
|
@@ -8,61 +8,90 @@
|
|
|
8
8
|
|
|
9
9
|
:root {
|
|
10
10
|
// Surfaces
|
|
11
|
+
/// meaning: Page background behind the content area.
|
|
11
12
|
--color-bg: var(--wui-bg-page);
|
|
13
|
+
/// meaning: Subtle raised background for side panels and bands.
|
|
12
14
|
--color-bg-subtle: var(--wui-bg-elevated);
|
|
15
|
+
/// meaning: Muted background for grouped areas and quiet controls.
|
|
13
16
|
--color-bg-muted: var(--wui-bg-muted);
|
|
17
|
+
/// meaning: Resting fill of input-like controls such as fields and selects.
|
|
14
18
|
--color-field-bg: var(--wui-field-bg);
|
|
19
|
+
/// meaning: Card and panel surface.
|
|
15
20
|
--color-surface: var(--wui-bg-light);
|
|
16
21
|
|
|
17
22
|
// Borders
|
|
23
|
+
/// meaning: Hairline border of cards, tables and dividers.
|
|
18
24
|
--color-border: var(--wui-border-light);
|
|
25
|
+
/// meaning: Softest border for inner dividers and list edges.
|
|
19
26
|
--color-border-light: var(--wui-border-soft);
|
|
27
|
+
/// meaning: Stronger border for emphasised separators.
|
|
20
28
|
--color-border-strong: var(--wui-text-5);
|
|
21
29
|
// The resting and hover border of an input-like control.
|
|
22
30
|
// Decorative card and table borders stay on --color-border.
|
|
31
|
+
/// meaning: Resting border of an input-like control such as a field or select.
|
|
23
32
|
--color-field-border: var(--wui-field-border);
|
|
33
|
+
/// meaning: Hover border of an input-like control.
|
|
24
34
|
--color-field-border-hover: var(--wui-field-border-hover);
|
|
35
|
+
/// meaning: Unfilled track of a progress bar.
|
|
25
36
|
--color-progress-track: var(--wui-progress-track);
|
|
26
37
|
// Label text inside a progress bar fill.
|
|
38
|
+
/// meaning: Label text inside a progress bar fill.
|
|
27
39
|
--color-progress-label: var(--wui-bg-light);
|
|
28
40
|
// Icon ink on a solid status fill (the filled timeline dots): white in both modes, by design
|
|
29
41
|
// choice. White on the bright success and warning fills sits under the 3:1 icon floor, so the
|
|
30
42
|
// contrast gate does not measure this pair.
|
|
43
|
+
/// meaning: Icon ink on a solid status fill, such as a filled timeline dot.
|
|
31
44
|
--color-on-status-fill: #FFFFFF;
|
|
32
45
|
// Ink on a DEEP status fill (the -text tokens, used as a fill the way primary is): white in
|
|
33
46
|
// light mode, where those shades measure 5.5 to 6.2:1; near-black in dark mode, where -text is
|
|
34
47
|
// the bright fill.
|
|
48
|
+
/// meaning: Ink on a deep status fill used as a surface, such as a status badge.
|
|
35
49
|
--color-on-status-strong: #FFFFFF;
|
|
36
50
|
|
|
37
51
|
// Text ramp
|
|
52
|
+
/// meaning: Main heading and body ink.
|
|
38
53
|
--color-text: var(--wui-text-heading);
|
|
39
54
|
// Body copy on a tinted surface (alert bodies): a step softer than the heading ink.
|
|
55
|
+
/// meaning: Body copy on a tinted surface such as an alert body.
|
|
40
56
|
--color-text-body: var(--wui-text-1);
|
|
41
57
|
// A dark-ink glyph such as Bootstrap's .btn-close needs no filter on a light surface.
|
|
58
|
+
/// meaning: Filter applied to a dark-ink close glyph such as the alert close button.
|
|
42
59
|
--color-close-filter: none;
|
|
43
60
|
// The border of a focused / open / active control (input, select, OTP slot, dropzone).
|
|
44
61
|
// The soft primary tint, matching the soft resting border.
|
|
62
|
+
/// meaning: Border of a focused, open or active control such as an input or select.
|
|
45
63
|
--color-focus-border: var(--wui-primary-30);
|
|
46
64
|
// The keyboard focus ring every control draws on :focus-visible: an outline of this colour,
|
|
47
65
|
// width and offset. The primary ink clears 4.5:1 on every light surface and the dark primary
|
|
48
66
|
// on every dark one, so the ring keeps 3:1 whatever the brand. A coloured surface (a scrim, a
|
|
49
67
|
// brand hero) resets --color-focus-ring for its subtree. Inside a scroller that would clip an
|
|
50
68
|
// outer ring, the ring is drawn inset with --wui-focus-ring-inset.
|
|
69
|
+
/// meaning: Colour of the keyboard focus ring drawn on focus-visible controls.
|
|
51
70
|
--color-focus-ring: var(--color-primary-ink);
|
|
71
|
+
/// meaning: Width of the keyboard focus ring.
|
|
52
72
|
--wui-focus-ring-width: 2px;
|
|
73
|
+
/// meaning: Gap between a control and its keyboard focus ring.
|
|
53
74
|
--wui-focus-ring-offset: 2px;
|
|
75
|
+
/// meaning: Offset that draws the focus ring inside a scrolling container.
|
|
54
76
|
--wui-focus-ring-inset: calc(-1 * var(--wui-focus-ring-width));
|
|
55
77
|
// Pressed: a translucent wash of the control's own ink laid over whatever fill it has, so it
|
|
56
78
|
// reads one step deeper than hover on any surface and in either theme, with no motion.
|
|
79
|
+
/// meaning: Translucent wash laid over a control while it is pressed.
|
|
57
80
|
--color-pressed-overlay: color-mix(in srgb, currentColor 12%, transparent);
|
|
81
|
+
/// meaning: Scale a control shrinks to while it is pressed.
|
|
58
82
|
--wui-press-scale: 0.96;
|
|
83
|
+
/// meaning: Duration of the pressed feedback on a control.
|
|
59
84
|
--wui-press-duration: 80ms;
|
|
60
85
|
// Disabled: one opacity for every control that dims as a whole (a checkbox, a segmented option, a
|
|
61
86
|
// chip, a tab, an icon button). A text field does not dim; it takes the deeper disabled fill.
|
|
87
|
+
/// meaning: Opacity of a control that dims as a whole when disabled.
|
|
62
88
|
--wui-disabled-opacity: 0.5;
|
|
63
89
|
// The raised thumb that marks the selected option of a segmented control: white in light mode.
|
|
90
|
+
/// meaning: Raised thumb that marks the selected option of a segmented control.
|
|
64
91
|
--color-thumb: var(--wui-bg-light);
|
|
92
|
+
/// meaning: Secondary text for descriptions and muted copy.
|
|
65
93
|
--color-text-muted: var(--wui-text-2);
|
|
94
|
+
/// meaning: Tertiary text for hints, captions, timestamps and placeholders.
|
|
66
95
|
--color-text-subtle: var(--wui-text-3);
|
|
67
96
|
|
|
68
97
|
// Bootstrap colour vars bridged onto app tokens so un-tokenised BS text
|
|
@@ -75,85 +104,141 @@
|
|
|
75
104
|
--bs-border-color: var(--color-border);
|
|
76
105
|
|
|
77
106
|
// Brand
|
|
107
|
+
/// meaning: Primary fill for buttons, selected states and borders.
|
|
78
108
|
--color-primary: var(--wui-primary);
|
|
109
|
+
/// meaning: Primary fill while a control is hovered or pressed.
|
|
79
110
|
--color-primary-hover: var(--wui-primary-pressed);
|
|
111
|
+
/// meaning: Soft primary tint behind selected and highlighted rows.
|
|
80
112
|
--color-primary-soft: var(--wui-primary-10);
|
|
81
113
|
// Text/icon colour for content sitting ON a solid --color-primary fill — see
|
|
82
114
|
// --wui-primary-text for why this is a different axis from the -text tokens below.
|
|
115
|
+
/// meaning: Text and icon colour on a solid primary fill.
|
|
83
116
|
--color-primary-text: var(--wui-primary-text);
|
|
84
117
|
// Label on the pressed primary fill (--color-primary-hover); the hover and press states read it.
|
|
118
|
+
/// meaning: Label on the hovered or pressed primary fill.
|
|
85
119
|
--color-primary-hover-text: var(--wui-primary-text);
|
|
86
120
|
// The primary as TEXT or a small glyph on a light surface: AA-safe whatever the brand (see
|
|
87
121
|
// --wui-primary-ink). --color-primary stays the fill, border and focus colour.
|
|
122
|
+
/// meaning: Primary as text and small glyphs on light surfaces, passing AA contrast.
|
|
88
123
|
--color-primary-ink: var(--wui-primary-ink);
|
|
89
124
|
// Ink on the primary ink used as a fill (the active step badge): the ink clears 4.5:1 against
|
|
90
125
|
// white by construction, so white in light mode; near-black on the lifted dark primary.
|
|
126
|
+
/// meaning: Ink on the primary ink used as a solid fill, such as the active step badge.
|
|
91
127
|
--color-on-primary-ink: #FFFFFF;
|
|
92
128
|
|
|
93
129
|
// Semantic status ramps
|
|
130
|
+
/// meaning: Info ink for icons and active states.
|
|
94
131
|
--color-info-active: var(--wui-info-active);
|
|
132
|
+
/// meaning: Vivid info fill for badges and dots.
|
|
95
133
|
--color-info: var(--wui-info);
|
|
134
|
+
/// meaning: Info border tone and the strongest soft info fill.
|
|
96
135
|
--color-info-50: var(--wui-info-50);
|
|
136
|
+
/// meaning: Info tint for soft fills and borders of alerts and badges.
|
|
97
137
|
--color-info-30: var(--wui-info-30);
|
|
138
|
+
/// meaning: Info tint behind info alerts and badges.
|
|
98
139
|
--color-info-20: var(--wui-info-20);
|
|
140
|
+
/// meaning: Soft background of info alerts and badges.
|
|
99
141
|
--color-info-10: var(--wui-info-10);
|
|
142
|
+
/// meaning: Faintest info wash for hover and soft backgrounds.
|
|
100
143
|
--color-info-5: var(--wui-info-5);
|
|
101
144
|
// No dedicated --wui-info-strong; active is the deepest info fill.
|
|
145
|
+
/// meaning: Deepest info fill, used where a strong info fill is needed.
|
|
102
146
|
--color-info-strong: var(--wui-info-active);
|
|
147
|
+
/// meaning: Soft info background for alerts.
|
|
103
148
|
--color-info-soft: var(--color-info-10);
|
|
104
149
|
// Use this — never --color-info — when the colour IS the text.
|
|
150
|
+
/// meaning: Info colour as text on light surfaces.
|
|
105
151
|
--color-info-text: var(--wui-info-text);
|
|
152
|
+
/// meaning: Info text on a soft info tint, such as an alert heading.
|
|
106
153
|
--color-info-text-on-soft: var(--wui-info-text);
|
|
107
154
|
|
|
155
|
+
/// meaning: Success ink for icons and active states.
|
|
108
156
|
--color-success-active: var(--wui-success-active);
|
|
157
|
+
/// meaning: Vivid success fill for badges and dots.
|
|
109
158
|
--color-success: var(--wui-success);
|
|
159
|
+
/// meaning: Success border tone and the strongest soft success fill.
|
|
110
160
|
--color-success-50: var(--wui-success-50);
|
|
161
|
+
/// meaning: Success tint for soft fills and borders of alerts and badges.
|
|
111
162
|
--color-success-30: var(--wui-success-30);
|
|
163
|
+
/// meaning: Success tint behind success alerts and badges.
|
|
112
164
|
--color-success-20: var(--wui-success-20);
|
|
165
|
+
/// meaning: Soft background of success alerts and badges.
|
|
113
166
|
--color-success-10: var(--wui-success-10);
|
|
167
|
+
/// meaning: Faintest success wash for hover and soft backgrounds.
|
|
114
168
|
--color-success-5: var(--wui-success-5);
|
|
169
|
+
/// meaning: Deep success fill behind white text, such as progress labels.
|
|
115
170
|
--color-success-strong: var(--wui-success-strong);
|
|
171
|
+
/// meaning: Soft success background for alerts.
|
|
116
172
|
--color-success-soft: var(--color-success-10);
|
|
117
173
|
// Use this — never --color-success — when the colour IS the text.
|
|
174
|
+
/// meaning: Success colour as text on light surfaces.
|
|
118
175
|
--color-success-text: var(--wui-success-text);
|
|
176
|
+
/// meaning: Success text on a soft success tint, such as an alert heading.
|
|
119
177
|
--color-success-text-on-soft: var(--wui-success-text);
|
|
120
178
|
|
|
179
|
+
/// meaning: Warning ink for icons and active states.
|
|
121
180
|
--color-warning-active: var(--wui-warning-active);
|
|
181
|
+
/// meaning: Vivid warning fill for badges and dots.
|
|
122
182
|
--color-warning: var(--wui-warning);
|
|
183
|
+
/// meaning: Warning border tone and the strongest soft warning fill.
|
|
123
184
|
--color-warning-50: var(--wui-warning-50);
|
|
185
|
+
/// meaning: Warning tint for soft fills and borders of alerts and badges.
|
|
124
186
|
--color-warning-30: var(--wui-warning-30);
|
|
187
|
+
/// meaning: Warning tint behind warning alerts and badges.
|
|
125
188
|
--color-warning-20: var(--wui-warning-20);
|
|
189
|
+
/// meaning: Soft background of warning alerts and badges.
|
|
126
190
|
--color-warning-10: var(--wui-warning-10);
|
|
191
|
+
/// meaning: Faintest warning wash for hover and soft backgrounds.
|
|
127
192
|
--color-warning-5: var(--wui-warning-5);
|
|
128
193
|
// No dedicated --wui-warning-strong; active is the deepest warning fill.
|
|
194
|
+
/// meaning: Deepest warning fill, used where a strong warning fill is needed.
|
|
129
195
|
--color-warning-strong: var(--wui-warning-active);
|
|
196
|
+
/// meaning: Soft warning background for alerts.
|
|
130
197
|
--color-warning-soft: var(--color-warning-10);
|
|
131
198
|
// Use this — never --color-warning — when the colour IS the text.
|
|
199
|
+
/// meaning: Warning colour as text on light surfaces.
|
|
132
200
|
--color-warning-text: var(--wui-warning-text);
|
|
201
|
+
/// meaning: Warning text on a soft warning tint, such as an alert heading.
|
|
133
202
|
--color-warning-text-on-soft: var(--wui-warning-text);
|
|
134
203
|
|
|
204
|
+
/// meaning: Danger ink for icons and active states.
|
|
135
205
|
--color-danger-active: var(--wui-danger-active);
|
|
206
|
+
/// meaning: Vivid danger fill for badges, dots and danger buttons.
|
|
136
207
|
--color-danger: var(--wui-danger);
|
|
208
|
+
/// meaning: Danger border tone and the strongest soft danger fill.
|
|
137
209
|
--color-danger-50: var(--wui-danger-50);
|
|
210
|
+
/// meaning: Danger tint for soft fills and borders of alerts and badges.
|
|
138
211
|
--color-danger-30: var(--wui-danger-30);
|
|
212
|
+
/// meaning: Danger tint behind danger alerts and badges.
|
|
139
213
|
--color-danger-20: var(--wui-danger-20);
|
|
214
|
+
/// meaning: Soft background of danger alerts and badges.
|
|
140
215
|
--color-danger-10: var(--wui-danger-10);
|
|
216
|
+
/// meaning: Faintest danger wash for hover and soft backgrounds.
|
|
141
217
|
--color-danger-5: var(--wui-danger-5);
|
|
218
|
+
/// meaning: Deep danger fill behind white text, such as the danger button.
|
|
142
219
|
--color-danger-strong: var(--wui-danger-strong);
|
|
220
|
+
/// meaning: Soft danger background for alerts.
|
|
143
221
|
--color-danger-soft: var(--color-danger-10);
|
|
144
222
|
// Use this — never --color-danger — when the colour IS the text.
|
|
223
|
+
/// meaning: Danger colour as text on light surfaces, such as validation messages.
|
|
145
224
|
--color-danger-text: var(--wui-danger-text);
|
|
225
|
+
/// meaning: Danger text on a soft danger tint, such as an alert heading.
|
|
146
226
|
--color-danger-text-on-soft: var(--wui-danger-text);
|
|
147
227
|
|
|
148
228
|
// Accent → warning ramp
|
|
229
|
+
/// meaning: Accent colour, aliased to the warning ramp.
|
|
149
230
|
--color-accent: var(--color-warning);
|
|
231
|
+
/// meaning: Soft accent background, aliased to the warning soft tint.
|
|
150
232
|
--color-accent-soft: var(--color-warning-soft);
|
|
151
233
|
|
|
152
234
|
// Scrim — one dim ink, two strengths: scrim for page-level backdrops
|
|
153
235
|
// (drawer, modal, shell), scrim-strong for media overlays carrying white
|
|
154
236
|
// ink (logo uploader, file previews).
|
|
237
|
+
/// meaning: Dim behind page-level backdrops such as drawers, modals and the shell.
|
|
155
238
|
--color-scrim: color-mix(in srgb, var(--wui-text-heading) 45%, transparent);
|
|
239
|
+
/// meaning: Stronger dim behind media overlays that carry white ink.
|
|
156
240
|
--color-scrim-strong: color-mix(in srgb, var(--wui-text-heading) 62%, transparent);
|
|
241
|
+
/// meaning: Ink on a scrim, such as the text of an overlay.
|
|
157
242
|
--color-on-scrim: var(--wui-bg-light);
|
|
158
243
|
|
|
159
244
|
// Elevation — in-page flat; only floating overlays lift (matches zeroed BS
|
|
@@ -207,6 +292,13 @@
|
|
|
207
292
|
// The light pastel focus border glows against a dark field; dark mode uses the dark theme's
|
|
208
293
|
// own primary (the button fill), which still clears 3:1 against every dark surface.
|
|
209
294
|
--color-focus-border: var(--wui-dark-primary);
|
|
295
|
+
// Numbered tints follow dark mode: the dark primary mixed into the dark surface, strongest at 50.
|
|
296
|
+
--wui-primary-5: color-mix(in srgb, var(--wui-dark-primary) 10%, var(--wui-dark-bg-surface));
|
|
297
|
+
--wui-primary-10: color-mix(in srgb, var(--wui-dark-primary) 16%, var(--wui-dark-bg-surface));
|
|
298
|
+
--wui-primary-15: color-mix(in srgb, var(--wui-dark-primary) 21%, var(--wui-dark-bg-surface));
|
|
299
|
+
--wui-primary-20: color-mix(in srgb, var(--wui-dark-primary) 26%, var(--wui-dark-bg-surface));
|
|
300
|
+
--wui-primary-30: color-mix(in srgb, var(--wui-dark-primary) 40%, var(--wui-dark-bg-surface));
|
|
301
|
+
--wui-primary-50: color-mix(in srgb, var(--wui-dark-primary) 62%, var(--wui-dark-bg-surface));
|
|
210
302
|
|
|
211
303
|
// Re-bridge the Bootstrap colour vars onto the (now dark) app tokens so the
|
|
212
304
|
// named-var text/body/border utilities — .text-body-secondary, .text-muted,
|
package/scss/wui/_media.scss
CHANGED
|
@@ -529,6 +529,15 @@
|
|
|
529
529
|
color: var(--color-danger-text);
|
|
530
530
|
background: var(--color-danger-soft);
|
|
531
531
|
}
|
|
532
|
+
.wui-attach-progress {
|
|
533
|
+
margin-top: 4px;
|
|
534
|
+
width: 100%;
|
|
535
|
+
}
|
|
536
|
+
.wui-attach-error {
|
|
537
|
+
margin-top: 2px;
|
|
538
|
+
font-size: 12px;
|
|
539
|
+
color: var(--color-danger-text);
|
|
540
|
+
}
|
|
532
541
|
|
|
533
542
|
@media (prefers-reduced-motion: reduce) {
|
|
534
543
|
.attach-drop,
|
package/scss/wui/_rich-text.scss
CHANGED
|
@@ -59,6 +59,10 @@ wui-rich-text[readonly] .wui-rich-text-shell {
|
|
|
59
59
|
background: var(--color-bg-subtle);
|
|
60
60
|
color: var(--color-text-muted);
|
|
61
61
|
}
|
|
62
|
+
// A locked field shows its content only; formatting tools there would suggest it can be edited.
|
|
63
|
+
wui-rich-text[readonly] .wui-rich-text-toolbar {
|
|
64
|
+
display: none;
|
|
65
|
+
}
|
|
62
66
|
|
|
63
67
|
// ── Toolbar ──
|
|
64
68
|
// Wraps on a phone rather than scrolling sideways, so every tool stays reachable at 375px.
|
|
@@ -0,0 +1,270 @@
|
|
|
1
|
+
{
|
|
2
|
+
"--color-accent": "Accent colour, aliased to the warning ramp.",
|
|
3
|
+
"--color-accent-soft": "Soft accent background, aliased to the warning soft tint.",
|
|
4
|
+
"--color-bg": "Page background behind the content area.",
|
|
5
|
+
"--color-bg-muted": "Muted background for grouped areas and quiet controls.",
|
|
6
|
+
"--color-bg-subtle": "Subtle raised background for side panels and bands.",
|
|
7
|
+
"--color-border": "Hairline border of cards, tables and dividers.",
|
|
8
|
+
"--color-border-light": "Softest border for inner dividers and list edges.",
|
|
9
|
+
"--color-border-strong": "Stronger border for emphasised separators.",
|
|
10
|
+
"--color-close-filter": "Filter applied to a dark-ink close glyph such as the alert close button.",
|
|
11
|
+
"--color-danger": "Vivid danger fill for badges, dots and danger buttons.",
|
|
12
|
+
"--color-danger-10": "Soft background of danger alerts and badges.",
|
|
13
|
+
"--color-danger-20": "Danger tint behind danger alerts and badges.",
|
|
14
|
+
"--color-danger-30": "Danger tint for soft fills and borders of alerts and badges.",
|
|
15
|
+
"--color-danger-5": "Faintest danger wash for hover and soft backgrounds.",
|
|
16
|
+
"--color-danger-50": "Danger border tone and the strongest soft danger fill.",
|
|
17
|
+
"--color-danger-active": "Danger ink for icons and active states.",
|
|
18
|
+
"--color-danger-soft": "Soft danger background for alerts.",
|
|
19
|
+
"--color-danger-strong": "Deep danger fill behind white text, such as the danger button.",
|
|
20
|
+
"--color-danger-text": "Danger colour as text on light surfaces, such as validation messages.",
|
|
21
|
+
"--color-danger-text-on-soft": "Danger text on a soft danger tint, such as an alert heading.",
|
|
22
|
+
"--color-field-bg": "Resting fill of input-like controls such as fields and selects.",
|
|
23
|
+
"--color-field-border": "Resting border of an input-like control such as a field or select.",
|
|
24
|
+
"--color-field-border-hover": "Hover border of an input-like control.",
|
|
25
|
+
"--color-focus-border": "Border of a focused, open or active control such as an input or select.",
|
|
26
|
+
"--color-focus-ring": "Colour of the keyboard focus ring drawn on focus-visible controls.",
|
|
27
|
+
"--color-info": "Vivid info fill for badges and dots.",
|
|
28
|
+
"--color-info-10": "Soft background of info alerts and badges.",
|
|
29
|
+
"--color-info-20": "Info tint behind info alerts and badges.",
|
|
30
|
+
"--color-info-30": "Info tint for soft fills and borders of alerts and badges.",
|
|
31
|
+
"--color-info-5": "Faintest info wash for hover and soft backgrounds.",
|
|
32
|
+
"--color-info-50": "Info border tone and the strongest soft info fill.",
|
|
33
|
+
"--color-info-active": "Info ink for icons and active states.",
|
|
34
|
+
"--color-info-soft": "Soft info background for alerts.",
|
|
35
|
+
"--color-info-strong": "Deepest info fill, used where a strong info fill is needed.",
|
|
36
|
+
"--color-info-text": "Info colour as text on light surfaces.",
|
|
37
|
+
"--color-info-text-on-soft": "Info text on a soft info tint, such as an alert heading.",
|
|
38
|
+
"--color-on-primary-ink": "Ink on the primary ink used as a solid fill, such as the active step badge.",
|
|
39
|
+
"--color-on-scrim": "Ink on a scrim, such as the text of an overlay.",
|
|
40
|
+
"--color-on-status-fill": "Icon ink on a solid status fill, such as a filled timeline dot.",
|
|
41
|
+
"--color-on-status-strong": "Ink on a deep status fill used as a surface, such as a status badge.",
|
|
42
|
+
"--color-pressed-overlay": "Translucent wash laid over a control while it is pressed.",
|
|
43
|
+
"--color-primary": "Primary fill for buttons, selected states and borders.",
|
|
44
|
+
"--color-primary-hover": "Primary fill while a control is hovered or pressed.",
|
|
45
|
+
"--color-primary-hover-text": "Label on the hovered or pressed primary fill.",
|
|
46
|
+
"--color-primary-ink": "Primary as text and small glyphs on light surfaces, passing AA contrast.",
|
|
47
|
+
"--color-primary-soft": "Soft primary tint behind selected and highlighted rows.",
|
|
48
|
+
"--color-primary-text": "Text and icon colour on a solid primary fill.",
|
|
49
|
+
"--color-progress-label": "Label text inside a progress bar fill.",
|
|
50
|
+
"--color-progress-track": "Unfilled track of a progress bar.",
|
|
51
|
+
"--color-scrim": "Dim behind page-level backdrops such as drawers, modals and the shell.",
|
|
52
|
+
"--color-scrim-strong": "Stronger dim behind media overlays that carry white ink.",
|
|
53
|
+
"--color-success": "Vivid success fill for badges and dots.",
|
|
54
|
+
"--color-success-10": "Soft background of success alerts and badges.",
|
|
55
|
+
"--color-success-20": "Success tint behind success alerts and badges.",
|
|
56
|
+
"--color-success-30": "Success tint for soft fills and borders of alerts and badges.",
|
|
57
|
+
"--color-success-5": "Faintest success wash for hover and soft backgrounds.",
|
|
58
|
+
"--color-success-50": "Success border tone and the strongest soft success fill.",
|
|
59
|
+
"--color-success-active": "Success ink for icons and active states.",
|
|
60
|
+
"--color-success-soft": "Soft success background for alerts.",
|
|
61
|
+
"--color-success-strong": "Deep success fill behind white text, such as progress labels.",
|
|
62
|
+
"--color-success-text": "Success colour as text on light surfaces.",
|
|
63
|
+
"--color-success-text-on-soft": "Success text on a soft success tint, such as an alert heading.",
|
|
64
|
+
"--color-surface": "Card and panel surface.",
|
|
65
|
+
"--color-text": "Main heading and body ink.",
|
|
66
|
+
"--color-text-body": "Body copy on a tinted surface such as an alert body.",
|
|
67
|
+
"--color-text-muted": "Secondary text for descriptions and muted copy.",
|
|
68
|
+
"--color-text-subtle": "Tertiary text for hints, captions, timestamps and placeholders.",
|
|
69
|
+
"--color-thumb": "Raised thumb that marks the selected option of a segmented control.",
|
|
70
|
+
"--color-warning": "Vivid warning fill for badges and dots.",
|
|
71
|
+
"--color-warning-10": "Soft background of warning alerts and badges.",
|
|
72
|
+
"--color-warning-20": "Warning tint behind warning alerts and badges.",
|
|
73
|
+
"--color-warning-30": "Warning tint for soft fills and borders of alerts and badges.",
|
|
74
|
+
"--color-warning-5": "Faintest warning wash for hover and soft backgrounds.",
|
|
75
|
+
"--color-warning-50": "Warning border tone and the strongest soft warning fill.",
|
|
76
|
+
"--color-warning-active": "Warning ink for icons and active states.",
|
|
77
|
+
"--color-warning-soft": "Soft warning background for alerts.",
|
|
78
|
+
"--color-warning-strong": "Deepest warning fill, used where a strong warning fill is needed.",
|
|
79
|
+
"--color-warning-text": "Warning colour as text on light surfaces.",
|
|
80
|
+
"--color-warning-text-on-soft": "Warning text on a soft warning tint, such as an alert heading.",
|
|
81
|
+
"--wui-accent-dark": "Pressed and hover accent colour in CSS, following the pressed primary.",
|
|
82
|
+
"--wui-bg-elevated": "Subtle raised surface, one step off the page.",
|
|
83
|
+
"--wui-bg-light": "White card and panel surface, the lightest fill in light mode.",
|
|
84
|
+
"--wui-bg-muted": "Muted fill for grouped areas and quiet controls.",
|
|
85
|
+
"--wui-bg-page": "Page background behind every surface in light mode.",
|
|
86
|
+
"--wui-border-light": "Default hairline border of cards, tables and dividers.",
|
|
87
|
+
"--wui-border-soft": "Softest border, for inner dividers.",
|
|
88
|
+
"--wui-chart-1": "Colour of chart series 1, the brand primary.",
|
|
89
|
+
"--wui-chart-2": "Colour of chart series 2 of the eight categorical series.",
|
|
90
|
+
"--wui-chart-3": "Colour of chart series 3 of the eight categorical series.",
|
|
91
|
+
"--wui-chart-4": "Colour of chart series 4 of the eight categorical series.",
|
|
92
|
+
"--wui-chart-5": "Colour of chart series 5 of the eight categorical series.",
|
|
93
|
+
"--wui-chart-6": "Colour of chart series 6 of the eight categorical series.",
|
|
94
|
+
"--wui-chart-7": "Colour of chart series 7 of the eight categorical series.",
|
|
95
|
+
"--wui-chart-8": "Colour of chart series 8 of the eight categorical series.",
|
|
96
|
+
"--wui-chart-axis": "Axis line colour of charts.",
|
|
97
|
+
"--wui-chart-diverging-high": "Colour of values above the midpoint in a diverging chart.",
|
|
98
|
+
"--wui-chart-diverging-low": "Colour of values below the midpoint in a diverging chart.",
|
|
99
|
+
"--wui-chart-diverging-mid": "Neutral midpoint colour of a diverging chart.",
|
|
100
|
+
"--wui-chart-grid": "Gridline colour of charts.",
|
|
101
|
+
"--wui-chart-label": "Tick and legend text colour of charts.",
|
|
102
|
+
"--wui-chart-neutral": "Context series colour, such as the last period, and the folded Other slice.",
|
|
103
|
+
"--wui-chart-seq-0": "Faintest step of the magnitude ramp, for empty heatmap and calendar cells.",
|
|
104
|
+
"--wui-chart-seq-1": "First step of the one-hue magnitude ramp for heatmap and calendar cells.",
|
|
105
|
+
"--wui-chart-seq-2": "Second step of the one-hue magnitude ramp for heatmap and calendar cells.",
|
|
106
|
+
"--wui-chart-seq-3": "Third step of the one-hue magnitude ramp for heatmap and calendar cells.",
|
|
107
|
+
"--wui-chart-seq-4": "Fourth step of the one-hue magnitude ramp for heatmap and calendar cells.",
|
|
108
|
+
"--wui-chart-seq-5": "Fifth step of the one-hue magnitude ramp for heatmap and calendar cells.",
|
|
109
|
+
"--wui-chart-seq-6": "Strongest step of the one-hue magnitude ramp for heatmap and calendar cells.",
|
|
110
|
+
"--wui-container-max": "Maximum width of the page container on every surface.",
|
|
111
|
+
"--wui-container-pad": "Side padding of the page container, growing on wider viewports.",
|
|
112
|
+
"--wui-control-height": "Default height of a button, field, select or tab; larger on phones.",
|
|
113
|
+
"--wui-control-height-lg": "Height of the large control size, for prominent buttons and fields.",
|
|
114
|
+
"--wui-control-height-sm": "Height of the small control size, for dense toolbars and chips.",
|
|
115
|
+
"--wui-cta-gradient": "Background gradient of the call-to-action band on marketing pages.",
|
|
116
|
+
"--wui-danger": "Vivid danger fill for badges, dots and danger buttons.",
|
|
117
|
+
"--wui-danger-10": "Danger tint 10, the soft background of danger alerts and badges.",
|
|
118
|
+
"--wui-danger-20": "Danger tint 20 for soft fills behind danger alerts and badges.",
|
|
119
|
+
"--wui-danger-30": "Danger tint 30 for soft fills and borders of alerts and badges.",
|
|
120
|
+
"--wui-danger-5": "Faintest danger tint, for hover washes and soft danger backgrounds.",
|
|
121
|
+
"--wui-danger-50": "Danger tint 50 for borders and the strongest soft danger fill.",
|
|
122
|
+
"--wui-danger-active": "Active danger fill, the deepest vivid danger tone.",
|
|
123
|
+
"--wui-danger-strong": "Deep danger fill behind white text, such as the danger button.",
|
|
124
|
+
"--wui-danger-strong-hover": "Deep danger fill while a danger button with white text is hovered.",
|
|
125
|
+
"--wui-danger-text": "Error text colour for validation messages and danger text on light surfaces.",
|
|
126
|
+
"--wui-dark-bg-elevated": "Subtle dark background, one step off the dark page.",
|
|
127
|
+
"--wui-dark-bg-muted": "Dark muted fill for grouped areas and quiet controls.",
|
|
128
|
+
"--wui-dark-bg-page": "Dark page background, the base of every dark-mode surface.",
|
|
129
|
+
"--wui-dark-bg-surface": "Dark card and panel surface, one step above the dark page.",
|
|
130
|
+
"--wui-dark-border": "Dark hairline border of cards, tables and dividers.",
|
|
131
|
+
"--wui-dark-border-strong": "Stronger dark border for emphasised separators.",
|
|
132
|
+
"--wui-dark-chart-2": "Dark-mode colour of chart series 2 of the categorical set.",
|
|
133
|
+
"--wui-dark-chart-3": "Dark-mode colour of chart series 3 of the categorical set.",
|
|
134
|
+
"--wui-dark-chart-4": "Dark-mode colour of chart series 4 of the categorical set.",
|
|
135
|
+
"--wui-dark-chart-5": "Dark-mode colour of chart series 5 of the categorical set.",
|
|
136
|
+
"--wui-dark-chart-6": "Dark-mode colour of chart series 6 of the categorical set.",
|
|
137
|
+
"--wui-dark-chart-7": "Dark-mode colour of chart series 7 of the categorical set.",
|
|
138
|
+
"--wui-dark-chart-8": "Dark-mode colour of chart series 8 of the categorical set.",
|
|
139
|
+
"--wui-dark-chart-diverging-high": "Dark-mode colour of values above the midpoint in a diverging chart.",
|
|
140
|
+
"--wui-dark-chart-diverging-low": "Dark-mode colour of values below the midpoint in a diverging chart.",
|
|
141
|
+
"--wui-dark-chart-diverging-mid": "Dark-mode neutral midpoint colour of a diverging chart.",
|
|
142
|
+
"--wui-dark-chart-neutral": "Dark-mode context series colour, such as the last period.",
|
|
143
|
+
"--wui-dark-chart-seq-0": "Dark-mode faintest step of the magnitude ramp, for empty heatmap cells.",
|
|
144
|
+
"--wui-dark-chart-seq-1": "Dark-mode first step of the magnitude ramp for heatmap and calendar cells.",
|
|
145
|
+
"--wui-dark-chart-seq-2": "Dark-mode second step of the magnitude ramp for heatmap and calendar cells.",
|
|
146
|
+
"--wui-dark-chart-seq-3": "Dark-mode third step of the magnitude ramp for heatmap and calendar cells.",
|
|
147
|
+
"--wui-dark-chart-seq-4": "Dark-mode fourth step of the magnitude ramp for heatmap and calendar cells.",
|
|
148
|
+
"--wui-dark-chart-seq-5": "Dark-mode fifth step of the magnitude ramp for heatmap and calendar cells.",
|
|
149
|
+
"--wui-dark-chart-seq-6": "Dark-mode strongest step of the magnitude ramp for heatmap and calendar cells.",
|
|
150
|
+
"--wui-dark-field-border": "Resting border of input-like controls in dark mode.",
|
|
151
|
+
"--wui-dark-field-border-hover": "Hover border of input-like controls in dark mode.",
|
|
152
|
+
"--wui-dark-primary": "Primary as text, rings, focus borders and the fill under dark ink in dark mode.",
|
|
153
|
+
"--wui-dark-primary-hover": "Primary fill while it is hovered in dark mode.",
|
|
154
|
+
"--wui-dark-progress-track": "Unfilled track of a progress bar or meter in dark mode.",
|
|
155
|
+
"--wui-dark-shadow-thumb": "Slider thumb shadow in dark mode, drawn with light ink.",
|
|
156
|
+
"--wui-dark-shadow-thumb-hover": "Slider thumb shadow while it is hovered in dark mode.",
|
|
157
|
+
"--wui-dark-text": "Primary body text colour in dark mode.",
|
|
158
|
+
"--wui-dark-text-muted": "Secondary text colour in dark mode.",
|
|
159
|
+
"--wui-dark-text-subtle": "Tertiary text colour in dark mode, for hints and captions.",
|
|
160
|
+
"--wui-disabled-opacity": "Opacity of a control that dims as a whole when disabled.",
|
|
161
|
+
"--wui-ease-elastic": "Overshooting easing for the tab ink bar's spring into place.",
|
|
162
|
+
"--wui-ease-out-quart": "Easing curve matching the locked design's motion exports.",
|
|
163
|
+
"--wui-ease-ui": "Easing curve for interface transitions.",
|
|
164
|
+
"--wui-fg-2": "Marketing alias of the primary body text ink.",
|
|
165
|
+
"--wui-fg-3": "Marketing alias of the secondary text ink.",
|
|
166
|
+
"--wui-fg-4": "Marketing alias of the tertiary text ink.",
|
|
167
|
+
"--wui-fg-5": "Marketing alias of the faintest text ink.",
|
|
168
|
+
"--wui-field-bg": "Resting fill of every input-like control, such as fields, selects and textareas.",
|
|
169
|
+
"--wui-field-border": "Resting border of every input-like control.",
|
|
170
|
+
"--wui-field-border-hover": "Hover border of every input-like control.",
|
|
171
|
+
"--wui-field-radius": "Corner radius of every input-like control.",
|
|
172
|
+
"--wui-field-radius-lg": "Corner radius of a large input-like control.",
|
|
173
|
+
"--wui-field-radius-sm": "Corner radius of a small input-like control.",
|
|
174
|
+
"--wui-first-day": "Weekday calendars start their week on, from 0 for Sunday to 6 for Saturday.",
|
|
175
|
+
"--wui-focus-ring-inset": "Offset that draws the focus ring inside a scrolling container.",
|
|
176
|
+
"--wui-focus-ring-offset": "Gap between a control and its keyboard focus ring.",
|
|
177
|
+
"--wui-focus-ring-width": "Width of the keyboard focus ring.",
|
|
178
|
+
"--wui-font-display": "Display typeface for headings marked as display text.",
|
|
179
|
+
"--wui-fs-2xl": "Double extra-large step of the fluid type scale; a product opts in per element.",
|
|
180
|
+
"--wui-fs-3xl": "Triple extra-large step of the fluid type scale; a product opts in per element.",
|
|
181
|
+
"--wui-fs-base": "Body-size step of the fluid type scale, close to Bootstrap's 1rem.",
|
|
182
|
+
"--wui-fs-lg": "Large step of the fluid type scale; a product opts in per element.",
|
|
183
|
+
"--wui-fs-sm": "Small step of the fluid type scale; a product opts in per element.",
|
|
184
|
+
"--wui-fs-xl": "Extra-large step of the fluid type scale; a product opts in per element.",
|
|
185
|
+
"--wui-fs-xs": "Extra-small step of the fluid type scale; a product opts in per element.",
|
|
186
|
+
"--wui-hero-gradient": "Background gradient of the hero band on marketing pages.",
|
|
187
|
+
"--wui-info": "Vivid info fill for badges, dots and info buttons.",
|
|
188
|
+
"--wui-info-10": "Info tint 10, the soft background of info alerts and badges.",
|
|
189
|
+
"--wui-info-20": "Info tint 20 for soft fills behind info alerts and badges.",
|
|
190
|
+
"--wui-info-30": "Info tint 30 for soft fills and borders of alerts and badges.",
|
|
191
|
+
"--wui-info-5": "Faintest info tint, for hover washes and soft info backgrounds.",
|
|
192
|
+
"--wui-info-50": "Info tint 50 for borders and the strongest soft info fill.",
|
|
193
|
+
"--wui-info-active": "Info ink for icons and active states on light surfaces.",
|
|
194
|
+
"--wui-info-text": "Info colour as text on light surfaces.",
|
|
195
|
+
"--wui-ink": "Pure black ink, the highest-contrast text colour.",
|
|
196
|
+
"--wui-neutral-bg-dark": "Muted background of table emphasis rows and mega-menu hover.",
|
|
197
|
+
"--wui-neutral-bg-light": "Faint background for table emphasis and mega-menu hover.",
|
|
198
|
+
"--wui-neutral-border-dark": "Border tone of table emphasis rows and dividers.",
|
|
199
|
+
"--wui-neutral-border-light": "Faintest border tone, for dividers.",
|
|
200
|
+
"--wui-press-duration": "Duration of the pressed feedback on a control.",
|
|
201
|
+
"--wui-press-scale": "Scale a control shrinks to while it is pressed.",
|
|
202
|
+
"--wui-primary": "Brand primary fill for primary buttons, selected states and the first chart series.",
|
|
203
|
+
"--wui-primary-10": "Pale soft primary fill or border tint that follows dark mode.",
|
|
204
|
+
"--wui-primary-15": "Lighter soft primary fill or border tint that follows dark mode.",
|
|
205
|
+
"--wui-primary-20": "Light soft primary fill or border tint that follows dark mode.",
|
|
206
|
+
"--wui-primary-30": "Medium soft primary fill or border tint that follows dark mode.",
|
|
207
|
+
"--wui-primary-5": "Faintest soft primary fill or border tint that follows dark mode.",
|
|
208
|
+
"--wui-primary-50": "Strongest soft primary fill or border tint that follows dark mode.",
|
|
209
|
+
"--wui-primary-hover": "Primary fill while a control is hovered.",
|
|
210
|
+
"--wui-primary-ink": "Primary as text and small glyphs on light surfaces, passing AA contrast.",
|
|
211
|
+
"--wui-primary-pressed": "Primary fill while a control is pressed or active.",
|
|
212
|
+
"--wui-primary-text": "Text and icon colour on a solid primary fill, such as a primary button label.",
|
|
213
|
+
"--wui-progress-track": "Unfilled track of a progress bar or meter.",
|
|
214
|
+
"--wui-radius": "Default step of the corner radius scale.",
|
|
215
|
+
"--wui-radius-lg": "Large step of the corner radius scale.",
|
|
216
|
+
"--wui-radius-sm": "Small step of the corner radius scale.",
|
|
217
|
+
"--wui-radius-xl": "Extra-large step of the corner radius scale.",
|
|
218
|
+
"--wui-scrollbar": "Resting thumb colour of a thin scrollbar.",
|
|
219
|
+
"--wui-scrollbar-active": "Scrollbar thumb colour while it is dragged.",
|
|
220
|
+
"--wui-scrollbar-hover": "Scrollbar thumb colour while it is hovered.",
|
|
221
|
+
"--wui-shadow-card": "Shadow under in-page cards, none in this theme so cards stay flat.",
|
|
222
|
+
"--wui-shadow-card-lifted": "Shadow of a lifted card, none in this theme.",
|
|
223
|
+
"--wui-shadow-card-lifted-hover": "Shadow of a lifted card while it is hovered, none in this theme.",
|
|
224
|
+
"--wui-shadow-overlay": "Shadow of floating overlays such as menus and popovers.",
|
|
225
|
+
"--wui-shadow-overlay-lg": "Larger overlay shadow, for the largest floating surfaces.",
|
|
226
|
+
"--wui-shadow-thumb": "Shadow under a slider thumb and other small interactive elements.",
|
|
227
|
+
"--wui-shadow-thumb-hover": "Shadow under a slider thumb while it is hovered.",
|
|
228
|
+
"--wui-success": "Vivid success fill for badges, dots and success buttons.",
|
|
229
|
+
"--wui-success-10": "Success tint 10, the soft background of success alerts and badges.",
|
|
230
|
+
"--wui-success-20": "Success tint 20 for soft fills behind success alerts and badges.",
|
|
231
|
+
"--wui-success-30": "Success tint 30 for soft fills and borders of alerts and badges.",
|
|
232
|
+
"--wui-success-5": "Faintest success tint, for hover washes and soft success backgrounds.",
|
|
233
|
+
"--wui-success-50": "Success tint 50 for borders and the strongest soft success fill.",
|
|
234
|
+
"--wui-success-active": "Active success fill, the deepest vivid success tone.",
|
|
235
|
+
"--wui-success-strong": "Deep success fill behind white text, such as progress-bar labels.",
|
|
236
|
+
"--wui-success-text": "Success colour as text on light surfaces, darkened to pass AA.",
|
|
237
|
+
"--wui-surface-mute": "Neutral wash surface for marketing sections and panels.",
|
|
238
|
+
"--wui-surface-soft": "Soft tint surface for marketing callouts and mega-menu hover.",
|
|
239
|
+
"--wui-surface-violet": "Violet-tinted surface for marketing section accents and callout cards.",
|
|
240
|
+
"--wui-surface-violet-soft": "Near-white surface for marketing section accents.",
|
|
241
|
+
"--wui-table-pad": "Inset of the table wrapper and toolbar, which a table class can retune.",
|
|
242
|
+
"--wui-text-1": "Primary body text, a step softer than the heading ink.",
|
|
243
|
+
"--wui-text-2": "Secondary text for descriptions, sub-labels and muted copy.",
|
|
244
|
+
"--wui-text-3": "Tertiary text for hints, captions, labels, timestamps and placeholders.",
|
|
245
|
+
"--wui-text-4": "Decorative faint ink, not for text a person must read.",
|
|
246
|
+
"--wui-text-5": "Faintest ink, for decorative marks and the strong border tone.",
|
|
247
|
+
"--wui-text-heading": "Heading ink for page and section titles.",
|
|
248
|
+
"--wui-warning": "Vivid warning fill for badges, dots and warning buttons.",
|
|
249
|
+
"--wui-warning-10": "Warning tint 10, the soft background of warning alerts and badges.",
|
|
250
|
+
"--wui-warning-20": "Warning tint 20 for soft fills behind warning alerts and badges.",
|
|
251
|
+
"--wui-warning-30": "Warning tint 30 for soft fills and borders of alerts and badges.",
|
|
252
|
+
"--wui-warning-5": "Faintest warning tint, for hover washes and soft warning backgrounds.",
|
|
253
|
+
"--wui-warning-50": "Warning tint 50 for borders and the strongest soft warning fill.",
|
|
254
|
+
"--wui-warning-active": "Active warning fill, the deepest vivid warning tone.",
|
|
255
|
+
"--wui-warning-text": "Warning colour as text on light surfaces, darkened to pass AA.",
|
|
256
|
+
"--wui-z-dropdown": "Stacking layer of in-page dropdown menus.",
|
|
257
|
+
"--wui-z-fixed": "Stacking layer of fixed corner layers such as the consent banner.",
|
|
258
|
+
"--wui-z-menu": "Stacking layer of portalled select, date and phone menus and info tips.",
|
|
259
|
+
"--wui-z-modal": "Stacking layer of a modal dialog above its backdrop.",
|
|
260
|
+
"--wui-z-modal-backdrop": "Stacking layer of the dim behind a modal dialog.",
|
|
261
|
+
"--wui-z-popover": "Stacking layer of popovers, on the same rung as menus.",
|
|
262
|
+
"--wui-z-shell": "Stacking layer of the app shell base chrome and the splash.",
|
|
263
|
+
"--wui-z-shell-drawer": "Stacking layer of the mobile sidebar drawer.",
|
|
264
|
+
"--wui-z-shell-scrim": "Stacking layer of the dim behind the mobile drawer.",
|
|
265
|
+
"--wui-z-shell-sidebar": "Stacking layer of the desktop shell sidebar and its overflowing menus.",
|
|
266
|
+
"--wui-z-sticky": "Stacking layer of sticky page chrome such as headers.",
|
|
267
|
+
"--wui-z-toast": "Stacking layer of toast notifications, the topmost layer.",
|
|
268
|
+
"--wui-z-tooltip": "Stacking layer of tooltips, above menus and popovers.",
|
|
269
|
+
"--wui-z-tour": "Stacking layer of the product tour, above modals and below menus."
|
|
270
|
+
}
|