@aurodesignsystem/design-tokens 5.0.6 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Semantic Release Automated Changelog
 
+# [5.2.0](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v5.1.0...v5.2.0) (2025-03-06)
+
+
+### Features
+
+* update data selector for transformCSS ([3aad137](https://github.com/AlaskaAirlines/AuroDesignTokens/commit/3aad137f08ac398af8ea1fb3b876410c49122704))
+
+# [5.1.0](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v5.0.6...v5.1.0) (2025-03-06)
+
+
+### Features
+
+* edit existing and add new primitive color tokens [#220](https://github.com/AlaskaAirlines/AuroDesignTokens/issues/220) ([2a2e438](https://github.com/AlaskaAirlines/AuroDesignTokens/commit/2a2e43823fd0468a542a28000082d3a2eba7d98f))
+* edit existing and add new theme color tokens [#221](https://github.com/AlaskaAirlines/AuroDesignTokens/issues/221) ([1e3018d](https://github.com/AlaskaAirlines/AuroDesignTokens/commit/1e3018d24d389c3b85fbd3b0261472abb1420775))
+
 ## [5.0.6](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v5.0.5...v5.0.6) (2025-03-04)
 
 

package/README.md

@@ -1,28 +1,41 @@
 # Auro Design Tokens
 
-## Installation
-
 [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/AuroDesignTokens/testPublish.yml?branch=master&style=for-the-badge)](https://github.com/AlaskaAirlines/AuroDesignTokens/actions/workflows/testPublish.yml)
 [![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)
 [![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)
 
+## Introduction
+
+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.
+
+## Installation
+
 ```
 $ npm i @aurodesignsystem/design-tokens
 ```
 
-## Using Pre-processed Resources
+### Package Structure
 
-Pre-processed resources are available in the `./dist/` directory of the [npm package](https://www.npmjs.com/package/@aurodesignsystem/design-tokens).
+The npm package provides pre-processed resources in the `./dist/` directory:
 
 ```
 └── dist
    ├── alaska
    │   └── CSSCustomProperties--alaska.css
    │   └── primitives--alaska.scss
+   ├── alaska-classic
+   │   ├── CSSCustomProperties--alaskaClassic.css
+   │   ├── JSObject--allTokens.js
+   │   ├── primitives--alaskaClassic.scss
+   │   ├── SCSSVariables--alaskaClassic.scss
+   │   └── SCSSVariablesMapFlat--alaskaClassic.scss
    ├── auro-classic
    │   ├── CSSCustomProperties.css
    │   ├── CSSSizeCustomProperties.css
    │   ├── JSData--color.js
+   │   ├── JSObject--allTokens.js
    │   ├── JSObject--deprecated.js
    │   ├── JSONVariablesFlat.json
    │   ├── JSONVariablesNested.json
@@ -40,110 +53,229 @@ Pre-processed resources are available in the `./dist/` directory of the [npm pac
    └── CSSCustomProperties--bundled.css
 ```
 
-### Resource Descriptions
+## Usage Guide
 
-### `alaska` theme
+### Install with Sass
 
-| File                        | Syntax | Type               | Status  | Filter Type / Description                            |
-|-----------------------------|--------|--------------------|---------|------------------------------------------------------|
-| CSSCustomProperties--alaska | CSS    | Custom properties  | Current | All v5.x semantic tokens for the Alaska theme       |
-| primitives--alaska          | SCSS   | Sass variables     | Current | All v5.x semantic token values for the Alaska theme |
+When working with Sass, import the SCSS file for your theme:
 
-### `hawaiian` theme
+```scss
+@import "~@aurodesignsystem/design-tokens/dist/alaska/primitives--alaska.scss";
+```
 
-| File                          | Syntax | Type               | Status  | Filter Type / Description                              |
-|-------------------------------|--------|--------------------|---------|--------------------------------------------------------|
-| CSSCustomProperties--hawaiian | CSS    | Custom properties  | Current | All v5.x release tokens for the Hawaiian theme         |
-| primitives--hawaiian          | SCSS   | Sass variables     | Current | All v5.x semantic token values for the Hawaiian theme |
+**NOTE:** When developing new UI code in Sass, it's still advisable to leverage CSS custom properties over Sass variables.
 
-### `auro-classic` theme
+### Install with CSS
 
-| File                     | Syntax    | Type               | Status     | Filter Type / Description       |
-|--------------------------|-----------|--------------------|------------|---------------------------------|
-| CSSCustomProperties      | CSS       | Custom properties  | Deprecated | All v4.x release tokens         |
-| CSSSizeCustomProperties  | CSS       | Custom properties  | Deprecated | Filter v4.x: size, public       |
-| JSData--color            | JS module | Color data         | Deprecated | Filter v4.x: color, Deprecated  |
-| JSONVariablesFlat        | JSON Data | All data           | Deprecated | All v4.x release tokens         |
-| JSONVariablesNested      | JSON Data | All data           | Deprecated | All v4.x release tokens         |
-| JSObject--deprecated     | JS module | Deprecated tokens  | Deprecated | Filter v4.x: deprecated, public |
-| JSObject--allTokens.js   | JS module | All data           | Deprecated | All v4.x release tokens         |
-| JSVariables--color       | JS ES6    | Color data         | Deprecated | Filter v4.x: color              |
-| SCSSVariableMap          | Sass      | Sass variable map  | Deprecated | Filter v4.x: size, public       |
-| SCSSVariables            | SCSS      | Sass variables     | Deprecated | All v4.x release tokens         |
-| SCSSVariablesMapFlat     | SCSS      | Sass variable map  | Deprecated | All v4.x release tokens         |
-| SassCustomProperties     | SCSS      | Custom properties  | Deprecated | All v4.x release tokens         |
-| SassSizeCustomProperties | Sass      | Custom properties  | Deprecated | Filter v4.x: size, public       |
+For React or similar frameworks, import the CSS file directly:
 
-### `transparent` theme
+```js
+import "@aurodesignsystem/design-tokens/dist/alaska/CSSCustomProperties--alaska.css"
+```
 
-| File                                | Syntax    | Type               | Status     | Filter Type / Description |
-|-------------------------------------|-----------|--------------------|------------|---------------------------|
-| CSSCustomProperties--transparent    | CSS       | Custom properties  | Deprecated | All v4.0x release tokens  |
+For other frameworks, you'll need to copy the CSS file from the npm resource into your project using a build scenario.
 
-### `bundled` file
+### Install ESModules
 
-| File         | Syntax | Type              | Status  | Filter Type / Description                            |
-|-------------|--------|-------------------|---------|------------------------------------------------------|
-| CSSCustomProperties--bundled.css | CSS    | Custom properties | Current | Combined v5.x `semantic` CSS custom properties from all supported themes.
+_Note: ESModules are not yet available for the v5.x tokens._
 
-NOTE: Not intended for general use.
+In a webpack-supported application or a `type="module"` script:
 
----
+```js
+import { AuroColorAlertNotificationOnLight, AuroColorBorderErrorOnLight } from '@aurodesignsystem/design-tokens/dist/auro-classic/JSVariables--color.js';
+```
 
-### Migration from v4.x to v5.x
+### Install from CDN
 
-With the release of Auro Design Tokens 5.x significant changes have occurred.
+Using the `https://cdn.jsdelivr.net/npm/` CDN:
 
-- `./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** 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.
-- 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.
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm//@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
+```
 
-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.
+**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.
 
-### Install with Sass
+## Available Themes & Resources
 
-When working with Sass, the preprocessor scripting language, there are several options for incorporating design tokens into your project. First, ensure that all design tokens are included to fulfill CSS custom property requests. This can be achieved by importing the SCSS file as demonstrated below:
+### Alaska Theme
 
-_note: this example is based on using the Alaska theme, substitute the directory path for the theme you wish to use._
+| 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   |
 
-```scss
-@import "~@aurodesignsystem/design-tokens/dist/alaska/primitives--alaska.scss";
-```
+### Alaska Classic Theme
 
-**NOTE:** When developing new UI code in Sass, it's still advisable to leverage CSS custom properties over Sass variables. See **Install with CSS** below.
+The Alaska Classic theme uses the `v5.x` token names with the deprecated Auro Classic values.
 
-### Install with CSS
+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.
 
-For React or similar frameworks, simply import the CSS file directly from npm:
+| File                                   | Syntax    | Type               | Description                                          |
+|----------------------------------------|-----------|--------------------|------------------------------------------------------|
+| CSSCustomProperties--alaskaClassic     | CSS       | Custom properties  | All v5.x semantic tokens     |
+| JSObject--allTokens.js                 | JS module | All data           | All v5.x token data          |
+| primitives--alaskaClassic              | SCSS      | Sass variables     | All v5.x semantic token values |
+| SCSSVariables--alaskaClassic           | SCSS      | Sass variables     | All v5.x semantic tokens     |
+| SCSSVariablesMapFlat--alaskaClassic    | SCSS      | Sass variable map  | All v5.x semantic tokens as flat map |
 
-_note: this example is based on using the Alaska theme, substitute the directory path for the theme you wish to use._
+### Hawaiian Theme
 
-```js
-import "@aurodesignsystem/design-tokens/dist/alaska/CSSCustomProperties--alaska.css"
-```
+| 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 |
 
-For other frameworks, you'll need to copy the CSS file from the npm resource into your project using a build scenario.
+### Auro Classic Theme (Deprecated)
 
-### Install ESModules
+| File                     | Syntax    | Type               | Filter Type / Description       |
+|--------------------------|-----------|--------------------|----------------------------------|
+| CSSCustomProperties      | CSS       | Custom properties  | All v4.x release tokens         |
+| CSSSizeCustomProperties  | CSS       | Custom properties  | Filter v4.x: size, public       |
+| JSData--color            | JS module | Color data         | Filter v4.x: color, Deprecated  |
+| JSONVariablesFlat        | JSON Data | All data           | All v4.x release tokens         |
+| JSONVariablesNested      | JSON Data | All data           | All v4.x release tokens         |
+| JSObject--deprecated     | JS module | Deprecated tokens  | Filter v4.x: deprecated, public |
+| JSObject--allTokens.js   | JS module | All data           | All v4.x release tokens         |
+| JSVariables--color       | JS ES6    | Color data         | Filter v4.x: color              |
+| SCSSVariableMap          | Sass      | Sass variable map  | Filter v4.x: size, public       |
+| SCSSVariables            | SCSS      | Sass variables     | All v4.x release tokens         |
+| SCSSVariablesMapFlat     | SCSS      | Sass variable map  | All v4.x release tokens         |
+| SassCustomProperties     | SCSS      | Custom properties  | All v4.x release tokens         |
+| SassSizeCustomProperties | Sass      | Custom properties  | Filter v4.x: size, public       |
 
-_Note: ESModules are not yet available for the v5.x tokens._
+### Transparent Theme (Deprecated)
 
-In a webpack-supported application or a `type="module"` script:
+| File                                | Syntax    | Type               | Filter Type / Description |
+|-------------------------------------|-----------|--------------------|---------------------------|
+| CSSCustomProperties--transparent    | CSS       | Custom properties  | All v4.0x release tokens  |
+
+### Bundled File
+
+| File                            | Syntax | Type              | Description                             |
+|---------------------------------|--------|-------------------|-----------------------------------------|
+| CSSCustomProperties--bundled.css | CSS    | Custom properties | Combined v5.x `semantic` CSS custom properties from all supported themes |
+
+**NOTE: Bundled file is not intended for general use.**
+
+## Understanding the Architecture
+
+### Key Concepts
+
+The Auro Design System is built on a structured hierarchy of design tokens organized around two key concepts:
+
+- **Primitives**: Low-level, foundational values (colors, sizes, etc.)
+- **Themes**: Semantic tokens that reference primitives with meaningful, usage-based names
+
+### Source Directory Structure
 
-```js
-import { AuroColorAlertNotificationOnLight, AuroColorBorderErrorOnLight } from '@aurodesignsystem/design-tokens/dist/auro-classic/JSVariables--color.js';
+```
+src/
+├── primitives/
+│   ├── alaska/
+│   │   ├── color.json
+│   │   ├── typography.json
+│   │   └── ...
+│   ├── base/
+│   │   ├── color.json
+│   │   ├── transparency.json
+│   │   └── ...
+│   ├── hawaiian/
+│   │   ├── color.json
+│   │   ├── typography.json
+│   │   └── ...
+│   └── ...
+└── themes/
+    ├── alaska/
+    │   ├── color.json
+    │   ├── typography.json
+    │   └── ...
+    ├── hawaiian/
+    │   ├── color.json
+    │   ├── typography.json
+    │   └── ...
+    └── ...
 ```
 
-### Install from CDN
+### Multi-Level Token Architecture
 
-Using the `https://cdn.jsdelivr.net/npm/` CDN, every file in the dist directory can be accessed like so:
+#### 1. Base Primitives: Shared Foundation
 
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm//@aurodesignsystem/design-tokens@latest/dist/auro-alaska/CSSCustomProperties--alaska">
+Base primitives (`src/primitives/base/`) define foundational values shared across the system:
+- Common color scales (gray, neutral, status colors)
+- Basic visual elements (black, white)
+- Transparency values
+- And more...
+
+These base primitives are shared resources that theme-specific primitives can reference, providing consistency across the entire design system.
+
+#### 2. Theme-Specific Primitives: Brand Identity
+
+Each supported theme (Alaska, Hawaiian, etc.) has its own primitives folder (`src/primitives/alaska/`, `src/primitives/hawaiian/`) containing:
+- Brand-specific color palettes
+- Typography definitions unique to each brand
+- And more...
+
+These theme-specific primitives work alongside the shared `base` primitives to create a complete palette for each brand.
+
+#### 3. Semantic Theme Tokens: Usage-Based References
+
+The tokens in the `themes` directory (`src/themes/alaska/`, `src/themes/hawaiian/`) are semantic tokens that:
+- Reference primitive values using paths like `{color.atlas.600.value}`
+- Have meaningful names based on their function (e.g., `color.brand.primary`) 
+- Provide usage descriptions explaining their intended context
+- Are marked as `"public": true` for use in components
+
+#### 4. 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}`
+- This creates multiple layers of abstraction and flexibility
+- These reference chains ultimately resolve to primitive values
+
+### Best Practices
+
+**Never Use Primitives Directly in UI**
+
+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);
+}
 ```
 
-**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. Any additional CDN solution must be maintained by the team using this solution per this [Discussion](https://github.com/orgs/AlaskaAirlines/discussions/513).
+### Benefits of This Architecture
+
+This three-tiered approach provides several advantages:
+
+1. **Theme Flexibility**: Components can seamlessly switch between themes without code changes
+2. **Abstraction of Intent**: Semantic naming communicates the purpose of each token
+3. **Centralized Updates**: Changes to primitive values automatically propagate to all semantic tokens
+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:
+
+- `./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** 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.
+- 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.
+
+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.

package/dist/CSSCustomProperties--bundled.css

@@ -1,56 +1,62 @@
 /**
- * Do not edit directly
- * Generated on Tue, 04 Mar 2025 19:47:26 GMT
+  Do not edit directly
+  Generated on Thu, 06 Mar 2025 18:17:01 GMT
  */
 
 /* Properties from CSSCustomProperties--alaska.css */
-[aag-theme="aag-theme-as"] {
+[data-aag-theme="aag-theme-as"] {
   --ds-color-border-bold: #585e67;
-  --ds-color-border-brand: #265688;
+  --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-accent1: #778f53;
-  --ds-color-brand-primary: #005fa7;
-  --ds-color-brand-primary-bold: #003761;
-  --ds-color-brand-primary-subtle: #289bee;
-  --ds-color-brand-secondary: #265688;
-  --ds-color-brand-secondary-bold: #00274a;
-  --ds-color-brand-secondary-subtle: #2875b5;
-  --ds-color-brand-tertiary: #5de3f7;
-  --ds-color-brand-tertiary-bold: #18c3dd;
-  --ds-color-brand-tertiary-subtle: #b4eff9;
-  --ds-color-fare-brand-basic: #5de3f7;
-  --ds-color-fare-brand-first: #00274a;
-  --ds-color-fare-brand-economy: #005fa7;
-  --ds-color-fare-brand-premium: #005154;
-  --ds-color-fare-brand-one-world-emerald: #139142;
-  --ds-color-fare-brand-one-world-ruby: #a41d4a;
-  --ds-color-fare-brand-one-world-sapphire: #015daa;
-  --ds-color-page-background-default: #ffffff;
-  --ds-color-page-background-utility: #f7f8fa;
+  --ds-color-brand-primary: #01426a;
+  --ds-color-brand-primary-bold: #00274a;
+  --ds-color-brand-primary-muted: #ebf3f9;
+  --ds-color-brand-primary-subtle: #2875b5;
+  --ds-color-brand-secondary: #5de3f7;
+  --ds-color-brand-secondary-bold: #18c3dd;
+  --ds-color-brand-secondary-muted: #ebfafd;
+  --ds-color-brand-secondary-subtle: #b4eff9;
+  --ds-color-brand-tertiary: #a3cd6a;
+  --ds-color-brand-tertiary-bold: #7daf3b;
+  --ds-color-brand-tertiary-muted: #eaf3dd;
+  --ds-color-brand-tertiary-subtle: #c9e1a7;
+  --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: #ebfafd;
+  --ds-color-pagebackground-utility: #ffffff;
   --ds-color-status-default: #afb9c6;
-  --ds-color-status-error: #f15f65;
+  --ds-color-status-error: #e53339;
   --ds-color-status-error-subtle: #fddede;
-  --ds-color-status-info: #005fa7;
-  --ds-color-status-info-subtle: #aedeff;
-  --ds-color-status-success: #7ac248;
+  --ds-color-status-info: #01426a;
+  --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: #265688;
-  --ds-color-surface-accent1-muted: #ebf7ff;
+  --ds-color-surface-accent1: #5de3f7;
+  --ds-color-surface-accent1-muted: #ebfafd;
+  --ds-color-surface-accent1-subtle: #b4eff9;
+  --ds-color-surface-accent2: #a3cd6a;
+  --ds-color-surface-accent2-muted: #eaf3dd;
   --ds-color-surface-default: #ffffff;
-  --ds-color-surface-inverse: #01426a;
-  --ds-color-surface-inverse-subtle: #265688;
+  --ds-color-surface-inverse: #00274a;
+  --ds-color-surface-inverse-subtle: #2875b5;
   --ds-color-surface-neutral-medium: #c5c5c5;
-  --ds-color-surface-neutral-subtle: #f7f7f7;
-  --ds-color-texticon-accent1: #265688;
+  --ds-color-surface-neutral-subtle: #f2f2f2;
+  --ds-color-texticon-accent1: #00274a;
   --ds-color-texticon-default: #2a2a2a;
-  --ds-color-texticon-disabled: #adadad;
+  --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;
@@ -63,11 +69,11 @@
   --ds-font-weight-heading-heading3: Medium;
   --ds-font-weight-heading-heading4: Medium;
   --ds-font-weight-heading-heading5: Medium;
-  --ds-font-weight-heading-heading6: Medium; 
+  --ds-font-weight-heading-heading6: Medium;
 }
 
 /* Properties from CSSCustomProperties--hawaiian.css */
-[aag-theme="aag-theme-ha"] {
+[data-aag-theme="aag-theme-ha"] {
   --ds-color-border-bold: #adadad;
   --ds-color-border-brand: #d0d0d0;
   --ds-color-border-default: #d0d0d0;
@@ -75,25 +81,27 @@
   --ds-color-border-divider-inverse: #ffffff66;
   --ds-color-border-inverse: #ffffff;
   --ds-color-border-subtle: #dddddd;
-  --ds-color-brand-accent1: #00a5ba;
   --ds-color-brand-primary: #ce0c88;
   --ds-color-brand-primary-bold: #831a57;
+  --ds-color-brand-primary-muted: #fdf1f8;
   --ds-color-brand-primary-subtle: #f0a5d2;
   --ds-color-brand-secondary: #463c8f;
   --ds-color-brand-secondary-bold: #31295c;
-  --ds-color-brand-secondary-subtle: #8c7eb8;
+  --ds-color-brand-secondary-muted: #edeaf4;
+  --ds-color-brand-secondary-subtle: #6b5da4;
   --ds-color-brand-tertiary: #ee453d;
   --ds-color-brand-tertiary-bold: #97322a;
+  --ds-color-brand-tertiary-muted: #ffeeea;
   --ds-color-brand-tertiary-subtle: #ff9080;
-  --ds-color-fare-brand-basic: #d0d0d0;
-  --ds-color-fare-brand-first: #463c8f;
-  --ds-color-fare-brand-economy: #ce0c88;
-  --ds-color-fare-brand-premium: #00a5ba;
-  --ds-color-fare-brand-one-world-emerald: #139142;
-  --ds-color-fare-brand-one-world-ruby: #a41d4a;
-  --ds-color-fare-brand-one-world-sapphire: #015daa;
-  --ds-color-page-background-default: #ffffff;
-  --ds-color-page-background-utility: #f7f7f7;
+  --ds-color-farebrand-basiceconomy: #d0d0d0;
+  --ds-color-farebrand-business-first: #463c8f;
+  --ds-color-farebrand-economy: #ce0c88;
+  --ds-color-farebrand-premiumeconomy: #00a5ba;
+  --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: #f2f2f2;
   --ds-color-status-default: #463c8f;
   --ds-color-status-error: #e53339;
   --ds-color-status-error-subtle: #fddede;
@@ -101,19 +109,23 @@
   --ds-color-status-info-subtle: #e8f2f8;
   --ds-color-status-success: #529325;
   --ds-color-status-success-subtle: #e4f1da;
-  --ds-color-status-warning: #9e7b00;
+  --ds-color-status-warning: #fac200;
   --ds-color-status-warning-subtle: #fff6d1;
-  --ds-color-surface-accent1: #f2f2f2;
-  --ds-color-surface-accent1-muted: #f2f2f2;
+  --ds-color-surface-accent1: #dddddd;
+  --ds-color-surface-accent1-muted: #f7f7f7;
+  --ds-color-surface-accent1-subtle: #f2f2f2;
+  --ds-color-surface-accent2: #dddddd;
+  --ds-color-surface-accent2-muted: #f7f7f7;
   --ds-color-surface-default: #ffffff;
   --ds-color-surface-inverse: #463c8f;
-  --ds-color-surface-inverse-subtle: #463c8f;
+  --ds-color-surface-inverse-subtle: #6b5da4;
   --ds-color-surface-neutral-medium: #dddddd;
-  --ds-color-surface-neutral-subtle: #f2f2f2;
+  --ds-color-surface-neutral-subtle: #f7f7f7;
   --ds-color-texticon-accent1: #000000;
   --ds-color-texticon-default: #000000;
-  --ds-color-texticon-disabled: #adadad;
+  --ds-color-texticon-disabled: #d0d0d0;
   --ds-color-texticon-inverse: #ffffff;
+  --ds-color-texticon-inverse-disabled: #d0d0d0;
   --ds-color-texticon-muted: #3d3d3d;
   --ds-font-weight-display: Semibold;
   --ds-font-weight-body-default: Regular;
@@ -126,5 +138,74 @@
   --ds-font-weight-heading-heading3: Medium;
   --ds-font-weight-heading-heading4: Medium;
   --ds-font-weight-heading-heading5: Medium;
-  --ds-font-weight-heading-heading6: 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;
 }