/* 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; } }