mirror of
https://github.com/sendevia/website.git
synced 2026-03-05 23:32:45 +08:00
style(tokens): update color scheme for light mode
This commit is contained in:
@@ -195,73 +195,75 @@
|
||||
|
||||
// Colors scheme
|
||||
html {
|
||||
--md-sys-color-primary: var(--md-ref-palette-primary40);
|
||||
--md-sys-color-primary-container: var(--md-ref-palette-primary90);
|
||||
--md-sys-color-on-primary: var(--md-ref-palette-primary100);
|
||||
--md-sys-color-on-primary-container: var(--md-ref-palette-primary10);
|
||||
--md-sys-color-inverse-primary: var(--md-ref-palette-primary80);
|
||||
--md-sys-color-secondary: var(--md-ref-palette-secondary40);
|
||||
--md-sys-color-secondary-container: var(--md-ref-palette-secondary90);
|
||||
--md-sys-color-on-secondary: var(--md-ref-palette-secondary100);
|
||||
--md-sys-color-on-secondary-container: var(--md-ref-palette-secondary10);
|
||||
--md-sys-color-tertiary: var(--md-ref-palette-tertiary40);
|
||||
--md-sys-color-tertiary-container: var(--md-ref-palette-tertiary90);
|
||||
--md-sys-color-on-tertiary: var(--md-ref-palette-tertiary100);
|
||||
--md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary10);
|
||||
--md-sys-color-surface: var(--md-ref-palette-neutral98);
|
||||
--md-sys-color-surface-dim: var(--md-ref-palette-neutral87);
|
||||
--md-sys-color-surface-bright: var(--md-ref-palette-neutral98);
|
||||
--md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral100);
|
||||
--md-sys-color-surface-container-low: var(--md-ref-palette-neutral96);
|
||||
--md-sys-color-surface-container: var(--md-ref-palette-neutral94);
|
||||
--md-sys-color-surface-container-high: var(--md-ref-palette-neutral92);
|
||||
--md-sys-color-surface-container-highest: var(--md-ref-palette-neutral90);
|
||||
--md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant90);
|
||||
--md-sys-color-on-surface: var(--md-ref-palette-neutral10);
|
||||
--md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant30);
|
||||
--md-sys-color-inverse-surface: var(--md-ref-palette-neutral20);
|
||||
--md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral95);
|
||||
--md-sys-color-background: var(--md-ref-palette-neutral98);
|
||||
--md-sys-color-on-background: var(--md-ref-palette-neutral10);
|
||||
--md-sys-color-error: var(--md-ref-palette-error40);
|
||||
--md-sys-color-error-container: var(--md-ref-palette-error90);
|
||||
--md-sys-color-on-error: var(--md-ref-palette-error100);
|
||||
--md-sys-color-on-error-container: var(--md-ref-palette-error10);
|
||||
--md-sys-color-outline: var(--md-ref-palette-neutral-variant50);
|
||||
--md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant80);
|
||||
--md-sys-color-shadow: var(--md-ref-palette-neutral0);
|
||||
--md-sys-color-surface-tint-color: var(--md-sys-color-primary);
|
||||
--md-sys-color-scrim: var(--md-ref-palette-neutral0);
|
||||
&.light {
|
||||
--md-sys-color-primary: var(--md-ref-palette-primary40);
|
||||
--md-sys-color-primary-container: var(--md-ref-palette-primary90);
|
||||
--md-sys-color-on-primary: var(--md-ref-palette-primary100);
|
||||
--md-sys-color-on-primary-container: var(--md-ref-palette-primary10);
|
||||
--md-sys-color-inverse-primary: var(--md-ref-palette-primary80);
|
||||
--md-sys-color-secondary: var(--md-ref-palette-secondary40);
|
||||
--md-sys-color-secondary-container: var(--md-ref-palette-secondary90);
|
||||
--md-sys-color-on-secondary: var(--md-ref-palette-secondary100);
|
||||
--md-sys-color-on-secondary-container: var(--md-ref-palette-secondary10);
|
||||
--md-sys-color-tertiary: var(--md-ref-palette-tertiary40);
|
||||
--md-sys-color-tertiary-container: var(--md-ref-palette-tertiary90);
|
||||
--md-sys-color-on-tertiary: var(--md-ref-palette-tertiary100);
|
||||
--md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary10);
|
||||
--md-sys-color-surface: var(--md-ref-palette-neutral98);
|
||||
--md-sys-color-surface-dim: var(--md-ref-palette-neutral87);
|
||||
--md-sys-color-surface-bright: var(--md-ref-palette-neutral98);
|
||||
--md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral100);
|
||||
--md-sys-color-surface-container-low: var(--md-ref-palette-neutral96);
|
||||
--md-sys-color-surface-container: var(--md-ref-palette-neutral94);
|
||||
--md-sys-color-surface-container-high: var(--md-ref-palette-neutral92);
|
||||
--md-sys-color-surface-container-highest: var(--md-ref-palette-neutral90);
|
||||
--md-sys-color-surface-variant: var(--md-ref-palette-neutral-variant90);
|
||||
--md-sys-color-on-surface: var(--md-ref-palette-neutral10);
|
||||
--md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant30);
|
||||
--md-sys-color-inverse-surface: var(--md-ref-palette-neutral20);
|
||||
--md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral95);
|
||||
--md-sys-color-background: var(--md-ref-palette-neutral98);
|
||||
--md-sys-color-on-background: var(--md-ref-palette-neutral10);
|
||||
--md-sys-color-error: var(--md-ref-palette-error40);
|
||||
--md-sys-color-error-container: var(--md-ref-palette-error90);
|
||||
--md-sys-color-on-error: var(--md-ref-palette-error100);
|
||||
--md-sys-color-on-error-container: var(--md-ref-palette-error10);
|
||||
--md-sys-color-outline: var(--md-ref-palette-neutral-variant50);
|
||||
--md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant80);
|
||||
--md-sys-color-shadow: var(--md-ref-palette-neutral0);
|
||||
--md-sys-color-surface-tint-color: var(--md-sys-color-primary);
|
||||
--md-sys-color-scrim: var(--md-ref-palette-neutral0);
|
||||
|
||||
--md-sys-color-red: var(--md-ref-palette-red40);
|
||||
--md-sys-color-red-container: var(--md-ref-palette-red90);
|
||||
--md-sys-color-on-red: var(--md-ref-palette-red95);
|
||||
--md-sys-color-on-red-container: var(--md-ref-palette-red10);
|
||||
--md-sys-color-inverse-red: var(--md-ref-palette-red80);
|
||||
--md-sys-color-red: var(--md-ref-palette-red40);
|
||||
--md-sys-color-red-container: var(--md-ref-palette-red90);
|
||||
--md-sys-color-on-red: var(--md-ref-palette-red95);
|
||||
--md-sys-color-on-red-container: var(--md-ref-palette-red10);
|
||||
--md-sys-color-inverse-red: var(--md-ref-palette-red80);
|
||||
|
||||
--md-sys-color-blue: var(--md-ref-palette-blue40);
|
||||
--md-sys-color-blue-container: var(--md-ref-palette-blue90);
|
||||
--md-sys-color-on-blue: var(--md-ref-palette-blue95);
|
||||
--md-sys-color-on-blue-container: var(--md-ref-palette-blue10);
|
||||
--md-sys-color-inverse-blue: var(--md-ref-palette-blue80);
|
||||
--md-sys-color-blue: var(--md-ref-palette-blue40);
|
||||
--md-sys-color-blue-container: var(--md-ref-palette-blue90);
|
||||
--md-sys-color-on-blue: var(--md-ref-palette-blue95);
|
||||
--md-sys-color-on-blue-container: var(--md-ref-palette-blue10);
|
||||
--md-sys-color-inverse-blue: var(--md-ref-palette-blue80);
|
||||
|
||||
--md-sys-color-green: var(--md-ref-palette-green40);
|
||||
--md-sys-color-green-container: var(--md-ref-palette-green90);
|
||||
--md-sys-color-on-green: var(--md-ref-palette-green95);
|
||||
--md-sys-color-on-green-container: var(--md-ref-palette-green10);
|
||||
--md-sys-color-inverse-green: var(--md-ref-palette-green80);
|
||||
--md-sys-color-green: var(--md-ref-palette-green40);
|
||||
--md-sys-color-green-container: var(--md-ref-palette-green90);
|
||||
--md-sys-color-on-green: var(--md-ref-palette-green95);
|
||||
--md-sys-color-on-green-container: var(--md-ref-palette-green10);
|
||||
--md-sys-color-inverse-green: var(--md-ref-palette-green80);
|
||||
|
||||
--md-sys-color-yellow: var(--md-ref-palette-yellow40);
|
||||
--md-sys-color-yellow-container: var(--md-ref-palette-yellow90);
|
||||
--md-sys-color-on-yellow: var(--md-ref-palette-yellow95);
|
||||
--md-sys-color-on-yellow-container: var(--md-ref-palette-yellow10);
|
||||
--md-sys-color-inverse-yellow: var(--md-ref-palette-yellow80);
|
||||
--md-sys-color-yellow: var(--md-ref-palette-yellow40);
|
||||
--md-sys-color-yellow-container: var(--md-ref-palette-yellow90);
|
||||
--md-sys-color-on-yellow: var(--md-ref-palette-yellow95);
|
||||
--md-sys-color-on-yellow-container: var(--md-ref-palette-yellow10);
|
||||
--md-sys-color-inverse-yellow: var(--md-ref-palette-yellow80);
|
||||
|
||||
--md-sys-color-purple: var(--md-ref-palette-purple40);
|
||||
--md-sys-color-purple-container: var(--md-ref-palette-purple90);
|
||||
--md-sys-color-on-purple: var(--md-ref-palette-purple95);
|
||||
--md-sys-color-on-purple-container: var(--md-ref-palette-purple10);
|
||||
--md-sys-color-inverse-purple: var(--md-ref-palette-purple80);
|
||||
--md-sys-color-purple: var(--md-ref-palette-purple40);
|
||||
--md-sys-color-purple-container: var(--md-ref-palette-purple90);
|
||||
--md-sys-color-on-purple: var(--md-ref-palette-purple95);
|
||||
--md-sys-color-on-purple-container: var(--md-ref-palette-purple10);
|
||||
--md-sys-color-inverse-purple: var(--md-ref-palette-purple80);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
--md-sys-color-primary: var(--md-ref-palette-primary80);
|
||||
|
||||
Reference in New Issue
Block a user