Merge pull request #2929 from mi6/theme-from-context-fix

Theme from context fix

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;
     }
   }
 

packages/react/src/component-tests/IcHero/IcHero.cy.tsx

@@ -16,7 +16,7 @@ import {
   BackgroundImage,
   LongHeading,
   FullWidth,
-  LightBrand,
+  BrandChange,
 } from "./IcHeroTestData";
 import { BE_VISIBLE } from "../utils/constants";
 
@@ -182,15 +182,29 @@ describe("IcHero end-to-end, visual regression and a11y tests", () => {
   });
 
   it("should render with light brand color", () => {
-    mount(<LightBrand />);
+    mount(<BrandChange />);
 
     cy.checkHydrated(IC_HERO_SELECTOR);
     cy.get("ic-theme").should("exist");
 
     cy.checkA11yWithWait();
     cy.compareSnapshot({
       name: "light-brand",
-      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.028),
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.026),
+    });
+
+    cy.get("#default-btn").click();
+    cy.checkA11yWithWait();
+    cy.compareSnapshot({
+      name: "dark-brand",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.027),
+    });
+
+    cy.get("#sunrise-btn").click();
+    cy.checkA11yWithWait();
+    cy.compareSnapshot({
+      name: "light-brand-again",
+      testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.026),
     });
   });
 });

packages/react/src/component-tests/IcHero/IcHeroTestData.tsx

@@ -237,10 +237,18 @@ export const FullWidth = () => {
   );
 };
 
-export const LightBrand = () => {
+export const BrandChange = () => {
+  const [color, setColour] = useState("rgb(255, 201, 60)");
+  const defaultButtonClickHandler = () => {
+    setColour("rgb(27, 60, 121)");
+  };
+  const differentButtonClickHandler = () => {
+    setColour("rgb(255, 201, 60)");
+  };
+
   return (
     <>
-      <IcTheme color={"rgb(255, 201, 60)"}>
+      <IcTheme color={color}>
         <IcHero
           heading="Hero heading"
           subheading="Hero description. This is a Hero component, it should be used as a page heading."
@@ -276,6 +284,20 @@ export const LightBrand = () => {
           />
         </IcHero>
       </IcTheme>
+      <IcButton
+        id="default-btn"
+        variant="primary"
+        onClick={defaultButtonClickHandler}
+      >
+        Default brand
+      </IcButton>
+      <IcButton
+        id="sunrise-btn"
+        variant="primary"
+        onClick={differentButtonClickHandler}
+      >
+        Sunrise brand
+      </IcButton>
     </>
   );
 };

packages/react/src/stories/ic-hero.stories.mdx

@@ -21,14 +21,11 @@ import image from "./assets/example-background.png";
 
 export const Controlled = () => {
   const [color, setColour] = useState("rgb(255, 201, 60)");
-  const [theme, setTheme] = useState("light");
   const defaultButtonClickHandler = () => {
     setColour("rgb(27, 60, 121)");
-    setTheme("dark");
   };
   const differentButtonClickHandler = () => {
     setColour("rgb(255, 201, 60)");
-    setTheme("light");
   };
   return (
     <>
@@ -65,7 +62,6 @@ export const Controlled = () => {
           heading="Latest announcement"
           message="This is some example text that can be included in the card copy."
           slot="secondary"
-          theme={theme}
         />
       </IcHero>
       <IcButton variant="primary" onClick={defaultButtonClickHandler}>
@@ -150,7 +146,6 @@ export const defaultArgs = {
             <IcCardVertical
               heading="Latest announcement"
               message="This is some example text that can be included in the card copy."
-              theme="dark"
               slot="secondary"
             />
           )}
@@ -325,7 +320,6 @@ export const defaultArgs = {
       <IcCardVertical
         heading="Latest announcement"
         message="This is some example text that can be included in the card copy."
-        theme="dark"
         slot="secondary"
       />
     </IcHero>

packages/web-components/src/components/ic-button/ic-button.css

@@ -1076,6 +1076,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,

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;
     }
   }

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`] = `
-<ic-button class="ic-button-size-medium ic-button-variant-primary ic-theme-light monochrome" exportparts="button" id="ic-button">
+<ic-button class="ic-button-size-medium ic-button-variant-primary ic-theme-dark monochrome" exportparts="button" id="ic-button">
   <mock:shadow-root>
     <button aria-describedby="button-description" class="button" part="button" type="button">
       <slot></slot>
@@ -279,7 +279,7 @@ exports[`button component should test aria-describedby is set 1`] = `
 `;
 
 exports[`button component should test aria-describedby is updated 1`] = `
-<ic-button class="ic-button-size-medium ic-button-variant-primary ic-theme-light monochrome" exportparts="button" id="ic-button">
+<ic-button class="ic-button-size-medium ic-button-variant-primary ic-theme-dark monochrome" exportparts="button" id="ic-button">
   <mock:shadow-root>
     <button aria-describedby="button-description" class="button" part="button" type="button">
       <slot></slot>
@@ -293,7 +293,7 @@ exports[`button component should test aria-describedby is updated 1`] = `
 `;
 
 exports[`button component should test button as submit button on form 1`] = `
-<ic-button class="ic-button-size-medium ic-button-variant-primary ic-theme-light monochrome" exportparts="button" form="new-form" id="ic-button" type="submit">
+<ic-button class="ic-button-size-medium ic-button-variant-primary ic-theme-dark monochrome" exportparts="button" form="new-form" id="ic-button" type="submit">
   <mock:shadow-root>
     <button class="button" form="new-form" part="button" type="submit">
       <slot></slot>
@@ -304,7 +304,7 @@ exports[`button component should test button as submit button on form 1`] = `
 `;
 
 exports[`button component should test tooltip visibility changes when disable tooltip prop changes 1`] = `
-<ic-button class="ic-button-size-medium ic-button-variant-icon ic-theme-light monochrome" exportparts="button" id="test-button" variant="icon">
+<ic-button class="ic-button-size-medium ic-button-variant-icon ic-theme-dark monochrome" exportparts="button" id="test-button" variant="icon">
   <mock:shadow-root>
     <ic-tooltip label="Tooltip text" placement="bottom" silent="" target="ic-button-with-tooltip-test-button">
       <button aria-label="Tooltip text" class="button" part="button" type="button">
@@ -317,7 +317,7 @@ exports[`button component should test tooltip visibility changes when disable to
 `;
 
 exports[`button component should test tooltip visibility changes when disable tooltip prop changes 2`] = `
-<ic-button class="ic-button-size-medium ic-button-variant-icon ic-theme-light monochrome" exportparts="button" id="test-button" variant="icon">
+<ic-button class="ic-button-size-medium ic-button-variant-icon ic-theme-dark monochrome" exportparts="button" id="test-button" variant="icon">
   <mock:shadow-root>
     <button aria-label="Tooltip text" class="button" part="button" type="button">
       <slot></slot>
@@ -328,7 +328,7 @@ exports[`button component should test tooltip visibility changes when disable to
 `;
 
 exports[`button component should test tooltip visibility changes when disable tooltip prop changes 3`] = `
-<ic-button class="ic-button-size-medium ic-button-variant-icon ic-theme-light monochrome" exportparts="button" id="test-button" variant="icon">
+<ic-button class="ic-button-size-medium ic-button-variant-icon ic-theme-dark monochrome" exportparts="button" id="test-button" variant="icon">
   <mock:shadow-root>
     <ic-tooltip label="Tooltip text" placement="bottom" silent="" target="ic-button-with-tooltip-test-button">
       <button aria-label="Tooltip text" class="button" part="button" type="button">

packages/web-components/src/components/ic-button/test/basic/ic-button.spec.ts

@@ -326,7 +326,7 @@ describe("button component", () => {
     });
     await page.waitForChanges();
 
-    expect(page.rootInstance.theme).toEqual("light");
+    expect(page.rootInstance.theme).toEqual("dark");
   });
 
   it("should test button as submit button on form", async () => {

packages/web-components/src/components/ic-card-vertical/ic-card-vertical.tsx

@@ -191,7 +191,10 @@ export class CardVertical {
 
     if (foregroundColor !== IcThemeForegroundEnum.Default) {
       this.monochrome = true;
-      this.theme = foregroundColor;
+      this.theme =
+        foregroundColor === IcThemeForegroundEnum.Light
+          ? IcThemeForegroundEnum.Dark
+          : IcThemeForegroundEnum.Light;
     }
   }
 

packages/web-components/src/components/ic-hero/ic-hero.css

@@ -14,7 +14,7 @@
   --ic-hero-heading: var(--ic-color-text-primary-light);
   --ic-hero-body: var(--ic-color-text-primary-light);
   --ic-hero-secondary-heading: var(--ic-color-text-primary-light);
-  --hero-keyline: var(--ic-color-text-primary);
+  --hero-keyline: var(--ic-theme-text);
 }
 
 .heading {

packages/web-components/src/components/ic-hero/ic-hero.stories.mdx

@@ -106,7 +106,6 @@ import image from "./assets/example-background.png";
       <ic-card-vertical
         heading="Latest announcement"
         message="This is some example text that can be included in the card copy."
-        theme="dark"
         slot="secondary"
       ></ic-card-vertical>
     </ic-hero>`}
@@ -227,7 +226,6 @@ import image from "./assets/example-background.png";
       <ic-card-vertical
         heading="Latest announcement"
         message="This is some example text that can be included in the card copy."
-        theme="dark"
         slot="secondary"
       ></ic-card-vertical>
     </ic-hero>`}

packages/web-components/src/components/ic-link/ic-link.tsx

@@ -112,7 +112,10 @@ export class Link {
 
     if (theme !== IcThemeForegroundEnum.Default) {
       this.monochrome = true;
-      this.theme = theme;
+      this.theme =
+        theme === IcThemeForegroundEnum.Light
+          ? IcThemeForegroundEnum.Dark
+          : IcThemeForegroundEnum.Light;
     }
   }
 

packages/web-components/src/components/ic-link/test/basic/ic-link.spec.ts

@@ -116,12 +116,12 @@ describe("ic-link component", () => {
     page.rootInstance.themeChangeHandler({ detail: { mode: "dark" } });
     await page.waitForChanges();
 
-    expect(page.rootInstance.theme).toBe("dark");
+    expect(page.rootInstance.theme).toBe("light");
 
     page.rootInstance.themeChangeHandler({ detail: { mode: "light" } });
     await page.waitForChanges();
 
-    expect(page.rootInstance.theme).toBe("light");
+    expect(page.rootInstance.theme).toBe("dark");
   });
 
   it("should call 'setFocus' when link is focused", async () => {

packages/web-components/src/components/ic-top-navigation/ic-top-navigation.tsx

@@ -425,7 +425,11 @@ export class TopNavigation {
                           monochrome
                           size={searchButtonSize}
                           aria-label={mobileSearchButtonTitle}
-                          theme={foregroundColor == "light" ? "dark" : "light"}
+                          theme={
+                            foregroundColor == IcThemeForegroundEnum.Light
+                              ? IcThemeForegroundEnum.Dark
+                              : IcThemeForegroundEnum.Light
+                          }
                           onClick={searchButtonClickHandler}
                         >
                           <slot name="toggle-icon">
@@ -462,7 +466,9 @@ export class TopNavigation {
                             <ic-button
                               id="menu-button"
                               theme={
-                                foregroundColor == "light" ? "light" : "dark"
+                                foregroundColor == IcThemeForegroundEnum.Light
+                                  ? IcThemeForegroundEnum.Dark
+                                  : IcThemeForegroundEnum.Light
                               }
                               variant="secondary"
                               monochrome

packages/web-components/src/components/ic-top-navigation/test/basic/__snapshots__/ic-top-navigation.spec.ts.snap

@@ -305,7 +305,7 @@ exports[`ic-top-navigation should render with slotted short-app-title: renders-w
                     Main navigation button
                   </span>
                   <nav aria-hidden="false" aria-labelledby="navigation-landmark-button-text">
-                    <ic-button aria-expanded="false" aria-haspopup="true" aria-label="Open app menu" id="menu-button" monochrome="" size="small" theme="light" variant="secondary">
+                    <ic-button aria-expanded="false" aria-haspopup="true" aria-label="Open app menu" id="menu-button" monochrome="" size="small" theme="dark" variant="secondary">
                       Menu
                       <svg fill="#ffffff" height="24px" slot="left-icon" viewBox="0 0 24 24" width="24px" xmlns="http://www.w3.org/2000/svg">
                         <path d="M0 0h24v24H0V0z" fill="none"></path>

packages/web-components/src/utils/helpers.ts

@@ -246,10 +246,10 @@ export const getThemeFromContext = (
       ) ||
       blockColorParent.classList.contains(IcThemeForegroundEnum.Dark)
     ) {
-      return IcThemeForegroundEnum.Light;
+      return IcThemeForegroundEnum.Dark;
     }
 
-    return IcThemeForegroundEnum.Dark;
+    return IcThemeForegroundEnum.Light;
   }
 
   return IcThemeForegroundEnum.Default;