mirror of
https://github.com/material-components/material-web.git
synced 2026-03-09 00:09:23 +08:00
92 lines
3.3 KiB
CSS
92 lines
3.3 KiB
CSS
/**
|
|
* @license
|
|
* Copyright 2023 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
:root,
|
|
:host :root,
|
|
:host {
|
|
--md-sys-color-background: #fff8f3;
|
|
--md-sys-color-on-background: #201b12;
|
|
--md-sys-color-surface: #fff8f3;
|
|
--md-sys-color-surface-dim: #e4d8cb;
|
|
--md-sys-color-surface-bright: #fff8f3;
|
|
--md-sys-color-surface-container-lowest: #ffffff;
|
|
--md-sys-color-surface-container-low: #fef2e4;
|
|
--md-sys-color-surface-container: #f8ecde;
|
|
--md-sys-color-surface-container-high: #f3e6d8;
|
|
--md-sys-color-surface-container-highest: #ede1d3;
|
|
--md-sys-color-on-surface: #201b12;
|
|
--md-sys-color-surface-variant: #f2e0c9;
|
|
--md-sys-color-on-surface-variant: #504534;
|
|
--md-sys-color-inverse-surface: #362f26;
|
|
--md-sys-color-inverse-on-surface: #fbefe1;
|
|
--md-sys-color-outline: #837562;
|
|
--md-sys-color-outline-variant: #d5c4ae;
|
|
--md-sys-color-shadow: #000000;
|
|
--md-sys-color-scrim: #000000;
|
|
--md-sys-color-surface-tint: #7f5700;
|
|
--md-sys-color-primary: #7f5700;
|
|
--md-sys-color-on-primary: #ffffff;
|
|
--md-sys-color-primary-container: #f7b337;
|
|
--md-sys-color-on-primary-container: #442d00;
|
|
--md-sys-color-inverse-primary: #ffba3e;
|
|
--md-sys-color-secondary: #765a2b;
|
|
--md-sys-color-on-secondary: #ffffff;
|
|
--md-sys-color-secondary-container: #ffdca9;
|
|
--md-sys-color-on-secondary-container: #5c4316;
|
|
--md-sys-color-tertiary: #566500;
|
|
--md-sys-color-on-tertiary: #ffffff;
|
|
--md-sys-color-tertiary-container: #b6ca54;
|
|
--md-sys-color-on-tertiary-container: #2d3600;
|
|
--md-sys-color-error: #ba1a1a;
|
|
--md-sys-color-on-error: #ffffff;
|
|
--md-sys-color-error-container: #ffdad6;
|
|
--md-sys-color-on-error-container: #410002
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root,
|
|
:host :root,
|
|
:host {
|
|
--md-sys-color-background: #18130b;
|
|
--md-sys-color-on-background: #ede1d3;
|
|
--md-sys-color-surface: #18130b;
|
|
--md-sys-color-surface-dim: #18130b;
|
|
--md-sys-color-surface-bright: #3f382f;
|
|
--md-sys-color-surface-container-lowest: #120d06;
|
|
--md-sys-color-surface-container-low: #201b12;
|
|
--md-sys-color-surface-container: #251f16;
|
|
--md-sys-color-surface-container-high: #2f2920;
|
|
--md-sys-color-surface-container-highest: #3b342a;
|
|
--md-sys-color-on-surface: #ede1d3;
|
|
--md-sys-color-surface-variant: #504534;
|
|
--md-sys-color-on-surface-variant: #d5c4ae;
|
|
--md-sys-color-inverse-surface: #ede1d3;
|
|
--md-sys-color-inverse-on-surface: #362f26;
|
|
--md-sys-color-outline: #9d8f7b;
|
|
--md-sys-color-outline-variant: #504534;
|
|
--md-sys-color-shadow: #000000;
|
|
--md-sys-color-scrim: #000000;
|
|
--md-sys-color-surface-tint: #ffba3e;
|
|
--md-sys-color-primary: #ffd28d;
|
|
--md-sys-color-on-primary: #432c00;
|
|
--md-sys-color-primary-container: #e5a427;
|
|
--md-sys-color-on-primary-container: #342100;
|
|
--md-sys-color-inverse-primary: #7f5700;
|
|
--md-sys-color-secondary: #e6c188;
|
|
--md-sys-color-on-secondary: #432c02;
|
|
--md-sys-color-secondary-container: #543b0f;
|
|
--md-sys-color-on-secondary-container: #f5cf95;
|
|
--md-sys-color-tertiary: #cee36a;
|
|
--md-sys-color-on-tertiary: #2c3400;
|
|
--md-sys-color-tertiary-container: #a5b945;
|
|
--md-sys-color-on-tertiary-container: #212800;
|
|
--md-sys-color-error: #ffb4ab;
|
|
--md-sys-color-on-error: #690005;
|
|
--md-sys-color-error-container: #93000a;
|
|
--md-sys-color-on-error-container: #ffdad6
|
|
}
|
|
}
|