@primer/primitives 7.13.0-rc.80d1e20 → 7.13.1-rc.0b7da29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "7.13.0-rc.80d1e20",
+  "version": "7.13.1-rc.0b7da29",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",

package/tokens-next-private/scss/base/size/size.scss

@@ -1,21 +1,17 @@
-@mixin primer-colors-size {
-  & {
-    --base-size-4: 0.25rem;
-    --base-size-8: 0.5rem;
-    --base-size-12: 0.75rem;
-    --base-size-16: 1rem;
-    --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-40: 2.5rem;
-    --base-size-44: 2.75rem;
-    --base-size-48: 3rem;
-    --base-size-64: 4rem;
-    --base-size-80: 5rem;
-    --base-size-96: 6rem;
-    --base-size-112: 7rem;
-    --base-size-128: 8rem;
-  }
-}
+$base-size-4: 0.25rem;
+$base-size-8: 0.5rem;
+$base-size-12: 0.75rem;
+$base-size-16: 1rem;
+$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-40: 2.5rem;
+$base-size-44: 2.75rem;
+$base-size-48: 3rem;
+$base-size-64: 4rem;
+$base-size-80: 5rem;
+$base-size-96: 6rem;
+$base-size-112: 7rem;
+$base-size-128: 8rem;

package/tokens-next-private/scss/base/typography/typography.scss

@@ -1,8 +1,4 @@
-@mixin primer-colors-typography {
-  & {
-    --base-text-weight-light: 300;
-    --base-text-weight-normal: 400;
-    --base-text-weight-medium: 500;
-    --base-text-weight-semibold: 600;
-  }
-}
+$base-text-weight-light: 300;
+$base-text-weight-normal: 400;
+$base-text-weight-medium: 500;
+$base-text-weight-semibold: 600;

package/tokens-next-private/scss/functional/size/border.scss

@@ -1,16 +1,12 @@
-@mixin primer-colors-border {
-  & {
-    --boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem); /* Thin shadow for borders */
-    --boxShadow-thick: inset 0 0 0 max(2px, 0.125rem);
-    --boxShadow-thicker: inset 0 0 0 max(4px, 0.25rem);
-    --borderWidth-thin: max(1px, 0.0625rem);
-    --borderWidth-thick: max(2px, 0.125rem);
-    --borderWidth-thicker: max(4px, 0.25rem);
-    --borderRadius-small: 0.1875rem;
-    --borderRadius-medium: 0.375rem;
-    --borderRadius-large: 0.75rem;
-    --borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
-    --outline-focus-offset: -0.125rem;
-    --outline-focus-width: 0.125rem;
-  }
-}
+$boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem); // Thin shadow for borders
+$boxShadow-thick: inset 0 0 0 max(2px, 0.125rem);
+$boxShadow-thicker: inset 0 0 0 max(4px, 0.25rem);
+$borderWidth-thin: max(1px, 0.0625rem);
+$borderWidth-thick: max(2px, 0.125rem);
+$borderWidth-thicker: max(4px, 0.25rem);
+$borderRadius-small: 0.1875rem;
+$borderRadius-medium: 0.375rem;
+$borderRadius-large: 0.75rem;
+$borderRadius-full: 624.9375rem; // Use this border radius for pill shaped elements
+$outline-focus-offset: -0.125rem;
+$outline-focus-width: 0.125rem;

package/tokens-next-private/scss/functional/size/breakpoints.scss

@@ -1,10 +1,6 @@
-@mixin primer-colors-breakpoints {
-  & {
-    --breakpoint-xsmall: 20rem;
-    --breakpoint-small: 34rem;
-    --breakpoint-medium: 48rem;
-    --breakpoint-large: 63.25rem;
-    --breakpoint-xlarge: 80rem;
-    --breakpoint-xxlarge: 90rem;
-  }
-}
+$breakpoint-xsmall: 20rem;
+$breakpoint-small: 34rem;
+$breakpoint-medium: 48rem;
+$breakpoint-large: 63.25rem;
+$breakpoint-xlarge: 80rem;
+$breakpoint-xxlarge: 90rem;

package/tokens-next-private/scss/functional/size/size-coarse.scss

@@ -1,7 +1,3 @@
-@mixin primer-colors-size-coarse {
-  & {
-    --control-minTarget-auto: 2.75rem;
-    --controlStack-small-gap-auto: 1rem;
-    --controlStack-medium-gap-auto: 0.75rem;
-  }
-}
+$control-minTarget-auto: 2.75rem;
+$controlStack-small-gap-auto: 1rem;
+$controlStack-medium-gap-auto: 0.75rem;

package/tokens-next-private/scss/functional/size/size-fine.scss

@@ -1,7 +1,3 @@
-@mixin primer-colors-size-fine {
-  & {
-    --control-minTarget-auto: 1rem;
-    --controlStack-small-gap-auto: 0.5rem;
-    --controlStack-medium-gap-auto: 0.5rem;
-  }
-}
+$control-minTarget-auto: 1rem;
+$controlStack-small-gap-auto: 0.5rem;
+$controlStack-medium-gap-auto: 0.5rem;

package/tokens-next-private/scss/functional/size/size.scss

@@ -1,71 +1,67 @@
-@mixin primer-colors-size {
-  & {
-    --control-minTarget-fine: 1rem;
-    --control-minTarget-coarse: 2.75rem;
-    --control-xsmall-size: 1.5rem;
-    --control-xsmall-lineBoxHeight: 1.25rem;
-    --control-xsmall-paddingBlock: 0.125rem;
-    --control-xsmall-paddingInline-condensed: 0.25rem;
-    --control-xsmall-paddingInline-normal: 0.5rem;
-    --control-xsmall-paddingInline-spacious: 0.75rem;
-    --control-xsmall-gap: 0.25rem;
-    --control-small-size: 1.75rem;
-    --control-small-lineBoxHeight: 1.25rem;
-    --control-small-paddingBlock: 0.25rem;
-    --control-small-paddingInline-condensed: 0.5rem;
-    --control-small-paddingInline-normal: 0.75rem;
-    --control-small-gap: 0.25rem;
-    --control-medium-size: 2rem;
-    --control-medium-lineBoxHeight: 1.25rem;
-    --control-medium-paddingBlock: 0.375rem;
-    --control-medium-paddingInline-condensed: 0.5rem;
-    --control-medium-paddingInline-normal: 0.75rem;
-    --control-medium-paddingInline-spacious: 1rem;
-    --control-medium-gap: 0.5rem;
-    --control-large-size: 2.5rem;
-    --control-large-lineBoxHeight: 1.25rem;
-    --control-large-paddingBlock: 0.625rem;
-    --control-large-paddingInline-normal: 0.75rem;
-    --control-large-paddingInline-spacious: 1rem;
-    --control-large-gap: 0.5rem;
-    --control-xlarge-size: 3rem;
-    --control-xlarge-lineBoxHeight: 1.25rem;
-    --control-xlarge-paddingBlock: 0.875rem;
-    --control-xlarge-paddingInline-normal: 0.75rem;
-    --control-xlarge-paddingInline-spacious: 1rem;
-    --control-xlarge-gap: 0.5rem;
-    --controlStack-small-gap-condensed: 0.5rem;
-    --controlStack-small-gap-spacious: 1rem;
-    --controlStack-medium-gap-condensed: 0.5rem;
-    --controlStack-medium-gap-spacious: 0.75rem;
-    --controlStack-large-gap-auto: 0.5rem;
-    --controlStack-large-gap-condensed: 0.5rem;
-    --controlStack-large-gap-spacious: 0.75rem;
-    --space-xxsmall: 0.125rem;
-    --space-xsmall: 0.25rem;
-    --space-small: 0.375rem;
-    --space-medium: 0.5rem;
-    --space-large: 0.75rem;
-    --space-xlarge: 1rem;
-    --stack-padding-condensed: 0.5rem;
-    --stack-padding-normal: 1rem;
-    --stack-padding-spacious: 1.5rem;
-    --stack-gap-condensed: 0.5rem;
-    --stack-gap-normal: 1rem;
-    --stack-gap-spacious: 1.5rem;
-    --overlay-width-xsmall: 12rem;
-    --overlay-width-small: 20rem;
-    --overlay-width-medium: 30rem;
-    --overlay-width-large: 40rem;
-    --overlay-width-xlarge: 60rem;
-    --overlay-height-small: 16rem;
-    --overlay-height-medium: 20rem;
-    --overlay-height-large: 27rem;
-    --overlay-height-xlarge: 37.5rem;
-    --overlay-padding-normal: 1rem;
-    --overlay-padding-condensed: 0.5rem;
-    --overlay-paddingBlock-condensed: 0.25rem;
-    --overlay-paddingBlock-normal: 0.75rem;
-    --overlay-borderRadius: 0.375rem;
-  }
-}
+$control-minTarget-fine: 1rem;
+$control-minTarget-coarse: 2.75rem;
+$control-xsmall-size: 1.5rem;
+$control-xsmall-lineBoxHeight: 1.25rem;
+$control-xsmall-paddingBlock: 0.125rem;
+$control-xsmall-paddingInline-condensed: 0.25rem;
+$control-xsmall-paddingInline-normal: 0.5rem;
+$control-xsmall-paddingInline-spacious: 0.75rem;
+$control-xsmall-gap: 0.25rem;
+$control-small-size: 1.75rem;
+$control-small-lineBoxHeight: 1.25rem;
+$control-small-paddingBlock: 0.25rem;
+$control-small-paddingInline-condensed: 0.5rem;
+$control-small-paddingInline-normal: 0.75rem;
+$control-small-gap: 0.25rem;
+$control-medium-size: 2rem;
+$control-medium-lineBoxHeight: 1.25rem;
+$control-medium-paddingBlock: 0.375rem;
+$control-medium-paddingInline-condensed: 0.5rem;
+$control-medium-paddingInline-normal: 0.75rem;
+$control-medium-paddingInline-spacious: 1rem;
+$control-medium-gap: 0.5rem;
+$control-large-size: 2.5rem;
+$control-large-lineBoxHeight: 1.25rem;
+$control-large-paddingBlock: 0.625rem;
+$control-large-paddingInline-normal: 0.75rem;
+$control-large-paddingInline-spacious: 1rem;
+$control-large-gap: 0.5rem;
+$control-xlarge-size: 3rem;
+$control-xlarge-lineBoxHeight: 1.25rem;
+$control-xlarge-paddingBlock: 0.875rem;
+$control-xlarge-paddingInline-normal: 0.75rem;
+$control-xlarge-paddingInline-spacious: 1rem;
+$control-xlarge-gap: 0.5rem;
+$controlStack-small-gap-condensed: 0.5rem;
+$controlStack-small-gap-spacious: 1rem;
+$controlStack-medium-gap-condensed: 0.5rem;
+$controlStack-medium-gap-spacious: 0.75rem;
+$controlStack-large-gap-auto: 0.5rem;
+$controlStack-large-gap-condensed: 0.5rem;
+$controlStack-large-gap-spacious: 0.75rem;
+$space-xxsmall: 0.125rem;
+$space-xsmall: 0.25rem;
+$space-small: 0.375rem;
+$space-medium: 0.5rem;
+$space-large: 0.75rem;
+$space-xlarge: 1rem;
+$stack-padding-condensed: 0.5rem;
+$stack-padding-normal: 1rem;
+$stack-padding-spacious: 1.5rem;
+$stack-gap-condensed: 0.5rem;
+$stack-gap-normal: 1rem;
+$stack-gap-spacious: 1.5rem;
+$overlay-width-xsmall: 12rem;
+$overlay-width-small: 20rem;
+$overlay-width-medium: 30rem;
+$overlay-width-large: 40rem;
+$overlay-width-xlarge: 60rem;
+$overlay-height-small: 16rem;
+$overlay-height-medium: 20rem;
+$overlay-height-large: 27rem;
+$overlay-height-xlarge: 37.5rem;
+$overlay-padding-normal: 1rem;
+$overlay-padding-condensed: 0.5rem;
+$overlay-paddingBlock-condensed: 0.25rem;
+$overlay-paddingBlock-normal: 0.75rem;
+$overlay-borderRadius: 0.375rem;

package/tokens-next-private/scss/functional/size/viewport.scss

@@ -1,19 +1,6 @@
-@mixin primer-colors-viewport {
-  & {
-    --viewportRange-narrow: (max-width: calc(48rem - 0.02px));
-    --viewportRange-narrowLandscape: (
-      max-width: calc(63.25rem - 0.02px) and
-        (
-          max-height: calc(34rem - 0.02px),
-        )
-        and
-        (
-          orientation: landscape,
-        )
-    );
-    --viewportRange-regular: (min-width: 48rem);
-    --viewportRange-wide: (min-width: 90rem);
-    --viewportRange-portrait: (orientation: portrait);
-    --viewportRange-landscape: (orientation: landscape);
-  }
-}
+$viewportRange-narrow: (max-width: calc(48rem - 0.02px));
+$viewportRange-narrowLandscape: (max-width: calc(63.25rem - 0.02px) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape));
+$viewportRange-regular: (min-width: 48rem);
+$viewportRange-wide: (min-width: 90rem);
+$viewportRange-portrait: (orientation: portrait);
+$viewportRange-landscape: (orientation: landscape);