Better disabled textbox style

src/lib/components/ComfyProperties.svelte

@@ -465,4 +465,11 @@
         position: absolute;
         bottom: 0;
         padding: 0.5em; */
+ }
+
+ :global(input[type=text]:disabled) {
+     @include disable-input;
+ }
+ :global(textarea:disabled) {
+     @include disable-input;
  }

src/lib/widgets/RangeWidget.svelte

@@ -126,6 +126,9 @@
 
      :global(input[type=number]) {
          text-overflow: ellipsis;
+         &:disabled {
+             @include disable-input;
+         }
      }
 
      &.mobile {

src/lib/widgets/TextWidget.svelte

@@ -46,10 +46,17 @@
     {/if}
 </div>
 
-<style>
+<style lang="scss">
  .wrapper {
      padding: 2px;
      width: 100%;
+
+     :global(input[type=text]:disabled) {
+         @include disable-input;
+     }
+     :global(textarea:disabled) {
+         @include disable-input;
+     }
  }
 
  :global(span.hide) {

src/scss/global.scss

@@ -10,3 +10,11 @@ body {
 :root {
     --color-blue-500: #3985f5;
 }
+
+@mixin disable-input {
+    -webkit-text-fill-color: var(--neutral-500);
+    background-color: var(--neutral-200);
+    border-color: var(--neutral-300);
+    box-shadow: 0 0 0 var(--shadow-spread) transparent, rgba(0, 0, 0, 0.08) 0px 2px 4px 0px inset;
+    cursor: not-allowed;
+}

src/scss/ux.scss

@@ -76,6 +76,7 @@ License: GNU General Public License
     --ae-nav-color:hsl(210deg 4% 80%);
     --ae-nav-hover-color:hsl(0deg 0% 4%);
     --ae-input-color:hsl(210deg 4% 80%);
+    --ae-input-disabled-color:hsl(210deg 4% 40%);
     --ae-label-color:hsl(210deg 4% 80%);
     --ae-subgroup-input-color:hsl(0deg 100% 100%);
     --ae-placeholder-color:hsl(214deg 5% 30%);
@@ -463,6 +464,10 @@ select {
 	min-width: unset;
 }
 
+input:disabled, textarea:disabled {
+    -webkit-text-fill-color: var(--ae-input-disabled-color) !important;
+}
+
 select {
     appearance: auto;
 }

svelte.config.js

@@ -1,4 +1,9 @@
 import sveltePreprocess from "svelte-preprocess";
+import path, { dirname } from 'path'
+import { fileURLToPath } from 'url'
+
+const filePath = dirname(fileURLToPath(import.meta.url))
+const scssPath = `./src/scss`
 
 const config = {
   preprocess: [
@@ -8,6 +13,9 @@ const config = {
           debug: true,
         }
       },
+      scss: {
+        prependData: `@import '${scssPath}/global.scss';`
+      }
     })
   ]
 };