@primer/react-brand@0.29.1

Patch Changes

• #493 ba6e320 Thanks @rezrah! - Fixed text alignment on centered EyebrowBanner.

  • Headings now always start aligned
  • Forces removal of text-decoration on hover state

@primer/brand-primitives@0.29.1

@primer/brand-primitives@0.29.1

@primer/react-brand@0.29.0

Minor Changes

• #442 d2408f2 Thanks @langermank! - - Change base color scales to hex instead of hsl

  • Adds new tokens for VideoPlayer

• #467 a7e471b Thanks @joseph-lozano! - breaking InlineLink components no longer take a size prop, but will now inherit their size in all cases.

  // Before
  <Text size="200">
    This is a link with the <InlineLink size="200">same</InlineLink> size
  </Text>

  // After
  <Text size="200">
    This is a link with the <InlineLink>same</InlineLink> size
  </Text>

  If you want the Inline Link to have a different size than its parent, wrap it in a new <Text> component.

  // Before
  <Text size="200">
    This is a link with a <InlineLink size="400">different</InlineLink>Size
  </Text>

  // After
  <Text size="200">
    This is a link with a{' '}
    <Text as="span" size="400">
      <InlineLink>different</InlineLink>
    </Text>
    Size
  </Text>

  InlineLinks now work inside of Header components.

  <Header size="3">
    This is a <InlineLink>Header</InlineLink> link!
  </Header>

• #489 be9a635 Thanks @rezrah! - Updated dependency for @primer/octicons-react to 19.8.0

  Octicons should now be passed as JSX instead of Objects.

  - icon={RocketIcon}
  + icon={<RocketIcon />}

• #487 6cdeba7 Thanks @rezrah! - New eyebrow banner component now generally available

  <EyebrowBanner href="http://githubuniverse.com">
    <EyebrowBanner.Heading>GitHub Universe: Dive in to AI, security, and DevEx</EyebrowBanner.Heading>
    <EyebrowBanner.SubHeading>Get your tickets now to join us on Nov. 8-9.</EyebrowBanner.SubHeading>
  </EyebrowBanner>

  🔗 Read the documentation for more examples

Patch Changes

• #490 b93531e Thanks @rezrah! - Type widening for FormControl children.

  FormControl now uses PropsWithChildren to include support for null and false values. This allows for more flexibility when using FormControl.* with conditional rendering.

  <FormControl>
    {/* `maybeValue can be truthy, but also null or false` */}
    {maybeValue && <FormControl.Validation>Message</FormControl.Validation>}
  </FormControl>

@primer/brand-primitives@0.29.0

Minor Changes

• #442 d2408f2 Thanks @langermank! - - Change base color scales to hex instead of hsl

  • Adds new tokens for VideoPlayer

• #487 6cdeba7 Thanks @rezrah! - New tokens available for the new eyebrow banner component:

  --brand-Eyebrowbanner-bgColor-rest
  --brand-Eyebrowbanner-borderColor-rest
  --brand-Eyebrowbanner-heading-fgColor
  --brand-Eyebrowbanner-subHeading-fgColor
  --brand-Eyebrowbanner-icon-background-default
  --brand-Eyebrowbanner-icon-background-blue
  --brand-Eyebrowbanner-icon-background-coral
  --brand-Eyebrowbanner-icon-background-green
  --brand-Eyebrowbanner-icon-background-gray
  --brand-Eyebrowbanner-icon-background-indigo
  --brand-Eyebrowbanner-icon-background-lemon
  --brand-Eyebrowbanner-icon-background-lime
  --brand-Eyebrowbanner-icon-background-orange
  --brand-Eyebrowbanner-icon-background-pink
  --brand-Eyebrowbanner-icon-background-purple
  --brand-Eyebrowbanner-icon-background-red
  --brand-Eyebrowbanner-icon-background-teal
  --brand-Eyebrowbanner-icon-background-yellow
  --brand-Eyebrowbanner-fgColor-default-start
  --brand-Eyebrowbanner-fgColor-default-middle
  --brand-Eyebrowbanner-fgColor-default-end
  --brand-Eyebrowbanner-fgColor-blue
  --brand-Eyebrowbanner-fgColor-blue-purple-start
  --brand-Eyebrowbanner-fgColor-blue-purple-end
  --brand-Eyebrowbanner-fgColor-coral
  --brand-Eyebrowbanner-fgColor-green
  --brand-Eyebrowbanner-fgColor-green-blue-start
  --brand-Eyebrowbanner-fgColor-green-blue-end
  --brand-Eyebrowbanner-fgColor-gray
  --brand-Eyebrowbanner-fgColor-indigo
  --brand-Eyebrowbanner-fgColor-lemon
  --brand-Eyebrowbanner-fgColor-lime
  --brand-Eyebrowbanner-fgColor-orange
  --brand-Eyebrowbanner-fgColor-pink
  --brand-Eyebrowbanner-fgColor-pink-blue-start
  --brand-Eyebrowbanner-fgColor-pink-blue-end
  --brand-Eyebrowbanner-fgColor-purple
  --brand-Eyebrowbanner-fgColor-purple-red-start
  --brand-Eyebrowbanner-fgColor-purple-red-end
  --brand-Eyebrowbanner-fgColor-red
  --brand-Eyebrowbanner-fgColor-red-orange-start
  --brand-Eyebrowbanner-fgColor-red-orange-end
  --brand-Eyebrowbanner-fgColor-teal
  --brand-Eyebrowbanner-fgColor-yellow

  🔗 Read the documentation for examples of this component

@primer/react-brand@0.28.1

Patch Changes

• #482 536adda Thanks @rezrah! - Replaced global font-smoothing options with more targetted, and locally scoped usage in dark mode Heading instances only.

@primer/brand-primitives@0.28.1

@primer/brand-primitives@0.28.1

@primer/react-brand@0.28.0

Minor Changes

• #453 5855526 Thanks @rezrah! - - New font prop added to Text and Heading components to alternate between mona-sans and hubot-sans variable fonts. mona-sans remains the default.
  • Uses latest v1.0.1 releases of (Hubot Sans)[https://github.com/github/hubot-sans/releases/tag/v1.0.1] and (Mona Sans)[https://github.com/github/mona-sans/releases/tag/v1.0.1] fonts.
  • Added extralight weight option

Patch Changes

• #468 a6251df Thanks @rezrah! - Force removal of link underlines in Card components, to prevent specificity issues with local stylesheet overrides.

• #451 b15ab24 Thanks @joseph-lozano! - Fixed menu item overflow issues on narrow viewports in SubdomainNavBar.

  In addition, the body element will now hide overflow content and prevent background scrolling when the menu is open.

• #480 0e1e3bb Thanks @joseph-lozano! - Improved keyboard navigation in the SubdomainNavBar mobile menu using focus trapping.

• #469 da4e989 Thanks @joseph-lozano! - Changed the aria-label for the GitHub link in the footer

• #457 9ea0803 Thanks @joseph-lozano! - Fixed issue with prose un-ordered lists in dark mode

• #479 1896326 Thanks @rezrah! - Increase tracking of 100 typographic position to improve readability

• #479 1896326 Thanks @rezrah! - Added export for CardSkewEffect component

• #468 a6251df Thanks @rezrah! - Added 'torchlight' hover effect to dark mode Card instances.

  See: https://primer.style/brand/components/Card/react#torchlight-effect

@primer/brand-primitives@0.28.0

Patch Changes

• #457 9ea0803 Thanks @joseph-lozano! - Fixed issue with prose un-ordered lists in dark mode

• #479 1896326 Thanks @rezrah! - Increase tracking of 100 typographic position to improve readability

@primer/react-brand@0.27.2

Patch Changes

• #459 0166b19 Thanks @rezrah! - Adds borderBlockStartWidth, borderBlockEndWidth, borderInlineStartWidth, and borderInlineEndWidth props to the Box component to support directional borders.

  <>
    <Box borderBlockStartWidth="thin" borderColor="default" borderStyle="solid" />
    <Box borderBlockEndWidth="thin" borderColor="default" borderStyle="solid" />
    <Box borderInlineStartWidth="thin" borderColor="default" borderStyle="solid" />
    <Box borderInlineEndWidth="thin" borderColor="default" borderStyle="solid" />
  </>

• #456 64318fd Thanks @rezrah! - Added hook for useWindowSize to the library exports.

  Usage example:

  import {useWindowSize} from '@primer/react-brand'

  function Component() {
    const {width, height, isXSmall, isSmall, isMedium, isLarge, isXLarge, isXXLarge, currentBreakpointSize} =
      useWindowSize()
  }

• #460 893df22 Thanks @rezrah! - Improvements to default styling in FAQ content.

• #456 64318fd Thanks @rezrah! - Enabled forwardRef on Hero.Description, Hero.Label and Hero.Image.

• #435 3227a7d Thanks @josepmartins! - Adds Blockquote, Code, Figure and Figcaption to the Prose component.

• #464 8e858cb Thanks @rezrah! - Replace usage of start with flex-start in Bento, Hero and FAQGroup components.

• #461 4ebe9a5 Thanks @rezrah! - Add font-smoothing to base stylesheet, for better font rendering on macOS.

@primer/brand-primitives@0.27.2

@primer/brand-primitives@0.27.2