AxiomCSS

Graphics

Slightly odd term, 'graphics', but here we look at backgrounds, images, gradients .. things like that.

Backgrounds

By default, Axiom provides a set of neutral (or 'base') colors. These take on board the default hue and saturation (set in config) and generates a color ramp with familar class names for setting gray/neutral/base background colors.

You can adjust these all at once by customising your base hue and saturation in the config file. You may need to adjust lightness values to taste, depending on your chosen values. As a small example of how these change will base hue/sasturation values, you can play with the sliders below.

It might not be perfect, but it could be a good starting point for neutral shades. We'll be looking to improve this with OKLCH in the near future.

.bg-base-50
.bg-base-100
.bg-base-200
.bg-base-300
.bg-base-400
.bg-base-500
.bg-base-600
.bg-base-700
.bg-base-800
.bg-base-900

Base/neutral colors

Axiom provides a disposable set of base/neutral utility classes for background colors, text colors, and border colors. By default these classes automatically invert when in dark mode, and as such, the class names are prefixed with 'i-'

These classes use the invertible custom properties set in the config area. These custom properties themselves inherit the base hue and saturation values also set in config. The values for dark mode are not mathematically calculated; this doesn't seem to work very well. INstead they are set by eye, and can be tweaked further acoording to taste and requirements.

Primary text
Secondary text
Tertiary text
base-floor
base-floor
base-floor
base-low
base-low
base-low
base-medium
base-medium
base-medium
base-high
base-high
base-high
base-floating
base-floating
base-floating
Subtle
Medium
Strong
base-floor
base-low
base-medium
base-high
base-floating