@primer/primitives 11.4.0 → 11.4.1-rc.24c79953

package/dist/docs/functional/themes/light-colorblind.json

@@ -176,10 +176,22 @@
             {
               "color": "#f6f8fa",
               "alpha": 1,
-              "offsetX": "0px",
-              "offsetY": "0px",
-              "blur": "0px",
-              "spread": "2px"
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 2,
+                "unit": "px"
+              }
             }
           ],
           "filePath": "src/tokens/component/avatar.json5",
@@ -195,10 +207,22 @@
         {
           "color": "{base.color.neutral.0}",
           "alpha": 0.8,
-          "offsetX": "0px",
-          "offsetY": "0px",
-          "blur": "0px",
-          "spread": "2px"
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 0,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 0,
+            "unit": "px"
+          },
+          "spread": {
+            "value": 2,
+            "unit": "px"
+          }
         }
       ],
       "$type": "shadow",
@@ -213,10 +237,22 @@
               {
                 "color": "{base.color.neutral.1}",
                 "alpha": 1,
-                "offsetX": "0px",
-                "offsetY": "0px",
-                "blur": "0px",
-                "spread": "2px"
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 2,
+                  "unit": "px"
+                }
               }
             ],
             "filePath": "src/tokens/component/avatar.json5",
@@ -230,7 +266,7 @@
     "name": "avatar-shadow",
     "attributes": {},
     "path": ["avatar", "shadow"],
-    "value": "0px 0px 0px 2px #ffffffcc",
+    "value": "0 0 0 2px #ffffffcc",
     "type": "shadow"
   },
   "avatarStack-fade-bgColor-default": {
@@ -543,6 +579,10 @@
       },
       "org.primer.overrides": {
         "dark": "#ffffff"
+      },
+      "org.primer.llm": {
+        "doNotUse": true,
+        "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
       }
     },
     "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -559,6 +599,10 @@
         },
         "org.primer.overrides": {
           "dark": "{base.color.neutral.0}"
+        },
+        "org.primer.llm": {
+          "doNotUse": true,
+          "rules": "Avoid using raw black. Use semantic alternatives: bgColor.emphasis for dark backgrounds, bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
         }
       },
       "key": "{bgColor.black}"
@@ -2435,6 +2479,10 @@
       },
       "org.primer.overrides": {
         "dark": "#1f2328"
+      },
+      "org.primer.llm": {
+        "doNotUse": true,
+        "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
       }
     },
     "filePath": "src/tokens/functional/color/bgColor.json5",
@@ -2451,6 +2499,10 @@
         },
         "org.primer.overrides": {
           "dark": "{base.color.neutral.13}"
+        },
+        "org.primer.llm": {
+          "doNotUse": true,
+          "rules": "Avoid using raw white. Use semantic alternatives: bgColor.default for standard backgrounds, bgColor.inset for recessed areas, or bgColor.inverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
         }
       },
       "key": "{bgColor.white}"
@@ -6945,10 +6997,22 @@
             {
               "color": "#471700",
               "alpha": 0.2,
-              "offsetX": "0px",
-              "offsetY": "1px",
-              "blur": "0px",
-              "spread": "0px",
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 1,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              },
               "inset": true
             }
           ],
@@ -6961,10 +7025,22 @@
             {
               "color": "#ffffff00",
               "alpha": 0,
-              "offsetX": "0px",
-              "offsetY": "0px",
-              "blur": "0px",
-              "spread": "0px",
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              },
               "inset": false
             }
           ],
@@ -6981,10 +7057,22 @@
         {
           "color": "{base.color.orange.9}",
           "alpha": 0.2,
-          "offsetX": "0px",
-          "offsetY": "1px",
-          "blur": "0px",
-          "spread": "0px",
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 1,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 0,
+            "unit": "px"
+          },
+          "spread": {
+            "value": 0,
+            "unit": "px"
+          },
           "inset": true
         }
       ],
@@ -7000,10 +7088,22 @@
               {
                 "color": "{base.color.orange.9}",
                 "alpha": 0.2,
-                "offsetX": "0px",
-                "offsetY": "1px",
-                "blur": "0px",
-                "spread": "0px",
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 1,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 0,
+                  "unit": "px"
+                },
                 "inset": true
               }
             ],
@@ -7016,10 +7116,22 @@
               {
                 "color": "{base.color.transparent}",
                 "alpha": 0,
-                "offsetX": "0px",
-                "offsetY": "0px",
-                "blur": "0px",
-                "spread": "0px",
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 0,
+                  "unit": "px"
+                },
                 "inset": false
               }
             ],
@@ -7034,7 +7146,7 @@
     "name": "button-danger-shadow-selected",
     "attributes": {},
     "path": ["button", "danger", "shadow", "selected"],
-    "value": "inset 0px 1px 0px 0px #47170033",
+    "value": "inset 0 1px 0 0 #47170033",
     "type": "shadow"
   },
   "button-default-bgColor-active": {
@@ -7408,10 +7520,22 @@
             {
               "color": "#ffffff00",
               "alpha": 0,
-              "offsetX": "0px",
-              "offsetY": "0px",
-              "blur": "0px",
-              "spread": "0px",
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              },
               "inset": false
             }
           ],
@@ -7428,10 +7552,22 @@
         {
           "color": "{base.color.neutral.13}",
           "alpha": 0.04,
-          "offsetX": "0px",
-          "offsetY": "1px",
-          "blur": "0px",
-          "spread": "0px",
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 1,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 0,
+            "unit": "px"
+          },
+          "spread": {
+            "value": 0,
+            "unit": "px"
+          },
           "inset": false
         }
       ],
@@ -7447,10 +7583,22 @@
               {
                 "color": "{base.color.transparent}",
                 "alpha": 0,
-                "offsetX": "0px",
-                "offsetY": "0px",
-                "blur": "0px",
-                "spread": "0px",
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 0,
+                  "unit": "px"
+                },
                 "inset": false
               }
             ],
@@ -7465,7 +7613,7 @@
     "name": "button-default-shadow-resting",
     "attributes": {},
     "path": ["button", "default", "shadow", "resting"],
-    "value": "0px 1px 0px 0px #1f23280a",
+    "value": "0 1px 0 0 #1f23280a",
     "type": "shadow"
   },
   "button-inactive-bgColor": {
@@ -9167,10 +9315,22 @@
             {
               "color": "#ffffff00",
               "alpha": 0,
-              "offsetX": "0px",
-              "offsetY": "0px",
-              "blur": "0px",
-              "spread": "0px",
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              },
               "inset": false
             }
           ],
@@ -9187,10 +9347,22 @@
         {
           "color": "{base.color.blue.9}",
           "alpha": 0.2,
-          "offsetX": "0px",
-          "offsetY": "1px",
-          "blur": "0px",
-          "spread": "0px",
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 1,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 0,
+            "unit": "px"
+          },
+          "spread": {
+            "value": 0,
+            "unit": "px"
+          },
           "inset": true
         }
       ],
@@ -9206,10 +9378,22 @@
               {
                 "color": "{base.color.transparent}",
                 "alpha": 0,
-                "offsetX": "0px",
-                "offsetY": "0px",
-                "blur": "0px",
-                "spread": "0px",
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 0,
+                  "unit": "px"
+                },
                 "inset": false
               }
             ],
@@ -9224,7 +9408,7 @@
     "name": "button-outline-shadow-selected",
     "attributes": {},
     "path": ["button", "outline", "shadow", "selected"],
-    "value": "inset 0px 1px 0px 0px #00215533",
+    "value": "inset 0 1px 0 0 #00215533",
     "type": "shadow"
   },
   "button-primary-bgColor-active": {
@@ -10375,10 +10559,22 @@
             {
               "color": "#002155",
               "alpha": 0.3,
-              "offsetX": "0px",
-              "offsetY": "1px",
-              "blur": "0px",
-              "spread": "0px",
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 1,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              },
               "inset": true
             }
           ],
@@ -10391,10 +10587,22 @@
             {
               "color": "#002155",
               "alpha": 0.3,
-              "offsetX": "0px",
-              "offsetY": "1px",
-              "blur": "0px",
-              "spread": "0px",
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 1,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              },
               "inset": true
             }
           ],
@@ -10407,10 +10615,22 @@
             {
               "color": "#ffffff00",
               "alpha": 0,
-              "offsetX": "0px",
-              "offsetY": "0px",
-              "blur": "0px",
-              "spread": "0px",
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              },
               "inset": false
             }
           ],
@@ -10427,10 +10647,22 @@
         {
           "color": "{base.color.blue.9}",
           "alpha": 0.3,
-          "offsetX": "0px",
-          "offsetY": "1px",
-          "blur": "0px",
-          "spread": "0px",
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 1,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 0,
+            "unit": "px"
+          },
+          "spread": {
+            "value": 0,
+            "unit": "px"
+          },
           "inset": true
         }
       ],
@@ -10446,10 +10678,22 @@
               {
                 "color": "{base.color.blue.9}",
                 "alpha": 0.3,
-                "offsetX": "0px",
-                "offsetY": "1px",
-                "blur": "0px",
-                "spread": "0px",
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 1,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 0,
+                  "unit": "px"
+                },
                 "inset": true
               }
             ],
@@ -10462,10 +10706,22 @@
               {
                 "color": "{base.color.blue.9}",
                 "alpha": 0.3,
-                "offsetX": "0px",
-                "offsetY": "1px",
-                "blur": "0px",
-                "spread": "0px",
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 1,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 0,
+                  "unit": "px"
+                },
                 "inset": true
               }
             ],
@@ -10478,10 +10734,22 @@
               {
                 "color": "{base.color.transparent}",
                 "alpha": 0,
-                "offsetX": "0px",
-                "offsetY": "0px",
-                "blur": "0px",
-                "spread": "0px",
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 0,
+                  "unit": "px"
+                },
                 "inset": false
               }
             ],
@@ -10496,7 +10764,7 @@
     "name": "button-primary-shadow-selected",
     "attributes": {},
     "path": ["button", "primary", "shadow", "selected"],
-    "value": "inset 0px 1px 0px 0px #0021554d",
+    "value": "inset 0 1px 0 0 #0021554d",
     "type": "shadow"
   },
   "button-star-iconColor": {
@@ -37217,6 +37485,10 @@
       },
       "org.primer.overrides": {
         "dark": "#ffffff"
+      },
+      "org.primer.llm": {
+        "doNotUse": true,
+        "rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
       }
     },
     "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -37233,6 +37505,10 @@
         },
         "org.primer.overrides": {
           "dark": "{base.color.neutral.0}"
+        },
+        "org.primer.llm": {
+          "doNotUse": true,
+          "rules": "Avoid using raw black. Use semantic alternatives: fgColor.default for standard text, fgColor.muted for secondary text. Raw black/white ignore theme preferences and accessibility settings."
         }
       },
       "key": "{fgColor.black}"
@@ -38206,6 +38482,10 @@
       },
       "org.primer.overrides": {
         "dark": "#1f2328"
+      },
+      "org.primer.llm": {
+        "doNotUse": true,
+        "rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
       }
     },
     "filePath": "src/tokens/functional/color/fgColor.json5",
@@ -38222,6 +38502,10 @@
         },
         "org.primer.overrides": {
           "dark": "{base.color.neutral.13}"
+        },
+        "org.primer.llm": {
+          "doNotUse": true,
+          "rules": "Avoid using raw white. Use semantic alternatives: fgColor.onEmphasis for text on dark backgrounds, fgColor.onInverse for inverted contexts. Raw black/white ignore theme preferences and accessibility settings."
         }
       },
       "key": "{fgColor.white}"
@@ -38247,7 +38531,10 @@
       "$value": {
         "color": "{focus.outlineColor}",
         "style": "solid",
-        "width": "2px"
+        "width": {
+          "value": 2,
+          "unit": "px"
+        }
       },
       "$type": "border",
       "$description": "Focus ring outline for keyboard navigation and accessibility.",
@@ -47412,18 +47699,42 @@
             {
               "color": "#d1d9e080",
               "alpha": 1,
-              "offsetX": "0px",
-              "offsetY": "0px",
-              "blur": "0px",
-              "spread": "1px"
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              }
             },
             {
               "color": "#ffffff",
               "alpha": 1,
-              "offsetX": "0px",
-              "offsetY": "24px",
-              "blur": "48px",
-              "spread": "0px"
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 24,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 48,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              }
             }
           ],
           "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47443,18 +47754,42 @@
         {
           "color": "{overlay.borderColor}",
           "alpha": 0,
-          "offsetX": "0px",
-          "offsetY": "0px",
-          "blur": "0px",
-          "spread": "1px"
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 0,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 0,
+            "unit": "px"
+          },
+          "spread": {
+            "value": 1,
+            "unit": "px"
+          }
         },
         {
           "color": "{base.color.neutral.12}",
           "alpha": 0.24,
-          "offsetX": "0px",
-          "offsetY": "40px",
-          "blur": "80px",
-          "spread": "0px"
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 40,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 80,
+            "unit": "px"
+          },
+          "spread": {
+            "value": 0,
+            "unit": "px"
+          }
         }
       ],
       "$type": "shadow",
@@ -47470,18 +47805,42 @@
               {
                 "color": "{overlay.borderColor}",
                 "alpha": 1,
-                "offsetX": "0px",
-                "offsetY": "0px",
-                "blur": "0px",
-                "spread": "1px"
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 1,
+                  "unit": "px"
+                }
               },
               {
                 "color": "{base.color.neutral.0}",
                 "alpha": 1,
-                "offsetX": "0px",
-                "offsetY": "24px",
-                "blur": "48px",
-                "spread": "0px"
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 24,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 48,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 0,
+                  "unit": "px"
+                }
               }
             ],
             "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47499,7 +47858,7 @@
     "name": "shadow-floating-large",
     "attributes": {},
     "path": ["shadow", "floating", "large"],
-    "value": "0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d",
+    "value": "0 0 0 1px #d1d9e0, 0 40px 80px 0 #25292e3d",
     "type": "shadow",
     "description": "Large floating shadow for modals and dialogs"
   },
@@ -47513,24 +47872,52 @@
             {
               "color": "#ffffff",
               "alpha": 0.4,
-              "offsetX": "0px",
-              "offsetY": "6px",
-              "blur": "12px",
-              "spread": "-3px"
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 6,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 12,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -3,
+                "unit": "px"
+              }
             },
             {
               "color": "#ffffff",
               "alpha": 0.4,
-              "offsetX": "0px",
-              "offsetY": "6px",
-              "blur": "18px",
-              "spread": "0px"
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 6,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 18,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              }
             }
           ],
           "filePath": "src/tokens/functional/shadow/shadow.json5",
           "isSource": true,
           "$type": "shadow"
         }
+      },
+      "org.primer.llm": {
+        "usage": ["legacy-component", "backward-compatibility"],
+        "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
       }
     },
     "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47540,21 +47927,46 @@
         {
           "color": "{base.color.neutral.12}",
           "alpha": 0.04,
-          "offsetX": "0px",
-          "offsetY": "6px",
-          "blur": "12px",
-          "spread": "-3px"
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 6,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 12,
+            "unit": "px"
+          },
+          "spread": {
+            "value": -3,
+            "unit": "px"
+          }
         },
         {
           "color": "{base.color.neutral.12}",
           "alpha": 0.12,
-          "offsetX": "0px",
-          "offsetY": "6px",
-          "blur": "18px",
-          "spread": "0px"
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 6,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 18,
+            "unit": "px"
+          },
+          "spread": {
+            "value": 0,
+            "unit": "px"
+          }
         }
       ],
       "$type": "shadow",
+      "$description": "Legacy floating shadow for backward compatibility",
       "$extensions": {
         "org.primer.figma": {},
         "org.primer.overrides": {
@@ -47563,24 +47975,52 @@
               {
                 "color": "{base.color.neutral.0}",
                 "alpha": 0.4,
-                "offsetX": "0px",
-                "offsetY": "6px",
-                "blur": "12px",
-                "spread": "-3px"
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 6,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 12,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": -3,
+                  "unit": "px"
+                }
               },
               {
                 "color": "{base.color.neutral.0}",
                 "alpha": 0.4,
-                "offsetX": "0px",
-                "offsetY": "6px",
-                "blur": "18px",
-                "spread": "0px"
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 6,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 18,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 0,
+                  "unit": "px"
+                }
               }
             ],
             "filePath": "src/tokens/functional/shadow/shadow.json5",
             "isSource": true,
             "$type": "shadow"
           }
+        },
+        "org.primer.llm": {
+          "usage": ["legacy-component", "backward-compatibility"],
+          "rules": "DEPRECATED: Use shadow-floating-small instead. Only use for maintaining backward compatibility with existing implementations."
         }
       },
       "key": "{shadow.floating.legacy}"
@@ -47588,8 +48028,9 @@
     "name": "shadow-floating-legacy",
     "attributes": {},
     "path": ["shadow", "floating", "legacy"],
-    "value": "0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
-    "type": "shadow"
+    "value": "0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f",
+    "type": "shadow",
+    "description": "Legacy floating shadow for backward compatibility"
   },
   "shadow-floating-medium": {
     "key": "{shadow.floating.medium}",
@@ -47604,48 +48045,112 @@
             {
               "color": "#d1d9e080",
               "alpha": 1,
-              "offsetX": "0px",
-              "offsetY": "0px",
-              "blur": "0px",
-              "spread": "1px"
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              }
             },
             {
               "color": "#ffffff",
               "alpha": 0.4,
-              "offsetX": "0px",
-              "offsetY": "8px",
-              "blur": "16px",
-              "spread": "-4px"
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 8,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 16,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -4,
+                "unit": "px"
+              }
             },
             {
               "color": "#ffffff",
               "alpha": 0.4,
-              "offsetX": "0px",
-              "offsetY": "4px",
-              "blur": "32px",
-              "spread": "-4px"
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 4,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 32,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -4,
+                "unit": "px"
+              }
             },
             {
               "color": "#ffffff",
               "alpha": 0.4,
-              "offsetX": "0px",
-              "offsetY": "24px",
-              "blur": "48px",
-              "spread": "-12px"
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 24,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 48,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -12,
+                "unit": "px"
+              }
             },
             {
               "color": "#ffffff",
               "alpha": 0.4,
-              "offsetX": "0px",
-              "offsetY": "48px",
-              "blur": "96px",
-              "spread": "-24px"
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 48,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 96,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -24,
+                "unit": "px"
+              }
             }
           ],
           "filePath": "src/tokens/functional/shadow/shadow.json5",
           "isSource": true,
           "$type": "shadow"
         }
+      },
+      "org.primer.llm": {
+        "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
+        "rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
       }
     },
     "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47655,45 +48160,106 @@
         {
           "color": "{overlay.borderColor}",
           "alpha": 0,
-          "offsetX": "0px",
-          "offsetY": "0px",
-          "blur": "0px",
-          "spread": "1px"
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 0,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 0,
+            "unit": "px"
+          },
+          "spread": {
+            "value": 1,
+            "unit": "px"
+          }
         },
         {
           "color": "{base.color.neutral.12}",
           "alpha": 0.08,
-          "offsetX": "0px",
-          "offsetY": "8px",
-          "blur": "16px",
-          "spread": "-4px"
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 8,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 16,
+            "unit": "px"
+          },
+          "spread": {
+            "value": -4,
+            "unit": "px"
+          }
         },
         {
           "color": "{base.color.neutral.12}",
           "alpha": 0.08,
-          "offsetX": "0px",
-          "offsetY": "4px",
-          "blur": "32px",
-          "spread": "-4px"
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 4,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 32,
+            "unit": "px"
+          },
+          "spread": {
+            "value": -4,
+            "unit": "px"
+          }
         },
         {
           "color": "{base.color.neutral.12}",
           "alpha": 0.08,
-          "offsetX": "0px",
-          "offsetY": "24px",
-          "blur": "48px",
-          "spread": "-12px"
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 24,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 48,
+            "unit": "px"
+          },
+          "spread": {
+            "value": -12,
+            "unit": "px"
+          }
         },
         {
           "color": "{base.color.neutral.12}",
           "alpha": 0.08,
-          "offsetX": "0px",
-          "offsetY": "48px",
-          "blur": "96px",
-          "spread": "-24px"
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 48,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 96,
+            "unit": "px"
+          },
+          "spread": {
+            "value": -24,
+            "unit": "px"
+          }
         }
       ],
       "$type": "shadow",
+      "$description": "Medium floating shadow for popovers and action menus",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -47705,48 +48271,112 @@
               {
                 "color": "{overlay.borderColor}",
                 "alpha": 1,
-                "offsetX": "0px",
-                "offsetY": "0px",
-                "blur": "0px",
-                "spread": "1px"
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 1,
+                  "unit": "px"
+                }
               },
               {
                 "color": "{base.color.neutral.0}",
                 "alpha": 0.4,
-                "offsetX": "0px",
-                "offsetY": "8px",
-                "blur": "16px",
-                "spread": "-4px"
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 8,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 16,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": -4,
+                  "unit": "px"
+                }
               },
               {
                 "color": "{base.color.neutral.0}",
                 "alpha": 0.4,
-                "offsetX": "0px",
-                "offsetY": "4px",
-                "blur": "32px",
-                "spread": "-4px"
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 4,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 32,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": -4,
+                  "unit": "px"
+                }
               },
               {
                 "color": "{base.color.neutral.0}",
                 "alpha": 0.4,
-                "offsetX": "0px",
-                "offsetY": "24px",
-                "blur": "48px",
-                "spread": "-12px"
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 24,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 48,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": -12,
+                  "unit": "px"
+                }
               },
               {
                 "color": "{base.color.neutral.0}",
                 "alpha": 0.4,
-                "offsetX": "0px",
-                "offsetY": "48px",
-                "blur": "96px",
-                "spread": "-24px"
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 48,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 96,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": -24,
+                  "unit": "px"
+                }
               }
             ],
             "filePath": "src/tokens/functional/shadow/shadow.json5",
             "isSource": true,
             "$type": "shadow"
           }
+        },
+        "org.primer.llm": {
+          "usage": ["popover", "action-menu", "select-panel", "autocomplete"],
+          "rules": "Use for medium-sized floating elements like popovers and action menus. More prominent than small but less than dialogs. Do NOT use for full modals."
         }
       },
       "key": "{shadow.floating.medium}"
@@ -47754,8 +48384,9 @@
     "name": "shadow-floating-medium",
     "attributes": {},
     "path": ["shadow", "floating", "medium"],
-    "value": "0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14",
-    "type": "shadow"
+    "value": "0 0 0 1px #d1d9e0, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14",
+    "type": "shadow",
+    "description": "Medium floating shadow for popovers and action menus"
   },
   "shadow-floating-small": {
     "key": "{shadow.floating.small}",
@@ -47770,26 +48401,62 @@
             {
               "color": "#d1d9e080",
               "alpha": 1,
-              "offsetX": "0px",
-              "offsetY": "0px",
-              "blur": "0px",
-              "spread": "1px"
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              }
             },
             {
               "color": "#ffffff",
               "alpha": 0.4,
-              "offsetX": "0px",
-              "offsetY": "6px",
-              "blur": "12px",
-              "spread": "-3px"
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 6,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 12,
+                "unit": "px"
+              },
+              "spread": {
+                "value": -3,
+                "unit": "px"
+              }
             },
             {
               "color": "#ffffff",
               "alpha": 0.4,
-              "offsetX": "0px",
-              "offsetY": "6px",
-              "blur": "18px",
-              "spread": "0px"
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 6,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 18,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              }
             }
           ],
           "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47809,26 +48476,62 @@
         {
           "color": "{overlay.borderColor}",
           "alpha": 0.5,
-          "offsetX": "0px",
-          "offsetY": "0px",
-          "blur": "0px",
-          "spread": "1px"
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 0,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 0,
+            "unit": "px"
+          },
+          "spread": {
+            "value": 1,
+            "unit": "px"
+          }
         },
         {
           "color": "{base.color.neutral.12}",
           "alpha": 0.04,
-          "offsetX": "0px",
-          "offsetY": "6px",
-          "blur": "12px",
-          "spread": "-3px"
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 6,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 12,
+            "unit": "px"
+          },
+          "spread": {
+            "value": -3,
+            "unit": "px"
+          }
         },
         {
           "color": "{base.color.neutral.12}",
           "alpha": 0.12,
-          "offsetX": "0px",
-          "offsetY": "6px",
-          "blur": "18px",
-          "spread": "0px"
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 6,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 18,
+            "unit": "px"
+          },
+          "spread": {
+            "value": 0,
+            "unit": "px"
+          }
         }
       ],
       "$type": "shadow",
@@ -47844,26 +48547,62 @@
               {
                 "color": "{overlay.borderColor}",
                 "alpha": 1,
-                "offsetX": "0px",
-                "offsetY": "0px",
-                "blur": "0px",
-                "spread": "1px"
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 1,
+                  "unit": "px"
+                }
               },
               {
                 "color": "{base.color.neutral.0}",
                 "alpha": 0.4,
-                "offsetX": "0px",
-                "offsetY": "6px",
-                "blur": "12px",
-                "spread": "-3px"
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 6,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 12,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": -3,
+                  "unit": "px"
+                }
               },
               {
                 "color": "{base.color.neutral.0}",
                 "alpha": 0.4,
-                "offsetX": "0px",
-                "offsetY": "6px",
-                "blur": "18px",
-                "spread": "0px"
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 6,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 18,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 0,
+                  "unit": "px"
+                }
               }
             ],
             "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47881,7 +48620,7 @@
     "name": "shadow-floating-small",
     "attributes": {},
     "path": ["shadow", "floating", "small"],
-    "value": "0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f",
+    "value": "0 0 0 1px #d1d9e080, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f",
     "type": "shadow",
     "description": "Small floating shadow for dropdowns, tooltips, and small overlays"
   },
@@ -47898,24 +48637,52 @@
             {
               "color": "#d1d9e080",
               "alpha": 1,
-              "offsetX": "0px",
-              "offsetY": "0px",
-              "blur": "0px",
-              "spread": "1px"
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 0,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 1,
+                "unit": "px"
+              }
             },
             {
               "color": "#ffffff",
               "alpha": 1,
-              "offsetX": "0px",
-              "offsetY": "32px",
-              "blur": "64px",
-              "spread": "0px"
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 32,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 64,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              }
             }
           ],
           "filePath": "src/tokens/functional/shadow/shadow.json5",
           "isSource": true,
           "$type": "shadow"
         }
+      },
+      "org.primer.llm": {
+        "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
+        "rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
       }
     },
     "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -47925,21 +48692,46 @@
         {
           "color": "{overlay.borderColor}",
           "alpha": 0,
-          "offsetX": "0px",
-          "offsetY": "0px",
-          "blur": "0px",
-          "spread": "1px"
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 0,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 0,
+            "unit": "px"
+          },
+          "spread": {
+            "value": 1,
+            "unit": "px"
+          }
         },
         {
           "color": "{base.color.neutral.12}",
           "alpha": 0.32,
-          "offsetX": "0px",
-          "offsetY": "56px",
-          "blur": "112px",
-          "spread": "0px"
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 56,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 112,
+            "unit": "px"
+          },
+          "spread": {
+            "value": 0,
+            "unit": "px"
+          }
         }
       ],
       "$type": "shadow",
+      "$description": "Extra large floating shadow for full-screen overlays and sheets",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -47951,24 +48743,52 @@
               {
                 "color": "{overlay.borderColor}",
                 "alpha": 1,
-                "offsetX": "0px",
-                "offsetY": "0px",
-                "blur": "0px",
-                "spread": "1px"
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 1,
+                  "unit": "px"
+                }
               },
               {
                 "color": "{base.color.neutral.0}",
                 "alpha": 1,
-                "offsetX": "0px",
-                "offsetY": "32px",
-                "blur": "64px",
-                "spread": "0px"
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 32,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 64,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 0,
+                  "unit": "px"
+                }
               }
             ],
             "filePath": "src/tokens/functional/shadow/shadow.json5",
             "isSource": true,
             "$type": "shadow"
           }
+        },
+        "org.primer.llm": {
+          "usage": ["full-screen-overlay", "side-sheet", "drawer", "large-modal"],
+          "rules": "Use for full-screen or near-full-screen overlays like side sheets and drawers. Maximum elevation in the system. Do NOT use for small floating elements."
         }
       },
       "key": "{shadow.floating.xlarge}"
@@ -47976,8 +48796,9 @@
     "name": "shadow-floating-xlarge",
     "attributes": {},
     "path": ["shadow", "floating", "xlarge"],
-    "value": "0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52",
-    "type": "shadow"
+    "value": "0 0 0 1px #d1d9e0, 0 56px 112px 0 #25292e52",
+    "type": "shadow",
+    "description": "Extra large floating shadow for full-screen overlays and sheets"
   },
   "shadow-inset": {
     "key": "{shadow.inset}",
@@ -47991,16 +48812,32 @@
           "$value": {
             "color": "#ffffff",
             "alpha": 0.24,
-            "offsetX": "0px",
-            "offsetY": "1px",
-            "blur": "0px",
-            "spread": "0px",
+            "offsetX": {
+              "value": 0,
+              "unit": "px"
+            },
+            "offsetY": {
+              "value": 1,
+              "unit": "px"
+            },
+            "blur": {
+              "value": 0,
+              "unit": "px"
+            },
+            "spread": {
+              "value": 0,
+              "unit": "px"
+            },
             "inset": true
           },
           "filePath": "src/tokens/functional/shadow/shadow.json5",
           "isSource": true,
           "$type": "shadow"
         }
+      },
+      "org.primer.llm": {
+        "usage": ["input-field", "pressed-button", "recessed-area", "well"],
+        "rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
       }
     },
     "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48009,13 +48846,26 @@
       "$value": {
         "color": "{base.color.neutral.13}",
         "alpha": 0.04,
-        "offsetX": "0px",
-        "offsetY": "1px",
-        "blur": "0px",
-        "spread": "0px",
+        "offsetX": {
+          "value": 0,
+          "unit": "px"
+        },
+        "offsetY": {
+          "value": 1,
+          "unit": "px"
+        },
+        "blur": {
+          "value": 0,
+          "unit": "px"
+        },
+        "spread": {
+          "value": 0,
+          "unit": "px"
+        },
         "inset": true
       },
       "$type": "shadow",
+      "$description": "Inset shadow for recessed elements",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -48026,16 +48876,32 @@
             "$value": {
               "color": "{base.color.neutral.0}",
               "alpha": 0.24,
-              "offsetX": "0px",
-              "offsetY": "1px",
-              "blur": "0px",
-              "spread": "0px",
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 1,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 0,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              },
               "inset": true
             },
             "filePath": "src/tokens/functional/shadow/shadow.json5",
             "isSource": true,
             "$type": "shadow"
           }
+        },
+        "org.primer.llm": {
+          "usage": ["input-field", "pressed-button", "recessed-area", "well"],
+          "rules": "Use for elements that appear pressed or inset into the surface. Commonly used for input fields and wells. Do NOT use for floating elements."
         }
       },
       "key": "{shadow.inset}"
@@ -48043,8 +48909,9 @@
     "name": "shadow-inset",
     "attributes": {},
     "path": ["shadow", "inset"],
-    "value": "inset 0px 1px 0px 0px #1f23280a",
-    "type": "shadow"
+    "value": "inset 0 1px 0 0 #1f23280a",
+    "type": "shadow",
+    "description": "Inset shadow for recessed elements"
   },
   "shadow-resting-medium": {
     "key": "{shadow.resting.medium}",
@@ -48059,24 +48926,52 @@
             {
               "color": "#ffffff",
               "alpha": 0.4,
-              "offsetX": "0px",
-              "offsetY": "1px",
-              "blur": "1px",
-              "spread": "0px"
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 1,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 1,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              }
             },
             {
               "color": "#ffffff",
               "alpha": 0.8,
-              "offsetX": "0px",
-              "offsetY": "3px",
-              "blur": "6px",
-              "spread": "0px"
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 3,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 6,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              }
             }
           ],
           "filePath": "src/tokens/functional/shadow/shadow.json5",
           "isSource": true,
           "$type": "shadow"
         }
+      },
+      "org.primer.llm": {
+        "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
+        "rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
       }
     },
     "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48086,21 +48981,46 @@
         {
           "color": "{base.color.neutral.12}",
           "alpha": 0.1,
-          "offsetX": "0px",
-          "offsetY": "1px",
-          "blur": "1px",
-          "spread": "0px"
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 1,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 1,
+            "unit": "px"
+          },
+          "spread": {
+            "value": 0,
+            "unit": "px"
+          }
         },
         {
           "color": "{base.color.neutral.12}",
           "alpha": 0.12,
-          "offsetX": "0px",
-          "offsetY": "3px",
-          "blur": "6px",
-          "spread": "0px"
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 3,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 6,
+            "unit": "px"
+          },
+          "spread": {
+            "value": 0,
+            "unit": "px"
+          }
         }
       ],
       "$type": "shadow",
+      "$description": "Medium resting shadow for cards and elevated surfaces",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -48112,24 +49032,52 @@
               {
                 "color": "{base.color.neutral.0}",
                 "alpha": 0.4,
-                "offsetX": "0px",
-                "offsetY": "1px",
-                "blur": "1px",
-                "spread": "0px"
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 1,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 1,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 0,
+                  "unit": "px"
+                }
               },
               {
                 "color": "{base.color.neutral.0}",
                 "alpha": 0.8,
-                "offsetX": "0px",
-                "offsetY": "3px",
-                "blur": "6px",
-                "spread": "0px"
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 3,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 6,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 0,
+                  "unit": "px"
+                }
               }
             ],
             "filePath": "src/tokens/functional/shadow/shadow.json5",
             "isSource": true,
             "$type": "shadow"
           }
+        },
+        "org.primer.llm": {
+          "usage": ["card", "panel", "elevated-surface", "elevated-sidebar"],
+          "rules": "Use for cards and content panels that sit above the page surface. Provides moderate elevation without appearing to float. Do NOT use for overlays or modals."
         }
       },
       "key": "{shadow.resting.medium}"
@@ -48137,8 +49085,9 @@
     "name": "shadow-resting-medium",
     "attributes": {},
     "path": ["shadow", "resting", "medium"],
-    "value": "0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f",
-    "type": "shadow"
+    "value": "0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f",
+    "type": "shadow",
+    "description": "Medium resting shadow for cards and elevated surfaces"
   },
   "shadow-resting-small": {
     "key": "{shadow.resting.small}",
@@ -48153,19 +49102,43 @@
             {
               "color": "#ffffff",
               "alpha": 0.6,
-              "offsetX": "0px",
-              "offsetY": "1px",
-              "blur": "1px",
-              "spread": "0px",
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 1,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 1,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              },
               "inset": false
             },
             {
               "color": "#ffffff",
               "alpha": 0.6,
-              "offsetX": "0px",
-              "offsetY": "1px",
-              "blur": "3px",
-              "spread": "0px",
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 1,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 3,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              },
               "inset": false
             }
           ],
@@ -48173,6 +49146,10 @@
           "isSource": true,
           "$type": "shadow"
         }
+      },
+      "org.primer.llm": {
+        "usage": ["button", "interactive-card", "clickable-element"],
+        "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
       }
     },
     "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48181,24 +49158,49 @@
       "$value": [
         {
           "color": "{base.color.neutral.13}",
-          "alpha": 0.06,
-          "offsetX": "0px",
-          "offsetY": "1px",
-          "blur": "1px",
-          "spread": "0px",
+          "alpha": 0.04,
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 1,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 1,
+            "unit": "px"
+          },
+          "spread": {
+            "value": 0,
+            "unit": "px"
+          },
           "inset": false
         },
         {
           "color": "{base.color.neutral.13}",
-          "alpha": 0.06,
-          "offsetX": "0px",
-          "offsetY": "1px",
-          "blur": "3px",
-          "spread": "0px",
+          "alpha": 0.03,
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 1,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 2,
+            "unit": "px"
+          },
+          "spread": {
+            "value": 0,
+            "unit": "px"
+          },
           "inset": false
         }
       ],
       "$type": "shadow",
+      "$description": "Small resting shadow for buttons and interactive elements",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -48210,19 +49212,43 @@
               {
                 "color": "{base.color.neutral.0}",
                 "alpha": 0.6,
-                "offsetX": "0px",
-                "offsetY": "1px",
-                "blur": "1px",
-                "spread": "0px",
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 1,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 1,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 0,
+                  "unit": "px"
+                },
                 "inset": false
               },
               {
                 "color": "{base.color.neutral.0}",
                 "alpha": 0.6,
-                "offsetX": "0px",
-                "offsetY": "1px",
-                "blur": "3px",
-                "spread": "0px",
+                "offsetX": {
+                  "value": 0,
+                  "unit": "px"
+                },
+                "offsetY": {
+                  "value": 1,
+                  "unit": "px"
+                },
+                "blur": {
+                  "value": 3,
+                  "unit": "px"
+                },
+                "spread": {
+                  "value": 0,
+                  "unit": "px"
+                },
                 "inset": false
               }
             ],
@@ -48230,6 +49256,10 @@
             "isSource": true,
             "$type": "shadow"
           }
+        },
+        "org.primer.llm": {
+          "usage": ["button", "interactive-card", "clickable-element"],
+          "rules": "Use for buttons and small interactive elements at rest. Provides subtle depth and clickable affordance. RECOMMENDED for default button shadows."
         }
       },
       "key": "{shadow.resting.small}"
@@ -48237,8 +49267,9 @@
     "name": "shadow-resting-small",
     "attributes": {},
     "path": ["shadow", "resting", "small"],
-    "value": "0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f",
-    "type": "shadow"
+    "value": "0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808",
+    "type": "shadow",
+    "description": "Small resting shadow for buttons and interactive elements"
   },
   "shadow-resting-xsmall": {
     "key": "{shadow.resting.xsmall}",
@@ -48252,16 +49283,32 @@
           "$value": {
             "color": "#ffffff",
             "alpha": 0.8,
-            "offsetX": "0px",
-            "offsetY": "1px",
-            "blur": "1px",
-            "spread": "0px",
+            "offsetX": {
+              "value": 0,
+              "unit": "px"
+            },
+            "offsetY": {
+              "value": 1,
+              "unit": "px"
+            },
+            "blur": {
+              "value": 1,
+              "unit": "px"
+            },
+            "spread": {
+              "value": 0,
+              "unit": "px"
+            },
             "inset": false
           },
           "filePath": "src/tokens/functional/shadow/shadow.json5",
           "isSource": true,
           "$type": "shadow"
         }
+      },
+      "org.primer.llm": {
+        "usage": ["badge", "chip", "small-card", "subtle-elevation"],
+        "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
       }
     },
     "filePath": "src/tokens/functional/shadow/shadow.json5",
@@ -48269,14 +49316,27 @@
     "original": {
       "$value": {
         "color": "{base.color.neutral.13}",
-        "alpha": 0.06,
-        "offsetX": "0px",
-        "offsetY": "1px",
-        "blur": "1px",
-        "spread": "0px",
+        "alpha": 0.05,
+        "offsetX": {
+          "value": 0,
+          "unit": "px"
+        },
+        "offsetY": {
+          "value": 1,
+          "unit": "px"
+        },
+        "blur": {
+          "value": 1,
+          "unit": "px"
+        },
+        "spread": {
+          "value": 0,
+          "unit": "px"
+        },
         "inset": false
       },
       "$type": "shadow",
+      "$description": "Extra small resting shadow for minimal elevation",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -48287,16 +49347,32 @@
             "$value": {
               "color": "{base.color.neutral.0}",
               "alpha": 0.8,
-              "offsetX": "0px",
-              "offsetY": "1px",
-              "blur": "1px",
-              "spread": "0px",
+              "offsetX": {
+                "value": 0,
+                "unit": "px"
+              },
+              "offsetY": {
+                "value": 1,
+                "unit": "px"
+              },
+              "blur": {
+                "value": 1,
+                "unit": "px"
+              },
+              "spread": {
+                "value": 0,
+                "unit": "px"
+              },
               "inset": false
             },
             "filePath": "src/tokens/functional/shadow/shadow.json5",
             "isSource": true,
             "$type": "shadow"
           }
+        },
+        "org.primer.llm": {
+          "usage": ["badge", "chip", "small-card", "subtle-elevation"],
+          "rules": "Use for very subtle elevation on small elements. Provides minimal lift from surface. Do NOT use for interactive elements needing clear affordance."
         }
       },
       "key": "{shadow.resting.xsmall}"
@@ -48304,8 +49380,9 @@
     "name": "shadow-resting-xsmall",
     "attributes": {},
     "path": ["shadow", "resting", "xsmall"],
-    "value": "0px 1px 1px 0px #1f23280f",
-    "type": "shadow"
+    "value": "0 1px 1px 0 #1f23280d",
+    "type": "shadow",
+    "description": "Extra small resting shadow for minimal elevation"
   },
   "sideNav-bgColor-selected": {
     "key": "{sideNav.bgColor.selected}",