✨ Display border-radius as logical properties in inspect tab

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

@@ -12,13 +12,29 @@
    :height
    :left
    :top
-   :border-radius
+   :border-start-start-radius
+   :border-start-end-radius
+   :border-end-start-radius
+   :border-end-end-radius
    :transform])
 
+(def ^:private shape-prop->border-radius-prop
+  {:border-start-start-radius :r1
+   :border-start-end-radius :r2
+   :border-end-start-radius :r3
+   :border-end-end-radius :r4})
+
+(defn- get-applied-tokens-in-shape
+  [shape-tokens property]
+  (let [border-prop (get shape-prop->border-radius-prop property)]
+    (if border-prop
+      (get shape-tokens border-prop)
+      (get shape-tokens property))))
+
 (defn- get-resolved-token
   [property shape resolved-tokens]
   (let [shape-tokens (:applied-tokens shape)
-        applied-tokens-in-shape (get shape-tokens property)
+        applied-tokens-in-shape (get-applied-tokens-in-shape shape-tokens property)
         token (get resolved-tokens applied-tokens-in-shape)]
     token))
 

frontend/src/app/main/ui/inspect/styles/property_detail_copiable.scss

@@ -22,6 +22,7 @@
   @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/util/code_gen/style_css.cljs

@@ -73,7 +73,10 @@ body {
    :transform
    :background
    :border
-   :border-radius
+   :border-start-start-radius
+   :border-start-end-radius
+   :border-end-start-radius
+   :border-end-end-radius
    :box-shadow
    :filter
    :opacity

frontend/src/app/util/code_gen/style_css_formats.cljs

@@ -14,32 +14,36 @@
    [cuerdas.core :as str]))
 
 (def css-formatters
-  {:left                  :position
-   :top                   :position
-   :width                 :size
-   :height                :size
-   :min-width             :size
-   :min-height            :size
-   :max-width             :size
-   :max-height            :size
-   :background            :color
-   :border                :border
-   :border-radius         :string-or-size-array
-   :border-width          :border-width
-   :border-style          :border-style
-   :box-shadow            :shadows
-   :filter                :blur
-   :gap                   :size-array
-   :row-gap               :size-array
-   :column-gap            :size-array
-   :padding               :size-array
-   :padding-inline-start  :size-array
-   :padding-inline-end    :size-array
-   :padding-block-start   :size-array
-   :padding-block-end     :size-array
-   :margin                :size-array
-   :grid-template-rows    :tracks
-   :grid-template-columns :tracks})
+  {:left                      :position
+   :top                       :position
+   :width                     :size
+   :height                    :size
+   :min-width                 :size
+   :min-height                :size
+   :max-width                 :size
+   :max-height                :size
+   :background                :color
+   :border                    :border
+   :border-radius             :string-or-size-array
+   :border-start-start-radius :string-or-size-array
+   :border-start-end-radius   :string-or-size-array
+   :border-end-start-radius   :string-or-size-array
+   :border-end-end-radius     :string-or-size-array
+   :border-width              :border-width
+   :border-style              :border-style
+   :box-shadow                :shadows
+   :filter                    :blur
+   :gap                       :size-array
+   :row-gap                   :size-array
+   :column-gap                :size-array
+   :padding                   :size-array
+   :padding-inline-start      :size-array
+   :padding-inline-end        :size-array
+   :padding-block-start       :size-array
+   :padding-block-end         :size-array
+   :margin                    :size-array
+   :grid-template-rows        :tracks
+   :grid-template-columns     :tracks})
 
 (defmulti format-value
   (fn [property _value _options] (css-formatters property)))

frontend/src/app/util/code_gen/style_css_values.cljs

@@ -195,6 +195,26 @@
     (every? some? [r1 r2 r3 r4])
     [r1 r2 r3 r4]))
 
+(defmethod get-value :border-start-start-radius
+  [_ {:keys [_ r1 _ _ _] :as shape} _ _]
+  (when (and r1 (not= r1 0))
+    [r1]))
+
+(defmethod get-value :border-start-end-radius
+  [_ {:keys [_ _ r2 _ _] :as shape} _ _]
+  (when (and r2 (not= r2 0))
+    [r2]))
+
+(defmethod get-value :border-end-start-radius
+  [_ {:keys [_ _ _ r3 _] :as shape} _ _]
+  (when (and r3 (not= r3 0))
+    [r3]))
+
+(defmethod get-value :border-end-end-radius
+  [_ {:keys [_ _ _ _ r4] :as shape} _ _]
+  (when (and r4 (not= r4 0))
+    [r4]))
+
 (defmethod get-value :border-style
   [_ stroke _ _]
   (when-not (cgc/svg-markup? stroke)