# Button remaining work

## CSS issue: High contrast seletors

v0 provides high contrast theme.
v7 uses high constrast selectors.

Partners are saying we need the selectors. I'd love to avoid it if possible, but we may have to bring them back.

Is there a way to detect high contrast theme, so that we can provide guidance to customers on how to support high contrast?

## `styles` prop replacement guidance

Was:

<PrimaryButton styles={ styleFunction } />

Now (idea, proposal):

const MyButton = compose(Button, {
  useHooks: [
    makeStyles(styleFunction, [deps])
  ]
}
});

## Need guidance on providing themed Buttons using tokens

const MyButton = compose(Button, {
  useHooks: [
    makeButtonVariants({
      var1: {...tokens},
      var2: {...tokens}
    })
  ]
}
});

## `ThemeProvider` can provide old/new theme

Old:

const theme = {
  palette: {
    themePrimary: 'red'
  }
};

<Customizer settings={{ theme }}>
  <PrimaryButton>Hello</PrimaryButton>
</Customizer>

New:

# `accessibility` behaviors from v0

PR out using the behaviors

## API surface parity with v0 and v8 Button

### Shorthand differences

* `content` slot vs `children`
* Passing in props to a slot
* children function parity/issues
* static access to slots

Is this allowed?

<Button>
  <Button.icon>
    <AddIcon/>
  </Button.icon>
</Button>

...but what about passing in icon? This seems redundant.

<Button icon={<SubtractIcon/>}>
  <Button.icon>
    <AddIcon/>
  </Button.icon>
</Button>