@semiont/react-ui 0.5.25 → 0.5.27

package/src/features/resource-viewer/components/ResourceViewerPage.tsx

@@ -6,6 +6,8 @@
  */
 
 import React, { useState, useEffect, useCallback } from 'react';
+import { assistProgressTranslations } from '../../../lib/assist-progress-copy';
+import { useResourceViewedReport } from '../hooks/useResourceViewedReport';
 import type { components, ResourceDescriptor, ResourceId, GatheredContext, EventMap } from '@semiont/core';
 import type { ConnectionState } from '@semiont/core';
 import { annotationId } from '@semiont/core';
@@ -24,6 +26,7 @@ import type { BrowseMediaRenderers, AnnotateMediaRenderers } from '@semiont/reac
 import { useObservable } from '@semiont/react-ui';
 import { useResourceContent } from '../../../hooks/useResourceContent';
 import { useMediaToken } from '../../../hooks/useMediaToken';
+import { useCollaborators } from '../../../hooks/useCollaborators';
 import { mediaUrl } from '../../../lib/media-url';
 import { useToast } from '../../../components/Toast';
 import { useOutcomeToasts } from '../../../hooks/useOutcomeToasts';
@@ -117,7 +120,7 @@ export interface ResourceViewerPageProps {
  * @subscribes yield:clone - Clone the current resource
  * @subscribes beckon:sparkle - Trigger sparkle animation
  * @subscribes mark:added - Annotation was created (sparkle)
- * @subscribes browse:reference-navigate - Navigate to a referenced document
+ * @subscribes browse:resource-open - Open a resource in the viewer (local links + the launcher's tour verbs)
  * @subscribes browse:entity-type-clicked - Navigate filtered by entity type
  *
  * Outcome-notification channels (mark:create-error, mark:delete-error,
@@ -147,6 +150,18 @@ export function ResourceViewerPage({
   const semiont = session?.client;
   const navigateExternal = useObservableExternalNavigation();
 
+  // The KB's collaborator roster, for the Collaboration panel's software-agent
+  // rows. Subscribed unconditionally at the top level (hooks ordering) even
+  // though only one panel reads it; the underlying cache is a KB-wide
+  // singleton, so this costs one shared subscription, not one per panel open.
+  const { collaborators } = useCollaborators(semiont ?? null);
+
+  // At most one entry serves `generation` — the KB's workers.* config yields one
+  // inference config per job type — so `find` is exact, not a first-wins guess.
+  const generationAgent = collaborators.find((entry) =>
+    entry.servesJobTypes?.includes('generation'),
+  );
+
   // ResourceViewer is bring-your-own-session: feed it the active session plus
   // host-owned navigation (reference follow) and panel control (app-scoped bus).
   const handleViewerOpenResource = useCallback((id: string) => {
@@ -224,6 +239,7 @@ export function ResourceViewerPage({
   const panelInitialTab = useObservable(stateUnit?.browse.panelInitialTab$) ?? null;
   const onScrollCompleted = stateUnit?.browse.onScrollCompleted;
   const generationProgress = useObservable(stateUnit?.yield.progress$) ?? null;
+  const isGenerating = useObservable(stateUnit?.yield.isGenerating$) ?? false;
   const gatherContext = useObservable(stateUnit?.gather.context$) ?? null;
   const gatherLoading = useObservable(stateUnit?.gather.loading$) ?? false;
   const gatherError = useObservable(stateUnit?.gather.error$) ?? null;
@@ -241,7 +257,7 @@ export function ResourceViewerPage({
 
   const handleWizardGenerateSubmit = useCallback((referenceId: string, config: GenerationConfig) => {
     clearNewAnnotationId(annotationId(referenceId));
-    stateUnit?.yield.generate(referenceId, {
+    stateUnit?.yield.generate(config.context, {
       title: config.title,
       storageUri: config.storagePath,
       prompt: config.prompt,
@@ -252,16 +268,15 @@ export function ResourceViewerPage({
       sourceLanguage: getLanguage(resource),
       temperature: config.temperature,
       maxTokens: config.maxTokens,
-      context: config.context,
     });
   }, [stateUnit, clearNewAnnotationId, resource]);
 
   // Resource-generate flow (GENERATE-FROM-BUTTON): drive the SAME yield progress$
-  // the annotation path uses so the full AnnotateReferencesProgressWidget shows —
-  // NOT a toast. `generateFromResource` is Phase 6 (the @semiont/sdk session);
-  // this is declared RED until that method lands. Do not re-impl it here.
+  // the annotation path uses so the full `AssistProgress` widget shows — NOT a
+  // toast. Both paths are one `generate(context, options)` now: the context's
+  // focus.kind (resource here, annotation above) decides the shape.
   const handleResourceGenerateSubmit = useCallback((_resourceId: string, config: GenerationConfig) => {
-    stateUnit?.yield.generateFromResource({
+    stateUnit?.yield.generate(config.context, {
       title: config.title,
       storageUri: config.storagePath,
       ...(config.prompt ? { prompt: config.prompt } : {}),
@@ -269,7 +284,6 @@ export function ResourceViewerPage({
       sourceLanguage: getLanguage(resource),
       temperature: config.temperature,
       maxTokens: config.maxTokens,
-      context: config.context,
     });
   }, [stateUnit, resource]);
 
@@ -378,7 +392,7 @@ export function ResourceViewerPage({
     triggerSparkleAnimation(stored.payload.annotation.id);
   }, [triggerSparkleAnimation]);
 
-  const handleReferenceNavigate = useCallback(({ resourceId }: { resourceId: string }) => {
+  const handleResourceOpen = useCallback(({ resourceId }: { resourceId: string }) => {
     if (routes.resourceDetail) {
       const path = routes.resourceDetail(resourceId);
       browser.emit('nav:push', { path, reason: 'reference-link' });
@@ -396,7 +410,7 @@ export function ResourceViewerPage({
   // assist timed-out) live in useOutcomeToasts — they need only the resource id
   // and the toast surface. The registration below keeps the handlers that need
   // page-local dependencies (SDK actions, sparkles, settings, navigation).
-  useOutcomeToasts(resource.id as string);
+  useOutcomeToasts(rUri);
 
   // Single useEventSubscriptions call per file (enforced by
   // scripts/compliance/audit-hooks-ordering.ts); hooks like useOutcomeToasts
@@ -407,7 +421,7 @@ export function ResourceViewerPage({
     'yield:clone': handleResourceClone,
     'beckon:sparkle': handleAnnotationSparkle,
     'mark:added': handleAnnotationAdded,
-    'browse:reference-navigate': handleReferenceNavigate,
+    'browse:resource-open': handleResourceOpen,
     'browse:entity-type-clicked': handleEntityTypeClicked,
   });
 
@@ -426,6 +440,11 @@ export function ResourceViewerPage({
     }
   }, [contentLoading, content, resource.name, announceResourceLoading, announceResourceLoaded]);
 
+  // Report the arrival on the wire (browse:resource-viewed) — same
+  // load-complete condition the announcement uses, so "viewed" means the
+  // content is actually on screen (GUIDED-TOUR P5, D6).
+  useResourceViewedReport(rUri, !contentLoading && !!content);
+
   // Derived state
   const documentEntityTypes = resource.entityTypes || [];
 
@@ -476,17 +495,14 @@ export function ResourceViewerPage({
             <AssistProgress
               progress={generationProgress}
               dataType="generation"
+              // The ending is the owner's fact and every owner must state it
+              // (CLEAN-PROGRESS D1). This call site used to pass neither
+              // `ended` nor `onDismiss`, so a finished generation stayed in its
+              // running form and then vanished on a timer.
+              ended={!isGenerating}
               onCancel={() => session?.client.job.cancelRequest('generation')}
-              translations={{
-                title: tg('progressTitle'),
-                cancel: tg('progressCancel'),
-                inProgress: tg('progressInProgress'),
-                complete: tg('progressComplete'),
-                failed: tg('progressFailed'),
-                paramsTitle: ta('paramsTitle'),
-                processing: (label) => ta('processing', { label }),
-                close: ta('close'),
-              }}
+              onDismiss={() => stateUnit?.yield.dismissProgress()}
+              translations={assistProgressTranslations(ta)}
             />
           )}
           {/* Scrollable body wrapper - contains document content, header is sibling above */}
@@ -637,6 +653,7 @@ export function ResourceViewerPage({
                 state={streamStatus}
                 eventCount={0}
                 knowledgeBaseName={knowledgeBaseName}
+                collaborators={collaborators}
               />
             )}
 
@@ -657,6 +674,7 @@ export function ResourceViewerPage({
 
       {/* Reference Resolution Wizard */}
       <ReferenceWizardModal
+        {...(generationAgent ? { generationAgent } : {})}
         isOpen={wizardOpen}
         onClose={handleWizardClose}
         annotationId={wizardAnnotationId}
@@ -703,6 +721,7 @@ export function ResourceViewerPage({
           creativityCreative: tw('creativityCreative'),
           maxLength: tw('maxLength'),
           maxLengthHelp: tw('maxLengthHelp'),
+          maxLengthCeiling: tw('maxLengthCeiling'),
           maxResults: tw('maxResults'),
           semanticScoring: tw('semanticScoring'),
           semanticScoringHelp: tw('semanticScoringHelp'),
@@ -711,6 +730,7 @@ export function ResourceViewerPage({
 
       {/* Resource-generate flow (GENERATE-FROM-BUTTON) */}
       <ResourceGenerateModal
+        {...(generationAgent ? { generationAgent } : {})}
         isOpen={generateOpen}
         onClose={() => setGenerateOpen(false)}
         resourceId={rUri}
@@ -748,6 +768,7 @@ export function ResourceViewerPage({
           creativityCreative: tg('creativityCreative'),
           maxLength: tg('maxLength'),
           maxLengthHelp: tg('maxLengthHelp'),
+          maxLengthCeiling: tg('maxLengthCeiling'),
           generate: tg('generate'),
         }}
       />

package/src/features/resource-viewer/hooks/__tests__/useResourceViewedReport.test.tsx

@@ -0,0 +1,63 @@
+/**
+ * The viewer's arrival report — GUIDED-TOUR P5 (D6).
+ *
+ * `browse:resource-viewed` is a REPORT, deliberately distinct from the
+ * imperative `browse:resource-open`: it fires when a resource has actually
+ * loaded on screen, however the user got there (followed cue, in-app link,
+ * back button, typed URL). The contract this pins: once per arrival — never
+ * on unrelated re-renders, never before the content is up, and again when
+ * the viewer moves to a different resource.
+ */
+import { renderHook } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import type { ReactNode } from 'react';
+import { useResourceViewedReport } from '../useResourceViewedReport';
+import { createTestSemiontWrapper } from '../../../../test-utils';
+import { resourceId } from '@semiont/core';
+
+function makeWrapper() {
+  const { SemiontWrapper, client } = createTestSemiontWrapper();
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <SemiontWrapper>{children}</SemiontWrapper>
+  );
+  const viewed = vi.spyOn(client.browse, 'resourceViewed').mockImplementation(() => {});
+  return { wrapper, viewed };
+}
+
+const RID_A = resourceId('resaaa11223344556677889900aabbcc');
+const RID_B = resourceId('resbbb11223344556677889900aabbcc');
+
+describe('useResourceViewedReport', () => {
+  it('reports once when the resource finishes loading, not before and not again on re-render', () => {
+    const { wrapper, viewed } = makeWrapper();
+
+    const { rerender } = renderHook(
+      ({ rid, loaded }: { rid: ReturnType<typeof resourceId>; loaded: boolean }) => useResourceViewedReport(rid, loaded),
+      { wrapper, initialProps: { rid: RID_A, loaded: false } },
+    );
+    expect(viewed).not.toHaveBeenCalled();
+
+    rerender({ rid: RID_A, loaded: true });
+    expect(viewed).toHaveBeenCalledTimes(1);
+
+    rerender({ rid: RID_A, loaded: true });
+    rerender({ rid: RID_A, loaded: true });
+    expect(viewed).toHaveBeenCalledTimes(1);
+  });
+
+  it('reports again when the viewer arrives at a different resource', () => {
+    const { wrapper, viewed } = makeWrapper();
+
+    const { rerender } = renderHook(
+      ({ rid, loaded }: { rid: ReturnType<typeof resourceId>; loaded: boolean }) => useResourceViewedReport(rid, loaded),
+      { wrapper, initialProps: { rid: RID_A, loaded: true } },
+    );
+    expect(viewed).toHaveBeenCalledTimes(1);
+
+    rerender({ rid: RID_B, loaded: false });
+    expect(viewed).toHaveBeenCalledTimes(1);
+
+    rerender({ rid: RID_B, loaded: true });
+    expect(viewed).toHaveBeenCalledTimes(2);
+  });
+});

package/src/features/resource-viewer/hooks/useResourceViewedReport.ts

@@ -0,0 +1,33 @@
+import { useEffect, useRef } from 'react';
+import type { ResourceId } from '@semiont/core';
+import { useSemiont } from '../../../session/SemiontProvider';
+import { useObservable } from '../../../hooks/useObservable';
+
+/**
+ * Report a resource arrival on `browse:resource-viewed` — GUIDED-TOUR P5 (D6).
+ *
+ * Fires exactly once per arrival, when the resource has finished loading —
+ * however the user got here: a followed cue, an in-app link, the back button,
+ * a typed URL. That "any means" property is why this lives at the viewer's
+ * load-complete transition rather than on any navigation intent path. A
+ * re-render never re-reports; arriving at a different resource does.
+ *
+ * This is the REPORT half of the tour protocol. The imperative half is
+ * `browse:resource-open`; they must never share a channel (D6 — the driver
+ * would hear its own commands, and one viewer's click would steer another's
+ * page).
+ */
+export function useResourceViewedReport(rid: ResourceId, loaded: boolean): void {
+  const semiont = useSemiont();
+  const session = useObservable(semiont.activeSession$);
+  // Brand once at the boundary (BRAND-UPSTREAM): the caller already holds a
+  // ResourceId; this hook never re-brands.
+  const reported = useRef<ResourceId | null>(null);
+
+  useEffect(() => {
+    if (!loaded || !session) return;
+    if (reported.current === rid) return;
+    reported.current = rid;
+    session.client.browse.resourceViewed(rid);
+  }, [rid, loaded, session]);
+}

package/src/features/resource-viewer/state/__tests__/resource-viewer-page-state-unit.test.ts

@@ -56,7 +56,7 @@ function clientWithNamespaces(overrides: {
     },
     gather: { annotation: vi.fn(() => new Observable(() => {})) },
     match: { search: vi.fn(() => new Observable(() => {})) },
-    yield: { fromAnnotation: vi.fn(() => new Observable(() => {})) },
+    yield: { fromContext: vi.fn(() => new Observable(() => {})) },
     bind: { body: vi.fn().mockResolvedValue(undefined) },
   });
 }
@@ -357,7 +357,7 @@ describe('createResourceViewerPageStateUnit — list failure states', () => {
       mark: { annotation: vi.fn(), delete: vi.fn(), assist: vi.fn(() => new Observable(() => {})) },
       gather: { annotation: vi.fn(() => new Observable(() => {})) },
       match: { search: vi.fn(() => new Observable(() => {})) },
-      yield: { fromAnnotation: vi.fn(() => new Observable(() => {})) },
+      yield: { fromContext: vi.fn(() => new Observable(() => {})) },
       bind: { body: vi.fn().mockResolvedValue(undefined) },
     });
     const unit = createResourceViewerPageStateUnit(tc.session, RID, 'en', mockBrowse());

package/src/features/resource-viewer/state/resource-viewer-page-state-unit.ts

@@ -76,7 +76,7 @@ export function createResourceViewerPageStateUnit(
   const mark = createMarkStateUnit(client, resourceId);
   const gather = createGatherStateUnit(client, resourceId);
   const matchStateUnit = createMatchStateUnit(client, resourceId);
-  const yieldStateUnit = createYieldStateUnit(client, resourceId, locale);
+  const yieldStateUnit = createYieldStateUnit(client, locale);
 
   disposer.add(beckon);
   // `browse` (ShellStateUnit) is a *passed-in* dependency — owned by `useShellStateUnit`,

package/src/styles/core/buttons.css

@@ -487,8 +487,10 @@
   color: var(--semiont-color-white);
 }
 
+/* Hover lifts. The dark active state is primary-600, so hovering to 700 sank
+   it — the opposite of the sibling .semiont-panel-button:hover above. */
 [data-theme="dark"] .semiont-panel-button-active:hover {
-  background-color: var(--semiont-color-primary-700);
+  background-color: var(--semiont-color-primary-500);
 }
 
 /* ============================================

package/src/styles/core/forms.css

@@ -67,11 +67,6 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-form__checkbox-label,
-[data-theme="dark"] .semiont-form__radio-label {
-  color: var(--semiont-text-primary);
-}
-
 /* Form actions */
 .semiont-form__actions {
   display: flex;
@@ -121,10 +116,6 @@
   padding: 0 0.5rem;
 }
 
-[data-theme="dark"] .semiont-form__legend {
-  color: var(--semiont-text-primary);
-}
-
 /* Note: Disabled states for form controls are defined in their respective core files */
 
 /* Panel form elements */
@@ -218,10 +209,6 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-form-field__label {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-form-field__label--with-checkbox {
   display: flex;
   align-items: center;
@@ -235,20 +222,12 @@
   font-weight: var(--semiont-font-medium);
 }
 
-[data-theme="dark"] .semiont-form-field__info {
-  color: var(--semiont-text-tertiary);
-}
-
 .semiont-form-field__char-count {
   font-size: var(--semiont-text-xs);
   color: var(--semiont-text-tertiary);
   text-align: right;
 }
 
-[data-theme="dark"] .semiont-form-field__char-count {
-  color: var(--semiont-text-tertiary);
-}
-
 /* Note: Basic form controls (.semiont-textarea, .semiont-select, .semiont-checkbox)
    are now defined in /styles/core/ as they are fundamental UI elements.
    See: core/textareas.css, core/selects.css, core/checkboxes.css */

package/src/styles/core/indicators.css

@@ -131,10 +131,6 @@
   color: var(--semiont-text-secondary);
 }
 
-[data-theme="dark"] .semiont-indicator__label {
-  color: var(--semiont-text-secondary);
-}
-
 /* Indicator Badge (dot with count) */
 .semiont-indicator-badge {
   position: relative;

package/src/styles/core/inputs.css

@@ -137,7 +137,7 @@
   align-items: center;
   padding: 0.5rem 0.5rem 0.5rem 0.75rem;
   font-size: var(--semiont-text-sm);
-  font-family: var(--semiont-font-mono, monospace);
+  font-family: var(--semiont-font-mono);
   color: var(--semiont-text-tertiary);
   background-color: var(--semiont-color-gray-50);
   border-right: 1px solid var(--semiont-color-gray-300);
@@ -160,10 +160,6 @@
   min-width: 0;
 }
 
-[data-theme="dark"] .semiont-input--addon {
-  border: none;
-}
-
 .semiont-input--addon:focus-visible,
 .semiont-input--addon:focus {
   outline: none;

package/src/styles/core/progress.css

@@ -83,7 +83,7 @@
 }
 
 [data-theme="dark"] .semiont-progress__fill--warning {
-  background-color: var(--semiont-color-warning);
+  background-color: var(--semiont-color-warning-light);
 }
 
 .semiont-progress__fill--error {
@@ -91,7 +91,7 @@
 }
 
 [data-theme="dark"] .semiont-progress__fill--error {
-  background-color: var(--semiont-color-error);
+  background-color: var(--semiont-color-error-light);
 }
 
 /* With Label */
@@ -108,10 +108,6 @@
   color: var(--semiont-text-secondary);
 }
 
-[data-theme="dark"] .semiont-progress__label {
-  color: var(--semiont-text-secondary);
-}
-
 /* Indeterminate Progress */
 .semiont-progress--indeterminate .semiont-progress__fill {
   width: 30%;
@@ -140,31 +136,3 @@
   }
 }
 
-/* Legacy Compatibility Mappings (deprecated - use base classes above)
-   These will be removed in a future version. Update components to use .semiont-progress */
-.semiont-progress-bar,
-.semiont-panel-progress {
-  position: relative;
-  width: 100%;
-  height: 0.5rem;
-  background-color: var(--semiont-bg-secondary);
-  border-radius: var(--semiont-radius-full);
-  overflow: hidden;
-}
-
-[data-theme="dark"] .semiont-progress-bar,
-[data-theme="dark"] .semiont-panel-progress {
-  background-color: var(--semiont-bg-tertiary);
-}
-
-.semiont-progress-bar__fill,
-.semiont-panel-progress__fill {
-  height: 100%;
-  background-color: var(--semiont-color-primary-500);
-  transition: width 0.3s ease;
-}
-
-[data-theme="dark"] .semiont-progress-bar__fill,
-[data-theme="dark"] .semiont-panel-progress__fill {
-  background-color: var(--semiont-color-primary-500);
-}

package/src/styles/core/sliders.css

@@ -212,10 +212,6 @@
   color: var(--semiont-text-secondary);
 }
 
-[data-theme="dark"] .semiont-slider__labels {
-  color: var(--semiont-text-secondary);
-}
-
 /* Small labels variant — reduced font size for compact inline contexts */
 .semiont-slider__labels--small {
   font-size: 0.6875rem;

package/src/styles/core/toggles.css

@@ -17,10 +17,6 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-toggle-label__text {
-  color: var(--semiont-text-primary);
-}
-
 /* Toggle Switch */
 .semiont-toggle {
   position: relative;

package/src/styles/features/compose.css

@@ -118,7 +118,7 @@
    highlight while a drag hovers. */
 .semiont-form__upload-dropzone[data-drag-over="true"] {
   border-color: var(--semiont-color-primary-500);
-  background: var(--semiont-color-primary-50, rgba(59, 130, 246, 0.06));
+  background: var(--semiont-color-primary-50);
 }
 
 /* Dark mode needs its own tint: primary-50 is a near-white wash that would

package/src/styles/features/resource-discovery.css

@@ -203,6 +203,19 @@
   color: var(--semiont-color-gray-300);
 }
 
+/* Semantic-fallback caption: explains WHY these results, without competing
+   with them. Quieter than the heading it sits under (SEMANTIC-FALLBACK P3b). */
+.semiont-card__documents-note {
+  margin: -0.25rem 0 0.75rem;
+  font-size: 0.8125rem;
+  font-style: italic;
+  color: var(--semiont-color-gray-600);
+}
+
+[data-theme="dark"] .semiont-card__documents-note {
+  color: var(--semiont-color-gray-400);
+}
+
 .semiont-card__warning {
   padding: 1rem;
   background: var(--semiont-color-yellow-50);

package/src/styles/features/resource-viewer.css

@@ -173,20 +173,12 @@
   color: var(--semiont-text-secondary);
 }
 
-[data-theme="dark"] .semiont-browse-view__content h6 {
-  color: var(--semiont-text-secondary);
-}
-
 .semiont-browse-view__content p {
   margin-bottom: 1em;
   line-height: var(--semiont-leading-relaxed);
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-browse-view__content p {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-browse-view__content ul,
 .semiont-browse-view__content ol {
   margin-bottom: 1em;
@@ -207,10 +199,6 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-browse-view__content li {
-  color: var(--semiont-text-primary);
-}
-
 /* Nested lists */
 .semiont-browse-view__content ul ul,
 .semiont-browse-view__content ol ol,
@@ -324,7 +312,7 @@
 }
 
 [data-theme="dark"] .semiont-browse-view__content tr:nth-child(even) td {
-  background: var(--semiont-color-gray-850, var(--semiont-color-gray-800));
+  background: var(--semiont-color-gray-800);
 }
 
 /* GFM task list checkboxes */
@@ -627,19 +615,11 @@
   margin-bottom: 0.5rem;
 }
 
-[data-theme="dark"] .semiont-page__title {
-  color: var(--semiont-text-primary);
-}
-
 .semiont-page__subtitle {
   color: var(--semiont-text-secondary);
   font-size: 1rem;
 }
 
-[data-theme="dark"] .semiont-page__subtitle {
-  color: var(--semiont-text-secondary);
-}
-
 .semiont-page__reference-notice {
   background-color: var(--semiont-color-blue-50);
   border: 1px solid var(--semiont-color-blue-200);

package/src/styles/features/static-pages.css

@@ -412,8 +412,8 @@
 }
 
 .semiont-static-warning-box {
-  background: var(--semiont-color-warning-50);
-  border-left: 4px solid var(--semiont-color-warning-500);
+  background: var(--semiont-color-amber-50);
+  border-left: 4px solid var(--semiont-color-amber-500);
   border-radius: 0.375rem;
   padding: 1rem 1.25rem;
   margin: 1.5rem 0;
@@ -427,7 +427,7 @@
 
 [data-theme="dark"] .semiont-static-warning-box {
   background: rgba(251, 146, 60, 0.1);
-  border-left-color: var(--semiont-color-warning-400);
+  border-left-color: var(--semiont-color-amber-400);
 }
 
 /* ========================================
@@ -447,27 +447,27 @@
 
 .semiont-static-badge-planned {
   background: rgba(251, 146, 60, 0.1);
-  color: var(--semiont-color-warning-700);
-  border: 1px solid var(--semiont-color-warning-200);
+  color: var(--semiont-color-amber-700);
+  border: 1px solid var(--semiont-color-amber-200);
 }
 
 .semiont-static-badge-active {
   background: rgba(34, 197, 94, 0.1);
-  color: var(--semiont-color-success-700);
-  border: 1px solid var(--semiont-color-success-200);
+  color: var(--semiont-color-green-700);
+  border: 1px solid var(--semiont-color-green-200);
 }
 
 /* Dark mode */
 [data-theme="dark"] .semiont-static-badge-planned {
   background: rgba(251, 146, 60, 0.15);
-  color: var(--semiont-color-warning-400);
-  border-color: var(--semiont-color-warning-600);
+  color: var(--semiont-color-amber-400);
+  border-color: var(--semiont-color-amber-600);
 }
 
 [data-theme="dark"] .semiont-static-badge-active {
   background: rgba(34, 197, 94, 0.15);
-  color: var(--semiont-color-success-400);
-  border-color: var(--semiont-color-success-600);
+  color: var(--semiont-color-green-400);
+  border-color: var(--semiont-color-green-600);
 }
 
 /* ========================================

package/src/styles/motivations/motivation-assessment.css

@@ -246,7 +246,7 @@
 }
 
 [data-theme="dark"] .semiont-assessment-star {
-  color: var(--semiont-color-warning);
+  color: var(--semiont-color-warning-light);
 }
 
 .semiont-assessment-star:hover {
@@ -258,5 +258,5 @@
 }
 
 [data-theme="dark"] .semiont-assessment-star--filled {
-  color: var(--semiont-color-warning);
+  color: var(--semiont-color-warning-light);
 }