glass mode

src/lib/helpers/backgroundUtils.ts

@@ -40,15 +40,19 @@ export const isCustomImageBackground = (
 export const isPatternBackground = (settings: RestaurantBackgroundSettings): boolean =>
   Boolean(settings.bgUrl) && !isCustomImageBackground(settings);
 
-export const colorizeSvg = (svg: string, color: string): string => {
+export const colorizeSvg = (
+  svg: string,
+  color: string,
+  vectorOpacity: number = PATTERN_VECTOR_OPACITY,
+): string => {
   let result = svg.replace(/fill="(?!black|none)[^"]+"/g, `fill="${color}"`);
   result = result.replace(
     /fill-opacity="[^"]+"/g,
-    `fill-opacity="${PATTERN_VECTOR_OPACITY}"`,
+    `fill-opacity="${vectorOpacity}"`,
   );
   result = result.replace(
     /(<(?:path|circle|rect|ellipse|polygon)[^>]*fill="(?!black|none)[^"]+")(?![^>]*fill-opacity)/g,
-    `$1 fill-opacity="${PATTERN_VECTOR_OPACITY}"`,
+    `$1 fill-opacity="${vectorOpacity}"`,
   );
   return result;
 };

src/lib/styles/glassSurface.ts

@@ -0,0 +1,22 @@
+import clsx, { type ClassValue } from "clsx";
+
+export const GLASS_SURFACE = "glass-surface";
+export const GLASS_SURFACE_FLAT = "glass-surface--flat";
+export const GLASS_SURFACE_SELECTED = "glass-surface--selected";
+export const GLASS_SURFACE_NAV = "glass-surface-nav";
+
+export function glassSurfaceNav(...extra: ClassValue[]) {
+  return clsx(GLASS_SURFACE_NAV, extra);
+}
+
+export function glassSurface(...extra: ClassValue[]) {
+  return clsx(GLASS_SURFACE, extra);
+}
+
+export function glassSurfaceFlat(...extra: ClassValue[]) {
+  return clsx(GLASS_SURFACE, GLASS_SURFACE_FLAT, extra);
+}
+
+export function glassSurfaceSelected(...extra: ClassValue[]) {
+  return clsx(GLASS_SURFACE, GLASS_SURFACE_SELECTED, extra);
+}