@metamask-previews/design-system-tailwind-preset 0.0.0-preview.909f2e9

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2024 MetaMask
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE

package/README.md

@@ -0,0 +1,63 @@
+# `@metamask/design-system-tailwind-preset`
+
+Design System Tailwind CSS preset for MetaMask projects
+
+## Installation
+
+`yarn add @metamask/design-system-tailwind-preset`
+
+or
+
+`npm install @metamask/design-system-tailwind-preset`
+
+## Usage
+
+To use the MetaMask Design System Tailwind CSS preset in your project, follow these steps:
+
+1. Install the package as described in the Installation section above.
+
+2. In your `tailwind.config.js` file, import and use the preset:
+
+```javascript
+module.exports = {
+  presets: [require('@metamask/design-system-tailwind-preset')],
+  // ...
+};
+```
+
+```html
+<div class="bg-background-default text-text-default">
+  <h1 class="font-s-heading-lg sm:font-l-heading-lg">Welcome to MetaMask</h1>
+  <p class="font-s-body-md sm:font-l-body">
+    Enjoy our consistent design across projects!
+  </p>
+</div>
+```
+
+## Customization
+
+You can override or extend the preset's configurations in your `tailwind.config.js` file:
+
+```javascript
+module.exports = {
+  presets: [require('@metamask/design-system-tailwind-preset')],
+  theme: {
+    extend: {
+      // Your custom extensions...
+    },
+  },
+  // Other Tailwind configurations...
+};
+```
+
+## Documentation
+
+For more information on how to use Tailwind CSS and configure your project, refer to the official Tailwind CSS documentation:
+
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
+- [Customizing Your Tailwind Configuration](https://tailwindcss.com/docs/configuration)
+- [Presets in Tailwind CSS](https://tailwindcss.com/docs/presets)
+
+## Contributing
+
+This package is part of a monorepo. Instructions for contributing can be found in the [monorepo README](https://github.com/MetaMask/metamask-design-system#readme).

package/dist/colors.cjs

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colors = void 0;
+exports.colors = {
+    background: {
+        default: 'var(--color-background-default)',
+        'default-hover': 'var(--color-background-default-hover)',
+        'default-pressed': 'var(--color-background-default-pressed)',
+        alternative: 'var(--color-background-alternative)',
+        'alternative-hover': 'var(--color-background-alternative-hover)',
+        'alternative-pressed': 'var(--color-background-alternative-pressed)',
+        hover: 'var(--color-background-hover)',
+        pressed: 'var(--color-background-pressed)',
+    },
+    text: {
+        default: 'var(--color-text-default)',
+        alternative: 'var(--color-text-alternative)',
+        muted: 'var(--color-text-muted)',
+    },
+    border: {
+        default: 'var(--color-border-default)',
+        muted: 'var(--color-border-muted)',
+    },
+    icon: {
+        default: 'var(--color-icon-default)',
+        alternative: 'var(--color-icon-alternative)',
+        muted: 'var(--color-icon-muted)',
+    },
+    overlay: {
+        default: 'var(--color-overlay-default)',
+        alternative: 'var(--color-overlay-alternative)',
+        inverse: 'var(--color-overlay-inverse)',
+    },
+    primary: {
+        default: 'var(--color-primary-default)',
+        'default-hover': 'var(--color-primary-default-hover)',
+        'default-pressed': 'var(--color-primary-default-pressed)',
+        alternative: 'var(--color-primary-alternative)',
+        muted: 'var(--color-primary-muted)',
+        inverse: 'var(--color-primary-inverse)',
+    },
+    error: {
+        default: 'var(--color-error-default)',
+        'default-hover': 'var(--color-error-default-hover)',
+        'default-pressed': 'var(--color-error-default-pressed)',
+        alternative: 'var(--color-error-alternative)',
+        muted: 'var(--color-error-muted)',
+        inverse: 'var(--color-error-inverse)',
+    },
+    warning: {
+        default: 'var(--color-warning-default)',
+        'default-hover': 'var(--color-warning-default-hover)',
+        'default-pressed': 'var(--color-warning-default-pressed)',
+        muted: 'var(--color-warning-muted)',
+        inverse: 'var(--color-warning-inverse)',
+    },
+    success: {
+        default: 'var(--color-success-default)',
+        'default-hover': 'var(--color-success-default-hover)',
+        'default-pressed': 'var(--color-success-default-pressed)',
+        muted: 'var(--color-success-muted)',
+        inverse: 'var(--color-success-inverse)',
+    },
+    info: {
+        default: 'var(--color-info-default)',
+        muted: 'var(--color-info-muted)',
+        inverse: 'var(--color-info-inverse)',
+    },
+};
+//# sourceMappingURL=colors.cjs.map

package/dist/colors.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.cjs","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":";;;AAAa,QAAA,MAAM,GAAG;IACpB,UAAU,EAAE;QACV,OAAO,EAAE,iCAAiC;QAC1C,eAAe,EAAE,uCAAuC;QACxD,iBAAiB,EAAE,yCAAyC;QAC5D,WAAW,EAAE,qCAAqC;QAClD,mBAAmB,EAAE,2CAA2C;QAChE,qBAAqB,EAAE,6CAA6C;QACpE,KAAK,EAAE,+BAA+B;QACtC,OAAO,EAAE,iCAAiC;KAC3C;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,2BAA2B;QACpC,WAAW,EAAE,+BAA+B;QAC5C,KAAK,EAAE,yBAAyB;KACjC;IACD,MAAM,EAAE;QACN,OAAO,EAAE,6BAA6B;QACtC,KAAK,EAAE,2BAA2B;KACnC;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,2BAA2B;QACpC,WAAW,EAAE,+BAA+B;QAC5C,KAAK,EAAE,yBAAyB;KACjC;IACD,OAAO,EAAE;QACP,OAAO,EAAE,8BAA8B;QACvC,WAAW,EAAE,kCAAkC;QAC/C,OAAO,EAAE,8BAA8B;KACxC;IACD,OAAO,EAAE;QACP,OAAO,EAAE,8BAA8B;QACvC,eAAe,EAAE,oCAAoC;QACrD,iBAAiB,EAAE,sCAAsC;QACzD,WAAW,EAAE,kCAAkC;QAC/C,KAAK,EAAE,4BAA4B;QACnC,OAAO,EAAE,8BAA8B;KACxC;IACD,KAAK,EAAE;QACL,OAAO,EAAE,4BAA4B;QACrC,eAAe,EAAE,kCAAkC;QACnD,iBAAiB,EAAE,oCAAoC;QACvD,WAAW,EAAE,gCAAgC;QAC7C,KAAK,EAAE,0BAA0B;QACjC,OAAO,EAAE,4BAA4B;KACtC;IACD,OAAO,EAAE;QACP,OAAO,EAAE,8BAA8B;QACvC,eAAe,EAAE,oCAAoC;QACrD,iBAAiB,EAAE,sCAAsC;QACzD,KAAK,EAAE,4BAA4B;QACnC,OAAO,EAAE,8BAA8B;KACxC;IACD,OAAO,EAAE;QACP,OAAO,EAAE,8BAA8B;QACvC,eAAe,EAAE,oCAAoC;QACrD,iBAAiB,EAAE,sCAAsC;QACzD,KAAK,EAAE,4BAA4B;QACnC,OAAO,EAAE,8BAA8B;KACxC;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,2BAA2B;QACpC,KAAK,EAAE,yBAAyB;QAChC,OAAO,EAAE,2BAA2B;KACrC;CACF,CAAC","sourcesContent":["export const colors = {\n  background: {\n    default: 'var(--color-background-default)',\n    'default-hover': 'var(--color-background-default-hover)',\n    'default-pressed': 'var(--color-background-default-pressed)',\n    alternative: 'var(--color-background-alternative)',\n    'alternative-hover': 'var(--color-background-alternative-hover)',\n    'alternative-pressed': 'var(--color-background-alternative-pressed)',\n    hover: 'var(--color-background-hover)',\n    pressed: 'var(--color-background-pressed)',\n  },\n  text: {\n    default: 'var(--color-text-default)',\n    alternative: 'var(--color-text-alternative)',\n    muted: 'var(--color-text-muted)',\n  },\n  border: {\n    default: 'var(--color-border-default)',\n    muted: 'var(--color-border-muted)',\n  },\n  icon: {\n    default: 'var(--color-icon-default)',\n    alternative: 'var(--color-icon-alternative)',\n    muted: 'var(--color-icon-muted)',\n  },\n  overlay: {\n    default: 'var(--color-overlay-default)',\n    alternative: 'var(--color-overlay-alternative)',\n    inverse: 'var(--color-overlay-inverse)',\n  },\n  primary: {\n    default: 'var(--color-primary-default)',\n    'default-hover': 'var(--color-primary-default-hover)',\n    'default-pressed': 'var(--color-primary-default-pressed)',\n    alternative: 'var(--color-primary-alternative)',\n    muted: 'var(--color-primary-muted)',\n    inverse: 'var(--color-primary-inverse)',\n  },\n  error: {\n    default: 'var(--color-error-default)',\n    'default-hover': 'var(--color-error-default-hover)',\n    'default-pressed': 'var(--color-error-default-pressed)',\n    alternative: 'var(--color-error-alternative)',\n    muted: 'var(--color-error-muted)',\n    inverse: 'var(--color-error-inverse)',\n  },\n  warning: {\n    default: 'var(--color-warning-default)',\n    'default-hover': 'var(--color-warning-default-hover)',\n    'default-pressed': 'var(--color-warning-default-pressed)',\n    muted: 'var(--color-warning-muted)',\n    inverse: 'var(--color-warning-inverse)',\n  },\n  success: {\n    default: 'var(--color-success-default)',\n    'default-hover': 'var(--color-success-default-hover)',\n    'default-pressed': 'var(--color-success-default-pressed)',\n    muted: 'var(--color-success-muted)',\n    inverse: 'var(--color-success-inverse)',\n  },\n  info: {\n    default: 'var(--color-info-default)',\n    muted: 'var(--color-info-muted)',\n    inverse: 'var(--color-info-inverse)',\n  },\n};\n"]}

package/dist/colors.d.cts

@@ -0,0 +1,67 @@
+export declare const colors: {
+    background: {
+        default: string;
+        'default-hover': string;
+        'default-pressed': string;
+        alternative: string;
+        'alternative-hover': string;
+        'alternative-pressed': string;
+        hover: string;
+        pressed: string;
+    };
+    text: {
+        default: string;
+        alternative: string;
+        muted: string;
+    };
+    border: {
+        default: string;
+        muted: string;
+    };
+    icon: {
+        default: string;
+        alternative: string;
+        muted: string;
+    };
+    overlay: {
+        default: string;
+        alternative: string;
+        inverse: string;
+    };
+    primary: {
+        default: string;
+        'default-hover': string;
+        'default-pressed': string;
+        alternative: string;
+        muted: string;
+        inverse: string;
+    };
+    error: {
+        default: string;
+        'default-hover': string;
+        'default-pressed': string;
+        alternative: string;
+        muted: string;
+        inverse: string;
+    };
+    warning: {
+        default: string;
+        'default-hover': string;
+        'default-pressed': string;
+        muted: string;
+        inverse: string;
+    };
+    success: {
+        default: string;
+        'default-hover': string;
+        'default-pressed': string;
+        muted: string;
+        inverse: string;
+    };
+    info: {
+        default: string;
+        muted: string;
+        inverse: string;
+    };
+};
+//# sourceMappingURL=colors.d.cts.map

package/dist/colors.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.cts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiElB,CAAC"}

package/dist/colors.d.mts

@@ -0,0 +1,67 @@
+export declare const colors: {
+    background: {
+        default: string;
+        'default-hover': string;
+        'default-pressed': string;
+        alternative: string;
+        'alternative-hover': string;
+        'alternative-pressed': string;
+        hover: string;
+        pressed: string;
+    };
+    text: {
+        default: string;
+        alternative: string;
+        muted: string;
+    };
+    border: {
+        default: string;
+        muted: string;
+    };
+    icon: {
+        default: string;
+        alternative: string;
+        muted: string;
+    };
+    overlay: {
+        default: string;
+        alternative: string;
+        inverse: string;
+    };
+    primary: {
+        default: string;
+        'default-hover': string;
+        'default-pressed': string;
+        alternative: string;
+        muted: string;
+        inverse: string;
+    };
+    error: {
+        default: string;
+        'default-hover': string;
+        'default-pressed': string;
+        alternative: string;
+        muted: string;
+        inverse: string;
+    };
+    warning: {
+        default: string;
+        'default-hover': string;
+        'default-pressed': string;
+        muted: string;
+        inverse: string;
+    };
+    success: {
+        default: string;
+        'default-hover': string;
+        'default-pressed': string;
+        muted: string;
+        inverse: string;
+    };
+    info: {
+        default: string;
+        muted: string;
+        inverse: string;
+    };
+};
+//# sourceMappingURL=colors.d.mts.map

package/dist/colors.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.mts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiElB,CAAC"}

package/dist/colors.mjs

@@ -0,0 +1,67 @@
+export const colors = {
+    background: {
+        default: 'var(--color-background-default)',
+        'default-hover': 'var(--color-background-default-hover)',
+        'default-pressed': 'var(--color-background-default-pressed)',
+        alternative: 'var(--color-background-alternative)',
+        'alternative-hover': 'var(--color-background-alternative-hover)',
+        'alternative-pressed': 'var(--color-background-alternative-pressed)',
+        hover: 'var(--color-background-hover)',
+        pressed: 'var(--color-background-pressed)',
+    },
+    text: {
+        default: 'var(--color-text-default)',
+        alternative: 'var(--color-text-alternative)',
+        muted: 'var(--color-text-muted)',
+    },
+    border: {
+        default: 'var(--color-border-default)',
+        muted: 'var(--color-border-muted)',
+    },
+    icon: {
+        default: 'var(--color-icon-default)',
+        alternative: 'var(--color-icon-alternative)',
+        muted: 'var(--color-icon-muted)',
+    },
+    overlay: {
+        default: 'var(--color-overlay-default)',
+        alternative: 'var(--color-overlay-alternative)',
+        inverse: 'var(--color-overlay-inverse)',
+    },
+    primary: {
+        default: 'var(--color-primary-default)',
+        'default-hover': 'var(--color-primary-default-hover)',
+        'default-pressed': 'var(--color-primary-default-pressed)',
+        alternative: 'var(--color-primary-alternative)',
+        muted: 'var(--color-primary-muted)',
+        inverse: 'var(--color-primary-inverse)',
+    },
+    error: {
+        default: 'var(--color-error-default)',
+        'default-hover': 'var(--color-error-default-hover)',
+        'default-pressed': 'var(--color-error-default-pressed)',
+        alternative: 'var(--color-error-alternative)',
+        muted: 'var(--color-error-muted)',
+        inverse: 'var(--color-error-inverse)',
+    },
+    warning: {
+        default: 'var(--color-warning-default)',
+        'default-hover': 'var(--color-warning-default-hover)',
+        'default-pressed': 'var(--color-warning-default-pressed)',
+        muted: 'var(--color-warning-muted)',
+        inverse: 'var(--color-warning-inverse)',
+    },
+    success: {
+        default: 'var(--color-success-default)',
+        'default-hover': 'var(--color-success-default-hover)',
+        'default-pressed': 'var(--color-success-default-pressed)',
+        muted: 'var(--color-success-muted)',
+        inverse: 'var(--color-success-inverse)',
+    },
+    info: {
+        default: 'var(--color-info-default)',
+        muted: 'var(--color-info-muted)',
+        inverse: 'var(--color-info-inverse)',
+    },
+};
+//# sourceMappingURL=colors.mjs.map

package/dist/colors.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.mjs","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,UAAU,EAAE;QACV,OAAO,EAAE,iCAAiC;QAC1C,eAAe,EAAE,uCAAuC;QACxD,iBAAiB,EAAE,yCAAyC;QAC5D,WAAW,EAAE,qCAAqC;QAClD,mBAAmB,EAAE,2CAA2C;QAChE,qBAAqB,EAAE,6CAA6C;QACpE,KAAK,EAAE,+BAA+B;QACtC,OAAO,EAAE,iCAAiC;KAC3C;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,2BAA2B;QACpC,WAAW,EAAE,+BAA+B;QAC5C,KAAK,EAAE,yBAAyB;KACjC;IACD,MAAM,EAAE;QACN,OAAO,EAAE,6BAA6B;QACtC,KAAK,EAAE,2BAA2B;KACnC;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,2BAA2B;QACpC,WAAW,EAAE,+BAA+B;QAC5C,KAAK,EAAE,yBAAyB;KACjC;IACD,OAAO,EAAE;QACP,OAAO,EAAE,8BAA8B;QACvC,WAAW,EAAE,kCAAkC;QAC/C,OAAO,EAAE,8BAA8B;KACxC;IACD,OAAO,EAAE;QACP,OAAO,EAAE,8BAA8B;QACvC,eAAe,EAAE,oCAAoC;QACrD,iBAAiB,EAAE,sCAAsC;QACzD,WAAW,EAAE,kCAAkC;QAC/C,KAAK,EAAE,4BAA4B;QACnC,OAAO,EAAE,8BAA8B;KACxC;IACD,KAAK,EAAE;QACL,OAAO,EAAE,4BAA4B;QACrC,eAAe,EAAE,kCAAkC;QACnD,iBAAiB,EAAE,oCAAoC;QACvD,WAAW,EAAE,gCAAgC;QAC7C,KAAK,EAAE,0BAA0B;QACjC,OAAO,EAAE,4BAA4B;KACtC;IACD,OAAO,EAAE;QACP,OAAO,EAAE,8BAA8B;QACvC,eAAe,EAAE,oCAAoC;QACrD,iBAAiB,EAAE,sCAAsC;QACzD,KAAK,EAAE,4BAA4B;QACnC,OAAO,EAAE,8BAA8B;KACxC;IACD,OAAO,EAAE;QACP,OAAO,EAAE,8BAA8B;QACvC,eAAe,EAAE,oCAAoC;QACrD,iBAAiB,EAAE,sCAAsC;QACzD,KAAK,EAAE,4BAA4B;QACnC,OAAO,EAAE,8BAA8B;KACxC;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,2BAA2B;QACpC,KAAK,EAAE,yBAAyB;QAChC,OAAO,EAAE,2BAA2B;KACrC;CACF,CAAC","sourcesContent":["export const colors = {\n  background: {\n    default: 'var(--color-background-default)',\n    'default-hover': 'var(--color-background-default-hover)',\n    'default-pressed': 'var(--color-background-default-pressed)',\n    alternative: 'var(--color-background-alternative)',\n    'alternative-hover': 'var(--color-background-alternative-hover)',\n    'alternative-pressed': 'var(--color-background-alternative-pressed)',\n    hover: 'var(--color-background-hover)',\n    pressed: 'var(--color-background-pressed)',\n  },\n  text: {\n    default: 'var(--color-text-default)',\n    alternative: 'var(--color-text-alternative)',\n    muted: 'var(--color-text-muted)',\n  },\n  border: {\n    default: 'var(--color-border-default)',\n    muted: 'var(--color-border-muted)',\n  },\n  icon: {\n    default: 'var(--color-icon-default)',\n    alternative: 'var(--color-icon-alternative)',\n    muted: 'var(--color-icon-muted)',\n  },\n  overlay: {\n    default: 'var(--color-overlay-default)',\n    alternative: 'var(--color-overlay-alternative)',\n    inverse: 'var(--color-overlay-inverse)',\n  },\n  primary: {\n    default: 'var(--color-primary-default)',\n    'default-hover': 'var(--color-primary-default-hover)',\n    'default-pressed': 'var(--color-primary-default-pressed)',\n    alternative: 'var(--color-primary-alternative)',\n    muted: 'var(--color-primary-muted)',\n    inverse: 'var(--color-primary-inverse)',\n  },\n  error: {\n    default: 'var(--color-error-default)',\n    'default-hover': 'var(--color-error-default-hover)',\n    'default-pressed': 'var(--color-error-default-pressed)',\n    alternative: 'var(--color-error-alternative)',\n    muted: 'var(--color-error-muted)',\n    inverse: 'var(--color-error-inverse)',\n  },\n  warning: {\n    default: 'var(--color-warning-default)',\n    'default-hover': 'var(--color-warning-default-hover)',\n    'default-pressed': 'var(--color-warning-default-pressed)',\n    muted: 'var(--color-warning-muted)',\n    inverse: 'var(--color-warning-inverse)',\n  },\n  success: {\n    default: 'var(--color-success-default)',\n    'default-hover': 'var(--color-success-default-hover)',\n    'default-pressed': 'var(--color-success-default-pressed)',\n    muted: 'var(--color-success-muted)',\n    inverse: 'var(--color-success-inverse)',\n  },\n  info: {\n    default: 'var(--color-info-default)',\n    muted: 'var(--color-info-muted)',\n    inverse: 'var(--color-info-inverse)',\n  },\n};\n"]}

package/dist/index.cjs

@@ -0,0 +1,36 @@
+"use strict";
+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,
+        },
+    },
+    plugins: [
+        shadows_1.shadowPlugin, // Allows for combination of size and color shadow utilities
+    ],
+};
+exports.default = tailwindConfig;
+module.exports = tailwindConfig;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;AAEA,yCAAkC;AAClC,2CAAkD;AAClD,iDAA0C;AAE1C,MAAM,cAAc,GAAW;IAC7B,OAAO,EAAE,EAAE;IACX,KAAK,EAAE;QACL,MAAM,EAAE;YACN,MAAM,EAAE;gBACN,GAAG,eAAM;aACV;YACD,8DAA8D;YAC9D,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;gBACzB,GAAG,KAAK,CAAC,QAAQ,CAAC;gBAClB,GAAG,eAAM,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,eAAM,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,eAAM,CAAC,MAAM,EAAE,uDAAuD;aAC1E,CAAC;YACF,GAAG,uBAAU;YACb,SAAS,EAAE,iBAAO;SACnB;KACF;IACD,OAAO,EAAE;QACP,sBAAY,EAAE,4DAA4D;KAC3E;CACF,CAAC;AAEF,kBAAe,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    },\n  },\n  plugins: [\n    shadowPlugin, // Allows for combination of size and color shadow utilities\n  ],\n};\n\nexport default tailwindConfig;\nmodule.exports = tailwindConfig;\n"]}

package/dist/index.d.cts

@@ -0,0 +1,4 @@
+import type { Config } from "tailwindcss";
+declare const tailwindConfig: Config;
+export default tailwindConfig;
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,oBAAoB;AAM1C,QAAA,MAAM,cAAc,EAAE,MA2BrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/index.d.mts

@@ -0,0 +1,4 @@
+import type { Config } from "tailwindcss";
+declare const tailwindConfig: Config;
+export default tailwindConfig;
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,oBAAoB;AAM1C,QAAA,MAAM,cAAc,EAAE,MA2BrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/index.mjs

@@ -0,0 +1,34 @@
+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,
+        },
+    },
+    plugins: [
+        shadowPlugin, // Allows for combination of size and color shadow utilities
+    ],
+};
+export default tailwindConfig;
+module.exports = tailwindConfig;
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"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;SACnB;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    },\n  },\n  plugins: [\n    shadowPlugin, // Allows for combination of size and color shadow utilities\n  ],\n};\n\nexport default tailwindConfig;\nmodule.exports = tailwindConfig;\n"]}

package/dist/shadows.cjs

@@ -0,0 +1,46 @@
+"use strict";
+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

package/dist/shadows.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadows.cjs","sourceRoot":"","sources":["../src/shadows.ts"],"names":[],"mappings":";;;;;;AAAA,mEAAwC;AAExC;;;;;;;;;GASG;AAEU,QAAA,OAAO,GAAG;IACrB,EAAE,EAAE,wEAAwE;IAC5E,EAAE,EAAE,wEAAwE;IAC5E,EAAE,EAAE,wEAAwE;IAC5E,EAAE,EAAE,wEAAwE;CAC7E,CAAC;AAEW,QAAA,YAAY,GAAG;IAC1B,OAAO,EAAE,6BAA6B;IACtC,OAAO,EAAE,6BAA6B;IACtC,KAAK,EAAE,2BAA2B;CACnC,CAAC;AAEF;;;GAGG;AACU,QAAA,YAAY,GAAG,IAAA,gBAAM,EAAC,UAAU,EAC3C,YAAY,GASb;IACC,MAAM,oBAAoB,GAA2C,EAAE,CAAC;IAExE,MAAM,CAAC,OAAO,CAAC,oBAAY,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"]}

package/dist/shadows.d.cts

@@ -0,0 +1,30 @@
+/**
+ * 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)
+ */
+export declare const shadows: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+};
+export declare const shadowColors: {
+    default: string;
+    primary: string;
+    error: string;
+};
+/**
+ * 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.
+ */
+export declare const shadowPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+};
+//# sourceMappingURL=shadows.d.cts.map

package/dist/shadows.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadows.d.cts","sourceRoot":"","sources":["../src/shadows.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY;;;CAwBvB,CAAC"}

package/dist/shadows.d.mts

@@ -0,0 +1,30 @@
+/**
+ * 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)
+ */
+export declare const shadows: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+};
+export declare const shadowColors: {
+    default: string;
+    primary: string;
+    error: string;
+};
+/**
+ * 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.
+ */
+export declare const shadowPlugin: {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+};
+//# sourceMappingURL=shadows.d.mts.map

package/dist/shadows.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadows.d.mts","sourceRoot":"","sources":["../src/shadows.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY;;;CAwBvB,CAAC"}