• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Testing
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
      • Failed to execute removeChild on Node
    • FAQ
    • Contributing
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
      • Option Group
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Accessing Liquid’s design tokens
  2. Rolling your own design tokens
Guides Design tokens
(external link)

Design tokens #

In order to keep design and implementation in sync Liquid uses so-called design tokens. These tokens are hosted on Figma. They include global variables such as colors, spacings etc. and end up as CSS custom properties in autogenerated CSS files which you eventually import in your own code.

In some cases you might want to access the "raw" design tokens or even use your own design tokens in your project. Both is possible with Liquid.

Accessing Liquid’s design tokens #

Maybe you don't want to use the Tailwind preset which is bundled with Liquid and want to build your own config from scratch. Or you are using something other than Tailwind for the same purpose. In such cases you might want to access Liquid's design tokens (colors, spacings etc.) as "raw data". You can do so by importing the bundled design token file under @emdgroup-liquid/liquid/dist/css/design-tokens.json.

Rolling your own design tokens #

You have at least two options:

  1. Copy and overwrite the design-tokens.json and / or the CSS files with your own manually.

  2. Copy Liquid's token file on Figma, adjust it to your needs and auto-generate your design-tokens.json and a liquid.globals.css file with values from your own Figma token file by running a command from the @emdgroup-liquid/liquid package using npx.

You should not change the structure of the Figma token file nor the naming of elements within the file. You should only alter the element values.

Here is an example illustrating how to invoke the command mentioned above:

# npm
FIGMA_API_KEY=<your-api-key> npx @emdgroup-liquid/liquid apply-design-tokens --path "src/your/output/path" --figma-file "https://www.figma.com/file/<figma_id>/<file_name>?node-id=<node_id>"

# yarn
FIGMA_API_KEY=<your-api-key> yarn liquid apply-design-tokens --path "src/your/output/path" --figma-file "https://www.figma.com/file/<figma_id>/<file_name>?node-id=<node_id>"

As you can see, the command is invoked with npx. It uses an environment variable FIGMA_API_KEY, which you will have to provide in order to be able to fetch data from the Figma API, and executes the apply-design-tokens task. It also uses two application parameters: --figma-file, which is the URL to your Figma token file, and --path, which is the output path that points to a directory in your project where you would like to save the generated CSS file containing the CSS custom props. The command will save the design-tokens.json file in the root of your project. When you require the Tailwind CSS preset file from @emdgroup-liquid/liquid/dist/css/tailwind-preset.js, it will look for a token file in your project root.

Asset loading (including fonts) is not taken care of automatically when you use custom design tokens, so you will have to take care of that yourself.