3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-20 00:27:13 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #5266 from penpot/hiru-merge-tokens

Browse source 
Update design tokens
This commit is contained in:
Andrey Antukh 2024-11-12 10:46:53 +01:00 • committed by GitHub
commit 44ffdc4f97
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 61 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

3
common/src/app/common/types/token.cljc
View file

@ -74,7 +74,8 @@
(sm/register! ::color (sm/register! ::color
[:map [:map
[:color {:optional true} token-name-ref]]) [:fill {:optional true} token-name-ref]
[:stroke-color {:optional true} token-name-ref]])
(def color-keys (schema-keys ::color)) (def color-keys (schema-keys ::color))

4
common/src/app/common/types/tokens_lib.cljc
View file

@ -147,9 +147,11 @@
Token references are strings delimited by curly braces. Token references are strings delimited by curly braces.
E.g.: {foo.bar.baz} -> foo.bar.baz" E.g.: {foo.bar.baz} -> foo.bar.baz"
[token-value] [token-value]
(if (string? token-value)
(some->> (re-seq #"\{([^}]*)\}" token-value) (some->> (re-seq #"\{([^}]*)\}" token-value)
(map second) (map second)
(into #{}))) (into #{}))
#{}))
(defn token-value-self-reference? (defn token-value-self-reference?
"Check if the token is self referencing with its `token-name` in `token-value`. "Check if the token is self referencing with its `token-name` in `token-value`.

2
common/test/common_tests/types/tokens_lib_test.cljc
View file

@ -398,7 +398,6 @@
:type :boolean :type :boolean
:value true))) :value true)))
expected-order (ctob/get-ordered-set-names tokens-lib) expected-order (ctob/get-ordered-set-names tokens-lib)
expected-tokens (ctob/get-active-themes-set-tokens tokens-lib) expected-tokens (ctob/get-active-themes-set-tokens tokens-lib)
expected-token-names (mapv key expected-tokens)] expected-token-names (mapv key expected-tokens)]
@ -1140,3 +1139,4 @@
(t/is (= @with-prev-tokens-lib @tokens-lib))) (t/is (= @with-prev-tokens-lib @tokens-lib)))
(t/testing "fresh tokens library is also equal" (t/testing "fresh tokens library is also equal"
(= @with-empty-tokens-lib @tokens-lib))))))) (= @with-empty-tokens-lib @tokens-lib)))))))

3
frontend/package.json
View file

@ -54,7 +54,6 @@
"@storybook/react-vite": "^8.3.6", "@storybook/react-vite": "^8.3.6",
"@types/node": "^22.7.7", "@types/node": "^22.7.7",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"bun": "^1.1.25",
"concurrently": "^9.0.1", "concurrently": "^9.0.1",
"esbuild": "^0.24.0", "esbuild": "^0.24.0",
"express": "^4.21.1", "express": "^4.21.1",
@ -120,7 +119,7 @@
"rxjs": "8.0.0-alpha.14", "rxjs": "8.0.0-alpha.14",
"sax": "^1.4.1", "sax": "^1.4.1",
"source-map-support": "^0.5.21", "source-map-support": "^0.5.21",
"style-dictionary": "^4.1.4", "style-dictionary": "4.0.0-prerelease.34",
"tdigest": "^0.1.2", "tdigest": "^0.1.2",
"tinycolor2": "npm:^1.6.0", "tinycolor2": "npm:^1.6.0",
"ua-parser-js": "2.0.0-rc.1", "ua-parser-js": "2.0.0-rc.1",

1
frontend/shadow-cljs.edn
View file

@ -183,4 +183,3 @@
{:fn-invoke-direct true {:fn-invoke-direct true
:elide-asserts true :elide-asserts true
:anon-fn-naming-policy :off}}}}} :anon-fn-naming-policy :off}}}}}

13
frontend/src/app/main/ui/workspace/tokens/changes.cljs
View file

@ -128,13 +128,20 @@
{:reg-objects? true {:reg-objects? true
:attrs [:strokes]})) :attrs [:strokes]}))
(defn update-color (defn update-color [f value shape-ids]
[value shape-ids]
(let [color (some->> value (let [color (some->> value
(tinycolor/valid-color) (tinycolor/valid-color)
(tinycolor/->hex) (tinycolor/->hex)
(str "#"))] (str "#"))]
(wdc/change-fill shape-ids {:color color} 0))) (f shape-ids {:color color} 0)))
(defn update-fill
[value shape-ids]
(update-color wdc/change-fill value shape-ids))
(defn update-stroke-color
[value shape-ids]
(update-color wdc/change-stroke value shape-ids))
(defn update-shape-dimensions [value shape-ids attributes] (defn update-shape-dimensions [value shape-ids attributes]
(ptk/reify ::update-shape-dimensions (ptk/reify ::update-shape-dimensions

3
frontend/src/app/main/ui/workspace/tokens/context_menu.cljs
View file

@ -184,6 +184,9 @@
:r3 "Bottom Right"} :r3 "Bottom Right"}
:on-update-shape-all wtch/update-shape-radius-all :on-update-shape-all wtch/update-shape-radius-all
:on-update-shape wtch/update-shape-radius-single-corner}) :on-update-shape wtch/update-shape-radius-single-corner})
:color (fn [context-data]
[(generic-attribute-actions #{:fill} "Fill" (assoc context-data :on-update-shape wtch/update-fill))
(generic-attribute-actions #{:stroke-color} "Stroke" (assoc context-data :on-update-shape wtch/update-stroke-color))])
:spacing spacing-attribute-actions :spacing spacing-attribute-actions
:sizing sizing-attribute-actions :sizing sizing-attribute-actions
:rotation (partial generic-attribute-actions #{:rotation} "Rotation") :rotation (partial generic-attribute-actions #{:rotation} "Rotation")

24
frontend/src/app/main/ui/workspace/tokens/form.cljs
View file

@ -7,7 +7,6 @@
(ns app.main.ui.workspace.tokens.form (ns app.main.ui.workspace.tokens.form
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
;; ["lodash.debounce" :as debounce]
[app.common.colors :as c] [app.common.colors :as c]
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
@ -113,16 +112,20 @@ Token names should only contain letters and digits separated by . characters.")}
(p/rejected {:errors [(wte/get-error-code :error.token/direct-self-reference)]}) (p/rejected {:errors [(wte/get-error-code :error.token/direct-self-reference)]})
:else :else
(-> (update tokens token-name merge {:value value (let [tokens' (cond-> tokens
;; Remove previous token when renaming a token
(not= name-value (:name token)) (dissoc (:name token))
:always (update token-name #(ctob/make-token (merge % {:value value
:name token-name :name token-name
:type (:type token)}) :type (:type token)}))))]
(sd/resolve-tokens+) (-> tokens'
(sd/resolve-tokens-interactive+)
(p/then (p/then
(fn [resolved-tokens] (fn [resolved-tokens]
(let [{:keys [errors resolved-value] :as resolved-token} (get resolved-tokens token-name)] (let [{:keys [errors resolved-value] :as resolved-token} (get resolved-tokens token-name)]
(cond (cond
resolved-value (p/resolved resolved-token) resolved-value (p/resolved resolved-token)
:else (p/rejected {:errors (or errors (wte/get-error-code :error/unknown-error))}))))))))) :else (p/rejected {:errors (or errors (wte/get-error-code :error/unknown-error))}))))))))))
(defn use-debonced-resolve-callback (defn use-debonced-resolve-callback
"Resolves a token values using `StyleDictionary`. "Resolves a token values using `StyleDictionary`.
@ -201,8 +204,7 @@ Token names should only contain letters and digits separated by . characters.")}
(mf/defc form (mf/defc form
{::mf/wrap-props false} {::mf/wrap-props false}
[{:keys [token token-type action selected-token-set-id]}] [{:keys [token token-type action selected-token-set-id]}]
(let [validate-name? (mf/use-state (not (:id token))) (let [token (or token {:type token-type})
token (or token {:type token-type})
color? (wtt/color-token? token) color? (wtt/color-token? token)
selected-set-tokens (mf/deref refs/workspace-selected-token-set-tokens) selected-set-tokens (mf/deref refs/workspace-selected-token-set-tokens)
active-theme-tokens (mf/deref refs/workspace-active-theme-sets-tokens) active-theme-tokens (mf/deref refs/workspace-active-theme-sets-tokens)
@ -219,6 +221,7 @@ Token names should only contain letters and digits separated by . characters.")}
(d/dissoc-in token-path)))) (d/dissoc-in token-path))))
;; Name ;; Name
touched-name? (mf/use-state false)
name-ref (mf/use-var (:name token)) name-ref (mf/use-var (:name token))
name-errors (mf/use-state nil) name-errors (mf/use-state nil)
validate-name validate-name
@ -234,15 +237,14 @@ Token names should only contain letters and digits separated by . characters.")}
(uf/debounce (fn [e] (uf/debounce (fn [e]
(let [value (dom/get-target-val e) (let [value (dom/get-target-val e)
errors (validate-name value)] errors (validate-name value)]
;; Prevent showing error when just going to another field on a new token (when touched-name?
(when-not (and validate-name? (str/empty? value))
(reset! validate-name? false)
(reset! name-errors errors)))))) (reset! name-errors errors))))))
on-update-name on-update-name
(mf/use-fn (mf/use-fn
(mf/deps on-update-name-debounced) (mf/deps on-update-name-debounced)
(fn [e] (fn [e]
(reset! touched-name? true)
(reset! name-ref (dom/get-target-val e)) (reset! name-ref (dom/get-target-val e))
(on-update-name-debounced e))) (on-update-name-debounced e)))
@ -386,7 +388,7 @@ Token names should only contain letters and digits separated by . characters.")}
:on-change on-update-value :on-change on-update-value
:ref value-input-ref} :ref value-input-ref}
:render-right (when color? :render-right (when color?
(mf/fnc color-bullet [] (mf/fnc drop-down-button []
[:div {:class (stl/css :color-bullet) [:div {:class (stl/css :color-bullet)
:on-click #(swap! color-ramp-open? not)} :on-click #(swap! color-ramp-open? not)}
(if-let [hex (some-> @color tinycolor/valid-color tinycolor/->hex)] (if-let [hex (some-> @color tinycolor/valid-color tinycolor/->hex)]

2
frontend/src/app/main/ui/workspace/tokens/tinycolor.cljs
View file

@ -4,7 +4,7 @@
This library was chosen as it is already used by StyleDictionary, This library was chosen as it is already used by StyleDictionary,
so there is no extra dependency cost and there was no clojure alternatives with all the necessary features." so there is no extra dependency cost and there was no clojure alternatives with all the necessary features."
(:require (:require
["tinycolor2" :as tinycolor])) ["tinycolor2$default" :as tinycolor]))
(defn tinycolor? [^js x] (defn tinycolor? [^js x]
(and (instance? tinycolor x) (.isValid x))) (and (instance? tinycolor x) (.isValid x)))

2
frontend/src/app/main/ui/workspace/tokens/token_types.cljs
View file

@ -24,7 +24,7 @@
:color :color
{:title "Color" {:title "Color"
:attributes ctt/color-keys :attributes ctt/color-keys
:on-update-shape wtch/update-color :on-update-shape wtch/update-fill
:modal {:key :tokens/color :modal {:key :tokens/color
:fields [{:label "Color" :key :color}]}} :fields [{:label "Color" :key :color}]}}

3
frontend/src/app/main/ui/workspace/tokens/update.cljs
View file

@ -19,7 +19,8 @@
(def attributes->shape-update (def attributes->shape-update
{#{:rx :ry} (fn [v ids _] (wtch/update-shape-radius-all v ids)) {#{:rx :ry} (fn [v ids _] (wtch/update-shape-radius-all v ids))
#{:r1 :r2 :r3 :r4} wtch/update-shape-radius-single-corner #{:r1 :r2 :r3 :r4} wtch/update-shape-radius-single-corner
ctt/color-keys wtch/update-color #{:fill} wtch/update-fill
#{:stroke-color} wtch/update-stroke-color
ctt/stroke-width-keys wtch/update-stroke-width ctt/stroke-width-keys wtch/update-stroke-width
ctt/sizing-keys wtch/update-shape-dimensions ctt/sizing-keys wtch/update-shape-dimensions
ctt/opacity-keys wtch/update-opacity ctt/opacity-keys wtch/update-opacity

112
frontend/yarn.lock
View file

@ -218,7 +218,7 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@bundled-es-modules/glob@npm:^10.4.2": "@bundled-es-modules/glob@npm:^10.3.13":
version: 10.4.2 version: 10.4.2
resolution: "@bundled-es-modules/glob@npm:10.4.2" resolution: "@bundled-es-modules/glob@npm:10.4.2"
dependencies: dependencies:
@ -234,7 +234,7 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@bundled-es-modules/memfs@npm:^4.9.4": "@bundled-es-modules/memfs@npm:^4.8.1":
version: 4.9.4 version: 4.9.4
resolution: "@bundled-es-modules/memfs@npm:4.9.4" resolution: "@bundled-es-modules/memfs@npm:4.9.4"
dependencies: dependencies:
@ -766,62 +766,6 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@oven/bun-darwin-aarch64@npm:1.1.34":
version: 1.1.34
resolution: "@oven/bun-darwin-aarch64@npm:1.1.34"
conditions: os=darwin & cpu=arm64
languageName: node
linkType: hard
"@oven/bun-darwin-x64-baseline@npm:1.1.34":
version: 1.1.34
resolution: "@oven/bun-darwin-x64-baseline@npm:1.1.34"
conditions: os=darwin & cpu=x64
languageName: node
linkType: hard
"@oven/bun-darwin-x64@npm:1.1.34":
version: 1.1.34
resolution: "@oven/bun-darwin-x64@npm:1.1.34"
conditions: os=darwin & cpu=x64
languageName: node
linkType: hard
"@oven/bun-linux-aarch64@npm:1.1.34":
version: 1.1.34
resolution: "@oven/bun-linux-aarch64@npm:1.1.34"
conditions: os=linux & cpu=arm64
languageName: node
linkType: hard
"@oven/bun-linux-x64-baseline@npm:1.1.34":
version: 1.1.34
resolution: "@oven/bun-linux-x64-baseline@npm:1.1.34"
conditions: os=linux & cpu=x64
languageName: node
linkType: hard
"@oven/bun-linux-x64@npm:1.1.34":
version: 1.1.34
resolution: "@oven/bun-linux-x64@npm:1.1.34"
conditions: os=linux & cpu=x64
languageName: node
linkType: hard
"@oven/bun-windows-x64-baseline@npm:1.1.34":
version: 1.1.34
resolution: "@oven/bun-windows-x64-baseline@npm:1.1.34"
conditions: os=win32 & cpu=x64
languageName: node
linkType: hard
"@oven/bun-windows-x64@npm:1.1.34":
version: 1.1.34
resolution: "@oven/bun-windows-x64@npm:1.1.34"
conditions: os=win32 & cpu=x64
languageName: node
linkType: hard
"@parcel/watcher-android-arm64@npm:2.5.0": "@parcel/watcher-android-arm64@npm:2.5.0":
version: 2.5.0 version: 2.5.0
resolution: "@parcel/watcher-android-arm64@npm:2.5.0" resolution: "@parcel/watcher-android-arm64@npm:2.5.0"
@ -2472,43 +2416,6 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"bun@npm:^1.1.25":
version: 1.1.34
resolution: "bun@npm:1.1.34"
dependencies:
"@oven/bun-darwin-aarch64": "npm:1.1.34"
"@oven/bun-darwin-x64": "npm:1.1.34"
"@oven/bun-darwin-x64-baseline": "npm:1.1.34"
"@oven/bun-linux-aarch64": "npm:1.1.34"
"@oven/bun-linux-x64": "npm:1.1.34"
"@oven/bun-linux-x64-baseline": "npm:1.1.34"
"@oven/bun-windows-x64": "npm:1.1.34"
"@oven/bun-windows-x64-baseline": "npm:1.1.34"
dependenciesMeta:
"@oven/bun-darwin-aarch64":
optional: true
"@oven/bun-darwin-x64":
optional: true
"@oven/bun-darwin-x64-baseline":
optional: true
"@oven/bun-linux-aarch64":
optional: true
"@oven/bun-linux-x64":
optional: true
"@oven/bun-linux-x64-baseline":
optional: true
"@oven/bun-windows-x64":
optional: true
"@oven/bun-windows-x64-baseline":
optional: true
bin:
bun: bin/bun.exe
bunx: bin/bun.exe
checksum: 10c0/d7a69a3e6a7545d7c76edaf86633f23f791641732fb0f5a6378f1503d267d03a3353afcc01e735acb6981b12acc83827d73bca701f8e3f62183bb00ad7e22e9d
conditions: (os=darwin | os=linux | os=win32) & (cpu=arm64 | cpu=x64)
languageName: node
linkType: hard
"bytes@npm:3.1.2, bytes@npm:^3.0.0": "bytes@npm:3.1.2, bytes@npm:^3.0.0":
version: 3.1.2 version: 3.1.2
resolution: "bytes@npm:3.1.2" resolution: "bytes@npm:3.1.2"
@ -4403,7 +4310,6 @@ __metadata:
"@tokens-studio/sd-transforms": "npm:^0.16.1" "@tokens-studio/sd-transforms": "npm:^0.16.1"
"@types/node": "npm:^22.7.7" "@types/node": "npm:^22.7.7"
autoprefixer: "npm:^10.4.20" autoprefixer: "npm:^10.4.20"
bun: "npm:^1.1.25"
compression: "npm:^1.7.4" compression: "npm:^1.7.4"
concurrently: "npm:^9.0.1" concurrently: "npm:^9.0.1"
date-fns: "npm:^4.1.0" date-fns: "npm:^4.1.0"
@ -4454,7 +4360,7 @@ __metadata:
shadow-cljs: "npm:2.28.18" shadow-cljs: "npm:2.28.18"
source-map-support: "npm:^0.5.21" source-map-support: "npm:^0.5.21"
storybook: "npm:^8.3.6" storybook: "npm:^8.3.6"
style-dictionary: "npm:^4.1.4" style-dictionary: "npm:4.0.0-prerelease.34"
svg-sprite: "npm:^2.0.4" svg-sprite: "npm:^2.0.4"
tdigest: "npm:^0.1.2" tdigest: "npm:^0.1.2"
tinycolor2: "npm:^1.6.0" tinycolor2: "npm:^1.6.0"
@ -8590,13 +8496,13 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"style-dictionary@npm:^4.1.4": "style-dictionary@npm:4.0.0-prerelease.34":
version: 4.1.4 version: 4.0.0-prerelease.34
resolution: "style-dictionary@npm:4.1.4" resolution: "style-dictionary@npm:4.0.0-prerelease.34"
dependencies: dependencies:
"@bundled-es-modules/deepmerge": "npm:^4.3.1" "@bundled-es-modules/deepmerge": "npm:^4.3.1"
"@bundled-es-modules/glob": "npm:^10.4.2" "@bundled-es-modules/glob": "npm:^10.3.13"
"@bundled-es-modules/memfs": "npm:^4.9.4" "@bundled-es-modules/memfs": "npm:^4.8.1"
"@zip.js/zip.js": "npm:^2.7.44" "@zip.js/zip.js": "npm:^2.7.44"
chalk: "npm:^5.3.0" chalk: "npm:^5.3.0"
change-case: "npm:^5.3.0" change-case: "npm:^5.3.0"
@ -8608,7 +8514,7 @@ __metadata:
tinycolor2: "npm:^1.6.0" tinycolor2: "npm:^1.6.0"
bin: bin:
style-dictionary: bin/style-dictionary.js style-dictionary: bin/style-dictionary.js
checksum: 10c0/b88e2f94615bc851e2e797e685863911dbb875d312bf1571a3be6b6a9dde7e0b324d83495f153446eceefe93ec119c80e2ca032a600818dcecc72174d285e429 checksum: 10c0/775d00c0e6aec7749dd5554c448550bc0793aaff9ab028d61ba219476ffa827d3e11866d326c34a27d3e848156b885e476beaade0909fe6b174a50e857dd5009
languageName: node languageName: node
linkType: hard linkType: hard