Colors

Box component supports multiple props for controlling an element’s background, border, and text colors.

You can also use the --ax-colors-* CSS variables directly in any CSS property.

#
Documentation

#
Using style props

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>
  );
}

#
Using CSS variables

Using CSS variables

App.tsx


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

#
Dark mode

Semantic color names such as bg.information, bg.success, etc. support light/dark modes out of the box.

Set the color-scheme property on the root <html> element to switch to dark mode.


:root {
  color-scheme: light dark;
}

#
Color Tokens

#
Text

Name	Styles
`fg.accent`
`fg.accent.hovered`
`fg.accent.strong`
`fg.avatar.neutral`
`fg.avatar.purple`
`fg.default`
`fg.default.inverse`
`fg.disabled`
`fg.error`
`fg.error.hovered`
`fg.error.light`
`fg.error.strong`
`fg.information`
`fg.information.light`
`fg.information.strong`
`fg.link.default`
`fg.link.default.hovered`
`fg.link.inverse`
`fg.link.subtle`
`fg.link.visited`
`fg.secondary`
`fg.spinner.default`
`fg.spinner.inverse`
`fg.success`
`fg.success.hovered`
`fg.success.light`
`fg.success.strong`
`fg.tertiary`
`fg.warning`
`fg.warning.hovered`
`fg.warning.inverse`
`fg.warning.light`
`fg.warning.strong`
`fg.white`

#
Background

Name	Styles
`bg.accent`
`bg.accent.hovered`
`bg.accent.light`
`bg.accent.pressed`
`bg.accent.subtle`
`bg.avatar.neutral`
`bg.avatar.purple`
`bg.default`
`bg.default.hovered`
`bg.default.inverse`
`bg.default.inverse.hovered`
`bg.default.inverse.pressed`
`bg.default.pressed`
`bg.error`
`bg.error.hovered`
`bg.error.light`
`bg.error.pressed`
`bg.error.subtle`
`bg.error.subtlest`
`bg.information`
`bg.information.light`
`bg.information.subtle`
`bg.overlay`
`bg.page`
`bg.secondary`
`bg.secondary.hovered`
`bg.spinner.default`
`bg.spinner.inverse`
`bg.success`
`bg.success.hovered`
`bg.success.light`
`bg.success.subtle`
`bg.tertiary`
`bg.tertiary.hovered`
`bg.warning`
`bg.warning.hovered`
`bg.warning.light`
`bg.warning.subtle`

#
Border

Name	Styles
`border.accent`
`border.control`
`border.control.hovered`
`border.default`
`border.disabled`
`border.error`
`border.focus`
`border.focus.error`
`border.secondary`
`border.success`
`border.tertiary`
`border.warning`