Theme tokens customization

[BrunnerLivio]

Description

One thing which would be an awesome addition to Playroom would be a design token / "theme variables" customizer. For example - the user should be able to modify the "primary" color of the components and "build" their custom theme right inside the Playroom editor.

UI

Here a really sh*tty drawing how this could be realized:

Which opens a new "sidebar", with a simple label / input feld (or color picker) for each token.

Integration

Example using a ThemeProvider
FrameComponent.js

import React from 'react';
import ThemeProvider from '../path/to/your/ThemeProvider';

export default ({ theme, children, customTheme }) => (
  <ThemeProvider theme={customTheme || theme}>{children}</ThemeProvider>
);

Example using CSS variables
FrameComponent.js

import React from 'react';
import ThemeProvider from '../path/to/your/ThemeProvider';

export default ({ theme, children, customTheme }) => {
  const tokens = Object.entries(customTheme);
  const style = tokens.map(([token, value]) => `--${token}: ${value};`.join('\n');
  return (
    <>
      <style>
      :root {
        {style}
      }
      </style>
      <ThemeProvider theme={customTheme || theme}>{children}</ThemeProvider>
    </>
  );
};