Skip to main content

Theming/Styling

Overview​

This document provides a high-level overview on how to apply theming and style customization to Abyss components. Each component/tool mentioned below has its own dedicated documentation page, which we encourage you to visit and explore to better understand the full capabilities.

We do our best to support flexibility when applying style customizations to Abyss components but we do recommend utilizing the Designer toolkit and keeping customizations to a minimum, as the Abyss components are designed to create a standard appearance across all UHG-affiliated products.

Theming setup​

To ensure a consistent look and feel across your application and for proper styling customization to take effect, you must first set up theming in your application by using the ThemeProvider component and createTheme tool.

Apply ThemeProvider​

Begin by wrapping your application root with the ThemeProvider. This will enable all Abyss child components to receive the theme context. For details on available props and configuration, please visit the ThemeProvider documentation.

import { ThemeProvider } from '@uhg-abyss/web/ui/ThemeProvider';
import { createTheme } from '@uhg-abyss/web/tools/theme';


// Brand themes available are 'uhc', 'optum'.
const theme = createTheme('uhc', {
  // optional theme override and configuration object
});


const App = () => {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
};

Create a theme​

Use the createTheme function to generate the base theme configuration and token values for your desired brand theme. As the first argument, this function accepts one of two brand themes, 'uhc' or 'optum', and an optional theme override object as the second argument.

Once created, provide the theme object into the theme prop on ThemeProvider as shown above.

For more details, see the createTheme documentation.

Style customization options​

Now that you've laid the foundation for the theme, you can apply style customizations to Abyss components using the following methods.

Theme token customizations​

As mentioned above, the createTheme function accepts an override object as a second argument. This enables you to white label on top of the base theme by applying overrides to the theme tokens.

For details on how to implement these token customizations please visit the white labeling overview documentation.

Styled tool​

The styled function allows you to create styled components using a CSS-in-JS approach. This provides performance benefits and better developer experience with type checks and autocomplete suggestions. It is also compatible with all theme tokens.

import { styled } from '@uhg-abyss/web/tools/styled';


const Button = styled('button', {
  color: 'red',
  fontSize: '14px',
  '&:hover': {
    color: 'black',
  },
});

For more details, see the styled documentation.

CSS prop​

You can use the css prop to apply styles directly to components. This is useful for quick, minor customizations without creating a separate styled component. It is also compatible with all theme tokens.

Button example​

Below, we have two Button components, one filled and one outlined, with the default styling from the theme applied.

To customize the Button component, you can target specific Abyss static class names to change the styles.

To find the list of available styles, go to the Integration tab located on each component's documentation page and find the "Classes" table. Or you can simply inspect the component in the browser to find the abyss class name for the element you'd like to target. Below is the table for Button:

Now, we can apply our custom styles and see the results!

<Layout.Group>
  <Button
    css={{
      // Add styles to button root element for filled button
      'abyss-button-root': {
        backgroundColor: '#143013',
        color: '#E0F3DD',

        '&:hover': {
          backgroundColor: '#3E553C',
        },

        '&:active': {
          backgroundColor: '#0C210B',
        },
      },
    }}
  >
    Custom Filled Button
  </Button>
  <Button
    variant="outline"
    css={{
      // Add custom styles to button root element for outlined button
      'abyss-button-root': {
        backgroundColor: '#FFFFFF',
        borderColor: '#168594',
        color: '#064048',

        '&:hover': {
          backgroundColor: '#E5F9FC',
          boxShadow: '1px 1px 2px 0px rgba(0,0,0,0.6)',
        },

        '&:active': {
          backgroundColor: '#D9F6FA',
          boxShadow: '1px 1px 2px 0px rgba(0,0,0,0.6)',
        },
      },
    }}
  >
    Custom Outlined Button
  </Button>
</Layout.Group>
Editable Example

Note: Please visit the Accessibility tab on each the component's documentation page to read more on designing an accessible component.

Other styling options​

Static class names​

Apart from the customization methods listed above, you can use each components Abyss static classes to apply overrides using regular CSS style sheets.

.abyss-box-root {
  color: lightblue;
  background-color: verdana;
  border: 3px solid red;
  box-shadow: 2px 2px 7px 1px grey;
}


.abyss-text-input-label {
  color: white;
  text-align: center;
}
Table of Contents