Skip to content
Static Bloom

Theme reference

@static-bloom/tailwind maps its theme with @theme inline, so every utility below compiles to a var(--sb-*) reference. A flavor or accent change restyles the page at runtime; nothing is recompiled. Tailwind’s own spacing, font sizes, breakpoints and other defaults stay as they are.

Colors

Section titled “Colors”

Two families of color keys. Semantic keys have no prefix and follow the nearest flavor scope; use them for components. Raw palette keys always carry the sb- prefix; use them when you mean one specific color. The chips resolve in the flavor you picked in the header.

Surfaces

  • canvas
  • canvas-subtle
  • canvas-sunken
  • panel
  • panel-hover
  • panel-active

Foreground

  • fg
  • fg-muted
  • fg-subtle
  • fg-faint
  • fg-disabled

Lines

  • line
  • line-strong
  • line-bright

Intents

  • primary
  • on-primary
  • secondary
  • on-secondary
  • info
  • on-info
  • success
  • on-success
  • warning
  • on-warning
  • danger
  • on-danger

Other

  • ring
  • link
  • backdrop
  • glass

Raw neutrals

  • sb-crust
  • sb-mantle
  • sb-base
  • sb-surface-0
  • sb-surface-1
  • sb-surface-2
  • sb-overlay-0
  • sb-overlay-1
  • sb-overlay-2
  • sb-subtext-0
  • sb-subtext-1
  • sb-text

Raw accents

  • sb-plasma
  • sb-laser
  • sb-ember
  • sb-sodium
  • sb-halogen
  • sb-acid
  • sb-coolant
  • sb-frost
  • sb-ion
  • sb-ultraviolet
  • sb-orchid
  • sb-chrome

Every key works with all of Tailwind’s color utilities: bg-*, text-*, border-*, ring-*, outline-*, fill-*, stroke-*, decoration-*, caret-* and the rest.

<div class="bg-panel text-fg border border-line rounded-lg">
  <p class="text-fg-muted">Courier run</p>
  <span class="text-sb-acid">online</span>
</div>

Opacity modifiers mix the variable, so they follow the flavor too: bg-primary/20 compiles to color-mix(in oklab, var(--sb-primary) 20%, transparent).

Fonts

Section titled “Fonts”
Utility Token Family
font-display --sb-font-display Oxanium Variable
font-sans --sb-font-sans Geist Variable
font-mono --sb-font-mono JetBrains Mono Variable

font-display: Night shift starts at ten

font-sans: Body copy, labels and controls.

font-mono: payout 4,500 · wanted_level 3

@import '@static-bloom/tailwind' also loads the bundled font files; @static-bloom/tailwind/theme.css maps the families without loading them.

Radius

Section titled “Radius”
Utility Token Value
rounded-xs --sb-radius-xs 2px
rounded-sm --sb-radius-sm 4px
rounded-md --sb-radius-md 6px
rounded-lg --sb-radius-lg 10px
rounded-xl --sb-radius-xl 14px
rounded-2xl --sb-radius-2xl 20px

Directional forms (rounded-t-lg, rounded-s-md, …) use the same values. rounded-full and the larger Tailwind sizes are unchanged.

rounded-xs
rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-2xl

Shadows

Section titled “Shadows”
Utility Token Use
shadow-sm --sb-shadow-sm Cards
shadow-md --sb-shadow-md Toasts, HUD panels
shadow-lg --sb-shadow-lg Raised panels
shadow-overlay --sb-shadow-overlay Menus, popovers, dialogs
shadow-sm
shadow-md
shadow-lg
shadow-overlay

Shadows are near-black on dark flavors and soft plum on Daybreak. The neon glow is a separate utility: see Utilities & variants.

Easing

Section titled “Easing”
Utility Token Curve Use
ease-standard --sb-ease-standard cubic-bezier(0.2, 0, 0, 1) Hover and state changes
ease-out --sb-ease-out cubic-bezier(0.16, 1, 0.3, 1) Entrances
ease-in --sb-ease-in cubic-bezier(0.7, 0, 0.84, 0) Exits
ease-emphasized --sb-ease-emphasized cubic-bezier(0.3, 0, 0, 1.15) Small overshoot

ease-out and ease-in replace Tailwind’s curves of the same name; ease-in-out and ease-linear are unchanged. Pair them with Tailwind’s duration-* utilities.

Animations

Section titled “Animations”

Each utility runs a keyframe of the same name with an sb- prefix, defined inside the theme. Entrances and exits run once with the motion tokens; the decorative ones loop.

Utility Timing Notes
animate-fade-in, animate-zoom-in 220ms, ease-out, once Entrances
animate-fade-out, animate-zoom-out 150ms, ease-in, once Exits
animate-slide-in-from-{top,bottom,left,right} 220ms, ease-out, once Moves 1rem while fading in
animate-slide-out-to-{top,bottom,left,right} 150ms, ease-in, once Moves 1rem while fading out
animate-collapsible-down, animate-collapsible-up 220ms, once Height from --reka-collapsible-content-height
animate-accordion-down, animate-accordion-up 220ms, once Height from --reka-accordion-content-height
animate-pulse-glow 2s loop Glow breathes between glow-sm and glow-lg
animate-flicker 3s loop A failing neon tube
animate-glitch 3s loop A 2px jitter near the end of each cycle
animate-scan 4s loop Moves a layer from top to bottom
animate-shimmer 2s loop Slides an oversized background image

Every animate-* utility, Tailwind’s own animate-spin and animate-pulse included, becomes animation: none under prefers-reduced-motion: reduce, also in variant forms such as hover:animate-pulse-glow. Live examples are on Utilities & variants.

Variants

Section titled “Variants”
Variant Matches
dark:, light: [data-theme="dark"] / [data-theme="light"] on the element or an ancestor
dusk:, midnight:, blackout:, daybreak: the matching [data-flavor] on the element or an ancestor

dark: follows the data-theme attribute, not prefers-color-scheme. See Utilities & variants for how they behave in nested scopes.