3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-10 16:36:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Create a colors file to save constants of color that can no be refactored into sass variables

Browse source
This commit is contained in:
eva 2021-11-26 11:48:10 +01:00 • committed by Alonso Torres
parent 14b23b491f
commit 7a0c12e073
17 changed files with 61 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

16
common/src/app/common/colors.cljc Normal file
View file

@ -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")

3
common/src/app/common/pages/common.cljc
View file

@ -6,10 +6,11 @@
(ns app.common.pages.common (ns app.common.pages.common
(:require (:require
[app.common.colors :as clr]
[app.common.uuid :as uuid])) [app.common.uuid :as uuid]))
(def file-version 11) (def file-version 11)
(def default-color "#b1b2b5") ;; $color-gray-20 (def default-color clr/gray-20)
(def root uuid/zero) (def root uuid/zero)
(def component-sync-attrs (def component-sync-attrs

13
common/src/app/common/pages/init.cljc
View file

@ -6,6 +6,7 @@
(ns app.common.pages.init (ns app.common.pages.init
(:require (:require
[app.common.colors :as clr]
[app.common.data :as d] [app.common.data :as d]
[app.common.exceptions :as ex] [app.common.exceptions :as ex]
[app.common.pages.common :refer [file-version default-color]] [app.common.pages.common :refer [file-version default-color]]
@ -32,7 +33,7 @@
(def default-frame-attrs (def default-frame-attrs
{:frame-id uuid/zero {:frame-id uuid/zero
:fill-color "#ffffff" :fill-color clr/white
:fill-opacity 1 :fill-opacity 1
:shapes []}) :shapes []})
@ -44,7 +45,7 @@
:stroke-style :none :stroke-style :none
:stroke-alignment :center :stroke-alignment :center
:stroke-width 0 :stroke-width 0
:stroke-color "#000000" :stroke-color clr/black
:stroke-opacity 0 :stroke-opacity 0
:rx 0 :rx 0
:ry 0} :ry 0}
@ -58,7 +59,7 @@
:stroke-style :none :stroke-style :none
:stroke-alignment :center :stroke-alignment :center
:stroke-width 0 :stroke-width 0
:stroke-color "#000000" :stroke-color clr/black
:stroke-opacity 0} :stroke-opacity 0}
{:type :path {:type :path
@ -66,17 +67,17 @@
:stroke-style :solid :stroke-style :solid
:stroke-alignment :center :stroke-alignment :center
:stroke-width 2 :stroke-width 2
:stroke-color "#000000" :stroke-color clr/black
:stroke-opacity 1} :stroke-opacity 1}
{:type :frame {:type :frame
:name "Artboard-1" :name "Artboard-1"
:fill-color "#ffffff" :fill-color clr/white
:fill-opacity 1 :fill-opacity 1
:stroke-style :none :stroke-style :none
:stroke-alignment :center :stroke-alignment :center
:stroke-width 0 :stroke-width 0
:stroke-color "#000000" :stroke-color clr/black
:stroke-opacity 0} :stroke-opacity 0}
{:type :text {:type :text

5
frontend/src/app/main/data/workspace/booleans.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.data.workspace.booleans (ns app.main.data.workspace.booleans
(:require (:require
[app.common.colors :as clr]
[app.common.data :as d] [app.common.data :as d]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.common.pages :as cp] [app.common.pages :as cp]
@ -35,7 +36,7 @@
head (if (= bool-type :difference) (first shapes) (last shapes)) head (if (= bool-type :difference) (first shapes) (last shapes))
head (cond-> head head (cond-> head
(and (contains? head :svg-attrs) (nil? (:fill-color 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)] head-data (select-keys head stp/style-properties)]
[(-> {:id (uuid/next) [(-> {:id (uuid/next)
@ -58,7 +59,7 @@
head (if (= bool-type :difference) (first shapes) (last shapes)) head (if (= bool-type :difference) (first shapes) (last shapes))
head (cond-> head head (cond-> head
(and (contains? head :svg-attrs) (nil? (:fill-color 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)] head-data (select-keys head stp/style-properties)]
(-> group (-> group

3
frontend/src/app/main/data/workspace/colors.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.data.workspace.colors (ns app.main.data.workspace.colors
(:require (:require
[app.common.colors :as clr]
[app.common.data :as d] [app.common.data :as d]
[app.main.data.modal :as md] [app.main.data.modal :as md]
[app.main.data.workspace.changes :as dch] [app.main.data.workspace.changes :as dch]
@ -203,7 +204,7 @@
(-> state (-> state
(assoc-in [:workspace-local :picking-color?] true) (assoc-in [:workspace-local :picking-color?] true)
(assoc ::md/modal {:id (random-uuid) (assoc ::md/modal {:id (random-uuid)
:data {:color "#000000" :opacity 1} :data {:color clr/black :opacity 1}
:type :colorpicker :type :colorpicker
:props {:on-change handle-change-color} :props {:on-change handle-change-color}
:allow-click-outside true}))))))) :allow-click-outside true})))))))

5
frontend/src/app/main/data/workspace/grid.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.data.workspace.grid (ns app.main.data.workspace.grid
(:require (:require
[app.common.colors :as clr]
[app.common.data :as d] [app.common.data :as d]
[app.common.spec :as us] [app.common.spec :as us]
[app.main.data.workspace.changes :as dch] [app.main.data.workspace.changes :as dch]
@ -18,7 +19,7 @@
(defonce ^:private default-square-params (defonce ^:private default-square-params
{:size 16 {:size 16
:color {:color "#59B9E2" :color {:color clr/info
:opacity 0.4}}) :opacity 0.4}})
(defonce ^:private default-layout-params (defonce ^:private default-layout-params
@ -27,7 +28,7 @@
:item-length nil :item-length nil
:gutter 8 :gutter 8
:margin 0 :margin 0
:color {:color "#DE4762" :color {:color clr/default-layout
:opacity 0.1}}) :opacity 0.1}})
(defonce default-grid-params (defonce default-grid-params

3
frontend/src/app/main/exports.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.exports (ns app.main.exports
"The main logic for SVG export functionality." "The main logic for SVG export functionality."
(:require (:require
[app.common.colors :as clr]
[app.common.geom.align :as gal] [app.common.geom.align :as gal]
[app.common.geom.matrix :as gmt] [app.common.geom.matrix :as gmt]
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
@ -32,7 +33,7 @@
[cuerdas.core :as str] [cuerdas.core :as str]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(def ^:private default-color "#E8E9EA") ;; $color-canvas (def ^:private default-color clr/canvas)
(mf/defc background (mf/defc background
[{:keys [vbox color]}] [{:keys [vbox color]}]

3
frontend/src/app/main/ui/shapes/text.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.ui.shapes.text (ns app.main.ui.shapes.text
(:require (:require
[app.common.colors :as clr]
[app.common.data :as d] [app.common.data :as d]
[app.common.geom.shapes :as geom] [app.common.geom.shapes :as geom]
[app.main.ui.context :as muc] [app.main.ui.context :as muc]
@ -135,7 +136,7 @@
(filter some?)) (filter some?))
colors (->> color-data colors (->> color-data
(into #{"#000000"} (into #{clr/black}
(comp (filter #(= :solid (:type %))) (comp (filter #(= :solid (:type %)))
(map :hex)))) (map :hex))))

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

@ -6,6 +6,7 @@
(ns app.main.ui.workspace.colorpicker (ns app.main.ui.workspace.colorpicker
(:require (:require
[app.common.colors :as clr]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.workspace.colors :as dc] [app.main.data.workspace.colors :as dc]
[app.main.data.workspace.libraries :as dwl] [app.main.data.workspace.libraries :as dwl]
@ -49,7 +50,7 @@
;; --- Color Picker Modal ;; --- Color Picker Modal
(defn color->components [value opacity] (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) [r g b] (uc/hex->rgb value)
[h s v] (uc/hex->hsv value)] [h s v] (uc/hex->hsv value)]

3
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.ui.workspace.sidebar.options.menus.shadow (ns app.main.ui.workspace.sidebar.options.menus.shadow
(:require (:require
[app.common.colors :as clr]
[app.common.data :as d] [app.common.data :as d]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.main.data.workspace.changes :as dch] [app.main.data.workspace.changes :as dch]
@ -25,7 +26,7 @@
(let [id (uuid/next)] (let [id (uuid/next)]
{:id id {:id id
:style :drop-shadow :style :drop-shadow
:color {:color "#000000" :opacity 0.2} :color {:color clr/black :opacity 0.2}
:offset-x 4 :offset-x 4
:offset-y 4 :offset-y 4
:blur 4 :blur 4

3
frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.ui.workspace.sidebar.options.menus.stroke (ns app.main.ui.workspace.sidebar.options.menus.stroke
(:require (:require
[app.common.colors :as clr]
[app.common.data :as d] [app.common.data :as d]
[app.common.math :as math] [app.common.math :as math]
[app.common.pages.spec :as spec] [app.common.pages.spec :as spec]
@ -181,7 +182,7 @@
(fn [_] (fn [_]
(st/emit! (dch/update-shapes ids #(assoc % (st/emit! (dch/update-shapes ids #(assoc %
:stroke-style :solid :stroke-style :solid
:stroke-color "#000000" :stroke-color clr/black
:stroke-opacity 1 :stroke-opacity 1
:stroke-width 1)))) :stroke-width 1))))

3
frontend/src/app/main/ui/workspace/sidebar/options/page.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.ui.workspace.sidebar.options.page (ns app.main.ui.workspace.sidebar.options.page
"Page options menu entries." "Page options menu entries."
(:require (:require
[app.common.colors :as clr]
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
[app.main.data.workspace.undo :as dwu] [app.main.data.workspace.undo :as dwu]
[app.main.refs :as refs] [app.main.refs :as refs]
@ -38,7 +39,7 @@
[:& color-row {:disable-gradient true [:& color-row {:disable-gradient true
:disable-opacity true :disable-opacity true
:title (tr "workspace.options.canvas-background") :title (tr "workspace.options.canvas-background")
:color {:color (get options :background "#E8E9EA") :color {:color (get options :background clr/canvas)
:opacity 1} :opacity 1}
:on-change on-change :on-change on-change
:on-open on-open :on-open on-open

3
frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.ui.workspace.sidebar.options.shapes.svg-raw (ns app.main.ui.workspace.sidebar.options.shapes.svg-raw
(:require (:require
[app.common.colors :as clr]
[app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] [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.constraints :refer [constraint-attrs constraints-menu]]
[app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-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])) (get-in shape [:content :attrs :style :stroke]))
(parse-color)) (parse-color))
stroke-color (:color color "#000000") stroke-color (:color color clr/black)
stroke-opacity (:opacity color 1) stroke-opacity (:opacity color 1)
stroke-style (-> (or (get-in shape [:content :attrs :stroke-style]) stroke-style (-> (or (get-in shape [:content :attrs :stroke-style])
(get-in shape [:content :attrs :style :stroke-style]) (get-in shape [:content :attrs :style :stroke-style])

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

@ -6,6 +6,7 @@
(ns app.main.ui.workspace.viewport (ns app.main.ui.workspace.viewport
(:require (:require
[app.common.colors :as clr]
[app.common.data :as d] [app.common.data :as d]
[app.common.geom.shapes :as gsh] [app.common.geom.shapes :as gsh]
[app.main.refs :as refs] [app.main.refs :as refs]
@ -65,7 +66,7 @@
objects (mf/use-memo objects (mf/use-memo
(mf/deps objects object-modifiers) (mf/deps objects object-modifiers)
#(gsh/merge-modifiers objects object-modifiers)) #(gsh/merge-modifiers objects object-modifiers))
background (get options :background "#E8E9EA") background (get options :background clr/canvas)
;; STATE ;; STATE
alt? (mf/use-state false) alt? (mf/use-state false)

17
frontend/test/app/components_sync_test.cljs
View file

@ -1,5 +1,6 @@
(ns app.components-sync-test (ns app.components-sync-test
(:require (:require
[app.common.colors :as clr]
[app.common.data :as d] [app.common.data :as d]
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.pages.helpers :as cph] [app.common.pages.helpers :as cph]
@ -24,7 +25,7 @@
(thp/sample-page) (thp/sample-page)
(thp/sample-shape :shape1 :rect (thp/sample-shape :shape1 :rect
{:name "Rect 1" {:name "Rect 1"
:fill-color "#ffffff" :fill-color clr/white
:fill-opacity 1}) :fill-opacity 1})
(thp/make-component :instance1 (thp/make-component :instance1
[(thp/id :shape1)])) [(thp/id :shape1)]))
@ -33,7 +34,7 @@
instance1 (thp/get-shape state :instance1) instance1 (thp/get-shape state :instance1)
update-shape (fn [shape] update-shape (fn [shape]
(merge shape {:fill-color "#fabada" (merge shape {:fill-color clr/test
:fill-opacity 0.5}))] :fill-opacity 0.5}))]
(->> state (->> state
@ -50,10 +51,10 @@
file (dwlh/get-local-file new-state)] 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 (= (:fill-opacity shape1) 0.5))
(t/is (= (:touched shape1) #{:fill-group})) (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 (= (:fill-opacity c-shape1) 1))
(t/is (= (:touched c-shape1) nil))))) (t/is (= (:touched c-shape1) nil)))))
@ -74,7 +75,7 @@
(thp/sample-page) (thp/sample-page)
(thp/sample-shape :shape1 :rect (thp/sample-shape :shape1 :rect
{:name "Rect 1" {:name "Rect 1"
:fill-color "#ffffff" :fill-color clr/white
:fill-opacity 1}) :fill-opacity 1})
(thp/make-component :instance1 (thp/make-component :instance1
[(thp/id :shape1)])) [(thp/id :shape1)]))
@ -83,7 +84,7 @@
instance1 (thp/get-shape state :instance1) instance1 (thp/get-shape state :instance1)
update-shape (fn [shape] update-shape (fn [shape]
(merge shape {:fill-color "#fabada" (merge shape {:fill-color clr/test
:fill-opacity 0.5}))] :fill-opacity 0.5}))]
(->> state (->> state
@ -104,10 +105,10 @@
file (dwlh/get-local-file new-state)] 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 (= (:fill-opacity shape1) 1))
(t/is (= (:touched shape1) nil)) (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 (= (:fill-opacity c-shape1) 1))
(t/is (= (:touched c-shape1) nil))))) (t/is (= (:touched c-shape1) nil)))))

3
frontend/test/app/shapes_test.cljs
View file

@ -1,5 +1,6 @@
(ns app.shapes-test (ns app.shapes-test
(:require (:require
[app.common.colors :as clr]
[app.common.data :as d] [app.common.data :as d]
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.pages.helpers :as cph] [app.common.pages.helpers :as cph]
@ -45,7 +46,7 @@
(t/testing "asynctest" (t/testing "asynctest"
(t/async done (t/async done
(let [state {} (let [state {}
color {:color "#ffffff"}] color {:color clr/white}]
(->> state (->> state
(the/do-watch-update (the/do-watch-update
(dwl/add-recent-color color)) (dwl/add-recent-color color))