question-bank-framework 0.7.1 → 0.9.0

package/framework/components/question-response.tsx

@@ -6,6 +6,7 @@ import { Check, X } from 'lucide-react';
 import type { BaseQuestion, QuestionOption, QuizAnswer } from '../../core/types.ts';
 import { getPairingSlots, parseNumericAnswer, questionKind, toPairings } from '../../core/types.ts';
 import { MarkdownContent } from './markdown-content';
+import { Input } from './ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
 import { cn } from '../lib/utils.ts';
 
@@ -38,11 +39,11 @@ export function NumericalResponse({
   const inputId = `quiz-numeric-${question.id}`;
   return (
     <div className="mt-6">
-      <label htmlFor={inputId} className="text-sm font-semibold text-gray-900">
+      <label htmlFor={inputId} className="text-sm font-medium">
         Your answer
       </label>
       <div className="mt-2 flex items-center gap-2">
-        <input
+        <Input
           id={inputId}
           type="text"
           inputMode="decimal"
@@ -53,16 +54,15 @@ export function NumericalResponse({
           aria-invalid={invalid || (checked && correct === false) || undefined}
           aria-describedby={invalid ? `${inputId}-hint` : undefined}
           className={cn(
-            'h-10 w-48 rounded-lg border bg-white px-3 font-mono text-base tabular-nums text-gray-900 outline-none placeholder:font-sans placeholder:text-gray-400 focus-visible:ring-2 focus-visible:ring-gray-900/20',
-            checked && correct === true && 'border-green-600 bg-green-50',
-            checked && correct === false && 'border-red-600 bg-red-50',
-            !checked && 'border-gray-300',
+            'w-48 font-mono tabular-nums placeholder:font-sans',
+            checked && correct === true && 'border-success/30 bg-success/10',
+            checked && correct === false && 'border-destructive/30 bg-destructive/10',
           )}
         />
-        {question.numeric?.unit && <span className="text-sm text-gray-600">{question.numeric.unit}</span>}
+        {question.numeric?.unit && <span className="text-sm text-muted-foreground">{question.numeric.unit}</span>}
       </div>
       {invalid && (
-        <p id={`${inputId}-hint`} className="mt-1.5 text-sm text-amber-800">
+        <p id={`${inputId}-hint`} className="mt-1.5 text-xs text-warning">
           That doesn't look like a number — it will be marked incorrect.
         </p>
       )}
@@ -87,24 +87,35 @@ function OptionSelect({
   ariaLabel: string;
   state: 'idle' | 'correct' | 'incorrect' | 'missing';
 }) {
+  const renderOptionLabel = (option: QuestionOption, index: number) => (
+    <>
+      {lettered && <span className="font-medium text-muted-foreground">{optionLetter(index)}.</span>}
+      <MarkdownContent inline content={option.text} />
+    </>
+  );
   return (
-    <Select value={value ?? ''} onValueChange={onChange}>
+    <Select
+      value={value ?? null}
+      onValueChange={(next) => {
+        if (next !== null) onChange(next);
+      }}
+      items={options.map((option, index) => ({ value: option.id, label: renderOptionLabel(option, index) }))}
+    >
       <SelectTrigger
         id={id}
         aria-label={ariaLabel}
         className={cn(
-          'h-auto min-h-9 w-full min-w-48 whitespace-normal bg-white text-left sm:w-72',
-          state === 'correct' && 'border-green-600 bg-green-50',
-          (state === 'incorrect' || state === 'missing') && 'border-red-600 bg-red-50',
+          'h-auto min-h-8 w-full min-w-48 whitespace-normal text-left sm:w-72 *:data-[slot=select-value]:line-clamp-none',
+          state === 'correct' && 'border-success/30 bg-success/10',
+          (state === 'incorrect' || state === 'missing') && 'border-destructive/30 bg-destructive/10',
         )}
       >
         <SelectValue placeholder="Choose…" />
       </SelectTrigger>
-      <SelectContent position="popper" className="max-w-[min(36rem,calc(100vw-2rem))]">
+      <SelectContent alignItemWithTrigger={false} className="w-auto min-w-(--anchor-width) max-w-[min(36rem,calc(100vw-2rem))]">
         {options.map((option, index) => (
-          <SelectItem key={option.id} value={option.id} className="whitespace-normal">
-            {lettered && <span className="font-semibold text-gray-500">{optionLetter(index)}.</span>}
-            <MarkdownContent inline content={option.text} />
+          <SelectItem key={option.id} value={option.id} className="*:min-w-0 *:whitespace-normal">
+            {renderOptionLabel(option, index)}
           </SelectItem>
         ))}
       </SelectContent>
@@ -132,20 +143,20 @@ export function PairingResponse({
 
   return (
     <div className="mt-6">
-      <p id={`quiz-pairing-label-${question.id}`} className="text-sm font-semibold text-gray-900">
+      <p id={`quiz-pairing-label-${question.id}`} className="text-sm font-medium">
         {matching ? 'Match each item to an option' : 'Fill in each blank'}
-        <span className="ml-2 font-normal text-gray-500">
+        <span className="ml-2 text-xs font-normal tabular-nums text-muted-foreground">
           {answeredCount}/{slots.length} answered
         </span>
       </p>
 
       {matching && (
-        <div className="mt-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
-          <p className="m-0 text-xs font-semibold uppercase tracking-wide text-gray-500">Options</p>
+        <div className="mt-3 rounded-lg border bg-muted/50 p-3">
+          <p className="m-0 text-xs font-medium text-muted-foreground">Options</p>
           <ol className="m-0 mt-2 grid list-none grid-cols-[minmax(0,1fr)] gap-x-6 gap-y-1 p-0 sm:grid-cols-[repeat(2,minmax(0,1fr))]">
             {(question.options ?? []).map((option, index) => (
-              <li key={option.id} className="flex items-start gap-2 text-sm text-gray-800">
-                <span className="w-5 shrink-0 font-semibold text-gray-500">{optionLetter(index)}.</span>
+              <li key={option.id} className="flex items-start gap-2 text-sm leading-6">
+                <span className="w-5 shrink-0 font-medium text-muted-foreground">{optionLetter(index)}.</span>
                 <MarkdownContent inline content={option.text} className="min-w-0 flex-1 overflow-x-auto" />
               </li>
             ))}
@@ -169,14 +180,13 @@ export function PairingResponse({
                 // Wraps instead of squeezing: short items sit beside their select, while
                 // wide items (long formulas) take the full row and the select drops below.
                 'flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg border p-3',
-                state === 'idle' && 'border-gray-200 bg-white',
-                state === 'correct' && 'border-green-300 bg-green-50/50',
-                (state === 'incorrect' || state === 'missing') && 'border-red-300 bg-red-50/50',
+                state === 'correct' && 'border-success/30 bg-success/10',
+                (state === 'incorrect' || state === 'missing') && 'border-destructive/30 bg-destructive/10',
               )}
             >
               <div className="flex min-w-0 max-w-full flex-[1_1_auto] items-start gap-2">
-                <span className="mt-0.5 w-6 shrink-0 text-sm font-semibold tabular-nums text-gray-500">{index + 1}.</span>
-                <label htmlFor={selectId} className="min-w-0 flex-1 overflow-x-auto overflow-y-hidden text-base leading-7 text-gray-900">
+                <span className="mt-0.5 w-6 shrink-0 text-sm font-medium tabular-nums text-muted-foreground">{index + 1}.</span>
+                <label htmlFor={selectId} className="min-w-0 flex-1 overflow-x-auto overflow-y-hidden text-[15px] leading-7">
                   <MarkdownContent inline content={label} />
                 </label>
               </div>
@@ -191,15 +201,15 @@ export function PairingResponse({
                     state={state}
                     onChange={(value) => onChange({ ...pairings, [slot.id]: value })}
                   />
-                  {state === 'correct' && <Check aria-label="Correct" className="size-5 shrink-0 text-green-700" />}
+                  {state === 'correct' && <Check aria-label="Correct" className="size-4 shrink-0 text-success" />}
                   {(state === 'incorrect' || state === 'missing') && (
-                    <X aria-label={state === 'missing' ? 'Not answered' : 'Incorrect'} className="size-5 shrink-0 text-red-700" />
+                    <X aria-label={state === 'missing' ? 'Not answered' : 'Incorrect'} className="size-4 shrink-0 text-destructive" />
                   )}
                 </div>
                 {(state === 'incorrect' || state === 'missing') && correctOption && (
-                  <p className="m-0 flex items-baseline gap-1 text-sm text-red-900">
+                  <p className="m-0 flex items-baseline gap-1 text-xs text-destructive">
                     <span className="shrink-0">Correct:</span>
-                    {matching && <span className="font-semibold">{optionLetter(correctIndex)}.</span>}
+                    {matching && <span className="font-medium">{optionLetter(correctIndex)}.</span>}
                     <MarkdownContent inline content={correctOption.text} />
                   </p>
                 )}

package/framework/components/quiz-list.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { Link } from '@tanstack/react-router';
-import { ListOrdered, Trash2 } from 'lucide-react';
+import { ListOrdered, Plus, Trash2 } from 'lucide-react';
 import { useBank } from '../../core/config.tsx';
 import type { QuizSession } from '../../core/types.ts';
 import { isAnswerProvided, scoreAnswers } from '../../core/types.ts';
@@ -49,27 +49,25 @@ export function QuizList() {
   };
 
   return (
-    <div className="grid grid-cols-[minmax(0,1fr)] gap-8">
-      <div className="flex flex-wrap items-end justify-between gap-4">
-        <div>
-          <h1 className="m-0 text-3xl font-bold tracking-tight text-gray-900">My quizzes</h1>
-          <p className="mt-2 text-base text-gray-600">Pick up where you left off. Your answers are saved as you go.</p>
-        </div>
-        <Button asChild>
-          <Link to="/">Build a quiz</Link>
+    <div className="grid gap-8">
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <h1 className="text-2xl font-semibold">My quizzes</h1>
+        <Button render={<Link to="/" />} nativeButton={false}>
+          <Plus data-icon="inline-start" aria-hidden="true" />
+          New quiz
         </Button>
       </div>
 
       {loading ? (
-        <div className="py-16 text-center text-sm text-gray-600">Loading your quizzes...</div>
+        <p className="py-16 text-center text-sm text-muted-foreground">Loading your quizzes…</p>
       ) : quizzes.length > 0 ? (
-        <div>
+        <div className="grid gap-3">
           {deleteError && (
-            <p role="alert" className="mb-3 text-sm text-red-700">
+            <p role="alert" className="text-sm text-destructive">
               Could not delete that quiz. Please try again.
             </p>
           )}
-          <div className="grid grid-cols-[minmax(0,1fr)] gap-4 sm:grid-cols-[repeat(2,minmax(0,1fr))]">
+          <ul className="grid gap-3 sm:grid-cols-2">
             {quizzes.map((quiz) => {
               const questions = quiz.questionIds
                 .map((id) => bank.questionById.get(id))
@@ -78,58 +76,65 @@ export function QuizList() {
                 isAnswerProvided(question, quiz.answers[question.id]),
               ).length;
               const score = scoreAnswers(questions, quiz.answers);
+              const total = quiz.questionIds.length;
+              const progress = total > 0 ? Math.round((answeredCount / total) * 100) : 0;
               return (
-                <div key={quiz.id} className="group relative">
+                <li key={quiz.id} className="group relative">
                   <Link
                     to="/quiz/$quizId"
                     params={{ quizId: quiz.id }}
-                    className="block rounded-xl border border-gray-200 bg-white p-5 transition-colors hover:border-gray-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500"
+                    className="flex h-full flex-col gap-4 rounded-xl border bg-card p-4 transition-colors hover:bg-muted/50 focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none"
                   >
-                    <h2 className="m-0 break-words pr-16 text-lg font-semibold text-gray-900">{quiz.title}</h2>
-                    <p className="mt-2 text-sm text-gray-700">
-                      {quiz.questionIds.length} {quiz.questionIds.length === 1 ? 'question' : 'questions'}
-                    </p>
-                    <p className="mt-1 text-sm text-gray-600">
-                      {answeredCount} of {quiz.questionIds.length} answered
-                      {score.gradeable > 0 && ` • ${score.correct}/${score.gradeable} correct`}
-                    </p>
+                    <div className="pr-16">
+                      <h2 className="text-sm font-semibold break-words">{quiz.title}</h2>
+                      <p className="mt-1 text-xs text-muted-foreground tabular-nums">
+                        {total} {total === 1 ? 'question' : 'questions'}
+                        {score.gradeable > 0 && ` · ${score.correct}/${score.gradeable} correct`}
+                      </p>
+                    </div>
+                    <div className="mt-auto grid gap-1.5">
+                      <div className="h-1 overflow-hidden rounded-full bg-muted" aria-hidden="true">
+                        <div className="h-full rounded-full bg-primary transition-[width]" style={{ width: `${progress}%` }} />
+                      </div>
+                      <p className="text-xs text-muted-foreground tabular-nums">
+                        {answeredCount} of {total} answered
+                      </p>
+                    </div>
                   </Link>
-                  <div className="absolute right-3 top-3 flex gap-1.5 opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100">
+                  <div className="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 focus-within:opacity-100">
                     <Button
                       type="button"
-                      variant="outline"
-                      size="icon-xs"
+                      variant="ghost"
+                      size="icon-sm"
                       aria-label={`Reorder questions in ${quiz.title}`}
                       title="Reorder or remove questions"
                       onClick={() => setEditingQuiz(quiz)}
-                      className="rounded-full bg-white shadow-sm"
                     >
                       <ListOrdered aria-hidden="true" />
                     </Button>
                     <Button
                       type="button"
-                      variant="outline"
-                      size="icon-xs"
+                      variant="ghost"
+                      size="icon-sm"
                       aria-label={`Delete ${quiz.title}`}
                       title="Delete quiz"
                       disabled={deletingId === quiz.id}
                       onClick={() => removeQuiz(quiz)}
-                      className="rounded-full border-red-200 bg-white text-red-600 shadow-sm hover:border-red-300 hover:bg-red-50 hover:text-red-700"
+                      className="text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
                     >
                       <Trash2 aria-hidden="true" />
                     </Button>
                   </div>
-                </div>
+                </li>
               );
             })}
-          </div>
+          </ul>
         </div>
       ) : (
-        <div className="mx-auto max-w-xl py-16 text-center">
-          <h2 className="m-0 text-xl font-semibold text-gray-900">No quizzes yet</h2>
-          <p className="mt-2 text-base text-gray-600">Choose questions from the bank and turn them into a quiz that remembers your progress.</p>
-          <Button asChild className="mt-6">
-            <Link to="/">Browse questions</Link>
+        <div className="flex flex-col items-center rounded-xl border border-dashed px-6 py-16 text-center">
+          <p className="text-sm text-muted-foreground">No quizzes yet</p>
+          <Button render={<Link to="/" />} nativeButton={false} className="mt-4">
+            Browse questions
           </Button>
         </div>
       )}

package/framework/components/quiz-page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Link, useParams } from '@tanstack/react-router';
-import { Check, Pencil, X } from 'lucide-react';
+import { Check, ChevronLeft, Pencil, X } from 'lucide-react';
 import { useBank } from '../../core/config.tsx';
 import type { QuestionStatus, QuestionStatusMap, QuizAnswer, QuizSession } from '../../core/types.ts';
 import {
@@ -30,15 +30,15 @@ import { getQuiz, saveQuizLocally, syncQuiz } from '../lib/quiz-storage.ts';
 import { cn } from '../lib/utils.ts';
 
 const questionStatusStyles: Record<QuestionStatus, string> = {
-  unanswered: 'border-gray-300 bg-gray-50 text-gray-700',
-  revisit: 'border-amber-300 bg-amber-50 text-amber-900',
-  complete: 'border-green-300 bg-green-50 text-green-800',
+  unanswered: 'border-border bg-muted text-muted-foreground',
+  revisit: 'border-warning/30 bg-warning/10 text-warning',
+  complete: 'border-success/30 bg-success/10 text-success',
 };
 
 const questionStatusDotStyles: Record<QuestionStatus, string> = {
-  unanswered: 'border-gray-300 bg-white text-gray-600 hover:border-gray-500',
-  revisit: 'border-amber-400 bg-amber-100 text-amber-900 hover:border-amber-600',
-  complete: 'border-green-500 bg-green-100 text-green-900 hover:border-green-700',
+  unanswered: 'border-border bg-background text-muted-foreground hover:bg-muted',
+  revisit: 'border-warning/30 bg-warning/10 text-warning hover:bg-warning/20',
+  complete: 'border-success/30 bg-success/10 text-success hover:bg-success/20',
 };
 
 export function QuizPage() {
@@ -177,15 +177,15 @@ export function QuizPage() {
     setEditingTitle(false);
   };
 
-  if (loading) return <div className="py-16 text-center text-sm text-gray-600">Opening your quiz...</div>;
+  if (loading) return <div className="py-16 text-center text-sm text-muted-foreground">Opening your quiz...</div>;
 
   if (!session || !activeQuestion || quizQuestions.length === 0) {
     return (
-      <div className="mx-auto max-w-xl py-16 text-center">
-        <h1 className="text-2xl font-bold text-gray-900">Quiz not found</h1>
-        <p className="mt-2 text-base text-gray-600">This practice set may have been removed from this browser.</p>
-        <Button asChild className="mt-6">
-          <Link to="/quizzes">Back to My quizzes</Link>
+      <div className="mx-auto flex w-full max-w-xl flex-col items-center py-16 text-center">
+        <h1 className="text-2xl font-semibold">Quiz not found</h1>
+        <p className="mt-1 text-sm text-muted-foreground">This practice set may have been removed from this browser.</p>
+        <Button render={<Link to="/quizzes" />} nativeButton={false} className="mt-6">
+          Back to my quizzes
         </Button>
       </div>
     );
@@ -208,8 +208,9 @@ export function QuizPage() {
 
   return (
     <div className="mx-auto grid w-full max-w-3xl grid-cols-[minmax(0,1fr)] gap-6">
-      <Link to="/quizzes" className="text-sm font-semibold text-gray-600 hover:text-gray-900">
-        Back to My quizzes
+      <Link to="/quizzes" className="inline-flex w-fit items-center gap-1 text-sm font-medium text-muted-foreground hover:text-foreground">
+        <ChevronLeft aria-hidden="true" className="size-4" />
+        Back to my quizzes
       </Link>
 
       <div className="flex flex-wrap items-center justify-between gap-2">
@@ -229,7 +230,7 @@ export function QuizPage() {
               onKeyDown={(event) => {
                 if (event.key === 'Escape') setEditingTitle(false);
               }}
-              className="h-auto min-w-0 border-gray-300 px-2 py-1 text-2xl font-bold tracking-tight md:text-3xl"
+              className="h-9 min-w-0 px-2 text-2xl font-semibold md:text-2xl"
             />
             <Button type="submit" size="icon-sm" aria-label="Save title" title="Save title" disabled={!titleDraft.trim()}>
               <Check aria-hidden="true" />
@@ -240,26 +241,26 @@ export function QuizPage() {
           </form>
         ) : (
           <div className="flex min-w-0 items-center gap-2">
-            <h1 className="m-0 min-w-0 break-words text-3xl font-bold tracking-tight text-gray-900">{session.title}</h1>
+            <h1 className="m-0 min-w-0 break-words text-2xl font-semibold">{session.title}</h1>
             <Button type="button" variant="ghost" size="icon-xs" aria-label="Edit quiz title" title="Edit quiz title" onClick={startEditingTitle}>
-              <Pencil aria-hidden="true" />
+              <Pencil aria-hidden="true" className="text-muted-foreground" />
             </Button>
           </div>
         )}
-        <span className="text-sm text-gray-600">{saving ? 'Saving...' : 'Saved'}</span>
+        <span className="text-xs text-muted-foreground">{saving ? 'Saving...' : 'Saved'}</span>
       </div>
 
       <div className="flex flex-wrap items-center gap-3">
-        <p className="m-0 text-base font-semibold text-gray-900">
+        <p className="m-0 text-sm font-medium tabular-nums">
           Question {activeIndex + 1} of {quizQuestions.length}
         </p>
         {score.gradeable > 0 && (
-          <Badge variant="secondary" aria-label={`Quiz score: ${score.correct} of ${score.gradeable} correct`}>
+          <Badge variant="secondary" className="tabular-nums" aria-label={`Quiz score: ${score.correct} of ${score.gradeable} correct`}>
             {score.correct}/{score.gradeable} correct
           </Badge>
         )}
         {session.completed && (
-          <Badge variant="outline" className="border-green-300 bg-green-50 text-green-800">
+          <Badge variant="outline" className="border-success/30 bg-success/10 text-success">
             Quiz complete
           </Badge>
         )}
@@ -280,9 +281,9 @@ export function QuizPage() {
                     aria-current={isActive ? 'true' : undefined}
                     title={`${question.title} — ${questionStatusLabels[status]}`}
                     className={cn(
-                      'flex size-8 items-center justify-center rounded-md border text-xs font-semibold tabular-nums transition-colors',
+                      'flex size-8 items-center justify-center rounded-lg border text-xs font-medium tabular-nums transition-colors outline-none focus-visible:ring-3 focus-visible:ring-ring/50',
                       questionStatusDotStyles[status],
-                      isActive && 'ring-2 ring-gray-900 ring-offset-2',
+                      isActive && 'ring-2 ring-ring ring-offset-2 ring-offset-background',
                     )}
                   >
                     {index + 1}
@@ -295,8 +296,8 @@ export function QuizPage() {
       )}
 
       {session.completed && score.gradeable > 0 && (
-        <section aria-label="Quiz results" className="rounded-xl border border-gray-200 bg-gray-50 p-5">
-          <h2 className="m-0 text-lg font-semibold text-gray-900">
+        <section aria-label="Quiz results" className="rounded-xl border bg-card p-5">
+          <h2 className="m-0 text-base font-semibold tabular-nums">
             You scored {score.correct} of {score.gradeable}
           </h2>
           <ol className="mt-3 grid gap-1.5">
@@ -318,22 +319,22 @@ export function QuizPage() {
                   <button
                     type="button"
                     onClick={() => goToQuestion(index)}
-                    className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm hover:bg-gray-100"
+                    className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm hover:bg-muted/50"
                     aria-label={`Review question ${index + 1}: ${question.title} — ${resultLabel.toLowerCase()}`}
                   >
                     <span
                       aria-hidden="true"
                       className={cn(
-                        'flex size-5 shrink-0 items-center justify-center rounded-full text-[11px] font-bold',
-                        result === true && 'bg-green-600 text-white',
-                        result === false && 'bg-red-600 text-white',
-                        result === null && 'bg-gray-200 text-gray-700',
+                        'flex size-5 shrink-0 items-center justify-center rounded-full text-[11px] font-medium tabular-nums',
+                        result === true && 'bg-success/10 text-success',
+                        result === false && 'bg-destructive/10 text-destructive',
+                        result === null && 'bg-muted text-muted-foreground',
                       )}
                     >
                       {result === true ? <Check className="size-3" /> : result === false ? <X className="size-3" /> : index + 1}
                     </span>
-                    <span className="min-w-0 flex-1 truncate text-gray-900">{question.title}</span>
-                    <span className="shrink-0 text-xs text-gray-500">{resultLabel}</span>
+                    <span className="min-w-0 flex-1 truncate">{question.title}</span>
+                    <span className="shrink-0 text-xs tabular-nums text-muted-foreground">{resultLabel}</span>
                   </button>
                 </li>
               );
@@ -342,15 +343,15 @@ export function QuizPage() {
         </section>
       )}
 
-      <section className="min-w-0 rounded-xl border border-gray-200 bg-white p-5">
+      <section className="min-w-0 rounded-xl border bg-card p-6">
         <div className="flex flex-wrap items-center gap-2">
-          <h2 className="m-0 min-w-0 flex-1 break-words text-xl font-semibold text-gray-900">{activeQuestion.title}</h2>
+          <h2 className="m-0 min-w-0 flex-1 break-words text-base font-semibold">{activeQuestion.title}</h2>
           <Badge variant="outline">{questionKindLabels[kind]}</Badge>
           <Badge variant="outline" className={questionStatusStyles[activeStatus]}>
             {questionStatusLabels[activeStatus]}
           </Badge>
         </div>
-        <p className="mt-1 break-all font-mono text-xs text-gray-500">{activeQuestion.id}</p>
+        <p className="mt-1 break-all font-mono text-xs text-muted-foreground">{activeQuestion.id}</p>
         {activeQuestion.tags.length > 0 && (
           <div className="mt-2 flex flex-wrap gap-1">
             {activeQuestion.tags.map((tag) => (
@@ -360,11 +361,11 @@ export function QuizPage() {
             ))}
           </div>
         )}
-        <MarkdownContent content={activeQuestion.prompt} className="mt-4 text-base leading-relaxed text-gray-800" />
+        <MarkdownContent content={activeQuestion.prompt} className="mt-4 text-[15px] leading-7" />
 
         {choice ? (
           <div className="mt-6">
-            <p id="quiz-choices-label" className="text-sm font-semibold text-gray-900">
+            <p id="quiz-choices-label" className="text-sm font-medium">
               {kind === 'single' ? 'Choose one answer' : 'Choose all that apply'}
             </p>
             <div role={kind === 'single' ? 'radiogroup' : 'group'} aria-labelledby="quiz-choices-label" className="mt-2 grid grid-cols-[minmax(0,1fr)] gap-2">
@@ -376,12 +377,12 @@ export function QuizPage() {
                   <label
                     key={option.id}
                     className={cn(
-                      'flex cursor-pointer items-start gap-3 rounded-lg border p-3 transition-colors',
-                      !showCorrectness && selected && 'border-gray-900 bg-gray-50',
-                      !showCorrectness && !selected && 'border-gray-300 bg-white hover:border-gray-500',
-                      showCorrectness && isCorrectOption && 'border-green-600 bg-green-50',
-                      showCorrectness && !isCorrectOption && selected && 'border-red-600 bg-red-50',
-                      showCorrectness && !isCorrectOption && !selected && 'border-gray-200 bg-white opacity-70',
+                      'flex cursor-pointer items-start gap-3 rounded-lg border p-3 transition-colors has-focus-visible:ring-3 has-focus-visible:ring-ring/50',
+                      !showCorrectness && selected && 'border-ring bg-muted',
+                      !showCorrectness && !selected && 'hover:bg-muted/50',
+                      showCorrectness && isCorrectOption && 'border-success/30 bg-success/10',
+                      showCorrectness && !isCorrectOption && selected && 'border-destructive/30 bg-destructive/10',
+                      showCorrectness && !isCorrectOption && !selected && 'opacity-60',
                     )}
                   >
                     <input
@@ -389,32 +390,32 @@ export function QuizPage() {
                       name={`quiz-choice-${activeQuestion.id}`}
                       checked={selected}
                       onChange={() => toggleOption(activeQuestion.id, option.id, kind === 'single')}
-                      className="mt-1 size-4 shrink-0 accent-gray-900"
+                      className="mt-1.5 size-4 shrink-0 accent-primary"
                       aria-label={`Option ${optionLetter(index)}`}
                     />
                     <span
                       aria-hidden="true"
                       className={cn(
-                        'mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border text-xs font-bold',
+                        'mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border text-xs font-medium',
                         showCorrectness && isCorrectOption
-                          ? 'border-green-600 bg-green-600 text-white'
+                          ? 'border-success/30 bg-success/10 text-success'
                           : showCorrectness && selected
-                            ? 'border-red-600 bg-red-600 text-white'
+                            ? 'border-destructive/30 bg-destructive/10 text-destructive'
                             : selected
-                              ? 'border-gray-900 bg-gray-900 text-white'
-                              : 'border-gray-300 bg-white text-gray-600',
+                              ? 'border-primary bg-primary text-primary-foreground'
+                              : 'bg-background text-muted-foreground',
                       )}
                     >
                       {optionLetter(index)}
                     </span>
-                    <MarkdownContent content={option.text} className="min-w-0 flex-1 overflow-x-auto text-base leading-7" />
+                    <MarkdownContent content={option.text} className="min-w-0 flex-1 overflow-x-auto text-[15px] leading-7" />
                     {showCorrectness && isCorrectOption && (
-                      <Badge variant="outline" className="shrink-0 border-green-600 bg-white text-green-800">
+                      <Badge variant="outline" className="mt-1 shrink-0 border-success/30 bg-success/10 text-success">
                         Correct
                       </Badge>
                     )}
                     {showCorrectness && !isCorrectOption && selected && (
-                      <Badge variant="outline" className="shrink-0 border-red-600 bg-white text-red-800">
+                      <Badge variant="outline" className="mt-1 shrink-0 border-destructive/30 bg-destructive/10 text-destructive">
                         Yours
                       </Badge>
                     )}
@@ -441,7 +442,7 @@ export function QuizPage() {
           />
         ) : (
           <div className="mt-6">
-            <label htmlFor="quiz-answer" className="text-sm font-semibold text-gray-900">
+            <label htmlFor="quiz-answer" className="text-sm font-medium">
               Your answer
             </label>
             <textarea
@@ -449,7 +450,7 @@ export function QuizPage() {
               value={typeof answer === 'string' ? answer : ''}
               onChange={(event) => updateWrittenAnswer(event.target.value)}
               placeholder="Write your working or notes here..."
-              className="mt-2 block min-h-40 w-full resize-y rounded-lg border border-gray-300 bg-white p-3 text-base leading-relaxed text-gray-900 outline-none placeholder:text-gray-400"
+              className="mt-2 block min-h-40 w-full resize-y rounded-lg border border-input bg-transparent px-2.5 py-2 text-sm leading-6 transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 dark:bg-input/30"
             />
           </div>
         )}
@@ -460,8 +461,8 @@ export function QuizPage() {
               <div
                 role="status"
                 className={cn(
-                  'mt-4 rounded-lg border p-4 text-sm font-medium',
-                  correctness ? 'border-green-300 bg-green-50 text-green-900' : 'border-red-300 bg-red-50 text-red-900',
+                  'mt-4 rounded-lg border px-4 py-3 text-sm font-medium',
+                  correctness ? 'border-success/30 bg-success/10 text-success' : 'border-destructive/30 bg-destructive/10 text-destructive',
                 )}
               >
                 {correctness
@@ -510,17 +511,17 @@ export function QuizPage() {
               </Button>
             )}
             {isSuggestedAnswerShown && (
-              <section id="suggested-answer" className="mt-4 rounded-lg border border-gray-200 bg-gray-50 p-4">
-                <h3 className="m-0 text-base font-semibold text-gray-900">
+              <section id="suggested-answer" className="mt-4 rounded-lg border bg-muted/50 p-4">
+                <h3 className="m-0 text-sm font-medium">
                   {gradeable ? 'Explanation' : 'Suggested answer'}
                 </h3>
-                <MarkdownContent content={suggestedAnswer} className="mt-3 text-sm leading-relaxed text-gray-800" />
+                <MarkdownContent content={suggestedAnswer} className="mt-2 text-sm leading-6" />
               </section>
             )}
           </div>
         )}
 
-        <div className="mt-6 flex flex-wrap items-center justify-between gap-3">
+        <div className="mt-6 flex flex-wrap items-center justify-between gap-2 border-t pt-4">
           <div className="flex gap-2">
             <Button variant="outline" onClick={() => goToQuestion(Math.max(activeIndex - 1, 0))} disabled={activeIndex === 0}>
               Previous
@@ -537,7 +538,7 @@ export function QuizPage() {
             <Button variant="outline" onClick={() => updateQuestionStatus('unanswered')} disabled={session.completed}>
               Skip
             </Button>
-            <Button onClick={() => updateQuestionStatus('revisit')} disabled={session.completed} className="bg-amber-400 text-gray-950 hover:bg-amber-500">
+            <Button onClick={() => updateQuestionStatus('revisit')} disabled={session.completed} variant="outline" className="border-warning/30 bg-warning/10 text-warning hover:bg-warning/20 hover:text-warning">
               Revisit
             </Button>
             <Button onClick={() => updateQuestionStatus('complete')} disabled={session.completed}>