Skip to main content

CSS variables

In case you didn't know, CSS variables are reusable entities in CSS which contain specific values. Learn more about CSS variables on MDN Documentation.

tip

Not only in CSS variables, Ravenbright design tokens are also available in other format such as: Tailwind CSS config, Figma Tokens, & JSON 👇.

Tailwind CSS configFigma TokensJSON

Overview​

Ravenbright uses CSS variables as the primary design token format. It also has prefix: --rbrh- to prevent clash with other frameworks or libraries. Ravenbright offers 4 different ways to customize its library:

  • changing components style with Utility Classes
  • overriding existing classes or existing styles with CSS Variables
  • adding & modifying CSS Custom Properties

Styling with utility classes​

Let's begin by modifying .alert background-color from gray to yellow, we could update that style without leaving the markup like this:

<!--The legacy alert component-->
<div class="alert alert-neutral">This is a neutral alert</div>

<!--The new alert component-->
<div class="alert bg-yellow-200 dark-bg-yellow-800">
  This is a warning alert
</div>

Overriding existing CSS classes​

Ravenbright styles and component can also be personalized with your own brand at high level (global scope). The advantage is, it will provide better control.

Here are the steps to customize the components using CSS variables. Let's start by changing button border-radius from 1rem to 0.5rem, we could update the button primary class by:

  1. Opening the button component file in component folder
  2. Using the lower border radius CSS variables inside your CSS selector. This will only update the btn-primary class
src/components/button.css
.btn-primary {
  /*This is old border radius variable*/
  border-radius: var(--rbrh-radius-md);

  /*Apply the new border radius variable*/
  border-radius: var(--rbrh-radius-sm);
}

Modifying CSS variables values​

  1. Open the css-variable.css file in tokens folder
  2. Change the value of border CSS variables in :root selector. Meanwhile, this action will change other component which connected with the variables.
src/css-variable.css
:root {
  /* Border radius */
  --rbrh-radius-circle: 100rem;
  --rbrh-radius-xl: 2rem;
  --rbrh-radius-lg: 1rem;
  --rbrh-radius-md: 0.8rem;
  --rbrh-radius-sm: 0.5rem;
  --rbrh-radius-xs: 0.3rem;
}
  1. Compile the CSS with PostCSS
postcss main.css --output output.css --watch

Adding new CSS variables​

  1. Open the css-variable.css file in tokens folder
  2. Determine design tokens (colors, border-radius, spacing, etc.)
  3. Write the new variables inside :root selector
src/css-variable.css
:root {
  /* Border radius */
  --rbrh-radius-circle: 100rem;
  --rbrh-radius-xl: 2rem;
  --rbrh-radius-lg: 1rem;
  --rbrh-radius-md: 0.8rem;
  --rbrh-radius-sm: 0.5rem;
  --rbrh-radius-xs: 0.3rem;
  /* New border-radius token */
  --rbrh-radius-xxl: 2.5rem;
}
  1. Implement the new variables inside the CSS class
.card {
  border-radius: var(--rbrh-radius-xxl);
}
  1. Compile the CSS with PostCSS
postcss main.css --output output.css --watch