theme: fix flash of non-default variant, part I #757

implements the first part, working for configured variants;

for that, loading of stylesheets was overhauled by now
merging all configured variants into one big stylesheet for
each output format and loading this instead of one stylesheet
per configured variant;

previously @media print styles were applied on top of @media screen
styles; this is now strictly isolated, which doesn't require styles
like neon to revert styles for print anymore;

this change was also used to implement the minify parameter, to shrink
those generated stylesheets, making them shrink to 66% of their
unminified size for the exampleSite;

the theme switcher functionality is now completely independend of
variant.js; the switch is now handled by in-page javascript which
avoids waiting for external scripts to load, so switching can happen
as early as possible;

switching of themes is now implemented by just setting a data attribute
to the html element, were previously a complex mechanism of dynamically
loading of variant CSS files was implemented;

the call for variant.js was removed in this changeset, making the
generator broken and useless; this will be fixed with the next patch;

assets/css/auto.css

@@ -1,4 +0,0 @@
-/* prettier-ignore {{ $assetBusting := partialCached "assetbusting.gotmpl" . -}} */
-@import '{{ printf "%s-%s.css%s" .prefix .light $assetBusting }}' screen and (prefers-color-scheme: light);
-/* prettier-ignore */
-@import '{{ printf "%s-%s.css%s" .prefix .dark $assetBusting }}' screen and (prefers-color-scheme: dark);

assets/css/chroma-neon.css

@@ -85,5 +85,3 @@
 /* GenericTraceback */ .chroma .gt {  }
 /* GenericUnderline */ .chroma .gl {  }
 /* TextWhitespace */ .chroma .w {  }
-
-}

assets/css/format-print.css

@@ -1,8 +1,3 @@
-/* prettier-ignore {{ $assetBusting := partialCached "assetbusting.gotmpl" . -}} */
-@import '{{ printf "theme-%s.css%s" .themevariant.identifier $assetBusting }}';
-/* prettier-ignore */
-@import '{{ printf "chroma-%s.css%s" .themevariant.chroma $assetBusting }}';
-
 #R-sidebar {
   display: none;
 }
@@ -101,6 +96,7 @@ hr {
 
 #R-body #R-body-inner h1 {
   border-bottom: 1px solid rgba(221, 221, 221, 1);
+  font-size: 3.25rem;
   margin-bottom: 2rem;
   padding-bottom: 0.75rem;
 }
@@ -187,3 +183,17 @@ article {
 #R-body-inner article:first-of-type {
   break-before: avoid;
 }
+
+#R-body #R-body-inner .flex-block-wrapper {
+  max-width: calc(var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem);
+  width: 100%;
+}
+
+#R-body #R-body-inner > .flex-block-wrapper article.narrow p {
+  font-size: 1.015625rem;
+  text-align: start;
+}
+
+#R-body #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading {
+  margin-top: 0;
+}

assets/css/print.css

@@ -1,2 +0,0 @@
-/* prettier-ignore {{ $assetBusting := partialCached "assetbusting.gotmpl" . -}} */
-@import '{{ printf "format-print.css%s" $assetBusting }}';

assets/css/swagger.css

@@ -1,9 +1,3 @@
-/* styles to make Swagger-UI fit into our theme */
-/* prettier-ignore {{ $assetBusting := partialCached "assetbusting.gotmpl" . -}} */
-@import '{{ printf "fonts.css%s" $assetBusting }}';
-/* prettier-ignore */
-@import '{{ printf "variables.css%s" $assetBusting }}';
-
 body {
   line-height: 1.574;
   font-variation-settings: var(--INTERNAL-MAIN-font-variation-settings);

assets/css/theme-neon.css

@@ -252,56 +252,6 @@ body .box.cstyle.transparent {
   box-shadow: none;
 }
 
-@media print {
-  #R-body h1,
-  #R-body h2,
-  #R-body h3,
-  #R-body .article-subheading,
-  #R-body h4,
-  #R-body h5,
-  #R-body h6 {
-    text-shadow: none;
-  }
-  #R-body .badge,
-  #R-body .badge > .badge-content,
-  #R-body .btn,
-  #R-body .btn > *,
-  #R-body .box,
-  #R-body .box > .box-label {
-    box-shadow: none;
-    text-shadow: none;
-  }
-  #R-body .badge.cstyle:not(.transparent),
-  #R-body .btn.cstyle {
-    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color);
-  }
-}
-
-/* if we are in print chapter preview our @media statement from
-above will not apply, so we have to repeat it here */
-.print #R-body h1,
-.print #R-body h2,
-.print #R-body h3,
-.print #R-body .article-subheading,
-.print #R-body h4,
-.print #R-body h5,
-.print #R-body h6 {
-  text-shadow: none;
-}
-.print #R-body .badge,
-.print #R-body .badge > .badge-content,
-.print #R-body .btn,
-.print #R-body .btn > *,
-.print #R-body .box,
-.print #R-body .box > .box-label {
-  box-shadow: none;
-  text-shadow: none;
-}
-.print #R-body .badge.cstyle:not(.transparent),
-.print #R-body .btn.cstyle {
-  --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color);
-}
-
 #R-content-wrapper {
   --ps-thumb-color: rgba(208, 208, 208, 1);
   --ps-thumb-hover-color: rgba(204, 204, 204, 1);

assets/css/theme-relearn.css

@@ -1,3 +1 @@
-/* this file is here for compatiblity with older installations; use theme-relearn-light instead */
+@import 'theme-relearn-light.css';
-/* prettier-ignore {{ $assetBusting := partialCached "assetbusting.gotmpl" . -}} */
-@import '{{ printf "theme-relearn-light.css%s" $assetBusting }}';

assets/css/theme.css

@@ -1,5 +1,3 @@
-@charset "UTF-8";
-
 /* until browsers don't let us set length values based on dppx, we
 need a way to calculate them ourself */
 :root {
@@ -580,33 +578,31 @@ article a:focus > img:only-child:empty {
   max-width: calc(var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem);
   width: 100%;
 }
-
+#R-body .flex-block-wrapper:has(article.narrow) {
-body:not(.print) #R-body .flex-block-wrapper:has(article.narrow) {
   max-width: calc(var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem);
 }
-/* we limit width if we have large screens */
+.main-width-max #R-body .flex-block-wrapper {
-body.main-width-max #R-body .flex-block-wrapper {
   width: calc(var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem);
 }
-body.main-width-max:not(.print) #R-body .flex-block-wrapper:has(article.narrow) {
+.main-width-max #R-body .flex-block-wrapper:has(article.narrow) {
   width: calc(var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem);
 }
 
-body:not(.print) #R-body-inner:has(> .flex-block-wrapper article.narrow) {
+#R-body-inner:has(> .flex-block-wrapper article.narrow) {
   padding: 0 9.75rem 2rem 9.75rem;
 }
 @media screen and (max-width: 59.999rem) {
-  body:not(.print) #R-body-inner:has(> .flex-block-wrapper article.narrow) {
+  #R-body-inner:has(> .flex-block-wrapper article.narrow) {
     padding: 0 6.5rem 1rem 6.5rem;
   }
 }
 @media screen and (max-width: 47.999rem) {
-  body:not(.print) #R-body-inner:has(> .flex-block-wrapper article.narrow) {
+  #R-body-inner:has(> .flex-block-wrapper article.narrow) {
     padding: 0 3.25rem 0.375rem 3.25rem;
   }
 }
 
-body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow p {
+#R-body-inner > .flex-block-wrapper article.narrow p {
   font-size: 1.2rem;
   text-align: justify;
 }
@@ -658,17 +654,17 @@ h1 {
   text-transform: uppercase;
 }
 
-body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow h1 {
+#R-body-inner > .flex-block-wrapper article.narrow h1 {
   border-bottom: 4px solid rgba(134, 134, 134, 0.125);
   font-size: 3.5rem;
 }
 @media only screen and (min-width: 48rem) and (max-width: 59.999rem) {
-  body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow h1 {
+  #R-body-inner > .flex-block-wrapper article.narrow h1 {
     font-size: 2.8rem;
   }
 }
 @media only screen and (max-width: 47.999rem) {
-  body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow h1 {
+  #R-body-inner > .flex-block-wrapper article.narrow h1 {
     font-size: 2.5rem;
   }
 }
@@ -685,16 +681,16 @@ body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow h1 {
 #R-body-inner > .flex-block-wrapper article > .article-subheading {
   margin-top: 0;
 }
-body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading {
+#R-body-inner > .flex-block-wrapper article.narrow > .article-subheading {
   margin-top: 2rem;
 }
 @media screen and (max-width: 59.999rem) {
-  body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading {
+  #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading {
     margin-top: 1rem;
   }
 }
 @media screen and (max-width: 47.999rem) {
-  body:not(.print) #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading {
+  #R-body-inner > .flex-block-wrapper article.narrow > .article-subheading {
     margin-top: 0.375rem;
   }
 }

exampleSite/config/_default/params.toml

@@ -75,6 +75,13 @@ themeVariant = [
 	{ identifier = 'red'            }
 ]
 
+# Minify theme assets.
+# Default: not set
+# If set to `true`, further theme asset files besides the generated HTML files
+# will be minified during build. If no value is set, the theme will avoid
+# minification if you have started with `hugo server` and otherwise will minify.
+minify = true
+
 #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # General
 # These options are defining general, non visual behavior.

exampleSite/config/testing/hugo.toml

@@ -19,3 +19,4 @@ disableHugoGeneratorInject = true
   disableGeneratorVersion = true
   disableAssetsBusting = true
   disableRandomIds = true
+  minify = false

exampleSite/content/configuration/sitemanagement/stableoutput/_index.en.md

@@ -1,7 +1,7 @@
 +++
 categories = ["howto"]
 description = "How to make your generated HTML output stable"
-options = ["disableAssetsBusting", "disableGeneratorVersion", "disableRandomIds"]
+options = ["disableAssetsBusting", "disableGeneratorVersion", "disableRandomIds", "minify"]
 title = "Stable Output"
 weight = 6
 +++
@@ -46,3 +46,12 @@ To turn this off, set `disableRandomIds=true`. Note, that this will result in a
 [params]
   disableRandomIds = true
 {{< /multiconfig >}}
+
+## Disabling Assets Minification
+
+{{% badge style="cyan" icon="gears" title=" " %}}Option{{% /badge %}} If `minify=true`, further theme assets will be minified during build. If no value is set, the theme will avoid minification if you have started with `hugo server` and otherwise will minify.
+
+{{< multiconfig file=hugo >}}
+[params]
+  minify = false
+{{< /multiconfig >}}

exampleSite/content/configuration/sitemanagement/stableoutput/_index.pir.md

@@ -1,7 +1,7 @@
 +++
 categories = ["howto"]
 description = "How to make your generated HTML output stable"
-options = ["disableAssetsBusting", "disableGeneratorVersion", "disableRandomIds"]
+options = ["disableAssetsBusting", "disableGeneratorVersion", "disableRandomIds", "minify"]
 title = "Stable Output"
 weight = 6
 +++

exampleSite/content/introduction/releasenotes/7/2.en.md

@@ -18,6 +18,12 @@ weight = -2
 
 ### New
 
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} This release fixes a long standing issue, where loading a page with a non-default variant may caused screen flashing.
+
+  Fixing this resulted in major changes how stylesheets are bundled during built and ultimately leads to different stylesheets been loaded in the browser. If you haven't done any undocumented stuff with the stylesheets, this change should not have any negative effects to your site.
+
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} As a fallout of fixing the flashing issue, you can now minify the bundled stylesheets by setting the [`minify` parameter](configuration/sitemanagement/stableoutput/#disabling-assets-minification) in your `hugo.toml`. Without configuring this parameter, the theme will minify the stylesheets for production (`hugo`) but not for development (`hugo server`).
+
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} Support for Hugo’s built-in [`details` shortcode](https://gohugo.io/content-management/shortcodes/#details).
 
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme has updated its Mermaid dependency to 11.4.1. This adds support for [Kanban](shortcodes/mermaid#kanban) diagrams.

exampleSite/content/shortcodes/mermaid.en.md

@@ -84,6 +84,9 @@ mermaidZoom = true
 
 You can overwrite the settings by providing a JSON object in `mermaidInitialize`. See [Mermaid's documentation](https://mermaid-js.github.io/mermaid/#/Setup?id=mermaidapi-configuration-defaults) for all allowed settings.
 
+> [!NOTE]
+> Using the `theme` setting in the initialization options is unsupported. To set the theme globally edit the `--MERMAID-theme` variable of your [color variant](configuration/branding/colors/#modifying-variants).
+
 Keep in mind that initialization settings of your pages front matter overwrite all settings of your configuration options.
 
 In addition, you can merge settings for each individual graph through [diagram directives](https://mermaid-js.github.io/mermaid/#/directives?id=directives) on top of the settings of your page's front matter or configuration options.

layouts/404.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
-{{- .Store.Set "relearnOutputFormat" "notfound" }}
+{{- .Store.Set "relearnOutputFormat" "html" }}
-<html lang="{{ .Page.Language.LanguageCode }}" dir="{{ .Page.Language.LanguageDirection | default (T "Reading-direction") | default "ltr" }}" itemscope itemtype="http://schema.org/Article">
+<html lang="{{ .Page.Language.LanguageCode }}" dir="{{ .Page.Language.LanguageDirection | default (T "Reading-direction") | default "ltr" }}" itemscope itemtype="http://schema.org/Article" data-r-output-format="{{ with .Store.Get "relearnOutputFormat" }}{{ . }}{{ else }}html{{ end }}">
   <head>
     {{- partial "meta.html" . }}
     {{- $title := partial "title.gotmpl" (dict "page" . "fullyQualified" true "reverse" true) }}
@@ -13,7 +13,7 @@
     {{- partial "stylesheet.html" . }}
     {{- partial "custom-header.html" . }}
   </head>
-  <body class="mobile-support {{ with .Store.Get "relearnOutputFormat" }}{{ . }}{{ else }}html{{ end }}" data-url="{{ partial "permalink.gotmpl" (dict "to" .) }}">
+  <body class="mobile-support {{ with .Store.Get "relearnOutputFormat" }}{{ . }}{{ else }}html{{ end }} notfound" data-url="{{ partial "permalink.gotmpl" (dict "to" .) }}">
     <div id="R-body" class="default-animation">
       <main id="R-body-inner" class="highlightable chapter" tabindex="-1">
         <div class="flex-block-wrapper">

layouts/_default/baseof.html

@@ -9,7 +9,7 @@
 {{- if .Site.Params.description }}
   {{- warnf "UNSUPPORTED usage of 'params.description' config parameter found, move it to the front matter of your home page; see https://mcshelby.github.io/hugo-theme-relearn/introduction/releasenotes/6/#6-0-0" }}
 {{- end }}
-<html lang="{{ .Page.Language.LanguageCode }}" dir="{{ .Page.Language.LanguageDirection | default (T "Reading-direction") | default "ltr" }}" itemscope itemtype="http://schema.org/Article">
+<html lang="{{ .Page.Language.LanguageCode }}" dir="{{ .Page.Language.LanguageDirection | default (T "Reading-direction") | default "ltr" }}" itemscope itemtype="http://schema.org/Article" data-r-output-format="{{ with .Store.Get "relearnOutputFormat" }}{{ . }}{{ else }}html{{ end }}">
   <head>
     {{- partial "meta.html" . }}
     {{- $title := partial "title.gotmpl" (dict "page" . "fullyQualified" true "reverse" true) }}

layouts/partials/_relearn/themeVariants.gotmpl

@@ -1,16 +1,18 @@
 {{- $page := . }}
-{{- $autores := resources.Get "css/auto.css" }}
 {{- $nonautothemevariants := slice }}
-{{- /* we need relearn-light in every case for the print styles */}}
+{{- $formathtmlpre := ":root:not([data-r-output-format='print'])" }}
-{{- $refthemevariants := slice | append "relearn-light" }}
+{{- $formathtml := "" }}
+{{- $minify := not hugo.IsServer }}
+{{- if isset site.Params "minify" }}
+  {{- $minify = site.Params.minify }}
+{{- end }}
 
 {{- /*
 Unification run:
 - convert from old forms to slice of dicts
 - add default name property
 - convert auto property to slice
-- save non auto variants to later assign them as default for missing auto variants
+- remember default variants for auto mode
-- mark variants configured by the user
 */}}
 {{- $tempthemevariants := slice | append (.Site.Params.themeVariant | default "auto" ) }}
 {{- $themevariants := slice }}
@@ -28,16 +30,13 @@ Unification run:
   {{- if not (isset $themevariant "auto") }}
     {{- $nonautothemevariants = $nonautothemevariants | append $themevariant.identifier }}
   {{- end }}
-  {{- $themevariant = collections.Merge $themevariant (dict "config" true) }}
   {{- $themevariants = $themevariants | append $themevariant }}
 {{- end }}
 
 {{- /*
-Auto run:
+Generator run:
 - fill up auto property with defaults
-- save variants referenced by auto configuration
+- write variant & chroma CSS string of normal variants and for light and dark of auto variants
-- write variant CSS file based on auto template
-- add chroma property
 */}}
 {{- $defaultautothemevariants := slice }}
 {{- $defaultautothemevariants = $defaultautothemevariants | append (index .Site.Params.themeVariantAuto 0 | default (index $nonautothemevariants 0) | default "relearn-light") }}
@@ -50,117 +49,165 @@ Auto run:
     {{- $light := index $themevariant.auto 0 | default (index $defaultautothemevariants 0) }}
     {{- $dark := index $themevariant.auto 1 | default (index $defaultautothemevariants 1) }}
     {{- $themevariant = collections.Merge $themevariant (dict "auto" (slice | append $light | append $dark)) }}
-    {{- $refthemevariants = $refthemevariants | append $themevariant.auto }}
+    {{- $lightthemevariant := partial "get-theme-details.html" (dict "themevariant" $themevariant "identifier" $light) }}
-    {{- $cssres := $autores | resources.ExecuteAsTemplate (printf "css/theme-%s.css" $themevariant.identifier) (dict "prefix" "theme" "light" $light "dark" $dark) }}
+    {{- $darkthemevariant := partial "get-theme-details.html" (dict "themevariant" $themevariant "identifier" $dark) }}
-    {{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
+    {{- $formathtmlpre = print $formathtmlpre
-    {{- $themevariant = collections.Merge $themevariant (dict "chroma" $themevariant.identifier) }}
+      ":not([data-r-theme-variant='" $themevariant.identifier "'])"
-  {{- end }}
+    }}
-  {{- $themevariants = $themevariants | append $themevariant }}
+    {{- $formathtml = print $formathtml
-{{- end }}
+      "\n:root:not([data-r-output-format='print'])[data-r-theme-variant='" $themevariant.identifier "'] {"
-
+      "\n@media screen and (prefers-color-scheme: light) {"
-{{- /*
+      "\n&" $lightthemevariant.themecontent
-Ref run:
+      "\n" $lightthemevariant.chromacontent
-- add variants referenced by auto properties
+      "\n}"
-- add default name property
+      "\n@media screen and (prefers-color-scheme: dark) {"
-*/}}
+      "\n&" $darkthemevariant.themecontent
-{{- range $refthemevariant := $refthemevariants }}
+      "\n" $darkthemevariant.chromacontent
-  {{- if not (index (collections.Where $themevariants "identifier" $refthemevariant) 0) }}
+      "\n}"
-    {{- $themevariant := (dict "identifier" $refthemevariant "name" ($refthemevariant | humanize | strings.Title) "config" false) }}
+      "\n}"
-    {{- $themevariants = $themevariants | append $themevariant }}
+    }}
-  {{- end }}
+  {{- else }}
-{{- end }}
-
-{{- /*
-Non-auto run:
-- write variant CSS file and all imported variant CSS files
-- add chroma property from deepest imported variant
-- write chroma CSS file (just the root one because they are not allowed to be nested and the deepest one wins)
-*/}}
-{{- $tempthemevariants = $themevariants }}
-{{- $themevariants = slice }}
-{{- range $tempthemevariant := $tempthemevariants }}
-  {{- $themevariant := $tempthemevariant }}
-  {{- if not (collections.IsSet $themevariant "auto") }}
     {{- $themevariant = partial "get-theme-details.html" (dict "themevariant" $themevariant "identifier" $themevariant.identifier)}}
-    {{- $cssres := resources.Get (printf "css/chroma-%s.css" $themevariant.chroma) }}
+    {{- $formathtmlpre = print $formathtmlpre
-    {{- if not $cssres }}
+      ":not([data-r-theme-variant='" $themevariant.identifier "'])"
-      {{- errorf "\"chroma-%s.css\": file not found in \"assets/css\"; if you are migrating from a theme version older thant 6.0.0, you have to move it over from \"static/css\"" $themevariant.chroma }}
+    }}
-    {{- end }}
+    {{- $formathtml = print $formathtml
-    {{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
+      "\n:root:not([data-r-output-format='print'])[data-r-theme-variant='" $themevariant.identifier "'] {"
+      "\n&" $themevariant.themecontent
+      "\n" $themevariant.chromacontent
+      "\n}"
+}}
   {{- end }}
   {{- $themevariants = $themevariants | append $themevariant }}
 {{- end }}
 
 {{- /*
-Chroma auto run:
+- Read default stuff
-- write chroma CSS file based on auto template
 */}}
-{{- range $tempthemevariant := $themevariants }}
+{{- $defaultthemevariant := partial "get-theme-details.html" (dict "themevariant" (dict) "identifier" "relearn-light") }}
-  {{- $themevariant := $tempthemevariant }}
+{{- $nucleuscontent := "" }}
-  {{- if collections.IsSet $themevariant "auto" }}
+{{- with resources.Get "css/nucleus.css" }}
-    {{- $lighttheme := index $themevariant.auto 0 | default (index $defaultautothemevariants 0) }}
+  {{- $nucleuscontent = .Content }}
-    {{- $darktheme := index $themevariant.auto 1 | default (index $defaultautothemevariants 1) }}
-    {{- $light := (index (collections.Where $themevariants "identifier" $lighttheme) 0).chroma }}
-    {{- $dark := (index (collections.Where $themevariants "identifier" $darktheme) 0).chroma }}
-    {{- $cssres := $autores | resources.ExecuteAsTemplate (printf "css/chroma-%s.css" $themevariant.chroma) (dict "prefix" "chroma" "light" $light "dark" $dark) }}
-    {{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
 {{- end }}
+{{- $fontscontent := "" }}
+{{- with resources.Get "css/fonts.css" }}
+  {{- $fontscontent = .Content }}
+{{- end }}
+{{- $htmlcontent := "" }}
+{{- with resources.Get "css/format-html.css" }}
+  {{- $htmlcontent = .Content }}
+{{- end }}
+{{- $printcontent := "" }}
+{{- with resources.Get "css/format-print.css" }}
+  {{- $printcontent = .Content }}
 {{- end }}
 
 {{- /*
-- Add box styles to variables and theme
+- Read variables.css and add custom box styles
 */}}
+{{- $variablescontent := "" }}
 {{- with resources.Get "css/variables.css" }}
-  {{- $variablescontent := print ":root {\n" .Content }}
+  {{- $boxcontent := "" }}
   {{- range $page.Site.Params.boxStyle }}
     {{- $identifier := upper .identifier }}
-    {{- $variablescontent = print $variablescontent "\n"
+    {{- $boxcontent = print $boxcontent
       "\n    --INTERNAL-BOX-" $identifier "-color: var(--BOX-" $identifier "-color, " .color ");"
       "\n    --INTERNAL-BOX-" $identifier "-TEXT-color: var(--BOX-" $identifier "-TEXT-color, var(--INTERNAL-BOX-TEXT-color));"
     }}
   {{- end }}
-  {{- $variablescontent = print $variablescontent "\n}" }}
+  {{- $variablescontent = print
-  {{- $cssres := $variablescontent | resources.FromString "css/variables.css" }}
+    ":root {"
-  {{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
+    "\n" .Content
+    $boxcontent
+    "\n}"
+  }}
 {{- end }}
 
+{{- /*
+- Write theme.css
+*/}}
 {{- with resources.Get "css/theme.css" }}
-  {{- $themecontent := print
+  {{- $boxcontent := "" }}
-    `{{- $assetBusting := partialCached "assetbusting.gotmpl" . -}}` "\n"
-    `@import "{{ printf "variables.css%s" $assetBusting }}";` "\n\n"
-    .Content
-  }}
   {{- range $page.Site.Params.boxStyle }}
     {{- $identifier := upper .identifier }}
     {{- $identifierl := lower .identifier }}
-    {{- $themecontent = print $themecontent
+    {{- $boxcontent = print $boxcontent
       "\n.cstyle." $identifierl " {"
       "\n    --VARIABLE-BOX-color: var(--INTERNAL-BOX-" $identifier "-color);"
       "\n    --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-" $identifier "-TEXT-color);"
       "\n}\n"
     }}
   {{- end }}
-  {{- $themeres := $themecontent | resources.FromString (printf "%s.txt" ($themecontent | md5)) }}
+  {{- $themecontent := print
-  {{- $cssres := $themeres | resources.ExecuteAsTemplate "css/theme.css" (dict) }}
+    $variablescontent
+    "\n\n" $nucleuscontent
+    "\n" .Content
+    $boxcontent
+    "\n" $fontscontent
+  }}
+  {{- $cssres := $themecontent | resources.FromString "css/theme.css" }}
+  {{- if $minify }}
+    {{- $cssres = $cssres | minify }}
+  {{- end }}
   {{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
 {{- end }}
 
 {{- /*
-- The ugly rest
+- Write swagger.css
 */}}
-{{- $printres := resources.Get "css/print.css" }}
+{{- with resources.Get "css/swagger.css" }}
-{{- $cssres := $printres | resources.ExecuteAsTemplate "css/print.css" (dict) }}
+  {{- $swaggercontent := print
+    $variablescontent "\n"
+    .Content "\n"
+    $fontscontent "\n"
+  }}
+  {{- $cssres := $swaggercontent | resources.FromString "css/swagger.css" }}
+  {{- if $minify }}
+    {{- $cssres = $cssres | minify }}
+  {{- end }}
+  {{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
+{{- end }}
+
+{{- /*
+- Write format-html.css
+*/}}
+{{- $htmlcontent = print
+  "@media screen {"
+  "\n" $formathtmlpre ","
+  $formathtml
+  "\n}"
+  "\n@media print {"
+  "\n&" $defaultthemevariant.themecontent
+  "\n" $defaultthemevariant.chromacontent
+  "\n}"
+  "\n@media print {"
+  "\n" $printcontent
+  "\n}"
+  "\n" $htmlcontent
+}}
+{{- $cssres := $htmlcontent | resources.FromString "css/format-html.css" }}
+{{- if $minify }}
+  {{- $cssres = $cssres | minify }}
+{{- end }}
 {{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
 
-{{- $formatprintres := resources.Get "css/format-print.css" }}
+{{- /*
-{{- $cssres := $formatprintres | resources.ExecuteAsTemplate "css/format-print.css" (dict "themevariant" (index (collections.Where $themevariants "identifier" "relearn-light") 0)) }}
+- Write format-print.css
+*/}}
+{{- $printcontent = print
+  ":root[data-r-output-format='print'] {"
+  "\n&" $defaultthemevariant.themecontent
+  "\n" $defaultthemevariant.chromacontent
+  "\n}"
+  "\n" $printcontent
+}}
+{{- $cssres := $printcontent | resources.FromString "css/format-print.css" }}
+{{- if $minify }}
+  {{- $cssres = $cssres | minify }}
+{{- end }}
 {{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
 
-{{- $swaggerres := resources.Get "css/swagger.css" }}
+{{- return $themevariants }}
-{{- $cssres := $swaggerres | resources.ExecuteAsTemplate "css/swagger.css" (dict) }}
-{{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
-
-{{- return collections.Where $themevariants "config" true }}
 
 {{- define "partials/get-theme-details.html" }}
   {{- $themevariant := .themevariant }}
@@ -172,24 +219,39 @@ Chroma auto run:
     {{- errorf "\"theme-%s.css\": file not found in \"assets/css\"; if you are migrating from a theme version older thant 6.0.0, you have to move it over from \"static/css\"" $identifier }}
   {{- end }}
   {{- $chroma := "" }}
+  {{- $chromacontent := "" }}
   {{- range findRESubmatch `[ \t]*@import\s+[^$]*?chroma-([^.]*?)\.css` $themecontent }}
     {{- $chroma = index . 1 }}
     {{- errorf "\"theme-%s.css\": UNSUPPORTED use of @import for chroma stylesheet, instead use '--CODE-theme: %s;'; see https://mcshelby.github.io/hugo-theme-relearn/introduction/releasenotes/6/#6-0-0" $identifier $chroma }}
   {{- end }}
+  {{- $tempthemecontent := $themecontent }}
   {{- range findRESubmatch `[ \t]*@import\s+[^$]*?theme-([^.]*?)\.css` $themecontent }}
     {{- $subidentifier := index . 1 }}
     {{- $themevariant = partial "get-theme-details.html" (dict "themevariant" $themevariant "identifier" $subidentifier) }}
+    {{- $tempthemecontent = replaceRE (printf `[ \t]*@import\s+[^$]*?theme-%s\.css` $subidentifier) $themevariant.themecontent $tempthemecontent 1 }}
     {{- $chroma = $themevariant.chroma }}
+    {{- $chromacontent = $themevariant.chromacontent }}
   {{- end }}
+  {{- $themecontent = $tempthemecontent}}
   {{- range findRESubmatch `[ \t]*--CODE-theme\s*:\s*([^;]*?)\s*;` $themecontent }}
     {{- $chroma = index . 1 }}
+    {{- $cssres := resources.Get (printf "css/chroma-%s.css" $chroma) }}
+    {{- if not $cssres }}
+      {{- errorf "\"chroma-%s.css\": file not found in \"assets/css\"; if you are migrating from a theme version older thant 6.0.0, you have to move it over from \"static/css\"" $chroma }}
+    {{- end }}
+    {{- $chromacontent = $cssres.Content }}
   {{- end }}
   {{- if not $chroma }}
     {{- $chroma = "relearn-light" }}
+    {{- $cssres := resources.Get (printf "css/chroma-%s.css" $chroma) }}
+    {{- if not $cssres }}
+      {{- errorf "\"chroma-%s.css\": file not found in \"assets/css\"; if you are migrating from a theme version older thant 6.0.0, you have to move it over from \"static/css\"" $chroma }}
+    {{- end }}
+    {{- $chromacontent = $cssres.Content }}
     {{- $themecontent = replaceRE `(:root\s*\{[ \t]*)(\s*)` (printf "${1}${2}--CODE-theme: %s;${2}" $chroma) $themecontent }}
   {{- end }}
+  {{- $themevariant = collections.Merge $themevariant (dict "themecontent" $themecontent) }}
   {{- $themevariant = collections.Merge $themevariant (dict "chroma" $chroma) }}
-  {{- $cssres := $themecontent | resources.FromString (printf "css/theme-%s.css" $identifier) }}
+  {{- $themevariant = collections.Merge $themevariant (dict "chromacontent" $chromacontent) }}
-  {{- /* the following code causes Hugo to generate our css file - although it is in comments */}}<!-- {{ $cssres.RelPermalink }} -->
   {{- return $themevariant }}
 {{- end }}

layouts/partials/menu.html

@@ -68,7 +68,7 @@
                   <span>&nbsp;</span>
                   <div class="control-style">
                     <label class="a11y-only" for="R-select-variant">{{ T "Theme" }}</label>
-                    <select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
+                    <select id="R-select-variant" onchange="window.relearn.changeVariant( this.value );">
                       {{- $firstvariant := true }}
                       {{- range $themevariants }}
                         {{- $themevariant := . }}
@@ -79,7 +79,7 @@
                   </div>
                   <div class="clear"></div>
                 </div>
-                <script>window.variants && variants.markSelectedVariant();</script>
+                <script>window.relearn.initVariant();</script>
               </li>
               <li class="footerVisitedLinks{{if $showvisitedlinks}} showVisitedLinks{{end}}">
                 <div class="padding menu-control">

layouts/partials/stylesheet.html

@@ -7,27 +7,22 @@
     {{- $assetBusting := partialCached "assetbusting.gotmpl" . }}
     {{- /* https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use */}}
     <link href="{{"css/fontawesome-all.min.css" | relURL}}{{ $assetBusting }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="{{"css/fontawesome-all.min.css" | relURL}}{{ $assetBusting }}" rel="stylesheet"></noscript>
-    <link href="{{"css/nucleus.css" | relURL}}{{ $assetBusting }}" rel="stylesheet">
     <link href="{{"css/auto-complete.css" | relURL}}{{ $assetBusting }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="{{"css/auto-complete.css" | relURL}}{{ $assetBusting }}" rel="stylesheet"></noscript>
     <link href="{{"css/perfect-scrollbar.min.css" | relURL}}{{ $assetBusting }}" rel="stylesheet">
-    <link href="{{"css/fonts.css" | relURL}}{{ $assetBusting }}" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="{{"css/fonts.css" | relURL}}{{ $assetBusting }}" rel="stylesheet"></noscript>
     {{- $themevariants := partialCached "_relearn/themeVariants.gotmpl" . }}
-    <link href="{{"css/theme.css" | relURL}}{{ $assetBusting }}" rel="stylesheet">
+    {{- $minify := not hugo.IsServer }}
-    {{- with index $themevariants 0 }}
+    {{- if isset site.Params "minify" }}
-    <link href="{{(printf "css/theme-%s.css" .identifier) | relURL}}{{ $assetBusting }}" rel="stylesheet" id="R-variant-style">
+      {{- $minify = site.Params.minify }}
-    <link href="{{(printf "css/chroma-%s.css" .chroma) | safeHTML | relURL}}{{ $assetBusting }}" rel="stylesheet" id="R-variant-chroma-style">
     {{- end }}
-    <link href="{{"css/print.css" | relURL}}{{ $assetBusting }}" rel="stylesheet" media="print">
+    {{- $min := cond $minify ".min" "" }}
-    {{- $f := printf "/static/css/format-%s.css" $outputFormat }}
+    <link href="{{(printf "css/theme%s.css" $min) | relURL}}{{ $assetBusting }}" rel="stylesheet">
-    {{- if or (partialCached "_relearn/fileExists.gotmpl" $f $f) (resources.Get (printf "/css/format-%s.css" $outputFormat)) }}
+    <link href="{{(printf "css/format-%s%s.css" $outputFormat $min) | relURL}}{{ $assetBusting }}" rel="stylesheet">
-    <link href="{{(printf "css/format-%s.css" $outputFormat) | relURL}}{{ $assetBusting }}" rel="stylesheet">
-    {{- end }}
-    <script src="{{"js/variant.js" | relURL}}{{ $assetBusting }}"></script>
     <script>
       window.relearn = window.relearn || {};
       window.relearn.relBasePath='{{ partial "_relearn/relBasePath.gotmpl" . | safeJS }}';
       window.relearn.relBaseUri='{{ partial "_relearn/relBaseUri.gotmpl" . | safeJS }}';
       window.relearn.absBaseUri='{{ replaceRE "/*$" "" .Site.BaseURL | safeJS }}';
+      {{ printf "window.relearn.min = `%s`;" $min | safeJS }}
       window.relearn.disableAnchorCopy={{ printf "%t" (eq .Site.Params.disableAnchorCopy true) | safeJS }};
       window.relearn.disableAnchorScrolling={{ printf "%t" (eq .Site.Params.disableAnchorScrolling true) | safeJS }};
       {{ "// variant stuff" | safeJS }}
@@ -36,6 +31,31 @@
         {{- $quotedthemevariants = $quotedthemevariants | append (printf "'%s'" .identifier) }}
       {{- end }}
       window.variants && variants.init( [ {{ delimit $quotedthemevariants ", " | safeJS }} ] );
+      window.relearn.changeVariant = function(variant) {
+        document.documentElement.dataset.rThemeVariant = variant;
+        var old_variant = window.localStorage.getItem("R-theme-variant");
+        if (old_variant != variant) {
+          window.localStorage.setItem("R-theme-variant", variant);
+          document.dispatchEvent( new CustomEvent('themeVariantLoaded', { detail: { variant: variant } }) );
+        }
+      }
+      window.relearn.initVariant = function() {
+        var variant = window.localStorage.getItem("R-theme-variant") ?? "";
+        var el = document.querySelector("#R-select-variant");
+        if (variant && el) {
+          var options = Array.from(el.options);
+          if( options.some(option => option.value == variant) ){
+            el.value = variant;
+          }
+          else {
+            variant = options[0]?.value ?? "";
+            el.value = variant;
+            window.localStorage.setItem("R-theme-variant", variant);
+          }
+        }
+        document.documentElement.dataset.rThemeVariant = variant;
+      }
+      window.relearn.initVariant();
       {{ "// translations" | safeJS }}
       {{ printf "window.T_Copy_to_clipboard = `%s`;" (T `Copy-to-clipboard`) | safeJS }}
       {{ printf "window.T_Copied_to_clipboard = `%s`;" (T `Copied-to-clipboard`) | safeJS }}

layouts/partials/version.txt

@@ -1 +1 @@
-7.1.1+0d638392323c5888d45cb634cfd8b4f04fbcd223
+7.1.1+2c5ac2b60022b3ec8e9e275bfeb2d5ebc77d9bc0

static/js/search.js

@@ -316,4 +316,12 @@ function startSearch() {
   });
 }
 
+function ready(fn) {
+  if (document.readyState == 'complete') {
+    fn();
+  } else {
+    document.addEventListener('DOMContentLoaded', fn);
+  }
+}
+
 ready(startSearch);

static/js/theme.js

@@ -286,9 +286,6 @@ function initMermaid(update, attrs) {
   if (update && !state.is_initialized) {
     return;
   }
-  if (typeof variants == 'undefined') {
-    return;
-  }
   if (typeof mermaid == 'undefined' || typeof mermaid.mermaidAPI == 'undefined') {
     return;
   }
@@ -300,7 +297,7 @@ function initMermaid(update, attrs) {
       function () {
         isPrintPreview = true;
         initMermaid(true, {
-          theme: variants.getColorValue('PRINT-MERMAID-theme'),
+          theme: getColorValue('PRINT-MERMAID-theme'),
         });
       }.bind(this)
     );
@@ -314,7 +311,7 @@ function initMermaid(update, attrs) {
   }
 
   attrs = attrs || {
-    theme: variants.getColorValue('MERMAID-theme'),
+    theme: getColorValue('MERMAID-theme'),
   };
 
   var search;
@@ -378,9 +375,6 @@ function initOpenapi(update, attrs) {
   if (update && !state.is_initialized) {
     return;
   }
-  if (typeof variants == 'undefined') {
-    return;
-  }
 
   if (!state.is_initialized) {
     state.is_initialized = true;
@@ -408,9 +402,12 @@ function initOpenapi(update, attrs) {
     var relBasePath = window.relearn.relBasePath;
     var assetBuster = window.themeUseOpenapi.assetsBuster;
     var print = isPrint || isPrintPreview ? 'PRINT-' : '';
-    var theme = print ? `${relBasePath}/css/theme-relearn-light.css${assetBuster}` : document.querySelector('#R-variant-style').attributes.href.value;
+    var format = print ? `print` : `html`;
-    var swagger_theme = variants.getColorValue(print + 'OPENAPI-theme');
+    var min = window.relearn.min;
-    var swagger_code_theme = variants.getColorValue(print + 'OPENAPI-CODE-theme');
+    var theme = `${relBasePath}/css/format-${format}${min}.css${assetBuster}`;
+    var variant = document.documentElement.dataset.rThemeVariant;
+    var swagger_theme = getColorValue(print + 'OPENAPI-theme');
+    var swagger_code_theme = getColorValue(print + 'OPENAPI-CODE-theme');
 
     const openapiId = 'relearn-swagger-ui';
     const openapiIframeId = openapiId + '-iframe';
@@ -426,7 +423,7 @@ function initOpenapi(update, attrs) {
     const oi = document.createElement('iframe');
     oi.id = openapiIframeId;
     oi.classList.toggle('sc-openapi-iframe', true);
-    oi.srcdoc = '<!doctype html>' + '<html lang="' + lang + '" dir="' + (isRtl ? 'rtl' : 'ltr') + '">' + '<head>' + '<link rel="stylesheet" href="' + window.themeUseOpenapi.css + '">' + '<link rel="stylesheet" href="' + relBasePath + '/css/swagger.css' + assetBuster + '">' + '<link rel="stylesheet" href="' + relBasePath + '/css/swagger-' + swagger_theme + '.css' + assetBuster + '">' + '<link rel="stylesheet" href="' + theme + '">' + '</head>' + '<body>' + '<a class="relearn-expander" href="" onclick="return relearn_collapse_all()">Collapse all</a>' + '<a class="relearn-expander" href="" onclick="return relearn_expand_all()">Expand all</a>' + '<div id="relearn-swagger-ui"></div>' + '<script>' + 'function relearn_expand_all(){' + 'document.querySelectorAll( ".opblock-summary-control[aria-expanded=false]" ).forEach( btn => btn.click() );' + 'document.querySelectorAll( ".model-container > .model-box > button[aria-expanded=false]" ).forEach( btn => btn.click() );' + 'return false;' + '}' + 'function relearn_collapse_all(){' + 'document.querySelectorAll( ".opblock-summary-control[aria-expanded=true]" ).forEach( btn => btn.click() );' + 'document.querySelectorAll( ".model-container > .model-box > .model-box > .model > span > button[aria-expanded=true]" ).forEach( btn => btn.click() );' + 'return false;' + '}' + '</script>' + '</body>' + '</html>';
+    oi.srcdoc = '<!doctype html>' + '<html lang="' + lang + '" dir="' + (isRtl ? 'rtl' : 'ltr') + '" data-r-output-format="' + format + '" data-r-theme-variant="' + variant + '">' + '<head>' + '<link rel="stylesheet" href="' + window.themeUseOpenapi.css + '">' + '<link rel="stylesheet" href="' + relBasePath + `/css/swagger${min}.css` + assetBuster + '">' + '<link rel="stylesheet" href="' + relBasePath + '/css/swagger-' + swagger_theme + '.css' + assetBuster + '">' + '<link rel="stylesheet" href="' + theme + '">' + '</head>' + '<body>' + '<a class="relearn-expander" href="" onclick="return relearn_collapse_all()">Collapse all</a>' + '<a class="relearn-expander" href="" onclick="return relearn_expand_all()">Expand all</a>' + '<div id="relearn-swagger-ui"></div>' + '<script>' + 'function relearn_expand_all(){' + 'document.querySelectorAll( ".opblock-summary-control[aria-expanded=false]" ).forEach( btn => btn.click() );' + 'document.querySelectorAll( ".model-container > .model-box > button[aria-expanded=false]" ).forEach( btn => btn.click() );' + 'return false;' + '}' + 'function relearn_collapse_all(){' + 'document.querySelectorAll( ".opblock-summary-control[aria-expanded=true]" ).forEach( btn => btn.click() );' + 'document.querySelectorAll( ".model-container > .model-box > .model-box > .model > span > button[aria-expanded=true]" ).forEach( btn => btn.click() );' + 'return false;' + '}' + '</script>' + '</body>' + '</html>';
     oi.height = '100%';
     oi.width = '100%';
     oi.onload = function () {
@@ -732,14 +729,6 @@ function initCodeClipboard() {
   });
 }
 
-function initChroma(update) {
-  var chroma = variants.getColorValue('CODE-theme');
-  var link = document.querySelector('#R-variant-chroma-style');
-  var old_path = link.getAttribute('href');
-  var new_path = old_path.replace(/^(.*\/chroma-).*?(\.css.*)$/, '$1' + chroma + '$2');
-  link.setAttribute('href', new_path);
-}
-
 function initArrowVerticalNav() {
   var topMain = 0;
   if (!isPrint) {
@@ -1635,38 +1624,32 @@ function initSearch() {
   window.relearn.runInitialSearch && window.relearn.runInitialSearch();
 }
 
-function updateTheme(detail) {
+document.addEventListener('themeVariantLoaded', function (ev) {
-  if (window.relearn.lastVariant == detail.variant) {
+  updateTheme(ev);
+});
+
+function updateTheme(ev) {
+  if (window.relearn.lastVariant == ev.detail.variant) {
     return;
   }
-  window.relearn.lastVariant = detail.variant;
+  window.relearn.lastVariant = ev.detail.variant;
 
-  initChroma(true);
   initMermaid(true);
   initOpenapi(true);
-  document.dispatchEvent(
-    new CustomEvent('themeVariantLoaded', {
-      detail: detail,
-    })
-  );
 }
 
 (function () {
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
-    initChroma(true);
     initMermaid(true);
     initOpenapi(true);
   });
 })();
 
 function useMermaid(config) {
+  delete config.theme;
   window.relearn.mermaidConfig = config;
   if (typeof mermaid != 'undefined' && typeof mermaid.mermaidAPI != 'undefined') {
     mermaid.initialize(Object.assign({ securityLevel: 'antiscript', startOnLoad: false }, config));
-    if (config.theme && variants) {
-      var write_style = variants.findLoadedStylesheet('R-variant-style');
-      write_style.setProperty('--CONFIG-MERMAID-theme', config.theme);
-    }
   }
 }
 if (window.themeUseMermaid) {
@@ -1682,6 +1665,14 @@ if (window.themeUseOpenapi) {
   useOpenapi(window.themeUseOpenapi);
 }
 
+function ready(fn) {
+  if (document.readyState == 'complete') {
+    fn();
+  } else {
+    document.addEventListener('DOMContentLoaded', fn);
+  }
+}
+
 ready(function () {
   initArrowVerticalNav();
   initArrowHorizontalNav();
@@ -1854,8 +1845,25 @@ ready(function () {
   function onWidthChange(setWidth, e) {
     setWidth(e);
   }
-  var width = variants.getColorValue('MAIN-WIDTH-MAX');
+  var width = getColorValue('MAIN-WIDTH-MAX');
   var mqm = window.matchMedia('screen and ( min-width: ' + width + ')');
   mqm.addEventListener('change', onWidthChange.bind(null, setWidth));
   setWidth(mqm);
 })();
+
+function getColorValue(c) {
+  return this.normalizeColor(getComputedStyle(document.documentElement).getPropertyValue('--INTERNAL-' + c));
+}
+
+function normalizeColor(c) {
+  if (!c || !c.trim) {
+    return c;
+  }
+  c = c.trim();
+  c = c.replace(/\s*\(\s*/g, '( ');
+  c = c.replace(/\s*\)\s*/g, ' )');
+  c = c.replace(/\s*,\s*/g, ', ');
+  c = c.replace(/0*\./g, '.');
+  c = c.replace(/ +/g, ' ');
+  return c;
+}