@blackbaud/skyux-design-tokens 0.0.30 → 0.0.32

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 +15 -0
  2. package/package.json +1 -1
  3. package/scss/blackbaud.css +140 -126
  4. package/scss/modern.css +80 -18
package/CHANGELOG.md CHANGED
@@ -2,6 +2,21 @@
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.32](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.31...0.0.32) (2024-09-27)
6
+
7
+
8
+ ### Features
9
+
10
+ * border, elevation tokens for public classes + size tokens for overlays ([#83](https://github.com/blackbaud/skyux-design-tokens/issues/83)) ([1f4f70b](https://github.com/blackbaud/skyux-design-tokens/commit/1f4f70bd530990d0e9b5684e2bb6035143a4e6d0))
11
+
12
+ ## [0.0.31](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.30...0.0.31) (2024-09-26)
13
+
14
+
15
+ ### Features
16
+
17
+ * colors and borders ([#81](https://github.com/blackbaud/skyux-design-tokens/issues/81)) ([31d1896](https://github.com/blackbaud/skyux-design-tokens/commit/31d1896f755bb683240f4bd1c80fdfcaf8870068))
18
+ * 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))
19
+
5
20
  ## [0.0.30](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.29...0.0.30) (2024-09-24)
6
21
 
7
22
 
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.32",
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
@@ -1,5 +1,5 @@
1
1
  .sky-theme-modern.sky-theme-brand-blackbaud {
2
- --bb-size-reading_container-max_width: 65ch, 33vw;
2
+ --bb-size-reading_container-max_width: 50ch, 40vw;
3
3
  --bb-size-fixed-6000: 960px;
4
4
  --bb-size-fixed-4000: 640px;
5
5
  --bb-size-fixed-2000: 320px;
@@ -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,31 @@
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-1000: 1.2308;
118
+ --bb-line_height-900: 1.1429;
119
+ --bb-line_height-800: 1.1111;
120
+ --bb-line_height-700: 1.25;
121
+ --bb-line_height-600: 1.2857;
122
+ --bb-line_height-500: 1.3333;
123
+ --bb-line_height-400: 1.4;
124
+ --bb-line_height-300: 1.5;
125
+ --bb-line_height-200: 1.4286;
126
+ --bb-line_height-100: 1.3333;
142
127
  --bb-letter_spacing-normal: normal;
143
128
  --bb-letter_spacing-wider: 0.32px;
144
129
  --bb-font-src-sans-italic: url("https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff") format("woff");
145
130
  --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
131
  --bb-font-style-semibold-italic-style: italic;
149
132
  --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
133
  --bb-font-style-semibold: 600;
154
134
  --bb-font-style-italic-style: italic;
155
135
  --bb-font-style-italic-weight: 400;
136
+ --bb-font-style-normal-style: normal;
137
+ --bb-font-style-normal-weight: 400;
156
138
  --bb-font-style-regular: 400;
139
+ --bb-font-style-light-italic-style: italic;
140
+ --bb-font-style-light-italic-weight: 300;
141
+ --bb-font-style-light: 300;
157
142
  --bb-font-weight-bold: 700;
158
143
  --bb-font-weight-semibold: 600;
159
144
  --bb-font-weight-regular: 400;
@@ -161,9 +146,7 @@
161
146
  --bb-font-family-sans: var(--bb-font-name), Helvetica Neue, Arial, sans-serif;
162
147
  --bb-font-family-monospaced: Menlo, Monaco, Consolas, 'Courier New', monospace;
163
148
  --bb-font-name: 'BLKB Sans';
164
- --bb-font-size-1200: 3.75rem;
165
- --bb-font-size-1100: 3.375rem;
166
- --bb-font-size-1000: 3rem;
149
+ --bb-font-size-1000: 3.25rem;
167
150
  --bb-font-size-900: 2.625rem;
168
151
  --bb-font-size-800: 2.25rem;
169
152
  --bb-font-size-700: 2rem;
@@ -177,18 +160,18 @@
177
160
  .sky-theme-modern.sky-theme-brand-blackbaud.sky-theme-mode-dark {
178
161
  --sky-color-border-input-error: var(--bb-color-red-600);
179
162
  --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);
163
+ --sky-color-border-input-focus: var(--bb-color-blue-300);
164
+ --sky-color-border-input-active: var(--bb-color-blue-300);
165
+ --sky-color-border-input-hover: var(--bb-color-blue-300);
183
166
  --sky-color-border-input-base: var(--bb-color-gray-600);
184
167
  --sky-color-border-neutral_soft: var(--bb-color-gray-600);
185
168
  --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);
169
+ --sky-color-icon-action: var(--bb-color-blue-300);
170
+ --sky-color-text-heading: var(--bb-color-green-600);
188
171
  --sky-color-text-inverse: var(--bb-color-black);
189
172
  --sky-color-text-danger: var(--bb-color-red-600);
190
173
  --sky-color-text-deemphasized: var(--bb-color-gray-200);
191
- --sky-color-text-action: var(--bb-color-brand-sky-blue);
174
+ --sky-color-text-action: var(--bb-color-blue-300);
192
175
  --sky-color-text-default: var(--bb-color-gray-25);
193
176
  --sky-color-background-page: var(--bb-color-gray-1100);
194
177
  --sky-color-background-container: var(--bb-color-gray-900);
@@ -223,47 +206,47 @@
223
206
  --sky-elevation-overflow: var(--bb-shadow-gray-2);
224
207
  --sky-elevation-focus: var(--bb-shadow-gray-2);
225
208
  --sky-elevation-none: var(--bb-shadow-gray-0);
226
- --sky-color-border-input-disabled: var(--bb-color-gray-100);
209
+ --sky-color-border-separator-row: var(--bb-color-gray-50);
210
+ --sky-color-border-separator-dark: var(--bb-color-gray-100);
227
211
  --sky-color-border-input-error: var(--bb-color-red-600);
212
+ --sky-color-border-input-disabled: var(--bb-color-gray-100);
228
213
  --sky-color-border-input-focus: var(--bb-color-blue-600);
229
214
  --sky-color-border-input-active: var(--bb-color-blue-600);
230
215
  --sky-color-border-input-hover: var(--bb-color-blue-600);
231
216
  --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);
217
+ --sky-color-border-container-base: var(--bb-color-gray-100);
234
218
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
235
219
  --sky-color-border-action-tertiary-active: var(--bb-color-blue-600);
236
220
  --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
237
221
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
238
- --sky-color-border-action-secondary-disabled: var(--bb-color-gray-100);
239
222
  --sky-color-border-action-secondary-focus: var(--bb-color-blue-600);
240
223
  --sky-color-border-action-secondary-active: var(--bb-color-blue-600);
241
224
  --sky-color-border-action-secondary-hover: var(--bb-color-blue-600);
242
225
  --sky-color-border-action-secondary-base: var(--bb-color-transparent);
243
- --sky-color-border-action-primary-disabled: var(--bb-color-gray-100);
244
226
  --sky-color-border-action-primary-focus: var(--bb-color-blue-600);
245
227
  --sky-color-border-action-primary-active: var(--bb-color-blue-600);
246
228
  --sky-color-border-action-primary-hover: var(--bb-color-blue-600);
247
229
  --sky-color-border-action-primary-base: var(--bb-color-blue-600);
248
- --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);
230
+ --sky-color-border-action-disabled: var(--bb-color-gray-100);
231
+ --sky-color-border-elevation: var(--bb-color-gray-100);
232
+ --sky-color-border-divider: var(--bb-color-gray-100);
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);
@@ -283,16 +266,31 @@
283
266
  --sky-color-text-default: var(--bb-color-gray-900);
284
267
  }
285
268
  .sky-theme-modern.sky-theme-brand-blackbaud {
269
+ --sky-border-style-separator-row: var(--bb-border-style-dotted);
270
+ --sky-border-style-separator-dark: var(--bb-border-style-solid);
271
+ --sky-border-style-elevation: var(--bb-border-style-solid);
286
272
  --sky-border-style-accent: var(--bb-border-style-solid);
273
+ --sky-border-width-separator-row: var(--bb-size-fixed-6);
274
+ --sky-border-width-separator-dark: var(--bb-size-fixed-6);
275
+ --sky-border-width-input-disabled: var(--bb-size-fixed-6);
276
+ --sky-border-width-input-error: var(--bb-size-fixed-12);
277
+ --sky-border-width-input-focus: var(--bb-size-fixed-12);
278
+ --sky-border-width-input-active: var(--bb-size-fixed-12);
279
+ --sky-border-width-input-hover: var(--bb-size-fixed-6);
280
+ --sky-border-width-input-base: var(--bb-size-fixed-6);
287
281
  --sky-border-width-container-base: var(--bb-size-fixed-6);
282
+ --sky-border-width-action-selected-xl: var(--bb-size-fixed-37);
283
+ --sky-border-width-action-selected-l: var(--bb-size-fixed-25);
284
+ --sky-border-width-action-selected-m: var(--bb-size-fixed-12);
285
+ --sky-border-width-action-selected-s: var(--bb-size-fixed-6);
286
+ --sky-border-width-action-disabled: var(--bb-size-fixed-6);
287
+ --sky-border-width-action-error: var(--bb-size-fixed-12);
288
+ --sky-border-width-action-focus: var(--bb-size-fixed-12);
289
+ --sky-border-width-action-active: var(--bb-size-fixed-12);
290
+ --sky-border-width-action-hover: var(--bb-size-fixed-6);
291
+ --sky-border-width-action-base: var(--bb-size-fixed-6);
292
+ --sky-border-width-elevation: var(--bb-size-fixed-6);
288
293
  --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);
296
294
  --sky-border-width-accent: var(--bb-size-fixed-37);
297
295
  --sky-border-radius-pill: var(--bb-border-radius-pill);
298
296
  --sky-border-radius-m: var(--bb-size-fluid-50);
@@ -319,26 +317,26 @@
319
317
  --sky-font-weight-emphasized: var(--bb-font-weight-semibold);
320
318
  --sky-font-letter_spacing-hint-s: var(--bb-letter_spacing-normal);
321
319
  --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);
320
+ --sky-font-line_height-metric-l: var(--bb-line_height-700);
321
+ --sky-font-line_height-metric-m: var(--bb-line_height-400);
322
+ --sky-font-line_height-metric-s: var(--bb-line_height-200);
323
+ --sky-font-line_height-input-val: var(--bb-line_height-200);
324
+ --sky-font-line_height-input-label: var(--bb-line_height-100);
325
+ --sky-font-line_height-hint-m: var(--bb-line_height-200);
326
+ --sky-font-line_height-hint-s: var(--bb-line_height-100);
327
+ --sky-font-line_height-heading-5: var(--bb-line_height-200);
328
+ --sky-font-line_height-heading-4: var(--bb-line_height-200);
329
+ --sky-font-line_height-heading-3: var(--bb-line_height-300);
330
+ --sky-font-line_height-heading-2: var(--bb-line_height-400);
331
+ --sky-font-line_height-heading-1: var(--bb-line_height-500);
332
+ --sky-font-line_height-display-4: var(--bb-line_height-200);
333
+ --sky-font-line_height-display-3: var(--bb-line_height-300);
334
+ --sky-font-line_height-display-2: var(--bb-line_height-500);
335
+ --sky-font-line_height-display-1: var(--bb-line_height-800);
336
+ --sky-font-line_height-body-l: var(--bb-line_height-300);
337
+ --sky-font-line_height-body-m: var(--bb-line_height-200);
338
+ --sky-font-line_height-body-s: var(--bb-line_height-100);
339
+ --sky-font-line_height-data_label: var(--bb-line_height-200);
342
340
  --sky-font-style-metric-l: var(--bb-font-style-light);
343
341
  --sky-font-style-metric-m: var(--bb-font-style-regular);
344
342
  --sky-font-style-metric-s: var(--bb-font-style-semibold);
@@ -375,10 +373,10 @@
375
373
  --sky-font-size-heading-3: var(--bb-font-size-300);
376
374
  --sky-font-size-heading-2: var(--bb-font-size-400);
377
375
  --sky-font-size-heading-1: var(--bb-font-size-500);
378
- --sky-font-size-display-4: var(--bb-font-size-800);
379
- --sky-font-size-display-3: var(--bb-font-size-900);
380
- --sky-font-size-display-2: var(--bb-font-size-1000);
381
- --sky-font-size-display-1: var(--bb-font-size-1100);
376
+ --sky-font-size-display-4: var(--bb-font-size-200);
377
+ --sky-font-size-display-3: var(--bb-font-size-300);
378
+ --sky-font-size-display-2: var(--bb-font-size-500);
379
+ --sky-font-size-display-1: var(--bb-font-size-800);
382
380
  --sky-font-size-body-l: var(--bb-font-size-300);
383
381
  --sky-font-size-body-m: var(--bb-font-size-200);
384
382
  --sky-font-size-body-s: var(--bb-font-size-100);
@@ -416,7 +414,27 @@
416
414
  --sky-size-icon-l: var(--bb-size-fluid-150);
417
415
  --sky-size-icon-m: var(--bb-size-fluid-125);
418
416
  --sky-size-icon-s: var(--bb-size-fluid-100);
417
+ --sky-space-stacked-xxl: var(--bb-size-fluid-300);
418
+ --sky-space-stacked-xl: var(--bb-size-fluid-150);
419
+ --sky-space-stacked-l: var(--bb-size-fluid-100);
420
+ --sky-space-stacked-m: var(--bb-size-fluid-75);
421
+ --sky-space-stacked-s: var(--bb-size-fluid-50);
422
+ --sky-space-stacked-xs: var(--bb-size-fluid-25);
423
+ --sky-space-inline-xxl: var(--bb-size-fluid-300);
424
+ --sky-space-inline-xl: var(--bb-size-fluid-150);
425
+ --sky-space-inline-l: var(--bb-size-fluid-100);
426
+ --sky-space-inline-m: var(--bb-size-fluid-75);
427
+ --sky-space-inline-s: var(--bb-size-fluid-50);
428
+ --sky-space-inline-xs: var(--bb-size-fluid-25);
419
429
  --sky-space-switch_inset: calc(var(--sky-size-switch)+var(--sky-space-label_gap-s));
430
+ --sky-space-text_action_gap-l: var(--bb-size-fluid-100);
431
+ --sky-space-text_action_gap-m: var(--bb-size-fluid-75);
432
+ --sky-space-text_action_gap-s: var(--bb-size-fluid-50);
433
+ --sky-space-text_action_gap-xs: var(--bb-size-fluid-25);
434
+ --sky-space-text_action_gap-0: 0rem;
435
+ --sky-space-stacked_supplemental-m: var(--bb-size-fluid-50);
436
+ --sky-space-stacked_supplemental-s: var(--bb-size-fluid-25);
437
+ --sky-space-stacked_supplemental-0: 0rem;
420
438
  --sky-space-label_gap-xl: var(--bb-size-fluid-100);
421
439
  --sky-space-label_gap-l: var(--bb-size-fluid-75);
422
440
  --sky-space-label_gap-m: var(--bb-size-fluid-50);
@@ -424,6 +442,11 @@
424
442
  --sky-space-label_gap-xs: var(--bb-size-fluid-12);
425
443
  --sky-space-label_gap-xxs: var(--bb-size-fluid-6);
426
444
  --sky-space-label_gap-0: 0rem;
445
+ --sky-space-icon_gap-xl: var(--bb-size-fluid-100);
446
+ --sky-space-icon_gap-l: var(--bb-size-fluid-75);
447
+ --sky-space-icon_gap-m: var(--bb-size-fluid-50);
448
+ --sky-space-icon_gap-s: var(--bb-size-fluid-25);
449
+ --sky-space-icon_gap-0: 0rem;
427
450
  --sky-space-form_gap-xl: var(--bb-size-fluid-150);
428
451
  --sky-space-form_gap-l: var(--bb-size-fluid-100);
429
452
  --sky-space-form_gap-m: var(--bb-size-fluid-75);
@@ -434,20 +457,10 @@
434
457
  --sky-space-action_group_gap-m: var(--bb-size-fluid-50);
435
458
  --sky-space-action_group_gap-s: var(--bb-size-fluid-25);
436
459
  --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);
460
+ --sky-space-inset-tabs-xl: var(--bb-size-fluid-150);
461
+ --sky-space-inset-tabs-l: var(--bb-size-fluid-100);
462
+ --sky-space-inset-tabs-m: var(--bb-size-fluid-75);
463
+ --sky-space-inset-tabs-s: var(--bb-size-fluid-50);
451
464
  --sky-space-inset-pillarbox-2_3-left-l: var(--bb-size-fluid-150);
452
465
  --sky-space-inset-pillarbox-2_3-left-m: var(--bb-size-fluid-75);
453
466
  --sky-space-inset-pillarbox-2_3-bottom-l: var(--bb-size-fluid-100);
@@ -456,18 +469,6 @@
456
469
  --sky-space-inset-pillarbox-2_3-right-m: var(--bb-size-fluid-75);
457
470
  --sky-space-inset-pillarbox-2_3-top-l: var(--bb-size-fluid-100);
458
471
  --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
472
  --sky-space-inset-pillarbox-1_2-left-l: var(--bb-size-fluid-150);
472
473
  --sky-space-inset-pillarbox-1_2-left-m: var(--bb-size-fluid-100);
473
474
  --sky-space-inset-pillarbox-1_2-left-s: var(--bb-size-fluid-50);
@@ -480,6 +481,31 @@
480
481
  --sky-space-inset-pillarbox-1_2-top-l: var(--bb-size-fluid-75);
481
482
  --sky-space-inset-pillarbox-1_2-top-m: var(--bb-size-fluid-50);
482
483
  --sky-space-inset-pillarbox-1_2-top-s: var(--bb-size-fluid-25);
484
+ --sky-space-inset-pillarbox-1_3-left-m: var(--bb-size-fluid-150);
485
+ --sky-space-inset-pillarbox-1_3-bottom-m: var(--bb-size-fluid-50);
486
+ --sky-space-inset-pillarbox-1_3-right-m: var(--bb-size-fluid-150);
487
+ --sky-space-inset-pillarbox-1_3-top-m: var(--bb-size-fluid-50);
488
+ --sky-space-inset-pillarbox-1_4-left-s: var(--bb-size-fluid-50);
489
+ --sky-space-inset-pillarbox-1_4-left-xs: var(--bb-size-fluid-25);
490
+ --sky-space-inset-pillarbox-1_4-bottom-s: var(--bb-size-fluid-12);
491
+ --sky-space-inset-pillarbox-1_4-bottom-xs: var(--bb-size-fluid-6);
492
+ --sky-space-inset-pillarbox-1_4-right-s: var(--bb-size-fluid-50);
493
+ --sky-space-inset-pillarbox-1_4-right-xs: var(--bb-size-fluid-25);
494
+ --sky-space-inset-pillarbox-1_4-top-s: var(--bb-size-fluid-12);
495
+ --sky-space-inset-pillarbox-1_4-top-xs: var(--bb-size-fluid-6);
496
+ --sky-space-inset-letterbox-left-l: var(--bb-size-fluid-100);
497
+ --sky-space-inset-letterbox-left-m: var(--bb-size-fluid-50);
498
+ --sky-space-inset-letterbox-left-s: var(--bb-size-fluid-25);
499
+ --sky-space-inset-letterbox-bottom-l: var(--bb-size-fluid-150);
500
+ --sky-space-inset-letterbox-bottom-m: var(--bb-size-fluid-100);
501
+ --sky-space-inset-letterbox-bottom-s: var(--bb-size-fluid-50);
502
+ --sky-space-inset-letterbox-right-l: var(--bb-size-fluid-100);
503
+ --sky-space-inset-letterbox-right-m: var(--bb-size-fluid-50);
504
+ --sky-space-inset-letterbox-right-s: var(--bb-size-fluid-25);
505
+ --sky-space-inset-letterbox-top-l: var(--bb-size-fluid-150);
506
+ --sky-space-inset-letterbox-top-m: var(--bb-size-fluid-100);
507
+ --sky-space-inset-letterbox-top-s: var(--bb-size-fluid-50);
508
+ --sky-space-inset-input_label-top-m: var(--bb-size-fluid-37);
483
509
  --sky-space-inset-input-left-m: var(--bb-size-fluid-100);
484
510
  --sky-space-inset-input-bottom-m: var(--bb-size-fluid-50);
485
511
  --sky-space-inset-input-right-m: var(--bb-size-fluid-100);
@@ -501,18 +527,6 @@
501
527
  --sky-space-inset-bottomless-right-l: var(--bb-size-fluid-100);
502
528
  --sky-space-inset-bottomless-top-xl: var(--bb-size-fluid-150);
503
529
  --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
530
  --sky-space-inset-balanced-xl: var(--bb-size-fluid-150);
517
531
  --sky-space-inset-balanced-l: var(--bb-size-fluid-100);
518
532
  --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;
@@ -37,8 +39,14 @@
37
39
  --modern-font-size-150: 14px;
38
40
  --modern-font-size-125: 13px;
39
41
  --modern-font-size-100: 12px;
42
+ --modern-size-320: 320px;
40
43
  --modern-size-296: 296px;
41
44
  --modern-size-276: 276px;
45
+ --modern-size-236: 236px;
46
+ --modern-size-96: 96px;
47
+ --modern-size-80: 80px;
48
+ --modern-size-64: 64px;
49
+ --modern-size-48: 48px;
42
50
  --modern-size-32: 32px;
43
51
  --modern-size-30: 30px;
44
52
  --modern-size-26: 26px;
@@ -54,6 +62,7 @@
54
62
  --modern-size-6: 6px;
55
63
  --modern-size-5: 5px;
56
64
  --modern-size-4: 4px;
65
+ --modern-size-3: 3px;
57
66
  --modern-size-2: 2px;
58
67
  --modern-size-1: 1px;
59
68
  --modern-size-0: 0rem;
@@ -85,6 +94,7 @@
85
94
  --modern-color-gray-07: #ededee;
86
95
  --modern-color-gray-105: #212327;
87
96
  --modern-color-gray-70: #686c73;
97
+ --modern-color-gray-20: #cdcfd2;
88
98
  --modern-color-gray-15: #d2d2d2;
89
99
  }
90
100
  .sky-theme-modern {
@@ -96,79 +106,130 @@
96
106
  --sky-elevation-overflow: var(--modern-shadow-size-3);
97
107
  --sky-elevation-focus: var(--modern-shadow-size-3);
98
108
  --sky-elevation-none: var(--modern-shadow-size-0);
99
- --sky-color-border-container-base: var(--modern-color-gray-15);
109
+ --sky-color-border-separator-row: var(--modern-color-gray-20);
110
+ --sky-color-border-separator-dark: var(--modern-color-gray-20);
100
111
  --sky-color-border-input-error: var(--modern-color-red-50);
112
+ --sky-color-border-input-disabled: var(--modern-color-gray-15);
101
113
  --sky-color-border-input-focus: var(--modern-color-blue-74);
102
114
  --sky-color-border-input-active: var(--modern-color-blue-74);
103
115
  --sky-color-border-input-hover: var(--modern-color-blue-74);
104
- --sky-color-border-input-disabled: var(--modern-color-gray-15);
105
116
  --sky-color-border-input-base: var(--modern-color-gray-15);
106
117
  --sky-color-border-action-tertiary-active: var(--modern-color-blue-74);
107
118
  --sky-color-border-action-tertiary-focus: var(--modern-color-blue-74);
108
119
  --sky-color-border-action-tertiary-hover: var(--modern-color-blue-74);
109
120
  --sky-color-border-action-tertiary-base: var(--modern-color-transparent);
121
+ --sky-color-border-action-secondary-base: var(--modern-color-gray-15);
122
+ --sky-color-border-action-primary-base: var(--modern-color-blue-74);
123
+ --sky-color-border-action-disabled: var(--modern-color-gray-15);
124
+ --sky-color-border-container-base: var(--modern-color-gray-15);
125
+ --sky-color-border-elevation: var(--modern-color-gray-15);
126
+ --sky-color-border-divider: var(--modern-color-gray-15);
110
127
  --sky-color-border-info: var(--modern-color-blue-50);
111
128
  --sky-color-border-success: var(--modern-color-green-50);
112
129
  --sky-color-border-warning: var(--modern-color-yellow-50);
113
130
  --sky-color-border-danger: var(--modern-color-red-50);
131
+ --sky-color-border-selected: var(--modern-color-blue-74);
132
+ --sky-color-background-action-danger-base: var(--modern-color-red-70);
114
133
  --sky-color-background-action-tertiary-base: var(--modern-color-transparent);
134
+ --sky-color-background-action-secondary-base: var(--modern-color-white);
135
+ --sky-color-background-action-primary-base: var(--modern-color-blue-74);
136
+ --sky-color-background-action-disabled: var(--modern-color-gray-07);
115
137
  --sky-color-background-container-info: var(--modern-color-blue-10);
116
138
  --sky-color-background-container-success: var(--modern-color-green-30);
117
139
  --sky-color-background-container-warning: var(--modern-color-yellow-30);
118
140
  --sky-color-background-container-danger: var(--modern-color-red-30);
141
+ --sky-color-background-container-menu: var(--modern-color-white);
119
142
  --sky-color-background-container-base: var(--modern-color-white);
143
+ --sky-color-background-page: var(--modern-color-gray-005);
120
144
  --sky-color-icon-action: var(--modern-color-blue-74);
121
- --sky-color-icon-deemphasized: var(--modern-color-gray-70);
122
145
  --sky-color-icon-inverse: var(--modern-color-white);
123
146
  --sky-color-icon-info: var(--modern-color-blue-50);
124
147
  --sky-color-icon-success: var(--modern-color-green-50);
125
148
  --sky-color-icon-warning: var(--modern-color-yellow-50);
126
149
  --sky-color-icon-danger: var(--modern-color-red-50);
150
+ --sky-color-icon-deemphasized: var(--modern-color-gray-70);
127
151
  --sky-color-icon-default: var(--modern-color-gray-105);
152
+ --sky-color-text-heading: var(--modern-color-gray-105);
153
+ --sky-color-text-inverse: var(--modern-color-white);
128
154
  --sky-color-text-danger: var(--modern-color-red-70);
129
155
  --sky-color-text-action: var(--modern-color-blue-74);
130
156
  --sky-color-text-deemphasized: var(--modern-color-gray-70);
131
157
  --sky-color-text-default: var(--modern-color-gray-105);
132
158
  }
133
159
  .sky-theme-modern {
160
+ --sky-border-style-separator-row: var(--modern-border-style-dotted);
161
+ --sky-border-style-separator-dark: var(--modern-border-style-solid);
162
+ --sky-border-style-elevation: var(--modern-border-style-solid);
134
163
  --sky-border-style-accent: var(--modern-border-style-solid);
135
164
  --sky-border-radius-pill: var(--modern-border-radius-pill);
136
165
  --sky-border-radius-m: var(--modern-size-6);
137
166
  --sky-border-radius-s: var(--modern-size-6);
167
+ --sky-border-width-separator-row: var(--modern-size-1);
168
+ --sky-border-width-separator-dark: var(--modern-size-1);
169
+ --sky-border-width-input-disabled: var(--modern-size-1);
170
+ --sky-border-width-input-error: var(--modern-size-2);
171
+ --sky-border-width-input-focus: var(--modern-size-2);
172
+ --sky-border-width-input-active: var(--modern-size-2);
173
+ --sky-border-width-input-hover: var(--modern-size-1);
174
+ --sky-border-width-input-base: var(--modern-size-1);
138
175
  --sky-border-width-container-base: var(--modern-size-1);
176
+ --sky-border-width-action-selected-xl: var(--modern-size-6);
177
+ --sky-border-width-action-selected-l: var(--modern-size-4);
178
+ --sky-border-width-action-selected-m: var(--modern-size-2);
179
+ --sky-border-width-action-selected-s: var(--modern-size-1);
180
+ --sky-border-width-action-disabled: var(--modern-size-1);
181
+ --sky-border-width-action-error: var(--modern-size-2);
182
+ --sky-border-width-action-focus: var(--modern-size-2);
183
+ --sky-border-width-action-active: var(--modern-size-2);
184
+ --sky-border-width-action-hover: var(--modern-size-1);
185
+ --sky-border-width-action-base: var(--modern-size-1);
186
+ --sky-border-width-elevation: var(--modern-size-1);
139
187
  --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
188
  --sky-border-width-accent: var(--modern-size-7);
147
189
  --sky-text-font_family: var(--modern-font-name);
148
- --sky-size-max_width-overlay_message: var(--modern-size-276);
190
+ --sky-size-max_width-overlay_message: var(--modern-size-236);
149
191
  --sky-size-width-viewport-smallest: var(--modern-size-296);
150
192
  --sky-size-switch: var(--modern-size-26);
193
+ --sky-size-illustration-xl: var(--modern-size-96);
194
+ --sky-size-illustration-l: var(--modern-size-80);
195
+ --sky-size-illustration-m: var(--modern-size-64);
196
+ --sky-size-illustration-s: var(--modern-size-48);
151
197
  --sky-size-icon-xl: var(--modern-size-32);
152
198
  --sky-size-icon-l: var(--modern-size-24);
153
199
  --sky-size-icon-m: var(--modern-size-20);
154
200
  --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);
201
+ --sky-space-stacked-xxl: var(--modern-space-xxl);
202
+ --sky-space-stacked-xl: var(--modern-space-xl);
203
+ --sky-space-stacked-l: var(--modern-space-lg);
204
+ --sky-space-stacked-m: var(--modern-space-md);
205
+ --sky-space-stacked-s: var(--modern-space-s);
206
+ --sky-space-stacked-xs: var(--modern-space-xs);
207
+ --sky-space-inline-xxl: var(--modern-space-xxl);
208
+ --sky-space-inline-xl: var(--modern-space-xl);
209
+ --sky-space-inline-l: var(--modern-space-lg);
210
+ --sky-space-inline-m: var(--modern-space-md);
211
+ --sky-space-inline-s: var(--modern-space-s);
212
+ --sky-space-inline-xs: var(--modern-space-xs);
213
+ --sky-space-text_action_gap-l: var(--modern-space-lg);
214
+ --sky-space-text_action_gap-m: var(--modern-space-md);
215
+ --sky-space-text_action_gap-xs: var(--modern-space-xs);
159
216
  --sky-space-stacked_supplemental-s: var(--modern-space-xs);
160
217
  --sky-space-stacked_supplemental-0: 0rem;
161
218
  --sky-space-label_gap-s: var(--modern-space-xs);
162
219
  --sky-space-label_gap-xs: var(--modern-size-2);
163
220
  --sky-space-label_gap-xxs: var(--modern-size-1);
164
221
  --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
222
  --sky-space-icon_gap-l: var(--modern-space-md);
169
223
  --sky-space-icon_gap-m: var(--modern-space-s);
170
224
  --sky-space-icon_gap-s: var(--modern-space-xs);
171
- --sky-space-inset-input_label-top-m: var(--modern-size-6);
225
+ --sky-space-form_gap-xl: var(--modern-space-xl);
226
+ --sky-space-form_gap-l: var(--modern-space-lg);
227
+ --sky-space-form_gap-m: var(--modern-space-md);
228
+ --sky-space-form_gap-s: var(--modern-space-s);
229
+ --sky-space-inset-tabs-xl: var(--modern-space-xl);
230
+ --sky-space-inset-tabs-l: var(--modern-space-lg);
231
+ --sky-space-inset-tabs-m: var(--modern-space-md);
232
+ --sky-space-inset-tabs-s: var(--modern-space-s);
172
233
  --sky-space-inset-pillarbox-2_3-left-l: var(--modern-size-30);
173
234
  --sky-space-inset-pillarbox-2_3-left-m: var(--modern-size-15);
174
235
  --sky-space-inset-pillarbox-2_3-bottom-l: var(--modern-size-20);
@@ -201,6 +262,7 @@
201
262
  --sky-space-inset-pillarbox-1_4-right-xs: var(--modern-size-5);
202
263
  --sky-space-inset-pillarbox-1_4-top-s: var(--modern-size-4);
203
264
  --sky-space-inset-pillarbox-1_4-top-xs: var(--modern-size-1);
265
+ --sky-space-inset-input_label-top-m: var(--modern-size-6);
204
266
  --sky-space-inset-input-left-m: var(--modern-size-15);
205
267
  --sky-space-inset-input-bottom-m: var(--modern-size-9);
206
268
  --sky-space-inset-input-right-m: var(--modern-size-15);