@runtypelabs/persona 4.17.1 → 4.18.0

package/src/styles/widget-styles.test.ts

@@ -228,6 +228,71 @@ describe("composer spacing styles", () => {
   });
 });
 
+describe("header control styles", () => {
+  it("sizes and strokes the glyph from the header control tokens", () => {
+    const start = widgetCss.indexOf(".persona-header-control--glyph > svg {");
+    const rule = widgetCss.slice(start, widgetCss.indexOf("\n}", start));
+
+    expect(start).toBeGreaterThan(-1);
+    expect(rule).toContain(
+      "width: var(--persona-header-control-icon-size, 20px)",
+    );
+    // CSS presentation beats the SVG stroke-width attribute, which stays as
+    // the no-CSS fallback.
+    expect(rule).toContain(
+      "stroke-width: var(--persona-components-header-controlStrokeWidth, 1.5)",
+    );
+  });
+
+  it("thins the sparse glyph stroke by the same 0.7 the JS attributes use", () => {
+    const start = widgetCss.indexOf(".persona-header-control--sparse > svg {");
+    const rule = widgetCss.slice(start, widgetCss.indexOf("\n}", start));
+
+    expect(start).toBeGreaterThan(-1);
+    expect(rule).toContain(
+      "width: calc(var(--persona-header-control-icon-size, 20px) * 1.4)",
+    );
+    // 0.7 x the 1.5 default is 1.05, the stroke the close X has always
+    // rendered at; SPARSE_GLYPHS in header-parts.ts carries the same pair.
+    expect(rule).toContain(
+      "stroke-width: calc(var(--persona-components-header-controlStrokeWidth, 1.5) * 0.7)",
+    );
+
+    // The sparse rule must stay after the glyph rule: same specificity, so
+    // source order is the only thing that lets it win.
+    expect(start).toBeGreaterThan(
+      widgetCss.indexOf(".persona-header-control--glyph > svg {"),
+    );
+  });
+});
+
+describe("launcher icon styles", () => {
+  it("strokes every launcher glyph from the stroke token, surface-neutrally", () => {
+    // Locate the rule by its declaration and read the SHIPPED selector back
+    // out of the file, so a rescope cannot slip past a hardcoded expectation.
+    const declaration =
+      "stroke-width: var(--persona-components-launcher-iconStrokeWidth, 1.5)";
+    const declarationAt = widgetCss.indexOf(declaration);
+    expect(declarationAt).toBeGreaterThan(-1);
+    const selectorStart = widgetCss.lastIndexOf("}", declarationAt) + 1;
+    const selector = widgetCss
+      .slice(selectorStart, widgetCss.indexOf("{", selectorStart))
+      .replace(/\/\*[\s\S]*?\*\//g, "")
+      .trim();
+
+    // One pill, one line weight: the agent icon and the call-to-action arrow
+    // both follow the token.
+    expect(selector).toContain('[data-role="launcher-icon"] > svg');
+    expect(selector).toContain(
+      '[data-role="launcher-call-to-action-icon"] > svg',
+    );
+    // Both launcher surfaces render under [data-persona-root]; naming either
+    // surface here would change stroke weight between the two bundles.
+    expect(selector).not.toContain("data-persona-launcher-critical");
+    expect(selector).not.toContain("persona-widget-container");
+  });
+});
+
 describe("transcript layout styles", () => {
   it("drops the empty messages wrapper from the flex flow", () => {
     // A zero-height flex child still triggers the body's gap, so an empty
@@ -332,6 +397,21 @@ describe("plugin welcome styles", () => {
       ".persona-widget-body.persona-welcome-overlay-active {\n  overflow: hidden;\n}",
     );
   });
+
+  it("takes the transcript out of layout so nothing scrolls under the overlay", () => {
+    // The rule above cannot win against the inline `overflow-y: auto` that
+    // fill/fullscreen layouts stamp on the body, so the transcript stayed
+    // scrollable underneath an `inset: 0` box whose containing block scrolls
+    // with it: home and the transcript then read as one column, with no
+    // composer, and scrolling past the overlay left the transcript bare.
+    const selector =
+      ".persona-widget-body.persona-welcome-overlay-active\n  > :not([data-persona-welcome-overlay]) {";
+    const start = widgetCss.indexOf(selector);
+    const rule = widgetCss.slice(start, widgetCss.indexOf("\n}", start));
+
+    expect(start).toBeGreaterThan(-1);
+    expect(rule).toContain("display: none !important");
+  });
 });
 
 describe("scrollbar policy styles", () => {
@@ -380,3 +460,56 @@ describe("scrollbar policy styles", () => {
     );
   });
 });
+
+describe("message action button styles", () => {
+  it("rounds the hit target on the medium radius, not the near-square small one", () => {
+    const start = widgetCss.indexOf(".persona-message-action-btn {");
+    const rule = widgetCss.slice(start, widgetCss.indexOf("\n}", start));
+
+    expect(start).toBeGreaterThan(-1);
+    expect(rule).toContain(
+      "border-radius: var(--persona-message-action-radius, var(--persona-radius-md, 0.375rem))",
+    );
+    expect(rule).not.toContain("--persona-radius-sm");
+  });
+
+  it("hovers with the scheme-aware ghost wash and text color, not surface or brand", () => {
+    const start = widgetCss.indexOf(".persona-message-action-btn:hover {");
+    const rule = widgetCss.slice(start, widgetCss.indexOf("\n}", start));
+
+    expect(start).toBeGreaterThan(-1);
+    expect(rule).toContain(
+      "background-color: var(--persona-message-action-hover-bg, var(--persona-button-ghost-hover-bg, rgba(0, 0, 0, 0.05)))",
+    );
+    expect(rule).toContain(
+      "color: var(--persona-message-action-hover-fg, var(--persona-text, #111827))",
+    );
+    // A surface token is nearly invisible on light and paints a darker box on
+    // dark; the brand color is never an icon-hover color.
+    expect(rule).not.toContain("--persona-container");
+    expect(rule).not.toContain("--persona-primary");
+  });
+});
+
+describe("conversation-open skeleton styles", () => {
+  it("follows each role's real bubble radius chain", () => {
+    const leading = ".persona-conversation-loading-bubble {";
+    const start = widgetCss.indexOf(leading);
+    const rule = widgetCss.slice(start, widgetCss.indexOf("\n}", start));
+    expect(start).toBeGreaterThan(-1);
+    expect(rule).toContain(
+      "border-radius: var(--persona-message-assistant-radius, var(--persona-radius-lg, 0.5rem))",
+    );
+
+    const trailing = ".persona-conversation-loading-bubble--trailing {";
+    const trailingStart = widgetCss.indexOf(trailing);
+    const trailingRule = widgetCss.slice(
+      trailingStart,
+      widgetCss.indexOf("\n}", trailingStart),
+    );
+    expect(trailingStart).toBeGreaterThan(-1);
+    expect(trailingRule).toContain(
+      "border-radius: var(--persona-message-user-radius, var(--persona-radius-lg, 0.5rem))",
+    );
+  });
+});

package/src/styles/widget.css

@@ -325,6 +325,16 @@
   display: none;
 }
 
+/* Launcher glyph weight, agent icon and call-to-action arrow alike: one pill
+   must never carry two line weights. CSS wins over the SVG stroke-width
+   attribute, which stays the no-CSS fallback. Both the critical launcher
+   bundle and the full widget render this markup, so one rule keeps the two
+   surfaces identical. */
+[data-persona-root] [data-role="launcher-icon"] > svg,
+[data-persona-root] [data-role="launcher-call-to-action-icon"] > svg {
+  stroke-width: var(--persona-components-launcher-iconStrokeWidth, 1.5);
+}
+
 /* An empty transcript still counts as a flex child, so the body's gap
    inserts phantom space below the welcome and fakes scrollable height. */
 .persona-widget-messages:empty {
@@ -957,6 +967,16 @@
   overflow: hidden;
 }
 
+/* The overlay is absolute inside the scroll body, so anything left scrollable
+   underneath strands it at the content origin instead of the viewport (the
+   body carries an inline `overflow-y: auto` in fill/fullscreen layouts, which
+   outranks the rule above). Hiding the transcript siblings leaves the body
+   with nothing to scroll, so the overlay stays over the visible area. */
+.persona-widget-body.persona-welcome-overlay-active
+  > :not([data-persona-welcome-overlay]) {
+  display: none !important;
+}
+
 /* Hero: auto block margins center the surface in the empty conversation
    without `justify-content`, which would make overflowing content
    unreachable in the scroll body. */
@@ -1016,6 +1036,10 @@
   background-color: var(--persona-surface, #ffffff);
 }
 
+.persona-bg-persona-launcher {
+  background-color: var(--persona-launcher-bg, var(--persona-surface, #ffffff));
+}
+
 .persona-bg-persona-container {
   background-color: var(--persona-container, #f8fafc);
 }
@@ -1052,6 +1076,14 @@
   color: var(--persona-muted, #6b7280);
 }
 
+.persona-text-persona-launcher {
+  color: var(--persona-launcher-fg, var(--persona-primary, #171717));
+}
+
+.persona-text-persona-launcher-muted {
+  color: var(--persona-launcher-fg-muted, var(--persona-muted, #6b7280));
+}
+
 .persona-text-white {
   color: #ffffff;
 }
@@ -1783,12 +1815,12 @@
 .persona-control-tooltip {
   position: fixed;
   box-sizing: border-box;
-  max-width: min(320px, calc(100vw - 16px));
+  max-width: var(--persona-tooltip-max-width, min(320px, calc(100vw - 16px)));
   background-color: var(--persona-tooltip-background, #111827);
   color: var(--persona-tooltip-foreground, #ffffff);
-  padding: 6px 12px;
-  border-radius: var(--persona-radius-sm, 0.125rem);
-  font-size: 12px;
+  padding: var(--persona-tooltip-padding, 6px 12px);
+  border-radius: var(--persona-tooltip-radius, var(--persona-radius-sm, 0.125rem));
+  font-size: var(--persona-tooltip-font-size, 12px);
   line-height: 1.35;
   white-space: normal;
   overflow-wrap: anywhere;
@@ -1803,8 +1835,16 @@
   opacity: 0;
 }
 
+/* Trailing shortcut hint, e.g. a key combo after the label. */
+.persona-control-tooltip__hint {
+  margin-left: 6px;
+  color: var(--persona-tooltip-hint-fg, rgba(255, 255, 255, 0.55));
+  white-space: nowrap;
+}
+
 .persona-control-tooltip__arrow {
   position: absolute;
+  display: var(--persona-tooltip-arrow-display, block);
   left: var(--persona-tooltip-arrow-x, 50%);
   width: 8px;
   height: 8px;
@@ -1827,6 +1867,44 @@
   justify-content: center;
 }
 
+/* Shared header control box: close, clear chat, trailing actions, and the
+   Messages toggle. A per-control config key (`launcher.closeButtonSize`,
+   `launcher.clearChat.size`) writes inline styles, which win. */
+.persona-header-control {
+  width: var(--persona-header-control-size, 32px);
+  height: var(--persona-header-control-size, 32px);
+  flex-shrink: 0;
+  /* UA button padding would eat into the box and crush the glyph; a configured
+     paddingX/Y is inline and still wins. */
+  padding: 0;
+}
+
+.persona-header-control--glyph > svg {
+  width: var(--persona-header-control-icon-size, 20px);
+  height: var(--persona-header-control-icon-size, 20px);
+  /* Presentation wins over the SVG stroke-width attribute, which stays as the
+     no-CSS fallback. Unitless, straight off the theme token. */
+  stroke-width: var(--persona-components-header-controlStrokeWidth, 1.5);
+}
+
+/* Sparse-viewBox glyphs (X) need more box to match the visible extent of their
+   siblings, and the same factor thins the stroke so the weight still matches.
+   Multipliers mirror SPARSE_GLYPHS in header-parts.ts. */
+.persona-header-control--sparse > svg {
+  width: calc(var(--persona-header-control-icon-size, 20px) * 1.4);
+  height: calc(var(--persona-header-control-icon-size, 20px) * 1.4);
+  stroke-width: calc(var(--persona-components-header-controlStrokeWidth, 1.5) * 0.7);
+}
+
+/* A smaller controlSize must never shrink a touch target below 40px. An
+   explicit per-control size is inline, so it opts out of this floor. */
+@media (pointer: coarse) {
+  .persona-header-control {
+    min-width: 40px;
+    min-height: 40px;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .persona-control-tooltip {
     transition: none;
@@ -1849,6 +1927,91 @@
   animation: persona-typing 1s infinite;
 }
 
+/* Conversation-open stand-in: transcript skeleton shown while a conversation
+   selected from the Messages list is fetched. The container carries the
+   transcript's centered column so custom renderers land where messages will. */
+.persona-conversation-loading {
+  width: 100%;
+  max-width: var(--persona-content-max-width, 768px);
+  margin: 0 auto;
+}
+
+.persona-conversation-loading-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 20px;
+}
+
+/* Leading bubbles stand in for assistant messages, trailing for user ones,
+   so each follows its role's real radius chain. */
+.persona-conversation-loading-bubble {
+  height: 44px;
+  border-radius: var(--persona-message-assistant-radius, var(--persona-radius-lg, 0.5rem));
+  background: var(--persona-divider, var(--persona-border, #e5e7eb));
+  align-self: flex-start;
+  animation: persona-conversation-loading-pulse 1400ms ease-in-out infinite;
+}
+
+.persona-conversation-loading-bubble--trailing {
+  align-self: flex-end;
+  border-radius: var(--persona-message-user-radius, var(--persona-radius-lg, 0.5rem));
+}
+
+@keyframes persona-conversation-loading-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.55;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .persona-conversation-loading-bubble {
+    animation: none;
+  }
+}
+
+/* Failed conversation-open surface. The container carries the transcript
+   column; the body classes style the default block only, so a plugin's
+   renderHistoryOpenError content starts from a clean slate. */
+.persona-conversation-loading-error {
+  width: 100%;
+  max-width: var(--persona-content-max-width, 768px);
+  margin: 0 auto;
+}
+
+.persona-conversation-loading-error-body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 20px;
+  color: var(--persona-text-muted, #6b7280);
+}
+
+.persona-conversation-loading-error-title {
+  margin: 0;
+}
+
+.persona-conversation-loading-error-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.persona-conversation-loading-error-action {
+  padding: 8px 14px;
+  border: 1px solid var(--persona-divider, var(--persona-border, #e5e7eb));
+  border-radius: var(--persona-radius-md, 8px);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
 .persona-space-x-1 > * + * {
   margin-left: 0.25rem;
 }
@@ -2675,16 +2838,18 @@
   height: 28px;
   padding: 0;
   border: none;
-  border-radius: var(--persona-radius-sm, 0.125rem);
+  border-radius: var(--persona-message-action-radius, var(--persona-radius-md, 0.375rem));
   background-color: transparent;
   color: var(--persona-muted, #6b7280);
   cursor: pointer;
   transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
 }
 
+/* Hover reads the shared ghost wash (scheme-aware) and moves the icon toward
+   text, never a surface fill or the brand color. */
 .persona-message-action-btn:hover {
-  background-color: var(--persona-container, #f8fafc);
-  color: var(--persona-primary, #111827);
+  background-color: var(--persona-message-action-hover-bg, var(--persona-button-ghost-hover-bg, rgba(0, 0, 0, 0.05)));
+  color: var(--persona-message-action-hover-fg, var(--persona-text, #111827));
 }
 
 .persona-message-action-btn:active {
@@ -3406,6 +3571,42 @@
   gap: var(--persona-artifact-split-gap, 0.5rem);
 }
 
+/* Split button: one bordered control, two invocable halves, internal hairline
+   divider (Primer/Fluent anatomy). The wrap paints border, surface, and radius
+   once; the halves stay borderless and transparent, with inner radii carved
+   1px inside the wrap so hover fills never poke past the rounded corners. The
+   half selectors carry a `button.` tag so they outrank context skins' rest
+   rules (0,3,1 vs 0,3,0) while context hover rules (0,4,0) still win. */
+[data-persona-root] .persona-split-btn {
+  --persona-split-radius: var(--persona-radius-md, 0.375rem);
+  position: relative;
+  display: inline-flex;
+  align-items: stretch;
+  border: 1px solid var(--persona-border, #e5e7eb);
+  border-radius: var(--persona-split-radius);
+  background: var(--persona-surface, #ffffff);
+}
+
+[data-persona-root] .persona-split-btn > button.persona-split-btn-primary,
+[data-persona-root] .persona-split-btn > button.persona-split-btn-chevron {
+  border: 0;
+  background: transparent;
+}
+
+[data-persona-root] .persona-split-btn > button.persona-split-btn-primary {
+  border-radius: calc(var(--persona-split-radius) - 1px) 0 0 calc(var(--persona-split-radius) - 1px);
+}
+
+[data-persona-root] .persona-split-btn > button.persona-split-btn-chevron {
+  border-left: 1px solid var(--persona-split-divider, var(--persona-border, #e5e7eb));
+  border-radius: 0 calc(var(--persona-split-radius) - 1px) calc(var(--persona-split-radius) - 1px) 0;
+}
+
+[data-persona-root] .persona-split-btn > button.persona-split-btn-primary:where(:hover),
+[data-persona-root] .persona-split-btn > button.persona-split-btn-chevron:where(:hover) {
+  background: var(--persona-icon-btn-hover-bg, var(--persona-container, #f3f4f6));
+}
+
 /* Document toolbar preset: optional layout vars: --persona-artifact-doc-toolbar-icon-color, etc. */
 /* Document-toolbar icon/copy button styling is shared by the artifact pane's
    document preset and the inline chrome actions cluster, so both surfaces read
@@ -3435,6 +3636,7 @@
 [data-persona-root] .persona-artifact-inline-chrome-actions .persona-artifact-doc-icon-btn[aria-pressed="true"] {
   background: var(--persona-artifact-doc-toggle-active-bg, var(--persona-icon-btn-active-bg, var(--persona-container, #f3f4f6)));
   border-color: var(--persona-artifact-doc-toggle-active-border, var(--persona-icon-btn-active-border, var(--persona-border, #e5e7eb)));
+  color: var(--persona-artifact-doc-toggle-active-color, var(--persona-artifact-doc-toolbar-icon-color, var(--persona-text, #111827)));
 }
 
 [data-persona-root] .persona-artifact-toolbar-document .persona-artifact-doc-copy-btn,
@@ -3457,6 +3659,16 @@
   background: var(--persona-artifact-toolbar-icon-hover-bg, var(--persona-icon-btn-hover-bg, var(--persona-container, #f3f4f6)));
 }
 
+/* Copy split button inside the document toolbar: the wrap takes over the copy
+   pill's themed border/background/radius; the halves fall through to the base
+   split-btn rules above, which outrank these context rest rules by tag. */
+[data-persona-root] .persona-artifact-toolbar-document .persona-split-btn,
+[data-persona-root] .persona-artifact-inline-chrome-actions .persona-split-btn {
+  --persona-split-radius: var(--persona-artifact-toolbar-copy-radius, var(--persona-radius-md, 0.375rem));
+  border: var(--persona-artifact-toolbar-copy-border, 1px solid var(--persona-border, #e5e7eb));
+  background: var(--persona-artifact-toolbar-copy-bg, var(--persona-surface, #ffffff));
+}
+
 
 /* Artifact tab theming */
 [data-persona-root] .persona-artifact-tab {
@@ -3745,6 +3957,9 @@
   /* Inset ring instead of a border so documentToolbarToggleActiveBorderColor
      still applies inside the borderless segment (transparent by default). */
   box-shadow: inset 0 0 0 1px var(--persona-artifact-doc-toggle-active-border, transparent);
+  /* Survives the @supports thumb override below, which resets only the
+     background and ring; the active glyph keeps this color either way. */
+  color: var(--persona-artifact-doc-toggle-active-color, var(--persona-artifact-doc-toolbar-icon-color, var(--persona-text, #111827)));
 }
 
 /* Sliding selection thumb: a container ::before that translates between the
@@ -3850,7 +4065,9 @@
   margin: 0.25rem 0;
 }
 
-/* Draggable split handle (desktop split only; hidden in drawer / narrow host / small viewport) */
+/* Draggable split handles: the artifact seam (desktop split only; hidden in
+   drawer / narrow host / small viewport) and the docked Messages rail's edge. */
+[data-persona-root] .persona-rail-resizer,
 [data-persona-root] .persona-artifact-split-handle {
   width: 6px;
   flex-shrink: 0;
@@ -3864,6 +4081,8 @@
   box-sizing: border-box;
 }
 
+[data-persona-root] .persona-rail-resizer:hover,
+[data-persona-root] .persona-rail-resizer:focus-visible,
 [data-persona-root] .persona-artifact-split-handle:hover,
 [data-persona-root] .persona-artifact-split-handle:focus-visible {
   background: color-mix(in srgb, var(--persona-border, #e5e7eb) 55%, transparent);

package/src/theme-editor/preview-utils.test.ts

@@ -43,6 +43,25 @@ describe("theme editor preview demo data", () => {
     );
   });
 
+  it("enables the history feature for the messages scene", () => {
+    const config = buildPreviewConfig({ scene: "messages" });
+
+    expect(config.features?.history?.enabled).toBe(true);
+    expect(config.features?.history?.presentation).toBe("panel");
+    // A transcript still sits behind the Messages surface.
+    expect(config.initialMessages?.length).toBeGreaterThan(0);
+  });
+
+  it("keeps an explicit history presentation in the messages scene", () => {
+    const config = buildPreviewConfig({
+      scene: "messages",
+      config: { features: { history: { enabled: false, presentation: "rail" } } },
+    });
+
+    expect(config.features?.history?.enabled).toBe(true);
+    expect(config.features?.history?.presentation).toBe("rail");
+  });
+
   it("seeds tool call preview messages when advanced tool display modes are enabled", () => {
     const config = buildPreviewConfig({
       scene: "conversation",

package/src/theme-editor/preview-utils.ts

@@ -200,7 +200,8 @@ export type PreviewScene =
   | 'conversation'
   | 'follow-ups'
   | 'minimized'
-  | 'artifact';
+  | 'artifact'
+  | 'messages';
 
 export type PreviewTranscriptEntryPreset =
   | 'user-message'
@@ -660,6 +661,19 @@ export function applySceneConfig(
   if (scene === 'artifact') {
     config.features = { ...config.features, artifacts: { ...config.features?.artifacts, enabled: true } };
   }
+  if (scene === 'messages') {
+    // The host wires a provider (setHistoryProviderFactory) and opens the view
+    // after mount; without one the widget hides its history chrome and the
+    // scene degrades to a plain conversation.
+    config.features = {
+      ...config.features,
+      history: {
+        presentation: 'panel',
+        ...config.features?.history,
+        enabled: true,
+      },
+    };
+  }
   return config;
 }
 

package/src/theme-editor/preview.ts

@@ -308,8 +308,14 @@ export function createThemePreview(
         if (isMinimized) controller.close();
       }
 
-      // Inject artifacts if needed
       const scene = options.scene ?? 'conversation';
+      // No-op without a history provider (see applySceneConfig): the host
+      // registers one via setHistoryProviderFactory before mounting.
+      if (scene === 'messages') {
+        for (const c of controllers) void c.showHistory({ focus: false });
+      }
+
+      // Inject artifacts if needed
       if (scene === 'artifact' || options.config?.features?.artifacts?.enabled) {
         for (const c of controllers) {
           c.upsertArtifact({

package/src/theme-editor/role-mappings.ts

@@ -52,6 +52,9 @@ export const ROLE_HEADER: RoleAssignmentOptions = {
   intensities: ROLE_INTENSITIES,
   targets: [
     { path: 'components.header.background', kind: 'background' },
+    // Anchor of the widget's derivation; the explicit keys below still win,
+    // so role themes keep their exact per-key shades.
+    { path: 'components.header.foreground', kind: 'foreground' },
     { path: 'components.header.border', kind: 'border' },
     { path: 'components.header.iconBackground', kind: 'accent' },
     { path: 'components.header.iconForeground', kind: 'foreground' },
@@ -250,7 +253,7 @@ function resolveHeaderTarget(family: string, solid: boolean, target: RoleTarget)
       ? `palette.colors.${family}.50`
       : `palette.colors.${family}.50`;
   }
-  if (path.endsWith('.titleForeground')) {
+  if (path.endsWith('.foreground') || path.endsWith('.titleForeground')) {
     return solid
       ? `palette.colors.${family}.50`
       : `palette.colors.${family}.${family === 'gray' ? '900' : '700'}`;