@primer/primitives 7.15.14 → 7.15.15-rc.87281f5b

package/dist/css/functional/themes/dark-colorblind.css

@@ -269,6 +269,10 @@
   --buttonCounter-danger-fgColor-rest: #db6d28;
   --buttonCounter-danger-fgColor-hover: #ffffff;
   --buttonCounter-danger-fgColor-disabled: #db6d2880;
+  --reactionButton-selected-bgColor-rest: #388bfd33;
+  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
+  --reactionButton-selected-fgColor-rest: #4493f8;
+  --reactionButton-selected-fgColor-hover: #79c0ff;
   --focus-outlineColor: #1f6feb;
   --menu-bgColor-active: #161b22;
   --overlay-bgColor: #161b22;
@@ -776,6 +780,10 @@
     --buttonCounter-danger-fgColor-rest: #db6d28;
     --buttonCounter-danger-fgColor-hover: #ffffff;
     --buttonCounter-danger-fgColor-disabled: #db6d2880;
+    --reactionButton-selected-bgColor-rest: #388bfd33;
+    --reactionButton-selected-bgColor-hover: #3a8cfd5c;
+    --reactionButton-selected-fgColor-rest: #4493f8;
+    --reactionButton-selected-fgColor-hover: #79c0ff;
     --focus-outlineColor: #1f6feb;
     --menu-bgColor-active: #161b22;
     --overlay-bgColor: #161b22;

package/dist/css/functional/themes/dark-dimmed.css

@@ -269,6 +269,10 @@
   --buttonCounter-danger-fgColor-rest: #e5534b;
   --buttonCounter-danger-fgColor-hover: #cdd9e5;
   --buttonCounter-danger-fgColor-disabled: #e5534b80;
+  --reactionButton-selected-bgColor-rest: #4184e433;
+  --reactionButton-selected-bgColor-hover: #4285e55c;
+  --reactionButton-selected-fgColor-rest: #478be6;
+  --reactionButton-selected-fgColor-hover: #6cb6ff;
   --focus-outlineColor: #316dca;
   --menu-bgColor-active: #2d333b;
   --overlay-bgColor: #2d333b;
@@ -776,6 +780,10 @@
     --buttonCounter-danger-fgColor-rest: #e5534b;
     --buttonCounter-danger-fgColor-hover: #cdd9e5;
     --buttonCounter-danger-fgColor-disabled: #e5534b80;
+    --reactionButton-selected-bgColor-rest: #4184e433;
+    --reactionButton-selected-bgColor-hover: #4285e55c;
+    --reactionButton-selected-fgColor-rest: #478be6;
+    --reactionButton-selected-fgColor-hover: #6cb6ff;
     --focus-outlineColor: #316dca;
     --menu-bgColor-active: #2d333b;
     --overlay-bgColor: #2d333b;

package/dist/css/functional/themes/dark-high-contrast.css

@@ -269,6 +269,10 @@
   --buttonCounter-danger-fgColor-rest: #ff8080;
   --buttonCounter-danger-fgColor-hover: #ffffff;
   --buttonCounter-danger-fgColor-disabled: #ff808080;
+  --reactionButton-selected-bgColor-rest: #5cacff33;
+  --reactionButton-selected-bgColor-hover: #5dadff5c;
+  --reactionButton-selected-fgColor-rest: #60aeff;
+  --reactionButton-selected-fgColor-hover: #91cbff;
   --focus-outlineColor: #409eff;
   --menu-bgColor-active: #272b33;
   --overlay-bgColor: #272b33;
@@ -776,6 +780,10 @@
     --buttonCounter-danger-fgColor-rest: #ff8080;
     --buttonCounter-danger-fgColor-hover: #ffffff;
     --buttonCounter-danger-fgColor-disabled: #ff808080;
+    --reactionButton-selected-bgColor-rest: #5cacff33;
+    --reactionButton-selected-bgColor-hover: #5dadff5c;
+    --reactionButton-selected-fgColor-rest: #60aeff;
+    --reactionButton-selected-fgColor-hover: #91cbff;
     --focus-outlineColor: #409eff;
     --menu-bgColor-active: #272b33;
     --overlay-bgColor: #272b33;

package/dist/css/functional/themes/dark-tritanopia.css

@@ -269,6 +269,10 @@
   --buttonCounter-danger-fgColor-rest: #f85149;
   --buttonCounter-danger-fgColor-hover: #ffffff;
   --buttonCounter-danger-fgColor-disabled: #f8514980;
+  --reactionButton-selected-bgColor-rest: #388bfd33;
+  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
+  --reactionButton-selected-fgColor-rest: #4493f8;
+  --reactionButton-selected-fgColor-hover: #79c0ff;
   --focus-outlineColor: #1f6feb;
   --menu-bgColor-active: #161b22;
   --overlay-bgColor: #161b22;
@@ -776,6 +780,10 @@
     --buttonCounter-danger-fgColor-rest: #f85149;
     --buttonCounter-danger-fgColor-hover: #ffffff;
     --buttonCounter-danger-fgColor-disabled: #f8514980;
+    --reactionButton-selected-bgColor-rest: #388bfd33;
+    --reactionButton-selected-bgColor-hover: #3a8cfd5c;
+    --reactionButton-selected-fgColor-rest: #4493f8;
+    --reactionButton-selected-fgColor-hover: #79c0ff;
     --focus-outlineColor: #1f6feb;
     --menu-bgColor-active: #161b22;
     --overlay-bgColor: #161b22;

package/dist/css/functional/themes/dark.css

@@ -269,6 +269,10 @@
   --buttonCounter-danger-fgColor-rest: #f85149;
   --buttonCounter-danger-fgColor-hover: #ffffff;
   --buttonCounter-danger-fgColor-disabled: #f8514980;
+  --reactionButton-selected-bgColor-rest: #388bfd33;
+  --reactionButton-selected-bgColor-hover: #3a8cfd5c;
+  --reactionButton-selected-fgColor-rest: #4493f8;
+  --reactionButton-selected-fgColor-hover: #79c0ff;
   --focus-outlineColor: #1f6feb;
   --menu-bgColor-active: #161b22;
   --overlay-bgColor: #161b22;
@@ -776,6 +780,10 @@
     --buttonCounter-danger-fgColor-rest: #f85149;
     --buttonCounter-danger-fgColor-hover: #ffffff;
     --buttonCounter-danger-fgColor-disabled: #f8514980;
+    --reactionButton-selected-bgColor-rest: #388bfd33;
+    --reactionButton-selected-bgColor-hover: #3a8cfd5c;
+    --reactionButton-selected-fgColor-rest: #4493f8;
+    --reactionButton-selected-fgColor-hover: #79c0ff;
     --focus-outlineColor: #1f6feb;
     --menu-bgColor-active: #161b22;
     --overlay-bgColor: #161b22;

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

@@ -269,6 +269,10 @@
   --buttonCounter-danger-fgColor-rest: #c21c2c;
   --buttonCounter-danger-fgColor-hover: #ffffff;
   --buttonCounter-danger-fgColor-disabled: #be4e0280;
+  --reactionButton-selected-bgColor-rest: #ddf4ff;
+  --reactionButton-selected-bgColor-hover: #caecff;
+  --reactionButton-selected-fgColor-rest: #0969da;
+  --reactionButton-selected-fgColor-hover: #0550ae;
   --focus-outlineColor: #0969da;
   --focus-outline: #0969da solid 2px;
   --menu-bgColor-active: #ffffff00;
@@ -776,6 +780,10 @@
     --buttonCounter-danger-fgColor-rest: #c21c2c;
     --buttonCounter-danger-fgColor-hover: #ffffff;
     --buttonCounter-danger-fgColor-disabled: #be4e0280;
+    --reactionButton-selected-bgColor-rest: #ddf4ff;
+    --reactionButton-selected-bgColor-hover: #caecff;
+    --reactionButton-selected-fgColor-rest: #0969da;
+    --reactionButton-selected-fgColor-hover: #0550ae;
     --focus-outlineColor: #0969da;
     --focus-outline: #0969da solid 2px;
     --menu-bgColor-active: #ffffff00;

package/dist/css/functional/themes/light-high-contrast.css

@@ -269,6 +269,10 @@
   --buttonCounter-danger-fgColor-rest: #980e1e;
   --buttonCounter-danger-fgColor-hover: #ffffff;
   --buttonCounter-danger-fgColor-disabled: #8a071e80;
+  --reactionButton-selected-bgColor-rest: #dff7ff;
+  --reactionButton-selected-bgColor-hover: #c7e9ff;
+  --reactionButton-selected-fgColor-rest: #023b95;
+  --reactionButton-selected-fgColor-hover: #023b95;
   --focus-outlineColor: #0349b4;
   --focus-outline: #0349b4 solid 2px;
   --menu-bgColor-active: #ffffff00;
@@ -776,6 +780,10 @@
     --buttonCounter-danger-fgColor-rest: #980e1e;
     --buttonCounter-danger-fgColor-hover: #ffffff;
     --buttonCounter-danger-fgColor-disabled: #8a071e80;
+    --reactionButton-selected-bgColor-rest: #dff7ff;
+    --reactionButton-selected-bgColor-hover: #c7e9ff;
+    --reactionButton-selected-fgColor-rest: #023b95;
+    --reactionButton-selected-fgColor-hover: #023b95;
     --focus-outlineColor: #0349b4;
     --focus-outline: #0349b4 solid 2px;
     --menu-bgColor-active: #ffffff00;

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

@@ -269,6 +269,10 @@
   --buttonCounter-danger-fgColor-rest: #c21c2c;
   --buttonCounter-danger-fgColor-hover: #ffffff;
   --buttonCounter-danger-fgColor-disabled: #d1242f80;
+  --reactionButton-selected-bgColor-rest: #ddf4ff;
+  --reactionButton-selected-bgColor-hover: #caecff;
+  --reactionButton-selected-fgColor-rest: #0969da;
+  --reactionButton-selected-fgColor-hover: #0550ae;
   --focus-outlineColor: #0969da;
   --focus-outline: #0969da solid 2px;
   --menu-bgColor-active: #ffffff00;
@@ -776,6 +780,10 @@
     --buttonCounter-danger-fgColor-rest: #c21c2c;
     --buttonCounter-danger-fgColor-hover: #ffffff;
     --buttonCounter-danger-fgColor-disabled: #d1242f80;
+    --reactionButton-selected-bgColor-rest: #ddf4ff;
+    --reactionButton-selected-bgColor-hover: #caecff;
+    --reactionButton-selected-fgColor-rest: #0969da;
+    --reactionButton-selected-fgColor-hover: #0550ae;
     --focus-outlineColor: #0969da;
     --focus-outline: #0969da solid 2px;
     --menu-bgColor-active: #ffffff00;

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

@@ -269,6 +269,10 @@
   --buttonCounter-danger-fgColor-rest: #c21c2c;
   --buttonCounter-danger-fgColor-hover: #ffffff;
   --buttonCounter-danger-fgColor-disabled: #d1242f80;
+  --reactionButton-selected-bgColor-rest: #ddf4ff;
+  --reactionButton-selected-bgColor-hover: #caecff;
+  --reactionButton-selected-fgColor-rest: #0969da;
+  --reactionButton-selected-fgColor-hover: #0550ae;
   --focus-outlineColor: #0969da;
   --focus-outline: #0969da solid 2px;
   --menu-bgColor-active: #ffffff00;
@@ -776,6 +780,10 @@
     --buttonCounter-danger-fgColor-rest: #c21c2c;
     --buttonCounter-danger-fgColor-hover: #ffffff;
     --buttonCounter-danger-fgColor-disabled: #d1242f80;
+    --reactionButton-selected-bgColor-rest: #ddf4ff;
+    --reactionButton-selected-bgColor-hover: #caecff;
+    --reactionButton-selected-fgColor-rest: #0969da;
+    --reactionButton-selected-fgColor-hover: #0550ae;
     --focus-outlineColor: #0969da;
     --focus-outline: #0969da solid 2px;
     --menu-bgColor-active: #ffffff00;

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

@@ -7945,6 +7945,134 @@
     "attributes": {},
     "path": ["buttonCounter", "danger", "fgColor", "disabled"]
   },
+  "reactionButton-selected-bgColor-rest": {
+    "value": "#388bfd33",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "alpha": 0.2,
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.color.blue.4}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      },
+      "alpha": 0.2
+    },
+    "name": "reactionButton-selected-bgColor-rest",
+    "attributes": {},
+    "path": ["reactionButton", "selected", "bgColor", "rest"]
+  },
+  "reactionButton-selected-bgColor-hover": {
+    "value": "#3a8cfd33",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "mix": {
+      "color": "#79c0ff",
+      "weight": 0.2
+    },
+    "alpha": 0.2,
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{reactionButton.selected.bgColor.rest}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      },
+      "mix": {
+        "color": "{base.color.blue.2}",
+        "weight": 0.2
+      },
+      "alpha": 0.2
+    },
+    "name": "reactionButton-selected-bgColor-hover",
+    "attributes": {},
+    "path": ["reactionButton", "selected", "bgColor", "hover"]
+  },
+  "reactionButton-selected-fgColor-rest": {
+    "value": "#4493f8",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "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 (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "reactionButton-selected-fgColor-rest",
+    "attributes": {},
+    "path": ["reactionButton", "selected", "fgColor", "rest"]
+  },
+  "reactionButton-selected-fgColor-hover": {
+    "value": "#79c0ff",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.color.blue.2}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "reactionButton-selected-fgColor-hover",
+    "attributes": {},
+    "path": ["reactionButton", "selected", "fgColor", "hover"]
+  },
   "focus-outlineColor": {
     "value": "#1f6feb",
     "$type": "color",

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

@@ -7951,6 +7951,134 @@
     "attributes": {},
     "path": ["buttonCounter", "danger", "fgColor", "disabled"]
   },
+  "reactionButton-selected-bgColor-rest": {
+    "value": "#4184e433",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "alpha": 0.2,
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.color.blue.4}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      },
+      "alpha": 0.2
+    },
+    "name": "reactionButton-selected-bgColor-rest",
+    "attributes": {},
+    "path": ["reactionButton", "selected", "bgColor", "rest"]
+  },
+  "reactionButton-selected-bgColor-hover": {
+    "value": "#4285e533",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "mix": {
+      "color": "#6cb6ff",
+      "weight": 0.2
+    },
+    "alpha": 0.2,
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{reactionButton.selected.bgColor.rest}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      },
+      "mix": {
+        "color": "{base.color.blue.2}",
+        "weight": 0.2
+      },
+      "alpha": 0.2
+    },
+    "name": "reactionButton-selected-bgColor-hover",
+    "attributes": {},
+    "path": ["reactionButton", "selected", "bgColor", "hover"]
+  },
+  "reactionButton-selected-fgColor-rest": {
+    "value": "#478be6",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "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 (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "reactionButton-selected-fgColor-rest",
+    "attributes": {},
+    "path": ["reactionButton", "selected", "fgColor", "rest"]
+  },
+  "reactionButton-selected-fgColor-hover": {
+    "value": "#6cb6ff",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.color.blue.2}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "reactionButton-selected-fgColor-hover",
+    "attributes": {},
+    "path": ["reactionButton", "selected", "fgColor", "hover"]
+  },
   "focus-outlineColor": {
     "value": "#316dca",
     "$type": "color",

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

@@ -7971,6 +7971,134 @@
     "attributes": {},
     "path": ["buttonCounter", "danger", "fgColor", "disabled"]
   },
+  "reactionButton-selected-bgColor-rest": {
+    "value": "#5cacff33",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "alpha": 0.2,
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.color.blue.4}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      },
+      "alpha": 0.2
+    },
+    "name": "reactionButton-selected-bgColor-rest",
+    "attributes": {},
+    "path": ["reactionButton", "selected", "bgColor", "rest"]
+  },
+  "reactionButton-selected-bgColor-hover": {
+    "value": "#5dadff33",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "mix": {
+      "color": "#91cbff",
+      "weight": 0.2
+    },
+    "alpha": 0.2,
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{reactionButton.selected.bgColor.rest}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      },
+      "mix": {
+        "color": "{base.color.blue.2}",
+        "weight": 0.2
+      },
+      "alpha": 0.2
+    },
+    "name": "reactionButton-selected-bgColor-hover",
+    "attributes": {},
+    "path": ["reactionButton", "selected", "bgColor", "hover"]
+  },
+  "reactionButton-selected-fgColor-rest": {
+    "value": "#60aeff",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "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 (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "reactionButton-selected-fgColor-rest",
+    "attributes": {},
+    "path": ["reactionButton", "selected", "fgColor", "rest"]
+  },
+  "reactionButton-selected-fgColor-hover": {
+    "value": "#91cbff",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.color.blue.2}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "reactionButton-selected-fgColor-hover",
+    "attributes": {},
+    "path": ["reactionButton", "selected", "fgColor", "hover"]
+  },
   "focus-outlineColor": {
     "value": "#409eff",
     "$type": "color",