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

♻️ Refactor forms file

Browse Source
This commit is contained in:
Marina López 2026-03-25 12:21:51 +01:00
parent abe328973c
commit 1ecfbef6fb
2 changed files with 160 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGES.md
View File

@ -31,6 +31,7 @@
- Update copy on penpot update message [Taiga #12924](https://tree.taiga.io/project/penpot/issue/12924) - Update copy on penpot update message [Taiga #12924](https://tree.taiga.io/project/penpot/issue/12924)
- Fix scroll on library modal [Taiga #13639](https://tree.taiga.io/project/penpot/issue/13639) - Fix scroll on library modal [Taiga #13639](https://tree.taiga.io/project/penpot/issue/13639)
- Fix dates to avoid show them in english when browser is in auto [Taiga #13786](https://tree.taiga.io/project/penpot/issue/13786) - Fix dates to avoid show them in english when browser is in auto [Taiga #13786](https://tree.taiga.io/project/penpot/issue/13786)
- Fix focus radio button [Taiga #13841](https://tree.taiga.io/project/penpot/issue/13841)
## 2.15.0 (Unreleased) ## 2.15.0 (Unreleased)

297
frontend/src/app/main/ui/components/forms.scss
View File

@ -5,6 +5,13 @@
// Copyright (c) KALEIDOS INC // Copyright (c) KALEIDOS INC
@use "refactor/common-refactor.scss" as deprecated; @use "refactor/common-refactor.scss" as deprecated;
@use "ds/typography.scss" as t;
@use "ds/_borders.scss" as *;
@use "ds/spacing.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_utils.scss" as *;
@use "ds/z-index.scss" as *;
@use "ds/mixins.scss" as *;
// INPUT // INPUT
.input-wrapper { .input-wrapper {
@ -17,44 +24,44 @@
&.valid { &.valid {
input { input {
border: deprecated.$s-1 solid var(--input-border-color-success);
@extend %disabled-input; @extend %disabled-input;
border: $b-1 solid var(--input-border-color-success);
&:hover, &:hover,
&:focus { &:focus {
border: deprecated.$s-1 solid var(--input-border-color-success); border: $b-1 solid var(--input-border-color-success);
} }
} }
} }
&.invalid { &.invalid {
input { input {
border: deprecated.$s-1 solid var(--input-border-color-error);
@extend %disabled-input; @extend %disabled-input;
border: $b-1 solid var(--input-border-color-error);
&:hover, &:hover,
&:focus { &:focus {
border: deprecated.$s-1 solid var(--input-border-color-error); border: $b-1 solid var(--input-border-color-error);
} }
} }
} }
&.valid .help-icon, &.valid .help-icon,
&.invalid .help-icon { &.invalid .help-icon {
right: deprecated.$s-40; inset-inline-end: $sz-40;
} }
} }
.input-with-label-form { .input-with-label-form {
@include deprecated.flexColumn; display: flex;
flex-direction: column;
gap: deprecated.$s-8; gap: var(--sp-s);
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
height: 100%; block-size: 100%;
width: 100%; inline-size: 100%;
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
@ -64,16 +71,16 @@
@extend %input-element; @extend %input-element;
color: var(--input-foreground-color-active); color: var(--input-foreground-color-active);
margin-top: 0; margin-block-start: 0;
width: 100%; inline-size: 100%;
max-width: 100%; max-inline-size: 100%;
height: 100%; block-size: 100%;
padding: 0 deprecated.$s-8; padding: 0 var(--sp-s);
&:focus { &:focus {
outline: none; outline: none;
border: deprecated.$s-1 solid var(--input-border-color-focus); border: $b-1 solid var(--input-border-color-focus);
border-radius: deprecated.$br-8; border-radius: var(--sp-s);
} }
} }
@ -84,7 +91,7 @@
input:-webkit-autofill:active { input:-webkit-autofill:active {
-webkit-text-fill-color: var(--input-foreground-color-active); -webkit-text-fill-color: var(--input-foreground-color-active);
box-shadow: inset 0 0 20px 20px var(--input-background-color); box-shadow: inset 0 0 20px 20px var(--input-background-color);
border: deprecated.$s-1 solid var(--input-border-color); border: $b-1 solid var(--input-border-color);
background-clip: text; background-clip: text;
transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s;
caret-color: var(--input-foreground-color-active); caret-color: var(--input-foreground-color-active);
@ -93,60 +100,60 @@
.input-and-icon { .input-and-icon {
position: relative; position: relative;
width: var(--input-width, calc(100% - deprecated.$s-1)); inline-size: var(--input-width, calc(100% - deprecated.$s-1));
min-width: var(--input-min-width); min-inline-size: var(--input-min-width);
height: var(--input-height, deprecated.$s-32); block-size: var(--input-height, $sz-32);
} }
.help-icon { .help-icon {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
right: deprecated.$s-16; inset-inline-end: var(--sp-l);
top: calc(50% - deprecated.$s-8); inset-block-start: calc(50% - var(--sp-s));
svg { svg {
@extend %button-icon-small; @extend %button-icon-small;
stroke: var(--color-foreground-secondary); stroke: var(--color-foreground-secondary);
width: deprecated.$s-16; inline-size: $sz-16;
height: deprecated.$s-16; block-size: $sz-16;
} }
} }
.invalid-icon { .invalid-icon {
width: deprecated.$s-16; inline-size: $sz-16;
height: deprecated.$s-16; block-size: $sz-16;
background: var(--input-border-color-error); background: var(--input-border-color-error);
border-radius: 50%; border-radius: $br-circle;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
right: var(--input-icon-padding); inset-inline-end: var(--input-icon-padding);
top: calc(50% - deprecated.$s-8); inset-block-start: calc(50% - var(--sp-s));
svg { svg {
width: deprecated.$s-12; inline-size: $sz-12;
height: deprecated.$s-12; block-size: $sz-12;
stroke: var(--input-background-color); stroke: var(--input-background-color);
} }
} }
.valid-icon { .valid-icon {
width: deprecated.$s-16; inline-size: $sz-16;
height: deprecated.$s-16; block-size: $sz-16;
background: var(--input-border-color-success); background: var(--input-border-color-success);
border-radius: 50%; border-radius: $br-circle;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
right: deprecated.$s-16; inset-inline-end: var(--sp-l);
top: calc(50% - deprecated.$s-8); inset-block-start: calc(50% - var(--sp-s));
svg { svg {
width: deprecated.$s-12; inline-size: $sz-12;
height: deprecated.$s-12; block-size: $sz-12;
fill: var(--input-border-color-success); fill: var(--input-border-color-success);
stroke: var(--input-background-color); stroke: var(--input-background-color);
} }
@ -154,15 +161,15 @@
.error { .error {
color: var(--input-border-color-error); color: var(--input-border-color-error);
width: 100%; inline-size: 100%;
font-size: deprecated.$fs-14; font-size: deprecated.$fs-14;
} }
.hint { .hint {
@include deprecated.bodySmallTypography; @include t.use-typography("body-small");
width: 99%; inline-size: 99%;
margin-block-start: deprecated.$s-8; margin-block-start: var(--sp-s);
color: var(--modal-text-foreground-color); color: var(--modal-text-foreground-color);
} }
@ -170,13 +177,13 @@
@extend %input-checkbox; @extend %input-checkbox;
.checkbox-label { .checkbox-label {
@include deprecated.bodySmallTypography; @include t.use-typography("body-small");
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: row-reverse; flex-direction: row-reverse;
gap: deprecated.$s-6; gap: px2rem(6);
min-height: deprecated.$s-32; min-block-size: var(--sp-xxxl);
cursor: pointer; cursor: pointer;
span { span {
@ -204,34 +211,40 @@
.custom-select { .custom-select {
@extend %select-wrapper; @extend %select-wrapper;
height: deprecated.$s-32; block-size: $sz-32;
.input-container { .input-container {
@include deprecated.flexRow; display: flex;
align-items: center;
gap: var(--sp-xs);
block-size: $sz-32;
inline-size: 100%;
border-radius: var(--sp-s);
border: $b-1 solid var(--input-border-color);
@extend %select-wrapper;
height: deprecated.$s-32;
width: 100%;
border-radius: deprecated.$br-8;
border: deprecated.$s-1 solid var(--input-border-color);
color: var(--input-foreground-color-active); color: var(--input-foreground-color-active);
background-color: var(--input-background-color); background-color: var(--input-background-color);
.main-content { .main-content {
@include deprecated.flexColumn; @include t.use-typography("body-small");
@include deprecated.bodySmallTypography;
display: flex;
flex-direction: column;
gap: var(--sp-xs);
position: relative; position: relative;
justify-content: center; justify-content: center;
flex-grow: 1; flex-grow: 1;
height: 100%; block-size: 100%;
padding: deprecated.$s-8; padding: var(--sp-s);
.label { .label {
color: var(--input-foreground-color); color: var(--input-foreground-color);
} }
.value { .value {
width: 100%; inline-size: 100%;
padding: 0; padding: 0;
margin: 0; margin: 0;
border: 0; border: 0;
@ -240,10 +253,11 @@
} }
.icon { .icon {
@include deprecated.flexCenter; display: flex;
justify-content: center;
height: deprecated.$s-32; align-items: center;
width: deprecated.$s-24; block-size: $sz-32;
inline-size: $sz-24;
pointer-events: none; pointer-events: none;
svg { svg {
@ -256,7 +270,7 @@
&.disabled { &.disabled {
background-color: var(--input-background-color-disabled); background-color: var(--input-background-color-disabled);
border: deprecated.$s-1 solid var(--input-border-color-disabled); border: $b-1 solid var(--input-border-color-disabled);
color: var(--input-foreground-color-disabled); color: var(--input-foreground-color-disabled);
} }
@ -264,36 +278,36 @@
outline: none; outline: none;
color: var(--input-foreground-color-active); color: var(--input-foreground-color-active);
background-color: var(--input-background-color-active); background-color: var(--input-background-color-active);
border: deprecated.$s-1 solid var(--input-border-color-active); border: $b-1 solid var(--input-border-color-active);
} }
} }
select { select {
@extend %menu-dropdown; @extend %menu-dropdown;
@include deprecated.bodySmallTypography; @include t.use-typography("body-small");
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
top: 0; inset-block-start: 0;
left: 0; inset-inline-start: 0;
min-height: deprecated.$s-32; min-block-size: $sz-32;
height: auto; block-size: auto;
width: calc(100% - 1px); inline-size: calc(100% - 1px);
padding: 0 deprecated.$s-12; padding: 0 var(--sp-m);
margin: 0; margin: 0;
border: none; border: none;
opacity: 0; opacity: 0;
z-index: deprecated.$z-index-10; z-index: var(--z-index-dropdown);
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
option { option {
@include deprecated.bodySmallTypography; @include t.use-typography("body-small");
color: var(--title-foreground-color-hover); color: var(--title-foreground-color-hover);
background-color: var(--menu-background-color); background-color: var(--menu-background-color);
appearance: none; appearance: none;
height: deprecated.$s-32; block-size: $sz-32;
} }
} }
} }
@ -305,7 +319,7 @@
&:disabled { &:disabled {
@extend %button-disabled; @extend %button-disabled;
min-height: deprecated.$s-32; min-block-size: $sz-32;
} }
} }
@ -314,37 +328,38 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
min-height: deprecated.$s-40; min-block-size: $sz-40;
max-height: deprecated.$s-180; max-block-size: px2rem(180);
width: 100%; inline-size: 100%;
overflow-y: hidden; overflow-y: hidden;
.inside-input { .inside-input {
@include deprecated.removeInputStyle; @include deprecated.removeInputStyle;
@include deprecated.bodySmallTypography; @include t.use-typography("body-small");
@include deprecated.textEllipsis; @include text-ellipsis;
width: 100%; inline-size: 100%;
max-width: calc(100% - deprecated.$s-1); max-inline-size: calc(100% - deprecated.$s-1);
min-height: deprecated.$s-32; min-block-size: $sz-32;
height: deprecated.$s-32; padding-block-start: 0;
padding: deprecated.$s-8; block-size: $sz-32;
padding: var(--sp-s);
margin: 0; margin: 0;
border-radius: deprecated.$br-8; border-radius: var(--sp-s);
color: var(--input-foreground-color-active); color: var(--input-foreground-color-active);
background-color: var(--input-background-color); background-color: var(--input-background-color);
&:focus { &:focus {
outline: none; outline: none;
border: deprecated.$s-1 solid var(--input-border-color-focus); border: $b-1 solid var(--input-border-color-focus);
} }
&.invalid { &.invalid {
border: deprecated.$s-1 solid var(--input-border-color-error); border: $b-1 solid var(--input-border-color-error);
&:hover, &:hover,
&:focus { &:focus {
border: deprecated.$s-1 solid var(--input-border-color-error); border: $b-1 solid var(--input-border-color-error);
} }
} }
} }
@ -356,36 +371,40 @@
.selected-items { .selected-items {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: deprecated.$s-4; gap: var(--sp-xs);
max-height: deprecated.$s-136; max-block-size: px2rem(136);
padding: deprecated.$s-4 0; padding: var(--sp-xs) 0;
overflow-y: auto; overflow-y: auto;
.selected-item { .selected-item {
.around { .around {
@include deprecated.flexRow; display: flex;
align-items: center;
height: deprecated.$s-24; gap: var(--sp-xs);
width: fit-content; block-size: $sz-24;
padding-left: deprecated.$s-6; inline-size: fit-content;
border-radius: deprecated.$br-6; padding-inline-start: px2rem(6);
border-radius: $br-6;
background-color: var(--pill-background-color); background-color: var(--pill-background-color);
border: deprecated.$s-1 solid var(--pill-background-color); border: $b-1 solid var(--pill-background-color);
box-sizing: border-box; box-sizing: border-box;
.text { .text {
@include deprecated.bodySmallTypography; @include t.use-typography("body-small");
padding-right: deprecated.$s-8; padding-inline-end: var(--sp-s);
color: var(--pill-foreground-color); color: var(--pill-foreground-color);
} }
.icon { .icon {
@include deprecated.flexCenter; display: flex;
@include deprecated.buttonStyle; justify-content: center;
align-items: center;
height: deprecated.$s-32; border: none;
width: deprecated.$s-24; background: none;
cursor: pointer;
block-size: $sz-32;
inline-size: $sz-24;
svg { svg {
@extend %button-icon-small; @extend %button-icon-small;
@ -414,92 +433,95 @@
.custom-radio { .custom-radio {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: deprecated.$s-16; gap: var(--sp-l);
} }
.radio-label { .radio-label {
@include deprecated.bodySmallTypography; @include t.use-typography("body-small");
@include deprecated.flexRow;
display: flex;
align-items: center;
align-items: flex-start; align-items: flex-start;
gap: deprecated.$s-8; gap: var(--sp-s);
min-height: deprecated.$s-32; min-block-size: $sz-32;
height: fit-content; block-size: fit-content;
border-radius: deprecated.$br-8; border-radius: var(--sp-s);
padding: deprecated.$s-8; padding: var(--sp-s);
color: var(--input-foreground-color-rest); color: var(--input-foreground-color-rest);
border: deprecated.$s-1 solid transparent; border: $b-1 solid transparent;
&:has(:focus-visible) { &:has(:focus-visible) {
outline: none; outline: none;
border: deprecated.$s-1 solid var(--input-border-color-active); border: $b-1 solid var(--input-border-color-active);
} }
} }
.radio-dot { .radio-dot {
height: deprecated.$s-8; block-size: var(--sp-s);
width: deprecated.$s-8; inline-size: var(--sp-s);
border-radius: deprecated.$br-circle; border-radius: $br-circle;
background-color: var(--color-background-tertiary); background-color: var(--color-background-tertiary);
} }
.radio-input { .radio-input {
width: 0; inline-size: 0;
margin: 0; margin: 0;
} }
.radio-icon { .radio-icon {
@extend %checkbox-icon; @extend %checkbox-icon;
border-radius: deprecated.$br-circle; border-radius: $br-circle;
} }
.radio-label-image { .radio-label-image {
@include deprecated.smallTitleTipography; @include t.use-typography("body-medium");
display: grid; display: grid;
grid-template-rows: auto auto 0; grid-template-rows: auto auto 0;
justify-items: center; justify-items: center;
gap: 0; gap: 0;
border-radius: deprecated.$br-8; border-radius: var(--sp-s);
margin: 0; margin: 0;
border: 1px solid var(--color-background-tertiary); border: $b-1 solid var(--color-background-tertiary);
cursor: pointer; cursor: pointer;
&:global(.checked) { &:global(.checked) {
border: 1px solid var(--color-accent-primary); border: $b-1 solid var(--color-accent-primary);
} }
&:focus, &:focus,
&:focus-within { &:focus-within {
outline: none; outline: none;
border: deprecated.$s-1 solid var(--input-border-color-active); border: $b-1 solid var(--input-border-color-active);
} }
.image-text { .image-text {
color: var(--input-foreground-color-rest); color: var(--input-foreground-color-rest);
display: grid; display: grid;
align-self: center; align-self: center;
margin-bottom: deprecated.$s-16; margin-block-end: var(--sp-l);
padding-inline: deprecated.$s-8; padding-inline: var(--sp-s);
text-align: center; text-align: center;
} }
} }
.image-inside { .image-inside {
margin: deprecated.$s-16; margin: var(--sp-l);
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
.icon-inside { .icon-inside {
margin: deprecated.$s-16; margin: var(--sp-l);
display: flex;
@include deprecated.flexCenter; justify-content: center;
align-items: center;
svg { svg {
width: 40px; inline-size: 40px;
height: 60px; block-size: 60px;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
fill: none; fill: none;
} }
@ -508,11 +530,10 @@
// TEXTAREA // TEXTAREA
.textarea-label { .textarea-label {
@include deprecated.uppercaseTitleTipography; @include t.use-typography("headline-small");
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
text-transform: uppercase; margin-block-end: var(--sp-s);
margin-bottom: deprecated.$s-8;
} }
.textarea-wrapper { .textarea-wrapper {