@aurodesignsystem/design-tokens 4.1.0 → 4.2.0

package/dist/tokens/JSObject--allTokens.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 = {
@@ -4187,6 +4187,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": {
@@ -4215,6 +4248,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%",
@@ -4242,6 +4302,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!",
@@ -7357,6 +7444,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 +7508,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 Thu, 14 Sep 2023 15:47:12 GMT
+ * Generated on Tue, 07 Nov 2023 23:11:09 GMT
  */
 
 module.exports = {

package/dist/tokens/JSVariables--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:09 GMT
  */
 
 export const DsColorAlertNotificationDefault = "#0074c8";
@@ -14,9 +14,12 @@ export const DsColorBackgroundLightest = "#ffffff";
 export const DsColorBackgroundLighter = "#f8f8f8";
 export const DsColorBackgroundDarker = "#01426a";
 export const DsColorBackgroundDarkest = "#00274a";
+export const DsColorBackgroundGradientDefault = "linear-gradient(180deg, #ffffff, #ffffff)";
 export const DsColorBaseWhite = "#ffffff"; // 
   // Base value for token support; should not use in code!
+export const DsColorBaseWhiteOpacity50 = "#ffffff"; // white @ 50%
 export const DsColorBaseWhiteOpacity40 = "#ffffff"; // white @ 40%
+export const DsColorBaseWhiteOpacity0 = "#ffffff"; // white @ 0%
 export const DsColorBaseBlack = "#000000"; // 
   // Base value for token support; should not use in code!
 export const DsColorBaseBlackOpacity15 = "#000000"; // black @ 15%
@@ -160,7 +163,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 Thu, 14 Sep 2023 15:47:12 GMT
+ * Generated on Tue, 07 Nov 2023 23:11:08 GMT
  */
 
 $ds-size-25: 0.125rem !default; // 2px

package/dist/tokens/SCSSVariables.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
 
 $ds-asset-font-circular-family-name: "AS Circular";
 $ds-asset-font-circular-filename: "ASCircularWeb";
@@ -160,11 +160,16 @@ $ds-color-background-lightest: #ffffff;
 $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;
@@ -179,96 +184,141 @@ $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;
@@ -306,7 +356,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 Thu, 14 Sep 2023 15:47:12 GMT
+  Generated on Tue, 07 Nov 2023 23:11:08 GMT
 */
 
 $auroTokens: (
@@ -179,11 +179,16 @@ $auroTokens: (
   'ds-color-background-lighter': (#f8f8f8),
   'ds-color-background-darker': (#01426a),
   'ds-color-background-darkest': (#00274a),
+  '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),
+  // white @ 50%
+  'ds-color-base-white-opacity-50': (rgba(255, 255, 255, 0.5)),
   // white @ 40%
   'ds-color-base-white-opacity-40': (rgba(255, 255, 255, 0.4)),
+  // white @ 0%
+  'ds-color-base-white-opacity-0': (rgba(255, 255, 255, 0)),
   // 
   // Base value for token support; should not use in code!
   'ds-color-base-black': (#000000),
@@ -374,7 +379,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))