Design Tokens

Axiom uses CSS variables to declare design tokens and also conveniently exports the variable names in the theme object.

#

Declaring tokens

#

CSS variables

All tokens are available as CSS variables under the --ax-* prefix.

So given a tokens object like this:

{
  "colors": {
    "bg.accent": "#abff44",
    "fg.success": "#03a65d"
  },
  "zIndex": {
    "popover": "3000"
  }
}

The following css custom properties will be available:

:root {
  --ax-colors-bg-accent: #abff44;
  --ax-colors-fg-success: #03a65d;
  --ax-zIndex-popover: 3000;
}

And they can also be accessed via the theme object:

import { theme } from "@optiaxiom/react";
 
console.log(theme.colors["bg.accent"] === "var(--ax-colors-bg-accent)"); // true
console.log(theme.colors["fg.success"] === "var(--ax-colors-fg-success)"); // true
console.log(theme.zIndex.popover === "var(--ax-zIndex-popover)"); // true

#

Consuming tokens

#

Using style props

For all react components you can use the various style props to set the styles using tokens.

import { Box } from "@optiaxiom/react";
 
export function App() {
  return (
    <Box bg="bg.success.subtle" color="fg.success.strong" p="16">
      Using component props
    </Box>
  );
}

#

Consuming variables from CSS

You can also directly use the CSS variable name in your .css files.

import styles from "./App.module.css";
 
export function App() {
  return <div className={styles.root}>Using CSS variables</div>;
}

.root {
  background: var(--ax-colors-bg-success-subtle);
  color: var(--ax-colors-fg-success-strong);
  padding: 16px;
}

#

Consuming variables from JS

Axiom exports a theme contract that contains a map of all tokens to the corresponding CSS custom property name.

You can use this theme object when implementing any CSS-in-JS solutions.

import { theme } from "@optiaxiom/react";
 
export function App() {
  return (
    <div
      style={{
        background: theme.colors["bg.success.subtle"],
        color: theme.colors["fg.success.strong"],
        padding: "16px",
      }}
    >
      Using inline styles
    </div>
  );
}

#

Reference

#

borderRadius

#

boxShadow

#

colors

#

duration

#

fontFamily

#

fontSize

#

maxSize

#

size

#

zIndex

#

Related