From 34da6b64df5719a6bc4e42c4876275c53bd68aea Mon Sep 17 00:00:00 2001 From: Xavier Julian Date: Thu, 28 Aug 2025 14:31:45 +0200 Subject: [PATCH] :tada: Inspect styles tab tokens panel --- frontend/src/app/main/ui/inspect/styles.cljs | 19 +++-- .../inspect/styles/panels/tokens_panel.cljs | 39 ++++++++++ .../inspect/styles/panels/tokens_panel.scss | 32 ++++++++ .../app/main/ui/inspect/styles/style_box.cljs | 24 +++--- .../sidebar/options/menus/stroke.cljs | 2 +- frontend/translations/en.po | 78 ++++++++++--------- frontend/translations/es.po | 74 ++++++++++-------- 7 files changed, 181 insertions(+), 87 deletions(-) create mode 100644 frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.cljs create mode 100644 frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.scss diff --git a/frontend/src/app/main/ui/inspect/styles.cljs b/frontend/src/app/main/ui/inspect/styles.cljs index d5e68f53e7..dc11bc4e04 100644 --- a/frontend/src/app/main/ui/inspect/styles.cljs +++ b/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")} - (when has-tokens? - [:li {:key "token"} + [:ol {:class (stl/css :styles-tab) :aria-label (tr "labels.styles")} + (when (or active-themes active-sets) + [: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]])])) diff --git a/frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.cljs b/frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.cljs new file mode 100644 index 0000000000..cfd48ebe9b --- /dev/null +++ b/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}]))]) diff --git a/frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.scss b/frontend/src/app/main/ui/inspect/styles/panels/tokens_panel.scss new file mode 100644 index 0000000000..2cb84aff07 --- /dev/null +++ b/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); +} diff --git a/frontend/src/app/main/ui/inspect/styles/style_box.cljs b/frontend/src/app/main/ui/inspect/styles/style_box.cljs index 6b58762c35..a3eeb798f7 100644 --- a/frontend/src/app/main/ui/inspect/styles/style_box.cljs +++ b/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") - :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") + :fill (tr "labels.fill") + :stroke (tr "labels.stroke") + :text (tr "labels.text") + :blur (tr "labels.blur") + :shadow (tr "labels.shadow") + :layout (tr "labels.layout") :layout-element (tr "inspect.tabs.styles.panel.layout-element") - :visibility (tr "inspect.tabs.styles.panel.visibility") - :svg (tr "inspect.tabs.styles.panel.svg") + :visibility (tr "labels.visibility") + :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-description)} children]])])) + [:div {:class (stl/css :style-box-content) :id (str "style-box-" (d/name attribute))} + [:div {:class (stl/css :style-box-panel-wrapper)} children]])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs index 4d3f4d6210..0e8eb69f25 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs +++ b/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*) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 29e128469f..0752063cb6 100644 --- a/frontend/translations/en.po +++ b/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." diff --git a/frontend/translations/es.po b/frontend/translations/es.po index ddf9eb06d0..4ce7513cd0 100644 --- a/frontend/translations/es.po +++ b/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 ""