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

✨ Use proper classes name convention

Browse Source
This commit is contained in:
elhombretecla 2025-09-26 20:04:40 +02:00
parent 6f362f9211
commit 34e3453f24
3 changed files with 24 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -92,8 +92,8 @@
:switcher--lg (= size :lg)) :switcher--lg (= size :lg))
:on-click handle-toggle :on-click handle-toggle
:on-key-down handle-keydown} :on-key-down handle-keydown}
[:div {:class (stl/css :switcher__track)} [:div {:class (stl/css :switcher-track)}
[:div {:class (stl/css :switcher__thumb)}]]]])) [:div {:class (stl/css :switcher-thumb)}]]]]))
;; Export as default ;; Export as default
(def switcher switcher*) (def switcher switcher*)

6
frontend/src/app/main/ui/ds/controls/switcher/switcher.mdx
View File

@ -119,9 +119,11 @@ The switcher component uses the following design system tokens:
### Colors ### Colors
- **OFF state track**: `--color-background-quaternary` (muted gray) - **OFF state track**: `--color-background-quaternary` (muted gray)
- **ON state track**: `--color-accent-success` (green/teal) - **ON state track**: `--color-accent-success` (green/teal)
- **Thumb**: `--color-background-primary` (white/light) - **OFF state thumb**: `--color-foreground-secondary` (gray)
- **ON state thumb**: `--color-foreground-primary` (white in dark theme, black in light theme)
- **Hover state thumb**: `--color-foreground-primary` (contrasting color)
- **Label**: `--color-foreground-primary` - **Label**: `--color-foreground-primary`
- **Focus ring**: `--color-accent-primary` - **Focus ring**: `--color-accent-tertiary` (teal in dark theme, purple in light theme)
### Sizes ### Sizes
- **Small**: Track 32×16px, Thumb 12px - **Small**: Track 32×16px, Thumb 12px

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

@ -50,7 +50,7 @@ $switcher-transition-duration: 0.2s;
// Focus ring using DS tokens - teal border around track // Focus ring using DS tokens - teal border around track
&:focus-visible { &:focus-visible {
.switcher__track { .switcher-track {
outline: $b-2 solid var(--color-accent-tertiary); outline: $b-2 solid var(--color-accent-tertiary);
outline-offset: $b-2; outline-offset: $b-2;
} }
@ -65,22 +65,22 @@ $switcher-transition-duration: 0.2s;
color: var(--color-foreground-secondary); color: var(--color-foreground-secondary);
} }
.switcher__track { .switcher-track {
background-color: var(--color-background-tertiary); background-color: var(--color-background-tertiary);
opacity: 0.6; opacity: 0.6;
} }
&.is-checked .switcher__track { &.is-checked .switcher-track {
background-color: var(--color-background-quaternary); background-color: var(--color-background-quaternary);
opacity: 0.6; opacity: 0.6;
} }
.switcher__thumb { .switcher-thumb {
background-color: var(--color-foreground-secondary); background-color: var(--color-foreground-secondary);
opacity: 0.5; opacity: 0.5;
} }
&.is-checked .switcher__thumb { &.is-checked .switcher-thumb {
background-color: var(--color-foreground-secondary); background-color: var(--color-foreground-secondary);
opacity: 0.6; opacity: 0.6;
} }
@ -88,63 +88,63 @@ $switcher-transition-duration: 0.2s;
// Size variants - Medium (default) // Size variants - Medium (default)
&.switcher--md { &.switcher--md {
.switcher__track { .switcher-track {
width: $switcher-md-track-width; width: $switcher-md-track-width;
height: $switcher-md-track-height; height: $switcher-md-track-height;
} }
.switcher__thumb { .switcher-thumb {
width: $switcher-md-thumb-size; width: $switcher-md-thumb-size;
height: $switcher-md-thumb-size; height: $switcher-md-thumb-size;
top: calc((#{$switcher-md-track-height} - #{$switcher-md-thumb-size}) / 2); top: calc((#{$switcher-md-track-height} - #{$switcher-md-thumb-size}) / 2);
left: calc((#{$switcher-md-track-height} - #{$switcher-md-thumb-size}) / 2); left: calc((#{$switcher-md-track-height} - #{$switcher-md-thumb-size}) / 2);
} }
&.is-checked .switcher__thumb { &.is-checked .switcher-thumb {
transform: translateX(calc(#{$switcher-md-track-width} - #{$switcher-md-track-height})); transform: translateX(calc(#{$switcher-md-track-width} - #{$switcher-md-track-height}));
} }
} }
// Size variants - Small // Size variants - Small
&.switcher--sm { &.switcher--sm {
.switcher__track { .switcher-track {
width: $switcher-sm-track-width; width: $switcher-sm-track-width;
height: $switcher-sm-track-height; height: $switcher-sm-track-height;
} }
.switcher__thumb { .switcher-thumb {
width: $switcher-sm-thumb-size; width: $switcher-sm-thumb-size;
height: $switcher-sm-thumb-size; height: $switcher-sm-thumb-size;
top: calc((#{$switcher-sm-track-height} - #{$switcher-sm-thumb-size}) / 2); top: calc((#{$switcher-sm-track-height} - #{$switcher-sm-thumb-size}) / 2);
left: calc((#{$switcher-sm-track-height} - #{$switcher-sm-thumb-size}) / 2); left: calc((#{$switcher-sm-track-height} - #{$switcher-sm-thumb-size}) / 2);
} }
&.is-checked .switcher__thumb { &.is-checked .switcher-thumb {
transform: translateX(calc(#{$switcher-sm-track-width} - #{$switcher-sm-track-height})); transform: translateX(calc(#{$switcher-sm-track-width} - #{$switcher-sm-track-height}));
} }
} }
// Size variants - Large // Size variants - Large
&.switcher--lg { &.switcher--lg {
.switcher__track { .switcher-track {
width: $switcher-lg-track-width; width: $switcher-lg-track-width;
height: $switcher-lg-track-height; height: $switcher-lg-track-height;
} }
.switcher__thumb { .switcher-thumb {
width: $switcher-lg-thumb-size; width: $switcher-lg-thumb-size;
height: $switcher-lg-thumb-size; height: $switcher-lg-thumb-size;
top: calc((#{$switcher-lg-track-height} - #{$switcher-lg-thumb-size}) / 2); top: calc((#{$switcher-lg-track-height} - #{$switcher-lg-thumb-size}) / 2);
left: calc((#{$switcher-lg-track-height} - #{$switcher-lg-thumb-size}) / 2); left: calc((#{$switcher-lg-track-height} - #{$switcher-lg-thumb-size}) / 2);
} }
&.is-checked .switcher__thumb { &.is-checked .switcher-thumb {
transform: translateX(calc(#{$switcher-lg-track-width} - #{$switcher-lg-track-height})); transform: translateX(calc(#{$switcher-lg-track-width} - #{$switcher-lg-track-height}));
} }
} }
} }
.switcher__track { .switcher-track {
position: relative; position: relative;
border-radius: 9999px; border-radius: 9999px;
background-color: var(--color-background-quaternary); background-color: var(--color-background-quaternary);
@ -165,7 +165,7 @@ $switcher-transition-duration: 0.2s;
} }
} }
.switcher__thumb { .switcher-thumb {
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
background-color: var(--color-foreground-secondary); background-color: var(--color-foreground-secondary);
@ -190,8 +190,8 @@ $switcher-transition-duration: 0.2s;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.switcher__track, .switcher-track,
.switcher__thumb { .switcher-thumb {
transition: none; transition: none;
} }
} }