🎉 Inspect styles tab attributes container box

frontend/src/app/main/ui/inspect/right_sidebar.scss

@@ -51,6 +51,7 @@
 .shape-icon {
   @include flexCenter;
   height: $s-32;
+  --icon-stroke-color: var(--color-foreground-primary);
 }
 
 .layer-title {
@@ -117,6 +118,7 @@
 
 .inspect-tab-switcher-label {
   @include use-typography("body-medium");
+  color: var(--color-foreground-primary);
   flex: 1;
 }
 

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

@@ -1,10 +1,12 @@
 (ns app.main.ui.inspect.styles
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.types.component :as ctc]
    [app.common.types.components-list :as ctkl]
    [app.main.ui.inspect.styles.style-box :refer [style-box*]]
+   [app.util.i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
 
@@ -20,29 +22,30 @@
 
 (defn- get-shape-type
   [shapes first-shape first-component]
-  (cond
-    (and (= (count shapes) 1)
-         (or (ctc/is-variant-container? first-shape)
-             (ctc/is-variant? first-component)))
-    :variant
+  (if (= (count shapes) 1)
+    (if (or (ctc/is-variant-container? first-shape)
+            (ctc/is-variant? first-component))
+      :variant
 
-    (= (count shapes) 1)
-    (:type first-shape)
-
-    :else
+      (:type first-shape))
     :multiple))
 
 (mf/defc styles-tab*
   [{:keys [color-space shapes libraries file-id]}]
   (let [data               (dm/get-in libraries [file-id :data])
         first-shape        (first shapes)
-        first-component    (ctkl/get-component data (:component-id first-shape))
-        type               (get-shape-type shapes first-shape first-component)
+        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)
         options            (type->options type)]
-
-    [:div {:class (stl/css :element-options)}
-     (for [[idx option] (map-indexed vector options)]
-       [:> style-box* {:key idx :attribute option} color-space])]))
+    [:ol {:class (stl/css :styles-tab) :aria-label (tr "inspect.tabs.styles")}
+     (when has-tokens?
+       [:li {:key "token"}
+        [:> style-box* {:attribute :token}
+         [:p "Tokens Panel (WIP)"]]])
+     (for [option options]
+       [:li {:key (d/name option)}
+        [:> style-box* {:attribute option} color-space]])]))
 
 
 ;; WIP

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

@@ -1,26 +1,60 @@
 (ns app.main.ui.inspect.styles.style-box
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
+   [app.util.i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
 (defn- attribute->title
   [type]
   (case type
-    :variant    "Variant properties"
-    :token      "Token Sets & Themes"
-    :geometry   "Size & Position"
-    :fill       "Fill"
-    :stroke     "Stroke"
-    :text       "Text"
-    :shadow     "Shadow"
-    :layout     "Layout"
-    :layout-element "Layout Element"
-    :visibility "Visibility"
-    :svg        "SVG"
+    :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")
+    :stroke     (tr "inspect.tabs.styles.panel.stroke")
+    :text       (tr "inspect.tabs.styles.panel.text")
+    :blur       (tr "inspect.tabs.styles.panel.blur")
+    :shadow     (tr "inspect.tabs.styles.panel.shadow")
+    :layout     (tr "inspect.tabs.styles.panel.layout")
+    :layout-element (tr "inspect.tabs.styles.panel.layout-element")
+    :visibility (tr "inspect.tabs.styles.panel.visibility")
+    :svg        (tr "inspect.tabs.styles.panel.svg")
     nil))
 
 (mf/defc style-box*
-  [{:keys [attribute children]}]
-  [:div {:class (stl/css :style-box)}
-   [:h3 {:class (stl/css :style-box-header)} (attribute->title attribute)]
-   [:div {:class (stl/css :style-box-content)} children]])
+  [{:keys [attribute shorthand children]}]
+  (let [expanded* (mf/use-state true)
+        expanded (deref expanded*)
+
+        title (attribute->title attribute)
+
+        toggle-panel
+        (mf/use-fn
+         (mf/deps expanded)
+         (fn []
+           (reset! expanded* (not expanded))))
+
+        copy-shorthand
+        (mf/use-fn
+         (fn []
+           (js/navigator.clipboard.writeText (str "Style: " title))))]
+    [:article {:class (stl/css :style-box)}
+     [:header {:class (stl/css :disclosure-header)}
+      [:button {:class (stl/css :disclosure-button)
+                :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)
+                  :size "s"}]]
+      [:span {:class (stl/css :panel-title)} title]
+      (when shorthand
+        [:> icon-button* {:variant "ghost"
+                          :aria-label (tr "inspect.tabs.styles.panel.copy-style-shorthand")
+                          :on-click copy-shorthand
+                          :icon "clipboard"}])]
+     (when expanded
+       [:div {:class (stl/css :style-box-content) :inert true}
+        [:div {:class (stl/css :style-box-description)} children]])]))

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

@@ -0,0 +1,41 @@
+// 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 *;
+
+.style-box {
+  --title-gap: var(--sp-xs);
+  --title-padding: var(--sp-s);
+  --title-color: var(--color-foreground-primary);
+  --arrow-color: var(--color-foreground-secondary);
+
+  padding-block: var(--sp-s);
+}
+
+.disclosure-header {
+  display: flex;
+  gap: var(--title-gap);
+  padding-block: var(--title-padding);
+}
+
+.disclosure-button {
+  display: grid;
+  place-items: center;
+  color: var(--arrow-color);
+
+  appearance: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+.panel-title {
+  @include use-typography("headline-small");
+  text-transform: capitalize;
+  flex: 1;
+  color: var(--title-color);
+}

frontend/translations/en.po

@@ -1861,6 +1861,58 @@ msgstr "Styles"
 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"
+
+#: src/app/main/ui/inspect/styles/style_box.cljs:11
+msgid "inspect.tabs.styles.panel.token"
+msgstr "Token Sets & Themes"
+
+#: 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"
+
 #: src/app/main/ui/dashboard/comments.cljs:95
 msgid "label.mark-all-as-read"
 msgstr "Mark all as read"

frontend/translations/es.po

@@ -1791,6 +1791,14 @@ msgstr "Componente principal"
 msgid "inspect.subtitle.variant"
 msgstr "Variante"
 
+#: src/app/main/ui/inspect/right_sidebar.cljs:59
+msgid "inspect.tabs.switcher.label"
+msgstr "Información sobre la capa"
+
+#: src/app/main/ui/inspect/right_sidebar.cljs:101
+msgid "inspect.tabs.computed"
+msgstr "Computado"
+
 #: src/app/main/ui/inspect/right_sidebar.cljs:111, src/app/main/ui/inspect/right_sidebar.cljs:116
 msgid "inspect.tabs.code"
 msgstr "Código"
@@ -1855,9 +1863,57 @@ msgstr "Información"
 msgid "inspect.tabs.styles"
 msgstr "Estilos"
 
-#: src/app/main/ui/inspect/right_sidebar.cljs:165
-msgid "inspect.tabs.switcher.label"
-msgstr "Información sobre la capa"
+#: src/app/main/ui/inspect/styles/style_box.cljs:10
+msgid "inspect.tabs.styles.panel.variant"
+msgstr "Propiedades de las variantes"
+
+#: src/app/main/ui/inspect/styles/style_box.cljs:11
+msgid "inspect.tabs.styles.panel.token"
+msgstr "Sets y temas de tokens"
+
+#: 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"
 
 #: src/app/main/ui/dashboard/comments.cljs:95
 msgid "label.mark-all-as-read"