@skillzet/tokens
Version:
Design Tokens
102 lines (94 loc) • 2.08 kB
JavaScript
export const colors = {
white: "ffffff",
// GRAY
gray25: "#f7f7f8",
gray50: "#eeeff0",
gray100: "#d4d7dd",
gray200: "#b8bdc7",
gray300: "#9ca3b1",
gray400: "#868fa0",
gray500: "#717b8f",
gray600: "#636d7e",
gray700: "#515967",
gray800: "#414752",
gray900: "#2e323a",
grayDefault: "#2e323a",
grayLight: "#575b64",
grayDark: "#040a14",
// BLUE
blue25: "#f1f8fe",
blue50: "#e5f3fe",
blue100: "#c1e1fd",
blue200: "#9bcffc",
blue300: "#77bcf9",
blue400: "#5eacf8",
blue500: "#4d9ef6",
blue600: "#4890e8",
blue700: "#417ed5",
blue800: "#3c6dc2",
blue900: "#324ea2",
blueDefault: "#4890e8",
blueLight: "#2e323a",
blueDark: "#2e323a",
// ORANGE
orange25: "#fef9f1",
orange50: "#fdf3e2",
orange100: "#fce0b7",
orange200: "#facc89",
orange300: "#f8b85c",
orange400: "#f7a93d",
orange500: "#f59b2c",
orange600: "#f18f29",
orange700: "#ea8025",
orange800: "#e37223",
orange900: "#d85b1f",
orangeDefault: "#f59b2c",
orangeLight: "#ffcc5e",
orangeDark: "#bd6c00",
// PURPLE
purple25: "#f2f1fe",
purple50: "#ebeafd",
purple100: "#cbcaf9",
purple200: "#a8a8f6",
purple300: "#8485f2",
purple400: "#6967ee",
purple500: "#5048e8",
purple600: "#4b3fdc",
purple700: "#4233d0",
purple800: "#3b25c4",
purple900: "#2d00b3",
purpleDefault: "#6967ee",
purpleLight: "#8b75ff",
purpleDark: "#001eb5",
// RED
red25: "#fef6f6",
red50: "#fceded",
red100: "#f8d1d1",
red200: "#e4a29a",
red300: "#d68075",
red400: "#dd6952",
red500: "#df603a",
red600: "#d15839",
red700: "#bf4e34",
red800: "#b2492e",
red900: "#a43f23",
redDefault: "#dd6952",
redLight: "#ff997f",
redDark: "#a63a29",
// GREEN
green25: "#f8fbf3",
green50: "#f2f8e8",
green100: "#ddeec5",
green200: "#c7e2a0",
green300: "#b0d779",
green400: "#9ece5b",
green500: "#8dc53c",
green600: "#7db534",
green700: "#68a12a",
green800: "#548d21",
green900: "#2f6b0d",
greenDefault: "#7db534",
greenLight: "#b0e765",
greenDark: "#4c8500",
};
export default colors;