react-restyle-components/lib/src/assets/styles/colors.css

Easy use restyle components

html.theme--dark {
  color-scheme: dark;
}
html.theme--light {
  color-scheme: light;
}

:root {
  --B25: #ebf3ff;
  --B50: #dbeaff;
  --B100: #b2d2ff;
  --B200: #9bc5ff;
  --B300: #7ab1fd;
  --B400: #337ee7;
  --B500: #145bbf;
  --B600: #0c489c;
  --B700: #033273;
  --Brand: var(--B700);

  --A50: #e0feff;
  --A100: #adf8fb;
  --A200: #5ae8ed;
  --A300: #36dbe0;
  --A400: #1ac7cd;
  --A500: #16a8ad;
  --A600: #108b8f;
  --A700: #075255;
  --Accent: var(--A400);

  --N0: #ffffff;
  --N25: #f9f9f9;
  --N50: #f2f2f2;
  --N75: #e6e6e6;
  --N100: #dbdbdb;
  --N200: #cbcbcb;
  --N300: #b5b5b5;
  --N400: #a4a2a2;
  --N500: #808080;
  --N600: #4d4d4d;
  --N700: #242323;
  --N1000: #000000;
  --Natural: var(--N700);

  --Gl25: #f7f9fc;
  --Gl50: #e7edf8;
  --Gl100: #d6e1f4;
  --Gl200: #b9c8e7;
  --Gl300: #9babd1;
  --Gl400: #7a89b1;
  --Gl500: #566384;
  --Gl600: #4a5777;
  --Gl700: #3f4b6a;
  --Gl800: #2e3750;
  --Gl850: #262e43;
  --Gl900: #1e2537;
  --Gl950: #1b1d24;
  --Glacious: var(--Gl800);

  --HO50: #ffded5;
  --HO100: #feb9a5;
  --HO200: #ff906e;
  --HO300: #ff784f;
  --HO400: #ff5d2d;
  --HO500: #eb4d13;
  --HO600: #7e2600;
  --HO700: #421604;
  --HotOrange: var(--HO400);

  --Y50: #fbf3e0;
  --Y100: #f9e3b6;
  --Y200: #fcc003;
  --Y300: #e4a201;
  --Y400: #ca8501;
  --Y500: #a35803;
  --Y600: #6f3400;
  --Y700: #2e2204;
  --Yellow: var(--Y200);

  --Gr25: #eafae6;
  --Gr50: #cdefc4;
  --Gr100: #91db8b;
  --Gr200: #45c65a;
  --Gr300: #3ba755;
  --Gr400: #2e844a;
  --Gr500: #22683e;
  --Gr600: #194e31;
  --Gr700: #0e3522;
  --Green: var(--Gr300);

  --CB50: #cfe9fe;
  --CB100: #90d0fe;
  --CB200: #1ab9ff;
  --CB300: #08abed;
  --CB400: #0d9dda;
  --CB500: #107cad;
  --CB600: #084968;
  --CB700: #023248;
  --CloudBlue: var(--CB500);

  --I50: #e0e5f8;
  --I100: #bec7f6;
  --I200: #9ea9f1;
  --I300: #8e9bef;
  --I400: #7f8ced;
  --I500: #5867e8;
  --I600: #3a49da;
  --I700: #260f8f;
  --Indigo: var(--I500);

  --Pu50: #ece1f9;
  --Pu100: #d7bff2;
  --Pu200: #c29ef1;
  --Pu300: #b78def;
  --Pu400: #ad7bee;
  --Pu500: #9050e9;
  --Pu600: #7526e3;
  --Pu700: #401075;
  --Purple: var(--Pu500);

  --V50: #f2defe;
  --V100: #e5b9fe;
  --V200: #d892fe;
  --V300: #d384fe;
  --V400: #cb65ff;
  --V500: #ba01ff;
  --V600: #7b119a;
  --V700: #3d0157;
  --Violet: var(--V500);

  --Pi50: #fddde3;
  --Pi100: #fdb6c5;
  --Pi200: #fe8aa7;
  --Pi300: #fe7298;
  --Pi400: #ff538a;
  --Pi500: #e3066a;
  --Pi600: #b60554;
  --Pi700: #61022a;
  --Pink: var(--Pi400);

  --R25: #fcece8;
  --R50: #ffdfd7;
  --R100: #feb8ab;
  --R200: #fe8f7d;
  --R300: #fe7765;
  --R400: #fe5c4c;
  --R500: #ee3e3e;
  --R600: #ba0517;
  --R700: #640103;
  --Red: var(--R400);

  --color-impersonation-start: #ec4b4b;
  --color-bloomberg: #fe9c29;
}

.theme--dark {
  --global-focus-color: var(--B300);
  --global-window-border-color: var(--Gl800);
  --global-text-primary: var(--N0);
  --global-text-primary-inverse: var(--N1000);
  --global-text-secondary: var(--Gl100);
  --global-input-disabled-color: var(--Gl600);
  --global-input-bg: var(--Gl800);
  --global-input-disabled-bg: var(--Gl800);
  --global-input-disabled-label-color: var(--Gl600);
  --global-input-error-highlight: var(--R400);
  --global-input-placeholder-color: rgb(from var(--N0) r g b / 0.4);
  --global-input-caret-color: var(--B300);
  --global-input-error-caret-color: var(--R400);
  --global-input-border-color: var(--Gl600);
  --global-input-color: var(--N0);
  --global-input-label-color: var(--Gl100);
}

.theme--light {
  --global-focus-color: var(--B400);
  --global-window-border-color: var(--N100);
  --global-text-primary: var(--N1000);
  --global-text-primary-inverse: var(--N0);
  --global-text-secondary: var(--N700);
  --global-input-disabled-color: var(--N300);
  --global-input-bg: var(--N0);
  --global-input-disabled-bg: var(--N50);
  --global-input-disabled-label-color: var(--N300);
  --global-input-error-highlight: var(--R500);
  --global-input-placeholder-color: var(--N300);
  --global-input-caret-color: var(--B500);
  --global-input-error-caret-color: var(--R500);
  --global-input-border-color: var(--N200);
  --global-input-color: var(--N1000);
  --global-input-label-color: var(--N700);
}

/* Menu colors - used for Dropdowns, Context Menus, etc */
.theme--dark {
  --menu-panel-bg-color: var(--Gl700);
  --menu-panel-border-color: var(--Gl500);
  --menu-button-bg-color-hover: var(--Gl500);
  --menu-heading-color: var(--A400);
  --menu-toggle_bg: var(--Gl400);
  --menu-toggle_bg_disabled: var(--Gl800);
  --menu-toggle_thumb_bg_disabled: var(--Gl500);
  --menu-toggle_bg_active: var(--A400);
  --menu-toggle_thumb_bg: var(--N0);
  --menu-panel-shadow-color: rgba(0, 0, 0, 0.4);
}
.theme--light {
  --menu-panel-bg-color: var(--N0);
  --menu-panel-border-color: var(--N100);
  --menu-button-bg-color-hover: var(--N50);
  --menu-heading-color: var(--A500);
  --menu-toggle_bg: var(--N200);
  --menu-toggle_bg_disabled: var(--N50);
  --menu-toggle_thumb_bg_disabled: var(--N300);
  --menu-toggle_bg_active: var(--A500);
  --menu-toggle_thumb_bg: var(--N0);
  --menu-panel-shadow-color: rgba(0, 0, 0, 0.15);
}