Skip to content

CHANGELOG.md

Latest commit

 

History

History
1858 lines (1347 loc) · 65.3 KB

CHANGELOG.md

File metadata and controls

1858 lines (1347 loc) · 65.3 KB
Raw

@primer/brand-primitives

0.70.0

0.69.0

Patch Changes

  • #1363 f3a70ed Thanks @rezrah! - Added the --base-size-60 and --base-size-88 base size tokens.

    Also exposed 60 and 88 through React components that use the base size scale, such as Box and Stack.

    <Box padding={60} />
<Box padding={88} />
<Stack gap={60} />
<Stack gap={88} />

  • #1363 f3a70ed Thanks @rezrah! - Updated the LogoSuite control hover color in light mode from gray-2 to gray-1.

  • #1363 f3a70ed Thanks @rezrah! - Added TextCursorAnimation cursor color tokens. The light mode cursor color now uses --base-color-scale-green-6, while dark mode preserves the existing accent color.

0.68.0

Minor Changes

  • #1353 d82cfa3 Thanks @rezrah! - Removed Pagination-specific CSS variables from @primer/brand-* packages. Pagination now uses the shared Brand Button component styling, so the previous custom token variables are no longer emitted or required:

    - --brand-pagination-link-bgColor-rest
- --brand-pagination-link-bgColor-active
- --brand-pagination-borderColor-hover

  • #1340 670f3e6 Thanks @rezrah! - - Visual changes to the Pillar component.

    • Pillar.Icon now defaults to a fixed green color with corresponding filled background. It now uses the Icon component internally for size parity with Card.Icon.

    • ⚠️ Removed the Pillar.Icon color prop and PillarIconColors type export. Pillar icons using the shared background now always render green. Remove color from existing Pillar.Icon usage.

    • ⚠️ Removed the iconColor field from FlexTemplate pillar items because it forwarded to the removed Pillar.Icon color prop.

    • Native SVG icons fit the shared background by default, and hasBackground={false} renders custom artwork without the shared background treatment.

    • ⚠️ Narrowed the Pillar.Icon icon prop type. It previously accepted arbitrary ReactNode values such as string, number, and boolean, but those values didn't render a usable icon. It now only accepts a valid icon component or icon element.

    • Removed the Pillar-specific icon color tokens from the package output.

      - --brand-Pillar-icon-color-default
- --brand-Pillar-icon-color-{blue,coral,green,gray,indigo,lemon,lime,orange,pink,purple,red,teal,yellow}

    • Updated bordered Pillars to use a medium border radius.

    • Increased default size of Pillar.Heading from subhead-large to 6

    • Increased Pillar.Icon default size from 24px to 32px and added extra space between it and the subsequent heading.

  • #1344 e54a442 Thanks @rezrah! - Updated Button appearance and API ergonomics:

    • ⚠️ Breaking change: Removed the accent Button variant. Use primary instead, which now applies the previous accent appearance.
    • Updated secondary, and subtle variant colors and state styles.
    • Updated Button hover background colors to use transitionable color values and standardized hover transitions with a 0.2s background color transition. Previously, they would not animate at all.
    • Updated Button border radius, medium Button sizing, and medium ActionMenu item height to better match the new Figma treatment.
    • Updated the shared medium control size token from 48px to 43px, so medium Button, ActionMenu, TextInput, and Select controls stay aligned.
    • Updated medium Button label typography to better match the new Figma treatment.
    • Fixed vertical alignment issues in the Button component so labels are centered consistently in browsers like Firefox.
    • Deprecated the hasArrow prop and hid Button arrows by default.
      • Note: hasArrow will be removed entirely in a future release.

Patch Changes

  • #1353 d82cfa3 Thanks @rezrah! - Added new MediaPlaylist component, which can be used for presenting a list of YouTube videos.

    <MediaPlaylist>
  <MediaPlaylist.Heading>Latest videos</MediaPlaylist.Heading>
  <MediaPlaylist.Item thumbnail={<img src="thumbnail.jpg" alt="" />}>
    <MediaPlaylist.ItemHeading title="Getting More from Every Copilot Interaction" description="10:57" />
    <MediaPlaylist.ItemContent>
      <Text as="p" variant="muted">
        See workflows for scoping context, choosing the right mode, and getting more focused Copilot answers.
      </Text>
    </MediaPlaylist.ItemContent>
    <MediaPlaylist.ItemMedia>
      <iframe
        title="Getting More from Every Copilot Interaction"
        src="https://www.youtube-nocookie.com/embed/ITxzBiTBZW0"
      />
    </MediaPlaylist.ItemMedia>
  </MediaPlaylist.Item>
</MediaPlaylist>

    🔗 See MediaPlaylist documentation for more usage examples

  • #1359 9c900e9 Thanks @rezrah! - Added and updated form control color tokens for Checkbox, Radio, and shared focus states.

    New tokens are now available:

    + --brand-control-color-focus
+ --brand-control-checkbox-bg-hover
+ --brand-control-checkbox-bg-checked-hover
+ --brand-control-checkbox-bg-checked-disabled
+ --brand-control-checkbox-bg-indeterminate-hover
+ --brand-control-checkbox-fg-checked-disabled
+ --brand-control-checkbox-border-hover
+ --brand-control-checkbox-border-checked-hover
+ --brand-control-checkbox-border-checked-disabled
+ --brand-control-checkbox-border-indeterminate-hover
+ --brand-control-checkbox-border-unchecked-disabled
+ --brand-control-radio-bg-hover
+ --brand-control-radio-bg-checked-hover
+ --brand-control-radio-border-hover
+ --brand-control-radio-border-checked-hover
+ --brand-control-radio-border-disabled
+ --brand-control-radio-dot-checked
+ --brand-control-radio-dot-checked-hover

    Existing tokens were also updated:

    /* light */
- --brand-control-checkbox-bg-checked: var(--base-color-scale-black-0)
+ --brand-control-checkbox-bg-checked: var(--base-color-scale-green-6)
- --brand-control-checkbox-bg-indeterminate: var(--base-color-scale-black-0)
+ --brand-control-checkbox-bg-indeterminate: var(--base-color-scale-green-6)
- --brand-control-checkbox-bg-disabled: var(--base-color-scale-gray-1)
+ --brand-control-checkbox-bg-disabled: var(--brand-color-canvas-default)
- --brand-control-checkbox-border-checked: var(--base-color-scale-black-0)
+ --brand-control-checkbox-border-checked: var(--base-color-scale-green-6)
- --brand-control-checkbox-border-indeterminate: var(--base-color-scale-black-0)
+ --brand-control-checkbox-border-indeterminate: var(--base-color-scale-green-6)
- --brand-control-checkbox-border-disabled: var(--base-color-scale-gray-2)
+ --brand-control-checkbox-border-disabled: var(--base-color-scale-gray-4)
- --brand-control-radio-bg-disabled: var(--base-color-scale-gray-1)
+ --brand-control-radio-bg-disabled: var(--brand-color-canvas-default)
- --brand-control-radio-border-checked: var(--base-color-scale-black-0)
+ --brand-control-radio-border-checked: var(--base-color-scale-green-6)

/* dark */
- --brand-control-checkbox-bg-checked: var(--base-color-scale-white-0)
+ --brand-control-checkbox-bg-checked: var(--base-color-scale-green-5)
- --brand-control-checkbox-bg-indeterminate: var(--base-color-scale-white-0)
+ --brand-control-checkbox-bg-indeterminate: var(--base-color-scale-green-5)
- --brand-control-checkbox-bg-disabled: var(--base-color-scale-gray-4)
+ --brand-control-checkbox-bg-disabled: var(--brand-color-canvas-default)
- --brand-control-checkbox-fg-checked: var(--base-color-scale-black-0)
+ --brand-control-checkbox-fg-checked: var(--base-color-scale-white-0)
- --brand-control-checkbox-border-checked: var(--base-color-scale-white-0)
+ --brand-control-checkbox-border-checked: #077726
- --brand-control-checkbox-border-indeterminate: var(--base-color-scale-white-0)
+ --brand-control-checkbox-border-indeterminate: #077726
- --brand-control-checkbox-border-disabled: var(--base-color-scale-gray-4)
+ --brand-control-checkbox-border-disabled: var(--base-color-scale-gray-5)
- --brand-control-radio-bg-disabled: var(--base-color-scale-gray-4)
+ --brand-control-radio-bg-disabled: var(--brand-color-canvas-default)
- --brand-control-radio-border-default: var(--base-color-scale-white-0)
+ --brand-control-radio-border-default: var(--base-color-scale-gray-4)
- --brand-control-radio-border-checked: var(--base-color-scale-white-0)
+ --brand-control-radio-border-checked: #077726

0.67.0

Patch Changes

  • #1314 9783702 Thanks @rezrah! - Added --brand-color-canvas-invert design token, which is the inverse of --brand-color-canvas-default. Resolves to black in light mode and white in dark mode.

0.66.0

Minor Changes

  • #1286 d948c46 Thanks @danielguillan! - Updates to RiverAccordion component

    New Features

    • New RiverAccordion prop: variant. This prop controls the layout and appearance of the RiverAccordion component. Two variants are available: default and gridline.

      The default variant is the pre-existing RiverAccordion configuration and remains the default value.

      The gridline variant adds lateral padding and borders for use within bordered grid layouts, using a 50/50 column split.

      <RiverAccordion variant="gridline" />

    Changes

    • Updated accordion icons: Replaced PlusIcon with ChevronDownIcon/ChevronUpIcon for better visual clarity of expand/collapse state.
    • Updated default text size: Text size in RiverAccordion.Content now defaults to 300 (previously 200) for improved readability.

  • #1272 a386ed4 Thanks @danielguillan! - Updated all base color scales and functional tokens.

    Design token updates

    • Updated all 13 base color scale palettes (gray, blue, green, yellow, orange, red, purple, pink, coral, lemon, lime, teal, indigo) in both light and dark modes
    • Updated black-0 from #1f2328 to #000000 in both light and dark modes
    • Updated functional design tokens: --brand-color-text-default, --brand-color-text-muted, --brand-color-border-default, --brand-color-border-subtle, --brand-color-border-muted, --brand-color-success-fg, --brand-color-success-emphasis, --brand-color-accent-primary, and all hardcoded alpha tokens (--brand-color-success-muted, --brand-color-error-muted, --brand-color-neutral-muted, --brand-color-neutral-subtle)
    • Added new functional design tokens: --brand-color-text-emphasized, --brand-color-text-link-rest, --brand-color-text-link-pressed, --brand-color-text-danger, --brand-color-danger-fg, --brand-color-danger-emphasis, --brand-color-danger-muted, --brand-color-danger-subtle, --brand-color-canvas-muted
    • ⚠️ Deprecated --brand-color-error-* and --brand-color-text-error tokens, which are now aliased to the new --brand-color-danger-* and --brand-color-text-danger equivalents and will be removed in the future
    • ⚠️ Deprecated --brand-color-text-subtle, which is now remapped to the same value as --brand-color-text-muted and will be removed in the future
    • Updated --brand-InlineLink-color-rest and --brand-InlineLink-color-pressed to reference the new --brand-color-text-link-rest and --brand-color-text-link-pressed functional tokens
    • Updated --brand-Link-color-accent to reference the new --brand-color-text-link-rest functional token

Patch Changes

  • #1299 ea8a60f Thanks @rezrah! - Upgraded dependencies to latest minor, patch, and select major versions.

    @primer/react-brand:

    • autoprefixer: 10.4.20 → 10.4.27
    • css-loader: 7.1.2 → 7.1.4
    • mini-css-extract-plugin: 2.9.2 → 2.10.2
    • postcss: 8.5.1 → 8.5.8
    • postcss-loader: 8.1.1 → 8.2.1
    • postcss-preset-env: 10.1.3 → 11.2.0
    • webpack: 5.101.3 → 5.105.4
    • webpack-cli: 6.0.1 → 7.0.2

    @primer/brand-primitives:

    • @primer/primitives: 9.1.1 → 9.1.2

    @primer/brand-css:

    • autoprefixer: 10.4.20 → 10.4.27
    • postcss: 8.5.1 → 8.5.8

0.65.1

0.65.0

Minor Changes

  • #1257 f881785 Thanks @rezrah! - Updates to design tokens for FAQ, FAQGroup, and Accordion components.

    • Removed --brand-Accordion-border-color-emphasis token
    • Removed --brand-Accordion-toggle-color-end
    • Removed --brand-FAQ-color-tabBg-selected token
    • Added --brand-FAQGroup-buttonIndicator-idle, --brand-FAQGroup-buttonIndicator-hover, --brand-FAQGroup-buttonIndicator-active tokens

  • #1231 d8b4d5e Thanks @danielguillan! - Updates to River component

    New Features

    • New River prop: variant. This prop controls the layout and appearance of the River component. Two variants are available: default and gridline.

      The default variant is the pre-existing River configuration and remains the default value.

      The gridline variant adds lateral padding and borders for use within bordered grid layouts.

      <River variant="gridline" />

    • New River.Visual prop: imageBackgroundColor. Set to 'subtle' to create a full-bleed container with a background color and the image/video centered inside with padding.

      <River variant="gridline">
  <River.Visual imageBackgroundColor="subtle">
    <img src="..." alt="..." />
  </River.Visual>
  <River.Content>...</River.Content>
</River>

    • New River.Content prop: align. Controls vertical alignment of content within its container. Values: 'center' (default), 'block-end'.

    • EyebrowText support: River.Content now accepts EyebrowText as a child for adding small, uppercase labels above the heading.

      <River.Content>
  <EyebrowText>Feature</EyebrowText>
  <Heading>Title</Heading>
  <Text>Description</Text>
</River.Content>

    • New RiverBreakout prop: variant. This prop controls the layout and appearance of the RiverBreakout component. Two variants are available: default and gridline.

      The gridline variant adds horizontal border lines, lateral spacing, and supports vertical dividers for the trailing component on tablet+ viewports.

      <RiverBreakout variant="gridline">
  <RiverBreakout.A11yHeading>Title</RiverBreakout.A11yHeading>
  <RiverBreakout.Visual>
    <img src="..." alt="..." />
  </RiverBreakout.Visual>
  <RiverBreakout.Content trailingComponent={Timeline} trailingComponentDivider>
    <Text>Description</Text>
  </RiverBreakout.Content>
</RiverBreakout>

    • RiverBreakout padded background support: RiverBreakout.Visual now supports imageBackgroundColor="subtle" to display the visual with a padded background container that bleeds to the gridline borders.

Patch Changes

0.64.0

0.63.0

0.62.0

Minor Changes

  • #1225 a1caad6 Thanks @rezrah! - Breaking change: Minimum Node.js version is now v24 (LTS)

    If you're using an older version, please upgrade to Node.js 24 LTS before updating to this release.

0.61.1

0.61.0

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;
    + --brand-text-title-lineHeight-large: 1.5;
    + --brand-text-title-size-small: 1rem;
    + --brand-text-title-size-medium: 1.25rem;
    + --brand-text-title-size-large: 2rem;
    + --brand-text-display-lineHeight: 1.4;
    + --brand-text-display-size: 2.5rem;
    + --brand-text-display-lineBoxHeight: 1.4;
    + --brand-fontStack-sansSerifDisplay: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    - --brand-fontStack-sansSerif: 'Mona Sans', 'MonaSansFallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+ --brand-fontStack-sansSerif: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    - --brand-fontStack-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+ --brand-fontStack-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    + --brand-text-codeInline-weight: var(--base-text-weight-normal);
    + --brand-text-codeBlock-weight: var(--base-text-weight-normal);
    + --brand-text-caption-weight: var(--base-text-weight-normal);
    + --brand-text-body-weight: var(--base-text-weight-normal);
    + --brand-text-subtitle-weight: var(--base-text-weight-normal);
    + --brand-text-title-weight-small: var(--base-text-weight-semibold);
    + --brand-text-title-weight-medium: var(--base-text-weight-semibold);
    + --brand-text-title-weight-large: var(--base-text-weight-semibold);
    + --brand-text-display-weight: var(--base-text-weight-medium);
    + --brand-text-codeInline-shorthand: var(--brand-text-codeInline-weight) var(--brand-text-codeInline-size) var(--brand-fontStack-monospace);
    + --brand-text-codeBlock-shorthand: var(--brand-text-codeBlock-weight) var(--brand-text-codeBlock-size)/var(--brand-text-codeBlock-lineHeight) var(--brand-fontStack-monospace);
    + --brand-text-caption-shorthand: var(--brand-text-caption-weight) var(--brand-text-caption-size)/var(--brand-text-caption-lineHeight) var(--brand-fontStack-sansSerif);
    + --brand-text-body-shorthand-small: var(--brand-text-body-weight) var(--brand-text-body-size-small)/var(--brand-text-body-lineHeight-small) var(--brand-fontStack-sansSerif);
    + --brand-text-body-shorthand-medium: var(--brand-text-body-weight) var(--brand-text-body-size-medium)/var(--brand-text-body-lineHeight-medium) var(--brand-fontStack-sansSerif);
    + --brand-text-body-shorthand-large: var(--brand-text-body-weight) var(--brand-text-body-size-large)/var(--brand-text-body-lineHeight-large) var(--brand-fontStack-sansSerif);
    + --brand-text-subtitle-shorthand: var(--brand-text-subtitle-weight) var(--brand-text-subtitle-size)/var(--brand-text-subtitle-lineHeight) var(--brand-fontStack-sansSerifDisplay);
    + --brand-text-title-shorthand-small: var(--brand-text-title-weight-small) var(--brand-text-title-size-small)/var(--brand-text-title-lineHeight-small) var(--brand-fontStack-sansSerif);
    + --brand-text-title-shorthand-medium: var(--brand-text-title-weight-medium) var(--brand-text-title-size-medium)/var(--brand-text-title-lineHeight-medium) var(--brand-fontStack-sansSerifDisplay);
    + --brand-text-title-shorthand-large: var(--brand-text-title-weight-large) var(--brand-text-title-size-large)/var(--brand-text-title-lineHeight-large) var(--brand-fontStack-sansSerifDisplay);
    + --brand-text-display-shorthand: var(--brand-text-display-weight) var(--brand-text-display-size)/var(--brand-text-display-lineHeight) var(--brand-fontStack-sansSerifDisplay);

0.60.1

0.60.0

0.59.2

0.59.1

0.59.0

0.58.2

0.58.1

0.58.0

0.57.2

0.57.1

0.57.0

Patch Changes

0.56.3

0.56.2

0.56.1

0.56.0

0.55.0

Minor Changes

  • #1035 4b854e6 Thanks @danielguillan! - ⚠️ Breaking changes to the following design tokens:

    - --brand-LogoSuite-logobar-columnGap
+ --brand-LogoSuite-logobar-columnGap-default
+ --brand-LogoSuite-logobar-columnGap-condensed

- --brand-LogoSuite-logobar-marquee-gap
+ --brand-LogoSuite-logobar-marquee-gap-default
+ --brand-LogoSuite-logobar-marquee-gap-condensed

0.54.2

Patch Changes

  • #1034 0d3a198 Thanks @rezrah! - Added new tokens for LogoSuite play/pause controls for improved visual contrast and granular customization

    + --brand-LogoSuite-color-control-rest
+ --brand-LogoSuite-color-control-hover

0.54.1

0.54.0

0.53.0

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)

0.52.0

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.

0.51.1

0.51.0

0.50.0

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

0.49.0

0.48.0

Patch Changes

  • #942 5f31936 Thanks @danielguillan! - Update the default primary and secondary accent color tokens from pink and purple to green and yellow, respectively.

0.47.2

0.47.1

0.47.0

0.46.0

Minor Changes

  • #893 d3c1ee2a Thanks @rezrah! - Updated secondary Button variant borders from subtle to default color for improved contrast.

Patch Changes

  • #883 965a7865 Thanks @rezrah! - Added new token for river breakout vertical spacing:

    --brand-River-spacing-innerY

  • #879 4f92311f Thanks @rezrah! - Added new accordion toggle color variables

    --brand-Accordion-toggle-color-default;
--brand-Accordion-toggle-color-blue;
--brand-Accordion-toggle-color-blue-purple-start;
--brand-Accordion-toggle-color-blue-purple-end;
--brand-Accordion-toggle-color-coral;
--brand-Accordion-toggle-color-green;
--brand-Accordion-toggle-color-green-blue-start;
--brand-Accordion-toggle-color-green-blue-end;
--brand-Accordion-toggle-color-gray;
--brand-Accordion-toggle-color-indigo;
--brand-Accordion-toggle-color-lemon;
--brand-Accordion-toggle-color-lime;
--brand-Accordion-toggle-color-orange;
--brand-Accordion-toggle-color-pink;
--brand-Accordion-toggle-color-pink-blue-start;
--brand-Accordion-toggle-color-pink-blue-end;
--brand-Accordion-toggle-color-purple;
--brand-Accordion-toggle-color-purple-red-start;
--brand-Accordion-toggle-color-purple-red-end;
--brand-Accordion-toggle-color-red;
--brand-Accordion-toggle-color-red-orange-start;
--brand-Accordion-toggle-color-red-orange-end;
--brand-Accordion-toggle-color-teal;
--brand-Accordion-toggle-color-yellow;

0.45.1

0.45.0

Patch Changes

  • #863 00ef0694 Thanks @rezrah! - Added new design tokens for Testimonial and FrostedGlassVFX components

    :root {
  --brand-Testimonial-borderMask-default
  --brand-Testimonial-borderMask-subtle
  --brand-FrostedGlassVFX-bgColor
  --brand-FrostedGlassVFX-boxShadow
  --brand-FrostedGlassVFX-borderMask
  --brand-FrostedGlassVFX-blurIntensity-high
  --brand-FrostedGlassVFX-blurIntensity-medium
  --brand-FrostedGlassVFX-blurIntensity-low
}

0.44.1

0.44.0

0.43.0

0.42.1

0.42.0

Minor Changes

  • #798 af335d37 Thanks @joshfarrant! - ⚠️ Breaking change: Removed all Card-icon-background/color tokens (eg --brand-Card-icon-background-blue, --brand-Card-icon-color-orange)

0.41.0

Minor Changes

  • #774 a6baf41d Thanks @joshfarrant! - Fixed issue where Button component would reflow and break over multiple lines when its text content exceeded the viewport width.

    ⚠️ Breaking changes to the following design tokens:

    - --brand-control-medium-paddingBlock
+ --brand-control-medium-paddingBlock-normal
    - --brand-control-large-paddingBlock
+ --brand-control-large-paddingBlock-normal

    Additional tokens added:

    + --brand-control-medium-paddingBlock-condensed
+ --brand-control-large-paddingBlock-condensed

Patch Changes

0.40.1

Patch Changes

  • #736 73cf706e Thanks @lukasoppermann! - Replaced the --brand-VideoPlayer-tooltip-padding design token in the VideoPlayer component with two new tokens that separately account for padding along each axis: --brand-VideoPlayer-tooltip-padding-inline and --brand-VideoPlayer-tooltip-padding-block.

    Note: This update does not introduce any visual changes. Please update any manual references to --brand-VideoPlayer-tooltip-padding to use the new tokens.

    - --brand-VideoPlayer-tooltip-padding
+ --brand-VideoPlayer-tooltip-padding-inline
+ --brand-VideoPlayer-tooltip-padding-block

  • #738 f6bab573 Thanks @lukasoppermann! - Fixed line formatting in functional/size/size-coarse.css and functional/size/size-fine.css

    E.g.

    -    @media (pointer: coarse) { :root {
-  --brand-controlStack-medium-gap-auto: var(--base-size-12);
-  --brand-controlStack-small-gap-auto: var(--base-size-16);
-  --brand-control-minTarget-auto: var(--base-size-44);
-}}
+@media (pointer: coarse) {
+  :root {
+    --brand-controlStack-medium-gap-auto: var(--base-size-12);
+    --brand-controlStack-small-gap-auto: var(--base-size-16);
+    --brand-control-minTarget-auto: var(--base-size-44);
+  }
+}

0.40.0

0.39.0

Minor Changes

  • #717 24fc6d02 Thanks @rezrah! - Change to xxlarge breakpoint and the addition of two new base scale size tokens.

    Outcome of an upgrade to Primer Primitives v9 release.

    + --base-size-2: 0.125rem;
    + --base-size-6: 0.375rem;
    - --brand-breakpoint-xxlarge: 90rem;
+ --brand-breakpoint-xxlarge: 87.5rem;
    - @custom-media --brand-viewportRange-wide-viewport (min-width: 90rem);
+ @custom-media --brand-viewportRange-wide-viewport (min-width: 87.5rem);

0.38.0

Minor Changes

  • #691 34e7aa8b Thanks @joshfarrant! - > Warning

    This update contains a breaking visual change to the LogoSuite component. LogoSuite components without a specified variant prop will now automatically apply either emphasis or muted styles depending on the number of logos in the LogoBar.

    • Added new default behaviour to the variant prop of the LogoSuite component. If variant is undefined then either emphasis or muted styles are automatically applied depending on the number of logos in the LogoBar. Five or fewer logos apply the emphasis style, while six or more use the muted style.
    • Reduced LogoSuite size on mobile viewports.

0.37.0

0.36.0

0.35.0

Patch Changes

  • #623 8727997c Thanks @rezrah! - Added --brand-CTABanner-bgColor token to CTABanner for easier customisation of the banners background color, when enabled.

0.34.3

Patch Changes

  • #632 77b98a4c Thanks @joshfarrant! - Partial revert of changes to the LogoSuite logobar elements.

    To allow optimal treatment of logos based on their respective file formats, <img> tag will continue be styled with a CSS filter, whereas inline <svg> elements will be styled with CSS fill.

0.34.2

0.34.1

0.34.0

Minor Changes

  • #547 9cef031 Thanks @mperrotti! - Adds a Tooltip component.

    Example:

    <Tooltip text="Hello, Tooltip!">
  <Button>Hover me</Button>
</Tooltip>

0.33.0

Patch Changes

  • #566 eaeb50e Thanks @joshfarrant! - Adjusted block padding of small button controls from 12px to 8px.

    This change affects all small size Button and ActionMenu instances.

0.32.0

0.31.0

0.30.3

0.30.2

0.30.1

0.30.0

Minor Changes

Patch Changes

  • #506 3b6eb7b Thanks @langermank! - Remove unused ActionMenu color tokens

    Tokens removed: --brand-ActionMenu-color-border-rest --brand-ActionMenu-color-border-hover --brand-ActionMenu-color-border-active

0.29.1

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

0.28.1

0.28.0

Patch Changes

0.27.2

0.27.1

0.27.0

Minor Changes

  • #428 6141bff Thanks @josepmartins! - Removes old control border radius tokens

    -  --brand-control-border-radius
-  --brand-control-large-borderRadius
-  --brand-control-medium-borderRadius

    Modifies border radius scale values and adds new xlarge border radius option to the scale

    + --brand-borderRadius-small: 4px
+ --brand-borderRadius-medium: 8px
+ --brand-borderRadius-large: 16px
+ --brand-borderRadius-xlarge: 24px

  • #431 2243ae4 Thanks @rezrah! - Fix erroneous InlineLink appearance on multiline.

    Removed the following design tokens:

    - --brand-InlineLink-transition-scale-start
- --brand-InlineLink-transition-scale-end

0.26.0

Patch Changes

  • #423 9299f25 Thanks @josepmartins! - Add inner spacing values for RiverBreakout. Uses 64px in desktop, 48px in tablet and 40px in mobile.

    --brand-RiverBreakout-spacing-inner

0.25.0

Minor Changes

  • #392 6003ba5 Thanks @langermank! - - Update Button, TextInput, and Select size options

    • Update Button color variant designs for site refactor
    • Update control token sizing
    • Remove Button design tokens and replace with new options

    Tokens removed:

    • --brand-Button-background-base
    • --brand-Button-background-overlay
    • --brand-Button-background-disabled
    • --brand-Button-fg-primary-disabled
    • --brand-Button-fg-secondary-disabled
    • --brand-Button-shadow-primary-default
    • --brand-Button-shadow-primary-hover
    • --brand-Button-shadow-secondary-default
    • --brand-Button-shadow-secondary-hover
    • --brand-Button-shadow-subtle-hover
    • --brand-Button-shadow-focus
    • --brand-Button-background-base
    • --brand-Button-background-overlay
    • --brand-Button-background-disabled
    • --brand-Button-fg-primary-disabled
    • --brand-Button-fg-secondary-disabled
    • --brand-Button-shadow-primary-default
    • --brand-Button-shadow-primary-hover
    • --brand-Button-shadow-secondary-default
    • --brand-Button-shadow-secondary-hover
    • --brand-Button-shadow-subtle-hover
    • --brand-Button-shadow-focus

  • #410 8933e19 Thanks @rezrah! - Updated tokens for FAQ

    - --brand-FAQ-maxWidth;
+ --brand-FAQ-maxWidth-list

    New tokens:

    --brand-FAQ-color-tabBg-selected

Patch Changes

  • #416 d36709d Thanks @rezrah! - Added new design tokens for Accordion

    --brand-Accordion-border-color-default
--brand-Accordion-border-color-emphasis

0.24.0

Minor Changes

  • #394 c9029d4 Thanks @mperrotti! - Adds RiverBreakout component and its supporting design tokens.

    Usage example:

    <RiverBreakout>
  <RiverBreakout.A11yHeading>Accelerate workflows</RiverBreakout.A11yHeading>
  <RiverBreakout.Visual>
    <PlaceholderImage />
  </RiverBreakout.Visual>
  <RiverBreakout.Content
    trailingComponent={() => {
      ;<div>Trailing component</div>
    }}
  >
    <Text>
      Accelerate your workflows and scale your business fast with access to millions of open source projects on
      GitHub, the largest source code host.
    </Text>
    <Link href="#">Call to action</Link>
  </RiverBreakout.Content>
</RiverBreakout>

    See the Storybook

0.23.0

0.22.0

Minor Changes

  • #362 db9e54d Thanks @rezrah! - Added design tokens for the logo suite component

    --brand-LogoSuite-color-logo-muted
--brand-LogoSuite-color-logo-emphasis
--brand-LogoSuite-logobar-marquee-gap
--brand-LogoSuite-logobar-marquee-slow
--brand-LogoSuite-logobar-marquee-default
--brand-LogoSuite-logobar-rowGap
--brand-LogoSuite-logobar-columnGap

Patch Changes

  • #374 52abf2f Thanks @josepmartins! - Adjust dark mode color shade in icons (used in Card and Pillar components) and Label component.

0.21.0

Patch Changes

  • #360 d1ee031 Thanks @rezrah! - Updated custom animation times and easing values across all components to leverage globally available values.

    Three new variables have been added to @primer/brand-primitives:

    • --brand-animation-duration-fast
    • --brand-animation-duration-faster
    • --brand-animation-easing-glide

    Example:

    - 0.3s cubic-bezier(0.16, 1, 0.3, 1)
+ var(--brand-animation-duration-fast) var(--brand-animation-easing-default)

  • #347 6f8cd9d Thanks @rezrah! - Added new primitives for the box component

    --brand-box-spacing-condensed
--brand-box-spacing-normal
--brand-box-spacing-spacious

0.20.1

Patch Changes

  • #291 6761ce7 Thanks @rezrah! - Various security and stability updates.

    No changes to component API's or functionality.

  • #316 ce31a43 Thanks @JoshBowdenConcepts! - Added Prose component

    <Prose
  html={`
    <h2>Prose Component</h2>
    <p>
      The Prose component renders native HTML elements with Primer Brand styling. Prose doesn't sanitize the input data. We recommend sanitizing the data before passing it into Prose. <a href="https://primer.style/brand/components/Prose">Learn more here.</a>
    </p>
`}
/>

0.20.0

Minor Changes

  • #276 9e202d5 Thanks @rezrah! - Added design tokens for animation.

    --brand-animation-variant-scaleInLeft-end
--brand-animation-variant-scaleInLeft-start
--brand-animation-variant-scaleInLeft-distance
--brand-animation-variant-scaleInRight-end
--brand-animation-variant-scaleInRight-start
--brand-animation-variant-scaleInRight-distance
--brand-animation-variant-scaleInTop-distance
--brand-animation-variant-scaleIn-end
--brand-animation-variant-scaleIn-start
--brand-animation-variant-scaleInDown-end
--brand-animation-variant-scaleInDown-start
--brand-animation-variant-scaleInDown-distance
--brand-animation-variant-scaleInUp-end
--brand-animation-variant-scaleInUp-start
--brand-animation-variant-scaleInUp-distance
--brand-animation-variant-slideInRight-distance
--brand-animation-variant-slideInLeft-distance
--brand-animation-variant-slideInDown-distance
--brand-animation-variant-slideInUp-distance
--brand-animation-transition-default
--brand-animation-easing-default
--brand-animation-duration-extended
--brand-animation-duration-default

0.19.0

Patch Changes

0.18.0

Patch Changes

  • #273 a226dc6 Thanks @TylerJDev! - Changes Green-blue and Red-orange variants in Label colors for improved color contrast:

    - --base-color-scale-green-4
- --base-color-scale-red-4
+ --base-color-scale-green-5
+ --base-color-scale-red-5

    Adds high contrast mode support for Label

  • #236 7502285 Thanks @josepmartins! - New and updated River spacing tokens aiming for a responsive logic in both gap and padding values of the main container.

    # Updated medium/large gap and margin on pro of a responsive logic (Small/Medium/Large sizes) and inner/outer spacing
-  --brand-River-gap-column-medium: var(--base-size-32);
-  --brand-River-gap-column-large: var(--base-size-48);
+  --brand-River-spacing-inner: var(--base-size-24)/var(--base-size-36)/var(--base-size-48);
-  --brand-River-layout-margin-vertical: var(--base-size-24);
+  --brand-River-spacing-outer: var(--base-size-28)/var(--base-size-36)/var(--base-size-48);
# Updated heading margin
-  --brand-River-gap-heading-bottom: var(--base-size-8);
+  --brand-River-heading-margin: var(--base-size-8);

0.17.1

Patch Changes

  • #258 d8ab2c9 Thanks @rezrah! - Add brand prefix to Grid component design tokens.

    - --grid-spacing-margin
+ --brand-Grid-spacing-margin

0.17.0

Minor Changes

  • #237 51e383d Thanks @rezrah! - Added Grid-specific design tokens.

    --grid-spacing-margin
--grid-spacing-row
--grid-spacing-column-gap

0.16.1

0.16.0

Minor Changes

  • #220 d583547 Thanks @josepmartins! - New Label component-specific tokens have been added to the @primer/brand-primitives package.

        --brand-Label-color-default
    --brand-Label-color-blue
    --brand-Label-color-blue-purple-start
    --brand-Label-color-blue-purple-end
    --brand-Label-color-coral
    --brand-Label-color-green
    --brand-Label-color-green-blue-start
    --brand-Label-color-green-blue-end
    --brand-Label-color-gray
    --brand-Label-color-indigo
    --brand-Label-color-lemon
    --brand-Label-color-lime
    --brand-Label-color-orange
    --brand-Label-color-pink
    --brand-Label-color-pink-blue-start
    --brand-Label-color-pink-blue-end
    --brand-Label-color-purple
    --brand-Label-color-purple-red-start
    --brand-Label-color-purple-red-end
    --brand-Label-color-red
    --brand-Label-color-red-orange-start
    --brand-Label-color-red-orange-end
    --brand-Label-color-teal
    --brand-Label-color-yellow

0.15.1

0.15.0

Minor Changes

  • #217 cb892f8 Thanks @rezrah! - New ActionMenu component-specific tokens have been added to the @primer/brand-primitives package.

      --brand-ActionMenu-color-border-rest
  --brand-ActionMenu-color-border-hover
  --brand-ActionMenu-color-border-active
  --brand-ActionMenu-color-item-hover
  --brand-ActionMenu-color-scrollbar-thumb-bg

0.14.0

0.13.0

0.12.1

0.12.0

0.11.0

0.10.0

0.9.1

0.9.0

Minor Changes

  • #143 3affeda Thanks @rezrah! - - Updating names and values for accent, accordion and button design tokens.

    - --brand-color-accent-fg
+ --brand-color-accent-primary
    - --brand-color-accent-emphasis
+ --brand-color-accent-secondary
    - --brand-color-accent-fg
+ --brand-color-accent-primary
    - --brand-color-accent-emphasis
+ --brand-color-accent-secondary
    - --brand-color-accent-subtle
+ --brand-color-accent-secondary
    - --brand-color-accent-muted
+ --brand-color-accent-primary
    - --brand-Accordion-toggle-color-start
+ --brand-Accordion-toggle-color-start
    - --brand-Accordion-toggle-color-end
+ --brand-Accordion-toggle-color-end
    - --brand-Accordion-toggle-color-start
+ --brand-Accordion-toggle-color-start
    - --brand-Accordion-toggle-color-end
+ --brand-Accordion-toggle-color-end
    - --brand-Button-background-base
+ --brand-Button-background-base
    - --brand-Button-shadow-default
+ --brand-Button-shadow-primary-default
    - --brand-Button-shadow-hover
+ --brand-Button-shadow-primary-hover
    - --brand-Button-background-base
+ --brand-Button-background-base
    - --brand-Button-shadow-default
+ --brand-Button-shadow-primary-default
    - --brand-Button-shadow-hover
+ --brand-Button-shadow-primary-hover
    • Button heights have been updated to match specifications in Figma.

0.8.0

Minor Changes

  • #133 0b43c0e Thanks @rezrah! - New AnchorNav component available

    Use AnchorNav to provide a sticky navigation bar for quick scrolling to and highlighting of different sections of the document.

    <AnchorNav>
  <AnchorNav.Link href="#section-1">Section 1</AnchorNav.Link>
  <AnchorNav.Link href="#section-2">Section 2</AnchorNav.Link>
  <AnchorNav.Link href="#section-3">Section 3</AnchorNav.Link>
  <AnchorNav.Action href="/">Call to action</AnchorNav.Action>
</AnchorNav>

    🔗 See the documentation for more details and usage examples.

0.7.2

Patch Changes

  • #127 c16551f Thanks @rezrah! - Improvements to Button appearance

    • added an inactive / disabled visual appearance to the Button, which it previously didn't have

    • added new design tokens to replace functional tokens and enable app-side customisation

    • updated focus styles from previously bespoke grey to the global focus tokens

0.7.1

0.7.0

0.6.0

Minor Changes

  • #108 ba4f102 Thanks @rezrah! - Token updates for SubdomainNavBar and ComparisonTable

    • Fixed incorrect token name in SubdomainNavBar

      - --brand-SubdomainNavBar-fg-overflow-default: var(--brand-color-fg-default);
+ --brand-SubdomainNavBar-fg-overflow-default: var(--brand-color-text-default);

    • Added new token for customizing the featured gradiend in ComparisonTable

      + --brand-ComparisonTable-featured-color-start;
+ --brand-ComparisonTable-featured-color-end;

0.5.3

0.5.2

Patch Changes

  • #92 fcef134 Thanks @rezrah! - No updates in this release.

    New package versions published to verify the release process.