@maggioli-design-system/design-tokens/dist/js/tailwind-colors-css-vars.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 v14.1.0
Generated by Style Dictionary
Do not edit directly
Generated at Mon, 08 Jun 2026 14:52:24 GMT
*/

const getColor = (cssVar, { opacityVariable, opacityValue }) => {
  if (opacityValue !== undefined) {
    return `rgb(var(--${cssVar}) / ${opacityValue})`
  }
  if (opacityVariable !== undefined) {
    return `rgb(var(--${cssVar}) / var(${opacityVariable}, 1))`
  }
  return `rgb(var(--${cssVar}))`
}

const palette = {
  'tone-porcelain-01': params => getColor('tone-porcelain-01', params),
  'tone-porcelain-02': params => getColor('tone-porcelain-02', params),
  'tone-porcelain-03': params => getColor('tone-porcelain-03', params),
  'tone-porcelain-04': params => getColor('tone-porcelain-04', params),
  'tone-porcelain-05': params => getColor('tone-porcelain-05', params),
  'tone-porcelain-06': params => getColor('tone-porcelain-06', params),
  'tone-porcelain-07': params => getColor('tone-porcelain-07', params),
  'tone-porcelain-08': params => getColor('tone-porcelain-08', params),
  'tone-porcelain-09': params => getColor('tone-porcelain-09', params),
  'tone-porcelain-10': params => getColor('tone-porcelain-10', params),
  'tone-porcelain': params => getColor('tone-porcelain', params),
  'tone-kaolin-01': params => getColor('tone-kaolin-01', params),
  'tone-kaolin-02': params => getColor('tone-kaolin-02', params),
  'tone-kaolin-03': params => getColor('tone-kaolin-03', params),
  'tone-kaolin-04': params => getColor('tone-kaolin-04', params),
  'tone-kaolin-05': params => getColor('tone-kaolin-05', params),
  'tone-kaolin-06': params => getColor('tone-kaolin-06', params),
  'tone-kaolin-07': params => getColor('tone-kaolin-07', params),
  'tone-kaolin-08': params => getColor('tone-kaolin-08', params),
  'tone-kaolin-09': params => getColor('tone-kaolin-09', params),
  'tone-kaolin-10': params => getColor('tone-kaolin-10', params),
  'tone-kaolin': params => getColor('tone-kaolin', params),
  'tone-neutral-01': params => getColor('tone-neutral-01', params),
  'tone-neutral-02': params => getColor('tone-neutral-02', params),
  'tone-neutral-03': params => getColor('tone-neutral-03', params),
  'tone-neutral-04': params => getColor('tone-neutral-04', params),
  'tone-neutral-05': params => getColor('tone-neutral-05', params),
  'tone-neutral-06': params => getColor('tone-neutral-06', params),
  'tone-neutral-07': params => getColor('tone-neutral-07', params),
  'tone-neutral-08': params => getColor('tone-neutral-08', params),
  'tone-neutral-09': params => getColor('tone-neutral-09', params),
  'tone-neutral-10': params => getColor('tone-neutral-10', params),
  'tone-neutral': params => getColor('tone-neutral', params),
  'tone-fireclay-01': params => getColor('tone-fireclay-01', params),
  'tone-fireclay-02': params => getColor('tone-fireclay-02', params),
  'tone-fireclay-03': params => getColor('tone-fireclay-03', params),
  'tone-fireclay-04': params => getColor('tone-fireclay-04', params),
  'tone-fireclay-05': params => getColor('tone-fireclay-05', params),
  'tone-fireclay-06': params => getColor('tone-fireclay-06', params),
  'tone-fireclay-07': params => getColor('tone-fireclay-07', params),
  'tone-fireclay-08': params => getColor('tone-fireclay-08', params),
  'tone-fireclay-09': params => getColor('tone-fireclay-09', params),
  'tone-fireclay-10': params => getColor('tone-fireclay-10', params),
  'tone-fireclay': params => getColor('tone-fireclay', params),
  'tone-bisque-01': params => getColor('tone-bisque-01', params),
  'tone-bisque-02': params => getColor('tone-bisque-02', params),
  'tone-bisque-03': params => getColor('tone-bisque-03', params),
  'tone-bisque-04': params => getColor('tone-bisque-04', params),
  'tone-bisque-05': params => getColor('tone-bisque-05', params),
  'tone-bisque-06': params => getColor('tone-bisque-06', params),
  'tone-bisque-07': params => getColor('tone-bisque-07', params),
  'tone-bisque-08': params => getColor('tone-bisque-08', params),
  'tone-bisque-09': params => getColor('tone-bisque-09', params),
  'tone-bisque-10': params => getColor('tone-bisque-10', params),
  'tone-bisque': params => getColor('tone-bisque', params),
  'status-info-01': params => getColor('status-info-01', params),
  'status-info-02': params => getColor('status-info-02', params),
  'status-info-03': params => getColor('status-info-03', params),
  'status-info-04': params => getColor('status-info-04', params),
  'status-info-05': params => getColor('status-info-05', params),
  'status-info-06': params => getColor('status-info-06', params),
  'status-info-07': params => getColor('status-info-07', params),
  'status-info-08': params => getColor('status-info-08', params),
  'status-info-09': params => getColor('status-info-09', params),
  'status-info-10': params => getColor('status-info-10', params),
  'status-info': params => getColor('status-info', params),
  'status-success-01': params => getColor('status-success-01', params),
  'status-success-02': params => getColor('status-success-02', params),
  'status-success-03': params => getColor('status-success-03', params),
  'status-success-04': params => getColor('status-success-04', params),
  'status-success-05': params => getColor('status-success-05', params),
  'status-success-06': params => getColor('status-success-06', params),
  'status-success-07': params => getColor('status-success-07', params),
  'status-success-08': params => getColor('status-success-08', params),
  'status-success-09': params => getColor('status-success-09', params),
  'status-success-10': params => getColor('status-success-10', params),
  'status-success': params => getColor('status-success', params),
  'status-error-01': params => getColor('status-error-01', params),
  'status-error-02': params => getColor('status-error-02', params),
  'status-error-03': params => getColor('status-error-03', params),
  'status-error-04': params => getColor('status-error-04', params),
  'status-error-05': params => getColor('status-error-05', params),
  'status-error-06': params => getColor('status-error-06', params),
  'status-error-07': params => getColor('status-error-07', params),
  'status-error-08': params => getColor('status-error-08', params),
  'status-error-09': params => getColor('status-error-09', params),
  'status-error-10': params => getColor('status-error-10', params),
  'status-error': params => getColor('status-error', params),
  'status-warning-01': params => getColor('status-warning-01', params),
  'status-warning-02': params => getColor('status-warning-02', params),
  'status-warning-03': params => getColor('status-warning-03', params),
  'status-warning-04': params => getColor('status-warning-04', params),
  'status-warning-05': params => getColor('status-warning-05', params),
  'status-warning-06': params => getColor('status-warning-06', params),
  'status-warning-07': params => getColor('status-warning-07', params),
  'status-warning-08': params => getColor('status-warning-08', params),
  'status-warning-09': params => getColor('status-warning-09', params),
  'status-warning-10': params => getColor('status-warning-10', params),
  'status-warning': params => getColor('status-warning', params),
  'label-red-01': params => getColor('label-red-01', params),
  'label-red-02': params => getColor('label-red-02', params),
  'label-red-03': params => getColor('label-red-03', params),
  'label-red-04': params => getColor('label-red-04', params),
  'label-red-05': params => getColor('label-red-05', params),
  'label-red-06': params => getColor('label-red-06', params),
  'label-red-07': params => getColor('label-red-07', params),
  'label-red-08': params => getColor('label-red-08', params),
  'label-red-09': params => getColor('label-red-09', params),
  'label-red-10': params => getColor('label-red-10', params),
  'label-red': params => getColor('label-red', params),
  'label-amaranth-01': params => getColor('label-amaranth-01', params),
  'label-amaranth-02': params => getColor('label-amaranth-02', params),
  'label-amaranth-03': params => getColor('label-amaranth-03', params),
  'label-amaranth-04': params => getColor('label-amaranth-04', params),
  'label-amaranth-05': params => getColor('label-amaranth-05', params),
  'label-amaranth-06': params => getColor('label-amaranth-06', params),
  'label-amaranth-07': params => getColor('label-amaranth-07', params),
  'label-amaranth-08': params => getColor('label-amaranth-08', params),
  'label-amaranth-09': params => getColor('label-amaranth-09', params),
  'label-amaranth-10': params => getColor('label-amaranth-10', params),
  'label-amaranth': params => getColor('label-amaranth', params),
  'label-orchid-01': params => getColor('label-orchid-01', params),
  'label-orchid-02': params => getColor('label-orchid-02', params),
  'label-orchid-03': params => getColor('label-orchid-03', params),
  'label-orchid-04': params => getColor('label-orchid-04', params),
  'label-orchid-05': params => getColor('label-orchid-05', params),
  'label-orchid-06': params => getColor('label-orchid-06', params),
  'label-orchid-07': params => getColor('label-orchid-07', params),
  'label-orchid-08': params => getColor('label-orchid-08', params),
  'label-orchid-09': params => getColor('label-orchid-09', params),
  'label-orchid-10': params => getColor('label-orchid-10', params),
  'label-orchid': params => getColor('label-orchid', params),
  'label-purple-01': params => getColor('label-purple-01', params),
  'label-purple-02': params => getColor('label-purple-02', params),
  'label-purple-03': params => getColor('label-purple-03', params),
  'label-purple-04': params => getColor('label-purple-04', params),
  'label-purple-05': params => getColor('label-purple-05', params),
  'label-purple-06': params => getColor('label-purple-06', params),
  'label-purple-07': params => getColor('label-purple-07', params),
  'label-purple-08': params => getColor('label-purple-08', params),
  'label-purple-09': params => getColor('label-purple-09', params),
  'label-purple-10': params => getColor('label-purple-10', params),
  'label-purple': params => getColor('label-purple', params),
  'label-violet-01': params => getColor('label-violet-01', params),
  'label-violet-02': params => getColor('label-violet-02', params),
  'label-violet-03': params => getColor('label-violet-03', params),
  'label-violet-04': params => getColor('label-violet-04', params),
  'label-violet-05': params => getColor('label-violet-05', params),
  'label-violet-06': params => getColor('label-violet-06', params),
  'label-violet-07': params => getColor('label-violet-07', params),
  'label-violet-08': params => getColor('label-violet-08', params),
  'label-violet-09': params => getColor('label-violet-09', params),
  'label-violet-10': params => getColor('label-violet-10', params),
  'label-violet': params => getColor('label-violet', params),
  'label-blue-01': params => getColor('label-blue-01', params),
  'label-blue-02': params => getColor('label-blue-02', params),
  'label-blue-03': params => getColor('label-blue-03', params),
  'label-blue-04': params => getColor('label-blue-04', params),
  'label-blue-05': params => getColor('label-blue-05', params),
  'label-blue-06': params => getColor('label-blue-06', params),
  'label-blue-07': params => getColor('label-blue-07', params),
  'label-blue-08': params => getColor('label-blue-08', params),
  'label-blue-09': params => getColor('label-blue-09', params),
  'label-blue-10': params => getColor('label-blue-10', params),
  'label-blue': params => getColor('label-blue', params),
  'label-sky-01': params => getColor('label-sky-01', params),
  'label-sky-02': params => getColor('label-sky-02', params),
  'label-sky-03': params => getColor('label-sky-03', params),
  'label-sky-04': params => getColor('label-sky-04', params),
  'label-sky-05': params => getColor('label-sky-05', params),
  'label-sky-06': params => getColor('label-sky-06', params),
  'label-sky-07': params => getColor('label-sky-07', params),
  'label-sky-08': params => getColor('label-sky-08', params),
  'label-sky-09': params => getColor('label-sky-09', params),
  'label-sky-10': params => getColor('label-sky-10', params),
  'label-sky': params => getColor('label-sky', params),
  'label-aqua-01': params => getColor('label-aqua-01', params),
  'label-aqua-02': params => getColor('label-aqua-02', params),
  'label-aqua-03': params => getColor('label-aqua-03', params),
  'label-aqua-04': params => getColor('label-aqua-04', params),
  'label-aqua-05': params => getColor('label-aqua-05', params),
  'label-aqua-06': params => getColor('label-aqua-06', params),
  'label-aqua-07': params => getColor('label-aqua-07', params),
  'label-aqua-08': params => getColor('label-aqua-08', params),
  'label-aqua-09': params => getColor('label-aqua-09', params),
  'label-aqua-10': params => getColor('label-aqua-10', params),
  'label-aqua': params => getColor('label-aqua', params),
  'label-green-01': params => getColor('label-green-01', params),
  'label-green-02': params => getColor('label-green-02', params),
  'label-green-03': params => getColor('label-green-03', params),
  'label-green-04': params => getColor('label-green-04', params),
  'label-green-05': params => getColor('label-green-05', params),
  'label-green-06': params => getColor('label-green-06', params),
  'label-green-07': params => getColor('label-green-07', params),
  'label-green-08': params => getColor('label-green-08', params),
  'label-green-09': params => getColor('label-green-09', params),
  'label-green-10': params => getColor('label-green-10', params),
  'label-green': params => getColor('label-green', params),
  'label-lime-01': params => getColor('label-lime-01', params),
  'label-lime-02': params => getColor('label-lime-02', params),
  'label-lime-03': params => getColor('label-lime-03', params),
  'label-lime-04': params => getColor('label-lime-04', params),
  'label-lime-05': params => getColor('label-lime-05', params),
  'label-lime-06': params => getColor('label-lime-06', params),
  'label-lime-07': params => getColor('label-lime-07', params),
  'label-lime-08': params => getColor('label-lime-08', params),
  'label-lime-09': params => getColor('label-lime-09', params),
  'label-lime-10': params => getColor('label-lime-10', params),
  'label-lime': params => getColor('label-lime', params),
  'label-yellow-01': params => getColor('label-yellow-01', params),
  'label-yellow-02': params => getColor('label-yellow-02', params),
  'label-yellow-03': params => getColor('label-yellow-03', params),
  'label-yellow-04': params => getColor('label-yellow-04', params),
  'label-yellow-05': params => getColor('label-yellow-05', params),
  'label-yellow-06': params => getColor('label-yellow-06', params),
  'label-yellow-07': params => getColor('label-yellow-07', params),
  'label-yellow-08': params => getColor('label-yellow-08', params),
  'label-yellow-09': params => getColor('label-yellow-09', params),
  'label-yellow-10': params => getColor('label-yellow-10', params),
  'label-yellow': params => getColor('label-yellow', params),
  'label-orange-01': params => getColor('label-orange-01', params),
  'label-orange-02': params => getColor('label-orange-02', params),
  'label-orange-03': params => getColor('label-orange-03', params),
  'label-orange-04': params => getColor('label-orange-04', params),
  'label-orange-05': params => getColor('label-orange-05', params),
  'label-orange-06': params => getColor('label-orange-06', params),
  'label-orange-07': params => getColor('label-orange-07', params),
  'label-orange-08': params => getColor('label-orange-08', params),
  'label-orange-09': params => getColor('label-orange-09', params),
  'label-orange-10': params => getColor('label-orange-10', params),
  'label-orange': params => getColor('label-orange', params),
  'variant-primary-01': params => getColor('variant-primary-01', params),
  'variant-primary-02': params => getColor('variant-primary-02', params),
  'variant-primary-03': params => getColor('variant-primary-03', params),
  'variant-primary-04': params => getColor('variant-primary-04', params),
  'variant-primary-05': params => getColor('variant-primary-05', params),
  'variant-primary-06': params => getColor('variant-primary-06', params),
  'variant-primary-07': params => getColor('variant-primary-07', params),
  'variant-primary-08': params => getColor('variant-primary-08', params),
  'variant-primary-09': params => getColor('variant-primary-09', params),
  'variant-primary-10': params => getColor('variant-primary-10', params),
  'variant-primary': params => getColor('variant-primary', params),
  'variant-secondary-01': params => getColor('variant-secondary-01', params),
  'variant-secondary-02': params => getColor('variant-secondary-02', params),
  'variant-secondary-03': params => getColor('variant-secondary-03', params),
  'variant-secondary-04': params => getColor('variant-secondary-04', params),
  'variant-secondary-05': params => getColor('variant-secondary-05', params),
  'variant-secondary-06': params => getColor('variant-secondary-06', params),
  'variant-secondary-07': params => getColor('variant-secondary-07', params),
  'variant-secondary-08': params => getColor('variant-secondary-08', params),
  'variant-secondary-09': params => getColor('variant-secondary-09', params),
  'variant-secondary-10': params => getColor('variant-secondary-10', params),
  'variant-secondary': params => getColor('variant-secondary', params),
  'variant-ai-01': params => getColor('variant-ai-01', params),
  'variant-ai-02': params => getColor('variant-ai-02', params),
  'variant-ai-03': params => getColor('variant-ai-03', params),
  'variant-ai-04': params => getColor('variant-ai-04', params),
  'variant-ai-05': params => getColor('variant-ai-05', params),
  'variant-ai-06': params => getColor('variant-ai-06', params),
  'variant-ai-07': params => getColor('variant-ai-07', params),
  'variant-ai-08': params => getColor('variant-ai-08', params),
  'variant-ai-09': params => getColor('variant-ai-09', params),
  'variant-ai-10': params => getColor('variant-ai-10', params),
  'variant-ai': params => getColor('variant-ai', params),
  'brand-maggioli-01': params => getColor('brand-maggioli-01', params),
  'brand-maggioli-02': params => getColor('brand-maggioli-02', params),
  'brand-maggioli-03': params => getColor('brand-maggioli-03', params),
  'brand-maggioli-04': params => getColor('brand-maggioli-04', params),
  'brand-maggioli-05': params => getColor('brand-maggioli-05', params),
  'brand-maggioli-06': params => getColor('brand-maggioli-06', params),
  'brand-maggioli-07': params => getColor('brand-maggioli-07', params),
  'brand-maggioli-08': params => getColor('brand-maggioli-08', params),
  'brand-maggioli-09': params => getColor('brand-maggioli-09', params),
  'brand-maggioli-10': params => getColor('brand-maggioli-10', params),
  'brand-maggioli': params => getColor('brand-maggioli', params),
  'brand-maggioli-editore-01': params => getColor('brand-maggioli-editore-01', params),
  'brand-maggioli-editore-02': params => getColor('brand-maggioli-editore-02', params),
  'brand-maggioli-editore-03': params => getColor('brand-maggioli-editore-03', params),
  'brand-maggioli-editore-04': params => getColor('brand-maggioli-editore-04', params),
  'brand-maggioli-editore-05': params => getColor('brand-maggioli-editore-05', params),
  'brand-maggioli-editore-06': params => getColor('brand-maggioli-editore-06', params),
  'brand-maggioli-editore-07': params => getColor('brand-maggioli-editore-07', params),
  'brand-maggioli-editore-08': params => getColor('brand-maggioli-editore-08', params),
  'brand-maggioli-editore-09': params => getColor('brand-maggioli-editore-09', params),
  'brand-maggioli-editore-10': params => getColor('brand-maggioli-editore-10', params),
  'brand-maggioli-editore': params => getColor('brand-maggioli-editore', params),
  'brand-rnd-01': params => getColor('brand-rnd-01', params),
  'brand-rnd-02': params => getColor('brand-rnd-02', params),
  'brand-rnd-03': params => getColor('brand-rnd-03', params),
  'brand-rnd-04': params => getColor('brand-rnd-04', params),
  'brand-rnd-05': params => getColor('brand-rnd-05', params),
  'brand-rnd-06': params => getColor('brand-rnd-06', params),
  'brand-rnd-07': params => getColor('brand-rnd-07', params),
  'brand-rnd-08': params => getColor('brand-rnd-08', params),
  'brand-rnd-09': params => getColor('brand-rnd-09', params),
  'brand-rnd-10': params => getColor('brand-rnd-10', params),
  'brand-rnd': params => getColor('brand-rnd', params),
}

module.exports = {
  palette,
}