@primer/primitives 7.13.0 → 7.13.1-rc.0fa7554

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

@@ -2157,14 +2157,15 @@
   {
     "name": "button/danger/borderColor/hover",
     "value": {
-      "r": 0.7137254901960784,
-      "g": 0.13725490196078433,
-      "b": 0.1411764705882353,
-      "a": 1
+      "r": 0.9411764705882353,
+      "g": 0.9647058823529412,
+      "b": 0.9882352941176471,
+      "a": 0.1
     },
     "type": "COLOR",
+    "alpha": 0.1,
     "refId": "mode/button/danger/borderColor/hover",
-    "reference": "base/color/dark/base/color/red/6",
+    "reference": "base/color/dark/base/color/gray/0",
     "collection": "mode",
     "mode": "dark",
     "group": "component",
@@ -2251,6 +2252,23 @@
     "group": "component",
     "scopes": ["TEXT_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "button/outline/borderColor/hover",
+    "value": {
+      "r": 0.9411764705882353,
+      "g": 0.9647058823529412,
+      "b": 0.9882352941176471,
+      "a": 0.1
+    },
+    "type": "COLOR",
+    "alpha": 0.1,
+    "refId": "mode/button/outline/borderColor/hover",
+    "reference": "base/color/dark/base/color/gray/0",
+    "collection": "mode",
+    "mode": "dark",
+    "group": "component",
+    "scopes": ["STROKE_COLOR"]
+  },
   {
     "name": "button/outline/bgColor/disabled",
     "value": {
@@ -3609,14 +3627,14 @@
   {
     "name": "button/danger/borderColor/active",
     "value": {
-      "r": 0.8156862745098039,
-      "g": 0.20784313725490197,
-      "b": 0.2,
-      "a": 1
+      "r": 0.9411764705882353,
+      "g": 0.9647058823529412,
+      "b": 0.9882352941176471,
+      "a": 0.1
     },
     "type": "COLOR",
     "refId": "mode/button/danger/borderColor/active",
-    "reference": "mode/button/danger/bgColor/active",
+    "reference": "mode/button/danger/borderColor/hover",
     "collection": "mode",
     "mode": "dark",
     "group": "component",
@@ -3703,6 +3721,22 @@
     "group": "component",
     "scopes": ["TEXT_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "button/outline/borderColor/selected",
+    "value": {
+      "r": 0.9411764705882353,
+      "g": 0.9647058823529412,
+      "b": 0.9882352941176471,
+      "a": 0.1
+    },
+    "type": "COLOR",
+    "refId": "mode/button/outline/borderColor/selected",
+    "reference": "mode/button/outline/borderColor/hover",
+    "collection": "mode",
+    "mode": "dark",
+    "group": "component",
+    "scopes": ["STROKE_COLOR"]
+  },
   {
     "name": "button/outline/fgColor/disabled",
     "value": {
@@ -3800,6 +3834,38 @@
     "group": "component",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "button/invisible/iconColor/hover",
+    "value": {
+      "r": 0.9019607843137255,
+      "g": 0.9294117647058824,
+      "b": 0.9529411764705882,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/button/invisible/iconColor/hover",
+    "reference": "mode/fgColor/default",
+    "collection": "mode",
+    "mode": "dark",
+    "group": "component",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
+  },
+  {
+    "name": "button/invisible/iconColor/rest",
+    "value": {
+      "r": 0.49019607843137253,
+      "g": 0.5215686274509804,
+      "b": 0.5647058823529412,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/button/invisible/iconColor/rest",
+    "reference": "mode/fgColor/muted",
+    "collection": "mode",
+    "mode": "dark",
+    "group": "component",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "button/invisible/fgColor/rest",
     "value": {
@@ -3832,6 +3898,22 @@
     "group": "component",
     "scopes": ["STROKE_COLOR"]
   },
+  {
+    "name": "button/primary/borderColor/active",
+    "value": {
+      "r": 0.9411764705882353,
+      "g": 0.9647058823529412,
+      "b": 0.9882352941176471,
+      "a": 0.1
+    },
+    "type": "COLOR",
+    "refId": "mode/button/primary/borderColor/active",
+    "reference": "mode/button/primary/borderColor/rest",
+    "collection": "mode",
+    "mode": "dark",
+    "group": "component",
+    "scopes": ["STROKE_COLOR"]
+  },
   {
     "name": "button/primary/borderColor/hover",
     "value": {
@@ -3898,38 +3980,6 @@
     "group": "component",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
-  {
-    "name": "button/default/borderColor/active",
-    "value": {
-      "r": 0.18823529411764706,
-      "g": 0.21176470588235294,
-      "b": 0.23921568627450981,
-      "a": 1
-    },
-    "type": "COLOR",
-    "refId": "mode/button/default/borderColor/active",
-    "reference": "mode/borderColor/default",
-    "collection": "mode",
-    "mode": "dark",
-    "group": "component",
-    "scopes": ["STROKE_COLOR"]
-  },
-  {
-    "name": "button/default/borderColor/hover",
-    "value": {
-      "r": 0.18823529411764706,
-      "g": 0.21176470588235294,
-      "b": 0.23921568627450981,
-      "a": 1
-    },
-    "type": "COLOR",
-    "refId": "mode/button/default/borderColor/hover",
-    "reference": "mode/borderColor/default",
-    "collection": "mode",
-    "mode": "dark",
-    "group": "component",
-    "scopes": ["STROKE_COLOR"]
-  },
   {
     "name": "button/default/borderColor/rest",
     "value": {
@@ -4736,68 +4786,84 @@
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "button/outline/borderColor/selected",
+    "name": "button/invisible/bgColor/disabled",
     "value": {
-      "r": 0.18823529411764706,
-      "g": 0.21176470588235294,
-      "b": 0.23921568627450981,
-      "a": 0.4
+      "r": 0.08627450980392157,
+      "g": 0.10588235294117647,
+      "b": 0.13333333333333333,
+      "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/button/outline/borderColor/selected",
-    "reference": "mode/borderColor/muted",
+    "refId": "mode/button/invisible/bgColor/disabled",
+    "reference": "mode/control/bgColor/disabled",
     "collection": "mode",
     "mode": "dark",
     "group": "component",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "button/outline/borderColor/hover",
+    "name": "button/invisible/iconColor/disabled",
     "value": {
-      "r": 0.18823529411764706,
-      "g": 0.21176470588235294,
-      "b": 0.23921568627450981,
-      "a": 0.4
+      "r": 0.5450980392156862,
+      "g": 0.5803921568627451,
+      "b": 0.6196078431372549,
+      "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/button/outline/borderColor/hover",
-    "reference": "mode/borderColor/muted",
+    "refId": "mode/button/invisible/iconColor/disabled",
+    "reference": "mode/control/fgColor/disabled",
     "collection": "mode",
     "mode": "dark",
     "group": "component",
-    "scopes": ["STROKE_COLOR"]
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "button/invisible/bgColor/disabled",
+    "name": "button/invisible/fgColor/disabled",
     "value": {
-      "r": 0.08627450980392157,
-      "g": 0.10588235294117647,
-      "b": 0.13333333333333333,
+      "r": 0.5450980392156862,
+      "g": 0.5803921568627451,
+      "b": 0.6196078431372549,
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/button/invisible/bgColor/disabled",
-    "reference": "mode/control/bgColor/disabled",
+    "refId": "mode/button/invisible/fgColor/disabled",
+    "reference": "mode/control/fgColor/disabled",
     "collection": "mode",
     "mode": "dark",
     "group": "component",
-    "scopes": ["FRAME_FILL", "SHAPE_FILL"]
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
   },
   {
-    "name": "button/invisible/fgColor/disabled",
+    "name": "button/default/borderColor/active",
     "value": {
-      "r": 0.5450980392156862,
-      "g": 0.5803921568627451,
-      "b": 0.6196078431372549,
+      "r": 0.18823529411764706,
+      "g": 0.21176470588235294,
+      "b": 0.23921568627450981,
       "a": 1
     },
     "type": "COLOR",
-    "refId": "mode/button/invisible/fgColor/disabled",
-    "reference": "mode/control/fgColor/disabled",
+    "refId": "mode/button/default/borderColor/active",
+    "reference": "mode/button/default/borderColor/rest",
     "collection": "mode",
     "mode": "dark",
     "group": "component",
-    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
+    "scopes": ["STROKE_COLOR"]
+  },
+  {
+    "name": "button/default/borderColor/hover",
+    "value": {
+      "r": 0.18823529411764706,
+      "g": 0.21176470588235294,
+      "b": 0.23921568627450981,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/button/default/borderColor/hover",
+    "reference": "mode/button/default/borderColor/rest",
+    "collection": "mode",
+    "mode": "dark",
+    "group": "component",
+    "scopes": ["STROKE_COLOR"]
   },
   {
     "name": "button/default/bgColor/disabled",

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",
@@ -3771,6 +3773,38 @@
     "group": "component",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "button/invisible/iconColor/hover",
+    "value": {
+      "r": 0.38823529411764707,
+      "g": 0.4235294117647059,
+      "b": 0.4627450980392157,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/button/invisible/iconColor/hover",
+    "reference": "mode/fgColor/muted",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
+  },
+  {
+    "name": "button/invisible/iconColor/rest",
+    "value": {
+      "r": 0.38823529411764707,
+      "g": 0.4235294117647059,
+      "b": 0.4627450980392157,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/button/invisible/iconColor/rest",
+    "reference": "mode/fgColor/muted",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "button/invisible/fgColor/hover",
     "value": {
@@ -3819,6 +3853,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": {
@@ -4770,6 +4820,22 @@
     "group": "component",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "button/invisible/iconColor/disabled",
+    "value": {
+      "r": 0.5490196078431373,
+      "g": 0.5843137254901961,
+      "b": 0.6235294117647059,
+      "a": 1
+    },
+    "type": "COLOR",
+    "refId": "mode/button/invisible/iconColor/disabled",
+    "reference": "mode/control/fgColor/disabled",
+    "collection": "mode",
+    "mode": "light",
+    "group": "component",
+    "scopes": ["TEXT_FILL", "SHAPE_FILL"]
+  },
   {
     "name": "button/invisible/fgColor/disabled",
     "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;