From 56f0e7148850c0d228742a7a854f56e9be7b526c Mon Sep 17 00:00:00 2001 From: ad9242 <116102637+ad9242@users.noreply.github.com> Date: Wed, 18 Dec 2024 12:13:12 +0000 Subject: [PATCH 1/3] fix(canary-web-components): fix for items displayed on brand color background fixes components that are displayed on brand coloured background --- .../src/components/ic-card-horizontal/ic-card-horizontal.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/canary-web-components/src/components/ic-card-horizontal/ic-card-horizontal.tsx b/packages/canary-web-components/src/components/ic-card-horizontal/ic-card-horizontal.tsx index de025a0341..40dd234654 100644 --- a/packages/canary-web-components/src/components/ic-card-horizontal/ic-card-horizontal.tsx +++ b/packages/canary-web-components/src/components/ic-card-horizontal/ic-card-horizontal.tsx @@ -184,7 +184,10 @@ export class Card { const foregroundColor = getThemeFromContext(this.el, newTheme); if (foregroundColor !== IcThemeForegroundEnum.Default) { - this.theme = foregroundColor; + this.theme = + foregroundColor === IcThemeForegroundEnum.Light + ? IcThemeForegroundEnum.Dark + : IcThemeForegroundEnum.Light; } } From 709f84f134a91e043f94b0d1babf013dadc681bf Mon Sep 17 00:00:00 2001 From: ad9242 <116102637+ad9242@users.noreply.github.com> Date: Wed, 18 Dec 2024 12:14:54 +0000 Subject: [PATCH 2/3] fix(web-components): fix for items displayed on brand color background fixes components that are displayed on brand coloured background --- .../src/components/ic-button/ic-button.css | 38 +++++++++++++++++++ .../src/components/ic-button/ic-button.tsx | 5 ++- .../__snapshots__/ic-button.spec.ts.snap | 12 +++--- .../ic-button/test/basic/ic-button.spec.ts | 2 +- .../ic-card-vertical/ic-card-vertical.tsx | 5 ++- .../src/components/ic-hero/ic-hero.css | 2 +- .../components/ic-hero/ic-hero.stories.mdx | 2 - .../src/components/ic-link/ic-link.tsx | 5 ++- .../ic-link/test/basic/ic-link.spec.ts | 4 +- .../ic-top-navigation/ic-top-navigation.tsx | 10 ++++- .../ic-top-navigation.spec.ts.snap | 2 +- packages/web-components/src/utils/helpers.ts | 4 +- 12 files changed, 71 insertions(+), 20 deletions(-) diff --git a/packages/web-components/src/components/ic-button/ic-button.css b/packages/web-components/src/components/ic-button/ic-button.css index 6b64137a5e..bcd9950c6f 100644 --- a/packages/web-components/src/components/ic-button/ic-button.css +++ b/packages/web-components/src/components/ic-button/ic-button.css @@ -1074,6 +1074,44 @@ slot[name="router-item"]::slotted(a) { vertical-align: middle !important; } +/** menu button on top navigation\side navigation + * uses secondary monochrome tokens which are duplicated here to avoid multiple copies in each component + */ + +:host(#menu-button.ic-theme-light) { + --ic-button-secondary-background-hover-monochrome: var( + --ic-action-dark-bg-hover + ); + --ic-button-secondary-background-pressed-monochrome: var( + --ic-action-dark-bg-pressed + ); + --ic-button-secondary-text-hover-monochrome: var(--ic-action-dark-hover); + --ic-button-secondary-text-pressed-monochrome: var(--ic-action-dark-pressed); + --ic-button-secondary-border-hover-monochrome: var( + --ic-color-border-neutral-hover-dark + ); + --ic-button-secondary-border-pressed-monochrome: var( + --ic-color-border-neutral-pressed-dark + ); +} + +:host(#menu-button.ic-theme-dark) { + --ic-button-secondary-background-hover-monochrome: var( + --ic-action-light-bg-hover + ); + --ic-button-secondary-background-pressed-monochrome: var( + --ic-action-light-bg-pressed + ); + --ic-button-secondary-text-hover-monochrome: var(--ic-action-light-hover); + --ic-button-secondary-text-pressed-monochrome: var(--ic-action-light-pressed); + --ic-button-secondary-border-hover-monochrome: var( + --ic-color-border-neutral-hover-light + ); + --ic-button-secondary-border-pressed-monochrome: var( + --ic-color-border-neutral-default + ); +} + /** High Contrast **/ @media (forced-colors: active) { .button, diff --git a/packages/web-components/src/components/ic-button/ic-button.tsx b/packages/web-components/src/components/ic-button/ic-button.tsx index 6c15fd61e1..c41a571d0e 100644 --- a/packages/web-components/src/components/ic-button/ic-button.tsx +++ b/packages/web-components/src/components/ic-button/ic-button.tsx @@ -427,7 +427,10 @@ export class Button { private updateTheme(newTheme: IcThemeForeground = null): void { const foregroundColor = getThemeFromContext(this.el, newTheme); if (foregroundColor !== IcThemeForegroundEnum.Default) { - this.theme = foregroundColor; + this.theme = + foregroundColor === IcThemeForegroundEnum.Light + ? IcThemeForegroundEnum.Dark + : IcThemeForegroundEnum.Light; this.monochrome = true; } } diff --git a/packages/web-components/src/components/ic-button/test/basic/__snapshots__/ic-button.spec.ts.snap b/packages/web-components/src/components/ic-button/test/basic/__snapshots__/ic-button.spec.ts.snap index f9d50fec45..a31afacd84 100644 --- a/packages/web-components/src/components/ic-button/test/basic/__snapshots__/ic-button.spec.ts.snap +++ b/packages/web-components/src/components/ic-button/test/basic/__snapshots__/ic-button.spec.ts.snap @@ -265,7 +265,7 @@ exports[`button component should render with defined "a" tag props 1`] = ` `; exports[`button component should test aria-describedby is set 1`] = ` - +