Penpot/penpot-plugins
0
Fork 0
mirror of https://github.com/penpot/penpot-plugins.git synced 2025-01-07 15:39:49 -05:00
Code Issues Activity

feat: update lorem ipsum plugin styles

Browse source
This commit is contained in:
Juanfran 2024-05-24 10:30:50 +02:00
parent 24d11f9b6a
commit 3d70eb06d6
3 changed files with 173 additions and 167 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
apps/lorem-ipsum-plugin/src/app/app.component.css
View file

@ -32,7 +32,6 @@ section {
.regular-generate { .regular-generate {
padding-block-end: var(--spacing-24); padding-block-end: var(--spacing-24);
border-block-end: 2px solid var(--background-quaternary);
button { button {
margin-block-start: var(--spacing-12); margin-block-start: var(--spacing-12);

2
apps/lorem-ipsum-plugin/src/app/app.component.ts
View file

@ -35,7 +35,7 @@ import { filter, fromEvent, map, merge, take } from 'rxjs';
<option value="characters">Characters</option> <option value="characters">Characters</option>
</select> </select>
</div> </div>
<button type="submit" data-appearance="secondary">Generate</button> <button type="submit" data-appearance="primary">Generate</button>
</section> </section>
<section class="extra-options"> <section class="extra-options">
<div class="checkbox-container"> <div class="checkbox-container">

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

@ -1,183 +1,190 @@
button { button {
border: 1px solid transparent; border: 1px solid transparent;
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
border-radius: 8px; border-radius: 8px;
line-height: 1.2; line-height: 1.2;
padding: 8px 24px 8px 24px; padding: 8px 24px 8px 24px;
text-transform: uppercase; text-transform: uppercase;
&:hover:not(:disabled) {
cursor: pointer;
}
&:focus-visible {
outline: none;
}
}
[data-theme='dark'] {
[data-appearance='primary']:is(button) {
background-color: var(--da-primary);
border: 1px solid var(--da-primary);
outline: 2px solid transparent;
color: var(--db-secondary);
&:hover:not(:disabled) { &:hover:not(:disabled) {
cursor: pointer; background-color: var(--da-tertiary);
border: 1px solid var(--da-tertiary);
} }
&:focus-visible { &:focus:not(:disabled),
outline: none; &:focus-visible:not(:disabled) {
} border: 1px solid var(--db-primary);
} outline: 2px solid var(--da-primary);
[data-theme="dark"] {
[data-appearance="primary"]:is(button) {
background-color: var(--da-primary);
border: 1px solid var(--da-primary);
outline: 2px solid transparent;
&:hover:not(:disabled) {
background-color: var(--da-tertiary);
border: 1px solid var(--da-tertiary);
}
&:focus:not(:disabled), &:focus-visible:not(:disabled) {
border: 1px solid var(--db-primary);
outline: 2px solid var(--da-primary);
}
&:active:not(:disabled) {
border: 1px solid var(--da-primary);
outline: 2px solid var(--da-tertiary);
}
&:disabled {
background-color: transparent;
border: 1px solid var(--db-quaternary);
color: var(--df-secondary);
}
&[data-variant="destructive"] {
background-color: var(--error-500);
border: 1px solid var(--error-500);
outline: 2px solid transparent;
&:hover:not(:disabled) {
background-color: var(--error-700);
border: 1px solid var(--error-700);
}
&:focus:not(:disabled), &:focus-visible:not(:disabled) {
border: 1px solid var(--db-primary);
outline: 2px solid var(--error-500);
}
&:active:not(:disabled) {
background-color: var(--app-red);
border: 1px solid var(--app-red);
outline: 2px solid var(--error-700);
}
&:disabled {
background-color: transparent;
border: 1px solid var(--error-950);
color: var(--df-secondary);
}
}
} }
[data-appearance="secondary"]:is(button) { &:active:not(:disabled) {
background-color: var(--db-tertiary); border: 1px solid var(--da-primary);
outline: 2px solid var(--da-tertiary);
}
&:disabled {
background-color: transparent;
border: 1px solid var(--db-quaternary);
color: var(--df-secondary);
}
&[data-variant='destructive'] {
background-color: var(--error-500);
border: 1px solid var(--error-500);
outline: 2px solid transparent;
&:hover:not(:disabled) {
background-color: var(--error-700);
border: 1px solid var(--error-700);
}
&:focus:not(:disabled),
&:focus-visible:not(:disabled) {
border: 1px solid var(--db-primary);
outline: 2px solid var(--error-500);
}
&:active:not(:disabled) {
background-color: var(--app-red);
border: 1px solid var(--app-red);
outline: 2px solid var(--error-700);
}
&:disabled {
background-color: transparent;
border: 1px solid var(--error-950);
color: var(--df-secondary); color: var(--df-secondary);
}
&:hover:not(:disabled) {
background-color: var(--db-quaternary);
color: var(--da-primary);
}
&:focus:not(:disabled), &:focus-visible:not(:disabled) {
border: 1px solid var(--da-primary);
}
&:active:not(:disabled) {
color: var(--da-primary);
outline: 2px solid var(--db-quaternary);
}
&:disabled {
background-color: transparent;
border: 1px solid var(--db-quaternary);
}
} }
}
[data-appearance='secondary']:is(button) {
background-color: var(--db-tertiary);
color: var(--df-secondary);
&:hover:not(:disabled) {
background-color: var(--db-quaternary);
color: var(--da-primary);
}
&:focus:not(:disabled),
&:focus-visible:not(:disabled) {
border: 1px solid var(--da-primary);
}
&:active:not(:disabled) {
color: var(--da-primary);
outline: 2px solid var(--db-quaternary);
}
&:disabled {
background-color: transparent;
border: 1px solid var(--db-quaternary);
}
}
} }
[data-theme="light"] { [data-theme='light'] {
[data-appearance="primary"]:is(button) { [data-appearance='primary']:is(button) {
background-color: var(--la-primary); background-color: var(--la-primary);
color: var(--lb-primary);
&:hover:not(:disabled) {
background-color: var(--la-tertiary);
}
&:focus:not(:disabled),
&:focus-visible:not(:disabled) {
border: 1px solid var(--lb-primary);
outline: 2px solid var(--la-primary);
}
&:active:not(:disabled) {
border: 1px solid var(--la-primary);
outline: 2px solid var(--la-tertiary);
}
&:disabled {
background-color: transparent;
border: 1px solid var(--lb-quaternary);
color: var(--lf-secondary);
}
&[data-variant='destructive'] {
background-color: transparent;
border: 1px solid var(--error-200);
color: var(--lf-secondary);
&:hover:not(:disabled) {
background-color: var(--error-500);
color: var(--lb-secondary);
border: 1px solid var(--lb-primary);
outline: 2px solid var(--error-500);
}
&:focus:not(:disabled),
&:focus-visible:not(:disabled) {
background-color: var(--error-700);
border: 1px solid var(--error-700);
color: var(--lb-secondary);
outline: 2px solid var(--error-700);
}
&:active:not(:disabled) {
background-color: var(--app-red);
color: var(--lb-primary); color: var(--lb-primary);
outline: 2px solid var(--error-700);
}
&:hover:not(:disabled) { &:disabled {
background-color: var(--la-tertiary); background-color: var(--error-500);
} color: var(--lb-secondary);
}
}
}
&:focus:not(:disabled), &:focus-visible:not(:disabled) { [data-appearance='secondary']:is(button) {
border: 1px solid var(--lb-primary); background-color: var(--lb-tertiary);
outline: 2px solid var(--la-primary); color: var(--lf-secondary);
}
&:active:not(:disabled) { &:hover:not(:disabled) {
border: 1px solid var(--la-primary); background-color: var(--lb-quaternary);
outline: 2px solid var(--la-tertiary); color: var(--la-primary);
}
&:disabled {
background-color: transparent;
border: 1px solid var(--lb-quaternary);
color: var(--lf-secondary);
}
&[data-variant="destructive"] {
background-color: transparent;
border: 1px solid var(--error-200);
color: var(--lf-secondary);
&:hover:not(:disabled) {
background-color: var(--error-500);
color: var(--lb-secondary);
border: 1px solid var(--lb-primary);
outline: 2px solid var(--error-500);
}
&:focus:not(:disabled), &:focus-visible:not(:disabled) {
background-color: var(--error-700);
border: 1px solid var(--error-700);
color: var(--lb-secondary);
outline: 2px solid var(--error-700);
}
&:active:not(:disabled) {
background-color: var(--app-red);
color: var(--lb-primary);
outline: 2px solid var(--error-700);
}
&:disabled {
background-color: var(--error-500);
color: var(--lb-secondary);
}
}
} }
[data-appearance="secondary"]:is(button) { &:focus:not(:disabled),
background-color: var(--lb-tertiary); &:focus-visible:not(:disabled) {
color: var(--lf-secondary); background-color: var(--lb-tertiary);
border: 1px solid var(--la-primary);
&:hover:not(:disabled) { color: var(--lf-secondary);
background-color: var(--lb-quaternary);
color: var(--la-primary);
}
&:focus:not(:disabled), &:focus-visible:not(:disabled) {
background-color: var(--lb-tertiary);
border: 1px solid var(--la-primary);
color: var(--lf-secondary);
}
&:active:not(:disabled) {
background-color: var(--lb-tertiary);
color: var(--la-primary);
outline: 2px solid var(--lb-quaternary);
}
&:disabled {
background-color: transparent;
border: 1px solid var(--lb-quaternary);
}
} }
}
&:active:not(:disabled) {
background-color: var(--lb-tertiary);
color: var(--la-primary);
outline: 2px solid var(--lb-quaternary);
}
&:disabled {
background-color: transparent;
border: 1px solid var(--lb-quaternary);
}
}
}