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

🐛 Fix colors on measurements elements

Browse source
This commit is contained in:
Eva 2024-01-18 18:32:46 +01:00 • committed by Andrey Antukh
parent 3dc45104db
commit 1e1b13196c
28 changed files with 103 additions and 391 deletions
Download patch file Download diff file Expand all files Collapse all files

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 "var(--color-gray-20)"
:grid-color "var(--off-white)"
:grid-alignment true
:background "var(--color-white)"})
:background "var(--white)"})
(def size-presets
[{:name "APPLE"}

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

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

32
frontend/src/app/main/ui/debug/components_preview.cljs
View file

@ -39,16 +39,16 @@
(let [theme (dom/event->value event)
data (assoc initial :theme theme)]
(st/emit! (du/update-profile data))))
colors [:bg-primary
:bg-secondary
:bg-tertiary
:bg-cuaternary
:fg-primary
:fg-secondary
:acc
:acc-muted
:acc-secondary
:acc-tertiary]
colors ["var(--color-background-primary)"
"var(--color-background-secondary)"
"var(--color-background-tertiary)"
"var(--color-background-cuaternary)"
"var(--color-foreground-primary)"
"var(--color-foreground-secondary)"
"var(--color-accent-primary)"
"var(--color-accent-primary-muted)"
"var(--color-accent-secondary)"
"var(--color-accent-tertiary)"]
;; COMPONENTS FNs
state* (mf/use-state {:collapsed? true
@ -88,12 +88,12 @@
[:option {:label "Penpot Dark (default)" :value "default"}]
[:option {:label "Penpot Light" :value "light"}]]
[:div {:class (stl/css :wrapper)}
(let [css (stl/styles)]
(for [color colors]
[:div {:key color
:class (dom/classnames (get css color) true
(get css :rect) true)}
(d/name color)]))]]
(for [color colors]
[:div {:class (stl/css :color-wrapper)}
[:span (d/name color)]
[:div {:key color
:style {:background color}
:class (stl/css :rect)}]])]]
[:div {:class (stl/css :components-row)}
[:h2 {:class (stl/css :title)} "Components"]

53
frontend/src/app/main/ui/debug/components_preview.scss
View file

@ -12,64 +12,27 @@
color: var(--color-foreground-primary);
background: var(--color-background-secondary);
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: $s-40;
background-color: var(--color-background-primary);
width: 100%;
padding: $s-20;
display: flex;
justify-content: center;
gap: $s-20;
flex-wrap: wrap;
.rect {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--color-foreground-primary);
border: $s-1 solid var(--color-foreground-primary);
padding: $s-20;
height: $s-96;
min-width: $s-152;
}
.bg-primary {
background: var(--color-background-primary);
color: var(--color-foreground-primary);
}
.bg-secondary {
background: var(--color-background-secondary);
color: var(--color-foreground-primary);
}
.bg-tertiary {
background: var(--color-background-tertiary);
color: var(--color-foreground-primary);
}
.bg-cuaternary {
background: var(--color-background-quaternary);
color: var(--color-foreground-primary);
}
.fg-primary {
background: var(--color-foreground-primary);
color: var(--color-background-primary);
}
.fg-secondary {
background: var(--color-foreground-secondary);
color: var(--color-background-primary);
}
.acc {
background: var(--color-accent-primary);
color: var(--color-background-primary);
}
.acc-muted {
background: var(--color-accent-primary-muted);
color: var(--color-foreground-primary);
}
.acc-secondary {
background: var(--color-accent-secondary);
color: var(--color-background-primary);
}
.acc-tertiary {
background: var(--color-accent-tertiary);
color: var(--color-background-primary);
}
}
}
.color-wrapper {
display: grid;
grid-template-rows: auto $s-96;
}
.components-row {
color: var(--color-foreground-primary);

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

@ -23,28 +23,26 @@
(def font-size 11)
(def selection-rect-width 1)
(def select-color "var(--color-select)")
(def select-color "var(--color-accent-tertiary)")
(def select-guide-width 1)
(def select-guide-dasharray 5)
(def hover-color "var(--color-distance)")
(def hover-color-text "var(--color-white)")
(def hover-guide-width 1)
(def hover-color "var(--color-foreground-tertiary)")
(def size-display-color "var(--color-white)")
(def size-display-color "var(--white)")
(def size-display-opacity 0.7)
(def size-display-text-color "var(--color-black)")
(def size-display-text-color "var(--black)")
(def size-display-width-min 50)
(def size-display-width-max 75)
(def size-display-height 16)
(def distance-color "var(--color-distance)")
(def distance-text-color "var(--color-white)")
(def distance-color "var(--color-foreground-tertiary)")
(def distance-text-color "var(--white)")
(def distance-border-radius 2)
(def distance-pill-width 50)
(def distance-pill-height 16)
(def distance-line-stroke 1)
(def warning-color "var(--color-warning)")
;; ------------------------------------------------
;; HELPERS

6
frontend/src/app/main/ui/shapes/grid_layout_viewer.cljs
View file

@ -38,11 +38,11 @@
:y area-y
:width area-width
:height area-height
:style {:fill "var(--color-distance)"
:style {:fill "var(--color-foreground-tertiary)"
:fill-opacity 0.3}}]
[:text {:x area-text-x
:y area-text-y
:style {:fill "var(--color-distance)"
:style {:fill "var(--color-foreground-tertiary)"
:font-family "worksans"
:font-weight 600
:font-size 14
@ -71,7 +71,7 @@
:y (:y cell-origin)
:width cell-width
:height cell-height
:style {:stroke "var(--color-distance)"
:style {:stroke "var(--color-foreground-tertiary)"
:stroke-width 1.5
:fill "none"}}]

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

@ -15,7 +15,7 @@
;; CONSTANTS
;; ------------------------------------------------
(def select-color "var(--color-select)")
(def select-color "var(--color-accent-tertiary)")
(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

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

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

@ -13,11 +13,11 @@
[okulary.core :as l]
[rumext.v2 :as mf]))
(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 primary-color "var(--color-accent-tertiary)")
(def secondary-color "var(--color-foreground-tertiary)")
(def black-color "var(--black)")
(def white-color "var(--white)")
(def gray-color "var(--off-white)")
(def current-edit-path-ref
(l/derived

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

@ -37,6 +37,6 @@
:width width
:height height
:transform transform
:style {:stroke "var(--color-select)"
:style {:stroke "var(--color-accent-tertiary)"
:stroke-width (/ 1 zoom)
:fill "none"}}]))

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

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

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

@ -22,14 +22,14 @@
[rumext.v2 :as mf]))
(def gradient-line-stroke-width 2)
(def gradient-line-stroke-color "var(--color-white)")
(def gradient-line-stroke-color "var(--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 "var(--color-white)")
(def gradient-square-stroke-color "var(--color-white)")
(def gradient-square-stroke-color-selected "var(--color-select)")
(def gradient-width-handler-color "var(--white)")
(def gradient-square-stroke-color "var(--white)")
(def gradient-square-stroke-color-selected "var(--color-accent-tertiary)")
(mf/defc shadow [{:keys [id x y width height offset]}]
[:filter {:id id
@ -109,7 +109,7 @@
:rx (/ gradient-square-radius zoom)
:width (/ gradient-square-width zoom)
:height (/ gradient-square-width zoom)
:stroke (if selected "var(--color-primary)" "var(--color-white)")
:stroke (if selected "var(--color-accent-tertiary)" "var(--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

@ -131,7 +131,7 @@
(when icon-pdata
[:path {:fill stroke
:stroke-width 2
:stroke "var(--color-white)"
:stroke "var(--white)"
:d icon-pdata
:transform (str
"scale(" inv-zoom ", " inv-zoom ") "
@ -164,7 +164,7 @@
(if-not selected?
[:g {:on-pointer-down #(on-pointer-down % index orig-shape)}
[:path {:stroke "var(--color-gray-20)"
[:path {:stroke "var(--off-white)"
:fill "none"
:pointer-events "visible"
:stroke-width (/ 2 zoom)
@ -173,13 +173,13 @@
[:& interaction-marker {:index index
:x dest-x
:y dest-y
:stroke "var(--color-gray-20)"
:stroke "var(--off-white)"
:action-type action-type
:arrow-dir arrow-dir
:zoom zoom}])]
[:g {:on-pointer-down #(on-pointer-down % index orig-shape)}
[:path {:stroke "var(--color-primary)"
[:path {:stroke "var(--color-accent-tertiary)"
:fill "none"
:pointer-events "visible"
:stroke-width (/ 2 zoom)
@ -188,17 +188,17 @@
(when dest-shape
[:& outline {:zoom zoom
:shape dest-shape
:color "var(--color-primary)"}])
:color "var(--color-accent-tertiary)"}])
[:& interaction-marker {:index index
:x orig-x
:y orig-y
:stroke "var(--color-primary)"
:stroke "var(--color-accent-tertiary)"
:zoom zoom}]
[:& interaction-marker {:index index
:x dest-x
:y dest-y
:stroke "var(--color-primary)"
:stroke "var(--color-accent-tertiary)"
:action-type action-type
:arrow-dir arrow-dir
:zoom zoom}]])))
@ -212,7 +212,7 @@
[:g {:on-pointer-down #(on-pointer-down % index shape)}
[:& interaction-marker {:x handle-x
:y handle-y
:stroke "var(--color-primary)"
:stroke "var(--color-accent-tertiary)"
:action-type :navigate
:arrow-dir :right
:zoom zoom}]]))
@ -256,8 +256,8 @@
[:& (mf/provider muc/render-thumbnails) {:value true}
[:& (mf/provider embed/context) {:value false}
[:& shape-wrapper {:shape dest-shape}]]]]
[:path {:stroke "var(--color-primary)"
:fill "var(--color-black)"
[:path {:stroke "var(--color-accent-tertiary)"
:fill "var(--black)"
:fill-opacity 0.5
:stroke-width 1
:d (dm/str "M" marker-x " " marker-y " "
@ -271,7 +271,7 @@
[:circle {:cx (+ marker-x (/ width 2))
:cy (+ marker-y (/ height 2))
:r 8
:fill "var(--color-primary)"}]]))))
:fill "var(--color-accent-tertiary)"}]]))))
(mf/defc interactions
[{:keys [current-transform objects zoom selected hover-disabled? page-id] :as props}]

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

@ -34,7 +34,7 @@
objects (deref refs/workspace-page-objects)
color (if (ctn/in-any-component? objects shape)
"var(--color-component-highlight)"
"var(--color-primary)")
"var(--color-accent-tertiary)")
x (dm/get-prop shape :x)
y (dm/get-prop shape :y)
@ -65,7 +65,7 @@
(obj/merge!
#js {:fill "none"
:stroke color
:strokeWidth (/ 2 zoom)
:strokeWidth (/ 1 zoom)
:pointerEvents "none"
:transform transform}

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

@ -25,8 +25,8 @@
[{:keys [session profile] :as props}]
(let [zoom (mf/deref refs/selected-zoom)
point (:point session)
background-color (:color session "var(--color-black)")
text-color (:text-color session "var(--color-white)")
background-color (:color session "var(--black)")
text-color (:text-color session "var(--white)")
transform (str/fmt "translate(%s, %s) scale(%s)" (:x point) (:y point) (/ 1 zoom))
shown-name (if (> (count (:fullname profile)) 16)
(str (str/slice (:fullname profile) 0 12) "...")

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

@ -21,7 +21,7 @@
(def rule-area-size 22)
(def rule-area-half-size (/ rule-area-size 2))
(def rules-background "var(--panel-background-color)")
(def selection-area-color "var(--color-primary)")
(def selection-area-color "var(--color-accent-tertiary)")
(def selection-area-opacity 0.3)
(def over-number-size 100)
(def over-number-opacity 0.8)

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

@ -31,7 +31,7 @@
(def resize-point-circle-radius 10)
(def resize-point-rect-size 8)
(def resize-side-height 8)
(def selection-rect-color-normal "var(--color-select)")
(def selection-rect-color-normal "var(--color-accent-tertiary)")
(def selection-rect-color-component "var(--color-component-highlight)")
(def selection-rect-width 1)
(def min-selrect-side 10)
@ -213,7 +213,7 @@
:style {:fillOpacity "1"
:strokeWidth "1px"
:vectorEffect "non-scaling-stroke"}
:fill "var(--color-white)"
:fill "var(--white)"
:stroke color
:cx cx'
:cy cy'}]
@ -279,7 +279,7 @@
:style {:fillOpacity 1
:stroke color
:strokeWidth "1px"
:fill "var(--color-white)"
:fill "var(--white)"
:vectorEffect "non-scaling-stroke"}
:data-position (name position)
:cx (+ x (/ length 2))

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

@ -21,7 +21,7 @@
[cuerdas.core :as str]
[rumext.v2 :as mf]))
(def ^:private line-color "var(--color-snap)")
(def ^:private line-color "var(--color-foreground-tertiary)")
(def ^:private segment-gap 2)
(def ^:private segment-gap-side 5)
@ -85,7 +85,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 "var(--color-white)"
:fill "var(--white)"
:text-anchor "middle"}
(fmt/format-number distance)]])

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

@ -16,7 +16,7 @@
[beicon.v2.core :as rx]
[rumext.v2 :as mf]))
(def ^:private line-color "var(--color-snap)")
(def ^:private line-color "var(--color-foreground-tertiary)")
(def ^:private line-opacity 0.6)
(def ^:private line-width 1)

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

@ -70,10 +70,8 @@
:width (:width data)
:height (:height data)
:style {;; Primary with 0.1 opacity
:fill "rgb(49, 239, 184, 0.1)"
;; Primary color
:stroke "rgb(49, 239, 184)"
:fill "var(--color-accent-tertiary-muted)"
:stroke "var(--color-accent-tertiary)"
:stroke-width (/ 1 zoom)}}]))
@ -86,10 +84,11 @@
;; Note that we don't use mf/deref to avoid a repaint dependency here
objects (deref refs/workspace-page-objects)
color (when selected?
color (if selected?
(if (ctn/in-any-component? objects frame)
"var(--color-component-highlight)"
"var(--color-primary-dark)"))
"var(--color-accent-tertiary)")
"#8f9da3") ;; TODO: Set this color on the DS
on-pointer-down
(mf/use-callback
@ -145,14 +144,16 @@
:width 12
:height 12
:class "workspace-frame-icon"
:style {:fill color}
:style {:stroke-width (/ 1 zoom)
:stroke color
:fill "none"}
:visibility (if show-artboard-names? "visible" "hidden")}
(cond
(:use-for-thumbnail frame)
[:use {:href "#icon-set-thumbnail"}]
[:use {:href "#icon-boards-thumbnail-refactor"}]
grid-edition?
[:use {:href "#icon-grid-layout-mode"}]
[:use {:href "#icon-grid-refactor"}]
main-instance?
[:use {:href "#icon-component-refactor"}])])