💄 Differentiate empty and not empty token types

frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs

@@ -133,6 +133,10 @@
     :typographies "text-palette"
     "add"))
 
+(defn should-display-asset-count?
+  [section assets-count]
+  (or (not (= section :tokens)) (and (< 0 assets-count) (= section :tokens))))
+
 (mf/defc asset-section
   {::mf/wrap-props false}
   [{:keys [children file-id title section assets-count icon open? on-click]}]
@@ -154,14 +158,17 @@
 
         title
         (mf/html
-         [:span {:class (stl/css :title-name)}
+         [:span {:class (stl/css-case :title-name true
+                                      :title-tokens (= section :tokens)
+                                      :title-tokens-active (and (= section :tokens) (< 0 assets-count)))}
           [:span {:class (stl/css :section-icon)}
            [:> icon* {:icon-id (or icon (section-icon section)) :size "s"}]]
           [:span {:class (stl/css :section-name)}
            title]
 
-          [:span {:class (stl/css :num-assets)}
-           assets-count]])]
+          (when (should-display-asset-count? section assets-count)
+            [:span {:class (stl/css :num-assets)}
+             assets-count])])]
 
     [:div {:class (stl/css-case :asset-section true
                                 :opened (and (< 0 assets-count)

frontend/src/app/main/ui/workspace/sidebar/assets/common.scss

@@ -14,6 +14,15 @@
   width: 100%;
 }
 
+.title-tokens {
+  @include bodySmallTypography;
+  text-transform: capitalize;
+}
+
+.title-tokens-active {
+  color: var(--assets-item-name-foreground-color, --color-foreground-primary);
+}
+
 .section-icon {
   @include flexCenter;
   padding-right: $s-2;

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

@@ -118,9 +118,10 @@
              (st/emit! (wtch/toggle-token {:token token
                                            :shapes selected-shapes})))))]
 
-    [:div {:on-click on-toggle-open-click}
+    [:div {:on-click on-toggle-open-click :class (stl/css :token-section-wrapper)}
      [:& cmm/asset-section {:icon (token-section-icon type)
                             :title title
+                            :section :tokens
                             :assets-count (count tokens)
                             :open? is-open}
       [:& cmm/asset-section-block {:role :title-button}