@aurodesignsystem/design-tokens 4.1.0 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Semantic Release Automated Changelog
 
+# [4.2.0](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v4.1.1...v4.2.0) (2023-11-07)
+
+
+### Features
+
+* **base:** add new white tokens with different opacities ([b5a11d6](https://github.com/AlaskaAirlines/AuroDesignTokens/commit/b5a11d68a0c73b825d181f01172ecc62d3d71eec))
+* **gradient:** add new gradient token for white backgrounds [#135](https://github.com/AlaskaAirlines/AuroDesignTokens/issues/135) ([f6e99a4](https://github.com/AlaskaAirlines/AuroDesignTokens/commit/f6e99a4f4806b83175e31e3c8d0f16cc33b85b7e))
+
+## [4.1.1](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v4.1.0...v4.1.1) (2023-09-15)
+
+
+### Bug Fixes
+
+* add back deprecated tokens [#134](https://github.com/AlaskaAirlines/AuroDesignTokens/issues/134) ([1f61b86](https://github.com/AlaskaAirlines/AuroDesignTokens/commit/1f61b86177a362b04d4a88585c511619093bb2c9))
+
 # [4.1.0](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v4.0.0...v4.1.0) (2023-09-14)
 
 

package/README.md

@@ -54,6 +54,21 @@ Located in the `./dist/tokens` directory of the [npm](https://www.npmjs.com/pack
 | SassSizeCustomProperties | Sass | custom properties | current | filter: size, public |
 
 
+### Migration from 3.x to 4.x
+
+With the release of Auro Design Tokens 4.x a new variable namespace was introduced. The project has removed `--auro` and replaced with `--ds`. This was done to support upcoming theming capabilities. 
+
+Since not all Auro web components are using the new tokens, simply removing the 3.x version and replacing with the 4.x version will break your UI. 
+
+To allow for a seamless transition between the two sets of design tokens, we highly recommend the following install supoprt.
+
+1. In your app, please install the new `@aurodesignsystem/design-tokens@4.x`, but DO NOT uninstall `@alaskaairux/design-tokens@3.15.5`.
+1. Update to use the new `@aurodesignsystem/webcorestylesheets` which fully supports the new token naming spec.
+1. Please review the [Deprecated tokens list](https://auro.alaskaair.com/getting-started/developers/design-tokens/deprecated) for a matrix of changes. Understand that some tokens have been removed from the project and need to be updated. 
+
+By allowing your project to support both the legacy and new Auro design tokens, this will 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. 
+
+
 ### Install with Sass
 
 ```scss
@@ -89,3 +104,5 @@ Using the `https://cdn.jsdelivr.net/npm/` CDN,  every file in the dist directory
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm//@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
 ```
+
+**NOTE:** Please use caution when using the CDN solution. We are not responsible for the CDN `https://cdn.jsdelivr.net/` [uptime](https://www.isitupdown.com/jsdelivr) and are unable to effectively troubleshoot when there are response issues. It is recommended to use the installed version of Auro Design Tokens when using them in critical UIs.

package/dist/tokens/CSSCustomProperties.css

@@ -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/CSSSizeCustomProperties.css

@@ -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/JSData--color.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:08 GMT
  */
 
 module.exports = {
@@ -354,6 +354,39 @@ module.exports = {
           "background",
           "darkest"
         ]
+      },
+      "gradient": {
+        "default": {
+          "value": "linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5))",
+          "public": true,
+          "neutral": true,
+          "usage": "Used for creating a gradient against all backgrounds",
+          "wcag": "n/a",
+          "deprecated": false,
+          "filePath": "./src/color/background.json",
+          "isSource": true,
+          "original": {
+            "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
+          },
+          "name": "ds-color-background-gradient-default",
+          "attributes": {
+            "category": "color",
+            "type": "background",
+            "item": "gradient",
+            "subitem": "default"
+          },
+          "path": [
+            "color",
+            "background",
+            "gradient",
+            "default"
+          ]
+        }
       }
     },
     "base": {
@@ -382,6 +415,33 @@ module.exports = {
           "white"
         ]
       },
+      "white-opacity-50": {
+        "value": "rgba(255, 255, 255, 0.5)",
+        "comment": "white @ 50%",
+        "public": true,
+        "opacity": true,
+        "deprecated": false,
+        "filePath": "./src/color/base.json",
+        "isSource": true,
+        "original": {
+          "value": "ffffff80",
+          "comment": "white @ 50%",
+          "public": true,
+          "opacity": true,
+          "deprecated": false
+        },
+        "name": "ds-color-base-white-opacity-50",
+        "attributes": {
+          "category": "color",
+          "type": "base",
+          "item": "white-opacity-50"
+        },
+        "path": [
+          "color",
+          "base",
+          "white-opacity-50"
+        ]
+      },
       "white-opacity-40": {
         "value": "rgba(255, 255, 255, 0.4)",
         "comment": "white @ 40%",
@@ -409,6 +469,33 @@ module.exports = {
           "white-opacity-40"
         ]
       },
+      "white-opacity-0": {
+        "value": "rgba(255, 255, 255, 0)",
+        "comment": "white @ 0%",
+        "public": true,
+        "opacity": true,
+        "deprecated": false,
+        "filePath": "./src/color/base.json",
+        "isSource": true,
+        "original": {
+          "value": "ffffff00",
+          "comment": "white @ 0%",
+          "public": true,
+          "opacity": true,
+          "deprecated": false
+        },
+        "name": "ds-color-base-white-opacity-0",
+        "attributes": {
+          "category": "color",
+          "type": "base",
+          "item": "white-opacity-0"
+        },
+        "path": [
+          "color",
+          "base",
+          "white-opacity-0"
+        ]
+      },
       "black": {
         "value": "#000000",
         "comment": "\n  // Base value for token support; should not use in code!",
@@ -3524,6 +3611,37 @@ module.exports = {
             "default",
             "default"
           ]
+        },
+        "inverse": {
+          "value": "#00cff0",
+          "public": true,
+          "inverse": true,
+          "usage": "OnDark interaction color affordance",
+          "wcag": "AAA",
+          "deprecated": false,
+          "filePath": "./src/color/ui.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.brand.breeze.300.value}",
+            "public": true,
+            "inverse": true,
+            "usage": "OnDark interaction color affordance",
+            "wcag": "AAA",
+            "deprecated": false
+          },
+          "name": "ds-color-ui-default-inverse",
+          "attributes": {
+            "category": "color",
+            "type": "ui",
+            "item": "default",
+            "subitem": "inverse"
+          },
+          "path": [
+            "color",
+            "ui",
+            "default",
+            "inverse"
+          ]
         }
       },
       "hover": {
@@ -3557,6 +3675,37 @@ module.exports = {
             "hover",
             "default"
           ]
+        },
+        "inverse": {
+          "value": "#5de3f7",
+          "public": true,
+          "inverse": true,
+          "usage": "Hover interaction color on dark backgrounds",
+          "wcag": "AAA",
+          "deprecated": false,
+          "filePath": "./src/color/ui.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.brand.breeze.200.value}",
+            "public": true,
+            "inverse": true,
+            "usage": "Hover interaction color on dark backgrounds",
+            "wcag": "AAA",
+            "deprecated": false
+          },
+          "name": "ds-color-ui-hover-inverse",
+          "attributes": {
+            "category": "color",
+            "type": "ui",
+            "item": "hover",
+            "subitem": "inverse"
+          },
+          "path": [
+            "color",
+            "ui",
+            "hover",
+            "inverse"
+          ]
         }
       },
       "active": {