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

package/src/tokens/component/reactionButton.json5

@@ -20,7 +20,11 @@
           },
         },
         hover: {
-          $value: '#caecff',
+          $value: {
+            colorSpace: 'hsl',
+            components: [201.5, 100, 89.6],
+            hex: '#caecff',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -30,16 +34,28 @@
             },
             'org.primer.overrides': {
               dark: {
-                $value: '#3a8cfd',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [214.8, 98, 61],
+                  hex: '#3a8cfd',
+                },
                 alpha: 0.36,
               },
               'dark-dimmed': {
-                $value: '#4285e5',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [215.3, 75.8, 57.8],
+                  hex: '#4285e5',
+                },
                 alpha: 0.36,
               },
               'light-high-contrast': '#c7e9ff',
               'dark-high-contrast': {
-                $value: '#5dadff',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [210.4, 100, 68.2],
+                  hex: '#5dadff',
+                },
                 alpha: 0.36,
               },
             },

package/src/tokens/functional/border/border.json5

@@ -24,7 +24,7 @@
     $extensions: {
       'org.primer.llm': {
         usage: ['container-border', 'card-border', 'divider', 'input-border', 'panel-border'],
-        rules: 'Use default for standard container borders. Use muted for subtle dividers and low-emphasis boundaries. Use emphasis when borders need to stand out. Match status border colors to their semantic meaning (danger for errors, success for positive states). Use disabled only for non-interactive or disabled elements. Prefer semantic variants (open/closed, done) over raw color variants when the context matches.',
+        rules: 'These are COMPOSITE border shorthand tokens that resolve to CSS shorthand values like "1px solid #color". Use for the CSS `border` property. Do NOT use for `border-color` — use borderColor.* tokens instead. Every border.* token includes width, style, AND color. Use default for standard container borders. Use muted for subtle dividers and low-emphasis boundaries. Use emphasis when borders need to stand out. Match status border colors to their semantic meaning (danger for errors, success for positive states). Use disabled only for non-interactive or disabled elements. Prefer semantic variants (open/closed, done) over raw color variants when the context matches.',
       },
     },
     default: {
@@ -67,6 +67,15 @@
       },
       $type: 'border',
     },
+    translucent: {
+      $description: 'Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design.',
+      $value: {
+        color: '{borderColor.translucent}',
+        style: 'solid',
+        width: '{borderWidth.default}',
+      },
+      $type: 'border',
+    },
     neutral: {
       $description: 'Neutral gray borders for non-semantic boundaries and subtle UI separation.',
       emphasis: {
@@ -165,6 +174,25 @@
         $type: 'border',
       },
     },
+    draft: {
+      $description: 'Borders for draft/WIP state indicators. Use for draft pull requests and unpublished items.',
+      emphasis: {
+        $value: {
+          color: '{borderColor.draft.emphasis}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+      muted: {
+        $value: {
+          color: '{borderColor.draft.muted}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+    },
     attention: {
       $description: 'Yellow borders for warnings, caution states, and items requiring user attention.',
       emphasis: {

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

@@ -370,7 +370,11 @@
         },
       },
       emphasis: {
-        $value: '#1f883d',
+        $value: {
+          colorSpace: 'hsl',
+          components: [137.1, 62.9, 32.7],
+          hex: '#1f883d',
+        },
         $type: 'color',
         $description: 'Strong success background for prominent positive actions',
         $extensions: {
@@ -887,7 +891,11 @@
               alpha: 0.1,
             },
             'dark-tritanopia': {
-              $value: '#db61a2',
+              $value: {
+                colorSpace: 'hsl',
+                components: [328, 62.9, 62],
+                hex: '#db61a2',
+              },
               alpha: 0.1,
             },
           },

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

@@ -1,5 +1,12 @@
 {
   borderColor: {
+    $description: 'Border color tokens that resolve to a single color value (e.g. #cf222e). For composite border shorthand (color + style + width), use border.* tokens instead.',
+    $extensions: {
+      'org.primer.llm': {
+        usage: ['border-color', 'border-styling'],
+        rules: 'These are COLOR-ONLY tokens (resolve to a hex value like #cf222e). Use for the CSS `border-color` property. Do NOT use for the CSS `border` shorthand — use border.* tokens instead.',
+      },
+    },
     default: {
       $value: '{base.color.neutral.6}',
       $type: 'color',
@@ -163,7 +170,7 @@
     translucent: {
       $value: '{base.color.neutral.13}',
       $type: 'color',
-      $description: 'Semi-transparent border for overlays and layered elements',
+      $description: 'Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design.',
       $extensions: {
         'org.primer.figma': {
           collection: 'mode',

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

@@ -229,7 +229,11 @@
           'org.primer.overrides': {
             dark: '{borderColor.default}',
             'dark-dimmed': {
-              $value: '#3d444d',
+              $value: {
+                colorSpace: 'hsl',
+                components: [213.8, 11.6, 27.1],
+                hex: '#3d444d',
+              },
             },
           },
         },
@@ -732,25 +736,45 @@
                 alpha: 0.4,
               },
               'dark-high-contrast': {
-                $value: '#c51120',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [355, 84.1, 42],
+                  hex: '#c51120',
+                },
                 alpha: 1,
               },
               'dark-dimmed-high-contrast': {
-                $value: '#c51120',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [355, 84.1, 42],
+                  hex: '#c51120',
+                },
                 alpha: 1,
               },
               'dark-tritanopia-high-contrast': {
-                $value: '#c51120',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [355, 84.1, 42],
+                  hex: '#c51120',
+                },
                 alpha: 1,
               },
               'dark-protanopia-deuteranopia-high-contrast': {
                 $value: '{bgColor.danger.emphasis}',
               },
               'light-high-contrast': {
-                $value: '#8c0b1d',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [351.6, 85.4, 29.6],
+                  hex: '#8c0b1d',
+                },
               },
               'light-tritanopia-high-contrast': {
-                $value: '#8c0b1d',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [351.6, 85.4, 29.6],
+                  hex: '#8c0b1d',
+                },
               },
               'light-protanopia-deuteranopia-high-contrast': {
                 $value: '{base.color.orange.6}',
@@ -778,7 +802,11 @@
           },
         },
         hover: {
-          $value: '#0860ca',
+          $value: {
+            colorSpace: 'hsl',
+            components: [212.8, 92.4, 41.2],
+            hex: '#0860ca',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -789,34 +817,70 @@
             'org.primer.overrides': {
               dark: '#2A7AEF',
               'dark-high-contrast': {
-                $value: '#2b64c1',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [217.2, 63.6, 46.3],
+                  hex: '#2b64c1',
+                },
               },
               'dark-tritanopia-high-contrast': {
-                $value: '#2b64c1',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [217.2, 63.6, 46.3],
+                  hex: '#2b64c1',
+                },
               },
               'dark-protanopia-deuteranopia-high-contrast': {
-                $value: '#2b64c1',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [217.2, 63.6, 46.3],
+                  hex: '#2b64c1',
+                },
               },
               'dark-dimmed': {
-                $value: '#3876d3',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [216, 63.8, 52.4],
+                  hex: '#3876d3',
+                },
               },
               'dark-dimmed-high-contrast': {
-                $value: '#2b64c1',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [217.2, 63.6, 46.3],
+                  hex: '#2b64c1',
+                },
               },
               'light-high-contrast': {
-                $value: '#0344a8',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [216.4, 96.5, 33.5],
+                  hex: '#0344a8',
+                },
               },
               'light-tritanopia-high-contrast': {
-                $value: '#0344a8',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [216.4, 96.5, 33.5],
+                  hex: '#0344a8',
+                },
               },
               'light-protanopia-deuteranopia-high-contrast': {
-                $value: '#0344a8',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [216.4, 96.5, 33.5],
+                  hex: '#0344a8',
+                },
               },
             },
           },
         },
         active: {
-          $value: '#0757ba',
+          $value: {
+            colorSpace: 'hsl',
+            components: [213.2, 92.7, 37.8],
+            hex: '#0757ba',
+          },
           $type: 'color',
           $extensions: {
             'org.primer.figma': {
@@ -827,28 +891,60 @@
             'org.primer.overrides': {
               dark: '#3685F3',
               'dark-high-contrast': {
-                $value: '#3c79d0',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [215.3, 61.2, 52.5],
+                  hex: '#3c79d0',
+                },
               },
               'dark-protanopia-deuteranopia-high-contrast': {
-                $value: '#3c79d0',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [215.3, 61.2, 52.5],
+                  hex: '#3c79d0',
+                },
               },
               'dark-tritanopia-high-contrast': {
-                $value: '#3c79d0',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [215.3, 61.2, 52.5],
+                  hex: '#3c79d0',
+                },
               },
               'dark-dimmed': {
-                $value: '#3f7fdb',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [215.4, 68.4, 55.3],
+                  hex: '#3f7fdb',
+                },
               },
               'dark-dimmed-high-contrast': {
-                $value: '#3c79d0',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [215.3, 61.2, 52.5],
+                  hex: '#3c79d0',
+                },
               },
               'light-high-contrast': {
-                $value: '#033f9d',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [216.6, 96.3, 31.4],
+                  hex: '#033f9d',
+                },
               },
               'light-tritanopia-high-contrast': {
-                $value: '#033f9d',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [216.6, 96.3, 31.4],
+                  hex: '#033f9d',
+                },
               },
               'light-protanopia-deuteranopia-high-contrast': {
-                $value: '#033f9d',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [216.6, 96.3, 31.4],
+                  hex: '#033f9d',
+                },
               },
             },
           },
@@ -946,19 +1042,35 @@
                 $value: '{base.color.blue.2}',
               },
               'dark-dimmed': {
-                $value: '#3876d3',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [216, 63.8, 52.4],
+                  hex: '#3876d3',
+                },
               },
               'dark-dimmed-high-contrast': {
                 $value: '{base.color.blue.2}',
               },
               'light-high-contrast': {
-                $value: '#0344a8',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [216.4, 96.5, 33.5],
+                  hex: '#0344a8',
+                },
               },
               'light-tritanopia-high-contrast': {
-                $value: '#0344a8',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [216.4, 96.5, 33.5],
+                  hex: '#0344a8',
+                },
               },
               'light-protanopia-deuteranopia-high-contrast': {
-                $value: '#0344a8',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [216.4, 96.5, 33.5],
+                  hex: '#0344a8',
+                },
               },
             },
           },
@@ -984,19 +1096,35 @@
                 $value: '{base.color.blue.2}',
               },
               'dark-dimmed': {
-                $value: '#3f7fdb',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [215.4, 68.4, 55.3],
+                  hex: '#3f7fdb',
+                },
               },
               'dark-dimmed-high-contrast': {
                 $value: '{base.color.blue.2}',
               },
               'light-high-contrast': {
-                $value: '#033f9d',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [216.6, 96.3, 31.4],
+                  hex: '#033f9d',
+                },
               },
               'light-protanopia-deuteranopia-high-contrast': {
-                $value: '#033f9d',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [216.6, 96.3, 31.4],
+                  hex: '#033f9d',
+                },
               },
               'light-tritanopia-high-contrast': {
-                $value: '#033f9d',
+                $value: {
+                  colorSpace: 'hsl',
+                  components: [216.6, 96.3, 31.4],
+                  hex: '#033f9d',
+                },
               },
             },
           },

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

@@ -356,7 +356,11 @@
       },
     },
     danger: {
-      $value: '#d1242f',
+      $value: {
+        colorSpace: 'hsl',
+        components: [356.2, 70.6, 48],
+        hex: '#d1242f',
+      },
       $type: 'color',
       $description: 'Danger text for errors and destructive actions',
       $extensions: {

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

@@ -228,7 +228,11 @@
         },
       },
       cyan: {
-        $value: '#1b7c83',
+        $value: {
+          colorSpace: 'hsl',
+          components: [184, 65.8, 31],
+          hex: '#1b7c83',
+        },
         $type: 'color',
         $extensions: {
           'org.primer.figma': {
@@ -241,7 +245,11 @@
         },
       },
       'cyan-bright': {
-        $value: '#3192aa',
+        $value: {
+          colorSpace: 'hsl',
+          components: [191.9, 55.3, 42.9],
+          hex: '#3192aa',
+        },
         $type: 'color',
         $extensions: {
           'org.primer.figma': {