@blackbaud/skyux-design-tokens 0.0.28 → 0.0.29

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 (7) hide show
  1. package/CHANGELOG.md +41 -28
  2. package/bundles/design-tokens.global.min.js +1 -0
  3. package/json/design-tokens.json +1 -247
  4. package/json/themes/modern/design-tokens.json +1 -341
  5. package/package.json +14 -3
  6. package/scss/blackbaud.css +521 -0
  7. package/scss/modern.css +304 -0
package/scss/modern.css ADDED
@@ -0,0 +1,304 @@
1
+ .sky-theme-modern {
2
+ --modern-border-style-dotted: dotted;
3
+ --modern-border-style-solid: solid;
4
+ --modern-border-radius-pill: 10rem;
5
+ --modern-border-radius-md: 6px;
6
+ --modern-shadow-size-24: 0 7px 27px 3px var(--modern-color-shadow_color);
7
+ --modern-shadow-size-16: 0 3px 25px 2px var(--modern-color-shadow_color);
8
+ --modern-shadow-size-8: 0 2px 15px 2px var(--modern-color-shadow_color);
9
+ --modern-shadow-size-4: 0 1px 12px 0 var(--modern-color-shadow_color);
10
+ --modern-shadow-size-3: 0 1px 8px 0 var(--modern-color-shadow_color);
11
+ --modern-shadow-size-1: 0 1px 3px 0 var(--modern-color-shadow_color);
12
+ --modern-shadow-size-0: 0 0 0 0 #000000;
13
+ --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';
20
+ --modern-font-style-bold: 700;
21
+ --modern-font-style-semibold: 600;
22
+ --modern-font-style-italic-style: italic;
23
+ --modern-font-style-italic-weight: 400;
24
+ --modern-font-style-regular: 400;
25
+ --modern-font-style-light: 300;
26
+ --modern-font-weight-bold: 700;
27
+ --modern-font-weight-semibold: 600;
28
+ --modern-font-weight-regular: 400;
29
+ --modern-font-weight-light: 300;
30
+ --modern-font-size-800: 48px;
31
+ --modern-font-size-600: 32px;
32
+ --modern-font-size-500: 28px;
33
+ --modern-font-size-400: 24px;
34
+ --modern-font-size-300: 20px;
35
+ --modern-font-size-250: 18px;
36
+ --modern-font-size-200: 16px;
37
+ --modern-font-size-150: 14px;
38
+ --modern-font-size-125: 13px;
39
+ --modern-font-size-100: 12px;
40
+ --modern-size-296: 296px;
41
+ --modern-size-276: 276px;
42
+ --modern-size-32: 32px;
43
+ --modern-size-30: 30px;
44
+ --modern-size-26: 26px;
45
+ --modern-size-24: 24px;
46
+ --modern-size-20: 20px;
47
+ --modern-size-16: 16px;
48
+ --modern-size-15: 15px;
49
+ --modern-size-13: 13px;
50
+ --modern-size-10: 10px;
51
+ --modern-size-9: 9px;
52
+ --modern-size-8: 8px;
53
+ --modern-size-7: 7px;
54
+ --modern-size-6: 6px;
55
+ --modern-size-5: 5px;
56
+ --modern-size-4: 4px;
57
+ --modern-size-2: 2px;
58
+ --modern-size-1: 1px;
59
+ --modern-size-0: 0rem;
60
+ --modern-space-xxl: 60px;
61
+ --modern-space-xl: 30px;
62
+ --modern-space-lg: 20px;
63
+ --modern-space-md: 15px;
64
+ --modern-space-s: 10px;
65
+ --modern-space-xs: 5px;
66
+ --modern-space-none: 0rem;
67
+ --modern-color-shadow_color: rgba(0, 0, 0, 0.3);
68
+ --modern-color-sky_blue-40: #40c7f4;
69
+ --modern-color-sky_blue-20: #bfecfb;
70
+ --modern-color-yellow-50: #fbb034;
71
+ --modern-color-yellow-30: #ffd597;
72
+ --modern-color-green-50: #72bf44;
73
+ --modern-color-green-30: #b7da9b;
74
+ --modern-color-white: #ffffff;
75
+ --modern-color-blue-05: #ebfbff;
76
+ --modern-color-blue-74: #1870b8;
77
+ --modern-color-blue-50: #00b4f1;
78
+ --modern-color-blue-30: #81d4f7;
79
+ --modern-color-blue-10: #c1e8fb;
80
+ --modern-color-transparent: rgba(0, 0, 0, 0);
81
+ --modern-color-red-70: #d93a3d;
82
+ --modern-color-red-50: #ef4044;
83
+ --modern-color-red-30: #f7a08f;
84
+ --modern-color-gray-005: #fcfcfc;
85
+ --modern-color-gray-07: #ededee;
86
+ --modern-color-gray-105: #212327;
87
+ --modern-color-gray-70: #686c73;
88
+ --modern-color-gray-15: #d2d2d2;
89
+ }
90
+ .sky-theme-modern {
91
+ --sky-elevation-overlay-400: var(--modern-shadow-size-24);
92
+ --sky-elevation-overlay-300: var(--modern-shadow-size-16);
93
+ --sky-elevation-overlay-200: var(--modern-shadow-size-8);
94
+ --sky-elevation-overlay-100: var(--modern-shadow-size-4);
95
+ --sky-elevation-raised-100: var(--modern-shadow-size-1);
96
+ --sky-elevation-overflow: var(--modern-shadow-size-3);
97
+ --sky-elevation-focus: var(--modern-shadow-size-3);
98
+ --sky-elevation-none: var(--modern-shadow-size-0);
99
+ --sky-color-border-container-base: var(--modern-color-gray-15);
100
+ --sky-color-border-input-error: var(--modern-color-red-50);
101
+ --sky-color-border-input-focus: var(--modern-color-blue-74);
102
+ --sky-color-border-input-active: var(--modern-color-blue-74);
103
+ --sky-color-border-input-hover: var(--modern-color-blue-74);
104
+ --sky-color-border-input-disabled: var(--modern-color-gray-15);
105
+ --sky-color-border-input-base: var(--modern-color-gray-15);
106
+ --sky-color-border-action-tertiary-active: var(--modern-color-blue-74);
107
+ --sky-color-border-action-tertiary-focus: var(--modern-color-blue-74);
108
+ --sky-color-border-action-tertiary-hover: var(--modern-color-blue-74);
109
+ --sky-color-border-action-tertiary-base: var(--modern-color-transparent);
110
+ --sky-color-border-info: var(--modern-color-blue-50);
111
+ --sky-color-border-success: var(--modern-color-green-50);
112
+ --sky-color-border-warning: var(--modern-color-yellow-50);
113
+ --sky-color-border-danger: var(--modern-color-red-50);
114
+ --sky-color-background-action-tertiary-base: var(--modern-color-transparent);
115
+ --sky-color-background-container-info: var(--modern-color-blue-10);
116
+ --sky-color-background-container-success: var(--modern-color-green-30);
117
+ --sky-color-background-container-warning: var(--modern-color-yellow-30);
118
+ --sky-color-background-container-danger: var(--modern-color-red-30);
119
+ --sky-color-background-container-base: var(--modern-color-white);
120
+ --sky-color-icon-inverse: var(--modern-color-white);
121
+ --sky-color-icon-info: var(--modern-color-blue-50);
122
+ --sky-color-icon-success: var(--modern-color-green-50);
123
+ --sky-color-icon-warning: var(--modern-color-yellow-50);
124
+ --sky-color-icon-danger: var(--modern-color-red-50);
125
+ --sky-color-icon-default: var(--modern-color-gray-105);
126
+ --sky-color-text-danger: var(--modern-color-red-70);
127
+ --sky-color-text-action: var(--modern-color-blue-74);
128
+ --sky-color-text-deemphasized: var(--modern-color-gray-70);
129
+ --sky-color-text-default: var(--modern-color-gray-105);
130
+ }
131
+ .sky-theme-modern {
132
+ --sky-border-style-accent: var(--modern-border-style-solid);
133
+ --sky-border-radius-pill: var(--modern-border-radius-pill);
134
+ --sky-border-radius-m: var(--modern-size-6);
135
+ --sky-border-radius-s: var(--modern-size-6);
136
+ --sky-border-width-container-base: var(--modern-size-1);
137
+ --sky-border-width-divider: var(--modern-size-1);
138
+ --sky-border-width-interactive-disabled: var(--modern-size-1);
139
+ --sky-border-width-interactive-error: var(--modern-size-2);
140
+ --sky-border-width-interactive-focus: var(--modern-size-2);
141
+ --sky-border-width-interactive-active: var(--modern-size-2);
142
+ --sky-border-width-interactive-hover: var(--modern-size-1);
143
+ --sky-border-width-interactive-base: var(--modern-size-1);
144
+ --sky-border-width-accent: var(--modern-size-7);
145
+ --sky-text-font_family: var(--modern-font-name);
146
+ --sky-size-max_width-overlay_message: var(--modern-size-276);
147
+ --sky-size-width-viewport-smallest: var(--modern-size-296);
148
+ --sky-size-switch: var(--modern-size-26);
149
+ --sky-size-icon-xl: var(--modern-size-32);
150
+ --sky-size-icon-l: var(--modern-size-24);
151
+ --sky-size-icon-m: var(--modern-size-20);
152
+ --sky-size-icon-s: var(--modern-size-16);
153
+ --sky-space-form_gap-l: var(--modern-space-xl);
154
+ --sky-space-form_gap-m: var(--modern-space-lg);
155
+ --sky-space-form_gap-s: var(--modern-space-s);
156
+ --sky-space-stacked_supplemental-s: var(--modern-space-xs);
157
+ --sky-space-stacked_supplemental-0: 0rem;
158
+ --sky-space-label_gap-s: var(--modern-space-xs);
159
+ --sky-space-label_gap-xxs: var(--modern-size-2);
160
+ --sky-space-label_gap-0: 0rem;
161
+ --sky-space-text_action_gap-l: var(--modern-space-lg);
162
+ --sky-space-text_action_gap-m: var(--modern-space-md);
163
+ --sky-space-text_action_gap-xs: var(--modern-space-xs);
164
+ --sky-space-icon_gap-l: var(--modern-space-md);
165
+ --sky-space-icon_gap-m: var(--modern-space-s);
166
+ --sky-space-icon_gap-s: var(--modern-space-xs);
167
+ --sky-space-inset-input_label-top-m: var(--modern-size-6);
168
+ --sky-space-inset-pillarbox-2_3-left-l: var(--modern-size-30);
169
+ --sky-space-inset-pillarbox-2_3-left-m: var(--modern-size-15);
170
+ --sky-space-inset-pillarbox-2_3-bottom-l: var(--modern-size-20);
171
+ --sky-space-inset-pillarbox-2_3-bottom-m: var(--modern-size-10);
172
+ --sky-space-inset-pillarbox-2_3-right-l: var(--modern-size-30);
173
+ --sky-space-inset-pillarbox-2_3-right-m: var(--modern-size-15);
174
+ --sky-space-inset-pillarbox-2_3-top-l: var(--modern-size-20);
175
+ --sky-space-inset-pillarbox-2_3-top-m: var(--modern-size-10);
176
+ --sky-space-inset-pillarbox-1_2-left-l: var(--modern-size-30);
177
+ --sky-space-inset-pillarbox-1_2-left-m: var(--modern-size-20);
178
+ --sky-space-inset-pillarbox-1_2-left-s: var(--modern-size-10);
179
+ --sky-space-inset-pillarbox-1_2-bottom-l: var(--modern-size-15);
180
+ --sky-space-inset-pillarbox-1_2-bottom-m: var(--modern-size-10);
181
+ --sky-space-inset-pillarbox-1_2-bottom-s: var(--modern-size-5);
182
+ --sky-space-inset-pillarbox-1_2-right-l: var(--modern-size-30);
183
+ --sky-space-inset-pillarbox-1_2-right-m: var(--modern-size-20);
184
+ --sky-space-inset-pillarbox-1_2-right-s: var(--modern-size-10);
185
+ --sky-space-inset-pillarbox-1_2-top-l: var(--modern-size-15);
186
+ --sky-space-inset-pillarbox-1_2-top-m: var(--modern-size-10);
187
+ --sky-space-inset-pillarbox-1_2-top-s: var(--modern-size-5);
188
+ --sky-space-inset-pillarbox-1_3-left-m: var(--modern-size-30);
189
+ --sky-space-inset-pillarbox-1_3-bottom-m: var(--modern-size-10);
190
+ --sky-space-inset-pillarbox-1_3-right-m: var(--modern-size-30);
191
+ --sky-space-inset-pillarbox-1_3-top-m: var(--modern-size-10);
192
+ --sky-space-inset-pillarbox-1_4-left-s: var(--modern-size-15);
193
+ --sky-space-inset-pillarbox-1_4-left-xs: var(--modern-size-5);
194
+ --sky-space-inset-pillarbox-1_4-bottom-s: var(--modern-size-4);
195
+ --sky-space-inset-pillarbox-1_4-bottom-xs: var(--modern-size-1);
196
+ --sky-space-inset-pillarbox-1_4-right-s: var(--modern-size-15);
197
+ --sky-space-inset-pillarbox-1_4-right-xs: var(--modern-size-5);
198
+ --sky-space-inset-pillarbox-1_4-top-s: var(--modern-size-4);
199
+ --sky-space-inset-pillarbox-1_4-top-xs: var(--modern-size-1);
200
+ --sky-space-inset-input-left-m: var(--modern-size-15);
201
+ --sky-space-inset-input-bottom-m: var(--modern-size-9);
202
+ --sky-space-inset-input-right-m: var(--modern-size-15);
203
+ --sky-space-inset-input-top-m: var(--modern-size-26);
204
+ --sky-space-inset-bottomless-bottom-xl: var(--modern-space-none);
205
+ --sky-space-inset-bottomless-bottom-l: var(--modern-space-none);
206
+ --sky-space-inset-bottomless-left-xl: var(--modern-space-xl);
207
+ --sky-space-inset-bottomless-left-l: var(--modern-space-lg);
208
+ --sky-space-inset-bottomless-right-xl: var(--modern-space-xl);
209
+ --sky-space-inset-bottomless-right-l: var(--modern-space-lg);
210
+ --sky-space-inset-bottomless-top-xl: var(--modern-space-xl);
211
+ --sky-space-inset-bottomless-top-l: var(--modern-space-lg);
212
+ --sky-space-inset-balanced-xl: var(--modern-space-xl);
213
+ --sky-space-inset-balanced-l: var(--modern-space-lg);
214
+ --sky-space-inset-balanced-m: var(--modern-space-md);
215
+ --sky-space-inset-balanced-s: var(--modern-space-s);
216
+ --sky-space-inset-balanced-xs: var(--modern-space-xs);
217
+ --sky-font-weight-metric-l: var(--modern-font-weight-regular);
218
+ --sky-font-weight-metric-m: var(--modern-font-weight-regular);
219
+ --sky-font-weight-metric-s: var(--modern-font-weight-bold);
220
+ --sky-font-weight-input-label: var(--modern-font-weight-regular);
221
+ --sky-font-weight-hint-m: var(--modern-font-weight-regular);
222
+ --sky-font-weight-hint-s: var(--modern-font-weight-regular);
223
+ --sky-font-weight-heading-5: var(--modern-font-weight-semibold);
224
+ --sky-font-weight-heading-4: var(--modern-font-weight-semibold);
225
+ --sky-font-weight-heading-3: var(--modern-font-weight-regular);
226
+ --sky-font-weight-heading-2: var(--modern-font-weight-light);
227
+ --sky-font-weight-heading-1: var(--modern-font-weight-light);
228
+ --sky-font-weight-display-4: var(--modern-font-weight-bold);
229
+ --sky-font-weight-display-3: var(--modern-font-weight-regular);
230
+ --sky-font-weight-display-2: var(--modern-font-weight-regular);
231
+ --sky-font-weight-display-1: var(--modern-font-weight-regular);
232
+ --sky-font-weight-body-l: var(--modern-font-weight-light);
233
+ --sky-font-weight-body-m: var(--modern-font-weight-regular);
234
+ --sky-font-weight-body-s: var(--modern-font-weight-regular);
235
+ --sky-font-weight-data_label: var(--modern-font-weight-regular);
236
+ --sky-font-weight-emphasized: var(--modern-font-weight-bold);
237
+ --sky-font-letter_spacing-hint-s: var(--modern-letter_spacing-normal);
238
+ --sky-font-letter_spacing-input-label: var(--modern-letter_spacing-normal);
239
+ --sky-font-family-sans: var(--modern-font-family-sans);
240
+ --sky-font-style-metric-l: var(--modern-font-weight-regular);
241
+ --sky-font-style-metric-m: var(--modern-font-weight-regular);
242
+ --sky-font-style-metric-s: var(--modern-font-weight-bold);
243
+ --sky-font-style-input-label: var(--modern-font-style-regular);
244
+ --sky-font-style-hint-m-style: italic;
245
+ --sky-font-style-hint-m-weight: 400;
246
+ --sky-font-style-hint-s-style: italic;
247
+ --sky-font-style-hint-s-weight: 400;
248
+ --sky-font-style-heading-5: var(--modern-font-style-semibold);
249
+ --sky-font-style-heading-4: var(--modern-font-style-semibold);
250
+ --sky-font-style-heading-3: var(--modern-font-style-regular);
251
+ --sky-font-style-heading-2: var(--modern-font-style-light);
252
+ --sky-font-style-heading-1: var(--modern-font-style-light);
253
+ --sky-font-style-display-4: var(--modern-font-style-bold);
254
+ --sky-font-style-display-3: var(--modern-font-style-regular);
255
+ --sky-font-style-display-2: var(--modern-font-style-regular);
256
+ --sky-font-style-display-1: var(--modern-font-style-regular);
257
+ --sky-font-style-body-l: var(--modern-font-style-light);
258
+ --sky-font-style-body-m: var(--modern-font-style-regular);
259
+ --sky-font-style-body-s: var(--modern-font-style-regular);
260
+ --sky-font-style-data_label: var(--modern-font-style-regular);
261
+ --sky-font-style-emphasized: var(--modern-font-style-semibold);
262
+ --sky-font-style-deemphasized-style: italic;
263
+ --sky-font-style-deemphasized-weight: 400;
264
+ --sky-font-line_height-metric-l: var(--modern-line-height-normal);
265
+ --sky-font-line_height-metric-m: var(--modern-line-height-normal);
266
+ --sky-font-line_height-metric-s: var(--modern-line-height-normal);
267
+ --sky-font-line_height-input-val: var(--modern-line-height-20);
268
+ --sky-font-line_height-input-label: var(--modern-line-height-normal);
269
+ --sky-font-line_height-hint-m: var(--modern-line-height-normal);
270
+ --sky-font-line_height-hint-s: var(--modern-line-height-normal);
271
+ --sky-font-line_height-heading-5: var(--modern-line-height-110);
272
+ --sky-font-line_height-heading-4: var(--modern-line-height-110);
273
+ --sky-font-line_height-heading-3: var(--modern-line-height-110);
274
+ --sky-font-line_height-heading-2: var(--modern-line-height-110);
275
+ --sky-font-line_height-heading-1: var(--modern-line-height-110);
276
+ --sky-font-line_height-display-4: var(--modern-line-height-110);
277
+ --sky-font-line_height-display-3: var(--modern-line-height-110);
278
+ --sky-font-line_height-display-2: var(--modern-line-height-110);
279
+ --sky-font-line_height-display-1: var(--modern-line-height-110);
280
+ --sky-font-line_height-body-l: var(--modern-line-height-normal);
281
+ --sky-font-line_height-body-m: var(--modern-line-height-normal);
282
+ --sky-font-line_height-body-s: var(--modern-line-height-normal);
283
+ --sky-font-line_height-data_label: var(--modern-line-height-normal);
284
+ --sky-font-size-metric-l: var(--sky-font-size-display-1);
285
+ --sky-font-size-metric-m: var(--sky-font-size-display-3);
286
+ --sky-font-size-metric-s: var(--sky-font-size-display-4);
287
+ --sky-font-size-input-val: var(--modern-font-size-200);
288
+ --sky-font-size-input-label: var(--modern-font-size-125);
289
+ --sky-font-size-hint-m: var(--modern-font-size-200);
290
+ --sky-font-size-hint-s: var(--modern-font-size-200);
291
+ --sky-font-size-heading-5: var(--modern-font-size-150);
292
+ --sky-font-size-heading-4: var(--modern-font-size-200);
293
+ --sky-font-size-heading-3: var(--modern-font-size-300);
294
+ --sky-font-size-heading-2: var(--modern-font-size-400);
295
+ --sky-font-size-heading-1: var(--modern-font-size-600);
296
+ --sky-font-size-display-4: var(--modern-font-size-200);
297
+ --sky-font-size-display-3: var(--modern-font-size-300);
298
+ --sky-font-size-display-2: var(--modern-font-size-500);
299
+ --sky-font-size-display-1: var(--modern-font-size-800);
300
+ --sky-font-size-body-l: var(--modern-font-size-250);
301
+ --sky-font-size-body-m: var(--modern-font-size-200);
302
+ --sky-font-size-body-s: var(--modern-font-size-125);
303
+ --sky-font-size-data_label: var(--modern-font-size-200);
304
+ }