From 269fd5ed95b89af22ec25dec8496f2b4edc8bfd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Wed, 16 Feb 2022 01:38:44 +0100
Subject: [PATCH] theme: rework color boxes for dark mode #175

---
 .../content/basics/customization/_index.en.md |  14 +-
 layouts/shortcodes/attachments.html           |   8 +-
 layouts/shortcodes/notice.html                |   8 +-
 static/css/theme-blue.css                     |  12 ++
 static/css/theme-green.css                    |  12 ++
 static/css/theme-learn.css                    |  12 ++
 static/css/theme-red.css                      |  12 ++
 static/css/theme-relearn-dark.css             |  12 ++
 static/css/theme-relearn-light.css            |  12 ++
 static/css/theme.css                          | 180 +++++++++---------
 static/css/variant.css                        |  99 ++++++++--
 11 files changed, 262 insertions(+), 119 deletions(-)

diff --git a/exampleSite/content/basics/customization/_index.en.md b/exampleSite/content/basics/customization/_index.en.md
index 67bc0f9f2b..502e050f3f 100644
--- a/exampleSite/content/basics/customization/_index.en.md
+++ b/exampleSite/content/basics/customization/_index.en.md
@@ -149,7 +149,19 @@ First, create a new CSS file in your local `static/css` folder prefixed by `them
     --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #ffffff; /* Color of background for the active category (only) */
 
     --MENU-VISITED-color: #506397; /* Color of 'page visited' icons in menu */
-    --MENU-SECTION-HR-color: #282830; /* Color of <hr> separator in menu */
+    --MENU-SECTION-HR-color: #606060; /* Color of <hr> separator in menu */
+
+    /* base styling for boxes */
+    --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
+    --BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */
+    --BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */
+
+    /* optional base colors for colored boxes as in attachments and notice shortcode */
+    --BOX-BLUE-color: rgba( 48, 117, 229, 1 );
+    --BOX-GREEN-color: rgba( 42, 178, 24, 1 );
+    --BOX-GREY-color: rgba( 128, 128, 128, 1 );
+    --BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
+    --BOX-RED-color: rgba( 224, 62, 62, 1 );
 }
 ```
 
diff --git a/layouts/shortcodes/attachments.html b/layouts/shortcodes/attachments.html
index 0c17506257..471bc78170 100644
--- a/layouts/shortcodes/attachments.html
+++ b/layouts/shortcodes/attachments.html
@@ -1,10 +1,10 @@
 {{- $_hugo_config := `{ "version": 1 }` }}
-{{- $style := .Get "style" | default "neutral" }}
+{{- $style := .Get "style" | default "transparent" }}
 {{- $title := .Get "title" | default ("Attachments-label" | T) }}
 {{- $sort := .Get "sort" | default "asc" }}
-<div class="attachments {{ $style }}">
-  <div class="label">{{ $title }}</div>
-  <ul class="attachments-files">
+<div class="box attachments {{ $style }}">
+  <div class="box-label">{{ $title }}</div>
+  <ul class="box-content attachments-files">
   {{- $filesName := "files" }}
   {{- if ne .Page.File.BaseFileName "index" }}
     {{- $filesName = printf "%s.files" .Page.File.BaseFileName }}
diff --git a/layouts/shortcodes/notice.html b/layouts/shortcodes/notice.html
index 85c91a5708..48c7ef6ce5 100644
--- a/layouts/shortcodes/notice.html
+++ b/layouts/shortcodes/notice.html
@@ -1,7 +1,9 @@
 {{- $_hugo_config := `{ "version": 1 }` }}
 {{- $style := .Get 0 }}
 {{- $title := .Get 1 | default ($style | T) }}
-<div class="notices {{ $style }}">
-    <div class="label">{{ $title }}</div>
-{{ .Inner -}}
+<div class="box notices {{ $style }}">
+    <div class="box-label">{{ $title }}</div>
+    <div class="box-content">
+{{ .Inner }}
+    </div>
 </div>
\ No newline at end of file
diff --git a/static/css/theme-blue.css b/static/css/theme-blue.css
index b7dd4d97a5..be97ca33b2 100644
--- a/static/css/theme-blue.css
+++ b/static/css/theme-blue.css
@@ -41,4 +41,16 @@
 
     --MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */
     --MENU-SECTION-HR-color: #20272b; /* Color of <hr> separator in menu */
+
+    /* base styling for boxes */
+    --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
+    --BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */
+    --BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */
+
+    /* optional base colors for colored boxes as in attachments and notice shortcode */
+    --BOX-BLUE-color: rgba( 48, 117, 229, 1 );
+    --BOX-GREEN-color: rgba( 42, 178, 24, 1 );
+    --BOX-GREY-color: rgba( 128, 128, 128, 1 );
+    --BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
+    --BOX-RED-color: rgba( 224, 62, 62, 1 );
 }
diff --git a/static/css/theme-green.css b/static/css/theme-green.css
index a80d81d1b8..d664b112b8 100644
--- a/static/css/theme-green.css
+++ b/static/css/theme-green.css
@@ -41,4 +41,16 @@
 
     --MENU-VISITED-color: #599a3e; /* Color of 'page visited' icons in menu */
     --MENU-SECTION-HR-color: #18211c; /* Color of <hr> separator in menu */
+
+    /* base styling for boxes */
+    --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
+    --BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */
+    --BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */
+
+    /* optional base colors for colored boxes as in attachments and notice shortcode */
+    --BOX-BLUE-color: rgba( 48, 117, 229, 1 );
+    --BOX-GREEN-color: rgba( 42, 178, 24, 1 );
+    --BOX-GREY-color: rgba( 128, 128, 128, 1 );
+    --BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
+    --BOX-RED-color: rgba( 224, 62, 62, 1 );
 }
diff --git a/static/css/theme-learn.css b/static/css/theme-learn.css
index 84d57a7ddb..b0057f8aea 100644
--- a/static/css/theme-learn.css
+++ b/static/css/theme-learn.css
@@ -41,4 +41,16 @@
 
     --MENU-VISITED-color: #00bdf3; /* Color of 'page visited' icons in menu */
     --MENU-SECTION-HR-color: #2a232f; /* Color of <hr> separator in menu */
+
+    /* base styling for boxes */
+    --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
+    --BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */
+    --BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */
+
+    /* optional base colors for colored boxes as in attachments and notice shortcode */
+    --BOX-BLUE-color: rgba( 48, 117, 229, 1 );
+    --BOX-GREEN-color: rgba( 42, 178, 24, 1 );
+    --BOX-GREY-color: rgba( 128, 128, 128, 1 );
+    --BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
+    --BOX-RED-color: rgba( 224, 62, 62, 1 );
 }
diff --git a/static/css/theme-red.css b/static/css/theme-red.css
index 9745eb07b7..7f1637637d 100644
--- a/static/css/theme-red.css
+++ b/static/css/theme-red.css
@@ -41,4 +41,16 @@
 
     --MENU-VISITED-color: #ff3333; /* Color of 'page visited' icons in menu */
     --MENU-SECTION-HR-color: #2b2020; /* Color of <hr> separator in menu */
+
+    /* base styling for boxes */
+    --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
+    --BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */
+    --BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */
+
+    /* optional base colors for colored boxes as in attachments and notice shortcode */
+    --BOX-BLUE-color: rgba( 48, 117, 229, 1 );
+    --BOX-GREEN-color: rgba( 42, 178, 24, 1 );
+    --BOX-GREY-color: rgba( 128, 128, 128, 1 );
+    --BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
+    --BOX-RED-color: rgba( 224, 62, 62, 1 );
 }
diff --git a/static/css/theme-relearn-dark.css b/static/css/theme-relearn-dark.css
index 07b29eaa35..4c26a95ec9 100644
--- a/static/css/theme-relearn-dark.css
+++ b/static/css/theme-relearn-dark.css
@@ -41,4 +41,16 @@
 
     --MENU-VISITED-color: #569cd8; /* Color of 'page visited' icons in menu */
     --MENU-SECTION-HR-color: #606060; /* Color of <hr> separator in menu */
+
+    /* base styling for boxes */
+    --BOX-CAPTION-color: rgba( 240, 240, 240, 1 ); /* color of the title text */
+    --BOX-BG-color: rgba( 20, 20, 20, 1 ); /* color of the content background */
+    --BOX-TEXT-color: initial; /* automatic color of the content text */
+
+    /* optional base colors for colored boxes as in attachments and notice shortcode */
+    --BOX-BLUE-color: rgba( 48, 117, 229, 1 );
+    --BOX-GREEN-color: rgba( 42, 178, 24, 1 );
+    --BOX-GREY-color: rgba( 128, 128, 128, 1 );
+    --BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
+    --BOX-RED-color: rgba( 224, 62, 62, 1 );
 }
diff --git a/static/css/theme-relearn-light.css b/static/css/theme-relearn-light.css
index 8bf4dddc6a..693feeee4e 100644
--- a/static/css/theme-relearn-light.css
+++ b/static/css/theme-relearn-light.css
@@ -41,4 +41,16 @@
 
     --MENU-VISITED-color: #506397; /* Color of 'page visited' icons in menu */
     --MENU-SECTION-HR-color: #606060; /* Color of <hr> separator in menu */
+
+    /* base styling for boxes */
+    --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
+    --BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */
+    --BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* optional color of the content text */
+
+    /* optional base colors for colored boxes as in attachments and notice shortcode */
+    --BOX-BLUE-color: rgba( 48, 117, 229, 1 );
+    --BOX-GREEN-color: rgba( 42, 178, 24, 1 );
+    --BOX-GREY-color: rgba( 128, 128, 128, 1 );
+    --BOX-ORANGE-color: rgba( 237, 153, 9, 1 );
+    --BOX-RED-color: rgba( 224, 62, 62, 1 );
 }
diff --git a/static/css/theme.css b/static/css/theme.css
index 0a9d3dbc82..e6a698c606 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -494,149 +494,139 @@ blockquote cite {
     text-align: right;
 }
 
-div.notices {
-    background-color: #eaeaea;
-    border-color: rgba( 80, 80, 80, .8 );
-    border-top-style: solid;
-    border-top-width: 2rem;
-    color: #323232;
+/* colored boxes */
+
+div.box {
+    background-color: #808080; /* var(--INTERNAL-BOX-NEUTRAL-color) */
+    color: #808080; /* var(--INTERNAL-BOX-NEUTRAL-color) */
 	-webkit-print-color-adjust: exact;
 	color-adjust: exact;
     margin: 1.5rem 0;
-    padding-bottom: .1px;
-    padding-left: 1rem;
-    padding-right: 1rem;
 }
 
-div.notices > div.label:first-child:before {
-    content: "";
-}
-
-div.notices > div.label {
-    color: #ffffff;
+div.box > .box-label {
+    color: rgba( 255, 255, 255, 1 ); /* var(--BOX-CAPTION-color) */
     font-weight: 500;
-    margin-bottom: 1rem;
-    margin-top: -1.75rem;
+    padding: .2rem 1rem;
 }
 
-div.notices > div.label:first-child:before {
+div.box > .box-label:first-child:before {
+    content: "";
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
 }
 
-div.notices.info {
-    background-color: #e5f0ff;
-    border-color: rgba( 48, 117, 229, .8 );
+div.box > .box-content {
+    background-color: rgba( 255, 255, 255, .833 ); /* var(--BOX-BG-color) */
+    color: rgba( 16, 16, 16, 1 ); /* var(--BOX-TEXT-color) */
+    padding-bottom: .1rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
 }
 
-div.notices.info > div.label:first-child:before {
+div.box > .box-content > :first-child {
+    margin-top: 0;
+    padding-top: 1rem;
+}
+
+div.box > .box-content > :last-child {
+    margin-bottom: 1rem;
+}
+
+div.box.info {
+    background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-INFO-color) */
+    color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-INFO-color) */
+}
+
+div.box.info > .box-label:first-child:before {
     content: "\f05a";
     margin-left: -.15rem;
     margin-right: .35rem;
 }
 
-div.notices.warning {
-    background-color: #ffe5e5;
-    border-color: rgba( 224, 62, 62, .8 );
+div.box.warning {
+    background-color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-WARNING-color) */
+    color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-WARNING-color) */
 }
 
-div.notices.warning > div.label:first-child:before {
+div.box.warning > .box-label:first-child:before {
     content: "\f071";
     margin-left: -.15rem;
     margin-right: .35rem;
 }
 
-div.notices.note {
-    background-color: #ffedd5;
-    border-color: rgba( 237, 153, 9, .8 );
+div.box.note {
+    background-color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-NOTE-color) */
+    color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-NOTE-color) */
 }
 
-div.notices.note > div.label:first-child:before {
+div.box.note > .box-label:first-child:before {
     content: "\f06a";
     margin-left: -.15rem;
     margin-right: .35rem;
 }
 
-div.notices.tip {
-    background-color: #e2fce0;
-    border-color: rgba( 42, 178, 24, .8 );
+div.box.tip {
+    background-color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-TIP-color) */
+    color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-TIP-color) */
 }
 
-div.notices.tip > div.label:first-child:before {
+div.box.tip > .box-label:first-child:before {
     content: "\f0eb";
     margin-left: -.15rem;
     margin-right: .35rem;
 }
 
+div.box.blue {
+    background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-BLUE-color) */
+    color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-BLUE-color) */
+}
+
+div.box.green {
+    background-color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-GREEN-color) */
+    color: rgba( 42, 178, 24, 1 ); /* var(--INTERNAL-BOX-GREEN-color) */
+}
+
+div.box.grey {
+    background-color: #808080; /* var(--INTERNAL-BOX-GREY-color) */
+    color: #808080; /* var(--INTERNAL-BOX-GREY-color) */
+}
+
+div.box.orange {
+    background-color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-ORANGE-color) */
+    color: rgba( 237, 153, 9, 1 ); /* var(--INTERNAL-BOX-ORANGE-color) */
+}
+
+div.box.red {
+    background-color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-RED-color) */
+    color: rgba( 224, 62, 62, 1 ); /* var(--INTERNAL-BOX-RED-color) */
+}
+
+div.box.transparent {
+    background-color: transparent;
+    color: #ffffff; /* var(--MAIN-TEXT-color) */
+}
+
+div.box.transparent > .box-label {
+    color: #7c7c7c; /* var(--MAIN-TITLES-TEXT-color) */
+}
+
+div.box.transparent > .box-content {
+    background-color: transparent;
+}
+
 /* attachments shortcode */
 
-div.attachments {
-    border-top-style: solid;
-    border-top-width: 2rem;
-    color: #323232;
-	-webkit-print-color-adjust: exact;
-	color-adjust: exact;
-    margin: 1.5rem 0;
-    padding-bottom: .1px;
-    padding-left: 1rem;
-    padding-right: 1rem;
-}
-
-div.attachments > div.label {
-    color: #ffffff;
-    font-weight: 500;
-    margin-bottom: 1rem;
-    margin-top: -1.75rem;
-}
-
-div.attachments > div.label:first-child:before {
+div.attachments > .box-label:first-child:before {
     content: "\f0c6";
-    font-family: "Font Awesome 5 Free";
-    font-weight: 900;
     margin-left: -.35rem;
     margin-right: .35rem;
 }
 
-div.attachments .attachments-files {
+div.attachments .box-content {
     display: block;
-    font-size: 1rem;
-    margin-bottom: 0rem;
-    margin-top: -1rem;
-    padding: 1rem;
-}
-
-div.attachments.orange {
-    background-color: #ffedd5;
-    border-color: rgba( 237, 153, 9, .8 );
-}
-
-div.attachments.green {
-    background-color: #e2fce0;
-    border-color: rgba( 42, 178, 24, .8 );
-}
-
-div.attachments.red {
-    background-color: #ffe5e5;
-    border-color: rgba( 224, 62, 62, .8 );
-}
-
-div.attachments.blue {
-    background-color: #e5f0ff;
-    border-color: rgba( 48, 117, 229, .8 );
-}
-
-div.attachments.grey {
-    background-color: #eaeaea;
-    border-color: rgba( 80, 80, 80, .8 );
-}
-
-div.attachments.neutral {
-    background-color: transparent;
-    border-color: transparent;
-}
-
-div.attachments.neutral > div.label {
-    color: #5e5e5e;
+    margin: 0;
+    padding-left: 1.75rem;
 }
 
 /* Children shortcode */
diff --git a/static/css/variant.css b/static/css/variant.css
index 3057d69890..3d52e6f129 100644
--- a/static/css/variant.css
+++ b/static/css/variant.css
@@ -1,3 +1,19 @@
+:root {
+    --INTERNAL-BOX-TEXT-color: var(--BOX-TEXT-color);
+
+    --INTERNAL-BOX-BLUE-color: var(--BOX-BLUE-color, rgba( 48, 117, 229, 1 ));
+    --INTERNAL-BOX-GREEN-color: var(--BOX-GREEN-color, rgba( 42, 178, 24, 1 ));
+    --INTERNAL-BOX-GREY-color: var(--BOX-GREY-color, rgba( 128, 128, 128, 1 ));
+    --INTERNAL-BOX-ORANGE-color: var(--BOX-ORANGE-color, rgba( 237, 153, 9, 1 ));
+    --INTERNAL-BOX-RED-color: var(--BOX-RED-color, rgba( 224, 62, 62, 1 ));
+
+    --INTERNAL-BOX-INFO-color: var(--BOX-INFO-color, var(--INTERNAL-BOX-BLUE-color));
+    --INTERNAL-BOX-NEUTRAL-color: var(--BOX-NEUTRAL-color, var(--INTERNAL-BOX-GREY-color));
+    --INTERNAL-BOX-NOTE-color: var(--BOX-NOTE-color, var(--INTERNAL-BOX-ORANGE-color));
+    --INTERNAL-BOX-TIP-color: var(--BOX-TIP-color, var(--INTERNAL-BOX-GREEN-color));
+    --INTERNAL-BOX-WARNING-color: var(--BOX-WARNING-color, var(--INTERNAL-BOX-RED-color));
+}
+
 body {
     background-color: var(--MAIN-BG-color, #ffffff);
     color: var(--MAIN-TEXT-color);
@@ -67,22 +83,6 @@ h2, h3, h4, h5, h6 {
     color: var(--MAIN-TITLES-TEXT-color);
 }
 
-div.notices > div.label {
-    color: var(--MAIN-BG-color, #ffffff);
-}
-
-div.attachments > div.label {
-    color: var(--MAIN-BG-color, #ffffff);
-}
-
-div.attachments.neutral {
-    color: var(--MAIN-TEXT-color);
-}
-
-div.attachments.neutral > div.label {
-    color: var(--MAIN-TITLES-TEXT-color);
-}
-
 code {
     background-color: var(--CODE-INLINE-BG-color, #fffae9);
     border-color: var(--CODE-INLINE-BORDER-color, #f8e8c8);
@@ -178,3 +178,70 @@ pre .copy-to-clipboard:hover {
     background-color: var(--MAIN-BG-color, #ffffff) !important;
     border-bottom-color: var(--MAIN-BG-color, #ffffff) !important;
 }
+
+div.box {
+    background-color: var(--INTERNAL-BOX-NEUTRAL-color);
+    color: var(--INTERNAL-BOX-NEUTRAL-color);
+}
+
+div.box > .box-label {
+    color: var(--BOX-CAPTION-color, rgba( 255, 255, 255, 1 ));
+}
+
+div.box > .box-content {
+    background-color: var(--BOX-BG-color, rgba( 255, 255, 255, .833 ));
+    color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-TEXT-color));
+}
+
+div.box.info {
+    background-color: var(--INTERNAL-BOX-INFO-color);
+    color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-INFO-color));
+}
+
+div.box.warning {
+    background-color: var(--INTERNAL-BOX-WARNING-color);
+    color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-WARNING-color));
+}
+
+div.box.note {
+    background-color: var(--INTERNAL-BOX-NOTE-color);
+    color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-NOTE-color));
+}
+
+div.box.tip {
+    background-color: var(--INTERNAL-BOX-TIP-color);
+    color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-TIP-color));
+}
+
+div.box.blue {
+    background-color: var(--INTERNAL-BOX-BLUE-color);
+    color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-BLUE-color));
+}
+
+div.box.green {
+    background-color: var(--INTERNAL-BOX-GREEN-color);
+    color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-GREEN-color));
+}
+
+div.box.grey {
+    background-color: var(--INTERNAL-BOX-GREY-color);
+    color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-GREY-color));
+}
+
+div.box.orange {
+    background-color: var(--INTERNAL-BOX-ORANGE-color);
+    color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-ORANGE-color));
+}
+
+div.box.red {
+    background-color: var(--INTERNAL-BOX-RED-color);
+    color: var(--BOX-TEXT-color, var(--INTERNAL-BOX-RED-color));
+}
+
+div.box.transparent {
+    color: var(--MAIN-TEXT-color);
+}
+
+div.box.transparent > .box-label {
+    color: var(--MAIN-TITLES-TEXT-color);
+}