@primer/primitives 10.2.0 → 10.3.0-rc.37645a3a

package/dist/docs/functional/size/border.json

@@ -1,158 +1,69 @@
 {
-  "boxShadow-thin": {
-    "filePath": "src/tokens/functional/size/border.json5",
-    "isSource": true,
-    "original": {
-      "$value": "inset 0 0 0 {borderWidth.thin}",
-      "$description": "Thin shadow for borders",
-      "$type": "string"
-    },
-    "name": "boxShadow-thin",
-    "attributes": {},
-    "path": ["boxShadow", "thin"],
-    "value": "inset 0 0 0 0.0625rem",
-    "type": "string",
-    "description": "Thin shadow for borders"
-  },
-  "boxShadow-thick": {
-    "filePath": "src/tokens/functional/size/border.json5",
-    "isSource": true,
-    "original": {
-      "$value": "inset 0 0 0 {borderWidth.thick}",
-      "$type": "string"
-    },
-    "name": "boxShadow-thick",
-    "attributes": {},
-    "path": ["boxShadow", "thick"],
-    "value": "inset 0 0 0 0.125rem",
-    "type": "string"
-  },
-  "boxShadow-thicker": {
-    "filePath": "src/tokens/functional/size/border.json5",
-    "isSource": true,
-    "original": {
-      "$value": "inset 0 0 0 {borderWidth.thicker}",
-      "$type": "string"
-    },
-    "name": "boxShadow-thicker",
-    "attributes": {},
-    "path": ["boxShadow", "thicker"],
-    "value": "inset 0 0 0 0.25rem",
-    "type": "string"
-  },
-  "borderWidth-default": {
-    "filePath": "src/tokens/functional/size/border.json5",
-    "isSource": true,
-    "original": {
-      "$value": "{borderWidth.thin}",
-      "$type": "dimension"
-    },
-    "name": "borderWidth-default",
-    "attributes": {},
-    "path": ["borderWidth", "default"],
-    "value": "0.0625rem",
-    "type": "dimension"
-  },
-  "borderWidth-thin": {
-    "filePath": "src/tokens/functional/size/border.json5",
-    "isSource": true,
-    "original": {
-      "$value": "1px",
-      "$type": "dimension"
-    },
-    "name": "borderWidth-thin",
-    "attributes": {},
-    "path": ["borderWidth", "thin"],
-    "value": "0.0625rem",
-    "type": "dimension"
-  },
-  "borderWidth-thick": {
-    "filePath": "src/tokens/functional/size/border.json5",
-    "isSource": true,
-    "original": {
-      "$value": "2px",
-      "$type": "dimension"
-    },
-    "name": "borderWidth-thick",
-    "attributes": {},
-    "path": ["borderWidth", "thick"],
-    "value": "0.125rem",
-    "type": "dimension"
-  },
-  "borderWidth-thicker": {
-    "filePath": "src/tokens/functional/size/border.json5",
-    "isSource": true,
-    "original": {
-      "$value": "4px",
-      "$type": "dimension"
-    },
-    "name": "borderWidth-thicker",
-    "attributes": {},
-    "path": ["borderWidth", "thicker"],
-    "value": "0.25rem",
-    "type": "dimension"
-  },
-  "borderRadius-small": {
+  "borderRadius-default": {
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
         "scopes": ["radius"],
         "codeSyntax": {
-          "web": "var(--borderRadius-small) /* utility class: .rounded-1 */"
+          "web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
         }
       }
     },
     "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
-      "$value": "3px",
+      "$value": "{borderRadius.medium}",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
           "collection": "functional/size",
           "scopes": ["radius"],
           "codeSyntax": {
-            "web": "var(--borderRadius-small) /* utility class: .rounded-1 */"
+            "web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
           }
         }
       }
     },
-    "name": "borderRadius-small",
+    "name": "borderRadius-default",
     "attributes": {},
-    "path": ["borderRadius", "small"],
-    "value": "0.1875rem",
+    "path": ["borderRadius", "default"],
+    "key": "{borderRadius.default}",
+    "value": "0.375rem",
     "type": "dimension"
   },
-  "borderRadius-medium": {
+  "borderRadius-full": {
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
         "scopes": ["radius"],
         "codeSyntax": {
-          "web": "var(--borderRadius-medium) /* utility class: .rounded-2 */"
+          "web": "var(--borderRadius-full) /* utility class: .circle */"
         }
       }
     },
     "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
-      "$value": "6px",
+      "$value": "9999px",
       "$type": "dimension",
+      "$description": "Use this border radius for pill shaped elements",
       "$extensions": {
         "org.primer.figma": {
           "collection": "functional/size",
           "scopes": ["radius"],
           "codeSyntax": {
-            "web": "var(--borderRadius-medium) /* utility class: .rounded-2 */"
+            "web": "var(--borderRadius-full) /* utility class: .circle */"
           }
         }
       }
     },
-    "name": "borderRadius-medium",
+    "name": "borderRadius-full",
     "attributes": {},
-    "path": ["borderRadius", "medium"],
-    "value": "0.375rem",
-    "type": "dimension"
+    "path": ["borderRadius", "full"],
+    "key": "{borderRadius.full}",
+    "value": "624.9375rem",
+    "type": "dimension",
+    "description": "Use this border radius for pill shaped elements"
   },
   "borderRadius-large": {
     "$extensions": {
@@ -182,73 +93,174 @@
     "name": "borderRadius-large",
     "attributes": {},
     "path": ["borderRadius", "large"],
+    "key": "{borderRadius.large}",
     "value": "0.75rem",
     "type": "dimension"
   },
-  "borderRadius-full": {
+  "borderRadius-medium": {
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
         "scopes": ["radius"],
         "codeSyntax": {
-          "web": "var(--borderRadius-full) /* utility class: .circle */"
+          "web": "var(--borderRadius-medium) /* utility class: .rounded-2 */"
         }
       }
     },
     "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
-      "$value": "9999px",
+      "$value": "6px",
       "$type": "dimension",
-      "$description": "Use this border radius for pill shaped elements",
       "$extensions": {
         "org.primer.figma": {
           "collection": "functional/size",
           "scopes": ["radius"],
           "codeSyntax": {
-            "web": "var(--borderRadius-full) /* utility class: .circle */"
+            "web": "var(--borderRadius-medium) /* utility class: .rounded-2 */"
           }
         }
       }
     },
-    "name": "borderRadius-full",
+    "name": "borderRadius-medium",
     "attributes": {},
-    "path": ["borderRadius", "full"],
-    "value": "624.9375rem",
-    "type": "dimension",
-    "description": "Use this border radius for pill shaped elements"
+    "path": ["borderRadius", "medium"],
+    "key": "{borderRadius.medium}",
+    "value": "0.375rem",
+    "type": "dimension"
   },
-  "borderRadius-default": {
+  "borderRadius-small": {
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
         "scopes": ["radius"],
         "codeSyntax": {
-          "web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
+          "web": "var(--borderRadius-small) /* utility class: .rounded-1 */"
         }
       }
     },
     "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
     "original": {
-      "$value": "{borderRadius.medium}",
+      "$value": "3px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
           "collection": "functional/size",
           "scopes": ["radius"],
           "codeSyntax": {
-            "web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
+            "web": "var(--borderRadius-small) /* utility class: .rounded-1 */"
           }
         }
       }
     },
-    "name": "borderRadius-default",
+    "name": "borderRadius-small",
     "attributes": {},
-    "path": ["borderRadius", "default"],
-    "value": "0.375rem",
+    "path": ["borderRadius", "small"],
+    "key": "{borderRadius.small}",
+    "value": "0.1875rem",
     "type": "dimension"
   },
+  "borderWidth-default": {
+    "filePath": "src/tokens/functional/size/border.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{borderWidth.thin}",
+      "$type": "dimension"
+    },
+    "name": "borderWidth-default",
+    "attributes": {},
+    "path": ["borderWidth", "default"],
+    "key": "{borderWidth.default}",
+    "value": "0.0625rem",
+    "type": "dimension"
+  },
+  "borderWidth-thick": {
+    "filePath": "src/tokens/functional/size/border.json5",
+    "isSource": true,
+    "original": {
+      "$value": "2px",
+      "$type": "dimension"
+    },
+    "name": "borderWidth-thick",
+    "attributes": {},
+    "path": ["borderWidth", "thick"],
+    "key": "{borderWidth.thick}",
+    "value": "0.125rem",
+    "type": "dimension"
+  },
+  "borderWidth-thicker": {
+    "filePath": "src/tokens/functional/size/border.json5",
+    "isSource": true,
+    "original": {
+      "$value": "4px",
+      "$type": "dimension"
+    },
+    "name": "borderWidth-thicker",
+    "attributes": {},
+    "path": ["borderWidth", "thicker"],
+    "key": "{borderWidth.thicker}",
+    "value": "0.25rem",
+    "type": "dimension"
+  },
+  "borderWidth-thin": {
+    "filePath": "src/tokens/functional/size/border.json5",
+    "isSource": true,
+    "original": {
+      "$value": "1px",
+      "$type": "dimension"
+    },
+    "name": "borderWidth-thin",
+    "attributes": {},
+    "path": ["borderWidth", "thin"],
+    "key": "{borderWidth.thin}",
+    "value": "0.0625rem",
+    "type": "dimension"
+  },
+  "boxShadow-thick": {
+    "filePath": "src/tokens/functional/size/border.json5",
+    "isSource": true,
+    "original": {
+      "$value": "inset 0 0 0 {borderWidth.thick}",
+      "$type": "string"
+    },
+    "name": "boxShadow-thick",
+    "attributes": {},
+    "path": ["boxShadow", "thick"],
+    "key": "{boxShadow.thick}",
+    "value": "inset 0 0 0 0.125rem",
+    "type": "string"
+  },
+  "boxShadow-thicker": {
+    "filePath": "src/tokens/functional/size/border.json5",
+    "isSource": true,
+    "original": {
+      "$value": "inset 0 0 0 {borderWidth.thicker}",
+      "$type": "string"
+    },
+    "name": "boxShadow-thicker",
+    "attributes": {},
+    "path": ["boxShadow", "thicker"],
+    "key": "{boxShadow.thicker}",
+    "value": "inset 0 0 0 0.25rem",
+    "type": "string"
+  },
+  "boxShadow-thin": {
+    "filePath": "src/tokens/functional/size/border.json5",
+    "isSource": true,
+    "original": {
+      "$value": "inset 0 0 0 {borderWidth.thin}",
+      "$description": "Thin shadow for borders",
+      "$type": "string"
+    },
+    "name": "boxShadow-thin",
+    "attributes": {},
+    "path": ["boxShadow", "thin"],
+    "key": "{boxShadow.thin}",
+    "value": "inset 0 0 0 0.0625rem",
+    "type": "string",
+    "description": "Thin shadow for borders"
+  },
   "outline-focus-offset": {
     "filePath": "src/tokens/functional/size/border.json5",
     "isSource": true,
@@ -259,6 +271,7 @@
     "name": "outline-focus-offset",
     "attributes": {},
     "path": ["outline", "focus", "offset"],
+    "key": "{outline.focus.offset}",
     "value": "-0.125rem",
     "type": "dimension"
   },
@@ -272,6 +285,7 @@
     "name": "outline-focus-width",
     "attributes": {},
     "path": ["outline", "focus", "width"],
+    "key": "{outline.focus.width}",
     "value": "0.125rem",
     "type": "dimension"
   }

package/dist/docs/functional/size/breakpoints.json

@@ -1,5 +1,5 @@
 {
-  "breakpoint-xsmall": {
+  "breakpoint-large": {
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
@@ -9,7 +9,7 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "320px",
+      "$value": "1012px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -18,13 +18,14 @@
         }
       }
     },
-    "name": "breakpoint-xsmall",
+    "name": "breakpoint-large",
     "attributes": {},
-    "path": ["breakpoint", "xsmall"],
-    "value": "20rem",
+    "path": ["breakpoint", "large"],
+    "key": "{breakpoint.large}",
+    "value": "63.25rem",
     "type": "dimension"
   },
-  "breakpoint-small": {
+  "breakpoint-medium": {
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
@@ -34,7 +35,7 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "544px",
+      "$value": "768px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -43,13 +44,14 @@
         }
       }
     },
-    "name": "breakpoint-small",
+    "name": "breakpoint-medium",
     "attributes": {},
-    "path": ["breakpoint", "small"],
-    "value": "34rem",
+    "path": ["breakpoint", "medium"],
+    "key": "{breakpoint.medium}",
+    "value": "48rem",
     "type": "dimension"
   },
-  "breakpoint-medium": {
+  "breakpoint-small": {
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
@@ -59,7 +61,7 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "768px",
+      "$value": "544px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -68,13 +70,14 @@
         }
       }
     },
-    "name": "breakpoint-medium",
+    "name": "breakpoint-small",
     "attributes": {},
-    "path": ["breakpoint", "medium"],
-    "value": "48rem",
+    "path": ["breakpoint", "small"],
+    "key": "{breakpoint.small}",
+    "value": "34rem",
     "type": "dimension"
   },
-  "breakpoint-large": {
+  "breakpoint-xlarge": {
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
@@ -84,7 +87,7 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "1012px",
+      "$value": "1280px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -93,13 +96,14 @@
         }
       }
     },
-    "name": "breakpoint-large",
+    "name": "breakpoint-xlarge",
     "attributes": {},
-    "path": ["breakpoint", "large"],
-    "value": "63.25rem",
+    "path": ["breakpoint", "xlarge"],
+    "key": "{breakpoint.xlarge}",
+    "value": "80rem",
     "type": "dimension"
   },
-  "breakpoint-xlarge": {
+  "breakpoint-xsmall": {
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
@@ -109,7 +113,7 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "1280px",
+      "$value": "320px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -118,10 +122,11 @@
         }
       }
     },
-    "name": "breakpoint-xlarge",
+    "name": "breakpoint-xsmall",
     "attributes": {},
-    "path": ["breakpoint", "xlarge"],
-    "value": "80rem",
+    "path": ["breakpoint", "xsmall"],
+    "key": "{breakpoint.xsmall}",
+    "value": "20rem",
     "type": "dimension"
   },
   "breakpoint-xxlarge": {
@@ -146,6 +151,7 @@
     "name": "breakpoint-xxlarge",
     "attributes": {},
     "path": ["breakpoint", "xxlarge"],
+    "key": "{breakpoint.xxlarge}",
     "value": "87.5rem",
     "type": "dimension"
   }

package/dist/docs/functional/size/size-coarse.json

@@ -9,33 +9,36 @@
     "name": "control-minTarget-auto",
     "attributes": {},
     "path": ["control", "minTarget", "auto"],
+    "key": "{control.minTarget.auto}",
     "value": "2.75rem",
     "type": "dimension"
   },
-  "controlStack-small-gap-auto": {
+  "controlStack-medium-gap-auto": {
     "filePath": "src/tokens/functional/size/size-coarse.json5",
     "isSource": true,
     "original": {
-      "$value": "{base.size.16}",
+      "$value": "{base.size.12}",
       "$type": "dimension"
     },
-    "name": "controlStack-small-gap-auto",
+    "name": "controlStack-medium-gap-auto",
     "attributes": {},
-    "path": ["controlStack", "small", "gap", "auto"],
-    "value": "1rem",
+    "path": ["controlStack", "medium", "gap", "auto"],
+    "key": "{controlStack.medium.gap.auto}",
+    "value": "0.75rem",
     "type": "dimension"
   },
-  "controlStack-medium-gap-auto": {
+  "controlStack-small-gap-auto": {
     "filePath": "src/tokens/functional/size/size-coarse.json5",
     "isSource": true,
     "original": {
-      "$value": "{base.size.12}",
+      "$value": "{base.size.16}",
       "$type": "dimension"
     },
-    "name": "controlStack-medium-gap-auto",
+    "name": "controlStack-small-gap-auto",
     "attributes": {},
-    "path": ["controlStack", "medium", "gap", "auto"],
-    "value": "0.75rem",
+    "path": ["controlStack", "small", "gap", "auto"],
+    "key": "{controlStack.small.gap.auto}",
+    "value": "1rem",
     "type": "dimension"
   }
 }

package/dist/docs/functional/size/size-fine.json

@@ -9,32 +9,35 @@
     "name": "control-minTarget-auto",
     "attributes": {},
     "path": ["control", "minTarget", "auto"],
+    "key": "{control.minTarget.auto}",
     "value": "1rem",
     "type": "dimension"
   },
-  "controlStack-small-gap-auto": {
+  "controlStack-medium-gap-auto": {
     "filePath": "src/tokens/functional/size/size-fine.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.8}",
       "$type": "dimension"
     },
-    "name": "controlStack-small-gap-auto",
+    "name": "controlStack-medium-gap-auto",
     "attributes": {},
-    "path": ["controlStack", "small", "gap", "auto"],
+    "path": ["controlStack", "medium", "gap", "auto"],
+    "key": "{controlStack.medium.gap.auto}",
     "value": "0.5rem",
     "type": "dimension"
   },
-  "controlStack-medium-gap-auto": {
+  "controlStack-small-gap-auto": {
     "filePath": "src/tokens/functional/size/size-fine.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.8}",
       "$type": "dimension"
     },
-    "name": "controlStack-medium-gap-auto",
+    "name": "controlStack-small-gap-auto",
     "attributes": {},
-    "path": ["controlStack", "medium", "gap", "auto"],
+    "path": ["controlStack", "small", "gap", "auto"],
+    "key": "{controlStack.small.gap.auto}",
     "value": "0.5rem",
     "type": "dimension"
   }