react-restyle-components
Version:
Easy use restyle components
218 lines (200 loc) • 5.12 kB
CSS
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);
}