changed blinking animation and colors

config

@@ -44,16 +44,13 @@
 
     "battery": {
         "states": {
-            // "good": 85,
             "warning": 30,
             "critical": 10
         },
         "format": "{capacity}% {icon}",
         "format-charging": "{capacity}% 󱐋",
         "format-plugged": "{capacity}% ",
-        // "format-good": "", // An empty format will hide the module
-        // "format-full": "",
-        "format-icons": ["", "", "", "", ""]
+        "format-icons": [" ", " ", " ", " ", " "]
     },
 
     "custom/PBPbattery": {

style.css

@@ -11,37 +11,53 @@
  * -------------------------------------------------------------------------- */
 
 /*
-Arc-Dark Color Scheme
+Catppuccin Color Scheme
 */
-/* @define-color highlight #5294e2 ; */
-/* @define-color base1  #404552 ; */
 
 @define-color highlight #CBA6F7 ;
 @define-color base1  #1E1E2E ;
 @define-color border  #B4BEFE ;
 
-@keyframes blink-warning {
-    70% {
-        color: white;
+@define-color black #45475A ;
+@define-color white #BAC2DE ;
+
+@define-color red #F38BA8 ;
+@define-color orange #F9E2AF ;
+
+@keyframes blink {
+    60%{
+      color: @black;
     }
 
     to {
-        color: white;
-        background-color: orange;
+        color: @black;
+        background-color: @white;
+    }
+}
+
+@keyframes blink-warning {
+    60%{
+      color: @black;
+    }
+
+    to {
+        color: @black;
+        background-color: @orange;
     }
 }
 
 @keyframes blink-critical {
-    70% {
-      color: white;
+    60%{
+      color: @black;
     }
 
     to {
-        color: white;
-        background-color: red;
+        color: @black;
+        background-color: @red;
     }
 }
 
+
 /* -----------------------------------------------------------------------------
  * Base styles
  * -------------------------------------------------------------------------- */
@@ -59,7 +75,7 @@ Arc-Dark Color Scheme
 #waybar {
     background: transparent;
     border: 1px solid @border;
-    color: #bebebe;
+    color: @white;
     background-color: @base1;
     font-family: UbuntuMono;
     font-size: 14px;
@@ -89,35 +105,35 @@ Arc-Dark Color Scheme
  * -------------------------------------------------------------------------- */
 
 #battery {
-    animation-timing-function: linear;
+    animation-timing-function: ease-in-out;
     animation-iteration-count: infinite;
     animation-direction: alternate;
 }
 
 #battery.warning {
-    color: orange;
+    color: @white;
 }
 
 #battery.critical {
-    color: red;
+    color: @white;
 }
 
 #battery.warning.discharging {
-    animation-name: blink-warning;
-    animation-duration: 3s;
+    animation-name: blink;
+    animation-duration: 400ms;
 }
 
 #battery.critical.discharging {
-    animation-name: blink-critical;
-    animation-duration: 2s;
+    animation-name: blink;
+    animation-duration: 150ms;
 }
 
 #cpu.warning {
-    color: orange;
+    color: @orange;
 }
 
 #cpu.critical {
-    color: red;
+    color: @red;
 }
 
 #memory {
@@ -127,11 +143,11 @@ Arc-Dark Color Scheme
 }
 
 #memory.warning {
-    color: orange;
+    color: @orange;
  }
 
 #memory.critical {
-    color: red;
+    color: @red;
     animation-name: blink-critical;
     animation-duration: 2s;
     padding-left:5px;
@@ -141,13 +157,13 @@ Arc-Dark Color Scheme
 #mode {
     background: @highlight;
     border-bottom: 3px transparent;
-    color:white;
+    color: @white;
     margin-left: 5px;
     padding: 7px;
 }
 
 #network.disconnected {
-    color: orange;
+    color: @orange;
 }
 
 #pulseaudio {
@@ -159,7 +175,7 @@ Arc-Dark Color Scheme
 }
 
 #temperature.critical {
-    color: red;
+    color: @red;
 }
 
 #window {
@@ -183,8 +199,8 @@ Arc-Dark Color Scheme
 }
 
 #workspaces button.urgent {
-    border-color: #c9545d;
-    color: #c9545d;
+    border-color: @red;
+    color: @red;
 }
 
 #custom-power {