Skip to content

Commit a807a00

Browse files
andrewbranchandrewbranch
committed
Use CSS variable fallbacks instead of default values on :root
1 parent 5f04a84 commit a807a00

File tree

9 files changed

+90
-184
lines changed

9 files changed

+90
-184
lines changed

‎README.md‎

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -274,26 +274,44 @@ The generated HTML has ample stable class names, and you can add your own with t
274274

275275
### Variables
276276

277-
The styles also include a few CSS variables you can override. The defaults are:
277+
The styles also include a few CSS variables you can define to override defaults. The included CSS is written as:
278278

279279
```css
280280
.grvsc-container {
281-
--grvsc-padding-v: 1rem;
282-
--grvsc-padding-h: 1.5rem;
283-
--grvsc-padding-top: var(--grvsc-padding-v);
284-
--grvsc-padding-right: var(--grvsc-padding-h);
285-
--grvsc-padding-bottom: var(--grvsc-padding-v);
286-
--grvsc-padding-left: var(--grvsc-padding-h);
287-
--grvsc-border-radius: 8px;
288-
289-
/* Line highlighting: see next section */
290-
--grvsc-line-highlighted-background-color: transparent;
291-
--grvsc-line-highlighted-border-width: 4px;
292-
--grvsc-line-highlighted-border-color: transparent;
281+
padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
282+
padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
283+
border-radius: var(--grvsc-border-radius, 8px);
284+
}
285+
286+
.grvsc-line {
287+
padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
288+
padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
289+
}
290+
291+
/* See “Line Highlighting” section for details */
292+
.grvsc-line-highlighted {
293+
background-color: var(--grvsc-line-highlighted-background-color, transparent);
294+
box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);
293295
}
294296
```
295297

296-
The default values are set on `:root`, so you can set them on `.grvsc-container`, `pre`, your own `wrapperClassName`, the class name matching the theme, or generally any selector more specific than `:root`.
298+
The padding values are written with cascading fallbacks. As an example, let’s consider the top and bottom padding of `.grvsc-container`. Each is set to its own CSS variable, `--grvsc-padding-top` and `--grvsc-padding-bottom`, respectively. Neither of these is defined by default, so it uses the value of its fallback, which is another CSS variable, `--grvsc-padding-v`, with another fallback, `1rem`. Since `--grvsc-padding-v` is also not defined by default, both padding properties will evaluate to the final fallback, `1rem`.
299+
300+
So, if you want to adjust the vertical padding, you could add the following to your own CSS:
301+
302+
```css
303+
:root {
304+
--grvsc-padding-v: 20px; /* Adjust padding-top and padding-bottom */
305+
}
306+
```
307+
308+
If you want to adjust the padding-top or padding-bottom independently, you can use those variables:
309+
310+
```css
311+
:root {
312+
--grvsc-padding-top: 24px; /* Adjust padding-top by itself */
313+
}
314+
```
297315

298316
### Tweaking or replacing theme colors
299317

@@ -348,10 +366,10 @@ const zero = [0, 1, 2, 3, 4, 5]
348366
You need to pick your own background color, and optionally a left border width and color, for the highlighted lines. This can be done by setting CSS variables:
349367

350368
```css
351-
.grvsc-container {
369+
:root {
352370
--grvsc-line-highlighted-background-color: rgba(255, 255, 255, 0.2); /* default: transparent */
353371
--grvsc-line-highlighted-border-color: rgba(255, 255, 255, 0.5); /* default: transparent */
354-
--grvsc-line-highlighted-border-width: 2px; /* default: 2px */
372+
--grvsc-line-highlighted-border-width: 2px; /* default: 4px */
355373
}
356374
```
357375

‎styles.css‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,12 @@
1-
:root {
2-
--grvsc-padding-v: 1rem;
3-
--grvsc-padding-h: 1.5rem;
4-
--grvsc-padding-top: var(--grvsc-padding-v);
5-
--grvsc-padding-right: var(--grvsc-padding-h);
6-
--grvsc-padding-bottom: var(--grvsc-padding-v);
7-
--grvsc-padding-left: var(--grvsc-padding-h);
8-
--grvsc-border-radius: 8px;
9-
10-
--grvsc-line-highlighted-background-color: transparent;
11-
--grvsc-line-highlighted-border-width: 4px;
12-
--grvsc-line-highlighted-border-color: transparent;
13-
}
14-
151
.grvsc-container {
162
overflow: auto;
173
-webkit-overflow-scrolling: touch;
184
padding-top: 1rem;
19-
padding-top: var(--grvsc-padding-top);
5+
padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
206
padding-bottom: 1rem;
21-
padding-bottom: var(--grvsc-padding-bottom);
7+
padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
228
border-radius: 8px;
23-
border-radius: var(--grvsc-border-radius);
9+
border-radius: var(--grvsc-border-radius, 8px);
2410
font-feature-settings: normal;
2511
}
2612

@@ -34,12 +20,12 @@
3420
box-sizing: border-box;
3521
width: 100%;
3622
padding-left: 1.5rem;
37-
padding-left: var(--grvsc-padding-left);
23+
padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
3824
padding-right: 1.5rem;
39-
padding-right: var(--grvsc-padding-right);
25+
padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
4026
}
4127

4228
.grvsc-line-highlighted {
43-
background-color: var(--grvsc-line-highlighted-background-color);
44-
box-shadow: inset var(--grvsc-line-highlighted-border-width) 0 0 0 var(--grvsc-line-highlighted-border-color);
29+
background-color: var(--grvsc-line-highlighted-background-color, transparent);
30+
box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);
4531
}

‎test/integration/baselines/bug-37.html‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,15 @@
1010
<span class="grvsc-line"><span class="mtk1"> </span><span class="mtk17">&#x3C;/</span><span class="mtk4">rdf:RDF</span><span class="mtk17">></span></span>
1111
<span class="grvsc-line"><span class="mtk17">&#x3C;/</span><span class="mtk4">x:xmpmeta</span><span class="mtk17">></span></span></code></pre>
1212
<style class="grvsc-styles">
13-
:root {
14-
--grvsc-padding-v: 1rem;
15-
--grvsc-padding-h: 1.5rem;
16-
--grvsc-padding-top: var(--grvsc-padding-v);
17-
--grvsc-padding-right: var(--grvsc-padding-h);
18-
--grvsc-padding-bottom: var(--grvsc-padding-v);
19-
--grvsc-padding-left: var(--grvsc-padding-h);
20-
--grvsc-border-radius: 8px;
21-
22-
--grvsc-line-highlighted-background-color: transparent;
23-
--grvsc-line-highlighted-border-width: 4px;
24-
--grvsc-line-highlighted-border-color: transparent;
25-
}
26-
2713
.grvsc-container {
2814
overflow: auto;
2915
-webkit-overflow-scrolling: touch;
3016
padding-top: 1rem;
31-
padding-top: var(--grvsc-padding-top);
17+
padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
3218
padding-bottom: 1rem;
33-
padding-bottom: var(--grvsc-padding-bottom);
19+
padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
3420
border-radius: 8px;
35-
border-radius: var(--grvsc-border-radius);
21+
border-radius: var(--grvsc-border-radius, 8px);
3622
font-feature-settings: normal;
3723
}
3824

@@ -46,14 +32,14 @@
4632
box-sizing: border-box;
4733
width: 100%;
4834
padding-left: 1.5rem;
49-
padding-left: var(--grvsc-padding-left);
35+
padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
5036
padding-right: 1.5rem;
51-
padding-right: var(--grvsc-padding-right);
37+
padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
5238
}
5339

5440
.grvsc-line-highlighted {
55-
background-color: var(--grvsc-line-highlighted-background-color);
56-
box-shadow: inset var(--grvsc-line-highlighted-border-width) 0 0 0 var(--grvsc-line-highlighted-border-color);
41+
background-color: var(--grvsc-line-highlighted-background-color, transparent);
42+
box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);
5743
}
5844

5945
.default-dark {

‎test/integration/baselines/code-fence-meta.html‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,15 @@
11
<pre class="grvsc-container test-wrapper default-dark" data-language="js" data-index="0"><code class="grvsc-code"><span class="grvsc-line grvsc-line-highlighted"><span class="mtk3">// should be highlighted</span></span></code></pre>
22
<pre class="grvsc-container test-wrapper js-test default-dark" data-language="js" data-index="1"><code class="grvsc-code"><span class="grvsc-line"><span class="mtk3">// should not be highlighted</span></span></code></pre>
33
<style class="grvsc-styles">
4-
:root {
5-
--grvsc-padding-v: 1rem;
6-
--grvsc-padding-h: 1.5rem;
7-
--grvsc-padding-top: var(--grvsc-padding-v);
8-
--grvsc-padding-right: var(--grvsc-padding-h);
9-
--grvsc-padding-bottom: var(--grvsc-padding-v);
10-
--grvsc-padding-left: var(--grvsc-padding-h);
11-
--grvsc-border-radius: 8px;
12-
13-
--grvsc-line-highlighted-background-color: transparent;
14-
--grvsc-line-highlighted-border-width: 4px;
15-
--grvsc-line-highlighted-border-color: transparent;
16-
}
17-
184
.grvsc-container {
195
overflow: auto;
206
-webkit-overflow-scrolling: touch;
217
padding-top: 1rem;
22-
padding-top: var(--grvsc-padding-top);
8+
padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
239
padding-bottom: 1rem;
24-
padding-bottom: var(--grvsc-padding-bottom);
10+
padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
2511
border-radius: 8px;
26-
border-radius: var(--grvsc-border-radius);
12+
border-radius: var(--grvsc-border-radius, 8px);
2713
font-feature-settings: normal;
2814
}
2915

@@ -37,14 +23,14 @@
3723
box-sizing: border-box;
3824
width: 100%;
3925
padding-left: 1.5rem;
40-
padding-left: var(--grvsc-padding-left);
26+
padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
4127
padding-right: 1.5rem;
42-
padding-right: var(--grvsc-padding-right);
28+
padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
4329
}
4430

4531
.grvsc-line-highlighted {
46-
background-color: var(--grvsc-line-highlighted-background-color);
47-
box-shadow: inset var(--grvsc-line-highlighted-border-width) 0 0 0 var(--grvsc-line-highlighted-border-color);
32+
background-color: var(--grvsc-line-highlighted-background-color, transparent);
33+
box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);
4834
}
4935

5036
.default-dark {

‎test/integration/baselines/github-zip.html‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,29 +7,15 @@
77
<span class="grvsc-line"><span class="mtk1"> </span><span class="mtk13">await</span><span class="mtk1"> </span><span class="mtk20">cache</span><span class="mtk6">.</span><span class="mtk9">set</span><span class="mtk1">(</span><span class="mtk20">key</span><span class="mtk6">,</span><span class="mtk1"> </span><span class="mtk6">{</span><span class="mtk1"> </span><span class="mtk6">...</span><span class="mtk1">(</span><span class="mtk13">await</span><span class="mtk1"> </span><span class="mtk20">cache</span><span class="mtk6">.</span><span class="mtk9">get</span><span class="mtk1">(</span><span class="mtk20">key</span><span class="mtk1">))</span><span class="mtk6">,</span><span class="mtk1"> </span><span class="mtk6">...</span><span class="mtk20">value</span><span class="mtk1"> </span><span class="mtk6">}</span><span class="mtk1">)</span><span class="mtk6">;</span></span>
88
<span class="grvsc-line"><span class="mtk6">}</span></span></code></pre>
99
<style class="grvsc-styles">
10-
:root {
11-
--grvsc-padding-v: 1rem;
12-
--grvsc-padding-h: 1.5rem;
13-
--grvsc-padding-top: var(--grvsc-padding-v);
14-
--grvsc-padding-right: var(--grvsc-padding-h);
15-
--grvsc-padding-bottom: var(--grvsc-padding-v);
16-
--grvsc-padding-left: var(--grvsc-padding-h);
17-
--grvsc-border-radius: 8px;
18-
19-
--grvsc-line-highlighted-background-color: transparent;
20-
--grvsc-line-highlighted-border-width: 4px;
21-
--grvsc-line-highlighted-border-color: transparent;
22-
}
23-
2410
.grvsc-container {
2511
overflow: auto;
2612
-webkit-overflow-scrolling: touch;
2713
padding-top: 1rem;
28-
padding-top: var(--grvsc-padding-top);
14+
padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
2915
padding-bottom: 1rem;
30-
padding-bottom: var(--grvsc-padding-bottom);
16+
padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
3117
border-radius: 8px;
32-
border-radius: var(--grvsc-border-radius);
18+
border-radius: var(--grvsc-border-radius, 8px);
3319
font-feature-settings: normal;
3420
}
3521

@@ -43,14 +29,14 @@
4329
box-sizing: border-box;
4430
width: 100%;
4531
padding-left: 1.5rem;
46-
padding-left: var(--grvsc-padding-left);
32+
padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
4733
padding-right: 1.5rem;
48-
padding-right: var(--grvsc-padding-right);
34+
padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
4935
}
5036

5137
.grvsc-line-highlighted {
52-
background-color: var(--grvsc-line-highlighted-background-color);
53-
box-shadow: inset var(--grvsc-line-highlighted-border-width) 0 0 0 var(--grvsc-line-highlighted-border-color);
38+
background-color: var(--grvsc-line-highlighted-background-color, transparent);
39+
box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);
5440
}
5541

5642
.oceanic-plus {

‎test/integration/baselines/highlight-directive-comments.html‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -15,29 +15,15 @@
1515
<span class="grvsc-line grvsc-line-highlighted"><span class="mtk1"> </span><span class="mtk15">case</span><span class="mtk1"> </span><span class="mtk11">two</span><span class="mtk1">(</span><span class="mtk12">_</span><span class="mtk1"> name: </span><span class="mtk10">String</span><span class="mtk1">)</span></span>
1616
<span class="grvsc-line"><span class="mtk1">}</span></span></code></pre>
1717
<style class="grvsc-styles">
18-
:root {
19-
--grvsc-padding-v: 1rem;
20-
--grvsc-padding-h: 1.5rem;
21-
--grvsc-padding-top: var(--grvsc-padding-v);
22-
--grvsc-padding-right: var(--grvsc-padding-h);
23-
--grvsc-padding-bottom: var(--grvsc-padding-v);
24-
--grvsc-padding-left: var(--grvsc-padding-h);
25-
--grvsc-border-radius: 8px;
26-
27-
--grvsc-line-highlighted-background-color: transparent;
28-
--grvsc-line-highlighted-border-width: 4px;
29-
--grvsc-line-highlighted-border-color: transparent;
30-
}
31-
3218
.grvsc-container {
3319
overflow: auto;
3420
-webkit-overflow-scrolling: touch;
3521
padding-top: 1rem;
36-
padding-top: var(--grvsc-padding-top);
22+
padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
3723
padding-bottom: 1rem;
38-
padding-bottom: var(--grvsc-padding-bottom);
24+
padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
3925
border-radius: 8px;
40-
border-radius: var(--grvsc-border-radius);
26+
border-radius: var(--grvsc-border-radius, 8px);
4127
font-feature-settings: normal;
4228
}
4329

@@ -51,14 +37,14 @@
5137
box-sizing: border-box;
5238
width: 100%;
5339
padding-left: 1.5rem;
54-
padding-left: var(--grvsc-padding-left);
40+
padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
5541
padding-right: 1.5rem;
56-
padding-right: var(--grvsc-padding-right);
42+
padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
5743
}
5844

5945
.grvsc-line-highlighted {
60-
background-color: var(--grvsc-line-highlighted-background-color);
61-
box-shadow: inset var(--grvsc-line-highlighted-border-width) 0 0 0 var(--grvsc-line-highlighted-border-color);
46+
background-color: var(--grvsc-line-highlighted-background-color, transparent);
47+
box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);
6248
}
6349

6450
.default-dark {

‎test/integration/baselines/npm-extension.html‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,29 +7,15 @@
77
<span class="grvsc-line"><span class="mtk1"> </span><span class="mtk9">await</span><span class="mtk1"> </span><span class="mtk3">cache</span><span class="mtk1">.</span><span class="mtk6">set</span><span class="mtk1">(</span><span class="mtk3">key</span><span class="mtk1">, { </span><span class="mtk9">...</span><span class="mtk1">(</span><span class="mtk9">await</span><span class="mtk1"> </span><span class="mtk3">cache</span><span class="mtk1">.</span><span class="mtk6">get</span><span class="mtk1">(</span><span class="mtk3">key</span><span class="mtk1">)), </span><span class="mtk9">...</span><span class="mtk3">value</span><span class="mtk1"> });</span></span>
88
<span class="grvsc-line"><span class="mtk1">}</span></span></code></pre>
99
<style class="grvsc-styles">
10-
:root {
11-
--grvsc-padding-v: 1rem;
12-
--grvsc-padding-h: 1.5rem;
13-
--grvsc-padding-top: var(--grvsc-padding-v);
14-
--grvsc-padding-right: var(--grvsc-padding-h);
15-
--grvsc-padding-bottom: var(--grvsc-padding-v);
16-
--grvsc-padding-left: var(--grvsc-padding-h);
17-
--grvsc-border-radius: 8px;
18-
19-
--grvsc-line-highlighted-background-color: transparent;
20-
--grvsc-line-highlighted-border-width: 4px;
21-
--grvsc-line-highlighted-border-color: transparent;
22-
}
23-
2410
.grvsc-container {
2511
overflow: auto;
2612
-webkit-overflow-scrolling: touch;
2713
padding-top: 1rem;
28-
padding-top: var(--grvsc-padding-top);
14+
padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));
2915
padding-bottom: 1rem;
30-
padding-bottom: var(--grvsc-padding-bottom);
16+
padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));
3117
border-radius: 8px;
32-
border-radius: var(--grvsc-border-radius);
18+
border-radius: var(--grvsc-border-radius, 8px);
3319
font-feature-settings: normal;
3420
}
3521

@@ -43,14 +29,14 @@
4329
box-sizing: border-box;
4430
width: 100%;
4531
padding-left: 1.5rem;
46-
padding-left: var(--grvsc-padding-left);
32+
padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));
4733
padding-right: 1.5rem;
48-
padding-right: var(--grvsc-padding-right);
34+
padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));
4935
}
5036

5137
.grvsc-line-highlighted {
52-
background-color: var(--grvsc-line-highlighted-background-color);
53-
box-shadow: inset var(--grvsc-line-highlighted-border-width) 0 0 0 var(--grvsc-line-highlighted-border-color);
38+
background-color: var(--grvsc-line-highlighted-background-color, transparent);
39+
box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);
5440
}
5541

5642
.synthwave-vscode { background-color: #262335; }

0 commit comments

Comments
 (0)