BridgeBeta
  • Brand
  • Digital Assets
    Foundations
    Icons
    Components
    Templates
  • Resources
    Design Tokens
    How-tos
    Best Practices
    Libraries
    Accessibility
    Products List
  • Support
    • Overview
    • List
    • Use(Developer)
tokens

Usage

This is how to implement the design tokens in your project.

How to use tokens as a Developer

You can import the tokens as a JSON file, CSS variables or sass.

JSON

This file contains all tokens with a lot of additional information and can be used in any build system.

Make sure to not import the full file in your production build, as it is quite large.

TODO: Instead, you can import the variables.json file, which only contains the token values.

import tokens from "@wfp/themes-core/dist/json/variables-full.json";

CSS

The CSS file contains all tokens as CSS variables as a sass mixin.

@use "@wfp/themes-core/dist/scss/default-css-theme" as defaulttheme;
// Use the WFP theme
:root {
@include defaulttheme.theme-default();
}

SASS

sass is a CSS preprocessor that allows you to use variables, nested rules, mixins, functions, and more with a fully CSS-compatible syntax. It helps keep large stylesheets well-organized and makes it easy to share design within and across projects.

tokens.scss

tokens.scss contains all tokens as sass variables. This file is used to generate the CSS file.

@use "@wfp/themes-core/dist/scss/tokens" as tokens;
/* Contains
$content-content4-earthy-brown-content4-80: var(--content-content4-earthy-brown-content4-80, "#fda987") !default;
*/

tokensMapDeep.scss

tokensMapDeep.scss contains all tokens as a nested scss object.

@use "@wfp/themes-core/dist/scss/tokensMapDeep" as tokensMapDeep;

tokensMapFlat.scss

tokensMapFlat.scss contains all tokens as a flat scss object.

@use "@wfp/themes-core/dist/scss/tokensMapFlat" as tokensMapFlat;

On this page

  • How to use tokens as a Developer
  • JSON
  • CSS
  • SASS
  • tokens.scss
  • tokensMapDeep.scss
  • tokensMapFlat.scss

References

  • Figma
  • npm
Storybook
Figma library
Contact us
2025 © World Food Programme