severity

Theme colours for clinical severity: normal, info, warning and critical.

NormalSodium 140 mmol/L, within range
InfoRepeat sample requested
WarningPotassium 5.5 mmol/L, high
CriticalPotassium 6.4 mmol/L, critical high

Installation

If your project has OrganUI's utilities, you already have severity. Otherwise, add them once:

bunx shadcn@4.22.1 add https://organui.com/r/utilities.json

The CLI adds them to your global CSS file, after your theme. To add them by hand, paste this instead:

:root {
  --severity-normal: oklch(0.448 0.119 151.328);
  --severity-info: oklch(0.488 0.243 264.376);
  --severity-warning: oklch(0.473 0.137 46.201);
  --severity-critical: oklch(0.505 0.213 27.518);
}

.dark {
  --severity-normal: oklch(0.792 0.209 151.711);
  --severity-info: oklch(0.707 0.165 254.624);
  --severity-warning: oklch(0.828 0.189 84.429);
  --severity-critical: oklch(0.704 0.191 22.216);
}

@theme inline {
  --color-severity-normal: var(--severity-normal);
  --color-severity-info: var(--severity-info);
  --color-severity-warning: var(--severity-warning);
  --color-severity-critical: var(--severity-critical);
}

@keyframes heartbeat {
  0%, 40%, 100% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.12);
  }
  20% {
    transform: scale(1.02);
  }
  30% {
    transform: scale(1.08);
  }
}

@utility animate-heartbeat {
  animation: heartbeat var(--heartbeat-duration, 1s) ease-in-out infinite;
  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@utility heartbeat-rate-* {
  --heartbeat-duration: calc(60s / --value(integer));
}

@utility bg-ecg-grid {
  --ecg-grid-minor: color-mix(in oklch, var(--ecg-grid-color, var(--color-red-500)) 18%, transparent);
  --ecg-grid-major: color-mix(in oklch, var(--ecg-grid-color, var(--color-red-500)) 45%, transparent);
  --ecg-grid-step: var(--ecg-grid-size, 4px);
  background-image: linear-gradient(to right, var(--ecg-grid-major) 1px, transparent 1px), linear-gradient(to bottom, var(--ecg-grid-major) 1px, transparent 1px), linear-gradient(to right, var(--ecg-grid-minor) 1px, transparent 1px), linear-gradient(to bottom, var(--ecg-grid-minor) 1px, transparent 1px);
  background-size: calc(var(--ecg-grid-step) * 5) calc(var(--ecg-grid-step) * 5), calc(var(--ecg-grid-step) * 5) calc(var(--ecg-grid-step) * 5), var(--ecg-grid-step) var(--ecg-grid-step), var(--ecg-grid-step) var(--ecg-grid-step);
}

@utility ecg-grid-size-* {
  --ecg-grid-size: calc(var(--spacing) * --value(number));
}

@utility ecg-grid-color-* {
  --ecg-grid-color: --value(--color-*, [color]);
}

Usage

severity classes
Class	Styles
`text-, bg-, border-severity-normal`	Results within range. --severity-normal.
`text-, bg-, border-severity-info`	Notes and pending work. --severity-info.
`text-, bg-, border-severity-warning`	Results out of range. --severity-warning.
`text-, bg-, border-severity-critical`	Results that need action now. --severity-critical.

<p className="text-severity-critical">Potassium 6.4 mmol/L, critical high</p>
<div className="border-severity-warning/30 bg-severity-warning/10">…</div>

Notes

Each colour reaches 4.5:1 as text on the default light and dark backgrounds, and on its own 10% tint. Change the variables in :root and .dark to match your theme.

Colour alone doesn't carry meaning for everyone: pair it with text or an icon, as the lab results table does.