@semiont/react-ui 0.5.24 → 0.5.26

package/src/components/StatusDisplay.css

@@ -161,7 +161,7 @@
 
 .semiont-toolbar-icon-large {
   font-size: 1.875rem; /* 30px - was 2xl/1.5rem */
-  font-weight: var(--semiont-font-weight-bold);
+  font-weight: var(--semiont-font-bold);
 }
 
 /* Dark mode for Toolbar - Fixed to respect data-theme attribute */
@@ -206,7 +206,7 @@
   color: var(--semiont-color-primary-700);
   border: 1px solid var(--semiont-color-primary-200);
   border-radius: var(--semiont-radius-base);
-  font-size: var(--semiont-font-size-xs);
+  font-size: var(--semiont-text-xs);
 }
 
 /* Editing affordances (RESOURCE-TAGS-INLINE-EDITING) */
@@ -217,7 +217,7 @@
   border: none;
   background: none;
   color: inherit;
-  font-size: var(--semiont-font-size-xs);
+  font-size: var(--semiont-text-xs);
   cursor: pointer;
   opacity: 0.7;
 }
@@ -279,8 +279,8 @@
 }
 
 .semiont-error-boundary-title {
-  font-size: var(--semiont-font-size-2xl);
-  font-weight: var(--semiont-font-weight-bold);
+  font-size: var(--semiont-text-2xl);
+  font-weight: var(--semiont-font-bold);
   color: var(--semiont-color-neutral-900);
   margin-bottom: var(--semiont-spacing-xs);
 }
@@ -290,30 +290,30 @@
 }
 
 .semiont-error-boundary-details {
-  background-color: var(--semiont-color-danger-50);
-  border: 1px solid var(--semiont-color-danger-200);
+  background-color: var(--semiont-color-red-50);
+  border: 1px solid var(--semiont-color-red-200);
   border-radius: var(--semiont-radius-md);
   padding: var(--semiont-spacing-md);
 }
 
 .semiont-error-boundary-details-title {
-  font-size: var(--semiont-font-size-sm);
-  font-weight: var(--semiont-font-weight-semibold);
-  color: var(--semiont-color-danger-800);
+  font-size: var(--semiont-text-sm);
+  font-weight: var(--semiont-font-semibold);
+  color: var(--semiont-color-red-800);
   margin-bottom: calc(var(--semiont-spacing-xs) / 2);
 }
 
 .semiont-error-boundary-details-message {
-  font-size: var(--semiont-font-size-xs);
-  color: var(--semiont-color-danger-700);
+  font-size: var(--semiont-text-xs);
+  color: var(--semiont-color-red-700);
   font-family: monospace;
   word-break: break-all;
 }
 
 .semiont-error-boundary-stack {
   margin-top: var(--semiont-spacing-xs);
-  font-size: var(--semiont-font-size-xs);
-  color: var(--semiont-color-danger-600);
+  font-size: var(--semiont-text-xs);
+  color: var(--semiont-color-red-600);
   overflow-x: auto;
 }
 
@@ -326,8 +326,8 @@
 /* AsyncErrorBoundary Component */
 .semiont-async-error-boundary {
   padding: var(--semiont-spacing-md);
-  background-color: var(--semiont-color-warning-50);
-  border: 1px solid var(--semiont-color-warning-200);
+  background-color: var(--semiont-color-amber-50);
+  border: 1px solid var(--semiont-color-amber-200);
   border-radius: var(--semiont-radius-md);
 }
 
@@ -343,7 +343,7 @@
 .semiont-icon-warning {
   height: 1.25rem;
   width: 1.25rem;
-  color: var(--semiont-color-warning-400);
+  color: var(--semiont-color-amber-400);
 }
 
 .semiont-async-error-details {
@@ -352,21 +352,21 @@
 }
 
 .semiont-async-error-title {
-  font-size: var(--semiont-font-size-sm);
-  font-weight: var(--semiont-font-weight-medium);
-  color: var(--semiont-color-warning-800);
+  font-size: var(--semiont-text-sm);
+  font-weight: var(--semiont-font-medium);
+  color: var(--semiont-color-amber-800);
 }
 
 .semiont-async-error-message {
   margin-top: calc(var(--semiont-spacing-xs) / 2);
-  font-size: var(--semiont-font-size-sm);
-  color: var(--semiont-color-warning-700);
+  font-size: var(--semiont-text-sm);
+  color: var(--semiont-color-amber-700);
 }
 
 .semiont-async-error-retry {
   margin-top: var(--semiont-spacing-xs);
-  font-size: var(--semiont-font-size-sm);
-  color: var(--semiont-color-warning-600);
+  font-size: var(--semiont-text-sm);
+  color: var(--semiont-color-amber-600);
   text-decoration: underline;
   background: none;
   border: none;
@@ -375,7 +375,7 @@
 }
 
 .semiont-async-error-retry:hover {
-  color: var(--semiont-color-warning-500);
+  color: var(--semiont-color-amber-500);
 }
 
 /* Dark mode for ErrorBoundary */
@@ -393,43 +393,43 @@
 
 [data-theme="dark"] .semiont-error-boundary-details {
   background-color: rgba(239, 68, 68, 0.2);
-  border-color: var(--semiont-color-danger-800);
+  border-color: var(--semiont-color-red-800);
 }
 
 [data-theme="dark"] .semiont-error-boundary-details-title {
-  color: var(--semiont-color-danger-300);
+  color: var(--semiont-color-red-300);
 }
 
 [data-theme="dark"] .semiont-error-boundary-details-message {
-  color: var(--semiont-color-danger-400);
+  color: var(--semiont-color-red-400);
 }
 
 [data-theme="dark"] .semiont-error-boundary-stack {
-  color: var(--semiont-color-danger-500);
+  color: var(--semiont-color-red-500);
 }
 
 [data-theme="dark"] .semiont-async-error-boundary {
   background-color: rgba(245, 158, 11, 0.2);
-  border-color: var(--semiont-color-warning-800);
+  border-color: var(--semiont-color-amber-800);
 }
 
 [data-theme="dark"] .semiont-icon-warning {
-  color: var(--semiont-color-warning-400);
+  color: var(--semiont-color-amber-400);
 }
 
 [data-theme="dark"] .semiont-async-error-title {
-  color: var(--semiont-color-warning-300);
+  color: var(--semiont-color-amber-300);
 }
 
 [data-theme="dark"] .semiont-async-error-message {
-  color: var(--semiont-color-warning-400);
+  color: var(--semiont-color-amber-400);
 }
 
 [data-theme="dark"] .semiont-async-error-retry {
-  color: var(--semiont-color-warning-400);
+  color: var(--semiont-color-amber-400);
 }
 
 [data-theme="dark"] .semiont-async-error-retry:hover {
-  color: var(--semiont-color-warning-300);
+  color: var(--semiont-color-amber-300);
 }
 

package/src/components/__tests__/AssistProgress.test.tsx

@@ -7,13 +7,19 @@
  * cancel/dismiss arrive as callbacks the caller wires (job.cancelRequest /
  * mark.dismissProgress). Feature blocks are data-presence-driven so each call
  * site keeps its current visuals by passing what it always had.
+ *
+ * i18n contract (ASSIST-SURFACE-WARTS Lane A): every string this component
+ * renders comes from `translations`. There are NO English fallbacks — a
+ * missing key must be a type error at the call site, not a silent English
+ * leak in a Japanese UI. Tests use key-echo strings ('tr.complete') so an
+ * assertion failing means "rendered something other than what was passed".
  */
 import { describe, it, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import type { components } from '@semiont/core';
-import { AssistProgress } from '../AssistProgress';
+import { AssistProgress, type AssistProgressTranslations } from '../AssistProgress';
 
 type JobProgress = components['schemas']['JobProgress'];
 
@@ -21,13 +27,26 @@ const running = (over: Partial<JobProgress> = {}): JobProgress => ({
   stage: 'analyzing', percentage: 40, message: 'working on it', ...over,
 });
 
+/** Every required key, echoing its own name; override per test. */
+const T = (over: Partial<AssistProgressTranslations> = {}): AssistProgressTranslations => ({
+  cancel: 'tr.cancel',
+  inProgress: 'tr.inProgress',
+  complete: 'tr.complete',
+  failed: 'tr.failed',
+  close: 'tr.close',
+  paramsTitle: 'tr.paramsTitle',
+  processing: (label: string) => `tr.processing(${label})`,
+  ...over,
+});
+
 describe('AssistProgress', () => {
   it('renders provider-free: message, params, and data hooks', () => {
     const { container } = render(
       <AssistProgress
         progress={running({ requestParams: [{ label: 'Density', value: '5' }] })}
         dataType="comment"
-             />,
+        translations={T()}
+      />,
     );
     expect(screen.getByText('working on it')).toBeInTheDocument();
     expect(screen.getByText(/Density/)).toBeInTheDocument();
@@ -37,12 +56,24 @@ describe('AssistProgress', () => {
     expect(root).toHaveAttribute('data-status', 'analyzing');
   });
 
+  it('renders the request-parameters title from translations, never a literal', () => {
+    render(
+      <AssistProgress
+        progress={running({ requestParams: [{ label: 'Density', value: '5' }] })}
+        dataType="comment"
+        translations={T()}
+      />,
+    );
+    expect(screen.getByText('tr.paramsTitle')).toBeInTheDocument();
+    expect(screen.queryByText('Request Parameters:')).not.toBeInTheDocument();
+  });
+
   it('renders a title header only when given one', () => {
     const { rerender } = render(
-      <AssistProgress progress={running()} dataType="reference" translations={{ title: 'Annotating Entity References' }} />,
+      <AssistProgress progress={running()} dataType="reference" translations={T({ title: 'Annotating Entity References' })} />,
     );
     expect(screen.getByText('Annotating Entity References')).toBeInTheDocument();
-    rerender(<AssistProgress progress={running()} dataType="comment" />);
+    rerender(<AssistProgress progress={running()} dataType="comment" translations={T()} />);
     expect(screen.queryByText('Annotating Entity References')).not.toBeInTheDocument();
   });
 
@@ -50,7 +81,7 @@ describe('AssistProgress', () => {
     // Cancel lives in the title header — both flows that offer cancel
     // (reference detection, generation) render the titled profile.
     const onCancel = vi.fn();
-    const tr = { title: 'Generating Resource', cancel: 'Cancel Job' };
+    const tr = T({ title: 'Generating Resource', cancel: 'Cancel Job' });
     const { rerender } = render(
       <AssistProgress progress={running()} dataType="generation" onCancel={onCancel} translations={tr} />,
     );
@@ -68,13 +99,20 @@ describe('AssistProgress', () => {
     expect(screen.queryByTitle('Cancel Job')).not.toBeInTheDocument();
   });
 
-  it('stage branching: complete shows ✅ + complete copy, error shows ❌ + message', () => {
+  it('stage branching: both terminal stages prefer the job message, then the translated copy', () => {
+    // The job composes detail no static string can ("Created 14 highlights"),
+    // so it wins on BOTH terminal stages; the translated copy covers the
+    // required-but-empty message case (pinned below).
     const { rerender } = render(
-      <AssistProgress progress={running({ stage: 'complete' })} dataType="reference" translations={{ complete: 'All done!' }} />,
+      <AssistProgress progress={running({ stage: 'complete' })} dataType="reference" translations={T({ complete: 'All done!' })} />,
+    );
+    expect(screen.getByText('working on it')).toBeInTheDocument();
+    rerender(
+      <AssistProgress progress={running({ stage: 'complete', message: '' })} dataType="reference" translations={T({ complete: 'All done!' })} />,
     );
     expect(screen.getByText('All done!')).toBeInTheDocument();
     rerender(
-      <AssistProgress progress={running({ stage: 'error', message: 'it broke' })} dataType="reference" translations={{ failed: 'Failed' }} />,
+      <AssistProgress progress={running({ stage: 'error', message: 'it broke' })} dataType="reference" translations={T({ failed: 'Failed' })} />,
     );
     expect(screen.getByText('it broke')).toBeInTheDocument();
   });
@@ -83,7 +121,7 @@ describe('AssistProgress', () => {
     render(
       <AssistProgress
         progress={running({ completedEntityTypes: [{ entityType: 'Person', foundCount: 3 }] })}
-        dataType="reference" translations={{ found: (n) => `Found ${n}` }}
+        dataType="reference" translations={T({ found: (n) => `Found ${n}` })}
       />,
     );
     expect(screen.getByText('Person:')).toBeInTheDocument();
@@ -94,55 +132,75 @@ describe('AssistProgress', () => {
     const { rerender } = render(
       <AssistProgress
         progress={running({ currentEntityType: 'Location' })}
-        dataType="reference" translations={{ current: (l) => `Processing: ${l}` }}
+        dataType="reference" translations={T({ current: (l) => `Current: ${l}` })}
       />,
     );
-    expect(screen.getByText('Processing: Location')).toBeInTheDocument();
+    expect(screen.getByText('Current: Location')).toBeInTheDocument();
     rerender(
       <AssistProgress
         progress={running({ currentCategory: 'Rule', processedCategories: 2, totalCategories: 5 })}
-        dataType="tag"      />,
+        dataType="tag" translations={T()}
+      />,
     );
     expect(screen.getByText(/Rule/)).toBeInTheDocument();
     expect(screen.getByText(/2\/5/)).toBeInTheDocument();
   });
 
+  it('falls back to the generic processing formatter — never the English literal', () => {
+    // The reference flow passes its own `current` wording; every other flow
+    // (tag categories, and any flow without one) uses `processing`. Neither
+    // path may render a hardcoded "Processing: ".
+    const { rerender } = render(
+      <AssistProgress progress={running({ currentEntityType: 'Location' })} dataType="reference" translations={T()} />,
+    );
+    expect(screen.getByText('tr.processing(Location)')).toBeInTheDocument();
+    rerender(
+      <AssistProgress progress={running({ currentCategory: 'Rule' })} dataType="tag" translations={T()} />,
+    );
+    expect(screen.getByText(/tr\.processing\(Rule\)/)).toBeInTheDocument();
+    expect(screen.queryByText(/^Processing: /)).not.toBeInTheDocument();
+  });
+
   it('renders the percentage bar only when opted in', () => {
     const { container, rerender } = render(
-      <AssistProgress progress={running({ percentage: 40 })} dataType="tag" showPercentBar />,
+      <AssistProgress progress={running({ percentage: 40 })} dataType="tag" showPercentBar translations={T()} />,
     );
     const fill = container.querySelector('.semiont-progress-bar__fill');
     expect(fill).toBeInTheDocument();
     expect(fill).toHaveStyle({ width: '40%' });
     rerender(
-      <AssistProgress progress={running({ percentage: 40 })} dataType="reference" />,
+      <AssistProgress progress={running({ percentage: 40 })} dataType="reference" translations={T()} />,
     );
     expect(container.querySelector('.semiont-progress-bar__fill')).not.toBeInTheDocument();
   });
 
-  it('cancel and dismiss carry accessible names, with safe fallbacks when untranslated', () => {
-    // ✕ / × glyphs alone are meaningless to screen readers; the controls must
-    // have an accessible name even when a caller forgets the translations.
+  it('cancel and dismiss take their accessible names from translations', () => {
+    // ✕ / × glyphs alone are meaningless to screen readers, and an English
+    // fallback is meaningless to a non-English reader. The labels are
+    // required keys, so there is nothing to fall back TO.
     render(
       <AssistProgress progress={running()} dataType="generation"
         onCancel={vi.fn()} onDismiss={vi.fn()}
-        translations={{ title: 'Generating' }} />,
+        translations={T({ title: 'Generating' })} />,
     );
-    expect(screen.getByLabelText('Cancel')).toBeInTheDocument();
-    expect(screen.getByLabelText('Dismiss')).toBeInTheDocument();
+    expect(screen.getByLabelText('tr.cancel')).toBeInTheDocument();
+    expect(screen.getByLabelText('tr.close')).toBeInTheDocument();
+    expect(screen.queryByLabelText('Cancel')).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('Dismiss')).not.toBeInTheDocument();
   });
 
-  it('terminal stages never render a blank status line', () => {
+  it('terminal stages never render a blank status line, and never an English one', () => {
     // JobProgress.message is required but can be '' — a terminal display with
-    // no text at all is worse than a generic word.
+    // no text at all is worse than a generic word, but that word must be the
+    // caller's translated one.
     const { rerender } = render(
-      <AssistProgress progress={running({ stage: 'complete', message: '' })} dataType="reference" />,
+      <AssistProgress progress={running({ stage: 'complete', message: '' })} dataType="reference" translations={T()} />,
     );
-    expect(screen.getByText('Complete')).toBeInTheDocument();
+    expect(screen.getByText('tr.complete')).toBeInTheDocument();
     rerender(
-      <AssistProgress progress={running({ stage: 'error', message: '' })} dataType="reference" />,
+      <AssistProgress progress={running({ stage: 'error', message: '' })} dataType="reference" translations={T()} />,
     );
-    expect(screen.getByText('Failed')).toBeInTheDocument();
+    expect(screen.getByText('tr.failed')).toBeInTheDocument();
   });
 
   it('renders dismiss whenever the caller offers it (WHEN is the caller\'s policy)', async () => {
@@ -151,12 +209,12 @@ describe('AssistProgress', () => {
     // "callback present → affordance rendered".
     const onDismiss = vi.fn();
     const { rerender } = render(
-      <AssistProgress progress={running()} dataType="highlight" translations={{ close: 'Close' }} />,
+      <AssistProgress progress={running()} dataType="highlight" translations={T({ close: 'Close' })} />,
     );
     expect(screen.queryByLabelText('Close')).not.toBeInTheDocument();
     rerender(
       <AssistProgress progress={running()} dataType="highlight"
-        onDismiss={onDismiss} translations={{ close: 'Close' }} />,
+        onDismiss={onDismiss} translations={T({ close: 'Close' })} />,
     );
     await userEvent.click(screen.getByLabelText('Close'));
     expect(onDismiss).toHaveBeenCalledOnce();

package/src/components/annotation/annotations.css

@@ -45,7 +45,7 @@
  * or a position-fallback. The hover tooltip (added by
  * `getAnnotationDecorationMeta`) names the strategy. */
 .annotation-low-confidence {
-  text-decoration: underline dotted var(--semiont-color-warning-500, #d97706);
+  text-decoration: underline dotted var(--semiont-color-amber-500);
   text-decoration-thickness: 2px;
   text-underline-offset: 2px;
 }

package/src/components/modals/SearchModal.css

@@ -211,11 +211,11 @@
 }
 
 .semiont-search-modal__result-icon--entity {
-  color: var(--semiont-color-success-500);
+  color: var(--semiont-color-green-500);
 }
 
 [data-theme="dark"] .semiont-search-modal__result-icon--entity {
-  color: var(--semiont-color-success-400);
+  color: var(--semiont-color-green-400);
 }
 
 /* Result content */
@@ -244,13 +244,13 @@
   font-size: 0.75rem;
   font-weight: 500;
   border-radius: 9999px;
-  background-color: var(--semiont-color-success-100);
-  color: var(--semiont-color-success-700);
+  background-color: var(--semiont-color-green-100);
+  color: var(--semiont-color-green-700);
 }
 
 [data-theme="dark"] .semiont-search-modal__result-badge {
   background-color: rgba(34, 197, 94, 0.3);
-  color: var(--semiont-color-success-300);
+  color: var(--semiont-color-green-300);
 }
 
 .semiont-search-modal__result-description {

package/src/components/pdf-annotation/PdfAnnotationCanvas.css

@@ -20,14 +20,151 @@
 
 /* stylelint-disable semiont/accessibility -- Error indicator added by semantic-indicators.css */
 .semiont-pdf-annotation-canvas__error {
-  color: var(--error-color);
+  color: var(--semiont-color-error);
 }
 
 [data-theme="dark"] .semiont-pdf-annotation-canvas__error {
-  color: var(--error-color);
+  color: var(--semiont-color-error);
 }
 /* stylelint-enable semiont/accessibility */
 
+/*
+ * The scrolling column (PDF-CONTINUOUS-SCROLL S1). Every page owns a slot so
+ * the scrollbar reflects the whole document; only pages near the viewport are
+ * mounted, and an unmounted slot holds its space with an estimated height set
+ * inline. `max-height` is what makes this a scroll container at all — without
+ * it the column grows to its content and the page scrolls instead, which
+ * still works but defeats the windowing.
+ */
+/*
+ * Viewport = the pages plus their strip, side by side. The strip LEADS — it
+ * hugs the content's leading edge, where a page rail conventionally lives
+ * (Preview, Acrobat), so the reader's eye finds it before the page.
+ */
+.semiont-pdf-annotation-canvas__viewport {
+  display: flex;
+  gap: 0.5rem;
+  align-items: stretch;
+}
+
+.semiont-pdf-annotation-canvas__viewport[data-axis="horizontal"] {
+  flex-direction: column;
+}
+
+.semiont-pdf-annotation-canvas__column {
+  display: flex;
+  flex: 1 1 auto;
+  gap: 1rem;
+  align-items: center;
+}
+
+/*
+ * Both blocks below key off ONE attribute, so the strip can never end up
+ * running across the direction the document scrolls.
+ */
+/*
+ * The column does NOT scroll. The pane the viewer sits in already does
+ * (`flex: 1; min-height: 0`), and giving the column a viewport-relative
+ * height of its own produced a scroller inside a scroller — two bars along
+ * one axis, the inner one redundant with the page rail beside it.
+ */
+.semiont-pdf-annotation-canvas__column[data-axis="vertical"] {
+  flex-direction: column;
+}
+
+.semiont-pdf-annotation-canvas__column[data-axis="horizontal"] {
+  flex-direction: row;
+}
+
+.semiont-pdf-annotation-canvas__slot {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+/*
+ * The page strip: the document's shape in miniature. Rectangles only — no
+ * rasterization — so a 400-page scan costs 400 empty divs, not 400 renders.
+ */
+/*
+ * The strip scrolls — a 70-page document cannot fit its numbered rectangles in
+ * one screen — but it must not show a scrollbar. Two scrollbars side by side
+ * read as two controls for one thing, and the strip's own moves the strip
+ * rather than the document, so it looks broken. Position is carried by the
+ * highlighted page, and the strip follows the reader on its own.
+ */
+.semiont-pdf-annotation-canvas__strip {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 2px;
+  padding: 0.5rem;
+  scrollbar-width: none; /* standard; Firefox + recent Chromium */
+}
+
+/* WebKit/Safari, which has no `scrollbar-width` support to rely on. */
+.semiont-pdf-annotation-canvas__strip::-webkit-scrollbar {
+  display: none;
+}
+
+/*
+ * The rail hugs the leading edge of the content and stays put while the
+ * document scrolls past it — `sticky` rather than a fixed-height box, so it
+ * follows the reader without claiming a second scroll region in the layout.
+ */
+.semiont-pdf-annotation-canvas__strip[data-axis="vertical"] {
+  position: sticky;
+  top: 0;
+  flex-direction: column;
+  align-self: flex-start;
+  align-items: center;
+  max-height: 100vh;
+  overflow-y: auto;
+  border-right: 1px solid var(--semiont-border-secondary);
+}
+
+.semiont-pdf-annotation-canvas__strip[data-axis="horizontal"] {
+  position: sticky;
+  top: 0;
+  flex-direction: row;
+  align-items: flex-end;
+  max-width: 100%;
+  overflow-x: auto;
+  border-bottom: 1px solid var(--semiont-border-secondary);
+}
+
+.semiont-pdf-annotation-canvas__strip-page {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  padding: 0;
+  border: 1px solid var(--semiont-border-primary);
+  border-radius: 1px;
+  background: var(--semiont-bg-secondary);
+  color: var(--semiont-text-tertiary);
+  font-size: var(--semiont-text-2xs);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.semiont-pdf-annotation-canvas__strip-page:hover {
+  background: var(--semiont-bg-hover);
+}
+
+/* The reader's position, legible at a glance across a long strip. */
+.semiont-pdf-annotation-canvas__strip-page[aria-current="page"] {
+  border-color: var(--semiont-color-primary-600);
+  background: var(--semiont-color-primary-500);
+  color: var(--semiont-color-neutral-0);
+  font-weight: var(--semiont-font-semibold);
+}
+
+.semiont-pdf-annotation-canvas__strip-page:focus-visible {
+  outline: 2px solid var(--semiont-focus-ring);
+  outline-offset: 1px;
+}
+
 .semiont-pdf-annotation-canvas__container {
   position: relative;
   display: inline-block;
@@ -83,12 +220,12 @@
   justify-content: center;
   gap: 1rem;
   padding: 1rem;
-  border-top: 1px solid var(--border-color);
+  border-top: 1px solid var(--semiont-border-primary);
 }
 
 .semiont-pdf-annotation-canvas__button {
   padding: 0.5rem 1rem;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--semiont-border-primary);
   border-radius: 4px;
   background: transparent;
   cursor: pointer;
@@ -101,11 +238,11 @@
 }
 
 .semiont-pdf-annotation-canvas__button:hover:not(:disabled) {
-  background-color: var(--hover-color, rgba(0, 0, 0, 0.05));
+  background-color: var(--semiont-bg-hover);
 }
 
 .semiont-pdf-annotation-canvas__button:focus-visible {
-  outline: 2px solid var(--focus-color, #0066cc);
+  outline: 2px solid var(--semiont-focus-ring);
   outline-offset: 2px;
 }