cwl/ui

Color System

Versatile color system inspired by Wedges Design System.

The color palette is divided into two categories:

  • Core Color Palette: The set of color colors that are consistent across all themes.
  • Theme Color Palette: A set of colors that adapt to the theme that is currently applied.

Core Color Palette

All core colors can be found in cwl-ui-colors.

Gray
50
100
200
300
400
500*
600
700
800
900
Yellow
50
100
200
300
400
500*
600
700
800
900
Green
50
100
200
300
400
500*
600
700
800
900
Blue
50
100
200
300
400
500*
600
700
800
900
Purple
50
100
200
300
400
500*
600
700
800
900
Orange
50
100
200
300
400
500*
600
700
800
900
Red
50
100
200
300
400
500*
600
700
800
900
Pink
50
100
200
300
400
500*
600
700
800
900

Configuration

If you would like to consume just the color palette, you can swap them with standard tailwind colors.

export const palette = {
  white,
  blue,
  gray,
  green,
  orange,
  pink,
  purple,
  red,
  yellow,
  black,
} as const
import { palette } from 'cwl-ui-colors'
 
module.exports = {
  content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        white: {
          ...palette.white,
        },
        gray: {
          ...palette.gray,
        },
        yellow: {
          ...palette.gray,
        },
        // ... more colors
      },
    },
  },
}

Usage

<div class="bg-gray-500 text-white p-4">Gray 500</div>
<div class="bg-yellow-500 text-white p-4">Yellow 500</div>
<div class="bg-green-500 text-white p-4">Green 500</div>

Color Scale

cwl-ui-colors uses a 10-step color scale with a default color just like tailwind. This allows you to easily adjust the color of an element by changing the class name.

export type ColorScale = {
  50: string
  100: string
  200: string
  300: string
  400: string
  500: string
  600: string
  700: string
  800: string
  900: string
  DEFAULT: string
}