jds-color-system
v1.2.2
Published
Extend Tailwind CSS colors with JDS Color System
Downloads
46
Maintainers
Readme
✨ Introduction
Add Jabar Design System's color tokens to your Tailwind CSS config file. You can choose to extend, or override Tailwind CSS default colors. No more manually ✨copy and paste✨ color from Figma to your code.
🦄 Available Colors
| Color | from Shade | to Shade | | --------- | ---------- | -------- | | yellow | 50 | 900 | | green | 50 | 900 | | blue | 50 | 900 | | pink | 50 | 900 | | red | 50 | 900 | | purple | 50 | 900 | | gray | 50 | 900 | | blue-gray | 50 | 900 |
🚀 How to Use
Installation
$ npm install jds-color-system
Extends Tailwind CSS Color
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
import JDSColorSystem from 'jds-color-system'
export default {
// ...your default config options
theme: {
extend: {
colors: {
...JDSColorSystem()
}
}
}
}
JDS Color System will be available from shade 50 to shade 900. You can use them like this jds-{color}-{shade}
<p class="text-jds-green-50">JDS Color System</p>
<!-- ... -->
<p class="text-jds-green-900">JDS Color System</p>
<div class="bg-jds-blue-50" />
<!-- ... -->
<div class="bg-jds-blue-900" />
<div class="border border-jds-red-50" />
<!-- ... -->
<div class="border border-jds-red-900" />
Override Tailwind CSS Color
If you want to override Tailwind CSS colors instead of extending them, you can pass override
option to the JDSColorSystem
function.
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
import JDSColorSystem from 'jds-color-system'
export default {
// ...your default config options
theme: {
extend: {
colors: {
...JDSColorSystem({ override: true })
}
}
}
}
The JDS Color System should replace the default Tailwind CSS colors
<p class="text-green-50">JDS Color System</p>
<!-- ... -->
<p class="text-green-900">JDS Color System</p>
<div class="bg-blue-50" />
<!-- ... -->
<div class="bg-blue-900" />
<div class="border border-red-50" />
<!-- ... -->
<div class="border border-red-900" />
📄 License
MIT License © 2024-PRESENT Jabar Digital Service