@carbon/themes 10.33.0 → 10.35.0

package/es/index.js

@@ -1,33 +1,22 @@
 import Color from 'color';
-import { blue60, gray80, white as white$1, gray10, gray20, gray50, gray100, gray70, gray40, gray60, red60, blue70, blue40, green50, yellow, red50, green40, blue50, rgba, blue80, gray30, red80, purple60, blue20, gray90, red40, blue30, purple40, red30, yellow30 } from '@carbon/colors';
-import { caption01, label01, helperText01, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, productiveHeading01, heading02, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04, unstable_tokens } from '@carbon/type';
-export { bodyLong01, bodyLong02, bodyShort01, bodyShort02, caption01, code01, code02, display01, display02, display03, display04, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, heading01, heading02, helperText01, label01, productiveHeading01, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, quotation01, quotation02 } from '@carbon/type';
-import { spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13, fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04, layout01, layout02, layout03, layout04, layout05, layout06, layout07, container01, container02, container03, container04, container05, iconSize01, iconSize02, unstable_tokens as unstable_tokens$1 } from '@carbon/layout';
-export { container01, container02, container03, container04, container05, fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04, iconSize01, iconSize02, layout01, layout02, layout03, layout04, layout05, layout06, layout07, spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13 } from '@carbon/layout';
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
+import { blue60, gray80, white as white$1, gray10, gray20, gray50, gray100, gray70, gray40, gray60, red60, blue70, blue40, green60, yellow, red50, green40, blue50, rgba, blue80, gray30, red80, purple60, blue20, gray90, red40, blue30, green50, purple40, red30, yellow30 } from '@carbon/colors';
+import { caption01, caption02, label01, label02, helperText01, helperText02, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, productiveHeading01, heading02, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04, unstable_tokens } from '@carbon/type';
+export { bodyLong01, bodyLong02, bodyShort01, bodyShort02, caption01, caption02, code01, code02, display01, display02, display03, display04, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, heading01, heading02, helperText01, helperText02, label01, label02, productiveHeading01, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, quotation01, quotation02 } from '@carbon/type';
+import { spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13, fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04, layout01, layout02, layout03, layout04, layout05, layout06, layout07, container01, container02, container03, container04, container05, sizeXSmall, sizeSmall, sizeMedium, sizeLarge, sizeXLarge, size2XLarge, iconSize01, iconSize02, unstable_tokens as unstable_tokens$1 } from '@carbon/layout';
+export { container01, container02, container03, container04, container05, fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04, iconSize01, iconSize02, layout01, layout02, layout03, layout04, layout05, layout06, layout07, size2XLarge, sizeLarge, sizeMedium, sizeSmall, sizeXLarge, sizeXSmall, spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing13 } from '@carbon/layout';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
 
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
+
+    if (enumerableOnly) {
+      symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+
     keys.push.apply(keys, symbols);
   }
 
@@ -54,6 +43,21 @@ function _objectSpread2(target) {
   return target;
 }
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
 /**
  * Adjust a given token's lightness by a specified percentage
  * Example: token = hsl(10, 10, 10);
@@ -104,7 +108,7 @@ var field02$5 = white$1;
 var inverse01$5 = white$1;
 var inverse02$5 = gray80;
 var support01$5 = red60;
-var support02$5 = green50;
+var support02$5 = green60;
 var support03$5 = yellow;
 var support04$5 = blue70;
 var inverseSupport01$5 = red50;
@@ -149,6 +153,8 @@ var skeleton02$5 = gray30; // New color tokens
 var background$5 = uiBackground$5;
 var layer$5 = ui01$5;
 var layerAccent$5 = ui03$5;
+var layerAccentActive$5 = gray40;
+var layerAccentHover$5 = adjustLightness(layerAccent$5, -6);
 var field$5 = field01$5;
 var backgroundInverse$5 = inverse02$5;
 var backgroundBrand$5 = interactive01$5;
@@ -299,6 +305,8 @@ var white = /*#__PURE__*/Object.freeze({
   background: background$5,
   layer: layer$5,
   layerAccent: layerAccent$5,
+  layerAccentActive: layerAccentActive$5,
+  layerAccentHover: layerAccentHover$5,
   field: field$5,
   backgroundInverse: backgroundInverse$5,
   backgroundBrand: backgroundBrand$5,
@@ -377,8 +385,11 @@ var white = /*#__PURE__*/Object.freeze({
   hoverField: hoverField$5,
   danger: danger$5,
   caption01: caption01,
+  caption02: caption02,
   label01: label01,
+  label02: label02,
   helperText01: helperText01,
+  helperText02: helperText02,
   bodyShort01: bodyShort01,
   bodyLong01: bodyLong01,
   bodyShort02: bodyShort02,
@@ -436,6 +447,12 @@ var white = /*#__PURE__*/Object.freeze({
   container03: container03,
   container04: container04,
   container05: container05,
+  sizeXSmall: sizeXSmall,
+  sizeSmall: sizeSmall,
+  sizeMedium: sizeMedium,
+  sizeLarge: sizeLarge,
+  sizeXLarge: sizeXLarge,
+  size2XLarge: size2XLarge,
   iconSize01: iconSize01,
   iconSize02: iconSize02
 });
@@ -473,7 +490,7 @@ var field02$4 = gray10;
 var inverse01$4 = white$1;
 var inverse02$4 = gray80;
 var support01$4 = red60;
-var support02$4 = green50;
+var support02$4 = green60;
 var support03$4 = yellow;
 var support04$4 = blue70;
 var inverseSupport01$4 = red50;
@@ -518,6 +535,8 @@ var skeleton02$4 = gray30; // New color tokens
 var background$4 = uiBackground$4;
 var layer$4 = ui01$4;
 var layerAccent$4 = ui03$4;
+var layerAccentActive$4 = gray40;
+var layerAccentHover$4 = adjustLightness(layerAccent$4, -6);
 var field$4 = field01$4;
 var backgroundInverse$4 = inverse02$4;
 var backgroundBrand$4 = interactive01$4;
@@ -668,6 +687,8 @@ var g10 = /*#__PURE__*/Object.freeze({
   background: background$4,
   layer: layer$4,
   layerAccent: layerAccent$4,
+  layerAccentActive: layerAccentActive$4,
+  layerAccentHover: layerAccentHover$4,
   field: field$4,
   backgroundInverse: backgroundInverse$4,
   backgroundBrand: backgroundBrand$4,
@@ -746,8 +767,11 @@ var g10 = /*#__PURE__*/Object.freeze({
   hoverField: hoverField$4,
   danger: danger$4,
   caption01: caption01,
+  caption02: caption02,
   label01: label01,
+  label02: label02,
   helperText01: helperText01,
+  helperText02: helperText02,
   bodyShort01: bodyShort01,
   bodyLong01: bodyLong01,
   bodyShort02: bodyShort02,
@@ -805,6 +829,12 @@ var g10 = /*#__PURE__*/Object.freeze({
   container03: container03,
   container04: container04,
   container05: container05,
+  sizeXSmall: sizeXSmall,
+  sizeSmall: sizeSmall,
+  sizeMedium: sizeMedium,
+  sizeLarge: sizeLarge,
+  sizeXLarge: sizeXLarge,
+  size2XLarge: size2XLarge,
   iconSize01: iconSize01,
   iconSize02: iconSize02
 });
@@ -887,6 +917,8 @@ var skeleton02$3 = gray70; // New color tokens
 var background$3 = uiBackground$3;
 var layer$3 = ui01$3;
 var layerAccent$3 = ui03$3;
+var layerAccentActive$3 = gray60;
+var layerAccentHover$3 = adjustLightness(layerAccent$3, +6);
 var field$3 = field01$3;
 var backgroundInverse$3 = inverse02$3;
 var backgroundBrand$3 = interactive01$3;
@@ -1037,6 +1069,8 @@ var g100 = /*#__PURE__*/Object.freeze({
   background: background$3,
   layer: layer$3,
   layerAccent: layerAccent$3,
+  layerAccentActive: layerAccentActive$3,
+  layerAccentHover: layerAccentHover$3,
   field: field$3,
   backgroundInverse: backgroundInverse$3,
   backgroundBrand: backgroundBrand$3,
@@ -1115,8 +1149,11 @@ var g100 = /*#__PURE__*/Object.freeze({
   hoverField: hoverField$3,
   danger: danger$3,
   caption01: caption01,
+  caption02: caption02,
   label01: label01,
+  label02: label02,
   helperText01: helperText01,
+  helperText02: helperText02,
   bodyShort01: bodyShort01,
   bodyLong01: bodyLong01,
   bodyShort02: bodyShort02,
@@ -1174,6 +1211,12 @@ var g100 = /*#__PURE__*/Object.freeze({
   container03: container03,
   container04: container04,
   container05: container05,
+  sizeXSmall: sizeXSmall,
+  sizeSmall: sizeSmall,
+  sizeMedium: sizeMedium,
+  sizeLarge: sizeLarge,
+  sizeXLarge: sizeXLarge,
+  size2XLarge: size2XLarge,
   iconSize01: iconSize01,
   iconSize02: iconSize02
 });
@@ -1189,6 +1232,8 @@ var g100 = /*#__PURE__*/Object.freeze({
 var background$2 = gray80;
 var layer$2 = gray70;
 var layerAccent$2 = gray60;
+var layerAccentActive$2 = gray70;
+var layerAccentHover$2 = adjustLightness(layerAccent$2, -7);
 var field$2 = gray70;
 var backgroundInverse$2 = gray10;
 var backgroundBrand$2 = blue60;
@@ -1343,6 +1388,8 @@ var g80 = /*#__PURE__*/Object.freeze({
   background: background$2,
   layer: layer$2,
   layerAccent: layerAccent$2,
+  layerAccentActive: layerAccentActive$2,
+  layerAccentHover: layerAccentHover$2,
   field: field$2,
   backgroundInverse: backgroundInverse$2,
   backgroundBrand: backgroundBrand$2,
@@ -1487,8 +1534,11 @@ var g80 = /*#__PURE__*/Object.freeze({
   hoverField: hoverField$2,
   danger: danger$2,
   caption01: caption01,
+  caption02: caption02,
   label01: label01,
+  label02: label02,
   helperText01: helperText01,
+  helperText02: helperText02,
   bodyShort01: bodyShort01,
   bodyLong01: bodyLong01,
   bodyShort02: bodyShort02,
@@ -1546,6 +1596,12 @@ var g80 = /*#__PURE__*/Object.freeze({
   container03: container03,
   container04: container04,
   container05: container05,
+  sizeXSmall: sizeXSmall,
+  sizeSmall: sizeSmall,
+  sizeMedium: sizeMedium,
+  sizeLarge: sizeLarge,
+  sizeXLarge: sizeXLarge,
+  size2XLarge: size2XLarge,
   iconSize01: iconSize01,
   iconSize02: iconSize02
 });
@@ -1628,6 +1684,8 @@ var skeleton02$1 = gray70; // New color tokens
 var background$1 = uiBackground$1;
 var layer$1 = ui01$1;
 var layerAccent$1 = ui03$1;
+var layerAccentActive$1 = gray50;
+var layerAccentHover$1 = adjustLightness(layerAccent$1, +7);
 var field$1 = field01$1;
 var backgroundInverse$1 = inverse02$1;
 var backgroundBrand$1 = interactive01$1;
@@ -1778,6 +1836,8 @@ var g90 = /*#__PURE__*/Object.freeze({
   background: background$1,
   layer: layer$1,
   layerAccent: layerAccent$1,
+  layerAccentActive: layerAccentActive$1,
+  layerAccentHover: layerAccentHover$1,
   field: field$1,
   backgroundInverse: backgroundInverse$1,
   backgroundBrand: backgroundBrand$1,
@@ -1856,8 +1916,11 @@ var g90 = /*#__PURE__*/Object.freeze({
   hoverField: hoverField$1,
   danger: danger$1,
   caption01: caption01,
+  caption02: caption02,
   label01: label01,
+  label02: label02,
   helperText01: helperText01,
+  helperText02: helperText02,
   bodyShort01: bodyShort01,
   bodyLong01: bodyLong01,
   bodyShort02: bodyShort02,
@@ -1915,6 +1978,12 @@ var g90 = /*#__PURE__*/Object.freeze({
   container03: container03,
   container04: container04,
   container05: container05,
+  sizeXSmall: sizeXSmall,
+  sizeSmall: sizeSmall,
+  sizeMedium: sizeMedium,
+  sizeLarge: sizeLarge,
+  sizeXLarge: sizeXLarge,
+  size2XLarge: size2XLarge,
   iconSize01: iconSize01,
   iconSize02: iconSize02
 });
@@ -1997,6 +2066,8 @@ var skeleton02 = 'rgba(61, 112, 178, .1)'; // New color tokens
 var background = uiBackground;
 var layer = ui01;
 var layerAccent = ui03;
+var layerAccentActive = gray40;
+var layerAccentHover = adjustLightness(layerAccent, -6);
 var field = field01;
 var backgroundInverse = inverse02;
 var backgroundBrand = interactive01;
@@ -2147,6 +2218,8 @@ var v9 = /*#__PURE__*/Object.freeze({
   background: background,
   layer: layer,
   layerAccent: layerAccent,
+  layerAccentActive: layerAccentActive,
+  layerAccentHover: layerAccentHover,
   field: field,
   backgroundInverse: backgroundInverse,
   backgroundBrand: backgroundBrand,
@@ -2225,8 +2298,11 @@ var v9 = /*#__PURE__*/Object.freeze({
   hoverField: hoverField,
   danger: danger,
   caption01: caption01,
+  caption02: caption02,
   label01: label01,
+  label02: label02,
   helperText01: helperText01,
+  helperText02: helperText02,
   bodyShort01: bodyShort01,
   bodyLong01: bodyLong01,
   bodyShort02: bodyShort02,
@@ -2284,6 +2360,12 @@ var v9 = /*#__PURE__*/Object.freeze({
   container03: container03,
   container04: container04,
   container05: container05,
+  sizeXSmall: sizeXSmall,
+  sizeSmall: sizeSmall,
+  sizeMedium: sizeMedium,
+  sizeLarge: sizeLarge,
+  sizeXLarge: sizeXLarge,
+  size2XLarge: size2XLarge,
   iconSize01: iconSize01,
   iconSize02: iconSize02
 });
@@ -2300,7 +2382,7 @@ var colors = [// Core
 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'icon01', 'icon02', 'icon03', 'link01', 'link02', 'inverseLink', 'field01', 'field02', 'inverse01', 'inverse02', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', 'danger01', 'danger02', // Interactive states
 'focus', 'inverseFocusUi', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'hoverLightUI', 'hoverSelectedUI', 'activeUI', 'activeLightUI', 'selectedUI', 'selectedLightUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'decorative01', 'buttonSeparator', 'skeleton01', 'skeleton02', // New color tokens
 // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
-'background', 'layer', 'layerAccent', 'field', 'backgroundInverse', 'backgroundBrand', 'interactive', 'borderSubtle', 'borderStrong', 'borderInverse', 'borderInteractive', 'textPrimary', 'textSecondary', 'textPlaceholder', 'textHelper', 'textOnColor', 'textInverse', 'linkPrimary', 'linkSecondary', 'linkVisited', 'linkInverse', 'iconPrimary', 'iconSecondary', 'iconOnColor', 'iconInverse', 'supportError', 'supportSuccess', 'supportWarning', 'supportInfo', 'supportErrorInverse', 'supportSuccessInverse', 'supportWarningInverse', 'supportInfoInverse', 'overlay', 'toggleOff', 'buttonPrimary', 'buttonSecondary', 'buttonTertiary', 'buttonDangerPrimary', 'buttonDangerSecondary', 'backgroundActive', 'layerActive', 'buttonDangerActive', 'buttonPrimaryActive', 'buttonSecondaryActive', 'buttonTertiaryActive', 'focusInset', 'focusInverse', 'backgroundHover', 'layerHover', 'fieldHover', 'backgroundInverseHover', 'linkPrimaryHover', 'buttonDangerHover', 'buttonPrimaryHover', 'buttonSecondaryHover', 'buttonTertiaryHover', 'backgroundSelected', 'backgroundSelectedHover', 'layerSelected', 'layerSelectedHover', 'layerSelectedInverse', 'borderSubtleSelected', 'layerDisabled', 'fieldDisabled', 'borderDisabled', 'textDisabled', 'buttonDisabled', 'iconDisabled', 'textOnColorDisabled', 'iconOnColorDisabled', 'layerSelectedDisabled', 'skeletonBackground', 'skeletonElement', // Deprecated
+'background', 'layer', 'layerAccent', 'layerAccentHover', 'layerAccentActive', 'field', 'backgroundInverse', 'backgroundBrand', 'interactive', 'borderSubtle', 'borderStrong', 'borderInverse', 'borderInteractive', 'textPrimary', 'textSecondary', 'textPlaceholder', 'textHelper', 'textOnColor', 'textInverse', 'linkPrimary', 'linkSecondary', 'linkVisited', 'linkInverse', 'iconPrimary', 'iconSecondary', 'iconOnColor', 'iconInverse', 'supportError', 'supportSuccess', 'supportWarning', 'supportInfo', 'supportErrorInverse', 'supportSuccessInverse', 'supportWarningInverse', 'supportInfoInverse', 'overlay', 'toggleOff', 'buttonPrimary', 'buttonSecondary', 'buttonTertiary', 'buttonDangerPrimary', 'buttonDangerSecondary', 'backgroundActive', 'layerActive', 'buttonDangerActive', 'buttonPrimaryActive', 'buttonSecondaryActive', 'buttonTertiaryActive', 'focusInset', 'focusInverse', 'backgroundHover', 'layerHover', 'fieldHover', 'backgroundInverseHover', 'linkPrimaryHover', 'buttonDangerHover', 'buttonPrimaryHover', 'buttonSecondaryHover', 'buttonTertiaryHover', 'backgroundSelected', 'backgroundSelectedHover', 'layerSelected', 'layerSelectedHover', 'layerSelectedInverse', 'borderSubtleSelected', 'layerDisabled', 'fieldDisabled', 'borderDisabled', 'textDisabled', 'buttonDisabled', 'iconDisabled', 'textOnColorDisabled', 'iconOnColorDisabled', 'layerSelectedDisabled', 'skeletonBackground', 'skeletonElement', // Deprecated
 'brand01', 'brand02', 'brand03', 'active01', 'hoverField', 'danger'];
 var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
 /**
@@ -2350,7 +2432,7 @@ var unstable__meta = {
   colors: [{
     type: 'core',
     tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', 'danger', 'danger01', 'danger02', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'link01', 'link02', 'icon01', 'icon02', 'icon03', 'field01', 'field02', 'inverse01', 'inverse02', 'inverseLink', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', //new tokens
-    'background', 'layer', 'layerAccent', 'field', 'backgroundInverse', 'backgroundBrand', 'interactive', 'borderSubtle', 'borderStrong', 'borderInverse', 'borderInteractive', 'textPrimary', 'textSecondary', 'textPlaceholder', 'textHelper', 'textOnColor', 'textInverse', 'linkPrimary', 'linkSecondary', 'linkVisited', 'linkInverse', 'iconPrimary', 'iconSecondary', 'iconOnColor', 'iconInverse', 'supportError', 'supportSuccess', 'supportWarning', 'supportInfo', 'supportErrorInverse', 'supportSuccessInverse', 'supportWarningInverse', 'supportInfoInverse', 'overlay', 'toggleOff', 'buttonPrimary', 'buttonSecondary', 'buttonTertiary', 'buttonDangerPrimary', 'buttonDangerSecondary']
+    'background', 'layer', 'layerAccent', 'layerAccentHover', 'layerAccentActive', 'field', 'backgroundInverse', 'backgroundBrand', 'interactive', 'borderSubtle', 'borderStrong', 'borderInverse', 'borderInteractive', 'textPrimary', 'textSecondary', 'textPlaceholder', 'textHelper', 'textOnColor', 'textInverse', 'linkPrimary', 'linkSecondary', 'linkVisited', 'linkInverse', 'iconPrimary', 'iconSecondary', 'iconOnColor', 'iconInverse', 'supportError', 'supportSuccess', 'supportWarning', 'supportInfo', 'supportErrorInverse', 'supportSuccessInverse', 'supportWarningInverse', 'supportInfoInverse', 'overlay', 'toggleOff', 'buttonPrimary', 'buttonSecondary', 'buttonTertiary', 'buttonDangerPrimary', 'buttonDangerSecondary']
   }, {
     type: 'interactive',
     tokens: ['focus', 'inverseFocusUi', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverLightUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeLightUI', 'activeDanger', 'selectedUI', 'selectedLightUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField', 'decorative01', 'buttonSeparator', // new tokens
@@ -2374,4 +2456,4 @@ var themes = {
   v9: v9
 };
 
-export { active01$5 as active01, activeDanger$5 as activeDanger, activeLightUI$5 as activeLightUI, activePrimary$5 as activePrimary, activeSecondary$5 as activeSecondary, activeTertiary$5 as activeTertiary, activeUI$5 as activeUI, background$5 as background, backgroundActive$5 as backgroundActive, backgroundBrand$5 as backgroundBrand, backgroundHover$5 as backgroundHover, backgroundInverse$5 as backgroundInverse, backgroundInverseHover$5 as backgroundInverseHover, backgroundSelected$5 as backgroundSelected, backgroundSelectedHover$5 as backgroundSelectedHover, borderDisabled$5 as borderDisabled, borderInteractive$5 as borderInteractive, borderInverse$5 as borderInverse, borderStrong$5 as borderStrong, borderSubtle$5 as borderSubtle, borderSubtleSelected$5 as borderSubtleSelected, brand01$5 as brand01, brand02$5 as brand02, brand03$5 as brand03, buttonDangerActive$5 as buttonDangerActive, buttonDangerHover$5 as buttonDangerHover, buttonDangerPrimary$5 as buttonDangerPrimary, buttonDangerSecondary$5 as buttonDangerSecondary, buttonDisabled$5 as buttonDisabled, buttonPrimary$5 as buttonPrimary, buttonPrimaryActive$5 as buttonPrimaryActive, buttonPrimaryHover$5 as buttonPrimaryHover, buttonSecondary$5 as buttonSecondary, buttonSecondaryActive$5 as buttonSecondaryActive, buttonSecondaryHover$5 as buttonSecondaryHover, buttonSeparator$5 as buttonSeparator, buttonTertiary$5 as buttonTertiary, buttonTertiaryActive$5 as buttonTertiaryActive, buttonTertiaryHover$5 as buttonTertiaryHover, danger$5 as danger, danger01$5 as danger01, danger02$5 as danger02, decorative01$5 as decorative01, disabled01$5 as disabled01, disabled02$5 as disabled02, disabled03$5 as disabled03, field$5 as field, field01$5 as field01, field02$5 as field02, fieldDisabled$5 as fieldDisabled, fieldHover$5 as fieldHover, focus$5 as focus, focusInset$5 as focusInset, focusInverse$5 as focusInverse, formatTokenName, g10, g100, g80, g90, highlight$5 as highlight, hoverDanger$5 as hoverDanger, hoverField$5 as hoverField, hoverLightUI$5 as hoverLightUI, hoverPrimary$5 as hoverPrimary, hoverPrimaryText$5 as hoverPrimaryText, hoverRow$5 as hoverRow, hoverSecondary$5 as hoverSecondary, hoverSelectedUI$5 as hoverSelectedUI, hoverTertiary$5 as hoverTertiary, hoverUI$5 as hoverUI, icon01$5 as icon01, icon02$5 as icon02, icon03$5 as icon03, iconDisabled$5 as iconDisabled, iconInverse$5 as iconInverse, iconOnColor$5 as iconOnColor, iconOnColorDisabled$5 as iconOnColorDisabled, iconPrimary$5 as iconPrimary, iconSecondary$5 as iconSecondary, interactive$5 as interactive, interactive01$5 as interactive01, interactive02$5 as interactive02, interactive03$5 as interactive03, interactive04$5 as interactive04, inverse01$5 as inverse01, inverse02$5 as inverse02, inverseFocusUi$5 as inverseFocusUi, inverseHoverUI$5 as inverseHoverUI, inverseLink$5 as inverseLink, inverseSupport01$5 as inverseSupport01, inverseSupport02$5 as inverseSupport02, inverseSupport03$5 as inverseSupport03, inverseSupport04$5 as inverseSupport04, layer$5 as layer, layerAccent$5 as layerAccent, layerActive$5 as layerActive, layerDisabled$5 as layerDisabled, layerHover$5 as layerHover, layerSelected$5 as layerSelected, layerSelectedDisabled$5 as layerSelectedDisabled, layerSelectedHover$5 as layerSelectedHover, layerSelectedInverse$5 as layerSelectedInverse, link01$5 as link01, link02$5 as link02, linkInverse$5 as linkInverse, linkPrimary$5 as linkPrimary, linkPrimaryHover$5 as linkPrimaryHover, linkSecondary$5 as linkSecondary, linkVisited$5 as linkVisited, overlay$5 as overlay, overlay01$5 as overlay01, selectedLightUI$5 as selectedLightUI, selectedUI$5 as selectedUI, skeleton01$5 as skeleton01, skeleton02$5 as skeleton02, skeletonBackground$5 as skeletonBackground, skeletonElement$5 as skeletonElement, support01$5 as support01, support02$5 as support02, support03$5 as support03, support04$5 as support04, supportError$5 as supportError, supportErrorInverse$5 as supportErrorInverse, supportInfo$5 as supportInfo, supportInfoInverse$5 as supportInfoInverse, supportSuccess$5 as supportSuccess, supportSuccessInverse$5 as supportSuccessInverse, supportWarning$5 as supportWarning, supportWarningInverse$5 as supportWarningInverse, text01$5 as text01, text02$5 as text02, text03$5 as text03, text04$5 as text04, text05$5 as text05, textDisabled$5 as textDisabled, textError$5 as textError, textHelper$5 as textHelper, textInverse$5 as textInverse, textOnColor$5 as textOnColor, textOnColorDisabled$5 as textOnColorDisabled, textPlaceholder$5 as textPlaceholder, textPrimary$5 as textPrimary, textSecondary$5 as textSecondary, themes, toggleOff$5 as toggleOff, tokens, ui01$5 as ui01, ui02$5 as ui02, ui03$5 as ui03, ui04$5 as ui04, ui05$5 as ui05, uiBackground$5 as uiBackground, unstable__meta, v9, visitedLink$5 as visitedLink, white };
+export { active01$5 as active01, activeDanger$5 as activeDanger, activeLightUI$5 as activeLightUI, activePrimary$5 as activePrimary, activeSecondary$5 as activeSecondary, activeTertiary$5 as activeTertiary, activeUI$5 as activeUI, background$5 as background, backgroundActive$5 as backgroundActive, backgroundBrand$5 as backgroundBrand, backgroundHover$5 as backgroundHover, backgroundInverse$5 as backgroundInverse, backgroundInverseHover$5 as backgroundInverseHover, backgroundSelected$5 as backgroundSelected, backgroundSelectedHover$5 as backgroundSelectedHover, borderDisabled$5 as borderDisabled, borderInteractive$5 as borderInteractive, borderInverse$5 as borderInverse, borderStrong$5 as borderStrong, borderSubtle$5 as borderSubtle, borderSubtleSelected$5 as borderSubtleSelected, brand01$5 as brand01, brand02$5 as brand02, brand03$5 as brand03, buttonDangerActive$5 as buttonDangerActive, buttonDangerHover$5 as buttonDangerHover, buttonDangerPrimary$5 as buttonDangerPrimary, buttonDangerSecondary$5 as buttonDangerSecondary, buttonDisabled$5 as buttonDisabled, buttonPrimary$5 as buttonPrimary, buttonPrimaryActive$5 as buttonPrimaryActive, buttonPrimaryHover$5 as buttonPrimaryHover, buttonSecondary$5 as buttonSecondary, buttonSecondaryActive$5 as buttonSecondaryActive, buttonSecondaryHover$5 as buttonSecondaryHover, buttonSeparator$5 as buttonSeparator, buttonTertiary$5 as buttonTertiary, buttonTertiaryActive$5 as buttonTertiaryActive, buttonTertiaryHover$5 as buttonTertiaryHover, danger$5 as danger, danger01$5 as danger01, danger02$5 as danger02, decorative01$5 as decorative01, disabled01$5 as disabled01, disabled02$5 as disabled02, disabled03$5 as disabled03, field$5 as field, field01$5 as field01, field02$5 as field02, fieldDisabled$5 as fieldDisabled, fieldHover$5 as fieldHover, focus$5 as focus, focusInset$5 as focusInset, focusInverse$5 as focusInverse, formatTokenName, g10, g100, g80, g90, highlight$5 as highlight, hoverDanger$5 as hoverDanger, hoverField$5 as hoverField, hoverLightUI$5 as hoverLightUI, hoverPrimary$5 as hoverPrimary, hoverPrimaryText$5 as hoverPrimaryText, hoverRow$5 as hoverRow, hoverSecondary$5 as hoverSecondary, hoverSelectedUI$5 as hoverSelectedUI, hoverTertiary$5 as hoverTertiary, hoverUI$5 as hoverUI, icon01$5 as icon01, icon02$5 as icon02, icon03$5 as icon03, iconDisabled$5 as iconDisabled, iconInverse$5 as iconInverse, iconOnColor$5 as iconOnColor, iconOnColorDisabled$5 as iconOnColorDisabled, iconPrimary$5 as iconPrimary, iconSecondary$5 as iconSecondary, interactive$5 as interactive, interactive01$5 as interactive01, interactive02$5 as interactive02, interactive03$5 as interactive03, interactive04$5 as interactive04, inverse01$5 as inverse01, inverse02$5 as inverse02, inverseFocusUi$5 as inverseFocusUi, inverseHoverUI$5 as inverseHoverUI, inverseLink$5 as inverseLink, inverseSupport01$5 as inverseSupport01, inverseSupport02$5 as inverseSupport02, inverseSupport03$5 as inverseSupport03, inverseSupport04$5 as inverseSupport04, layer$5 as layer, layerAccent$5 as layerAccent, layerAccentActive$5 as layerAccentActive, layerAccentHover$5 as layerAccentHover, layerActive$5 as layerActive, layerDisabled$5 as layerDisabled, layerHover$5 as layerHover, layerSelected$5 as layerSelected, layerSelectedDisabled$5 as layerSelectedDisabled, layerSelectedHover$5 as layerSelectedHover, layerSelectedInverse$5 as layerSelectedInverse, link01$5 as link01, link02$5 as link02, linkInverse$5 as linkInverse, linkPrimary$5 as linkPrimary, linkPrimaryHover$5 as linkPrimaryHover, linkSecondary$5 as linkSecondary, linkVisited$5 as linkVisited, overlay$5 as overlay, overlay01$5 as overlay01, selectedLightUI$5 as selectedLightUI, selectedUI$5 as selectedUI, skeleton01$5 as skeleton01, skeleton02$5 as skeleton02, skeletonBackground$5 as skeletonBackground, skeletonElement$5 as skeletonElement, support01$5 as support01, support02$5 as support02, support03$5 as support03, support04$5 as support04, supportError$5 as supportError, supportErrorInverse$5 as supportErrorInverse, supportInfo$5 as supportInfo, supportInfoInverse$5 as supportInfoInverse, supportSuccess$5 as supportSuccess, supportSuccessInverse$5 as supportSuccessInverse, supportWarning$5 as supportWarning, supportWarningInverse$5 as supportWarningInverse, text01$5 as text01, text02$5 as text02, text03$5 as text03, text04$5 as text04, text05$5 as text05, textDisabled$5 as textDisabled, textError$5 as textError, textHelper$5 as textHelper, textInverse$5 as textInverse, textOnColor$5 as textOnColor, textOnColorDisabled$5 as textOnColorDisabled, textPlaceholder$5 as textPlaceholder, textPrimary$5 as textPrimary, textSecondary$5 as textSecondary, themes, toggleOff$5 as toggleOff, tokens, ui01$5 as ui01, ui02$5 as ui02, ui03$5 as ui03, ui04$5 as ui04, ui05$5 as ui05, uiBackground$5 as uiBackground, unstable__meta, v9, visitedLink$5 as visitedLink, white };

package/index.scss

@@ -7,3 +7,4 @@
 
 @forward 'scss/modules/themes';
 @forward 'scss/modules/theme';
+@forward 'scss/modules/tokens';