Skip to content
WCP

Theming

WCP components are styled through CSS custom properties. All visual tokens are defined on :root, which means you can override any of them from your own stylesheet.

Default Theme

The library ships a default dark theme. It is not applied automatically, so import it explicitly before using any components.

@import "@staticbolt/wcp/themes/default.css";

CSS Variables

The variables are grouped by purpose.

:root {
  /* Base Colors */
  --wcp-base-1: #1d1f23; /* page / outermost surface */
  --wcp-base-2: #292d33; /* raised surface */
  --wcp-base-3: #373c44; /* elevated surface */
  --wcp-base-content: #e0e0e0; /* text on base surfaces */


  /* Brand */
  --wcp-primary: #8fa1d3;
  --wcp-primary-content: #1d1f23; /* text on primary */


  /* Semantic */
  --wcp-info: #a0c7e8;
  --wcp-success: #a3d496;
  --wcp-warning: #ffe98d;
  --wcp-error: #f29390;


  /* Overlay */
  --wcp-overlay: #000000a0;


  /* Borders */
  --wcp-bdr-sz-sm: 1px;
  --wcp-bdr-sz-md: 2px;
  --wcp-bdr-sz-lg: 4px;
  --wcp-bdr-rad-sm: 4px;
  --wcp-bdr-rad-md: 8px;
  --wcp-bdr-rad-lg: 16px;


  /* Direction: 1 = LTR, -1 = RTL */
  --wcp-dir: 1;
}


[dir="rtl"] {
  --wcp-dir: -1;
}

Custom Theme

Define your own values

Skip the default import and set the WCP variables directly in your stylesheet.

:root {
  --wcp-base-1: #0f1117;
  --wcp-base-2: #1a1d26;
  --wcp-base-3: #252935;
  --wcp-base-content: #f0f0f0;
  --wcp-primary: #7c8fd1;
  --wcp-primary-content: #0f1117;
  --wcp-info: #7fb8db;
  --wcp-success: #8ec97f;
  --wcp-warning: #f5d76e;
  --wcp-error: #e87d7a;
  --wcp-overlay: #000000a0;
  --wcp-bdr-sz-sm: 1px;
  --wcp-bdr-sz-md: 2px;
  --wcp-bdr-sz-lg: 4px;
  --wcp-bdr-rad-sm: 4px;
  --wcp-bdr-rad-md: 8px;
  --wcp-bdr-rad-lg: 16px;
  --wcp-dir: 1;
}


[dir="rtl"] {
  --wcp-dir: -1;
}

Map to existing variables

If your project already has a design system, map its variables to the WCP tokens instead of duplicating values.

:root {
  --wcp-base-1: var(--sb-color-gray-5);
  --wcp-base-2: var(--sb-color-gray-6);
  --wcp-base-3: var(--sb-color-gray-7);
  --wcp-base-content: var(--sb-color-text);
  --wcp-primary: var(--sb-color-accent);
  --wcp-primary-content: hsl(from var(--sb-color-accent) h s 90);
  --wcp-info: var(--sb-note-text);
  --wcp-success: var(--sb-tip-text);
  --wcp-warning: var(--sb-warning-text);
  --wcp-error: var(--sb-caution-text);
  --wcp-overlay: #000000a0;
  --wcp-bdr-sz-sm: 1px;
  --wcp-bdr-sz-md: 2px;
  --wcp-bdr-sz-lg: 4px;
  --wcp-bdr-rad-sm: 4px;
  --wcp-bdr-rad-md: 8px;
  --wcp-bdr-rad-lg: 16px;
  --wcp-dir: 1;
}


[dir="rtl"] {
  --wcp-dir: -1;
}