github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-05-19 15:03:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix pixel grid color row (#9360)

Browse Source
This commit is contained in:
Eva Marco 2026-05-08 11:06:56 +02:00 committed by GitHub
parent a52c4e099a
commit cccd7bc6de
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 53 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
common/src/app/common/colors.cljc
View File

@ -486,4 +486,3 @@
a (+ (* ah 100) (* av 10)) a (+ (* ah 100) (* av 10))
b (+ (* bh 100) (* bv 10))] b (+ (* bh 100) (* bv 10))]
(compare a b))) (compare a b)))

3
common/src/app/common/types/color.cljc
View File

@ -192,6 +192,9 @@
(def ^:const background-quaternary "#2e3434") (def ^:const background-quaternary "#2e3434")
(def ^:const background-quaternary-light "#eef0f2") (def ^:const background-quaternary-light "#eef0f2")
(def ^:const canvas "#E8E9EA") (def ^:const canvas "#E8E9EA")
(def ^:const default-pixel-grid-color "#0070E4")
(def ^:const default-pixel-grid-opacity 0.2)
(def names (def names
{"aliceblue" "#f0f8ff" {"aliceblue" "#f0f8ff"

2
common/src/app/common/types/stroke.cljc
View File

@ -6,7 +6,7 @@
(ns app.common.types.stroke (ns app.common.types.stroke
(:require (:require
[app.common.colors :as clr])) [app.common.types.color :as clr]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; SCHEMAS ;; SCHEMAS

2
common/test/common_tests/colors_test.cljc
View File

@ -113,7 +113,7 @@
(t/deftest ac-rgb-to-hsl (t/deftest ac-rgb-to-hsl
;; Black: h=0, s=0.0, l=0.0 (s is 0.0 not 0 on JVM, and ##NaN for white) ;; Black: h=0, s=0.0, l=0.0 (s is 0.0 not 0 on JVM, and ##NaN for white)
(let [[h s l] (c/rgb->hsl [0 0 0])] (let [[h _s l] (c/rgb->hsl [0 0 0])]
(t/is (= 0 h)) (t/is (= 0 h))
(t/is (mth/close? l 0.0))) (t/is (mth/close? l 0.0)))
;; White: h=0, s=##NaN (achromatic), l=1.0 ;; White: h=0, s=##NaN (achromatic), l=1.0

67
frontend/src/app/main/ui/workspace/sidebar/options/page.cljs
View File

@ -32,10 +32,6 @@
(-> (l/key :pixel-grid-opacity) (-> (l/key :pixel-grid-opacity)
(l/derived refs/workspace-page))) (l/derived refs/workspace-page)))
;; Default pixel grid color shown in the picker when the user hasn't
;; set a custom one. Matches the legacy hardcoded CSS variable.
(def ^:private default-pixel-grid-color "#0070E4")
(mf/defc options* (mf/defc options*
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}
[] []
@ -54,35 +50,42 @@
{:color (d/nilv background clr/canvas) {:color (d/nilv background clr/canvas)
:opacity 1}) :opacity 1})
grid (mf/with-memo [grid-color grid-alpha] grid-color (mf/with-memo [grid-color grid-alpha]
{:color (d/nilv grid-color default-pixel-grid-color) {:color (d/nilv grid-color clr/default-pixel-grid-color)
:opacity (d/nilv grid-alpha 0.2)})] :opacity (d/nilv grid-alpha clr/default-pixel-grid-opacity)})]
[:div {:class (stl/css :element-set)} [:* [:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)} [:div {:class (stl/css :element-title)}
[:> title-bar* {:collapsable false [:> title-bar* {:collapsable false
:title (tr "workspace.options.canvas-background") :title (tr "workspace.options.canvas-background")
:class (stl/css :title-spacing-page)}]] :class (stl/css :title-spacing-page)}]]
[:div {:class (stl/css :element-content)} [:div {:class (stl/css :element-content)}
[:> color-row* [:> color-row*
{:disable-gradient true {:disable-gradient true
:disable-opacity true :disable-opacity true
:disable-image true :disable-image true
:title (tr "workspace.options.canvas-background") :title (tr "workspace.options.canvas-background")
:color color :color color
:on-change on-change :on-change on-change
:origin :canvas :origin :canvas
:on-open on-open :on-open on-open
:on-close on-close}] :on-close on-close}]]]
[:> color-row* [:div {:class (stl/css :element-set)}
{:disable-gradient true [:div {:class (stl/css :element-title)}
:disable-image true [:> title-bar* {:collapsable false
:title "Pixel grid color" :title (tr "workspace.options.pixel grid-color")
:color grid :class (stl/css :title-spacing-page)}]]
:on-change on-grid-change [:div {:class (stl/css :element-content)}
:origin :pixel-grid
:on-open on-open [:> color-row*
:on-close on-close}]]])) {:disable-gradient true
:disable-image true
:title (tr "workspace.options.pixel grid-color")
:color grid-color
:on-change on-grid-change
:origin :pixel-grid
:on-open on-open
:on-close on-close}]]]]))

1
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
View File

@ -65,6 +65,7 @@
block-size: $sz-32; block-size: $sz-32;
min-inline-size: 0; min-inline-size: 0;
inline-size: 100%; inline-size: 100%;
max-inline-size: 100%;
padding: 0; padding: 0;
margin-inline-end: 0; margin-inline-end: 0;
border: $b-1 solid var(--color-name-wrapper-boder-color); border: $b-1 solid var(--color-name-wrapper-boder-color);

9
frontend/src/app/main/ui/workspace/tokens/management/forms/controls/color_input.cljs
View File

@ -7,7 +7,6 @@
(ns app.main.ui.workspace.tokens.management.forms.controls.color-input (ns app.main.ui.workspace.tokens.management.forms.controls.color-input
(:require-macros [app.main.style :as stl]) (:require-macros [app.main.style :as stl])
(:require (:require
[app.common.colors :as color]
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.types.color :as cl] [app.common.types.color :as cl]
@ -171,8 +170,8 @@
default-bullet-color default-bullet-color
(case (:theme profile) (case (:theme profile)
"light" "light"
color/background-quaternary-light cl/background-quaternary-light
color/background-quaternary) cl/background-quaternary)
hex hex
(if valid-color (if valid-color
(tinycolor/->hex-string (tinycolor/valid-color valid-color)) (tinycolor/->hex-string (tinycolor/valid-color valid-color))
@ -337,8 +336,8 @@
default-bullet-color default-bullet-color
(case (:theme profile) (case (:theme profile)
"light" "light"
color/background-quaternary-light cl/background-quaternary-light
color/background-quaternary) cl/background-quaternary)
hex hex
(if valid-color (if valid-color

4
frontend/translations/en.po
View File

@ -6360,6 +6360,10 @@ msgstr "Toggle blur"
msgid "workspace.options.canvas-background" msgid "workspace.options.canvas-background"
msgstr "Canvas background" msgstr "Canvas background"
#: src/app/main/ui/workspace/sidebar/options/page.cljs
msgid "workspace.options.pixel grid-color"
msgstr "Pixel grid color"
#: src/app/main/ui/workspace/sidebar/options/menus/measures.cljs:567 #: src/app/main/ui/workspace/sidebar/options/menus/measures.cljs:567
msgid "workspace.options.clip-content" msgid "workspace.options.clip-content"
msgstr "Clip content" msgstr "Clip content"

4
frontend/translations/es.po
View File

@ -6246,6 +6246,10 @@ msgstr "Mostrar/ocultar desenfoque"
msgid "workspace.options.canvas-background" msgid "workspace.options.canvas-background"
msgstr "Color de fondo" msgstr "Color de fondo"
#: src/app/main/ui/workspace/sidebar/options/page.cljs
msgid "workspace.options.pixel grid-color"
msgstr "Color de la rejilla de pixeles"
#: src/app/main/ui/workspace/sidebar/options/menus/measures.cljs:567 #: src/app/main/ui/workspace/sidebar/options/menus/measures.cljs:567
msgid "workspace.options.clip-content" msgid "workspace.options.clip-content"
msgstr "Truncar contenido" msgstr "Truncar contenido"