eeg_certs/frontend/src/colors.css

196 lines
5.5 KiB
CSS
Raw Normal View History

2023-09-21 22:07:18 +00:00
/*
Material colors
*/
/*
* GREEN
*/
:root {
--c-green-primary: #7cdc6d;
--c-green-on-primary: #003a02;
--c-green-primary-container: #005304;
--c-green-on-primary-container: #97f986;
--c-green-background: #1a1c18;
--c-green-on-background: #e2e3dd;
--c-green-surface: #1a1c18;
--c-green-on-surface: #e2e3dd;
--c-green-outline: #8d9387;
--c-green-surface-variant: #43483f;
--c-green-on-surface-variant: #c3c8bc;
}
@media (prefers-color-scheme: light) {
:root {
--c-green-primary: #006e08;
--c-green-on-primary: #ffffff;
--c-green-primary-container: #97f986;
--c-green-on-primary-container: #002201;
--c-green-background: #fcfdf6;
--c-green-on-background: #1a1c18;
--c-green-surface: #fcfdf6;
--c-green-on-surface: #1a1c18;
--c-green-outline: #73796e;
--c-green-surface-variant: #dfe4d8;
--c-green-on-surface-variant: #43483f;
}
}
/*
* BLUE
*/
:root {
--c-blue-primary: #adc6ff;
--c-blue-on-primary: #002e69;
--c-blue-primary-container: #0e448e;
--c-blue-on-primary-container: #d8e2ff;
--c-blue-background: #1b1b1f;
--c-blue-on-background: #e3e2e6;
--c-blue-surface: #1b1b1f;
--c-blue-on-surface: #e3e2e6;
--c-blue-outline: #8e9099;
--c-blue-surface-variant: #44474f;
--c-blue-on-surface-variant: #c4c6d0;
}
@media (prefers-color-scheme: light) {
:root {
--c-blue-primary: #315da8;
--c-blue-on-primary: #ffffff;
--c-blue-primary-container: #d8e2ff;
--c-blue-on-primary-container: #001a41;
--c-blue-background: #fefbff;
--c-blue-on-background: #1b1b1f;
--c-blue-surface: #fefbff;
--c-blue-on-surface: #1b1b1f;
--c-blue-outline: #74777f;
--c-blue-surface-variant: #e1e2ec;
--c-blue-on-surface-variant: #44474f;
}
}
/*
* YELLOW
*/
:root {
--c-yellow-primary: #f5bf31;
--c-yellow-on-primary: #3f2e00;
--c-yellow-primary-container: #5b4300;
--c-yellow-on-primary-container: #ffdf9b;
--c-yellow-background: #1e1b16;
--c-yellow-on-background: #e9e1d9;
--c-yellow-surface: #1e1b16;
--c-yellow-on-surface: #e9e1d9;
--c-yellow-outline: #999080;
--c-yellow-surface-variant: #4d4639;
--c-yellow-on-surface-variant: #d0c5b4;
}
@media (prefers-color-scheme: light) {
:root {
--c-yellow-primary: #785a00;
--c-yellow-on-primary: #ffffff;
--c-yellow-primary-container: #ffdf9b;
--c-yellow-on-primary-container: #251a00;
--c-yellow-background: #fffbff;
--c-yellow-on-background: #1e1b16;
--c-yellow-surface: #fffbff;
--c-yellow-on-surface: #1e1b16;
--c-yellow-outline: #7f7667;
--c-yellow-surface-variant: #ede1cf;
--c-yellow-on-surface-variant: #4d4639;
}
}
/*
* PINK
*/
:root {
--c-pink-primary: #ffade5;
--c-pink-on-primary: #5e0051;
--c-pink-primary-container: #80156e;
--c-pink-on-primary-container: #ffd7ef;
--c-pink-background: #1f1a1d;
--c-pink-on-background: #eae0e3;
--c-pink-surface: #1f1a1d;
--c-pink-on-surface: #eae0e3;
--c-pink-outline: #9b8d94;
--c-pink-surface-variant: #4f444a;
--c-pink-on-surface-variant: #d2c2ca;
}
@media (prefers-color-scheme: light) {
:root {
--c-pink-primary: #9d3288;
--c-pink-on-primary: #ffffff;
--c-pink-primary-container: #ffd7ef;
--c-pink-on-primary-container: #3a0031;
--c-pink-background: #fffbff;
--c-pink-on-background: #1f1a1d;
--c-pink-surface: #fffbff;
--c-pink-on-surface: #1f1a1d;
--c-pink-outline: #81737a;
--c-pink-surface-variant: #efdee6;
--c-pink-on-surface-variant: #4f444a;
}
}
/*
* ORANGE
*/
:root {
--c-orange-primary: #ffb86d;
--c-orange-on-primary: #492900;
--c-orange-primary-container: #683c00;
--c-orange-on-primary-container: #ffdcbd;
--c-orange-background: #201b16;
--c-orange-on-background: #ebe1d9;
--c-orange-surface: #201b16;
--c-orange-on-surface: #ebe1d9;
--c-orange-outline: #9d8e81;
--c-orange-surface-variant: #50453a;
--c-orange-on-surface-variant: #d5c3b5;
}
@media (prefers-color-scheme: light) {
:root {
--c-orange-primary: #9e4300;
--c-orange-on-primary: #ffffff;
--c-orange-primary-container: #ffdbcb;
--c-orange-on-primary-container: #341100;
--c-orange-background: #fffbff;
--c-orange-on-background: #201a18;
--c-orange-surface: #fffbff;
--c-orange-on-surface: #201a18;
--c-orange-outline: #85736c;
--c-orange-surface-variant: #f4ded4;
--c-orange-on-surface-variant: #52443d;
}
}
/*
* RED
*/
:root {
--c-red-primary: #ffb4a8;
--c-red-on-primary: #690100;
--c-red-primary-container: #930100;
--c-red-on-primary-container: #ffdad4;
--c-red-background: #201a19;
--c-red-on-background: #ede0dd;
--c-red-surface: #201a19;
--c-red-on-surface: #ede0dd;
--c-red-outline: #a08c89;
--c-red-surface-variant: #534341;
--c-red-on-surface-variant: #d8c2be;
}
@media (prefers-color-scheme: light) {
:root {
--c-red-primary: #c00100;
--c-red-on-primary: #ffffff;
--c-red-primary-container: #ffdad4;
--c-red-on-primary-container: #410000;
--c-red-background: #fffbff;
--c-red-on-background: #201a19;
--c-red-surface: #fffbff;
--c-red-on-surface: #201a19;
--c-red-outline: #857370;
--c-red-surface-variant: #f5ddda;
--c-red-on-surface-variant: #534341;
}
}