Add theming support

[mauriciomelo]

As a styled-css-grid user I would like to change the default value for props like gap without relying on HoCs. Since styled-css-grid uses styled-components maybe leveraging it's theming solution would be a good idea.

Support for theming would be really awesome, is it aligned to styled-css-grid path forward?

[azz]

Interested to hear what your thoughts on the API might be. I like that it's (somewhat ironically) unstyled out of the box, but would be open to supporting theming if the API looks right.

[mauriciomelo]

I have a theme object that I pass as props to the styled-components theme provider, something like:

const theme = {
  palette: { /* ... */ },
};
<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

I could pass another grid key with the styled-css-grid overrides:

const theme = {
  palette: { /* ... */ },
  styledCssGrid: {  gap:  '24px'  },
};
<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

And then on the styled-css-grid side we cold have something like:

const defaults = {
  gap: '8px',
};

const gap = ({ theme, gap }) => gap || theme.styledCssGrid.gap || defaults.gap;

const Grid = styled.div`
  grid-gap: ${gap};
`;

Does it sound right to you?

[azz]

Hmm, the way I'd usually do this is have a file (e.g. grid-theme.js) that did:

import * as scg from 'styled-css-grid';

export const Grid = styled(scg.Grid).attrs({ gap: '24px' })``;

There aren't very many props in this library that would benefit from this type of theming.