✨ Remove workspace partial scss stylesheet

frontend/src/app/main/ui/workspace.cljs

@@ -86,8 +86,9 @@
        [:& palette {:layout layout
                     :on-change-palette-size on-resize-palette}])
 
-     [:section.workspace-content
+     [:section
       {:key (dm/str "workspace-" page-id)
+       :class (stl/css :workspace-content)
        :ref node-ref}
 
       [:section {:class (stl/css :workspace-viewport)}
@@ -203,9 +204,9 @@
        [:& (mf/provider ctx/current-page-id) {:value page-id}
         [:& (mf/provider ctx/components-v2) {:value components-v2?}
          [:& (mf/provider ctx/workspace-read-only?) {:value read-only?}
-          [:section#workspace-refactor {:class (stl/css :workspace)
-                                        :style {:background-color background-color
-                                                :touch-action "none"}}
+          [:section {:class (stl/css :workspace)
+                     :style {:background-color background-color
+                             :touch-action "none"}}
            [:& context-menu]
 
            (if ^boolean file-ready?

frontend/src/app/main/ui/workspace.scss

@@ -6,13 +6,9 @@
 
 @import "refactor/common-refactor.scss";
 
-:global(:root) {
-  --s-4: 0.25rem;
-  --layer-indentation-size: calc(var(--s-4) * 6);
-}
-
 .workspace {
   @extend .new-scrollbar;
+  --layer-indentation-size: calc($s-4 * 6);
   width: 100vw;
   height: 100vh;
   max-height: 100vh;
@@ -34,6 +30,10 @@
 }
 
 .workspace-content {
+  background-color: var(--color-canvas);
+  display: flex;
+  padding: 0;
+  margin: 0;
   grid-area: viewport;
 }
 

frontend/src/app/main/ui/workspace/coordinates.cljs

@@ -5,6 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.coordinates
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.main.streams :as ms]
    [app.main.ui.hooks :as hooks]
@@ -13,8 +14,9 @@
 (mf/defc coordinates
   [{:keys [colorpalette?]}]
   (let [coords (hooks/use-rxsub ms/mouse-position)]
-    [:ul.coordinates {:class (when colorpalette? "color-palette-open")}
-     [:span {:alt "x"}
+    [:div {:class (stl/css-case :container-color-palette-open colorpalette?
+                                :container true)}
+     [:span {:alt "x" :class (stl/css :coordinate)}
       (str "X: " (:x coords "-"))]
-     [:span {:alt "y"}
+     [:span {:alt "y" :class (stl/css :coordinate)}
       (str "Y: " (:y coords "-"))]]))

frontend/src/app/main/ui/workspace/coordinates.scss

@@ -0,0 +1,33 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "common/refactor/common-refactor.scss" as *;
+
+$width-settings-bar: 256px;
+
+.container {
+  background-color: var(--db-primary);
+  border-radius: $br-4;
+  bottom: 0px;
+  padding: $s-2 $s-8;
+  position: fixed;
+  right: calc(#{$width-settings-bar} + #{$s-24});
+  text-align: center;
+  white-space: nowrap;
+  transition: bottom 0.5s;
+  z-index: 2;
+  display: flex;
+  column-gap: 0.5rem;
+}
+
+.container-color-palette-open {
+  bottom: $s-64;
+}
+
+.coordinate {
+  color: var(--df-primary);
+  font-size: $fs-12;
+}

frontend/src/app/main/ui/workspace/palette.cljs

@@ -44,7 +44,7 @@
         calculate-padding-left (+ rulers-width (or left-sidebar-size min-left-sidebar-width) left-padding 1)]
 
     #js {"paddingLeft" (dm/str calculate-padding-left "px")
-         "paddingRight" "calc(var(--s-4) * 70)"}))
+         "paddingRight" "280px"}))
 
 (mf/defc palette
   [{:keys [layout on-change-palette-size]}]

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -5,6 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.viewport
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.common.colors :as clr]
    [app.common.data :as d]
@@ -276,9 +277,9 @@
     (hooks/setup-shortcuts node-editing? drawing-path? text-editing? grid-editing?)
     (hooks/setup-active-frames base-objects hover-ids selected active-frames zoom transform vbox)
 
-    [:div.viewport {:style #js {"--zoom" zoom} :data-testid "viewport"}
+    [:div {:class (stl/css :viewport) :style #js {"--zoom" zoom} :data-testid "viewport"}
      [:& top-bar/top-bar {:layout layout}]
-     [:div.viewport-overlays
+     [:div {:class (stl/css :viewport-overlays)}
       ;; The behaviour inside a foreign object is a bit different that in plain HTML so we wrap
       ;; inside a foreign object "dummy" so this awkward behaviour is take into account
       [:svg {:style {:top 0 :left 0 :position "fixed" :width "100%" :height "100%" :opacity (when-not (dbg/enabled? :html-text) 0)}}
@@ -308,8 +309,9 @@
                                          :layout layout
                                          :viewport-ref viewport-ref}])]
 
-     [:svg.render-shapes
+     [:svg
       {:id "render"
+       :class (stl/css :render-shapes)
        :xmlns "http://www.w3.org/2000/svg"
        :xmlnsXlink "http://www.w3.org/1999/xlink"
        :xmlns:penpot "https://penpot.app/xmlns"
@@ -359,7 +361,7 @@
        :key (str "viewport" page-id)
        :view-box (utils/format-viewbox vbox)
        :ref on-viewport-ref
-       :class (dm/str @cursor (when drawing-tool " drawing"))
+       :class (dm/str @cursor (when drawing-tool " drawing") " " (stl/css :viewport-controls))
        :style {:touch-action "none"}
        :fill "none"
 

frontend/src/app/main/ui/workspace/viewport.scss

@@ -0,0 +1,49 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@use "common/refactor/common-refactor.scss" as *;
+
+.viewport {
+  cursor: none;
+  grid-column: 1 / span 2;
+  grid-row: 1 / span 2;
+  overflow: hidden;
+  position: relative;
+}
+
+.viewport-controls {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.render-shapes {
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+.viewport-overlays {
+  cursor: initial;
+  overflow: hidden;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 10;
+
+  .pixel-overlay {
+    left: 0;
+    pointer-events: initial;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+  }
+}

frontend/src/app/main/ui/workspace/viewport/presence.cljs

@@ -5,6 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.workspace.viewport.presence
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
    [app.main.refs :as refs]
@@ -40,15 +41,15 @@
                     (dm/str (str/slice fullname 0 12) "...")
                     fullname)]
 
-    [:g.multiuser-cursor {:transform transform}
+    [:g {:class (stl/css :multiuser-cursor) :transform transform}
      [:path {:fill bg-color :d pointer-path}]
      [:g {:transform "translate(17 -10)"}
       [:foreignObject {:x -0.3
                        :y -12.5
                        :width 300
                        :height 120}
-       [:div.profile-name {:style {:background-color bg-color
-                                   :color fg-color}}
+       [:div {:class (stl/css :profile-name)
+              :style {:background-color bg-color :color fg-color}}
         fullname]]]]))
 
 (mf/defc active-cursors
@@ -74,8 +75,3 @@
         :zoom zoom
         :profile (get users (:profile-id session))
         :key (dm/str (:id session))}])))
-
-
-
-
-

frontend/src/app/main/ui/workspace/viewport/presence.scss

@@ -0,0 +1,18 @@
+@use "refactor/common-refactor.scss" as *;
+
+.profile-name {
+  width: fit-content;
+  font-family: worksans;
+  padding: 2px 12px;
+  border-radius: $br-4;
+  display: flex;
+  align-items: center;
+  height: 20px;
+  font-size: $fs-12;
+  line-height: $lh-150;
+}
+
+.multiuser-cursor {
+  z-index: 10000;
+  pointer-events: none;
+}