@aesthetic/design-systems
Version:
Collection of design systems, including Aesthetic's.
201 lines (180 loc) • 4.04 kB
JavaScript
'use strict';
const core = require('@aesthetic/core');
/* Auto-generated by Aesthetic. Do not modify! */
const design = new core.Design('aesthetic', {
border: {
sm: {
radius: '0.14rem',
// 2px
width: '0.04rem' // 0.50px
},
df: {
radius: '0.21rem',
// 3px
width: '0.07rem' // 1px
},
lg: {
radius: '0.32rem',
// 4.50px
width: '0.14rem' // 2px
}
},
breakpoint: {
xs: {
query: 'screen and (min-width: 45.71em)',
querySize: 640,
rootLineHeight: 1.33,
rootTextSize: '14.94px'
},
sm: {
query: 'screen and (min-width: 68.57em)',
querySize: 960,
rootLineHeight: 1.42,
rootTextSize: '15.94px'
},
md: {
query: 'screen and (min-width: 91.43em)',
querySize: 1280,
rootLineHeight: 1.52,
rootTextSize: '17.01px'
},
lg: {
query: 'screen and (min-width: 114.29em)',
querySize: 1600,
rootLineHeight: 1.62,
rootTextSize: '18.15px'
},
xl: {
query: 'screen and (min-width: 137.14em)',
querySize: 1920,
rootLineHeight: 1.73,
rootTextSize: '19.36px'
}
},
heading: {
l1: {
letterSpacing: '1.05px',
lineHeight: 2.7,
size: '3.49rem' // 48.83px
},
l2: {
letterSpacing: '0.79px',
lineHeight: 2.4,
size: '2.79rem' // 39.06px
},
l3: {
letterSpacing: '0.59px',
lineHeight: 2.14,
size: '2.23rem' // 31.25px
},
l4: {
letterSpacing: '0.44px',
lineHeight: 1.9,
size: '1.79rem' // 25px
},
l5: {
letterSpacing: '0.33px',
lineHeight: 1.69,
size: '1.43rem' // 20px
},
l6: {
letterSpacing: '0.25px',
lineHeight: 1.5,
size: '1.14rem' // 16px
}
},
shadow: {
xs: {
x: '0rem',
// 0px
y: '0.14rem',
// 2px
blur: '0.14rem',
// 2px
spread: '0rem' // 0px
},
sm: {
x: '0rem',
// 0px
y: '0.23rem',
// 3.24px
blur: '0.25rem',
// 3.50px
spread: '0rem' // 0px
},
md: {
x: '0rem',
// 0px
y: '0.37rem',
// 5.24px
blur: '0.44rem',
// 6.13px
spread: '0rem' // 0px
},
lg: {
x: '0rem',
// 0px
y: '0.61rem',
// 8.47px
blur: '0.77rem',
// 10.72px
spread: '0rem' // 0px
},
xl: {
x: '0rem',
// 0px
y: '0.98rem',
// 13.71px
blur: '1.34rem',
// 18.76px
spread: '0rem' // 0px
}
},
spacing: {
xxs: '0.16rem',
// 2.19px
xs: '0.31rem',
// 4.38px
sm: '0.63rem',
// 8.75px
df: '1.25rem',
// 17.50px
md: '1.88rem',
// 26.25px
lg: '2.50rem',
// 35px
xl: '3.75rem',
// 52.50px
xxl: '5rem',
// 70px
type: 'vertical-rhythm',
unit: 17.5
},
text: {
sm: {
lineHeight: 1.25,
size: '0.89rem' // 12.44px
},
df: {
lineHeight: 1.25,
size: '1rem' // 14px
},
lg: {
lineHeight: 1.25,
size: '1.13rem' // 15.75px
}
},
typography: {
font: {
heading: 'Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
locale: {},
monospace: 'Menlo, Monaco, Consolas, "Lucida Console", "Liberation Mono", "Courier New", monospace',
text: 'Karla, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
system: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
},
rootLineHeight: 1.25,
rootTextSize: '14px'
}
});
module.exports = design;
//# sourceMappingURL=index.js.map