@aurodesignsystem/design-tokens 4.1.0 → 4.2.0

package/dist/tokens/SassCustomProperties.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Sep 2023 15:47:12 GMT
+ * Generated on Tue, 07 Nov 2023 23:11:08 GMT
  */
 
 :root {
@@ -162,11 +162,20 @@
   --ds-color-background-lighter: #f8f8f8;
   --ds-color-background-darker: #01426a;
   --ds-color-background-darkest: #00274a;
-  --ds-color-base-white: #ffffff; /* 
-  // Base value for token support; should not use in code! */
+  --ds-color-background-gradient-default: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
+  /**
+   * 
+   *   // Base value for token support; should not use in code!
+   */
+  --ds-color-base-white: #ffffff;
+  --ds-color-base-white-opacity-50: rgba(255, 255, 255, 0.5); /* white @ 50% */
   --ds-color-base-white-opacity-40: rgba(255, 255, 255, 0.4); /* white @ 40% */
-  --ds-color-base-black: #000000; /* 
-  // Base value for token support; should not use in code! */
+  --ds-color-base-white-opacity-0: rgba(255, 255, 255, 0); /* white @ 0% */
+  /**
+   * 
+   *   // Base value for token support; should not use in code!
+   */
+  --ds-color-base-black: #000000;
   --ds-color-base-black-opacity-15: rgba(0, 0, 0, 0.15); /* black @ 15% */
   --ds-color-state-error-100: #ff999b;
   --ds-color-state-error-500: #df0b37;
@@ -181,96 +190,231 @@
   --ds-color-border-focus-default: #222222;
   --ds-color-border-divider-default: rgba(0, 0, 0, 0.15);
   --ds-color-border-divider-inverse: #ffffff;
-  --ds-color-brand-midnight-100: #c1daf0; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-midnight-200: #569ed7; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-midnight-300: #156fad; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-midnight-400: #01426a; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-midnight-500: #00274a; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-atlas-100: #cde6ff; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-atlas-200: #6bb7fb; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-atlas-300: #2492eb; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-atlas-400: #0074c8; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-atlas-500: #054687; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-breeze-100: #c0f7ff; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-breeze-200: #5de3f7; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-breeze-300: #00cff0; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-breeze-400: #099dc5; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-breeze-500: #0b5575; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-tropical-100: #e2ffcd; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-tropical-200: #d0fba6; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-tropical-300: #c0e585; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-tropical-400: #91be62; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-tropical-500: #5e8741; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-alpine-100: #bcaae6; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-alpine-200: #9e73ea; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-alpine-300: #8439ef; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-alpine-400: #631db8; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-alpine-500: #39115c; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-flamingo-100: #ffebee; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-flamingo-200: #ffc0ca; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-flamingo-300: #ff94a7; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-flamingo-400: #f65b7b; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-flamingo-500: #b82b47; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-canyon-100: #ffcab6; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-canyon-200: #f99574; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-canyon-300: #f26135; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-canyon-400: #de3e09; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-canyon-500: #b83302; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-goldcoast-100: #fff0cd; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-goldcoast-200: #ffdb67; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-goldcoast-300: #ffd200; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-goldcoast-400: #e5ad07; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-goldcoast-500: #b88624; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-neutral-100: #f9fbfc; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-neutral-200: #e2eaef; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-neutral-300: #cbd8e2; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-neutral-400: #9fabbb; /* 
-  // Please consider descriptive token prior to using brand token */
-  --ds-color-brand-neutral-500: #626b79; /* 
-  // Please consider descriptive token prior to using brand token */
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-midnight-100: #c1daf0;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-midnight-200: #569ed7;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-midnight-300: #156fad;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-midnight-400: #01426a;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-midnight-500: #00274a;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-atlas-100: #cde6ff;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-atlas-200: #6bb7fb;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-atlas-300: #2492eb;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-atlas-400: #0074c8;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-atlas-500: #054687;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-breeze-100: #c0f7ff;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-breeze-200: #5de3f7;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-breeze-300: #00cff0;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-breeze-400: #099dc5;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-breeze-500: #0b5575;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-tropical-100: #e2ffcd;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-tropical-200: #d0fba6;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-tropical-300: #c0e585;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-tropical-400: #91be62;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-tropical-500: #5e8741;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-alpine-100: #bcaae6;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-alpine-200: #9e73ea;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-alpine-300: #8439ef;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-alpine-400: #631db8;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-alpine-500: #39115c;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-flamingo-100: #ffebee;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-flamingo-200: #ffc0ca;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-flamingo-300: #ff94a7;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-flamingo-400: #f65b7b;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-flamingo-500: #b82b47;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-canyon-100: #ffcab6;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-canyon-200: #f99574;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-canyon-300: #f26135;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-canyon-400: #de3e09;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-canyon-500: #b83302;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-goldcoast-100: #fff0cd;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-goldcoast-200: #ffdb67;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-goldcoast-300: #ffd200;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-goldcoast-400: #e5ad07;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-goldcoast-500: #b88624;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-neutral-100: #f9fbfc;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-neutral-200: #e2eaef;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-neutral-300: #cbd8e2;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-neutral-400: #9fabbb;
+  /**
+   * 
+   *   // Please consider descriptive token prior to using brand token
+   */
+  --ds-color-brand-neutral-500: #626b79;
   --ds-color-brand-gray-100: #f8f8f8;
   --ds-color-brand-gray-200: #dbdbdb;
   --ds-color-brand-gray-300: #b2b2b2;
@@ -308,7 +452,9 @@
   --ds-color-tier-oneworld-sapphire: #015daa;
   --ds-color-tier-oneworld-ruby: #a41d4a;
   --ds-color-ui-default-default: #0074c8;
+  --ds-color-ui-default-inverse: #00cff0;
   --ds-color-ui-hover-default: #054687;
+  --ds-color-ui-hover-inverse: #5de3f7;
   --ds-color-ui-active-default: #054687;
   --ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2);
   --ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06);

package/dist/tokens/SassSizeCustomProperties.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Sep 2023 15:47:12 GMT
+ * Generated on Tue, 07 Nov 2023 23:11:08 GMT
  */
 
 :root {

package/dist/tokens/darkmode/CSSCustomProperties.css

@@ -1,13 +1,19 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Sep 2023 15:47:12 GMT
+ * Generated on Tue, 07 Nov 2023 23:11:09 GMT
  */
 
 :root {
-  --ds-color-base-white: #000000; /* 
-  // Base value for token support; should not use in code! */
-  --ds-color-base-black: #ffffff; /* 
-  // Base value for token support; should not use in code! */
+  /**
+   * 
+   *   // Base value for token support; should not use in code!
+   */
+  --ds-color-base-white: #000000;
+  /**
+   * 
+   *   // Base value for token support; should not use in code!
+   */
+  --ds-color-base-black: #ffffff;
   --ds-color-border-primary-default: #9fabbb;
   --ds-color-border-divider-default: #000000;
   --ds-color-icon-primary-default: #9fabbb;

package/dist/tokens/darkmode/JSDataColor.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Sep 2023 15:47:12 GMT
+ * Generated on Tue, 07 Nov 2023 23:11:09 GMT
  */
 
 module.exports = {

package/dist/tokens/darkmode/JSObject--allDarkTokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Sep 2023 15:47:12 GMT
+ * Generated on Tue, 07 Nov 2023 23:11:09 GMT
  */
 
 module.exports = {

package/dist/tokens/darkmode/JSVariablesColor.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Sep 2023 15:47:12 GMT
+ * Generated on Tue, 07 Nov 2023 23:11:09 GMT
  */
 
 export const DsColorBaseWhite = "#000000"; // 

package/dist/tokens/darkmode/SCSSVariables.scss

@@ -1,11 +1,13 @@
 
 // Do not edit directly
-// Generated on Thu, 14 Sep 2023 15:47:12 GMT
+// Generated on Tue, 07 Nov 2023 23:11:09 GMT
 
-$ds-color-base-white: #000000; // 
-  // Base value for token support; should not use in code!
-$ds-color-base-black: #ffffff; // 
-  // Base value for token support; should not use in code!
+// 
+//   // Base value for token support; should not use in code!
+$ds-color-base-white: #000000;
+// 
+//   // Base value for token support; should not use in code!
+$ds-color-base-black: #ffffff;
 $ds-color-border-primary-default: #9fabbb;
 $ds-color-border-divider-default: #000000;
 $ds-color-icon-primary-default: #9fabbb;

package/dist/tokens/darkmode/SCSSVariablesMapFlat.scss

@@ -1,7 +1,7 @@
 
 /*
   Do not edit directly
-  Generated on Thu, 14 Sep 2023 15:47:12 GMT
+  Generated on Tue, 07 Nov 2023 23:11:09 GMT
 */
 
 $auroTokens: (

package/dist/tokens/darkmode/SassCustomProperties.scss

@@ -1,13 +1,19 @@
 /**
  * Do not edit directly
- * Generated on Thu, 14 Sep 2023 15:47:12 GMT
+ * Generated on Tue, 07 Nov 2023 23:11:09 GMT
  */
 
 :root {
-  --ds-color-base-white: #000000; /* 
-  // Base value for token support; should not use in code! */
-  --ds-color-base-black: #ffffff; /* 
-  // Base value for token support; should not use in code! */
+  /**
+   * 
+   *   // Base value for token support; should not use in code!
+   */
+  --ds-color-base-white: #000000;
+  /**
+   * 
+   *   // Base value for token support; should not use in code!
+   */
+  --ds-color-base-black: #ffffff;
   --ds-color-border-primary-default: #9fabbb;
   --ds-color-border-divider-default: #000000;
   --ds-color-icon-primary-default: #9fabbb;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/design-tokens",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Alaska Air Auro Design System token repository",
   "homepage": "https://github.com/AlaskaAirlines/DesignTokens",
   "author": "Alaska Airlines Product design and engineering",
@@ -25,7 +25,7 @@
     "husky": "^8.0.0",
     "npm-run-all": "^4.1.5",
     "semantic-release": "^21.0.7",
-    "style-dictionary": "^3.8.0"
+    "style-dictionary": "^3.9.0"
   },
   "scripts": {
     "postinstall": "node packageScripts/postinstall.mjs",

package/src/color/background.json

@@ -32,6 +32,16 @@
         "usage": "Used for creating dark backgrounds @ 20% darker",
         "wcag": "n/a",
         "deprecated": false
+      },
+      "gradient": {
+        "default": {
+          "value": "linear-gradient(180deg, {color.base.white-opacity-0}, {color.base.white-opacity-50})",
+          "public": true,
+          "neutral": true,
+          "usage": "Used for creating a gradient against all backgrounds",
+          "wcag": "n/a",
+          "deprecated": false
+        }
       }
     }
   }

package/src/color/base.json

@@ -7,6 +7,13 @@
         "public": true,
         "deprecated": false
       },
+      "white-opacity-50": {
+        "value": "ffffff80",
+        "comment": "white @ 50%",
+        "public": true,
+        "opacity": true,
+        "deprecated": false
+      },
       "white-opacity-40": {
         "value": "ffffff66",
         "comment": "white @ 40%",
@@ -14,6 +21,13 @@
         "opacity": true,
         "deprecated": false
       },
+      "white-opacity-0": {
+        "value": "ffffff00",
+        "comment": "white @ 0%",
+        "public": true,
+        "opacity": true,
+        "deprecated": false
+      },
       "black": {
         "value": "000000",
         "comment": "{comments.color.base.value.comment}",

package/src/color/ui.json

@@ -31,6 +31,14 @@
           "comment": "Deprecated token",
           "reference": "n/a",
           "version": "3.12.0"
+        },
+        "inverse": {
+          "value": "{color.brand.breeze.300.value}",
+          "public": true,
+          "inverse": true,
+          "usage": "OnDark interaction color affordance",
+          "wcag": "AAA",
+          "deprecated": false
         }
       },
       "hover": {
@@ -63,6 +71,14 @@
           "comment": "Deprecated token",
           "reference": "n/a",
           "version": "3.12.0"
+        },
+        "inverse": {
+          "value": "{color.brand.breeze.200.value}",
+          "public": true,
+          "inverse": true,
+          "usage": "Hover interaction color on dark backgrounds",
+          "wcag": "AAA",
+          "deprecated": false
         }
       },
       "active": {