♻️ Create themes folder and themes root file

frontend/scripts/_worker.js

@@ -35,7 +35,7 @@ async function compileFile(path) {
         css: result.css,
       });
     } catch (cause) {
-      // console.error(cause);
+      console.error(cause);
       reject(cause);
     }
   });

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

@@ -30,7 +30,7 @@
    [app.main.ui.workspace.tokens.context-menu :refer [token-context-menu]]
    [app.main.ui.workspace.tokens.sets :as tsets]
    [app.main.ui.workspace.tokens.sets-context-menu :refer [token-set-context-menu*]]
-   [app.main.ui.workspace.tokens.theme-select :refer [theme-select]]
+   [app.main.ui.workspace.tokens.themes :refer [themes-header*]]
    [app.main.ui.workspace.tokens.token-pill :refer [token-pill*]]
    [app.util.array :as array]
    [app.util.dom :as dom]
@@ -164,42 +164,6 @@
         [(seq (array/sort! empty))
          (seq (array/sort! filled))]))))
 
-(mf/defc themes-header*
-  {::mf/private true}
-  []
-  (let [ordered-themes
-        (mf/deref refs/workspace-token-themes-no-hidden)
-
-        can-edit?
-        (mf/use-ctx ctx/can-edit?)
-
-        open-modal
-        (mf/use-fn
-         (fn [e]
-           (dom/stop-propagation e)
-           (modal/show! :tokens/themes {})))]
-
-    [:div {:class (stl/css :themes-wrapper)}
-     [:> text* {:as "div" :typography "headline-small" :class (stl/css :themes-header)} (tr "labels.themes")]
-     (if (empty? ordered-themes)
-       [:div {:class (stl/css :empty-theme-wrapper)}
-        [:> text* {:as "span" :typography "body-small" :class (stl/css :empty-state-message)}
-         (tr "workspace.tokens.no-themes")]
-        (when can-edit?
-          [:button {:on-click open-modal
-                    :class (stl/css :create-theme-button)}
-           (tr "workspace.tokens.create-one")])]
-       (if can-edit?
-         [:div {:class (stl/css :theme-select-wrapper)}
-          [:& theme-select]
-          [:> button* {:variant "secondary"
-                       :class (stl/css :edit-theme-button)
-                       :on-click open-modal}
-           (tr "labels.edit")]]
-         [:div {:title (when-not can-edit?
-                         (tr "workspace.tokens.no-permission-themes"))}
-          [:& theme-select]]))]))
-
 (mf/defc token-sets-list*
   {::mf/private true}
   [{:keys [tokens-lib]}]

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

@@ -39,7 +39,6 @@
   padding-block-end: var(--sp-l);
 }
 
-.themes-header,
 .sets-header-container {
   @include use-typography("headline-small");
   padding: var(--sp-s);
@@ -72,15 +71,6 @@
   font-style: italic;
 }
 
-.themes-wrapper {
-  padding: var(--sp-m) 0 0 var(--sp-m);
-}
-
-.empty-theme-wrapper {
-  padding: var(--sp-m);
-  color: var(--color-foreground-secondary);
-}
-
 .sidebar-header {
   display: flex;
   align-items: center;
@@ -90,10 +80,6 @@
   color: var(--layer-row-foreground-color);
 }
 
-.empty-state-message {
-  color: var(--color-foreground-secondary);
-}
-
 .token-pills-wrapper {
   display: flex;
   gap: var(--sp-xs);
@@ -169,30 +155,6 @@
   flex: 1;
 }
 
-.theme-select-wrapper {
-  display: grid;
-  grid-template-columns: 1fr 0.28fr;
-  gap: $s-6;
-}
-
-.themes-button {
-  @extend .button-secondary;
-  width: auto;
-}
-
-.create-theme-button {
-  @include use-typography("body-small");
-  background-color: transparent;
-  border: none;
-  appearance: none;
-  color: var(--color-accent-primary);
-  cursor: pointer;
-}
-
-.edit-theme-button {
-  justify-content: center;
-}
-
 .resize-area-horiz {
   background-color: var(--panel-background-color);
   position: absolute;

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

@@ -0,0 +1,54 @@
+;; 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
+
+(ns app.main.ui.workspace.tokens.themes
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.main.data.modal :as modal]
+   [app.main.refs :as refs]
+   [app.main.ui.context :as ctx]
+   [app.main.ui.ds.buttons.button :refer [button*]]
+   [app.main.ui.ds.foundations.typography.text :refer [text*]]
+   [app.main.ui.workspace.tokens.themes.theme-selector :refer [theme-selector]]
+   [app.util.dom :as dom]
+   [app.util.i18n :refer [tr]]
+   [rumext.v2 :as mf]))
+
+(mf/defc themes-header*
+  {::mf/private true}
+  []
+  (let [ordered-themes
+        (mf/deref refs/workspace-token-themes-no-hidden)
+
+        can-edit?
+        (mf/use-ctx ctx/can-edit?)
+
+        open-modal
+        (mf/use-fn
+         (fn [e]
+           (dom/stop-propagation e)
+           (modal/show! :tokens/themes {})))]
+
+    [:div {:class (stl/css :themes-wrapper)}
+     [:> text* {:as "div" :typography "headline-small" :class (stl/css :themes-header)} (tr "labels.themes")]
+     (if (empty? ordered-themes)
+       [:div {:class (stl/css :empty-theme-wrapper)}
+        [:> text* {:as "span" :typography "body-small" :class (stl/css :empty-state-message)}
+         (tr "workspace.tokens.no-themes")]
+        (when can-edit?
+          [:button {:on-click open-modal
+                    :class (stl/css :create-theme-button)}
+           (tr "workspace.tokens.create-one")])]
+       (if can-edit?
+         [:div {:class (stl/css :theme-selector-wrapper)}
+          [:& theme-selector]
+          [:> button* {:variant "secondary"
+                       :class (stl/css :edit-theme-button)
+                       :on-click open-modal}
+           (tr "labels.edit")]]
+         [:div {:title (when-not can-edit?
+                         (tr "workspace.tokens.no-permission-themes"))}
+          [:& theme-selector]]))]))

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

@@ -0,0 +1,47 @@
+// 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 "../../ds/typography.scss" as *;
+@use "../../ds/_sizes" as *;
+@use "../../ds/spacing.scss" as *;
+
+.themes-wrapper {
+  padding: var(--sp-m) 0 0 var(--sp-m);
+}
+
+.themes-header {
+  padding: var(--sp-s);
+  color: var(--title-foreground-color);
+  word-break: break-word;
+}
+
+.empty-theme-wrapper {
+  padding: var(--sp-m);
+  color: var(--color-foreground-secondary);
+}
+
+.empty-state-message {
+  color: var(--color-foreground-secondary);
+}
+
+.create-theme-button {
+  @include use-typography("body-small");
+  background-color: transparent;
+  border: none;
+  appearance: none;
+  color: var(--color-accent-primary);
+  cursor: pointer;
+}
+
+.theme-selector-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 0.28fr;
+  gap: var(--sp-xs);
+}
+
+.edit-theme-button {
+  justify-content: center;
+}

frontend/src/app/main/ui/workspace/tokens/themes/theme_selector.cljs

@@ -4,7 +4,7 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.workspace.tokens.theme-select
+(ns app.main.ui.workspace.tokens.themes.theme-selector
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data.macros :as dm]
@@ -74,7 +74,7 @@
     [:> text* {:as "span" :typography "body-small"} (tr "workspace.tokens.edit-themes")]
     [:> icon* {:icon-id i/arrow-right :aria-hidden true}]]])
 
-(mf/defc theme-select
+(mf/defc theme-selector
   [{:keys []}]
   (let [;; Store
         active-theme-paths (mf/deref refs/workspace-active-theme-paths-no-hidden)