@traent/design-system NPM

@traent/design-system is a group of UI utilities (Tailwind configurations, SCSS files and images) used in almost all Traent project.
Notice: This library is currently under development and might be subjected to breaking changes.

Installation

You can install it via NPM:

npm install @traent/design-system

API & Examples

In your Tailwind configuration you can extend it using our theme and plugins. For example in your tailwind.config.js:

/** @type {import('tailwindcss').Config} */

const tw_traent = require('@traent/design-system/tailwind/tw-base-theme');
const tw_plugins = require('@traent/design-system/tailwind/tw-plugins');
const prefix = 'tw-';

module.exports = {
  prefix,
  important: true,
  content: [
    "<path-to-observe-in-your-app>",
  ],
  theme: {
    extend: { ...tw_traent.theme },
  },
  plugins: [
    function ({ addBase, theme }) {
      addBase({
        ':root': { ...tw_plugins.extractPalette(theme('colors')) },
        ...tw_plugins.customContainer(prefix),
        ...tw_plugins.customHeading(prefix),
        ...tw_plugins.fontOverride(prefix),
        ...tw_plugins.hideScrollbars(prefix),
        ...tw_plugins.hoverContainer(prefix),
        ...tw_plugins.matIconHeight(prefix),
      });
    },
  ],
}