@navinc/base-react-components
Version:
Nav's Pattern Library
274 lines • 8.86 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.themeColorOrCssColor = exports.theme = void 0;
// 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: navBlue,
navPrimary100: navPurple100,
navPrimary200: bubbleBlue100,
navPrimary300: bubbleBlue200,
navPrimary400: bubbleBlue500,
navPrimary500: navPurple500,
navPrimary700: bubbleBlue300,
// 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: bubbleBlue400,
navStatusPositive700: navGreen700,
// Status negative shades
navStatusNegative: navRed600,
navStatusNegative100: navRed100,
navStatusNegative200: navRed200,
navStatusNegative300: navRed300,
navStatusNegative400: navRed400,
navStatusNegative500: navRed500,
navStatusNegative700: navRed700,
// Primary Colors:
navBlue,
azure: navBlue,
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,
tumbleweed,
tumbleweed100,
tuscan100: flounderYellow100,
tuscan200: flounderYellow200,
seaFoam100,
seaFoam,
oceanGreen100: seaturtleGreen100,
oceanGreen200: seaturtleGreen200,
// By Use Case:
good: seaturtleGreen200,
semigood: seaFoam,
fair: flounderYellow200,
semipoor: tumbleweed,
poor: sebastianRed200,
};
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,
},
};
exports.theme = Object.assign(Object.assign({
// This is used to identify which theme is currently being used
name: 'nav-blue', fontPrimary: 'postgrotesk, Roboto, Helvetica, sans-serif;', fontSecondary: 'postgrotesk, Averta, Helvetica, 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.neutral300,
// Grid related things
gu: (units = 0) => `${units * 8}px`, contentWidth: 696, goldenRatio: (1 + Math.sqrt(5)) / 2,
// Media Queries
media: {
small: '600px',
large: '1440px',
}, forLargerThanPhone: 'min-width: 600px', materialTransitionTiming: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
// No color or size here because we used the default browser outline in the past.
// This also doesn't use `initial` because that removes the browser's outline.
focusOutline: 'solid' });
const themeColorOrCssColor = (value) => value in themeColors ? themeColors[value] : value;
exports.themeColorOrCssColor = themeColorOrCssColor;
//# sourceMappingURL=nav-blue.js.map