@primer/primitives 11.5.0-rc.eeffc81e → 11.5.0

package/dist/styleLint/functional/themes/light.json

@@ -20418,9 +20418,33 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-        "dark": "#f6f8fa",
+        "dark": "#e0e6eb",
+        "dark-high-contrast": {
+          "$value": "#dae0e7",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-tritanopia-high-contrast": {
+          "$value": "#dae0e7",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-protanopia-deuteranopia-high-contrast": {
+          "$value": "#dae0e7",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
         "dark-dimmed": {
-          "$value": "#f6f8fa",
+          "$value": "#dae0e7",
+          "filePath": "src/tokens/functional/color/control.json5",
+          "isSource": true,
+          "$type": "color"
+        },
+        "dark-dimmed-high-contrast": {
+          "$value": "#dae0e7",
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
@@ -20439,9 +20463,33 @@
           "scopes": ["bgColor"]
         },
         "org.primer.overrides": {
-          "dark": "{bgColor.inset}",
+          "dark": "{base.color.neutral.4}",
+          "dark-high-contrast": {
+            "$value": "{base.color.neutral.5}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-tritanopia-high-contrast": {
+            "$value": "{base.color.neutral.5}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-protanopia-deuteranopia-high-contrast": {
+            "$value": "{base.color.neutral.5}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
           "dark-dimmed": {
-            "$value": "{bgColor.inset}",
+            "$value": "{base.color.neutral.5}",
+            "filePath": "src/tokens/functional/color/control.json5",
+            "isSource": true,
+            "$type": "color"
+          },
+          "dark-dimmed-high-contrast": {
+            "$value": "{base.color.neutral.5}",
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
@@ -20881,33 +20929,33 @@
         "scopes": ["bgColor"]
       },
       "org.primer.overrides": {
-        "dark": "#e0e6eb",
+        "dark": "#ffffff",
         "dark-high-contrast": {
-          "$value": "#dae0e7",
+          "$value": "#ffffff",
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-tritanopia-high-contrast": {
-          "$value": "#dae0e7",
+          "$value": "#ffffff",
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-protanopia-deuteranopia-high-contrast": {
-          "$value": "#dae0e7",
+          "$value": "#ffffff",
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-dimmed": {
-          "$value": "#dae0e7",
+          "$value": "#eff2f5",
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
         },
         "dark-dimmed-high-contrast": {
-          "$value": "#dae0e7",
+          "$value": "#eff2f5",
           "filePath": "src/tokens/functional/color/control.json5",
           "isSource": true,
           "$type": "color"
@@ -20944,33 +20992,33 @@
           "scopes": ["bgColor"]
         },
         "org.primer.overrides": {
-          "dark": "{base.color.neutral.4}",
+          "dark": "{base.color.neutral.0}",
           "dark-high-contrast": {
-            "$value": "{base.color.neutral.5}",
+            "$value": "{base.color.neutral.0}",
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-tritanopia-high-contrast": {
-            "$value": "{base.color.neutral.5}",
+            "$value": "{base.color.neutral.0}",
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-protanopia-deuteranopia-high-contrast": {
-            "$value": "{base.color.neutral.5}",
+            "$value": "{base.color.neutral.0}",
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-dimmed": {
-            "$value": "{base.color.neutral.5}",
+            "$value": "{base.color.neutral.2}",
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"
           },
           "dark-dimmed-high-contrast": {
-            "$value": "{base.color.neutral.5}",
+            "$value": "{base.color.neutral.2}",
             "filePath": "src/tokens/functional/color/control.json5",
             "isSource": true,
             "$type": "color"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "11.5.0-rc.eeffc81e",
+  "version": "11.5.0",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "type": "module",
   "files": [
@@ -81,4 +81,4 @@
     "zod-validation-error": "^4.0.1",
     "colorjs.io": "^0.6.1"
   }
-}
+}

package/src/tokens/base/size/z-index.json5

@@ -0,0 +1,34 @@
+{
+  base: {
+    zIndex: {
+      '0': {
+        $value: 0,
+        $type: 'number',
+      },
+      '100': {
+        $value: 100,
+        $type: 'number',
+      },
+      '200': {
+        $value: 200,
+        $type: 'number',
+      },
+      '300': {
+        $value: 300,
+        $type: 'number',
+      },
+      '400': {
+        $value: 400,
+        $type: 'number',
+      },
+      '500': {
+        $value: 500,
+        $type: 'number',
+      },
+      '600': {
+        $value: 600,
+        $type: 'number',
+      },
+    },
+  },
+}

package/src/tokens/functional/color/control.json5

@@ -1165,21 +1165,21 @@
             scopes: ['bgColor'],
           },
           'org.primer.overrides': {
-            dark: '{base.color.neutral.4}',
+            dark: '{base.color.neutral.0}',
             'dark-high-contrast': {
-              $value: '{base.color.neutral.5}',
+              $value: '{base.color.neutral.0}',
             },
             'dark-tritanopia-high-contrast': {
-              $value: '{base.color.neutral.5}',
+              $value: '{base.color.neutral.0}',
             },
             'dark-protanopia-deuteranopia-high-contrast': {
-              $value: '{base.color.neutral.5}',
+              $value: '{base.color.neutral.0}',
             },
             'dark-dimmed': {
-              $value: '{base.color.neutral.5}',
+              $value: '{base.color.neutral.2}',
             },
             'dark-dimmed-high-contrast': {
-              $value: '{base.color.neutral.5}',
+              $value: '{base.color.neutral.2}',
             },
             'light-high-contrast': {
               $value: '{base.color.neutral.5}',
@@ -1397,9 +1397,21 @@
             scopes: ['bgColor'],
           },
           'org.primer.overrides': {
-            dark: '{bgColor.inset}',
+            dark: '{base.color.neutral.4}',
+            'dark-high-contrast': {
+              $value: '{base.color.neutral.5}',
+            },
+            'dark-tritanopia-high-contrast': {
+              $value: '{base.color.neutral.5}',
+            },
+            'dark-protanopia-deuteranopia-high-contrast': {
+              $value: '{base.color.neutral.5}',
+            },
             'dark-dimmed': {
-              $value: '{bgColor.inset}',
+              $value: '{base.color.neutral.5}',
+            },
+            'dark-dimmed-high-contrast': {
+              $value: '{base.color.neutral.5}',
             },
           },
         },

package/src/tokens/functional/size/z-index.json5

@@ -0,0 +1,92 @@
+{
+  zIndex: {
+    behind: {
+      $value: -1,
+      $type: 'number',
+      $description: 'Place element behind base content. Use for decorative backgrounds or canvas elements.',
+      $extensions: {
+        'org.primer.llm': {
+          usage: ['decorative-background', 'canvas-element', 'background-pattern'],
+          rules: 'Use to push an element behind its siblings. WARNING: Negative z-index can behave unpredictably if any ancestor creates a new stacking context (via transform, opacity < 1, filter, will-change, etc.). Only use when you control the full stacking context chain. Do NOT use as a general "hide" mechanism.',
+        },
+      },
+    },
+    default: {
+      $value: '{base.zIndex.0}',
+      $type: 'number',
+      $description: 'Default stacking order. No elevation above surrounding content.',
+      $extensions: {
+        'org.primer.llm': {
+          usage: ['default-content', 'in-flow-element', 'reset'],
+          rules: 'Use to explicitly reset z-index to the default layer. Suitable for elements that should participate in normal document flow stacking. Do NOT use for any element that needs to appear above other content.',
+        },
+      },
+    },
+    sticky: {
+      $value: '{base.zIndex.100}',
+      $type: 'number',
+      $description: 'Sticky elements that remain visible while scrolling.',
+      $extensions: {
+        'org.primer.llm': {
+          usage: ['sticky-header', 'sticky-sidebar', 'sticky-table-header', 'sticky-footer', 'sticky-nav'],
+          rules: 'MUST use with `position: sticky` or `position: fixed` for headers, sidebars, and navigation bars that persist during scroll. Do NOT use for floating overlays or dropdowns — use higher z-index levels instead.',
+        },
+      },
+    },
+    dropdown: {
+      $value: '{base.zIndex.200}',
+      $type: 'number',
+      $description: 'Dropdown menus and select panels that appear above page content.',
+      $extensions: {
+        'org.primer.llm': {
+          usage: ['dropdown-menu', 'select-panel', 'autocomplete-list', 'action-menu', 'context-menu'],
+          rules: 'Use for menus, select panels, and autocomplete lists that overlay page content. These should appear above sticky elements but below overlays and modals. Pair with `shadow.floating.small` or `shadow.floating.medium` for visual elevation.',
+        },
+      },
+    },
+    overlay: {
+      $value: '{base.zIndex.300}',
+      $type: 'number',
+      $description: 'Overlay backdrops, side panels, and drawers.',
+      $extensions: {
+        'org.primer.llm': {
+          usage: ['overlay-backdrop', 'side-panel', 'drawer', 'slide-over', 'bottom-sheet'],
+          rules: 'Use for overlay surfaces that partially cover the page — drawers, side panels, and backdrop layers. These appear above dropdowns but below modal dialogs. SHOULD be paired with a backdrop/scrim element to indicate the overlay is blocking interaction with content beneath.',
+        },
+      },
+    },
+    modal: {
+      $value: '{base.zIndex.400}',
+      $type: 'number',
+      $description: 'Modal dialogs and full-screen overlays.',
+      $extensions: {
+        'org.primer.llm': {
+          usage: ['modal-dialog', 'dialog', 'full-screen-overlay', 'lightbox', 'confirm-dialog'],
+          rules: 'Use for modal dialogs that require user interaction before returning to the page. MUST trap focus within the modal. MUST appear above all other page content except popovers and skip links. Pair with `shadow.floating.large` or `shadow.floating.xlarge` for visual elevation.',
+        },
+      },
+    },
+    popover: {
+      $value: '{base.zIndex.500}',
+      $type: 'number',
+      $description: 'Tooltips and popovers that appear above all normal UI.',
+      $extensions: {
+        'org.primer.llm': {
+          usage: ['tooltip', 'popover', 'hover-card', 'floating-label'],
+          rules: 'Use for tooltips, popovers, and hover cards that must appear above all other UI elements including modals. These are the highest layer in normal UI. Do NOT use for persistent navigation — use `sticky` instead.',
+        },
+      },
+    },
+    skipLink: {
+      $value: '{base.zIndex.600}',
+      $type: 'number',
+      $description: 'Accessibility skip links. Must always be the topmost layer.',
+      $extensions: {
+        'org.primer.llm': {
+          usage: ['skip-link', 'skip-navigation', 'skip-to-content'],
+          rules: 'MUST use for accessibility skip links that allow keyboard users to bypass navigation. This is the highest z-index level and MUST always appear above everything else including modals and tooltips. NEVER use for non-accessibility purposes.',
+        },
+      },
+    },
+  },
+}