@primer/primitives 11.4.0-rc.f798df25 → 11.4.1-rc.4e2d1de5

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

@@ -0,0 +1,221 @@
+{
+  "borderRadius-default": {
+    "key": "{borderRadius.default}",
+    "$value": ["0.375rem", "6px"],
+    "$description": "Default border radius for most UI elements. Alias of borderRadius.medium (6px). Use when in doubt",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["radius"],
+        "codeSyntax": {
+          "web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
+        }
+      }
+    },
+    "filePath": "src/tokens/functional/size/radius.json5",
+    "isSource": true,
+    "original": {
+      "$value": "{borderRadius.medium}",
+      "$description": "Default border radius for most UI elements. Alias of borderRadius.medium (6px). Use when in doubt",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["radius"],
+          "codeSyntax": {
+            "web": "var(--borderRadius-default) /* utility class: .rounded-2 */"
+          }
+        }
+      },
+      "key": "{borderRadius.default}"
+    },
+    "name": "borderRadius-default",
+    "attributes": {},
+    "path": ["borderRadius", "default"]
+  },
+  "borderRadius-full": {
+    "key": "{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-full) /* utility class: .circle */"
+        }
+      },
+      "org.primer.llm": {
+        "usage": ["avatar", "pill-badge", "circular-button"],
+        "rules": "Use for avatars and pill-shaped elements. Do NOT use for rectangular containers."
+      }
+    },
+    "filePath": "src/tokens/functional/size/radius.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": 9999,
+        "unit": "px"
+      },
+      "$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 */"
+          }
+        },
+        "org.primer.llm": {
+          "usage": ["avatar", "pill-badge", "circular-button"],
+          "rules": "Use for avatars and pill-shaped elements. Do NOT use for rectangular containers."
+        }
+      },
+      "key": "{borderRadius.full}"
+    },
+    "name": "borderRadius-full",
+    "attributes": {},
+    "path": ["borderRadius", "full"]
+  },
+  "borderRadius-large": {
+    "key": "{borderRadius.large}",
+    "$value": ["0.75rem", "12px"],
+    "$description": "Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired. Always use this for buttons.",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["radius"],
+        "codeSyntax": {
+          "web": "var(--borderRadius-large) /* utility class: .rounded-3 */"
+        }
+      },
+      "org.primer.llm": {
+        "usage": ["dialog", "card", "modal"],
+        "rules": "Recommended for dialogs and modals."
+      }
+    },
+    "filePath": "src/tokens/functional/size/radius.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": 12,
+        "unit": "px"
+      },
+      "$description": "Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired. Always use this for buttons.",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["radius"],
+          "codeSyntax": {
+            "web": "var(--borderRadius-large) /* utility class: .rounded-3 */"
+          }
+        },
+        "org.primer.llm": {
+          "usage": ["dialog", "card", "modal"],
+          "rules": "Recommended for dialogs and modals."
+        }
+      },
+      "key": "{borderRadius.large}"
+    },
+    "name": "borderRadius-large",
+    "attributes": {},
+    "path": ["borderRadius", "large"]
+  },
+  "borderRadius-medium": {
+    "key": "{borderRadius.medium}",
+    "$value": ["0.375rem", "6px"],
+    "$description": "Medium border radius (6px). The default choice for most buttons, cards, and containers",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["radius"],
+        "codeSyntax": {
+          "web": "var(--borderRadius-medium) /* utility class: .rounded-2 */"
+        }
+      },
+      "org.primer.llm": {
+        "usage": ["button", "input", "textarea", "select", "card", "container"],
+        "rules": "Default choice for most components. Use for inputs, cards, and general containers."
+      }
+    },
+    "filePath": "src/tokens/functional/size/radius.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": 6,
+        "unit": "px"
+      },
+      "$description": "Medium border radius (6px). The default choice for most buttons, cards, and containers",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["radius"],
+          "codeSyntax": {
+            "web": "var(--borderRadius-medium) /* utility class: .rounded-2 */"
+          }
+        },
+        "org.primer.llm": {
+          "usage": ["button", "input", "textarea", "select", "card", "container"],
+          "rules": "Default choice for most components. Use for inputs, cards, and general containers."
+        }
+      },
+      "key": "{borderRadius.medium}"
+    },
+    "name": "borderRadius-medium",
+    "attributes": {},
+    "path": ["borderRadius", "medium"]
+  },
+  "borderRadius-small": {
+    "key": "{borderRadius.small}",
+    "$value": ["0.1875rem", "3px"],
+    "$description": "Small border radius (3px). Use for small variants of components or small UI elements like badges, tags, or anything below 16px in height",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "functional/size",
+        "scopes": ["radius"],
+        "codeSyntax": {
+          "web": "var(--borderRadius-small) /* utility class: .rounded-1 */"
+        }
+      },
+      "org.primer.llm": {
+        "usage": ["badge", "tag", "label", "small-input"],
+        "rules": "Use for small UI elements under 16px height. Do NOT use for buttons or cards."
+      }
+    },
+    "filePath": "src/tokens/functional/size/radius.json5",
+    "isSource": true,
+    "original": {
+      "$value": {
+        "value": 3,
+        "unit": "px"
+      },
+      "$description": "Small border radius (3px). Use for small variants of components or small UI elements like badges, tags, or anything below 16px in height",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "functional/size",
+          "scopes": ["radius"],
+          "codeSyntax": {
+            "web": "var(--borderRadius-small) /* utility class: .rounded-1 */"
+          }
+        },
+        "org.primer.llm": {
+          "usage": ["badge", "tag", "label", "small-input"],
+          "rules": "Use for small UI elements under 16px height. Do NOT use for buttons or cards."
+        }
+      },
+      "key": "{borderRadius.small}"
+    },
+    "name": "borderRadius-small",
+    "attributes": {},
+    "path": ["borderRadius", "small"]
+  }
+}

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

@@ -1,13 +1,27 @@
 {
   "control-minTarget-auto": {
     "key": "{control.minTarget.auto}",
-    "$value": ["0.171875rem", "2.75px"],
+    "$value": ["2.75rem", "44px"],
     "$type": "dimension",
+    "$description": "Minimum touch target size for coarse pointer devices (touch screens)",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["touch-target", "mobile-button", "tap-area"],
+        "rules": "Use as minimum size for interactive elements on touch devices. Ensures WCAG 2.5.5 compliance (44x44px minimum). Do NOT use for fine pointer (mouse) contexts."
+      }
+    },
     "filePath": "src/tokens/functional/size/size-coarse.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.44}",
       "$type": "dimension",
+      "$description": "Minimum touch target size for coarse pointer devices (touch screens)",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["touch-target", "mobile-button", "tap-area"],
+          "rules": "Use as minimum size for interactive elements on touch devices. Ensures WCAG 2.5.5 compliance (44x44px minimum). Do NOT use for fine pointer (mouse) contexts."
+        }
+      },
       "key": "{control.minTarget.auto}"
     },
     "name": "control-minTarget-auto",
@@ -16,13 +30,27 @@
   },
   "controlStack-medium-gap-auto": {
     "key": "{controlStack.medium.gap.auto}",
-    "$value": ["0.046875rem", "0.75px"],
+    "$value": ["0.75rem", "12px"],
     "$type": "dimension",
+    "$description": "Gap between stacked controls in medium density layouts for touch devices",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["touch-control-spacing", "mobile-form-gap", "stacked-buttons"],
+        "rules": "Use for spacing between interactive controls on touch devices in standard layouts. Do NOT use for desktop/mouse interfaces."
+      }
+    },
     "filePath": "src/tokens/functional/size/size-coarse.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.12}",
       "$type": "dimension",
+      "$description": "Gap between stacked controls in medium density layouts for touch devices",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["touch-control-spacing", "mobile-form-gap", "stacked-buttons"],
+          "rules": "Use for spacing between interactive controls on touch devices in standard layouts. Do NOT use for desktop/mouse interfaces."
+        }
+      },
       "key": "{controlStack.medium.gap.auto}"
     },
     "name": "controlStack-medium-gap-auto",
@@ -31,13 +59,27 @@
   },
   "controlStack-small-gap-auto": {
     "key": "{controlStack.small.gap.auto}",
-    "$value": ["0.0625rem", "1px"],
+    "$value": ["1rem", "16px"],
     "$type": "dimension",
+    "$description": "Gap between stacked controls in small density layouts for touch devices",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["touch-control-spacing", "mobile-form-gap", "stacked-buttons"],
+        "rules": "Use for spacing between interactive controls on touch devices in compact layouts. Provides adequate touch separation. Do NOT use for desktop/mouse interfaces."
+      }
+    },
     "filePath": "src/tokens/functional/size/size-coarse.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.16}",
       "$type": "dimension",
+      "$description": "Gap between stacked controls in small density layouts for touch devices",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["touch-control-spacing", "mobile-form-gap", "stacked-buttons"],
+          "rules": "Use for spacing between interactive controls on touch devices in compact layouts. Provides adequate touch separation. Do NOT use for desktop/mouse interfaces."
+        }
+      },
       "key": "{controlStack.small.gap.auto}"
     },
     "name": "controlStack-small-gap-auto",

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

@@ -1,13 +1,27 @@
 {
   "control-minTarget-auto": {
     "key": "{control.minTarget.auto}",
-    "$value": ["0.0625rem", "1px"],
+    "$value": ["1rem", "16px"],
     "$type": "dimension",
+    "$description": "Minimum target size for fine pointer devices (mouse)",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["mouse-target", "desktop-button", "click-area"],
+        "rules": "Use as minimum size for interactive elements on desktop/mouse interfaces. Smaller than touch targets for denser layouts. Do NOT use for touch/mobile contexts."
+      }
+    },
     "filePath": "src/tokens/functional/size/size-fine.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.16}",
       "$type": "dimension",
+      "$description": "Minimum target size for fine pointer devices (mouse)",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["mouse-target", "desktop-button", "click-area"],
+          "rules": "Use as minimum size for interactive elements on desktop/mouse interfaces. Smaller than touch targets for denser layouts. Do NOT use for touch/mobile contexts."
+        }
+      },
       "key": "{control.minTarget.auto}"
     },
     "name": "control-minTarget-auto",
@@ -16,13 +30,27 @@
   },
   "controlStack-medium-gap-auto": {
     "key": "{controlStack.medium.gap.auto}",
-    "$value": ["0.03125rem", "0.5px"],
+    "$value": ["0.5rem", "8px"],
     "$type": "dimension",
+    "$description": "Gap between stacked controls in medium density layouts for mouse interfaces",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["desktop-control-spacing", "form-gap", "stacked-buttons"],
+        "rules": "Use for spacing between interactive controls on desktop in standard layouts. Do NOT use for mobile/touch interfaces."
+      }
+    },
     "filePath": "src/tokens/functional/size/size-fine.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.8}",
       "$type": "dimension",
+      "$description": "Gap between stacked controls in medium density layouts for mouse interfaces",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["desktop-control-spacing", "form-gap", "stacked-buttons"],
+          "rules": "Use for spacing between interactive controls on desktop in standard layouts. Do NOT use for mobile/touch interfaces."
+        }
+      },
       "key": "{controlStack.medium.gap.auto}"
     },
     "name": "controlStack-medium-gap-auto",
@@ -31,13 +59,27 @@
   },
   "controlStack-small-gap-auto": {
     "key": "{controlStack.small.gap.auto}",
-    "$value": ["0.03125rem", "0.5px"],
+    "$value": ["0.5rem", "8px"],
     "$type": "dimension",
+    "$description": "Gap between stacked controls in small density layouts for mouse interfaces",
+    "$extensions": {
+      "org.primer.llm": {
+        "usage": ["desktop-control-spacing", "form-gap", "stacked-buttons"],
+        "rules": "Use for spacing between interactive controls on desktop in compact layouts. Tighter spacing than touch devices. Do NOT use for mobile/touch interfaces."
+      }
+    },
     "filePath": "src/tokens/functional/size/size-fine.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.8}",
       "$type": "dimension",
+      "$description": "Gap between stacked controls in small density layouts for mouse interfaces",
+      "$extensions": {
+        "org.primer.llm": {
+          "usage": ["desktop-control-spacing", "form-gap", "stacked-buttons"],
+          "rules": "Use for spacing between interactive controls on desktop in compact layouts. Tighter spacing than touch devices. Do NOT use for mobile/touch interfaces."
+        }
+      },
       "key": "{controlStack.small.gap.auto}"
     },
     "name": "controlStack-small-gap-auto",