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.

<style lang="scss">
@use "../../styles/mixins/layers.scss";
@use "../../styles/mixins/density.scss";

.onyx-component-skeleton {
  @include layers.component() {
    /**
     * TODO: If necessary: Add skeleton stylings.
     */
  }
}
// #region layer
.onyx-component-name {
  @include layers.component() {
    /**
     * TODO: Add component stylings.
     */
    // #endregion layer

    /**
    * TODO: If necessary: Styles can be applied for specific densities.
    */
    // #region densities
    @include density.compact {
      // ...
    }
    @include density.default {
      // ...
    }
    @include density.cozy {
      // ...
    }
    // #endregion densities
  }
}
</style>

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 {
  // ...
}