34b5f52f0c
* Replace images with new SVG components, replace backgrounds * Add Denim and Onyx themes, fix associated themeing issues * Add back elevation variables --------- Co-authored-by: Mattermost Build <build@mattermost.com>
124 lines
4.4 KiB
SCSS
124 lines
4.4 KiB
SCSS
:root {
|
|
/* colors used but not themed */
|
|
--indigo-400: #28427B;
|
|
--indigo-300: #32539A;
|
|
--sand: #CCC4AE;
|
|
--neutral-0: #FFFFFF;
|
|
--neutral-1200: #090A0B;
|
|
--yellow-400: #FFBC1F;
|
|
|
|
/* Elevation values used for box shadows.
|
|
Defined as CSS variables so that both sass and JS can use them.
|
|
*/
|
|
--elevation-1: 0 2px 3px 0 rgba(0, 0, 0, 0.08);
|
|
--elevation-2: 0 4px 6px 0 rgba(0, 0, 0, 0.12);
|
|
--elevation-3: 0 6px 14px 0 rgba(0, 0, 0, 0.12);
|
|
--elevation-4: 0 8px 24px 0 rgba(0, 0, 0, 0.12);
|
|
--elevation-5: 0 12px 32px 0 rgba(0, 0, 0, 0.12);
|
|
--elevation-6: 0 20px 32px 0 rgba(0, 0, 0, 0.12);
|
|
|
|
/* Denim - used for light mode */
|
|
--away-indicator-rgb: 255, 188, 31;
|
|
--button-bg-rgb: 28, 88, 217;
|
|
--button-color-rgb: 255, 255, 255;
|
|
--center-channel-bg-rgb: 255, 255, 255;
|
|
--center-channel-color-rgb: 63, 67, 80;
|
|
--dnd-indicator-rgb: 210, 75, 78;
|
|
--error-text-color-rgb: 210, 75, 78;
|
|
--link-color-rgb: #386fe5;
|
|
--mention-bg-rgb: 255, 255, 255;
|
|
--mention-color-rgb: 30, 50, 92;
|
|
--mention-highlight-bg-rgb: 255, 212, 112;
|
|
--mention-highlight-link-rgb: 27, 29, 34;
|
|
--mention-highlight-bg-mixed-rgb: 255, 233, 183;
|
|
--pinned-highlight-bg-mixed-rgb: 255, 244, 220;
|
|
--own-highlight-bg-rgb: 245, 204, 110;
|
|
--new-message-separator-rgb: 204, 143, 0;
|
|
--online-indicator-rgb: 61, 184, 135;
|
|
--sidebar-bg-rgb: 30, 50, 92;
|
|
--sidebar-header-bg-rgb: 25, 42, 77;
|
|
--sidebar-teambar-bg-rgb: 22, 37, 69;
|
|
--sidebar-header-text-color-rgb: 255, 255, 255;
|
|
--sidebar-text-rgb: 255, 255, 255;
|
|
--sidebar-text-active-border-rgb: 93, 137, 234;
|
|
--sidebar-text-active-color-rgb: 255, 255, 255;
|
|
--sidebar-text-hover-bg-rgb: 40, 66, 123;
|
|
--sidebar-unread-text-rgb: 255, 255, 255;
|
|
--sidebar-bg: #1e325c;
|
|
--sidebar-text: #ffffff;
|
|
--sidebar-unread-text: #ffffff;
|
|
--sidebar-text-hover-bg: #28427b;
|
|
--sidebar-text-active-border: #5d89ea;
|
|
--sidebar-text-active-color: #ffffff;
|
|
--sidebar-header-bg: #192a4d;
|
|
--sidebar-teambar-bg: #162545;
|
|
--sidebar-header-text-color: #ffffff;
|
|
--online-indicator: #3db887;
|
|
--away-indicator: #ffbc1f;
|
|
--dnd-indicator: #d24b4e;
|
|
--mention-bg: #ffffff;
|
|
--mention-color: #1e325c;
|
|
--center-channel-bg: #ffffff;
|
|
--center-channel-color: #3f4350;
|
|
--new-message-separator: #cc8f00;
|
|
--link-color: #386fe5;
|
|
--button-bg: #1c58d9;
|
|
--button-color: #ffffff;
|
|
--error-text: #d24b4e;
|
|
--mention-highlight-bg: #ffd470;
|
|
--mention-highlight-link: #1b1d22;
|
|
}
|
|
|
|
.LoadingScreen--darkMode {
|
|
/* Onyx - used for dark mode*/
|
|
--away-indicator-rgb: 245, 171, 0;
|
|
--button-bg-rgb: 74, 124, 232;
|
|
--button-color-rgb: 255, 255, 255;
|
|
--center-channel-bg-rgb: 25, 27, 31;
|
|
--center-channel-color-rgb: 227, 228, 232;
|
|
--dnd-indicator-rgb: 210, 75, 78;
|
|
--error-text-color-rgb: 218, 108, 110;
|
|
--link-color-rgb: #5d89ea;
|
|
--mention-bg-rgb: 75, 124, 231;
|
|
--mention-color-rgb: 255, 255, 255;
|
|
--mention-highlight-bg-rgb: 13, 110, 110;
|
|
--mention-highlight-link-rgb: 164, 244, 244;
|
|
--mention-highlight-bg-mixed-rgb: 19, 68, 70;
|
|
--pinned-highlight-bg-mixed-rgb: 22, 46, 49;
|
|
--own-highlight-bg-rgb: 23, 115, 116;
|
|
--new-message-separator-rgb: 26, 219, 219;
|
|
--online-indicator-rgb: 61, 184, 135;
|
|
--sidebar-bg-rgb: 32, 34, 40;
|
|
--sidebar-header-bg-rgb: 36, 39, 45;
|
|
--sidebar-teambar-bg-rgb: 41, 44, 51;
|
|
--sidebar-header-text-color-rgb: 255, 255, 255;
|
|
--sidebar-text-rgb: 255, 255, 255;
|
|
--sidebar-text-active-border-rgb: 74, 124, 232;
|
|
--sidebar-text-active-color-rgb: 255, 255, 255;
|
|
--sidebar-text-hover-bg-rgb: 37, 38, 42;
|
|
--sidebar-unread-text-rgb: 255, 255, 255;
|
|
--sidebar-bg: #202228;
|
|
--sidebar-text: #ffffff;
|
|
--sidebar-unread-text: #ffffff;
|
|
--sidebar-text-hover-bg: #25262a;
|
|
--sidebar-text-active-border: #4a7ce8;
|
|
--sidebar-text-active-color: #ffffff;
|
|
--sidebar-header-bg: #24272d;
|
|
--sidebar-teambar-bg: #292c33;
|
|
--sidebar-header-text-color: #ffffff;
|
|
--online-indicator: #3db887;
|
|
--away-indicator: #f5ab00;
|
|
--dnd-indicator: #d24b4e;
|
|
--mention-bg: #4b7ce7;
|
|
--mention-color: #ffffff;
|
|
--center-channel-bg: #191b1f;
|
|
--center-channel-color: #e3e4e8;
|
|
--new-message-separator: #1adbdb;
|
|
--link-color: #5d89ea;
|
|
--button-bg: #4a7ce8;
|
|
--button-color: #ffffff;
|
|
--error-text: #da6c6e;
|
|
--mention-highlight-bg: #0d6e6e;
|
|
--mention-highlight-link: #a4f4f4;
|
|
}
|