@carbon/themes 11.10.0 → 11.11.0

package/umd/index.js

@@ -537,6 +537,45 @@
   function adjustAlpha(token, alpha) {
     return Color__default["default"](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
@@ -1792,7 +1831,7 @@
   var disabled03$3 = colors$1.gray50;
   var highlight$3 = colors$1.blue20;
   var decorative01$3 = colors$1.gray20;
-  var buttonSeparator$3 = '#e0e0e0';
+  var buttonSeparator$4 = '#e0e0e0';
   var skeleton01$3 = '#e5e5e5';
   var skeleton02$3 = colors$1.gray30; // New color tokens
   // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
@@ -1835,17 +1874,17 @@
   var overlay$3 = overlay01$3;
   var toggleOff$3 = ui04$3;
   var shadow$3 = colors$1.rgba(colors$1.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;
@@ -1853,10 +1892,10 @@
   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;
@@ -1865,7 +1904,7 @@
   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;
@@ -1945,7 +1984,7 @@
     disabled03: disabled03$3,
     highlight: highlight$3,
     decorative01: decorative01$3,
-    buttonSeparator: buttonSeparator$3,
+    buttonSeparator: buttonSeparator$4,
     skeleton01: skeleton01$3,
     skeleton02: skeleton02$3,
     background: background$4,
@@ -1986,17 +2025,17 @@
     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,
@@ -2004,10 +2043,10 @@
     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,
@@ -2016,7 +2055,7 @@
     borderSubtleSelected: borderSubtleSelected$3,
     borderDisabled: borderDisabled$3,
     textDisabled: textDisabled$3,
-    buttonDisabled: buttonDisabled$3,
+    buttonDisabled: buttonDisabled$4,
     iconDisabled: iconDisabled$3,
     textOnColorDisabled: textOnColorDisabled$3,
     iconOnColorDisabled: iconOnColorDisabled$3,
@@ -2189,7 +2228,7 @@
   var disabled03$2 = colors$1.gray50;
   var highlight$2 = colors$1.blue20;
   var decorative01$2 = colors$1.gray20;
-  var buttonSeparator$2 = '#e0e0e0';
+  var buttonSeparator$3 = '#e0e0e0';
   var skeleton01$2 = '#e5e5e5';
   var skeleton02$2 = colors$1.gray30; // New color tokens
   // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
@@ -2232,17 +2271,17 @@
   var overlay$2 = overlay01$2;
   var toggleOff$2 = ui04$2;
   var shadow$2 = colors$1.rgba(colors$1.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;
@@ -2250,10 +2289,10 @@
   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;
@@ -2262,7 +2301,7 @@
   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;
@@ -2342,7 +2381,7 @@
     disabled03: disabled03$2,
     highlight: highlight$2,
     decorative01: decorative01$2,
-    buttonSeparator: buttonSeparator$2,
+    buttonSeparator: buttonSeparator$3,
     skeleton01: skeleton01$2,
     skeleton02: skeleton02$2,
     background: background$3,
@@ -2383,17 +2422,17 @@
     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,
@@ -2401,10 +2440,10 @@
     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,
@@ -2413,7 +2452,7 @@
     borderSubtleSelected: borderSubtleSelected$2,
     borderDisabled: borderDisabled$2,
     textDisabled: textDisabled$2,
-    buttonDisabled: buttonDisabled$2,
+    buttonDisabled: buttonDisabled$3,
     iconDisabled: iconDisabled$2,
     textOnColorDisabled: textOnColorDisabled$2,
     iconOnColorDisabled: iconOnColorDisabled$2,
@@ -2586,7 +2625,7 @@
   var disabled03$1 = colors$1.gray40;
   var highlight$1 = colors$1.blue70;
   var decorative01$1 = colors$1.gray60;
-  var buttonSeparator$1 = '#161616';
+  var buttonSeparator$2 = '#161616';
   var skeleton01$1 = '#353535';
   var skeleton02$1 = colors$1.gray70; // New color tokens
   // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
@@ -2629,17 +2668,17 @@
   var overlay$1 = overlay01$1;
   var toggleOff$1 = ui04$1;
   var shadow$1 = colors$1.rgba(colors$1.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;
@@ -2647,10 +2686,10 @@
   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;
@@ -2659,7 +2698,7 @@
   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;
@@ -2739,7 +2778,7 @@
     disabled03: disabled03$1,
     highlight: highlight$1,
     decorative01: decorative01$1,
-    buttonSeparator: buttonSeparator$1,
+    buttonSeparator: buttonSeparator$2,
     skeleton01: skeleton01$1,
     skeleton02: skeleton02$1,
     background: background$2,
@@ -2780,17 +2819,17 @@
     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,
@@ -2798,10 +2837,10 @@
     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,
@@ -2810,7 +2849,7 @@
     borderSubtleSelected: borderSubtleSelected$1,
     borderDisabled: borderDisabled$1,
     textDisabled: textDisabled$1,
-    buttonDisabled: buttonDisabled$1,
+    buttonDisabled: buttonDisabled$2,
     iconDisabled: iconDisabled$1,
     textOnColorDisabled: textOnColorDisabled$1,
     iconOnColorDisabled: iconOnColorDisabled$1,
@@ -2983,7 +3022,7 @@
   var disabled03 = colors$1.gray50;
   var highlight = colors$1.blue80;
   var decorative01 = colors$1.gray70;
-  var buttonSeparator = '#161616';
+  var buttonSeparator$1 = '#161616';
   var skeleton01 = '#353535';
   var skeleton02 = colors$1.gray70; // New color tokens
   // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
@@ -3026,17 +3065,17 @@
   var overlay = overlay01;
   var toggleOff = ui04;
   var shadow = colors$1.rgba(colors$1.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;
@@ -3044,10 +3083,10 @@
   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;
@@ -3056,7 +3095,7 @@
   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;
@@ -3136,7 +3175,7 @@
     disabled03: disabled03,
     highlight: highlight,
     decorative01: decorative01,
-    buttonSeparator: buttonSeparator,
+    buttonSeparator: buttonSeparator$1,
     skeleton01: skeleton01,
     skeleton02: skeleton02,
     background: background$1,
@@ -3177,17 +3216,17 @@
     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,
@@ -3195,10 +3234,10 @@
     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,
@@ -3207,7 +3246,7 @@
     borderSubtleSelected: borderSubtleSelected,
     borderDisabled: borderDisabled,
     textDisabled: textDisabled,
-    buttonDisabled: buttonDisabled,
+    buttonDisabled: buttonDisabled$1,
     iconDisabled: iconDisabled,
     textOnColorDisabled: textOnColorDisabled,
     iconOnColorDisabled: iconOnColorDisabled,
@@ -3324,7 +3363,7 @@
   // 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$3 = {
     colors: colors,
     type: type$2.unstable_tokens,
     layout: layout$2.unstable_tokens
@@ -3343,14 +3382,14 @@
     g100: g100
   };
 
-  var index = /*#__PURE__*/Object.freeze({
+  var index$3 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     white: white,
     g10: g10,
     g90: g90,
     g100: g100,
     themes: themes$1,
-    tokens: tokens,
+    tokens: tokens$3,
     caption01: type$2.caption01,
     caption02: type$2.caption02,
     label01: type$2.label01,
@@ -3502,7 +3541,7 @@
     disabled03: disabled03$3,
     highlight: highlight$3,
     decorative01: decorative01$3,
-    buttonSeparator: buttonSeparator$3,
+    buttonSeparator: buttonSeparator$4,
     skeleton01: skeleton01$3,
     skeleton02: skeleton02$3,
     background: background$4,
@@ -3543,17 +3582,17 @@
     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,
@@ -3561,10 +3600,10 @@
     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,
@@ -3573,7 +3612,7 @@
     borderSubtleSelected: borderSubtleSelected$3,
     borderDisabled: borderDisabled$3,
     textDisabled: textDisabled$3,
-    buttonDisabled: buttonDisabled$3,
+    buttonDisabled: buttonDisabled$4,
     iconDisabled: iconDisabled$3,
     textOnColorDisabled: textOnColorDisabled$3,
     iconOnColorDisabled: iconOnColorDisabled$3,
@@ -3588,6 +3627,425 @@
     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$2 = /*#__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$2 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    buttonTokens: tokens$2
+  });
+
+  var tagBackgroundRed = {
+    whiteTheme: colors$1.red20,
+    g10: colors$1.red20,
+    g90: colors$1.red70,
+    g100: colors$1.red70
+  };
+  var tagColorRed = {
+    whiteTheme: colors$1.red80,
+    g10: colors$1.red80,
+    g90: colors$1.red20,
+    g100: colors$1.red20
+  };
+  var tagHoverRed = {
+    whiteTheme: colors$1.red30,
+    g10: colors$1.red30,
+    g90: colors$1.red70Hover,
+    g100: colors$1.red70Hover
+  };
+  var tagBackgroundMagenta = {
+    whiteTheme: colors$1.magenta20,
+    g10: colors$1.magenta20,
+    g90: colors$1.magenta70,
+    g100: colors$1.magenta70
+  };
+  var tagColorMagenta = {
+    whiteTheme: colors$1.magenta80,
+    g10: colors$1.magenta80,
+    g90: colors$1.magenta20,
+    g100: colors$1.magenta20
+  };
+  var tagHoverMagenta = {
+    whiteTheme: colors$1.magenta30,
+    g10: colors$1.magenta30,
+    g90: colors$1.magenta70Hover,
+    g100: colors$1.magenta70Hover
+  };
+  var tagBackgroundPurple = {
+    whiteTheme: colors$1.purple20,
+    g10: colors$1.purple20,
+    g90: colors$1.purple70,
+    g100: colors$1.purple70
+  };
+  var tagColorPurple = {
+    whiteTheme: colors$1.purple80,
+    g10: colors$1.purple80,
+    g90: colors$1.purple20,
+    g100: colors$1.purple20
+  };
+  var tagHoverPurple = {
+    whiteTheme: colors$1.purple30,
+    g10: colors$1.purple30,
+    g90: colors$1.purple70Hover,
+    g100: colors$1.purple70Hover
+  };
+  var tagBackgroundBlue = {
+    whiteTheme: colors$1.blue20,
+    g10: colors$1.blue20,
+    g90: colors$1.blue70,
+    g100: colors$1.blue70
+  };
+  var tagColorBlue = {
+    whiteTheme: colors$1.blue80,
+    g10: colors$1.blue80,
+    g90: colors$1.blue20,
+    g100: colors$1.blue20
+  };
+  var tagHoverBlue = {
+    whiteTheme: colors$1.blue30,
+    g10: colors$1.blue30,
+    g90: colors$1.blue70Hover,
+    g100: colors$1.blue70Hover
+  };
+  var tagBackgroundCyan = {
+    whiteTheme: colors$1.cyan20,
+    g10: colors$1.cyan20,
+    g90: colors$1.cyan70,
+    g100: colors$1.cyan70
+  };
+  var tagColorCyan = {
+    whiteTheme: colors$1.cyan80,
+    g10: colors$1.cyan80,
+    g90: colors$1.cyan20,
+    g100: colors$1.cyan20
+  };
+  var tagHoverCyan = {
+    whiteTheme: colors$1.cyan30,
+    g10: colors$1.cyan30,
+    g90: colors$1.cyan70Hover,
+    g100: colors$1.cyan70Hover
+  };
+  var tagBackgroundTeal = {
+    whiteTheme: colors$1.teal20,
+    g10: colors$1.teal20,
+    g90: colors$1.teal70,
+    g100: colors$1.teal70
+  };
+  var tagColorTeal = {
+    whiteTheme: colors$1.teal80,
+    g10: colors$1.teal80,
+    g90: colors$1.teal20,
+    g100: colors$1.teal20
+  };
+  var tagHoverTeal = {
+    whiteTheme: colors$1.teal30,
+    g10: colors$1.teal30,
+    g90: colors$1.teal70Hover,
+    g100: colors$1.teal70Hover
+  };
+  var tagBackgroundGreen = {
+    whiteTheme: colors$1.green20,
+    g10: colors$1.green20,
+    g90: colors$1.green70,
+    g100: colors$1.green70
+  };
+  var tagColorGreen = {
+    whiteTheme: colors$1.green80,
+    g10: colors$1.green80,
+    g90: colors$1.green20,
+    g100: colors$1.green20
+  };
+  var tagHoverGreen = {
+    whiteTheme: colors$1.green30,
+    g10: colors$1.green30,
+    g90: colors$1.green70Hover,
+    g100: colors$1.green70Hover
+  };
+  var tagBackgroundGray = {
+    whiteTheme: colors$1.gray20,
+    g10: colors$1.gray20,
+    g90: colors$1.gray70,
+    g100: colors$1.gray70
+  };
+  var tagColorGray = {
+    whiteTheme: colors$1.gray80,
+    g10: colors$1.gray80,
+    g90: colors$1.gray20,
+    g100: colors$1.gray20
+  };
+  var tagHoverGray = {
+    whiteTheme: colors$1.gray30,
+    g10: colors$1.gray30,
+    g90: colors$1.gray70Hover,
+    g100: colors$1.gray70Hover
+  };
+  var tagBackgroundCoolGray = {
+    whiteTheme: colors$1.coolGray20,
+    g10: colors$1.coolGray20,
+    g90: colors$1.coolGray70,
+    g100: colors$1.coolGray70
+  };
+  var tagColorCoolGray = {
+    whiteTheme: colors$1.coolGray80,
+    g10: colors$1.coolGray80,
+    g90: colors$1.coolGray20,
+    g100: colors$1.coolGray20
+  };
+  var tagHoverCoolGray = {
+    whiteTheme: colors$1.coolGray30,
+    g10: colors$1.coolGray30,
+    g90: colors$1.coolGray70Hover,
+    g100: colors$1.coolGray70Hover
+  };
+  var tagBackgroundWarmGray = {
+    whiteTheme: colors$1.warmGray20,
+    g10: colors$1.warmGray20,
+    g90: colors$1.warmGray70,
+    g100: colors$1.warmGray70
+  };
+  var tagColorWarmGray = {
+    whiteTheme: colors$1.warmGray80,
+    g10: colors$1.warmGray80,
+    g90: colors$1.warmGray20,
+    g100: colors$1.warmGray20
+  };
+  var tagHoverWarmGray = {
+    whiteTheme: colors$1.warmGray30,
+    g10: colors$1.warmGray30,
+    g90: colors$1.warmGray70Hover,
+    g100: colors$1.warmGray70Hover
+  };
+
+  var tokens$1 = /*#__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$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    tagTokens: tokens$1
+  });
+
+  var notificationBackgroundError = {
+    whiteTheme: colors$1.red10,
+    g10: colors$1.red10,
+    g90: colors$1.gray80,
+    g100: colors$1.gray90
+  };
+  var notificationBackgroundSuccess = {
+    whiteTheme: colors$1.green10,
+    g10: colors$1.green10,
+    g90: colors$1.gray80,
+    g100: colors$1.gray90
+  };
+  var notificationBackgroundInfo = {
+    whiteTheme: colors$1.blue10,
+    g10: colors$1.blue10,
+    g90: colors$1.gray80,
+    g100: colors$1.gray90
+  };
+  var colorMap = {
+    yellow30: colors$1.yellow30,
+    white0: colors$1.white0
+  };
+  var notificationBackgroundWarning = {
+    whiteTheme: colorMap,
+    g10: colorMap,
+    g90: colors$1.gray80,
+    g100: colors$1.gray90
+  };
+  var notificationActionHover = {
+    whiteTheme: colors$1.white0,
+    g10: colors$1.white0
+  };
+  var notificationActionTertiaryInverse = {
+    whiteTheme: buttonTertiary.g100,
+    g10: buttonTertiary.g90,
+    g90: buttonTertiary.g10,
+    g100: buttonTertiary.whiteTheme
+  };
+  var notificationActionTertiaryInverseActive = {
+    whiteTheme: buttonTertiaryActive.g100,
+    g10: buttonTertiaryActive.g90,
+    g90: buttonTertiaryActive.g10,
+    g100: buttonTertiaryActive.whiteTheme
+  };
+  var notificationActionTertiaryInverseHover = {
+    whiteTheme: buttonTertiaryHover.g100,
+    g10: buttonTertiaryHover.g90,
+    g90: buttonTertiaryHover.g10,
+    g100: buttonTertiaryHover.whiteTheme
+  };
+  var notificationActionTertiaryInverseText = {
+    whiteTheme: textInverse$4,
+    g10: textInverse$5,
+    g90: textInverse$6,
+    g100: textInverse$7
+  };
+  var notificationActionTertiaryInverseTextOnColorDisabled = {
+    whiteTheme: textOnColorDisabled$4,
+    g10: textOnColorDisabled$5,
+    g90: textOnColorDisabled$6,
+    g100: textOnColorDisabled$7
+  };
+
+  var tokens = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    notificationBackgroundError: notificationBackgroundError,
+    notificationBackgroundSuccess: notificationBackgroundSuccess,
+    notificationBackgroundInfo: notificationBackgroundInfo,
+    colorMap: colorMap,
+    notificationBackgroundWarning: notificationBackgroundWarning,
+    notificationActionHover: notificationActionHover,
+    notificationActionTertiaryInverse: notificationActionTertiaryInverse,
+    notificationActionTertiaryInverseActive: notificationActionTertiaryInverseActive,
+    notificationActionTertiaryInverseHover: notificationActionTertiaryInverseHover,
+    notificationActionTertiaryInverseText: notificationActionTertiaryInverseText,
+    notificationActionTertiaryInverseTextOnColorDisabled: notificationActionTertiaryInverseTextOnColorDisabled
+  });
+
+  var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    notificationTokens: tokens
+  });
+
   /**
    * Copyright IBM Corp. 2018, 2018
    *
@@ -4551,6 +5009,7 @@
   exports.borderSubtleSelected01 = borderSubtleSelected01$3;
   exports.borderSubtleSelected02 = borderSubtleSelected02$3;
   exports.borderSubtleSelected03 = borderSubtleSelected03$3;
+  exports.buttonTokens = index$2;
   exports.field01 = field01$7;
   exports.field02 = field02$7;
   exports.field03 = field03$3;
@@ -4560,6 +5019,7 @@
   exports.focus = focus$8;
   exports.focusInset = focusInset$7;
   exports.focusInverse = focusInverse$7;
+  exports.formatTokenName = formatTokenName;
   exports.g10 = g10$1;
   exports.g100 = g100$1;
   exports.g90 = g90$1;
@@ -4604,6 +5064,7 @@
   exports.linkPrimaryHover = linkPrimaryHover$7;
   exports.linkSecondary = linkSecondary$7;
   exports.linkVisited = linkVisited$7;
+  exports.notificationTokens = index;
   exports.overlay = overlay$7;
   exports.shadow = shadow$7;
   exports.skeletonBackground = skeletonBackground$7;
@@ -4619,6 +5080,7 @@
   exports.supportSuccessInverse = supportSuccessInverse$7;
   exports.supportWarning = supportWarning$7;
   exports.supportWarningInverse = supportWarningInverse$7;
+  exports.tagTokens = index$1;
   exports.textDisabled = textDisabled$7;
   exports.textError = textError$7;
   exports.textHelper = textHelper$7;
@@ -4631,7 +5093,7 @@
   exports.themes = themes;
   exports.toggleOff = toggleOff$7;
   exports.unstable_metadata = unstable_metadata;
-  exports.v10 = index;
+  exports.v10 = index$3;
   exports.white = white$1;
 
   Object.defineProperty(exports, '__esModule', { value: true });