theme: merge variant.css in theme.css #922

- for improving maintainability
- preparing for font switch

assets/css/theme.css

@@ -107,13 +107,17 @@ need a way to calculate them ourself */
 }
 
 html {
+    color-scheme: only var(--INTERNAL-BROWSER-theme);
     height: 100%;
     width: 100%;
 }
 
 body {
+    background-color: var(--INTERNAL-MAIN-BG-color);
+    color: var(--INTERNAL-MAIN-TEXT-color);
     display: flex;
     flex-direction: row-reverse; /* to allow body to have initial focus for PS in some browsers and better SEO and a11y */
+    font-family: var(--INTERNAL-MAIN-font);
     font-size: 1.015625rem;
     font-weight: 300;
     height: 100%;
@@ -143,11 +147,26 @@ dd {
     list-style: circle;
 }
 
+a,
+.topbar-button button{
+    color: var(--INTERNAL-MAIN-LINK-color);
+}
+
+a:hover,
+a:active,
+a:focus,
+.topbar-button button:hover,
+.topbar-button button:active,
+.topbar-button button:focus{
+    color: var(--INTERNAL-MAIN-LINK-HOVER-color);
+}
+
 .default-animation{
     transition: all 0.35s ease;
 }
 
 #R-sidebar {
+    background: var(--INTERNAL-MENU-SECTIONS-BG-color);
     display: flex;
     flex-basis: auto;
     flex-direction: column;
@@ -169,6 +188,8 @@ dd {
 }
 
 #R-header-wrapper {
+    background-color: var(--INTERNAL-MENU-HEADER-BG-color);
+    color: var(--INTERNAL-MENU-SEARCH-color);
     text-align: center;
     padding: 1rem;
     position: relative;
@@ -183,6 +204,8 @@ dd {
 }
 
 .searchbox {
+    background-color: var(--INTERNAL-MENU-SEARCH-BG-color);
+    border-color: var(--INTERNAL-MENU-SEARCH-BORDER-color);
     border-radius: 4px;
     border-style: solid;
     border-width: 1px;
@@ -216,6 +239,7 @@ dd {
 
 #R-sidebar .searchbox > :first-child,
 #R-sidebar .searchbox > :last-child{
+    color: var(--INTERNAL-MENU-SEARCH-color);
     opacity: .65;
 }
 
@@ -237,7 +261,11 @@ dd {
     font-weight: 300;
 }
 
+.searchbox input::-webkit-input-placeholder{
+    color: var(--INTERNAL-MENU-SEARCH-color);
+}
 .searchbox input::placeholder {
+    color: var(--INTERNAL-MENU-SEARCH-color);
     opacity: .45;
 }
 
@@ -266,6 +294,10 @@ dd {
     margin: 0 auto;
 }
 
+#R-footer {
+    color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
+}
+
 #R-footer > hr:first-child {
     margin-top: 0;
 }
@@ -299,11 +331,15 @@ dd {
     position: absolute;
 }
 
+#R-sidebar ul li > a .read-icon {
+    color: var(--INTERNAL-MENU-VISITED-color);
+}
 #R-sidebar ul li.visited > a .read-icon {
     display: inline;
 }
 
 #R-sidebar .nav-title {
+    color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
     font-size: 2rem;
     font-weight: 200;
     letter-spacing: -.02175em;
@@ -319,12 +355,15 @@ dd {
 }
 
 #R-content-wrapper hr {
+    border-color: var(--INTERNAL-MENU-SECTION-SEPARATOR-color);
     border-bottom-style: solid;
     border-bottom-width: 1px;
     margin: 1.5rem 1rem 1rem 1rem;
 }
 
 article .R-taxonomy.tags {
+    --VARIABLE-TAGS-color: var(--INTERNAL-MAIN-BG-color);
+    --VARIABLE-TAGS-BG-color: var(--VARIABLE-BOX-color);
     margin-left: 1rem;
     margin-top: 1rem;
 }
@@ -334,9 +373,11 @@ article .R-taxonomy.tags ul > li ~ li:before {
 }
 
 article .R-taxonomy.tags a.term-link {
+    background-color: var(--VARIABLE-TAGS-BG-color);
     border-bottom-right-radius: 3px;
     border-top-right-radius: 3px;
     box-shadow: 0 1px 2px rgba( 0, 0, 0, .2 );
+    color: var(--VARIABLE-TAGS-color);
     display: inline-block;
     font-size: 0.8em;
     font-weight: 400;
@@ -349,6 +390,7 @@ article .R-taxonomy.tags a.term-link {
 
 article .R-taxonomy.tags a.term-link:before {
     border-color: transparent;
+    border-right-color: var(--VARIABLE-TAGS-BG-color);
     border-style: solid;
     border-width: 1em 1em 1em 0;
     content: "";
@@ -360,6 +402,7 @@ article .R-taxonomy.tags a.term-link:before {
 }
 
 article .R-taxonomy.tags a.term-link:after {
+    background-color: var(--VARIABLE-TAGS-color);
     border-radius: 100%;
     content: "";
     left: 1px;
@@ -578,6 +621,12 @@ body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow p {
 
 mark {
     background: transparent;
+    background-image: linear-gradient(
+        to right,
+        color-mix( in srgb, var(--INTERNAL-ACCENT-color) 20%, transparent ),
+        color-mix( in srgb, var(--INTERNAL-ACCENT-color) 90%, transparent ) 4%,
+        color-mix( in srgb, var(--INTERNAL-ACCENT-color) 40%, transparent )
+    );
     border-radius: 0.8em 0.3rem;
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
@@ -595,8 +644,10 @@ kbd {
     border-style: solid;
     border-width: 1px;
     box-shadow: 0 .0625rem 0 .0625rem rgba( 134, 134, 134, .5 );
+    color: var(--INTERNAL-TEXT-color);
     -webkit-print-color-adjust: exact;
     color-adjust: exact;
+    font-family: var(--INTERNAL-CODE-font);
     font-size: 0.75rem;
     line-height: 1;
     min-width: 0.75rem;
@@ -607,6 +658,8 @@ kbd {
 }
 
 h1 {
+    color: var(--INTERNAL-MAIN-TITLES-H1-color);
+    font-family: var(--INTERNAL-MAIN-TITLES-H1-font);
     font-size: 3.25rem;
     font-weight: 200;
     margin: 0.85rem 0 1rem 0;
@@ -634,26 +687,36 @@ body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow h1 {
 }
 
 h2 {
+    color: var(--INTERNAL-MAIN-TITLES-H2-color);
+    font-family: var(--INTERNAL-MAIN-TITLES-H2-font);
     font-size: 2.2rem;
     font-weight: 500;
 }
 
 h3, .article-subheading {
+    color: var(--INTERNAL-MAIN-TITLES-H3-color);
+    font-family: var(--INTERNAL-MAIN-TITLES-H3-font);
     font-size: 1.8rem;
     font-weight: 500;
 }
 
 h4 {
+    color: var(--INTERNAL-MAIN-TITLES-H4-color);
+    font-family: var(--INTERNAL-MAIN-TITLES-H4-font);
     font-size: 1.85rem;
     font-weight: 300;
 }
 
 h5 {
+    color: var(--INTERNAL-MAIN-TITLES-H5-color);
+    font-family: var(--INTERNAL-MAIN-TITLES-H5-font);
     font-size: 1.6rem;
     font-weight: 300;
 }
 
 h6 {
+    color: var(--INTERNAL-MAIN-TITLES-H6-color);
+    font-family: var(--INTERNAL-MAIN-TITLES-H6-font);
     font-size: 1.3rem;
     font-weight: 300;
 }
@@ -693,22 +756,16 @@ blockquote cite {
 
 /* colored boxes */
 
-.cstyle {
-    --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
-    --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-BOX-CAPTION-color);
-    --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color);
-    -webkit-print-color-adjust: exact;
-    color-adjust: exact;
-}
-
 div.box {
+    background-color: var(--VARIABLE-BOX-color);
+    border-color: var(--VARIABLE-BOX-color);
     margin: 1.5rem 0;
     border-style: solid;
     border-width: 1px;
 }
 
 div.box > .box-label {
+    color: var(--VARIABLE-BOX-CAPTION-color);
     font-weight: 500;
     margin-left: .6rem;
     margin-right: .6rem;
@@ -716,6 +773,8 @@ div.box > .box-label {
 }
 
 div.box > .box-content {
+    background-color: var(--VARIABLE-BOX-BG-color);
+    color: var(--VARIABLE-BOX-TEXT-color);
     padding-top: 1rem;
     padding-bottom: 1rem;
     padding-left: 1rem;
@@ -824,14 +883,18 @@ code,
 kbd,
 pre:not(.mermaid),
 samp {
+    font-family: var(--INTERNAL-CODE-font);
     font-size: .934375rem;
     vertical-align: baseline;
 }
 
 code {
+    background-color: var(--INTERNAL-CODE-INLINE-BG-color);
+    border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
     border-radius: 2px;
     border-style: solid;
     border-width: 1px;
+    color: var(--INTERNAL-CODE-INLINE-color);
     -webkit-print-color-adjust: economy;
     color-adjust: economy;
     padding-left: 2px;
@@ -851,9 +914,12 @@ code.copy-to-clipboard-code {
 }
 
 pre:not(.mermaid) {
+    background-color: var(--INTERNAL-CODE-BLOCK-BG-color);
+    border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
     border-radius: 2px;
     border-style: solid;
     border-width: 1px;
+    color: var(--INTERNAL-CODE-BLOCK-color);
     -webkit-print-color-adjust: economy;
     color-adjust: economy;
     line-height: 1.15;
@@ -884,6 +950,8 @@ div.highlight{
 }
 /* we may have special treatment if highlight shortcode was used in table lineno mode */
 div.highlight > div{
+    background-color: var(--INTERNAL-CODE-BLOCK-BG-color);
+    border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
     border-style: solid;
     border-width: 1px;
 }
@@ -955,6 +1023,7 @@ hr {
 }
 
 table {
+    background-color: var(--INTERNAL-MAIN-BG-color);
     border: 1px solid rgba( 134, 134, 134, .333 );
     margin-bottom: 1rem;
     margin-top: 1rem;
@@ -1166,11 +1235,17 @@ tbody > tr:nth-child(even) > td {
 }
 
 .topbar-sidebar-divider {
+    border-inline-start-color: var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color);
     border-inline-start-style: solid;
     border-inline-start-width: 1px;
     margin-inline-end: -1px;
     width: 1px;
 }
+@media screen and (max-width: 47.999rem) {
+    .topbar-sidebar-divider {
+        border-inline-start-color: transparent;
+    }
+}
 .topbar-sidebar-divider::after {
     content: "\00a0";
 }
@@ -1239,6 +1314,7 @@ html[dir="rtl"] .topbar-button-next i {
 }
 
 #R-body a[aria-disabled="true"] {
+    color: var(--INTERNAL-MAIN-TEXT-color);
     pointer-events: none;
     text-decoration: none;
 }
@@ -1300,16 +1376,24 @@ html[dir="rtl"] .topbar-button-next i {
 }
 
 .copy-to-clipboard-button {
+    background-color: var(--INTERNAL-CODE-INLINE-BG-color);
+    border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
     border-start-start-radius: 0;
     border-start-end-radius: 2px;
     border-end-end-radius: 2px;
     border-end-start-radius: 0;
     border-style: solid;
     border-width: 1px;
+    color: var(--INTERNAL-CODE-INLINE-color);
     cursor: pointer;
+    font-family: var(--INTERNAL-CODE-font);
     font-size: .934375rem;
     line-height: 1.15;
 }
+.copy-to-clipboard-button:hover {
+    background-color: var(--INTERNAL-CODE-INLINE-color);
+    color: var(--INTERNAL-CODE-INLINE-BG-color);
+}
 
 span > .copy-to-clipboard-button {
     border-start-start-radius: 0;
@@ -1350,14 +1434,23 @@ div.highlight > div table + .copy-to-clipboard-button,
 div.highlight pre:not(.mermaid) + .copy-to-clipboard-button,
 pre:not(.mermaid) > .copy-to-clipboard-button {
     background-color: rgba( 160, 160, 160, .2 );
+    border-color: transparent;
     border-radius: 2px;
     border-style: solid;
     border-width: 1px;
-    right: 4px;
+    color: var(--INTERNAL-MAIN-LINK-color);
     padding: 5px 3px;
     position: absolute;
+    right: 4px;
     top: 4px;
 }
+div.highlight > div table + .copy-to-clipboard-button:hover,
+div.highlight pre:not(.mermaid) + .copy-to-clipboard-button:hover,
+pre:not(.mermaid) .copy-to-clipboard-button:hover {
+    background-color: var(--INTERNAL-MAIN-LINK-color);
+    border-color: var(--INTERNAL-MAIN-LINK-color);
+    color: var(--INTERNAL-CODE-BLOCK-BG-color);
+}
 
 .disableInlineCopyToClipboard span > code.copy-to-clipboard-code + span.copy-to-clipboard-button {
     display: none;
@@ -1370,12 +1463,22 @@ pre:not(.mermaid) > .copy-to-clipboard-button {
 }
 
 #R-homelinks {
+    background-color: var(--INTERNAL-MENU-HEADER-BORDER-color);
     padding: 0;
 }
+
+#R-homelinks a {
+    color: var(--INTERNAL-MENU-HOME-LINK-color);
+}
+#R-homelinks a:hover {
+    color: var(--INTERNAL-MENU-HOME-LINK-HOVER-color);
+}
+
 #R-homelinks ul {
     margin: .5rem 0;
 }
 #R-homelinks hr {
+    border-color: var(--INTERNAL-MENU-HEADER-SEPARATOR-color);
     border-bottom-style: solid;
     border-bottom-width: 1px;
     margin: 0 1rem 3px 1rem;
@@ -1404,12 +1507,23 @@ option {
     inset-inline-start: 0;
     position: absolute;
 }
+.expand:not(.box) > label {
+    color: var(--INTERNAL-MAIN-LINK-color);
+}
 
 .expand > input:active + label,
 .expand > input:focus + label,
 .expand > label:hover {
     text-decoration: underline;
 }
+.expand:not(.box) > label:hover,
+.expand:not(.box) > label:active,
+.expand:not(.box) > label:focus,
+.expand:not(.box) > input:hover + label,
+.expand:not(.box) > input:active + label,
+.expand:not(.box) > input:focus + label{
+    color: var(--INTERNAL-MAIN-LINK-HOVER-color);
+}
 
 .expand > label > .expander-icon {
     font-size: .8rem;
@@ -1501,9 +1615,11 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
 
 .svg-reset-button {
     background-color: rgba( 160, 160, 160, .2 );
+    border-color: transparent;
     border-radius: 2px;
     border-style: solid;
     border-width: 1px;
+    color: var(--INTERNAL-MAIN-LINK-color);
     cursor: pointer;
     display: none;
     font-size: .934375rem;
@@ -1513,6 +1629,11 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
     right: 4px;
     top: 4px;
 }
+.svg-reset-button:hover {
+    background-color: var(--INTERNAL-MAIN-LINK-color);
+    border-color: var(--INTERNAL-MAIN-LINK-color);
+    color: var(--INTERNAL-MAIN-BG-color);
+}
 .mermaid:hover .svg-reset-button.zoomed {
     display: block;
 }
@@ -1573,6 +1694,7 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
 }
 
 .topbar-content {
+    background-color: var(--INTERNAL-MAIN-BG-color);
     border: 0 solid rgba( 134, 134, 134, .166 );
     box-shadow: 1px 2px 5px 1px rgba( 134, 134, 134, .2 );
     height: 0;
@@ -1640,6 +1762,7 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
 }
 
 .btn {
+    background-color: var(--VARIABLE-BOX-color);
     border-radius: 4px;
     display: inline-block;
     font-size: .9rem;
@@ -1669,9 +1792,11 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
 
 .btn > * {
     background-color: transparent;
+    border-color: var(--VARIABLE-BOX-color);
     border-radius: 4px;
     border-style: solid;
     border-width: 1px;
+    color: var(--VARIABLE-BOX-CAPTION-color);
     padding: 6px 12px;
     text-align: center;
     touch-action: manipulation;
@@ -1696,11 +1821,32 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
 .btn.interactive > *:hover,
 .btn.interactive > *:active,
 .btn.interactive > *:focus {
+    background-color: var(--VARIABLE-BOX-BG-color);
+    color: var(--VARIABLE-BOX-TEXT-color);
     text-decoration: none;
 }
 
+.btn.cstyle.transparent {
+    --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
+}
+
+.btn.interactive.cstyle.transparent:hover,
+.btn.interactive.cstyle.transparent:focus,
+.btn.interactive.cstyle.transparent:active,
+.btn.interactive.cstyle.transparent:has(a:hover),
+.btn.interactive.cstyle.transparent:has(a:focus),
+.btn.interactive.cstyle.transparent:has(a:active) {
+    background-color: var(--INTERNAL-BOX-NEUTRAL-color);
+}
+
+.btn.cstyle.transparent > * {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
+    --VARIABLE-BOX-TEXT-color: var(--VARIABLE-BOX-CAPTION-color);
+}
+
 /* anchors */
 .anchor {
+    color: var(--INTERNAL-MAIN-LINK-color);
     cursor: pointer;
     font-size: .5em;
     margin-inline-start: .66em;
@@ -1714,6 +1860,11 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
         visibility: visible;
     }
 }
+.anchor:hover,
+.anchor:active,
+.anchor:focus{
+    color: var(--INTERNAL-MAIN-LINK-HOVER-color);
+}
 
 h2:hover .anchor,
 h3:hover .anchor,
@@ -1964,7 +2115,12 @@ span.math:has(> mjx-container[display]) {
     height: 0;
 }
 
+#R-searchresults .autocomplete-suggestion {
+    color: var(--INTERNAL-MAIN-LINK-color);
+}
+
 #R-searchresults .autocomplete-suggestion > .breadcrumbs {
+    color: var(--INTERNAL-PRIMARY-color);
     font-size: .9rem;
     font-weight: 400;
     margin-top: .167em;
@@ -1973,6 +2129,7 @@ span.math:has(> mjx-container[display]) {
 }
 
 #R-searchresults .autocomplete-suggestion > .context {
+    color: var(--INTERNAL-MAIN-TEXT-color);
     font-size: 1rem;
     font-weight: 300;
     margin-top: .66em;
@@ -1989,6 +2146,7 @@ span.math:has(> mjx-container[display]) {
 }
 
 .badge > * {
+    border-color: var(--VARIABLE-BOX-TEXT-color);
     border-radius: 3px;
     border-style: solid;
     border-width: 1px;
@@ -2011,11 +2169,19 @@ span.math:has(> mjx-container[display]) {
     border-end-start-radius: 0;
 }
 
+.badge > .badge-content {
+    background-color: var(--VARIABLE-BOX-color);
+    color: var(--VARIABLE-BOX-CAPTION-color);
+}
 .badge-content:after {
     /* avoid breakage if no content is given */
     content: "\200b";
 }
 
+.badge.cstyle.transparent{
+    --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
+}
+
 /* task list and its checkboxes */
 article ul > li:has(> input[type="checkbox"]) {
     list-style: none;
@@ -2030,9 +2196,11 @@ article ul > li:has(> input[type="checkbox"])::before {
 article ul > li > input[type="checkbox"] {
     -webkit-appearance: none;
     appearance: none;
+    background-color: var(--INTERNAL-MAIN-BG-color); /* box background */
     /* For iOS < 15 */
     border: 0.15em solid currentColor;
     border-radius: 0.15em;
+    color: var(--INTERNAL-MAIN-TEXT-color);
     display: inline-grid;
     font: inherit;
     height: 1.15em;
@@ -2080,6 +2248,7 @@ article ul > li > input[type="checkbox"]:checked::before {
 }
 
 .lightbox-back img {
+    background-color: var(--INTERNAL-MAIN-BG-color);
     max-height: 95%;
     max-width: 95%;
     overflow: auto;
@@ -2088,6 +2257,29 @@ article ul > li > input[type="checkbox"]:checked::before {
 
 /* basic menu list styles (non-collapsible) */
 
+#R-sidebar select,
+#R-sidebar .collapsible-menu label,
+#R-sidebar .menu-control,
+#R-sidebar :is( a, span ) {
+    color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
+}
+
+#R-sidebar select:hover,
+#R-sidebar .collapsible-menu li:not(.active) > label:hover,
+#R-sidebar .menu-control:hover,
+#R-sidebar a:hover {
+    color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color);
+}
+
+#R-sidebar li.active > label,
+#R-sidebar li.active > a {
+    color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color);
+}
+
+#R-sidebar li.active > a {
+    background-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color);
+}
+
 #R-sidebar ul > li > :is( a, span ) {
     display: block;
     position: relative;
@@ -2111,6 +2303,11 @@ article ul > li > input[type="checkbox"]:checked::before {
     padding-top: 0;
 }
 
+#R-sidebar ul.enlarge > li.parent,
+#R-sidebar ul.enlarge > li.active {
+    background-color: var(--INTERNAL-MENU-SECTIONS-ACTIVE-BG-color);
+}
+
 #R-sidebar ul.enlarge > li > :is( a, span ) {
     font-size: 1.1rem;
     line-height: 2rem;
@@ -2269,6 +2466,7 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
     appearance: none;
     background-color: transparent;
     border: 1px solid transparent;
+    color: var(--INTERNAL-MAIN-LINK-color);
     display: block;
     font-size: .9rem;
     font-weight: 300;
@@ -2277,11 +2475,20 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
 }
 
 #R-body .tab-nav-button.active{
+    background-color: var(--VARIABLE-BOX-color);
+    border-bottom-color: var(--VARIABLE-BOX-BG-color);
     border-radius: 2px 2px 0 0;
+    color: var(--VARIABLE-BOX-TEXT-color);
     cursor: default;
 }
+#R-body .tab-nav-button:not(.active):hover,
+#R-body .tab-nav-button:not(.active):active,
+#R-body .tab-nav-button:not(.active):focus {
+    color: var(--INTERNAL-MAIN-LINK-HOVER-color);
+}
 
 #R-body .tab-nav-button > .tab-nav-text{
+    border-bottom-color: var(--VARIABLE-BOX-color);
     border-bottom-style: solid;
     border-bottom-width: .15rem;
     display: block;
@@ -2289,6 +2496,7 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
 }
 /* https://stackoverflow.com/a/46452396 */
 #R-body .tab-nav-button.active > .tab-nav-text{
+    background-color: var(--VARIABLE-BOX-BG-color);
     border-bottom-color: transparent;
     border-radius: 1px 1px 0 0;
     text-shadow: -0.06ex 0 0 currentColor, 0.06ex 0 0 currentColor;
@@ -2299,8 +2507,15 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
         -webkit-text-stroke-width: 0.04ex;
     }
 }
+#R-body .tab-nav-button:not(.active):hover > .tab-nav-text,
+#R-body .tab-nav-button:not(.active):active > .tab-nav-text,
+#R-body .tab-nav-button:not(.active):focus > .tab-nav-text {
+    border-bottom-color: var(--INTERNAL-MAIN-LINK-HOVER-color);
+}
 
 #R-body .tab-content{
+    background-color: var(--VARIABLE-BOX-color);
+    border-color: var(--VARIABLE-BOX-color);
     border-style: solid;
     border-width: 1px;
     display: none;
@@ -2315,6 +2530,8 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
 }
 
 #R-body .tab-content-text{
+    background-color: var(--VARIABLE-BOX-BG-color);
+    color: var(--VARIABLE-BOX-TEXT-color);
     padding: 1rem;
 }
 
@@ -2333,9 +2550,40 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
     border-width: 0;
 }
 
+.tab-panel-style.cstyle.initial,
+.tab-panel-style.cstyle.default {
+    --VARIABLE-BOX-BG-color: var(--INTERNAL-MAIN-BG-color);
+}
+
+.tab-panel-style.cstyle.transparent {
+    --VARIABLE-BOX-color: rgba( 134, 134, 134, .4 );
+    --VARIABLE-BOX-BG-color: transparent;
+}
+
+#R-body .tab-panel-style.cstyle.initial.tab-nav-button.active,
+#R-body .tab-panel-style.cstyle.default.tab-nav-button.active,
+#R-body .tab-panel-style.cstyle.transparent.tab-nav-button.active{
+    background-color: var(--VARIABLE-BOX-BG-color);
+    border-left-color: var(--VARIABLE-BOX-color);
+    border-right-color: var(--VARIABLE-BOX-color);
+    border-top-color: var(--VARIABLE-BOX-color);
+}
+
+#R-body .tab-panel-style.cstyle.code.tab-nav-button:not(.active){
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
+}
+
+#R-body .tab-panel-style.cstyle.initial.tab-content,
+#R-body .tab-panel-style.cstyle.default.tab-content,
+#R-body .tab-panel-style.cstyle.transparent.tab-content{
+    background-color: var(--VARIABLE-BOX-BG-color);
+}
+
 /* bordering the menu and topbar */
 
 #R-topbar {
+    background-color: var(--INTERNAL-MAIN-BG-color);
+    border-bottom-color: var(--INTERNAL-MAIN-TOPBAR-BORDER-color);
     border-bottom-style: solid;
     border-bottom-width: 1px;
 }
@@ -2344,6 +2592,7 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
     border-bottom-color: transparent;
     border-bottom-style: solid;
     border-bottom-width: 1px;
+    border-inline-end-color: var(--INTERNAL-MENU-TOPBAR-BORDER-color);
     border-inline-end-style: solid;
     border-inline-end-width: 1px;
     height: 3rem;
@@ -2352,10 +2601,16 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
     width: 100%;
     z-index: 1;
 }
+@media screen and (max-width: 47.999rem) {
+    .mobile-support #R-header-topbar {
+        border-inline-end-color: var(--INTERNAL-MENU-BORDER-color);
+    }
+}
 
 #R-header-wrapper,
 #R-homelinks,
 #R-content-wrapper > * {
+    border-inline-end-color: var(--INTERNAL-MENU-BORDER-color);
     border-inline-end-style: solid;
     border-inline-end-width: 1px;
 }
@@ -2365,6 +2620,10 @@ html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right
 }
 
 #R-sidebar ul.collapsible-menu li.active > a{
+    border-bottom-color: var(--INTERNAL-MENU-BORDER-color);
+    border-top-color: var(--INTERNAL-MENU-BORDER-color);
+    border-inline-start-color: var(--INTERNAL-MENU-BORDER-color);
+    border-inline-end-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BORDER-color);
     border-style: solid;
     border-width: 1px;
     padding-bottom: calc( .25rem - var(--bpx1)*1px);
@@ -2436,3 +2695,108 @@ body.notfound #shrug svg {
     transform: scaleX(-1);
     width: 15rem;
 }
+
+/* color style definitions */
+
+.cstyle {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
+    --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-BOX-CAPTION-color);
+    --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color);
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+}
+
+.cstyle.caution {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-CAUTION-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-CAUTION-TEXT-color);
+}
+
+.cstyle.important {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-IMPORTANT-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-IMPORTANT-TEXT-color);
+}
+
+.cstyle.info {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color);
+}
+
+.cstyle.note {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NOTE-TEXT-color);
+}
+
+.cstyle.tip {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-TIP-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TIP-TEXT-color);
+}
+
+.cstyle.warning {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color);
+}
+
+.cstyle.primary {
+    --VARIABLE-BOX-color: var(--INTERNAL-PRIMARY-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
+}
+
+.cstyle.secondary {
+    --VARIABLE-BOX-color: var(--INTERNAL-SECONDARY-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
+}
+
+.cstyle.accent {
+    --VARIABLE-BOX-color: var(--INTERNAL-ACCENT-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
+}
+
+.cstyle.blue {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color);
+}
+
+.cstyle.cyan {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-CYAN-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-CYAN-TEXT-color);
+}
+
+.cstyle.green {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREEN-TEXT-color);
+}
+
+.cstyle.grey {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREY-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREY-TEXT-color);
+}
+
+.cstyle.magenta {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-MAGENTA-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-MAGENTA-TEXT-color);
+}
+
+.cstyle.orange {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-ORANGE-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-ORANGE-TEXT-color);
+}
+
+.cstyle.red {
+    --VARIABLE-BOX-color: var(--INTERNAL-BOX-RED-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color);
+}
+
+.cstyle.code {
+    --VARIABLE-BOX-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
+    --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-CODE-BLOCK-color);
+    --VARIABLE-BOX-BG-color: var(--INTERNAL-CODE-BLOCK-BG-color);
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-CODE-BLOCK-color);
+}
+
+.cstyle.transparent {
+    --VARIABLE-BOX-color: transparent;
+    --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-MAIN-TITLES-TEXT-color);
+    --VARIABLE-BOX-BG-color: transparent;
+    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
+}

assets/css/variant.css

@@ -1,533 +0,0 @@
-html {
-    color-scheme: only var(--INTERNAL-BROWSER-theme);
-}
-
-body {
-    background-color: var(--INTERNAL-MAIN-BG-color);
-    color: var(--INTERNAL-MAIN-TEXT-color);
-    font-family: var(--INTERNAL-MAIN-font);
-}
-
-a,
-.anchor,
-.topbar-button button,
-#R-searchresults .autocomplete-suggestion {
-    color: var(--INTERNAL-MAIN-LINK-color);
-}
-
-a:hover,
-a:active,
-a:focus,
-.anchor:hover,
-.anchor:active,
-.anchor:focus,
-.topbar-button button:hover,
-.topbar-button button:active,
-.topbar-button button:focus{
-    color: var(--INTERNAL-MAIN-LINK-HOVER-color);
-}
-
-#R-sidebar {
-    background: var(--INTERNAL-MENU-SECTIONS-BG-color);
-}
-
-#R-header-wrapper {
-    background-color: var(--INTERNAL-MENU-HEADER-BG-color);
-    color: var(--INTERNAL-MENU-SEARCH-color);
-}
-
-.searchbox {
-    border-color: var(--INTERNAL-MENU-SEARCH-BORDER-color);
-    background-color: var(--INTERNAL-MENU-SEARCH-BG-color);
-}
-
-#R-sidebar .searchbox > :first-child,
-#R-sidebar .searchbox > :last-child {
-    color: var(--INTERNAL-MENU-SEARCH-color);
-}
-
-.searchbox input::-webkit-input-placeholder,
-.searchbox input::placeholder {
-    color: var(--INTERNAL-MENU-SEARCH-color);
-}
-
-#R-sidebar .collapsible-menu label,
-#R-sidebar .menu-control,
-#R-sidebar :is( a, span ) {
-    color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
-}
-
-#R-sidebar select:hover,
-#R-sidebar .collapsible-menu li:not(.active) > label:hover,
-#R-sidebar .menu-control:hover,
-#R-sidebar a:hover {
-    color: var(--INTERNAL-MENU-SECTIONS-LINK-HOVER-color);
-}
-
-#R-sidebar ul.enlarge > li.parent,
-#R-sidebar ul.enlarge > li.active {
-    background-color: var(--INTERNAL-MENU-SECTIONS-ACTIVE-BG-color);
-}
-
-#R-sidebar li.active > label,
-#R-sidebar li.active > a {
-    color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-color);
-}
-
-#R-sidebar li.active > a {
-    background-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BG-color);
-}
-
-#R-sidebar ul li > a .read-icon {
-    color: var(--INTERNAL-MENU-VISITED-color);
-}
-
-#R-sidebar .nav-title {
-    color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
-}
-
-#R-content-wrapper hr {
-    border-color: var(--INTERNAL-MENU-SECTION-SEPARATOR-color);
-}
-
-#R-footer {
-    color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
-}
-
-mark {
-    background-image: linear-gradient(
-        to right,
-        color-mix( in srgb, var(--INTERNAL-ACCENT-color) 20%, transparent ),
-        color-mix( in srgb, var(--INTERNAL-ACCENT-color) 90%, transparent ) 4%,
-        color-mix( in srgb, var(--INTERNAL-ACCENT-color) 40%, transparent )
-    );
-}
-
-kbd {
-    color: var(--INTERNAL-TEXT-color);
-    font-family: var(--INTERNAL-CODE-font);
-}
-
-h1 {
-    color: var(--INTERNAL-MAIN-TITLES-H1-color);
-    font-family: var(--INTERNAL-MAIN-TITLES-H1-font);
-}
-
-h2 {
-    color: var(--INTERNAL-MAIN-TITLES-H2-color);
-    font-family: var(--INTERNAL-MAIN-TITLES-H2-font);
-}
-
-h3, .article-subheading {
-    color: var(--INTERNAL-MAIN-TITLES-H3-color);
-    font-family: var(--INTERNAL-MAIN-TITLES-H3-font);
-}
-
-h4 {
-    color: var(--INTERNAL-MAIN-TITLES-H4-color);
-    font-family: var(--INTERNAL-MAIN-TITLES-H4-font);
-}
-
-h5 {
-    color: var(--INTERNAL-MAIN-TITLES-H5-color);
-    font-family: var(--INTERNAL-MAIN-TITLES-H5-font);
-}
-
-h6 {
-    color: var(--INTERNAL-MAIN-TITLES-H6-color);
-    font-family: var(--INTERNAL-MAIN-TITLES-H6-font);
-}
-
-div.box {
-    background-color: var(--VARIABLE-BOX-color);
-    border-color: var(--VARIABLE-BOX-color);
-}
-
-div.box > .box-label {
-    color: var(--VARIABLE-BOX-CAPTION-color);
-}
-
-div.box > .box-content {
-    background-color: var(--VARIABLE-BOX-BG-color);
-    color: var(--VARIABLE-BOX-TEXT-color);
-}
-
-.cstyle.caution {
-    --VARIABLE-BOX-color: var(--INTERNAL-BOX-CAUTION-color);
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-CAUTION-TEXT-color);
-}
-
-.cstyle.important {
-    --VARIABLE-BOX-color: var(--INTERNAL-BOX-IMPORTANT-color);
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-IMPORTANT-TEXT-color);
-}
-
-.cstyle.info {
-    --VARIABLE-BOX-color: var(--INTERNAL-BOX-INFO-color);
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-INFO-TEXT-color);
-}
-
-.cstyle.note {
-    --VARIABLE-BOX-color: var(--INTERNAL-BOX-NOTE-color);
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NOTE-TEXT-color);
-}
-
-.cstyle.tip {
-    --VARIABLE-BOX-color: var(--INTERNAL-BOX-TIP-color);
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TIP-TEXT-color);
-}
-
-.cstyle.warning {
-    --VARIABLE-BOX-color: var(--INTERNAL-BOX-WARNING-color);
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-WARNING-TEXT-color);
-}
-
-.cstyle.primary {
-    --VARIABLE-BOX-color: var(--INTERNAL-PRIMARY-color);
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
-}
-
-.cstyle.secondary {
-    --VARIABLE-BOX-color: var(--INTERNAL-SECONDARY-color);
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
-}
-
-.cstyle.accent {
-    --VARIABLE-BOX-color: var(--INTERNAL-ACCENT-color);
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
-}
-
-.cstyle.blue {
-    --VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-color);
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color);
-}
-
-.cstyle.cyan {
-    --VARIABLE-BOX-color: var(--INTERNAL-BOX-CYAN-color);
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-CYAN-TEXT-color);
-}
-
-.cstyle.green {
-    --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREEN-color);
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREEN-TEXT-color);
-}
-
-.cstyle.grey {
-    --VARIABLE-BOX-color: var(--INTERNAL-BOX-GREY-color);
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-GREY-TEXT-color);
-}
-
-.cstyle.magenta {
-    --VARIABLE-BOX-color: var(--INTERNAL-BOX-MAGENTA-color);
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-MAGENTA-TEXT-color);
-}
-
-.cstyle.orange {
-    --VARIABLE-BOX-color: var(--INTERNAL-BOX-ORANGE-color);
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-ORANGE-TEXT-color);
-}
-
-.cstyle.red {
-    --VARIABLE-BOX-color: var(--INTERNAL-BOX-RED-color);
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-RED-TEXT-color);
-}
-
-.cstyle.code {
-    --VARIABLE-BOX-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
-    --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-CODE-BLOCK-color);
-    --VARIABLE-BOX-BG-color: var(--INTERNAL-CODE-BLOCK-BG-color);
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-CODE-BLOCK-color);
-}
-
-.cstyle.transparent {
-    --VARIABLE-BOX-color: transparent;
-    --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-MAIN-TITLES-TEXT-color);
-    --VARIABLE-BOX-BG-color: transparent;
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color);
-}
-
-code,
-kbd,
-pre:not(.mermaid),
-samp {
-    font-family: var(--INTERNAL-CODE-font);
-}
-
-code {
-    background-color: var(--INTERNAL-CODE-INLINE-BG-color);
-    border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
-    color: var(--INTERNAL-CODE-INLINE-color);
-}
-
-pre:not(.mermaid) {
-    background-color: var(--INTERNAL-CODE-BLOCK-BG-color);
-    border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
-    color: var(--INTERNAL-CODE-BLOCK-color);
-}
-
-div.highlight > div {
-    background-color: var(--INTERNAL-CODE-BLOCK-BG-color);
-    border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
-}
-
-table {
-    background-color: var(--INTERNAL-MAIN-BG-color);
-}
-
-.lightbox-back img{
-    background-color: var(--INTERNAL-MAIN-BG-color);
-}
-
-#R-topbar {
-    background-color: var(--INTERNAL-MAIN-BG-color);
-}
-
-.topbar-sidebar-divider {
-    border-inline-start-color: var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color);
-}
-@media screen and (max-width: 47.999rem) {
-    .topbar-sidebar-divider {
-        border-inline-start-color: transparent;
-    }
-}
-
-#R-body a[aria-disabled="true"],
-#R-searchresults .autocomplete-suggestion > .context {
-    color: var(--INTERNAL-MAIN-TEXT-color);
-}
-
-#R-searchresults .autocomplete-suggestion > .breadcrumbs {
-    color: var(--INTERNAL-PRIMARY-color);
-}
-
-.copy-to-clipboard-button {
-    background-color: var(--INTERNAL-CODE-INLINE-BG-color);
-    border-color: var(--INTERNAL-CODE-INLINE-BORDER-color);
-    color: var(--INTERNAL-CODE-INLINE-color);
-    font-family: var(--INTERNAL-CODE-font);
-}
-
-.copy-to-clipboard-button:hover {
-    background-color: var(--INTERNAL-CODE-INLINE-color);
-    color: var(--INTERNAL-CODE-INLINE-BG-color);
-}
-
-div.highlight > div table + .copy-to-clipboard-button,
-div.highlight pre:not(.mermaid) + .copy-to-clipboard-button,
-pre:not(.mermaid) .copy-to-clipboard-button {
-    border-color: transparent;
-    color: var(--INTERNAL-MAIN-LINK-color);
-}
-
-div.highlight > div table + .copy-to-clipboard-button:hover,
-div.highlight pre:not(.mermaid) + .copy-to-clipboard-button:hover,
-pre:not(.mermaid) .copy-to-clipboard-button:hover {
-    background-color: var(--INTERNAL-MAIN-LINK-color);
-    border-color: var(--INTERNAL-MAIN-LINK-color);
-    color: var(--INTERNAL-CODE-BLOCK-BG-color);
-}
-
-.expand:not(.box) > label {
-    color: var(--INTERNAL-MAIN-LINK-color);
-}
-
-.expand:not(.box) > label:hover,
-.expand:not(.box) > label:active,
-.expand:not(.box) > label:focus,
-.expand:not(.box) > input:hover + label,
-.expand:not(.box) > input:active + label,
-.expand:not(.box) > input:focus + label{
-    color: var(--INTERNAL-MAIN-LINK-HOVER-color);
-}
-
-.svg-reset-button {
-    border-color: transparent;
-    color: var(--INTERNAL-MAIN-LINK-color);
-}
-.svg-reset-button:hover {
-    background-color: var(--INTERNAL-MAIN-LINK-color);
-    border-color: var(--INTERNAL-MAIN-LINK-color);
-    color: var(--INTERNAL-MAIN-BG-color);
-}
-
-#R-homelinks {
-    background-color: var(--INTERNAL-MENU-HEADER-BORDER-color);
-}
-
-#R-homelinks a {
-    color: var(--INTERNAL-MENU-HOME-LINK-color);
-}
-
-#R-homelinks a:hover {
-    color: var(--INTERNAL-MENU-HOME-LINK-HOVER-color);
-}
-
-#R-homelinks hr {
-    border-color: var(--INTERNAL-MENU-HEADER-SEPARATOR-color);
-}
-
-.topbar-content {
-    background-color: var(--INTERNAL-MAIN-BG-color);
-}
-
-.btn {
-    background-color: var(--VARIABLE-BOX-color);
-}
-
-.btn > * {
-    border-color: var(--VARIABLE-BOX-color);
-    color: var(--VARIABLE-BOX-CAPTION-color);
-}
-
-.btn.interactive > *:hover,
-.btn.interactive > *:active,
-.btn.interactive > *:focus {
-    background-color: var(--VARIABLE-BOX-BG-color);
-    color: var(--VARIABLE-BOX-TEXT-color);
-}
-
-.btn.cstyle.transparent {
-    --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
-}
-
-.btn.cstyle.interactive.transparent:hover,
-.btn.cstyle.interactive.transparent:focus,
-.btn.cstyle.interactive.transparent:active,
-.btn.cstyle.interactive.transparent:has(a:hover),
-.btn.cstyle.interactive.transparent:has(a:focus),
-.btn.cstyle.interactive.transparent:has(a:active) {
-    background-color: var(--INTERNAL-BOX-NEUTRAL-color);
-}
-
-.btn.cstyle.transparent > * {
-    --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
-    --VARIABLE-BOX-TEXT-color: var(--VARIABLE-BOX-CAPTION-color);
-}
-
-article .R-taxonomy.tags {
-    --VARIABLE-TAGS-color: var(--INTERNAL-MAIN-BG-color);
-    --VARIABLE-TAGS-BG-color: var(--VARIABLE-BOX-color);
-}
-
-article .R-taxonomy.tags a.term-link {
-    background-color: var(--VARIABLE-TAGS-BG-color);
-    color: var(--VARIABLE-TAGS-color);
-}
-
-article .R-taxonomy.tags a.term-link:before {
-    border-right-color: var(--VARIABLE-TAGS-BG-color);
-}
-
-article .R-taxonomy.tags a.term-link:after {
-    background-color: var(--VARIABLE-TAGS-color);
-}
-
-.badge > * {
-    border-color: var(--VARIABLE-BOX-TEXT-color);
-}
-
-.badge > .badge-content {
-    background-color: var(--VARIABLE-BOX-color);
-    color: var(--VARIABLE-BOX-CAPTION-color);
-}
-
-.badge.cstyle.transparent{
-    --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
-}
-
-article ul > li > input[type="checkbox"] {
-    background-color: var(--INTERNAL-MAIN-BG-color); /* box background */
-    color: var(--INTERNAL-MAIN-TEXT-color);
-}
-
-#R-body .tab-nav-button {
-    color: var(--INTERNAL-MAIN-LINK-color);
-}
-#R-body .tab-nav-button:not(.active):hover,
-#R-body .tab-nav-button:not(.active):active,
-#R-body .tab-nav-button:not(.active):focus {
-    color: var(--INTERNAL-MAIN-LINK-HOVER-color);
-}
-
-#R-body .tab-nav-button.active {
-    background-color: var(--VARIABLE-BOX-color);
-    border-bottom-color: var(--VARIABLE-BOX-BG-color);
-    color: var(--VARIABLE-BOX-TEXT-color);
-}
-
-#R-body .tab-nav-button > .tab-nav-text{
-    border-bottom-color: var(--VARIABLE-BOX-color);
-}
-#R-body .tab-nav-button.active > .tab-nav-text{
-    background-color: var(--VARIABLE-BOX-BG-color);
-}
-#R-body .tab-nav-button:not(.active):hover > .tab-nav-text,
-#R-body .tab-nav-button:not(.active):active > .tab-nav-text,
-#R-body .tab-nav-button:not(.active):focus > .tab-nav-text {
-    border-bottom-color: var(--INTERNAL-MAIN-LINK-HOVER-color);
-}
-
-#R-body .tab-content{
-    background-color: var(--VARIABLE-BOX-color);
-    border-color: var(--VARIABLE-BOX-color);
-}
-
-#R-body .tab-content-text{
-    background-color: var(--VARIABLE-BOX-BG-color);
-    color: var(--VARIABLE-BOX-TEXT-color);
-}
-
-.tab-panel-style.cstyle.initial,
-.tab-panel-style.cstyle.default {
-    --VARIABLE-BOX-BG-color: var(--INTERNAL-MAIN-BG-color);
-}
-
-.tab-panel-style.cstyle.transparent {
-    --VARIABLE-BOX-color: rgba( 134, 134, 134, .4 );
-    --VARIABLE-BOX-BG-color: transparent;
-}
-
-#R-body .tab-panel-style.cstyle.initial.tab-nav-button.active,
-#R-body .tab-panel-style.cstyle.default.tab-nav-button.active,
-#R-body .tab-panel-style.cstyle.transparent.tab-nav-button.active{
-    background-color: var(--VARIABLE-BOX-BG-color);
-    border-left-color: var(--VARIABLE-BOX-color);
-    border-right-color: var(--VARIABLE-BOX-color);
-    border-top-color: var(--VARIABLE-BOX-color);
-}
-
-#R-body .tab-panel-style.cstyle.code.tab-nav-button:not(.active){
-    --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
-}
-
-#R-body .tab-panel-style.cstyle.initial.tab-content,
-#R-body .tab-panel-style.cstyle.default.tab-content,
-#R-body .tab-panel-style.cstyle.transparent.tab-content{
-    background-color: var(--VARIABLE-BOX-BG-color);
-}
-
-#R-topbar {
-    border-bottom-color: var(--INTERNAL-MAIN-TOPBAR-BORDER-color);
-}
-
-#R-header-topbar {
-    border-inline-end-color: var(--INTERNAL-MENU-TOPBAR-BORDER-color);
-}
-@media screen and (max-width: 47.999rem) {
-    .mobile-support #R-header-topbar {
-        border-inline-end-color: var(--INTERNAL-MENU-BORDER-color);
-    }
-}
-
-#R-header-wrapper,
-#R-homelinks,
-#R-content-wrapper > * {
-    border-inline-end-color: var(--INTERNAL-MENU-BORDER-color);
-}
-
-#R-sidebar ul.collapsible-menu li.active > a{
-    border-bottom-color: var(--INTERNAL-MENU-BORDER-color);
-    border-top-color: var(--INTERNAL-MENU-BORDER-color);
-    border-inline-start-color: var(--INTERNAL-MENU-BORDER-color);
-    border-inline-end-color: var(--INTERNAL-MENU-SECTION-ACTIVE-CATEGORY-BORDER-color);
-}

layouts/partials/_relearn/themeVariants.gotmpl

@@ -108,7 +108,7 @@ Chroma auto run:
 {{- end }}
 
 {{- /*
-- Add box styles to variables and variants
+- Add box styles to variables and theme
 */}}
 {{- with resources.Get "css/variables.css" }}
   {{- $variablescontent := print ":root {\n" .Content }}
@@ -124,7 +124,7 @@ Chroma auto run:
   {{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
 {{- end }}
 
-{{- with resources.Get "css/variant.css" }}
+{{- with resources.Get "css/theme.css" }}
   {{- $assetBusting := partialCached "assetbusting.gotmpl" . }}
   {{- $variantcontent := print `@import "variables.css` $assetBusting `";` "\n\n" .Content }}
   {{- range $page.Site.Params.boxStyle }}
@@ -137,7 +137,7 @@ Chroma auto run:
       "\n}\n"
     }}
   {{- end }}
-  {{- $cssres := $variantcontent | resources.FromString "css/variant.css" }}
+  {{- $cssres := $variantcontent | resources.FromString "css/theme.css" }}
   {{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
 {{- end }}
 

layouts/partials/stylesheet.html

@@ -17,7 +17,6 @@
     <link href="{{(printf "css/theme-%s.css" .identifier) | relURL}}{{ $assetBusting }}" rel="stylesheet" id="R-variant-style">
     <link href="{{(printf "css/chroma-%s.css" .chroma) | safeHTML | relURL}}{{ $assetBusting }}" rel="stylesheet" id="R-variant-chroma-style">
     {{- end }}
-    <link href="{{"css/variant.css" | relURL}}{{ $assetBusting }}" rel="stylesheet">
     <link href="{{"css/print.css" | relURL}}{{ $assetBusting }}" rel="stylesheet" media="print">
     {{- $f := printf "/static/css/format-%s.css" $outputFormat }}
     {{- if or (partialCached "_relearn/fileExists.gotmpl" $f $f) (resources.Get (printf "/css/format-%s.css" $outputFormat)) }}