refactor: remove macOS vibrancy support and unify glass surfaces
Drops the macOS vibrancy toggle, IPC, and related settings copy Updates dialogs, popovers, tooltips, and dropdowns to use shared glass styles Adds sticky header fade behavior to model picker and sidebar lists
This commit is contained in:
@@ -16,6 +16,12 @@
|
||||
--oc-scrollbar-thumb: oklch(0.32 0.03 50 / 0.4);
|
||||
--oc-scrollbar-thumb-hover: oklch(0.32 0.03 50 / 0.6);
|
||||
--padding-scale: 1;
|
||||
/* Shared glass surfaces. Semantic surface tokens provide each tint. */
|
||||
--oc-glass-blur: 22px;
|
||||
--oc-glass-opacity: 52%;
|
||||
--oc-glass-popover-opacity: 50%;
|
||||
--oc-glass-tooltip-opacity: 62%;
|
||||
--oc-glass-saturation: 1.24;
|
||||
|
||||
/* Semantic typography defaults (must match SEMANTIC_TYPOGRAPHY) */
|
||||
--text-markdown: 0.9375rem;
|
||||
@@ -63,6 +69,11 @@
|
||||
}
|
||||
|
||||
.dark {
|
||||
--oc-glass-blur: 26px;
|
||||
--oc-glass-opacity: 50%;
|
||||
--oc-glass-popover-opacity: 52%;
|
||||
--oc-glass-tooltip-opacity: 64%;
|
||||
--oc-glass-saturation: 1.16;
|
||||
/* Default Dark Theme - using OKLCH color space */
|
||||
--background: oklch(0.16 0.01 30); /* #151313 */
|
||||
--foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||||
@@ -133,13 +144,6 @@
|
||||
background-color: var(--background) !important;
|
||||
}
|
||||
|
||||
:root.desktop-runtime[data-oc-vibrancy],
|
||||
:root.desktop-runtime[data-oc-vibrancy] body,
|
||||
:root.desktop-runtime[data-oc-vibrancy] #root {
|
||||
background: transparent !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.font-sans {
|
||||
font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
|
||||
}
|
||||
@@ -199,6 +203,90 @@
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Shared translucent surfaces. Each variant only chooses its semantic tint;
|
||||
blur, accessibility fallbacks, and floating-surface elevation stay common.
|
||||
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));
|
||||
backdrop-filter: blur(var(--oc-glass-blur)) saturate(var(--oc-glass-saturation));
|
||||
}
|
||||
|
||||
.oc-glass-popover {
|
||||
--oc-glass-color: var(--surface-elevated);
|
||||
--oc-glass-opacity: var(--oc-glass-popover-opacity);
|
||||
}
|
||||
|
||||
.oc-glass-tooltip {
|
||||
--oc-glass-color: var(--surface-elevated);
|
||||
--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);
|
||||
}
|
||||
|
||||
.oc-glass-floating {
|
||||
box-shadow:
|
||||
inset 0 1px 0 0 rgb(255 255 255 / 0.8),
|
||||
inset 0 0 0 1px rgb(0 0 0 / 0.04),
|
||||
0 0 0 1px rgb(0 0 0 / 0.1),
|
||||
0 1px 2px -0.5px rgb(0 0 0 / 0.08),
|
||||
0 4px 8px -2px rgb(0 0 0 / 0.08),
|
||||
0 12px 20px -4px rgb(0 0 0 / 0.08);
|
||||
}
|
||||
|
||||
.dark .oc-glass-floating {
|
||||
box-shadow:
|
||||
inset 0 1px 0 0 rgb(255 255 255 / 0.12),
|
||||
inset 0 0 0 1px rgb(255 255 255 / 0.08),
|
||||
0 0 0 1px rgb(0 0 0 / 0.36),
|
||||
0 1px 1px -0.5px rgb(0 0 0 / 0.22),
|
||||
0 3px 3px -1.5px rgb(0 0 0 / 0.2),
|
||||
0 6px 6px -3px rgb(0 0 0 / 0.16);
|
||||
}
|
||||
|
||||
.oc-glass-backdrop {
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-transparency: reduce) {
|
||||
.oc-glass-popover,
|
||||
.oc-glass-tooltip,
|
||||
.oc-glass-dialog,
|
||||
.oc-glass-panel,
|
||||
.oc-glass-backdrop {
|
||||
-webkit-backdrop-filter: none;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
.oc-glass-popover,
|
||||
.oc-glass-tooltip,
|
||||
.oc-glass-dialog,
|
||||
.oc-glass-panel {
|
||||
background-color: var(--oc-glass-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--radius-none: 0;
|
||||
--radius-sm: 0.25rem; /* 4px */
|
||||
|
||||
Reference in New Issue
Block a user