@blackbaud/skyux-design-tokens 0.0.56 → 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.
- package/CHANGELOG.md +7 -0
- package/assets/scss/blackbaud.css +70 -13
- package/assets/scss/modern.css +14 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
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
|
+
|
|
5
12
|
## [0.0.56](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.55...0.0.56) (2025-05-20)
|
|
6
13
|
|
|
7
14
|
|
|
@@ -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: #
|
|
13
|
-
--bb-color-blue-1000: #
|
|
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: #
|
|
17
|
-
--bb-color-blue-400: #
|
|
18
|
-
--bb-color-blue-500: #
|
|
19
|
-
--bb-color-blue-600: #
|
|
20
|
-
--bb-color-blue-700: #
|
|
21
|
-
--bb-color-blue-800: #
|
|
22
|
-
--bb-color-blue-900: #
|
|
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: #
|
|
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: #
|
|
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-
|
|
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: #
|
|
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;
|
|
@@ -325,6 +375,13 @@
|
|
|
325
375
|
--sky-color-border-switch-selected-hover: var(--bb-color-blue-1000);
|
|
326
376
|
--sky-color-border-text_highlight: var(--bb-color-yellow-800);
|
|
327
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);
|
|
328
385
|
--sky-color-icon-action: var(--bb-color-blue-600);
|
|
329
386
|
--sky-color-icon-danger: var(--bb-color-red-600);
|
|
330
387
|
--sky-color-icon-deemphasized: var(--bb-color-gray-600);
|
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;
|
|
@@ -242,6 +247,13 @@
|
|
|
242
247
|
--sky-color-border-switch-selected-hover: var(--modern-color-blue-74);
|
|
243
248
|
--sky-color-border-text_highlight: var(--modern-color-yellow-80);
|
|
244
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);
|
|
245
257
|
--sky-color-icon-action: var(--modern-color-blue-74);
|
|
246
258
|
--sky-color-icon-danger: var(--modern-color-red-50);
|
|
247
259
|
--sky-color-icon-deemphasized: var(--modern-color-gray-70);
|