Fix custom properties & bugs in stylesheet

Author: kimo-k

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Change Log
 All notable changes to this project will be documented in this file. This change log follows the conventions of [keepachangelog.com](http://keepachangelog.com/).
 
+## 1.9.6 (2024-02-02)
+
+#### Fixed
+
+- Elements using the new stylesheet are properly themed again.
+
 ## 1.9.5 (2024-02-02)
 
 #### Fixed

resources/day8/re_frame_10x.css resources/day8/re_frame_10x/style.css

@@ -1,7 +1,7 @@
 /* day8/re-frame-10x */
 /* https://www.nordtheme.com/docs/colors-and-palettes */
 
-:root {--nord0: #2E3440;
+:host {--nord0: #2E3440;
        --nord1: #3B4252;
        --nord2: #434C5E;
        --nord3: #4C566A;
@@ -17,10 +17,9 @@
        --nord13: #EBCB8B;
        --nord14: #A3BE8C;
        --nord15: #B48EAD;
-       --nord-ghost-white #f8f9fb;
-       --border-1: 1px solid var(--nord4);
-       --color-1 var(--nord3);
-       --background-color-1 var(--nord-ghost-white);}
+       --nord-ghost-white: #f8f9fb;
+       --color-1: var(--nord3);
+       --background-color-1: var(--nord-ghost-white);}
 
 .flex-style {display: flex;}
 
@@ -41,7 +40,7 @@
            color: var(--color-1);}
 
 .summary {padding: 0 19px;
-          border: var(--border-1);
+          border: 1px solid var(--nord4);
           border-radius: 2px;}
 
 .search {border-bottom: var(--border-2);}
@@ -52,14 +51,14 @@
 
 .icon {cursor: default;
        border-radius: 3px;
-       background-color: var(--nord2);
-       border: 1px solid var(--nord1);
+       background-color: var(--nord5);
+       border: 1px solid var(--nord4);
        padding: 2px;
        font-weight: 400;}
 
 .icon.disabled {cursor: pointer;
-                background-color: var(--nord5);
-                border: 1px solid var(--nord4);}
+                background-color: var(--nord2);
+                border: 1px solid var(--nord1);}
 
 .icon svg path {fill: var(--nord0);}
 

src/day8/re_frame_10x/navigation/views.cljs

@@ -392,7 +392,7 @@
   ;; When programming here, we need to be careful about which document and window
   ;; we are operating on, and keep in mind that the window can close without going
   ;; through standard react lifecycle, so we hook the beforeunload event.
-  (let [shadow-root              (tools.shadow-dom/shadow-root popup-document "--re-frame-10x--" (inline-resource "day8/re_frame_10x.css"))
+  (let [shadow-root              (tools.shadow-dom/shadow-root popup-document "--re-frame-10x--" (inline-resource "day8/re_frame_10x/style.css"))
         spade-container          (spade.dom/create-container shadow-root)
         resize-update-scheduled? (atom false)
         handle-window-resize     (fn [_]

src/day8/re_frame_10x/preload/react_17.cljs

@@ -26,7 +26,7 @@
 
 (rf/clear-subscription-cache!)
 
-(def shadow-root (re-frame-10x/create-shadow-root (inline-resource "day8/re_frame_10x.css")))
+(def shadow-root (re-frame-10x/create-shadow-root (inline-resource "day8/re_frame_10x/style.css")))
 
 (rdom/render (re-frame-10x/create-style-container shadow-root)
              shadow-root)

src/day8/re_frame_10x/preload/react_18.cljs

@@ -20,7 +20,7 @@
 
 (rf/clear-subscription-cache!)
 
-(def shadow-root (re-frame-10x/create-shadow-root (inline-resource "day8/re_frame_10x.css")))
+(def shadow-root (re-frame-10x/create-shadow-root (inline-resource "day8/re_frame_10x/style.css")))
 
 (rdc/render (rdc/create-root shadow-root)
             (re-frame-10x/create-style-container shadow-root))