@carbon/themes 10.10.3 → 10.11.0

package/es/index.js

@@ -125,6 +125,7 @@ var activeTertiary = blue80;
 var hoverUI = '#e5e5e5';
 var activeUI = gray30;
 var selectedUI = gray20;
+var selectedLightUI = gray20;
 var inverseHoverUI = '#4c4c4c';
 var hoverSelectedUI = '#cacaca';
 var hoverDanger = adjustLightness(danger, -8);
@@ -135,6 +136,7 @@ var disabled01 = gray10;
 var disabled02 = gray30;
 var disabled03 = gray50;
 var highlight = blue20;
+var decorative01 = gray20;
 var skeleton01 = '#e5e5e5';
 var skeleton02 = gray30; // Type
 
@@ -192,6 +194,7 @@ var white$1 = /*#__PURE__*/Object.freeze({
   hoverUI: hoverUI,
   activeUI: activeUI,
   selectedUI: selectedUI,
+  selectedLightUI: selectedLightUI,
   inverseHoverUI: inverseHoverUI,
   hoverSelectedUI: hoverSelectedUI,
   hoverDanger: hoverDanger,
@@ -202,6 +205,7 @@ var white$1 = /*#__PURE__*/Object.freeze({
   disabled02: disabled02,
   disabled03: disabled03,
   highlight: highlight,
+  decorative01: decorative01,
   skeleton01: skeleton01,
   skeleton02: skeleton02,
   brand01: brand01,
@@ -326,6 +330,7 @@ var activeTertiary$1 = blue80;
 var hoverUI$1 = '#e5e5e5';
 var activeUI$1 = gray30;
 var selectedUI$1 = gray20;
+var selectedLightUI$1 = gray20;
 var inverseHoverUI$1 = '#4c4c4c';
 var hoverSelectedUI$1 = '#cacaca';
 var hoverDanger$1 = adjustLightness(danger$1, -8);
@@ -336,6 +341,7 @@ var disabled01$1 = white;
 var disabled02$1 = gray30;
 var disabled03$1 = gray50;
 var highlight$1 = blue20;
+var decorative01$1 = gray20;
 var skeleton01$1 = '#e5e5e5';
 var skeleton02$1 = gray30;
 
@@ -393,6 +399,7 @@ var g10 = /*#__PURE__*/Object.freeze({
   hoverUI: hoverUI$1,
   activeUI: activeUI$1,
   selectedUI: selectedUI$1,
+  selectedLightUI: selectedLightUI$1,
   inverseHoverUI: inverseHoverUI$1,
   hoverSelectedUI: hoverSelectedUI$1,
   hoverDanger: hoverDanger$1,
@@ -403,6 +410,7 @@ var g10 = /*#__PURE__*/Object.freeze({
   disabled02: disabled02$1,
   disabled03: disabled03$1,
   highlight: highlight$1,
+  decorative01: decorative01$1,
   skeleton01: skeleton01$1,
   skeleton02: skeleton02$1,
   brand01: brand01$1,
@@ -527,6 +535,7 @@ var activeTertiary$2 = gray30;
 var hoverUI$2 = '#353535';
 var activeUI$2 = gray70;
 var selectedUI$2 = gray80;
+var selectedLightUI$2 = gray70;
 var inverseHoverUI$2 = '#e5e5e5';
 var hoverSelectedUI$2 = '#4c4c4c';
 var hoverDanger$2 = adjustLightness(danger$2, -8);
@@ -537,6 +546,7 @@ var disabled01$2 = gray90;
 var disabled02$2 = gray70;
 var disabled03$2 = gray50;
 var highlight$2 = blue80;
+var decorative01$2 = gray70;
 var skeleton01$2 = '#353535';
 var skeleton02$2 = gray80;
 
@@ -594,6 +604,7 @@ var g100 = /*#__PURE__*/Object.freeze({
   hoverUI: hoverUI$2,
   activeUI: activeUI$2,
   selectedUI: selectedUI$2,
+  selectedLightUI: selectedLightUI$2,
   inverseHoverUI: inverseHoverUI$2,
   hoverSelectedUI: hoverSelectedUI$2,
   hoverDanger: hoverDanger$2,
@@ -604,6 +615,7 @@ var g100 = /*#__PURE__*/Object.freeze({
   disabled02: disabled02$2,
   disabled03: disabled03$2,
   highlight: highlight$2,
+  decorative01: decorative01$2,
   skeleton01: skeleton01$2,
   skeleton02: skeleton02$2,
   brand01: brand01$2,
@@ -728,6 +740,7 @@ var activeTertiary$3 = gray30;
 var hoverUI$3 = '#4c4c4c';
 var activeUI$3 = gray60;
 var selectedUI$3 = gray70;
+var selectedLightUI$3 = gray60;
 var inverseHoverUI$3 = '#e5e5e5';
 var hoverSelectedUI$3 = '#656565';
 var hoverDanger$3 = adjustLightness(danger$3, -8);
@@ -738,6 +751,7 @@ var disabled01$3 = gray80;
 var disabled02$3 = gray60;
 var disabled03$3 = gray40;
 var highlight$3 = blue70;
+var decorative01$3 = gray60;
 var skeleton01$3 = '#353535';
 var skeleton02$3 = gray70;
 
@@ -795,6 +809,7 @@ var g90 = /*#__PURE__*/Object.freeze({
   hoverUI: hoverUI$3,
   activeUI: activeUI$3,
   selectedUI: selectedUI$3,
+  selectedLightUI: selectedLightUI$3,
   inverseHoverUI: inverseHoverUI$3,
   hoverSelectedUI: hoverSelectedUI$3,
   hoverDanger: hoverDanger$3,
@@ -805,6 +820,7 @@ var g90 = /*#__PURE__*/Object.freeze({
   disabled02: disabled02$3,
   disabled03: disabled03$3,
   highlight: highlight$3,
+  decorative01: decorative01$3,
   skeleton01: skeleton01$3,
   skeleton02: skeleton02$3,
   brand01: brand01$3,
@@ -929,6 +945,7 @@ var activeTertiary$4 = '#414f59';
 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';
@@ -939,6 +956,7 @@ var disabled01$4 = '#fafbfd';
 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)';
 
@@ -996,6 +1014,7 @@ var v9 = /*#__PURE__*/Object.freeze({
   hoverUI: hoverUI$4,
   activeUI: activeUI$4,
   selectedUI: selectedUI$4,
+  selectedLightUI: selectedLightUI$4,
   inverseHoverUI: inverseHoverUI$4,
   hoverSelectedUI: hoverSelectedUI$4,
   hoverDanger: hoverDanger$4,
@@ -1006,6 +1025,7 @@ var v9 = /*#__PURE__*/Object.freeze({
   disabled02: disabled02$4,
   disabled03: disabled03$4,
   highlight: highlight$4,
+  decorative01: decorative01$4,
   skeleton01: skeleton01$4,
   skeleton02: skeleton02$4,
   brand01: brand01$4,
@@ -1086,7 +1106,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', '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'];
 /**
@@ -1138,7 +1158,7 @@ var unstable__meta = {
     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']
 };
@@ -1157,4 +1177,4 @@ var themes = {
   v9: v9
 };
 
-export { g10, g90, g100, white$1 as white, v9, tokens, formatTokenName, unstable__meta, themes, interactive01, interactive02, interactive03, interactive04, uiBackground, ui01, ui02, ui03, ui04, ui05, text01, text02, text03, text04, text05, textError, icon01, icon02, icon03, link01, inverseLink, field01, field02, inverse01, inverse02, support01, support02, support03, support04, inverseSupport01, inverseSupport02, inverseSupport03, inverseSupport04, overlay01, danger, focus, inverseFocusUi, hoverPrimary, activePrimary, hoverPrimaryText, hoverSecondary, activeSecondary, hoverTertiary, activeTertiary, hoverUI, activeUI, selectedUI, inverseHoverUI, hoverSelectedUI, hoverDanger, activeDanger, hoverRow, visitedLink, disabled01, disabled02, disabled03, highlight, 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, danger, focus, inverseFocusUi, hoverPrimary, activePrimary, hoverPrimaryText, hoverSecondary, activeSecondary, hoverTertiary, activeTertiary, hoverUI, activeUI, selectedUI, selectedLightUI, inverseHoverUI, hoverSelectedUI, hoverDanger, activeDanger, hoverRow, visitedLink, disabled01, disabled02, disabled03, highlight, decorative01, skeleton01, skeleton02, brand01, brand02, brand03, active01, hoverField };

package/lib/index.js

@@ -129,6 +129,7 @@ var activeTertiary = colors.blue80;
 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);
@@ -139,6 +140,7 @@ var disabled01 = colors.gray10;
 var disabled02 = colors.gray30;
 var disabled03 = colors.gray50;
 var highlight = colors.blue20;
+var decorative01 = colors.gray20;
 var skeleton01 = '#e5e5e5';
 var skeleton02 = colors.gray30; // Type
 
@@ -196,6 +198,7 @@ var white = /*#__PURE__*/Object.freeze({
   hoverUI: hoverUI,
   activeUI: activeUI,
   selectedUI: selectedUI,
+  selectedLightUI: selectedLightUI,
   inverseHoverUI: inverseHoverUI,
   hoverSelectedUI: hoverSelectedUI,
   hoverDanger: hoverDanger,
@@ -206,6 +209,7 @@ var white = /*#__PURE__*/Object.freeze({
   disabled02: disabled02,
   disabled03: disabled03,
   highlight: highlight,
+  decorative01: decorative01,
   skeleton01: skeleton01,
   skeleton02: skeleton02,
   brand01: brand01,
@@ -330,6 +334,7 @@ var activeTertiary$1 = colors.blue80;
 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);
@@ -340,6 +345,7 @@ var disabled01$1 = colors.white;
 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;
 
@@ -397,6 +403,7 @@ var g10 = /*#__PURE__*/Object.freeze({
   hoverUI: hoverUI$1,
   activeUI: activeUI$1,
   selectedUI: selectedUI$1,
+  selectedLightUI: selectedLightUI$1,
   inverseHoverUI: inverseHoverUI$1,
   hoverSelectedUI: hoverSelectedUI$1,
   hoverDanger: hoverDanger$1,
@@ -407,6 +414,7 @@ var g10 = /*#__PURE__*/Object.freeze({
   disabled02: disabled02$1,
   disabled03: disabled03$1,
   highlight: highlight$1,
+  decorative01: decorative01$1,
   skeleton01: skeleton01$1,
   skeleton02: skeleton02$1,
   brand01: brand01$1,
@@ -531,6 +539,7 @@ var activeTertiary$2 = colors.gray30;
 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);
@@ -541,6 +550,7 @@ var disabled01$2 = colors.gray90;
 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;
 
@@ -598,6 +608,7 @@ var g100 = /*#__PURE__*/Object.freeze({
   hoverUI: hoverUI$2,
   activeUI: activeUI$2,
   selectedUI: selectedUI$2,
+  selectedLightUI: selectedLightUI$2,
   inverseHoverUI: inverseHoverUI$2,
   hoverSelectedUI: hoverSelectedUI$2,
   hoverDanger: hoverDanger$2,
@@ -608,6 +619,7 @@ var g100 = /*#__PURE__*/Object.freeze({
   disabled02: disabled02$2,
   disabled03: disabled03$2,
   highlight: highlight$2,
+  decorative01: decorative01$2,
   skeleton01: skeleton01$2,
   skeleton02: skeleton02$2,
   brand01: brand01$2,
@@ -732,6 +744,7 @@ var activeTertiary$3 = colors.gray30;
 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);
@@ -742,6 +755,7 @@ var disabled01$3 = colors.gray80;
 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;
 
@@ -799,6 +813,7 @@ var g90 = /*#__PURE__*/Object.freeze({
   hoverUI: hoverUI$3,
   activeUI: activeUI$3,
   selectedUI: selectedUI$3,
+  selectedLightUI: selectedLightUI$3,
   inverseHoverUI: inverseHoverUI$3,
   hoverSelectedUI: hoverSelectedUI$3,
   hoverDanger: hoverDanger$3,
@@ -809,6 +824,7 @@ var g90 = /*#__PURE__*/Object.freeze({
   disabled02: disabled02$3,
   disabled03: disabled03$3,
   highlight: highlight$3,
+  decorative01: decorative01$3,
   skeleton01: skeleton01$3,
   skeleton02: skeleton02$3,
   brand01: brand01$3,
@@ -933,6 +949,7 @@ var activeTertiary$4 = '#414f59';
 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';
@@ -943,6 +960,7 @@ var disabled01$4 = '#fafbfd';
 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)';
 
@@ -1000,6 +1018,7 @@ var v9 = /*#__PURE__*/Object.freeze({
   hoverUI: hoverUI$4,
   activeUI: activeUI$4,
   selectedUI: selectedUI$4,
+  selectedLightUI: selectedLightUI$4,
   inverseHoverUI: inverseHoverUI$4,
   hoverSelectedUI: hoverSelectedUI$4,
   hoverDanger: hoverDanger$4,
@@ -1010,6 +1029,7 @@ var v9 = /*#__PURE__*/Object.freeze({
   disabled02: disabled02$4,
   disabled03: disabled03$4,
   highlight: highlight$4,
+  decorative01: decorative01$4,
   skeleton01: skeleton01$4,
   skeleton02: skeleton02$4,
   brand01: brand01$4,
@@ -1090,7 +1110,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', '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'];
 /**
@@ -1142,7 +1162,7 @@ var unstable__meta = {
     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']
 };
@@ -1278,6 +1298,7 @@ exports.activeTertiary = activeTertiary;
 exports.hoverUI = hoverUI;
 exports.activeUI = activeUI;
 exports.selectedUI = selectedUI;
+exports.selectedLightUI = selectedLightUI;
 exports.inverseHoverUI = inverseHoverUI;
 exports.hoverSelectedUI = hoverSelectedUI;
 exports.hoverDanger = hoverDanger;
@@ -1288,6 +1309,7 @@ exports.disabled01 = disabled01;
 exports.disabled02 = disabled02;
 exports.disabled03 = disabled03;
 exports.highlight = highlight;
+exports.decorative01 = decorative01;
 exports.skeleton01 = skeleton01;
 exports.skeleton02 = skeleton02;
 exports.brand01 = brand01;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/themes",
   "description": "Themes for applying color in the Carbon Design System",
-  "version": "10.10.3",
+  "version": "10.11.0",
   "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.8.1",
-    "@carbon/layout": "^10.8.2",
-    "@carbon/type": "^10.9.3",
+    "@carbon/colors": "^10.9.0",
+    "@carbon/layout": "^10.9.0",
+    "@carbon/type": "^10.10.0",
     "color": "^3.1.2"
   },
   "devDependencies": {
     "@carbon/cli-reporter": "^10.3.0",
-    "@carbon/scss-generator": "^10.6.0",
-    "@carbon/test-utils": "^10.7.1",
+    "@carbon/scss-generator": "^10.7.0",
+    "@carbon/test-utils": "^10.8.0",
     "change-case": "^4.1.1",
     "core-js": "^3.0.1",
     "fs-extra": "^8.1.0",
@@ -40,5 +40,5 @@
     "node-sass": "^4.13.1",
     "rimraf": "^3.0.0"
   },
-  "gitHead": "10963409141c46b204e83fd5ba7672ce49d66fe7"
+  "gitHead": "6105a7b4c7f182f429109acbb1e6e01806de053f"
 }

package/scss/_mixins.scss

@@ -34,6 +34,29 @@ $custom-property-prefix: 'cds' !default;
   @return map-get($theme-a, $token) != map-get($theme-b, $token);
 }
 
+/// @access private
+/// @param {Map} $tokens - Map of component tokens
+/// @param {String} $theme - Theme identifier
+/// @example @include emit-component-tokens($component-tokens);
+/// @group @carbon/themes
+@mixin emit-component-tokens($tokens) {
+  @if type-of($tokens) == 'map' {
+    @each $key, $options in $tokens {
+      @each $option in $options {
+        $theme: map-get($option, 'theme');
+
+        @if ($theme == $carbon--theme) {
+          $value: map-get($option, 'value');
+
+          --#{$custom-property-prefix}-#{$key}: #{$value};
+        }
+      }
+    }
+  } @else {
+    @error 'Unable to find map';
+  }
+}
+
 // We import mixins last so that these methods are made available to the
 // carbon--theme mixin
 @import './generated/mixins';