@aesthetic/design-systems/src/material/index.ts

Collection of design systems, including Aesthetic's.

/* Auto-generated by Aesthetic. Do not modify! */
/* eslint-disable */

import { Design, Rule } from '@aesthetic/core';

export default new Design<Rule>('material-design', {
	border: {
		sm: {
			radius: '0.14rem', // 2px
			width: '0.07rem', // 1px
		},
		df: {
			radius: '0.29rem', // 4px
			width: '0.14rem', // 2px
		},
		lg: {
			radius: '0.43rem', // 6px
			width: '0.21rem', // 3px
		},
	},
	breakpoint: {
		xs: {
			query: 'screen and (min-width: 42.86em)',
			querySize: 600,
			rootLineHeight: 1.53,
			rootTextSize: '14.94px',
		},
		sm: {
			query: 'screen and (min-width: 64.29em)',
			querySize: 900,
			rootLineHeight: 1.63,
			rootTextSize: '15.94px',
		},
		md: {
			query: 'screen and (min-width: 85.71em)',
			querySize: 1200,
			rootLineHeight: 1.74,
			rootTextSize: '17.01px',
		},
		lg: {
			query: 'screen and (min-width: 109.71em)',
			querySize: 1536,
			rootLineHeight: 1.85,
			rootTextSize: '18.15px',
		},
		xl: {
			query: 'screen and (min-width: 137.14em)',
			querySize: 1920,
			rootLineHeight: 1.98,
			rootTextSize: '19.36px',
		},
	},
	heading: {
		l1: {
			letterSpacing: '-1.50px',
			lineHeight: 1.17,
			size: '6.86rem', // 96px
		},
		l2: {
			letterSpacing: '-0.50px',
			lineHeight: 1.2,
			size: '4.29rem', // 60px
		},
		l3: {
			letterSpacing: '0px',
			lineHeight: 1.17,
			size: '3.43rem', // 48px
		},
		l4: {
			letterSpacing: '0.25px',
			lineHeight: 1.24,
			size: '2.43rem', // 34px
		},
		l5: {
			letterSpacing: '0px',
			lineHeight: 1.33,
			size: '1.71rem', // 24px
		},
		l6: {
			letterSpacing: '0.15px',
			lineHeight: 1.6,
			size: '1.43rem', // 20px
		},
	},
	shadow: {
		xs: {
			x: '0rem', // 0px
			y: '0.07rem', // 1px
			blur: '0.07rem', // 1px
			spread: '0rem', // 0px
		},
		sm: {
			x: '0rem', // 0px
			y: '0.43rem', // 6px
			blur: '0.71rem', // 10px
			spread: '0rem', // 0px
		},
		md: {
			x: '0rem', // 0px
			y: '0.86rem', // 12px
			blur: '1.21rem', // 17px
			spread: '0.14rem', // 2px
		},
		lg: {
			x: '0rem', // 0px
			y: '1.36rem', // 19px
			blur: '2.07rem', // 29px
			spread: '0.14rem', // 2px
		},
		xl: {
			x: '0rem', // 0px
			y: '1.71rem', // 24px
			blur: '2.71rem', // 38px
			spread: '0.21rem', // 3px
		},
	},
	spacing: {
		xxs: '0.07rem', // 1px
		xs: '0.14rem', // 2px
		sm: '0.29rem', // 4px
		df: '0.57rem', // 8px
		md: '0.86rem', // 12px
		lg: '1.14rem', // 16px
		xl: '1.71rem', // 24px
		xxl: '2.29rem', // 32px
		type: 'unit',
		unit: 8,
	},
	text: {
		sm: {
			lineHeight: 1.6,
			size: '0.86rem', // 12px
		},
		df: {
			lineHeight: 1.43,
			size: '1rem', // 14px
		},
		lg: {
			lineHeight: 1.5,
			size: '1.14rem', // 16px
		},
	},
	typography: {
		font: {
			heading: '"Roboto", "Helvetica", "Arial", sans-serif',
			locale: {},
			monospace:
				'Menlo, Monaco, Consolas, "Lucida Console", "Liberation Mono", "Courier New", monospace',
			text: '"Roboto", "Helvetica", "Arial", sans-serif',
			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.43,
		rootTextSize: '14px',
	},
});