@aurodesignsystem/design-tokens 9.1.0 → 9.3.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 (29) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +84 -5
  3. package/dist/app/alaskaLight.json +25 -67
  4. package/dist/app/atmosLight.json +19 -61
  5. package/dist/app/hawaiianLight.json +32 -74
  6. package/dist/app/test.json +98 -140
  7. package/dist/themes/CSSCustomProperties--bundled.css +30 -10
  8. package/dist/themes/CSSCustomProperties--bundled.min.css +1 -1
  9. package/dist/web/JSONVariablesNested--alaska.json +39 -75
  10. package/dist/web/JSONVariablesNested--atmos.json +30 -66
  11. package/dist/web/JSONVariablesNested--hawaiian.json +50 -86
  12. package/dist/web/JSONVariablesNested--test.json +162 -198
  13. package/dist/web/JSObject--allTokens--alaska.js +378 -858
  14. package/dist/web/JSObject--allTokens--atmos.js +360 -840
  15. package/dist/web/JSObject--allTokens--hawaiian.js +400 -880
  16. package/dist/web/JSObject--allTokens--test.js +624 -1104
  17. package/dist/web/alaska.css +120 -164
  18. package/dist/web/alaska.min.css +1 -1
  19. package/dist/web/alaska.scss +33 -53
  20. package/dist/web/atmos.css +120 -164
  21. package/dist/web/atmos.min.css +1 -1
  22. package/dist/web/atmos.scss +24 -44
  23. package/dist/web/blueprint.css +156 -176
  24. package/dist/web/blueprint.min.css +1 -1
  25. package/dist/web/blueprint.scss +156 -176
  26. package/dist/web/hawaiian.css +120 -164
  27. package/dist/web/hawaiian.min.css +1 -1
  28. package/dist/web/hawaiian.scss +44 -64
  29. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # Semantic Release Automated Changelog
2
2
 
3
+ # [9.3.0](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v9.2.0...v9.3.0) (2026-07-21)
4
+
5
+
6
+ ### Features
7
+
8
+ * update tokens from figma [#461](https://github.com/AlaskaAirlines/AuroDesignTokens/issues/461) ([b9b9036](https://github.com/AlaskaAirlines/AuroDesignTokens/commit/b9b90362726ec1d741c5f00de28a203d4348a9b5))
9
+
10
+ # [9.2.0](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v9.1.0...v9.2.0) (2026-07-21)
11
+
12
+
13
+ ### Features
14
+
15
+ * split CSS theme selectors into color and typography groups AB[#1601893](https://github.com/AlaskaAirlines/AuroDesignTokens/issues/1601893) ([200ce70](https://github.com/AlaskaAirlines/AuroDesignTokens/commit/200ce705041cd00b83e636f0c57cd9862721293b))
16
+
3
17
  # [9.1.0](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v9.0.0...v9.1.0) (2026-07-13)
4
18
 
5
19
 
package/README.md CHANGED
@@ -51,17 +51,96 @@ Auro Design Tokens support multiple themes:
51
51
  | Theme | Description | Usage |
52
52
  |-------|-------------|-------|
53
53
  | Alaska | Current Alaska Airlines theme | Alaska Airlines branded interfaces |
54
- | Alaska Classic | Transition theme with `v6.x` token names but Auro Classic values | For migration scenarios only |
54
+ | Alaska Classic | Transition theme with the latest token names but Auro Classic values | For migration scenarios only |
55
+ | Atmos | Current Atmos theme | Atmos branded interfaces |
55
56
  | Hawaiian | Hawaiian Airlines theme | Hawaiian Airlines branded interfaces |
56
57
  | Auro Classic | Legacy theme (deprecated) | Only for backward compatibility |
57
58
 
58
- ## Theme Scoping
59
+ ## Applying a Theme
59
60
 
60
- ### Alaska Air Group Exclusive
61
+ Apply a theme to any element using the `data-aag-theme` attribute. All child elements will inherit the theme's design tokens.
61
62
 
62
- > ⚠️ The following link is only intended for Alaska Air Group employees and is protected by SSO.
63
+ ```html
64
+ <html data-aag-theme="aag-theme-as">
65
+ <!-- All content uses Alaska theme tokens -->
66
+ </html>
67
+ ```
68
+
69
+ Available theme codes:
70
+
71
+ | Theme | Attribute Value |
72
+ | ----- | --------------- |
73
+ | Alaska | `aag-theme-as` |
74
+ | Alaska Classic | `aag-theme-asc` |
75
+ | Hawaiian | `aag-theme-ha` |
76
+ | Atmos | `aag-theme-atm` |
77
+
78
+ ## Nested Themes
79
+
80
+ You can nest themes by applying a different `data-aag-theme` value to a child element. The child and its descendants will use the nested theme's tokens, while the rest of the page retains the parent theme.
81
+
82
+ ```html
83
+ <html data-aag-theme="aag-theme-as">
84
+ <!-- Alaska theme -->
85
+ <header>...</header>
86
+
87
+ <section data-aag-theme="aag-theme-ha">
88
+ <!-- Hawaiian theme within this section only -->
89
+ <p>This content uses Hawaiian tokens.</p>
90
+ </section>
91
+
92
+ <!-- Back to Alaska theme -->
93
+ <footer>...</footer>
94
+ </html>
95
+ ```
96
+
97
+ ## Partial Theme Overrides (Color or Typography Only)
98
+
99
+ Themes are split into **color** and **typography** token groups. You can apply just one aspect of a theme without affecting the other by appending `-color` or `-type` to the attribute value.
100
+
101
+ ### Color-only override
102
+
103
+ Apply a theme's color tokens while keeping the parent theme's typography:
63
104
 
64
- - [Prepare your pages for multi-brand theming](https://wiki.devtools.teamaag.com/guides/multibrand)
105
+ ```html
106
+ <html data-aag-theme="aag-theme-as">
107
+ <!-- Alaska color + Alaska typography -->
108
+
109
+ <section data-aag-theme="aag-theme-ha-color">
110
+ <!-- Hawaiian colors, but still Alaska typography -->
111
+ <p>Hawaiian color palette with Alaska fonts.</p>
112
+ </section>
113
+ </html>
114
+ ```
115
+
116
+ ### Typography-only override
117
+
118
+ Apply a theme's typography tokens while keeping the parent theme's colors:
119
+
120
+ ```html
121
+ <html data-aag-theme="aag-theme-as">
122
+ <!-- Alaska color + Alaska typography -->
123
+
124
+ <section data-aag-theme="aag-theme-ha-type">
125
+ <!-- Hawaiian typography, but still Alaska colors -->
126
+ <p>Hawaiian fonts with Alaska color palette.</p>
127
+ </section>
128
+ </html>
129
+ ```
130
+
131
+ ### Combining partial overrides
132
+
133
+ You can stack both partial selectors on the same element to mix color from one theme and typography from another:
134
+
135
+ ```html
136
+ <html data-aag-theme="aag-theme-as">
137
+ <section data-aag-theme="aag-theme-ha-color">
138
+ <div data-aag-theme="aag-theme-atm-type">
139
+ <!-- Hawaiian colors + Atmos typography -->
140
+ </div>
141
+ </section>
142
+ </html>
143
+ ```
65
144
 
66
145
  ## Documentation
67
146
 
package/dist/app/alaskaLight.json CHANGED
@@ -7,8 +7,8 @@
7
7
  "divider": "#00000026",
8
8
  "dividerInverse": "#ffffff66",
9
9
  "inverse": "#ffffff",
10
- "standard": "#959595",
11
- "subtle": "#dddddd"
10
+ "standard": "#949595",
11
+ "subtle": "#dbdddd"
12
12
  },
13
13
  "brand": {
14
14
  "primary": "#01426a",
@@ -25,69 +25,27 @@
25
25
  "tertiarySubtle": "#c9e1a7"
26
26
  },
27
27
  "fare": {
28
- "alaska": {
29
- "basicEconomy": {
30
- "bold": "#096173",
31
- "standard": "#97eaf8",
32
- "subtle": "#ebfafd"
33
- },
34
- "economy": {
35
- "bold": "#005fa7",
36
- "standard": "#289bee",
37
- "subtle": "#ebf7ff"
38
- },
39
- "economyExtraLegroom": {
40
- "bold": "#265688",
41
- "standard": "#265688",
42
- "subtle": "#ebf3f9"
43
- },
44
- "firstBusiness": {
45
- "bold": "#005154",
46
- "gradientBack": "#00274a",
47
- "gradientFront": "#005154",
48
- "standard": "#005154",
49
- "subtle": "#e9f1f1"
50
- },
51
- "premiumEconomy": {
52
- "bold": "#00274a",
53
- "standard": "#00274a",
54
- "subtle": "#ecf0f3"
55
- }
56
- },
57
28
  "basicEconomy": "#97eaf8",
58
29
  "business": "#005154",
59
30
  "economy": "#0074ca",
31
+ "economyExtraLegroom": {
32
+ "bold": "#265688",
33
+ "standard": "#265688",
34
+ "subtle": "#ebf3f9"
35
+ },
60
36
  "first": "#005154",
61
- "hawaiian": {
62
- "basicEconomy": {
63
- "bold": "#515252",
64
- "standard": "#ced0d0",
65
- "subtle": "#f5f7f7"
66
- },
67
- "economy": {
68
- "bold": "#1b6976",
69
- "standard": "#00a5ba",
70
- "subtle": "#ecf6f8"
71
- },
72
- "economyExtraLegroom": {
73
- "bold": "#a91770",
74
- "standard": "#ce0c88",
75
- "subtle": "#fdf1f8"
76
- },
77
- "firstBusiness": {
78
- "bold": "#463c8f",
79
- "gradientBack": "#ce0c88",
80
- "gradientFront": "#463c8f",
81
- "standard": "#463c8f",
82
- "subtle": "#edeaf4"
83
- },
84
- "premiumEconomy": {
85
- "bold": "#831a57",
86
- "standard": "#831a57",
87
- "subtle": "#fdf1f8"
88
- }
37
+ "firstBusiness": {
38
+ "bold": "#005154",
39
+ "gradientBack": "#00274a",
40
+ "gradientFront": "#005154",
41
+ "standard": "#005154",
42
+ "subtle": "#e9f1f1"
43
+ },
44
+ "premiumEconomy": {
45
+ "bold": "#00274a",
46
+ "standard": "#00274a",
47
+ "subtle": "#ecf0f3"
89
48
  },
90
- "premiumEconomy": "#265688",
91
49
  "suitesBack": "#00274a",
92
50
  "suitesFront": "#005154"
93
51
  },
@@ -114,14 +72,14 @@
114
72
  "accent2Muted": "#eaf3dd",
115
73
  "inverse": "#00274a",
116
74
  "inverseSubtle": "#2875b5",
117
- "neutral": "#f2f2f2",
118
- "neutralMedium": "#c5c5c5",
119
- "neutralSubtle": "#f7f7f7",
75
+ "neutral": "#f1f3f3",
76
+ "neutralMedium": "#c3c5c5",
77
+ "neutralSubtle": "#f5f7f7",
120
78
  "standard": "#ffffff"
121
79
  },
122
80
  "textIcon": {
123
81
  "accent1": "#01426a",
124
- "disabled": "#d0d0d0",
82
+ "disabled": "#ced0d0",
125
83
  "inverse": "#ffffff",
126
84
  "inverseDisabled": "#7e8894",
127
85
  "inverseMuted": "#ccd2db",
@@ -129,7 +87,7 @@
129
87
  "linkHover": "#01426a",
130
88
  "linkInverseDefault": "#ffffff",
131
89
  "linkInverseHover": "#ebf3f9",
132
- "muted": "#676767",
90
+ "muted": "#666767",
133
91
  "standard": "#2a2a2a"
134
92
  },
135
93
  "tierProgram": {
@@ -372,7 +330,7 @@
372
330
  "buttons": {
373
331
  "disabled": {
374
332
  "background": "#0000000d",
375
- "text": "#d0d0d0"
333
+ "text": "#ced0d0"
376
334
  },
377
335
  "disabledInverse": {
378
336
  "background": "#ffffff0d",
@@ -409,7 +367,7 @@
409
367
  "tertiary": {
410
368
  "background": "#00000014",
411
369
  "backgroundPressed": "#0000001f",
412
- "border": "#dddddd",
370
+ "border": "#dbdddd",
413
371
  "text": "#01426a"
414
372
  },
415
373
  "tertiaryInverse": {
package/dist/app/atmosLight.json CHANGED
@@ -25,69 +25,27 @@
25
25
  "tertiarySubtle": "#e9e6d9"
26
26
  },
27
27
  "fare": {
28
- "alaska": {
29
- "basicEconomy": {
30
- "bold": "#096173",
31
- "standard": "#97eaf8",
32
- "subtle": "#ebfafd"
33
- },
34
- "economy": {
35
- "bold": "#005fa7",
36
- "standard": "#289bee",
37
- "subtle": "#ebf7ff"
38
- },
39
- "economyExtraLegroom": {
40
- "bold": "#265688",
41
- "standard": "#265688",
42
- "subtle": "#ebf3f9"
43
- },
44
- "firstBusiness": {
45
- "bold": "#005154",
46
- "gradientBack": "#00274a",
47
- "gradientFront": "#005154",
48
- "standard": "#005154",
49
- "subtle": "#e9f1f1"
50
- },
51
- "premiumEconomy": {
52
- "bold": "#00274a",
53
- "standard": "#00274a",
54
- "subtle": "#ecf0f3"
55
- }
56
- },
57
28
  "basicEconomy": "#97eaf8",
58
29
  "business": "#002c4e",
59
30
  "economy": "#0074ca",
31
+ "economyExtraLegroom": {
32
+ "bold": "#265688",
33
+ "standard": "#265688",
34
+ "subtle": "#ebf3f9"
35
+ },
60
36
  "first": "#101d2c",
61
- "hawaiian": {
62
- "basicEconomy": {
63
- "bold": "#515252",
64
- "standard": "#ced0d0",
65
- "subtle": "#f5f7f7"
66
- },
67
- "economy": {
68
- "bold": "#1b6976",
69
- "standard": "#00a5ba",
70
- "subtle": "#ecf6f8"
71
- },
72
- "economyExtraLegroom": {
73
- "bold": "#a91770",
74
- "standard": "#ce0c88",
75
- "subtle": "#fdf1f8"
76
- },
77
- "firstBusiness": {
78
- "bold": "#463c8f",
79
- "gradientBack": "#ce0c88",
80
- "gradientFront": "#463c8f",
81
- "standard": "#463c8f",
82
- "subtle": "#edeaf4"
83
- },
84
- "premiumEconomy": {
85
- "bold": "#831a57",
86
- "standard": "#831a57",
87
- "subtle": "#fdf1f8"
88
- }
37
+ "firstBusiness": {
38
+ "bold": "#005154",
39
+ "gradientBack": "#00274a",
40
+ "gradientFront": "#005154",
41
+ "standard": "#005154",
42
+ "subtle": "#e9f1f1"
43
+ },
44
+ "premiumEconomy": {
45
+ "bold": "#00274a",
46
+ "standard": "#00274a",
47
+ "subtle": "#ecf0f3"
89
48
  },
90
- "premiumEconomy": "#265688",
91
49
  "suitesBack": "#101d2c",
92
50
  "suitesFront": "#101d2c"
93
51
  },
@@ -121,10 +79,10 @@
121
79
  },
122
80
  "textIcon": {
123
81
  "accent1": "#101d2c",
124
- "disabled": "#dddddd",
82
+ "disabled": "#dbdddd",
125
83
  "inverse": "#faf9f5",
126
84
  "inverseDisabled": "#7e8894",
127
- "inverseMuted": "#c5c5c5",
85
+ "inverseMuted": "#c3c5c5",
128
86
  "linkDefault": "#101d2c",
129
87
  "linkHover": "#005fa7",
130
88
  "linkInverseDefault": "#faf9f5",
@@ -372,7 +330,7 @@
372
330
  "buttons": {
373
331
  "disabled": {
374
332
  "background": "#0000000d",
375
- "text": "#dddddd"
333
+ "text": "#dbdddd"
376
334
  },
377
335
  "disabledInverse": {
378
336
  "background": "#ffffff0d",
package/dist/app/hawaiianLight.json CHANGED
@@ -2,18 +2,18 @@
2
2
  "basicTokens": {
3
3
  "color": {
4
4
  "border": {
5
- "bold": "#adadad",
5
+ "bold": "#abadad",
6
6
  "brand": "#463c8f",
7
7
  "divider": "#00000026",
8
8
  "dividerInverse": "#ffffff66",
9
9
  "inverse": "#ffffff",
10
- "standard": "#d0d0d0",
11
- "subtle": "#dddddd"
10
+ "standard": "#ced0d0",
11
+ "subtle": "#dbdddd"
12
12
  },
13
13
  "brand": {
14
14
  "primary": "#463c8f",
15
15
  "primaryBold": "#31295c",
16
- "primaryMuted": "#edeaf4",
16
+ "primaryMuted": "#eae5f4",
17
17
  "primarySubtle": "#8c7eb8",
18
18
  "secondary": "#ce0c88",
19
19
  "secondaryBold": "#831a57",
@@ -25,69 +25,27 @@
25
25
  "tertiarySubtle": "#ff9080"
26
26
  },
27
27
  "fare": {
28
- "alaska": {
29
- "basicEconomy": {
30
- "bold": "#096173",
31
- "standard": "#97eaf8",
32
- "subtle": "#ebfafd"
33
- },
34
- "economy": {
35
- "bold": "#005fa7",
36
- "standard": "#289bee",
37
- "subtle": "#ebf7ff"
38
- },
39
- "economyExtraLegroom": {
40
- "bold": "#265688",
41
- "standard": "#265688",
42
- "subtle": "#ebf3f9"
43
- },
44
- "firstBusiness": {
45
- "bold": "#005154",
46
- "gradientBack": "#00274a",
47
- "gradientFront": "#005154",
48
- "standard": "#005154",
49
- "subtle": "#e9f1f1"
50
- },
51
- "premiumEconomy": {
52
- "bold": "#00274a",
53
- "standard": "#00274a",
54
- "subtle": "#ecf0f3"
55
- }
56
- },
57
- "basicEconomy": "#d0d0d0",
28
+ "basicEconomy": "#ced0d0",
58
29
  "business": "#463c8f",
59
30
  "economy": "#00a5ba",
31
+ "economyExtraLegroom": {
32
+ "bold": "#a91770",
33
+ "standard": "#ce0c88",
34
+ "subtle": "#fdf1f8"
35
+ },
60
36
  "first": "#463c8f",
61
- "hawaiian": {
62
- "basicEconomy": {
63
- "bold": "#515252",
64
- "standard": "#ced0d0",
65
- "subtle": "#f5f7f7"
66
- },
67
- "economy": {
68
- "bold": "#1b6976",
69
- "standard": "#00a5ba",
70
- "subtle": "#ecf6f8"
71
- },
72
- "economyExtraLegroom": {
73
- "bold": "#a91770",
74
- "standard": "#ce0c88",
75
- "subtle": "#fdf1f8"
76
- },
77
- "firstBusiness": {
78
- "bold": "#463c8f",
79
- "gradientBack": "#ce0c88",
80
- "gradientFront": "#463c8f",
81
- "standard": "#463c8f",
82
- "subtle": "#edeaf4"
83
- },
84
- "premiumEconomy": {
85
- "bold": "#831a57",
86
- "standard": "#831a57",
87
- "subtle": "#fdf1f8"
88
- }
37
+ "firstBusiness": {
38
+ "bold": "#463c8f",
39
+ "gradientBack": "#ce0c88",
40
+ "gradientFront": "#463c8f",
41
+ "standard": "#463c8f",
42
+ "subtle": "#eae5f4"
43
+ },
44
+ "premiumEconomy": {
45
+ "bold": "#831a57",
46
+ "standard": "#831a57",
47
+ "subtle": "#fdf1f8"
89
48
  },
90
- "premiumEconomy": "#ce0c88",
91
49
  "suitesBack": "#ce0c88",
92
50
  "suitesFront": "#463c8f"
93
51
  },
@@ -108,20 +66,20 @@
108
66
  },
109
67
  "surface": {
110
68
  "accent1": "#aca1cc",
111
- "accent1Muted": "#edeaf4",
69
+ "accent1Muted": "#eae5f4",
112
70
  "accent1Subtle": "#aca1cc",
113
- "accent2": "#f7f7f7",
114
- "accent2Muted": "#f7f7f7",
71
+ "accent2": "#f5f7f7",
72
+ "accent2Muted": "#f5f7f7",
115
73
  "inverse": "#463c8f",
116
74
  "inverseSubtle": "#8c7eb8",
117
- "neutral": "#f2f2f2",
118
- "neutralMedium": "#dddddd",
119
- "neutralSubtle": "#f7f7f7",
75
+ "neutral": "#f1f3f3",
76
+ "neutralMedium": "#dbdddd",
77
+ "neutralSubtle": "#f5f7f7",
120
78
  "standard": "#ffffff"
121
79
  },
122
80
  "textIcon": {
123
81
  "accent1": "#000000",
124
- "disabled": "#d0d0d0",
82
+ "disabled": "#ced0d0",
125
83
  "inverse": "#ffffff",
126
84
  "inverseDisabled": "#7e8894",
127
85
  "inverseMuted": "#ccd2db",
@@ -129,7 +87,7 @@
129
87
  "linkHover": "#831a57",
130
88
  "linkInverseDefault": "#ffffff",
131
89
  "linkInverseHover": "#ffffff",
132
- "muted": "#3d3d3d",
90
+ "muted": "#3c3d3d",
133
91
  "standard": "#000000"
134
92
  },
135
93
  "tierProgram": {
@@ -372,7 +330,7 @@
372
330
  "buttons": {
373
331
  "disabled": {
374
332
  "background": "#0000000d",
375
- "text": "#d0d0d0"
333
+ "text": "#ced0d0"
376
334
  },
377
335
  "disabledInverse": {
378
336
  "background": "#ffffff0d",
@@ -409,7 +367,7 @@
409
367
  "tertiary": {
410
368
  "background": "#00000014",
411
369
  "backgroundPressed": "#0000001f",
412
- "border": "#dddddd",
370
+ "border": "#dbdddd",
413
371
  "text": "#ce0c88"
414
372
  },
415
373
  "tertiaryInverse": {
@@ -423,7 +381,7 @@
423
381
  "elevated": "#00000014",
424
382
  "pressed": "#0000001f",
425
383
  "selected": "#463c8f",
426
- "selectedMuted": "#edeaf4"
384
+ "selectedMuted": "#eae5f4"
427
385
  },
428
386
  "componentInverse": {
429
387
  "elevated": "#ffffff14",