Usage
Usage
This section provides instructions and code snippets showing how to access and apply colors in Figma and code, ensuring that both designers and engineers work with a consistent, shared source of truth.
Colors in design
In Figma, colors are available as variables that can be assigned to objects according to their role.
Colors in code
In Code, tokens are available as variables and Custom CSS Properties and can be used in CSS
SCSS
@use "@vandeer/foundation/primitives" as *;
.my-container {
background: $vandeer-color-background;
}
.my-title {
color: $vandeer-color-text-neutral-prominent;
}CSS
<!--
Replace x.y.z with the latest version of @vandeer/foundation (e.g. 1.20.0)
-->
<link rel="stylesheet" href="https://rbds-static.redbull.com/@vandeer/foundation/x.y.z/primitives/index.css" />
<style>
.my-container {
background: var(--vandeer-color-background);
}
.my-title {
color: var(--vandeer-color-text-neutral-prominent);
}
</style>