@aurodesignsystem/design-tokens 9.0.0 → 9.2.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 +61 -3
  4. package/dist/app/atmosLight.json +59 -1
  5. package/dist/app/hawaiianLight.json +60 -2
  6. package/dist/app/test.json +58 -0
  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 +61 -3
  10. package/dist/web/JSONVariablesNested--atmos.json +59 -1
  11. package/dist/web/JSONVariablesNested--hawaiian.json +60 -2
  12. package/dist/web/JSONVariablesNested--test.json +58 -0
  13. package/dist/web/JSObject--allTokens--alaska.js +846 -6
  14. package/dist/web/JSObject--allTokens--atmos.js +842 -2
  15. package/dist/web/JSObject--allTokens--hawaiian.js +844 -4
  16. package/dist/web/JSObject--allTokens--test.js +840 -0
  17. package/dist/web/alaska.css +127 -9
  18. package/dist/web/alaska.min.css +1 -1
  19. package/dist/web/alaska.scss +37 -3
  20. package/dist/web/atmos.css +127 -9
  21. package/dist/web/atmos.min.css +1 -1
  22. package/dist/web/atmos.scss +35 -1
  23. package/dist/web/blueprint.css +34 -0
  24. package/dist/web/blueprint.min.css +1 -1
  25. package/dist/web/blueprint.scss +34 -0
  26. package/dist/web/hawaiian.css +127 -9
  27. package/dist/web/hawaiian.min.css +1 -1
  28. package/dist/web/hawaiian.scss +36 -2
  29. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # Semantic Release Automated Changelog
2
2
 
3
+ # [9.2.0](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v9.1.0...v9.2.0) (2026-07-21)
4
+
5
+
6
+ ### Features
7
+
8
+ * 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))
9
+
10
+ # [9.1.0](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v9.0.0...v9.1.0) (2026-07-13)
11
+
12
+
13
+ ### Features
14
+
15
+ * update tokens from figma [#461](https://github.com/AlaskaAirlines/AuroDesignTokens/issues/461) ([4462469](https://github.com/AlaskaAirlines/AuroDesignTokens/commit/4462469843264acfc5739b349ee9721e744da854))
16
+
3
17
  # [9.0.0](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v8.21.2...v9.0.0) (2026-06-17)
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
@@ -25,11 +25,69 @@
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
+ },
28
57
  "basicEconomy": "#97eaf8",
29
- "business": "#01426a",
58
+ "business": "#005154",
30
59
  "economy": "#0074ca",
31
- "first": "#00274a",
32
- "premiumEconomy": "#005154",
60
+ "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
+ }
89
+ },
90
+ "premiumEconomy": "#265688",
33
91
  "suitesBack": "#00274a",
34
92
  "suitesFront": "#005154"
35
93
  },
package/dist/app/atmosLight.json CHANGED
@@ -25,11 +25,69 @@
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
+ },
28
57
  "basicEconomy": "#97eaf8",
29
58
  "business": "#002c4e",
30
59
  "economy": "#0074ca",
31
60
  "first": "#101d2c",
32
- "premiumEconomy": "#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
+ }
89
+ },
90
+ "premiumEconomy": "#265688",
33
91
  "suitesBack": "#101d2c",
34
92
  "suitesFront": "#101d2c"
35
93
  },
package/dist/app/hawaiianLight.json CHANGED
@@ -25,11 +25,69 @@
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
+ },
28
57
  "basicEconomy": "#d0d0d0",
29
58
  "business": "#463c8f",
30
- "economy": "#ce0c88",
59
+ "economy": "#00a5ba",
31
60
  "first": "#463c8f",
32
- "premiumEconomy": "#1b6976",
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
+ }
89
+ },
90
+ "premiumEconomy": "#ce0c88",
33
91
  "suitesBack": "#ce0c88",
34
92
  "suitesFront": "#463c8f"
35
93
  },
package/dist/app/test.json CHANGED
@@ -25,10 +25,68 @@
25
25
  "tertiarySubtle": "#adadad"
26
26
  },
27
27
  "fare": {
28
+ "alaska": {
29
+ "basicEconomy": {
30
+ "bold": "#3c3d3d",
31
+ "standard": "#abadad",
32
+ "subtle": "#f5f7f7"
33
+ },
34
+ "economy": {
35
+ "bold": "#7d7e7e",
36
+ "standard": "#949595",
37
+ "subtle": "#f5f7f7"
38
+ },
39
+ "economyExtraLegroom": {
40
+ "bold": "#515252",
41
+ "standard": "#515252",
42
+ "subtle": "#f5f7f7"
43
+ },
44
+ "firstBusiness": {
45
+ "bold": "#3c3d3d",
46
+ "gradientBack": "#2a2a2a",
47
+ "gradientFront": "#515252",
48
+ "standard": "#3c3d3d",
49
+ "subtle": "#f5f7f7"
50
+ },
51
+ "premiumEconomy": {
52
+ "bold": "#2a2a2a",
53
+ "standard": "#2a2a2a",
54
+ "subtle": "#f5f7f7"
55
+ }
56
+ },
28
57
  "basicEconomy": "#d0d0d0",
29
58
  "business": "#3d3d3d",
30
59
  "economy": "#676767",
31
60
  "first": "#2a2a2a",
61
+ "hawaiian": {
62
+ "basicEconomy": {
63
+ "bold": "#515252",
64
+ "standard": "#ced0d0",
65
+ "subtle": "#f5f7f7"
66
+ },
67
+ "economy": {
68
+ "bold": "#515252",
69
+ "standard": "#7d7e7e",
70
+ "subtle": "#f5f7f7"
71
+ },
72
+ "economyExtraLegroom": {
73
+ "bold": "#666767",
74
+ "standard": "#7d7e7e",
75
+ "subtle": "#f5f7f7"
76
+ },
77
+ "firstBusiness": {
78
+ "bold": "#7d7e7e",
79
+ "gradientBack": "#2a2a2a",
80
+ "gradientFront": "#666767",
81
+ "standard": "#7d7e7e",
82
+ "subtle": "#f5f7f7"
83
+ },
84
+ "premiumEconomy": {
85
+ "bold": "#515252",
86
+ "standard": "#515252",
87
+ "subtle": "#f5f7f7"
88
+ }
89
+ },
32
90
  "premiumEconomy": "#525252",
33
91
  "suitesBack": "#525252",
34
92
  "suitesFront": "#7e7e7e"
package/dist/themes/CSSCustomProperties--bundled.css CHANGED
@@ -1,5 +1,5 @@
1
- /* Properties from CSSCustomProperties--alaska.css */
2
- [data-aag-theme="aag-theme-as"] {
1
+ /* Color properties from CSSCustomProperties--alaska.css */
2
+ [data-aag-theme="aag-theme-as"], [data-aag-theme="aag-theme-as-color"] {
3
3
  --ds-advanced-color-button-flat-text: #676767;
4
4
  --ds-advanced-color-button-flat-text-disabled: #d0d0d0;
5
5
  --ds-advanced-color-button-flat-text-hover: #525252;
@@ -186,6 +186,10 @@
186
186
  --ds-basic-color-tier-program-oneworld-emerald: #139142;
187
187
  --ds-basic-color-tier-program-oneworld-ruby: #a41d4a;
188
188
  --ds-basic-color-tier-program-oneworld-sapphire: #015daa;
189
+ }
190
+
191
+ /* Typography properties from CSSCustomProperties--alaska.css */
192
+ [data-aag-theme="aag-theme-as"], [data-aag-theme="aag-theme-as-type"] {
189
193
  --ds-basic-type-brand-family-primary: "AS Circular";
190
194
  --ds-basic-type-brand-family-secondary: "Good OT";
191
195
  --ds-basic-type-brand-line-height-primary: 1.3;
@@ -224,8 +228,8 @@
224
228
  --ds-basic-type-weight-heading2: 450;
225
229
  }
226
230
 
227
- /* Properties from CSSCustomProperties--alaskaClassic.css */
228
- [data-aag-theme="aag-theme-asc"] {
231
+ /* Color properties from CSSCustomProperties--alaskaClassic.css */
232
+ [data-aag-theme="aag-theme-asc"], [data-aag-theme="aag-theme-asc-color"] {
229
233
  --ds-advanced-color-button-flat-text: #676767;
230
234
  --ds-advanced-color-button-flat-text-disabled: #d0d0d0;
231
235
  --ds-advanced-color-button-flat-text-hover: #525252;
@@ -412,6 +416,10 @@
412
416
  --ds-basic-color-tier-program-oneworld-emerald: #139142;
413
417
  --ds-basic-color-tier-program-oneworld-ruby: #a41d4a;
414
418
  --ds-basic-color-tier-program-oneworld-sapphire: #015daa;
419
+ }
420
+
421
+ /* Typography properties from CSSCustomProperties--alaskaClassic.css */
422
+ [data-aag-theme="aag-theme-asc"], [data-aag-theme="aag-theme-asc-type"] {
415
423
  --ds-basic-type-brand-family-primary: "AS Circular";
416
424
  --ds-basic-type-brand-family-secondary: "AS Circular";
417
425
  --ds-basic-type-brand-line-height-primary: 1.3;
@@ -450,8 +458,8 @@
450
458
  --ds-basic-type-weight-heading2: 500;
451
459
  }
452
460
 
453
- /* Properties from CSSCustomProperties--auro1.css */
454
- [data-aag-theme="aag-theme-a1"] {
461
+ /* Color properties from CSSCustomProperties--auro1.css */
462
+ [data-aag-theme="aag-theme-a1"], [data-aag-theme="aag-theme-a1-color"] {
455
463
  --ds-advanced-color-button-flat-text: #6a717c;
456
464
  --ds-advanced-color-button-flat-text-disabled: #585e67;
457
465
  --ds-advanced-color-button-flat-text-hover: #585e67;
@@ -638,6 +646,10 @@
638
646
  --ds-basic-color-tier-program-oneworld-emerald: #139142;
639
647
  --ds-basic-color-tier-program-oneworld-ruby: #a41d4a;
640
648
  --ds-basic-color-tier-program-oneworld-sapphire: #015daa;
649
+ }
650
+
651
+ /* Typography properties from CSSCustomProperties--auro1.css */
652
+ [data-aag-theme="aag-theme-a1"], [data-aag-theme="aag-theme-a1-type"] {
641
653
  --ds-basic-type-brand-family-primary: "AS Circular";
642
654
  --ds-basic-type-brand-family-secondary: Teodor;
643
655
  --ds-basic-type-brand-line-height-primary: 1.3;
@@ -676,8 +688,8 @@
676
688
  --ds-basic-type-weight-heading2: 300;
677
689
  }
678
690
 
679
- /* Properties from CSSCustomProperties--auro2.css */
680
- [data-aag-theme="aag-theme-a2"] {
691
+ /* Color properties from CSSCustomProperties--auro2.css */
692
+ [data-aag-theme="aag-theme-a2"], [data-aag-theme="aag-theme-a2-color"] {
681
693
  --ds-advanced-color-button-flat-text: #6a717c;
682
694
  --ds-advanced-color-button-flat-text-disabled: #585e67;
683
695
  --ds-advanced-color-button-flat-text-hover: #585e67;
@@ -864,6 +876,10 @@
864
876
  --ds-basic-color-tier-program-oneworld-emerald: #139142;
865
877
  --ds-basic-color-tier-program-oneworld-ruby: #a41d4a;
866
878
  --ds-basic-color-tier-program-oneworld-sapphire: #015daa;
879
+ }
880
+
881
+ /* Typography properties from CSSCustomProperties--auro2.css */
882
+ [data-aag-theme="aag-theme-a2"], [data-aag-theme="aag-theme-a2-type"] {
867
883
  --ds-basic-type-brand-family-primary: "AS Circular";
868
884
  --ds-basic-type-brand-family-secondary: Teodor;
869
885
  --ds-basic-type-brand-line-height-primary: 1.3;
@@ -902,8 +918,8 @@
902
918
  --ds-basic-type-weight-heading2: 300;
903
919
  }
904
920
 
905
- /* Properties from CSSCustomProperties--hawaiian.css */
906
- [data-aag-theme="aag-theme-ha"] {
921
+ /* Color properties from CSSCustomProperties--hawaiian.css */
922
+ [data-aag-theme="aag-theme-ha"], [data-aag-theme="aag-theme-ha-color"] {
907
923
  --ds-advanced-color-button-flat-text: #676767;
908
924
  --ds-advanced-color-button-flat-text-disabled: #d0d0d0;
909
925
  --ds-advanced-color-button-flat-text-hover: #525252;
@@ -1090,6 +1106,10 @@
1090
1106
  --ds-basic-color-tier-program-oneworld-emerald: #139142;
1091
1107
  --ds-basic-color-tier-program-oneworld-ruby: #a41d4a;
1092
1108
  --ds-basic-color-tier-program-oneworld-sapphire: #015daa;
1109
+ }
1110
+
1111
+ /* Typography properties from CSSCustomProperties--hawaiian.css */
1112
+ [data-aag-theme="aag-theme-ha"], [data-aag-theme="aag-theme-ha-type"] {
1093
1113
  --ds-basic-type-brand-family-primary: "Slate Pro";
1094
1114
  --ds-basic-type-brand-family-secondary: "Chronicle Display";
1095
1115
  --ds-basic-type-brand-line-height-primary: 1.3;