theme.ts

// this theme follows the System UI Theme Specification
// Ref: https://system-ui.com/theme

import { colors } from './colors';
import { fonts, fontSizes, fontWeights } from './typography';

const theme = {
  colors,

  fonts,
  fontSizes,
  fontWeights,

  // we use a 4 point grid
  space: [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40], // for margin + padding
  sizes: [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40], // for width + height

  // transition speeds in ms
  speeds: [0, '75ms', '100ms', '150ms', '200ms', '300ms', '500ms'],

  radii: {
    small: 2,
    medium: 4,
    large: 16,
    round: '50%',
  },

  shadows: {
    // this part is ugly, this can be improved.
    // bonus: these are terrible names
    active: `inset 0px -2px 0px ${colors.blues[300]}`,
    underline: `inset 0px -2px 0px ${colors.grays[100] + '1a'}`,
    fadeunder: `inset 0px 8px 8px 0px ${colors.grays[700] + 'cc'}`,
  },
};

export default theme;