Refactored to use PrimeFlex v4 theming

jepsar · Aug 26, 2023 · bb24bda · bb24bda
1 parent 35a8708
commit bb24bda
Show file tree

Hide file tree

Showing 14 changed files with 40 additions and 54 deletions.
diff --git a/components/layout/appcontentcontext.js b/components/layout/appcontentcontext.js
diff --git a/components/layout/layout.js b/components/layout/layout.js
@@ -3,7 +3,6 @@ import { useRouter } from 'next/router';
 import { classNames } from 'primereact/utils';
 import { useEffect, useState } from 'react';
 import NewsSection from '../news/newssection';
-import AppContentContext from './appcontentcontext';
 import Footer from './footer';
 import Menu from './menu';
 import Topbar from './topbar';
@@ -12,11 +11,6 @@ export default function Layout(props) {
     const [sidebarActive, setSidebarActive] = useState(false);
     const router = useRouter();
 
-    const wrapperClassName = classNames('layout-wrapper', {
-        'layout-wrapper-dark': props.dark,
-        'layout-wrapper-light': !props.dark,
-        'layout-news-active': props.newsActive
-    });
     const maskClassName = classNames('layout-mask', {
         'layout-mask-active': sidebarActive
     });
@@ -51,9 +45,9 @@ export default function Layout(props) {
     }, [router]);
 
     return (
-        <div className={wrapperClassName}>
+        <div className="layout-wrapper">
             <Head>
-                <title>PrimeFlex - Utility-First CSS Library</title>
+                <title>PrimeFlex - Utility First CSS Library</title>
                 <meta charSet="UTF-8" />
                 <meta name="description" content="PrimeFlex is a utility-first CSS library." />
                 <meta name="robots" content="index, follow" />
@@ -63,7 +57,7 @@ export default function Layout(props) {
                 <meta name="twitter:title" content="PrimeFlex | Utility-First CSS Library" />
                 <meta name="twitter:description" content="PrimeFlex is a utility-first CSS library." />
                 <meta property="og:type" content="website"></meta>
-                <meta property="og:title" content="PrimeFlex - Utility-First CSS Library"></meta>
+                <meta property="og:title" content="PrimeFlex - Utility First CSS Library"></meta>
                 <meta property="og:url" content="https://primeflex.org"></meta>
                 <meta property="og:description" content="PrimeFlex is a utility-first CSS library." />
                 <meta property="og:image" content="https://www.primefaces.org/static/social/primeflex-preview.jpg"></meta>
@@ -73,20 +67,12 @@ export default function Layout(props) {
             {props.newsActive && <NewsSection announcement={props.announcement} onClose={props.onNewsClose} />}
             <Topbar dark={props.dark} onMenuButtonClick={onMenuButtonClick} onToggleColorScheme={toggleColorScheme} />
             <Menu active={sidebarActive} darkTheme={props.dark} />
-            <AppContentContext.Provider
-                value={{
-                    ripple: true,
-                    inputStyle: 'outlined',
-                    darkTheme: props.dark
-                }}
-            >
-                <div className="layout-content">
-                    <div className="layout-content-inner">
-                        {props.children}
-                        <Footer></Footer>
-                    </div>
+            <div className="layout-content">
+                <div className="layout-content-inner">
+                    {props.children}
+                    <Footer></Footer>
                 </div>
-            </AppContentContext.Provider>
+            </div>
             <div className={maskClassName} onClick={onMaskClick}></div>
         </div>
     );

diff --git a/pages/_app.js b/pages/_app.js
@@ -1,5 +1,5 @@
 import '@docsearch/css';
-import { DomHandler } from 'primereact/utils';
+import { classNames } from 'primereact/utils';
 import { useEffect, useRef, useState } from 'react';
 import Layout from '../components/layout/layout';
 import AnnouncementData from '../data/news.json';
@@ -12,6 +12,7 @@ export default function MyApp({ Component }) {
     const [newsActive, setNewsActive] = useState(false);
     const announcement = useRef(AnnouncementData);
     const storageKey = 'primeflex-news';
+    const theme = dark ? 'primeone-dark' : 'primeone-light';
 
     const props = {
         dark: dark,
@@ -55,21 +56,29 @@ export default function MyApp({ Component }) {
         }
     }, []);
 
-    useEffect(() => {
+    /*useEffect(() => {
         DomHandler.addClass(document.body, dark ? 'layout-dark' : 'layout-light');
 
         return () => {
             DomHandler.removeMultipleClasses(document.body, 'layout-dark layout-light');
         };
-    }, [dark]);
+    }, [dark]);*/
+
+    let content;
 
     if (Component.getLayout) {
-        return Component.getLayout(<Component {...props} />);
+        content = Component.getLayout(<Component {...props} />);
     } else {
-        return (
+        content = (
             <Layout {...props}>
                 <Component {...props} />
             </Layout>
         );
     }
+
+    return (
+        <div className={classNames('app', { 'app-news-active': props.newsActive })} data-pf-theme={theme}>
+            {content}
+        </div>
+    );
 }
diff --git a/pages/index.js b/pages/index.js
@@ -1,5 +1,4 @@
 import Head from 'next/head';
-import { classNames } from 'primereact/utils';
 import NewsSection from '../components/news/newssection';
 import AnimationsSection from './landing/animationssection';
 import BlocksSection from './landing/blockssection';
@@ -12,16 +11,14 @@ import StyleSection from './landing/stylesection';
 import UsersSection from './landing/userssection';
 
 export default function Home(props) {
-    const rootClassName = classNames('landing', { 'landing-light': !props.dark, 'landing-dark': props.dark, 'landing-news-active': props.newsActive });
-
     const toggleColorScheme = () => {
         props.onThemeChange(!props.dark);
     };
 
     return (
-        <div className={rootClassName}>
+        <div className="landing">
             <Head>
-                <title>PrimeFlex - Utility-First CSS Library</title>
+                <title>PrimeFlex - Utility First CSS Library</title>
                 <meta charSet="UTF-8" />
                 <meta name="description" content="PrimeFlex is a utility-first CSS library." />
                 <meta name="robots" content="index, follow" />
@@ -31,7 +28,7 @@ export default function Home(props) {
                 <meta name="twitter:title" content="PrimeFlex | Utility-First CSS Library" />
                 <meta name="twitter:description" content="PrimeFlex is a utility-first CSS library." />
                 <meta property="og:type" content="website"></meta>
-                <meta property="og:title" content="PrimeFlex - Utility-First CSS Library"></meta>
+                <meta property="og:title" content="PrimeFlex - Utility First CSS Library"></meta>
                 <meta property="og:url" content="https://primeflex.org"></meta>
                 <meta property="og:description" content="PrimeFlex is a utility-first CSS library." />
                 <meta property="og:image" content="https://www.primefaces.org/static/social/primeflex-preview.jpg"></meta>

diff --git a/styles/layout/_code.scss b/styles/layout/_code.scss
@@ -274,7 +274,7 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus {
     text-decoration: none;
 }
 
-.layout-wrapper-dark {
+[data-pf-theme="primeone-dark"] {
     pre[class*="language-"] {
         code {
             .token {
@@ -331,7 +331,7 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus {
     }
 }
 
-.layout-wrapper-light {
+[data-pf-theme="primeone-light"] {
     pre[class*="language-"] {
         code {
             .token {

diff --git a/styles/layout/_doc.scss b/styles/layout/_doc.scss
@@ -309,7 +309,8 @@
         }
     }
 }
-.layout-wrapper-light {
+
+[data-pf-theme="primeone-light"] {
     .doc-section-description {
         > p {
             i {
@@ -320,7 +321,7 @@
     }
 }
 
-.layout-wrapper-dark {
+[data-pf-theme="primeone-dark"] {
     .doc-section-description {
         > p {
             i {

diff --git a/styles/layout/_layout_dark.scss b/styles/layout/_layout_dark.scss
@@ -1,4 +1,4 @@
-.layout-dark {
+[data-pf-theme="primeone-dark"] {
     --surface-a: #00031a;
     --surface-b: #191c31;
     --surface-c: #333548;

diff --git a/styles/layout/_layout_light.scss b/styles/layout/_layout_light.scss
@@ -1,4 +1,4 @@
-.layout-light {
+[data-pf-theme="primeone-light"] {
     --surface-a: #ffffff;
     --surface-b: #efefef;
     --surface-c: #e9ecef;

diff --git a/styles/layout/_layout_wrapper_dark.scss b/styles/layout/_layout_wrapper_dark.scss
@@ -1,4 +1,4 @@
-.layout-wrapper-dark {
+[data-pf-theme="primeone-dark"] {
     --body-bg: rgb(8, 19, 37);
     --body-bg-image: url("https://www.primefaces.org/cdn/primeflex/images/headerfx.png");
     --menu-bg: rgb(8, 19, 37);

diff --git a/styles/layout/_layout_wrapper_light.scss b/styles/layout/_layout_wrapper_light.scss
@@ -1,4 +1,4 @@
-.layout-wrapper-light {
+[data-pf-theme="primeone-light"] {
     --body-bg: #f6f7f9;
     --body-bg-image: url("https://www.primefaces.org/cdn/primeflex/images/headerfxlight.png");
     --menu-bg: #f6f7f9;

diff --git a/styles/layout/_news.scss b/styles/layout/_news.scss
@@ -51,13 +51,11 @@
     }
 }
 
-.landing-news-active {
+.app-news-active {
     .landing-header-section {
         padding-top: 3.5rem;
     }
-}
 
-.layout-news-active {
     .layout-sidebar,
     .layout-topbar,
     .layout-config {
@@ -73,4 +71,4 @@
     .doc-table tbody td > i {
         scroll-margin-top: 8.5rem;
     }
-}
+}
diff --git a/styles/layout/landing/_dark.scss b/styles/layout/landing/_dark.scss
@@ -1,4 +1,4 @@
-.landing-dark {
+[data-pf-theme="primeone-dark"] {
     --landing-body-bg: #00031a;
     --landing-text-color: #c9c9c9;
     --landing-border: 1px solid rgba(255, 255, 255, 0.1);

diff --git a/styles/layout/landing/_light.scss b/styles/layout/landing/_light.scss
@@ -1,4 +1,4 @@
-.landing-light {
+[data-pf-theme="primeone-light"] {
     --landing-body-bg: #fff;
     --landing-text-color: #333333;
     --landing-border: 1px solid rgba(0, 0, 0, 0.1);

diff --git a/styles/prism.scss b/styles/prism.scss
@@ -293,7 +293,7 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus {
     text-decoration: none;
 }
 
-.layout-wrapper-dark {
+[data-pf-theme="primeone-dark"] {
     pre[class*="language-"] {
         position: relative;
         background: transparent !important;
@@ -373,7 +373,7 @@ div.code-toolbar > .toolbar > .toolbar-item > span:focus {
     }
 }
 
-.layout-wrapper-light {
+[data-pf-theme="primeone-light"] {
     pre[class*="language-"] {
         position: relative;
         background: transparent !important;