@navinc/base-react-components/src/theme.js

Nav's Pattern Library

// Primary Colors:
export const navBlue = '#006EFA'
export const azure = navBlue
export const oceanBoat = '#0075BC'
export const belugaWhite = '#FFFFFF'
export const white = belugaWhite

// New Gray Shades:
export const scuttleGray100 = '#F5F6F7'
export const scuttleGray200 = '#ECEDEF'
export const scuttleGray300 = '#D0D2D6'
export const scuttleGray400 = '#919499'
export const scuttleGray500 = '#70727B'
export const scuttleGray600 = '#06142A'

// Neutral Grays:
export const neutral100 = scuttleGray100
export const neutral200 = scuttleGray200
export const neutral300 = scuttleGray300
export const neutral400 = scuttleGray500
export const neutral500 = scuttleGray600

// General Palette for Other Colors
export const mermaidGreen100 = '#E5FBF8'
export const mermaidGreen200 = '#CBF7F1'
export const mermaidGreen300 = '#A9F2E7'
export const mermaidGreen400 = '#87EDDE'
export const mermaidGreen500 = '#53E5D0'

// Secondary Colors - TODO Deprecate
export const paleGold100 = mermaidGreen100
export const paleGold200 = mermaidGreen200
export const paleGold300 = mermaidGreen300
export const paleGold400 = mermaidGreen400
export const paleGold500 = mermaidGreen500

export const dustStorm100 = mermaidGreen100
export const dustStorm200 = mermaidGreen200
export const dustStorm300 = mermaidGreen300
export const dustStorm400 = mermaidGreen400
export const dustStorm500 = mermaidGreen500

export const rose100 = mermaidGreen100
export const rose200 = mermaidGreen200
export const rose300 = mermaidGreen300
export const rose400 = mermaidGreen400
export const rose500 = mermaidGreen500

export const lavender100 = mermaidGreen100
export const lavender200 = mermaidGreen200
export const lavender300 = mermaidGreen300
export const lavender400 = mermaidGreen400
export const lavender500 = mermaidGreen500

export const wildPurple100 = mermaidGreen100
export const wildPurple200 = mermaidGreen200
export const wildPurple300 = mermaidGreen300
export const wildPurple400 = mermaidGreen400
export const wildPurple500 = mermaidGreen500

export const greenSheen100 = mermaidGreen100
export const greenSheen200 = mermaidGreen200
export const greenSheen300 = mermaidGreen300
export const greenSheen400 = mermaidGreen400
export const greenSheen500 = mermaidGreen500

export const mossGreen100 = mermaidGreen100
export const mossGreen200 = mermaidGreen200
export const mossGreen300 = mermaidGreen300
export const mossGreen400 = mermaidGreen400
export const mossGreen500 = mermaidGreen500

export const tan100 = mermaidGreen100
export const tan200 = mermaidGreen200
export const tan300 = mermaidGreen300
export const tan400 = mermaidGreen400
export const tan500 = mermaidGreen500

export const timberwolf100 = mermaidGreen100
export const timberwolf200 = mermaidGreen200
export const timberwolf300 = mermaidGreen300
export const timberwolf400 = mermaidGreen400
export const timberwolf500 = mermaidGreen500

export const gainsboro100 = mermaidGreen100
export const gainsboro200 = mermaidGreen200
export const gainsboro300 = mermaidGreen300
export const gainsboro400 = mermaidGreen400
export const gainsboro500 = mermaidGreen500

// Secondary Blue Shades
export const bubbleBlue100 = '#F2F8FF'
export const bubbleBlue200 = '#E6F1FF'
export const bubbleBlue300 = '#99C5FD'
export const bubbleBlue400 = '#66A8FC'
export const bubbleBlue500 = '#006AF0'

export const pastelBlue100 = bubbleBlue100
export const pastelBlue200 = bubbleBlue200
export const pastelBlue300 = bubbleBlue300
export const pastelBlue400 = bubbleBlue400
export const pastelBlue500 = bubbleBlue500

export const lightBlue100 = bubbleBlue100
export const lightBlue200 = bubbleBlue200
export const lightBlue300 = bubbleBlue300
export const lightBlue400 = bubbleBlue400
export const lightBlue500 = bubbleBlue500

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

// Status Colors - V2
export const sebastianRed100 = '#FFF2F8'
export const sebastianRed200 = '#E1030A'
export const flounderYellow100 = '#FFF6EC'
export const flounderYellow200 = '#FFC90C'
export const seaturtleGreen100 = '#E8FFF5'
export const seaturtleGreen200 = '#36B37E'

// Status Colors:
export const copperRed100 = sebastianRed100
export const copperRed200 = sebastianRed200
export const lightRed = '#E87979' // TODO need to remove
export const tumbleweed = '#EFA88C' // TODO need to remove
export const tumbleweed100 = '#F8D9CD' // TODO need to remove
export const tuscan100 = flounderYellow100
export const tuscan200 = flounderYellow200
export const seaFoam100 = '#D0F0E1' // TODO need to remove
export const seaFoam = '#96DDBC' // TODO need to remove
export const oceanGreen100 = seaturtleGreen100
export const oceanGreen200 = seaturtleGreen200

// By Use Case:
export const good = seaturtleGreen200
export const semigood = seaFoam
export const fair = flounderYellow200
export const semipoor = tumbleweed
export const poor = sebastianRed200

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

export const colorRainbow = [pastelBlue400, mermaidGreen300, seaFoam100, flounderYellow200, tumbleweed, neutral300]

export const success = oceanGreen200
export const error = copperRed200
export const warning = copperRed200
export const notice = azure

export const pagebg = neutral100
export const border = neutral300

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

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

export const forLargerThanPhone = 'min-width: 600px'

export const materialTransitionTiming = 'cubic-bezier(0.4, 0.0, 0.2, 1)'