From c67b264a6620df802b3327f2a22b1ff4150740f3 Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Thu, 18 Jul 2024 01:09:44 -0700
Subject: [PATCH] Finish calendar styling...

---
 modules/bar/workspaces/index.js |  2 +-
 options.ts                      |  3 +-
 scss/style/menus/calendar.scss  | 74 ++++++++++++---------------------
 scss/variables.scss             |  3 +-
 4 files changed, 32 insertions(+), 50 deletions(-)

diff --git a/modules/bar/workspaces/index.js b/modules/bar/workspaces/index.js
index 4c48663..112939a 100644
--- a/modules/bar/workspaces/index.js
+++ b/modules/bar/workspaces/index.js
@@ -9,7 +9,7 @@ function range(length, start = 1) {
 
 const Workspaces = (monitor = -1, ws = 8) => {
   const getWorkspacesForMonitor = (curWs, wsRules) => {
-    if (!wsRules || !wsRules.length) {
+    if (!wsRules || !Object.keys(wsRules).length) {
       return true;
     }
 
diff --git a/options.ts b/options.ts
index bb17aea..004a045 100644
--- a/options.ts
+++ b/options.ts
@@ -133,7 +133,7 @@ const options = mkOptions(OPTIONS, {
                 cards: opt(colors.base),
                 border: opt(colors.surface0),
                 text: opt(colors.text),
-                dimtext: opt(colors.text),
+                dimtext: opt(colors.surface2),
                 label: opt(colors.lavender),
                 listitems: {
                     passive: opt(colors.text),
@@ -386,6 +386,7 @@ const options = mkOptions(OPTIONS, {
                             yearmonth: opt(colors.teal),
                             weekdays: opt(colors.pink),
                             paginator: opt(colors.pink),
+                            currentday: opt(colors.pink),
                             days: opt(colors.text),
                             contextdays: opt(colors.surface2),
                         },
diff --git a/scss/style/menus/calendar.scss b/scss/style/menus/calendar.scss
index 1d086a5..1fd3557 100644
--- a/scss/style/menus/calendar.scss
+++ b/scss/style/menus/calendar.scss
@@ -1,11 +1,12 @@
 @import "../colors";
+@import '../../variables';
 
 .calendar-content-container {
   margin-top: 0em;
   min-width: 27em;
   min-height: 6em;
-  background: $crust;
-  border: 0.13em solid $surface0;
+  background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-clock-background-color);
+  border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border, $bar-menus-menu-clock-border-color);
   border-radius: 0.7em;
   margin-right: 0.5em;
 }
@@ -13,7 +14,7 @@
 .calendar-menu-item-container {
   border-radius: 0.4em;
   margin-bottom: 1.35em;
-  background: $base;
+  background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color);
 }
 
 .calendar-content-items {
@@ -27,19 +28,19 @@
 
 .calendar-menu-widget {
   border-radius: 0.4em;
-  color: $text;
+  color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days);
 
   &:selected {
-    box-shadow: inset 0 -0.5em 0 0 $pink,
-      inset -0.4em -0.3em 0 0 $base,
-      inset 0.4em 0 0 0.01em $base;
-    color: $pink;
+    box-shadow: inset 0 -0.5em 0 0 if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-currentday),
+      inset -0.4em -0.3em 0 0 if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color),
+      inset 0.4em 0 0 0.01em if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color);
+    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-currentday);
     border-radius: 0em;
   }
 
   &.header {
     background-color: transparent;
-    color: $teal;
+    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-yearmonth);
   }
   &.button {
     color: $text;
@@ -47,15 +48,13 @@
     font-size: 900em;
   }
   &:hover {
-    color: $pink;
+    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-paginator);
   }
   &.highlight {
-    border: 2em solid $pink;
-    background-color: transparent;
-    color: $pink;
+    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-calendar-weekdays);
   }
   &:indeterminate {
-    color: $surface2;
+    color: transparentize(if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-calendar-days), 0.65);
   }
 
   font-size: 1.1em;
@@ -67,13 +66,13 @@
 
   .clock-content-time {
     font-size: 4em;
-    color: $pink;
+    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-time-time);
   }
   .clock-content-period {
     font-size: 1.75em;
     margin-bottom: 1.35em;
     margin-right: -0.875em;
-    color: $teal;
+    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-time-timeperiod);
   }
 }
 
@@ -88,22 +87,19 @@
 }
 
 .weather-container-box {
-  color: $red;
   margin: 1.5em;
   margin-top: 2.5em;
   min-width: 3em;
-  // min-height: 10em;
 
   .calendar-menu-weather.today.icon {
     image {
-      color: $pink;
+      color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-icon);
       font-size: 6em;
-      // margin-right: 0.3em;
     }
   }
 
   .calendar-menu-weather.today.temp.label {
-    color: $text;
+    color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-clock-weather-temperature);
     margin-left: 0.2em;
     font-size: 2.5em;
 
@@ -113,47 +109,31 @@
   }
 
   .calendar-menu-weather.today.condition.label {
-    color: $teal;
+    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-status);
     font-size: 1.5em;
     margin-bottom: 0.4em;
   }
 
-  // .calendar-menu-weather.today.condition.label.weather-color.red {
-  //   color: $red;
-  // }
-  // .calendar-menu-weather.today.condition.label.weather-color.orange {
-  //   color: $orange;
-  // }
-  // .calendar-menu-weather.today.condition.label.weather-color.lavender {
-  //   color: $lavender;
-  // }
-  // .calendar-menu-weather.today.condition.label.weather-color.blue {
-  //   color: $blue;
-  // }
-  // .calendar-menu-weather.today.condition.label.weather-color.sky {
-  //   color: $sky;
-  // }
-
   .calendar-menu-weather.today.temp.label.icon.weather-color.red {
-    color: $red;
+    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-extremelyhot);
   }
   .calendar-menu-weather.today.temp.label.icon.weather-color.orange {
-    color: $orange;
+    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-hot);
   }
   .calendar-menu-weather.today.temp.label.icon.weather-color.lavender {
-    color: $lavender;
+    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-moderate);
   }
   .calendar-menu-weather.today.temp.label.icon.weather-color.blue {
-    color: $blue;
+    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-cold);
   }
   .calendar-menu-weather.today.temp.label.icon.weather-color.sky {
-    color: $sky;
+    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-thermometer-extremelycold);
   }
 }
 
 .calendar-menu-weather.today.stats.container {
   margin-bottom: 0.75em;
-  color: $pink;
+  color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-stats);
 
   .weather.label {
     margin-left: 0.35em;
@@ -165,15 +145,15 @@
 }
 
 .hourly-weather-time {
-  color: $pink;
+  color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-hourly-time);
   margin-bottom: 0.5em;
 }
 
 .hourly-weather-icon {
-  color: $pink;
+  color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-hourly-icon);
   margin-bottom: 0.5em;
 }
 
 .hourly-weather-temp {
-  color: $pink;
+  color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-clock-weather-hourly-temperature);
 }
diff --git a/scss/variables.scss b/scss/variables.scss
index 2c1ff10..19423be 100644
--- a/scss/variables.scss
+++ b/scss/variables.scss
@@ -63,7 +63,7 @@ $bar-menus-background: #11111b;
 $bar-menus-cards: #1e1e2e;
 $bar-menus-border: #313244;
 $bar-menus-text: #cdd6f4;
-$bar-menus-dimtext: #cdd6f4;
+$bar-menus-dimtext: #585b70;
 $bar-menus-label: #b4befe;
 $bar-menus-listitems-passive: #cdd6f4;
 $bar-menus-listitems-active: #b4befe;
@@ -186,6 +186,7 @@ $bar-menus-menu-clock-time-timeperiod: #94e2d5;
 $bar-menus-menu-clock-calendar-yearmonth: #94e2d5;
 $bar-menus-menu-clock-calendar-weekdays: #f5c2e7;
 $bar-menus-menu-clock-calendar-paginator: #f5c2e7;
+$bar-menus-menu-clock-calendar-currentday: #f5c2e7;
 $bar-menus-menu-clock-calendar-days: #cdd6f4;
 $bar-menus-menu-clock-calendar-contextdays: #585b70;
 $bar-menus-menu-clock-weather-icon: #f5c2e7;