Theming

Cascade layer

@import '@dtpr/ui/vue/styles.css';   /* defines @layer dtpr */

Every DTPR style lives in @layer dtpr. CSS cascade-layer order means any unlayered CSS, or any higher-priority layer you declare, will win. To guarantee an explicit order, declare the layers first:

@layer reset, tailwind, dtpr, app;

@import 'tailwindcss';
@import '@dtpr/ui/vue/styles.css';
/* your own styles follow, implicitly in layer `app` */

In the example above, app wins over dtpr wins over tailwind wins over reset.

Tokens

All tokens are declared on :where(html) so their specificity is zero — override at any root or container.

Examples

Color override

:root {
  --dtpr-color-accent: #7c3aed;       /* violet */
  --dtpr-color-warning: #ef4444;      /* red-500 */
}

Font override

:root {
  --dtpr-font-heading: 'Inter Tight', system-ui, sans-serif;
  --dtpr-font-body:    'Inter', system-ui, sans-serif;
}

Scoped override

Tokens cascade, so you can swap them inside a container without touching the root:

.marketing-section {
  --dtpr-color-accent: #0ea5e9;
}

All DTPR components rendered under .marketing-section pick up the new accent.

Container queries

The components use CSS @container (inline-size) queries instead of viewport media queries. A DtprElementGrid goes from 1 column to 2 to 3 based on its wrapper's inline-size — wrap it in a narrow sidebar and it stays one column even on a wide viewport.

See also

• Vue components
• Core helpers
• UI quickstart