Use dark backgrounds for admonition blocks in dark theme (#1869)

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.
elixir-lang · Feb 21, 2024 · e2c9e3a · e2c9e3a
1 parent 5962468
commit e2c9e3a
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 39 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,49 +89,48 @@
 
 > #### Just a blockquote.
 >
-> Some `code`.
+> Some `code` and a [link](#).
 >
 > ```erlang
 > Foo + Bar.
 > ```
 
 > #### Header 4 {: .info}
 >
-> Some `code`.
+> Some `code` and a [link](#).
 >
 > ```erlang
 > Foo + Bar.
 > ```
 
 > #### Header 4 {: .tip}
 >
-> Some `code`.
+> Some `code` and a [link](#).
 >
 > ```erlang
 > Foo + Bar.
 > ```
 
 > #### Header 4 {: .neutral}
 >
-> Some `code`.
+> Some `code` and a [link](#).
 >
 > ```erlang
 > Foo + Bar.
 > ```
 
 > #### Header 4 {: .warning}
 >
-> Some `code`.
+> Some `code` and a [link](#).
 >
 > ```erlang
 > Foo + Bar.
 > ```
 
 > #### Header 4 {: .error}
 >
-> Some `code`.
+> Some `code` and a [link](#).
 >
 > ```erlang
 > Foo + Bar.
 > ```
-