import { Meta, ArgTypes } from "@storybook/blocks"; import { ThemeProvider } from "@appsmith/wds-theming";

Theme

The theme package substitutes hooks and components for working with theming.

ThemeProvider

This page describes how to use ThemeProvider. How to access tokens, what input parameters are needed and how to change the color mode.

The ThemeProvider is React component in that allows for the easy implementation of themes within an app. With ThemeProvider, you can define a set of design tokens that will be applied to specific components in your application, allowing for consistent styling across your entire application.

export const Template = () => <ThemeProvider theme={{}} />;

useTheme

A hook that helps dynamically update tokens depending on incoming parameters.

javascript

import { ThemeProvider, useTheme } from "@appsmith/wds-theming";

const { theme } = useTheme({
  seedColor,
  colorMode,
  borderRadius,
  fontFamily,
  rootUnitRatio,
});

return <ThemeProvider theme={theme}>...</ThemeProvider>;

tokensAccessor

Creates an object containing tokens based on the passed parameters (see the defaultToken structure) for subsequent conversion to CSS variables.

defaultTokens

Basic token configuration file.

Usage

javascript

import React from "react";
import { useEffect, useState } from "react";
import {
  ThemeProvider,
  TokensAccessor,
  defaultTokens,
  useFluidTokens,
} from "@appsmith/wds-theming";

export const theming = (Story, args) => {
  const { fluid, ...restDefaultTokens } = defaultTokens;
  const { typography, spacing, sizing } = useFluidTokens(fluid);
  const tokensAccessor = new TokensAccessor({
    ...restDefaultTokens,
    rootUnit,
    spacing,
    sizing,
    typography,
  });
  const [theme, setTheme] = useState(tokensAccessor.getAllTokens());

  useEffect(() => {
    if (args.globals.colorMode) {
      tokensAccessor.updateColorMode(args.globals.colorMode);

      setTheme((prevState) => {
        return {
          ...prevState,
          ...tokensAccessor.getColors(),
        };
      });
    }
  }, [args.globals.colorMode]);

  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};