@primer/primitives 7.13.0 → 7.13.1-rc.4461d84

package/tokens-next-private/figma/themes/light.json

@@ -2095,6 +2095,23 @@
     "group": "component",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "button/danger/borderColor/hover",
+    "value": {
+      "r": 0.12156862745098039,
+      "g": 0.13725490196078433,
+      "b": 0.1568627450980392,
+      "a": 0.15
+    },
+    "type": "COLOR",
+    "alpha": 0.15,
+    "refId": "mode/button/danger/borderColor/hover",
+    "reference": "base/color/light/base/color/black",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component",
+    "scopes": ["STROKE_COLOR"]
+  },
   {
     "name": "button/danger/bgColor/active",
     "value": {
@@ -2176,6 +2193,23 @@
     "group": "component",
     "scopes": ["TEXT_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "button/outline/borderColor/hover",
+    "value": {
+      "r": 0.12156862745098039,
+      "g": 0.13725490196078433,
+      "b": 0.1568627450980392,
+      "a": 0.15
+    },
+    "type": "COLOR",
+    "alpha": 0.15,
+    "refId": "mode/button/outline/borderColor/hover",
+    "reference": "base/color/light/base/color/black",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component",
+    "scopes": ["STROKE_COLOR"]
+  },
   {
     "name": "button/outline/bgColor/disabled",
     "value": {
@@ -3467,30 +3501,14 @@
   {
     "name": "button/danger/borderColor/active",
     "value": {
-      "r": 0.8156862745098039,
-      "g": 0.8431372549019608,
-      "b": 0.8705882352941177,
-      "a": 1
+      "r": 0.12156862745098039,
+      "g": 0.13725490196078433,
+      "b": 0.1568627450980392,
+      "a": 0.15
     },
     "type": "COLOR",
     "refId": "mode/button/danger/borderColor/active",
-    "reference": "mode/borderColor/default",
-    "collection": "mode",
-    "mode": "light",
-    "group": "component",
-    "scopes": ["STROKE_COLOR"]
-  },
-  {
-    "name": "button/danger/borderColor/hover",
-    "value": {
-      "r": 0.8156862745098039,
-      "g": 0.8431372549019608,
-      "b": 0.8705882352941177,
-      "a": 1
-    },
-    "type": "COLOR",
-    "refId": "mode/button/danger/borderColor/hover",
-    "reference": "mode/borderColor/default",
+    "reference": "mode/button/danger/borderColor/hover",
     "collection": "mode",
     "mode": "light",
     "group": "component",
@@ -3580,30 +3598,14 @@
   {
     "name": "button/outline/borderColor/active",
     "value": {
-      "r": 0.8156862745098039,
-      "g": 0.8431372549019608,
-      "b": 0.8705882352941177,
-      "a": 1
+      "r": 0.12156862745098039,
+      "g": 0.13725490196078433,
+      "b": 0.1568627450980392,
+      "a": 0.15
     },
     "type": "COLOR",
     "refId": "mode/button/outline/borderColor/active",
-    "reference": "mode/borderColor/default",
-    "collection": "mode",
-    "mode": "light",
-    "group": "component",
-    "scopes": ["STROKE_COLOR"]
-  },
-  {
-    "name": "button/outline/borderColor/hover",
-    "value": {
-      "r": 0.8156862745098039,
-      "g": 0.8431372549019608,
-      "b": 0.8705882352941177,
-      "a": 1
-    },
-    "type": "COLOR",
-    "refId": "mode/button/outline/borderColor/hover",
-    "reference": "mode/borderColor/default",
+    "reference": "mode/button/outline/borderColor/hover",
     "collection": "mode",
     "mode": "light",
     "group": "component",
@@ -3819,6 +3821,22 @@
     "group": "component",
     "scopes": ["STROKE_COLOR"]
   },
+  {
+    "name": "button/primary/borderColor/active",
+    "value": {
+      "r": 0.12156862745098039,
+      "g": 0.13725490196078433,
+      "b": 0.1568627450980392,
+      "a": 0.15
+    },
+    "type": "COLOR",
+    "refId": "mode/button/primary/borderColor/active",
+    "reference": "mode/button/primary/borderColor/rest",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component",
+    "scopes": ["STROKE_COLOR"]
+  },
   {
     "name": "button/primary/borderColor/hover",
     "value": {

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);