white.js

/**
 * 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
  blue20,
  blue40,
  blue60,
  blue70,
  blue80,

  // Gray
  gray10,
  gray20,
  gray30,
  gray40,
  gray50,
  gray60,
  gray70,
  gray80,
  gray100,

  // Support
  blue50,
  green40,
  green50,
  yellow,
  red50,
  red60,
  red80,
  purple60,

  // Constants
  white,

  // Tools
  rgba,
} from '@carbon/colors';

export const interactive01 = blue60;
export const interactive02 = gray80;
export const interactive03 = blue60;
export const interactive04 = blue60;

export const uiBackground = white;

export const ui01 = gray10;
export const ui02 = white;
export const ui03 = gray20;
export const ui04 = gray50;
export const ui05 = gray100;

export const text01 = gray100;
export const text02 = gray80;
export const text03 = gray40;
export const text04 = white;
export const text05 = gray60;
export const textError = red60;

export const icon01 = gray100;
export const icon02 = gray70;
export const icon03 = white;

export const link01 = blue60;

export const inverseLink = blue40;

export const field01 = gray10;
export const field02 = white;

export const inverse01 = white;
export const inverse02 = gray80;

export const support01 = red60;
export const support02 = green50;
export const support03 = yellow;
export const support04 = blue70;

export const inverseSupport01 = red50;
export const inverseSupport02 = green40;
export const inverseSupport03 = yellow;
export const inverseSupport04 = blue50;

export const overlay01 = rgba(gray100, 0.5);

export const danger = red60;

// Interaction states
export const focus = blue60;
export const inverseFocusUi = white;

export const hoverPrimary = '#0353e9';
export const activePrimary = blue80;

export const hoverPrimaryText = blue70;

export const hoverSecondary = '#4c4c4c';
export const activeSecondary = gray60;

export const hoverTertiary = '#0353e9';
export const activeTertiary = blue80;

export const hoverUI = '#e5e5e5';
export const activeUI = gray30;
export const selectedUI = gray20;
export const inverseHoverUI = '#4c4c4c';

export const hoverSelectedUI = '#cacaca';

export const hoverDanger = adjustLightness(danger, -8);
export const activeDanger = red80;

export const hoverRow = '#e5e5e5';

export const visitedLink = purple60;

export const disabled01 = gray10;
export const disabled02 = gray30;
export const disabled03 = gray50;

export const highlight = blue20;

export const decorative01 = gray20;

export const skeleton01 = '#e5e5e5';
export const skeleton02 = gray30;

// Type
export {
  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,
} from '@carbon/type';

// Layout
// Spacing
export {
  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 '@carbon/layout';

// Deprecated ☠️
export const brand01 = interactive01;
export const brand02 = interactive02;
export const brand03 = interactive03;
export const active01 = activeUI;
export const hoverField = hoverUI;