@primer/[email protected]

Minor Changes

• #1192 065fe69 Thanks @rezrah! - Improved typographic defaults for all Text and Heading instances.

  [!WARNING]
  This release contains various breaking changes.
  Review these notes carefully and validate the updated typography in your project before upgrading.

  • Text and Heading components now apply a default font-weight range between 410 and 525. This leads to an overall lighter typographic style in practice.

  • All Heading sizes above 700 are now smaller on the widest viewports. E.g. display size is now 64px instead of 96px.

  • No sizes were removed in this update. weight prop will continue to allow overriding as before.

  • All Heading instances now use text-wrap: balance by default. This can be disabled using the new textWrap prop. E.g. textWrap="none"

  • Replaced monospace system font with our proprietary Mona Sans Mono typeface for a consistent fixed width character set across OS's

  • ⚠️ Mona Sans font file location has been updated. The typeface has also been updated to the latest pre-release version and includes a new opsz axes for built-in optically-sized glyphs.

    If you were previously importing the font file directly from the package, please note its new location:

    - @primer/react-brand/fonts/MonaSans.woff2
    + @primer/react-brand/fonts/MonaSansVF[wdth,wght,opsz].woff2

  • A stylesheet for typography design tokens has been removed from the package. A replacement stylesheet with responsive values is available as a replacement.

    - @primer/react-brand/lib/design-tokens/css/tokens/functional/typography/typography.css

    Prefer:

    + @primer/react-brand/lib/design-tokens/css/tokens/functional/typography/typography-responsive.css

  Additional components affected by changes to font weights:

  • Button
  • ComparisonTable
  • EyebrowBanner
  • FAQ
  • FormControl
  • IDE
  • Label
  • Link
  • SectionIntroStacked
  • SubNav
  • SubdomainNavBar
  • Tabs
  • Testimonial
  • River
  • RiverBreakout

@primer/[email protected]

Minor Changes

• #1192 065fe69 Thanks @rezrah! - > [!WARNING]

  This release contains various breaking changes.
  Review these notes carefully and validate the updated typography in your project before upgrading.

  Improved typographic defaults for all text design tokens:

  • Replaced heading weight values with explicit font axis values ranging between 410 to 550.

  • Backfilled --brand-text.subhead-* letter-spacing tokens and moved its weight settings to numeric axis values with breakpoint-specific adjustments.

  • Expanded the --brand-text-weight-* collection with named grades (extralight through heavy) mapped to Mona Sans numeric values while keeping the legacy numeric steps for compatibility.

  • Loosened text line-heights for body sizes (e.g 200) and added refined responsive values at 768px/1012px to improve readability across breakpoints.

  • Updated text letter-spacing so sizes 100–800 now default to neutral or slightly positive tracking, reserving negative spacing only for the largest size at the widest viewport.

  • A stylesheet for typography design tokens has been removed from the package. A replacement stylesheet with responsive values is available as a replacement.

    - @primer/brand-primitives/lib/design-tokens/css/tokens/functional/typography/typography.css

    Prefer:

    + @primer/brand-primitives/lib/design-tokens/css/tokens/functional/typography/typography-responsive.css

  Open to see all changes

  - --base-text-weight-normal: 450;
  + --base-text-weight-normal: 400;

  + --base-text-weight-regular: 400;

  - --brand-text-letterSpacing-1000: -0.03em;
  + --brand-text-letterSpacing-1000: 0;

  - --brand-text-letterSpacing-900: -0.02em;
  + --brand-text-letterSpacing-900: 0;

  - --brand-text-letterSpacing-800: -0.02em;
  + --brand-text-letterSpacing-800: 0;

  - --brand-text-letterSpacing-700: -0.02em;
  + --brand-text-letterSpacing-700: 0;

  - --brand-text-letterSpacing-600: -0.02em;
  + --brand-text-letterSpacing-600: 0;

  - --brand-text-letterSpacing-500: -0.01em;
  + --brand-text-letterSpacing-500: 0;

  - --brand-text-letterSpacing-400: 0em;
  + --brand-text-letterSpacing-400: 0;

  - --brand-text-letterSpacing-350: 0em;
  + --brand-text-letterSpacing-350: 0.18px;

  - --brand-text-letterSpacing-300: 0em;
  + --brand-text-letterSpacing-300: 0.18px;

  - --brand-text-letterSpacing-200: 0em;
  + --brand-text-letterSpacing-200: 0.24px;

  - --brand-text-letterSpacing-100: 0.02em;
  + --brand-text-letterSpacing-100: 0.21px;

  - --brand-text-lineHeight-1000: 1.1;
  + --brand-text-lineHeight-1000: 1.149;

  - --brand-text-lineHeight-900: 1.1;
  + --brand-text-lineHeight-900: 1.2;

  - --brand-text-lineHeight-600: 1.2;
  + --brand-text-lineHeight-600: 1.3;

  - --brand-text-lineHeight-400: 1.3;
  + --brand-text-lineHeight-400: 1.4;

  - --brand-text-lineHeight-350: 1.3;
  + --brand-text-lineHeight-350: 1.5;

  - --brand-text-weight-1000: var(--base-text-weight-bold);
  + --brand-text-weight-heavy: 550;

  - --brand-text-weight-900: var(--base-text-weight-semibold);
  + --brand-text-weight-extrabold: 543;

  - --brand-text-weight-800: var(--base-text-weight-semibold);
  + --brand-text-weight-bold: 537;

  - --brand-text-weight-700: var(--base-text-weight-semibold);
  + --brand-text-weight-semibold: 525;

  - --brand-text-weight-600: var(--base-text-weight-semibold);
  + --brand-text-weight-medium: 500;

  - --brand-text-weight-500: var(--base-text-weight-semibold);
  + --brand-text-weight-normal: 400;

  - --brand-text-weight-400: var(--base-text-weight-semibold);
  + --brand-text-weight-regular: 400;

  - --brand-text-weight-350: var(--base-text-weight-semibold);
  + --brand-text-weight-light: 400;

  + --brand-text-weight-extralight: 400;

  + --brand-text-weight-1000: var(--base-text-weight-normal);

  + --brand-text-weight-900: var(--base-text-weight-normal);

  + --brand-text-weight-800: var(--base-text-weight-normal);

  + --brand-text-weight-700: var(--base-text-weight-normal);

  + --brand-text-weight-600: var(--base-text-weight-normal);

  + --brand-text-weight-500: var(--base-text-weight-normal);

  + --brand-text-weight-400: var(--base-text-weight-normal);

  + --brand-text-weight-350: var(--base-text-weight-normal);

  - --brand-text-subhead-weight-large: var(--base-text-weight-semibold);
  + --brand-text-subhead-weight-large: 475;

  - --brand-text-subhead-weight-medium: var(--base-text-weight-semibold);
  + --brand-text-subhead-weight-medium: 550;

  + --brand-text-subhead-letterSpacing-large: 0.1px;

  + --brand-text-subhead-letterSpacing-medium: 0.24px;

  - --brand-heading-weight-1000: var(--base-text-weight-bold);
  + --brand-heading-weight-1000: 425;

  - --brand-heading-weight-900: var(--base-text-weight-semibold);
  + --brand-heading-weight-900: 425;

  - --brand-heading-weight-800: var(--base-text-weight-semibold);
  + --brand-heading-weight-800: 450;

  - --brand-heading-weight-700: var(--base-text-weight-semibold);
  + --brand-heading-weight-700: 460;

  - --brand-heading-weight-600: var(--base-text-weight-semibold);
  + --brand-heading-weight-600: 460;

  - --brand-heading-weight-500: var(--base-text-weight-semibold);
  + --brand-heading-weight-500: 480;

  - --brand-heading-weight-400: var(--base-text-weight-semibold);
  + --brand-heading-weight-400: 480;

  - --brand-fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  + --brand-fontStack-monospace: "Mona Sans Mono", monospace;

  - --brand-text-lineHeight-1000: 1.05;
  + --brand-text-lineHeight-1000: 1.08;

  - --brand-text-lineHeight-900: 1.05;
  + --brand-text-lineHeight-900: 1.2;

  + --brand-text-lineHeight-800: 1.2;

  - --brand-text-size-1000: 4rem;
  + --brand-text-size-1000: 3.5rem;

  - --brand-text-size-800: 2.25rem;
  + --brand-text-size-800: 2.5rem;

  - --brand-text-size-700: 2.25rem;
  + --brand-text-size-700: 2.125rem;

  - --brand-text-size-600: 2rem;
  + --brand-text-size-600: 1.75rem;

  + --brand-text-size-500: 1.5rem;

  + --brand-text-size-400: 1.25rem;

  + --brand-text-subhead-weight-large: 525;

  + --brand-text-letterSpacing-1000: -0.035em;

  - --brand-text-lineHeight-1000: 1;
  + --brand-text-lineHeight-1000: 1.08;

  - --brand-text-lineHeight-900: 1;
  + --brand-text-lineHeight-900: 1.1;

  + --brand-text-lineHeight-800: 1.18;

  - --brand-text-lineHeight-500: 1.2;
  + --brand-text-lineHeight-500: 1.35;

  - --brand-text-size-1000: 6rem;
  + --brand-text-size-1000: 4rem;

  - --brand-text-size-900: 4.5rem;
  + --brand-text-size-900: 3.5rem;

  - --brand-text-size-800: 4rem;
  + --brand-text-size-800: 3rem;

  - --brand-text-size-700: 3rem;
  + --brand-text-size-700: 2.5rem;

  - --brand-text-size-600: 2.5rem;
  + --brand-text-size-600: 2.125rem;

  - --brand-text-size-500: 2rem;
  + --brand-text-size-500: 1.75rem;

  - --brand-text-size-400: 1.5rem;
  + --brand-text-size-400: 1.375rem;

  + --brand-text-subhead-weight-large: 500;

  + --brand-text-subhead-size-large: 1.25rem;

  + --brand-text-codeInline-size: 0.9285em;

  + --brand-text-codeBlock-lineHeight: 1.5385;

  + --brand-text-codeBlock-size: 0.8125rem;

  + --brand-text-caption-lineHeight: 1.3333;

  + --brand-text-caption-size: 0.75rem;

  + --brand-text-body-lineHeight-small: 1.6666;

  + --brand-text-body-lineHeight-medium: 1.4285;

  + --brand-text-body-lineHeight-large: 1.5;

  + --brand-text-body-size-small: 0.75rem;

  + --brand-text-body-size-medium: 0.875rem;

  + --brand-text-body-size-large: 1rem;

  + --brand-text-subtitle-lineHeight: 1.6;

  + --brand-text-subtitle-size: 1.25rem;

  + --brand-text-title-lineHeight-small: 1.5;

  + --brand-text-title-lineHeight-medium: 1.6;

...

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Patch Changes

• #1204 2148797 Thanks @rezrah! - The inert attribute applied to unopened RiverAccordion items is now set through a runtime DOM manipulation. This helps to bypass type mismatches between React 18 and 19 but has no material impact to the accessibility or rendering of the final markup.

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

See documentation for this release

Minor Changes

• #1195 55474b4 Thanks @rezrah! - Improved support for React v19.

  All components now have improved support for React v19 type signatures, in addition to continued backwards compatibility with React v18.

  As part of this change, the following has changed:

  • Refs as props are now handled correctly in FAQGroup, ActionMenu, Bento, Button/ButtonGroup, and other compound components.
  • Removed internal type casting on various components. This ensures that props are inferred correctly using the new JSX runtime in React v19.
  • Removed internal dependency on react-is for Fragment detection

  No changes to component behavior or presentation is expected as part of this change.

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

See documentation for this release

Patch Changes

• #1187 168a187 Thanks @rezrah! - No-op upgrade to our internal linting toolchain (ESLint v9), which affects the source code organization of this package. No functional impact is expected.