BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove desktop translucency to reduce macOS compositing cost

Browse Source
This commit is contained in:
Bohdan Triapitsyn
2026-04-07 21:46:38 +03:00
parent 605e4bf42c
commit 952132a08d
96 changed files with 163 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/App.tsx
+2 -2
View File
@@ -575,7 +575,7 @@ function App({ apis }: AppProps) {
if (showCliOnboarding) {
return (
<ErrorBoundary>
<div className="h-full text-foreground bg-transparent">
<div className="h-full text-foreground bg-background">
<OnboardingScreen onCliAvailable={handleCliAvailable} />
</div>
</ErrorBoundary>
@@ -652,7 +652,7 @@ function App({ apis }: AppProps) {
<FireworksProvider>
<VoiceProvider>
<TooltipProvider delayDuration={700} skipDelayDuration={150}>
<div className={isDesktopRuntime ? 'h-full text-foreground bg-transparent' : 'h-full text-foreground bg-background'}>
<div className="h-full text-foreground bg-background">
<SyncAppEffects embeddedBackgroundWorkEnabled={embeddedBackgroundWorkEnabled} />
<MainLayout />
<Toaster />
packages/ui/src/components/chat/ChatContainer.tsx
+4 -4
View File
@@ -664,7 +664,7 @@ export const ChatContainer: React.FC = () => {
'relative z-10',
isDesktopExpandedInput
? 'flex-1 min-h-0 bg-background'
: 'bg-background/95 supports-[backdrop-filter]:bg-background/80'
: 'bg-background'
)}
>
<ChatInput scrollToBottom={resumeToLatestInstant} />
@@ -727,7 +727,7 @@ export const ChatContainer: React.FC = () => {
'relative z-10',
isDesktopExpandedInput
? 'flex-1 min-h-0 bg-background'
: 'bg-background/95 supports-[backdrop-filter]:bg-background/80'
: 'bg-background'
)}
>
<ChatInput scrollToBottom={resumeToLatestInstant} />
@@ -763,7 +763,7 @@ export const ChatContainer: React.FC = () => {
'relative z-10',
isDesktopExpandedInput
? 'flex-1 min-h-0 bg-background'
: 'bg-background/95 supports-[backdrop-filter]:bg-background/80'
: 'bg-background'
)}
>
<ChatInput scrollToBottom={resumeToLatestInstant} />
@@ -808,7 +808,7 @@ export const ChatContainer: React.FC = () => {
'relative z-10',
isDesktopExpandedInput
? 'flex-1 min-h-0 bg-background'
: 'bg-background/95 supports-[backdrop-filter]:bg-background/80'
: 'bg-background'
)}
>
{!isDesktopExpandedInput && sessionMessages.length > 0 && (
packages/ui/src/components/chat/ChatInput.tsx
+1 -1
View File
@@ -3387,7 +3387,7 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
onDrop={handleDrop}
>
{isDragging && (
<div className="absolute inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm rounded-xl">
<div className="absolute inset-0 z-50 flex items-center justify-center bg-background/90 rounded-xl">
<div className="text-center">
<div className="inline-flex justify-center">
<button
packages/ui/src/components/chat/message/TextSelectionMenu.tsx
-6
View File
@@ -474,8 +474,6 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
)}
style={{
paddingBottom: 'calc(0.5rem + env(safe-area-inset-bottom, 0px))',
backdropFilter: 'blur(28px)',
WebkitBackdropFilter: 'blur(28px)',
}}
>
<button
@@ -547,10 +545,6 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
'transition-[opacity,transform] duration-200 ease-out will-change-[opacity,transform]',
isOpening ? 'opacity-0 translate-y-[4px]' : 'opacity-100 translate-y-0'
)}
style={{
backdropFilter: 'blur(28px)',
WebkitBackdropFilter: 'blur(28px)',
}}
>
<button
onClick={handleAddToChat}
packages/ui/src/components/chat/message/ToolOutputDialog.tsx
+4 -4
View File
@@ -420,7 +420,7 @@ const ImagePreviewDialog: React.FC<{
<div
aria-hidden="true"
className={cn(
'absolute inset-0 bg-black/25 backdrop-blur-md',
'absolute inset-0 bg-black/40',
isTransitioning && 'transition-opacity duration-150 ease-out',
isVisible ? 'opacity-100' : 'opacity-0'
)}
@@ -433,7 +433,7 @@ const ImagePreviewDialog: React.FC<{
type="button"
onMouseDown={(event) => event.stopPropagation()}
onClick={showPrevious}
className="absolute left-3 top-1/2 -translate-y-1/2 z-10 h-10 w-10 flex items-center justify-center rounded-full bg-black/25 text-foreground/90 backdrop-blur-sm hover:bg-black/35 focus:outline-none focus:ring-2 focus:ring-primary/60"
className="absolute left-3 top-1/2 -translate-y-1/2 z-10 h-10 w-10 flex items-center justify-center rounded-full bg-black/40 text-foreground/90 hover:bg-black/55 focus:outline-none focus:ring-2 focus:ring-primary/60"
aria-label="Previous image"
>
<RiArrowLeftSLine className="h-6 w-6" />
@@ -442,7 +442,7 @@ const ImagePreviewDialog: React.FC<{
type="button"
onMouseDown={(event) => event.stopPropagation()}
onClick={showNext}
className="absolute right-3 top-1/2 -translate-y-1/2 z-10 h-10 w-10 flex items-center justify-center rounded-full bg-black/25 text-foreground/90 backdrop-blur-sm hover:bg-black/35 focus:outline-none focus:ring-2 focus:ring-primary/60"
className="absolute right-3 top-1/2 -translate-y-1/2 z-10 h-10 w-10 flex items-center justify-center rounded-full bg-black/40 text-foreground/90 hover:bg-black/55 focus:outline-none focus:ring-2 focus:ring-primary/60"
aria-label="Next image"
>
<RiArrowRightSLine className="h-6 w-6" />
@@ -891,7 +891,7 @@ const MermaidPreviewDialog: React.FC<{
<div
aria-hidden="true"
className={cn(
'absolute inset-0 bg-black/25 backdrop-blur-md',
'absolute inset-0 bg-black/40',
isTransitioning && 'transition-opacity duration-150 ease-out',
isVisible ? 'opacity-100' : 'opacity-0'
)}
packages/ui/src/components/layout/Header.tsx
+1 -3
View File
@@ -2194,9 +2194,7 @@ export const Header: React.FC<HeaderProps> = ({
const headerClassName = cn(
'header-safe-area relative z-10',
isMobile && 'border-b border-border/50',
isMobile
? 'bg-background'
: (isDesktopApp ? 'bg-background' : 'bg-background/95 supports-[backdrop-filter]:bg-background/80')
'bg-background'
);
return (
packages/ui/src/components/layout/MainLayout.tsx
+9 -21
View File
@@ -626,7 +626,7 @@ export const MainLayout: React.FC = () => {
className={cn(
'main-content-safe-area h-[100dvh]',
isMobile ? 'flex flex-col' : 'flex',
isDesktopShellRuntime ? 'bg-transparent' : 'bg-background'
'bg-background'
)}
>
<CommandPalette />
@@ -725,7 +725,7 @@ export const MainLayout: React.FC = () => {
}
}}
className={cn(
'fixed left-0 top-[var(--oc-header-height,56px)] z-50 h-[calc(100%-var(--oc-header-height,56px))] bg-transparent',
'fixed left-0 top-[var(--oc-header-height,56px)] z-50 h-[calc(100%-var(--oc-header-height,56px))] bg-background',
'cursor-grab active:cursor-grabbing'
)}
aria-hidden={!mobileLeftDrawerOpen}
@@ -776,7 +776,7 @@ export const MainLayout: React.FC = () => {
}
}}
className={cn(
'fixed right-0 top-[var(--oc-header-height,56px)] z-50 h-[calc(100%-var(--oc-header-height,56px))] bg-transparent',
'fixed right-0 top-[var(--oc-header-height,56px)] z-50 h-[calc(100%-var(--oc-header-height,56px))] bg-background',
'cursor-grab active:cursor-grabbing'
)}
aria-hidden={!isRightSidebarOpen}
@@ -834,9 +834,7 @@ export const MainLayout: React.FC = () => {
<div className="flex flex-1 overflow-hidden relative">
<div className={cn(
'absolute inset-0 flex overflow-hidden',
isDesktopShellRuntime
? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
: 'bg-sidebar'
isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
)}>
{isSidebarOpen ? (
<>
@@ -844,9 +842,7 @@ export const MainLayout: React.FC = () => {
aria-hidden
className={cn(
'pointer-events-none absolute top-0 z-0',
isDesktopShellRuntime
? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
: 'bg-sidebar'
isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
)}
style={{
left: `${visibleSidebarWidth}px`,
@@ -860,9 +856,7 @@ export const MainLayout: React.FC = () => {
aria-hidden
className={cn(
'pointer-events-none absolute bottom-0 z-0',
isDesktopShellRuntime
? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
: 'bg-sidebar'
isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
)}
style={{
left: `${visibleSidebarWidth}px`,
@@ -880,9 +874,7 @@ export const MainLayout: React.FC = () => {
aria-hidden
className={cn(
'pointer-events-none absolute top-0 z-0',
isDesktopShellRuntime
? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
: 'bg-sidebar'
isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
)}
style={{
right: `${visibleRightSidebarWidth}px`,
@@ -896,9 +888,7 @@ export const MainLayout: React.FC = () => {
aria-hidden
className={cn(
'pointer-events-none absolute bottom-0 z-0',
isDesktopShellRuntime
? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
: 'bg-sidebar'
isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
)}
style={{
right: `${visibleRightSidebarWidth}px`,
@@ -919,9 +909,7 @@ export const MainLayout: React.FC = () => {
</Sidebar>
<div className={cn(
'relative flex flex-1 min-w-0 flex-col overflow-hidden',
isDesktopShellRuntime
? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
: 'bg-sidebar',
'bg-sidebar',
isSidebarOpen && 'border-l border-border/50 rounded-tl-md rounded-bl-md',
isRightSidebarOpen && 'border-r border-border/50 rounded-tr-md rounded-br-md'
)}>
packages/ui/src/components/layout/RightSidebar.tsx
+1 -3
View File
@@ -137,9 +137,7 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ isOpen, children, cl
ref={sidebarRef}
className={cn(
'relative flex h-full overflow-hidden border-l border-border/40',
isOpen
? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
: 'bg-sidebar',
'bg-sidebar',
isResizing ? 'transition-none' : 'transition-[width] duration-300 ease-in-out',
!isOpen && 'border-l-0',
className,
packages/ui/src/components/layout/RightSidebarTabs.tsx
+2 -2
View File
@@ -26,8 +26,8 @@ export const RightSidebarTabs: React.FC = () => {
], []);
return (
<div className="flex h-full min-h-0 flex-col overflow-hidden bg-transparent">
<div className="h-9 bg-transparent pt-1 px-2">
<div className="flex h-full min-h-0 flex-col overflow-hidden bg-sidebar">
<div className="h-9 bg-sidebar pt-1 px-2">
<SortableTabsStrip
items={tabItems}
activeId={rightSidebarTab}
packages/ui/src/components/layout/Sidebar.tsx
+1 -5
View File
@@ -2,7 +2,6 @@ import React from 'react';
import { cn } from '@/lib/utils';
import { ErrorBoundary } from '../ui/ErrorBoundary';
import { useUIStore } from '@/stores/useUIStore';
import { isDesktopShell } from '@/lib/desktop';
export const SIDEBAR_CONTENT_WIDTH = 250;
const SIDEBAR_MIN_WIDTH = 250;
@@ -18,7 +17,6 @@ interface SidebarProps {
export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children, className }) => {
const sidebarWidth = useUIStore((state) => state.sidebarWidth);
const setSidebarWidth = useUIStore((state) => state.setSidebarWidth);
const isDesktopApp = React.useMemo(() => isDesktopShell(), []);
const [isResizing, setIsResizing] = React.useState(false);
const startXRef = React.useRef(0);
const startWidthRef = React.useRef(sidebarWidth || SIDEBAR_CONTENT_WIDTH);
@@ -119,9 +117,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children, cl
ref={sidebarRef}
className={cn(
'relative flex h-full overflow-hidden border-r border-border/40',
isDesktopApp
? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
: 'bg-sidebar',
'bg-sidebar',
isResizing ? 'transition-none' : 'transition-[width] duration-300 ease-in-out',
!isOpen && 'border-r-0',
className,
packages/ui/src/components/layout/SidebarContextSummary.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ export const SidebarContextSummary: React.FC<SidebarContextSummaryProps> = ({ cl
}, [directoryFull]);
return (
<div className={cn('hidden min-h-[48px] flex-col justify-center gap-0.5 border-b bg-sidebar/60 px-3 py-2 backdrop-blur md:flex md:pb-2', className)}>
<div className={cn('hidden min-h-[48px] flex-col justify-center gap-0.5 border-b bg-sidebar px-3 py-2 md:flex md:pb-2', className)}>
<span className="typography-meta text-muted-foreground">Session</span>
<span className="typography-ui-label font-semibold text-foreground truncate" title={activeSessionTitle}>
{activeSessionTitle}
packages/ui/src/components/layout/SidebarFilesTree.tsx
+1 -1
View File
@@ -769,7 +769,7 @@ export const SidebarFilesTree: React.FC = () => {
const hasTree = Boolean(root && childrenByDir[root]);
return (
<section className="flex h-full min-h-0 flex-col overflow-hidden bg-transparent">
<section className="flex h-full min-h-0 flex-col overflow-hidden bg-sidebar">
<div className="flex items-center gap-2 border-b border-border/40 px-3 py-2">
<div className="relative min-w-0 flex-1">
<RiSearchLine className="pointer-events-none absolute left-2 top-2 h-4 w-4 text-muted-foreground" />
packages/ui/src/components/multirun/AgentSelector.tsx
+1 -5
View File
@@ -87,13 +87,9 @@ export const AgentSelector: React.FC<AgentSelectorProps> = ({
id={id}
size="lg"
className={cn(
'max-w-full typography-meta text-foreground !border-border/80 !bg-[var(--surface-subtle)]/95 !backdrop-blur-sm hover:!bg-[var(--interactive-hover)]/70 data-[state=open]:!bg-[var(--interactive-active)]/70',
'max-w-full typography-meta text-foreground !border-border/80 !bg-[var(--surface-subtle)] hover:!bg-[var(--interactive-hover)]/70 data-[state=open]:!bg-[var(--interactive-active)]/70',
className,
)}
style={{
backdropFilter: 'blur(10px)',
WebkitBackdropFilter: 'blur(10px)',
}}
>
<SelectValue placeholder="Select an agent" />
</SelectTrigger>
packages/ui/src/components/multirun/ModelMultiSelect.tsx
+2 -10
View File
@@ -328,13 +328,9 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
size="sm"
className={cn(
CHIP_HEIGHT_CLASS,
'!border-border/80 !bg-[var(--surface-subtle)]/95 !backdrop-blur-sm hover:!bg-[var(--interactive-hover)]/70',
'!border-border/80 !bg-[var(--surface-subtle)] hover:!bg-[var(--interactive-hover)]/70',
addButtonClassName,
)}
style={{
backdropFilter: 'blur(10px)',
WebkitBackdropFilter: 'blur(10px)',
}}
onClick={() => setIsOpen(!isOpen)}
>
<RiAddLine className="h-3.5 w-3.5 mr-1" />
@@ -540,11 +536,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
>
<SelectTrigger
size="chip"
className="px-2 gap-1.5 rounded-md !border-border/80 !bg-[var(--surface-subtle)]/95 !backdrop-blur-sm hover:!bg-[var(--interactive-hover)]/70 typography-meta font-medium text-foreground"
style={{
backdropFilter: 'blur(10px)',
WebkitBackdropFilter: 'blur(10px)',
}}
className="px-2 gap-1.5 rounded-md !border-border/80 !bg-[var(--surface-subtle)] hover:!bg-[var(--interactive-hover)]/70 typography-meta font-medium text-foreground"
>
<RiBrainAi3Line
className={cn(
packages/ui/src/components/onboarding/OnboardingScreen.tsx
+2 -2
View File
@@ -207,7 +207,7 @@ export function OnboardingScreen({ onCliAvailable }: OnboardingScreenProps) {
return (
<div
className="h-full flex items-center justify-center bg-transparent p-8 relative cursor-default select-none"
className="h-full flex items-center justify-center bg-background p-8 relative cursor-default select-none"
onMouseDown={handleDragStart}
>
<div className="w-full space-y-4 text-center">
@@ -241,7 +241,7 @@ export function OnboardingScreen({ onCliAvailable }: OnboardingScreenProps) {
)}
<div className="flex justify-center">
<div className="bg-background/60 backdrop-blur-sm border border-border rounded-lg px-5 py-3 font-mono text-sm w-fit">
<div className="bg-background border border-border rounded-lg px-5 py-3 font-mono text-sm w-fit">
{copied ? (
<div className="flex items-center justify-center gap-2" style={{ color: 'var(--status-success)' }}>
<RiCheckLine className="h-4 w-4" />
packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx
+1 -42
View File
@@ -19,7 +19,7 @@ import {
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { isDesktopShell, isVSCodeRuntime, isWebRuntime, desktopSetVibrancy } from '@/lib/desktop';
import { isDesktopShell, isVSCodeRuntime, isWebRuntime } from '@/lib/desktop';
import { useDeviceInfo } from '@/lib/device';
import { usePwaDetection } from '@/hooks/usePwaDetection';
import { updateDesktopSettings } from '@/lib/persistence';
@@ -209,7 +209,6 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
} = useThemeSystem();
const [themesReloading, setThemesReloading] = React.useState(false);
const [vibrancyEnabled, setVibrancyEnabled] = React.useState(true);
const [chatRenderPreviewTick, setChatRenderPreviewTick] = React.useState(0);
const reportUsage = useUIStore(state => state.reportUsage);
const setReportUsage = useUIStore(state => state.setReportUsage);
@@ -220,28 +219,6 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
void updateDesktopSettings({ reportUsage: enabled });
}, [setReportUsage]);
const isMacDesktop = React.useMemo(() => {
if (!isDesktopShell()) return false;
if (typeof navigator === 'undefined') return false;
return /Macintosh|Mac OS X/.test(navigator.userAgent || '');
}, []);
React.useEffect(() => {
if (!isMacDesktop) return;
const stored = localStorage.getItem('desktopVibrancy');
if (stored !== null) {
setVibrancyEnabled(stored !== 'false');
}
}, [isMacDesktop]);
const handleVibrancyChange = React.useCallback((enabled: boolean) => {
setVibrancyEnabled(enabled);
localStorage.setItem('desktopVibrancy', String(enabled));
document.documentElement.classList.toggle('no-vibrancy', !enabled);
void desktopSetVibrancy(enabled);
void updateDesktopSettings({ desktopVibrancy: enabled });
}, []);
const shouldAnimateChatPreview = isSettingsDialogOpen
&& (visibleSettings ? visibleSettings.includes('chatRenderMode') : true);
@@ -555,24 +532,6 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
</Tooltip>
</div>
{isMacDesktop && (
<div className="flex items-center gap-2 py-1.5">
<Checkbox
checked={vibrancyEnabled}
onChange={handleVibrancyChange}
ariaLabel="Toggle window vibrancy"
/>
<div className="flex min-w-0 flex-col">
<span className="typography-ui-label text-foreground">
Window vibrancy
</span>
<span className="typography-meta text-muted-foreground">
Translucent window background. Disabling may reduce energy usage. Existing windows update immediately, but full transparency changes apply to new windows or after restart.
</span>
</div>
</div>
)}
{showPwaInstallNameSetting && (
<div className="py-1.5 space-y-1.5">
<div className="flex min-w-0 flex-col">
packages/ui/src/components/ui/ConfigUpdateOverlay.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ export const ConfigUpdateOverlay: React.FC = () => {
}
return (
<div className="fixed inset-0 z-[9999] flex flex-col items-center justify-center gap-6 backdrop-blur-md">
<div className="fixed inset-0 z-[9999] flex flex-col items-center justify-center gap-6 bg-background/90">
<OpenChamberLogo width={80} height={80} />
<p className="typography-body text-muted-foreground">
{message}
packages/ui/src/components/ui/MobileOverlayPanel.tsx
+1 -1
View File
@@ -70,7 +70,7 @@ export const MobileOverlayPanel: React.FC<MobileOverlayPanelProps> = ({
const content = (
<div
className="fixed inset-0 z-50 flex flex-col bg-background/40 backdrop-blur-sm"
className="fixed inset-0 z-50 flex flex-col bg-background/70"
role="dialog"
aria-modal="true"
onClick={onClose}
packages/ui/src/components/ui/dialog.tsx
+1 -1
View File
@@ -50,7 +50,7 @@ const DialogOverlay = React.forwardRef<
ref={ref}
data-slot="dialog-overlay"
className={cn(
"fixed inset-0 z-50 bg-black/50 backdrop-blur-md",
"fixed inset-0 z-50 bg-black/50 dark:bg-black/75",
className
)}
{...props}
packages/ui/src/components/ui/dropdown-menu.tsx
-4
View File
@@ -43,8 +43,6 @@ function DropdownMenuContent({
style={{
backgroundColor: 'var(--surface-elevated)',
color: 'var(--surface-elevated-foreground)',
backdropFilter: 'blur(28px)',
WebkitBackdropFilter: 'blur(28px)',
...style,
}}
className={cn(
@@ -238,8 +236,6 @@ function DropdownMenuSubContent({
style={{
backgroundColor: 'var(--surface-elevated)',
color: 'var(--surface-elevated-foreground)',
backdropFilter: 'blur(28px)',
WebkitBackdropFilter: 'blur(28px)',
}}
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-visible rounded-xl border-2 border-border/60 p-1 shadow-none",
packages/ui/src/components/ui/select.tsx
-2
View File
@@ -67,8 +67,6 @@ function SelectContent({
style={{
backgroundColor: 'var(--surface-elevated)',
color: 'var(--surface-elevated-foreground)',
backdropFilter: 'blur(28px)',
WebkitBackdropFilter: 'blur(28px)',
}}
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden rounded-xl border-2 border-border/60 shadow-none transform-gpu will-change-transform",
packages/ui/src/components/ui/sonner.tsx
-2
View File
@@ -15,8 +15,6 @@ const Toaster = ({ ...props }: ToasterProps) => {
toastOptions={{
style: {
borderRadius: "var(--radius-lg)",
backdropFilter: 'blur(28px)',
WebkitBackdropFilter: 'blur(28px)',
},
classNames: {
toast: "rounded-[var(--radius-lg)]",
packages/ui/src/components/ui/tooltip.tsx
-2
View File
@@ -52,8 +52,6 @@ function TooltipContent({
className
)}
style={{
backdropFilter: 'blur(28px)',
WebkitBackdropFilter: 'blur(28px)',
...style,
}}
{...props}
packages/ui/src/components/views/FilesView.tsx
+1 -1
View File
@@ -2214,7 +2214,7 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
}
return (
<div className="pointer-events-auto flex items-center gap-1 rounded-lg border border-[var(--interactive-border)] bg-[var(--surface-elevated)]/95 p-1 shadow-sm backdrop-blur-sm">
<div className="pointer-events-auto flex items-center gap-1 rounded-lg border border-[var(--interactive-border)] bg-[var(--surface-elevated)] p-1 shadow-sm">
{canEdit && textViewMode === 'edit' && (
isSaving ? (
<span className="flex items-center gap-1 px-1 text-muted-foreground typography-meta">
packages/ui/src/components/views/GitView.tsx
+2 -2
View File
@@ -1941,7 +1941,7 @@ export const GitView: React.FC = () => {
}
return (
<div className={cn('flex h-full flex-col overflow-hidden', 'bg-transparent')} data-keyboard-avoid="true">
<div className={cn('flex h-full flex-col overflow-hidden', 'bg-sidebar')} data-keyboard-avoid="true">
<GitHeader
status={status}
localBranches={localBranches}
@@ -1983,7 +1983,7 @@ export const GitView: React.FC = () => {
<div className="flex-1 min-h-0 overflow-hidden">
<div className="h-full min-h-0 flex flex-col">
<div className={cn('min-w-0 min-h-0 h-full flex flex-col', 'bg-transparent')}>
<div className={cn('min-w-0 min-h-0 h-full flex flex-col', 'bg-sidebar')}>
<div className={cn(isMobile ? 'h-10 px-1.5' : 'h-8 px-2')}>
<SortableTabsStrip
items={actionTabItems}
packages/ui/src/components/views/MultiRunWindow.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export const MultiRunWindow: React.FC<MultiRunWindowProps> = ({
<DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
<DialogPrimitive.Portal>
<DialogPrimitive.Overlay
className="fixed inset-0 z-50 bg-black/50 backdrop-blur-md"
className="fixed inset-0 z-50 bg-black/50 dark:bg-black/75"
/>
<DialogPrimitive.Content
aria-describedby={descriptionId}
packages/ui/src/components/views/SettingsView.tsx
+2 -2
View File
@@ -648,7 +648,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
<div
className={cn(
'flex items-center gap-2 px-3 py-2 border-b',
'bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80'
'bg-background'
)}
style={{ borderColor: 'var(--interactive-border)' }}
>
@@ -730,7 +730,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
className={cn(
'relative flex h-full min-h-0 flex-col overflow-hidden border-r',
isDesktopApp
? 'bg-[color:var(--sidebar-overlay-strong)] supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
? 'bg-sidebar'
: runtimeCtx.isVSCode
? 'bg-background'
: 'bg-sidebar',
packages/ui/src/components/views/SettingsWindow.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export const SettingsWindow: React.FC<SettingsWindowProps> = ({ open, onOpenChan
<DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
<DialogPrimitive.Portal>
<DialogPrimitive.Overlay
className="fixed inset-0 z-50 bg-black/50 backdrop-blur-md"
className="fixed inset-0 z-50 bg-black/50 dark:bg-black/75"
/>
<DialogPrimitive.Content
aria-describedby={descriptionId}
packages/ui/src/lib/codemirror/flexokiTheme.ts
-2
View File
@@ -149,8 +149,6 @@ export function createFlexokiCodeMirrorTheme(theme: Theme): Extension {
pointerEvents: 'auto',
padding: '4px',
backgroundColor: `color-mix(in srgb, ${theme.colors.surface.elevated} 85%, transparent)`,
backdropFilter: 'blur(12px)',
WebkitBackdropFilter: 'blur(12px)',
border: `1px solid ${theme.colors.interactive.border}`,
borderRadius: '10px',
boxShadow: `0 2px 8px color-mix(in srgb, ${theme.colors.surface.background} 60%, transparent)`,
packages/ui/src/lib/desktop.ts
-17
View File
@@ -147,8 +147,6 @@ export type DesktopSettings = {
skillCatalogs?: SkillCatalogConfig[];
// Opt-in to send anonymous usage reports for update checks (default: true)
reportUsage?: boolean;
// macOS window vibrancy effect (default: true)
desktopVibrancy?: boolean;
};
type TauriGlobal = {
@@ -639,18 +637,3 @@ export const clearDesktopCache = async (): Promise<boolean> => {
return false;
}
};
export const desktopSetVibrancy = async (enabled: boolean): Promise<boolean> => {
if (!isTauriShell()) {
return false;
}
try {
const tauri = (window as unknown as { __TAURI__?: TauriGlobal }).__TAURI__;
await tauri?.core?.invoke?.('desktop_set_vibrancy', { enabled });
return true;
} catch (error) {
console.warn('Failed to set vibrancy', error);
return false;
}
};
packages/ui/src/lib/device.ts
-4
View File
@@ -52,10 +52,6 @@ const setRootDeviceAttributes = (
if (isTauriShellRuntime) {
root.classList.add('desktop-runtime');
// Apply no-vibrancy class early so the first paint uses a solid background
// when vibrancy was previously disabled by the user.
const vibrancyOff = localStorage.getItem('desktopVibrancy') === 'false';
root.classList.toggle('no-vibrancy', vibrancyOff);
root.style.setProperty('--is-mobile', '0');
root.style.setProperty('--device-type', 'desktop');
root.style.setProperty('--font-scale', '1');
packages/ui/src/lib/persistence.ts
-3
View File
@@ -82,9 +82,6 @@ const persistToLocalStorage = (settings: DesktopSettings) => {
localStorage.removeItem('openchamber.pwaName');
}
}
if (typeof settings.desktopVibrancy === 'boolean') {
localStorage.setItem('desktopVibrancy', String(settings.desktopVibrancy));
}
};
type PersistApi = {
packages/ui/src/lib/theme/themes/amoled-dark.json
+2 -2
View File
@@ -25,9 +25,9 @@
"surface": {
"background": "#000000",
"foreground": "#ffffff",
"muted": "#11111190",
"muted": "#111111",
"mutedForeground": "#dbdbdb",
"elevated": "#0a0a0a90",
"elevated": "#0a0a0a",
"elevatedForeground": "#ffffff",
"overlay": "#000000cc",
"subtle": "#111111"
packages/ui/src/lib/theme/themes/amoled-light.json
+2 -2
View File
@@ -25,9 +25,9 @@
"surface": {
"background": "#f1f1f1",
"foreground": "#0a0a0a",
"muted": "#e3e3e390",
"muted": "#e3e3e3",
"mutedForeground": "#232323",
"elevated": "#eaeaea90",
"elevated": "#eaeaea",
"elevatedForeground": "#0a0a0a",
"overlay": "#f1f1f133",
"subtle": "#e3e3e3"
packages/ui/src/lib/theme/themes/aura-dark.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#15141B",
"foreground": "#EDECEE",
"muted": "#1A192190",
"muted": "#1A1921",
"mutedForeground": "#8a8282",
"elevated": "#201e2b90",
"elevated": "#201e2b",
"elevatedForeground": "#EDECEE",
"overlay": "#FFFFFF20",
"subtle": "#25232f"
packages/ui/src/lib/theme/themes/aura-light.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#F5F0FF",
"foreground": "#2D2640",
"muted": "#EFE8FC90",
"muted": "#EFE8FC",
"mutedForeground": "#807b8b",
"elevated": "#f1ebfb90",
"elevated": "#f1ebfb",
"elevatedForeground": "#2D2640",
"overlay": "#15101F20",
"subtle": "#EFE8FC"
packages/ui/src/lib/theme/themes/ayu-dark.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#0F1419",
"foreground": "#D6DAE0",
"muted": "#18222C90",
"muted": "#18222C",
"mutedForeground": "#777e86",
"elevated": "#17202a90",
"elevated": "#17202a",
"elevatedForeground": "#D6DAE0",
"overlay": "#FBFBFD20",
"subtle": "#1e252d"
packages/ui/src/lib/theme/themes/ayu-light.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#FDFAF4",
"foreground": "#394049",
"muted": "#f7f3eb90",
"muted": "#f7f3eb",
"mutedForeground": "#777e87",
"elevated": "#faf6ed90",
"elevated": "#faf6ed",
"elevatedForeground": "#4F5964",
"overlay": "#1B232B20",
"subtle": "#FFF7E5"
packages/ui/src/lib/theme/themes/carbonfox-dark.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#161616",
"foreground": "#F2F4F8",
"muted": "#22222290",
"muted": "#222222",
"mutedForeground": "#8b8a8a",
"elevated": "#22222290",
"elevated": "#222222",
"elevatedForeground": "#F2F4F8",
"overlay": "#FFFFFF20",
"subtle": "#292828"
packages/ui/src/lib/theme/themes/carbonfox-light.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#FFFFFF",
"foreground": "#161616",
"muted": "#F4F4F490",
"muted": "#F4F4F4",
"mutedForeground": "#868585",
"elevated": "#f4f4f790",
"elevated": "#f4f4f7",
"elevatedForeground": "#161616",
"overlay": "#00000020",
"subtle": "#f2f2f8"
packages/ui/src/lib/theme/themes/catppuccin-dark.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#1E1E2E",
"foreground": "#CDD6F4",
"muted": "#2a273b90",
"muted": "#2a273b",
"mutedForeground": "#969cb1",
"elevated": "#28284190",
"elevated": "#282841",
"elevatedForeground": "#CDD6F4",
"overlay": "#F4F2FF20",
"subtle": "#2f2f50"
packages/ui/src/lib/theme/themes/catppuccin-light.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#fff6f4",
"foreground": "#2e314a",
"muted": "#f8ebe990",
"muted": "#f8ebe9",
"mutedForeground": "#888992",
"elevated": "#fbefea90",
"elevated": "#fbefea",
"elevatedForeground": "#4C4F69",
"overlay": "#1F1F2A20",
"subtle": "#FDEEEE"
packages/ui/src/lib/theme/themes/cursor-dark.json
+2 -2
View File
@@ -25,9 +25,9 @@
"surface": {
"background": "#0e0e0e",
"foreground": "#e4e4e4",
"muted": "#1c1c1c90",
"muted": "#1c1c1c",
"mutedForeground": "#e4e4e45e",
"elevated": "#16161690",
"elevated": "#161616",
"elevatedForeground": "#e4e4e4",
"overlay": "#0e0e0ecc",
"subtle": "#232323"
packages/ui/src/lib/theme/themes/cursor-light.json
+2 -2
View File
@@ -25,9 +25,9 @@
"surface": {
"background": "#fcfcfc",
"foreground": "#131313",
"muted": "#eeeeee90",
"muted": "#eeeeee",
"mutedForeground": "#141414ad",
"elevated": "#f5f5f590",
"elevated": "#f5f5f5",
"elevatedForeground": "#131313",
"overlay": "#fcfcfc33",
"subtle": "#e5e5e5"
packages/ui/src/lib/theme/themes/dracula-dark.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#14151F",
"foreground": "#F8F8F2",
"muted": "#18192690",
"muted": "#181926",
"mutedForeground": "#7c7e9c",
"elevated": "#16172290",
"elevated": "#161722",
"elevatedForeground": "#F8F8F2",
"overlay": "#FFFFFF20",
"subtle": "#222436"
packages/ui/src/lib/theme/themes/dracula-light.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#F8F8F2",
"foreground": "#1F1F2F",
"muted": "#eff1eb90",
"muted": "#eff1eb",
"mutedForeground": "#6c6c7a",
"elevated": "#eeeee590",
"elevated": "#eeeee5",
"elevatedForeground": "#1F1F2F",
"overlay": "#05040C20",
"subtle": "#edeee7"
packages/ui/src/lib/theme/themes/fields-of-the-shire-dark.json
+2 -2
View File
@@ -20,9 +20,9 @@
"surface": {
"background": "#1b1815",
"foreground": "#ebe0d1",
"muted": "#23201c90",
"muted": "#23201c",
"mutedForeground": "#83796f",
"elevated": "#2b262290",
"elevated": "#2b2622",
"elevatedForeground": "#ebe0d1",
"overlay": "#1b1815cc",
"subtle": "#332d28"
packages/ui/src/lib/theme/themes/fields-of-the-shire-light.json
+2 -2
View File
@@ -20,9 +20,9 @@
"surface": {
"background": "#f9f5eb",
"foreground": "#1a1612",
"muted": "#f4efe390",
"muted": "#f4efe3",
"mutedForeground": "#5a5048",
"elevated": "#fcf9f090",
"elevated": "#fcf9f0",
"elevatedForeground": "#1a1612",
"overlay": "#1a161220",
"subtle": "#efe8da"
packages/ui/src/lib/theme/themes/flexoki-dark.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#151313",
"foreground": "#CECDC3",
"muted": "#1C1B1A90",
"muted": "#1C1B1A",
"mutedForeground": "#807e79",
"elevated": "#1c1a1990",
"elevated": "#1c1a19",
"elevatedForeground": "#CECDC3",
"overlay": "#00000080",
"subtle": "#1e1d1c"
packages/ui/src/lib/theme/themes/flexoki-light.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#FFFCF0",
"foreground": "#100F0F",
"muted": "#F2F0E590",
"muted": "#F2F0E5",
"mutedForeground": "#686663",
"elevated": "#fdf6ec90",
"elevated": "#fdf6ec",
"elevatedForeground": "#100F0F",
"overlay": "#100F0F20",
"subtle": "#F6F0E6"
packages/ui/src/lib/theme/themes/github-dark.json
+2 -2
View File
@@ -25,9 +25,9 @@
"surface": {
"background": "#05080e",
"foreground": "#ccd4dc",
"muted": "#12151b90",
"muted": "#12151b",
"mutedForeground": "#8b949e",
"elevated": "#0c0f1690",
"elevated": "#0c0f16",
"elevatedForeground": "#ccd4dc",
"overlay": "#05080ecc",
"subtle": "#181c22"
packages/ui/src/lib/theme/themes/github-light.json
+2 -2
View File
@@ -25,9 +25,9 @@
"surface": {
"background": "#ffffff",
"foreground": "#1e2329",
"muted": "#f2f3f390",
"muted": "#f2f3f3",
"mutedForeground": "#57606a",
"elevated": "#f9f9f990",
"elevated": "#f9f9f9",
"elevatedForeground": "#1e2329",
"overlay": "#ffffff33",
"subtle": "#eaeaeb"
packages/ui/src/lib/theme/themes/gruvbox-dark.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#282828",
"foreground": "#EBDBB2",
"muted": "#32302F90",
"muted": "#32302F",
"mutedForeground": "#918574",
"elevated": "#25292b90",
"elevated": "#25292b",
"elevatedForeground": "#EBDBB2",
"overlay": "#FBF1C720",
"subtle": "#3e3c3a"
packages/ui/src/lib/theme/themes/gruvbox-light.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#FBF1C7",
"foreground": "#3C3836",
"muted": "#F2E5BC90",
"muted": "#F2E5BC",
"mutedForeground": "#7C6F64",
"elevated": "#efebcd90",
"elevated": "#efebcd",
"elevatedForeground": "#3C3836",
"overlay": "#28282820",
"subtle": "#FDF9E8"
packages/ui/src/lib/theme/themes/kanagawa-dark.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#1F1F28",
"foreground": "#DCD7BA",
"muted": "#23232d90",
"muted": "#23232d",
"mutedForeground": "#7e7e77",
"elevated": "#2A2A3790",
"elevated": "#2A2A37",
"elevatedForeground": "#DCD7BA",
"overlay": "#16161DCC",
"subtle": "#2f2f3d"
packages/ui/src/lib/theme/themes/kanagawa-light.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#F2ECBC",
"foreground": "#545464",
"muted": "#E7DBA090",
"muted": "#E7DBA0",
"mutedForeground": "#6c6c67",
"elevated": "#eae4bf90",
"elevated": "#eae4bf",
"elevatedForeground": "#545464",
"overlay": "#54546433",
"subtle": "#f4fff0"
packages/ui/src/lib/theme/themes/lucent-orng-dark.json
+2 -2
View File
@@ -25,9 +25,9 @@
"surface": {
"background": "#1a0c08",
"foreground": "#eeeeee",
"muted": "#281b1790",
"muted": "#281b17",
"mutedForeground": "#808080",
"elevated": "#22141190",
"elevated": "#221411",
"elevatedForeground": "#eeeeee",
"overlay": "#1a0c08cc",
"subtle": "#2f221f"
packages/ui/src/lib/theme/themes/lucent-orng-light.json
+2 -2
View File
@@ -25,9 +25,9 @@
"surface": {
"background": "#fef7f3",
"foreground": "#181818",
"muted": "#f1eae690",
"muted": "#f1eae6",
"mutedForeground": "#8a8a8a",
"elevated": "#f7f1ed90",
"elevated": "#f7f1ed",
"elevatedForeground": "#181818",
"overlay": "#fef7f333",
"subtle": "#e8e2de"
packages/ui/src/lib/theme/themes/mono-dark.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#000000",
"foreground": "#E5E5E5",
"muted": "#0A0A0A90",
"muted": "#0A0A0A",
"mutedForeground": "#808080",
"elevated": "#14141490",
"elevated": "#141414",
"elevatedForeground": "#E5E5E5",
"overlay": "#00000080",
"subtle": "#1A1A1A"
packages/ui/src/lib/theme/themes/mono-light.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#FFFFFF",
"foreground": "#1A1A1A",
"muted": "#F5F5F590",
"muted": "#F5F5F5",
"mutedForeground": "#757575",
"elevated": "#FAFAFA90",
"elevated": "#FAFAFA",
"elevatedForeground": "#1A1A1A",
"overlay": "#00000020",
"subtle": "#F0F0F0"
packages/ui/src/lib/theme/themes/mono-plus-dark.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#000000",
"foreground": "#E5E5E5",
"muted": "#0A0A0A90",
"muted": "#0A0A0A",
"mutedForeground": "#808080",
"elevated": "#14141490",
"elevated": "#141414",
"elevatedForeground": "#E5E5E5",
"overlay": "#00000080",
"subtle": "#1A1A1A"
packages/ui/src/lib/theme/themes/mono-plus-light.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#FFFFFF",
"foreground": "#1A1A1A",
"muted": "#F5F5F590",
"muted": "#F5F5F5",
"mutedForeground": "#6f6f6f",
"elevated": "#FAFAFA90",
"elevated": "#FAFAFA",
"elevatedForeground": "#1A1A1A",
"overlay": "#00000020",
"subtle": "#F0F0F0"
packages/ui/src/lib/theme/themes/monokai-dark.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#23241E",
"foreground": "#F8F8F2",
"muted": "#282a2090",
"muted": "#282a20",
"mutedForeground": "#939390",
"elevated": "#21221a90",
"elevated": "#21221a",
"elevatedForeground": "#F8F8F2",
"overlay": "#FFFFFF20",
"subtle": "#36372a"
packages/ui/src/lib/theme/themes/monokai-light.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#FDF8EC",
"foreground": "#292318",
"muted": "#F8F2E690",
"muted": "#F8F2E6",
"mutedForeground": "#887c6a",
"elevated": "#FBF5E890",
"elevated": "#FBF5E8",
"elevatedForeground": "#292318",
"overlay": "#1C150C20",
"subtle": "#F7EFDD"
packages/ui/src/lib/theme/themes/nightowl-dark.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#011627",
"foreground": "#D6DEEB",
"muted": "#0B253A90",
"muted": "#0B253A",
"mutedForeground": "#7d8892",
"elevated": "#00112290",
"elevated": "#001122",
"elevatedForeground": "#D6DEEB",
"overlay": "#FFFFFF20",
"subtle": "#0f283f"
packages/ui/src/lib/theme/themes/nightowl-light.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#FBFBFB",
"foreground": "#403F53",
"muted": "#F0F0F090",
"muted": "#F0F0F0",
"mutedForeground": "#747a7a",
"elevated": "#FFFFFF90",
"elevated": "#FFFFFF",
"elevatedForeground": "#403F53",
"overlay": "#1A1A1A20",
"subtle": "#F0F0F0"
packages/ui/src/lib/theme/themes/nord-dark.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#1F2430",
"foreground": "#E5E9F0",
"muted": "#22293890",
"muted": "#222938",
"mutedForeground": "#7c828e",
"elevated": "#1C202A90",
"elevated": "#1C202A",
"elevatedForeground": "#E5E9F0",
"overlay": "#F8FAFC20",
"subtle": "#272f40"
packages/ui/src/lib/theme/themes/nord-light.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#ECEFF4",
"foreground": "#2E3440",
"muted": "#E4E8F090",
"muted": "#E4E8F0",
"mutedForeground": "#6e7481",
"elevated": "#e7ebf590",
"elevated": "#e7ebf5",
"elevatedForeground": "#2E3440",
"overlay": "#1F253020",
"subtle": "#dee4f0"
packages/ui/src/lib/theme/themes/oc-2-dark.json
+2 -2
View File
@@ -25,9 +25,9 @@
"surface": {
"background": "#121212",
"foreground": "#f1ece8",
"muted": "#1b1b1a90",
"muted": "#1b1b1a",
"mutedForeground": "#cdc8c5",
"elevated": "#15141490",
"elevated": "#151414",
"elevatedForeground": "#f1ece8",
"overlay": "#121212cc",
"subtle": "#282727"
packages/ui/src/lib/theme/themes/oc-2-light.json
+2 -2
View File
@@ -25,9 +25,9 @@
"surface": {
"background": "#f8f8f8",
"foreground": "#161210",
"muted": "#ebebeb90",
"muted": "#ebebeb",
"mutedForeground": "#302c2a",
"elevated": "#f1f1f190",
"elevated": "#f1f1f1",
"elevatedForeground": "#161210",
"overlay": "#f8f8f833",
"subtle": "#e2e2e2"
packages/ui/src/lib/theme/themes/onedarkpro-dark.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#1E222A",
"foreground": "#ABB2BF",
"muted": "#21263190",
"muted": "#212631",
"mutedForeground": "#737a89",
"elevated": "#23283290",
"elevated": "#232832",
"elevatedForeground": "#ABB2BF",
"overlay": "#F6F7FB20",
"subtle": "#2E3442"
packages/ui/src/lib/theme/themes/onedarkpro-light.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#F5F6F8",
"foreground": "#2B303B",
"muted": "#EEF0F490",
"muted": "#EEF0F4",
"mutedForeground": "#6e727b",
"elevated": "#f0f5fa90",
"elevated": "#f0f5fa",
"elevatedForeground": "#2B303B",
"overlay": "#0E111820",
"subtle": "#eaedf4"
packages/ui/src/lib/theme/themes/orng-dark.json
+2 -2
View File
@@ -25,9 +25,9 @@
"surface": {
"background": "#050505",
"foreground": "#eeeeee",
"muted": "#14141490",
"muted": "#141414",
"mutedForeground": "#808080",
"elevated": "#0e0e0e90",
"elevated": "#0e0e0e",
"elevatedForeground": "#eeeeee",
"overlay": "#050505cc",
"subtle": "#1c1c1c"
packages/ui/src/lib/theme/themes/orng-light.json
+2 -2
View File
@@ -25,9 +25,9 @@
"surface": {
"background": "#ffffff",
"foreground": "#181818",
"muted": "#f2f2f290",
"muted": "#f2f2f2",
"mutedForeground": "#8a8a8a",
"elevated": "#f8f8f890",
"elevated": "#f8f8f8",
"elevatedForeground": "#181818",
"overlay": "#ffffff33",
"subtle": "#e9e9e9"
packages/ui/src/lib/theme/themes/rosepine-dark.json
+2 -2
View File
@@ -25,9 +25,9 @@
"surface": {
"background": "#0c0a16",
"foreground": "#e0def5",
"muted": "#1a182490",
"muted": "#1a1824",
"mutedForeground": "#6e6a86",
"elevated": "#14121e90",
"elevated": "#14121e",
"elevatedForeground": "#e0def5",
"overlay": "#0c0a16cc",
"subtle": "#211f2c"
packages/ui/src/lib/theme/themes/rosepine-light.json
+2 -2
View File
@@ -25,9 +25,9 @@
"surface": {
"background": "#fbf5ef",
"foreground": "#454066",
"muted": "#f2ebe890",
"muted": "#f2ebe8",
"mutedForeground": "#9893a5",
"elevated": "#f6f0ec90",
"elevated": "#f6f0ec",
"elevatedForeground": "#454066",
"overlay": "#fbf5ef33",
"subtle": "#ebe5e3"
packages/ui/src/lib/theme/themes/shadesofpurple-dark.json
+2 -2
View File
@@ -25,9 +25,9 @@
"surface": {
"background": "#0e051d",
"foreground": "#f5f0fe",
"muted": "#1d142c90",
"muted": "#1d142c",
"mutedForeground": "#d1ccd8",
"elevated": "#170e2590",
"elevated": "#170e25",
"elevatedForeground": "#f5f0fe",
"overlay": "#0e051dcc",
"subtle": "#251c33"
packages/ui/src/lib/theme/themes/shadesofpurple-light.json
+2 -2
View File
@@ -25,9 +25,9 @@
"surface": {
"background": "#f8effe",
"foreground": "#32224f",
"muted": "#ede4f490",
"muted": "#ede4f4",
"mutedForeground": "#4e406b",
"elevated": "#f3e9f990",
"elevated": "#f3e9f9",
"elevatedForeground": "#32224f",
"overlay": "#f8effe33",
"subtle": "#e6dcee"
packages/ui/src/lib/theme/themes/solarized-dark.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#001e25",
"foreground": "#93A1A1",
"muted": "#02232e90",
"muted": "#02232e",
"mutedForeground": "#6f7475",
"elevated": "#05283290",
"elevated": "#052832",
"elevatedForeground": "#93A1A1",
"overlay": "#FDF6E320",
"subtle": "#042b34"
packages/ui/src/lib/theme/themes/solarized-light.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#FDF6E3",
"foreground": "#586E75",
"muted": "#F6EFDA90",
"muted": "#F6EFDA",
"mutedForeground": "#7a8587",
"elevated": "#FAF3DC90",
"elevated": "#FAF3DC",
"elevatedForeground": "#586E75",
"overlay": "#07364220",
"subtle": "#F6EFDA"
packages/ui/src/lib/theme/themes/tokyonight-dark.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#0F111A",
"foreground": "#C0CAF5",
"muted": "#11142890",
"muted": "#111428",
"mutedForeground": "#6a739d",
"elevated": "#13162990",
"elevated": "#131629",
"elevatedForeground": "#C0CAF5",
"overlay": "#EAEAFF20",
"subtle": "#171b30"
packages/ui/src/lib/theme/themes/tokyonight-light.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#E1E2E7",
"foreground": "#273153",
"muted": "#DEE0EA90",
"muted": "#DEE0EA",
"mutedForeground": "#686e9b",
"elevated": "#dee0ee90",
"elevated": "#dee0ee",
"elevatedForeground": "#273153",
"overlay": "#1C254420",
"subtle": "#dadce6"
packages/ui/src/lib/theme/themes/vercel-dark.json
+2 -2
View File
@@ -25,9 +25,9 @@
"surface": {
"background": "#000000",
"foreground": "#ededed",
"muted": "#0f0f0f90",
"muted": "#0f0f0f",
"mutedForeground": "#878787",
"elevated": "#09090990",
"elevated": "#090909",
"elevatedForeground": "#ededed",
"overlay": "#000000cc",
"subtle": "#171717"
packages/ui/src/lib/theme/themes/vercel-light.json
+2 -2
View File
@@ -25,9 +25,9 @@
"surface": {
"background": "#ffffff",
"foreground": "#161616",
"muted": "#f1f1f190",
"muted": "#f1f1f1",
"mutedForeground": "#666666",
"elevated": "#f8f8f890",
"elevated": "#f8f8f8",
"elevatedForeground": "#161616",
"overlay": "#ffffff33",
"subtle": "#e8e8e8"
packages/ui/src/lib/theme/themes/vesper-dark.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#101010",
"foreground": "#FFFFFF",
"muted": "#14141490",
"muted": "#141414",
"mutedForeground": "#7f7f7f",
"elevated": "#110f0f90",
"elevated": "#110f0f",
"elevatedForeground": "#FFFFFF",
"overlay": "#FFFFFF20",
"subtle": "#232323"
packages/ui/src/lib/theme/themes/vesper-light.json
+2 -2
View File
@@ -19,9 +19,9 @@
"surface": {
"background": "#FFFFFF",
"foreground": "#101010",
"muted": "#F8F8F890",
"muted": "#F8F8F8",
"mutedForeground": "#908d8d",
"elevated": "#F0F0F090",
"elevated": "#F0F0F0",
"elevatedForeground": "#101010",
"overlay": "#00000020",
"subtle": "#f5f3f3"
packages/ui/src/lib/theme/themes/vitesse-dark-dark.json
+2 -2
View File
@@ -23,9 +23,9 @@
"surface": {
"background": "#121212",
"foreground": "#dbd7caee",
"muted": "#17171790",
"muted": "#171717",
"mutedForeground": "#c0beb99c",
"elevated": "#1a1a1a90",
"elevated": "#1a1a1a",
"elevatedForeground": "#dbd7caee",
"overlay": "#12121280",
"subtle": "#212020"
packages/ui/src/lib/theme/themes/vitesse-light-light.json
+2 -2
View File
@@ -23,9 +23,9 @@
"surface": {
"background": "#ffffff",
"foreground": "#2c2c28",
"muted": "#ecebeb90",
"muted": "#ecebeb",
"mutedForeground": "#5b5c54cb",
"elevated": "#f7f7f790",
"elevated": "#f7f7f7",
"elevatedForeground": "#393a34",
"overlay": "#ffffff80",
"subtle": "#ecebeb"
packages/ui/src/lib/theme/themes/zenburn-dark.json
+2 -2
View File
@@ -25,9 +25,9 @@
"surface": {
"background": "#262626",
"foreground": "#dcdccb",
"muted": "#32323190",
"muted": "#323231",
"mutedForeground": "#9f9f9f",
"elevated": "#2d2d2c90",
"elevated": "#2d2d2c",
"elevatedForeground": "#dcdccb",
"overlay": "#262626cc",
"subtle": "#383836"
packages/ui/src/lib/theme/themes/zenburn-light.json
+2 -2
View File
@@ -25,9 +25,9 @@
"surface": {
"background": "#fffff4",
"foreground": "#333333",
"muted": "#f4f4e990",
"muted": "#f4f4e9",
"mutedForeground": "#6f6f6f",
"elevated": "#f9f9ef90",
"elevated": "#f9f9ef",
"elevatedForeground": "#333333",
"overlay": "#fffff433",
"subtle": "#ecece2"
packages/ui/src/styles/design-system.css
+2 -19
View File
@@ -135,29 +135,12 @@
overscroll-behavior-y: none;
}
:root.desktop-runtime:not(.no-vibrancy) body,
:root.desktop-runtime:not(.no-vibrancy) #root {
background: transparent !important;
background-color: transparent !important;
}
:root.desktop-runtime.no-vibrancy body,
:root.desktop-runtime.no-vibrancy #root {
:root.desktop-runtime body,
:root.desktop-runtime #root {
background: var(--background) !important;
background-color: var(--background) !important;
}
/* When vibrancy is off, force sidebar overlays to solid and disable blur. */
:root.desktop-runtime.no-vibrancy {
--sidebar-overlay-strong: var(--sidebar) !important;
--sidebar-overlay-soft: var(--sidebar) !important;
}
:root.desktop-runtime.no-vibrancy .backdrop-blur {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.font-sans {
font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
}
packages/ui/src/styles/mobile.css
+1 -3
View File
@@ -438,7 +438,7 @@
}
@media (display-mode: standalone) {
/* Home indicator blur overlay */
/* Home indicator overlay */
:root.device-mobile:not(.desktop-runtime) body::after {
content: '';
position: fixed;
@@ -454,8 +454,6 @@
rgba(from var(--background) r g b / 0.3) 85%,
transparent 100%
);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 1000;
pointer-events: none;
}