Colors

The Wojo Framework color system is built entirely on CSS custom properties defined in wf-colors.css . It provides 13 named brand colors with hover, active, inverted, and shadow variants; a set of semantic UI tokens consumed by every wf-* component; dark mode overrides via html[data-theme="dark"] ; elevation and shadow tokens; and a gray scale. Override any token on :root or a scoped selector to retheme the entire UI without touching component CSS.

Brand Colors

Thirteen named colors plus light and dark neutrals. Each color exposes five CSS variables: the base value, a darker hover, a darker active, a tinted inverted surface, and a semi-transparent shadow tint.

primary #5F41FB

secondary #436dad

positive #4a7d6a

negative #8b4d6f

alert #a8884a

sage #657d6a

indigo #4f5a7a

earth #BB8B72

info #4d7282

forest #4d6b45

plum #7a5470

lavender #6a5d82

dusk #5a637a

light #f4f4f5

dark #09090b

Every named color (e.g. primary ) exposes the same five variants:

--primary-color

--primary-color-hover

--primary-color-active

--primary-color-inverted

/* Each named color exposes these variants */
--{name}-color          /* base value */
--{name}-color-hover    /* 24% darker (color-mix oklab) */
--{name}-color-active   /* 45% darker (color-mix oklab) */
--{name}-color-inverted /* 12% tinted light surface */
--{name}-color-shadow   /* 15% semi-transparent tint */

UI Tokens

Semantic tokens consumed by every wf-* component. These are the only color values you need to override when theming — component stylesheets never reference raw hex values.

Text

--wf-text #1d2433

--wf-text-muted #5b6474

Surface

--wf-surface #ffffff

--wf-surface-subtle #f9f9fa

--wf-border #d8dfec

Status

--wf-primary #5F41FB

--wf-success #0d9158

--wf-warning #a15b00

--wf-danger #be2f3a

On-color (foreground over status)

--wf-on-primary #1c1152

--wf-om-success #192b25

--wf-on-warning #382d19

--wf-on-danger #2f1a26

/* Override UI tokens to retheme all components at once */
:root {
  --wf-primary:      #your-brand;
  --wf-text:         #your-text;
  --wf-surface:      #your-surface;
  --wf-border:       #your-border;
}

Dark Mode

Add data-theme="dark" to the <html> element to activate dark mode. The framework ships a complete html[data-theme="dark"] block that overrides all surface, text, border, per-color, inverted, and shadow tokens. No extra class names or duplicated component CSS are needed.

Light (default)

surface · text · primary · border

Dark

surface · text · primary · border

<!-- Activate dark mode -->
<html data-theme="dark">

<!-- Activate light mode explicitly -->
<html data-theme="light">

The dark block overrides every surface, text, border, and per-color token using color-mix() to blend brand colors with the dark surface for a consistent perceptual weight. Inverted variant tokens are recalculated so tinted backgrounds remain readable against the dark base.

html[data-theme="dark"] {
  --wf-surface:        #111314;
  --wf-surface-subtle: #0f1112;
  --wf-border:         #3f4143;
  --wf-text:           #F1F4F8;
  --wf-text-muted:     #A2ABB7;

  /* Primary brightened for dark backgrounds */
  --primary-color: color-mix(in srgb, #8a73ff 68%, var(--wf-surface-subtle) 32%);

  /* Inverted surfaces recalculated */
  --primary-color-inverted:
    color-mix(in srgb, var(--wf-surface-subtle) 80%, var(--primary-color) 20%);
}

Elevation & Shadows

Four shadow tokens map to the four UI elevation levels — inline surfaces, raised cards, floating panels, and modal dialogs. Two overlay tokens cover full-screen backdrops. Dark mode redefines all six with higher-opacity black shadows to compensate for the loss of contrast against dark surfaces.

--wf-shadow-soft Subtle depth for inline containers

--wf-shadow-raised Raised cards and interactive tiles

--wf-shadow-popover Dropdowns, tooltips, popovers

--wf-shadow-modal Modal dialogs and drawers

/* Shadow tokens */
--wf-shadow-soft:    0 1px 3px rgba(15,32,69,.06), 0 4px 16px rgba(15,32,69,.05);
--wf-shadow-raised:  0 4px 12px rgba(15,32,69,.10), 0 10px 32px rgba(15,32,69,.08);
--wf-shadow-popover: 0 2px 8px rgba(15,32,69,.08), 0 8px 24px rgba(15,32,69,.12);
--wf-shadow-modal:   0 2px 8px rgba(15,32,69,.06), 0 12px 40px rgba(15,32,69,.16);

/* Overlay tokens (full-screen backdrops) */
--wf-overlay:        rgba(15,32,69,.48);
--wf-overlay-strong: rgba(0,0,0,.45);
--wf-on-overlay:     #fff;

Grey Scale

A seven-step gray ramp from near-white to mid-charcoal. Use these for dividers, disabled states, placeholder text, and subtle backgrounds when the UI token set is too coarse.

100

200

300

400

500

600

700

--grey-color-100: #f1f2f3;
--grey-color-200: #e2e4e6;
--grey-color-300: #c6cbd0;
--grey-color-400: #aaafb4;
--grey-color-500: #8e959c;
--grey-color-600: #717981;
--grey-color-700: #565d64;

Token Reference

Complete list of CSS custom properties defined in wf-colors.css .

Brand color variants

Token pattern	Description
--{name}-color	Base color value. Names: primary · secondary · positive · negative · alert · sage · indigo · earth · info · forest · plum · lavender · dusk · light · dark
--{name}-color-hover	24% darker via color-mix(in oklab, … 76%, black) . Used for hover states on solid fills.
--{name}-color-active	45% darker via color-mix(in oklab, … 55%, black) . Used for pressed/active states.
--{name}-color-inverted	12% tinted light surface via color-mix(in oklab, … 12%, white) . Used for soft tinted backgrounds (badges, tags, highlights). Recalculated in dark mode.
--{name}-color-shadow	15% semi-transparent tint via color-mix(in srgb, … 15%, transparent) . Used for colored focus rings and glows.

Semantic UI tokens

Token	Light value	Description
--wf-text	#1d2433	Primary body text color.
--wf-text-muted	#5b6474	Secondary / helper text, placeholders, captions.
--wf-surface	#ffffff	Default component background — cards, inputs, panels.
--wf-surface-subtle	#f9f9fa	Slightly off-white background for page sections and table rows.
--wf-border	#d8dfec	Default border / divider color.
--wf-primary	var(--primary-color)	Alias for the primary brand color. Used by all interactive components.
--wf-success	#0d9158	Success / positive feedback color.
--wf-warning	#a15b00	Warning / caution color.
--wf-danger	#be2f3a	Error / destructive action color.
--wf-on-primary / -success / -warning / -danger	#fff	Foreground text drawn on top of the corresponding status color fill.
--wf-gradient-from	#5F41FB	Start stop for the default brand gradient.
--wf-gradient-to	#436dad	End stop for the default brand gradient.

Elevation & overlay tokens

Token	Description
--wf-shadow-soft	Subtle two-layer shadow for inline surfaces and subtle cards.
--wf-shadow-raised	Stronger shadow for raised interactive cards and tiles.
--wf-shadow-popover	Floating shadow for dropdowns, tooltips, and popovers.
--wf-shadow-modal	Heaviest shadow for modal dialogs and side drawers.
--wf-overlay	Semi-transparent backdrop for modals ( rgba(15,32,69,.48) ).
--wf-overlay-strong	Darker backdrop for lightboxes ( rgba(0,0,0,.45) ).
--wf-on-overlay	Text/icon color is drawn directly on an overlay backdrop.

Gray scale

Token	Value	Description
--grey-color-100	#f1f2f3	Near-white. Table stripe, subtle hover, page section background.
--grey-color-200	#e2e4e6	Light gray. Disabled inputs, skeleton loaders.
--grey-color-300	#c6cbd0	Soft mid-gray. Dividers, inactive tab borders.
--grey-color-400	#aaafb4	Mid-gray. Placeholder text, empty state icons.
--grey-color-500	#8e959c	Medium gray. Helper text, secondary icon fills.
--grey-color-600	#717981	Dark gray. Subdued body copy on light backgrounds.
--grey-color-700	#565d64	Deep gray. High-contrast secondary text.