🐛 Show stroke width tokens in the inspect stroke panel (#12096)

Since stroke widths can be set per side, stroke width tokens are stored
in the four per-side attributes, not in :stroke-width. The inspect stroke
panel still read :stroke-width for Border width and had no token lookup
for the per-side widths, so it showed the raw value instead of the token.

Read the token of each side for the per-side widths, and the token shared
by every side for Border width. Files that are not migrated yet keep the
token in :stroke-width, so Border width still falls back to it.

Closes #12029

AI-assisted-by: claude-opus-5-5

frontend/src/app/main/ui/inspect/styles/panels/stroke.cljs

@@ -42,20 +42,44 @@
    :border-width :stroke-width
    :border-color :stroke-color})
 
-(defn- get-applied-tokens-in-shape
-  [shape-tokens property]
-  (let [border-prop (get shape-prop->stroke-prop property)]
-    (if border-prop
-      (get shape-tokens border-prop)
-      (get shape-tokens property))))
+(def ^:private per-side-prop->token-attr
+  {:border-block-start-width  :stroke-width-top
+   :border-inline-end-width   :stroke-width-right
+   :border-block-end-width    :stroke-width-bottom
+   :border-inline-start-width :stroke-width-left})
+
+(defn- all-sides-token-name
+  "Token applied to the four stroke width sides when they all share it."
+  [applied-tokens]
+  (let [sides (map #(get applied-tokens %)
+                   [:stroke-width-top :stroke-width-right
+                    :stroke-width-bottom :stroke-width-left])]
+    (when (and (every? some? sides) (apply = sides))
+      (first sides))))
+
+(defn stroke-property-token-name
+  "Name of the token applied to the stroke `property`, read from the shape
+  `applied-tokens`. Stroke width tokens are stored per side, so a per-side
+  property reads its side and `:border-width` reads the token shared by
+  every side. Files not migrated yet keep it in the old `:stroke-width`."
+  [applied-tokens property]
+  (cond
+    (contains? per-side-prop->token-attr property)
+    (get applied-tokens (get per-side-prop->token-attr property))
+
+    (= :border-width property)
+    (or (all-sides-token-name applied-tokens)
+        (get applied-tokens :stroke-width))
+
+    :else
+    (let [border-prop (get shape-prop->stroke-prop property)]
+      (get applied-tokens (or border-prop property)))))
 
 (defn- get-resolved-token
   "Get the resolved token for a specific property in a shape."
   [property shape resolved-tokens]
-  (let [shape-tokens (:applied-tokens shape)
-        applied-tokens-in-shape (get-applied-tokens-in-shape shape-tokens property)
-        token (get resolved-tokens applied-tokens-in-shape)]
-    token))
+  (let [token-name (stroke-property-token-name (:applied-tokens shape) property)]
+    (get resolved-tokens token-name)))
 
 ;; Current token implementation on strokes only supports one token per shape and has to be the first stroke
 ;; This must be improved in the future

frontend/test/frontend_tests/runner.cljs

@@ -106,6 +106,7 @@
    [frontend-tests.ui.ds-controls-numeric-input-test]
    [frontend-tests.ui.gradient-handlers-test]
    [frontend-tests.ui.history-test]
+   [frontend-tests.ui.inspect-stroke-tokens-test]
    [frontend-tests.ui.layout-container-multiple-test]
    [frontend-tests.ui.measures-menu-props-test]
    [frontend-tests.ui.organization-team-switch-test]
@@ -239,6 +240,7 @@
    'frontend-tests.ui.ds-controls-numeric-input-test
    'frontend-tests.ui.gradient-handlers-test
    'frontend-tests.ui.history-test
+   'frontend-tests.ui.inspect-stroke-tokens-test
    'frontend-tests.ui.layout-container-multiple-test
    'frontend-tests.ui.measures-menu-props-test
    'frontend-tests.ui.organization-team-switch-test

frontend/test/frontend_tests/ui/inspect_stroke_tokens_test.cljs

@@ -0,0 +1,43 @@
+;; 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 SUBSIDIARY SL
+
+(ns frontend-tests.ui.inspect-stroke-tokens-test
+  (:require
+   [app.common.types.token :as cto]
+   [app.main.ui.inspect.styles.panels.stroke :as stroke]
+   [cljs.test :as t :include-macros true]))
+
+(def ^:private all-sides-sw-3
+  (zipmap cto/per-side-stroke-width-keys (repeat "sw-3")))
+
+(t/deftest border-width-shows-the-token-applied-to-every-side
+  (t/is (= "sw-3" (stroke/stroke-property-token-name all-sides-sw-3 :border-width))))
+
+(t/deftest border-width-shows-no-token-when-the-sides-differ
+  (t/is (nil? (stroke/stroke-property-token-name
+               (assoc all-sides-sw-3 :stroke-width-top "sw-10") :border-width)))
+  (t/is (nil? (stroke/stroke-property-token-name
+               {:stroke-width-top "sw-3"} :border-width))))
+
+(t/deftest border-width-reads-the-legacy-key-of-unmigrated-files
+  (t/is (= "sw-3" (stroke/stroke-property-token-name {:stroke-width "sw-3"} :border-width))))
+
+(t/deftest per-side-widths-show-the-token-of-each-side
+  (let [applied {:stroke-width-top    "sw-10"
+                 :stroke-width-right  "sw-3"
+                 :stroke-width-bottom "sw-3"
+                 :stroke-width-left   "sw-4"}]
+    (t/is (= "sw-10" (stroke/stroke-property-token-name applied :border-block-start-width)))
+    (t/is (= "sw-3" (stroke/stroke-property-token-name applied :border-inline-end-width)))
+    (t/is (= "sw-3" (stroke/stroke-property-token-name applied :border-block-end-width)))
+    (t/is (= "sw-4" (stroke/stroke-property-token-name applied :border-inline-start-width)))))
+
+(t/deftest per-side-widths-without-a-token-show-none
+  (t/is (nil? (stroke/stroke-property-token-name
+               {:stroke-width-top "sw-10"} :border-inline-end-width))))
+
+(t/deftest border-color-keeps-the-stroke-color-token
+  (t/is (= "red" (stroke/stroke-property-token-name {:stroke-color "red"} :border-color))))