advancedTheme should work for buttons, right ?

[hanoj-budime]

To Reproduce

// * Icons
import { FcGoogle } from "react-icons/fc";

() => {
  const advancedTheme = {
    button: {
      primaryBackgroundColor: "#FFFFFF",
      primaryBackgroundColorOnDark: "#131314",
      primaryFontColor: "#1F1F1F",
      primaryFontColorOnDark: "#E3E3E3",
      primaryHoverBackgroundColor: "#F2F2F2",
      primaryHoverBackgroundColorOnDark: "#131314",
      primaryActiveBackgroundColor: "#F2F2F2",
      primaryActiveBackgroundColorOnDark: "#1F1F1F",
      // primaryDisabledBackgroundColor: "",
      // primaryDisabledBackgroundColorOnDark: "",
      // primaryDisabledFontColor: "",
      // primaryDisabledFontColorOnDark: "",
      primaryBorderThickness: "1px",
      primaryBorderStyle: "solid",
      primaryBorderRadius: "4px",
      // primaryFontFamily: "Roboto Medium, Open Sans, sans-serif",
      primaryFontSize: "1rem",
      primaryFontWeight: "500",
    },
    accordion: {
      backgroundColor: "#F2F2F2",
      hoverBackgroundColor: "#B8E986",
      arrowColor: "#FFFFFF",
      disabledArrowColor: "#999999",
      assistiveTextFontSize: "1.5rem",
      assistiveTextFontWeight: "400",
      assistiveTextLetterSpacing: "-0.0125em",
      assistiveTextFontColor: "#F6FA06",
    },
  };

  return (
    <HalstackProvider advancedTheme={advancedTheme}>
        <DxcInset>
          <DxcButton
            mode="text"
            type="submit"
            label="Sign in with Google"
            size="fillParent"
            margin={{ top: "xsmall" }}
            icon={<FcGoogle />}
          />
        </DxcInset>
        <DxcInset space="2rem">
          <DxcAccordion isExpanded label="Accordion">
            <DxcInset space="2rem"></DxcInset>
          </DxcAccordion>
        </DxcInset>
      </HalstackProvider>
  );
}

Example:

1. Install @dxc-technology\halstack-react@10.0.0 package.

Expected behaviour advancedTheme not working for buttons why ?

[raquelarrojo]

Hello Hanoj, advanced theme is not being applied in your case, since you are applying primary button tokens to a button with mode text. Please take a look to the text button tokens and apply them accordingly, something like this:

   const advancedTheme = {
       button: {
          textBackgroundColor:" #ffffff",
          textFontColor: "#1f1f1f",
          textHoverBackgroundColor: "#f2f2f2",
          textActiveBackgroundColor: "#f2f2f2",
          textBorderThickness: "1px",
          textBorderStyle: "solid",
          textBorderRadius: "4px",
          textFontSize: "1rem",
          textFontWeight: "500",
       }
   }

Please take into account that the dark theme is not recommended to be used. It needs to be redone after the tokens review is also done.

@HanojHanu

[hanoj-budime]

Thanks @raquelarrojo