UI Styles

One module part of the UI Patterns ecosystem is UI Styles

Allows developers to define styles from modules and themes and site builders to use them from Drupal admin interface.

The styles are:

• collections of mutually exclusive, self-descriptive, single-purpose CSS classes. Examples: Typography, Borders, Background colors, Spacing....
• commonly used in design systems, and can also be called "helpers", "utilities", "fundamentals"...
• Drupal plugins, created and managed by the themer, inside a single YML file.

The module contains several sub-modules for different integrations

UI Styles Block - on block titles, block content and block wrappers

UI Styles CKEditor 5 - as inline class and as block class

UI Styles Entity Status - on unpublished entities.

UI Styles Layout Builder - on block titles, block content, block wrappers, sections and sections' regions. It works also with layout builder overrides (custom layout for a content entity).

UI Styles Library

UI Styles Page - Themes regions. Note that if you have a region's Twig template not using the attributes variable it will not work.

UI Styles View - on view wrappers ("view styles"), exposed forms and pagers.

Notes

• https://www.drupal.org/project/ui_styles_paragraphs for paragraph integration