@carbon/themes 10.4.0-rc.3 → 10.5.0

package/src/tokens.js

@@ -33,6 +33,8 @@ const colors = [
 
   'link01',
 
+  'inverseLink',
+
   'field01',
   'field02',
 
@@ -69,6 +71,7 @@ const colors = [
 
   'selectedUI',
   'hoverSelectedUI',
+  'inverseHoverUI',
 
   'hoverDanger',
   'activeDanger',
@@ -137,3 +140,79 @@ export function formatTokenName(token) {
 export const tokens = {
   colors,
 };
+
+export const unstable__meta = {
+  colors: [
+    {
+      type: 'core',
+      tokens: [
+        'uiBackground',
+        'interactive01',
+        'interactive02',
+        'interactive03',
+        'interactive04',
+        'brand01',
+        'brand02',
+        'brand03',
+        'ui01',
+        'ui02',
+        'ui03',
+        'ui04',
+        'ui05',
+        'text01',
+        'text02',
+        'text03',
+        'text04',
+        'link01',
+        'icon01',
+        'icon02',
+        'icon03',
+        'field01',
+        'field02',
+        'inverse01',
+        'inverse02',
+        'inverseLink',
+        'support01',
+        'support02',
+        'support03',
+        'support04',
+        'inverseSupport01',
+        'inverseSupport02',
+        'inverseSupport03',
+        'inverseSupport04',
+        'overlay01',
+      ],
+    },
+    {
+      type: 'interactive',
+      tokens: [
+        'focus',
+        'hoverPrimary',
+        'hoverPrimaryText',
+        'hoverSecondary',
+        'hoverTertiary',
+        'hoverUI',
+        'hoverSelectedUI',
+        'hoverDanger',
+        'hoverRow',
+        'activePrimary',
+        'activeSecondary',
+        'activeTertiary',
+        'activeUI',
+        'activeDanger',
+        'selectedUI',
+        'highlight',
+        'skeleton01',
+        'skeleton02',
+        'visitedLink',
+        'disabled01',
+        'disabled02',
+        'disabled03',
+        'inverseHoverUI',
+        'active01',
+        'hoverField',
+      ],
+    },
+  ],
+  deprecated: ['brand01', 'brand02', 'brand03', 'active01'],
+};

package/src/v9.js

@@ -0,0 +1,96 @@
+/**
+ * Copyright IBM Corp. 2018, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { white } from '@carbon/colors';
+
+export const interactive01 = '#3d70b2';
+export const interactive02 = '#5a6872';
+export const interactive03 = '#5a6872';
+export const interactive04 = '#3d70b2';
+
+export const uiBackground = '#f4f7fb';
+
+export const ui01 = white;
+export const ui02 = '#f4f7fb';
+export const ui03 = '#dfe3e6';
+export const ui04 = '#8897a2';
+export const ui05 = '#5a6872';
+
+export const text01 = '#152935';
+export const text02 = '#5a6872';
+export const text03 = '#cdd1d4';
+export const text04 = white;
+
+export const icon01 = '#3d70b2';
+export const icon02 = '#5a6872';
+export const icon03 = white;
+
+export const link01 = '#3d70b2';
+
+export const inverseLink = '#5596e6';
+
+export const field01 = white;
+export const field02 = '#f4f7fb';
+
+export const inverse01 = white;
+export const inverse02 = '#272d33';
+
+export const support01 = '#e0182d';
+export const support02 = '#5aa700';
+export const support03 = '#efc100';
+export const support04 = '#5aaafa';
+
+export const inverseSupport01 = '#ff5050';
+export const inverseSupport02 = '#8cd211';
+export const inverseSupport03 = '#FDD600';
+export const inverseSupport04 = '#5aaafa';
+
+export const overlay01 = 'rgba(223, 227, 230, 0.5)';
+
+// Interaction states
+export const focus = '#3d70b2';
+
+export const hoverPrimary = '#30588c';
+export const activePrimary = '#30588c';
+
+export const hoverPrimaryText = '#294c86';
+
+export const hoverSecondary = '#4d5b65';
+export const activeSecondary = '#414f59';
+
+export const hoverTertiary = '#5a6872';
+export const activeTertiary = '#414f59';
+
+export const hoverUI = '#EEF4FC';
+export const activeUI = '#DFEAFA';
+export const selectedUI = '#EEF4FC';
+export const inverseHoverUI = '#4c4c4c';
+
+export const hoverSelectedUI = '#DFEAFA';
+
+export const hoverDanger = '#c70014';
+export const activeDanger = '#AD1625';
+
+export const hoverRow = '#eef4fc';
+
+export const visitedLink = '#294c86';
+
+export const disabled01 = '#fafbfd';
+export const disabled02 = '#dfe3e6';
+export const disabled03 = '#cdd1d4';
+
+export const highlight = '#f4f7fb';
+
+export const skeleton01 = 'rgba(61, 112, 178, .1)';
+export const skeleton02 = 'rgba(61, 112, 178, .1)';
+
+// Deprecated ☠️
+export const brand01 = interactive01;
+export const brand02 = interactive02;
+export const brand03 = interactive03;
+export const active01 = activeUI;
+export const hoverField = hoverUI;

package/src/white.js

@@ -8,6 +8,7 @@
 import {
   // Blue
   blue20,
+  blue40,
   blue60,
   blue70,
   blue80,
@@ -40,7 +41,7 @@ import {
 } from '@carbon/colors';
 
 export const interactive01 = blue60;
-export const interactive02 = gray100;
+export const interactive02 = gray80;
 export const interactive03 = blue60;
 export const interactive04 = blue60;
 
@@ -63,6 +64,8 @@ export const icon03 = white;
 
 export const link01 = blue60;
 
+export const inverseLink = blue40;
+
 export const field01 = gray10;
 export const field02 = white;
 
@@ -98,6 +101,7 @@ export const activeTertiary = blue80;
 export const hoverUI = '#e5e5e5';
 export const activeUI = gray30;
 export const selectedUI = gray20;
+export const inverseHoverUI = '#4c4c4c';
 
 export const hoverSelectedUI = '#cacaca';
 

package/umd/index.js

@@ -11,7 +11,7 @@
    * LICENSE file in the root directory of this source tree.
    */
   var interactive01 = colors.blue60;
-  var interactive02 = colors.gray100;
+  var interactive02 = colors.gray80;
   var interactive03 = colors.blue60;
   var interactive04 = colors.blue60;
   var uiBackground = colors.white;
@@ -28,6 +28,7 @@
   var icon02 = colors.gray70;
   var icon03 = colors.white;
   var link01 = colors.blue60;
+  var inverseLink = colors.blue40;
   var field01 = colors.gray10;
   var field02 = colors.white;
   var inverse01 = colors.white;
@@ -53,6 +54,7 @@
   var hoverUI = '#e5e5e5';
   var activeUI = colors.gray30;
   var selectedUI = colors.gray20;
+  var inverseHoverUI = '#4c4c4c';
   var hoverSelectedUI = '#cacaca';
   var hoverDanger = '#ba1b23';
   var activeDanger = colors.red80;
@@ -90,6 +92,7 @@
     icon02: icon02,
     icon03: icon03,
     link01: link01,
+    inverseLink: inverseLink,
     field01: field01,
     field02: field02,
     inverse01: inverse01,
@@ -114,6 +117,7 @@
     hoverUI: hoverUI,
     activeUI: activeUI,
     selectedUI: selectedUI,
+    inverseHoverUI: inverseHoverUI,
     hoverSelectedUI: hoverSelectedUI,
     hoverDanger: hoverDanger,
     activeDanger: activeDanger,
@@ -139,7 +143,7 @@
    * LICENSE file in the root directory of this source tree.
    */
   var interactive01$1 = colors.blue60;
-  var interactive02$1 = colors.gray100;
+  var interactive02$1 = colors.gray80;
   var interactive03$1 = colors.blue60;
   var interactive04$1 = colors.blue60;
   var uiBackground$1 = colors.gray10;
@@ -156,6 +160,7 @@
   var icon02$1 = colors.gray70;
   var icon03$1 = colors.white;
   var link01$1 = colors.blue60;
+  var inverseLink$1 = colors.blue40;
   var field01$1 = colors.white;
   var field02$1 = colors.gray10;
   var inverse01$1 = colors.white;
@@ -181,6 +186,7 @@
   var hoverUI$1 = '#e5e5e5';
   var activeUI$1 = colors.gray30;
   var selectedUI$1 = colors.gray20;
+  var inverseHoverUI$1 = '#4c4c4c';
   var hoverSelectedUI$1 = '#cacaca';
   var hoverDanger$1 = '#ba1b23';
   var activeDanger$1 = colors.red80;
@@ -218,6 +224,7 @@
     icon02: icon02$1,
     icon03: icon03$1,
     link01: link01$1,
+    inverseLink: inverseLink$1,
     field01: field01$1,
     field02: field02$1,
     inverse01: inverse01$1,
@@ -242,6 +249,7 @@
     hoverUI: hoverUI$1,
     activeUI: activeUI$1,
     selectedUI: selectedUI$1,
+    inverseHoverUI: inverseHoverUI$1,
     hoverSelectedUI: hoverSelectedUI$1,
     hoverDanger: hoverDanger$1,
     activeDanger: activeDanger$1,
@@ -284,6 +292,7 @@
   var icon02$2 = colors.gray30;
   var icon03$2 = colors.white;
   var link01$2 = colors.blue40;
+  var inverseLink$2 = colors.blue60;
   var field01$2 = colors.gray90;
   var field02$2 = colors.gray80;
   var inverse01$2 = colors.gray100;
@@ -309,6 +318,7 @@
   var hoverUI$2 = '#353535';
   var activeUI$2 = colors.gray70;
   var selectedUI$2 = colors.gray80;
+  var inverseHoverUI$2 = '#e5e5e5';
   var hoverSelectedUI$2 = '#4c4c4c';
   var hoverDanger$2 = '#ba1b23';
   var activeDanger$2 = colors.red80;
@@ -346,6 +356,7 @@
     icon02: icon02$2,
     icon03: icon03$2,
     link01: link01$2,
+    inverseLink: inverseLink$2,
     field01: field01$2,
     field02: field02$2,
     inverse01: inverse01$2,
@@ -370,6 +381,7 @@
     hoverUI: hoverUI$2,
     activeUI: activeUI$2,
     selectedUI: selectedUI$2,
+    inverseHoverUI: inverseHoverUI$2,
     hoverSelectedUI: hoverSelectedUI$2,
     hoverDanger: hoverDanger$2,
     activeDanger: activeDanger$2,
@@ -412,6 +424,7 @@
   var icon02$3 = colors.gray30;
   var icon03$3 = colors.white;
   var link01$3 = colors.blue40;
+  var inverseLink$3 = colors.blue60;
   var field01$3 = colors.gray80;
   var field02$3 = colors.gray70;
   var inverse01$3 = colors.gray100;
@@ -437,6 +450,7 @@
   var hoverUI$3 = '#4c4c4c';
   var activeUI$3 = colors.gray60;
   var selectedUI$3 = colors.gray70;
+  var inverseHoverUI$3 = '#e5e5e5';
   var hoverSelectedUI$3 = '#656565';
   var hoverDanger$3 = '#ba1b23';
   var activeDanger$3 = colors.red80;
@@ -474,6 +488,7 @@
     icon02: icon02$3,
     icon03: icon03$3,
     link01: link01$3,
+    inverseLink: inverseLink$3,
     field01: field01$3,
     field02: field02$3,
     inverse01: inverse01$3,
@@ -498,6 +513,7 @@
     hoverUI: hoverUI$3,
     activeUI: activeUI$3,
     selectedUI: selectedUI$3,
+    inverseHoverUI: inverseHoverUI$3,
     hoverSelectedUI: hoverSelectedUI$3,
     hoverDanger: hoverDanger$3,
     activeDanger: activeDanger$3,
@@ -516,6 +532,138 @@
     hoverField: hoverField$3
   });
 
+  /**
+   * Copyright IBM Corp. 2018, 2018
+   *
+   * This source code is licensed under the Apache-2.0 license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+  var interactive01$4 = '#3d70b2';
+  var interactive02$4 = '#5a6872';
+  var interactive03$4 = '#5a6872';
+  var interactive04$4 = '#3d70b2';
+  var uiBackground$4 = '#f4f7fb';
+  var ui01$4 = colors.white;
+  var ui02$4 = '#f4f7fb';
+  var ui03$4 = '#dfe3e6';
+  var ui04$4 = '#8897a2';
+  var ui05$4 = '#5a6872';
+  var text01$4 = '#152935';
+  var text02$4 = '#5a6872';
+  var text03$4 = '#cdd1d4';
+  var text04$4 = colors.white;
+  var icon01$4 = '#3d70b2';
+  var icon02$4 = '#5a6872';
+  var icon03$4 = colors.white;
+  var link01$4 = '#3d70b2';
+  var inverseLink$4 = '#5596e6';
+  var field01$4 = colors.white;
+  var field02$4 = '#f4f7fb';
+  var inverse01$4 = colors.white;
+  var inverse02$4 = '#272d33';
+  var support01$4 = '#e0182d';
+  var support02$4 = '#5aa700';
+  var support03$4 = '#efc100';
+  var support04$4 = '#5aaafa';
+  var inverseSupport01$4 = '#ff5050';
+  var inverseSupport02$4 = '#8cd211';
+  var inverseSupport03$4 = '#FDD600';
+  var inverseSupport04$4 = '#5aaafa';
+  var overlay01$4 = 'rgba(223, 227, 230, 0.5)'; // Interaction states
+
+  var focus$4 = '#3d70b2';
+  var hoverPrimary$4 = '#30588c';
+  var activePrimary$4 = '#30588c';
+  var hoverPrimaryText$4 = '#294c86';
+  var hoverSecondary$4 = '#4d5b65';
+  var activeSecondary$4 = '#414f59';
+  var hoverTertiary$4 = '#5a6872';
+  var activeTertiary$4 = '#414f59';
+  var hoverUI$4 = '#EEF4FC';
+  var activeUI$4 = '#DFEAFA';
+  var selectedUI$4 = '#EEF4FC';
+  var inverseHoverUI$4 = '#4c4c4c';
+  var hoverSelectedUI$4 = '#DFEAFA';
+  var hoverDanger$4 = '#c70014';
+  var activeDanger$4 = '#AD1625';
+  var hoverRow$4 = '#eef4fc';
+  var visitedLink$4 = '#294c86';
+  var disabled01$4 = '#fafbfd';
+  var disabled02$4 = '#dfe3e6';
+  var disabled03$4 = '#cdd1d4';
+  var highlight$4 = '#f4f7fb';
+  var skeleton01$4 = 'rgba(61, 112, 178, .1)';
+  var skeleton02$4 = 'rgba(61, 112, 178, .1)'; // Deprecated ☠️
+
+  var brand01$4 = interactive01$4;
+  var brand02$4 = interactive02$4;
+  var brand03$4 = interactive03$4;
+  var active01$4 = activeUI$4;
+  var hoverField$4 = hoverUI$4;
+
+  var v9 = /*#__PURE__*/Object.freeze({
+    interactive01: interactive01$4,
+    interactive02: interactive02$4,
+    interactive03: interactive03$4,
+    interactive04: interactive04$4,
+    uiBackground: uiBackground$4,
+    ui01: ui01$4,
+    ui02: ui02$4,
+    ui03: ui03$4,
+    ui04: ui04$4,
+    ui05: ui05$4,
+    text01: text01$4,
+    text02: text02$4,
+    text03: text03$4,
+    text04: text04$4,
+    icon01: icon01$4,
+    icon02: icon02$4,
+    icon03: icon03$4,
+    link01: link01$4,
+    inverseLink: inverseLink$4,
+    field01: field01$4,
+    field02: field02$4,
+    inverse01: inverse01$4,
+    inverse02: inverse02$4,
+    support01: support01$4,
+    support02: support02$4,
+    support03: support03$4,
+    support04: support04$4,
+    inverseSupport01: inverseSupport01$4,
+    inverseSupport02: inverseSupport02$4,
+    inverseSupport03: inverseSupport03$4,
+    inverseSupport04: inverseSupport04$4,
+    overlay01: overlay01$4,
+    focus: focus$4,
+    hoverPrimary: hoverPrimary$4,
+    activePrimary: activePrimary$4,
+    hoverPrimaryText: hoverPrimaryText$4,
+    hoverSecondary: hoverSecondary$4,
+    activeSecondary: activeSecondary$4,
+    hoverTertiary: hoverTertiary$4,
+    activeTertiary: activeTertiary$4,
+    hoverUI: hoverUI$4,
+    activeUI: activeUI$4,
+    selectedUI: selectedUI$4,
+    inverseHoverUI: inverseHoverUI$4,
+    hoverSelectedUI: hoverSelectedUI$4,
+    hoverDanger: hoverDanger$4,
+    activeDanger: activeDanger$4,
+    hoverRow: hoverRow$4,
+    visitedLink: visitedLink$4,
+    disabled01: disabled01$4,
+    disabled02: disabled02$4,
+    disabled03: disabled03$4,
+    highlight: highlight$4,
+    skeleton01: skeleton01$4,
+    skeleton02: skeleton02$4,
+    brand01: brand01$4,
+    brand02: brand02$4,
+    brand03: brand03$4,
+    active01: active01$4,
+    hoverField: hoverField$4
+  });
+
   /**
    * Copyright IBM Corp. 2018, 2018
    *
@@ -525,8 +673,8 @@
   // The color token names for a Carbon theme, value corresponds to what they're
   // exported as in JavaScript
   var colors$1 = [// Core
-  'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'icon01', 'icon02', 'icon03', 'link01', 'field01', 'field02', 'inverse01', 'inverse02', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', // Interactive states
-  'focus', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'activeUI', 'selectedUI', 'hoverSelectedUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'skeleton01', 'skeleton02', // Deprecated
+  'interactive01', 'interactive02', 'interactive03', 'interactive04', 'uiBackground', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'icon01', 'icon02', 'icon03', 'link01', 'inverseLink', 'field01', 'field02', 'inverse01', 'inverse02', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01', // Interactive states
+  'focus', 'hoverPrimary', 'activePrimary', 'hoverPrimaryText', 'hoverSecondary', 'activeSecondary', 'hoverTertiary', 'activeTertiary', 'hoverUI', 'activeUI', 'selectedUI', 'hoverSelectedUI', 'inverseHoverUI', 'hoverDanger', 'activeDanger', 'hoverRow', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'highlight', 'skeleton01', 'skeleton02', // Deprecated
   'brand01', 'brand02', 'brand03', 'active01', 'hoverField'];
   var numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
   /**
@@ -570,6 +718,16 @@
   var tokens = {
     colors: colors$1
   };
+  var unstable__meta = {
+    colors: [{
+      type: 'core',
+      tokens: ['uiBackground', 'interactive01', 'interactive02', 'interactive03', 'interactive04', 'brand01', 'brand02', 'brand03', 'ui01', 'ui02', 'ui03', 'ui04', 'ui05', 'text01', 'text02', 'text03', 'text04', 'link01', 'icon01', 'icon02', 'icon03', 'field01', 'field02', 'inverse01', 'inverse02', 'inverseLink', 'support01', 'support02', 'support03', 'support04', 'inverseSupport01', 'inverseSupport02', 'inverseSupport03', 'inverseSupport04', 'overlay01']
+    }, {
+      type: 'interactive',
+      tokens: ['focus', 'hoverPrimary', 'hoverPrimaryText', 'hoverSecondary', 'hoverTertiary', 'hoverUI', 'hoverSelectedUI', 'hoverDanger', 'hoverRow', 'activePrimary', 'activeSecondary', 'activeTertiary', 'activeUI', 'activeDanger', 'selectedUI', 'highlight', 'skeleton01', 'skeleton02', 'visitedLink', 'disabled01', 'disabled02', 'disabled03', 'inverseHoverUI', 'active01', 'hoverField']
+    }],
+    deprecated: ['brand01', 'brand02', 'brand03', 'active01']
+  };
 
   /**
    * Copyright IBM Corp. 2018, 2018
@@ -581,15 +739,18 @@
     white: white,
     g10: g10,
     g90: g90,
-    g100: g100
+    g100: g100,
+    v9: v9
   };
 
   exports.g10 = g10;
   exports.g90 = g90;
   exports.g100 = g100;
   exports.white = white;
+  exports.v9 = v9;
   exports.tokens = tokens;
   exports.formatTokenName = formatTokenName;
+  exports.unstable__meta = unstable__meta;
   exports.themes = themes;
   exports.interactive01 = interactive01;
   exports.interactive02 = interactive02;
@@ -609,6 +770,7 @@
   exports.icon02 = icon02;
   exports.icon03 = icon03;
   exports.link01 = link01;
+  exports.inverseLink = inverseLink;
   exports.field01 = field01;
   exports.field02 = field02;
   exports.inverse01 = inverse01;
@@ -633,6 +795,7 @@
   exports.hoverUI = hoverUI;
   exports.activeUI = activeUI;
   exports.selectedUI = selectedUI;
+  exports.inverseHoverUI = inverseHoverUI;
   exports.hoverSelectedUI = hoverSelectedUI;
   exports.hoverDanger = hoverDanger;
   exports.activeDanger = activeDanger;