Color

Overview

Source: ./src/fragments/color/Color.mdx

The color fragment provides a set of utilities for consistent color usage across your project. This page covers text and background color utility classes with links to interactive demos.

Info

See the Color UX documentation for detailed design guidelines.

Skip to:

Text color utilities
Background color utilities
Usage guidelines
Accessibility

Text color utilities

The following classes are available for setting the color of your text elements:

Class name	Description
`oc-text-color-default`	Default text color
`oc-text-color-secondary`	Secondary text color
`oc-text-color-inverted`	Inverted text color for dark backgrounds
`oc-text-color-sale`	Sale highlight color
`oc-text-color-success`	Success state color
`oc-text-color-error`	Error state color
`oc-text-color-hint`	Hint or helper text color
`oc-text-color-sustainable`	Sustainable/eco label color
`oc-text-color-brand`	Brand accent color

Use the controls in the interactive colors demo to see these classes in action.

Background color utilities

Use these classes to set element background colors. They are grouped by category.

Elevation backgrounds

Class name	Description
`oc-background-color-frame`	Outermost app/frame background
`oc-background-color-canvas`	Main page canvas
`oc-background-color-stacked`	Layer stacking background
`oc-background-color-above`	Surface above stacked layers
`oc-background-color-sticky`	Sticky / pinned surface

Functional backgrounds

Class name	Description
`oc-background-color-inverted`	Inverted (dark) surface
`oc-background-color-sale`	Sale / promo emphasis
`oc-background-color-error`	Error state background
`oc-background-color-warning`	Warning state background
`oc-background-color-success`	Success state background
`oc-background-color-hint`	Hint / subtle informational surface

Strong backgrounds

Class name	Description
`oc-background-color-strong-mint`	Mint
`oc-background-color-strong-blue`	Blue
`oc-background-color-strong-green`	Green
`oc-background-color-strong-purple`	Purple
`oc-background-color-strong-pink`	Pink
`oc-background-color-strong-warm-red`	Warm red
`oc-background-color-strong-orange`	Orange
`oc-background-color-strong-yellow`	Yellow

Soft backgrounds

Class name	Description
`oc-background-color-soft-mint`	Mint
`oc-background-color-soft-blue`	Blue
`oc-background-color-soft-green`	Green
`oc-background-color-soft-purple`	Purple
`oc-background-color-soft-pink`	Pink
`oc-background-color-soft-warm-red`	Warm red
`oc-background-color-soft-orange`	Orange
`oc-background-color-soft-yellow`	Yellow

Usage guidelines

To use the color utilities, add the appropriate CSS class to your text or background element. For example, to apply the background color for a strong mint background, use the oc-background-color-strong-mint class:

<div class="oc-background-color-strong-mint">
  <!-- Content with strong mint background -->
</div>

Find all usage examples in the background color demo.

Accessibility

See the accessibility documentation for general guidelines on making your content accessible.

Color (OCBackgroundColor.stories.ts)

Demo: Background colors

Story: fragments-color--background-colors · tags:

Story source (TypeScript, verbatim from Storybook)

{
  name: "Demo: Background colors",
  render: allBackgroundColors
}

Color (Color.stories.ts)

Demo: Text colors

Story: fragments-color--colors · tags:

Args: color-class=oc-text-color-sale