github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-05-01 14:18:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎉 Fix label color and scss variables

Browse Source
This commit is contained in:
elhombretecla 2025-09-29 07:30:41 +02:00
parent 34e3453f24
commit 913a8d3148
3 changed files with 6 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/app/main/ui/ds/_borders.scss
View File

@ -11,6 +11,7 @@ $br-8: px2rem(8);
$br-4: px2rem(4);
$br-6: px2rem(6);
$br-circle: 50%;
$br-full: px2rem(9999);
$b-1: px2rem(1);
$b-2: px2rem(2);

4
frontend/src/app/main/ui/ds/controls/switcher/switcher.cljs
View File

@ -41,7 +41,7 @@
controlled? (some? checked)
current-checked (if controlled? checked internal-checked)
;; Handle toggle
;; Toggle handler
handle-toggle (mf/use-fn
(mf/deps controlled? current-checked on-change internal-checked*)
(fn [event]
@ -52,7 +52,7 @@
(when on-change
(on-change new-checked event))))))
;; Handle keyboard events
;; Keyboard events
handle-keydown (mf/use-fn
(mf/deps handle-toggle)
(fn [event]

16
frontend/src/app/main/ui/ds/controls/switcher/switcher.scss
View File

@ -30,13 +30,9 @@ $switcher-transition-duration: 0.2s;
}
.switcher-label {
color: var(--color-foreground-primary);
color: var(--title-foreground-color);
cursor: pointer;
user-select: none;
&:hover {
color: var(--color-foreground-primary);
}
}
.switcher {
@ -48,7 +44,6 @@ $switcher-transition-duration: 0.2s;
background: transparent;
padding: 0;
// Focus ring using DS tokens - teal border around track
&:focus-visible {
.switcher-track {
outline: $b-2 solid var(--color-accent-tertiary);
@ -62,7 +57,7 @@ $switcher-transition-duration: 0.2s;
.switcher-label {
cursor: not-allowed;
color: var(--color-foreground-secondary);
color: var(--text-foreground-color);
}
.switcher-track {
@ -146,16 +141,14 @@ $switcher-transition-duration: 0.2s;
.switcher-track {
position: relative;
border-radius: 9999px;
border-radius: $br-full;
background-color: var(--color-background-quaternary);
transition: background-color $switcher-transition-duration ease-in-out;
// ON state - use success/teal color from DS
.switcher.is-checked & {
background-color: var(--color-accent-success);
}
// Hover states (only when not disabled)
.switcher:not(.is-disabled):hover:not(.is-checked) & {
background-color: var(--color-background-quaternary);
}
@ -172,18 +165,15 @@ $switcher-transition-duration: 0.2s;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
transition: transform $switcher-transition-duration ease-in-out, background-color $switcher-transition-duration ease-in-out;
// ON state - contrasting thumb (white in dark theme, dark in light theme)
.switcher.is-checked & {
background-color: var(--color-foreground-primary);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}
// Hover states - contrasting thumb for OFF state
.switcher:not(.is-disabled):hover:not(.is-checked) & {
background-color: var(--color-foreground-primary);
}
// Hover states - keep contrasting thumb for ON state
.switcher:not(.is-disabled):hover.is-checked & {
background-color: var(--color-foreground-primary);
}