Styling

We use SCSS as CSS preprocessor. Any valid CSS is also valid SCSS, that should make it easy to get started.

All our design variables are provided as CSS custom properties. An overview can be found here.

For a general overview of our (S)CSS guidelines refer to our CSS Principles.

CSS Layers

We make use of Cascade Layers to simplify how different style sources are combined. By putting all our styles into layers they can also be easily overwritten by users.

Therefore, the @include layers.component() mixin must be used. It will put the contained rules into the onyx.component layer and normalize stylings.

.onyx-component-name {
  @include layers.component() {
    /**
     * TODO: Add component stylings.
     */

Custom density styles

For most cases, the CSS variables for densities will already support that the component adjusts its spacings based on the current density. In exceptional cases it might be necessary to apply special style rules for the densities, for which the default spacings do not work.

You can use our density mixins in this case:

@include density.compact {
  // ...
}
@include density.default {
  // ...
}
@include density.cozy {
  // ...
}