move ubersicht modules in tree

28 files changed, 1264 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);
+}
+`;