Penpot/penpot-plugins
0
Fork 0
mirror of https://github.com/penpot/penpot-plugins.git synced 2025-02-02 04:19:14 -05:00
Code Issues Activity

fix: t#7933 review

Browse source
This commit is contained in:
Juanfran 2024-05-29 09:04:01 +02:00
parent 8f4080c2a9
commit ab4aa8b252
2 changed files with 29 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -93,7 +93,7 @@ export class AppComponent {
num: new FormControl<number>(1, { nonNullable: true }), num: new FormControl<number>(1, { nonNullable: true }),
type: new FormControl<GenerationTypes>('paragraphs', { nonNullable: true }), type: new FormControl<GenerationTypes>('paragraphs', { nonNullable: true }),
startWith: new FormControl(true, { nonNullable: true }), startWith: new FormControl(true, { nonNullable: true }),
autoClose: new FormControl(true, { nonNullable: true }), autoClose: new FormControl(false, { nonNullable: true }),
}); });
constructor() { constructor() {

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

@ -1,5 +1,5 @@
button { button {
border: 1px solid transparent; border: 2px solid transparent;
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
border-radius: 8px; border-radius: 8px;
@ -19,58 +19,53 @@ 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: 2px solid transparent;
outline: 2px solid transparent;
color: var(--db-secondary); 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: 2px solid var(--da-tertiary);
} }
&:focus:not(:disabled), &:focus:not(:disabled),
&:focus-visible:not(:disabled) { &:focus-visible:not(:disabled) {
border: 1px solid var(--db-primary); border: 2px solid var(--da-primary);
outline: 2px solid var(--da-primary); background-color: var(--db-tertiary);
color: var(--df-secondary);
} }
&:active:not(:disabled) { &:active:not(:disabled) {
border: 1px solid var(--da-primary); border: 2px solid var(--da-tertiary);
outline: 2px solid var(--da-tertiary);
} }
&:disabled { &:disabled {
background-color: transparent; background-color: transparent;
border: 1px solid var(--db-quaternary); border: 2px solid var(--db-quaternary);
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: 2px solid transparent;
outline: 2px solid transparent;
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--error-700); background-color: var(--error-700);
border: 1px solid var(--error-700); border: 2px solid var(--error-700);
} }
&:focus:not(:disabled), &:focus:not(:disabled),
&:focus-visible:not(:disabled) { &:focus-visible:not(:disabled) {
border: 1px solid var(--db-primary); border: 2px solid var(--error-500);
outline: 2px solid var(--error-500);
} }
&:active:not(:disabled) { &:active:not(:disabled) {
background-color: var(--app-red); background-color: var(--app-red);
border: 1px solid var(--app-red); border: 2px solid var(--error-700);
outline: 2px solid var(--error-700);
} }
&:disabled { &:disabled {
background-color: transparent; background-color: transparent;
border: 1px solid var(--error-950); border: var(--df-secondary);
color: var(--df-secondary);
} }
} }
} }
@ -86,17 +81,17 @@ button {
&:focus:not(:disabled), &:focus:not(:disabled),
&:focus-visible:not(:disabled) { &:focus-visible:not(:disabled) {
border: 1px solid var(--da-primary); border: 2px solid var(--da-primary);
} }
&:active:not(:disabled) { &:active:not(:disabled) {
color: var(--da-primary); color: var(--da-primary);
outline: 2px solid var(--db-quaternary); border: 2px solid var(--db-quaternary);
} }
&:disabled { &:disabled {
background-color: transparent; background-color: transparent;
border: 1px solid var(--db-quaternary); border: 2px solid var(--db-quaternary);
} }
} }
} }
@ -112,45 +107,44 @@ button {
&:focus:not(:disabled), &:focus:not(:disabled),
&:focus-visible:not(:disabled) { &:focus-visible:not(:disabled) {
border: 1px solid var(--lb-primary); color: var(--lf-secondary);
outline: 2px solid var(--la-primary); background-color: var(--lb-tertiary);
border: 2px solid var(--la-primary);
} }
&:active:not(:disabled) { &:active:not(:disabled) {
border: 1px solid var(--la-primary); border: 2px solid var(--la-tertiary);
outline: 2px solid var(--la-tertiary);
} }
&:disabled { &:disabled {
background-color: transparent; background-color: transparent;
border: 1px solid var(--lb-quaternary); border: 2px solid var(--lb-quaternary);
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: 2px solid var(--error-200);
color: var(--lf-secondary); color: var(--lf-secondary);
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--error-500); background-color: var(--error-500);
color: var(--lb-secondary); color: var(--lb-secondary);
border: 1px solid var(--lb-primary); border: 2px solid var(--error-500);
outline: 2px solid var(--error-500);
} }
&:focus:not(:disabled), &:focus:not(:disabled),
&:focus-visible:not(:disabled) { &:focus-visible:not(:disabled) {
background-color: var(--error-700); background-color: var(--error-700);
border: 1px solid var(--error-700); border: 2px solid var(--error-700);
color: var(--lb-secondary); color: var(--lb-secondary);
outline: 2px solid var(--error-700); border: 2px solid var(--error-700);
} }
&:active:not(:disabled) { &:active:not(:disabled) {
background-color: var(--app-red); background-color: var(--app-red);
color: var(--lb-primary); color: var(--lb-primary);
outline: 2px solid var(--error-700); border: 2px solid var(--error-700);
} }
&:disabled { &:disabled {
@ -172,7 +166,7 @@ button {
&:focus:not(:disabled), &:focus:not(:disabled),
&:focus-visible:not(:disabled) { &:focus-visible:not(:disabled) {
background-color: var(--lb-tertiary); background-color: var(--lb-tertiary);
border: 1px solid var(--la-primary); border: 2px solid var(--la-primary);
color: var(--lf-secondary); color: var(--lf-secondary);
} }
@ -184,7 +178,7 @@ button {
&:disabled { &:disabled {
background-color: transparent; background-color: transparent;
border: 1px solid var(--lb-quaternary); border: 2px solid var(--lb-quaternary);
} }
} }
} }