default padding inside Button

[gormonn]

Describe the bug
a pure Button component has unexpected padding properties

[lachlanjc]

Components are meant to be styled, not a reset. You can override these defaults with your theme variants or the sx prop. Let us know if we can help!

[gormonn]

@lachlanjc It's unexpected behaviour because i already reset button style (before init with theme):

import { Global, css } from '@emotion/react';
import { FC } from 'react';

export const GlobalStyles: FC = () => (
  <Global
    styles={css`
      button {
        border: none;
        margin: 0;
        padding: 0;
        width: auto;
        overflow: visible;

        background: transparent;
        color: inherit;
        font: inherit;

        line-height: normal;

        -webkit-font-smoothing: inherit;
        -moz-osx-font-smoothing: inherit;

        -webkit-appearance: none;
      }

      /* Remove excess padding and border in Firefox 4+ */
      &::-moz-focus-inner {
        border: 0;
        padding: 0;
      }
    `}
  />
);

ReactDOM.render(
  <React.StrictMode>
    <GlobalStyles />
    <ThemeProvider theme={defaultTheme}>
      <DndProvider backend={HTML5Backend}>
        <Provider store={store}>
          <Router history={history}>
            <App />
          </Router>
        </Provider>
      </DndProvider>
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

so... this padding inside theme by default, i think?

[lachlanjc]

We recommend against global styles for this reason. Since Theme UI's styling produces class selectors, those will override element selectors in the cascade. Instead, change the root values in the buttons.primary object in your theme: https://theme-ui.com/components/variants

[gormonn]

So. Is that normal way?

...
buttons:{
  reset:{
    border: 'none',
    margin: 0;
    padding: 0;
    width: 'auto',
    overflow: 'visible',
    background: 'transparent',
    color: 'inherit',
    font: 'inherit',
    lineHeight: 'normal',
  },
  normal:{
    variant: 'buttons.reset',
    color: 'button-Accent-Green',
    '& path': {
      fill: 'button-Accent-Green',
    },
    '&:hover': {
      color: 'button-Medium-Green',
      '& path': {
        fill: 'button-Medium-Green',
      },
    },
  },
},
text: {
    customFontSmall: {
      fontFamily: 'lato',
      fontWeight: 400,
      fontSize: '14px',
      textTransform: 'none',
      textAlign: 'left',
      lineHeight: '18px',
      letterSpacing: 'normal',
    },
}
...

const ButtonNormal = (props) => 
  <Button variant="normal" sx={{variant: 'text.customFontSmall'}} {...props}>
    <SomeSVGWithPath/>
    Text
  </Button>

Motivation:
I have 10 different button styles.
If i reset them manually one by one - i can lost something, because it turns out that this is an anti-pattern, because a lot of duplicate code appears.

[lachlanjc]

Sure. I might recommend pulling the reset out into its own object, then spreading ...buttonReset into each variant, since we don't currently support combining variants