@carbon/themes 11.10.0-rc.0 → 11.11.0-rc.0

package/es/index.js

@@ -1,4 +1,4 @@
-import { white as white$2, gray80, blue60, gray50, gray80Hover, gray10, gray30, gray10Hover, gray20, gray20Hover, whiteHover, gray100, gray40, gray70, gray60, red60, blue70, blue40, purple60, blue30, green60, yellow30, red50, green40, blue50, orange40, blue20, gray90, gray70Hover, gray60Hover, gray50Hover, red30, purple40, red40, green50, purple50, gray90Hover, rgba, black, blue80, red80 } from '@carbon/colors';
+import { white as white$2, gray80, blue60, gray50, gray80Hover, gray10, gray30, gray10Hover, gray20, gray20Hover, whiteHover, gray100, gray40, gray70, gray60, red60, blue70, blue40, purple60, blue30, green60, yellow30, red50, green40, blue50, orange40, blue20, gray90, gray70Hover, gray60Hover, gray50Hover, red30, purple40, red40, green50, purple50, gray90Hover, rgba, black, blue80, red80, red20, red70, red70Hover, magenta20, magenta70, magenta80, magenta30, magenta70Hover, purple20, purple70, purple80, purple30, purple70Hover, blue70Hover, cyan20, cyan70, cyan80, cyan30, cyan70Hover, teal20, teal70, teal80, teal30, teal70Hover, green20, green70, green80, green30, green70Hover, coolGray20, coolGray70, coolGray80, coolGray30, coolGray70Hover, warmGray20, warmGray70, warmGray80, warmGray30, warmGray70Hover } from '@carbon/colors';
 import Color from 'color';
 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, legal01, legal02, bodyCompact01, bodyCompact02, body01, body02, headingCompact01, headingCompact02, heading03, heading04, heading05, heading06, heading07, fluidHeading03, fluidHeading04, fluidHeading05, fluidHeading06, fluidParagraph01, fluidQuotation01, fluidQuotation02, fluidDisplay01, fluidDisplay02, fluidDisplay03, fluidDisplay04, 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';
@@ -534,6 +534,45 @@ function adjustLightness(token, shift) {
 function adjustAlpha(token, alpha) {
   return Color(token).rgb().alpha(alpha).string();
 }
+var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+/**
+ * Format a given token into the format expected in CSS/SCSS-based projects.
+ * @param {string} token
+ * @returns {string}
+ */
+
+function formatTokenName(token) {
+  var string = '';
+
+  for (var i = 0; i < token.length; i++) {
+    // If we run into a number, we hit the scale step at the end of a token name
+    // and can safely truncate the rest of the token
+    if (numbers.indexOf(token[i]) !== -1) {
+      string += '-' + token.slice(i);
+      break;
+    } // When encountering an uppercase name, we will want to start adding `-`
+    // between words
+
+
+    if (token[i] === token[i].toUpperCase()) {
+      // Check backwards to see if previous letter was also capitalized, if so
+      // we are in a special case like UI where each piece should be connected
+      if (token[i - 1] && token[i - 1] === token[i - 1].toUpperCase()) {
+        string += token[i].toLowerCase();
+        continue;
+      } // Otherwise, just concatenate this new part on to the existing string
+
+
+      string += '-' + token[i].toLowerCase();
+      continue;
+    } // By default, we add the current character to the output string
+
+
+    string += token[i];
+  }
+
+  return string;
+}
 
 /**
  * Copyright IBM Corp. 2018, 2018
@@ -1789,7 +1828,7 @@ var disabled02$3 = gray30;
 var disabled03$3 = gray50;
 var highlight$3 = blue20;
 var decorative01$3 = gray20;
-var buttonSeparator$3 = '#e0e0e0';
+var buttonSeparator$4 = '#e0e0e0';
 var skeleton01$3 = '#e5e5e5';
 var skeleton02$3 = gray30; // New color tokens
 // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
@@ -1832,17 +1871,17 @@ var supportInfoInverse$3 = inverseSupport04$3;
 var overlay$3 = overlay01$3;
 var toggleOff$3 = ui04$3;
 var shadow$3 = rgba(black, 0.3);
-var buttonPrimary$3 = interactive01$3;
-var buttonSecondary$3 = interactive02$3;
-var buttonTertiary$3 = interactive03$3;
-var buttonDangerPrimary$3 = danger01$3;
-var buttonDangerSecondary$3 = danger02$3;
+var buttonPrimary$4 = interactive01$3;
+var buttonSecondary$4 = interactive02$3;
+var buttonTertiary$4 = interactive03$3;
+var buttonDangerPrimary$4 = danger01$3;
+var buttonDangerSecondary$4 = danger02$3;
 var backgroundActive$3 = activeUI$3;
 var layerActive$3 = activeUI$3;
-var buttonDangerActive$3 = activeDanger$3;
-var buttonPrimaryActive$3 = activePrimary$3;
-var buttonSecondaryActive$3 = activeSecondary$3;
-var buttonTertiaryActive$3 = activeTertiary$3;
+var buttonDangerActive$4 = activeDanger$3;
+var buttonPrimaryActive$4 = activePrimary$3;
+var buttonSecondaryActive$4 = activeSecondary$3;
+var buttonTertiaryActive$4 = activeTertiary$3;
 var focusInset$3 = inverse01$3;
 var focusInverse$3 = inverseFocusUi$3;
 var backgroundHover$3 = hoverUI$3;
@@ -1850,10 +1889,10 @@ var layerHover$3 = hoverUI$3;
 var fieldHover$3 = hoverUI$3;
 var backgroundInverseHover$3 = inverseHoverUI$3;
 var linkPrimaryHover$3 = hoverPrimaryText$3;
-var buttonDangerHover$3 = hoverDanger$3;
-var buttonPrimaryHover$3 = hoverPrimary$3;
-var buttonSecondaryHover$3 = hoverSecondary$3;
-var buttonTertiaryHover$3 = hoverTertiary$3;
+var buttonDangerHover$4 = hoverDanger$3;
+var buttonPrimaryHover$4 = hoverPrimary$3;
+var buttonSecondaryHover$4 = hoverSecondary$3;
+var buttonTertiaryHover$4 = hoverTertiary$3;
 var backgroundSelected$3 = selectedUI$3;
 var backgroundSelectedHover$3 = hoverSelectedUI$3;
 var layerSelected$3 = selectedUI$3;
@@ -1862,7 +1901,7 @@ var layerSelectedInverse$3 = ui05$3;
 var borderSubtleSelected$3 = activeUI$3;
 var borderDisabled$3 = disabled01$3;
 var textDisabled$3 = disabled02$3;
-var buttonDisabled$3 = disabled02$3;
+var buttonDisabled$4 = disabled02$3;
 var iconDisabled$3 = disabled02$3;
 var textOnColorDisabled$3 = disabled03$3;
 var iconOnColorDisabled$3 = disabled03$3;
@@ -1942,7 +1981,7 @@ var white = /*#__PURE__*/Object.freeze({
   disabled03: disabled03$3,
   highlight: highlight$3,
   decorative01: decorative01$3,
-  buttonSeparator: buttonSeparator$3,
+  buttonSeparator: buttonSeparator$4,
   skeleton01: skeleton01$3,
   skeleton02: skeleton02$3,
   background: background$4,
@@ -1983,17 +2022,17 @@ var white = /*#__PURE__*/Object.freeze({
   overlay: overlay$3,
   toggleOff: toggleOff$3,
   shadow: shadow$3,
-  buttonPrimary: buttonPrimary$3,
-  buttonSecondary: buttonSecondary$3,
-  buttonTertiary: buttonTertiary$3,
-  buttonDangerPrimary: buttonDangerPrimary$3,
-  buttonDangerSecondary: buttonDangerSecondary$3,
+  buttonPrimary: buttonPrimary$4,
+  buttonSecondary: buttonSecondary$4,
+  buttonTertiary: buttonTertiary$4,
+  buttonDangerPrimary: buttonDangerPrimary$4,
+  buttonDangerSecondary: buttonDangerSecondary$4,
   backgroundActive: backgroundActive$3,
   layerActive: layerActive$3,
-  buttonDangerActive: buttonDangerActive$3,
-  buttonPrimaryActive: buttonPrimaryActive$3,
-  buttonSecondaryActive: buttonSecondaryActive$3,
-  buttonTertiaryActive: buttonTertiaryActive$3,
+  buttonDangerActive: buttonDangerActive$4,
+  buttonPrimaryActive: buttonPrimaryActive$4,
+  buttonSecondaryActive: buttonSecondaryActive$4,
+  buttonTertiaryActive: buttonTertiaryActive$4,
   focusInset: focusInset$3,
   focusInverse: focusInverse$3,
   backgroundHover: backgroundHover$3,
@@ -2001,10 +2040,10 @@ var white = /*#__PURE__*/Object.freeze({
   fieldHover: fieldHover$3,
   backgroundInverseHover: backgroundInverseHover$3,
   linkPrimaryHover: linkPrimaryHover$3,
-  buttonDangerHover: buttonDangerHover$3,
-  buttonPrimaryHover: buttonPrimaryHover$3,
-  buttonSecondaryHover: buttonSecondaryHover$3,
-  buttonTertiaryHover: buttonTertiaryHover$3,
+  buttonDangerHover: buttonDangerHover$4,
+  buttonPrimaryHover: buttonPrimaryHover$4,
+  buttonSecondaryHover: buttonSecondaryHover$4,
+  buttonTertiaryHover: buttonTertiaryHover$4,
   backgroundSelected: backgroundSelected$3,
   backgroundSelectedHover: backgroundSelectedHover$3,
   layerSelected: layerSelected$3,
@@ -2013,7 +2052,7 @@ var white = /*#__PURE__*/Object.freeze({
   borderSubtleSelected: borderSubtleSelected$3,
   borderDisabled: borderDisabled$3,
   textDisabled: textDisabled$3,
-  buttonDisabled: buttonDisabled$3,
+  buttonDisabled: buttonDisabled$4,
   iconDisabled: iconDisabled$3,
   textOnColorDisabled: textOnColorDisabled$3,
   iconOnColorDisabled: iconOnColorDisabled$3,
@@ -2186,7 +2225,7 @@ var disabled02$2 = gray30;
 var disabled03$2 = gray50;
 var highlight$2 = blue20;
 var decorative01$2 = gray20;
-var buttonSeparator$2 = '#e0e0e0';
+var buttonSeparator$3 = '#e0e0e0';
 var skeleton01$2 = '#e5e5e5';
 var skeleton02$2 = gray30; // New color tokens
 // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
@@ -2229,17 +2268,17 @@ var supportInfoInverse$2 = inverseSupport04$2;
 var overlay$2 = overlay01$2;
 var toggleOff$2 = ui04$2;
 var shadow$2 = rgba(black, 0.3);
-var buttonPrimary$2 = interactive01$2;
-var buttonSecondary$2 = interactive02$2;
-var buttonTertiary$2 = interactive03$2;
-var buttonDangerPrimary$2 = danger01$2;
-var buttonDangerSecondary$2 = danger02$2;
+var buttonPrimary$3 = interactive01$2;
+var buttonSecondary$3 = interactive02$2;
+var buttonTertiary$3 = interactive03$2;
+var buttonDangerPrimary$3 = danger01$2;
+var buttonDangerSecondary$3 = danger02$2;
 var backgroundActive$2 = activeUI$2;
 var layerActive$2 = activeUI$2;
-var buttonDangerActive$2 = activeDanger$2;
-var buttonPrimaryActive$2 = activePrimary$2;
-var buttonSecondaryActive$2 = activeSecondary$2;
-var buttonTertiaryActive$2 = activeTertiary$2;
+var buttonDangerActive$3 = activeDanger$2;
+var buttonPrimaryActive$3 = activePrimary$2;
+var buttonSecondaryActive$3 = activeSecondary$2;
+var buttonTertiaryActive$3 = activeTertiary$2;
 var focusInset$2 = inverse01$2;
 var focusInverse$2 = inverseFocusUi$2;
 var backgroundHover$2 = hoverUI$2;
@@ -2247,10 +2286,10 @@ var layerHover$2 = hoverUI$2;
 var fieldHover$2 = hoverUI$2;
 var backgroundInverseHover$2 = inverseHoverUI$2;
 var linkPrimaryHover$2 = hoverPrimaryText$2;
-var buttonDangerHover$2 = hoverDanger$2;
-var buttonPrimaryHover$2 = hoverPrimary$2;
-var buttonSecondaryHover$2 = hoverSecondary$2;
-var buttonTertiaryHover$2 = hoverTertiary$2;
+var buttonDangerHover$3 = hoverDanger$2;
+var buttonPrimaryHover$3 = hoverPrimary$2;
+var buttonSecondaryHover$3 = hoverSecondary$2;
+var buttonTertiaryHover$3 = hoverTertiary$2;
 var backgroundSelected$2 = selectedUI$2;
 var backgroundSelectedHover$2 = hoverSelectedUI$2;
 var layerSelected$2 = selectedUI$2;
@@ -2259,7 +2298,7 @@ var layerSelectedInverse$2 = ui05$2;
 var borderSubtleSelected$2 = activeUI$2;
 var borderDisabled$2 = disabled01$2;
 var textDisabled$2 = disabled02$2;
-var buttonDisabled$2 = disabled02$2;
+var buttonDisabled$3 = disabled02$2;
 var iconDisabled$2 = disabled02$2;
 var textOnColorDisabled$2 = disabled03$2;
 var iconOnColorDisabled$2 = disabled03$2;
@@ -2339,7 +2378,7 @@ var g10 = /*#__PURE__*/Object.freeze({
   disabled03: disabled03$2,
   highlight: highlight$2,
   decorative01: decorative01$2,
-  buttonSeparator: buttonSeparator$2,
+  buttonSeparator: buttonSeparator$3,
   skeleton01: skeleton01$2,
   skeleton02: skeleton02$2,
   background: background$3,
@@ -2380,17 +2419,17 @@ var g10 = /*#__PURE__*/Object.freeze({
   overlay: overlay$2,
   toggleOff: toggleOff$2,
   shadow: shadow$2,
-  buttonPrimary: buttonPrimary$2,
-  buttonSecondary: buttonSecondary$2,
-  buttonTertiary: buttonTertiary$2,
-  buttonDangerPrimary: buttonDangerPrimary$2,
-  buttonDangerSecondary: buttonDangerSecondary$2,
+  buttonPrimary: buttonPrimary$3,
+  buttonSecondary: buttonSecondary$3,
+  buttonTertiary: buttonTertiary$3,
+  buttonDangerPrimary: buttonDangerPrimary$3,
+  buttonDangerSecondary: buttonDangerSecondary$3,
   backgroundActive: backgroundActive$2,
   layerActive: layerActive$2,
-  buttonDangerActive: buttonDangerActive$2,
-  buttonPrimaryActive: buttonPrimaryActive$2,
-  buttonSecondaryActive: buttonSecondaryActive$2,
-  buttonTertiaryActive: buttonTertiaryActive$2,
+  buttonDangerActive: buttonDangerActive$3,
+  buttonPrimaryActive: buttonPrimaryActive$3,
+  buttonSecondaryActive: buttonSecondaryActive$3,
+  buttonTertiaryActive: buttonTertiaryActive$3,
   focusInset: focusInset$2,
   focusInverse: focusInverse$2,
   backgroundHover: backgroundHover$2,
@@ -2398,10 +2437,10 @@ var g10 = /*#__PURE__*/Object.freeze({
   fieldHover: fieldHover$2,
   backgroundInverseHover: backgroundInverseHover$2,
   linkPrimaryHover: linkPrimaryHover$2,
-  buttonDangerHover: buttonDangerHover$2,
-  buttonPrimaryHover: buttonPrimaryHover$2,
-  buttonSecondaryHover: buttonSecondaryHover$2,
-  buttonTertiaryHover: buttonTertiaryHover$2,
+  buttonDangerHover: buttonDangerHover$3,
+  buttonPrimaryHover: buttonPrimaryHover$3,
+  buttonSecondaryHover: buttonSecondaryHover$3,
+  buttonTertiaryHover: buttonTertiaryHover$3,
   backgroundSelected: backgroundSelected$2,
   backgroundSelectedHover: backgroundSelectedHover$2,
   layerSelected: layerSelected$2,
@@ -2410,7 +2449,7 @@ var g10 = /*#__PURE__*/Object.freeze({
   borderSubtleSelected: borderSubtleSelected$2,
   borderDisabled: borderDisabled$2,
   textDisabled: textDisabled$2,
-  buttonDisabled: buttonDisabled$2,
+  buttonDisabled: buttonDisabled$3,
   iconDisabled: iconDisabled$2,
   textOnColorDisabled: textOnColorDisabled$2,
   iconOnColorDisabled: iconOnColorDisabled$2,
@@ -2583,7 +2622,7 @@ var disabled02$1 = gray60;
 var disabled03$1 = gray40;
 var highlight$1 = blue70;
 var decorative01$1 = gray60;
-var buttonSeparator$1 = '#161616';
+var buttonSeparator$2 = '#161616';
 var skeleton01$1 = '#353535';
 var skeleton02$1 = gray70; // New color tokens
 // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
@@ -2626,17 +2665,17 @@ var supportInfoInverse$1 = inverseSupport04$1;
 var overlay$1 = overlay01$1;
 var toggleOff$1 = ui04$1;
 var shadow$1 = rgba(black, 0.8);
-var buttonPrimary$1 = interactive01$1;
-var buttonSecondary$1 = interactive02$1;
-var buttonTertiary$1 = interactive03$1;
-var buttonDangerPrimary$1 = danger01$1;
-var buttonDangerSecondary$1 = danger02$1;
+var buttonPrimary$2 = interactive01$1;
+var buttonSecondary$2 = interactive02$1;
+var buttonTertiary$2 = interactive03$1;
+var buttonDangerPrimary$2 = danger01$1;
+var buttonDangerSecondary$2 = danger02$1;
 var backgroundActive$1 = activeUI$1;
 var layerActive$1 = activeUI$1;
-var buttonDangerActive$1 = activeDanger$1;
-var buttonPrimaryActive$1 = activePrimary$1;
-var buttonSecondaryActive$1 = activeSecondary$1;
-var buttonTertiaryActive$1 = activeTertiary$1;
+var buttonDangerActive$2 = activeDanger$1;
+var buttonPrimaryActive$2 = activePrimary$1;
+var buttonSecondaryActive$2 = activeSecondary$1;
+var buttonTertiaryActive$2 = activeTertiary$1;
 var focusInset$1 = inverse01$1;
 var focusInverse$1 = inverseFocusUi$1;
 var backgroundHover$1 = hoverUI$1;
@@ -2644,10 +2683,10 @@ var layerHover$1 = hoverUI$1;
 var fieldHover$1 = hoverUI$1;
 var backgroundInverseHover$1 = inverseHoverUI$1;
 var linkPrimaryHover$1 = hoverPrimaryText$1;
-var buttonDangerHover$1 = hoverDanger$1;
-var buttonPrimaryHover$1 = hoverPrimary$1;
-var buttonSecondaryHover$1 = hoverSecondary$1;
-var buttonTertiaryHover$1 = hoverTertiary$1;
+var buttonDangerHover$2 = hoverDanger$1;
+var buttonPrimaryHover$2 = hoverPrimary$1;
+var buttonSecondaryHover$2 = hoverSecondary$1;
+var buttonTertiaryHover$2 = hoverTertiary$1;
 var backgroundSelected$1 = selectedUI$1;
 var backgroundSelectedHover$1 = hoverSelectedUI$1;
 var layerSelected$1 = selectedUI$1;
@@ -2656,7 +2695,7 @@ var layerSelectedInverse$1 = ui05$1;
 var borderSubtleSelected$1 = activeUI$1;
 var borderDisabled$1 = disabled01$1;
 var textDisabled$1 = disabled02$1;
-var buttonDisabled$1 = disabled02$1;
+var buttonDisabled$2 = disabled02$1;
 var iconDisabled$1 = disabled02$1;
 var textOnColorDisabled$1 = disabled03$1;
 var iconOnColorDisabled$1 = disabled03$1;
@@ -2736,7 +2775,7 @@ var g90 = /*#__PURE__*/Object.freeze({
   disabled03: disabled03$1,
   highlight: highlight$1,
   decorative01: decorative01$1,
-  buttonSeparator: buttonSeparator$1,
+  buttonSeparator: buttonSeparator$2,
   skeleton01: skeleton01$1,
   skeleton02: skeleton02$1,
   background: background$2,
@@ -2777,17 +2816,17 @@ var g90 = /*#__PURE__*/Object.freeze({
   overlay: overlay$1,
   toggleOff: toggleOff$1,
   shadow: shadow$1,
-  buttonPrimary: buttonPrimary$1,
-  buttonSecondary: buttonSecondary$1,
-  buttonTertiary: buttonTertiary$1,
-  buttonDangerPrimary: buttonDangerPrimary$1,
-  buttonDangerSecondary: buttonDangerSecondary$1,
+  buttonPrimary: buttonPrimary$2,
+  buttonSecondary: buttonSecondary$2,
+  buttonTertiary: buttonTertiary$2,
+  buttonDangerPrimary: buttonDangerPrimary$2,
+  buttonDangerSecondary: buttonDangerSecondary$2,
   backgroundActive: backgroundActive$1,
   layerActive: layerActive$1,
-  buttonDangerActive: buttonDangerActive$1,
-  buttonPrimaryActive: buttonPrimaryActive$1,
-  buttonSecondaryActive: buttonSecondaryActive$1,
-  buttonTertiaryActive: buttonTertiaryActive$1,
+  buttonDangerActive: buttonDangerActive$2,
+  buttonPrimaryActive: buttonPrimaryActive$2,
+  buttonSecondaryActive: buttonSecondaryActive$2,
+  buttonTertiaryActive: buttonTertiaryActive$2,
   focusInset: focusInset$1,
   focusInverse: focusInverse$1,
   backgroundHover: backgroundHover$1,
@@ -2795,10 +2834,10 @@ var g90 = /*#__PURE__*/Object.freeze({
   fieldHover: fieldHover$1,
   backgroundInverseHover: backgroundInverseHover$1,
   linkPrimaryHover: linkPrimaryHover$1,
-  buttonDangerHover: buttonDangerHover$1,
-  buttonPrimaryHover: buttonPrimaryHover$1,
-  buttonSecondaryHover: buttonSecondaryHover$1,
-  buttonTertiaryHover: buttonTertiaryHover$1,
+  buttonDangerHover: buttonDangerHover$2,
+  buttonPrimaryHover: buttonPrimaryHover$2,
+  buttonSecondaryHover: buttonSecondaryHover$2,
+  buttonTertiaryHover: buttonTertiaryHover$2,
   backgroundSelected: backgroundSelected$1,
   backgroundSelectedHover: backgroundSelectedHover$1,
   layerSelected: layerSelected$1,
@@ -2807,7 +2846,7 @@ var g90 = /*#__PURE__*/Object.freeze({
   borderSubtleSelected: borderSubtleSelected$1,
   borderDisabled: borderDisabled$1,
   textDisabled: textDisabled$1,
-  buttonDisabled: buttonDisabled$1,
+  buttonDisabled: buttonDisabled$2,
   iconDisabled: iconDisabled$1,
   textOnColorDisabled: textOnColorDisabled$1,
   iconOnColorDisabled: iconOnColorDisabled$1,
@@ -2980,7 +3019,7 @@ var disabled02 = gray70;
 var disabled03 = gray50;
 var highlight = blue80;
 var decorative01 = gray70;
-var buttonSeparator = '#161616';
+var buttonSeparator$1 = '#161616';
 var skeleton01 = '#353535';
 var skeleton02 = gray70; // New color tokens
 // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
@@ -3023,17 +3062,17 @@ var supportInfoInverse = inverseSupport04;
 var overlay = overlay01;
 var toggleOff = ui04;
 var shadow = rgba(black, 0.8);
-var buttonPrimary = interactive01;
-var buttonSecondary = interactive02;
-var buttonTertiary = interactive03;
-var buttonDangerPrimary = danger01;
-var buttonDangerSecondary = danger02;
+var buttonPrimary$1 = interactive01;
+var buttonSecondary$1 = interactive02;
+var buttonTertiary$1 = interactive03;
+var buttonDangerPrimary$1 = danger01;
+var buttonDangerSecondary$1 = danger02;
 var backgroundActive = activeUI;
 var layerActive = activeUI;
-var buttonDangerActive = activeDanger;
-var buttonPrimaryActive = activePrimary;
-var buttonSecondaryActive = activeSecondary;
-var buttonTertiaryActive = activeTertiary;
+var buttonDangerActive$1 = activeDanger;
+var buttonPrimaryActive$1 = activePrimary;
+var buttonSecondaryActive$1 = activeSecondary;
+var buttonTertiaryActive$1 = activeTertiary;
 var focusInset = inverse01;
 var focusInverse = inverseFocusUi;
 var backgroundHover = hoverUI;
@@ -3041,10 +3080,10 @@ var layerHover = hoverUI;
 var fieldHover = hoverUI;
 var backgroundInverseHover = inverseHoverUI;
 var linkPrimaryHover = hoverPrimaryText;
-var buttonDangerHover = hoverDanger;
-var buttonPrimaryHover = hoverPrimary;
-var buttonSecondaryHover = hoverSecondary;
-var buttonTertiaryHover = hoverTertiary;
+var buttonDangerHover$1 = hoverDanger;
+var buttonPrimaryHover$1 = hoverPrimary;
+var buttonSecondaryHover$1 = hoverSecondary;
+var buttonTertiaryHover$1 = hoverTertiary;
 var backgroundSelected = selectedUI;
 var backgroundSelectedHover = hoverSelectedUI;
 var layerSelected = selectedUI;
@@ -3053,7 +3092,7 @@ var layerSelectedInverse = ui05;
 var borderSubtleSelected = activeUI;
 var borderDisabled = disabled01;
 var textDisabled = disabled02;
-var buttonDisabled = disabled02;
+var buttonDisabled$1 = disabled02;
 var iconDisabled = disabled02;
 var textOnColorDisabled = disabled03;
 var iconOnColorDisabled = disabled03;
@@ -3133,7 +3172,7 @@ var g100 = /*#__PURE__*/Object.freeze({
   disabled03: disabled03,
   highlight: highlight,
   decorative01: decorative01,
-  buttonSeparator: buttonSeparator,
+  buttonSeparator: buttonSeparator$1,
   skeleton01: skeleton01,
   skeleton02: skeleton02,
   background: background$1,
@@ -3174,17 +3213,17 @@ var g100 = /*#__PURE__*/Object.freeze({
   overlay: overlay,
   toggleOff: toggleOff,
   shadow: shadow,
-  buttonPrimary: buttonPrimary,
-  buttonSecondary: buttonSecondary,
-  buttonTertiary: buttonTertiary,
-  buttonDangerPrimary: buttonDangerPrimary,
-  buttonDangerSecondary: buttonDangerSecondary,
+  buttonPrimary: buttonPrimary$1,
+  buttonSecondary: buttonSecondary$1,
+  buttonTertiary: buttonTertiary$1,
+  buttonDangerPrimary: buttonDangerPrimary$1,
+  buttonDangerSecondary: buttonDangerSecondary$1,
   backgroundActive: backgroundActive,
   layerActive: layerActive,
-  buttonDangerActive: buttonDangerActive,
-  buttonPrimaryActive: buttonPrimaryActive,
-  buttonSecondaryActive: buttonSecondaryActive,
-  buttonTertiaryActive: buttonTertiaryActive,
+  buttonDangerActive: buttonDangerActive$1,
+  buttonPrimaryActive: buttonPrimaryActive$1,
+  buttonSecondaryActive: buttonSecondaryActive$1,
+  buttonTertiaryActive: buttonTertiaryActive$1,
   focusInset: focusInset,
   focusInverse: focusInverse,
   backgroundHover: backgroundHover,
@@ -3192,10 +3231,10 @@ var g100 = /*#__PURE__*/Object.freeze({
   fieldHover: fieldHover,
   backgroundInverseHover: backgroundInverseHover,
   linkPrimaryHover: linkPrimaryHover,
-  buttonDangerHover: buttonDangerHover,
-  buttonPrimaryHover: buttonPrimaryHover,
-  buttonSecondaryHover: buttonSecondaryHover,
-  buttonTertiaryHover: buttonTertiaryHover,
+  buttonDangerHover: buttonDangerHover$1,
+  buttonPrimaryHover: buttonPrimaryHover$1,
+  buttonSecondaryHover: buttonSecondaryHover$1,
+  buttonTertiaryHover: buttonTertiaryHover$1,
   backgroundSelected: backgroundSelected,
   backgroundSelectedHover: backgroundSelectedHover,
   layerSelected: layerSelected,
@@ -3204,7 +3243,7 @@ var g100 = /*#__PURE__*/Object.freeze({
   borderSubtleSelected: borderSubtleSelected,
   borderDisabled: borderDisabled,
   textDisabled: textDisabled,
-  buttonDisabled: buttonDisabled,
+  buttonDisabled: buttonDisabled$1,
   iconDisabled: iconDisabled,
   textOnColorDisabled: textOnColorDisabled,
   iconOnColorDisabled: iconOnColorDisabled,
@@ -3321,7 +3360,7 @@ var colors = [// Core
 // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
 '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', 'shadow', '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', 'borderDisabled', 'textDisabled', 'buttonDisabled', 'iconDisabled', 'textOnColorDisabled', 'iconOnColorDisabled', 'layerSelectedDisabled', 'skeletonBackground', 'skeletonElement', // Deprecated
 'brand01', 'brand02', 'brand03', 'active01', 'hoverField', 'danger'];
-var tokens = {
+var tokens$2 = {
   colors: colors,
   type: unstable_tokens,
   layout: unstable_tokens$1
@@ -3340,14 +3379,14 @@ var themes$1 = {
   g100: g100
 };
 
-var index = /*#__PURE__*/Object.freeze({
+var index$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   white: white,
   g10: g10,
   g90: g90,
   g100: g100,
   themes: themes$1,
-  tokens: tokens,
+  tokens: tokens$2,
   caption01: caption01,
   caption02: caption02,
   label01: label01,
@@ -3499,7 +3538,7 @@ var index = /*#__PURE__*/Object.freeze({
   disabled03: disabled03$3,
   highlight: highlight$3,
   decorative01: decorative01$3,
-  buttonSeparator: buttonSeparator$3,
+  buttonSeparator: buttonSeparator$4,
   skeleton01: skeleton01$3,
   skeleton02: skeleton02$3,
   background: background$4,
@@ -3540,17 +3579,17 @@ var index = /*#__PURE__*/Object.freeze({
   overlay: overlay$3,
   toggleOff: toggleOff$3,
   shadow: shadow$3,
-  buttonPrimary: buttonPrimary$3,
-  buttonSecondary: buttonSecondary$3,
-  buttonTertiary: buttonTertiary$3,
-  buttonDangerPrimary: buttonDangerPrimary$3,
-  buttonDangerSecondary: buttonDangerSecondary$3,
+  buttonPrimary: buttonPrimary$4,
+  buttonSecondary: buttonSecondary$4,
+  buttonTertiary: buttonTertiary$4,
+  buttonDangerPrimary: buttonDangerPrimary$4,
+  buttonDangerSecondary: buttonDangerSecondary$4,
   backgroundActive: backgroundActive$3,
   layerActive: layerActive$3,
-  buttonDangerActive: buttonDangerActive$3,
-  buttonPrimaryActive: buttonPrimaryActive$3,
-  buttonSecondaryActive: buttonSecondaryActive$3,
-  buttonTertiaryActive: buttonTertiaryActive$3,
+  buttonDangerActive: buttonDangerActive$4,
+  buttonPrimaryActive: buttonPrimaryActive$4,
+  buttonSecondaryActive: buttonSecondaryActive$4,
+  buttonTertiaryActive: buttonTertiaryActive$4,
   focusInset: focusInset$3,
   focusInverse: focusInverse$3,
   backgroundHover: backgroundHover$3,
@@ -3558,10 +3597,10 @@ var index = /*#__PURE__*/Object.freeze({
   fieldHover: fieldHover$3,
   backgroundInverseHover: backgroundInverseHover$3,
   linkPrimaryHover: linkPrimaryHover$3,
-  buttonDangerHover: buttonDangerHover$3,
-  buttonPrimaryHover: buttonPrimaryHover$3,
-  buttonSecondaryHover: buttonSecondaryHover$3,
-  buttonTertiaryHover: buttonTertiaryHover$3,
+  buttonDangerHover: buttonDangerHover$4,
+  buttonPrimaryHover: buttonPrimaryHover$4,
+  buttonSecondaryHover: buttonSecondaryHover$4,
+  buttonTertiaryHover: buttonTertiaryHover$4,
   backgroundSelected: backgroundSelected$3,
   backgroundSelectedHover: backgroundSelectedHover$3,
   layerSelected: layerSelected$3,
@@ -3570,7 +3609,7 @@ var index = /*#__PURE__*/Object.freeze({
   borderSubtleSelected: borderSubtleSelected$3,
   borderDisabled: borderDisabled$3,
   textDisabled: textDisabled$3,
-  buttonDisabled: buttonDisabled$3,
+  buttonDisabled: buttonDisabled$4,
   iconDisabled: iconDisabled$3,
   textOnColorDisabled: textOnColorDisabled$3,
   iconOnColorDisabled: iconOnColorDisabled$3,
@@ -3585,6 +3624,342 @@ var index = /*#__PURE__*/Object.freeze({
   danger: danger$3
 });
 
+var buttonSeparator = {
+  fallback: '#e0e0e0',
+  whiteTheme: '#e0e0e0',
+  g10: '#e0e0e0',
+  g90: '#161616',
+  g100: '#161616'
+};
+var buttonPrimary = {
+  whiteTheme: '#0f62fe',
+  g10: '#0f62fe',
+  g90: '#0f62fe',
+  g100: '#0f62fe'
+};
+var buttonSecondary = {
+  whiteTheme: '#393939',
+  g10: '#393939',
+  g90: '#6f6f6f',
+  g100: '#6f6f6f'
+};
+var buttonTertiary = {
+  whiteTheme: '#0f62fe',
+  g10: '#0f62fe',
+  g90: '#ffffff',
+  g100: '#ffffff'
+};
+var buttonDangerPrimary = {
+  whiteTheme: '#da1e28',
+  g10: '#da1e28',
+  g90: '#da1e28',
+  g100: '#da1e28'
+};
+var buttonDangerSecondary = {
+  whiteTheme: '#da1e28',
+  g10: '#da1e28',
+  g90: '#ff8389',
+  g100: '#fa4d56'
+};
+var buttonDangerActive = {
+  whiteTheme: '#750e13',
+  g10: '#750e13',
+  g90: '#750e13',
+  g100: '#750e13'
+};
+var buttonPrimaryActive = {
+  whiteTheme: '#002d9c',
+  g10: '#002d9c',
+  g90: '#002d9c',
+  g100: '#002d9c'
+};
+var buttonSecondaryActive = {
+  whiteTheme: '#6f6f6f',
+  g10: '#6f6f6f',
+  g90: '#393939',
+  g100: '#393939'
+};
+var buttonTertiaryActive = {
+  whiteTheme: '#002d9c',
+  g10: '#002d9c',
+  g90: '#c6c6c6',
+  g100: '#c6c6c6'
+};
+var buttonDangerHover = {
+  whiteTheme: '#b81921',
+  g10: '#b81921',
+  g90: '#b81921',
+  g100: '#b81921'
+};
+var buttonPrimaryHover = {
+  whiteTheme: '#0050e6',
+  g10: '#0050e6',
+  g90: '#0050e6',
+  g100: '#0050e6'
+};
+var buttonSecondaryHover = {
+  whiteTheme: '#474747',
+  g10: '#474747',
+  g90: '#5e5e5e',
+  g100: '#5e5e5e'
+};
+var buttonTertiaryHover = {
+  whiteTheme: '#0050e6',
+  g10: '#0050e6',
+  g90: '#f4f4f4',
+  g100: '#f4f4f4'
+};
+var buttonDisabled = {
+  whiteTheme: '#c6c6c6',
+  g10: '#c6c6c6',
+  g90: 'rgb(141 141 141 / 30%)',
+  g100: 'rgb(141 141 141 / 30%)'
+};
+
+var tokens$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  buttonSeparator: buttonSeparator,
+  buttonPrimary: buttonPrimary,
+  buttonSecondary: buttonSecondary,
+  buttonTertiary: buttonTertiary,
+  buttonDangerPrimary: buttonDangerPrimary,
+  buttonDangerSecondary: buttonDangerSecondary,
+  buttonDangerActive: buttonDangerActive,
+  buttonPrimaryActive: buttonPrimaryActive,
+  buttonSecondaryActive: buttonSecondaryActive,
+  buttonTertiaryActive: buttonTertiaryActive,
+  buttonDangerHover: buttonDangerHover,
+  buttonPrimaryHover: buttonPrimaryHover,
+  buttonSecondaryHover: buttonSecondaryHover,
+  buttonTertiaryHover: buttonTertiaryHover,
+  buttonDisabled: buttonDisabled
+});
+
+var index$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  buttonTokens: tokens$1
+});
+
+var tagBackgroundRed = {
+  whiteTheme: red20,
+  g10: red20,
+  g90: red70,
+  g100: red70
+};
+var tagColorRed = {
+  whiteTheme: red80,
+  g10: red80,
+  g90: red20,
+  g100: red20
+};
+var tagHoverRed = {
+  whiteTheme: red30,
+  g10: red30,
+  g90: red70Hover,
+  g100: red70Hover
+};
+var tagBackgroundMagenta = {
+  whiteTheme: magenta20,
+  g10: magenta20,
+  g90: magenta70,
+  g100: magenta70
+};
+var tagColorMagenta = {
+  whiteTheme: magenta80,
+  g10: magenta80,
+  g90: magenta20,
+  g100: magenta20
+};
+var tagHoverMagenta = {
+  whiteTheme: magenta30,
+  g10: magenta30,
+  g90: magenta70Hover,
+  g100: magenta70Hover
+};
+var tagBackgroundPurple = {
+  whiteTheme: purple20,
+  g10: purple20,
+  g90: purple70,
+  g100: purple70
+};
+var tagColorPurple = {
+  whiteTheme: purple80,
+  g10: purple80,
+  g90: purple20,
+  g100: purple20
+};
+var tagHoverPurple = {
+  whiteTheme: purple30,
+  g10: purple30,
+  g90: purple70Hover,
+  g100: purple70Hover
+};
+var tagBackgroundBlue = {
+  whiteTheme: blue20,
+  g10: blue20,
+  g90: blue70,
+  g100: blue70
+};
+var tagColorBlue = {
+  whiteTheme: blue80,
+  g10: blue80,
+  g90: blue20,
+  g100: blue20
+};
+var tagHoverBlue = {
+  whiteTheme: blue30,
+  g10: blue30,
+  g90: blue70Hover,
+  g100: blue70Hover
+};
+var tagBackgroundCyan = {
+  whiteTheme: cyan20,
+  g10: cyan20,
+  g90: cyan70,
+  g100: cyan70
+};
+var tagColorCyan = {
+  whiteTheme: cyan80,
+  g10: cyan80,
+  g90: cyan20,
+  g100: cyan20
+};
+var tagHoverCyan = {
+  whiteTheme: cyan30,
+  g10: cyan30,
+  g90: cyan70Hover,
+  g100: cyan70Hover
+};
+var tagBackgroundTeal = {
+  whiteTheme: teal20,
+  g10: teal20,
+  g90: teal70,
+  g100: teal70
+};
+var tagColorTeal = {
+  whiteTheme: teal80,
+  g10: teal80,
+  g90: teal20,
+  g100: teal20
+};
+var tagHoverTeal = {
+  whiteTheme: teal30,
+  g10: teal30,
+  g90: teal70Hover,
+  g100: teal70Hover
+};
+var tagBackgroundGreen = {
+  whiteTheme: green20,
+  g10: green20,
+  g90: green70,
+  g100: green70
+};
+var tagColorGreen = {
+  whiteTheme: green80,
+  g10: green80,
+  g90: green20,
+  g100: green20
+};
+var tagHoverGreen = {
+  whiteTheme: green30,
+  g10: green30,
+  g90: green70Hover,
+  g100: green70Hover
+};
+var tagBackgroundGray = {
+  whiteTheme: gray20,
+  g10: gray20,
+  g90: gray70,
+  g100: gray70
+};
+var tagColorGray = {
+  whiteTheme: gray80,
+  g10: gray80,
+  g90: gray20,
+  g100: gray20
+};
+var tagHoverGray = {
+  whiteTheme: gray30,
+  g10: gray30,
+  g90: gray70Hover,
+  g100: gray70Hover
+};
+var tagBackgroundCoolGray = {
+  whiteTheme: coolGray20,
+  g10: coolGray20,
+  g90: coolGray70,
+  g100: coolGray70
+};
+var tagColorCoolGray = {
+  whiteTheme: coolGray80,
+  g10: coolGray80,
+  g90: coolGray20,
+  g100: coolGray20
+};
+var tagHoverCoolGray = {
+  whiteTheme: coolGray30,
+  g10: coolGray30,
+  g90: coolGray70Hover,
+  g100: coolGray70Hover
+};
+var tagBackgroundWarmGray = {
+  whiteTheme: warmGray20,
+  g10: warmGray20,
+  g90: warmGray70,
+  g100: warmGray70
+};
+var tagColorWarmGray = {
+  whiteTheme: warmGray80,
+  g10: warmGray80,
+  g90: warmGray20,
+  g100: warmGray20
+};
+var tagHoverWarmGray = {
+  whiteTheme: warmGray30,
+  g10: warmGray30,
+  g90: warmGray70Hover,
+  g100: warmGray70Hover
+};
+
+var tokens = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  tagBackgroundRed: tagBackgroundRed,
+  tagColorRed: tagColorRed,
+  tagHoverRed: tagHoverRed,
+  tagBackgroundMagenta: tagBackgroundMagenta,
+  tagColorMagenta: tagColorMagenta,
+  tagHoverMagenta: tagHoverMagenta,
+  tagBackgroundPurple: tagBackgroundPurple,
+  tagColorPurple: tagColorPurple,
+  tagHoverPurple: tagHoverPurple,
+  tagBackgroundBlue: tagBackgroundBlue,
+  tagColorBlue: tagColorBlue,
+  tagHoverBlue: tagHoverBlue,
+  tagBackgroundCyan: tagBackgroundCyan,
+  tagColorCyan: tagColorCyan,
+  tagHoverCyan: tagHoverCyan,
+  tagBackgroundTeal: tagBackgroundTeal,
+  tagColorTeal: tagColorTeal,
+  tagHoverTeal: tagHoverTeal,
+  tagBackgroundGreen: tagBackgroundGreen,
+  tagColorGreen: tagColorGreen,
+  tagHoverGreen: tagHoverGreen,
+  tagBackgroundGray: tagBackgroundGray,
+  tagColorGray: tagColorGray,
+  tagHoverGray: tagHoverGray,
+  tagBackgroundCoolGray: tagBackgroundCoolGray,
+  tagColorCoolGray: tagColorCoolGray,
+  tagHoverCoolGray: tagHoverCoolGray,
+  tagBackgroundWarmGray: tagBackgroundWarmGray,
+  tagColorWarmGray: tagColorWarmGray,
+  tagHoverWarmGray: tagHoverWarmGray
+});
+
+var index = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  tagTokens: tokens
+});
+
 /**
  * Copyright IBM Corp. 2018, 2018
  *
@@ -4271,4 +4646,4 @@ var themes = {
   g100: g100$1
 };
 
-export { background$8 as background, backgroundActive$7 as backgroundActive, backgroundBrand$7 as backgroundBrand, backgroundHover$7 as backgroundHover, backgroundInverse$7 as backgroundInverse, backgroundInverseHover$7 as backgroundInverseHover, backgroundSelected$7 as backgroundSelected, backgroundSelectedHover$7 as backgroundSelectedHover, borderDisabled$7 as borderDisabled, borderInteractive$7 as borderInteractive, borderInverse$7 as borderInverse, borderStrong01$3 as borderStrong01, borderStrong02$3 as borderStrong02, borderStrong03$3 as borderStrong03, borderSubtle00$3 as borderSubtle00, borderSubtle01$3 as borderSubtle01, borderSubtle02$3 as borderSubtle02, borderSubtle03$3 as borderSubtle03, borderSubtleSelected01$3 as borderSubtleSelected01, borderSubtleSelected02$3 as borderSubtleSelected02, borderSubtleSelected03$3 as borderSubtleSelected03, field01$7 as field01, field02$7 as field02, field03$3 as field03, fieldHover01$3 as fieldHover01, fieldHover02$3 as fieldHover02, fieldHover03$3 as fieldHover03, focus$8 as focus, focusInset$7 as focusInset, focusInverse$7 as focusInverse, g10$1 as g10, g100$1 as g100, g90$1 as g90, highlight$7 as highlight, iconDisabled$7 as iconDisabled, iconInverse$7 as iconInverse, iconOnColor$7 as iconOnColor, iconOnColorDisabled$7 as iconOnColorDisabled, iconPrimary$7 as iconPrimary, iconSecondary$7 as iconSecondary, interactive$7 as interactive, layer01$3 as layer01, layer02$3 as layer02, layer03$3 as layer03, layerAccent01$3 as layerAccent01, layerAccent02$3 as layerAccent02, layerAccent03$3 as layerAccent03, layerAccentActive01$3 as layerAccentActive01, layerAccentActive02$3 as layerAccentActive02, layerAccentActive03$3 as layerAccentActive03, layerAccentHover01$3 as layerAccentHover01, layerAccentHover02$3 as layerAccentHover02, layerAccentHover03$3 as layerAccentHover03, layerActive01$3 as layerActive01, layerActive02$3 as layerActive02, layerActive03$3 as layerActive03, layerHover01$3 as layerHover01, layerHover02$3 as layerHover02, layerHover03$3 as layerHover03, layerSelected01$3 as layerSelected01, layerSelected02$3 as layerSelected02, layerSelected03$3 as layerSelected03, layerSelectedDisabled$7 as layerSelectedDisabled, layerSelectedHover01$3 as layerSelectedHover01, layerSelectedHover02$3 as layerSelectedHover02, layerSelectedHover03$3 as layerSelectedHover03, layerSelectedInverse$7 as layerSelectedInverse, linkInverse$7 as linkInverse, linkInverseActive$3 as linkInverseActive, linkInverseHover$3 as linkInverseHover, linkPrimary$7 as linkPrimary, linkPrimaryHover$7 as linkPrimaryHover, linkSecondary$7 as linkSecondary, linkVisited$7 as linkVisited, overlay$7 as overlay, shadow$7 as shadow, skeletonBackground$7 as skeletonBackground, skeletonElement$7 as skeletonElement, supportCautionMajor$3 as supportCautionMajor, supportCautionMinor$3 as supportCautionMinor, supportCautionUndefined$3 as supportCautionUndefined, supportError$7 as supportError, supportErrorInverse$7 as supportErrorInverse, supportInfo$7 as supportInfo, supportInfoInverse$7 as supportInfoInverse, supportSuccess$7 as supportSuccess, supportSuccessInverse$7 as supportSuccessInverse, supportWarning$7 as supportWarning, supportWarningInverse$7 as supportWarningInverse, textDisabled$7 as textDisabled, textError$7 as textError, textHelper$7 as textHelper, textInverse$7 as textInverse, textOnColor$7 as textOnColor, textOnColorDisabled$7 as textOnColorDisabled, textPlaceholder$7 as textPlaceholder, textPrimary$7 as textPrimary, textSecondary$7 as textSecondary, themes, toggleOff$7 as toggleOff, unstable_metadata, index as v10, white$1 as white };
+export { background$8 as background, backgroundActive$7 as backgroundActive, backgroundBrand$7 as backgroundBrand, backgroundHover$7 as backgroundHover, backgroundInverse$7 as backgroundInverse, backgroundInverseHover$7 as backgroundInverseHover, backgroundSelected$7 as backgroundSelected, backgroundSelectedHover$7 as backgroundSelectedHover, borderDisabled$7 as borderDisabled, borderInteractive$7 as borderInteractive, borderInverse$7 as borderInverse, borderStrong01$3 as borderStrong01, borderStrong02$3 as borderStrong02, borderStrong03$3 as borderStrong03, borderSubtle00$3 as borderSubtle00, borderSubtle01$3 as borderSubtle01, borderSubtle02$3 as borderSubtle02, borderSubtle03$3 as borderSubtle03, borderSubtleSelected01$3 as borderSubtleSelected01, borderSubtleSelected02$3 as borderSubtleSelected02, borderSubtleSelected03$3 as borderSubtleSelected03, index$1 as buttonTokens, field01$7 as field01, field02$7 as field02, field03$3 as field03, fieldHover01$3 as fieldHover01, fieldHover02$3 as fieldHover02, fieldHover03$3 as fieldHover03, focus$8 as focus, focusInset$7 as focusInset, focusInverse$7 as focusInverse, formatTokenName, g10$1 as g10, g100$1 as g100, g90$1 as g90, highlight$7 as highlight, iconDisabled$7 as iconDisabled, iconInverse$7 as iconInverse, iconOnColor$7 as iconOnColor, iconOnColorDisabled$7 as iconOnColorDisabled, iconPrimary$7 as iconPrimary, iconSecondary$7 as iconSecondary, interactive$7 as interactive, layer01$3 as layer01, layer02$3 as layer02, layer03$3 as layer03, layerAccent01$3 as layerAccent01, layerAccent02$3 as layerAccent02, layerAccent03$3 as layerAccent03, layerAccentActive01$3 as layerAccentActive01, layerAccentActive02$3 as layerAccentActive02, layerAccentActive03$3 as layerAccentActive03, layerAccentHover01$3 as layerAccentHover01, layerAccentHover02$3 as layerAccentHover02, layerAccentHover03$3 as layerAccentHover03, layerActive01$3 as layerActive01, layerActive02$3 as layerActive02, layerActive03$3 as layerActive03, layerHover01$3 as layerHover01, layerHover02$3 as layerHover02, layerHover03$3 as layerHover03, layerSelected01$3 as layerSelected01, layerSelected02$3 as layerSelected02, layerSelected03$3 as layerSelected03, layerSelectedDisabled$7 as layerSelectedDisabled, layerSelectedHover01$3 as layerSelectedHover01, layerSelectedHover02$3 as layerSelectedHover02, layerSelectedHover03$3 as layerSelectedHover03, layerSelectedInverse$7 as layerSelectedInverse, linkInverse$7 as linkInverse, linkInverseActive$3 as linkInverseActive, linkInverseHover$3 as linkInverseHover, linkPrimary$7 as linkPrimary, linkPrimaryHover$7 as linkPrimaryHover, linkSecondary$7 as linkSecondary, linkVisited$7 as linkVisited, overlay$7 as overlay, shadow$7 as shadow, skeletonBackground$7 as skeletonBackground, skeletonElement$7 as skeletonElement, supportCautionMajor$3 as supportCautionMajor, supportCautionMinor$3 as supportCautionMinor, supportCautionUndefined$3 as supportCautionUndefined, supportError$7 as supportError, supportErrorInverse$7 as supportErrorInverse, supportInfo$7 as supportInfo, supportInfoInverse$7 as supportInfoInverse, supportSuccess$7 as supportSuccess, supportSuccessInverse$7 as supportSuccessInverse, supportWarning$7 as supportWarning, supportWarningInverse$7 as supportWarningInverse, index as tagTokens, textDisabled$7 as textDisabled, textError$7 as textError, textHelper$7 as textHelper, textInverse$7 as textInverse, textOnColor$7 as textOnColor, textOnColorDisabled$7 as textOnColorDisabled, textPlaceholder$7 as textPlaceholder, textPrimary$7 as textPrimary, textSecondary$7 as textSecondary, themes, toggleOff$7 as toggleOff, unstable_metadata, index$2 as v10, white$1 as white };