Styled SystemColors

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" color="fg.success" p="md">
      Using component props
    </Box>
  );
}

#

Using CSS variables

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.

Append the dark class name to the root <html> element to switch to dark mode.

<html class="dark">
  <!-- ... -->
</html>

#

Color Tokens

#

Text

Token and description

Value

fg.accent.blue

blue.500

#2094F3

fg.accent.magenta

magenta.600

#81046A

fg.accent.purple

purple.600

#4A297F

fg.accent.red

red.500

#CC1616

fg.brand

Primary brand color useful for accented text, highlights, and subheadings

brand.700

#002894

fg.default

Primary text color for page headings

neutral.800

#2E3442

fg.default.inverse

Primary text color when used on solid color bg

white

#FFFFFF

fg.disabled

Disabled text color for more subtle, lower-contrast, and non-interactive text

neutral.1200/32

#091E4252

fg.error

Error text color for danger and error states

red.700

#911D1D

fg.information

blue.600

#1668AC

fg.link

brand.500

#0037FF

fg.link.hover

brand.600

#002CCC

fg.link.visited

purple.500

#693AB6

fg.secondary

Secondary text color for labels and section headings

neutral.700

#4F576E

fg.success

Success text color

green.700

#24663E

fg.tertiary

Tertiary text color for supporting, paragraph, and placeholder text

neutral.600

#626A81

fg.warning

Warning text color

yellow.700

#B54707

#

Background

Token and description

Value

bg.brand

brand.50

#F0F3FF

bg.brand.solid

brand.500

#0037FF

bg.brand.solid.hover

brand.600

#002CCC

bg.disabled

neutral.1200/18

#091E422E

bg.discovery

purple.50

#F1ECF8

bg.error

red.50

#FFF7F7

bg.error.solid

red.500

#CC1616

bg.error.solid.hover

red.600

#B21313

bg.information

blue.50

#E7F3FE

bg.information.solid

blue.600

#1668AC

bg.input.disabled

neutral.1200/4

#091E420A

bg.neutral

neutral.75

#F5F6FA

bg.neutral.inverse

neutral.800

#2E3442

bg.neutral.inverse.hover

neutral.900

#262B37

bg.neutral.solid

neutral.200

#CACFDC

bg.neutral.solid.hover

neutral.300

#b8becb

bg.success

green.50

#E9F7F1

bg.success.solid

green.500

#03A65D

bg.success.solid.hover

green.600

#038047

bg.warning

yellow.50

#FFFAEA

bg.warning.solid

yellow.500

#F79008

bg.warning.solid.hover

yellow.600

#DC6903

#

Palette

aqua

50

#E5F7FB

200

#9AE5EF

500

#00BDD6

600

#007A8A

blue

50

#E7F3FE

200

#A8D5FA

500

#2094F3

600

#1668AC

900

#1C2B41

brand

50

#F0F3FF

100

#CDD8FC

200

#B3C3FF

300

#6A8FFC

400

#2E66F7

500

#0037FF

600

#002CCC

700

#002894

800

#001666

900

#000B33

dark

50

#d9d9d9

200

#9e9e9e

500

#707070

600

#080736

gray

50

#f9fafb

100

#f3f4f6

200

#e5e7eb

300

#d1d5db

400

#9ca3af

500

#6b7280

600

#4b5563

700

#374151

800

#1f2937

900

#111827

green

50

#E9F7F1

100

#D1F0E1

200

#A5E1C3

300

#7CD2A7

400

#5AC58A

500

#03A65D

600

#038047

700

#24663E

800

#17492B

900

#082415

magenta

50

#F8E7F5

200

#E39CD6

500

#B80597

600

#81046A

neutral

50

#F9FAFC

75

#F5F6FA

100

#E9EDF5

150

#DADFEB

200

#CACFDC

300

#b8becb

500

#868FA4

600

#626A81

700

#4F576E

800

#2E3442

900

#262B37

1000

#1C2029

1100

#171A23

1200

#091E42

orange

50

#fff5e5

200

#ffd699

500

#ff9900

600

#a36200

purple

50

#F1ECF8

200

#C4B1E2

500

#693AB6

600

#4A297F

900

#2B273F

red

50

#FFF7F7

100

#FCD6D6

200

#F9ACAC

300

#FC8B8B

400

#E31818

500

#CC1616

600

#B21313

700

#911D1D

800

#601313

900

#300A0A

slate

50

#f8fafc

100

#f1f5f9

200

#e2e8f0

300

#cbd5e1

400

#94a3b8

500

#64748b

600

#475569

700

#334155

800

#1e293b

900

#0f172a

950

#020617

yellow

50

#FFFAEA

100

#FEF1C6

200

#FEDF88

300

#FFC84B

400

#FDB022

500

#F79008

600

#DC6903

700

#B54707

800

#7A2E0D

900

#4E1D09

Responsive StylesGap
Copyright 2024 © Optimizely.