Jabar Digital Service Color System

✨ 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

Figma - JDS Color System

🚀 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