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
#
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
#
import styles from "./App.module.css";
export function App() {
return <div className={styles.container}>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 | Value |
|
|---|---|---|
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 | Value |
|
|---|---|---|
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 | Value |
|
|---|---|---|
border.accent | ||
border.active | ||
border.active.hovered | ||
border.default | ||
border.default.hovered | ||
border.disabled | ||
border.error | ||
border.focus | ||
border.focus.error | ||
border.secondary | ||
border.success | ||
border.tertiary | ||
border.warning |