@carbon/themes 10.22.0 → 10.22.1

package/docs/sass.md

@@ -87,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)
@@ -295,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;
@@ -636,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')
@@ -1370,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,
@@ -2112,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)
@@ -2516,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')),
@@ -4301,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

@@ -148,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,
@@ -219,6 +220,7 @@ var white$1 = /*#__PURE__*/Object.freeze({
   brand03: brand03,
   active01: active01,
   hoverField: hoverField,
+  danger: danger,
   caption01: caption01,
   label01: label01,
   helperText01: helperText01,
@@ -359,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,
@@ -430,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,
@@ -570,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,
@@ -641,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,
@@ -781,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,
@@ -852,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,
@@ -992,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,
@@ -1063,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,
@@ -1137,7 +1147,7 @@ var v9 = /*#__PURE__*/Object.freeze({
 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', '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.
@@ -1185,12 +1195,12 @@ var tokens = {
 var unstable__meta = {
   colors: [{
     type: 'core',
-    tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', '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']
+    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']
 };
 
 /**
@@ -1207,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, 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 };
+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 };

package/lib/index.js

@@ -152,6 +152,7 @@ var brand02 = interactive02;
 var brand03 = interactive03;
 var active01 = activeUI;
 var hoverField = hoverUI;
+var danger = danger01;
 
 var white = /*#__PURE__*/Object.freeze({
   interactive01: interactive01,
@@ -223,6 +224,7 @@ var white = /*#__PURE__*/Object.freeze({
   brand03: brand03,
   active01: active01,
   hoverField: hoverField,
+  danger: danger,
   caption01: type.caption01,
   label01: type.label01,
   helperText01: type.helperText01,
@@ -363,6 +365,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,
@@ -434,6 +437,7 @@ var g10 = /*#__PURE__*/Object.freeze({
   brand03: brand03$1,
   active01: active01$1,
   hoverField: hoverField$1,
+  danger: danger$1,
   caption01: type.caption01,
   label01: type.label01,
   helperText01: type.helperText01,
@@ -574,6 +578,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,
@@ -645,6 +650,7 @@ var g100 = /*#__PURE__*/Object.freeze({
   brand03: brand03$2,
   active01: active01$2,
   hoverField: hoverField$2,
+  danger: danger$2,
   caption01: type.caption01,
   label01: type.label01,
   helperText01: type.helperText01,
@@ -785,6 +791,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,
@@ -856,6 +863,7 @@ var g90 = /*#__PURE__*/Object.freeze({
   brand03: brand03$3,
   active01: active01$3,
   hoverField: hoverField$3,
+  danger: danger$3,
   caption01: type.caption01,
   label01: type.label01,
   helperText01: type.helperText01,
@@ -996,6 +1004,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,
@@ -1067,6 +1076,7 @@ var v9 = /*#__PURE__*/Object.freeze({
   brand03: brand03$4,
   active01: active01$4,
   hoverField: hoverField$4,
+  danger: danger$4,
   caption01: type.caption01,
   label01: type.label01,
   helperText01: type.helperText01,
@@ -1141,7 +1151,7 @@ var v9 = /*#__PURE__*/Object.freeze({
 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', '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.
@@ -1189,12 +1199,12 @@ var tokens = {
 var unstable__meta = {
   colors: [{
     type: 'core',
-    tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', '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']
+    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']
 };
 
 /**
@@ -1350,3 +1360,4 @@ exports.brand02 = brand02;
 exports.brand03 = brand03;
 exports.active01 = active01;
 exports.hoverField = hoverField;
+exports.danger = danger;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/themes",
   "description": "Themes for applying color in the Carbon Design System",
-  "version": "10.22.0",
+  "version": "10.22.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -40,5 +40,5 @@
     "node-sass": "^4.13.1",
     "rimraf": "^3.0.0"
   },
-  "gitHead": "e5565df7c0b7b69fd456b3010882844ba0d88d00"
+  "gitHead": "9159353b34ef5e1944536c1954ac6322b2ea5716"
 }

package/scss/generated/_mixins.scss

@@ -107,6 +107,7 @@
   $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;
@@ -448,6 +449,10 @@
       --#{$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')
@@ -1182,6 +1187,10 @@
       @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,

package/scss/generated/_themes.scss

@@ -76,6 +76,7 @@ $carbon--theme--white: (
   brand-03: #0f62fe,
   active-01: #c6c6c6,
   hover-field: #e5e5e5,
+  danger: #da1e28,
   caption-01: (
     font-size: 0.75rem,
     font-weight: 400,
@@ -1136,6 +1137,12 @@ $carbon--theme: (
       $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'),

package/scss/generated/_tokens.scss

@@ -759,6 +759,16 @@ $hover-field: if(
   #e5e5e5
 ) !default;
 
+/// @type {undefined}
+/// @access public
+/// @group @carbon/themes
+$danger: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'danger'),
+  map-get($carbon--theme, 'danger'),
+  #da1e28
+) !default;
+
 /// @type {Number}
 /// @access public
 /// @group @carbon/themes

package/src/g10.js

@@ -213,3 +213,4 @@ export const brand02 = interactive02;
 export const brand03 = interactive03;
 export const active01 = activeUI;
 export const hoverField = hoverUI;
+export const danger = danger01;

package/src/g100.js

@@ -212,3 +212,4 @@ export const brand02 = interactive02;
 export const brand03 = interactive03;
 export const active01 = activeUI;
 export const hoverField = hoverUI;
+export const danger = danger01;

package/src/g90.js

@@ -214,3 +214,4 @@ export const brand02 = interactive02;
 export const brand03 = interactive03;
 export const active01 = activeUI;
 export const hoverField = hoverUI;
+export const danger = danger01;

package/src/tokens.js

@@ -111,6 +111,7 @@ const colors = [
   'brand03',
   'active01',
   'hoverField',
+  'danger',
 ];
 
 const numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
@@ -172,6 +173,7 @@ export const unstable__meta = {
         'brand01',
         'brand02',
         'brand03',
+        'danger',
         'danger01',
         'danger02',
         'ui01',
@@ -241,5 +243,5 @@ export const unstable__meta = {
       ],
     },
   ],
-  deprecated: ['brand01', 'brand02', 'brand03', 'active01'],
+  deprecated: ['brand01', 'brand02', 'brand03', 'active01', 'danger'],
 };

package/src/v9.js

@@ -177,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

@@ -216,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

@@ -149,6 +149,7 @@
   var brand03 = interactive03;
   var active01 = activeUI;
   var hoverField = hoverUI;
+  var danger = danger01;
 
   var white = /*#__PURE__*/Object.freeze({
     interactive01: interactive01,
@@ -220,6 +221,7 @@
     brand03: brand03,
     active01: active01,
     hoverField: hoverField,
+    danger: danger,
     caption01: type.caption01,
     label01: type.label01,
     helperText01: type.helperText01,
@@ -360,6 +362,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,
@@ -431,6 +434,7 @@
     brand03: brand03$1,
     active01: active01$1,
     hoverField: hoverField$1,
+    danger: danger$1,
     caption01: type.caption01,
     label01: type.label01,
     helperText01: type.helperText01,
@@ -571,6 +575,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,
@@ -642,6 +647,7 @@
     brand03: brand03$2,
     active01: active01$2,
     hoverField: hoverField$2,
+    danger: danger$2,
     caption01: type.caption01,
     label01: type.label01,
     helperText01: type.helperText01,
@@ -782,6 +788,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,
@@ -853,6 +860,7 @@
     brand03: brand03$3,
     active01: active01$3,
     hoverField: hoverField$3,
+    danger: danger$3,
     caption01: type.caption01,
     label01: type.label01,
     helperText01: type.helperText01,
@@ -993,6 +1001,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,
@@ -1064,6 +1073,7 @@
     brand03: brand03$4,
     active01: active01$4,
     hoverField: hoverField$4,
+    danger: danger$4,
     caption01: type.caption01,
     label01: type.label01,
     helperText01: type.helperText01,
@@ -1138,7 +1148,7 @@
   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', '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.
@@ -1186,12 +1196,12 @@
   var unstable__meta = {
     colors: [{
       type: 'core',
-      tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', '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']
+      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']
   };
 
   /**
@@ -1347,6 +1357,7 @@
   exports.brand03 = brand03;
   exports.active01 = active01;
   exports.hoverField = hoverField;
+  exports.danger = danger;
 
   Object.defineProperty(exports, '__esModule', { value: true });