init

content/templates/react/theme/create.ts

@@ -0,0 +1,60 @@
+import chroma from 'chroma-js';
+import { Theme } from './theme';
+
+const WHITE = chroma('white');
+const BLACK = chroma('black');
+
+type CreateOptions = {
+  baseColor?: string;
+};
+
+const isBright = (color: chroma.Color) => color.luminance() > 0.4;
+
+const createTheme = (options: CreateOptions = {}) => {
+  const baseColor = options.baseColor
+    ? chroma(options.baseColor)
+    : chroma.random();
+  const text = isBright(baseColor) ? BLACK : WHITE;
+  const bg = isBright(baseColor)
+    ? baseColor.luminance(0.9)
+    : baseColor.luminance(0.01);
+  const theme: Theme = {
+    typography: {
+      Jumbo: {
+        weight: 'bold',
+        size: 2.8,
+      },
+      Title1: {
+        weight: 'bold',
+      },
+      Title2: {
+        weight: 'bold',
+        size: 1.3,
+      },
+      Body1: {},
+      Overline: {
+        size: 0.8,
+        upperCase: true,
+      },
+      Caption: {
+        size: 0.8,
+      },
+      Link: {
+        upperCase: true,
+        weight: 'bold',
+      },
+    },
+    colors: {
+      primary: baseColor.hex(),
+      foreground: text.hex(),
+      background: bg.hex(),
+    },
+    font: {
+      baseSize: 16,
+    },
+  };
+  return theme;
+};
+
+export { createTheme };
+

content/templates/react/theme/global.d.ts

@@ -0,0 +1,6 @@
+import {} from 'styled-components';
+import { Theme } from './theme';
+declare module 'styled-components' {
+  export interface DefaultTheme extends Theme {}
+}
+

content/templates/react/theme/index.ts

@@ -0,0 +1,5 @@
+import { createTheme } from './create';
+import { ThemeProvider } from './provider';
+
+export * from './theme';
+export { createTheme, ThemeProvider };

content/templates/react/theme/provider.tsx

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import { ThemeProvider as StyledThemeProvider } from 'styled-components';
+import { Theme } from './theme';
+
+type Props = {
+  theme: Theme;
+  children: ReactNode;
+};
+
+const ThemeProvider: React.FC<Props> = ({ theme, children }) => (
+  <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
+);
+
+export { ThemeProvider };

content/templates/react/theme/theme.ts

@@ -0,0 +1,30 @@
+type Typography = {
+  family?: string;
+  size?: number;
+  spacing?: number;
+  weight?: string;
+  upperCase?: boolean;
+};
+
+type Theme = {
+  typography: {
+    Jumbo: Typography;
+    Title2: Typography;
+    Title1: Typography;
+    Body1: Typography;
+    Caption: Typography;
+    Overline: Typography;
+    Link: Typography;
+  };
+  colors: {
+    primary: string;
+    foreground: string;
+    background: string;
+  };
+  font: {
+    baseSize: number;
+    family?: string;
+  };
+};
+
+export type { Theme, Typography };