From b3f648217607aca40c7a16de1c4998c9295e470f Mon Sep 17 00:00:00 2001
From: Konstantinos Kaloutas <sprocketc@gmail.com>
Date: Mon, 26 Feb 2024 08:22:30 +0200
Subject: [PATCH] rename bg css vars and classes

---
 src/renderer/attribute/angle.cljs    |  2 +-
 src/renderer/attribute/color.cljs    |  2 +-
 src/renderer/attribute/length.cljs   |  4 ++--
 src/renderer/attribute/points.cljs   |  2 +-
 src/renderer/attribute/style.cljs    |  2 +-
 src/renderer/attribute/views.cljs    | 12 +++++------
 src/renderer/cmdk/styles.css         |  2 +-
 src/renderer/codemirror/styles.css   |  2 +-
 src/renderer/color/styles.css        |  2 +-
 src/renderer/color/views.cljs        |  4 ++--
 src/renderer/document/styles.css     |  4 ++--
 src/renderer/home.cljs               |  2 +-
 src/renderer/menubar/styles.css      |  2 +-
 src/renderer/notification/styles.css |  2 +-
 src/renderer/reepl/completions.cljs  |  6 +++---
 src/renderer/styles.css              | 30 ++++++++++++++--------------
 src/renderer/theme/styles.css        | 12 +++++------
 src/renderer/timeline/styles.css     |  4 ++--
 src/renderer/timeline/views.cljs     |  2 +-
 src/renderer/toolbar/object.cljs     |  2 +-
 src/renderer/toolbar/tools.cljs      |  2 +-
 src/renderer/toolbar/views.cljs      |  2 +-
 src/renderer/tools/custom/blob.cljs  |  2 +-
 src/renderer/tree/styles.css         |  2 +-
 src/renderer/views.cljs              | 15 +++++++-------
 src/renderer/window/views.cljs       |  4 ++--
 26 files changed, 64 insertions(+), 63 deletions(-)

diff --git a/src/renderer/attribute/angle.cljs b/src/renderer/attribute/angle.cljs
index f541f164..042d2e71 100644
--- a/src/renderer/attribute/angle.cljs
+++ b/src/renderer/attribute/angle.cljs
@@ -16,7 +16,7 @@
      :placeholder initial}]
    [:> Popover/Root {:modal true}
     [:> Popover/Trigger {:asChild true}
-     [:button.button.ml-px.level-1.text-muted
+     [:button.button.ml-px.bg-primary.text-muted
       {:style {:width "26px" :height "26px"}}
       [comp/icon "degrees" {:class "small"}]]]
     [:> Popover/Portal
diff --git a/src/renderer/attribute/color.cljs b/src/renderer/attribute/color.cljs
index e02cbf8e..07d23897 100644
--- a/src/renderer/attribute/color.cljs
+++ b/src/renderer/attribute/color.cljs
@@ -23,7 +23,7 @@
     [:> Popover/Trigger {:asChild true}
      [:button.color-drip.ml-px.inline-block
       {:style {:flex "0 0 26px"
-               :border "5px solid var(--level-1)"
+               :border "5px solid var(--bg-primary)"
                :background v}}]]
     [:> Popover/Portal
      [:> Popover/Content
diff --git a/src/renderer/attribute/length.cljs b/src/renderer/attribute/length.cljs
index 04cda928..88abfbe6 100644
--- a/src/renderer/attribute/length.cljs
+++ b/src/renderer/attribute/length.cljs
@@ -40,11 +40,11 @@
                    (rf/dispatch [:element/dec-attribute k])
                    (rf/dispatch [:element/inc-attribute k])))}]
    [:div.flex {:style {:width "54px"}}
-    [:button.button.ml-px.level-1.text-muted
+    [:button.button.ml-px.bg-primary.text-muted
      {:style {:width "26px" :height "26px"}
       :on-pointer-down #(rf/dispatch [:element/dec-attribute k])}
      [comp/icon "minus" {:class "small"}]]
-    [:button.button..ml-px.level-1.text-muted
+    [:button.button..ml-px.bg-primary.text-muted
      {:style {:width "26px" :height "26px"}
       :on-click #(rf/dispatch [:element/inc-attribute k])}
      [comp/icon "plus" {:class "small"}]]]])
diff --git a/src/renderer/attribute/points.cljs b/src/renderer/attribute/points.cljs
index fcfa4b4d..22a25630 100644
--- a/src/renderer/attribute/points.cljs
+++ b/src/renderer/attribute/points.cljs
@@ -35,7 +35,7 @@
      (when v
        [:> Popover/Root {:modal true}
         [:> Popover/Trigger {:asChild true}
-         [:button.ml-px.inline-block.level-1.text-muted
+         [:button.ml-px.inline-block.bg-primary.text-muted
           {:style {:flex "0 0 26px"
                    :height "26px"}}
           [comp/icon "pencil" {:class "small"}]]]
diff --git a/src/renderer/attribute/style.cljs b/src/renderer/attribute/style.cljs
index cf6698ee..33e58830 100644
--- a/src/renderer/attribute/style.cljs
+++ b/src/renderer/attribute/style.cljs
@@ -6,6 +6,6 @@
 
 (defmethod hierarchy/form-element :style
   [k v disabled?]
-  [:div.w-full.level-1.py-0.px-2
+  [:div.w-full.bg-primary.py-0.px-2
    [cm/editor v {:options {:readOnly disabled?}
                  :on-blur #(rf/dispatch [:element/set-attr k %])}]])
diff --git a/src/renderer/attribute/views.cljs b/src/renderer/attribute/views.cljs
index e4eda8fb..731f6262 100644
--- a/src/renderer/attribute/views.cljs
+++ b/src/renderer/attribute/views.cljs
@@ -33,7 +33,7 @@
 
 (defn mdn-button
   [mdn_url attr]
-  [:button.button.px-3.level-1.grow
+  [:button.button.px-3.bg-primary.grow
    {:on-click #(rf/dispatch
                 [:window/open-remote-url
                  (or mdn_url
@@ -84,7 +84,7 @@
             :on-blur #(on-change-handler % key value)
             :on-key-down #(keyb/input-key-down-handler % value on-change-handler key value)}]
    (when-not (or (empty? (str value)) disabled?)
-     [:button.button.ml-px.level-1.text-muted.absolute.right-0.clear-input-button.hover:bg-transparent
+     [:button.button.ml-px.bg-primary.text-muted.absolute.right-0.clear-input-button.hover:bg-transparent
       {:style {:width "26px" :height "26px"}
        :on-pointer-down #(rf/dispatch [:element/remove-attr key])}
       [comp/icon "times" {:class "small"}]])])
@@ -121,7 +121,7 @@
                     :disabled disabled?}
     [:> Select/Trigger {:class "select-trigger ml-px"
                         :aria-label (name key)
-                        :style {:background "var(--level-1)"
+                        :style {:background "var(--bg-primary)"
                                 :border-radius 0
                                 :width "26px"
                                 :height "26px"}}
@@ -227,7 +227,7 @@
          [:p description])
        [caniusethis {:tag tag}]
        (when-let [url (:url (tools/properties tag))]
-         [:button.button.px-3.level-1.w-full
+         [:button.button.px-3.bg-primary.w-full
           {:on-click #(rf/dispatch [:window/open-remote-url url])}
           "Learn more"])]
       [:> HoverCard/Arrow {:class "popover-arrow"}]]]]])
@@ -242,7 +242,7 @@
     [:div.w-full.ml-px.v-scroll.flex.flex-col.h-full
      (when (seq selected-elements)
        [:div.w-full.overflow-x-hidden
-        [:div.flex.level-1.py-4.pl-4.pr-2
+        [:div.flex.bg-primary.py-4.pl-4.pr-2
          [:h1.self-center.flex-1.text-lg.p-1
           (if (empty? (rest selected-elements))
             (let [el (first selected-elements)
@@ -254,4 +254,4 @@
         [:div.attribute-grid
          (for [[k v] selected-attrs]
            ^{:key k} [row k v locked? tag])]])
-     [:div.level-1.grow.w-full.flex]]))
+     [:div.bg-primary.grow.w-full.flex]]))
diff --git a/src/renderer/cmdk/styles.css b/src/renderer/cmdk/styles.css
index 5da29d7e..01670d31 100644
--- a/src/renderer/cmdk/styles.css
+++ b/src/renderer/cmdk/styles.css
@@ -8,7 +8,7 @@
 }
 
 [cmdk-input] {
-  @apply p-3 level-0;
+  @apply p-3 bg-secondary;
 
   border-bottom: 1px solid var(--border-color)
 }
diff --git a/src/renderer/codemirror/styles.css b/src/renderer/codemirror/styles.css
index 0b84b4ff..aeb4a0fb 100644
--- a/src/renderer/codemirror/styles.css
+++ b/src/renderer/codemirror/styles.css
@@ -21,7 +21,7 @@
 }
 
 .CodeMirror-gutters {
-    @apply level-0 !important;
+    @apply bg-secondary !important;
 }
 
 .CodeMirror {
diff --git a/src/renderer/color/styles.css b/src/renderer/color/styles.css
index b6464dae..12f0f544 100644
--- a/src/renderer/color/styles.css
+++ b/src/renderer/color/styles.css
@@ -63,7 +63,7 @@
     }
 
     > div:nth-child(3)  {
-      @apply level-1 w-full !important;
+      @apply bg-primary w-full !important;
       padding-top: 9px !important;
 
       > div:last-child {
diff --git a/src/renderer/color/views.cljs b/src/renderer/color/views.cljs
index 9a049b2a..9f991499 100644
--- a/src/renderer/color/views.cljs
+++ b/src/renderer/color/views.cljs
@@ -14,7 +14,7 @@
                                 (rf/dispatch [:element/set-attr :fill color]))
                     :style {:background-color color}}
    (when (= color "transparent")
-     [:div.level-1.text-error.relative
+     [:div.bg-primary.text-error.relative
       [comp/icon "times"]])])
 
 (defn swatch [colors]
@@ -35,7 +35,7 @@
      [:> Popover/Root {:modal true}
       [:> Popover/Trigger
        [:div.color-rect.relative {:style {:background stroke}}
-        [:div.color-rect.level-1.absolute
+        [:div.color-rect.bg-primary.absolute
          {:style {:width "13px"
                   :height "13px"
                   :bottom "9px"
diff --git a/src/renderer/document/styles.css b/src/renderer/document/styles.css
index 2963c478..067f59f8 100644
--- a/src/renderer/document/styles.css
+++ b/src/renderer/document/styles.css
@@ -1,5 +1,5 @@
 .document-tab {
-  @apply button flex items-center h-full mr-px text-left level-1 gap-2 opacity-50 hover:level-1;
+  @apply button flex items-center h-full mr-px text-left bg-primary gap-2 opacity-50 hover:bg-primary;
   padding: 8px 8px 8px 16px;
   flex: 0 1 130px;
 
@@ -15,7 +15,7 @@
   }
 
   &:active {
-    @apply level-1;
+    @apply bg-primary;
   }
 
   &.active {
diff --git a/src/renderer/home.cljs b/src/renderer/home.cljs
index 1a2f4a2a..556849b0 100644
--- a/src/renderer/home.cljs
+++ b/src/renderer/home.cljs
@@ -4,7 +4,7 @@
 
 (defn panel []
   [:div.flex.overflow-auto.flex-1.min-h-full.justify-center
-   [:div.level-1.w-full.self-center.justify-center.p-12
+   [:div.bg-primary.w-full.self-center.justify-center.p-12
     {:style {:max-width "1200px"}}
 
     [:h1.text-xl.mb-1 "repath.studio"]
diff --git a/src/renderer/menubar/styles.css b/src/renderer/menubar/styles.css
index 508b600c..8567d216 100644
--- a/src/renderer/menubar/styles.css
+++ b/src/renderer/menubar/styles.css
@@ -23,7 +23,7 @@
 
 .menu-content,
 .menu-sub-content {
-  @apply level-0 drop-shadow-lg py-1 z-10;
+  @apply bg-secondary drop-shadow-lg py-1 z-10;
   min-width: 200px;
   will-change: transform, opacity;
   border: 1px solid var(--border-color);
diff --git a/src/renderer/notification/styles.css b/src/renderer/notification/styles.css
index 6e27573b..f38dde39 100644
--- a/src/renderer/notification/styles.css
+++ b/src/renderer/notification/styles.css
@@ -3,7 +3,7 @@
 }
 
 .toast {
-  @apply relative flex level-0 w-80 p-4 mb-2 rounded shadow-md border border-default;
+  @apply relative flex bg-secondary w-80 p-4 mb-2 rounded shadow-md border border-default;
 
   max-width: 100vw;
 }
diff --git a/src/renderer/reepl/completions.cljs b/src/renderer/reepl/completions.cljs
index 61474ee3..31b3edb3 100644
--- a/src/renderer/reepl/completions.cljs
+++ b/src/renderer/reepl/completions.cljs
@@ -18,9 +18,9 @@
             (dom/scroll-into-view (.-current ref)))))
       :reagent-render
       (fn [text selected? active? set-active]
-        [:div.p-1.level-0.text-nowrap
+        [:div.p-1.bg-secondary.text-nowrap
          {:on-click set-active
-          :class (and selected? (if active? "bg-accent" "level-1"))
+          :class (and selected? (if active? "bg-accent" "bg-primary"))
           :ref ref}
          text])})))
 
@@ -33,7 +33,7 @@
                      active?
                      (partial set-active %1)]) list)]
     [:div.absolute.bottom-full.left-0.w-full.text-xs
-     (when docs [:div.level-1.drop-shadow.p-4.absolute.bottom-full docs])
+     (when docs [:div.bg-primary.drop-shadow.p-4.absolute.bottom-full docs])
      (into
       [:div.overflow-hidden.flex
        {:class (when show-all? "flex-wrap")}]
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 03f37f5f..1ccb447b 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -1,10 +1,10 @@
 @layer utilities {
-  .level-0 {
-    background: var(--level-0);
+  .bg-secondary {
+    background: var(--bg-secondary);
   }
 
-  .level-1 {
-    background: var(--level-1);
+  .bg-primary {
+    background: var(--bg-primary);
   }
 
   .bg-accent {
@@ -66,7 +66,7 @@
 
 @layer components {
   .form-element {
-    @apply level-1 border-0 w-full;
+    @apply bg-primary border-0 w-full;
 
     outline: none;
     padding: 4px 12px;
@@ -128,7 +128,7 @@
 body {
   margin: 0;
   padding: 0;
-  background: var(--level-0) !important;
+  background: var(--bg-secondary) !important;
   overflow: hidden;
   font-family: var(--font-sans);
   font-size: var(--font-size);
@@ -169,7 +169,7 @@ input {
 }
 
 input[type=range] {
-  @apply m-0 level-1 appearance-none;
+  @apply m-0 bg-primary appearance-none;
   padding: 5px;
 
   &:focus {
@@ -183,7 +183,7 @@ input[type=range] {
 
 input[type=range] {
   &::-webkit-slider-runnable-track {
-    @apply border-0 rounded-none level-0;
+    @apply border-0 rounded-none bg-secondary;
     height: 16px;
   }
 
@@ -245,7 +245,7 @@ pre {
 }
 
 .tooltip {
-  @apply absolute level-0 rounded;
+  @apply absolute bg-secondary rounded;
   z-index: 1;
   margin: 8px;
   line-height: 24px;
@@ -365,7 +365,7 @@ pre {
 }
 
 .footer {
-  @apply flex p-1 level-1 overflow-visible items-center mt-px;
+  @apply flex p-1 bg-primary overflow-visible items-center mt-px;
 }
 
 .shortcut {
@@ -374,7 +374,7 @@ pre {
 }
 
 .dialog {
-  @apply fixed level-0 rounded;
+  @apply fixed bg-secondary rounded;
   width: 500px;
   top: 200px;
   left: calc(50% - 250px);
@@ -438,7 +438,7 @@ pre {
 }
 
 .popover-content {
-  @apply level-0 drop-shadow-lg z-10;
+  @apply bg-secondary drop-shadow-lg z-10;
   max-width: 300px;
   border: 1px solid var(--border-color);
   animation-duration: 400ms;
@@ -466,11 +466,11 @@ pre {
 .popover-arrow,
 .tooltip-arrow,
 .menu-arrow  {
-  fill: var(--level-0);
+  fill: var(--bg-secondary);
 }
 
 .tooltip-content {
-  @apply level-0 px-2 py-1 rounded drop-shadow-md;
+  @apply bg-secondary px-2 py-1 rounded drop-shadow-md;
   max-width: 300px;
   border: 1px solid var(--border-color);
   animation-duration: 200ms;
@@ -505,7 +505,7 @@ pre {
 }
 
 .switch-thumb {
-  @apply block level-1 rounded-full shadow-sm;
+  @apply block bg-primary rounded-full shadow-sm;
   width: 21px;
   height: 21px;
   transition: transform 100ms;
diff --git a/src/renderer/theme/styles.css b/src/renderer/theme/styles.css
index 9bb7996e..e8bed1e3 100644
--- a/src/renderer/theme/styles.css
+++ b/src/renderer/theme/styles.css
@@ -7,8 +7,8 @@
     'Apple Color Emoji', 'Segoe UI Emoji';
     --font-size: 13px;
 
-    --level-0: #222;
-    --level-1: #2d2d2d;
+    --bg-secondary: #222;
+    --bg-primary: #2d2d2d;
 
     --backdrop: rgb(0 0 0 / 0.5);
 
@@ -36,8 +36,8 @@
 }
 
 [data-theme='light'] {
-    --level-0: #e5e5e5;
-    --level-1: #f5f5f5;
+    --bg-secondary: #e5e5e5;
+    --bg-primary: #f5f5f5;
 
     --overlay: #fff;
 
@@ -61,13 +61,13 @@
     .popover-arrow,
     .tooltip-arrow,
     .menu-arrow  {
-      fill: var(--level-1);
+      fill: var(--bg-primary);
     }
     
     .popover-content,
     .tooltip-content,
     .menu-content,
     .menu-sub-content {
-      @apply level-1;
+      @apply bg-primary;
     }
 }
diff --git a/src/renderer/timeline/styles.css b/src/renderer/timeline/styles.css
index 34e2faad..00ac8527 100644
--- a/src/renderer/timeline/styles.css
+++ b/src/renderer/timeline/styles.css
@@ -1,5 +1,5 @@
 .timeline-editor {
-  @apply level-1 w-full min-h-0 h-full !important;
+  @apply bg-primary w-full min-h-0 h-full !important;
   font-family: inherit !important;
   color: var(--font-color-muted) !important;
  }
@@ -39,7 +39,7 @@
 }
 
 .timeline-editor-edit-row {
-  background-image: linear-gradient(var(--level-1), var(--level-1)), 
+  background-image: linear-gradient(var(--bg-primary), var(--bg-primary)), 
                     linear-gradient(90deg, var(--border-color) 1px, transparent 0) !important;
 }
 
diff --git a/src/renderer/timeline/views.cljs b/src/renderer/timeline/views.cljs
index 3c17258c..96a4a33a 100644
--- a/src/renderer/timeline/views.cljs
+++ b/src/renderer/timeline/views.cljs
@@ -84,7 +84,7 @@
         replay? @(rf/subscribe [:timeline/replay?])
         end @(rf/subscribe [:timeline/end])
         timeline? @(rf/subscribe [:panel/visible? :timeline])]
-    [:div.toolbar.level-1.mt-px
+    [:div.toolbar.bg-primary.mt-px
      [:div.flex-1.flex
       [comp/icon-button "go-to-start"
        {:on-click #(.setTime (.-current timeline-ref) 0)
diff --git a/src/renderer/toolbar/object.cljs b/src/renderer/toolbar/object.cljs
index 0dd30121..5e935df3 100644
--- a/src/renderer/toolbar/object.cljs
+++ b/src/renderer/toolbar/object.cljs
@@ -131,4 +131,4 @@
          (interpose [{:type :divider}])
          flatten
          (map v/button)
-         (into [:div.flex.flex-col.level-1.text-center.flex-0.ml-px.toolbar]))))
+         (into [:div.flex.flex-col.bg-primary.text-center.flex-0.ml-px.toolbar]))))
diff --git a/src/renderer/toolbar/tools.cljs b/src/renderer/toolbar/tools.cljs
index 9a4a6cdb..7e72439e 100644
--- a/src/renderer/toolbar/tools.cljs
+++ b/src/renderer/toolbar/tools.cljs
@@ -48,6 +48,6 @@
 
 (defn root
   []
-  (into [:div.justify-center.flex-wrap.level-1.toolbar]
+  (into [:div.justify-center.flex-wrap.bg-primary.toolbar]
         (interpose [:span.v-divider]
                    (map group groups))))
diff --git a/src/renderer/toolbar/views.cljs b/src/renderer/toolbar/views.cljs
index 9aec14db..ea3fc746 100644
--- a/src/renderer/toolbar/views.cljs
+++ b/src/renderer/toolbar/views.cljs
@@ -24,7 +24,7 @@
        [:div.flex.gap-2.items-center
         title
         (when-let [shortcuts (comp/shortcuts action)]
-          [:div.p-1.text-xs.level-1.rounded
+          [:div.p-1.text-xs.bg-primary.rounded
            shortcuts])]
        [:> Tooltip/Arrow
         {:class "tooltip-arrow"}]]]]))
diff --git a/src/renderer/tools/custom/blob.cljs b/src/renderer/tools/custom/blob.cljs
index 6baae3bb..b40c22af 100644
--- a/src/renderer/tools/custom/blob.cljs
+++ b/src/renderer/tools/custom/blob.cljs
@@ -45,7 +45,7 @@
                          :value v
                          :disabled? disabled?
                          :placeholder 0}]
-     [:button.button.ml-px.inline-block.level-1.text-muted
+     [:button.button.ml-px.inline-block.bg-primary.text-muted
       {:title "Generate random seed"
        :style {:flex "0 0 26px"
                :height "100%"}
diff --git a/src/renderer/tree/styles.css b/src/renderer/tree/styles.css
index 38d598bd..37582d67 100644
--- a/src/renderer/tree/styles.css
+++ b/src/renderer/tree/styles.css
@@ -26,7 +26,7 @@
 }
 
 .tree-sidebar {
-  @apply flex-1 level-1 mr-px h-full overflow-hidden;
+  @apply flex-1 bg-primary mr-px h-full overflow-hidden;
 
   &:hover {
     /* When the mouse is over the tree, ignore the hovered class if the element 
diff --git a/src/renderer/views.cljs b/src/renderer/views.cljs
index c4d87824..cc96279c 100644
--- a/src/renderer/views.cljs
+++ b/src/renderer/views.cljs
@@ -31,7 +31,7 @@
      [:div.mb-px [toolbar.tools/root]
       (when rulers?
         [:div.flex
-         [:div.level-1 {:style {:width "23px" :height "23px"}}
+         [:div.bg-primary {:style {:width "23px" :height "23px"}}
           [comp/toggle-icon-button
            {:active? @(rf/subscribe [:rulers-locked?])
             :active-icon "lock"
@@ -40,12 +40,13 @@
             :inactive-text "lock"
             :class "small"
             :action #(rf/dispatch [:toggle-rulers-locked])}]]
-         [:div.w-full.ml-px.level-1
+         [:div.w-full.ml-px.bg-primary
           [rulers/ruler {:orientation :horizontal :size 23}]]])]
      [:div.flex.flex-1.relative
-      [:<> (when rulers?
-             [:div.level-1.mr-px
-              [rulers/ruler {:orientation :vertical :size 23}]])]
+      [:<>
+       (when rulers?
+         [:div.bg-primary.mr-px
+          [rulers/ruler {:orientation :vertical :size 22}]])]
       [:div.relative.grow.flex
        [frame/main]
        (if read-only?
@@ -83,7 +84,7 @@
                    :defaultSize 30
                    :minSize 5
                    :order 2}
-         [:div.v-scroll.p-1.level-1.h-full.ml-px
+         [:div.v-scroll.p-1.bg-primary.h-full.ml-px
           [history/root]]]])
 
      (when @(rf/subscribe [:panel/visible? :xml])
@@ -96,7 +97,7 @@
                      :defaultSize 30
                      :minSize 5
                      :order 3}
-           [:div.v-scroll.p-1.h-full.level-1.ml-px
+           [:div.v-scroll.p-1.h-full.bg-primary.ml-px
             [cm/editor xml
              {:options {:mode "text/xml"
                         :readOnly true}}]]]]))]]
diff --git a/src/renderer/window/views.cljs b/src/renderer/window/views.cljs
index eb79f355..0ca52f97 100644
--- a/src/renderer/window/views.cljs
+++ b/src/renderer/window/views.cljs
@@ -34,11 +34,11 @@
          {:src "img/icon-no-bg.svg"
           :style {:width "14px"
                   :height "14px"}}]])
-     [:div.flex.relative.level-0
+     [:div.flex.relative.bg-secondary
       [menubar/root]]
      [:div.title-bar @(rf/subscribe [:document/title])]
      [:div.flex.h-full.flex-1.drag]
-     [:div.level-1
+     [:div.bg-primary
       {:class (when-not (or platform/electron? fullscreen?) "mr-1.5")}
       [comp/icon-button
        (name @(rf/subscribe [:theme/mode]))