cpod-theme
v2.2.1
Published
Design token system — CSS custom properties, TypeScript values, Tailwind v4 bridge. RTL-ready, WCAG AA, enterprise-grade. Framework-agnostic.
Maintainers
venkycsReadme
cpod-theme
A design token system for production web apps.
CSS custom properties, TypeScript values, and a Tailwind v4 bridge — built on OKLCh, zero runtime, zero dependencies. Works with any framework.
Used in production by Scale Risk — an enterprise risk management platform serving regulated industries (PCI DSS, SOC 2, FedRAMP).
Why cpod-theme
Most design systems force you to adopt their components. cpod-theme doesn't ship any.
It gives you a complete visual language as CSS variables — you keep shadcn/ui, Radix, Tailwind utilities, or whatever components you already have. The tokens just make everything consistent.
--cpod-*prefix — safe to add alongside any existing system, no conflicts- OKLCH throughout — perceptually uniform colors, WCAG AA verified at every level, zero
rgb()/hex in token files - Cascade layers — your CSS always wins, never fight specificity
- Three layers — primitives → semantic → component, import only what you need
- RTL-first — Arabic (Cairo), Farsi (Vazirmatn), Hebrew (Heebo) font auto-swap; zero letter-spacing; flipped animations;
--cpod-dirmultiplier forcalc() - Enterprise-ready — risk palette, density system (compact/comfortable), print tokens, forced-colors, reduced-motion
- Chart system — 12-color OKLCH palette, colorblind-safe aliases, canonical
--cpod-chart-1…12referenced by all chart token aliases
Install
npm install cpod-theme
pnpm add cpod-themeQuickstart
/* 1. Import all tokens */
@import 'cpod-theme/styles.css';/* 2. Use the CSS variables anywhere */
.card {
background: var(--cpod-color-bg-default);
border: 1px solid var(--cpod-color-border-default);
border-radius: var(--cpod-radius-lg);
box-shadow: var(--cpod-elevation-1);
}
.badge--critical {
color: var(--cpod-risk-critical);
background: var(--cpod-risk-critical-bg);
}/* 3. With Tailwind v4 — map to utilities */
@import 'tailwindcss';
@import 'cpod-theme/styles.css';
@theme inline {
--color-background: var(--cpod-color-bg-canvas);
--color-foreground: var(--cpod-color-fg-default);
--color-primary: var(--cpod-color-blue-600);
--color-border: var(--cpod-color-border-default);
--shadow-sm: var(--cpod-elevation-1);
--shadow-md: var(--cpod-elevation-2);
}// 4. TypeScript values — for canvas, SVG, chart libraries
import { colors, risk, easing, elevation } from 'cpod-theme/tokens';
const critical = risk.palette.critical.light; // 'oklch(0.55 0.22 25)'
const shadow = elevation[3]; // '0 10px 15px oklch(0 0 0 / 0.10)'
const spring = easing.spring; // 'cubic-bezier(0.34, 1.56, 0.64, 1)'Token Architecture
Three CSS cascade layers, one import:
@layer cpod-primitives Raw scale — 10 color families × 11 levels,
spacing 0–96, type 2xs–6xl, radius, weights
@layer cpod-semantic Role tokens — bg, fg, border, focus, feedback,
risk, elevation, motion, density
@layer cpod-components Component vars — button, input, table, modal,
badge, skeleton, code familiesConsumer styles are unlayered — they automatically beat all token defaults. No !important ever needed.
Selective imports
Import only what your project uses:
@import 'cpod-theme/tokens/primitives.css'; /* required first */
@import 'cpod-theme/tokens/semantic.css'; /* required second */
@import 'cpod-theme/tokens/dark.css'; /* dark mode */
@import 'cpod-theme/tokens/component-tokens.css'; /* button, input, table vars */
@import 'cpod-theme/tokens/motion.css'; /* duration, easing, animations */
@import 'cpod-theme/tokens/risk.css'; /* critical/high/medium/low palette */
@import 'cpod-theme/tokens/elevation.css'; /* shadows, density, state opacity */
@import 'cpod-theme/tokens/typography-extended.css'; /* tracking, containers, z-index */Dark mode
Zero JavaScript required. Add .dark to <html> or rely on prefers-color-scheme — all tokens swap automatically.
<html class="dark">...</html>Works with next-themes, vueuse/dark, or any class-based toggle.
Density system
Scale spacing across your entire UI with one class:
<html class="cpod-density-compact"> <!-- 0.75× -->
<html class="cpod-density-default"> <!-- 1.00× -->
<html class="cpod-density-comfortable"> <!-- 1.25× -->Risk & data viz tokens
Semantic palette for security, compliance, and operations dashboards:
var(--cpod-risk-critical) var(--cpod-risk-critical-bg)
var(--cpod-risk-high) var(--cpod-risk-high-bg)
var(--cpod-risk-medium) var(--cpod-risk-medium-bg)
var(--cpod-risk-low) var(--cpod-risk-low-bg)
var(--cpod-trend-up) /* worsening */
var(--cpod-trend-down) /* improving */
var(--cpod-trend-stable)
var(--cpod-maturity-1) ... var(--cpod-maturity-6) /* heatmap ramp */All risk colors are WCAG AA verified on both light and dark backgrounds.
Accessibility
- All text/background token pairs verified at WCAG 2.1 AA (4.5:1 minimum)
prefers-reduced-motion— all animation tokens collapse to0.01msprefers-contrast: more— border weight and text contrast increaseforced-colors— resolves to system keywords (Windows High Contrast works out of the box)
shadcn/ui compatibility
cpod-theme's --cpod-* prefix never conflicts with shadcn. Point shadcn's tokens at cpod values:
:root {
--background: var(--cpod-color-bg-canvas);
--foreground: var(--cpod-color-fg-default);
--primary: var(--cpod-color-blue-600);
--border: var(--cpod-color-border-default);
--radius: var(--cpod-radius-lg);
}shadcn components then inherit your cpod-theme values automatically.
Documentation
Full token reference and integration guides → cpod-theme.dev