@aurodesignsystem/design-tokens 4.0.0 → 4.1.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Semantic Release Automated Changelog
 
+## [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)
+
+
+### Features
+
+* edit tokens for better control of output ([9a1521b](https://github.com/AlaskaAirlines/AuroDesignTokens/commit/9a1521b68472c6ce664e555fb12c8d39565cc2c6))
+
 # [4.0.0](https://github.com/AlaskaAirlines/AuroDesignTokens/compare/v3.15.5...v4.0.0) (2023-09-13)
 
 

package/README.md

@@ -3,34 +3,38 @@
 ## Install
 
 [![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/@alaskaairux/design-tokens.svg?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@alaskaairux/design-tokens)
-[![License](https://img.shields.io/npm/l/@alaskaairux/design-tokens.svg?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
+[![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)
 
 ```
-$ npm i @alaskaairux/design-tokens
+$ npm i @aurodesignsystem/design-tokens
 ```
 
 ## Use pre-processed resources
 
-Located in the `./dist/tokens` directory of the [npm](https://www.npmjs.com/package/@alaskaairux/design-tokens).
+Located in the `./dist/tokens` directory of the [npm](https://www.npmjs.com/package/@aurodesignsystem/design-tokens).
 
 ```
 └── tokens
    ├── CSSCustomProperties.css
-   ├── CSSCustomPropertiesColorRGB.css
-   ├── CSSOpacityProperties.scss
    ├── CSSSizeCustomProperties.css
    ├── JSData--color.js
    ├── JSObject--allTokens.js
    ├── JSObject--deprecated.js
    ├── JSVariables--color.js
-   ├── SCSSOpacityVariables.scss
    ├── SCSSVariableMap.scss
    ├── SCSSVariables.scss
    ├── SCSSVariablesMapFlat.scss
    ├── SassCustomProperties.scss
-   ├── SassCustomPropertiesColorRGB.scss
-   └── SassSizeCustomProperties.scss
+   ├── SassSizeCustomProperties.scss
+   └── darkmode
+      ├── CSSCustomProperties.css
+      ├── JSDataColor.js
+      ├── JSObject--allDarkTokens.js
+      ├── JSVariablesColor.js
+      ├── SCSSVariables.scss
+      ├── SCSSVariablesMapFlat.scss
+      └── SassCustomProperties.scss
 ```
 
 ### Resource Descriptions
@@ -38,30 +42,26 @@ Located in the `./dist/tokens` directory of the [npm](https://www.npmjs.com/pack
 | file | syntax | type | status | filter type / description |
 |---|---|---|---|---|
 | CSSCustomProperties | CSS | custom properties | current | full list of v3.0x release tokens |
-| CSSCustomPropertiesColorRGB | CSS | custom properties | current| Filter: color, public<br>custom RGB output
-| CSSOpacityProperties | Sass | custom properties | current | filter: opacity |
 | CSSSizeCustomProperties | CSS | custom properties | current | filter: size, public |
 | JSData--color | JS module | color data | current | filter: color, current |
 | JSObject--deprecated | JS module | deprecated tokens | current | filter: deprecated, pubic |
 | JSObject--allTokens.js | JS module | all data | current | filter: public |
 | JSVariables--color | js es6 | color data | current | filter: color |
-| SCSSOpacityVariables | Sass | Sass variables | current | filter: opacity |
 | SCSSVariableMap | Sass | Sass variable map | current | filter: size, public |
 | SCSSVariables | scss | Sass variables | current | full list of v3.0x release tokens |
 | SCSSVariablesMapFlat | scss | Scss variable map | current | full list of v3.0x release tokens |
 | SassCustomProperties | scss | custom properties | current | full list of v3.0x release tokens |
-| SassCustomPropertiesColorRGB | Sass | custom properties | current| Filter: color, public<br>custom RGB output
 | SassSizeCustomProperties | Sass | custom properties | current | filter: size, public |
 
 
 ### Install with Sass
 
 ```scss
-@import "~@alaskaairux/design-tokens/dist/tokens/SCSSVariables";
+@import "~@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
 
 // or
 
-@import "~@alaskaairux/design-tokens/dist/tokens/SassCustomProperties";
+@import "~@aurodesignsystem/design-tokens/dist/tokens/SassCustomProperties";
 ```
 
 ### Install with CSS
@@ -69,29 +69,23 @@ Located in the `./dist/tokens` directory of the [npm](https://www.npmjs.com/pack
 With React or similar framework, the CSS file can be imported directly from the npm:
 
 ```js
-import "@alaskaairux/design-tokens/dist/tokens/CSSCustomProperties.css"
+import "@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css"
 ```
 
 For other frameworks, it's suggested that the CSS file be copied from the npm into the scope of the project with a build scenario.
 
 ### Install ESModules
 
-Within a webpacked application or a `type="module"` script:
+Within a webpack supported application or a `type="module"` script:
 
 ```js
-import { AuroColorAlertNotificationOnLight, AuroColorBorderErrorOnLight } from '@alaskaairux/design-tokens/dist/tokens/JSVariables--color.js';
+import { AuroColorAlertNotificationOnLight, AuroColorBorderErrorOnLight } from '@aurodesignsystem/design-tokens/dist/tokens/JSVariables--color.js';
 ```
 
 ### Install from CDN
 
-Using unpkg.com, every file in the dist directory can be accessed.
+Using the `https://cdn.jsdelivr.net/npm/` CDN,  every file in the dist directory can be accessed like so.
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
-```
-
-For specifically the CSSCustomProperties.css file, a faster CDN resource is available.
-
-```html
-<link rel="stylesheet" href="https://p2pcontent-fd-prod.azurefd.net/auro/tokens/CSSCustomProperties.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm//@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
 ```

package/dist/tokens/CSSCustomProperties.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 17:26:39 GMT
+ * Generated on Fri, 15 Sep 2023 18:15:03 GMT
  */
 
 :root {
@@ -308,7 +308,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 Wed, 13 Sep 2023 17:26:39 GMT
+ * Generated on Fri, 15 Sep 2023 18:15:03 GMT
  */
 
 :root {

package/dist/tokens/JSData--color.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 17:26:39 GMT
+ * Generated on Fri, 15 Sep 2023 18:15:03 GMT
  */
 
 module.exports = {
@@ -3524,6 +3524,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 +3588,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": {

package/dist/tokens/JSObject--allTokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 17:26:39 GMT
+ * Generated on Fri, 15 Sep 2023 18:15:03 GMT
  */
 
 module.exports = {
@@ -7357,6 +7357,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": {
@@ -7390,6 +7421,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": {

package/dist/tokens/JSObject--deprecated.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 17:26:39 GMT
+ * Generated on Fri, 15 Sep 2023 18:15:03 GMT
  */
 
 module.exports = {

package/dist/tokens/JSVariables--color.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 17:26:39 GMT
+ * Generated on Fri, 15 Sep 2023 18:15:03 GMT
  */
 
 export const DsColorAlertNotificationDefault = "#0074c8";
@@ -160,7 +160,9 @@ export const DsColorTierOneworldEmerald = "#139142";
 export const DsColorTierOneworldSapphire = "#015daa";
 export const DsColorTierOneworldRuby = "#a41d4a";
 export const DsColorUiDefaultDefault = "#0074c8";
+export const DsColorUiDefaultInverse = "#00cff0";
 export const DsColorUiHoverDefault = "#054687";
+export const DsColorUiHoverInverse = "#5de3f7";
 export const DsColorUiActiveDefault = "#054687";
 export const DsColorUiDisabledDefault = "#0074c8";
 export const DsColorUiBkgHoverDefault = "#000000";

package/dist/tokens/SCSSVariableMap.scss

@@ -1,7 +1,7 @@
 
 /**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 17:26:39 GMT
+ * Generated on Fri, 15 Sep 2023 18:15:03 GMT
  */
 
 $ds-size-25: 0.125rem !default; // 2px

package/dist/tokens/SCSSVariables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 13 Sep 2023 17:26:39 GMT
+// Generated on Fri, 15 Sep 2023 18:15:03 GMT
 
 $ds-asset-font-circular-family-name: "AS Circular";
 $ds-asset-font-circular-filename: "ASCircularWeb";
@@ -306,7 +306,9 @@ $ds-color-tier-oneworld-emerald: #139142;
 $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/SCSSVariablesMapFlat.scss

@@ -1,7 +1,7 @@
 
 /*
   Do not edit directly
-  Generated on Wed, 13 Sep 2023 17:26:39 GMT
+  Generated on Fri, 15 Sep 2023 18:15:03 GMT
 */
 
 $auroTokens: (
@@ -374,7 +374,9 @@ $auroTokens: (
   '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/SassCustomProperties.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 17:26:39 GMT
+ * Generated on Fri, 15 Sep 2023 18:15:03 GMT
  */
 
 :root {
@@ -308,7 +308,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 Wed, 13 Sep 2023 17:26:39 GMT
+ * Generated on Fri, 15 Sep 2023 18:15:03 GMT
  */
 
 :root {

package/dist/tokens/darkmode/CSSCustomProperties.css

@@ -0,0 +1,22 @@
+/**
+ * Do not edit directly
+ * Generated on Fri, 15 Sep 2023 18:15:03 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! */
+  --ds-color-border-primary-default: #9fabbb;
+  --ds-color-border-divider-default: #000000;
+  --ds-color-icon-primary-default: #9fabbb;
+  --ds-color-icon-emphasis-default: #000000;
+  --ds-color-text-primary-default: #000000;
+  --ds-color-text-secondary-default: #9fabbb;
+  --ds-color-text-link-default: #00cff0;
+  --ds-color-text-error-default: #ff999b;
+  --ds-color-text-emphasis-default: #c1daf0;
+  --ds-color-tier-alaska-mvp-default: #c5c1bf;
+  --ds-color-tier-alaska-mvpgold-default: #ccbc94;
+}