@aurodesignsystem/design-tokens 5.2.1 → 5.3.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Semantic Release Automated Changelog
 
+# [5.3.0](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v5.2.1...v5.3.0) (2025-03-11)
+
+
+### Features
+
+* add initial component tokens ([b1752ec](https://github.com/AlaskaAirlines/AuroDesignTokens/commit/b1752ec674c6cddda86a9ba2c826af7b43a20d53))
+
 ## [5.2.1](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v5.2.0...v5.2.1) (2025-03-06)
 
 

package/README.md

@@ -95,7 +95,7 @@ Using the `https://cdn.jsdelivr.net/npm/` CDN:
 
 **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.
 
-## Theme Scoping with `data-aag-theme`
+## Theme Scoping with data-aag-theme
 
 The Auro Design System supports multiple themes that can be applied using the `data-aag-theme` attribute.
 
@@ -260,7 +260,13 @@ The tokens in the `themes` directory (`src/themes/alaska/`, `src/themes/hawaiian
 - Provide usage descriptions explaining their intended context
 - Are marked as `"public": true` for use in components
 
-#### 4. Multi-level Semantic References
+#### 4. Component Tokens: UI Element Styling
+
+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.
+
+These component tokens reference semantic tokens and create a higher-level abstraction specifically for UI components.
+
+#### 5. Multi-level Semantic References
 
 Semantic tokens can reference other semantic tokens, not just primitives:
 - For example, `font.weight.heading.heading1` can reference `{font.weight.book.value}`
@@ -273,22 +279,6 @@ Semantic tokens can reference other semantic tokens, not just primitives:
 
 UI components should never directly use primitives (either `base` or theme-specific).
 
-Instead, always use semantic theme tokens:
-
-```css
-/* ❌ Incorrect: Using primitives directly */
-.element {
-  color: var(--ds-color-atlas-600);           /* Theme-specific primitive */
-  background-color: var(--ds-color-gray-100); /* Base primitive */
-}
-
-/* ✅ Correct: Using semantic theme tokens */
-.element {
-  color: var(--ds-color-brand-primary);
-  background-color: var(--ds-color-surface-neutralSubtle);
-}
-```
-
 ### Benefits of This Architecture
 
 This three-tiered approach provides several advantages:
@@ -299,8 +289,6 @@ This three-tiered approach provides several advantages:
 4. **Design Consistency**: Related UI elements share the same semantic tokens across different contexts
 5. **Clear Migration Path**: Supports multiple versions during transition periods
 
-
-
 ## Migration from v4.x to v5.x
 
 With the release of Auro Design Tokens 5.x significant changes have occurred:
@@ -308,6 +296,7 @@ With the release of Auro Design Tokens 5.x significant changes have occurred:
 - `./dist/` directory has been restructured. All file imports will need to have their paths updated.
 - 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.
 - **NEW** Alaska theme found in `./dist/alaska`.
+- **NEW** Alaska Classic theme found in `./dist/alaska-classic`.
 - **NEW** Hawaiian theme found in `./dist/hawaiian`.
 - 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.
 - 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.

package/dist/CSSCustomProperties--bundled.css

@@ -1,6 +1,6 @@
 /**
   Do not edit directly
-  Generated on Thu, 06 Mar 2025 21:22:02 GMT
+  Generated on Tue, 11 Mar 2025 19:16:34 GMT
  */
 
 /* Properties from CSSCustomProperties--alaska.css */
@@ -58,6 +58,53 @@
   --ds-color-texticon-inverse: #ffffff;
   --ds-color-texticon-inverse-disabled: #d0d0d0;
   --ds-color-texticon-muted: #676767;
+  --ds-component-selected-hover: #00274a;
+  --ds-component-focused: #01426a;
+  --ds-component-inverse-focused: #ffffff;
+  --ds-component-background: #ffffff;
+  --ds-component-background-hover: #f2f2f2;
+  --ds-component-background-disabled: #dddddd;
+  --ds-component-background-muted: #f7f7f7;
+  --ds-component-background-strong: #7e7e7e;
+  --ds-component-button-primary-text: #ffffff;
+  --ds-component-button-primary-border: #01426a;
+  --ds-component-button-primary-border-hover: #00274a;
+  --ds-component-button-primary-background: #01426a;
+  --ds-component-button-primary-background-hover: #00274a;
+  --ds-component-button-primary-background-active: #00274a;
+  --ds-component-button-primary-text-inverse: #01426a;
+  --ds-component-button-primary-border-inverse: #ffffff;
+  --ds-component-button-primary-background-inverse: #ffffff;
+  --ds-component-button-primary-border-inverse-hover: #ebf3f9;
+  --ds-component-button-primary-background-inverse-hover: #ebf3f9;
+  --ds-component-button-secondary-text: #01426a;
+  --ds-component-button-secondary-text-hover: #00274a;
+  --ds-component-button-secondary-border: #01426a;
+  --ds-component-button-secondary-border-hover: #00274a;
+  --ds-component-button-secondary-background: #ffffffcc;
+  --ds-component-button-secondary-background-hover: #ffffff80;
+  --ds-component-button-secondary-text-inverse: #ffffff;
+  --ds-component-button-secondary-border-inverse: #ffffff;
+  --ds-component-button-secondary-background-inverse-hover: #ffffffcc;
+  --ds-component-button-tertiary-text: #01426a;
+  --ds-component-button-tertiary-text-hover: #00274a;
+  --ds-component-button-tertiary-background: #0000000d;
+  --ds-component-button-tertiary-background-hover: #0000001a;
+  --ds-component-button-tertiary-border: #0000000d;
+  --ds-component-button-tertiary-border-hover: #0000001a;
+  --ds-component-button-tertiary-text-inverse: #ffffff;
+  --ds-component-button-tertiary-background-inverse: #ffffff0d;
+  --ds-component-button-tertiary-background-inverse-hover: #ffffff1a;
+  --ds-component-button-tertiary-border-inverse: #ffffff0d;
+  --ds-component-button-tertiary-border-inverse-hover: #ffffff1a;
+  --ds-component-boolean-indicator: #ffffff;
+  --ds-component-boolean-is-false: #ffffff;
+  --ds-component-boolean-is-false-hover: #f2f2f2;
+  --ds-component-boolean-is-false-border: #585e67;
+  --ds-component-boolean-is-true: #01426a;
+  --ds-component-boolean-is-true-hover: #00274a;
+  --ds-component-boolean-error: #e53339;
+  --ds-component-boolean-error-hover: #b1161c;
   --ds-font-weight-body-default: Book;
   --ds-font-weight-body-large: Book;
   --ds-font-weight-body-small: Book;
@@ -127,6 +174,53 @@
   --ds-color-texticon-inverse: #ffffff;
   --ds-color-texticon-inverse-disabled: #d0d0d0;
   --ds-color-texticon-muted: #676767;
+  --ds-component-selected-hover: #003761;
+  --ds-component-focused: #0074ca;
+  --ds-component-inverse-focused: #5de3f7;
+  --ds-component-background: #ffffff;
+  --ds-component-background-hover: #f2f2f2;
+  --ds-component-background-disabled: #dddddd;
+  --ds-component-background-muted: #f7f7f7;
+  --ds-component-background-strong: #7e7e7e;
+  --ds-component-button-primary-text: #ffffff;
+  --ds-component-button-primary-border: #0074ca;
+  --ds-component-button-primary-border-hover: #003761;
+  --ds-component-button-primary-background: #0074ca;
+  --ds-component-button-primary-background-hover: #003761;
+  --ds-component-button-primary-background-active: #003761;
+  --ds-component-button-primary-text-inverse: #2a2a2a;
+  --ds-component-button-primary-border-inverse: #5de3f7;
+  --ds-component-button-primary-background-inverse: #5de3f7;
+  --ds-component-button-primary-border-inverse-hover: #b4eff9;
+  --ds-component-button-primary-background-inverse-hover: #b4eff9;
+  --ds-component-button-secondary-text: #0074ca;
+  --ds-component-button-secondary-text-hover: #01426a;
+  --ds-component-button-secondary-border: #0074ca;
+  --ds-component-button-secondary-border-hover: #003761;
+  --ds-component-button-secondary-background: #ffffff;
+  --ds-component-button-secondary-background-hover: #f2f2f2;
+  --ds-component-button-secondary-text-inverse: #5de3f7;
+  --ds-component-button-secondary-border-inverse: #5de3f7;
+  --ds-component-button-secondary-background-inverse-hover: #ebfafd;
+  --ds-component-button-tertiary-text: #0074ca;
+  --ds-component-button-tertiary-text-hover: #003761;
+  --ds-component-button-tertiary-background: #0000000d;
+  --ds-component-button-tertiary-background-hover: #0000001a;
+  --ds-component-button-tertiary-border: #0000000d;
+  --ds-component-button-tertiary-border-hover: #0000001a;
+  --ds-component-button-tertiary-text-inverse: #5de3f7;
+  --ds-component-button-tertiary-background-inverse: #ffffff0d;
+  --ds-component-button-tertiary-background-inverse-hover: #ffffff1a;
+  --ds-component-button-tertiary-border-inverse: #ffffff0d;
+  --ds-component-button-tertiary-border-inverse-hover: #ffffff1a;
+  --ds-component-boolean-indicator: #ffffff;
+  --ds-component-boolean-is-false: #ffffff;
+  --ds-component-boolean-is-false-hover: #f2f2f2;
+  --ds-component-boolean-is-false-border: #585e67;
+  --ds-component-boolean-is-true: #0074ca;
+  --ds-component-boolean-is-true-hover: #003761;
+  --ds-component-boolean-error: #e53339;
+  --ds-component-boolean-error-hover: #b1161c;
   --ds-font-weight-body-default: Book;
   --ds-font-weight-body-large: Book;
   --ds-font-weight-body-small: Book;
@@ -196,6 +290,53 @@
   --ds-color-texticon-inverse: #ffffff;
   --ds-color-texticon-inverse-disabled: #d0d0d0;
   --ds-color-texticon-muted: #3d3d3d;
+  --ds-component-selected-hover: #31295c;
+  --ds-component-focused: #463c8f;
+  --ds-component-inverse-focused: #ffffff;
+  --ds-component-background: #ffffff;
+  --ds-component-background-hover: #f2f2f2;
+  --ds-component-background-disabled: #dddddd;
+  --ds-component-background-muted: #f7f7f7;
+  --ds-component-background-strong: #7e7e7e;
+  --ds-component-button-primary-text: #ffffff;
+  --ds-component-button-primary-border: #ce0c88;
+  --ds-component-button-primary-border-hover: #831a57;
+  --ds-component-button-primary-background: #ce0c88;
+  --ds-component-button-primary-background-hover: #831a57;
+  --ds-component-button-primary-background-active: #831a57;
+  --ds-component-button-primary-text-inverse: #ce0c88;
+  --ds-component-button-primary-border-inverse: #ffffff;
+  --ds-component-button-primary-background-inverse: #ffffff;
+  --ds-component-button-primary-border-inverse-hover: #fdf1f8;
+  --ds-component-button-primary-background-inverse-hover: #fdf1f8;
+  --ds-component-button-secondary-text: #ce0c88;
+  --ds-component-button-secondary-text-hover: #463c8f;
+  --ds-component-button-secondary-border: #d0d0d0;
+  --ds-component-button-secondary-border-hover: #d0d0d0;
+  --ds-component-button-secondary-background: #ffffff;
+  --ds-component-button-secondary-background-hover: #f2f2f2;
+  --ds-component-button-secondary-text-inverse: #ffffff;
+  --ds-component-button-secondary-border-inverse: #ffffff;
+  --ds-component-button-secondary-background-inverse-hover: #0000000d;
+  --ds-component-button-tertiary-text: #ce0c88;
+  --ds-component-button-tertiary-text-hover: #831a57;
+  --ds-component-button-tertiary-background: #0000000d;
+  --ds-component-button-tertiary-background-hover: #0000001a;
+  --ds-component-button-tertiary-border: #0000000d;
+  --ds-component-button-tertiary-border-hover: #0000001a;
+  --ds-component-button-tertiary-text-inverse: #ffffff;
+  --ds-component-button-tertiary-background-inverse: #ffffff0d;
+  --ds-component-button-tertiary-background-inverse-hover: #ffffff1a;
+  --ds-component-button-tertiary-border-inverse: #ffffff0d;
+  --ds-component-button-tertiary-border-inverse-hover: #ffffff1a;
+  --ds-component-boolean-indicator: #ffffff;
+  --ds-component-boolean-is-false: #ffffff;
+  --ds-component-boolean-is-false-hover: #f2f2f2;
+  --ds-component-boolean-is-false-border: #adadad;
+  --ds-component-boolean-is-true: #ce0c88;
+  --ds-component-boolean-is-true-hover: #831a57;
+  --ds-component-boolean-error: #e53339;
+  --ds-component-boolean-error-hover: #b1161c;
   --ds-font-weight-display: Semibold;
   --ds-font-weight-body-default: Regular;
   --ds-font-weight-body-large: Regular;

package/dist/alaska/CSSCustomProperties--alaska.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 06 Mar 2025 21:22:14 GMT
+ * Generated on Tue, 11 Mar 2025 19:16:46 GMT
  */
 
 :root {
@@ -57,6 +57,53 @@
   --ds-color-texticon-inverse: #ffffff;
   --ds-color-texticon-inverse-disabled: #d0d0d0;
   --ds-color-texticon-muted: #676767;
+  --ds-component-selected-hover: #00274a;
+  --ds-component-focused: #01426a;
+  --ds-component-inverse-focused: #ffffff;
+  --ds-component-background: #ffffff;
+  --ds-component-background-hover: #f2f2f2;
+  --ds-component-background-disabled: #dddddd;
+  --ds-component-background-muted: #f7f7f7;
+  --ds-component-background-strong: #7e7e7e;
+  --ds-component-button-primary-text: #ffffff;
+  --ds-component-button-primary-border: #01426a;
+  --ds-component-button-primary-border-hover: #00274a;
+  --ds-component-button-primary-background: #01426a;
+  --ds-component-button-primary-background-hover: #00274a;
+  --ds-component-button-primary-background-active: #00274a;
+  --ds-component-button-primary-text-inverse: #01426a;
+  --ds-component-button-primary-border-inverse: #ffffff;
+  --ds-component-button-primary-background-inverse: #ffffff;
+  --ds-component-button-primary-border-inverse-hover: #ebf3f9;
+  --ds-component-button-primary-background-inverse-hover: #ebf3f9;
+  --ds-component-button-secondary-text: #01426a;
+  --ds-component-button-secondary-text-hover: #00274a;
+  --ds-component-button-secondary-border: #01426a;
+  --ds-component-button-secondary-border-hover: #00274a;
+  --ds-component-button-secondary-background: #ffffffcc;
+  --ds-component-button-secondary-background-hover: #ffffff80;
+  --ds-component-button-secondary-text-inverse: #ffffff;
+  --ds-component-button-secondary-border-inverse: #ffffff;
+  --ds-component-button-secondary-background-inverse-hover: #ffffffcc;
+  --ds-component-button-tertiary-text: #01426a;
+  --ds-component-button-tertiary-text-hover: #00274a;
+  --ds-component-button-tertiary-background: #0000000d;
+  --ds-component-button-tertiary-background-hover: #0000001a;
+  --ds-component-button-tertiary-border: #0000000d;
+  --ds-component-button-tertiary-border-hover: #0000001a;
+  --ds-component-button-tertiary-text-inverse: #ffffff;
+  --ds-component-button-tertiary-background-inverse: #ffffff0d;
+  --ds-component-button-tertiary-background-inverse-hover: #ffffff1a;
+  --ds-component-button-tertiary-border-inverse: #ffffff0d;
+  --ds-component-button-tertiary-border-inverse-hover: #ffffff1a;
+  --ds-component-boolean-indicator: #ffffff;
+  --ds-component-boolean-is-false: #ffffff;
+  --ds-component-boolean-is-false-hover: #f2f2f2;
+  --ds-component-boolean-is-false-border: #585e67;
+  --ds-component-boolean-is-true: #01426a;
+  --ds-component-boolean-is-true-hover: #00274a;
+  --ds-component-boolean-error: #e53339;
+  --ds-component-boolean-error-hover: #b1161c;
   --ds-font-weight-body-default: Book;
   --ds-font-weight-body-large: Book;
   --ds-font-weight-body-small: Book;