blob: 7915ed308b6f1e810ed4eed16e3e12d56c81f0d4 (
plain)
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
:root {
/* Base tokens */
/* Do not use base tokens directly as they don't carry any meaning. Refer to application tokens below. */
/** Color **/
--color-white: #ffffff;
--color-blue-05: #aaf2ff;
--color-blue-10: #80ebff;
--color-blue-20: #00ddff;
--color-blue-50: #0060df;
--color-blue-60: #0250bb;
--color-blue-70: #054096;
--color-gray-50: #bfbfc9;
--color-gray-60: #8f8f9d;
--color-gray-90: #1c1b22;
/* Application tokens */
/** Border **/
--border-radius-circle: 9999px;
--border-width: 1px;
--border-interactive-color: unset;
/** Button **/
--button-background-color: unset;
--button-background-color-hover: unset;
--button-background-color-active: unset;
/** Color **/
--color-accent-primary: unset;
--color-accent-primary-hover: unset;
--color-accent-primary-active: unset;
--color-canvas: unset;
/** Focus Outline **/
--focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
--focus-outline-color: var(--color-accent-primary);
--focus-outline-inset: calc(-1 * var(--focus-outline-width));
--focus-outline-offset: 2px;
--focus-outline-width: 2px;
/** Text **/
--text-color-deemphasized: color-mix(in srgb, currentColor 60%, transparent);
/** Size **/
--size-item-small: 16px;
--size-item-large: 32px;
}
@media (prefers-contrast) {
:root,
:host {
/* Button */
--button-background-color: ButtonFace;
--button-background-color-hover: ButtonFace;
--button-background-color-active: ButtonFace;
--button-background-color-disabled: GrayText;
/* Color */
--color-canvas: Canvas;
/* Text */
--text-color-deemphasized: inherit;
}
}
@media (forced-colors) {
/* Applies to Windows HCM only */
:root,
:host {
/* Border */
--border-interactive-color: ButtonText;
--border-interactive-color-hover: SelectedItem;
--border-interactive-color-active: ButtonText;
--border-interactive-color-disabled: GrayText;
/* Color */
--color-accent-primary: ButtonText;
--color-accent-primary-hover: SelectedItem;
--color-accent-primary-active: SelectedItem;
}
}
@media (forced-colors: none) and (prefers-contrast) {
/* Applies to macOS "increase contrast" only */
:root,
:host {
/* Border */
--border-interactive-color: AccentColor;
--border-interactive-color-hover: ButtonText;
--border-interactive-color-active: AccentColor;
--border-interactive-color-disabled: GrayText;
/* Color */
--color-accent-primary: AccentColor;
--color-accent-primary-hover: ButtonText;
--color-accent-primary-active: ButtonText;
}
}
|
