From b19a8410b1b12db0ba8cb57699cba2dc4160e7f5 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Thu, 18 Jun 2026 14:46:49 -0400 Subject: [PATCH 1/3] init --- packages/ui/src/elements/DevModeNotice.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/ui/src/elements/DevModeNotice.tsx b/packages/ui/src/elements/DevModeNotice.tsx index 93ab3c10233..fddd45e4e56 100644 --- a/packages/ui/src/elements/DevModeNotice.tsx +++ b/packages/ui/src/elements/DevModeNotice.tsx @@ -3,12 +3,7 @@ import type { ThemableCssProp } from '@/ui/styledSystem'; import { Box, Text } from '../customizables'; import { useDevMode } from '../hooks/useDevMode'; -type DevModeOverlayProps = { - gradient?: number; -}; - -export const DevModeOverlay = (props: DevModeOverlayProps) => { - const { gradient = 60 } = props; +export const DevModeOverlay = () => { const { showDevModeNotice } = useDevMode(); if (!showDevModeNotice) { @@ -20,10 +15,12 @@ export const DevModeOverlay = (props: DevModeOverlayProps) => { sx={t => ({ userSelect: 'none', pointerEvents: 'none', - inset: 0, + insetInline: 0, + bottom: 0, position: 'absolute', - background: `repeating-linear-gradient(-45deg,${t.colors.$warningAlpha100},${t.colors.$warningAlpha100} 6px,${t.colors.$warningAlpha150} 6px,${t.colors.$warningAlpha150} 12px)`, - maskImage: `linear-gradient(transparent ${gradient}%, black)`, + backgroundColor: t.colors.$warning500, + height: 1, + maskImage: `linear-gradient(to right, transparent, black 60%, transparent)`, })} /> ); From f3ffa0b3e65fa09588a3f396ad13a41a0380d477 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Thu, 18 Jun 2026 14:51:42 -0400 Subject: [PATCH 2/3] add changeset --- .changeset/clear-adults-pump.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/clear-adults-pump.md diff --git a/.changeset/clear-adults-pump.md b/.changeset/clear-adults-pump.md new file mode 100644 index 00000000000..6230c5cec82 --- /dev/null +++ b/.changeset/clear-adults-pump.md @@ -0,0 +1,5 @@ +--- +'@clerk/ui': patch +--- + +Updates dev mode banner styling From 0a8ce025453afaed292fc9da5ada8eb646b94564 Mon Sep 17 00:00:00 2001 From: Preston Booth Date: Thu, 18 Jun 2026 14:36:40 -0600 Subject: [PATCH 3/3] fix(ui): update dev mode overlay styling --- .../elements/Card/CardClerkAndPagesTag.tsx | 2 +- packages/ui/src/elements/DevModeNotice.tsx | 98 +++++++++++++++++-- 2 files changed, 93 insertions(+), 7 deletions(-) diff --git a/packages/ui/src/elements/Card/CardClerkAndPagesTag.tsx b/packages/ui/src/elements/Card/CardClerkAndPagesTag.tsx index 47be19c659f..8831d9b13bf 100644 --- a/packages/ui/src/elements/Card/CardClerkAndPagesTag.tsx +++ b/packages/ui/src/elements/Card/CardClerkAndPagesTag.tsx @@ -38,7 +38,7 @@ export const CardClerkAndPagesTag = React.memo( outerSx, ]} > - {withDevOverlay && } + {withDevOverlay && } ({ gap: displayConfig.branded || withFooterPages ? t.space.$2 : 0, diff --git a/packages/ui/src/elements/DevModeNotice.tsx b/packages/ui/src/elements/DevModeNotice.tsx index fddd45e4e56..02526324fda 100644 --- a/packages/ui/src/elements/DevModeNotice.tsx +++ b/packages/ui/src/elements/DevModeNotice.tsx @@ -3,6 +3,49 @@ import type { ThemableCssProp } from '@/ui/styledSystem'; import { Box, Text } from '../customizables'; import { useDevMode } from '../hooks/useDevMode'; +const DEV_MODE_GRID = { + width: 420, + height: 25, + squareSize: 1.5, + gap: 2, + minOpacity: 0.15, + maxOpacity: 0.75, + contrast: 2, + fadeWidth: 100, + fadeHeight: 36, + edgeFadeStop: 50, + lineHeight: 2, +} as const; + +const cellRandom = (x: number, y: number) => { + let h = (x * 374761393 + y * 668265263 + 2246822519) | 0; + h = (h ^ (h >>> 13)) * 1274126177; + return ((h ^ (h >>> 16)) >>> 0) / 4294967296; +}; + +const buildDevModeGridTile = (options: typeof DEV_MODE_GRID) => { + const step = options.squareSize + options.gap; + const tileWidth = Math.max(1, Math.round(options.width / step)) * step; + const tileHeight = options.height - options.lineHeight; + let rects = ''; + + for (let y = 0; y < tileHeight; y += step) { + for (let x = 0; x < tileWidth; x += step) { + const opacity = + options.minOpacity + (options.maxOpacity - options.minOpacity) * Math.pow(cellRandom(x, y), options.contrast); + rects += ``; + } + } + + const svg = `${rects}`; + return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`; +}; + +const gridTile = buildDevModeGridTile(DEV_MODE_GRID); +const gridMask = `radial-gradient(ellipse ${DEV_MODE_GRID.fadeWidth}% ${(DEV_MODE_GRID.fadeHeight / DEV_MODE_GRID.height) * 100}% at 50% 100%, #000 0%, transparent 100%)`; +const edgeMask = `linear-gradient(to right, transparent, #000 ${DEV_MODE_GRID.edgeFadeStop}%, #000 ${100 - DEV_MODE_GRID.edgeFadeStop}%, transparent)`; +const lineMask = 'linear-gradient(to right, transparent 2%, #000 50%, transparent 98%)'; + export const DevModeOverlay = () => { const { showDevModeNotice } = useDevMode(); @@ -12,17 +55,60 @@ export const DevModeOverlay = () => { return ( ({ + sx={{ userSelect: 'none', pointerEvents: 'none', insetInline: 0, bottom: 0, position: 'absolute', - backgroundColor: t.colors.$warning500, - height: 1, - maskImage: `linear-gradient(to right, transparent, black 60%, transparent)`, - })} - /> + height: DEV_MODE_GRID.height, + }} + > + + + ({ + position: 'absolute', + top: 0, + insetInline: 0, + bottom: DEV_MODE_GRID.lineHeight, + backgroundColor: t.colors.$warning500, + maskImage: gridTile, + maskRepeat: 'repeat-x', + maskPosition: 'left bottom', + WebkitMaskImage: gridTile, + WebkitMaskRepeat: 'repeat-x', + WebkitMaskPosition: 'left bottom', + })} + /> + + + ({ + position: 'absolute', + insetInline: 0, + bottom: 0, + height: DEV_MODE_GRID.lineHeight, + backgroundColor: t.colors.$warning500, + maskImage: lineMask, + WebkitMaskImage: lineMask, + })} + /> + ); };