johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-11 22:14:05 +01:00
Code Issues Actions 9 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
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))
:on-click handle-toggle
:on-key-down handle-keydown}
[:div {:class (stl/css :switcher__track)}
[:div {:class (stl/css :switcher__thumb)}]]]]))
[:div {:class (stl/css :switcher-track)}
[:div {:class (stl/css :switcher-thumb)}]]]]))
;; Export as default
(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
- **OFF state track**: `--color-background-quaternary` (muted gray)
- **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`
- **Focus ring**: `--color-accent-primary`
- **Focus ring**: `--color-accent-tertiary` (teal in dark theme, purple in light theme)
### Sizes
- **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-visible {
.switcher__track {
.switcher-track {
outline: $b-2 solid var(--color-accent-tertiary);
outline-offset: $b-2;
}
@@ -65,22 +65,22 @@ $switcher-transition-duration: 0.2s;
color: var(--color-foreground-secondary);
}
.switcher__track {
.switcher-track {
background-color: var(--color-background-tertiary);
opacity: 0.6;
}
&.is-checked .switcher__track {
&.is-checked .switcher-track {
background-color: var(--color-background-quaternary);
opacity: 0.6;
}
.switcher__thumb {
.switcher-thumb {
background-color: var(--color-foreground-secondary);
opacity: 0.5;
}
&.is-checked .switcher__thumb {
&.is-checked .switcher-thumb {
background-color: var(--color-foreground-secondary);
opacity: 0.6;
}
@@ -88,63 +88,63 @@ $switcher-transition-duration: 0.2s;
// Size variants - Medium (default)
&.switcher--md {
.switcher__track {
.switcher-track {
width: $switcher-md-track-width;
height: $switcher-md-track-height;
}
.switcher__thumb {
.switcher-thumb {
width: $switcher-md-thumb-size;
height: $switcher-md-thumb-size;
top: 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}));
}
}
// Size variants - Small
&.switcher--sm {
.switcher__track {
.switcher-track {
width: $switcher-sm-track-width;
height: $switcher-sm-track-height;
}
.switcher__thumb {
.switcher-thumb {
width: $switcher-sm-thumb-size;
height: $switcher-sm-thumb-size;
top: 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}));
}
}
// Size variants - Large
&.switcher--lg {
.switcher__track {
.switcher-track {
width: $switcher-lg-track-width;
height: $switcher-lg-track-height;
}
.switcher__thumb {
.switcher-thumb {
width: $switcher-lg-thumb-size;
height: $switcher-lg-thumb-size;
top: 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}));
}
}
}
.switcher__track {
.switcher-track {
position: relative;
border-radius: 9999px;
background-color: var(--color-background-quaternary);
@@ -165,7 +165,7 @@ $switcher-transition-duration: 0.2s;
}
}
.switcher__thumb {
.switcher-thumb {
position: absolute;
border-radius: 50%;
background-color: var(--color-foreground-secondary);
@@ -190,8 +190,8 @@ $switcher-transition-duration: 0.2s;
}
@media (prefers-reduced-motion: reduce) {
.switcher__track,
.switcher__thumb {
.switcher-track,
.switcher-thumb {
transition: none;
}
}