All files / src/testData ds3.js

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

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        1x         1x                                                                                        
// options: modular-scale:true, fontSizeUnit:rem
import DesignSystem from '../index'
import ms from 'modularscale-js'
 
const modularscale = {
  base: [30],
  ratio: 1.5,
}
 
const DesignSystem3 = {
  type: {
    baseFontSize: '30px',
 
    sizes: {
      xs: `${ms(-2, modularscale)}px`,
      s: `${ms(-1, modularscale)}px`,
      base: `${ms(0, modularscale)}px`, // [default] p, h5, h6
      m: `${ms(1, modularscale)}px`, // h4
      l: `${ms(2, modularscale)}px`, // h3
      xl: `${ms(3, modularscale)}px`, // h2
      xxl: `${ms(4, modularscale)}px`, // h1
    },
  },
 
  colors: {
    colorPalette: {
      blue: {
        base: 'blue',
        dark: 'navyblue',
      },
    },
  },
 
  breakpoints: {
    s: '400px',
    m: 500,
    l: 800,
  },
 
  zIndex: {
    low: 10,
    mid: 100,
    high: 1000,
  },
 
  spacing: {
    scale: [0, 8, 16, 24, 32, 40],
  },
}
 
export default new DesignSystem(DesignSystem3, {
  fontSizeUnit: 'rem',
})