Files
temetro/.agents/skills/bklit-ui/rules/theming.md
T
Khalid Abdi 929bec8f31 feat: AI-added records save with placeholders + "Added by AI" provenance
Stop blocking AI imports/proposals on missing non-critical fields. Records
the chat agent drafts now save with safe placeholders, auto-generated file
numbers, and a source="ai" marker that surfaces an "Added by AI" badge so a
clinician can review/edit them later.

Backend:
- add `source` (manual|ai) column to patients/appointments/prescriptions
  (migration 0014) + canonical types, services, validation schemas
- relax patient/appointment validation: empty file number allowed, demographic
  + type/provider/initials fall back to placeholders (initials derived from name)
- patients.generateFileNumber() auto-assigns an MRN when one is missing
- proposeAppointment accepts a name when no file number resolves; AI commits +
  /api/ai/import stamp source="ai"

Frontend:
- `source` on Appointment/Patient/Prescription types; AI commits send source="ai"
- reusable <AiBadge> shown on the Patients table/detail and prescriptions list

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-14 19:27:17 +03:00

1.2 KiB

Theming

Use chartCssVars

Prefer the typed chartCssVars export over raw CSS variable strings.

Incorrect

<line stroke="var(--chart-crosshair)" />
<rect fill="var(--chart-indicator-color)" />

Correct

import { chartCssVars } from "@bklitui/ui/charts";

<line stroke={chartCssVars.crosshair} />
<rect fill={chartCssVars.indicatorColor} />

Series colors

  • Multi-series: var(--chart-1) through var(--chart-5) or theme tokens.
  • Line charts: var(--chart-line-primary) / var(--chart-line-secondary) for default strokes.
  • Do not hardcode hex colors unless the design explicitly requires brand colors outside the theme.

Tooltip and badge surfaces

Tooltip boxes and live value badges should use shadcn popover tokens so text stays readable in light and dark mode:

// Tooltip content / badges
className="bg-popover text-popover-foreground"

Dark mode

Override chart variables in :root and .dark — do not sprinkle dark: on individual chart SVG elements.

:root {
  --chart-background: oklch(1 0 0);
  --chart-grid: oklch(0.9 0 0);
}
.dark {
  --chart-background: oklch(0.145 0.004 285);
  --chart-grid: oklch(0.25 0 0);
}

Docs