From 933e188f6b5f3495c266464b4162cc8a5f3cfd46 Mon Sep 17 00:00:00 2001 From: Tony Li Date: Tue, 18 Oct 2022 16:33:40 -0700 Subject: [PATCH 1/2] style(glossary): dark mode --- components/GlossaryItem/style.scss | 36 +++++++++++++++++++++++++----- 1 file changed, 31 insertions(+), 5 deletions(-) diff --git a/components/GlossaryItem/style.scss b/components/GlossaryItem/style.scss index 215d89adf..10cb2f985 100644 --- a/components/GlossaryItem/style.scss +++ b/components/GlossaryItem/style.scss @@ -1,4 +1,29 @@ .GlossaryItem { + --GlossaryItem-bg: var(--color-bg-page, var(--white)); + --GlossaryItem-color: var(--color-text-default, var(--gray20)); + --GlossaryItem-shadow: var(--box-shadow-menu-light, 0 5px 10px rgba(0, 0, 0, .05), + 0 2px 6px rgba(0, 0, 0, .025), + 0 1px 3px rgba(0, 0, 0, .025)); + + /* what the dark-mode mixin does in the readme project */ + [data-color-mode='dark'] & { + --GlossaryItem-bg: var(--gray15); + --GlossaryItem-color: var(--color-text-default, var(--white)); + --GlossaryItem-shadow: var(--box-shadow-menu-dark, 0 1px 3px rgba(0, 0, 0, 0.025), + 0 2px 6px rgba(0, 0, 0, 0.025), + 0 5px 10px rgba(0, 0, 0, 0.05)) + } + + @media (prefers-color-scheme: dark) { + [data-color-mode='auto'] & { + --GlossaryItem-bg: var(--Tooltip-bg, var(--gray0)); + --GlossaryItem-color: var(--color-text-default, var(--white)); + --GlossaryItem-shadow: var(--box-shadow-menu-dark, 0 1px 3px rgba(0, 0, 0, 0.025), + 0 2px 6px rgba(0, 0, 0, 0.025), + 0 5px 10px rgba(0, 0, 0, 0.05)) + } + } + &-trigger { border-bottom: 1px solid #737c83; border-style: dotted; @@ -9,16 +34,17 @@ } &-tooltip-content { - background-color: #fff; - border: 1px solid #e2e3e3; - border-radius: 5px; - box-shadow: 0 1px 3px -1px #e2e3e3; + background-color: var(--GlossaryItem-bg); + border: 1px solid #{var(--color-border-default, rgba(black, 0.1))}; + border-radius: var(--border-radius); + box-shadow: var(--GlossaryItem-shadow); + color: var(--GlossaryItem-color); font-size: 15px; font-weight: 400; line-height: 1.5; padding: 15px; text-align: left; - width: 350px; + width: 350px; } &-term { From a84d368e213ea66ca87d07697873067b5713dce4 Mon Sep 17 00:00:00 2001 From: Tony Li Date: Wed, 19 Oct 2022 17:39:11 -0700 Subject: [PATCH 2/2] fix(glossaryitem): actually apply styles --- components/GlossaryItem/style.scss | 50 +++++++++++++++--------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/components/GlossaryItem/style.scss b/components/GlossaryItem/style.scss index 10cb2f985..2a0a77897 100644 --- a/components/GlossaryItem/style.scss +++ b/components/GlossaryItem/style.scss @@ -1,29 +1,4 @@ .GlossaryItem { - --GlossaryItem-bg: var(--color-bg-page, var(--white)); - --GlossaryItem-color: var(--color-text-default, var(--gray20)); - --GlossaryItem-shadow: var(--box-shadow-menu-light, 0 5px 10px rgba(0, 0, 0, .05), - 0 2px 6px rgba(0, 0, 0, .025), - 0 1px 3px rgba(0, 0, 0, .025)); - - /* what the dark-mode mixin does in the readme project */ - [data-color-mode='dark'] & { - --GlossaryItem-bg: var(--gray15); - --GlossaryItem-color: var(--color-text-default, var(--white)); - --GlossaryItem-shadow: var(--box-shadow-menu-dark, 0 1px 3px rgba(0, 0, 0, 0.025), - 0 2px 6px rgba(0, 0, 0, 0.025), - 0 5px 10px rgba(0, 0, 0, 0.05)) - } - - @media (prefers-color-scheme: dark) { - [data-color-mode='auto'] & { - --GlossaryItem-bg: var(--Tooltip-bg, var(--gray0)); - --GlossaryItem-color: var(--color-text-default, var(--white)); - --GlossaryItem-shadow: var(--box-shadow-menu-dark, 0 1px 3px rgba(0, 0, 0, 0.025), - 0 2px 6px rgba(0, 0, 0, 0.025), - 0 5px 10px rgba(0, 0, 0, 0.05)) - } - } - &-trigger { border-bottom: 1px solid #737c83; border-style: dotted; @@ -34,6 +9,31 @@ } &-tooltip-content { + --GlossaryItem-bg: var(--color-bg-page, var(--white)); + --GlossaryItem-color: var(--color-text-default, var(--gray20)); + --GlossaryItem-shadow: var(--box-shadow-menu-light, 0 5px 10px rgba(0, 0, 0, .05), + 0 2px 6px rgba(0, 0, 0, .025), + 0 1px 3px rgba(0, 0, 0, .025)); + + /* what the dark-mode mixin does in the readme project */ + [data-color-mode='dark'] & { + --GlossaryItem-bg: var(--gray15); + --GlossaryItem-color: var(--color-text-default, var(--white)); + --GlossaryItem-shadow: var(--box-shadow-menu-dark, 0 1px 3px rgba(0, 0, 0, 0.025), + 0 2px 6px rgba(0, 0, 0, 0.025), + 0 5px 10px rgba(0, 0, 0, 0.05)) + } + + @media (prefers-color-scheme: dark) { + [data-color-mode='auto'] & { + --GlossaryItem-bg: var(--Tooltip-bg, var(--gray0)); + --GlossaryItem-color: var(--color-text-default, var(--white)); + --GlossaryItem-shadow: var(--box-shadow-menu-dark, 0 1px 3px rgba(0, 0, 0, 0.025), + 0 2px 6px rgba(0, 0, 0, 0.025), + 0 5px 10px rgba(0, 0, 0, 0.05)) + } + } + background-color: var(--GlossaryItem-bg); border: 1px solid #{var(--color-border-default, rgba(black, 0.1))}; border-radius: var(--border-radius);