doc: demo styles

Author: bryanmylee

docs/src/app.css

@@ -5,34 +5,38 @@
 
 @layer components {
   .demo {
-    @apply text-base;
+    @apply text-base font-sans;
 
     table& {
-      border-spacing: 0;
-      @apply text-black border-gray-300 border-t border-l font-sans;
-      @apply dark:text-white dark:border-gray-400;
+      @apply text-gray-800 border rounded-md;
+      @apply dark:text-white dark:border-gray-400 dark:bg-gray-900;
 
       & tr {
         @apply bg-transparent dark:bg-transparent;
       }
+      
+      & th {
+        @apply bg-gray-100 font-bold;
+        @apply dark:bg-gray-700;
+      }
 
       & th,
       & td {
-        @apply border-gray-300 m-0 p-1.5 border-b border-r;
+        @apply border-gray-200 m-0 px-2 py-1 border-b border-r;
         @apply dark:border-gray-400;
       }
     }
 
-    button& {
-      @apply text-black bg-gray-200 disabled:opacity-30;
+    button&, & button {
+      @apply text-black bg-gray-200 disabled:opacity-30 font-semibold;
       @apply dark:bg-gray-500 dark:text-white;
-      @apply p-1.5 border border-gray-300 rounded-lg;
+      @apply px-1.5 py-1 rounded-lg;
     }
 
-    input&,
-    select& {
-      @apply p-1.5 border border-gray-300 rounded-lg;
-      @apply dark:bg-gray-800 dark:text-white;
+    input&, & input,
+    select&, & select {
+      @apply px-2 py-1 border border-gray-200 rounded-lg font-normal;
+      @apply dark:bg-gray-800 dark:text-white dark:border-gray-400;
     }
   }
 }

docs/src/kit-docs/Example.svelte

@@ -26,7 +26,7 @@
 <style lang="postcss">
   .disclosure {
     & :global(.root) {
-      @apply px-4 py-2 border-2 rounded-lg;
+      @apply px-4 py-2 border rounded-lg;
       @apply border-gray-200 bg-gray-100/50;
       :global(.dark) & {
         @apply border-gray-600 bg-gray-600/50;
@@ -45,7 +45,7 @@
     }
 
     & :global(.panel) {
-      @apply py-2 border-t-2 border-gray-200;
+      @apply py-2 border-t border-gray-200;
       :global(.dark) & {
         @apply border-gray-600;
       }

docs/src/routes/docs/[...3]plugins/_demo/SimpleGroupByDemo.svelte

@@ -162,12 +162,12 @@
 
 <style>
   .group {
-    background: rgb(144, 191, 148);
+    background: rgb(144, 191, 148, 0.2);
   }
   .aggregate {
-    background: rgb(238, 212, 100);
+    background: rgb(238, 212, 100, 0.2);
   }
   .repeat {
-    background: rgb(255, 139, 139);
+    background: rgb(255, 139, 139, 0.2);
   }
 </style>

docs/src/routes/docs/[...3]plugins/_demo/SimpleResizedColumnsDemo.svelte

@@ -100,14 +100,14 @@
     position: relative;
   }
 
-  .resizer {
+  th .resizer {
     position: absolute;
     top: 0;
     bottom: 0;
     right: -4px;
     width: 8px;
-    background: lightgray;
-    cursor: col-resize;
     z-index: 1;
+    background: rgba(128, 128, 128, 0.2);
+    cursor: col-resize;
   }
 </style>

docs/src/routes/docs/[...3]plugins/_demo/SimpleSelectedDemo.svelte

@@ -128,6 +128,6 @@
 
 <style>
   .selected {
-    background: rgb(148, 205, 255);
+    background: rgb(148, 205, 255, 0.2);
   }
 </style>

docs/src/routes/docs/[...4]examples/_KitchenSink.svelte

@@ -394,21 +394,21 @@
     cursor: col-resize;
   }
   .sorted {
-    background: rgb(144, 191, 148, 0.5);
+    background: rgb(144, 191, 148, 0.2);
   }
   .matches {
     font-weight: 700;
   }
   .group {
-    background: rgb(144, 191, 148, 0.5);
+    background: rgb(144, 191, 148, 0.2);
   }
   .aggregate {
-    background: rgb(238, 212, 100, 0.5);
+    background: rgb(238, 212, 100, 0.2);
   }
   .repeat {
-    background: rgb(255, 139, 139, 0.5);
+    background: rgb(255, 139, 139, 0.2);
   }
   .selected {
-    background: rgb(148, 205, 255, 0.5);
+    background: rgb(148, 205, 255, 0.2);
   }
 </style>