Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs-infra] Add stray design adjustments #40623

Merged
merged 19 commits into from
Jan 22, 2024

Conversation

danilo-leal
Copy link
Contributor

@danilo-leal danilo-leal commented Jan 16, 2024

General run-through:

  • Fine-tune the branding theme's solid button styles, removing the gradient and using box shadows.
  • Polishing up the gradient Demo background, removing many fuzzy radial gradients. Ended up going for one-off colors as I wouldn't be able to pull off a smooth gradient with opacities from existing colors. It's not 100% ideal, but it seems worth it for this specific use case!
  • Refined the chips from the component link header, reducing the icon size a bit, as well as fine-tuning spacing.

Examples:

@danilo-leal danilo-leal added design This is about UI or UX design, please involve a designer scope: docs-infra Specific to the docs-infra product labels Jan 16, 2024
@danilo-leal danilo-leal requested a review from zanivan January 16, 2024 02:42
@danilo-leal danilo-leal self-assigned this Jan 16, 2024
@mui-bot
Copy link

mui-bot commented Jan 16, 2024

@zanivan

This comment was marked as resolved.

zanivan

This comment was marked as resolved.

@danilo-leal danilo-leal requested a review from zanivan January 17, 2024 18:48
zanivan

This comment was marked as resolved.

@danilo-leal danilo-leal requested a review from zanivan January 17, 2024 23:07
Copy link
Contributor

@zanivan zanivan left a comment

Choose a reason for hiding this comment

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

Left some comments, but those are ultimately a matter of opinion, so feel free to merge it when you think it's ready 🚀

docs/src/modules/brandingTheme.ts Outdated Show resolved Hide resolved
docs/src/modules/brandingTheme.ts Outdated Show resolved Hide resolved
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 20, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 22, 2024
@danilo-leal danilo-leal merged commit 4b735de into mui:master Jan 22, 2024
19 checks passed
@danilo-leal danilo-leal deleted the stray-design-adjustments branch January 22, 2024 11:57
Comment on lines +464 to +468
'&:active': { transform: 'scale(.98)' },
'&:focus-visible': {
outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
outlineOffset: '2px',
},
Copy link
Member

@oliviertassinari oliviertassinari Jan 23, 2024

Choose a reason for hiding this comment

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

Oh, on ButtonBase, this is ambitious. There will likely be a lot more reset needed, #40747 sounds like only the tip of the iceberg.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I've circled around both the marketing pages and the documentation, and aside from the instance in your PR, nothing crazy stood out. In any case, do let me know if you find any further regressions! 👍 Many buttons/links were missing proper focus state treatment prior to this.

Copy link
Member

@oliviertassinari oliviertassinari Jan 23, 2024

Choose a reason for hiding this comment

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

Many buttons/links were missing proper focus state treatment prior to this.

@danilo-leal True, this might make for the best tradeoff. We never thought about this use case for ButtonBase when introducing it, nice 😄.

find any further regressions

I mostly saw broken cases around tabs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design This is about UI or UX design, please involve a designer scope: docs-infra Specific to the docs-infra product
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

4 participants