From 9beef3753573c1593d2a8a85bca7f2613762422f Mon Sep 17 00:00:00 2001 From: Ajay Ghanwat Date: Tue, 27 Oct 2026 14:38:30 +0530 Subject: [PATCH] fix(ui): calmer PreferenceSwitcher panels and static StatsBar items PreferenceSwitcher: theme choice is a segmented control instead of two tinted tiles, the selected state no longer floods the option with the primary colour, language rows are compact with outlined badges and a primary check, option icons are 1rem, and panels use the radius tokens. StatsBar: items are non-interactive articles, so drop the hover fill that made a stat look pressed under the pointer. Co-Authored-By: Claude Opus 5.5 --- packages/ui/components/PreferenceSwitcher.wrn | 98 ++++++++++++++----- packages/ui/components/StatsBar.wrn | 8 -- 2 files changed, 74 insertions(+), 32 deletions(-) diff --git a/packages/ui/components/PreferenceSwitcher.wrn b/packages/ui/components/PreferenceSwitcher.wrn index 48fbbc76..1b7f7954 100644 --- a/packages/ui/components/PreferenceSwitcher.wrn +++ b/packages/ui/components/PreferenceSwitcher.wrn @@ -154,10 +154,10 @@ size: string = "default" max-width: min(22rem, calc(100vw - 2rem)); max-height: min(28rem, calc(100dvh - 2rem)); overflow-y: auto; - padding: 0.75rem; - gap: 0.6rem; + padding: 0.4rem; + gap: 0.35rem; border: 1px solid var(--wrn-color-border); - border-radius: 0.8rem; + border-radius: var(--wrn-radius-md, 0.8rem); color: var(--wrn-color-text); background: var(--wrn-color-surface); box-shadow: var(--wrn-shadow-lg, 0 18px 48px rgb(0 0 0 / 0.18)); @@ -168,34 +168,50 @@ size: string = "default" .wrn-preferences[data-panel-placement="bottom-center"] .wrn-preferences__panel { right: auto; left: 50%; transform: translateX(-50%); } .wrn-preferences__panel > strong { - padding-inline: 0.25rem; - font-size: 0.7rem; + padding: 0.35rem 0.5rem 0.15rem; + color: var(--wrn-color-text-muted, var(--wrn-color-muted)); + font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } + /* Theme choice reads as one segmented control, not two loose tiles. */ .wrn-preferences__options { display: grid; grid-template-columns: 1fr 1fr; - gap: 0.4rem; + gap: 0.2rem; + padding: 0.2rem; + border-radius: var(--wrn-radius-sm, 0.55rem); + background: var(--wrn-color-surface-2); } .wrn-preferences__panel button { display: inline-flex; min-height: 2.25rem; - padding: 0.5rem 0.65rem; + padding: 0.4rem 0.6rem; align-items: center; - gap: 0.5rem; + gap: 0.55rem; border: 1px solid transparent; - border-radius: var(--wrn-radius-sm, 0.55rem); + border-radius: calc(var(--wrn-radius-sm, 0.55rem) - 2px); font-family: inherit; text-align: start; cursor: pointer; - color: var(--wrn-color-text); - background: var(--wrn-color-surface-2); - font-size: 0.75rem; + color: var(--wrn-color-text-muted, var(--wrn-color-muted)); + background: transparent; + font-size: 0.8125rem; font-weight: 500; + line-height: 1.2; + transition: + color 0.15s, + background-color 0.15s, + box-shadow 0.15s; + } + + .wrn-preferences__panel button > span[class*="icon-["] { + flex: none; + width: 1rem; + height: 1rem; } .wrn-preferences__panel button:focus-visible { @@ -204,20 +220,31 @@ size: string = "default" } .wrn-preferences__panel button:hover { - border-color: var(--wrn-color-border); + color: var(--wrn-color-text); background: var(--wrn-color-surface-2); } - .wrn-preferences__panel button[aria-pressed="true"] { - color: var(--wrn-color-primary); - background: color-mix(in srgb, var(--wrn-color-primary) 12%, var(--wrn-color-surface)); - border-color: color-mix(in srgb, var(--wrn-color-primary) 55%, transparent); + .wrn-preferences__options button { + justify-content: center; + } + + .wrn-preferences__options button:hover { + background: color-mix(in srgb, var(--wrn-color-surface) 60%, transparent); + } + + .wrn-preferences__options button[aria-pressed="true"] { + color: var(--wrn-color-text); + background: var(--wrn-color-surface); + box-shadow: + 0 0 0 1px var(--wrn-color-border), + 0 1px 2px rgb(0 0 0 / 0.06); } .wrn-preferences__swatches { display: grid; grid-template-columns: repeat(3, 2rem); gap: 0.5rem; + padding: 0.25rem; } .wrn-preferences__swatches button { @@ -230,32 +257,55 @@ size: string = "default" box-shadow: 0 0 0 1px var(--wrn-color-border); } + .wrn-preferences__swatches button:hover { + background: var(--wrn-preference-swatch); + } + .wrn-preferences__swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--wrn-color-surface), 0 0 0 4px var(--wrn-color-primary); } + .wrn-preferences__panel--language { + gap: 0.15rem; + } + .wrn-preferences__panel--language button { width: 100%; - background: transparent; + color: var(--wrn-color-text); } .wrn-preferences__panel--language button span { display: grid; - width: 1.65rem; - height: 1.65rem; + flex: none; + width: 1.5rem; + height: 1.5rem; place-items: center; - border-radius: 0.45rem; - background: var(--wrn-color-surface-2); - font-size: 0.65rem; + border: 1px solid var(--wrn-color-border); + border-radius: calc(var(--wrn-radius-sm, 0.55rem) - 2px); + color: var(--wrn-color-text-muted, var(--wrn-color-muted)); + background: var(--wrn-color-surface); + font-size: 0.625rem; + font-weight: 600; + letter-spacing: 0.02em; + } + + .wrn-preferences__panel--language button[aria-pressed="true"] { + font-weight: 600; + } + + .wrn-preferences__panel--language button[aria-pressed="true"] span { + border-color: color-mix(in srgb, var(--wrn-color-primary) 45%, var(--wrn-color-border)); + color: var(--wrn-color-primary); } .wrn-preferences__panel--language button[aria-pressed="true"]::after { width: 0.9rem; height: 0.9rem; - margin-left: auto; + margin-inline-start: auto; content: ""; + color: var(--wrn-color-primary); background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center / contain no-repeat; diff --git a/packages/ui/components/StatsBar.wrn b/packages/ui/components/StatsBar.wrn index c0df9c04..b2605837 100644 --- a/packages/ui/components/StatsBar.wrn +++ b/packages/ui/components/StatsBar.wrn @@ -287,14 +287,6 @@ component StatsBar { --item-accent: var(--wrn-color-danger); } - .wrn-stats-bar__item:hover { - background: var(--wrn-color-surface-soft); - } - - .wrn-stats-bar[data-variant="solid"] .wrn-stats-bar__item:hover { - background: color-mix(in srgb, white 8%, transparent); - } - .wrn-stats-bar__content { min-width: 0; }