Easypost - Angular Toolkit

Easypost Angular Toolkit is a comprehensive library designed for Angular developers, providing a range of pre-built UI components and commonly reused features. Built on the foundation of Tailwind CSS, the toolkit offers a modern, flexible, and responsive design system, allowing for easy customization and rapid UI development.

Getting Started

1. Install Easypost Angular Toolkit as a dependency using NPM by running the following command:

npm install easypost-angular-toolkit

2. Make sure that you add the template path and the required plugin to the tailwind.config.ts file:

export default {
  content: [
    "./src/**/*.{html,ts}",
    "./node_modules/easypost-angular-toolkit/**/*.{html,ts,mjs}",
  ],
  plugins: [
    require('@tailwindcss/forms'),
  ],
} satisfies Config

3. To support theming, also add the following to tailwind.config.ts:

const colourNames = ['slate', 'gray', 'zinc', 'neutral', 'stone', 'red', 'orange', 'amber', 'yellow', 'lime',
  'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'];
const colourUtils = ['text', 'bg', 'border', 'ring', 'to', 'from'];
const variants = ['hover', 'focus', 'focus-within', 'active'];
const shades = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'];

export default {
  safelist: [
    {
      pattern: new RegExp(`^(${colourUtils.join('|')})-(${colourNames.join('|')})-(${shades.join('|')})$`),
      variants: variants
    }
  ],
} satisfies Config

Also inject the preferred colour in the library by adding the following lines in app.config.ts:

export const themingConfig: ThemingConfig = {accentColour: 'yellow'}

export const appConfig: ApplicationConfig = {
  providers: [
    {provide: THEMING_CONFIG, useValue: themingConfig},
  ]
};