@aurodesignsystem/design-tokens 4.4.0 → 4.6.0

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 (68) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/README.md +30 -23
  3. package/dist/tokens/CSSCustomProperties.css +1541 -64
  4. package/dist/tokens/CSSSizeCustomProperties.css +1 -1
  5. package/dist/tokens/JSData--color.js +16463 -2038
  6. package/dist/tokens/JSONVariablesFlat.json +470 -33
  7. package/dist/tokens/JSONVariablesNested.json +735 -48
  8. package/dist/tokens/JSObject--allTokens.js +13406 -2117
  9. package/dist/tokens/JSObject--deprecated.js +2266 -1897
  10. package/dist/tokens/JSVariables--color.js +736 -39
  11. package/dist/tokens/SCSSVariableMap.scss +1 -1
  12. package/dist/tokens/SCSSVariables.scss +1003 -46
  13. package/dist/tokens/SCSSVariablesMapFlat.scss +1006 -47
  14. package/dist/tokens/SassCustomProperties.scss +1541 -64
  15. package/dist/tokens/SassSizeCustomProperties.scss +1 -1
  16. package/dist/tokens/darkmode/CSSCustomProperties.css +4 -4
  17. package/dist/tokens/darkmode/JSDataColor.js +94 -30
  18. package/dist/tokens/darkmode/{JSObject--allDarkTokens.js → JSObject--deprecatedDark.js} +107 -43
  19. package/dist/tokens/darkmode/JSVariablesColor.js +4 -4
  20. package/dist/tokens/darkmode/SCSSVariables.scss +4 -4
  21. package/dist/tokens/darkmode/SCSSVariablesMapFlat.scss +4 -4
  22. package/dist/tokens/darkmode/SassCustomProperties.scss +4 -4
  23. package/dist/tokens/excursion/JSONVariablesFlat.json +736 -0
  24. package/dist/tokens/excursion/JSONVariablesNested.json +1222 -0
  25. package/package.json +5 -5
  26. package/src/color/alert.json +18 -103
  27. package/src/color/background.json +215 -10
  28. package/src/color/base.json +1219 -70
  29. package/src/color/border.json +253 -133
  30. package/src/color/brand.json +1204 -185
  31. package/src/color/container.json +464 -0
  32. package/src/color/icon.json +449 -91
  33. package/src/color/text.json +200 -145
  34. package/src/color/tier.json +118 -52
  35. package/src/color/ui.json +29 -115
  36. package/src/color-darkmode/base.json +6 -2
  37. package/src/color-darkmode/border.json +6 -2
  38. package/src/color-darkmode/icon.json +6 -2
  39. package/src/color-darkmode/text.json +15 -5
  40. package/src/color-darkmode/tier.json +6 -2
  41. package/src/depth.json +0 -7
  42. package/src/size/scale.json +0 -80
  43. package/src/themes/excursion/animation.json +21 -0
  44. package/src/themes/excursion/asset/font.json +35 -0
  45. package/src/themes/excursion/color/alert.json +90 -0
  46. package/src/themes/excursion/color/background.json +280 -0
  47. package/src/themes/excursion/color/base.json +1303 -0
  48. package/src/themes/excursion/color/border.json +288 -0
  49. package/src/themes/excursion/color/brand.json +1549 -0
  50. package/src/themes/excursion/color/container.json +464 -0
  51. package/src/themes/excursion/color/excursion.json +254 -0
  52. package/src/themes/excursion/color/icon.json +476 -0
  53. package/src/themes/excursion/color/text.json +270 -0
  54. package/src/themes/excursion/color/tier.json +180 -0
  55. package/src/themes/excursion/color/ui.json +125 -0
  56. package/src/themes/excursion/comments.json +34 -0
  57. package/src/themes/excursion/depth copy.json +22 -0
  58. package/src/themes/excursion/elevation.json +22 -0
  59. package/src/themes/excursion/grid-breakpoint.json +29 -0
  60. package/src/themes/excursion/grid-column.json +29 -0
  61. package/src/themes/excursion/grid-gutter.json +29 -0
  62. package/src/themes/excursion/grid-margin.json +29 -0
  63. package/src/themes/excursion/size/radius.json +9 -0
  64. package/src/themes/excursion/size/scale.json +234 -0
  65. package/src/themes/excursion/size/unitless-scale.json +82 -0
  66. package/src/themes/excursion/text.json +572 -0
  67. package/src/breakpoint.json +0 -28
  68. package/src/shadow.json +0 -13
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aurodesignsystem/design-tokens",
3
- "version": "4.4.0",
3
+ "version": "4.6.0",
4
4
  "description": "Alaska Air Auro Design System token repository",
5
5
  "homepage": "https://github.com/AlaskaAirlines/DesignTokens",
6
6
  "author": "Alaska Airlines Product design and engineering",
@@ -82,12 +82,12 @@
82
82
  "email": "dale.sande@alaskaair.com"
83
83
  },
84
84
  {
85
- "name": "Camron Lockeby",
86
- "email": "camron.lockeby@alaskaair.com"
85
+ "name": "Jason Baker",
86
+ "email": "jason.baker@alaskaair.com"
87
87
  },
88
88
  {
89
- "name": "Kevin Sonnichsen",
90
- "email": "Kevin.Sonnichsen@alaskaair.com"
89
+ "name": "Jordan Jones",
90
+ "email": "jordan.jones4@alaskaair.com"
91
91
  }
92
92
  ]
93
93
  }
package/src/color/alert.json CHANGED
@@ -2,162 +2,75 @@
2
2
  "color": {
3
3
  "alert": {
4
4
  "notification": {
5
- "onLight": {
6
- "value": "{color.brand.atlas.400.value}",
7
- "public": false,
8
- "onLight": true,
9
- "usage": "Notification color on light backgrounds",
10
- "wcag": "AAA",
11
- "deprecated": true,
12
- "comment": "Deprecated token",
13
- "reference": "color-alert-notification-default",
14
- "version": "3.15.0"
15
- },
16
5
  "default": {
17
6
  "value": "{color.brand.atlas.400.value}",
18
7
  "public": true,
19
8
  "default": true,
20
9
  "usage": "Notification color on light backgrounds",
21
10
  "wcag": "AAA",
22
- "deprecated": false
23
- },
24
- "onDark": {
25
- "value": "{color.brand.breeze.300.value}",
26
- "public": false,
27
- "onDark": true,
28
- "usage": "Notification color on dark backgrounds",
29
- "wcag": "AAA",
30
11
  "deprecated": true,
31
- "comment": "Deprecated token",
32
- "reference": "n/a",
33
- "version": "3.12.0"
12
+ "version": "4.5.0",
13
+ "reference": "n/a"
34
14
  }
35
15
  },
36
16
  "warning": {
37
- "onLight": {
38
- "value": "{color.state.warning.500.value}",
39
- "public": false,
40
- "onLight": true,
41
- "usage": "Warning color on light backgrounds",
42
- "wcag": "AAA",
43
- "deprecated": true,
44
- "comment": "Deprecated token",
45
- "reference": "n/a",
46
- "version": "3.12.0"
47
- },
48
17
  "default": {
49
18
  "value": "{color.state.warning.500.value}",
50
19
  "public": true,
51
20
  "default": true,
52
21
  "usage": "Warning color on light backgrounds",
53
22
  "wcag": "AAA",
54
- "deprecated": false
23
+ "deprecated": true,
24
+ "version": "4.5.0",
25
+ "reference": "n/a"
55
26
  }
56
27
  },
57
28
  "error": {
58
- "onLight": {
59
- "value": "{color.state.error.500.value}",
60
- "public": false,
61
- "onLight": true,
62
- "usage": "Error color on light backgrounds",
63
- "wcag": "AAA",
64
- "deprecated": true,
65
- "comment": "Deprecated token",
66
- "reference": "color-alert-error-default",
67
- "version": "3.15.0"
68
- },
69
29
  "default": {
70
30
  "value": "{color.state.error.500.value}",
71
31
  "public": true,
72
32
  "default": true,
73
33
  "usage": "Error color on light backgrounds",
74
34
  "wcag": "AAA",
75
- "deprecated": false
76
- },
77
- "onDark": {
78
- "value": "{color.state.error.100.value}",
79
- "public": false,
80
- "onDark": true,
81
- "usage": "Error color on dark backgrounds",
82
- "wcag": "AAA",
83
35
  "deprecated": true,
84
- "reference": "n/a",
85
- "comment": "Deprecated token",
86
- "version": "3.12.0"
36
+ "version": "4.5.0",
37
+ "reference": "n/a"
87
38
  }
88
39
  },
89
40
  "success": {
90
- "onLight": {
91
- "value": "{color.state.success.500.value}",
92
- "public": false,
93
- "onLight": true,
94
- "usage": "Success color on light backgrounds",
95
- "wcag": "AAA",
96
- "deprecated": true,
97
- "comment": "Deprecated token",
98
- "reference": "color-alert-success-default",
99
- "version": "3.15.0"
100
- },
101
41
  "default": {
102
42
  "value": "{color.state.success.500.value}",
103
43
  "public": true,
104
44
  "default": true,
105
45
  "usage": "Success color on light backgrounds",
106
46
  "wcag": "AAA",
107
- "deprecated": false
108
- },
109
- "onDark": {
110
- "value": "{color.state.success.100.value}",
111
- "public": false,
112
- "onDark": true,
113
- "usage": "Success color on dark backgrounds",
114
- "wcag": "AAA",
115
47
  "deprecated": true,
116
- "comment": "Deprecated token",
117
- "reference": "n/a",
118
- "version": "3.12.0"
48
+ "version": "4.5.0",
49
+ "reference": "n/a"
119
50
  }
120
51
  },
121
52
  "advisory": {
122
- "onLight": {
123
- "value": "{color.brand.goldcoast.100.value}",
124
- "public": false,
125
- "onLight": true,
126
- "usage": "Travel advisory or system maintenance color on light backgrounds",
127
- "wcag": "AAA",
128
- "deprecated": true,
129
- "comment": "Deprecated token",
130
- "reference": "color-alert-advisory-default",
131
- "version": "3.15.0"
132
- },
133
53
  "default": {
134
54
  "value": "{color.brand.goldcoast.100.value}",
135
55
  "public": true,
136
56
  "default": true,
137
57
  "usage": "Travel advisory or system maintenance color on light backgrounds",
138
58
  "wcag": "AAA",
139
- "deprecated": false
140
- },
141
- "onDark": {
142
- "value": "{color.brand.goldcoast.100.value}",
143
- "public": false,
144
- "onDark": true,
145
- "usage": "Travel advisory or system maintenance color on dark backgrounds",
146
- "wcag": "AAA",
147
59
  "deprecated": true,
148
- "comment": "Deprecated token",
149
- "reference": "n/a",
150
- "version": "3.12.0"
60
+ "version": "4.5.0",
61
+ "reference": "n/a"
151
62
  }
152
63
  },
153
64
  "bkgSuccess": {
154
65
  "default": {
155
66
  "value": "DDF6E8",
156
67
  "public": true,
157
- "onLight": true,
68
+ "default": true,
158
69
  "usage": "Background success color on light backgrounds",
159
70
  "wcag": "AAA",
160
- "deprecated": false
71
+ "deprecated": true,
72
+ "version": "4.5.0",
73
+ "reference": "n/a"
161
74
  }
162
75
  },
163
76
  "bkgError": {
@@ -167,7 +80,9 @@
167
80
  "default": true,
168
81
  "usage": "Background error color on light backgrounds",
169
82
  "wcag": "AAA",
170
- "deprecated": false
83
+ "deprecated": true,
84
+ "version": "4.5.0",
85
+ "reference": "n/a"
171
86
  }
172
87
  }
173
88
  }
package/src/color/background.json CHANGED
@@ -1,46 +1,251 @@
1
1
  {
2
2
  "color": {
3
3
  "background": {
4
+ "primary": {
5
+ "100": {
6
+ "default": {
7
+ "value": "{color.base.white.value}",
8
+ "public": true,
9
+ "default": true,
10
+ "usage": "Used for creating light backgrounds",
11
+ "wcag": "n/a",
12
+ "deprecated": false
13
+ },
14
+ "inverse": {
15
+ "value": "{color.brand.navy.1000.value}",
16
+ "public": true,
17
+ "inverse": true,
18
+ "usage": "Used for creating dark backgrounds",
19
+ "wcag": "n/a",
20
+ "deprecated": false
21
+ }
22
+ },
23
+ "200": {
24
+ "default": {
25
+ "value": "{color.brand.gray.100.value}",
26
+ "public": true,
27
+ "default": true,
28
+ "usage": "Used for creating light backgrounds",
29
+ "wcag": "n/a",
30
+ "deprecated": false
31
+ },
32
+ "inverse": {
33
+ "value": "{color.brand.navy.900.value}",
34
+ "public": true,
35
+ "inverse": true,
36
+ "usage": "Used for creating dark backgrounds",
37
+ "wcag": "n/a",
38
+ "deprecated": false
39
+ }
40
+ },
41
+ "300": {
42
+ "default": {
43
+ "value": "{color.brand.neutral.200.value}",
44
+ "public": true,
45
+ "default": true,
46
+ "usage": "Used for creating light backgrounds",
47
+ "wcag": "n/a",
48
+ "deprecated": false
49
+ },
50
+ "inverse": {
51
+ "value": "{color.brand.navy.800.value}",
52
+ "public": true,
53
+ "inverse": true,
54
+ "usage": "Used for creating dark backgrounds",
55
+ "wcag": "n/a",
56
+ "deprecated": false
57
+ }
58
+ },
59
+ "400": {
60
+ "default": {
61
+ "value": "{color.brand.gray.200.value}",
62
+ "public": true,
63
+ "default": true,
64
+ "usage": "Used for creating light backgrounds",
65
+ "wcag": "n/a",
66
+ "deprecated": false
67
+ },
68
+ "inverse": {
69
+ "value": "{color.brand.navy.700.value}",
70
+ "public": true,
71
+ "inverse": true,
72
+ "usage": "Used for creating dark backgrounds",
73
+ "wcag": "n/a",
74
+ "deprecated": false
75
+ }
76
+ }
77
+ },
78
+ "success": {
79
+ "default": {
80
+ "value": "{color.base.success.100.value}",
81
+ "public": true,
82
+ "default": true,
83
+ "usage": "Used for creating light backgrounds",
84
+ "wcag": "n/a",
85
+ "deprecated": false
86
+ },
87
+ "inverse": {
88
+ "value": "{color.base.success.500.value}",
89
+ "public": true,
90
+ "inverse": true,
91
+ "usage": "Used for creating dark backgrounds",
92
+ "wcag": "n/a",
93
+ "deprecated": false
94
+ }
95
+ },
96
+ "error": {
97
+ "default": {
98
+ "value": "{color.base.error.100.value}",
99
+ "public": true,
100
+ "default": true,
101
+ "usage": "Used for creating light backgrounds",
102
+ "wcag": "n/a",
103
+ "deprecated": false
104
+ },
105
+ "inverse": {
106
+ "value": "{color.base.error.500.value}",
107
+ "public": true,
108
+ "inverse": true,
109
+ "usage": "Used for creating dark backgrounds",
110
+ "wcag": "n/a",
111
+ "deprecated": false
112
+ }
113
+ },
114
+ "warning": {
115
+ "default": {
116
+ "value": "{color.base.warning.100.value}",
117
+ "public": true,
118
+ "default": true,
119
+ "usage": "Used for creating light backgrounds",
120
+ "wcag": "n/a",
121
+ "deprecated": false
122
+ },
123
+ "inverse": {
124
+ "value": "{color.base.warning.500.value}",
125
+ "public": true,
126
+ "inverse": true,
127
+ "usage": "Used for creating dark backgrounds",
128
+ "wcag": "n/a",
129
+ "deprecated": false
130
+ }
131
+ },
132
+ "info": {
133
+ "default": {
134
+ "value": "{color.brand.blue.100.value}",
135
+ "public": true,
136
+ "default": true,
137
+ "usage": "Used for creating light backgrounds",
138
+ "wcag": "n/a",
139
+ "deprecated": false
140
+ },
141
+ "inverse": {
142
+ "value": "{color.brand.blue.900.value}",
143
+ "public": true,
144
+ "inverse": true,
145
+ "usage": "Used for creating dark backgrounds",
146
+ "wcag": "n/a",
147
+ "deprecated": false
148
+ }
149
+ },
150
+ "subtle": {
151
+ "default": {
152
+ "value": "{color.brand.neutral.100.value}",
153
+ "public": true,
154
+ "default": true,
155
+ "usage": "Used for creating light backgrounds",
156
+ "wcag": "n/a",
157
+ "deprecated": false
158
+ },
159
+ "inverse": {
160
+ "value": "{color.brand.gray.1000.value}",
161
+ "public": true,
162
+ "inverse": true,
163
+ "usage": "Used for creating dark backgrounds",
164
+ "wcag": "n/a",
165
+ "deprecated": false
166
+ }
167
+ },
168
+ "accent": {
169
+ "default": {
170
+ "value": "{color.brand.cyan.100.value}",
171
+ "public": true,
172
+ "default": true,
173
+ "usage": "Used for creating light backgrounds",
174
+ "wcag": "n/a",
175
+ "deprecated": false
176
+ },
177
+ "inverse": {
178
+ "value": "{color.base.cyan.800.value}",
179
+ "public": true,
180
+ "inverse": true,
181
+ "usage": "Used for creating dark backgrounds",
182
+ "wcag": "n/a",
183
+ "deprecated": false
184
+ }
185
+ },
186
+ "emphasis": {
187
+ "default": {
188
+ "value": "{color.brand.blue.200.value}",
189
+ "public": true,
190
+ "default": true,
191
+ "usage": "Used for creating light backgrounds",
192
+ "wcag": "n/a",
193
+ "deprecated": false
194
+ },
195
+ "inverse": {
196
+ "value": "{color.brand.blue.800.value}",
197
+ "public": true,
198
+ "inverse": true,
199
+ "usage": "Used for creating dark backgrounds",
200
+ "wcag": "n/a",
201
+ "deprecated": false
202
+ }
203
+ },
4
204
  "lightest": {
5
205
  "value": "{color.base.white.value}",
6
206
  "public": true,
7
- "neutral": true,
8
207
  "usage": "Used for creating light backgrounds",
9
208
  "wcag": "n/a",
10
- "deprecated": false
209
+ "deprecated": true,
210
+ "version": "4.5.0",
211
+ "reference": "n/a"
11
212
  },
12
213
  "lighter": {
13
214
  "value": "{color.base.gray.100.value}",
14
215
  "public": true,
15
- "neutral": true,
16
216
  "usage": "Used for creating light backgrounds @ 90% white",
17
217
  "wcag": "n/a",
18
- "deprecated": false
218
+ "deprecated": true,
219
+ "version": "4.5.0",
220
+ "reference": "n/a"
19
221
  },
20
222
  "darker": {
21
223
  "value": "{color.brand.midnight.400.value}",
22
224
  "public": true,
23
- "neutral": true,
24
225
  "usage": "Used for creating dark backgrounds",
25
226
  "wcag": "n/a",
26
- "deprecated": false
227
+ "deprecated": true,
228
+ "version": "4.5.0",
229
+ "reference": "n/a"
27
230
  },
28
231
  "darkest": {
29
232
  "value": "{color.brand.midnight.500.value}",
30
233
  "public": true,
31
- "neutral": true,
32
234
  "usage": "Used for creating dark backgrounds @ 20% darker",
33
235
  "wcag": "n/a",
34
- "deprecated": false
236
+ "deprecated": true,
237
+ "version": "4.5.0",
238
+ "reference": "n/a"
35
239
  },
36
240
  "gradient": {
37
241
  "default": {
38
242
  "value": "linear-gradient(180deg, {color.base.white-opacity-0}, {color.base.white-opacity-50})",
39
243
  "public": true,
40
- "neutral": true,
41
244
  "usage": "Used for creating a gradient against all backgrounds",
42
245
  "wcag": "n/a",
43
- "deprecated": false
246
+ "deprecated": true,
247
+ "version": "4.5.0",
248
+ "reference": "n/a"
44
249
  }
45
250
  }
46
251
  }