From 1af269180c33935e86ecfa1355aeeb9292b08beb Mon Sep 17 00:00:00 2001 From: Jeri Peier Date: Thu, 19 Dec 2024 14:19:36 +0100 Subject: [PATCH] fix(sbb-accent-button): adapt to new design (#3313) --- src/elements/button/common/accent-button.scss | 24 +++++++++++++++---- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/src/elements/button/common/accent-button.scss b/src/elements/button/common/accent-button.scss index 9d13e759f4..66301c0468 100644 --- a/src/elements/button/common/accent-button.scss +++ b/src/elements/button/common/accent-button.scss @@ -1,17 +1,31 @@ :host { - --sbb-button-color-active-background: var(--sbb-color-black); - --sbb-button-color-active-border: var(--sbb-color-cloud); + --sbb-button-color-active-background: var(--sbb-color-midnight); + --sbb-button-color-active-border: var(--sbb-color-midnight); --sbb-button-color-active-text: var(--sbb-color-cloud); --sbb-button-color-default-background: var(--sbb-color-charcoal); - --sbb-button-color-default-border: var(--sbb-color-cloud); + --sbb-button-color-default-border: var(--sbb-color-charcoal); --sbb-button-color-default-text: var(--sbb-color-white); - --sbb-button-color-hover-background: var(--sbb-color-midnight); - --sbb-button-color-hover-border: var(--sbb-color-cloud); + --sbb-button-color-hover-background: var(--sbb-color-charcoal); + --sbb-button-color-hover-border: var(--sbb-color-charcoal); --sbb-button-color-hover-text: var(--sbb-color-milk); --sbb-button-shadow-1-color: var(--sbb-color-platinum-alpha-20); --sbb-button-shadow-2-color: var(--sbb-color-cement-alpha-20); } +:host([negative]) { + --sbb-button-color-active-background: var(--sbb-color-white); + --sbb-button-color-active-border: var(--sbb-color-white); + --sbb-button-color-active-text: var(--sbb-color-anthracite); + --sbb-button-color-default-background: var(--sbb-color-milk); + --sbb-button-color-default-border: var(--sbb-color-milk); + --sbb-button-color-default-text: var(--sbb-color-midnight); + --sbb-button-color-hover-background: var(--sbb-color-milk); + --sbb-button-color-hover-border: var(--sbb-color-milk); + --sbb-button-color-hover-text: var(--sbb-color-iron); + --sbb-button-shadow-1-color: var(--sbb-color-black-alpha-30); + --sbb-button-shadow-2-color: var(--sbb-color-black-alpha-30); +} + :host(:not([disabled], :disabled, [disabled-interactive], :active, [data-active])) { --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition); }