@maggioli-design-system/design-tokens
Version:
This is the Design Token library of Maggioli Design System, here you'll find all the visual data used around the libraries.
431 lines (428 loc) • 12.5 kB
JavaScript
/*
@magma-design-system/design-tokens v14.1.0
Generated by Style Dictionary
Do not edit directly
Generated at Mon, 08 Jun 2026 14:52:24 GMT
*/
const properties = {
primitive: {
'0': '0rem',
'25': '0.0625rem',
'50': '0.125rem',
'100': '0.25rem',
'150': '0.375rem',
'200': '0.5rem',
'250': '0.625rem',
'300': '0.75rem',
'350': '0.875rem',
'400': '1rem',
'500': '1.25rem',
'600': '1.5rem',
'700': '1.75rem',
'800': '2rem',
'900': '2.25rem',
'1000': '2.5rem',
'1100': '2.75rem',
'1200': '3rem',
'1300': '3.25rem',
'1400': '3.5rem',
'1500': '3.75rem',
'1600': '4rem',
'2000': '5rem',
'2400': '6rem',
'2800': '7rem',
'3200': '8rem',
'3600': '9rem',
'4000': '10rem',
'4400': '11rem',
'4800': '12rem',
'5200': '13rem',
'5600': '14rem',
'6000': '15rem',
'6400': '16rem',
'7200': '18rem',
'8000': '20rem',
'9600': '24rem',
'10000': '25rem',
'11200': '28rem',
'12000': '30rem',
'12800': '32rem',
'14200': '35.5rem',
'16000': '40rem',
'18000': '45rem',
'19200': '48rem',
'20000': '50rem',
'24000': '60rem',
'25600': '64rem',
'28800': '72rem',
'32000': '80rem',
'34150': '85.375rem',
'36000': '90rem',
'38400': '96rem',
'48000': '120rem',
'64000': '160rem',
},
aspectRatio: {
'cover': '5/3',
'picture': '4/3',
'landscape': '4/2',
'panorama': '4/1',
'square': '1/1',
'a4': '1/1.4',
'book': '1/1.4',
'video': '16/9',
},
gap: {
'0': '0rem',
'25': '0.0625rem',
'50': '0.125rem',
'100': '0.25rem',
'150': '0.375rem',
'200': '0.5rem',
'250': '0.625rem',
'300': '0.75rem',
'350': '0.875rem',
'400': '1rem',
'500': '1.25rem',
'600': '1.5rem',
'700': '1.75rem',
'800': '2rem',
'900': '2.25rem',
'1000': '2.5rem',
'1100': '2.75rem',
'1200': '3rem',
'1300': '3.25rem',
'1400': '3.5rem',
'1500': '3.75rem',
'1600': '4rem',
'2000': '5rem',
'2400': '6rem',
'2800': '7rem',
'3200': '8rem',
'3600': '9rem',
'4000': '10rem',
'4400': '11rem',
'4800': '12rem',
'5200': '13rem',
'5600': '14rem',
'6000': '15rem',
'6400': '16rem',
'7200': '18rem',
'8000': '20rem',
'9600': '24rem',
'none': '0rem',
'xs': '0.25rem',
'sm': '0.5rem',
'md': '1rem',
'DEFAULT': '1.5rem',
'lg': '1.5rem',
'xl': '2rem',
'2xl': '3rem',
'3xl': '5rem',
},
borderRadius: {
'none': '0',
'sm': '0.125rem',
'DEFAULT': '0.25rem',
'md': '0.375rem',
'lg': '0.5rem',
'xl': '0.75rem',
'2xl': '1rem',
'3xl': '1.5rem',
},
border: {
'0': '0rem',
'25': '0.0625rem',
'50': '0.125rem',
'200': '0.5rem',
'800': '2rem',
'none': '0',
'default': '0.0625rem',
'xs': '0.0625rem',
'sm': '0.125rem',
'md': '0.1875rem',
'lg': '0.25rem',
'xl': '0.3125rem',
},
boxShadow: {
'xs': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
'xs-sharp': '0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05)',
'sm': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
'DEFAULT': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
'sm-sharp': '0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1)',
'sharp': '0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1)',
'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
'md-sharp': '0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06)',
'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
'lg-sharp': '0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05)',
'xl': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
'xl-sharp': '0 0 1px 1px rgb(0 0 0 / 0.06), 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
'2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
'2xl-sharp': '0 0 1px 1px rgb(0 0 0 / 0.06), 0 25px 50px -12px rgb(0 0 0 / 0.25)',
'inset-sm': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05), inset 0 0 0 1px rgb(0 0 0 / 0.01)',
'inset-md': 'inset 0 4px 6px -1px rgb(0 0 0 / 0.1), inset 0 0 0 1px rgb(0 0 0 / 0.02)',
'inset-lg': 'inset 0 10px 15px -3px rgb(0 0 0 / 0.1), inset 0 0 0 1px rgb(0 0 0 / 0.04)',
'inset-xl': 'inset 0 20px 25px -5px rgb(0 0 0 / 0.1), inset 0 0 0 1px rgb(0 0 0 / 0.04)',
'glow-near-strong': 'NaNrem',
'glow-distant-weak': 'NaNrem',
'glow-distant-strong': 'NaNrem',
'box-md': 'NaNrem',
'box-lg': 'NaNrem',
'box-xl': 'NaNrem',
'box-solid-weak': 'rgb(0 0 0 / 0.3) 0px 2px 4px, rgb(0 0 0 / 0.03) 0px 0px 0px 1px, rgb(0 0 0 / 0.1) 0px 7px 13px -3px, rgb(0 0 0 / 0.2) 0px -3px 0px inset, rgb(255 255 255 / 0.1) 0px -8px 10px inset, rgb(255 255 255 / 0.15) 0px -4px 0px inset',
'box-solid-strong': 'rgb(0 0 0 / 0.4) 0px 2px 4px, rgb(0 0 0 / 0.3) 0px 7px 13px -3px, rgb(0 0 0 / 0.35) 0px -3px 0px inset, rgb(255 255 255 / 0.1) 0px -8px 10px inset, rgb(255 255 255 / 0.15) 0px -4px 0px inset',
'outline-weak': '0 0 0 1px rgb(0 0 0 / 0.05), 0 1px 2px 0 rgb(0 0 0 / 0.05)',
'outline-md': '0 0 0 1px rgb(0 0 0 / 0.1)',
'outline-glow-weak': 'NaNrem',
'outline-glow-strong': 'NaNrem',
'outline-strong': 'NaNrem',
'highlight-weak': 'NaNrem',
'highlight-md': 'NaNrem',
'highlight-strong': 'NaNrem',
},
gridTemplateColumns: {
'fit-lg': 'repeat(auto-fit, minmax(17.5rem, 1fr))',
'fit-md': 'repeat(auto-fit, minmax(15rem, 1fr))',
'fit-sm': 'repeat(auto-fit, minmax(10rem, 1fr))',
'fit-xl': 'repeat(auto-fit, minmax(20rem, 1fr))',
'fit': 'repeat(auto-fit, minmax(12.5rem, 1fr))',
'full': 'repeat(1, minmax(1px, 100%))',
},
size: {
'0': '0rem',
'25': '0.0625rem',
'50': '0.125rem',
'100': '0.25rem',
'150': '0.375rem',
'200': '0.5rem',
'250': '0.625rem',
'300': '0.75rem',
'350': '0.875rem',
'400': '1rem',
'500': '1.25rem',
'600': '1.5rem',
'700': '1.75rem',
'800': '2rem',
'900': '2.25rem',
'1000': '2.5rem',
'1100': '2.75rem',
'1200': '3rem',
'1300': '3.25rem',
'1400': '3.5rem',
'1500': '3.75rem',
'1600': '4rem',
'2000': '5rem',
'2400': '6rem',
'2800': '7rem',
'3200': '8rem',
'3600': '9rem',
'4000': '10rem',
'4400': '11rem',
'4800': '12rem',
'5200': '13rem',
'5600': '14rem',
'6000': '15rem',
'6400': '16rem',
'7200': '18rem',
'8000': '20rem',
'9600': '24rem',
'none': '0',
'auto': 'auto',
'full': '100%',
'min': 'min-content',
'max': 'max-content',
'fit': 'fit-content',
'xs': '20rem',
'sm': '24rem',
'md': '28rem',
'lg': '32rem',
'xl': '36rem',
'2xl': '42rem',
'3xl': '48rem',
'4xl': '56rem',
'5xl': '64rem',
'6xl': '72rem',
'7xl': '80rem',
'1/2': '50%',
'1/3': '33.333333%',
'2/3': '66.666667%',
'1/4': '25%',
'2/4': '50%',
'3/4': '75%',
'1/5': '20%',
'2/5': '40%',
'3/5': '60%',
'4/5': '80%',
'1/6': '16.666667%',
'2/6': '33.333333%',
'3/6': '50%',
'4/6': '66.666667%',
'5/6': '83.333333%',
'1/12': '8.333333%',
'2/12': '16.666667%',
'3/12': '25%',
'4/12': '33.333333%',
'5/12': '41.666667%',
'6/12': '50%',
'7/12': '58.333333%',
'8/12': '66.666667%',
'9/12': '75%',
'10/12': '83.333333%',
'11/12': '91.666667%',
'title': '30ch',
'phrase': '50ch',
'prose': '65ch',
'text': '75ch',
},
margin: {
'0': '0rem',
'25': '0.0625rem',
'50': '0.125rem',
'100': '0.25rem',
'150': '0.375rem',
'200': '0.5rem',
'250': '0.625rem',
'300': '0.75rem',
'350': '0.875rem',
'400': '1rem',
'500': '1.25rem',
'600': '1.5rem',
'700': '1.75rem',
'800': '2rem',
'900': '2.25rem',
'1000': '2.5rem',
'1100': '2.75rem',
'1200': '3rem',
'1300': '3.25rem',
'1400': '3.5rem',
'1500': '3.75rem',
'1600': '4rem',
'2000': '5rem',
'2400': '6rem',
'2800': '7rem',
'3200': '8rem',
'3600': '9rem',
'4000': '10rem',
'4400': '11rem',
'4800': '12rem',
'5200': '13rem',
'5600': '14rem',
'6000': '15rem',
'6400': '16rem',
'7200': '18rem',
'8000': '20rem',
'9600': '24rem',
'auto': 'auto',
},
padding: {
'0': '0rem',
'25': '0.0625rem',
'50': '0.125rem',
'100': '0.25rem',
'150': '0.375rem',
'200': '0.5rem',
'250': '0.625rem',
'300': '0.75rem',
'350': '0.875rem',
'400': '1rem',
'500': '1.25rem',
'600': '1.5rem',
'700': '1.75rem',
'800': '2rem',
'900': '2.25rem',
'1000': '2.5rem',
'1100': '2.75rem',
'1200': '3rem',
'1300': '3.25rem',
'1400': '3.5rem',
'1500': '3.75rem',
'1600': '4rem',
'2000': '5rem',
'2400': '6rem',
'2800': '7rem',
'3200': '8rem',
'3600': '9rem',
'4000': '10rem',
'4400': '11rem',
'4800': '12rem',
'5200': '13rem',
'5600': '14rem',
'6000': '15rem',
'6400': '16rem',
'7200': '18rem',
'8000': '20rem',
'9600': '24rem',
'auto': 'auto',
},
transitionProperty: {
'cosmetic': 'background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width',
'size': 'height, margin, padding, width',
},
duration: {
'75': '75ms',
'100': '100ms',
'150': '150ms',
'200': '200ms',
'300': '300ms',
'500': '500ms',
'700': '700ms',
'1000': '1000ms',
},
timingFunction: {
'in-back': 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',
'in-circ': 'cubic-bezier(0.6, 0.04, 0.98, 0.335)',
'in-cubic': 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
'in-expo': 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
'in-out-back': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
'in-out-circ': 'cubic-bezier(0.785, 0.135, 0.15, 0.86)',
'in-out-cubic': 'cubic-bezier(0.645, 0.045, 0.355, 1)',
'in-out-expo': 'cubic-bezier(1, 0, 0, 1)',
'in-out-quad': 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',
'in-out-quart': 'cubic-bezier(0.77, 0, 0.175, 1)',
'in-out-quint': 'cubic-bezier(0.86, 0, 0.07, 1)',
'in-out-sine': 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',
'in-quad': 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',
'in-quart': 'cubic-bezier(0.895, 0.03, 0.685, 0.22)',
'in-quint': 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
'in-sine': 'cubic-bezier(0.47, 0, 0.745, 0.715)',
'out-back': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
'out-circ': 'cubic-bezier(0.075, 0.82, 0.165, 1)',
'out-cubic': 'cubic-bezier(0.215, 0.61, 0.355, 1)',
'out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)',
'out-quad': 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
'out-quart': 'cubic-bezier(0.165, 0.84, 0.44, 1)',
'out-quint': 'cubic-bezier(0.23, 1, 0.32, 1)',
'out-sine': 'cubic-bezier(0.39, 0.575, 0.565, 1)',
},
leading: {
'2xs': '0.625rem',
'xs': '1rem',
'sm': '1.25rem',
'md': '1.5rem',
'lg': '1.75rem',
'xl': '2rem',
'2xl': '2.25rem',
'3xl': '2.5rem',
'4xl': '3rem',
},
fontSize: {
'4xl': '3rem',
'3xl': '2.25rem',
'2xl': '1.875rem',
'xl': '1.5rem',
'lg': '1.25rem',
'md': '1rem',
'sm': '0.875rem',
'xs': '0.75rem',
'2xs': '0.625rem',
},
sizing: {
'phrase': '50ch',
'prose': '65ch',
'text': '75ch',
'title': '30ch',
},
}
module.exports = {
properties,
}