@navinc/base-react-components/src/themes/nav-purple.ts

Nav's Pattern Library

import { Property } from 'csstype'

// Rebrand colors:

// Primary
const navPurple100 = '#FFF5FF'
const navPurple200 = '#FAEAFA'
const navPurple300 = '#F5D5F6'
const navPurple400 = '#894487'
const navPurple500 = '#6E2C6D'
const navPurple600 = '#541355'
const navPurple700 = '#37003A'

// Neutral
const navNeutral0 = '#FFFFFF'
const navNeutral100 = '#EEECED'
const navNeutral200 = '#DDD9DB'
const navNeutral300 = '#CFC9CC'
const navNeutral400 = '#605058'
const navNeutral500 = '#3E2B36'
const navNeutral600 = '#18001A'

// Surface
const navTan100 = '#FAFAF5'
const navTan200 = '#F7F3E9'
const navTan300 = '#F1E9DA'
const navTan400 = '#E3D3B5'
const navTan500 = '#C7A76B'
const navTan600 = '#976041'

// Accent
const navOrange100 = '#FFF7F5'
const navOrange200 = '#FFEDE9'
const navOrange300 = '#FFDAD2'
const navOrange400 = '#F79680'
const navOrange500 = '#F47356'
const navOrange600 = '#F2502C'
const navOrange700 = '#CE3C1C'
const navGreen100 = '#F9FBFB'
const navGreen200 = '#E7F3F2'
const navGreen300 = '#C1E1DC'
const navGreen400 = '#14CCCC'
const navGreen500 = '#00A7AF'
const navGreen600 = '#007980'
const navGreen700 = '#004B4F'

// Status
const navRed100 = '#FFF5F5'
const navRed200 = '#FEE6E6'
const navRed300 = '#FED1D1'
const navRed400 = '#F75656'
const navRed500 = '#EE3030'
const navRed600 = '#D50707'
const navRed700 = '#8B0404'

// old colors:
const navBlue = '#006EFA'
const oceanBoat = '#0075BC'
const belugaWhite = '#FFFFFF'
const scuttleGray100 = '#F5F6F7'
const scuttleGray200 = '#ECEDEF'
const scuttleGray300 = '#D0D2D6'
const scuttleGray400 = '#919499'
const scuttleGray500 = '#6E717A'
const scuttleGray600 = '#06142A'
const mermaidGreen100 = '#E5FBF8'
const mermaidGreen200 = '#CBF7F1'
const mermaidGreen300 = '#A9F2E7'
const mermaidGreen400 = '#87EDDE'
const mermaidGreen500 = '#53E5D0'
const bubbleBlue100 = '#F2F8FF'
const bubbleBlue200 = '#E6F1FF'
const bubbleBlue300 = '#99C5FD'
const bubbleBlue400 = '#66A8FC'
const bubbleBlue500 = '#0069F0'
const sebastianRed100 = '#FFF2F8'
const sebastianRed200 = '#E1030A'
const flounderYellow100 = '#FFF6EC'
const flounderYellow200 = '#FFC90C'
const seaturtleGreen100 = '#E8FFF5'
const seaturtleGreen200 = '#36B37E'
const lightRed = '#E87979'
const tumbleweed = '#EFA88C'
const tumbleweed100 = '#F8D9CD'
const seaFoam100 = '#D0F0E1'
const seaFoam = '#96DDBC'

const themeColors = {
  // Primary shades
  navPrimary: navPurple600,
  navPrimary100: navPurple100,
  navPrimary200: navPurple200,
  navPrimary300: navPurple300,
  navPrimary400: navPurple400,
  navPrimary500: navPurple500,
  navPrimary700: navPurple700,

  // Secondary shades
  navSecondary: navTan200,
  navSecondary100: navTan100,
  navSecondary300: navTan300,
  navSecondary400: navTan400,
  navSecondary500: navTan500,
  navSecondary600: navTan600,

  // Neutral shades
  navNeutralLight: navNeutral0,
  navNeutralDark: navNeutral600,
  navNeutral100,
  navNeutral200,
  navNeutral300,
  navNeutral400,
  navNeutral500,

  // Accent shades
  navAccent: navOrange600,
  navAccent100: navOrange100,
  navAccent200: navOrange200,
  navAccent300: navOrange300,
  navAccent400: navOrange400,
  navAccent500: navOrange500,
  navAccent700: navOrange700,

  // Status positive shades
  navStatusPositive: navGreen600,
  navStatusPositive100: navGreen100,
  navStatusPositive200: navGreen200,
  navStatusPositive300: navGreen300,
  navStatusPositive400: navGreen400,
  navStatusPositive500: navGreen500,
  navStatusPositive700: navGreen700,

  // Status negative shades
  navStatusNegative: navRed600,
  navStatusNegative100: navRed100,
  navStatusNegative200: navRed200,
  navStatusNegative300: navRed300,
  navStatusNegative400: navRed400,
  navStatusNegative500: navRed500,
  navStatusNegative700: navRed700,

  // Primary Colors:
  navBlue: navPurple600,
  azure: navPurple600,
  oceanBoat,
  belugaWhite,
  white: belugaWhite,

  // New Gray Shades:
  scuttleGray100,
  scuttleGray200,
  scuttleGray300,
  scuttleGray400,
  scuttleGray500,
  scuttleGray600,

  // Neutral Grays:
  neutral100: scuttleGray100,
  neutral200: scuttleGray200,
  neutral300: scuttleGray300,
  neutral400: scuttleGray500,
  neutral500: scuttleGray600,

  // General Palette for Other Colors
  mermaidGreen100,
  mermaidGreen200,
  mermaidGreen300,
  mermaidGreen400,
  mermaidGreen500,

  // Secondary Colors - TODO Deprecate
  paleGold100: mermaidGreen100,
  paleGold200: mermaidGreen200,
  paleGold300: mermaidGreen300,
  paleGold400: mermaidGreen400,
  paleGold500: mermaidGreen500,

  rose100: mermaidGreen100,
  rose200: mermaidGreen200,
  rose300: mermaidGreen300,
  rose400: mermaidGreen400,
  rose500: mermaidGreen500,

  greenSheen100: mermaidGreen100,
  greenSheen200: mermaidGreen200,
  greenSheen300: mermaidGreen300,
  greenSheen400: mermaidGreen400,
  greenSheen500: mermaidGreen500,

  mossGreen100: mermaidGreen100,
  mossGreen200: mermaidGreen200,
  mossGreen300: mermaidGreen300,
  mossGreen400: mermaidGreen400,
  mossGreen500: mermaidGreen500,

  tan100: mermaidGreen100,
  tan200: mermaidGreen200,
  tan300: mermaidGreen300,
  tan400: mermaidGreen400,
  tan500: mermaidGreen500,

  timberwolf100: mermaidGreen100,
  timberwolf200: mermaidGreen200,
  timberwolf300: mermaidGreen300,
  timberwolf400: mermaidGreen400,
  timberwolf500: mermaidGreen500,

  gainsboro100: mermaidGreen100,
  gainsboro200: mermaidGreen200,
  gainsboro300: mermaidGreen300,
  gainsboro400: mermaidGreen400,
  gainsboro500: mermaidGreen500,

  // Secondary Blue Shades
  bubbleBlue100,
  bubbleBlue200,
  bubbleBlue300,
  bubbleBlue400,
  bubbleBlue500,

  pastelBlue100: bubbleBlue100,
  pastelBlue200: bubbleBlue200,
  pastelBlue300: bubbleBlue300,
  pastelBlue400: bubbleBlue400,
  pastelBlue500: bubbleBlue500,

  lightBlue100: bubbleBlue100,
  lightBlue200: bubbleBlue200,
  lightBlue300: bubbleBlue300,
  lightBlue400: bubbleBlue400,
  lightBlue500: bubbleBlue500,

  // Transparent Colors: (For animations)
  transparentWhite: 'rgba(255, 255, 255, 0)',
  transparentBlack: 'rgba(0, 0, 0, 0)',
  transparentRed: 'rgba(225, 3, 10, 0.25)',

  // Status Colors - V2
  sebastianRed100,
  sebastianRed200,
  flounderYellow100,
  flounderYellow200,
  seaturtleGreen100,
  seaturtleGreen200,

  // Status Colors:
  copperRed100: sebastianRed100,
  copperRed200: sebastianRed200,
  lightRed, // TODO need to remove
  tumbleweed, // TODO need to remove
  tumbleweed100, // TODO need to remove
  tuscan100: flounderYellow100,
  tuscan200: flounderYellow200,
  seaFoam100, // TODO need to remove
  seaFoam, // TODO need to remove
  oceanGreen100: seaturtleGreen100,
  oceanGreen200: seaturtleGreen200,

  // By Use Case:
  good: seaturtleGreen200,
  semigood: seaFoam,
  fair: flounderYellow200,
  semipoor: tumbleweed,
  poor: sebastianRed200,
} as const

const statusColors = {
  good: {
    backgroundColor: seaturtleGreen100,
    color: themeColors.good,
  },
  semigood: {
    backgroundColor: seaFoam100,
    color: themeColors.semigood,
  },
  fair: {
    backgroundColor: flounderYellow100,
    color: themeColors.fair,
  },
  semipoor: {
    backgroundColor: tumbleweed100,
    color: themeColors.semipoor,
  },
  poor: {
    backgroundColor: sebastianRed100,
    color: themeColors.poor,
  },
} as const

export const theme = {
  // This is used to identify which theme is currently being used
  name: 'nav-purple',

  fontPrimary: 'Manrope, sans-serif;',
  fontSecondary: 'Cosmica, sans-serif;',

  ...themeColors,
  statusColors,

  colorRainbow: [bubbleBlue400, mermaidGreen300, seaFoam100, flounderYellow200, tumbleweed, themeColors.neutral300],

  success: themeColors.oceanGreen200,
  error: themeColors.copperRed200,
  warning: themeColors.copperRed200,
  notice: themeColors.azure,

  pagebg: themeColors.neutral100,
  border: themeColors.navNeutral300,

  // Grid related things
  gu: (units = 0) => `${units * 8}px`,
  contentWidth: 696,
  goldenRatio: (1 + Math.sqrt(5)) / 2,

  // Media Queries
  media: {
    small: '600px',
    large: '1440px',
  } as const,

  forLargerThanPhone: 'min-width: 600px',

  materialTransitionTiming: 'cubic-bezier(0.4, 0.0, 0.2, 1)',

  focusOutline: `4px solid ${navGreen500}`,
} as const

export type Theme = typeof theme
export type StatusColor = keyof typeof statusColors
export type ThemeColor = keyof typeof themeColors

export const themeColorOrCssColor = (value: ThemeColor | Property.Color): Property.Color =>
  value in themeColors ? themeColors[value] : value