@primer/[email protected]

Patch Changes

• #976 4cdb794 Thanks @danielguillan! - Added a new 350 step to the typographic scale.

  E.g.

  .Some-text {
    font-weight: var(--brand-text-weight-350);
    font-size: var(--brand-text-size-350);
    line-height: var(--brand-text-lineHeight-350);
    letter-spacing: var(--brand-text-letterSpacing-350);
  }

• #1002 84d8e52 Thanks @danielguillan! - - Updated styles and layout in PricingOptions for a more condensed design.

  • Added new variant options to support gradient styling in PricingOptions: default-gradient and cards-gradient.

  Usage example:

  <PricingOptions variant="default-gradient">{/*...*/}</PricingOptions>

• #1005 dcfdb2c Thanks @rezrah! - Updated dark mode color values for canvas.default and black.0

  - --base-color-scale-black-0: #0d1117
  + --base-color-scale-black-0: #000000

  - --brand-color-canvas-default: var(--base-color-scale-gray-9)
  + --brand-color-canvas-default: var(--base-color-scale-black-0)

@primer/[email protected]

Minor Changes

• #991 c083863 Thanks @rezrah! - Updated the underlying HTML elements in the Statistic component for improved accessibility. Now a paragraph by default, where it was previously a heading. It can optionally also be set as a <span> using the as prop.

  ⚠️ Breaking changes:

  • stretch prop in Statistic.Heading has been removed.
  • as prop now accepts p and span only
  • size prop now accepts 1000, 900, 800, 700, 600, 500, 400, 300, 200

• 05aee45 Thanks @rezrah! - The torchlight visual effect on dark mode Card components is now optional. The new default effect is now similar to its light mode counterpart.

  To re-enable the torchlight effect, use variant="torchlight". Note this effect continues to only work in dark color modes.

  <ThemeProvider colorMode="dark">
    <Card variant="torchlight" />
  </ThemeProvider>

Patch Changes

• #989 bb24a54 Thanks @joshfarrant! - Allow hovered SubNav.SubMenu menus to be closed using Escape key

• #986 c9f10ec Thanks @rezrah! - Visual updates to Button and ActionMenu components.

  • secondary button variants now feature lighter border colors.
  • subtle button variants now feature a semi-transparent background color in rest state.
  • accent button variants in dark mode now use a darker hue for parity with its GitHub product counterpart.

• #991 c083863 Thanks @rezrah! - Additional size options available in the Text component: 800, 900, 1000.

• #985 6364954 Thanks @joshfarrant! - The focus outline color of SubNav links is now set to var(--brand-color-focus);

• #961 b43d15d Thanks @danielguillan! - Noop update to smooth-scrolling behavior in main.css. Previous scroll-behavior: smooth; is still applied, but location in the compiled stylesheet has been updated.

• #961 b43d15d Thanks @danielguillan! - Patched a type mismatch between React 18.x and 19.x for inert prop in RiverAccordion component. Refer to the following source file for more details.

• #961 b43d15d Thanks @danielguillan! - Updated IDE to use the full container width.

@primer/[email protected]

Patch Changes

• #986 c9f10ec Thanks @rezrah! - Visual updates to Button and ActionMenu components.

  • secondary button variants now feature lighter border colors.
  • subtle button variants now feature a semi-transparent background color in rest state.
  • accent button variants in dark mode now use a darker hue for parity with its GitHub product counterpart.

@primer/[email protected]

Patch Changes

• #972 663a4c1 Thanks @rezrah! - Add mode="split-button" variant to ActionMenu component

• #972 663a4c1 Thanks @rezrah! - Removed default arrow visibility in the ButtonGroup and CTABanner components.

  Use hasArrow on individual Button elements to restore the previous arrow appearance.

• #972 663a4c1 Thanks @rezrah! - ActionMenu overlay alignment now defaults to end, where it was previously start. Use the menuAlignment prop in ActionMenu to restore previous behavior if required.

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Minor Changes

• #939 7f0a119 Thanks @joshfarrant! - - Added a new RiverAccordion component.

  Usage example:

  <RiverAccordion>
    <RiverAccordion.Item>
      <RiverAccordion.Heading>A Heading</RiverAccordion.Heading>
      <RiverAccordion.Content>Some content</RiverAccordion.Content>
      <RiverAccordion.Visual>
        <img src="placeholder.png" alt="placeholder" />
      </RiverAccordion.Visual>
    </RiverAccordion.Item>
  
    <RiverAccordion.Item>
      <RiverAccordion.Heading>Another Heading</RiverAccordion.Heading>
      <RiverAccordion.Content>Some content</RiverAccordion.Content>
      <RiverAccordion.Visual>
        <img src="placeholder.png" alt="placeholder" />
      </RiverAccordion.Visual>
    </RiverAccordion.Item>
  
    <RiverAccordion.Item>
      <RiverAccordion.Heading>One More Heading</RiverAccordion.Heading>
      <RiverAccordion.Content>Some content</RiverAccordion.Content>
      <RiverAccordion.Visual>
        <img src="placeholder.png" alt="placeholder" />
      </RiverAccordion.Visual>
    </RiverAccordion.Item>
  </RiverAccordion>

  🔗 See the documentation for more usage examples

  • Fixed a bug in the Heading component where the component would be re-mounted each render, causing it to lose focus when used inside a focusable element.

Patch Changes

• #974 aea5ea4 Thanks @rezrah! - Removed clsx as a library dependency. Now treated as devDependency.

• #966 25db725 Thanks @joshfarrant! - Fixed a bug with the SubNav component where the SubNav.Heading and the current SubNav.Link were vertically misaligned in Safari on mobile viewports.

• #971 9de3349 Thanks @rezrah! - Fixed border radius inconsistency in the River component where picture elements were only showing rounded corners at the top but not the bottom.

• #973 c2d5b34 Thanks @rezrah! - Fixed type definitions for PricingOptions.Label. Now inclusive of all props in Label.

• #967 b1ff17b Thanks @danielguillan! - Added spacing between the label and the arrow in the next and previous links in Pagination.

• #965 9fdf1bf Thanks @rezrah! - Added a hasBorder prop to Testimonial component. Use hasBorder={false} to remove the default border applied by certain variant options.

  <Testimonial variant="default" hasBorder={false} />

• #967 b1ff17b Thanks @danielguillan! - Added a new isExternal prop to Link to display an external link icon.

  E.g.,

  <Link href="https://github.com" isExternal>
    My external link
  </Link>

• #971 9de3349 Thanks @rezrah! - River headings and body text now have a maximum width of 400px on default 50:50 layouts.

• #971 9de3349 Thanks @rezrah! - Fixed border radius inconsistency in the Card component where picture elements were only showing rounded corners at the top but not the bottom.

• #960 1203906 Thanks @rezrah! - Updating various project dependencies.

  No planned changes to Primer Brand component APIs, although minor visual changes to certain icons could be visible due to an internal update of the Primer Octicons dependency.

@primer/[email protected]

@primer/[email protected]

@primer/[email protected]

Minor Changes

• #955 2daaff8 Thanks @rezrah! - Button arrows are now hidden by default for all variants except subtle as part of a Core Brand refresh.

  To optionally re-enable arrows, use the hasArrow prop.

  <Button variant="primary" hasArrow>
    Learn more
  </Button>

Patch Changes

• #958 3b391a5 Thanks @rezrah! - Updates to PricingOptions component:

  • New center-aligned layout available via align prop.
  • Added support for 4 pricing options. Previous maximum of 3.
  • Removed heading level constraint to as prop in PricingOptions.Heading. Now accepts all heading levels, while retaining the previous h3 default.
  • Added accordionAsprop to PricingOptions.FeatureList for granular control over heading size.
  • All pricing items under 1011px now have a max width and centered positioning
  • Fixed layout alignment bug when trailing text is not present under price.
  • Fixed layout bug when footnote contains an inline link.

• #955 2daaff8 Thanks @rezrah! - Visual update to subtle button variants. Borders on hover interactions have been replaced with a solid background color.

• #955 2daaff8 Thanks @rezrah! - Added new accent button variant.

  <Button variant="accent">Register now</Button>

  🔗 See documentation for design guidelines and usage examples

• #955 2daaff8 Thanks @rezrah! - Increased content spacing on wide breakpoints in CTABanner from 16px to 32px

• #957 fbe8f17 Thanks @rezrah! - Added an align prop to the Card component with start (default) or center alignment options. Refer to our documentation for examples on when the latter should be used.

  No breaking changes are introduced as part of this change

@primer/[email protected]

Patch Changes

• #958 3b391a5 Thanks @rezrah! - Added new design tokens for a fourth pricing option item

  --brand-PricingOptions-items4-container-padding-inline
  --brand-PricingOptions-items4-gap

• #955 2daaff8 Thanks @rezrah! - Added tokens for accent and subtle button variants.

    --brand-button-accent-bgColor-rest
    --brand-button-accent-bgColor-hover
    --brand-button-accent-bgColor-active
    --brand-button-accent-bgColor-disabled
    --brand-button-accent-fgColor-rest
    --brand-button-accent-fgColor-disabled
    --brand-button-subtle-bgColor-rest
    --brand-button-subtle-bgColor-hover
    --brand-button-subtle-bgColor-active

  Removed the following tokens for subtle variant as they are no longer needed:

  --brand-button-subtle-borderColor-rest
  --brand-button-subtle-borderColor-hover
  --brand-button-subtle-borderColor-active

@primer/[email protected]

See documentation for this release

Minor Changes

• #947 646cccf Thanks @joshfarrant! - - Improved VideoPlayer appearance on narrow viewports.
  • This necessitated the removal of the showControlsWhenPaused prop to prevent the height of the VideoPlayer from changing when the video is played/paused.