✨ 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