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.

Sign up for GitHub

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

Jump to bottom

[CssBaseline] Add colors with better constrast to <a> #38135

Open
wants to merge 5 commits into
base: v5.x
Choose a base branch
from
Open

[CssBaseline] Add colors with better constrast to <a> #38135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e6253b0
[material] add colors with better constrast to <a>
brijeshb42 Jul 24, 2023
2f37366
copywriting tweaks
danilo-leal Nov 27, 2023
39d51d7
copy left-over from the previous commit
danilo-leal Nov 27, 2023
68277f2
creating the link color theme key
danilo-leal Nov 27, 2023
fa0a76a
Merge branch 'master' into pr/38135
danilo-leal Nov 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion docs/data/joy/components/css-baseline/css-baseline.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,10 +97,11 @@ The CSS [`color-scheme`](https://web.dev/articles/color-scheme) is applied by de
### Typography

- No base font-size is declared on the `<html>`, but 16px is assumed (the browser default).
You can learn more about the implications of changing the `<html>` default font size in [the theme documentation](/material-ui/customization/typography/#html-font-size) page.
Learn more about the implications of changing the `<html>` default font size in [the Material UI theme's typography documentation page](/material-ui/customization/typography/#html-font-size), which is also valid for Joy UI.
- Set the default `Typography`'s level (`body1`) style on the `<body>` element. The style comes from `theme.typography.{default typography level prop}`.
- Set the font-weight to `bold` for the `<b>` and `<strong>` elements.
- Custom font-smoothing is enabled for better display of the default font.
- Set the `<a>` elements color to contrast properly in light and dark modes.

## Customization

Expand Down
3 changes: 2 additions & 1 deletion docs/data/material/components/css-baseline/css-baseline.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,10 +111,11 @@ To enable it, you can set `enableColorScheme=true` as follows:
### Typography

- No base font-size is declared on the `<html>`, but 16px is assumed (the browser default).
You can learn more about the implications of changing the `<html>` default font size in [the theme documentation](/material-ui/customization/typography/#html-font-size) page.
Learn more about the implications of changing the `<html>` default font size in [the theme's typography documentation page](/material-ui/customization/typography/#html-font-size).
- Set the `theme.typography.body1` style on the `<body>` element.
- Set the font-weight to `theme.typography.fontWeightBold` for the `<b>` and `<strong>` elements.
- Custom font-smoothing is enabled for better display of the Roboto font.
- Set the `<a>` elements color to contrast properly in light and dark modes.

## Customization

Expand Down
6 changes: 6 additions & 0 deletions packages/mui-joy/src/CssBaseline/CssBaseline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,12 @@ function CssBaseline(props: CssBaselineProps) {
'strong, b': {
fontWeight: theme.vars.fontWeight.lg,
},
a: {
color:
theme.palette.mode === 'dark'
? theme.palette.primary[300]
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Suggested change
? theme.palette.primary[300]
? (theme.vars || theme).palette.primary[300]

Copy link
Contributor

Choose a reason for hiding this comment

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

@brijeshb42 would an approach similar to what I pushed for the Material version work? It's following Marija's guidance and it definitely looks cleaner not having to call the dark mode ternary here 😬

: theme.palette.primary[500],
},
danilo-leal marked this conversation as resolved.
Show resolved Hide resolved
body: {
margin: 0, // Remove the margin in all browsers.
color: theme.vars.palette.text.primary,
Expand Down
3 changes: 3 additions & 0 deletions packages/mui-material/src/CssBaseline/CssBaseline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ export const styles = (theme, enableColorScheme = false) => {
'strong, b': {
fontWeight: theme.typography.fontWeightBold,
},
a: {
color: (theme.vars || theme).palette.text.link,
},
body: {
margin: 0, // Remove the margin in all browsers.
...body(theme),
Expand Down
3 changes: 3 additions & 0 deletions packages/mui-material/src/styles/createPalette.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ export const light = {
secondary: 'rgba(0, 0, 0, 0.6)',
// Disabled text have even lower visual prominence.
disabled: 'rgba(0, 0, 0, 0.38)',
// Link (<a>) elements.
link: blue[700],
},
// The color used to divide different elements.
divider: 'rgba(0, 0, 0, 0.12)',
Expand Down Expand Up @@ -55,6 +57,7 @@ export const dark = {
secondary: 'rgba(255, 255, 255, 0.7)',
disabled: 'rgba(255, 255, 255, 0.5)',
icon: 'rgba(255, 255, 255, 0.5)',
link: blue[300],
},
divider: 'rgba(255, 255, 255, 0.12)',
background: {
Expand Down