blob: a634fb2e628477739f9f58a8c75d08e56770a6ed [file] [log] [blame]
Adrià Vilanova Martínezf276ac72022-10-13 22:16:22 +02001import {css} from 'lit';
2
Adrià Vilanova Martínez6f62c7d2022-11-05 20:48:52 +01003// This is used to customize some colors. Also, we use this to pass the dark
4// theme color scheme (it's defined in variables prefixed with --TWPT).
Adrià Vilanova Martínezf276ac72022-10-13 22:16:22 +02005export const SHARED_MD3_STYLES = css`
6 :host {
Adrià Vilanova Martínez6f62c7d2022-11-05 20:48:52 +01007 --md-sys-color-primary: var(--TWPT-md-sys-color-primary, #6750a4);
8 --md-sys-color-on-primary: var(--TWPT-md-sys-color-on-primary, #fff);
9 --md-sys-color-surface: var(--TWPT-md-sys-color-surface, rgb(227, 255, 251));
10 --md-sys-color-on-surface: var(--TWPT-md-sys-color-on-surface);
11 --md-sys-color-on-surface-rgb: var(--TWPT-md-sys-color-on-surface-rgb);
12 --md-sys-color-on-surface-variant: var(--TWPT-md-sys-color-on-surface-variant);
13 --md-list-list-divider-color: var(--TWPT-md-list-list-divider-color);
14 --md-ripple-hover-state-layer-color: var(--TWPT-md-ripple-hover-state-layer-color);
15 --md-ripple-pressed-state-layer-color: var(--TWPT-md-ripple-pressed-state-layer-color);
16 --md-icon-button-unselected-icon-color: var(--TWPT-custom-md-icon-color);
17 --md-icon-button-unselected-hover-icon-color: var(--TWPT-custom-md-icon-color);
18 --md-icon-button-unselected-focus-icon-color: var(--TWPT-custom-md-icon-color);
19 --md-icon-button-unselected-pressed-icon-color: var(--TWPT-custom-md-icon-color);
Adrià Vilanova Martínez6f62c7d2022-11-05 20:48:52 +010020 --mdc-theme-surface: var(--TWPT-primary-background, #fff);
Adrià Vilanova Martínez5f5b3e02023-07-23 00:08:17 +020021 --mdc-theme-on-surface: var(--TWPT-primary-text, #000);
22 --mdc-theme-primary: var(--TWPT-md-sys-color-primary, #6750a4);
23 --mdc-theme-on-primary: var(--TWPT-md-sys-color-on-primary, #fff);
24 --mdc-dialog-heading-ink-color: var(--TWPT-primary-text);
Adrià Vilanova Martínezf276ac72022-10-13 22:16:22 +020025 }
26`;