1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
/* Copyright 2024 The Chromium Authors
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
/* #css_wrapper_metadata_start
* #type=vars-lit
* #css_wrapper_metadata_end */
<if expr="is_chromeos">
html:has(body.jelly-enabled) {
--feedback-alert-color: var(--cros-sys-alert);
--feedback-bg-color: var(--cros-sys-app_base_shaded);
--feedback-box-shadow-color: var(--cros-sys-shadow);
--feedback-focus-color: var(--cros-sys-focus_ring);
--feedback-highlight-color: var(--cros-sys-highlight_shape);
--feedback-link-color: var(--cros-sys-link);
--feedback-primary-color: var(--cros-sys-primary);
--feedback-prominent-color: var(--cros-sys-prominent);
--feedback-secondary-color: var(--cros-sys-secondary);
--feedback-separator-color: var(--cros-sys-separator);
--feedback-textfield-bg-color: var(--cros-sys-input_field_on_shaded);
}
</if>
html:not(body) {
/* Google colors used in UI. */
--google-blue-50: rgb(232, 240, 254);
--google-blue-300-rgb: 138, 180, 248;
--google-blue-300: rgb(var(--google-blue-300-rgb));
--google-blue-600: rgb(26, 115, 232);
--google-grey-100: rgb(241, 243, 244);
--google-grey-200: rgb(232, 234, 237);
--google-grey-500: rgb(154, 160, 166);
--google-grey-700: rgb(95, 99, 104);
--google-grey-900-rgb: 32, 33, 36;
--google-grey-900: rgb(var(--google-grey-900-rgb));
--google-red-300: rgb(242, 139, 130);
--google-red-600: rgb(217, 48, 37);
/* Feedback specific variables. */
--feedback-alert-color: var(--google-red-600);
--feedback-bg-color: rgb(255, 255, 255);
--feedback-box-shadow-color: rgb(208, 208, 208);
--feedback-focus-color: var(--google-blue-600);
--feedback-highlight-color: var(--google-blue-50);
--feedback-link-color: var(--google-blue-600);
--feedback-primary-color: var(--google-grey-900);
--feedback-prominent-color: var(--google-blue-600);
--feedback-secondary-color: var(--google-grey-700);
--feedback-separator-color: rgba(0, 0, 0, 0.14);
--feedback-textfield-bg-color: var(--google-grey-100);
}
@media (prefers-color-scheme: dark) {
<if expr="is_chromeos">
html:has(body.jelly-enabled) {
--feedback-alert-color: var(--cros-sys-alert);
--feedback-bg-color: var(--cros-sys-app_base_shaded);
--feedback-box-shadow-color: var(--cros-sys-shadow);
--feedback-focus-color: var(--cros-sys-focus_ring);
--feedback-highlight-color: var(--cros-sys-highlight_shape);
--feedback-link-color: var(--cros-sys-link);
--feedback-primary-color: var(--cros-sys-primary);
--feedback-prominent-color: var(--cros-sys-prominent);
--feedback-secondary-color: var(--cros-sys-secondary);
--feedback-separator-color: var(--cros-sys-separator);
--feedback-textfield-bg-color: var(--cros-sys-input_field_on_shaded);
}
</if>
html:not(body) {
--feedback-alert-color: var(--google-red-300);
--feedback-bg-color: var(--google-grey-900);
--feedback-box-shadow-color: rgba(var(--google-grey-900-rgb), 0.04);
--feedback-focus-color: var(--google-blue-300);
--feedback-highlight-color: rgba(var(--google-blue-300-rgb), 0.3);
--feedback-link-color: var(--google-blue-300);
--feedback-primary-color: var(--google-grey-200);
--feedback-prominent-color: var(--google-blue-300);
--feedback-secondary-color: var(--google-grey-500);
--feedback-separator-color: rgba(255, 255, 255, 0.14);
--feedback-textfield-bg-color: rgba(0,0,0,0.3);
}
}
|
