xref: /aosp_15_r20/external/pigweed/pw_web/log-viewer/src/themes/light.ts (revision 61c4878ac05f98d0ceed94b57d316916de578985) 
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      /* REPL */
60      --sys-repl-gutter-bg: var(--md-sys-color-primary-90);
61      --sys-repl-active-gutter-bg: var(--md-sys-color-primary-70);
62
63      /* Log Viewer */
64      --sys-log-viewer-color-primary: var(--md-sys-color-primary);
65      --sys-log-viewer-color-on-primary: var(--md-sys-color-on-primary);
66      --sys-log-viewer-color-bg: var(--md-sys-color-surface);
67
68      /* Log View */
69      --sys-log-viewer-color-view-outline: var(--md-sys-color-outline);
70
71      /* Log View Controls */
72      --sys-log-viewer-color-controls-bg: var(--md-sys-color-primary-90);
73      --sys-log-viewer-color-controls-text: var(
74        --md-sys-color-on-primary-container
75      );
76      --sys-log-viewer-color-controls-input-outline: transparent;
77      --sys-log-viewer-color-controls-input-bg: var(
78        --md-sys-color-surface-container-lowest
79      );
80      --sys-log-viewer-color-controls-button-enabled: var(
81        --md-sys-color-primary-70
82      );
83
84      /* Log List */
85      --sys-log-viewer-color-table-header-bg: var(--md-sys-color-primary-95);
86      --sys-log-viewer-color-table-header-text: var(--md-sys-color-on-surface);
87      --sys-log-viewer-color-table-bg: var(
88        --md-sys-color-surface-container-lowest
89      );
90      --sys-log-viewer-color-table-text: var(--md-sys-color-on-surface);
91      --sys-log-viewer-color-table-cell-outline: var(
92        --md-sys-color-outline-variant
93      );
94      --sys-log-viewer-color-overflow-indicator: var(
95        --md-sys-color-surface-container
96      );
97      --sys-log-viewer-color-table-mark: var(--md-sys-color-primary-container);
98      --sys-log-viewer-color-table-mark-text: var(
99        --md-sys-color-on-primary-container
100      );
101      --sys-log-viewer-color-table-mark-outline: var(
102        --md-sys-color-outline-variant
103      );
104      --sys-log-viewer-color-table-row-highlight: var(
105        --md-sys-color-inverse-surface-rgb
106      );
107
108      /* Log Level */
109      --sys-log-viewer-color-error-bright: #dc362e;
110      --sys-log-viewer-color-surface-error: #fcefee;
111      --sys-log-viewer-color-on-surface-error: #8c1d18;
112      --sys-log-viewer-color-orange-bright: #f49f2a;
113      --sys-log-viewer-color-surface-yellow: #fef9eb;
114      --sys-log-viewer-color-on-surface-yellow: #783616;
115      --sys-log-viewer-color-debug: var(--md-sys-color-primary);
116      --sys-log-viewer-color-info: #7d96b0;
117    }
118  }
119
120  /* Manual theme styles */
121  :host([colorscheme='light']) {
122    color-scheme: light;
123
124    /* Material Design tokens */
125    --md-sys-color-primary: #0b57d0;
126    --md-sys-color-primary-70: #7cacf8;
127    --md-sys-color-primary-90: #d3e3fd;
128    --md-sys-color-primary-95: #ecf3fe;
129    --md-sys-color-primary-99: #fafbff;
130    --md-sys-color-primary-container: #d3e3fd;
131    --md-sys-color-on-primary: #ffffff;
132    --md-sys-color-on-primary-container: #041e49;
133    --md-sys-color-inverse-primary: #a8c7fa;
134    --md-sys-color-secondary: #00639b;
135    --md-sys-color-secondary-container: #c2e7ff;
136    --md-sys-color-on-secondary: #ffffff;
137    --md-sys-color-on-secondary-container: #001d35;
138    --md-sys-color-tertiary: #146c2e;
139    --md-sys-color-tertiary-container: #c4eed0;
140    --md-sys-color-on-tertiary: #ffffff;
141    --md-sys-color-on-tertiary-container: #072711;
142    --md-sys-color-surface: #ffffff;
143    --md-sys-color-surface-dim: #d3dbe5;
144    --md-sys-color-surface-bright: #ffffff;
145    --md-sys-color-surface-container-lowest: #ffffff;
146    --md-sys-color-surface-container-low: #f8fafd;
147    --md-sys-color-surface-container: #f0f4f9;
148    --md-sys-color-surface-container-high: #e9eef6;
149    --md-sys-color-surface-container-highest: #dde3ea;
150    --md-sys-color-on-surface: #1f1f1f;
151    --md-sys-color-on-surface-variant: #444746;
152    --md-sys-color-inverse-surface: #303030;
153    --md-sys-color-inverse-on-surface: #f2f2f2;
154    --md-sys-color-outline: #747775;
155    --md-sys-color-outline-variant: #c4c7c5;
156    --md-sys-color-shadow: #000000;
157    --md-sys-color-scrim: #000000;
158    --md-sys-color-inverse-surface-rgb: 49, 48, 51;
159
160    /* REPL */
161    --sys-repl-gutter-bg: var(--md-sys-color-primary-90);
162    --sys-repl-active-gutter-bg: var(--md-sys-color-primary-70);
163
164    /* Log Viewer */
165    --sys-log-viewer-color-primary: var(--md-sys-color-primary);
166    --sys-log-viewer-color-on-primary: var(--md-sys-color-on-primary);
167    --sys-log-viewer-color-bg: var(--md-sys-color-surface);
168
169    /* Log View */
170    --sys-log-viewer-color-view-outline: var(--md-sys-color-outline);
171
172    /* Log View Controls */
173    --sys-log-viewer-color-controls-bg: var(--md-sys-color-primary-90);
174    --sys-log-viewer-color-controls-text: var(
175      --md-sys-color-on-primary-container
176    );
177    --sys-log-viewer-color-controls-input-outline: transparent;
178    --sys-log-viewer-color-controls-input-bg: var(
179      --md-sys-color-surface-container-lowest
180    );
181    --sys-log-viewer-color-controls-button-enabled: var(
182      --md-sys-color-primary-70
183    );
184
185    /* Log List */
186    --sys-log-viewer-color-table-header-bg: var(--md-sys-color-primary-95);
187    --sys-log-viewer-color-table-header-text: var(--md-sys-color-on-surface);
188    --sys-log-viewer-color-table-bg: var(
189      --md-sys-color-surface-container-lowest
190    );
191    --sys-log-viewer-color-table-text: var(--md-sys-color-on-surface);
192    --sys-log-viewer-color-table-cell-outline: var(
193      --md-sys-color-outline-variant
194    );
195    --sys-log-viewer-color-overflow-indicator: var(
196      --md-sys-color-surface-container
197    );
198    --sys-log-viewer-color-table-mark: var(--md-sys-color-primary-container);
199    --sys-log-viewer-color-table-mark-text: var(
200      --md-sys-color-on-primary-container
201    );
202    --sys-log-viewer-color-table-mark-outline: var(
203      --md-sys-color-outline-variant
204    );
205    --sys-log-viewer-color-table-row-highlight: var(
206      --md-sys-color-inverse-surface-rgb
207    );
208
209    /* Log Level */
210    --sys-log-viewer-color-error-bright: #dc362e;
211    --sys-log-viewer-color-surface-error: #fcefee;
212    --sys-log-viewer-color-on-surface-error: #8c1d18;
213    --sys-log-viewer-color-orange-bright: #f49f2a;
214    --sys-log-viewer-color-surface-yellow: #fef9eb;
215    --sys-log-viewer-color-on-surface-yellow: #783616;
216    --sys-log-viewer-color-debug: var(--md-sys-color-primary);
217    --sys-log-viewer-color-info: #7d96b0;
218  }
219`;
220