From ab4aa8b2523fe28459981257680989c9e0cb2c01 Mon Sep 17 00:00:00 2001 From: Juanfran Date: Wed, 29 May 2024 09:04:01 +0200 Subject: [PATCH] fix: t#7933 review --- .../src/app/app.component.ts | 2 +- .../src/lib/components/button.css | 62 +++++++++---------- 2 files changed, 29 insertions(+), 35 deletions(-) diff --git a/apps/lorem-ipsum-plugin/src/app/app.component.ts b/apps/lorem-ipsum-plugin/src/app/app.component.ts index 1bef345..d800857 100644 --- a/apps/lorem-ipsum-plugin/src/app/app.component.ts +++ b/apps/lorem-ipsum-plugin/src/app/app.component.ts @@ -93,7 +93,7 @@ export class AppComponent { num: new FormControl(1, { nonNullable: true }), type: new FormControl('paragraphs', { nonNullable: true }), startWith: new FormControl(true, { nonNullable: true }), - autoClose: new FormControl(true, { nonNullable: true }), + autoClose: new FormControl(false, { nonNullable: true }), }); constructor() { diff --git a/libs/plugins-styles/src/lib/components/button.css b/libs/plugins-styles/src/lib/components/button.css index db17b7b..ec3972b 100644 --- a/libs/plugins-styles/src/lib/components/button.css +++ b/libs/plugins-styles/src/lib/components/button.css @@ -1,5 +1,5 @@ button { - border: 1px solid transparent; + border: 2px solid transparent; font-weight: 500; font-size: 12px; border-radius: 8px; @@ -19,58 +19,53 @@ button { [data-theme='dark'] { [data-appearance='primary']:is(button) { background-color: var(--da-primary); - border: 1px solid var(--da-primary); - outline: 2px solid transparent; + border: 2px solid transparent; color: var(--db-secondary); &:hover:not(:disabled) { background-color: var(--da-tertiary); - border: 1px solid var(--da-tertiary); + border: 2px solid var(--da-tertiary); } &:focus:not(:disabled), &:focus-visible:not(:disabled) { - border: 1px solid var(--db-primary); - outline: 2px solid var(--da-primary); + border: 2px solid var(--da-primary); + background-color: var(--db-tertiary); + color: var(--df-secondary); } &:active:not(:disabled) { - border: 1px solid var(--da-primary); - outline: 2px solid var(--da-tertiary); + border: 2px solid var(--da-tertiary); } &:disabled { background-color: transparent; - border: 1px solid var(--db-quaternary); + border: 2px 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; + border: 2px solid transparent; &:hover:not(:disabled) { background-color: var(--error-700); - border: 1px solid var(--error-700); + border: 2px solid var(--error-700); } &:focus:not(:disabled), &:focus-visible:not(:disabled) { - border: 1px solid var(--db-primary); - outline: 2px solid var(--error-500); + border: 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); + border: 2px solid var(--error-700); } &:disabled { background-color: transparent; - border: 1px solid var(--error-950); - color: var(--df-secondary); + border: var(--df-secondary); } } } @@ -86,17 +81,17 @@ button { &:focus:not(:disabled), &:focus-visible:not(:disabled) { - border: 1px solid var(--da-primary); + border: 2px solid var(--da-primary); } &:active:not(:disabled) { color: var(--da-primary); - outline: 2px solid var(--db-quaternary); + border: 2px solid var(--db-quaternary); } &:disabled { background-color: transparent; - border: 1px solid var(--db-quaternary); + border: 2px solid var(--db-quaternary); } } } @@ -112,45 +107,44 @@ button { &:focus:not(:disabled), &:focus-visible:not(:disabled) { - border: 1px solid var(--lb-primary); - outline: 2px solid var(--la-primary); + color: var(--lf-secondary); + background-color: var(--lb-tertiary); + border: 2px solid var(--la-primary); } &:active:not(:disabled) { - border: 1px solid var(--la-primary); - outline: 2px solid var(--la-tertiary); + border: 2px solid var(--la-tertiary); } &:disabled { background-color: transparent; - border: 1px solid var(--lb-quaternary); + border: 2px solid var(--lb-quaternary); color: var(--lf-secondary); } &[data-variant='destructive'] { background-color: transparent; - border: 1px solid var(--error-200); + border: 2px 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); + border: 2px solid var(--error-500); } &:focus:not(:disabled), &:focus-visible:not(:disabled) { background-color: var(--error-700); - border: 1px solid var(--error-700); + border: 2px solid var(--error-700); color: var(--lb-secondary); - outline: 2px solid var(--error-700); + border: 2px solid var(--error-700); } &:active:not(:disabled) { background-color: var(--app-red); color: var(--lb-primary); - outline: 2px solid var(--error-700); + border: 2px solid var(--error-700); } &:disabled { @@ -172,7 +166,7 @@ button { &:focus:not(:disabled), &:focus-visible:not(:disabled) { background-color: var(--lb-tertiary); - border: 1px solid var(--la-primary); + border: 2px solid var(--la-primary); color: var(--lf-secondary); } @@ -184,7 +178,7 @@ button { &:disabled { background-color: transparent; - border: 1px solid var(--lb-quaternary); + border: 2px solid var(--lb-quaternary); } } }