Customizing CSS Variables

Orion UI uses a system of CSS variables defined on the selectors data-orion-theme='light' and data-orion-theme='dark'.
The dark theme only overrides the color variables.
These variables allow you to customize typography, colors, spacings and border radius for all components.
The related file is css-vars.less.

Override styles

It’s easy to override the default CSS variables to adapt the appearance to your desired theme.

The simplest way is to create a file that contains all the overrides you need (ie. orion-override.less) and import it into your style file after importing Orion styles.

@import "@orion.ui/orion/dist/styles/styles.less";
@import "@orion.ui/orion/dist/styles/packages/index.less";

@import "orion-override.less";

h1 {
  color: var(--grey-light);
}
...

Overriding CSS selectors

.orion-input {
  &__input {
    border-color: var(--neutral-100);
  }

  // Dark theme modification
  [data-orion-theme="dark"] & {
    background-color: var(--info-100);
  }
}

.orion-sticker {
  align-items: center;
  padding: 1.5rem;
  border-radius: 0.75rem;
  font-size: 0.9rem;

  &__title {
    margin-bottom: 0.25rem;
    font-size: 1rem;
    color: var(--brand);
  }
}

<style lang="less" scoped>

.my-component {
  display: flex;
  justify-content: flex-end;

// local style override only within MyComponent
  :deep(.orion-icon) {
    font-size: 1rem;
  }
}
</style>

Overriding variables

:root {
  --radius-input: 0.5rem;
  --rgb-brand: 51, 67, 148;
}

Available Variables

Fonts and Text Sizes

Border Radius

Colors

Base RGB Variables

These variables store colors as RGB triplets and serve as the source for all other CSS variables.
Each color has 3 additional variations (light, dark, alt).

Derived CSS Variables

These variables use the RGB values to create CSS colors that can be used directly in styles.

Best Practices

1. Always use derived CSS variables (--grey, --brand, etc.) in your styles rather than raw RGB values to ensure theme consistency.
2. Override colors for dark themes only by modifying the corresponding RGB variables.
3. Avoid directly modifying derived variables to prevent breaking theme consistency.
4. Use the -light, -dark, -alt suffixes to manage color shades and variants.

Usage Example

.button {
  background-color: var(--brand);
  color: var(--base);
}

.alert-success {
  background-color: var(--success-light);
  border-color: var(--success);
  color: rgb(var(--rgb-inverse), 0.2); // Example: using opacity
}

Fluid

The --fluid-* variables are used to define padding and maintain consistency throughout the application.

Spacing

The --space-* variables define standard margins and spacing in the design grid.
They are fixed (in rem) and ensure vertical and horizontal consistency.