@metamask/design-system-tailwind-preset
Version:
Design System Tailwind CSS preset for MetaMask projects
61 lines • 2.74 kB
JavaScript
import { colors } from "./colors.mjs";
import { shadows, shadowPlugin } from "./shadows.mjs";
import { typography } from "./typography.mjs";
const tailwindConfig = {
content: [],
theme: {
extend: {
colors: {
...colors,
},
// Reduces redundancy by enabling shorter Tailwind class names
textColor: ({ theme }) => ({
...theme('colors'),
...colors.text, // e.g. text-default instead of text-text-default
}),
backgroundColor: ({ theme }) => ({
...theme('colors'),
...colors.background, // e.g. bg-default instead of bg-background-default
}),
borderColor: ({ theme }) => ({
...theme('colors'),
...colors.border, // e.g. border-default instead of border-border-default
}),
...typography,
boxShadow: 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: [
shadowPlugin, // Allows for combination of size and color shadow utilities
],
};
export default tailwindConfig;
module.exports = tailwindConfig;
//# sourceMappingURL=index.mjs.map