@skyux/theme 11.6.0 → 11.8.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.
Files changed (4) hide show
  1. package/css/sky.css +37 -1
  2. package/css/themes/modern/styles.css +364 -138
  3. package/documentation.json +102 -102
  4. package/package.json +2 -2
package/css/themes/modern/styles.css CHANGED
@@ -3,6 +3,7 @@
3
3
  --modern-border-style-solid: solid;
4
4
  --modern-border-radius-pill: 10rem;
5
5
  --modern-border-radius-md: 6px;
6
+ --modern-border-radius-0: 0rem;
6
7
  --modern-shadow-size-24: 0 7px 27px 3px var(--modern-color-shadow_color);
7
8
  --modern-shadow-size-16: 0 3px 25px 2px var(--modern-color-shadow_color);
8
9
  --modern-shadow-size-8: 0 2px 15px 2px var(--modern-color-shadow_color);
@@ -11,16 +12,21 @@
11
12
  --modern-shadow-size-1: 0 1px 3px 0 var(--modern-color-shadow_color);
12
13
  --modern-shadow-size-0: 0 0 0 0 #000000;
13
14
  --modern-letter_spacing-normal: normal;
14
- --modern-line-height-normal: normal;
15
- --modern-line-height-115: 1.15;
16
- --modern-line-height-110: 1.1;
17
- --modern-line-height-20: 20px;
18
- --modern-font-family-sans: var(--modern-font-name), Helvetica Neue, Arial, sans-serif;
19
- --modern-font-name: "BLKB Sans";
15
+ --modern-line_height-normal: normal;
16
+ --modern-line_height-150: 1.5;
17
+ --modern-line_height-115: 1.15;
18
+ --modern-line_height-110: 1.1;
19
+ --modern-line_height-20: 20px;
20
+ --modern-font-blkb_sans-family: var(--modern-font-blkb_sans-name), var(--modern-font-blkb_sans-fallback);
21
+ --modern-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
22
+ --modern-font-blkb_sans-name: BLKB Sans;
23
+ --modern-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
20
24
  --modern-font-style-bold: 700;
21
25
  --modern-font-style-semibold: 600;
22
26
  --modern-font-style-italic-style: italic;
23
27
  --modern-font-style-italic-weight: 400;
28
+ --modern-font-style-normal-style: normal;
29
+ --modern-font-style-normal-weight: 400;
24
30
  --modern-font-style-regular: 400;
25
31
  --modern-font-style-light: 300;
26
32
  --modern-font-weight-bold: 700;
@@ -37,8 +43,16 @@
37
43
  --modern-font-size-150: 14px;
38
44
  --modern-font-size-125: 13px;
39
45
  --modern-font-size-100: 12px;
46
+ --modern-size-400: 400px;
47
+ --modern-size-320: 320px;
40
48
  --modern-size-296: 296px;
41
49
  --modern-size-276: 276px;
50
+ --modern-size-236: 236px;
51
+ --modern-size-96: 96px;
52
+ --modern-size-80: 80px;
53
+ --modern-size-64: 64px;
54
+ --modern-size-48: 48px;
55
+ --modern-size-44: 44px;
42
56
  --modern-size-32: 32px;
43
57
  --modern-size-30: 30px;
44
58
  --modern-size-26: 26px;
@@ -47,6 +61,7 @@
47
61
  --modern-size-16: 16px;
48
62
  --modern-size-15: 15px;
49
63
  --modern-size-13: 13px;
64
+ --modern-size-12: 12px;
50
65
  --modern-size-10: 10px;
51
66
  --modern-size-9: 9px;
52
67
  --modern-size-8: 8px;
@@ -54,6 +69,7 @@
54
69
  --modern-size-6: 6px;
55
70
  --modern-size-5: 5px;
56
71
  --modern-size-4: 4px;
72
+ --modern-size-3: 3px;
57
73
  --modern-size-2: 2px;
58
74
  --modern-size-1: 1px;
59
75
  --modern-size-0: 0rem;
@@ -64,20 +80,22 @@
64
80
  --modern-space-s: 10px;
65
81
  --modern-space-xs: 5px;
66
82
  --modern-space-none: 0rem;
67
- --modern-color-shadow_color: rgba(0, 0, 0, 0.3);
68
83
  --modern-color-sky_blue-40: #40c7f4;
69
84
  --modern-color-sky_blue-20: #bfecfb;
70
85
  --modern-color-yellow-50: #fbb034;
71
86
  --modern-color-yellow-30: #ffd597;
72
87
  --modern-color-green-50: #72bf44;
73
88
  --modern-color-green-30: #b7da9b;
74
- --modern-color-white: #ffffff;
75
89
  --modern-color-blue-05: #ebfbff;
76
90
  --modern-color-blue-74: #1870b8;
77
91
  --modern-color-blue-50: #00b4f1;
78
92
  --modern-color-blue-30: #81d4f7;
79
93
  --modern-color-blue-10: #c1e8fb;
94
+ --modern-color-scrim: rgba(0, 0, 0, 0.5);
95
+ --modern-color-shadow_color: rgba(0, 0, 0, 0.3);
80
96
  --modern-color-transparent: rgba(0, 0, 0, 0);
97
+ --modern-color-black: #000000;
98
+ --modern-color-white: #ffffff;
81
99
  --modern-color-red-70: #d93a3d;
82
100
  --modern-color-red-50: #ef4044;
83
101
  --modern-color-red-30: #f7a08f;
@@ -85,6 +103,7 @@
85
103
  --modern-color-gray-07: #ededee;
86
104
  --modern-color-gray-105: #212327;
87
105
  --modern-color-gray-70: #686c73;
106
+ --modern-color-gray-20: #cdcfd2;
88
107
  --modern-color-gray-15: #d2d2d2;
89
108
  }
90
109
 
@@ -97,33 +116,94 @@
97
116
  --sky-elevation-overflow: var(--modern-shadow-size-3);
98
117
  --sky-elevation-focus: var(--modern-shadow-size-3);
99
118
  --sky-elevation-none: var(--modern-shadow-size-0);
100
- --sky-color-border-container-base: var(--modern-color-gray-15);
119
+ --sky-color-border-separator-row: var(--modern-color-gray-20);
120
+ --sky-color-border-separator-dark: var(--modern-color-gray-20);
101
121
  --sky-color-border-input-error: var(--modern-color-red-50);
122
+ --sky-color-border-input-disabled: var(--modern-color-gray-15);
102
123
  --sky-color-border-input-focus: var(--modern-color-blue-74);
103
124
  --sky-color-border-input-active: var(--modern-color-blue-74);
104
125
  --sky-color-border-input-hover: var(--modern-color-blue-74);
105
- --sky-color-border-input-disabled: var(--modern-color-gray-15);
106
126
  --sky-color-border-input-base: var(--modern-color-gray-15);
127
+ --sky-color-border-action-danger-disabled: var(--modern-color-gray-15);
128
+ --sky-color-border-action-danger-focus: var(--modern-color-red-30);
129
+ --sky-color-border-action-danger-active: var(--modern-color-red-30);
130
+ --sky-color-border-action-danger-hover: var(--modern-color-red-30);
131
+ --sky-color-border-action-danger-base: var(--modern-color-red-70);
132
+ --sky-color-border-action-tertiary-disabled: var(--modern-color-gray-15);
107
133
  --sky-color-border-action-tertiary-active: var(--modern-color-blue-74);
108
134
  --sky-color-border-action-tertiary-focus: var(--modern-color-blue-74);
109
135
  --sky-color-border-action-tertiary-hover: var(--modern-color-blue-74);
110
136
  --sky-color-border-action-tertiary-base: var(--modern-color-transparent);
137
+ --sky-color-border-action-secondary-disabled: var(--modern-color-gray-15);
138
+ --sky-color-border-action-secondary-focus: var(--modern-color-blue-74);
139
+ --sky-color-border-action-secondary-active: var(--modern-color-blue-74);
140
+ --sky-color-border-action-secondary-hover: var(--modern-color-blue-74);
141
+ --sky-color-border-action-secondary-base: var(--modern-color-gray-15);
142
+ --sky-color-border-action-primary-disabled: var(--modern-color-gray-15);
143
+ --sky-color-border-action-primary-focus: var(--modern-color-blue-10);
144
+ --sky-color-border-action-primary-active: var(--modern-color-blue-10);
145
+ --sky-color-border-action-primary-hover: var(--modern-color-blue-10);
146
+ --sky-color-border-action-primary-base: var(--modern-color-blue-74);
147
+ --sky-color-border-container-base: var(--modern-color-gray-15);
148
+ --sky-color-border-elevation: var(--modern-color-gray-15);
149
+ --sky-color-border-divider: var(--modern-color-gray-15);
111
150
  --sky-color-border-info: var(--modern-color-blue-50);
112
151
  --sky-color-border-success: var(--modern-color-green-50);
113
152
  --sky-color-border-warning: var(--modern-color-yellow-50);
114
153
  --sky-color-border-danger: var(--modern-color-red-50);
154
+ --sky-color-border-selected: var(--modern-color-blue-74);
155
+ --sky-color-background-list-disabled: var(--modern-color-gray-07);
156
+ --sky-color-background-list-focus: var(--modern-color-transparent);
157
+ --sky-color-background-list-active: var(--modern-color-transparent);
158
+ --sky-color-background-list-hover: var(--modern-color-transparent);
159
+ --sky-color-background-list-base: var(--modern-color-transparent);
160
+ --sky-color-background-nav-disabled: var(--modern-color-gray-07);
161
+ --sky-color-background-nav-focus: var(--modern-color-transparent);
162
+ --sky-color-background-nav-active: var(--modern-color-transparent);
163
+ --sky-color-background-nav-hover: var(--modern-color-transparent);
164
+ --sky-color-background-nav-base: var(--modern-color-transparent);
165
+ --sky-color-background-input-disabled: var(--modern-color-gray-07);
166
+ --sky-color-background-input-base: var(--modern-color-transparent);
167
+ --sky-color-background-selected-soft: var(--modern-color-blue-05);
168
+ --sky-color-background-selected-heavy: var(--modern-color-blue-05);
169
+ --sky-color-background-action-danger-disabled: var(--modern-color-gray-07);
170
+ --sky-color-background-action-danger-focus: var(--modern-color-red-70);
171
+ --sky-color-background-action-danger-active: var(--modern-color-red-70);
172
+ --sky-color-background-action-danger-hover: var(--modern-color-red-70);
173
+ --sky-color-background-action-danger-base: var(--modern-color-red-70);
174
+ --sky-color-background-action-tertiary-disabled: var(--modern-color-gray-07);
175
+ --sky-color-background-action-tertiary-focus: var(--modern-color-transparent);
176
+ --sky-color-background-action-tertiary-active: var(--modern-color-transparent);
177
+ --sky-color-background-action-tertiary-hover: var(--modern-color-transparent);
115
178
  --sky-color-background-action-tertiary-base: var(--modern-color-transparent);
179
+ --sky-color-background-action-secondary-disabled: var(--modern-color-gray-07);
180
+ --sky-color-background-action-secondary-focus: var(--modern-color-white);
181
+ --sky-color-background-action-secondary-active: var(--modern-color-white);
182
+ --sky-color-background-action-secondary-hover: var(--modern-color-white);
183
+ --sky-color-background-action-secondary-base: var(--modern-color-white);
184
+ --sky-color-background-action-primary-disabled: var(--modern-color-gray-07);
185
+ --sky-color-background-action-primary-focus: var(--modern-color-blue-74);
186
+ --sky-color-background-action-primary-active: var(--modern-color-blue-74);
187
+ --sky-color-background-action-primary-hover: var(--modern-color-blue-74);
188
+ --sky-color-background-action-primary-base: var(--modern-color-blue-74);
116
189
  --sky-color-background-container-info: var(--modern-color-blue-10);
117
190
  --sky-color-background-container-success: var(--modern-color-green-30);
118
191
  --sky-color-background-container-warning: var(--modern-color-yellow-30);
119
192
  --sky-color-background-container-danger: var(--modern-color-red-30);
193
+ --sky-color-background-container-menu: var(--modern-color-white);
120
194
  --sky-color-background-container-base: var(--modern-color-white);
195
+ --sky-color-background-scrim: var(--modern-color-scrim);
196
+ --sky-color-background-page: var(--modern-color-gray-005);
197
+ --sky-color-icon-action: var(--modern-color-blue-74);
121
198
  --sky-color-icon-inverse: var(--modern-color-white);
122
199
  --sky-color-icon-info: var(--modern-color-blue-50);
123
200
  --sky-color-icon-success: var(--modern-color-green-50);
124
201
  --sky-color-icon-warning: var(--modern-color-yellow-50);
125
202
  --sky-color-icon-danger: var(--modern-color-red-50);
203
+ --sky-color-icon-deemphasized: var(--modern-color-gray-70);
126
204
  --sky-color-icon-default: var(--modern-color-gray-105);
205
+ --sky-color-text-heading: var(--modern-color-gray-105);
206
+ --sky-color-text-inverse: var(--modern-color-white);
127
207
  --sky-color-text-danger: var(--modern-color-red-70);
128
208
  --sky-color-text-action: var(--modern-color-blue-74);
129
209
  --sky-color-text-deemphasized: var(--modern-color-gray-70);
@@ -131,42 +211,127 @@
131
211
  }
132
212
 
133
213
  .sky-theme-modern {
214
+ --sky-border-style-separator-row: var(--modern-border-style-dotted);
215
+ --sky-border-style-separator-dark: var(--modern-border-style-solid);
216
+ --sky-border-style-elevation: var(--modern-border-style-solid);
217
+ --sky-border-style-divider: var(--modern-border-style-solid);
134
218
  --sky-border-style-accent: var(--modern-border-style-solid);
135
219
  --sky-border-radius-pill: var(--modern-border-radius-pill);
136
- --sky-border-radius-m: var(--modern-size-6);
137
- --sky-border-radius-s: var(--modern-size-6);
220
+ --sky-border-radius-m: var(--modern-border-radius-md);
221
+ --sky-border-radius-s: var(--modern-border-radius-md);
222
+ --sky-border-radius-0: var(--modern-border-radius-0);
223
+ --sky-border-width-separator-row: var(--modern-size-1);
224
+ --sky-border-width-separator-dark: var(--modern-size-1);
225
+ --sky-border-width-input-disabled: var(--modern-size-1);
226
+ --sky-border-width-input-error: var(--modern-size-2);
227
+ --sky-border-width-input-focus: var(--modern-size-2);
228
+ --sky-border-width-input-active: var(--modern-size-2);
229
+ --sky-border-width-input-hover: var(--modern-size-1);
230
+ --sky-border-width-input-base: var(--modern-size-1);
138
231
  --sky-border-width-container-base: var(--modern-size-1);
232
+ --sky-border-width-action-selected-xl: var(--modern-size-6);
233
+ --sky-border-width-action-selected-l: var(--modern-size-4);
234
+ --sky-border-width-action-selected-m: var(--modern-size-2);
235
+ --sky-border-width-action-selected-s: var(--modern-size-1);
236
+ --sky-border-width-action-disabled: var(--modern-size-1);
237
+ --sky-border-width-action-error: var(--modern-size-2);
238
+ --sky-border-width-action-focus: var(--modern-size-2);
239
+ --sky-border-width-action-active: var(--modern-size-2);
240
+ --sky-border-width-action-hover: var(--modern-size-1);
241
+ --sky-border-width-action-base: var(--modern-size-1);
242
+ --sky-border-width-elevation: var(--modern-size-1);
139
243
  --sky-border-width-divider: var(--modern-size-1);
140
- --sky-border-width-interactive-disabled: var(--modern-size-1);
141
- --sky-border-width-interactive-error: var(--modern-size-2);
142
- --sky-border-width-interactive-focus: var(--modern-size-2);
143
- --sky-border-width-interactive-active: var(--modern-size-2);
144
- --sky-border-width-interactive-hover: var(--modern-size-1);
145
- --sky-border-width-interactive-base: var(--modern-size-1);
146
244
  --sky-border-width-accent: var(--modern-size-7);
147
- --sky-text-font_family: var(--modern-font-name);
148
- --sky-size-max_width-overlay_message: var(--modern-size-276);
245
+ --sky-size-max_width-overlay_message: var(--modern-size-236);
149
246
  --sky-size-width-viewport-smallest: var(--modern-size-296);
150
- --sky-size-switch: var(--modern-size-26);
247
+ --sky-size-illustration-xl: var(--modern-size-96);
248
+ --sky-size-illustration-l: var(--modern-size-80);
249
+ --sky-size-illustration-m: var(--modern-size-64);
250
+ --sky-size-illustration-s: var(--modern-size-48);
151
251
  --sky-size-icon-xl: var(--modern-size-32);
152
252
  --sky-size-icon-l: var(--modern-size-24);
153
253
  --sky-size-icon-m: var(--modern-size-20);
154
254
  --sky-size-icon-s: var(--modern-size-16);
155
- --sky-space-form_gap-l: var(--modern-space-xl);
156
- --sky-space-form_gap-m: var(--modern-space-lg);
157
- --sky-space-form_gap-s: var(--modern-space-s);
158
- --sky-space-stacked_supplemental-s: var(--modern-space-xs);
159
- --sky-space-stacked_supplemental-0: 0rem;
160
- --sky-space-label_gap-s: var(--modern-space-xs);
161
- --sky-space-label_gap-xxs: var(--modern-size-2);
162
- --sky-space-label_gap-0: 0rem;
163
- --sky-space-text_action_gap-l: var(--modern-space-lg);
164
- --sky-space-text_action_gap-m: var(--modern-space-md);
165
- --sky-space-text_action_gap-xs: var(--modern-space-xs);
166
- --sky-space-icon_gap-l: var(--modern-space-md);
167
- --sky-space-icon_gap-m: var(--modern-space-s);
168
- --sky-space-icon_gap-s: var(--modern-space-xs);
169
- --sky-space-inset-input_label-top-m: var(--modern-size-6);
255
+ --sky-size-switch: var(--modern-size-26);
256
+ --sky-space-stacked-xxl: var(--modern-space-xxl);
257
+ --sky-space-stacked-xl: var(--modern-space-xl);
258
+ --sky-space-stacked-l: var(--modern-space-lg);
259
+ --sky-space-stacked-m: var(--modern-space-md);
260
+ --sky-space-stacked-s: var(--modern-space-s);
261
+ --sky-space-stacked-xs: var(--modern-space-xs);
262
+ --sky-space-inline-xxl: var(--modern-space-xxl);
263
+ --sky-space-inline-xl: var(--modern-space-xl);
264
+ --sky-space-inline-l: var(--modern-space-lg);
265
+ --sky-space-inline-m: var(--modern-space-md);
266
+ --sky-space-inline-s: var(--modern-space-s);
267
+ --sky-space-inline-xs: var(--modern-space-xs);
268
+ --sky-space-gap-text_action-l: var(--modern-space-lg);
269
+ --sky-space-gap-text_action-m: var(--modern-space-md);
270
+ --sky-space-gap-text_action-s: var(--modern-space-s);
271
+ --sky-space-gap-text_action-xs: var(--modern-space-xs);
272
+ --sky-space-gap-text_action-0: 0rem;
273
+ --sky-space-gap-stacked_supplemental-m: var(--modern-size-10);
274
+ --sky-space-gap-stacked_supplemental-s: var(--modern-size-5);
275
+ --sky-space-gap-stacked_supplemental-0: 0rem;
276
+ --sky-space-gap-label-xl: var(--modern-size-20);
277
+ --sky-space-gap-label-l: var(--modern-size-15);
278
+ --sky-space-gap-label-m: var(--modern-size-10);
279
+ --sky-space-gap-label-s: var(--modern-size-5);
280
+ --sky-space-gap-label-xs: var(--modern-size-2);
281
+ --sky-space-gap-label-xxs: var(--modern-size-1);
282
+ --sky-space-gap-label-0: 0rem;
283
+ --sky-space-gap-icon-xl: var(--modern-size-20);
284
+ --sky-space-gap-icon-l: var(--modern-size-15);
285
+ --sky-space-gap-icon-m: var(--modern-size-10);
286
+ --sky-space-gap-icon-s: var(--modern-size-5);
287
+ --sky-space-gap-icon-0: 0rem;
288
+ --sky-space-gap-form-xl: var(--modern-space-xl);
289
+ --sky-space-gap-form-l: var(--modern-space-lg);
290
+ --sky-space-gap-form-m: var(--modern-space-md);
291
+ --sky-space-gap-form-s: var(--modern-space-s);
292
+ --sky-space-gap-form-0: 0rem;
293
+ --sky-space-gap-action_group-xl: var(--modern-size-20);
294
+ --sky-space-gap-action_group-l: var(--modern-size-15);
295
+ --sky-space-gap-action_group-m: var(--modern-size-10);
296
+ --sky-space-gap-action_group-s: var(--modern-size-5);
297
+ --sky-space-gap-action_group-0: 0rem;
298
+ --sky-space-inset-horizontal-left-xl: var(--modern-space-xl);
299
+ --sky-space-inset-horizontal-left-l: var(--modern-space-lg);
300
+ --sky-space-inset-horizontal-left-m: var(--modern-space-md);
301
+ --sky-space-inset-horizontal-left-s: var(--modern-space-s);
302
+ --sky-space-inset-horizontal-bottom-xl: var(--modern-size-0);
303
+ --sky-space-inset-horizontal-bottom-l: var(--modern-size-0);
304
+ --sky-space-inset-horizontal-bottom-m: var(--modern-size-0);
305
+ --sky-space-inset-horizontal-bottom-s: var(--modern-size-0);
306
+ --sky-space-inset-horizontal-right-xl: var(--modern-space-xl);
307
+ --sky-space-inset-horizontal-right-l: var(--modern-space-lg);
308
+ --sky-space-inset-horizontal-right-m: var(--modern-space-md);
309
+ --sky-space-inset-horizontal-right-s: var(--modern-space-s);
310
+ --sky-space-inset-horizontal-top-xl: var(--modern-size-0);
311
+ --sky-space-inset-horizontal-top-l: var(--modern-size-0);
312
+ --sky-space-inset-horizontal-top-m: var(--modern-size-0);
313
+ --sky-space-inset-horizontal-top-s: var(--modern-size-0);
314
+ --sky-space-inset-vertical-left-xl: var(--modern-size-0);
315
+ --sky-space-inset-vertical-left-l: var(--modern-size-0);
316
+ --sky-space-inset-vertical-left-m: var(--modern-size-0);
317
+ --sky-space-inset-vertical-left-s: var(--modern-size-0);
318
+ --sky-space-inset-vertical-bottom-xl: var(--modern-space-xl);
319
+ --sky-space-inset-vertical-bottom-l: var(--modern-space-lg);
320
+ --sky-space-inset-vertical-bottom-m: var(--modern-space-md);
321
+ --sky-space-inset-vertical-bottom-s: var(--modern-space-s);
322
+ --sky-space-inset-vertical-right-xl: var(--modern-size-0);
323
+ --sky-space-inset-vertical-right-l: var(--modern-size-0);
324
+ --sky-space-inset-vertical-right-m: var(--modern-size-0);
325
+ --sky-space-inset-vertical-right-s: var(--modern-size-0);
326
+ --sky-space-inset-vertical-top-xl: var(--modern-space-xl);
327
+ --sky-space-inset-vertical-top-l: var(--modern-space-lg);
328
+ --sky-space-inset-vertical-top-m: var(--modern-space-md);
329
+ --sky-space-inset-vertical-top-s: var(--modern-space-s);
330
+ --sky-space-inset-switch: calc(var(--sky-size-switch)+var(--sky-space-gap-label-s));
331
+ --sky-space-inset-tabs-xl: var(--modern-space-xl);
332
+ --sky-space-inset-tabs-l: var(--modern-space-lg);
333
+ --sky-space-inset-tabs-m: var(--modern-space-md);
334
+ --sky-space-inset-tabs-s: var(--modern-space-s);
170
335
  --sky-space-inset-pillarbox-2_3-left-l: var(--modern-size-30);
171
336
  --sky-space-inset-pillarbox-2_3-left-m: var(--modern-size-15);
172
337
  --sky-space-inset-pillarbox-2_3-bottom-l: var(--modern-size-20);
@@ -199,6 +364,7 @@
199
364
  --sky-space-inset-pillarbox-1_4-right-xs: var(--modern-size-5);
200
365
  --sky-space-inset-pillarbox-1_4-top-s: var(--modern-size-4);
201
366
  --sky-space-inset-pillarbox-1_4-top-xs: var(--modern-size-1);
367
+ --sky-space-inset-input_label-top-m: var(--modern-size-6);
202
368
  --sky-space-inset-input-left-m: var(--modern-size-15);
203
369
  --sky-space-inset-input-bottom-m: var(--modern-size-9);
204
370
  --sky-space-inset-input-right-m: var(--modern-size-15);
@@ -216,6 +382,12 @@
216
382
  --sky-space-inset-balanced-m: var(--modern-space-md);
217
383
  --sky-space-inset-balanced-s: var(--modern-space-s);
218
384
  --sky-space-inset-balanced-xs: var(--modern-space-xs);
385
+ --sky-font-text_decoration-inline_link-disabled: none;
386
+ --sky-font-text_decoration-inline_link-focus: none;
387
+ --sky-font-text_decoration-inline_link-active: underline;
388
+ --sky-font-text_decoration-inline_link-hover: underline;
389
+ --sky-font-text_decoration-inline_link-base: none;
390
+ --sky-font-text_decoration-visible_link: underline;
219
391
  --sky-font-weight-metric-l: var(--modern-font-weight-regular);
220
392
  --sky-font-weight-metric-m: var(--modern-font-weight-regular);
221
393
  --sky-font-weight-metric-s: var(--modern-font-weight-bold);
@@ -225,7 +397,7 @@
225
397
  --sky-font-weight-heading-5: var(--modern-font-weight-semibold);
226
398
  --sky-font-weight-heading-4: var(--modern-font-weight-semibold);
227
399
  --sky-font-weight-heading-3: var(--modern-font-weight-regular);
228
- --sky-font-weight-heading-2: var(--modern-font-weight-light);
400
+ --sky-font-weight-heading-2: var(--modern-font-weight-regular);
229
401
  --sky-font-weight-heading-1: var(--modern-font-weight-light);
230
402
  --sky-font-weight-display-4: var(--modern-font-weight-bold);
231
403
  --sky-font-weight-display-3: var(--modern-font-weight-regular);
@@ -238,7 +410,8 @@
238
410
  --sky-font-weight-emphasized: var(--modern-font-weight-bold);
239
411
  --sky-font-letter_spacing-hint-s: var(--modern-letter_spacing-normal);
240
412
  --sky-font-letter_spacing-input-label: var(--modern-letter_spacing-normal);
241
- --sky-font-family-sans: var(--modern-font-family-sans);
413
+ --sky-font-family-monospaced: var(--modern-font-monospaced-family);
414
+ --sky-font-family-primary: var(--modern-font-blkb_sans-family);
242
415
  --sky-font-style-metric-l: var(--modern-font-weight-regular);
243
416
  --sky-font-style-metric-m: var(--modern-font-weight-regular);
244
417
  --sky-font-style-metric-s: var(--modern-font-weight-bold);
@@ -250,7 +423,7 @@
250
423
  --sky-font-style-heading-5: var(--modern-font-style-semibold);
251
424
  --sky-font-style-heading-4: var(--modern-font-style-semibold);
252
425
  --sky-font-style-heading-3: var(--modern-font-style-regular);
253
- --sky-font-style-heading-2: var(--modern-font-style-light);
426
+ --sky-font-style-heading-2: var(--modern-font-style-regular);
254
427
  --sky-font-style-heading-1: var(--modern-font-style-light);
255
428
  --sky-font-style-display-4: var(--modern-font-style-bold);
256
429
  --sky-font-style-display-3: var(--modern-font-style-regular);
@@ -263,26 +436,26 @@
263
436
  --sky-font-style-emphasized: var(--modern-font-style-semibold);
264
437
  --sky-font-style-deemphasized-style: italic;
265
438
  --sky-font-style-deemphasized-weight: 400;
266
- --sky-font-line_height-metric-l: var(--modern-line-height-normal);
267
- --sky-font-line_height-metric-m: var(--modern-line-height-normal);
268
- --sky-font-line_height-metric-s: var(--modern-line-height-normal);
269
- --sky-font-line_height-input-val: var(--modern-line-height-20);
270
- --sky-font-line_height-input-label: var(--modern-line-height-normal);
271
- --sky-font-line_height-hint-m: var(--modern-line-height-normal);
272
- --sky-font-line_height-hint-s: var(--modern-line-height-normal);
273
- --sky-font-line_height-heading-5: var(--modern-line-height-110);
274
- --sky-font-line_height-heading-4: var(--modern-line-height-110);
275
- --sky-font-line_height-heading-3: var(--modern-line-height-110);
276
- --sky-font-line_height-heading-2: var(--modern-line-height-110);
277
- --sky-font-line_height-heading-1: var(--modern-line-height-110);
278
- --sky-font-line_height-display-4: var(--modern-line-height-110);
279
- --sky-font-line_height-display-3: var(--modern-line-height-110);
280
- --sky-font-line_height-display-2: var(--modern-line-height-110);
281
- --sky-font-line_height-display-1: var(--modern-line-height-110);
282
- --sky-font-line_height-body-l: var(--modern-line-height-normal);
283
- --sky-font-line_height-body-m: var(--modern-line-height-normal);
284
- --sky-font-line_height-body-s: var(--modern-line-height-normal);
285
- --sky-font-line_height-data_label: var(--modern-line-height-normal);
439
+ --sky-font-line_height-metric-l: var(--modern-line_height-normal);
440
+ --sky-font-line_height-metric-m: var(--modern-line_height-normal);
441
+ --sky-font-line_height-metric-s: var(--modern-line_height-normal);
442
+ --sky-font-line_height-input-val: var(--modern-line_height-20);
443
+ --sky-font-line_height-input-label: var(--modern-line_height-normal);
444
+ --sky-font-line_height-hint-m: var(--modern-line_height-normal);
445
+ --sky-font-line_height-hint-s: var(--modern-line_height-normal);
446
+ --sky-font-line_height-heading-5: var(--modern-line_height-110);
447
+ --sky-font-line_height-heading-4: var(--modern-line_height-110);
448
+ --sky-font-line_height-heading-3: var(--modern-line_height-110);
449
+ --sky-font-line_height-heading-2: var(--modern-line_height-110);
450
+ --sky-font-line_height-heading-1: var(--modern-line_height-110);
451
+ --sky-font-line_height-display-4: var(--modern-line_height-110);
452
+ --sky-font-line_height-display-3: var(--modern-line_height-110);
453
+ --sky-font-line_height-display-2: var(--modern-line_height-110);
454
+ --sky-font-line_height-display-1: var(--modern-line_height-110);
455
+ --sky-font-line_height-body-l: var(--modern-line_height-normal);
456
+ --sky-font-line_height-body-m: var(--modern-line_height-150);
457
+ --sky-font-line_height-body-s: var(--modern-line_height-normal);
458
+ --sky-font-line_height-data_label: var(--modern-line_height-normal);
286
459
  --sky-font-size-metric-l: var(--sky-font-size-display-1);
287
460
  --sky-font-size-metric-m: var(--sky-font-size-display-3);
288
461
  --sky-font-size-metric-s: var(--sky-font-size-display-4);
@@ -833,7 +1006,7 @@
833
1006
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.3);
834
1007
  }
835
1008
  .sky-theme-modern .sky-elevation-4 {
836
- box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.3);
1009
+ box-shadow: var(--sky-elevation-overlay-100);
837
1010
  }
838
1011
  .sky-theme-modern .sky-elevation-8 {
839
1012
  box-shadow: 0px 2px 15px 2px rgba(0, 0, 0, 0.3);
@@ -842,7 +1015,7 @@
842
1015
  box-shadow: 0px 3px 25px 2px rgba(0, 0, 0, 0.3);
843
1016
  }
844
1017
  .sky-theme-modern .sky-elevation-24 {
845
- box-shadow: 0px 7px 27px 3px rgba(0, 0, 0, 0.3);
1018
+ box-shadow: var(--sky-elevation-overlay-400);
846
1019
  }
847
1020
  .sky-theme-modern.sky-theme-mode-dark .sky-elevation-0-bordered,
848
1021
  .sky-theme-modern.sky-theme-mode-dark .sky-elevation-1-bordered {
@@ -1024,10 +1197,27 @@
1024
1197
  color: #fbfcfe;
1025
1198
  }
1026
1199
 
1027
- .sky-theme-modern,
1200
+ :is(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) {
1201
+ --sky-override-font-size: var(--sky-font-size-body-m);
1202
+ --sky-override-form-font-weight: var(--sky-font-weight-body-m);
1203
+ --sky-override-p-line-height: var(--sky-font-line_height-body-m);
1204
+ }
1205
+
1206
+ html:has(.sky-theme-brand-blackbaud) {
1207
+ font-size: initial;
1208
+ }
1209
+
1210
+ .sky-theme-modern {
1211
+ font-size: var(--sky-override-font-size, initial);
1212
+ font-weight: var(--sky-font-weight-body-m);
1213
+ font-family: var(--sky-font-family-primary);
1214
+ color: var(--sky-color-text-default);
1215
+ transition: background-color 150ms, color 150ms;
1216
+ }
1217
+
1028
1218
  .sky-theme-modern form {
1029
- font-size: 16px;
1030
- font-weight: 400;
1219
+ font-size: var(--sky-override-font-size, initial);
1220
+ font-weight: var(--sky-override-form-font-weight, initial);
1031
1221
  transition: background-color 150ms, color 150ms;
1032
1222
  }
1033
1223
 
@@ -1039,129 +1229,165 @@
1039
1229
  }
1040
1230
  .sky-theme-modern h1,
1041
1231
  .sky-theme-modern .sky-font-heading-1 {
1042
- font-family: "BLKB Sans", "Helvetica Neue", Arial, sans-serif;
1043
- font-size: 32px;
1044
- font-weight: 300;
1232
+ color: var(--sky-color-text-heading);
1233
+ font-family: var(--sky-font-family-primary);
1234
+ font-size: var(--sky-font-size-heading-1);
1235
+ font-weight: var(--sky-font-weight-heading-1);
1045
1236
  }
1046
1237
  .sky-theme-modern h2,
1047
1238
  .sky-theme-modern .sky-font-heading-2 {
1048
- font-family: "BLKB Sans", "Helvetica Neue", Arial, sans-serif;
1049
- font-size: 24px;
1050
- font-weight: 400;
1239
+ color: var(--sky-color-text-heading);
1240
+ font-family: var(--sky-font-family-primary);
1241
+ font-size: var(--sky-font-size-heading-2);
1242
+ font-weight: var(--sky-font-weight-heading-2);
1051
1243
  }
1052
1244
  .sky-theme-modern h3,
1053
1245
  .sky-theme-modern .sky-font-heading-3 {
1054
- color: var(--sky-text-color-default);
1055
- font-size: 20px;
1056
- font-weight: 400;
1246
+ color: var(--sky-color-text-heading);
1247
+ font-size: var(--sky-font-size-heading-3);
1248
+ font-weight: var(--sky-font-weight-heading-3);
1057
1249
  }
1058
1250
  .sky-theme-modern h4,
1059
1251
  .sky-theme-modern .sky-font-heading-4 {
1060
- color: var(--sky-text-color-default);
1061
- font-size: 16px;
1062
- font-weight: var(--sky-theme-modern-font-heading-4-weight);
1252
+ color: var(--sky-color-text-heading);
1253
+ font-size: var(--sky-font-size-heading-4);
1254
+ font-weight: var(--sky-font-weight-heading-4);
1063
1255
  text-transform: none;
1064
1256
  }
1065
1257
  .sky-theme-modern h5,
1066
1258
  .sky-theme-modern .sky-font-heading-5 {
1067
- color: var(--sky-text-color-default);
1068
- font-size: 14px;
1069
- font-weight: var(--sky-theme-modern-font-heading-5-weight);
1259
+ color: var(--sky-color-text-heading);
1260
+ font-size: var(--sky-font-size-heading-5);
1261
+ font-weight: var(--sky-font-weight-heading-5);
1070
1262
  text-transform: none;
1071
1263
  }
1072
1264
  .sky-theme-modern p {
1073
- line-height: 1.5;
1265
+ line-height: var(--sky-override-p-line-height);
1074
1266
  }
1075
1267
  .sky-theme-modern mark.sky-highlight-mark {
1076
1268
  background-color: var(--sky-background-color-danger-dark);
1077
1269
  color: var(--sky-text-color-on-dark);
1078
1270
  }
1079
- .sky-theme-modern.sky-theme-mode-dark h1,
1080
- .sky-theme-modern.sky-theme-mode-dark h2,
1081
- .sky-theme-modern.sky-theme-mode-dark h3,
1082
- .sky-theme-modern.sky-theme-mode-dark h6,
1083
- .sky-theme-modern.sky-theme-mode-dark .sky-font-heading-1,
1084
- .sky-theme-modern.sky-theme-mode-dark .sky-font-heading-2,
1085
- .sky-theme-modern.sky-theme-mode-dark .sky-font-heading-3,
1086
- .sky-theme-modern.sky-theme-mode-dark .sky-font-heading-6 {
1087
- color: var(--sky-text-color-default);
1271
+ .sky-theme-modern .sky-rounded-corners {
1272
+ border-radius: var(--sky-border-radius-s);
1088
1273
  }
1089
- .sky-theme-modern.sky-theme-mode-dark h4,
1090
- .sky-theme-modern.sky-theme-mode-dark h5,
1091
- .sky-theme-modern.sky-theme-mode-dark .sky-font-heading-4,
1092
- .sky-theme-modern.sky-theme-mode-dark .sky-font-heading-5 {
1093
- color: var(--sky-text-color-deemphasized);
1274
+
1275
+ :is(.sky-theme-modern.sky-theme-brand-blackbaud) h1,
1276
+ :is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-heading-1 {
1277
+ line-height: var(--sky-font-line_height-heading-1);
1094
1278
  }
1095
- .sky-theme-modern .sky-rounded-corners {
1096
- border-radius: 6px;
1279
+ :is(.sky-theme-modern.sky-theme-brand-blackbaud) h2,
1280
+ :is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-heading-2 {
1281
+ line-height: var(--sky-font-line_height-heading-2);
1282
+ }
1283
+ :is(.sky-theme-modern.sky-theme-brand-blackbaud) h3,
1284
+ :is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-heading-3 {
1285
+ line-height: var(--sky-font-line_height-heading-3);
1286
+ }
1287
+ :is(.sky-theme-modern.sky-theme-brand-blackbaud) h4,
1288
+ :is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-heading-4 {
1289
+ line-height: var(--sky-font-line_height-heading-4);
1290
+ }
1291
+ :is(.sky-theme-modern.sky-theme-brand-blackbaud) h5,
1292
+ :is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-heading-5 {
1293
+ line-height: var(--sky-font-line_height-heading-5);
1097
1294
  }
1098
1295
 
1099
1296
  .sky-theme-modern .sky-font-body-default {
1100
- font-size: 16px;
1101
- font-weight: 400;
1297
+ color: var(--sky-color-text-default);
1298
+ font-family: var(--sky-font-family-primary);
1299
+ font-size: var(--sky-font-size-body-m);
1300
+ font-weight: var(--sky-font-weight-body-m);
1102
1301
  }
1103
1302
  .sky-theme-modern .sky-font-body-sm {
1104
- font-size: 13px;
1105
- font-weight: 400;
1303
+ color: var(--sky-color-text-default);
1304
+ font-family: var(--sky-font-family-primary);
1305
+ font-size: var(--sky-font-size-body-s);
1306
+ font-weight: var(--sky-font-weight-body-s);
1106
1307
  }
1107
1308
  .sky-theme-modern .sky-font-body-lg {
1108
- font-size: 18px;
1109
- font-weight: 300;
1309
+ color: var(--sky-color-text-default);
1310
+ font-family: var(--sky-font-family-primary);
1311
+ font-size: var(--sky-font-size-body-l);
1312
+ font-weight: var(--sky-font-weight-body-l);
1110
1313
  }
1111
1314
  .sky-theme-modern .sky-font-data-label {
1112
- color: #686c73;
1113
- font-size: 16px;
1114
- font-weight: 400;
1315
+ color: var(--sky-color-text-deemphasized);
1316
+ font-family: var(--sky-font-family-primary);
1317
+ font-size: var(--sky-font-size-data_label);
1318
+ font-weight: var(--sky-font-weight-data_label);
1115
1319
  }
1116
1320
  .sky-theme-modern .sky-font-field-label {
1117
- color: #686c73;
1118
- font-size: 16px;
1119
- font-weight: 400;
1321
+ color: var(--sky-color-text-deemphasized);
1322
+ font-family: var(--sky-font-family-primary);
1323
+ font-size: var(--sky-font-size-data_label);
1324
+ font-weight: var(--sky-font-weight-data_label);
1120
1325
  }
1121
1326
  .sky-theme-modern .sky-font-deemphasized {
1122
- color: var(--sky-text-color-deemphasized);
1123
- font-style: italic;
1327
+ color: var(--sky-color-text-deemphasized);
1328
+ font-family: var(--sky-font-family-primary);
1329
+ font-style: var(--sky-font-style-deemphasized-style);
1330
+ font-weight: var(--sky-font-style-deemphasized-weight);
1124
1331
  font-size: inherit;
1125
1332
  }
1126
1333
  .sky-theme-modern .sky-font-emphasized {
1127
- font-weight: 700;
1334
+ font-family: var(--sky-font-family-primary);
1128
1335
  font-size: inherit;
1336
+ font-weight: var(--sky-font-weight-emphasized);
1129
1337
  }
1130
1338
  .sky-theme-modern .sky-font-display-1 {
1131
- font-family: "BLKB Sans", "Helvetica Neue", Arial, sans-serif;
1132
- font-size: 48px;
1133
- font-weight: 400;
1339
+ color: var(--sky-color-text-default);
1340
+ font-family: var(--sky-font-family-primary);
1341
+ font-size: var(--sky-font-size-display-1);
1342
+ font-weight: var(--sky-font-weight-display-1);
1134
1343
  }
1135
1344
  .sky-theme-modern .sky-font-display-2 {
1136
- font-family: "BLKB Sans", "Helvetica Neue", Arial, sans-serif;
1137
- font-size: 28px;
1138
- font-weight: 400;
1345
+ color: var(--sky-color-text-default);
1346
+ font-family: var(--sky-font-family-primary);
1347
+ font-size: var(--sky-font-size-display-2);
1348
+ font-weight: var(--sky-font-weight-display-2);
1139
1349
  }
1140
1350
  .sky-theme-modern .sky-font-display-3,
1141
1351
  .sky-theme-modern .sky-headline {
1142
- font-family: "BLKB Sans", "Helvetica Neue", Arial, sans-serif;
1143
- font-size: 20px;
1144
- font-weight: 400;
1352
+ color: var(--sky-color-text-default);
1353
+ font-family: var(--sky-font-family-primary);
1354
+ font-size: var(--sky-font-size-display-3);
1355
+ font-weight: var(--sky-font-weight-display-3);
1145
1356
  }
1146
1357
  .sky-theme-modern .sky-font-display-4 {
1147
- font-family: "BLKB Sans", "Helvetica Neue", Arial, sans-serif;
1148
- font-size: 16px;
1149
- font-weight: 700;
1150
- }
1151
- .sky-theme-modern.sky-theme-mode-dark .sky-font-data-label,
1152
- .sky-theme-modern.sky-theme-mode-dark .sky-font-display-1,
1153
- .sky-theme-modern.sky-theme-mode-dark .sky-font-display-2,
1154
- .sky-theme-modern.sky-theme-mode-dark .sky-font-display-3,
1155
- .sky-theme-modern.sky-theme-mode-dark .sky-font-display-4,
1156
- .sky-theme-modern.sky-theme-mode-dark .sky-font-emphasized,
1157
- .sky-theme-modern.sky-theme-mode-dark .sky-headline {
1158
- color: var(--sky-text-color-default);
1358
+ color: var(--sky-color-text-default);
1359
+ font-family: var(--sky-font-family-primary);
1360
+ font-size: var(--sky-font-size-display-4);
1361
+ font-weight: var(--sky-font-weight-display-4);
1159
1362
  }
1160
- .sky-theme-modern.sky-theme-mode-dark .sky-font-deemphasized,
1161
- .sky-theme-modern.sky-theme-mode-dark .sky-field-label,
1162
- .sky-theme-modern.sky-theme-mode-dark .sky-font-data-label,
1163
- .sky-theme-modern.sky-theme-mode-dark .sky-font-field-label {
1164
- color: var(--sky-text-color-deemphasized);
1363
+
1364
+ :is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-body-default {
1365
+ line-height: var(--sky-font-line_height-body-m);
1366
+ }
1367
+ :is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-body-sm {
1368
+ line-height: var(--sky-font-line_height-body-s);
1369
+ }
1370
+ :is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-body-lg {
1371
+ line-height: var(--sky-font-line_height-body-l);
1372
+ }
1373
+ :is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-data-label {
1374
+ line-height: var(--sky-font-line_height-data_label);
1375
+ }
1376
+ :is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-field-label {
1377
+ line-height: var(--sky-font-line_height-data_label);
1378
+ }
1379
+ :is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-display-1 {
1380
+ line-height: var(--sky-font-line_height-display-1);
1381
+ }
1382
+ :is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-display-2 {
1383
+ line-height: var(--sky-font-line_height-display-2);
1384
+ }
1385
+ :is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-display-3,
1386
+ :is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-headline {
1387
+ line-height: var(--sky-font-line_height-display-3);
1388
+ }
1389
+ :is(.sky-theme-modern.sky-theme-brand-blackbaud) .sky-font-display-4 {
1390
+ line-height: var(--sky-font-line_height-display-4);
1165
1391
  }
1166
1392
 
1167
1393
  /*
@@ -1174,7 +1400,7 @@
1174
1400
  padding: 15px 15px 15px 15px;
1175
1401
  }
1176
1402
  .sky-theme-modern .sky-padding-even-lg {
1177
- padding: 20px 20px 20px 20px;
1403
+ padding: var(--sky-space-inset-balanced-l);
1178
1404
  }
1179
1405
  .sky-theme-modern .sky-padding-even-xl {
1180
1406
  padding: 30px 30px 30px 30px;