[POC: Unmergeable] Idea on component-based theming

[cchaos]

trafficstars

Theming ideas

Can prop values be generated through the global theme layer? This is all conjecture since I don't know if the provider can be used this way.

Example: Buttons

Amsterdam theme:

export const BUTTON_COLORS = ‘primary’ | ‘success’;
export const useEuiButtonColorCSS = () => {
  const euiTheme = useEuiTheme();
  return {
    primary: `
      background-color: ${euiButtonColor('primary', euiTheme)};
    `,
    success: `
      background-color: ${euiButtonColor('success', euiTheme)};
    `,
  }
}

Somehow the EuiThemeProvider should expect certain component prop type options like

EuiButtonProps[‘color’]: EuiThemeProvider.theme.button.colors

Then the button component would pull the available prop's map and related styling via the provider:

export type ButtonColor = EuiThemeProvider.theme.button.colors;
export const EuiButton: FunctionComponent<Props> = ({
  color,
)} => {
  const style = [useEuiButtonColorCSS[color]];
}
export const EuiBottomBar = forwardRef<HTMLElement, EuiBottomBarProps>(
  (props, ref) => {
    const BottomBar = _EuiBottomBar;
    return (
      <EuiThemeProvider colorMode={'dark'}>
        <BottomBar ref={ref} {...props} />
      </EuiThemeProvider>
    );
  }
);

This screenshots show how the docs is still looping through manual list of previously available colors, but only 3 of which are available in this theme.

---

The nice thing about this approach, is it will separate basic / functional styles from purely visual ones. Perhaps open up a way to make those basic / functional styles static.

[github-actions[bot]]

👋 Hey there. This PR hasn't had any activity for 90 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[github-actions[bot]]

❌ We're automatically closing this PR due to lack of activity. Please comment if you feel this was done in error.