@skyux/theme 14.0.0-alpha.12 → 14.0.0-alpha.13

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.
Files changed (3) hide show
  1. package/css/sky.css +1134 -123
  2. package/css/themes/modern/styles.css +284 -334
  3. package/package.json +2 -2
package/css/sky.css CHANGED
@@ -1,3 +1,1137 @@
1
+ .sky-theme-modern.sky-theme-brand-base {
2
+ --sky-theme-space-inline-l: var(--sky-space-inline-l);
3
+ --sky-theme-space-inline-m: var(--sky-space-inline-m);
4
+ --sky-theme-space-inline-s: var(--sky-space-inline-s);
5
+ --sky-theme-space-inline-xl: var(--sky-space-inline-xl);
6
+ --sky-theme-space-inline-xs: var(--sky-space-inline-xs);
7
+ --sky-theme-space-inline-xxl: var(--sky-space-inline-xxl);
8
+ --sky-theme-space-inset-balanced-l: var(--sky-space-inset-balanced-l);
9
+ --sky-theme-space-inset-balanced-m: var(--sky-space-inset-balanced-m);
10
+ --sky-theme-space-inset-balanced-s: var(--sky-space-inset-balanced-s);
11
+ --sky-theme-space-inset-balanced-xl: var(--sky-space-inset-balanced-xl);
12
+ --sky-theme-space-inset-balanced-xs: var(--sky-space-inset-balanced-xs);
13
+ --sky-theme-space-stacked-l: var(--sky-space-stacked-l);
14
+ --sky-theme-space-stacked-m: var(--sky-space-stacked-m);
15
+ --sky-theme-space-stacked-s: var(--sky-space-stacked-s);
16
+ --sky-theme-space-stacked-xl: var(--sky-space-stacked-xl);
17
+ --sky-theme-space-stacked-xs: var(--sky-space-stacked-xs);
18
+ --sky-theme-space-stacked-xxl: var(--sky-space-stacked-xxl);
19
+ --sky-theme-space-conditional-input: var(--sky-space-inset-switch);
20
+ }
21
+
22
+ .sky-theme-modern.sky-theme-brand-base {
23
+ --sky-theme-font-style-em-style: italic;
24
+ --sky-theme-font-style-em-weight: 400;
25
+ --sky-theme-font-style-hint-m-style: italic;
26
+ --sky-theme-font-style-hint-m-weight: 400;
27
+ --sky-theme-font-style-hint-s-style: italic;
28
+ --sky-theme-font-style-hint-s-weight: 400;
29
+ --sky-theme-font-letter_spacing-hint-s: var(--sky-font-letter_spacing-hint-s);
30
+ --sky-theme-font-line_height-body-deemphasized-m: var(--sky-font-line_height-body-m);
31
+ --sky-theme-font-line_height-body-deemphasized-s: var(--sky-font-line_height-body-s);
32
+ --sky-theme-font-line_height-body-emphasized-m: var(--sky-font-line_height-body-m);
33
+ --sky-theme-font-line_height-body-emphasized-s: var(--sky-font-line_height-body-s);
34
+ --sky-theme-font-line_height-body-l: var(--sky-font-line_height-body-l);
35
+ --sky-theme-font-line_height-body-m: var(--sky-font-line_height-body-m);
36
+ --sky-theme-font-line_height-body-s: var(--sky-font-line_height-body-s);
37
+ --sky-theme-font-line_height-display-1: var(--sky-font-line_height-display-1);
38
+ --sky-theme-font-line_height-display-2: var(--sky-font-line_height-display-2);
39
+ --sky-theme-font-line_height-display-3: var(--sky-font-line_height-display-3);
40
+ --sky-theme-font-line_height-display-4: var(--sky-font-line_height-display-4);
41
+ --sky-theme-font-line_height-heading-1: var(--sky-font-line_height-heading-1);
42
+ --sky-theme-font-line_height-heading-2: var(--sky-font-line_height-heading-2);
43
+ --sky-theme-font-line_height-heading-3: var(--sky-font-line_height-heading-3);
44
+ --sky-theme-font-line_height-heading-4: var(--sky-font-line_height-heading-4);
45
+ --sky-theme-font-line_height-heading-5: var(--sky-font-line_height-heading-5);
46
+ --sky-theme-font-line_height-hint-m: var(--sky-font-line_height-hint-m);
47
+ --sky-theme-font-line_height-hint-s: var(--sky-font-line_height-hint-s);
48
+ --sky-theme-font-line_height-paragraph-m: var(--sky-font-line_height-paragraph-m);
49
+ --sky-theme-font-size-body-deemphasized-m: var(--sky-font-size-body-m);
50
+ --sky-theme-font-size-body-deemphasized-s: var(--sky-font-size-body-s);
51
+ --sky-theme-font-size-body-emphasized-m: var(--sky-font-size-body-m);
52
+ --sky-theme-font-size-body-emphasized-s: var(--sky-font-size-body-s);
53
+ --sky-theme-font-size-body-l: var(--sky-font-size-body-l);
54
+ --sky-theme-font-size-body-m: var(--sky-font-size-body-m);
55
+ --sky-theme-font-size-body-s: var(--sky-font-size-body-s);
56
+ --sky-theme-font-size-display-1: var(--sky-font-size-display-1);
57
+ --sky-theme-font-size-display-2: var(--sky-font-size-display-2);
58
+ --sky-theme-font-size-display-3: var(--sky-font-size-display-3);
59
+ --sky-theme-font-size-display-4: var(--sky-font-size-display-4);
60
+ --sky-theme-font-size-heading-1: var(--sky-font-size-heading-1);
61
+ --sky-theme-font-size-heading-2: var(--sky-font-size-heading-2);
62
+ --sky-theme-font-size-heading-3: var(--sky-font-size-heading-3);
63
+ --sky-theme-font-size-heading-4: var(--sky-font-size-heading-4);
64
+ --sky-theme-font-size-heading-5: var(--sky-font-size-heading-5);
65
+ --sky-theme-font-size-hint-m: var(--sky-font-size-hint-m);
66
+ --sky-theme-font-size-hint-s: var(--sky-font-size-hint-s);
67
+ --sky-theme-font-style-strong: var(--sky-font-style-strong);
68
+ --sky-theme-font-weight-body-deemphasized-m: var(--sky-font-style-body-m);
69
+ --sky-theme-font-weight-body-deemphasized-s: var(--sky-font-style-body-s);
70
+ --sky-theme-font-weight-body-emphasized-m: var(--sky-font-style-emphasized);
71
+ --sky-theme-font-weight-body-emphasized-s: var(--sky-font-style-emphasized);
72
+ --sky-theme-font-weight-body-l: var(--sky-font-style-body-l);
73
+ --sky-theme-font-weight-body-m: var(--sky-font-style-body-m);
74
+ --sky-theme-font-weight-body-s: var(--sky-font-style-body-s);
75
+ --sky-theme-font-weight-display-1: var(--sky-font-style-display-1);
76
+ --sky-theme-font-weight-display-2: var(--sky-font-style-display-2);
77
+ --sky-theme-font-weight-display-3: var(--sky-font-style-display-3);
78
+ --sky-theme-font-weight-display-4: var(--sky-font-style-display-4);
79
+ --sky-theme-font-weight-heading-1: var(--sky-font-style-heading-1);
80
+ --sky-theme-font-weight-heading-2: var(--sky-font-style-heading-2);
81
+ --sky-theme-font-weight-heading-3: var(--sky-font-style-heading-3);
82
+ --sky-theme-font-weight-heading-4: var(--sky-font-style-heading-4);
83
+ --sky-theme-font-weight-heading-5: var(--sky-font-style-heading-5);
84
+ --sky-theme-font-family-body-deemphasized-m: var(--sky-font-family-primary);
85
+ --sky-theme-font-family-body-deemphasized-s: var(--sky-font-family-primary);
86
+ --sky-theme-font-family-body-emphasized-m: var(--sky-font-family-primary);
87
+ --sky-theme-font-family-body-emphasized-s: var(--sky-font-family-primary);
88
+ --sky-theme-font-family-body-l: var(--sky-font-family-primary);
89
+ --sky-theme-font-family-body-m: var(--sky-font-family-primary);
90
+ --sky-theme-font-family-body-s: var(--sky-font-family-primary);
91
+ --sky-theme-font-family-display-1: var(--sky-font-family-primary);
92
+ --sky-theme-font-family-display-2: var(--sky-font-family-primary);
93
+ --sky-theme-font-family-display-3: var(--sky-font-family-primary);
94
+ --sky-theme-font-family-display-4: var(--sky-font-family-primary);
95
+ --sky-theme-font-family-heading-1: var(--sky-font-family-primary);
96
+ --sky-theme-font-family-heading-2: var(--sky-font-family-primary);
97
+ --sky-theme-font-family-heading-3: var(--sky-font-family-primary);
98
+ --sky-theme-font-family-heading-4: var(--sky-font-family-primary);
99
+ --sky-theme-font-family-heading-5: var(--sky-font-family-primary);
100
+ --sky-theme-font-family-hint-m: var(--sky-font-family-primary);
101
+ --sky-theme-font-family-hint-s: var(--sky-font-family-primary);
102
+ --sky-theme-font-family-primary: var(--sky-font-family-primary);
103
+ }
104
+
105
+ .sky-theme-modern.sky-theme-brand-base {
106
+ --sky-theme-elevation-overflow: var(--sky-elevation-overflow);
107
+ --sky-theme-elevation-overlay-100: var(--sky-elevation-overlay-100);
108
+ --sky-theme-elevation-overlay-200: var(--sky-elevation-overlay-200);
109
+ --sky-theme-elevation-overlay-300: var(--sky-elevation-overlay-300);
110
+ --sky-theme-elevation-raised-100: var(--sky-elevation-raised-100);
111
+ }
112
+
113
+ .sky-theme-modern.sky-theme-brand-base {
114
+ --sky-theme-color-background-container-backdrop: var(--sky-color-background-container-backdrop);
115
+ --sky-theme-color-background-container-danger: var(--sky-color-background-container-danger);
116
+ --sky-theme-color-background-container-default: var(--sky-color-background-container-base);
117
+ --sky-theme-color-background-container-dimmed: var(--sky-color-background-container-dimmed);
118
+ --sky-theme-color-background-container-info: var(--sky-color-background-container-info);
119
+ --sky-theme-color-background-container-success: var(--sky-color-background-container-success);
120
+ --sky-theme-color-background-container-warning: var(--sky-color-background-container-warning);
121
+ --sky-theme-color-background-disabled: var(--sky-color-background-disabled);
122
+ --sky-theme-color-background-icon_matte-action-soft: var(--sky-color-background-icon_matte-action-soft);
123
+ --sky-theme-color-background-icon_matte-danger: var(--sky-color-background-icon_matte-danger);
124
+ --sky-theme-color-background-icon_matte-info: var(--sky-color-background-icon_matte-info);
125
+ --sky-theme-color-background-icon_matte-success: var(--sky-color-background-icon_matte-success);
126
+ --sky-theme-color-background-icon_matte-warning: var(--sky-color-background-icon_matte-warning);
127
+ --sky-theme-color-background-page: var(--sky-color-background-page);
128
+ --sky-theme-color-border-container-default: var(--sky-color-border-container-base);
129
+ --sky-theme-color-border-danger: var(--sky-color-border-danger);
130
+ --sky-theme-color-border-disabled: var(--sky-color-border-disabled);
131
+ --sky-theme-color-border-divider-default: var(--sky-color-border-divider);
132
+ --sky-theme-color-border-divider-soft: var(--sky-color-border-separator-row);
133
+ --sky-theme-color-border-info: var(--sky-color-border-info);
134
+ --sky-theme-color-border-success: var(--sky-color-border-success);
135
+ --sky-theme-color-border-warning: var(--sky-color-border-warning);
136
+ --sky-theme-color-classify-1-heavy: var(--sky-color-classify-1-heavy);
137
+ --sky-theme-color-classify-1-soft: var(--sky-color-classify-1-soft);
138
+ --sky-theme-color-classify-2-heavy: var(--sky-color-classify-2-heavy);
139
+ --sky-theme-color-classify-2-soft: var(--sky-color-classify-2-soft);
140
+ --sky-theme-color-classify-3-heavy: var(--sky-color-classify-3-heavy);
141
+ --sky-theme-color-classify-3-soft: var(--sky-color-classify-3-soft);
142
+ --sky-theme-color-classify-4-heavy: var(--sky-color-classify-4-heavy);
143
+ --sky-theme-color-classify-4-soft: var(--sky-color-classify-4-soft);
144
+ --sky-theme-color-classify-5-heavy: var(--sky-color-classify-5-heavy);
145
+ --sky-theme-color-classify-5-soft: var(--sky-color-classify-5-soft);
146
+ --sky-theme-color-classify-6-heavy: var(--sky-color-classify-6-heavy);
147
+ --sky-theme-color-classify-6-soft: var(--sky-color-classify-6-soft);
148
+ --sky-theme-color-classify-7-heavy: var(--sky-color-classify-7-heavy);
149
+ --sky-theme-color-classify-7-soft: var(--sky-color-classify-7-soft);
150
+ --sky-theme-color-icon-action: var(--sky-color-icon-action);
151
+ --sky-theme-color-icon-danger: var(--sky-color-icon-danger);
152
+ --sky-theme-color-icon-deemphasized: var(--sky-color-icon-deemphasized);
153
+ --sky-theme-color-icon-default: var(--sky-color-icon-default);
154
+ --sky-theme-color-icon-info: var(--sky-color-icon-info);
155
+ --sky-theme-color-icon-inverse: var(--sky-color-icon-inverse);
156
+ --sky-theme-color-icon-success: var(--sky-color-icon-success);
157
+ --sky-theme-color-text-action: var(--sky-color-text-action);
158
+ --sky-theme-color-text-action_contrast: var(--sky-color-text-action_contrast);
159
+ --sky-theme-color-text-deemphasized: var(--sky-color-text-deemphasized);
160
+ --sky-theme-color-text-default: var(--sky-color-text-default);
161
+ --sky-theme-color-text-heading: var(--sky-color-text-heading);
162
+ --sky-theme-color-text-inverse: var(--sky-color-text-inverse);
163
+ --sky-theme-color-viz-axis: var(--sky-color-viz-axis);
164
+ --sky-theme-color-viz-category-1: var(--sky-color-viz-category-1);
165
+ --sky-theme-color-viz-category-2: var(--sky-color-viz-category-2);
166
+ --sky-theme-color-viz-category-3: var(--sky-color-viz-category-3);
167
+ --sky-theme-color-viz-category-4: var(--sky-color-viz-category-4);
168
+ --sky-theme-color-viz-category-5: var(--sky-color-viz-category-5);
169
+ --sky-theme-color-viz-category-6: var(--sky-color-viz-category-6);
170
+ --sky-theme-color-viz-category-7: var(--sky-color-viz-category-7);
171
+ --sky-theme-color-viz-category-8: var(--sky-color-viz-category-8);
172
+ --sky-theme-color-viz-diverge-neg-1: var(--sky-color-viz-diverge-neg-1);
173
+ --sky-theme-color-viz-diverge-neg-10: var(--sky-color-viz-diverge-neg-10);
174
+ --sky-theme-color-viz-diverge-neg-2: var(--sky-color-viz-diverge-neg-2);
175
+ --sky-theme-color-viz-diverge-neg-3: var(--sky-color-viz-diverge-neg-3);
176
+ --sky-theme-color-viz-diverge-neg-4: var(--sky-color-viz-diverge-neg-4);
177
+ --sky-theme-color-viz-diverge-neg-5: var(--sky-color-viz-diverge-neg-5);
178
+ --sky-theme-color-viz-diverge-neg-6: var(--sky-color-viz-diverge-neg-6);
179
+ --sky-theme-color-viz-diverge-neg-7: var(--sky-color-viz-diverge-neg-7);
180
+ --sky-theme-color-viz-diverge-neg-8: var(--sky-color-viz-diverge-neg-8);
181
+ --sky-theme-color-viz-diverge-neg-9: var(--sky-color-viz-diverge-neg-9);
182
+ --sky-theme-color-viz-diverge-pos-1: var(--sky-color-viz-diverge-pos-1);
183
+ --sky-theme-color-viz-diverge-pos-10: var(--sky-color-viz-diverge-pos-10);
184
+ --sky-theme-color-viz-diverge-pos-2: var(--sky-color-viz-diverge-pos-2);
185
+ --sky-theme-color-viz-diverge-pos-3: var(--sky-color-viz-diverge-pos-3);
186
+ --sky-theme-color-viz-diverge-pos-4: var(--sky-color-viz-diverge-pos-4);
187
+ --sky-theme-color-viz-diverge-pos-5: var(--sky-color-viz-diverge-pos-5);
188
+ --sky-theme-color-viz-diverge-pos-6: var(--sky-color-viz-diverge-pos-6);
189
+ --sky-theme-color-viz-diverge-pos-7: var(--sky-color-viz-diverge-pos-7);
190
+ --sky-theme-color-viz-diverge-pos-8: var(--sky-color-viz-diverge-pos-8);
191
+ --sky-theme-color-viz-diverge-pos-9: var(--sky-color-viz-diverge-pos-9);
192
+ --sky-theme-color-viz-gridline: var(--sky-color-viz-gridline);
193
+ --sky-theme-color-viz-marker: var(--sky-color-viz-marker);
194
+ --sky-theme-color-viz-sequence-1: var(--sky-color-viz-sequence-1);
195
+ --sky-theme-color-viz-sequence-10: var(--sky-color-viz-sequence-10);
196
+ --sky-theme-color-viz-sequence-2: var(--sky-color-viz-sequence-2);
197
+ --sky-theme-color-viz-sequence-3: var(--sky-color-viz-sequence-3);
198
+ --sky-theme-color-viz-sequence-4: var(--sky-color-viz-sequence-4);
199
+ --sky-theme-color-viz-sequence-5: var(--sky-color-viz-sequence-5);
200
+ --sky-theme-color-viz-sequence-6: var(--sky-color-viz-sequence-6);
201
+ --sky-theme-color-viz-sequence-7: var(--sky-color-viz-sequence-7);
202
+ --sky-theme-color-viz-sequence-8: var(--sky-color-viz-sequence-8);
203
+ --sky-theme-color-viz-sequence-9: var(--sky-color-viz-sequence-9);
204
+ }
205
+
206
+ .sky-theme-modern.sky-theme-brand-base {
207
+ --sky-theme-border-container-default: var(--sky-border-width-container-base) var(--sky-border-style-divider) var(--sky-color-border-container-base);
208
+ --sky-theme-border-danger: var(--sky-border-width-container-base) var(--sky-border-style-divider) var(--sky-color-border-danger);
209
+ --sky-theme-border-divider-default: var(--sky-border-width-divider) var(--sky-border-style-divider) var(--sky-color-border-divider);
210
+ --sky-theme-border-divider-soft: var(--sky-border-width-separator-row) var(--sky-border-style-separator-row) var(--sky-color-border-separator-row);
211
+ --sky-theme-border-info: var(--sky-border-width-container-base) var(--sky-border-style-divider) var(--sky-color-border-info);
212
+ --sky-theme-border-success: var(--sky-border-width-container-base) var(--sky-border-style-divider) var(--sky-color-border-success);
213
+ --sky-theme-border-warning: var(--sky-border-width-container-base) var(--sky-border-style-divider) var(--sky-color-border-warning);
214
+ --sky-theme-border-radius-m: var(--sky-border-radius-m);
215
+ --sky-theme-border-radius-pill: var(--sky-border-radius-pill);
216
+ --sky-theme-border-radius-round: var(--sky-border-radius-round);
217
+ --sky-theme-border-radius-s: var(--sky-border-radius-s);
218
+ --sky-theme-border-radius-xs: var(--sky-border-radius-xs);
219
+ --sky-theme-border-style-accent: var(--sky-border-style-accent);
220
+ --sky-theme-border-style-divider-default: var(--sky-border-style-divider);
221
+ --sky-theme-border-style-divider-soft: var(--sky-border-style-separator-row);
222
+ --sky-theme-border-width-accent: var(--sky-border-width-accent);
223
+ --sky-theme-border-width-container-default: var(--sky-border-width-container-base);
224
+ --sky-theme-border-width-divider-default: var(--sky-border-width-divider);
225
+ --sky-theme-border-width-divider-soft: var(--sky-border-width-separator-row);
226
+ --sky-theme-border-width-emphasized: var(--sky-border-width-emphasized);
227
+ }
228
+
229
+ .sky-theme-default {
230
+ --sky-theme-space-conditional-input: 27px;
231
+ --sky-theme-space-inline-l: 15px;
232
+ --sky-theme-space-inline-m: 12px;
233
+ --sky-theme-space-inline-s: 10px;
234
+ --sky-theme-space-inline-xl: 20px;
235
+ --sky-theme-space-inline-xs: 5px;
236
+ --sky-theme-space-inline-xxl: 40px;
237
+ --sky-theme-space-inset-balanced-l: 18px;
238
+ --sky-theme-space-inset-balanced-m: 15px;
239
+ --sky-theme-space-inset-balanced-s: 10px;
240
+ --sky-theme-space-inset-balanced-xl: 20px;
241
+ --sky-theme-space-inset-balanced-xs: 5px;
242
+ --sky-theme-space-stacked-l: 10px;
243
+ --sky-theme-space-stacked-m: 9px;
244
+ --sky-theme-space-stacked-s: 8px;
245
+ --sky-theme-space-stacked-xl: 20px;
246
+ --sky-theme-space-stacked-xs: 5px;
247
+ --sky-theme-space-stacked-xxl: 40px;
248
+ }
249
+
250
+ .sky-theme-default {
251
+ --sky-theme-font-family-body-deemphasized-m: 'BLKB Sans', 'Helvetica Neue', Arial, sans-serif;
252
+ --sky-theme-font-family-body-deemphasized-s: 'BLKB Sans', 'Helvetica Neue', Arial, sans-serif;
253
+ --sky-theme-font-family-body-emphasized-m: 'BLKB Sans', 'Helvetica Neue', Arial, sans-serif;
254
+ --sky-theme-font-family-body-emphasized-s: 'BLKB Sans', 'Helvetica Neue', Arial, sans-serif;
255
+ --sky-theme-font-family-body-l: 'BLKB Sans', 'Helvetica Neue', Arial, sans-serif;
256
+ --sky-theme-font-family-body-m: 'BLKB Sans', 'Helvetica Neue', Arial, sans-serif;
257
+ --sky-theme-font-family-body-s: 'BLKB Sans', 'Helvetica Neue', Arial, sans-serif;
258
+ --sky-theme-font-family-display-1: 'BLKB Sans Condensed', 'Helvetica Neue Condensed', 'Arial Narrow';
259
+ --sky-theme-font-family-display-2: 'BLKB Sans Condensed', 'Helvetica Neue Condensed', 'Arial Narrow';
260
+ --sky-theme-font-family-display-3: 'BLKB Sans Condensed', 'Helvetica Neue Condensed', 'Arial Narrow';
261
+ --sky-theme-font-family-display-4: 'BLKB Sans', 'Helvetica Neue', Arial, sans-serif;
262
+ --sky-theme-font-family-heading-1: 'BLKB Sans Condensed', 'Helvetica Neue Condensed', 'Arial Narrow';
263
+ --sky-theme-font-family-heading-2: 'BLKB Sans Condensed', 'Helvetica Neue Condensed', 'Arial Narrow';
264
+ --sky-theme-font-family-heading-3: 'BLKB Sans', 'Helvetica Neue', Arial, sans-serif;
265
+ --sky-theme-font-family-heading-4: 'BLKB Sans', 'Helvetica Neue', Arial, sans-serif;
266
+ --sky-theme-font-family-heading-5: 'BLKB Sans', 'Helvetica Neue', Arial, sans-serif;
267
+ --sky-theme-font-family-hint-m: 'BLKB Sans', 'Helvetica Neue', Arial, sans-serif;
268
+ --sky-theme-font-family-hint-s: 'BLKB Sans', 'Helvetica Neue', Arial, sans-serif;
269
+ --sky-theme-font-family-primary: 'BLKB Sans', 'Helvetica Neue', Arial, sans-serif;
270
+ --sky-theme-font-letter_spacing-hint-s: inherit;
271
+ --sky-theme-font-line_height-body-deemphasized-m: inherit;
272
+ --sky-theme-font-line_height-body-deemphasized-s: inherit;
273
+ --sky-theme-font-line_height-body-emphasized-m: inherit;
274
+ --sky-theme-font-line_height-body-emphasized-s: inherit;
275
+ --sky-theme-font-line_height-body-l: inherit;
276
+ --sky-theme-font-line_height-body-m: inherit;
277
+ --sky-theme-font-line_height-body-s: inherit;
278
+ --sky-theme-font-line_height-display-1: inherit;
279
+ --sky-theme-font-line_height-display-2: inherit;
280
+ --sky-theme-font-line_height-display-3: inherit;
281
+ --sky-theme-font-line_height-display-4: inherit;
282
+ --sky-theme-font-line_height-heading-1: inherit;
283
+ --sky-theme-font-line_height-heading-2: inherit;
284
+ --sky-theme-font-line_height-heading-3: inherit;
285
+ --sky-theme-font-line_height-heading-4: inherit;
286
+ --sky-theme-font-line_height-heading-5: inherit;
287
+ --sky-theme-font-line_height-hint-m: inherit;
288
+ --sky-theme-font-line_height-hint-s: inherit;
289
+ --sky-theme-font-line_height-paragraph-m: normal;
290
+ --sky-theme-font-size-body-deemphasized-m: 15px;
291
+ --sky-theme-font-size-body-deemphasized-s: 13px;
292
+ --sky-theme-font-size-body-emphasized-m: 15px;
293
+ --sky-theme-font-size-body-emphasized-s: 13px;
294
+ --sky-theme-font-size-body-l: 16px;
295
+ --sky-theme-font-size-body-m: 15px;
296
+ --sky-theme-font-size-body-s: 13px;
297
+ --sky-theme-font-size-display-1: 34px;
298
+ --sky-theme-font-size-display-2: 26px;
299
+ --sky-theme-font-size-display-3: 22px;
300
+ --sky-theme-font-size-display-4: 16px;
301
+ --sky-theme-font-size-heading-1: 34px;
302
+ --sky-theme-font-size-heading-2: 26px;
303
+ --sky-theme-font-size-heading-3: 19px;
304
+ --sky-theme-font-size-heading-4: 16px;
305
+ --sky-theme-font-size-heading-5: 15px;
306
+ --sky-theme-font-size-hint-m: 15px;
307
+ --sky-theme-font-size-hint-s: 13px;
308
+ --sky-theme-font-style-em-style: italic;
309
+ --sky-theme-font-style-em-weight: 400;
310
+ --sky-theme-font-style-hint-m-style: italic;
311
+ --sky-theme-font-style-hint-m-weight: 400;
312
+ --sky-theme-font-style-hint-s-style: italic;
313
+ --sky-theme-font-style-hint-s-weight: 400;
314
+ --sky-theme-font-style-strong: 700;
315
+ --sky-theme-font-weight-body-deemphasized-m: 400;
316
+ --sky-theme-font-weight-body-deemphasized-s: 400;
317
+ --sky-theme-font-weight-body-emphasized-m: 600;
318
+ --sky-theme-font-weight-body-emphasized-s: 600;
319
+ --sky-theme-font-weight-body-l: 400;
320
+ --sky-theme-font-weight-body-m: 400;
321
+ --sky-theme-font-weight-body-s: 400;
322
+ --sky-theme-font-weight-display-1: 300;
323
+ --sky-theme-font-weight-display-2: 300;
324
+ --sky-theme-font-weight-display-3: 600;
325
+ --sky-theme-font-weight-display-4: 600;
326
+ --sky-theme-font-weight-heading-1: 300;
327
+ --sky-theme-font-weight-heading-2: 300;
328
+ --sky-theme-font-weight-heading-3: 300;
329
+ --sky-theme-font-weight-heading-4: 600;
330
+ --sky-theme-font-weight-heading-5: 400;
331
+ }
332
+
333
+ .sky-theme-default {
334
+ --sky-theme-elevation-overflow: 0 0 5px #0000004d;
335
+ --sky-theme-elevation-overlay-100: 0 0 5px #0000004d;
336
+ --sky-theme-elevation-overlay-200: none;
337
+ --sky-theme-elevation-overlay-300: none;
338
+ --sky-theme-elevation-raised-100: none;
339
+ }
340
+
341
+ .sky-theme-default {
342
+ --sky-theme-color-background-container-backdrop: #eeeeef;
343
+ --sky-theme-color-background-container-danger: #f7a08f;
344
+ --sky-theme-color-background-container-default: #ffffff;
345
+ --sky-theme-color-background-container-dimmed: #eeeeef;
346
+ --sky-theme-color-background-container-info: #81d4f7;
347
+ --sky-theme-color-background-container-success: #b7da9b;
348
+ --sky-theme-color-background-container-warning: #ffd597;
349
+ --sky-theme-color-background-disabled: #cdcfd2;
350
+ --sky-theme-color-background-icon_matte-action-soft: #c1e8fb;
351
+ --sky-theme-color-background-icon_matte-danger: #f7a08f;
352
+ --sky-theme-color-background-icon_matte-info: #81d4f7;
353
+ --sky-theme-color-background-icon_matte-success: #b7da9b;
354
+ --sky-theme-color-background-icon_matte-warning: #ffd597;
355
+ --sky-theme-color-background-page: #ffffff;
356
+ --sky-theme-color-border-container-default: #cdcfd2;
357
+ --sky-theme-color-border-danger: #ef4044;
358
+ --sky-theme-color-border-disabled: #cdcfd2;
359
+ --sky-theme-color-border-divider-default: #cdcfd2;
360
+ --sky-theme-color-border-divider-soft: #cdcfd2;
361
+ --sky-theme-color-border-info: #00b4f1;
362
+ --sky-theme-color-border-success: #72bf44;
363
+ --sky-theme-color-border-warning: #fbb034;
364
+ --sky-theme-color-classify-1-heavy: #046e6b;
365
+ --sky-theme-color-classify-1-soft: #abe9e7;
366
+ --sky-theme-color-classify-2-heavy: #8d4ec2;
367
+ --sky-theme-color-classify-2-soft: #e9d3fb;
368
+ --sky-theme-color-classify-3-heavy: #007894;
369
+ --sky-theme-color-classify-3-soft: #a8efff;
370
+ --sky-theme-color-classify-4-heavy: #a74500;
371
+ --sky-theme-color-classify-4-soft: #fcd7bd;
372
+ --sky-theme-color-classify-5-heavy: #a542a0;
373
+ --sky-theme-color-classify-5-soft: #fcd9fa;
374
+ --sky-theme-color-classify-6-heavy: #077e43;
375
+ --sky-theme-color-classify-6-soft: #a8f1cd;
376
+ --sky-theme-color-classify-7-heavy: #ae2e31;
377
+ --sky-theme-color-classify-7-soft: #f5cccd;
378
+ --sky-theme-color-icon-action: #0974a1;
379
+ --sky-theme-color-icon-danger: #ef4044;
380
+ --sky-theme-color-icon-deemphasized: #686c73;
381
+ --sky-theme-color-icon-default: #212327;
382
+ --sky-theme-color-icon-info: #00b4f1;
383
+ --sky-theme-color-icon-inverse: #ffffff;
384
+ --sky-theme-color-icon-success: #72bf44;
385
+ --sky-theme-color-text-action: #0974a1;
386
+ --sky-theme-color-text-action_contrast: #0974a1;
387
+ --sky-theme-color-text-deemphasized: #686c73;
388
+ --sky-theme-color-text-default: #212327;
389
+ --sky-theme-color-text-heading: #212327;
390
+ --sky-theme-color-text-inverse: #ffffff;
391
+ --sky-theme-color-viz-axis: #85888d;
392
+ --sky-theme-color-viz-category-1: #06a39e;
393
+ --sky-theme-color-viz-category-2: #6d3c96;
394
+ --sky-theme-color-viz-category-3: #5589dd;
395
+ --sky-theme-color-viz-category-4: #004252;
396
+ --sky-theme-color-viz-category-5: #ce5600;
397
+ --sky-theme-color-viz-category-6: #822325;
398
+ --sky-theme-color-viz-category-7: #c650c1;
399
+ --sky-theme-color-viz-category-8: #077e43;
400
+ --sky-theme-color-viz-diverge-neg-1: #fae7e8;
401
+ --sky-theme-color-viz-diverge-neg-10: #4a1415;
402
+ --sky-theme-color-viz-diverge-neg-2: #f5cccd;
403
+ --sky-theme-color-viz-diverge-neg-3: #f1b4b5;
404
+ --sky-theme-color-viz-diverge-neg-4: #ea9596;
405
+ --sky-theme-color-viz-diverge-neg-5: #e36d6f;
406
+ --sky-theme-color-viz-diverge-neg-6: #d93a3d;
407
+ --sky-theme-color-viz-diverge-neg-7: #ae2e31;
408
+ --sky-theme-color-viz-diverge-neg-8: #822325;
409
+ --sky-theme-color-viz-diverge-neg-9: #641b1c;
410
+ --sky-theme-color-viz-diverge-pos-1: #eef3fc;
411
+ --sky-theme-color-viz-diverge-pos-10: #0d2040;
412
+ --sky-theme-color-viz-diverge-pos-2: #d5e1f7;
413
+ --sky-theme-color-viz-diverge-pos-3: #aac4ee;
414
+ --sky-theme-color-viz-diverge-pos-4: #80a6e6;
415
+ --sky-theme-color-viz-diverge-pos-5: #5589dd;
416
+ --sky-theme-color-viz-diverge-pos-6: #2b6bd5;
417
+ --sky-theme-color-viz-diverge-pos-7: #2256aa;
418
+ --sky-theme-color-viz-diverge-pos-8: #1a4080;
419
+ --sky-theme-color-viz-diverge-pos-9: #112b55;
420
+ --sky-theme-color-viz-gridline: #d5d6d8;
421
+ --sky-theme-color-viz-marker: #1e2229;
422
+ --sky-theme-color-viz-sequence-1: #dcf6f5;
423
+ --sky-theme-color-viz-sequence-10: #022a28;
424
+ --sky-theme-color-viz-sequence-2: #abe9e7;
425
+ --sky-theme-color-viz-sequence-3: #60d5d2;
426
+ --sky-theme-color-viz-sequence-4: #07beb8;
427
+ --sky-theme-color-viz-sequence-5: #06a39e;
428
+ --sky-theme-color-viz-sequence-6: #058984;
429
+ --sky-theme-color-viz-sequence-7: #046e6b;
430
+ --sky-theme-color-viz-sequence-8: #035755;
431
+ --sky-theme-color-viz-sequence-9: #02413f;
432
+ }
433
+
434
+ .sky-theme-default {
435
+ --sky-theme-border-container-default: 1px solid #cdcfd2;
436
+ --sky-theme-border-danger: 1px solid #ef4044;
437
+ --sky-theme-border-divider-default: 1px solid #cdcfd2;
438
+ --sky-theme-border-divider-soft: 1px solid #cdcfd2;
439
+ --sky-theme-border-info: 1px solid #00b4f1;
440
+ --sky-theme-border-radius-m: 4px;
441
+ --sky-theme-border-radius-pill: 1000px;
442
+ --sky-theme-border-radius-round: 50%;
443
+ --sky-theme-border-radius-s: 4px;
444
+ --sky-theme-border-radius-xs: 4px;
445
+ --sky-theme-border-style-accent: solid;
446
+ --sky-theme-border-style-divider-default: solid;
447
+ --sky-theme-border-style-divider-soft: solid;
448
+ --sky-theme-border-success: 1px solid #72bf44;
449
+ --sky-theme-border-warning: 1px solid #fbb034;
450
+ --sky-theme-border-width-accent: 4px;
451
+ --sky-theme-border-width-container-default: 1px;
452
+ --sky-theme-border-width-divider-default: 1px;
453
+ --sky-theme-border-width-divider-soft: 1px;
454
+ --sky-theme-border-width-emphasized: 2px;
455
+ }
456
+
457
+ .sky-theme-margin-top-xs {
458
+ margin-top: var(--sky-theme-space-stacked-xs);
459
+ }
460
+
461
+ .sky-theme-margin-top-s {
462
+ margin-top: var(--sky-theme-space-stacked-s);
463
+ }
464
+
465
+ .sky-theme-margin-top-m {
466
+ margin-top: var(--sky-theme-space-stacked-m);
467
+ }
468
+
469
+ .sky-theme-margin-top-l {
470
+ margin-top: var(--sky-theme-space-stacked-l);
471
+ }
472
+
473
+ .sky-theme-margin-top-xl {
474
+ margin-top: var(--sky-theme-space-stacked-xl);
475
+ }
476
+
477
+ .sky-theme-margin-top-xxl {
478
+ margin-top: var(--sky-theme-space-stacked-xxl);
479
+ }
480
+
481
+ .sky-theme-margin-bottom-xs {
482
+ margin-bottom: var(--sky-theme-space-stacked-xs);
483
+ }
484
+
485
+ .sky-theme-margin-bottom-s {
486
+ margin-bottom: var(--sky-theme-space-stacked-s);
487
+ }
488
+
489
+ .sky-theme-margin-bottom-m {
490
+ margin-bottom: var(--sky-theme-space-stacked-m);
491
+ }
492
+
493
+ .sky-theme-margin-bottom-l {
494
+ margin-bottom: var(--sky-theme-space-stacked-l);
495
+ }
496
+
497
+ .sky-theme-margin-bottom-xl {
498
+ margin-bottom: var(--sky-theme-space-stacked-xl);
499
+ }
500
+
501
+ .sky-theme-margin-bottom-xxl {
502
+ margin-bottom: var(--sky-theme-space-stacked-xxl);
503
+ }
504
+
505
+ .sky-theme-margin-right-xs {
506
+ margin-right: var(--sky-theme-space-inline-xs);
507
+ }
508
+
509
+ .sky-theme-margin-right-s {
510
+ margin-right: var(--sky-theme-space-inline-s);
511
+ }
512
+
513
+ .sky-theme-margin-right-m {
514
+ margin-right: var(--sky-theme-space-inline-m);
515
+ }
516
+
517
+ .sky-theme-margin-right-l {
518
+ margin-right: var(--sky-theme-space-inline-l);
519
+ }
520
+
521
+ .sky-theme-margin-right-xl {
522
+ margin-right: var(--sky-theme-space-inline-xl);
523
+ }
524
+
525
+ .sky-theme-margin-right-xxl {
526
+ margin-right: var(--sky-theme-space-inline-xxl);
527
+ }
528
+
529
+ .sky-theme-margin-left-xs {
530
+ margin-left: var(--sky-theme-space-inline-xs);
531
+ }
532
+
533
+ .sky-theme-margin-left-s {
534
+ margin-left: var(--sky-theme-space-inline-s);
535
+ }
536
+
537
+ .sky-theme-margin-left-m {
538
+ margin-left: var(--sky-theme-space-inline-m);
539
+ }
540
+
541
+ .sky-theme-margin-left-l {
542
+ margin-left: var(--sky-theme-space-inline-l);
543
+ }
544
+
545
+ .sky-theme-margin-left-xl {
546
+ margin-left: var(--sky-theme-space-inline-xl);
547
+ }
548
+
549
+ .sky-theme-margin-left-xxl {
550
+ margin-left: var(--sky-theme-space-inline-xxl);
551
+ }
552
+
553
+ .sky-theme-padding-top-xs {
554
+ padding-top: var(--sky-theme-space-stacked-xs);
555
+ }
556
+
557
+ .sky-theme-padding-top-s {
558
+ padding-top: var(--sky-theme-space-stacked-s);
559
+ }
560
+
561
+ .sky-theme-padding-top-m {
562
+ padding-top: var(--sky-theme-space-stacked-m);
563
+ }
564
+
565
+ .sky-theme-padding-top-l {
566
+ padding-top: var(--sky-theme-space-stacked-l);
567
+ }
568
+
569
+ .sky-theme-padding-top-xl {
570
+ padding-top: var(--sky-theme-space-stacked-xl);
571
+ }
572
+
573
+ .sky-theme-padding-top-xxl {
574
+ padding-top: var(--sky-theme-space-stacked-xxl);
575
+ }
576
+
577
+ .sky-theme-padding-bottom-xs {
578
+ padding-bottom: var(--sky-theme-space-stacked-xs);
579
+ }
580
+
581
+ .sky-theme-padding-bottom-s {
582
+ padding-bottom: var(--sky-theme-space-stacked-s);
583
+ }
584
+
585
+ .sky-theme-padding-bottom-m {
586
+ padding-bottom: var(--sky-theme-space-stacked-m);
587
+ }
588
+
589
+ .sky-theme-padding-bottom-l {
590
+ padding-bottom: var(--sky-theme-space-stacked-l);
591
+ }
592
+
593
+ .sky-theme-padding-bottom-xl {
594
+ padding-bottom: var(--sky-theme-space-stacked-xl);
595
+ }
596
+
597
+ .sky-theme-padding-bottom-xxl {
598
+ padding-bottom: var(--sky-theme-space-stacked-xxl);
599
+ }
600
+
601
+ .sky-theme-padding-right-xs {
602
+ padding-right: var(--sky-theme-space-inline-xs);
603
+ }
604
+
605
+ .sky-theme-padding-right-s {
606
+ padding-right: var(--sky-theme-space-inline-s);
607
+ }
608
+
609
+ .sky-theme-padding-right-m {
610
+ padding-right: var(--sky-theme-space-inline-m);
611
+ }
612
+
613
+ .sky-theme-padding-right-l {
614
+ padding-right: var(--sky-theme-space-inline-l);
615
+ }
616
+
617
+ .sky-theme-padding-right-xl {
618
+ padding-right: var(--sky-theme-space-inline-xl);
619
+ }
620
+
621
+ .sky-theme-padding-right-xxl {
622
+ padding-right: var(--sky-theme-space-inline-xxl);
623
+ }
624
+
625
+ .sky-theme-padding-left-xs {
626
+ padding-left: var(--sky-theme-space-inline-xs);
627
+ }
628
+
629
+ .sky-theme-padding-left-s {
630
+ padding-left: var(--sky-theme-space-inline-s);
631
+ }
632
+
633
+ .sky-theme-padding-left-m {
634
+ padding-left: var(--sky-theme-space-inline-m);
635
+ }
636
+
637
+ .sky-theme-padding-left-l {
638
+ padding-left: var(--sky-theme-space-inline-l);
639
+ }
640
+
641
+ .sky-theme-padding-left-xl {
642
+ padding-left: var(--sky-theme-space-inline-xl);
643
+ }
644
+
645
+ .sky-theme-padding-left-xxl {
646
+ padding-left: var(--sky-theme-space-inline-xxl);
647
+ }
648
+
649
+ .sky-theme-padding-inset-balanced-xs {
650
+ padding: var(--sky-theme-space-inset-balanced-xs);
651
+ }
652
+
653
+ .sky-theme-padding-inset-balanced-s {
654
+ padding: var(--sky-theme-space-inset-balanced-s);
655
+ }
656
+
657
+ .sky-theme-padding-inset-balanced-m {
658
+ padding: var(--sky-theme-space-inset-balanced-m);
659
+ }
660
+
661
+ .sky-theme-padding-inset-balanced-l {
662
+ padding: var(--sky-theme-space-inset-balanced-l);
663
+ }
664
+
665
+ .sky-theme-padding-inset-balanced-xl {
666
+ padding: var(--sky-theme-space-inset-balanced-xl);
667
+ }
668
+
669
+ .sky-theme-padding-conditional-input {
670
+ padding-left: var(--sky-theme-space-conditional-input);
671
+ }
672
+
673
+ .sky-theme-font-heading-1 {
674
+ font-weight: var(--sky-theme-font-weight-heading-1);
675
+ font-size: var(--sky-theme-font-size-heading-1);
676
+ line-height: var(--sky-theme-font-line_height-heading-1);
677
+ font-family: var(--sky-theme-font-family-heading-1);
678
+ color: var(--sky-theme-color-text-heading);
679
+ }
680
+
681
+ .sky-theme-font-heading-2 {
682
+ font-weight: var(--sky-theme-font-weight-heading-2);
683
+ font-size: var(--sky-theme-font-size-heading-2);
684
+ line-height: var(--sky-theme-font-line_height-heading-2);
685
+ font-family: var(--sky-theme-font-family-heading-2);
686
+ color: var(--sky-theme-color-text-heading);
687
+ }
688
+
689
+ .sky-theme-font-heading-3 {
690
+ font-weight: var(--sky-theme-font-weight-heading-3);
691
+ font-size: var(--sky-theme-font-size-heading-3);
692
+ line-height: var(--sky-theme-font-line_height-heading-3);
693
+ font-family: var(--sky-theme-font-family-heading-3);
694
+ color: var(--sky-theme-color-text-heading);
695
+ }
696
+
697
+ .sky-theme-font-heading-4 {
698
+ font-weight: var(--sky-theme-font-weight-heading-4);
699
+ font-size: var(--sky-theme-font-size-heading-4);
700
+ line-height: var(--sky-theme-font-line_height-heading-4);
701
+ font-family: var(--sky-theme-font-family-heading-4);
702
+ color: var(--sky-theme-color-text-heading);
703
+ }
704
+
705
+ .sky-theme-font-heading-5 {
706
+ font-weight: var(--sky-theme-font-weight-heading-5);
707
+ font-size: var(--sky-theme-font-size-heading-5);
708
+ line-height: var(--sky-theme-font-line_height-heading-5);
709
+ font-family: var(--sky-theme-font-family-heading-5);
710
+ color: var(--sky-theme-color-text-heading);
711
+ }
712
+
713
+ .sky-theme-font-body-m {
714
+ font-weight: var(--sky-theme-font-weight-body-m);
715
+ font-size: var(--sky-theme-font-size-body-m);
716
+ line-height: var(--sky-theme-font-line_height-body-m);
717
+ font-family: var(--sky-theme-font-family-body-m);
718
+ color: var(--sky-theme-color-text-default);
719
+ }
720
+
721
+ .sky-theme-font-body-emphasized-m {
722
+ font-weight: var(--sky-theme-font-weight-body-emphasized-m);
723
+ font-size: var(--sky-theme-font-size-body-emphasized-m);
724
+ line-height: var(--sky-theme-font-line_height-body-emphasized-m);
725
+ font-family: var(--sky-theme-font-family-body-emphasized-m);
726
+ color: var(--sky-theme-color-text-default);
727
+ }
728
+
729
+ .sky-theme-font-body-deemphasized-m {
730
+ font-weight: var(--sky-theme-font-weight-body-deemphasized-m);
731
+ font-size: var(--sky-theme-font-size-body-deemphasized-m);
732
+ line-height: var(--sky-theme-font-line_height-body-deemphasized-m);
733
+ font-family: var(--sky-theme-font-family-body-deemphasized-m);
734
+ color: var(--sky-theme-color-text-deemphasized);
735
+ }
736
+
737
+ .sky-theme-font-body-s {
738
+ font-weight: var(--sky-theme-font-weight-body-s);
739
+ font-size: var(--sky-theme-font-size-body-s);
740
+ line-height: var(--sky-theme-font-line_height-body-s);
741
+ font-family: var(--sky-theme-font-family-body-s);
742
+ color: var(--sky-theme-color-text-default);
743
+ }
744
+
745
+ .sky-theme-font-body-emphasized-s {
746
+ font-weight: var(--sky-theme-font-weight-body-emphasized-s);
747
+ font-size: var(--sky-theme-font-size-body-emphasized-s);
748
+ line-height: var(--sky-theme-font-line_height-body-emphasized-s);
749
+ font-family: var(--sky-theme-font-family-body-emphasized-s);
750
+ color: var(--sky-theme-color-text-default);
751
+ }
752
+
753
+ .sky-theme-font-body-deemphasized-s {
754
+ font-weight: var(--sky-theme-font-weight-body-deemphasized-s);
755
+ font-size: var(--sky-theme-font-size-body-deemphasized-s);
756
+ line-height: var(--sky-theme-font-line_height-body-deemphasized-s);
757
+ font-family: var(--sky-theme-font-family-body-deemphasized-s);
758
+ color: var(--sky-theme-color-text-deemphasized);
759
+ }
760
+
761
+ .sky-theme-font-body-l {
762
+ font-weight: var(--sky-theme-font-weight-body-l);
763
+ font-size: var(--sky-theme-font-size-body-l);
764
+ line-height: var(--sky-theme-font-line_height-body-l);
765
+ font-family: var(--sky-theme-font-family-body-l);
766
+ color: var(--sky-theme-color-text-default);
767
+ }
768
+
769
+ p {
770
+ line-height: var(--sky-theme-font-line_height-paragraph-m);
771
+ }
772
+
773
+ strong {
774
+ font-weight: var(--sky-theme-font-style-strong);
775
+ }
776
+
777
+ em {
778
+ font-style: var(--sky-theme-font-style-em-style);
779
+ }
780
+
781
+ .sky-theme-list-unstyled {
782
+ list-style: none;
783
+ padding-left: 0;
784
+ margin-top: 0;
785
+ margin-bottom: 0;
786
+ }
787
+
788
+ .sky-theme-list-unstyled li:not(:last-of-type) {
789
+ padding-bottom: var(--sky-theme-space-stacked-xs);
790
+ }
791
+
792
+ .sky-theme-font-display-1 {
793
+ font-weight: var(--sky-theme-font-weight-display-1);
794
+ font-size: var(--sky-theme-font-size-display-1);
795
+ line-height: var(--sky-theme-font-line_height-display-1);
796
+ font-family: var(--sky-theme-font-family-display-1);
797
+ }
798
+
799
+ .sky-theme-font-display-2 {
800
+ font-weight: var(--sky-theme-font-weight-display-2);
801
+ font-size: var(--sky-theme-font-size-display-2);
802
+ line-height: var(--sky-theme-font-line_height-display-2);
803
+ font-family: var(--sky-theme-font-family-display-2);
804
+ }
805
+
806
+ .sky-theme-font-display-3 {
807
+ font-weight: var(--sky-theme-font-weight-display-3);
808
+ font-size: var(--sky-theme-font-size-display-3);
809
+ line-height: var(--sky-theme-font-line_height-display-3);
810
+ font-family: var(--sky-theme-font-family-display-3);
811
+ }
812
+
813
+ .sky-theme-font-display-4 {
814
+ font-weight: var(--sky-theme-font-weight-display-4);
815
+ font-size: var(--sky-theme-font-size-display-4);
816
+ line-height: var(--sky-theme-font-line_height-display-4);
817
+ font-family: var(--sky-theme-font-family-display-4);
818
+ }
819
+
820
+ .sky-theme-font-hint-m {
821
+ font-style: var(--sky-theme-font-style-hint-m-style);
822
+ font-weight: var(--sky-theme-font-style-hint-m-weight);
823
+ font-size: var(--sky-theme-font-size-hint-m);
824
+ line-height: var(--sky-theme-font-line_height-hint-m);
825
+ font-family: var(--sky-theme-font-family-hint-m);
826
+ color: var(--sky-theme-color-text-deemphasized);
827
+ }
828
+
829
+ .sky-theme-font-hint-s {
830
+ font-style: var(--sky-theme-font-style-hint-s-style);
831
+ font-weight: var(--sky-theme-font-style-hint-s-weight);
832
+ font-size: var(--sky-theme-font-size-hint-s);
833
+ line-height: var(--sky-theme-font-line_height-hint-s);
834
+ font-family: var(--sky-theme-font-family-hint-s);
835
+ letter-spacing: var(--sky-theme-font-letter_spacing-hint-s);
836
+ color: var(--sky-theme-color-text-deemphasized);
837
+ }
838
+
839
+ .sky-theme-elevation-raised-100 {
840
+ box-shadow: var(--sky-theme-elevation-raised-100);
841
+ }
842
+
843
+ .sky-theme-elevation-overflow {
844
+ box-shadow: var(--sky-theme-elevation-overflow);
845
+ }
846
+
847
+ .sky-theme-elevation-overlay-100 {
848
+ box-shadow: var(--sky-theme-elevation-overlay-100);
849
+ }
850
+
851
+ .sky-theme-elevation-overlay-200 {
852
+ box-shadow: var(--sky-theme-elevation-overlay-200);
853
+ }
854
+
855
+ .sky-theme-elevation-overlay-300 {
856
+ box-shadow: var(--sky-theme-elevation-overlay-300);
857
+ }
858
+
859
+ .sky-theme-color-background-page {
860
+ background-color: var(--sky-theme-color-background-page);
861
+ }
862
+
863
+ .sky-theme-color-background-container-default {
864
+ background-color: var(--sky-theme-color-background-container-default);
865
+ }
866
+
867
+ .sky-theme-color-background-container-dimmed {
868
+ background-color: var(--sky-theme-color-background-container-dimmed);
869
+ }
870
+
871
+ .sky-theme-color-background-container-backdrop {
872
+ background-color: var(--sky-theme-color-background-container-backdrop);
873
+ }
874
+
875
+ .sky-theme-color-background-disabled {
876
+ background-color: var(--sky-theme-color-background-disabled);
877
+ }
878
+
879
+ .sky-theme-color-border-disabled {
880
+ border-color: var(--sky-theme-color-border-disabled);
881
+ }
882
+
883
+ .sky-theme-color-text-inverse {
884
+ color: var(--sky-theme-color-text-inverse);
885
+ }
886
+
887
+ .sky-theme-color-icon-default {
888
+ color: var(--sky-theme-color-icon-default);
889
+ }
890
+
891
+ .sky-theme-color-icon-deemphasized {
892
+ color: var(--sky-theme-color-icon-deemphasized);
893
+ }
894
+
895
+ .sky-theme-color-icon-action {
896
+ color: var(--sky-theme-color-icon-action);
897
+ }
898
+
899
+ .sky-theme-color-icon-inverse {
900
+ color: var(--sky-theme-color-icon-inverse);
901
+ }
902
+
903
+ .sky-theme-color-background-icon_matte-action-soft {
904
+ background-color: var(--sky-theme-color-background-icon_matte-action-soft);
905
+ }
906
+
907
+ .sky-theme-color-background-container-danger {
908
+ background-color: var(--sky-theme-color-background-container-danger);
909
+ }
910
+
911
+ .sky-theme-color-background-container-info {
912
+ background-color: var(--sky-theme-color-background-container-info);
913
+ }
914
+
915
+ .sky-theme-color-background-container-success {
916
+ background-color: var(--sky-theme-color-background-container-success);
917
+ }
918
+
919
+ .sky-theme-color-background-container-warning {
920
+ background-color: var(--sky-theme-color-background-container-warning);
921
+ }
922
+
923
+ .sky-theme-color-border-danger {
924
+ border-color: var(--sky-theme-color-border-danger);
925
+ }
926
+
927
+ .sky-theme-color-border-info {
928
+ border-color: var(--sky-theme-color-border-info);
929
+ }
930
+
931
+ .sky-theme-color-border-success {
932
+ border-color: var(--sky-theme-color-border-success);
933
+ }
934
+
935
+ .sky-theme-color-border-warning {
936
+ border-color: var(--sky-theme-color-border-warning);
937
+ }
938
+
939
+ .sky-theme-color-icon-danger {
940
+ color: var(--sky-theme-color-icon-danger);
941
+ }
942
+
943
+ .sky-theme-color-icon-info {
944
+ color: var(--sky-theme-color-icon-info);
945
+ }
946
+
947
+ .sky-theme-color-icon-success {
948
+ color: var(--sky-theme-color-icon-success);
949
+ }
950
+
951
+ .sky-theme-color-background-icon_matte-danger {
952
+ background-color: var(--sky-theme-color-background-icon_matte-danger);
953
+ }
954
+
955
+ .sky-theme-color-background-icon_matte-info {
956
+ background-color: var(--sky-theme-color-background-icon_matte-info);
957
+ }
958
+
959
+ .sky-theme-color-background-icon_matte-success {
960
+ background-color: var(--sky-theme-color-background-icon_matte-success);
961
+ }
962
+
963
+ .sky-theme-color-background-icon_matte-warning {
964
+ background-color: var(--sky-theme-color-background-icon_matte-warning);
965
+ }
966
+
967
+ .sky-theme-color-classify-1-soft {
968
+ background-color: var(--sky-theme-color-classify-1-soft);
969
+ }
970
+
971
+ .sky-theme-color-classify-2-soft {
972
+ background-color: var(--sky-theme-color-classify-2-soft);
973
+ }
974
+
975
+ .sky-theme-color-classify-3-soft {
976
+ background-color: var(--sky-theme-color-classify-3-soft);
977
+ }
978
+
979
+ .sky-theme-color-classify-4-soft {
980
+ background-color: var(--sky-theme-color-classify-4-soft);
981
+ }
982
+
983
+ .sky-theme-color-classify-5-soft {
984
+ background-color: var(--sky-theme-color-classify-5-soft);
985
+ }
986
+
987
+ .sky-theme-color-classify-6-soft {
988
+ background-color: var(--sky-theme-color-classify-6-soft);
989
+ }
990
+
991
+ .sky-theme-color-classify-7-soft {
992
+ background-color: var(--sky-theme-color-classify-7-soft);
993
+ }
994
+
995
+ .sky-theme-color-viz-axis {
996
+ border-color: var(--sky-theme-color-viz-axis);
997
+ }
998
+
999
+ .sky-theme-color-viz-gridline {
1000
+ border-color: var(--sky-theme-color-viz-gridline);
1001
+ }
1002
+
1003
+ .sky-theme-color-viz-marker {
1004
+ border-color: var(--sky-theme-color-viz-marker);
1005
+ }
1006
+
1007
+ .sky-theme-border-container-default {
1008
+ border: var(--sky-theme-border-container-default);
1009
+ }
1010
+
1011
+ .sky-theme-border-divider-default-top {
1012
+ border-top: var(--sky-theme-border-divider-default);
1013
+ }
1014
+
1015
+ .sky-theme-border-divider-default-right {
1016
+ border-right: var(--sky-theme-border-divider-default);
1017
+ }
1018
+
1019
+ .sky-theme-border-divider-default-bottom {
1020
+ border-bottom: var(--sky-theme-border-divider-default);
1021
+ }
1022
+
1023
+ .sky-theme-border-divider-default-left {
1024
+ border-left: var(--sky-theme-border-divider-default);
1025
+ }
1026
+
1027
+ .sky-theme-border-divider-soft-top {
1028
+ border-top: var(--sky-theme-border-divider-soft);
1029
+ }
1030
+
1031
+ .sky-theme-border-divider-soft-right {
1032
+ border-right: var(--sky-theme-border-divider-soft);
1033
+ }
1034
+
1035
+ .sky-theme-border-divider-soft-bottom {
1036
+ border-bottom: var(--sky-theme-border-divider-soft);
1037
+ }
1038
+
1039
+ .sky-theme-border-divider-soft-left {
1040
+ border-left: var(--sky-theme-border-divider-soft);
1041
+ }
1042
+
1043
+ .sky-theme-border-danger-top {
1044
+ border-top: var(--sky-theme-border-danger);
1045
+ }
1046
+
1047
+ .sky-theme-border-danger-right {
1048
+ border-right: var(--sky-theme-border-danger);
1049
+ }
1050
+
1051
+ .sky-theme-border-danger-bottom {
1052
+ border-bottom: var(--sky-theme-border-danger);
1053
+ }
1054
+
1055
+ .sky-theme-border-danger-left {
1056
+ border-left: var(--sky-theme-border-danger);
1057
+ }
1058
+
1059
+ .sky-theme-border-info-top {
1060
+ border-top: var(--sky-theme-border-info);
1061
+ }
1062
+
1063
+ .sky-theme-border-info-right {
1064
+ border-right: var(--sky-theme-border-info);
1065
+ }
1066
+
1067
+ .sky-theme-border-info-bottom {
1068
+ border-bottom: var(--sky-theme-border-info);
1069
+ }
1070
+
1071
+ .sky-theme-border-info-left {
1072
+ border-left: var(--sky-theme-border-info);
1073
+ }
1074
+
1075
+ .sky-theme-border-success-top {
1076
+ border-top: var(--sky-theme-border-success);
1077
+ }
1078
+
1079
+ .sky-theme-border-success-right {
1080
+ border-right: var(--sky-theme-border-success);
1081
+ }
1082
+
1083
+ .sky-theme-border-success-bottom {
1084
+ border-bottom: var(--sky-theme-border-success);
1085
+ }
1086
+
1087
+ .sky-theme-border-success-left {
1088
+ border-left: var(--sky-theme-border-success);
1089
+ }
1090
+
1091
+ .sky-theme-border-warning-top {
1092
+ border-top: var(--sky-theme-border-warning);
1093
+ }
1094
+
1095
+ .sky-theme-border-warning-right {
1096
+ border-right: var(--sky-theme-border-warning);
1097
+ }
1098
+
1099
+ .sky-theme-border-warning-bottom {
1100
+ border-bottom: var(--sky-theme-border-warning);
1101
+ }
1102
+
1103
+ .sky-theme-border-warning-left {
1104
+ border-left: var(--sky-theme-border-warning);
1105
+ }
1106
+
1107
+ .sky-theme-border-width-emphasized {
1108
+ border-width: var(--sky-theme-border-width-emphasized);
1109
+ }
1110
+
1111
+ .sky-theme-border-width-accent {
1112
+ border-width: var(--sky-theme-border-width-accent);
1113
+ }
1114
+
1115
+ .sky-theme-border-radius-xs {
1116
+ border-radius: var(--sky-theme-border-radius-xs);
1117
+ }
1118
+
1119
+ .sky-theme-border-radius-s {
1120
+ border-radius: var(--sky-theme-border-radius-s);
1121
+ }
1122
+
1123
+ .sky-theme-border-radius-m {
1124
+ border-radius: var(--sky-theme-border-radius-m);
1125
+ }
1126
+
1127
+ .sky-theme-border-radius-pill {
1128
+ border-radius: var(--sky-theme-border-radius-pill);
1129
+ }
1130
+
1131
+ .sky-theme-border-radius-round {
1132
+ border-radius: var(--sky-theme-border-radius-round);
1133
+ }
1134
+
1
1135
  /*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
2
1136
  /* Document
3
1137
  ========================================================================== */
@@ -1745,78 +2879,10 @@ body:not(.sky-theme-modern) {
1745
2879
  background-color: rgb(187.75, 237.9782157676, 255);
1746
2880
  }
1747
2881
 
1748
- :root {
1749
- /* data viz colors */
1750
- --sky-theme-color-viz-category-1: #06a39e;
1751
- --sky-theme-color-viz-category-2: #6d3c96;
1752
- --sky-theme-color-viz-category-3: #5589dd;
1753
- --sky-theme-color-viz-category-4: #004252;
1754
- --sky-theme-color-viz-category-5: #ce5600;
1755
- --sky-theme-color-viz-category-6: #822325;
1756
- --sky-theme-color-viz-category-7: #c650c1;
1757
- --sky-theme-color-viz-category-8: #077e43;
1758
- --sky-theme-color-viz-sequence-1: #dcf6f5;
1759
- --sky-theme-color-viz-sequence-2: #abe9e7;
1760
- --sky-theme-color-viz-sequence-3: #60d5d2;
1761
- --sky-theme-color-viz-sequence-4: #07beb8;
1762
- --sky-theme-color-viz-sequence-5: #06a39e;
1763
- --sky-theme-color-viz-sequence-6: #058984;
1764
- --sky-theme-color-viz-sequence-7: #046e6b;
1765
- --sky-theme-color-viz-sequence-8: #035755;
1766
- --sky-theme-color-viz-sequence-9: #02413f;
1767
- --sky-theme-color-viz-sequence-10: #022a28;
1768
- --sky-theme-color-viz-diverge-neg-10: #4a1415;
1769
- --sky-theme-color-viz-diverge-neg-9: #641b1c;
1770
- --sky-theme-color-viz-diverge-neg-8: #822325;
1771
- --sky-theme-color-viz-diverge-neg-7: #ae2e31;
1772
- --sky-theme-color-viz-diverge-neg-6: #d93a3d;
1773
- --sky-theme-color-viz-diverge-neg-5: #e36d6f;
1774
- --sky-theme-color-viz-diverge-neg-4: #ea9596;
1775
- --sky-theme-color-viz-diverge-neg-3: #f1b4b5;
1776
- --sky-theme-color-viz-diverge-neg-2: #f5cccd;
1777
- --sky-theme-color-viz-diverge-neg-1: #fae7e8;
1778
- --sky-theme-color-viz-diverge-pos-1: #eef3fc;
1779
- --sky-theme-color-viz-diverge-pos-2: #d5e1f7;
1780
- --sky-theme-color-viz-diverge-pos-3: #aac4ee;
1781
- --sky-theme-color-viz-diverge-pos-4: #80a6e6;
1782
- --sky-theme-color-viz-diverge-pos-5: #5589dd;
1783
- --sky-theme-color-viz-diverge-pos-6: #2b6bd5;
1784
- --sky-theme-color-viz-diverge-pos-7: #2256aa;
1785
- --sky-theme-color-viz-diverge-pos-8: #1a4080;
1786
- --sky-theme-color-viz-diverge-pos-9: #112b55;
1787
- --sky-theme-color-viz-diverge-pos-10: #0d2040;
1788
- --sky-theme-color-viz-axis: #85888d;
1789
- --sky-theme-color-viz-gridline: #e0e1e2;
1790
- --sky-theme-color-viz-marker: #252b33;
1791
- /* classification colors */
1792
- --sky-theme-color-classify-1-heavy: #046e6b;
1793
- --sky-theme-color-classify-1-soft: #abe9e7;
1794
- --sky-theme-color-classify-2-heavy: #8d4ec2;
1795
- --sky-theme-color-classify-2-soft: #e9d3fb;
1796
- --sky-theme-color-classify-3-heavy: #007894;
1797
- --sky-theme-color-classify-3-soft: #a8efff;
1798
- --sky-theme-color-classify-4-heavy: #a74500;
1799
- --sky-theme-color-classify-4-soft: #fcd7bd;
1800
- --sky-theme-color-classify-5-heavy: #a542a0;
1801
- --sky-theme-color-classify-5-soft: #fcd9fa;
1802
- --sky-theme-color-classify-6-heavy: #077e43;
1803
- --sky-theme-color-classify-6-soft: #a8f1cd;
1804
- --sky-theme-color-classify-7-heavy: #ae2e31;
1805
- --sky-theme-color-classify-7-soft: #f5cccd;
1806
- }
1807
-
1808
- .sky-padding-even-default {
1809
- padding: 10px 10px 10px 10px;
1810
- }
1811
-
1812
2882
  .sky-padding-even-small {
1813
2883
  padding: 8px 8px 8px 8px;
1814
2884
  }
1815
2885
 
1816
- .sky-padding-even-large {
1817
- padding: 15px 15px 15px 15px;
1818
- }
1819
-
1820
2886
  .sky-padding-squish-default {
1821
2887
  padding: 5px 10px 5px 10px;
1822
2888
  }
@@ -1829,26 +2895,6 @@ body:not(.sky-theme-modern) {
1829
2895
  padding: 8px 15px 8px 15px;
1830
2896
  }
1831
2897
 
1832
- .sky-margin-inline-default {
1833
- margin-right: 10px;
1834
- }
1835
-
1836
- .sky-margin-inline-compact {
1837
- margin-right: 5px;
1838
- }
1839
-
1840
- .sky-margin-stacked-default {
1841
- margin-bottom: 10px;
1842
- }
1843
-
1844
- .sky-margin-stacked-compact {
1845
- margin-bottom: 5px;
1846
- }
1847
-
1848
- .sky-margin-stacked-separate {
1849
- margin-bottom: 20px;
1850
- }
1851
-
1852
2898
  .sky-padding-even-sm {
1853
2899
  padding: 10px;
1854
2900
  }
@@ -2240,41 +3286,6 @@ symbol[id^=sky-i-]:not(.sky-i-branded) *.sky-i-path-2 {
2240
3286
  max-height: 100px;
2241
3287
  }
2242
3288
 
2243
- .sky-page-heading {
2244
- font-family: "BLKB Sans Condensed", "Helvetica Neue Condensed", "Arial Narrow";
2245
- color: var(--sky-text-color-default);
2246
- font-weight: 300;
2247
- font-size: 34px;
2248
- }
2249
-
2250
- .sky-section-heading {
2251
- font-family: "BLKB Sans Condensed", "Helvetica Neue Condensed", "Arial Narrow";
2252
- color: var(--sky-text-color-default);
2253
- font-weight: 300;
2254
- font-size: 26px;
2255
- }
2256
-
2257
- .sky-subsection-heading {
2258
- font-family: "BLKB Sans", "Helvetica Neue", Arial, sans-serif;
2259
- color: var(--sky-text-color-deemphasized);
2260
- font-weight: 300;
2261
- font-size: 19px;
2262
- }
2263
-
2264
- .sky-headline {
2265
- font-family: "BLKB Sans Condensed", "Helvetica Neue Condensed", "Arial Narrow";
2266
- color: var(--sky-text-color-default);
2267
- font-weight: 600;
2268
- font-size: 22px;
2269
- }
2270
-
2271
- .sky-emphasized {
2272
- font-family: "BLKB Sans", "Helvetica Neue", Arial, sans-serif;
2273
- color: var(--sky-text-color-default);
2274
- font-weight: 600;
2275
- font-size: 16px;
2276
- }
2277
-
2278
3289
  .sky-deemphasized {
2279
3290
  font-family: "BLKB Sans", "Helvetica Neue", Arial, sans-serif;
2280
3291
  color: var(--sky-text-color-deemphasized);