Overview

@static-bloom/css styles plain HTML with sb-* classes: no JavaScript, no build step, any framework. The Vue components share the same visual spec, so a page can mix both.

Import

/* Everything: tokens, fonts, base styles, components, utilities */
@import '@static-bloom/css';

/* Or pick entry points, after declaring the layer order */
@layer theme, base, components, utilities;
@import '@static-bloom/css/tokens.css';
@import '@static-bloom/css/fonts.css';
@import '@static-bloom/css/base.css';
@import '@static-bloom/css/components.css';
@import '@static-bloom/css/utilities.css';

Components live in @layer components and effect helpers in @layer utilities, the same layer names Tailwind uses, so Tailwind utilities override component styles without !important. The raw sources are published under @static-bloom/css/src/*.

Class model

A component has one base class plus modifiers that each set one axis:

<button class="sb-btn sb-btn-outline sb-btn-danger sb-btn-sm">Abort</button>

• Intent (-primary, -secondary, -neutral, -info, -success, -warning, -danger) picks the color.
• Variant (-solid, -soft, -outline, -ghost, -link for buttons) picks how the color is applied.
• Size (-xs, -sm, -md, -lg) sets height, padding and type.

The defaults are solid, primary and medium, so class="sb-btn" is a complete button. State comes from attributes and pseudo-classes: :disabled, [aria-disabled="true"], [aria-busy="true"] for loading, [aria-invalid="true"] for errors, [aria-pressed], [aria-current]. Private custom properties start with --_ and may change; public knobs such as --sb-value on meters are documented.

Buttons

Solid

Soft

Outline

Ghost

Link

Secondary

Neutral

Info

Success

Warning

Danger

Extra small

Small

Medium

Large

Saving

Disabled

<button class="sb-btn sb-btn-soft sb-btn-secondary">Secondary</button>
<button class="sb-btn" aria-busy="true"><span>Saving</span></button>

Badges

SoftSolidOutlineOnlineWantedHostile

plasmalaserembersodiumhalogenacidcoolantfrostionultravioletorchidchrome

Badges are soft by default and take every intent plus all twelve accents (sb-badge-<accent>), sizes sm and lg, sb-badge-dot for a status dot and sb-badge-upper for uppercase labels.

Cards

Courier run

Watson to Japantown, no questions asked.

Pick up the package at the market and deliver it before the curfew.

Accept

Details

Interactive card

link

The whole card is the link. Hover lifts it and draws a primary hairline.

<article class="sb-card">
  <header class="sb-card-header">
    <h3 class="sb-card-title">Courier run</h3>
    <p class="sb-card-description">Watson to Japantown, no questions asked.</p>
  </header>
  <div class="sb-card-body">…</div>
  <footer class="sb-card-footer"><button class="sb-btn sb-btn-sm">Accept</button></footer>
</article>

Component groups

Group	Classes
Typography	sb-prose, sb-h1 to sb-h6, sb-display-{sm,md,lg}, sb-eyebrow, sb-lead, sb-mono, sb-link, sb-code, sb-pre, sb-kbd
Actions	sb-btn, sb-btn-group, sb-btn-icon, sb-btn-block
Forms	sb-label, sb-input, sb-textarea, sb-select, sb-checkbox, sb-radio, sb-switch, sb-range, sb-field, sb-input-group
Surfaces and Overlays	sb-card, sb-hud-panel, sb-dialog, sb-popover, sb-menu, sb-accordion
Feedback	sb-alert, sb-toast, sb-badge, sb-progress, sb-meter, sb-stat, sb-spinner, sb-skeleton, sb-tooltip
Navigation	sb-tabs, sb-breadcrumbs, sb-pagination
Data and HUD	sb-table, sb-avatar, sb-key-hint, sb-divider
Layout	sb-container, sb-stack, sb-cluster, sb-grid, sb-sidebar, sb-center

Interactive pieces use the platform: sb-accordion styles <details>, sb-dialog styles <dialog> and its ::backdrop, and sb-popover and sb-menu style elements with the popover attribute. sb-select (a native <select>) and sb-tooltip ([data-tooltip], CSS only) are for websites; in-game pages use the Vue components instead.