Design

frontend/src/app/main/ui/components/title_bar.cljs

@@ -10,7 +10,6 @@
    [app.common.data.macros :as dm]
    [app.main.ui.icons :as i]
    [rumext.v2 :as mf]))
-
 (def ^:private chevron-icon
   (i/icon-xref :arrow (stl/css :chevron-icon)))
 

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

@@ -17,6 +17,8 @@
    [app.util.dom :as dom]
    [rumext.v2 :as mf]))
 
+(def ^:private chevron-icon
+  (i/icon-xref :arrow (stl/css :chevron-icon)))
 
 (def ^:private close-icon
   (i/icon-xref :close (stl/css :close-icon)))
@@ -45,12 +47,14 @@
   [{:keys []}]
   (let [active-theme-ids (mf/deref refs/workspace-active-theme-ids)
         themes (mf/deref refs/workspace-ordered-token-themes)]
+    [:div
      [:ul {:class (stl/css :theme-group-wrapper)}
       (for [[group themes] themes]
         [:li {:key (str "token-theme-group" group)}
-        [:span {:class (stl/css :theme-group-label)} group]
+         (when (seq group)
+           [:span {:class (stl/css :theme-group-label)} group])
          [:ul {:class (stl/css :theme-group-rows-wrapper)}
-         (for [{:keys [id name] :as _theme} themes]
+          (for [{:keys [id name] :as theme} themes]
             [:li {:key (str "token-theme-" id)
                   :class (stl/css :theme-row)}
              [:div {:class (stl/css :theme-row-left)}
@@ -61,12 +65,24 @@
                            :on-change (constantly nil)
                            :selected? (get active-theme-ids id)}]]
               [:span {:class (stl/css :theme-row-label)} name]]
+             [:div {:class (stl/css :theme-row-right)}
+              (if-let [sets-count (some-> theme :sets seq count)]
+                [:button {:class (stl/css :sets-count-button)}
+                 (str sets-count " sets")
+                 chevron-icon]
+                [:button {:class (stl/css :sets-count-empty-button)}
+                 "No sets defined"
+                 chevron-icon])
               [:div {:class (stl/css :delete-theme-button)}
                [:button {:on-click (fn [e]
                                      (dom/prevent-default e)
                                      (dom/stop-propagation e)
                                      (st/emit! (wdt/delete-token-theme id)))}
-              i/delete]]])]])]))
+                i/delete]]]])]])]
+     [:div {:class (stl/css :button-footer)}
+      [:button {:class (stl/css :create-theme-button)}
+       i/add
+       "Create theme"]]]))
 
 (mf/defc edit-theme
   [{:keys []}]

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

@@ -10,6 +10,10 @@
   @extend .modal-overlay-base;
 }
 
+hr {
+  border-color: var(--color-background-tertiary);
+}
+
 .modal-dialog {
   @extend .modal-container-base;
   display: grid;
@@ -30,6 +34,22 @@
   flex-direction: column;
 }
 
+.button-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.create-theme-button {
+  @extend .button-secondary;
+  padding: $s-6;
+  padding-right: $s-8;
+  svg {
+    margin-right: $s-6;
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+  }
+}
+
 .close-btn {
   @extend .modal-close-btn-base;
 }
@@ -63,11 +83,41 @@
 .theme-row-left {
   display: flex;
   align-items: center;
-  gap: $s-12;
+  gap: $s-16;
+}
+
+.theme-row-right {
+  display: flex;
+  align-items: center;
+  gap: $s-6;
+}
+
+.sets-count-button {
+  @extend .button-secondary;
+  padding: $s-6;
+  padding-left: $s-12;
+  svg {
+    margin-left: $s-6;
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+  }
+}
+
+.sets-count-empty-button {
+  @extend .button-secondary;
+  padding: $s-6;
+  padding-left: $s-12;
+  svg {
+    margin-left: $s-6;
+    @extend .button-icon;
+    stroke: var(--icon-foreground);
+  }
 }
 
 .theme-row-label {
   @include bodyMediumTypography;
+  font-weight: 500;
+  color: var(--color-foreground-primary);
 }
 
 .delete-theme-button {