Styled SystemDesign Tokens

Design Tokens

Axiom uses CSS variables to declare design tokens.

#

Declaring tokens

#

CSS variables

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

So given a tokens object like this:

const tokens = {
  colors: {
    "aqua.50": "#e5f7fb",
    "aqua.200": "#9ae5ef",
  },
  spacing: {
    "2": "2px",
    "8": "8px",
    sm: "12px",
  },
};

The following css custom properties will be available:

:root {
  --ax-colors-aqua-50: "#e5f7fb";
  --ax-colors-aqua-200: "#9ae5ef";
  --ax-spacing-2: "2px";
  --ax-spacing-8: "8px";
  --ax-spacing-sm: "12px";
}

#

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" color="fg.success" p="md">
      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"],
        color: theme.colors["fg.success"],
        padding: theme.spacing.md,
      }}
    >
      Using inline styles
    </div>
  );
}

#

Reference

#

borderRadius

Name

Value

xs

var(--ax-borderRadius-xs)

sm

var(--ax-borderRadius-sm)

md

var(--ax-borderRadius-md)

lg

var(--ax-borderRadius-lg)

xl

var(--ax-borderRadius-xl)

full

var(--ax-borderRadius-full)

none

var(--ax-borderRadius-none)

#

borderWidth

Name

Value

0

var(--ax-borderWidth-0)

1

var(--ax-borderWidth-1)

2

var(--ax-borderWidth-2)

4

var(--ax-borderWidth-4)

#

boxShadow

Name

Value

xs

var(--ax-boxShadow-xs)

sm

var(--ax-boxShadow-sm)

md

var(--ax-boxShadow-md)

lg

var(--ax-boxShadow-lg)

xl

var(--ax-boxShadow-xl)

inner

var(--ax-boxShadow-inner)

none

var(--ax-boxShadow-none)

#

colors

Name

Value

current

var(--ax-colors-current)

transparent

var(--ax-colors-transparent)

black

var(--ax-colors-black)

white

var(--ax-colors-white)

aqua.50

var(--ax-colors-aqua-50)

aqua.200

var(--ax-colors-aqua-200)

aqua.500

var(--ax-colors-aqua-500)

aqua.600

var(--ax-colors-aqua-600)

blue.50

var(--ax-colors-blue-50)

blue.200

var(--ax-colors-blue-200)

blue.500

var(--ax-colors-blue-500)

blue.600

var(--ax-colors-blue-600)

blue.900

var(--ax-colors-blue-900)

brand.50

var(--ax-colors-brand-50)

brand.100

var(--ax-colors-brand-100)

brand.200

var(--ax-colors-brand-200)

brand.300

var(--ax-colors-brand-300)

brand.400

var(--ax-colors-brand-400)

brand.500

var(--ax-colors-brand-500)

brand.600

var(--ax-colors-brand-600)

brand.700

var(--ax-colors-brand-700)

brand.800

var(--ax-colors-brand-800)

brand.900

var(--ax-colors-brand-900)

dark.50

var(--ax-colors-dark-50)

dark.200

var(--ax-colors-dark-200)

dark.500

var(--ax-colors-dark-500)

dark.600

var(--ax-colors-dark-600)

gray.50

var(--ax-colors-gray-50)

gray.100

var(--ax-colors-gray-100)

gray.200

var(--ax-colors-gray-200)

gray.300

var(--ax-colors-gray-300)

gray.400

var(--ax-colors-gray-400)

gray.500

var(--ax-colors-gray-500)

gray.600

var(--ax-colors-gray-600)

gray.700

var(--ax-colors-gray-700)

gray.800

var(--ax-colors-gray-800)

gray.900

var(--ax-colors-gray-900)

green.50

var(--ax-colors-green-50)

green.100

var(--ax-colors-green-100)

green.200

var(--ax-colors-green-200)

green.300

var(--ax-colors-green-300)

green.400

var(--ax-colors-green-400)

green.500

var(--ax-colors-green-500)

green.600

var(--ax-colors-green-600)

green.700

var(--ax-colors-green-700)

green.800

var(--ax-colors-green-800)

green.900

var(--ax-colors-green-900)

magenta.50

var(--ax-colors-magenta-50)

magenta.200

var(--ax-colors-magenta-200)

magenta.500

var(--ax-colors-magenta-500)

magenta.600

var(--ax-colors-magenta-600)

neutral.50

var(--ax-colors-neutral-50)

neutral.75

var(--ax-colors-neutral-75)

neutral.100

var(--ax-colors-neutral-100)

neutral.150

var(--ax-colors-neutral-150)

neutral.200

var(--ax-colors-neutral-200)

neutral.300

var(--ax-colors-neutral-300)

neutral.500

var(--ax-colors-neutral-500)

neutral.600

var(--ax-colors-neutral-600)

neutral.700

var(--ax-colors-neutral-700)

neutral.800

var(--ax-colors-neutral-800)

neutral.900

var(--ax-colors-neutral-900)

neutral.1000

var(--ax-colors-neutral-1000)

neutral.1100

var(--ax-colors-neutral-1100)

neutral.1200

var(--ax-colors-neutral-1200)

neutral.50/6

var(--ax-colors-neutral-50-6)

neutral.50/32

var(--ax-colors-neutral-50-32)

neutral.1200/4

var(--ax-colors-neutral-1200-4)

neutral.1200/12

var(--ax-colors-neutral-1200-12)

neutral.1200/18

var(--ax-colors-neutral-1200-18)

neutral.1200/22

var(--ax-colors-neutral-1200-22)

neutral.1200/32

var(--ax-colors-neutral-1200-32)

orange.50

var(--ax-colors-orange-50)

orange.200

var(--ax-colors-orange-200)

orange.500

var(--ax-colors-orange-500)

orange.600

var(--ax-colors-orange-600)

purple.50

var(--ax-colors-purple-50)

purple.200

var(--ax-colors-purple-200)

purple.500

var(--ax-colors-purple-500)

purple.600

var(--ax-colors-purple-600)

purple.900

var(--ax-colors-purple-900)

red.50

var(--ax-colors-red-50)

red.100

var(--ax-colors-red-100)

red.200

var(--ax-colors-red-200)

red.300

var(--ax-colors-red-300)

red.400

var(--ax-colors-red-400)

red.500

var(--ax-colors-red-500)

red.600

var(--ax-colors-red-600)

red.700

var(--ax-colors-red-700)

red.800

var(--ax-colors-red-800)

red.900

var(--ax-colors-red-900)

slate.50

var(--ax-colors-slate-50)

slate.100

var(--ax-colors-slate-100)

slate.200

var(--ax-colors-slate-200)

slate.300

var(--ax-colors-slate-300)

slate.400

var(--ax-colors-slate-400)

slate.500

var(--ax-colors-slate-500)

slate.600

var(--ax-colors-slate-600)

slate.700

var(--ax-colors-slate-700)

slate.800

var(--ax-colors-slate-800)

slate.900

var(--ax-colors-slate-900)

slate.950

var(--ax-colors-slate-950)

yellow.50

var(--ax-colors-yellow-50)

yellow.100

var(--ax-colors-yellow-100)

yellow.200

var(--ax-colors-yellow-200)

yellow.300

var(--ax-colors-yellow-300)

yellow.400

var(--ax-colors-yellow-400)

yellow.500

var(--ax-colors-yellow-500)

yellow.600

var(--ax-colors-yellow-600)

yellow.700

var(--ax-colors-yellow-700)

yellow.800

var(--ax-colors-yellow-800)

yellow.900

var(--ax-colors-yellow-900)

bg.brand

var(--ax-colors-bg-brand)

bg.brand.solid

var(--ax-colors-bg-brand-solid)

bg.brand.solid.hover

var(--ax-colors-bg-brand-solid-hover)

bg.disabled

var(--ax-colors-bg-disabled)

bg.discovery

var(--ax-colors-bg-discovery)

bg.error

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

bg.error.solid

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

bg.error.solid.hover

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

bg.information

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

bg.information.solid

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

bg.input.disabled

var(--ax-colors-bg-input-disabled)

bg.neutral

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

bg.neutral.inverse

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

bg.neutral.inverse.hover

var(--ax-colors-bg-neutral-inverse-hover)

bg.neutral.solid

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

bg.neutral.solid.hover

var(--ax-colors-bg-neutral-solid-hover)

bg.success

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

bg.success.solid

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

bg.success.solid.hover

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

bg.warning

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

bg.warning.solid

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

bg.warning.solid.hover

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

border.active

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

border.active.hover

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

border.brand

var(--ax-colors-border-brand)

border.default

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

border.disabled

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

border.error

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

border.secondary

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

border.success

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

border.tertiary

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

border.warning

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

fg.accent.blue

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

fg.accent.magenta

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

fg.accent.purple

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

fg.accent.red

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

fg.brand

var(--ax-colors-fg-brand)

fg.default

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

fg.default.inverse

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

fg.disabled

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

fg.error

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

fg.information

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

fg.link

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

fg.link.hover

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

fg.link.visited

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

fg.secondary

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

fg.success

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

fg.tertiary

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

fg.warning

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

outline.brand

var(--ax-colors-outline-brand)

overlay

var(--ax-colors-overlay)

surface

var(--ax-colors-surface)

#

fontFamily

Name

Value

mono

var(--ax-fontFamily-mono)

sans

var(--ax-fontFamily-sans)

#

fontSize

Name

Value

xs

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

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

sm

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

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

md

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

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

lg

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

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

xl

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

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

2xl

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

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

3xl

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

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

4xl

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

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

5xl

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

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

6xl

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

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

7xl

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

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

#

letterSpacing

Name

Value

tighter

var(--ax-letterSpacing-tighter)

tight

var(--ax-letterSpacing-tight)

normal

var(--ax-letterSpacing-normal)

wide

var(--ax-letterSpacing-wide)

wider

var(--ax-letterSpacing-wider)

widest

var(--ax-letterSpacing-widest)

#

lineHeight

Name

Value

none

var(--ax-lineHeight-none)

tight

var(--ax-lineHeight-tight)

normal

var(--ax-lineHeight-normal)

loose

var(--ax-lineHeight-loose)

#

margins

Name

Value

xs

var(--ax-margins-xs)

sm

var(--ax-margins-sm)

md

var(--ax-margins-md)

lg

var(--ax-margins-lg)

xl

var(--ax-margins-xl)

0

var(--ax-margins-0)

2

var(--ax-margins-2)

4

var(--ax-margins-4)

6

var(--ax-margins-6)

8

var(--ax-margins-8)

10

var(--ax-margins-10)

12

var(--ax-margins-12)

16

var(--ax-margins-16)

20

var(--ax-margins-20)

24

var(--ax-margins-24)

32

var(--ax-margins-32)

48

var(--ax-margins-48)

64

var(--ax-margins-64)

80

var(--ax-margins-80)

-xs

var(--ax-margins--xs)

-sm

var(--ax-margins--sm)

-md

var(--ax-margins--md)

-lg

var(--ax-margins--lg)

-xl

var(--ax-margins--xl)

-2

var(--ax-margins--2)

-4

var(--ax-margins--4)

-6

var(--ax-margins--6)

-8

var(--ax-margins--8)

-10

var(--ax-margins--10)

-12

var(--ax-margins--12)

-16

var(--ax-margins--16)

-24

var(--ax-margins--24)

-32

var(--ax-margins--32)

-48

var(--ax-margins--48)

-64

var(--ax-margins--64)

-80

var(--ax-margins--80)

#

maxSize

Name

Value

xs

var(--ax-maxSize-xs)

sm

var(--ax-maxSize-sm)

md

var(--ax-maxSize-md)

lg

var(--ax-maxSize-lg)

xl

var(--ax-maxSize-xl)

2xl

var(--ax-maxSize-2xl)

full

var(--ax-maxSize-full)

#

screens

Name

Value

sm

var(--ax-screens-sm)

md

var(--ax-screens-md)

lg

var(--ax-screens-lg)

#

size

Name

Value

xs

var(--ax-size-xs)

sm

var(--ax-size-sm)

md

var(--ax-size-md)

lg

var(--ax-size-lg)

xl

var(--ax-size-xl)

0

var(--ax-size-0)

1

var(--ax-size-1)

2

var(--ax-size-2)

4

var(--ax-size-4)

6

var(--ax-size-6)

8

var(--ax-size-8)

12

var(--ax-size-12)

16

var(--ax-size-16)

20

var(--ax-size-20)

24

var(--ax-size-24)

32

var(--ax-size-32)

40

var(--ax-size-40)

48

var(--ax-size-48)

56

var(--ax-size-56)

64

var(--ax-size-64)

80

var(--ax-size-80)

96

var(--ax-size-96)

112

var(--ax-size-112)

128

var(--ax-size-128)

144

var(--ax-size-144)

160

var(--ax-size-160)

176

var(--ax-size-176)

192

var(--ax-size-192)

208

var(--ax-size-208)

224

var(--ax-size-224)

240

var(--ax-size-240)

256

var(--ax-size-256)

288

var(--ax-size-288)

320

var(--ax-size-320)

384

var(--ax-size-384)

5xl

var(--ax-size-5xl)

1/2

var(--ax-size-1-2)

1/3

var(--ax-size-1-3)

2/3

var(--ax-size-2-3)

1/4

var(--ax-size-1-4)

2/4

var(--ax-size-2-4)

3/4

var(--ax-size-3-4)

auto

var(--ax-size-auto)

fit

var(--ax-size-fit)

full

var(--ax-size-full)

max

var(--ax-size-max)

min

var(--ax-size-min)

#

spacing

Name

Value

xs

var(--ax-spacing-xs)

sm

var(--ax-spacing-sm)

md

var(--ax-spacing-md)

lg

var(--ax-spacing-lg)

xl

var(--ax-spacing-xl)

0

var(--ax-spacing-0)

2

var(--ax-spacing-2)

4

var(--ax-spacing-4)

6

var(--ax-spacing-6)

8

var(--ax-spacing-8)

10

var(--ax-spacing-10)

12

var(--ax-spacing-12)

16

var(--ax-spacing-16)

20

var(--ax-spacing-20)

24

var(--ax-spacing-24)

32

var(--ax-spacing-32)

48

var(--ax-spacing-48)

64

var(--ax-spacing-64)

80

var(--ax-spacing-80)

#

zIndex

Name

Value

0

var(--ax-zIndex-0)

10

var(--ax-zIndex-10)

20

var(--ax-zIndex-20)

30

var(--ax-zIndex-30)

40

var(--ax-zIndex-40)

50

var(--ax-zIndex-50)

auto

var(--ax-zIndex-auto)

popover

var(--ax-zIndex-popover)

toast

var(--ax-zIndex-toast)

tooltip

var(--ax-zIndex-tooltip)

Style PropsResponsive Styles
Copyright 2024 © Optimizely.