refrakt.md

Docs Runes Plan Blog Changelog

note

This rune is part of @refrakt-md/design. Install with npm install @refrakt-md/design and add "@refrakt-md/design" to the packages array in your refrakt.config.json.

Swatch

An inline color chip for referencing colors within body text. Self-closing — no children needed.

Basic usage

Reference a color inline with a visual chip.

The primary brand color is {% swatch color="#2563EB" label="Blue" /%} and the accent is {% swatch color="#7C3AED" label="Purple" /%}.
<p>
  The primary brand color is
  <span data-rune="swatch">
    <meta content="#2563EB" data-field="color">
    <meta content="false" data-field="show-value">
    <span style="background-color: #2563EB" data-name="chip"></span>
    <span data-field="label">Blue</span>
  </span>
  and the accent is
  <span data-rune="swatch">
    <meta content="#7C3AED" data-field="color">
    <meta content="false" data-field="show-value">
    <span style="background-color: #7C3AED" data-name="chip"></span>
    <span data-field="label">Purple</span>
  </span>
  .
</p>

The primary brand color is Blue and the accent is Purple.

<p>
  The primary brand color is 
  <span class="rf-swatch" data-rune="swatch" data-density="minimal">
    <meta content="#2563EB" data-field="color" />
    <meta content="false" data-field="show-value" />
    <span style="background-color: #2563EB" data-name="chip" class="rf-swatch__chip"></span>
    <span data-field="label">Blue</span>
  </span>
   and the accent is 
  <span class="rf-swatch" data-rune="swatch" data-density="minimal">
    <meta content="#7C3AED" data-field="color" />
    <meta content="false" data-field="show-value" />
    <span style="background-color: #7C3AED" data-name="chip" class="rf-swatch__chip"></span>
    <span data-field="label">Purple</span>
  </span>
  .
</p>

Show hex value

Add showValue to display the hex code alongside the label.

Use {% swatch color="#10B981" label="Success" showValue=true /%} for confirmation states and {% swatch color="#EF4444" label="Danger" showValue=true /%} for destructive actions.
<p>
  Use
  <span data-rune="swatch">
    <meta content="#10B981" data-field="color">
    <meta content="true" data-field="show-value">
    <span style="background-color: #10B981" data-name="chip"></span>
    <span data-field="label">Success</span>
    <span data-name="value">#10B981</span>
  </span>
  for confirmation states and
  <span data-rune="swatch">
    <meta content="#EF4444" data-field="color">
    <meta content="true" data-field="show-value">
    <span style="background-color: #EF4444" data-name="chip"></span>
    <span data-field="label">Danger</span>
    <span data-name="value">#EF4444</span>
  </span>
  for destructive actions.
</p>

Use Success#10B981 for confirmation states and Danger#EF4444 for destructive actions.

<p>
  Use 
  <span class="rf-swatch" data-rune="swatch" data-density="minimal">
    <meta content="#10B981" data-field="color" />
    <meta content="true" data-field="show-value" />
    <span style="background-color: #10B981" data-name="chip" class="rf-swatch__chip"></span>
    <span data-field="label">Success</span>
    <span data-name="value" class="rf-swatch__value">#10B981</span>
  </span>
   for confirmation states and 
  <span class="rf-swatch" data-rune="swatch" data-density="minimal">
    <meta content="#EF4444" data-field="color" />
    <meta content="true" data-field="show-value" />
    <span style="background-color: #EF4444" data-name="chip" class="rf-swatch__chip"></span>
    <span data-field="label">Danger</span>
    <span data-name="value" class="rf-swatch__value">#EF4444</span>
  </span>
   for destructive actions.
</p>

Attributes

AttributeTypeDefaultDescription
colorstring—Hex color value (required)
labelstring—Display name for the color (required)
showValuebooleanfalseShow the hex value after the label

Common attributes

All block runes share these attributes for layout and theming.

AttributeTypeDefaultDescription
widthstringcontentPage grid width: content, wide, or full
spacingstring—Vertical spacing: flush, tight, default, loose, or breathe
insetstring—Horizontal padding: flush, tight, default, loose, or breathe
tintstring—Named colour tint from theme configuration
tint-modestringautoColour scheme override: auto, dark, or light
bgstring—Named background preset from theme configuration