Polaris / base web

PolarisButton.js

import {ThemeProvider as PolarisThemeProvider} from '@shopify/polaris';
import {spacingBase, spacingTight} from '@shopify/polaris-tokens';

import {createTheme, ThemeProvider} from 'baseui';
import {styled} from 'styletron-react';
import {Card} from 'baseui/card';
import {Button, KIND} from 'baseui/button';

const primitives = {
  text: 'var(--p-text-on-primary)',
  primary: 'var(--p-action-primary)',
  hover: 'var(--p-action-primary-hovered)',
  active: 'var(--p-action-primary-pressed)',
};

const overrides = {
  colors: {
    buttonPrimaryFill: primitives.primary,
    buttonPrimaryText: primitives.text,
    buttonPrimaryHover: primitives.hover,
    buttonPrimaryActive: primitives.active,
    buttonPrimarySelectedFill: primitives.primary,
    buttonPrimarySelectedText: primitives.text,
    buttonPrimarySpinnerForeground: primitives.text,
    buttonPrimarySpinnerBackground: primitives.primary,
  },
};

const ButtonText = styled('span', {
  fontSize: '15px',
  lineHeight: '16px',
  fontWeight: 'var(--p-button-font-weight)',
});

export default function Home() {
  const lightTheme = createTheme(primitives, overrides);
  return (
    <PolarisThemeProvider>
      <ThemeProvider theme={lightTheme}>
        <Card>
          <Button
            kind={KIND.primary}
            overrides={{
              BaseButton: {
                style: {
                  borderRadius: 'var(--p-border-radius-base)',
                  padding: `${spacingTight} ${spacingBase}`,
                  boxShadow: `var(--p-button-drop-shadow),var(--p-button-inner-shadow)`,
                },
              },
            }}
          >
            <ButtonText>Polaris button</ButtonText>
          </Button>
        </Card>
      </ThemeProvider>
    </PolarisThemeProvider>
  );
}