9 docs tagged with "styling"

Many components make use of CSS variables to set their styling - commonly with colour and padding parameters, but the usage can vary.

The Design System Configurator is a tool that enables you to configure many of the CSS variables that the rapid design system uses. You can adjust settings by moving sliders and changing values, and see the effect of the changes immediately on screen.

This section covers how to configure tokens for the different types of styling in your application.

This section covers how to style Genesis components directly, without having to create a new class with custom styles and extend the base.

This approach to styling requires writing components using Genesis syntax.

This section focuses on how to override the default styles of the Genesis RapidButton component in your custom MyButton component.

Parts

The platform provides a comprehensive suite of utilities and components for dynamic style management, including CSS rule insertion, font-face loading, and the application of styles to custom elements.

This guide will help you understand how to customize Genesis components. Whether you are building reusable components or customizing styles for a specific use case, this documentation has you covered.