@primer/primitives 11.4.1-rc.edbe0e39 → 11.5.0-rc.14eaeb12

package/src/tokens/functional/shadow/shadow.json5

@@ -688,6 +688,318 @@
                 },
               ],
             },
+            'light-high-contrast': {
+              $value: [
+                {
+                  color: '{overlay.borderColor}',
+                  alpha: 1,
+                  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: {
+                    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: {
+                    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: {
+                    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: {
+                    value: 0,
+                    unit: 'px',
+                  },
+                  offsetY: {
+                    value: 48,
+                    unit: 'px',
+                  },
+                  blur: {
+                    value: 96,
+                    unit: 'px',
+                  },
+                  spread: {
+                    value: -24,
+                    unit: 'px',
+                  },
+                },
+              ],
+            },
+            'light-protanopia-deuteranopia-high-contrast': {
+              $value: [
+                {
+                  color: '{overlay.borderColor}',
+                  alpha: 1,
+                  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: {
+                    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: {
+                    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: {
+                    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: {
+                    value: 0,
+                    unit: 'px',
+                  },
+                  offsetY: {
+                    value: 48,
+                    unit: 'px',
+                  },
+                  blur: {
+                    value: 96,
+                    unit: 'px',
+                  },
+                  spread: {
+                    value: -24,
+                    unit: 'px',
+                  },
+                },
+              ],
+            },
+            'light-tritanopia-high-contrast': {
+              $value: [
+                {
+                  color: '{overlay.borderColor}',
+                  alpha: 1,
+                  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: {
+                    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: {
+                    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: {
+                    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: {
+                    value: 0,
+                    unit: 'px',
+                  },
+                  offsetY: {
+                    value: 48,
+                    unit: 'px',
+                  },
+                  blur: {
+                    value: 96,
+                    unit: 'px',
+                  },
+                  spread: {
+                    value: -24,
+                    unit: 'px',
+                  },
+                },
+              ],
+            },
           },
           'org.primer.llm': {
             usage: ['popover', 'action-menu', 'select-panel', 'autocomplete'],
@@ -790,6 +1102,138 @@
                 },
               ],
             },
+            'light-high-contrast': {
+              $value: [
+                {
+                  color: '{overlay.borderColor}',
+                  alpha: 1,
+                  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: {
+                    value: 0,
+                    unit: 'px',
+                  },
+                  offsetY: {
+                    value: 40,
+                    unit: 'px',
+                  },
+                  blur: {
+                    value: 80,
+                    unit: 'px',
+                  },
+                  spread: {
+                    value: 0,
+                    unit: 'px',
+                  },
+                },
+              ],
+            },
+            'light-protanopia-deuteranopia-high-contrast': {
+              $value: [
+                {
+                  color: '{overlay.borderColor}',
+                  alpha: 1,
+                  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: {
+                    value: 0,
+                    unit: 'px',
+                  },
+                  offsetY: {
+                    value: 40,
+                    unit: 'px',
+                  },
+                  blur: {
+                    value: 80,
+                    unit: 'px',
+                  },
+                  spread: {
+                    value: 0,
+                    unit: 'px',
+                  },
+                },
+              ],
+            },
+            'light-tritanopia-high-contrast': {
+              $value: [
+                {
+                  color: '{overlay.borderColor}',
+                  alpha: 1,
+                  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: {
+                    value: 0,
+                    unit: 'px',
+                  },
+                  offsetY: {
+                    value: 40,
+                    unit: 'px',
+                  },
+                  blur: {
+                    value: 80,
+                    unit: 'px',
+                  },
+                  spread: {
+                    value: 0,
+                    unit: 'px',
+                  },
+                },
+              ],
+            },
           },
           'org.primer.llm': {
             usage: ['modal', 'dialog', 'full-screen-overlay'],
@@ -892,6 +1336,138 @@
                 },
               ],
             },
+            'light-high-contrast': {
+              $value: [
+                {
+                  color: '{overlay.borderColor}',
+                  alpha: 1,
+                  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: {
+                    value: 0,
+                    unit: 'px',
+                  },
+                  offsetY: {
+                    value: 56,
+                    unit: 'px',
+                  },
+                  blur: {
+                    value: 112,
+                    unit: 'px',
+                  },
+                  spread: {
+                    value: 0,
+                    unit: 'px',
+                  },
+                },
+              ],
+            },
+            'light-protanopia-deuteranopia-high-contrast': {
+              $value: [
+                {
+                  color: '{overlay.borderColor}',
+                  alpha: 1,
+                  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: {
+                    value: 0,
+                    unit: 'px',
+                  },
+                  offsetY: {
+                    value: 56,
+                    unit: 'px',
+                  },
+                  blur: {
+                    value: 112,
+                    unit: 'px',
+                  },
+                  spread: {
+                    value: 0,
+                    unit: 'px',
+                  },
+                },
+              ],
+            },
+            'light-tritanopia-high-contrast': {
+              $value: [
+                {
+                  color: '{overlay.borderColor}',
+                  alpha: 1,
+                  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: {
+                    value: 0,
+                    unit: 'px',
+                  },
+                  offsetY: {
+                    value: 56,
+                    unit: 'px',
+                  },
+                  blur: {
+                    value: 112,
+                    unit: 'px',
+                  },
+                  spread: {
+                    value: 0,
+                    unit: 'px',
+                  },
+                },
+              ],
+            },
           },
           'org.primer.llm': {
             usage: ['full-screen-overlay', 'side-sheet', 'drawer', 'large-modal'],

package/src/tokens/functional/size/radius.json5

@@ -38,7 +38,7 @@
     },
     large: {
       $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.',
+      $description: 'Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired.',
       $type: 'dimension',
       $extensions: {
         'org.primer.figma': {

package/src/tokens/functional/size/size-coarse.json5

@@ -44,6 +44,21 @@
           }
         }
       }
+    },
+    "large": {
+      "gap": {
+        "auto": {
+          "$value": "{base.size.12}",
+          "$type": "dimension",
+          "$description": "Gap between stacked controls in large 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 large layouts. Provides adequate touch separation. Do NOT use for desktop/mouse interfaces."
+            }
+          }
+        }
+      }
     }
   }
 }

package/src/tokens/functional/size/size-fine.json5

@@ -45,5 +45,20 @@
         },
       },
     },
+    large: {
+      gap: {
+        auto: {
+          $value: '{base.size.8}',
+          $type: 'dimension',
+          $description: 'Gap between stacked controls in large 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 large layouts. Do NOT use for mobile/touch interfaces.',
+            },
+          },
+        },
+      },
+    },
   },
 }