Penpot/penpot-plugins
0
Fork 0
mirror of https://github.com/penpot/penpot-plugins.git synced 2025-01-08 07:50:44 -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">

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

@ -16,18 +16,20 @@ button {
} }
} }
[data-theme="dark"] { [data-theme='dark'] {
[data-appearance="primary"]:is(button) { [data-appearance='primary']:is(button) {
background-color: var(--da-primary); background-color: var(--da-primary);
border: 1px solid var(--da-primary); border: 1px solid var(--da-primary);
outline: 2px solid transparent; outline: 2px solid transparent;
color: var(--db-secondary);
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--da-tertiary); background-color: var(--da-tertiary);
border: 1px solid var(--da-tertiary); border: 1px solid var(--da-tertiary);
} }
&:focus:not(:disabled), &:focus-visible:not(:disabled) { &:focus:not(:disabled),
&:focus-visible:not(:disabled) {
border: 1px solid var(--db-primary); border: 1px solid var(--db-primary);
outline: 2px solid var(--da-primary); outline: 2px solid var(--da-primary);
} }
@ -43,7 +45,7 @@ button {
color: var(--df-secondary); color: var(--df-secondary);
} }
&[data-variant="destructive"] { &[data-variant='destructive'] {
background-color: var(--error-500); background-color: var(--error-500);
border: 1px solid var(--error-500); border: 1px solid var(--error-500);
outline: 2px solid transparent; outline: 2px solid transparent;
@ -53,7 +55,8 @@ button {
border: 1px solid var(--error-700); border: 1px solid var(--error-700);
} }
&:focus:not(:disabled), &:focus-visible:not(:disabled) { &:focus:not(:disabled),
&:focus-visible:not(:disabled) {
border: 1px solid var(--db-primary); border: 1px solid var(--db-primary);
outline: 2px solid var(--error-500); outline: 2px solid var(--error-500);
} }
@ -72,7 +75,7 @@ button {
} }
} }
[data-appearance="secondary"]:is(button) { [data-appearance='secondary']:is(button) {
background-color: var(--db-tertiary); background-color: var(--db-tertiary);
color: var(--df-secondary); color: var(--df-secondary);
@ -81,7 +84,8 @@ button {
color: var(--da-primary); color: var(--da-primary);
} }
&:focus:not(:disabled), &:focus-visible:not(:disabled) { &:focus:not(:disabled),
&:focus-visible:not(:disabled) {
border: 1px solid var(--da-primary); border: 1px solid var(--da-primary);
} }
@ -97,8 +101,8 @@ button {
} }
} }
[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); color: var(--lb-primary);
@ -106,7 +110,8 @@ button {
background-color: var(--la-tertiary); background-color: var(--la-tertiary);
} }
&:focus:not(:disabled), &:focus-visible:not(:disabled) { &:focus:not(:disabled),
&:focus-visible:not(:disabled) {
border: 1px solid var(--lb-primary); border: 1px solid var(--lb-primary);
outline: 2px solid var(--la-primary); outline: 2px solid var(--la-primary);
} }
@ -122,7 +127,7 @@ button {
color: var(--lf-secondary); color: var(--lf-secondary);
} }
&[data-variant="destructive"] { &[data-variant='destructive'] {
background-color: transparent; background-color: transparent;
border: 1px solid var(--error-200); border: 1px solid var(--error-200);
color: var(--lf-secondary); color: var(--lf-secondary);
@ -134,7 +139,8 @@ button {
outline: 2px solid var(--error-500); outline: 2px solid var(--error-500);
} }
&:focus:not(:disabled), &:focus-visible:not(:disabled) { &:focus:not(:disabled),
&:focus-visible:not(:disabled) {
background-color: var(--error-700); background-color: var(--error-700);
border: 1px solid var(--error-700); border: 1px solid var(--error-700);
color: var(--lb-secondary); color: var(--lb-secondary);
@ -154,7 +160,7 @@ button {
} }
} }
[data-appearance="secondary"]:is(button) { [data-appearance='secondary']:is(button) {
background-color: var(--lb-tertiary); background-color: var(--lb-tertiary);
color: var(--lf-secondary); color: var(--lf-secondary);
@ -163,7 +169,8 @@ button {
color: var(--la-primary); color: var(--la-primary);
} }
&:focus:not(:disabled), &:focus-visible:not(:disabled) { &:focus:not(:disabled),
&:focus-visible:not(:disabled) {
background-color: var(--lb-tertiary); background-color: var(--lb-tertiary);
border: 1px solid var(--la-primary); border: 1px solid var(--la-primary);
color: var(--lf-secondary); color: var(--lf-secondary);