Skip to content

Commit

Permalink
Components: Fixing Text Contrast for Dark Mode (#68349)
Browse files Browse the repository at this point in the history 
* fix: Fix darkmode label for text component

* fix: darkmode for heading component

* Fix snapshot tests

* Fix Text test

* CHANGELOG

---------

Co-authored-by: Marin Atanasov <[email protected]>
Co-authored-by: im3dabasia <[email protected]>
Co-authored-by: tyxla <[email protected]>
  • Loading branch information
@im3dabasia @tyxla
4 people authored Dec 30, 2024
1 parent a28455c commit 4b847f9
Show file tree
Hide file tree
Showing 8 changed files with 18 additions and 16 deletions.
2 changes: 2 additions & 0 deletions packages/components/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@

- `BoxControl`: Add presets support ([#67688](https://github.com/WordPress/gutenberg/pull/67688)).
- `Navigation`: Upsize back buttons ([#68157](https://github.com/WordPress/gutenberg/pull/68157)).
- `Heading`: Fix text contrast for dark mode ([#68349](https://github.com/WordPress/gutenberg/pull/68349)).
- `Text`: Fix text contrast for dark mode ([#68349](https://github.com/WordPress/gutenberg/pull/68349)).

### Deprecations

Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/dimension-control/test/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
}
.emotion-12 {
color: #1e1e1e;
color: var(--wp-components-color-foreground, #1e1e1e);
line-height: 1.4;
margin: 0;
text-wrap: balance;
Expand Down Expand Up @@ -345,7 +345,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
}
.emotion-12 {
color: #1e1e1e;
color: var(--wp-components-color-foreground, #1e1e1e);
line-height: 1.4;
margin: 0;
text-wrap: balance;
Expand Down Expand Up @@ -637,7 +637,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
}
.emotion-12 {
color: #1e1e1e;
color: var(--wp-components-color-foreground, #1e1e1e);
line-height: 1.4;
margin: 0;
text-wrap: balance;
Expand Down Expand Up @@ -941,7 +941,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
}
.emotion-12 {
color: #1e1e1e;
color: var(--wp-components-color-foreground, #1e1e1e);
line-height: 1.4;
margin: 0;
text-wrap: balance;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/heading/hook.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export function useHeading(
const {
as: asProp,
level = 2,
color = COLORS.gray[ 900 ],
color = COLORS.theme.foreground,
isBlock = true,
weight = CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ],
...otherProps
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/heading/test/__snapshots__/index.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@

exports[`props should render correctly 1`] = `
.emotion-0 {
color: #1e1e1e;
color: var(--wp-components-color-foreground, #1e1e1e);
line-height: 1.4;
margin: 0;
text-wrap: balance;
text-wrap: pretty;
color: #1e1e1e;
color: var(--wp-components-color-foreground, #1e1e1e);
font-size: calc(1.95 * 13px);
font-weight: 600;
display: block;
Expand All @@ -30,7 +30,7 @@ Snapshot Diff:
@@ -1,10 +1,10 @@
Array [
Object {
"color": "#1e1e1e",
"color": "var(--wp-components-color-foreground, #1e1e1e)",
"display": "block",
- "font-size": "calc(1.25 * 13px)",
+ "font-size": "calc(1.95 * 13px)",
Expand All @@ -49,7 +49,7 @@ Snapshot Diff:
@@ -1,10 +1,10 @@
Array [
Object {
"color": "#1e1e1e",
"color": "var(--wp-components-color-foreground, #1e1e1e)",
"display": "block",
- "font-size": "calc(1.25 * 13px)",
+ "font-size": "calc(1.95 * 13px)",
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/text/hook.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,8 +105,8 @@ export default function useText(
getOptimalTextShade( optimizeReadabilityFor ) === 'dark';

sx.optimalTextColor = isOptimalTextColorDark
? css( { color: COLORS.gray[ 900 ] } )
: css( { color: COLORS.white } );
? css( { color: COLORS.theme.foreground } )
: css( { color: COLORS.theme.foregroundInverted } );
}

return cx(
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/text/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { css } from '@emotion/react';
import { COLORS, CONFIG } from '../utils';

export const Text = css`
color: ${ COLORS.gray[ 900 ] };
color: ${ COLORS.theme.foreground };
line-height: ${ CONFIG.fontLineHeightBase };
margin: 0;
text-wrap: balance; /* Fallback for Safari. */
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/text/test/__snapshots__/index.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Snapshot Diff:
+ Base styles
@@ -3,8 +3,9 @@
"color": "#1e1e1e",
"color": "var(--wp-components-color-foreground, #1e1e1e)",
"font-size": "calc((13 / 13) * 13px)",
"font-weight": "normal",
"line-height": "1.4",
Expand All @@ -19,7 +19,7 @@ Snapshot Diff:

exports[`Text should render highlighted words with highlightCaseSensitive 1`] = `
.emotion-0 {
color: #1e1e1e;
color: var(--wp-components-color-foreground, #1e1e1e);
line-height: 1.4;
margin: 0;
text-wrap: balance;
Expand Down Expand Up @@ -52,7 +52,7 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] =

exports[`Text snapshot tests should render correctly 1`] = `
.emotion-0 {
color: #1e1e1e;
color: var(--wp-components-color-foreground, #1e1e1e);
line-height: 1.4;
margin: 0;
text-wrap: balance;
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/text/test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ describe( 'Text', () => {
</Text>
);
expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
color: COLORS.white,
color: 'rgb( 255, 255, 255 )',
} );
} );

Expand Down

1 comment on commit 4b847f9

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in 4b847f9.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12548043638
📝 Reported issues:

Please sign in to comment.