Unify modal and inspector glass material

packages/tokens/themes.css

@@ -58,7 +58,7 @@
   --nodedc-primary-action-color: rgb(var(--nodedc-on-accent-rgb));
   --nodedc-primary-action-shadow: 0 12px 28px rgb(var(--nodedc-accent-rgb) / 0.2);
   --nodedc-modal-glass-tint-rgb: 11 11 14;
-  --nodedc-modal-glass-tint-opacity: 0.54;
+  --nodedc-modal-glass-tint-opacity: 0.94;
   --nodedc-modal-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.068), rgba(255, 255, 255, 0.02)), rgb(var(--nodedc-modal-glass-tint-rgb) / var(--nodedc-modal-glass-tint-opacity));
   --nodedc-modal-shadow: 0 34px 120px rgb(0 0 0 / var(--nodedc-modal-glass-shadow-opacity)), 0 10px 32px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.045);
   --nodedc-floating-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), rgba(10, 10, 13, 0.94);
@@ -123,7 +123,7 @@
   --nodedc-primary-action-color: rgba(247, 248, 244, 0.96);
   --nodedc-primary-action-shadow: none;
   --nodedc-modal-glass-tint-rgb: 255 255 255;
-  --nodedc-modal-glass-tint-opacity: 0.72;
+  --nodedc-modal-glass-tint-opacity: 0.94;
   --nodedc-modal-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.36)), rgb(var(--nodedc-modal-glass-tint-rgb) / var(--nodedc-modal-glass-tint-opacity));
   --nodedc-modal-shadow: 0 24px 72px rgb(0 0 0 / var(--nodedc-modal-glass-shadow-light-opacity)), inset 0 1px 0 rgba(255, 255, 255, 0.8);
   --nodedc-floating-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.72)), rgba(255, 255, 255, 0.94);

packages/tokens/tokens.css

@@ -38,9 +38,9 @@
 
   --nodedc-blur-control: 24px;
   --nodedc-blur-panel: 44px;
-  --nodedc-blur-modal: 64px;
-  --nodedc-modal-glass-saturation: 1.38;
-  --nodedc-modal-glass-brightness: 1.06;
+  --nodedc-blur-modal: 44px;
+  --nodedc-modal-glass-saturation: 1.12;
+  --nodedc-modal-glass-brightness: 1.05;
   --nodedc-modal-glass-outline-opacity: 0.11;
   --nodedc-modal-glass-outline-soft-opacity: 0.0495;
   --nodedc-modal-glass-shadow-opacity: 0.64;

packages/ui-core/src/glass.ts

@@ -1,4 +1,5 @@
 export interface GlassMaterialSettings {
+  version?: 4;
   tintHex: string;
   tintOpacity: number;
   blur: number;
@@ -9,11 +10,12 @@ export interface GlassMaterialSettings {
 }
 
 export const defaultGlassMaterial: GlassMaterialSettings = {
+  version: 4,
   tintHex: "#0b0b0e",
-  tintOpacity: 54,
-  blur: 64,
-  saturation: 138,
-  brightness: 106,
+  tintOpacity: 94,
+  blur: 44,
+  saturation: 112,
+  brightness: 105,
   outlineOpacity: 11,
   shadowOpacity: 64,
 };

packages/ui-core/styles.css

@@ -1911,11 +1911,6 @@ textarea.nodedc-field__control {
   overflow: hidden;
   border: 0;
   border-radius: var(--nodedc-radius-modal);
-  background: var(--nodedc-modal-surface);
-  color: var(--nodedc-text-primary);
-  box-shadow: var(--nodedc-modal-shadow);
-  backdrop-filter: blur(var(--nodedc-blur-modal)) saturate(var(--nodedc-modal-glass-saturation)) brightness(var(--nodedc-modal-glass-brightness));
-  -webkit-backdrop-filter: blur(var(--nodedc-blur-modal)) saturate(var(--nodedc-modal-glass-saturation)) brightness(var(--nodedc-modal-glass-brightness));
   animation: nodedc-window-in var(--nodedc-duration-normal) var(--nodedc-ease-standard);
 }
 
@@ -1931,14 +1926,9 @@ textarea.nodedc-field__control {
   width: min(var(--nodedc-inspector-width), calc(100vw - 3rem));
   max-height: calc(100vh - 7.25rem);
   border-radius: var(--nodedc-radius-panel);
-  background: var(--nodedc-modal-surface);
-  box-shadow: var(--nodedc-modal-shadow);
-  backdrop-filter: blur(var(--nodedc-blur-modal)) saturate(var(--nodedc-modal-glass-saturation)) brightness(var(--nodedc-modal-glass-brightness));
-  -webkit-backdrop-filter: blur(var(--nodedc-blur-modal)) saturate(var(--nodedc-modal-glass-saturation)) brightness(var(--nodedc-modal-glass-brightness));
   pointer-events: auto;
 }
 
-.nodedc-window::before,
 .nodedc-glass-material::before {
   position: absolute;
   z-index: -1;

packages/ui-react/src/Window.tsx

@@ -151,7 +151,8 @@ export function Window({
     <div className="nodedc-overlay nodedc-ui-root" data-placement={placement} onPointerDown={handleBackdropPointerDown}>
       <div
         ref={dialogRef}
-        className={cn("nodedc-window nodedc-material-rim", className)}
+        className={cn("nodedc-window nodedc-glass-material nodedc-material-rim", className)}
+        data-material="glass-v4"
         data-size={size === "md" ? undefined : size}
         data-placement={placement}
         data-draggable={draggable ? "true" : undefined}