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

Design System Tailwind CSS preset for MetaMask projects

{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,qBAAiB;AAClC,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,sBAAkB;AAClD,OAAO,EAAE,UAAU,EAAE,yBAAqB;AAE1C,MAAM,cAAc,GAAW;IAC7B,OAAO,EAAE,EAAE;IACX,KAAK,EAAE;QACL,MAAM,EAAE;YACN,MAAM,EAAE;gBACN,GAAG,MAAM;aACV;YACD,8DAA8D;YAC9D,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;gBACzB,GAAG,KAAK,CAAC,QAAQ,CAAC;gBAClB,GAAG,MAAM,CAAC,IAAI,EAAE,iDAAiD;aAClE,CAAC;YACF,eAAe,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;gBAC/B,GAAG,KAAK,CAAC,QAAQ,CAAC;gBAClB,GAAG,MAAM,CAAC,UAAU,EAAE,mDAAmD;aAC1E,CAAC;YACF,WAAW,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;gBAC3B,GAAG,KAAK,CAAC,QAAQ,CAAC;gBAClB,GAAG,MAAM,CAAC,MAAM,EAAE,uDAAuD;aAC1E,CAAC;YACF,GAAG,UAAU;YACb,SAAS,EAAE,OAAO;YAClB,SAAS,EAAE;gBACT,SAAS,EAAE;oBACT,IAAI,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;oBACtB,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;iBACrB;gBACD,0EAA0E;gBAC1E,iDAAiD;gBACjD,gBAAgB,EAAE;oBAChB,UAAU,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;oBAC9B,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;iBAC1B;gBACD,qDAAqD;gBACrD,gEAAgE;gBAChE,UAAU,EAAE;oBACV,IAAI,EAAE,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,GAAG,EAAE;oBACrD,EAAE,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,GAAG,EAAE;iBACjD;aACF;YACD,SAAS,EAAE;gBACT,iFAAiF;gBACjF,yGAAyG;gBACzG,SAAS,EAAE,+BAA+B;gBAC1C,gBAAgB,EACd,yDAAyD;gBAC3D,8EAA8E;gBAC9E,yGAAyG;gBACzG,UAAU,EAAE,wDAAwD;aACrE;SACF;KACF;IACD,OAAO,EAAE;QACP,YAAY,EAAE,4DAA4D;KAC3E;CACF,CAAC;AAEF,eAAe,cAAc,CAAC;AAC9B,MAAM,CAAC,OAAO,GAAG,cAAc,CAAC","sourcesContent":["import type { Config } from 'tailwindcss';\n\nimport { colors } from './colors';\nimport { shadows, shadowPlugin } from './shadows';\nimport { typography } from './typography';\n\nconst tailwindConfig: Config = {\n  content: [],\n  theme: {\n    extend: {\n      colors: {\n        ...colors,\n      },\n      // Reduces redundancy by enabling shorter Tailwind class names\n      textColor: ({ theme }) => ({\n        ...theme('colors'), // Incorporate existing color utilities like text-primary-default\n        ...colors.text, // e.g. text-default instead of text-text-default\n      }),\n      backgroundColor: ({ theme }) => ({\n        ...theme('colors'), // Incorporate existing color utilities like bg-primary-default\n        ...colors.background, // e.g. bg-default instead of bg-background-default\n      }),\n      borderColor: ({ theme }) => ({\n        ...theme('colors'), // Incorporate existing color utilities like border-primary-default\n        ...colors.border, // e.g. border-default instead of border-border-default\n      }),\n      ...typography,\n      boxShadow: shadows,\n      keyframes: {\n        'fade-in': {\n          from: { opacity: '0' },\n          to: { opacity: '1' },\n        },\n        // Skeleton loading-placeholder pulse: opacity oscillates 0.2 → 0.1 → 0.2.\n        // Used by `Skeleton` to animate the loading bar.\n        'skeleton-pulse': {\n          '0%, 100%': { opacity: '0.2' },\n          '50%': { opacity: '0.1' },\n        },\n        // Modal dialog entrance: rises 24px while fading in.\n        // Used by `ModalContent` to animate dialogs into view on mount.\n        'slide-up': {\n          from: { transform: 'translateY(24px)', opacity: '0' },\n          to: { transform: 'translateY(0)', opacity: '1' },\n        },\n      },\n      animation: {\n        // Duration matches `AnimationDuration.Regularly` from `@metamask/design-tokens`.\n        // Inlined to avoid a workspace dependency cycle (design-tokens → design-system-react → tailwind-preset).\n        'fade-in': 'fade-in 300ms linear forwards',\n        'skeleton-pulse':\n          'skeleton-pulse 1400ms cubic-bezier(0, 0, 1, 1) infinite',\n        // Duration matches `AnimationDuration.Slowly` from `@metamask/design-tokens`.\n        // Inlined to avoid a workspace dependency cycle (design-tokens → design-system-react → tailwind-preset).\n        'slide-up': 'slide-up 400ms cubic-bezier(0.3, 0.8, 0.3, 1) forwards',\n      },\n    },\n  },\n  plugins: [\n    shadowPlugin, // Allows for combination of size and color shadow utilities\n  ],\n};\n\nexport default tailwindConfig;\nmodule.exports = tailwindConfig;\n"]}