@blackbaud/skyux-design-tokens 0.0.55 → 0.0.57

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 +14 -0
  2. package/assets/scss/blackbaud.css +72 -13
  3. package/assets/scss/modern.css +16 -2
  4. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -2,6 +2,20 @@
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.57](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.56...0.0.57) (2025-05-27)
6
+
7
+
8
+ ### Features
9
+
10
+ * categorization tokens and color palettes ([#171](https://github.com/blackbaud/skyux-design-tokens/issues/171)) ([c0cfa77](https://github.com/blackbaud/skyux-design-tokens/commit/c0cfa77b7d9a63147dccb06eecaafdf5e7c9128b))
11
+
12
+ ## [0.0.56](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.55...0.0.56) (2025-05-20)
13
+
14
+
15
+ ### Features
16
+
17
+ * ag-grid new tokens ([#168](https://github.com/blackbaud/skyux-design-tokens/issues/168)) ([66a2479](https://github.com/blackbaud/skyux-design-tokens/commit/66a2479930fbc705e579e7ac4ca536b7f64d9ddf))
18
+
5
19
  ## [0.0.55](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.54...0.0.55) (2025-05-12)
6
20
 
7
21
 
package/assets/scss/blackbaud.css CHANGED
@@ -9,17 +9,17 @@
9
9
  --bb-border-style-solid: solid;
10
10
  --bb-color-black: #000000;
11
11
  --bb-color-blocking: rgba(255, 255, 255, 0.7);
12
- --bb-color-blue-100: #e8f0fb;
13
- --bb-color-blue-1000: #04152b;
12
+ --bb-color-blue-100: #eef3fc;
13
+ --bb-color-blue-1000: #09152b;
14
14
  --bb-color-blue-200: #d0e1f7;
15
15
  --bb-color-blue-25: #fbfcfe;
16
- --bb-color-blue-300: #a2c2f0;
17
- --bb-color-blue-400: #73a4e8;
18
- --bb-color-blue-500: #4585e1;
19
- --bb-color-blue-600: #1667d9;
20
- --bb-color-blue-700: #1252ae;
21
- --bb-color-blue-800: #0d3e82;
22
- --bb-color-blue-900: #092957;
16
+ --bb-color-blue-300: #aac4ee;
17
+ --bb-color-blue-400: #80a6e6;
18
+ --bb-color-blue-500: #5589dd;
19
+ --bb-color-blue-600: #2b6bd5;
20
+ --bb-color-blue-700: #2256aa;
21
+ --bb-color-blue-800: #1a4080;
22
+ --bb-color-blue-900: #112b55;
23
23
  --bb-color-gray-100: #d3d5d6;
24
24
  --bb-color-gray-1000: #1e2229;
25
25
  --bb-color-gray-1100: #161a1f;
@@ -28,13 +28,13 @@
28
28
  --bb-color-gray-25: #f9f9f9;
29
29
  --bb-color-gray-300: #a8aaad;
30
30
  --bb-color-gray-400: #929599;
31
- --bb-color-gray-50: #e9eaeb;
31
+ --bb-color-gray-50: #eeeeef;
32
32
  --bb-color-gray-500: #7c8085;
33
33
  --bb-color-gray-600: #666b70;
34
34
  --bb-color-gray-700: #51555c;
35
35
  --bb-color-gray-800: #3b4047;
36
36
  --bb-color-gray-900: #252b33;
37
- --bb-color-green-100: #e7fbf1;
37
+ --bb-color-green-100: #ecfcf4;
38
38
  --bb-color-green-1000: #022b17;
39
39
  --bb-color-green-200: #cef7e3;
40
40
  --bb-color-green-300: #9ef0c7;
@@ -44,7 +44,37 @@
44
44
  --bb-color-green-700: #0aa959;
45
45
  --bb-color-green-800: #078245;
46
46
  --bb-color-green-900: #05572e;
47
- --bb-color-red-100: #fbebec;
47
+ --bb-color-orange-100: #fef3eb;
48
+ --bb-color-orange-1000: #311400;
49
+ --bb-color-orange-200: #fde0cc;
50
+ --bb-color-orange-300: #fbc299;
51
+ --bb-color-orange-400: #f9a366;
52
+ --bb-color-orange-500: #f78533;
53
+ --bb-color-orange-600: #f56600;
54
+ --bb-color-orange-700: #c45200;
55
+ --bb-color-orange-800: #933d00;
56
+ --bb-color-orange-900: #622900;
57
+ --bb-color-pink-100: #fef2fd;
58
+ --bb-color-pink-1000: #30132f;
59
+ --bb-color-pink-200: #fcdffb;
60
+ --bb-color-pink-300: #fac0f7;
61
+ --bb-color-pink-400: #f7a0f3;
62
+ --bb-color-pink-500: #f581ef;
63
+ --bb-color-pink-600: #f261eb;
64
+ --bb-color-pink-700: #c24ebc;
65
+ --bb-color-pink-800: #913a8d;
66
+ --bb-color-pink-900: #61275e;
67
+ --bb-color-purple-100: #f9f2fe;
68
+ --bb-color-purple-1000: #231330;
69
+ --bb-color-purple-200: #efdffc;
70
+ --bb-color-purple-300: #dfc0fa;
71
+ --bb-color-purple-400: #d0a0f7;
72
+ --bb-color-purple-500: #c081f5;
73
+ --bb-color-purple-600: #b061f2;
74
+ --bb-color-purple-700: #8d4ec2;
75
+ --bb-color-purple-800: #6a3a91;
76
+ --bb-color-purple-900: #462761;
77
+ --bb-color-red-100: #fcefef;
48
78
  --bb-color-red-1000: #2b0c0c;
49
79
  --bb-color-red-200: #f7d8d8;
50
80
  --bb-color-red-300: #f0b0b1;
@@ -55,9 +85,29 @@
55
85
  --bb-color-red-800: #822325;
56
86
  --bb-color-red-900: #571718;
57
87
  --bb-color-scrim: rgba(37, 43, 51, 0.5);
88
+ --bb-color-sky-100: #ebfbff;
89
+ --bb-color-sky-1000: #002933;
90
+ --bb-color-sky-200: #ccf5ff;
91
+ --bb-color-sky-300: #99ecff;
92
+ --bb-color-sky-400: #66e2ff;
93
+ --bb-color-sky-500: #33d9ff;
94
+ --bb-color-sky-600: #00cfff;
95
+ --bb-color-sky-700: #00a6cc;
96
+ --bb-color-sky-800: #007c99;
97
+ --bb-color-sky-900: #005366;
98
+ --bb-color-teal-100: #ebfaf9;
99
+ --bb-color-teal-1000: #012625;
100
+ --bb-color-teal-200: #cdf2f1;
101
+ --bb-color-teal-300: #9ce5e3;
102
+ --bb-color-teal-400: #6ad8d4;
103
+ --bb-color-teal-500: #39cbc6;
104
+ --bb-color-teal-600: #07beb8;
105
+ --bb-color-teal-700: #069893;
106
+ --bb-color-teal-800: #04726e;
107
+ --bb-color-teal-900: #034c4a;
58
108
  --bb-color-transparent: rgba(0, 0, 0, 0);
59
109
  --bb-color-white: #ffffff;
60
- --bb-color-yellow-100: #fff7eb;
110
+ --bb-color-yellow-100: #fff9ef;
61
111
  --bb-color-yellow-1000: #32230a;
62
112
  --bb-color-yellow-200: #feefd6;
63
113
  --bb-color-yellow-300: #fddfae;
@@ -293,6 +343,7 @@
293
343
  --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-100);
294
344
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
295
345
  --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
346
+ --sky-color-border-column_divider: var(--bb-color-blue-600);
296
347
  --sky-color-border-container-base: var(--bb-color-gray-100);
297
348
  --sky-color-border-danger: var(--bb-color-red-600);
298
349
  --sky-color-border-divider: var(--bb-color-gray-100);
@@ -324,6 +375,13 @@
324
375
  --sky-color-border-switch-selected-hover: var(--bb-color-blue-1000);
325
376
  --sky-color-border-text_highlight: var(--bb-color-yellow-800);
326
377
  --sky-color-border-warning: var(--bb-color-yellow-600);
378
+ --sky-color-category-blue: var(--bb-color-sky-300);
379
+ --sky-color-category-green: var(--bb-color-green-300);
380
+ --sky-color-category-orange: var(--bb-color-orange-400);
381
+ --sky-color-category-purple: var(--bb-color-purple-300);
382
+ --sky-color-category-red: var(--bb-color-red-300);
383
+ --sky-color-category-teal: var(--bb-color-teal-400);
384
+ --sky-color-category-yellow: var(--bb-color-yellow-300);
327
385
  --sky-color-icon-action: var(--bb-color-blue-600);
328
386
  --sky-color-icon-danger: var(--bb-color-red-600);
329
387
  --sky-color-icon-deemphasized: var(--bb-color-gray-600);
@@ -395,6 +453,7 @@
395
453
  --sky-border-width-container-base: var(--bb-size-fixed-6);
396
454
  --sky-border-width-divider: var(--bb-size-fixed-6);
397
455
  --sky-border-width-elevation: var(--bb-size-fixed-6);
456
+ --sky-border-width-emphasized: var(--bb-size-fixed-12);
398
457
  --sky-border-width-input-active: var(--bb-size-fixed-12);
399
458
  --sky-border-width-input-base: var(--bb-size-fixed-6);
400
459
  --sky-border-width-input-disabled: var(--bb-size-fixed-6);
package/assets/scss/modern.css CHANGED
@@ -13,6 +13,13 @@
13
13
  --modern-color-blue-50: #00b4f1;
14
14
  --modern-color-blue-74: #1870b8;
15
15
  --modern-color-blue-80: #0d5ead;
16
+ --modern-color-category-green-30: #80dbca;
17
+ --modern-color-category-orange-30: #f9ba90;
18
+ --modern-color-category-purple-30: #c9b6d7;
19
+ --modern-color-category-red-30: #f7a0a1;
20
+ --modern-color-category-sky_blue-20: #bfecfb;
21
+ --modern-color-category-sky_blue-40: #40c7f4;
22
+ --modern-color-category-yellow-30: #fdd799;
16
23
  --modern-color-gray-005: #fcfcfc;
17
24
  --modern-color-gray-05: #eeeeef;
18
25
  --modern-color-gray-07: #ededee;
@@ -29,8 +36,6 @@
29
36
  --modern-color-red-70: #d93a3d;
30
37
  --modern-color-scrim: rgba(0, 0, 0, 0.5);
31
38
  --modern-color-shadow_color: rgba(0, 0, 0, 0.3);
32
- --modern-color-sky_blue-20: #bfecfb;
33
- --modern-color-sky_blue-40: #40c7f4;
34
39
  --modern-color-transparent: rgba(0, 0, 0, 0);
35
40
  --modern-color-white: #ffffff;
36
41
  --modern-color-yellow-30: #ffd597;
@@ -210,6 +215,7 @@
210
215
  --sky-color-border-action-tertiary-disabled: var(--modern-color-gray-15);
211
216
  --sky-color-border-action-tertiary-focus: var(--modern-color-blue-74);
212
217
  --sky-color-border-action-tertiary-hover: var(--modern-color-blue-74);
218
+ --sky-color-border-column_divider: var(--modern-color-gray-70);
213
219
  --sky-color-border-container-base: var(--modern-color-gray-15);
214
220
  --sky-color-border-danger: var(--modern-color-red-50);
215
221
  --sky-color-border-divider: var(--modern-color-gray-15);
@@ -241,6 +247,13 @@
241
247
  --sky-color-border-switch-selected-hover: var(--modern-color-blue-74);
242
248
  --sky-color-border-text_highlight: var(--modern-color-yellow-80);
243
249
  --sky-color-border-warning: var(--modern-color-yellow-50);
250
+ --sky-color-category-blue: var(--modern-color-category-sky_blue-40);
251
+ --sky-color-category-green: var(--modern-color-category-sky_blue-20);
252
+ --sky-color-category-orange: var(--modern-color-category-orange-30);
253
+ --sky-color-category-purple: var(--modern-color-category-purple-30);
254
+ --sky-color-category-red: var(--modern-color-category-red-30);
255
+ --sky-color-category-teal: var(--modern-color-category-green-30);
256
+ --sky-color-category-yellow: var(--modern-color-category-yellow-30);
244
257
  --sky-color-icon-action: var(--modern-color-blue-74);
245
258
  --sky-color-icon-danger: var(--modern-color-red-50);
246
259
  --sky-color-icon-deemphasized: var(--modern-color-gray-70);
@@ -311,6 +324,7 @@
311
324
  --sky-border-width-container-base: var(--modern-size-1);
312
325
  --sky-border-width-divider: var(--modern-size-1);
313
326
  --sky-border-width-elevation: var(--modern-size-1);
327
+ --sky-border-width-emphasized: var(--modern-size-1);
314
328
  --sky-border-width-input-active: var(--modern-size-2);
315
329
  --sky-border-width-input-base: var(--modern-size-1);
316
330
  --sky-border-width-input-disabled: var(--modern-size-1);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "0.0.55",
3
+ "version": "0.0.57",
4
4
  "description": "Design tokens for SKY UX",
5
5
  "homepage": "https://github.com/blackbaud/skyux-design-tokens",
6
6
  "license": "MIT",
@@ -17,16 +17,16 @@
17
17
  "devDependencies": {
18
18
  "@tokens-studio/sd-transforms": "1.3.0",
19
19
  "@types/fs-extra": "11.0.4",
20
- "@types/node": "22.13.17",
21
- "@vitest/coverage-v8": "3.1.1",
20
+ "@types/node": "22.15.19",
21
+ "@vitest/coverage-v8": "3.1.4",
22
22
  "fs-extra": "11.3.0",
23
- "glob": "11.0.1",
24
- "js-yaml": "3.13.1",
23
+ "glob": "11.0.2",
24
+ "js-yaml": "4.1.0",
25
25
  "prettier": "3.5.3",
26
26
  "style-dictionary": "4.4.0",
27
- "typescript": "5.8.2",
28
- "vite": "5.3.4",
29
- "vitest": "3.1.1"
27
+ "typescript": "5.8.3",
28
+ "vite": "5.4.19",
29
+ "vitest": "3.1.4"
30
30
  },
31
31
  "repository": {
32
32
  "type": "git",