Penpot/penpot-plugins
0
Fork 0
mirror of https://github.com/penpot/penpot-plugins.git synced 2025-02-09 08:38:18 -05:00
Code Issues Activity

fix(styles): input, button & select worksans font family

Browse source
This commit is contained in:
Juanfran 2024-07-04 14:46:49 +02:00
parent f36fa23c08
commit 1b9d3b2685
3 changed files with 102 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
libs/plugins-styles/src/lib/components/button.css
View file

@ -6,6 +6,7 @@
line-height: 1.2;
padding: 8px 24px 8px 24px;
text-transform: uppercase;
font-family: inherit;
&:hover:not(:disabled) {
cursor: pointer;

199
libs/plugins-styles/src/lib/components/input.css
View file

@ -1,112 +1,113 @@
.input-label-hidden {
block-size: 1px;
border: 0;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
inline-size: 1px;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
block-size: 1px;
border: 0;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
inline-size: 1px;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
}
[data-theme="dark"] {
& .input {
background-color: var(--db-tertiary);
border-color: var(--db-tertiary);
color: var(--df-primary);
[data-theme='dark'] {
& .input {
background-color: var(--db-tertiary);
border-color: var(--db-tertiary);
color: var(--df-primary);
&:focus {
border-color: var(--da-primary);
}
&:hover {
background-color: var(--db-quaternary);
border-color: var(--db-quaternary);
}
&:focus {
background-color: var(--db-primary);
border-color: var(--da-primary);
}
&:disabled {
background-color: var(--db-primary);
border-color: var(--db-quaternary);
cursor: not-allowed;
}
&::placeholder {
color: var(--df-secondary);
}
&.success {
background-color: var(--db-primary);
border-color: var(--da-tertiary);
}
&.error {
background-color: var(--db-primary);
}
&:focus {
border-color: var(--da-primary);
}
&:hover {
background-color: var(--db-quaternary);
border-color: var(--db-quaternary);
}
&:focus {
background-color: var(--db-primary);
border-color: var(--da-primary);
}
&:disabled {
background-color: var(--db-primary);
border-color: var(--db-quaternary);
cursor: not-allowed;
}
&::placeholder {
color: var(--df-secondary);
}
&.success {
background-color: var(--db-primary);
border-color: var(--da-tertiary);
}
&.error {
background-color: var(--db-primary);
}
}
}
[data-theme="light"] {
& .input {
background-color: var(--lb-tertiary);
border-color: var(--lb-tertiary);
color: var(--lf-primary);
[data-theme='light'] {
& .input {
background-color: var(--lb-tertiary);
border-color: var(--lb-tertiary);
color: var(--lf-primary);
&:focus {
background-color: var(--lb-secondary);
border-color: var(--la-primary);
}
&:hover {
background-color: var(--lb-quaternary);
border-color: var(--lb-quaternary);
}
&:focus {
background-color: var(--lb-primary);
border-color: var(--la-primary);
}
&:disabled {
background-color: var(--lb-primary);
border-color: var(--lb-quaternary);
cursor: not-allowed;
}
&::placeholder {
color: var(--lf-secondary);
}
&.success {
background-color: var(--lb-primary);
border-color: var(--la-tertiary);
}
&.error {
background-color: var(--lb-primary);
}
&:focus {
background-color: var(--lb-secondary);
border-color: var(--la-primary);
}
&:hover {
background-color: var(--lb-quaternary);
border-color: var(--lb-quaternary);
}
&:focus {
background-color: var(--lb-primary);
border-color: var(--la-primary);
}
&:disabled {
background-color: var(--lb-primary);
border-color: var(--lb-quaternary);
cursor: not-allowed;
}
&::placeholder {
color: var(--lf-secondary);
}
&.success {
background-color: var(--lb-primary);
border-color: var(--la-tertiary);
}
&.error {
background-color: var(--lb-primary);
}
}
}
.input {
display: flex;
border: 1px solid;
border-radius: var(--spacing-8);
font-size: var(--font-size-s);
font-weight: var(--font-weight-regular);
line-height: var(--font-line-height-m);
outline: none;
padding-block: var(--spacing-8);
padding-inline: var(--spacing-8);
display: flex;
border: 1px solid;
border-radius: var(--spacing-8);
font-family: inherit;
font-size: var(--font-size-s);
font-weight: var(--font-weight-regular);
line-height: var(--font-line-height-m);
outline: none;
padding-block: var(--spacing-8);
padding-inline: var(--spacing-8);
&.error {
border-color: var(--error-500);
}
}
&.error {
border-color: var(--error-500);
}
}

1
libs/plugins-styles/src/lib/components/select.css
View file

@ -9,6 +9,7 @@
box-sizing: border-box;
cursor: pointer;
inline-size: 100%;
font-family: inherit;
font-size: var(--font-size-s);
font-weight: var(--font-weight-regular);
line-height: var(--font-line-height-m);