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', }) |