Skip to content
Architecture

Integration Guide

How djust-theming and djust-components work together. Tokens flow from themes to components automatically.

How It Works

djust-theming provides tokens

180+ CSS custom properties: colors, typography, spacing, radius, shadows, animations. Theme packs bundle design systems + color presets into cohesive experiences.

  • --primary, --accent, --border — Colors
  • --radius-*, --shadow-* — Shapes
  • --text-*, --font-* — Typography
  • --space-*, --grid-gap — Spacing
  • --duration-*, --easing — Motion

djust-components consumes tokens

171 components styled with CSS that references theme tokens. Switch packs and every component adapts automatically.

  • .btn-primary → hsl(var(--primary))
  • .alert-info → hsl(var(--info) / 0.08)
  • .dj-card → var(--radius-lg)
  • .dj-tab → var(--text-sm)

Token Flow

Theme Pack (e.g., "brutalist")
defines --radius: 0px, --font-weight-heading: 900, --shadow-sm: 4px 4px 0px...
↓
Component CSS (components.css)
reads var(--radius), var(--shadow-sm), var(--primary)...
↓
Rendered Component
sharp corners, hard shadows, bold text — matches the pack personality

Custom Overrides

Components define --dj-* variables for per-component customization. These override theme tokens for specific components without affecting the rest.

custom.css 
/* Override just the alert info background */
.my-section {
    --dj-alert-info-bg: 200 80% 20%;
}

/* Override just the card radius for a specific area */
.sharp-zone {
    --radius-lg: 0px;
}

CSS Loading Order

The CSS files should be loaded in this order for correct cascade behavior:

template.html 
<!-- 1. Base theming CSS -->
{% theme_head %}

<!-- 2. Component CSS -->
<link href="components.css">
<link href="bridge.css">

<!-- 3. Your custom overrides -->
<link href="custom.css">