@primer/primitives 10.2.0 → 10.3.0-rc.22c9c6cf

package/dist/styleLint/base/typography/typography.json

@@ -22,10 +22,11 @@
     },
     "name": "base-text-weight-light",
     "attributes": {},
-    "path": ["base", "text", "weight", "light"]
+    "path": ["base", "text", "weight", "light"],
+    "key": "{base.text.weight.light}"
   },
-  "base-text-weight-normal": {
-    "$value": 400,
+  "base-text-weight-medium": {
+    "$value": 500,
     "$type": "fontWeight",
     "$extensions": {
       "org.primer.figma": {
@@ -36,7 +37,7 @@
     "filePath": "src/tokens/base/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": 400,
+      "$value": 500,
       "$type": "fontWeight",
       "$extensions": {
         "org.primer.figma": {
@@ -45,12 +46,13 @@
         }
       }
     },
-    "name": "base-text-weight-normal",
+    "name": "base-text-weight-medium",
     "attributes": {},
-    "path": ["base", "text", "weight", "normal"]
+    "path": ["base", "text", "weight", "medium"],
+    "key": "{base.text.weight.medium}"
   },
-  "base-text-weight-medium": {
-    "$value": 500,
+  "base-text-weight-normal": {
+    "$value": 400,
     "$type": "fontWeight",
     "$extensions": {
       "org.primer.figma": {
@@ -61,7 +63,7 @@
     "filePath": "src/tokens/base/typography/typography.json5",
     "isSource": true,
     "original": {
-      "$value": 500,
+      "$value": 400,
       "$type": "fontWeight",
       "$extensions": {
         "org.primer.figma": {
@@ -70,9 +72,10 @@
         }
       }
     },
-    "name": "base-text-weight-medium",
+    "name": "base-text-weight-normal",
     "attributes": {},
-    "path": ["base", "text", "weight", "medium"]
+    "path": ["base", "text", "weight", "normal"],
+    "key": "{base.text.weight.normal}"
   },
   "base-text-weight-semibold": {
     "$value": 600,
@@ -97,6 +100,7 @@
     },
     "name": "base-text-weight-semibold",
     "attributes": {},
-    "path": ["base", "text", "weight", "semibold"]
+    "path": ["base", "text", "weight", "semibold"],
+    "key": "{base.text.weight.semibold}"
   }
 }

package/dist/styleLint/functional/motion/motion.json

@@ -12,7 +12,24 @@
     },
     "name": "motion-loading-delay-default",
     "attributes": {},
-    "path": ["motion", "loading", "delay", "default"]
+    "path": ["motion", "loading", "delay", "default"],
+    "key": "{motion.loading.delay.default}"
+  },
+  "motion-skeletonLoader-shimmer-duration-scale": {
+    "$value": "1000ms",
+    "$type": "duration",
+    "$description": "The amount of times it takes the \"shimmer\" effect to go from the start (left) of the skeleton loader to the end (right)",
+    "filePath": "src/tokens/functional/motion/patterns.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{base.duration.1000}",
+      "$type": "duration",
+      "$description": "The amount of times it takes the \"shimmer\" effect to go from the start (left) of the skeleton loader to the end (right)"
+    },
+    "name": "motion-skeletonLoader-shimmer-duration-scale",
+    "attributes": {},
+    "path": ["motion", "skeletonLoader", "shimmer", "duration", "scale"],
+    "key": "{motion.skeletonLoader.shimmer.duration.scale}"
   },
   "motion-spinner-duration-rotation": {
     "$value": "1000ms",
@@ -27,7 +44,8 @@
     },
     "name": "motion-spinner-duration-rotation",
     "attributes": {},
-    "path": ["motion", "spinner", "duration", "rotation"]
+    "path": ["motion", "spinner", "duration", "rotation"],
+    "key": "{motion.spinner.duration.rotation}"
   },
   "motion-spinner-easing-rotation": {
     "$value": [0, 0, 1, 1],
@@ -42,21 +60,7 @@
     },
     "name": "motion-spinner-easing-rotation",
     "attributes": {},
-    "path": ["motion", "spinner", "easing", "rotation"]
-  },
-  "motion-skeletonLoader-shimmer-duration-scale": {
-    "$value": "1000ms",
-    "$type": "duration",
-    "$description": "The amount of times it takes the \"shimmer\" effect to go from the start (left) of the skeleton loader to the end (right)",
-    "filePath": "src/tokens/functional/motion/patterns.json5",
-    "isSource": true,
-    "original": {
-      "$value": "{base.duration.1000}",
-      "$type": "duration",
-      "$description": "The amount of times it takes the \"shimmer\" effect to go from the start (left) of the skeleton loader to the end (right)"
-    },
-    "name": "motion-skeletonLoader-shimmer-duration-scale",
-    "attributes": {},
-    "path": ["motion", "skeletonLoader", "shimmer", "duration", "scale"]
+    "path": ["motion", "spinner", "easing", "rotation"],
+    "key": "{motion.spinner.easing.rotation}"
   }
 }

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

@@ -1,158 +1,69 @@
 {
-  "boxShadow-thin": {
-    "$value": ["0.0625rem", "1px"],
-    "$description": "Thin shadow for borders",
-    "$type": "string",
-    "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"]
-  },
-  "boxShadow-thick": {
-    "$value": ["0.125rem", "2px"],
-    "$type": "string",
-    "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"]
-  },
-  "boxShadow-thicker": {
-    "$value": ["0.25rem", "4px"],
-    "$type": "string",
-    "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"]
-  },
-  "borderWidth-default": {
-    "$value": ["0.00390625rem", "0.0625px"],
-    "$type": "dimension",
-    "filePath": "src/tokens/functional/size/border.json5",
-    "isSource": true,
-    "original": {
-      "$value": "{borderWidth.thin}",
-      "$type": "dimension"
-    },
-    "name": "borderWidth-default",
-    "attributes": {},
-    "path": ["borderWidth", "default"]
-  },
-  "borderWidth-thin": {
-    "$value": ["0.0625rem", "1px"],
-    "$type": "dimension",
-    "filePath": "src/tokens/functional/size/border.json5",
-    "isSource": true,
-    "original": {
-      "$value": "1px",
-      "$type": "dimension"
-    },
-    "name": "borderWidth-thin",
-    "attributes": {},
-    "path": ["borderWidth", "thin"]
-  },
-  "borderWidth-thick": {
-    "$value": ["0.125rem", "2px"],
-    "$type": "dimension",
-    "filePath": "src/tokens/functional/size/border.json5",
-    "isSource": true,
-    "original": {
-      "$value": "2px",
-      "$type": "dimension"
-    },
-    "name": "borderWidth-thick",
-    "attributes": {},
-    "path": ["borderWidth", "thick"]
-  },
-  "borderWidth-thicker": {
-    "$value": ["0.25rem", "4px"],
-    "$type": "dimension",
-    "filePath": "src/tokens/functional/size/border.json5",
-    "isSource": true,
-    "original": {
-      "$value": "4px",
-      "$type": "dimension"
-    },
-    "name": "borderWidth-thicker",
-    "attributes": {},
-    "path": ["borderWidth", "thicker"]
-  },
-  "borderRadius-small": {
-    "$value": ["0.1875rem", "3px"],
+  "borderRadius-default": {
+    "$value": ["0.0234375rem", "0.375px"],
     "$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 */"
         }
       }
     },
     "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"]
+    "path": ["borderRadius", "default"],
+    "key": "{borderRadius.default}"
   },
-  "borderRadius-medium": {
-    "$value": ["0.375rem", "6px"],
+  "borderRadius-full": {
+    "$value": ["624.9375rem", "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 */"
         }
       }
     },
     "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"]
+    "path": ["borderRadius", "full"],
+    "key": "{borderRadius.full}"
   },
   "borderRadius-large": {
     "$value": ["0.75rem", "12px"],
@@ -183,71 +94,172 @@
     },
     "name": "borderRadius-large",
     "attributes": {},
-    "path": ["borderRadius", "large"]
+    "path": ["borderRadius", "large"],
+    "key": "{borderRadius.large}"
   },
-  "borderRadius-full": {
-    "$value": ["624.9375rem", "9999px"],
+  "borderRadius-medium": {
+    "$value": ["0.375rem", "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 */"
         }
       }
     },
     "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"]
+    "path": ["borderRadius", "medium"],
+    "key": "{borderRadius.medium}"
   },
-  "borderRadius-default": {
-    "$value": ["0.0234375rem", "0.375px"],
+  "borderRadius-small": {
+    "$value": ["0.1875rem", "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 */"
         }
       }
     },
     "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", "small"],
+    "key": "{borderRadius.small}"
+  },
+  "borderWidth-default": {
+    "$value": ["0.00390625rem", "0.0625px"],
+    "$type": "dimension",
+    "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}"
+  },
+  "borderWidth-thick": {
+    "$value": ["0.125rem", "2px"],
+    "$type": "dimension",
+    "filePath": "src/tokens/functional/size/border.json5",
+    "isSource": true,
+    "original": {
+      "$value": "2px",
+      "$type": "dimension"
+    },
+    "name": "borderWidth-thick",
+    "attributes": {},
+    "path": ["borderWidth", "thick"],
+    "key": "{borderWidth.thick}"
+  },
+  "borderWidth-thicker": {
+    "$value": ["0.25rem", "4px"],
+    "$type": "dimension",
+    "filePath": "src/tokens/functional/size/border.json5",
+    "isSource": true,
+    "original": {
+      "$value": "4px",
+      "$type": "dimension"
+    },
+    "name": "borderWidth-thicker",
+    "attributes": {},
+    "path": ["borderWidth", "thicker"],
+    "key": "{borderWidth.thicker}"
+  },
+  "borderWidth-thin": {
+    "$value": ["0.0625rem", "1px"],
+    "$type": "dimension",
+    "filePath": "src/tokens/functional/size/border.json5",
+    "isSource": true,
+    "original": {
+      "$value": "1px",
+      "$type": "dimension"
+    },
+    "name": "borderWidth-thin",
+    "attributes": {},
+    "path": ["borderWidth", "thin"],
+    "key": "{borderWidth.thin}"
+  },
+  "boxShadow-thick": {
+    "$value": ["0.125rem", "2px"],
+    "$type": "string",
+    "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}"
+  },
+  "boxShadow-thicker": {
+    "$value": ["0.25rem", "4px"],
+    "$type": "string",
+    "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}"
+  },
+  "boxShadow-thin": {
+    "$value": ["0.0625rem", "1px"],
+    "$description": "Thin shadow for borders",
+    "$type": "string",
+    "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": ["borderRadius", "default"]
+    "path": ["boxShadow", "thin"],
+    "key": "{boxShadow.thin}"
   },
   "outline-focus-offset": {
     "$value": ["-0.125rem", "-2px"],
@@ -260,7 +272,8 @@
     },
     "name": "outline-focus-offset",
     "attributes": {},
-    "path": ["outline", "focus", "offset"]
+    "path": ["outline", "focus", "offset"],
+    "key": "{outline.focus.offset}"
   },
   "outline-focus-width": {
     "$value": ["0.125rem", "2px"],
@@ -273,6 +286,7 @@
     },
     "name": "outline-focus-width",
     "attributes": {},
-    "path": ["outline", "focus", "width"]
+    "path": ["outline", "focus", "width"],
+    "key": "{outline.focus.width}"
   }
 }

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

@@ -1,6 +1,6 @@
 {
-  "breakpoint-xsmall": {
-    "$value": ["20rem", "320px"],
+  "breakpoint-large": {
+    "$value": ["63.25rem", "1012px"],
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -11,7 +11,7 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "320px",
+      "$value": "1012px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -20,12 +20,13 @@
         }
       }
     },
-    "name": "breakpoint-xsmall",
+    "name": "breakpoint-large",
     "attributes": {},
-    "path": ["breakpoint", "xsmall"]
+    "path": ["breakpoint", "large"],
+    "key": "{breakpoint.large}"
   },
-  "breakpoint-small": {
-    "$value": ["34rem", "544px"],
+  "breakpoint-medium": {
+    "$value": ["48rem", "768px"],
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -36,7 +37,7 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "544px",
+      "$value": "768px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -45,12 +46,13 @@
         }
       }
     },
-    "name": "breakpoint-small",
+    "name": "breakpoint-medium",
     "attributes": {},
-    "path": ["breakpoint", "small"]
+    "path": ["breakpoint", "medium"],
+    "key": "{breakpoint.medium}"
   },
-  "breakpoint-medium": {
-    "$value": ["48rem", "768px"],
+  "breakpoint-small": {
+    "$value": ["34rem", "544px"],
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -61,7 +63,7 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "768px",
+      "$value": "544px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -70,12 +72,13 @@
         }
       }
     },
-    "name": "breakpoint-medium",
+    "name": "breakpoint-small",
     "attributes": {},
-    "path": ["breakpoint", "medium"]
+    "path": ["breakpoint", "small"],
+    "key": "{breakpoint.small}"
   },
-  "breakpoint-large": {
-    "$value": ["63.25rem", "1012px"],
+  "breakpoint-xlarge": {
+    "$value": ["80rem", "1280px"],
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -86,7 +89,7 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "1012px",
+      "$value": "1280px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -95,12 +98,13 @@
         }
       }
     },
-    "name": "breakpoint-large",
+    "name": "breakpoint-xlarge",
     "attributes": {},
-    "path": ["breakpoint", "large"]
+    "path": ["breakpoint", "xlarge"],
+    "key": "{breakpoint.xlarge}"
   },
-  "breakpoint-xlarge": {
-    "$value": ["80rem", "1280px"],
+  "breakpoint-xsmall": {
+    "$value": ["20rem", "320px"],
     "$type": "dimension",
     "$extensions": {
       "org.primer.figma": {
@@ -111,7 +115,7 @@
     "filePath": "src/tokens/functional/size/breakpoints.json5",
     "isSource": true,
     "original": {
-      "$value": "1280px",
+      "$value": "320px",
       "$type": "dimension",
       "$extensions": {
         "org.primer.figma": {
@@ -120,9 +124,10 @@
         }
       }
     },
-    "name": "breakpoint-xlarge",
+    "name": "breakpoint-xsmall",
     "attributes": {},
-    "path": ["breakpoint", "xlarge"]
+    "path": ["breakpoint", "xsmall"],
+    "key": "{breakpoint.xsmall}"
   },
   "breakpoint-xxlarge": {
     "$value": ["87.5rem", "1400px"],
@@ -147,6 +152,7 @@
     },
     "name": "breakpoint-xxlarge",
     "attributes": {},
-    "path": ["breakpoint", "xxlarge"]
+    "path": ["breakpoint", "xxlarge"],
+    "key": "{breakpoint.xxlarge}"
   }
 }