@aurodesignsystem/design-tokens 5.3.0 → 5.3.1

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 (34) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/README.md +44 -255
  3. package/dist/CSSCustomProperties--bundled.css +1 -1
  4. package/dist/alaska/CSSCustomProperties--alaska.css +1 -1
  5. package/dist/alaska/JSONVariablesNested--alaska.json +154 -0
  6. package/dist/alaska/JSObject--allTokens.js +1 -1
  7. package/dist/alaska/SCSSVariables--alaska.scss +1 -1
  8. package/dist/alaska/SCSSVariablesMapFlat--alaska.scss +1 -1
  9. package/dist/alaska/primitives--alaska.scss +1 -1
  10. package/dist/alaska-classic/CSSCustomProperties--alaskaClassic.css +1 -1
  11. package/dist/alaska-classic/JSONVariablesNested--alaskaClassic.json +154 -0
  12. package/dist/alaska-classic/JSObject--allTokens.js +1 -1
  13. package/dist/alaska-classic/SCSSVariables--alaskaClassic.scss +1 -1
  14. package/dist/alaska-classic/SCSSVariablesMapFlat--alaskaClassic.scss +1 -1
  15. package/dist/alaska-classic/primitives--alaskaClassic.scss +1 -1
  16. package/dist/auro-classic/CSSCustomProperties.css +1 -1
  17. package/dist/auro-classic/CSSSizeCustomProperties.css +1 -1
  18. package/dist/auro-classic/JSData--color.js +1 -1
  19. package/dist/auro-classic/JSObject--allTokens.js +1 -1
  20. package/dist/auro-classic/JSObject--deprecated.js +1 -1
  21. package/dist/auro-classic/JSVariables--color.js +1 -1
  22. package/dist/auro-classic/SCSSVariableMap.scss +1 -1
  23. package/dist/auro-classic/SCSSVariables.scss +1 -1
  24. package/dist/auro-classic/SCSSVariablesMapFlat.scss +1 -1
  25. package/dist/auro-classic/SassCustomProperties.scss +1 -1
  26. package/dist/auro-classic/SassSizeCustomProperties.scss +1 -1
  27. package/dist/hawaiian/CSSCustomProperties--hawaiian.css +1 -1
  28. package/dist/hawaiian/JSONVariablesNested--hawaiian.json +154 -0
  29. package/dist/hawaiian/JSObject--allTokens.js +1 -1
  30. package/dist/hawaiian/SCSSVariables--hawaiian.scss +1 -1
  31. package/dist/hawaiian/SCSSVariablesMapFlat--hawaiian.scss +1 -1
  32. package/dist/hawaiian/primitives--hawaiian.scss +1 -1
  33. package/dist/transparent/CSSCustomProperties--transparent.css +1 -1
  34. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Semantic Release Automated Changelog
2
2
 
3
+ ## [5.3.1](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v5.3.0...v5.3.1) (2025-03-14)
4
+
5
+
6
+ ### Performance Improvements
7
+
8
+ * add JSONVariablesNested export to dist ([a293c86](https://github.com/AlaskaAirlines/AuroDesignTokens/commit/a293c86c08955081db226b432731426b8e165187))
9
+
3
10
  # [5.3.0](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v5.2.1...v5.3.0) (2025-03-11)
4
11
 
5
12
 
package/README.md CHANGED
@@ -4,302 +4,91 @@
4
4
  [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/design-tokens.svg?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/design-tokens)
5
5
  [![License](https://img.shields.io/npm/l/@aurodesignsystem/design-tokens.svg?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
6
6
 
7
- ## Introduction
7
+ ## Overview
8
8
 
9
- Auro Design Tokens are the foundation of the Auro Design System, providing consistent design values across different platforms and implementations.
10
-
11
- These tokens define colors, typography, spacing, and other visual attributes for Alaska Airlines and Hawaiian Airlines brands.
9
+ Auro Design Tokens are the foundation of the Auro Design System, providing consistent design values across different platforms and implementations. These tokens define colors, typography, spacing, and other visual attributes for Alaska Airlines and Hawaiian Airlines brands.
12
10
 
13
11
  ## Installation
14
12
 
15
- ```
16
- $ npm i @aurodesignsystem/design-tokens
13
+ ```bash
14
+ npm install @aurodesignsystem/design-tokens
17
15
  ```
18
16
 
19
- ### Package Structure
17
+ ## Quick Start
20
18
 
21
- The npm package provides pre-processed resources in the `./dist/` directory:
19
+ ### CSS Custom Properties
22
20
 
23
- ```
24
- └── dist
25
- ├── alaska
26
- │ └── CSSCustomProperties--alaska.css
27
- │ └── primitives--alaska.scss
28
- ├── alaska-classic
29
- │ ├── CSSCustomProperties--alaskaClassic.css
30
- │ ├── JSObject--allTokens.js
31
- │ ├── primitives--alaskaClassic.scss
32
- │ ├── SCSSVariables--alaskaClassic.scss
33
- │ └── SCSSVariablesMapFlat--alaskaClassic.scss
34
- ├── auro-classic
35
- │ ├── CSSCustomProperties.css
36
- │ ├── CSSSizeCustomProperties.css
37
- │ ├── JSData--color.js
38
- │ ├── JSObject--allTokens.js
39
- │ ├── JSObject--deprecated.js
40
- │ ├── JSONVariablesFlat.json
41
- │ ├── JSONVariablesNested.json
42
- │ ├── JSVariables--color.js
43
- │ ├── SassCustomProperties.scss
44
- │ ├── SassSizeCustomProperties.scss
45
- │ ├── SCSSVariableMap.scss
46
- │ ├── SCSSVariables.scss
47
- │ └── SCSSVariablesMapFlat.scss
48
- ├── hawaiian
49
- │ └── CSSCustomProperties--hawaiian.css
50
- │ └── primitives--hawaiian.scss
51
- ├── transparent
52
- │ └── CSSCustomProperties--transparent.css
53
- └── CSSCustomProperties--bundled.css
21
+ For most web applications, using CSS Custom Properties is recommended:
22
+
23
+ ```js
24
+ // In a React or similar application
25
+ import "@aurodesignsystem/design-tokens/dist/alaska/CSSCustomProperties--alaska.css"
54
26
  ```
55
27
 
56
- ## Usage Guide
28
+ ```html
29
+ <!-- In an HTML file -->
30
+ <link rel="stylesheet" href="node_modules/@aurodesignsystem/design-tokens/dist/alaska/CSSCustomProperties--alaska.css">
31
+ ```
57
32
 
58
- ### Install with Sass
33
+ ### With Sass
59
34
 
60
- When working with Sass, import the SCSS file for your theme:
35
+ When working with Sass:
61
36
 
62
37
  ```scss
63
38
  @import "~@aurodesignsystem/design-tokens/dist/alaska/primitives--alaska.scss";
64
39
  ```
65
40
 
66
- **NOTE:** When developing new UI code in Sass, it's still advisable to leverage CSS custom properties over Sass variables.
67
-
68
- ### Install with CSS
69
-
70
- For React or similar frameworks, import the CSS file directly:
41
+ ### JavaScript Usage
71
42
 
72
43
  ```js
73
- import "@aurodesignsystem/design-tokens/dist/alaska/CSSCustomProperties--alaska.css"
44
+ import { AuroColorAlertNotificationOnLight } from '@aurodesignsystem/design-tokens/dist/auro-classic/JSVariables--color.js';
74
45
  ```
75
46
 
76
- For other frameworks, you'll need to copy the CSS file from the npm resource into your project using a build scenario.
77
-
78
- ### Install ESModules
79
-
80
- _Note: ESModules are not yet available for the v5.x tokens._
47
+ ## Available Themes
81
48
 
82
- In a webpack-supported application or a `type="module"` script:
49
+ Auro Design Tokens support multiple themes:
83
50
 
84
- ```js
85
- import { AuroColorAlertNotificationOnLight, AuroColorBorderErrorOnLight } from '@aurodesignsystem/design-tokens/dist/auro-classic/JSVariables--color.js';
86
- ```
51
+ | Theme | Description | Usage |
52
+ |-------|-------------|-------|
53
+ | Alaska | Current Alaska Airlines theme | Alaska Airlines branded interfaces |
54
+ | Alaska Classic | Transition theme with `v5.x` token names but Auro Classic values | For migration scenarios only |
55
+ | Hawaiian | Hawaiian Airlines theme | Hawaiian Airlines branded interfaces |
56
+ | Auro Classic | Legacy theme (deprecated) | Only for backward compatibility |
87
57
 
88
- ### Install from CDN
58
+ ## Theme Scoping
89
59
 
90
- Using the `https://cdn.jsdelivr.net/npm/` CDN:
60
+ Apply different themes using the `data-aag-theme` attribute:
91
61
 
92
62
  ```html
93
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm//@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
94
- ```
95
-
96
- **Note:** Exercise caution when using this CDN solution. The Auro team is NOT responsible for the maintenance of the CDN `https://cdn.jsdelivr.net/` [uptime](https://www.isitupdown.com/jsdelivr) and are unable to effectively troubleshoot response issues. It is recommended to use the installed version of Auro Design Tokens for critical UIs.
97
-
98
- ## Theme Scoping with data-aag-theme
99
-
100
- The Auro Design System supports multiple themes that can be applied using the `data-aag-theme` attribute.
101
-
102
- ### Implementation Example
103
-
104
- ```html
105
- <!-- Alaska-themed section -->
63
+ <!-- Alaska-themed -->
106
64
  <div data-aag-theme="aag-theme-as">
107
65
  <h1>Alaska Airlines Content</h1>
108
- <!-- Elements here will use Alaska theme tokens -->
109
66
  </div>
110
67
 
111
- <!-- Hawaiian-themed section -->
68
+ <!-- Hawaiian-themed -->
112
69
  <div data-aag-theme="aag-theme-ha">
113
70
  <h1>Hawaiian Airlines Content</h1>
114
- <!-- Elements here will use Hawaiian theme tokens -->
115
71
  </div>
116
72
  ```
117
73
 
118
- ### Important Notes
119
-
120
- - The bundled CSS file (`CSSCustomProperties--bundled.css`) contains all themes rescoped with their respective `data-aag-theme` selectors
121
- - See the [Theme Data Attributes](#theme-data-attributes) table below for all available theme codes.
122
-
123
- ## Available Themes & Resources
124
-
125
- ### Theme Data Attributes
126
-
127
- For theme scoping with CSS Custom Properties, use the following data attributes:
128
-
129
- | Theme | Data Attribute | Theme Code |
130
- |---------------|----------------------------------|------------|
131
- | Alaska | `data-aag-theme="aag-theme-as"` | `as` |
132
- | Alaska Classic| `data-aag-theme="aag-theme-asc"` | `asc` |
133
- | Hawaiian | `data-aag-theme="aag-theme-ha"` | `ha` |
134
-
135
- ### Alaska
136
-
137
- | File | Syntax | Type | Description |
138
- |-----------------------------|--------|--------------------|-------------------------------------------------------|
139
- | CSSCustomProperties--alaska | CSS | Custom properties | All v5.x semantic tokens |
140
- | primitives--alaska | SCSS | Sass variables | All v5.x semantic token values |
141
-
142
- ### Alaska Classic
143
-
144
- The Alaska Classic theme uses the `v5.x` token names with the deprecated Auro Classic values.
145
-
146
- It serves as a gateway to the `v5.x` tokens, facilitating a smooth transition for Auro components, leading to an eventual switch to the new "Alaska" theme.
147
-
148
- | File | Syntax | Type | Description |
149
- |----------------------------------------|-----------|--------------------|------------------------------------------------------|
150
- | CSSCustomProperties--alaskaClassic | CSS | Custom properties | All v5.x semantic tokens |
151
- | JSObject--allTokens.js | JS module | All data | All v5.x token data |
152
- | primitives--alaskaClassic | SCSS | Sass variables | All v5.x semantic token values |
153
- | SCSSVariables--alaskaClassic | SCSS | Sass variables | All v5.x semantic tokens |
154
- | SCSSVariablesMapFlat--alaskaClassic | SCSS | Sass variable map | All v5.x semantic tokens as flat map |
155
-
156
- ### Hawaiian
157
-
158
- | File | Syntax | Type | Description |
159
- |-------------------------------|--------|--------------------|-------------------------------------------------------|
160
- | CSSCustomProperties--hawaiian | CSS | Custom properties | All v5.x release tokens |
161
- | primitives--hawaiian | SCSS | Sass variables | All v5.x semantic token values |
162
-
163
- ### Auro Classic (Deprecated)
164
-
165
- | File | Syntax | Type | Filter Type / Description |
166
- |--------------------------|-----------|--------------------|----------------------------------|
167
- | CSSCustomProperties | CSS | Custom properties | All v4.x release tokens |
168
- | CSSSizeCustomProperties | CSS | Custom properties | Filter v4.x: size, public |
169
- | JSData--color | JS module | Color data | Filter v4.x: color, Deprecated |
170
- | JSONVariablesFlat | JSON Data | All data | All v4.x release tokens |
171
- | JSONVariablesNested | JSON Data | All data | All v4.x release tokens |
172
- | JSObject--deprecated | JS module | Deprecated tokens | Filter v4.x: deprecated, public |
173
- | JSObject--allTokens.js | JS module | All data | All v4.x release tokens |
174
- | JSVariables--color | JS ES6 | Color data | Filter v4.x: color |
175
- | SCSSVariableMap | Sass | Sass variable map | Filter v4.x: size, public |
176
- | SCSSVariables | SCSS | Sass variables | All v4.x release tokens |
177
- | SCSSVariablesMapFlat | SCSS | Sass variable map | All v4.x release tokens |
178
- | SassCustomProperties | SCSS | Custom properties | All v4.x release tokens |
179
- | SassSizeCustomProperties | Sass | Custom properties | Filter v4.x: size, public |
180
-
181
- ### Transparent (Deprecated)
182
-
183
- | File | Syntax | Type | Filter Type / Description |
184
- |-------------------------------------|-----------|--------------------|---------------------------|
185
- | CSSCustomProperties--transparent | CSS | Custom properties | All v4.0x release tokens |
186
-
187
- ### Bundled File
188
-
189
- | File | Syntax | Type | Description |
190
- |---------------------------------|--------|-------------------|-----------------------------------------|
191
- | CSSCustomProperties--bundled.css | CSS | Custom properties | Combined v5.x `semantic` CSS custom properties from all supported themes with their respective `data-aag-theme` selectors |
192
-
193
- **NOTE: Bundled file is not intended for general use.**
194
-
195
- ## Understanding the Architecture
196
-
197
- ### Key Concepts
198
-
199
- The Auro Design System is built on a structured hierarchy of design tokens organized around two key concepts:
200
-
201
- - **Primitives**: Low-level, foundational values (colors, sizes, etc.)
202
- - **Themes**: Semantic tokens that reference primitives with meaningful, usage-based names
203
-
204
- ### Source Directory Structure
205
-
206
- ```
207
- src/
208
- ├── primitives/
209
- │ ├── alaska/
210
- │ │ ├── color.json
211
- │ │ ├── typography.json
212
- │ │ └── ...
213
- │ ├── base/
214
- │ │ ├── color.json
215
- │ │ ├── transparency.json
216
- │ │ └── ...
217
- │ ├── hawaiian/
218
- │ │ ├── color.json
219
- │ │ ├── typography.json
220
- │ │ └── ...
221
- │ └── ...
222
- └── themes/
223
- ├── alaska/
224
- │ ├── color.json
225
- │ ├── typography.json
226
- │ └── ...
227
- ├── hawaiian/
228
- │ ├── color.json
229
- │ ├── typography.json
230
- │ └── ...
231
- └── ...
232
- ```
233
-
234
- ### Multi-Level Token Architecture
235
-
236
- #### 1. Base Primitives: Shared Foundation
237
-
238
- Base primitives (`src/primitives/base/`) define foundational values shared across the system:
239
- - Common color scales (gray, neutral, status colors)
240
- - Basic visual elements (black, white)
241
- - Transparency values
242
- - And more...
243
-
244
- These base primitives are shared resources that theme-specific primitives can reference, providing consistency across the entire design system.
245
-
246
- #### 2. Theme-Specific Primitives: Brand Identity
247
-
248
- Each supported theme (Alaska, Hawaiian, etc.) has its own primitives folder (`src/primitives/alaska/`, `src/primitives/hawaiian/`) containing:
249
- - Brand-specific color palettes
250
- - Typography definitions unique to each brand
251
- - And more...
252
-
253
- These theme-specific primitives work alongside the shared `base` primitives to create a complete palette for each brand.
254
-
255
- #### 3. Semantic Theme Tokens: Usage-Based References
256
-
257
- The tokens in the `themes` directory (`src/themes/alaska/`, `src/themes/hawaiian/`) are semantic tokens that:
258
- - Reference primitive values using paths like `{color.atlas.600.value}`
259
- - Have meaningful names based on their function (e.g., `color.brand.primary`)
260
- - Provide usage descriptions explaining their intended context
261
- - Are marked as `"public": true` for use in components
262
-
263
- #### 4. Component Tokens: UI Element Styling
264
-
265
- Component tokens, prefixed with `--ds-component-` in the CSS custom properties files and found in `component.json` for each theme, define the visual characteristics of UI components.
266
-
267
- These component tokens reference semantic tokens and create a higher-level abstraction specifically for UI components.
268
-
269
- #### 5. Multi-level Semantic References
270
-
271
- Semantic tokens can reference other semantic tokens, not just primitives:
272
- - For example, `font.weight.heading.heading1` can reference `{font.weight.book.value}`
273
- - This creates multiple layers of abstraction and flexibility
274
- - These reference chains ultimately resolve to primitive values
275
-
276
- ### Best Practices
277
-
278
- **Never Use Primitives Directly in UI**
74
+ ## Documentation
279
75
 
280
- UI components should never directly use primitives (either `base` or theme-specific).
76
+ For comprehensive documentation, please see our:
281
77
 
282
- ### Benefits of This Architecture
78
+ - [Architecture Guide](https://auro.alaskaair.com/getting-started/developers/design-tokens/docs/architecture)
79
+ - [Theme Guide](https://auro.alaskaair.com/getting-started/developers/design-tokens/docs/themes)
80
+ - [Migration Guide](https://auro.alaskaair.com/getting-started/developers/design-tokens/docs/migration)
81
+ - [API Reference](https://auro.alaskaair.com/getting-started/developers/design-tokens/docs/api-reference)
82
+ - [Complete Documentation - Auro Docs](https://auro.alaskaair.com/getting-started/developers/design-tokens)
283
83
 
284
- This three-tiered approach provides several advantages:
84
+ ## Package Structure
285
85
 
286
- 1. **Theme Flexibility**: Components can seamlessly switch between themes without code changes
287
- 2. **Abstraction of Intent**: Semantic naming communicates the purpose of each token
288
- 3. **Centralized Updates**: Changes to primitive values automatically propagate to all semantic tokens
289
- 4. **Design Consistency**: Related UI elements share the same semantic tokens across different contexts
290
- 5. **Clear Migration Path**: Supports multiple versions during transition periods
86
+ The npm package provides pre-processed resources in the `./dist/` directory organized by theme.
291
87
 
292
- ## Migration from v4.x to v5.x
88
+ ## Contributing
293
89
 
294
- With the release of Auro Design Tokens 5.x significant changes have occurred:
90
+ Please read our [contributing guidelines](.github/CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.
295
91
 
296
- - `./dist/` directory has been restructured. All file imports will need to have their paths updated.
297
- - The v4.x default theme is now called `Auro Classic`. The files for this theme may be found in `./dist/auro-classic`. This theme is now deprecated.
298
- - **NEW** Alaska theme found in `./dist/alaska`.
299
- - **NEW** Alaska Classic theme found in `./dist/alaska-classic`.
300
- - **NEW** Hawaiian theme found in `./dist/hawaiian`.
301
- - The Alaska theme and Hawaiian theme are intended to be used one at a time within a given DOM `scope`. It is not supported to load both themes into the same `scope` of the document.
302
- - v4.x and v5.x token names are unique to each version. As such, the `./dist/auro-classic` theme can be loaded with any of the other themes to support old Auro component versions that do not yet run on the v5.x tokens.
303
- - Review the [Deprecated tokens list](https://auro.alaskaair.com/getting-started/developers/design-tokens/deprecated) for a matrix of changes. Some tokens have been removed from the project and need to be updated.
92
+ ## License
304
93
 
305
- By supporting both the legacy and new Auro design tokens in your project, you ensure a smooth transition until all Auro components have been updated and your project has also updated local SCSS/CSS files with the new references.
94
+ This project is licensed under the Apache 2.0 License - see the [LICENSE](./LICENSE) file for details.
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  Do not edit directly
3
- Generated on Tue, 11 Mar 2025 19:16:34 GMT
3
+ Generated on Fri, 14 Mar 2025 18:27:46 GMT
4
4
  */
5
5
 
6
6
  /* Properties from CSSCustomProperties--alaska.css */
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ * Generated on Fri, 14 Mar 2025 18:27:56 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -0,0 +1,154 @@
1
+ {
2
+ "color": {
3
+ "border": {
4
+ "bold": "#585e67",
5
+ "brand": "#01426a",
6
+ "default": "#959595",
7
+ "divider": "#00000026",
8
+ "dividerInverse": "#ffffff66",
9
+ "inverse": "#ffffff",
10
+ "subtle": "#dddddd"
11
+ },
12
+ "brand": {
13
+ "primary": "#01426a",
14
+ "primaryBold": "#00274a",
15
+ "primaryMuted": "#ebf3f9",
16
+ "primarySubtle": "#2875b5",
17
+ "secondary": "#5de3f7",
18
+ "secondaryBold": "#18c3dd",
19
+ "secondaryMuted": "#ebfafd",
20
+ "secondarySubtle": "#b4eff9",
21
+ "tertiary": "#a3cd6a",
22
+ "tertiaryBold": "#7daf3b",
23
+ "tertiaryMuted": "#eaf3dd",
24
+ "tertiarySubtle": "#c9e1a7"
25
+ },
26
+ "farebrand": {
27
+ "basiceconomy": "#97eaf8",
28
+ "businessFirst": "#00274a",
29
+ "economy": "#0074ca",
30
+ "premiumeconomy": "#005154",
31
+ "oneworld": {
32
+ "emerald": "#139142",
33
+ "sapphire": "#015daa",
34
+ "ruby": "#a41d4a"
35
+ }
36
+ },
37
+ "pagebackground": {
38
+ "default": "#ebfafd",
39
+ "utility": "#ffffff"
40
+ },
41
+ "status": {
42
+ "default": "#afb9c6",
43
+ "error": "#e53339",
44
+ "errorSubtle": "#fddede",
45
+ "info": "#01426a",
46
+ "infoSubtle": "#e8f2f8",
47
+ "success": "#529325",
48
+ "successSubtle": "#e4f1da",
49
+ "warning": "#fac200",
50
+ "warningSubtle": "#fff6d1"
51
+ },
52
+ "surface": {
53
+ "accent1": "#5de3f7",
54
+ "accent1Muted": "#ebfafd",
55
+ "accent1Subtle": "#b4eff9",
56
+ "accent2": "#a3cd6a",
57
+ "accent2Muted": "#eaf3dd",
58
+ "default": "#ffffff",
59
+ "inverse": "#00274a",
60
+ "inverseSubtle": "#2875b5",
61
+ "neutralMedium": "#c5c5c5",
62
+ "neutralSubtle": "#f2f2f2"
63
+ },
64
+ "texticon": {
65
+ "accent1": "#00274a",
66
+ "default": "#2a2a2a",
67
+ "disabled": "#d0d0d0",
68
+ "inverse": "#ffffff",
69
+ "inverseDisabled": "#d0d0d0",
70
+ "muted": "#676767"
71
+ }
72
+ },
73
+ "component": {
74
+ "selected": {
75
+ "hover": "#00274a"
76
+ },
77
+ "focused": "#01426a",
78
+ "inverseFocused": "#ffffff",
79
+ "background": "#ffffff",
80
+ "backgroundHover": "#f2f2f2",
81
+ "backgroundDisabled": "#dddddd",
82
+ "backgroundMuted": "#f7f7f7",
83
+ "backgroundStrong": "#7e7e7e",
84
+ "button": {
85
+ "primary": {
86
+ "text": "#ffffff",
87
+ "border": "#01426a",
88
+ "borderHover": "#00274a",
89
+ "background": "#01426a",
90
+ "backgroundHover": "#00274a",
91
+ "backgroundActive": "#00274a",
92
+ "textInverse": "#01426a",
93
+ "borderInverse": "#ffffff",
94
+ "backgroundInverse": "#ffffff",
95
+ "borderInverseHover": "#ebf3f9",
96
+ "backgroundInverseHover": "#ebf3f9"
97
+ },
98
+ "secondary": {
99
+ "text": "#01426a",
100
+ "textHover": "#00274a",
101
+ "border": "#01426a",
102
+ "borderHover": "#00274a",
103
+ "background": "#ffffffcc",
104
+ "backgroundHover": "#ffffff80",
105
+ "textInverse": "#ffffff",
106
+ "borderInverse": "#ffffff",
107
+ "backgroundInverseHover": "#ffffffcc"
108
+ },
109
+ "tertiary": {
110
+ "text": "#01426a",
111
+ "textHover": "#00274a",
112
+ "background": "#0000000d",
113
+ "backgroundHover": "#0000001a",
114
+ "border": "#0000000d",
115
+ "borderHover": "#0000001a",
116
+ "textInverse": "#ffffff",
117
+ "backgroundInverse": "#ffffff0d",
118
+ "backgroundInverseHover": "#ffffff1a",
119
+ "borderInverse": "#ffffff0d",
120
+ "borderInverseHover": "#ffffff1a"
121
+ }
122
+ },
123
+ "boolean": {
124
+ "indicator": "#ffffff",
125
+ "isFalse": "#ffffff",
126
+ "isFalseHover": "#f2f2f2",
127
+ "isFalseBorder": "#585e67",
128
+ "isTrue": "#01426a",
129
+ "isTrueHover": "#00274a",
130
+ "error": "#e53339",
131
+ "errorHover": "#b1161c"
132
+ }
133
+ },
134
+ "font": {
135
+ "weight": {
136
+ "body": {
137
+ "default": "Book",
138
+ "large": "Book",
139
+ "small": "Book",
140
+ "xsmall": "Book",
141
+ "xxsmall": "Book"
142
+ },
143
+ "display": "Light",
144
+ "heading": {
145
+ "heading1": "Book",
146
+ "heading2": "Book",
147
+ "heading3": "Medium",
148
+ "heading4": "Medium",
149
+ "heading5": "Medium",
150
+ "heading6": "Medium"
151
+ }
152
+ }
153
+ }
154
+ }
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ * Generated on Fri, 14 Mar 2025 18:27:56 GMT
4
4
  */
5
5
 
6
6
  module.exports = {
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ // Generated on Fri, 14 Mar 2025 18:27:56 GMT
4
4
 
5
5
  $ds-color-border-bold: #585e67;
6
6
  $ds-color-border-brand: #01426a;
@@ -1,7 +1,7 @@
1
1
 
2
2
  /*
3
3
  Do not edit directly
4
- Generated on Tue, 11 Mar 2025 19:16:46 GMT
4
+ Generated on Fri, 14 Mar 2025 18:27:56 GMT
5
5
  */
6
6
 
7
7
  $auroTokens: (
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ // Generated on Fri, 14 Mar 2025 18:27:56 GMT
4
4
 
5
5
  $as-color-status-help-100: #e8f2f8;
6
6
  $as-color-status-help-200: #dbe6f0;
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ * Generated on Fri, 14 Mar 2025 18:27:56 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -0,0 +1,154 @@
1
+ {
2
+ "color": {
3
+ "border": {
4
+ "bold": "#585e67",
5
+ "brand": "#01426a",
6
+ "default": "#959595",
7
+ "divider": "#00000026",
8
+ "dividerInverse": "#ffffff66",
9
+ "inverse": "#ffffff",
10
+ "subtle": "#dddddd"
11
+ },
12
+ "brand": {
13
+ "primary": "#0074ca",
14
+ "primaryBold": "#003761",
15
+ "primaryMuted": "#ebf7ff",
16
+ "primarySubtle": "#289bee",
17
+ "secondary": "#01426a",
18
+ "secondaryBold": "#00274a",
19
+ "secondaryMuted": "#ebf3f9",
20
+ "secondarySubtle": "#2875b5",
21
+ "tertiary": "#5de3f7",
22
+ "tertiaryBold": "#18c3dd",
23
+ "tertiaryMuted": "#ebfafd",
24
+ "tertiarySubtle": "#b4eff9"
25
+ },
26
+ "farebrand": {
27
+ "basiceconomy": "#97eaf8",
28
+ "businessFirst": "#00274a",
29
+ "economy": "#0074ca",
30
+ "premiumeconomy": "#005154",
31
+ "oneworld": {
32
+ "emerald": "#139142",
33
+ "sapphire": "#015daa",
34
+ "ruby": "#a41d4a"
35
+ }
36
+ },
37
+ "pagebackground": {
38
+ "default": "#ffffff",
39
+ "utility": "#f7f8fa"
40
+ },
41
+ "status": {
42
+ "default": "#afb9c6",
43
+ "error": "#e53339",
44
+ "errorSubtle": "#fddede",
45
+ "info": "#007db1",
46
+ "infoSubtle": "#e8f2f8",
47
+ "success": "#529325",
48
+ "successSubtle": "#e4f1da",
49
+ "warning": "#fac200",
50
+ "warningSubtle": "#fff6d1"
51
+ },
52
+ "surface": {
53
+ "accent1": "#0074ca",
54
+ "accent1Muted": "#ebf7ff",
55
+ "accent1Subtle": "#289bee",
56
+ "accent2": "#959595",
57
+ "accent2Muted": "#c5c5c5",
58
+ "default": "#ffffff",
59
+ "inverse": "#01426a",
60
+ "inverseSubtle": "#2875b5",
61
+ "neutralMedium": "#c5c5c5",
62
+ "neutralSubtle": "#f2f2f2"
63
+ },
64
+ "texticon": {
65
+ "accent1": "#01426a",
66
+ "default": "#2a2a2a",
67
+ "disabled": "#d0d0d0",
68
+ "inverse": "#ffffff",
69
+ "inverseDisabled": "#d0d0d0",
70
+ "muted": "#676767"
71
+ }
72
+ },
73
+ "component": {
74
+ "selected": {
75
+ "hover": "#003761"
76
+ },
77
+ "focused": "#0074ca",
78
+ "inverseFocused": "#5de3f7",
79
+ "background": "#ffffff",
80
+ "backgroundHover": "#f2f2f2",
81
+ "backgroundDisabled": "#dddddd",
82
+ "backgroundMuted": "#f7f7f7",
83
+ "backgroundStrong": "#7e7e7e",
84
+ "button": {
85
+ "primary": {
86
+ "text": "#ffffff",
87
+ "border": "#0074ca",
88
+ "borderHover": "#003761",
89
+ "background": "#0074ca",
90
+ "backgroundHover": "#003761",
91
+ "backgroundActive": "#003761",
92
+ "textInverse": "#2a2a2a",
93
+ "borderInverse": "#5de3f7",
94
+ "backgroundInverse": "#5de3f7",
95
+ "borderInverseHover": "#b4eff9",
96
+ "backgroundInverseHover": "#b4eff9"
97
+ },
98
+ "secondary": {
99
+ "text": "#0074ca",
100
+ "textHover": "#01426a",
101
+ "border": "#0074ca",
102
+ "borderHover": "#003761",
103
+ "background": "#ffffff",
104
+ "backgroundHover": "#f2f2f2",
105
+ "textInverse": "#5de3f7",
106
+ "borderInverse": "#5de3f7",
107
+ "backgroundInverseHover": "#ebfafd"
108
+ },
109
+ "tertiary": {
110
+ "text": "#0074ca",
111
+ "textHover": "#003761",
112
+ "background": "#0000000d",
113
+ "backgroundHover": "#0000001a",
114
+ "border": "#0000000d",
115
+ "borderHover": "#0000001a",
116
+ "textInverse": "#5de3f7",
117
+ "backgroundInverse": "#ffffff0d",
118
+ "backgroundInverseHover": "#ffffff1a",
119
+ "borderInverse": "#ffffff0d",
120
+ "borderInverseHover": "#ffffff1a"
121
+ }
122
+ },
123
+ "boolean": {
124
+ "indicator": "#ffffff",
125
+ "isFalse": "#ffffff",
126
+ "isFalseHover": "#f2f2f2",
127
+ "isFalseBorder": "#585e67",
128
+ "isTrue": "#0074ca",
129
+ "isTrueHover": "#003761",
130
+ "error": "#e53339",
131
+ "errorHover": "#b1161c"
132
+ }
133
+ },
134
+ "font": {
135
+ "weight": {
136
+ "body": {
137
+ "default": "Book",
138
+ "large": "Book",
139
+ "small": "Book",
140
+ "xsmall": "Book",
141
+ "xxsmall": "Book"
142
+ },
143
+ "display": "Light",
144
+ "heading": {
145
+ "heading1": "Book",
146
+ "heading2": "Book",
147
+ "heading3": "Medium",
148
+ "heading4": "Medium",
149
+ "heading5": "Medium",
150
+ "heading6": "Medium"
151
+ }
152
+ }
153
+ }
154
+ }
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ * Generated on Fri, 14 Mar 2025 18:27:56 GMT
4
4
  */
5
5
 
6
6
  module.exports = {
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ // Generated on Fri, 14 Mar 2025 18:27:56 GMT
4
4
 
5
5
  $ds-color-border-bold: #585e67;
6
6
  $ds-color-border-brand: #01426a;
@@ -1,7 +1,7 @@
1
1
 
2
2
  /*
3
3
  Do not edit directly
4
- Generated on Tue, 11 Mar 2025 19:16:46 GMT
4
+ Generated on Fri, 14 Mar 2025 18:27:56 GMT
5
5
  */
6
6
 
7
7
  $auroTokens: (
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ // Generated on Fri, 14 Mar 2025 18:27:56 GMT
4
4
 
5
5
  $as-color-status-help-100: #e8f2f8;
6
6
  $as-color-status-help-200: #dbe6f0;
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ * Generated on Fri, 14 Mar 2025 18:27:56 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ * Generated on Fri, 14 Mar 2025 18:27:56 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ * Generated on Fri, 14 Mar 2025 18:27:56 GMT
4
4
  */
5
5
 
6
6
  module.exports = {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ * Generated on Fri, 14 Mar 2025 18:27:56 GMT
4
4
  */
5
5
 
6
6
  module.exports = {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ * Generated on Fri, 14 Mar 2025 18:27:56 GMT
4
4
  */
5
5
 
6
6
  module.exports = {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ * Generated on Fri, 14 Mar 2025 18:27:56 GMT
4
4
  */
5
5
 
6
6
  export const DsColorAlertNotificationDefault = "#0074c8";
@@ -1,7 +1,7 @@
1
1
 
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Tue, 11 Mar 2025 19:16:46 GMT
4
+ * Generated on Fri, 14 Mar 2025 18:27:56 GMT
5
5
  */
6
6
 
7
7
  $ds-size-25: 0.125rem !default; // 2px
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ // Generated on Fri, 14 Mar 2025 18:27:56 GMT
4
4
 
5
5
  $ds-asset-font-circular-family-name: "AS Circular";
6
6
  $ds-asset-font-circular-filename: "ASCircularWeb";
@@ -1,7 +1,7 @@
1
1
 
2
2
  /*
3
3
  Do not edit directly
4
- Generated on Tue, 11 Mar 2025 19:16:46 GMT
4
+ Generated on Fri, 14 Mar 2025 18:27:56 GMT
5
5
  */
6
6
 
7
7
  $auroTokens: (
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ * Generated on Fri, 14 Mar 2025 18:27:56 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ * Generated on Fri, 14 Mar 2025 18:27:56 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ * Generated on Fri, 14 Mar 2025 18:27:56 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -0,0 +1,154 @@
1
+ {
2
+ "color": {
3
+ "border": {
4
+ "bold": "#adadad",
5
+ "brand": "#d0d0d0",
6
+ "default": "#d0d0d0",
7
+ "divider": "#00000026",
8
+ "dividerInverse": "#ffffff66",
9
+ "inverse": "#ffffff",
10
+ "subtle": "#dddddd"
11
+ },
12
+ "brand": {
13
+ "primary": "#ce0c88",
14
+ "primaryBold": "#831a57",
15
+ "primaryMuted": "#fdf1f8",
16
+ "primarySubtle": "#f0a5d2",
17
+ "secondary": "#463c8f",
18
+ "secondaryBold": "#31295c",
19
+ "secondaryMuted": "#edeaf4",
20
+ "secondarySubtle": "#6b5da4",
21
+ "tertiary": "#ee453d",
22
+ "tertiaryBold": "#97322a",
23
+ "tertiaryMuted": "#ffeeea",
24
+ "tertiarySubtle": "#ff9080"
25
+ },
26
+ "farebrand": {
27
+ "basiceconomy": "#d0d0d0",
28
+ "businessFirst": "#463c8f",
29
+ "economy": "#ce0c88",
30
+ "premiumeconomy": "#00a5ba",
31
+ "oneworld": {
32
+ "emerald": "#139142",
33
+ "sapphire": "#015daa",
34
+ "ruby": "#a41d4a"
35
+ }
36
+ },
37
+ "pagebackground": {
38
+ "default": "#ffffff",
39
+ "utility": "#f2f2f2"
40
+ },
41
+ "status": {
42
+ "default": "#463c8f",
43
+ "error": "#e53339",
44
+ "errorSubtle": "#fddede",
45
+ "info": "#007db1",
46
+ "infoSubtle": "#e8f2f8",
47
+ "success": "#529325",
48
+ "successSubtle": "#e4f1da",
49
+ "warning": "#fac200",
50
+ "warningSubtle": "#fff6d1"
51
+ },
52
+ "surface": {
53
+ "accent1": "#dddddd",
54
+ "accent1Muted": "#f7f7f7",
55
+ "accent1Subtle": "#f2f2f2",
56
+ "accent2": "#dddddd",
57
+ "accent2Muted": "#f7f7f7",
58
+ "default": "#ffffff",
59
+ "inverse": "#463c8f",
60
+ "inverseSubtle": "#6b5da4",
61
+ "neutralMedium": "#dddddd",
62
+ "neutralSubtle": "#f7f7f7"
63
+ },
64
+ "texticon": {
65
+ "accent1": "#000000",
66
+ "default": "#000000",
67
+ "disabled": "#d0d0d0",
68
+ "inverse": "#ffffff",
69
+ "inverseDisabled": "#d0d0d0",
70
+ "muted": "#3d3d3d"
71
+ }
72
+ },
73
+ "component": {
74
+ "selected": {
75
+ "hover": "#31295c"
76
+ },
77
+ "focused": "#463c8f",
78
+ "inverseFocused": "#ffffff",
79
+ "background": "#ffffff",
80
+ "backgroundHover": "#f2f2f2",
81
+ "backgroundDisabled": "#dddddd",
82
+ "backgroundMuted": "#f7f7f7",
83
+ "backgroundStrong": "#7e7e7e",
84
+ "button": {
85
+ "primary": {
86
+ "text": "#ffffff",
87
+ "border": "#ce0c88",
88
+ "borderHover": "#831a57",
89
+ "background": "#ce0c88",
90
+ "backgroundHover": "#831a57",
91
+ "backgroundActive": "#831a57",
92
+ "textInverse": "#ce0c88",
93
+ "borderInverse": "#ffffff",
94
+ "backgroundInverse": "#ffffff",
95
+ "borderInverseHover": "#fdf1f8",
96
+ "backgroundInverseHover": "#fdf1f8"
97
+ },
98
+ "secondary": {
99
+ "text": "#ce0c88",
100
+ "textHover": "#463c8f",
101
+ "border": "#d0d0d0",
102
+ "borderHover": "#d0d0d0",
103
+ "background": "#ffffff",
104
+ "backgroundHover": "#f2f2f2",
105
+ "textInverse": "#ffffff",
106
+ "borderInverse": "#ffffff",
107
+ "backgroundInverseHover": "#0000000d"
108
+ },
109
+ "tertiary": {
110
+ "text": "#ce0c88",
111
+ "textHover": "#831a57",
112
+ "background": "#0000000d",
113
+ "backgroundHover": "#0000001a",
114
+ "border": "#0000000d",
115
+ "borderHover": "#0000001a",
116
+ "textInverse": "#ffffff",
117
+ "backgroundInverse": "#ffffff0d",
118
+ "backgroundInverseHover": "#ffffff1a",
119
+ "borderInverse": "#ffffff0d",
120
+ "borderInverseHover": "#ffffff1a"
121
+ }
122
+ },
123
+ "boolean": {
124
+ "indicator": "#ffffff",
125
+ "isFalse": "#ffffff",
126
+ "isFalseHover": "#f2f2f2",
127
+ "isFalseBorder": "#adadad",
128
+ "isTrue": "#ce0c88",
129
+ "isTrueHover": "#831a57",
130
+ "error": "#e53339",
131
+ "errorHover": "#b1161c"
132
+ }
133
+ },
134
+ "font": {
135
+ "weight": {
136
+ "display": "Semibold",
137
+ "body": {
138
+ "default": "Regular",
139
+ "large": "Regular",
140
+ "small": "Regular",
141
+ "xsmall": "Regular",
142
+ "xxsmall": "Regular"
143
+ },
144
+ "heading": {
145
+ "heading1": "Regular",
146
+ "heading2": "Regular",
147
+ "heading3": "Medium",
148
+ "heading4": "Medium",
149
+ "heading5": "Medium",
150
+ "heading6": "Medium"
151
+ }
152
+ }
153
+ }
154
+ }
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ * Generated on Fri, 14 Mar 2025 18:27:56 GMT
4
4
  */
5
5
 
6
6
  module.exports = {
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ // Generated on Fri, 14 Mar 2025 18:27:56 GMT
4
4
 
5
5
  $ds-color-border-bold: #adadad;
6
6
  $ds-color-border-brand: #d0d0d0;
@@ -1,7 +1,7 @@
1
1
 
2
2
  /*
3
3
  Do not edit directly
4
- Generated on Tue, 11 Mar 2025 19:16:46 GMT
4
+ Generated on Fri, 14 Mar 2025 18:27:56 GMT
5
5
  */
6
6
 
7
7
  $auroTokens: (
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ // Generated on Fri, 14 Mar 2025 18:27:56 GMT
4
4
 
5
5
  $hi-color-status-help-100: #e8f2f8;
6
6
  $hi-color-status-help-200: #dbe6f0;
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 11 Mar 2025 19:16:46 GMT
3
+ * Generated on Fri, 14 Mar 2025 18:27:56 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": "5.3.0",
3
+ "version": "5.3.1",
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",