@metamask/design-system-tailwind-preset
Version:
Design System Tailwind CSS preset for MetaMask projects
46 lines • 2.12 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.shadowPlugin = exports.shadowColors = exports.shadows = void 0;
const plugin_1 = __importDefault(require("tailwindcss/plugin.js"));
/**
* We want to allow for the combination of shadow size and color utilities.
* Shadow size should default to --color-shadow-default.
* e.g. className="shadow-md" (size medium / color default)
* We also want to allow for the combination of shadow size and color utilities.
* e.g. className="shadow-md shadow-primary" (size medium / color primary)
*
* To achieve this we define the following order:
* size / (color placeholder / color default fallback)
*/
exports.shadows = {
xs: 'var(--shadow-size-xs) var(--shadow-color, var(--color-shadow-default))',
sm: 'var(--shadow-size-sm) var(--shadow-color, var(--color-shadow-default))',
md: 'var(--shadow-size-md) var(--shadow-color, var(--color-shadow-default))',
lg: 'var(--shadow-size-lg) var(--shadow-color, var(--color-shadow-default))',
};
exports.shadowColors = {
default: 'var(--color-shadow-default)',
primary: 'var(--color-shadow-primary)',
error: 'var(--color-shadow-error)',
};
/**
* The shadowPlugin is a Tailwind CSS plugin that allows the --shadow-color CSS variable to be set based on the shadow color utility class.
* This enables the combination of shadow size and color utilities.
*/
exports.shadowPlugin = (0, plugin_1.default)(function ({ addUtilities, }) {
const shadowColorUtilities = {};
Object.entries(exports.shadowColors).forEach(([key, value]) => {
shadowColorUtilities[`.shadow-${key}`] = {
'--shadow-color': value, // This ensures that --shadow-color is set to the correct color value
};
});
// Add the utilities with Tailwind’s addUtilities method
addUtilities(shadowColorUtilities, {
respectPrefix: false,
respectImportant: true,
});
});
//# sourceMappingURL=shadows.cjs.map