From 2fe3da1d6f368759c5b2e98b99ba5642c540e65a Mon Sep 17 00:00:00 2001 From: Alexander Zubko Date: Sun, 22 May 2022 22:29:23 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20theme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/.storybook/main.js | 11 +++++++++++ frontend/.storybook/preview.js | 5 +++-- frontend/package.json | 1 + frontend/src/App.tsx | 14 ++++++++------ frontend/src/core/ui/theme/api.ts | 8 ++++++++ frontend/src/core/ui/theme/theme-provider.tsx | 7 +++++++ frontend/src/core/ui/theme/theme.ts | 14 ++++++++++++++ frontend/yarn.lock | 13 +++++++++++-- 8 files changed, 63 insertions(+), 10 deletions(-) create mode 100644 frontend/src/core/ui/theme/api.ts create mode 100644 frontend/src/core/ui/theme/theme-provider.tsx create mode 100644 frontend/src/core/ui/theme/theme.ts diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js index 10d7084..fa9f48c 100644 --- 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 index ceac25b..cf3837e 100644 --- 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) => ( - <> + - + ), ]; diff --git a/frontend/package.json b/frontend/package.json index 866cf9f..38518b4 100644 --- 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 index 3dd7143..2792148 100644 --- 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 ( -
- - -
+ +
+ + +
+ ); } diff --git a/frontend/src/core/ui/theme/api.ts b/frontend/src/core/ui/theme/api.ts new file mode 100644 index 0000000..e884e15 --- /dev/null +++ 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 new file mode 100644 index 0000000..bad17b0 --- /dev/null +++ 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> = ({ children }) => ( + {children} +); diff --git a/frontend/src/core/ui/theme/theme.ts b/frontend/src/core/ui/theme/theme.ts new file mode 100644 index 0000000..45f2f07 --- /dev/null +++ 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 index fae9c96..4f67f50 100644 --- 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==