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/); + }); +});