From f1ebcaf635d4bb563b74bbc8e643776b0a69a4f4 Mon Sep 17 00:00:00 2001
From: Xaviju <xavier.julian@kaleidos.net>
Date: Wed, 15 Oct 2025 13:21:30 +0200
Subject: [PATCH] :sparkles: Add composite typography token to text panel
 (#7496)

---
 .../main/ui/inspect/styles/panels/text.cljs   | 17 ++++++++--
 .../main/ui/inspect/styles/panels/text.scss   |  7 +++--
 .../styles/property_detail_copiable.scss      | 31 +++++++++----------
 .../inspect/styles/rows/properties_row.cljs   |  2 +-
 4 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/frontend/src/app/main/ui/inspect/styles/panels/text.cljs b/frontend/src/app/main/ui/inspect/styles/panels/text.cljs
index 9b38efb44a..14f2e9e4fe 100644
--- a/frontend/src/app/main/ui/inspect/styles/panels/text.cljs
+++ b/frontend/src/app/main/ui/inspect/styles/panels/text.cljs
@@ -62,7 +62,8 @@
   [{:keys [shapes _ resolved-tokens color-space]}]
   [:div {:class (stl/css :text-panel)}
    (for [shape shapes]
-     (let [style-text-blocks (get-style-text shape)]
+     (let [style-text-blocks (get-style-text shape)
+           composite-typography-token (get-resolved-token :typography shape resolved-tokens)]
 
        [:div {:key (:id shape) :class "text-shape"}
         (for [[style text] style-text-blocks]
@@ -76,9 +77,21 @@
                                           :shape shape
                                           :resolved-tokens resolved-tokens
                                           :color-space color-space}]))
-           (when (:typography-ref-id style)
+
+           ;; Typography style
+           (when (and (not composite-typography-token)
+                      (:typography-ref-id style))
              [:> typography-name-block* {:style style}])
 
+           ;; Composite Typography token
+           (when (and (not (:typography-ref-id style))
+                      composite-typography-token)
+             [:> properties-row* {:term "Typography"
+                                  :detail (:name composite-typography-token)
+                                  :token composite-typography-token
+                                  :property (:name composite-typography-token)
+                                  :copiable true}])
+
            (when (:font-id style)
              (let [name (get (fonts/get-font-data (:font-id style)) :name)
                    resolved-token (get-resolved-token :font-family shape resolved-tokens)]
diff --git a/frontend/src/app/main/ui/inspect/styles/panels/text.scss b/frontend/src/app/main/ui/inspect/styles/panels/text.scss
index a1dbdeabd7..0b1bbdd05c 100644
--- a/frontend/src/app/main/ui/inspect/styles/panels/text.scss
+++ b/frontend/src/app/main/ui/inspect/styles/panels/text.scss
@@ -9,9 +9,12 @@
 .text-content-wrapper {
   --border-color: var(--color-background-quaternary);
   --border-radius: ${$br-8};
-  --text-color: var(--color-foreground-secondary);
 
   border: $b-1 solid var(--border-color);
   border-radius: var(--border-radius);
-  color: var(--text-color);
+}
+
+.text-content {
+  --detail-color: var(--color-foreground-secondary);
+  color: var(--detail-color);
 }
diff --git a/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.scss b/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.scss
index 83f1bc1f0f..3b578ce640 100644
--- a/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.scss
+++ b/frontend/src/app/main/ui/inspect/styles/property_detail_copiable.scss
@@ -12,23 +12,6 @@
   --detail-color: var(--color-foreground-primary);
   --button-min-inline-size: #{$sz-154};
   --button-min-block-size: #{$sz-36};
-}
-
-.property-detail-text {
-  color: var(--detail-color);
-}
-
-.property-detail-text-token {
-  @include use-typography("code-font");
-  --detail-color: var(--color-token-foreground);
-
-  line-height: 1.4;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.property-detail-copiable {
   --button-border-radius: #{$br-4};
   --button-background: none;
 
@@ -69,3 +52,17 @@
 .property-detail-icon {
   display: none;
 }
+
+.property-detail-text {
+  color: var(--detail-color);
+}
+
+.property-detail-text-token {
+  @include use-typography("code-font");
+  --detail-color: var(--color-token-foreground);
+
+  line-height: 1.4;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
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 82b5b86d0b..af3d39ce68 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
@@ -52,7 +52,7 @@
                         :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)} (:resolved-value token)]])}
+                                    [:div {:class (stl/css :tooltip-token-value)} (if (= :typography (:type token)) (:name token) (:resolved-value token))]])}
            [:> property-detail-copiable* {:token token
                                           :copied copied
                                           :on-click copy-attr} detail]]