✨ Add theme

zubko · May 22, 2022 · 2fe3da1 · 2fe3da1
1 parent ef3e975
commit 2fe3da1
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 10 deletions.
diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js
@@ -1,3 +1,5 @@
+const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
+
 module.exports = {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
@@ -12,4 +14,13 @@ module.exports = {
   core: {
     builder: "@storybook/builder-webpack5",
   },
+  webpackFinal: async (config, { configType }) => {
+    config.resolve.plugins = [
+      ...(config.resolve.plugins || []),
+      new TsconfigPathsPlugin({
+        extensions: config.resolve.extensions,
+      }),
+    ];
+    return config;
+  },
 };
diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js
@@ -1,3 +1,4 @@
+import { ThemeProvider } from "@app/core/ui/theme/theme-provider";
 import { GlobalStyle } from "../src/GlobalStyle";
 
 export const parameters = {
@@ -12,9 +13,9 @@ export const parameters = {
 
 export const decorators = [
   (Story) => (
-    <>
+    <ThemeProvider>
       <GlobalStyle />
       <Story />
-    </>
+    </ThemeProvider>
   ),
 ];
diff --git a/frontend/package.json b/frontend/package.json
@@ -27,6 +27,7 @@
     "rxjs": "^7.5.5",
     "storybook-addon-pseudo-states": "^1.9.0",
     "styled-components": "^5.3.5",
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
   },

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,15 +1,17 @@
-import { MenuWireframe } from "./features/menu/wireframes/menu.wireframe";
-
+import { ThemeProvider } from "@app/core/ui/theme/theme-provider";
 import { devTools } from "@ngneat/elf-devtools";
+import { MenuWireframe } from "./features/menu/wireframes/menu.wireframe";
 import { GlobalStyle } from "./GlobalStyle";
 devTools();
 
 function App() {
   return (
-    <div className="App">
-      <GlobalStyle />
-      <MenuWireframe />
-    </div>
+    <ThemeProvider>
+      <div className="App">
+        <GlobalStyle />
+        <MenuWireframe />
+      </div>
+    </ThemeProvider>
   );
 }
 

diff --git a/frontend/src/core/ui/theme/api.ts b/frontend/src/core/ui/theme/api.ts
@@ -0,0 +1,8 @@
+import { Theme } from "./theme";
+
+export const color = (key: keyof typeof Theme["colors"]) => (props: any) =>
+  props.theme.colors[key];
+
+export const gradient =
+  (key: keyof typeof Theme["gradients"]) => (props: any) =>
+    props.theme.gradients[key];
diff --git a/frontend/src/core/ui/theme/theme-provider.tsx b/frontend/src/core/ui/theme/theme-provider.tsx
@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from "react";
+import { ThemeProvider as StyledThemeProvider } from "styled-components";
+import { Theme } from "./theme";
+
+export const ThemeProvider: FC<PropsWithChildren<{}>> = ({ children }) => (
+  <StyledThemeProvider theme={Theme}>{children}</StyledThemeProvider>
+);
diff --git a/frontend/src/core/ui/theme/theme.ts b/frontend/src/core/ui/theme/theme.ts
@@ -0,0 +1,14 @@
+export const Theme = {
+  colors: {
+    menuBg1: "#2ff75b",
+    menuBg2: "#26c94a",
+    pageBg: "white",
+    hover: "#ffff00",
+  },
+  gradients: {
+    buttonBg: "linear-gradient(180deg, #f8ff00 0%, #3ad59f 100%)",
+    buttonBgHover: "linear-gradient(180deg, #f8ff00 0%, #2a946f 100%)",
+    menuBg: "linear-gradient(0deg, #26c94a 0%, #2ff75b 100%)",
+    photoBg: "linear-gradient(180deg, #f9fff6 0%, #e3ffdd 100%)",
+  },
+};
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -6552,7 +6552,7 @@ enhanced-resolve@^4.5.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
-enhanced-resolve@^5.9.2:
+enhanced-resolve@^5.7.0, enhanced-resolve@^5.9.2:
   version "5.9.3"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz#44a342c012cbc473254af5cc6ae20ebd0aae5d88"
   integrity sha512-Bq9VSor+kjvW3f9/MiiR4eE3XYgOl7/rS8lnSxbRbF3kS0B2r+Y9w5krBWxZgDxASVZbdYrn5wT4j/Wb0J9qow==
@@ -13705,7 +13705,16 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
-tsconfig-paths@^3.14.1:
+tsconfig-paths-webpack-plugin@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-3.5.2.tgz#01aafff59130c04a8c4ebc96a3045c43c376449a"
+  integrity sha512-EhnfjHbzm5IYI9YPNVIxx1moxMI4bpHD2e0zTXeDNQcwjjRaGepP7IhTHJkyDBG0CAOoxRfe7jCG630Ou+C6Pw==
+  dependencies:
+    chalk "^4.1.0"
+    enhanced-resolve "^5.7.0"
+    tsconfig-paths "^3.9.0"
+
+tsconfig-paths@^3.14.1, tsconfig-paths@^3.9.0:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
   integrity sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==