@metamask/design-system-tailwind-preset
Version:
Design System Tailwind CSS preset for MetaMask projects
63 lines • 2.89 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const colors_1 = require("./colors.cjs");
const shadows_1 = require("./shadows.cjs");
const typography_1 = require("./typography.cjs");
const tailwindConfig = {
content: [],
theme: {
extend: {
colors: {
...colors_1.colors,
},
// Reduces redundancy by enabling shorter Tailwind class names
textColor: ({ theme }) => ({
...theme('colors'),
...colors_1.colors.text, // e.g. text-default instead of text-text-default
}),
backgroundColor: ({ theme }) => ({
...theme('colors'),
...colors_1.colors.background, // e.g. bg-default instead of bg-background-default
}),
borderColor: ({ theme }) => ({
...theme('colors'),
...colors_1.colors.border, // e.g. border-default instead of border-border-default
}),
...typography_1.typography,
boxShadow: shadows_1.shadows,
keyframes: {
'fade-in': {
from: { opacity: '0' },
to: { opacity: '1' },
},
// Skeleton loading-placeholder pulse: opacity oscillates 0.2 → 0.1 → 0.2.
// Used by `Skeleton` to animate the loading bar.
'skeleton-pulse': {
'0%, 100%': { opacity: '0.2' },
'50%': { opacity: '0.1' },
},
// Modal dialog entrance: rises 24px while fading in.
// Used by `ModalContent` to animate dialogs into view on mount.
'slide-up': {
from: { transform: 'translateY(24px)', opacity: '0' },
to: { transform: 'translateY(0)', opacity: '1' },
},
},
animation: {
// Duration matches `AnimationDuration.Regularly` from `@metamask/design-tokens`.
// Inlined to avoid a workspace dependency cycle (design-tokens → design-system-react → tailwind-preset).
'fade-in': 'fade-in 300ms linear forwards',
'skeleton-pulse': 'skeleton-pulse 1400ms cubic-bezier(0, 0, 1, 1) infinite',
// Duration matches `AnimationDuration.Slowly` from `@metamask/design-tokens`.
// Inlined to avoid a workspace dependency cycle (design-tokens → design-system-react → tailwind-preset).
'slide-up': 'slide-up 400ms cubic-bezier(0.3, 0.8, 0.3, 1) forwards',
},
},
},
plugins: [
shadows_1.shadowPlugin, // Allows for combination of size and color shadow utilities
],
};
exports.default = tailwindConfig;
module.exports = tailwindConfig;
//# sourceMappingURL=index.cjs.map