Add anti-aliasing to Text and other components

.changeset/kind-avocados-poke.md

@@ -0,0 +1,9 @@
+---
+'@primer/react-brand': minor
+---
+
+Anti-aliasing is now applied automatically to all `Text` instances _except_ under these conditions:
+
+- When explicitly disabled via `antialiasing={false}`
+- When font weight is `light` or `extralight` AND size is `'100'` or `'200'`
+- When size is `100` (regardless of weight)

packages/react/src/Accordion/Accordion.module.css

@@ -144,6 +144,11 @@ details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summ
   line-height: var(--brand-text-lineHeight-200);
 }
 
+[data-color-mode='dark'] .Accordion__content {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: auto;
+}
+
 .Accordion__content p:not(:first-child) {
   margin-block-start: var(--base-size-16);
 }

packages/react/src/InlineLink/InlineLink.module.css

@@ -23,3 +23,8 @@
 .InlineLink:active > span {
   color: var(--brand-InlineLink-color-pressed);
 }
+
+[data-color-mode='dark'] .InlineLink {
+  -webkit-font-smoothing: subpixel-antialiased;
+  -moz-osx-font-smoothing: auto;
+}

packages/react/src/Label/Label.module.css

@@ -20,6 +20,11 @@
   text-align: center;
 }
 
+[data-color-mode='dark'] .Label {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: auto;
+}
+
 .Label::before {
   content: '';
   position: absolute;

packages/react/src/Prose/Prose.module.css

@@ -34,6 +34,8 @@
 /* ---------------------------------------------------------- */
 
 .Prose * + * {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: auto;
   margin-block-start: var(--spacing, 1em);
 }
 

packages/react/src/SubNav/SubNav.module.css

@@ -16,6 +16,11 @@
   z-index: 1;
 }
 
+[data-color-mode='dark'] .SubNav {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 .SubNav__heading {
   font-weight: var(--base-text-weight-semibold);
   color: var(--brand-color-text-default);

packages/react/src/Text/Text.module.css

@@ -2,6 +2,11 @@
   font-family: var(--brand-body-fontFamily);
 }
 
+[data-color-mode='dark'] .Text--antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: auto;
+}
+
 .Text--default {
   color: var(--brand-color-text-default);
 }

packages/react/src/Text/Text.module.css.d.ts

@@ -1,5 +1,6 @@
 declare const styles: {
   readonly "Text": string;
+  readonly "Text--antialiased": string;
   readonly "Text--default": string;
   readonly "Text--muted": string;
   readonly "Text-font--mona-sans": string;

packages/react/src/Text/Text.stories.tsx

@@ -1,7 +1,7 @@
 import {Meta, StoryFn} from '@storybook/react'
 import React from 'react'
 import {Text, TextFontVariants, TextSizes, TextWeights} from '.'
-import {Stack, Box, Grid} from '../'
+import {Stack, Box, Grid, ThemeProvider} from '../'
 
 import styles from './Text.stories.module.css'
 
@@ -43,6 +43,23 @@ Playground.args = {
   size: '200',
 }
 
+export const AntiAliasingOff = () => (
+  <ThemeProvider colorMode="dark">
+    <Box padding="spacious" backgroundColor="default">
+      <Text as="p" size="200" weight="light">
+        Anti aliasing is disabled for light text at 16px or smaller on a dark backgrounds.
+      </Text>
+      <Text as="p" size="200">
+        Anti aliasing is enabled for medium text at 16px or larger on a dark backgrounds.
+      </Text>
+    </Box>
+  </ThemeProvider>
+)
+AntiAliasingOff.args = {
+  size: '200',
+  weight: 'light',
+}
+
 export const Scale: StoryFn<typeof Text> = args => (
   <>
     {TextSizes.map(size => (

packages/react/src/Text/Text.test.tsx

@@ -160,4 +160,52 @@ describe('Text', () => {
       }
     }
   })
+  it('should not apply antialiasing when disabled', () => {
+    const mockId = 'mock-id'
+    const {getByText} = render(
+      <Text data-testid={mockId} weight="light" antialiasing={false}>
+        AA disabled
+      </Text>,
+    )
+    const el = getByText('AA disabled')
+    expect(el).not.toHaveClass('Text--antialiased')
+  })
+
+  it('should not apply antialiasing for light weight and small sizes', () => {
+    const {getByText} = render(
+      <>
+        <Text weight="light" size="100">
+          light 100
+        </Text>
+        <Text weight="light" size="200">
+          light 200
+        </Text>
+        <Text weight="extralight" size="100">
+          extralight 100
+        </Text>
+        <Text weight="extralight" size="200">
+          extralight 200
+        </Text>
+      </>,
+    )
+
+    expect(getByText('light 100')).not.toHaveClass('Text--antialiased')
+    expect(getByText('light 200')).not.toHaveClass('Text--antialiased')
+    expect(getByText('extralight 100')).not.toHaveClass('Text--antialiased')
+    expect(getByText('extralight 200')).not.toHaveClass('Text--antialiased')
+  })
+
+  it('should not apply antialiasing for size 100', () => {
+    const {getByText} = render(<Text size="100">size 100</Text>)
+    expect(getByText('size 100')).not.toHaveClass('Text--antialiased')
+  })
+
+  it('should apply antialiasing by default for other combinations', () => {
+    const {getByText} = render(
+      <Text size="300" weight="medium">
+        medium 300
+      </Text>,
+    )
+    expect(getByText('medium 300')).toHaveClass('Text--antialiased')
+  })
 })

packages/react/src/Text/Text.tsx

@@ -67,6 +67,10 @@ export type TextProps = {
    * Note: Only applies to block elements.
    */
   align?: 'start' | 'center' | 'end'
+  /**
+   * Toggle antialiasing on or off
+   */
+  antialiasing?: boolean
 } & TextTags
 
 export function Text({
@@ -80,6 +84,7 @@ export function Text({
   variant = defaultTextVariant,
   weight,
   style,
+  antialiasing = true,
   ...rest
 }: PropsWithChildren<TextProps>) {
   const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)
@@ -96,12 +101,22 @@ export function Text({
           .join(' ')
   }, [weight])
 
+  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 textClassName = clsx(
     animationClasses,
     styles.Text,
     styles[`Text-font--${font}`],
     styles[`Text--${variant}`],
     styles[`Text--${size}`],
+    !dontApplyAA && styles['Text--antialiased'],
     weight && weightClass,
     align && styles[`Text-align--${align}`],
     className,

packages/react/src/Text/Text.visual.spec.ts

@@ -21,6 +21,13 @@ test.describe('Visual Comparison: Text', () => {
     expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
   })
 
+  test('Text / Anti Aliasing Off', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-text--anti-aliasing-off&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
+  })
+
   test('Text / Scale', async ({page}) => {
     await page.goto('http://localhost:6006/iframe.html?args=&id=components-text--scale&viewMode=story')