Color

This section explains and shows examples of all colors used in Halstack Design System.

Code

Usage

Examples

Internal use

This is an example of how some components of the Design System use internally the BackgroundColorProvider, in this case the DxcAccordion knows that its background color is black and shows the DxcTextInput in its onDark version for its correct visualization.

() => {
  const customTheme = {
    accordion: {
      backgroundColor: "#000000",
      hoverBackgroundColor: "#111111",
      arrowColor: "#ffffff",
      titleLabelFontColor: "#ffffff",
    },
  };
  return (
    <HalstackProvider advancedTheme={customTheme}>
      <DxcInset space="2rem">
        <DxcAccordion isExpanded label="Accordion">
          <DxcInset space="2rem">
            <DxcTextInput label="Enter your surname" defaultValue="Harris" />
          </DxcInset>
        </DxcAccordion>
      </DxcInset>
    </HalstackProvider>
  );
}

() => {
  const customTheme = {
    accordion: {
      backgroundColor: "#000000",
      hoverBackgroundColor: "#111111",
      arrowColor: "#ffffff",
      titleLabelFontColor: "#ffffff",
    },
  };
  return (
    <HalstackProvider advancedTheme={customTheme}>
      <DxcInset space="2rem">
        <DxcAccordion isExpanded label="Accordion">
          <DxcInset space="2rem">
            <DxcTextInput label="Enter your surname" defaultValue="Harris" />
          </DxcInset>
        </DxcAccordion>
      </DxcInset>
    </HalstackProvider>
  );
}

Custom use

If at some point it is necessary that the components of the Design System are aware of the color on which they are going to be displayed to guarantee their correct visibility, we must wrap the container (where the components of the Design System are going to be displayed) with the BackgroundColorProvider and pass it the background color. This way the BackgroundColorProvider will evaluate that color and if it is dark it will show the onDark version of the components.

In this example we see how the same DxcTextInput component is shown in a different way, in the first case it is shown in its onDark version, since we have wrapped the container with theBackgroundColorProvider as we explained in the previous paragraph.

() => {
  return (
    <DxcInset space="2rem">
      <DxcFlex direction="column" gap="1.5rem">
        <BackgroundColorProvider color="#000000">
          <div style={{ backgroundColor: "#000000" }}>
            <DxcInset space="2rem">
              <DxcTextInput label="Enter your surname" defaultValue="Harris" />
            </DxcInset>
          </div>
        </BackgroundColorProvider>
        <div>
          <DxcTextInput label="Enter your surname" defaultValue="Harris" />
        </div>
      </DxcFlex>
    </DxcInset>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <DxcFlex direction="column" gap="1.5rem">
        <BackgroundColorProvider color="#000000">
          <div style={{ backgroundColor: "#000000" }}>
            <DxcInset space="2rem">
              <DxcTextInput label="Enter your surname" defaultValue="Harris" />
            </DxcInset>
          </div>
        </BackgroundColorProvider>
        <div>
          <DxcTextInput label="Enter your surname" defaultValue="Harris" />
        </div>
      </DxcFlex>
    </DxcInset>
  );
}

Examples
- Internal use
- Custom use

Edit this page on GitHub

Introduction

NextSpacing

Color

Examples

Internal use

Custom use

Contents