232 lines
6.4 KiB
CSS
232 lines
6.4 KiB
CSS
/*
|
|
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;
|
|
|
|
--c-green-success: #adc6ff;
|
|
--c-green-on-success: #002e69;
|
|
}
|
|
@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;
|
|
|
|
--c-green-success: #315da8;
|
|
--c-green-on-success: #ffffff;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* 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;
|
|
|
|
--c-blue-success: #7cdc6d;
|
|
--c-blue-on-success: #003a02;
|
|
}
|
|
@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;
|
|
|
|
--c-blue-success: #006e08;
|
|
--c-blue-on-success: #ffffff;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* 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;
|
|
|
|
--c-yellow-success: #7cdc6d;
|
|
--c-yellow-on-success: #003a02;
|
|
}
|
|
@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;
|
|
|
|
--c-yellow-success: #006e08;
|
|
--c-yellow-on-success: #ffffff;
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
* 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;
|
|
|
|
--c-pink-success: #7cdc6d;
|
|
--c-pink-on-success: #003a02;
|
|
}
|
|
@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;
|
|
|
|
--c-pink-success: #006e08;
|
|
--c-pink-on-success: #ffffff;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* 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;
|
|
|
|
--c-orange-success: #7cdc6d;
|
|
--c-orange-on-success: #003a02;
|
|
}
|
|
@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;
|
|
|
|
--c-orange-success: #006e08;
|
|
--c-orange-on-success: #ffffff;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* 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;
|
|
|
|
--c-red-success: #7cdc6d;
|
|
--c-red-on-success: #003a02;
|
|
}
|
|
@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;
|
|
|
|
--c-red-success: #006e08;
|
|
--c-red-on-success: #ffffff;
|
|
}
|
|
} |