Set black focus is a real challenge

[kevincharles]

Hello!
We are strongly considering using Evergreen for our educational product. My team has spent about eight hours trying to update the focus color to black when the button and checkbox get focus and want to leave the rest of the defaults.

Is there something we are missing or is there no way to update the checkbox to have a different focus shadow or border color only around the box and not the label?

Also, when you customize the button to have a black focus it seems you need to program all of the default hover settings.

We really like the look, so we hope there is a solution we are not aware of.

Thanks much!
Kevin

[brandongregoryscott]

Hey Kevin,

You should be able to override the borderColor and boxShadow for the Button with a custom theme. The focus, hover, etc. styles need to be overridden using the mapped selector name (i.e. _focus - the internal logic of the component resolves this to the more complex selector)

evergreen/src/buttons/src/Button.js

Line 45 in 3c6184d

_focus: '&:not([disabled]):focus',

Digging into this, I realized the types for the theme in v7 are a little out of date now that the selectors prop is used, but the same idea applies - just nested under a selectors key.

In V7:

const theme = mergeTheme(defaultTheme, {
  components: {
    Button: {
      baseStyle: {
        selectors: {
          _focus: {
            borderColor: 'black',
            boxShadow: '0 0 0 1px black'
          }
        }
      }
    }
  }
});

const App = () => {
  return (
    <ThemeProvider value={theme}>
      <Button>Create</Button>
    </ThemeProvider>
  );
};

In V6:

const theme = mergeTheme(defaultTheme, {
  components: {
    Button: {
      baseStyle: {
        _focus: {
          borderColor: 'black',
          boxShadow: '0 0 0 1px black'
        }
      }
    }
  }
});

const App = () => {
  return (
    <ThemeProvider value={theme}>
      <Button>Create</Button>
    </ThemeProvider>
  );
};

The Checkbox is similar, but has a slightly different theme shape to override - there's no real rhyme or reason to it right now, and it's one of the main reasons I've opened up a larger discussion for theming in #1597. I've whipped up a small CodeSandbox using a template to demo both: https://codesandbox.io/s/discussion-1608-button-boxshadow-and-bordercolor-hbjnl2?file=/src/App.tsx

Finally, while I'm excited you're interested in using Evergreen for an educational platform, I will warn you there are accessibility issues with some components that haven't been tackled yet. We're always open to contributions from the community to help improve accessibility!