Code

Customization & Theming: Code

At Red Bull, we advocate projects that demonstrate brand diversity through engaging and recognizable visuals and design.

Cosmos is designed to support the creation of unique experiences by allowing a component's styling to be customized via pure CSS.

For high-level customizations, components provide CSS Custom Properties. For more advanced customizations, they expose CSS Shadow Parts to extend their styling.

☝️ Watch out

We strongly advise using a CSS class to target Cosmos web components rather than an element selector to make styles related to customizations more distinct and robust.

CSS Custom Properties

CSS Custom Properties are a reliable and easy way to customize the look of a component at a high level. Custom Properties are limited by design, they only allow selected styles of a component to be changed.

We recommend targeting Cosmos web components with a custom CSS class to customize them. Furthermore, specific variants of a component can be targeted by using attribute selectors.

Most components expose CSS Custom Properties. They are specified in a components API documentation under "CSS Custom Properties" section.

🤝 Support

We guarantee full support for the use of CSS Custom Properties in future minor and patch updates of Cosmos.

Shadow Parts

While Custom Properties offer an easy and fast way to customize a component's style, they are limited by design. For more flexibility and advanced styling, components offer a low-level way to customize them via CSS Shadow Parts.

Cosmos web components use a Shadow DOM to encapsulate their style and behavior. Consequently, their internals can not be targeted with the usual CSS selectors. Instead, they expose "parts" that can be targeted with the CSS part selector ::part().

We recommend using available CSS Custom Properties for customizations and only using the Shadow Parts of a component to extend its design beyond the ordinary.

⚠️ Caution

Customizing components using Shadow Parts isn't free of risks. Style overwrites are not guaranteed to work with future updates of Cosmos.

Most Cosmos web components do expose parts. They are specified in a components API documentation under "CSS Shadow Parts" section.

Theming Dark and Light Mode

The appearance attribute of a component always reflects the current value even when it hasn't been specifically set. A theme that differentiates between a dark and light appearance can be achieved by targeting components using an attribute selector [appearance="dark"] or [appearance="light"]

Design to Engineering handover For guidance on how to understand Design to Engineering handover, refer to the documentation which covers both simple scenarios and complex scenarios.