@carbon/themes 10.21.0 → 10.23.0

package/es/index.js

@@ -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;
@@ -123,12 +124,14 @@ var activeSecondary = gray60;
 var hoverTertiary = '#0353e9';
 var activeTertiary = blue80;
 var hoverUI = '#e5e5e5';
+var hoverLightUI = '#e5e5e5';
 var activeUI = gray30;
+var activeLightUI = gray30;
 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;
@@ -137,7 +140,6 @@ var disabled02 = gray30;
 var disabled03 = gray50;
 var highlight = blue20;
 var decorative01 = gray20;
-var hoverLightUI = '#e5e5e5';
 var buttonSeparator = '#e0e0e0';
 var skeleton01 = '#e5e5e5';
 var skeleton02 = gray30; // Type
@@ -147,6 +149,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 +186,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,
@@ -194,7 +198,9 @@ var white$1 = /*#__PURE__*/Object.freeze({
   hoverTertiary: hoverTertiary,
   activeTertiary: activeTertiary,
   hoverUI: hoverUI,
+  hoverLightUI: hoverLightUI,
   activeUI: activeUI,
+  activeLightUI: activeLightUI,
   selectedUI: selectedUI,
   selectedLightUI: selectedLightUI,
   inverseHoverUI: inverseHoverUI,
@@ -208,7 +214,6 @@ var white$1 = /*#__PURE__*/Object.freeze({
   disabled03: disabled03,
   highlight: highlight,
   decorative01: decorative01,
-  hoverLightUI: hoverLightUI,
   buttonSeparator: buttonSeparator,
   skeleton01: skeleton01,
   skeleton02: skeleton02,
@@ -217,6 +222,7 @@ var white$1 = /*#__PURE__*/Object.freeze({
   brand03: brand03,
   active01: active01,
   hoverField: hoverField,
+  danger: danger,
   caption01: caption01,
   label01: label01,
   helperText01: helperText01,
@@ -320,7 +326,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;
@@ -332,12 +339,14 @@ var activeSecondary$1 = gray60;
 var hoverTertiary$1 = '#0353e9';
 var activeTertiary$1 = blue80;
 var hoverUI$1 = '#e5e5e5';
+var hoverLightUI$1 = '#e5e5e5';
 var activeUI$1 = gray30;
+var activeLightUI$1 = gray30;
 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;
@@ -346,7 +355,6 @@ var disabled02$1 = gray30;
 var disabled03$1 = gray50;
 var highlight$1 = blue10;
 var decorative01$1 = gray20;
-var hoverLightUI$1 = '#e5e5e5';
 var buttonSeparator$1 = '#e0e0e0';
 var skeleton01$1 = '#e5e5e5';
 var skeleton02$1 = gray30;
@@ -356,6 +364,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 +401,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,
@@ -403,7 +413,9 @@ var g10 = /*#__PURE__*/Object.freeze({
   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,
@@ -417,7 +429,6 @@ var g10 = /*#__PURE__*/Object.freeze({
   disabled03: disabled03$1,
   highlight: highlight$1,
   decorative01: decorative01$1,
-  hoverLightUI: hoverLightUI$1,
   buttonSeparator: buttonSeparator$1,
   skeleton01: skeleton01$1,
   skeleton02: skeleton02$1,
@@ -426,6 +437,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 +541,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;
@@ -541,12 +554,14 @@ var activeSecondary$2 = gray80;
 var hoverTertiary$2 = gray10;
 var activeTertiary$2 = gray30;
 var hoverUI$2 = '#353535';
+var hoverLightUI$2 = '#4c4c4c';
 var activeUI$2 = gray70;
+var activeLightUI$2 = gray60;
 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;
@@ -555,7 +570,6 @@ var disabled02$2 = gray70;
 var disabled03$2 = gray50;
 var highlight$2 = blue80;
 var decorative01$2 = gray70;
-var hoverLightUI$2 = '#525252';
 var buttonSeparator$2 = '#161616';
 var skeleton01$2 = '#353535';
 var skeleton02$2 = gray80;
@@ -565,6 +579,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 +616,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,
@@ -612,7 +628,9 @@ var g100 = /*#__PURE__*/Object.freeze({
   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,
@@ -626,7 +644,6 @@ var g100 = /*#__PURE__*/Object.freeze({
   disabled03: disabled03$2,
   highlight: highlight$2,
   decorative01: decorative01$2,
-  hoverLightUI: hoverLightUI$2,
   buttonSeparator: buttonSeparator$2,
   skeleton01: skeleton01$2,
   skeleton02: skeleton02$2,
@@ -635,6 +652,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 +756,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;
@@ -750,12 +769,14 @@ var activeSecondary$3 = gray80;
 var hoverTertiary$3 = gray10;
 var activeTertiary$3 = gray30;
 var hoverUI$3 = '#4c4c4c';
+var hoverLightUI$3 = '#656565';
 var activeUI$3 = gray60;
+var activeLightUI$3 = gray50;
 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;
@@ -764,7 +785,6 @@ var disabled02$3 = gray60;
 var disabled03$3 = gray40;
 var highlight$3 = blue70;
 var decorative01$3 = gray60;
-var hoverLightUI$3 = '#6f6f6f';
 var buttonSeparator$3 = '#161616';
 var skeleton01$3 = '#353535';
 var skeleton02$3 = gray70;
@@ -774,6 +794,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 +831,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,
@@ -821,7 +843,9 @@ var g90 = /*#__PURE__*/Object.freeze({
   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,
@@ -835,7 +859,6 @@ var g90 = /*#__PURE__*/Object.freeze({
   disabled03: disabled03$3,
   highlight: highlight$3,
   decorative01: decorative01$3,
-  hoverLightUI: hoverLightUI$3,
   buttonSeparator: buttonSeparator$3,
   skeleton01: skeleton01$3,
   skeleton02: skeleton02$3,
@@ -844,6 +867,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 +971,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';
@@ -959,7 +984,9 @@ var activeSecondary$4 = '#414f59';
 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';
@@ -973,7 +1000,6 @@ var disabled02$4 = '#dfe3e6';
 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)';
@@ -983,6 +1009,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 +1046,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,
@@ -1030,7 +1058,9 @@ var v9 = /*#__PURE__*/Object.freeze({
   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,
@@ -1044,7 +1074,6 @@ var v9 = /*#__PURE__*/Object.freeze({
   disabled03: disabled03$4,
   highlight: highlight$4,
   decorative01: decorative01$4,
-  hoverLightUI: hoverLightUI$4,
   buttonSeparator: buttonSeparator$4,
   skeleton01: skeleton01$4,
   skeleton02: skeleton02$4,
@@ -1053,6 +1082,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 +1155,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
-'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.
@@ -1175,12 +1205,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']
+    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']
 };
 
 /**
@@ -1197,4 +1227,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, hoverLightUI, activeUI, activeLightUI, selectedUI, selectedLightUI, inverseHoverUI, hoverSelectedUI, hoverDanger, activeDanger, hoverRow, visitedLink, disabled01, disabled02, disabled03, highlight, decorative01, buttonSeparator, skeleton01, skeleton02, brand01, brand02, brand03, active01, hoverField, danger };