From daff3431ba43f3674638ab34a32c103f1c29cfeb Mon Sep 17 00:00:00 2001
From: "matthew.marie-rhodes" <matthew.rhodes@eqtylab.io>
Date: Wed, 28 Oct 2026 11:49:36 -0400
Subject: [PATCH] fix(ui): release 5.0.1 with a light Skeleton in light mode

Need: people on a light page should see a loading placeholder as a soft grey hint.
Problem: Skeleton filled with greyscale-800 in both themes, a near-black bar in light mode, which NavSwitcher's loading state now shows in Studio.
Solution: Skeleton fills with greyscale-200 in light mode and keeps greyscale-800 in dark.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 packages/ui/CHANGELOG.md                      |  7 ++++++
 packages/ui/package.json                      |  2 +-
 .../components/skeleton/skeleton.module.css   |  2 +-
 packages/ui/tests/skeleton-css.test.ts        | 25 +++++++++++++++++++
 4 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 packages/ui/tests/skeleton-css.test.ts

diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index 57af2969..2ef683ca 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 Notable changes to Equality are recorded here, following [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## 5.0.1 - 2026-10-28
+
+### Fixed
+
+- `Skeleton` is a light grey in light mode, where it was near-black. Dark mode is unchanged. This
+  includes the loading placeholder in `NavSwitcher`.
+
 ## 5.0.0 - 2026-10-27
 
 Removes components that were deprecated or never used. Code that imports any of them needs a
diff --git a/packages/ui/package.json b/packages/ui/package.json
index d430f703..dd7be3b1 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -7,7 +7,7 @@
     "url": "git+https://github.com/eqtylab/equality.git",
     "directory": "packages/ui"
   },
-  "version": "5.0.0",
+  "version": "5.0.1",
   "license": "Apache-2.0",
   "keywords": [
     "component library",
diff --git a/packages/ui/src/components/skeleton/skeleton.module.css b/packages/ui/src/components/skeleton/skeleton.module.css
index bf2d15c0..93aa643f 100644
--- a/packages/ui/src/components/skeleton/skeleton.module.css
+++ b/packages/ui/src/components/skeleton/skeleton.module.css
@@ -1,6 +1,6 @@
 @reference '../../theme/theme.module.css';
 
 .skeleton {
-  @apply bg-greyscale-800 rounded-md;
+  @apply bg-greyscale-200 dark:bg-greyscale-800 rounded-md;
   @apply animate-pulse;
 }
diff --git a/packages/ui/tests/skeleton-css.test.ts b/packages/ui/tests/skeleton-css.test.ts
new file mode 100644
index 00000000..2f773339
--- /dev/null
+++ b/packages/ui/tests/skeleton-css.test.ts
@@ -0,0 +1,25 @@
+import { beforeAll, describe, expect, it } from 'vitest';
+
+import { compileCss } from './compile-css';
+
+let css: string;
+
+beforeAll(async () => {
+  css = await compileCss('src/components/skeleton/skeleton.module.css');
+}, 30_000);
+
+// The dark fill sits in a rule nested under the dark variant, so the light one is the rule's first
+function lightFill(): string | undefined {
+  const rule = css.slice(css.indexOf('.skeleton {'));
+  return /background-color:\s*([^;]+);/.exec(rule)?.[1];
+}
+
+describe('skeleton.module.css', () => {
+  it('fills with greyscale-200 in light, a soft hint on a light surface', () => {
+    expect(lightFill()).toMatch(/^var\(--color-greyscale-200\b/);
+  });
+
+  it('keeps greyscale-800 in dark', () => {
+    expect(css).toMatch(/background-color:\s*var\(--color-greyscale-800\b/);
+  });
+});