diff --git a/frontend/src/app/main/ui/inspect/styles/panels/geometry.cljs b/frontend/src/app/main/ui/inspect/styles/panels/geometry.cljs index f3512d41b3..45f0804d20 100644 --- a/frontend/src/app/main/ui/inspect/styles/panels/geometry.cljs +++ b/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)) 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 e8e64c3fbb..f0e7225500 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 @@ -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; diff --git a/frontend/src/app/util/code_gen/style_css.cljs b/frontend/src/app/util/code_gen/style_css.cljs index b3f8090eff..0f41d4eed0 100644 --- a/frontend/src/app/util/code_gen/style_css.cljs +++ b/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 diff --git a/frontend/src/app/util/code_gen/style_css_formats.cljs b/frontend/src/app/util/code_gen/style_css_formats.cljs index fe9079fbe3..1d1e516203 100644 --- a/frontend/src/app/util/code_gen/style_css_formats.cljs +++ b/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))) diff --git a/frontend/src/app/util/code_gen/style_css_values.cljs b/frontend/src/app/util/code_gen/style_css_values.cljs index 2537db5000..e8965b8180 100644 --- a/frontend/src/app/util/code_gen/style_css_values.cljs +++ b/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)