Skip to content

[table cell][theme] Apply alpha before color mixing to border bottom color when nativeColor + cssVariables is used#47762

Open
ZeeshanTamboli wants to merge 3 commits intomui:masterfrom
ZeeshanTamboli:issue-47749-TableCell-borderColor-theme-cssVariables-nativeColor
Open

[table cell][theme] Apply alpha before color mixing to border bottom color when nativeColor + cssVariables is used#47762
ZeeshanTamboli wants to merge 3 commits intomui:masterfrom
ZeeshanTamboli:issue-47749-TableCell-borderColor-theme-cssVariables-nativeColor

Conversation

@ZeeshanTamboli
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli commented Feb 13, 2026

Fixes #47749

Before: https://stackblitz.com/edit/vitejs-vite-ujmwmxmu?file=src%2FApp.tsx
After: https://stackblitz.com/edit/juadueom?file=src%2FApp.tsx

The colors are slightly different between the colors generated by color-mix() and the one without it which is expected (docs).

@ZeeshanTamboli ZeeshanTamboli added type: bug It doesn't behave as expected. scope: table Changes related to the table. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. labels Feb 13, 2026
@mui-bot
Copy link

mui-bot commented Feb 13, 2026

Netlify deploy preview

https://deploy-preview-47762--material-ui.netlify.app/

Bundle size report

Bundle Parsed size Gzip size
@mui/material ▼-4B(0.00%) 🔺+3B(0.00%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 8b7685d

@ZeeshanTamboli ZeeshanTamboli added customization: theme Higher level theming customizability. and removed type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. labels Feb 13, 2026
@ZeeshanTamboli ZeeshanTamboli changed the title [table cell] Apply alpha before color mixing to border bottom color when nativeColor + cssVariables is used [table cell][theme] Apply alpha before color mixing to border bottom color when nativeColor + cssVariables is used Feb 13, 2026
@ZeeshanTamboli ZeeshanTamboli marked this pull request as ready for review February 13, 2026 14:27
palette.TableCell,
'border',
colorMix(safeLighten, colorMix(safeAlpha, palette.divider, 1), 0.88),
colorMix(safeLighten, safeAlpha(palette.divider, 1), 0.88),
Copy link
Member

@siriwatknp siriwatknp Feb 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
colorMix(safeLighten, safeAlpha(palette.divider, 1), 0.88),
colorMix(safeLighten, nativeColor ? `oklch(from ${getCssVar('palette-divider')} l c h / 1)` : safeAlpha(palette.divider, 1), 0.88),

In this case, the closest fix I have is to use relative color to manipulate the alpha channel only.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It produced the same output from what I proposed. What's the difference?

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Feb 16, 2026
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Feb 16, 2026
@ZeeshanTamboli ZeeshanTamboli added v7.x needs cherry-pick The PR should be cherry-picked to master after merge. labels Feb 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

customization: theme Higher level theming customizability. needs cherry-pick The PR should be cherry-picked to master after merge. scope: table Changes related to the table. type: bug It doesn't behave as expected. v7.x

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[table cell][theme] cssVariables + nativeColor: TableCell border color from palette.divider is almost white (wrong rgba)

3 participants

Comments