@barguide/style-guide/src/variables/theme.ts

BarGuide.io | CSS Style Guide

/* eslint-disable sort-keys-fix/sort-keys-fix */

import { color } from './color';

export interface Theme {
  'theme-background': string;
  'theme-background-light': string;
  'theme-background-lighter': string;
  'theme-background-transparent': string;
  'theme-border': string;
  'theme-border-input': string;
  'theme-copy': string;
  'theme-copy-light': string;
}

export const light: Theme = {
  'theme-background': `#f5f8fa`,
  'theme-background-light': color.white,
  'theme-background-lighter': color.white,
  'theme-background-transparent': `rgb(255 255 255 / 85%)`,
  'theme-border': `#cfd7dd`,
  'theme-border-input': `#cfd7dd`,
  'theme-copy': `#24292e`,
  'theme-copy-light': `#57606a`
};

export const dark: Theme = {
  'theme-background': `#0e1117`,
  'theme-background-light': `#161b22`,
  'theme-background-lighter': `#161b22`,
  'theme-background-transparent': 'rgb(0 0 0 / 85%)',
  'theme-border': `#30363c`,
  'theme-border-input': `#30363c`,
  'theme-copy': `#c8d1d9`,
  'theme-copy-light': `#8b949e`
};

export const theme = {
  dark,
  light
};