diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss
index 296d71f01d3e..bab7862f6d84 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss
@@ -34,6 +34,7 @@
$interactive-02: map-get($theme, 'interactive-02') !global;
$interactive-03: map-get($theme, 'interactive-03') !global;
$interactive-04: map-get($theme, 'interactive-04') !global;
+ $danger: map-get($theme, 'danger') !global;
$ui-background: map-get($theme, 'ui-background') !global;
$ui-01: map-get($theme, 'ui-01') !global;
$ui-02: map-get($theme, 'ui-02') !global;
@@ -44,6 +45,7 @@
$text-02: map-get($theme, 'text-02') !global;
$text-03: map-get($theme, 'text-03') !global;
$text-04: map-get($theme, 'text-04') !global;
+ $text-05: map-get($theme, 'text-05') !global;
$icon-01: map-get($theme, 'icon-01') !global;
$icon-02: map-get($theme, 'icon-02') !global;
$icon-03: map-get($theme, 'icon-03') !global;
@@ -97,6 +99,7 @@
--interactive-02: #{map-get($theme, 'interactive-02')};
--interactive-03: #{map-get($theme, 'interactive-03')};
--interactive-04: #{map-get($theme, 'interactive-04')};
+ --danger: #{map-get($theme, 'danger')};
--ui-background: #{map-get($theme, 'ui-background')};
--ui-01: #{map-get($theme, 'ui-01')};
--ui-02: #{map-get($theme, 'ui-02')};
@@ -107,6 +110,7 @@
--text-02: #{map-get($theme, 'text-02')};
--text-03: #{map-get($theme, 'text-03')};
--text-04: #{map-get($theme, 'text-04')};
+ --text-05: #{map-get($theme, 'text-05')};
--icon-01: #{map-get($theme, 'icon-01')};
--icon-02: #{map-get($theme, 'icon-02')};
--icon-03: #{map-get($theme, 'icon-03')};
diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_theme-maps.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_theme-maps.scss
index eaf146ae6d7f..88ff46e43aeb 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_theme-maps.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_theme-maps.scss
@@ -14,6 +14,7 @@ $carbon--theme--white: (
interactive-02: #393939,
interactive-03: #0f62fe,
interactive-04: #0f62fe,
+ danger: #da1e28,
ui-background: #ffffff,
ui-01: #f4f4f4,
ui-02: #ffffff,
@@ -21,9 +22,10 @@ $carbon--theme--white: (
ui-04: #8d8d8d,
ui-05: #161616,
text-01: #161616,
- text-02: #525252,
- text-03: #8d8d8d,
+ text-02: #393939,
+ text-03: #a8a8a8,
text-04: #ffffff,
+ text-05: #6f6f6f,
icon-01: #161616,
icon-02: #525252,
icon-03: #ffffff,
@@ -81,6 +83,7 @@ $carbon--theme--g10: (
interactive-02: #393939,
interactive-03: #0f62fe,
interactive-04: #0f62fe,
+ danger: #da1e28,
ui-background: #f4f4f4,
ui-01: #ffffff,
ui-02: #f4f4f4,
@@ -88,9 +91,10 @@ $carbon--theme--g10: (
ui-04: #8d8d8d,
ui-05: #161616,
text-01: #161616,
- text-02: #525252,
- text-03: #8d8d8d,
+ text-02: #393939,
+ text-03: #a8a8a8,
text-04: #ffffff,
+ text-05: #6f6f6f,
icon-01: #161616,
icon-02: #525252,
icon-03: #ffffff,
@@ -148,6 +152,7 @@ $carbon--theme--g90: (
interactive-02: #6f6f6f,
interactive-03: #ffffff,
interactive-04: #4589ff,
+ danger: #da1e28,
ui-background: #262626,
ui-01: #393939,
ui-02: #525252,
@@ -156,8 +161,9 @@ $carbon--theme--g90: (
ui-05: #f4f4f4,
text-01: #f4f4f4,
text-02: #c6c6c6,
- text-03: #8d8d8d,
+ text-03: #6f6f6f,
text-04: #ffffff,
+ text-05: #8d8d8d,
icon-01: #f4f4f4,
icon-02: #c6c6c6,
icon-03: #ffffff,
@@ -215,6 +221,7 @@ $carbon--theme--g100: (
interactive-02: #6f6f6f,
interactive-03: #ffffff,
interactive-04: #4589ff,
+ danger: #da1e28,
ui-background: #161616,
ui-01: #262626,
ui-02: #393939,
@@ -225,6 +232,7 @@ $carbon--theme--g100: (
text-02: #c6c6c6,
text-03: #6f6f6f,
text-04: #ffffff,
+ text-05: #8d8d8d,
icon-01: #f4f4f4,
icon-02: #c6c6c6,
icon-03: #ffffff,
@@ -282,6 +290,7 @@ $carbon--theme--v9: (
interactive-02: #5a6872,
interactive-03: #5a6872,
interactive-04: #3d70b2,
+ danger: #e0182d,
ui-background: #f4f7fb,
ui-01: #ffffff,
ui-02: #f4f7fb,
@@ -292,6 +301,7 @@ $carbon--theme--v9: (
text-02: #5a6872,
text-03: #cdd1d4,
text-04: #ffffff,
+ text-05: #5a6872,
icon-01: #3d70b2,
icon-02: #5a6872,
icon-03: #ffffff,
diff --git a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_tokens.scss b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_tokens.scss
index 12fc4a709ccf..4034dbec17c4 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_tokens.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/elements/scss/themes/_tokens.scss
@@ -26,6 +26,10 @@ $interactive-03: map-get($carbon--theme, 'interactive-03') !default;
/// @access public
/// @group @carbon/themes
$interactive-04: map-get($carbon--theme, 'interactive-04') !default;
+/// @type Color
+/// @access public
+/// @group @carbon/themes
+$danger: map-get($carbon--theme, 'danger') !default;
/// Default page background
/// @type Color
/// @access public
@@ -76,6 +80,10 @@ $text-03: map-get($carbon--theme, 'text-03') !default;
/// @access public
/// @group @carbon/themes
$text-04: map-get($carbon--theme, 'text-04') !default;
+/// @type Color
+/// @access public
+/// @group @carbon/themes
+$text-05: map-get($carbon--theme, 'text-05') !default;
/// Primary icons
/// @type Color
/// @access public
diff --git a/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_mixins.scss b/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_mixins.scss
index 296d71f01d3e..bab7862f6d84 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_mixins.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_mixins.scss
@@ -34,6 +34,7 @@
$interactive-02: map-get($theme, 'interactive-02') !global;
$interactive-03: map-get($theme, 'interactive-03') !global;
$interactive-04: map-get($theme, 'interactive-04') !global;
+ $danger: map-get($theme, 'danger') !global;
$ui-background: map-get($theme, 'ui-background') !global;
$ui-01: map-get($theme, 'ui-01') !global;
$ui-02: map-get($theme, 'ui-02') !global;
@@ -44,6 +45,7 @@
$text-02: map-get($theme, 'text-02') !global;
$text-03: map-get($theme, 'text-03') !global;
$text-04: map-get($theme, 'text-04') !global;
+ $text-05: map-get($theme, 'text-05') !global;
$icon-01: map-get($theme, 'icon-01') !global;
$icon-02: map-get($theme, 'icon-02') !global;
$icon-03: map-get($theme, 'icon-03') !global;
@@ -97,6 +99,7 @@
--interactive-02: #{map-get($theme, 'interactive-02')};
--interactive-03: #{map-get($theme, 'interactive-03')};
--interactive-04: #{map-get($theme, 'interactive-04')};
+ --danger: #{map-get($theme, 'danger')};
--ui-background: #{map-get($theme, 'ui-background')};
--ui-01: #{map-get($theme, 'ui-01')};
--ui-02: #{map-get($theme, 'ui-02')};
@@ -107,6 +110,7 @@
--text-02: #{map-get($theme, 'text-02')};
--text-03: #{map-get($theme, 'text-03')};
--text-04: #{map-get($theme, 'text-04')};
+ --text-05: #{map-get($theme, 'text-05')};
--icon-01: #{map-get($theme, 'icon-01')};
--icon-02: #{map-get($theme, 'icon-02')};
--icon-03: #{map-get($theme, 'icon-03')};
diff --git a/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_theme-maps.scss b/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_theme-maps.scss
index eaf146ae6d7f..88ff46e43aeb 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_theme-maps.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_theme-maps.scss
@@ -14,6 +14,7 @@ $carbon--theme--white: (
interactive-02: #393939,
interactive-03: #0f62fe,
interactive-04: #0f62fe,
+ danger: #da1e28,
ui-background: #ffffff,
ui-01: #f4f4f4,
ui-02: #ffffff,
@@ -21,9 +22,10 @@ $carbon--theme--white: (
ui-04: #8d8d8d,
ui-05: #161616,
text-01: #161616,
- text-02: #525252,
- text-03: #8d8d8d,
+ text-02: #393939,
+ text-03: #a8a8a8,
text-04: #ffffff,
+ text-05: #6f6f6f,
icon-01: #161616,
icon-02: #525252,
icon-03: #ffffff,
@@ -81,6 +83,7 @@ $carbon--theme--g10: (
interactive-02: #393939,
interactive-03: #0f62fe,
interactive-04: #0f62fe,
+ danger: #da1e28,
ui-background: #f4f4f4,
ui-01: #ffffff,
ui-02: #f4f4f4,
@@ -88,9 +91,10 @@ $carbon--theme--g10: (
ui-04: #8d8d8d,
ui-05: #161616,
text-01: #161616,
- text-02: #525252,
- text-03: #8d8d8d,
+ text-02: #393939,
+ text-03: #a8a8a8,
text-04: #ffffff,
+ text-05: #6f6f6f,
icon-01: #161616,
icon-02: #525252,
icon-03: #ffffff,
@@ -148,6 +152,7 @@ $carbon--theme--g90: (
interactive-02: #6f6f6f,
interactive-03: #ffffff,
interactive-04: #4589ff,
+ danger: #da1e28,
ui-background: #262626,
ui-01: #393939,
ui-02: #525252,
@@ -156,8 +161,9 @@ $carbon--theme--g90: (
ui-05: #f4f4f4,
text-01: #f4f4f4,
text-02: #c6c6c6,
- text-03: #8d8d8d,
+ text-03: #6f6f6f,
text-04: #ffffff,
+ text-05: #8d8d8d,
icon-01: #f4f4f4,
icon-02: #c6c6c6,
icon-03: #ffffff,
@@ -215,6 +221,7 @@ $carbon--theme--g100: (
interactive-02: #6f6f6f,
interactive-03: #ffffff,
interactive-04: #4589ff,
+ danger: #da1e28,
ui-background: #161616,
ui-01: #262626,
ui-02: #393939,
@@ -225,6 +232,7 @@ $carbon--theme--g100: (
text-02: #c6c6c6,
text-03: #6f6f6f,
text-04: #ffffff,
+ text-05: #8d8d8d,
icon-01: #f4f4f4,
icon-02: #c6c6c6,
icon-03: #ffffff,
@@ -282,6 +290,7 @@ $carbon--theme--v9: (
interactive-02: #5a6872,
interactive-03: #5a6872,
interactive-04: #3d70b2,
+ danger: #e0182d,
ui-background: #f4f7fb,
ui-01: #ffffff,
ui-02: #f4f7fb,
@@ -292,6 +301,7 @@ $carbon--theme--v9: (
text-02: #5a6872,
text-03: #cdd1d4,
text-04: #ffffff,
+ text-05: #5a6872,
icon-01: #3d70b2,
icon-02: #5a6872,
icon-03: #ffffff,
diff --git a/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_tokens.scss b/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_tokens.scss
index 12fc4a709ccf..4034dbec17c4 100644
--- a/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_tokens.scss
+++ b/packages/components/src/globals/scss/vendor/@carbon/themes/scss/_tokens.scss
@@ -26,6 +26,10 @@ $interactive-03: map-get($carbon--theme, 'interactive-03') !default;
/// @access public
/// @group @carbon/themes
$interactive-04: map-get($carbon--theme, 'interactive-04') !default;
+/// @type Color
+/// @access public
+/// @group @carbon/themes
+$danger: map-get($carbon--theme, 'danger') !default;
/// Default page background
/// @type Color
/// @access public
@@ -76,6 +80,10 @@ $text-03: map-get($carbon--theme, 'text-03') !default;
/// @access public
/// @group @carbon/themes
$text-04: map-get($carbon--theme, 'text-04') !default;
+/// @type Color
+/// @access public
+/// @group @carbon/themes
+$text-05: map-get($carbon--theme, 'text-05') !default;
/// Primary icons
/// @type Color
/// @access public
diff --git a/packages/elements/docs/sass.md b/packages/elements/docs/sass.md
index c98d2bcb56f7..c121ce668432 100644
--- a/packages/elements/docs/sass.md
+++ b/packages/elements/docs/sass.md
@@ -122,6 +122,7 @@
- [✅interactive-02 [variable]](#interactive-02-variable)
- [✅interactive-03 [variable]](#interactive-03-variable)
- [✅interactive-04 [variable]](#interactive-04-variable)
+ - [✅danger [variable]](#danger-variable)
- [✅ui-background [variable]](#ui-background-variable)
- [✅ui-01 [variable]](#ui-01-variable)
- [✅ui-02 [variable]](#ui-02-variable)
@@ -132,6 +133,7 @@
- [✅text-02 [variable]](#text-02-variable)
- [✅text-03 [variable]](#text-03-variable)
- [✅text-04 [variable]](#text-04-variable)
+ - [✅text-05 [variable]](#text-05-variable)
- [✅icon-01 [variable]](#icon-01-variable)
- [✅icon-02 [variable]](#icon-02-variable)
- [✅icon-03 [variable]](#icon-03-variable)
@@ -3306,6 +3308,7 @@ Define theme variables from a map of tokens
$interactive-02: map-get($theme, 'interactive-02') !global;
$interactive-03: map-get($theme, 'interactive-03') !global;
$interactive-04: map-get($theme, 'interactive-04') !global;
+ $danger: map-get($theme, 'danger') !global;
$ui-background: map-get($theme, 'ui-background') !global;
$ui-01: map-get($theme, 'ui-01') !global;
$ui-02: map-get($theme, 'ui-02') !global;
@@ -3316,6 +3319,7 @@ Define theme variables from a map of tokens
$text-02: map-get($theme, 'text-02') !global;
$text-03: map-get($theme, 'text-03') !global;
$text-04: map-get($theme, 'text-04') !global;
+ $text-05: map-get($theme, 'text-05') !global;
$icon-01: map-get($theme, 'icon-01') !global;
$icon-02: map-get($theme, 'icon-02') !global;
$icon-03: map-get($theme, 'icon-03') !global;
@@ -3369,6 +3373,7 @@ Define theme variables from a map of tokens
--interactive-02: #{map-get($theme, 'interactive-02')};
--interactive-03: #{map-get($theme, 'interactive-03')};
--interactive-04: #{map-get($theme, 'interactive-04')};
+ --danger: #{map-get($theme, 'danger')};
--ui-background: #{map-get($theme, 'ui-background')};
--ui-01: #{map-get($theme, 'ui-01')};
--ui-02: #{map-get($theme, 'ui-02')};
@@ -3379,6 +3384,7 @@ Define theme variables from a map of tokens
--text-02: #{map-get($theme, 'text-02')};
--text-03: #{map-get($theme, 'text-03')};
--text-04: #{map-get($theme, 'text-04')};
+ --text-05: #{map-get($theme, 'text-05')};
--icon-01: #{map-get($theme, 'icon-01')};
--icon-02: #{map-get($theme, 'icon-02')};
--icon-03: #{map-get($theme, 'icon-03')};
@@ -3477,6 +3483,7 @@ Define theme variables from a map of tokens
- [interactive-02 [variable]](#interactive-02-variable)
- [interactive-03 [variable]](#interactive-03-variable)
- [interactive-04 [variable]](#interactive-04-variable)
+ - [danger [variable]](#danger-variable)
- [ui-background [variable]](#ui-background-variable)
- [ui-01 [variable]](#ui-01-variable)
- [ui-02 [variable]](#ui-02-variable)
@@ -3487,6 +3494,7 @@ Define theme variables from a map of tokens
- [text-02 [variable]](#text-02-variable)
- [text-03 [variable]](#text-03-variable)
- [text-04 [variable]](#text-04-variable)
+ - [text-05 [variable]](#text-05-variable)
- [icon-01 [variable]](#icon-01-variable)
- [icon-02 [variable]](#icon-02-variable)
- [icon-03 [variable]](#icon-03-variable)
@@ -3549,6 +3557,7 @@ $carbon--theme--white: (
interactive-02: #393939,
interactive-03: #0f62fe,
interactive-04: #0f62fe,
+ danger: #da1e28,
ui-background: #ffffff,
ui-01: #f4f4f4,
ui-02: #ffffff,
@@ -3556,9 +3565,10 @@ $carbon--theme--white: (
ui-04: #8d8d8d,
ui-05: #161616,
text-01: #161616,
- text-02: #525252,
- text-03: #8d8d8d,
+ text-02: #393939,
+ text-03: #a8a8a8,
text-04: #ffffff,
+ text-05: #6f6f6f,
icon-01: #161616,
icon-02: #525252,
icon-03: #ffffff,
@@ -3629,6 +3639,7 @@ $carbon--theme--g10: (
interactive-02: #393939,
interactive-03: #0f62fe,
interactive-04: #0f62fe,
+ danger: #da1e28,
ui-background: #f4f4f4,
ui-01: #ffffff,
ui-02: #f4f4f4,
@@ -3636,9 +3647,10 @@ $carbon--theme--g10: (
ui-04: #8d8d8d,
ui-05: #161616,
text-01: #161616,
- text-02: #525252,
- text-03: #8d8d8d,
+ text-02: #393939,
+ text-03: #a8a8a8,
text-04: #ffffff,
+ text-05: #6f6f6f,
icon-01: #161616,
icon-02: #525252,
icon-03: #ffffff,
@@ -3707,6 +3719,7 @@ $carbon--theme--g90: (
interactive-02: #6f6f6f,
interactive-03: #ffffff,
interactive-04: #4589ff,
+ danger: #da1e28,
ui-background: #262626,
ui-01: #393939,
ui-02: #525252,
@@ -3715,8 +3728,9 @@ $carbon--theme--g90: (
ui-05: #f4f4f4,
text-01: #f4f4f4,
text-02: #c6c6c6,
- text-03: #8d8d8d,
+ text-03: #6f6f6f,
text-04: #ffffff,
+ text-05: #8d8d8d,
icon-01: #f4f4f4,
icon-02: #c6c6c6,
icon-03: #ffffff,
@@ -3785,6 +3799,7 @@ $carbon--theme--g100: (
interactive-02: #6f6f6f,
interactive-03: #ffffff,
interactive-04: #4589ff,
+ danger: #da1e28,
ui-background: #161616,
ui-01: #262626,
ui-02: #393939,
@@ -3795,6 +3810,7 @@ $carbon--theme--g100: (
text-02: #c6c6c6,
text-03: #6f6f6f,
text-04: #ffffff,
+ text-05: #8d8d8d,
icon-01: #f4f4f4,
icon-02: #c6c6c6,
icon-03: #ffffff,
@@ -3863,6 +3879,7 @@ $carbon--theme--v9: (
interactive-02: #5a6872,
interactive-03: #5a6872,
interactive-04: #3d70b2,
+ danger: #e0182d,
ui-background: #f4f7fb,
ui-01: #ffffff,
ui-02: #f4f7fb,
@@ -3873,6 +3890,7 @@ $carbon--theme--v9: (
text-02: #5a6872,
text-03: #cdd1d4,
text-04: #ffffff,
+ text-05: #5a6872,
icon-01: #3d70b2,
icon-02: #5a6872,
icon-03: #ffffff,
@@ -4020,6 +4038,22 @@ $interactive-04: map-get($carbon--theme, 'interactive-04');
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `Color`
+- **Used by**:
+ - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅danger [variable]
+
+
+Source code
+
+```scss
+$danger: map-get($carbon--theme, 'danger');
+```
+
+
+
- **Group**: [@carbon/themes](#carbonthemes)
- **Type**: `Color`
- **Used by**:
@@ -4200,6 +4234,22 @@ $text-04: map-get($carbon--theme, 'text-04');
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `Color`
+- **Used by**:
+ - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅text-05 [variable]
+
+
+Source code
+
+```scss
+$text-05: map-get($carbon--theme, 'text-05');
+```
+
+
+
- **Group**: [@carbon/themes](#carbonthemes)
- **Type**: `Color`
- **Used by**:
diff --git a/packages/themes/docs/sass.md b/packages/themes/docs/sass.md
index bf7e16314348..61ccd86ea5c9 100644
--- a/packages/themes/docs/sass.md
+++ b/packages/themes/docs/sass.md
@@ -20,6 +20,7 @@
- [✅interactive-02 [variable]](#interactive-02-variable)
- [✅interactive-03 [variable]](#interactive-03-variable)
- [✅interactive-04 [variable]](#interactive-04-variable)
+ - [✅danger [variable]](#danger-variable)
- [✅ui-background [variable]](#ui-background-variable)
- [✅ui-01 [variable]](#ui-01-variable)
- [✅ui-02 [variable]](#ui-02-variable)
@@ -30,6 +31,7 @@
- [✅text-02 [variable]](#text-02-variable)
- [✅text-03 [variable]](#text-03-variable)
- [✅text-04 [variable]](#text-04-variable)
+ - [✅text-05 [variable]](#text-05-variable)
- [✅icon-01 [variable]](#icon-01-variable)
- [✅icon-02 [variable]](#icon-02-variable)
- [✅icon-03 [variable]](#icon-03-variable)
@@ -95,6 +97,7 @@ Define theme variables from a map of tokens
$interactive-02: map-get($theme, 'interactive-02') !global;
$interactive-03: map-get($theme, 'interactive-03') !global;
$interactive-04: map-get($theme, 'interactive-04') !global;
+ $danger: map-get($theme, 'danger') !global;
$ui-background: map-get($theme, 'ui-background') !global;
$ui-01: map-get($theme, 'ui-01') !global;
$ui-02: map-get($theme, 'ui-02') !global;
@@ -105,6 +108,7 @@ Define theme variables from a map of tokens
$text-02: map-get($theme, 'text-02') !global;
$text-03: map-get($theme, 'text-03') !global;
$text-04: map-get($theme, 'text-04') !global;
+ $text-05: map-get($theme, 'text-05') !global;
$icon-01: map-get($theme, 'icon-01') !global;
$icon-02: map-get($theme, 'icon-02') !global;
$icon-03: map-get($theme, 'icon-03') !global;
@@ -158,6 +162,7 @@ Define theme variables from a map of tokens
--interactive-02: #{map-get($theme, 'interactive-02')};
--interactive-03: #{map-get($theme, 'interactive-03')};
--interactive-04: #{map-get($theme, 'interactive-04')};
+ --danger: #{map-get($theme, 'danger')};
--ui-background: #{map-get($theme, 'ui-background')};
--ui-01: #{map-get($theme, 'ui-01')};
--ui-02: #{map-get($theme, 'ui-02')};
@@ -168,6 +173,7 @@ Define theme variables from a map of tokens
--text-02: #{map-get($theme, 'text-02')};
--text-03: #{map-get($theme, 'text-03')};
--text-04: #{map-get($theme, 'text-04')};
+ --text-05: #{map-get($theme, 'text-05')};
--icon-01: #{map-get($theme, 'icon-01')};
--icon-02: #{map-get($theme, 'icon-02')};
--icon-03: #{map-get($theme, 'icon-03')};
@@ -266,6 +272,7 @@ Define theme variables from a map of tokens
- [interactive-02 [variable]](#interactive-02-variable)
- [interactive-03 [variable]](#interactive-03-variable)
- [interactive-04 [variable]](#interactive-04-variable)
+ - [danger [variable]](#danger-variable)
- [ui-background [variable]](#ui-background-variable)
- [ui-01 [variable]](#ui-01-variable)
- [ui-02 [variable]](#ui-02-variable)
@@ -276,6 +283,7 @@ Define theme variables from a map of tokens
- [text-02 [variable]](#text-02-variable)
- [text-03 [variable]](#text-03-variable)
- [text-04 [variable]](#text-04-variable)
+ - [text-05 [variable]](#text-05-variable)
- [icon-01 [variable]](#icon-01-variable)
- [icon-02 [variable]](#icon-02-variable)
- [icon-03 [variable]](#icon-03-variable)
@@ -338,6 +346,7 @@ $carbon--theme--white: (
interactive-02: #393939,
interactive-03: #0f62fe,
interactive-04: #0f62fe,
+ danger: #da1e28,
ui-background: #ffffff,
ui-01: #f4f4f4,
ui-02: #ffffff,
@@ -345,9 +354,10 @@ $carbon--theme--white: (
ui-04: #8d8d8d,
ui-05: #161616,
text-01: #161616,
- text-02: #525252,
- text-03: #8d8d8d,
+ text-02: #393939,
+ text-03: #a8a8a8,
text-04: #ffffff,
+ text-05: #6f6f6f,
icon-01: #161616,
icon-02: #525252,
icon-03: #ffffff,
@@ -418,6 +428,7 @@ $carbon--theme--g10: (
interactive-02: #393939,
interactive-03: #0f62fe,
interactive-04: #0f62fe,
+ danger: #da1e28,
ui-background: #f4f4f4,
ui-01: #ffffff,
ui-02: #f4f4f4,
@@ -425,9 +436,10 @@ $carbon--theme--g10: (
ui-04: #8d8d8d,
ui-05: #161616,
text-01: #161616,
- text-02: #525252,
- text-03: #8d8d8d,
+ text-02: #393939,
+ text-03: #a8a8a8,
text-04: #ffffff,
+ text-05: #6f6f6f,
icon-01: #161616,
icon-02: #525252,
icon-03: #ffffff,
@@ -496,6 +508,7 @@ $carbon--theme--g90: (
interactive-02: #6f6f6f,
interactive-03: #ffffff,
interactive-04: #4589ff,
+ danger: #da1e28,
ui-background: #262626,
ui-01: #393939,
ui-02: #525252,
@@ -504,8 +517,9 @@ $carbon--theme--g90: (
ui-05: #f4f4f4,
text-01: #f4f4f4,
text-02: #c6c6c6,
- text-03: #8d8d8d,
+ text-03: #6f6f6f,
text-04: #ffffff,
+ text-05: #8d8d8d,
icon-01: #f4f4f4,
icon-02: #c6c6c6,
icon-03: #ffffff,
@@ -574,6 +588,7 @@ $carbon--theme--g100: (
interactive-02: #6f6f6f,
interactive-03: #ffffff,
interactive-04: #4589ff,
+ danger: #da1e28,
ui-background: #161616,
ui-01: #262626,
ui-02: #393939,
@@ -584,6 +599,7 @@ $carbon--theme--g100: (
text-02: #c6c6c6,
text-03: #6f6f6f,
text-04: #ffffff,
+ text-05: #8d8d8d,
icon-01: #f4f4f4,
icon-02: #c6c6c6,
icon-03: #ffffff,
@@ -652,6 +668,7 @@ $carbon--theme--v9: (
interactive-02: #5a6872,
interactive-03: #5a6872,
interactive-04: #3d70b2,
+ danger: #e0182d,
ui-background: #f4f7fb,
ui-01: #ffffff,
ui-02: #f4f7fb,
@@ -662,6 +679,7 @@ $carbon--theme--v9: (
text-02: #5a6872,
text-03: #cdd1d4,
text-04: #ffffff,
+ text-05: #5a6872,
icon-01: #3d70b2,
icon-02: #5a6872,
icon-03: #ffffff,
@@ -809,6 +827,22 @@ $interactive-04: map-get($carbon--theme, 'interactive-04');
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `Color`
+- **Used by**:
+ - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅danger [variable]
+
+
+Source code
+
+```scss
+$danger: map-get($carbon--theme, 'danger');
+```
+
+
+
- **Group**: [@carbon/themes](#carbonthemes)
- **Type**: `Color`
- **Used by**:
@@ -989,6 +1023,22 @@ $text-04: map-get($carbon--theme, 'text-04');
+- **Group**: [@carbon/themes](#carbonthemes)
+- **Type**: `Color`
+- **Used by**:
+ - [carbon--theme [mixin]](#carbon--theme-mixin)
+
+### ✅text-05 [variable]
+
+
+Source code
+
+```scss
+$text-05: map-get($carbon--theme, 'text-05');
+```
+
+
+
- **Group**: [@carbon/themes](#carbonthemes)
- **Type**: `Color`
- **Used by**:
diff --git a/packages/themes/scss/_mixins.scss b/packages/themes/scss/_mixins.scss
index 296d71f01d3e..bab7862f6d84 100644
--- a/packages/themes/scss/_mixins.scss
+++ b/packages/themes/scss/_mixins.scss
@@ -34,6 +34,7 @@
$interactive-02: map-get($theme, 'interactive-02') !global;
$interactive-03: map-get($theme, 'interactive-03') !global;
$interactive-04: map-get($theme, 'interactive-04') !global;
+ $danger: map-get($theme, 'danger') !global;
$ui-background: map-get($theme, 'ui-background') !global;
$ui-01: map-get($theme, 'ui-01') !global;
$ui-02: map-get($theme, 'ui-02') !global;
@@ -44,6 +45,7 @@
$text-02: map-get($theme, 'text-02') !global;
$text-03: map-get($theme, 'text-03') !global;
$text-04: map-get($theme, 'text-04') !global;
+ $text-05: map-get($theme, 'text-05') !global;
$icon-01: map-get($theme, 'icon-01') !global;
$icon-02: map-get($theme, 'icon-02') !global;
$icon-03: map-get($theme, 'icon-03') !global;
@@ -97,6 +99,7 @@
--interactive-02: #{map-get($theme, 'interactive-02')};
--interactive-03: #{map-get($theme, 'interactive-03')};
--interactive-04: #{map-get($theme, 'interactive-04')};
+ --danger: #{map-get($theme, 'danger')};
--ui-background: #{map-get($theme, 'ui-background')};
--ui-01: #{map-get($theme, 'ui-01')};
--ui-02: #{map-get($theme, 'ui-02')};
@@ -107,6 +110,7 @@
--text-02: #{map-get($theme, 'text-02')};
--text-03: #{map-get($theme, 'text-03')};
--text-04: #{map-get($theme, 'text-04')};
+ --text-05: #{map-get($theme, 'text-05')};
--icon-01: #{map-get($theme, 'icon-01')};
--icon-02: #{map-get($theme, 'icon-02')};
--icon-03: #{map-get($theme, 'icon-03')};
diff --git a/packages/themes/scss/_theme-maps.scss b/packages/themes/scss/_theme-maps.scss
index eaf146ae6d7f..88ff46e43aeb 100644
--- a/packages/themes/scss/_theme-maps.scss
+++ b/packages/themes/scss/_theme-maps.scss
@@ -14,6 +14,7 @@ $carbon--theme--white: (
interactive-02: #393939,
interactive-03: #0f62fe,
interactive-04: #0f62fe,
+ danger: #da1e28,
ui-background: #ffffff,
ui-01: #f4f4f4,
ui-02: #ffffff,
@@ -21,9 +22,10 @@ $carbon--theme--white: (
ui-04: #8d8d8d,
ui-05: #161616,
text-01: #161616,
- text-02: #525252,
- text-03: #8d8d8d,
+ text-02: #393939,
+ text-03: #a8a8a8,
text-04: #ffffff,
+ text-05: #6f6f6f,
icon-01: #161616,
icon-02: #525252,
icon-03: #ffffff,
@@ -81,6 +83,7 @@ $carbon--theme--g10: (
interactive-02: #393939,
interactive-03: #0f62fe,
interactive-04: #0f62fe,
+ danger: #da1e28,
ui-background: #f4f4f4,
ui-01: #ffffff,
ui-02: #f4f4f4,
@@ -88,9 +91,10 @@ $carbon--theme--g10: (
ui-04: #8d8d8d,
ui-05: #161616,
text-01: #161616,
- text-02: #525252,
- text-03: #8d8d8d,
+ text-02: #393939,
+ text-03: #a8a8a8,
text-04: #ffffff,
+ text-05: #6f6f6f,
icon-01: #161616,
icon-02: #525252,
icon-03: #ffffff,
@@ -148,6 +152,7 @@ $carbon--theme--g90: (
interactive-02: #6f6f6f,
interactive-03: #ffffff,
interactive-04: #4589ff,
+ danger: #da1e28,
ui-background: #262626,
ui-01: #393939,
ui-02: #525252,
@@ -156,8 +161,9 @@ $carbon--theme--g90: (
ui-05: #f4f4f4,
text-01: #f4f4f4,
text-02: #c6c6c6,
- text-03: #8d8d8d,
+ text-03: #6f6f6f,
text-04: #ffffff,
+ text-05: #8d8d8d,
icon-01: #f4f4f4,
icon-02: #c6c6c6,
icon-03: #ffffff,
@@ -215,6 +221,7 @@ $carbon--theme--g100: (
interactive-02: #6f6f6f,
interactive-03: #ffffff,
interactive-04: #4589ff,
+ danger: #da1e28,
ui-background: #161616,
ui-01: #262626,
ui-02: #393939,
@@ -225,6 +232,7 @@ $carbon--theme--g100: (
text-02: #c6c6c6,
text-03: #6f6f6f,
text-04: #ffffff,
+ text-05: #8d8d8d,
icon-01: #f4f4f4,
icon-02: #c6c6c6,
icon-03: #ffffff,
@@ -282,6 +290,7 @@ $carbon--theme--v9: (
interactive-02: #5a6872,
interactive-03: #5a6872,
interactive-04: #3d70b2,
+ danger: #e0182d,
ui-background: #f4f7fb,
ui-01: #ffffff,
ui-02: #f4f7fb,
@@ -292,6 +301,7 @@ $carbon--theme--v9: (
text-02: #5a6872,
text-03: #cdd1d4,
text-04: #ffffff,
+ text-05: #5a6872,
icon-01: #3d70b2,
icon-02: #5a6872,
icon-03: #ffffff,
diff --git a/packages/themes/scss/_tokens.scss b/packages/themes/scss/_tokens.scss
index 12fc4a709ccf..4034dbec17c4 100644
--- a/packages/themes/scss/_tokens.scss
+++ b/packages/themes/scss/_tokens.scss
@@ -26,6 +26,10 @@ $interactive-03: map-get($carbon--theme, 'interactive-03') !default;
/// @access public
/// @group @carbon/themes
$interactive-04: map-get($carbon--theme, 'interactive-04') !default;
+/// @type Color
+/// @access public
+/// @group @carbon/themes
+$danger: map-get($carbon--theme, 'danger') !default;
/// Default page background
/// @type Color
/// @access public
@@ -76,6 +80,10 @@ $text-03: map-get($carbon--theme, 'text-03') !default;
/// @access public
/// @group @carbon/themes
$text-04: map-get($carbon--theme, 'text-04') !default;
+/// @type Color
+/// @access public
+/// @group @carbon/themes
+$text-05: map-get($carbon--theme, 'text-05') !default;
/// Primary icons
/// @type Color
/// @access public