@aurodesignsystem/design-tokens 4.0.0 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Semantic Release Automated Changelog
 
+# [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 Thu, 14 Sep 2023 15:47:12 GMT
  */
 
 :root {

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 Thu, 14 Sep 2023 15:47:12 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 Thu, 14 Sep 2023 15:47:12 GMT
  */
 
 module.exports = {

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 Thu, 14 Sep 2023 15:47:12 GMT
  */
 
 module.exports = {

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 Thu, 14 Sep 2023 15:47:12 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 Thu, 14 Sep 2023 15:47:12 GMT
  */
 
 export const DsColorAlertNotificationDefault = "#0074c8";

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 Thu, 14 Sep 2023 15:47:12 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 Thu, 14 Sep 2023 15:47:12 GMT
 
 $ds-asset-font-circular-family-name: "AS Circular";
 $ds-asset-font-circular-filename: "ASCircularWeb";

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 Thu, 14 Sep 2023 15:47:12 GMT
 */
 
 $auroTokens: (

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 Thu, 14 Sep 2023 15:47:12 GMT
  */
 
 :root {

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 Thu, 14 Sep 2023 15:47:12 GMT
  */
 
 :root {

package/dist/tokens/darkmode/CSSCustomProperties.css

@@ -0,0 +1,22 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 14 Sep 2023 15:47:12 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;
+}