@blackbaud/skyux-design-tokens 0.0.27 → 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 (9) hide show
  1. package/CHANGELOG.md +44 -27
  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 -339
  5. package/package.json +14 -3
  6. package/scss/blackbaud.css +521 -0
  7. package/scss/modern.css +304 -0
  8. package/scss/themes/modern/variables.scss +2 -0
  9. package/yaml/themes/modern/design-tokens.yaml +2 -0
package/CHANGELOG.md CHANGED
@@ -1,110 +1,127 @@
1
- # 0.0.27 (2023-06-22)
1
+ ## 0.0.28 (2023-10-11)
2
+
3
+ - Added `neutral-medium-dark` token in modern. [#64](https://github.com/blackbaud/skyux-design-tokens/pull/64)
4
+
5
+ ## [0.0.29](https://github.com/blackbaud/skyux-design-tokens/compare/v0.0.29...0.0.29) (2024-09-23)
6
+
7
+
8
+ ### Features
9
+
10
+ * added additional tokens ([c7561e8](https://github.com/blackbaud/skyux-design-tokens/commit/c7561e8f0d28d75b9f345a3e56d9ec8dcc469c6a))
11
+ * added token generation using style dictionary ([cd6c248](https://github.com/blackbaud/skyux-design-tokens/commit/cd6c24829dfd0a3b0afcc5c9cf066e29f171402f))
12
+
13
+
14
+ ### Bug Fixes
15
+
16
+ * remove calling deleted package script in publish ([#71](https://github.com/blackbaud/skyux-design-tokens/issues/71)) ([0a7a762](https://github.com/blackbaud/skyux-design-tokens/commit/0a7a76254dc3c4c27c861c89a8052ac727ed35d9))
17
+
18
+ ## 0.0.27 (2023-06-22)
2
19
 
3
20
  - Updated `sky-theme-modern-background-color-disabled`. [#63](https://github.com/blackbaud/skyux-design-tokens/pull/63)
4
21
 
5
- # 0.0.26 (2023-03-10)
22
+ ## 0.0.26 (2023-03-10)
6
23
 
7
24
  - Added new blue-05 color. [#61](https://github.com/blackbaud/skyux-design-tokens/pull/61)
8
25
 
9
- # 0.0.25 (2022-04-11)
26
+ ## 0.0.25 (2022-04-11)
10
27
 
11
28
  - Updated the SCSS mixins to implement `@use` modules. #60
12
29
 
13
- # 0.0.24 (2021-06-23)
30
+ ## 0.0.24 (2021-06-23)
14
31
 
15
32
  - Updated font URLs to point to the renamed BLKB Sans font. [#56](https://github.com/blackbaud/skyux-design-tokens/pull/56)
16
33
 
17
- # 0.0.23 (2021-04-19)
34
+ ## 0.0.23 (2021-04-19)
18
35
 
19
36
  - Added spacing classes and primary action border color to the modern theme. [#54](https://github.com/blackbaud/skyux-design-tokens/pull/54)
20
37
 
21
- # 0.0.22 (2020-07-27)
38
+ ## 0.0.22 (2020-07-27)
22
39
 
23
40
  - Added dark mode colors to the modern theme. [#51](https://github.com/blackbaud/skyux-design-tokens/pull/51)
24
41
 
25
- # 0.0.21 (2020-07-06)
42
+ ## 0.0.21 (2020-07-06)
26
43
 
27
44
  - Renamed the modern theme `field-` tokens to `data-`. [#46](https://github.com/blackbaud/skyux-design-tokens/pull/46)
28
45
  - Added medium horizontal padding tokens to the modern theme. [#46](https://github.com/blackbaud/skyux-design-tokens/pull/46)
29
46
  - Added a large inline margin token to the modern theme. [#47](https://github.com/blackbaud/skyux-design-tokens/pull/47)
30
47
 
31
- # 0.0.20 (2020-06-03)
48
+ ## 0.0.20 (2020-06-03)
32
49
 
33
50
  - Added button padding tokens to the modern theme. [#45](https://github.com/blackbaud/skyux-design-tokens/pull/45)
34
51
 
35
- # 0.0.19 (2020-05-27)
52
+ ## 0.0.19 (2020-05-27)
36
53
 
37
54
  - Added colors for dark mode. [#44](https://github.com/blackbaud/skyux-design-tokens/pull/44)
38
55
 
39
- # 0.0.18 (2020-05-07)
56
+ ## 0.0.18 (2020-05-07)
40
57
 
41
58
  - Added a medium gray background color to the modern theme. [#42](https://github.com/blackbaud/skyux-design-tokens/pull/42)
42
59
 
43
- # 0.0.17 (2020-04-30)
60
+ ## 0.0.17 (2020-04-30)
44
61
 
45
62
  - Added horizontal padding tokens and de-emphasized text weight to the modern theme. [#39](https://github.com/blackbaud/skyux-design-tokens/pull/39)
46
63
  - Added a border radius token for the SKY UX box element to the modern theme. [#40](https://github.com/blackbaud/skyux-design-tokens/pull/40)
47
64
 
48
- # 0.0.16 (2020-04-16)
65
+ ## 0.0.16 (2020-04-16)
49
66
 
50
67
  - Moved text tokens to the default theme. [#37](https://github.com/blackbaud/skyux-design-tokens/pull/37)
51
68
 
52
- # 0.0.15 (2020-04-10)
69
+ ## 0.0.15 (2020-04-10)
53
70
 
54
71
  - Adjusted modern theme tokens. [#35](https://github.com/blackbaud/skyux-design-tokens/pull/35)
55
72
 
56
- # 0.0.14 (2020-04-08)
73
+ ## 0.0.14 (2020-04-08)
57
74
 
58
75
  - Added "modern" theme. [#32](https://github.com/blackbaud/skyux-design-tokens/pull/32)
59
76
 
60
- # 0.0.13 (2019-10-07)
77
+ ## 0.0.13 (2019-10-07)
61
78
 
62
79
  - Added color values to represent various categories. [#26](https://github.com/blackbaud/skyux-design-tokens/pull/26)
63
80
 
64
- # 0.0.12 (2019-05-20)
81
+ ## 0.0.12 (2019-05-20)
65
82
 
66
83
  - Added value for default body background color. [#25](https://github.com/blackbaud/skyux-design-tokens/pull/25)
67
84
 
68
- # 0.0.11 (2019-01-04)
85
+ ## 0.0.11 (2019-01-04)
69
86
 
70
87
  - Updated primary text and anchor colors to pass a11y color contrast rule. [#24](https://github.com/blackbaud/skyux-design-tokens/pull/24)
71
88
 
72
- # 0.0.10 (2018-09-25)
89
+ ## 0.0.10 (2018-09-25)
73
90
 
74
91
  - Reduced pixel value for "compact" margin size. [#21](https://github.com/blackbaud/skyux-design-tokens/pull/21)
75
92
 
76
- # 0.0.9 (2018-08-21)
93
+ ## 0.0.9 (2018-08-21)
77
94
 
78
95
  - Added values for viewport breakpoints and spacing. [#17](https://github.com/blackbaud/skyux-design-tokens/pull/17) [#19](https://github.com/blackbaud/skyux-design-tokens/pull/19)
79
96
 
80
- # 0.0.8 (2017-08-17)
97
+ ## 0.0.8 (2017-08-17)
81
98
 
82
99
  - Created styles for `icon-borderless` and `info-light`.
83
100
 
84
- # 0.0.7 (2017-07-17)
101
+ ## 0.0.7 (2017-07-17)
85
102
 
86
103
  - Changed row border color to $sky-border-color-neutral-medium.
87
104
 
88
- # 0.0.6 (2017-07-12)
105
+ ## 0.0.6 (2017-07-12)
89
106
 
90
107
  - Added the sky-border convenience mixin.
91
108
 
92
- # 0.0.5 (2017-07-10)
109
+ ## 0.0.5 (2017-07-10)
93
110
 
94
111
  - Changed color-gray-70 from #6f737a to #686c73.
95
112
 
96
- # 0.0.4 (2017-06-27)
113
+ ## 0.0.4 (2017-06-27)
97
114
 
98
115
  - Tweaked package.json.
99
116
 
100
- # 0.0.3 (2017-06-24)
117
+ ## 0.0.3 (2017-06-24)
101
118
 
102
119
  - Fixed typo for release.
103
120
 
104
- # 0.0.2 (2017-06-23)
121
+ ## 0.0.2 (2017-06-23)
105
122
 
106
123
  - Fixed syntax error for package preparation.
107
124
 
108
- # 0.0.1 (2017-06-23)
125
+ ## 0.0.1 (2017-06-23)
109
126
 
110
127
  - Added initial design tokens for SKY UX.
package/bundles/design-tokens.global.min.js ADDED
@@ -0,0 +1 @@
1
+ document.body.classList.add("local-dev-tokens");
package/json/design-tokens.json CHANGED
@@ -1,247 +1 @@
1
- {
2
- "color": {
3
- "white": "#ffffff",
4
- "black": "#000000",
5
- "gray": {
6
- "10": "#e2e3e4",
7
- "20": "#cdcfd2",
8
- "70": "#686c73",
9
- "80": "#4d525a",
10
- "90": "#393d44",
11
- "100": "#282b31",
12
- "105": "#212327",
13
- "01": "#fbfbfb",
14
- "05": "#eeeeef"
15
- },
16
- "blue": {
17
- "10": "#c1e8fb",
18
- "30": "#81d4f7",
19
- "50": "#00b4f1",
20
- "70": "#007ca6",
21
- "75": "#0974a1",
22
- "05": "#ebfbff"
23
- },
24
- "green": {
25
- "30": "#b7da9b",
26
- "50": "#72bf44"
27
- },
28
- "yellow": {
29
- "30": "#ffd597",
30
- "50": "#fbb034"
31
- },
32
- "red": {
33
- "30": "#f7a08f",
34
- "50": "#ef4044",
35
- "70": "#d93a3d"
36
- },
37
- "purple": {
38
- "10": "#f1eef6",
39
- "50": "#936daf"
40
- },
41
- "teal": {
42
- "50": "#00b795",
43
- "70": "#00866d"
44
- },
45
- "blackbaud": {
46
- "sky-blue": {
47
- "20": "#bfecfb",
48
- "40": "#40c7f4"
49
- },
50
- "green": {
51
- "30": "#80dbca"
52
- },
53
- "yellow": {
54
- "30": "#fdd799"
55
- },
56
- "orange": {
57
- "30": "#f9ba90"
58
- },
59
- "red": {
60
- "30": "#f7a0a1"
61
- },
62
- "purple": {
63
- "30": "#c9b6d7"
64
- }
65
- }
66
- },
67
- "size": {
68
- "screen": {
69
- "xs": {
70
- "max": "767px"
71
- },
72
- "sm": {
73
- "min": "768px",
74
- "max": "991px"
75
- },
76
- "md": {
77
- "min": "992px",
78
- "max": "1199px"
79
- },
80
- "lg": {
81
- "min": "1200px"
82
- }
83
- }
84
- },
85
- "space": {
86
- "default": "10px",
87
- "xxs": "3px",
88
- "xs": "5px",
89
- "sm": "8px",
90
- "md": "10px",
91
- "lg": "15px",
92
- "xl": "20px"
93
- },
94
- "text": {
95
- "size": {
96
- "100": "12px",
97
- "125": "13px",
98
- "150": "14px",
99
- "200": "16px",
100
- "250": "18px",
101
- "300": "20px",
102
- "400": "24px",
103
- "500": "28px",
104
- "600": "32px",
105
- "800": "48px"
106
- },
107
- "weight": {
108
- "thin": {
109
- "file": "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Thin.woff",
110
- "value": "100"
111
- },
112
- "light": {
113
- "file": "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Light.woff",
114
- "value": "300"
115
- },
116
- "regular": {
117
- "file": "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Regular.woff",
118
- "value": "400"
119
- },
120
- "semibold": {
121
- "file": "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Semibold.woff",
122
- "value": "600"
123
- },
124
- "bold": {
125
- "file": "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Bold.woff",
126
- "value": "700"
127
- },
128
- "condensed": {
129
- "light": {
130
- "file": "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-CondLight.woff",
131
- "value": "300"
132
- },
133
- "semibold": {
134
- "file": "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-CondSemibold.woff",
135
- "value": "600"
136
- }
137
- }
138
- },
139
- "style": {
140
- "italic": {
141
- "file": "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff",
142
- "value": "italic"
143
- },
144
- "uppercase": "uppercase"
145
- }
146
- },
147
- "text-color": {
148
- "default": "#212327",
149
- "deemphasized": "#686c73",
150
- "on-dark": "#ffffff",
151
- "action-primary": "#0974a1",
152
- "icon-borderless": "#cdcfd2"
153
- },
154
- "background-color": {
155
- "neutral-light": "#eeeeef",
156
- "primary-dark": "#0974a1",
157
- "selected": "#f1eef6",
158
- "disabled": "#cdcfd2",
159
- "info": "#81d4f7",
160
- "info-light": "#c1e8fb",
161
- "success": "#b7da9b",
162
- "warning": "#ffd597",
163
- "danger": "#f7a08f",
164
- "danger-dark": "#d93a3d",
165
- "page-default": "#ffffff"
166
- },
167
- "category-color": {
168
- "light-blue": "#bfecfb",
169
- "teal": "#80dbca",
170
- "purple": "#c9b6d7",
171
- "orange": "#f9ba90",
172
- "blue": "#40c7f4",
173
- "yellow": "#fdd799",
174
- "red": "#f7a0a1"
175
- },
176
- "highlight-color": {
177
- "info": "#00b4f1",
178
- "success": "#72bf44",
179
- "warning": "#fbb034",
180
- "danger": "#ef4044"
181
- },
182
- "border-color": {
183
- "neutral-light": "#e2e3e4",
184
- "neutral-medium": "#cdcfd2"
185
- },
186
- "screen": {
187
- "xs-max": "767px",
188
- "sm-min": "768px",
189
- "sm-max": "991px",
190
- "md-min": "992px",
191
- "md-max": "1199px",
192
- "lg-min": "1200px"
193
- },
194
- "padding": {
195
- "even": {
196
- "default": [
197
- "10px",
198
- "10px",
199
- "10px",
200
- "10px"
201
- ],
202
- "small": [
203
- "8px",
204
- "8px",
205
- "8px",
206
- "8px"
207
- ],
208
- "large": [
209
- "15px",
210
- "15px",
211
- "15px",
212
- "15px"
213
- ]
214
- },
215
- "squish": {
216
- "default": [
217
- "5px",
218
- "10px",
219
- "5px",
220
- "10px"
221
- ],
222
- "small": [
223
- "3px",
224
- "8px",
225
- "3px",
226
- "8px"
227
- ],
228
- "large": [
229
- "8px",
230
- "15px",
231
- "8px",
232
- "15px"
233
- ]
234
- }
235
- },
236
- "margin": {
237
- "inline": {
238
- "default": "10px",
239
- "compact": "5px"
240
- },
241
- "stacked": {
242
- "default": "10px",
243
- "compact": "5px",
244
- "separate": "20px"
245
- }
246
- }
247
- }
1
+ {"color":{"white":"#ffffff","black":"#000000","gray":{"10":"#e2e3e4","20":"#cdcfd2","70":"#686c73","80":"#4d525a","90":"#393d44","100":"#282b31","105":"#212327","01":"#fbfbfb","05":"#eeeeef"},"blue":{"10":"#c1e8fb","30":"#81d4f7","50":"#00b4f1","70":"#007ca6","75":"#0974a1","05":"#ebfbff"},"green":{"30":"#b7da9b","50":"#72bf44"},"yellow":{"30":"#ffd597","50":"#fbb034"},"red":{"30":"#f7a08f","50":"#ef4044","70":"#d93a3d"},"purple":{"10":"#f1eef6","50":"#936daf"},"teal":{"50":"#00b795","70":"#00866d"},"blackbaud":{"sky-blue":{"20":"#bfecfb","40":"#40c7f4"},"green":{"30":"#80dbca"},"yellow":{"30":"#fdd799"},"orange":{"30":"#f9ba90"},"red":{"30":"#f7a0a1"},"purple":{"30":"#c9b6d7"}}},"size":{"screen":{"xs":{"max":"767px"},"sm":{"min":"768px","max":"991px"},"md":{"min":"992px","max":"1199px"},"lg":{"min":"1200px"}}},"space":{"default":"10px","xxs":"3px","xs":"5px","sm":"8px","md":"10px","lg":"15px","xl":"20px"},"text":{"size":{"100":"12px","125":"13px","150":"14px","200":"16px","250":"18px","300":"20px","400":"24px","500":"28px","600":"32px","800":"48px"},"weight":{"thin":{"file":"https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Thin.woff","value":"100"},"light":{"file":"https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Light.woff","value":"300"},"regular":{"file":"https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Regular.woff","value":"400"},"semibold":{"file":"https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Semibold.woff","value":"600"},"bold":{"file":"https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Bold.woff","value":"700"},"condensed":{"light":{"file":"https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-CondLight.woff","value":"300"},"semibold":{"file":"https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-CondSemibold.woff","value":"600"}}},"style":{"italic":{"file":"https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff","value":"italic"},"uppercase":"uppercase"}},"text-color":{"default":"#212327","deemphasized":"#686c73","on-dark":"#ffffff","action-primary":"#0974a1","icon-borderless":"#cdcfd2"},"background-color":{"neutral-light":"#eeeeef","primary-dark":"#0974a1","selected":"#f1eef6","disabled":"#cdcfd2","info":"#81d4f7","info-light":"#c1e8fb","success":"#b7da9b","warning":"#ffd597","danger":"#f7a08f","danger-dark":"#d93a3d","page-default":"#ffffff"},"category-color":{"light-blue":"#bfecfb","teal":"#80dbca","purple":"#c9b6d7","orange":"#f9ba90","blue":"#40c7f4","yellow":"#fdd799","red":"#f7a0a1"},"highlight-color":{"info":"#00b4f1","success":"#72bf44","warning":"#fbb034","danger":"#ef4044"},"border-color":{"neutral-light":"#e2e3e4","neutral-medium":"#cdcfd2"},"screen":{"xs-max":"767px","sm-min":"768px","sm-max":"991px","md-min":"992px","md-max":"1199px","lg-min":"1200px"},"padding":{"even":{"default":["10px","10px","10px","10px"],"small":["8px","8px","8px","8px"],"large":["15px","15px","15px","15px"]},"squish":{"default":["5px","10px","5px","10px"],"small":["3px","8px","3px","8px"],"large":["8px","15px","8px","15px"]}},"margin":{"inline":{"default":"10px","compact":"5px"},"stacked":{"default":"10px","compact":"5px","separate":"20px"}}}