move ubersicht modules in tree

81 files changed, 4240 insertions, 0 deletions

diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/battery.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/battery.js
new file mode 100755
index 0000000..5c0c413
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/battery.js
@@ -0,0 +1,134 @@
+// Styles for /lib/components/data/battery.jsx component
+export const batteryStyles = /* css */ `
+.battery {
+  position: relative;
+  background-color: var(--magenta);
+  overflow: hidden;
+}
+.battery--caffeinate,
+.simple-bar--no-color-in-data .battery--caffeinate {
+  color: var(--black);
+  background-color: var(--white);
+}
+.simple-bar--widgets-background-color-as-foreground .battery {
+  color: var(--magenta);
+  background-color: transparent;
+}
+.simple-bar--widgets-background-color-as-foreground .battery--caffeinate {
+  color: var(--foreground);
+}
+.battery__icon {
+  position: relative;
+  width: 16px;
+  height: 9px;
+  margin-top: -2px;
+  margin-right: 10px;
+}
+.battery__icon::after {
+  content: '';
+  position: absolute;
+  top: calc(10% + 1px);
+  left: calc(100% + 2px);
+  width: 2px;
+  height: 80%;
+  border-radius: 0 3px 3px 0;
+  background-color: currentColor;
+}
+.simple-bar--no-color-in-data .battery__icon::after {
+  background-color: currentColor;
+}
+.battery__icon-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 3px;
+  border: 1px solid currentColor;
+  overflow: hidden;
+}
+.battery__charging-icon {
+  position: absolute;
+  top: -1px;
+  left: calc(50% - 6px);
+  width: 11px;
+  height: 11px;
+  fill: currentColor;
+  stroke: var(--magenta);
+  stroke-width: 2;
+}
+.simple-bar--no-color-in-data .battery__charging-icon {
+  stroke: var(--minor);
+}
+.battery--caffeinate .battery__charging-icon {
+  stroke: var(--white);
+}
+.simple-bar--widgets-background-color-as-foreground .battery__charging-icon {
+  stroke: var(--background);
+}
+.simple-bar--no-color-in-data .battery__icon-inner {
+  fill: currentColor;
+  border: 1px solid currentColor;
+}
+.battery__icon-filler {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: calc(100% - 2px);
+  height: calc(100% - 2px);
+  background-color: currentColor;
+  border-radius: 2px;
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform 160ms var(--transition-easing);
+  z-index: 0;
+}
+.simple-bar--no-color-in-data .battery__icon-filler {
+  background-color: currentColor;
+  opacity: 0.8;
+}
+.simple-bar--no-color-in-data .battery--caffeinate .battery__icon::after,
+.simple-bar--no-color-in-data .battery--caffeinate .battery__icon-filler {
+  background-color: currentColor;
+}
+.battery--low .battery__icon-filler {
+  background-color: var(--red);
+}
+.battery--low-power-mode .battery__icon-filler {
+  background-color: var(--yellow);
+}
+.battery__caffeinate-icon {
+  position: absolute;
+  top: calc(50% - 12px);
+  right: -4px;
+  width: 26px !important;
+  height: 26px !important;
+  opacity: 0.15;
+}
+.battery__caffeinate-icon g path {
+  animation: coffee-spur-sliding-up 1600ms var(--transition-easing) infinite;
+}
+.simple-bar--animations-disabled .battery__caffeinate-icon g path {
+  animation: none;
+}
+.battery__caffeinate-icon g path:nth-child(2) {
+  animation-delay: -600ms;
+}
+.battery__caffeinate-icon g path:nth-child(3) {
+  animation-delay: -280ms;
+}
+@keyframes coffee-spur-sliding-up {
+  0% {
+    opacity: 0;
+    transform: translateY(3px);
+  }
+  20% {
+    opacity: 0.7;
+  }
+  80% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/browser-track.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/browser-track.js
new file mode 100755
index 0000000..c70a1ee
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/browser-track.js
@@ -0,0 +1,40 @@
+// Styles for /lib/components/data/browser-track.jsx
+export const browserTrackStyles = /* css */ `
+.browser-track {
+  position: relative;
+  background-color: var(--green);
+}
+.simple-bar--widgets-background-color-as-foreground .browser-track {
+  color: var(--green);
+  background-color: transparent;
+}
+.browser-track__icons {
+  position: relative;
+}
+.browser-track__icons > svg:nth-of-type(1),
+.browser-track__icons > svg:nth-of-type(2) {
+  width: 10px;
+  height: 10px;
+  fill: currentColor;
+}
+.browser-track__icons > svg:nth-of-type(1) {
+  margin-right: 7px;
+}
+.simple-bar--no-color-in-data .browser-track__icons > svg:nth-of-type(1) {
+  fill: currentColor;
+}
+.browser-track__icons > svg:nth-of-type(2) {
+  position: absolute;
+  bottom: -1px;
+  right: 2px;
+  stroke: var(--green);
+  stroke-width: 3px;
+}
+.simple-bar--widgets-background-color-as-foreground .browser-track__icons > svg:nth-of-type(2) {
+  stroke: var(--background);
+}
+.simple-bar--no-color-in-data .browser-track__icons > svg:nth-of-type(2) {
+  fill: currentColor;
+  stroke: var(--minor);
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/cpu.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/cpu.js
new file mode 100755
index 0000000..672c246
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/cpu.js
@@ -0,0 +1,16 @@
+// Styles for /lib/components/data/cpu.jsx component
+export const cpuStyles = /* css */ `
+.cpu {
+  color: var(--foreground);
+  background-color: var(--minor);
+}
+.cpu--graph {
+  min-width: 90px;
+  padding: 0;
+}
+.cpu__usage {
+  width: 4ch;
+  padding: 3px;
+  text-align: right;
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/crypto.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/crypto.js
new file mode 100755
index 0000000..3c9b0ae
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/crypto.js
@@ -0,0 +1,9 @@
+// Styles for /lib/components/data/crypto.jsx component
+export const cryptoStyles = /* css */ `
+.crypto {
+  color: var(--foreground);
+  background-color: var(--minor);
+}
+.simple-bar--widgets-background-color-as-foreground .crypto {
+  background-color: transparent;
+}`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget-loader.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget-loader.js
new file mode 100755
index 0000000..62710aa
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget-loader.js
@@ -0,0 +1,32 @@
+// Styles for /lib/components/data/data-widget-loader.jsx component
+export const dataWidgetLoaderStyles = /* css */ `
+.data-widget-loader {
+  animation: data-widget-loader-appearance 320ms var(--transition-easing);
+}
+@keyframes data-widget-loader-appearance {
+  0% {
+    opacity: 0;
+  }
+}
+.data-widget-loader::before {
+  content: "";
+  width: 10px;
+  height: 10px;
+  margin-right: 7px;
+  background-color: currentColor;
+  border-radius: 50%;
+  opacity: 0.75;
+}
+.data-widget-loader__inner {
+  border: 2px solid transparent;
+  border-bottom-color: currentColor;
+  box-sizing: border-box;
+  border-radius: 50%;
+  animation: data-widget-loader-spining 640ms ease infinite;
+}
+@keyframes data-widget-loader-spining {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget.js
new file mode 100755
index 0000000..f0b5cf1
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget.js
@@ -0,0 +1,65 @@
+// Styles for /lib/components/data/data-widget.jsx component
+export const dataWidgetStyles = /* css */ `
+.data-widget {
+  display: flex;
+  align-items: center;
+  margin: var(--item-outer-margin);
+  padding: var(--item-inner-margin);
+  color: var(--background);
+  font-family: var(--font);
+  font-size: inherit;
+  background-color: var(--minor);
+  text-decoration: none;
+  white-space: nowrap;
+  border-radius: var(--item-radius);
+  border: 0;
+  outline: none;
+  cursor: default;
+  user-select: none;
+  -webkit-user-select: none;
+  box-shadow: var(--light-shadow);
+  transition: all 160ms var(--transition-easing);
+}
+.simple-bar--no-shadow .data-widget {
+  box-shadow: none;
+}
+.simple-bar--no-color-in-data .data-widget {
+  color: var(--foreground);
+  background-color: var(--minor);
+}
+.simple-bar--widgets-background-color-as-foreground .data-widget {
+  background-color: transparent;
+  box-shadow: none;
+}
+.simple-bar--widgets-background-color-as-foreground.simple-bar--no-color-in-data .data-widget {
+  color: var(--foreground) !important;
+  background-color: transparent;
+}
+.data-widget--clickable {
+  cursor: pointer;
+}
+.data-widget--clickable:hover {
+  box-shadow: var(--light-shadow), var(--hover-ring);
+}
+.data-widget--clickable:active {
+  box-shadow: var(--light-shadow), var(--focus-ring);
+}
+.data-widget > svg {
+  width: 14px;
+  height: 14px;
+  margin-right: 7px;
+  fill: currentColor;
+}
+.data-widget__inner {
+  max-width: var(--item-max-width);
+  display: flex;
+  flew-wrap: nowrap;
+  overflow: hidden;
+}
+.data-widget__slider {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  transition: transform 160ms var(--transition-easing);
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/date-display.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/date-display.js
new file mode 100755
index 0000000..c152449
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/date-display.js
@@ -0,0 +1,10 @@
+// Styles for /lib/components/data/date-display.jsx component
+export const dateStyles = /* css */ `
+.date-display {
+  background-color: var(--cyan);
+}
+.simple-bar--widgets-background-color-as-foreground .date-display {
+  color: var(--cyan);
+  background-color: transparent;
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/github.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/github.js
new file mode 100755
index 0000000..f451ddc
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/github.js
@@ -0,0 +1,10 @@
+// Styles for /lib/components/data/github.jsx component
+export const githubStyles = /* css */ `
+.github {
+  position: relative;
+  color: var(--foreground);
+  background-color: var(--minor);
+  overflow: hidden;
+  z-index: 0;
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/gpu.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/gpu.js
new file mode 100755
index 0000000..c3f4b78
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/gpu.js
@@ -0,0 +1,15 @@
+// Styles for /lib/components/data/gpu.jsx component
+export const gpuStyles = /* css */ `
+.gpu {
+  color: var(--foreground);
+  background-color: var(--minor);
+}
+.gpu--graph {
+  min-width: 70px;
+  padding: 0;
+}
+.gpu__usage {
+  width: 4ch;
+  text-align: right;
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/graph.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/graph.js
new file mode 100755
index 0000000..0bf3609
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/graph.js
@@ -0,0 +1,49 @@
+// Styles for /lib/components/data/graph.jsx component
+export const graphStyles = /* css */ `
+.graph {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  gap: 4px;
+  overflow: hidden;
+  border-radius: inherit;
+}
+.graph__bars {
+  flex: 1 1 100%;
+  height: 75%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  pointer-events: none;
+}
+.graph__bar {
+  min-height: 1px;
+  opacity: 0.75;
+}
+.graph__data {
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: calc(100% - 6px);
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: space-between;
+  gap: 2px;
+}
+.graph__data-item {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+.graph__data-item-icon {
+  flex: 0 0 10px;
+  width: 10px;
+  height: 10px;
+  fill: currentColor;
+}
+.graph__data-item-value {
+  font-size: calc(var(--font-size) - 2px);
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/keyboard.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/keyboard.js
new file mode 100755
index 0000000..dfc4f70
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/keyboard.js
@@ -0,0 +1,10 @@
+// Styles for /lib/components/data/keyboard.jsx component
+export const keyboardStyles = /* css */ `
+.keyboard {
+  background-color: var(--main-alt);
+}
+.simple-bar--widgets-background-color-as-foreground .keyboard {
+  color: var(--main-alt);
+  background-color: transparent;
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/memory.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/memory.js
new file mode 100755
index 0000000..d0239bb
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/memory.js
@@ -0,0 +1,30 @@
+// Styles for /lib/components/data/memory.jsx component
+export const memoryStyles = /* css */ `
+.memory {
+  color: var(--foreground);
+  background-color: var(--minor);
+}
+.memory--low {
+  --pie-color: var(--green);
+}
+.memory--medium {
+  --pie-color: var(--yellow);
+}
+.memory--high {
+  --pie-color: var(--red);
+}
+.memory__pie {
+  flex: 0 0 21px;
+  width: 21px;
+  height: 21px;
+  border-radius: 50%;
+}
+.memory__content {
+  display: flex;
+  gap: 4px;
+  padding-left: 5px;
+}
+.memory--high .memory__content {
+  color: var(--red);
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mic.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mic.js
new file mode 100755
index 0000000..7a58f10
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mic.js
@@ -0,0 +1,83 @@
+// Styles for /lib/components/data/mic.jsx component
+export const micStyles = /* css */ `
+.mic {
+font-variant-numeric: tabular-nums;
+  background-color: var(--orange);
+  transform: translateZ(0);
+}
+.simple-bar--widgets-background-color-as-foreground .mic {
+  color: var(--orange);
+  background-color: transparent;
+}
+.mic__slider-container {
+  --slider-size: 10px;
+
+  position: relative;
+  max-width: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  overflow: hidden;
+  opacity: 0.7;
+  border-radius: var(--item-radius);
+  transition: max-width 320ms var(--transition-easing), padding 320ms var(--transition-easing),
+    opacity 320ms var(--transition-easing),
+    clip-path 0ms var(--transition-easing);
+}
+.mic:hover .mic__slider-container,
+.mic--dragging .mic__slider-container {
+  max-width: 100px;
+  clip-path: inset(-100vh -100vw);
+  transition: max-width 320ms var(--transition-easing), padding 320ms var(--transition-easing),
+    opacity 320ms var(--transition-easing),
+    clip-path 320ms 320ms var(--transition-easing)
+}
+.mic__slider-container:hover {
+  opacity: 1;
+}
+.mic__slider {
+  width: 100px;
+  height: var(--slider-size);
+  appearance: none;
+  background-color: var(--background);
+  border-radius: var(--item-radius);
+  outline: none;
+  -webkit-appearance: none;
+}
+.simple-bar--widgets-background-color-as-foreground .mic__slider {
+  background-color: var(--foreground);
+}
+.mic__slider::-webkit-slider-thumb {
+  width: var(--slider-size);
+  height: var(--slider-size);
+  background-color: var(--foreground);
+  border-radius: var(--item-radius);
+  cursor: pointer;
+  -webkit-appearance: none;
+  transform-origin: center;
+  transition: transform 160ms var(--transition-easing);
+}
+.simple-bar--widgets-background-color-as-foreground .mic__slider::-webkit-slider-thumb {
+  background-color: var(--orange);
+}
+.mic__slider::-webkit-slider-thumb:hover {
+  transform: scale(1.5);
+}
+.mic__display {
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
+  overflow: hidden;
+}
+.mic__display:active {
+  color: currentColor;
+}
+.mic__display > svg {
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  margin-right: 3px;
+  fill: currentColor;
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mpd.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mpd.js
new file mode 100755
index 0000000..da159ab
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/mpd.js
@@ -0,0 +1,80 @@
+// Styles for /lib/components/data/mpd.jsx component
+export const mpdStyles = /* css */ `
+.mpd {
+  position: relative;
+  background-color: var(--cyan);
+}
+.simple-bar--widgets-background-color-as-foreground .mpd {
+  color: var(--cyan);
+  background-color: transparent;
+}
+.mpd__outer {
+  display: flex;
+  gap: 4px;
+}
+.mpd__inner {
+  max-width: 140px;
+  display: flex;
+  flew-wrap: nowrap;
+  overflow: hidden;
+}
+.mpd__info {
+  white-space: nowrap;
+  transition: transform 160ms var(--transition-easing);
+}
+.mpd__slider-container {
+  --slider-size: 10px;
+
+  position: relative;
+  max-width: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  clip-path: inset(0);
+  opacity: 0.7;
+  border-radius: var(--item-radius);
+  transition: max-width 320ms var(--transition-easing), padding 320ms var(--transition-easing),
+    opacity 320ms var(--transition-easing),
+    clip-path 0ms var(--transition-easing);
+}
+.mpd:hover .mpd__slider-container,
+.mpd--dragging .mpd__slider-container {
+  max-width: 100px;
+  clip-path: inset(-100vh -100vw);
+  transition: max-width 320ms var(--transition-easing), padding 320ms var(--transition-easing),
+    opacity 320ms var(--transition-easing),
+    clip-path 320ms 320ms var(--transition-easing)
+}
+.mpd__slider-container:hover {
+  opacity: 1;
+}
+.mpd__slider {
+  width: 100px;
+  height: var(--slider-size);
+  appearance: none;
+  background-color: var(--background);
+  border-radius: var(--item-radius);
+  outline: none;
+  -webkit-appearance: none;
+}
+.simple-bar--widgets-background-color-as-foreground .mpd__slider {
+  background-color: var(--foreground);
+}
+.mpd__slider::-webkit-slider-thumb {
+  width: var(--slider-size);
+  height: var(--slider-size);
+  background-color: var(--foreground);
+  border-radius: var(--item-radius);
+  cursor: pointer;
+  -webkit-appearance: none;
+  transform-origin: center;
+  transition: transform 160ms var(--transition-easing);
+}
+.simple-bar--widgets-background-color-as-foreground .mpd__slider::-webkit-slider-thumb {
+  background-color: var(--blue);
+}
+.mpd__slider::-webkit-slider-thumb:hover {
+  transform: scale(1.5);
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/music.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/music.js
new file mode 100755
index 0000000..5de3b1f
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/music.js
@@ -0,0 +1,11 @@
+// Styles for /lib/components/data/music.jsx component
+export const musicStyles = /* css */ `
+.music {
+  position: relative;
+  background-color: var(--green);
+}
+.simple-bar--widgets-background-color-as-foreground .music {
+  color: var(--green);
+  background-color: transparent;
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/netstats.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/netstats.js
new file mode 100755
index 0000000..384d970
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/netstats.js
@@ -0,0 +1,48 @@
+// Styles for /lib/components/data/netstats.jsx component
+export const netstatsStyles = /* css */ `
+.netstats {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  color: var(--foreground);
+  background-color: var(--minor);
+  z-index: 0;
+}
+.netstats--graph {
+  min-width: 120px;
+  padding: 0;
+}
+.simple-bar--widgets-background-color-as-foreground .netstats {
+  background-color: transparent;
+}
+.netstats__item {
+  width: 9ch;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 0 4px;
+}
+.netstats__value {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  margin: 0 auto;
+}
+.netstats__value > em {
+  font-size: 0.8em;
+  font-style: normal;
+}
+.netstats__icon {
+  flex: 0 0 12px;
+  width: 12px;
+  height: 12px;
+}
+.netstats__icon--download {
+  fill: var(--magenta);
+}
+.netstats__icon--upload {
+  fill: var(--blue);
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/next-meeting.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/next-meeting.js
new file mode 100755
index 0000000..c4a0a0f
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/next-meeting.js
@@ -0,0 +1,71 @@
+// Styles for /lib/components/data/next-meeting.jsx component
+export const nextMeetingStyles = /* css */ `
+.next-meeting {
+  background-color: var(--cyan);
+}
+.simple-bar--widgets-background-color-as-foreground .next-meeting {
+  color: var(--cyan);
+  background-color: transparent;
+}
+.simple-bar--no-color-in-data .next-meeting {
+  background-color: var(--minor);
+}
+.next-meeting--upcoming {
+  background-color: var(--yellow) !important;
+}
+.simple-bar--widgets-background-color-as-foreground .next-meeting--upcoming {
+  color: var(--yellow);
+  background-color: transparent !important;
+}
+.next-meeting--urgent {
+  background-color: var(--red) !important;
+  animation: next-meeting-pulse 1.5s ease-in-out infinite;
+}
+.simple-bar--widgets-background-color-as-foreground .next-meeting--urgent {
+  color: var(--red);
+  background-color: transparent !important;
+}
+@keyframes next-meeting-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+.simple-bar--animations-disabled .next-meeting--urgent {
+  animation: none;
+}
+.next-meeting__title {
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 6px;
+}
+.next-meeting__time {
+  font-weight: 600;
+  opacity: 0.9;
+}
+.next-meeting__join {
+  margin-left: 6px;
+  padding: 2px 6px;
+  background-color: rgba(255, 255, 255, 0.2);
+  border: none;
+  border-radius: 3px;
+  color: inherit;
+  font-family: inherit;
+  font-size: 10px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 160ms var(--transition-easing),
+              transform 160ms var(--transition-easing);
+}
+.next-meeting__join:hover {
+  background-color: rgba(255, 255, 255, 0.35);
+  transform: translateY(-1px);
+}
+.next-meeting__join:active {
+  transform: translateY(0);
+}
+.next-meeting__join:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/notifications.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/notifications.js
new file mode 100755
index 0000000..a1008c8
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/notifications.js
@@ -0,0 +1,68 @@
+// Styles for /lib/components/data/notifications.jsx component
+export const notificationsStyles = /* css */ `
+.notifications {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: 5px;
+}
+.notification-pill {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 7px 8px;
+  background-color: var(--red);
+  border: none;
+  border-radius: var(--item-radius);
+  color: var(--white);
+  font-family: inherit;
+  font-size: 11px;
+  cursor: pointer;
+  transition: background-color 160ms var(--transition-easing),
+              transform 160ms var(--transition-easing);
+}
+.notification-pill:hover {
+  filter: brightness(1.2);
+  transform: translateY(-1px);
+}
+.notification-pill:active {
+  transform: translateY(0);
+}
+.notification-pill:focus {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+.simple-bar--no-color-in-data .notification-pill {
+  background-color: var(--minor);
+  color: var(--foreground);
+}
+.simple-bar--widgets-background-color-as-foreground .notification-pill {
+  background-color: transparent;
+  color: var(--red);
+  border: 1px solid var(--red);
+}
+.simple-bar--widgets-background-color-as-foreground .notification-pill:hover {
+  background-color: var(--red);
+  color: var(--white);
+}
+.notification-pill__icon {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+  flex-shrink: 0;
+}
+.notification-pill__badge {
+  background-color: rgba(0, 0, 0, 0.3);
+  color: var(--white);
+  padding: 1px 5px;
+  border-radius: 6px;
+  font-size: 10px;
+  font-weight: 600;
+  min-width: 8px;
+  text-align: center;
+}
+.simple-bar--widgets-background-color-as-foreground .notification-pill__badge {
+  background-color: var(--red);
+  color: var(--white);
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/sound.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/sound.js
new file mode 100755
index 0000000..a45a862
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/sound.js
@@ -0,0 +1,83 @@
+// Styles for /lib/components/data/sound.jsx component
+export const soundStyles = /* css */ `
+.sound {
+  font-variant-numeric: tabular-nums;
+  background-color: var(--blue);
+  transform: translateZ(0);
+}
+.simple-bar--widgets-background-color-as-foreground .sound {
+  color: var(--blue);
+  background-color: transparent;
+}
+.sound__slider-container {
+  --slider-size: 10px;
+
+  position: relative;
+  max-width: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  clip-path: inset(0);
+  opacity: 0.7;
+  border-radius: var(--item-radius);
+  transition: max-width 320ms var(--transition-easing), padding 320ms var(--transition-easing),
+    opacity 320ms var(--transition-easing),
+    clip-path 0ms var(--transition-easing);
+}
+.sound:hover .sound__slider-container,
+.sound--dragging .sound__slider-container {
+  max-width: 100px;
+  clip-path: inset(-100vh -100vw);
+  transition: max-width 320ms var(--transition-easing), padding 320ms var(--transition-easing),
+    opacity 320ms var(--transition-easing),
+    clip-path 320ms 320ms var(--transition-easing)
+}
+.sound__slider-container:hover {
+  opacity: 1;
+}
+.sound__slider {
+  width: 100px;
+  height: var(--slider-size);
+  appearance: none;
+  background-color: var(--background);
+  border-radius: var(--item-radius);
+  outline: none;
+  -webkit-appearance: none;
+}
+.simple-bar--widgets-background-color-as-foreground .sound__slider {
+  background-color: var(--foreground);
+}
+.sound__slider::-webkit-slider-thumb {
+  width: var(--slider-size);
+  height: var(--slider-size);
+  background-color: var(--foreground);
+  border-radius: var(--item-radius);
+  cursor: pointer;
+  -webkit-appearance: none;
+  transform-origin: center;
+  transition: transform 160ms var(--transition-easing);
+}
+.simple-bar--widgets-background-color-as-foreground .sound__slider::-webkit-slider-thumb {
+  background-color: var(--blue);
+}
+.sound__slider::-webkit-slider-thumb:hover {
+  transform: scale(1.5);
+}
+.sound__display {
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
+  overflow: hidden;
+}
+.sound__display:active {
+  color: currentColor;
+}
+.sound__display > svg {
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  margin-right: 3px;
+  fill: currentColor;
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/specter.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/specter.js
new file mode 100755
index 0000000..03d97a3
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/specter.js
@@ -0,0 +1,55 @@
+// Styles for /lib/components/data/specter.jsx component
+export const specterStyles = /* css */ `
+.specter {
+  position: absolute;
+  bottom: 0;
+  right: 30px;
+  display: flex;
+  align-items: flex-end;
+  z-index: 2;
+  pointer-events: none;
+  touch-action: none;
+}
+.simple-bar--animations-disabled .specter {
+  display: none;
+}
+.specter > span {
+  flex: 0 0 5px;
+  height: 15px;
+  max-height: 15px;
+  margin-left: 1px;
+  background-color: var(--main);
+  opacity: 0.1;
+  transform-origin: bottom;
+}
+.simple-bar--no-color-in-data .specter > span,
+.simple-bar--widgets-background-color-as-foreground .specter > span {
+  background-color: currentColor;
+}
+.specter > span {
+  animation: specter-waving 640ms var(--transition-easing) infinite;
+}
+.simple-bar--animations-disabled .specter > span {
+  animation: none;
+}
+.specter > span:nth-of-type(1) {
+  animation-delay: -460ms;
+}
+.specter > span:nth-of-type(2) {
+  animation-delay: -320ms;
+}
+.specter > span:nth-of-type(3) {
+  animation-delay: -200ms;
+}
+.specter > span:nth-of-type(4) {
+  animation-delay: -240ms;
+}
+.specter > span:nth-of-type(5) {
+  animation-delay: -150ms;
+}
+@keyframes specter-waving {
+  50% {
+    transform: scaleY(0.2);
+  }
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/spotify.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/spotify.js
new file mode 100755
index 0000000..0f9db7a
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/spotify.js
@@ -0,0 +1,15 @@
+// Styles for /lib/components/data/spotify.jsx component
+export const spotifyStyles = /* css */ `
+.spotify {
+  position: relative;
+  background-color: var(--green);
+}
+.simple-bar--widgets-background-color-as-foreground .spotify {
+  color: var(--green);
+  background-color: transparent;
+}
+
+.spotify--hidden-metadata > svg {
+  margin-right: 0;
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/stock.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/stock.js
new file mode 100755
index 0000000..2c1eacd
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/stock.js
@@ -0,0 +1,15 @@
+// Styles for /lib/components/data/stock.jsx component
+export const stockStyles = /* css */ `
+.stock {
+  color: var(--foreground);
+  background-color: var(--minor);
+}
+.simple-bar--widgets-background-color-as-foreground .stock {
+  background-color: transparent;
+}
+.stockUp {
+  color: var(--green);
+}
+.stockDown {
+  color: var(--red);
+}`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/time.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/time.js
new file mode 100755
index 0000000..ac04f90
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/time.js
@@ -0,0 +1,85 @@
+// Styles for /lib/components/data/time.jsx component
+export const timeStyles = /* css */ `
+.time {
+  position: relative;
+  font-variant-numeric: tabular-nums;
+  background-color: var(--yellow);
+  overflow: hidden;
+  z-index: 0;
+}
+.simple-bar--widgets-background-color-as-foreground .time {
+  color: var(--yellow);
+  background-color: transparent;
+}
+.time__filler {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: scaleX(0);
+  background-color: rgba(0, 0, 0, 0.15);
+  transform-origin: left;
+  pointer-events: none;
+  touch-action: none;
+  z-index: -1;
+}
+.simple-bar--widgets-background-color-as-foreground .time__filler {
+  background-color: transparent;
+}
+.time__icon {
+  position: relative;
+  flex: 0 0 15px;
+  width: 15px;
+  height: 15px;
+  margin-right: 7px;
+  border: 1px solid var(--background);
+  border-radius: 50%;
+}
+.simple-bar--widgets-background-color-as-foreground .time__icon {
+  border: 1px solid var(--yellow);
+}
+.simple-bar--no-color-in-data .time__icon {
+  border: 1px solid var(--foreground);
+}
+.time__hours,
+.time__minutes {
+  position: absolute;
+  bottom: 50%;
+  width: 1px;
+  left: 50%;
+  margin-left: -1px;
+  background-color: var(--background);
+  transform-origin: bottom;
+  transition: transform 160ms var(--transition-easing);
+  will-change: transform;
+}
+.simple-bar--widgets-background-color-as-foreground .time__hours, 
+.simple-bar--widgets-background-color-as-foreground .time__minutes {
+  background-color: var(--yellow);
+}
+.simple-bar--no-color-in-data .time__hours,
+.simple-bar--no-color-in-data .time__minutes {
+  background-color: var(--foreground);
+}
+.time__hours {
+  height: 28%;
+}
+.time__minutes {
+  height: 43%;
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2),
+  only screen and (min-device-pixel-ratio: 2),
+  only screen and (min-resolution: 192dpi),
+  only screen and (min-resolution: 2dppx) {
+  .time__icon {
+    flex: 0 0 16px;
+    width: 16px;
+    height: 16px;
+  }
+  .time__hours,
+  .time__minutes {
+    margin-left: 0;
+  }
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/viscosity-vpn.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/viscosity-vpn.js
new file mode 100755
index 0000000..b486b18
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/viscosity-vpn.js
@@ -0,0 +1,17 @@
+// Styles for /lib/components/data/viscosity-vpn.jsx component
+export const viscosityVPNStyles = /* css */ `
+.viscosity-vpn {
+  background-color: var(--red);
+}
+.simple-bar--widgets-background-color-as-foreground .viscosity-vpn {
+  color: var(--red);
+  background-color: transparent;
+}
+.viscosity-vpn--disconnected {
+  background-color: var(--minor);
+}
+.simple-bar--widgets-background-color-as-foreground .viscosity-vpn--disconnected {
+  color: var(--minor);
+  background-color: transparent;
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/weather.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/weather.js
new file mode 100755
index 0000000..0b48abe
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/weather.js
@@ -0,0 +1,163 @@
+// Styles for /lib/components/data/weather.jsx component
+export const weatherStyles = /* css */ `
+.weather {
+  position: relative;
+  color: var(--foreground);
+  background-color: var(--minor);
+  overflow: hidden;
+  z-index: 0;
+}
+.simple-bar--widgets-background-color-as-foreground .weather {
+  background-color: transparent;
+}
+.weather__gradient {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.65;
+  z-index: -1;
+}
+.weather--sunrise .weather__gradient {
+  background: linear-gradient(to top right, var(--main), var(--red), var(--yellow), var(--blue));
+}
+.weather--sunset .weather__gradient {
+  background: linear-gradient(to bottom right, var(--blue), var(--yellow), var(--red), var(--magenta), var(--main));
+}
+.simple-bar--no-color-in-data .weather__gradient {
+  display: none;
+}
+.sun-icon,
+.moon-icon {
+  transform-origin: 50% 50%;
+  animation: sunny-and-moon-scale-and-rotate 2560ms ease infinite;
+}
+.simple-bar--animations-disabled .sun-icon,
+.simple-bar--animations-disabled .moon-icon {
+  animation: none;
+}
+@keyframes sunny-and-moon-scale-and-rotate {
+  50% {
+    transform: rotate(14deg);
+  }
+}
+.cloud-icon {
+  transform: translateY(-1%) rotate(5deg);
+  animation: cloud-levitating 2560ms ease-in-out infinite;
+}
+.simple-bar--animations-disabled .cloud-icon {
+  animation: none;
+}
+@keyframes cloud-levitating {
+  50% {
+    transform: translateY(10%) rotate(-3deg);
+  }
+}
+.rain-icon > g > path {
+  animation: rain-translate 2560ms ease-in-out infinite;
+}
+.simple-bar--animations-disabled .rain-icon > g > path {
+  animation: none;
+}
+.rain-icon > g > path:nth-child(2) {
+  animation-delay: 320ms;
+}
+.rain-icon > g > path:nth-child(1) {
+  animation-delay: 640ms;
+}
+@keyframes rain-translate {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(10%);
+  }
+}
+.snow-icon > g > path {
+  animation: snow-translate 2560ms ease-in-out infinite;
+}
+.simple-bar--animations-disabled .snow-icon > g > path {
+  animation: none;
+}
+.snow-icon > g > path:nth-child(5) {
+  animation-delay: 320ms;
+}
+.snow-icon > g > path:nth-child(4) {
+  animation-delay: 640ms;
+}
+.snow-icon > g > path:nth-child(3) {
+  animation-delay: 960ms;
+}
+.snow-icon > g > path:nth-child(2) {
+  animation-delay: 1280ms;
+}
+.snow-icon > g > path:nth-child(1) {
+  animation-delay: 1600ms;
+}
+@keyframes phasing-snow {
+  50% {
+    opacity: 0.1;
+  }
+}
+.fog-icon > g > path {
+  animation: fog-phasing 2560ms ease-in-out infinite;
+}
+.simple-bar--animations-disabled .fog-icon > g > path {
+  animation: none;
+}
+.fog-icon > g > path:nth-child(8) {
+  animation-delay: -640ms;
+}
+.fog-icon > g > path:nth-child(7) {
+  animation-delay: -320ms;
+}
+.fog-icon > g > path:nth-child(5) {
+  animation-delay: 320ms;
+}
+.fog-icon > g > path:nth-child(4) {
+  animation-delay: 640ms;
+}
+.fog-icon > g > path:nth-child(3) {
+  animation-delay: 960ms;
+}
+.fog-icon > g > path:nth-child(2) {
+  animation-delay: 1280ms;
+}
+.fog-icon > g > path:nth-child(1) {
+  animation-delay: 1600ms;
+}
+@keyframes fog-phasing {
+  50% {
+    opacity: 0.2;
+  }
+}
+.storm-icon > g > path {
+  animation: flashing-storm 2560ms ease-in-out infinite;
+}
+.simple-bar--animations-disabled .storm-icon > g > path {
+  animation: none;
+}
+.storm-icon > g > path:nth-child(2) {
+  animation-delay: 320ms;
+}
+.storm-icon > g > path:nth-child(1) {
+  animation-delay: 640ms;
+}
+@keyframes flashing-storm {
+  15%,
+  30%,
+  34% {
+    opacity: 1;
+  }
+  16%,
+  31% {
+    opacity: 0;
+  }
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/wifi.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/wifi.js
new file mode 100755
index 0000000..8d2cc97
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/wifi.js
@@ -0,0 +1,13 @@
+// Styles for /lib/components/data/wifi.jsx component
+export const wifiStyles = /* css */ `
+.wifi {
+  background-color: var(--red);
+}
+.simple-bar--widgets-background-color-as-foreground .wifi {
+  color: var(--red);
+  background-color: transparent;
+}
+.wifi--hidden-name > svg {
+  margin-right: 0;
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/youtube-music.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/youtube-music.js
new file mode 100755
index 0000000..703be21
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/youtube-music.js
@@ -0,0 +1,11 @@
+// Styles for /lib/components/data/youtube-music.jsx component
+export const youtubeMusicStyles = /* css */ `
+.youtube-music {
+  position: relative;
+  background-color: var(--red);
+}
+.simple-bar--widgets-background-color-as-foreground .youtube-music {
+  color: var(--red);
+  background-color: transparent;
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/zoom.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/zoom.js
new file mode 100755
index 0000000..55b125c
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/zoom.js
@@ -0,0 +1,26 @@
+// Styles for /lib/components/data/zoom.jsx component
+export const zoomStyles = /* css */ `
+.zoom {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background-color: var(--minor);
+}
+.simple-bar--widgets-background-color-as-foreground .zoom {
+  color: var(--minor);
+  background-color: transparent;
+}
+.simple-bar--no-color-in-data .zoom {
+  background-color: var(--minor);
+}
+.zoom__icon {
+  width: 14px;
+  height: 14px;
+  fill: var(--red);
+  margin: 0 1px 0 4px;
+  transform: translateZ(0);
+}
+.zoom__icon--on {
+  fill: var(--green);
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/missives.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/missives.js
new file mode 100755
index 0000000..18e7b17
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/missives.js
@@ -0,0 +1,89 @@
+// Styles for /lib/components/missives/{missive|missives}.jsx components
+export const missivesStyles = /* css */ `
+.missives {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: hidden;
+}
+.missive {
+  --gradient-size: 100px;
+
+  position: absolute;
+  top: 0;
+  width: fit-content;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 16px;
+  box-sizing: border-box;
+  background-color: var(--background);
+  pointer-events: auto;
+  transition: transform 160ms var(--transition-easing);
+}
+.missive::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: var(--gradient-size);
+  pointer-events: none;
+}
+.missive--left {
+  left: 0;
+  animation: left-missive-appearance 320ms var(--transition-easing);
+}
+@keyframes left-missive-appearance {
+  0% {
+    transform: translateX(-100%);
+  }
+}
+.missive--left::after {
+  left: 100%;
+  background: linear-gradient(to right, var(--background) 0%, transparent 100%);
+}
+.missive--right {
+  right: 0;
+  flex-direction: row-reverse;
+  animation: right-missive-appearance 320ms var(--transition-easing);
+}
+@keyframes right-missive-appearance {
+  0% {
+    transform: translateX(100%);
+  }
+}
+.missive--right::after {
+  right: 100%;
+  background: linear-gradient(to left, var(--background) 0%, transparent 100%);
+}
+.missive__text {
+  max-width: calc(100vw - var(--gradient-size));
+  overflow: hidden;
+}
+.missive__close {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  fill: var(--foreground);
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  user-select: none;
+  border-radius: var(--item-radius);
+  transition: box-shadow 160ms var(--transition-easing);
+}
+.missive__close:hover {
+  box-shadow: var(--light-shadow), var(--hover-ring);
+}
+.missive__close-icon {
+  flex: 0 0 10px;
+  width: 10px;
+  height: 10px;
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/process.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/process.js
new file mode 100755
index 0000000..f674ac2
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/process.js
@@ -0,0 +1,161 @@
+// Styles for /lib/components/{yabai|aerospace}/process.jsx components
+export const styles = /* css */ `
+.process {
+  display: flex;
+  pointer-events: none;
+  touch-action: none;
+}
+.process--centered {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%; 
+}
+.process:empty {
+  display: none;
+}
+.process__container {
+  display: flex;
+  align-items: stretch;
+  box-sizing: border-box;
+  pointer-events: auto;
+  touch-action: auto;
+}
+.process--centered .process__container {
+  height: var(--bar-height);
+  margin: 0 auto;
+  padding: var(--bar-inner-margin);
+}
+.simple-bar--no-bar-background .process__container:not(:empty) {
+  padding: 4px 5px;
+  background-color: var(--background);
+  box-shadow: var(--light-shadow);
+  border-radius: var(--bar-radius);
+}
+.process__layout {
+  display: flex;
+  align-items: center;
+  padding: var(--item-inner-margin);
+  color: var(--white);
+  font-family: var(--font);
+  font-size: var(--font-size);
+  background-color: var(--main-alt);
+  border-radius: var(--item-radius);
+  box-shadow: var(--light-shadow);
+}
+.simple-bar--spaces-background-color-as-foreground .process__layout {
+  color: var(--foreground);
+  font-weight: 700;
+  background-color: transparent;
+  box-shadow: none;
+}
+.process__skhd-mode {
+  display: flex;
+  align-items: center;
+  padding: var(--item-inner-margin);
+  color: var(--foreground);
+  background-color: var(--minor);
+  font-family: var(--font);
+  font-size: var(--font-size);
+  border-radius: var(--item-radius);
+  box-shadow: var(--light-shadow);
+  font-style: italic;
+  text-transform: uppercase;
+}
+.process__window {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  margin: var(--item-outer-margin);
+  padding: var(--item-inner-margin);
+  color: currentColor;
+  font-family: var(--font);
+  font-size: var(--font-size);
+  background-color: var(--minor);
+  border-radius: var(--item-radius);
+  border: 0;
+  outline: none;
+  box-shadow: var(--light-shadow);
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: color 160ms var(--transition-easing), background-color 160ms var(--transition-easing), 
+    border 160ms var(--transition-easing), box-shadow 160ms var(--transition-easing);
+  z-index: 0;
+}
+.simple-bar--spaces-background-color-as-foreground .process__window {
+  background-color: transparent;
+  box-shadow: none;
+}
+.simple-bar--no-shadow .process__container,
+.simple-bar--no-bar-background.simple-bar--no-shadow .process__container,
+.simple-bar--no-shadow .process__layout,
+.simple-bar--no-shadow .process__skhd-mode,
+.simple-bar--no-shadow .process__window {
+  box-shadow: none;
+}
+.process__window:only-child {
+  margin: 0;
+}
+.process__window--only-current {
+  background-color: var(--minor);
+}
+.process__window--focused {
+  color: var(--minor);
+  background-color: var(--foreground);
+}
+.process__stack-index {
+  padding: 2px 5px;
+  color: var(--foreground);
+  background-color: var(--background);
+  font-size: calc(var(--font-size) - 1px);
+  border-radius: var(--item-radius);
+}
+.process__window--focused .process__stack-index {
+  color: var(--white);
+  background-color: var(--main-alt);
+}
+.simple-bar--spaces-background-color-as-foreground .process__window--focused {
+  color: var(--foreground);
+  background-color: transparent;
+  box-shadow: var(--light-shadow), 0 0 0 1px var(--foreground);
+}
+.process__window:not(.process__window--only-current):not(.process__window--focused):is(:hover, :active) {
+  box-shadow: var(--light-shadow), var(--hover-ring);
+}
+.process__icon {
+  flex: 0 0 11px;
+  width: 11px;
+  height: 11px;
+  fill: currentColor;
+  transition: margin-right 160ms var(--transition-easing);
+}
+.process__window--only-current .process__icon,
+.process__window--focused .process__icon,
+.process__window--expanded .process__icon {
+  margin-right: 6px;
+}
+.process__window--only-icon .process__icon {
+  margin-right: 0;
+}
+.process__inner {
+  max-width: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  transition: max-width 160ms var(--transition-easing);
+}
+.process__window--focused .process__inner,
+.process__window--expanded .process__inner {
+  max-width: var(--item-max-width);
+}
+.process__window--only-current .process__inner {
+  max-width: 400px;
+}
+.process__name {
+  margin-top: 2px;
+  white-space: nowrap;
+  transition: transform 160ms var(--transition-easing);
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/aerospace-display-manager.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/aerospace-display-manager.js
new file mode 100755
index 0000000..fb0dba6
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/aerospace-display-manager.js
@@ -0,0 +1,101 @@
+export const aerospaceDisplayManagerStyles = /* css */ `
+.aerospace-display-manager {
+  flex: 1 1 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px;
+}
+.aerospace-display-manager::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--main-alt);
+  border-radius: var(--item-radius);
+  opacity: 0.1;
+  z-index: -1;
+}
+.aerospace-display-manager__label > em {
+  padding: 2px 3px;
+  font-size: calc(var(--font-size) - 2px);
+  color: var(--foreground);
+  background-color: var(--minor);
+  border-radius: 2px;
+}
+.aerospace-display-manager__displays {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.aerospace-display-manager__display {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.aerospace-display-manager__display > input {
+  width: 8ch;
+  padding: 2px 4px;
+  box-sizing: border-box;
+  font-family: var(--font);
+  font-size: calc(var(--font-size) * 0.9);
+  background-color: var(--white);
+  border: 0;
+  outline: none;
+  border-radius: 4px;
+  transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
+}
+.aerospace-display-manager__display > input:hover {
+  box-shadow: var(--hover-ring);
+}
+.aerospace-display-manager__display > input:focus {
+  box-shadow: var(--focus-ring);
+}
+.aerospace-display-manager__remove-display {
+  padding: 3px 6px;
+  box-sizing: border-box;
+  background-color: var(--red);
+  border-radius: var(--item-radius);
+  border: 0;
+  box-shadow: var(--light-shadow);
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
+}
+.aerospace-display-manager__remove-display:hover {
+  box-shadow: var(--light-shadow), var(--focus-ring);
+}
+.aerospace-display-manager__remove-display > svg {
+  width: 8px;
+  height: 8px;
+  fill: var(--white);
+}
+.aerospace-display-manager__add {
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  padding: 7px 10px;
+  font-family: var(--font);
+  font-size: calc(var(--font-size) * 0.9);
+  background-color: var(--green);
+  border-radius: var(--item-radius);
+  border: 0;
+  box-shadow: var(--light-shadow);
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
+}
+.aerospace-display-manager__add:hover {
+  box-shadow: var(--light-shadow), var(--focus-ring);
+}
+.aerospace-display-manager__add > svg {
+  width: 10px;
+  height: 10px;
+  margin-right: 1ch;
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/color-picker.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/color-picker.js
new file mode 100755
index 0000000..4064efd
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/color-picker.js
@@ -0,0 +1,83 @@
+export const colorPickerStyles = /* css */ `
+.color-picker {
+  margin-right: 1ch;
+}
+.color-picker__button {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 0;
+  cursor: pointer;
+}
+.color-picker__colors {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: 35px;
+  box-sizing: border-box;
+  -webkit-backdrop-filter: blur(5px);
+  border-radius: var(--item-radius);
+  z-index: 1;
+}
+.color-picker__colors > button,
+.color-picker__custom-color-preview {
+  width: 20px;
+  height: 20px;
+  margin: 0 10px;
+  border-radius: 50%;
+  border: 0;
+  cursor: pointer;
+  box-shadow: var(--light-shadow);
+}
+.color-picker__custom-color {
+  position: absolute;
+  bottom: 10px;
+  left: 0;
+  width: 100%;
+  height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  pointer-events: none;
+  touch-action: none;
+}
+.color-picker__custom-color > * {
+  pointer-events: auto;
+  touch-action: auto;
+}
+.color-picker__custom-color-preview {
+  cursor: default;
+}
+input.color-picker__custom-color-input {
+  width: 48ch;
+}
+.color-picker__custom-color-submit {
+  margin-left: 8px;
+  padding: 7px 10px;
+  font-family: var(--font);
+  font-size: calc(var(--font-size) * 0.9);
+  background-color: var(--green);
+  border-radius: var(--item-radius);
+  border: 0;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
+}
+.color-picker__custom-color-submit:not(:disabled) {
+  box-shadow: var(--light-shadow);
+}
+.color-picker__custom-color-submit:not(:disabled):hover {
+  box-shadow: var(--light-shadow), var(--focus-ring);
+}
+.color-picker__custom-color-submit:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/icon-picker.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/icon-picker.js
new file mode 100755
index 0000000..0c853d5
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/icon-picker.js
@@ -0,0 +1,155 @@
+export const iconPickerStyles = /* css */ `
+.icon-picker {
+  margin-right: 1ch;
+}
+.icon-picker__button {
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  fill: var(--foreground);
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  user-select: none;
+}
+.icon-picker__button > svg {
+  width: 24px;
+  height: 24px;
+}
+.icon-picker__dropdown {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  -webkit-backdrop-filter: blur(5px);
+  border-radius: var(--item-radius);
+  overflow: hidden;
+  z-index: 1;
+}
+.icon-picker__search {
+  position: relative;
+  padding: 8px;
+  background-color: var(--main-alt);
+  border-bottom: 1px solid var(--foreground-alt);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.icon-picker__back {
+  display: flex;
+  align-items: center;
+  padding: 10px 14px;
+  height: 28px;
+  background-color: var(--background);
+  border: 1px solid var(--foreground-alt);
+  border-radius: var(--item-radius);
+  color: var(--foreground);
+  font-family: var(--font);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  box-sizing: border-box;
+  transition: color 160ms var(--transition-easing),
+    background-color 160ms var(--transition-easing),
+    box-shadow 160ms var(--transition-easing);
+}
+.icon-picker__back:hover {
+  color: var(--background);
+  background-color: var(--foreground);
+  box-shadow: var(--hover-ring);
+}
+.icon-picker__back > svg {
+  width: 10px;
+  height: 10px;
+  margin-right: 6px;
+  fill: currentColor;
+}
+.icon-picker__search-input {
+  flex: 1;
+  height: 28px;
+  padding: 0 35px 0 14px;
+  border: 1px solid var(--foreground-alt);
+  border-radius: var(--item-radius);
+  background-color: var(--background);
+  color: var(--foreground);
+  font-size: 14px;
+  font-family: var(--font);
+  outline: none;
+  box-sizing: border-box;
+  position: relative;
+  transition: border 160ms var(--transition-easing),
+    box-shadow 160ms var(--transition-easing);
+}
+.icon-picker__search-input:focus {
+  border-color: var(--foreground);
+  box-shadow: var(--focus-ring);
+}
+.icon-picker__search-input::placeholder {
+  color: var(--foreground-alt);
+  opacity: 0.7;
+}
+.icon-picker__search-clear {
+  position: absolute;
+  right: 24px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: var(--foreground-alt);
+  cursor: pointer;
+  font-size: 16px;
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: color 160ms var(--transition-easing),
+    background-color 160ms var(--transition-easing);
+}
+.icon-picker__search-clear:hover {
+  color: var(--foreground);
+  background-color: var(--main-alt);
+}
+.icon-picker__icons {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  padding: 10px;
+  box-sizing: border-box;
+  overflow: auto;
+}
+.icon-picker__icons > button {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 5px;
+  border: 0;
+  background-color: var(--main-alt);
+  border-radius: var(--item-radius);
+  box-shadow: var(--light-shadow);
+  cursor: pointer;
+  user-select: none;
+}
+.icon-picker__icons > button > svg {
+  width: 24px;
+  height: 24px;
+  fill: var(--background);
+}
+.icon-picker__no-results {
+  width: 100%;
+  text-align: center;
+  color: var(--foreground-alt);
+  font-style: italic;
+  padding: 20px;
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/settings.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/settings.js
new file mode 100755
index 0000000..2fa37b0
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/settings.js
@@ -0,0 +1,408 @@
+// Styles for /lib/components/settings/settings.jsx component
+import { userWidgetsCreatorStyles } from "./user-widgets-creator";
+import { aerospaceDisplayManagerStyles } from "./aerospace-display-manager";
+
+export const settingsStyles = /* css */ `
+.settings {
+  z-index: 1;
+}
+.settings__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+.simple-bar--floating .settings__overlay,
+.simple-bar--no-bar-background .settings__overlay {
+  display: none;
+}
+.simple-bar--on-bottom  .settings__overlay {
+  top: unset;
+  bottom: 28px;
+}
+.settings__outer {
+  --settings-width: 620px;
+  position: fixed;
+  left: calc(50% - (var(--settings-width) / 2));
+  top: calc(var(--bar-height) + 10px);
+  width: var(--settings-width);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 20px;
+  background-color: var(--main);
+  border-radius: var(--item-radius);
+  box-shadow: var(--light-shadow);
+  z-index: 1;
+}
+.simple-bar--floating .settings__outer {
+  top: calc(var(--bar-height) + 20px);
+}
+.simple-bar--on-bottom  .settings__outer {
+  top: unset;
+  bottom: calc(var(--bar-height) + 10px);
+}
+.settings__header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 14px;
+  font-size: calc(var(--font-size) * 1.4);
+  font-weight: 700;
+}
+.settings__header-dot {
+  flex: 0 0 12px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 9px;
+}
+.settings__header-dot--close {
+  padding: 0;
+  background-color: var(--red);
+  cursor: pointer;
+  user-select: none;
+  border: 0;
+  -webkit-user-select: none;
+}
+.settings__header-dot--disabled {
+  background-color: grey;
+  opacity: 0.3;
+}
+.settings__tabs {
+  width: fit-content;
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+  padding: 5px;
+  background-color: var(--minor);
+  border-radius: var(--item-radius);
+}
+.settings__tab {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  padding: 5px;
+  font-family: var(--font);
+  font-size: var(--font-size);
+  color: var(--foreground);
+  text-align: center;
+  background-color: transparent;
+  border-radius: var(--item-radius);
+  border: 0;
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: color 160ms var(--transition-easing), background-color 160ms var(--transition-easing),
+    box-shadow 160ms var(--transition-easing);
+}
+.settings__tab:hover {
+  box-shadow: var(--hover-ring);
+}
+.settings__tab:active {
+  box-shadow: var(--focus-ring);
+}
+.settings__tab--current {
+  color: var(--background);
+  background-color: var(--foreground);
+}
+.settings__inner {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+  overflow: clip;
+}
+.settings__category {
+  flex: 0 0 100%;
+  max-height: 70vh;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 0 10px 25px 0;
+  box-sizing: border-box;
+  overflow: auto;
+  transition: transform 160ms var(--transition-easing);
+}
+.settings__category::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+.settings__category::-webkit-scrollbar-track {
+  background-color: var(--main-alt);
+  opacity: 0.1;
+  border-radius: var(--item-radius);
+}
+.settings__category::-webkit-scrollbar-thumb {
+  background: var(--foreground);
+  border-radius: var(--item-radius);
+}
+.settings__inner-title {
+  flex: 0 0 100%;
+  font-size: calc(var(--font-size) * 1.2);
+  font-weight: 700;
+}
+.settings__item-title {
+  flex: 0 0 100%;
+  margin: 8px 0;
+  font-weight: 700;
+}
+.settings__item,
+.settings__item-option {
+  position: relative;
+  flex: 1 0 32%;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.settings__item--full-width {
+  flex: 1 1 100%;
+}
+.settings__item--color {
+  flex: 0 0 32%;
+  flex-direction: column;
+  align-items: stretch;
+}
+.settings__item--radio {
+  flex: 0 0 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+.settings__item--textarea {
+  flex-direction: column;
+  align-items: stretch;
+  padding: 5px;
+}
+.settings__item--color > label,
+.settings__item--full-width.settings__item--text > label,
+.settings__item--full-width.settings__item--textarea > label {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+.settings__item--text > input,
+.settings__item--textarea > textarea {
+  flex: 1 1 auto;
+  width: auto;
+  padding: 2px 4px;
+  box-sizing: border-box;
+  font-family: var(--font);
+  font-size: calc(var(--font-size) * 0.9);
+  background-color: var(--white);
+  border: 0;
+  outline: none;
+  border-radius: 4px;
+  transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
+}
+.settings__item--textarea > textarea {
+  resize: vertical;
+}
+.settings__item--color > input,
+.settings__item--full-width.settings__item--text > input,
+.settings__item--full-width.settings__item--textarea > textarea {
+  flex: 1 1 100%;
+}
+.settings__item--text > input:hover,
+.settings__item--textarea > textarea:hover {
+  box-shadow: var(--hover-ring);
+}
+.settings__item--text > input:focus,
+.settings__item--textarea > textarea:focus {
+  box-shadow: var(--focus-ring);
+}
+.settings__item--color > input {
+  padding-left: 24px;
+}
+.settings__item-color-pill {
+  position: absolute;
+  bottom: 1px;
+  left: 2px;
+  height: 14px;
+  width: 14px;
+  border-radius: 2px;
+  border: 1px solid gray;
+}
+.settings__item > label > em {
+  padding: 2px 3px;
+  font-size: calc(var(--font-size) - 2px);
+  color: var(--foreground);
+  background-color: var(--minor);
+  border-radius: 2px;
+}
+.settings__documentation {
+  width: 100%;
+  margin-top: 5px;
+  padding: 10px;
+  color: var(--white);
+  background-color: var(--main-alt);
+  font-weight: 700;
+  border-radius: 5px;
+}
+.settings__documentation-icon {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+  margin-top: -2px;
+  vertical-align: middle;
+  fill: currentColor;
+}
+.settings__documentation a {
+  color: currentColor;
+}
+.settings__infos {
+  width: 100%;
+  margin-top: 5px;
+  padding: 10px;
+  color: var(--foreground);
+  background-color: var(--minor);
+  border-radius: 5px;
+}
+.settings__infos-title {
+  margin-bottom: 7px;
+  font-size: calc(var(--font-size) * 1.1);
+  font-weight: 700;
+}
+.settings__info {
+  font-style: italic;
+}
+.settings__bottom {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+.settings__pending-changes {
+  margin: 0 10px;
+}
+.settings__refresh-button,
+.settings__import-button,
+.settings__export-button {
+  padding: 7px 10px;
+  font-family: var(--font);
+  font-size: calc(var(--font-size) * 0.9);
+  border-radius: var(--item-radius);
+  border: 0;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
+}
+.settings__import-button,
+.settings__export-button {
+  margin-right: 10px;
+  color: var(--foreground);
+  background-color: var(--minor);
+}
+.settings__export-button {
+  margin-left: 10px;
+}
+.settings__refresh-button {
+  background-color: var(--green);
+}
+.settings__refresh-button:not(:disabled),
+.settings__import-button:not(:disabled),
+.settings__export-button:not(:disabled) {
+  box-shadow: var(--light-shadow);
+}
+.settings__refresh-button:not(:disabled):hover,
+.settings__import-button:not(:disabled):hover,
+.settings__export-button:not(:disabled):hover {
+  box-shadow: var(--light-shadow), var(--focus-ring);
+}
+.settings__refresh-button:disabled,
+.settings__import-button:disabled,
+.settings__export-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.settings__import-export-label {
+  margin-right: auto;
+}
+.settings__widgets {
+  width: 100%;
+}
+.settings__widgets-breadcrumb {
+  height: 28px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 0 5px;
+  margin-bottom: 5px;
+}
+.settings__widgets-breadcrumb-title {
+  font-size: calc(var(--font-size) * 1.2);
+  font-weight: 700;
+}
+button.settings__widgets-breadcrumb-title {
+  padding: 0;
+  color: inherit;
+  font-family: inherit;
+  background-color: transparent;
+  text-decoration: underline;
+  cursor: pointer;
+  border: 0;
+}
+.settings__widgets-breadcrumb-current {
+  margin-bottom: -2px;
+}
+.settings__widgets-breadcrumb-back {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  padding: 2px 10px;
+  background-color: var(--minor);
+  border: 1px solid var(--foreground-alt);
+  border-radius: var(--item-radius);
+  color: var(--foreground);
+  font-family: var(--font);
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  box-sizing: border-box;
+  transition: color 160ms var(--transition-easing),
+    background-color 160ms var(--transition-easing),
+    box-shadow 160ms var(--transition-easing);
+}
+.settings__widgets-breadcrumb-back:hover {
+  box-shadow: var(--hover-ring);
+}
+.settings__widgets-breadcrumb-back-icon {
+  flex: 0 0 8px;
+  width: 8px;
+  height: 8px;
+  margin-right: 6px;
+  fill: currentColor;
+}
+.settings__widgets-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.settings__widgets-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  background-color: var(--minor);
+  border-radius: var(--item-radius);
+}
+.settings__widgets-item:not(.settings__widgets-item--process) {
+  cursor: pointer;
+}
+.settings__widgets-item-icon {
+  flex: 0 0 10px;
+  width: 10px;
+  height: 10px;
+  margin-left: auto;
+  fill: currentcolor;
+}
+.settings__widget-settings {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+${userWidgetsCreatorStyles}
+${aerospaceDisplayManagerStyles}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/user-widgets-creator.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/user-widgets-creator.js
new file mode 100755
index 0000000..417826a
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/settings/user-widgets-creator.js
@@ -0,0 +1,170 @@
+import { colorPickerStyles } from "./color-picker";
+import { iconPickerStyles } from "./icon-picker";
+
+export const userWidgetsCreatorStyles = /* css */ `
+  .user-widgets-creator {
+    position: relative;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 25px;
+    border-radius: var(--item-radius);
+  }
+  .user-widgets-creator__add {
+    position: sticky;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    margin: 0 auto;
+    padding: 7px 10px;
+    font-family: var(--font);
+    font-size: calc(var(--font-size) * 0.9);
+    background-color: var(--green);
+    border-radius: var(--item-radius);
+    border: 0;
+    box-shadow: var(--light-shadow);
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
+  }
+  .user-widgets-creator__add:hover {
+    box-shadow: var(--light-shadow), var(--focus-ring);
+  }
+  .user-widgets-creator__add > svg {
+    width: 10px;
+    height: 10px;
+    margin-right: 1ch;
+  }
+  .user-widget-creator {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    padding: 5px;
+    z-index: 0;
+  }
+  .user-widget-creator::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--main-alt);
+    border-radius: var(--item-radius);
+    opacity: 0.1;
+    z-index: -1;
+  }
+  .user-widget-creator__sort-buttons {
+    position: absolute;
+    top: 0;
+    left: 17px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    pointer-events: none;
+    touch-action: none;
+  }
+  .user-widget-creator__sort-button {
+    width: 26px;
+    height: 26px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    background-color: transparent;
+    border: 0;
+    cursor: pointer;
+    pointer-events: auto;
+    touch-action: auto;
+  }
+  .user-widget-creator__sort-button--before {
+    margin-bottom: 5px;
+  }
+  .user-widget-creator__sort-button--after {
+    margin-top: auto;
+  }
+  .user-widget-creator__sort-button > svg {
+    width: 22px;
+    height: 22px;
+    fill: var(--foreground);
+  }
+  .user-widget-creator__remove {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    padding: 5px;
+    background-color: var(--red);
+    border-radius: var(--item-radius);
+    border: 0;
+    box-shadow: var(--light-shadow);
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
+  }
+  .user-widget-creator__remove:hover {
+    box-shadow: var(--light-shadow), var(--focus-ring);
+  }
+  .user-widget-creator__remove > svg {
+    width: 10px;
+    height: 10px;
+    fill: var(--white);
+  }
+  .user-widget-creator__index {
+    position: absolute;
+    top: calc(50% - 40px);
+    left: 20px;
+  }
+  .user-widget-creator__right {
+    flex: 1 1 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .user-widget-creator__right-top {
+    display: flex;
+    align-items: center;
+  }
+  .user-widget-creator__right-top > label {
+    margin: 0 1ch 0 2ch;
+  }
+  .user-widget-creator__input-group {
+    display: flex;
+    align-items: center;
+    margin: 2px 0;
+  }
+  .user-widget-creator input[type="text"] {
+    width: auto;
+    margin: 3px 0;
+    padding: 2px 4px;
+    box-sizing: border-box;
+    font-family: var(--font);
+    font-size: calc(var(--font-size) * 0.9);
+    border: 0;
+    outline: none;
+    border-radius: 4px;
+    transition: box-shadow 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
+  }
+  .user-widget-creator input[type="text"]:hover {
+    box-shadow: var(--hover-ring);
+  }
+  .user-widget-creator input[type="text"]:focus {
+    box-shadow: var(--focus-ring);
+  }
+  .user-widget-creator__input-group label {
+    white-space: nowrap;
+  }
+  .user-widget-creator__input-group input[type="text"] {
+    flex: 1 1 100%;
+    margin-left: 1ch;
+  }
+  .user-widget-creator__input-group input[type="checkbox"]:not(:first-child) {
+    margin-left: 16px;
+  }
+  .user-widget-creator__input-group input[type="checkbox"] {
+    margin-right: 6px;
+  }
+  ${colorPickerStyles}
+  ${iconPickerStyles}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/side-icon.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/side-icon.js
new file mode 100755
index 0000000..9d4535d
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/side-icon.js
@@ -0,0 +1,15 @@
+// Styles for /lib/components/side-icon.jsx component
+export const sideIconStyles = /* css */ `
+.side-icon {
+  display: flex;
+  align-items: center;
+  margin: 0 5px;
+  color: #fff;
+}
+
+.side-icon__svg {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space-options.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space-options.js
new file mode 100755
index 0000000..1f43895
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space-options.js
@@ -0,0 +1,137 @@
+export const spaceOptionsStyles = /* css */ `
+.space-options {
+  position: absolute;
+  top: calc(100% + 3px);
+  left: calc(50% - 22px);
+  height: 90%;
+  width: 50px;
+  height: 18px;
+  display: flex;
+  align-items: stretch;
+  background-color: var(--white);
+  opacity: 0;
+  pointer-events: none;
+  touch-action: none;
+  border-radius: 3px;
+  box-shadow: var(--light-shadow);
+  transform-origin: top center;
+  transform: translateZ(0) scale(0);
+  transition: opacity 160ms var(--transition-easing), transform 160ms var(--transition-easing);
+  z-index: 1;
+}
+.simple-bar--on-bottom  .space-options {
+  top: unset;
+  bottom: calc(100% + 3px);
+  transform-origin: bottom center;
+}
+.simple-bar--inline-spaces-options .space-options {
+  height: 100%;
+  top: 0;
+  left: 100%;
+  border-radius: 3px;
+  transform-origin: center;
+}
+.space--hovered .space-options {
+  opacity: 1;
+  transform: translateZ(0);
+  pointer-events: auto;
+  touch-action: auto;
+  transition: opacity 160ms 1s var(--transition-easing), transform 160ms 1s var(--transition-easing);
+}
+.space--hovered.space--no-delay .space-options {
+  transition: opacity 160ms var(--transition-easing), transform 160ms var(--transition-easing);
+}
+.space-options::before {
+  content: "";
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  z-index: 2;
+}
+.space-options::after {
+  content: '';
+  position: absolute;
+  top: -3px;
+  left: calc(50% - 4px);
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 3px solid var(--white);
+}
+.simple-bar--on-bottom  .space-options::after {
+  top: unset;
+  bottom: -3px;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 3px solid var(--white);
+  border-bottom: none;
+}
+.simple-bar--inline-spaces-options .space-options::after {
+  top: calc(50% - 4px);
+  left: -3px;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-right: 3px solid var(--white);
+  border-left: none;
+}
+.space-options__option {
+  position: relative;
+  flex: 1 1 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  transform: translateZ(0);
+  transition: background-color 160ms var(--transition-easing), opacity 160ms var(--transition-easing);
+}
+.space-options__option:last-child {
+  opacity: 0.8;
+  background-color: var(--red);
+}
+.space--fullscreen .space-options__option:last-child,
+.space:first-of-type:only-of-type .space-options__option:last-child,
+.space:first-of-type:nth-last-of-type(2) .space-options__option:last-child {
+  pointer-events: none;
+  touch-action: none;
+  opacity: 0.5;
+  filter: grayscale(100%);
+}
+.space:first-of-type .space-options__option--move-prev,
+.space:nth-last-of-type(1) .space-options__option--move-next,
+.space:first-of-type:only-of-type .space-options__option--move-prev,
+.space:first-of-type:only-of-type .space-options__option--move-next,
+.space:first-of-type:nth-last-of-type(1) .space-options__option--move-prev,
+.space:first-of-type:nth-last-of-type(1) .space-options__option--move-next {
+  opacity: 0.2;
+  pointer-events: none;
+  touch-action: none;
+}
+.space .space-options__option:first-of-type {
+  border-radius: 3px 0 0 3px;
+}
+.space-options__option:last-of-type {
+  border-radius: 0 3px 3px 0;
+}
+.space-options__option:not(:last-child):hover {
+  background-color: var(--transparent-dark);
+}
+.space-options__option:last-child:hover {
+  opacity: 1;
+}
+.space-options__option > svg {
+  width: 8px;
+  height: 8px;
+  fill: var(--black);
+  curor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.space-options__option:last-child > svg {
+  fill: var(--white);
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space.js
new file mode 100755
index 0000000..0e6d1cb
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/space.js
@@ -0,0 +1,152 @@
+export const spaceStyles = /* css */ `
+.space, .stickies {
+  position: relative;
+  display: flex;
+  align-items: center;
+  animation: space-appearance 320ms var(--transition-easing);
+}
+
+@keyframes space-appearance {
+  0% {
+    opacity: 0;
+  }
+}
+.space__inner,
+.spaces__add,
+.stickies__inner {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  margin: var(--item-outer-margin);
+  padding: var(--item-inner-margin);
+  color: currentColor;
+  font-family: var(--font);
+  background-color: var(--minor);
+  border-radius: var(--item-radius);
+  border: 0;
+  outline: none;
+  box-shadow: var(--light-shadow);
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: color 160ms var(--transition-easing), background-color 160ms var(--transition-easing),
+    border 160ms var(--transition-easing), box-shadow 160ms var(--transition-easing);
+  z-index: 0;
+}
+.space__inner:disabled {
+  cursor: default;
+}
+.stickies__inner {
+  padding-block: 0;
+  background-color: var(--background);
+  box-shadow: none;
+  cursor: default;
+}
+.simple-bar--spaces-background-color-as-foreground .space__inner,
+.simple-bar--spaces-background-color-as-foreground .spaces__add,
+.simple-bar--spaces-background-color-as-foreground .stickies__inner {
+  background-color: transparent;
+  box-shadow: none;
+}
+.simple-bar--no-shadow .space__inner,
+.simple-bar--no-shadow .spaces__add,
+.simple-bar--no-shadow .stickies__inner {
+  box-shadow: none;
+}
+.space:first-of-type .space__inner {
+  margin-left: 0;
+}
+.space:hover .space__inner {
+  z-index: 1;
+}
+.spaces__add {
+  height: auto;
+  background-color: transparent;
+  box-shadow: none;
+}
+.spaces__add:hover {
+  background-color: var(--minor);
+}
+.space--fullscreen .space__inner {
+  color: var(--minor);
+  background-color: var(--yellow);
+}
+.simple-bar--spaces-background-color-as-foreground .space--fullscreen .space__inner {
+  color: var(--yellow);
+  background-color: transparent;
+}
+.space--focused .space__inner {
+  color: var(--minor);
+  background-color: var(--foreground);
+}
+.simple-bar--spaces-background-color-as-foreground .space--focused .space__inner {
+  color: var(--foreground);
+  background-color: transparent;
+}
+.space--visible .space__inner {
+  box-shadow: var(--light-shadow), var(--foreground-shadow);
+}
+.simple-bar--no-shadow .space--visible .space__inner {
+  box-shadow: none;
+}
+.space:not(.space--focused) .space__inner:not(:disabled):hover,
+.spaces__add:hover {
+  box-shadow: var(--light-shadow), var(--hover-ring);
+}
+.space:not(.space--focused) .space__inner:not(:disabled):active,
+.spaces__add:active {
+  box-shadow: var(--light-shadow), var(--focus-ring);
+}
+.simple-bar--no-shadow .space:not(.space--focused) .space__inner:not(:disabled):hover,
+.simple-bar--no-shadow .spaces__add:hover {
+  box-shadow: var(--hover-ring);
+}
+.simple-bar--no-shadow .space:not(.space--focused) .space__inner:not(:disabled):active,
+.simple-bar--no-shadow .spaces__add:active {
+box-shadow: var(--focus-ring);
+}
+.space__label {
+  display: block;
+  margin: 0;
+  color: currentColor;
+  font-family: inherit;
+  font-size: var(--font-size);
+  line-height: 1;
+  text-align: center;
+  background-color: transparent;
+  border: 0;
+  border-radius: 2px;
+  outline: none;
+}
+.space__label:not(:read-only):focus {
+  box-shadow: var(--focus-ring);
+}
+.simple-bar--spaces-background-color-as-foreground .space--focused .space__label {
+  font-weight: 700;
+}
+.space__icon {
+  flex: 0 0 11px;
+  width: 11px;
+  height: 11px;
+  margin-left: 6px;
+  fill: currentColor;
+  opacity: 0.5;
+  transform: translateZ(0);
+}
+.stickies__inner .space__icon:first-child {
+  margin: 0;
+}
+.space__icon--focused {
+  opacity: 1;
+}
+.space__icon--fullscreen {
+  fill: var(--yellow);
+}
+.space__icon--topmost {
+  fill: var(--orange);
+}
+.space--focused .space__icon--fullscreen {
+  stroke: rgba(0, 0, 0, 0.3);
+  stroke-width: 2px;
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/spaces.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/spaces.js
new file mode 100755
index 0000000..8657b9c
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/spaces/spaces.js
@@ -0,0 +1,50 @@
+// Styles for /lib/components/{yabai|aerospace}/*.jsx components
+import { spaceStyles } from "./space";
+import { spaceOptionsStyles } from "./space-options";
+
+export const styles = /* css */ `
+.spaces {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: stretch;
+}
+.simple-bar--no-bar-background .spaces {
+  padding: 4px 5px;
+  background-color: var(--background);
+  box-shadow: var(--light-shadow);
+  border-radius: var(--bar-radius);
+}
+.simple-bar--no-bar-background.simple-bar--no-shadow .spaces {
+  box-shadow: none;
+}
+.simple-bar--process-aligned-to-left .spaces {
+  margin-right: 4px;
+}
+.spaces__separator {
+  align-self: center;
+  flex: 0 0 5px;
+  width: 5px;
+  height: 5px;
+  margin: var(--item-outer-margin);
+  background-color: var(--foreground);
+  border-radius: 50%;
+  opacity: 0.35;
+}
+${spaceStyles}
+${spaceOptionsStyles}
+.spaces__add > svg {
+  width: 10px;
+  height: 10px;
+  fill: currentColor;
+}
+.spaces__end-separator {
+  align-self: center;
+  flex: 0 0 4px;
+  width: 4px;
+  height: 4px;
+  margin: var(--item-outer-margin);
+  background-color: var(--main-alt);
+  border-radius: 50%;
+  opacity: 0.35;
+}
+`;
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/core/base.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/core/base.js
new file mode 100755
index 0000000..041c848
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/core/base.js
@@ -0,0 +1,120 @@
+// simple-bar' global styles
+const baseStyles = /* css */ `
+.simple-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 0;
+  height: var(--bar-height);
+  display: flex;
+  align-items: stretch;
+  padding: var(--bar-inner-margin);
+  box-sizing: border-box;
+  color: var(--foreground);
+  font-size: var(--font-size);
+  font-family: var(--font);
+  background-color: var(--background);
+  border: var(--bar-border);
+  box-shadow: var(--light-shadow);
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2),
+  only screen and (min-device-pixel-ratio: 2),
+  only screen and (min-resolution: 192dpi),
+  only screen and (min-resolution: 2dppx) {
+  .simple-bar {
+    -webkit-font-smoothing: antialiased;
+  }
+}
+.simple-bar--floating {
+  top: var(--bar-outer-margin, 5px);
+  left: var(--bar-outer-margin, 5px);
+  width: calc(100% - (var(--bar-outer-margin, 5px) * 2));
+  border-radius: var(--bar-radius);
+}
+.simple-bar--no-bar-background {
+  padding: 0;
+}
+.simple-bar--on-bottom {
+  top: unset;
+  bottom: 0;
+}
+.simple-bar--floating.simple-bar--on-bottom {
+  bottom: var(--bar-outer-margin, 5px);
+}
+.simple-bar--no-bar-background,
+.simple-bar--no-shadow {
+  box-shadow: none;
+}
+.simple-bar--focused,
+.simple-bar--no-shadow.simple-bar--focused {
+  box-shadow: inset 0 0 0 1px var(--red);
+}
+.simple-bar--no-bar-background {
+  background-color: transparent;
+}
+.simple-bar--empty {
+  height: var(--bar-height);
+  display: flex;
+  align-items: center;
+}
+.simple-bar--empty {
+  z-index: 2;
+}
+.simple-bar--empty > span {
+  position: relative;
+  display: flex;
+  align-items: center;
+  color: var(--foreground);
+}
+.simple-bar--empty > span::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  margin-right: 7px;
+  background-color: var(--red);
+  border-radius: 50%;
+}
+.simple-bar--empty.simple-bar--loading > span::before {
+  background-color: var(--green);
+}
+.simple-bar__data {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  margin-left: auto;
+}
+.simple-bar__data:empty {
+  display: none;
+}
+.simple-bar--no-color-in-data .simple-bar__data {
+  color: var(--white);
+}
+.simple-bar--no-bar-background .simple-bar__data {
+  padding: 4px 5px 4px 0;
+  background-color: var(--background);
+  box-shadow: var(--light-shadow);
+  border-radius: var(--bar-radius);
+}
+.simple-bar--no-bar-background.simple-bar--no-shadow .simple-bar__data {
+  box-shadow: none;
+}
+.simple-bar-icon-loader {
+  flex: 0 0 10px;
+  width: 10px;
+  height: 10px;
+  margin-right: 7px;
+  background-color: currentColor;
+  border-radius: 50%;
+}
+#simple-bar-click-effect {
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+  touch-action: none;
+  background-color: var(--click-effect);
+  z-index: 2147483647;
+}
+`;
+
+export { baseStyles as styles };
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/core/variables.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/core/variables.js
new file mode 100755
index 0000000..19a7aad
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/core/variables.js
@@ -0,0 +1,107 @@
+import * as Theme from "../theme";
+import * as Settings from "../../settings";
+
+/**
+ * Generates CSS variables based on the provided theme scheme.
+ *
+ * @param {string} scheme - The theme scheme to use for generating CSS variables.
+ * @returns {string} The generated CSS variables as a string.
+ */
+const themedVariables = (scheme) => {
+  const settings = Settings.get();
+  const { themes } = settings;
+  const {
+    colorMain,
+    colorMainAlt,
+    colorMinor,
+    colorAccent,
+    colorRed,
+    colorGreen,
+    colorYellow,
+    colorOrange,
+    colorBlue,
+    colorMagenta,
+    colorCyan,
+    colorBlack,
+    colorWhite,
+    colorForeground,
+    colorBackground,
+  } = themes;
+  const { widgetMaxWidth, compactMode, font, fontSize } = settings.global;
+
+  return /* css */ `
+:root {
+  --main: ${colorMain?.trim() || Theme.colors(themes)[scheme].main};
+  --main-alt: ${colorMainAlt?.trim() || Theme.colors(themes)[scheme].mainAlt};
+  --minor: ${colorMinor?.trim() || Theme.colors(themes)[scheme].minor};
+  --accent: ${colorAccent?.trim() || Theme.colors(themes)[scheme].yellow};
+  --red: ${colorRed?.trim() || Theme.colors(themes)[scheme].red};
+  --green: ${colorGreen?.trim() || Theme.colors(themes)[scheme].green};
+  --yellow: ${colorYellow?.trim() || Theme.colors(themes)[scheme].yellow};
+  --orange: ${colorOrange?.trim() || Theme.colors(themes)[scheme].orange};
+  --blue: ${colorBlue?.trim() || Theme.colors(themes)[scheme].blue};
+  --magenta: ${colorMagenta?.trim() || Theme.colors(themes)[scheme].magenta};
+  --cyan: ${colorCyan?.trim() || Theme.colors(themes)[scheme].cyan};
+  --black: ${colorBlack?.trim() || Theme.colors(themes)[scheme].black};
+  --white: ${colorWhite?.trim() || Theme.colors(themes)[scheme].white};
+  --foreground: ${
+    colorForeground?.trim() || Theme.colors(themes)[scheme].foreground
+  };
+  --background: ${colorBackground?.trim() || Theme.colors(themes)[scheme].main};
+  --transparent-dark: ${Theme.colors(themes)[scheme].transparentDark};
+  --font: ${font?.trim() || Theme.colors(themes)[scheme].defaultFont};
+  --font-size: ${fontSize.trim().length ? fontSize : "11px"};
+  --bar-height: ${
+    compactMode
+      ? Theme.colors(themes)[scheme].compactBarHeight
+      : Theme.colors(themes)[scheme].barHeight
+  };
+  --bar-radius: ${Theme.colors(themes)[scheme].barRadius};
+  --bar-border: ${Theme.colors(themes)[scheme].barBorder};
+  --bar-inner-margin: ${Theme.colors(themes)[scheme].barInnerMargin};
+  --item-max-width: ${widgetMaxWidth.trim().length ? widgetMaxWidth : "160px"};
+  --item-radius: ${Theme.colors(themes)[scheme].itemRadius};
+  --item-inner-margin: ${Theme.colors(themes)[scheme].itemInnerMargin};
+  --item-outer-margin: ${Theme.colors(themes)[scheme].itemOuterMargin};
+  --hover-ring: ${Theme.colors(themes)[scheme].hoverRing};
+  --focus-ring: ${Theme.colors(themes)[scheme].focusRing};
+  --light-shadow: ${Theme.colors(themes)[scheme].lightShadow};
+  --foreground-shadow: ${
+    Theme.colors(themes)[scheme].foregroundShadow
+      ? Theme.colors(themes)[scheme].foregroundShadow
+      : "0 0 0 1px var(--foreground)"
+  };
+  --transition-easing: ${Theme.colors(themes)[scheme].transitionEasing};
+  --click-effect: ${Theme.colors(themes)[scheme].clickEffect};
+}
+`;
+};
+
+const darkVariables = themedVariables("dark");
+const lightVariables = themedVariables("light");
+
+/**
+ * Builds CSS variables based on the user's theme settings.
+ *
+ * @returns {string} The CSS variables for the selected theme.
+ */
+const buildVariables = () => {
+  const settings = Settings.get();
+  const { theme } = settings.global;
+  if (theme === "auto") {
+    return /* css */ `
+      @media (prefers-color-scheme: light) {
+        ${lightVariables}
+      }
+      @media (prefers-color-scheme: dark) {
+        ${darkVariables}
+      }
+    `;
+  }
+  if (theme === "light") {
+    return lightVariables;
+  }
+  return darkVariables;
+};
+
+export const styles = buildVariables();
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/pywal/pywal-colors.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/pywal/pywal-colors.js
new file mode 100755
index 0000000..88b7d43
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/pywal/pywal-colors.js
@@ -0,0 +1,15 @@
+import * as Pywal from "./pywal";
+
+export const colors = {
+  main: Pywal.variables.background,
+  mainAlt: Pywal.variables.function,
+  minor: Pywal.variables.function,
+  accent: Pywal.variables.result,
+  red: Pywal.variables.operator,
+  green: Pywal.variables.result,
+  yellow: Pywal.variables.cursor,
+  orange: Pywal.variables.scrollbar,
+  blue: Pywal.variables.matched,
+  magenta: Pywal.variables.variable,
+  cyan: Pywal.variables.function,
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/pywal/pywal-from-desktop.sh b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/pywal/pywal-from-desktop.sh
new file mode 100755
index 0000000..cd99142
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/pywal/pywal-from-desktop.sh
@@ -0,0 +1,9 @@
+#! /usr/bin/env bash
+
+wal -n -s -i $(sqlite3 -readonly ~/Library/Application\ Support/Dock/desktoppicture.db 'SELECT * FROM data ORDER BY rowID DESC LIMIT 1;' | sed -e "s|~|$HOME|g")
+
+{
+  echo -n 'export const variables = '
+  cat "$HOME/.cache/wal/colors-speedcrunch.json"
+  echo ';'
+} > pywal.js
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/pywal/pywal-gen.sh b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/pywal/pywal-gen.sh
new file mode 100755
index 0000000..7cbc8ee
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/pywal/pywal-gen.sh
@@ -0,0 +1,7 @@
+#! /usr/bin/env bash
+
+{
+  echo -n 'export const variables = '
+  cat "$HOME/.cache/wal/colors-speedcrunch.json"
+  echo ';'
+} > pywal.js
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/pywal/pywal.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/pywal/pywal.js
new file mode 100755
index 0000000..3ce4a64
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/pywal/pywal.js
@@ -0,0 +1,15 @@
+export const variables = {
+  cursor: "#d1dbe0",
+  number: "#d1dbe0",
+  parens: "#BFC3B9",
+  result: "#94A4A8",
+  comment: "#92999c",
+  matched: "#94A4A8",
+  function: "#376089",
+  operator: "#708C9F",
+  variable: "#507495",
+  scrollbar: "#708C9F",
+  separator: "#708C9F",
+  background: "#0a0e0d",
+  editorbackground: "#0a0e0d",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/theme.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/theme.js
new file mode 100755
index 0000000..51985a5
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/theme.js
@@ -0,0 +1,21 @@
+import * as Themes from "./themes";
+import * as Pywal from "./pywal/pywal-colors";
+
+const WITH_PYWAL = false;
+
+const overrideColors = WITH_PYWAL ? Pywal.colors : {};
+
+/**
+ * Generates color themes by merging the specified themes with override colors.
+ *
+ * @param {Object} themes - An object containing the light and dark theme names.
+ * @param {string} themes.lightTheme - The name of the light theme.
+ * @param {string} themes.darkTheme - The name of the dark theme.
+ * @returns {Object} An object containing the light and dark color themes.
+ */
+export function colors(themes) {
+  return {
+    light: { ...Themes.collection[themes.lightTheme], ...overrideColors },
+    dark: { ...Themes.collection[themes.darkTheme], ...overrideColors },
+  };
+}
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes.js
new file mode 100755
index 0000000..ff5a24c
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes.js
@@ -0,0 +1,72 @@
+import * as NightShiftDark from "./themes/night-shift-dark";
+import * as NightShiftLight from "./themes/night-shift-light";
+import * as MacOSDark from "./themes/mac-os-dark";
+import * as MacOSLight from "./themes/mac-os-light";
+import * as OneDark from "./themes/one-dark";
+import * as OneLight from "./themes/one-light";
+import * as GruvboxDark from "./themes/gruvbox-dark";
+import * as GruvboxLight from "./themes/gruvbox-light";
+import * as GruvboxMaterial from "./themes/gruvbox-material";
+import * as Dracula from "./themes/dracula";
+import * as Nord from "./themes/nord";
+import * as Amarena from "./themes/amarena";
+import * as SolarizedLight from "./themes/solarized-light";
+import * as SolarizedDark from "./themes/solarized-dark";
+import * as Cisco from "./themes/cisco";
+import * as Sylens from "./themes/sylens";
+import * as SpaceDuck from "./themes/spaceduck";
+import * as MidsummerNightDark from "./themes/midsummer-night-dark";
+import * as CatppuccinOld from "./themes/catppuccin";
+import * as CatppuccinLatte from "./themes/catppuccin-latte.js";
+import * as CatppuccinFrappe from "./themes/catppuccin-frappe.js";
+import * as CatppuccinMacchiato from "./themes/catppuccin-macchiato.js";
+import * as CatppuccinMocha from "./themes/catppuccin-mocha.js";
+import * as TokyoNight from "./themes/tokyo-night";
+import * as MaterialOcean from "./themes/material-ocean";
+import * as NightOwl from "./themes/night-owl";
+import * as NightfoxDark from "./themes/nightfox-dark";
+import * as NightfoxLight from "./themes/nightfox-light";
+import * as VscodeDarkModern from "./themes/vscode-dark-modern";
+import * as RosePine from "./themes/rose-pine";
+import * as RosePineMoon from "./themes/rose-pine-moon";
+import * as RosePineDawn from "./themes/rose-pine-dawn";
+import * as CyberdreamLight from "./themes/cyberdream-light.js";
+import * as CyberdreamDark from "./themes/cyberdream-dark.js";
+
+// Entire collection of themes available in simple-bar
+export const collection = {
+  NightShiftDark: NightShiftDark.theme,
+  NightShiftLight: NightShiftLight.theme,
+  MacOSDark: MacOSDark.theme,
+  MacOSLight: MacOSLight.theme,
+  OneDark: OneDark.theme,
+  OneLight: OneLight.theme,
+  GruvboxDark: GruvboxDark.theme,
+  GruvboxLight: GruvboxLight.theme,
+  GruvboxMaterial: GruvboxMaterial.theme,
+  Dracula: Dracula.theme,
+  Nord: Nord.theme,
+  Amarena: Amarena.theme,
+  SolarizedLight: SolarizedLight.theme,
+  SolarizedDark: SolarizedDark.theme,
+  Cisco: Cisco.theme,
+  Sylens: Sylens.theme,
+  SpaceDuck: SpaceDuck.theme,
+  MidsummerNightDark: MidsummerNightDark.theme,
+  Catppuccin: CatppuccinOld.theme,
+  CatppuccinLatte: CatppuccinLatte.theme,
+  CatppuccinFrappe: CatppuccinFrappe.theme,
+  CatppuccinMacchiato: CatppuccinMacchiato.theme,
+  CatppuccinMocha: CatppuccinMocha.theme,
+  TokyoNight: TokyoNight.theme,
+  MaterialOcean: MaterialOcean.theme,
+  NightOwl: NightOwl.theme,
+  NightfoxDark: NightfoxDark.theme,
+  NightfoxLight: NightfoxLight.theme,
+  VscodeDarkModern: VscodeDarkModern.theme,
+  RosePine: RosePine.theme,
+  RosePineMoon: RosePineMoon.theme,
+  RosePineDawn: RosePineDawn.theme,
+  CyberdreamLight: CyberdreamLight.theme,
+  CyberdreamDark: CyberdreamDark.theme,
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/amarena.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/amarena.js
new file mode 100755
index 0000000..91561c1
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/amarena.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Amarena",
+  kind: "dark",
+  main: "#1a2026",
+  mainAlt: "#526170",
+  minor: "#242d35",
+  red: "#f26190",
+  green: "#fb6396",
+  yellow: "#f92d72",
+  orange: "#c269bc",
+  blue: "#4cb9d6",
+  magenta: "#58d6bf",
+  cyan: "#6ccb6e",
+  black: "#1a2026",
+  white: "#f4f5f2",
+  foreground: "#f4f5f2",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "MesloLGS NF, JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "3px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 4px",
+  hoverRing: "0 0 0 1px rgba(249, 45, 114, 0.75)",
+  focusRing: "0 0 0 1px rgb(249, 45, 114)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/catppuccin-frappe.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/catppuccin-frappe.js
new file mode 100755
index 0000000..7f6ab49
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/catppuccin-frappe.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Catppuccin Frappe",
+  kind: "dark",
+  main: "#303446", // Base
+  mainAlt: "#292c3c", // Mantle
+  minor: "#232634", // Crust
+  red: "#e78284", // Red
+  green: "#a6d189", // Green
+  yellow: "#e5c890", // Yellow
+  orange: "#ef9f76", // Peach
+  blue: "#8caaee", // Blue
+  magenta: "#ca9ee6", // Mauve
+  cyan: "#99d1db", // Sky
+  black: "#303446", // Base
+  white: "#c6d0f5", // Text
+  foreground: "#c6d0f5", // Text
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "2px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/catppuccin-latte.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/catppuccin-latte.js
new file mode 100755
index 0000000..dd53fec
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/catppuccin-latte.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Catppuccin Latte",
+  kind: "light",
+  main: "#eff1f5", // Base
+  mainAlt: "#e6e9ef", // Mantle
+  minor: "#dce0e8", // Crust
+  red: "#d20f39", // Red
+  green: "#40a02b", // Green
+  yellow: "#df8e1d", // Yellow
+  orange: "#fe640b", // Peach
+  blue: "#1e66f5", // Blue
+  magenta: "#8839ef", // Mauve
+  cyan: "#04a5e5", // Sky
+  black: "#4c4f69", // Text
+  white: "#eff1f5", // Base
+  foreground: "#4c4f69", // Text
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "2px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/catppuccin-macchiato.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/catppuccin-macchiato.js
new file mode 100755
index 0000000..f1db514
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/catppuccin-macchiato.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Catppuccin Macchiato",
+  kind: "dark",
+  main: "#24273a", // Base
+  mainAlt: "#1e2030", // Mantle
+  minor: "#181926", // Crust
+  red: "#ed8796", // Red
+  green: "#a6da95", // Green
+  yellow: "#eed49f", // Yellow
+  orange: "#f5a97f", // Peach
+  blue: "#8aadf4", // Blue
+  magenta: "#c6a0f6", // Mauve
+  cyan: "#91d7e3", // Sky
+  black: "#24273a", // Base
+  white: "#cad3f5", // Text
+  foreground: "#cad3f5", // Text
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "2px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/catppuccin-mocha.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/catppuccin-mocha.js
new file mode 100755
index 0000000..64b1cc2
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/catppuccin-mocha.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Catppuccin Mocha",
+  kind: "dark",
+  main: "#1e1e2e", // Base
+  mainAlt: "#181825", // Mantle
+  minor: "#11111b", // Crust
+  red: "#f38ba8", // Red
+  green: "#a6e3a1", // Green
+  yellow: "#f9e2af", // Yellow
+  orange: "#fab387", // Peach
+  blue: "#89b4fa", // Blue
+  magenta: "#cba6f7", // Mauve
+  cyan: "#89dceb", // Sky
+  black: "#1e1e2e", // Base
+  white: "#cdd6f4", // Text
+  foreground: "#cdd6f4", // Text
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "2px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/catppuccin.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/catppuccin.js
new file mode 100755
index 0000000..2ac8520
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/catppuccin.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Catppuccin (old)",
+  kind: "dark",
+  main: "#1E1E2E",
+  mainAlt: "#302D41",
+  minor: "#575268",
+  red: "#F28FAD",
+  green: "#ABE9B3",
+  yellow: "#FAE3B0",
+  orange: "#F8BD96",
+  blue: "#96CDFB",
+  magenta: "#DDB6F2",
+  cyan: "#89DCEB",
+  black: "#161320",
+  white: "#D9E0EE",
+  foreground: "#D9E0EE",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "2px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/cisco.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/cisco.js
new file mode 100755
index 0000000..a4d84f3
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/cisco.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Cisco",
+  kind: "dark",
+  main: "#282a36",
+  mainAlt: "#8E2F91",
+  minor: "#543185",
+  red: "#8E2F91",
+  green: "#8E2F91",
+  yellow: "#BE3161",
+  orange: "#008CD1",
+  blue: "#6E5BC2",
+  magenta: "#8E2F91",
+  cyan: "#CC60CB",
+  black: "#292a2b",
+  white: "#f5f5f5",
+  foreground: "#9E70B5",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "2px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/cyberdream-dark.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/cyberdream-dark.js
new file mode 100755
index 0000000..a192d37
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/cyberdream-dark.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Cyberdream Dark",
+  kind: "dark",
+  main: "rgba(22, 24, 26, 0.6)", // Base - with 40% transparency
+  mainAlt: "rgba(30, 33, 36, 0.6)", // Mantle - with 40% transparency
+  minor: "rgba(60, 64, 72, 0.6)", // Crust - with 40% transparency
+  red: "#ff6e5e", // Red
+  green: "#5eff6c", // Neon Green
+  yellow: "#f1ff5e", // Yellow
+  orange: "#ffbd5e", // Orange
+  blue: "#5ea1ff", // Blue
+  magenta: "#ff5ef1", // Magenta
+  cyan: "#5ef1ff", // Cyan
+  black: "#16181a", // Base
+  white: "#ffffff", // Text
+  foreground: "#ffffff", // Text
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "2px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/cyberdream-light.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/cyberdream-light.js
new file mode 100755
index 0000000..4403ec4
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/cyberdream-light.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Cyberdream Light",
+  kind: "light",
+  main: "rgba(255, 255, 255, 0.6)", // Base - with 40% transparency
+  mainAlt: "rgba(234, 234, 234, 0.6)", // Mantle - with 40% transparency
+  minor: "rgba(172, 172, 172, 0.6)", // Crust - with 40% transparency
+  red: "#d11500", // Red
+  green: "#008b0c", // Green
+  yellow: "#997b00", // Bronze
+  orange: "#d17c00", // Orange
+  blue: "#0057d1", // Indigo
+  magenta: "#d100bf", // Magenta
+  cyan: "#008c99", // Aqua
+  black: "#16181a", // Text
+  white: "#ffffff", // Base
+  foreground: "#16181a", // Text
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "2px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/dracula.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/dracula.js
new file mode 100755
index 0000000..8eb6b28
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/dracula.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Dracula",
+  kind: "dark",
+  main: "#282a36",
+  mainAlt: "#ff79c6",
+  minor: "#44475a",
+  red: "#ff5555",
+  green: "#50fa7b",
+  yellow: "#f1fa8c",
+  orange: "#ffb86c",
+  blue: "#bd93f9",
+  magenta: "#ff79c6",
+  cyan: "#8be9fd",
+  black: "#282a36",
+  white: "#f8f8f2",
+  foreground: "#f8f8f2",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "2px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/gruvbox-dark.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/gruvbox-dark.js
new file mode 100755
index 0000000..e61884c
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/gruvbox-dark.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Gruvbox Dark",
+  kind: "dark",
+  main: "#282828",
+  mainAlt: "#ff0000",
+  minor: "#3c3836",
+  red: "#cc241d",
+  green: "#98971a",
+  yellow: "#d79921",
+  orange: "#d65d0e",
+  blue: "#458588",
+  magenta: "#b16286",
+  cyan: "#689d6a",
+  black: "#282828",
+  white: "#ebdbb2",
+  foreground: "#ebdbb2",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "2px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/gruvbox-light.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/gruvbox-light.js
new file mode 100755
index 0000000..153a38d
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/gruvbox-light.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Gruvbox Light",
+  kind: "light",
+  main: "#fbf1c7",
+  mainAlt: "#7c6f64",
+  minor: "#ebdbb2",
+  red: "#cc241d",
+  green: "#98971a",
+  yellow: "#d79921",
+  orange: "#d65d0e",
+  blue: "#458588",
+  magenta: "#b16286",
+  cyan: "#689d6a",
+  black: "#fbf1c7",
+  white: "#3c3836",
+  foreground: "#3c3836",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "2px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/gruvbox-material.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/gruvbox-material.js
new file mode 100755
index 0000000..1de9fff
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/gruvbox-material.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Gruvbox Material",
+  kind: "dark",
+  main: "#282828",
+  mainAlt: "#ea6962",
+  minor: "#32302f",
+  red: "#ea6962",
+  green: "#a9b665",
+  yellow: "#e3a84e",
+  orange: "#e78a4e",
+  blue: "#7daea3",
+  magenta: "#d3869b",
+  cyan: "#89b482",
+  black: "#282828",
+  white: "#928374",
+  foreground: "#dfbf8e",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "8px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "6px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/mac-os-dark.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/mac-os-dark.js
new file mode 100755
index 0000000..f658960
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/mac-os-dark.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Mac OS Dark",
+  kind: "dark",
+  main: "#292a2b",
+  mainAlt: "#5f5f60",
+  minor: "#3c3d3e",
+  red: "#ee5f5c",
+  green: "#77b756",
+  yellow: "#f8c644",
+  orange: "#ca8739",
+  blue: "#2b7bf7",
+  magenta: "#9b57a2",
+  cyan: "#e65d9c",
+  black: "#292a2b",
+  white: "#f5f5f5",
+  foreground: "#fff",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "16px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "14px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/mac-os-light.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/mac-os-light.js
new file mode 100755
index 0000000..61229f9
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/mac-os-light.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Mac OS Light",
+  kind: "light",
+  main: "#ececed",
+  mainAlt: "#5f5f60",
+  minor: "#fff",
+  red: "#ee5f5c",
+  green: "#77b756",
+  yellow: "#f8c644",
+  orange: "#ca8739",
+  blue: "#2b7bf7",
+  magenta: "#9b57a2",
+  cyan: "#e65d9c",
+  black: "#292a2b",
+  white: "#f5f5f5",
+  foreground: "#292a2b",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "16px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "14px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(152, 168, 198, 0.5)",
+  focusRing: "0 0 0 2px rgba(152, 168, 198, 0.5)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(0, 0, 0, 0.15)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/material-ocean.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/material-ocean.js
new file mode 100755
index 0000000..ad521b1
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/material-ocean.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Material Theme - Ocean",
+  kind: "dark",
+  main: "rgb(15, 17, 26)",
+  mainAlt: "#0F111A",
+  minor: "#3c3d3e",
+  red: "#f07178",
+  green: "#C3E88D",
+  yellow: "#FFCB6B",
+  orange: "#F78C6C",
+  blue: "#82AAFF",
+  magenta: "#C792EA",
+  cyan: "#89DDFF",
+  black: "#000000",
+  white: "#ffffff",
+  foreground: "#A6ACCD",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "Roboto Mono, monospace",
+  barHeight: "30px",
+  compactBarHeight: "28px",
+  barRadius: "16px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "14px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/midsummer-night-dark.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/midsummer-night-dark.js
new file mode 100755
index 0000000..d5358e4
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/midsummer-night-dark.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Midsummer Night Dark",
+  kind: "dark",
+  main: "#1c1e27",
+  mainAlt: "#212831",
+  minor: "#212831",
+  red: "#e43d6a",
+  green: "#0af29d",
+  yellow: "#eea585",
+  orange: "#e88376",
+  blue: "#56c2ea",
+  magenta: "#b468d0",
+  cyan: "#00ccbb",
+  black: "#1b222d",
+  white: "#fff",
+  foreground: "#fff",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "2px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/night-owl.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/night-owl.js
new file mode 100755
index 0000000..b883b9c
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/night-owl.js
@@ -0,0 +1,33 @@
+export const theme = {
+  name: "NightOwl",
+  kind: "dark",
+  main: "#011627",
+  mainAlt: "#0b253a",
+  minor: "#084d8180",
+  red: "#ef5350",
+  green: "#22da6e",
+  yellow: "#FFCA28",
+  orange: "#F78C6C",
+  blue: "#82AAFF",
+  magenta: "#C792EA",
+  cyan: "#7fdbca",
+  black: "#011627",
+  white: "#ffffff",
+  foreground: "#d2dee7",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "2px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(214, 222, 235, 0.5)",
+  focusRing: "0 0 0 2px rgb(214, 222, 235, 0.2)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  foregroundShadow: "0 0 0 rgba(0, 0, 0, 0)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(214, 222, 235, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/night-shift-dark.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/night-shift-dark.js
new file mode 100755
index 0000000..dd3e3b3
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/night-shift-dark.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Night Shift Dark",
+  kind: "dark",
+  main: "#1b222d",
+  mainAlt: "#98a8c5",
+  minor: "#39465e",
+  red: "#e78482",
+  green: "#8fc8BB",
+  yellow: "#ffd484",
+  orange: "#ffb374",
+  blue: "#6db3cE",
+  magenta: "#ad82cB",
+  cyan: "#7eddde",
+  black: "#1b222d",
+  white: "#fff",
+  foreground: "#fff",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "6px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "5px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/night-shift-light.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/night-shift-light.js
new file mode 100755
index 0000000..92e7038
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/night-shift-light.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Night Shift Light",
+  kind: "light",
+  main: "#fff",
+  mainAlt: "#98a8c5",
+  minor: "#f5f5f5",
+  red: "#e78482",
+  green: "#8fc8bb",
+  yellow: "#d1ab66",
+  orange: "#ffb374",
+  blue: "#6db3ce",
+  magenta: "#ad82cb",
+  cyan: "#2fc2c3",
+  black: "#1b222d",
+  white: "#f5f5f5",
+  foreground: "#1b222d",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "6px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "5px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(152, 168, 198, 0.5)",
+  focusRing: "0 0 0 2px rgba(152, 168, 198, 0.5)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(0, 0, 0, 0.15)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/nightfox-dark.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/nightfox-dark.js
new file mode 100755
index 0000000..0e8fd6a
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/nightfox-dark.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Nightfox Dark",
+  kind: "dark",
+  main: "#192330",
+  mainAlt: "#131a24",
+  minor: "#29394f",
+  red: "#c94f6d",
+  green: "#81b29a",
+  yellow: "#dbc074",
+  orange: "#f4a261",
+  blue: "#719cd6",
+  magenta: "#9d79d6",
+  cyan: "#63cdcf",
+  black: "#192330",
+  white: "#dfdfe0",
+  foreground: "#cdcecf",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "7px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "5px",
+  itemInnerMargin: "3px 9px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(205, 206, 207, 0.75)",
+  focusRing: "0 0 0 2px rgb(205, 206, 207)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(214, 222, 235, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/nightfox-light.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/nightfox-light.js
new file mode 100755
index 0000000..72d885f
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/nightfox-light.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Nightfox Light",
+  kind: "light",
+  main: "#f6f2ee",
+  mainAlt: "#e4dcd4",
+  minor: "#d3c7bb",
+  red: "#a5222f",
+  green: "#396847",
+  yellow: "#AC5402",
+  orange: "#955f61",
+  blue: "#2848a9",
+  magenta: "#6e33ce",
+  cyan: "#287980",
+  black: "#352c24",
+  white: "#f2e9e1",
+  foreground: "#3d2b5a",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "7px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "5px",
+  itemInnerMargin: "3px 9px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(61, 43, 90, 0.75)",
+  focusRing: "0 0 0 2px rgb(61, 43, 90)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(214, 222, 235, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/nord.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/nord.js
new file mode 100755
index 0000000..0bdf1a7
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/nord.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Nord",
+  kind: "dark",
+  main: "#3b4252",
+  mainAlt: "#eceef4",
+  minor: "#4c566a",
+  red: "#bf616a",
+  green: "#a3be8c",
+  yellow: "#ebcb8b",
+  orange: "#d08770",
+  blue: "#81a1c1",
+  magenta: "#b48ead",
+  cyan: "#88c0d0",
+  black: "#2e3440",
+  white: "#eceff4",
+  foreground: "#d8dee9",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "Source Code Pro",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "16px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "14px",
+  itemInnerMargin: "3px 9px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/one-dark.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/one-dark.js
new file mode 100755
index 0000000..e73da4f
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/one-dark.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "One Dark",
+  kind: "dark",
+  main: "#21252b",
+  mainAlt: "#e6e6e6",
+  minor: "#323842",
+  red: "#e05561",
+  green: "#8cc265",
+  yellow: "#d18f52",
+  orange: "#ffb374",
+  blue: "#6db3ce",
+  magenta: "#c162de",
+  cyan: "#42b3c2",
+  black: "#21252b",
+  white: "#fff",
+  foreground: "#abb2bf",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "16px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "20px",
+  itemInnerMargin: "3px 9px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/one-light.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/one-light.js
new file mode 100755
index 0000000..64fbb4a
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/one-light.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "One Light",
+  kind: "light",
+  main: "#f5f5f5",
+  mainAlt: "#21252b",
+  minor: "#fff",
+  red: "#e05561",
+  green: "#8cc265",
+  yellow: "#d18f52",
+  orange: "#FFB374",
+  blue: "#6DB3CE",
+  magenta: "#c162de",
+  cyan: "#42b3c2",
+  black: "#21252b",
+  white: "#fff",
+  foreground: "#21252b",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "16px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "20px",
+  itemInnerMargin: "3px 9px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(152, 168, 198, 0.5)",
+  focusRing: "0 0 0 2px rgba(152, 168, 198, 0.5)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(0, 0, 0, 0.15)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/rose-pine-dawn.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/rose-pine-dawn.js
new file mode 100755
index 0000000..50b6b49
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/rose-pine-dawn.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Rosé Pine Dawn",
+  kind: "light",
+  main: "#faf4ed",
+  mainAlt: "#fffaf3",
+  minor: "#f2e9e1",
+  red: "#b4637a",
+  green: "#286983",
+  yellow: "#ea9d34",
+  orange: "#d7827e",
+  blue: "#56949f",
+  magenta: "#907aa9",
+  cyan: "#d7827e",
+  black: "#575279",
+  white: "#faf4ed",
+  foreground: "#575279",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "2px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(152, 168, 198, 0.5)",
+  focusRing: "0 0 0 2px rgba(152, 168, 198, 0.5)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(0, 0, 0, 0.15)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/rose-pine-moon.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/rose-pine-moon.js
new file mode 100755
index 0000000..d0d3e2b
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/rose-pine-moon.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Rosé Pine Moon",
+  kind: "dark",
+  main: "#232136",
+  mainAlt: "#2a273f",
+  minor: "#393552",
+  red: "#eb6f92",
+  green: "#3e8fb0",
+  yellow: "#f6c177",
+  orange: "#ea9a97",
+  blue: "#9ccfd8",
+  magenta: "#c4a7e7",
+  cyan: "#ea9a97",
+  black: "#232136",
+  white: "#e0def4",
+  foreground: "#e0def4",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "2px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/rose-pine.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/rose-pine.js
new file mode 100755
index 0000000..1c20f58
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/rose-pine.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Rosé Pine",
+  kind: "dark",
+  main: "#191724",
+  mainAlt: "#1f1d2e",
+  minor: "#26233a",
+  red: "#eb6f92",
+  green: "#31748f",
+  yellow: "#f6c177",
+  orange: "#ebbcba",
+  blue: "#9ccfd8",
+  magenta: "#c4a7e7",
+  cyan: "#ebbcba",
+  black: "#191724",
+  white: "#e0def4",
+  foreground: "#e0def4",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "2px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/solarized-dark.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/solarized-dark.js
new file mode 100755
index 0000000..1beef76
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/solarized-dark.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Solarized Dark",
+  kind: "dark",
+  main: "#002b36",
+  mainAlt: "#002b36",
+  minor: "#073642",
+  red: "#dc322f",
+  green: "#859900",
+  yellow: "#b58900",
+  orange: "#cb4b16",
+  blue: "#0087ff",
+  magenta: "#d33682",
+  cyan: "#2aa198",
+  black: "#262626",
+  white: "#e4e4e4",
+  foreground: "#93a1a1",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "16px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "20px",
+  itemInnerMargin: "3px 9px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(152, 168, 198, 0.5)",
+  focusRing: "0 0 0 2px rgba(152, 168, 198, 0.5)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(0, 0, 0, 0.15)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/solarized-light.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/solarized-light.js
new file mode 100755
index 0000000..b90aa81
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/solarized-light.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Solarized Light",
+  kind: "light",
+  main: "#fdf6e3",
+  mainAlt: "#fdf6e3",
+  minor: "#eee8d5",
+  red: "#dc322f",
+  green: "#859900",
+  yellow: "#b58900",
+  orange: "#cb4b16",
+  blue: "#0087ff",
+  magenta: "#d33682",
+  cyan: "#2aa198",
+  black: "#262626",
+  white: "#e4e4e4",
+  foreground: "#657b83",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "16px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "20px",
+  itemInnerMargin: "3px 9px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(152, 168, 198, 0.5)",
+  focusRing: "0 0 0 2px rgba(152, 168, 198, 0.5)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(0, 0, 0, 0.15)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/spaceduck.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/spaceduck.js
new file mode 100755
index 0000000..45d4ca9
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/spaceduck.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "SpaceDuck",
+  kind: "dark",
+  main: "#0f111b",
+  mainAlt: "#b3a1e6",
+  minor: "#1b1c36",
+  red: "#e33400",
+  green: "#5ccc96",
+  yellow: "#f2ce00",
+  orange: "#e39400",
+  blue: "#686f9a",
+  magenta: "#ce6f8f",
+  cyan: "#00a3cc",
+  black: "#000000",
+  white: "#FFF",
+  foreground: "#ecf0c1",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "5px",
+  itemRadius: "3px",
+  itemInnerMargin: "5px 10px",
+  itemOuterMargin: "0 0 0 4px",
+  hoverRing: "0 0 0 2px rgba(92, 204, 150, 0.75)",
+  focusRing: "0 0 0 2px rgb(92, 204, 150)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 0)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/sylens.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/sylens.js
new file mode 100755
index 0000000..1d3f8ec
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/sylens.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Sylens",
+  kind: "dark",
+  main: "#1B2229",
+  mainAlt: "#7d5a15",
+  minor: "#1b2229",
+  red: "#7d5a15",
+  green: "#BF6832",
+  yellow: "#d65d0e",
+  orange: "#475090",
+  blue: "#33736A",
+  magenta: "#814b42",
+  cyan: "#346a97",
+  black: "#a77822",
+  white: "#1b2229",
+  foreground: "#a77822",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "MonoLisa",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "2px",
+  itemInnerMargin: "3px 7px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(167, 120, 34, 0.75)",
+  focusRing: "0 0 0 2px rgb(167, 120, 34)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(167, 120, 34, H0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/tokyo-night.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/tokyo-night.js
new file mode 100755
index 0000000..9982420
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/tokyo-night.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Tokyo Night",
+  kind: "dark",
+  main: "#15161E",
+  mainAlt: "#302D41",
+  minor: "#15161E",
+  red: "#F7768E",
+  green: "#9ECE6A",
+  yellow: "#E0AF68",
+  orange: "#F8BD96",
+  blue: "#7AA2F7",
+  magenta: "#BB9AF7",
+  cyan: "#7DCFFF",
+  black: "#15161E",
+  white: "#A9B1D6",
+  foreground: "#A9B1D6",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "9px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "0px",
+  itemRadius: "5px",
+  itemInnerMargin: "0px 9px",
+  itemOuterMargin: "0 0 0 4px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/vscode-dark-modern.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/vscode-dark-modern.js
new file mode 100755
index 0000000..d997e77
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/themes/vscode-dark-modern.js
@@ -0,0 +1,32 @@
+export const theme = {
+  name: "Vscode Dark Modern",
+  kind: "dark",
+  main: "#181818",
+  mainAlt: "#1f1f1f",
+  minor: "#2a2a2a",
+  red: "#e78482",
+  green: "#4ec6ae",
+  yellow: "#dcdcaa",
+  orange: "#ffb374",
+  blue: "#4fc1ff",
+  magenta: "#c586c0",
+  cyan: "#9cdcfe",
+  black: "#181818",
+  white: "#fff",
+  foreground: "#fff",
+  transparentDark: "rgba(0, 0, 0, 0.05)",
+  defaultFont: "JetBrains Mono, Monaco, Menlo, monospace",
+  barHeight: "34px",
+  compactBarHeight: "28px",
+  barRadius: "3px",
+  barBorder: "0px solid transparent",
+  barInnerMargin: "3px",
+  itemRadius: "7px",
+  itemInnerMargin: "2px 6px",
+  itemOuterMargin: "0 0 0 5px",
+  hoverRing: "0 0 0 2px rgba(255, 255, 255, 0.75)",
+  focusRing: "0 0 0 2px rgb(255, 255, 255)",
+  lightShadow: "0 5px 10px rgba(0, 0, 0, 0.24)",
+  transitionEasing: "cubic-bezier(0.4, 0, 0.2, 1)",
+  clickEffect: "rgba(255, 255, 255, 0.3)",
+};