Halstack Provider

Using Halstack Provider localeTag property, we can set the locale for the components. The localeTag property accepts a string that represents the locale, such as "en-US" for English (United States) or "es-ES" for Spanish (Spain). By setting this property, some components like the DateInput component will automatically format the date according to the specified locale. For example, if we set localeTag="de-DE", the DateInput component will display the date in the German format (DD.MM.YYYY). Halstack Provider can also be used to translate all the labels that cannot be changed by the component properties.

Let's imagine that we want to translate the '(Optional)' label of a DxcTextInput. To do so, we need to create an object with the translations. In this object, you will have as many objects as components you want to translate with the respective translation for their labels.

To change the format in a DxcDateInput component, we can use the localeTag property of the Halstack Provider or the format prop. The localeTag property accepts a string that represents the locale, such as "en-US" for English (United States) or "es-ES" for Spanish (Spain). By setting this property, the DateInput component will automatically format the date according to the specified locale and also change the first day of the week. For example, if we set localeTag="fr-CH", the DxcDateInput component will display the date in the French but using Swiss format (DD.MM.YYYY) and set Monday as the first day of the week.

() => {
  const labels = {
    formFields: {
      optionalLabel: "(Optionnel)",
    },
  };

  return (
    <HalstackProvider labels={labels} localeTag="fr-CH">
      <DxcInset space="var(--spacing-padding-xl)">
        <DxcFlex gap="var(--spacing-gap-xl)" direction="column">
          <DxcTextInput
            label="Input text"
            defaultValue="Example text"
            clearable
            optional
          />
          <DxcDateInput
            label="Date"
            placeholder="Select a date"
            optional
          />
          </DxcFlex>
        </DxcInset>
    </HalstackProvider>
  );
}

You can apply the opinionated theming strategy to customize the components.

Below is an example of customizing the colours of a DxcButton:

() => {
  // First palette example
  const firstPalette = {
    "--color-primary-50": "#d3f0b4",
    "--color-primary-100": "#a2df5e",
    "--color-primary-200": "#77c81f",
    "--color-primary-300": "#68ad1b",
    "--color-primary-400": "#579317",
    "--color-primary-500": "#487813",
    "--color-primary-600": "#39600f",
    "--color-primary-700": "#2b470b",
    "--color-primary-800": "#1c2f07",
    "--color-primary-900": "#0d1503",
  };

  // Second palette example
  const secondPalette = {
    "--color-primary-50": "#ffd6e7",
    "--color-primary-100": "#ff99c2",
    "--color-primary-200": "#ff66a3",
    "--color-primary-300": "#e05584",
    "--color-primary-400": "#c5446d",
    "--color-primary-500": "#a83659",
    "--color-primary-600": "#872b47",
    "--color-primary-700": "#661f35",
    "--color-primary-800": "#441423",
    "--color-primary-900": "#220a12",
  };

  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    setTheme((prev) => {
      const newTheme = prev === "first" ? "second" : "first";
      console.log("Toggling theme", newTheme);
      return newTheme;
    });
  };

  return (
    <HalstackProvider opinionatedTheme={theme === "first" ? 
    {tokens: firstPalette} : {tokens: secondPalette}}>
      <DxcButton label="Toggle theme" onClick={toggleTheme} />
    </HalstackProvider>
  );
}

We create a firstPalette and secondPalette objects with as many CSS variables as we want and their respective values. Then we pass one of the objects based on the state of the theme to the Halstack Provider, which wraps our components, through its opinionatedTheme property.

Logos defined in the opinionatedTheme property of the Halstack Provider are applied to any DxcApplicationLayout component within the provider. However, DxcApplicationLayout props take precedence over the provider logos, allowing you to override them on a per-component basis when more specific customization is needed.

Themes can be created with the Theme Generator tool, which allows you to define your brand colors and export a ready-to-use token structure to pass through the opinionatedTheme property.