@carbon/themes 10.20.0-rc.0 → 10.22.1

package/docs/sass.md

@@ -52,7 +52,8 @@
   - [✅inverse-support-03 [variable]](#inverse-support-03-variable)
   - [✅inverse-support-04 [variable]](#inverse-support-04-variable)
   - [✅overlay-01 [variable]](#overlay-01-variable)
-  - [✅danger [variable]](#danger-variable)
+  - [✅danger-01 [variable]](#danger-01-variable)
+  - [✅danger-02 [variable]](#danger-02-variable)
   - [✅focus [variable]](#focus-variable)
   - [✅inverse-focus-ui [variable]](#inverse-focus-ui-variable)
   - [✅hover-primary [variable]](#hover-primary-variable)
@@ -86,6 +87,7 @@
   - [✅⚠️brand-03 [variable]](#brand-03-variable)
   - [✅⚠️active-01 [variable]](#active-01-variable)
   - [✅⚠️hover-field [variable]](#hover-field-variable)
+  - [✅danger [variable]](#danger-variable)
   - [✅caption-01 [variable]](#caption-01-variable)
   - [✅label-01 [variable]](#label-01-variable)
   - [✅helper-text-01 [variable]](#helper-text-01-variable)
@@ -259,7 +261,8 @@ Define theme variables from a map of tokens
   $inverse-support-03: map-get($theme, 'inverse-support-03') !global;
   $inverse-support-04: map-get($theme, 'inverse-support-04') !global;
   $overlay-01: map-get($theme, 'overlay-01') !global;
-  $danger: map-get($theme, 'danger') !global;
+  $danger-01: map-get($theme, 'danger-01') !global;
+  $danger-02: map-get($theme, 'danger-02') !global;
   $focus: map-get($theme, 'focus') !global;
   $inverse-focus-ui: map-get($theme, 'inverse-focus-ui') !global;
   $hover-primary: map-get($theme, 'hover-primary') !global;
@@ -293,6 +296,7 @@ Define theme variables from a map of tokens
   $brand-03: map-get($theme, 'brand-03') !global;
   $active-01: map-get($theme, 'active-01') !global;
   $hover-field: map-get($theme, 'hover-field') !global;
+  $danger: map-get($theme, 'danger') !global;
   $caption-01: map-get($theme, 'caption-01') !global;
   $label-01: map-get($theme, 'label-01') !global;
   $helper-text-01: map-get($theme, 'helper-text-01') !global;
@@ -494,9 +498,13 @@ Define theme variables from a map of tokens
       --#{$custom-property-prefix}-overlay-01,
       map-get($theme, 'overlay-01')
     ) !global;
-    $danger: var(
-      --#{$custom-property-prefix}-danger,
-      map-get($theme, 'danger')
+    $danger-01: var(
+      --#{$custom-property-prefix}-danger-01,
+      map-get($theme, 'danger-01')
+    ) !global;
+    $danger-02: var(
+      --#{$custom-property-prefix}-danger-02,
+      map-get($theme, 'danger-02')
     ) !global;
     $focus: var(
       --#{$custom-property-prefix}-focus,
@@ -630,6 +638,10 @@ Define theme variables from a map of tokens
       --#{$custom-property-prefix}-hover-field,
       map-get($theme, 'hover-field')
     ) !global;
+    $danger: var(
+      --#{$custom-property-prefix}-danger,
+      map-get($theme, 'danger')
+    ) !global;
     $spacing-01: var(
       --#{$custom-property-prefix}-spacing-01,
       map-get($theme, 'spacing-01')
@@ -1025,8 +1037,14 @@ Define theme variables from a map of tokens
       @include custom-property('overlay-01', map-get($theme, 'overlay-01'));
     }
 
-    @if should-emit($theme, $parent-carbon-theme, 'danger', $emit-difference) {
-      @include custom-property('danger', map-get($theme, 'danger'));
+    @if should-emit($theme, $parent-carbon-theme, 'danger-01', $emit-difference)
+    {
+      @include custom-property('danger-01', map-get($theme, 'danger-01'));
+    }
+
+    @if should-emit($theme, $parent-carbon-theme, 'danger-02', $emit-difference)
+    {
+      @include custom-property('danger-02', map-get($theme, 'danger-02'));
     }
 
     @if should-emit($theme, $parent-carbon-theme, 'focus', $emit-difference) {
@@ -1358,6 +1376,10 @@ Define theme variables from a map of tokens
       @include custom-property('hover-field', map-get($theme, 'hover-field'));
     }
 
+    @if should-emit($theme, $parent-carbon-theme, 'danger', $emit-difference) {
+      @include custom-property('danger', map-get($theme, 'danger'));
+    }
+
     @if should-emit(
       $theme,
       $parent-carbon-theme,
@@ -2065,7 +2087,8 @@ Define theme variables from a map of tokens
   - [inverse-support-03 [variable]](#inverse-support-03-variable)
   - [inverse-support-04 [variable]](#inverse-support-04-variable)
   - [overlay-01 [variable]](#overlay-01-variable)
-  - [danger [variable]](#danger-variable)
+  - [danger-01 [variable]](#danger-01-variable)
+  - [danger-02 [variable]](#danger-02-variable)
   - [focus [variable]](#focus-variable)
   - [inverse-focus-ui [variable]](#inverse-focus-ui-variable)
   - [hover-primary [variable]](#hover-primary-variable)
@@ -2099,6 +2122,7 @@ Define theme variables from a map of tokens
   - [brand-03 [variable]](#brand-03-variable)
   - [active-01 [variable]](#active-01-variable)
   - [hover-field [variable]](#hover-field-variable)
+  - [danger [variable]](#danger-variable)
   - [caption-01 [variable]](#caption-01-variable)
   - [label-01 [variable]](#label-01-variable)
   - [helper-text-01 [variable]](#helper-text-01-variable)
@@ -2179,6 +2203,7 @@ $carbon--theme--g10: map-merge(
     field-01: #ffffff,
     field-02: #f4f4f4,
     disabled-01: #ffffff,
+    highlight: #edf5ff,
   )
 );
 ```
@@ -2227,6 +2252,7 @@ $carbon--theme--g90: map-merge(
     inverse-support-02: #24a148,
     inverse-support-04: #0f62fe,
     overlay-01: rgba(22, 22, 22, 0.7),
+    danger-02: #ff8389,
     focus: #ffffff,
     inverse-focus-ui: #0f62fe,
     hover-primary-text: #a6c8ff,
@@ -2304,6 +2330,7 @@ $carbon--theme--g100: map-merge(
     inverse-support-02: #24a148,
     inverse-support-04: #0f62fe,
     overlay-01: rgba(22, 22, 22, 0.7),
+    danger-02: #fa4d56,
     focus: #ffffff,
     inverse-focus-ui: #0f62fe,
     hover-primary-text: #a6c8ff,
@@ -2465,7 +2492,8 @@ $carbon--theme: (
   inverse-support-03: if(global-variable-exists('inverse-support-03'), $inverse-support-03, map-get($carbon--theme--white, 'inverse-support-03')),
   inverse-support-04: if(global-variable-exists('inverse-support-04'), $inverse-support-04, map-get($carbon--theme--white, 'inverse-support-04')),
   overlay-01: if(global-variable-exists('overlay-01'), $overlay-01, map-get($carbon--theme--white, 'overlay-01')),
-  danger: if(global-variable-exists('danger'), $danger, map-get($carbon--theme--white, 'danger')),
+  danger-01: if(global-variable-exists('danger-01'), $danger-01, map-get($carbon--theme--white, 'danger-01')),
+  danger-02: if(global-variable-exists('danger-02'), $danger-02, map-get($carbon--theme--white, 'danger-02')),
   focus: if(global-variable-exists('focus'), $focus, map-get($carbon--theme--white, 'focus')),
   inverse-focus-ui: if(global-variable-exists('inverse-focus-ui'), $inverse-focus-ui, map-get($carbon--theme--white, 'inverse-focus-ui')),
   hover-primary: if(global-variable-exists('hover-primary'), $hover-primary, map-get($carbon--theme--white, 'hover-primary')),
@@ -2499,6 +2527,7 @@ $carbon--theme: (
   brand-03: if(global-variable-exists('brand-03'), $brand-03, map-get($carbon--theme--white, 'brand-03')),
   active-01: if(global-variable-exists('active-01'), $active-01, map-get($carbon--theme--white, 'active-01')),
   hover-field: if(global-variable-exists('hover-field'), $hover-field, map-get($carbon--theme--white, 'hover-field')),
+  danger: if(global-variable-exists('danger'), $danger, map-get($carbon--theme--white, 'danger')),
   caption-01: if(global-variable-exists('caption-01'), $caption-01, map-get($carbon--theme--white, 'caption-01')),
   label-01: if(global-variable-exists('label-01'), $label-01, map-get($carbon--theme--white, 'label-01')),
   helper-text-01: if(global-variable-exists('helper-text-01'), $helper-text-01, map-get($carbon--theme--white, 'helper-text-01')),
@@ -3420,18 +3449,41 @@ $overlay-01: if(
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
 
-### ✅danger [variable]
+### ✅danger-01 [variable]
 
 <details>
 <summary>Source code</summary>
 
 ```scss
-$danger: if(
+$danger-01: if(
   global-variable-exists('carbon--theme') and map-has-key(
       $carbon--theme,
-      'danger'
+      'danger-01'
     ),
-  map-get($carbon--theme, 'danger'),
+  map-get($carbon--theme, 'danger-01'),
+  #da1e28
+);
+```
+
+</details>
+
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `{undefined}`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅danger-02 [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$danger-02: if(
+  global-variable-exists('carbon--theme') and map-has-key(
+      $carbon--theme,
+      'danger-02'
+    ),
+  map-get($carbon--theme, 'danger-02'),
   #da1e28
 );
 ```
@@ -4261,6 +4313,29 @@ $hover-field: if(
   - [carbon--theme [mixin]](#carbon--theme-mixin)
 - **Deprecated**: This may not be available in future releases
 
+### ✅danger [variable]
+
+<details>
+<summary>Source code</summary>
+
+```scss
+$danger: if(
+  global-variable-exists('carbon--theme') and map-has-key(
+      $carbon--theme,
+      'danger'
+    ),
+  map-get($carbon--theme, 'danger'),
+  #da1e28
+);
+```
+
+</details>
+
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `{undefined}`
+- **Used by**:
+  - [carbon--theme [mixin]](#carbon--theme-mixin)
+
 ### ✅caption-01 [variable]
 
 <details>

package/es/index.js

@@ -1,5 +1,5 @@
 import Color from 'color';
-import { blue20, blue40, blue60, blue70, blue80, gray10, gray20, gray30, gray40, gray50, gray60, gray70, gray80, gray100, blue50, green40, green50, yellow, red50, red60, red80, purple60, white, rgba, blue30, gray90, red40, purple40, red30 } from '@carbon/colors';
+import { blue20, blue40, blue60, blue70, blue80, gray10, gray20, gray30, gray40, gray50, gray60, gray70, gray80, gray100, blue50, green40, green50, yellow, red50, red60, red80, purple60, white, rgba, blue10, blue30, gray90, red40, purple40, red30 } 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 { 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 } from '@carbon/type';
 import { spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, 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';
@@ -111,7 +111,8 @@ var inverseSupport02 = green40;
 var inverseSupport03 = yellow;
 var inverseSupport04 = blue50;
 var overlay01 = rgba(gray100, 0.5);
-var danger = red60; // Interaction states
+var danger01 = red60;
+var danger02 = red60; // Interaction states
 
 var focus = blue60;
 var inverseFocusUi = white;
@@ -128,7 +129,7 @@ var selectedUI = gray20;
 var selectedLightUI = gray20;
 var inverseHoverUI = '#4c4c4c';
 var hoverSelectedUI = '#cacaca';
-var hoverDanger = adjustLightness(danger, -8);
+var hoverDanger = adjustLightness(danger01, -8);
 var activeDanger = red80;
 var hoverRow = '#e5e5e5';
 var visitedLink = purple60;
@@ -147,6 +148,7 @@ var brand02 = interactive02;
 var brand03 = interactive03;
 var active01 = activeUI;
 var hoverField = hoverUI;
+var danger = danger01;
 
 var white$1 = /*#__PURE__*/Object.freeze({
   interactive01: interactive01,
@@ -183,7 +185,8 @@ var white$1 = /*#__PURE__*/Object.freeze({
   inverseSupport03: inverseSupport03,
   inverseSupport04: inverseSupport04,
   overlay01: overlay01,
-  danger: danger,
+  danger01: danger01,
+  danger02: danger02,
   focus: focus,
   inverseFocusUi: inverseFocusUi,
   hoverPrimary: hoverPrimary,
@@ -217,6 +220,7 @@ var white$1 = /*#__PURE__*/Object.freeze({
   brand03: brand03,
   active01: active01,
   hoverField: hoverField,
+  danger: danger,
   caption01: caption01,
   label01: label01,
   helperText01: helperText01,
@@ -320,7 +324,8 @@ var inverseSupport02$1 = green40;
 var inverseSupport03$1 = yellow;
 var inverseSupport04$1 = blue50;
 var overlay01$1 = rgba(gray100, 0.5);
-var danger$1 = red60; // Interaction states
+var danger01$1 = red60;
+var danger02$1 = red60; // Interaction states
 
 var focus$1 = blue60;
 var inverseFocusUi$1 = white;
@@ -337,14 +342,14 @@ var selectedUI$1 = gray20;
 var selectedLightUI$1 = gray20;
 var inverseHoverUI$1 = '#4c4c4c';
 var hoverSelectedUI$1 = '#cacaca';
-var hoverDanger$1 = adjustLightness(danger$1, -8);
+var hoverDanger$1 = adjustLightness(danger01$1, -8);
 var activeDanger$1 = red80;
 var hoverRow$1 = '#e5e5e5';
 var visitedLink$1 = purple60;
 var disabled01$1 = white;
 var disabled02$1 = gray30;
 var disabled03$1 = gray50;
-var highlight$1 = blue20;
+var highlight$1 = blue10;
 var decorative01$1 = gray20;
 var hoverLightUI$1 = '#e5e5e5';
 var buttonSeparator$1 = '#e0e0e0';
@@ -356,6 +361,7 @@ var brand02$1 = interactive02$1;
 var brand03$1 = interactive03$1;
 var active01$1 = activeUI$1;
 var hoverField$1 = hoverUI$1;
+var danger$1 = danger01$1;
 
 var g10 = /*#__PURE__*/Object.freeze({
   interactive01: interactive01$1,
@@ -392,7 +398,8 @@ var g10 = /*#__PURE__*/Object.freeze({
   inverseSupport03: inverseSupport03$1,
   inverseSupport04: inverseSupport04$1,
   overlay01: overlay01$1,
-  danger: danger$1,
+  danger01: danger01$1,
+  danger02: danger02$1,
   focus: focus$1,
   inverseFocusUi: inverseFocusUi$1,
   hoverPrimary: hoverPrimary$1,
@@ -426,6 +433,7 @@ var g10 = /*#__PURE__*/Object.freeze({
   brand03: brand03$1,
   active01: active01$1,
   hoverField: hoverField$1,
+  danger: danger$1,
   caption01: caption01,
   label01: label01,
   helperText01: helperText01,
@@ -529,7 +537,8 @@ var inverseSupport02$2 = green50;
 var inverseSupport03$2 = yellow;
 var inverseSupport04$2 = blue60;
 var overlay01$2 = rgba(gray100, 0.7);
-var danger$2 = red60; // Interaction states
+var danger01$2 = red60;
+var danger02$2 = red50; // Interaction states
 
 var focus$2 = white;
 var inverseFocusUi$2 = blue60;
@@ -546,7 +555,7 @@ var selectedUI$2 = gray80;
 var selectedLightUI$2 = gray70;
 var inverseHoverUI$2 = '#e5e5e5';
 var hoverSelectedUI$2 = '#4c4c4c';
-var hoverDanger$2 = adjustLightness(danger$2, -8);
+var hoverDanger$2 = adjustLightness(danger01$2, -8);
 var activeDanger$2 = red80;
 var hoverRow$2 = '#353535';
 var visitedLink$2 = purple40;
@@ -565,6 +574,7 @@ var brand02$2 = interactive02$2;
 var brand03$2 = interactive03$2;
 var active01$2 = activeUI$2;
 var hoverField$2 = hoverUI$2;
+var danger$2 = danger01$2;
 
 var g100 = /*#__PURE__*/Object.freeze({
   interactive01: interactive01$2,
@@ -601,7 +611,8 @@ var g100 = /*#__PURE__*/Object.freeze({
   inverseSupport03: inverseSupport03$2,
   inverseSupport04: inverseSupport04$2,
   overlay01: overlay01$2,
-  danger: danger$2,
+  danger01: danger01$2,
+  danger02: danger02$2,
   focus: focus$2,
   inverseFocusUi: inverseFocusUi$2,
   hoverPrimary: hoverPrimary$2,
@@ -635,6 +646,7 @@ var g100 = /*#__PURE__*/Object.freeze({
   brand03: brand03$2,
   active01: active01$2,
   hoverField: hoverField$2,
+  danger: danger$2,
   caption01: caption01,
   label01: label01,
   helperText01: helperText01,
@@ -738,7 +750,8 @@ var inverseSupport02$3 = green50;
 var inverseSupport03$3 = yellow;
 var inverseSupport04$3 = blue60;
 var overlay01$3 = rgba(gray100, 0.7);
-var danger$3 = red60; // Interaction states
+var danger01$3 = red60;
+var danger02$3 = red40; // Interaction states
 
 var focus$3 = white;
 var inverseFocusUi$3 = blue60;
@@ -755,7 +768,7 @@ var selectedUI$3 = gray70;
 var selectedLightUI$3 = gray60;
 var inverseHoverUI$3 = '#e5e5e5';
 var hoverSelectedUI$3 = '#656565';
-var hoverDanger$3 = adjustLightness(danger$3, -8);
+var hoverDanger$3 = adjustLightness(danger01$3, -8);
 var activeDanger$3 = red80;
 var hoverRow$3 = '#4c4c4c';
 var visitedLink$3 = purple40;
@@ -774,6 +787,7 @@ var brand02$3 = interactive02$3;
 var brand03$3 = interactive03$3;
 var active01$3 = activeUI$3;
 var hoverField$3 = hoverUI$3;
+var danger$3 = danger01$3;
 
 var g90 = /*#__PURE__*/Object.freeze({
   interactive01: interactive01$3,
@@ -810,7 +824,8 @@ var g90 = /*#__PURE__*/Object.freeze({
   inverseSupport03: inverseSupport03$3,
   inverseSupport04: inverseSupport04$3,
   overlay01: overlay01$3,
-  danger: danger$3,
+  danger01: danger01$3,
+  danger02: danger02$3,
   focus: focus$3,
   inverseFocusUi: inverseFocusUi$3,
   hoverPrimary: hoverPrimary$3,
@@ -844,6 +859,7 @@ var g90 = /*#__PURE__*/Object.freeze({
   brand03: brand03$3,
   active01: active01$3,
   hoverField: hoverField$3,
+  danger: danger$3,
   caption01: caption01,
   label01: label01,
   helperText01: helperText01,
@@ -947,7 +963,8 @@ var inverseSupport02$4 = '#8cd211';
 var inverseSupport03$4 = '#FDD600';
 var inverseSupport04$4 = '#5aaafa';
 var overlay01$4 = 'rgba(223, 227, 230, 0.5)';
-var danger$4 = red60; // Interaction states
+var danger01$4 = red60;
+var danger02$4 = red60; // Interaction states
 
 var focus$4 = '#3d70b2';
 var inverseFocusUi$4 = '#3d70b2';
@@ -983,6 +1000,7 @@ var brand02$4 = interactive02$4;
 var brand03$4 = interactive03$4;
 var active01$4 = activeUI$4;
 var hoverField$4 = hoverUI$4;
+var danger$4 = danger01$4;
 
 var v9 = /*#__PURE__*/Object.freeze({
   interactive01: interactive01$4,
@@ -1019,7 +1037,8 @@ var v9 = /*#__PURE__*/Object.freeze({
   inverseSupport03: inverseSupport03$4,
   inverseSupport04: inverseSupport04$4,
   overlay01: overlay01$4,
-  danger: danger$4,
+  danger01: danger01$4,
+  danger02: danger02$4,
   focus: focus$4,
   inverseFocusUi: inverseFocusUi$4,
   hoverPrimary: hoverPrimary$4,
@@ -1053,6 +1072,7 @@ var v9 = /*#__PURE__*/Object.freeze({
   brand03: brand03$4,
   active01: active01$4,
   hoverField: hoverField$4,
+  danger: danger$4,
   caption01: caption01,
   label01: label01,
   helperText01: helperText01,
@@ -1125,9 +1145,9 @@ var v9 = /*#__PURE__*/Object.freeze({
 // exported as in JavaScript
 
 var colors = [// Core
-'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'icon01', 'icon02', 'icon03', 'link01', 'inverseLink', 'field01', 'field02', 'inverse01', 'inverse02', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', 'danger', // Interactive states
+'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'icon01', 'icon02', 'icon03', 'link01', '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', 'activeUI', 'selectedUI', 'selectedLightUI', 'hoverSelectedUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'decorative01', 'hoverLightUI', 'buttonSeparator', 'skeleton01', 'skeleton02', // Deprecated
-'brand01', 'brand02', 'brand03', 'active01', 'hoverField'];
+'brand01', 'brand02', 'brand03', 'active01', 'hoverField', 'danger'];
 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.
@@ -1175,12 +1195,12 @@ var tokens = {
 var unstable__meta = {
   colors: [{
     type: 'core',
-    tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', 'danger', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'link01', 'icon01', 'icon02', 'icon03', 'field01', 'field02', 'inverse01', 'inverse02', 'inverseLink', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01']
+    tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', 'danger', 'danger01', 'danger02', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'link01', 'icon01', 'icon02', 'icon03', 'field01', 'field02', 'inverse01', 'inverse02', 'inverseLink', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01']
   }, {
     type: 'interactive',
     tokens: ['focus', 'inverseFocusUi', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeDanger', 'selectedUI', 'selectedLightUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField', 'decorative01', 'hoverLightUI', 'buttonSeparator']
   }],
-  deprecated: ['brand01', 'brand02', 'brand03', 'active01']
+  deprecated: ['brand01', 'brand02', 'brand03', 'active01', 'danger']
 };
 
 /**
@@ -1197,4 +1217,4 @@ var themes = {
   v9: v9
 };
 
-export { g10, g90, g100, white$1 as white, v9, tokens, formatTokenName, unstable__meta, themes, interactive01, interactive02, interactive03, interactive04, uiBackground, ui01, ui02, ui03, ui04, ui05, text01, text02, text03, text04, text05, textError, icon01, icon02, icon03, link01, inverseLink, field01, field02, inverse01, inverse02, support01, support02, support03, support04, inverseSupport01, inverseSupport02, inverseSupport03, inverseSupport04, overlay01, danger, focus, inverseFocusUi, hoverPrimary, activePrimary, hoverPrimaryText, hoverSecondary, activeSecondary, hoverTertiary, activeTertiary, hoverUI, activeUI, selectedUI, selectedLightUI, inverseHoverUI, hoverSelectedUI, hoverDanger, activeDanger, hoverRow, visitedLink, disabled01, disabled02, disabled03, highlight, decorative01, hoverLightUI, buttonSeparator, skeleton01, skeleton02, brand01, brand02, brand03, active01, hoverField };
+export { g10, g90, g100, white$1 as white, v9, tokens, formatTokenName, unstable__meta, themes, interactive01, interactive02, interactive03, interactive04, uiBackground, ui01, ui02, ui03, ui04, ui05, text01, text02, text03, text04, text05, textError, icon01, icon02, icon03, link01, inverseLink, field01, field02, inverse01, inverse02, support01, support02, support03, support04, inverseSupport01, inverseSupport02, inverseSupport03, inverseSupport04, overlay01, danger01, danger02, focus, inverseFocusUi, hoverPrimary, activePrimary, hoverPrimaryText, hoverSecondary, activeSecondary, hoverTertiary, activeTertiary, hoverUI, activeUI, selectedUI, selectedLightUI, inverseHoverUI, hoverSelectedUI, hoverDanger, activeDanger, hoverRow, visitedLink, disabled01, disabled02, disabled03, highlight, decorative01, hoverLightUI, buttonSeparator, skeleton01, skeleton02, brand01, brand02, brand03, active01, hoverField, danger };