diff --git a/frontend/src/app/main/ui/inspect/styles/rows/properties_row.cljs b/frontend/src/app/main/ui/inspect/styles/rows/properties_row.cljs index af3d39ce68..d00e346dec 100644 --- a/frontend/src/app/main/ui/inspect/styles/rows/properties_row.cljs +++ b/frontend/src/app/main/ui/inspect/styles/rows/properties_row.cljs @@ -8,6 +8,8 @@ (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] + [app.main.data.workspace.tokens.format :refer [category-dictionary + format-token-value]] [app.main.ui.ds.tooltip :refer [tooltip*]] [app.main.ui.inspect.styles.property-detail-copiable :refer [property-detail-copiable*]] [app.util.i18n :refer [tr]] @@ -35,6 +37,7 @@ copiable-value (if (some? token) (:name token) property) + copy-attr (mf/use-fn (mf/deps copied) @@ -52,7 +55,11 @@ :content #(mf/html [:div {:class (stl/css :tooltip-token)} [:div {:class (stl/css :tooltip-token-title)} (tr "inspect.tabs.styles.token.resolved-value")] - [:div {:class (stl/css :tooltip-token-value)} (if (= :typography (:type token)) (:name token) (:resolved-value token))]])} + [:div {:class (stl/css :tooltip-token-value)} (if (= :typography (:type token)) + [:ul {:class (stl/css :tooltip-token-resolved-values)} + (for [[property value] (:resolved-value token)] + [:li {:key property} (str (category-dictionary property) ": " (format-token-value value))])] + (:resolved-value token))]])} [:> property-detail-copiable* {:token token :copied copied :on-click copy-attr} detail]] diff --git a/frontend/src/app/main/ui/inspect/styles/rows/properties_row.scss b/frontend/src/app/main/ui/inspect/styles/rows/properties_row.scss index 9a77c82a32..19287bc219 100644 --- a/frontend/src/app/main/ui/inspect/styles/rows/properties_row.scss +++ b/frontend/src/app/main/ui/inspect/styles/rows/properties_row.scss @@ -53,6 +53,12 @@ color: var(--title-value); } +.tooltip-token-resolved-values { + padding: var(--sp-xs) 0 var(--sp-xs) var(--sp-m); + margin: 0; + list-style-type: disc; +} + .tooltip-token-wrapper { inline-size: 100%; }