@blackbaud/skyux-design-tokens 0.0.30 → 0.0.31

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/CHANGELOG.md +8 -0
  2. package/package.json +1 -1
  3. package/scss/blackbaud.css +112 -118
  4. package/scss/modern.css +53 -18
package/CHANGELOG.md CHANGED
@@ -2,6 +2,14 @@
2
2
 
3
3
  - Added `neutral-medium-dark` token in modern. [#64](https://github.com/blackbaud/skyux-design-tokens/pull/64)
4
4
 
5
+ ## [0.0.31](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.30...0.0.31) (2024-09-26)
6
+
7
+
8
+ ### Features
9
+
10
+ * colors and borders ([#81](https://github.com/blackbaud/skyux-design-tokens/issues/81)) ([31d1896](https://github.com/blackbaud/skyux-design-tokens/commit/31d1896f755bb683240f4bd1c80fdfcaf8870068))
11
+ * global styles font, theme, type ([#80](https://github.com/blackbaud/skyux-design-tokens/issues/80)) ([edb4993](https://github.com/blackbaud/skyux-design-tokens/commit/edb4993cc463d4c2855f2aface88a0fbfd48542a))
12
+
5
13
  ## [0.0.30](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.29...0.0.30) (2024-09-24)
6
14
 
7
15
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "0.0.30",
3
+ "version": "0.0.31",
4
4
  "description": "Design tokens for SKY UX",
5
5
  "homepage": "https://github.com/blackbaud/skyux-design-tokens",
6
6
  "license": "MIT",
package/scss/blackbaud.css CHANGED
@@ -24,6 +24,7 @@
24
24
  --bb-size-fluid-125: 1.25rem;
25
25
  --bb-size-fluid-100: 1rem;
26
26
  --bb-size-fluid-75: 0.75rem;
27
+ --bb-size-fluid-62: 0.625rem;
27
28
  --bb-size-fluid-50: 0.5rem;
28
29
  --bb-size-fluid-37: 0.375rem;
29
30
  --bb-size-fluid-25: 0.25rem;
@@ -37,21 +38,6 @@
37
38
  --bb-shadow-gray-2: 0 1px 8px 0 rgba(0,0,0,0.2), 0 3px 3px -2px rgba(0,0,0,0.12), 0 3px 4px 0 rgba(0,0,0,0.14);
38
39
  --bb-shadow-gray-1: 0 1px 3px 0 rgba(0,0,0,0.2), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.14);
39
40
  --bb-shadow-gray-0: 0 0 0 0 #000000;
40
- --bb-color-transparent: rgba(0, 0, 0, 0);
41
- --bb-color-brand-soft-purple: #c898fa;
42
- --bb-color-brand-jurple: #7a04dd;
43
- --bb-color-brand-dark-green: #04805b;
44
- --bb-color-brand-violet-tint: #f9f2fe;
45
- --bb-color-brand-impact-green-tint: #ecfcf4;
46
- --bb-color-brand-charcoal-tint: #eeeeef;
47
- --bb-color-brand-charcoal: #252b33;
48
- --bb-color-brand-flint: #51555c;
49
- --bb-color-brand-violet: #b061f2;
50
- --bb-color-brand-sky-tint: #ebfbff;
51
- --bb-color-brand-classic-blue: #006880;
52
- --bb-color-brand-trusted-blue: #004054;
53
- --bb-color-brand-impact-green: #0cd973;
54
- --bb-color-brand-sky-blue: #00ccff;
55
41
  --bb-color-yellow-1000: #32230a;
56
42
  --bb-color-yellow-900: #644615;
57
43
  --bb-color-yellow-800: #976a1f;
@@ -92,8 +78,6 @@
92
78
  --bb-color-blue-300: #a2c2f0;
93
79
  --bb-color-blue-200: #d0e1f7;
94
80
  --bb-color-blue-100: #e8f0fb;
95
- --bb-color-black: #000000;
96
- --bb-color-white: #ffffff;
97
81
  --bb-color-gray-1200: #0f1114;
98
82
  --bb-color-gray-1100: #161a1f;
99
83
  --bb-color-gray-1000: #1e2229;
@@ -108,6 +92,9 @@
108
92
  --bb-color-gray-100: #d3d5d6;
109
93
  --bb-color-gray-50: #e9eaeb;
110
94
  --bb-color-gray-25: #f9f9f9;
95
+ --bb-color-transparent: rgba(0, 0, 0, 0);
96
+ --bb-color-black: #000000;
97
+ --bb-color-white: #ffffff;
111
98
  --bb-space-11: 64px;
112
99
  --bb-space-10: 48px;
113
100
  --bb-space-9: 36px;
@@ -127,33 +114,33 @@
127
114
  --bb-border-radius-050: 0.5rem;
128
115
  --bb-border-radius-025: 0.25rem;
129
116
  --bb-border-radius-none: 0rem;
130
- --bb-line-height-1200: 4.75rem;
131
- --bb-line-height-1100: 4.25rem;
132
- --bb-line-height-1000: 3.375rem;
133
- --bb-line-height-900: 3rem;
134
- --bb-line-height-800: 3rem;
135
- --bb-line-height-700: 2.625rem;
136
- --bb-line-height-600: 2.25rem;
137
- --bb-line-height-500: 2rem;
138
- --bb-line-height-400: 1.75rem;
139
- --bb-line-height-300: 1.5rem;
140
- --bb-line-height-200: 1.25rem;
141
- --bb-line-height-100: 1rem;
117
+ --bb-line_height-1200: 4.75rem;
118
+ --bb-line_height-1100: 4.25rem;
119
+ --bb-line_height-1000: 3.375rem;
120
+ --bb-line_height-900: 3rem;
121
+ --bb-line_height-800: 3rem;
122
+ --bb-line_height-700: 2.625rem;
123
+ --bb-line_height-600: 2.25rem;
124
+ --bb-line_height-500: 2rem;
125
+ --bb-line_height-400: 1.75rem;
126
+ --bb-line_height-300: 1.5rem;
127
+ --bb-line_height-200: 1.25rem;
128
+ --bb-line_height-100: 1rem;
142
129
  --bb-letter_spacing-normal: normal;
143
130
  --bb-letter_spacing-wider: 0.32px;
144
131
  --bb-font-src-sans-italic: url("https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff") format("woff");
145
132
  --bb-font-src-sans-regular: url("https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Regular.woff") format("woff");
146
- --bb-font-style-normal-style: normal;
147
- --bb-font-style-normal-weight: 400;
148
133
  --bb-font-style-semibold-italic-style: italic;
149
134
  --bb-font-style-semibold-italic-weight: 600;
150
- --bb-font-style-light-italic-style: italic;
151
- --bb-font-style-light-italic-weight: 300;
152
- --bb-font-style-light: 300;
153
135
  --bb-font-style-semibold: 600;
154
136
  --bb-font-style-italic-style: italic;
155
137
  --bb-font-style-italic-weight: 400;
138
+ --bb-font-style-normal-style: normal;
139
+ --bb-font-style-normal-weight: 400;
156
140
  --bb-font-style-regular: 400;
141
+ --bb-font-style-light-italic-style: italic;
142
+ --bb-font-style-light-italic-weight: 300;
143
+ --bb-font-style-light: 300;
157
144
  --bb-font-weight-bold: 700;
158
145
  --bb-font-weight-semibold: 600;
159
146
  --bb-font-weight-regular: 400;
@@ -177,18 +164,18 @@
177
164
  .sky-theme-modern.sky-theme-brand-blackbaud.sky-theme-mode-dark {
178
165
  --sky-color-border-input-error: var(--bb-color-red-600);
179
166
  --sky-color-border-input-disabled: var(--bb-color-gray-600);
180
- --sky-color-border-input-focus: var(--bb-color-brand-sky-blue);
181
- --sky-color-border-input-active: var(--bb-color-brand-sky-blue);
182
- --sky-color-border-input-hover: var(--bb-color-brand-sky-blue);
167
+ --sky-color-border-input-focus: var(--bb-color-blue-300);
168
+ --sky-color-border-input-active: var(--bb-color-blue-300);
169
+ --sky-color-border-input-hover: var(--bb-color-blue-300);
183
170
  --sky-color-border-input-base: var(--bb-color-gray-600);
184
171
  --sky-color-border-neutral_soft: var(--bb-color-gray-600);
185
172
  --sky-color-icon-inverse: var(--bb-color-black);
186
- --sky-color-icon-action: var(--bb-color-brand-sky-blue);
187
- --sky-color-text-heading: var(--bb-color-brand-impact-green);
173
+ --sky-color-icon-action: var(--bb-color-blue-300);
174
+ --sky-color-text-heading: var(--bb-color-green-600);
188
175
  --sky-color-text-inverse: var(--bb-color-black);
189
176
  --sky-color-text-danger: var(--bb-color-red-600);
190
177
  --sky-color-text-deemphasized: var(--bb-color-gray-200);
191
- --sky-color-text-action: var(--bb-color-brand-sky-blue);
178
+ --sky-color-text-action: var(--bb-color-blue-300);
192
179
  --sky-color-text-default: var(--bb-color-gray-25);
193
180
  --sky-color-background-page: var(--bb-color-gray-1100);
194
181
  --sky-color-background-container: var(--bb-color-gray-900);
@@ -223,47 +210,43 @@
223
210
  --sky-elevation-overflow: var(--bb-shadow-gray-2);
224
211
  --sky-elevation-focus: var(--bb-shadow-gray-2);
225
212
  --sky-elevation-none: var(--bb-shadow-gray-0);
226
- --sky-color-border-input-disabled: var(--bb-color-gray-100);
227
213
  --sky-color-border-input-error: var(--bb-color-red-600);
214
+ --sky-color-border-input-disabled: var(--bb-color-gray-100);
228
215
  --sky-color-border-input-focus: var(--bb-color-blue-600);
229
216
  --sky-color-border-input-active: var(--bb-color-blue-600);
230
217
  --sky-color-border-input-hover: var(--bb-color-blue-600);
231
218
  --sky-color-border-input-base: var(--bb-color-gray-100);
232
- --sky-color-border-action-disabled: var(--bb-color-gray-100);
233
- --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-100);
234
219
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
235
220
  --sky-color-border-action-tertiary-active: var(--bb-color-blue-600);
236
221
  --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
237
222
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
238
- --sky-color-border-action-secondary-disabled: var(--bb-color-gray-100);
239
223
  --sky-color-border-action-secondary-focus: var(--bb-color-blue-600);
240
224
  --sky-color-border-action-secondary-active: var(--bb-color-blue-600);
241
225
  --sky-color-border-action-secondary-hover: var(--bb-color-blue-600);
242
226
  --sky-color-border-action-secondary-base: var(--bb-color-transparent);
243
- --sky-color-border-action-primary-disabled: var(--bb-color-gray-100);
244
227
  --sky-color-border-action-primary-focus: var(--bb-color-blue-600);
245
228
  --sky-color-border-action-primary-active: var(--bb-color-blue-600);
246
229
  --sky-color-border-action-primary-hover: var(--bb-color-blue-600);
247
230
  --sky-color-border-action-primary-base: var(--bb-color-blue-600);
231
+ --sky-color-border-action-disabled: var(--bb-color-gray-100);
248
232
  --sky-color-border-container-base: var(--bb-color-gray-100);
249
- --sky-color-border-selected: var(--bb-color-blue-600);
250
- --sky-color-border-warning: var(--bb-color-yellow-600);
251
- --sky-color-border-success: var(--bb-color-green-600);
252
233
  --sky-color-border-info: var(--bb-color-blue-600);
234
+ --sky-color-border-success: var(--bb-color-green-600);
235
+ --sky-color-border-warning: var(--bb-color-yellow-600);
253
236
  --sky-color-border-danger: var(--bb-color-red-600);
237
+ --sky-color-border-selected: var(--bb-color-blue-600);
254
238
  --sky-color-background-input-selected: var(--bb-color-blue-600);
255
239
  --sky-color-background-input-disabled: var(--bb-color-gray-50);
256
240
  --sky-color-background-input-base: var(--bb-color-transparent);
257
- --sky-color-background-action-disabled: var(--bb-color-gray-50);
241
+ --sky-color-background-action-danger-base: var(--bb-color-red-600);
258
242
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
259
- --sky-color-background-action-secondary-base: var(--bb-color-transparent);
243
+ --sky-color-background-action-secondary-base: var(--bb-color-white);
260
244
  --sky-color-background-action-primary-base: var(--bb-color-blue-600);
261
- --sky-color-background-action-danger-base: var(--bb-color-red-600);
245
+ --sky-color-background-action-disabled: var(--bb-color-gray-50);
262
246
  --sky-color-background-container-info: var(--bb-color-blue-100);
263
247
  --sky-color-background-container-success: var(--bb-color-green-300);
264
248
  --sky-color-background-container-warning: var(--bb-color-yellow-300);
265
249
  --sky-color-background-container-danger: var(--bb-color-red-300);
266
- --sky-color-background-container-promo: var(--bb-color-brand-sky-tint);
267
250
  --sky-color-background-container-menu: var(--bb-color-white);
268
251
  --sky-color-background-container-base: var(--bb-color-white);
269
252
  --sky-color-background-page: var(--bb-color-gray-25);
@@ -284,16 +267,27 @@
284
267
  }
285
268
  .sky-theme-modern.sky-theme-brand-blackbaud {
286
269
  --sky-border-style-accent: var(--bb-border-style-solid);
270
+ --sky-border-width-separator-row: var(--bb-size-fixed-6);
271
+ --sky-border-width-separator-dark: var(--bb-size-fixed-6);
272
+ --sky-border-width-input-disabled: var(--bb-size-fixed-6);
273
+ --sky-border-width-input-error: var(--bb-size-fixed-12);
274
+ --sky-border-width-input-focus: var(--bb-size-fixed-12);
275
+ --sky-border-width-input-active: var(--bb-size-fixed-12);
276
+ --sky-border-width-input-hover: var(--bb-size-fixed-6);
277
+ --sky-border-width-input-base: var(--bb-size-fixed-6);
287
278
  --sky-border-width-container-base: var(--bb-size-fixed-6);
288
- --sky-border-width-divider: var(--bb-size-fixed-6);
289
- --sky-border-width-interactive-disabled: var(--bb-size-fixed-6);
290
- --sky-border-width-interactive-error: var(--bb-size-fixed-12);
291
- --sky-border-width-interactive-selected: var(--bb-size-fixed-6);
292
- --sky-border-width-interactive-focus: var(--bb-size-fixed-12);
293
- --sky-border-width-interactive-active: var(--bb-size-fixed-12);
294
- --sky-border-width-interactive-hover: var(--bb-size-fixed-6);
295
- --sky-border-width-interactive-base: var(--bb-size-fixed-6);
279
+ --sky-border-width-action-selected-xl: var(--bb-size-fixed-37);
280
+ --sky-border-width-action-selected-l: var(--bb-size-fixed-25);
281
+ --sky-border-width-action-selected-m: var(--bb-size-fixed-12);
282
+ --sky-border-width-action-selected-s: var(--bb-size-fixed-6);
283
+ --sky-border-width-action-disabled: var(--bb-size-fixed-6);
284
+ --sky-border-width-action-error: var(--bb-size-fixed-12);
285
+ --sky-border-width-action-focus: var(--bb-size-fixed-12);
286
+ --sky-border-width-action-active: var(--bb-size-fixed-12);
287
+ --sky-border-width-action-hover: var(--bb-size-fixed-6);
288
+ --sky-border-width-action-base: var(--bb-size-fixed-6);
296
289
  --sky-border-width-accent: var(--bb-size-fixed-37);
290
+ --sky-border-width-divider: var(--bb-size-fixed-6);
297
291
  --sky-border-radius-pill: var(--bb-border-radius-pill);
298
292
  --sky-border-radius-m: var(--bb-size-fluid-50);
299
293
  --sky-border-radius-s: var(--bb-size-fluid-25);
@@ -319,26 +313,26 @@
319
313
  --sky-font-weight-emphasized: var(--bb-font-weight-semibold);
320
314
  --sky-font-letter_spacing-hint-s: var(--bb-letter_spacing-normal);
321
315
  --sky-font-letter_spacing-input-label: var(--bb-letter_spacing-wider);
322
- --sky-font-line_height-metric-l: var(--bb-line-height-700);
323
- --sky-font-line_height-metric-m: var(--bb-line-height-400);
324
- --sky-font-line_height-metric-s: var(--bb-line-height-200);
325
- --sky-font-line_height-input-val: var(--bb-line-height-200);
326
- --sky-font-line_height-input-label: var(--bb-line-height-100);
327
- --sky-font-line_height-hint-m: var(--bb-line-height-200);
328
- --sky-font-line_height-hint-s: var(--bb-line-height-100);
329
- --sky-font-line_height-heading-5: var(--bb-line-height-200);
330
- --sky-font-line_height-heading-4: var(--bb-line-height-200);
331
- --sky-font-line_height-heading-3: var(--bb-line-height-300);
332
- --sky-font-line_height-heading-2: var(--bb-line-height-400);
333
- --sky-font-line_height-heading-1: var(--bb-line-height-500);
334
- --sky-font-line_height-display-4: var(--bb-line-height-800);
335
- --sky-font-line_height-display-3: var(--bb-line-height-900);
336
- --sky-font-line_height-display-2: var(--bb-line-height-1000);
337
- --sky-font-line_height-display-1: var(--bb-line-height-1100);
338
- --sky-font-line_height-body-l: var(--bb-line-height-300);
339
- --sky-font-line_height-body-m: var(--bb-line-height-200);
340
- --sky-font-line_height-body-s: var(--bb-line-height-100);
341
- --sky-font-line_height-data_label: var(--bb-line-height-200);
316
+ --sky-font-line_height-metric-l: var(--bb-line_height-700);
317
+ --sky-font-line_height-metric-m: var(--bb-line_height-400);
318
+ --sky-font-line_height-metric-s: var(--bb-line_height-200);
319
+ --sky-font-line_height-input-val: var(--bb-line_height-200);
320
+ --sky-font-line_height-input-label: var(--bb-line_height-100);
321
+ --sky-font-line_height-hint-m: var(--bb-line_height-200);
322
+ --sky-font-line_height-hint-s: var(--bb-line_height-100);
323
+ --sky-font-line_height-heading-5: var(--bb-line_height-200);
324
+ --sky-font-line_height-heading-4: var(--bb-line_height-200);
325
+ --sky-font-line_height-heading-3: var(--bb-line_height-300);
326
+ --sky-font-line_height-heading-2: var(--bb-line_height-400);
327
+ --sky-font-line_height-heading-1: var(--bb-line_height-500);
328
+ --sky-font-line_height-display-4: var(--bb-line_height-800);
329
+ --sky-font-line_height-display-3: var(--bb-line_height-900);
330
+ --sky-font-line_height-display-2: var(--bb-line_height-1000);
331
+ --sky-font-line_height-display-1: var(--bb-line_height-1100);
332
+ --sky-font-line_height-body-l: var(--bb-line_height-300);
333
+ --sky-font-line_height-body-m: var(--bb-line_height-200);
334
+ --sky-font-line_height-body-s: var(--bb-line_height-100);
335
+ --sky-font-line_height-data_label: var(--bb-line_height-200);
342
336
  --sky-font-style-metric-l: var(--bb-font-style-light);
343
337
  --sky-font-style-metric-m: var(--bb-font-style-regular);
344
338
  --sky-font-style-metric-s: var(--bb-font-style-semibold);
@@ -417,6 +411,14 @@
417
411
  --sky-size-icon-m: var(--bb-size-fluid-125);
418
412
  --sky-size-icon-s: var(--bb-size-fluid-100);
419
413
  --sky-space-switch_inset: calc(var(--sky-size-switch)+var(--sky-space-label_gap-s));
414
+ --sky-space-text_action_gap-l: var(--bb-size-fluid-100);
415
+ --sky-space-text_action_gap-m: var(--bb-size-fluid-75);
416
+ --sky-space-text_action_gap-s: var(--bb-size-fluid-50);
417
+ --sky-space-text_action_gap-xs: var(--bb-size-fluid-25);
418
+ --sky-space-text_action_gap-0: 0rem;
419
+ --sky-space-stacked_supplemental-m: var(--bb-size-fluid-50);
420
+ --sky-space-stacked_supplemental-s: var(--bb-size-fluid-25);
421
+ --sky-space-stacked_supplemental-0: 0rem;
420
422
  --sky-space-label_gap-xl: var(--bb-size-fluid-100);
421
423
  --sky-space-label_gap-l: var(--bb-size-fluid-75);
422
424
  --sky-space-label_gap-m: var(--bb-size-fluid-50);
@@ -424,6 +426,11 @@
424
426
  --sky-space-label_gap-xs: var(--bb-size-fluid-12);
425
427
  --sky-space-label_gap-xxs: var(--bb-size-fluid-6);
426
428
  --sky-space-label_gap-0: 0rem;
429
+ --sky-space-icon_gap-xl: var(--bb-size-fluid-100);
430
+ --sky-space-icon_gap-l: var(--bb-size-fluid-75);
431
+ --sky-space-icon_gap-m: var(--bb-size-fluid-50);
432
+ --sky-space-icon_gap-s: var(--bb-size-fluid-25);
433
+ --sky-space-icon_gap-0: 0rem;
427
434
  --sky-space-form_gap-xl: var(--bb-size-fluid-150);
428
435
  --sky-space-form_gap-l: var(--bb-size-fluid-100);
429
436
  --sky-space-form_gap-m: var(--bb-size-fluid-75);
@@ -434,20 +441,6 @@
434
441
  --sky-space-action_group_gap-m: var(--bb-size-fluid-50);
435
442
  --sky-space-action_group_gap-s: var(--bb-size-fluid-25);
436
443
  --sky-space-action_group_gap-0: 0rem;
437
- --sky-space-text_action_gap-l: var(--bb-size-fluid-100);
438
- --sky-space-text_action_gap-m: var(--bb-size-fluid-75);
439
- --sky-space-text_action_gap-s: var(--bb-size-fluid-50);
440
- --sky-space-text_action_gap-xs: var(--bb-size-fluid-25);
441
- --sky-space-text_action_gap-0: 0rem;
442
- --sky-space-icon_gap-xl: var(--bb-size-fluid-100);
443
- --sky-space-icon_gap-l: var(--bb-size-fluid-75);
444
- --sky-space-icon_gap-m: var(--bb-size-fluid-50);
445
- --sky-space-icon_gap-s: var(--bb-size-fluid-25);
446
- --sky-space-icon_gap-0: 0rem;
447
- --sky-space-stacked_supplemental-m: var(--bb-size-fluid-50);
448
- --sky-space-stacked_supplemental-s: var(--bb-size-fluid-25);
449
- --sky-space-stacked_supplemental-0: 0rem;
450
- --sky-space-inset-input_label-top-m: var(--bb-size-fluid-37);
451
444
  --sky-space-inset-pillarbox-2_3-left-l: var(--bb-size-fluid-150);
452
445
  --sky-space-inset-pillarbox-2_3-left-m: var(--bb-size-fluid-75);
453
446
  --sky-space-inset-pillarbox-2_3-bottom-l: var(--bb-size-fluid-100);
@@ -456,18 +449,6 @@
456
449
  --sky-space-inset-pillarbox-2_3-right-m: var(--bb-size-fluid-75);
457
450
  --sky-space-inset-pillarbox-2_3-top-l: var(--bb-size-fluid-100);
458
451
  --sky-space-inset-pillarbox-2_3-top-m: var(--bb-size-fluid-50);
459
- --sky-space-inset-pillarbox-1_4-left-s: var(--bb-size-fluid-50);
460
- --sky-space-inset-pillarbox-1_4-left-xs: var(--bb-size-fluid-25);
461
- --sky-space-inset-pillarbox-1_4-bottom-s: var(--bb-size-fluid-12);
462
- --sky-space-inset-pillarbox-1_4-bottom-xs: var(--bb-size-fluid-6);
463
- --sky-space-inset-pillarbox-1_4-right-s: var(--bb-size-fluid-50);
464
- --sky-space-inset-pillarbox-1_4-right-xs: var(--bb-size-fluid-25);
465
- --sky-space-inset-pillarbox-1_4-top-s: var(--bb-size-fluid-12);
466
- --sky-space-inset-pillarbox-1_4-top-xs: var(--bb-size-fluid-6);
467
- --sky-space-inset-pillarbox-1_3-left-m: var(--bb-size-fluid-150);
468
- --sky-space-inset-pillarbox-1_3-bottom-m: var(--bb-size-fluid-50);
469
- --sky-space-inset-pillarbox-1_3-right-m: var(--bb-size-fluid-150);
470
- --sky-space-inset-pillarbox-1_3-top-m: var(--bb-size-fluid-50);
471
452
  --sky-space-inset-pillarbox-1_2-left-l: var(--bb-size-fluid-150);
472
453
  --sky-space-inset-pillarbox-1_2-left-m: var(--bb-size-fluid-100);
473
454
  --sky-space-inset-pillarbox-1_2-left-s: var(--bb-size-fluid-50);
@@ -480,6 +461,31 @@
480
461
  --sky-space-inset-pillarbox-1_2-top-l: var(--bb-size-fluid-75);
481
462
  --sky-space-inset-pillarbox-1_2-top-m: var(--bb-size-fluid-50);
482
463
  --sky-space-inset-pillarbox-1_2-top-s: var(--bb-size-fluid-25);
464
+ --sky-space-inset-pillarbox-1_3-left-m: var(--bb-size-fluid-150);
465
+ --sky-space-inset-pillarbox-1_3-bottom-m: var(--bb-size-fluid-50);
466
+ --sky-space-inset-pillarbox-1_3-right-m: var(--bb-size-fluid-150);
467
+ --sky-space-inset-pillarbox-1_3-top-m: var(--bb-size-fluid-50);
468
+ --sky-space-inset-pillarbox-1_4-left-s: var(--bb-size-fluid-50);
469
+ --sky-space-inset-pillarbox-1_4-left-xs: var(--bb-size-fluid-25);
470
+ --sky-space-inset-pillarbox-1_4-bottom-s: var(--bb-size-fluid-12);
471
+ --sky-space-inset-pillarbox-1_4-bottom-xs: var(--bb-size-fluid-6);
472
+ --sky-space-inset-pillarbox-1_4-right-s: var(--bb-size-fluid-50);
473
+ --sky-space-inset-pillarbox-1_4-right-xs: var(--bb-size-fluid-25);
474
+ --sky-space-inset-pillarbox-1_4-top-s: var(--bb-size-fluid-12);
475
+ --sky-space-inset-pillarbox-1_4-top-xs: var(--bb-size-fluid-6);
476
+ --sky-space-inset-letterbox-left-l: var(--bb-size-fluid-100);
477
+ --sky-space-inset-letterbox-left-m: var(--bb-size-fluid-50);
478
+ --sky-space-inset-letterbox-left-s: var(--bb-size-fluid-25);
479
+ --sky-space-inset-letterbox-bottom-l: var(--bb-size-fluid-150);
480
+ --sky-space-inset-letterbox-bottom-m: var(--bb-size-fluid-100);
481
+ --sky-space-inset-letterbox-bottom-s: var(--bb-size-fluid-50);
482
+ --sky-space-inset-letterbox-right-l: var(--bb-size-fluid-100);
483
+ --sky-space-inset-letterbox-right-m: var(--bb-size-fluid-50);
484
+ --sky-space-inset-letterbox-right-s: var(--bb-size-fluid-25);
485
+ --sky-space-inset-letterbox-top-l: var(--bb-size-fluid-150);
486
+ --sky-space-inset-letterbox-top-m: var(--bb-size-fluid-100);
487
+ --sky-space-inset-letterbox-top-s: var(--bb-size-fluid-50);
488
+ --sky-space-inset-input_label-top-m: var(--bb-size-fluid-37);
483
489
  --sky-space-inset-input-left-m: var(--bb-size-fluid-100);
484
490
  --sky-space-inset-input-bottom-m: var(--bb-size-fluid-50);
485
491
  --sky-space-inset-input-right-m: var(--bb-size-fluid-100);
@@ -501,18 +507,6 @@
501
507
  --sky-space-inset-bottomless-right-l: var(--bb-size-fluid-100);
502
508
  --sky-space-inset-bottomless-top-xl: var(--bb-size-fluid-150);
503
509
  --sky-space-inset-bottomless-top-l: var(--bb-size-fluid-100);
504
- --sky-space-inset-letterbox-left-l: var(--bb-size-fluid-100);
505
- --sky-space-inset-letterbox-left-m: var(--bb-size-fluid-50);
506
- --sky-space-inset-letterbox-left-s: var(--bb-size-fluid-25);
507
- --sky-space-inset-letterbox-bottom-l: var(--bb-size-fluid-150);
508
- --sky-space-inset-letterbox-bottom-m: var(--bb-size-fluid-100);
509
- --sky-space-inset-letterbox-bottom-s: var(--bb-size-fluid-50);
510
- --sky-space-inset-letterbox-right-l: var(--bb-size-fluid-100);
511
- --sky-space-inset-letterbox-right-m: var(--bb-size-fluid-50);
512
- --sky-space-inset-letterbox-right-s: var(--bb-size-fluid-25);
513
- --sky-space-inset-letterbox-top-l: var(--bb-size-fluid-150);
514
- --sky-space-inset-letterbox-top-m: var(--bb-size-fluid-100);
515
- --sky-space-inset-letterbox-top-s: var(--bb-size-fluid-50);
516
510
  --sky-space-inset-balanced-xl: var(--bb-size-fluid-150);
517
511
  --sky-space-inset-balanced-l: var(--bb-size-fluid-100);
518
512
  --sky-space-inset-balanced-m: var(--bb-size-fluid-75);
package/scss/modern.css CHANGED
@@ -21,6 +21,8 @@
21
21
  --modern-font-style-semibold: 600;
22
22
  --modern-font-style-italic-style: italic;
23
23
  --modern-font-style-italic-weight: 400;
24
+ --modern-font-style-normal-style: normal;
25
+ --modern-font-style-normal-weight: 400;
24
26
  --modern-font-style-regular: 400;
25
27
  --modern-font-style-light: 300;
26
28
  --modern-font-weight-bold: 700;
@@ -39,6 +41,10 @@
39
41
  --modern-font-size-100: 12px;
40
42
  --modern-size-296: 296px;
41
43
  --modern-size-276: 276px;
44
+ --modern-size-96: 96px;
45
+ --modern-size-80: 80px;
46
+ --modern-size-64: 64px;
47
+ --modern-size-48: 48px;
42
48
  --modern-size-32: 32px;
43
49
  --modern-size-30: 30px;
44
50
  --modern-size-26: 26px;
@@ -54,6 +60,7 @@
54
60
  --modern-size-6: 6px;
55
61
  --modern-size-5: 5px;
56
62
  --modern-size-4: 4px;
63
+ --modern-size-3: 3px;
57
64
  --modern-size-2: 2px;
58
65
  --modern-size-1: 1px;
59
66
  --modern-size-0: 0rem;
@@ -96,35 +103,47 @@
96
103
  --sky-elevation-overflow: var(--modern-shadow-size-3);
97
104
  --sky-elevation-focus: var(--modern-shadow-size-3);
98
105
  --sky-elevation-none: var(--modern-shadow-size-0);
99
- --sky-color-border-container-base: var(--modern-color-gray-15);
100
106
  --sky-color-border-input-error: var(--modern-color-red-50);
107
+ --sky-color-border-input-disabled: var(--modern-color-gray-15);
101
108
  --sky-color-border-input-focus: var(--modern-color-blue-74);
102
109
  --sky-color-border-input-active: var(--modern-color-blue-74);
103
110
  --sky-color-border-input-hover: var(--modern-color-blue-74);
104
- --sky-color-border-input-disabled: var(--modern-color-gray-15);
105
111
  --sky-color-border-input-base: var(--modern-color-gray-15);
106
112
  --sky-color-border-action-tertiary-active: var(--modern-color-blue-74);
107
113
  --sky-color-border-action-tertiary-focus: var(--modern-color-blue-74);
108
114
  --sky-color-border-action-tertiary-hover: var(--modern-color-blue-74);
109
115
  --sky-color-border-action-tertiary-base: var(--modern-color-transparent);
116
+ --sky-color-border-action-secondary-base: var(--modern-color-gray-15);
117
+ --sky-color-border-action-primary-base: var(--modern-color-blue-74);
118
+ --sky-color-border-action-disabled: var(--modern-color-gray-15);
119
+ --sky-color-border-container-base: var(--modern-color-gray-15);
110
120
  --sky-color-border-info: var(--modern-color-blue-50);
111
121
  --sky-color-border-success: var(--modern-color-green-50);
112
122
  --sky-color-border-warning: var(--modern-color-yellow-50);
113
123
  --sky-color-border-danger: var(--modern-color-red-50);
124
+ --sky-color-border-selected: var(--modern-color-blue-74);
125
+ --sky-color-background-action-danger-base: var(--modern-color-red-70);
114
126
  --sky-color-background-action-tertiary-base: var(--modern-color-transparent);
127
+ --sky-color-background-action-secondary-base: var(--modern-color-white);
128
+ --sky-color-background-action-primary-base: var(--modern-color-blue-74);
129
+ --sky-color-background-action-disabled: var(--modern-color-gray-07);
115
130
  --sky-color-background-container-info: var(--modern-color-blue-10);
116
131
  --sky-color-background-container-success: var(--modern-color-green-30);
117
132
  --sky-color-background-container-warning: var(--modern-color-yellow-30);
118
133
  --sky-color-background-container-danger: var(--modern-color-red-30);
134
+ --sky-color-background-container-menu: var(--modern-color-white);
119
135
  --sky-color-background-container-base: var(--modern-color-white);
136
+ --sky-color-background-page: var(--modern-color-gray-005);
120
137
  --sky-color-icon-action: var(--modern-color-blue-74);
121
- --sky-color-icon-deemphasized: var(--modern-color-gray-70);
122
138
  --sky-color-icon-inverse: var(--modern-color-white);
123
139
  --sky-color-icon-info: var(--modern-color-blue-50);
124
140
  --sky-color-icon-success: var(--modern-color-green-50);
125
141
  --sky-color-icon-warning: var(--modern-color-yellow-50);
126
142
  --sky-color-icon-danger: var(--modern-color-red-50);
143
+ --sky-color-icon-deemphasized: var(--modern-color-gray-70);
127
144
  --sky-color-icon-default: var(--modern-color-gray-105);
145
+ --sky-color-text-heading: var(--modern-color-gray-105);
146
+ --sky-color-text-inverse: var(--modern-color-white);
128
147
  --sky-color-text-danger: var(--modern-color-red-70);
129
148
  --sky-color-text-action: var(--modern-color-blue-74);
130
149
  --sky-color-text-deemphasized: var(--modern-color-gray-70);
@@ -135,40 +154,55 @@
135
154
  --sky-border-radius-pill: var(--modern-border-radius-pill);
136
155
  --sky-border-radius-m: var(--modern-size-6);
137
156
  --sky-border-radius-s: var(--modern-size-6);
157
+ --sky-border-width-separator-row: var(--modern-size-1);
158
+ --sky-border-width-separator-dark: var(--modern-size-1);
159
+ --sky-border-width-input-disabled: var(--modern-size-1);
160
+ --sky-border-width-input-error: var(--modern-size-2);
161
+ --sky-border-width-input-focus: var(--modern-size-2);
162
+ --sky-border-width-input-active: var(--modern-size-2);
163
+ --sky-border-width-input-hover: var(--modern-size-1);
164
+ --sky-border-width-input-base: var(--modern-size-1);
138
165
  --sky-border-width-container-base: var(--modern-size-1);
139
- --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);
166
+ --sky-border-width-action-selected-xl: var(--modern-size-6);
167
+ --sky-border-width-action-selected-l: var(--modern-size-4);
168
+ --sky-border-width-action-selected-m: var(--modern-size-2);
169
+ --sky-border-width-action-selected-s: var(--modern-size-1);
170
+ --sky-border-width-action-disabled: var(--modern-size-1);
171
+ --sky-border-width-action-error: var(--modern-size-2);
172
+ --sky-border-width-action-focus: var(--modern-size-2);
173
+ --sky-border-width-action-active: var(--modern-size-2);
174
+ --sky-border-width-action-hover: var(--modern-size-1);
175
+ --sky-border-width-action-base: var(--modern-size-1);
146
176
  --sky-border-width-accent: var(--modern-size-7);
177
+ --sky-border-width-divider: var(--modern-size-1);
147
178
  --sky-text-font_family: var(--modern-font-name);
148
179
  --sky-size-max_width-overlay_message: var(--modern-size-276);
149
180
  --sky-size-width-viewport-smallest: var(--modern-size-296);
150
181
  --sky-size-switch: var(--modern-size-26);
182
+ --sky-size-illustration-xl: var(--modern-size-96);
183
+ --sky-size-illustration-l: var(--modern-size-80);
184
+ --sky-size-illustration-m: var(--modern-size-64);
185
+ --sky-size-illustration-s: var(--modern-size-48);
151
186
  --sky-size-icon-xl: var(--modern-size-32);
152
187
  --sky-size-icon-l: var(--modern-size-24);
153
188
  --sky-size-icon-m: var(--modern-size-20);
154
189
  --sky-size-icon-s: var(--modern-size-16);
155
- --sky-space-form_gap-xl: var(--modern-space-xl);
156
- --sky-space-form_gap-l: var(--modern-space-lg);
157
- --sky-space-form_gap-m: var(--modern-space-md);
158
- --sky-space-form_gap-s: var(--modern-space-s);
190
+ --sky-space-text_action_gap-l: var(--modern-space-lg);
191
+ --sky-space-text_action_gap-m: var(--modern-space-md);
192
+ --sky-space-text_action_gap-xs: var(--modern-space-xs);
159
193
  --sky-space-stacked_supplemental-s: var(--modern-space-xs);
160
194
  --sky-space-stacked_supplemental-0: 0rem;
161
195
  --sky-space-label_gap-s: var(--modern-space-xs);
162
196
  --sky-space-label_gap-xs: var(--modern-size-2);
163
197
  --sky-space-label_gap-xxs: var(--modern-size-1);
164
198
  --sky-space-label_gap-0: 0rem;
165
- --sky-space-text_action_gap-l: var(--modern-space-lg);
166
- --sky-space-text_action_gap-m: var(--modern-space-md);
167
- --sky-space-text_action_gap-xs: var(--modern-space-xs);
168
199
  --sky-space-icon_gap-l: var(--modern-space-md);
169
200
  --sky-space-icon_gap-m: var(--modern-space-s);
170
201
  --sky-space-icon_gap-s: var(--modern-space-xs);
171
- --sky-space-inset-input_label-top-m: var(--modern-size-6);
202
+ --sky-space-form_gap-xl: var(--modern-space-xl);
203
+ --sky-space-form_gap-l: var(--modern-space-lg);
204
+ --sky-space-form_gap-m: var(--modern-space-md);
205
+ --sky-space-form_gap-s: var(--modern-space-s);
172
206
  --sky-space-inset-pillarbox-2_3-left-l: var(--modern-size-30);
173
207
  --sky-space-inset-pillarbox-2_3-left-m: var(--modern-size-15);
174
208
  --sky-space-inset-pillarbox-2_3-bottom-l: var(--modern-size-20);
@@ -201,6 +235,7 @@
201
235
  --sky-space-inset-pillarbox-1_4-right-xs: var(--modern-size-5);
202
236
  --sky-space-inset-pillarbox-1_4-top-s: var(--modern-size-4);
203
237
  --sky-space-inset-pillarbox-1_4-top-xs: var(--modern-size-1);
238
+ --sky-space-inset-input_label-top-m: var(--modern-size-6);
204
239
  --sky-space-inset-input-left-m: var(--modern-size-15);
205
240
  --sky-space-inset-input-bottom-m: var(--modern-size-9);
206
241
  --sky-space-inset-input-right-m: var(--modern-size-15);