@madeja-studio/telar/src/theme/color.ts

UI component library by Madeja Studio

/**
 * Color palette extracted from the Carbon Design System by IBM.
 *
 * {@link https://carbondesignsystem.com/}
 */

export type Color = string;

export const black = '#000000';
export const white = '#ffffff';

export const yellow = {
  10: '#fcf4d6',
  20: '#fddc69',
  30: '#f1c21b',
  40: '#d2a106',
  50: '#b28600',
  60: '#8e6a00',
  70: '#684e00',
  80: '#483700',
  90: '#302400',
  100: '#1c1500',
};

export const orange = {
  10: '#fff2e8',
  20: '#ffd9be',
  30: '#ffb784',
  40: '#ff832b',
  50: '#eb6200',
  60: '#ba4e00',
  70: '#8a3800',
  80: '#5e2900',
  90: '#3e1a00',
  100: '#231000',
};

export const red = {
  10: '#fff1f1',
  20: '#ffd7d9',
  30: '#ffb3b8',
  40: '#ff8389',
  50: '#fa4d56',
  60: '#da1e28',
  70: '#a2191f',
  80: '#750e13',
  90: '#520408',
  100: '#2d0709',
};

export const magenta = {
  10: '#fff0f7',
  20: '#ffd6e8',
  30: '#ffafd2',
  40: '#ff7eb6',
  50: '#ee5396',
  60: '#d02670',
  70: '#9f1853',
  80: '#740937',
  90: '#510224',
  100: '#2a0a18',
};

export const purple = {
  10: '#f6f2ff',
  20: '#e8daff',
  30: '#d4bbff',
  40: '#be95ff',
  50: '#a56eff',
  60: '#8a3ffc',
  70: '#6929c4',
  80: '#491d8b',
  90: '#31135e',
  100: '#1c0f30',
};

export const blue = {
  10: '#edf5ff',
  20: '#d0e2ff',
  30: '#a6c8ff',
  40: '#78a9ff',
  50: '#4589ff',
  60: '#0f62fe',
  70: '#0043ce',
  80: '#002d9c',
  90: '#001d6c',
  100: '#001141',
};

export const cyan = {
  10: '#e5f6ff',
  20: '#bae6ff',
  30: '#82cfff',
  40: '#33b1ff',
  50: '#1192e8',
  60: '#0072c3',
  70: '#00539a',
  80: '#003a6d',
  90: '#012749',
  100: '#061727',
};

export const teal = {
  10: '#d9fbfb',
  20: '#9ef0f0',
  30: '#3ddbd9',
  40: '#08bdba',
  50: '#009d9a',
  60: '#007d79',
  70: '#005d5d',
  80: '#004144',
  90: '#022b30',
  100: '#081a1c',
};

export const green = {
  10: '#defbe6',
  20: '#a7f0ba',
  30: '#6fdc8c',
  40: '#42be65',
  50: '#24a148',
  60: '#198038',
  70: '#0e6027',
  80: '#044317',
  90: '#022d0d',
  100: '#071908',
};

export const coolGray = {
  10: '#f2f4f8',
  20: '#dde1e6',
  30: '#c1c7cd',
  40: '#a2a9b0',
  50: '#878d96',
  60: '#697077',
  70: '#4d5358',
  80: '#343a3f',
  90: '#21272a',
  100: '#121619',
};

export const gray = {
  10: '#f4f4f4',
  20: '#e0e0e0',
  30: '#c6c6c6',
  40: '#a8a8a8',
  50: '#8d8d8d',
  60: '#6f6f6f',
  70: '#525252',
  80: '#393939',
  90: '#262626',
  100: '#161616',
};

export const warmGray = {
  10: '#f7f3f2',
  20: '#e5e0df',
  30: '#cac5c4',
  40: '#ada8a8',
  50: '#8f8b8b',
  60: '#726e6e',
  70: '#565151',
  80: '#3c3838',
  90: '#272525',
  100: '#171414',
};

export const color = {
  black,
  blue,
  coolGray,
  cyan,
  gray,
  green,
  magenta,
  orange,
  purple,
  red,
  teal,
  warmGray,
  white,
  yellow,
};