[React-themes] - Shadow Style refinements

[manojleaton]

Fixes #BLUI-7278 .

Changes proposed in this Pull Request:

• Added custom shadows into the theme.
• Updated component's shadows from theme.

Screenshots / Screen Recording (if applicable)

To Test:

• Run showcase example app and check the shadows.

Any specific feedback you are looking for?

PR Readiness Checklist

Please confirm all items below have been addressed prior to requesting review:

• Code has been formatted with Prettier
• Code passes all linting checks
• All tests pass
• Code builds successfully
• Translations have been updated (if applicable)
• Documentation has been updated (if applicable)
• Changelog has been updated (if applicable)

[github-actions]

❌ Black Duck SCA — packages/component-library — FAILED

Severity	Components
🔴 Critical	1
🟠 High	10

Action required: resolve the High/Critical vulnerabilities above to pass this check.

[Copilot]

Pull request overview

This PR refines the React theme’s elevation styling by introducing a small set of semantic shadow tokens (level1–level3) and applying them across several MUI component style overrides for more consistent surfaces/elevation.

Changes:

• Add palette.shadows tokens (level1/level2/level3) to the theme for both light and dark color schemes.
• Apply the new shadow tokens to component overrides (e.g., AppBar, Tabs, Drawer, BottomNavigation, SnackbarContent, Buttons).
• Add Menu/Dialog paper border + updated shadow levels.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
packages/themes/src/componentStylesOverrides/MuiTabs.ts	Adds level2 surface shadow to Tabs root.
packages/themes/src/componentStylesOverrides/MuiSnackbarContent.ts	Adds level2 shadow to SnackbarContent root.
packages/themes/src/componentStylesOverrides/MuiMenu.ts	Adds level3 shadow and a paper border to Menu paper.
packages/themes/src/componentStylesOverrides/MuiDrawer.ts	Adds level2 shadow to Drawer paper variants.
packages/themes/src/componentStylesOverrides/MuiDialog.ts	Adds level3 shadow and a paper border to Dialog paper.
packages/themes/src/componentStylesOverrides/MuiButton.ts	Adds shadows for contained buttons (default/hover/active).
packages/themes/src/componentStylesOverrides/MuiBottomNavigation.ts	Adds level2 shadow to BottomNavigation root.
packages/themes/src/componentStylesOverrides/MuiAppBar.ts	Adds level2 shadow to AppBar root.
packages/themes/src/blueMergedTheme.ts	Introduces palette.shadows tokens and TypeScript palette augmentation.

Comments suppressed due to low confidence (5)

packages/themes/src/componentStylesOverrides/MuiDrawer.ts:16

• theme.vars.palette.shadows is assumed to exist. If these overrides are applied with a theme that doesn't include palette.shadows, accessing .level2 will throw at runtime. Add a fallback or ensure consumers always merge palette.shadows when using these overrides.

        paperAnchorBottom: ({ theme }) => ({
            boxShadow: theme.vars.palette.shadows.level2,
            ...theme.applyStyles('dark', {
                backgroundColor: BLUIColors.darkBlack[300],
            }),

packages/themes/src/componentStylesOverrides/MuiMenu.ts:9

• border is hard-coded to gray[900] w/ alpha and does not adapt for dark mode. Since the theme already defines palette.divider per color scheme, consider using theme.vars.palette.divider (and/or a dark override) so the border stays consistent/visible across modes.

            border: `1px solid ${Color(BLUIColors.gray[900]).alpha(0.12).string()}`,

packages/themes/src/componentStylesOverrides/MuiDialog.ts:9

• border is hard-coded to gray[900] w/ alpha and does not adapt for dark mode. Consider using theme.vars.palette.divider (and/or a dark override) so the border stays consistent/visible across modes.

            border: `1px solid ${Color(BLUIColors.gray[900]).alpha(0.12).string()}`,

packages/themes/src/componentStylesOverrides/MuiButton.ts:44

• theme.vars.palette.shadows is assumed to exist for the hover shadow. If these overrides are applied with a theme that doesn't include palette.shadows, accessing .level2 will throw at runtime. Add a fallback (optional chaining + default) or ensure palette.shadows is always merged in when these overrides are consumed.

            '&:hover': {
                backgroundColor: Color(BLUIColors.black[500]).alpha(0.05).string(),
                boxShadow: theme.vars.palette.shadows.level2,
            },

packages/themes/src/componentStylesOverrides/MuiButton.ts:51

• theme.vars.palette.shadows is assumed to exist for the active-state shadow. If these overrides are applied with a theme that doesn't include palette.shadows, accessing .level1 will throw at runtime. Add a fallback (optional chaining + default) or ensure palette.shadows is always merged in when these overrides are used.

            '&:active': {
                boxShadow: theme.vars.palette.shadows.level1,
            },

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[github-actions]

Visit the preview URL for this PR (updated for commit f8ac74b):

https://blui-react-showcase-4d420--pr246-feature-7278-shadow-k98onbvj.web.app

_{(expires Tue, 02 Jun 2026 04:41:51 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: d132952a0db7f9d1ddd922ccaa870a1c65546f9e}

[shubham-eaton]

@manojleaton please release alpha version also for dev testing.

[github-actions]

❌ Black Duck SCA — packages/themes — FAILED

Severity	Components
🔴 Critical	1
🟠 High	10

Action required: resolve the High/Critical vulnerabilities above to pass this check.

[shubham-eaton]

These border changes are as per figma?

[manojleaton]

Yes it is informed by Shawn that whenever we are applying level3 of shadow, need to add border as per figma.

[HarshalKapure]

@manojleaton This looks good to me but please check with designer to match design tokens.