Progress bar styling updates

Author: webstackdev

src/components/Content/ProgressBar/client/index.ts

@@ -2,9 +2,9 @@
  * Article reading progress bar – Lit web component
  *
  * Renders a fixed `<progress>` element below the header that fills as
- * the visitor scrolls through the article `#content` region. Uses the
- * layout-position store's `--layout-top-offset` to position itself
- * directly beneath the header.
+ * the visitor scrolls through the article `#content` region. Positioned
+ * via `--theme-picker-offset` + `--header-current-height` from the
+ * layout-position store.
  */
 import { LitElement } from 'lit'
 import { defineCustomElement } from '@components/scripts/utils'

src/components/Content/ProgressBar/index.astro

@@ -4,21 +4,22 @@
  *
  * Fixed below the header, shows scroll progress through the article.
  * Rendered as a Lit web component wrapping a native <progress> element.
- * Uses --layout-top-offset from the layout-position store for vertical
- * positioning. The data-progress-bar attribute lets the store measure it.
+ * Positioned via --theme-picker-offset + --header-current-height from
+ * the layout-position store. The data-progress-bar attribute lets the
+ * store measure it.
  */
 ---
 
 <reading-progress-bar
   class="fixed left-0 right-0 block h-1.5 sm:h-2"
-  style="top: var(--layout-top-offset, 0); z-index: var(--z-nav);"
+  style="top: calc(var(--theme-picker-offset, 0px) + var(--header-current-height, 0px)); z-index: var(--z-nav);"
   data-progress-bar
   aria-hidden="true"
 >
   <progress
     max="100"
     value="0"
-    class="block h-full w-full appearance-none [&::-webkit-progress-bar]:bg-transparent [&::-webkit-progress-value]:bg-success [&::-moz-progress-bar]:bg-success text-[8px]"
+    class="block h-full w-full appearance-none [&::-webkit-progress-bar]:bg-transparent [&::-webkit-progress-value]:bg-page-inverse [&::-moz-progress-bar]:bg-page-inverse"
   ></progress>
 </reading-progress-bar>