Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: provide dark mode #508

Draft
wants to merge 21 commits into
base: main
Choose a base branch
from
Draft

feat: provide dark mode #508

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
b029e0a
refactor: declare that our website works both in light and dark mode
mfranzke Jul 11, 2023
451f669
feat: provide initial stack of declarations for dark mode #507
mfranzke Jul 11, 2023
7e80a62
refactor: adapted color
mfranzke Jul 11, 2023
6f91b0e
refactor: added declarations for further states
mfranzke Jul 11, 2023
5314292
refactor: adapted color
mfranzke Jul 11, 2023
05e7ff9
refactor: added further relevant styles
mfranzke Jul 12, 2023
ea913d7
test: added further test cases for dark mode
mfranzke Jul 12, 2023
16d4bd1
refactor: added further relevant styles
mfranzke Jul 12, 2023
1edcf71
feat: added form field related styles
mfranzke Jul 12, 2023
a0a20ea
refactor: added radio related styles
mfranzke Jul 12, 2023
71f2860
refactor: added dark mode related styles
mfranzke Jul 12, 2023
194f96e
refactor: added dark mode related styles
mfranzke Jul 12, 2023
28d781e
refactor: added dark mode related styles
mfranzke Jul 12, 2023
fadf1c9
refactor: added dark mode related styles
mfranzke Jul 12, 2023
2ef40e7
refactor: added dark mode related styles
mfranzke Jul 12, 2023
bab03d6
refactor: added dark mode related styles
mfranzke Jul 12, 2023
3639d00
refactor: added dark mode related styles
mfranzke Jul 12, 2023
d1ee43d
refactor: slight optimization
mfranzke Jul 25, 2023
745d82f
Merge branch 'main' into 507-provide-dark-mode
mfranzke Aug 30, 2023
cdee8ca
Merge branch 'main' into 507-provide-dark-mode
mfranzke Nov 21, 2023
598bcb4
Update _init.global.scss
mfranzke Nov 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions source/_meta/_head.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@
{{! <link rel="manifest" href="../../site.webmanifest"> }}
{{! <link rel="apple-touch-icon" href="../../images/db_logo.svg"> }}

<!-- Declare that our website works both in light and dark mode //-->
<meta name="color-scheme" content="dark light">

<!-- If you're adapting the HTML out of this document, only include the following CSS file, as the other below are related to pattern lab styling and presenting our patterns in this context even only //-->
<link rel="stylesheet" href="../../css/{{ domain }}/db-ui-core.css?{{ cacheBuster }}" media="all">

Expand Down
13 changes: 9 additions & 4 deletions source/_patterns/00-base/_init.global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ body {

// adapted from https://github.com/jgthms/bulma/blob/0.7.5/sass/base/generic.sass
html {
background-color: #fdfdfd; // TODO: This would need to get replaced by the correct (semantic) color
background-color: var(
--db-element---backgroundColor
); // TODO: This would need to get replaced by the correct (semantic) color
// font-size: 16px; // We need to deactivate this due to accessibility problems, as even also reported with https://github.com/jgthms/bulma/issues/3588
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
Expand Down Expand Up @@ -40,22 +42,25 @@ pre {
}

body {
color: $db-color-cool-gray-700;
color: var(--db-text---color);
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}

// Inline
a {
color: $db-color-cool-gray-700;
color: var(--db-text---color);

strong {
color: currentColor;
}

&:hover {
color: #5d616a; // TODO: Identify correct color variable
--db-text---color: #5d616a; // TODO: Identify correct color variable
@media (prefers-color-scheme: dark) {
--db-text---color: #cdd4da; // TODO: Identify correct color variable
}
}
}

Expand Down
10 changes: 10 additions & 0 deletions source/_patterns/00-base/_init.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
:root {
--db-text---color: #{$db-color-cool-gray-700};
--db-element---backgroundColor: #fdfdfd; // We need to figure out the correct variable for this

@media (prefers-color-scheme: dark) {
--db-text---color: #{$db-color-white};
--db-element---backgroundColor: #{$db-color-cool-gray-700};
}
}

// Box sizing
html {
box-sizing: var(--db-box-sizing, border-box);
Expand Down
6 changes: 6 additions & 0 deletions source/_patterns/00-base/icons/_icons.demonstration.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@
margin: to-rem($pxValue: 4);
padding: to-rem($pxValue: 32);

&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-regular {
@media (prefers-color-scheme: dark) {
--db-icon-color: #fff;
}
}

&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-turquoise {
background-color: $db-color-turquoise-400;
}
Expand Down
8 changes: 6 additions & 2 deletions source/_patterns/01-elements/_form-elements.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@

caret-color: $db-color-red-500;

color: $form-elements-color;
@media (prefers-color-scheme: light) {
color: $form-elements-color;
}

// Description styles
& ~ .description {
Expand Down Expand Up @@ -75,7 +77,9 @@

// Outline
%form-element-outline {
--formElement---borderColor: #{$form-elements-outline-border-color};
@media (prefers-color-scheme: light) {
--formElement---borderColor: #{$form-elements-outline-border-color};
}
background-color: transparent;
border-bottom: $form-elements---borderBottom;
border-left: $form-elements---borderLeft;
Expand Down
27 changes: 17 additions & 10 deletions source/_patterns/01-elements/_form-elements.variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,15 @@ $form-elements---borderLeft: 1px solid var(--formElement---borderLeftColor) !def

// ### Style variations ###
// Semitransparent
$form-elements-semitransparent-background-color: rgba(
$db-color-cool-gray-700,
0.05
$form-elements-semitransparent-background-color: color-mix(
in srgb,
transparent 95%,
currentColor
) !default;
$form-elements-semitransparent-border-bottom-color: rgba(
$db-color-cool-gray-700,
0.5
$form-elements-semitransparent-border-bottom-color: color-mix(
in srgb,
transparent 50%,
currentColor
) !default;

// White
Expand All @@ -25,14 +27,19 @@ $form-elements-white-border-bottom-color: rgba(
) !default;

// Solid
$form-elements-solid-background-color: $db-color-cool-gray-100 !default;
$form-elements-solid-background-color: color-mix(
in srgb,
transparent 95%,
currentColor
) !default;
$form-elements-solid-border-bottom-color: rgba(
$db-color-cool-gray-700,
0.5
) !default;

// Outline
$form-elements-outline-border-color: rgba(
$db-color-cool-gray-700,
0.25
$form-elements-outline-border-color: color-mix(
in srgb,
transparent 75%,
currentColor
) !default;
32 changes: 26 additions & 6 deletions source/_patterns/01-elements/buttons/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,22 +86,32 @@
// TODO: This might get replaced by another effect
backdrop-filter: blur(4px);
background-color: transparent;
border-color: $db-color-cool-gray-700;
color: $db-color-cool-gray-700;
border-color: currentColor;
@media (prefers-color-scheme: light) {
color: $db-color-cool-gray-700;
}

&:disabled {
color: unquote($db-color-cool-gray-700 + "80");
border-color: unquote($db-color-cool-gray-700 + "40");
@media (prefers-color-scheme: light) {
color: unquote($db-color-cool-gray-700 + "80");
border-color: unquote($db-color-cool-gray-700 + "40");
}
}

&:not(:disabled) {
&:hover {
// TODO: This could probably get simplified later on e.g. via CSS variables
background-color: $button-secondaryOutline-hover-backgroundColor;
@media (prefers-color-scheme: dark) {
background-color: rgba(255, 255, 255, 0.03);
}
}

&:active {
background-color: $button-secondaryOutline-active-backgroundColor;
@media (prefers-color-scheme: dark) {
background-color: rgba(255, 255, 255, 0.06);
}
}
}
}
Expand Down Expand Up @@ -132,7 +142,9 @@
&%variant-tertiaryPlain {
background-color: transparent; // shame.css
border: 2px solid transparent;
color: $db-color-cool-gray-700;
@media (prefers-color-scheme: light) {
color: $db-color-cool-gray-700;
}

&:disabled {
color: unquote($db-color-cool-gray-700 + "80");
Expand All @@ -142,10 +154,16 @@
&:hover {
// TODO: This could probably get simplified later on e.g. via CSS variables
background-color: $button-secondaryOutline-hover-backgroundColor;
@media (prefers-color-scheme: dark) {
background-color: rgba(255, 255, 255, 0.03);
}
}

&:active {
background-color: $button-secondaryOutline-active-backgroundColor;
@media (prefers-color-scheme: dark) {
background-color: rgba(255, 255, 255, 0.06);
}
}
}
}
Expand Down Expand Up @@ -214,6 +232,8 @@
}

&:disabled {
color: unquote($button---color + "80");
@media (prefers-color-scheme: light) {
color: unquote($button---color + "80");
}
}
}
2 changes: 1 addition & 1 deletion source/_patterns/01-elements/checkbox/_checkbox.variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
@import "../../00-base/colors/colors.variables";

$checkbox---backgroundColor: rgba(255, 255, 255, 0.1) !default;
$checkbox---borderColor: $db-color-cool-gray-700 !default;
$checkbox---borderColor: currentColor !default;
$checkbox---color: $db-color-cool-gray-700 !default;

$checkbox--checked-backgroundColor: $db-color-cool-gray-700 !default;
Expand Down
21 changes: 18 additions & 3 deletions source/_patterns/01-elements/checkbox/checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,14 @@
align-content: center;

appearance: none;
background-color: $checkbox---backgroundColor;
@media (prefers-color-scheme: light) {
background-color: $checkbox---backgroundColor;
}
border: #{to-rem($pxValue: 1)} solid $checkbox---borderColor;
border-radius: 4px;
color: $checkbox---color;
@media (prefers-color-scheme: light) {
color: $checkbox---color;
}

display: inline-flex;
height: to-rem($pxValue: 24);
Expand All @@ -24,21 +28,29 @@

&::before {
--icon-font-size: 1.375rem;
color: inherit;
margin-right: 0;
}

&:checked {
background-color: $checkbox--checked-backgroundColor;
color: $checkbox--checked-color;
@media (prefers-color-scheme: dark) {
color: $checkbox---color;
background-color: $db-color-white;
}

&::before {
color: $checkbox--checked-color;
content: glyph(done);
}
}

&:enabled {
&:hover {
background-color: rgba(40, 45, 55, 0.14);
@media (prefers-color-scheme: dark) {
background-color: rgba(255, 255, 255, 0.03);
}

&:checked {
background-color: $checkbox-hover-checked-backgroundColor;
Expand All @@ -47,6 +59,9 @@

&:active {
background-color: rgba(40, 45, 55, 0.14);
@media (prefers-color-scheme: dark) {
background-color: rgba(255, 255, 255, 0.06);
}
}
}

Expand Down
4 changes: 3 additions & 1 deletion source/_patterns/01-elements/input/input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@
.elm-input {
@extend %form-element;

color: $input---color;
@media (prefers-color-scheme: light) {
color: $input---color;
}

font-size: to-rem($pxValue: 16);
height: to-rem($pxValue: 44);
Expand Down
2 changes: 1 addition & 1 deletion source/_patterns/01-elements/radio/_radio.variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
@import "../../../css/helpers/functions";

$radio---border: $db-color-cool-gray-700 !default;
$radio---border: currentColor !default;
10 changes: 9 additions & 1 deletion source/_patterns/01-elements/radio/radio.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
.elm-radio {
appearance: none;

background-color: rgba(255, 255, 255, 0.1);
@media (prefers-color-scheme: light) {
background-color: rgba(255, 255, 255, 0.1);
}
border: to-rem($pxValue: 1) solid $radio---border;
border-radius: to-em($pxValue: 16);

Expand All @@ -27,11 +29,17 @@
&:hover {
&:not(:checked) {
background-color: rgba(40, 45, 55, 0.14);
@media (prefers-color-scheme: dark) {
background-color: rgba(255, 255, 255, 0.03);
}
}
}

&:active {
background-color: rgba(40, 45, 55, 0.3);
@media (prefers-color-scheme: dark) {
background-color: rgba(255, 255, 255, 0.06);
}
}
}

Expand Down
4 changes: 3 additions & 1 deletion source/_patterns/02-components/breadcrumb/breadcrumb.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
@import "breadcrumb.variables";

.cmp-breadcrumb {
color: $db-color-cool-gray-500;
@media (prefers-color-scheme: light) {
color: $db-color-cool-gray-500;
}
font-size: to-rem($pxValue: 12);

a {
Expand Down
3 changes: 3 additions & 0 deletions source/_patterns/02-components/cards/card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@

.cmp-card {
background-color: #fff;
@media (prefers-color-scheme: dark) {
background-color: color-mix(in srgb, transparent 95%, currentColor);
}

border-radius: 8px;
box-shadow: $box-shadow-01, $box-shadow-02;
Expand Down
8 changes: 6 additions & 2 deletions source/_patterns/02-components/dialog/dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
border: 0;
border-radius: 8px;

color: $db-color-cool-gray-700;
color: var(--db-element---color);

background-color: var(--db-element---backgroundColor);

font-size: to-rem($pxValue: 14);
margin-top: 0;
Expand Down Expand Up @@ -43,7 +45,9 @@
}

header {
color: $db-color-cool-gray-800;
@media (prefers-color-scheme: light) {
color: $db-color-cool-gray-800;
}

transform: translateY(-#{to-rem($pxValue: 9)});

Expand Down
2 changes: 1 addition & 1 deletion source/_patterns/02-components/language-switcher/language-switcher.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
}

li {
background-color: #fdfdfd; // TODO: This would need to get replaced by the correct (semantic) color
background-color: var(--db-element---backgroundColor);

position: absolute;

Expand Down
Loading
Loading