From 71fe64dd6932fe72336bfabcafc912480cacd5db Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 27 Mar 2024 18:37:56 +0300
Subject: [PATCH] Add noir to themes

---
 .../styles/layout/variables/main/_light.scss  |   2 +-
 layouts/AppConfigurator.vue                   | 101 ++++++++++++++----
 2 files changed, 81 insertions(+), 22 deletions(-)

diff --git a/assets/styles/layout/variables/main/_light.scss b/assets/styles/layout/variables/main/_light.scss
index ec6a09007..252d7e6f9 100644
--- a/assets/styles/layout/variables/main/_light.scss
+++ b/assets/styles/layout/variables/main/_light.scss
@@ -14,7 +14,7 @@
     --ground-background: var(--p-surface-50);
     --overlay-background: #ffffff;
     --hover-background: var(--p-surface-100);
-    --code-background: var(--p-surface-800);
+    --code-background: var(--p-surface-950);
     --high-contrast-text-color: var(--p-surface-900);
     --hover-border-color: var(--p-surface-400);
     --mark-background: var(--p-surface-200);
diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue
index 8de9a89f6..1bd34a1d4 100755
--- a/layouts/AppConfigurator.vue
+++ b/layouts/AppConfigurator.vue
@@ -10,7 +10,7 @@
                         type="button"
                         @click="updateColors('primary', primaryColor)"
                         :class="{ 'active-color': selectedPrimaryColor === primaryColor.name }"
-                        :style="{ backgroundColor: `${primaryColor.palette['500']}` }"
+                        :style="{ backgroundColor: `${primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette['500']}` }"
                     ></button>
                 </div>
             </div>
@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import { updatePrimary, updateSurface } from 'primevue/themes';
+import { updatePreset, updateSurface } from 'primevue/themes';
 
 export default {
     data() {
@@ -46,6 +46,7 @@ export default {
             selectedPrimaryColor: 'emerald',
             selectedSurfaceColor: null,
             primaryColors: [
+                { name: 'noir', palette: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' } },
                 { name: 'emerald', palette: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' } },
                 { name: 'green', palette: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' } },
                 { name: 'lime', palette: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' } },
@@ -101,25 +102,83 @@ export default {
             document.startViewTransition(() => this.applyTheme(type, color));
         },
         applyTheme(type, color) {
-            if (type === 'primary') updatePrimary(color.palette);
-            else if (type === 'surface') updateSurface(color.palette);
-
-            /*updatePreset({
-                semantic:
-                    type === 'surface'
-                        ? {
-                              colorScheme: {
-                                  dark: {
-                                      surface: color.palette
-                                  }
-                              }
-                          }
-                        : { [type]: color.palette }
-            });*/
-
-            /*for (const shade in color.palette) {
-                document.documentElement.style.setProperty(`--p-${type}-${shade}`, `${color.palette[shade]}`);
-            }*/
+            if (type === 'primary') {
+                if (color.name === 'noir') {
+                    updatePreset({
+                        semantic: {
+                            primary: color.palette,
+                            colorScheme: {
+                                light: {
+                                    primary: {
+                                        color: '#09090b',
+                                        inverseColor: '#ffffff',
+                                        hoverColor: '#18181b',
+                                        activeColor: '#27272a'
+                                    },
+                                    highlight: {
+                                        background: '#09090b',
+                                        focusBackground: '#3f3f46',
+                                        color: '#ffffff',
+                                        focusColor: '#ffffff'
+                                    }
+                                },
+                                dark: {
+                                    primary: {
+                                        color: '#fafafa',
+                                        inverseColor: '#09090b',
+                                        hoverColor: '#f4f4f5',
+                                        activeColor: '#e4e4e7'
+                                    },
+                                    highlight: {
+                                        background: 'rgba(250, 250, 250, .16)',
+                                        focusBackground: 'rgba(250, 250, 250, .24)',
+                                        color: 'rgba(255,255,255,.87)',
+                                        focusColor: 'rgba(255,255,255,.87)'
+                                    }
+                                }
+                            }
+                        }
+                    });
+                } else {
+                    updatePreset({
+                        semantic: {
+                            primary: color.palette,
+                            colorScheme: {
+                                light: {
+                                    primary: {
+                                        color: '{primary.500}',
+                                        inverseColor: '#ffffff',
+                                        hoverColor: '{primary.600}',
+                                        activeColor: '{primary.700}'
+                                    },
+                                    highlight: {
+                                        background: '{primary.50}',
+                                        focusBackground: '{primary.100}',
+                                        color: '{primary.700}',
+                                        focusColor: '{primary.800}'
+                                    }
+                                },
+                                dark: {
+                                    primary: {
+                                        color: '{primary.400}',
+                                        inverseColor: '{surface.900}',
+                                        hoverColor: '{primary.300}',
+                                        activeColor: '{primary.200}'
+                                    },
+                                    highlight: {
+                                        background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
+                                        focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
+                                        color: 'rgba(255,255,255,.87)',
+                                        focusColor: 'rgba(255,255,255,.87)'
+                                    }
+                                }
+                            }
+                        }
+                    });
+                }
+            } else if (type === 'surface') {
+                updateSurface(color.palette);
+            }
         },
         onRippleChange(value) {
             this.$appState.ripple = value;