Design Tokens

Slate 3.x expresses design decisions as Slate-owned CSS variables (--slate-*) in OKLCH color space. Tailwind v4 theme colors map those variables so components use semantic utilities like bg-background and text-primary.

Prefer clicking swatches? Open the Themes playground.

Token names below are frozen for rename — see API freeze.

Architecture

code

--slate-* variables (OKLCH)
        ↓
@@theme inline mappings in slate.css
        ↓
Tailwind utilities (bg-primary, border-input, …)
        ↓
Blade components

--slate-* variables (OKLCH)
        ↓
@theme inline mappings in slate.css
        ↓
Tailwind utilities (bg-primary, border-input, …)
        ↓
Blade components

Base tokens

Token	Tailwind utility	Purpose
`--slate-background`	`bg-background`	Page background
`--slate-foreground`	`text-foreground`	Primary text
`--slate-card`	`bg-card`	Elevated surfaces
`--slate-border`	`border-border`	Default borders
`--slate-input`	`border-input`	Form control borders
`--slate-ring`	`ring-ring`	Focus rings
`--slate-radius`	`rounded-*` scale	Global border radius

Semantic colors

Token	Tailwind utility	Purpose
`--slate-primary`	`bg-primary`	Primary actions
`--slate-secondary`	`bg-secondary`	Secondary actions
`--slate-muted`	`bg-muted`	Subtle backgrounds
`--slate-accent`	`bg-accent`	Hover/highlight states
`--slate-destructive`	`bg-destructive`	Destructive actions

Foreground pairs exist for each (--slate-primary-foreground, etc.).

State colors (foundation)

These tokens are defined for future component variants:

Token	Purpose
`--slate-success`	Positive feedback
`--slate-warning`	Caution states
`--slate-info`	Informational states
`--slate-destructive-foreground`	Text on destructive surfaces

Not all state tokens have component variants yet — they're part of the token foundation.

Customizing

Override variables after importing slate.css:

styles.css

@import 'tailwindcss';
@import '../../vendor/electrik/slate/resources/css/slate.css';

:root {
    --slate-primary: oklch(0.45 0.2 260);
    --slate-primary-foreground: oklch(0.98 0 0);
    --slate-radius: 0.5rem;
}

.dark {
    --slate-primary: oklch(0.75 0.15 260);
}

@import 'tailwindcss';
@import '../../vendor/electrik/slate/resources/css/slate.css';

:root {
    --slate-primary: oklch(0.45 0.2 260);
    --slate-primary-foreground: oklch(0.98 0 0);
    --slate-radius: 0.5rem;
}

.dark {
    --slate-primary: oklch(0.75 0.15 260);
}

Dark mode

Dark values live under the .dark selector in slate.css. Toggle dark mode by adding/removing .dark on <html>:

example.blade.php

<x-slate::dark-mode-toggle />

<x-slate::dark-mode-toggle />

Where tokens live

All defaults are in vendor/electrik/slate/resources/css/slate.css. Components never hard-code hex values — they use Tailwind semantic classes that resolve through the theme map.