From 7a0c12e073d0e77a665a13df2ce7100deb3ff8c4 Mon Sep 17 00:00:00 2001 From: eva Date: Fri, 26 Nov 2021 11:48:10 +0100 Subject: [PATCH] :recycle: Create a colors file to save constants of color that can no be refactored into sass variables --- common/src/app/common/colors.cljc | 16 ++++++++++++++++ common/src/app/common/pages/common.cljc | 3 ++- common/src/app/common/pages/init.cljc | 13 +++++++------ .../styles/common/dependencies/colors.scss | 2 +- .../src/app/main/data/workspace/booleans.cljs | 5 +++-- .../src/app/main/data/workspace/colors.cljs | 3 ++- frontend/src/app/main/data/workspace/grid.cljs | 5 +++-- frontend/src/app/main/exports.cljs | 3 ++- frontend/src/app/main/ui/shapes/text.cljs | 3 ++- .../src/app/main/ui/workspace/colorpicker.cljs | 3 ++- .../workspace/sidebar/options/menus/shadow.cljs | 3 ++- .../workspace/sidebar/options/menus/stroke.cljs | 3 ++- .../main/ui/workspace/sidebar/options/page.cljs | 3 ++- .../sidebar/options/shapes/svg_raw.cljs | 3 ++- .../src/app/main/ui/workspace/viewport.cljs | 3 ++- frontend/test/app/components_sync_test.cljs | 17 +++++++++-------- frontend/test/app/shapes_test.cljs | 3 ++- 17 files changed, 61 insertions(+), 30 deletions(-) create mode 100644 common/src/app/common/colors.cljc diff --git a/common/src/app/common/colors.cljc b/common/src/app/common/colors.cljc new file mode 100644 index 000000000..fe194da31 --- /dev/null +++ b/common/src/app/common/colors.cljc @@ -0,0 +1,16 @@ +;; 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) UXBOX Labs SL + +(ns app.common.colors + (:refer-clojure :exclude [test])) + +(def black "#000000") +(def canvas "#E8E9EA") +(def default-layout "#DE4762") +(def gray-20 "#B1B2B5") +(def info "#59B9E2") +(def test "#fabada") +(def white "#FFFFFF") diff --git a/common/src/app/common/pages/common.cljc b/common/src/app/common/pages/common.cljc index d97c9f05c..46964e6d9 100644 --- a/common/src/app/common/pages/common.cljc +++ b/common/src/app/common/pages/common.cljc @@ -6,10 +6,11 @@ (ns app.common.pages.common (:require + [app.common.colors :as clr] [app.common.uuid :as uuid])) (def file-version 11) -(def default-color "#b1b2b5") ;; $color-gray-20 +(def default-color clr/gray-20) (def root uuid/zero) (def component-sync-attrs diff --git a/common/src/app/common/pages/init.cljc b/common/src/app/common/pages/init.cljc index a37584c23..ef6872968 100644 --- a/common/src/app/common/pages/init.cljc +++ b/common/src/app/common/pages/init.cljc @@ -6,6 +6,7 @@ (ns app.common.pages.init (:require + [app.common.colors :as clr] [app.common.data :as d] [app.common.exceptions :as ex] [app.common.pages.common :refer [file-version default-color]] @@ -32,7 +33,7 @@ (def default-frame-attrs {:frame-id uuid/zero - :fill-color "#ffffff" + :fill-color clr/white :fill-opacity 1 :shapes []}) @@ -44,7 +45,7 @@ :stroke-style :none :stroke-alignment :center :stroke-width 0 - :stroke-color "#000000" + :stroke-color clr/black :stroke-opacity 0 :rx 0 :ry 0} @@ -58,7 +59,7 @@ :stroke-style :none :stroke-alignment :center :stroke-width 0 - :stroke-color "#000000" + :stroke-color clr/black :stroke-opacity 0} {:type :path @@ -66,17 +67,17 @@ :stroke-style :solid :stroke-alignment :center :stroke-width 2 - :stroke-color "#000000" + :stroke-color clr/black :stroke-opacity 1} {:type :frame :name "Artboard-1" - :fill-color "#ffffff" + :fill-color clr/white :fill-opacity 1 :stroke-style :none :stroke-alignment :center :stroke-width 0 - :stroke-color "#000000" + :stroke-color clr/black :stroke-opacity 0} {:type :text diff --git a/frontend/resources/styles/common/dependencies/colors.scss b/frontend/resources/styles/common/dependencies/colors.scss index 3eb29440f..5083f2296 100644 --- a/frontend/resources/styles/common/dependencies/colors.scss +++ b/frontend/resources/styles/common/dependencies/colors.scss @@ -163,4 +163,4 @@ $color-light-bg: rgba(255,255,255,.6); // bg transparent --color-dark-bg : #{$color-dark-bg}; --color-light-bg : #{$color-light-bg}; - } \ No newline at end of file + } diff --git a/frontend/src/app/main/data/workspace/booleans.cljs b/frontend/src/app/main/data/workspace/booleans.cljs index 5c3c1af7b..4475eb61a 100644 --- a/frontend/src/app/main/data/workspace/booleans.cljs +++ b/frontend/src/app/main/data/workspace/booleans.cljs @@ -6,6 +6,7 @@ (ns app.main.data.workspace.booleans (:require + [app.common.colors :as clr] [app.common.data :as d] [app.common.geom.shapes :as gsh] [app.common.pages :as cp] @@ -35,7 +36,7 @@ head (if (= bool-type :difference) (first shapes) (last shapes)) head (cond-> head (and (contains? head :svg-attrs) (nil? (:fill-color head))) - (assoc :fill-color "#000000")) + (assoc :fill-color clr/black)) head-data (select-keys head stp/style-properties)] [(-> {:id (uuid/next) @@ -58,7 +59,7 @@ head (if (= bool-type :difference) (first shapes) (last shapes)) head (cond-> head (and (contains? head :svg-attrs) (nil? (:fill-color head))) - (assoc :fill-color "#000000")) + (assoc :fill-color clr/black)) head-data (select-keys head stp/style-properties)] (-> group diff --git a/frontend/src/app/main/data/workspace/colors.cljs b/frontend/src/app/main/data/workspace/colors.cljs index f76b288d4..9188e6523 100644 --- a/frontend/src/app/main/data/workspace/colors.cljs +++ b/frontend/src/app/main/data/workspace/colors.cljs @@ -6,6 +6,7 @@ (ns app.main.data.workspace.colors (:require + [app.common.colors :as clr] [app.common.data :as d] [app.main.data.modal :as md] [app.main.data.workspace.changes :as dch] @@ -203,7 +204,7 @@ (-> state (assoc-in [:workspace-local :picking-color?] true) (assoc ::md/modal {:id (random-uuid) - :data {:color "#000000" :opacity 1} + :data {:color clr/black :opacity 1} :type :colorpicker :props {:on-change handle-change-color} :allow-click-outside true}))))))) diff --git a/frontend/src/app/main/data/workspace/grid.cljs b/frontend/src/app/main/data/workspace/grid.cljs index ed3e2944d..3e2cde907 100644 --- a/frontend/src/app/main/data/workspace/grid.cljs +++ b/frontend/src/app/main/data/workspace/grid.cljs @@ -6,6 +6,7 @@ (ns app.main.data.workspace.grid (:require + [app.common.colors :as clr] [app.common.data :as d] [app.common.spec :as us] [app.main.data.workspace.changes :as dch] @@ -18,7 +19,7 @@ (defonce ^:private default-square-params {:size 16 - :color {:color "#59B9E2" + :color {:color clr/info :opacity 0.4}}) (defonce ^:private default-layout-params @@ -27,7 +28,7 @@ :item-length nil :gutter 8 :margin 0 - :color {:color "#DE4762" + :color {:color clr/default-layout :opacity 0.1}}) (defonce default-grid-params diff --git a/frontend/src/app/main/exports.cljs b/frontend/src/app/main/exports.cljs index 726562f4c..5917852e9 100644 --- a/frontend/src/app/main/exports.cljs +++ b/frontend/src/app/main/exports.cljs @@ -7,6 +7,7 @@ (ns app.main.exports "The main logic for SVG export functionality." (:require + [app.common.colors :as clr] [app.common.geom.align :as gal] [app.common.geom.matrix :as gmt] [app.common.geom.point :as gpt] @@ -32,7 +33,7 @@ [cuerdas.core :as str] [rumext.alpha :as mf])) -(def ^:private default-color "#E8E9EA") ;; $color-canvas +(def ^:private default-color clr/canvas) (mf/defc background [{:keys [vbox color]}] diff --git a/frontend/src/app/main/ui/shapes/text.cljs b/frontend/src/app/main/ui/shapes/text.cljs index 008bca557..77ddea023 100644 --- a/frontend/src/app/main/ui/shapes/text.cljs +++ b/frontend/src/app/main/ui/shapes/text.cljs @@ -6,6 +6,7 @@ (ns app.main.ui.shapes.text (:require + [app.common.colors :as clr] [app.common.data :as d] [app.common.geom.shapes :as geom] [app.main.ui.context :as muc] @@ -135,7 +136,7 @@ (filter some?)) colors (->> color-data - (into #{"#000000"} + (into #{clr/black} (comp (filter #(= :solid (:type %))) (map :hex)))) diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index 6d4d30642..9875e9a23 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -6,6 +6,7 @@ (ns app.main.ui.workspace.colorpicker (:require + [app.common.colors :as clr] [app.main.data.modal :as modal] [app.main.data.workspace.colors :as dc] [app.main.data.workspace.libraries :as dwl] @@ -49,7 +50,7 @@ ;; --- Color Picker Modal (defn color->components [value opacity] - (let [value (if (uc/hex? value) value "#000000") + (let [value (if (uc/hex? value) value clr/black) [r g b] (uc/hex->rgb value) [h s v] (uc/hex->hsv value)] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs index c03706b7e..a5473dd47 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs @@ -6,6 +6,7 @@ (ns app.main.ui.workspace.sidebar.options.menus.shadow (:require + [app.common.colors :as clr] [app.common.data :as d] [app.common.uuid :as uuid] [app.main.data.workspace.changes :as dch] @@ -25,7 +26,7 @@ (let [id (uuid/next)] {:id id :style :drop-shadow - :color {:color "#000000" :opacity 0.2} + :color {:color clr/black :opacity 0.2} :offset-x 4 :offset-y 4 :blur 4 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs index ee9560e62..4bbe2c22c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs @@ -6,6 +6,7 @@ (ns app.main.ui.workspace.sidebar.options.menus.stroke (:require + [app.common.colors :as clr] [app.common.data :as d] [app.common.math :as math] [app.common.pages.spec :as spec] @@ -181,7 +182,7 @@ (fn [_] (st/emit! (dch/update-shapes ids #(assoc % :stroke-style :solid - :stroke-color "#000000" + :stroke-color clr/black :stroke-opacity 1 :stroke-width 1)))) 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 42115b0b2..a031498b7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs @@ -7,6 +7,7 @@ (ns app.main.ui.workspace.sidebar.options.page "Page options menu entries." (:require + [app.common.colors :as clr] [app.main.data.workspace :as dw] [app.main.data.workspace.undo :as dwu] [app.main.refs :as refs] @@ -38,7 +39,7 @@ [:& color-row {:disable-gradient true :disable-opacity true :title (tr "workspace.options.canvas-background") - :color {:color (get options :background "#E8E9EA") + :color {:color (get options :background clr/canvas) :opacity 1} :on-change on-change :on-open on-open diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs index 5283cd811..ded7837f1 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs @@ -6,6 +6,7 @@ (ns app.main.ui.workspace.sidebar.options.shapes.svg-raw (:require + [app.common.colors :as clr] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]] @@ -64,7 +65,7 @@ (get-in shape [:content :attrs :style :stroke])) (parse-color)) - stroke-color (:color color "#000000") + stroke-color (:color color clr/black) stroke-opacity (:opacity color 1) stroke-style (-> (or (get-in shape [:content :attrs :stroke-style]) (get-in shape [:content :attrs :style :stroke-style]) diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 53d82208a..946334f57 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -6,6 +6,7 @@ (ns app.main.ui.workspace.viewport (:require + [app.common.colors :as clr] [app.common.data :as d] [app.common.geom.shapes :as gsh] [app.main.refs :as refs] @@ -65,7 +66,7 @@ objects (mf/use-memo (mf/deps objects object-modifiers) #(gsh/merge-modifiers objects object-modifiers)) - background (get options :background "#E8E9EA") + background (get options :background clr/canvas) ;; STATE alt? (mf/use-state false) diff --git a/frontend/test/app/components_sync_test.cljs b/frontend/test/app/components_sync_test.cljs index 048cea7a1..033ab60c1 100644 --- a/frontend/test/app/components_sync_test.cljs +++ b/frontend/test/app/components_sync_test.cljs @@ -1,5 +1,6 @@ (ns app.components-sync-test (:require + [app.common.colors :as clr] [app.common.data :as d] [app.common.geom.point :as gpt] [app.common.pages.helpers :as cph] @@ -24,7 +25,7 @@ (thp/sample-page) (thp/sample-shape :shape1 :rect {:name "Rect 1" - :fill-color "#ffffff" + :fill-color clr/white :fill-opacity 1}) (thp/make-component :instance1 [(thp/id :shape1)])) @@ -33,7 +34,7 @@ instance1 (thp/get-shape state :instance1) update-shape (fn [shape] - (merge shape {:fill-color "#fabada" + (merge shape {:fill-color clr/test :fill-opacity 0.5}))] (->> state @@ -50,10 +51,10 @@ file (dwlh/get-local-file new-state)] - (t/is (= (:fill-color shape1) "#fabada")) + (t/is (= (:fill-color shape1) clr/test)) (t/is (= (:fill-opacity shape1) 0.5)) (t/is (= (:touched shape1) #{:fill-group})) - (t/is (= (:fill-color c-shape1) "#ffffff")) + (t/is (= (:fill-color c-shape1) clr/white)) (t/is (= (:fill-opacity c-shape1) 1)) (t/is (= (:touched c-shape1) nil))))) @@ -74,7 +75,7 @@ (thp/sample-page) (thp/sample-shape :shape1 :rect {:name "Rect 1" - :fill-color "#ffffff" + :fill-color clr/white :fill-opacity 1}) (thp/make-component :instance1 [(thp/id :shape1)])) @@ -83,7 +84,7 @@ instance1 (thp/get-shape state :instance1) update-shape (fn [shape] - (merge shape {:fill-color "#fabada" + (merge shape {:fill-color clr/test :fill-opacity 0.5}))] (->> state @@ -104,10 +105,10 @@ file (dwlh/get-local-file new-state)] - (t/is (= (:fill-color shape1) "#ffffff")) + (t/is (= (:fill-color shape1) clr/white)) (t/is (= (:fill-opacity shape1) 1)) (t/is (= (:touched shape1) nil)) - (t/is (= (:fill-color c-shape1) "#ffffff")) + (t/is (= (:fill-color c-shape1) clr/white)) (t/is (= (:fill-opacity c-shape1) 1)) (t/is (= (:touched c-shape1) nil))))) diff --git a/frontend/test/app/shapes_test.cljs b/frontend/test/app/shapes_test.cljs index 45bf8afb7..977ec64e8 100644 --- a/frontend/test/app/shapes_test.cljs +++ b/frontend/test/app/shapes_test.cljs @@ -1,5 +1,6 @@ (ns app.shapes-test (:require + [app.common.colors :as clr] [app.common.data :as d] [app.common.geom.point :as gpt] [app.common.pages.helpers :as cph] @@ -45,7 +46,7 @@ (t/testing "asynctest" (t/async done (let [state {} - color {:color "#ffffff"}] + color {:color clr/white}] (->> state (the/do-watch-update (dwl/add-recent-color color))