@aurodesignsystem/design-tokens 4.3.0 → 4.4.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 (26) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/README.md +62 -52
  3. package/dist/tokens/CSSCustomProperties.css +2 -1
  4. package/dist/tokens/CSSSizeCustomProperties.css +2 -1
  5. package/dist/tokens/JSData--color.js +125 -125
  6. package/dist/tokens/JSONVariablesFlat.json +274 -0
  7. package/dist/tokens/JSONVariablesNested.json +522 -0
  8. package/dist/tokens/JSObject--allTokens.js +297 -274
  9. package/dist/tokens/JSObject--deprecated.js +78 -78
  10. package/dist/tokens/JSVariables--color.js +1 -1
  11. package/dist/tokens/SCSSVariableMap.scss +3 -1
  12. package/dist/tokens/SCSSVariables.scss +2 -1
  13. package/dist/tokens/SCSSVariablesMapFlat.scss +3 -1
  14. package/dist/tokens/SassCustomProperties.scss +2 -1
  15. package/dist/tokens/SassSizeCustomProperties.scss +2 -1
  16. package/dist/tokens/darkmode/CSSCustomProperties.css +1 -1
  17. package/dist/tokens/darkmode/JSDataColor.js +14 -14
  18. package/dist/tokens/darkmode/JSObject--allDarkTokens.js +14 -14
  19. package/dist/tokens/darkmode/JSVariablesColor.js +1 -1
  20. package/dist/tokens/darkmode/SCSSVariables.scss +1 -1
  21. package/dist/tokens/darkmode/SCSSVariablesMapFlat.scss +1 -1
  22. package/dist/tokens/darkmode/SassCustomProperties.scss +1 -1
  23. package/package.json +9 -8
  24. package/packageScripts/postinstall.mjs +1 -1
  25. package/src/size/radius.json +1 -1
  26. package/src/size/scale.json +6 -0
package/dist/tokens/JSVariables--color.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 29 Dec 2023 19:04:04 GMT
3
+ * Generated on Thu, 09 May 2024 18:13:44 GMT
4
4
  */
5
5
 
6
6
  export const DsColorAlertNotificationDefault = "#0074c8";
package/dist/tokens/SCSSVariableMap.scss CHANGED
@@ -1,11 +1,12 @@
1
1
 
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Fri, 29 Dec 2023 19:04:04 GMT
4
+ * Generated on Thu, 09 May 2024 18:13:44 GMT
5
5
  */
6
6
 
7
7
  $ds-size-25: 0.125rem !default; // 2px
8
8
  $ds-size-50: 0.25rem !default; // 4px
9
+ $ds-size-75: 0.375rem !default; // 6px
9
10
  $ds-size-100: 0.5rem !default; // 8px
10
11
  $ds-size-150: 0.75rem !default; // 12px
11
12
  $ds-size-200: 1rem !default; // 16px
@@ -22,6 +23,7 @@ $tokens: (
22
23
  'size': (
23
24
  '25': $ds-size-25,
24
25
  '50': $ds-size-50,
26
+ '75': $ds-size-75,
25
27
  '100': $ds-size-100,
26
28
  '150': $ds-size-150,
27
29
  '200': $ds-size-200,
package/dist/tokens/SCSSVariables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 29 Dec 2023 19:04:04 GMT
3
+ // Generated on Thu, 09 May 2024 18:13:44 GMT
4
4
 
5
5
  $ds-asset-font-circular-family-name: "AS Circular";
6
6
  $ds-asset-font-circular-filename: "ASCircularWeb";
@@ -10,6 +10,7 @@ $ds-asset-font-circular-weight-book: "-Book";
10
10
  $ds-border-radius: 0.375rem;
11
11
  $ds-size-25: 0.125rem; // 2px
12
12
  $ds-size-50: 0.25rem; // 4px
13
+ $ds-size-75: 0.375rem; // 6px
13
14
  $ds-size-100: 0.5rem; // 8px
14
15
  $ds-size-150: 0.75rem; // 12px
15
16
  $ds-size-200: 1rem; // 16px
package/dist/tokens/SCSSVariablesMapFlat.scss CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  /*
3
3
  Do not edit directly
4
- Generated on Fri, 29 Dec 2023 19:04:04 GMT
4
+ Generated on Thu, 09 May 2024 18:13:44 GMT
5
5
  */
6
6
 
7
7
  $auroTokens: (
@@ -15,6 +15,8 @@ $auroTokens: (
15
15
  'ds-size-25': (0.125rem),
16
16
  // 4px
17
17
  'ds-size-50': (0.25rem),
18
+ // 6px
19
+ 'ds-size-75': (0.375rem),
18
20
  // 8px
19
21
  'ds-size-100': (0.5rem),
20
22
  // 12px
package/dist/tokens/SassCustomProperties.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 29 Dec 2023 19:04:04 GMT
3
+ * Generated on Thu, 09 May 2024 18:13:44 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -12,6 +12,7 @@
12
12
  --ds-border-radius: 0.375rem;
13
13
  --ds-size-25: 0.125rem; /* 2px */
14
14
  --ds-size-50: 0.25rem; /* 4px */
15
+ --ds-size-75: 0.375rem; /* 6px */
15
16
  --ds-size-100: 0.5rem; /* 8px */
16
17
  --ds-size-150: 0.75rem; /* 12px */
17
18
  --ds-size-200: 1rem; /* 16px */
package/dist/tokens/SassSizeCustomProperties.scss CHANGED
@@ -1,11 +1,12 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 29 Dec 2023 19:04:04 GMT
3
+ * Generated on Thu, 09 May 2024 18:13:44 GMT
4
4
  */
5
5
 
6
6
  :root {
7
7
  --ds-size-25: 0.125rem; /* 2px */
8
8
  --ds-size-50: 0.25rem; /* 4px */
9
+ --ds-size-75: 0.375rem; /* 6px */
9
10
  --ds-size-100: 0.5rem; /* 8px */
10
11
  --ds-size-150: 0.75rem; /* 12px */
11
12
  --ds-size-200: 1rem; /* 16px */
package/dist/tokens/darkmode/CSSCustomProperties.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 29 Dec 2023 19:04:04 GMT
3
+ * Generated on Thu, 09 May 2024 18:13:45 GMT
4
4
  */
5
5
 
6
6
  :root {
package/dist/tokens/darkmode/JSDataColor.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 29 Dec 2023 19:04:04 GMT
3
+ * Generated on Thu, 09 May 2024 18:13:45 GMT
4
4
  */
5
5
 
6
6
  module.exports = {
@@ -11,7 +11,7 @@ module.exports = {
11
11
  "comment": "\n // Base value for token support; should not use in code!",
12
12
  "public": true,
13
13
  "deprecated": false,
14
- "filePath": "./src/color-darkmode/base.json",
14
+ "filePath": "src/color-darkmode/base.json",
15
15
  "isSource": true,
16
16
  "darkmode": true,
17
17
  "original": {
@@ -38,7 +38,7 @@ module.exports = {
38
38
  "comment": "\n // Base value for token support; should not use in code!",
39
39
  "public": true,
40
40
  "deprecated": false,
41
- "filePath": "./src/color-darkmode/base.json",
41
+ "filePath": "src/color-darkmode/base.json",
42
42
  "isSource": true,
43
43
  "darkmode": true,
44
44
  "original": {
@@ -71,7 +71,7 @@ module.exports = {
71
71
  "usage": "Primary border color on dark background",
72
72
  "wcag": "n/a",
73
73
  "deprecated": false,
74
- "filePath": "./src/color-darkmode/border.json",
74
+ "filePath": "src/color-darkmode/border.json",
75
75
  "isSource": true,
76
76
  "original": {
77
77
  "value": "{color.brand.neutral.400.value}",
@@ -106,7 +106,7 @@ module.exports = {
106
106
  "usage": "Strict use as divider between elements on dark backgrounds",
107
107
  "wcag": "n/a",
108
108
  "deprecated": false,
109
- "filePath": "./src/color-darkmode/border.json",
109
+ "filePath": "src/color-darkmode/border.json",
110
110
  "isSource": true,
111
111
  "original": {
112
112
  "value": "{color.base.white.value}",
@@ -143,7 +143,7 @@ module.exports = {
143
143
  "usage": "Primary color for icons on dark backgrounds",
144
144
  "wcag": "AAA",
145
145
  "deprecated": false,
146
- "filePath": "./src/color-darkmode/icon.json",
146
+ "filePath": "src/color-darkmode/icon.json",
147
147
  "isSource": true,
148
148
  "original": {
149
149
  "value": "{color.base.neutral.400.value}",
@@ -178,7 +178,7 @@ module.exports = {
178
178
  "usage": "Emphasis or lightest icon color on dark backgrounds",
179
179
  "wcag": "AAA",
180
180
  "deprecated": false,
181
- "filePath": "./src/color-darkmode/icon.json",
181
+ "filePath": "src/color-darkmode/icon.json",
182
182
  "isSource": true,
183
183
  "original": {
184
184
  "value": "{color.base.white.value}",
@@ -215,7 +215,7 @@ module.exports = {
215
215
  "usage": "Primary color for body and header text on dark backgrounds",
216
216
  "wcag": "AAA",
217
217
  "deprecated": false,
218
- "filePath": "./src/color-darkmode/text.json",
218
+ "filePath": "src/color-darkmode/text.json",
219
219
  "isSource": true,
220
220
  "original": {
221
221
  "value": "{color.base.white.value}",
@@ -250,7 +250,7 @@ module.exports = {
250
250
  "usage": "Secondary color for body text on dark backgrounds",
251
251
  "wcag": "AAA",
252
252
  "deprecated": false,
253
- "filePath": "./src/color-darkmode/text.json",
253
+ "filePath": "src/color-darkmode/text.json",
254
254
  "isSource": true,
255
255
  "original": {
256
256
  "value": "{color.base.neutral.400.value}",
@@ -285,7 +285,7 @@ module.exports = {
285
285
  "usage": "Link text color on light backgrounds",
286
286
  "wcag": "AA",
287
287
  "deprecated": false,
288
- "filePath": "./src/color-darkmode/text.json",
288
+ "filePath": "src/color-darkmode/text.json",
289
289
  "isSource": true,
290
290
  "original": {
291
291
  "value": "{color.brand.breeze.300.value}",
@@ -320,7 +320,7 @@ module.exports = {
320
320
  "usage": "Error text color on dark backgrounds",
321
321
  "wcag": "AA",
322
322
  "deprecated": false,
323
- "filePath": "./src/color-darkmode/text.json",
323
+ "filePath": "src/color-darkmode/text.json",
324
324
  "isSource": true,
325
325
  "original": {
326
326
  "value": "{color.state.error.100.value}",
@@ -355,7 +355,7 @@ module.exports = {
355
355
  "usage": "Emphasized text color on dark backgrounds",
356
356
  "wcag": "n/a",
357
357
  "deprecated": false,
358
- "filePath": "./src/color-darkmode/text.json",
358
+ "filePath": "src/color-darkmode/text.json",
359
359
  "isSource": true,
360
360
  "original": {
361
361
  "value": "{color.brand.midnight.100.value}",
@@ -393,7 +393,7 @@ module.exports = {
393
393
  "usage": "MVP tier color for Alaska Airlines",
394
394
  "wcag": "n/a",
395
395
  "deprecated": false,
396
- "filePath": "./src/color-darkmode/tier.json",
396
+ "filePath": "src/color-darkmode/tier.json",
397
397
  "isSource": true,
398
398
  "original": {
399
399
  "value": "{color.brand.goldgray.100.value}",
@@ -430,7 +430,7 @@ module.exports = {
430
430
  "usage": "MVP Gold tier color for Alaska Airlines",
431
431
  "wcag": "n/a",
432
432
  "deprecated": false,
433
- "filePath": "./src/color-darkmode/tier.json",
433
+ "filePath": "src/color-darkmode/tier.json",
434
434
  "isSource": true,
435
435
  "original": {
436
436
  "value": "{color.brand.gold.100.value}",
package/dist/tokens/darkmode/JSObject--allDarkTokens.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 29 Dec 2023 19:04:04 GMT
3
+ * Generated on Thu, 09 May 2024 18:13:45 GMT
4
4
  */
5
5
 
6
6
  module.exports = {
@@ -11,7 +11,7 @@ module.exports = {
11
11
  "comment": "\n // Base value for token support; should not use in code!",
12
12
  "public": true,
13
13
  "deprecated": false,
14
- "filePath": "./src/color-darkmode/base.json",
14
+ "filePath": "src/color-darkmode/base.json",
15
15
  "isSource": true,
16
16
  "darkmode": true,
17
17
  "original": {
@@ -38,7 +38,7 @@ module.exports = {
38
38
  "comment": "\n // Base value for token support; should not use in code!",
39
39
  "public": true,
40
40
  "deprecated": false,
41
- "filePath": "./src/color-darkmode/base.json",
41
+ "filePath": "src/color-darkmode/base.json",
42
42
  "isSource": true,
43
43
  "darkmode": true,
44
44
  "original": {
@@ -71,7 +71,7 @@ module.exports = {
71
71
  "usage": "Primary border color on dark background",
72
72
  "wcag": "n/a",
73
73
  "deprecated": false,
74
- "filePath": "./src/color-darkmode/border.json",
74
+ "filePath": "src/color-darkmode/border.json",
75
75
  "isSource": true,
76
76
  "original": {
77
77
  "value": "{color.brand.neutral.400.value}",
@@ -106,7 +106,7 @@ module.exports = {
106
106
  "usage": "Strict use as divider between elements on dark backgrounds",
107
107
  "wcag": "n/a",
108
108
  "deprecated": false,
109
- "filePath": "./src/color-darkmode/border.json",
109
+ "filePath": "src/color-darkmode/border.json",
110
110
  "isSource": true,
111
111
  "original": {
112
112
  "value": "{color.base.white.value}",
@@ -143,7 +143,7 @@ module.exports = {
143
143
  "usage": "Primary color for icons on dark backgrounds",
144
144
  "wcag": "AAA",
145
145
  "deprecated": false,
146
- "filePath": "./src/color-darkmode/icon.json",
146
+ "filePath": "src/color-darkmode/icon.json",
147
147
  "isSource": true,
148
148
  "original": {
149
149
  "value": "{color.base.neutral.400.value}",
@@ -178,7 +178,7 @@ module.exports = {
178
178
  "usage": "Emphasis or lightest icon color on dark backgrounds",
179
179
  "wcag": "AAA",
180
180
  "deprecated": false,
181
- "filePath": "./src/color-darkmode/icon.json",
181
+ "filePath": "src/color-darkmode/icon.json",
182
182
  "isSource": true,
183
183
  "original": {
184
184
  "value": "{color.base.white.value}",
@@ -215,7 +215,7 @@ module.exports = {
215
215
  "usage": "Primary color for body and header text on dark backgrounds",
216
216
  "wcag": "AAA",
217
217
  "deprecated": false,
218
- "filePath": "./src/color-darkmode/text.json",
218
+ "filePath": "src/color-darkmode/text.json",
219
219
  "isSource": true,
220
220
  "original": {
221
221
  "value": "{color.base.white.value}",
@@ -250,7 +250,7 @@ module.exports = {
250
250
  "usage": "Secondary color for body text on dark backgrounds",
251
251
  "wcag": "AAA",
252
252
  "deprecated": false,
253
- "filePath": "./src/color-darkmode/text.json",
253
+ "filePath": "src/color-darkmode/text.json",
254
254
  "isSource": true,
255
255
  "original": {
256
256
  "value": "{color.base.neutral.400.value}",
@@ -285,7 +285,7 @@ module.exports = {
285
285
  "usage": "Link text color on light backgrounds",
286
286
  "wcag": "AA",
287
287
  "deprecated": false,
288
- "filePath": "./src/color-darkmode/text.json",
288
+ "filePath": "src/color-darkmode/text.json",
289
289
  "isSource": true,
290
290
  "original": {
291
291
  "value": "{color.brand.breeze.300.value}",
@@ -320,7 +320,7 @@ module.exports = {
320
320
  "usage": "Error text color on dark backgrounds",
321
321
  "wcag": "AA",
322
322
  "deprecated": false,
323
- "filePath": "./src/color-darkmode/text.json",
323
+ "filePath": "src/color-darkmode/text.json",
324
324
  "isSource": true,
325
325
  "original": {
326
326
  "value": "{color.state.error.100.value}",
@@ -355,7 +355,7 @@ module.exports = {
355
355
  "usage": "Emphasized text color on dark backgrounds",
356
356
  "wcag": "n/a",
357
357
  "deprecated": false,
358
- "filePath": "./src/color-darkmode/text.json",
358
+ "filePath": "src/color-darkmode/text.json",
359
359
  "isSource": true,
360
360
  "original": {
361
361
  "value": "{color.brand.midnight.100.value}",
@@ -393,7 +393,7 @@ module.exports = {
393
393
  "usage": "MVP tier color for Alaska Airlines",
394
394
  "wcag": "n/a",
395
395
  "deprecated": false,
396
- "filePath": "./src/color-darkmode/tier.json",
396
+ "filePath": "src/color-darkmode/tier.json",
397
397
  "isSource": true,
398
398
  "original": {
399
399
  "value": "{color.brand.goldgray.100.value}",
@@ -430,7 +430,7 @@ module.exports = {
430
430
  "usage": "MVP Gold tier color for Alaska Airlines",
431
431
  "wcag": "n/a",
432
432
  "deprecated": false,
433
- "filePath": "./src/color-darkmode/tier.json",
433
+ "filePath": "src/color-darkmode/tier.json",
434
434
  "isSource": true,
435
435
  "original": {
436
436
  "value": "{color.brand.gold.100.value}",
package/dist/tokens/darkmode/JSVariablesColor.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 29 Dec 2023 19:04:04 GMT
3
+ * Generated on Thu, 09 May 2024 18:13:45 GMT
4
4
  */
5
5
 
6
6
  export const DsColorBaseWhite = "#000000"; //
package/dist/tokens/darkmode/SCSSVariables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 29 Dec 2023 19:04:04 GMT
3
+ // Generated on Thu, 09 May 2024 18:13:45 GMT
4
4
 
5
5
  //
6
6
  // // Base value for token support; should not use in code!
package/dist/tokens/darkmode/SCSSVariablesMapFlat.scss CHANGED
@@ -1,7 +1,7 @@
1
1
 
2
2
  /*
3
3
  Do not edit directly
4
- Generated on Fri, 29 Dec 2023 19:04:04 GMT
4
+ Generated on Thu, 09 May 2024 18:13:45 GMT
5
5
  */
6
6
 
7
7
  $auroTokens: (
package/dist/tokens/darkmode/SassCustomProperties.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 29 Dec 2023 19:04:04 GMT
3
+ * Generated on Thu, 09 May 2024 18:13:45 GMT
4
4
  */
5
5
 
6
6
  :root {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aurodesignsystem/design-tokens",
3
- "version": "4.3.0",
3
+ "version": "4.4.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",
@@ -17,20 +17,21 @@
17
17
  "chalk": "^5.3.0"
18
18
  },
19
19
  "devDependencies": {
20
- "@commitlint/cli": "^17.6.7",
21
- "@commitlint/config-conventional": "^17.6.7",
20
+ "@commitlint/cli": "^19.3.0",
21
+ "@commitlint/config-conventional": "^19.2.2",
22
22
  "@semantic-release/changelog": "^6.0.3",
23
23
  "@semantic-release/git": "^10.0.1",
24
- "@semantic-release/npm": "^10.0.4",
25
- "husky": "^8.0.0",
24
+ "@semantic-release/npm": "^12.0.0",
25
+ "husky": "^9.0.11",
26
26
  "npm-run-all": "^4.1.5",
27
- "semantic-release": "^21.0.7",
28
- "style-dictionary": "^3.9.0"
27
+ "semantic-release": "^23.0.8",
28
+ "style-dictionary": "^3.9.2"
29
29
  },
30
30
  "scripts": {
31
31
  "postinstall": "node packageScripts/postinstall.mjs",
32
- "build:tokens": "node scripts/styleDictionary.js",
32
+ "build": "npm run build:tokens",
33
33
  "build:ci": "npm-run-all sweep test build:tokens postinstall",
34
+ "build:tokens": "node scripts/styleDictionary.js",
34
35
  "test": "node scripts/jsonTest.js",
35
36
  "sweep": "rm -rf dist/",
36
37
  "prepare": "husky install"
package/packageScripts/postinstall.mjs CHANGED
@@ -27,7 +27,7 @@ chalk.hex('#f26135')(`
27
27
  have been DELETED!
28
28
 
29
29
  Be sure to update WCSS
30
- npm i @alaskaairux/webcorestylesheets@latest
30
+ npm i @aurodesignsystem/webcorestylesheets@latest
31
31
 
32
32
  ╰─────────────────────────────── ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─╯
33
33
  `)
package/src/size/radius.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "border": {
3
3
  "radius": {
4
- "value": "0.375rem",
4
+ "value": "{size.75.value}",
5
5
  "public": true,
6
6
  "deprecated": false
7
7
  }
package/src/size/scale.json CHANGED
@@ -166,6 +166,12 @@
166
166
  "public": true,
167
167
  "deprecated": false
168
168
  },
169
+ "75": {
170
+ "value": 0.375,
171
+ "comment": "6px",
172
+ "public": true,
173
+ "deprecated": false
174
+ },
169
175
  "100": {
170
176
  "value": 0.5,
171
177
  "comment": "8px",