From 194f8ca7fafd4294ca21803e316fa4f47867bfa8 Mon Sep 17 00:00:00 2001 From: coder12git Date: Tue, 7 Nov 2023 19:41:30 +0530 Subject: [PATCH 1/3] feat(core): fix build failure Signed-off-by: coder12git --- site/gatsby-browser.js | 6 + site/gatsby-config.js | 2 +- site/package-lock.json | 20 --- site/package.json | 1 - site/src/assets/images/ChevronDark.svg | 5 + .../images/ChevronDark.svg:Zone.Identifier | 0 site/src/assets/images/Weather.svg | 6 +- site/src/assets/images/WeatherDark.svg | 16 ++ site/src/components/Navigation/index.js | 20 ++- site/src/components/Sidebar/index.js | 142 +++++++++--------- site/src/components/Theme/index.js | 79 ++++++---- site/src/pages/index.js | 67 +++++---- site/src/styles/global.css | 15 +- site/tailwind.config.js | 5 +- 14 files changed, 212 insertions(+), 172 deletions(-) create mode 100644 site/src/assets/images/ChevronDark.svg create mode 100644 site/src/assets/images/ChevronDark.svg:Zone.Identifier create mode 100644 site/src/assets/images/WeatherDark.svg diff --git a/site/gatsby-browser.js b/site/gatsby-browser.js index 8b843acc..bfad2025 100644 --- a/site/gatsby-browser.js +++ b/site/gatsby-browser.js @@ -1 +1,7 @@ +import React from 'react' import "./src/styles/global.css" +import { ThemeProvider } from "./src/components/Theme" + +export const wrapRootElement = ({ element }) => ( + {element} +) \ No newline at end of file diff --git a/site/gatsby-config.js b/site/gatsby-config.js index 0e2b4e44..8a037186 100644 --- a/site/gatsby-config.js +++ b/site/gatsby-config.js @@ -6,5 +6,5 @@ module.exports = { title: `Sistent Design System | Layer5`, siteUrl: `https://design.layer5.io` }, - plugins: ["gatsby-plugin-postcss", 'gatsby-plugin-dark-mode'] + plugins: ["gatsby-plugin-postcss"] }; \ No newline at end of file diff --git a/site/package-lock.json b/site/package-lock.json index f2590e41..77aa3c9d 100644 --- a/site/package-lock.json +++ b/site/package-lock.json @@ -10,7 +10,6 @@ "dependencies": { "autoprefixer": "^10.4.16", "gatsby": "^5.12.4", - "gatsby-plugin-dark-mode": "^1.1.2", "gatsby-plugin-postcss": "^6.12.0", "postcss": "^8.4.31", "react": "^18.2.0", @@ -8613,17 +8612,6 @@ "@parcel/core": "^2.0.0" } }, - "node_modules/gatsby-plugin-dark-mode": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/gatsby-plugin-dark-mode/-/gatsby-plugin-dark-mode-1.1.2.tgz", - "integrity": "sha512-kq/7/KSIgyYxolSqLxXfmcC/iBU98XpRGcIOaa3bjjl8Tb0WDYwfa45zABx1XNjB0YecWdgniss+kqmeAu04GA==", - "dependencies": { - "prop-types": "^15.5.7" - }, - "peerDependencies": { - "react": "16.x" - } - }, "node_modules/gatsby-plugin-page-creator": { "version": "5.12.0", "resolved": "https://registry.npmjs.org/gatsby-plugin-page-creator/-/gatsby-plugin-page-creator-5.12.0.tgz", @@ -22302,14 +22290,6 @@ "@parcel/transformer-json": "2.8.3" } }, - "gatsby-plugin-dark-mode": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/gatsby-plugin-dark-mode/-/gatsby-plugin-dark-mode-1.1.2.tgz", - "integrity": "sha512-kq/7/KSIgyYxolSqLxXfmcC/iBU98XpRGcIOaa3bjjl8Tb0WDYwfa45zABx1XNjB0YecWdgniss+kqmeAu04GA==", - "requires": { - "prop-types": "^15.5.7" - } - }, "gatsby-plugin-page-creator": { "version": "5.12.0", "resolved": "https://registry.npmjs.org/gatsby-plugin-page-creator/-/gatsby-plugin-page-creator-5.12.0.tgz", diff --git a/site/package.json b/site/package.json index ee77c0d5..79a4cad7 100644 --- a/site/package.json +++ b/site/package.json @@ -17,7 +17,6 @@ "dependencies": { "autoprefixer": "^10.4.16", "gatsby": "^5.12.4", - "gatsby-plugin-dark-mode": "^1.1.2", "gatsby-plugin-postcss": "^6.12.0", "postcss": "^8.4.31", "react": "^18.2.0", diff --git a/site/src/assets/images/ChevronDark.svg b/site/src/assets/images/ChevronDark.svg new file mode 100644 index 00000000..8bb54b75 --- /dev/null +++ b/site/src/assets/images/ChevronDark.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/site/src/assets/images/ChevronDark.svg:Zone.Identifier b/site/src/assets/images/ChevronDark.svg:Zone.Identifier new file mode 100644 index 00000000..e69de29b diff --git a/site/src/assets/images/Weather.svg b/site/src/assets/images/Weather.svg index c1878a71..842300f1 100644 --- a/site/src/assets/images/Weather.svg +++ b/site/src/assets/images/Weather.svg @@ -1,5 +1,3 @@ - - - - + + diff --git a/site/src/assets/images/WeatherDark.svg b/site/src/assets/images/WeatherDark.svg new file mode 100644 index 00000000..d1eb4d51 --- /dev/null +++ b/site/src/assets/images/WeatherDark.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/site/src/components/Navigation/index.js b/site/src/components/Navigation/index.js index 7ba47851..fd9eb2ea 100644 --- a/site/src/components/Navigation/index.js +++ b/site/src/components/Navigation/index.js @@ -1,11 +1,15 @@ import React from "react"; import Search from '../../assets/images/Search.svg'; import SearchDark from "../../assets/images/SearchDark.svg"; -import ThemeToggle from "../Theme"; +import ThemeContext from "../Theme"; +import Weather from '../../assets/images/Weather.svg'; +import WeatherDark from '../../assets/images/WeatherDark.svg'; -const Navbar = ()=>{ - return ( - <> +const Navbar = () => { + return ( + + {theme => ( + <>
@@ -24,16 +28,18 @@ const Navbar = ()=>{
-
+
-
+
- ) + )} + + ) }; export default Navbar; \ No newline at end of file diff --git a/site/src/components/Sidebar/index.js b/site/src/components/Sidebar/index.js index 5d3b5d03..33e326b1 100644 --- a/site/src/components/Sidebar/index.js +++ b/site/src/components/Sidebar/index.js @@ -33,141 +33,141 @@ const Sidebar = () => {
{ drop1?
-
-
About Sistent
+
+
About Sistent
/
-
-
Introduction
+
+
Introduction
-
-
Principles
+
+
Principles
-
-
Contribution
+
+
Contribution
-
-
Support
+
+
Support
-
-
Case Studies
+
+
Case Studies
: -
-
About Sistent
+
+
About Sistent
/
}
-
+
{ drop2?
-
-
Identity
+
+
Identity
/
-
- Color +
+ Color
-
- Typography +
+ Typography
-
- Spacing +
+ Spacing
-
- Page Layouts +
+ Page Layouts
-
- Elevation +
+ Elevation
: -
-
Identity
+
+
Identity
/
}
{drop3?
-
-
Components
+
+
Components
/
-
-
Option 1
+
+
Option 1
-
-
Option 1
+
+
Option 1
-
-
Option 1
+
+
Option 1
-
-
Option 1
+
+
Option 1
-
-
Option 1
+
+
Option 1
: -
-
Components
+
+
Components
/
}
{drop4?
-
-
Patterns & Templates
+
+
Patterns & Templates
/
-
-
Option 1
+
+
Option 1
-
-
Option 1
+
+
Option 1
-
-
Option 1
+
+
Option 1
-
-
Option 1
+
+
Option 1
-
-
Option 1
+
+
Option 1
: -
-
Patterns & Templates
+
+
Patterns & Templates
/
}
{drop5?
-
-
Visualization & Illustration
+
+
Visualization & Illustration
/
-
-
Option 1
+
+
Option 1
-
-
Option 1
+
+
Option 1
-
-
Option 1
+
+
Option 1
-
-
Option 1
+
+
Option 1
-
-
Option 1
+
+
Option 1
: -
-
Visualization & Illustration
+
+
Visualization & Illustration
/
}
diff --git a/site/src/components/Theme/index.js b/site/src/components/Theme/index.js index 51800fe0..c86f1e77 100644 --- a/site/src/components/Theme/index.js +++ b/site/src/components/Theme/index.js @@ -1,33 +1,52 @@ import React from "react" -import { ThemeToggler } from "gatsby-plugin-dark-mode" -import Weather from '../../assets/images/Weather.svg'; -import Search from '../../assets/images/Search.svg'; -// import SearchDark from "../../assets/images/Search-dark.svg"; - -export default function ThemeToggle() { - return ( - - {({ theme, toggleTheme }) => ( - Toggle Theme toggleTheme(theme === 'dark' ? 'light' : 'dark')} - /> - - )} - - ) + +const defaultState = { + dark: false, + toggleDark: () => {}, } -// export function SearchToggle(){ -// return ( -// -// {({ theme}) => ( -// Toggle Search -// )} -// -// ) -// } \ No newline at end of file +const ThemeContext = React.createContext(defaultState) + +const supportsDarkMode = () => + window.matchMedia("(prefers-color-scheme: dark)").matches === true + +class ThemeProvider extends React.Component { + state = { + dark: false, + } + + toggleDark = () => { + let dark = !this.state.dark + localStorage.setItem("dark", JSON.stringify(dark)) + this.setState({ dark }) + } + + componentDidMount() { + // Getting dark mode value from localStorage! + const lsDark = JSON.parse(localStorage.getItem("dark")) + if (lsDark) { + this.setState({ dark: lsDark }) + } else if (supportsDarkMode()) { + this.setState({ dark: true }) + } + } + + render() { + const { children } = this.props + const { dark } = this.state + return ( + + {children} + + ) + } +} + +export default ThemeContext + +export { ThemeProvider } \ No newline at end of file diff --git a/site/src/pages/index.js b/site/src/pages/index.js index 62940715..8d92b9dc 100644 --- a/site/src/pages/index.js +++ b/site/src/pages/index.js @@ -1,50 +1,55 @@ -import * as React from "react" +import * as React from "react"; import { BrowserRouter as Router, Route, Routes, Navigate, } from "react-router-dom"; -import Navbar from "../components/Navigation" -import Sidebar from "../components/Sidebar" -import Footer from "../components/Footer" +import Navbar from "../components/Navigation"; +import Sidebar from "../components/Sidebar"; +import Footer from "../components/Footer"; import Home from "./home"; import Color from "./identity/colors"; import Typography from "./identity/typography"; import Elevation from "./identity/elevation"; import Spacing from "./identity/spacing"; import PageLayout from "./identity/page-layouts"; -import ThemeToggle from "../components/Theme"; import '../styles/global.css'; +import ThemeContext from "../components/Theme"; const IndexPage = () => { -const routes = ( - - } exact/> - } exact/> - } exact/> - } exact/> - } exact/> - } exact/> - } exact/> - } exact/> - } /> - -) + const routes = ( + + } exact /> + } exact /> + } exact /> + } exact /> + } exact /> + } exact /> + } exact /> + } exact /> + } /> + + ); + return ( -
- - -
- -
{routes}
-
-
- -
- ) + + {theme => ( +
+ + +
+ +
{routes}
+
+
+ +
+ )} + + ); } -export default IndexPage +export default IndexPage; -export const Head = () => Layer5 Design System +export const Head = () => Layer5 Design System; diff --git a/site/src/styles/global.css b/site/src/styles/global.css index 771f6a79..e447e09e 100644 --- a/site/src/styles/global.css +++ b/site/src/styles/global.css @@ -6,14 +6,17 @@ @tailwind utilities; /* Global.css */ -:root { +.light { --border-strong: #647176; --border-default: #EAEDEE; --background-default: #FDFDFD; - --text-brand: #007763; - --background-brand-default: #007763; + --text-brand: #51636B; + --background-brand-default: #51636B; --text-default: #000D12; --search-default: #15272F; + --text-secondary: #3C494E; + --border-brand: #007763; + --background-brand-tertiary: #DAF2EB; } /* Define dark mode styles */ @@ -25,11 +28,11 @@ --background-brand-default: #00B39F; --text-default: #FDFDFD; --search-default: #E7EFF3; + --text-secondary: #EAEDEE; + --border-brand: #8D9FA7; + --background-brand-tertiary: #00403F; } -body { - background-color: var(--background-default); -} @font-face { font-family: "Qanelas Soft Black"; src: url('../assets/fonts/qanelas-soft/QanelasSoftBlack.otf') format('opentype'); diff --git a/site/tailwind.config.js b/site/tailwind.config.js index 5c345881..56bd19b5 100644 --- a/site/tailwind.config.js +++ b/site/tailwind.config.js @@ -14,7 +14,10 @@ module.exports = { 'text-brand': 'var(--text-brand)', 'background-brand-default': 'var(--background-brand-default)', 'text-default': 'var(--text-default)', - 'search-default': 'var(--search-default)' + 'search-default': 'var(--search-default)', + 'text-secondary': 'var(--text-secondary)', + 'border-brand': 'var(--border-brand)', + 'background-brand-tertiary': 'var(--background-brand-tertiary)', }, }, fontFamily: { From e09d7c0d4c9899874cbdb0de9b592f8c3e7a3e07 Mon Sep 17 00:00:00 2001 From: coder12git Date: Tue, 7 Nov 2023 20:00:51 +0530 Subject: [PATCH 2/3] feat(core): modify theme.js Signed-off-by: coder12git --- site/src/components/Theme/index.js | 65 +++++++++++++----------------- 1 file changed, 29 insertions(+), 36 deletions(-) diff --git a/site/src/components/Theme/index.js b/site/src/components/Theme/index.js index c86f1e77..e59dc549 100644 --- a/site/src/components/Theme/index.js +++ b/site/src/components/Theme/index.js @@ -1,52 +1,45 @@ -import React from "react" +import React, { useState, useEffect } from "react"; const defaultState = { dark: false, toggleDark: () => {}, -} +}; -const ThemeContext = React.createContext(defaultState) +const ThemeContext = React.createContext(defaultState); const supportsDarkMode = () => - window.matchMedia("(prefers-color-scheme: dark)").matches === true + window.matchMedia("(prefers-color-scheme: dark)").matches === true; -class ThemeProvider extends React.Component { - state = { - dark: false, - } +function ThemeProvider({ children }) { + const [dark, setDark] = useState(false); - toggleDark = () => { - let dark = !this.state.dark - localStorage.setItem("dark", JSON.stringify(dark)) - this.setState({ dark }) - } + const toggleDark = () => { + const newDark = !dark; + localStorage.setItem("dark", JSON.stringify(newDark)); + setDark(newDark); + }; - componentDidMount() { + useEffect(() => { // Getting dark mode value from localStorage! - const lsDark = JSON.parse(localStorage.getItem("dark")) + const lsDark = JSON.parse(localStorage.getItem("dark")); if (lsDark) { - this.setState({ dark: lsDark }) + setDark(lsDark); } else if (supportsDarkMode()) { - this.setState({ dark: true }) + setDark(true); } - } - - render() { - const { children } = this.props - const { dark } = this.state - return ( - - {children} - - ) - } + }, []); + + return ( + + {children} + + ); } -export default ThemeContext - -export { ThemeProvider } \ No newline at end of file +export default ThemeContext; +export { ThemeProvider }; From b29f6e02da8c5c4e47349e68ef8dfc44fa967fbf Mon Sep 17 00:00:00 2001 From: coder12git Date: Tue, 7 Nov 2023 20:27:56 +0530 Subject: [PATCH 3/3] feat(core): fixed typo and added useContext Signed-off-by: coder12git --- site/src/components/Navigation/index.js | 8 +++----- site/src/components/Theme/index.js | 6 +++--- site/src/pages/index.js | 7 ++----- 3 files changed, 8 insertions(+), 13 deletions(-) diff --git a/site/src/components/Navigation/index.js b/site/src/components/Navigation/index.js index fd9eb2ea..87352145 100644 --- a/site/src/components/Navigation/index.js +++ b/site/src/components/Navigation/index.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, {useContext} from "react"; import Search from '../../assets/images/Search.svg'; import SearchDark from "../../assets/images/SearchDark.svg"; import ThemeContext from "../Theme"; @@ -6,9 +6,9 @@ import Weather from '../../assets/images/Weather.svg'; import WeatherDark from '../../assets/images/WeatherDark.svg'; const Navbar = () => { + const theme = useContext(ThemeContext) + return ( - - {theme => ( <>
@@ -37,8 +37,6 @@ const Navbar = () => {
- )} - ) }; diff --git a/site/src/components/Theme/index.js b/site/src/components/Theme/index.js index e59dc549..15e2d505 100644 --- a/site/src/components/Theme/index.js +++ b/site/src/components/Theme/index.js @@ -21,9 +21,9 @@ function ThemeProvider({ children }) { useEffect(() => { // Getting dark mode value from localStorage! - const lsDark = JSON.parse(localStorage.getItem("dark")); - if (lsDark) { - setDark(lsDark); + const isDark = JSON.parse(localStorage.getItem("dark")); + if (isDark) { + setDark(isDark); } else if (supportsDarkMode()) { setDark(true); } diff --git a/site/src/pages/index.js b/site/src/pages/index.js index 8d92b9dc..3e096f34 100644 --- a/site/src/pages/index.js +++ b/site/src/pages/index.js @@ -1,4 +1,4 @@ -import * as React from "react"; +import React, {useContext} from "react"; import { BrowserRouter as Router, Route, @@ -18,6 +18,7 @@ import '../styles/global.css'; import ThemeContext from "../components/Theme"; const IndexPage = () => { + const theme = useContext(ThemeContext); const routes = ( } exact /> @@ -33,8 +34,6 @@ const IndexPage = () => { ); return ( - - {theme => (
@@ -45,8 +44,6 @@ const IndexPage = () => {
- )} - ); }