A sample Theme.js for coworks-web-components library

Theme.js

/* eslint-disable id-length */
import { ColorLuminance } from '../components/Util/Colors/ColorUtils'
import colors from '../components/Util/Colors/colors'
import designTokens from './designTokens'

export const lightTheme = {
  name: 'light',
  backgroundColor: '#fff', //storybook background color

  colors: {
    ...designTokens.colors,
    white: '#FFFFFF',
  },
  fonts: {
    sizes: {
      h1: {
        fontSize: designTokens.fonts.h1.fontSize,
        lineHeight: designTokens.fonts.h1.lineHeight,
        letterSpacing: '0px', // DEVIATION
      },
      h2: {
        fontSize: designTokens.fonts.h2.fontSize,
        lineHeight: designTokens.fonts.h2.lineHeight,
        letterSpacing: '0px', // DEVIATION
      },
      h3: {
        fontSize: designTokens.fonts.h3.fontSize,
        lineHeight: designTokens.fonts.h3.lineHeight,
        letterSpacing: '0px', // DEVIATION
      },
      h4: {
        fontSize: designTokens.fonts.h4.fontSize,
        lineHeight: designTokens.fonts.h4.lineHeight,
        letterSpacing: '1px',
      },
      h5: {
        fontSize: designTokens.fonts.h5.fontSize,
        lineHeight: designTokens.fonts.h5.lineHeight,
        letterSpacing: '1.5px',
      },
      h6: {
        fontSize: designTokens.fonts.h6.fontSize,
        lineHeight: designTokens.fonts.h6.lineHeight,
        letterSpacing: '1px', // DEVIATION
      },
      p: {
        fontSize: designTokens.fonts.p.fontSize,
        lineHeight: designTokens.fonts.p.lineHeight,
        letterSpacing: '1px', // DEVIATION
      },
      pSmall: {
        fontSize: designTokens.fonts.pSmall.fontSize,
        lineHeight: designTokens.fonts.pSmall.lineHeight,
        letterSpacing: '1px', // DEVIATION
      },
      button: {
        fontSize: designTokens.fonts.button.fontSize,
        lineHeight: designTokens.fonts.button.lineHeight,
        letterSpacing: '2px',
      },
      sidebarSection: '8px',
    },
    weights: {
      regular: designTokens.fonts.regular.fontWeight,
      semibold: designTokens.fonts.semibold.fontWeight,
      bold: designTokens.fonts.bold.fontWeight,
      extrabold: designTokens.fonts.extrabold.fontWeight,
    },
    colors: {
      light: designTokens.fonts.textLight.color,
      dark: designTokens.fonts.textDark.color,
      gray: designTokens.fonts.textGray.color,
      success: designTokens.fonts.textSuccess.color,
      warning: designTokens.fonts.textWarning.color,
      danger: designTokens.fonts.textDanger.color,
      info: designTokens.fonts.textInfo.color,
      primary: designTokens.fonts.textPrimary.color,
      secondary: designTokens.fonts.textSecondary.color,
    },
    textColors: {
      light: designTokens.fonts.textLight.color,
      dark: designTokens.fonts.textLight.color,
      gray: designTokens.fonts.textLight.color,
      success: designTokens.fonts.textLight.color,
      warning: designTokens.fonts.textLight.color,
      danger: designTokens.fonts.textLight.color,
      info: designTokens.fonts.textLight.color,
      primary: designTokens.fonts.textLight.color,
      secondary: designTokens.fonts.textLight.color,
      neutral1: designTokens.fonts.textDark.color,
      neutral2: designTokens.fonts.textDark.color,
      neutral3: designTokens.fonts.textDark.color,
      neutral4: designTokens.fonts.textDark.color,
      neutral5: designTokens.fonts.textDark.color,
      neutral6: designTokens.fonts.textDark.color,
      accent1: designTokens.fonts.textLight.color,
      accent2: designTokens.fonts.textLight.color,
      accent3: designTokens.fonts.textLight.color,
      accent4: designTokens.fonts.textLight.color,
      accent5: designTokens.fonts.textLight.color,
      accent6: designTokens.fonts.textLight.color,
    },
  },
  icons: {
    iconFont: designTokens.fonts.iconFont.fontFamily,
    sizes: {
      small: '16px',
      medium: '22px',
      large: '30px',
    },
    weights: {
      light: designTokens.fonts.iconLight.fontWeight,
      solid: designTokens.fonts.iconSolid.fontWeight,
    },
  },
  values: {
    button: {
      sideMarginSmall: '15px',
      sideMarginMedium: '20px',
    },
    form: {
      borderRadius: '4px',
    },
    outlines: {
      outline: '1px solid',
      outlineThick: '3px solid',
    },
  },
  boxShadow: '0 0 8px 0 rgba(0,0,0,0.14)',

  colorPrimary: colors.primary, //269796
  colorPrimaryHover: ColorLuminance(colors.primary, 0.4),
  colorPrimaryHoverSearchRowHighlight: '#B2E9E9',
  colorPrimaryText: colors.white,
  colorSecondary: colors.secondary, //29404f
  colorSecondaryText: colors.white,
  colorSecondaryHover: ColorLuminance(colors.secondary, 0.4),
  colorBodyBackground: '#e4e5e6',
  colorDanger: colors.danger, //'#f86c6b',
  colorDangerHover: ColorLuminance(colors.danger, 0.4),
  colorDefault: colors.default,
  colorDefaultHover: ColorLuminance(colors.default, 0.4),
  colorSuccess: colors.success, // cant change green until sass is gone! #4fbe79
  colorSuccessHover: ColorLuminance(colors.success, 0.4),
  colorInfo: colors.info,
  colorInfoText: colors.white,
  colorInfoHover: ColorLuminance(colors.info, 0.4),
  colorWarning: colors.warning,
  colorWarningText: colors.white,
  colorWarningHover: ColorLuminance(colors.warning, 0.4),
  colorWhite: colors.white, // didn't want to name colorWhite as convention because might be confused with actually white
  colorWhiteHover: ColorLuminance(colors.white, 0.4),
  disabledOpacity: 0.4,
}

export const darkTheme = {
  ...lightTheme,
  name: 'dark',
  backgroundColor: '#000', //storybook background color
  // here's one color overridden so we can see the difference between themes.
  colorPrimary: '#2193F3', // old way
  colors: {
    ...lightTheme.colors,
    primary: '#2193F3', // new way
    // ....
  },
}

export default lightTheme
// $blue:    #007bff !default; #2193F3
// $indigo:  #6610f2 !default;
// $purple:  #6f42c1 !default;
// $pink:    #e83e8c !default;
// $red:     #dc3545 !default;
// $orange:  #fd7e14 !default;
// $yellow:  #ffc107 !default;
// $green:   #28a745 !default;
// $teal:    #20c997 !default;
// $cyan:    #17a2b8 !default;

// $colors: (
//   blue: $blue,
//   indigo: $indigo,
//   purple: $purple,
//   pink: $pink,
//   red: $red,
//   orange: $orange,
//   yellow: $yellow,
//   green: $green,
//   teal: $teal,
//   cyan: $cyan,
//   white: $white,
//   gray: $gray-600,
//   gray-dark: $gray-800
// ) !default;

// $theme-colors: (
//   primary: $blue,
//   secondary: $gray-600,
//   success: $green,
//   info: $cyan,
//   warning: $yellow,
//   danger: $red,
//   light: $gray-100,
//   dark: $gray-800
// ) !default;