Fix dotted icon button border

Summary: After remove vscode-ui-toolkit, the fallback styles we bring in don't have a style defined for button-icon-hover-background. This caused it to use a weird default, making icons appear with a dotted outline, which we only want to happen for high contrast themes.

Reviewed By: quark-zju

Differential Revision: D58703422

fbshipit-source-id: 91773dd5f5be0a4cae7795714d5b0880ab787a1a

addons/isl/src/components/Button.tsx

@@ -22,8 +22,8 @@ export const vars = {
   fg: 'var(--foreground)',
   border: 'var(--contrast-border)',
   /** very bright border, usually only set in high-contrast themes */
-  activeBorder: 'var(--contrast-active-border)',
-  focusBorder: 'var(--focus-border)',
+  activeBorder: 'var(--contrast-active-border, transparent)',
+  focusBorder: 'var(--focus-border, transparent)',
 };
 
 export const buttonStyles = stylex.create({
@@ -60,7 +60,7 @@ export const buttonStyles = stylex.create({
     borderColor: colors.subtleHoverDarken,
     background: {
       default: colors.subtleHoverDarken,
-      ':hover': 'var(--button-icon-hover-background)',
+      ':hover': 'var(--button-icon-hover-background, rgba(90, 93, 94, 0.31))',
     },
     borderRadius: '5px',
     color: vars.fg,