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

Add anti-aliasing to Text and other components #884

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

rezrah
Copy link
Collaborator

@rezrah rezrah commented Jan 9, 2025

Summary

Closes #871
Part of https://github.com/github/primer/issues/4601
Follow up to #482

Adds targeted font-smooth to Text and other components in dark mode.

Important

Applying blanket AA on websites using font-smooth is NOT recommended due to missing web standards

Screenshot 2025-01-09 at 13 48 45

It's also not recommended to use it anywhere except dark mode.

We will only apply AA when:

  • User agent is webkit or macos based
  • dark color mode is enabled
  • Fonts are not using light or extralight variants, due to poor legibility
  • Text size is above 16px

List of notable changes:

  • Enabled AA on Text component, which cascades to most components that use it internally
  • Manually added to components that don't use Text internally. E.g. Prose
  • Added guardrail conditions for when to apply it
    • Includes tests and a storybook story

What should reviewers focus on?

  • Use Chrome or Safari to view this page, or any story in dark color mode

Steps to test:

  1. Storybook

Contributor checklist:

  • All new and existing CI checks pass
  • Tests prove that the feature works and covers both happy and unhappy paths
  • Any drop in coverage, breaking changes or regressions have been documented above
  • UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
  • All developer debugging and non-functional logging has been removed
  • Related issues have been referenced in the PR description

Reviewer checklist:

  • Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
  • Check that tests prove the feature works and covers both happy and unhappy paths
  • Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Please try to provide before and after screenshots or videos

Before After

Screenshot 2025-01-09 at 13 56 08

Screenshot 2025-01-09 at 13 55 37

Copy link

changeset-bot bot commented Jan 9, 2025

🦋 Changeset detected

Latest commit: 0a59583

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages
Name Type
@primer/react-brand Minor
@primer/brand-primitives Minor
@primer/brand-e2e Minor
@primer/brand-fonts Minor
@primer/brand-config Minor
@primer/brand-storybook Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Contributor

github-actions bot commented Jan 9, 2025

🟢 No design token changes found

Copy link
Contributor

github-actions bot commented Jan 9, 2025

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

Copy link

@jesussandreas jesussandreas left a comment

Choose a reason for hiding this comment

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

Looks good to me, no concerns. Thank you for raising the accessibility concerns as well.

Copy link
Contributor

@joshfarrant joshfarrant left a comment

Choose a reason for hiding this comment

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

Looking good! Some small thoughts but nothing blocking

@@ -23,3 +23,8 @@
.InlineLink:active > span {
color: var(--brand-InlineLink-color-pressed);
}

[data-color-mode='dark'] .InlineLink {
-webkit-font-smoothing: subpixel-antialiased;
Copy link
Contributor

Choose a reason for hiding this comment

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

Is there a reason that this uses subpixel-antialiased where others just user antialiased?

Comment on lines +104 to +112
const dontApplyAA = Boolean(
// When explicitly disabled
!antialiasing ||
// When selected font weight is not suitable for anti-aliasing
(weight && ['light', 'extralight'].includes(weight as TextWeightVariants) && ['100', '200'].includes(size)) ||
// When size is too small
size === '100',
)

Copy link
Contributor

Choose a reason for hiding this comment

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

This logic could be simplified slightly by bringing the size === '100' check forward.

Just a matter of opinion, but also extracting the font-weight check into a variable could do away for the need for explicit comments too. Up to you though

Suggested change
const dontApplyAA = Boolean(
// When explicitly disabled
!antialiasing ||
// When selected font weight is not suitable for anti-aliasing
(weight && ['light', 'extralight'].includes(weight as TextWeightVariants) && ['100', '200'].includes(size)) ||
// When size is too small
size === '100',
)
const isLighterFontWeight = ['light', 'extralight'].includes(weight as TextWeightVariants)
const dontApplyAA = !antialiasing || size === '100' || (size === '200' && isLighterFontWeight)

@@ -80,6 +84,7 @@ export function Text({
variant = defaultTextVariant,
weight,
style,
antialiasing = true,
Copy link
Contributor

Choose a reason for hiding this comment

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

Minor thing, but I wonder if this would be clearer if it were named antialiasingEnabled or something similar to more clearly indicate that it's a boolean prop.

wdyt?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature request] Add antialiasing to relevant Primer Brand components
3 participants