@metamask/design-system-tailwind-preset/dist/shadows.mjs.map

Design System Tailwind CSS preset for MetaMask projects

{"version":3,"file":"shadows.mjs","sourceRoot":"","sources":["../src/shadows.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,OAAM,8BAA2B;;AAExC;;;;;;;;;GASG;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,EAAE,EAAE,wEAAwE;IAC5E,EAAE,EAAE,wEAAwE;IAC5E,EAAE,EAAE,wEAAwE;IAC5E,EAAE,EAAE,wEAAwE;CAC7E,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,OAAO,EAAE,6BAA6B;IACtC,OAAO,EAAE,6BAA6B;IACtC,KAAK,EAAE,2BAA2B;CACnC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,UAAU,EAC3C,YAAY,GASb;IACC,MAAM,oBAAoB,GAA2C,EAAE,CAAC;IAExE,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QACpD,oBAAoB,CAAC,WAAW,GAAG,EAAE,CAAC,GAAG;YACvC,gBAAgB,EAAE,KAAK,EAAE,qEAAqE;SAC/F,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,wDAAwD;IACxD,YAAY,CAAC,oBAAoB,EAAE;QACjC,aAAa,EAAE,KAAK;QACpB,gBAAgB,EAAE,IAAI;KACvB,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import plugin from 'tailwindcss/plugin';\n\n/**\n * We want to allow for the combination of shadow size and color utilities.\n * Shadow size should default to --color-shadow-default.\n * e.g. className=\"shadow-md\" (size medium / color default)\n * We also want to allow for the combination of shadow size and color utilities.\n * e.g. className=\"shadow-md shadow-primary\" (size medium / color primary)\n *\n * To achieve this we define the following order:\n * size / (color placeholder / color default fallback)\n */\n\nexport const shadows = {\n  xs: 'var(--shadow-size-xs) var(--shadow-color, var(--color-shadow-default))',\n  sm: 'var(--shadow-size-sm) var(--shadow-color, var(--color-shadow-default))',\n  md: 'var(--shadow-size-md) var(--shadow-color, var(--color-shadow-default))',\n  lg: 'var(--shadow-size-lg) var(--shadow-color, var(--color-shadow-default))',\n};\n\nexport const shadowColors = {\n  default: 'var(--color-shadow-default)',\n  primary: 'var(--color-shadow-primary)',\n  error: 'var(--color-shadow-error)',\n};\n\n/**\n * The shadowPlugin is a Tailwind CSS plugin that allows the --shadow-color CSS variable to be set based on the shadow color utility class.\n * This enables the combination of shadow size and color utilities.\n */\nexport const shadowPlugin = plugin(function ({\n  addUtilities,\n}: {\n  addUtilities: (\n    utilities: Record<string, Record<string, string>>,\n    options?: Partial<{\n      respectPrefix: boolean;\n      respectImportant: boolean;\n    }>,\n  ) => void;\n}) {\n  const shadowColorUtilities: Record<string, Record<string, string>> = {};\n\n  Object.entries(shadowColors).forEach(([key, value]) => {\n    shadowColorUtilities[`.shadow-${key}`] = {\n      '--shadow-color': value, // This ensures that --shadow-color is set to the correct color value\n    };\n  });\n\n  // Add the utilities with Tailwind’s addUtilities method\n  addUtilities(shadowColorUtilities, {\n    respectPrefix: false,\n    respectImportant: true,\n  });\n});\n"]}