From e2c9e3a5fcc4c67fc37c39187d5978af5127a639 Mon Sep 17 00:00:00 2001 From: David Oliver Date: Wed, 21 Feb 2024 08:36:21 +0100 Subject: [PATCH] Use dark backgrounds for admonition blocks in dark theme (#1869) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Admonition block heading backgrounds are set to the hues of the light theme and set to 80% opacity so as to mix with the background dark "gray" of the dark theme. Admonition blocks‘ text, headings and links now rely on theme-specific custom properties. --- assets/css/content/admonition.css | 9 ------- assets/css/custom-props/common.css | 1 + assets/css/custom-props/theme-dark.css | 34 +++++++++++++------------- test/examples/admonition.md | 26 ++++++++++---------- 4 files changed, 31 insertions(+), 39 deletions(-) diff --git a/assets/css/content/admonition.css b/assets/css/content/admonition.css index d639e2554..863b91e44 100644 --- a/assets/css/content/admonition.css +++ b/assets/css/content/admonition.css @@ -1,13 +1,8 @@ .content-inner blockquote:is(.warning, .error, .info, .neutral, .tip) { - color: var(--black); border-radius: 10px; border-left: 0; } -.content-inner blockquote:is(.warning, .error, .info, .neutral, .tip) :is(h1, h2, h3, h4, h5, h6) { - color: var(--black); -} - .content-inner blockquote.warning { background-color: var(--warningBackground); } @@ -107,10 +102,6 @@ color: var(--admCodeColor); } -.content-inner blockquote:is(.warning, .error, .info, .neutral, .tip) :is(a, a:visited) { - color: var(--black); -} - .content-inner blockquote :is(h3, h4):is(.warning, .error, .info, .neutral, .tip) :is(a, a:visited) { color: inherit; text-decoration-color: currentColor; diff --git a/assets/css/custom-props/common.css b/assets/css/custom-props/common.css index 1a66c47e1..a66f69e2b 100644 --- a/assets/css/custom-props/common.css +++ b/assets/css/custom-props/common.css @@ -36,6 +36,7 @@ --coldGrayLight: hsl(240, 5%, 88% ); --coldGray-lightened-10: hsl(240, 5%, 56% ); --coldGray: hsl(240, 5%, 46% ); + --coldGray-opacity-10: hsla(240, 5%, 46%, 10%); --coldGrayDark: hsl(240, 5%, 28% ); --coldGrayDim: hsl(240, 5%, 18% ); --yellowLight: hsl( 60, 100%, 81% ); diff --git a/assets/css/custom-props/theme-dark.css b/assets/css/custom-props/theme-dark.css index 608371f70..3a5575bd2 100644 --- a/assets/css/custom-props/theme-dark.css +++ b/assets/css/custom-props/theme-dark.css @@ -14,42 +14,42 @@ body.dark { --iconAction: var(--coldGray-lightened-10); --iconActionHover: var(--white); - --blockquoteBackground: var(--coldGrayDim); - --blockquoteBorder: var(--coldGrayDark); + --blockquoteBackground: var(--coldGray-opacity-10); + --blockquoteBorder: var(--coldGrayDim); --tableHeadBorder: var(--gray600); --tableBodyBorder: var(--gray700); - --warningBackground: hsl( 40, 67%, 79%); - --warningHeadingBackground: hsl( 27, 66%, 29%); + --warningBackground: hsla( 33, 30%, 60%, 10%); + --warningHeadingBackground: hsla( 33, 66%, 35%, 80%); --warningHeading: var(--white); - --errorBackground: hsl(358, 52%, 78%); - --errorHeadingBackground: hsl(349, 55%, 34%); + --errorBackground: hsla( 7, 30%, 60%, 10%); + --errorHeadingBackground: hsla( 6, 70%, 40%, 80%); --errorHeading: var(--white); - --infoBackground: hsl(222, 57%, 77%); - --infoHeadingBackground: hsl(243, 65%, 26%); + --infoBackground: hsla(206, 30%, 60%, 10%); + --infoHeadingBackground: hsla(213, 55%, 35%, 80%); --infoHeading: var(--white); - --neutralBackground: hsl(220, 23%, 82%); - --neutralHeadingBackground: hsl(224, 24%, 16%); + --neutralBackground: hsl(210, 30%, 60%, 10%); + --neutralHeadingBackground: var(--gray600); --neutralHeading: var(--white); - --tipBackground: hsl(139, 26%, 69%); - --tipHeadingBackground: hsl(158, 35%, 17%); + --tipBackground: hsla(142, 30%, 60%, 10%); + --tipHeadingBackground: hsla(134, 45%, 30%, 80%); --tipHeading: var(--white); --fnSpecAttr: var(--gray400); --fnDeprecated: var(--yellowDark); --blink: var(--gray600); - --codeBackground: var(--gray850); - --codeBorder: var(--gray700); + --codeBackground: var(--gray750); + --codeBorder: var(--gray600); --codeScrollThumb: var(--gray500); --codeScrollBackground: var(--codeBorder); --admCodeBackground: var(--gray750); --admCodeBorder: var(--gray600); --admCodeColor: var(--gray100); - --admInlineCodeColor: var(--black); - --admInlineCodeBackground: var(--gray25); - --admInlineCodeBorder: var(--gray100); + --admInlineCodeColor: var(--gray100); + --admInlineCodeBackground: var(--gray750); + --admInlineCodeBorder: var(--gray600); --tabBackground: var(--gray900); --tabBorder: var(--gray700); diff --git a/test/examples/admonition.md b/test/examples/admonition.md index 02881760d..47a16af0a 100644 --- a/test/examples/admonition.md +++ b/test/examples/admonition.md @@ -4,7 +4,7 @@ > ### Just a blockquote. > -> Some `code`. +> Some `code` and a [link](#). > > ```elixir > foo + bar @@ -18,7 +18,7 @@ > > #### Header 4 > -> Some `code`. +> Some `code` and a [link](#). > > ```elixir > foo + bar @@ -32,7 +32,8 @@ > > #### Header 4 > -> Some `code`. +> Some `code` and a [link](#). +> > > ```elixir > foo + bar @@ -46,7 +47,7 @@ > > #### Header 4 > -> Some `code`. +> Some `code` and a [link](#). > > ```elixir > foo + bar @@ -60,7 +61,7 @@ > > #### Header 4 > -> Some `code`. +> Some `code` and a [link](#). > > ```elixir > foo + bar @@ -74,7 +75,7 @@ > > #### Header 4 > -> Some `code`. +> Some `code` and a [link](#). > > ```elixir > foo + bar @@ -88,7 +89,7 @@ > #### Just a blockquote. > -> Some `code`. +> Some `code` and a [link](#). > > ```erlang > Foo + Bar. @@ -96,7 +97,7 @@ > #### Header 4 {: .info} > -> Some `code`. +> Some `code` and a [link](#). > > ```erlang > Foo + Bar. @@ -104,7 +105,7 @@ > #### Header 4 {: .tip} > -> Some `code`. +> Some `code` and a [link](#). > > ```erlang > Foo + Bar. @@ -112,7 +113,7 @@ > #### Header 4 {: .neutral} > -> Some `code`. +> Some `code` and a [link](#). > > ```erlang > Foo + Bar. @@ -120,7 +121,7 @@ > #### Header 4 {: .warning} > -> Some `code`. +> Some `code` and a [link](#). > > ```erlang > Foo + Bar. @@ -128,9 +129,8 @@ > #### Header 4 {: .error} > -> Some `code`. +> Some `code` and a [link](#). > > ```erlang > Foo + Bar. > ``` -