From 5dcad8ded34b91d1cafa111026687a5710a497a4 Mon Sep 17 00:00:00 2001 From: Victor Trinh Date: Mon, 13 Jan 2025 10:56:57 -0500 Subject: [PATCH] Fix ListboxItemSkeleton colors --- .changeset/moody-singers-refuse.md | 5 +++++ .../src/ListBox/src/ListBoxItemSkeleton.module.css | 8 ++++---- 2 files changed, 9 insertions(+), 4 deletions(-) create mode 100644 .changeset/moody-singers-refuse.md diff --git a/.changeset/moody-singers-refuse.md b/.changeset/moody-singers-refuse.md new file mode 100644 index 00000000..a614afb3 --- /dev/null +++ b/.changeset/moody-singers-refuse.md @@ -0,0 +1,5 @@ +--- +"@hopper-ui/components": patch +--- + +Resolved issues with Listbox loading indicator colors to ensure proper visibility and consistency in dark mode. diff --git a/packages/components/src/ListBox/src/ListBoxItemSkeleton.module.css b/packages/components/src/ListBox/src/ListBoxItemSkeleton.module.css index c66fbabd..792cd1d6 100644 --- a/packages/components/src/ListBox/src/ListBoxItemSkeleton.module.css +++ b/packages/components/src/ListBox/src/ListBoxItemSkeleton.module.css @@ -1,7 +1,7 @@ .hop-ListBoxItemSkeleton { /* Default */ - --hop-ListBoxItemSkeleton-background-color: var(--hop-rock-50); - --hop-ListBoxItemSkeleton-background-color-dark: var(--hop-rock-75); + --hop-ListBoxItemSkeleton-background-color: var(--hop-neutral-surface-weak); + --hop-ListBoxItemSkeleton-background-color-dark: var(--hop-neutral-surface-weak-hover); --hop-ListBoxItemSkeleton-border-radius: var(--hop-shape-rounded-md); --hop-ListBoxItemSkeleton-animation-duration: 1.4s; --hop-ListBoxItemSkeleton-animation-reduced-motion-duration: 3.4s; @@ -22,7 +22,7 @@ /* Internal Variables */ --animation-duration: var(--hop-ListBoxItemSkeleton-animation-duration); - grid-area: label; + grid-area: label; box-sizing: border-box; block-size: var(--height); @@ -67,4 +67,4 @@ 100% { background-position: -25% 50%; } - } \ No newline at end of file + }