johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-12 06:24:17 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

✨ Display resolved value for composite typography tokens (#7537)
Some checks failed
_DEVELOP / build-bundle (push) Has been cancelled
Details
_DEVELOP / build-docker (push) Has been cancelled
Details
_STAGING / build-bundle (push) Has been cancelled
Details
_STAGING / build-docker (push) Has been cancelled
Details
Commit Message Check / Check Commit Message (push) Has been cancelled
Details

Browse Source 
* ✨ Display resolved value for composite typography tokens tooltip

* ✨ Add missing key to iteration
This commit is contained in:
Xaviju
2025-10-21 11:30:34 +02:00
committed by GitHub
parent e4c07e0ec0
commit d0e5d0d952
2 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/app/main/ui/inspect/styles/rows/properties_row.cljs
View File

@@ -8,6 +8,8 @@
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.data :as d] [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.ds.tooltip :refer [tooltip*]]
[app.main.ui.inspect.styles.property-detail-copiable :refer [property-detail-copiable*]] [app.main.ui.inspect.styles.property-detail-copiable :refer [property-detail-copiable*]]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
@@ -35,6 +37,7 @@
copiable-value (if (some? token) copiable-value (if (some? token)
(:name token) (:name token)
property) property)
copy-attr copy-attr
(mf/use-fn (mf/use-fn
(mf/deps copied) (mf/deps copied)
@@ -52,7 +55,11 @@
:content #(mf/html :content #(mf/html
[:div {:class (stl/css :tooltip-token)} [: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-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 [:> property-detail-copiable* {:token token
:copied copied :copied copied
:on-click copy-attr} detail]] :on-click copy-attr} detail]]

6
frontend/src/app/main/ui/inspect/styles/rows/properties_row.scss
View File

@@ -53,6 +53,12 @@
color: var(--title-value); 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 { .tooltip-token-wrapper {
inline-size: 100%; inline-size: 100%;
} }