From d786b0a6fa803d47d785024909eeb4f11eec79c8 Mon Sep 17 00:00:00 2001 From: Valentin Mladenov Date: Wed, 11 Dec 2024 13:28:50 +0200 Subject: [PATCH] fix(buttons): replace click with active tokens (#1638) ## PR Checklist Please check if your PR fulfills the following requirements: - [ ] Tests for the changes have been added (for bug fixes / features) - [ ] Docs have been added / updated (for bug fixes / features) - [ ] If applicable, have a visual design approval ## PR Type What kind of change does this PR introduce? - [x] Bugfix - [ ] Feature - [ ] Code style update (formatting, local variables) - [ ] Refactoring (no functional changes, no api changes) - [ ] Build related changes - [ ] CI related changes - [ ] Documentation content changes - [ ] Other... Please describe: ## What is the current behavior? Buttons are using status click tokens for active background color. Issue Number: CDE-2473, CDE-2475 ## What is the new behavior? Adding active interaction status tokens. Buttons are using status active tokens for active background color. ## Does this PR introduce a breaking change? - [ ] Yes - [x] No ## Other information --- projects/angular/src/button/_properties.buttons.scss | 12 ++++++------ projects/ui/src/temp-overrides.scss | 12 ++++++++++++ 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/projects/angular/src/button/_properties.buttons.scss b/projects/angular/src/button/_properties.buttons.scss index 61d343e50f..beb828c6b1 100644 --- a/projects/angular/src/button/_properties.buttons.scss +++ b/projects/angular/src/button/_properties.buttons.scss @@ -82,7 +82,7 @@ --clr-btn-primary-hover-bg-color: #{tokens.$cds-alias-object-interaction-info-hover}; --clr-btn-primary-hover-color: var(--clr-btn-primary-color); --clr-btn-primary-active-color: #{tokens.$cds-alias-typography-color-100}; - --clr-btn-primary-active-bg-color: #{tokens.$cds-alias-object-interaction-info-click}; + --clr-btn-primary-active-bg-color: var(--cds-alias-object-interaction-info-active); --clr-btn-primary-disabled-color: #{tokens.$cds-alias-typography-disabled-button}; --clr-btn-primary-disabled-bg-color: #{tokens.$cds-alias-status-disabled}; @@ -112,7 +112,7 @@ --clr-btn-success-hover-bg-color: #{tokens.$cds-alias-object-interaction-success-hover}; --clr-btn-success-hover-color: var(--clr-btn-success-color); --clr-btn-success-active-color: #{tokens.$cds-alias-typography-color-100}; - --clr-btn-success-active-bg-color: #{tokens.$cds-alias-object-interaction-success-click}; + --clr-btn-success-active-bg-color: var(--cds-alias-object-interaction-success-active); --clr-btn-success-disabled-color: #{tokens.$cds-alias-typography-disabled-button}; --clr-btn-success-disabled-bg-color: #{tokens.$cds-alias-status-disabled}; @@ -141,7 +141,7 @@ --clr-btn-danger-border-color: var(--clr-btn-danger-bg-color); --clr-btn-danger-hover-bg-color: #{tokens.$cds-alias-object-interaction-danger-hover}; --clr-btn-danger-hover-color: var(--clr-btn-danger-color); - --clr-btn-danger-active-bg-color: #{tokens.$cds-alias-object-interaction-danger-click}; + --clr-btn-danger-active-bg-color: var(--cds-alias-object-interaction-danger-active); --clr-btn-danger-active-color: #{tokens.$cds-alias-typography-color-100}; --clr-btn-danger-disabled-color: #{tokens.$cds-alias-typography-disabled-button}; @@ -171,7 +171,7 @@ --clr-btn-warning-border-color: var(--clr-btn-warning-bg-color); --clr-btn-warning-hover-bg-color: #{tokens.$cds-alias-object-interaction-warning-hover}; --clr-btn-warning-hover-color: var(--clr-btn-warning-color); - --clr-btn-warning-active-bg-color: #{tokens.$cds-alias-object-interaction-warning-click}; + --clr-btn-warning-active-bg-color: var(--cds-alias-object-interaction-warning-active); --clr-btn-warning-active-color: var(--clr-btn-warning-color); --clr-btn-warning-disabled-color: #{tokens.$cds-alias-typography-disabled-button}; @@ -201,7 +201,7 @@ --clr-btn-neutral-border-color: var(--clr-btn-neutral-bg-color); --clr-btn-neutral-hover-bg-color: #{tokens.$cds-alias-object-interaction-neutral-hover}; --clr-btn-neutral-hover-color: var(--clr-btn-neutral-color); - --clr-btn-neutral-active-bg-color: #{tokens.$cds-alias-object-interaction-neutral-click}; + --clr-btn-neutral-active-bg-color: var(--cds-alias-object-interaction-neutral-active); --clr-btn-neutral-active-color: var(--clr-btn-neutral-color); --clr-btn-neutral-disabled-color: #{tokens.$cds-alias-typography-disabled-button}; @@ -319,7 +319,7 @@ --clr-btn-inverse-bg-color: var(--clr-btn-transparent-bg-color); --clr-btn-inverse-hover-bg-color: #{tokens.$cds-alias-object-interaction-inverse-hover}; --clr-btn-inverse-hover-color: var(--clr-btn-inverse-color); // var(--clr-color-neutral-0); - --clr-btn-inverse-active-bg-color: #{tokens.$cds-alias-object-interaction-inverse-click}; + --clr-btn-inverse-active-bg-color: var(--cds-alias-object-interaction-inverse-active); --clr-btn-inverse-active-color: #{tokens.$cds-global-color-white}; --clr-btn-inverse-disabled-color: #{tokens.$cds-alias-typography-disabled}; diff --git a/projects/ui/src/temp-overrides.scss b/projects/ui/src/temp-overrides.scss index dc10cc7ff1..ca9b33050a 100644 --- a/projects/ui/src/temp-overrides.scss +++ b/projects/ui/src/temp-overrides.scss @@ -17,6 +17,15 @@ --cds-alias-object-interaction-background-selected-hover: #{tokens.$cds-global-color-construction-100}; --cds-alias-object-interaction-background-selected-active: #{tokens.$cds-global-color-construction-200}; + // status interaction tokens + --cds-alias-object-interaction-info-selected: #{tokens.$cds-global-color-blue-900}; + --cds-alias-object-interaction-info-active: #{tokens.$cds-alias-object-interaction-info-click}; + --cds-alias-object-interaction-success-active: #{tokens.$cds-alias-object-interaction-success-click}; + --cds-alias-object-interaction-warning-active: #{tokens.$cds-alias-object-interaction-warning-click}; + --cds-alias-object-interaction-danger-active: #{tokens.$cds-alias-object-interaction-danger-click}; + --cds-alias-object-interaction-neutral-active: #{tokens.$cds-alias-object-interaction-neutral-click}; + --cds-alias-object-interaction-inverse-active: #{tokens.$cds-alias-object-interaction-inverse-click}; + // Vertical-nav not selected --cds-alias-object-interaction-background-shade: #{tokens.$cds-global-color-construction-100}; --cds-alias-object-interaction-background-shade-hover: #{tokens.$cds-global-color-construction-200}; @@ -46,6 +55,9 @@ --cds-alias-object-interaction-background-selected-active: #{tokens.$cds-global-color-construction-600}; --cds-alias-object-interaction-background-selected-hover: #{tokens.$cds-global-color-construction-700}; + // status interaction tokens + --cds-alias-object-interaction-info-selected: #{tokens.$cds-global-color-blue-500}; + // Vertical-nav not selected --cds-alias-object-interaction-background-shade: #{tokens.$cds-global-color-construction-900}; --cds-alias-object-interaction-background-shade-hover: #{tokens.$cds-global-color-construction-800};