@carbon/themes 10.10.3 → 10.11.0

package/scss/generated/_themes.scss

@@ -54,6 +54,7 @@ $carbon--theme--white: (
   hover-ui: #e5e5e5,
   active-ui: #c6c6c6,
   selected-ui: #e0e0e0,
+  selected-light-ui: #e0e0e0,
   inverse-hover-ui: #4c4c4c,
   hover-selected-ui: #cacaca,
   hover-danger: #b81921,
@@ -64,6 +65,7 @@ $carbon--theme--white: (
   disabled-02: #c6c6c6,
   disabled-03: #8d8d8d,
   highlight: #d0e2ff,
+  decorative-01: #e0e0e0,
   skeleton-01: #e5e5e5,
   skeleton-02: #c6c6c6,
   brand-01: #0f62fe,
@@ -550,6 +552,7 @@ $carbon--theme--g90: map-merge(
     hover-ui: #4c4c4c,
     active-ui: #6f6f6f,
     selected-ui: #525252,
+    selected-light-ui: #6f6f6f,
     inverse-hover-ui: #e5e5e5,
     hover-selected-ui: #656565,
     hover-row: #4c4c4c,
@@ -558,6 +561,7 @@ $carbon--theme--g90: map-merge(
     disabled-02: #6f6f6f,
     disabled-03: #a8a8a8,
     highlight: #0043ce,
+    decorative-01: #6f6f6f,
     skeleton-01: #353535,
     skeleton-02: #525252,
     brand-02: #6f6f6f,
@@ -613,6 +617,7 @@ $carbon--theme--g100: map-merge(
     hover-ui: #353535,
     active-ui: #525252,
     selected-ui: #393939,
+    selected-light-ui: #525252,
     inverse-hover-ui: #e5e5e5,
     hover-selected-ui: #4c4c4c,
     hover-row: #353535,
@@ -620,6 +625,7 @@ $carbon--theme--g100: map-merge(
     disabled-01: #262626,
     disabled-02: #525252,
     highlight: #002d9c,
+    decorative-01: #525252,
     skeleton-01: #353535,
     skeleton-02: #393939,
     brand-02: #6f6f6f,
@@ -679,6 +685,7 @@ $carbon--theme--v9: map-merge(
     hover-ui: #eef4fc,
     active-ui: #dfeafa,
     selected-ui: #eef4fc,
+    selected-light-ui: #eef4fc,
     hover-selected-ui: #dfeafa,
     hover-danger: #c70014,
     active-danger: #ad1625,
@@ -688,6 +695,7 @@ $carbon--theme--v9: map-merge(
     disabled-02: #dfe3e6,
     disabled-03: #cdd1d4,
     highlight: #f4f7fb,
+    decorative-01: #eef4fc,
     skeleton-01: rgba(61, 112, 178, 0.1),
     skeleton-02: rgba(61, 112, 178, 0.1),
     brand-01: #3d70b2,
@@ -986,6 +994,12 @@ $carbon--theme: (
       $selected-ui,
       map-get($carbon--theme--white, 'selected-ui')
     ),
+  selected-light-ui:
+    if(
+      global-variable-exists('selected-light-ui'),
+      $selected-light-ui,
+      map-get($carbon--theme--white, 'selected-light-ui')
+    ),
   hover-selected-ui:
     if(
       global-variable-exists('hover-selected-ui'),
@@ -1046,6 +1060,12 @@ $carbon--theme: (
       $highlight,
       map-get($carbon--theme--white, 'highlight')
     ),
+  decorative-01:
+    if(
+      global-variable-exists('decorative-01'),
+      $decorative-01,
+      map-get($carbon--theme--white, 'decorative-01')
+    ),
   skeleton-01:
     if(
       global-variable-exists('skeleton-01'),

package/scss/generated/_tokens.scss

@@ -518,6 +518,16 @@ $selected-ui: if(
   #e0e0e0
 ) !default;
 
+/// @type {undefined}
+/// @access public
+/// @group @carbon/themes
+$selected-light-ui: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'selected-light-ui'),
+  map-get($carbon--theme, 'selected-light-ui'),
+  #e0e0e0
+) !default;
+
 /// Data table selected row hover
 /// @type {undefined}
 /// @access public
@@ -627,6 +637,16 @@ $highlight: if(
   #d0e2ff
 ) !default;
 
+/// @type {undefined}
+/// @access public
+/// @group @carbon/themes
+$decorative-01: if(
+  global-variable-exists('carbon--theme') and
+    map-has-key($carbon--theme, 'decorative-01'),
+  map-get($carbon--theme, 'decorative-01'),
+  #e0e0e0
+) !default;
+
 /// Skeleton state of graphics
 /// @type {undefined}
 /// @access public

package/src/g10.js

@@ -108,6 +108,7 @@ export const activeTertiary = blue80;
 export const hoverUI = '#e5e5e5';
 export const activeUI = gray30;
 export const selectedUI = gray20;
+export const selectedLightUI = gray20;
 export const inverseHoverUI = '#4c4c4c';
 
 export const hoverSelectedUI = '#cacaca';
@@ -125,6 +126,8 @@ export const disabled03 = gray50;
 
 export const highlight = blue20;
 
+export const decorative01 = gray20;
+
 export const skeleton01 = '#e5e5e5';
 export const skeleton02 = gray30;
 

package/src/g100.js

@@ -107,6 +107,7 @@ export const activeTertiary = gray30;
 export const hoverUI = '#353535';
 export const activeUI = gray70;
 export const selectedUI = gray80;
+export const selectedLightUI = gray70;
 export const inverseHoverUI = '#e5e5e5';
 
 export const hoverSelectedUI = '#4c4c4c';
@@ -124,6 +125,8 @@ export const disabled03 = gray50;
 
 export const highlight = blue80;
 
+export const decorative01 = gray70;
+
 export const skeleton01 = '#353535';
 export const skeleton02 = gray80;
 

package/src/g90.js

@@ -109,6 +109,7 @@ export const activeTertiary = gray30;
 export const hoverUI = '#4c4c4c';
 export const activeUI = gray60;
 export const selectedUI = gray70;
+export const selectedLightUI = gray60;
 export const inverseHoverUI = '#e5e5e5';
 
 export const hoverSelectedUI = '#656565';
@@ -126,6 +127,8 @@ export const disabled03 = gray40;
 
 export const highlight = blue70;
 
+export const decorative01 = gray60;
+
 export const skeleton01 = '#353535';
 export const skeleton02 = gray70;
 

package/src/tokens.js

@@ -78,6 +78,7 @@ const colors = [
   'activeUI',
 
   'selectedUI',
+  'selectedLightUI',
   'hoverSelectedUI',
   'inverseHoverUI',
 
@@ -94,6 +95,8 @@ const colors = [
 
   'highlight',
 
+  'decorative01',
+
   'skeleton01',
   'skeleton02',
 
@@ -215,6 +218,7 @@ export const unstable__meta = {
         'activeUI',
         'activeDanger',
         'selectedUI',
+        'selectedLightUI',
         'highlight',
         'skeleton01',
         'skeleton02',
@@ -225,6 +229,7 @@ export const unstable__meta = {
         'inverseHoverUI',
         'active01',
         'hoverField',
+        'decorative01',
       ],
     },
   ],

package/src/v9.js

@@ -72,6 +72,7 @@ export const activeTertiary = '#414f59';
 export const hoverUI = '#EEF4FC';
 export const activeUI = '#DFEAFA';
 export const selectedUI = '#EEF4FC';
+export const selectedLightUI = '#EEF4FC';
 export const inverseHoverUI = '#4c4c4c';
 
 export const hoverSelectedUI = '#DFEAFA';
@@ -89,6 +90,8 @@ export const disabled03 = '#cdd1d4';
 
 export const highlight = '#f4f7fb';
 
+export const decorative01 = '#EEF4FC';
+
 export const skeleton01 = 'rgba(61, 112, 178, .1)';
 export const skeleton02 = 'rgba(61, 112, 178, .1)';
 

package/src/white.js

@@ -108,6 +108,7 @@ export const activeTertiary = blue80;
 export const hoverUI = '#e5e5e5';
 export const activeUI = gray30;
 export const selectedUI = gray20;
+export const selectedLightUI = gray20;
 export const inverseHoverUI = '#4c4c4c';
 
 export const hoverSelectedUI = '#cacaca';
@@ -125,6 +126,8 @@ export const disabled03 = gray50;
 
 export const highlight = blue20;
 
+export const decorative01 = gray20;
+
 export const skeleton01 = '#e5e5e5';
 export const skeleton02 = gray30;
 

package/umd/index.js

@@ -126,6 +126,7 @@
   var hoverUI = '#e5e5e5';
   var activeUI = colors.gray30;
   var selectedUI = colors.gray20;
+  var selectedLightUI = colors.gray20;
   var inverseHoverUI = '#4c4c4c';
   var hoverSelectedUI = '#cacaca';
   var hoverDanger = adjustLightness(danger, -8);
@@ -136,6 +137,7 @@
   var disabled02 = colors.gray30;
   var disabled03 = colors.gray50;
   var highlight = colors.blue20;
+  var decorative01 = colors.gray20;
   var skeleton01 = '#e5e5e5';
   var skeleton02 = colors.gray30; // Type
 
@@ -193,6 +195,7 @@
     hoverUI: hoverUI,
     activeUI: activeUI,
     selectedUI: selectedUI,
+    selectedLightUI: selectedLightUI,
     inverseHoverUI: inverseHoverUI,
     hoverSelectedUI: hoverSelectedUI,
     hoverDanger: hoverDanger,
@@ -203,6 +206,7 @@
     disabled02: disabled02,
     disabled03: disabled03,
     highlight: highlight,
+    decorative01: decorative01,
     skeleton01: skeleton01,
     skeleton02: skeleton02,
     brand01: brand01,
@@ -327,6 +331,7 @@
   var hoverUI$1 = '#e5e5e5';
   var activeUI$1 = colors.gray30;
   var selectedUI$1 = colors.gray20;
+  var selectedLightUI$1 = colors.gray20;
   var inverseHoverUI$1 = '#4c4c4c';
   var hoverSelectedUI$1 = '#cacaca';
   var hoverDanger$1 = adjustLightness(danger$1, -8);
@@ -337,6 +342,7 @@
   var disabled02$1 = colors.gray30;
   var disabled03$1 = colors.gray50;
   var highlight$1 = colors.blue20;
+  var decorative01$1 = colors.gray20;
   var skeleton01$1 = '#e5e5e5';
   var skeleton02$1 = colors.gray30;
 
@@ -394,6 +400,7 @@
     hoverUI: hoverUI$1,
     activeUI: activeUI$1,
     selectedUI: selectedUI$1,
+    selectedLightUI: selectedLightUI$1,
     inverseHoverUI: inverseHoverUI$1,
     hoverSelectedUI: hoverSelectedUI$1,
     hoverDanger: hoverDanger$1,
@@ -404,6 +411,7 @@
     disabled02: disabled02$1,
     disabled03: disabled03$1,
     highlight: highlight$1,
+    decorative01: decorative01$1,
     skeleton01: skeleton01$1,
     skeleton02: skeleton02$1,
     brand01: brand01$1,
@@ -528,6 +536,7 @@
   var hoverUI$2 = '#353535';
   var activeUI$2 = colors.gray70;
   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);
@@ -538,6 +547,7 @@
   var disabled02$2 = colors.gray70;
   var disabled03$2 = colors.gray50;
   var highlight$2 = colors.blue80;
+  var decorative01$2 = colors.gray70;
   var skeleton01$2 = '#353535';
   var skeleton02$2 = colors.gray80;
 
@@ -595,6 +605,7 @@
     hoverUI: hoverUI$2,
     activeUI: activeUI$2,
     selectedUI: selectedUI$2,
+    selectedLightUI: selectedLightUI$2,
     inverseHoverUI: inverseHoverUI$2,
     hoverSelectedUI: hoverSelectedUI$2,
     hoverDanger: hoverDanger$2,
@@ -605,6 +616,7 @@
     disabled02: disabled02$2,
     disabled03: disabled03$2,
     highlight: highlight$2,
+    decorative01: decorative01$2,
     skeleton01: skeleton01$2,
     skeleton02: skeleton02$2,
     brand01: brand01$2,
@@ -729,6 +741,7 @@
   var hoverUI$3 = '#4c4c4c';
   var activeUI$3 = colors.gray60;
   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);
@@ -739,6 +752,7 @@
   var disabled02$3 = colors.gray60;
   var disabled03$3 = colors.gray40;
   var highlight$3 = colors.blue70;
+  var decorative01$3 = colors.gray60;
   var skeleton01$3 = '#353535';
   var skeleton02$3 = colors.gray70;
 
@@ -796,6 +810,7 @@
     hoverUI: hoverUI$3,
     activeUI: activeUI$3,
     selectedUI: selectedUI$3,
+    selectedLightUI: selectedLightUI$3,
     inverseHoverUI: inverseHoverUI$3,
     hoverSelectedUI: hoverSelectedUI$3,
     hoverDanger: hoverDanger$3,
@@ -806,6 +821,7 @@
     disabled02: disabled02$3,
     disabled03: disabled03$3,
     highlight: highlight$3,
+    decorative01: decorative01$3,
     skeleton01: skeleton01$3,
     skeleton02: skeleton02$3,
     brand01: brand01$3,
@@ -930,6 +946,7 @@
   var hoverUI$4 = '#EEF4FC';
   var activeUI$4 = '#DFEAFA';
   var selectedUI$4 = '#EEF4FC';
+  var selectedLightUI$4 = '#EEF4FC';
   var inverseHoverUI$4 = '#4c4c4c';
   var hoverSelectedUI$4 = '#DFEAFA';
   var hoverDanger$4 = '#c70014';
@@ -940,6 +957,7 @@
   var disabled02$4 = '#dfe3e6';
   var disabled03$4 = '#cdd1d4';
   var highlight$4 = '#f4f7fb';
+  var decorative01$4 = '#EEF4FC';
   var skeleton01$4 = 'rgba(61, 112, 178, .1)';
   var skeleton02$4 = 'rgba(61, 112, 178, .1)';
 
@@ -997,6 +1015,7 @@
     hoverUI: hoverUI$4,
     activeUI: activeUI$4,
     selectedUI: selectedUI$4,
+    selectedLightUI: selectedLightUI$4,
     inverseHoverUI: inverseHoverUI$4,
     hoverSelectedUI: hoverSelectedUI$4,
     hoverDanger: hoverDanger$4,
@@ -1007,6 +1026,7 @@
     disabled02: disabled02$4,
     disabled03: disabled03$4,
     highlight: highlight$4,
+    decorative01: decorative01$4,
     skeleton01: skeleton01$4,
     skeleton02: skeleton02$4,
     brand01: brand01$4,
@@ -1087,7 +1107,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', 'danger', // Interactive states
-  'focus', 'inverseFocusUi', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'activeUI', 'selectedUI', 'hoverSelectedUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'skeleton01', 'skeleton02', // Deprecated
+  'focus', 'inverseFocusUi', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'activeUI', 'selectedUI', 'selectedLightUI', 'hoverSelectedUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'decorative01', 'skeleton01', 'skeleton02', // Deprecated
   'brand01', 'brand02', 'brand03', 'active01', 'hoverField'];
   var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
   /**
@@ -1139,7 +1159,7 @@
       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']
     }, {
       type: 'interactive',
-      tokens: ['focus', 'inverseFocusUi', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeDanger', 'selectedUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField']
+      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']
     }],
     deprecated: ['brand01', 'brand02', 'brand03', 'active01']
   };
@@ -1275,6 +1295,7 @@
   exports.hoverUI = hoverUI;
   exports.activeUI = activeUI;
   exports.selectedUI = selectedUI;
+  exports.selectedLightUI = selectedLightUI;
   exports.inverseHoverUI = inverseHoverUI;
   exports.hoverSelectedUI = hoverSelectedUI;
   exports.hoverDanger = hoverDanger;
@@ -1285,6 +1306,7 @@
   exports.disabled02 = disabled02;
   exports.disabled03 = disabled03;
   exports.highlight = highlight;
+  exports.decorative01 = decorative01;
   exports.skeleton01 = skeleton01;
   exports.skeleton02 = skeleton02;
   exports.brand01 = brand01;