Implemented the calendar menu that displays time, calendar and weather (WIP).

2024-06-27 02:07:44 -07:00
parent 4ff2392c48
commit cfaceac4c0
11 changed files with 686 additions and 202 deletions
--- a/modules/icons/index.js
+++ b/modules/icons/index.js
@@ -1,7 +1,7 @@
 export const substitutes = {
  "transmission-gtk": "transmission",
  "blueberry.py": "blueberry",
-    "Caprine": "facebook-messenger",
+  Caprine: "facebook-messenger",
  "com.raggesilver.BlackBox-symbolic": "terminal-symbolic",
  "org.wezfurlong.wezterm-symbolic": "terminal-symbolic",
  "audio-headset-bluetooth": "audio-headphones-symbolic",
@@ -10,7 +10,7 @@ export const substitutes = {
  "preferences-system": "emblem-system-symbolic",
  "com.github.Aylur.ags-symbolic": "controls-symbolic",
  "com.github.Aylur.ags": "controls-symbolic",
-}
+};

 export default {
  missing: "image-missing-symbolic",
@@ -142,4 +142,55 @@ export default {
    dark: "dark-mode-symbolic",
    light: "light-mode-symbolic",
  },
-}
+  weather: {
+    sunny: "weather-clear-symbolic",
+    clear: "weather-clear-night-symbolic",
+    partly_cloudy: "weather-few-clouds-symbolic",
+    cloudy: "weather-overcast-symbolic",
+    overcast: "weather-overcast-symbolic",
+    mist: "weather-overcast-symbolic",
+    patchy_rain_possible: "weather-showers-scattered-symbolic",
+    patchy_snow_possible: "weather-snow-symbolic",
+    patchy_sleet_possible: "weather-snow-symbolic",
+    patchy_freezing_drizzle_possible: "weather-showers-scattered-symbolic",
+    thundery_outbreaks_possible: "weather-overcast-symbolic",
+    blowing_snow: "weather-snow-symbolic",
+    blizzard: "weather-snow-symbolic",
+    fog: "weather-fog-symbolic",
+    freezing_fog: "weather-fog-symbolic",
+    patchy_light_drizzle: "weather-showers-scattered-symbolic",
+    light_drizzle: "weather-showers-symbolic",
+    freezing_drizzle: "weather-showers-symbolic",
+    heavy_freezing_drizzle: "weather-showers-symbolic",
+    patchy_light_rain: "weather-showers-scattered-symbolic",
+    light_rain: "weather-showers-symbolic",
+    moderate_rain_at_times: "weather-showers-symbolic",
+    moderate_rain: "weather-showers-symbolic",
+    heavy_rain_at_times: "weather-showers-symbolic",
+    heavy_rain: "weather-showers-symbolic",
+    light_freezing_rain: "weather-showers-symbolic",
+    moderate_or_heavy_freezing_rain: "weather-showers-symbolic",
+    light_sleet: "weather-snow-symbolic",
+    moderate_or_heavy_sleet: "weather-snow-symbolic",
+    patchy_light_snow: "weather-snow-symbolic",
+    light_snow: "weather-snow-symbolic",
+    patchy_moderate_snow: "weather-snow-symbolic",
+    moderate_snow: "weather-snow-symbolic",
+    patchy_heavy_snow: "weather-snow-symbolic",
+    heavy_snow: "weather-snow-symbolic",
+    ice_pellets: "weather-showers-symbolic",
+    light_rain_shower: "weather-showers-symbolic",
+    moderate_or_heavy_rain_shower: "weather-showers-symbolic",
+    torrential_rain_shower: "weather-showers-symbolic",
+    light_sleet_showers: "weather-showers-symbolic",
+    moderate_or_heavy_sleet_showers: "weather-showers-symbolic",
+    light_snow_showers: "weather-snow-symbolic",
+    moderate_or_heavy_snow_showers: "weather-snow-symbolic",
+    light_showers_of_ice_pellets: "weather-showers-symbolic",
+    moderate_or_heavy_showers_of_ice_pellets: "weather-showers-symbolic",
+    patchy_light_rain_with_thunder: "weather-showers-scattered-symbolic",
+    moderate_or_heavy_rain_with_thunder: "weather-showers-symbolic",
+    patchy_light_snow_with_thunder: "weather-snow-symbolic",
+    moderate_or_heavy_snow_with_thunder: "weather-snow-symbolic",
+  },
+};
--- a/modules/menus/bluetooth/index.js
+++ b/modules/menus/bluetooth/index.js
@@ -5,7 +5,7 @@ export default () => {
  const connectedDevices = (btDevices) => {
    const noDevices = () => {
      return Widget.Box({
-        hpack: "start",
+        hpack: "center",
        hexpand: true,
        child: Widget.Label({
          class_name: "dim",
--- a/modules/menus/calendar/index.js
+++ b/modules/menus/calendar/index.js
@@ -1,5 +1,242 @@
 import PopupWindow from "../PopupWindow.js";
 import icons from "../../icons/index.js";
+import { keyRing } from "../../../../../Documents/Keys/keyList.js";
+
+const time = Variable("", {
+  poll: [1000, 'date "+%I:%M:%S"'],
+});
+
+const period = Variable("", {
+  poll: [1000, 'date "+%p"'],
+});
+const defaultWeather = {
+  current: {
+    temp_f: 0,
+    wind_mph: 0,
+    condition: {
+      text: "Clear",
+    },
+    forecast: {
+      forecastday: [
+        {
+          day: {
+            daily_chance_of_rain: 0,
+          },
+        },
+      ],
+    },
+  },
+};
+
+const theWeather = Variable(defaultWeather);
+
+const getIcon = (fahren) => {
+  const icons = {
+    100: "",
+    75: "",
+    50: "",
+    25: "",
+    0: "",
+  };
+  const colors = {
+    100: "weather-color red",
+    75: "weather-color orange",
+    50: "weather-color lavender",
+    25: "weather-color blue",
+    0: "weather-color sky",
+  };
+
+  const threshold =
+    fahren < 0
+      ? 0
+      : [100, 75, 50, 25, 0].find((threshold) => threshold <= fahren);
+
+  return {
+    icon: icons[threshold],
+    color: colors[threshold],
+  };
+};
+
+const TimeWidget = () => {
+  return Widget.Box({
+    class_name: "calendar-menu-item-container clock",
+    hexpand: true,
+    vpack: "center",
+    hpack: "fill",
+    child: Widget.Box({
+      hexpand: true,
+      vpack: "center",
+      hpack: "center",
+      class_name: "clock-content-items",
+      children: [
+        Widget.Box({
+          hpack: "center",
+          children: [
+            Widget.Label({
+              class_name: "clock-content-time",
+              label: time.bind(),
+            }),
+          ],
+        }),
+        Widget.Box({
+          hpack: "center",
+          children: [
+            Widget.Label({
+              vpack: "end",
+              class_name: "clock-content-period",
+              label: period.bind(),
+            }),
+          ],
+        }),
+      ],
+    }),
+  });
+};
+
+const CalendarWidget = () => {
+  return Widget.Box({
+    class_name: "calendar-menu-item-container calendar",
+    hpack: "fill",
+    vpack: "fill",
+    expand: true,
+    child: Widget.Box({
+      class_name: "calendar-container-box",
+      child: Widget.Calendar({
+        expand: true,
+        hpack: "fill",
+        vpack: "fill",
+        class_name: "calendar-menu-widget",
+        showDayNames: true,
+        showDetails: false,
+        showHeading: true,
+      }),
+    }),
+  });
+};
+
+const WeatherWidget = () => {
+  return Widget.Box({
+    class_name: "calendar-menu-item-container weather",
+    child: Widget.Box({
+      class_name: "weather-container-box",
+      setup: (self) => {
+        Utils.interval(6000, () => {
+          Utils.execAsync(
+            `curl "https://api.weatherapi.com/v1/forecast.json?key=${keyRing.weatherapi}&q=93722&days=1&aqi=no&alerts=no"`,
+          ).then((res) => {
+            theWeather.value = JSON.parse(res);
+          });
+        });
+
+        return (self.child = Widget.Box({
+          class_name: "calendar-menu-weather today",
+          hexpand: true,
+          children: [
+            Widget.Box({
+              vpack: "center",
+              hpack: "start",
+              class_name: "calendar-menu-weather today icon container",
+              children: [
+                Widget.Icon({
+                  class_name: "calendar-menu-weather today icon",
+                  icon: theWeather.bind("value").as((v) => {
+                    return icons.weather[
+                      v.current.condition.text
+                        .toLowerCase()
+                        .replaceAll(" ", "_")
+                    ];
+                  }),
+                }),
+              ],
+            }),
+            Widget.Box({
+              hexpand: true,
+              vpack: "center",
+              hpack: "center",
+              class_name: "calendar-menu-weather today temp container",
+              vertical: true,
+              children: [
+                Widget.Box({
+                  children: [
+                    Widget.Label({
+                      class_name: "calendar-menu-weather today temp label",
+                      label: theWeather
+                        .bind("value")
+                        .as((v) => `${Math.ceil(v.current.temp_f)}° F`),
+                    }),
+                    Widget.Label({
+                      class_name: theWeather
+                        .bind("value")
+                        .as(
+                          (v) =>
+                            `calendar-menu-weather today temp label icon ${getIcon(Math.ceil(v.current.temp_f)).color}`,
+                        ),
+                      label: theWeather
+                        .bind("value")
+                        .as((v) => getIcon(Math.ceil(v.current.temp_f)).icon),
+                    }),
+                  ],
+                }),
+                Widget.Label({
+                  class_name: theWeather
+                    .bind("value")
+                    .as(
+                      (v) =>
+                        `calendar-menu-weather today condition label ${getIcon(Math.ceil(v.current.temp_f)).color}`,
+                    ),
+                  label: theWeather
+                    .bind("value")
+                    .as((v) => v.current.condition.text),
+                }),
+              ],
+            }),
+            Widget.Box({
+              class_name: "calendar-menu-weather today stats container",
+              hpack: "end",
+              vpack: "start",
+              vertical: true,
+              children: [
+                Widget.Box({
+                  class_name: "weather wind",
+                  children: [
+                    Widget.Label({
+                      class_name: "weather wind icon",
+                      label: "",
+                    }),
+                    Widget.Label({
+                      class_name: "weather wind label",
+                      label: theWeather
+                        .bind("value")
+                        .as((v) => `${Math.floor(v.current.wind_mph)} mph`),
+                    }),
+                  ],
+                }),
+                Widget.Box({
+                  class_name: "weather precip",
+                  children: [
+                    Widget.Label({
+                      class_name: "weather precip icon",
+                      label: "",
+                    }),
+                    Widget.Label({
+                      class_name: "weather precip label",
+                      label: theWeather
+                        .bind("value")
+                        .as(
+                          (v) =>
+                            `${v.forecast.forecastday[0].day.daily_chance_of_rain}%`,
+                        ),
+                    }),
+                  ],
+                }),
+              ],
+            }),
+          ],
+        }));
+      },
+    }),
+  });
+};

 export default () => {
  return PopupWindow({
@@ -14,17 +251,12 @@ export default () => {
      children: [
        Widget.Box({
          class_name: "calendar-content-container",
+          vertical: true,
          children: [
            Widget.Box({
              class_name: "calendar-content-items",
-              children: [
-                Widget.Calendar({
-                  class_name: "calendar-menu-calendar",
-                  showDayNames: true,
-                  showDetails: true,
-                  showHeading: true,
-                }),
-              ],
+              vertical: true,
+              children: [TimeWidget(), CalendarWidget(), WeatherWidget()],
            }),
          ],
        }),
--- a/scss/bar/bar.scss
+++ b/scss/bar/bar.scss
@@ -1,12 +1,13 @@
@import "../colors";

 .bar {
-  background: $mantle;
+  background: $crust;
 }

 .bar_item_box_visible {
-  background: transparentize($surface0, 0.2);
+  background-color: $base2;
  border-radius: 0.35em;
+  // border: 0.15em solid $surface0;
  padding: 0.2rem 0.9rem;
  margin: 0.5rem 0.25rem;

--- a/scss/bar/workspace.scss
+++ b/scss/bar/workspace.scss
@@ -19,8 +19,8 @@
    }

    &.active {
-      color: $lavender;
-      background-color: $lavender;
+      color: $pink;
+      background-color: $pink;
      min-width: 11em;
      min-height: 4.5em;
    }
--- a/scss/colors.scss
+++ b/scss/colors.scss
@@ -38,6 +38,7 @@ $surface2: #585b70;
 $surface1: #45475a;
 $surface0: #313244;
 $base: #1e1e2e;
+$base2: #242438;
 $mantle: #181825;
 $crust: #11111b;

--- a/scss/main.scss
+++ b/scss/main.scss
@@ -1,7 +1,7 @@
 * {
  all: unset;
  font-family: "Ubuntu Nerd Font";
-  font-size: 1.2rem;
+  font-size: 1.175rem;
  font-weight: 600;
 }

--- a/scss/menus/calendar.scss
+++ b/scss/menus/calendar.scss
@@ -2,9 +2,9 @@

 .calendar-content-container {
  margin-top: 0em;
-  min-width: 16em;
+  min-width: 27em;
  min-height: 6em;
-  background: $mantle;
+  background: $crust;
  border: 0.13em solid $surface0; border-radius: 0.4em;
 }

@@ -12,19 +12,30 @@
  margin-right: 0.50em;
 }

-.calendar-content-items {
-  margin: 1em;
+.calendar-menu-item-container {
+  border-radius: 0.4em;
+  margin-bottom: 1.35em;
+  background: $base;
 }

-.calendar-menu-calendar {
-  all: unset;
-  padding: 1em;
+.calendar-content-items {
+  margin: 1.35em;
+}
+
+.calendar-container-box {
+  margin: 0.75em;
+  margin-bottom: 0em;
+}
+
+.calendar-menu-widget {
+  margin-top: 2em;
+  border-radius: 0.4em;
  color: $text;

  &:selected {
-    box-shadow: inset 0 -0.4em 0 0 $pink,
-      inset 0 -0.2em 0 0 $mantle,
-      inset 0 0 0 0.01em $mantle;
+    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;
    border-radius: 0em;
  }
@@ -33,17 +44,122 @@
    background-color: transparent;
    color: $teal;
  }
-
+  &.button {
+    color: $text;
+    font-weight: 900;
+    font-size: 900em;
+  }
+  &:hover {
+    color: $pink;
+  }
  &.highlight {
    border: 2em solid $pink;
    background-color: transparent;
    color: $pink;
  }
-
  &:indeterminate {
    color: $surface2;
  }

  font-size: 1.1em;
-  padding: 0.2em;
+  padding: 0.35em;
 }
+
+.clock-content-items {
+  min-height: 6em;
+
+  .clock-content-time {
+    font-size: 4em;
+    color: $pink;
+  }
+  .clock-content-period {
+    font-size: 1.75em;
+    margin-bottom: 0.7em;
+    margin-right: -0.875em;
+    color: $teal;
+  }
+}
+
+.calendar-menu-item-container.weather {
+  margin-bottom: 0em;
+}
+
+.weather-container-box {
+  color: $red;
+  margin: 1.5em;
+  min-width: 3em;
+  // min-height: 10em;
+
+  .calendar-menu-weather.today.icon {
+    image {
+      color: $pink;
+      font-size: 5em;
+      // margin-right: 0.3em;
+    }
+  }
+
+  .calendar-menu-weather.today.temp.label {
+    color: $text;
+    margin-left: 0.2em;
+    font-size: 2.5em;
+  }
+
+  .calendar-menu-weather.today.condition.label {
+    color: $teal;
+    font-size: 1.75em;
+    margin-left: -1.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;
+  }
+  .calendar-menu-weather.today.temp.label.icon.weather-color.orange {
+    color: $orange;
+  }
+  .calendar-menu-weather.today.temp.label.icon.weather-color.lavender {
+    color: $lavender;
+  }
+  .calendar-menu-weather.today.temp.label.icon.weather-color.blue {
+    color: $blue;
+  }
+  .calendar-menu-weather.today.temp.label.icon.weather-color.sky {
+    color: $sky;
+  }
+}
+
+.calendar-menu-weather.today.stats.container {
+  // margin-left: 2.2em;
+  color: $pink;
+
+  .weather.label {
+    margin-left: 0.35em;
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
--- a/scss/menus/power.scss
+++ b/scss/menus/power.scss
@@ -10,35 +10,35 @@ $popover-padding: 0.6rem * 1.6;

 window#verification .verification {
    @include floating-widget;
-    padding: 0.5rem * 1.6 * 1.5;
-    min-width: 20rem;
-    min-height: 8rem;
+    padding: 0.35em * 1.6 * 1.5;
+    min-width: 20em;
+    min-height: 6em;
    font-size: 1.3em;

    .text-box {
-        margin-bottom: 0.4rem;
+        margin-bottom: 0.3em;

        .title {
            font-size: 1.5em;
            color: $maroon;
-            margin-bottom: 0.75rem;
+            margin-bottom: 0.5em;
        }

        .desc {
            color: $lavender;
            font-size: 1em;
-            margin-bottom: 0.75rem;
-            padding: 1.15rem 2.25rem;
+            margin-bottom: 0.55em;
+            padding: 1em 3em;
        }
    }

    .verification-button {
        background: $crust;
-        padding: 0.75rem 0rem;
-        margin: 0.4rem 1.9rem;
-        border: 0.2rem solid;
+        padding: 0.7em 0em;
+        margin: 0.4em 1.7em;
+        border: 0.15em solid;
        border-color: $crust;
-        border-radius: 0.4rem;
+        border-radius: 0.3em;
        opacity: 1;
        transition: border-color 0.2s ease-in-out;
        transition: opacity .3s ease-in-out;
@@ -105,6 +105,8 @@ window#powermenu .powermenu {

 .widget-button {
    border-color: $crust;
+    min-width: 4.5em;
+    min-height: 4.5em;
    opacity: 1;
    transition: border-color 0.2s ease-in-out;
    transition: opacity .3s ease-in-out;
--- a/style.css
+++ b/style.css
@@ -1,7 +1,7 @@
 * {
  all: unset;
  font-family: "Ubuntu Nerd Font";
-  font-size: 1.2rem;
+  font-size: 1.175rem;
  font-weight: 600;
 }

@@ -344,8 +344,8 @@ spinner:checked {
  min-height: 4.5em;
 }
 .workspaces label.active {
-  color: #b4befe;
-  background-color: #b4befe;
+  color: #f5c2e7;
+  background-color: #f5c2e7;
  min-width: 11em;
  min-height: 4.5em;
 }
@@ -400,11 +400,11 @@ spinner:checked {
 }

 .bar {
-  background: #181825;
+  background: #11111b;
 }

 .bar_item_box_visible {
-  background: rgba(49, 50, 68, 0.8);
+  background-color: #242438;
  border-radius: 0.35em;
  padding: 0.2rem 0.9rem;
  margin: 0.5rem 0.25rem;
@@ -611,32 +611,32 @@ window#verification .verification {
  color: #9278b6;
  border-radius: 0.5rem;
  padding: 1.5rem;
-  padding: 1.2rem;
-  min-width: 20rem;
-  min-height: 8rem;
+  padding: 0.84em;
+  min-width: 20em;
+  min-height: 6em;
  font-size: 1.3em;
 }
 window#verification .verification .text-box {
-  margin-bottom: 0.4rem;
+  margin-bottom: 0.3em;
 }
 window#verification .verification .text-box .title {
  font-size: 1.5em;
  color: #eba0ac;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.5em;
 }
 window#verification .verification .text-box .desc {
  color: #b4befe;
  font-size: 1em;
-  margin-bottom: 0.75rem;
-  padding: 1.15rem 2.25rem;
+  margin-bottom: 0.55em;
+  padding: 1em 3em;
 }
 window#verification .verification .verification-button {
  background: #11111b;
-  padding: 0.75rem 0rem;
-  margin: 0.4rem 1.9rem;
-  border: 0.2rem solid;
+  padding: 0.7em 0em;
+  margin: 0.4em 1.7em;
+  border: 0.15em solid;
  border-color: #11111b;
-  border-radius: 0.4rem;
+  border-radius: 0.3em;
  opacity: 1;
  transition: border-color 0.2s ease-in-out;
  transition: opacity 0.3s ease-in-out;
@@ -697,6 +697,8 @@ window#powermenu .powermenu.box {

 .widget-button {
  border-color: #11111b;
+  min-width: 4.5em;
+  min-height: 4.5em;
  opacity: 1;
  transition: border-color 0.2s ease-in-out;
  transition: opacity 0.3s ease-in-out;
@@ -1108,9 +1110,9 @@ image {

 .calendar-content-container {
  margin-top: 0em;
-  min-width: 16em;
+  min-width: 27em;
  min-height: 6em;
-  background: #181825;
+  background: #11111b;
  border: 0.13em solid #313244;
  border-radius: 0.4em;
 }
@@ -1119,35 +1121,114 @@ image {
  margin-right: 0.5em;
 }

-.calendar-content-items {
-  margin: 1em;
+.calendar-menu-item-container {
+  border-radius: 0.4em;
+  margin-bottom: 1.35em;
+  background: #1e1e2e;
 }

-.calendar-menu-calendar {
-  all: unset;
-  padding: 1em;
+.calendar-content-items {
+  margin: 1.35em;
+}
+
+.calendar-container-box {
+  margin: 0.75em;
+  margin-bottom: 0em;
+}
+
+.calendar-menu-widget {
+  margin-top: 2em;
+  border-radius: 0.4em;
  color: #cdd6f4;
  font-size: 1.1em;
-  padding: 0.2em;
+  padding: 0.35em;
 }
-.calendar-menu-calendar:selected {
-  box-shadow: inset 0 -0.4em 0 0 #f5c2e7, inset 0 -0.2em 0 0 #181825, inset 0 0 0 0.01em #181825;
+.calendar-menu-widget:selected {
+  box-shadow: inset 0 -0.5em 0 0 #f5c2e7, inset -0.4em -0.3em 0 0 #1e1e2e, inset 0.4em 0 0 0.01em #1e1e2e;
  color: #f5c2e7;
  border-radius: 0em;
 }
-.calendar-menu-calendar.header {
+.calendar-menu-widget.header {
  background-color: transparent;
  color: #94e2d5;
 }
-.calendar-menu-calendar.highlight {
+.calendar-menu-widget.button {
+  color: #cdd6f4;
+  font-weight: 900;
+  font-size: 900em;
+}
+.calendar-menu-widget:hover {
+  color: #f5c2e7;
+}
+.calendar-menu-widget.highlight {
  border: 2em solid #f5c2e7;
  background-color: transparent;
  color: #f5c2e7;
 }
-.calendar-menu-calendar:indeterminate {
+.calendar-menu-widget:indeterminate {
  color: #585b70;
 }

+.clock-content-items {
+  min-height: 6em;
+}
+.clock-content-items .clock-content-time {
+  font-size: 4em;
+  color: #f5c2e7;
+}
+.clock-content-items .clock-content-period {
+  font-size: 1.75em;
+  margin-bottom: 0.7em;
+  margin-right: -0.875em;
+  color: #94e2d5;
+}
+
+.calendar-menu-item-container.weather {
+  margin-bottom: 0em;
+}
+
+.weather-container-box {
+  color: #f38ba8;
+  margin: 1.5em;
+  min-width: 3em;
+}
+.weather-container-box .calendar-menu-weather.today.icon image {
+  color: #f5c2e7;
+  font-size: 5em;
+}
+.weather-container-box .calendar-menu-weather.today.temp.label {
+  color: #cdd6f4;
+  margin-left: 0.2em;
+  font-size: 2.5em;
+}
+.weather-container-box .calendar-menu-weather.today.condition.label {
+  color: #94e2d5;
+  font-size: 1.75em;
+  margin-left: -1.4em;
+}
+.weather-container-box .calendar-menu-weather.today.temp.label.icon.weather-color.red {
+  color: #f38ba8;
+}
+.weather-container-box .calendar-menu-weather.today.temp.label.icon.weather-color.orange {
+  color: #fab387;
+}
+.weather-container-box .calendar-menu-weather.today.temp.label.icon.weather-color.lavender {
+  color: #b4befe;
+}
+.weather-container-box .calendar-menu-weather.today.temp.label.icon.weather-color.blue {
+  color: #89b4fa;
+}
+.weather-container-box .calendar-menu-weather.today.temp.label.icon.weather-color.sky {
+  color: #89dceb;
+}
+
+.calendar-menu-weather.today.stats.container {
+  color: #f5c2e7;
+}
+.calendar-menu-weather.today.stats.container .weather.label {
+  margin-left: 0.35em;
+}
+
 .notification-card-container {
  margin-top: 3.5rem;
 }
--- a/style.css.map
+++ b/style.css.map