1// Copyright 2023 The Pigweed Authors 2// 3// Licensed under the Apache License, Version 2.0 (the "License"); you may not 4// use this file except in compliance with the License. You may obtain a copy of 5// the License at 6// 7// https://www.apache.org/licenses/LICENSE-2.0 8// 9// Unless required by applicable law or agreed to in writing, software 10// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT 11// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the 12// License for the specific language governing permissions and limitations under 13// the License. 14 15import { css } from 'lit'; 16 17export const themeLight = css` 18 /* Automatic theme styles */ 19 @media (prefers-color-scheme: light) { 20 :host { 21 color-scheme: light; 22 23 /* Material Design tokens */ 24 --md-sys-color-primary: #0b57d0; 25 --md-sys-color-primary-70: #7cacf8; 26 --md-sys-color-primary-90: #d3e3fd; 27 --md-sys-color-primary-95: #ecf3fe; 28 --md-sys-color-primary-99: #fafbff; 29 --md-sys-color-primary-container: #d3e3fd; 30 --md-sys-color-on-primary: #ffffff; 31 --md-sys-color-on-primary-container: #041e49; 32 --md-sys-color-inverse-primary: #a8c7fa; 33 --md-sys-color-secondary: #00639b; 34 --md-sys-color-secondary-container: #c2e7ff; 35 --md-sys-color-on-secondary: #ffffff; 36 --md-sys-color-on-secondary-container: #001d35; 37 --md-sys-color-tertiary: #146c2e; 38 --md-sys-color-tertiary-container: #c4eed0; 39 --md-sys-color-on-tertiary: #ffffff; 40 --md-sys-color-on-tertiary-container: #072711; 41 --md-sys-color-surface: #ffffff; 42 --md-sys-color-surface-dim: #d3dbe5; 43 --md-sys-color-surface-bright: #ffffff; 44 --md-sys-color-surface-container-lowest: #ffffff; 45 --md-sys-color-surface-container-low: #f8fafd; 46 --md-sys-color-surface-container: #f0f4f9; 47 --md-sys-color-surface-container-high: #e9eef6; 48 --md-sys-color-surface-container-highest: #dde3ea; 49 --md-sys-color-on-surface: #1f1f1f; 50 --md-sys-color-on-surface-variant: #444746; 51 --md-sys-color-inverse-surface: #303030; 52 --md-sys-color-inverse-on-surface: #f2f2f2; 53 --md-sys-color-outline: #747775; 54 --md-sys-color-outline-variant: #c4c7c5; 55 --md-sys-color-shadow: #000000; 56 --md-sys-color-scrim: #000000; 57 --md-sys-color-inverse-surface-rgb: 49, 48, 51; 58 59 /* General */ 60 --sys-log-viewer-color-primary: var(--md-sys-color-primary); 61 --sys-log-viewer-color-on-primary: var(--md-sys-color-on-primary); 62 63 /* Log Viewer */ 64 --sys-log-viewer-color-bg: var(--md-sys-color-surface); 65 66 /* Log View */ 67 --sys-log-viewer-color-view-outline: var(--md-sys-color-outline); 68 69 /* Log View Controls */ 70 --sys-log-viewer-color-controls-bg: var(--md-sys-color-primary-90); 71 --sys-log-viewer-color-controls-text: var( 72 --md-sys-color-on-primary-container 73 ); 74 --sys-log-viewer-color-controls-input-outline: transparent; 75 --sys-log-viewer-color-controls-input-bg: var( 76 --md-sys-color-surface-container-lowest 77 ); 78 --sys-log-viewer-color-controls-button-enabled: var( 79 --md-sys-color-primary-70 80 ); 81 82 /* Log List */ 83 --sys-log-viewer-color-table-header-bg: var(--md-sys-color-primary-95); 84 --sys-log-viewer-color-table-header-text: var(--md-sys-color-on-surface); 85 --sys-log-viewer-color-table-bg: var( 86 --md-sys-color-surface-container-lowest 87 ); 88 --sys-log-viewer-color-table-text: var(--md-sys-color-on-surface); 89 --sys-log-viewer-color-table-cell-outline: var( 90 --md-sys-color-outline-variant 91 ); 92 --sys-log-viewer-color-overflow-indicator: var( 93 --md-sys-color-surface-container 94 ); 95 --sys-log-viewer-color-table-mark: var(--md-sys-color-primary-container); 96 --sys-log-viewer-color-table-mark-text: var( 97 --md-sys-color-on-primary-container 98 ); 99 --sys-log-viewer-color-table-mark-outline: var( 100 --md-sys-color-outline-variant 101 ); 102 --sys-log-viewer-color-table-row-highlight: var( 103 --md-sys-color-inverse-surface-rgb 104 ); 105 106 /* Severity */ 107 --sys-log-viewer-color-error-bright: #dc362e; 108 --sys-log-viewer-color-surface-error: #fcefee; 109 --sys-log-viewer-color-on-surface-error: #8c1d18; 110 --sys-log-viewer-color-orange-bright: #f49f2a; 111 --sys-log-viewer-color-surface-yellow: #fef9eb; 112 --sys-log-viewer-color-on-surface-yellow: #783616; 113 --sys-log-viewer-color-debug: var(--md-sys-color-primary); 114 } 115 } 116 117 /* Manual theme styles */ 118 :host([colorscheme='light']) { 119 color-scheme: light; 120 121 /* Material Design tokens */ 122 --md-sys-color-primary: #0b57d0; 123 --md-sys-color-primary-70: #7cacf8; 124 --md-sys-color-primary-90: #d3e3fd; 125 --md-sys-color-primary-95: #ecf3fe; 126 --md-sys-color-primary-99: #fafbff; 127 --md-sys-color-primary-container: #d3e3fd; 128 --md-sys-color-on-primary: #ffffff; 129 --md-sys-color-on-primary-container: #041e49; 130 --md-sys-color-inverse-primary: #a8c7fa; 131 --md-sys-color-secondary: #00639b; 132 --md-sys-color-secondary-container: #c2e7ff; 133 --md-sys-color-on-secondary: #ffffff; 134 --md-sys-color-on-secondary-container: #001d35; 135 --md-sys-color-tertiary: #146c2e; 136 --md-sys-color-tertiary-container: #c4eed0; 137 --md-sys-color-on-tertiary: #ffffff; 138 --md-sys-color-on-tertiary-container: #072711; 139 --md-sys-color-surface: #ffffff; 140 --md-sys-color-surface-dim: #d3dbe5; 141 --md-sys-color-surface-bright: #ffffff; 142 --md-sys-color-surface-container-lowest: #ffffff; 143 --md-sys-color-surface-container-low: #f8fafd; 144 --md-sys-color-surface-container: #f0f4f9; 145 --md-sys-color-surface-container-high: #e9eef6; 146 --md-sys-color-surface-container-highest: #dde3ea; 147 --md-sys-color-on-surface: #1f1f1f; 148 --md-sys-color-on-surface-variant: #444746; 149 --md-sys-color-inverse-surface: #303030; 150 --md-sys-color-inverse-on-surface: #f2f2f2; 151 --md-sys-color-outline: #747775; 152 --md-sys-color-outline-variant: #c4c7c5; 153 --md-sys-color-shadow: #000000; 154 --md-sys-color-scrim: #000000; 155 --md-sys-color-inverse-surface-rgb: 49, 48, 51; 156 157 /* General */ 158 --sys-log-viewer-color-primary: var(--md-sys-color-primary); 159 --sys-log-viewer-color-on-primary: var(--md-sys-color-on-primary); 160 161 /* Log Viewer */ 162 --sys-log-viewer-color-bg: var(--md-sys-color-surface); 163 164 /* Log View */ 165 --sys-log-viewer-color-view-outline: var(--md-sys-color-outline); 166 167 /* Log View Controls */ 168 --sys-log-viewer-color-controls-bg: var(--md-sys-color-primary-90); 169 --sys-log-viewer-color-controls-text: var( 170 --md-sys-color-on-primary-container 171 ); 172 --sys-log-viewer-color-controls-input-outline: transparent; 173 --sys-log-viewer-color-controls-input-bg: var( 174 --md-sys-color-surface-container-lowest 175 ); 176 --sys-log-viewer-color-controls-button-enabled: var( 177 --md-sys-color-primary-70 178 ); 179 180 /* Log List */ 181 --sys-log-viewer-color-table-header-bg: var(--md-sys-color-primary-95); 182 --sys-log-viewer-color-table-header-text: var(--md-sys-color-on-surface); 183 --sys-log-viewer-color-table-bg: var( 184 --md-sys-color-surface-container-lowest 185 ); 186 --sys-log-viewer-color-table-text: var(--md-sys-color-on-surface); 187 --sys-log-viewer-color-table-cell-outline: var( 188 --md-sys-color-outline-variant 189 ); 190 --sys-log-viewer-color-overflow-indicator: var( 191 --md-sys-color-surface-container 192 ); 193 --sys-log-viewer-color-table-mark: var(--md-sys-color-primary-container); 194 --sys-log-viewer-color-table-mark-text: var( 195 --md-sys-color-on-primary-container 196 ); 197 --sys-log-viewer-color-table-mark-outline: var( 198 --md-sys-color-outline-variant 199 ); 200 --sys-log-viewer-color-table-row-highlight: var( 201 --md-sys-color-inverse-surface-rgb 202 ); 203 204 /* Severity */ 205 --sys-log-viewer-color-error-bright: #dc362e; 206 --sys-log-viewer-color-surface-error: #fcefee; 207 --sys-log-viewer-color-on-surface-error: #8c1d18; 208 --sys-log-viewer-color-orange-bright: #f49f2a; 209 --sys-log-viewer-color-surface-yellow: #fef9eb; 210 --sys-log-viewer-color-on-surface-yellow: #783616; 211 --sys-log-viewer-color-debug: var(--md-sys-color-primary); 212 } 213`; 214