mac-human-design 0.1.3 → 0.1.6

package/src/theme/macosTheme.ts

@@ -1,570 +1,60 @@
-import { createDarkTheme, createLightTheme, type Theme } from "baseui";
-import type { StyleObject } from "styletron-standard";
-
-type ThemedStyle<Props = {}> = (args: { $theme: Theme } & Props) => StyleObject;
-type InputRootStyleProps = {
-  $isFocused?: boolean;
-  $disabled?: boolean;
-  $error?: boolean;
-  $positive?: boolean;
-};
-type ButtonStyleProps = {
-  $kind?: string;
-  $isHovered?: boolean;
-  $isPressed?: boolean;
-  $disabled?: boolean;
-};
-type ToggleStyleProps = {
-  $checked?: boolean;
-  $disabled?: boolean;
-  $isFocusVisible?: boolean;
-};
-type ToggleTrackStyleProps = {
-  $checked?: boolean;
-  $disabled?: boolean;
-};
-type SegmentedStyleProps = {
-  $isActive?: boolean;
-  $focusVisible?: boolean;
-};
-
-const MACOS_FONT_FAMILY =
+export const macosFontFamily =
   '-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif';
 
-function isDarkTheme(theme: Theme): boolean {
-  return theme.name.toLowerCase().includes("dark");
-}
-
-const sharedThemeOverrides = {
-  borders: {
-    radius100: "8px",
-    radius200: "10px",
-    radius300: "12px",
-    radius400: "14px",
-    buttonBorderRadius: "10px",
-    inputBorderRadius: "10px",
-    popoverBorderRadius: "12px",
-    surfaceBorderRadius: "14px",
-    checkboxBorderRadius: "6px",
-    tagBorderRadius: "999px",
-  },
-  typography: {
-    font100: {
-      fontFamily: MACOS_FONT_FAMILY,
-      fontSize: "11px",
-      lineHeight: "16px",
-      fontWeight: 500,
-    },
-    font200: {
-      fontFamily: MACOS_FONT_FAMILY,
-      fontSize: "12px",
-      lineHeight: "18px",
-      fontWeight: 500,
-    },
-    font250: {
-      fontFamily: MACOS_FONT_FAMILY,
-      fontSize: "13px",
-      lineHeight: "18px",
-      fontWeight: 590,
-    },
-    font300: {
-      fontFamily: MACOS_FONT_FAMILY,
-      fontSize: "14px",
-      lineHeight: "20px",
-      fontWeight: 400,
-    },
-    font350: {
-      fontFamily: MACOS_FONT_FAMILY,
-      fontSize: "15px",
-      lineHeight: "21px",
-      fontWeight: 590,
-    },
-    font400: {
-      fontFamily: MACOS_FONT_FAMILY,
-      fontSize: "17px",
-      lineHeight: "22px",
-      fontWeight: 600,
-    },
-    LabelSmall: {
-      fontFamily: MACOS_FONT_FAMILY,
-      fontSize: "12px",
-      lineHeight: "18px",
-      fontWeight: 590,
-    },
-    LabelMedium: {
-      fontFamily: MACOS_FONT_FAMILY,
-      fontSize: "13px",
-      lineHeight: "20px",
-      fontWeight: 590,
-    },
-    HeadingSmall: {
-      fontFamily: MACOS_FONT_FAMILY,
-      fontSize: "18px",
-      lineHeight: "24px",
-      fontWeight: 700,
-    },
-    HeadingMedium: {
-      fontFamily: MACOS_FONT_FAMILY,
-      fontSize: "24px",
-      lineHeight: "30px",
-      fontWeight: 700,
-    },
-  },
-};
-
-export const macosLightTheme = createLightTheme({
-  ...sharedThemeOverrides,
-  colors: {
-    primary: "#0a84ff",
-    primaryA: "#0a84ff",
-    primaryB: "#0066cc",
-    accent: "#0a84ff",
-    backgroundPrimary: "rgba(232, 236, 245, 0.58)",
-    backgroundSecondary: "rgba(255, 255, 255, 0.44)",
-    backgroundTertiary: "rgba(244, 245, 249, 0.48)",
-    contentPrimary: "#1d1d1f",
-    contentSecondary: "#3a3a3c",
-    contentTertiary: "#6e6e73",
-    borderOpaque: "#bec3cf",
-    borderTransparent: "#d3d6df",
-    borderSelected: "#0a84ff",
-    buttonPrimaryFill: "#0a84ff",
-    buttonPrimaryText: "#ffffff",
-    buttonPrimaryHover: "#158aff",
-    buttonPrimaryActive: "#0066cc",
-    buttonSecondaryFill: "#f5f6fa",
-    buttonSecondaryText: "#1d1d1f",
-    buttonSecondaryHover: "#eceef5",
-    buttonSecondaryActive: "#dfe3ed",
-    inputBorder: "#c8ccd8",
-    inputFill: "#ffffff",
-    inputFillDisabled: "#f1f2f6",
-    inputFillActive: "#ffffff",
-    inputTextDisabled: "#7f7f86",
-    inputPlaceholder: "#8a8a92",
-    inputPlaceholderDisabled: "#b0b2b9",
-    inputEnhancerFill: "#f5f6fa",
-    toggleTrackFill: "#d7d9e0",
-    toggleTrackFillDisabled: "#e5e7ed",
-    toggleFill: "#ffffff",
-    toggleFillChecked: "#ffffff",
-    toggleFillDisabled: "#f8f9fc",
-    notificationPositiveBackground: "#e8fff3",
-    notificationPositiveText: "#046c4e",
-    notificationNegativeBackground: "#fff1f0",
-    notificationNegativeText: "#b42318",
-    notificationInfoBackground: "#edf4ff",
-    notificationInfoText: "#1d4ed8",
-  },
-  lighting: {
-    shadow400: "0 12px 30px rgba(15, 23, 42, 0.12)",
-    shadow500: "0 18px 40px rgba(15, 23, 42, 0.16)",
-  },
-});
-
-export const macosDarkTheme = createDarkTheme({
-  ...sharedThemeOverrides,
-  colors: {
-    primary: "#0a84ff",
-    primaryA: "#0a84ff",
-    primaryB: "#409cff",
-    accent: "#0a84ff",
-    backgroundPrimary: "rgba(26, 27, 34, 0.62)",
-    backgroundSecondary: "rgba(42, 43, 51, 0.52)",
-    backgroundTertiary: "rgba(53, 55, 66, 0.56)",
-    contentPrimary: "#f5f7fb",
-    contentSecondary: "#d8d9df",
-    contentTertiary: "#aeb0ba",
-    borderOpaque: "#51545f",
-    borderTransparent: "#646874",
-    borderSelected: "#0a84ff",
-    buttonPrimaryFill: "#0a84ff",
-    buttonPrimaryText: "#ffffff",
-    buttonPrimaryHover: "#3395ff",
-    buttonPrimaryActive: "#006edb",
-    buttonSecondaryFill: "#373944",
-    buttonSecondaryText: "#f5f7fb",
-    buttonSecondaryHover: "#41444f",
-    buttonSecondaryActive: "#4b4f5b",
-    inputBorder: "#666a76",
-    inputFill: "#2d2f39",
-    inputFillDisabled: "#262831",
-    inputFillActive: "#2d2f39",
-    inputTextDisabled: "#8e8e93",
-    inputPlaceholder: "#8f919d",
-    inputPlaceholderDisabled: "#6e6e73",
-    inputEnhancerFill: "#363844",
-    toggleTrackFill: "#494d5a",
-    toggleTrackFillDisabled: "#3f424d",
-    toggleFill: "#ffffff",
-    toggleFillChecked: "#ffffff",
-    toggleFillDisabled: "#d1d4de",
-    notificationPositiveBackground: "#073d2c",
-    notificationPositiveText: "#77f2c0",
-    notificationNegativeBackground: "#4a1415",
-    notificationNegativeText: "#fda29b",
-    notificationInfoBackground: "#1b3168",
-    notificationInfoText: "#c6dbff",
-  },
-  lighting: {
-    shadow400: "0 14px 34px rgba(0, 0, 0, 0.5)",
-    shadow500: "0 20px 50px rgba(0, 0, 0, 0.62)",
-  },
-});
-
-export const macosWindowOverrides = {
-  Block: {
-    style: (({ $theme }: { $theme: Theme }) => {
-      const dark = isDarkTheme($theme);
-      return {
-        borderRadius: "18px",
-        overflow: "hidden",
-        border: `1px solid ${$theme.colors.borderTransparent}`,
-        background: dark
-          ? "linear-gradient(180deg, rgba(43,45,55,0.92) 0%, rgba(34,35,43,0.92) 100%)"
-          : "linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(248,249,253,0.94) 100%)",
-        backdropFilter: "saturate(180%) blur(30px)",
-        boxShadow: dark
-          ? "0 24px 64px rgba(0, 0, 0, 0.55)"
-          : "0 24px 64px rgba(15, 23, 42, 0.18)",
-      };
-    }) as ThemedStyle,
-  },
-};
-
-export const macosPanelOverrides = {
-  Block: {
-    style: (({ $theme }: { $theme: Theme }) => {
-      const dark = isDarkTheme($theme);
-      return {
-        backgroundColor: "transparent",
-        border: `1px solid ${$theme.colors.borderTransparent}`,
-        borderRadius: dark ? "10px" : "10px",
-        boxShadow: "none",
-      };
-    }) as ThemedStyle,
-  },
-};
-
-export const macosFormControlOverrides = {
-  ControlContainer: {
-    style: ({ $theme }: { $theme: Theme }) => ({
-      marginBottom: $theme.sizing.scale500,
-    }),
-  },
-  LabelContainer: {
-    style: ({ $theme }: { $theme: Theme }) => ({
-      marginTop: $theme.sizing.scale0,
-      marginBottom: $theme.sizing.scale200,
-    }),
-  },
-  Label: {
-    style: ({ $theme }: { $theme: Theme }) => ({
-      fontFamily: MACOS_FONT_FAMILY,
-      fontSize: "13px",
-      lineHeight: "18px",
-      fontWeight: 590,
-      letterSpacing: "-0.01em",
-      color: $theme.colors.contentPrimary,
-    }),
-  },
-  Caption: {
-    style: ({ $theme }: { $theme: Theme }) => ({
-      fontFamily: MACOS_FONT_FAMILY,
-      fontSize: "12px",
-      lineHeight: "16px",
-      marginTop: $theme.sizing.scale200,
-      marginBottom: $theme.sizing.scale100,
-    }),
-  },
-};
-
-export const macosCheckboxOverrides = {
-  Root: {
-    style: ({ $theme }: { $theme: Theme }) => ({
-      alignItems: "center",
-      marginBottom: $theme.sizing.scale300,
-    }),
-  },
-  Label: {
-    style: ({ $theme }: { $theme: Theme }) => ({
-      fontFamily: MACOS_FONT_FAMILY,
-      fontSize: "13px",
-      lineHeight: "20px",
-      color: $theme.colors.contentPrimary,
-    }),
-  },
-  ToggleTrack: {
-    style: (({ $theme, $checked, $disabled }: { $theme: Theme } & ToggleTrackStyleProps) => ({
-      width: "38px",
-      height: "22px",
-      borderRadius: "999px",
-      margin: 0,
-      padding: "2px",
-      border: `1px solid ${$theme.colors.borderTransparent}`,
-      backgroundColor: $disabled
-        ? $theme.colors.toggleTrackFillDisabled
-        : $checked
-          ? $theme.colors.primary
-          : $theme.colors.toggleTrackFill,
-    })) as ThemedStyle<ToggleTrackStyleProps>,
-  },
-  Toggle: {
-    style: (({ $theme, $checked, $isFocusVisible }: { $theme: Theme } & ToggleStyleProps) => ({
-      width: "18px",
-      height: "18px",
-      borderRadius: "999px",
-      boxShadow: $isFocusVisible
-        ? `0 0 0 3px ${$theme.colors.primary}44`
-        : "0 1px 2px rgba(0, 0, 0, 0.26)",
-      transform: $checked
-        ? `translateX(${ $theme.direction === "rtl" ? "-16px" : "16px" })`
-        : "translateX(0)",
-      transition: "transform 160ms cubic-bezier(0.22, 1, 0.36, 1)",
-    })) as ThemedStyle<ToggleStyleProps>,
-  },
-};
-
-export const macosButtonOverrides = {
-  BaseButton: {
-    style: (({
-      $theme,
-      $kind,
-      $isHovered,
-      $isPressed,
-      $disabled,
-    }: { $theme: Theme } & ButtonStyleProps) => {
-      const dark = isDarkTheme($theme);
-      const isPrimary = $kind === "primary";
-      const isSecondary = $kind === "secondary";
-
-      const primaryBackground = dark
-        ? "linear-gradient(180deg, #2994ff 0%, #0a84ff 100%)"
-        : "linear-gradient(180deg, #2e95ff 0%, #0a84ff 100%)";
-
-      const secondaryBackground = dark
-        ? "linear-gradient(180deg, #474b58 0%, #3b3e4a 100%)"
-        : "linear-gradient(180deg, #ffffff 0%, #f0f2f7 100%)";
-
-      return {
-        borderRadius: $theme.borders.buttonBorderRadius,
-        fontFamily: MACOS_FONT_FAMILY,
-        fontWeight: 590,
-        fontSize: "13px",
-        letterSpacing: "-0.01em",
-        minHeight: "32px",
-        borderWidth: "1px",
-        borderStyle: "solid",
-        borderColor: isPrimary
-          ? "transparent"
-          : isSecondary
-            ? $theme.colors.borderTransparent
-            : "transparent",
-        backgroundImage: isPrimary
-          ? primaryBackground
-          : isSecondary
-            ? secondaryBackground
-            : "none",
-        boxShadow: isPrimary
-          ? dark
-            ? "0 1px 0 rgba(255,255,255,0.12) inset"
-            : "0 1px 0 rgba(255,255,255,0.6) inset"
-          : isSecondary
-            ? dark
-              ? "0 1px 0 rgba(255,255,255,0.08) inset"
-              : "0 1px 0 rgba(255,255,255,0.9) inset"
-            : "none",
-        transform: $isPressed ? "translateY(1px)" : "translateY(0)",
-        opacity: $disabled ? 0.55 : 1,
-        filter: $isHovered && !$disabled ? "brightness(1.03)" : "none",
-        transition:
-          "background-color 120ms ease, transform 120ms ease, filter 120ms ease",
-      };
-    }) as ThemedStyle<ButtonStyleProps>,
-  },
-};
-
-export const macosListRowButtonOverrides = {
-  BaseButton: {
-    style: (({ $theme }: { $theme: Theme }) => ({
-      justifyContent: "flex-start",
-      borderRadius: "0",
-      borderWidth: "0",
-      borderStyle: "solid",
-      borderColor: "transparent",
-      borderBottomWidth: "1px",
-      borderBottomColor: $theme.colors.borderTransparent,
-      backgroundColor: "transparent",
-      boxShadow: "none",
-      paddingTop: $theme.sizing.scale300,
-      paddingBottom: $theme.sizing.scale300,
-      paddingLeft: $theme.sizing.scale200,
-      paddingRight: $theme.sizing.scale200,
-      textAlign: "left",
-      minHeight: "auto",
-      ":hover": {
-        backgroundColor: isDarkTheme($theme)
-          ? "rgba(255,255,255,0.04)"
-          : "rgba(10,132,255,0.06)",
-      },
-      ":active": {
-        backgroundColor: isDarkTheme($theme)
-          ? "rgba(255,255,255,0.07)"
-          : "rgba(10,132,255,0.1)",
-      },
-    })) as ThemedStyle,
-  },
-};
-
-export const macosProfileCardButtonOverrides = macosListRowButtonOverrides;
-
-export const macosTextButtonOverrides = {
-  BaseButton: {
-    style: (({ $theme }: { $theme: Theme }) => ({
-      paddingTop: 0,
-      paddingBottom: 0,
-      paddingLeft: 0,
-      paddingRight: 0,
-      minHeight: "auto",
-      borderWidth: 0,
-      borderRadius: 0,
-      color: $theme.colors.primary,
-    })) as ThemedStyle,
-  },
-};
-
-export const macosSegmentedControlOverrides = {
-  Root: {
-    style: (({ $theme }: { $theme: Theme }) => {
-      const dark = isDarkTheme($theme);
-      return {
-        backgroundColor: dark ? "rgba(255,255,255,0.06)" : "rgba(118,118,128,0.12)",
-        borderRadius: "8px",
-        border: `1px solid ${dark ? "rgba(255,255,255,0.14)" : "rgba(60,60,67,0.22)"}`,
-        padding: "2px",
-        boxShadow: dark
-          ? "inset 0 1px 1px rgba(0,0,0,0.35)"
-          : "inset 0 1px 1px rgba(255,255,255,0.85)",
-        height: "30px",
-      };
-    }) as ThemedStyle,
-  },
-  SegmentList: {
-    style: (() => ({
-      backgroundColor: "transparent",
-      minHeight: "24px",
-    })) as ThemedStyle,
-  },
-  Active: {
-    style: (({ $theme }: { $theme: Theme }) => {
-      const dark = isDarkTheme($theme);
-      return {
-        borderRadius: "6px",
-        border: `1px solid ${dark ? "rgba(255,255,255,0.16)" : "rgba(60,60,67,0.26)"}`,
-        backgroundColor: dark ? "rgba(255,255,255,0.18)" : "rgba(255,255,255,0.96)",
-        boxShadow: dark
-          ? "0 1px 0 rgba(255,255,255,0.12) inset, 0 1px 2px rgba(0,0,0,0.5)"
-          : "0 1px 0 rgba(255,255,255,0.9) inset, 0 1px 2px rgba(0,0,0,0.2)",
-      };
-    }) as ThemedStyle,
-  },
-};
-
-export const macosSegmentOverrides = {
-  Segment: {
-    style: (({ $theme, $isActive, $focusVisible }: { $theme: Theme } & SegmentedStyleProps) => ({
-      borderRadius: "6px",
-      minHeight: "24px",
-      paddingTop: "0",
-      paddingBottom: "0",
-      paddingLeft: $theme.sizing.scale400,
-      paddingRight: $theme.sizing.scale400,
-      color: $isActive ? $theme.colors.contentPrimary : $theme.colors.contentSecondary,
-      boxShadow: "none",
-      outline: $focusVisible ? `2px solid ${$theme.colors.primary}` : "none",
-      outlineOffset: "-2px",
-      transition: "color 120ms ease",
-      ":hover": {
-        boxShadow: "none",
-        color: $isActive ? $theme.colors.contentPrimary : $theme.colors.contentPrimary,
-      },
-    })) as ThemedStyle<SegmentedStyleProps>,
-  },
-  LabelBlock: {
-    style: (() => ({
-      gap: "0",
-    })) as ThemedStyle,
-  },
-  Label: {
-    style: (() => ({
-      fontFamily: MACOS_FONT_FAMILY,
-      fontSize: "12px",
-      lineHeight: "16px",
-      fontWeight: 590,
-      letterSpacing: "-0.01em",
-    })) as ThemedStyle,
-  },
-};
-
-export const macosInputOverrides = {
-  Root: {
-    style: (({
-      $theme,
-      $isFocused,
-      $disabled,
-      $error,
-      $positive,
-    }: { $theme: Theme } & InputRootStyleProps) => {
-      const dark = isDarkTheme($theme);
-
-      let borderColor = $theme.colors.inputBorder;
-      if ($error) {
-        borderColor = $theme.colors.inputBorderError;
-      } else if ($positive) {
-        borderColor = $theme.colors.inputBorderPositive;
-      } else if ($isFocused) {
-        borderColor = $theme.colors.primary;
-      }
-
-      return {
-        borderRadius: $theme.borders.inputBorderRadius,
-        borderWidth: "1px",
-        borderLeftWidth: "1px",
-        borderRightWidth: "1px",
-        borderTopWidth: "1px",
-        borderBottomWidth: "1px",
-        borderLeftColor: borderColor,
-        borderRightColor: borderColor,
-        borderTopColor: borderColor,
-        borderBottomColor: borderColor,
-        backgroundColor: $disabled ? $theme.colors.inputFillDisabled : $theme.colors.inputFill,
-        boxShadow: $isFocused
-          ? `0 0 0 3px ${$theme.colors.primary}44`
-          : dark
-            ? "inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.38)"
-            : "inset 0 1px 0 rgba(255,255,255,0.96), inset 0 -1px 0 rgba(15,23,42,0.08)",
-        transition:
-          "border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease",
-      };
-    }) as ThemedStyle<InputRootStyleProps>,
-  },
-  Input: {
-    style: (({ $theme }: { $theme: Theme }) => ({
-      fontFamily: MACOS_FONT_FAMILY,
-      fontWeight: 400,
-      fontSize: "14px",
-      lineHeight: "20px",
-      letterSpacing: "-0.01em",
-      color: $theme.colors.contentPrimary,
-    })) as ThemedStyle,
-  },
-};
-
-export const macosNotificationOverrides = {
-  Body: {
-    style: (({ $theme }: { $theme: Theme }) => ({
-      borderRadius: $theme.borders.radius200,
-      border: `1px solid ${$theme.colors.borderTransparent}`,
-    })) as ThemedStyle,
-  },
-};
+export const macosColorTokens = {
+  accent: "#0a84ff",
+  accentActive: "#006edb",
+  destructive: "#ff453a",
+  success: "#32d74b",
+  text: "var(--hd-mac-text)",
+  secondaryText: "var(--hd-mac-secondary-text)",
+  mutedText: "var(--hd-mac-muted-text)",
+  surface: "var(--hd-mac-surface)",
+  panel: "var(--hd-mac-panel)",
+  raised: "var(--hd-mac-raised)",
+  fill: "var(--hd-mac-fill)",
+  border: "var(--hd-mac-border)",
+} as const;
+
+export const macosRadiusTokens = {
+  control: "7px",
+  segmentedControl: "8px",
+  menu: "10px",
+  panel: "12px",
+  dialog: "14px",
+  window: "18px",
+  pill: "999px",
+} as const;
+
+export const macosClassNames = {
+  root: "hd-mac",
+  button: "hd-mac-button",
+  primaryButton: "hd-mac-button hd-mac-button-primary",
+  destructiveButton: "hd-mac-button hd-mac-button-destructive",
+  plainButton: "hd-mac-button hd-mac-button-plain",
+  input: "hd-mac-input",
+  label: "hd-mac-label",
+  popup: "hd-mac hd-mac-popup",
+  dialog: "hd-mac hd-mac-dialog",
+  toolbar: "hd-mac-toolbar",
+  toggleGroup: "hd-mac-toggle-group",
+  toggle: "hd-mac-toggle",
+} as const;
+
+export const macosLightTheme = {
+  name: "macos-light",
+  colors: macosColorTokens,
+  radii: macosRadiusTokens,
+  fontFamily: macosFontFamily,
+} as const;
+
+export const macosDarkTheme = {
+  name: "macos-dark",
+  colors: macosColorTokens,
+  radii: macosRadiusTokens,
+  fontFamily: macosFontFamily,
+} as const;
+
+export const macosWindowClassName = "hd-mac-window";
+export const macosPanelClassName = "hd-mac-panel";
+export const macosFormClassName = "hd-mac-form";

package/src/types/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/src-tauri/Cargo.toml

@@ -19,3 +19,4 @@ objc2-app-kit = { version = "0.3", features = [
   "NSImageRep",
 ] }
 objc2-foundation = { version = "0.3", features = ["NSArray", "NSData", "NSDictionary", "NSString"] }
+window-vibrancy = "0.6"

package/src-tauri/src/lib.rs

@@ -1,10 +1,48 @@
 use tauri::plugin::{Builder, TauriPlugin};
 
 mod system_symbols;
+pub use system_symbols::system_symbol_png_data_url;
+
+#[cfg(target_os = "macos")]
+use tauri::Manager;
+#[cfg(target_os = "macos")]
+use window_vibrancy::{apply_vibrancy, NSVisualEffectMaterial};
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn init<R: tauri::Runtime>() -> TauriPlugin<R> {
     Builder::new("human-design-system-symbols")
-        .invoke_handler(tauri::generate_handler![system_symbols::system_symbol_png_data_url])
+        .invoke_handler(tauri::generate_handler![system_symbol_png_data_url])
         .build()
 }
+
+#[cfg(target_os = "macos")]
+pub fn apply_macos_hud_window_vibrancy<R, M>(
+    manager: &M,
+    window_label: &str,
+) -> Result<(), std::io::Error>
+where
+    R: tauri::Runtime,
+    M: Manager<R>,
+{
+    let window = manager.get_webview_window(window_label).ok_or_else(|| {
+        std::io::Error::new(
+            std::io::ErrorKind::NotFound,
+            format!("Window '{window_label}' was not found."),
+        )
+    })?;
+
+    apply_vibrancy(&window, NSVisualEffectMaterial::HudWindow, None, None).map_err(|error| {
+        std::io::Error::other(format!("Failed to apply macOS vibrancy: {error}"))
+    })
+}
+
+#[cfg(not(target_os = "macos"))]
+pub fn apply_macos_hud_window_vibrancy<R, M>(
+    _manager: &M,
+    _window_label: &str,
+) -> Result<(), std::io::Error>
+where
+    R: tauri::Runtime,
+{
+    Ok(())
+}