Skip to content
Teasim
TeaCSS documentation
StyleSheet

Official preset

Compose structural shortcuts, typography, surfaces, and component parts with Standard color roles and application-owned behavior.

@teacss/preset-official is an optional catalogue of structural CSS shortcuts. It gives common layout fragments and components stable class names. It does not choose a color palette, render markup, attach JavaScript, or enable the Standard preset for you. This guide describes the published TeaCSS 0.7.1 preset.

Enable the preset

Select both presets when using the examples in this section. Standard supplies the atomic utilities, scales, base palette, and preflight that Official’s shortcuts refer to.

css
@presets "standard,official";
@source "./src/**/*.{astro,html,ts,tsx}";
@teacss;

Official is still opt-in: adding Standard alone does not include its shortcuts. TeaCSS emits CSS for classes found in scanned sources, so include the files that contain your markup in @source. For a full build setup, start with Installation.

What Official owns

  • Commons contain reusable structure, control foundations, visual resets, typography, focus, motion, media, and surfaces.
  • Components compose those fragments into named parts such as card, btn, and modal. A part uses one hyphen (card-body); a variation on the same element uses two (card--side).
  • Applications supply the markup, color choices, accessible names, focus and keyboard behavior, state, placement, and data. A CSS shortcut cannot make a dialog, menu, calendar, or form control interactive by itself.

For example, card establishes structure while the application chooses the surface and text colors:

html
<article class="card bg-color:neutral-100 text-color:neutral-950 border-color:neutral-500">
  <div class="card-body">
    <h2 class="card-title">Project status</h2>
    <p class="card-description">The latest build is ready.</p>
  </div>
</article>

Standard owns seven color roles: neutral, primary, focused, success, warning, failure, and general. Select their palettes with root data-css-<role> attributes on html; select appearance with data-css-appearance="light" or "dark". Descendants inherit those choices. Use a role and a step, such as border-color:neutral-500, rather than the retired component aliases such as --color-card. Check contrast in light, dark, and forced-color modes. Official supplies geometry, not a second color system or a separate spacing/radius scale.

The Surface commons provide reusable shape and elevation. The Typography commons provide text-1x through text-9x and matching heading-* scales without choosing heading semantics, weight, or breakpoints.

Programmatic use

For custom integrations, presetOfficial is available from either @teacss/preset-official or teacss/preset-official. The direct package also exports shortcuts and the CustomShortcut type. Install the complete presetOfficial() when using the catalogue: copying only its shortcut list would omit Official’s scoped prose rule.

The Official Storybook shows the preset’s rendered examples.