@runtypelabs/persona 3.5.2 → 3.7.0

package/src/utils/auto-follow.test.ts

@@ -0,0 +1,110 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  createFollowStateController,
+  getScrollBottomOffset,
+  isElementNearBottom,
+  resolveFollowStateFromScroll,
+  resolveFollowStateFromWheel
+} from "./auto-follow";
+
+describe("auto-follow utilities", () => {
+  it("tracks pause and resume state", () => {
+    const state = createFollowStateController();
+
+    expect(state.isFollowing()).toBe(true);
+    expect(state.pause()).toBe(true);
+    expect(state.isFollowing()).toBe(false);
+    expect(state.pause()).toBe(false);
+    expect(state.resume()).toBe(true);
+    expect(state.isFollowing()).toBe(true);
+  });
+
+  it("computes bottom offset and near-bottom status", () => {
+    const element = {
+      scrollTop: 590,
+      scrollHeight: 1000,
+      clientHeight: 400
+    };
+
+    expect(getScrollBottomOffset(element)).toBe(600);
+    expect(isElementNearBottom(element, 10)).toBe(true);
+    expect(isElementNearBottom({ ...element, scrollTop: 560 }, 10)).toBe(false);
+  });
+
+  it("pauses transcript-style auto-follow on upward scroll immediately", () => {
+    const result = resolveFollowStateFromScroll({
+      following: true,
+      currentScrollTop: 597,
+      lastScrollTop: 600,
+      nearBottom: true,
+      userScrollThreshold: 1,
+      pauseOnUpwardScroll: true,
+      pauseWhenAwayFromBottom: false
+    });
+
+    expect(result.action).toBe("pause");
+  });
+
+  it("resumes event-log-style auto-follow only when scrolling down near bottom", () => {
+    const stayPaused = resolveFollowStateFromScroll({
+      following: false,
+      currentScrollTop: 550,
+      lastScrollTop: 560,
+      nearBottom: true,
+      userScrollThreshold: 1,
+      resumeRequiresDownwardScroll: true
+    });
+    const resume = resolveFollowStateFromScroll({
+      following: false,
+      currentScrollTop: 590,
+      lastScrollTop: 550,
+      nearBottom: true,
+      userScrollThreshold: 1,
+      resumeRequiresDownwardScroll: true
+    });
+
+    expect(stayPaused.action).toBe("none");
+    expect(resume.action).toBe("resume");
+  });
+
+  it("keeps transcript-style auto-follow paused near the bottom until scrolling down", () => {
+    const stayPaused = resolveFollowStateFromScroll({
+      following: false,
+      currentScrollTop: 597,
+      lastScrollTop: 600,
+      nearBottom: true,
+      userScrollThreshold: 1,
+      resumeRequiresDownwardScroll: true
+    });
+    const resume = resolveFollowStateFromScroll({
+      following: false,
+      currentScrollTop: 599,
+      lastScrollTop: 597,
+      nearBottom: true,
+      userScrollThreshold: 1,
+      resumeRequiresDownwardScroll: true
+    });
+
+    expect(stayPaused.action).toBe("none");
+    expect(resume.action).toBe("resume");
+  });
+
+  it("resolves wheel intent for pause and resume", () => {
+    expect(
+      resolveFollowStateFromWheel({
+        following: true,
+        deltaY: -12
+      })
+    ).toBe("pause");
+
+    expect(
+      resolveFollowStateFromWheel({
+        following: false,
+        deltaY: 12,
+        nearBottom: true,
+        resumeWhenNearBottom: true
+      })
+    ).toBe("resume");
+  });
+});

package/src/utils/auto-follow.ts

@@ -0,0 +1,112 @@
+export type FollowStateAction = "none" | "pause" | "resume";
+
+export type FollowStateController = {
+  isFollowing: () => boolean;
+  pause: () => boolean;
+  resume: () => boolean;
+};
+
+export type FollowStateScrollInput = {
+  following: boolean;
+  currentScrollTop: number;
+  lastScrollTop: number;
+  nearBottom: boolean;
+  userScrollThreshold: number;
+  isAutoScrolling?: boolean;
+  pauseOnUpwardScroll?: boolean;
+  pauseWhenAwayFromBottom?: boolean;
+  resumeRequiresDownwardScroll?: boolean;
+};
+
+export type FollowStateWheelInput = {
+  following: boolean;
+  deltaY: number;
+  nearBottom?: boolean;
+  resumeWhenNearBottom?: boolean;
+};
+
+export function createFollowStateController(initiallyFollowing = true): FollowStateController {
+  let following = initiallyFollowing;
+
+  return {
+    isFollowing: () => following,
+    pause: () => {
+      if (!following) return false;
+      following = false;
+      return true;
+    },
+    resume: () => {
+      if (following) return false;
+      following = true;
+      return true;
+    }
+  };
+}
+
+export function getScrollBottomOffset(element: Pick<HTMLElement, "scrollHeight" | "clientHeight">): number {
+  return Math.max(0, element.scrollHeight - element.clientHeight);
+}
+
+export function isElementNearBottom(
+  element: Pick<HTMLElement, "scrollTop" | "scrollHeight" | "clientHeight">,
+  threshold: number
+): boolean {
+  return getScrollBottomOffset(element) - element.scrollTop <= threshold;
+}
+
+export function resolveFollowStateFromScroll(
+  input: FollowStateScrollInput
+): { action: FollowStateAction; delta: number; nextLastScrollTop: number } {
+  const {
+    following,
+    currentScrollTop,
+    lastScrollTop,
+    nearBottom,
+    userScrollThreshold,
+    isAutoScrolling = false,
+    pauseOnUpwardScroll = false,
+    pauseWhenAwayFromBottom = true,
+    resumeRequiresDownwardScroll = false
+  } = input;
+
+  const delta = currentScrollTop - lastScrollTop;
+
+  if (isAutoScrolling || Math.abs(delta) < userScrollThreshold) {
+    return { action: "none", delta, nextLastScrollTop: currentScrollTop };
+  }
+
+  if (!following && nearBottom && (!resumeRequiresDownwardScroll || delta > 0)) {
+    return { action: "resume", delta, nextLastScrollTop: currentScrollTop };
+  }
+
+  if (following && pauseOnUpwardScroll && delta < 0) {
+    return { action: "pause", delta, nextLastScrollTop: currentScrollTop };
+  }
+
+  if (following && pauseWhenAwayFromBottom && !nearBottom) {
+    return { action: "pause", delta, nextLastScrollTop: currentScrollTop };
+  }
+
+  return { action: "none", delta, nextLastScrollTop: currentScrollTop };
+}
+
+export function resolveFollowStateFromWheel(
+  input: FollowStateWheelInput
+): FollowStateAction {
+  const {
+    following,
+    deltaY,
+    nearBottom = false,
+    resumeWhenNearBottom = false
+  } = input;
+
+  if (following && deltaY < 0) {
+    return "pause";
+  }
+
+  if (!following && resumeWhenNearBottom && deltaY > 0 && nearBottom) {
+    return "resume";
+  }
+
+  return "none";
+}

package/src/utils/plugins.ts

@@ -22,7 +22,7 @@ export function accessibilityPlugin(): PersonaThemePlugin {
     },
     cssVariables: {
       '--persona-accessibility-focus-ring':
-        '0 0 0 2px var(--persona-semantic-colors-surface, #fff), 0 0 0 4px var(--persona-semantic-colors-interactive-focus, #1d4ed8)',
+        '0 0 0 2px var(--persona-semantic-colors-surface, #fff), 0 0 0 4px var(--persona-semantic-colors-interactive-focus, #0f0f0f)',
     },
   };
 }

package/src/utils/theme.test.ts

@@ -139,15 +139,16 @@ describe('theme utils', () => {
     expect(cssVars['--persona-md-prose-font-family']).toBe('Georgia, serif');
   });
 
-  it('maps header chrome tokens to dedicated CSS variables with semantic fallbacks', () => {
+  it('maps header chrome tokens to dedicated CSS variables with palette refs', () => {
     const theme = createTheme();
     const cssVars = themeToCssVariables(theme);
 
-    expect(cssVars['--persona-header-icon-bg']).toBe(cssVars['--persona-primary']);
-    expect(cssVars['--persona-header-icon-fg']).toBe(cssVars['--persona-text-inverse']);
-    expect(cssVars['--persona-header-title-fg']).toBe(cssVars['--persona-primary']);
-    expect(cssVars['--persona-header-subtitle-fg']).toBe(cssVars['--persona-text-muted']);
-    expect(cssVars['--persona-header-action-icon-fg']).toBe(cssVars['--persona-muted']);
+    // Default header uses solid primary role: icon-bg=primary.600, icon-fg=primary.50, etc.
+    expect(cssVars['--persona-header-icon-bg']).toBe('#0f0f0f'); // primary.600
+    expect(cssVars['--persona-header-icon-fg']).toBe('#ffffff'); // primary.50
+    expect(cssVars['--persona-header-title-fg']).toBe('#ffffff'); // primary.50
+    expect(cssVars['--persona-header-subtitle-fg']).toBe('#d4d4d4'); // primary.200
+    expect(cssVars['--persona-header-action-icon-fg']).toBe('#d4d4d4'); // primary.200
 
     const custom = createTheme({
       components: {
@@ -172,8 +173,9 @@ describe('theme utils', () => {
     const theme = createTheme();
     const cssVars = themeToCssVariables(theme);
 
-    expect(cssVars['--persona-components-artifact-pane-background']).toBe('#f3f4f6');
-    expect(cssVars['--persona-artifact-toolbar-bg']).toBe('#f3f4f6');
+    // container defaults to gray.50 now (soft gray surfaces role)
+    expect(cssVars['--persona-components-artifact-pane-background']).toBe('#f9fafb');
+    expect(cssVars['--persona-artifact-toolbar-bg']).toBe('#f9fafb');
 
     const surfacePane = createTheme({
       components: {
@@ -216,6 +218,40 @@ describe('theme utils', () => {
     expect(cssVars['--persona-composer-shadow']).toBe('none');
   });
 
+  it('maps scroll-to-bottom component tokens to dedicated CSS variables', () => {
+    const theme = createTheme({
+      components: {
+        scrollToBottom: {
+          background: 'palette.colors.accent.500',
+          foreground: 'palette.colors.gray.50',
+          border: 'palette.colors.gray.900',
+          size: '40px',
+          borderRadius: 'palette.radius.full',
+          shadow: 'palette.shadows.md',
+          padding: '0.5rem 0.875rem',
+          gap: '0.5rem',
+          fontSize: '0.875rem',
+          iconSize: '14px',
+        },
+      },
+    } as any);
+
+    const cssVars = themeToCssVariables(theme);
+
+    expect(cssVars['--persona-scroll-to-bottom-bg']).toBe('#06b6d4');
+    expect(cssVars['--persona-scroll-to-bottom-fg']).toBe('#f9fafb');
+    expect(cssVars['--persona-scroll-to-bottom-border']).toBe('#111827');
+    expect(cssVars['--persona-scroll-to-bottom-size']).toBe('40px');
+    expect(cssVars['--persona-scroll-to-bottom-radius']).toBe('9999px');
+    expect(cssVars['--persona-scroll-to-bottom-shadow']).toBe(
+      '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'
+    );
+    expect(cssVars['--persona-scroll-to-bottom-padding']).toBe('0.5rem 0.875rem');
+    expect(cssVars['--persona-scroll-to-bottom-gap']).toBe('0.5rem');
+    expect(cssVars['--persona-scroll-to-bottom-font-size']).toBe('0.875rem');
+    expect(cssVars['--persona-scroll-to-bottom-icon-size']).toBe('14px');
+  });
+
   it('lets config.toolCall.shadow override theme tool bubble shadow on the root element', () => {
     const el = document.createElement('div');
     applyThemeVariables(el, {

package/src/utils/theme.ts

@@ -16,17 +16,17 @@ type WidgetConfig = PersonaWidgetConfig | AgentWidgetConfig;
 const DARK_PALETTE = {
   colors: {
     primary: {
-      50: '#eff6ff',
-      100: '#dbeafe',
-      200: '#bfdbfe',
-      300: '#93c5fd',
-      400: '#60a5fa',
-      500: '#3b82f6',
-      600: '#2563eb',
-      700: '#1d4ed8',
-      800: '#1e40af',
-      900: '#1e3a8a',
-      950: '#172554',
+      50: '#ffffff',
+      100: '#f5f5f5',
+      200: '#d4d4d4',
+      300: '#a3a3a3',
+      400: '#737373',
+      500: '#171717',
+      600: '#0f0f0f',
+      700: '#0a0a0a',
+      800: '#050505',
+      900: '#030303',
+      950: '#000000',
     },
     secondary: {
       50: '#f5f3ff',

package/src/utils/tokens.ts

@@ -12,17 +12,17 @@ import type {
 export const DEFAULT_PALETTE = {
   colors: {
     primary: {
-      50: '#eff6ff',
-      100: '#dbeafe',
-      200: '#bfdbfe',
-      300: '#93c5fd',
-      400: '#60a5fa',
-      500: '#3b82f6',
-      600: '#2563eb',
-      700: '#1d4ed8',
-      800: '#1e40af',
-      900: '#1e3a8a',
-      950: '#172554',
+      50: '#ffffff',
+      100: '#f5f5f5',
+      200: '#d4d4d4',
+      300: '#a3a3a3',
+      400: '#737373',
+      500: '#171717',
+      600: '#0f0f0f',
+      700: '#0a0a0a',
+      800: '#050505',
+      900: '#030303',
+      950: '#000000',
     },
     secondary: {
       50: '#f5f3ff',
@@ -99,6 +99,19 @@ export const DEFAULT_PALETTE = {
       800: '#991b1b',
       900: '#7f1d1d',
     },
+    info: {
+      50: '#eff6ff',
+      100: '#dbeafe',
+      200: '#bfdbfe',
+      300: '#93c5fd',
+      400: '#60a5fa',
+      500: '#3b82f6',
+      600: '#2563eb',
+      700: '#1d4ed8',
+      800: '#1e40af',
+      900: '#1e3a8a',
+      950: '#172554',
+    },
   },
   spacing: {
     0: '0px',
@@ -176,28 +189,33 @@ export const DEFAULT_PALETTE = {
 export const DEFAULT_SEMANTIC: SemanticTokens = {
   colors: {
     primary: 'palette.colors.primary.500',
-    secondary: 'palette.colors.gray.500',
+    secondary: 'palette.colors.secondary.500',
+    // Links/Focus role — solid primary
     accent: 'palette.colors.primary.600',
+    // Surfaces role — soft gray
     surface: 'palette.colors.gray.50',
     background: 'palette.colors.gray.50',
-    container: 'palette.colors.gray.100',
+    container: 'palette.colors.gray.50',
     text: 'palette.colors.gray.900',
     textMuted: 'palette.colors.gray.500',
     textInverse: 'palette.colors.gray.50',
+    // Borders role — soft gray
     border: 'palette.colors.gray.200',
     divider: 'palette.colors.gray.200',
     interactive: {
-      default: 'palette.colors.primary.500',
-      hover: 'palette.colors.primary.600',
-      focus: 'palette.colors.primary.700',
-      active: 'palette.colors.primary.800',
+      // Primary Actions role — solid primary
+      default: 'palette.colors.primary.600',
+      hover: 'palette.colors.primary.700',
+      // Links/Focus role — solid primary
+      focus: 'palette.colors.primary.600',
+      active: 'palette.colors.primary.600',
       disabled: 'palette.colors.gray.300',
     },
     feedback: {
       success: 'palette.colors.success.500',
       warning: 'palette.colors.warning.500',
       error: 'palette.colors.error.500',
-      info: 'palette.colors.primary.500',
+      info: 'palette.colors.info.500',
     },
   },
   spacing: {
@@ -219,14 +237,15 @@ export const DEFAULT_SEMANTIC: SemanticTokens = {
 export const DEFAULT_COMPONENTS: ComponentTokens = {
   button: {
     primary: {
-      background: 'semantic.colors.primary',
-      foreground: 'semantic.colors.textInverse',
+      // Primary Actions role — solid primary
+      background: 'palette.colors.primary.500',
+      foreground: 'palette.colors.primary.50',
       borderRadius: 'palette.radius.lg',
       padding: 'semantic.spacing.md',
     },
     secondary: {
       background: 'semantic.colors.surface',
-      foreground: 'semantic.colors.text',
+      foreground: 'semantic.colors.secondary',
       borderRadius: 'palette.radius.lg',
       padding: 'semantic.spacing.md',
     },
@@ -238,16 +257,20 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
     },
   },
   input: {
-    background: 'semantic.colors.surface',
-    placeholder: 'semantic.colors.textMuted',
+    // Input role — soft gray
+    background: 'palette.colors.gray.50',
+    placeholder: 'palette.colors.gray.400',
     borderRadius: 'palette.radius.lg',
     padding: 'semantic.spacing.md',
     focus: {
-      border: 'semantic.colors.interactive.focus',
-      ring: 'semantic.colors.interactive.focus',
+      border: 'palette.colors.gray.400',
+      ring: 'palette.colors.gray.400',
     },
   },
   launcher: {
+    background: 'palette.colors.primary.500',
+    foreground: 'palette.colors.primary.50',
+    border: 'palette.colors.gray.200',
     size: '60px',
     iconSize: '28px',
     borderRadius: 'palette.radius.full',
@@ -262,28 +285,31 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
     shadow: 'palette.shadows.xl',
   },
   header: {
-    background: 'semantic.colors.surface',
-    border: 'semantic.colors.border',
+    // Header role — solid primary
+    background: 'palette.colors.primary.500',
+    border: 'palette.colors.primary.600',
     borderRadius: 'palette.radius.xl palette.radius.xl 0 0',
     padding: 'semantic.spacing.md',
-    iconBackground: 'semantic.colors.primary',
-    iconForeground: 'semantic.colors.textInverse',
-    titleForeground: 'semantic.colors.primary',
-    subtitleForeground: 'semantic.colors.textMuted',
-    actionIconForeground: 'semantic.colors.textMuted',
+    iconBackground: 'palette.colors.primary.600',
+    iconForeground: 'palette.colors.primary.50',
+    titleForeground: 'palette.colors.primary.50',
+    subtitleForeground: 'palette.colors.primary.200',
+    actionIconForeground: 'palette.colors.primary.200',
   },
   message: {
     user: {
-      background: 'semantic.colors.primary',
-      text: 'semantic.colors.textInverse',
+      // User Messages role — solid primary
+      background: 'palette.colors.primary.500',
+      text: 'palette.colors.primary.50',
       borderRadius: 'palette.radius.lg',
       shadow: 'palette.shadows.sm',
     },
     assistant: {
-      background: 'semantic.colors.container',
-      text: 'semantic.colors.text',
+      // Assistant Messages role — soft gray
+      background: 'palette.colors.gray.50',
+      text: 'palette.colors.gray.900',
       borderRadius: 'palette.radius.lg',
-      border: 'semantic.colors.border',
+      border: 'palette.colors.gray.200',
       shadow: 'palette.shadows.sm',
     },
   },
@@ -298,11 +324,12 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
   },
   markdown: {
     inlineCode: {
-      background: 'semantic.colors.container',
-      foreground: 'semantic.colors.text',
+      background: 'palette.colors.gray.50',
+      foreground: 'palette.colors.gray.900',
     },
     link: {
-      foreground: 'semantic.colors.accent',
+      // Links/Focus role — solid primary
+      foreground: 'palette.colors.primary.600',
     },
     prose: {
       fontFamily: 'inherit',
@@ -347,6 +374,18 @@ export const DEFAULT_COMPONENTS: ComponentTokens = {
       border: 'palette.colors.gray.200',
     },
   },
+  scrollToBottom: {
+    background: 'components.button.primary.background',
+    foreground: 'components.button.primary.foreground',
+    border: 'semantic.colors.primary',
+    size: '40px',
+    borderRadius: 'palette.radius.full',
+    shadow: 'palette.shadows.sm',
+    padding: '0.5rem 0.875rem',
+    gap: '0.5rem',
+    fontSize: '0.875rem',
+    iconSize: '14px',
+  },
   artifact: {
     pane: {
       background: 'semantic.colors.container',
@@ -629,10 +668,26 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
   cssVars['--persona-radius-md'] = cssVars['--persona-palette-radius-md'] ?? '0.375rem';
   cssVars['--persona-radius-lg'] = cssVars['--persona-palette-radius-lg'] ?? '0.5rem';
   cssVars['--persona-radius-xl'] = cssVars['--persona-palette-radius-xl'] ?? '0.75rem';
+  cssVars['--persona-radius-full'] = cssVars['--persona-palette-radius-full'] ?? '9999px';
   cssVars['--persona-launcher-radius'] =
     cssVars['--persona-components-launcher-borderRadius'] ??
     cssVars['--persona-palette-radius-full'] ??
     '9999px';
+  cssVars['--persona-launcher-bg'] =
+    cssVars['--persona-components-launcher-background'] ??
+    cssVars['--persona-primary'];
+  cssVars['--persona-launcher-fg'] =
+    cssVars['--persona-components-launcher-foreground'] ??
+    cssVars['--persona-text-inverse'];
+  cssVars['--persona-launcher-border'] =
+    cssVars['--persona-components-launcher-border'] ??
+    cssVars['--persona-border'];
+  cssVars['--persona-button-primary-bg'] =
+    cssVars['--persona-components-button-primary-background'] ??
+    cssVars['--persona-primary'];
+  cssVars['--persona-button-primary-fg'] =
+    cssVars['--persona-components-button-primary-foreground'] ??
+    cssVars['--persona-text-inverse'];
   cssVars['--persona-button-radius'] =
     cssVars['--persona-components-button-primary-borderRadius'] ??
     cssVars['--persona-palette-radius-full'] ??
@@ -681,6 +736,11 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
   if (headerTokens?.shadow) cssVars['--persona-header-shadow'] = headerTokens.shadow;
   if (headerTokens?.borderBottom) cssVars['--persona-header-border-bottom'] = headerTokens.borderBottom;
 
+  cssVars['--persona-input-background'] =
+    cssVars['--persona-components-input-background'] ?? cssVars['--persona-surface'];
+  cssVars['--persona-input-placeholder'] =
+    cssVars['--persona-components-input-placeholder'] ?? cssVars['--persona-text-muted'];
+
   cssVars['--persona-message-user-bg'] =
     cssVars['--persona-components-message-user-background'] ?? cssVars['--persona-accent'];
   cssVars['--persona-message-user-text'] =
@@ -695,6 +755,42 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
     cssVars['--persona-components-message-assistant-border'] ?? cssVars['--persona-border'];
   cssVars['--persona-message-assistant-shadow'] =
     cssVars['--persona-components-message-assistant-shadow'] ?? '0 1px 2px 0 rgb(0 0 0 / 0.05)';
+  cssVars['--persona-scroll-to-bottom-bg'] =
+    cssVars['--persona-components-scrollToBottom-background'] ??
+    cssVars['--persona-button-primary-bg'] ??
+    cssVars['--persona-accent'];
+  cssVars['--persona-scroll-to-bottom-fg'] =
+    cssVars['--persona-components-scrollToBottom-foreground'] ??
+    cssVars['--persona-button-primary-fg'] ??
+    cssVars['--persona-text-inverse'];
+  cssVars['--persona-scroll-to-bottom-border'] =
+    cssVars['--persona-components-scrollToBottom-border'] ??
+    cssVars['--persona-primary'];
+  cssVars['--persona-scroll-to-bottom-size'] =
+    cssVars['--persona-components-scrollToBottom-size'] ??
+    '40px';
+  cssVars['--persona-scroll-to-bottom-radius'] =
+    cssVars['--persona-components-scrollToBottom-borderRadius'] ??
+    cssVars['--persona-button-radius'] ??
+    cssVars['--persona-radius-full'] ??
+    '9999px';
+  cssVars['--persona-scroll-to-bottom-shadow'] =
+    cssVars['--persona-components-scrollToBottom-shadow'] ??
+    cssVars['--persona-palette-shadows-sm'] ??
+    '0 1px 2px 0 rgb(0 0 0 / 0.05)';
+  cssVars['--persona-scroll-to-bottom-padding'] =
+    cssVars['--persona-components-scrollToBottom-padding'] ??
+    '0.5rem 0.875rem';
+  cssVars['--persona-scroll-to-bottom-gap'] =
+    cssVars['--persona-components-scrollToBottom-gap'] ??
+    '0.5rem';
+  cssVars['--persona-scroll-to-bottom-font-size'] =
+    cssVars['--persona-components-scrollToBottom-fontSize'] ??
+    cssVars['--persona-palette-typography-fontSize-sm'] ??
+    '0.875rem';
+  cssVars['--persona-scroll-to-bottom-icon-size'] =
+    cssVars['--persona-components-scrollToBottom-iconSize'] ??
+    '14px';
 
   cssVars['--persona-tool-bubble-shadow'] =
     cssVars['--persona-components-toolBubble-shadow'] ?? '0 5px 15px rgba(15, 23, 42, 0.08)';
@@ -711,7 +807,7 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
   cssVars['--persona-md-link-color'] =
     cssVars['--persona-components-markdown-link-foreground'] ??
     cssVars['--persona-accent'] ??
-    '#3b82f6';
+    '#0f0f0f';
 
   const mdH1Size = cssVars['--persona-components-markdown-heading-h1-fontSize'];
   if (mdH1Size) cssVars['--persona-md-h1-size'] = mdH1Size;

package/widget.css

@@ -1 +0,0 @@
-@import "./src/widget.css";