| 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 { |
| Renovate bot | aa5fb8e | 2024-02-25 18:10:09 +0000 | [diff] [blame] | 7 | /* Adapted from //src/md3/theme.scss */ |
| 8 | --md-sys-color-primary: var(--TWPT-md-sys-color-primary, rgb(0 106 96)); |
| 9 | --md-sys-color-surface-tint: var(--TWPT-md-sys-color-surface-tint, rgb(0 106 96)); |
| 10 | --md-sys-color-on-primary: var(--TWPT-md-sys-color-on-primary, rgb(255 255 255)); |
| 11 | --md-sys-color-primary-container: var(--TWPT-md-sys-color-primary-container, rgb(158 242 228)); |
| 12 | --md-sys-color-on-primary-container: var(--TWPT-md-sys-color-on-primary-container, rgb(0 32 28)); |
| 13 | --md-sys-color-secondary: var(--TWPT-md-sys-color-secondary, rgb(74 99 95)); |
| 14 | --md-sys-color-on-secondary: var(--TWPT-md-sys-color-on-secondary, rgb(255 255 255)); |
| 15 | --md-sys-color-secondary-container: var(--TWPT-md-sys-color-secondary-container, rgb(204 232 226)); |
| 16 | --md-sys-color-on-secondary-container: var(--TWPT-md-sys-color-on-secondary-container, rgb(5 32 28)); |
| 17 | --md-sys-color-tertiary: var(--TWPT-md-sys-color-tertiary, rgb(69 97 121)); |
| 18 | --md-sys-color-on-tertiary: var(--TWPT-md-sys-color-on-tertiary, rgb(255 255 255)); |
| 19 | --md-sys-color-tertiary-container: var(--TWPT-md-sys-color-tertiary-container, rgb(204 229 255)); |
| 20 | --md-sys-color-on-tertiary-container: var(--TWPT-md-sys-color-on-tertiary-container, rgb(0 30 49)); |
| 21 | --md-sys-color-error: var(--TWPT-md-sys-color-error, rgb(186 26 26)); |
| 22 | --md-sys-color-on-error: var(--TWPT-md-sys-color-on-error, rgb(255 255 255)); |
| 23 | --md-sys-color-error-container: var(--TWPT-md-sys-color-error-container, rgb(255 218 214)); |
| 24 | --md-sys-color-on-error-container: var(--TWPT-md-sys-color-on-error-container, rgb(65 0 2)); |
| 25 | --md-sys-color-background: var(--TWPT-md-sys-color-background, rgb(244 251 248)); |
| 26 | --md-sys-color-on-background: var(--TWPT-md-sys-color-on-background, rgb(22 29 28)); |
| 27 | --md-sys-color-surface: var(--TWPT-md-sys-color-surface, rgb(244 251 248)); |
| 28 | --md-sys-color-on-surface: var(--TWPT-md-sys-color-on-surface, rgb(22 29 28)); |
| 29 | --md-sys-color-surface-variant: var(--TWPT-md-sys-color-surface-variant, rgb(218 229 225)); |
| 30 | --md-sys-color-on-surface-variant: var(--TWPT-md-sys-color-on-surface-variant, rgb(63 73 71)); |
| 31 | --md-sys-color-outline: var(--TWPT-md-sys-color-outline, rgb(111 121 119)); |
| 32 | --md-sys-color-outline-variant: var(--TWPT-md-sys-color-outline-variant, rgb(190 201 198)); |
| 33 | --md-sys-color-shadow: var(--TWPT-md-sys-color-shadow, rgb(0 0 0)); |
| 34 | --md-sys-color-scrim: var(--TWPT-md-sys-color-scrim, rgb(0 0 0)); |
| 35 | --md-sys-color-inverse-surface: var(--TWPT-md-sys-color-inverse-surface, rgb(43 50 48)); |
| 36 | --md-sys-color-inverse-on-surface: var(--TWPT-md-sys-color-inverse-on-surface, rgb(236 242 239)); |
| 37 | --md-sys-color-inverse-primary: var(--TWPT-md-sys-color-inverse-primary, rgb(130 213 200)); |
| 38 | --md-sys-color-primary-fixed: var(--TWPT-md-sys-color-primary-fixed, rgb(158 242 228)); |
| 39 | --md-sys-color-on-primary-fixed: var(--TWPT-md-sys-color-on-primary-fixed, rgb(0 32 28)); |
| 40 | --md-sys-color-primary-fixed-dim: var(--TWPT-md-sys-color-primary-fixed-dim, rgb(130 213 200)); |
| 41 | --md-sys-color-on-primary-fixed-variant: var(--TWPT-md-sys-color-on-primary-fixed-variant, rgb(0 80 72)); |
| 42 | --md-sys-color-secondary-fixed: var(--TWPT-md-sys-color-secondary-fixed, rgb(204 232 226)); |
| 43 | --md-sys-color-on-secondary-fixed: var(--TWPT-md-sys-color-on-secondary-fixed, rgb(5 32 28)); |
| 44 | --md-sys-color-secondary-fixed-dim: var(--TWPT-md-sys-color-secondary-fixed-dim, rgb(177 204 198)); |
| 45 | --md-sys-color-on-secondary-fixed-variant: var(--TWPT-md-sys-color-on-secondary-fixed-variant, rgb(51 75 71)); |
| 46 | --md-sys-color-tertiary-fixed: var(--TWPT-md-sys-color-tertiary-fixed, rgb(204 229 255)); |
| 47 | --md-sys-color-on-tertiary-fixed: var(--TWPT-md-sys-color-on-tertiary-fixed, rgb(0 30 49)); |
| 48 | --md-sys-color-tertiary-fixed-dim: var(--TWPT-md-sys-color-tertiary-fixed-dim, rgb(173 202 230)); |
| 49 | --md-sys-color-on-tertiary-fixed-variant: var(--TWPT-md-sys-color-on-tertiary-fixed-variant, rgb(45 73 97)); |
| 50 | --md-sys-color-surface-dim: var(--TWPT-md-sys-color-surface-dim, rgb(213 219 217)); |
| 51 | --md-sys-color-surface-bright: var(--TWPT-md-sys-color-surface-bright, rgb(244 251 248)); |
| 52 | --md-sys-color-surface-container-lowest: var(--TWPT-md-sys-color-surface-container-lowest, rgb(255 255 255)); |
| 53 | --md-sys-color-surface-container-low: var(--TWPT-md-sys-color-surface-container-low, rgb(239 245 242)); |
| 54 | --md-sys-color-surface-container: var(--TWPT-md-sys-color-surface-container, rgb(233 239 237)); |
| 55 | --md-sys-color-surface-container-high: var(--TWPT-md-sys-color-surface-container-high, rgb(227 234 231)); |
| 56 | --md-sys-color-surface-container-highest: var(--TWPT-md-sys-color-surface-container-highest, rgb(221 228 225)); |
| 57 | |
| Adrià Vilanova Martínez | cdbe644 | 2024-03-15 22:01:13 +0100 | [diff] [blame] | 58 | /* Custom colors */ |
| 59 | --reply-button-color: var(--TWPT-reply-button-color, #65558f); |
| 60 | |
| Renovate bot | aa5fb8e | 2024-02-25 18:10:09 +0000 | [diff] [blame] | 61 | /* Material Design 2 theme */ |
| Adrià Vilanova Martínez | 6f62c7d | 2022-11-05 20:48:52 +0100 | [diff] [blame] | 62 | --mdc-theme-surface: var(--TWPT-primary-background, #fff); |
| Adrià Vilanova Martínez | 5f5b3e0 | 2023-07-23 00:08:17 +0200 | [diff] [blame] | 63 | --mdc-theme-on-surface: var(--TWPT-primary-text, #000); |
| Renovate bot | aa5fb8e | 2024-02-25 18:10:09 +0000 | [diff] [blame] | 64 | --mdc-theme-primary: var(--TWPT-md-sys-color-primary, rgb(0 106 96)); |
| 65 | --mdc-theme-on-primary: var(--TWPT-md-sys-color-on-primary, rgb(255 255 255)); |
| Adrià Vilanova Martínez | 5f5b3e0 | 2023-07-23 00:08:17 +0200 | [diff] [blame] | 66 | --mdc-dialog-heading-ink-color: var(--TWPT-primary-text); |
| Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 67 | } |
| Renovate bot | aa5fb8e | 2024-02-25 18:10:09 +0000 | [diff] [blame] | 68 | |
| 69 | md-icon[filled] { |
| 70 | font-variation-settings: 'FILL' 1; |
| 71 | } |
| Adrià Vilanova Martínez | f276ac7 | 2022-10-13 22:16:22 +0200 | [diff] [blame] | 72 | `; |