@traent/design-system
v0.0.8
Published
Official Traent Design System
Downloads
90
Maintainers
Readme
@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),
});
},
],
}
Building & Publishing
The publishing of this library to NPM is performed through an internal Organization flow that uses the standard Angular approach.
License
@traent/design-system
is available under the Apache-2 license. See the LICENSE file for more info.
Contributors
We are open to any contributions and feedbacks.