@blackbaud/skyux-design-tokens 0.0.22 → 0.0.25

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 +12 -0
  2. package/json/design-tokens.json +8 -8
  3. package/json/themes/modern/design-tokens.json +4 -1
  4. package/package.json +1 -1
  5. package/scss/mixins.scss +4 -4
  6. package/scss/themes/modern/variables.scss +3 -0
  7. package/scss/variables.scss +8 -8
  8. package/yaml/design-tokens.yaml +16 -16
  9. package/yaml/themes/modern/design-tokens.yaml +3 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # 0.0.25 (2022-04-11)
2
+
3
+ - Updated the SCSS mixins to implement `@use` modules. #60
4
+
5
+ # 0.0.24 (2021-06-23)
6
+
7
+ - Updated font URLs to point to the renamed BLKB Sans font. [#56](https://github.com/blackbaud/skyux-design-tokens/pull/56)
8
+
9
+ # 0.0.23 (2021-04-19)
10
+
11
+ - Added spacing classes and primary action border color to the modern theme. [#54](https://github.com/blackbaud/skyux-design-tokens/pull/54)
12
+
1
13
  # 0.0.22 (2020-07-27)
2
14
 
3
15
  - Added dark mode colors to the modern theme. [#51](https://github.com/blackbaud/skyux-design-tokens/pull/51)
package/json/design-tokens.json CHANGED
@@ -105,39 +105,39 @@
105
105
  },
106
106
  "weight": {
107
107
  "thin": {
108
- "file": "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans-thin.woff",
108
+ "file": "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Thin.woff",
109
109
  "value": "100"
110
110
  },
111
111
  "light": {
112
- "file": "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans-light.woff",
112
+ "file": "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Light.woff",
113
113
  "value": "300"
114
114
  },
115
115
  "regular": {
116
- "file": "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans.woff",
116
+ "file": "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Regular.woff",
117
117
  "value": "400"
118
118
  },
119
119
  "semibold": {
120
- "file": "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans-semi-bold.woff",
120
+ "file": "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Semibold.woff",
121
121
  "value": "600"
122
122
  },
123
123
  "bold": {
124
- "file": "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans-bold.woff",
124
+ "file": "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Bold.woff",
125
125
  "value": "700"
126
126
  },
127
127
  "condensed": {
128
128
  "light": {
129
- "file": "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans-condensed-light.woff",
129
+ "file": "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-CondLight.woff",
130
130
  "value": "300"
131
131
  },
132
132
  "semibold": {
133
- "file": "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans-condensed-semi-bold.woff",
133
+ "file": "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-CondSemibold.woff",
134
134
  "value": "600"
135
135
  }
136
136
  }
137
137
  },
138
138
  "style": {
139
139
  "italic": {
140
- "file": "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans-italic.woff",
140
+ "file": "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff",
141
141
  "value": "italic"
142
142
  },
143
143
  "uppercase": "uppercase"
package/json/themes/modern/design-tokens.json CHANGED
@@ -88,7 +88,8 @@
88
88
  },
89
89
  "border-color": {
90
90
  "neutral-light": "#ededee",
91
- "neutral-medium": "#d2d2d2"
91
+ "neutral-medium": "#d2d2d2",
92
+ "primary-dark": "#1870B8"
92
93
  },
93
94
  "padding": {
94
95
  "even": {
@@ -166,12 +167,14 @@
166
167
  "inline": {
167
168
  "xs": "5px",
168
169
  "sm": "10px",
170
+ "md": "15px",
169
171
  "lg": "20px",
170
172
  "xl": "30px",
171
173
  "xxl": "60px"
172
174
  },
173
175
  "stacked": {
174
176
  "xs": "5px",
177
+ "sm": "10px",
175
178
  "md": "15px",
176
179
  "lg": "20px",
177
180
  "xl": "30px",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "0.0.22",
3
+ "version": "0.0.25",
4
4
  "description": "Design tokens for SKY UX",
5
5
  "homepage": "https://github.com/blackbaud/skyux-design-tokens",
6
6
  "license": "MIT",
package/scss/mixins.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import "variables";
1
+ @use "variables" as vars;
2
2
 
3
3
  @mixin sky-border($type, $sides...) {
4
4
  @if(length($sides) == 0) {
@@ -7,15 +7,15 @@
7
7
 
8
8
  @each $side in $sides {
9
9
  @if($type == "light") {
10
- border-#{$side}: 1px solid $sky-border-color-neutral-light;
10
+ border-#{$side}: 1px solid vars.$sky-border-color-neutral-light;
11
11
  }
12
12
 
13
13
  @if($type == "dark") {
14
- border-#{$side}: 1px solid $sky-border-color-neutral-medium;
14
+ border-#{$side}: 1px solid vars.$sky-border-color-neutral-medium;
15
15
  }
16
16
 
17
17
  @if($type == "row") {
18
- border-#{$side}: 1px dotted $sky-border-color-neutral-medium;
18
+ border-#{$side}: 1px dotted vars.$sky-border-color-neutral-medium;
19
19
  }
20
20
  }
21
21
  }
package/scss/themes/modern/variables.scss CHANGED
@@ -49,6 +49,7 @@ $sky-theme-modern-background-color-disabled: #d2d2d2 !default;
49
49
  $sky-theme-modern-background-color-page-default: #fcfcfc !default;
50
50
  $sky-theme-modern-border-color-neutral-light: #ededee !default;
51
51
  $sky-theme-modern-border-color-neutral-medium: #d2d2d2 !default;
52
+ $sky-theme-modern-border-color-primary-dark: #1870B8 !default;
52
53
  $sky-theme-modern-padding-even-sm: 10px 10px 10px 10px !default;
53
54
  $sky-theme-modern-padding-even-md: 15px 15px 15px 15px !default;
54
55
  $sky-theme-modern-padding-even-lg: 20px 20px 20px 20px !default;
@@ -62,10 +63,12 @@ $sky-theme-modern-padding-button-standard: 8px 20px !default;
62
63
  $sky-theme-modern-padding-button-icon: 8px 14px !default;
63
64
  $sky-theme-modern-margin-inline-xs: 5px !default;
64
65
  $sky-theme-modern-margin-inline-sm: 10px !default;
66
+ $sky-theme-modern-margin-inline-md: 15px !default;
65
67
  $sky-theme-modern-margin-inline-lg: 20px !default;
66
68
  $sky-theme-modern-margin-inline-xl: 30px !default;
67
69
  $sky-theme-modern-margin-inline-xxl: 60px !default;
68
70
  $sky-theme-modern-margin-stacked-xs: 5px !default;
71
+ $sky-theme-modern-margin-stacked-sm: 10px !default;
69
72
  $sky-theme-modern-margin-stacked-md: 15px !default;
70
73
  $sky-theme-modern-margin-stacked-lg: 20px !default;
71
74
  $sky-theme-modern-margin-stacked-xl: 30px !default;
package/scss/variables.scss CHANGED
@@ -55,21 +55,21 @@ $sky-text-size-400: 24px !default;
55
55
  $sky-text-size-500: 28px !default;
56
56
  $sky-text-size-600: 32px !default;
57
57
  $sky-text-size-800: 48px !default;
58
- $sky-text-weight-thin-file: "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans-thin.woff" !default;
58
+ $sky-text-weight-thin-file: "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Thin.woff" !default;
59
59
  $sky-text-weight-thin-value: 100 !default;
60
- $sky-text-weight-light-file: "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans-light.woff" !default;
60
+ $sky-text-weight-light-file: "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Light.woff" !default;
61
61
  $sky-text-weight-light-value: 300 !default;
62
- $sky-text-weight-regular-file: "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans.woff" !default;
62
+ $sky-text-weight-regular-file: "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Regular.woff" !default;
63
63
  $sky-text-weight-regular-value: 400 !default;
64
- $sky-text-weight-semibold-file: "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans-semi-bold.woff" !default;
64
+ $sky-text-weight-semibold-file: "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Semibold.woff" !default;
65
65
  $sky-text-weight-semibold-value: 600 !default;
66
- $sky-text-weight-bold-file: "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans-bold.woff" !default;
66
+ $sky-text-weight-bold-file: "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Bold.woff" !default;
67
67
  $sky-text-weight-bold-value: 700 !default;
68
- $sky-text-weight-condensed-light-file: "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans-condensed-light.woff" !default;
68
+ $sky-text-weight-condensed-light-file: "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-CondLight.woff" !default;
69
69
  $sky-text-weight-condensed-light-value: 300 !default;
70
- $sky-text-weight-condensed-semibold-file: "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans-condensed-semi-bold.woff" !default;
70
+ $sky-text-weight-condensed-semibold-file: "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-CondSemibold.woff" !default;
71
71
  $sky-text-weight-condensed-semibold-value: 600 !default;
72
- $sky-text-style-italic-file: "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans-italic.woff" !default;
72
+ $sky-text-style-italic-file: "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff" !default;
73
73
  $sky-text-style-italic-value: italic !default;
74
74
  $sky-text-style-uppercase: uppercase !default;
75
75
  $sky-text-color-default: #212327 !default;
package/yaml/design-tokens.yaml CHANGED
@@ -18,7 +18,7 @@ color:
18
18
  "30": &color-blue-30 "#81d4f7"
19
19
  "50": &color-blue-50 "#00b4f1"
20
20
  "70": &color-blue-70 "#007ca6"
21
- "75": &color-blue-75 "#0974a1"
21
+ "75": &color-blue-75 "#0974a1"
22
22
  green:
23
23
  "30": &color-green-30 "#b7da9b"
24
24
  "50": &color-green-50 "#72bf44"
@@ -86,30 +86,30 @@ text:
86
86
  "800": &text-size-800 "48px"
87
87
  weight:
88
88
  thin:
89
- file: &text-weight-thin-file "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans-thin.woff"
89
+ file: &text-weight-thin-file "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Thin.woff"
90
90
  value: &text-weight-thin-value "100"
91
- light:
92
- file: &text-weight-light-file "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans-light.woff"
91
+ light:
92
+ file: &text-weight-light-file "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Light.woff"
93
93
  value: &text-weight-light-value "300"
94
- regular:
95
- file: &text-weight-regular-file "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans.woff"
94
+ regular:
95
+ file: &text-weight-regular-file "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Regular.woff"
96
96
  value: &text-weight-regular-value "400"
97
- semibold:
98
- file: &text-weight-semibold-file "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans-semi-bold.woff"
97
+ semibold:
98
+ file: &text-weight-semibold-file "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Semibold.woff"
99
99
  value: &text-weight-semibold-value "600"
100
- bold:
101
- file: &text-weight-bold-file "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans-bold.woff"
100
+ bold:
101
+ file: &text-weight-bold-file "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Bold.woff"
102
102
  value: &text-weight-bold-value "700"
103
103
  condensed:
104
104
  light:
105
- file: &text-weight-condensed-light-file "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans-condensed-light.woff"
105
+ file: &text-weight-condensed-light-file "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-CondLight.woff"
106
106
  value: &text-weight-condensed-light-value "300"
107
107
  semibold:
108
- file: &text-weight-condensed-semibold-file "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans-condensed-semi-bold.woff"
108
+ file: &text-weight-condensed-semibold-file "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-CondSemibold.woff"
109
109
  value: &text-weight-condensed-semibold-value "600"
110
110
  style:
111
- italic:
112
- file: &text-italic-file "https://sky.blackbaudcdn.net/skyux-fonts/1.0.1/blackbaud-sans-italic.woff"
111
+ italic:
112
+ file: &text-italic-file "https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff"
113
113
  value: &text-italic-value "italic"
114
114
  uppercase: &text-uppercase "uppercase"
115
115
 
@@ -134,7 +134,7 @@ background-color:
134
134
  danger: *color-red-30
135
135
  danger-dark: *color-red-60
136
136
  page-default: *color-white
137
-
137
+
138
138
  category-color:
139
139
  light-blue: *color-blackbaud-sky-blue-20
140
140
  teal: *color-blackbaud-green-30
@@ -143,7 +143,7 @@ category-color:
143
143
  blue: *color-blackbaud-sky-blue-40
144
144
  yellow: *color-blackbaud-yellow-30
145
145
  red: *color-blackbaud-red-30
146
-
146
+
147
147
  highlight-color:
148
148
  info: *color-blue-50
149
149
  success: *color-green-50
package/yaml/themes/modern/design-tokens.yaml CHANGED
@@ -80,6 +80,7 @@ background-color:
80
80
  border-color:
81
81
  neutral-light: *color-gray-07
82
82
  neutral-medium: *color-gray-15
83
+ primary-dark: *color-blue-74
83
84
 
84
85
  padding:
85
86
  even:
@@ -143,11 +144,13 @@ margin:
143
144
  inline:
144
145
  xs: *space-xs
145
146
  sm: *space-sm
147
+ md: *space-md
146
148
  lg: *space-lg
147
149
  xl: *space-xl
148
150
  xxl: *space-xxl
149
151
  stacked:
150
152
  xs: *space-xs
153
+ sm: *space-sm
151
154
  md: *space-md
152
155
  lg: *space-lg
153
156
  xl: *space-xl