diff --git a/common/src/app/common/colors.cljc b/common/src/app/common/colors.cljc index ab7c7e2a76..4d240cddb9 100644 --- a/common/src/app/common/colors.cljc +++ b/common/src/app/common/colors.cljc @@ -486,4 +486,3 @@ a (+ (* ah 100) (* av 10)) b (+ (* bh 100) (* bv 10))] (compare a b))) - diff --git a/common/src/app/common/types/color.cljc b/common/src/app/common/types/color.cljc index f626e48ae3..396f914645 100644 --- a/common/src/app/common/types/color.cljc +++ b/common/src/app/common/types/color.cljc @@ -192,6 +192,9 @@ (def ^:const background-quaternary "#2e3434") (def ^:const background-quaternary-light "#eef0f2") (def ^:const canvas "#E8E9EA") +(def ^:const default-pixel-grid-color "#0070E4") + +(def ^:const default-pixel-grid-opacity 0.2) (def names {"aliceblue" "#f0f8ff" diff --git a/common/src/app/common/types/stroke.cljc b/common/src/app/common/types/stroke.cljc index ef52ccefd8..b68a9d3775 100644 --- a/common/src/app/common/types/stroke.cljc +++ b/common/src/app/common/types/stroke.cljc @@ -6,7 +6,7 @@ (ns app.common.types.stroke (:require - [app.common.colors :as clr])) + [app.common.types.color :as clr])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; SCHEMAS diff --git a/common/test/common_tests/colors_test.cljc b/common/test/common_tests/colors_test.cljc index 7d6b0f0e3d..5ed2fdeb83 100644 --- a/common/test/common_tests/colors_test.cljc +++ b/common/test/common_tests/colors_test.cljc @@ -113,7 +113,7 @@ (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) - (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 (mth/close? l 0.0))) ;; White: h=0, s=##NaN (achromatic), l=1.0 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs index c5876940b8..737d204640 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs @@ -32,10 +32,6 @@ (-> (l/key :pixel-grid-opacity) (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/wrap [mf/memo]} [] @@ -54,35 +50,42 @@ {:color (d/nilv background clr/canvas) :opacity 1}) - grid (mf/with-memo [grid-color grid-alpha] - {:color (d/nilv grid-color default-pixel-grid-color) - :opacity (d/nilv grid-alpha 0.2)})] + grid-color (mf/with-memo [grid-color grid-alpha] + {:color (d/nilv grid-color clr/default-pixel-grid-color) + :opacity (d/nilv grid-alpha clr/default-pixel-grid-opacity)})] - [:div {:class (stl/css :element-set)} - [:div {:class (stl/css :element-title)} - [:> title-bar* {:collapsable false - :title (tr "workspace.options.canvas-background") - :class (stl/css :title-spacing-page)}]] - [:div {:class (stl/css :element-content)} + [:* [:div {:class (stl/css :element-set)} + [:div {:class (stl/css :element-title)} + [:> title-bar* {:collapsable false + :title (tr "workspace.options.canvas-background") + :class (stl/css :title-spacing-page)}]] + [:div {:class (stl/css :element-content)} - [:> color-row* - {:disable-gradient true - :disable-opacity true - :disable-image true - :title (tr "workspace.options.canvas-background") - :color color - :on-change on-change - :origin :canvas - :on-open on-open - :on-close on-close}] + [:> color-row* + {:disable-gradient true + :disable-opacity true + :disable-image true + :title (tr "workspace.options.canvas-background") + :color color + :on-change on-change + :origin :canvas + :on-open on-open + :on-close on-close}]]] - [:> color-row* - {:disable-gradient true - :disable-image true - :title "Pixel grid color" - :color grid - :on-change on-grid-change - :origin :pixel-grid - :on-open on-open - :on-close on-close}]]])) + [:div {:class (stl/css :element-set)} + [:div {:class (stl/css :element-title)} + [:> title-bar* {:collapsable false + :title (tr "workspace.options.pixel grid-color") + :class (stl/css :title-spacing-page)}]] + [:div {:class (stl/css :element-content)} + + [:> color-row* + {: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}]]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss index 39f56950d8..c2d6485284 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss @@ -65,6 +65,7 @@ block-size: $sz-32; min-inline-size: 0; inline-size: 100%; + max-inline-size: 100%; padding: 0; margin-inline-end: 0; border: $b-1 solid var(--color-name-wrapper-boder-color); diff --git a/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/color_input.cljs b/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/color_input.cljs index 1cd082dcbf..3defb347d3 100644 --- a/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/color_input.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/management/forms/controls/color_input.cljs @@ -7,7 +7,6 @@ (ns app.main.ui.workspace.tokens.management.forms.controls.color-input (:require-macros [app.main.style :as stl]) (:require - [app.common.colors :as color] [app.common.data :as d] [app.common.data.macros :as dm] [app.common.types.color :as cl] @@ -171,8 +170,8 @@ default-bullet-color (case (:theme profile) "light" - color/background-quaternary-light - color/background-quaternary) + cl/background-quaternary-light + cl/background-quaternary) hex (if valid-color (tinycolor/->hex-string (tinycolor/valid-color valid-color)) @@ -337,8 +336,8 @@ default-bullet-color (case (:theme profile) "light" - color/background-quaternary-light - color/background-quaternary) + cl/background-quaternary-light + cl/background-quaternary) hex (if valid-color diff --git a/frontend/translations/en.po b/frontend/translations/en.po index a38b24ba03..d138b77b3c 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -6360,6 +6360,10 @@ msgstr "Toggle blur" msgid "workspace.options.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 msgid "workspace.options.clip-content" msgstr "Clip content" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 6a6814859c..2107af50d9 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -6246,6 +6246,10 @@ msgstr "Mostrar/ocultar desenfoque" msgid "workspace.options.canvas-background" 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 msgid "workspace.options.clip-content" msgstr "Truncar contenido"