Commits:
-
f9003fe3
by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! BB 42728: Modify ./mach lint to skip unused linters
TB 44406: Re-enable stylelint.
-
d28011e1
by Henry Wilkes at 2026-03-05T17:34:22+00:00
amend! TB 41817: tor-browser semantic colors.
TB 41817: tor-browser semantic styling.
Note for rebases
================
DO NOT MANUALLY RESOLVE CONFLICTS in the following directory:
toolkit/themes/shared/design-system/dist/
These files are generated by `./mach buildtokens`.
See tor-browser#44406.
When resolving conflicts, first resolve other conflicts outside the
'dist' directory, if there are any:
git mergetool ':(exclude)toolkit/themes/shared/design-system/dist/'
Then regenerate these 'dist' files:
./mach buildtokens
Then add the generated files as resolved:
git add toolkit/themes/shared/design-system/dist/
-
5a02868a
by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! BB 40925: Implemented the Security Level component
TB 44406: Use size tokens.
-
b1dd6076
by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! BB 32308: Use direct browser sizing for letterboxing.
TB 44406: Use size tokens.
-
d698a94d
by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! BB 41919: Letterboxing, add temporarily visible web content-size indicator on window resizing.
TB 44406: Use size tokens.
-
838343b0
by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! TB 7494: Create local home page for TBB.
TB 44406: Use size tokens.
-
c5b30f96
by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! TB 30237: Add v3 onion services client authentication prompt
TB 44406: Use size tokens.
-
7a8a80b9
by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! TB 40458: Implement .tor.onion aliases
TB 44406: Use size tokens.
-
80e20a04
by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! TB 41600: Add a tor circuit display panel.
TB 44406: Use size tokens.
-
80b3e2f0
by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! TB 31286: Implementation of bridge, proxy, and firewall settings in about:preferences#connection
TB 44406: Use size tokens.
-
bfe30c8d
by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! TB 27476: Implement about:torconnect captive portal within Tor Browser
TB 44406: Use size tokens.
-
dbee23bb
by Henry Wilkes at 2026-03-05T17:34:22+00:00
fixup! TB 40701: Add security warning when downloading a file
TB 44406: Use size tokens.
30 changed files:
Changes:
.stylelintrc.js
| ... |
... |
@@ -274,9 +274,9 @@ module.exports = { |
|
274
|
274
|
// Remove this line setting `csscontrols/use-logical` to null after implementing fixes
|
|
275
|
275
|
"csstools/use-logical": null,
|
|
276
|
276
|
"stylelint-plugin-mozilla/no-base-design-tokens": true,
|
|
277
|
|
- "stylelint-plugin-mozilla/use-design-tokens": true,
|
|
278
|
|
- "stylelint-plugin-mozilla/no-non-semantic-token-usage": true,
|
|
279
|
|
- "stylelint-plugin-mozilla/use-size-tokens": true,
|
|
|
277
|
+ "stylelint-plugin-mozilla/use-design-tokens": false,
|
|
|
278
|
+ "stylelint-plugin-mozilla/no-non-semantic-token-usage": false,
|
|
|
279
|
+ "stylelint-plugin-mozilla/use-size-tokens": false,
|
|
280
|
280
|
},
|
|
281
|
281
|
|
|
282
|
282
|
overrides: [
|
browser/components/abouttor/content/aboutTor.css
|
1
|
|
-@import url("chrome://global/skin/tor-colors.css");
|
|
2
|
1
|
@import url("chrome://global/skin/onion-pattern.css");
|
|
3
|
2
|
|
|
4
|
3
|
body {
|
| ... |
... |
@@ -23,7 +22,7 @@ body { |
|
23
|
22
|
/* NOTE: "form" will be given a maximum width of --form-max-width. */
|
|
24
|
23
|
/ 1fr minmax(max-content, var(--form-max-width)) 1fr;
|
|
25
|
24
|
justify-items: center;
|
|
26
|
|
- padding-inline: 20px;
|
|
|
25
|
+ padding-inline: var(--space-large);
|
|
27
|
26
|
}
|
|
28
|
27
|
|
|
29
|
28
|
body:not(.initialized) {
|
| ... |
... |
@@ -37,12 +36,10 @@ h1 { |
|
37
|
36
|
grid-area: heading;
|
|
38
|
37
|
display: flex;
|
|
39
|
38
|
align-items: center;
|
|
40
|
|
- gap: 16px;
|
|
41
|
|
- /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */
|
|
|
39
|
+ gap: var(--space-large);
|
|
42
|
40
|
font-size: 40px;
|
|
43
|
41
|
margin-block-start: 0;
|
|
44
|
|
- margin-block-end: 40px;
|
|
45
|
|
- margin-inline: 20px;
|
|
|
42
|
+ margin-block-end: var(--space-small);
|
|
46
|
43
|
}
|
|
47
|
44
|
|
|
48
|
45
|
#tor-browser-logo {
|
| ... |
... |
@@ -61,17 +58,17 @@ body:not(.is-testing) #tor-browser-home-heading-testing { |
|
61
|
58
|
#tor-check {
|
|
62
|
59
|
grid-area: tor-check;
|
|
63
|
60
|
display: flex;
|
|
64
|
|
- gap: 10px;
|
|
|
61
|
+ gap: var(--space-small);
|
|
65
|
62
|
align-items: center;
|
|
66
|
|
- padding-inline: 23px;
|
|
67
|
|
- padding-block: 11px;
|
|
|
63
|
+ padding-inline: var(--space-xlarge);
|
|
|
64
|
+ padding-block: var(--space-medium);
|
|
68
|
65
|
border-radius: var(--border-radius-medium);
|
|
69
|
|
- margin-block-start: 0;
|
|
70
|
|
- margin-block-end: 30px;
|
|
|
66
|
+ margin-block-start: var(--space-xxlarge);
|
|
|
67
|
+ margin-block-end: 0;
|
|
71
|
68
|
}
|
|
72
|
69
|
|
|
73
|
70
|
.tor-home-box {
|
|
74
|
|
- border: 1px solid var(--border-color);
|
|
|
71
|
+ border: var(--border-width) solid var(--border-color);
|
|
75
|
72
|
background-color: var(--background-color-box-info);
|
|
76
|
73
|
max-width: var(--form-max-width);
|
|
77
|
74
|
width: -moz-available;
|
| ... |
... |
@@ -84,8 +81,8 @@ body:not(.show-tor-check) #tor-check { |
|
84
|
81
|
|
|
85
|
82
|
#tor-check-icon {
|
|
86
|
83
|
flex: 0 0 auto;
|
|
87
|
|
- width: 16px;
|
|
88
|
|
- height: 16px;
|
|
|
84
|
+ width: var(--icon-size);
|
|
|
85
|
+ height: var(--icon-size);
|
|
89
|
86
|
-moz-context-properties: fill;
|
|
90
|
87
|
fill: currentColor;
|
|
91
|
88
|
}
|
| ... |
... |
@@ -97,31 +94,31 @@ body:not(.show-tor-check) #tor-check { |
|
97
|
94
|
.home-message {
|
|
98
|
95
|
grid-area: message;
|
|
99
|
96
|
text-align: center;
|
|
100
|
|
- margin-block: 1.6em;
|
|
|
97
|
+ margin-block: var(--space-xlarge);
|
|
101
|
98
|
}
|
|
102
|
99
|
|
|
103
|
100
|
.message-emoji {
|
|
104
|
|
- height: 1em;
|
|
|
101
|
+ height: var(--icon-size);
|
|
105
|
102
|
vertical-align: sub;
|
|
106
|
|
- margin-inline-end: 0.3em;
|
|
|
103
|
+ margin-inline-end: var(--space-xsmall);
|
|
107
|
104
|
}
|
|
108
|
105
|
|
|
109
|
106
|
#search-form {
|
|
110
|
107
|
grid-area: form;
|
|
111
|
108
|
/* Occupy the entire "form" block. */
|
|
112
|
109
|
justify-self: stretch;
|
|
|
110
|
+ margin-block-start: var(--space-xxlarge);
|
|
113
|
111
|
background: var(--background-color-canvas);
|
|
114
|
112
|
display: flex;
|
|
115
|
113
|
align-items: stretch;
|
|
116
|
114
|
/* Padding between elements. */
|
|
117
|
|
- --form-padding: 12px;
|
|
118
|
|
- --form-border-width: 1px;
|
|
|
115
|
+ --form-padding: var(--space-medium);
|
|
|
116
|
+ --form-border-width: var(--border-width);
|
|
119
|
117
|
/* Padding between elements and the parent's border edge. */
|
|
120
|
118
|
--form-outer-padding: calc(var(--form-padding) - var(--form-border-width));
|
|
121
|
119
|
--form-radius-container: var(--border-radius-medium);
|
|
122
|
120
|
--form-radius: calc(var(--form-radius-container) - var(--form-border-width));
|
|
123
|
|
- --logo-size: 30px;
|
|
124
|
|
- /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-radius-tokens */
|
|
|
121
|
+ --logo-size: var(--icon-size-xlarge);
|
|
125
|
122
|
border-radius: var(--form-radius-container);
|
|
126
|
123
|
border-width: var(--form-border-width);
|
|
127
|
124
|
border-style: solid;
|
| ... |
... |
@@ -151,12 +148,10 @@ body:not(.show-tor-check) #tor-check { |
|
151
|
148
|
padding-inline-end: var(--form-padding);
|
|
152
|
149
|
padding-inline-start: calc(var(--form-outer-padding) + var(--logo-size) /* logo */ + var(--form-padding) /* padding after logo. */);
|
|
153
|
150
|
/* Make sure clickable area does not extend beyond the form's border. */
|
|
154
|
|
- /* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */
|
|
155
|
151
|
border-start-start-radius: var(--form-radius);
|
|
156
|
152
|
border-end-start-radius: var(--form-radius);
|
|
157
|
153
|
border-start-end-radius: 0;
|
|
158
|
154
|
border-end-end-radius: 0;
|
|
159
|
|
- /* stylelint-enable stylelint-plugin-mozilla/use-border-radius-tokens */
|
|
160
|
155
|
/* Focus and outline styling move to the parent. */
|
|
161
|
156
|
background: none;
|
|
162
|
157
|
border: none;
|
| ... |
... |
@@ -168,15 +163,13 @@ body:not(.show-tor-check) #tor-check { |
|
168
|
163
|
align-content: center;
|
|
169
|
164
|
padding-block: var(--form-outer-padding);
|
|
170
|
165
|
padding-inline-end: var(--form-outer-padding);
|
|
171
|
|
- /* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */
|
|
172
|
166
|
border-start-end-radius: var(--form-radius);
|
|
173
|
167
|
border-end-end-radius: var(--form-radius);
|
|
174
|
168
|
border-start-start-radius: 0;
|
|
175
|
169
|
border-end-start-radius: 0;
|
|
176
|
|
- /* stylelint-enable stylelint-plugin-mozilla/use-border-radius-tokens */
|
|
177
|
170
|
padding-inline-start: 0;
|
|
178
|
171
|
/* Non-clickable gap between input and toggle. */
|
|
179
|
|
- margin-inline-start: 0.5em;
|
|
|
172
|
+ margin-inline-start: var(--space-small);
|
|
180
|
173
|
}
|
|
181
|
174
|
|
|
182
|
175
|
#survey {
|
| ... |
... |
@@ -188,11 +181,10 @@ body:not(.show-tor-check) #tor-check { |
|
188
|
181
|
". buttons buttons" min-content
|
|
189
|
182
|
/ min-content 1fr min-content;
|
|
190
|
183
|
border-radius: var(--border-radius-small);
|
|
191
|
|
- /* Remove 1px from padding for border. */
|
|
192
|
|
- padding-block: 3px 11px;
|
|
193
|
|
- padding-inline: 15px 3px;
|
|
194
|
|
- gap: 8px;
|
|
195
|
|
- margin-block-end: 1.6em;
|
|
|
184
|
+ padding-block: var(--space-xsmall) var(--space-medium);
|
|
|
185
|
+ padding-inline: var(--space-large) var(--space-xsmall);
|
|
|
186
|
+ gap: var(--space-small);
|
|
|
187
|
+ margin-block-end: var(--space-xlarge);
|
|
196
|
188
|
}
|
|
197
|
189
|
|
|
198
|
190
|
body:not(.show-survey) #survey {
|
| ... |
... |
@@ -205,9 +197,9 @@ body:not(.show-survey) #survey { |
|
205
|
197
|
|
|
206
|
198
|
#survey-icon {
|
|
207
|
199
|
grid-area: icon;
|
|
208
|
|
- width: 24px;
|
|
209
|
|
- height: 24px;
|
|
210
|
|
- padding: 8px;
|
|
|
200
|
+ width: var(--icon-size-large);
|
|
|
201
|
+ height: var(--icon-size-large);
|
|
|
202
|
+ padding: var(--space-small);
|
|
211
|
203
|
border-radius: var(--border-radius-circle);
|
|
212
|
204
|
}
|
|
213
|
205
|
|
| ... |
... |
@@ -218,18 +210,18 @@ body:not(.show-survey) #survey { |
|
218
|
210
|
|
|
219
|
211
|
#survey-icon,
|
|
220
|
212
|
#survey-heading {
|
|
221
|
|
- margin-block-start: 8px;
|
|
|
213
|
+ margin-block-start: var(--space-small);
|
|
222
|
214
|
}
|
|
223
|
215
|
|
|
224
|
216
|
#survey-body {
|
|
225
|
217
|
grid-area: body;
|
|
226
|
|
- margin-block-end: 8px;
|
|
|
218
|
+ margin-block-end: var(--space-small);
|
|
227
|
219
|
}
|
|
228
|
220
|
|
|
229
|
221
|
#survey-buttons {
|
|
230
|
222
|
grid-area: buttons;
|
|
231
|
223
|
display: flex;
|
|
232
|
|
- gap: 8px;
|
|
|
224
|
+ gap: var(--space-small);
|
|
233
|
225
|
}
|
|
234
|
226
|
|
|
235
|
227
|
#survey-buttons > * {
|
| ... |
... |
@@ -248,7 +240,7 @@ body:not(.show-survey) #survey { |
|
248
|
240
|
/* On dark background */
|
|
249
|
241
|
:root {
|
|
250
|
242
|
background-color: #2c0449;
|
|
251
|
|
- --focus-outline-color: var(--tor-focus-outline-color-dark);
|
|
|
243
|
+ --focus-outline-color: var(--focus-outline-color-tor-dark);
|
|
252
|
244
|
--focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
|
|
253
|
245
|
--onion-pattern-stroke-color: #3e0663;
|
|
254
|
246
|
--onion-pattern-fill-color: #350556;
|
| ... |
... |
@@ -271,9 +263,9 @@ body:not(.show-survey) #survey { |
|
271
|
263
|
--button-text-color-ghost: var(--button-text-color);
|
|
272
|
264
|
--button-text-color-ghost-hover: var(--button-text-color);
|
|
273
|
265
|
--button-text-color-ghost-active: var(--button-text-color);
|
|
274
|
|
- --link-color: var(--tor-link-color-dark);
|
|
275
|
|
- --link-color-hover: var(--tor-link-color-hover-dark);
|
|
276
|
|
- --link-color-active: var(--tor-link-color-active-dark);
|
|
|
266
|
+ --link-color: var(--link-color-tor-dark);
|
|
|
267
|
+ --link-color-hover: var(--link-color-tor-hover-dark);
|
|
|
268
|
+ --link-color-active: var(--link-color-tor-active-dark);
|
|
277
|
269
|
}
|
|
278
|
270
|
|
|
279
|
271
|
#search-form {
|
| ... |
... |
@@ -286,8 +278,7 @@ body:not(.show-survey) #survey { |
|
286
|
278
|
#search-form:has(#search-input:focus-visible) {
|
|
287
|
279
|
/* Use a light-themed inner-border to contrast with the dark-themed
|
|
288
|
280
|
* focus outline. */
|
|
289
|
|
- /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-color-tokens */
|
|
290
|
|
- border-color: var(--tor-focus-outline-color-light);
|
|
|
281
|
+ border-color: var(--focus-outline-color-tor-light);
|
|
291
|
282
|
}
|
|
292
|
283
|
|
|
293
|
284
|
#search-form.onionized-search:has(#search-input:not(:focus-visible)) {
|
| ... |
... |
@@ -298,16 +289,16 @@ body:not(.show-survey) #survey { |
|
298
|
289
|
|
|
299
|
290
|
/* Light background. */
|
|
300
|
291
|
#search-form > * {
|
|
301
|
|
- --focus-outline-color: var(--tor-focus-outline-color-light);
|
|
|
292
|
+ --focus-outline-color: var(--focus-outline-color-tor-light);
|
|
302
|
293
|
--focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
|
|
303
|
294
|
/* Variables used for --toggle- variables. */
|
|
304
|
|
- --color-accent-primary: var(--tor-button-background-color-light);
|
|
305
|
|
- --color-accent-primary-hover: var(--tor-button-background-color-hover-light);
|
|
306
|
|
- --color-accent-primary-active: var(--tor-button-background-color-active-light);
|
|
|
295
|
+ --color-accent-primary: var(--button-background-color-tor-light);
|
|
|
296
|
+ --color-accent-primary-hover: var(--button-background-color-tor-hover-light);
|
|
|
297
|
+ --color-accent-primary-active: var(--button-background-color-tor-active-light);
|
|
307
|
298
|
}
|
|
308
|
299
|
|
|
309
|
300
|
#search-form.onionized-search #onionize-toggle {
|
|
310
|
|
- color: var(--tor-link-color-light);
|
|
|
301
|
+ color: var(--link-color);
|
|
311
|
302
|
}
|
|
312
|
303
|
|
|
313
|
304
|
#survey {
|
| ... |
... |
@@ -321,9 +312,9 @@ body:not(.show-survey) #survey { |
|
321
|
312
|
|
|
322
|
313
|
#survey-launch {
|
|
323
|
314
|
color: var(--text-color-light);
|
|
324
|
|
- --button-background-color-primary: var(--tor-button-background-color-dark);
|
|
325
|
|
- --button-background-color-primary-hover: var(--tor-button-background-color-hover-dark);
|
|
326
|
|
- --button-background-color-primary-active: var(--tor-button-background-color-active-dark);
|
|
|
315
|
+ --button-background-color-primary: var(--button-background-color-tor-dark);
|
|
|
316
|
+ --button-background-color-primary-hover: var(--button-background-color-tor-hover-dark);
|
|
|
317
|
+ --button-background-color-primary-active: var(--button-background-color-tor-active-dark);
|
|
327
|
318
|
}
|
|
328
|
319
|
}
|
|
329
|
320
|
|
| ... |
... |
@@ -342,7 +333,7 @@ body.show-yec h1 { |
|
342
|
333
|
#yec-banner {
|
|
343
|
334
|
grid-area: heading;
|
|
344
|
335
|
border-radius: var(--border-radius-medium);
|
|
345
|
|
- border: 1px solid var(--border-color);
|
|
|
336
|
+ border: var(--border-width) solid var(--border-color);
|
|
346
|
337
|
display: grid;
|
|
347
|
338
|
grid-template:
|
|
348
|
339
|
"yec-heading yec-image" auto
|
| ... |
... |
@@ -356,10 +347,10 @@ body.show-yec h1 { |
|
356
|
347
|
padding-inline: 47px 47px;
|
|
357
|
348
|
box-sizing: border-box;
|
|
358
|
349
|
max-width: 850px;
|
|
359
|
|
- margin-block-end: 40px;
|
|
|
350
|
+ margin-block-end: var(--space-small);
|
|
360
|
351
|
/* Position for the close button. */
|
|
361
|
352
|
position: relative;
|
|
362
|
|
- gap: 0 24px;
|
|
|
353
|
+ gap: 0 var(--space-xlarge);
|
|
363
|
354
|
}
|
|
364
|
355
|
|
|
365
|
356
|
#yec-image {
|
| ... |
... |
@@ -371,12 +362,12 @@ body.show-yec h1 { |
|
371
|
362
|
* contrast or forced color theme. */
|
|
372
|
363
|
background-color: var(--yec-image-background);
|
|
373
|
364
|
border-radius: var(--border-radius-medium);
|
|
374
|
|
- padding: 4px;
|
|
|
365
|
+ padding: var(--space-xsmall);
|
|
375
|
366
|
height: 196px;
|
|
376
|
|
- border: 1px solid transparent;
|
|
|
367
|
+ border: var(--border-width) solid transparent;
|
|
377
|
368
|
/* Remove border and padding from the layout size. These parts are only
|
|
378
|
369
|
* visible in contrast or forced color themes. */
|
|
379
|
|
- margin: -5px;
|
|
|
370
|
+ margin: calc(-1 * (var(--border-width) + var(--space-xsmall)));
|
|
380
|
371
|
/* Do not let forced colors ignore the background-color, which is needed to
|
|
381
|
372
|
* see the drawing. */
|
|
382
|
373
|
forced-color-adjust: none;
|
| ... |
... |
@@ -388,15 +379,14 @@ body.show-yec h1 { |
|
388
|
379
|
|
|
389
|
380
|
#yec-heading {
|
|
390
|
381
|
grid-area: yec-heading;
|
|
391
|
|
- margin-block: 0 16px;
|
|
392
|
|
- /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */
|
|
|
382
|
+ margin-block: 0 var(--space-large);
|
|
393
|
383
|
font-size: 64px;
|
|
394
|
384
|
font-weight: var(--font-weight);
|
|
395
|
385
|
}
|
|
396
|
386
|
|
|
397
|
387
|
#yec-body {
|
|
398
|
388
|
grid-area: yec-body;
|
|
399
|
|
- margin-block: 0 12px;
|
|
|
389
|
+ margin-block: 0 var(--space-medium);
|
|
400
|
390
|
}
|
|
401
|
391
|
|
|
402
|
392
|
#yec-body-highlight {
|
| ... |
... |
@@ -405,7 +395,7 @@ body.show-yec h1 { |
|
405
|
395
|
|
|
406
|
396
|
#yec-matching {
|
|
407
|
397
|
grid-area: yec-matching;
|
|
408
|
|
- margin-block: 0 32px;
|
|
|
398
|
+ margin-block: 0 var(--space-xxlarge);
|
|
409
|
399
|
}
|
|
410
|
400
|
|
|
411
|
401
|
#yec-donate-link {
|
| ... |
... |
@@ -414,7 +404,7 @@ body.show-yec h1 { |
|
414
|
404
|
/* Style like a button. */
|
|
415
|
405
|
font-weight: var(--button-font-weight);
|
|
416
|
406
|
color: var(--button-text-color);
|
|
417
|
|
- border: 1px solid var(--button-border-color);
|
|
|
407
|
+ border: var(--border-width) solid var(--button-border-color);
|
|
418
|
408
|
border-radius: var(--button-border-radius);
|
|
419
|
409
|
background-color: var(--button-background-color);
|
|
420
|
410
|
padding: var(--button-padding);
|
| ... |
... |
@@ -423,7 +413,7 @@ body.show-yec h1 { |
|
423
|
413
|
text-decoration: none;
|
|
424
|
414
|
display: flex;
|
|
425
|
415
|
align-items: center;
|
|
426
|
|
- gap: 8px;
|
|
|
416
|
+ gap: var(--space-small);
|
|
427
|
417
|
white-space: nowrap;
|
|
428
|
418
|
}
|
|
429
|
419
|
|
| ... |
... |
@@ -450,8 +440,8 @@ body.show-yec h1 { |
|
450
|
440
|
|
|
451
|
441
|
#yec-close {
|
|
452
|
442
|
position: absolute;
|
|
453
|
|
- inset-block-start: 16px;
|
|
454
|
|
- inset-inline-end: 16px;
|
|
|
443
|
+ inset-block-start: var(--space-large);
|
|
|
444
|
+ inset-inline-end: var(--space-large);
|
|
455
|
445
|
}
|
|
456
|
446
|
|
|
457
|
447
|
@media (max-width: 768px) {
|
| ... |
... |
@@ -464,11 +454,11 @@ body.show-yec h1 { |
|
464
|
454
|
"yec-matching" auto
|
|
465
|
455
|
"yec-donate" min-content
|
|
466
|
456
|
/ 1fr;
|
|
467
|
|
- padding-block: 31px 39px;
|
|
468
|
|
- padding-inline: 15px;
|
|
|
457
|
+ padding-block: var(--space-xxlarge);
|
|
|
458
|
+ padding-inline: var(--space-large);
|
|
469
|
459
|
/* Match max-width of the form. */
|
|
470
|
460
|
max-width: var(--form-max-width);
|
|
471
|
|
- margin-block-end: 32px;
|
|
|
461
|
+ margin-block-end: var(--space-xxlarge);
|
|
472
|
462
|
}
|
|
473
|
463
|
|
|
474
|
464
|
#yec-image {
|
| ... |
... |
@@ -476,18 +466,17 @@ body.show-yec h1 { |
|
476
|
466
|
}
|
|
477
|
467
|
|
|
478
|
468
|
#yec-heading {
|
|
479
|
|
- margin-block-start: 16px;
|
|
|
469
|
+ margin-block-start: var(--space-large);
|
|
480
|
470
|
text-align: center;
|
|
481
|
471
|
text-wrap-style: balance;
|
|
482
|
472
|
}
|
|
483
|
473
|
|
|
484
|
474
|
#yec-heading {
|
|
485
|
|
- /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */
|
|
486
|
475
|
font-size: 50px;
|
|
487
|
476
|
}
|
|
488
|
477
|
|
|
489
|
478
|
#yec-matching {
|
|
490
|
|
- margin-block-end: 16px;
|
|
|
479
|
+ margin-block-end: var(--space-large);
|
|
491
|
480
|
}
|
|
492
|
481
|
|
|
493
|
482
|
#yec-donate-link {
|
browser/components/onionservices/content/authPreferences.css
|
1
|
1
|
/* Copyright (c) 2020, The Tor Project, Inc. */
|
|
2
|
2
|
|
|
3
|
3
|
#onionservices-savedkeys-dialog {
|
|
4
|
|
- min-width: 45em;
|
|
|
4
|
+ min-width: 700px;
|
|
5
|
5
|
}
|
|
6
|
6
|
|
|
7
|
7
|
#onionservices-savedkeys-tree treechildren::-moz-tree-cell-text {
|
| ... |
... |
@@ -9,8 +9,8 @@ |
|
9
|
9
|
}
|
|
10
|
10
|
|
|
11
|
11
|
#onionservices-savedkeys-errorContainer {
|
|
12
|
|
- margin-block-start: 4px;
|
|
13
|
|
- min-height: 3em;
|
|
|
12
|
+ margin-block-start: var(--space-xsmall);
|
|
|
13
|
+ min-height: var(--size-item-xlarge);
|
|
14
|
14
|
}
|
|
15
|
15
|
|
|
16
|
16
|
#onionservices-savedkeys-errorContainer:not(.show-error) {
|
| ... |
... |
@@ -18,7 +18,7 @@ |
|
18
|
18
|
}
|
|
19
|
19
|
|
|
20
|
20
|
#onionservices-savedkeys-errorIcon {
|
|
21
|
|
- margin-inline-end: 4px;
|
|
|
21
|
+ margin-inline-end: var(--space-xsmall);
|
|
22
|
22
|
list-style-image: url("chrome://global/skin/icons/warning.svg");
|
|
23
|
23
|
-moz-context-properties: fill;
|
|
24
|
24
|
fill: var(--icon-color-warning);
|
browser/components/onionservices/content/onionservices.css
| ... |
... |
@@ -7,8 +7,8 @@ |
|
7
|
7
|
#tor-clientauth-notification-key {
|
|
8
|
8
|
box-sizing: border-box;
|
|
9
|
9
|
width: 100%;
|
|
10
|
|
- margin-top: 15px;
|
|
11
|
|
- padding: 6px;
|
|
|
10
|
+ margin-top: var(--space-large);
|
|
|
11
|
+ padding: var(--space-small);
|
|
12
|
12
|
}
|
|
13
|
13
|
|
|
14
|
14
|
/* Start of rules adapted from
|
| ... |
... |
@@ -16,7 +16,7 @@ |
|
16
|
16
|
* use the same rules).
|
|
17
|
17
|
*/
|
|
18
|
18
|
#tor-clientauth-notification-key.invalid {
|
|
19
|
|
- border: 1px solid var(--outline-color-error);
|
|
|
19
|
+ border: var(--border-width) solid var(--outline-color-error);
|
|
20
|
20
|
}
|
|
21
|
21
|
|
|
22
|
22
|
#tor-clientauth-warning {
|
| ... |
... |
@@ -26,10 +26,10 @@ |
|
26
|
26
|
background: var(--button-background-color-destructive);
|
|
27
|
27
|
color: var(--button-text-color-destructive);
|
|
28
|
28
|
border-radius: var(--border-radius-xsmall);
|
|
29
|
|
- inset-inline-start: 3px;
|
|
30
|
|
- padding: 5px 12px;
|
|
|
29
|
+ inset-inline-start: var(--space-xsmall);
|
|
|
30
|
+ padding: var(--space-xsmall) var(--space-medium);
|
|
31
|
31
|
position: relative;
|
|
32
|
|
- top: 6px;
|
|
|
32
|
+ inset-block-start: var(--space-small);
|
|
33
|
33
|
z-index: 1;
|
|
34
|
34
|
}
|
|
35
|
35
|
|
| ... |
... |
@@ -39,16 +39,16 @@ |
|
39
|
39
|
|
|
40
|
40
|
#tor-clientauth-warning::before {
|
|
41
|
41
|
background: var(--button-background-color-destructive);
|
|
42
|
|
- bottom: -8px;
|
|
|
42
|
+ inset-block-end: calc(-1 * var(--space-small));
|
|
|
43
|
+ inset-block-start: calc(-1 * var(--space-small));
|
|
43
|
44
|
content: ".";
|
|
44
|
|
- height: 16px;
|
|
45
|
|
- inset-inline-start: 12px;
|
|
|
45
|
+ height: var(--size-item-small);
|
|
|
46
|
+ inset-inline-start: var(--space-medium);
|
|
46
|
47
|
position: absolute;
|
|
47
|
48
|
text-indent: -999px;
|
|
48
|
|
- top: -7px;
|
|
49
|
49
|
transform: rotate(45deg);
|
|
50
|
50
|
white-space: nowrap;
|
|
51
|
|
- width: 16px;
|
|
|
51
|
+ width: var(--size-item-small);
|
|
52
|
52
|
z-index: -1;
|
|
53
|
53
|
}
|
|
54
|
54
|
|
browser/components/rulesets/content/aboutRulesets.css
| ... |
... |
@@ -11,7 +11,7 @@ body { |
|
11
|
11
|
label {
|
|
12
|
12
|
display: flex;
|
|
13
|
13
|
align-items: center;
|
|
14
|
|
- padding: 6px 0;
|
|
|
14
|
+ padding: var(--space-small) 0;
|
|
15
|
15
|
}
|
|
16
|
16
|
|
|
17
|
17
|
input[type="text"] {
|
| ... |
... |
@@ -40,7 +40,7 @@ dt { |
|
40
|
40
|
}
|
|
41
|
41
|
|
|
42
|
42
|
dd {
|
|
43
|
|
- margin: 8px 0 0 0;
|
|
|
43
|
+ margin: var(--space-small) 0 0 0;
|
|
44
|
44
|
padding: 0;
|
|
45
|
45
|
max-width: 600px;
|
|
46
|
46
|
box-sizing: border-box;
|
| ... |
... |
@@ -50,7 +50,7 @@ hr { |
|
50
|
50
|
width: 40px;
|
|
51
|
51
|
margin: 0;
|
|
52
|
52
|
border: none;
|
|
53
|
|
- border-top: 1px solid var(--border-color);
|
|
|
53
|
+ border-block-start: var(--border-width) solid var(--border-color);
|
|
54
|
54
|
}
|
|
55
|
55
|
|
|
56
|
56
|
.hidden {
|
| ... |
... |
@@ -85,11 +85,11 @@ hr { |
|
85
|
85
|
}
|
|
86
|
86
|
|
|
87
|
87
|
#warning-description {
|
|
88
|
|
- margin: 30px 0 16px 0;
|
|
|
88
|
+ margin: var(--space-xxlarge) 0 var(--space-large) 0;
|
|
89
|
89
|
}
|
|
90
|
90
|
|
|
91
|
91
|
#warning-buttonbar {
|
|
92
|
|
- margin-top: 30px;
|
|
|
92
|
+ margin-top: var(--space-xxlarge);
|
|
93
|
93
|
text-align: right;
|
|
94
|
94
|
}
|
|
95
|
95
|
|
| ... |
... |
@@ -113,7 +113,7 @@ hr { |
|
113
|
113
|
section {
|
|
114
|
114
|
display: none;
|
|
115
|
115
|
flex: 1 0 auto;
|
|
116
|
|
- padding: 40px;
|
|
|
116
|
+ padding: var(--space-xxlarge);
|
|
117
|
117
|
}
|
|
118
|
118
|
|
|
119
|
119
|
.title {
|
| ... |
... |
@@ -121,25 +121,25 @@ section { |
|
121
|
121
|
align-items: center;
|
|
122
|
122
|
width: var(--content-width);
|
|
123
|
123
|
max-width: 100%;
|
|
124
|
|
- padding-bottom: 16px;
|
|
125
|
|
- border-bottom: 1px solid var(--border-color);
|
|
|
124
|
+ padding-bottom: var(--space-large);
|
|
|
125
|
+ border-bottom: var(--border-width) solid var(--border-color);
|
|
126
|
126
|
}
|
|
127
|
127
|
|
|
128
|
128
|
.title h1 {
|
|
129
|
129
|
margin: 0;
|
|
130
|
130
|
padding: 0;
|
|
131
|
|
- padding-inline-start: 35px;
|
|
|
131
|
+ padding-inline-start: var(--space-xxlarge);
|
|
132
|
132
|
font-size: var(--font-size-xlarge);
|
|
133
|
133
|
font-weight: var(--font-weight-bold);
|
|
134
|
134
|
background-image: url("chrome://browser/content/rulesets/securedrop.svg");
|
|
135
|
135
|
background-position: 0 center;
|
|
136
|
|
- background-size: 22px;
|
|
137
|
|
- min-height: 22px;
|
|
|
136
|
+ background-size: var(--icon-size-large);
|
|
|
137
|
+ min-height: var(--icon-size-large);
|
|
138
|
138
|
background-repeat: no-repeat;
|
|
139
|
139
|
}
|
|
140
|
140
|
|
|
141
|
141
|
#main-content h1:dir(rtl) {
|
|
142
|
|
- background-position: right 0 top 4px;
|
|
|
142
|
+ background-position: right 0 center;
|
|
143
|
143
|
}
|
|
144
|
144
|
|
|
145
|
145
|
/* Ruleset list */
|
| ... |
... |
@@ -150,15 +150,15 @@ aside { |
|
150
|
150
|
flex: 0 0 var(--sidebar-width);
|
|
151
|
151
|
box-sizing: border-box;
|
|
152
|
152
|
|
|
153
|
|
- border-inline-end: 1px solid var(--border-color);
|
|
|
153
|
+ border-inline-end: var(--border-width) solid var(--border-color);
|
|
154
|
154
|
background-color: var(--background-color-box);
|
|
155
|
155
|
}
|
|
156
|
156
|
|
|
157
|
157
|
#ruleset-heading {
|
|
158
|
|
- padding: 16px;
|
|
|
158
|
+ padding: var(--space-large);
|
|
159
|
159
|
text-align: center;
|
|
160
|
160
|
font-weight: var(--font-weight-bold);
|
|
161
|
|
- border-bottom: 1px solid var(--border-color);
|
|
|
161
|
+ border-bottom: var(--border-width) solid var(--border-color);
|
|
162
|
162
|
}
|
|
163
|
163
|
|
|
164
|
164
|
#ruleset-list-container {
|
| ... |
... |
@@ -166,7 +166,7 @@ aside { |
|
166
|
166
|
}
|
|
167
|
167
|
|
|
168
|
168
|
#ruleset-list-empty {
|
|
169
|
|
- padding: 16px;
|
|
|
169
|
+ padding: var(--space-large);
|
|
170
|
170
|
text-align: center;
|
|
171
|
171
|
}
|
|
172
|
172
|
|
| ... |
... |
@@ -183,10 +183,10 @@ aside { |
|
183
|
183
|
display: flex;
|
|
184
|
184
|
align-items: center;
|
|
185
|
185
|
margin: 0;
|
|
186
|
|
- padding: 10px 18px;
|
|
|
186
|
+ padding: var(--space-medium) var(--space-large);
|
|
187
|
187
|
list-style: none;
|
|
188
|
188
|
border-inline-start: 4px solid transparent;
|
|
189
|
|
- border-bottom: 1px solid var(--border-color);
|
|
|
189
|
+ border-block-end: var(--border-width) solid var(--border-color);
|
|
190
|
190
|
}
|
|
191
|
191
|
|
|
192
|
192
|
#ruleset-list li:last-child {
|
| ... |
... |
@@ -194,11 +194,11 @@ aside { |
|
194
|
194
|
}
|
|
195
|
195
|
|
|
196
|
196
|
#ruleset-list .icon {
|
|
197
|
|
- width: 16px;
|
|
198
|
|
- height: 16px;
|
|
199
|
|
- margin-inline-end: 12px;
|
|
|
197
|
+ width: var(--icon-size);
|
|
|
198
|
+ height: var(--icon-size);
|
|
|
199
|
+ margin-inline-end: var(--space-medium);
|
|
200
|
200
|
background-image: url("chrome://browser/content/rulesets/securedrop.svg");
|
|
201
|
|
- background-size: 16px;
|
|
|
201
|
+ background-size: var(--icon-size);
|
|
202
|
202
|
}
|
|
203
|
203
|
|
|
204
|
204
|
#ruleset-list .icon.has-favicon {
|
| ... |
... |
@@ -215,7 +215,6 @@ aside { |
|
215
|
215
|
}
|
|
216
|
216
|
|
|
217
|
217
|
#ruleset-list .selected {
|
|
218
|
|
- /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-color-tokens */
|
|
219
|
218
|
border-inline-start-color: var(--color-accent-primary);
|
|
220
|
219
|
}
|
|
221
|
220
|
|
| ... |
... |
@@ -243,7 +242,7 @@ aside { |
|
243
|
242
|
}
|
|
244
|
243
|
|
|
245
|
244
|
#ruleset-jwk-value {
|
|
246
|
|
- padding: 8px;
|
|
|
245
|
+ padding: var(--space-small);
|
|
247
|
246
|
border-radius: var(--border-radius-xsmall);
|
|
248
|
247
|
background-color: var(--background-color-box);
|
|
249
|
248
|
font-size: var(--font-size-small);
|
| ... |
... |
@@ -254,10 +253,10 @@ aside { |
|
254
|
253
|
|
|
255
|
254
|
#ruleset-edit {
|
|
256
|
255
|
margin-inline-start: auto;
|
|
257
|
|
- padding-inline-start: 32px;
|
|
|
256
|
+ padding-inline-start: var(--space-xxlarge);
|
|
258
|
257
|
background-image: url("chrome://global/skin/icons/edit.svg");
|
|
259
|
258
|
background-repeat: no-repeat;
|
|
260
|
|
- background-position: 8px;
|
|
|
259
|
+ background-position: var(--space-small);
|
|
261
|
260
|
-moz-context-properties: fill;
|
|
262
|
261
|
fill: currentColor;
|
|
263
|
262
|
min-width: auto;
|
| ... |
... |
@@ -273,7 +272,7 @@ aside { |
|
273
|
272
|
}
|
|
274
|
273
|
|
|
275
|
274
|
#ruleset-updated {
|
|
276
|
|
- margin-top: 24px;
|
|
|
275
|
+ margin-top: var(--space-xlarge);
|
|
277
|
276
|
color: var(--text-color-deemphasized);
|
|
278
|
277
|
font-size: var(--font-size-small);
|
|
279
|
278
|
}
|
browser/components/securitylevel/content/securityLevelPanel.css
|
1
|
1
|
/* Security Level CSS */
|
|
2
|
2
|
|
|
3
|
3
|
#securityLevel-background {
|
|
4
|
|
- min-height: 10em;
|
|
5
|
|
- padding-inline: 16px;
|
|
6
|
|
- column-gap: 0.5em;
|
|
|
4
|
+ min-height: 150px;
|
|
|
5
|
+ padding-inline: var(--space-large);
|
|
|
6
|
+ column-gap: var(--space-small);
|
|
7
|
7
|
display: grid;
|
|
8
|
8
|
grid-template:
|
|
9
|
|
- "top-pad icon" 16px
|
|
|
9
|
+ "top-pad icon" var(--space-large)
|
|
10
|
10
|
"title icon" auto
|
|
11
|
11
|
"body icon" auto
|
|
12
|
12
|
"learn-more icon" auto
|
|
13
|
|
- "bottom-pad icon" minmax(8px, 1fr)
|
|
|
13
|
+ "bottom-pad icon" minmax(var(--space-small), 1fr)
|
|
14
|
14
|
/ auto auto;
|
|
15
|
15
|
}
|
|
16
|
16
|
|
|
17
|
17
|
#securityLevel-background-image {
|
|
18
|
18
|
grid-area: icon;
|
|
19
|
|
- --security-level-icon-size: 9em;
|
|
|
19
|
+ --security-level-icon-size: 130px;
|
|
20
|
20
|
width: var(--security-level-icon-size);
|
|
21
|
21
|
height: var(--security-level-icon-size);
|
|
22
|
|
- margin-block: 0.4em;
|
|
|
22
|
+ margin-block: var(--space-small);
|
|
23
|
23
|
/* Middle of shield aligns with the panel padding: */
|
|
24
|
24
|
margin-inline-end: calc(-0.5 * var(--security-level-icon-size));
|
|
25
|
25
|
align-self: start;
|
| ... |
... |
@@ -50,12 +50,12 @@ |
|
50
|
50
|
}
|
|
51
|
51
|
|
|
52
|
52
|
#securityLevel-background p {
|
|
53
|
|
- margin-block: 0 16px;
|
|
|
53
|
+ margin-block: 0 var(--space-large);
|
|
54
|
54
|
}
|
|
55
|
55
|
|
|
56
|
56
|
/* Override margin in panelUI-shared.css */
|
|
57
|
57
|
#securityLevel-panel toolbarseparator#securityLevel-separator {
|
|
58
|
|
- margin-inline: 16px;
|
|
|
58
|
+ margin-inline: var(--space-large);
|
|
59
|
59
|
}
|
|
60
|
60
|
|
|
61
|
61
|
#securityLevel-level {
|
| ... |
... |
@@ -65,7 +65,7 @@ |
|
65
|
65
|
}
|
|
66
|
66
|
|
|
67
|
67
|
#securityLevel-summary {
|
|
68
|
|
- max-width: 20em;
|
|
|
68
|
+ max-width: 300px;
|
|
69
|
69
|
grid-area: body;
|
|
70
|
70
|
}
|
|
71
|
71
|
|
browser/components/securitylevel/content/securityLevelPreferences.css
| ... |
... |
@@ -10,8 +10,8 @@ |
|
10
|
10
|
.security-level-icon {
|
|
11
|
11
|
grid-area: icon;
|
|
12
|
12
|
align-self: start;
|
|
13
|
|
- width: 24px;
|
|
14
|
|
- height: 24px;
|
|
|
13
|
+ width: var(--icon-size-large);
|
|
|
14
|
+ height: var(--icon-size-large);
|
|
15
|
15
|
-moz-context-properties: fill;
|
|
16
|
16
|
fill: var(--icon-color);
|
|
17
|
17
|
margin-block-start: var(--space-xsmall);
|
| ... |
... |
@@ -97,7 +97,7 @@ |
|
97
|
97
|
#security-level-current {
|
|
98
|
98
|
margin-block-start: var(--space-large);
|
|
99
|
99
|
background: var(--background-color-box);
|
|
100
|
|
- border: 1px solid var(--border-color);
|
|
|
100
|
+ border: var(--border-width) solid var(--border-color);
|
|
101
|
101
|
border-radius: var(--border-radius-small);
|
|
102
|
102
|
padding: var(--space-medium);
|
|
103
|
103
|
}
|
browser/components/torcircuit/content/torCircuitPanel.css
|
1
|
1
|
/* Toolbar button */
|
|
2
|
2
|
|
|
3
|
3
|
#tor-circuit-button-icon {
|
|
4
|
|
- width: 16px;
|
|
5
|
|
- height: 16px;
|
|
|
4
|
+ width: var(--icon-size);
|
|
|
5
|
+ height: var(--icon-size);
|
|
6
|
6
|
/* We want to set flat fill if we have prefers-contrast. Otherwise, we want a
|
|
7
|
7
|
* gradient fill depending on the dark mode.
|
|
8
|
8
|
* context-fill is insufficient for a linear gradient, so we instead use the
|
| ... |
... |
@@ -69,10 +69,10 @@ |
|
69
|
69
|
#tor-circuit-alias img {
|
|
70
|
70
|
-moz-context-properties: fill;
|
|
71
|
71
|
fill: currentColor;
|
|
72
|
|
- width: 14px;
|
|
73
|
|
- height: 14px;
|
|
|
72
|
+ width: var(--icon-size);
|
|
|
73
|
+ height: var(--icon-size);
|
|
74
|
74
|
flex: 0 0 auto;
|
|
75
|
|
- margin-inline-end: 0.25em;
|
|
|
75
|
+ margin-inline-end: var(--space-xsmall);
|
|
76
|
76
|
}
|
|
77
|
77
|
|
|
78
|
78
|
#tor-circuit-alias-label {
|
| ... |
... |
@@ -107,8 +107,8 @@ |
|
107
|
107
|
* list item so that the different parts visually connect.
|
|
108
|
108
|
* Using list-style-image does not give us enough control over sizing the
|
|
109
|
109
|
* image. So instead we use a background-image. */
|
|
110
|
|
- padding-inline-start: 1.5em;
|
|
111
|
|
- padding-block: 6px;
|
|
|
110
|
+ padding-inline-start: var(--space-xlarge);
|
|
|
111
|
+ padding-block: var(--space-small);
|
|
112
|
112
|
background-image: url("chrome://browser/content/tor-circuit-node-middle.svg");
|
|
113
|
113
|
-moz-context-properties: fill;
|
|
114
|
114
|
/* Light Gray 50 */
|
| ... |
... |
@@ -118,7 +118,7 @@ |
|
118
|
118
|
/* Bump the size by small amount to prevent rendering gaps.
|
|
119
|
119
|
* We're assuming here that each line will have the same height so that each
|
|
120
|
120
|
* image has the same size. */
|
|
121
|
|
- background-size: auto calc(100% + 0.5px);
|
|
|
121
|
+ background-size: auto calc(100% + 2px);
|
|
122
|
122
|
background-repeat: no-repeat;
|
|
123
|
123
|
}
|
|
124
|
124
|
|
| ... |
... |
@@ -155,11 +155,11 @@ |
|
155
|
155
|
}
|
|
156
|
156
|
|
|
157
|
157
|
.tor-circuit-region-flag {
|
|
158
|
|
- margin-inline-end: 0.5em;
|
|
159
|
|
- height: 16px;
|
|
|
158
|
+ margin-inline-end: var(--space-small);
|
|
|
159
|
+ height: var(--icon-size);
|
|
160
|
160
|
align-self: center;
|
|
161
|
161
|
/* Don't occupy any vertical height. */
|
|
162
|
|
- margin-block: -8px;
|
|
|
162
|
+ margin-block: calc(-0.5 * var(--icon-size));
|
|
163
|
163
|
}
|
|
164
|
164
|
|
|
165
|
165
|
.tor-circuit-region-flag.no-region-flag-src {
|
| ... |
... |
@@ -169,10 +169,9 @@ |
|
169
|
169
|
.tor-circuit-addresses {
|
|
170
|
170
|
/* FIXME: Use a standard font size. Likely will be replaced with the conflux
|
|
171
|
171
|
* design. */
|
|
172
|
|
- /* stylelint-disable-next-line stylelint-plugin-mozilla/use-font-size-tokens */
|
|
173
|
172
|
font-size: 0.9em;
|
|
174
|
173
|
font-family: monospace;
|
|
175
|
|
- margin-inline-start: 0.75em;
|
|
|
174
|
+ margin-inline-start: var(--space-medium);
|
|
176
|
175
|
}
|
|
177
|
176
|
|
|
178
|
177
|
.tor-circuit-ip-address {
|
browser/components/torpreferences/content/torPreferences.css
|
1
|
|
-@import url("chrome://global/skin/tor-colors.css");
|
|
|
1
|
+@import url("chrome://global/skin/tor-common.css");
|
|
2
|
2
|
|
|
3
|
3
|
#category-connection > .category-icon {
|
|
4
|
4
|
list-style-image: url("chrome://global/content/torconnect/tor-connect.svg");
|
| ... |
... |
@@ -16,29 +16,32 @@ button.spoof-button-disabled { |
|
16
|
16
|
}
|
|
17
|
17
|
|
|
18
|
18
|
.tor-loading-icon {
|
|
19
|
|
- width: 16px;
|
|
20
|
|
- height: 16px;
|
|
|
19
|
+ width: var(--icon-size);
|
|
|
20
|
+ height: var(--icon-size);
|
|
21
|
21
|
-moz-context-properties: fill;
|
|
22
|
|
- /* Use --tor-text-color. This will have good contrast for this small icon
|
|
23
|
|
- * against the background. And it will match the surrounding text for high
|
|
24
|
|
- * contrast and forced colour themes. */
|
|
25
|
|
- fill: var(--tor-text-color);
|
|
|
22
|
+ /* Use --text-color-tor. This will have good contrast for this small icon
|
|
|
23
|
+ * against the background. */
|
|
|
24
|
+ fill: var(--text-color-tor);
|
|
26
|
25
|
content: url("chrome://global/skin/icons/loading.svg");
|
|
|
26
|
+
|
|
|
27
|
+ @media (forced-colors) or (prefers-contrast) {
|
|
|
28
|
+ fill: currentColor;
|
|
|
29
|
+ }
|
|
27
|
30
|
}
|
|
28
|
31
|
|
|
29
|
32
|
.tor-toggle {
|
|
30
|
|
- margin-block: 16px;
|
|
|
33
|
+ margin-block: var(--space-large);
|
|
31
|
34
|
width: max-content;
|
|
32
|
35
|
}
|
|
33
|
36
|
|
|
34
|
37
|
/* Status */
|
|
35
|
38
|
|
|
36
|
39
|
#network-status-internet-area {
|
|
37
|
|
- margin-block: 16px;
|
|
|
40
|
+ margin-block: var(--space-large);
|
|
38
|
41
|
}
|
|
39
|
42
|
|
|
40
|
43
|
#network-status-tor-area {
|
|
41
|
|
- margin-block: 0 32px;
|
|
|
44
|
+ margin-block: 0 var(--space-xxlarge);
|
|
42
|
45
|
}
|
|
43
|
46
|
|
|
44
|
47
|
.network-status-area {
|
| ... |
... |
@@ -52,9 +55,9 @@ button.spoof-button-disabled { |
|
52
|
55
|
}
|
|
53
|
56
|
|
|
54
|
57
|
.network-status-icon {
|
|
55
|
|
- width: 18px;
|
|
56
|
|
- height: 18px;
|
|
57
|
|
- margin-inline-end: 8px;
|
|
|
58
|
+ width: var(--icon-size);
|
|
|
59
|
+ height: var(--icon-size);
|
|
|
60
|
+ margin-inline-end: var(--space-small);
|
|
58
|
61
|
-moz-context-properties: fill, stroke;
|
|
59
|
62
|
fill: var(--icon-color);
|
|
60
|
63
|
stroke: var(--icon-color);
|
| ... |
... |
@@ -83,11 +86,11 @@ button.spoof-button-disabled { |
|
83
|
86
|
|
|
84
|
87
|
.network-status-label {
|
|
85
|
88
|
font-weight: var(--font-weight-bold);
|
|
86
|
|
- margin-inline-end: 0.75em;
|
|
|
89
|
+ margin-inline-end: var(--space-medium);
|
|
87
|
90
|
}
|
|
88
|
91
|
|
|
89
|
92
|
.network-status-result {
|
|
90
|
|
- margin-inline-end: 0.75em;
|
|
|
93
|
+ margin-inline-end: var(--space-medium);
|
|
91
|
94
|
}
|
|
92
|
95
|
|
|
93
|
96
|
#network-status-tor-area.status-connected #network-status-tor-connect-button {
|
| ... |
... |
@@ -141,7 +144,7 @@ button.spoof-button-disabled { |
|
141
|
144
|
display: flex;
|
|
142
|
145
|
min-width: max-content;
|
|
143
|
146
|
align-items: center;
|
|
144
|
|
- gap: 0.5em;
|
|
|
147
|
+ gap: var(--space-small);
|
|
145
|
148
|
font-size: var(--font-size-small);
|
|
146
|
149
|
}
|
|
147
|
150
|
|
| ... |
... |
@@ -154,10 +157,12 @@ button.spoof-button-disabled { |
|
154
|
157
|
* using it for text colors, so we only enable these rules when not using a
|
|
155
|
158
|
* high contrast theme or forced colors. */
|
|
156
|
159
|
.bridge-status-badge.bridge-status-connected {
|
|
157
|
|
- color: var(--tor-text-color);
|
|
|
160
|
+ color: var(--text-color-tor);
|
|
158
|
161
|
}
|
|
159
|
162
|
|
|
160
|
163
|
.bridge-status-badge.bridge-status-current-built-in {
|
|
|
164
|
+ /* Using the accent colour should be avoided. Will likely be replaced in
|
|
|
165
|
+ * tor-browser#44421. */
|
|
161
|
166
|
color: var(--color-accent-primary);
|
|
162
|
167
|
}
|
|
163
|
168
|
}
|
| ... |
... |
@@ -167,8 +172,8 @@ button.spoof-button-disabled { |
|
167
|
172
|
}
|
|
168
|
173
|
|
|
169
|
174
|
.bridge-status-icon {
|
|
170
|
|
- width: 16px;
|
|
171
|
|
- height: 16px;
|
|
|
175
|
+ width: var(--icon-size);
|
|
|
176
|
+ height: var(--icon-size);
|
|
172
|
177
|
background-repeat: no-repeat;
|
|
173
|
178
|
background-position: center center;
|
|
174
|
179
|
-moz-context-properties: fill;
|
| ... |
... |
@@ -198,7 +203,7 @@ button.spoof-button-disabled { |
|
198
|
203
|
#tor-bridges-none,
|
|
199
|
204
|
#tor-bridges-current {
|
|
200
|
205
|
margin-inline: 0;
|
|
201
|
|
- margin-block: 32px;
|
|
|
206
|
+ margin-block: var(--space-xxlarge);
|
|
202
|
207
|
}
|
|
203
|
208
|
|
|
204
|
209
|
#tor-bridges-none:not([hidden]) {
|
| ... |
... |
@@ -206,16 +211,16 @@ button.spoof-button-disabled { |
|
206
|
211
|
justify-items: center;
|
|
207
|
212
|
text-align: center;
|
|
208
|
213
|
padding-block: 64px;
|
|
209
|
|
- padding-inline: 32px;
|
|
210
|
|
- gap: 16px;
|
|
|
214
|
+ padding-inline: var(--space-xxlarge);
|
|
|
215
|
+ gap: var(--space-large);
|
|
211
|
216
|
border-radius: var(--border-radius-small);
|
|
212
|
217
|
color: var(--text-color-deemphasized);
|
|
213
|
218
|
border: 2px dashed var(--border-color-deemphasized);
|
|
214
|
219
|
}
|
|
215
|
220
|
|
|
216
|
221
|
#tor-bridges-none-icon {
|
|
217
|
|
- width: 20px;
|
|
218
|
|
- height: 20px;
|
|
|
222
|
+ width: var(--icon-size-medium);
|
|
|
223
|
+ height: var(--icon-size-medium);
|
|
219
|
224
|
content: url("chrome://browser/content/torpreferences/bridge.svg");
|
|
220
|
225
|
-moz-context-properties: fill;
|
|
221
|
226
|
fill: currentColor;
|
| ... |
... |
@@ -223,10 +228,10 @@ button.spoof-button-disabled { |
|
223
|
228
|
|
|
224
|
229
|
.tor-bridges-box,
|
|
225
|
230
|
.tor-bridges-details-box {
|
|
226
|
|
- padding: 16px;
|
|
|
231
|
+ padding: var(--space-large);
|
|
227
|
232
|
border-radius: var(--border-radius-small);
|
|
228
|
233
|
background: var(--background-color-box-info);
|
|
229
|
|
- border: 1px solid var(--border-color);
|
|
|
234
|
+ border: var(--border-width) solid var(--border-color);
|
|
230
|
235
|
}
|
|
231
|
236
|
|
|
232
|
237
|
@media not forced-colors {
|
| ... |
... |
@@ -240,9 +245,9 @@ button.spoof-button-disabled { |
|
240
|
245
|
min-width: max-content;
|
|
241
|
246
|
grid-template: "heading source button" min-content / max-content 1fr max-content;
|
|
242
|
247
|
align-items: center;
|
|
243
|
|
- border-block-end: 1px solid var(--border-color);
|
|
244
|
|
- padding-block-end: 16px;
|
|
245
|
|
- margin-block-end: 16px;
|
|
|
248
|
+ border-block-end: var(--border-width) solid var(--border-color);
|
|
|
249
|
+ padding-block-end: var(--space-large);
|
|
|
250
|
+ margin-block-end: var(--space-large);
|
|
246
|
251
|
white-space: nowrap;
|
|
247
|
252
|
}
|
|
248
|
253
|
|
| ... |
... |
@@ -251,8 +256,8 @@ button.spoof-button-disabled { |
|
251
|
256
|
}
|
|
252
|
257
|
|
|
253
|
258
|
.tor-bridges-source-label {
|
|
254
|
|
- margin-inline-start: 2em;
|
|
255
|
|
- margin-inline-end: 8px;
|
|
|
259
|
+ margin-inline-start: var(--space-xxlarge);
|
|
|
260
|
+ margin-inline-end: var(--space-small);
|
|
256
|
261
|
grid-area: source;
|
|
257
|
262
|
justify-self: end;
|
|
258
|
263
|
}
|
| ... |
... |
@@ -264,7 +269,7 @@ button.spoof-button-disabled { |
|
264
|
269
|
#tor-bridges-lox-label:not([hidden]) {
|
|
265
|
270
|
display: flex;
|
|
266
|
271
|
align-items: center;
|
|
267
|
|
- gap: 6px;
|
|
|
272
|
+ gap: var(--space-small);
|
|
268
|
273
|
}
|
|
269
|
274
|
|
|
270
|
275
|
#tor-bridges-lox-label > * {
|
| ... |
... |
@@ -273,20 +278,20 @@ button.spoof-button-disabled { |
|
273
|
278
|
|
|
274
|
279
|
#tor-bridges-lox-label-icon {
|
|
275
|
280
|
content: url("chrome://browser/content/torpreferences/lox-bridge-pass.svg");
|
|
276
|
|
- width: 16px;
|
|
277
|
|
- height: 16px;
|
|
|
281
|
+ width: var(--icon-size);
|
|
|
282
|
+ height: var(--icon-size);
|
|
278
|
283
|
-moz-context-properties: fill;
|
|
279
|
284
|
fill: var(--icon-color);
|
|
280
|
285
|
}
|
|
281
|
286
|
|
|
282
|
287
|
.tor-bridges-options-button {
|
|
283
|
|
- padding: 3px;
|
|
|
288
|
+ padding: var(--space-xsmall);
|
|
284
|
289
|
margin: 0;
|
|
285
|
290
|
min-height: auto;
|
|
286
|
291
|
min-width: auto;
|
|
287
|
292
|
box-sizing: content-box;
|
|
288
|
|
- width: 16px;
|
|
289
|
|
- height: 16px;
|
|
|
293
|
+ width: var(--icon-size);
|
|
|
294
|
+ height: var(--icon-size);
|
|
290
|
295
|
background-image: url("chrome://global/skin/icons/more.svg");
|
|
291
|
296
|
background-repeat: no-repeat;
|
|
292
|
297
|
background-position: center center;
|
| ... |
... |
@@ -302,8 +307,8 @@ button.spoof-button-disabled { |
|
302
|
307
|
"type status" min-content
|
|
303
|
308
|
"description description" auto
|
|
304
|
309
|
/ max-content 1fr;
|
|
305
|
|
- gap: 12px 1.5em;
|
|
306
|
|
- margin-block-end: 16px;
|
|
|
310
|
+ gap: var(--space-medium) var(--space-xlarge);
|
|
|
311
|
+ margin-block-end: var(--space-large);
|
|
307
|
312
|
}
|
|
308
|
313
|
|
|
309
|
314
|
#tor-bridges-built-in-type-name {
|
| ... |
... |
@@ -323,8 +328,8 @@ button.spoof-button-disabled { |
|
323
|
328
|
.tor-bridges-grid:not([hidden]) {
|
|
324
|
329
|
display: grid;
|
|
325
|
330
|
grid-template-columns: max-content repeat(4, max-content) 1fr;
|
|
326
|
|
- --tor-bridges-grid-column-gap: 8px;
|
|
327
|
|
- --tor-bridges-grid-column-short-gap: 4px;
|
|
|
331
|
+ --tor-bridges-grid-column-gap: var(--space-small);
|
|
|
332
|
+ --tor-bridges-grid-column-short-gap: var(--space-xsmall);
|
|
328
|
333
|
/* For #tor-bridges-grid-display we want each grid item to have the same
|
|
329
|
334
|
* height so that their focus outlines match. */
|
|
330
|
335
|
align-items: stretch;
|
| ... |
... |
@@ -358,7 +363,7 @@ button.spoof-button-disabled { |
|
358
|
363
|
grid-column: 1 / -1;
|
|
359
|
364
|
grid-template-columns: subgrid;
|
|
360
|
365
|
/* Add 16px gap between rows, plus 8px at the start and end of the grid. */
|
|
361
|
|
- padding-block: 8px;
|
|
|
366
|
+ padding-block: var(--space-small);
|
|
362
|
367
|
}
|
|
363
|
368
|
|
|
364
|
369
|
#tor-bridges-grid-display .tor-bridges-grid-cell:focus-visible {
|
| ... |
... |
@@ -391,12 +396,12 @@ button.spoof-button-disabled { |
|
391
|
396
|
.tor-bridges-emoji-icon {
|
|
392
|
397
|
display: block;
|
|
393
|
398
|
box-sizing: content-box;
|
|
394
|
|
- width: 16px;
|
|
395
|
|
- height: 16px;
|
|
|
399
|
+ width: var(--icon-size);
|
|
|
400
|
+ height: var(--icon-size);
|
|
396
|
401
|
/* color-light-gray-10, color-dark-gray-60 */
|
|
397
|
402
|
background: light-dark(#f9f9fb, #2b2a33);
|
|
398
|
403
|
border-radius: var(--border-radius-small);
|
|
399
|
|
- padding: 8px;
|
|
|
404
|
+ padding: var(--space-small);
|
|
400
|
405
|
}
|
|
401
|
406
|
|
|
402
|
407
|
.tor-bridges-grid-end-block {
|
| ... |
... |
@@ -414,7 +419,7 @@ button.spoof-button-disabled { |
|
414
|
419
|
|
|
415
|
420
|
.tor-bridges-address-cell {
|
|
416
|
421
|
/* base size */
|
|
417
|
|
- width: 10em;
|
|
|
422
|
+ width: 150px;
|
|
418
|
423
|
flex: 1 0 auto;
|
|
419
|
424
|
}
|
|
420
|
425
|
|
| ... |
... |
@@ -448,7 +453,7 @@ button.spoof-button-disabled { |
|
448
|
453
|
}
|
|
449
|
454
|
|
|
450
|
455
|
.tor-bridges-details-box {
|
|
451
|
|
- margin-block-start: 24px;
|
|
|
456
|
+ margin-block-start: var(--space-xlarge);
|
|
452
|
457
|
}
|
|
453
|
458
|
|
|
454
|
459
|
#tor-bridges-share:not([hidden]) {
|
| ... |
... |
@@ -460,13 +465,13 @@ button.spoof-button-disabled { |
|
460
|
465
|
"description . ." 1fr
|
|
461
|
466
|
"description copy qr" min-content
|
|
462
|
467
|
/ 1fr max-content max-content;
|
|
463
|
|
- gap: 0 8px;
|
|
|
468
|
+ gap: 0 var(--space-small);
|
|
464
|
469
|
align-items: center;
|
|
465
|
470
|
}
|
|
466
|
471
|
|
|
467
|
472
|
.tor-bridges-share-heading {
|
|
468
|
473
|
grid-area: heading;
|
|
469
|
|
- margin-block-end: 4px;
|
|
|
474
|
+ margin-block-end: var(--space-xsmall);
|
|
470
|
475
|
}
|
|
471
|
476
|
|
|
472
|
477
|
#tor-bridges-share-description {
|
| ... |
... |
@@ -483,13 +488,13 @@ button.spoof-button-disabled { |
|
483
|
488
|
|
|
484
|
489
|
#tor-bridges-qr-addresses-button {
|
|
485
|
490
|
grid-area: qr;
|
|
486
|
|
- padding: 5px;
|
|
|
491
|
+ padding: var(--space-xsmall);
|
|
487
|
492
|
margin: 0;
|
|
488
|
493
|
min-height: auto;
|
|
489
|
494
|
min-width: auto;
|
|
490
|
495
|
box-sizing: content-box;
|
|
491
|
|
- width: 24px;
|
|
492
|
|
- height: 24px;
|
|
|
496
|
+ width: var(--icon-size-large);
|
|
|
497
|
+ height: var(--icon-size-large);
|
|
493
|
498
|
background-image: url("chrome://browser/content/torpreferences/bridge-qr.svg");
|
|
494
|
499
|
background-repeat: no-repeat;
|
|
495
|
500
|
background-position: center center;
|
| ... |
... |
@@ -500,7 +505,7 @@ button.spoof-button-disabled { |
|
500
|
505
|
}
|
|
501
|
506
|
|
|
502
|
507
|
#tor-bridges-lox-status {
|
|
503
|
|
- margin-block-start: 8px;
|
|
|
508
|
+ margin-block-start: var(--space-small);
|
|
504
|
509
|
}
|
|
505
|
510
|
|
|
506
|
511
|
.tor-bridges-lox-box:not([hidden]) {
|
| ... |
... |
@@ -511,7 +516,7 @@ button.spoof-button-disabled { |
|
511
|
516
|
". invites button" min-content
|
|
512
|
517
|
/ min-content 1fr max-content;
|
|
513
|
518
|
align-items: start;
|
|
514
|
|
- gap: 8px;
|
|
|
519
|
+ gap: var(--space-small);
|
|
515
|
520
|
}
|
|
516
|
521
|
|
|
517
|
522
|
.tor-bridges-lox-image-outer {
|
| ... |
... |
@@ -535,9 +540,8 @@ button.spoof-button-disabled { |
|
535
|
540
|
|
|
536
|
541
|
.tor-bridges-lox-image-inner {
|
|
537
|
542
|
grid-area: image;
|
|
538
|
|
- /* Extra 4px space for gaussian blur. */
|
|
539
|
|
- width: 16px;
|
|
540
|
|
- height: 16px;
|
|
|
543
|
+ width: var(--icon-size);
|
|
|
544
|
+ height: var(--icon-size);
|
|
541
|
545
|
align-self: center;
|
|
542
|
546
|
justify-self: center;
|
|
543
|
547
|
-moz-context-properties: fill;
|
| ... |
... |
@@ -570,7 +574,7 @@ button.spoof-button-disabled { |
|
570
|
574
|
/* Align the icons, as if list markers. */
|
|
571
|
575
|
grid-template-columns: max-content 1fr;
|
|
572
|
576
|
align-items: start;
|
|
573
|
|
- gap: 8px 0;
|
|
|
577
|
+ gap: var(--space-small) 0;
|
|
574
|
578
|
}
|
|
575
|
579
|
|
|
576
|
580
|
.tor-bridges-lox-list-item:not([hidden]) {
|
| ... |
... |
@@ -580,11 +584,11 @@ button.spoof-button-disabled { |
|
580
|
584
|
.tor-bridges-lox-list-item:not([hidden])::before {
|
|
581
|
585
|
/* We use ::before rather than list-style-image to have more control. */
|
|
582
|
586
|
box-sizing: content-box;
|
|
583
|
|
- width: 18px;
|
|
584
|
|
- height: 18px;
|
|
585
|
|
- margin-inline: 4px 6px;
|
|
|
587
|
+ width: var(--icon-size);
|
|
|
588
|
+ height: var(--icon-size);
|
|
|
589
|
+ margin-inline: var(--space-xsmall) var(--space-small);
|
|
586
|
590
|
/* We want the icons to be center-aligned relative to the *first* line. */
|
|
587
|
|
- margin-block-start: calc((1lh - 18px) / 2);
|
|
|
591
|
+ margin-block-start: calc((1lh - var(--icon-size)) / 2);
|
|
588
|
592
|
/* We use display: grid rather than display: block. Otherwise the content will
|
|
589
|
593
|
* be offset vertically by the line-height. */
|
|
590
|
594
|
display: grid;
|
| ... |
... |
@@ -622,23 +626,22 @@ button.spoof-button-disabled { |
|
622
|
626
|
}
|
|
623
|
627
|
|
|
624
|
628
|
.tor-bridges-provider-heading {
|
|
625
|
|
- margin-block: 48px 8px;
|
|
|
629
|
+ margin-block: var(--space-xxlarge) var(--space-small);
|
|
626
|
630
|
}
|
|
627
|
631
|
|
|
628
|
632
|
#tor-bridges-provider-area {
|
|
629
|
633
|
display: grid;
|
|
630
|
634
|
grid-template-columns: 1fr 1fr;
|
|
631
|
|
- gap: 16px;
|
|
|
635
|
+ gap: var(--space-large);
|
|
632
|
636
|
align-items: start;
|
|
633
|
|
- margin-block-start: 24px;
|
|
|
637
|
+ margin-block-start: var(--space-xlarge);
|
|
634
|
638
|
}
|
|
635
|
639
|
|
|
636
|
640
|
#tor-bridges-provider-list {
|
|
637
|
641
|
display: grid;
|
|
638
|
642
|
grid-template-columns: max-content max-content;
|
|
639
|
|
- /* 24px gap between items. */
|
|
640
|
|
- gap: 24px 12px;
|
|
641
|
|
- margin-block: 16px;
|
|
|
643
|
+ gap: var(--space-xlarge) var(--space-medium);
|
|
|
644
|
+ margin-block: var(--space-large);
|
|
642
|
645
|
padding: 0;
|
|
643
|
646
|
}
|
|
644
|
647
|
|
| ... |
... |
@@ -648,13 +651,12 @@ button.spoof-button-disabled { |
|
648
|
651
|
grid-template-columns: subgrid;
|
|
649
|
652
|
align-items: center;
|
|
650
|
653
|
justify-items: start;
|
|
651
|
|
- /* 8px gap between the name and instruction. */
|
|
652
|
|
- gap: 8px 12px;
|
|
|
654
|
+ gap: var(--space-small) var(--space-medium);
|
|
653
|
655
|
}
|
|
654
|
656
|
|
|
655
|
657
|
.tor-bridges-provider-icon {
|
|
656
|
|
- width: 16px;
|
|
657
|
|
- height: 16px;
|
|
|
658
|
+ width: var(--icon-size);
|
|
|
659
|
+ height: var(--icon-size);
|
|
658
|
660
|
-moz-context-properties: fill;
|
|
659
|
661
|
fill: var(--icon-color);
|
|
660
|
662
|
}
|
| ... |
... |
@@ -695,7 +697,7 @@ button.spoof-button-disabled { |
|
695
|
697
|
}
|
|
696
|
698
|
|
|
697
|
699
|
#tor-bridges-request-description {
|
|
698
|
|
- margin-block: 12px 16px;
|
|
|
700
|
+ margin-block: var(--space-medium) var(--space-large);
|
|
699
|
701
|
}
|
|
700
|
702
|
|
|
701
|
703
|
#tor-bridges-open-request-dialog-button {
|
| ... |
... |
@@ -714,7 +716,7 @@ button.spoof-button-disabled { |
|
714
|
716
|
/* Request bridges */
|
|
715
|
717
|
|
|
716
|
718
|
image#torPreferences-requestBridge-captchaImage {
|
|
717
|
|
- margin: 16px 0 8px 0;
|
|
|
719
|
+ margin: var(--space-large) 0 var(--space-small) 0;
|
|
718
|
720
|
min-height: 140px;
|
|
719
|
721
|
}
|
|
720
|
722
|
|
| ... |
... |
@@ -732,15 +734,15 @@ button#torPreferences-requestBridge-refreshCaptchaButton { |
|
732
|
734
|
}
|
|
733
|
735
|
|
|
734
|
736
|
dialog#torPreferences-requestBridge-dialog > hbox {
|
|
735
|
|
- margin-bottom: 1em;
|
|
|
737
|
+ margin-bottom: var(--space-large);
|
|
736
|
738
|
}
|
|
737
|
739
|
|
|
738
|
740
|
/*
|
|
739
|
741
|
Various elements that really should be lining up don't because they have inconsistent margins
|
|
740
|
742
|
*/
|
|
741
|
743
|
.torMarginFix {
|
|
742
|
|
- margin-left: 4px;
|
|
743
|
|
- margin-right: 4px;
|
|
|
744
|
+ margin-left: var(--space-xsmall);
|
|
|
745
|
+ margin-right: var(--space-xsmall);
|
|
744
|
746
|
}
|
|
745
|
747
|
|
|
746
|
748
|
/* Show bridge QR dialog */
|
| ... |
... |
@@ -756,8 +758,8 @@ dialog#torPreferences-requestBridge-dialog > hbox { |
|
756
|
758
|
background: var(--qr-zero);
|
|
757
|
759
|
/* Padding is needed in case the dark theme is used so the bits don't blend
|
|
758
|
760
|
with whatever the default background color is. */
|
|
759
|
|
- padding: 10px;
|
|
760
|
|
- margin-block: 4px 8px;
|
|
|
761
|
+ padding: var(--space-medium);
|
|
|
762
|
+ margin-block: var(--space-xsmall) var(--space-small);
|
|
761
|
763
|
border-radius: var(--border-radius-small);
|
|
762
|
764
|
display: grid;
|
|
763
|
765
|
align-items: center;
|
| ... |
... |
@@ -777,7 +779,7 @@ dialog#torPreferences-requestBridge-dialog > hbox { |
|
777
|
779
|
/* Share the same grid area as #bridgeQr-target. */
|
|
778
|
780
|
grid-area: qr;
|
|
779
|
781
|
content: url("chrome://browser/content/torpreferences/bridge.svg");
|
|
780
|
|
- padding: 10px;
|
|
|
782
|
+ padding: var(--space-small);
|
|
781
|
783
|
border-radius: var(--border-radius-medium);
|
|
782
|
784
|
box-sizing: content-box;
|
|
783
|
785
|
width: 52px;
|
| ... |
... |
@@ -796,8 +798,8 @@ dialog#torPreferences-requestBridge-dialog > hbox { |
|
796
|
798
|
". remaining button" min-content
|
|
797
|
799
|
"message message message" auto
|
|
798
|
800
|
/ 1fr max-content max-content;
|
|
799
|
|
- gap: 8px;
|
|
800
|
|
- margin-block: 16px 8px;
|
|
|
801
|
+ gap: var(--space-small);
|
|
|
802
|
+ margin-block: var(--space-large) var(--space-small);
|
|
801
|
803
|
align-items: center;
|
|
802
|
804
|
}
|
|
803
|
805
|
|
| ... |
... |
@@ -832,7 +834,7 @@ dialog#torPreferences-requestBridge-dialog > hbox { |
|
832
|
834
|
#lox-invite-dialog-connecting {
|
|
833
|
835
|
color: var(--text-color-deemphasized);
|
|
834
|
836
|
/* Gap with #user-provide-bridge-loading-icon. */
|
|
835
|
|
- margin-inline-start: 0.5em;
|
|
|
837
|
+ margin-inline-start: var(--space-small);
|
|
836
|
838
|
}
|
|
837
|
839
|
|
|
838
|
840
|
#lox-invite-dialog-generate-area:not(.show-connecting) #lox-invite-dialog-connecting {
|
| ... |
... |
@@ -855,8 +857,8 @@ dialog#torPreferences-requestBridge-dialog > hbox { |
|
855
|
857
|
#lox-invite-dialog-list {
|
|
856
|
858
|
flex: 1 1 auto;
|
|
857
|
859
|
/* basis height */
|
|
858
|
|
- height: 10em;
|
|
859
|
|
- margin-block: 8px;
|
|
|
860
|
+ height: 160px;
|
|
|
861
|
+ margin-block: var(--space-small);
|
|
860
|
862
|
}
|
|
861
|
863
|
|
|
862
|
864
|
.lox-invite-dialog-list-item {
|
| ... |
... |
@@ -864,21 +866,13 @@ dialog#torPreferences-requestBridge-dialog > hbox { |
|
864
|
866
|
overflow-x: hidden;
|
|
865
|
867
|
/* FIXME: ellipsis does not show. */
|
|
866
|
868
|
text-overflow: ellipsis;
|
|
867
|
|
- padding-block: 6px;
|
|
868
|
|
- padding-inline: 8px;
|
|
|
869
|
+ padding-block: var(--space-small);
|
|
|
870
|
+ padding-inline: var(--space-small);
|
|
869
|
871
|
}
|
|
870
|
872
|
|
|
871
|
873
|
/* Builtin bridge dialog */
|
|
872
|
|
-#torPreferences-builtinBridge-header {
|
|
873
|
|
- margin: 8px 0 10px 0;
|
|
874
|
|
-}
|
|
875
|
|
-
|
|
876
|
|
-#torPreferences-builtinBridge-description {
|
|
877
|
|
- margin-bottom: 18px;
|
|
878
|
|
-}
|
|
879
|
|
-
|
|
880
|
874
|
#torPreferences-builtinBridge-typeSelection {
|
|
881
|
|
- margin-bottom: 16px;
|
|
|
875
|
+ margin-block-end: var(--space-large);
|
|
882
|
876
|
}
|
|
883
|
877
|
|
|
884
|
878
|
#torPreferences-builtinBridge-typeSelection radio label {
|
| ... |
... |
@@ -927,7 +921,7 @@ groupbox#torPreferences-bridges-group textarea { |
|
927
|
921
|
}
|
|
928
|
922
|
|
|
929
|
923
|
#user-provide-bridge-textarea-label {
|
|
930
|
|
- margin-block: 16px 6px;
|
|
|
924
|
+ margin-block: var(--space-large) var(--space-small);
|
|
931
|
925
|
flex: 0 0 auto;
|
|
932
|
926
|
align-self: start;
|
|
933
|
927
|
}
|
| ... |
... |
@@ -942,7 +936,7 @@ groupbox#torPreferences-bridges-group textarea { |
|
942
|
936
|
|
|
943
|
937
|
#user-provide-bridge-message-area {
|
|
944
|
938
|
flex: 0 0 auto;
|
|
945
|
|
- margin-block: 8px 12px;
|
|
|
939
|
+ margin-block: var(--space-small) var(--space-medium);
|
|
946
|
940
|
align-self: end;
|
|
947
|
941
|
display: flex;
|
|
948
|
942
|
align-items: center;
|
| ... |
... |
@@ -969,7 +963,7 @@ groupbox#torPreferences-bridges-group textarea { |
|
969
|
963
|
#user-provide-bridge-connecting {
|
|
970
|
964
|
color: var(--text-color-deemphasized);
|
|
971
|
965
|
/* Gap with #user-provide-bridge-loading-icon. */
|
|
972
|
|
- margin-inline-start: 0.5em;
|
|
|
966
|
+ margin-inline-start: var(--space-small);
|
|
973
|
967
|
}
|
|
974
|
968
|
|
|
975
|
969
|
#user-provide-bridge-dialog:not(.show-connecting) #user-provide-bridge-connecting {
|
| ... |
... |
@@ -999,7 +993,7 @@ groupbox#torPreferences-bridges-group textarea { |
|
999
|
993
|
#user-provide-bridge-grid-display {
|
|
1000
|
994
|
flex: 0 1 auto;
|
|
1001
|
995
|
overflow: auto;
|
|
1002
|
|
- margin-block: 8px;
|
|
|
996
|
+ margin-block: var(--space-small);
|
|
1003
|
997
|
}
|
|
1004
|
998
|
|
|
1005
|
999
|
#user-provide-bridge-grid-display:focus-visible {
|
| ... |
... |
@@ -1014,7 +1008,7 @@ groupbox#torPreferences-bridges-group textarea { |
|
1014
|
1008
|
}
|
|
1015
|
1009
|
|
|
1016
|
1010
|
#torPreferences-connection-header {
|
|
1017
|
|
- margin: 4px 0 14px 0;
|
|
|
1011
|
+ margin: var(--space-xsmall) 0 var(--space-large) 0;
|
|
1018
|
1012
|
}
|
|
1019
|
1013
|
|
|
1020
|
1014
|
#torPreferences-connection-grid {
|
| ... |
... |
@@ -1041,13 +1035,13 @@ groupbox#torPreferences-bridges-group textarea { |
|
1041
|
1035
|
#tor-log-table {
|
|
1042
|
1036
|
flex: 1 0 auto;
|
|
1043
|
1037
|
overflow: auto;
|
|
1044
|
|
- min-height: 20em;
|
|
1045
|
|
- height: 20em;
|
|
|
1038
|
+ min-height: 300px;
|
|
|
1039
|
+ height: 300px;
|
|
1046
|
1040
|
display: flex;
|
|
1047
|
1041
|
flex-direction: column;
|
|
1048
|
1042
|
padding: var(--space-small);
|
|
1049
|
|
- margin-block-end: 4px;
|
|
1050
|
|
- border: 1px solid var(--border-color);
|
|
|
1043
|
+ margin-block-end: var(--space-xsmall);
|
|
|
1044
|
+ border: var(--border-width) solid var(--border-color);
|
|
1051
|
1045
|
border-radius: var(--border-radius-small);
|
|
1052
|
1046
|
font-size: var(--font-size-small);
|
|
1053
|
1047
|
}
|
browser/themes/shared/browser-shared.css
| ... |
... |
@@ -29,7 +29,7 @@ |
|
29
|
29
|
@import url("chrome://browser/skin/customizableui/customizeMode.css");
|
|
30
|
30
|
@import url("chrome://browser/skin/UITour.css");
|
|
31
|
31
|
@import url("chrome://browser/skin/formautofill-notification.css");
|
|
32
|
|
-@import url("chrome://global/skin/tor-colors.css");
|
|
|
32
|
+@import url("chrome://global/skin/tor-common.css");
|
|
33
|
33
|
@import url("chrome://browser/skin/tor-urlbar-button.css");
|
|
34
|
34
|
@import url("chrome://browser/skin/onionlocation.css");
|
|
35
|
35
|
|
browser/themes/shared/downloads/contentAreaDownloadsView.css
| ... |
... |
@@ -26,5 +26,5 @@ |
|
26
|
26
|
}
|
|
27
|
27
|
|
|
28
|
28
|
#aboutDownloadsTorWarning {
|
|
29
|
|
- margin-block-end: 8px;
|
|
|
29
|
+ margin-block-end: var(--space-small);
|
|
30
|
30
|
} |
browser/themes/shared/tabbrowser/content-area.css
| ... |
... |
@@ -390,16 +390,16 @@ split-view-footer { |
|
390
|
390
|
|
|
391
|
391
|
#statuspanel:is([type="letterboxingStatus"], [previoustype="letterboxingStatus"][inactive]) > #statuspanel-label {
|
|
392
|
392
|
background-image: url("chrome://browser/skin/window.svg");
|
|
393
|
|
- background-size: 1em;
|
|
|
393
|
+ background-size: var(--icon-size);
|
|
394
|
394
|
background-repeat: no-repeat;
|
|
395
|
395
|
background-position-y: center;
|
|
396
|
|
- background-position-x: left 0.5em;
|
|
|
396
|
+ background-position-x: left var(--space-small);
|
|
397
|
397
|
|
|
398
|
398
|
&:-moz-locale-dir(rtl) {
|
|
399
|
|
- background-position-x: right 0.5em;
|
|
|
399
|
+ background-position-x: right var(--space-small);
|
|
400
|
400
|
}
|
|
401
|
401
|
|
|
402
|
|
- padding-inline-start: 2em;
|
|
|
402
|
+ padding-inline-start: calc(var(--space-small) + var(--icon-size) + var(--space-small));
|
|
403
|
403
|
-moz-context-properties: fill;
|
|
404
|
404
|
fill: var(--color-accent-primary);
|
|
405
|
405
|
@media (forced-colors) {
|
browser/themes/shared/tor-urlbar-button.css
|
1
|
1
|
.tor-urlbar-button:not([hidden]) {
|
|
2
|
2
|
display: flex;
|
|
3
|
3
|
align-items: center;
|
|
4
|
|
- gap: 0.5em;
|
|
5
|
|
- /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-radius-tokens */
|
|
|
4
|
+ gap: var(--space-small);
|
|
6
|
5
|
border-radius: var(--urlbar-inner-border-radius);
|
|
7
|
|
- --tor-urlbar-button-inline-padding: 8px;
|
|
|
6
|
+ --tor-urlbar-button-inline-padding: var(--space-small);
|
|
8
|
7
|
padding-inline: var(--tor-urlbar-button-inline-padding);
|
|
9
|
8
|
margin: 0;
|
|
10
|
9
|
}
|
python/mozlint/mozlint/cli.py
| ... |
... |
@@ -38,7 +38,6 @@ INACTIVE_LINTERS = [ |
|
38
|
38
|
"updatebot",
|
|
39
|
39
|
"typescript",
|
|
40
|
40
|
"wpt",
|
|
41
|
|
- "stylelint",
|
|
42
|
41
|
"glean-parser",
|
|
43
|
42
|
]
|
|
44
|
43
|
|
toolkit/components/resistfingerprinting/content/letterboxing.css
| ... |
... |
@@ -17,9 +17,6 @@ |
|
17
|
17
|
}
|
|
18
|
18
|
}
|
|
19
|
19
|
|
|
20
|
|
-/* stylelint-disable stylelint-plugin-mozilla/use-border-color-tokens */
|
|
21
|
|
-/* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */
|
|
22
|
|
-
|
|
23
|
20
|
#tabbrowser-tabbox.letterboxing {
|
|
24
|
21
|
--letterboxing-bgcolor: var(--background-color-canvas);
|
|
25
|
22
|
/* Match the border radius used for the sidebar. */
|
| ... |
... |
@@ -28,7 +25,7 @@ |
|
28
|
25
|
--letterboxing-vertical-alignment: start;
|
|
29
|
26
|
--letterboxing-shadow: none;
|
|
30
|
27
|
--letterboxing-outline-color: var(--border-color);
|
|
31
|
|
- --letterboxing-outline-width: 1px;
|
|
|
28
|
+ --letterboxing-outline-width: var(--border-width);
|
|
32
|
29
|
|
|
33
|
30
|
@media not ((prefers-contrast) or (forced-colors)) {
|
|
34
|
31
|
/* Match the #sidebar outline width. */
|
toolkit/components/torconnect/content/aboutTorConnect.css
|
1
|
1
|
/* Copyright (c) 2021, The Tor Project, Inc. */
|
|
2
|
2
|
|
|
3
|
3
|
@import url("chrome://global/skin/error-pages.css");
|
|
4
|
|
-@import url("chrome://global/skin/tor-colors.css");
|
|
5
|
4
|
@import url("chrome://global/skin/onion-pattern.css");
|
|
6
|
5
|
|
|
7
|
6
|
body:not(.loaded) {
|
| ... |
... |
@@ -12,7 +11,7 @@ body:not(.loaded) { |
|
12
|
11
|
#breadcrumbs {
|
|
13
|
12
|
display: flex;
|
|
14
|
13
|
align-items: center;
|
|
15
|
|
- margin: 0 0 24px 0;
|
|
|
14
|
+ margin: 0 0 var(--space-xlarge) 0;
|
|
16
|
15
|
}
|
|
17
|
16
|
|
|
18
|
17
|
#breadcrumbs.hidden {
|
| ... |
... |
@@ -23,8 +22,8 @@ body:not(.loaded) { |
|
23
|
22
|
.breadcrumb-separator {
|
|
24
|
23
|
display: flex;
|
|
25
|
24
|
margin: 0;
|
|
26
|
|
- margin-inline-start: 20px;
|
|
27
|
|
- padding: 8px;
|
|
|
25
|
+ margin-inline-start: var(--space-large);
|
|
|
26
|
+ padding: var(--space-small);
|
|
28
|
27
|
}
|
|
29
|
28
|
|
|
30
|
29
|
.breadcrumb-item {
|
| ... |
... |
@@ -45,7 +44,7 @@ body:not(.loaded) { |
|
45
|
44
|
}
|
|
46
|
45
|
|
|
47
|
46
|
.breadcrumb-separator {
|
|
48
|
|
- width: 15px;
|
|
|
47
|
+ width: var(--icon-size);
|
|
49
|
48
|
list-style-image: url("chrome://global/content/torconnect/arrow-right.svg");
|
|
50
|
49
|
}
|
|
51
|
50
|
|
| ... |
... |
@@ -55,7 +54,7 @@ body:not(.loaded) { |
|
55
|
54
|
|
|
56
|
55
|
.breadcrumb-icon {
|
|
57
|
56
|
display: inline list-item;
|
|
58
|
|
- height: 16px;
|
|
|
57
|
+ height: var(--icon-size);
|
|
59
|
58
|
list-style-position: inside;
|
|
60
|
59
|
-moz-context-properties: fill, stroke;
|
|
61
|
60
|
fill: currentColor;
|
| ... |
... |
@@ -110,7 +109,7 @@ body:not(.loaded) { |
|
110
|
109
|
|
|
111
|
110
|
#locationDropdownLabel {
|
|
112
|
111
|
margin-block: auto;
|
|
113
|
|
- margin-inline: 4px;
|
|
|
112
|
+ margin-inline: var(--space-xsmall);
|
|
114
|
113
|
}
|
|
115
|
114
|
|
|
116
|
115
|
#locationDropdownLabel.error {
|
| ... |
... |
@@ -120,16 +119,16 @@ body:not(.loaded) { |
|
120
|
119
|
/* this follows similar css in error-pages.css for buttons */
|
|
121
|
120
|
@media only screen and (min-width: 480px) {
|
|
122
|
121
|
form#locationDropdown {
|
|
123
|
|
- margin-inline: 4px;
|
|
|
122
|
+ margin-inline: var(--space-xsmall);
|
|
124
|
123
|
/* subtracting out the margin is needeed because by
|
|
125
|
124
|
default forms have different margins than buttons */
|
|
126
|
|
- max-width: calc(100% - 8px);
|
|
|
125
|
+ max-width: calc(100% - 2 * var(--space-xsmall));
|
|
127
|
126
|
}
|
|
128
|
127
|
}
|
|
129
|
128
|
|
|
130
|
129
|
@media only screen and (max-width: 480px) {
|
|
131
|
130
|
#tryAgainButton {
|
|
132
|
|
- margin-top: 4px;
|
|
|
131
|
+ margin-top: var(--space-xsmall);
|
|
133
|
132
|
}
|
|
134
|
133
|
}
|
|
135
|
134
|
|
| ... |
... |
@@ -182,7 +181,6 @@ form#locationDropdown select { |
|
182
|
181
|
background-image: linear-gradient(var(--progressbar-shadow-start), var(--background-color-canvas) 100%), var(--progressbar-gradient);
|
|
183
|
182
|
animation: var(--progress-animation);
|
|
184
|
183
|
filter: blur(5px);
|
|
185
|
|
- /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-radius-tokens */
|
|
186
|
184
|
border-end-end-radius: 33px;
|
|
187
|
185
|
}
|
|
188
|
186
|
|
| ... |
... |
@@ -190,10 +188,8 @@ form#locationDropdown select { |
|
190
|
188
|
z-index: 2;
|
|
191
|
189
|
width: var(--progress-percent);
|
|
192
|
190
|
height: var(--progress-bar-height);
|
|
193
|
|
- /* stylelint-disable stylelint-plugin-mozilla/use-border-radius-tokens */
|
|
194
|
191
|
border-start-end-radius: calc(var(--progress-bar-height) / 2);
|
|
195
|
192
|
border-end-end-radius: calc(var(--progress-bar-height) / 2);
|
|
196
|
|
- /* stylelint-enable stylelint-plugin-mozilla/use-border-radius-tokens */
|
|
197
|
193
|
background-image: var(--progressbar-gradient);
|
|
198
|
194
|
animation: var(--progress-animation);
|
|
199
|
195
|
}
|
| ... |
... |
@@ -239,13 +235,13 @@ form#locationDropdown select { |
|
239
|
235
|
|
|
240
|
236
|
/* mirrors p element spacing */
|
|
241
|
237
|
#viewLogButton {
|
|
242
|
|
- margin: 1em 0;
|
|
|
238
|
+ margin: var(--space-large) 0;
|
|
243
|
239
|
}
|
|
244
|
240
|
|
|
245
|
241
|
body.aboutTorConnect {
|
|
246
|
242
|
justify-content: space-between;
|
|
247
|
|
- /* Always reserve 150px for the background, plus 15px padding with content. */
|
|
248
|
|
- padding-block-end: calc(var(--onion-pattern-height) + 15px);
|
|
|
243
|
+ /* Always reserve 150px for the background, plus padding with content. */
|
|
|
244
|
+ padding-block-end: calc(var(--onion-pattern-height) + var(--space-large));
|
|
249
|
245
|
}
|
|
250
|
246
|
|
|
251
|
247
|
body.aboutTorConnect .title {
|
toolkit/components/torconnect/content/aboutTorConnect.html
| ... |
... |
@@ -6,6 +6,7 @@ |
|
6
|
6
|
http-equiv="Content-Security-Policy"
|
|
7
|
7
|
content="default-src chrome:; object-src 'none'"
|
|
8
|
8
|
/>
|
|
|
9
|
+ <link rel="stylesheet" href="">"chrome://global/skin/tor-common.css" />
|
|
9
|
10
|
<link
|
|
10
|
11
|
rel="stylesheet"
|
|
11
|
12
|
href="">"chrome://global/content/torconnect/aboutTorConnect.css"
|
toolkit/components/torconnect/content/torConnectTitlebarStatus.css
|
1
|
1
|
.tor-connect-titlebar-status:not([hidden]) {
|
|
2
|
2
|
display: flex;
|
|
3
|
3
|
align-items: center;
|
|
4
|
|
- /* Want same as .private-browsing-indicator-with-label */
|
|
5
|
|
- margin-inline: 7px;
|
|
|
4
|
+ margin-inline: var(--space-small);
|
|
6
|
5
|
|
|
7
|
6
|
#navigator-toolbox[tabs-hidden] #TabsToolbar > & {
|
|
8
|
7
|
/* Hide in the tabs bar when the tabs bar is hidden. E.g. when using
|
| ... |
... |
@@ -18,7 +17,7 @@ |
|
18
|
17
|
}
|
|
19
|
18
|
|
|
20
|
19
|
.tor-connect-titlebar-status-label {
|
|
21
|
|
- margin-inline: 6px;
|
|
|
20
|
+ margin-inline: var(--space-small);
|
|
22
|
21
|
white-space: nowrap;
|
|
23
|
22
|
}
|
|
24
|
23
|
|
| ... |
... |
@@ -26,8 +25,8 @@ |
|
26
|
25
|
-moz-context-properties: fill, stroke;
|
|
27
|
26
|
fill: var(--icon-color);
|
|
28
|
27
|
stroke: var(--icon-color);
|
|
29
|
|
- width: 16px;
|
|
30
|
|
- height: 16px;
|
|
|
28
|
+ width: var(--icon-size);
|
|
|
29
|
+ height: var(--icon-size);
|
|
31
|
30
|
object-fit: none;
|
|
32
|
31
|
--num-animation-steps: 8;
|
|
33
|
32
|
/* First frame has no offset. */
|
| ... |
... |
@@ -52,12 +51,12 @@ |
|
52
|
51
|
@media not ((prefers-contrast) or (forced-colors)) {
|
|
53
|
52
|
/* Make the connected text and icon purple. */
|
|
54
|
53
|
.tor-connect-titlebar-status.tor-connect-status-connected {
|
|
55
|
|
- color: var(--tor-text-color);
|
|
|
54
|
+ color: var(--text-color-tor);
|
|
56
|
55
|
}
|
|
57
|
56
|
|
|
58
|
57
|
.tor-connect-titlebar-status.tor-connect-status-connected img {
|
|
59
|
|
- fill: var(--tor-text-color);
|
|
60
|
|
- stroke: var(--tor-text-color);
|
|
|
58
|
+ fill: var(--text-color-tor);
|
|
|
59
|
+ stroke: var(--text-color-tor);
|
|
61
|
60
|
}
|
|
62
|
61
|
}
|
|
63
|
62
|
|
toolkit/themes/shared/design-system/config/tokens-config.js
| ... |
... |
@@ -72,6 +72,28 @@ let customFileHeader = ({ surface, platform }) => { |
|
72
|
72
|
].join("\n");
|
|
73
|
73
|
|
|
74
|
74
|
let commentString = [
|
|
|
75
|
+ // Add an additional note for Tor Browser developers! See tor-browser#44406.
|
|
|
76
|
+ "/* Tor Browser instructions",
|
|
|
77
|
+ " * ========================",
|
|
|
78
|
+ " *",
|
|
|
79
|
+ " * DO NOT EDIT this file directly!",
|
|
|
80
|
+ " *",
|
|
|
81
|
+ " * DO NOT MANUALLY RESOLVE MERGE CONFLICTS for this file!",
|
|
|
82
|
+ " *",
|
|
|
83
|
+ " * This is a file generated by `./mach buildtokens`.",
|
|
|
84
|
+ " *",
|
|
|
85
|
+ " * When resolving conflicts, first resolve other conflicts outside the",
|
|
|
86
|
+ " * 'dist' directory, if there are any:",
|
|
|
87
|
+ " * git mergetool ':(exclude)toolkit/themes/shared/design-system/dist/'",
|
|
|
88
|
+ " *",
|
|
|
89
|
+ " * Then regenerate these 'dist' files:",
|
|
|
90
|
+ " *",
|
|
|
91
|
+ " * ./mach buildtokens",
|
|
|
92
|
+ " *",
|
|
|
93
|
+ " * Then add the generated files as resolved:",
|
|
|
94
|
+ " *",
|
|
|
95
|
+ " * git add toolkit/themes/shared/design-system/dist/",
|
|
|
96
|
+ " */",
|
|
75
|
97
|
"/* DO NOT EDIT this file directly, instead modify design-tokens.json",
|
|
76
|
98
|
" * and run `npm run build` to see your changes. */",
|
|
77
|
99
|
].join("\n");
|
toolkit/themes/shared/design-system/dist/tokens-brand.css
| ... |
... |
@@ -2,6 +2,27 @@ |
|
2
|
2
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
3
|
3
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
4
|
4
|
|
|
|
5
|
+/* Tor Browser instructions
|
|
|
6
|
+ * ========================
|
|
|
7
|
+ *
|
|
|
8
|
+ * DO NOT EDIT this file directly!
|
|
|
9
|
+ *
|
|
|
10
|
+ * DO NOT MANUALLY RESOLVE MERGE CONFLICTS for this file!
|
|
|
11
|
+ *
|
|
|
12
|
+ * This is a file generated by `./mach buildtokens`.
|
|
|
13
|
+ *
|
|
|
14
|
+ * When resolving conflicts, first resolve other conflicts outside the
|
|
|
15
|
+ * 'dist' directory, if there are any:
|
|
|
16
|
+ * git mergetool ':(exclude)toolkit/themes/shared/design-system/dist/'
|
|
|
17
|
+ *
|
|
|
18
|
+ * Then regenerate these 'dist' files:
|
|
|
19
|
+ *
|
|
|
20
|
+ * ./mach buildtokens
|
|
|
21
|
+ *
|
|
|
22
|
+ * Then add the generated files as resolved:
|
|
|
23
|
+ *
|
|
|
24
|
+ * git add toolkit/themes/shared/design-system/dist/
|
|
|
25
|
+ */
|
|
5
|
26
|
/* DO NOT EDIT this file directly, instead modify design-tokens.json
|
|
6
|
27
|
* and run `npm run build` to see your changes. */
|
|
7
|
28
|
|
toolkit/themes/shared/design-system/dist/tokens-figma-colors.json
| ... |
... |
@@ -135,5 +135,11 @@ |
|
135
|
135
|
"color/black/alpha/60": "oklch(0 0 0 / 60%)",
|
|
136
|
136
|
"color/black/alpha/70": "oklch(0 0 0 / 70%)",
|
|
137
|
137
|
"color/black/alpha/80": "oklch(0 0 0 / 80%)",
|
|
138
|
|
- "color/black/alpha/90": "oklch(0 0 0 / 90%)"
|
|
|
138
|
+ "color/black/alpha/90": "oklch(0 0 0 / 90%)",
|
|
|
139
|
+ "color/accent/tor/light": "{Colors$color/purple/60}",
|
|
|
140
|
+ "color/accent/tor/dark": "{Colors$color/purple/30}",
|
|
|
141
|
+ "color/accent/tor/hover/light": "{Colors$color/purple/70}",
|
|
|
142
|
+ "color/accent/tor/hover/dark": "{Colors$color/purple/20}",
|
|
|
143
|
+ "color/accent/tor/active/light": "{Colors$color/purple/80}",
|
|
|
144
|
+ "color/accent/tor/active/dark": "{Colors$color/purple/10}"
|
|
139
|
145
|
} |
toolkit/themes/shared/design-system/dist/tokens-figma-primitives.json
| ... |
... |
@@ -6,6 +6,12 @@ |
|
6
|
6
|
"border/radius/medium": 8,
|
|
7
|
7
|
"border/radius/large": 16,
|
|
8
|
8
|
"border/width": 1,
|
|
|
9
|
+ "button/background/color/tor/light": "{Colors$color/accent/tor/light}",
|
|
|
10
|
+ "button/background/color/tor/dark": "{Colors$color/accent/tor/dark}",
|
|
|
11
|
+ "button/background/color/tor/hover/light": "{Colors$color/accent/tor/hover/light}",
|
|
|
12
|
+ "button/background/color/tor/hover/dark": "{Colors$color/accent/tor/hover/dark}",
|
|
|
13
|
+ "button/background/color/tor/active/light": "{Colors$color/accent/tor/active/light}",
|
|
|
14
|
+ "button/background/color/tor/active/dark": "{Colors$color/accent/tor/active/dark}",
|
|
9
|
15
|
"button/border/radius": "{Primitives$border/radius/medium}",
|
|
10
|
16
|
"button/min/height": "{Primitives$size/item/large}",
|
|
11
|
17
|
"button/min/height/small": "{Primitives$size/item/medium}",
|
| ... |
... |
@@ -14,8 +20,16 @@ |
|
14
|
20
|
"button/padding/icon": 0,
|
|
15
|
21
|
"button/size/icon": "{Primitives$button/min/height}",
|
|
16
|
22
|
"button/size/icon/small": "{Primitives$button/min/height/small}",
|
|
|
23
|
+ "button/text/color/tor/light": "{Colors$color/gray/05}",
|
|
|
24
|
+ "button/text/color/tor/dark": "{Colors$color/gray/100}",
|
|
|
25
|
+ "button/text/color/tor/hover/light": "{Colors$color/gray/05}",
|
|
|
26
|
+ "button/text/color/tor/hover/dark": "{Colors$color/gray/100}",
|
|
|
27
|
+ "button/text/color/tor/active/light": "{Colors$color/gray/05}",
|
|
|
28
|
+ "button/text/color/tor/active/dark": "{Colors$color/gray/100}",
|
|
17
|
29
|
"checkbox/margin/inline": "{Primitives$space/small}",
|
|
18
|
30
|
"checkbox/size": "{Primitives$size/item/small}",
|
|
|
31
|
+ "focus/outline/color/tor/light": "{Colors$color/accent/tor/light}",
|
|
|
32
|
+ "focus/outline/color/tor/dark": "{Colors$color/accent/tor/dark}",
|
|
19
|
33
|
"focus/outline/inset": -2,
|
|
20
|
34
|
"focus/outline/offset": 2,
|
|
21
|
35
|
"focus/outline/width": 2,
|
| ... |
... |
@@ -26,6 +40,12 @@ |
|
26
|
40
|
"icon/size/large": "{Primitives$size/item/medium}",
|
|
27
|
41
|
"icon/size/xlarge": "{Primitives$size/item/large}",
|
|
28
|
42
|
"input/text/min/height": "{Primitives$button/min/height}",
|
|
|
43
|
+ "link/color/tor/light": "{Colors$color/accent/tor/light}",
|
|
|
44
|
+ "link/color/tor/dark": "{Colors$color/accent/tor/dark}",
|
|
|
45
|
+ "link/color/tor/hover/light": "{Colors$color/accent/tor/hover/light}",
|
|
|
46
|
+ "link/color/tor/hover/dark": "{Colors$color/accent/tor/hover/dark}",
|
|
|
47
|
+ "link/color/tor/active/light": "{Colors$color/accent/tor/active/light}",
|
|
|
48
|
+ "link/color/tor/active/dark": "{Colors$color/accent/tor/active/dark}",
|
|
29
|
49
|
"link/focus/outline/offset": 1,
|
|
30
|
50
|
"page/main/content/width": 664,
|
|
31
|
51
|
"size/item/xsmall": 12,
|
| ... |
... |
@@ -71,5 +91,7 @@ |
|
71
|
91
|
"box/shadow/level-4/shadow-2/x": 0,
|
|
72
|
92
|
"box/shadow/level-4/shadow-2/y": 4,
|
|
73
|
93
|
"box/shadow/level-4/shadow-2/blur": 16,
|
|
74
|
|
- "box/shadow/level-4/shadow-2/spread": 0
|
|
|
94
|
+ "box/shadow/level-4/shadow-2/spread": 0,
|
|
|
95
|
+ "text/color/tor/light": "{Colors$color/purple/60}",
|
|
|
96
|
+ "text/color/tor/dark": "{Colors$color/purple/20}"
|
|
75
|
97
|
} |
toolkit/themes/shared/design-system/dist/tokens-figma-theme.json
| ... |
... |
@@ -189,6 +189,21 @@ |
|
189
|
189
|
"dark": "{Theme$button/background/color/active}",
|
|
190
|
190
|
"forcedColors": "{Theme$button/background/color/active}"
|
|
191
|
191
|
},
|
|
|
192
|
+ "button/background/color/tor": {
|
|
|
193
|
+ "light": "{Primitives$button/background/color/tor/light}",
|
|
|
194
|
+ "dark": "{Primitives$button/background/color/tor/dark}",
|
|
|
195
|
+ "forcedColors": "{Theme$button/background/color/primary}"
|
|
|
196
|
+ },
|
|
|
197
|
+ "button/background/color/tor/hover": {
|
|
|
198
|
+ "light": "{Primitives$button/background/color/tor/hover/light}",
|
|
|
199
|
+ "dark": "{Primitives$button/background/color/tor/hover/dark}",
|
|
|
200
|
+ "forcedColors": "{Theme$button/background/color/primary/hover}"
|
|
|
201
|
+ },
|
|
|
202
|
+ "button/background/color/tor/active": {
|
|
|
203
|
+ "light": "{Primitives$button/background/color/tor/active/light}",
|
|
|
204
|
+ "dark": "{Primitives$button/background/color/tor/active/dark}",
|
|
|
205
|
+ "forcedColors": "{Theme$button/background/color/primary/active}"
|
|
|
206
|
+ },
|
|
192
|
207
|
"button/border": {
|
|
193
|
208
|
"light": "{Primitives$border/width} solid {Theme$button/border/color}",
|
|
194
|
209
|
"dark": "{Primitives$border/width} solid {Theme$button/border/color}",
|
| ... |
... |
@@ -401,6 +416,21 @@ |
|
401
|
416
|
"dark": "{Theme$button/text/color/active}",
|
|
402
|
417
|
"forcedColors": "{Theme$button/text/color/active}"
|
|
403
|
418
|
},
|
|
|
419
|
+ "button/text/color/tor": {
|
|
|
420
|
+ "light": "{Primitives$button/text/color/tor/light}",
|
|
|
421
|
+ "dark": "{Primitives$button/text/color/tor/dark}",
|
|
|
422
|
+ "forcedColors": "{Theme$button/text/color/primary}"
|
|
|
423
|
+ },
|
|
|
424
|
+ "button/text/color/tor/hover": {
|
|
|
425
|
+ "light": "{Primitives$button/text/color/tor/hover/light}",
|
|
|
426
|
+ "dark": "{Primitives$button/text/color/tor/hover/dark}",
|
|
|
427
|
+ "forcedColors": "{Theme$button/text/color/primary/hover}"
|
|
|
428
|
+ },
|
|
|
429
|
+ "button/text/color/tor/active": {
|
|
|
430
|
+ "light": "{Primitives$button/text/color/tor/active/light}",
|
|
|
431
|
+ "dark": "{Primitives$button/text/color/tor/active/dark}",
|
|
|
432
|
+ "forcedColors": "{Theme$button/text/color/primary/active}"
|
|
|
433
|
+ },
|
|
404
|
434
|
"color/accent/primary": {
|
|
405
|
435
|
"light": "{Colors$color/blue/60}",
|
|
406
|
436
|
"dark": "{Colors$color/cyan/30}",
|
| ... |
... |
@@ -421,6 +451,21 @@ |
|
421
|
451
|
"dark": "{Colors$color/cyan/30}",
|
|
422
|
452
|
"forcedColors": "{HCM Theme$SelectedItem}"
|
|
423
|
453
|
},
|
|
|
454
|
+ "color/accent/tor": {
|
|
|
455
|
+ "light": "{Colors$color/accent/tor/light}",
|
|
|
456
|
+ "dark": "{Colors$color/accent/tor/dark}",
|
|
|
457
|
+ "forcedColors": "{Theme$color/accent/primary}"
|
|
|
458
|
+ },
|
|
|
459
|
+ "color/accent/tor/hover": {
|
|
|
460
|
+ "light": "{Colors$color/accent/tor/hover/light}",
|
|
|
461
|
+ "dark": "{Colors$color/accent/tor/hover/dark}",
|
|
|
462
|
+ "forcedColors": "{Theme$color/accent/primary/hover}"
|
|
|
463
|
+ },
|
|
|
464
|
+ "color/accent/tor/active": {
|
|
|
465
|
+ "light": "{Colors$color/accent/tor/active/light}",
|
|
|
466
|
+ "dark": "{Colors$color/accent/tor/active/dark}",
|
|
|
467
|
+ "forcedColors": "{Theme$color/accent/primary/active}"
|
|
|
468
|
+ },
|
|
424
|
469
|
"focus/outline": {
|
|
425
|
470
|
"light": "{Primitives$focus/outline/width} solid {Theme$focus/outline/color}",
|
|
426
|
471
|
"dark": "{Primitives$focus/outline/width} solid {Theme$focus/outline/color}",
|
| ... |
... |
@@ -431,6 +476,11 @@ |
|
431
|
476
|
"dark": "{Theme$color/accent/primary}",
|
|
432
|
477
|
"forcedColors": "{Theme$text/color}"
|
|
433
|
478
|
},
|
|
|
479
|
+ "focus/outline/color/tor": {
|
|
|
480
|
+ "light": "{Primitives$focus/outline/color/tor/light}",
|
|
|
481
|
+ "dark": "{Primitives$focus/outline/color/tor/dark}",
|
|
|
482
|
+ "forcedColors": "{Theme$focus/outline/color}"
|
|
|
483
|
+ },
|
|
434
|
484
|
"icon/color": {
|
|
435
|
485
|
"light": "{Colors$color/gray/70}",
|
|
436
|
486
|
"dark": "{Colors$color/gray/05}",
|
| ... |
... |
@@ -476,6 +526,21 @@ |
|
476
|
526
|
"dark": "{Theme$link/color}",
|
|
477
|
527
|
"forcedColors": "{Theme$link/color}"
|
|
478
|
528
|
},
|
|
|
529
|
+ "link/color/tor": {
|
|
|
530
|
+ "light": "{Primitives$link/color/tor/light}",
|
|
|
531
|
+ "dark": "{Primitives$link/color/tor/dark}",
|
|
|
532
|
+ "forcedColors": "{Theme$link/color}"
|
|
|
533
|
+ },
|
|
|
534
|
+ "link/color/tor/hover": {
|
|
|
535
|
+ "light": "{Primitives$link/color/tor/hover/light}",
|
|
|
536
|
+ "dark": "{Primitives$link/color/tor/hover/dark}",
|
|
|
537
|
+ "forcedColors": "{Theme$link/color/hover}"
|
|
|
538
|
+ },
|
|
|
539
|
+ "link/color/tor/active": {
|
|
|
540
|
+ "light": "{Primitives$link/color/tor/active/light}",
|
|
|
541
|
+ "dark": "{Primitives$link/color/tor/active/dark}",
|
|
|
542
|
+ "forcedColors": "{Theme$link/color/active}"
|
|
|
543
|
+ },
|
|
479
|
544
|
"outline/color/error": {
|
|
480
|
545
|
"light": "{Colors$color/red/70}",
|
|
481
|
546
|
"dark": "{Colors$color/red/20}",
|
| ... |
... |
@@ -553,5 +618,10 @@ |
|
553
|
618
|
"light": "{Theme$text/color}",
|
|
554
|
619
|
"dark": "{Theme$text/color}",
|
|
555
|
620
|
"forcedColors": "{HCM Theme$SelectedItemText}"
|
|
|
621
|
+ },
|
|
|
622
|
+ "text/color/tor": {
|
|
|
623
|
+ "light": "{Primitives$text/color/tor/light}",
|
|
|
624
|
+ "dark": "{Primitives$text/color/tor/dark}",
|
|
|
625
|
+ "forcedColors": "inherit"
|
|
556
|
626
|
}
|
|
557
|
627
|
} |
toolkit/themes/shared/design-system/dist/tokens-platform.css
| ... |
... |
@@ -2,6 +2,27 @@ |
|
2
|
2
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
3
|
3
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
4
|
4
|
|
|
|
5
|
+/* Tor Browser instructions
|
|
|
6
|
+ * ========================
|
|
|
7
|
+ *
|
|
|
8
|
+ * DO NOT EDIT this file directly!
|
|
|
9
|
+ *
|
|
|
10
|
+ * DO NOT MANUALLY RESOLVE MERGE CONFLICTS for this file!
|
|
|
11
|
+ *
|
|
|
12
|
+ * This is a file generated by `./mach buildtokens`.
|
|
|
13
|
+ *
|
|
|
14
|
+ * When resolving conflicts, first resolve other conflicts outside the
|
|
|
15
|
+ * 'dist' directory, if there are any:
|
|
|
16
|
+ * git mergetool ':(exclude)toolkit/themes/shared/design-system/dist/'
|
|
|
17
|
+ *
|
|
|
18
|
+ * Then regenerate these 'dist' files:
|
|
|
19
|
+ *
|
|
|
20
|
+ * ./mach buildtokens
|
|
|
21
|
+ *
|
|
|
22
|
+ * Then add the generated files as resolved:
|
|
|
23
|
+ *
|
|
|
24
|
+ * git add toolkit/themes/shared/design-system/dist/
|
|
|
25
|
+ */
|
|
5
|
26
|
/* DO NOT EDIT this file directly, instead modify design-tokens.json
|
|
6
|
27
|
* and run `npm run build` to see your changes. */
|
|
7
|
28
|
|
toolkit/themes/shared/design-system/dist/tokens-shared.css
| ... |
... |
@@ -2,6 +2,27 @@ |
|
2
|
2
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
3
|
3
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
4
|
4
|
|
|
|
5
|
+/* Tor Browser instructions
|
|
|
6
|
+ * ========================
|
|
|
7
|
+ *
|
|
|
8
|
+ * DO NOT EDIT this file directly!
|
|
|
9
|
+ *
|
|
|
10
|
+ * DO NOT MANUALLY RESOLVE MERGE CONFLICTS for this file!
|
|
|
11
|
+ *
|
|
|
12
|
+ * This is a file generated by `./mach buildtokens`.
|
|
|
13
|
+ *
|
|
|
14
|
+ * When resolving conflicts, first resolve other conflicts outside the
|
|
|
15
|
+ * 'dist' directory, if there are any:
|
|
|
16
|
+ * git mergetool ':(exclude)toolkit/themes/shared/design-system/dist/'
|
|
|
17
|
+ *
|
|
|
18
|
+ * Then regenerate these 'dist' files:
|
|
|
19
|
+ *
|
|
|
20
|
+ * ./mach buildtokens
|
|
|
21
|
+ *
|
|
|
22
|
+ * Then add the generated files as resolved:
|
|
|
23
|
+ *
|
|
|
24
|
+ * git add toolkit/themes/shared/design-system/dist/
|
|
|
25
|
+ */
|
|
5
|
26
|
/* DO NOT EDIT this file directly, instead modify design-tokens.json
|
|
6
|
27
|
* and run `npm run build` to see your changes. */
|
|
7
|
28
|
|
| ... |
... |
@@ -66,6 +87,15 @@ |
|
66
|
87
|
--button-background-color-primary-disabled: var(--button-background-color-primary);
|
|
67
|
88
|
--button-background-color-primary-selected: var(--button-background-color-primary-active);
|
|
68
|
89
|
--button-background-color-selected: var(--button-background-color-active);
|
|
|
90
|
+ --button-background-color-tor: light-dark(var(--button-background-color-tor-light), var(--button-background-color-tor-dark));
|
|
|
91
|
+ --button-background-color-tor-hover: light-dark(var(--button-background-color-tor-hover-light), var(--button-background-color-tor-hover-dark));
|
|
|
92
|
+ --button-background-color-tor-active: light-dark(var(--button-background-color-tor-active-light), var(--button-background-color-tor-active-dark));
|
|
|
93
|
+ --button-background-color-tor-active-dark: var(--color-accent-tor-active-dark);
|
|
|
94
|
+ --button-background-color-tor-active-light: var(--color-accent-tor-active-light);
|
|
|
95
|
+ --button-background-color-tor-dark: var(--color-accent-tor-dark);
|
|
|
96
|
+ --button-background-color-tor-hover-dark: var(--color-accent-tor-hover-dark);
|
|
|
97
|
+ --button-background-color-tor-hover-light: var(--color-accent-tor-hover-light);
|
|
|
98
|
+ --button-background-color-tor-light: var(--color-accent-tor-light);
|
|
69
|
99
|
--button-border: var(--border-width) solid var(--button-border-color);
|
|
70
|
100
|
--button-border-color: transparent;
|
|
71
|
101
|
--button-border-color-hover: var(--button-border-color);
|
| ... |
... |
@@ -118,12 +148,30 @@ |
|
118
|
148
|
--button-text-color-primary-disabled: var(--button-text-color-primary);
|
|
119
|
149
|
--button-text-color-primary-selected: var(--button-text-color-primary-active);
|
|
120
|
150
|
--button-text-color-selected: var(--button-text-color-active);
|
|
|
151
|
+ --button-text-color-tor: light-dark(var(--button-text-color-tor-light), var(--button-text-color-tor-dark));
|
|
|
152
|
+ --button-text-color-tor-hover: light-dark(var(--button-text-color-tor-hover-light), var(--button-text-color-tor-hover-dark));
|
|
|
153
|
+ --button-text-color-tor-active: light-dark(var(--button-text-color-tor-active-light), var(--button-text-color-tor-active-dark));
|
|
|
154
|
+ --button-text-color-tor-active-dark: var(--color-gray-100);
|
|
|
155
|
+ --button-text-color-tor-active-light: var(--color-gray-05);
|
|
|
156
|
+ --button-text-color-tor-dark: var(--color-gray-100);
|
|
|
157
|
+ --button-text-color-tor-hover-dark: var(--color-gray-100);
|
|
|
158
|
+ --button-text-color-tor-hover-light: var(--color-gray-05);
|
|
|
159
|
+ --button-text-color-tor-light: var(--color-gray-05);
|
|
121
|
160
|
|
|
122
|
161
|
/** Checkbox **/
|
|
123
|
162
|
--checkbox-margin-inline: var(--space-small);
|
|
124
|
163
|
--checkbox-size: var(--size-item-small); /* TODO Bug 1876537: Make this em-based, probably? */
|
|
125
|
164
|
|
|
126
|
165
|
/** Color **/
|
|
|
166
|
+ --color-accent-tor: light-dark(var(--color-accent-tor-light), var(--color-accent-tor-dark));
|
|
|
167
|
+ --color-accent-tor-hover: light-dark(var(--color-accent-tor-hover-light), var(--color-accent-tor-hover-dark));
|
|
|
168
|
+ --color-accent-tor-active: light-dark(var(--color-accent-tor-active-light), var(--color-accent-tor-active-dark));
|
|
|
169
|
+ --color-accent-tor-active-dark: var(--color-purple-10);
|
|
|
170
|
+ --color-accent-tor-active-light: var(--color-purple-80);
|
|
|
171
|
+ --color-accent-tor-dark: var(--color-purple-30);
|
|
|
172
|
+ --color-accent-tor-hover-dark: var(--color-purple-20);
|
|
|
173
|
+ --color-accent-tor-hover-light: var(--color-purple-70);
|
|
|
174
|
+ --color-accent-tor-light: var(--color-purple-60);
|
|
127
|
175
|
--color-black: #000000;
|
|
128
|
176
|
--color-black-alpha-10: oklch(0 0 0 / 10%);
|
|
129
|
177
|
--color-black-alpha-20: oklch(0 0 0 / 20%);
|
| ... |
... |
@@ -265,6 +313,9 @@ |
|
265
|
313
|
/** Focus Outline **/
|
|
266
|
314
|
--focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
|
|
267
|
315
|
--focus-outline-color: var(--color-accent-primary);
|
|
|
316
|
+ --focus-outline-color-tor: light-dark(var(--focus-outline-color-tor-light), var(--focus-outline-color-tor-dark));
|
|
|
317
|
+ --focus-outline-color-tor-dark: var(--color-accent-tor-dark);
|
|
|
318
|
+ --focus-outline-color-tor-light: var(--color-accent-tor-light);
|
|
268
|
319
|
--focus-outline-inset: calc(-1 * var(--focus-outline-width));
|
|
269
|
320
|
--focus-outline-offset: 2px;
|
|
270
|
321
|
--focus-outline-width: 2px;
|
| ... |
... |
@@ -297,6 +348,15 @@ |
|
297
|
348
|
--input-text-min-height: var(--button-min-height);
|
|
298
|
349
|
|
|
299
|
350
|
/** Link **/
|
|
|
351
|
+ --link-color-tor: light-dark(var(--link-color-tor-light), var(--link-color-tor-dark));
|
|
|
352
|
+ --link-color-tor-hover: light-dark(var(--link-color-tor-hover-light), var(--link-color-tor-hover-dark));
|
|
|
353
|
+ --link-color-tor-active: light-dark(var(--link-color-tor-active-light), var(--link-color-tor-active-dark));
|
|
|
354
|
+ --link-color-tor-active-dark: var(--color-accent-tor-active-dark);
|
|
|
355
|
+ --link-color-tor-active-light: var(--color-accent-tor-active-light);
|
|
|
356
|
+ --link-color-tor-dark: var(--color-accent-tor-dark);
|
|
|
357
|
+ --link-color-tor-hover-dark: var(--color-accent-tor-hover-dark);
|
|
|
358
|
+ --link-color-tor-hover-light: var(--color-accent-tor-hover-light);
|
|
|
359
|
+ --link-color-tor-light: var(--color-accent-tor-light);
|
|
300
|
360
|
/**
|
|
301
|
361
|
* Not using --force-outline-offset for links because that's intended for
|
|
302
|
362
|
* elements with a background, and we only want a slight offset here while
|
| ... |
... |
@@ -328,6 +388,9 @@ |
|
328
|
388
|
--text-color-deemphasized: color-mix(in srgb, currentColor 69%, transparent);
|
|
329
|
389
|
--text-color-error: light-dark(var(--color-red-70), var(--color-red-20));
|
|
330
|
390
|
--text-color-list-item-hover: var(--text-color);
|
|
|
391
|
+ --text-color-tor: light-dark(var(--text-color-tor-light), var(--text-color-tor-dark));
|
|
|
392
|
+ --text-color-tor-dark: var(--color-purple-20);
|
|
|
393
|
+ --text-color-tor-light: var(--color-purple-60);
|
|
331
|
394
|
}
|
|
332
|
395
|
}
|
|
333
|
396
|
|
| ... |
... |
@@ -358,9 +421,23 @@ |
|
358
|
421
|
--border-color-transparent: CanvasText;
|
|
359
|
422
|
|
|
360
|
423
|
/** Button **/
|
|
|
424
|
+ --button-background-color-tor: var(--button-background-color-primary);
|
|
|
425
|
+ --button-background-color-tor-hover: var(--button-background-color-primary-hover);
|
|
|
426
|
+ --button-background-color-tor-active: var(--button-background-color-primary-active);
|
|
361
|
427
|
--button-border-color: var(--button-text-color);
|
|
362
|
428
|
--button-text-color-ghost-hover: var(--button-text-color-hover);
|
|
363
|
429
|
--button-text-color-ghost-active: var(--button-text-color-active);
|
|
|
430
|
+ --button-text-color-tor: var(--button-text-color-primary);
|
|
|
431
|
+ --button-text-color-tor-hover: var(--button-text-color-primary-hover);
|
|
|
432
|
+ --button-text-color-tor-active: var(--button-text-color-primary-active);
|
|
|
433
|
+
|
|
|
434
|
+ /** Color **/
|
|
|
435
|
+ --color-accent-tor: var(--color-accent-primary);
|
|
|
436
|
+ --color-accent-tor-hover: var(--color-accent-primary-hover);
|
|
|
437
|
+ --color-accent-tor-active: var(--color-accent-primary-active);
|
|
|
438
|
+
|
|
|
439
|
+ /** Focus Outline **/
|
|
|
440
|
+ --focus-outline-color-tor: var(--focus-outline-color);
|
|
364
|
441
|
|
|
365
|
442
|
/** Icon **/
|
|
366
|
443
|
--icon-color: var(--text-color);
|
| ... |
... |
@@ -369,6 +446,11 @@ |
|
369
|
446
|
--icon-color-success: var(--icon-color);
|
|
370
|
447
|
--icon-color-warning: var(--icon-color);
|
|
371
|
448
|
|
|
|
449
|
+ /** Link **/
|
|
|
450
|
+ --link-color-tor: var(--link-color);
|
|
|
451
|
+ --link-color-tor-hover: var(--link-color-hover);
|
|
|
452
|
+ --link-color-tor-active: var(--link-color-active);
|
|
|
453
|
+
|
|
372
|
454
|
/** Outline Color **/
|
|
373
|
455
|
--outline-color-error: var(--border-color);
|
|
374
|
456
|
|
| ... |
... |
@@ -377,6 +459,7 @@ |
|
377
|
459
|
--text-color-deemphasized: inherit;
|
|
378
|
460
|
--text-color-error: inherit;
|
|
379
|
461
|
--text-color-list-item-hover: SelectedItemText;
|
|
|
462
|
+ --text-color-tor: inherit;
|
|
380
|
463
|
}
|
|
381
|
464
|
}
|
|
382
|
465
|
}
|
| ... |
... |
@@ -409,6 +492,9 @@ |
|
409
|
492
|
--button-background-color-destructive-active: var(--button-background-color-primary-active);
|
|
410
|
493
|
--button-background-color-destructive-disabled: var(--button-background-color-primary-disabled);
|
|
411
|
494
|
--button-background-color-primary-disabled: var(--button-text-color-disabled);
|
|
|
495
|
+ --button-background-color-tor: var(--button-background-color-primary);
|
|
|
496
|
+ --button-background-color-tor-hover: var(--button-background-color-primary-hover);
|
|
|
497
|
+ --button-background-color-tor-active: var(--button-background-color-primary-active);
|
|
412
|
498
|
--button-border-color: var(--border-color-interactive);
|
|
413
|
499
|
--button-border-color-hover: var(--border-color-interactive-hover);
|
|
414
|
500
|
--button-border-color-active: var(--border-color-interactive-active);
|
| ... |
... |
@@ -433,25 +519,36 @@ |
|
433
|
519
|
--button-text-color-ghost-active: var(--button-text-color-active);
|
|
434
|
520
|
--button-text-color-primary: ButtonFace;
|
|
435
|
521
|
--button-text-color-primary-hover: SelectedItemText;
|
|
|
522
|
+ --button-text-color-tor: var(--button-text-color-primary);
|
|
|
523
|
+ --button-text-color-tor-hover: var(--button-text-color-primary-hover);
|
|
|
524
|
+ --button-text-color-tor-active: var(--button-text-color-primary-active);
|
|
436
|
525
|
|
|
437
|
526
|
/** Color **/
|
|
438
|
527
|
--color-accent-primary: ButtonText;
|
|
439
|
528
|
--color-accent-primary-hover: SelectedItem;
|
|
440
|
529
|
--color-accent-primary-active: var(--color-accent-primary-hover);
|
|
441
|
530
|
--color-accent-primary-selected: SelectedItem;
|
|
|
531
|
+ --color-accent-tor: var(--color-accent-primary);
|
|
|
532
|
+ --color-accent-tor-hover: var(--color-accent-primary-hover);
|
|
|
533
|
+ --color-accent-tor-active: var(--color-accent-primary-active);
|
|
442
|
534
|
|
|
443
|
535
|
/** Focus Outline **/
|
|
444
|
536
|
--focus-outline-color: var(--text-color);
|
|
|
537
|
+ --focus-outline-color-tor: var(--focus-outline-color);
|
|
445
|
538
|
|
|
446
|
539
|
/** Link **/
|
|
447
|
540
|
--link-color: LinkText;
|
|
448
|
541
|
--link-color-hover: LinkText;
|
|
449
|
542
|
--link-color-active: ActiveText;
|
|
|
543
|
+ --link-color-tor: var(--link-color);
|
|
|
544
|
+ --link-color-tor-hover: var(--link-color-hover);
|
|
|
545
|
+ --link-color-tor-active: var(--link-color-active);
|
|
450
|
546
|
--link-color-visited: var(--link-color);
|
|
451
|
547
|
|
|
452
|
548
|
/** Text **/
|
|
453
|
549
|
--text-color-disabled: GrayText;
|
|
454
|
550
|
--text-color-accent-primary-selected: SelectedItemText;
|
|
|
551
|
+ --text-color-tor: inherit;
|
|
455
|
552
|
}
|
|
456
|
553
|
}
|
|
457
|
554
|
} |
toolkit/themes/shared/design-system/dist/tokens-table.mjs
| ... |
... |
@@ -2,6 +2,27 @@ |
|
2
|
2
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
3
|
3
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
4
|
4
|
|
|
|
5
|
+/* Tor Browser instructions
|
|
|
6
|
+ * ========================
|
|
|
7
|
+ *
|
|
|
8
|
+ * DO NOT EDIT this file directly!
|
|
|
9
|
+ *
|
|
|
10
|
+ * DO NOT MANUALLY RESOLVE MERGE CONFLICTS for this file!
|
|
|
11
|
+ *
|
|
|
12
|
+ * This is a file generated by `./mach buildtokens`.
|
|
|
13
|
+ *
|
|
|
14
|
+ * When resolving conflicts, first resolve other conflicts outside the
|
|
|
15
|
+ * 'dist' directory, if there are any:
|
|
|
16
|
+ * git mergetool ':(exclude)toolkit/themes/shared/design-system/dist/'
|
|
|
17
|
+ *
|
|
|
18
|
+ * Then regenerate these 'dist' files:
|
|
|
19
|
+ *
|
|
|
20
|
+ * ./mach buildtokens
|
|
|
21
|
+ *
|
|
|
22
|
+ * Then add the generated files as resolved:
|
|
|
23
|
+ *
|
|
|
24
|
+ * git add toolkit/themes/shared/design-system/dist/
|
|
|
25
|
+ */
|
|
5
|
26
|
/* DO NOT EDIT this file directly, instead modify design-tokens.json
|
|
6
|
27
|
* and run `npm run build` to see your changes. */
|
|
7
|
28
|
|
| ... |
... |
@@ -208,6 +229,48 @@ export const tokensTable = { |
|
208
|
229
|
},
|
|
209
|
230
|
name: "--color-accent-primary-selected",
|
|
210
|
231
|
},
|
|
|
232
|
+ { value: "var(--color-purple-60)", name: "--color-accent-tor-light" },
|
|
|
233
|
+ { value: "var(--color-purple-30)", name: "--color-accent-tor-dark" },
|
|
|
234
|
+ {
|
|
|
235
|
+ value: {
|
|
|
236
|
+ light: "var(--color-accent-tor-light)",
|
|
|
237
|
+ dark: "var(--color-accent-tor-dark)",
|
|
|
238
|
+ prefersContrast: "var(--color-accent-primary)",
|
|
|
239
|
+ forcedColors: "var(--color-accent-primary)",
|
|
|
240
|
+ default:
|
|
|
241
|
+ "light-dark(var(--color-accent-tor-light), var(--color-accent-tor-dark))",
|
|
|
242
|
+ },
|
|
|
243
|
+ name: "--color-accent-tor",
|
|
|
244
|
+ },
|
|
|
245
|
+ { value: "var(--color-purple-70)", name: "--color-accent-tor-hover-light" },
|
|
|
246
|
+ { value: "var(--color-purple-20)", name: "--color-accent-tor-hover-dark" },
|
|
|
247
|
+ {
|
|
|
248
|
+ value: {
|
|
|
249
|
+ light: "var(--color-accent-tor-hover-light)",
|
|
|
250
|
+ dark: "var(--color-accent-tor-hover-dark)",
|
|
|
251
|
+ prefersContrast: "var(--color-accent-primary-hover)",
|
|
|
252
|
+ forcedColors: "var(--color-accent-primary-hover)",
|
|
|
253
|
+ default:
|
|
|
254
|
+ "light-dark(var(--color-accent-tor-hover-light), var(--color-accent-tor-hover-dark))",
|
|
|
255
|
+ },
|
|
|
256
|
+ name: "--color-accent-tor-hover",
|
|
|
257
|
+ },
|
|
|
258
|
+ {
|
|
|
259
|
+ value: "var(--color-purple-80)",
|
|
|
260
|
+ name: "--color-accent-tor-active-light",
|
|
|
261
|
+ },
|
|
|
262
|
+ { value: "var(--color-purple-10)", name: "--color-accent-tor-active-dark" },
|
|
|
263
|
+ {
|
|
|
264
|
+ value: {
|
|
|
265
|
+ light: "var(--color-accent-tor-active-light)",
|
|
|
266
|
+ dark: "var(--color-accent-tor-active-dark)",
|
|
|
267
|
+ prefersContrast: "var(--color-accent-primary-active)",
|
|
|
268
|
+ forcedColors: "var(--color-accent-primary-active)",
|
|
|
269
|
+ default:
|
|
|
270
|
+ "light-dark(var(--color-accent-tor-active-light), var(--color-accent-tor-active-dark))",
|
|
|
271
|
+ },
|
|
|
272
|
+ name: "--color-accent-tor-active",
|
|
|
273
|
+ },
|
|
211
|
274
|
],
|
|
212
|
275
|
"background-color": [
|
|
213
|
276
|
{
|
| ... |
... |
@@ -426,6 +489,63 @@ export const tokensTable = { |
|
426
|
489
|
value: "var(--button-background-color-active)",
|
|
427
|
490
|
name: "--button-background-color-selected",
|
|
428
|
491
|
},
|
|
|
492
|
+ {
|
|
|
493
|
+ value: "var(--color-accent-tor-light)",
|
|
|
494
|
+ name: "--button-background-color-tor-light",
|
|
|
495
|
+ },
|
|
|
496
|
+ {
|
|
|
497
|
+ value: "var(--color-accent-tor-dark)",
|
|
|
498
|
+ name: "--button-background-color-tor-dark",
|
|
|
499
|
+ },
|
|
|
500
|
+ {
|
|
|
501
|
+ value: {
|
|
|
502
|
+ light: "var(--button-background-color-tor-light)",
|
|
|
503
|
+ dark: "var(--button-background-color-tor-dark)",
|
|
|
504
|
+ prefersContrast: "var(--button-background-color-primary)",
|
|
|
505
|
+ forcedColors: "var(--button-background-color-primary)",
|
|
|
506
|
+ default:
|
|
|
507
|
+ "light-dark(var(--button-background-color-tor-light), var(--button-background-color-tor-dark))",
|
|
|
508
|
+ },
|
|
|
509
|
+ name: "--button-background-color-tor",
|
|
|
510
|
+ },
|
|
|
511
|
+ {
|
|
|
512
|
+ value: "var(--color-accent-tor-hover-light)",
|
|
|
513
|
+ name: "--button-background-color-tor-hover-light",
|
|
|
514
|
+ },
|
|
|
515
|
+ {
|
|
|
516
|
+ value: "var(--color-accent-tor-hover-dark)",
|
|
|
517
|
+ name: "--button-background-color-tor-hover-dark",
|
|
|
518
|
+ },
|
|
|
519
|
+ {
|
|
|
520
|
+ value: {
|
|
|
521
|
+ light: "var(--button-background-color-tor-hover-light)",
|
|
|
522
|
+ dark: "var(--button-background-color-tor-hover-dark)",
|
|
|
523
|
+ prefersContrast: "var(--button-background-color-primary-hover)",
|
|
|
524
|
+ forcedColors: "var(--button-background-color-primary-hover)",
|
|
|
525
|
+ default:
|
|
|
526
|
+ "light-dark(var(--button-background-color-tor-hover-light), var(--button-background-color-tor-hover-dark))",
|
|
|
527
|
+ },
|
|
|
528
|
+ name: "--button-background-color-tor-hover",
|
|
|
529
|
+ },
|
|
|
530
|
+ {
|
|
|
531
|
+ value: "var(--color-accent-tor-active-light)",
|
|
|
532
|
+ name: "--button-background-color-tor-active-light",
|
|
|
533
|
+ },
|
|
|
534
|
+ {
|
|
|
535
|
+ value: "var(--color-accent-tor-active-dark)",
|
|
|
536
|
+ name: "--button-background-color-tor-active-dark",
|
|
|
537
|
+ },
|
|
|
538
|
+ {
|
|
|
539
|
+ value: {
|
|
|
540
|
+ light: "var(--button-background-color-tor-active-light)",
|
|
|
541
|
+ dark: "var(--button-background-color-tor-active-dark)",
|
|
|
542
|
+ prefersContrast: "var(--button-background-color-primary-active)",
|
|
|
543
|
+ forcedColors: "var(--button-background-color-primary-active)",
|
|
|
544
|
+ default:
|
|
|
545
|
+ "light-dark(var(--button-background-color-tor-active-light), var(--button-background-color-tor-active-dark))",
|
|
|
546
|
+ },
|
|
|
547
|
+ name: "--button-background-color-tor-active",
|
|
|
548
|
+ },
|
|
429
|
549
|
{
|
|
430
|
550
|
value: "var(--background-color-box-info)",
|
|
431
|
551
|
name: "--promo-background-color",
|
| ... |
... |
@@ -957,6 +1077,57 @@ export const tokensTable = { |
|
957
|
1077
|
value: "var(--button-text-color-active)",
|
|
958
|
1078
|
name: "--button-text-color-selected",
|
|
959
|
1079
|
},
|
|
|
1080
|
+ { value: "var(--color-gray-05)", name: "--button-text-color-tor-light" },
|
|
|
1081
|
+ { value: "var(--color-gray-100)", name: "--button-text-color-tor-dark" },
|
|
|
1082
|
+ {
|
|
|
1083
|
+ value: {
|
|
|
1084
|
+ light: "var(--button-text-color-tor-light)",
|
|
|
1085
|
+ dark: "var(--button-text-color-tor-dark)",
|
|
|
1086
|
+ prefersContrast: "var(--button-text-color-primary)",
|
|
|
1087
|
+ forcedColors: "var(--button-text-color-primary)",
|
|
|
1088
|
+ default:
|
|
|
1089
|
+ "light-dark(var(--button-text-color-tor-light), var(--button-text-color-tor-dark))",
|
|
|
1090
|
+ },
|
|
|
1091
|
+ name: "--button-text-color-tor",
|
|
|
1092
|
+ },
|
|
|
1093
|
+ {
|
|
|
1094
|
+ value: "var(--color-gray-05)",
|
|
|
1095
|
+ name: "--button-text-color-tor-hover-light",
|
|
|
1096
|
+ },
|
|
|
1097
|
+ {
|
|
|
1098
|
+ value: "var(--color-gray-100)",
|
|
|
1099
|
+ name: "--button-text-color-tor-hover-dark",
|
|
|
1100
|
+ },
|
|
|
1101
|
+ {
|
|
|
1102
|
+ value: {
|
|
|
1103
|
+ light: "var(--button-text-color-tor-hover-light)",
|
|
|
1104
|
+ dark: "var(--button-text-color-tor-hover-dark)",
|
|
|
1105
|
+ prefersContrast: "var(--button-text-color-primary-hover)",
|
|
|
1106
|
+ forcedColors: "var(--button-text-color-primary-hover)",
|
|
|
1107
|
+ default:
|
|
|
1108
|
+ "light-dark(var(--button-text-color-tor-hover-light), var(--button-text-color-tor-hover-dark))",
|
|
|
1109
|
+ },
|
|
|
1110
|
+ name: "--button-text-color-tor-hover",
|
|
|
1111
|
+ },
|
|
|
1112
|
+ {
|
|
|
1113
|
+ value: "var(--color-gray-05)",
|
|
|
1114
|
+ name: "--button-text-color-tor-active-light",
|
|
|
1115
|
+ },
|
|
|
1116
|
+ {
|
|
|
1117
|
+ value: "var(--color-gray-100)",
|
|
|
1118
|
+ name: "--button-text-color-tor-active-dark",
|
|
|
1119
|
+ },
|
|
|
1120
|
+ {
|
|
|
1121
|
+ value: {
|
|
|
1122
|
+ light: "var(--button-text-color-tor-active-light)",
|
|
|
1123
|
+ dark: "var(--button-text-color-tor-active-dark)",
|
|
|
1124
|
+ prefersContrast: "var(--button-text-color-primary-active)",
|
|
|
1125
|
+ forcedColors: "var(--button-text-color-primary-active)",
|
|
|
1126
|
+ default:
|
|
|
1127
|
+ "light-dark(var(--button-text-color-tor-active-light), var(--button-text-color-tor-active-dark))",
|
|
|
1128
|
+ },
|
|
|
1129
|
+ name: "--button-text-color-tor-active",
|
|
|
1130
|
+ },
|
|
960
|
1131
|
{
|
|
961
|
1132
|
value: {
|
|
962
|
1133
|
forcedColors: "LinkText",
|
| ... |
... |
@@ -993,6 +1164,57 @@ export const tokensTable = { |
|
993
|
1164
|
},
|
|
994
|
1165
|
name: "--link-color-visited",
|
|
995
|
1166
|
},
|
|
|
1167
|
+ { value: "var(--color-accent-tor-light)", name: "--link-color-tor-light" },
|
|
|
1168
|
+ { value: "var(--color-accent-tor-dark)", name: "--link-color-tor-dark" },
|
|
|
1169
|
+ {
|
|
|
1170
|
+ value: {
|
|
|
1171
|
+ light: "var(--link-color-tor-light)",
|
|
|
1172
|
+ dark: "var(--link-color-tor-dark)",
|
|
|
1173
|
+ prefersContrast: "var(--link-color)",
|
|
|
1174
|
+ forcedColors: "var(--link-color)",
|
|
|
1175
|
+ default:
|
|
|
1176
|
+ "light-dark(var(--link-color-tor-light), var(--link-color-tor-dark))",
|
|
|
1177
|
+ },
|
|
|
1178
|
+ name: "--link-color-tor",
|
|
|
1179
|
+ },
|
|
|
1180
|
+ {
|
|
|
1181
|
+ value: "var(--color-accent-tor-hover-light)",
|
|
|
1182
|
+ name: "--link-color-tor-hover-light",
|
|
|
1183
|
+ },
|
|
|
1184
|
+ {
|
|
|
1185
|
+ value: "var(--color-accent-tor-hover-dark)",
|
|
|
1186
|
+ name: "--link-color-tor-hover-dark",
|
|
|
1187
|
+ },
|
|
|
1188
|
+ {
|
|
|
1189
|
+ value: {
|
|
|
1190
|
+ light: "var(--link-color-tor-hover-light)",
|
|
|
1191
|
+ dark: "var(--link-color-tor-hover-dark)",
|
|
|
1192
|
+ prefersContrast: "var(--link-color-hover)",
|
|
|
1193
|
+ forcedColors: "var(--link-color-hover)",
|
|
|
1194
|
+ default:
|
|
|
1195
|
+ "light-dark(var(--link-color-tor-hover-light), var(--link-color-tor-hover-dark))",
|
|
|
1196
|
+ },
|
|
|
1197
|
+ name: "--link-color-tor-hover",
|
|
|
1198
|
+ },
|
|
|
1199
|
+ {
|
|
|
1200
|
+ value: "var(--color-accent-tor-active-light)",
|
|
|
1201
|
+ name: "--link-color-tor-active-light",
|
|
|
1202
|
+ },
|
|
|
1203
|
+ {
|
|
|
1204
|
+ value: "var(--color-accent-tor-active-dark)",
|
|
|
1205
|
+ name: "--link-color-tor-active-dark",
|
|
|
1206
|
+ },
|
|
|
1207
|
+ {
|
|
|
1208
|
+ value: {
|
|
|
1209
|
+ light: "var(--link-color-tor-active-light)",
|
|
|
1210
|
+ dark: "var(--link-color-tor-active-dark)",
|
|
|
1211
|
+ prefersContrast: "var(--link-color-active)",
|
|
|
1212
|
+ forcedColors: "var(--link-color-active)",
|
|
|
1213
|
+ default:
|
|
|
1214
|
+ "light-dark(var(--link-color-tor-active-light), var(--link-color-tor-active-dark))",
|
|
|
1215
|
+ },
|
|
|
1216
|
+ name: "--link-color-tor-active",
|
|
|
1217
|
+ },
|
|
996
|
1218
|
{
|
|
997
|
1219
|
value: {
|
|
998
|
1220
|
prefersContrast: "CanvasText",
|
| ... |
... |
@@ -1047,6 +1269,19 @@ export const tokensTable = { |
|
1047
|
1269
|
},
|
|
1048
|
1270
|
name: "--text-color-list-item-hover",
|
|
1049
|
1271
|
},
|
|
|
1272
|
+ { value: "var(--color-purple-60)", name: "--text-color-tor-light" },
|
|
|
1273
|
+ { value: "var(--color-purple-20)", name: "--text-color-tor-dark" },
|
|
|
1274
|
+ {
|
|
|
1275
|
+ value: {
|
|
|
1276
|
+ light: "var(--text-color-tor-light)",
|
|
|
1277
|
+ dark: "var(--text-color-tor-dark)",
|
|
|
1278
|
+ prefersContrast: "inherit",
|
|
|
1279
|
+ forcedColors: "inherit",
|
|
|
1280
|
+ default:
|
|
|
1281
|
+ "light-dark(var(--text-color-tor-light), var(--text-color-tor-dark))",
|
|
|
1282
|
+ },
|
|
|
1283
|
+ name: "--text-color-tor",
|
|
|
1284
|
+ },
|
|
1050
|
1285
|
],
|
|
1051
|
1286
|
outline: [
|
|
1052
|
1287
|
{
|
| ... |
... |
@@ -1060,6 +1295,25 @@ export const tokensTable = { |
|
1060
|
1295
|
},
|
|
1061
|
1296
|
name: "--focus-outline-color",
|
|
1062
|
1297
|
},
|
|
|
1298
|
+ {
|
|
|
1299
|
+ value: "var(--color-accent-tor-light)",
|
|
|
1300
|
+ name: "--focus-outline-color-tor-light",
|
|
|
1301
|
+ },
|
|
|
1302
|
+ {
|
|
|
1303
|
+ value: "var(--color-accent-tor-dark)",
|
|
|
1304
|
+ name: "--focus-outline-color-tor-dark",
|
|
|
1305
|
+ },
|
|
|
1306
|
+ {
|
|
|
1307
|
+ value: {
|
|
|
1308
|
+ light: "var(--focus-outline-color-tor-light)",
|
|
|
1309
|
+ dark: "var(--focus-outline-color-tor-dark)",
|
|
|
1310
|
+ prefersContrast: "var(--focus-outline-color)",
|
|
|
1311
|
+ forcedColors: "var(--focus-outline-color)",
|
|
|
1312
|
+ default:
|
|
|
1313
|
+ "light-dark(var(--focus-outline-color-tor-light), var(--focus-outline-color-tor-dark))",
|
|
|
1314
|
+ },
|
|
|
1315
|
+ name: "--focus-outline-color-tor",
|
|
|
1316
|
+ },
|
|
1063
|
1317
|
{
|
|
1064
|
1318
|
value: "calc(-1 * var(--focus-outline-width))",
|
|
1065
|
1319
|
name: "--focus-outline-inset",
|
| ... |
... |
@@ -1341,6 +1595,40 @@ export const variableLookupTable = { |
|
1341
|
1595
|
"button-background-color-ghost-selected":
|
|
1342
|
1596
|
"var(--button-background-color-ghost-active)",
|
|
1343
|
1597
|
"button-background-color-selected": "var(--button-background-color-active)",
|
|
|
1598
|
+ "button-background-color-tor-light": "var(--color-accent-tor-light)",
|
|
|
1599
|
+ "button-background-color-tor-dark": "var(--color-accent-tor-dark)",
|
|
|
1600
|
+ "button-background-color-tor": {
|
|
|
1601
|
+ light: "var(--button-background-color-tor-light)",
|
|
|
1602
|
+ dark: "var(--button-background-color-tor-dark)",
|
|
|
1603
|
+ prefersContrast: "var(--button-background-color-primary)",
|
|
|
1604
|
+ forcedColors: "var(--button-background-color-primary)",
|
|
|
1605
|
+ default:
|
|
|
1606
|
+ "light-dark(var(--button-background-color-tor-light), var(--button-background-color-tor-dark))",
|
|
|
1607
|
+ },
|
|
|
1608
|
+ "button-background-color-tor-hover-light":
|
|
|
1609
|
+ "var(--color-accent-tor-hover-light)",
|
|
|
1610
|
+ "button-background-color-tor-hover-dark":
|
|
|
1611
|
+ "var(--color-accent-tor-hover-dark)",
|
|
|
1612
|
+ "button-background-color-tor-hover": {
|
|
|
1613
|
+ light: "var(--button-background-color-tor-hover-light)",
|
|
|
1614
|
+ dark: "var(--button-background-color-tor-hover-dark)",
|
|
|
1615
|
+ prefersContrast: "var(--button-background-color-primary-hover)",
|
|
|
1616
|
+ forcedColors: "var(--button-background-color-primary-hover)",
|
|
|
1617
|
+ default:
|
|
|
1618
|
+ "light-dark(var(--button-background-color-tor-hover-light), var(--button-background-color-tor-hover-dark))",
|
|
|
1619
|
+ },
|
|
|
1620
|
+ "button-background-color-tor-active-light":
|
|
|
1621
|
+ "var(--color-accent-tor-active-light)",
|
|
|
1622
|
+ "button-background-color-tor-active-dark":
|
|
|
1623
|
+ "var(--color-accent-tor-active-dark)",
|
|
|
1624
|
+ "button-background-color-tor-active": {
|
|
|
1625
|
+ light: "var(--button-background-color-tor-active-light)",
|
|
|
1626
|
+ dark: "var(--button-background-color-tor-active-dark)",
|
|
|
1627
|
+ prefersContrast: "var(--button-background-color-primary-active)",
|
|
|
1628
|
+ forcedColors: "var(--button-background-color-primary-active)",
|
|
|
1629
|
+ default:
|
|
|
1630
|
+ "light-dark(var(--button-background-color-tor-active-light), var(--button-background-color-tor-active-dark))",
|
|
|
1631
|
+ },
|
|
1344
|
1632
|
"button-border": "var(--border-width) solid var(--button-border-color)",
|
|
1345
|
1633
|
"button-border-color": {
|
|
1346
|
1634
|
default: "transparent",
|
| ... |
... |
@@ -1502,6 +1790,36 @@ export const variableLookupTable = { |
|
1502
|
1790
|
"button-text-color-primary-selected":
|
|
1503
|
1791
|
"var(--button-text-color-primary-active)",
|
|
1504
|
1792
|
"button-text-color-selected": "var(--button-text-color-active)",
|
|
|
1793
|
+ "button-text-color-tor-light": "var(--color-gray-05)",
|
|
|
1794
|
+ "button-text-color-tor-dark": "var(--color-gray-100)",
|
|
|
1795
|
+ "button-text-color-tor": {
|
|
|
1796
|
+ light: "var(--button-text-color-tor-light)",
|
|
|
1797
|
+ dark: "var(--button-text-color-tor-dark)",
|
|
|
1798
|
+ prefersContrast: "var(--button-text-color-primary)",
|
|
|
1799
|
+ forcedColors: "var(--button-text-color-primary)",
|
|
|
1800
|
+ default:
|
|
|
1801
|
+ "light-dark(var(--button-text-color-tor-light), var(--button-text-color-tor-dark))",
|
|
|
1802
|
+ },
|
|
|
1803
|
+ "button-text-color-tor-hover-light": "var(--color-gray-05)",
|
|
|
1804
|
+ "button-text-color-tor-hover-dark": "var(--color-gray-100)",
|
|
|
1805
|
+ "button-text-color-tor-hover": {
|
|
|
1806
|
+ light: "var(--button-text-color-tor-hover-light)",
|
|
|
1807
|
+ dark: "var(--button-text-color-tor-hover-dark)",
|
|
|
1808
|
+ prefersContrast: "var(--button-text-color-primary-hover)",
|
|
|
1809
|
+ forcedColors: "var(--button-text-color-primary-hover)",
|
|
|
1810
|
+ default:
|
|
|
1811
|
+ "light-dark(var(--button-text-color-tor-hover-light), var(--button-text-color-tor-hover-dark))",
|
|
|
1812
|
+ },
|
|
|
1813
|
+ "button-text-color-tor-active-light": "var(--color-gray-05)",
|
|
|
1814
|
+ "button-text-color-tor-active-dark": "var(--color-gray-100)",
|
|
|
1815
|
+ "button-text-color-tor-active": {
|
|
|
1816
|
+ light: "var(--button-text-color-tor-active-light)",
|
|
|
1817
|
+ dark: "var(--button-text-color-tor-active-dark)",
|
|
|
1818
|
+ prefersContrast: "var(--button-text-color-primary-active)",
|
|
|
1819
|
+ forcedColors: "var(--button-text-color-primary-active)",
|
|
|
1820
|
+ default:
|
|
|
1821
|
+ "light-dark(var(--button-text-color-tor-active-light), var(--button-text-color-tor-active-dark))",
|
|
|
1822
|
+ },
|
|
1505
|
1823
|
"checkbox-margin-inline": "var(--space-small)",
|
|
1506
|
1824
|
"checkbox-size": "var(--size-item-small)",
|
|
1507
|
1825
|
"color-gray-20": "#f0f0f4",
|
| ... |
... |
@@ -1681,12 +1999,52 @@ export const variableLookupTable = { |
|
1681
|
1999
|
},
|
|
1682
|
2000
|
platform: { default: "SelectedItem" },
|
|
1683
|
2001
|
},
|
|
|
2002
|
+ "color-accent-tor-light": "var(--color-purple-60)",
|
|
|
2003
|
+ "color-accent-tor-dark": "var(--color-purple-30)",
|
|
|
2004
|
+ "color-accent-tor": {
|
|
|
2005
|
+ light: "var(--color-accent-tor-light)",
|
|
|
2006
|
+ dark: "var(--color-accent-tor-dark)",
|
|
|
2007
|
+ prefersContrast: "var(--color-accent-primary)",
|
|
|
2008
|
+ forcedColors: "var(--color-accent-primary)",
|
|
|
2009
|
+ default:
|
|
|
2010
|
+ "light-dark(var(--color-accent-tor-light), var(--color-accent-tor-dark))",
|
|
|
2011
|
+ },
|
|
|
2012
|
+ "color-accent-tor-hover-light": "var(--color-purple-70)",
|
|
|
2013
|
+ "color-accent-tor-hover-dark": "var(--color-purple-20)",
|
|
|
2014
|
+ "color-accent-tor-hover": {
|
|
|
2015
|
+ light: "var(--color-accent-tor-hover-light)",
|
|
|
2016
|
+ dark: "var(--color-accent-tor-hover-dark)",
|
|
|
2017
|
+ prefersContrast: "var(--color-accent-primary-hover)",
|
|
|
2018
|
+ forcedColors: "var(--color-accent-primary-hover)",
|
|
|
2019
|
+ default:
|
|
|
2020
|
+ "light-dark(var(--color-accent-tor-hover-light), var(--color-accent-tor-hover-dark))",
|
|
|
2021
|
+ },
|
|
|
2022
|
+ "color-accent-tor-active-light": "var(--color-purple-80)",
|
|
|
2023
|
+ "color-accent-tor-active-dark": "var(--color-purple-10)",
|
|
|
2024
|
+ "color-accent-tor-active": {
|
|
|
2025
|
+ light: "var(--color-accent-tor-active-light)",
|
|
|
2026
|
+ dark: "var(--color-accent-tor-active-dark)",
|
|
|
2027
|
+ prefersContrast: "var(--color-accent-primary-active)",
|
|
|
2028
|
+ forcedColors: "var(--color-accent-primary-active)",
|
|
|
2029
|
+ default:
|
|
|
2030
|
+ "light-dark(var(--color-accent-tor-active-light), var(--color-accent-tor-active-dark))",
|
|
|
2031
|
+ },
|
|
1684
|
2032
|
"focus-outline":
|
|
1685
|
2033
|
"var(--focus-outline-width) solid var(--focus-outline-color)",
|
|
1686
|
2034
|
"focus-outline-color": {
|
|
1687
|
2035
|
default: "var(--color-accent-primary)",
|
|
1688
|
2036
|
forcedColors: "var(--text-color)",
|
|
1689
|
2037
|
},
|
|
|
2038
|
+ "focus-outline-color-tor-light": "var(--color-accent-tor-light)",
|
|
|
2039
|
+ "focus-outline-color-tor-dark": "var(--color-accent-tor-dark)",
|
|
|
2040
|
+ "focus-outline-color-tor": {
|
|
|
2041
|
+ light: "var(--focus-outline-color-tor-light)",
|
|
|
2042
|
+ dark: "var(--focus-outline-color-tor-dark)",
|
|
|
2043
|
+ prefersContrast: "var(--focus-outline-color)",
|
|
|
2044
|
+ forcedColors: "var(--focus-outline-color)",
|
|
|
2045
|
+ default:
|
|
|
2046
|
+ "light-dark(var(--focus-outline-color-tor-light), var(--focus-outline-color-tor-dark))",
|
|
|
2047
|
+ },
|
|
1690
|
2048
|
"focus-outline-inset": "calc(-1 * var(--focus-outline-width))",
|
|
1691
|
2049
|
"focus-outline-offset": "2px",
|
|
1692
|
2050
|
"focus-outline-width": "2px",
|
| ... |
... |
@@ -1786,6 +2144,36 @@ export const variableLookupTable = { |
|
1786
|
2144
|
brand: { default: "var(--link-color)" },
|
|
1787
|
2145
|
platform: { default: "var(--link-color)" },
|
|
1788
|
2146
|
},
|
|
|
2147
|
+ "link-color-tor-light": "var(--color-accent-tor-light)",
|
|
|
2148
|
+ "link-color-tor-dark": "var(--color-accent-tor-dark)",
|
|
|
2149
|
+ "link-color-tor": {
|
|
|
2150
|
+ light: "var(--link-color-tor-light)",
|
|
|
2151
|
+ dark: "var(--link-color-tor-dark)",
|
|
|
2152
|
+ prefersContrast: "var(--link-color)",
|
|
|
2153
|
+ forcedColors: "var(--link-color)",
|
|
|
2154
|
+ default:
|
|
|
2155
|
+ "light-dark(var(--link-color-tor-light), var(--link-color-tor-dark))",
|
|
|
2156
|
+ },
|
|
|
2157
|
+ "link-color-tor-hover-light": "var(--color-accent-tor-hover-light)",
|
|
|
2158
|
+ "link-color-tor-hover-dark": "var(--color-accent-tor-hover-dark)",
|
|
|
2159
|
+ "link-color-tor-hover": {
|
|
|
2160
|
+ light: "var(--link-color-tor-hover-light)",
|
|
|
2161
|
+ dark: "var(--link-color-tor-hover-dark)",
|
|
|
2162
|
+ prefersContrast: "var(--link-color-hover)",
|
|
|
2163
|
+ forcedColors: "var(--link-color-hover)",
|
|
|
2164
|
+ default:
|
|
|
2165
|
+ "light-dark(var(--link-color-tor-hover-light), var(--link-color-tor-hover-dark))",
|
|
|
2166
|
+ },
|
|
|
2167
|
+ "link-color-tor-active-light": "var(--color-accent-tor-active-light)",
|
|
|
2168
|
+ "link-color-tor-active-dark": "var(--color-accent-tor-active-dark)",
|
|
|
2169
|
+ "link-color-tor-active": {
|
|
|
2170
|
+ light: "var(--link-color-tor-active-light)",
|
|
|
2171
|
+ dark: "var(--link-color-tor-active-dark)",
|
|
|
2172
|
+ prefersContrast: "var(--link-color-active)",
|
|
|
2173
|
+ forcedColors: "var(--link-color-active)",
|
|
|
2174
|
+ default:
|
|
|
2175
|
+ "light-dark(var(--link-color-tor-active-light), var(--link-color-tor-active-dark))",
|
|
|
2176
|
+ },
|
|
1789
|
2177
|
"link-focus-outline-offset": "1px",
|
|
1790
|
2178
|
"outline-color-error": {
|
|
1791
|
2179
|
light: "var(--color-red-70)",
|
| ... |
... |
@@ -1889,4 +2277,14 @@ export const variableLookupTable = { |
|
1889
|
2277
|
default: "var(--text-color)",
|
|
1890
|
2278
|
prefersContrast: "SelectedItemText",
|
|
1891
|
2279
|
},
|
|
|
2280
|
+ "text-color-tor-light": "var(--color-purple-60)",
|
|
|
2281
|
+ "text-color-tor-dark": "var(--color-purple-20)",
|
|
|
2282
|
+ "text-color-tor": {
|
|
|
2283
|
+ light: "var(--text-color-tor-light)",
|
|
|
2284
|
+ dark: "var(--text-color-tor-dark)",
|
|
|
2285
|
+ prefersContrast: "inherit",
|
|
|
2286
|
+ forcedColors: "inherit",
|
|
|
2287
|
+ default:
|
|
|
2288
|
+ "light-dark(var(--text-color-tor-light), var(--text-color-tor-dark))",
|
|
|
2289
|
+ },
|
|
1892
|
2290
|
}; |
toolkit/themes/shared/design-system/src/design-tokens.json
| ... |
... |
@@ -325,6 +325,42 @@ |
|
325
|
325
|
},
|
|
326
|
326
|
"selected": {
|
|
327
|
327
|
"value": "{button.background.color.active}"
|
|
|
328
|
+ },
|
|
|
329
|
+ "tor": {
|
|
|
330
|
+ "light": { "value": "{color.accent.tor.light}" },
|
|
|
331
|
+ "dark": { "value": "{color.accent.tor.dark}" },
|
|
|
332
|
+ "@base": {
|
|
|
333
|
+ "value": {
|
|
|
334
|
+ "light": "{button.background.color.tor.light}",
|
|
|
335
|
+ "dark": "{button.background.color.tor.dark}",
|
|
|
336
|
+ "prefersContrast": "{button.background.color.primary.@base}",
|
|
|
337
|
+ "forcedColors": "{button.background.color.primary.@base}"
|
|
|
338
|
+ }
|
|
|
339
|
+ },
|
|
|
340
|
+ "hover": {
|
|
|
341
|
+ "light": { "value": "{color.accent.tor.hover.light}" },
|
|
|
342
|
+ "dark": { "value": "{color.accent.tor.hover.dark}" },
|
|
|
343
|
+ "@base": {
|
|
|
344
|
+ "value": {
|
|
|
345
|
+ "light": "{button.background.color.tor.hover.light}",
|
|
|
346
|
+ "dark": "{button.background.color.tor.hover.dark}",
|
|
|
347
|
+ "prefersContrast": "{button.background.color.primary.hover}",
|
|
|
348
|
+ "forcedColors": "{button.background.color.primary.hover}"
|
|
|
349
|
+ }
|
|
|
350
|
+ }
|
|
|
351
|
+ },
|
|
|
352
|
+ "active": {
|
|
|
353
|
+ "light": { "value": "{color.accent.tor.active.light}" },
|
|
|
354
|
+ "dark": { "value": "{color.accent.tor.active.dark}" },
|
|
|
355
|
+ "@base": {
|
|
|
356
|
+ "value": {
|
|
|
357
|
+ "light": "{button.background.color.tor.active.light}",
|
|
|
358
|
+ "dark": "{button.background.color.tor.active.dark}",
|
|
|
359
|
+ "prefersContrast": "{button.background.color.primary.active}",
|
|
|
360
|
+ "forcedColors": "{button.background.color.primary.active}"
|
|
|
361
|
+ }
|
|
|
362
|
+ }
|
|
|
363
|
+ }
|
|
328
|
364
|
}
|
|
329
|
365
|
}
|
|
330
|
366
|
},
|
| ... |
... |
@@ -633,6 +669,42 @@ |
|
633
|
669
|
},
|
|
634
|
670
|
"selected": {
|
|
635
|
671
|
"value": "{button.text.color.active}"
|
|
|
672
|
+ },
|
|
|
673
|
+ "tor": {
|
|
|
674
|
+ "light": { "value": "{color.gray.05}" },
|
|
|
675
|
+ "dark": { "value": "{color.gray.100}" },
|
|
|
676
|
+ "@base": {
|
|
|
677
|
+ "value": {
|
|
|
678
|
+ "light": "{button.text.color.tor.light}",
|
|
|
679
|
+ "dark": "{button.text.color.tor.dark}",
|
|
|
680
|
+ "prefersContrast": "{button.text.color.primary.@base}",
|
|
|
681
|
+ "forcedColors": "{button.text.color.primary.@base}"
|
|
|
682
|
+ }
|
|
|
683
|
+ },
|
|
|
684
|
+ "hover": {
|
|
|
685
|
+ "light": { "value": "{color.gray.05}" },
|
|
|
686
|
+ "dark": { "value": "{color.gray.100}" },
|
|
|
687
|
+ "@base": {
|
|
|
688
|
+ "value": {
|
|
|
689
|
+ "light": "{button.text.color.tor.hover.light}",
|
|
|
690
|
+ "dark": "{button.text.color.tor.hover.dark}",
|
|
|
691
|
+ "prefersContrast": "{button.text.color.primary.hover}",
|
|
|
692
|
+ "forcedColors": "{button.text.color.primary.hover}"
|
|
|
693
|
+ }
|
|
|
694
|
+ }
|
|
|
695
|
+ },
|
|
|
696
|
+ "active": {
|
|
|
697
|
+ "light": { "value": "{color.gray.05}" },
|
|
|
698
|
+ "dark": { "value": "{color.gray.100}" },
|
|
|
699
|
+ "@base": {
|
|
|
700
|
+ "value": {
|
|
|
701
|
+ "light": "{button.text.color.tor.active.light}",
|
|
|
702
|
+ "dark": "{button.text.color.tor.active.dark}",
|
|
|
703
|
+ "prefersContrast": "{button.text.color.primary.active}",
|
|
|
704
|
+ "forcedColors": "{button.text.color.primary.active}"
|
|
|
705
|
+ }
|
|
|
706
|
+ }
|
|
|
707
|
+ }
|
|
636
|
708
|
}
|
|
637
|
709
|
}
|
|
638
|
710
|
}
|
| ... |
... |
@@ -1138,18 +1210,68 @@ |
|
1138
|
1210
|
}
|
|
1139
|
1211
|
}
|
|
1140
|
1212
|
}
|
|
|
1213
|
+ },
|
|
|
1214
|
+ "tor": {
|
|
|
1215
|
+ "light": { "value": "{color.purple.60}" },
|
|
|
1216
|
+ "dark": { "value": "{color.purple.30}" },
|
|
|
1217
|
+ "@base": {
|
|
|
1218
|
+ "value": {
|
|
|
1219
|
+ "light": "{color.accent.tor.light}",
|
|
|
1220
|
+ "dark": "{color.accent.tor.dark}",
|
|
|
1221
|
+ "prefersContrast": "{color.accent.primary.@base}",
|
|
|
1222
|
+ "forcedColors": "{color.accent.primary.@base}"
|
|
|
1223
|
+ }
|
|
|
1224
|
+ },
|
|
|
1225
|
+ "hover": {
|
|
|
1226
|
+ "light": { "value": "{color.purple.70}" },
|
|
|
1227
|
+ "dark": { "value": "{color.purple.20}" },
|
|
|
1228
|
+ "@base": {
|
|
|
1229
|
+ "value": {
|
|
|
1230
|
+ "light": "{color.accent.tor.hover.light}",
|
|
|
1231
|
+ "dark": "{color.accent.tor.hover.dark}",
|
|
|
1232
|
+ "prefersContrast": "{color.accent.primary.hover}",
|
|
|
1233
|
+ "forcedColors": "{color.accent.primary.hover}"
|
|
|
1234
|
+ }
|
|
|
1235
|
+ }
|
|
|
1236
|
+ },
|
|
|
1237
|
+ "active": {
|
|
|
1238
|
+ "light": { "value": "{color.purple.80}" },
|
|
|
1239
|
+ "dark": { "value": "{color.purple.10}" },
|
|
|
1240
|
+ "@base": {
|
|
|
1241
|
+ "value": {
|
|
|
1242
|
+ "light": "{color.accent.tor.active.light}",
|
|
|
1243
|
+ "dark": "{color.accent.tor.active.dark}",
|
|
|
1244
|
+ "prefersContrast": "{color.accent.primary.active}",
|
|
|
1245
|
+ "forcedColors": "{color.accent.primary.active}"
|
|
|
1246
|
+ }
|
|
|
1247
|
+ }
|
|
|
1248
|
+ }
|
|
1141
|
1249
|
}
|
|
1142
|
1250
|
}
|
|
1143
|
1251
|
},
|
|
1144
|
1252
|
"focus": {
|
|
1145
|
1253
|
"outline": {
|
|
1146
|
1254
|
"@base": {
|
|
1147
|
|
- "value": "{focus.outline.width} solid {focus.outline.color}"
|
|
|
1255
|
+ "value": "{focus.outline.width} solid {focus.outline.color.@base}"
|
|
1148
|
1256
|
},
|
|
1149
|
1257
|
"color": {
|
|
1150
|
|
- "value": {
|
|
1151
|
|
- "default": "{color.accent.primary.@base}",
|
|
1152
|
|
- "forcedColors": "{text.color.@base}"
|
|
|
1258
|
+ "@base": {
|
|
|
1259
|
+ "value": {
|
|
|
1260
|
+ "default": "{color.accent.primary.@base}",
|
|
|
1261
|
+ "forcedColors": "{text.color.@base}"
|
|
|
1262
|
+ }
|
|
|
1263
|
+ },
|
|
|
1264
|
+ "tor": {
|
|
|
1265
|
+ "light": { "value": "{color.accent.tor.light}" },
|
|
|
1266
|
+ "dark": { "value": "{color.accent.tor.dark}" },
|
|
|
1267
|
+ "@base": {
|
|
|
1268
|
+ "value": {
|
|
|
1269
|
+ "light": "{focus.outline.color.tor.light}",
|
|
|
1270
|
+ "dark": "{focus.outline.color.tor.dark}",
|
|
|
1271
|
+ "prefersContrast": "{focus.outline.color.@base}",
|
|
|
1272
|
+ "forcedColors": "{focus.outline.color.@base}"
|
|
|
1273
|
+ }
|
|
|
1274
|
+ }
|
|
1153
|
1275
|
}
|
|
1154
|
1276
|
},
|
|
1155
|
1277
|
"inset": {
|
| ... |
... |
@@ -1385,6 +1507,42 @@ |
|
1385
|
1507
|
"default": "{link.color.@base}"
|
|
1386
|
1508
|
}
|
|
1387
|
1509
|
}
|
|
|
1510
|
+ },
|
|
|
1511
|
+ "tor": {
|
|
|
1512
|
+ "light": { "value": "{color.accent.tor.light}" },
|
|
|
1513
|
+ "dark": { "value": "{color.accent.tor.dark}" },
|
|
|
1514
|
+ "@base": {
|
|
|
1515
|
+ "value": {
|
|
|
1516
|
+ "light": "{link.color.tor.light}",
|
|
|
1517
|
+ "dark": "{link.color.tor.dark}",
|
|
|
1518
|
+ "prefersContrast": "{link.color.@base}",
|
|
|
1519
|
+ "forcedColors": "{link.color.@base}"
|
|
|
1520
|
+ }
|
|
|
1521
|
+ },
|
|
|
1522
|
+ "hover": {
|
|
|
1523
|
+ "light": { "value": "{color.accent.tor.hover.light}" },
|
|
|
1524
|
+ "dark": { "value": "{color.accent.tor.hover.dark}" },
|
|
|
1525
|
+ "@base": {
|
|
|
1526
|
+ "value": {
|
|
|
1527
|
+ "light": "{link.color.tor.hover.light}",
|
|
|
1528
|
+ "dark": "{link.color.tor.hover.dark}",
|
|
|
1529
|
+ "prefersContrast": "{link.color.hover}",
|
|
|
1530
|
+ "forcedColors": "{link.color.hover}"
|
|
|
1531
|
+ }
|
|
|
1532
|
+ }
|
|
|
1533
|
+ },
|
|
|
1534
|
+ "active": {
|
|
|
1535
|
+ "light": { "value": "{color.accent.tor.active.light}" },
|
|
|
1536
|
+ "dark": { "value": "{color.accent.tor.active.dark}" },
|
|
|
1537
|
+ "@base": {
|
|
|
1538
|
+ "value": {
|
|
|
1539
|
+ "light": "{link.color.tor.active.light}",
|
|
|
1540
|
+ "dark": "{link.color.tor.active.dark}",
|
|
|
1541
|
+ "prefersContrast": "{link.color.active}",
|
|
|
1542
|
+ "forcedColors": "{link.color.active}"
|
|
|
1543
|
+ }
|
|
|
1544
|
+ }
|
|
|
1545
|
+ }
|
|
1388
|
1546
|
}
|
|
1389
|
1547
|
},
|
|
1390
|
1548
|
"focus": {
|
| ... |
... |
@@ -1619,6 +1777,18 @@ |
|
1619
|
1777
|
}
|
|
1620
|
1778
|
}
|
|
1621
|
1779
|
}
|
|
|
1780
|
+ },
|
|
|
1781
|
+ "tor": {
|
|
|
1782
|
+ "light": { "value": "{color.purple.60}" },
|
|
|
1783
|
+ "dark": { "value": "{color.purple.20}" },
|
|
|
1784
|
+ "@base": {
|
|
|
1785
|
+ "value": {
|
|
|
1786
|
+ "light": "{text.color.tor.light}",
|
|
|
1787
|
+ "dark": "{text.color.tor.dark}",
|
|
|
1788
|
+ "prefersContrast": "inherit",
|
|
|
1789
|
+ "forcedColors": "inherit"
|
|
|
1790
|
+ }
|
|
|
1791
|
+ }
|
|
1622
|
1792
|
}
|
|
1623
|
1793
|
}
|
|
1624
|
1794
|
}
|
toolkit/themes/shared/desktop-jar.inc.mn
| ... |
... |
@@ -49,7 +49,7 @@ |
|
49
|
49
|
skin/classic/global/tabbox.css (../../shared/tabbox.css)
|
|
50
|
50
|
skin/classic/global/toolbar.css (../../shared/toolbar.css)
|
|
51
|
51
|
skin/classic/global/toolbarbutton.css (../../shared/toolbarbutton.css)
|
|
52
|
|
- skin/classic/global/tor-colors.css (../../shared/tor-colors.css)
|
|
|
52
|
+ skin/classic/global/tor-common.css (../../shared/tor-common.css)
|
|
53
|
53
|
skin/classic/global/tree/tree.css (../../shared/tree/tree.css)
|
|
54
|
54
|
skin/classic/global/dirListing/dirListing.css (../../shared/dirListing/dirListing.css)
|
|
55
|
55
|
#ifdef XP_MACOSX
|
toolkit/themes/shared/tor-colors.css
deleted
|
1
|
|
-@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
|
2
|
|
-
|
|
3
|
|
-:root {
|
|
4
|
|
- /* On light backgrounds. */
|
|
5
|
|
- --tor-accent-color-light: var(--color-purple-60);
|
|
6
|
|
- --tor-accent-color-hover-light: var(--color-purple-70);
|
|
7
|
|
- --tor-accent-color-active-light: var(--color-purple-80);
|
|
8
|
|
- /* Color for text on --background-color-canvas. */
|
|
9
|
|
- --tor-text-color-light: var(--color-purple-60);
|
|
10
|
|
- /* Buttons. */
|
|
11
|
|
- --tor-button-text-color-light: var(--color-gray-05);
|
|
12
|
|
- --tor-button-text-color-hover-light: var(--color-gray-05);
|
|
13
|
|
- --tor-button-text-color-active-light: var(--color-gray-05);
|
|
14
|
|
- --tor-button-background-color-light: var(--tor-accent-color-light);
|
|
15
|
|
- --tor-button-background-color-hover-light: var(--tor-accent-color-hover-light);
|
|
16
|
|
- --tor-button-background-color-active-light: var(--tor-accent-color-active-light);
|
|
17
|
|
- --tor-focus-outline-color-light: var(--tor-accent-color-light);
|
|
18
|
|
- /* Links. */
|
|
19
|
|
- --tor-link-color-light: var(--tor-accent-color-light);
|
|
20
|
|
- --tor-link-color-hover-light: var(--tor-accent-color-hover-light);
|
|
21
|
|
- --tor-link-color-active-light: var(--tor-accent-color-active-light);
|
|
22
|
|
-
|
|
23
|
|
- /* On dark backgrounds. */
|
|
24
|
|
- --tor-accent-color-dark: var(--color-purple-30);
|
|
25
|
|
- --tor-accent-color-hover-dark: var(--color-purple-20);
|
|
26
|
|
- --tor-accent-color-active-dark: var(--color-purple-10);
|
|
27
|
|
- /* Color for text on --background-color-canvas. */
|
|
28
|
|
- --tor-text-color-dark: var(--color-purple-20);
|
|
29
|
|
- /* Buttons. */
|
|
30
|
|
- --tor-button-text-color-dark: var(--color-gray-100);
|
|
31
|
|
- --tor-button-text-color-hover-dark: var(--color-gray-100);
|
|
32
|
|
- --tor-button-text-color-active-dark: var(--color-gray-100);
|
|
33
|
|
- --tor-button-background-color-dark: var(--tor-accent-color-dark);
|
|
34
|
|
- --tor-button-background-color-hover-dark: var(--tor-accent-color-hover-dark);
|
|
35
|
|
- --tor-button-background-color-active-dark: var(--tor-accent-color-active-dark);
|
|
36
|
|
- --tor-focus-outline-color-dark: var(--tor-accent-color-dark);
|
|
37
|
|
- /* Links. */
|
|
38
|
|
- --tor-link-color-dark: var(--tor-accent-color-dark);
|
|
39
|
|
- --tor-link-color-hover-dark: var(--tor-accent-color-hover-dark);
|
|
40
|
|
- --tor-link-color-active-dark: var(--tor-accent-color-active-dark);
|
|
41
|
|
-
|
|
42
|
|
- /* Generic colors that adapt to theme. */
|
|
43
|
|
- --tor-accent-color: light-dark(var(--tor-accent-color-light), var(--tor-accent-color-dark));
|
|
44
|
|
- --tor-accent-color-hover: light-dark(var(--tor-accent-color-hover-light), var(--tor-accent-color-hover-dark));
|
|
45
|
|
- --tor-accent-color-active: light-dark(var(--tor-accent-color-active-light), var(--tor-accent-color-active-dark));
|
|
46
|
|
- --tor-text-color: light-dark(var(--tor-text-color-light), var(--tor-text-color-dark));
|
|
47
|
|
- --tor-button-text-color: light-dark(var(--tor-button-text-color-light), var(--tor-button-text-color-dark));
|
|
48
|
|
- --tor-button-text-color-hover: light-dark(var(--tor-button-text-color-hover-light), var(--tor-button-text-color-hover-dark));
|
|
49
|
|
- --tor-button-text-color-active: light-dark(var(--tor-button-text-color-active-light), var(--tor-button-text-color-active-dark));
|
|
50
|
|
- --tor-button-background-color: light-dark(var(--tor-button-background-color-light), var(--tor-button-background-color-dark));
|
|
51
|
|
- --tor-button-background-color-hover: light-dark(var(--tor-button-background-color-hover-light), var(--tor-button-background-color-hover-dark));
|
|
52
|
|
- --tor-button-background-color-active: light-dark(var(--tor-button-background-color-active-light), var(--tor-button-background-color-active-dark));
|
|
53
|
|
- --tor-focus-outline-color: light-dark(var(--tor-focus-outline-color-light), var(--tor-focus-outline-color-dark));
|
|
54
|
|
- --tor-link-color: light-dark(var(--tor-link-color-light), var(--tor-link-color-dark));
|
|
55
|
|
- --tor-link-color-hover: light-dark(var(--tor-link-color-hover-light), var(--tor-link-color-hover-dark));
|
|
56
|
|
- --tor-link-color-active: light-dark(var(--tor-link-color-active-light), var(--tor-link-color-active-dark));
|
|
57
|
|
-}
|
|
58
|
|
-
|
|
59
|
|
-@media ((prefers-contrast) or (forced-colors)) {
|
|
60
|
|
- :root {
|
|
61
|
|
- /* Use Firefox design system accent colors. */
|
|
62
|
|
- --tor-accent-color: var(--color-accent-primary);
|
|
63
|
|
- --tor-accent-color-hover: var(--color-accent-primary-hover);
|
|
64
|
|
- --tor-accent-color-active: var(--color-accent-primary-active);
|
|
65
|
|
-
|
|
66
|
|
- /* Match surrounding text. */
|
|
67
|
|
- --tor-text-color: currentColor;
|
|
68
|
|
-
|
|
69
|
|
- /* Use Firefox design system primary button colors. */
|
|
70
|
|
- --tor-button-text-color: var(--button-text-color-primary);
|
|
71
|
|
- --tor-button-text-color-hover: var(--button-text-color-primary-hover);
|
|
72
|
|
- --tor-button-text-color-active: var(--button-text-color-primary-active);
|
|
73
|
|
- --tor-button-background-color: var(--button-background-color-primary);
|
|
74
|
|
- --tor-button-background-color-hover: var(--button-background-color-primary-hover);
|
|
75
|
|
- --tor-button-background-color-active: var(--button-background-color-primary-active);
|
|
76
|
|
-
|
|
77
|
|
- /* Use Firefox design system default colors. */
|
|
78
|
|
- --tor-focus-outline-color: var(--focus-outline-color);
|
|
79
|
|
- --tor-link-color: var(--link-color);
|
|
80
|
|
- --tor-link-color-hover: var(--link-color-hover);
|
|
81
|
|
- --tor-link-color-active: var(--link-color-active);
|
|
82
|
|
- }
|
|
83
|
|
-}
|
|
84
|
|
-
|
|
85
|
|
-/* Has a higher specificity than `button` and `button.primary`. */
|
|
86
|
|
-button.tor-button:is(*, .primary),
|
|
87
|
|
-xul|button.tor-button:is(*, [default]),
|
|
88
|
|
-.tor-button {
|
|
89
|
|
- color: var(--tor-button-text-color);
|
|
90
|
|
- background-color: var(--tor-button-background-color);
|
|
91
|
|
-}
|
|
92
|
|
-
|
|
93
|
|
-:is(button.tor-button:is(*, .primary), xul|button.tor-button:is(*, [default]), .tor-button):not([disabled]):hover {
|
|
94
|
|
- color: var(--tor-button-text-color-hover);
|
|
95
|
|
- background-color: var(--tor-button-background-color-hover);
|
|
96
|
|
-}
|
|
97
|
|
-
|
|
98
|
|
-:is(button.tor-button:is(*, .primary), xul|button.tor-button:is(*, [default]), .tor-button):not([disabled]):hover:active {
|
|
99
|
|
- color: var(--tor-button-text-color-active);
|
|
100
|
|
- background-color: var(--tor-button-background-color-active);
|
|
101
|
|
-}
|
|
102
|
|
-
|
|
103
|
|
-:is(button.tor-button:is(*, .primary), xul|button.tor-button:is(*, [default]), .tor-button):focus-visible {
|
|
104
|
|
- outline-color: var(--tor-focus-outline-color);
|
|
105
|
|
-} |
toolkit/themes/shared/tor-common.css
|
|
1
|
+@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
|
|
2
|
+
|
|
|
3
|
+/* Has a higher specificity than `button` and `button.primary`. */
|
|
|
4
|
+button.tor-button:is(*, .primary),
|
|
|
5
|
+xul|button.tor-button:is(*, [default]),
|
|
|
6
|
+.tor-button {
|
|
|
7
|
+ color: var(--button-text-color-tor);
|
|
|
8
|
+ background-color: var(--button-background-color-tor);
|
|
|
9
|
+}
|
|
|
10
|
+
|
|
|
11
|
+:is(button.tor-button:is(*, .primary), xul|button.tor-button:is(*, [default]), .tor-button):not([disabled]):hover {
|
|
|
12
|
+ color: var(--button-text-color-tor-hover);
|
|
|
13
|
+ background-color: var(--button-background-color-tor-hover);
|
|
|
14
|
+}
|
|
|
15
|
+
|
|
|
16
|
+:is(button.tor-button:is(*, .primary), xul|button.tor-button:is(*, [default]), .tor-button):not([disabled]):hover:active {
|
|
|
17
|
+ color: var(--button-text-color-tor-active);
|
|
|
18
|
+ background-color: var(--button-background-color-tor-active);
|
|
|
19
|
+}
|
|
|
20
|
+
|
|
|
21
|
+:is(button.tor-button:is(*, .primary), xul|button.tor-button:is(*, [default]), .tor-button):focus-visible {
|
|
|
22
|
+ outline-color: var(--focus-outline-color-tor);
|
|
|
23
|
+} |
|