Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-24 13:41:39 -05:00
Code Issues 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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
CHANGES.md
View file

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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