Celerik UI

Appearance

Celerik\Ui\Theme ​

Console ​

final class Celerik\Ui\Theme\Console

The celerik-theme command: build a theme stylesheet from theme.json, check its contrast, or start a theme from a preset.

php
vendor/bin/celerik-theme preset tailwind > theme.json
vendor/bin/celerik-theme check theme.json
vendor/bin/celerik-theme build theme.json public/css/acme.css

Exit codes: 0 done, 1 a contrast check failed, 2 invalid usage or an invalid theme.

Constants ​

ConstantValue
OK0
CONTRAST_FAILED1
INVALID2

Methods ​

__construct ​

php
__construct($out, $err)

run ​

php
run(array $argv): int

@param list<string> $argv Arguments without the script name.

Contrast ​

final class Celerik\Ui\Theme\Contrast

WCAG 2.x contrast checks for theme palettes. The pairs come from theme/contrast.json, which the ThemeBuilder and the tests use too.

Methods ​

ratio ​

php
static ratio(string $foreground, string $background): float

Contrast ratio of two "#rrggbb" colors, from 1 to 21.

report ​

php
static report(Theme $theme): array

Every pair, in light then dark mode.

failures ​

php
static failures(Theme $theme): array

@return list<ContrastResult> Only the pairs below their minimum.

pairs ​

php
static pairs(): array

@return list<array{foreground: string, background: string, minimum: float, label: string, wcag: string}>

ContrastResult ​

final class Celerik\Ui\Theme\ContrastResult implements Stringable

The contrast of one color pair of a theme, in one mode.

Methods ​

__construct ​

php
__construct(string $mode, string $foreground, string $background, string $foregroundColor, string $backgroundColor, float $ratio, float $minimum, string $label, string $wcag)

passes ​

php
passes(): bool

Stylesheet ​

final class Celerik\Ui\Theme\Stylesheet

Writes a theme's stylesheet: custom properties for the light and dark palettes and the shape tokens, loaded after celerik.css and the base theme's stylesheet.

The output is deterministic: resources/js/theme-css.js produces the same text in the ThemeBuilder, and the tests compare both. Every value comes from a validated Theme, so nothing in it can break out of a declaration.

Constants ​

ConstantValue
SHADOWS['none' => 'none', 'subtle' => '0 1px 2px rgba(0, 0, 0, 0.08)', 'elevated' => '0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15)', 'outlined' =…

Methods ​

render ​

php
static render(Theme $theme): string

Theme ​

final class Celerik\Ui\Theme\Theme

A Celerik theme: design tokens on top of a base look (theme/theme.schema.json).

php
$theme = Theme::preset('tailwind')->name('Acme')->color('light', 'primary', '#0b5394');
$theme->contrast();   // WCAG report, see Contrast

Every value is validated against a strict format (hex colors, plain font names, numbers), so a theme loaded from user input can never inject CSS into the generated stylesheet.

Constants ​

ConstantValue
BASES['bootstrap', 'material', 'tailwind']
MODES['light', 'dark']
TOKENS['primary', 'primaryHover', 'onPrimary', 'bodyBg', 'bodyColor', 'muted', 'surface', 'border', 'inputBorder', 'danger']
SHADOWS['none', 'subtle', 'elevated', 'outlined']

Methods ​

preset ​

php
static preset(string $name): self

One of the shipped themes, from theme/presets/{name}.json.

presetPath ​

php
static presetPath(string $name): string

fromArray ​

php
static fromArray(array $data): self
  • $data: A theme as in theme/theme.schema.json.
  • Throws InvalidArgumentException When a value is missing, unknown or malformed.

fromJson ​

php
static fromJson(string $json): self

@throws InvalidArgumentException When the JSON is invalid or the theme is malformed.

name ​

php
name(string $name): self

base ​

php
base(string $base): self

color ​

php
color(string $mode, string $token, string $color): self

@param string $color "#rrggbb"

radius ​

php
radius(?float $rem): self

Corner radius in rem (0 to 2), or null to keep the base theme's.

fontFamily ​

php
fontFamily(?string $stack): self

A font stack such as "Inter, system-ui, sans-serif", or null to keep the base theme's.

shadow ​

php
shadow(?string $shadow): self

none, subtle, elevated or outlined, or null to keep the base theme's.

getName ​

php
getName(): string

getBase ​

php
getBase(): string

palette ​

php
palette(string $mode): array

@return array<string, string> token => #rrggbb

rgb ​

php
rgb(string $mode, string $token): string

A color as "r, g, b", for Bootstrap's *-rgb custom properties.

getRadius ​

php
getRadius(): ?float

getFontFamily ​

php
getFontFamily(): ?string

getShadow ​

php
getShadow(): ?string

toCss ​

php
toCss(): string

The theme's stylesheet, to load after celerik.css and the base theme's stylesheet (Assets::tags(theme: $theme->getBase(), customTheme: '/css/acme.css')).

contrast ​

php
contrast(): array

@return list<ContrastResult>

toArray ​

php
toArray(): array

@return array<string, mixed> The theme as in theme/theme.schema.json.

toJson ​

php
toJson(): string

Released under the MIT License.

Celerik UI contributors