StylingDesign Tokens

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": "#2e66f7",
    "fg.success": "#03a65d"
  },
  "zIndex": {
    "popover": "3000"
  }
}

The following css custom properties will be available:

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

And they can 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.

Using component props
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.

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

#

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.

Using inline styles
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

Name

Value

Theme

xs

var(--ax-borderRadius-xs)

theme.borderRadius.xs

sm

var(--ax-borderRadius-sm)

theme.borderRadius.sm

md

var(--ax-borderRadius-md)

theme.borderRadius.md

lg

var(--ax-borderRadius-lg)

theme.borderRadius.lg

full

var(--ax-borderRadius-full)

theme.borderRadius.full

#

boxShadow

Name

Value

Theme

sm

var(--ax-boxShadow-sm)

theme.boxShadow.sm

md

var(--ax-boxShadow-md)

theme.boxShadow.md

lg

var(--ax-boxShadow-lg)

theme.boxShadow.lg

#

colors

Name

Value

Theme

bg.accent

var(--ax-colors-bg-accent)

theme.colors["bg.accent"]

bg.accent.hovered

var(--ax-colors-bg-accent-hovered)

theme.colors["bg.accent.hovered"]

bg.accent.light

var(--ax-colors-bg-accent-light)

theme.colors["bg.accent.light"]

bg.accent.pressed

var(--ax-colors-bg-accent-pressed)

theme.colors["bg.accent.pressed"]

bg.accent.subtle

var(--ax-colors-bg-accent-subtle)

theme.colors["bg.accent.subtle"]

bg.avatar.neutral

var(--ax-colors-bg-avatar-neutral)

theme.colors["bg.avatar.neutral"]

bg.avatar.purple

var(--ax-colors-bg-avatar-purple)

theme.colors["bg.avatar.purple"]

bg.default

var(--ax-colors-bg-default)

theme.colors["bg.default"]

bg.default.hovered

var(--ax-colors-bg-default-hovered)

theme.colors["bg.default.hovered"]

bg.default.inverse

var(--ax-colors-bg-default-inverse)

theme.colors["bg.default.inverse"]

bg.default.inverse.hovered

var(--ax-colors-bg-default-inverse-hovered)

theme.colors["bg.default.inverse.hovered"]

bg.default.inverse.pressed

var(--ax-colors-bg-default-inverse-pressed)

theme.colors["bg.default.inverse.pressed"]

bg.default.pressed

var(--ax-colors-bg-default-pressed)

theme.colors["bg.default.pressed"]

bg.error

var(--ax-colors-bg-error)

theme.colors["bg.error"]

bg.error.hovered

var(--ax-colors-bg-error-hovered)

theme.colors["bg.error.hovered"]

bg.error.light

var(--ax-colors-bg-error-light)

theme.colors["bg.error.light"]

bg.error.pressed

var(--ax-colors-bg-error-pressed)

theme.colors["bg.error.pressed"]

bg.error.subtle

var(--ax-colors-bg-error-subtle)

theme.colors["bg.error.subtle"]

bg.error.subtlest

var(--ax-colors-bg-error-subtlest)

theme.colors["bg.error.subtlest"]

bg.information

var(--ax-colors-bg-information)

theme.colors["bg.information"]

bg.information.light

var(--ax-colors-bg-information-light)

theme.colors["bg.information.light"]

bg.information.subtle

var(--ax-colors-bg-information-subtle)

theme.colors["bg.information.subtle"]

bg.overlay

var(--ax-colors-bg-overlay)

theme.colors["bg.overlay"]

bg.page

var(--ax-colors-bg-page)

theme.colors["bg.page"]

bg.secondary

var(--ax-colors-bg-secondary)

theme.colors["bg.secondary"]

bg.secondary.hovered

var(--ax-colors-bg-secondary-hovered)

theme.colors["bg.secondary.hovered"]

bg.spinner.default

var(--ax-colors-bg-spinner-default)

theme.colors["bg.spinner.default"]

bg.spinner.inverse

var(--ax-colors-bg-spinner-inverse)

theme.colors["bg.spinner.inverse"]

bg.success

var(--ax-colors-bg-success)

theme.colors["bg.success"]

bg.success.hovered

var(--ax-colors-bg-success-hovered)

theme.colors["bg.success.hovered"]

bg.success.light

var(--ax-colors-bg-success-light)

theme.colors["bg.success.light"]

bg.success.subtle

var(--ax-colors-bg-success-subtle)

theme.colors["bg.success.subtle"]

bg.tertiary

var(--ax-colors-bg-tertiary)

theme.colors["bg.tertiary"]

bg.tertiary.hovered

var(--ax-colors-bg-tertiary-hovered)

theme.colors["bg.tertiary.hovered"]

bg.warning

var(--ax-colors-bg-warning)

theme.colors["bg.warning"]

bg.warning.hovered

var(--ax-colors-bg-warning-hovered)

theme.colors["bg.warning.hovered"]

bg.warning.light

var(--ax-colors-bg-warning-light)

theme.colors["bg.warning.light"]

bg.warning.subtle

var(--ax-colors-bg-warning-subtle)

theme.colors["bg.warning.subtle"]

border.accent

var(--ax-colors-border-accent)

theme.colors["border.accent"]

border.active

var(--ax-colors-border-active)

theme.colors["border.active"]

border.active.hovered

var(--ax-colors-border-active-hovered)

theme.colors["border.active.hovered"]

border.default

var(--ax-colors-border-default)

theme.colors["border.default"]

border.default.hovered

var(--ax-colors-border-default-hovered)

theme.colors["border.default.hovered"]

border.disabled

var(--ax-colors-border-disabled)

theme.colors["border.disabled"]

border.error

var(--ax-colors-border-error)

theme.colors["border.error"]

border.focus

var(--ax-colors-border-focus)

theme.colors["border.focus"]

border.focus.error

var(--ax-colors-border-focus-error)

theme.colors["border.focus.error"]

border.secondary

var(--ax-colors-border-secondary)

theme.colors["border.secondary"]

border.success

var(--ax-colors-border-success)

theme.colors["border.success"]

border.tertiary

var(--ax-colors-border-tertiary)

theme.colors["border.tertiary"]

border.warning

var(--ax-colors-border-warning)

theme.colors["border.warning"]

fg.accent

var(--ax-colors-fg-accent)

theme.colors["fg.accent"]

fg.accent.hovered

var(--ax-colors-fg-accent-hovered)

theme.colors["fg.accent.hovered"]

fg.accent.strong

var(--ax-colors-fg-accent-strong)

theme.colors["fg.accent.strong"]

fg.avatar.neutral

var(--ax-colors-fg-avatar-neutral)

theme.colors["fg.avatar.neutral"]

fg.avatar.purple

var(--ax-colors-fg-avatar-purple)

theme.colors["fg.avatar.purple"]

fg.default

var(--ax-colors-fg-default)

theme.colors["fg.default"]

fg.default.inverse

var(--ax-colors-fg-default-inverse)

theme.colors["fg.default.inverse"]

fg.disabled

var(--ax-colors-fg-disabled)

theme.colors["fg.disabled"]

fg.error

var(--ax-colors-fg-error)

theme.colors["fg.error"]

fg.error.hovered

var(--ax-colors-fg-error-hovered)

theme.colors["fg.error.hovered"]

fg.error.light

var(--ax-colors-fg-error-light)

theme.colors["fg.error.light"]

fg.error.strong

var(--ax-colors-fg-error-strong)

theme.colors["fg.error.strong"]

fg.information

var(--ax-colors-fg-information)

theme.colors["fg.information"]

fg.information.light

var(--ax-colors-fg-information-light)

theme.colors["fg.information.light"]

fg.information.strong

var(--ax-colors-fg-information-strong)

theme.colors["fg.information.strong"]

fg.link.default

var(--ax-colors-fg-link-default)

theme.colors["fg.link.default"]

fg.link.default.hovered

var(--ax-colors-fg-link-default-hovered)

theme.colors["fg.link.default.hovered"]

fg.link.inverse

var(--ax-colors-fg-link-inverse)

theme.colors["fg.link.inverse"]

fg.link.subtle

var(--ax-colors-fg-link-subtle)

theme.colors["fg.link.subtle"]

fg.link.visited

var(--ax-colors-fg-link-visited)

theme.colors["fg.link.visited"]

fg.secondary

var(--ax-colors-fg-secondary)

theme.colors["fg.secondary"]

fg.spinner.default

var(--ax-colors-fg-spinner-default)

theme.colors["fg.spinner.default"]

fg.spinner.inverse

var(--ax-colors-fg-spinner-inverse)

theme.colors["fg.spinner.inverse"]

fg.success

var(--ax-colors-fg-success)

theme.colors["fg.success"]

fg.success.hovered

var(--ax-colors-fg-success-hovered)

theme.colors["fg.success.hovered"]

fg.success.light

var(--ax-colors-fg-success-light)

theme.colors["fg.success.light"]

fg.success.strong

var(--ax-colors-fg-success-strong)

theme.colors["fg.success.strong"]

fg.tertiary

var(--ax-colors-fg-tertiary)

theme.colors["fg.tertiary"]

fg.warning

var(--ax-colors-fg-warning)

theme.colors["fg.warning"]

fg.warning.hovered

var(--ax-colors-fg-warning-hovered)

theme.colors["fg.warning.hovered"]

fg.warning.inverse

var(--ax-colors-fg-warning-inverse)

theme.colors["fg.warning.inverse"]

fg.warning.light

var(--ax-colors-fg-warning-light)

theme.colors["fg.warning.light"]

fg.warning.strong

var(--ax-colors-fg-warning-strong)

theme.colors["fg.warning.strong"]

fg.white

var(--ax-colors-fg-white)

theme.colors["fg.white"]

#

fontFamily

Name

Value

Theme

mono

var(--ax-fontFamily-mono)

theme.fontFamily.mono

sans

var(--ax-fontFamily-sans)

theme.fontFamily.sans

#

fontSize

Name

Value

Theme

xs

fontSize: var(--ax-fontSize-xs-fontSize)

lineHeight: var(--ax-fontSize-xs-lineHeight)

fontSize: theme.fontSize.xs.fontSize

lineHeight: theme.fontSize.xs.lineHeight

sm

fontSize: var(--ax-fontSize-sm-fontSize)

lineHeight: var(--ax-fontSize-sm-lineHeight)

fontSize: theme.fontSize.sm.fontSize

lineHeight: theme.fontSize.sm.lineHeight

md

fontSize: var(--ax-fontSize-md-fontSize)

lineHeight: var(--ax-fontSize-md-lineHeight)

fontSize: theme.fontSize.md.fontSize

lineHeight: theme.fontSize.md.lineHeight

lg

fontSize: var(--ax-fontSize-lg-fontSize)

lineHeight: var(--ax-fontSize-lg-lineHeight)

fontSize: theme.fontSize.lg.fontSize

lineHeight: theme.fontSize.lg.lineHeight

xl

fontSize: var(--ax-fontSize-xl-fontSize)

lineHeight: var(--ax-fontSize-xl-lineHeight)

fontSize: theme.fontSize.xl.fontSize

lineHeight: theme.fontSize.xl.lineHeight

2xl

fontSize: var(--ax-fontSize-2xl-fontSize)

lineHeight: var(--ax-fontSize-2xl-lineHeight)

fontSize: theme.fontSize["2xl"].fontSize

lineHeight: theme.fontSize["2xl"].lineHeight

3xl

fontSize: var(--ax-fontSize-3xl-fontSize)

lineHeight: var(--ax-fontSize-3xl-lineHeight)

fontSize: theme.fontSize["3xl"].fontSize

lineHeight: theme.fontSize["3xl"].lineHeight

4xl

fontSize: var(--ax-fontSize-4xl-fontSize)

lineHeight: var(--ax-fontSize-4xl-lineHeight)

fontSize: theme.fontSize["4xl"].fontSize

lineHeight: theme.fontSize["4xl"].lineHeight

5xl

fontSize: var(--ax-fontSize-5xl-fontSize)

lineHeight: var(--ax-fontSize-5xl-lineHeight)

fontSize: theme.fontSize["5xl"].fontSize

lineHeight: theme.fontSize["5xl"].lineHeight

#

maxSize

Name

Value

Theme

xs

var(--ax-maxSize-xs)

theme.maxSize.xs

sm

var(--ax-maxSize-sm)

theme.maxSize.sm

md

var(--ax-maxSize-md)

theme.maxSize.md

lg

var(--ax-maxSize-lg)

theme.maxSize.lg

#

size

Name

Value

Theme

2xs

var(--ax-size-2xs)

theme.fontSize["2xs"]

xs

var(--ax-size-xs)

theme.fontSize.xs

sm

var(--ax-size-sm)

theme.fontSize.sm

md

var(--ax-size-md)

theme.fontSize.md

lg

var(--ax-size-lg)

theme.fontSize.lg

xl

var(--ax-size-xl)

theme.fontSize.xl

3xl

var(--ax-size-3xl)

theme.fontSize["3xl"]

#

zIndex

Name

Value

Theme

popover

var(--ax-zIndex-popover)

theme.zIndex.popover

toast

var(--ax-zIndex-toast)

theme.zIndex.toast

tooltip

var(--ax-zIndex-tooltip)

theme.zIndex.tooltip

Style PropsResponsive Styles