# Utility classes

The `src/css/utilities/` directory contains theme-aware utility classes that must be used in place of hardcoded values for typography, color, borders, spacing, and animation. These classes read CSS custom properties set from merchant theme settings, so they adapt automatically to color schemes and font selections.

| File                               | Covers                                                              |
| ---------------------------------- | ------------------------------------------------------------------- |
| `src/css/utilities/colors.css`     | Background, text, border, outline, and button color utilities       |
| `src/css/utilities/typography.css` | Font family, weight, style, and size utilities                      |
| `src/css/utilities/borders.css`    | Border widths, radii, focus ring styles, and button / input presets |
| `src/css/utilities/spacing.css`    | Layout-gap padding / margin and section overlap utilities           |
| `src/css/utilities/animation.css`  | Transition shorthands and scroll-driven animation utilities         |
| `src/css/utilities/scrollbar.css`  | Cross-browser scrollbar visibility and styling                      |

{% content-ref url="utility-classes/colors" %}
[colors](https://help.brickspacelab.com/slab/advanced-customizations/theme-architecture/styling/utility-classes/colors)
{% endcontent-ref %}

{% content-ref url="utility-classes/typography" %}
[typography](https://help.brickspacelab.com/slab/advanced-customizations/theme-architecture/styling/utility-classes/typography)
{% endcontent-ref %}

{% content-ref url="utility-classes/borders" %}
[borders](https://help.brickspacelab.com/slab/advanced-customizations/theme-architecture/styling/utility-classes/borders)
{% endcontent-ref %}

{% content-ref url="utility-classes/spacing" %}
[spacing](https://help.brickspacelab.com/slab/advanced-customizations/theme-architecture/styling/utility-classes/spacing)
{% endcontent-ref %}

{% content-ref url="utility-classes/animation" %}
[animation](https://help.brickspacelab.com/slab/advanced-customizations/theme-architecture/styling/utility-classes/animation)
{% endcontent-ref %}

{% content-ref url="utility-classes/scrollbar" %}
[scrollbar](https://help.brickspacelab.com/slab/advanced-customizations/theme-architecture/styling/utility-classes/scrollbar)
{% endcontent-ref %}