🎉 Inspect styles tab tokens panel

frontend/src/app/main/ui/inspect/styles.cljs

@@ -5,6 +5,9 @@
    [app.common.data.macros :as dm]
    [app.common.types.component :as ctc]
    [app.common.types.components-list :as ctkl]
+   [app.common.types.tokens-lib :as ctob]
+   [app.main.refs :as refs]
+   [app.main.ui.inspect.styles.panels.tokens-panel :refer [tokens-panel*]]
    [app.main.ui.inspect.styles.style-box :refer [style-box*]]
    [app.util.i18n :refer [tr]]
    [rumext.v2 :as mf]))
@@ -36,13 +39,19 @@
         first-shape        (first shapes)
         first-component    (mf/with-memo (ctkl/get-component data (:component-id first-shape)))
         type               (mf/with-memo (get-shape-type shapes first-shape first-component))
-        has-tokens?        (:applied-tokens first-shape)
+
+        ;; Must be reviewed for performance and code clarity
+        tokens-lib         (mf/deref refs/tokens-lib)
+        active-themes      (mf/deref refs/workspace-active-theme-paths-no-hidden)
+        active-sets
+        (mf/with-memo [tokens-lib]
+          (some-> tokens-lib (ctob/get-active-themes-set-names)))
         options            (type->options type)]
-    [:ol {:class (stl/css :styles-tab) :aria-label (tr "inspect.tabs.styles")}
+    [:ol {:class (stl/css :styles-tab) :aria-label (tr "labels.styles")}
-     (when has-tokens?
+     (when (or active-themes active-sets)
-       [:li {:key "token"}
+       [:li
         [:> style-box* {:attribute :token}
-         [:p "Tokens Panel (WIP)"]]])
+         [:> tokens-panel* {:themes active-themes :sets active-sets}]]])
      (for [option options]
        [:li {:key (d/name option)}
         [:> style-box* {:attribute option} color-space]])]))

frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.cljs

@@ -0,0 +1,39 @@
+(ns app.main.ui.inspect.styles.panels.tokens-panel
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.util.i18n :refer [tr]]
+   [app.util.webapi :as wapi]
+   [cuerdas.core :as str]
+   [rumext.v2 :as mf]))
+
+(mf/defc tokens-row*
+  [{:keys [term detail copiable]}]
+  (let [copiable? (or copiable false)
+        detail? (not (or (nil? detail) (str/blank? detail)))
+        detail (if detail? detail "-")
+        copy-attr
+        (mf/use-fn
+         (fn []
+           (wapi/write-to-clipboard (str term ": " detail))))]
+    [:dl {:class (stl/css :attribute-row)}
+     [:dt {:class (stl/css :attribute-term)} term]
+     [:dd {:class (stl/css :attribute-detail)}
+      (if (and copiable? detail?)
+        [:button {:class (stl/css :attribute-detail-copiable)
+                  :on-click copy-attr} detail]
+        detail)]]))
+
+(mf/defc tokens-panel*
+  [{:keys [theme-paths set-names]}]
+  [:div {:class (stl/css :tokens-panel)}
+   (when (seq theme-paths)
+     (for [theme theme-paths]
+       [:> tokens-row* {:key theme
+                        :class (stl/css :token-theme)
+                        :term (tr "inspect.tabs.styles.panel.tokens.active-themes")
+                        :detail theme}]))
+   (when (seq set-names)
+     (let [sets-list (str/join ", " set-names)]
+       [:> tokens-row* {:class (stl/css :token-theme)
+                        :term (tr "inspect.tabs.styles.panel.tokens.active-sets")
+                        :detail sets-list}]))])

frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.scss

@@ -0,0 +1,32 @@
+// 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 *;
+
+// TOKENS ROW
+
+.attribute-row {
+  --term-color: var(--color-foreground-secondary);
+  --detail-color: var(--color-foreground-primary);
+
+  display: flex;
+  padding-block: var(--sp-s);
+}
+
+.attribute-term,
+.attribute-detail {
+  @include use-typography("body-small");
+}
+
+.attribute-term {
+  color: var(--term-color);
+  flex: 1;
+}
+
+.attribute-detail {
+  flex: 2;
+  color: var(--detail-color);
+}

frontend/src/app/main/ui/inspect/styles/style_box.cljs

@@ -1,6 +1,7 @@
 (ns app.main.ui.inspect.styles.style-box
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.data :as d]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
    [app.util.i18n :refer [tr]]
@@ -12,15 +13,15 @@
     :variant    (tr "inspect.tabs.styles.panel.variant")
     :token      (tr "inspect.tabs.styles.panel.token")
     :geometry   (tr "inspect.tabs.styles.panel.geometry")
-    :fill       (tr "inspect.tabs.styles.panel.fill")
+    :fill       (tr "labels.fill")
-    :stroke     (tr "inspect.tabs.styles.panel.stroke")
+    :stroke     (tr "labels.stroke")
-    :text       (tr "inspect.tabs.styles.panel.text")
+    :text       (tr "labels.text")
-    :blur       (tr "inspect.tabs.styles.panel.blur")
+    :blur       (tr "labels.blur")
-    :shadow     (tr "inspect.tabs.styles.panel.shadow")
+    :shadow     (tr "labels.shadow")
-    :layout     (tr "inspect.tabs.styles.panel.layout")
+    :layout     (tr "labels.layout")
     :layout-element (tr "inspect.tabs.styles.panel.layout-element")
-    :visibility (tr "inspect.tabs.styles.panel.visibility")
+    :visibility (tr "labels.visibility")
-    :svg        (tr "inspect.tabs.styles.panel.svg")
+    :svg        (tr "labels.svg")
     nil))
 
 (mf/defc style-box*
@@ -43,8 +44,9 @@
     [:article {:class (stl/css :style-box)}
      [:header {:class (stl/css :disclosure-header)}
       [:button {:class (stl/css :disclosure-button)
+                :aria-expanded expanded
+                :aria-controls (str "style-box-" (d/name attribute))
                 :on-click toggle-panel
-                :title (tr "inspect.tabs.styles.panel.toggle-style" title)
                 :aria-label (tr "inspect.tabs.styles.panel.toggle-style" title)}
        [:> icon* {:icon-id (if expanded "arrow-down" "arrow")
                   :class (stl/css :disclosure-icon)
@@ -56,5 +58,5 @@
                           :on-click copy-shorthand
                           :icon "clipboard"}])]
      (when expanded
-       [:div {:class (stl/css :style-box-content) :inert true}
+       [:div {:class (stl/css :style-box-content) :id (str "style-box-" (d/name attribute))}
-        [:div {:class (stl/css :style-box-description)} children]])]))
+        [:div {:class (stl/css :style-box-panel-wrapper)} children]])]))

frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs

@@ -41,7 +41,7 @@
   (let [label (case type
                 :multiple (tr "workspace.options.selection-stroke")
                 :group (tr "workspace.options.group-stroke")
-                (tr "workspace.options.stroke"))
+                (tr "labels.stroke"))
 
         state*          (mf/use-state true)
         open?           (deref state*)

frontend/translations/en.po

@@ -1850,13 +1850,9 @@ msgid "inspect.tabs.info"
 msgstr "Info"
 
 #: src/app/main/ui/inspect/right_sidebar.cljs:107
-msgid "inspect.tabs.styles"
+msgid "labels.styles"
 msgstr "Styles"
 
-#: src/app/main/ui/inspect/right_sidebar.cljs:165
-msgid "inspect.tabs.switcher.label"
-msgstr "Layer info"
-
 #: src/app/main/ui/inspect/styles/style_box.cljs:10
 msgid "inspect.tabs.styles.panel.variant"
 msgstr "Variant properties"
@@ -1865,46 +1861,22 @@ msgstr "Variant properties"
 msgid "inspect.tabs.styles.panel.token"
 msgstr "Token Sets & Themes"
 
+#: src/app/main/ui/inspect/styles/tokens_panel.cljs:26
+msgid "inspect.tabs.styles.panel.tokens.active-themes"
+msgstr "Active themes"
+
+#: src/app/main/ui/inspect/styles/tokens_panel.cljs:30
+msgid "inspect.tabs.styles.panel.tokens.active-sets"
+msgstr "Active sets"
+
 #: src/app/main/ui/inspect/styles/style_box.cljs:12
 msgid "inspect.tabs.styles.panel.geometry"
 msgstr "Size & Position"
 
-#: src/app/main/ui/inspect/styles/style_box.cljs:12
-msgid "inspect.tabs.styles.panel.fill"
-msgstr "Fill"
-
-#: src/app/main/ui/inspect/styles/style_box.cljs:12
-msgid "inspect.tabs.styles.panel.stroke"
-msgstr "Stroke"
-
-#: src/app/main/ui/inspect/styles/style_box.cljs:12
-msgid "inspect.tabs.styles.panel.text"
-msgstr "Text"
-
-#: src/app/main/ui/inspect/styles/style_box.cljs:12
-msgid "inspect.tabs.styles.panel.shadow"
-msgstr "Shadow"
-
-#: src/app/main/ui/inspect/styles/style_box.cljs:12
-msgid "inspect.tabs.styles.panel.layout"
-msgstr "Layout"
-
 #: src/app/main/ui/inspect/styles/style_box.cljs:12
 msgid "inspect.tabs.styles.panel.layout-element"
 msgstr "Layout Element"
 
-#: src/app/main/ui/inspect/styles/style_box.cljs:12
-msgid "inspect.tabs.styles.panel.visibility"
-msgstr "Visibility"
-
-#: src/app/main/ui/inspect/styles/style_box.cljs:12
-msgid "inspect.tabs.styles.panel.blur"
-msgstr "Blur"
-
-#: src/app/main/ui/inspect/styles/style_box.cljs:12
-msgid "inspect.tabs.styles.panel.svg"
-msgstr "SVG"
-
 #: src/app/main/ui/inspect/styles/style_box.cljs:12
 msgid "inspect.tabs.styles.panel.toggle-style"
 msgstr "Toggle panel %s"
@@ -2635,6 +2607,38 @@ msgstr "YouTube"
 msgid "labels.variant"
 msgstr "Variant"
 
+#: src/app/main/ui/inspect/styles/style_box.cljs:12
+msgid "labels.fill"
+msgstr "Fill"
+
+#: src/app/main/ui/inspect/styles/style_box.cljs:12
+msgid "labels.stroke"
+msgstr "Stroke"
+
+#: src/app/main/ui/inspect/styles/style_box.cljs:12
+msgid "labels.text"
+msgstr "Text"
+
+#: src/app/main/ui/inspect/styles/style_box.cljs:12
+msgid "labels.blur"
+msgstr "Blur"
+
+#: src/app/main/ui/inspect/styles/style_box.cljs:12
+msgid "labels.shadow"
+msgstr "Shadow"
+
+#: src/app/main/ui/inspect/styles/style_box.cljs:12
+msgid "labels.layout"
+msgstr "Layout"
+
+#: src/app/main/ui/inspect/styles/style_box.cljs:12
+msgid "labels.visibility"
+msgstr "Visibility"
+
+#: src/app/main/ui/inspect/styles/style_box.cljs:12
+msgid "labels.svg"
+msgstr "SVG"
+
 #: src/app/main/ui/ds/product/loader.cljs:21
 msgid "loader.tips.01.message"
 msgstr "Keep your designs consistent and easy to update across projects."

frontend/translations/es.po

@@ -1860,7 +1860,7 @@ msgid "inspect.tabs.info"
 msgstr "Información"
 
 #: src/app/main/ui/inspect/right_sidebar.cljs:107
-msgid "inspect.tabs.styles"
+msgid "labels.styles"
 msgstr "Estilos"
 
 #: src/app/main/ui/inspect/styles/style_box.cljs:10
@@ -1871,46 +1871,22 @@ msgstr "Propiedades de las variantes"
 msgid "inspect.tabs.styles.panel.token"
 msgstr "Sets y temas de tokens"
 
+#: src/app/main/ui/inspect/styles/tokens_panel.cljs:26
+msgid "inspect.tabs.styles.panel.token.active-themes"
+msgstr "Temas activos"
+
+#: src/app/main/ui/inspect/styles/tokens_panel.cljs:30
+msgid "inspect.tabs.styles.panel.token.active-sets"
+msgstr "Sets activos"
+
 #: src/app/main/ui/inspect/styles/style_box.cljs:12
 msgid "inspect.tabs.styles.panel.geometry"
 msgstr "Tamaño y posición"
 
-#: src/app/main/ui/inspect/styles/style_box.cljs:12
-msgid "inspect.tabs.styles.panel.fill"
-msgstr "Relleno"
-
-#: src/app/main/ui/inspect/styles/style_box.cljs:12
-msgid "inspect.tabs.styles.panel.stroke"
-msgstr "Borde"
-
-#: src/app/main/ui/inspect/styles/style_box.cljs:12
-msgid "inspect.tabs.styles.panel.text"
-msgstr "Texto"
-
-#: src/app/main/ui/inspect/styles/style_box.cljs:12
-msgid "inspect.tabs.styles.panel.shadow"
-msgstr "Sombra"
-
-#: src/app/main/ui/inspect/styles/style_box.cljs:12
-msgid "inspect.tabs.styles.panel.layout"
-msgstr "Layout"
-
 #: src/app/main/ui/inspect/styles/style_box.cljs:12
 msgid "inspect.tabs.styles.panel.layout-element"
 msgstr "Layout de elemento"
 
-#: src/app/main/ui/inspect/styles/style_box.cljs:12
-msgid "inspect.tabs.styles.panel.visibility"
-msgstr "Visibilidad"
-
-#: src/app/main/ui/inspect/styles/style_box.cljs:12
-msgid "inspect.tabs.styles.panel.blur"
-msgstr "Desenfoque"
-
-#: src/app/main/ui/inspect/styles/style_box.cljs:12
-msgid "inspect.tabs.styles.panel.svg"
-msgstr "SVG"
-
 #: src/app/main/ui/inspect/styles/style_box.cljs:12
 msgid "inspect.tabs.styles.panel.toggle-style"
 msgstr "Alternar panel %s"
@@ -2625,6 +2601,38 @@ msgstr "Tu cuenta"
 msgid "labels.youtube"
 msgstr "YouTube"
 
+#: src/app/main/ui/inspect/styles/style_box.cljs:12
+msgid "labels.fill"
+msgstr "Relleno"
+
+#: src/app/main/ui/inspect/styles/style_box.cljs:12
+msgid "labels.stroke"
+msgstr "Borde"
+
+#: src/app/main/ui/inspect/styles/style_box.cljs:12
+msgid "labels.text"
+msgstr "Texto"
+
+#: src/app/main/ui/inspect/styles/style_box.cljs:12
+msgid "labels.blur"
+msgstr "Desenfoque"
+
+#: src/app/main/ui/inspect/styles/style_box.cljs:12
+msgid "labels.shadow"
+msgstr "Sombra"
+
+#: src/app/main/ui/inspect/styles/style_box.cljs:12
+msgid "labels.layout"
+msgstr "Layout"
+
+#: src/app/main/ui/inspect/styles/style_box.cljs:12
+msgid "labels.visibility"
+msgstr "Visibilidad"
+
+#: src/app/main/ui/inspect/styles/style_box.cljs:12
+msgid "labels.svg"
+msgstr "SVG"
+
 #: src/app/main/ui/ds/product/loader.cljs:21
 msgid "loader.tips.01.message"
 msgstr ""