Colors System

• 中文文档
• docs online

Installation

npm install icolors-vars
pnpm install icolors-vars
yarn add icolors-vars

Design motivation

Sometimes, we need a design system where users can get the job done quickly. Use the existing color design system on the market and get familiar with quick color matching.

Naming

• --i indicates the iColorsSystem design system problem
• -antd indicates the design system name
• -red-100 indicates read and color scale

Integrated color system

• antd
• tailwind
• elm-plus
• material-ui

Use in CSS

• icolors-vars in React main entry file

import 'icolors-vars' // current is antd
import 'icolors-vars/antd.css' // antd.css
import 'icolors-vars/tailwind.css' // tailwind.css
import 'icolors-vars/mui.css' // mui.css
import 'icolors-vars/elm-plus.css' // elm-plus.css

div {
  colors: var(--i-antd-red-100);
  background-color: var(--i-mui-red-A400);
}

Use in javascript runtime

import colors from 'icolors-vars/index.js'
import antd from 'icolors-vars/antd.js'
import elmPlus from 'icolors-vars/elm-plus.js'
import mui from 'icolors-vars/mui.js'
import tailwind from 'icolors-vars/tailwind.js'

const c1 = colors.antd.100
const c2 = colors.elmPlus.100
const c3 = colors.mui.100
const c4 = colors.tailWind.100

const ac1 = antd.100
const ac2 = elmPlus.100
const ac3 = mui.100
const ac4 = tailwind.100

color utils

import { invertHexColor } form 'icolors-vars'

const writeInvertHexColor = invertHexColor('#000000')

Note

At present, references in the dist directory are used, and in the future, the dist file will be removed to make the reference more simple and reasonable