From 4cb3fba14a4e3c28af76d7129796e4ff754d96ad Mon Sep 17 00:00:00 2001 From: RustamRu Date: Sun, 10 Nov 2024 02:45:54 +0300 Subject: [PATCH] add theme config --- package-lock.json | 18 ++++++++ package.json | 2 + src/containers/LandingThemeProvider/Fonts.tsx | 31 ++++++++++++++ .../LandingThemeProvider.tsx | 13 ++++++ src/containers/LandingThemeProvider/index.ts | 1 + .../LandingThemeProvider/theme-config.ts | 42 +++++++++++++++++++ src/containers/index.ts | 1 + 7 files changed, 108 insertions(+) create mode 100644 src/containers/LandingThemeProvider/Fonts.tsx create mode 100644 src/containers/LandingThemeProvider/LandingThemeProvider.tsx create mode 100644 src/containers/LandingThemeProvider/index.ts create mode 100644 src/containers/LandingThemeProvider/theme-config.ts create mode 100644 src/containers/index.ts diff --git a/package-lock.json b/package-lock.json index 33173d8..023797a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,11 +14,13 @@ "@chakra-ui/react": "^2.4.2", "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", + "@fontsource/open-sans": "^5.1.0", "@types/react": "^18.3.12", "express": "^4.21.1", "framer-motion": "^6.2.8", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-icons": "^5.3.0", "react-router-dom": "^6.27.0" }, "devDependencies": { @@ -3303,6 +3305,12 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@fontsource/open-sans": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-5.1.0.tgz", + "integrity": "sha512-g+mjF8gWUDwck9DrRCkhmFeEj7fskjtKZJKAQguVzSg93lc6ThakTHMRgs0dZfe5qBbktrV839tDrb4bIDyZSA==", + "license": "OFL-1.1" + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", @@ -9073,6 +9081,15 @@ } } }, + "node_modules/react-icons": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz", + "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -9953,6 +9970,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-4.0.0.tgz", "integrity": "sha512-1V4WqhhZZgjVAVJyt7TdDPZoPBPNHbekX4fWnCJL1yQukhCeZhJySUL+gL9y6sNdN95uEOS83Y55SqHcP7MzLA==", + "license": "MIT", "engines": { "node": ">= 18.12.0" }, diff --git a/package.json b/package.json index f951faf..ace3313 100644 --- a/package.json +++ b/package.json @@ -22,11 +22,13 @@ "@chakra-ui/react": "^2.4.2", "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", + "@fontsource/open-sans": "^5.1.0", "@types/react": "^18.3.12", "express": "^4.21.1", "framer-motion": "^6.2.8", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-icons": "^5.3.0", "react-router-dom": "^6.27.0" }, "devDependencies": { diff --git a/src/containers/LandingThemeProvider/Fonts.tsx b/src/containers/LandingThemeProvider/Fonts.tsx new file mode 100644 index 0000000..5e72244 --- /dev/null +++ b/src/containers/LandingThemeProvider/Fonts.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { Global } from '@emotion/react'; +import '@fontsource/open-sans/400.css'; +import '@fontsource/open-sans/700.css'; + +const Fonts = () => ( + +); + +export default Fonts; diff --git a/src/containers/LandingThemeProvider/LandingThemeProvider.tsx b/src/containers/LandingThemeProvider/LandingThemeProvider.tsx new file mode 100644 index 0000000..c52bf1d --- /dev/null +++ b/src/containers/LandingThemeProvider/LandingThemeProvider.tsx @@ -0,0 +1,13 @@ +import React, { FC, PropsWithChildren } from 'react'; +import { ChakraProvider } from '@chakra-ui/react'; +import { default as landingTheme } from './theme-config'; +import Fonts from './Fonts'; + +export const LandingThemeProvider: FC = ({ children }) => { + return ( + + + {children} + + ); +}; diff --git a/src/containers/LandingThemeProvider/index.ts b/src/containers/LandingThemeProvider/index.ts new file mode 100644 index 0000000..b68aca1 --- /dev/null +++ b/src/containers/LandingThemeProvider/index.ts @@ -0,0 +1 @@ +export { LandingThemeProvider } from './LandingThemeProvider'; \ No newline at end of file diff --git a/src/containers/LandingThemeProvider/theme-config.ts b/src/containers/LandingThemeProvider/theme-config.ts new file mode 100644 index 0000000..43a0676 --- /dev/null +++ b/src/containers/LandingThemeProvider/theme-config.ts @@ -0,0 +1,42 @@ +import { extendTheme } from '@chakra-ui/react'; + +const overrides = { + colors: { + primary: { + 50: "#F1F8ED", + 100: "#D9EACC", + 200: "#C0DDAC", + 300: "#A8D08B", + 400: "#8FC26B", + 500: "#77B54A", + 600: "#5F913B", + 700: "#476D2C", + 800: "#2F481E", + 900: "#18240F" + }, + secondary: { + 50: "#E7F7FD", + 100: "#BCEAFB", + 200: "#91DCF8", + 300: "#66CEF5", + 400: "#3BC1F2", + 500: "#0FB3F0", + 600: "#0C8FC0", + 700: "#096B90", + 800: "#064860", + 900: "#032430" + } + }, + fonts: { + heading: `'Open Sans', sans-serif`, + }, + styles: { + global: { + body: { + bg: 'gray.100' + } + }, + }, +}; + +export default extendTheme(overrides); \ No newline at end of file diff --git a/src/containers/index.ts b/src/containers/index.ts new file mode 100644 index 0000000..f2db842 --- /dev/null +++ b/src/containers/index.ts @@ -0,0 +1 @@ +export * from './LandingThemeProvider'; \ No newline at end of file