From 3feee346da8f59fa39f17057631b4e899c49747c Mon Sep 17 00:00:00 2001 From: Bohdan Triapitsyn Date: Mon, 10 Aug 2026 18:49:45 +0300 Subject: [PATCH] fix: replace glass dialog styling with solid background Dialogs and settings window now use the standard background color Removed dialog from the glass utility styles Preserves existing glass effects for other surfaces --- packages/ui/src/components/ui/dialog.tsx | 2 +- packages/ui/src/components/views/SettingsWindow.tsx | 2 +- packages/ui/src/styles/design-system.css | 8 -------- 3 files changed, 2 insertions(+), 10 deletions(-) diff --git a/packages/ui/src/components/ui/dialog.tsx b/packages/ui/src/components/ui/dialog.tsx index 5a42e05f..c57327a7 100644 --- a/packages/ui/src/components/ui/dialog.tsx +++ b/packages/ui/src/components/ui/dialog.tsx @@ -93,7 +93,7 @@ function DialogContent({ data-slot="dialog-content" data-state-slot="dialog" className={cn( - "oc-glass-dialog relative pointer-events-auto text-foreground flex flex-col w-full max-w-lg max-h-full gap-4 rounded-xl border p-6 shadow-none overflow-y-auto pwa-dialog-content origin-center", + "relative pointer-events-auto bg-background text-foreground flex flex-col w-full max-w-lg max-h-full gap-4 rounded-xl border p-6 shadow-none overflow-y-auto pwa-dialog-content origin-center", "transition-all duration-150 ease-out", "data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98]", "data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98]", diff --git a/packages/ui/src/components/views/SettingsWindow.tsx b/packages/ui/src/components/views/SettingsWindow.tsx index c2c32c5e..342f79db 100644 --- a/packages/ui/src/components/views/SettingsWindow.tsx +++ b/packages/ui/src/components/views/SettingsWindow.tsx @@ -50,7 +50,7 @@ export const SettingsWindow: React.FC = ({ open, onOpenChan 'relative pointer-events-auto', 'w-[90vw] max-w-[1200px] h-[85vh] max-h-[900px]', 'rounded-xl border shadow-none overflow-hidden origin-center', - 'oc-glass-dialog', + 'bg-background', 'transition-all duration-150 ease-out', 'data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.98]', 'data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.98]', diff --git a/packages/ui/src/styles/design-system.css b/packages/ui/src/styles/design-system.css index 60729bb8..3318b75a 100644 --- a/packages/ui/src/styles/design-system.css +++ b/packages/ui/src/styles/design-system.css @@ -209,7 +209,6 @@ Utilities remain able to opt an individual consumer out. */ .oc-glass-popover, .oc-glass-tooltip, -.oc-glass-dialog, .oc-glass-panel { background-color: color-mix(in srgb, var(--oc-glass-color) var(--oc-glass-opacity), transparent); -webkit-backdrop-filter: blur(var(--oc-glass-blur)) saturate(var(--oc-glass-saturation)); @@ -226,10 +225,6 @@ --oc-glass-opacity: var(--oc-glass-tooltip-opacity); } -.oc-glass-dialog { - --oc-glass-color: var(--surface-background); -} - .oc-glass-panel { --oc-glass-color: var(--surface-muted); } @@ -262,7 +257,6 @@ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .oc-glass-popover, .oc-glass-tooltip, - .oc-glass-dialog, .oc-glass-panel { background-color: var(--oc-glass-color); } @@ -271,7 +265,6 @@ @media (prefers-reduced-transparency: reduce) { .oc-glass-popover, .oc-glass-tooltip, - .oc-glass-dialog, .oc-glass-panel, .oc-glass-backdrop { -webkit-backdrop-filter: none; @@ -280,7 +273,6 @@ .oc-glass-popover, .oc-glass-tooltip, - .oc-glass-dialog, .oc-glass-panel { background-color: var(--oc-glass-color); }