slate/common/constants.js
2020-11-10 17:48:36 -08:00

117 lines
2.7 KiB
JavaScript

export const values = {
version: "1.0.0",
sds: "0.1.0",
};
export const sizes = {
mobile: 768,
navigation: 288,
sidebar: 416,
header: 72,
tablet: 960,
desktop: 1024,
topOffset: 16, //NOTE(martina): Pushes UI down. 16 when there is a persistent announcement banner, 0 otherwise
};
export const system = {
foreground: "#f8f8f8",
gray: "#e5e5e5",
lightBorder: "#ececec",
border: "#d8d8d8",
darkGray: "#b2b2b2",
grayBlack: "#666666",
pitchBlack: "#0c0c0c",
brand: "#0666bb",
link: "#2935ff",
slate: "#27292e",
moonstone: "#807d78",
wall: "#cfced3",
wallLight: "#F1F0F2",
newBlue: "#043D96",
newGreen: "#377749",
newYellow: "#F2B256",
newRed: "#BE5234",
shadow: "rgba(15, 14, 18, 0.03)",
blue: "#0061BB",
green: "#006837",
yellow: "#FAB413",
red: "#C71313",
black: "#0F0E12",
bgGrayLight: "#F8F8F8",
bgGray: "#F2F2F2",
bgBlue: "#C0D8EE",
bgGreen: "#C0DACD",
bgYellow: "#FEEDC4",
bgRed: "#F1C4C4",
textGray: "#878688",
textGrayLight: "#C3C3C4",
textGrayDark: "#4B4A4D",
textBlack: "#0F0E12",
gray80: "#4B4A4D",
gray70: "#868688",
gray50: "#C3C3C4",
gray40: "#E5E5E5",
gray30: "#EBEBEB",
gray20: "#F2F2F2",
gray10: "#F8F8F8",
white: "#FFFFFF",
bgBlurGrayBlack: "rgba(15, 14, 18, 0.8)",
bgBlurBlack: "rgba(15, 14, 18, 0.9)",
};
export const shadow = {
light: "0 3px 6px 0 rgba(178, 178, 178, 0.15)",
medium: "0 8px 24px 0 rgba(178, 178, 178, 0.2)",
large: "0 12px 48px 0 rgba(178, 178, 178, 0.3)",
subtle: "0 1px 0 0 rgba(15, 14, 18, 0.04)",
};
export const zindex = {
navigation: 1,
body: 2,
sidebar: 5,
alert: 3,
header: 4,
modal: 6,
tooltip: 7,
};
export const font = {
text: `'inter-regular', -apple-system, BlinkMacSystemFont, arial, sans-serif`,
semiBold: `'inter-semi-bold', -apple-system, BlinkMacSystemFont, arial, sans-serif`,
medium: `'inter-medium', -apple-system, BlinkMacSystemFont, arial, sans-serif`,
mono: `'mono', monaco, monospace`,
monoBold: `'mono-bold', monaco, monospace`,
monoCode: `'fira-code-regular', mono, monospace`,
monoCodeBold: `'fira-code-bold', mono-bold, monospace`,
code: `'jet-brains-regular', mono, monospace`,
codeBold: `'jet-brains-bold', mono, monospace`,
};
export const typescale = {
lvlN1: `0.75rem`,
lvl0: `0.875rem`,
lvl1: `1rem`,
lvl2: `1.25rem`,
lvl3: `1.563rem`,
lvl4: `1.953rem`,
lvl5: `2.441rem`,
lvl6: `3.052rem`,
lvl7: `3.815rem`,
lvl8: `4.768rem`,
lvl9: `5.96rem`,
lvl10: `7.451rem`,
lvl11: `9.313rem`,
};
export const theme = {
foreground: system.white,
ctaBackground: system.brand,
pageBackground: system.foreground,
pageText: system.black,
};
export const gateways = {
ipfs: "https://slate.textile.io/ipfs",
};