@indoqa/style-system
Version:
A style system for React with Typescript typed theme support and several base components.
81 lines • 3.16 kB
JavaScript
const typeScaleFactor = 1.333;
const typeScaleBase = 14;
export const typeScale = (level) => typeScaleBase + typeScaleFactor * level;
const createShadowValue = (shadow) => {
return `${shadow.offsetX}px ${shadow.offsetY}px ${shadow.blur}px ${shadow.spread}px ${shadow.color}`;
};
export const createBoxShadow = (shadow1, shadow2, shadow3) => {
return `${createShadowValue(shadow1)},${createShadowValue(shadow2)},${createShadowValue(shadow3)}`;
};
const createShadow = (offsetX, offsetY, blur, spread, color) => ({
offsetX,
offsetY,
blur,
spread,
color,
});
const createElevationShadow1 = (offsetY, blur, spread) => createShadow(0, offsetY, blur, spread, 'rgba(0,0,0,0.2)');
const createElevationShadow2 = (offsetY, blur, spread) => createShadow(0, offsetY, blur, spread, 'rgba(0,0,0,0.14)');
const createElevationShadow3 = (offsetY, blur, spread) => createShadow(0, offsetY, blur, spread, 'rgba(0,0,0,0.12)');
export const systemFonts = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, ' +
'sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
export const monoSystemFonts = 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
export const breakpoints = {
tablet: { minWidth: '768px', sort: 1 },
desktop: { minWidth: '992px', sort: 2 },
largeDesktop: { minWidth: '1400px', sort: 3 },
};
export const baseTheme = {
fontSizes: {
text: typeScale(0),
big: typeScale(1),
veryBig: typeScale(2),
small: typeScale(-1),
verySmall: typeScale(-2),
},
fontStyles: {
base: {
fontFamily: systemFonts,
lineHeight: 1.3,
fontWeight: 400,
},
alt: {
fontFamily: systemFonts,
lineHeight: 1.3,
fontWeight: 700,
},
mono: {
fontFamily: monoSystemFonts,
color: '#000000',
},
},
colors: {
text: '#000000',
},
spacing: {
space0: 0,
space1: '0.25rem',
space2: '0.5rem',
space3: '0.75rem',
space4: '1rem',
space5: '1.5rem',
space6: '2rem',
space7: '2.5rem',
space8: '3rem',
space9: '4rem',
},
zIndexes: {
default: 0,
absolute: 1,
},
breakpoints,
shadows: {
elevation0: 'none',
elevation1: createBoxShadow(createElevationShadow1(1, 3, 0), createElevationShadow2(1, 1, 0), createElevationShadow3(2, 1, -1)),
elevation2: createBoxShadow(createElevationShadow1(2, 4, -1), createElevationShadow2(4, 5, 0), createElevationShadow3(1, 10, 0)),
elevation3: createBoxShadow(createElevationShadow1(4, 5, -2), createElevationShadow2(7, 10, 1), createElevationShadow3(2, 16, 1)),
elevation4: createBoxShadow(createElevationShadow1(6, 6, -3), createElevationShadow2(10, 14, 1), createElevationShadow3(4, 18, 3)),
elevation5: createBoxShadow(createElevationShadow1(8, 9, -5), createElevationShadow2(15, 22, 2), createElevationShadow3(6, 28, 5)),
},
};
//# sourceMappingURL=baseTheme.js.map