Skip to content

Commit b129b36

Browse files
vkunzsebastianbergmann
authored andcommitted
report/html/styles: fix link colours
Bootstrap uses --*-rgb style vars to construct colours via css functions, like rgba(). The light-dark() css function only handles colours, it does not work with rgb tuples as arguments. Instead of using light-dark(), define all --*-rgb vars within media queries. Signed-off-by: Valentin Kunz <vale.kunz@googlemail.com>
1 parent 65e0f73 commit b129b36

File tree

1 file changed

+18
-8
lines changed
  • src/Report/Html/Renderer/Template/css

1 file changed

+18
-8
lines changed

src/Report/Html/Renderer/Template/css/style.css

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
:root {
33
/* Implementing an auto-selection of dark/light theme via: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark */
44
color-scheme: light dark;
5-
5+
66
/* PHPUnit light/dark colors */
77
--phpunit-breadcrumbs: light-dark(var(--bs-gray-200), var(--bs-gray-800));
88
--phpunit-success-bar: light-dark(#28a745 ,#1f8135);
@@ -15,7 +15,7 @@
1515
--phpunit-danger-bar: light-dark(#dc3545, #a62633);
1616

1717
/* Bootstrap v5.3 default colors (light, dark) */
18-
--bs-body-bg-rgb: light-dark((255, 255, 255), (33, 37, 41));
18+
--bs-body-bg-rgb: 255, 255, 255;
1919
--bs-body-bg: light-dark(#fff, #212529);
2020
--bs-body-color-rgb: light-dark(33, 37, 41, 222, 226, 230);
2121
--bs-body-color: light-dark(#212529, #dee2e6);
@@ -28,7 +28,7 @@
2828
--bs-dark-bg-subtle: light-dark(#ced4da, #1a1d20);
2929
--bs-dark-border-subtle: light-dark(#adb5bd, #343a40);
3030
--bs-dark-text-emphasis: light-dark(#495057, #dee2e6);
31-
--bs-emphasis-color-rgb: light-dark((0, 0, 0), (255, 255, 255));
31+
--bs-emphasis-color-rgb: 0, 0, 0;
3232
--bs-emphasis-color: light-dark(#000, #fff);
3333
--bs-form-invalid-border-color: light-dark(#dc3545, #ea868f);
3434
--bs-form-invalid-color: light-dark(#dc3545, #ea868f);
@@ -42,33 +42,43 @@
4242
--bs-light-bg-subtle: light-dark(#fcfcfd, #343a40);
4343
--bs-light-border-subtle: light-dark(#e9ecef, #495057);
4444
--bs-light-text-emphasis: light-dark(#495057, #f8f9fa);
45-
--bs-link-color-rgb: light-dark((13, 110, 253), (110, 168, 254));
45+
--bs-link-color-rgb: 13, 110, 253;
4646
--bs-link-color: light-dark(#0d6efd, #6ea8fe);
47-
--bs-link-hover-color-rgb: light-dark((10, 88, 202), (139, 185, 254));
47+
--bs-link-hover-color-rgb: 10, 88, 202;
4848
--bs-link-hover-color: light-dark(#0a58ca, #8bb9fe);
4949
--bs-primary-bg-subtle: light-dark(#cfe2ff, #031633);
5050
--bs-primary-border-subtle: light-dark(#9ec5fe, #084298);
5151
--bs-primary-text-emphasis: light-dark(#052c65, #6ea8fe);
52-
--bs-secondary-bg-rgb: light-dark((233, 236, 239), (52, 58, 64));
52+
--bs-secondary-bg-rgb: 233, 236, 239;
5353
--bs-secondary-bg-subtle: light-dark(#e2e3e5, #161719);
5454
--bs-secondary-bg: light-dark(#e9ecef, #343a40);
5555
--bs-secondary-border-subtle: light-dark(#c4c8cb, #41464b);
56-
--bs-secondary-color-rgb: light-dark((33, 37, 41), (222, 226, 230));
56+
--bs-secondary-color-rgb: 33, 37, 41;
5757
--bs-secondary-color: light-dark(rgba(33, 37, 41, 0.75), rgba(222, 226, 230, 0.75));
5858
--bs-secondary-text-emphasis: light-dark(#2b2f32, #a7acb1);
5959
--bs-success-bg-subtle: light-dark(#d1e7dd, #051b11);
6060
--bs-success-border-subtle: light-dark(#a3cfbb, #0f5132);
6161
--bs-success-text-emphasis: light-dark(#0a3622, #75b798);
6262
--bs-tertiary-bg-rgb: light-dark(248, 249, 250, 43, 48, 53);
6363
--bs-tertiary-bg: light-dark(#f8f9fa, #2b3035);
64-
--bs-tertiary-color-rgb: light-dark((33, 37, 41), (222, 226, 230));
64+
--bs-tertiary-color-rgb: 33, 37, 41;
6565
--bs-tertiary-color: light-dark(rgba(33, 37, 41, 0.5), rgba(222, 226, 230, 0.5));
6666
--bs-warning-bg-subtle: light-dark(#fff3cd, #332701);
6767
--bs-warning-border-subtle: light-dark(#ffe69c, #997404);
6868
--bs-warning-text-emphasis: light-dark(#664d03, #ffda6a);
6969
}
7070

7171
@media (prefers-color-scheme: dark) {
72+
:root {
73+
--bs-body-bg-rgb: 33, 37, 41;
74+
--bs-emphasis-color-rgb: 255, 255, 255;
75+
--bs-link-color-rgb: 110, 168, 254;
76+
--bs-link-hover-color-rgb: 139, 185, 254;
77+
--bs-secondary-bg-rgb: 52, 58, 64;
78+
--bs-secondary-color-rgb: 222, 226, 230;
79+
--bs-tertiary-color-rgb: 222, 226, 230;
80+
}
81+
7282
/* Invert icon's colors on dark mode to improve readability */
7383
img.octicon { filter: invert(1); }
7484
}

0 commit comments

Comments
 (0)