diff --git a/CHANGES.md b/CHANGES.md index cff6c16817..e40403fceb 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -38,6 +38,11 @@ - Fix wrong board size presets in Android [Taiga #12339](https://tree.taiga.io/project/penpot/issue/12339) - Fix problem with grid layout components and auto sizing [Github #7797](https://github.com/penpot/penpot/issues/7797) - Fix some alignments on inspect tab [Taiga #12915](https://tree.taiga.io/project/penpot/issue/12915) +- Fix color assets from shared libraries not appearing as assets in Selected colors panel [Taiga #12957](https://tree.taiga.io/project/penpot/issue/12957) +- Fix CSS generated box-shadow property [Taiga #12997](https://tree.taiga.io/project/penpot/issue/12997) +- Fix inner shadow selector on shadow token [Taiga #12951](https://tree.taiga.io/project/penpot/issue/12951) +- Fix missing text color token from selected shapes in selected colors list [Taiga #12956](https://tree.taiga.io/project/penpot/issue/12956) +- Fix dropdown option width in Guides columns dropdown [Taiga #12959](https://tree.taiga.io/project/penpot/issue/12959) ## 2.12.1 diff --git a/docker/devenv/docker-compose.yaml b/docker/devenv/docker-compose.yaml index 3ed5c3cdd7..3973eea3b4 100644 --- a/docker/devenv/docker-compose.yaml +++ b/docker/devenv/docker-compose.yaml @@ -41,7 +41,10 @@ services: - 6062:6062 - 6063:6063 - 6064:6064 + - 9000:9000 + - 9001:9001 - 9090:9090 + - 9091:9091 environment: - EXTERNAL_UID=${CURRENT_USER_ID} diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index 68593d6348..acf775e262 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -667,6 +667,9 @@ } // UI ELEMENTS + +// FIXME: This is used multiple times accross the app. We should design this in +// the DS and create a proper component for it. .asset-element { @include bodySmallTypography; display: flex; diff --git a/frontend/src/app/main/data/style_dictionary.cljs b/frontend/src/app/main/data/style_dictionary.cljs index 961c0dbc96..1bf2de0d0a 100644 --- a/frontend/src/app/main/data/style_dictionary.cljs +++ b/frontend/src/app/main/data/style_dictionary.cljs @@ -236,7 +236,7 @@ Uses `font-size-value` to calculate the relative line-height value. Returns an error for an invalid font-size value." [line-height-value font-size-value font-size-errors] - (let [missing-references (seq (some cto/find-token-value-references line-height-value)) + (let [missing-references (seq (cto/find-token-value-references line-height-value)) error (cond missing-references diff --git a/frontend/src/app/main/data/workspace/colors.cljs b/frontend/src/app/main/data/workspace/colors.cljs index 5856cec029..dea003d5ee 100644 --- a/frontend/src/app/main/data/workspace/colors.cljs +++ b/frontend/src/app/main/data/workspace/colors.cljs @@ -1122,7 +1122,7 @@ ref-id (:stroke-color-ref-id stroke) colors (-> libraries - (get ref-id) + (get ref-file) (get :data) (ctl/get-colors)) shared? (contains? colors ref-id) @@ -1167,7 +1167,7 @@ ref-file (get color :ref-file) ref-id (get color :ref-id) colors (-> libraries - (get ref-id) + (get ref-file) (get :data) (ctl/get-colors)) shared? (contains? colors ref-id) @@ -1180,19 +1180,20 @@ :index (:index shadow)})) (defn- text->color-att - [fill file-id libraries] + [fill file-id libraries & {:keys [has-token-applied token-name]}] (let [ref-file (:fill-color-ref-file fill) ref-id (:fill-color-ref-id fill) colors (-> libraries - (get ref-id) + (get ref-file) (get :data) (ctl/get-colors)) - shared? (contains? colors ref-id) - attrs (cond-> (types.fills/fill->color fill) - (not (or shared? (= ref-file file-id))) - (dissoc :ref-file :ref-id))] - + base-attrs (cond-> (types.fills/fill->color fill) + (not (or shared? (= ref-file file-id))) + (dissoc :ref-file :ref-id)) + attrs (cond-> base-attrs + has-token-applied (assoc :has-token-applied true) + token-name (assoc :token-name token-name))] {:attrs attrs :prop :content :shape-id (:shape-id fill) @@ -1200,13 +1201,18 @@ (defn- extract-text-colors [text file-id libraries] - (let [treat-node + (let [applied-fill-token (get-in text [:applied-tokens :fill]) + treat-node (fn [node shape-id] - (map-indexed #(assoc %2 :shape-id shape-id :index %1) node))] + (map-indexed (fn [idx fill] + (let [args (cond-> [] + (and (= idx 0) applied-fill-token) + (conj :has-token-applied true :token-name applied-fill-token))] + (apply text->color-att (assoc fill :shape-id shape-id :index idx) file-id libraries args))) + node))] (->> (txt/node-seq txt/is-text-node? (:content text)) (map :fills) - (mapcat #(treat-node % (:id text))) - (map #(text->color-att % file-id libraries))))) + (mapcat #(treat-node % (:id text)))))) (defn- fill->color-att "Given a fill map enriched with :shape-id, :index, and optionally @@ -1232,7 +1238,7 @@ ref-id (:fill-color-ref-id fill) colors (-> libraries - (get ref-id) + (get ref-file) (get :data) (ctl/get-colors)) shared? (contains? colors ref-id) diff --git a/frontend/src/app/main/ui/components/editable_select.scss b/frontend/src/app/main/ui/components/editable_select.scss index 16962b6d22..ef874df8c0 100644 --- a/frontend/src/app/main/ui/components/editable_select.scss +++ b/frontend/src/app/main/ui/components/editable_select.scss @@ -4,22 +4,29 @@ // // Copyright (c) KALEIDOS INC -@use "refactor/common-refactor.scss" as deprecated; +// FIXME: we need this import for .asset-element +@use "refactor/basic-rules.scss" as deprecated; + +@use "ds/_borders.scss" as *; +@use "ds/_sizes.scss" as *; +@use "ds/_utils.scss" as *; +@use "ds/spacing.scss" as *; .editable-select { @extend .asset-element; margin: 0; padding: 0; - border: deprecated.$s-1 solid var(--input-border-color); + border: $b-1 solid var(--input-border-color); position: relative; display: flex; - height: deprecated.$s-32; + height: $sz-32; width: 100%; - padding: deprecated.$s-8; - border-radius: deprecated.$br-8; + padding: var(--sp-s); + border-radius: $br-8; cursor: pointer; .dropdown-button { - @include deprecated.flexCenter; + display: flex; + place-content: center; svg { @extend .button-icon-small; transform: rotate(90deg); @@ -29,10 +36,11 @@ .custom-select-dropdown { @extend .dropdown-wrapper; - max-height: deprecated.$s-320; + width: fit-content; + max-height: px2rem(320); // TODO: when this gets addressed in the DS, use a token .separator { margin: 0; - height: deprecated.$s-12; + height: $sz-12; } .dropdown-element { @extend .dropdown-element-base; @@ -43,7 +51,8 @@ } .check-icon { - @include deprecated.flexCenter; + display: flex; + place-content: center; svg { @extend .button-icon-small; visibility: hidden; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.cljs b/frontend/src/app/main/ui/workspace/sidebar/options.cljs index 8cc8ceb903..8e0ba6ad8f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options.cljs @@ -54,7 +54,7 @@ modifiers (dm/get-in modifiers [shape-id :modifiers]) shape (gsh/transform-shape shape modifiers) - props (mf/spread-props props {:shape shape :file-id file-id :page-id page-id})] + props (mf/spread-props props {:shape shape :file-id file-id :page-id page-id :libraries libraries})] (case shape-type :frame [:> frame/options* props] diff --git a/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/input.cljs b/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/input.cljs index f4eadff944..05ae7242cd 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/input.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/input.cljs @@ -349,6 +349,7 @@ (let [form (mf/use-ctx fc/context) input-name name + error (get-in @form [:errors :value value-subfield index input-name]) diff --git a/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/select.cljs b/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/select.cljs index 9e7009fe8c..73342b1254 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/select.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/select.cljs @@ -35,8 +35,8 @@ on-change (mf/use-fn (mf/deps input-name) - (fn [type] - (let [is-inner? (= type "inner")] + (fn [id] + (let [is-inner? (= id "inner")] (swap! form assoc-in [:data :value indexed-type index input-name] is-inner?)))) props (mf/spread-props props {:default-selected (if value "inner" "drop") diff --git a/frontend/src/app/main/ui/workspace/tokens/management/forms/shadow.cljs b/frontend/src/app/main/ui/workspace/tokens/management/forms/shadow.cljs index 594f911a48..e243042a3d 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/forms/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/shadow.cljs @@ -76,7 +76,7 @@ [token index prop value-subfield] (let [value (get-in token [:value value-subfield index prop])] (d/without-nils - {:type (if (= prop :color) :color :number) + {:type (if (= prop :color) :color :dimensions) :value value}))) (mf/defc shadow-formset* @@ -114,7 +114,7 @@ :token inset-token :tokens tokens :index index - :value-subfield value-subfield + :indexed-type value-subfield :name :inset}] (when show-button [:> icon-button* {:variant "ghost" @@ -269,13 +269,25 @@ [:value [:map - [:shadow {:optinal true} + [:shadow {:optional true} [:vector [:map [:offset-x {:optional true} [:maybe :string]] [:offset-y {:optional true} [:maybe :string]] - [:blur {:optional true} [:maybe :string]] - [:spread {:optional true} [:maybe :string]] + [:blur {:optional true} + [:and + [:maybe :string] + [:fn {:error/fn #(tr "workspace.tokens.shadow-token-blur-value-error")} + (fn [blur] + (let [n (d/parse-double blur)] + (or (nil? n) (not (< n 0)))))]]] + [:spread {:optional true} + [:and + [:maybe :string] + [:fn {:error/fn #(tr "workspace.tokens.shadow-token-spread-value-error")} + (fn [spread] + (let [n (d/parse-double spread)] + (or (nil? n) (not (< n 0)))))]]] [:color {:optional true} [:maybe :string]] [:color-result {:optional true} ::sm/any] [:inset {:optional true} [:maybe :boolean]]]]] 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 b2de3e7664..74c074d2bc 100644 --- a/frontend/src/app/util/code_gen/style_css_formats.cljs +++ b/frontend/src/app/util/code_gen/style_css_formats.cljs @@ -199,7 +199,7 @@ :string-or-size-array (format-string-or-size-array value) :keyword (format-keyword value) :tracks (format-tracks value) - :shadow (format-shadow value options) + :shadows (format-shadow value options) :blur (format-blur value) :matrix (format-matrix value) (if (keyword? value) (d/name value) value)))) diff --git a/frontend/src/app/util/forms.cljs b/frontend/src/app/util/forms.cljs index a48fae2310..253d32470c 100644 --- a/frontend/src/app/util/forms.cljs +++ b/frontend/src/app/util/forms.cljs @@ -47,17 +47,18 @@ [acc {:keys [schema in value type] :as problem}] (let [props (m/properties schema) tprops (m/type-properties schema) - field (or (first in) - (:error/field props)) - + field (or (:error/field props) + in) field (if (vector? field) field [field])] - (if (contains? acc field) + (if (and (= 1 (count field)) + (contains? acc (first field))) acc (cond - (nil? field) + (or (nil? field) + (empty? field)) acc (or (= type :malli.core/missing-key) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index b31a6deb29..04e267a0c6 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -8068,6 +8068,14 @@ msgstr "Name" msgid "workspace.tokens.token-name-duplication-validation-error" msgstr "A token already exists at the path: %s" +#: src/app/main/ui/workspace/tokens/management/forms/shadow.cljs +msgid "workspace.tokens.shadow-token-blur-value-error" +msgstr "Blur value cannot be negative" + +#: src/app/main/ui/workspace/tokens/management/forms/shadow.cljs +msgid "workspace.tokens.shadow-token-spread-value-error" +msgstr "Spread value cannot be negative" + #: src/app/main/ui/workspace/tokens/management/create/border_radius.cljs:42, src/app/main/ui/workspace/tokens/management/create/form.cljs:68 msgid "workspace.tokens.token-name-length-validation-error" msgstr "Name should be at least 1 character" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 49d5be5df1..3fb0c7e698 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -7944,6 +7944,14 @@ msgstr "Nombre" msgid "workspace.tokens.token-name-duplication-validation-error" msgstr "Ya existe un token en la ruta: %s" +#: src/app/main/ui/workspace/tokens/management/forms/shadow.cljs +msgid "workspace.tokens.shadow-token-blur-value-error" +msgstr "El valor de blur no puede ser negativo" + +#: src/app/main/ui/workspace/tokens/management/forms/shadow.cljs +msgid "workspace.tokens.shadow-token-spread-value-error" +msgstr "El valor de spread no puede ser negativo" + #: src/app/main/ui/workspace/tokens/management/create/border_radius.cljs:42, src/app/main/ui/workspace/tokens/management/create/form.cljs:68 msgid "workspace.tokens.token-name-length-validation-error" msgstr "El nombre debería ser de al menos 1 caracter"