Release glass material and favicon pipeline v0.6.0

packages/tokens/package.json

@@ -1,8 +1,12 @@
 {
   "name": "@nodedc/tokens",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "type": "module",
-  "files": ["tokens.json", "tokens.css", "themes.css"],
+  "files": [
+    "tokens.json",
+    "tokens.css",
+    "themes.css"
+  ],
   "exports": {
     "./tokens.json": "./tokens.json",
     "./tokens.css": "./tokens.css",

packages/tokens/themes.css

@@ -57,8 +57,10 @@
   --nodedc-primary-action-hover: color-mix(in srgb, rgb(var(--nodedc-accent-rgb)) 84%, white);
   --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-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014)), rgba(7, 7, 10, 0.54);
-  --nodedc-modal-shadow: 0 34px 120px rgba(0, 0, 0, 0.64), 0 10px 32px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.045);
+  --nodedc-modal-glass-tint-rgb: 11 11 14;
+  --nodedc-modal-glass-tint-opacity: 0.54;
+  --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);
 }
 
@@ -120,7 +122,9 @@
   --nodedc-primary-action-hover: rgba(8, 8, 10, 0.98);
   --nodedc-primary-action-color: rgba(247, 248, 244, 0.96);
   --nodedc-primary-action-shadow: none;
-  --nodedc-modal-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.36)), rgba(255, 255, 255, 0.72);
-  --nodedc-modal-shadow: 0 24px 72px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  --nodedc-modal-glass-tint-rgb: 255 255 255;
+  --nodedc-modal-glass-tint-opacity: 0.72;
+  --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

@@ -16,7 +16,7 @@
   --nodedc-header-control-height: 2.78rem;
   --nodedc-header-logo-width: 7.25rem;
   --nodedc-header-logo-height: 1.79rem;
-  --nodedc-inspector-width: 24.375rem;
+  --nodedc-inspector-width: 22.125rem;
   --nodedc-inspector-inner-width: 20.625rem;
   --nodedc-inspector-label-width: 9.625rem;
   --nodedc-inspector-control-width: 10.125rem;
@@ -39,6 +39,12 @@
   --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-modal-glass-outline-opacity: 0.11;
+  --nodedc-modal-glass-outline-soft-opacity: 0.0495;
+  --nodedc-modal-glass-shadow-opacity: 0.64;
+  --nodedc-modal-glass-shadow-light-opacity: 0.24;
   --nodedc-blur-dropdown: 44px;
 
   --nodedc-duration-fast: 120ms;

packages/ui-core/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@nodedc/ui-core",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "type": "module",
-  "files": ["dist", "styles.css"],
+  "files": [
+    "dist",
+    "styles.css"
+  ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -17,6 +20,6 @@
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@nodedc/tokens": "0.5.1"
+    "@nodedc/tokens": "0.6.0"
   }
 }

packages/ui-core/src/glass.ts

@@ -0,0 +1,52 @@
+export interface GlassMaterialSettings {
+  tintHex: string;
+  tintOpacity: number;
+  blur: number;
+  saturation: number;
+  brightness: number;
+  outlineOpacity: number;
+  shadowOpacity: number;
+}
+
+export const defaultGlassMaterial: GlassMaterialSettings = {
+  tintHex: "#0b0b0e",
+  tintOpacity: 54,
+  blur: 64,
+  saturation: 138,
+  brightness: 106,
+  outlineOpacity: 11,
+  shadowOpacity: 64,
+};
+
+function normalizeHex(value: string) {
+  const match = /^#?([0-9a-f]{6})$/i.exec(value.trim());
+  return match ? `#${match[1].toLowerCase()}` : defaultGlassMaterial.tintHex;
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, value));
+}
+
+export function createGlassMaterialVariables(settings: GlassMaterialSettings): Record<string, string> {
+  const tintHex = normalizeHex(settings.tintHex);
+  const red = Number.parseInt(tintHex.slice(1, 3), 16);
+  const green = Number.parseInt(tintHex.slice(3, 5), 16);
+  const blue = Number.parseInt(tintHex.slice(5, 7), 16);
+  return {
+    "--nodedc-modal-glass-tint-rgb": `${red} ${green} ${blue}`,
+    "--nodedc-modal-glass-tint-opacity": String(clamp(settings.tintOpacity, 0, 100) / 100),
+    "--nodedc-blur-modal": `${clamp(settings.blur, 0, 120)}px`,
+    "--nodedc-modal-glass-saturation": String(clamp(settings.saturation, 70, 220) / 100),
+    "--nodedc-modal-glass-brightness": String(clamp(settings.brightness, 70, 160) / 100),
+    "--nodedc-modal-glass-outline-opacity": String(clamp(settings.outlineOpacity, 0, 40) / 100),
+    "--nodedc-modal-glass-outline-soft-opacity": String((clamp(settings.outlineOpacity, 0, 40) / 100) * 0.45),
+    "--nodedc-modal-glass-shadow-opacity": String(clamp(settings.shadowOpacity, 0, 100) / 100),
+    "--nodedc-modal-glass-shadow-light-opacity": String((clamp(settings.shadowOpacity, 0, 100) / 100) * 0.375),
+  };
+}
+
+export function applyGlassMaterial(target: HTMLElement, settings: GlassMaterialSettings) {
+  for (const [name, value] of Object.entries(createGlassMaterialVariables(settings))) {
+    target.style.setProperty(name, value);
+  }
+}

packages/ui-core/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./accent.js";
 export * from "./floating.js";
+export * from "./glass.js";
 export * from "./theme.js";
 export * from "./toolbar.js";

packages/ui-core/styles.css

@@ -1914,8 +1914,8 @@ textarea.nodedc-field__control {
   background: var(--nodedc-modal-surface);
   color: var(--nodedc-text-primary);
   box-shadow: var(--nodedc-modal-shadow);
-  backdrop-filter: blur(var(--nodedc-blur-modal)) saturate(1.38) brightness(1.06);
-  -webkit-backdrop-filter: blur(var(--nodedc-blur-modal)) saturate(1.38) brightness(1.06);
+  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,13 +1931,40 @@ 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-app-panel-surface);
-  box-shadow: var(--nodedc-app-panel-shadow);
-  backdrop-filter: none;
-  -webkit-backdrop-filter: none;
+  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;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: linear-gradient(140deg, rgb(255 255 255 / var(--nodedc-modal-glass-outline-opacity)), transparent 42%, rgb(255 255 255 / var(--nodedc-modal-glass-outline-soft-opacity)));
+  content: "";
+  pointer-events: none;
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+
+.nodedc-glass-material {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  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));
+}
+
 .nodedc-window[data-placement="end"] .nodedc-window__head {
   min-height: 4.875rem;
   padding: 1.125rem 0.75rem 0.875rem 1.625rem;

packages/ui-dom/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@nodedc/ui-dom",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "type": "module",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -16,6 +18,6 @@
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@nodedc/ui-core": "0.5.1"
+    "@nodedc/ui-core": "0.6.0"
   }
 }

packages/ui-react/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@nodedc/ui-react",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "type": "module",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -16,7 +18,7 @@
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@nodedc/ui-core": "0.5.1",
+    "@nodedc/ui-core": "0.6.0",
     "lucide-react": "^0.468.0"
   },
   "peerDependencies": {

packages/ui-react/src/Glass.tsx

@@ -35,3 +35,11 @@ export function GlassSurface({
   );
 }
 
+export interface GlassMaterialSurfaceProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+/** Canonical modal/Inspector material. General application panels must not use it. */
+export function GlassMaterialSurface({ children, className, ...props }: GlassMaterialSurfaceProps) {
+  return <div className={cn("nodedc-glass-material", className)} {...props}>{children}</div>;
+}