| Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 1 | import {css} from 'lit'; |
| 2 | |
| Adrià Vilanova Martínez | 6f62c7d | 2022-11-05 20:48:52 +0100 | [diff] [blame] | 3 | // 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ínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 5 | export const SHARED_MD3_STYLES = css` |
| 6 | :host { |
| Adrià Vilanova Martínez | 6f62c7d | 2022-11-05 20:48:52 +0100 | [diff] [blame] | 7 | --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); |
| 20 | --mdc-theme-on-surface: var(--TWPT-primary-text, #000); |
| 21 | --mdc-dialog-heading-ink-color: var(--TWPT-primary-text); |
| 22 | --mdc-theme-surface: var(--TWPT-primary-background, #fff); |
| Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 23 | } |
| 24 | `; |