@carbon/charts 0.41.46 → 0.41.50

package/styles/vendor/@carbon/themes/src/g90.js

@@ -4,6 +4,7 @@
  * 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 { adjustLightness } from './tools';
 
 import {
   // Blue
@@ -17,6 +18,7 @@ import {
   // Gray
   gray10,
   gray30,
+  gray40,
   gray50,
   gray60,
   gray70,
@@ -28,7 +30,8 @@ import {
   green40,
   green50,
   yellow,
-  red50,
+  red30,
+  red40,
   red60,
   red80,
   purple40,
@@ -55,14 +58,19 @@ export const ui05 = gray10;
 
 export const text01 = gray10;
 export const text02 = gray30;
-export const text03 = gray50;
+export const text03 = gray60;
 export const text04 = white;
+export const text05 = gray50;
+export const textError = red30;
 
 export const icon01 = gray10;
 export const icon02 = gray30;
 export const icon03 = white;
 
 export const link01 = blue40;
+export const link02 = blue30;
+
+export const inverseLink = blue60;
 
 export const field01 = gray80;
 export const field02 = gray70;
@@ -70,7 +78,7 @@ export const field02 = gray70;
 export const inverse01 = gray100;
 export const inverse02 = gray10;
 
-export const support01 = red50;
+export const support01 = red40;
 export const support02 = green40;
 export const support03 = yellow;
 export const support04 = blue50;
@@ -82,8 +90,12 @@ export const inverseSupport04 = blue60;
 
 export const overlay01 = rgba(gray100, 0.7);
 
+export const danger01 = red60;
+export const danger02 = red40;
+
 // Interaction states
 export const focus = white;
+export const inverseFocusUi = blue60;
 
 export const hoverPrimary = '#0353e9';
 export const activePrimary = blue80;
@@ -97,12 +109,16 @@ export const hoverTertiary = gray10;
 export const activeTertiary = gray30;
 
 export const hoverUI = '#4c4c4c';
+export const hoverLightUI = '#656565';
 export const activeUI = gray60;
+export const activeLightUI = gray50;
 export const selectedUI = gray70;
+export const selectedLightUI = gray60;
+export const inverseHoverUI = '#e5e5e5';
 
 export const hoverSelectedUI = '#656565';
 
-export const hoverDanger = '#ba1b23';
+export const hoverDanger = adjustLightness(danger01, -8);
 export const activeDanger = red80;
 
 export const hoverRow = '#4c4c4c';
@@ -110,17 +126,93 @@ export const hoverRow = '#4c4c4c';
 export const visitedLink = purple40;
 
 export const disabled01 = gray80;
-export const disabled02 = gray70;
-export const disabled03 = gray50;
+export const disabled02 = gray60;
+export const disabled03 = gray40;
 
 export const highlight = blue70;
 
+export const decorative01 = gray60;
+
+export const buttonSeparator = '#161616';
+
 export const skeleton01 = '#353535';
 export const skeleton02 = gray70;
 
+export {
+  // Type
+  caption01,
+  label01,
+  helperText01,
+  bodyShort01,
+  bodyLong01,
+  bodyShort02,
+  bodyLong02,
+  code01,
+  code02,
+  heading01,
+  productiveHeading01,
+  heading02,
+  productiveHeading02,
+  productiveHeading03,
+  productiveHeading04,
+  productiveHeading05,
+  productiveHeading06,
+  productiveHeading07,
+  expressiveHeading01,
+  expressiveHeading02,
+  expressiveHeading03,
+  expressiveHeading04,
+  expressiveHeading05,
+  expressiveHeading06,
+  expressiveParagraph01,
+  quotation01,
+  quotation02,
+  display01,
+  display02,
+  display03,
+  display04,
+  // Layout
+  // Spacing
+  spacing01,
+  spacing02,
+  spacing03,
+  spacing04,
+  spacing05,
+  spacing06,
+  spacing07,
+  spacing08,
+  spacing09,
+  spacing10,
+  spacing11,
+  spacing12,
+  // Fluid spacing
+  fluidSpacing01,
+  fluidSpacing02,
+  fluidSpacing03,
+  fluidSpacing04,
+  // Layout
+  layout01,
+  layout02,
+  layout03,
+  layout04,
+  layout05,
+  layout06,
+  layout07,
+  // Containers
+  container01,
+  container02,
+  container03,
+  container04,
+  container05,
+  // Icon sizes
+  iconSize01,
+  iconSize02,
+} from './white';
+
 // Deprecated ☠️
 export const brand01 = interactive01;
 export const brand02 = interactive02;
 export const brand03 = interactive03;
 export const active01 = activeUI;
 export const hoverField = hoverUI;
+export const danger = danger01;

package/styles/vendor/@carbon/themes/src/index.js

@@ -11,13 +11,15 @@ import * as g10 from './g10';
 import * as g100 from './g100';
 import * as white from './white';
 import * as g90 from './g90';
-import { tokens, formatTokenName } from './tokens';
+import * as v9 from './v9';
+import { tokens, formatTokenName, unstable__meta } from './tokens';
 
-export { g10, g90, g100, white };
-export { tokens, formatTokenName };
+export { g10, g90, g100, white, v9 };
+export { tokens, formatTokenName, unstable__meta };
 export const themes = {
   white,
   g10,
   g90,
   g100,
+  v9,
 };

package/styles/vendor/@carbon/themes/src/tokens.js

@@ -5,6 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { unstable_tokens as type } from '@carbon/type';
+import { unstable_tokens as layout } from '@carbon/layout';
+
 // The color token names for a Carbon theme, value corresponds to what they're
 // exported as in JavaScript
 const colors = [
@@ -26,12 +29,17 @@ const colors = [
   'text02',
   'text03',
   'text04',
+  'text05',
+  'textError',
 
   'icon01',
   'icon02',
   'icon03',
 
   'link01',
+  'link02',
+
+  'inverseLink',
 
   'field01',
   'field02',
@@ -51,8 +59,12 @@ const colors = [
 
   'overlay01',
 
+  'danger01',
+  'danger02',
+
   // Interactive states
   'focus',
+  'inverseFocusUi',
 
   'hoverPrimary',
   'activePrimary',
@@ -65,10 +77,13 @@ const colors = [
   'activeTertiary',
 
   'hoverUI',
+  'hoverLightUI',
+  'hoverSelectedUI',
   'activeUI',
-
+  'activeLightUI',
   'selectedUI',
-  'hoverSelectedUI',
+  'selectedLightUI',
+  'inverseHoverUI',
 
   'hoverDanger',
   'activeDanger',
@@ -83,6 +98,10 @@ const colors = [
 
   'highlight',
 
+  'decorative01',
+
+  'buttonSeparator',
+
   'skeleton01',
   'skeleton02',
 
@@ -92,6 +111,7 @@ const colors = [
   'brand03',
   'active01',
   'hoverField',
+  'danger',
 ];
 
 const numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
@@ -136,4 +156,94 @@ export function formatTokenName(token) {
 
 export const tokens = {
   colors,
+  type,
+  layout,
+};
+
+export const unstable__meta = {
+  colors: [
+    {
+      type: 'core',
+      tokens: [
+        'uiBackground',
+        'interactive01',
+        'interactive02',
+        'interactive03',
+        'interactive04',
+        'brand01',
+        'brand02',
+        'brand03',
+        'danger',
+        'danger01',
+        'danger02',
+        'ui01',
+        'ui02',
+        'ui03',
+        'ui04',
+        'ui05',
+        'text01',
+        'text02',
+        'text03',
+        'text04',
+        'text05',
+        'textError',
+        'link01',
+        'link02',
+        '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',
+        'hoverLightUI',
+        'hoverSelectedUI',
+        'hoverDanger',
+        'hoverRow',
+        'activePrimary',
+        'activeSecondary',
+        'activeTertiary',
+        'activeUI',
+        'activeLightUI',
+        'activeDanger',
+        'selectedUI',
+        'selectedLightUI',
+        'highlight',
+        'skeleton01',
+        'skeleton02',
+        'visitedLink',
+        'disabled01',
+        'disabled02',
+        'disabled03',
+        'inverseHoverUI',
+        'active01',
+        'hoverField',
+        'decorative01',
+        'buttonSeparator',
+      ],
+    },
+  ],
+  deprecated: ['brand01', 'brand02', 'brand03', 'active01', 'danger'],
 };

package/styles/vendor/@carbon/themes/src/tools.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2016, 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 Color from 'color';
+
+/**
+ * Adjust a given token's lightness by a specified percentage
+ * Example: token = hsl(10, 10, 10);
+ * adjustLightness(token, 5) === hsl(10, 10, 15);
+ * adjustLightness(token, -5) === hsl(10, 10, 5);
+ * @param {string} token
+ * @param {integer} shift The number of percentage points (positive or negative) by which to shift the lightness of a token.
+ * @returns {string}
+ */
+export function adjustLightness(token, shift) {
+  const original = Color(token).hsl().object();
+
+  return Color({ ...original, l: (original.l += shift) })
+    .round()
+    .hex()
+    .toLowerCase();
+}

package/styles/vendor/@carbon/themes/src/v9.js

@@ -0,0 +1,181 @@
+/**
+ * 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, red60 } from '@carbon/colors';
+
+export const interactive01 = '#3d70b2';
+export const interactive02 = '#4d5358';
+export const interactive03 = '#3d70b2';
+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 text05 = '#5a6872';
+export const textError = '#e0182d';
+
+export const icon01 = '#3d70b2';
+export const icon02 = '#5a6872';
+export const icon03 = white;
+
+export const link01 = '#3d70b2';
+export const link02 = '#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)';
+
+export const danger01 = red60;
+export const danger02 = red60;
+
+// Interaction states
+export const focus = '#3d70b2';
+export const inverseFocusUi = '#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 hoverLightUI = '#EEF4FC';
+export const activeUI = '#DFEAFA';
+export const activeLightUI = '#DFEAFA';
+export const selectedUI = '#EEF4FC';
+export const selectedLightUI = '#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 decorative01 = '#EEF4FC';
+
+export const buttonSeparator = '#e0e0e0';
+
+export const skeleton01 = 'rgba(61, 112, 178, .1)';
+export const skeleton02 = 'rgba(61, 112, 178, .1)';
+
+export {
+  // Type
+  caption01,
+  label01,
+  helperText01,
+  bodyShort01,
+  bodyLong01,
+  bodyShort02,
+  bodyLong02,
+  code01,
+  code02,
+  heading01,
+  productiveHeading01,
+  heading02,
+  productiveHeading02,
+  productiveHeading03,
+  productiveHeading04,
+  productiveHeading05,
+  productiveHeading06,
+  productiveHeading07,
+  expressiveHeading01,
+  expressiveHeading02,
+  expressiveHeading03,
+  expressiveHeading04,
+  expressiveHeading05,
+  expressiveHeading06,
+  expressiveParagraph01,
+  quotation01,
+  quotation02,
+  display01,
+  display02,
+  display03,
+  display04,
+  // Layout
+  // Spacing
+  spacing01,
+  spacing02,
+  spacing03,
+  spacing04,
+  spacing05,
+  spacing06,
+  spacing07,
+  spacing08,
+  spacing09,
+  spacing10,
+  spacing11,
+  spacing12,
+  // Fluid spacing
+  fluidSpacing01,
+  fluidSpacing02,
+  fluidSpacing03,
+  fluidSpacing04,
+  // Layout
+  layout01,
+  layout02,
+  layout03,
+  layout04,
+  layout05,
+  layout06,
+  layout07,
+  // Containers
+  container01,
+  container02,
+  container03,
+  container04,
+  container05,
+  // Icon sizes
+  iconSize01,
+  iconSize02,
+} from './white';
+
+// Deprecated ☠️
+export const brand01 = interactive01;
+export const brand02 = interactive02;
+export const brand03 = interactive03;
+export const active01 = activeUI;
+export const hoverField = hoverUI;
+export const danger = danger01;