Colors

import {
	brand,
	blue,
	green,
	amber,
	red,
	teal,
	neutral,
	palettes,
} from "@work-rjkashyap/unified-ui/tokens";

// Individual palette
console.log(brand[600]); // "oklch(0.511 0.262 276.966)"

// All palettes bundled (useful for tooling / documentation)
console.log(Object.keys(palettes));
// ["slate", "gray", "zinc", "brand", "blue", "green", "amber", "red",
//  "teal", "indigo", "purple", "pink", "cyan", "emerald", "yellow",
//  "fuchsia", "sky", "lime"]

import {
	checkHexContrast,
	meetsAA,
	contrastRatio,
} from "@work-rjkashyap/unified-ui/utils";

// Check a specific pair
const result = checkHexContrast("#4F46E5", "#FFFFFF");
console.log(result.ratio); // 6.35
console.log(result.aa); // true (normal text)
console.log(result.aaLarge); // true (large text)

// Quick boolean check
console.log(meetsAA(6.35, "normal")); // true

// Raw ratio calculation
console.log(contrastRatio("#000000", "#FFFFFF")); // 21

import {
	auditContrast,
	DS_LIGHT_CRITICAL_PAIRS,
	DS_DARK_CRITICAL_PAIRS,
} from "@work-rjkashyap/unified-ui/utils";

// Audit all critical light mode pairs
const lightResults = auditContrast(DS_LIGHT_CRITICAL_PAIRS);
const failures = lightResults.filter((r) => !r.passes);

if (failures.length > 0) {
	console.error("Contrast failures:", failures);
}

// Page background with default text
<div className="bg-background text-foreground">
  <h1>Page Title</h1>
  <p className="text-muted-foreground">Secondary description text</p>
</div>

// Card surface
<div className="bg-surface-raised border border-border rounded-md p-4">
  Card content
</div>

// Success alert
<div className="bg-success-muted text-success-muted-foreground">
  Operation completed successfully.
</div>

// Danger button
<button className="bg-danger text-danger-foreground hover:bg-danger/90">
  Delete
</button>

// Warning badge
<span className="bg-warning-muted text-warning-muted-foreground">
  Caution
</span>

// 50% opacity primary background
<div className="bg-primary/50" />

// 20% opacity border
<div className="border border-border/20" />

// 80% opacity text
<p className="text-foreground/80">Slightly transparent text</p>

.custom-element {
	background-color: var(--primary);
	color: var(--primary-foreground);
	border-color: var(--border);
}

/* With opacity via oklch alpha */
.custom-overlay {
	background-color: oklch(from var(--primary) l c h / 0.1);
}

// Semantic mappings (what components use)
import { semanticLight, semanticDark } from "@work-rjkashyap/unified-ui/tokens";

console.log(semanticLight.primary); // "oklch(0.205 0 0)"
console.log(semanticDark.primary); // "oklch(0.922 0 0)"

// Raw palettes (for tooling, docs, custom themes)
import {
	brand,
	blue,
	green,
	amber,
	red,
	neutral,
} from "@work-rjkashyap/unified-ui/tokens";

console.log(brand[600]); // "oklch(0.511 0.262 276.966)"
console.log(red[500]); // "oklch(0.704 0.191 22.216)"
console.log(neutral[100]); // "oklch(0.97 0 0)"

// All palettes bundled
import { palettes } from "@work-rjkashyap/unified-ui/tokens";

// Includes: slate, gray, zinc, brand, blue, green, amber, red,
// teal, indigo, purple, pink, cyan, emerald, yellow, fuchsia, sky, lime