npm - @primer/react-brand - Versions diffs - 0.73.0 → 0.74.0-rc.817e3cc4 - Mend

@primer/react-brand 0.73.0 → 0.74.0-rc.817e3cc4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (383) hide show

package/lib/design-tokens/js/module/tokens/functional/size/viewport.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:57 GMT
  */
 module.exports = {

package/lib/design-tokens/js/module/tokens/functional/typography/typography-responsive.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:57 GMT
  */
 module.exports = {

package/lib/design-tokens/js/module/tokens/functional/typography/typography.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:57 GMT
  */
 module.exports = {

package/lib/design-tokens/js/tokens/base/colors/light.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:52 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:57 GMT
  */
 export const BaseColorScaleBlack0 = "#000000";

package/lib/design-tokens/js/tokens/base/size/size.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:52 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:57 GMT
  */
 export const BaseSize2 = "0.125rem";

package/lib/design-tokens/js/tokens/base/typography/typography.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:52 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:57 GMT
  */
 export const BaseTextWeightExtralight = 200;

package/lib/design-tokens/js/tokens/functional/animation/base.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandAnimationDurationFaster = "0.2s";

package/lib/design-tokens/js/tokens/functional/colors/global.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandColorSuccessFg = "var(--base-color-scale-green-6)";

package/lib/design-tokens/js/tokens/functional/components/bento/base.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandBentoGapLarge = "var(--base-size-32)";

package/lib/design-tokens/js/tokens/functional/components/card/base.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandCardMaxWidth = "26.25rem";

package/lib/design-tokens/js/tokens/functional/components/card/colors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandCardBackgroundDefault = "var(--brand-color-canvas-default)";

package/lib/design-tokens/js/tokens/functional/components/comparison-table/comparison-table.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandComparisonTableHeadingMarginBottom = "var(--base-size-8)";

package/lib/design-tokens/js/tokens/functional/components/eyebrow-banner/eyebrow-banner.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandEyebrowBannerBorderRadius = "var(--base-size-16)";

package/lib/design-tokens/js/tokens/functional/components/faq/base.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandFAQMaxWidthList = "51rem";

package/lib/design-tokens/js/tokens/functional/components/faq/colors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandFAQColorHeading = "var(--brand-color-text-default)";

package/lib/design-tokens/js/tokens/functional/components/faq/faq.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandFAQHeadingMarginBottom = "var(--base-size-40)";

package/lib/design-tokens/js/tokens/functional/components/footer/colors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandFooterBgColor = "var(--base-color-scale-white)";

package/lib/design-tokens/js/tokens/functional/components/frosted-glass-vfx/base.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandFrostedGlassVFXBlurIntensityLow = "var(--base-size-12)";

package/lib/design-tokens/js/tokens/functional/components/grid/colors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandGridColumnBgColorOverlay = "#fb51544d";

package/lib/design-tokens/js/tokens/functional/components/grid/grid.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandGridSpacingRow = "var(--base-size-16)";

package/lib/design-tokens/js/tokens/functional/components/hero/base.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandHeroNarrowPadding = "var(--base-size-96) 0";

package/lib/design-tokens/js/tokens/functional/components/icon/colors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandIconBackgroundDefault = "var(--brand-Icon-background-green)";

package/lib/design-tokens/js/tokens/functional/components/ide/base.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandIDEHeight = "50rem";

package/lib/design-tokens/js/tokens/functional/components/image/base.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandImageAspectRatio = "auto";

package/lib/design-tokens/js/tokens/functional/components/inline-link/base.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandInlineLinkTransitionTiming = "var(--brand-animation-duration-fast)";

package/lib/design-tokens/js/tokens/functional/components/inline-link/colors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandInlineLinkColorRest = "var(--brand-color-text-link-rest)";

package/lib/design-tokens/js/tokens/functional/components/label/colors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandLabelColorDefault = "var(--brand-color-text-default)";

package/lib/design-tokens/js/tokens/functional/components/link/colors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandLinkColorDefault = "var(--brand-color-text-default)";

package/lib/design-tokens/js/tokens/functional/components/logosuite/base.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandLogoSuiteLogobarColumnGapDefault = "var(--base-size-80)";

package/lib/design-tokens/js/tokens/functional/components/logosuite/colors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandLogoSuiteColorControlRest = "var(--brand-color-canvas-muted)";

package/lib/design-tokens/js/tokens/functional/components/media-playlist/colors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandMediaPlaylistBgColor = "linear-gradient(180deg, rgba(242, 245, 243, 0.5) 0%, rgba(242, 245, 243, 0) 100%), var(--brand-color-canvas-default)";

package/lib/design-tokens/js/tokens/functional/components/pricing-options/colors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandPricingOptionsBorderMask = "linear-gradient(180deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3))";

package/lib/design-tokens/js/tokens/functional/components/pricing-options/pricing-options.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandPricingOptionsItemsGap = "var(--base-size-24)";

package/lib/design-tokens/js/tokens/functional/components/prose/base.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandProseLineLength = "68ch";

package/lib/design-tokens/js/tokens/functional/components/river/base.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandRiverHeadingMargin = "var(--base-size-16)";

package/lib/design-tokens/js/tokens/functional/components/river/river.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandRiverSpacingInner = "var(--base-size-40)";

package/lib/design-tokens/js/tokens/functional/components/section/section.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandSectionPaddingCondensed = "var(--base-size-16)";

package/lib/design-tokens/js/tokens/functional/components/statistic/base.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandStatisticSpacingCondensed = "1rem";

package/lib/design-tokens/js/tokens/functional/components/sub-nav/base.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandSubNavWidthSubMenu = "18.75rem";

package/lib/design-tokens/js/tokens/functional/components/tabs/base.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandTabsContainerPadding = "0.25rem";

package/lib/design-tokens/js/tokens/functional/components/tabs/colors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandTabsItemAccentBgColorRest = "var(--base-color-scale-green-6)";

package/lib/design-tokens/js/tokens/functional/components/testimonial/base.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandTestimonialQuoteFontSizeDefault = "var(--brand-text-size-400)";

package/lib/design-tokens/js/tokens/functional/components/testimonial/colors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandTestimonialQuoteColorDefault = "var(--brand-color-text-default)";

package/lib/design-tokens/js/tokens/functional/components/text-cursor-animation/colors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandTextCursorAnimationCursorColor = "var(--base-color-scale-green-6)";

package/lib/design-tokens/js/tokens/functional/components/timeline/base.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandTimelineLineHeight = "var(--brand-text-lineHeight-200)";

package/lib/design-tokens/js/tokens/functional/components/timeline/colors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandTimelineLineColor = "var(--brand-color-border-default)";

package/lib/design-tokens/js/tokens/functional/components/token/colors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandTokenBgColorDefault = "var(--base-color-scale-gray-0)";

package/lib/design-tokens/js/tokens/functional/components/tooltip/colors.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandTooltipColorDefault = "var(--brand-color-text-onEmphasis)";

package/lib/design-tokens/js/tokens/functional/components/video-player/base.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandVideoPlayerClosedCaptionMargin = "0 auto 15px auto";

package/lib/design-tokens/js/tokens/functional/size/border.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandBorderInsetThin = "inset 0 0 0 max(1px, 0.0625rem)";

package/lib/design-tokens/js/tokens/functional/size/breakpoints.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandBreakpointXsmall = "20rem";

package/lib/design-tokens/js/tokens/functional/size/size-coarse.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:52 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:57 GMT
  */
 export const BrandControlMinTargetAuto = "2.75rem";

package/lib/design-tokens/js/tokens/functional/size/size-fine.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:52 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:57 GMT
  */
 export const BrandControlMinTargetAuto = "1rem";

package/lib/design-tokens/js/tokens/functional/size/size.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandControlMinTargetFine = "1rem";

package/lib/design-tokens/js/tokens/functional/size/viewport.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandViewportRangeNarrowViewport = "(max-width: calc(48rem - 0.02px))";

package/lib/design-tokens/js/tokens/functional/typography/typography-responsive.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandFontStackSansSerifAlt = "'Hubot Sans', 'Hubot SansHeaderFallback',-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";

package/lib/design-tokens/js/tokens/functional/typography/typography.js CHANGED Viewed

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 12 Aug 2026 10:13:51 GMT
+ * Generated on Wed, 19 Aug 2026 11:01:56 GMT
  */
 export const BrandFontStackSystem = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";

package/lib/design-tokens/json/size.json ADDED Viewed

@@ -0,0 +1,78 @@
+{
+  "--base-size-112": "7rem",
+  "--base-size-12": "0.75rem",
+  "--base-size-128": "8rem",
+  "--base-size-16": "1rem",
+  "--base-size-2": "0.125rem",
+  "--base-size-20": "1.25rem",
+  "--base-size-24": "1.5rem",
+  "--base-size-28": "1.75rem",
+  "--base-size-32": "2rem",
+  "--base-size-36": "2.25rem",
+  "--base-size-4": "0.25rem",
+  "--base-size-40": "2.5rem",
+  "--base-size-44": "2.75rem",
+  "--base-size-48": "3rem",
+  "--base-size-6": "0.375rem",
+  "--base-size-60": "3.75rem",
+  "--base-size-64": "4rem",
+  "--base-size-8": "0.5rem",
+  "--base-size-80": "5rem",
+  "--base-size-88": "5.5rem",
+  "--base-size-96": "6rem",
+  "--brand-borderRadius-full": "624.9375rem",
+  "--brand-borderRadius-large": "1rem",
+  "--brand-borderRadius-medium": "0.5rem",
+  "--brand-borderRadius-small": "0.25rem",
+  "--brand-borderRadius-xlarge": "1.5rem",
+  "--brand-borderWidth-thick": "max(2px, 0.125rem)",
+  "--brand-borderWidth-thicker": "max(4px, 0.25rem)",
+  "--brand-borderWidth-thin": "max(1px, 0.0625rem)",
+  "--brand-box-spacing-condensed": "1rem",
+  "--brand-box-spacing-normal": "1.5rem",
+  "--brand-box-spacing-spacious": "3rem",
+  "--brand-breakpoint-large": "63.25rem",
+  "--brand-breakpoint-medium": "48rem",
+  "--brand-breakpoint-small": "34rem",
+  "--brand-breakpoint-xlarge": "80rem",
+  "--brand-breakpoint-xsmall": "20rem",
+  "--brand-breakpoint-xxlarge": "87.5rem",
+  "--brand-control-large-gap": "1rem",
+  "--brand-control-large-lineBoxHeight": "1.25rem",
+  "--brand-control-large-paddingBlock-condensed": "0.75rem",
+  "--brand-control-large-paddingBlock-normal": "1.25rem",
+  "--brand-control-large-paddingInline-condensed": "1rem",
+  "--brand-control-large-paddingInline-normal": "1.25rem",
+  "--brand-control-large-paddingInline-spacious": "2rem",
+  "--brand-control-large-size": "3.75rem",
+  "--brand-control-medium-gap": "0.75rem",
+  "--brand-control-medium-lineBoxHeight": "1rem",
+  "--brand-control-medium-paddingBlock-condensed": "0.375rem",
+  "--brand-control-medium-paddingBlock-normal": "1rem",
+  "--brand-control-medium-paddingInline-condensed": "0.75rem",
+  "--brand-control-medium-paddingInline-normal": "1rem",
+  "--brand-control-medium-paddingInline-spacious": "1.75rem",
+  "--brand-control-medium-size": "2.6875rem",
+  "--brand-control-minTarget-coarse": "2.75rem",
+  "--brand-control-minTarget-fine": "1rem",
+  "--brand-control-small-gap": "0.5rem",
+  "--brand-control-small-lineBoxHeight": "0.75rem",
+  "--brand-control-small-paddingBlock": "0.5rem",
+  "--brand-control-small-paddingInline-condensed": "0.5rem",
+  "--brand-control-small-paddingInline-normal": "0.75rem",
+  "--brand-control-small-paddingInline-spacious": "1.5rem",
+  "--brand-control-small-size": "2rem",
+  "--brand-controlStack-large-gap-auto": "0.5rem",
+  "--brand-controlStack-large-gap-condensed": "0.5rem",
+  "--brand-controlStack-large-gap-spacious": "0.75rem",
+  "--brand-controlStack-medium-gap-condensed": "0.5rem",
+  "--brand-controlStack-medium-gap-spacious": "0.75rem",
+  "--brand-controlStack-small-gap-condensed": "0.5rem",
+  "--brand-controlStack-small-gap-spacious": "1rem",
+  "--brand-stack-gap-condensed": "1rem",
+  "--brand-stack-gap-normal": "1.5rem",
+  "--brand-stack-gap-spacious": "3rem",
+  "--brand-stack-padding-condensed": "1rem",
+  "--brand-stack-padding-normal": "1.5rem",
+  "--brand-stack-padding-spacious": "3rem"
+}