feat: Added translucency effect to menus, dialogs and alerts. Can be turned off from Preferences > Appeareance (#2387) [skip e2e]

packages/models/src/Domain/Syncable/UserPrefs/PrefDefaults.ts

@@ -28,6 +28,7 @@ export const PrefDefaults = {
   [PrefKey.NotesHideTags]: false,
   [PrefKey.NotesHideEditorIcon]: false,
   [PrefKey.UseSystemColorScheme]: false,
+  [PrefKey.UseTranslucentUI]: true,
   [PrefKey.AutoLightThemeIdentifier]: 'Default',
   [PrefKey.AutoDarkThemeIdentifier]: NativeFeatureIdentifier.TYPES.DarkTheme,
   [PrefKey.NoteAddToParentFolders]: true,

packages/models/src/Domain/Syncable/UserPrefs/PrefKey.ts

@@ -29,6 +29,7 @@ export enum PrefKey {
   NotesHideTags = 'hideTags',
   NotesHideEditorIcon = 'hideEditorIcon',
   UseSystemColorScheme = 'useSystemColorScheme',
+  UseTranslucentUI = 'useTranslucentUI',
   AutoLightThemeIdentifier = 'autoLightThemeIdentifier',
   AutoDarkThemeIdentifier = 'autoDarkThemeIdentifier',
   NoteAddToParentFolders = 'noteAddToParentFolders',
@@ -66,6 +67,7 @@ export type PrefValue = {
   [PrefKey.NotesHideTags]: boolean
   [PrefKey.NotesHideEditorIcon]: boolean
   [PrefKey.UseSystemColorScheme]: boolean
+  [PrefKey.UseTranslucentUI]: boolean
   [PrefKey.AutoLightThemeIdentifier]: string
   [PrefKey.AutoDarkThemeIdentifier]: string
   [PrefKey.NoteAddToParentFolders]: boolean

packages/ui-services/src/Theme/Color.spec.ts

@@ -0,0 +1,64 @@
+import { Color } from './Color'
+
+describe('Color', () => {
+  it('should throw an error if the color is invalid', () => {
+    expect(() => new Color('#ff')).toThrowError('Invalid color')
+  })
+
+  it('should parse a rgb string', () => {
+    const color = new Color('rgb(255, 0, 0)')
+    expect(color.r).toBe(255)
+    expect(color.g).toBe(0)
+    expect(color.b).toBe(0)
+    expect(color.a).toBe(1)
+  })
+
+  it('should throw error if rgb string is invalid', () => {
+    expect(() => new Color('rgb(255, 0)')).toThrowError('Invalid color')
+    expect(() => new Color('rgb(266, -1, 0)')).toThrowError('Invalid color')
+  })
+
+  it('should parse a hex string', () => {
+    const color = new Color('#ff0000')
+    expect(color.r).toBe(255)
+    expect(color.g).toBe(0)
+    expect(color.b).toBe(0)
+    expect(color.a).toBe(1)
+  })
+
+  it('should throw error if hex string is invalid', () => {
+    expect(() => new Color('#ff')).toThrowError('Invalid color')
+    expect(() => new Color('#ff000')).toThrowError('Invalid color')
+    expect(() => new Color('#ff00000')).toThrowError('Invalid color')
+  })
+
+  it('should set the alpha value', () => {
+    const color = new Color('rgb(255, 0, 0)')
+    color.setAlpha(0.5)
+    expect(color.a).toBe(0.5)
+  })
+
+  it('should throw error if alpha value is invalid', () => {
+    const color = new Color('rgb(255, 0, 0)')
+    expect(() => color.setAlpha(-1)).toThrowError('Invalid alpha value')
+    expect(() => color.setAlpha(1.1)).toThrowError('Invalid alpha value')
+  })
+
+  it('should convert to string', () => {
+    const color = new Color('rgb(255, 0, 0)')
+    color.setAlpha(0.5)
+    expect(color.toString()).toBe('rgba(255, 0, 0, 0.5)')
+  })
+
+  it('should return correct isDark value', () => {
+    const autobiographyThemeBG = 'rgb(237, 228, 218)'
+    const darkThemeBG = 'rgb(15, 16, 17)'
+    const solarizedThemeBG = 'rgb(0, 43, 54)'
+    const titaniumThemeBG = 'rgb(238, 239, 241)'
+
+    expect(new Color(autobiographyThemeBG).isDark()).toBe(false)
+    expect(new Color(darkThemeBG).isDark()).toBe(true)
+    expect(new Color(solarizedThemeBG).isDark()).toBe(true)
+    expect(new Color(titaniumThemeBG).isDark()).toBe(false)
+  })
+})

packages/ui-services/src/Theme/Color.ts

@@ -0,0 +1,84 @@
+const RGBRegex = /-?\b[0-9]{1,3}\b/g
+
+export class Color {
+  r: number = 0
+  g: number = 0
+  b: number = 0
+  a: number = 1
+
+  constructor(color: string) {
+    if (color.startsWith('rgb')) {
+      this.setFromRGB(color)
+    } else if (color.startsWith('#')) {
+      this.setFromHex(color)
+    } else {
+      throw new Error('Invalid color')
+    }
+  }
+
+  /**
+   * Sets the color from a hex string
+   * @param hex - The hex string to set
+   */
+  setFromHex(hex: string) {
+    if (!hex.startsWith('#')) {
+      throw new Error('Invalid color')
+    }
+    const hexValue = hex.substring(1)
+    if (hexValue.length !== 3 && hexValue.length !== 6) {
+      throw new Error('Invalid color')
+    }
+    const r = parseInt(hexValue.substring(0, 2), 16)
+    const g = parseInt(hexValue.substring(2, 4), 16)
+    const b = parseInt(hexValue.substring(4, 6), 16)
+    this.r = r
+    this.g = g
+    this.b = b
+  }
+
+  /**
+   * Sets the color from an RGB string
+   * @param color - The RGB string to set
+   */
+  setFromRGB(color: string) {
+    if (!color.startsWith('rgb')) {
+      throw new Error('Invalid color')
+    }
+    const regexMatches = color.match(RGBRegex)
+    if (!regexMatches || regexMatches.length !== 3) {
+      throw new Error('Invalid color')
+    }
+    const [r, g, b] = regexMatches.map((value) => parseInt(value, 10))
+    if (r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255) {
+      throw new Error('Invalid color')
+    }
+    this.r = r
+    this.g = g
+    this.b = b
+  }
+
+  /**
+   * Sets the alpha value of the color
+   * @param alpha - The alpha value to set (0-1)
+   */
+  setAlpha(alpha: number) {
+    if (alpha < 0 || alpha > 1) {
+      throw new Error('Invalid alpha value')
+    }
+    this.a = alpha
+    return this
+  }
+
+  toString() {
+    return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a})`
+  }
+
+  /**
+   * Returns true if the color is dark
+   * Based on RGB->YIQ equation https://24ways.org/2010/calculating-color-contrast
+   */
+  isDark() {
+    const yiq = (this.r * 299 + this.g * 587 + this.b * 114) / 1000
+    return yiq <= 128
+  }
+}

packages/ui-services/src/Theme/ThemeManager.ts

@@ -5,6 +5,7 @@ import {
   LocalStorageDecryptedContextualPayload,
   PrefKey,
   ThemeInterface,
+  PrefDefaults,
 } from '@standardnotes/models'
 import {
   InternalEventBusInterface,
@@ -21,6 +22,7 @@ import { AbstractUIServicee } from '../Abstract/AbstractUIService'
 import { GetAllThemesUseCase } from './GetAllThemesUseCase'
 import { Uuid } from '@standardnotes/domain-core'
 import { ActiveThemeList } from './ActiveThemeList'
+import { Color } from './Color'
 
 const CachedThemesKey = 'cachedThemes'
 const TimeBeforeApplyingColorScheme = 5
@@ -82,6 +84,8 @@ export class ThemeManager extends AbstractUIServicee {
           return
         }
 
+        this.toggleTranslucentUIColors()
+
         let hasChange = false
 
         const { features, uuids } = this.components.getActiveThemesIdentifiers()
@@ -169,6 +173,8 @@ export class ThemeManager extends AbstractUIServicee {
   }
 
   private async handlePreferencesChangeEvent() {
+    this.toggleTranslucentUIColors()
+
     const useDeviceThemeSettings = this.application.getPreference(PrefKey.UseSystemColorScheme, false)
 
     const hasPreferenceChanged = useDeviceThemeSettings !== this.lastUseDeviceThemeSettings
@@ -339,6 +345,8 @@ export class ThemeManager extends AbstractUIServicee {
             .handleThemeSchemeChange(packageInfo.isDark ?? false, this.getBackgroundColor())
         })
       }
+
+      this.toggleTranslucentUIColors()
     }
     document.getElementsByTagName('head')[0].appendChild(link)
   }
@@ -356,8 +364,11 @@ export class ThemeManager extends AbstractUIServicee {
 
     this.themesActiveInTheUI.remove(id)
 
-    if (this.themesActiveInTheUI.isEmpty() && this.application.isNativeMobileWeb()) {
+    if (this.themesActiveInTheUI.isEmpty()) {
-      this.application.mobileDevice().handleThemeSchemeChange(false, '#ffffff')
+      if (this.application.isNativeMobileWeb()) {
+        this.application.mobileDevice().handleThemeSchemeChange(false, '#ffffff')
+      }
+      this.toggleTranslucentUIColors()
     }
   }
 
@@ -366,6 +377,31 @@ export class ThemeManager extends AbstractUIServicee {
     return bgColor.length ? bgColor : '#ffffff'
   }
 
+  private shouldUseTranslucentUI() {
+    return this.application.getPreference(PrefKey.UseTranslucentUI, PrefDefaults[PrefKey.UseTranslucentUI])
+  }
+
+  private toggleTranslucentUIColors() {
+    if (!this.shouldUseTranslucentUI()) {
+      document.documentElement.style.removeProperty('--popover-background-color')
+      document.documentElement.style.removeProperty('--popover-backdrop-filter')
+      document.body.classList.remove('translucent-ui')
+      return
+    }
+    try {
+      const backgroundColor = new Color(this.getBackgroundColor())
+      const backdropFilter = backgroundColor.isDark()
+        ? 'blur(12px) saturate(190%) contrast(70%) brightness(80%)'
+        : 'blur(12px) saturate(190%) contrast(50%) brightness(130%)'
+      const translucentBackgroundColor = backgroundColor.setAlpha(0.65).toString()
+      document.documentElement.style.setProperty('--popover-background-color', translucentBackgroundColor)
+      document.documentElement.style.setProperty('--popover-backdrop-filter', backdropFilter)
+      document.body.classList.add('translucent-ui')
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
   /**
    * Syncs the active theme's background color to the 'theme-color' meta tag
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color

packages/web/src/components/assets/org.standardnotes.theme-focus/index.css

@@ -47,5 +47,10 @@
   --sn-stylekit-menu-border: 1px solid #424242;
   --navigation-item-selected-background-color: var(--background-color);
   --normal-button-background-color: var(--sn-stylekit-passive-color-5);
-  --menu-border-color: var(--sn-stylekit-border-color);
+  --popover-border-color: var(--sn-stylekit-passive-color-3);
+  --separator-color: var(--sn-stylekit-passive-color-3);
+}
+
+.translucent-ui [role='dialog'] {
+  --sn-stylekit-border-color: var(--sn-stylekit-passive-color-3);
 }

packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx

@@ -40,10 +40,13 @@ const AlertDialog = ({
       />
       <div
         className={classNames(
-          'z-[1] w-[95vw] rounded border border-border bg-default px-6 py-5 shadow-xl md:w-auto',
+          'w-[95vw] rounded border border-[--popover-border-color] bg-[--popover-background-color] px-6 py-5 shadow-xl md:w-auto',
           !className?.includes('max-w-') && 'max-w-[600px]',
           className,
         )}
+        style={{
+          backdropFilter: 'var(--popover-backdrop-filter)',
+        }}
       >
         {children}
       </div>

packages/web/src/javascripts/Components/ChallengeModal/ChallengeModal.tsx

@@ -253,7 +253,7 @@ const ChallengeModal: FunctionComponent<Props> = ({
         close={cancelChallenge}
         className={{
           content: classNames(
-            'sn-component challenge-modal relative m-0 flex h-full w-full flex-col items-center rounded border-solid border-border bg-default p-0 md:h-auto md:!w-max md:border',
+            'sn-component challenge-modal relative m-0 flex h-full w-full flex-col items-center rounded border-solid border-border bg-default p-0 md:h-auto md:!w-max md:border md:translucent-ui:bg-[--popover-background-color] translucent-ui:[backdrop-filter:var(--popover-backdrop-filter)]',
             !isMobileScreen && 'shadow-overlay-light',
             isMobileOverlay && 'shadow-overlay-light border border-solid border-border',
           ),

packages/web/src/javascripts/Components/ChangeEditor/ChangeEditorMenu.tsx

@@ -203,7 +203,11 @@ const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
 
             return (
               <Fragment key={groupId}>
-                <div className={`border-0 border-t border-solid border-border py-1 ${index === 0 ? 'border-t-0' : ''}`}>
+                <div
+                  className={`border-0 border-t border-solid border-[--separator-color] py-1 ${
+                    index === 0 ? 'border-t-0' : ''
+                  }`}
+                >
                   {group.items.map((menuItem) => {
                     const onClickEditorItem = () => {
                       handleMenuSelection(menuItem).catch(console.error)

packages/web/src/javascripts/Components/ContentListView/Header/NewNotePreferences.tsx

@@ -207,7 +207,7 @@ const NewNotePreferences: FunctionComponent<Props> = ({
             <input
               disabled={disabled}
               className={classNames(
-                'w-full min-w-55 rounded border border-solid border-passive-3 bg-default px-2 py-1.5 text-sm',
+                'w-full min-w-55 rounded border border-solid border-passive-3 bg-default md:translucent-ui:bg-transparent px-2 py-1.5 text-sm',
                 'focus-within:ring-2 focus-within:ring-info',
               )}
               placeholder="e.g. YYYY-MM-DD"

packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx

@@ -62,7 +62,7 @@ const Dropdown = ({
       </VisuallyHidden>
       <Select
         className={classNames(
-          'flex w-full min-w-55 items-center justify-between rounded border border-border bg-default px-3.5 py-1.5 text-sm text-foreground',
+          'flex w-full min-w-55 items-center justify-between rounded border border-passive-3 bg-default md:translucent-ui:bg-transparent px-3.5 py-1.5 text-sm text-foreground',
           disabled && 'opacity-50',
           classNameOverride.button,
           !fullWidth && 'md:w-fit',
@@ -83,9 +83,12 @@ const Dropdown = ({
       <SelectPopover
         store={select}
         className={classNames(
-          'z-dropdown-menu max-h-[var(--popover-available-height)] w-[var(--popover-anchor-width)] overflow-y-auto rounded border border-border bg-default py-1',
+          'z-dropdown-menu max-h-[var(--popover-available-height)] w-[var(--popover-anchor-width)] overflow-y-auto rounded border border-passive-3 bg-default py-1',
           classNameOverride.popover,
         )}
+        style={{
+          backdropFilter: 'var(--popover-backdrop-filter)',
+        }}
         portal={false}
       >
         {items.map((item) => (

packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx

@@ -121,7 +121,7 @@ const FilePreviewModal = observer(({ application, viewControllerManager }: Props
       close={dismiss}
       className={{
         content: classNames(
-          'm-0 flex h-full w-full flex-col rounded bg-[color:var(--modal-background-color)] p-0 shadow-main md:!h-full md:max-h-[90%] md:!w-full md:max-w-[90%]',
+          'm-0 flex h-full w-full flex-col rounded bg-[--popover-background-color] p-0 shadow-main md:!h-full md:max-h-[90%] md:!w-full md:max-w-[90%]',
         ),
       }}
       actions={[

packages/web/src/javascripts/Components/Input/DecoratedInput.tsx

@@ -4,7 +4,7 @@ import { DecoratedInputProps } from './DecoratedInputProps'
 
 const getClassNames = (hasLeftDecorations: boolean, hasRightDecorations: boolean, roundedFull?: boolean) => {
   return {
-    container: `position-relative flex items-stretch overflow-hidden border border-solid border-passive-3 bg-default text-sm focus-within:ring-2 focus-within:ring-info bg-clip-padding ${
+    container: `position-relative flex items-stretch overflow-hidden border border-solid border-passive-3 bg-default translucent-ui:bg-transparent text-sm focus-within:ring-2 focus-within:ring-info bg-clip-padding ${
       !hasLeftDecorations && !hasRightDecorations ? 'px-2 py-1.5' : ''
     } ${roundedFull ? 'rounded-full' : 'rounded'}`,
     input: `focus:ring-none w-full border-0 bg-transparent text-text focus:shadow-none focus:outline-none ${

packages/web/src/javascripts/Components/LinkedItems/LinkedItemsPanel.tsx

@@ -62,7 +62,7 @@ const LinkedItemsPanel = ({
     <div>
       <form
         className={classNames(
-          'sticky top-0 z-10 bg-default px-2.5 pt-2.5',
+          'sticky top-0 z-10 bg-default md:translucent-ui:bg-transparent px-2.5 pt-2.5',
           linkedResults.length || unlinkedItems.length || notesLinkingToItem.length
             ? 'border-b border-border pb-2.5'
             : 'pb-1',
@@ -70,7 +70,10 @@ const LinkedItemsPanel = ({
       >
         <DecoratedInput
           type="text"
-          className={{ container: !isSearching ? 'px-0.5 py-1.5' : 'py-0', input: 'placeholder:text-passive-0' }}
+          className={{
+            container: classNames(!isSearching ? 'px-0.5 py-1.5' : 'py-0', 'md:translucent-ui:bg-default'),
+            input: 'placeholder:text-passive-0',
+          }}
           placeholder="Search items to link..."
           value={searchQuery}
           onChange={setSearchQuery}

packages/web/src/javascripts/Components/Menu/MenuItemSeparator.tsx

@@ -2,7 +2,7 @@ import { FunctionComponent } from 'react'
 
 const MenuItemSeparator: FunctionComponent = () => (
   <li className="list-none" role="none">
-    <div role="separator" className="my-2 h-[1px] bg-border" />
+    <div role="separator" className="my-2 h-[1px] bg-[--separator-color]" />
   </li>
 )
 

packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx

@@ -38,7 +38,7 @@ const Tooltip = ({ text }: { text: string }) => {
         onMouseEnter={() => setVisible(true)}
         onMouseLeave={() => setVisible(false)}
       >
-        <Icon type={'notes'} className="text-border" size="large" />
+        <Icon type={'notes'} className="text-border translucent-ui:text-[--popover-border-color]" size="large" />
       </div>
       <Popover
         open={visible}

packages/web/src/javascripts/Components/Modal/Modal.tsx

@@ -104,16 +104,19 @@ const Modal = ({
       />
       <div
         className={classNames(
-          'z-[1] m-0 flex h-full w-full flex-col border-solid border-border bg-default p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
+          'z-[1] m-0 flex h-full w-full flex-col border-solid border-[--popover-border-color] bg-[--popover-background-color] p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
           className?.content,
         )}
+        style={{
+          backdropFilter: 'var(--popover-backdrop-filter)',
+        }}
       >
         {customHeader && !disableCustomHeader ? (
           customHeader
         ) : (
           <div
             className={classNames(
-              'flex w-full flex-shrink-0 select-none items-center justify-between rounded-t border-b border-solid border-border bg-default px-2 text-text md:px-4.5 md:py-3',
+              'flex w-full flex-shrink-0 select-none items-center justify-between rounded-t border-b border-solid border-border bg-default px-2 text-text md:px-4.5 md:py-3 md:translucent-ui:bg-transparent',
               hasTopInset ? 'pb-1.5 pt-safe-top' : 'py-1.5',
             )}
           >

packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx

@@ -98,7 +98,7 @@ const PositionedPopoverContent = ({
       <div
         className={classNames(
           'absolute left-0 top-0 flex w-full min-w-80 cursor-auto flex-col',
-          'overflow-y-auto rounded border border-[--menu-border-color] bg-default shadow-main md:h-auto md:max-w-xs',
+          'overflow-y-auto rounded border border-[--popover-border-color] bg-[--popover-background-color] shadow-main md:h-auto md:max-w-xs',
           !disableMobileFullscreenTakeover && 'h-full',
           overrideZIndex ? overrideZIndex : 'z-dropdown-menu',
           !isDesktopScreen && !disableMobileFullscreenTakeover ? 'pb-safe-bottom pt-safe-top' : '',
@@ -109,6 +109,7 @@ const PositionedPopoverContent = ({
           {
             ...styles,
             ...adjustedStyles,
+            backdropFilter: 'var(--popover-backdrop-filter)',
           } as CSSProperties
         }
         ref={mergeRefs([setPopoverElement, addCloseMethod])}

packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx

@@ -14,6 +14,7 @@ import PreferencesSegment from '../PreferencesComponents/PreferencesSegment'
 import { PremiumFeatureIconName } from '@/Components/Icon/PremiumFeatureIcon'
 import EditorAppearance from './Appearance/EditorAppearance'
 import { GetAllThemesUseCase } from '@standardnotes/ui-services'
+import usePreference from '@/Hooks/usePreference'
 
 type Props = {
   application: WebApplication
@@ -33,6 +34,11 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
     application.getPreference(PrefKey.UseSystemColorScheme, PrefDefaults[PrefKey.UseSystemColorScheme]),
   )
 
+  const useTranslucentUI = usePreference(PrefKey.UseTranslucentUI)
+  const toggleTranslucentUI = () => {
+    application.setPreference(PrefKey.UseTranslucentUI, !useTranslucentUI).catch(console.error)
+  }
+
   useEffect(() => {
     const usecase = new GetAllThemesUseCase(application.items)
     const { thirdParty, native } = usecase.execute({ excludeLayerable: true })
@@ -106,6 +112,14 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
         <PreferencesSegment>
           <Title>Themes</Title>
           <div className="mt-2">
+            <div className="flex justify-between gap-2 md:items-center">
+              <div className="flex flex-col">
+                <Subtitle>Disable translucent UI</Subtitle>
+                <Text>Use opaque style for UI elements instead of translucency</Text>
+              </div>
+              <Switch onChange={toggleTranslucentUI} checked={!useTranslucentUI} />
+            </div>
+            <HorizontalSeparator classes="my-4" />
             <div className="flex justify-between gap-2 md:items-center">
               <div className="flex flex-col">
                 <Subtitle>Use system color scheme</Subtitle>

packages/web/src/javascripts/Components/Preferences/PreferencesCanvas.tsx

@@ -9,7 +9,10 @@ import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
 const PreferencesCanvas: FunctionComponent<PreferencesProps & { menu: PreferencesSessionController }> = (props) => (
   <div className="flex min-h-0 flex-grow flex-col md:flex-row md:justify-between">
     <PreferencesMenuView menu={props.menu} />
-    <div className="min-h-0 flex-grow overflow-auto bg-contrast" tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}>
+    <div
+      className="min-h-0 flex-grow overflow-auto bg-contrast md:bg-[--popover-background-color]"
+      tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+    >
       <PaneSelector {...props} />
     </div>
   </div>

packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx

@@ -24,7 +24,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
   )
 
   return (
-    <div className="border-b border-border bg-default px-5 py-2 md:border-0 md:bg-contrast md:px-0 md:py-0">
+    <div className="border-b border-border bg-default px-5 py-2 md:border-0 md:bg-[--popover-background-color] md:px-0 md:py-0">
       <div className="hidden min-w-55 flex-col overflow-y-auto px-3 py-6 md:flex">
         {menuItems.map((pref) => (
           <PreferencesMenuItem

packages/web/src/javascripts/Components/QuickSettingsMenu/QuickSettingsMenu.tsx

@@ -13,7 +13,6 @@ import Icon from '@/Components/Icon/Icon'
 import FocusModeSwitch from './FocusModeSwitch'
 import ThemesMenuButton from './ThemesMenuButton'
 import { sortThemes } from '@/Utils/SortThemes'
-import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { QuickSettingsController } from '@/Controllers/QuickSettingsController'
 import PanelSettingsSection from './PanelSettingsSection'
 import Menu from '../Menu/Menu'
@@ -21,6 +20,7 @@ import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
 import MenuRadioButtonItem from '../Menu/MenuRadioButtonItem'
 import { useApplication } from '../ApplicationProvider'
 import { GetAllThemesUseCase } from '@standardnotes/ui-services'
+import MenuItemSeparator from '../Menu/MenuItemSeparator'
 
 type MenuProps = {
   quickSettingsMenuController: QuickSettingsController
@@ -133,7 +133,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ quickSettingsMenuCont
               {component.displayName}
             </MenuSwitchButtonItem>
           ))}
-          <HorizontalSeparator classes="my-2" />
+          <MenuItemSeparator />
         </>
       )}
       <div className="my-1 px-3 text-sm font-semibold uppercase text-text">Appearance</div>
@@ -143,7 +143,7 @@ const QuickSettingsMenu: FunctionComponent<MenuProps> = ({ quickSettingsMenuCont
       {themes.map((theme) => (
         <ThemesMenuButton uiFeature={theme} key={theme.uniqueIdentifier.value} />
       ))}
-      <HorizontalSeparator classes="my-2" />
+      <MenuItemSeparator />
       <FocusModeSwitch
         application={application}
         onToggle={setFocusModeEnabled}

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx

@@ -38,7 +38,7 @@ const HistoryModalDialog = forwardRef(({ children, onDismiss }: Props, ref: Forw
       />
       <div
         className={classNames(
-          'absolute z-[1] my-0 flex h-full w-full flex-col rounded-md bg-[color:var(--modal-background-color)]',
+          'absolute z-[1] my-0 flex h-full w-full flex-col rounded-md bg-[--modal-background-color]',
           'p-0 pb-safe-bottom pt-safe-top shadow-lg md:max-h-[90%] md:w-[90%] md:max-w-[90%]',
           'md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:transform',
           getPlatformString(),

packages/web/src/javascripts/Components/Shared/HorizontalSeparator.tsx

@@ -4,7 +4,7 @@ type Props = {
   classes?: string
 }
 const HorizontalSeparator: FunctionComponent<Props> = ({ classes = '' }) => {
-  return <hr className={`min-h-[1px] w-full border-none bg-border ${classes}`} />
+  return <hr className={`min-h-[1px] w-full border-none bg-[--separator-color] ${classes}`} />
 }
 
 export default HorizontalSeparator

packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx

@@ -47,7 +47,7 @@ const StyledTooltip = ({
         autoFocusOnShow={!showOnHover}
         store={tooltip}
         className={classNames(
-          'z-tooltip max-w-max rounded border border-border bg-contrast px-3 py-1.5 text-sm text-foreground shadow',
+          'z-tooltip max-w-max rounded border border-border translucent-ui:border-[--popover-border-color] bg-contrast translucent-ui:bg-[--popover-background-color] [backdrop-filter:var(--popover-backdrop-filter)] px-3 py-1.5 text-sm text-foreground shadow',
           className,
         )}
         updatePosition={() => {

packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingTextFormatToolbarPlugin/index.tsx

@@ -277,7 +277,7 @@ function TextFormatFloatingToolbar({
   return (
     <div
       ref={toolbarRef}
-      className="absolute left-0 top-0 rounded-lg border border-border bg-contrast px-2 py-1 shadow-sm shadow-contrast"
+      className="absolute left-0 top-0 rounded-lg border border-border bg-contrast translucent-ui:bg-[--popover-background-color] translucent-ui:[backdrop-filter:var(--popover-backdrop-filter)] px-2 py-1 shadow-sm shadow-contrast"
     >
       {isLink && (
         <LinkEditor

packages/web/src/stylesheets/_modals.scss

@@ -56,6 +56,12 @@
   justify-content: center;
   flex-direction: column;
 
+  .sk-panel {
+    border-color: var(--popover-border-color);
+    background-color: var(--popover-background-color);
+    backdrop-filter: var(--popover-backdrop-filter);
+  }
+
   .sn-component {
     height: 100%;
     .sk-panel {

packages/web/src/stylesheets/_theme.scss

@@ -44,5 +44,8 @@
 
   --normal-button-background-color: var(--sn-stylekit-background-color);
 
-  --menu-border-color: transparent;
+  --popover-background-color: var(--sn-stylekit-background-color);
+  --popover-border-color: var(--sn-stylekit-border-color);
+
+  --separator-color: var(--sn-stylekit-border-color);
 }

packages/web/tailwind.config.js

@@ -170,6 +170,7 @@ module.exports = {
   plugins: [
     plugin(function ({ addVariant }) {
       addVariant('pointer-coarse', '@media (pointer: coarse)')
+      addVariant('translucent-ui', '.translucent-ui &')
     }),
   ],
 }