@puredesktop/puredesktop-ui-bridge 2.1.4 → 2.1.7

package/src/components/common/containers/AppFrame.test.tsx

@@ -3,36 +3,37 @@ import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { MENU_PORTAL_ID } from '../dropdown/menuPortalConstants.js'
 import { PLATFORM_APP_FRAME_BASE_STYLE_ID } from '../../../theme/utils/appFrameDocumentStyles.js'
-import { darkTheme } from '../../../theme/themes/dark.js'
-import { AppFrame } from './AppFrame.js'
-
-vi.mock('../../../bridge/react/usePlatformBridge.js', () => ({
-  usePlatformBridge: vi.fn(() => ({
-    bridge: null,
-    error: null,
-    meta: null,
-    ready: false,
-  })),
-}))
-
-vi.mock('../../../bridge/react/usePlatformAppManifest.js', () => ({
-  usePlatformAppManifest: vi.fn(() => ({
-    error: null,
-    loading: false,
-    manifest: null,
-  })),
-}))
-
-vi.mock('../../../bridge/react/usePlatformThemeDocumentAttrs.js', () => ({
-  usePlatformThemeDocumentAttrs: vi.fn(() => ({
-    mode: '',
-    surfacePalette: '',
-  })),
-}))
-
-vi.mock('../../../bridge/react/usePlatformThemeFromBridge.js', () => ({
-  usePlatformThemeFromBridge: vi.fn(),
-}))
+import { darkTheme } from '../../../theme/themes/dark.js'
+import { PLATFORM_FONT_STYLESHEET_ID } from '../../../theme/platformFont.js'
+import { AppFrame } from './AppFrame.js'
+
+vi.mock('../../../bridge/react/usePlatformBridge.js', () => ({
+  usePlatformBridge: vi.fn(() => ({
+    bridge: null,
+    error: null,
+    meta: { appSlug: 'tasks' },
+    ready: true,
+  })),
+}))
+
+vi.mock('../../../bridge/react/usePlatformAppManifest.js', () => ({
+  usePlatformAppManifest: vi.fn(() => ({
+    error: null,
+    loading: false,
+    manifest: null,
+  })),
+}))
+
+vi.mock('../../../bridge/react/usePlatformThemeDocumentAttrs.js', () => ({
+  usePlatformThemeDocumentAttrs: vi.fn(() => ({
+    mode: '',
+    surfacePalette: '',
+  })),
+}))
+
+vi.mock('../../../bridge/react/usePlatformThemeFromBridge.js', () => ({
+  usePlatformThemeFromBridge: vi.fn(),
+}))
 
 function render(ui: React.ReactElement): {
   container: HTMLDivElement
@@ -61,12 +62,12 @@ describe('AppFrame', () => {
 
     expect(document.getElementById(MENU_PORTAL_ID)).not.toBeNull()
     const baseStyles = document.getElementById(PLATFORM_APP_FRAME_BASE_STYLE_ID)
-    expect(baseStyles).not.toBeNull()
-    expect(baseStyles?.textContent).toContain('box-sizing: border-box')
-    expect(baseStyles?.textContent).toContain('scrollbar-color')
-    expect(
-      document.getElementById('platform-font-schibsted-grotesk'),
-    ).not.toBeNull()
+    expect(baseStyles).not.toBeNull()
+    expect(baseStyles?.textContent).toContain('box-sizing: border-box')
+    expect(baseStyles?.textContent).toContain('scrollbar-color')
+    expect(document.getElementById(PLATFORM_FONT_STYLESHEET_ID)).not.toBeNull()
+    expect(container.querySelector('[data-app="tasks"]')).not.toBeNull()
+    expect(document.documentElement.dataset.app).toBe('tasks')
     expect(container.textContent).toContain('App content')
   })
 

package/src/components/common/containers/AppFrame.tsx

@@ -46,6 +46,20 @@ export function AppFrame({
     injectAppFrameDocumentStyles()
   }, [])
 
+  useEffect(() => {
+    const root = document.documentElement
+    if (meta?.appSlug) {
+      root.dataset.app = meta.appSlug
+    } else {
+      delete root.dataset.app
+    }
+    return () => {
+      if (root.dataset.app === meta?.appSlug) {
+        delete root.dataset.app
+      }
+    }
+  }, [meta?.appSlug])
+
   usePlatformThemeFromBridge(themeFromBridge)
   const themeAttrs = usePlatformThemeDocumentAttrs(themeFromBridge)
 
@@ -54,6 +68,7 @@ export function AppFrame({
       <MenuPortalLayer />
       <StyledRoot
         className={className}
+        data-app={meta?.appSlug || undefined}
         data-platform-theme={themeAttrs.mode || undefined}
         data-platform-surface-palette={themeAttrs.surfacePalette || undefined}
         {...rest}

package/src/components/common/containers/AppHeader.tsx

@@ -23,20 +23,23 @@ const StyledHeader = styled.header`
   padding: 0 14px;
   height: 36px;
   flex: 0 0 auto;
-  border-bottom: 1px solid var(--platform-colors-divider);
-  background: var(--platform-colors-app-viewport);
+  border-bottom: 1px solid
+    var(--pure-chrome-hairline, var(--platform-colors-divider));
+  background: var(--pure-chrome-wordmark-bar, #fbfbfc);
 `
 
 const ActionSlot = styled.div`
   display: flex;
   align-items: center;
   gap: 4px;
+  flex: 1 1 auto;
   min-width: 0;
   margin-left: auto;
+  justify-content: flex-end;
 
   &[data-layout='document-tools'] {
     flex: 1;
-    justify-content: center;
+    justify-content: flex-start;
     margin-left: 0;
   }
 `

package/src/components/common/containers/SurfacePanel.tsx

@@ -18,6 +18,7 @@ const StyledPanel = styled.section`
   box-sizing: border-box;
   min-width: 0;
   max-width: 100%;
+  box-shadow: var(--platform-shadow-sm);
 `
 
 const StyledTitle = styled.h2`

package/src/components/common/containers/useOpacityPresence.ts

@@ -22,9 +22,7 @@ export interface OpacityPresence {
  * Fade in/out via opacity; after fade-out completes, `present` is false for display:none.
  * Unlike useOpenTransition (timeout + unmount), this waits for transitionend and keeps children mounted.
  */
-export function useOpacityPresence(
-  active: boolean,
-): OpacityPresence {
+export function useOpacityPresence(active: boolean): OpacityPresence {
   const [phase, setPhase] = useState<OpacityPresencePhase>(() =>
     active ? 'visible' : 'hidden',
   )
@@ -57,19 +55,16 @@ export function useOpacityPresence(
     return () => cancelAnimationFrame(id)
   }, [phase])
 
-  const onTransitionEnd = useCallback(
-    (event: TransitionEvent<HTMLElement>) => {
-      if (event.target !== event.currentTarget) return
-      if (event.propertyName !== 'opacity') return
+  const onTransitionEnd = useCallback((event: TransitionEvent<HTMLElement>) => {
+    if (event.target !== event.currentTarget) return
+    if (event.propertyName !== 'opacity') return
 
-      setPhase(prev => {
-        if (prev === 'exiting') return 'hidden'
-        if (prev === 'entering') return 'visible'
-        return prev
-      })
-    },
-    [],
-  )
+    setPhase(prev => {
+      if (prev === 'exiting') return 'hidden'
+      if (prev === 'entering') return 'visible'
+      return prev
+    })
+  }, [])
 
   return {
     present: phase !== 'hidden',

package/src/components/common/context/ContextSelector.tsx

@@ -70,7 +70,7 @@ const Trigger = styled.button`
   border: 0;
   background: transparent;
   padding: 0;
-  color: var(--platform-colors-text-secondary, #68717c);
+  color: var(--platform-colors-text-secondary, #6b665e);
   font: inherit;
   font-size: 13px;
   font-weight: 750;
@@ -78,13 +78,13 @@ const Trigger = styled.button`
 
   &:hover,
   &:focus-visible {
-    color: var(--platform-colors-text, #2e3338);
+    color: var(--platform-colors-text, #1c1a17);
     outline: none;
   }
 `
 
 const Count = styled.span`
-  color: var(--platform-colors-text-secondary, #68717c);
+  color: var(--platform-colors-text-secondary, #6b665e);
   font-size: 12px;
 `
 
@@ -99,7 +99,7 @@ const Menu = styled.div`
   max-height: min(360px, 70vh);
   overflow: auto;
   border: 1px solid var(--platform-colors-border, rgb(46 51 56 / 12%));
-  border-radius: 8px;
+  border-radius: var(--platform-radius-md, 0px);
   background: color-mix(
     in srgb,
     var(--platform-colors-elevated, #fffefa) 96%,
@@ -113,10 +113,10 @@ const OptionButton = styled.button`
   display: grid;
   gap: 3px;
   border: 0;
-  border-radius: 6px;
+  border-radius: var(--platform-radius-sm, 0px);
   background: transparent;
   padding: 9px 10px;
-  color: var(--platform-colors-text, #2e3338);
+  color: var(--platform-colors-text, #1c1a17);
   font: inherit;
   text-align: left;
   cursor: pointer;
@@ -134,7 +134,7 @@ const OptionTitle = styled.span`
 `
 
 const OptionMeta = styled.span`
-  color: var(--platform-colors-text-secondary, #68717c);
+  color: var(--platform-colors-text-secondary, #6b665e);
   font-size: 11px;
   line-height: 1.35;
 `
@@ -151,14 +151,14 @@ const SelectedChip = styled.span`
   gap: 6px;
   max-width: 100%;
   border: 1px solid var(--platform-colors-border, rgb(46 51 56 / 12%));
-  border-radius: 999px;
+  border-radius: var(--platform-radius-sm);
   background: color-mix(
     in srgb,
     var(--platform-colors-surface, #ffffff) 72%,
     transparent
   );
   padding: 3px 7px;
-  color: var(--platform-colors-text-secondary, #68717c);
+  color: var(--platform-colors-text-secondary, #6b665e);
   font-size: 12px;
 `
 
@@ -166,7 +166,7 @@ const RemoveButton = styled.button`
   border: 0;
   background: transparent;
   padding: 0;
-  color: var(--platform-colors-text-secondary, #68717c);
+  color: var(--platform-colors-text-secondary, #6b665e);
   font: inherit;
   cursor: pointer;
 `

package/src/components/common/desk/CreationDesk.tsx

@@ -42,7 +42,7 @@ export const CreationDeskSection = styled.section`
 `
 
 export const CreationDeskSectionLabel = styled.div`
-  color: rgb(104 112 123);
+  color: var(--platform-colors-text-secondary, #6b665e);
   font-size: 12px;
   font-weight: 800;
   letter-spacing: 0.08em;
@@ -57,7 +57,7 @@ export const CreationDeskRow = styled.div`
 `
 
 export const CreationDeskNote = styled.div`
-  color: rgb(104 112 123);
+  color: var(--platform-colors-text-secondary, #6b665e);
   font-size: 12px;
   line-height: 1.45;
   opacity: 0.68;
@@ -67,9 +67,13 @@ export const CreationDeskTextarea = styled(BareTextarea)`
   width: 100%;
   min-height: 140px;
   padding: 14px 16px;
-  border: 1px solid rgb(127 127 127 / 24%);
-  border-radius: 8px;
-  background: rgb(255 255 255 / 55%);
+  border: 1px solid var(--platform-colors-border, #e7e4dd);
+  border-radius: var(--platform-radius-sm, 0px);
+  background: color-mix(
+    in srgb,
+    var(--platform-colors-surface, #ffffff) 78%,
+    transparent
+  );
   color: inherit;
   font: inherit;
   font-size: 14px;
@@ -81,9 +85,13 @@ export const CreationDeskFieldBox = styled.div`
   display: grid;
   gap: 12px;
   padding: 14px 16px;
-  border: 1px solid rgb(127 127 127 / 24%);
-  border-radius: 8px;
-  background: rgb(255 255 255 / 55%);
+  border: 1px solid var(--platform-colors-border, #e7e4dd);
+  border-radius: var(--platform-radius-sm, 0px);
+  background: color-mix(
+    in srgb,
+    var(--platform-colors-surface, #ffffff) 78%,
+    transparent
+  );
 `
 
 export const CreationDeskFieldTextarea = styled(BareTextarea)`
@@ -104,9 +112,13 @@ export const CreationDeskSourceCard = styled.div`
   display: grid;
   gap: 8px;
   padding: 14px 16px;
-  border: 1px solid rgb(127 127 127 / 20%);
-  border-radius: 8px;
-  background: rgb(255 255 255 / 45%);
+  border: 1px solid var(--platform-colors-border, #e7e4dd);
+  border-radius: var(--platform-radius-sm, 0px);
+  background: color-mix(
+    in srgb,
+    var(--platform-colors-surface, #ffffff) 72%,
+    transparent
+  );
   font-size: 13px;
 `
 

package/src/components/common/desk/DailyBrief.tsx

@@ -34,10 +34,11 @@ const Surface = styled.article`
   max-width: 760px;
   margin: 0 auto;
   padding: 36px 44px 38px;
-  border: 1px solid rgba(217, 222, 229, 0.72);
-  border-radius: 4px;
-  background: var(--daily-brief-paper, #fffefa);
-  box-shadow: 0 18px 54px rgba(38, 46, 55, 0.055);
+  border: 1px solid var(--platform-colors-border, #e7e4dd);
+  border-radius: var(--platform-radius-sm, 0px);
+  background: var(--daily-brief-paper, var(--factory-color-paper, #ffffff));
+  box-shadow: 0 18px 54px
+    color-mix(in srgb, var(--platform-colors-text, #1c1a17) 5.5%, transparent);
   color: var(--daily-brief-ink, inherit);
 `
 
@@ -46,7 +47,10 @@ const Kicker = styled.div`
   align-items: baseline;
   justify-content: space-between;
   gap: 16px;
-  color: var(--daily-brief-faint, #9aa2ad);
+  color: var(
+    --daily-brief-faint,
+    var(--platform-colors-text-tertiary, #8f897f)
+  );
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.07em;
@@ -68,7 +72,10 @@ const Body = styled.p`
 
 const Empty = styled.p`
   margin: 20px 0 0;
-  color: var(--daily-brief-muted, #737b86);
+  color: var(
+    --daily-brief-muted,
+    var(--platform-colors-text-secondary, #6b665e)
+  );
   font-size: 18px;
   line-height: 1.55;
 `
@@ -77,7 +84,10 @@ const Footer = styled.div`
   display: flex;
   justify-content: flex-end;
   margin-top: 22px;
-  color: var(--daily-brief-muted, #737b86);
+  color: var(
+    --daily-brief-muted,
+    var(--platform-colors-text-secondary, #6b665e)
+  );
 `
 
 function formatBriefDate(iso: string): string {
@@ -87,6 +97,7 @@ function formatBriefDate(iso: string): string {
     weekday: 'short',
     month: 'short',
     day: 'numeric',
+    year: 'numeric',
   })
 }
 

package/src/components/common/desk/DeskCard.tsx

@@ -26,18 +26,21 @@ const StyledCard = styled.button<{
   margin-bottom: 8px;
   padding: 11px 13px;
   border: 1px solid
-    ${({ $accent }) => ($accent ? '#d9dee5' : 'rgba(217, 222, 229, 0.9)')};
+    ${({ $accent }) =>
+      $accent
+        ? 'var(--platform-colors-border, #e7e4dd)'
+        : 'color-mix(in srgb, var(--platform-colors-border, #e7e4dd) 90%, transparent)'};
   border-left: ${({ $accent }) =>
     $accent
       ? '2px solid var(--desk-card-accent, var(--platform-colors-accent))'
-      : '1px solid rgba(217, 222, 229, 0.9)'};
+      : '1px solid color-mix(in srgb, var(--platform-colors-border, #e7e4dd) 90%, transparent)'};
   border-radius: ${({ $accent }) => ($accent ? '0' : '6px')};
   background: ${({ $accent, $dim }) =>
     $accent
       ? 'var(--desk-card-paper, var(--platform-colors-surface))'
       : $dim
-      ? 'rgba(255, 255, 255, 0.55)'
-      : 'rgba(255, 255, 255, 0.85)'};
+      ? 'color-mix(in srgb, var(--platform-colors-surface, #ffffff) 55%, transparent)'
+      : 'color-mix(in srgb, var(--platform-colors-surface, #ffffff) 85%, transparent)'};
   color: inherit;
   font: inherit;
   text-align: left;
@@ -49,7 +52,7 @@ const StyledCard = styled.button<{
     right: 2px;
     left: 2px;
     height: 2px;
-    border-radius: 999px;
+    border-radius: 0;
     background: ${({ $dropBefore }) =>
       $dropBefore
         ? 'var(--desk-card-accent, var(--platform-colors-accent))'
@@ -59,7 +62,9 @@ const StyledCard = styled.button<{
 
   &:hover {
     background: ${({ $accent }) =>
-      $accent ? 'var(--desk-card-paper, #fff)' : '#ffffff'};
+      $accent
+        ? 'var(--desk-card-paper, var(--platform-colors-surface, #ffffff))'
+        : 'var(--platform-colors-surface, #ffffff)'};
   }
 `
 

package/src/components/common/dropdown/MenuButtonDropdown.tsx

@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react'
 import { ChevronDown } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
-import { styled } from 'styled-components'
+import { css, styled } from 'styled-components'
 import { PlatformIcon } from '../../chrome/PlatformIcon.js'
 import { Button } from '../buttons/Button.js'
 import { IconButton } from '../buttons/IconButton.js'
@@ -13,18 +13,51 @@ export interface MenuButtonDropdownProps {
   label: string
   items: MenuEntry[]
   icon?: LucideIcon
+  leadingIcon?: ReactNode
+  iconOnly?: boolean
   disabled?: boolean
   variant?: 'ghost' | 'subtle' | 'primary' | 'text'
   size?: 'sm' | 'md'
+  triggerTone?: 'default' | 'toolbar'
   sectionId?: string
   onSelectItem?: (item: MenuActionItem) => void
 }
 
 //#region styled-components
 
-const StyledWrap = styled.div`
+const StyledWrap = styled.div<{ $triggerTone: 'default' | 'toolbar' }>`
   position: relative;
   display: inline-flex;
+
+  ${({ $triggerTone }) =>
+    $triggerTone === 'toolbar'
+      ? css`
+          button {
+            color: var(
+              --editor-toolbar-muted,
+              var(
+                --pure-chrome-tertiary,
+                var(--editor-paper-muted, #8a857c)
+              )
+            );
+          }
+
+          button:hover:not(:disabled) {
+            background: var(
+              --editor-toolbar-subtle,
+              var(
+                --editor-paper-subtle,
+                var(--platform-colors-surface-hover)
+              )
+            );
+            color: var(
+              --editor-toolbar-text,
+              var(--editor-paper-text, var(--platform-colors-text))
+            );
+            text-decoration: none;
+          }
+        `
+      : ''}
 `
 
 const TextTriggerContent = styled.span`
@@ -32,6 +65,12 @@ const TextTriggerContent = styled.span`
   align-items: center;
   gap: 6px;
   min-width: 0;
+
+  > svg {
+    flex: none;
+    width: 18px;
+    height: 18px;
+  }
 `
 
 //#endregion
@@ -40,9 +79,12 @@ export function MenuButtonDropdown({
   label,
   items,
   icon,
+  leadingIcon,
+  iconOnly = false,
   disabled = false,
   variant = 'subtle',
   size = 'sm',
+  triggerTone = 'default',
   sectionId = 'menu-button',
   onSelectItem,
 }: MenuButtonDropdownProps): React.ReactElement {
@@ -94,15 +136,25 @@ export function MenuButtonDropdown({
   }
 
   return (
-    <StyledWrap onClick={event => event.stopPropagation()}>
+    <StyledWrap
+      $triggerTone={triggerTone}
+      onClick={event => event.stopPropagation()}
+    >
       {icon ? (
         <IconButton {...triggerProps} title={label} aria-label={label}>
           <PlatformIcon icon={icon} size={16} strokeWidth={1.75} />
         </IconButton>
       ) : (
-        <Button {...triggerProps} variant={variant} size={size}>
+        <Button
+          {...triggerProps}
+          variant={variant}
+          size={size}
+          title={label}
+          aria-label={label}
+        >
           <TextTriggerContent>
-            <span>{label}</span>
+            {leadingIcon}
+            {iconOnly ? null : <span>{label}</span>}
             <PlatformIcon icon={ChevronDown} size={13} strokeWidth={1.8} />
           </TextTriggerContent>
         </Button>

package/src/components/common/dropdown/MenuDropdownItem.tsx

@@ -10,10 +10,12 @@ export interface MenuDropdownItemProps {
 
 const StyledItem = styled.button<{
   $disabled?: boolean
+  $hasIcon?: boolean
   $tone?: MenuActionItem['tone']
 }>`
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-columns: ${({ $hasIcon }) =>
+    $hasIcon ? '16px minmax(0, 1fr) auto' : 'minmax(0, 1fr) auto'};
   align-items: center;
   gap: var(--platform-spacing-md);
   width: 100%;
@@ -36,7 +38,19 @@ const StyledItem = styled.button<{
     background: var(--platform-colors-surface-hover);
   }
 
-  & > span:first-child {
+  .menu-item-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--platform-colors-text);
+
+    > svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  .menu-item-label {
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -66,6 +80,7 @@ export function MenuDropdownItem({
       role="menuitem"
       disabled={item.disabled}
       $disabled={item.disabled}
+      $hasIcon={Boolean(item.icon)}
       $tone={item.tone}
       onPointerDown={event => {
         if (event.pointerType === 'mouse' || event.pointerType === 'touch') {
@@ -75,7 +90,12 @@ export function MenuDropdownItem({
       }}
       onClick={selectItem}
     >
-      <span>{item.label}</span>
+      {item.icon ? (
+        <span className="menu-item-icon" aria-hidden="true">
+          {item.icon}
+        </span>
+      ) : null}
+      <span className="menu-item-label">{item.label}</span>
       {item.shortcut ? <StyledShortcut>{item.shortcut}</StyledShortcut> : null}
     </StyledItem>
   )

package/src/components/common/dropdown/MenuPanel.tsx

@@ -12,8 +12,8 @@ export const StyledMenuPanel = styled(CollapsibleGrid)<{
   max-height: inherit;
   overflow: hidden;
   padding: var(--platform-spacing-xs, 4px);
-  border: 1px solid var(--platform-colors-border, #d8dde5);
-  border-radius: var(--platform-radius-md, 8px);
+  border: 1px solid var(--platform-colors-border, #e7e4dd);
+  border-radius: var(--platform-radius-md, 0);
   background: var(--platform-colors-elevated, #ffffff);
   color: var(--platform-colors-text, #25292f);
   box-shadow: var(--platform-shadow-md, 0 8px 24px rgba(46, 51, 56, 0.12));
@@ -33,11 +33,11 @@ export const StyledMenuPanel = styled(CollapsibleGrid)<{
   }
 `
 
-/** Chat composer menus — matches ChatBox surface (bg, 8px radius, 13px items). */
+/** Chat composer menus — matches ChatBox surface (bg, square, 13px items). */
 export const StyledChatMenuPanel = styled(StyledMenuPanel)`
   min-width: 160px;
   padding: 4px;
-  border-radius: 8px;
+  border-radius: var(--platform-radius-sm);
   background: var(--platform-colors-bg, #ffffff);
   box-shadow: 0 4px 16px rgb(from var(--platform-colors-text) r g b / 0.08);
 
@@ -48,7 +48,7 @@ export const StyledChatMenuPanel = styled(StyledMenuPanel)`
   button[role='menuitem'] {
     min-height: 28px;
     padding: 4px 8px;
-    border-radius: 6px;
+    border-radius: var(--platform-radius-sm);
     font-size: 13px;
     line-height: 1.4;
   }
@@ -62,8 +62,8 @@ export const StyledChatMenuPanel = styled(StyledMenuPanel)`
 export const StyledPaletteMenuPanel = styled(StyledMenuPanel)`
   min-width: min(310px, calc(100vw - 24px));
   padding: 6px;
-  border-color: var(--platform-colors-border, #d8dde5);
-  border-radius: var(--platform-radius-md, 8px);
+  border-color: var(--platform-colors-border, #e7e4dd);
+  border-radius: var(--platform-radius-md, 0);
   background: var(--platform-colors-elevated, #ffffff);
   box-shadow: var(--platform-shadow-md, 0 8px 24px rgba(46, 51, 56, 0.12));
 `
@@ -71,5 +71,5 @@ export const StyledPaletteMenuPanel = styled(StyledMenuPanel)`
 export const StyledWorkspaceMenuPanel = styled(StyledMenuPanel)`
   min-width: min(320px, calc(100vw - 24px));
   padding: 6px;
-  border-radius: 10px;
+  border-radius: var(--platform-radius-md, 0);
 `