Theming

Learn how styling works in Grapes, including how you can apply a theme to Grapes.

Introduction

Grapes is designed to maintain uniformity across all Spendesk applications. Each component comes with pre-defined styles tested to align with Spendesk guidelines and ensure accessibility standards are met.

Customizing Grapes is discouraged but our components do provide flexibility for adjusting layouts, spacing, and other elements to suit your needs.

className props

Most Grapes components support the props className. This props is intended to set styling option such as layout, position, and spacing. Although not recommended, this props can also be used to override any style within a given component.

Theming

Colors, sizing, spacing, fonts, and other tokens can be customized throught the use of CSS variables. Most predefined CSS variables are defined under the section Token.

The recommended way to override the Grapes theme is to define a new CSS Cascade layer inside your application, say marketing.

@layer marketing {
  /** rules */
}

To override any CSS variable use the pseudo-class :root :

@layer marketing {
  :root {
    --color-content-primary: red;
    --unit-4: 0.8rem;
  }
}

To take effect, your layer should take precedence over the layer you defined when importing the style from Grapes.

@layer grapes, marketing;

@layer marketing {
  :root {
    --color-content-primary: red;
    --unit-4: 0.8rem;
  }
}