@carbon/themes 10.20.0-rc.0 → 10.22.1

package/lib/index.js

@@ -115,7 +115,8 @@ var inverseSupport02 = colors.green40;
 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;
@@ -132,7 +133,7 @@ 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;
@@ -151,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,
@@ -187,7 +189,8 @@ var white = /*#__PURE__*/Object.freeze({
   inverseSupport03: inverseSupport03,
   inverseSupport04: inverseSupport04,
   overlay01: overlay01,
-  danger: danger,
+  danger01: danger01,
+  danger02: danger02,
   focus: focus,
   inverseFocusUi: inverseFocusUi,
   hoverPrimary: hoverPrimary,
@@ -221,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,
@@ -324,7 +328,8 @@ var inverseSupport02$1 = colors.green40;
 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;
@@ -341,14 +346,14 @@ 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;
 var disabled01$1 = colors.white;
 var disabled02$1 = colors.gray30;
 var disabled03$1 = colors.gray50;
-var highlight$1 = colors.blue20;
+var highlight$1 = colors.blue10;
 var decorative01$1 = colors.gray20;
 var hoverLightUI$1 = '#e5e5e5';
 var buttonSeparator$1 = '#e0e0e0';
@@ -360,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,
@@ -396,7 +402,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,
@@ -430,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,
@@ -533,7 +541,8 @@ var inverseSupport02$2 = colors.green50;
 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;
@@ -550,7 +559,7 @@ 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;
@@ -569,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,
@@ -605,7 +615,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,
@@ -639,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,
@@ -742,7 +754,8 @@ var inverseSupport02$3 = colors.green50;
 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;
@@ -759,7 +772,7 @@ 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;
@@ -778,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,
@@ -814,7 +828,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,
@@ -848,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,
@@ -951,7 +967,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 = colors.red60; // Interaction states
+var danger01$4 = colors.red60;
+var danger02$4 = colors.red60; // Interaction states
 
 var focus$4 = '#3d70b2';
 var inverseFocusUi$4 = '#3d70b2';
@@ -987,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,
@@ -1023,7 +1041,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,
@@ -1057,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,
@@ -1129,9 +1149,9 @@ var v9 = /*#__PURE__*/Object.freeze({
 // 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
+'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.
@@ -1179,12 +1199,12 @@ var tokens = {
 var unstable__meta = {
   colors: [{
     type: 'core',
-    tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', 'danger', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'link01', 'icon01', 'icon02', 'icon03', 'field01', 'field02', 'inverse01', 'inverse02', 'inverseLink', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01']
+    tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', 'danger', 'danger01', 'danger02', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'text05', 'textError', 'link01', 'icon01', 'icon02', 'icon03', 'field01', 'field02', 'inverse01', 'inverse02', 'inverseLink', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01']
   }, {
     type: 'interactive',
     tokens: ['focus', 'inverseFocusUi', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeDanger', 'selectedUI', 'selectedLightUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField', 'decorative01', 'hoverLightUI', 'buttonSeparator']
   }],
-  deprecated: ['brand01', 'brand02', 'brand03', 'active01']
+  deprecated: ['brand01', 'brand02', 'brand03', 'active01', 'danger']
 };
 
 /**
@@ -1305,7 +1325,8 @@ exports.inverseSupport02 = inverseSupport02;
 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;
@@ -1339,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.20.0-rc.0",
+  "version": "10.22.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,15 +24,15 @@
     "build": "yarn clean && bundler bundle src/index.js --name CarbonThemes && node tasks/build.js && bundler check \"scss/*.scss\" && bundler sassdoc \"scss/**/*.scss\""
   },
   "dependencies": {
-    "@carbon/colors": "^10.14.0-rc.0",
-    "@carbon/layout": "^10.13.0",
-    "@carbon/type": "^10.16.0",
+    "@carbon/colors": "^10.15.0",
+    "@carbon/layout": "^10.14.0",
+    "@carbon/type": "^10.17.0",
     "color": "^3.1.2"
   },
   "devDependencies": {
     "@carbon/cli-reporter": "^10.3.0",
     "@carbon/scss-generator": "^10.10.0",
-    "@carbon/test-utils": "^10.11.0",
+    "@carbon/test-utils": "^10.12.0",
     "change-case": "^4.1.1",
     "core-js": "^3.6.5",
     "fs-extra": "^8.1.0",
@@ -40,5 +40,5 @@
     "node-sass": "^4.13.1",
     "rimraf": "^3.0.0"
   },
-  "gitHead": "753e8870da07b8425817ce9859b82f680031ee8f"
+  "gitHead": "9159353b34ef5e1944536c1954ac6322b2ea5716"
 }

package/scss/generated/_mixins.scss

@@ -72,7 +72,8 @@
   $inverse-support-03: map-get($theme, 'inverse-support-03') !global;
   $inverse-support-04: map-get($theme, 'inverse-support-04') !global;
   $overlay-01: map-get($theme, 'overlay-01') !global;
-  $danger: map-get($theme, 'danger') !global;
+  $danger-01: map-get($theme, 'danger-01') !global;
+  $danger-02: map-get($theme, 'danger-02') !global;
   $focus: map-get($theme, 'focus') !global;
   $inverse-focus-ui: map-get($theme, 'inverse-focus-ui') !global;
   $hover-primary: map-get($theme, 'hover-primary') !global;
@@ -106,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;
@@ -307,9 +309,13 @@
       --#{$custom-property-prefix}-overlay-01,
       map-get($theme, 'overlay-01')
     ) !global;
-    $danger: var(
-      --#{$custom-property-prefix}-danger,
-      map-get($theme, 'danger')
+    $danger-01: var(
+      --#{$custom-property-prefix}-danger-01,
+      map-get($theme, 'danger-01')
+    ) !global;
+    $danger-02: var(
+      --#{$custom-property-prefix}-danger-02,
+      map-get($theme, 'danger-02')
     ) !global;
     $focus: var(
       --#{$custom-property-prefix}-focus,
@@ -443,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')
@@ -838,8 +848,14 @@
       @include custom-property('overlay-01', map-get($theme, 'overlay-01'));
     }
 
-    @if should-emit($theme, $parent-carbon-theme, 'danger', $emit-difference) {
-      @include custom-property('danger', map-get($theme, 'danger'));
+    @if should-emit($theme, $parent-carbon-theme, 'danger-01', $emit-difference)
+    {
+      @include custom-property('danger-01', map-get($theme, 'danger-01'));
+    }
+
+    @if should-emit($theme, $parent-carbon-theme, 'danger-02', $emit-difference)
+    {
+      @include custom-property('danger-02', map-get($theme, 'danger-02'));
     }
 
     @if should-emit($theme, $parent-carbon-theme, 'focus', $emit-difference) {
@@ -1171,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

@@ -41,7 +41,8 @@ $carbon--theme--white: (
   inverse-support-03: #f1c21b,
   inverse-support-04: #4589ff,
   overlay-01: rgba(22, 22, 22, 0.5),
-  danger: #da1e28,
+  danger-01: #da1e28,
+  danger-02: #da1e28,
   focus: #0f62fe,
   inverse-focus-ui: #ffffff,
   hover-primary: #0353e9,
@@ -75,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,
@@ -505,6 +507,7 @@ $carbon--theme--g10: map-merge(
     field-01: #ffffff,
     field-02: #f4f4f4,
     disabled-01: #ffffff,
+    highlight: #edf5ff,
   )
 ) !default;
 
@@ -543,6 +546,7 @@ $carbon--theme--g90: map-merge(
     inverse-support-02: #24a148,
     inverse-support-04: #0f62fe,
     overlay-01: rgba(22, 22, 22, 0.7),
+    danger-02: #ff8389,
     focus: #ffffff,
     inverse-focus-ui: #0f62fe,
     hover-primary-text: #a6c8ff,
@@ -610,6 +614,7 @@ $carbon--theme--g100: map-merge(
     inverse-support-02: #24a148,
     inverse-support-04: #0f62fe,
     overlay-01: rgba(22, 22, 22, 0.7),
+    danger-02: #fa4d56,
     focus: #ffffff,
     inverse-focus-ui: #0f62fe,
     hover-primary-text: #a6c8ff,
@@ -922,11 +927,17 @@ $carbon--theme: (
       $overlay-01,
       map-get($carbon--theme--white, 'overlay-01')
     ),
-  danger:
+  danger-01:
     if(
-      global-variable-exists('danger'),
-      $danger,
-      map-get($carbon--theme--white, 'danger')
+      global-variable-exists('danger-01'),
+      $danger-01,
+      map-get($carbon--theme--white, 'danger-01')
+    ),
+  danger-02:
+    if(
+      global-variable-exists('danger-02'),
+      $danger-02,
+      map-get($carbon--theme--white, 'danger-02')
     ),
   focus:
     if(
@@ -1126,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

@@ -380,10 +380,20 @@ $overlay-01: if(
 /// @type {undefined}
 /// @access public
 /// @group @carbon/themes
-$danger: if(
+$danger-01: if(
   global-variable-exists('carbon--theme') and
-    map-has-key($carbon--theme, 'danger'),
-  map-get($carbon--theme, 'danger'),
+    map-has-key($carbon--theme, 'danger-01'),
+  map-get($carbon--theme, 'danger-01'),
+  #da1e28
+) !default;
+
+/// @type {undefined}
+/// @access public
+/// @group @carbon/themes
+$danger-02: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'danger-02'),
+  map-get($carbon--theme, 'danger-02'),
   #da1e28
 ) !default;
 
@@ -749,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

@@ -8,7 +8,7 @@ import { adjustLightness } from './tools';
 
 import {
   // Blue
-  blue20,
+  blue10,
   blue40,
   blue60,
   blue70,
@@ -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;
@@ -113,7 +114,7 @@ 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';
@@ -124,7 +125,7 @@ export const disabled01 = white;
 export const disabled02 = gray30;
 export const disabled03 = gray50;
 
-export const highlight = blue20;
+export const highlight = blue10;
 
 export const decorative01 = gray20;
 
@@ -212,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

@@ -87,7 +87,8 @@ export const inverseSupport04 = blue60;
 
 export const overlay01 = rgba(gray100, 0.7);
 
-export const danger = red60;
+export const danger01 = red60;
+export const danger02 = red50;
 
 // Interaction states
 export const focus = white;
@@ -112,7 +113,7 @@ export const inverseHoverUI = '#e5e5e5';
 
 export const hoverSelectedUI = '#4c4c4c';
 
-export const hoverDanger = adjustLightness(danger, -8);
+export const hoverDanger = adjustLightness(danger01, -8);
 export const activeDanger = red80;
 
 export const hoverRow = '#353535';
@@ -211,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

@@ -89,7 +89,8 @@ export const inverseSupport04 = blue60;
 
 export const overlay01 = rgba(gray100, 0.7);
 
-export const danger = red60;
+export const danger01 = red60;
+export const danger02 = red40;
 
 // Interaction states
 export const focus = white;
@@ -114,7 +115,7 @@ export const inverseHoverUI = '#e5e5e5';
 
 export const hoverSelectedUI = '#656565';
 
-export const hoverDanger = adjustLightness(danger, -8);
+export const hoverDanger = adjustLightness(danger01, -8);
 export const activeDanger = red80;
 
 export const hoverRow = '#4c4c4c';
@@ -213,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

@@ -58,7 +58,8 @@ const colors = [
 
   'overlay01',
 
-  'danger',
+  'danger01',
+  'danger02',
 
   // Interactive states
   'focus',
@@ -110,6 +111,7 @@ const colors = [
   'brand03',
   'active01',
   'hoverField',
+  'danger',
 ];
 
 const numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
@@ -172,6 +174,8 @@ export const unstable__meta = {
         'brand02',
         'brand03',
         'danger',
+        'danger01',
+        'danger02',
         'ui01',
         'ui02',
         'ui03',
@@ -239,5 +243,5 @@ export const unstable__meta = {
       ],
     },
   ],
-  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';
@@ -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;
@@ -113,7 +114,7 @@ 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';
@@ -215,3 +216,4 @@ export const brand02 = interactive02;
 export const brand03 = interactive03;
 export const active01 = activeUI;
 export const hoverField = hoverUI;
+export const danger = danger01;