prisme-components-svelte/src/theme.js

Svelte components for the Prisme Design System

const theme = {
  breakpoints: [32, 40, 48, 64].map(n => `${n}em`),

  primary: {
    color: `#eeeeee`,
    light: `#ffffff`,
    dark: `#bcbcbc`
  },

  secondary: {
    color: `#212121`,
    light: `#484848`,
    dark: `#bcbcbc`,
  },

  error: `#dd2c00`,

  boxShadows: [
    `0 0 2px 0 rgba(0,0,0,.08),0 1px 4px 0 rgba(0,0,0,.16)`,
    `0 0 2px 0 rgba(0,0,0,.08),0 2px 8px 0 rgba(0,0,0,.16)`,
    `0 0 2px 0 rgba(0,0,0,.08),0 4px 16px 0 rgba(0,0,0,.16)`,
    `0 0 2px 0 rgba(0,0,0,.08),0 8px 32px 0 rgba(0,0,0,.16)`
  ],

  font: `Roboto`,

  headline: {
    fontFamily: `'Fira Sans', Arial, Helvetica, sans-serif`,
    fontSize : `58px`,
  },

  title: {
    fontFamily: `'Fira Sans', Arial, Helvetica, sans-serif`,
    fontSize : `36px`,
  },

  text: {
    fontFamily: `Roboto, Arial, Helvetica, sans-serif`,
    fontSize : `22px`,
  },

  sub: {
    fontFamily: `Roboto, Arial, Helvetica, sans-serif`,
    fontSize : `14px`,
  },
};

export default theme;