@likec4/diagram 1.24.0 → 1.25.0

package/src/base/primitives/edge/edge.css.ts

@@ -1,7 +1,8 @@
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-import { cssReactFlow } from '../../../LikeC4Diagram.css'
-import { vars, xyvars } from '../../../theme-vars'
-import { whereDark, whereLight } from '../../../theme-vars.css'
+import {
+  reactFlow,
+} from '../../../LikeC4Diagram.css'
+import { vars, whereDark, whereLight, whereNotReducedGraphics, xyvars } from '../../../theme-vars'
 
 export const mixColor = createVar('mix-color')
 
@@ -10,20 +11,45 @@ export const edgeVars = style({
     [mixColor]: `black`,
     [xyvars.edge.stroke]: vars.relation.lineColor,
     [xyvars.edge.strokeSelected]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
-    [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, rgba(255 255 255 / 0.85) 40%)`,
-    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 40%)`,
+    [xyvars.edge.labelColor]: vars.relation.labelColor,
+    [xyvars.edge.labelBgColor]: vars.relation.labelBgColor,
     [xyvars.edge.strokeWidth]: '3',
   },
-})
-
-globalStyle(`${whereDark} ${edgeVars}`, {
-  vars: {
-    [mixColor]: `white`,
-    [xyvars.edge.labelColor]: vars.relation.labelColor,
-    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`,
+  selectors: {
+    [`${whereDark} &`]: {
+      vars: {
+        [mixColor]: `white`,
+      },
+    },
+    [`${whereLight} ${whereNotReducedGraphics} &`]: {
+      vars: {
+        [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, rgba(255 255 255 / 0.85) 40%)`,
+        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 40%)`,
+      },
+    },
+    [`${whereDark} ${whereNotReducedGraphics} &`]: {
+      vars: {
+        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`,
+      },
+    },
   },
 })
 
+export const edgeContainer = style([edgeVars, {
+  selectors: {
+    [`&:is([data-edge-dimmed="true"])`]: {
+      opacity: 0.6,
+      transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
+      transitionDelay: '200ms',
+      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
+    },
+    [`&:is([data-edge-dimmed="immediate"])`]: {
+      opacity: 0.25,
+      transition: 'opacity 100ms ease-in-out, filter 100ms ease-in-out',
+      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
+    },
+  },
+}])
 const isSelected = '.react-flow__edge.selected'
 
 globalStyle(`:where(${isSelected}) ${edgeVars}`, {
@@ -47,23 +73,13 @@ globalStyle(`:where(${isSelected}) ${edgeVars}[data-edge-hovered='true']`, {
   },
 })
 
-globalStyle(`${cssReactFlow} .react-flow__edges > svg`, {
+globalStyle(`${reactFlow} :where(.react-flow__edges, .react-flow__edgelabel-renderer) > svg`, {
   mixBlendMode: 'plus-lighter',
 })
-globalStyle(`${whereLight} ${cssReactFlow} .react-flow__edges > svg`, {
+globalStyle(`${whereLight} ${reactFlow} :where(.react-flow__edges, .react-flow__edgelabel-renderer) > svg`, {
   mixBlendMode: 'screen',
 })
 
-export const dimmed = style({})
-
-globalStyle(`${cssReactFlow} .react-flow__edges > svg:has(${dimmed})`, {
-  opacity: 0.6,
-  transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
-  transitionDelay: '200ms',
-  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
-  willChange: 'opacity, filter',
-})
-
 export const edgePathBg = style({
   // strokeWidth: xyvars.edge.strokeWidth,
   strokeOpacity: 0.08,
@@ -73,6 +89,9 @@ export const edgePathBg = style({
   transitionDuration: '155ms',
   transitionTimingFunction: 'ease-out',
   selectors: {
+    [`:where([data-likec4-zoom-small="true"]) &`]: {
+      display: 'none',
+    },
     [`:where(${isSelected}, [data-edge-active='true'], [data-edge-hovered='true']) &`]: {
       strokeWidth: `calc(${xyvars.edge.strokeWidth} + 8)`,
       strokeOpacity: 0.15,
@@ -96,26 +115,28 @@ const strokeKeyframes = keyframes({
 })
 
 export const cssEdgePath = style({
-  animationDuration: '800ms',
-  animationIterationCount: 'infinite',
-  animationTimingFunction: 'linear',
-  animationFillMode: 'both',
-  strokeDashoffset: 10,
   selectors: {
-    [`:where([data-edge-hovered='true']) &`]: {
+    [`${whereNotReducedGraphics} &`]: {
+      animationDuration: '800ms',
+      animationIterationCount: 'infinite',
+      animationTimingFunction: 'linear',
+      animationFillMode: 'both',
+      strokeDashoffset: 10,
+    },
+    [`${reactFlow} :where([data-edge-hovered='true']) &`]: {
       animationName: strokeKeyframes,
       animationDelay: '450ms',
       transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',
     },
-    [`:where(${isSelected}, [data-edge-active='true'], [data-edge-animated='true']) &`]: {
+    [`${reactFlow} :where(${isSelected}, [data-edge-active='true'], [data-edge-animated='true']) &`]: {
       animationName: strokeKeyframes,
       animationDelay: '0ms',
       transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',
     },
-    [`:where([data-edge-dir='back']) &`]: {
+    [`${reactFlow} :where([data-edge-dir='back']) &`]: {
       animationDirection: 'reverse',
     },
-    [`${dimmed} &`]: {
+    [`:where([data-edge-dimmed]) &`]: {
       animationPlayState: 'paused',
     },
   },

package/src/base/primitives/element/ElementActionButtons.css.ts

@@ -1,4 +1,5 @@
 import { style } from '@vanilla-extract/css'
+import { reactFlowReducedGraphics } from '../../../LikeC4Diagram.css'
 import { transitions, vars } from '../../../theme-vars'
 
 export const container = style({
@@ -11,7 +12,7 @@ export const container = style({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  zIndex: 10,
+  // zIndex: 10,
 })
 
 export const actionButtons = style({
@@ -41,6 +42,9 @@ export const actionIcon = style({
         '--ai-bg': `var(--ai-bg-hover)`,
       },
     },
+    [`${reactFlowReducedGraphics} &`]: {
+      boxShadow: 'none',
+    },
   },
 })
 // globalStyle(`${actionIcon} > *`, {

package/src/base/primitives/element/ElementActionButtons.tsx

@@ -1,6 +1,7 @@
 import { ActionIcon, Box } from '@mantine/core'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
+import { useIsZoomTooSmall } from '../../../hooks/useXYFlow'
 import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
 import { stopPropagation } from '../../../utils/xyflow'
 import type { NodeProps } from '../../types'
@@ -18,11 +19,12 @@ export function ElementActionButtons({
   },
   buttons,
 }: ElementActionButtonsProps) {
-  if (!buttons.length) {
+  const zoomTooSmall = useIsZoomTooSmall()
+  if (!buttons.length || zoomTooSmall) {
     return null
   }
   return (
-    <Box className={clsx(css.container, hiddenIfZoomTooSmall)}>
+    <Box className={clsx(css.container)}>
       <Box
         component={m.div}
         layoutRoot

package/src/base/primitives/element/ElementDetailsButton.css.ts

@@ -1,11 +1,11 @@
 import { style } from '@vanilla-extract/css'
+import { reactFlowReducedGraphics } from '../../../LikeC4Diagram.css'
 import { vars } from '../../../theme-vars'
 
 export const container = style({
   position: 'absolute',
   top: 2,
   right: 2,
-  zIndex: 10,
   selectors: {
     [`:where([data-likec4-shape='browser']) &`]: {
       right: 5,
@@ -32,7 +32,6 @@ export const actionIcon = style({
   pointerEvents: 'all',
   color: vars.element.loContrast,
   cursor: 'pointer',
-  backgroundColor: 'var(--ai-bg)',
   'vars': {
     '--ai-bg-idle': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
     '--ai-bg': `var(--ai-bg-idle)`,
@@ -43,12 +42,9 @@ export const actionIcon = style({
   ':hover': {
     boxShadow: '1px 1px 3px 0px rgba(0, 0, 0, 0.15)',
   },
-  // selectors: {
-  //   [`:where([data-hovered='true']) &`]: {
-  //     // boxShadow: '1px 1px 3px 0px rgba(0, 0, 0, 0.15)',
-  //     // vars: {
-  //     //   '--ai-bg': `var(--ai-bg-hover)`,
-  //     // },
-  //   },
-  // },
+  selectors: {
+    [`${reactFlowReducedGraphics} &`]: {
+      boxShadow: 'none',
+    },
+  },
 })

package/src/base/primitives/element/ElementDetailsButton.tsx

@@ -22,9 +22,9 @@ export function ElementDetailsButton({
 }: ElementDetailsButtonProps) {
   return (
     <Box className={clsx(css.container, hiddenIfZoomTooSmall, 'details-button')}>
-      <Box
-        className={clsx('nodrag nopan', css.actionIconWrapper)}
-        component={m.div}
+      <ActionIcon
+        className={clsx('nodrag nopan', css.actionIcon)}
+        component={m.button}
         initial={false}
         style={{
           originX: 0.45,
@@ -44,17 +44,13 @@ export function ElementDetailsButton({
           opacity: 1,
         }}
         whileTap={{ scale: 1.15 }}
+        size={'md'}
+        radius="md"
+        onClick={onClick}
+        onDoubleClick={stopPropagation}
       >
-        <ActionIcon
-          className={css.actionIcon}
-          size={'md'}
-          radius="md"
-          onClick={onClick}
-          onDoubleClick={stopPropagation}
-        >
-          {icon ?? <IconId stroke={1.8} style={{ width: '75%' }} />}
-        </ActionIcon>
-      </Box>
+        {icon ?? <IconId stroke={1.8} style={{ width: '75%' }} />}
+      </ActionIcon>
     </Box>
   )
 }

package/src/base/primitives/element/ElementNodeContainer.css.ts

@@ -1,5 +1,8 @@
+import { defaultTheme } from '@likec4/core'
+import { rem } from '@mantine/core'
 import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { easings, vars } from '../../../theme-vars'
+import { easings, vars, whereReducedGraphics } from '../../../theme-vars'
+import { iconSize, paddingSize, textSize } from './vars.css'
 
 export const stokeFillMix = createVar('stroke-fill-mix')
 
@@ -15,12 +18,6 @@ export const container = style({
   vars: {
     [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`,
   },
-  // selectors: {
-  //   ':where(.react-flow__node.selected) &': {
-  //     willChange: 'transform',
-  //   },
-  // },
-  // Catch pointer below the element
   ':after': {
     content: ' ',
     position: 'absolute',
@@ -31,19 +28,68 @@ export const container = style({
     background: 'transparent',
     pointerEvents: 'all',
   },
+
+  selectors: {
+    [`&:is([data-likec4-dimmed="true"])`]: {
+      opacity: 0.25,
+      transition: `opacity 400ms ${easings.inOut}, filter 500ms ${easings.inOut}`,
+      transitionDelay: '50ms',
+      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
+    },
+    [`&:is([data-likec4-dimmed="immediate"])`]: {
+      opacity: 0.25,
+      transition: `opacity 100ms ${easings.inOut}, filter 100ms ${easings.inOut}`,
+      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
+    },
+    [`${whereReducedGraphics}  &:after`]: {
+      display: 'none',
+    },
+    [`:where(.react-flow__node.selectable:not(.dragging)) &`]: {
+      cursor: 'pointer',
+    },
+  },
 })
 
-globalStyle(`.react-flow__node:has(${container}[data-likec4-dimmed="true"])`, {
-  opacity: 0.25,
-  transition: `opacity 400ms ${easings.inOut}, filter 500ms ${easings.inOut}`,
-  transitionDelay: '50ms',
-  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
-  willChange: 'opacity, filter',
+globalStyle(`${container}`, {
+  vars: {
+    [textSize]: rem(defaultTheme.textSizes.md),
+    [paddingSize]: rem(defaultTheme.spacing.md),
+    [iconSize]: '60px',
+  },
+})
+
+globalStyle(`${container}[data-likec4-shape-size="xs"]`, {
+  vars: {
+    [iconSize]: '24px',
+  },
+})
+globalStyle(`${container}[data-likec4-shape-size="sm"]`, {
+  vars: {
+    [iconSize]: '36px',
+  },
+})
+globalStyle(`${container}[data-likec4-shape-size="lg"]`, {
+  vars: {
+    [iconSize]: '82px',
+  },
 })
+globalStyle(`${container}[data-likec4-shape-size="xl"]`, {
+  vars: {
+    [iconSize]: '90px',
+  },
+})
+
+const sizes = ['xs', 'sm', 'lg', 'xl'] as const
+sizes.forEach((size) => {
+  globalStyle(`${container}[data-likec4-text-size="${size}"]`, {
+    vars: {
+      [textSize]: rem(defaultTheme.textSizes[size]),
+    },
+  })
 
-globalStyle(`.react-flow__node:has(${container}[data-likec4-dimmed="immediate"])`, {
-  opacity: 0.25,
-  transition: `opacity 100ms ${easings.inOut}, filter 100ms ${easings.inOut}`,
-  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
-  willChange: 'opacity, filter',
+  globalStyle(`${container}[data-likec4-padding="${size}"]`, {
+    vars: {
+      [paddingSize]: rem(defaultTheme.spacing[size]),
+    },
+  })
 })

package/src/base/primitives/element/ElementNodeContainer.tsx

@@ -9,6 +9,7 @@ import { type BoxProps, Box, createPolymorphicComponent } from '@mantine/core'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
 import { type PropsWithChildren, forwardRef } from 'react'
+import { useIsReducedGraphics } from '../../../hooks/useIsReducedGraphics'
 import type { NodeProps } from '../../types'
 import * as css from './ElementNodeContainer.css'
 

package/src/base/primitives/element/ElementShape.css.ts

@@ -1,5 +1,6 @@
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-import { easings, mantine, vars } from '../../../theme-vars'
+import { hiddenIfZoomTooSmall, reactFlowReducedGraphics } from '../../../LikeC4Diagram.css'
+import { easings, mantine, vars, whereNotReducedGraphics } from '../../../theme-vars'
 import { container, stokeFillMix } from './ElementNodeContainer.css'
 
 const indicatorKeyframes = keyframes({
@@ -19,7 +20,7 @@ const outlineColor = fallbackVar(
 
 const indicatorStroke = createVar('indicator-stroke')
 
-export const indicator = style({
+export const indicator = style([hiddenIfZoomTooSmall, {
   stroke: indicatorStroke,
   fill: 'none',
   transformOrigin: 'center center',
@@ -36,6 +37,8 @@ export const indicator = style({
   selectors: {
     ':where(.react-flow__node.selected) &': {
       visibility: 'visible',
+    },
+    [`${whereNotReducedGraphics} :where(.react-flow__node.selected)  &`]: {
       animationName: fallbackVar(vars.safariAnimationHook, indicatorKeyframes),
     },
     [`:where(.react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
@@ -52,7 +55,7 @@ export const indicator = style({
       },
     },
   },
-})
+}])
 
 export const fillElementFill = style({
   fill: vars.element.fill,
@@ -78,10 +81,12 @@ const shapeBase = style({
   fill: vars.element.fill,
   stroke: vars.element.stroke,
   overflow: 'visible',
-  zIndex: -1,
+  // zIndex is removed to improve rendering performance
+  // this forces to keep shape in the same layer as the node
+  // zIndex: -1,
 })
 
-export const shapeSvgMultiple = style([shapeBase, {
+export const shapeSvgMultiple = style([shapeBase, hiddenIfZoomTooSmall, {
   transformOrigin: '50% 25%',
   transform: 'translate(14px, 14px) perspective(300px) translateZ(-8px)',
   filter: ' brightness(0.65) saturate(0.8)',
@@ -125,15 +130,26 @@ export const shapeSvg = style([shapeBase, {
         `,
       },
     },
-    [`:where(.react-flow__node.selected, .react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
+    [`:where([data-likec4-level='true']) &`]: {
       vars: {
-        [filterShadow]: `none`,
+        [filterShadow]: `
+        drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25))
+        drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1))
+        drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05))
+
+        `,
       },
     },
-    [`:where([data-likec4-zoom-small="true"]) &`]: {
+    [`:where(.react-flow__node.selected, .react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
       vars: {
         [filterShadow]: `none`,
       },
     },
+    [`:where([data-likec4-zoom-small="true"]) &`]: {
+      filter: 'none',
+    },
+    [`${reactFlowReducedGraphics} &`]: {
+      filter: 'none',
+    },
   },
 }])

package/src/base/primitives/element/ElementShape.tsx

@@ -185,7 +185,7 @@ export function ElementShape(
   return (
     <>
       {isMultiple && (
-        <svg className={clsx(css.shapeSvgMultiple, hiddenIfZoomTooSmall)} viewBox={`0 0 ${w} ${h}`}>
+        <svg className={clsx(css.shapeSvgMultiple)} viewBox={`0 0 ${w} ${h}`}>
           <ElementShapeSvg shape={data.shape} w={w} h={h} />
         </svg>
       )}
@@ -223,5 +223,5 @@ export function SelectedIndicator({ shape, w, h }: ElementShapeProps) {
       break
     }
   }
-  return <g className={clsx(css.indicator, hiddenIfZoomTooSmall)}>{svg}</g>
+  return <g className={css.indicator}>{svg}</g>
 }

package/src/base/primitives/element/ElementTitle.css.ts

@@ -2,12 +2,14 @@ import { rem } from '@mantine/core'
 import { createVar, globalStyle, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
 import { vars } from '../../../theme-vars'
-import { iconSize, paddingSize, textSize } from './styles.css'
+import { iconSize, paddingSize, textSize } from './vars.css'
 
 export const hasIcon = style({})
 
 const textAlign = createVar('text-align')
 
+export { iconSize, paddingSize, textSize }
+
 export const title = style({
   flex: '0 0 auto',
   fontFamily: vars.element.font,
@@ -66,6 +68,7 @@ export const technology = style({
 })
 
 export const elementDataContainer = style({
+  position: 'relative',
   flex: '1',
   height: 'fit-content',
   width: 'fit-content',

package/src/base/primitives/element/ElementTitle.tsx

@@ -1,14 +1,13 @@
 import { type DiagramNode } from '@likec4/core'
 import { Box, Text } from '@mantine/core'
-import { assignInlineVars } from '@vanilla-extract/dynamic'
 import clsx from 'clsx'
 import { isNumber, isTruthy } from 'remeda'
 import { IconRenderer } from '../../../context/IconRenderer'
 import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
+import { getVarName } from '../../../utils/css'
 import type { NodeProps } from '../../types'
 import { nodeSizes } from './ElementNodeContainer'
 import * as css from './ElementTitle.css'
-import { iconSize as varIconSize } from './styles.css'
 
 type Data =
   & Pick<
@@ -27,6 +26,8 @@ type ElementTitleProps = NodeProps<Data> & {
   iconSize?: number
 }
 
+const varIconSize = getVarName(css.iconSize)
+
 export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
   const elementIcon = IconRenderer({
     element: {
@@ -47,9 +48,9 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
         'likec4-element',
       )}
       style={{
-        ...isNumber(iconSize) && assignInlineVars({
+        ...isNumber(iconSize) && {
           [varIconSize]: `${iconSize}px`,
-        }),
+        },
       }}
     >
       {elementIcon}

package/src/base/primitives/element/vars.css.ts

@@ -0,0 +1,5 @@
+import { createGlobalVar, createVar } from '@vanilla-extract/css'
+
+export const textSize = createVar('text-size')
+export const paddingSize = createVar('padding-size')
+export const iconSize = createGlobalVar('likec4-icon-size')

package/src/components/Link.css.ts

@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css'
 import { mantine } from '../theme-vars'
-import { easings, transitions, whereDark } from '../theme-vars.css'
+import { easings, transitions, whereDark } from '../theme-vars'
 
 export const elementLink = style({
   display: 'flex',

package/src/components/SearchControl.css.ts

@@ -1,21 +1,18 @@
 import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine, transitions, vars, whereDark, whereLight } from '../theme-vars'
+import { mantine, transitions, vars, whereDark, whereLight, whereNotReducedGraphics } from '../theme-vars'
 
 const transparent = createVar('transparent')
 const bgColor = createVar('bgcolor')
 export const root = style({
-  height: '32px',
+  height: '30px',
   paddingLeft: mantine.spacing.sm,
   paddingRight: '4px',
-  borderRadius: mantine.radius.sm,
-  color: mantine.colors.placeholder,
-  boxShadow: mantine.shadows.xs,
+  borderRadius: '0px',
+  color: fallbackVar('var(--search-color)', mantine.colors.placeholder),
   border: '1px solid',
   cursor: 'pointer',
-  transition: transitions.fast,
-  WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-  backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
-  backgroundColor: `color-mix(in srgb, ${bgColor}, transparent ${transparent})`,
+  backgroundColor: bgColor,
+  width: '100%',
   vars: {
     [transparent]: '20%',
     [bgColor]: mantine.colors.default,
@@ -33,6 +30,14 @@ export const root = style({
         [bgColor]: mantine.colors.dark[6],
       },
     },
+    [`${whereNotReducedGraphics} &`]: {
+      transition: transitions.fast,
+      borderRadius: fallbackVar('var(--search-border-radius)', mantine.radius.sm),
+      backgroundColor: `color-mix(in srgb, ${bgColor}, transparent ${transparent})`,
+      boxShadow: mantine.shadows.xs,
+      WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+      backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+    },
   },
   ':hover': {
     borderColor: mantine.colors.defaultBorder,
@@ -47,17 +52,27 @@ globalStyle(`${root} .tabler-icon`, {
   color: mantine.colors.text,
 })
 
+export const placeholder = style({
+  fontSize: mantine.fontSizes.sm,
+  fontWeight: 500,
+  paddingRight: 50,
+  flex: 1,
+})
+
 export const shortcut = style({
   fontSize: '11px',
+  fontWeight: 600,
   lineHeight: 1,
   padding: '4px 7px',
   borderRadius: mantine.radius.sm,
   border: '1px solid',
-  fontWeight: 'bold',
   selectors: {
     [`${whereLight} &`]: {
       color: mantine.colors.gray[7],
       borderColor: mantine.colors.gray[2],
+      backgroundColor: mantine.colors.gray[2],
+    },
+    [`${whereLight} ${whereNotReducedGraphics} &`]: {
       backgroundColor: `color-mix(in srgb, ${mantine.colors.gray[2]}, transparent 20%)`,
     },
     [`${whereDark} &`]: {

package/src/components/SearchControl.tsx

@@ -21,10 +21,10 @@ export function SearchControl({ className, ...others }: SearchControlProps) {
     <UnstyledButton {...others} className={cx(classes.root, className)}>
       <Group gap="xs">
         <IconSearch style={{ width: rem(15), height: rem(15) }} stroke={2} />
-        <Text fz="sm" fw="500" pr={50}>
+        <Text component="div" className={classes.placeholder}>
           Search
         </Text>
-        <Text fw={700} className={classes.shortcut}>
+        <Text component="div" className={classes.shortcut}>
           {isMac ? '⌘ + K' : 'Ctrl + K'}
         </Text>
       </Group>

package/src/context/ControlsCustomLayout.ts

@@ -0,0 +1,16 @@
+import { createOptionalContext } from '@mantine/core'
+import { type ReactNode } from 'react'
+
+export type ControlsCustomLayoutProps = {
+  burgerMenu: ReactNode
+  navigationButtons: ReactNode
+  search: ReactNode
+  actionsGroup: ReactNode
+  syncInProgressBadge: ReactNode
+}
+export type ControlsCustomLayout = (props: ControlsCustomLayoutProps) => ReactNode
+
+export const [
+  ControlsCustomLayoutProvider,
+  useControlsCustomLayout,
+] = createOptionalContext<ControlsCustomLayout | null>(null)