Create MUI Theme to integrate with Storybook

paul-thompson1 commented 5 months ago

Background Context

While working on #22 we discovered that Figma and Storybook can't directly integrate with one another. This work will allow us to integrate with Storybook.

User Story

As a developer I want to create a theme So that I can use the Figma design tokens

Definition of Done

What means that this task is done?

[x] Have Shak approve Natalia's GitHub token request
[x] Review Natalia's token JSON file and discuss naming conventions before pushing tokens.json
[x] Define the variables in the theme (theme.ts)
[x] Implement theme in Storybook (preview.ts)

Acceptance Criteria

Given xxxx When xxxx Then xxxx

Resources

How to generate variables.js file in build-styles directory

node build.mjs

Example theme code

//theme.ts 
import { createTheme } from "@mui/material/styles";
import * as styles from "../build-styles/variables"; //js file created using: node build.mjs

export const theme = createTheme({
    typography: {
        h1: {
            fontFamily: styles.HeaderH1FontFamily,
            fontWeight: styles.HeaderH1FontWeight,
            fontSize: styles.HeaderH1FontSize,
            lineHeight: styles.HeaderH1LineHeight,
            letterSpacing: styles.HeaderH1LetterSpacing,
        },
        h2: {
            fontFamily: styles.HeaderH2FontFamily,
            fontWeight: styles.HeaderH2FontWeight,
            fontSize: styles.HeaderH2FontSize,
            lineHeight: styles.HeaderH2LineHeight,
            letterSpacing: styles.HeaderH2LetterSpacing,

        }
    },
    palette: {
        mode: "light",
        common: {
            black: styles.CommonBlack,
            white: styles.CommonWhite,
        },
    }
});

//preview.ts
import type { Preview } from "@storybook/react";
import { CssBaseline, ThemeProvider } from "@mui/material";
import { withThemeFromJSXProvider } from "@storybook/addon-themes";
import { theme } from "./theme.ts";

const preview: Preview = {
    parameters: {
        controls: {
            expanded: true,
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/i
            }
        }
    },
    tags: ["autodocs"]
};
export const decorators = [
    withThemeFromJSXProvider({
        themes: {
            main: theme
        },
        defaultTheme: "main",
        Provider: ThemeProvider,
        GlobalStyles: CssBaseline
    })
];
export default preview;

rd-huerta commented 5 months ago

To do:

[x] Finish adding buttons to light theme in theme.ts
[x] add dark theme to theme.ts

rd-huerta commented 5 months ago

Resources from Anna(XD)

paul-thompson1 commented 5 months ago

Created dark theme and modified the light theme. Today, we'll create an example component to test the theme. Need to ask Natalia about the lineHeight values. At the moment the value is too large. If we define the lineHeight for the button we get a very large button height. Here are some screenshots of the light and dark theme:

And a screenshot of the button with the current lineHeight value:

Impactworkers / iw-complaint-manager