slate/common/constants.js

export const values = {
  version: "0.1.0",
  sds: "0.1.0",
};

export const sizes = {
  mobile: 768,
  navigation: 288,
  sidebar: 416,
  header: 72,
};

export const zindex = {
  navigation: 1,
  sidebar: 2,
  header: 3,
  modal: 4,
  tooltip: 5,
};

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 = {
  lvl1: `1rem`,
  lvl2: `1.25rem`,
  lvl3: `1.563rem`,
  lvl4: `1.953rem`,
};

export const system = {
  white: "#ffffff",
  foreground: "#f7f7f7",
  gray: "#e5e5e5",
  border: "#d8d8d8",
  darkGray: "#b2b2b2",
  black: "#1b1f23",
  pitchBlack: "#0c0c0c",
  brand: "#0047FF",
  link: "#2935ff",
  green: "#28a745",
  yellow: " #FFC940",
  red: "#ff0000",
};

export const code = {};

export const theme = {
  foreground: system.white,
  ctaBackground: system.brand,
  pageBackground: system.foreground,
  pageText: system.black,
};