diff --git a/frontend/src/app/main/ui/inspect/attributes/shadow.cljs b/frontend/src/app/main/ui/inspect/attributes/shadow.cljs index ebda4bcd3b..a2c8e3e32c 100644 --- a/frontend/src/app/main/ui/inspect/attributes/shadow.cljs +++ b/frontend/src/app/main/ui/inspect/attributes/shadow.cljs @@ -13,7 +13,7 @@ [app.main.ui.components.title-bar :refer [inspect-title-bar*]] [app.main.ui.inspect.attributes.common :refer [color-row]] [app.util.code-gen.style-css :as css] - [app.util.code-gen.style-css-formats :refer [format-color]] + [app.util.code-gen.style-css-formats :refer [format-color->css]] [app.util.i18n :refer [tr]] [rumext.v2 :as mf])) @@ -26,7 +26,7 @@ (defn- copy-color-data "Converts a fill object to CSS color string in the specified format." [color format] - (format-color color {:format format})) + (format-color->css color {:format format})) (mf/defc shadow-block [{:keys [shadow]}] (let [color-format (mf/use-state :hex) diff --git a/frontend/src/app/util/code_gen/style_css.cljs b/frontend/src/app/util/code_gen/style_css.cljs index 25cfb60314..00d6ae7a94 100644 --- a/frontend/src/app/util/code_gen/style_css.cljs +++ b/frontend/src/app/util/code_gen/style_css.cljs @@ -17,7 +17,7 @@ [app.common.types.text :as types.text] [app.main.ui.shapes.text.styles :as sts] [app.util.code-gen.common :as cgc] - [app.util.code-gen.style-css-formats :refer [format-value format-shadow]] + [app.util.code-gen.style-css-formats :refer [format-value format-shadow->css]] [app.util.code-gen.style-css-values :refer [get-value]] [cuerdas.core :as str])) @@ -332,4 +332,4 @@ body { (defn shadow->css [shadow] - (dm/str "box-shadow: " (format-shadow shadow {}))) + (dm/str "box-shadow: " (format-shadow->css shadow {}))) 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 cf579adb8d..571e48cc3c 100644 --- a/frontend/src/app/util/code_gen/style_css_formats.cljs +++ b/frontend/src/app/util/code_gen/style_css_formats.cljs @@ -53,24 +53,7 @@ :grid-template-rows :tracks :grid-template-columns :tracks}) -(defmulti format-value - (fn [property _value _options] (css-formatters property))) - -(defmethod format-value :position - [_ value _options] - (cond - (number? value) (fmt/format-pixels value) - :else value)) - -(defmethod format-value :size - [_ value _options] - (cond - (= value :fill) "100%" - (= value :auto) "auto" - (number? value) (fmt/format-pixels value) - :else value)) - -(defn format-color +(defn format-color->css "Format a color value to a CSS compatible string based on the given format." [value options] (let [format (get options :format :hex)] @@ -92,33 +75,54 @@ :else (uc/color->format->background value format)))) -(defmethod format-value :color +(defn format-shadow->css + [{:keys [style offset-x offset-y blur spread color]} options] + (let [css-color (format-color->css color options)] + (dm/str + (if (= style :inner-shadow) "inset " "") + (str/fmt "%spx %spx %spx %spx %s" offset-x offset-y blur spread css-color)))) + +(defn- format-position + [_ value _options] + (cond + (number? value) (fmt/format-pixels value) + :else value)) + +(defn- format-size + [_ value _options] + (cond + (= value :fill) "100%" + (= value :auto) "auto" + (number? value) (fmt/format-pixels value) + :else value)) + +(defn- format-color [_ value options] (let [format (get options :format :hex)] - (format-color value (assoc options :format format)))) + (format-color->css value (assoc options :format format)))) -(defmethod format-value :color-array +(defn- format-color-array [_ value options] (->> value - (map #(format-color % options)) + (map #(format-color->css % options)) (str/join ", "))) -(defmethod format-value :border +(defn- format-border [_ {:keys [color style width]} options] (dm/fmt "% % %" (fmt/format-pixels width) (d/name style) - (format-color color options))) + (format-color->css color options))) -(defmethod format-value :border-style +(defn- format-border-style [_ value _options] (d/name (:style value))) -(defmethod format-value :border-width +(defn- format-border-width [_ value _options] (fmt/format-pixels (:width value))) -(defmethod format-value :size-array +(defn- format-size-array [_ value _options] (cond (and (coll? value) (d/not-empty? value)) @@ -129,7 +133,7 @@ (some? value) value)) -(defmethod format-value :string-or-size-array +(defn format-string-or-size-array [_ value _] (cond (string? value) @@ -143,11 +147,11 @@ (some? value) value)) -(defmethod format-value :keyword +(defn- format-keyword [_ value _options] (d/name value)) -(defmethod format-value :tracks +(defn- format-tracks [_ value _options] (->> value (map (fn [{:keys [type value]}] @@ -158,29 +162,38 @@ (fmt/format-pixels value)))) (str/join " "))) -(defn format-shadow - [{:keys [style offset-x offset-y blur spread color]} options] - (let [css-color (format-color color options)] - (dm/str - (if (= style :inner-shadow) "inset " "") - (str/fmt "%spx %spx %spx %spx %s" offset-x offset-y blur spread css-color)))) - -(defmethod format-value :shadows +(defn- format-shadow [_ value options] (->> value - (map #(format-shadow % options)) + (map #(format-shadow->css % options)) (str/join ", "))) -(defmethod format-value :blur +(defn- format-blur [_ value _options] (dm/fmt "blur(%)" (fmt/format-pixels value))) -(defmethod format-value :matrix +(defn- format-matrix [_ value _options] (fmt/format-matrix value)) -(defmethod format-value :default - [_ value _options] - (if (keyword? value) - (d/name value) - value)) + +(defn format-value + "Get the appropriate value formatter function for a given CSS property." + [property value options] + (let [property (css-formatters property)] + (case property + :position (format-position property value options) + :size (format-size property value options) + :color (format-color property value options) + :color-array (format-color-array property value options) + :border (format-border property value options) + :border-style (format-border-style property value options) + :border-width (format-border-width property value options) + :size-array (format-size-array property value options) + :string-or-size-array (format-string-or-size-array property value options) + :keyword (format-keyword property value options) + :tracks (format-tracks property value options) + :shadow (format-shadow property value options) + :blur (format-blur property value options) + :matrix (format-matrix property value options) + (if (keyword? value) (d/name value) value)))) 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 8f2fc03a61..26018ae3a5 100644 --- a/frontend/src/app/util/code_gen/style_css_values.cljs +++ b/frontend/src/app/util/code_gen/style_css_values.cljs @@ -24,27 +24,6 @@ :gradient fill-color-gradient :image fill-image}) -(defmulti get-value - (fn [property _shape _objects _options] property)) - -(defmethod get-value :position - [_ shape objects _] - (cond - (or (and (ctl/any-layout-immediate-child? objects shape) - (not (ctl/position-absolute? shape)) - (or (cfh/group-like-shape? shape) - (cfh/frame-shape? shape) - (cgc/svg-markup? shape))) - (cfh/root-frame? shape)) - :relative - - (and (ctl/any-layout-immediate-child? objects shape) - (not (ctl/position-absolute? shape))) - nil - - :else - :absolute)) - (defn get-shape-position [shape objects coord] @@ -64,24 +43,6 @@ shape-value (get selrect coord)] (- shape-value parent-value)))) -(defmethod get-value :left - [_ shape objects _] - (get-shape-position shape objects :x)) - -(defmethod get-value :top - [_ shape objects _] - (get-shape-position shape objects :y)) - -(defmethod get-value :flex - [_ shape objects _] - (let [parent (cfh/get-parent objects (:id shape))] - (when (and (ctl/flex-layout-immediate-child? objects shape) - (or (and (contains? #{:row :row-reverse} (:layout-flex-dir parent)) - (= :fill (:layout-item-h-sizing shape))) - (and (contains? #{:column :column-reverse} (:layout-flex-dir parent)) - (= :fill (:layout-item-v-sizing shape))))) - 1))) - (defn get-shape-size [shape objects type] (let [parent (cfh/get-parent objects (:id shape)) @@ -111,7 +72,79 @@ (some? (get shape type)) (get shape type)))) -(defmethod get-value :width + + +(defn- get-position + [_ shape objects _] + (cond + (or (and (ctl/any-layout-immediate-child? objects shape) + (not (ctl/position-absolute? shape)) + (or (cfh/group-like-shape? shape) + (cfh/frame-shape? shape) + (cgc/svg-markup? shape))) + (cfh/root-frame? shape)) + :relative + + (and (ctl/any-layout-immediate-child? objects shape) + (not (ctl/position-absolute? shape))) + nil + + :else + :absolute)) + +(defn get-stroke-data + [stroke] + (let [width (:stroke-width stroke) + style (:stroke-style stroke) + color {:color (:stroke-color stroke) + :opacity (:stroke-opacity stroke) + :gradient (:stroke-color-gradient stroke)}] + + (when (and (some? stroke) (not= :none (:stroke-style stroke))) + {:color color + :style style + :width width}))) + +(defn area-cell? + [{:keys [position area-name]}] + (and (= position :area) (d/not-empty? area-name))) + +(defn get-grid-coord + [shape objects prop span-prop] + (when (and (ctl/grid-layout-immediate-child? objects shape) + (not (ctl/position-absolute? shape))) + (let [parent (get objects (:parent-id shape)) + cell (ctl/get-cell-by-shape-id parent (:id shape))] + (when (and + (not (and (= (:position cell) :area) (d/not-empty? (:area-name cell)))) + (or (= (:position cell) :manual) + (> (:row-span cell) 1) + (> (:column-span cell) 1))) + (if (> (get cell span-prop) 1) + (dm/str (get cell prop) " / " (+ (get cell prop) (get cell span-prop))) + (get cell prop)))))) + +;; SHAPE VALUES + +(defn- get-left-position + [_ shape objects _] + (get-shape-position shape objects :x)) + +(defn- get-top-position + [_ shape objects _] + (get-shape-position shape objects :y)) + +(defn- get-flex + [_ shape objects _] + (let [parent (cfh/get-parent objects (:id shape))] + (when (and (ctl/flex-layout-immediate-child? objects shape) + (or (and (contains? #{:row :row-reverse} (:layout-flex-dir parent)) + (= :fill (:layout-item-h-sizing shape))) + (and (contains? #{:column :column-reverse} (:layout-flex-dir parent)) + (= :fill (:layout-item-v-sizing shape))))) + 1))) + +(defn- get-width [_ shape objects options] (let [root? (contains? (:root-shapes options) (:id shape))] (if (and root? (ctl/any-layout? shape)) @@ -120,7 +153,7 @@ (when-not (and (cfh/text-shape? shape) (= (:grow-type shape) :auto-width)) (get-shape-size shape objects :width))))) -(defmethod get-value :height +(defn- get-height [_ shape objects options] (let [root? (contains? (:root-shapes options) (:id shape))] (when-not (and root? (ctl/any-layout? shape)) @@ -128,13 +161,13 @@ (when-not (and (cfh/text-shape? shape) (= (:grow-type shape) :auto-height)) (get-shape-size shape objects :height))))) -(defmethod get-value :flex-grow +(defn- get-flex-grow [_ shape _ options] (let [root? (contains? (:root-shapes options) (:id shape))] (when (and root? (ctl/any-layout? shape)) 1))) -(defmethod get-value :transform +(defn- get-transform [_ shape objects _] (if (cgc/svg-markup? shape) (let [parent (get objects (:parent-id shape)) @@ -159,31 +192,18 @@ (dm/str "translate(-50%, -50%) " (d/nilv transform-str "")) transform-str)))) -(defmethod get-value :background +(defn- get-background [_ {:keys [fills] :as shape} _ _] (let [single-fill? (= (count fills) 1)] (when (and (not (cgc/svg-markup? shape)) (not (cfh/group-shape? shape)) single-fill?) (fill->color (first fills))))) -(defn get-stroke-data - [stroke] - (let [width (:stroke-width stroke) - style (:stroke-style stroke) - color {:color (:stroke-color stroke) - :opacity (:stroke-opacity stroke) - :gradient (:stroke-color-gradient stroke)}] - - (when (and (some? stroke) (not= :none (:stroke-style stroke))) - {:color color - :style style - :width width}))) - -(defmethod get-value :border +(defn- get-border [_ shape _ _] (when-not (cgc/svg-markup? shape) (get-stroke-data (first (:strokes shape))))) -(defmethod get-value :border-radius +(defn- get-border-radius [_ {:keys [rx r1 r2 r3 r4] :as shape} _ _] (cond (cfh/circle-shape? shape) @@ -195,106 +215,106 @@ (every? some? [r1 r2 r3 r4]) [r1 r2 r3 r4])) -(defmethod get-value :border-start-start-radius +(defn- get-border-start-start-radius [_ {:keys [_ r1 _ _ _] :as shape} _ _] (when (and r1 (not= r1 0)) [r1])) -(defmethod get-value :border-start-end-radius +(defn- get-border-start-end-radius [_ {:keys [_ _ r2 _ _] :as shape} _ _] (when (and r2 (not= r2 0)) [r2])) -(defmethod get-value :border-end-start-radius +(defn- get-border-end-start-radius [_ {:keys [_ _ _ r3 _] :as shape} _ _] (when (and r3 (not= r3 0)) [r3])) -(defmethod get-value :border-end-end-radius +(defn- get-border-end-end-radius [_ {:keys [_ _ _ _ r4] :as shape} _ _] (when (and r4 (not= r4 0)) [r4])) -(defmethod get-value :border-style +(defn- get-border-style [_ stroke _ _] (when-not (cgc/svg-markup? stroke) (get-stroke-data stroke))) -(defmethod get-value :border-width +(defn- get-border-width [_ stroke _ _] (when-not (cgc/svg-markup? stroke) (get-stroke-data stroke))) -(defmethod get-value :box-shadow +(defn- get-box-shadow [_ shape _ _] (when-not (cgc/svg-markup? shape) (:shadow shape))) -(defmethod get-value :filter +(defn- get-filter [_ shape _ _] (when-not (cgc/svg-markup? shape) (get-in shape [:blur :value]))) -(defmethod get-value :display +(defn- get-display [_ shape _ _] (cond (:hidden shape) "none" (ctl/flex-layout? shape) "flex" (ctl/grid-layout? shape) "grid")) -(defmethod get-value :opacity +(defn- get-opacity [_ shape _ _] (when (< (:opacity shape) 1) (:opacity shape))) -(defmethod get-value :overflow +(defn- get-overflow [_ shape _ _] (when (and (cfh/frame-shape? shape) (not (cgc/svg-markup? shape)) (not (:show-content shape))) "hidden")) -(defmethod get-value :flex-direction +(defn- get-flex-direction [_ shape _ _] (:layout-flex-dir shape)) -(defmethod get-value :align-items +(defn- get-align-items [_ shape _ _] (:layout-align-items shape)) -(defmethod get-value :align-content +(defn- get-align-content [_ shape _ _] (:layout-align-content shape)) -(defmethod get-value :justify-items +(defn- get-justify-items [_ shape _ _] (:layout-justify-items shape)) -(defmethod get-value :justify-content +(defn- get-justify-content [_ shape _ _] (:layout-justify-content shape)) -(defmethod get-value :flex-wrap +(defn- get-flex-wrap [_ shape _ _] (:layout-wrap-type shape)) -(defmethod get-value :gap +(defn- get-gap [_ shape _ _] (let [[g1 g2] (ctl/gaps shape)] (when (and (= g1 g2) (or (not= g1 0) (not= g2 0))) [g1]))) -(defmethod get-value :row-gap +(defn- get-row-gap [_ shape _ _] (let [[g1 g2] (ctl/gaps shape)] (when (and (not= g1 g2) (not= g1 0)) [g1]))) -(defmethod get-value :column-gap +(defn- get-column-gap [_ shape _ _] (let [[g1 g2] (ctl/gaps shape)] (when (and (not= g1 g2) (not= g2 0)) [g2]))) -(defmethod get-value :padding +(defn- get-padding [_ {:keys [layout-padding]} _ _] (when (some? layout-padding) (let [default-padding {:p1 0 :p2 0 :p3 0 :p4 0} @@ -302,39 +322,35 @@ (when (or (not= p1 0) (not= p2 0) (not= p3 0) (not= p4 0)) [p1 p2 p3 p4])))) -(defmethod get-value :padding-block-start +(defn- get-padding-block-start [_ {:keys [layout-padding]} _ _] (when (and (:p1 layout-padding) (not= (:p1 layout-padding) 0)) [(:p1 layout-padding)])) -(defmethod get-value :padding-inline-end +(defn- get-padding-inline-end [_ {:keys [layout-padding]} _ _] (when (and (:p2 layout-padding) (not= (:p2 layout-padding) 0)) [(:p2 layout-padding)])) -(defmethod get-value :padding-block-end +(defn- get-padding-block-end [_ {:keys [layout-padding]} _ _] (when (and (:p3 layout-padding) (not= (:p3 layout-padding) 0)) [(:p3 layout-padding)])) -(defmethod get-value :padding-inline-start +(defn- get-padding-inline-start [_ {:keys [layout-padding]} _ _] (when (and (:p4 layout-padding) (not= (:p4 layout-padding) 0)) [(:p4 layout-padding)])) -(defmethod get-value :grid-template-rows +(defn- get-grid-template-rows [_ shape _ _] (:layout-grid-rows shape)) -(defmethod get-value :grid-template-columns +(defn- get-grid-template-columns [_ shape _ _] (:layout-grid-columns shape)) -(defn area-cell? - [{:keys [position area-name]}] - (and (= position :area) (d/not-empty? area-name))) - -(defmethod get-value :grid-template-areas +(defn- get-grid-template-areas [_ shape _ _] (when (and (ctl/grid-layout? shape) (some area-cell? (vals (:layout-grid-cells shape)))) @@ -353,30 +369,15 @@ (str/join "\n"))] result))) -(defn get-grid-coord - [shape objects prop span-prop] - (when (and (ctl/grid-layout-immediate-child? objects shape) - (not (ctl/position-absolute? shape))) - (let [parent (get objects (:parent-id shape)) - cell (ctl/get-cell-by-shape-id parent (:id shape))] - (when (and - (not (and (= (:position cell) :area) (d/not-empty? (:area-name cell)))) - (or (= (:position cell) :manual) - (> (:row-span cell) 1) - (> (:column-span cell) 1))) - (if (> (get cell span-prop) 1) - (dm/str (get cell prop) " / " (+ (get cell prop) (get cell span-prop))) - (get cell prop)))))) - -(defmethod get-value :grid-column +(defn- get-grid-column [_ shape objects _] (get-grid-coord shape objects :column :column-span)) -(defmethod get-value :grid-row +(defn- get-grid-row [_ shape objects _] (get-grid-coord shape objects :row :row-span)) -(defmethod get-value :grid-area +(defn- get-grid-area [_ shape objects _] (when (and (ctl/grid-layout-immediate-child? objects shape) (not (ctl/position-absolute? shape))) @@ -385,7 +386,7 @@ (when (and (= (:position cell) :area) (d/not-empty? (:area-name cell))) (str/replace (:area-name cell) " " "-"))))) -(defmethod get-value :flex-shrink +(defn- get-flex-shrink [_ shape objects _] (when (and (ctl/flex-layout-immediate-child? objects shape) @@ -401,7 +402,7 @@ (not= :auto (:layout-item-v-sizing shape))) 0)) -(defmethod get-value :margin +(defn- get-margin [_ {:keys [layout-item-margin] :as shape} objects _] (when (ctl/any-layout-immediate-child? objects shape) @@ -410,27 +411,28 @@ (when (or (not= m1 0) (not= m2 0) (not= m3 0) (not= m4 0)) [m1 m2 m3 m4])))) -(defmethod get-value :margin-block-start +(defn- get-margin-block-start [_ {:keys [layout-item-margin] :as shape} objects _] (when (and (ctl/any-layout-immediate-child? objects shape) (:m1 layout-item-margin) (not= (:m1 layout-item-margin) 0)) [(:m1 layout-item-margin)])) -(defmethod get-value :margin-inline-end +(defn- get-margin-inline-end [_ {:keys [layout-item-margin] :as shape} objects _] (when (and (ctl/any-layout-immediate-child? objects shape) (:m2 layout-item-margin) (not= (:m2 layout-item-margin) 0)) [(:m2 layout-item-margin)])) -(defmethod get-value :margin-block-end +(defn- get-margin-block-end [_ {:keys [layout-item-margin] :as shape} objects _] (when (and (ctl/any-layout-immediate-child? objects shape) (:m3 layout-item-margin) (not= (:m3 layout-item-margin) 0)) [(:m3 layout-item-margin)])) -(defmethod get-value :margin-inline-start +(defn- get-margin-inline-start [_ {:keys [layout-item-margin] :as shape} objects _] (when (and (ctl/any-layout-immediate-child? objects shape) (:m4 layout-item-margin) (not= (:m4 layout-item-margin) 0)) [(:m4 layout-item-margin)])) -(defmethod get-value :z-index + +(defn- get-z-index [_ {:keys [layout-item-z-index] :as shape} objects _] (cond (cfh/root-frame? shape) @@ -439,40 +441,28 @@ (ctl/any-layout-immediate-child? objects shape) layout-item-z-index)) -(defmethod get-value :max-height +(defn- get-max-height [_ shape objects _] + (prn "max-height" shape) (cond (ctl/any-layout-immediate-child? objects shape) (:layout-item-max-h shape))) -(defmethod get-value :max-block-size - [_ shape objects _] - (get-value :max-height shape objects)) - -(defmethod get-value :min-height +(defn- get-min-height [_ shape objects _] (cond (and (ctl/any-layout-immediate-child? objects shape) (some? (:layout-item-min-h shape))) (:layout-item-min-h shape) - (and (ctl/auto-height? shape) (cfh/frame-shape? shape) (not (:show-content shape))) (-> shape :selrect :height))) -(defmethod get-value :min-block-size - [_ shape objects _] - (get-value :min-height shape objects)) - -(defmethod get-value :max-width +(defn- get-max-width [_ shape objects _] (cond (ctl/any-layout-immediate-child? objects shape) (:layout-item-max-w shape))) -(defmethod get-value :max-inline-size - [_ shape objects _] - (get-value :max-width shape objects)) - -(defmethod get-value :min-width +(defn- get-min-width [_ shape objects _] (cond (and (ctl/any-layout-immediate-child? objects shape) (some? (:layout-item-min-w shape))) @@ -481,11 +471,7 @@ (and (ctl/auto-width? shape) (cfh/frame-shape? shape) (not (:show-content shape))) (-> shape :selrect :width))) -(defmethod get-value :min-inline-size - [_ shape objects _] - (get-value :min-width shape objects)) - -(defmethod get-value :align-self +(defn- get-align-self [_ shape objects _] (cond (ctl/flex-layout-immediate-child? objects shape) @@ -497,7 +483,7 @@ align-self (:align-self cell)] (when (not= align-self :auto) align-self)))) -(defmethod get-value :justify-self +(defn- get-justify-self [_ shape objects _] (cond (ctl/grid-layout-immediate-child? objects shape) @@ -506,11 +492,88 @@ justify-self (:justify-self cell)] (when (not= justify-self :auto) justify-self)))) -(defmethod get-value :grid-auto-flow +(defn- get-grid-auto-flow [_ shape _ _] (when (and (ctl/grid-layout? shape) (= (:layout-grid-dir shape) :column)) "column")) -(defmethod get-value :default - [property shape _ _] - (get shape property)) +(defn get-value + "Get the value for a given CSS property from a shape" + [property shape objects options] + (case property + ;; Positioning + :position (get-position property shape objects options) + :left (get-left-position property shape objects options) + :top (get-top-position property shape objects options) + :z-index (get-z-index property shape objects options) + :transform (get-transform property shape objects options) + + ;; Size + :width (get-width property shape objects options) + :height (get-height property shape objects options) + (:max-width :max-inline-size) (get-max-width property shape objects options) + (:min-width :min-inline-size) (get-min-width property shape objects options) + (:max-height :max-block-size) (get-max-height property shape objects options) + (:min-height :min-block-size) (get-min-height property shape objects options) + + ;; Spacing + :margin (get-margin property shape objects options) + :margin-block-start (get-margin-block-start property shape objects options) + :margin-inline-end (get-margin-inline-end property shape objects options) + :margin-block-end (get-margin-block-end property shape objects options) + :margin-inline-start (get-margin-inline-start property shape objects options) + :padding (get-padding property shape objects options) + :padding-block-start (get-padding-block-start property shape objects options) + :padding-inline-end (get-padding-inline-end property shape objects options) + :padding-block-end (get-padding-block-end property shape objects options) + :padding-inline-start (get-padding-inline-start property shape objects options) + + ;; Border & Background + :border (get-border property shape objects options) + :border-style (get-border-style property shape objects options) + :border-width (get-border-width property shape objects options) + :border-radius (get-border-radius property shape objects options) + :border-start-start-radius (get-border-start-start-radius property shape objects options) + :border-start-end-radius (get-border-start-end-radius property shape objects options) + :border-end-start-radius (get-border-end-start-radius property shape objects options) + :border-end-end-radius (get-border-end-end-radius property shape objects options) + :background (get-background property shape objects options) + + ;; Visual Effects + :opacity (get-opacity property shape objects options) + :box-shadow (get-box-shadow property shape objects options) + :filter (get-filter property shape objects options) + :overflow (get-overflow property shape objects options) + + ;; Display + :display (get-display property shape objects options) + + ;; Flexbox + :flex (get-flex property shape objects options) + :flex-grow (get-flex-grow property shape objects options) + :flex-shrink (get-flex-shrink property shape objects options) + :flex-direction (get-flex-direction property shape objects options) + :flex-wrap (get-flex-wrap property shape objects options) + :align-items (get-align-items property shape objects options) + :align-content (get-align-content property shape objects options) + :align-self (get-align-self property shape objects options) + :justify-content (get-justify-content property shape objects options) + :justify-items (get-justify-items property shape objects options) + :justify-self (get-justify-self property shape objects options) + + ;; Grid + :grid-template-rows (get-grid-template-rows property shape objects options) + :grid-template-columns (get-grid-template-columns property shape objects options) + :grid-template-areas (get-grid-template-areas property shape objects options) + :grid-column (get-grid-column property shape objects options) + :grid-row (get-grid-row property shape objects options) + :grid-area (get-grid-area property shape objects options) + :grid-auto-flow (get-grid-auto-flow property shape objects options) + + ;; Spacing (Flex/Grid) + :gap (get-gap property shape objects options) + :row-gap (get-row-gap property shape objects options) + :column-gap (get-column-gap property shape objects options) + + ;; Default + (get shape property)))