@aurodesignsystem/design-tokens 5.1.0 → 5.2.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.
- package/CHANGELOG.md +14 -0
- package/README.md +64 -9
- package/dist/CSSCustomProperties--bundled.css +75 -6
- package/dist/alaska/CSSCustomProperties--alaska.css +1 -1
- package/dist/alaska/JSObject--allTokens.js +1 -1
- package/dist/alaska/SCSSVariables--alaska.scss +1 -1
- package/dist/alaska/SCSSVariablesMapFlat--alaska.scss +1 -1
- package/dist/alaska/primitives--alaska.scss +1 -1
- package/dist/alaska-classic/CSSCustomProperties--alaskaClassic.css +1 -1
- package/dist/alaska-classic/JSObject--allTokens.js +1 -1
- package/dist/alaska-classic/SCSSVariables--alaskaClassic.scss +1 -1
- package/dist/alaska-classic/SCSSVariablesMapFlat--alaskaClassic.scss +1 -1
- package/dist/alaska-classic/primitives--alaskaClassic.scss +1 -1
- package/dist/auro-classic/CSSCustomProperties.css +1 -1
- package/dist/auro-classic/CSSSizeCustomProperties.css +1 -1
- package/dist/auro-classic/JSData--color.js +1 -1
- package/dist/auro-classic/JSObject--allTokens.js +1 -1
- package/dist/auro-classic/JSObject--deprecated.js +1 -1
- package/dist/auro-classic/JSVariables--color.js +1 -1
- package/dist/auro-classic/SCSSVariableMap.scss +1 -1
- package/dist/auro-classic/SCSSVariables.scss +1 -1
- package/dist/auro-classic/SCSSVariablesMapFlat.scss +1 -1
- package/dist/auro-classic/SassCustomProperties.scss +1 -1
- package/dist/auro-classic/SassSizeCustomProperties.scss +1 -1
- package/dist/hawaiian/CSSCustomProperties--hawaiian.css +1 -1
- package/dist/hawaiian/JSObject--allTokens.js +1 -1
- package/dist/hawaiian/SCSSVariables--hawaiian.scss +1 -1
- package/dist/hawaiian/SCSSVariablesMapFlat--hawaiian.scss +1 -1
- package/dist/hawaiian/primitives--hawaiian.scss +1 -1
- package/dist/transparent/CSSCustomProperties--transparent.css +1 -1
- package/package.json +1 -1
- package/src/config/constants.js +14 -0
- package/src/config/themes.js +21 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# Semantic Release Automated Changelog
|
|
2
2
|
|
|
3
|
+
## [5.2.1](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v5.2.0...v5.2.1) (2025-03-06)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Performance Improvements
|
|
7
|
+
|
|
8
|
+
* updates to theme codes & docs ([df68c04](https://github.com/AlaskaAirlines/AuroDesignTokens/commit/df68c047af8793f4459692f8580bf4776a58fdef))
|
|
9
|
+
|
|
10
|
+
# [5.2.0](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v5.1.0...v5.2.0) (2025-03-06)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
* update data selector for transformCSS ([3aad137](https://github.com/AlaskaAirlines/AuroDesignTokens/commit/3aad137f08ac398af8ea1fb3b876410c49122704))
|
|
16
|
+
|
|
3
17
|
# [5.1.0](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v5.0.6...v5.1.0) (2025-03-06)
|
|
4
18
|
|
|
5
19
|
|
package/README.md
CHANGED
|
@@ -25,6 +25,12 @@ The npm package provides pre-processed resources in the `./dist/` directory:
|
|
|
25
25
|
├── alaska
|
|
26
26
|
│ └── CSSCustomProperties--alaska.css
|
|
27
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
|
|
28
34
|
├── auro-classic
|
|
29
35
|
│ ├── CSSCustomProperties.css
|
|
30
36
|
│ ├── CSSSizeCustomProperties.css
|
|
@@ -89,23 +95,72 @@ Using the `https://cdn.jsdelivr.net/npm/` CDN:
|
|
|
89
95
|
|
|
90
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.
|
|
91
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 -->
|
|
106
|
+
<div data-aag-theme="aag-theme-as">
|
|
107
|
+
<h1>Alaska Airlines Content</h1>
|
|
108
|
+
<!-- Elements here will use Alaska theme tokens -->
|
|
109
|
+
</div>
|
|
110
|
+
|
|
111
|
+
<!-- Hawaiian-themed section -->
|
|
112
|
+
<div data-aag-theme="aag-theme-ha">
|
|
113
|
+
<h1>Hawaiian Airlines Content</h1>
|
|
114
|
+
<!-- Elements here will use Hawaiian theme tokens -->
|
|
115
|
+
</div>
|
|
116
|
+
```
|
|
117
|
+
|
|
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
|
+
|
|
92
123
|
## Available Themes & Resources
|
|
93
124
|
|
|
94
|
-
###
|
|
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
|
|
95
136
|
|
|
96
137
|
| File | Syntax | Type | Description |
|
|
97
138
|
|-----------------------------|--------|--------------------|-------------------------------------------------------|
|
|
98
|
-
| CSSCustomProperties--alaska | CSS | Custom properties | All v5.x semantic tokens
|
|
99
|
-
| primitives--alaska | SCSS | Sass variables | All v5.x semantic token values
|
|
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 |
|
|
100
155
|
|
|
101
|
-
### Hawaiian
|
|
156
|
+
### Hawaiian
|
|
102
157
|
|
|
103
158
|
| File | Syntax | Type | Description |
|
|
104
159
|
|-------------------------------|--------|--------------------|-------------------------------------------------------|
|
|
105
|
-
| CSSCustomProperties--hawaiian | CSS | Custom properties | All v5.x release tokens
|
|
106
|
-
| primitives--hawaiian | SCSS | Sass variables | All v5.x semantic token values
|
|
160
|
+
| CSSCustomProperties--hawaiian | CSS | Custom properties | All v5.x release tokens |
|
|
161
|
+
| primitives--hawaiian | SCSS | Sass variables | All v5.x semantic token values |
|
|
107
162
|
|
|
108
|
-
### Auro Classic
|
|
163
|
+
### Auro Classic (Deprecated)
|
|
109
164
|
|
|
110
165
|
| File | Syntax | Type | Filter Type / Description |
|
|
111
166
|
|--------------------------|-----------|--------------------|----------------------------------|
|
|
@@ -123,7 +178,7 @@ Using the `https://cdn.jsdelivr.net/npm/` CDN:
|
|
|
123
178
|
| SassCustomProperties | SCSS | Custom properties | All v4.x release tokens |
|
|
124
179
|
| SassSizeCustomProperties | Sass | Custom properties | Filter v4.x: size, public |
|
|
125
180
|
|
|
126
|
-
### Transparent
|
|
181
|
+
### Transparent (Deprecated)
|
|
127
182
|
|
|
128
183
|
| File | Syntax | Type | Filter Type / Description |
|
|
129
184
|
|-------------------------------------|-----------|--------------------|---------------------------|
|
|
@@ -133,7 +188,7 @@ Using the `https://cdn.jsdelivr.net/npm/` CDN:
|
|
|
133
188
|
|
|
134
189
|
| File | Syntax | Type | Description |
|
|
135
190
|
|---------------------------------|--------|-------------------|-----------------------------------------|
|
|
136
|
-
| CSSCustomProperties--bundled.css | CSS | Custom properties | Combined v5.x `semantic` CSS custom properties from all supported themes |
|
|
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 |
|
|
137
192
|
|
|
138
193
|
**NOTE: Bundled file is not intended for general use.**
|
|
139
194
|
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
Do not edit directly
|
|
3
|
+
Generated on Thu, 06 Mar 2025 21:22:02 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
/* Properties from CSSCustomProperties--alaska.css */
|
|
7
|
-
[aag-theme="aag-theme-as"] {
|
|
7
|
+
[data-aag-theme="aag-theme-as"] {
|
|
8
8
|
--ds-color-border-bold: #585e67;
|
|
9
9
|
--ds-color-border-brand: #01426a;
|
|
10
10
|
--ds-color-border-default: #959595;
|
|
@@ -69,11 +69,80 @@
|
|
|
69
69
|
--ds-font-weight-heading-heading3: Medium;
|
|
70
70
|
--ds-font-weight-heading-heading4: Medium;
|
|
71
71
|
--ds-font-weight-heading-heading5: Medium;
|
|
72
|
-
--ds-font-weight-heading-heading6: Medium;
|
|
72
|
+
--ds-font-weight-heading-heading6: Medium;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* Properties from CSSCustomProperties--alaskaClassic.css */
|
|
76
|
+
[data-aag-theme="aag-theme-asc"] {
|
|
77
|
+
--ds-color-border-bold: #585e67;
|
|
78
|
+
--ds-color-border-brand: #01426a;
|
|
79
|
+
--ds-color-border-default: #959595;
|
|
80
|
+
--ds-color-border-divider: #00000026;
|
|
81
|
+
--ds-color-border-divider-inverse: #ffffff66;
|
|
82
|
+
--ds-color-border-inverse: #ffffff;
|
|
83
|
+
--ds-color-border-subtle: #dddddd;
|
|
84
|
+
--ds-color-brand-primary: #0074ca;
|
|
85
|
+
--ds-color-brand-primary-bold: #003761;
|
|
86
|
+
--ds-color-brand-primary-muted: #ebf7ff;
|
|
87
|
+
--ds-color-brand-primary-subtle: #289bee;
|
|
88
|
+
--ds-color-brand-secondary: #01426a;
|
|
89
|
+
--ds-color-brand-secondary-bold: #00274a;
|
|
90
|
+
--ds-color-brand-secondary-muted: #ebf3f9;
|
|
91
|
+
--ds-color-brand-secondary-subtle: #2875b5;
|
|
92
|
+
--ds-color-brand-tertiary: #5de3f7;
|
|
93
|
+
--ds-color-brand-tertiary-bold: #18c3dd;
|
|
94
|
+
--ds-color-brand-tertiary-muted: #ebfafd;
|
|
95
|
+
--ds-color-brand-tertiary-subtle: #b4eff9;
|
|
96
|
+
--ds-color-farebrand-basiceconomy: #97eaf8;
|
|
97
|
+
--ds-color-farebrand-business-first: #00274a;
|
|
98
|
+
--ds-color-farebrand-economy: #0074ca;
|
|
99
|
+
--ds-color-farebrand-premiumeconomy: #005154;
|
|
100
|
+
--ds-color-farebrand-oneworld-emerald: #139142;
|
|
101
|
+
--ds-color-farebrand-oneworld-sapphire: #015daa;
|
|
102
|
+
--ds-color-farebrand-oneworld-ruby: #a41d4a;
|
|
103
|
+
--ds-color-pagebackground-default: #ffffff;
|
|
104
|
+
--ds-color-pagebackground-utility: #f7f8fa;
|
|
105
|
+
--ds-color-status-default: #afb9c6;
|
|
106
|
+
--ds-color-status-error: #e53339;
|
|
107
|
+
--ds-color-status-error-subtle: #fddede;
|
|
108
|
+
--ds-color-status-info: #007db1;
|
|
109
|
+
--ds-color-status-info-subtle: #e8f2f8;
|
|
110
|
+
--ds-color-status-success: #529325;
|
|
111
|
+
--ds-color-status-success-subtle: #e4f1da;
|
|
112
|
+
--ds-color-status-warning: #fac200;
|
|
113
|
+
--ds-color-status-warning-subtle: #fff6d1;
|
|
114
|
+
--ds-color-surface-accent1: #0074ca;
|
|
115
|
+
--ds-color-surface-accent1-muted: #ebf7ff;
|
|
116
|
+
--ds-color-surface-accent1-subtle: #289bee;
|
|
117
|
+
--ds-color-surface-accent2: #959595;
|
|
118
|
+
--ds-color-surface-accent2-muted: #c5c5c5;
|
|
119
|
+
--ds-color-surface-default: #ffffff;
|
|
120
|
+
--ds-color-surface-inverse: #01426a;
|
|
121
|
+
--ds-color-surface-inverse-subtle: #2875b5;
|
|
122
|
+
--ds-color-surface-neutral-medium: #c5c5c5;
|
|
123
|
+
--ds-color-surface-neutral-subtle: #f2f2f2;
|
|
124
|
+
--ds-color-texticon-accent1: #01426a;
|
|
125
|
+
--ds-color-texticon-default: #2a2a2a;
|
|
126
|
+
--ds-color-texticon-disabled: #d0d0d0;
|
|
127
|
+
--ds-color-texticon-inverse: #ffffff;
|
|
128
|
+
--ds-color-texticon-inverse-disabled: #d0d0d0;
|
|
129
|
+
--ds-color-texticon-muted: #676767;
|
|
130
|
+
--ds-font-weight-body-default: Book;
|
|
131
|
+
--ds-font-weight-body-large: Book;
|
|
132
|
+
--ds-font-weight-body-small: Book;
|
|
133
|
+
--ds-font-weight-body-xsmall: Book;
|
|
134
|
+
--ds-font-weight-body-xxsmall: Book;
|
|
135
|
+
--ds-font-weight-display: Light;
|
|
136
|
+
--ds-font-weight-heading-heading1: Book;
|
|
137
|
+
--ds-font-weight-heading-heading2: Book;
|
|
138
|
+
--ds-font-weight-heading-heading3: Medium;
|
|
139
|
+
--ds-font-weight-heading-heading4: Medium;
|
|
140
|
+
--ds-font-weight-heading-heading5: Medium;
|
|
141
|
+
--ds-font-weight-heading-heading6: Medium;
|
|
73
142
|
}
|
|
74
143
|
|
|
75
144
|
/* Properties from CSSCustomProperties--hawaiian.css */
|
|
76
|
-
[aag-theme="aag-theme-ha"] {
|
|
145
|
+
[data-aag-theme="aag-theme-ha"] {
|
|
77
146
|
--ds-color-border-bold: #adadad;
|
|
78
147
|
--ds-color-border-brand: #d0d0d0;
|
|
79
148
|
--ds-color-border-default: #d0d0d0;
|
|
@@ -138,5 +207,5 @@
|
|
|
138
207
|
--ds-font-weight-heading-heading3: Medium;
|
|
139
208
|
--ds-font-weight-heading-heading4: Medium;
|
|
140
209
|
--ds-font-weight-heading-heading5: Medium;
|
|
141
|
-
--ds-font-weight-heading-heading6: Medium;
|
|
210
|
+
--ds-font-weight-heading-heading6: Medium;
|
|
142
211
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aurodesignsystem/design-tokens",
|
|
3
|
-
"version": "5.1
|
|
3
|
+
"version": "5.2.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",
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Build Constants
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
export const PATHS = {
|
|
6
|
+
DIST: './dist',
|
|
7
|
+
SRC: './src'
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export const CSS = {
|
|
11
|
+
TARGET_FILE_PATTERN: 'CSSCustomProperties',
|
|
12
|
+
BUNDLED_FILE_NAME: 'CSSCustomProperties--bundled.css',
|
|
13
|
+
ROOT_SELECTOR: ':root'
|
|
14
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Themes Config
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
export const THEME_DIRECTORIES = [
|
|
6
|
+
{ dir: 'alaska', name: 'Alaska', code: 'as' },
|
|
7
|
+
{ dir: 'alaska-classic', name: 'Alaska Classic', code: 'asc' },
|
|
8
|
+
{ dir: 'hawaiian', name: 'Hawaiian', code: 'ha' }
|
|
9
|
+
];
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* Helper functions
|
|
13
|
+
*/
|
|
14
|
+
export const getThemeByCode = (code) =>
|
|
15
|
+
THEME_DIRECTORIES.find(theme => theme.code === code);
|
|
16
|
+
|
|
17
|
+
export const getThemeByDir = (dir) =>
|
|
18
|
+
THEME_DIRECTORIES.find(theme => theme.dir === dir);
|
|
19
|
+
|
|
20
|
+
export const getThemeAttribute = (code) =>
|
|
21
|
+
`data-aag-theme="aag-theme-${code}"`;
|