@aurodesignsystem/design-tokens 5.2.0 → 5.3.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # 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)
+
+
+### Performance Improvements
+
+* updates to theme codes & docs ([df68c04](https://github.com/AlaskaAirlines/AuroDesignTokens/commit/df68c047af8793f4459692f8580bf4776a58fdef))
+
 # [5.2.0](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v5.1.0...v5.2.0) (2025-03-06)
 
 

package/README.md

@@ -95,16 +95,51 @@ 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
+
+The Auro Design System supports multiple themes that can be applied using the `data-aag-theme` attribute.
+
+### Implementation Example
+
+```html
+<!-- Alaska-themed section -->
+<div data-aag-theme="aag-theme-as">
+  <h1>Alaska Airlines Content</h1>
+  <!-- Elements here will use Alaska theme tokens -->
+</div>
+
+<!-- Hawaiian-themed section -->
+<div data-aag-theme="aag-theme-ha">
+  <h1>Hawaiian Airlines Content</h1>
+  <!-- Elements here will use Hawaiian theme tokens -->
+</div>
+```
+
+### Important Notes
+
+- The bundled CSS file (`CSSCustomProperties--bundled.css`) contains all themes rescoped with their respective `data-aag-theme` selectors
+- See the [Theme Data Attributes](#theme-data-attributes) table below for all available theme codes.
+
 ## Available Themes & Resources
 
-### Alaska Theme
+### Theme Data Attributes
+
+For theme scoping with CSS Custom Properties, use the following data attributes:
+
+| Theme         | Data Attribute                   | Theme Code |
+|---------------|----------------------------------|------------|
+| Alaska        | `data-aag-theme="aag-theme-as"`  | `as`       |
+| Alaska Classic| `data-aag-theme="aag-theme-asc"` | `asc`      |
+| Hawaiian      | `data-aag-theme="aag-theme-ha"`  | `ha`       |
+
+### Alaska
 
 | File                        | Syntax | Type               | Description                                           |
 |-----------------------------|--------|--------------------|-------------------------------------------------------|
 | CSSCustomProperties--alaska | CSS    | Custom properties  | All v5.x semantic tokens         |
 | primitives--alaska          | SCSS   | Sass variables     | All v5.x semantic token values   |
 
-### Alaska Classic Theme
+### Alaska Classic
 
 The Alaska Classic theme uses the `v5.x` token names with the deprecated Auro Classic values.
 
@@ -118,14 +153,14 @@ It serves as a gateway to the `v5.x` tokens, facilitating a smooth transition fo
 | SCSSVariables--alaskaClassic           | SCSS      | Sass variables     | All v5.x semantic tokens     |
 | SCSSVariablesMapFlat--alaskaClassic    | SCSS      | Sass variable map  | All v5.x semantic tokens as flat map |
 
-### Hawaiian Theme
+### Hawaiian
 
 | File                          | Syntax | Type               | Description                                           |
 |-------------------------------|--------|--------------------|-------------------------------------------------------|
 | CSSCustomProperties--hawaiian | CSS    | Custom properties  | All v5.x release tokens        |
 | primitives--hawaiian          | SCSS   | Sass variables     | All v5.x semantic token values |
 
-### Auro Classic Theme (Deprecated)
+### Auro Classic (Deprecated)
 
 | File                     | Syntax    | Type               | Filter Type / Description       |
 |--------------------------|-----------|--------------------|----------------------------------|
@@ -143,7 +178,7 @@ It serves as a gateway to the `v5.x` tokens, facilitating a smooth transition fo
 | SassCustomProperties     | SCSS      | Custom properties  | All v4.x release tokens         |
 | SassSizeCustomProperties | Sass      | Custom properties  | Filter v4.x: size, public       |
 
-### Transparent Theme (Deprecated)
+### Transparent (Deprecated)
 
 | File                                | Syntax    | Type               | Filter Type / Description |
 |-------------------------------------|-----------|--------------------|---------------------------|
@@ -153,7 +188,7 @@ It serves as a gateway to the `v5.x` tokens, facilitating a smooth transition fo
 
 | File                            | Syntax | Type              | Description                             |
 |---------------------------------|--------|-------------------|-----------------------------------------|
-| CSSCustomProperties--bundled.css | CSS    | Custom properties | Combined v5.x `semantic` CSS custom properties from all supported themes |
+| CSSCustomProperties--bundled.css | CSS    | Custom properties | Combined v5.x `semantic` CSS custom properties from all supported themes with their respective `data-aag-theme` selectors |
 
 **NOTE: Bundled file is not intended for general use.**
 
@@ -225,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}`
@@ -238,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:
@@ -264,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:
@@ -273,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 18:17:01 GMT
+  Generated on Tue, 11 Mar 2025 19:16:34 GMT
  */
 
 /* Properties from CSSCustomProperties--alaska.css */
@@ -58,6 +58,169 @@
   --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;
+  --ds-font-weight-body-xsmall: Book;
+  --ds-font-weight-body-xxsmall: Book;
+  --ds-font-weight-display: Light;
+  --ds-font-weight-heading-heading1: Book;
+  --ds-font-weight-heading-heading2: Book;
+  --ds-font-weight-heading-heading3: Medium;
+  --ds-font-weight-heading-heading4: Medium;
+  --ds-font-weight-heading-heading5: Medium;
+  --ds-font-weight-heading-heading6: Medium;
+}
+
+/* Properties from CSSCustomProperties--alaskaClassic.css */
+[data-aag-theme="aag-theme-asc"] {
+  --ds-color-border-bold: #585e67;
+  --ds-color-border-brand: #01426a;
+  --ds-color-border-default: #959595;
+  --ds-color-border-divider: #00000026;
+  --ds-color-border-divider-inverse: #ffffff66;
+  --ds-color-border-inverse: #ffffff;
+  --ds-color-border-subtle: #dddddd;
+  --ds-color-brand-primary: #0074ca;
+  --ds-color-brand-primary-bold: #003761;
+  --ds-color-brand-primary-muted: #ebf7ff;
+  --ds-color-brand-primary-subtle: #289bee;
+  --ds-color-brand-secondary: #01426a;
+  --ds-color-brand-secondary-bold: #00274a;
+  --ds-color-brand-secondary-muted: #ebf3f9;
+  --ds-color-brand-secondary-subtle: #2875b5;
+  --ds-color-brand-tertiary: #5de3f7;
+  --ds-color-brand-tertiary-bold: #18c3dd;
+  --ds-color-brand-tertiary-muted: #ebfafd;
+  --ds-color-brand-tertiary-subtle: #b4eff9;
+  --ds-color-farebrand-basiceconomy: #97eaf8;
+  --ds-color-farebrand-business-first: #00274a;
+  --ds-color-farebrand-economy: #0074ca;
+  --ds-color-farebrand-premiumeconomy: #005154;
+  --ds-color-farebrand-oneworld-emerald: #139142;
+  --ds-color-farebrand-oneworld-sapphire: #015daa;
+  --ds-color-farebrand-oneworld-ruby: #a41d4a;
+  --ds-color-pagebackground-default: #ffffff;
+  --ds-color-pagebackground-utility: #f7f8fa;
+  --ds-color-status-default: #afb9c6;
+  --ds-color-status-error: #e53339;
+  --ds-color-status-error-subtle: #fddede;
+  --ds-color-status-info: #007db1;
+  --ds-color-status-info-subtle: #e8f2f8;
+  --ds-color-status-success: #529325;
+  --ds-color-status-success-subtle: #e4f1da;
+  --ds-color-status-warning: #fac200;
+  --ds-color-status-warning-subtle: #fff6d1;
+  --ds-color-surface-accent1: #0074ca;
+  --ds-color-surface-accent1-muted: #ebf7ff;
+  --ds-color-surface-accent1-subtle: #289bee;
+  --ds-color-surface-accent2: #959595;
+  --ds-color-surface-accent2-muted: #c5c5c5;
+  --ds-color-surface-default: #ffffff;
+  --ds-color-surface-inverse: #01426a;
+  --ds-color-surface-inverse-subtle: #2875b5;
+  --ds-color-surface-neutral-medium: #c5c5c5;
+  --ds-color-surface-neutral-subtle: #f2f2f2;
+  --ds-color-texticon-accent1: #01426a;
+  --ds-color-texticon-default: #2a2a2a;
+  --ds-color-texticon-disabled: #d0d0d0;
+  --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;
@@ -127,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;
@@ -139,73 +349,4 @@
   --ds-font-weight-heading-heading4: Medium;
   --ds-font-weight-heading-heading5: Medium;
   --ds-font-weight-heading-heading6: Medium;
-}
-
-/* Properties from CSSCustomProperties--alaskaClassic.css */
-[data-aag-theme="aag-theme-ac"] {
-  --ds-color-border-bold: #585e67;
-  --ds-color-border-brand: #01426a;
-  --ds-color-border-default: #959595;
-  --ds-color-border-divider: #00000026;
-  --ds-color-border-divider-inverse: #ffffff66;
-  --ds-color-border-inverse: #ffffff;
-  --ds-color-border-subtle: #dddddd;
-  --ds-color-brand-primary: #0074ca;
-  --ds-color-brand-primary-bold: #003761;
-  --ds-color-brand-primary-muted: #ebf7ff;
-  --ds-color-brand-primary-subtle: #289bee;
-  --ds-color-brand-secondary: #01426a;
-  --ds-color-brand-secondary-bold: #00274a;
-  --ds-color-brand-secondary-muted: #ebf3f9;
-  --ds-color-brand-secondary-subtle: #2875b5;
-  --ds-color-brand-tertiary: #5de3f7;
-  --ds-color-brand-tertiary-bold: #18c3dd;
-  --ds-color-brand-tertiary-muted: #ebfafd;
-  --ds-color-brand-tertiary-subtle: #b4eff9;
-  --ds-color-farebrand-basiceconomy: #97eaf8;
-  --ds-color-farebrand-business-first: #00274a;
-  --ds-color-farebrand-economy: #0074ca;
-  --ds-color-farebrand-premiumeconomy: #005154;
-  --ds-color-farebrand-oneworld-emerald: #139142;
-  --ds-color-farebrand-oneworld-sapphire: #015daa;
-  --ds-color-farebrand-oneworld-ruby: #a41d4a;
-  --ds-color-pagebackground-default: #ffffff;
-  --ds-color-pagebackground-utility: #f7f8fa;
-  --ds-color-status-default: #afb9c6;
-  --ds-color-status-error: #e53339;
-  --ds-color-status-error-subtle: #fddede;
-  --ds-color-status-info: #007db1;
-  --ds-color-status-info-subtle: #e8f2f8;
-  --ds-color-status-success: #529325;
-  --ds-color-status-success-subtle: #e4f1da;
-  --ds-color-status-warning: #fac200;
-  --ds-color-status-warning-subtle: #fff6d1;
-  --ds-color-surface-accent1: #0074ca;
-  --ds-color-surface-accent1-muted: #ebf7ff;
-  --ds-color-surface-accent1-subtle: #289bee;
-  --ds-color-surface-accent2: #959595;
-  --ds-color-surface-accent2-muted: #c5c5c5;
-  --ds-color-surface-default: #ffffff;
-  --ds-color-surface-inverse: #01426a;
-  --ds-color-surface-inverse-subtle: #2875b5;
-  --ds-color-surface-neutral-medium: #c5c5c5;
-  --ds-color-surface-neutral-subtle: #f2f2f2;
-  --ds-color-texticon-accent1: #01426a;
-  --ds-color-texticon-default: #2a2a2a;
-  --ds-color-texticon-disabled: #d0d0d0;
-  --ds-color-texticon-inverse: #ffffff;
-  --ds-color-texticon-inverse-disabled: #d0d0d0;
-  --ds-color-texticon-muted: #676767;
-  --ds-font-weight-body-default: Book;
-  --ds-font-weight-body-large: Book;
-  --ds-font-weight-body-small: Book;
-  --ds-font-weight-body-xsmall: Book;
-  --ds-font-weight-body-xxsmall: Book;
-  --ds-font-weight-display: Light;
-  --ds-font-weight-heading-heading1: Book;
-  --ds-font-weight-heading-heading2: Book;
-  --ds-font-weight-heading-heading3: Medium;
-  --ds-font-weight-heading-heading4: Medium;
-  --ds-font-weight-heading-heading5: Medium;
-  --ds-font-weight-heading-heading6: Medium;
 }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 06 Mar 2025 18:17: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;