| ... |
... |
@@ -101,19 +101,43 @@ |
|
101
|
101
|
);
|
|
102
|
102
|
}
|
|
103
|
103
|
|
|
104
|
|
-button.tor-button,
|
|
|
104
|
+@media ((prefers-contrast) or (forced-colors)) {
|
|
|
105
|
+ :root {
|
|
|
106
|
+ /* Use Firefox design system accent colors. */
|
|
|
107
|
+ --tor-accent-color: var(--color-accent-primary);
|
|
|
108
|
+ --tor-accent-color-hover: var(--color-accent-primary-hover);
|
|
|
109
|
+ --tor-accent-color-active: var(--color-accent-primary-active);
|
|
|
110
|
+
|
|
|
111
|
+ /* Use Firefox design system primary button colors. */
|
|
|
112
|
+ --tor-button-text-color: var(--button-text-color-primary);
|
|
|
113
|
+ --tor-button-text-color-hover: var(--button-text-color-primary-hover);
|
|
|
114
|
+ --tor-button-text-color-active: var(--button-text-color-primary-active);
|
|
|
115
|
+ --tor-button-background-color: var(--button-background-color-primary);
|
|
|
116
|
+ --tor-button-background-color-hover: var(--button-background-color-primary-hover);
|
|
|
117
|
+ --tor-button-background-color-active: var(--button-background-color-primary-active);
|
|
|
118
|
+
|
|
|
119
|
+ /* Use Firefox design system default colors. */
|
|
|
120
|
+ --tor-focus-outline-color: var(--focus-outline-color);
|
|
|
121
|
+ --tor-link-color: var(--link-color);
|
|
|
122
|
+ --tor-link-color-hover: var(--link-color-hover);
|
|
|
123
|
+ --tor-link-color-active: var(--link-color-active);
|
|
|
124
|
+ }
|
|
|
125
|
+}
|
|
|
126
|
+
|
|
|
127
|
+/* Has a higher specificity than `button` and `button.primary`. */
|
|
|
128
|
+button.tor-button:is(*, .primary),
|
|
105
|
129
|
.tor-button {
|
|
106
|
130
|
color: var(--tor-button-text-color);
|
|
107
|
131
|
background-color: var(--tor-button-background-color);
|
|
108
|
132
|
}
|
|
109
|
133
|
|
|
110
|
|
-button.tor-button:hover,
|
|
|
134
|
+button.tor-button:is(*, .primary):hover,
|
|
111
|
135
|
.tor-button:hover {
|
|
112
|
136
|
color: var(--tor-button-text-color-hover);
|
|
113
|
137
|
background-color: var(--tor-button-background-color-hover);
|
|
114
|
138
|
}
|
|
115
|
139
|
|
|
116
|
|
-button.tor-button:hover:active,
|
|
|
140
|
+button.tor-button:is(*, .primary):hover:active,
|
|
117
|
141
|
.tor-button:hover:active {
|
|
118
|
142
|
color: var(--tor-button-text-color-active);
|
|
119
|
143
|
background-color: var(--tor-button-background-color-active);
|