Skip to content

Commit 0a4fc28

Browse files
larseggertlarseggert
authored
fix: More darkmode fixes (ietf-tools#6477)
* fix: More dark mode fixes This first commit increases contrast of the leftmenu text. * Fix own ballot position highlight in dark mode * Fix dark mode axis color in timeline diagrams * Enable highcharts dark mode * Fix template * Properly import our customized bs5 everywhere * Fix ietf-tools#6499 * Use bs5 color for border-left * Remove superfluous load
1 parent 699a8e2 commit 0a4fc28

21 files changed

Lines changed: 162 additions & 202 deletions

‎ietf/static/css/custom-bs-import.scss‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@import "bootstrap/scss/functions";
2+
3+
// Enable negative margin classes.
4+
$enable-negative-margins: true;
5+
6+
// Don't add carets to dropdowns by default.
7+
// $enable-caret: false;
8+
9+
$popover-max-width: 100%;
10+
11+
// Override default fonts
12+
13+
$font-family-sans-serif: "Inter",
14+
system-ui,
15+
-apple-system,
16+
"Segoe UI",
17+
Roboto,
18+
"Helvetica Neue",
19+
"Noto Sans",
20+
"Liberation Sans",
21+
Arial,
22+
sans-serif,
23+
"Apple Color Emoji",
24+
"Segoe UI Emoji",
25+
"Segoe UI Symbol",
26+
"Noto Color Emoji";
27+
$font-family-monospace: "Noto Sans Mono",
28+
SFMono-Regular,
29+
Menlo,
30+
Monaco,
31+
Consolas,
32+
"Liberation Mono",
33+
"Courier New",
34+
monospace;
35+
36+
// Enable color modes
37+
$color-mode-type: data;
38+
39+
@import "bootstrap/scss/variables";
40+
@import "bootstrap/scss/variables-dark";
41+
42+
$h1-font-size: $font-size-base * 2.2;
43+
$h2-font-size: $font-size-base * 1.8;
44+
$h3-font-size: $font-size-base * 1.6;
45+
$h4-font-size: $font-size-base * 1.4;
46+
$h5-font-size: $font-size-base * 1.2;
47+
$h6-font-size: $font-size-base;
48+
49+
@import "bootstrap/scss/maps";
50+
@import "bootstrap/scss/mixins";
51+
@import "bootstrap/scss/utilities";
52+
@import "bootstrap/scss/root";
53+
54+
55+

‎ietf/static/css/datepicker.scss‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,4 @@
1-
@import "bootstrap/scss/functions";
2-
3-
// Enable color modes
4-
$color-mode-type: data;
5-
6-
@import "bootstrap/scss/variables";
7-
@import "bootstrap/scss/variables-dark";
8-
@import "bootstrap/scss/maps";
9-
@import "bootstrap/scss/mixins";
10-
@import "bootstrap/scss/root";
1+
@import "custom-bs-import";
112

123
// FIXME: color.scale doesn't seem to work with CSS variables, so avoid those:`
134
$dp-cell-focus-background-color: $dropdown-link-hover-bg !default;

‎ietf/static/css/document_html.scss‎

Lines changed: 2 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,9 @@
11
@use "sass:map";
22

3-
$font-family-sans-serif: "Inter",
4-
system-ui,
5-
-apple-system,
6-
"Segoe UI",
7-
Roboto,
8-
"Helvetica Neue",
9-
"Noto Sans",
10-
"Liberation Sans",
11-
Arial,
12-
sans-serif,
13-
"Apple Color Emoji",
14-
"Segoe UI Emoji",
15-
"Segoe UI Symbol",
16-
"Noto Color Emoji";
17-
$font-family-monospace: "Noto Sans Mono",
18-
SFMono-Regular,
19-
Menlo,
20-
Monaco,
21-
Consolas,
22-
"Liberation Mono",
23-
"Courier New",
24-
monospace;
25-
26-
@import "bootstrap/scss/functions";
27-
28-
// Enable color modes
29-
$color-mode-type: data;
30-
31-
@import "bootstrap/scss/variables";
32-
@import "bootstrap/scss/variables-dark";
33-
@import "bootstrap/scss/maps";
34-
@import "bootstrap/scss/mixins";
35-
@import "bootstrap/scss/utilities";
36-
@import "bootstrap/scss/root";
3+
@import "custom-bs-import";
374

385
// Layout & components
6+
// Only import what we need:
397
@import "bootstrap/scss/reboot";
408
@import "bootstrap/scss/type";
419
// @import "bootstrap/scss/images";

‎ietf/static/css/document_html_txt.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ figure {
6969
blockquote {
7070
@include margin-paragraph; // margin: var(--paragraph);
7171
padding-left: calc(2ch - 2px);
72-
border-left: 2px solid darkgrey;
72+
border-left: 2px solid var(--bs-border-color);
7373
}
7474

7575
/* Header junk */
@@ -374,7 +374,7 @@ thead, tfoot {
374374
border-bottom-style: double;
375375
}
376376
td, th {
377-
border: 1px solid inherit;
377+
border: 1px solid var(--bs-border-color);
378378
// padding: var(--half-line) 1ch;
379379
padding-top: var(--half-line);
380380
padding-right: 1ch;

‎ietf/static/css/highcharts.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "npm:highcharts/css/highcharts.css";

‎ietf/static/css/ietf.scss‎

Lines changed: 7 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,9 @@
11
@use "sass:map";
22

3-
@import "bootstrap/scss/functions";
4-
5-
// Enable negative margin classes.
6-
$enable-negative-margins: true;
7-
8-
// Don't add carets to dropdowns by default.
9-
// $enable-caret: false;
10-
11-
$popover-max-width: 100%;
12-
13-
// Override default fonts
14-
15-
$font-family-sans-serif: "Inter",
16-
system-ui,
17-
-apple-system,
18-
"Segoe UI",
19-
Roboto,
20-
"Helvetica Neue",
21-
"Noto Sans",
22-
"Liberation Sans",
23-
Arial,
24-
sans-serif,
25-
"Apple Color Emoji",
26-
"Segoe UI Emoji",
27-
"Segoe UI Symbol",
28-
"Noto Color Emoji";
29-
$font-family-monospace: "Noto Sans Mono",
30-
SFMono-Regular,
31-
Menlo,
32-
Monaco,
33-
Consolas,
34-
"Liberation Mono",
35-
"Courier New",
36-
monospace;
37-
38-
// Enable color modes
39-
$color-mode-type: data;
40-
41-
// Only import what we need:
42-
43-
@import "bootstrap/scss/variables";
44-
@import "bootstrap/scss/variables-dark";
45-
46-
$h1-font-size: $font-size-base * 2.2;
47-
$h2-font-size: $font-size-base * 1.8;
48-
$h3-font-size: $font-size-base * 1.6;
49-
$h4-font-size: $font-size-base * 1.4;
50-
$h5-font-size: $font-size-base * 1.2;
51-
$h6-font-size: $font-size-base;
52-
53-
@import "bootstrap/scss/maps";
54-
@import "bootstrap/scss/mixins";
55-
@import "bootstrap/scss/utilities";
56-
@import "bootstrap/scss/root";
3+
@import "custom-bs-import";
574

585
// Layout & components
6+
// Only import what we need:
597
@import "bootstrap/scss/reboot";
608
@import "bootstrap/scss/type";
619
@import "bootstrap/scss/images";
@@ -205,8 +153,8 @@ pre {
205153
--#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
206154
--#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
207155
--#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
208-
--#{$prefix}dropdown-link-color: #{$dropdown-link-color};
209-
--#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
156+
--#{$prefix}dropdown-link-color: #{$nav-link-color};
157+
--#{$prefix}dropdown-link-hover-color: #{$nav-link-hover-color};
210158
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
211159
--#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
212160
--#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
@@ -351,7 +299,7 @@ th,
351299
.axis path,
352300
.axis line {
353301
fill: none;
354-
stroke: black;
302+
stroke: var(--bs-body-color);
355303
}
356304

357305
.axis.y path,
@@ -368,7 +316,7 @@ th,
368316
}
369317

370318
.bar text {
371-
fill: black;
319+
fill: var(--bs-body-color);
372320
dominant-baseline: central;
373321
pointer-events: none;
374322
}
@@ -407,7 +355,7 @@ th,
407355
}
408356

409357
.ballot-icon table .my {
410-
border: calc(2 * $table-border-width) solid #000;
358+
border: calc(2 * $table-border-width) solid var(--bs-emphasis-color);
411359
}
412360

413361
// See https://getbootstrap.com/docs/5.1/customize/color/#all-colors

‎ietf/static/css/list.scss‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
1-
// Import bootstrap helpers
2-
@import "bootstrap/scss/functions";
3-
4-
// Enable color modes
5-
$color-mode-type: data;
6-
7-
@import "bootstrap/scss/variables";
8-
@import "bootstrap/scss/variables-dark";
1+
@import "custom-bs-import";
92

103
table .sort {
114
cursor: pointer;

‎ietf/static/css/select2.scss‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,4 @@
1-
@import "bootstrap/scss/functions";
2-
3-
// Enable color modes
4-
$color-mode-type: data;
5-
6-
@import "bootstrap/scss/variables";
7-
@import "bootstrap/scss/variables-dark";
8-
@import "bootstrap/scss/maps";
9-
@import "bootstrap/scss/mixins";
10-
@import "bootstrap/scss/root";
1+
@import "custom-bs-import";
112

123
// FIXME: bs-5.3.0 workaround from https://github.com/apalfrey/select2-bootstrap-5-theme/issues/75#issuecomment-1573265695
134
$s2bs5-border-color: $border-color;

‎ietf/static/js/highcharts.js‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,9 @@ Highcharts_Accessibility(Highcharts);
1313
Highcharts_Sunburst(Highcharts);
1414

1515
Highcharts.setOptions({
16-
// use colors from https://colorbrewer2.org/#type=qualitative&scheme=Paired&n=12
17-
colors: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99',
18-
'#e31a1c', '#fdbf6f', '#ff7f00', '#cab2d6', '#6a3d9a',
19-
'#ffff99', '#b15928'
20-
],
2116
chart: {
2217
height: "100%",
23-
style: {
24-
fontFamily: getComputedStyle(document.body)
25-
.getPropertyValue('--bs-body-font-family')
26-
}
18+
styledMode: true,
2719
},
2820
credits: {
2921
enabled: false

‎ietf/static/js/highstock.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,13 @@ Highcharts_Offline_Exporting(Highcharts);
1010
Highcharts_Export_Data(Highcharts);
1111
Highcharts_Accessibility(Highcharts);
1212

13+
Highcharts.setOptions({
14+
chart: {
15+
styledMode: true,
16+
},
17+
credits: {
18+
enabled: false
19+
},
20+
});
21+
1322
window.Highcharts = Highcharts;

0 commit comments

Comments
 (0)