atomicCSSConfig.js

const getColor = require('./utils/colors');

const sizes = {
	's-6': '8px',
	's-5': '9px',
	's-4': '11px',
	's-3': '12px',
	's-2': '13px',
	's-1': '15px',
	s0: '16px',
	s1: '19px',
	s2: '21px',
	s3: '24px',
	s4: '28px',
	s5: '32px',
	s6: '48px',
	s7: '62px',
	s8: '80px',
	s9: '96px',
	'ns-6': '-8px',
	'ns-5': '-9px',
	'ns-4': '-11px',
	'ns-3': '-12px',
	'ns-2': '-13px',
	'ns-1': '-15px',
	ns0: '-16px',
	ns1: '-19px',
	ns2: '-21px',
	ns3: '-24px',
	ns4: '-28px',
	ns5: '-32px',
	ns6: '-48px',
	ns7: '-62px',
	ns8: '-80px',
	ns9: '-96px',
};

const colors = {
	currentColor: 'currentColor',
	burnt: '#fb8f58',
	burntl: '#feeae0',
	spacel: '#bbcaca',
	space: '#063d40',
	spaced: '#031718',
};

const color = getColor(colors);

const getPatternForColor = c =>
	`url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><g fill="${color(
		c
	)}"><path fill-rule="evenodd" d="M11 0l5 20H6l5-20zm42 31a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM0 72h40v4H0v-4zm0-8h31v4H0v-4zm20-16h20v4H20v-4zM0 56h40v4H0v-4zm63-25a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM53 41a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-30 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-28-8a5 5 0 0 0-10 0h10zm10 0a5 5 0 0 1-10 0h10zM56 5a5 5 0 0 0-10 0h10zm10 0a5 5 0 0 1-10 0h10zm-3 46a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM21 0l5 20H16l5-20zm43 64v-4h-4v4h-4v4h4v4h4v-4h4v-4h-4zM36 13h4v4h-4v-4zm4 4h4v4h-4v-4zm-4 4h4v4h-4v-4zm8-8h4v4h-4v-4z"/></g></svg>')`;

const fonts = {
	sans:
		'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
	mono: 'monospace',
};

module.exports = {
	cssDest: './src/styles/main.css',
	configs: {
		breakPoints: {
			xs: '@media(min-width:350px)',
			sm: '@media(min-width:700px)',
			md: '@media(min-width:1000px)',
			lg: '@media(min-width:1200px)',
		},
		custom: Object.assign(sizes, colors, fonts, {
			release: 'calc(-50vw + 50%)',
			allColorFade:
				'border-color .4s ease-in-out, color .2s ease-in-out, background .2s ease-in-out',
			colorFade: 'color .2s ease-in-out',
			BcolorFade: 'border-color .2s ease-in-out',
			'forest-pattern-lll': getPatternForColor('white.1'),
			'forest-pattern-ll': getPatternForColor('white.25'),
			'forest-pattern-l': getPatternForColor('white.5'),
			'forest-pattern-ddd': getPatternForColor('black.5'),
			'forest-pattern-dd': getPatternForColor('black.25'),
			'forest-pattern-d': getPatternForColor('black.1'),
		}),
		classNames: [],
	},
};