From d698dbe3b9c74abccbe0349b9a819a58f43546dc Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 7 Feb 2024 15:14:37 +0300
Subject: [PATCH] Migrated app to CSS variables

---
 assets/styles/layout/_code.scss               | 20 +-----
 assets/styles/layout/_config.scss             | 42 ------------
 assets/styles/layout/_core.scss               |  4 ++
 assets/styles/layout/_doc.scss                | 65 ++++++++-----------
 assets/styles/layout/_footer.scss             |  4 +-
 assets/styles/layout/_glow.scss               |  4 +-
 assets/styles/layout/_mixins.scss             |  2 +-
 assets/styles/layout/_news.scss               |  2 +-
 assets/styles/layout/_sidebar.scss            | 26 ++++----
 assets/styles/layout/layout.scss              |  1 -
 .../styles/layout/variables/main/_dark.scss   |  8 +--
 .../styles/layout/variables/main/_light.scss  |  6 --
 components/lib/theme/aura/index.js            |  2 +-
 layouts/AppTopBar.vue                         |  7 +-
 layouts/default.vue                           | 17 +----
 pages/index.vue                               |  2 +-
 16 files changed, 58 insertions(+), 154 deletions(-)
 delete mode 100644 assets/styles/layout/_config.scss

diff --git a/assets/styles/layout/_code.scss b/assets/styles/layout/_code.scss
index 405f930a0..e66e3ed0c 100644
--- a/assets/styles/layout/_code.scss
+++ b/assets/styles/layout/_code.scss
@@ -128,24 +128,6 @@ pre[class*="language-"] {
 
 pre[class*="language-"] {    
     code {
-        background: var(--demo-code-bg);
-    }
-}
-
-.layout-light {
-    &[data-p-theme^="md"] {
-        pre[class*="language-"] {    
-            code {
-                background: var(--surface-900);
-            }
-        }
-    }
-
-    &[data-p-theme^="aura-light-noir"] {
-        pre[class*="language-"] {    
-            code {
-                background: var(--surface-950);
-            }
-        }
+        background: var(--p-dark-surface-900, var(--p-surface-800));
     }
 }
\ No newline at end of file
diff --git a/assets/styles/layout/_config.scss b/assets/styles/layout/_config.scss
deleted file mode 100644
index ba97708ee..000000000
--- a/assets/styles/layout/_config.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-.layout-config {
-    backdrop-filter: blur(20px);
-    background-color: var(--mobile-menu-bg);
-
-    .p-selectbutton {
-        .p-button {
-            padding: 0.5rem 1rem;
-        }
-    }
-
-    button {
-        &:focus-visible {
-            outline: 0 none;
-            border-color: var(--surface-500) !important;
-        }
-    }
-
-    .grid {
-        > div {
-            padding: 1rem;
-        }
-    }
-
-    .p-inputswitch {
-        .p-inputswitch-slider {
-            border-radius: 30px;
-            
-            &:before {
-                border-radius: 30px;
-            }
-        }
-    }
-
-    &.layout-light {
-        background: var(--surface-overlay);
-    }
-
-    &.layout-dark {
-        background: var(rgba(0,0,0,.3));
-        border: 0 none;
-    }
-}
\ No newline at end of file
diff --git a/assets/styles/layout/_core.scss b/assets/styles/layout/_core.scss
index 4bf5e87d6..f8f904ad2 100644
--- a/assets/styles/layout/_core.scss
+++ b/assets/styles/layout/_core.scss
@@ -16,6 +16,10 @@ body {
     font-feature-settings: var(--p-font-feature-settings);
 }
 
+.layout-wrapper {
+    background-color: var(--p-surface-ground);
+}
+
 a {
     text-decoration: none;
 }
diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss
index 7e0d278f7..ec04680aa 100644
--- a/assets/styles/layout/_doc.scss
+++ b/assets/styles/layout/_doc.scss
@@ -12,7 +12,7 @@
         position: absolute;
         bottom: 0;
         width: 100%;
-        border-bottom: 1px solid var(--surface-border);
+        border-bottom: 1px solid var(--p-surface-border);
         content: '';
     }
 
@@ -26,19 +26,19 @@
             display: block;
             padding: 0 2rem 1rem 2rem;
             text-align: center;
-            color: var(--surface-700);
+            color: var(--p-text-color);
             font-size: 1rem;
             letter-spacing: 1px;
             cursor: pointer;
             margin: 0;
             transition: all 0.2s;
             border-bottom: 1px solid transparent;
-            border-top-right-radius: var(--border-round);
-            border-top-left-radius: var(--border-round);
+            border-top-right-radius: var(--p-border-radius);
+            border-top-left-radius: var(--p-border-radius);
             white-space: nowrap;
 
             &:hover {
-                border-bottom-color: var(--surface-500);
+                border-bottom-color: var(--p-dark-surface-600, var(--p-surface-400));
             }
 
             &:focus {
@@ -78,7 +78,7 @@
 
     p {
         font-size: 1.125rem;
-        color: var(--text-color);
+        color: var(--p-text-color);
         margin: 0;
 
         a {
@@ -102,7 +102,7 @@
         margin-left: 1rem;
         display: none;
         transition: all .2s;
-        border-radius: var(--border-radius);
+        border-radius: var(--p-border-radius);
         @include focus-visible();
     }
 
@@ -120,7 +120,7 @@
 .doc-section-description {
     > p {
         font-size: 1rem;
-        color: var(--text-color);
+        color: var(--p-text-color);
 
         i {
             border-radius: 6px;
@@ -128,8 +128,8 @@
             font-size: .875rem;
             font-weight: 500;
             font-style: normal;
-            background-color: var(--doc-highlight-text-bg);
-            color: var(--doc-highlight-text-color);
+            background-color: var(--p-dark-surface-800, var(--p-surface-200));
+            color: var(--p-dark-surface-300, var(--p-surface-700));
         }
 
         a {
@@ -142,8 +142,8 @@
         padding: 1rem;
         font-weight: 500;
         border-radius: 10px;
-        background-color: var(--doc-highlight-text-bg);
-        color: var(--doc-highlight-text-color);
+        background-color:  var(--p-dark-surface-800, var(--p-surface-200));
+        color: var(--p-dark-surface-300, var(--p-surface-700));
     }
 }
 
@@ -163,12 +163,12 @@
 
     > .navbar-item {
         .navbar-item-content {
-            border-left: 1px solid var(--surface-border);
+            border-left: 1px solid var(--p-surface-border);
             padding-left: .25rem;
             transition: all .2s;
 
             &:hover {
-                border-left-color: var(--surface-500);
+                border-left-color: var(--p-dark-surface-600, var(--p-surface-400));
             }
         }
     }
@@ -179,7 +179,7 @@
 
             .px-link {
                 padding: 0.25rem 1rem 0.25rem 1rem;
-                color: var(--surface-800);
+                color: var(--p-text-color);
                 font-weight: 400;
                 white-space: nowrap;
                 min-width: 0;
@@ -190,7 +190,7 @@
 
             &:hover {
                 .px-link {
-                    color: var(--surface-900);
+                    color: var(--p-text-color);
                 }
             }
         }
@@ -261,12 +261,12 @@
         background-color: transparent;
         transition: background-color .2s, box-shadow .2s;
         border: 0 none;
-        color: var(--demo-code-button-color);
+        color: var(--p-dark-surface-300, var(--p-surface-300));
         cursor: pointer;
 
         &:hover {
-            background-color: var(--demo-code-button-hover-bg);
-            color: var(--demo-code-button-hover-color);
+            background-color: rgba(255,255,255,.1);
+            color: var(--p-dark-surface-100, var(--p-surface-100));
         }
 
         &.code-active {
@@ -293,7 +293,7 @@
     margin-bottom: 1.5rem;
 
     th {
-        border-bottom: 1px solid var(--surface-border);
+        border-bottom: 1px solid var(--p-surface-border);
         padding: .75rem 1rem;
         text-align: left;
         text-transform: capitalize;
@@ -301,12 +301,12 @@
 
     tbody {
         tr:hover {
-            background: var(--surface-hover);
+            background: var(--p-surface-hover);
         }
 
         td {
             padding: .75rem 1rem;
-            border-bottom: 1px solid var(--surface-border);
+            border-bottom: 1px solid var(--p-surface-border);
             white-space: pre-line;
             line-height: 1.5;
             scroll-margin-top: 6.5rem;
@@ -327,10 +327,6 @@
                     align-items: center;
                 }
 
-                span.doc-option-type-options {
-                    color: var(--primary-700);
-                }
-
                 &.doc-option-link {
                     &:hover {
                         text-decoration: underline;
@@ -343,8 +339,8 @@
                 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
                 position: relative;
                 scroll-margin-top: 6.5rem;
-                background-color: var(--doc-highlight-text-bg);
-                color: var(--doc-highlight-text-color);
+                background-color: var(--p-dark-surface-800, var(--p-surface-200));
+                color: var(--p-dark-surface-300, var(--p-surface-700));
                 border-radius: 6px;
                 padding: 2px 6px;
                 font-weight: 600;
@@ -385,6 +381,9 @@
                 border-radius: 6px;
                 padding: 2px 6px;
                 max-width: min-content;
+                border-color: var(--p-surface-border);
+                background-color: var(--p-surface-card);
+                color: var(--p-text-secondary-color);
             }
 
             .doc-option-parameter-name {
@@ -399,16 +398,6 @@
             .doc-option-params {
                 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
             }
-
-            .doc-option-light {
-                background: var(--bluegray-50);
-                border-color: var(--bluegray-100);
-            }
-
-            .doc-option-dark {
-                background: var(--bluegray-800);
-                border-color: var(--bluegray-800);
-            }
         }
     }
 }
diff --git a/assets/styles/layout/_footer.scss b/assets/styles/layout/_footer.scss
index 141453f6e..901ca3376 100644
--- a/assets/styles/layout/_footer.scss
+++ b/assets/styles/layout/_footer.scss
@@ -7,13 +7,13 @@
     flex-wrap: wrap;
     font-weight: 500;
     color: var(--text-800);
-    border-top: 1px solid var(--surface-border);
+    border-top: 1px solid var(--p-surface-border);
 
     a {
         color: var(--primary-color-default);
         font-weight: 700;
         transition: all .3s;
-        border-radius: var(--border-radius);
+        border-radius: var(--p-border-radius);
 
         @include focus-visible();
 
diff --git a/assets/styles/layout/_glow.scss b/assets/styles/layout/_glow.scss
index f2e2895b1..aa1209bd3 100644
--- a/assets/styles/layout/_glow.scss
+++ b/assets/styles/layout/_glow.scss
@@ -1,7 +1,7 @@
 .landing, .layout-wrapper {
-    background-image: var(--glow-image);
     background-blend-mode: var(--glow-blend);
-    background-position: top center;
+    background-image: var(--glow-image);
+    background-position: top;
     background-repeat: no-repeat;
     background-size: auto 20rem;
 }
\ No newline at end of file
diff --git a/assets/styles/layout/_mixins.scss b/assets/styles/layout/_mixins.scss
index 44bd391be..f0859ec92 100644
--- a/assets/styles/layout/_mixins.scss
+++ b/assets/styles/layout/_mixins.scss
@@ -10,7 +10,7 @@
     color: var(--primary-color-default);
     font-weight: 500;
     transition: all .2s;
-    border-radius: var(--border-radius);
+    border-radius: var(--p-border-radius);
     @include focus-visible();
 
     &:hover {
diff --git a/assets/styles/layout/_news.scss b/assets/styles/layout/_news.scss
index 681496187..d447f5e87 100644
--- a/assets/styles/layout/_news.scss
+++ b/assets/styles/layout/_news.scss
@@ -41,7 +41,7 @@
     .layout-news-link,
     .layout-news-link:visited,
     .layout-news-link:active {
-        color:var(--primary-color-text);
+        color:var(--p-primary-color-inverse);
         font-weight:700;
     }
     .layout-news-link:hover {
diff --git a/assets/styles/layout/_sidebar.scss b/assets/styles/layout/_sidebar.scss
index 0830ba343..df85da0e0 100644
--- a/assets/styles/layout/_sidebar.scss
+++ b/assets/styles/layout/_sidebar.scss
@@ -37,18 +37,18 @@
                 width: 100%;
                 align-items: center;
                 padding: .5rem 0;
-                color: var(--surface-900);
+                color: var(--p-text-color);
                 font-weight: 600;
                 transition: all .2s;
                 position: relative;
-                border-radius: var(--border-radius);
+                border-radius: var(--p-border-radius);
 
                 .menu-icon {
                     width: 2rem;
                     height: 2rem;
-                    border-radius: var(--border-radius);
+                    border-radius: var(--p-border-radius);
                     margin-right: .5rem;
-                    border: 1px solid var(--surface-border);
+                    border: 1px solid var(--p-surface-border);
                     display: inline-flex;
                     align-items: center;
                     justify-content: center;
@@ -57,19 +57,19 @@
                     background-color: transparent;
     
                     i {
-                        color: var(--surface-700);
+                        color: var(--p-text-color);
                         transition: all .2s;
                     }
                 }
     
                 .menu-toggle-icon {
-                    color: var(--surface-700);
+                    color: var(--p-text-secondary-color);
                     margin-left: auto;
                 }
 
                 &:hover {
                     .menu-icon {
-                        background-color: var(--surface-card);
+                        background-color: var(--p-surface-card);
 
                         i {
                             color: var(--primary-color-default);
@@ -102,15 +102,14 @@
 
                     li {
                         a {
-                            color: var(--surface-700);
-                            border-left: 1px solid var(--surface-border);
+                            border-left: 1px solid var(--p-surface-border);
                             transition: all .2s;
                             font-weight: 450;
                             display: flex;
                             align-items: center;
                             padding: .5rem .5rem .5rem 1rem;
-                            color: var(--surface-700);
-                            transition: all .2s;
+                            color: var(--p-text-color);
+                            transition: border-color .2s;
                             position: relative;
 
                             &:focus-visible {
@@ -119,8 +118,7 @@
                             }
             
                             &:hover {
-                                color: var(--surface-900);
-                                border-left-color: var(--surface-500);
+                                border-left-color: var(--p-dark-surface-600, var(--p-surface-400));
                             }
 
                             &.router-link-active {
@@ -163,7 +161,7 @@
             font-size: .875rem;
             font-weight: 600;
             letter-spacing: 1px;
-            color: var(--surface-900);
+            color: var(--p-text-secondary-color);
             margin-bottom: .25rem;
         }
     }
diff --git a/assets/styles/layout/layout.scss b/assets/styles/layout/layout.scss
index 063aae136..39ea4e9d6 100644
--- a/assets/styles/layout/layout.scss
+++ b/assets/styles/layout/layout.scss
@@ -9,7 +9,6 @@
 @import './_content';
 @import './_news';
 @import './_footer';
-@import './_config';
 @import './_code';
 @import './_doc';
 @import './_docsearch';
diff --git a/assets/styles/layout/variables/main/_dark.scss b/assets/styles/layout/variables/main/_dark.scss
index ebc7da921..74c4fc1ab 100644
--- a/assets/styles/layout/variables/main/_dark.scss
+++ b/assets/styles/layout/variables/main/_dark.scss
@@ -2,14 +2,8 @@
     --primary-color-default:var(--p-dark-primary-400);
     --primary-color-inverse-default:var(--p-dark-zinc-900);
     --card-border: 1px solid transparent;
-    --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--primary-color) 0%, #000000 100%);
+    --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%);
     --glow-blend: hard-light, color-dodge;
     --topbar-sticky-bg:rgba(0,0,0,.3);
     --mobile-menu-bg: rgba(0,0,0,.3);
-    --demo-code-bg: var(--p-dark-surface-900);
-    --demo-code-button-color: var(--p-dark-surface-300);
-    --demo-code-button-hover-bg: rgba(255,255,255,.1);
-    --demo-code-button-hover-color: var(--p-dark-surface-100);
-    --doc-highlight-text-bg: var(--p-dark-surface-800);
-    --doc-highlight-text-color: var(--p-dark-surface-300);
 }
\ No newline at end of file
diff --git a/assets/styles/layout/variables/main/_light.scss b/assets/styles/layout/variables/main/_light.scss
index 3dce51cfb..e97f40f27 100644
--- a/assets/styles/layout/variables/main/_light.scss
+++ b/assets/styles/layout/variables/main/_light.scss
@@ -6,10 +6,4 @@
     --glow-blend: hard-light, multiply;
     --topbar-sticky-bg:rgba(255,255,255,.7);
     --mobile-menu-bg: var(--p-surface-0);
-    --demo-code-bg: var(--p-surface-800);
-    --demo-code-button-color: var(--p-surface-300);
-    --demo-code-button-hover-bg: rgba(255,255,255,.1);
-    --demo-code-button-hover-color: var(--p-surface-100);
-    --doc-highlight-text-bg: var(--p-surface-200);
-    --doc-highlight-text-color: var(--p-surface-700);
 }
\ No newline at end of file
diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js
index 3ba95146c..62eac79f8 100644
--- a/components/lib/theme/aura/index.js
+++ b/components/lib/theme/aura/index.js
@@ -131,7 +131,7 @@ export default {
             },
             surface: {
                 card: 'var(--p-dark-surface-900, var(--p-surface-0))',
-                border: 'var(--p-dark-surface-700, var(--p-surface-200))',
+                border: 'var(--p-dark-surface-800, var(--p-surface-200))',
                 ground: 'var(--p-dark-surface-950, var(--p-surface-50))',
                 overlay: 'var(--p-dark-surface-900, var(--p-surface-0))',
                 hover: 'var(--p-dark-hover-bg, var(--p-hover-bg))'
diff --git a/layouts/AppTopBar.vue b/layouts/AppTopBar.vue
index 6c121fad1..4850586e4 100755
--- a/layouts/AppTopBar.vue
+++ b/layouts/AppTopBar.vue
@@ -128,11 +128,12 @@
 
 <script>
 import AppConfigurator from '@/layouts/AppConfigurator';
+import EventBus from '@/layouts/AppEventBus';
 import pkg from '@/package.json';
 import docsearch from '@docsearch/js';
 
 export default {
-    emits: ['menubutton-click', 'configbutton-click', 'darkswitch-click'],
+    emits: ['menubutton-click'],
     outsideClickListener: null,
     props: {
         showMenuButton: {
@@ -193,8 +194,8 @@ export default {
         onMenuButtonClick(event) {
             this.$emit('menubutton-click', event);
         },
-        toggleDarkMode(event) {
-            this.$emit('darkswitch-click', event);
+        toggleDarkMode() {
+            EventBus.emit('theme-change', { dark: !this.$appState.darkTheme });
         },
         bindScrollListener() {
             if (!this.scrollListener) {
diff --git a/layouts/default.vue b/layouts/default.vue
index 026e5c8a0..511d10940 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="layout-wrapper" :class="containerClass" :data-p-theme="$appState.theme">
         <AppNews />
-        <AppTopBar @menubutton-click="onMenuButtonClick" @darkswitch-click="onDarkModeToggle" />
+        <AppTopBar @menubutton-click="onMenuButtonClick" />
         <div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>
         <div class="layout-content">
             <app-menu :active="sidebarActive" />
@@ -19,7 +19,6 @@
 
 <script>
 import DomHandler from '@/components/lib/utils/DomHandler';
-import EventBus from '@/layouts/AppEventBus';
 import AppFooter from './AppFooter.vue';
 import AppMenu from './AppMenu.vue';
 import AppNews from './AppNews.vue';
@@ -67,20 +66,6 @@ export default {
             }
 
             return false;
-        },
-        onDarkModeToggle() {
-            /*let newTheme = null;
-            let currentTheme = this.$appState.theme;
-
-            if (this.$appState.darkTheme) {
-                newTheme = currentTheme.replace('dark', 'light');
-            } else {
-                if (currentTheme.includes('light')) newTheme = currentTheme.replace('light', 'dark');
-                else newTheme = 'aura-dark-green'; //fallback
-            }
-
-            EventBus.emit('theme-change', { theme: newTheme, dark: !this.$appState.darkTheme });*/
-            EventBus.emit('theme-change', { dark: !this.$appState.darkTheme });
         }
     },
     computed: {
diff --git a/pages/index.vue b/pages/index.vue
index 38163bd28..512eb14b3 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="landingClass">
         <AppNews />
-        <AppTopBar :showConfigurator="false" :showMenuButton="false" @darkswitch-click="onDarkModeToggle" />
+        <AppTopBar :showMenuButton="false" @darkswitch-click="onDarkModeToggle" />
         <HeroSection />
         <FeaturesSection />
         <UsersSection />