@aurodesignsystem/design-tokens 4.1.1 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Semantic Release Automated Changelog
 
+# [4.3.0](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v4.2.0...v4.3.0) (2023-12-29)
+
+
+### Features
+
+* **tokens:** add requested design tokens [#137](https://github.com/AlaskaAirlines/AuroDesignTokens/issues/137) ([8c832d3](https://github.com/AlaskaAirlines/AuroDesignTokens/commit/8c832d3d1b0cf6fa4b844fbea4c711ee9a0b58db))
+
+# [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)
 
 

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 Fri, 15 Sep 2023 18:15:03 GMT
+ * Generated on Fri, 29 Dec 2023 19:04:04 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;
@@ -176,101 +185,237 @@
   --ds-color-border-primary-default: #626b79;
   --ds-color-border-primary-inverse: #9fabbb;
   --ds-color-border-active-default: #0074c8;
+  --ds-color-border-active-inverse: #00cff0;
   --ds-color-border-error-default: #df0b37;
   --ds-color-border-disabled-default: #dbdbdb;
   --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;
@@ -312,6 +457,10 @@
   --ds-color-ui-hover-default: #054687;
   --ds-color-ui-hover-inverse: #5de3f7;
   --ds-color-ui-active-default: #054687;
+  --ds-color-ui-active-inverse: #5de3f7;
   --ds-color-ui-disabled-default: rgba(0, 116, 200, 0.2);
+  --ds-color-ui-bkg-default-default: rgba(0, 0, 0, 0.03);
+  --ds-color-ui-bkg-default-inverse: rgba(255, 255, 255, 0.03);
   --ds-color-ui-bkg-hover-default: rgba(0, 0, 0, 0.06);
+  --ds-color-ui-bkg-hover-inverse: rgba(255, 255, 255, 0.06);
 }

package/dist/tokens/CSSSizeCustomProperties.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 15 Sep 2023 18:15:03 GMT
+ * Generated on Fri, 29 Dec 2023 19:04:04 GMT
  */
 
 :root {