Colors

Colors are organized in the pattern of hue + color weight

• hue
• Shade to add shadows to existing colors to make them darker.

Usage

import { purple, deepPurple, black } from '@apitable/components';
Copy

Taking purple as an example, the color palette divides purple into 11 regions, purple[50], purple[100], purple[200]... purple[1000], from light to dark.

Color object data structure

Take the theme color system as an example, where deepPurple[500] is the theme color:

export const deepPurple = {
  50: '#EDEAFF',
  100: '#DCD6FF',
  200: '#CEC5FF',
  300: '#A697FB',
  400: '#8B7AF0',
  500: '#7B67EE',
  600: '#6653D1',
  700: '#5342B4',
  800: '#413297',
  900: '#312479',
  1000: '#160F3F',
};
Copy

Theme color

Common color

status color

Swatches

Color processing function

getActionColor

import { getActionColor } from '@apitable/components';
Copy

Parse the colors in the palette to get the colors of the hover and active states. For example: purple[400] The result calculated by getActionColor is as follows:

The effect of using Button is as follows:

getContrastText

import { getContrastText } from '@apitable/components';
Copy

Based on the background color, the foreground text color is automatically generated. Make the overall effect visual experience more comfortable and friendly:

• Light background with black font.
• Dark backgrounds give white fonts.

convertHexToRGB

import { convertHexToRGB } from '@apitable/components';
Copy

Supports converting color palettes and other colors from HEX format to RGB, and supports transparency configuration, compatible with the following usages:

• convertHexToRGB(purple[100]) => rgb(228, 197, 251)
• convertHexToRGB('#E4C5FB') => rgb(228, 197, 251)
• convertHexToRGB('#E4C5FB', 0.5) => rgb(228, 197, 251, 0.5)

Related

• Color in Design Systems
• TinyColor JS Color Manipulation Detection Library