3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-21 01:27:00 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ use those new css variables in our cljs files

Browse source
This commit is contained in:
eva 2021-11-25 17:23:25 +01:00 • committed by Alonso Torres
parent 039b03249b
commit 14b23b491f
22 changed files with 59 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

3
CHANGES.md
View file

@ -4,6 +4,9 @@
### :boom: Breaking changes ### :boom: Breaking changes
### :sparkles: New features ### :sparkles: New features
- Add contrast between component select color and shape select color [Taiga #2121](https://tree.taiga.io/project/penpot/issue/2121).
### :bug: Bugs fixed ### :bug: Bugs fixed
- Fix masked group resize strange behavior [Taiga #2317](https://tree.taiga.io/project/penpot/issue/2317). - Fix masked group resize strange behavior [Taiga #2317](https://tree.taiga.io/project/penpot/issue/2317).

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

@ -106,7 +106,7 @@ $color-light-bg: rgba(255,255,255,.6);
--color-info: #{$color-info}; --color-info: #{$color-info};
--color-ocean: #{$color-ocean}; --color-ocean: #{$color-ocean};
--color-component: #{$color-component}; --color-component: #{$color-component};
--color-component-highlinght: #{$color-component-highlight}; --color-component-highlight: #{$color-component-highlight};
--color-pink: #{$color-pink}; --color-pink: #{$color-pink};
// Gray scale; // Gray scale;

4
frontend/src/app/main/constants.cljs
View file

@ -19,9 +19,9 @@
"Default data for page metadata." "Default data for page metadata."
{:grid-x-axis grid-x-axis {:grid-x-axis grid-x-axis
:grid-y-axis grid-y-axis :grid-y-axis grid-y-axis
:grid-color "#cccccc" :grid-color "var(--color-gray-20)"
:grid-alignment true :grid-alignment true
:background "#ffffff"}) :background "var(--color-white)"})
(def zoom-levels (def zoom-levels
[0.01 0.03 0.05 0.07 0.09 0.10 0.11 0.13 0.15 0.18 [0.01 0.03 0.05 0.07 0.09 0.10 0.11 0.13 0.15 0.18

2
frontend/src/app/main/data/workspace/notifications.cljs
View file

@ -152,7 +152,7 @@
(remove nil?)) (remove nil?))
used (into #{} xfm presence) used (into #{} xfm presence)
avail (set/difference presence-palette used)] avail (set/difference presence-palette used)]
(or (first avail) "#000000"))) (or (first avail) "var(--color-black)")))
(update-color [color presence] (update-color [color presence]
(if (some? color) (if (some? color)

14
frontend/src/app/main/ui/measurements.cljs
View file

@ -21,23 +21,23 @@
(def font-size 10) (def font-size 10)
(def selection-rect-width 1) (def selection-rect-width 1)
(def select-color "#1FDEA7") (def select-color "var(--color-select)")
(def select-guide-width 1) (def select-guide-width 1)
(def select-guide-dasharray 5) (def select-guide-dasharray 5)
(def hover-color "#DB00FF") (def hover-color "var(--color-distance)")
(def hover-color-text "#FFF") (def hover-color-text "var(--color-white)")
(def hover-guide-width 1) (def hover-guide-width 1)
(def size-display-color "#FFF") (def size-display-color "var(--color-white)")
(def size-display-opacity 0.7) (def size-display-opacity 0.7)
(def size-display-text-color "#000") (def size-display-text-color "var(--color-black)")
(def size-display-width-min 50) (def size-display-width-min 50)
(def size-display-width-max 75) (def size-display-width-max 75)
(def size-display-height 16) (def size-display-height 16)
(def distance-color "#DB00FF") (def distance-color "var(--color-distance)")
(def distance-text-color "#FFF") (def distance-text-color "var(--color-white)")
(def distance-border-radius 2) (def distance-border-radius 2)
(def distance-pill-width 40) (def distance-pill-width 40)
(def distance-pill-height 16) (def distance-pill-height 16)

2
frontend/src/app/main/ui/viewer/handoff/selection_feedback.cljs
View file

@ -14,7 +14,7 @@
;; CONSTANTS ;; CONSTANTS
;; ------------------------------------------------ ;; ------------------------------------------------
(def select-color "#1FDEA7") (def select-color "var(--color-select)")
(def selection-rect-width 1) (def selection-rect-width 1)
(def select-guide-width 1) (def select-guide-width 1)
(def select-guide-dasharray 5) (def select-guide-dasharray 5)

4
frontend/src/app/main/ui/viewer/shapes.cljs
View file

@ -196,8 +196,8 @@
:y (- y 1) :y (- y 1)
:width (+ width 2) :width (+ width 2)
:height (+ height 2) :height (+ height 2)
:fill "#31EFB8" :fill "var(--color-primary)"
:stroke "#31EFB8" :stroke "var(--color-primary)"
:stroke-width (if interactions-show? 1 0) :stroke-width (if interactions-show? 1 0)
:fill-opacity (if interactions-show? 0.2 0) :fill-opacity (if interactions-show? 0.2 0)
:style {:pointer-events (when frame? "none")} :style {:pointer-events (when frame? "none")}

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

@ -38,8 +38,8 @@
(.stroke ctx))) (.stroke ctx)))
(let [grd (.createRadialGradient ctx cx cy 0 cx cx radius)] (let [grd (.createRadialGradient ctx cx cy 0 cx cx radius)]
(.addColorStop grd 0 "white") (.addColorStop grd 0 "rgba(255, 255, 255, 1)")
(.addColorStop grd 1 "rgba(255, 255, 255, 0") (.addColorStop grd 1 "rgba(255, 255, 255, 0)")
(obj/set! ctx "fillStyle" grd) (obj/set! ctx "fillStyle" grd)
(.beginPath ctx) (.beginPath ctx)

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

@ -81,11 +81,11 @@
[:div.selected-colors [:div.selected-colors
(when (= selected-library :file) (when (= selected-library :file)
[:div.color-bullet.button.plus-button {:style {:background-color "white"} [:div.color-bullet.button.plus-button {:style {:background-color "var(--color-white)"}
:on-click on-add-library-color} :on-click on-add-library-color}
i/plus]) i/plus])
[:div.color-bullet.button {:style {:background-color "white"} [:div.color-bullet.button {:style {:background-color "var(--color-white)"}
:on-click #(st/emit! (dc/show-palette selected-library))} :on-click #(st/emit! (dc/show-palette selected-library))}
i/palette] i/palette]

4
frontend/src/app/main/ui/workspace/rules.cljs
View file

@ -47,8 +47,8 @@
(.translate dctx 0 txfm)) (.translate dctx 0 txfm))
(obj/set! dctx "font" "12px worksans") (obj/set! dctx "font" "12px worksans")
(obj/set! dctx "fillStyle" "#7B7D85") (obj/set! dctx "fillStyle" "var(--color-gray-30)")
(obj/set! dctx "strokeStyle" "#7B7D85") (obj/set! dctx "strokeStyle" "var(--color-gray-30)")
(obj/set! dctx "textAlign" "center") (obj/set! dctx "textAlign" "center")
(loop [i minv] (loop [i minv]

2
frontend/src/app/main/ui/workspace/shapes/bounding_box.cljs
View file

@ -65,7 +65,7 @@
:y (- (:y bounding-box) 5) :y (- (:y bounding-box) 5)
:font-size 10 :font-size 10
:fill line-color :fill line-color
:stroke "white" :stroke "var(--color-white)"
:stroke-width 0.1} :stroke-width 0.1}
(str/format "%s - (%s, %s)" (str/slice (str (:id shape)) 0 8) (fixed (:x bounding-box)) (fixed (:y bounding-box)))] (str/format "%s - (%s, %s)" (str/slice (str (:id shape)) 0 8) (fixed (:x bounding-box)) (fixed (:y bounding-box)))]

10
frontend/src/app/main/ui/workspace/shapes/path/common.cljs
View file

@ -10,11 +10,11 @@
[okulary.core :as l] [okulary.core :as l]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(def primary-color "#1FDEA7") (def primary-color "var(--color-select)")
(def secondary-color "#DB00FF") (def secondary-color "var(--color-distance)")
(def black-color "#000000") (def black-color "var(--color-black)")
(def white-color "#FFFFFF") (def white-color "var(--color-white)")
(def gray-color "#B1B2B5") (def gray-color "var(--color-gray-20)")
(def current-edit-path-ref (def current-edit-path-ref
(let [selfn (fn [local] (let [selfn (fn [local]

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

@ -39,7 +39,7 @@
[:rect.main {:x x :y y [:rect.main {:x x :y y
:width width :width width
:height height :height height
:style {:stroke "#1FDEA7" :style {:stroke "var(--color-select)"
:fill "none" :fill "none"
:stroke-width (/ 1 zoom)}}]))) :stroke-width (/ 1 zoom)}}])))

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

@ -22,14 +22,14 @@
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(def gradient-line-stroke-width 2) (def gradient-line-stroke-width 2)
(def gradient-line-stroke-color "white") (def gradient-line-stroke-color "var(--color-white)")
(def gradient-square-width 15) (def gradient-square-width 15)
(def gradient-square-radius 2) (def gradient-square-radius 2)
(def gradient-square-stroke-width 2) (def gradient-square-stroke-width 2)
(def gradient-width-handler-radius 5) (def gradient-width-handler-radius 5)
(def gradient-width-handler-color "white") (def gradient-width-handler-color "var(--color-white)")
(def gradient-square-stroke-color "white") (def gradient-square-stroke-color "var(--color-white)")
(def gradient-square-stroke-color-selected "#1FDEA7") (def gradient-square-stroke-color-selected "var(--color-select)")
(def editing-spot-ref (def editing-spot-ref
(l/derived (l/in [:workspace-local :editing-stop]) st/state)) (l/derived (l/in [:workspace-local :editing-stop]) st/state))
@ -115,7 +115,7 @@
:rx (/ gradient-square-radius zoom) :rx (/ gradient-square-radius zoom)
:width (/ gradient-square-width zoom) :width (/ gradient-square-width zoom)
:height (/ gradient-square-width zoom) :height (/ gradient-square-width zoom)
:stroke (if selected "#31EFB8" "white") :stroke (if selected "var(--color-primary)" "var(--color-white)")
:stroke-width (/ gradient-square-stroke-width zoom) :stroke-width (/ gradient-square-stroke-width zoom)
:fill (:value color) :fill (:value color)
:fill-opacity (:opacity color) :fill-opacity (:opacity color)

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

@ -116,7 +116,7 @@
(when icon-pdata (when icon-pdata
[:path {:fill stroke [:path {:fill stroke
:stroke-width 2 :stroke-width 2
:stroke "#FFFFFF" :stroke "var(--color-white)"
:d icon-pdata :d icon-pdata
:transform (str :transform (str
"scale(" inv-zoom ", " inv-zoom ") " "scale(" inv-zoom ", " inv-zoom ") "
@ -149,7 +149,7 @@
(if-not selected? (if-not selected?
[:g {:on-mouse-down #(on-mouse-down % index orig-shape)} [:g {:on-mouse-down #(on-mouse-down % index orig-shape)}
[:path {:stroke "#B1B2B5" [:path {:stroke "var(--color-gray-20)"
:fill "none" :fill "none"
:pointer-events "visible" :pointer-events "visible"
:stroke-width (/ 2 zoom) :stroke-width (/ 2 zoom)
@ -158,13 +158,13 @@
[:& interaction-marker {:index index [:& interaction-marker {:index index
:x dest-x :x dest-x
:y dest-y :y dest-y
:stroke "#B1B2B5" :stroke "var(--color-gray-20)"
:action-type action-type :action-type action-type
:arrow-dir arrow-dir :arrow-dir arrow-dir
:zoom zoom}])] :zoom zoom}])]
[:g {:on-mouse-down #(on-mouse-down % index orig-shape)} [:g {:on-mouse-down #(on-mouse-down % index orig-shape)}
[:path {:stroke "#31EFB8" [:path {:stroke "var(--color-primary)"
:fill "none" :fill "none"
:pointer-events "visible" :pointer-events "visible"
:stroke-width (/ 2 zoom) :stroke-width (/ 2 zoom)
@ -172,17 +172,17 @@
(when dest-shape (when dest-shape
[:& outline {:shape dest-shape [:& outline {:shape dest-shape
:color "#31EFB8"}]) :color "var(--color-primary)"}])
[:& interaction-marker {:index index [:& interaction-marker {:index index
:x orig-x :x orig-x
:y orig-y :y orig-y
:stroke "#31EFB8" :stroke "var(--color-primary)"
:zoom zoom}] :zoom zoom}]
[:& interaction-marker {:index index [:& interaction-marker {:index index
:x dest-x :x dest-x
:y dest-y :y dest-y
:stroke "#31EFB8" :stroke "var(--color-primary)"
:action-type action-type :action-type action-type
:arrow-dir arrow-dir :arrow-dir arrow-dir
:zoom zoom}]]))) :zoom zoom}]])))
@ -196,7 +196,7 @@
[:g {:on-mouse-down #(on-mouse-down % index shape)} [:g {:on-mouse-down #(on-mouse-down % index shape)}
[:& interaction-marker {:x handle-x [:& interaction-marker {:x handle-x
:y handle-y :y handle-y
:stroke "#31EFB8" :stroke "var(--color-primary)"
:action-type :navigate :action-type :navigate
:arrow-dir :right :arrow-dir :right
:zoom zoom}]])) :zoom zoom}]]))
@ -217,8 +217,8 @@
[:g {:on-mouse-down start-move-position [:g {:on-mouse-down start-move-position
:on-mouse-enter #(reset! hover-disabled? true) :on-mouse-enter #(reset! hover-disabled? true)
:on-mouse-leave #(reset! hover-disabled? false)} :on-mouse-leave #(reset! hover-disabled? false)}
[:path {:stroke "#31EFB8" [:path {:stroke "var(--color-primary)"
:fill "#000000" :fill "var(--color-black)"
:fill-opacity 0.3 :fill-opacity 0.3
:stroke-width 1 :stroke-width 1
:d (str "M" marker-x " " marker-y " " :d (str "M" marker-x " " marker-y " "
@ -232,7 +232,7 @@
[:circle {:cx (+ marker-x (/ width 2)) [:circle {:cx (+ marker-x (/ width 2))
:cy (+ marker-y (/ height 2)) :cy (+ marker-y (/ height 2))
:r 8 :r 8
:fill "#31EFB8"}]])))) :fill "var(--color-primary)"}]]))))
(mf/defc interactions (mf/defc interactions
[{:keys [selected hover-disabled?] :as props}] [{:keys [selected hover-disabled?] :as props}]

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

@ -67,7 +67,7 @@
(let [shapes (obj/get props "shapes") (let [shapes (obj/get props "shapes")
zoom (obj/get props "zoom") zoom (obj/get props "zoom")
color (if (or (> (count shapes) 1) (nil? (:shape-ref (first shapes)))) color (if (or (> (count shapes) 1) (nil? (:shape-ref (first shapes))))
"#31EFB8" "#00E0FF")] "var(--color-primary)" "var(--color-component-highlight)")]
(for [shape shapes] (for [shape shapes]
[:& outline {:key (str "outline-" (:id shape)) [:& outline {:key (str "outline-" (:id shape))
:shape (gsh/transform-shape shape) :shape (gsh/transform-shape shape)

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

@ -22,7 +22,7 @@
[{:keys [session profile] :as props}] [{:keys [session profile] :as props}]
(let [zoom (mf/deref refs/selected-zoom) (let [zoom (mf/deref refs/selected-zoom)
point (:point session) point (:point session)
color (:color session "#000000") color (:color session "var(--color-black)")
transform (str/fmt "translate(%s, %s) scale(%s)" (:x point) (:y point) (/ 4 zoom))] transform (str/fmt "translate(%s, %s) scale(%s)" (:x point) (:y point) (/ 4 zoom))]
[:g.multiuser-cursor {:transform transform} [:g.multiuser-cursor {:transform transform}
[:path {:fill color [:path {:fill color
@ -43,7 +43,7 @@
:width 25 :width 25
:height 5 :height 5
:overflow "hidden" :overflow "hidden"
:fill "#fff" :fill "var(--color-white)"
:stroke-width 1 :stroke-width 1
:font-family "Works Sans" :font-family "Works Sans"
:font-size 3 :font-size 3

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

@ -27,8 +27,8 @@
(def resize-point-circle-radius 10) (def resize-point-circle-radius 10)
(def resize-point-rect-size 8) (def resize-point-rect-size 8)
(def resize-side-height 8) (def resize-side-height 8)
(def selection-rect-color-normal "#1FDEA7") (def selection-rect-color-normal "var(--color-select)")
(def selection-rect-color-component "#00E0FF") (def selection-rect-color-component "var(--color-component-highlight)")
(def selection-rect-width 1) (def selection-rect-width 1)
(def min-selrect-side 10) (def min-selrect-side 10)
(def small-selrect-side 30) (def small-selrect-side 30)
@ -149,7 +149,7 @@
:style {:fillOpacity "1" :style {:fillOpacity "1"
:strokeWidth "1px" :strokeWidth "1px"
:vectorEffect "non-scaling-stroke"} :vectorEffect "non-scaling-stroke"}
:fill "#FFFFFF" :fill "var(--color-white)"
:stroke (if (and (= position :bottom-right) overflow-text) "red" color) :stroke (if (and (= position :bottom-right) overflow-text) "red" color)
:cx cx' :cx cx'
:cy cy'}] :cy cy'}]

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

@ -17,7 +17,7 @@
[cuerdas.core :as str] [cuerdas.core :as str]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(def ^:private line-color "#D383DA") (def ^:private line-color "var(--color-snap)")
(def ^:private segment-gap 2) (def ^:private segment-gap 2)
(def ^:private segment-gap-side 5) (def ^:private segment-gap-side 5)
@ -79,7 +79,7 @@
[:text {:x (if (= coord :x) x (+ x (/ width 2))) [:text {:x (if (= coord :x) x (+ x (/ width 2)))
:y (- (+ y (/ (/ pill-text-height zoom) 2) (- (/ 6 zoom))) (if (= coord :x) (/ 2 zoom) 0)) :y (- (+ y (/ (/ pill-text-height zoom) 2) (- (/ 6 zoom))) (if (= coord :x) (/ 2 zoom) 0))
:font-size (/ pill-text-font-size zoom) :font-size (/ pill-text-font-size zoom)
:fill "white" :fill "var(--color-white)"
:text-anchor "middle"} :text-anchor "middle"}
(mth/precision distance 0)]]) (mth/precision distance 0)]])

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

@ -15,7 +15,7 @@
[beicon.core :as rx] [beicon.core :as rx]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(def ^:private line-color "#D383DA") (def ^:private line-color "var(--color-snap)")
(def ^:private line-opacity 0.6) (def ^:private line-opacity 0.6)
(def ^:private line-width 1) (def ^:private line-width 1)

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

@ -31,7 +31,7 @@
:pattern-units "userSpaceOnUse"} :pattern-units "userSpaceOnUse"}
[:path {:d "M 1 0 L 0 0 0 1" [:path {:d "M 1 0 L 0 0 0 1"
:style {:fill "none" :style {:fill "none"
:stroke "#59B9E2" :stroke "var(--color-info)"
:stroke-opacity "0.2" :stroke-opacity "0.2"
:stroke-width (str (/ 1 zoom))}}]]] :stroke-width (str (/ 1 zoom))}}]]]
[:rect {:x (:x vbox) [:rect {:x (:x vbox)
@ -130,7 +130,7 @@
:transform (str (when (and selected? modifiers) :transform (str (when (and selected? modifiers)
(str (:displacement modifiers) " " )) (str (:displacement modifiers) " " ))
(text-transform label-pos zoom)) (text-transform label-pos zoom))
:style {:fill (when selected? "#28c295")} :style {:fill (when selected? "var(--color-primary-dark)")}
:on-mouse-down on-mouse-down :on-mouse-down on-mouse-down
:on-double-click on-double-click :on-double-click on-double-click
:on-pointer-enter on-pointer-enter :on-pointer-enter on-pointer-enter

4
frontend/src/app/util/avatars.cljs
View file

@ -11,7 +11,7 @@
(defn generate* (defn generate*
[{:keys [name color size] [{:keys [name color size]
:or {color "#000000" size 128}}] :or {color "var(--color-black)" size 128}}]
(let [parts (str/words (str/upper name)) (let [parts (str/words (str/upper name))
letters (if (= 1 (count parts)) letters (if (= 1 (count parts))
(ffirst parts) (ffirst parts)
@ -27,7 +27,7 @@
(obj/set! context "font" (str (/ size 2) "px Arial")) (obj/set! context "font" (str (/ size 2) "px Arial"))
(obj/set! context "textAlign" "center") (obj/set! context "textAlign" "center")
(obj/set! context "fillStyle" "#FFFFFF") (obj/set! context "fillStyle" "var(--color-white)")
(.fillText context letters (/ size 2) (/ size 1.5)) (.fillText context letters (/ size 2) (/ size 1.5))
(.toDataURL canvas))) (.toDataURL canvas)))