@seekalfred/styles

Cascade layers, theme wiring and an opt-in reset. Owns no component styles and generates no theme.

pnpm add @seekalfred/styles

/* Ours first, yours after. That order is the whole override story. */
@import "@seekalfred/styles/base.css";

You do not need Tailwind installed, and you do not install @seekalfred/tokens yourself. base.css ships compiled and self-contained — every token and theme is already inlined, so it carries no @import a bundler has to resolve.

The three entrypoints

| Entrypoint | What it is | | ------------ | ----------------------------------------------------------------------------- | | base.css | What you want. Layer order + all three token tiers + dark theme + density. | | reset.css | Tailwind preflight, opt-in. Import only if our reset should be the app's. | | layers.css | The @layer order alone. For a consumer assembling its own sheet. |

reset.css is kept out of base.css deliberately: preflight is invasive in an app that already has a reset, and no component base class is allowed to depend on it.

Consumer CSS always wins

Every rule this library ships is inside a layer, and unlayered CSS beats every layered rule regardless of selector specificity. So your own stylesheet overrides ours without !important and without a specificity war.

There is deliberately no app layer. A library cannot force consumer CSS into a layer it declares, so declaring one would be theatre.

Layer names are part of the published contract — renaming one is breaking. Layers for packages that do not exist yet are declared now, on purpose: declaring an unused layer costs nothing, and it fixes precedence between packages here, once, rather than making it depend on your import order.

Scope axes

base.css wires both axes from @seekalfred/tokens. They are independent and compose:

<html data-theme="dark" data-density="compact" dir="rtl"></html>

data-theme — light (default) · dark. data-density — comfortable (default) · compact · spacious. base.css also sets color-scheme per theme, so native controls and scrollbars follow.

RTL and transform

CSS has logical properties for margin, padding, border and inset, but none for transform — translateX(18px) means eighteen physical pixels rightward in every writing direction. base.css defines --flip (1 in LTR, -1 in RTL); multiply by it:

transform: translateX(calc(18px * var(--flip)));

Editing

dist/ is generated — never hand-edit it.

pnpm --filter @seekalfred/styles build

Renaming a cascade layer, or changing their order, is breaking — while 0.x that means a minor, and it needs a changeset.