github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-02 18:18:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix colopicker image checkbox (#11456)

Browse Source
This commit is contained in:
Eva Marco 2026-09-01 13:27:09 +02:00 committed by GitHub
parent b458dc764e
commit c7b3a0849f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 6 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/app/main/ui/workspace/colorpicker.cljs
View File

@ -30,10 +30,10 @@
[app.main.ui.components.select :refer [select]]
[app.main.ui.ds.buttons.button :refer [button*]]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.controls.checkbox :refer [checkbox*]]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
[app.main.ui.hooks :as hooks]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.workspace.colorpicker.color-inputs :refer [color-inputs*]]
[app.main.ui.workspace.colorpicker.color-tokens :refer [token-section*]]
[app.main.ui.workspace.colorpicker.gradients :refer [gradients*]]
@ -476,16 +476,10 @@
(when (some? (:image current-color))
[:div {:class (stl/css :checkbox-option)}
[:label {:for "keep-aspect-ratio"
:class (stl/css-case :global/checked keep-aspect-ratio?)}
[:span {:class (stl/css-case :global/checked keep-aspect-ratio?)}
(when keep-aspect-ratio?
deprecated-icon/status-tick)]
(tr "media.keep-aspect-ratio")
[:input {:type "checkbox"
:id "keep-aspect-ratio"
:checked keep-aspect-ratio?
:on-change handle-change-keep-aspect-ratio}]]])
[:> checkbox* {:id "keep-aspect-ratio"
:checked keep-aspect-ratio?
:on-change handle-change-keep-aspect-ratio
:label (tr "media.keep-aspect-ratio")}]])
[:> button* {:class (stl/css :choose-image)
:variant "secondary"

96
frontend/src/app/main/ui/workspace/colorpicker.scss
View File

@ -112,105 +112,11 @@
inline-size: 100%;
}
// TODO: Use a DS checkbox component
.checkbox-option {
display: flex;
align-items: center;
margin-block: var(--sp-l) 0;
margin-block: var(--sp-l) var(--sp-m);
margin-inline: 0;
// The native checkbox markup (label, span, input, svg) has no dedicated
// classes; styling these elements directly is unavoidable.
label {
@include t.use-typography("body-small");
display: flex;
align-items: center;
gap: px2rem(6);
cursor: pointer;
color: var(--color-foreground-secondary);
span {
--checkbox-icon-background-color: var(--color-background-quaternary);
--checkbox-icon-border-color: var(--color-foreground-secondary);
--checkbox-icon-foreground-color: var(--color-background-primary);
display: flex;
justify-content: center;
align-items: center;
inline-size: $sz-16;
block-size: $sz-16;
min-inline-size: $sz-16;
min-block-size: $sz-16;
border-radius: $br-4;
background-color: var(--checkbox-icon-background-color);
border: $b-1 solid var(--checkbox-icon-border-color);
svg {
display: none;
inline-size: $sz-16;
block-size: $sz-16;
stroke: var(--checkbox-icon-foreground-color);
}
&:hover {
--checkbox-icon-border-color: var(--color-accent-primary-muted);
}
&:focus {
--checkbox-icon-border-color: var(--color-accent-primary);
}
&:global(.checked) {
--checkbox-icon-background-color: var(--color-accent-primary);
--checkbox-icon-border-color: var(--color-background-quaternary);
svg {
display: flex;
justify-content: center;
align-items: center;
inline-size: $sz-12;
block-size: $sz-12;
stroke-width: 1.33px;
}
}
&:global(.intermediate) {
--checkbox-icon-background-color: var(--color-foreground-secondary);
--checkbox-icon-foreground-color: var(--color-background-secondary);
svg {
display: flex;
justify-content: center;
align-items: center;
inline-size: $sz-12;
block-size: $sz-12;
stroke-width: 1.33px;
}
}
&:global(.unchecked) {
--checkbox-icon-border-color: var(--color-background-quaternary);
}
}
input {
margin: 0;
}
&:hover {
span {
--checkbox-icon-border-color: var(--color-accent-primary-muted);
}
}
&:focus,
&:focus-within {
span {
--checkbox-icon-border-color: var(--color-accent-primary);
}
}
}
}
.token-color-title {