Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-08 16:18:11 -05:00
Code Issues 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
Show stats 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
(: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

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

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

2
frontend/resources/styles/common/dependencies/colors.scss
View file

@ -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};
}
}

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

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

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

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

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

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

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

@ -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]}]

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

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

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

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

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
(: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

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
(: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))))

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

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
(: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])

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

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

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

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

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

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