All files / example myDesignSystem.js

100% Statements 5/5
100% Branches 0/0
100% Functions 0/0
100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107        1x         1x               1x         1x   1x                                                                                                                                                                    
import colorPalette from './colorPalette'
import DesignSystem from '../src'
import ms from 'modularscale-js'
 
const modularscale = {
  base: 20,
  ratio: 1.5,
}
 
const fontFamily = {
  system:
    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans"',
  sans: '"Helvetica Neue", Helvetica, Arial, sans-serif',
  serif: 'Georgia, "Times New Roman", Times, serif',
  mono: 'Menlo, Monaco, "Courier New", monospace',
}
 
const transitions = {
  duration: '300ms',
  timing: 'cubic-bezier(0.77, 0, 0.175, 1)',
}
 
const palette = colorPalette
 
export const myDesignSystem = {
  type: {
    baseFontSize: '20px',
 
    sizes: {
      xs: ms(-2, modularscale),
      s: ms(-1, modularscale),
      base: ms(0, modularscale), // [default] p, h5, h6
      m: ms(1, modularscale), // h4
      l: ms(2, modularscale), // h3
      xl: ms(3, modularscale), // h2
      xxl: ms(4, modularscale), // h1
    },
 
    fontFamily,
    fontFamilyBase: fontFamily.system,
    fontFamilyHeadings: fontFamily.mono,
 
    lineHeight: {
      headings: 1.1,
    },
 
    fontWeight: {
      normal: 300, // Useful to set here if using anything other than `normal`
      bold: 'bold', // Useful to set here when bold webfonts come as 400 font-weight.
      headings: 'bold', // instead of browser default, bold
    },
  },
 
  colors: {
    colorPalette: palette,
 
    brand: {
      red: '#e82219',
      deeporange: '#ff7200',
      orange: '#ff9500',
      green: '#c4d000',
      teal: '#1aa5c8',
      navy: '#0052da',
    },
  },
 
  breakpoints: {
    s: 300,
    m: 500,
    l: 800,
  },
 
  zIndex: {
    low: 10,
    mid: 100,
    high: 1000,
  },
 
  spacing: {
    baseline: 20,
    padding: '0.3em',
    scale: [0, 8, 16, 24, 32, 40],
  },
 
  layout: {
    gutter: 20,
    maxWidth: 1200,
    grid: {
      columnCount: 12,
    },
  },
 
  transition: {
    default: {
      duration: transitions.duration,
      timing: transitions.timing,
      transition: `all ${transitions.duration} ${transitions.timing}`,
    },
  },
 
  borderRadius: '0.3em',
}
 
export default new DesignSystem(myDesignSystem, {
  fontSizeUnit: 'rem',
})