@carbon/themes 10.21.0 → 10.23.0

package/src/tokens.js

@@ -58,7 +58,8 @@ const colors = [
 
   'overlay01',
 
-  'danger',
+  'danger01',
+  'danger02',
 
   // Interactive states
   'focus',
@@ -75,11 +76,12 @@ const colors = [
   'activeTertiary',
 
   'hoverUI',
+  'hoverLightUI',
+  'hoverSelectedUI',
   'activeUI',
-
+  'activeLightUI',
   'selectedUI',
   'selectedLightUI',
-  'hoverSelectedUI',
   'inverseHoverUI',
 
   'hoverDanger',
@@ -97,8 +99,6 @@ const colors = [
 
   'decorative01',
 
-  'hoverLightUI',
-
   'buttonSeparator',
 
   'skeleton01',
@@ -110,6 +110,7 @@ const colors = [
   'brand03',
   'active01',
   'hoverField',
+  'danger',
 ];
 
 const numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
@@ -172,6 +173,8 @@ export const unstable__meta = {
         'brand02',
         'brand03',
         'danger',
+        'danger01',
+        'danger02',
         'ui01',
         'ui02',
         'ui03',
@@ -213,6 +216,7 @@ export const unstable__meta = {
         'hoverSecondary',
         'hoverTertiary',
         'hoverUI',
+        'hoverLightUI',
         'hoverSelectedUI',
         'hoverDanger',
         'hoverRow',
@@ -220,6 +224,7 @@ export const unstable__meta = {
         'activeSecondary',
         'activeTertiary',
         'activeUI',
+        'activeLightUI',
         'activeDanger',
         'selectedUI',
         'selectedLightUI',
@@ -234,10 +239,9 @@ export const unstable__meta = {
         'active01',
         'hoverField',
         'decorative01',
-        'hoverLightUI',
         'buttonSeparator',
       ],
     },
   ],
-  deprecated: ['brand01', 'brand02', 'brand03', 'active01'],
+  deprecated: ['brand01', 'brand02', 'brand03', 'active01', 'danger'],
 };

package/src/v9.js

@@ -52,7 +52,8 @@ export const inverseSupport04 = '#5aaafa';
 
 export const overlay01 = 'rgba(223, 227, 230, 0.5)';
 
-export const danger = red60;
+export const danger01 = red60;
+export const danger02 = red60;
 
 // Interaction states
 export const focus = '#3d70b2';
@@ -70,7 +71,9 @@ export const hoverTertiary = '#5a6872';
 export const activeTertiary = '#414f59';
 
 export const hoverUI = '#EEF4FC';
+export const hoverLightUI = '#EEF4FC';
 export const activeUI = '#DFEAFA';
+export const activeLightUI = '#DFEAFA';
 export const selectedUI = '#EEF4FC';
 export const selectedLightUI = '#EEF4FC';
 export const inverseHoverUI = '#4c4c4c';
@@ -92,8 +95,6 @@ export const highlight = '#f4f7fb';
 
 export const decorative01 = '#EEF4FC';
 
-export const hoverLightUI = '#EEF4FC';
-
 export const buttonSeparator = '#e0e0e0';
 
 export const skeleton01 = 'rgba(61, 112, 178, .1)';
@@ -176,3 +177,4 @@ export const brand02 = interactive02;
 export const brand03 = interactive03;
 export const active01 = activeUI;
 export const hoverField = hoverUI;
+export const danger = danger01;

package/src/white.js

@@ -88,7 +88,8 @@ export const inverseSupport04 = blue50;
 
 export const overlay01 = rgba(gray100, 0.5);
 
-export const danger = red60;
+export const danger01 = red60;
+export const danger02 = red60;
 
 // Interaction states
 export const focus = blue60;
@@ -106,14 +107,16 @@ export const hoverTertiary = '#0353e9';
 export const activeTertiary = blue80;
 
 export const hoverUI = '#e5e5e5';
+export const hoverLightUI = '#e5e5e5';
 export const activeUI = gray30;
+export const activeLightUI = gray30;
 export const selectedUI = gray20;
 export const selectedLightUI = gray20;
 export const inverseHoverUI = '#4c4c4c';
 
 export const hoverSelectedUI = '#cacaca';
 
-export const hoverDanger = adjustLightness(danger, -8);
+export const hoverDanger = adjustLightness(danger01, -8);
 export const activeDanger = red80;
 
 export const hoverRow = '#e5e5e5';
@@ -128,8 +131,6 @@ export const highlight = blue20;
 
 export const decorative01 = gray20;
 
-export const hoverLightUI = '#e5e5e5';
-
 export const buttonSeparator = '#e0e0e0';
 
 export const skeleton01 = '#e5e5e5';
@@ -215,3 +216,4 @@ export const brand02 = interactive02;
 export const brand03 = interactive03;
 export const active01 = activeUI;
 export const hoverField = hoverUI;
+export const danger = danger01;

package/umd/index.js

@@ -112,7 +112,8 @@
   var inverseSupport03 = colors.yellow;
   var inverseSupport04 = colors.blue50;
   var overlay01 = colors.rgba(colors.gray100, 0.5);
-  var danger = colors.red60; // Interaction states
+  var danger01 = colors.red60;
+  var danger02 = colors.red60; // Interaction states
 
   var focus = colors.blue60;
   var inverseFocusUi = colors.white;
@@ -124,12 +125,14 @@
   var hoverTertiary = '#0353e9';
   var activeTertiary = colors.blue80;
   var hoverUI = '#e5e5e5';
+  var hoverLightUI = '#e5e5e5';
   var activeUI = colors.gray30;
+  var activeLightUI = colors.gray30;
   var selectedUI = colors.gray20;
   var selectedLightUI = colors.gray20;
   var inverseHoverUI = '#4c4c4c';
   var hoverSelectedUI = '#cacaca';
-  var hoverDanger = adjustLightness(danger, -8);
+  var hoverDanger = adjustLightness(danger01, -8);
   var activeDanger = colors.red80;
   var hoverRow = '#e5e5e5';
   var visitedLink = colors.purple60;
@@ -138,7 +141,6 @@
   var disabled03 = colors.gray50;
   var highlight = colors.blue20;
   var decorative01 = colors.gray20;
-  var hoverLightUI = '#e5e5e5';
   var buttonSeparator = '#e0e0e0';
   var skeleton01 = '#e5e5e5';
   var skeleton02 = colors.gray30; // Type
@@ -148,6 +150,7 @@
   var brand03 = interactive03;
   var active01 = activeUI;
   var hoverField = hoverUI;
+  var danger = danger01;
 
   var white = /*#__PURE__*/Object.freeze({
     interactive01: interactive01,
@@ -184,7 +187,8 @@
     inverseSupport03: inverseSupport03,
     inverseSupport04: inverseSupport04,
     overlay01: overlay01,
-    danger: danger,
+    danger01: danger01,
+    danger02: danger02,
     focus: focus,
     inverseFocusUi: inverseFocusUi,
     hoverPrimary: hoverPrimary,
@@ -195,7 +199,9 @@
     hoverTertiary: hoverTertiary,
     activeTertiary: activeTertiary,
     hoverUI: hoverUI,
+    hoverLightUI: hoverLightUI,
     activeUI: activeUI,
+    activeLightUI: activeLightUI,
     selectedUI: selectedUI,
     selectedLightUI: selectedLightUI,
     inverseHoverUI: inverseHoverUI,
@@ -209,7 +215,6 @@
     disabled03: disabled03,
     highlight: highlight,
     decorative01: decorative01,
-    hoverLightUI: hoverLightUI,
     buttonSeparator: buttonSeparator,
     skeleton01: skeleton01,
     skeleton02: skeleton02,
@@ -218,6 +223,7 @@
     brand03: brand03,
     active01: active01,
     hoverField: hoverField,
+    danger: danger,
     caption01: type.caption01,
     label01: type.label01,
     helperText01: type.helperText01,
@@ -321,7 +327,8 @@
   var inverseSupport03$1 = colors.yellow;
   var inverseSupport04$1 = colors.blue50;
   var overlay01$1 = colors.rgba(colors.gray100, 0.5);
-  var danger$1 = colors.red60; // Interaction states
+  var danger01$1 = colors.red60;
+  var danger02$1 = colors.red60; // Interaction states
 
   var focus$1 = colors.blue60;
   var inverseFocusUi$1 = colors.white;
@@ -333,12 +340,14 @@
   var hoverTertiary$1 = '#0353e9';
   var activeTertiary$1 = colors.blue80;
   var hoverUI$1 = '#e5e5e5';
+  var hoverLightUI$1 = '#e5e5e5';
   var activeUI$1 = colors.gray30;
+  var activeLightUI$1 = colors.gray30;
   var selectedUI$1 = colors.gray20;
   var selectedLightUI$1 = colors.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 = colors.red80;
   var hoverRow$1 = '#e5e5e5';
   var visitedLink$1 = colors.purple60;
@@ -347,7 +356,6 @@
   var disabled03$1 = colors.gray50;
   var highlight$1 = colors.blue10;
   var decorative01$1 = colors.gray20;
-  var hoverLightUI$1 = '#e5e5e5';
   var buttonSeparator$1 = '#e0e0e0';
   var skeleton01$1 = '#e5e5e5';
   var skeleton02$1 = colors.gray30;
@@ -357,6 +365,7 @@
   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,
@@ -393,7 +402,8 @@
     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,
@@ -404,7 +414,9 @@
     hoverTertiary: hoverTertiary$1,
     activeTertiary: activeTertiary$1,
     hoverUI: hoverUI$1,
+    hoverLightUI: hoverLightUI$1,
     activeUI: activeUI$1,
+    activeLightUI: activeLightUI$1,
     selectedUI: selectedUI$1,
     selectedLightUI: selectedLightUI$1,
     inverseHoverUI: inverseHoverUI$1,
@@ -418,7 +430,6 @@
     disabled03: disabled03$1,
     highlight: highlight$1,
     decorative01: decorative01$1,
-    hoverLightUI: hoverLightUI$1,
     buttonSeparator: buttonSeparator$1,
     skeleton01: skeleton01$1,
     skeleton02: skeleton02$1,
@@ -427,6 +438,7 @@
     brand03: brand03$1,
     active01: active01$1,
     hoverField: hoverField$1,
+    danger: danger$1,
     caption01: type.caption01,
     label01: type.label01,
     helperText01: type.helperText01,
@@ -530,7 +542,8 @@
   var inverseSupport03$2 = colors.yellow;
   var inverseSupport04$2 = colors.blue60;
   var overlay01$2 = colors.rgba(colors.gray100, 0.7);
-  var danger$2 = colors.red60; // Interaction states
+  var danger01$2 = colors.red60;
+  var danger02$2 = colors.red50; // Interaction states
 
   var focus$2 = colors.white;
   var inverseFocusUi$2 = colors.blue60;
@@ -542,12 +555,14 @@
   var hoverTertiary$2 = colors.gray10;
   var activeTertiary$2 = colors.gray30;
   var hoverUI$2 = '#353535';
+  var hoverLightUI$2 = '#4c4c4c';
   var activeUI$2 = colors.gray70;
+  var activeLightUI$2 = colors.gray60;
   var selectedUI$2 = colors.gray80;
   var selectedLightUI$2 = colors.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 = colors.red80;
   var hoverRow$2 = '#353535';
   var visitedLink$2 = colors.purple40;
@@ -556,7 +571,6 @@
   var disabled03$2 = colors.gray50;
   var highlight$2 = colors.blue80;
   var decorative01$2 = colors.gray70;
-  var hoverLightUI$2 = '#525252';
   var buttonSeparator$2 = '#161616';
   var skeleton01$2 = '#353535';
   var skeleton02$2 = colors.gray80;
@@ -566,6 +580,7 @@
   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,
@@ -602,7 +617,8 @@
     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,
@@ -613,7 +629,9 @@
     hoverTertiary: hoverTertiary$2,
     activeTertiary: activeTertiary$2,
     hoverUI: hoverUI$2,
+    hoverLightUI: hoverLightUI$2,
     activeUI: activeUI$2,
+    activeLightUI: activeLightUI$2,
     selectedUI: selectedUI$2,
     selectedLightUI: selectedLightUI$2,
     inverseHoverUI: inverseHoverUI$2,
@@ -627,7 +645,6 @@
     disabled03: disabled03$2,
     highlight: highlight$2,
     decorative01: decorative01$2,
-    hoverLightUI: hoverLightUI$2,
     buttonSeparator: buttonSeparator$2,
     skeleton01: skeleton01$2,
     skeleton02: skeleton02$2,
@@ -636,6 +653,7 @@
     brand03: brand03$2,
     active01: active01$2,
     hoverField: hoverField$2,
+    danger: danger$2,
     caption01: type.caption01,
     label01: type.label01,
     helperText01: type.helperText01,
@@ -739,7 +757,8 @@
   var inverseSupport03$3 = colors.yellow;
   var inverseSupport04$3 = colors.blue60;
   var overlay01$3 = colors.rgba(colors.gray100, 0.7);
-  var danger$3 = colors.red60; // Interaction states
+  var danger01$3 = colors.red60;
+  var danger02$3 = colors.red40; // Interaction states
 
   var focus$3 = colors.white;
   var inverseFocusUi$3 = colors.blue60;
@@ -751,12 +770,14 @@
   var hoverTertiary$3 = colors.gray10;
   var activeTertiary$3 = colors.gray30;
   var hoverUI$3 = '#4c4c4c';
+  var hoverLightUI$3 = '#656565';
   var activeUI$3 = colors.gray60;
+  var activeLightUI$3 = colors.gray50;
   var selectedUI$3 = colors.gray70;
   var selectedLightUI$3 = colors.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 = colors.red80;
   var hoverRow$3 = '#4c4c4c';
   var visitedLink$3 = colors.purple40;
@@ -765,7 +786,6 @@
   var disabled03$3 = colors.gray40;
   var highlight$3 = colors.blue70;
   var decorative01$3 = colors.gray60;
-  var hoverLightUI$3 = '#6f6f6f';
   var buttonSeparator$3 = '#161616';
   var skeleton01$3 = '#353535';
   var skeleton02$3 = colors.gray70;
@@ -775,6 +795,7 @@
   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,
@@ -811,7 +832,8 @@
     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,
@@ -822,7 +844,9 @@
     hoverTertiary: hoverTertiary$3,
     activeTertiary: activeTertiary$3,
     hoverUI: hoverUI$3,
+    hoverLightUI: hoverLightUI$3,
     activeUI: activeUI$3,
+    activeLightUI: activeLightUI$3,
     selectedUI: selectedUI$3,
     selectedLightUI: selectedLightUI$3,
     inverseHoverUI: inverseHoverUI$3,
@@ -836,7 +860,6 @@
     disabled03: disabled03$3,
     highlight: highlight$3,
     decorative01: decorative01$3,
-    hoverLightUI: hoverLightUI$3,
     buttonSeparator: buttonSeparator$3,
     skeleton01: skeleton01$3,
     skeleton02: skeleton02$3,
@@ -845,6 +868,7 @@
     brand03: brand03$3,
     active01: active01$3,
     hoverField: hoverField$3,
+    danger: danger$3,
     caption01: type.caption01,
     label01: type.label01,
     helperText01: type.helperText01,
@@ -948,7 +972,8 @@
   var inverseSupport03$4 = '#FDD600';
   var inverseSupport04$4 = '#5aaafa';
   var overlay01$4 = 'rgba(223, 227, 230, 0.5)';
-  var danger$4 = colors.red60; // Interaction states
+  var danger01$4 = colors.red60;
+  var danger02$4 = colors.red60; // Interaction states
 
   var focus$4 = '#3d70b2';
   var inverseFocusUi$4 = '#3d70b2';
@@ -960,7 +985,9 @@
   var hoverTertiary$4 = '#5a6872';
   var activeTertiary$4 = '#414f59';
   var hoverUI$4 = '#EEF4FC';
+  var hoverLightUI$4 = '#EEF4FC';
   var activeUI$4 = '#DFEAFA';
+  var activeLightUI$4 = '#DFEAFA';
   var selectedUI$4 = '#EEF4FC';
   var selectedLightUI$4 = '#EEF4FC';
   var inverseHoverUI$4 = '#4c4c4c';
@@ -974,7 +1001,6 @@
   var disabled03$4 = '#cdd1d4';
   var highlight$4 = '#f4f7fb';
   var decorative01$4 = '#EEF4FC';
-  var hoverLightUI$4 = '#EEF4FC';
   var buttonSeparator$4 = '#e0e0e0';
   var skeleton01$4 = 'rgba(61, 112, 178, .1)';
   var skeleton02$4 = 'rgba(61, 112, 178, .1)';
@@ -984,6 +1010,7 @@
   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,
@@ -1020,7 +1047,8 @@
     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,
@@ -1031,7 +1059,9 @@
     hoverTertiary: hoverTertiary$4,
     activeTertiary: activeTertiary$4,
     hoverUI: hoverUI$4,
+    hoverLightUI: hoverLightUI$4,
     activeUI: activeUI$4,
+    activeLightUI: activeLightUI$4,
     selectedUI: selectedUI$4,
     selectedLightUI: selectedLightUI$4,
     inverseHoverUI: inverseHoverUI$4,
@@ -1045,7 +1075,6 @@
     disabled03: disabled03$4,
     highlight: highlight$4,
     decorative01: decorative01$4,
-    hoverLightUI: hoverLightUI$4,
     buttonSeparator: buttonSeparator$4,
     skeleton01: skeleton01$4,
     skeleton02: skeleton02$4,
@@ -1054,6 +1083,7 @@
     brand03: brand03$4,
     active01: active01$4,
     hoverField: hoverField$4,
+    danger: danger$4,
     caption01: type.caption01,
     label01: type.label01,
     helperText01: type.helperText01,
@@ -1126,9 +1156,9 @@
   // exported as in JavaScript
 
   var colors$1 = [// 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
-  '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'];
+  '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', 'hoverLightUI', 'hoverSelectedUI', 'activeUI', 'activeLightUI', 'selectedUI', 'selectedLightUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'decorative01', 'buttonSeparator', 'skeleton01', 'skeleton02', // Deprecated
+  '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.
@@ -1176,12 +1206,12 @@
   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']
+      tokens: ['focus', 'inverseFocusUi', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverLightUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeLightUI', 'activeDanger', 'selectedUI', 'selectedLightUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField', 'decorative01', 'buttonSeparator']
     }],
-    deprecated: ['brand01', 'brand02', 'brand03', 'active01']
+    deprecated: ['brand01', 'brand02', 'brand03', 'active01', 'danger']
   };
 
   /**
@@ -1302,7 +1332,8 @@
   exports.inverseSupport03 = inverseSupport03;
   exports.inverseSupport04 = inverseSupport04;
   exports.overlay01 = overlay01;
-  exports.danger = danger;
+  exports.danger01 = danger01;
+  exports.danger02 = danger02;
   exports.focus = focus;
   exports.inverseFocusUi = inverseFocusUi;
   exports.hoverPrimary = hoverPrimary;
@@ -1313,7 +1344,9 @@
   exports.hoverTertiary = hoverTertiary;
   exports.activeTertiary = activeTertiary;
   exports.hoverUI = hoverUI;
+  exports.hoverLightUI = hoverLightUI;
   exports.activeUI = activeUI;
+  exports.activeLightUI = activeLightUI;
   exports.selectedUI = selectedUI;
   exports.selectedLightUI = selectedLightUI;
   exports.inverseHoverUI = inverseHoverUI;
@@ -1327,7 +1360,6 @@
   exports.disabled03 = disabled03;
   exports.highlight = highlight;
   exports.decorative01 = decorative01;
-  exports.hoverLightUI = hoverLightUI;
   exports.buttonSeparator = buttonSeparator;
   exports.skeleton01 = skeleton01;
   exports.skeleton02 = skeleton02;
@@ -1336,6 +1368,7 @@
   exports.brand03 = brand03;
   exports.active01 = active01;
   exports.hoverField = hoverField;
+  exports.danger = danger;
 
   Object.defineProperty(exports, '__esModule', { value: true });