@primer/primitives 7.15.7-rc.d660a2f → 7.15.8-rc.72fdc56

package/dist/css/functional/themes/light.css

@@ -192,6 +192,7 @@
   --underlineNav-borderColor-active: #fd8c73;
   --underlineNav-borderColor-hover: #afb8c133;
   --underlineNav-iconColor-rest: #636c76;
+  --selection-bgColor: #0969da1a;
   --fgColor-default: #1f2328;
   --fgColor-muted: #636c76;
   --fgColor-onEmphasis: #ffffff;
@@ -235,7 +236,7 @@
   --bgColor-sponsors-muted: #ffeff7;
   --bgColor-sponsors-emphasis: #bf3989;
   --borderColor-default: #d0d7de;
-  --borderColor-muted: #d0d7de80;
+  --borderColor-muted: #d0d7deb3;
   --borderColor-emphasis: #6e7781;
   --borderColor-disabled: #f6f8fa;
   --borderColor-transparent: #ffffff00;
@@ -601,6 +602,7 @@
     --underlineNav-borderColor-active: #fd8c73;
     --underlineNav-borderColor-hover: #afb8c133;
     --underlineNav-iconColor-rest: #636c76;
+    --selection-bgColor: #0969da1a;
     --fgColor-default: #1f2328;
     --fgColor-muted: #636c76;
     --fgColor-onEmphasis: #ffffff;
@@ -644,7 +646,7 @@
     --bgColor-sponsors-muted: #ffeff7;
     --bgColor-sponsors-emphasis: #bf3989;
     --borderColor-default: #d0d7de;
-    --borderColor-muted: #d0d7de80;
+    --borderColor-muted: #d0d7deb3;
     --borderColor-emphasis: #6e7781;
     --borderColor-disabled: #f6f8fa;
     --borderColor-transparent: #ffffff00;

package/dist/docs/functional/size/size.json

@@ -1809,5 +1809,30 @@
     "name": "overlay-borderRadius",
     "attributes": {},
     "path": ["overlay", "borderRadius"]
+  },
+  "overlay-offset": {
+    "value": "0.25rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "pattern/size",
+        "scopes": ["size"]
+      }
+    },
+    "filePath": "src/tokens/functional/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "4px",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "pattern/size",
+          "scopes": ["size"]
+        }
+      }
+    },
+    "name": "overlay-offset",
+    "attributes": {},
+    "path": ["overlay", "offset"]
   }
 }

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

@@ -1213,7 +1213,7 @@
     "path": ["avatar", "bgColor"]
   },
   "avatar-borderColor": {
-    "value": "#30363d80",
+    "value": "#30363db3",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -3616,7 +3616,7 @@
     "path": ["button", "primary", "shadow", "selected"]
   },
   "button-invisible-fgColor-rest": {
-    "value": "#2f81f7",
+    "value": "#4493f8",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -4080,7 +4080,7 @@
     "path": ["button", "outline", "fgColor", "active"]
   },
   "button-outline-fgColor-disabled": {
-    "value": "#2f81f780",
+    "value": "#4493f880",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5022,7 +5022,7 @@
     "path": ["buttonCounter", "outline", "fgColor", "hover"]
   },
   "buttonCounter-outline-fgColor-disabled": {
-    "value": "#2f81f780",
+    "value": "#4493f880",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5597,6 +5597,37 @@
     "attributes": {},
     "path": ["underlineNav", "iconColor", "rest"]
   },
+  "selection-bgColor": {
+    "value": "#4493f833",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "alpha": 0.2,
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{fgColor.link.@}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      },
+      "alpha": 0.2
+    },
+    "name": "selection-bgColor",
+    "attributes": {},
+    "path": ["selection", "bgColor"]
+  },
   "fgColor-default": {
     "value": "#e6edf3",
     "$type": "color",
@@ -5748,7 +5779,7 @@
     "path": ["fgColor", "disabled"]
   },
   "fgColor-link": {
-    "value": "#2f81f7",
+    "value": "#4493f8",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5812,7 +5843,7 @@
     "path": ["fgColor", "neutral", "@"]
   },
   "fgColor-accent": {
-    "value": "#2f81f7",
+    "value": "#4493f8",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5832,7 +5863,7 @@
     "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.blue.4}",
+      "value": "{base.color.blue.3}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -7111,7 +7142,7 @@
     "path": ["borderColor", "default"]
   },
   "borderColor-muted": {
-    "value": "#30363d80",
+    "value": "#30363db3",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7124,7 +7155,7 @@
         }
       }
     },
-    "alpha": 0.5,
+    "alpha": 0.7,
     "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
     "isSource": true,
     "original": {
@@ -7141,7 +7172,7 @@
           }
         }
       },
-      "alpha": 0.5
+      "alpha": 0.7
     },
     "name": "borderColor-muted",
     "attributes": {},

package/dist/docs/functional/themes/dark-dimmed.json

@@ -1213,7 +1213,7 @@
     "path": ["avatar", "bgColor"]
   },
   "avatar-borderColor": {
-    "value": "#444c5680",
+    "value": "#444c56b3",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -3622,7 +3622,7 @@
     "path": ["button", "primary", "shadow", "selected"]
   },
   "button-invisible-fgColor-rest": {
-    "value": "#3b7cdb",
+    "value": "#478be6",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -4086,7 +4086,7 @@
     "path": ["button", "outline", "fgColor", "active"]
   },
   "button-outline-fgColor-disabled": {
-    "value": "#3b7cdb80",
+    "value": "#478be680",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5028,7 +5028,7 @@
     "path": ["buttonCounter", "outline", "fgColor", "hover"]
   },
   "buttonCounter-outline-fgColor-disabled": {
-    "value": "#3b7cdb80",
+    "value": "#478be680",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5603,6 +5603,37 @@
     "attributes": {},
     "path": ["underlineNav", "iconColor", "rest"]
   },
+  "selection-bgColor": {
+    "value": "#478be633",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "alpha": 0.2,
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{fgColor.link.@}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      },
+      "alpha": 0.2
+    },
+    "name": "selection-bgColor",
+    "attributes": {},
+    "path": ["selection", "bgColor"]
+  },
   "fgColor-default": {
     "value": "#c5d1de",
     "$type": "color",
@@ -5754,7 +5785,7 @@
     "path": ["fgColor", "disabled"]
   },
   "fgColor-link": {
-    "value": "#3b7cdb",
+    "value": "#478be6",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5818,7 +5849,7 @@
     "path": ["fgColor", "neutral", "@"]
   },
   "fgColor-accent": {
-    "value": "#3b7cdb",
+    "value": "#478be6",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5838,7 +5869,7 @@
     "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.blue.4}",
+      "value": "{base.color.blue.3}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -7117,7 +7148,7 @@
     "path": ["borderColor", "default"]
   },
   "borderColor-muted": {
-    "value": "#444c5680",
+    "value": "#444c56b3",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7130,7 +7161,7 @@
         }
       }
     },
-    "alpha": 0.5,
+    "alpha": 0.7,
     "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
     "isSource": true,
     "original": {
@@ -7147,7 +7178,7 @@
           }
         }
       },
-      "alpha": 0.5
+      "alpha": 0.7
     },
     "name": "borderColor-muted",
     "attributes": {},

package/dist/docs/functional/themes/dark-high-contrast.json

@@ -3636,7 +3636,7 @@
     "path": ["button", "primary", "shadow", "selected"]
   },
   "button-invisible-fgColor-rest": {
-    "value": "#52a7ff",
+    "value": "#60aeff",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -4108,7 +4108,7 @@
     "path": ["button", "outline", "fgColor", "active"]
   },
   "button-outline-fgColor-disabled": {
-    "value": "#52a7ff80",
+    "value": "#60aeff80",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5050,7 +5050,7 @@
     "path": ["buttonCounter", "outline", "fgColor", "hover"]
   },
   "buttonCounter-outline-fgColor-disabled": {
-    "value": "#52a7ff80",
+    "value": "#60aeff80",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5625,6 +5625,37 @@
     "attributes": {},
     "path": ["underlineNav", "iconColor", "rest"]
   },
+  "selection-bgColor": {
+    "value": "#60aeff33",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "alpha": 0.2,
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{fgColor.link.@}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      },
+      "alpha": 0.2
+    },
+    "name": "selection-bgColor",
+    "attributes": {},
+    "path": ["selection", "bgColor"]
+  },
   "fgColor-default": {
     "value": "#fbfcfd",
     "$type": "color",
@@ -5772,7 +5803,7 @@
     "path": ["fgColor", "disabled"]
   },
   "fgColor-link": {
-    "value": "#52a7ff",
+    "value": "#60aeff",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5836,7 +5867,7 @@
     "path": ["fgColor", "neutral", "@"]
   },
   "fgColor-accent": {
-    "value": "#52a7ff",
+    "value": "#60aeff",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5856,7 +5887,7 @@
     "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.blue.4}",
+      "value": "{base.color.blue.3}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {

package/dist/docs/functional/themes/dark-tritanopia.json

@@ -1213,7 +1213,7 @@
     "path": ["avatar", "bgColor"]
   },
   "avatar-borderColor": {
-    "value": "#30363d80",
+    "value": "#30363db3",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -3622,7 +3622,7 @@
     "path": ["button", "primary", "shadow", "selected"]
   },
   "button-invisible-fgColor-rest": {
-    "value": "#2f81f7",
+    "value": "#4493f8",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -4086,7 +4086,7 @@
     "path": ["button", "outline", "fgColor", "active"]
   },
   "button-outline-fgColor-disabled": {
-    "value": "#2f81f780",
+    "value": "#4493f880",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5028,7 +5028,7 @@
     "path": ["buttonCounter", "outline", "fgColor", "hover"]
   },
   "buttonCounter-outline-fgColor-disabled": {
-    "value": "#2f81f780",
+    "value": "#4493f880",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5603,6 +5603,37 @@
     "attributes": {},
     "path": ["underlineNav", "iconColor", "rest"]
   },
+  "selection-bgColor": {
+    "value": "#4493f833",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "alpha": 0.2,
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{fgColor.link.@}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      },
+      "alpha": 0.2
+    },
+    "name": "selection-bgColor",
+    "attributes": {},
+    "path": ["selection", "bgColor"]
+  },
   "fgColor-default": {
     "value": "#e6edf3",
     "$type": "color",
@@ -5754,7 +5785,7 @@
     "path": ["fgColor", "disabled"]
   },
   "fgColor-link": {
-    "value": "#2f81f7",
+    "value": "#4493f8",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5818,7 +5849,7 @@
     "path": ["fgColor", "neutral", "@"]
   },
   "fgColor-accent": {
-    "value": "#2f81f7",
+    "value": "#4493f8",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5838,7 +5869,7 @@
     "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.blue.4}",
+      "value": "{base.color.blue.3}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -7117,7 +7148,7 @@
     "path": ["borderColor", "default"]
   },
   "borderColor-muted": {
-    "value": "#30363d80",
+    "value": "#30363db3",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7130,7 +7161,7 @@
         }
       }
     },
-    "alpha": 0.5,
+    "alpha": 0.7,
     "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
     "isSource": true,
     "original": {
@@ -7147,7 +7178,7 @@
           }
         }
       },
-      "alpha": 0.5
+      "alpha": 0.7
     },
     "name": "borderColor-muted",
     "attributes": {},

package/dist/docs/functional/themes/dark.json

@@ -1213,7 +1213,7 @@
     "path": ["avatar", "bgColor"]
   },
   "avatar-borderColor": {
-    "value": "#30363d80",
+    "value": "#30363db3",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -3622,7 +3622,7 @@
     "path": ["button", "primary", "shadow", "selected"]
   },
   "button-invisible-fgColor-rest": {
-    "value": "#2f81f7",
+    "value": "#4493f8",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -4086,7 +4086,7 @@
     "path": ["button", "outline", "fgColor", "active"]
   },
   "button-outline-fgColor-disabled": {
-    "value": "#2f81f780",
+    "value": "#4493f880",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5028,7 +5028,7 @@
     "path": ["buttonCounter", "outline", "fgColor", "hover"]
   },
   "buttonCounter-outline-fgColor-disabled": {
-    "value": "#2f81f780",
+    "value": "#4493f880",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5603,6 +5603,37 @@
     "attributes": {},
     "path": ["underlineNav", "iconColor", "rest"]
   },
+  "selection-bgColor": {
+    "value": "#4493f833",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component",
+        "scopes": ["bgColor"]
+      }
+    },
+    "alpha": 0.2,
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{fgColor.link.@}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component",
+          "scopes": ["bgColor"]
+        }
+      },
+      "alpha": 0.2
+    },
+    "name": "selection-bgColor",
+    "attributes": {},
+    "path": ["selection", "bgColor"]
+  },
   "fgColor-default": {
     "value": "#e6edf3",
     "$type": "color",
@@ -5754,7 +5785,7 @@
     "path": ["fgColor", "disabled"]
   },
   "fgColor-link": {
-    "value": "#2f81f7",
+    "value": "#4493f8",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5818,7 +5849,7 @@
     "path": ["fgColor", "neutral", "@"]
   },
   "fgColor-accent": {
-    "value": "#2f81f7",
+    "value": "#4493f8",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5838,7 +5869,7 @@
     "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.blue.4}",
+      "value": "{base.color.blue.3}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -7117,7 +7148,7 @@
     "path": ["borderColor", "default"]
   },
   "borderColor-muted": {
-    "value": "#30363d80",
+    "value": "#30363db3",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -7130,7 +7161,7 @@
         }
       }
     },
-    "alpha": 0.5,
+    "alpha": 0.7,
     "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
     "isSource": true,
     "original": {
@@ -7147,7 +7178,7 @@
           }
         }
       },
-      "alpha": 0.5
+      "alpha": 0.7
     },
     "name": "borderColor-muted",
     "attributes": {},