diff --git a/frontend/src/app/main/ui/inspect/styles/panels/stroke.cljs b/frontend/src/app/main/ui/inspect/styles/panels/stroke.cljs index 53ac6d5b8c..039cfd3ce4 100644 --- a/frontend/src/app/main/ui/inspect/styles/panels/stroke.cljs +++ b/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 diff --git a/frontend/test/frontend_tests/runner.cljs b/frontend/test/frontend_tests/runner.cljs index 1f78325a70..865303404e 100644 --- a/frontend/test/frontend_tests/runner.cljs +++ b/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 diff --git a/frontend/test/frontend_tests/ui/inspect_stroke_tokens_test.cljs b/frontend/test/frontend_tests/ui/inspect_stroke_tokens_test.cljs new file mode 100644 index 0000000000..9c7638a2dd --- /dev/null +++ b/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))))