From b029e0a4343b2cd6fff2a47fa5b23deaf341933f Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Tue, 11 Jul 2023 22:59:32 +0200 Subject: [PATCH 01/19] refactor: declare that our website works both in light and dark mode --- source/_meta/_head.hbs | 3 +++ 1 file changed, 3 insertions(+) diff --git a/source/_meta/_head.hbs b/source/_meta/_head.hbs index 4585854163..e6ff9e58ac 100644 --- a/source/_meta/_head.hbs +++ b/source/_meta/_head.hbs @@ -13,6 +13,9 @@ {{! }} {{! }} + + + From 451f66957e510b3d019604af96200228b38b1cf2 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Tue, 11 Jul 2023 23:00:24 +0200 Subject: [PATCH 02/19] feat: provide initial stack of declarations for dark mode #507 --- source/_patterns/00-base/_init.global.scss | 11 ++++++++--- source/_patterns/00-base/_init.scss | 10 ++++++++++ .../language-switcher/language-switcher.scss | 2 +- .../02-components/mainnavigation/mainnavigation.scss | 4 ++-- source/_patterns/03-areas/00-header/header.scss | 2 +- source/_patterns/03-areas/03-footer/footer.scss | 7 +++++-- 6 files changed, 27 insertions(+), 9 deletions(-) diff --git a/source/_patterns/00-base/_init.global.scss b/source/_patterns/00-base/_init.global.scss index cd9db54f00..d1f326a992 100644 --- a/source/_patterns/00-base/_init.global.scss +++ b/source/_patterns/00-base/_init.global.scss @@ -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; @@ -40,7 +42,7 @@ pre { } body { - color: $db-color-cool-gray-700; + color: var(--db-text---color); font-size: 1rem; font-weight: 400; line-height: 1.5; @@ -48,7 +50,7 @@ body { // Inline a { - color: $db-color-cool-gray-700; + color: var(--db-text---color); strong { color: currentColor; @@ -56,6 +58,9 @@ a { &:hover { color: #5d616a; // TODO: Identify correct color variable + @media (prefers-color-scheme: dark) { + color: #cdd4da; // TODO: Identify correct color variable + } } } diff --git a/source/_patterns/00-base/_init.scss b/source/_patterns/00-base/_init.scss index 269f2ccf6e..3fa182eae6 100644 --- a/source/_patterns/00-base/_init.scss +++ b/source/_patterns/00-base/_init.scss @@ -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); diff --git a/source/_patterns/02-components/language-switcher/language-switcher.scss b/source/_patterns/02-components/language-switcher/language-switcher.scss index baf7c4033c..09310b6b77 100644 --- a/source/_patterns/02-components/language-switcher/language-switcher.scss +++ b/source/_patterns/02-components/language-switcher/language-switcher.scss @@ -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; diff --git a/source/_patterns/02-components/mainnavigation/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/mainnavigation.scss index f4bd1d89aa..a9168870ef 100644 --- a/source/_patterns/02-components/mainnavigation/mainnavigation.scss +++ b/source/_patterns/02-components/mainnavigation/mainnavigation.scss @@ -41,7 +41,7 @@ @include icon(glyph(menu), 24, "outline", $partial: $partial); @include icon(glyph(close), 24, "outline", "after", $partial: $partial); - background-color: $header---backgroundColor; // TODO: This would need to get replaced by the correct (semantic) color + background-color: var(--db-element---backgroundColor); border-bottom: 1px solid $db-color-warm-gray-100; @@ -84,7 +84,7 @@ } ul { - background-color: $header---backgroundColor; + background-color: var(--db-element---backgroundColor); } // Multiple level navigation diff --git a/source/_patterns/03-areas/00-header/header.scss b/source/_patterns/03-areas/00-header/header.scss index 3bbf37fb89..21fd7199a8 100644 --- a/source/_patterns/03-areas/00-header/header.scss +++ b/source/_patterns/03-areas/00-header/header.scss @@ -3,7 +3,7 @@ @import "../../../css/helpers/functions"; .rea-header { - background-color: $header---backgroundColor; + background-color: var(--db-element---backgroundColor); box-shadow: $header---boxShadow; display: flex; justify-content: space-between; diff --git a/source/_patterns/03-areas/03-footer/footer.scss b/source/_patterns/03-areas/03-footer/footer.scss index 94bcb774d4..2733f1ebc7 100644 --- a/source/_patterns/03-areas/03-footer/footer.scss +++ b/source/_patterns/03-areas/03-footer/footer.scss @@ -7,10 +7,13 @@ .rea-footer { @include clearfix($partial: $partial); - background-color: $footer---backgroundColor; + background-color: var(--db-background---color); box-shadow: $footer---boxShadow; - color: $db-color-cool-gray-500; + color: var(--db-text---color); + @media (prefers-color-scheme: light) { + --db-text---color: #{$db-color-cool-gray-500}; + } margin-top: $footer---marginTop; padding: #{to-rem($pxValue: 21)} #{to-rem($pxValue: 16)}; From 7e80a628b63cb727335f23dd57a36cec51de12e5 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Tue, 11 Jul 2023 23:09:17 +0200 Subject: [PATCH 03/19] refactor: adapted color --- source/_patterns/01-elements/buttons/button.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss index 42f833cdf6..82c5603c93 100644 --- a/source/_patterns/01-elements/buttons/button.scss +++ b/source/_patterns/01-elements/buttons/button.scss @@ -86,8 +86,10 @@ // 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"); From 6f91b0e1094029218f7890605d0afc5a0ce4f2ac Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Tue, 11 Jul 2023 23:18:46 +0200 Subject: [PATCH 04/19] refactor: added declarations for further states --- source/_patterns/01-elements/buttons/button.scss | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss index 82c5603c93..63fab0ff66 100644 --- a/source/_patterns/01-elements/buttons/button.scss +++ b/source/_patterns/01-elements/buttons/button.scss @@ -92,18 +92,26 @@ } &: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); + } } } } @@ -216,6 +224,8 @@ } &:disabled { - color: unquote($button---color + "80"); + @media (prefers-color-scheme: light) { + color: unquote($button---color + "80"); + } } } From 5314292053f7f06d8dbf5a73f4c43eb5a75686e8 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Tue, 11 Jul 2023 23:21:38 +0200 Subject: [PATCH 05/19] refactor: adapted color --- source/_patterns/01-elements/buttons/button.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss index 63fab0ff66..fb51b41c6c 100644 --- a/source/_patterns/01-elements/buttons/button.scss +++ b/source/_patterns/01-elements/buttons/button.scss @@ -142,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"); @@ -152,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); + } } } } From 05e7ff9254433202926100f81d4b18038264d94d Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Wed, 12 Jul 2023 07:26:52 +0200 Subject: [PATCH 06/19] refactor: added further relevant styles --- source/_patterns/02-components/cards/card.scss | 3 +++ source/css/pattern-scaffolding-project-specific.scss | 7 +++++++ 2 files changed, 10 insertions(+) diff --git a/source/_patterns/02-components/cards/card.scss b/source/_patterns/02-components/cards/card.scss index e5600ff9a9..a37d0bb856 100644 --- a/source/_patterns/02-components/cards/card.scss +++ b/source/_patterns/02-components/cards/card.scss @@ -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; diff --git a/source/css/pattern-scaffolding-project-specific.scss b/source/css/pattern-scaffolding-project-specific.scss index 598ac9ae0a..c719b36724 100644 --- a/source/css/pattern-scaffolding-project-specific.scss +++ b/source/css/pattern-scaffolding-project-specific.scss @@ -35,6 +35,13 @@ pl-iframe { // Splitted Intro Page &:nth-of-type(2) { background-color: $db-color-cool-gray-100; + @media (prefers-color-scheme: dark) { + background-color: color-mix( + in srgb, + transparent 95%, + currentColor + ); + } padding-bottom: 2.5rem; } } From ea913d707ae592666b86ca310d724555dc4f668e Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Wed, 12 Jul 2023 07:27:22 +0200 Subject: [PATCH 07/19] test: added further test cases for dark mode --- tests/backstop.json | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/tests/backstop.json b/tests/backstop.json index ecc5e615e6..e77c092f5f 100644 --- a/tests/backstop.json +++ b/tests/backstop.json @@ -3,26 +3,61 @@ "viewports": [ { "label": "phone - portrait", + "emulateDark": false, "width": 320, "height": 480 }, { "label": "phone - landscape", + "emulateDark": false, "width": 480, "height": 320 }, { "label": "tablet - portrait", + "emulateDark": false, "width": 1024, "height": 768 }, { "label": "tablet - landscape", + "emulateDark": false, "width": 768, "height": 1024 }, { "label": "13 Zoll Macbook", + "emulateDark": false, + "width": 1440, + "height": 900 + }, + { + "label": "phone - portrait", + "emulateDark": true, + "width": 320, + "height": 480 + }, + { + "label": "phone - landscape", + "emulateDark": true, + "width": 480, + "height": 320 + }, + { + "label": "tablet - portrait", + "emulateDark": true, + "width": 1024, + "height": 768 + }, + { + "label": "tablet - landscape", + "emulateDark": true, + "width": 768, + "height": 1024 + }, + { + "label": "13 Zoll Macbook", + "emulateDark": true, "width": 1440, "height": 900 } From 16d4bd1618a39611c3feabab331702b50c4ce42d Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Wed, 12 Jul 2023 07:50:40 +0200 Subject: [PATCH 08/19] refactor: added further relevant styles --- .../checkbox/_checkbox.variables.scss | 2 +- .../01-elements/checkbox/checkbox.scss | 21 ++++++++++++++++--- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/source/_patterns/01-elements/checkbox/_checkbox.variables.scss b/source/_patterns/01-elements/checkbox/_checkbox.variables.scss index 8f93fe9c52..07baf730a7 100644 --- a/source/_patterns/01-elements/checkbox/_checkbox.variables.scss +++ b/source/_patterns/01-elements/checkbox/_checkbox.variables.scss @@ -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; diff --git a/source/_patterns/01-elements/checkbox/checkbox.scss b/source/_patterns/01-elements/checkbox/checkbox.scss index 4751e36bba..c3d9626dd2 100644 --- a/source/_patterns/01-elements/checkbox/checkbox.scss +++ b/source/_patterns/01-elements/checkbox/checkbox.scss @@ -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); @@ -24,14 +28,19 @@ &::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); } } @@ -39,6 +48,9 @@ &: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; @@ -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); + } } } From 1edcf71635b9addaaad2c00c719a87765b042c0d Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Wed, 12 Jul 2023 23:58:46 +0200 Subject: [PATCH 09/19] feat: added form field related styles --- .../_patterns/01-elements/_form-elements.scss | 8 ++++-- .../01-elements/_form-elements.variables.scss | 27 ++++++++++++------- source/_patterns/01-elements/input/input.scss | 4 ++- 3 files changed, 26 insertions(+), 13 deletions(-) diff --git a/source/_patterns/01-elements/_form-elements.scss b/source/_patterns/01-elements/_form-elements.scss index d88bff7d20..9ee1651b72 100644 --- a/source/_patterns/01-elements/_form-elements.scss +++ b/source/_patterns/01-elements/_form-elements.scss @@ -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 { @@ -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; diff --git a/source/_patterns/01-elements/_form-elements.variables.scss b/source/_patterns/01-elements/_form-elements.variables.scss index 1859f4293b..a2cbe9eaa2 100644 --- a/source/_patterns/01-elements/_form-elements.variables.scss +++ b/source/_patterns/01-elements/_form-elements.variables.scss @@ -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 @@ -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; diff --git a/source/_patterns/01-elements/input/input.scss b/source/_patterns/01-elements/input/input.scss index c80dbd54b4..bc43a6ce3a 100644 --- a/source/_patterns/01-elements/input/input.scss +++ b/source/_patterns/01-elements/input/input.scss @@ -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); From a0a20eaabf71490d196a8d336e95e817d07c37d3 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 13 Jul 2023 00:05:01 +0200 Subject: [PATCH 10/19] refactor: added radio related styles --- .../_patterns/01-elements/radio/_radio.variables.scss | 2 +- source/_patterns/01-elements/radio/radio.scss | 10 +++++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/source/_patterns/01-elements/radio/_radio.variables.scss b/source/_patterns/01-elements/radio/_radio.variables.scss index 9d624928e8..ef128bf04a 100644 --- a/source/_patterns/01-elements/radio/_radio.variables.scss +++ b/source/_patterns/01-elements/radio/_radio.variables.scss @@ -1,3 +1,3 @@ @import "../../../css/helpers/functions"; -$radio---border: $db-color-cool-gray-700 !default; +$radio---border: currentColor !default; diff --git a/source/_patterns/01-elements/radio/radio.scss b/source/_patterns/01-elements/radio/radio.scss index 0a9cdcc7da..f0f9641b6b 100644 --- a/source/_patterns/01-elements/radio/radio.scss +++ b/source/_patterns/01-elements/radio/radio.scss @@ -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); @@ -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); + } } } From 71f286033bec4c035d0cc185c17b6a3c6d195118 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 13 Jul 2023 00:11:31 +0200 Subject: [PATCH 11/19] refactor: added dark mode related styles --- source/_patterns/02-components/breadcrumb/breadcrumb.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/source/_patterns/02-components/breadcrumb/breadcrumb.scss b/source/_patterns/02-components/breadcrumb/breadcrumb.scss index 50e8b8a6d5..a554a0b498 100644 --- a/source/_patterns/02-components/breadcrumb/breadcrumb.scss +++ b/source/_patterns/02-components/breadcrumb/breadcrumb.scss @@ -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 { From 194f96e466229077abe90f52faf74b6861dad446 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 13 Jul 2023 00:22:08 +0200 Subject: [PATCH 12/19] refactor: added dark mode related styles --- source/_patterns/02-components/dialog/dialog.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/source/_patterns/02-components/dialog/dialog.scss b/source/_patterns/02-components/dialog/dialog.scss index 01cb407cc2..6bd65026e6 100644 --- a/source/_patterns/02-components/dialog/dialog.scss +++ b/source/_patterns/02-components/dialog/dialog.scss @@ -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; @@ -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)}); From 28d781e44eae3f5f7cdd10691ee923eef5d06dfd Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 13 Jul 2023 00:30:59 +0200 Subject: [PATCH 13/19] refactor: added dark mode related styles --- .../02-components/notifications/notification.scss | 2 +- .../02-components/overflow-menu/overflow-menu.scss | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/source/_patterns/02-components/notifications/notification.scss b/source/_patterns/02-components/notifications/notification.scss index 66d8aacd14..4cdf60e92c 100644 --- a/source/_patterns/02-components/notifications/notification.scss +++ b/source/_patterns/02-components/notifications/notification.scss @@ -10,7 +10,7 @@ margin-bottom: #{to-rem($pxValue: 16)}; padding: #{to-rem($pxValue: 16)}; // TODO: replace by spacing-m variable section[data-variant="hovering"] & { - background-color: #fff; + background-color: var(--db-element---backgroundColor); } // Alert variant diff --git a/source/_patterns/02-components/overflow-menu/overflow-menu.scss b/source/_patterns/02-components/overflow-menu/overflow-menu.scss index 4ad5cf4665..4888444f6c 100644 --- a/source/_patterns/02-components/overflow-menu/overflow-menu.scss +++ b/source/_patterns/02-components/overflow-menu/overflow-menu.scss @@ -2,7 +2,9 @@ @import "overflow-menu.variables"; .cmp-overflow-menu { - color: #2d333f; // TODO: replace by correct color + @media (prefers-color-scheme: light) { + color: #2d333f; // TODO: replace by correct color + } display: inline-block; position: relative; @@ -31,7 +33,9 @@ &:hover, &:focus { &::before { - background-color: $db-color-cool-gray-200; + @media (prefers-color-scheme: light) { + background-color: $db-color-cool-gray-200; + } } } From fadf1c9c9b77f0a57900d0532ec69df925dc806a Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 13 Jul 2023 00:31:58 +0200 Subject: [PATCH 14/19] refactor: added dark mode related styles --- source/_patterns/02-components/pagination/pagination.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/_patterns/02-components/pagination/pagination.scss b/source/_patterns/02-components/pagination/pagination.scss index 2a7447e0b0..e70304ede1 100644 --- a/source/_patterns/02-components/pagination/pagination.scss +++ b/source/_patterns/02-components/pagination/pagination.scss @@ -2,7 +2,7 @@ @import "pagination.variables"; .cmp-pagination { - color: $db-color-cool-gray-700; + color: var(--db-element---color); font-size: to-rem($pxValue: 14); user-select: none; From 2ef40e7d548620d0edd0ab1b094ca347b75b146d Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 13 Jul 2023 00:37:19 +0200 Subject: [PATCH 15/19] refactor: added dark mode related styles --- source/_patterns/02-components/table/_table.variables.scss | 2 +- source/_patterns/02-components/table/table.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/source/_patterns/02-components/table/_table.variables.scss b/source/_patterns/02-components/table/_table.variables.scss index db7f28d9e7..21691eb912 100644 --- a/source/_patterns/02-components/table/_table.variables.scss +++ b/source/_patterns/02-components/table/_table.variables.scss @@ -12,7 +12,7 @@ $table-cell-height68-paddingVertical: to-rem( $table-line--borderColor: $db-color-cool-gray-200 !default; -$table-row-zebra-color: rgba($db-color-cool-gray-700, 0.07) !default; +$table-row-zebra-color: color-mix(in srgb, transparent 93%, currentColor); $table-densitySmall--padding: $db-spacing-s !default; $table-densityRegular--padding: $db-spacing-sm !default; diff --git a/source/_patterns/02-components/table/table.scss b/source/_patterns/02-components/table/table.scss index 82af0d957f..1251ca0d22 100644 --- a/source/_patterns/02-components/table/table.scss +++ b/source/_patterns/02-components/table/table.scss @@ -22,8 +22,8 @@ } thead { - border-bottom: to-rem($pxValue: 1) solid $db-color-cool-gray-700; - border-top: to-rem($pxValue: 1) solid $db-color-cool-gray-700; + border-bottom: to-rem($pxValue: 1) solid currentColor; + border-top: to-rem($pxValue: 1) solid currentColor; th { color: $db-color-cool-gray-500; From bab03d6cf441ec6082cba340eefcdf5d9f5647db Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 13 Jul 2023 01:21:51 +0200 Subject: [PATCH 16/19] refactor: added dark mode related styles --- source/_patterns/02-components/table/table.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/_patterns/02-components/table/table.scss b/source/_patterns/02-components/table/table.scss index 1251ca0d22..0d7ceaaecd 100644 --- a/source/_patterns/02-components/table/table.scss +++ b/source/_patterns/02-components/table/table.scss @@ -52,10 +52,10 @@ } tbody { - border-bottom: to-rem($pxValue: 1) solid $db-color-cool-gray-700; + border-bottom: to-rem($pxValue: 1) solid currentColor; th:first-child { - border-right: 1px solid $db-color-warm-gray-700; + border-right: 1px solid currentColor; } } From 3639d0045ed0137180fd4cc3808a89150f98bf7e Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 13 Jul 2023 01:25:11 +0200 Subject: [PATCH 17/19] refactor: added dark mode related styles --- source/_patterns/02-components/table/table.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/source/_patterns/02-components/table/table.scss b/source/_patterns/02-components/table/table.scss index 0d7ceaaecd..73bff27289 100644 --- a/source/_patterns/02-components/table/table.scss +++ b/source/_patterns/02-components/table/table.scss @@ -26,7 +26,9 @@ border-top: to-rem($pxValue: 1) solid currentColor; th { - color: $db-color-cool-gray-500; + @media (prefers-color-scheme: light) { + color: $db-color-cool-gray-500; + } } } @@ -166,7 +168,7 @@ &[data-sticky="header"] { thead, tbody th { - background-color: #fff; + background-color: var(--db-element---backgroundColor); position: sticky; top: -1px; } From d1ee43de6e3138931d5fd18a3a64a5a4ab12ab0d Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Tue, 25 Jul 2023 09:21:22 +0200 Subject: [PATCH 18/19] refactor: slight optimization --- source/_patterns/00-base/icons/_icons.demonstration.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/source/_patterns/00-base/icons/_icons.demonstration.scss b/source/_patterns/00-base/icons/_icons.demonstration.scss index 695ba27fd3..4b120976bf 100644 --- a/source/_patterns/00-base/icons/_icons.demonstration.scss +++ b/source/_patterns/00-base/icons/_icons.demonstration.scss @@ -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; } From 598bcb48187ac1ec4abd72eaf9c094307ed3a441 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Tue, 21 Nov 2023 10:56:44 +0100 Subject: [PATCH 19/19] Update _init.global.scss --- source/_patterns/00-base/_init.global.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/_patterns/00-base/_init.global.scss b/source/_patterns/00-base/_init.global.scss index d1f326a992..f2f7640b55 100644 --- a/source/_patterns/00-base/_init.global.scss +++ b/source/_patterns/00-base/_init.global.scss @@ -57,9 +57,9 @@ a { } &:hover { - color: #5d616a; // TODO: Identify correct color variable + --db-text---color: #5d616a; // TODO: Identify correct color variable @media (prefers-color-scheme: dark) { - color: #cdd4da; // TODO: Identify correct color variable + --db-text---color: #cdd4da; // TODO: Identify correct color variable } } }