@maggioli-design-system/design-tokens/dist/js/tailwind-props.js

This is the Design Token library of Maggioli Design System, here you'll find all the visual data used around the libraries.

/*
@magma-design-system/design-tokens v13.7.1
Generated by Style Dictionary
Do not edit directly
Generated at Tue, 03 Jun 2025 08:08:46 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',
    },
    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',
      'md': '0.125rem',
      'lg': '0.5rem',
      'xl': '2rem',
    },
    boxShadow: {
      'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
      'sm-sharp': '0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05)',
      'DEFAULT': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px 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)',
      '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
      'inner': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
      'none': '0 0 rgb(0 0 0 / 0)',
      'outline': '0 0 0 1px rgb(var(--tone-neutral-01) / 0.3)',
      'outline-50': '0 0 0 2px rgb(var(--tone-neutral-01) / 0.3)',
      'outline-75': '0 0 0 3px rgb(var(--tone-neutral-01) / 0.3)',
      'outline-100': '0 0 0 4px rgb(var(--tone-neutral-01) / 0.3)',
      'outline-light': '0 0 0 1px rgb(var(--tone-neutral-01) / 0.15)',
      'outline-light-50': '0 0 0 2px rgb(var(--tone-neutral-01) / 0.15)',
      'outline-light-75': '0 0 0 3px rgb(var(--tone-neutral-01) / 0.15)',
      'outline-light-100': '0 0 0 4px rgb(var(--tone-neutral-01) / 0.15)',
      'outline-strong': '0 0 0 1px rgb(var(--tone-neutral-01) / 0.6)',
      'outline-strong-50': '0 0 0 2px rgb(var(--tone-neutral-01) / 0.6)',
      'outline-strong-75': '0 0 0 3px rgb(var(--tone-neutral-01) / 0.6)',
      'outline-strong-100': '0 0 0 4px rgb(var(--tone-neutral-01) / 0.6)',
    },
    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',
    },
    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,
}