@navinc/base-react-components/dist/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)';
//# sourceMappingURL=theme.js.map