✨ Add composite typography token to text panel (#7496)

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)]

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);
 }

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;
+}

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]]