From 6c796b5118f2d7665a61fc19a665b9e952cb959c Mon Sep 17 00:00:00 2001
From: aleksey-hoffman <61761672+aleksey-hoffman@users.noreply.github.com>
Date: Fri, 23 Feb 2024 22:38:52 +0300
Subject: [PATCH] Dev: update some css vars

---
 .../app/filter-input/FilterInput.vue          |   2 +-
 src/components/app/nav-sidebar/NavSidebar.vue |   8 +-
 .../navigator/dir-entry/base/DirEntryBase.vue |   2 +-
 .../dir-entry/grid-dir/DirEntryGridDir.vue    |   8 +-
 .../dir-entry/grid-file/DirEntryGridFile.vue  |   2 +-
 .../properties/InfoPanelProperties.vue        |   4 +-
 src/styles/scrollbars.css                     |  14 +-
 src/styles/vars.css                           | 135 ++++--------------
 8 files changed, 51 insertions(+), 124 deletions(-)

diff --git a/src/components/app/filter-input/FilterInput.vue b/src/components/app/filter-input/FilterInput.vue
index a4f9082a..c9a02c98 100644
--- a/src/components/app/filter-input/FilterInput.vue
+++ b/src/components/app/filter-input/FilterInput.vue
@@ -193,7 +193,7 @@ function onActivatorClick() {
   right: 0;
   display: flex;
   align-items: center;
-  background-color: var(--background-2);
+  background-color: var(--background-lighten);
   gap: 4px;
   transition: background-color 0.3s ease;
 }
diff --git a/src/components/app/nav-sidebar/NavSidebar.vue b/src/components/app/nav-sidebar/NavSidebar.vue
index 8578990e..ddcf71f6 100644
--- a/src/components/app/nav-sidebar/NavSidebar.vue
+++ b/src/components/app/nav-sidebar/NavSidebar.vue
@@ -36,7 +36,7 @@ const viewsStore = useViewsStore();
 <style>
 .nav-sidebar {
   width: var(--nav-sidebar-width);
-  background: var(--nav-sidebar-bg-color);
+  background-color: var(--background-lighten);
 }
 
 .nav-sidebar__item {
@@ -45,7 +45,7 @@ const viewsStore = useViewsStore();
   height: 48px;
   align-items: center;
   justify-content: center;
-  background: transparent;
+  background-color: transparent;
   cursor: pointer;
 }
 
@@ -55,11 +55,11 @@ const viewsStore = useViewsStore();
   }
 
 .nav-sidebar__item:hover {
-  background: var(--highlight-color-opacity-5);
+  background-color: hsl(var(--light) / 5%);
 }
 
 .nav-sidebar__item[is-active="true"] {
-  background: var(--highlight-color-opacity-10);
+  background-color: hsl(var(--light) / 10%);
 }
 
 .nav-sidebar__item-icon {
diff --git a/src/components/navigator/dir-entry/base/DirEntryBase.vue b/src/components/navigator/dir-entry/base/DirEntryBase.vue
index 1afb5cdd..dd8452be 100644
--- a/src/components/navigator/dir-entry/base/DirEntryBase.vue
+++ b/src/components/navigator/dir-entry/base/DirEntryBase.vue
@@ -119,7 +119,7 @@ const props = withDefaults(defineProps<Props>(), {
 }
 
 .dir-entry-base__overlay--hover {
-  background-color: var(--highlight-color-opacity-5);
+  background-color: hsl(var(--light) / 5%);
   opacity: 0;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/navigator/dir-entry/grid-dir/DirEntryGridDir.vue b/src/components/navigator/dir-entry/grid-dir/DirEntryGridDir.vue
index a66fde54..e255c794 100644
--- a/src/components/navigator/dir-entry/grid-dir/DirEntryGridDir.vue
+++ b/src/components/navigator/dir-entry/grid-dir/DirEntryGridDir.vue
@@ -58,14 +58,14 @@ const cardDesign = ref('infusive-flat-glow');
 <style>
 .dir-entry-grid-dir {
   position: relative;
-  color: var(--color-darker-2);
+  color: var(--grey-500);
   transition: var(--dir-entry-transition);
   user-select: none;
 }
 
 .dir-entry-grid-dir
   .dir-entry-base {
-    background-color: rgb(255 255 255 / 2%);
+    background-color: var(--background-lighten);
   }
 
 .dir-entry-grid-dir
@@ -94,7 +94,7 @@ const cardDesign = ref('infusive-flat-glow');
 .dir-entry-grid-dir__content-title {
   overflow: hidden;
   max-width: 90%;
-  color: var(--color-darker-2);
+  color: var(--grey-400);
   font-size: 14px;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -103,7 +103,7 @@ const cardDesign = ref('infusive-flat-glow');
 .dir-entry-grid-dir__content-description {
   overflow: hidden;
   max-width: 90%;
-  color: var(--color-darker-4);
+  color: var(--grey-500);
   font-size: 14px;
   text-overflow: ellipsis;
   white-space: nowrap;
diff --git a/src/components/navigator/dir-entry/grid-file/DirEntryGridFile.vue b/src/components/navigator/dir-entry/grid-file/DirEntryGridFile.vue
index 3207b98a..a8ed0a76 100644
--- a/src/components/navigator/dir-entry/grid-file/DirEntryGridFile.vue
+++ b/src/components/navigator/dir-entry/grid-file/DirEntryGridFile.vue
@@ -73,7 +73,7 @@ const mediaType = computed(() => props.dirEntry?.mime?.split('/')[0]);
   overflow: hidden;
   width: 100%;
   height: 100%;
-  background-color: var(--highlight-color-opacity-5);
+  background-color: hsl(var(--light) / 5%);
   transition: var(--dir-entry-transition);
   user-select: none;
 }
diff --git a/src/components/navigator/info-panel/properties/InfoPanelProperties.vue b/src/components/navigator/info-panel/properties/InfoPanelProperties.vue
index 5322532c..b21c305e 100644
--- a/src/components/navigator/info-panel/properties/InfoPanelProperties.vue
+++ b/src/components/navigator/info-panel/properties/InfoPanelProperties.vue
@@ -89,8 +89,8 @@ function propertyValueOnClick (params) {
   align-items: center;
   padding: 8px 4px;
   border-radius: 4px;
-  border-top: 1px solid var(--highlight-color-4);
-  border-bottom: 1px solid var(--highlight-color-4);
+  border-top: 1px solid hsl(var(--light) / 5%);
+  border-bottom: 1px solid hsl(var(--light) / 5%);
   color: var(--color-7);
   font-size: 14px;
   text-transform: uppercase;
diff --git a/src/styles/scrollbars.css b/src/styles/scrollbars.css
index 80cb58a8..e8b38244 100644
--- a/src/styles/scrollbars.css
+++ b/src/styles/scrollbars.css
@@ -4,39 +4,39 @@
   .os-scrollbar-handle {
     border-radius: 0;
     margin-right: 8px;
-    background: var(--scrollbar-color);
+    background-color: hsl(var(--light) / 5%);
   }
 
 .os-theme-dark.os-scrollbar-vertical 
   .os-scrollbar-handle:hover {
     width: 12px;
-    background: var(--scrollbar-color-lighter-1);
+    background-color: hsl(var(--light) / 8%);
   }
 
 .os-theme-dark.os-scrollbar-vertical 
   .os-scrollbar-handle:active {
     width: 16px;
-    background: var(--scrollbar-color-lighter-2);
+    background-color: hsl(var(--light) / 15%);
   }
 
 .os-theme-dark.os-scrollbar-horizontal 
   .os-scrollbar-handle:hover {
     height: 12px;
-    background: var(--scrollbar-color-lighter-1);
+    background-color: hsl(var(--light) / 8%);
   }
 
 .os-theme-dark.os-scrollbar-horizontal 
   .os-scrollbar-handle:active {
     height: 16px;
-    background: var(--scrollbar-color-lighter-2);
+    background-color: hsl(var(--light) / 15%);
   }
 
 .os-theme-dark.os-theme-dark--lighten
   .os-scrollbar-handle {
-    background: var(--scrollbar-color-lighter-1);
+    background-color: hsl(var(--light) / 8%);
   }
 
 .os-theme-dark.os-theme-dark--lighten-2
   .os-scrollbar-handle {
-    background: var(--scrollbar-color-lighter-2);
+    background-color: hsl(var(--light) / 15%);
   }
diff --git a/src/styles/vars.css b/src/styles/vars.css
index a0fc3330..b1d682d4 100644
--- a/src/styles/vars.css
+++ b/src/styles/vars.css
@@ -1,6 +1,9 @@
 @layer base {
   :root {
+    /* Mods */
     --radius: 0.75rem;
+
+    /* Sizes */
     --nav-sidebar-width: 48px;
     --window-toolbar-height: 32px;
     --action-toolbar-height: 42px;
@@ -15,136 +18,60 @@
     --tab-height: calc(var(--window-toolbar-height) - 4px);
     --control-button-width: 46px;
     --dir-entry-transition: all 0.3s ease-in-out;
-    --slate-50: #f8fafc;
-    --slate-100: #f1f5f9;
-    --slate-200: #e2e8f0;
-    --slate-300: #cbd5e1;
-    --slate-400: #94a3b8;
-    --slate-500: #64748b;
-    --slate-600: #475569;
-    --slate-700: #334155;
-    --slate-800: #1e293b;
-    --slate-900: #0f172a;
-    --slate-950: #020617;
-    --gray-50: #f9fafb;
-    --gray-100: #f3f4f6;
-    --gray-200: #e5e7eb;
-    --gray-300: #d1d5db;
-    --gray-400: #9ca3af;
-    --gray-500: #6b7280;
-    --gray-600: #4b5563;
-    --gray-700: #374151;
-    --gray-800: #1f2937;
-    --gray-900: #111827;
-    --gray-950: #030712;
+
+    /* Colors */
+    --grey-50: #fafafa;
+    --grey-100: #f4f4f5;
+    --grey-200: #e4e4e7;
+    --grey-300: #d4d4d8;
+    --grey-400: #a1a1aa;
+    --grey-500: #71717a;
+    --grey-600: #52525b;
+    --grey-700: #3f3f46;
+    --grey-800: #27272a;
+    --grey-900: #18181b;
+    --grey-950: #09090b;
   }
 
   .light {
+    --light: 0 0% 100%;
+    --dark: 0 0% 0%;
     --background: 0 0% 100%;
-    --background-2: 0 0% 100%;
+    --background-lighten: hsl(from hsl(var(--background)) h s calc(l + 2%));
     --foreground: 222.2 84% 4.9%;
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
+    --primary: 189, 83%, 32%;
     --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --ring: 221.2 83.2% 53.3%;
   }
 
   .dark {
-    --light-value: 255 255 255;
-    --dark-value: 0 0 0;
-    --color-lighter-4: rgb(238 238 238);
-    --color-lighter-3: rgb(224 224 224);
-    --color-lighter-2: rgb(184 184 184);
-    --color-lighter-1: rgb(196 196 196);
-    --color: rgb(160 160 160);
-    --color-darker-1: rgb(144 144 144);
-    --color-darker-2: rgb(128 128 128);
-    --color-darker-3: rgb(117 117 117);
-    --color-darker-4: rgb(97 97 97);
-    --bg-color-value: 36 38 44;
-    --bg-color: rgb(var(--bg-color-value) / 100%);
-    --bg-color-darker-1-value: 29 31 37;
-    --bg-color-darker-1: rgb(var(--bg-color-darker-1-value) / 100%);
-    --key-color-value: 14 130 150;
-    --key-color: rgb(var(--key-color-value) / 100%);
-    --route-content-bg-color: var(--bg-color-darker-1);
-    --window-toolbar-bg-color: rgb(44 47 53);
-    --action-toolbar-bg-color: transparent;
-    --button-bg-color: var(--highlight-color-opacity-20);
-    --button-1-bg-color: var(--highlight-color-opacity-30);
-    --divider-color: rgb(var(--light-value) / 5%);
-    --divider-color-lighter-1: rgb(var(--light-value) / 8%);
-    --border-color: rgb(var(--light-value) / 5%);
-    --border-color-lighter-1: rgb(var(--light-value) / 8%);
-    --highlight-color-opacity-30: rgb(var(--light-value) / 30%);
-    --highlight-color-opacity-20: rgb(var(--light-value) / 20%);
-    --highlight-color-opacity-10: rgb(var(--light-value) / 10%);
-    --highlight-color-opacity-5: rgb(var(--light-value) / 5%);
-    --highlight-color-opacity-1: rgb(var(--light-value) / 1%);
-    --scrollbar-color: rgb(var(--light-value) / 5%);
-    --scrollbar-color-lighter-1: rgb(var(--light-value) / 8%);
-    --scrollbar-color-lighter-2: rgb(var(--light-value) / 15%);
+    /* 
     --tab-color: var(--color);
     --tab-color-active: var(--color);
     --tab-bg-color: var(--window-toolbar-bg-color);
     --tab-bg-color-active: var(--window-toolbar-bg-color);
     --tab-bg-color-hover: rgb(var(--light-value) / 6%);
     --tab-close-button-color: var(--window-toolbar-bg-color);
-    --tab-border-color: rgb(var(--light-value) / 10%);
-    --nav-panel-bg-color: transparent;
-    --info-panel-bg-color: var(--bg-color-darker-1);
-    --info-panel-shadow: 0px 4px 48px rgb(0 0 0 / 5%),
-      0px 4px 2px rgb(0 0 0 / 30%);
-    --infusive-flat-glow-bg-color: rgb(var(--light-value) / 2%);
-    --infusive-flat-glow-shadow: none;
-    --infusive-flat-glow-shadow-onhover:
-      0px 1px 4px rgb(var(--light-value) / 5%),
-      0px 22px 48px rgb(var(--light-value) / 2%);
-    --infusive-extruded-bg-color: rgb(var(--bg-color-value) / 4%);
-    --infusive-extruded-shadow: 
-      0px -2px 8px rgb(var(--light-value) / 2.5%),
-      0px -16px 20px rgb(var(--light-value) / 1.5%),
-      0px 1px 2.2px rgb(var(--dark-value) / 2.2%),
-      0px 2.4px 5.3px rgb(var(--dark-value) / 3.2%),
-      0px 4.5px 10px rgb(var(--dark-value) / 4%),
-      0px 8px 17.9px rgb(var(--dark-value) / 4.8%),
-      0px 15px 33.4px rgb(var(--dark-value) / 5.8%),
-      0px 36px 80px rgb(var(--dark-value) / 8%); 
-    --infusive-extruded-shadow-optimized: 
-      0px -2px 8px rgb(var(--light-value) / 2.5%),
-      0px 36px 80px rgb(var(--dark-value) / 8%);
-    --background: 225 10% 15.69%;
-    --background-2: 225 12.12% 12.94%;
-    --foreground: 210 40% 98%;
+    --tab-border-color: rgb(var(--light-value) / 10%); 
+    */
+    --light: 0 0% 100%;
+    --dark: 0 0% 0%;
+    --background: 225 12% 15.7%;
+    --background-lighten: hsl(from hsl(var(--background)) h s calc(l + 2%));
+    --foreground: 210 10% 80%;
     --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
+    --primary: 189, 83%, 32%;
     --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9;
+    --ring: 224.3 76.3% 48%;
   }
 }
\ No newline at end of file