diff --git a/CHANGES.md b/CHANGES.md
index e54f0d72e..2db343ce9 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -4,6 +4,9 @@
### :boom: Breaking changes
### :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
- Fix masked group resize strange behavior [Taiga #2317](https://tree.taiga.io/project/penpot/issue/2317).
diff --git a/frontend/resources/styles/common/dependencies/colors.scss b/frontend/resources/styles/common/dependencies/colors.scss
index ff9fafecf..3eb29440f 100644
--- a/frontend/resources/styles/common/dependencies/colors.scss
+++ b/frontend/resources/styles/common/dependencies/colors.scss
@@ -106,7 +106,7 @@ $color-light-bg: rgba(255,255,255,.6);
--color-info: #{$color-info};
--color-ocean: #{$color-ocean};
--color-component: #{$color-component};
- --color-component-highlinght: #{$color-component-highlight};
+ --color-component-highlight: #{$color-component-highlight};
--color-pink: #{$color-pink};
// Gray scale;
diff --git a/frontend/src/app/main/constants.cljs b/frontend/src/app/main/constants.cljs
index 86c922f7f..84393c171 100644
--- a/frontend/src/app/main/constants.cljs
+++ b/frontend/src/app/main/constants.cljs
@@ -19,9 +19,9 @@
"Default data for page metadata."
{:grid-x-axis grid-x-axis
:grid-y-axis grid-y-axis
- :grid-color "#cccccc"
+ :grid-color "var(--color-gray-20)"
:grid-alignment true
- :background "#ffffff"})
+ :background "var(--color-white)"})
(def zoom-levels
[0.01 0.03 0.05 0.07 0.09 0.10 0.11 0.13 0.15 0.18
diff --git a/frontend/src/app/main/data/workspace/notifications.cljs b/frontend/src/app/main/data/workspace/notifications.cljs
index aa90ee6a4..6775a0e31 100644
--- a/frontend/src/app/main/data/workspace/notifications.cljs
+++ b/frontend/src/app/main/data/workspace/notifications.cljs
@@ -152,7 +152,7 @@
(remove nil?))
used (into #{} xfm presence)
avail (set/difference presence-palette used)]
- (or (first avail) "#000000")))
+ (or (first avail) "var(--color-black)")))
(update-color [color presence]
(if (some? color)
diff --git a/frontend/src/app/main/ui/measurements.cljs b/frontend/src/app/main/ui/measurements.cljs
index 4fc319c1f..6d642443f 100644
--- a/frontend/src/app/main/ui/measurements.cljs
+++ b/frontend/src/app/main/ui/measurements.cljs
@@ -21,23 +21,23 @@
(def font-size 10)
(def selection-rect-width 1)
-(def select-color "#1FDEA7")
+(def select-color "var(--color-select)")
(def select-guide-width 1)
(def select-guide-dasharray 5)
-(def hover-color "#DB00FF")
-(def hover-color-text "#FFF")
+(def hover-color "var(--color-distance)")
+(def hover-color-text "var(--color-white)")
(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-text-color "#000")
+(def size-display-text-color "var(--color-black)")
(def size-display-width-min 50)
(def size-display-width-max 75)
(def size-display-height 16)
-(def distance-color "#DB00FF")
-(def distance-text-color "#FFF")
+(def distance-color "var(--color-distance)")
+(def distance-text-color "var(--color-white)")
(def distance-border-radius 2)
(def distance-pill-width 40)
(def distance-pill-height 16)
diff --git a/frontend/src/app/main/ui/viewer/handoff/selection_feedback.cljs b/frontend/src/app/main/ui/viewer/handoff/selection_feedback.cljs
index 51fb68ce4..f0ee419c2 100644
--- a/frontend/src/app/main/ui/viewer/handoff/selection_feedback.cljs
+++ b/frontend/src/app/main/ui/viewer/handoff/selection_feedback.cljs
@@ -14,7 +14,7 @@
;; CONSTANTS
;; ------------------------------------------------
-(def select-color "#1FDEA7")
+(def select-color "var(--color-select)")
(def selection-rect-width 1)
(def select-guide-width 1)
(def select-guide-dasharray 5)
diff --git a/frontend/src/app/main/ui/viewer/shapes.cljs b/frontend/src/app/main/ui/viewer/shapes.cljs
index 53a574ea0..d0381baa6 100644
--- a/frontend/src/app/main/ui/viewer/shapes.cljs
+++ b/frontend/src/app/main/ui/viewer/shapes.cljs
@@ -196,8 +196,8 @@
:y (- y 1)
:width (+ width 2)
:height (+ height 2)
- :fill "#31EFB8"
- :stroke "#31EFB8"
+ :fill "var(--color-primary)"
+ :stroke "var(--color-primary)"
:stroke-width (if interactions-show? 1 0)
:fill-opacity (if interactions-show? 0.2 0)
:style {:pointer-events (when frame? "none")}
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs b/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs
index ca17d1ede..69247a2d0 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs
@@ -38,8 +38,8 @@
(.stroke ctx)))
(let [grd (.createRadialGradient ctx cx cy 0 cx cx radius)]
- (.addColorStop grd 0 "white")
- (.addColorStop grd 1 "rgba(255, 255, 255, 0")
+ (.addColorStop grd 0 "rgba(255, 255, 255, 1)")
+ (.addColorStop grd 1 "rgba(255, 255, 255, 0)")
(obj/set! ctx "fillStyle" grd)
(.beginPath ctx)
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs
index a305e8fed..7023b52a9 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs
@@ -81,11 +81,11 @@
[:div.selected-colors
(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}
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))}
i/palette]
diff --git a/frontend/src/app/main/ui/workspace/rules.cljs b/frontend/src/app/main/ui/workspace/rules.cljs
index d455cf970..45a8cd0d9 100644
--- a/frontend/src/app/main/ui/workspace/rules.cljs
+++ b/frontend/src/app/main/ui/workspace/rules.cljs
@@ -47,8 +47,8 @@
(.translate dctx 0 txfm))
(obj/set! dctx "font" "12px worksans")
- (obj/set! dctx "fillStyle" "#7B7D85")
- (obj/set! dctx "strokeStyle" "#7B7D85")
+ (obj/set! dctx "fillStyle" "var(--color-gray-30)")
+ (obj/set! dctx "strokeStyle" "var(--color-gray-30)")
(obj/set! dctx "textAlign" "center")
(loop [i minv]
diff --git a/frontend/src/app/main/ui/workspace/shapes/bounding_box.cljs b/frontend/src/app/main/ui/workspace/shapes/bounding_box.cljs
index c7d599a2b..7e05a7881 100644
--- a/frontend/src/app/main/ui/workspace/shapes/bounding_box.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/bounding_box.cljs
@@ -65,7 +65,7 @@
:y (- (:y bounding-box) 5)
:font-size 10
:fill line-color
- :stroke "white"
+ :stroke "var(--color-white)"
:stroke-width 0.1}
(str/format "%s - (%s, %s)" (str/slice (str (:id shape)) 0 8) (fixed (:x bounding-box)) (fixed (:y bounding-box)))]
diff --git a/frontend/src/app/main/ui/workspace/shapes/path/common.cljs b/frontend/src/app/main/ui/workspace/shapes/path/common.cljs
index df228663c..1f5ec07ca 100644
--- a/frontend/src/app/main/ui/workspace/shapes/path/common.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/path/common.cljs
@@ -10,11 +10,11 @@
[okulary.core :as l]
[rumext.alpha :as mf]))
-(def primary-color "#1FDEA7")
-(def secondary-color "#DB00FF")
-(def black-color "#000000")
-(def white-color "#FFFFFF")
-(def gray-color "#B1B2B5")
+(def primary-color "var(--color-select)")
+(def secondary-color "var(--color-distance)")
+(def black-color "var(--color-black)")
+(def white-color "var(--color-white)")
+(def gray-color "var(--color-gray-20)")
(def current-edit-path-ref
(let [selfn (fn [local]
diff --git a/frontend/src/app/main/ui/workspace/viewport/drawarea.cljs b/frontend/src/app/main/ui/workspace/viewport/drawarea.cljs
index 740c6956c..97fdf6168 100644
--- a/frontend/src/app/main/ui/workspace/viewport/drawarea.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/drawarea.cljs
@@ -39,7 +39,7 @@
[:rect.main {:x x :y y
:width width
:height height
- :style {:stroke "#1FDEA7"
+ :style {:stroke "var(--color-select)"
:fill "none"
:stroke-width (/ 1 zoom)}}])))
diff --git a/frontend/src/app/main/ui/workspace/viewport/gradients.cljs b/frontend/src/app/main/ui/workspace/viewport/gradients.cljs
index a1b623c36..0164211a4 100644
--- a/frontend/src/app/main/ui/workspace/viewport/gradients.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/gradients.cljs
@@ -22,14 +22,14 @@
[rumext.alpha :as mf]))
(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-radius 2)
(def gradient-square-stroke-width 2)
(def gradient-width-handler-radius 5)
-(def gradient-width-handler-color "white")
-(def gradient-square-stroke-color "white")
-(def gradient-square-stroke-color-selected "#1FDEA7")
+(def gradient-width-handler-color "var(--color-white)")
+(def gradient-square-stroke-color "var(--color-white)")
+(def gradient-square-stroke-color-selected "var(--color-select)")
(def editing-spot-ref
(l/derived (l/in [:workspace-local :editing-stop]) st/state))
@@ -115,7 +115,7 @@
:rx (/ gradient-square-radius zoom)
:width (/ 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)
:fill (:value color)
:fill-opacity (:opacity color)
diff --git a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs
index ed2300b65..de2e50a88 100644
--- a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs
@@ -116,7 +116,7 @@
(when icon-pdata
[:path {:fill stroke
:stroke-width 2
- :stroke "#FFFFFF"
+ :stroke "var(--color-white)"
:d icon-pdata
:transform (str
"scale(" inv-zoom ", " inv-zoom ") "
@@ -149,7 +149,7 @@
(if-not selected?
[:g {:on-mouse-down #(on-mouse-down % index orig-shape)}
- [:path {:stroke "#B1B2B5"
+ [:path {:stroke "var(--color-gray-20)"
:fill "none"
:pointer-events "visible"
:stroke-width (/ 2 zoom)
@@ -158,13 +158,13 @@
[:& interaction-marker {:index index
:x dest-x
:y dest-y
- :stroke "#B1B2B5"
+ :stroke "var(--color-gray-20)"
:action-type action-type
:arrow-dir arrow-dir
:zoom zoom}])]
[:g {:on-mouse-down #(on-mouse-down % index orig-shape)}
- [:path {:stroke "#31EFB8"
+ [:path {:stroke "var(--color-primary)"
:fill "none"
:pointer-events "visible"
:stroke-width (/ 2 zoom)
@@ -172,17 +172,17 @@
(when dest-shape
[:& outline {:shape dest-shape
- :color "#31EFB8"}])
+ :color "var(--color-primary)"}])
[:& interaction-marker {:index index
:x orig-x
:y orig-y
- :stroke "#31EFB8"
+ :stroke "var(--color-primary)"
:zoom zoom}]
[:& interaction-marker {:index index
:x dest-x
:y dest-y
- :stroke "#31EFB8"
+ :stroke "var(--color-primary)"
:action-type action-type
:arrow-dir arrow-dir
:zoom zoom}]])))
@@ -196,7 +196,7 @@
[:g {:on-mouse-down #(on-mouse-down % index shape)}
[:& interaction-marker {:x handle-x
:y handle-y
- :stroke "#31EFB8"
+ :stroke "var(--color-primary)"
:action-type :navigate
:arrow-dir :right
:zoom zoom}]]))
@@ -217,8 +217,8 @@
[:g {:on-mouse-down start-move-position
:on-mouse-enter #(reset! hover-disabled? true)
:on-mouse-leave #(reset! hover-disabled? false)}
- [:path {:stroke "#31EFB8"
- :fill "#000000"
+ [:path {:stroke "var(--color-primary)"
+ :fill "var(--color-black)"
:fill-opacity 0.3
:stroke-width 1
:d (str "M" marker-x " " marker-y " "
@@ -232,7 +232,7 @@
[:circle {:cx (+ marker-x (/ width 2))
:cy (+ marker-y (/ height 2))
:r 8
- :fill "#31EFB8"}]]))))
+ :fill "var(--color-primary)"}]]))))
(mf/defc interactions
[{:keys [selected hover-disabled?] :as props}]
diff --git a/frontend/src/app/main/ui/workspace/viewport/outline.cljs b/frontend/src/app/main/ui/workspace/viewport/outline.cljs
index 44d644f6b..bab870bf9 100644
--- a/frontend/src/app/main/ui/workspace/viewport/outline.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/outline.cljs
@@ -67,7 +67,7 @@
(let [shapes (obj/get props "shapes")
zoom (obj/get props "zoom")
color (if (or (> (count shapes) 1) (nil? (:shape-ref (first shapes))))
- "#31EFB8" "#00E0FF")]
+ "var(--color-primary)" "var(--color-component-highlight)")]
(for [shape shapes]
[:& outline {:key (str "outline-" (:id shape))
:shape (gsh/transform-shape shape)
diff --git a/frontend/src/app/main/ui/workspace/viewport/presence.cljs b/frontend/src/app/main/ui/workspace/viewport/presence.cljs
index 272b0628b..2293bd178 100644
--- a/frontend/src/app/main/ui/workspace/viewport/presence.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/presence.cljs
@@ -22,7 +22,7 @@
[{:keys [session profile] :as props}]
(let [zoom (mf/deref refs/selected-zoom)
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))]
[:g.multiuser-cursor {:transform transform}
[:path {:fill color
@@ -43,7 +43,7 @@
:width 25
:height 5
:overflow "hidden"
- :fill "#fff"
+ :fill "var(--color-white)"
:stroke-width 1
:font-family "Works Sans"
:font-size 3
diff --git a/frontend/src/app/main/ui/workspace/viewport/selection.cljs b/frontend/src/app/main/ui/workspace/viewport/selection.cljs
index b42a2feb7..1f3bf6690 100644
--- a/frontend/src/app/main/ui/workspace/viewport/selection.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/selection.cljs
@@ -27,8 +27,8 @@
(def resize-point-circle-radius 10)
(def resize-point-rect-size 8)
(def resize-side-height 8)
-(def selection-rect-color-normal "#1FDEA7")
-(def selection-rect-color-component "#00E0FF")
+(def selection-rect-color-normal "var(--color-select)")
+(def selection-rect-color-component "var(--color-component-highlight)")
(def selection-rect-width 1)
(def min-selrect-side 10)
(def small-selrect-side 30)
@@ -149,7 +149,7 @@
:style {:fillOpacity "1"
:strokeWidth "1px"
:vectorEffect "non-scaling-stroke"}
- :fill "#FFFFFF"
+ :fill "var(--color-white)"
:stroke (if (and (= position :bottom-right) overflow-text) "red" color)
:cx cx'
:cy cy'}]
diff --git a/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs b/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs
index a5c85499f..b02f1ec78 100644
--- a/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs
@@ -17,7 +17,7 @@
[cuerdas.core :as str]
[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-side 5)
@@ -79,7 +79,7 @@
[:text {:x (if (= coord :x) x (+ x (/ width 2)))
:y (- (+ y (/ (/ pill-text-height zoom) 2) (- (/ 6 zoom))) (if (= coord :x) (/ 2 zoom) 0))
:font-size (/ pill-text-font-size zoom)
- :fill "white"
+ :fill "var(--color-white)"
:text-anchor "middle"}
(mth/precision distance 0)]])
diff --git a/frontend/src/app/main/ui/workspace/viewport/snap_points.cljs b/frontend/src/app/main/ui/workspace/viewport/snap_points.cljs
index 5fad2a5c1..282591a7f 100644
--- a/frontend/src/app/main/ui/workspace/viewport/snap_points.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/snap_points.cljs
@@ -15,7 +15,7 @@
[beicon.core :as rx]
[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-width 1)
diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
index 9d7f54ed4..9b8d30d58 100644
--- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs
@@ -31,7 +31,7 @@
:pattern-units "userSpaceOnUse"}
[:path {:d "M 1 0 L 0 0 0 1"
:style {:fill "none"
- :stroke "#59B9E2"
+ :stroke "var(--color-info)"
:stroke-opacity "0.2"
:stroke-width (str (/ 1 zoom))}}]]]
[:rect {:x (:x vbox)
@@ -130,7 +130,7 @@
:transform (str (when (and selected? modifiers)
(str (:displacement modifiers) " " ))
(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-double-click on-double-click
:on-pointer-enter on-pointer-enter
diff --git a/frontend/src/app/util/avatars.cljs b/frontend/src/app/util/avatars.cljs
index acca7deca..e7fdc0b25 100644
--- a/frontend/src/app/util/avatars.cljs
+++ b/frontend/src/app/util/avatars.cljs
@@ -11,7 +11,7 @@
(defn generate*
[{:keys [name color size]
- :or {color "#000000" size 128}}]
+ :or {color "var(--color-black)" size 128}}]
(let [parts (str/words (str/upper name))
letters (if (= 1 (count parts))
(ffirst parts)
@@ -27,7 +27,7 @@
(obj/set! context "font" (str (/ size 2) "px Arial"))
(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))
(.toDataURL canvas)))