@carbon/themes 10.31.0 → 10.33.0

package/src/g80.js

@@ -0,0 +1,315 @@
+/**
+ * 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 { adjustLightness } from './tools';
+
+import {
+  // Blue
+  blue30,
+  blue40,
+  blue50,
+  blue60,
+  blue70,
+  blue80,
+
+  // Gray
+  gray10,
+  gray30,
+  gray40,
+  gray50,
+  gray60,
+  gray70,
+  gray80,
+  gray100,
+
+  // Support
+  green40,
+  green50,
+  yellow30,
+  red30,
+  red40,
+  red60,
+  red80,
+  purple40,
+
+  // Constants
+  white,
+
+  // Tools
+  rgba,
+} from '@carbon/colors';
+
+// New color tokens
+// TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
+export const background = gray80;
+export const layer = gray70;
+export const layerAccent = gray60;
+export const field = gray70;
+export const backgroundInverse = gray10;
+export const backgroundBrand = blue60;
+export const interactive = blue40;
+
+export const borderSubtle = gray60;
+export const borderStrong = gray40;
+export const borderInverse = gray10;
+export const borderInteractive = blue50;
+
+export const textPrimary = gray10;
+export const textSecondary = gray30;
+export const textPlaceholder = gray60;
+export const textHelper = gray40;
+export const textError = red30;
+export const textOnColor = white;
+export const textInverse = gray100;
+
+export const linkPrimary = blue40;
+export const linkSecondary = blue30;
+export const linkVisited = purple40;
+export const linkInverse = blue60;
+
+export const iconPrimary = gray10;
+export const iconSecondary = gray30;
+export const iconOnColor = white;
+export const iconInverse = gray100;
+
+export const supportError = red40;
+export const supportSuccess = green40;
+export const supportWarning = yellow30;
+export const supportInfo = blue50;
+export const supportErrorInverse = red60;
+export const supportSuccessInverse = green50;
+export const supportWarningInverse = yellow30;
+export const supportInfoInverse = blue60;
+
+export const overlay = rgba(gray100, 0.7);
+export const toggleOff = gray50;
+
+export const buttonPrimary = blue60;
+export const buttonSecondary = gray60;
+export const buttonTertiary = white;
+export const buttonDangerPrimary = red60;
+export const buttonDangerSecondary = red40;
+export const buttonSeparator = gray100;
+
+export const backgroundActive = gray70;
+export const layerActive = gray60;
+
+export const buttonDangerActive = red80;
+export const buttonPrimaryActive = blue80;
+export const buttonSecondaryActive = gray70;
+export const buttonTertiaryActive = gray30;
+
+export const focus = white;
+export const focusInset = gray100;
+export const focusInverse = blue60;
+export const highlight = blue70;
+
+export const backgroundHover = adjustLightness(background, +6);
+export const layerHover = adjustLightness(layer, +7);
+export const fieldHover = adjustLightness(field, +7);
+export const backgroundInverseHover = adjustLightness(backgroundInverse, -5);
+
+export const linkPrimaryHover = blue30;
+
+export const buttonDangerHover = adjustLightness(buttonDangerPrimary, -8);
+export const buttonPrimaryHover = adjustLightness(buttonPrimary, -8);
+export const buttonSecondaryHover = adjustLightness(buttonSecondary, -7);
+export const buttonTertiaryHover = white;
+
+export const backgroundSelected = gray70;
+export const backgroundSelectedHover = adjustLightness(backgroundSelected, +7);
+export const layerSelected = gray60;
+export const layerSelectedHover = adjustLightness(layerSelected, -6);
+export const layerSelectedInverse = gray10;
+export const borderSubtleSelected = gray50;
+
+export const layerDisabled = gray70;
+export const fieldDisabled = gray70;
+export const borderDisabled = gray70;
+
+export const textDisabled = gray50;
+export const buttonDisabled = gray50;
+export const iconDisabled = gray50;
+
+export const textOnColorDisabled = gray30;
+export const iconOnColorDisabled = gray30;
+export const layerSelectedDisabled = gray30;
+
+export const skeletonBackground = adjustLightness(background, +6);
+export const skeletonElement = gray60;
+
+//////////////////////////////////////
+// Old tokens needed to pass tests  //
+//////////////////////////////////////
+export const interactive01 = backgroundBrand;
+export const interactive02 = buttonSecondary;
+export const interactive03 = buttonTertiary;
+export const interactive04 = interactive;
+
+export const uiBackground = background;
+
+export const ui01 = layer;
+export const ui02 = gray70;
+export const ui03 = layerAccent;
+export const ui04 = borderStrong;
+export const ui05 = borderInverse;
+
+export const text01 = textPrimary;
+export const text02 = textSecondary;
+export const text03 = textPlaceholder;
+export const text04 = textOnColor;
+export const text05 = textHelper;
+
+export const icon01 = iconPrimary;
+export const icon02 = iconSecondary;
+export const icon03 = iconOnColor;
+
+export const link01 = linkPrimary;
+export const link02 = linkSecondary;
+
+export const inverseLink = linkInverse;
+
+export const field01 = field;
+export const field02 = gray60;
+
+export const inverse01 = textInverse;
+export const inverse02 = backgroundInverse;
+
+export const support01 = supportError;
+export const support02 = supportSuccess;
+export const support03 = supportWarning;
+export const support04 = supportInfo;
+
+export const inverseSupport01 = supportErrorInverse;
+export const inverseSupport02 = supportSuccessInverse;
+export const inverseSupport03 = supportWarningInverse;
+export const inverseSupport04 = supportInfoInverse;
+
+export const overlay01 = overlay;
+
+export const danger01 = buttonDangerPrimary;
+export const danger02 = buttonDangerSecondary;
+
+// Interaction states
+export const inverseFocusUi = focusInverse;
+
+export const hoverPrimary = buttonPrimaryHover;
+export const activePrimary = buttonPrimaryActive;
+
+export const hoverPrimaryText = linkPrimaryHover;
+
+export const hoverSecondary = buttonSecondaryHover;
+export const activeSecondary = buttonSecondaryActive;
+
+export const hoverTertiary = buttonTertiaryHover;
+export const activeTertiary = buttonTertiaryActive;
+
+export const hoverUI = backgroundHover;
+export const hoverLightUI = '#5E5E5E';
+export const activeUI = backgroundActive;
+export const activeLightUI = gray50;
+export const selectedUI = backgroundSelected;
+export const selectedLightUI = gray50;
+export const inverseHoverUI = backgroundInverseHover;
+
+export const hoverSelectedUI = layerSelectedHover;
+
+export const hoverDanger = buttonDangerHover;
+export const activeDanger = buttonDangerActive;
+
+export const hoverRow = layerHover;
+
+export const visitedLink = linkVisited;
+
+export const disabled01 = layerDisabled;
+export const disabled02 = textDisabled;
+export const disabled03 = textOnColorDisabled;
+
+export const decorative01 = gray60;
+
+export const skeleton01 = skeletonBackground;
+export const skeleton02 = skeletonElement;
+
+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,
+  spacing13,
+  // Fluid spacing
+  fluidSpacing01,
+  fluidSpacing02,
+  fluidSpacing03,
+  fluidSpacing04,
+  // Layout
+  // Deprecated -- Remove in v11
+  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/src/g90.js

@@ -138,6 +138,99 @@ export const buttonSeparator = '#161616';
 export const skeleton01 = '#353535';
 export const skeleton02 = gray70;
 
+// New color tokens
+// TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
+export const background = uiBackground;
+export const layer = ui01;
+export const layerAccent = ui03;
+export const field = field01;
+export const backgroundInverse = inverse02;
+export const backgroundBrand = interactive01;
+export const interactive = interactive04;
+
+export const borderSubtle = ui03;
+export const borderStrong = ui04;
+export const borderInverse = ui05;
+export const borderInteractive = interactive04;
+
+export const textPrimary = text01;
+export const textSecondary = text02;
+export const textPlaceholder = text03;
+export const textHelper = text05;
+export const textOnColor = text04;
+export const textInverse = inverse01;
+
+export const linkPrimary = link01;
+export const linkSecondary = link02;
+export const linkVisited = visitedLink;
+export const linkInverse = inverseLink;
+
+export const iconPrimary = icon01;
+export const iconSecondary = icon02;
+export const iconOnColor = icon03;
+export const iconInverse = inverse01;
+
+export const supportError = support01;
+export const supportSuccess = support02;
+export const supportWarning = support03;
+export const supportInfo = support04;
+export const supportErrorInverse = inverseSupport01;
+export const supportSuccessInverse = inverseSupport02;
+export const supportWarningInverse = inverseSupport03;
+export const supportInfoInverse = inverseSupport04;
+
+export const overlay = overlay01;
+export const toggleOff = ui04;
+
+export const buttonPrimary = interactive01;
+export const buttonSecondary = interactive02;
+export const buttonTertiary = interactive03;
+export const buttonDangerPrimary = danger01;
+export const buttonDangerSecondary = danger02;
+
+export const backgroundActive = activeUI;
+export const layerActive = activeUI;
+
+export const buttonDangerActive = activeDanger;
+export const buttonPrimaryActive = activePrimary;
+export const buttonSecondaryActive = activeSecondary;
+export const buttonTertiaryActive = activeTertiary;
+
+export const focusInset = inverse01;
+export const focusInverse = inverseFocusUi;
+
+export const backgroundHover = hoverUI;
+export const layerHover = hoverUI;
+export const fieldHover = hoverUI;
+export const backgroundInverseHover = inverseHoverUI;
+export const linkPrimaryHover = hoverPrimaryText;
+export const buttonDangerHover = hoverDanger;
+export const buttonPrimaryHover = hoverPrimary;
+export const buttonSecondaryHover = hoverSecondary;
+export const buttonTertiaryHover = hoverTertiary;
+
+export const backgroundSelected = selectedUI;
+export const backgroundSelectedHover = hoverSelectedUI;
+export const layerSelected = selectedUI;
+export const layerSelectedHover = hoverSelectedUI;
+export const layerSelectedInverse = ui05;
+export const borderSubtleSelected = activeUI;
+
+export const layerDisabled = disabled01;
+export const fieldDisabled = disabled01;
+export const borderDisabled = disabled01;
+
+export const textDisabled = disabled02;
+export const buttonDisabled = disabled02;
+export const iconDisabled = disabled02;
+
+export const textOnColorDisabled = disabled03;
+export const iconOnColorDisabled = disabled03;
+export const layerSelectedDisabled = disabled03;
+
+export const skeletonBackground = skeleton01;
+export const skeletonElement = skeleton02;
+
 export {
   // Type
   caption01,

package/src/index.js

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

package/src/tokens.js

@@ -105,6 +105,99 @@ const colors = [
   'skeleton01',
   'skeleton02',
 
+  // New color tokens
+  // TO-DO: remove fallback color when v11 is released and assign carbon colors to new tokens
+  'background',
+  'layer',
+  'layerAccent',
+  'field',
+  'backgroundInverse',
+  'backgroundBrand',
+  'interactive',
+
+  'borderSubtle',
+  'borderStrong',
+  'borderInverse',
+  'borderInteractive',
+
+  'textPrimary',
+  'textSecondary',
+  'textPlaceholder',
+  'textHelper',
+  'textOnColor',
+  'textInverse',
+
+  'linkPrimary',
+  'linkSecondary',
+  'linkVisited',
+  'linkInverse',
+
+  'iconPrimary',
+  'iconSecondary',
+  'iconOnColor',
+  'iconInverse',
+
+  'supportError',
+  'supportSuccess',
+  'supportWarning',
+  'supportInfo',
+  'supportErrorInverse',
+  'supportSuccessInverse',
+  'supportWarningInverse',
+  'supportInfoInverse',
+
+  'overlay',
+  'toggleOff',
+
+  'buttonPrimary',
+  'buttonSecondary',
+  'buttonTertiary',
+  'buttonDangerPrimary',
+  'buttonDangerSecondary',
+
+  'backgroundActive',
+  'layerActive',
+
+  'buttonDangerActive',
+  'buttonPrimaryActive',
+  'buttonSecondaryActive',
+  'buttonTertiaryActive',
+
+  'focusInset',
+  'focusInverse',
+
+  'backgroundHover',
+  'layerHover',
+  'fieldHover',
+  'backgroundInverseHover',
+  'linkPrimaryHover',
+  'buttonDangerHover',
+  'buttonPrimaryHover',
+  'buttonSecondaryHover',
+  'buttonTertiaryHover',
+
+  'backgroundSelected',
+  'backgroundSelectedHover',
+  'layerSelected',
+  'layerSelectedHover',
+  'layerSelectedInverse',
+  'borderSubtleSelected',
+
+  'layerDisabled',
+  'fieldDisabled',
+  'borderDisabled',
+
+  'textDisabled',
+  'buttonDisabled',
+  'iconDisabled',
+
+  'textOnColorDisabled',
+  'iconOnColorDisabled',
+  'layerSelectedDisabled',
+
+  'skeletonBackground',
+  'skeletonElement',
+
   // Deprecated
   'brand01',
   'brand02',
@@ -206,6 +299,55 @@ export const unstable__meta = {
         'inverseSupport03',
         'inverseSupport04',
         'overlay01',
+
+        //new tokens
+        'background',
+        'layer',
+        'layerAccent',
+        'field',
+        'backgroundInverse',
+        'backgroundBrand',
+        'interactive',
+
+        'borderSubtle',
+        'borderStrong',
+        'borderInverse',
+        'borderInteractive',
+
+        'textPrimary',
+        'textSecondary',
+        'textPlaceholder',
+        'textHelper',
+        'textOnColor',
+        'textInverse',
+
+        'linkPrimary',
+        'linkSecondary',
+        'linkVisited',
+        'linkInverse',
+
+        'iconPrimary',
+        'iconSecondary',
+        'iconOnColor',
+        'iconInverse',
+
+        'supportError',
+        'supportSuccess',
+        'supportWarning',
+        'supportInfo',
+        'supportErrorInverse',
+        'supportSuccessInverse',
+        'supportWarningInverse',
+        'supportInfoInverse',
+
+        'overlay',
+        'toggleOff',
+
+        'buttonPrimary',
+        'buttonSecondary',
+        'buttonTertiary',
+        'buttonDangerPrimary',
+        'buttonDangerSecondary',
       ],
     },
     {
@@ -242,6 +384,50 @@ export const unstable__meta = {
         'hoverField',
         'decorative01',
         'buttonSeparator',
+
+        // new tokens
+        'backgroundActive',
+        'layerActive',
+
+        'buttonDangerActive',
+        'buttonPrimaryActive',
+        'buttonSecondaryActive',
+        'buttonTertiaryActive',
+
+        'focusInset',
+        'focusInverse',
+
+        'backgroundHover',
+        'layerHover',
+        'fieldHover',
+        'backgroundInverseHover',
+        'linkPrimaryHover',
+        'buttonDangerHover',
+        'buttonPrimaryHover',
+        'buttonSecondaryHover',
+        'buttonTertiaryHover',
+
+        'backgroundSelected',
+        'backgroundSelectedHover',
+        'layerSelected',
+        'layerSelectedHover',
+        'layerSelectedInverse',
+        'borderSubtleSelected',
+
+        'layerDisabled',
+        'fieldDisabled',
+        'borderDisabled',
+
+        'textDisabled',
+        'buttonDisabled',
+        'iconDisabled',
+
+        'textOnColorDisabled',
+        'iconOnColorDisabled',
+        'layerSelectedDisabled',
+
+        'skeletonBackground',
+        'skeletonElement',
       ],
     },
   ],