Adding themes to token architecture

[georgewrmarshall]

Description

Updating the CSS-in-JS architecture to include themes so we can change the theme object at the top level without worrying about constructing theme specific styles further down the tree e.g combining color with shadow.

• Theme specific tokens live in the src/js/themes/ directory and import global tokens from src/js
• lightTheme and darkTheme objects are exported and will contain all design tokens color, typography etc.

lightTheme: {
    colors: {
        // light theme colors
    },
    typography: {
        // global typography but could be themed
    },
    // ...rest of the design tokens
}

This could be how the new theme tokens could work

import { lightTheme, darkTheme } from '@metamask/design-tokens';

<Provider theme={theme === 'default' ? lightTheme : darkTheme}  />

const createStyles = (theme: any) =>
	StyleSheet.create({
		info: {
			backgroundColor: theme.colors.info.muted,
			borderColor: theme.colors.info.default,
			fontSize: theme.typography.sBodyMD.fontSize,
			fontWeight: theme.typography.sBodyMD.fontWeight,
		},
		warning: {
			backgroundColor: theme.colors.warning.muted,
			borderColor: theme.colors.warning.default,
			fontSize: theme.typography.sBodyMD.fontSize,
			fontWeight: theme.typography.sBodyMD.fontWeight,
		},
		error: {
			backgroundColor: theme.colors.error.muted,
			borderColor: theme.colors.error.default,
			fontSize: theme.typography.sBodyMD.fontSize,
			fontWeight: theme.typography.sBodyMD.fontWeight,
		},
	});

const { theme } = useAppThemeFromContext() || mockTheme;
	const styles = createStyles(theme);

To do

• Update docs once we have consensus on structure

[metamaskbot]

Builds ready [aaad3a5]

• storybook: Storybook
• all artifacts

[metamaskbot]

Builds ready [cc51e47]

• storybook: Storybook
• all artifacts

[metamaskbot]

Builds ready [8963807]

• storybook: Storybook
• all artifacts

[metamaskbot]

Builds ready [0a298ce]

• storybook: Storybook
• all artifacts

[metamaskbot]

Builds ready [2f6aa8a]

• storybook: Storybook
• all artifacts

[Cal-L]

LGTM

[georgewrmarshall]

Closes #141