ObjectStackObjectStack

Theme

Theme protocol schemas

Color Palette Schema Defines brand colors and their variants.

Source: packages/spec/src/ui/theme.zod.ts

TypeScript Usage

import { BorderRadiusSchema, ColorPaletteSchema, ShadowSchema, ThemeSchema, ThemeModeSchema, TypographySchema } from '@objectstack/spec/ui';
import type { BorderRadius, ColorPalette, Shadow, Theme, ThemeMode, Typography } from '@objectstack/spec/ui';

// Validate data
const result = BorderRadiusSchema.parse(data);

BorderRadius

Properties

PropertyTypeRequiredDescription
nonestringoptionalNo border radius (0)
smstringoptionalSmall border radius (e.g., 0.125rem)
basestringoptionalBase border radius (e.g., 0.25rem)
mdstringoptionalMedium border radius (e.g., 0.375rem)
lgstringoptionalLarge border radius (e.g., 0.5rem)
xlstringoptionalExtra large border radius (e.g., 0.75rem)
2xlstringoptional2X large border radius (e.g., 1rem)
fullstringoptionalFull border radius (50%)

ColorPalette

Properties

PropertyTypeRequiredDescription
primarystring✅Primary brand color (hex, rgb, or hsl)
secondarystringoptionalSecondary brand color
accentstringoptionalAccent color for highlights
successstringoptionalSuccess state color (default: green)
warningstringoptionalWarning state color (default: yellow)
errorstringoptionalError state color (default: red)
infostringoptionalInfo state color (default: blue)
backgroundstringoptionalBackground color
surfacestringoptionalSurface/card background color
textstringoptionalPrimary text color
textSecondarystringoptionalSecondary text color
borderstringoptionalBorder color
disabledstringoptionalDisabled state color
primaryLightstringoptionalLighter shade of primary
primaryDarkstringoptionalDarker shade of primary
secondaryLightstringoptionalLighter shade of secondary
secondaryDarkstringoptionalDarker shade of secondary

Shadow

Properties

PropertyTypeRequiredDescription
nonestringoptionalNo shadow
smstringoptionalSmall shadow
basestringoptionalBase shadow
mdstringoptionalMedium shadow
lgstringoptionalLarge shadow
xlstringoptionalExtra large shadow
2xlstringoptional2X large shadow
innerstringoptionalInner shadow (inset)

Theme

Properties

PropertyTypeRequiredDescription
namestring✅Unique theme identifier (snake_case)
labelstring✅Human-readable theme name
descriptionstringoptionalTheme description
modeEnum<'light' | 'dark' | 'auto'>✅Theme mode (light, dark, or auto)
colors{ primary: string; secondary?: string; accent?: string; success?: string; … }✅Color palette configuration
typography{ fontFamily?: object }optionalTypography settings
borderRadius{ none?: string; sm?: string; base?: string; md?: string; … }optionalBorder radius scale
shadows{ none?: string; sm?: string; base?: string; md?: string; … }optionalBox shadow effects
animationneveroptional[REMOVED] theme.animation was removed in @objectstack/spec 17.0.0 (#5021, ADR-0049 D2) — unlike the #3494 props above, the engine DID emit --duration-* and --timing-*, faithfully and for years; what never existed was a reader. No first-party component or stylesheet has ever consumed one, so every transition ran at the renderer default whatever you declared. Delete the key; if your own CSS reads those variables, declare them under customVars ({ "duration-fast": "150ms", "timing-ease_in": "cubic-bezier(0.4, 0, 1, 1)" } emits exactly the same properties). Run os migrate meta --from 16 to rewrite existing sources automatically.
zIndexneveroptional[REMOVED] theme.zIndex was removed in @objectstack/spec 17.0.0 (#5021, ADR-0049 D2) — the engine emitted --z-base … --z-tooltip and nothing read one, so an overlay you "lifted" still stacked by document order. Delete the key; if your own CSS reads those variables, declare them under customVars ({ "z-modal": "1050" } emits exactly the same --z-modal). Run os migrate meta --from 16 to rewrite existing sources automatically.
customVarsRecord<string, string>optionalCustom CSS variables (key-value pairs)
extendsstringoptionalBase theme to extend from

ThemeMode

Allowed Values

  • light
  • dark
  • auto

Typography

Properties

PropertyTypeRequiredDescription
fontFamily{ base?: string }optional
fontSizeneveroptional[REMOVED] theme.typography.fontSize was removed in @objectstack/spec 17.0.0 (#5021, ADR-0049 D2) — the engine emitted --font-size-xs … --font-size-4xl faithfully and NO first-party component or stylesheet has ever read one, so a declared type scale was real CSS that styled nothing. Delete the key; if your own CSS reads those variables, declare them under customVars ({ "font-size-lg": "1.125rem" } emits exactly the same --font-size-lg). Run os migrate meta --from 16 to rewrite existing sources automatically.
fontWeightneveroptional[REMOVED] theme.typography.fontWeight was removed in @objectstack/spec 17.0.0 (#5021, ADR-0049 D2) — the engine emitted --font-weight-* and nothing read it, so text rendered at the inherited weight whatever you declared. Delete the key; if your own CSS reads those variables, declare them under customVars ({ "font-weight-semibold": "600" } emits exactly the same --font-weight-semibold). Run os migrate meta --from 16 to rewrite existing sources automatically.
lineHeightneveroptional[REMOVED] theme.typography.lineHeight was removed in @objectstack/spec 17.0.0 (#5021, ADR-0049 D2) — the engine emitted --line-height-* and nothing read it, so every block kept its inherited leading. Delete the key; if your own CSS reads those variables, declare them under customVars ({ "line-height-relaxed": "1.75" } emits exactly the same --line-height-relaxed). Run os migrate meta --from 16 to rewrite existing sources automatically.
letterSpacingneveroptional[REMOVED] theme.typography.letterSpacing was removed in @objectstack/spec 17.0.0 (#5021, ADR-0049 D2) — the engine emitted --letter-spacing-* and nothing read it, so tracking never moved. Delete the key; if your own CSS reads those variables, declare them under customVars ({ "letter-spacing-wide": "0.025em" } emits exactly the same --letter-spacing-wide). Run os migrate meta --from 16 to rewrite existing sources automatically.

On this page

TypeScript UsageBorderRadiusPropertiesColorPalettePropertiesShadowPropertiesThemePropertiesThemeModeAllowed ValuesTypographyProperties