Release glass material and favicon pipeline v0.6.0

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;