@aurodesignsystem/design-tokens 5.8.1 → 5.8.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Semantic Release Automated Changelog
 
+## [5.8.3](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v5.8.2...v5.8.3) (2025-04-21)
+
+
+### Performance Improvements
+
+* add 'scrim' design token to themes ([34a81a1](https://github.com/AlaskaAirlines/AuroDesignTokens/commit/34a81a114fea44aedc0f5282baf23d533ba9b7ee))
+
+## [5.8.2](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v5.8.1...v5.8.2) (2025-04-14)
+
+
+### Performance Improvements
+
+* update design tokens based on feedback ([c811b4a](https://github.com/AlaskaAirlines/AuroDesignTokens/commit/c811b4a17e986eca0bc48641ad1749a1de0d48ae))
+
 ## [5.8.1](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v5.8.0...v5.8.1) (2025-04-11)
 
 

package/README.md

@@ -57,19 +57,12 @@ Auro Design Tokens support multiple themes:
 
 ## Theme Scoping
 
-Apply different themes using the `data-aag-theme` attribute:
+### Alaska Air Group Exclusive
 
-```html
-<!-- Alaska-themed -->
-<div data-aag-theme="aag-theme-as">
-  <h1>Alaska Airlines Content</h1>
-</div>
-
-<!-- Hawaiian-themed -->
-<div data-aag-theme="aag-theme-ha">
-  <h1>Hawaiian Airlines Content</h1>
-</div>
-```
+> [!IMPORTANT]  
+> The following link is only intended for Alaska Air Group employees and is protected by SSO.
+
+- [Prepare your pages for multi-brand theming](https://wiki.devtools.teamaag.com/guides/multibrand)
 
 ## Documentation
 

package/dist/CSSCustomProperties--bundled.css

@@ -1,6 +1,6 @@
 /**
   Do not edit directly
-  Generated on Fri, 11 Apr 2025 16:48:34 GMT
+  Generated on Mon, 21 Apr 2025 18:34:01 GMT
  */
 
 /* Properties from CSSCustomProperties--alaska.css */
@@ -69,7 +69,7 @@
   --ds-advanced-color-boolean-isfalse-border: #585e67;
   --ds-advanced-color-boolean-isfalse-border-inverse: #ffffff;
   --ds-advanced-color-boolean-isfalse-hover: #f2f2f2;
-  --ds-advanced-color-boolean-isfalse-inverse: rgba(255, 255, 255, 0.05);
+  --ds-advanced-color-boolean-isfalse-inverse: rgba(255, 255, 255, 0.2);
   --ds-advanced-color-boolean-isfalse-inverse-hover: rgba(255, 255, 255, 0.15);
   --ds-advanced-color-boolean-istrue: #01426a;
   --ds-advanced-color-boolean-istrue-hover: #00274a;
@@ -80,14 +80,16 @@
   --ds-advanced-color-hyperlink-text-inverse: #ffffff;
   --ds-advanced-color-hyperlink-text-inverse-hover: #ebf3f9;
   --ds-advanced-color-shared-background: #ffffff;
-  --ds-advanced-color-shared-background-inverse: rgba(255, 255, 255, 0.05);
+  --ds-advanced-color-shared-background-inverse: rgba(255, 255, 255, 0.2);
+  --ds-advanced-color-shared-background-inverse-disabled: rgba(255, 255, 255, 0.1);
+  --ds-advanced-color-shared-background-inverse-hover: rgba(255, 255, 255, 0.15);
   --ds-advanced-color-shared-background-muted: #f7f7f7;
   --ds-advanced-color-shared-background-strong: #7e7e7e;
+  --ds-advanced-color-shared-scrim: rgba(0, 0, 0, 0.5);
   --ds-advanced-color-shared-text-accent: #2875b5;
   --ds-advanced-color-state-background-disabled: #dddddd;
   --ds-advanced-color-state-background-hover: #f2f2f2;
   --ds-advanced-color-state-background-inverse-disabled: #7e8894;
-  --ds-advanced-color-state-background-inverse-hover: rgba(255, 255, 255, 0.15);
   --ds-advanced-color-state-error-inverse: #f9a4a8;
   --ds-advanced-color-state-focused: #01426a;
   --ds-advanced-color-state-focused-inverse: #ffffff;
@@ -144,7 +146,6 @@
   --ds-basic-color-texticon-accent1: #265688;
   --ds-basic-color-texticon-default: #2a2a2a;
   --ds-basic-color-texticon-disabled: #d0d0d0;
-  --ds-basic-color-texticon-disabled-inverse: #7e8894;
   --ds-basic-color-texticon-inverse: #ffffff;
   --ds-basic-color-texticon-inverse-disabled: #7e8894;
   --ds-basic-color-texticon-inverse-muted: #ccd2db;
@@ -530,7 +531,7 @@
   --ds-advanced-color-boolean-isfalse-border: #585e67;
   --ds-advanced-color-boolean-isfalse-border-inverse: #ffffff;
   --ds-advanced-color-boolean-isfalse-hover: #f2f2f2;
-  --ds-advanced-color-boolean-isfalse-inverse: rgba(255, 255, 255, 0.05);
+  --ds-advanced-color-boolean-isfalse-inverse: rgba(255, 255, 255, 0.2);
   --ds-advanced-color-boolean-isfalse-inverse-hover: rgba(255, 255, 255, 0.15);
   --ds-advanced-color-boolean-istrue: #0074ca;
   --ds-advanced-color-boolean-istrue-hover: #003761;
@@ -541,14 +542,16 @@
   --ds-advanced-color-hyperlink-text-inverse: #97eaf8;
   --ds-advanced-color-hyperlink-text-inverse-hover: #b4eff9;
   --ds-advanced-color-shared-background: #ffffff;
-  --ds-advanced-color-shared-background-inverse: rgba(255, 255, 255, 0.05);
+  --ds-advanced-color-shared-background-inverse: rgba(255, 255, 255, 0.2);
+  --ds-advanced-color-shared-background-inverse-disabled: rgba(255, 255, 255, 0.1);
+  --ds-advanced-color-shared-background-inverse-hover: rgba(255, 255, 255, 0.15);
   --ds-advanced-color-shared-background-muted: #f7f7f7;
   --ds-advanced-color-shared-background-strong: #7e7e7e;
+  --ds-advanced-color-shared-scrim: rgba(0, 0, 0, 0.5);
   --ds-advanced-color-shared-text-accent: #0074ca;
   --ds-advanced-color-state-background-disabled: #dddddd;
   --ds-advanced-color-state-background-hover: #f2f2f2;
   --ds-advanced-color-state-background-inverse-disabled: #7e8894;
-  --ds-advanced-color-state-background-inverse-hover: rgba(255, 255, 255, 0.15);
   --ds-advanced-color-state-error-inverse: #e31f26;
   --ds-advanced-color-state-focused: #0074ca;
   --ds-advanced-color-state-focused-inverse: #5de3f7;
@@ -605,7 +608,6 @@
   --ds-basic-color-texticon-accent1: #01426a;
   --ds-basic-color-texticon-default: #2a2a2a;
   --ds-basic-color-texticon-disabled: #d0d0d0;
-  --ds-basic-color-texticon-disabled-inverse: #7e8894;
   --ds-basic-color-texticon-inverse: #ffffff;
   --ds-basic-color-texticon-inverse-disabled: #7e8894;
   --ds-basic-color-texticon-inverse-muted: #ccd2db;
@@ -991,8 +993,8 @@
   --ds-advanced-color-boolean-isfalse-border: #adadad;
   --ds-advanced-color-boolean-isfalse-border-inverse: #ffffff;
   --ds-advanced-color-boolean-isfalse-hover: #f2f2f2;
-  --ds-advanced-color-boolean-isfalse-inverse: rgba(255, 255, 255, 0.05);
-  --ds-advanced-color-boolean-isfalse-inverse-hover: #f2f2f2;
+  --ds-advanced-color-boolean-isfalse-inverse: rgba(255, 255, 255, 0.2);
+  --ds-advanced-color-boolean-isfalse-inverse-hover: rgba(255, 255, 255, 0.15);
   --ds-advanced-color-boolean-istrue: #463c8f;
   --ds-advanced-color-boolean-istrue-hover: #31295c;
   --ds-advanced-color-boolean-istrue-inverse: #ffffff;
@@ -1002,14 +1004,16 @@
   --ds-advanced-color-hyperlink-text-inverse: #ffffff;
   --ds-advanced-color-hyperlink-text-inverse-hover: #ffffff;
   --ds-advanced-color-shared-background: #ffffff;
-  --ds-advanced-color-shared-background-inverse: rgba(255, 255, 255, 0.05);
+  --ds-advanced-color-shared-background-inverse: rgba(255, 255, 255, 0.2);
+  --ds-advanced-color-shared-background-inverse-disabled: rgba(255, 255, 255, 0.1);
+  --ds-advanced-color-shared-background-inverse-hover: rgba(255, 255, 255, 0.15);
   --ds-advanced-color-shared-background-muted: #f7f7f7;
   --ds-advanced-color-shared-background-strong: #7e7e7e;
+  --ds-advanced-color-shared-scrim: rgba(0, 0, 0, 0.5);
   --ds-advanced-color-shared-text-accent: #463c8f;
   --ds-advanced-color-state-background-disabled: #dddddd;
   --ds-advanced-color-state-background-hover: #f2f2f2;
   --ds-advanced-color-state-background-inverse-disabled: #7e8894;
-  --ds-advanced-color-state-background-inverse-hover: rgba(255, 255, 255, 0.15);
   --ds-advanced-color-state-error-inverse: #f9a4a8;
   --ds-advanced-color-state-focused: #463c8f;
   --ds-advanced-color-state-focused-inverse: #ffffff;
@@ -1066,7 +1070,6 @@
   --ds-basic-color-texticon-accent1: #463c8f;
   --ds-basic-color-texticon-default: #000000;
   --ds-basic-color-texticon-disabled: #d0d0d0;
-  --ds-basic-color-texticon-disabled-inverse: #7e8894;
   --ds-basic-color-texticon-inverse: #ffffff;
   --ds-basic-color-texticon-inverse-disabled: #7e8894;
   --ds-basic-color-texticon-inverse-muted: #ccd2db;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 11 Apr 2025 16:48:45 GMT
+ * Generated on Mon, 21 Apr 2025 18:34:12 GMT
  */
 
 :root {
@@ -68,7 +68,7 @@
   --ds-advanced-color-boolean-isfalse-border: #585e67;
   --ds-advanced-color-boolean-isfalse-border-inverse: #ffffff;
   --ds-advanced-color-boolean-isfalse-hover: #f2f2f2;
-  --ds-advanced-color-boolean-isfalse-inverse: rgba(255, 255, 255, 0.05);
+  --ds-advanced-color-boolean-isfalse-inverse: rgba(255, 255, 255, 0.2);
   --ds-advanced-color-boolean-isfalse-inverse-hover: rgba(255, 255, 255, 0.15);
   --ds-advanced-color-boolean-istrue: #01426a;
   --ds-advanced-color-boolean-istrue-hover: #00274a;
@@ -79,14 +79,16 @@
   --ds-advanced-color-hyperlink-text-inverse: #ffffff;
   --ds-advanced-color-hyperlink-text-inverse-hover: #ebf3f9;
   --ds-advanced-color-shared-background: #ffffff;
-  --ds-advanced-color-shared-background-inverse: rgba(255, 255, 255, 0.05);
+  --ds-advanced-color-shared-background-inverse: rgba(255, 255, 255, 0.2);
+  --ds-advanced-color-shared-background-inverse-disabled: rgba(255, 255, 255, 0.1);
+  --ds-advanced-color-shared-background-inverse-hover: rgba(255, 255, 255, 0.15);
   --ds-advanced-color-shared-background-muted: #f7f7f7;
   --ds-advanced-color-shared-background-strong: #7e7e7e;
+  --ds-advanced-color-shared-scrim: rgba(0, 0, 0, 0.5);
   --ds-advanced-color-shared-text-accent: #2875b5;
   --ds-advanced-color-state-background-disabled: #dddddd;
   --ds-advanced-color-state-background-hover: #f2f2f2;
   --ds-advanced-color-state-background-inverse-disabled: #7e8894;
-  --ds-advanced-color-state-background-inverse-hover: rgba(255, 255, 255, 0.15);
   --ds-advanced-color-state-error-inverse: #f9a4a8;
   --ds-advanced-color-state-focused: #01426a;
   --ds-advanced-color-state-focused-inverse: #ffffff;
@@ -143,7 +145,6 @@
   --ds-basic-color-texticon-accent1: #265688;
   --ds-basic-color-texticon-default: #2a2a2a;
   --ds-basic-color-texticon-disabled: #d0d0d0;
-  --ds-basic-color-texticon-disabled-inverse: #7e8894;
   --ds-basic-color-texticon-inverse: #ffffff;
   --ds-basic-color-texticon-inverse-disabled: #7e8894;
   --ds-basic-color-texticon-inverse-muted: #ccd2db;

package/dist/alaska/JSONVariablesNested--alaska.json

@@ -78,7 +78,7 @@
         "isfalseBorder": "#585e67",
         "isfalseBorderInverse": "#ffffff",
         "isfalseHover": "#f2f2f2",
-        "isfalseInverse": "rgba(255, 255, 255, 0.05)",
+        "isfalseInverse": "rgba(255, 255, 255, 0.2)",
         "isfalseInverseHover": "rgba(255, 255, 255, 0.15)",
         "istrue": "#01426a",
         "istrueHover": "#00274a",
@@ -93,16 +93,18 @@
       },
       "shared": {
         "background": "#ffffff",
-        "backgroundInverse": "rgba(255, 255, 255, 0.05)",
+        "backgroundInverse": "rgba(255, 255, 255, 0.2)",
+        "backgroundInverseDisabled": "rgba(255, 255, 255, 0.1)",
+        "backgroundInverseHover": "rgba(255, 255, 255, 0.15)",
         "backgroundMuted": "#f7f7f7",
         "backgroundStrong": "#7e7e7e",
+        "scrim": "rgba(0, 0, 0, 0.5)",
         "textAccent": "#2875b5"
       },
       "state": {
         "backgroundDisabled": "#dddddd",
         "backgroundHover": "#f2f2f2",
         "backgroundInverseDisabled": "#7e8894",
-        "backgroundInverseHover": "rgba(255, 255, 255, 0.15)",
         "errorInverse": "#f9a4a8",
         "focused": "#01426a",
         "focusedInverse": "#ffffff",
@@ -179,7 +181,6 @@
         "accent1": "#265688",
         "default": "#2a2a2a",
         "disabled": "#d0d0d0",
-        "disabledInverse": "#7e8894",
         "inverse": "#ffffff",
         "inverseDisabled": "#7e8894",
         "inverseMuted": "#ccd2db",