{% load i18n %}

{% trans "Color palette" %}

{% trans "Palette swatches reflect the current mode. All " %}dcr-*{% trans " components consume only these tokens - override them on " %}:root{% trans " to theme every component at once." %}

{% trans "Surfaces" %}

{% trans "Page, card, and control backgrounds plus border colours." %}

bg

--dcr-color-bg

{% trans "Page and card background" %}

bg-subtle

--dcr-color-bg-subtle

{% trans "Table headers, controls zones" %}

border

--dcr-color-border

{% trans "Card borders, row dividers" %}

text

--dcr-color-text

{% trans "Primary body text" %}

text-muted

--dcr-color-text-muted

{% trans "Labels, captions, placeholders" %}

{% trans "Semantic" %}

{% trans "Solid colours for buttons, badges, icons, and status indicators." %}

accent

--dcr-color-accent

{% trans "Primary actions, links" %}

success

--dcr-color-success

{% trans "Healthy, active, connected" %}

warning

--dcr-color-warning

{% trans "Caution, degraded states" %}

danger

--dcr-color-danger

{% trans "Errors, destructive actions" %}

info

--dcr-color-info

{% trans "Informational, neutral notices" %}

muted

--dcr-color-muted

{% trans "Disabled, secondary content" %}

{% trans "Tinted backgrounds" %}

{% trans "Soft fills paired with each semantic colour - used for tinted badges and hover states." %}

accent-bg

--dcr-color-accent-bg

{% trans "Default badge fill" %}

success-bg

--dcr-color-success-bg

{% trans "Success badge fill" %}

warning-bg

--dcr-color-warning-bg

{% trans "Warning badge fill" %}

danger-bg

--dcr-color-danger-bg

{% trans "Danger badge fill" %}

info-bg

--dcr-color-info-bg

{% trans "Info badge fill" %}

muted-bg

--dcr-color-muted-bg

{% trans "Muted badge fill" %}

purple-bg

--dcr-color-purple-bg

{% trans "Purple badge fill" %}

indigo-bg

--dcr-color-indigo-bg

{% trans "Indigo badge fill" %}

{% trans "Extended semantic" %}

{% trans "Additional colours for task states, log levels, and signal kinds." %}

purple

--dcr-color-purple

{% trans "Pending, scheduled states" %}

indigo

--dcr-color-indigo

{% trans "Custom signals, built-in tags" %}

{% trans "Spacing" %}

{% trans "Five-step scale used for padding, margin, and gap throughout the design system. Always reference a token - never hardcode pixel values." %}

--dcr-space-xs  ·  4px
--dcr-space-sm  ·  8px
--dcr-space-md  ·  16px
--dcr-space-lg  ·  24px
--dcr-space-xl  ·  48px

{% trans "Usage" %}

<!-- padding -->
<div style="padding: var(--dcr-space-md)">...</div>

<!-- margin -->
<p style="margin-bottom: var(--dcr-space-lg)">...</p>

<!-- gap in a flex/grid container -->
<div style="display:flex; gap: var(--dcr-space-sm)">...</div>

{% trans "In CSS" %}

<style>
.my-card {
  padding: var(--dcr-space-md) var(--dcr-space-lg);
  margin-bottom: var(--dcr-space-xl);
  gap: var(--dcr-space-sm);
}
</style>

{% trans "Utilities" %}

{% trans "Single-purpose helper classes for composing layouts inline. All utilities use " %}!important{% trans " so they always override component defaults." %}

{% trans "Typography" %}

dcr-text-xs dcr-text-muted

dcr-text-sm dcr-text-default

dcr-text-base dcr-font-bold dcr-text-success

dcr-text-lg dcr-font-mono dcr-text-accent

dcr-text-danger

dcr-text-warning

dcr-text-info

dcr-text-purple

dcr-text-indigo

{% trans "Layout" %}
dcr-d-flex dcr-items-center dcr-justify-between dcr-gap-sm right
dcr-d-flex dcr-flex-col dcr-gap-xs second row third row
{% trans "Spacing" %}
dcr-mt-md dcr-mb-lg dcr-px-lg dcr-py-sm dcr-ml-auto
{% trans "Sizing & overflow" %}
dcr-w-full

dcr-truncate - this text is very long and will be clipped with an ellipsis

{% trans "Usage" %}

<!-- typography -->
<p class="dcr-text-sm dcr-text-muted">Hint text</p>
<span class="dcr-font-bold dcr-text-danger">Error</span>
<code class="dcr-font-mono dcr-text-xs">cache:key:42</code>

<!-- layout -->
<div class="dcr-d-flex dcr-items-center dcr-justify-between dcr-gap-sm">
  <h2>Title</h2>
  <button class="dcr-btn">Action</button>
</div>

<!-- spacing -->
<div class="dcr-mb-lg dcr-px-md">…</div>

<!-- overflow -->
<p class="dcr-truncate">Very long value that should clip…</p>

<!-- screen-reader label -->
<span class="dcr-sr-only">Loading…</span>