diff --git a/resources/scss/theme/theme.dark.scss b/resources/scss/theme/theme.dark.scss index 536439284..0c523a8d1 100644 --- a/resources/scss/theme/theme.dark.scss +++ b/resources/scss/theme/theme.dark.scss @@ -1,34 +1,42 @@ @media (prefers-color-scheme: dark) { :root { - --md-sys-color-primary: var(--md-sys-color-primary-dark); - --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark); - --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark); - --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark); - --md-sys-color-secondary: var(--md-sys-color-secondary-dark); - --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark); - --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark); - --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark); - --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark); - --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark); - --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark); - --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark); - --md-sys-color-error: var(--md-sys-color-error-dark); - --md-sys-color-error-container: var(--md-sys-color-error-container-dark); - --md-sys-color-on-error: var(--md-sys-color-on-error-dark); - --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark); - --md-sys-color-background: var(--md-sys-color-background-dark); - --md-sys-color-on-background: var(--md-sys-color-on-background-dark); - --md-sys-color-surface: var(--md-sys-color-surface-dark); - --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark); - --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark); - --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark); - --md-sys-color-outline: var(--md-sys-color-outline-dark); - --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark); - --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark); - --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark); - --md-sys-color-shadow: var(--md-sys-color-shadow-dark); - --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark); - --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark); - --md-sys-color-scrim: var(--md-sys-color-scrim-dark); + --md-sys-color-background: #141316; + --md-sys-color-on-background: #e5e1e6; + --md-sys-color-surface: #141316; + --md-sys-color-surface-dim: #141316; + --md-sys-color-surface-bright: #3a383c; + --md-sys-color-surface-container-lowest: #0e0e11; + --md-sys-color-surface-container-low: #1c1b1f; + --md-sys-color-surface-container: #201f23; + --md-sys-color-surface-container-high: #2b292d; + --md-sys-color-surface-container-highest: #363438; + --md-sys-color-on-surface: #e5e1e6; + --md-sys-color-surface-variant: #4f4539; + --md-sys-color-on-surface-variant: #d3c4b4; + --md-sys-color-inverse-surface: #e5e1e6; + --md-sys-color-inverse-on-surface: #313033; + --md-sys-color-outline: #7f7365; + --md-sys-color-outline-variant: #4f4539; + --md-sys-color-shadow: #000000; + --md-sys-color-scrim: #000000; + --md-sys-color-surface-tint: #ffb954; + --md-sys-color-primary: #ffb954; + --md-sys-color-on-primary: #452b00; + --md-sys-color-primary-container: #6f4700; + --md-sys-color-on-primary-container: #fdb449; + --md-sys-color-inverse-primary: #835500; + --md-sys-color-inverse-on-primary: #ffffff; + --md-sys-color-secondary: #ffc453; + --md-sys-color-on-secondary: #473100; + --md-sys-color-secondary-container: #d79a00; + --md-sys-color-on-secondary-container: #4f3600; + --md-sys-color-tertiary: #ffb781; + --md-sys-color-on-tertiary: #4e2600; + --md-sys-color-tertiary-container: #7d4000; + --md-sys-color-on-tertiary-container: #ffb276; + --md-sys-color-error: #ffb4ab; + --md-sys-color-on-error: #690005; + --md-sys-color-error-container: #93000a; + --md-sys-color-on-error-container: #ffdad6 } } diff --git a/resources/scss/theme/theme.light.scss b/resources/scss/theme/theme.light.scss index a724a3783..deb26d375 100644 --- a/resources/scss/theme/theme.light.scss +++ b/resources/scss/theme/theme.light.scss @@ -1,34 +1,42 @@ @media (prefers-color-scheme: light) { :root { - --md-sys-color-primary: var(--md-sys-color-primary-light); - --md-sys-color-on-primary: var(--md-sys-color-on-primary-light); - --md-sys-color-primary-container: var(--md-sys-color-primary-container-light); - --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light); - --md-sys-color-secondary: var(--md-sys-color-secondary-light); - --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light); - --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light); - --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light); - --md-sys-color-tertiary: var(--md-sys-color-tertiary-light); - --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light); - --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light); - --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light); - --md-sys-color-error: var(--md-sys-color-error-light); - --md-sys-color-error-container: var(--md-sys-color-error-container-light); - --md-sys-color-on-error: var(--md-sys-color-on-error-light); - --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light); - --md-sys-color-background: var(--md-sys-color-background-light); - --md-sys-color-on-background: var(--md-sys-color-on-background-light); - --md-sys-color-surface: var(--md-sys-color-surface-light); - --md-sys-color-on-surface: var(--md-sys-color-on-surface-light); - --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light); - --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light); - --md-sys-color-outline: var(--md-sys-color-outline-light); - --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light); - --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light); - --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light); - --md-sys-color-shadow: var(--md-sys-color-shadow-light); - --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light); - --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light); - --md-sys-color-scrim: var(--md-sys-color-scrim-light); + --md-sys-color-background: #fdf8fd; + --md-sys-color-on-background: #1c1b1f; + --md-sys-color-surface: #fdf8fd; + --md-sys-color-surface-dim: #ddd9dd; + --md-sys-color-surface-bright: #fdf8fd; + --md-sys-color-surface-container-lowest: #ffffff; + --md-sys-color-surface-container-low: #f7f2f7; + --md-sys-color-surface-container: #f1ecf1; + --md-sys-color-surface-container-high: #ebe7ec; + --md-sys-color-surface-container-highest: #e5e1e6; + --md-sys-color-on-surface: #1c1b1f; + --md-sys-color-surface-variant: #f0e0d0; + --md-sys-color-on-surface-variant: #4f4539; + --md-sys-color-inverse-surface: #313033; + --md-sys-color-inverse-on-surface: #f4eff4; + --md-sys-color-outline: #7f7365; + --md-sys-color-outline-variant: #d3c4b4; + --md-sys-color-shadow: #000000; + --md-sys-color-scrim: #000000; + --md-sys-color-surface-tint: #835500; + --md-sys-color-primary: #613d00; + --md-sys-color-on-primary: #ffd8a7; + --md-sys-color-primary-container: #905e00; + --md-sys-color-on-primary-container: #ffe5c6; + --md-sys-color-inverse-primary: #ffb954; + --md-sys-color-inverse-on-primary: #452b00; + --md-sys-color-secondary: #7c5800; + --md-sys-color-on-secondary: #ffffff; + --md-sys-color-secondary-container: #ffc452; + --md-sys-color-on-secondary-container: #735100; + --md-sys-color-tertiary: #6c3600; + --md-sys-color-on-tertiary: #ffd6ba; + --md-sys-color-tertiary-container: #a15400; + --md-sys-color-on-tertiary-container: #ffe3d2; + --md-sys-color-error: #ba1a1a; + --md-sys-color-on-error: #ffffff; + --md-sys-color-error-container: #ffdad6; + --md-sys-color-on-error-container: #410002; } } diff --git a/resources/scss/theme/tokens.scss b/resources/scss/theme/tokens.scss index e00abc998..be18b9c76 100644 --- a/resources/scss/theme/tokens.scss +++ b/resources/scss/theme/tokens.scss @@ -112,70 +112,6 @@ --md-ref-palette-error99: #fffbff; --md-ref-palette-error100: #fff; - /* light */ - --md-sys-color-primary-light: #7c5800; - --md-sys-color-on-primary-light: #fff; - --md-sys-color-primary-container-light: #ffdea8; - --md-sys-color-on-primary-container-light: #271900; - --md-sys-color-secondary-light: #7c5800; - --md-sys-color-on-secondary-light: #fff; - --md-sys-color-secondary-container-light: #ffdea8; - --md-sys-color-on-secondary-container-light: #271900; - --md-sys-color-tertiary-light: #7c5800; - --md-sys-color-on-tertiary-light: #fff; - --md-sys-color-tertiary-container-light: #ffdea8; - --md-sys-color-on-tertiary-container-light: #271900; - --md-sys-color-error-light: #ba1a1a; - --md-sys-color-error-container-light: #ffdad6; - --md-sys-color-on-error-light: #fff; - --md-sys-color-on-error-container-light: #410002; - --md-sys-color-background-light: #fffbff; - --md-sys-color-on-background-light: #1f1b16; - --md-sys-color-surface-light: #fffbff; - --md-sys-color-on-surface-light: #1f1b16; - --md-sys-color-surface-variant-light: #eee1cf; - --md-sys-color-on-surface-variant-light: #4e4639; - --md-sys-color-outline-light: #807667; - --md-sys-color-inverse-on-surface-light: #f8efe7; - --md-sys-color-inverse-surface-light: #34302a; - --md-sys-color-inverse-primary-light: #febb2a; - --md-sys-color-shadow-light: #000; - --md-sys-color-surface-tint-light: #7c5800; - --md-sys-color-outline-variant-light: #d1c5b4; - --md-sys-color-scrim-light: #000; - - /* dark */ - --md-sys-color-primary-dark: #febb2a; - --md-sys-color-on-primary-dark: #422d00; - --md-sys-color-primary-container-dark: #5e4200; - --md-sys-color-on-primary-container-dark: #ffdea8; - --md-sys-color-secondary-dark: #f8bd49; - --md-sys-color-on-secondary-dark: #422d00; - --md-sys-color-secondary-container-dark: #5e4200; - --md-sys-color-on-secondary-container-dark: #ffdea8; - --md-sys-color-tertiary-dark: #fdbb30; - --md-sys-color-on-tertiary-dark: #422d00; - --md-sys-color-tertiary-container-dark: #5e4200; - --md-sys-color-on-tertiary-container-dark: #ffdea8; - --md-sys-color-error-dark: #ffb4ab; - --md-sys-color-error-container-dark: #93000a; - --md-sys-color-on-error-dark: #690005; - --md-sys-color-on-error-container-dark: #ffdad6; - --md-sys-color-background-dark: #1f1b16; - --md-sys-color-on-background-dark: #eae1d9; - --md-sys-color-surface-dark: #1f1b16; - --md-sys-color-on-surface-dark: #eae1d9; - --md-sys-color-surface-variant-dark: #4e4639; - --md-sys-color-on-surface-variant-dark: #d1c5b4; - --md-sys-color-outline-dark: #9a8f80; - --md-sys-color-inverse-on-surface-dark: #1f1b16; - --md-sys-color-inverse-surface-dark: #eae1d9; - --md-sys-color-inverse-primary-dark: #7c5800; - --md-sys-color-shadow-dark: #000; - --md-sys-color-surface-tint-dark: #febb2a; - --md-sys-color-outline-variant-dark: #4e4639; - --md-sys-color-scrim-dark: #000; - /* typography */ --md-ref-typeface-brand: #{$headlines-font-family}; --md-ref-typeface-plain: #{$body-font-family};