feat: add theming support

2024-04-19 01:27:11 +02:00
parent a15a54c61e
commit d8ada83db3
27 changed files with 569 additions and 285 deletions
--- a/packages/ui/src/lib/Details.svelte
+++ b/packages/ui/src/lib/Details.svelte
@@ -1,21 +1,34 @@
 <script lang="ts">
  export let title = "Details";
+  export let transparent = false;
 </script>

-<details>
+<details class:transparent>
  <summary>{title}</summary>
-
-  <slot />
+  <div class="content">
+    <slot />
+  </div>
 </details>

 <style>
  details {
    padding: 1em;
-    color: white;
+    color: var(--text-color);
+    padding-left: 20px;
    background-color: #202020;
    outline: solid 0.1px white;
    border-radius: 2px;
    font-weight: 300;
    font-size: 0.9em;
  }
+
+  details.transparent {
+    background-color: transparent;
+    padding: 0;
+    outline: none;
+  }
+
+  .content {
+    padding-left: 12px;
+  }
 </style>