🪩 style: Shimmer Live Reasoning Labels and Timers (#15431)

* ✨ style: Shimmer the Thinking Label and Elapsed Timer While Generating

The label above streaming reasoning and the elapsed-time reading beneath a
streaming response both sat static while every other in-flight indicator on
the row — a running tool call's label, a running skill, a pending question —
carried the shimmer. Give them the same treatment so "in flight" reads the
same way everywhere.

Both are gated on state that is already established:

- `Reasoning` shimmers only while `effectiveIsSubmitting && isLast`. Settled
  thoughts, an older row the reader paged to, and reasoning overtaken by
  later content all keep the plain label. The legacy `Thinking` component
  and `ThinkingLabel` (the detached-subagent marker) do not opt in.
- `Elapsed` only ever renders under the streaming latest row at the newest
  sibling position (`shouldShowElapsed`), so there is no settled reading for
  the animation to misrepresent. Completed tool-call durations go through
  `getRunStepDurationLabels` and are untouched.

`.shimmer` and Tailwind's `animate-in` entrance both drive `animation-name`,
and `.shimmer` — plain CSS after `@tailwind utilities`, equal specificity —
would win and silently kill the generated-label slide-in. The two therefore
sit on nested spans, in the order that is safe for `background-clip: text`:
the transform on the ancestor, the clipped background on the descendant.

* 🎨 fix: Drive the Shimmer From Theme Roles and Honor Reduced Motion

Two review findings, both against the shared `.shimmer` utility rather than
this PR's call sites — but this PR adds two more consumers of it, one of which
sweeps continuously for the whole generation, so they land here.

Theme roles. The gradient hard-coded near-black and near-white and selected
the second with `.dark`, so a stored or custom theme that restated its text
colors got a shimmer that ignored them. Themes are applied as bare RGB
triplets on the document element; the sweep now reads `--shimmer-base` /
`--shimmer-dip` (with the established `-alpha` companions the border roles
already use) and falls back to `--text-primary` when a theme states no base of
its own. The fallback is resolved at the label, not in the `:root`
declaration — `var()` substitutes where it is declared, so seeding
`--shimmer-base: var(--text-primary)` on `html` would have frozen the default
and ignored every theme scope applied further down. Dark still declares its
base outright: that value is dimmer than the dark theme's text color, and
restating it as `--text-primary` would have brightened every shimmer.

Default light and dark are preserved: rendered old against new at a frozen
sweep position, 144 of 137,280 pixels differ by a single 1/255 channel step,
which is the alpha-syntax rounding path. A theme that sets only
`--text-primary` now colors the sweep with no shimmer-specific override.

Reduced motion. `.shimmer` was the one custom animation in `style.css` with no
`prefers-reduced-motion` guard — `.t-icon-swap`, `.t-avatar`,
`.scroll-animation-*` and `[data-lc-fade]` all carry one. Stopping the
animation alone is not a fallback: the background settles at position 0 and
shows only half the sweep, stranding the tail of the label in the
near-invisible dip. The guard drops the gradient and hands the glyphs back to
the color they would otherwise have had.

* 🎨 fix: Register the Shimmer Stops and Keep the Sweep Whole

Codex round 2, on the previous round's fixes.

Register the stops. Moving the constants into CSS variables did not make them
theme-owned: `applyResolvedTheme` writes only `themeColorTokens`, so nothing a
theme declares could reach `--shimmer-base`. Dark was the case that mattered —
`style.css` declares a `.dark` base outright, which a theme can only outrank by
having the property applied to the document element — so a custom dark theme
still got the stock white sweep. `rgb-shimmer-base` and `rgb-shimmer-dip` now
sit in the registry beside the text roles, seeded with today's values in both
modes; `registry.spec` already enforces light/dark key parity. The opacities
stay in CSS as `--shimmer-*-alpha`, the way the border roles keep
`--border-*-alpha`.

This narrows the earlier claim: a *versioned* theme resolves every default, so
it now states its own sweep rather than inheriting `--text-primary`. The
`--text-primary` fallback still serves plain CSS and legacy partial `themeRGB`
themes, which apply only the keys they name.

Keep the sweep whole. `key` remounts the label row so the entrance replays,
restarting the sweep with it; reasoning labels revise on a 3s default
(`DEFAULT_UPDATE_INTERVAL_MS`) against a 4s sweep, so it never completes a
cycle. Keying only when an entrance will actually play leaves an un-animated
label — smooth streaming off, or reduced motion — with a stable identity and an
unbroken sweep, instead of a bare snap with nothing to cover it.

Not adopted: keeping the shimmer element stable and replaying the entrance
inside it. The clipped element paints the glyphs itself, so a descendant's
opacity cannot fade them — rendered at entrance t=0, the current nesting is
correctly invisible while the swapped one sits fully lit through its own fade.
The remaining restart happens only underneath a deliberate entrance animation.

* 🎨 fix: Carry Legacy Themes Onto the Registered Shimmer Stops

Codex round 3. Registering the stops migrated versioned themes but not stored
or environment `themeRGB` ones: `ThemeProvider` routes those to the legacy
`applyTheme` adapter, which bypasses `resolveTheme` and applies only the keys a
theme names. A stored theme has no shimmer keys, so it kept the stock sweep
while the rest of its palette moved — and in dark the CSS cannot recover on its
own, because `.dark` declares a base outright and the `--text-primary` fallback
never runs.

`mapColors` already carries legacy themes across a token they predate:
`--surface-composer-hover` derives from `rgb-surface-hover` when absent. The
shimmer base follows the same shape, deriving from `rgb-text-primary` — which
is what it already resolves to in light, so only dark changes. The dip has no
legacy counterpart and stays at its default; it is the faded half of the sweep,
carried at low alpha, so it reads as dimmed against any base.

Not a regression being fixed but an improvement being extended: before this
branch, every theme got the same hard-coded sweep. This is the last path that
still did.

* 🎨 fix: Mirror the Shimmer Fallback Onto Versioned Theme Resolution

Codex round 4. The compat fallback added last round covered only the legacy
adapter, but this codebase carries these fallbacks on both paths: the
`rgb-surface-composer-hover` derivation exists in `mapColors` AND in
`resolveTheme`. Adding the shimmer stop to just one left the halves disagreeing.

The versioned path is the one where the omission actually hurts. A definition
written before these keys existed cannot name them, so `resolveTheme` filled
the gap from the bundled base and pinned that theme's in-flight labels to
LibreChat's own sweep — a theme restating its text as white would light every
label in the stock near-black. Omission there means "not written yet", not
"wants the bundled sweep"; a theme that does want it still says so by naming
the stop, exactly as it opts out of the composer-hover fallback.

Both paths now behave the same: a theme that restates its text and names no
shimmer base gets its sweep from that text color, whichever way it is applied.

client/src/components/Chat/Messages/Content/Parts/Reasoning.tsx

@@ -134,6 +134,7 @@ const Reasoning = memo((props: ReasoningProps) => {
             animateLabel={
               smoothStreaming && effectiveIsSubmitting && Boolean(reasoningLabel?.trim())
             }
+            shimmerLabel={effectiveIsSubmitting && isLast}
           />
         </div>
         <div

client/src/components/Chat/Messages/Content/Parts/Thinking.tsx

@@ -42,6 +42,7 @@ export const ThinkingButton = memo(
     contentId,
     showCopyButton = true,
     animateLabel = false,
+    shimmerLabel = false,
   }: {
     isExpanded: boolean;
     onClick: (e: MouseEvent<HTMLButtonElement>) => void;
@@ -50,6 +51,10 @@ export const ThinkingButton = memo(
     contentId: string;
     showCopyButton?: boolean;
     animateLabel?: boolean;
+    /** Reasoning is still being generated: carry the same shimmer a running
+     *  tool call's label carries, so "thinking" reads as in-flight rather
+     *  than as a settled disclosure. Off for finished thoughts. */
+    shimmerLabel?: boolean;
   }) => {
     const localize = useLocalize();
     const fontSize = useAtomValue(fontSizeAtom);
@@ -93,15 +98,27 @@ export const ThinkingButton = memo(
               aria-hidden="true"
             />
           </span>
+          {/* The entrance and the shimmer both drive `animation-name`, so they
+              cannot share an element — and the nesting order is not a free
+              choice either. The clipped element paints the glyphs itself, so a
+              descendant's opacity cannot fade them: entrance outside and
+              shimmer inside fades correctly, while the reverse leaves the label
+              fully lit right through its own fade.
+
+              `key` remounts the row so the entrance replays, and that restarts
+              the sweep with it. Reasoning labels revise on a 3s default against
+              a 4s sweep, so the restart is frequent; it reads as intentional
+              only while the entrance is there to cover it. With no entrance to
+              play, the row keeps its identity and the sweep runs unbroken. */}
           <span
-            key={label}
+            key={animateLabel ? label : undefined}
             className={cn(
               'min-w-0 truncate text-left',
               animateLabel &&
                 'duration-300 ease-out animate-in fade-in-0 slide-in-from-bottom-1 motion-reduce:animate-none',
             )}
           >
-            {label}
+            {shimmerLabel ? <span className="shimmer max-w-full truncate">{label}</span> : label}
           </span>
         </button>
         {content && showCopyButton && (

client/src/components/Chat/Messages/Content/Parts/__tests__/Reasoning.spec.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MessageContext } from '~/Providers';
+import Reasoning from '../Reasoning';
+
+type ContextOverrides = {
+  isSubmitting?: boolean;
+  isLatestMessage?: boolean;
+};
+
+function renderReasoning(
+  { isSubmitting = true, isLatestMessage = true }: ContextOverrides = {},
+  isLast = true,
+) {
+  return render(
+    <MessageContext.Provider
+      value={{ messageId: 'msg-1', isExpanded: false, isSubmitting, isLatestMessage }}
+    >
+      <Reasoning reasoning="<think>weighing the options</think>" isLast={isLast} />
+    </MessageContext.Provider>,
+  );
+}
+
+describe('Reasoning label shimmer', () => {
+  it('shimmers the label while the reasoning is still being generated', () => {
+    renderReasoning();
+    expect(screen.getByText('Thinking...')).toHaveClass('shimmer');
+  });
+
+  it('leaves settled thoughts unanimated', () => {
+    renderReasoning({ isSubmitting: false });
+    expect(screen.getByText('Thoughts')).not.toHaveClass('shimmer');
+  });
+
+  it('leaves an older row unanimated while a newer one streams', () => {
+    renderReasoning({ isLatestMessage: false });
+    expect(screen.getByText('Thoughts')).not.toHaveClass('shimmer');
+  });
+
+  it('leaves reasoning that has been overtaken by later content unanimated', () => {
+    renderReasoning({}, false);
+    expect(screen.getByText('Thoughts')).not.toHaveClass('shimmer');
+  });
+});

client/src/components/Chat/Messages/Elapsed.tsx

@@ -43,6 +43,10 @@ export const shouldShowElapsed = ({
  * re-render on its account. The compact reading is hidden from assistive
  * technology in favor of a spoken equivalent; neither is an `aria-live` region,
  * so the tick never announces.
+ *
+ * The reading carries the same shimmer a running tool call's label carries. It
+ * only ever renders mid-generation (see `shouldShowElapsed`), so there is no
+ * settled state for the animation to misrepresent.
  */
 const Elapsed = memo(function Elapsed({ index }: { index: number }) {
   const submissionStart = useRecoilValue(store.submissionStartFamily(index));
@@ -73,7 +77,7 @@ export const ElapsedTimer = memo(function ElapsedTimer({ start: startAt }: { sta
    *  the alignment holds in RTL. */
   return (
     <span className="flex items-center ps-1.5 text-text-secondary">
-      <span aria-hidden="true" className="tabular-nums" data-testid="stream-elapsed">
+      <span aria-hidden="true" className="shimmer tabular-nums" data-testid="stream-elapsed">
         {localize(labels.key, labels.values)}
       </span>
       <span className="sr-only">{localize(labels.announcedKey, labels.announcedValues)}</span>

client/src/components/Chat/Messages/__tests__/Elapsed.spec.tsx

@@ -37,6 +37,9 @@ describe('Elapsed', () => {
     /** The 6px inline-start inset that lines the reading up with the
      *  streaming dot and the hover-button glyphs that replace it. */
     expect(screen.getByTestId('stream-elapsed').parentElement).toHaveClass('ps-1.5');
+    /** The same shimmer a running tool call's label carries: the timer only
+     *  ever renders mid-generation, so it never animates a settled reading. */
+    expect(screen.getByTestId('stream-elapsed')).toHaveClass('shimmer');
 
     advance(54_000);
     expect(screen.getByTestId('stream-elapsed')).toHaveTextContent(/^59s$/);

client/src/style.css

@@ -153,6 +153,8 @@ html {
   --text-secondary: var(--gray-600);
   --text-secondary-alt: var(--gray-500);
   --text-tertiary: var(--gray-500);
+  --shimmer-dip: 129 130 134;
+  --shimmer-dip-alpha: 0.18;
   --text-warning: var(--amber-700);
   --text-destructive: var(--red-600);
   --link: var(--blue-600);
@@ -259,6 +261,10 @@ html {
   --text-secondary: var(--gray-300);
   --text-secondary-alt: var(--gray-400);
   --text-tertiary: var(--gray-400);
+  --shimmer-base: 255 255 255;
+  --shimmer-base-alpha: 0.8;
+  --shimmer-dip: 179 179 179;
+  --shimmer-dip-alpha: 0.25;
   --text-warning: var(--amber-500);
   --text-destructive: var(--red-400);
   --link: var(--blue-400);
@@ -2488,14 +2494,22 @@ html[data-input-modality='keyboard']
   }
 }
 
+/* The sweep every in-flight label shares: a running tool call, streaming
+   reasoning, the elapsed timer. Painted from theme roles rather than fixed
+   black/white keyed off `.dark`, so a stored or custom theme restates it the
+   way it restates any other color. Unset, the base falls back to whatever
+   `--text-primary` is in scope AT THE LABEL — resolving it in a `:root`
+   declaration instead would freeze the default and ignore theme scopes applied
+   further down. Dark declares a base outright: its established value is dimmer
+   than that theme's text color rather than equal to it. */
 .shimmer {
   display: inline-block;
   position: relative;
   background: linear-gradient(
     90deg,
-    rgb(33, 33, 33) 25%,
-    rgba(129, 130, 134, 0.18) 50%,
-    rgb(33, 33, 33) 75%
+    rgb(var(--shimmer-base, var(--text-primary)) / var(--shimmer-base-alpha, 1)) 25%,
+    rgb(var(--shimmer-dip) / var(--shimmer-dip-alpha, 1)) 50%,
+    rgb(var(--shimmer-base, var(--text-primary)) / var(--shimmer-base-alpha, 1)) 75%
   );
   background-size: 200% 100%;
   background-clip: text;
@@ -2504,18 +2518,16 @@ html[data-input-modality='keyboard']
   animation: shimmer 4s linear infinite;
 }
 
-.dark .shimmer {
-  background: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0.8) 25%,
-    rgba(179, 179, 179, 0.25) 50%,
-    rgba(255, 255, 255, 0.8) 75%
-  );
-  background-size: 200% 100%;
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: shimmer 4s linear infinite;
+/* Halting the animation alone is not a fallback: the background would settle
+   at position 0 and show only half the sweep, stranding the tail of the label
+   in the near-invisible dip. Drop the gradient and hand the glyphs back to the
+   color they would have had. */
+@media (prefers-reduced-motion: reduce) {
+  .shimmer {
+    background: none;
+    animation: none;
+    -webkit-text-fill-color: currentcolor;
+  }
 }
 
 .sharepoint-picker-bg {

packages/client/src/theme/registry.spec.ts

@@ -50,6 +50,44 @@ describe('theme registry', () => {
     expect(dark.appearance).toEqual(defaultAppearance);
   });
 
+  /** Themes predate the shimmer stops, so an omission means "not written yet",
+   *  not "wants LibreChat's sweep". Filling it from the bundled base would light
+   *  a white-text theme's in-flight labels in the stock near-black. */
+  it('derives an omitted shimmer base from a theme that restates its text', () => {
+    const inverted = resolveTheme(
+      {
+        version: 1,
+        name: 'inverted-reference',
+        modes: { light: { colors: { 'rgb-text-primary': '255 255 255' } } },
+      },
+      'light',
+    );
+
+    expect(inverted.colors['rgb-shimmer-base']).toBe('255 255 255');
+    expect(inverted.colors['rgb-shimmer-dip']).toBe(defaultTheme['rgb-shimmer-dip']);
+  });
+
+  it('leaves a theme that names its own shimmer base alone', () => {
+    const explicit = resolveTheme(
+      {
+        version: 1,
+        name: 'explicit-reference',
+        modes: {
+          light: { colors: { 'rgb-text-primary': '255 255 255', 'rgb-shimmer-base': '10 20 30' } },
+        },
+      },
+      'light',
+    );
+
+    expect(explicit.colors['rgb-shimmer-base']).toBe('10 20 30');
+  });
+
+  it('keeps the bundled shimmer base for a theme that restates nothing', () => {
+    expect(resolveTheme(compactTheme, 'dark').colors['rgb-shimmer-base']).toBe(
+      darkTheme['rgb-shimmer-base'],
+    );
+  });
+
   it('resolves provider brand tokens and lets a theme override them', () => {
     const defaults = resolveTheme(libreChatTheme, 'light');
     expect(defaults.brands['provider-anthropic']).toBe('#d09a74');

packages/client/src/theme/registry.ts

@@ -274,12 +274,30 @@ export function resolveTheme(theme: ThemeDefinition, mode: ThemeMode): ResolvedT
     customColors?.['rgb-surface-hover'] !== undefined
       ? { 'rgb-surface-composer-hover': customColors['rgb-surface-hover'] }
       : {};
+  /**
+   * Themes written before the shimmer stops existed cannot name them, and
+   * filling the omission from the bundled base would pin their in-flight labels
+   * to LibreChat's own sweep — a theme that restates its text as white would
+   * light every label in the stock near-black. A theme that wants the bundled
+   * sweep alongside custom text still gets it by naming the stop, the way
+   * `rgb-surface-composer-hover` opts out of its own fallback above.
+   */
+  const shimmerBaseFallback =
+    customColors?.['rgb-shimmer-base'] === undefined &&
+    customColors?.['rgb-text-primary'] !== undefined
+      ? { 'rgb-shimmer-base': customColors['rgb-text-primary'] }
+      : {};
 
   return {
     version: THEME_VERSION,
     name: theme.name,
     mode,
-    colors: { ...baseColors, ...customColors, ...composerHoverFallback } as Required<IThemeRGB>,
+    colors: {
+      ...baseColors,
+      ...customColors,
+      ...composerHoverFallback,
+      ...shimmerBaseFallback,
+    } as Required<IThemeRGB>,
     appearance: { ...defaultAppearance, ...definition?.appearance },
     brands: { ...defaultBrands, ...theme.brands },
   };

packages/client/src/theme/themes/dark.ts

@@ -12,6 +12,8 @@ export const darkTheme: IThemeRGB = {
   'rgb-text-tertiary': '153 150 150', // #999696 (gray-400)
   'rgb-text-warning': '245 158 11', // #f59e0b (amber-500)
   'rgb-text-destructive': '248 113 113', // #f87171 (red-400)
+  'rgb-shimmer-base': '255 255 255', // #ffffff, carried at 0.8 alpha
+  'rgb-shimmer-dip': '179 179 179', // #b3b3b3
 
   // Link and accent colors
   'rgb-link': '96 165 250', // #60a5fa (blue-400)

packages/client/src/theme/themes/default.ts

@@ -12,6 +12,8 @@ export const defaultTheme: IThemeRGB = {
   'rgb-text-tertiary': '89 89 89', // #595959 (gray-500)
   'rgb-text-warning': '180 83 9', // #b45309 (amber-700)
   'rgb-text-destructive': '220 38 38', // #dc2626 (red-600)
+  'rgb-shimmer-base': '33 33 33', // #212121 (gray-800), matching text-primary
+  'rgb-shimmer-dip': '129 130 134', // #818286
 
   // Link and accent colors
   'rgb-link': '37 99 235', // #2563eb (blue-600)

packages/client/src/theme/types/index.ts

@@ -10,6 +10,11 @@ export interface IThemeRGB {
   'rgb-text-tertiary'?: string;
   'rgb-text-warning'?: string;
   'rgb-text-destructive'?: string;
+  /** Bright and dipped stops of the in-flight label sweep (`.shimmer`). Their
+   *  opacities stay in CSS as `--shimmer-*-alpha`, the way the border roles
+   *  keep `--border-*-alpha`. */
+  'rgb-shimmer-base'?: string;
+  'rgb-shimmer-dip'?: string;
 
   // Link and accent colors
   'rgb-link'?: string;
@@ -113,6 +118,8 @@ export interface IThemeVariables {
   '--text-tertiary': string;
   '--text-warning': string;
   '--text-destructive': string;
+  '--shimmer-base': string;
+  '--shimmer-dip': string;
   '--link': string;
   '--link-hover': string;
   '--link-visited': string;

packages/client/src/theme/utils/applyTheme.spec.ts

@@ -1,5 +1,9 @@
 import type { ThemeDefinition } from '../types';
-import applyTheme, { applyResolvedTheme, clearAppliedTheme } from './applyTheme';
+import applyTheme, {
+  applyResolvedTheme,
+  clearAppliedTheme,
+  themeOwnedProperties,
+} from './applyTheme';
 import { defaultTheme } from '../themes/default';
 import { resolveTheme } from '../registry';
 
@@ -130,6 +134,57 @@ describe('applyTheme', () => {
     expect(root.style.getPropertyValue('--theme-motion-fast')).toBe('80ms');
   });
 
+  /** The sweep under an in-flight label is painted in CSS, so it is only
+   *  themeable if its stops are theme-owned properties. A dark theme is the
+   *  case that matters: `style.css` declares a `.dark` base outright, which a
+   *  theme can only outrank by having these applied to the document element. */
+  it('lets a dark theme restate the in-flight label sweep', () => {
+    const root = document.documentElement;
+
+    applyResolvedTheme(
+      resolveTheme(
+        {
+          version: 1,
+          name: 'shimmer-reference',
+          modes: {
+            dark: { colors: { 'rgb-shimmer-base': '12 200 180', 'rgb-shimmer-dip': '4 60 55' } },
+          },
+        },
+        'dark',
+      ),
+      root,
+    );
+
+    expect(root.style.getPropertyValue('--shimmer-base')).toBe('12 200 180');
+    expect(root.style.getPropertyValue('--shimmer-dip')).toBe('4 60 55');
+    expect(themeOwnedProperties).toEqual(
+      expect.arrayContaining(['--shimmer-base', '--shimmer-dip']),
+    );
+
+    clearAppliedTheme(root);
+    expect(root.style.getPropertyValue('--shimmer-base')).toBe('');
+  });
+
+  /** Legacy `themeRGB` themes predate the shimmer stops and this adapter applies
+   *  only the keys they name, so a stored theme would otherwise keep the stock
+   *  sweep while the rest of its palette moved — and in dark the CSS cannot
+   *  recover, since `.dark` declares a base that outranks the fallback. */
+  it('carries a legacy theme without shimmer keys onto its own text color', () => {
+    const root = document.documentElement;
+
+    applyTheme({ 'rgb-text-primary': '10 20 30' }, root);
+
+    expect(root.style.getPropertyValue('--shimmer-base')).toBe('10 20 30');
+  });
+
+  it('leaves a legacy theme that names its own shimmer base alone', () => {
+    const root = document.documentElement;
+
+    applyTheme({ 'rgb-text-primary': '10 20 30', 'rgb-shimmer-base': '90 80 70' }, root);
+
+    expect(root.style.getPropertyValue('--shimmer-base')).toBe('90 80 70');
+  });
+
   it('clears only properties owned by the theme module', () => {
     const root = document.documentElement;
     root.style.setProperty('--text-primary', '1 2 3');

packages/client/src/theme/utils/applyTheme.ts

@@ -33,6 +33,20 @@ function mapColors(colors: IThemeRGB): Array<[string, string]> {
     variables.push(['--surface-composer-hover', colors['rgb-surface-hover']]);
   }
 
+  /**
+   * Stored and environment themes predate the shimmer stops, and this adapter
+   * applies only the keys a theme names — so without this they would keep the
+   * stock sweep while every other color moved, and in dark mode the CSS cannot
+   * recover: `.dark` declares a base outright, so the `--text-primary` fallback
+   * never runs. The bright stop follows the theme's primary text color, which
+   * is what it already resolves to in light. The dip has no legacy counterpart
+   * and stays at its default: it is the faded half of the sweep, carried at low
+   * alpha, so it reads as dimmed against any base.
+   */
+  if (colors['rgb-shimmer-base'] === undefined && colors['rgb-text-primary'] !== undefined) {
+    variables.push(['--shimmer-base', colors['rgb-text-primary']]);
+  }
+
   return variables;
 }