Sharing theme tokens with the runtime

Sometimes, a theme’s specific tokens may be required during runtime. E.g. for generating styles with theme-based breakpoints on the fly. I propose the following API for making values of a theme’s tokens importable from runtime:

// Component.treat.ts
import { getTokens } from 'treat';

export const sharedTokens = getTokens(
  // theme => tokens
  ({ breakpoints, shorthands, aliases }) => ({ breakpoints, shorthands, aliases })
);

Usage:

import { sharedTokens } from './Component.treat';

export default function Component() {
  return <div>{sharedTokens.breakpoints.join()}</div>;
}

[maraisr]

Yeah! We have a custom provider too! It wraps the ThemeProvider from treat.

[kripod]

@maraisr Sounds viable, thanks! I’ve been doing something similar, but was wondering whether creating a custom provider could be avoided.