More consistent boxshadows with themes

packages/web/components/patterns/HighlightBar.tsx

@@ -44,7 +44,7 @@ export function HighlightBar(props: HighlightBarProps): JSX.Element {
           background: '$grayBg',
           borderRadius: '4px',
           border: '1px solid $grayBorder',
-          boxShadow: '0px 0px 9px -2px rgba(32, 31, 29, 0.09), 0px 7px 12px rgba(32, 31, 29, 0.07)',
+          boxShadow: theme.shadows.cardBoxShadow.toString(),
           bottom: 'calc(38px + env(safe-area-inset-bottom, 40px))',
           '@smDown': {
             maxWidth: '80%',

packages/web/components/tokens/stitches.config.ts

@@ -102,7 +102,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
       borderStyles: {},
       shadows: {
         panelShadow: '0px 4px 18px rgba(120, 123, 134, 0.12)',
-        cardBoxShadow: '0px 0px 4px 0px rgb(255 255 255 / 10%)',
+        cardBoxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.1)',
       },
       zIndices: {},
       transitions: {},