Feature/split button dropdown + themeing updates

src/App.svelte

@@ -13,8 +13,12 @@
   import MeltRadio from "./lib/MeltRadio.svelte";
   import Toggle from "./lib/Toggle.svelte";
   import MoltenPushButton from "./lib/MoltenPushButton.svelte";
+  import MoltenPushButtonDropdown from "./lib/MoltenPushButtonDropdown.svelte";
+  import MoltenPushButtonGroup from "./lib/MoltenPushButtonGroup.svelte";
   import MoltenInput from "./lib/MoltenInput.svelte";
+  import ControlGroup from "./lib/ControlGroup.svelte";
   import { fly } from "svelte/transition";
+  import { tick } from "svelte";
   import LogMessage from "./lib/LogMessage.svelte";
   import { LogMessageType } from "./lib/LogMessageType.ts";
   import { writable } from "svelte/store";
@@ -61,6 +65,8 @@
   let logMessageTimeout: number;
 
   let clearButtonTarget = "default";
+  let clearButtonWidth = 0;
+
   let clearButtonOptions = [
     {
       title: "Default",
@@ -76,6 +82,13 @@
         alert(e);
       },
     },
+    {
+      title: "Clear Everything",
+      value: "long",
+      onclick: (e) => {
+        alert(e);
+      },
+    },
   ];
 
   function handleShowLogMessage() {
@@ -91,6 +104,20 @@
 
 <main on:contextmenu|preventDefault>
   <div class="main-container">
+    <div class="mock-panel">
+      <Block border="yellow">
+        <BlockTitle>To Be Deprecated</BlockTitle>
+        <BlockBody
+          >The following components are scheduled for deprecation:</BlockBody
+        >
+        <MoltenButton title={"MoltenButton"} click={() => {}} />
+        <ControlGroup>
+          <div slot="header">ControlGroup</div>
+          <div slot="content">This component wraps content with a header</div>
+        </ControlGroup>
+      </Block>
+    </div>
+
     <div class="mock-panel">
       <span class="color-preview-label"
         ><div
@@ -99,6 +126,20 @@
         ></div>
         --background</span
       >
+      <span class="color-preview-label"
+        ><div
+          class="color-preview-box"
+          style="background-color: var(--background-muted);"
+        ></div>
+        --background-muted</span
+      >
+      <span class="color-preview-label"
+        ><div
+          class="color-preview-box"
+          style="background-color: var(--background-soft);"
+        ></div>
+        --background-soft</span
+      >
       <span class="color-preview-label"
         ><div
           class="color-preview-box"
@@ -127,6 +168,41 @@
         ></div>
         --foreground-disabled</span
       >
+      <span class="color-preview-label"
+        ><div
+          class="color-preview-box"
+          style="background-color: var(--shadow);"
+        ></div>
+        --shadow</span
+      >
+      <span class="color-preview-label"
+        ><div
+          class="color-preview-box"
+          style="background-color: var(--accent);"
+        ></div>
+        --accent</span
+      >
+      <span class="color-preview-label"
+        ><div
+          class="color-preview-box"
+          style="background-color: var(--accent-muted);"
+        ></div>
+        --accent-muted</span
+      >
+      <span class="color-preview-label"
+        ><div
+          class="color-preview-box"
+          style="background-color: var(--accent-soft);"
+        ></div>
+        --accent-soft</span
+      >
+      <span class="color-preview-label"
+        ><div
+          class="color-preview-box"
+          style="background-color: var(--error);"
+        ></div>
+        --error</span
+      >
       <span class="color-preview-label"
         ><div
           class="color-preview-box"
@@ -229,24 +305,53 @@
         <BlockTitle>MoltenPushButton</BlockTitle>
 
         <BlockBody>This has dropdown</BlockBody>
-        <MoltenPushButton
-          disabled={buttonsDisabled}
-          click={() => {}}
-          text={"Clear"}
-          style={"normal"}
-          options={clearButtonOptions}
-          bind:target={clearButtonTarget}
-          decorations={["(", ")"]}
-        />
+        <BlockBody>Button width: {clearButtonWidth}px</BlockBody>
+        <MoltenPushButtonGroup>
+          <div
+            use:tooltip={{
+              text: "Clear the current selection",
+              placement: "top",
+            }}
+          >
+            <MoltenPushButton
+              disabled={buttonsDisabled}
+              click={() => {}}
+              text={"Clear"}
+              style={"normal"}
+              options={clearButtonOptions}
+              bind:target={clearButtonTarget}
+              bind:width={clearButtonWidth}
+              decorations={["(", ")"]}
+              grouped={true}
+            />
+          </div>
+          <div
+            use:tooltip={{
+              text: "More options",
+              placement: "top",
+            }}
+          >
+            <MoltenPushButtonDropdown
+              disabled={buttonsDisabled}
+              style={"normal"}
+              options={clearButtonOptions}
+              bind:target={clearButtonTarget}
+              menuWidth={clearButtonWidth}
+            />
+          </div>
+        </MoltenPushButtonGroup>
 
         <BlockBody>This has three variants:</BlockBody>
         <MoltenPushButton
           disabled={buttonsDisabled}
           click={() => {}}
           text={"Normal w/ popup"}
           style={"normal"}
+          popup={{}}
         >
-          <span slot="popup">Popup</span>
+          <span slot="popup"
+            >Button clicked! This message will disappear in 3 seconds.</span
+          >
         </MoltenPushButton>
         <MoltenPushButton
           disabled={buttonsDisabled}

src/lib/ControlGroup.svelte

@@ -11,7 +11,7 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    background-color: rgba(0, 0, 0, 0.25);
+    background-color: var(--background-soft);
     padding: 0.5rem;
     gap: 0.5rem;
     border-radius: 0.75rem;

src/lib/MeltCheckbox.svelte

@@ -56,8 +56,8 @@
   }
 
   .checkbox-box {
-    background-color: rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(0, 0, 0, 0.2);
+    background-color: var(--background-muted);
+    border: 1px solid var(--background-soft);
   }
 
   .checkbox-outer {

src/lib/MeltCombo.svelte

@@ -274,18 +274,18 @@
     width: 100%;
     display: flex;
     flex-direction: row;
-    border: 1px solid rgba(0, 0, 0, 1);
+    border: 1px solid var(--background-soft);
     padding: 0.5rem;
-    color: white;
-    background-color: rgba(0, 0, 0, 0.25);
+    color: var(--foreground);
+    background-color: var(--background-muted);
     margin: 0.25rem 0rem 0rem;
   }
   input.error {
-    border-color: rgba(220, 38, 38, 1);
+    border-color: var(--error);
   }
   input.disabled {
-    background-color: rgba(0, 0, 0, 0.5);
-    color: rgba(255, 255, 255, 0.4);
+    background-color: var(--background-muted);
+    color: var(--foreground-disabled);
   }
   .menu {
     background-color: var(--popover-background);

src/lib/MeltRadio.svelte

@@ -114,8 +114,8 @@
     gap: 1rem;
   }
   .radio-border {
-    background-color: rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(0, 0, 0, 0.2);
+    background-color: var(--background-muted);
+    border: 1px solid var(--background-soft);
   }
   label.row {
     cursor: pointer;
@@ -168,7 +168,7 @@
     padding: 0.25rem 0.5rem;
     width: 100%;
     border-radius: 0.25rem;
-    border: 1px solid rgba(0, 0, 0, 0.4);
+    border: 1px solid var(--background-soft);
   }
   button.style-button:hover {
     background-color: var(--background-muted);

src/lib/MeltSlider.svelte

@@ -73,23 +73,21 @@
   span.range-full {
     display: block;
     width: 100%;
-    background-color: white;
+    background-color: var(--background-muted);
+    border: 1px solid var(--background-soft);
     border-radius: 9999px;
     height: 8px;
   }
   span.range-selected {
     height: 8px;
-    background-color: rgba(115, 115, 115, 1);
+    background-color: var(--foreground-disabled);
     border-radius: 9999px;
   }
   span.thumb {
     display: block;
     height: var(--thumb-size);
     width: var(--thumb-size);
     border-radius: 9999px;
-    background-color: rgba(115, 115, 115, 1);
-  }
-  span.thumb:focus {
-    box-shadow: 0 0 0 2px rgba(0, 0, 0, 1);
+    background-color: var(--foreground-muted);
   }
 </style>