@puredesktop/puredesktop-ui-bridge 2.1.3 → 2.1.6

package/src/components/common/buttons/Button.tsx

@@ -25,11 +25,12 @@ const spin = keyframes`
 `
 
 const selectedCss = css`
-  background: var(--platform-colors-surface-hover);
+  background: var(--platform-colors-surface);
   border-color: var(
     --platform-colors-border-strong,
     var(--platform-colors-border)
   );
+  color: var(--platform-colors-text);
 `
 
 const textSelectedCss = css`
@@ -59,17 +60,33 @@ const variantStyles: Record<
     color: var(--platform-colors-text);
 
     &:hover:not(:disabled) {
-      background: var(--platform-colors-surface-hover);
+      border-color: var(--platform-colors-border-strong);
+      background: var(--platform-colors-surface);
     }
   `,
   primary: css`
-    background: var(--platform-colors-accent);
-    border-color: var(--platform-colors-accent);
-    color: var(--platform-colors-text-inverse);
+    background: var(
+      --app-primary-fill,
+      var(--app-acc, var(--platform-colors-text))
+    );
+    border-color: var(
+      --app-primary-fill,
+      var(--app-acc, var(--platform-colors-text))
+    );
+    color: var(
+      --platform-colors-text-on-accent,
+      var(--platform-colors-text-inverse)
+    );
 
     &:hover:not(:disabled) {
-      background: var(--platform-colors-accent-hover);
-      border-color: var(--platform-colors-accent-hover);
+      background: var(
+        --app-block,
+        var(--app-text, var(--platform-colors-accent-hover))
+      );
+      border-color: var(
+        --app-block,
+        var(--app-text, var(--platform-colors-accent-hover))
+      );
     }
   `,
   danger: css`
@@ -160,8 +177,8 @@ const StyledButton = styled.button<{
   gap: 6px;
   width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'fit-content')};
   border: 1px solid transparent;
-  border-radius: var(--platform-radius-sm, 6px);
-  font-size: var(--platform-typography);
+  border-radius: var(--platform-radius-sm, 0);
+  font-size: var(--platform-typography-font-size-base);
   line-height: 1;
   white-space: nowrap;
   cursor: pointer;
@@ -197,7 +214,40 @@ const StyledButton = styled.button<{
   &:disabled {
     cursor: ${({ $loading }) => ($loading ? 'wait' : 'not-allowed')};
     opacity: ${({ $loading, $variant }) =>
-      $loading || $variant === 'tile' ? 1 : 0.45};
+      $loading || $variant === 'tile' || $variant === 'primary' ? 1 : 0.45};
+    ${({ $variant, $loading }) =>
+      $variant === 'primary' && !$loading
+        ? css`
+            border-color: var(--pure-disabled-primary, #b7b2a8);
+            background: var(--pure-disabled-primary, #b7b2a8);
+            color: var(--platform-colors-text-inverse);
+          `
+        : ''}
+  }
+
+  &[aria-label]::after {
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 50%;
+    z-index: var(--platform-z-index-zi-app-menus, 40);
+    padding: 6px 8px;
+    background: var(--platform-colors-text, #1c1a17);
+    color: var(--platform-colors-bg, #fffdf8);
+    content: attr(aria-label);
+    font-family: var(--platform-typography-font-family);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(-50%);
+    transition: opacity 0.12s ease 0.2s;
+    white-space: nowrap;
+  }
+
+  &[aria-label]:hover:not(:disabled)::after,
+  &[aria-label]:focus-visible:not(:disabled)::after {
+    opacity: 1;
   }
 `
 

package/src/components/common/buttons/ChoiceChip.tsx

@@ -16,7 +16,7 @@ const StyledChip = styled.button<{ $active?: boolean }>`
       $active
         ? 'var(--platform-colors-border-strong, var(--platform-colors-border))'
         : 'var(--platform-colors-border)'};
-  border-radius: var(--platform-radius-full);
+  border-radius: var(--platform-radius-sm);
   background: ${({ $active }) =>
     $active
       ? 'var(--platform-colors-surface-hover)'
@@ -57,7 +57,7 @@ const StyledChip = styled.button<{ $active?: boolean }>`
 
 //#endregion
 
-/** Pill filter toggle — wrapping rows of selectable chips (see also SegmentedControl). */
+/** Compact filter toggle — wrapping rows of selectable chips (see also SegmentedControl). */
 export const ChoiceChip = forwardRef<HTMLButtonElement, ChoiceChipProps>(
   function ChoiceChip({ active = false, type = 'button', ...rest }, ref) {
     return (

package/src/components/common/buttons/IconButton.tsx

@@ -21,6 +21,7 @@ const StyledIconButton = styled.button<{
   $size: IconButtonSize
   $variant: IconButtonVariant
 }>`
+  position: relative;
   display: grid;
   place-items: center;
   width: ${({ $size }) => sizeStyles[$size].width};
@@ -57,6 +58,31 @@ const StyledIconButton = styled.button<{
     opacity: 0.45;
     cursor: not-allowed;
   }
+
+  &[aria-label]::after {
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 50%;
+    z-index: var(--platform-z-index-zi-app-menus, 40);
+    padding: 6px 8px;
+    background: var(--platform-colors-text, #1c1a17);
+    color: var(--platform-colors-bg, #fffdf8);
+    content: attr(aria-label);
+    font-family: var(--platform-typography-font-family);
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(-50%);
+    transition: opacity 0.12s ease 0.2s;
+    white-space: nowrap;
+  }
+
+  &[aria-label]:hover:not(:disabled)::after,
+  &[aria-label]:focus-visible:not(:disabled)::after {
+    opacity: 1;
+  }
 `
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(

package/src/components/common/buttons/SegmentedControl.tsx

@@ -16,28 +16,44 @@ export interface SegmentedControlProps<T extends string> {
 
 const StyledGroup = styled.div`
   display: inline-flex;
-  gap: var(--platform-spacing-2xs, 4px);
-  padding: var(--platform-spacing-2xs, 4px);
+  gap: 0;
+  padding: 0;
   border: 1px solid var(--platform-colors-border);
-  border-radius: var(--platform-radius-lg);
-  background: var(--platform-colors-surface-active);
+  border-radius: var(--platform-radius-sm);
+  background: var(--platform-colors-surface);
 `
 
 const StyledSegment = styled.button<{ $active: boolean }>`
   min-height: 30px;
   padding: 0 var(--platform-spacing-sm);
   border: 0;
-  border-radius: var(--platform-radius-md);
+  border-left: 1px solid var(--platform-colors-border);
+  border-radius: 0;
   background: ${({ $active }) =>
-    $active ? 'var(--platform-colors-surface)' : 'transparent'};
+    $active ? 'var(--platform-colors-text)' : 'transparent'};
   color: ${({ $active }) =>
     $active
-      ? 'var(--platform-colors-text)'
+      ? 'var(--platform-colors-text-inverse)'
       : 'var(--platform-colors-text-secondary)'};
   font: inherit;
   font-size: var(--platform-typography-font-size-sm);
   font-weight: var(--platform-typography-font-weight-bold);
   cursor: pointer;
+
+  &:first-child {
+    border-left: 0;
+  }
+
+  &:hover:not(:disabled) {
+    background: ${({ $active }) =>
+      $active
+        ? 'var(--platform-colors-text)'
+        : 'var(--platform-colors-surface-hover)'};
+    color: ${({ $active }) =>
+      $active
+        ? 'var(--platform-colors-text-inverse)'
+        : 'var(--platform-colors-text)'};
+  }
 `
 
 //#endregion

package/src/components/common/canvas/CanvasElementFrame.tsx

@@ -29,17 +29,17 @@ const Frame = styled.div<{
   border: ${({ $active }) => ($active ? '2px' : '1.5px')} solid
     ${({ $active, $readOnly }) =>
       $active
-        ? 'color-mix(in srgb, var(--platform-color-accent, #3b6ff5) 82%, white)'
+        ? 'color-mix(in srgb, var(--platform-colors-accent, #1c1a17) 82%, white)'
         : $readOnly
-        ? 'rgb(127 127 127 / 42%)'
-        : 'rgb(127 127 127 / 58%)'};
+        ? 'color-mix(in srgb, var(--platform-colors-border-strong, #bdb8ad) 72%, transparent)'
+        : 'color-mix(in srgb, var(--platform-colors-border-strong, #bdb8ad) 88%, transparent)'};
   background: ${({ $active }) =>
     $active
-      ? 'color-mix(in srgb, var(--platform-color-accent, #3b6ff5) 8%, transparent)'
+      ? 'color-mix(in srgb, var(--platform-colors-accent, #1c1a17) 8%, transparent)'
       : 'transparent'};
   box-shadow: ${({ $active }) =>
     $active
-      ? '0 0 0 2px color-mix(in srgb, var(--platform-color-accent, #3b6ff5) 22%, transparent), 0 8px 22px rgb(0 0 0 / 16%)'
+      ? '0 0 0 2px color-mix(in srgb, var(--platform-colors-accent, #1c1a17) 22%, transparent), 0 8px 22px rgb(0 0 0 / 16%)'
       : '0 0 0 1px rgb(255 255 255 / 42%)'};
   opacity: ${({ $disabled }) => ($disabled ? 0.55 : 1)};
   pointer-events: ${({ $disabled }) => ($disabled ? 'none' : 'auto')};
@@ -48,8 +48,8 @@ const Frame = styled.div<{
     border-style: solid;
     border-color: ${({ $readOnly }) =>
       $readOnly
-        ? 'rgb(127 127 127 / 60%)'
-        : 'color-mix(in srgb, var(--platform-color-accent, #3b6ff5) 68%, white)'};
+        ? 'color-mix(in srgb, var(--platform-colors-border-strong, #bdb8ad) 92%, transparent)'
+        : 'color-mix(in srgb, var(--platform-colors-accent, #1c1a17) 68%, white)'};
   }
 `
 
@@ -60,10 +60,15 @@ const Label = styled.div`
   max-width: min(220px, 100%);
   overflow: hidden;
   padding: 3px 7px;
-  border-radius: 4px 4px 0 0;
-  background: color-mix(in srgb, var(--platform-color-surface, #ffffff) 96%, transparent);
+  border-radius: var(--platform-radius-sm, 0px) var(--platform-radius-sm, 0px) 0
+    0;
+  background: color-mix(
+    in srgb,
+    var(--platform-colors-surface, #ffffff) 96%,
+    transparent
+  );
   box-shadow: 0 1px 4px rgb(0 0 0 / 14%);
-  color: var(--platform-color-text, #1f2430);
+  color: var(--platform-colors-text, #1c1a17);
   font-size: 12px;
   font-weight: 760;
   line-height: 1.2;
@@ -77,9 +82,9 @@ const Handle = styled.button<{ $handle: CanvasResizeHandle }>`
   height: 14px;
   padding: 0;
   border: 2px solid currentColor;
-  border-radius: 3px;
-  background: var(--platform-color-surface, #ffffff);
-  color: var(--platform-color-accent, #3b6ff5);
+  border-radius: var(--platform-radius-sm, 0px);
+  background: var(--platform-colors-surface, #ffffff);
+  color: var(--platform-colors-accent, #1c1a17);
   box-shadow: 0 1px 5px rgb(0 0 0 / 20%);
   ${({ $handle }) => HANDLE_POSITIONS[$handle]}
 `
@@ -120,9 +125,11 @@ export function CanvasElementFrame({
   onFrameKeyDown,
   onResizePointerDown,
 }: CanvasElementFrameProps): ReactElement {
-  const resolvedAriaLabel = ariaLabel ?? `${label ?? 'Canvas element'}${
-    readOnly ? ', read-only' : ', selectable'
-  }${selected ? ', selected' : ''}`
+  const resolvedAriaLabel =
+    ariaLabel ??
+    `${label ?? 'Canvas element'}${readOnly ? ', read-only' : ', selectable'}${
+      selected ? ', selected' : ''
+    }`
   return (
     <Frame
       data-canvas-element-frame="true"
@@ -164,18 +171,20 @@ export function CanvasElementFrame({
       {label ? <Label>{label}</Label> : null}
       {children}
       {selected && onResizePointerDown && !readOnly
-        ? (Object.keys(HANDLE_POSITIONS) as CanvasResizeHandle[]).map(handle => (
-            <Handle
-              key={handle}
-              type="button"
-              aria-label={`Resize ${label ?? 'element'} ${handle}`}
-              $handle={handle}
-              onPointerDown={event => {
-                event.stopPropagation()
-                onResizePointerDown(handle, event)
-              }}
-            />
-          ))
+        ? (Object.keys(HANDLE_POSITIONS) as CanvasResizeHandle[]).map(
+            handle => (
+              <Handle
+                key={handle}
+                type="button"
+                aria-label={`Resize ${label ?? 'element'} ${handle}`}
+                $handle={handle}
+                onPointerDown={event => {
+                  event.stopPropagation()
+                  onResizePointerDown(handle, event)
+                }}
+              />
+            ),
+          )
         : null}
     </Frame>
   )

package/src/components/common/canvas/canvasGeometry.test.ts

@@ -33,11 +33,10 @@ describe('canvasGeometry', () => {
 
   it('clamps rectangles to slide bounds', () => {
     expect(
-      clampCanvasRect(
-        { x: -80, y: 700, w: 200, h: 100 },
-        canvas,
-        { w: 80, h: 40 },
-      ),
+      clampCanvasRect({ x: -80, y: 700, w: 200, h: 100 }, canvas, {
+        w: 80,
+        h: 40,
+      }),
     ).toEqual({ x: 0, y: 620, w: 200, h: 100 })
   })
 

package/src/components/common/canvas/canvasGeometry.ts

@@ -117,10 +117,7 @@ export function resizeCanvasRect(input: {
   )
 }
 
-export function snapCanvasRect(
-  rect: CanvasRect,
-  gridStep = 0,
-): CanvasRect {
+export function snapCanvasRect(rect: CanvasRect, gridStep = 0): CanvasRect {
   if (gridStep <= 0) return rect
   const snap = (value: number): number =>
     Math.round(value / gridStep) * gridStep

package/src/components/common/canvas/useCanvasDragResize.test.tsx

@@ -8,8 +8,9 @@ const canvas: CanvasSize = { w: 1280, h: 720 }
 const viewport: ViewportRect = { left: 0, top: 0, width: 640, height: 360 }
 const frame: CanvasRect = { x: 120, y: 80, w: 240, h: 120 }
 
-;(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean })
-  .IS_REACT_ACT_ENVIRONMENT = true
+;(
+  globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+).IS_REACT_ACT_ENVIRONMENT = true
 
 let root: Root | null = null
 let host: HTMLDivElement | null = null
@@ -68,10 +69,12 @@ function Harness({
   )
 }
 
-function mountHarness(input: {
-  onPreview?: (rect: CanvasRect) => void
-  onCommit?: (rect: CanvasRect) => void
-} = {}): HTMLButtonElement {
+function mountHarness(
+  input: {
+    onPreview?: (rect: CanvasRect) => void
+    onCommit?: (rect: CanvasRect) => void
+  } = {},
+): HTMLButtonElement {
   host = document.createElement('div')
   document.body.append(host)
   root = createRoot(host)
@@ -141,10 +144,7 @@ describe('useCanvasDragResize', () => {
       dispatchPointer(window, 'pointercancel', { clientX: 70, clientY: 60 })
     })
 
-    expect(previews).toEqual([
-      { x: 180, y: 120, w: 240, h: 120 },
-      frame,
-    ])
+    expect(previews).toEqual([{ x: 180, y: 120, w: 240, h: 120 }, frame])
     expect(commits).toEqual([])
     expect(button.dataset.dragKind).toBe('none')
     expect(button.dataset.suppressClick).toBe('false')

package/src/components/common/canvas/useCanvasDragResize.ts

@@ -29,10 +29,7 @@ export interface UseCanvasDragResizeOptions {
 export interface UseCanvasDragResizeResult {
   dragState: CanvasDragState | null
   shouldSuppressClick: boolean
-  beginMove: (
-    frame: CanvasRect,
-    event: ReactPointerEvent<HTMLElement>,
-  ) => void
+  beginMove: (frame: CanvasRect, event: ReactPointerEvent<HTMLElement>) => void
   beginResize: (
     frame: CanvasRect,
     handle: CanvasResizeHandle,

package/src/components/common/cards/OpenReviewCard.tsx

@@ -32,9 +32,9 @@ const Card = styled.article<{
   border: 1px solid
     ${({ $selected }) =>
       $selected
-        ? 'color-mix(in srgb, var(--platform-colors-focus, #0f766e) 62%, var(--platform-colors-border, #d8dfde))'
+        ? 'color-mix(in srgb, var(--platform-colors-focus, var(--platform-colors-accent, #1c1a17)) 62%, var(--platform-colors-border, #e7e4dd))'
         : 'var(--platform-colors-border, #d8dfde)'};
-  border-radius: ${({ $density }) => ($density === 'compact' ? '6px' : '8px')};
+  border-radius: var(--platform-radius-sm);
   padding: ${({ $density }) =>
     $density === 'compact' ? '10px 12px' : '18px 20px'};
   color: var(--platform-colors-text, #20272b);
@@ -55,7 +55,7 @@ const Card = styled.article<{
     $density === 'compact' ? '1.38' : '1.48'};
   box-shadow: ${({ $selected }) =>
     $selected
-      ? '0 0 0 3px color-mix(in srgb, var(--platform-colors-focus, #0f766e) 10%, transparent)'
+      ? '0 0 0 3px color-mix(in srgb, var(--platform-colors-focus, var(--platform-colors-accent, #1c1a17)) 10%, transparent)'
       : 'none'};
 `
 
@@ -66,11 +66,11 @@ const IconSlot = styled.div`
   width: 34px;
   height: 34px;
   margin-top: 1px;
-  border-radius: 999px;
-  color: var(--platform-colors-focus, #0f766e);
+  border-radius: var(--platform-radius-sm);
+  color: var(--platform-colors-focus, var(--platform-colors-accent, #1c1a17));
   background: color-mix(
     in srgb,
-    var(--platform-colors-focus, #0f766e) 10%,
+    var(--platform-colors-focus, var(--platform-colors-accent, #1c1a17)) 10%,
     var(--platform-colors-surface, #fff)
   );
 `

package/src/components/common/chat/ChatBox.test.tsx

@@ -1,6 +1,14 @@
 import { act } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
-import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  afterEach,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from 'vitest'
 import { ChatBox } from './ChatBox.js'
 
 type ReactActGlobal = typeof globalThis & {

package/src/components/common/chat/ChatBox.tsx

@@ -50,8 +50,7 @@ export const ChatBox = forwardRef<HTMLTextAreaElement, ChatBoxProps>(
     )
 
     const textDisabled = disabled || inputDisabled
-    const canSend =
-      !disabled && !sendDisabled && value.trim().length > 0
+    const canSend = !disabled && !sendDisabled && value.trim().length > 0
     const showStop = sending && onStop
 
     return (
@@ -107,7 +106,7 @@ const EditorWrapper = styled.div`
   flex-direction: column;
   background: var(--platform-colors-bg);
   border: 1px solid var(--platform-colors-border);
-  border-radius: 8px;
+  border-radius: var(--platform-radius-sm);
   overflow: hidden;
   transition: border-color 0.15s;
 
@@ -166,7 +165,7 @@ const SendButton = styled.button`
   height: 28px;
   padding: 0;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--platform-radius-sm);
   background: transparent;
   color: var(--platform-colors-accent);
   cursor: pointer;

package/src/components/common/chat/ChatMarkdown.tsx

@@ -80,7 +80,7 @@ const StyledMarkdown = styled.div<{ $streaming?: boolean }>`
 
   pre {
     background: var(--platform-colors-surface-raised);
-    border-radius: 4px;
+    border-radius: var(--platform-radius-sm, 0px);
     padding: 8px 10px;
     overflow-x: auto;
   }

package/src/components/common/chat/ChatModelMenu.tsx

@@ -43,7 +43,7 @@ const StyledTrigger = styled.button`
   max-width: 180px;
   padding: 2px 6px;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--platform-radius-sm);
   background: transparent;
   color: var(--platform-colors-text-secondary);
   font-size: 11px;

package/src/components/common/chat/ChatThinkingIndicator.tsx

@@ -37,7 +37,7 @@ const Dots = styled.span`
   span {
     animation: ${dot} 1.2s ease-in-out infinite;
     background: var(--platform-colors-text-disabled);
-    border-radius: 50%;
+    border-radius: 0;
     display: inline-block;
     height: 3px;
     margin-left: 3px;

package/src/components/common/chat/ChatThread.tsx

@@ -47,7 +47,8 @@ const Container = styled.div`
   gap: 12px;
   min-height: 0;
   overflow-y: auto;
-  padding: calc(16px + var(--platform-agent-thread-header-height, 0px)) 24px 16px;
+  padding: calc(16px + var(--platform-agent-thread-header-height, 0px)) 24px
+    16px;
 `
 
 export const ChatThreadEmpty = styled.div`

package/src/components/common/chat/ChatToolRow.tsx

@@ -92,7 +92,7 @@ const Ts = styled.span`
 
 const Plain = styled.div`
   align-self: flex-start;
-  border-radius: 6px;
+  border-radius: var(--platform-radius-sm);
   width: 100%;
   padding: 5px 10px;
 
@@ -103,7 +103,7 @@ const Plain = styled.div`
 
 const Expandable = styled.div`
   align-self: flex-start;
-  border-radius: 6px;
+  border-radius: var(--platform-radius-sm);
   width: 100%;
 
   &:hover {

package/src/components/common/chat/ChatUserBubble.tsx

@@ -30,7 +30,7 @@ const Root = styled.div`
 const Bubble = styled.div`
   background: var(--platform-colors-accent-muted);
   border: 1px solid var(--platform-colors-border);
-  border-radius: 12px 12px 2px 12px;
+  border-radius: var(--platform-radius-sm);
   color: var(--platform-colors-text);
   font-size: 13px;
   line-height: 1.5;

package/src/components/common/connections/ConnectionSetup.tsx

@@ -145,7 +145,7 @@ const OptionButton = styled.button<{
       $selected
         ? 'var(--connection-accent, var(--platform-colors-accent))'
         : 'var(--connection-border, var(--platform-colors-border))'};
-  border-radius: 8px;
+  border-radius: var(--platform-radius-sm, 0px);
   background: ${({ $selected }) =>
     $selected
       ? 'rgb(from var(--connection-accent, var(--platform-colors-accent)) r g b / 8%)'
@@ -189,7 +189,7 @@ const OptionBadge = styled.span<{ $tone: ConnectionOptionTone }>`
   flex: 0 0 auto;
   padding: 3px 8px;
   border: 1px solid var(--connection-border, var(--platform-colors-border));
-  border-radius: 999px;
+  border-radius: var(--platform-radius-sm);
   color: ${({ $tone }) =>
     $tone === 'connected'
       ? 'var(--platform-colors-semantic-green-text, #3f6d4c)'
@@ -220,7 +220,7 @@ const SavedCardRoot = styled.div`
   min-width: 0;
   padding: 16px;
   border: 1px solid var(--connection-border, var(--platform-colors-border));
-  border-radius: 8px;
+  border-radius: var(--platform-radius-sm, 0px);
   background: var(--connection-surface, var(--platform-colors-surface));
 `
 
@@ -264,7 +264,7 @@ export const ConnectionPanel = styled.div`
   min-width: 0;
   padding: 16px;
   border: 1px solid var(--connection-border, var(--platform-colors-border));
-  border-radius: 8px;
+  border-radius: var(--platform-radius-md, 0px);
   background: var(--connection-surface, var(--platform-colors-surface));
   box-shadow: var(--platform-shadow-sm, 0 1px 2px rgb(31 38 52 / 6%));
 `
@@ -313,7 +313,7 @@ const TestResultRoot = styled.div<{ $tone: ConnectionTestTone }>`
         : $tone === 'error'
         ? 'var(--platform-colors-semantic-red-border, var(--connection-border, var(--platform-colors-border)))'
         : 'var(--connection-border, var(--platform-colors-border))'};
-  border-radius: 8px;
+  border-radius: var(--platform-radius-sm, 0px);
   background: var(--connection-surface, var(--platform-colors-surface));
 `
 
@@ -381,7 +381,7 @@ const StepNumber = styled.span`
   width: 24px;
   height: 24px;
   border: 1px solid var(--connection-border, var(--platform-colors-border));
-  border-radius: 999px;
+  border-radius: var(--platform-radius-sm);
   color: var(--connection-muted, var(--platform-colors-text-secondary));
   font-size: 12px;
   font-weight: 800;