@globalbrain/sefirot 4.38.0 → 4.39.0

package/lib/components/STableCell.vue

@@ -132,20 +132,20 @@ const valueIsImagePath = computed(() => {
 
 <style scoped lang="postcss">
 .STableCell {
-  background-color: var(--c-bg-elv-3);
+  background-color: var(--c-bg-1);
   transition: background-color 0.1s;
   overflow: hidden;
 
   :where(.row:has(.input.on)) & {
-    background-color: var(--c-bg-elv-4);
+    background-color: var(--c-bg-2);
   }
 
   .row:hover & {
-    background-color: var(--c-bg-elv-4);
+    background-color: var(--c-bg-2);
   }
 
   .summary & {
-    background-color: var(--c-bg-elv-4);
+    background-color: var(--c-bg-2);
   }
 
   .STableItem:first-child & {

package/lib/components/STableColumn.vue

@@ -168,10 +168,10 @@ function stopDialogPositionListener() {
 
 <style scoped lang="postcss">
 .STableColumn {
-  background-color: var(--c-bg-elv-3);
+  background-color: var(--c-bg-1);
 
   &.has-header {
-    border-top: 1px solid var(--c-gutter);
+    border-top: 1px solid var(--c-divider);
   }
 
   .STableItem:first-child & {
@@ -197,7 +197,7 @@ function stopDialogPositionListener() {
   line-height: 40px;
   text-align: left;
   font-size: 12px;
-  font-weight: 600;
+  font-weight: 500;
   color: var(--c-text-2);
   white-space: nowrap;
   overflow: hidden;
@@ -228,7 +228,7 @@ function stopDialogPositionListener() {
 
   &:hover {
     color: var(--c-text-1);
-    background-color: var(--c-bg-mute-1);
+    background-color: var(--button-fill-default-hover-bg-color);
   }
 
   &.active {

package/lib/components/STableFooter.vue

@@ -63,11 +63,11 @@ const hasNext = computed(() => {
 
 <style scoped lang="postcss">
 .STableFooter {
-  border-top: 1px solid var(--c-gutter);
+  border-top: 1px solid var(--c-divider);
   border-radius: 0 0 calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px);
   padding-right: var(--table-padding-right);
   padding-left: var(--table-padding-left);
-  background-color: var(--c-bg-elv-3);
+  background-color: var(--c-bg-1);
 
   &.borderless {
     border-radius: 0;
@@ -117,7 +117,7 @@ const hasNext = computed(() => {
   }
 
   &.active:hover {
-    background-color: var(--c-bg-elv-1);
+    background-color: var(--c-bg-1);
   }
 }
 

package/lib/components/STableHeader.vue

@@ -42,7 +42,7 @@ const stats = computed(() => {
   border-radius: calc(var(--table-border-radius) - 1px) calc(var(--table-border-radius) - 1px) 0 0;
   padding-right: var(--table-padding-right);
   padding-left: var(--table-padding-left);
-  background-color: var(--c-bg-elv-4);
+  background-color: var(--c-bg-1);
 
   &.borderless {
     border-radius: 0;

package/lib/components/STableItem.vue

@@ -30,8 +30,8 @@ const classes = computed(() => [
   z-index: var(--table-col-z-index, auto);
   flex-shrink: 0;
   flex-grow: 1;
-  border-left: var(--table-col-border-left, 0px) solid var(--c-gutter);
-  border-right: 1px solid var(--c-gutter);
+  border-left: var(--table-col-border-left, 0px) solid var(--c-divider);
+  border-right: 1px solid var(--c-divider);
   margin-left: calc(var(--table-col-border-left, 0px) * -1);
   min-width: var(--table-col-width);
   max-width: var(--table-col-width);

package/lib/http/Http.ts

@@ -3,6 +3,7 @@ import { parse as parseCookie } from '@tinyhttp/cookie'
 import FileSaver from 'file-saver'
 import { FetchError, type FetchOptions, type FetchResponse } from 'ofetch'
 import { stringify } from 'qs'
+import { objectToFormData } from '../support/Http'
 
 type Config = ReturnType<typeof import('../stores/HttpConfig').useHttpConfig>
 
@@ -87,7 +88,7 @@ export class Http {
       })
 
       if (hasFile) {
-        const formData = this.objectToFormData(body, undefined, undefined, true)
+        const formData = objectToFormData(body, undefined, undefined, true)
         formData.append(this.config.payloadKey, payload)
         body = formData
       } else {
@@ -111,7 +112,7 @@ export class Http {
   }
 
   async upload<T = any>(url: string, body?: any, options?: FetchOptions): Promise<T> {
-    return this.post<T>(url, this.objectToFormData(body), options)
+    return this.post<T>(url, objectToFormData(body), options)
   }
 
   async download(url: string, options?: FetchOptions): Promise<void> {
@@ -130,44 +131,6 @@ export class Http {
 
     FileSaver.saveAs(blob, filename as string)
   }
-
-  private objectToFormData(
-    obj: any,
-    form?: FormData,
-    namespace?: string,
-    onlyFiles = false
-  ): FormData {
-    const fd = form || new FormData()
-    let formKey: string
-
-    Object.keys(obj).forEach((property) => {
-      if (namespace) {
-        formKey = `${namespace}[${property}]`
-      } else {
-        formKey = property
-      }
-
-      if (obj[property] === undefined) {
-        return
-      }
-
-      if (
-        typeof obj[property] === 'object'
-        && !(obj[property] instanceof Blob)
-        && obj[property] !== null
-      ) {
-        this.objectToFormData(obj[property], fd, property, onlyFiles)
-      } else {
-        const value = obj[property] === null ? '' : obj[property]
-        if (onlyFiles && !(value instanceof Blob)) {
-          return
-        }
-        fd.append(formKey, value)
-      }
-    })
-
-    return fd
-  }
 }
 
 export function isFetchError(e: unknown): e is FetchError {

package/lib/styles/utilities.css

@@ -85,6 +85,7 @@
 .s-py-8  { padding-top: 8px; padding-bottom: 8px; }
 .s-py-12 { padding-top: 12px; padding-bottom: 12px; }
 .s-py-16 { padding-top: 16px; padding-bottom: 16px; }
+.s-py-20 { padding-top: 20px; padding-bottom: 20px; }
 .s-py-24 { padding-top: 24px; padding-bottom: 24px; }
 .s-py-32 { padding-top: 32px; padding-bottom: 32px; }
 .s-py-48 { padding-top: 48px; padding-bottom: 48px; }
@@ -94,6 +95,7 @@
 .s-px-8  { padding-right: 8px; padding-left: 8px; }
 .s-px-12 { padding-right: 12px; padding-left: 12px; }
 .s-px-16 { padding-right: 16px; padding-left: 16px; }
+.s-px-20 { padding-right: 20px; padding-left: 20px; }
 .s-px-24 { padding-right: 24px; padding-left: 24px; }
 .s-px-32 { padding-right: 32px; padding-left: 32px; }
 .s-px-48 { padding-right: 48px; padding-left: 48px; }
@@ -103,6 +105,7 @@
 .s-pt-8  { padding-top: 8px; }
 .s-pt-12 { padding-top: 12px; }
 .s-pt-16 { padding-top: 16px; }
+.s-pt-20 { padding-top: 20px; }
 .s-pt-24 { padding-top: 24px; }
 .s-pt-32 { padding-top: 32px; }
 .s-pt-48 { padding-top: 48px; }
@@ -112,6 +115,7 @@
 .s-pr-8  { padding-right: 8px; }
 .s-pr-12 { padding-right: 12px; }
 .s-pr-16 { padding-right: 16px; }
+.s-pr-20 { padding-right: 20px; }
 .s-pr-24 { padding-right: 24px; }
 .s-pr-32 { padding-right: 32px; }
 .s-pr-48 { padding-right: 48px; }
@@ -121,6 +125,7 @@
 .s-pb-8  { padding-bottom: 8px; }
 .s-pb-12 { padding-bottom: 12px; }
 .s-pb-16 { padding-bottom: 16px; }
+.s-pb-20 { padding-bottom: 20px; }
 .s-pb-24 { padding-bottom: 24px; }
 .s-pb-32 { padding-bottom: 32px; }
 .s-pb-48 { padding-bottom: 48px; }
@@ -130,6 +135,7 @@
 .s-pl-8  { padding-left: 8px; }
 .s-pl-12 { padding-left: 12px; }
 .s-pl-16 { padding-left: 16px; }
+.s-pl-20 { padding-left: 20px; }
 .s-pl-24 { padding-left: 24px; }
 .s-pl-32 { padding-left: 32px; }
 .s-pl-48 { padding-left: 48px; }
@@ -210,6 +216,10 @@
  * Backgrounds
  * -------------------------------------------------------------------------- */
 
+.s-bg-1 { background-color: var(--c-bg-1); }
+.s-bg-2 { background-color: var(--c-bg-2); }
+.s-bg-3 { background-color: var(--c-bg-3); }
+
 .s-bg-elv-1 { background-color: var(--c-bg-elv-1); }
 .s-bg-elv-2 { background-color: var(--c-bg-elv-2); }
 .s-bg-elv-3 { background-color: var(--c-bg-elv-3); }

package/lib/styles/variables.css

@@ -51,14 +51,14 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --c-gray-1: #fcfcfd;
-  --c-gray-2: #f9f9fb;
-  --c-gray-3: #f2f2f5;
-  --c-gray-4: #ebebef;
-  --c-gray-5: #e4e4e9;
-  --c-gray-6: #dddde3;
-  --c-gray-7: #d3d4db;
-  --c-gray-8: #b9bbc6;
+  --c-gray-1: #f9f9fb;
+  --c-gray-2: #f2f2f5;
+  --c-gray-3: #ebebef;
+  --c-gray-4: #e4e4e9;
+  --c-gray-5: #dddde3;
+  --c-gray-6: #d3d4db;
+  --c-gray-7: #b9bbc6;
+  --c-gray-8: #989ba6;
   --c-gray-9: #8b8d98;
   --c-gray-10: #7e808a;
   --c-gray-11: #60646c;
@@ -151,17 +151,19 @@
 }
 
 /**
- * Color: Divider and Gutter
+ * Color: Base Border, Divider, and Gutter
  * -------------------------------------------------------------------------- */
 
 :root {
-  --c-divider: #e0e0e1;
-  --c-gutter: #e2e2e3;
+  --c-border: #dddddd;
+  --c-divider: #dddddd;
+  --c-gutter: #dddddd;
 }
 
 .dark {
-  --c-divider: #2e3035;
-  --c-gutter: #000000;
+  --c-border: #262626;
+  --c-divider: #262626;
+  --c-gutter: #262626;
 }
 
 /**
@@ -230,8 +232,8 @@
 
 :root {
   --c-bg-1: var(--c-white);
-  --c-bg-2: var(--c-gray-3);
-  --c-bg-3: var(--c-gray-4);
+  --c-bg-2: oklch(0.98 0 0);
+  --c-bg-3: oklch(0.97 0 0);
 
   --c-bg-elv-1: #ffffff;
   --c-bg-elv-2: #f5f5f7;
@@ -268,9 +270,9 @@
 }
 
 .dark {
-  --c-bg-1: var(--c-gray-1);
-  --c-bg-2: var(--c-gray-3);
-  --c-bg-3: var(--c-gray-4);
+  --c-bg-1: oklch(0.145 0 0);
+  --c-bg-2: oklch(0.205 0 0);
+  --c-bg-3: oklch(0.269 0 0);
 
   --c-bg-elv-1: #000000;
   --c-bg-elv-2: #151517;
@@ -419,45 +421,45 @@
 
 :root {
   --button-mini-font-size: 12px;
-  --button-small-font-size: 12px;
+  --button-small-font-size: 14px;
   --button-medium-font-size: 14px;
   --button-large-font-size: 14px;
   --button-jumbo-font-size: 16px;
 
-  --button-fill-default-border-color: var(--c-border-mute-1);
+  --button-fill-default-border-color: var(--input-border-color);
   --button-fill-default-text-color: var(--c-text-1);
   --button-fill-default-content-color: var(--c-text-1);
-  --button-fill-default-bg-color: var(--c-bg-mute-1);
+  --button-fill-default-bg-color: var(--c-bg-1);
   --button-fill-default-count-bg-color: var(--c-gray-7);
   --button-fill-default-loader-color: var(--c-neutral-1);
-  --button-fill-default-hover-border-color: var(--c-border-mute-2);
+  --button-fill-default-box-shadow: var(--shadow-depth-1);
+  --button-fill-default-hover-border-color: var(--button-fill-default-border-color);
   --button-fill-default-hover-text-color: var(--c-text-1);
-  --button-fill-default-hover-bg-color: var(--c-bg-mute-2);
-  --button-fill-default-active-border-color: var(--c-border-mute-3);
+  --button-fill-default-hover-bg-color: color-mix(in oklab, var(--button-fill-default-border-color) 40%, transparent);
+  --button-fill-default-active-border-color: var(--button-fill-default-border-color);
   --button-fill-default-active-text-color: var(--c-text-1);
-  --button-fill-default-active-bg-color: var(--c-bg-mute-3);
-  --button-fill-default-disabled-border-color: var(--c-border-mute-1);
+  --button-fill-default-active-bg-color: color-mix(in oklab, var(--button-fill-default-border-color) 60%, transparent);
+  --button-fill-default-disabled-border-color: var(--input-border-color);
   --button-fill-default-disabled-text-color: var(--c-text-3);
   --button-fill-default-disabled-content-color: var(--c-text-3);
-  --button-fill-default-disabled-bg-color: var(--c-bg-mute-1);
+  --button-fill-default-disabled-bg-color: var(--button-fill-default-bg-color);
 
-  --button-fill-mute-border-color: var(--c-border-mute-1);
+  --button-fill-mute-border-color: var(--input-border-color);
   --button-fill-mute-text-color: var(--c-text-2);
   --button-fill-mute-content-color: var(--c-text-2);
-  --button-fill-mute-bg-color: var(--c-bg-mute-1);
+  --button-fill-mute-bg-color: var(--button-fill-default-bg-color);
   --button-fill-mute-count-bg-color: var(--c-gray-6);
-  --button-fill-default-count-bg-color: var(--c-gray-7);
-  --button-fill-mute-loader-color: var(--c-neutral);
-  --button-fill-mute-hover-border-color: var(--c-border-mute-2);
+  --button-fill-mute-loader-color: var(--c-text-2);
+  --button-fill-mute-hover-border-color: var(--input-border-color);
   --button-fill-mute-hover-text-color: var(--c-text-2);
-  --button-fill-mute-hover-bg-color: var(--c-bg-mute-2);
-  --button-fill-mute-active-border-color: var(--c-border-mute-3);
+  --button-fill-mute-hover-bg-color: var(--button-fill-default-hover-bg-color);
+  --button-fill-mute-active-border-color: var(--input-border-color);
   --button-fill-mute-active-text-color: var(--c-text-2);
-  --button-fill-mute-active-bg-color: var(--c-bg-mute-3);
-  --button-fill-mute-disabled-border-color: var(--c-border-mute-1);
+  --button-fill-mute-active-bg-color: var(--button-fill-default-active-bg-color);
+  --button-fill-mute-disabled-border-color: var(--button-fill-default-disabled-border-color);
   --button-fill-mute-disabled-text-color: var(--c-text-3);
   --button-fill-mute-disabled-content-color: var(--c-text-3);
-  --button-fill-mute-disabled-bg-color: var(--c-bg-mute-1);
+  --button-fill-mute-disabled-bg-color: var(--button-fill-default-disabled-bg-color);
 
   --button-fill-neutral-border-color: transparent;
   --button-fill-neutral-text-color: var(--c-text-inverse-1);
@@ -544,59 +546,59 @@
   --button-fill-success-disabled-content-color: var(--c-white-a2);
   --button-fill-success-disabled-bg-color: var(--c-green-8);
 
-  --button-fill-warning-border-color: var(--c-border-mute-1);
-  --button-fill-warning-text-color: var(--c-text-warning-1);
-  --button-fill-warning-content-color: var(--c-text-warning-1);
-  --button-fill-warning-bg-color: var(--c-bg-mute-1);
-  --button-fill-warning-loader-color: var(--c-neutral);
-  --button-fill-warning-count-bg-color: var(--c-bg-mute-3);
-  --button-fill-warning-hover-border-color: var(--c-border-warning-1);
-  --button-fill-warning-hover-text-color: var(--c-white);
-  --button-fill-warning-hover-bg-color: var(--c-bg-warning-1);
-  --button-fill-warning-active-border-color: var(--c-border-warning-2);
-  --button-fill-warning-active-text-color: var(--c-white);
-  --button-fill-warning-active-bg-color: var(--c-bg-warning-2);
-  --button-fill-warning-disabled-border-color: var(--c-border-mute-1);
-  --button-fill-warning-disabled-text-color: var(--c-text-warning-2);
-  --button-fill-warning-disabled-content-color: var(--c-text-warning-2);
-  --button-fill-warning-disabled-bg-color: var(--c-bg-mute-1);
-
-  --button-fill-danger-border-color: var(--c-border-mute-1);
-  --button-fill-danger-text-color: var(--c-text-danger-1);
-  --button-fill-danger-content-color: var(--c-text-danger-1);
-  --button-fill-danger-bg-color: var(--c-bg-mute-1);
-  --button-fill-danger-loader-color: var(--c-neutral);
-  --button-fill-danger-count-bg-color: var(--c-bg-mute-3);
-  --button-fill-danger-hover-border-color: var(--c-border-danger-1);
-  --button-fill-danger-hover-text-color: var(--c-white);
-  --button-fill-danger-hover-bg-color: var(--c-bg-danger-1);
-  --button-fill-danger-active-border-color: var(--c-border-danger-2);
-  --button-fill-danger-active-text-color: var(--c-white);
-  --button-fill-danger-active-bg-color: var(--c-bg-danger-2);
-  --button-fill-danger-disabled-border-color: var(--c-border-mute-1);
-  --button-fill-danger-disabled-text-color: var(--c-text-danger-2);
-  --button-fill-danger-disabled-content-color: var(--c-text-danger-2);
-  --button-fill-danger-disabled-bg-color: var(--c-bg-mute-1);
-
-  --button-outline-default-border-color: var(--c-border-mute-1);
+  --button-fill-warning-border-color: var(--c-border-warning-1);
+  --button-fill-warning-text-color: var(--c-white-1);
+  --button-fill-warning-content-color: var(--c-white-1);
+  --button-fill-warning-bg-color: var(--c-bg-warning-1);
+  --button-fill-warning-loader-color: var(--c-white-1);
+  --button-fill-warning-count-bg-color: var(--c-yellow-8);
+  --button-fill-warning-hover-border-color: var(--c-border-warning-2);
+  --button-fill-warning-hover-text-color: var(--c-white-1);
+  --button-fill-warning-hover-bg-color: var(--c-bg-warning-2);
+  --button-fill-warning-active-border-color: var(--c-border-warning-3);
+  --button-fill-warning-active-text-color: var(--c-white-1);
+  --button-fill-warning-active-bg-color: var(--c-bg-warning-3);
+  --button-fill-warning-disabled-border-color: var(--c-yellow-9);
+  --button-fill-warning-disabled-text-color: var(--c-white-a2);
+  --button-fill-warning-disabled-content-color: var(--c-white-a2);
+  --button-fill-warning-disabled-bg-color: var(--c-yellow-8);
+
+  --button-fill-danger-border-color: var(--c-border-danger-1);
+  --button-fill-danger-text-color: var(--c-white-1);
+  --button-fill-danger-content-color: var(--c-white-1);
+  --button-fill-danger-bg-color: var(--c-bg-danger-1);
+  --button-fill-danger-loader-color: var(--c-white-1);
+  --button-fill-danger-count-bg-color: var(--c-red-8);
+  --button-fill-danger-hover-border-color: var(--c-border-danger-2);
+  --button-fill-danger-hover-text-color: var(--c-white-1);
+  --button-fill-danger-hover-bg-color: var(--c-bg-danger-2);
+  --button-fill-danger-active-border-color: var(--c-border-danger-3);
+  --button-fill-danger-active-text-color: var(--c-white-1);
+  --button-fill-danger-active-bg-color: var(--c-bg-danger-3);
+  --button-fill-danger-disabled-border-color: var(--c-red-9);
+  --button-fill-danger-disabled-text-color: var(--c-white-a2);
+  --button-fill-danger-disabled-content-color: var(--c-white-a2);
+  --button-fill-danger-disabled-bg-color: var(--c-red-8);
+
+  --button-outline-default-border-color: var(--input-border-color);
   --button-outline-default-text-color: var(--c-text-1);
   --button-outline-default-content-color: var(--c-text-1);
   --button-outline-default-loader-color: var(--c-neutral-1);
   --button-outline-default-count-bg-color: var(--c-bg-mute-1);
-  --button-outline-default-hover-bg-color: var(--c-neutral-dimm-a1);
-  --button-outline-default-active-bg-color: var(--c-neutral-dimm-a2);
-  --button-outline-default-disabled-border-color: var(--c-border-mute-1);
+  --button-outline-default-hover-bg-color: var(--button-fill-default-hover-bg-color);
+  --button-outline-default-active-bg-color: var(--button-fill-default-active-bg-color);
+  --button-outline-default-disabled-border-color: var(--input-border-color);
   --button-outline-default-disabled-text-color: var(--c-text-3);
   --button-outline-default-disabled-content-color: var(--c-text-3);
 
-  --button-outline-mute-border-color: var(--c-border-mute-1);
+  --button-outline-mute-border-color: var(--input-border-color);
   --button-outline-mute-text-color: var(--c-text-2);
   --button-outline-mute-content-color: var(--c-text-2);
   --button-outline-mute-loader-color: var(--c-neutral-1);
   --button-outline-mute-count-bg-color: var(--c-bg-mute-1);
-  --button-outline-mute-hover-bg-color: var(--c-neutral-dimm-a1);
-  --button-outline-mute-active-bg-color: var(--c-neutral-dimm-a2);
-  --button-outline-mute-disabled-border-color: var(--c-border-mute-1);
+  --button-outline-mute-hover-bg-color: var(--button-fill-default-hover-bg-color);
+  --button-outline-mute-active-bg-color: var(--button-fill-default-active-bg-color);
+  --button-outline-mute-disabled-border-color: var(--input-border-color);
   --button-outline-mute-disabled-text-color: var(--c-text-3);
   --button-outline-mute-disabled-content-color: var(--c-text-3);
 
@@ -605,9 +607,9 @@
   --button-outline-neutral-content-color: var(--c-text-1);
   --button-outline-neutral-loader-color: var(--c-neutral-1);
   --button-outline-neutral-count-bg-color: var(--c-bg-mute-1);
-  --button-outline-neutral-hover-bg-color: var(--c-neutral-dimm-a1);
-  --button-outline-neutral-active-bg-color: var(--c-neutral-dimm-a2);
-  --button-outline-neutral-disabled-border-color: var(--c-neutral-3);
+  --button-outline-neutral-hover-bg-color: var(--button-fill-default-hover-bg-color);
+  --button-outline-neutral-active-bg-color: var(--button-fill-default-active-bg-color);
+  --button-outline-neutral-disabled-border-color: var(--button-fill-default-disabled-border-color);
   --button-outline-neutral-disabled-text-color: var(--c-text-3);
   --button-outline-neutral-disabled-content-color: var(--c-text-3);
 
@@ -680,24 +682,24 @@
   --button-text-default-text-color: var(--c-text-1);
   --button-text-default-content-color: var(--c-text-1);
   --button-text-default-count-bg-color: var(--c-bg-mute-1);
-  --button-text-default-hover-bg-color: var(--c-bg-mute-1);
-  --button-text-default-active-bg-color: var(--c-bg-mute-2);
+  --button-text-default-hover-bg-color: var(--button-fill-default-hover-bg-color);
+  --button-text-default-active-bg-color: var(--button-fill-default-active-bg-color);
   --button-text-default-disabled-text-color: var(--c-text-3);
   --button-text-default-disabled-content-color: var(--c-text-3);
 
   --button-text-mute-text-color: var(--c-text-2);
   --button-text-mute-content-color: var(--c-text-2);
   --button-text-mute-count-bg-color: var(--c-bg-mute-1);
-  --button-text-mute-hover-bg-color: var(--c-bg-mute-1);
-  --button-text-mute-active-bg-color: var(--c-bg-mute-2);
+  --button-text-mute-hover-bg-color: var(--button-fill-default-hover-bg-color);
+  --button-text-mute-active-bg-color: var(--button-fill-default-active-bg-color);
   --button-text-mute-disabled-text-color: var(--c-text-3);
   --button-text-mute-disabled-content-color: var(--c-text-3);
 
   --button-text-neutral-text-color: var(--c-text-1);
   --button-text-neutral-content-color: var(--c-text-1);
   --button-text-neutral-count-bg-color: var(--c-bg-mute-1);
-  --button-text-neutral-hover-bg-color: var(--c-neutral-dimm-a1);
-  --button-text-neutral-active-bg-color: var(--c-neutral-dimm-a2);
+  --button-text-neutral-hover-bg-color: var(--button-fill-default-hover-bg-color);
+  --button-text-neutral-active-bg-color: var(--button-fill-default-active-bg-color);
   --button-text-neutral-disabled-text-color: var(--c-text-3);
   --button-text-neutral-disabled-content-color: var(--c-text-3);
 
@@ -750,18 +752,27 @@
   --button-text-danger-disabled-content-color: var(--c-text-danger-3);
 }
 
+.dark {
+  --button-fill-default-bg-color: color-mix(in oklab, var(--button-fill-default-border-color) 30%, transparent);
+  --button-fill-default-box-shadow: none;
+  --button-fill-default-hover-bg-color: color-mix(in oklab, var(--button-fill-default-border-color) 50%, transparent);
+  --button-fill-default-active-bg-color: color-mix(in oklab, var(--button-fill-default-border-color) 70%, transparent);
+  --button-fill-default-disabled-border-color: var(--c-border);
+  --button-fill-default-disabled-bg-color: var(--button-fill-default-bg-color);
+}
+
 /**
  * Component: Pill
  * -------------------------------------------------------------------------- */
 
 :root {
-  --pill-dimm-default-border-color: var(--c-divider);
+  --pill-dimm-default-border-color: var(--c-border);
   --pill-dimm-default-text-color: var(--c-text-1);
   --pill-dimm-default-bg-color: transparent;
   --pill-dimm-default-hover-bg-color: var(--c-bg-2);
   --pill-dimm-default-active-bg-color: var(--c-bg-3);
 
-  --pill-dimm-mute-border-color: var(--c-divider);
+  --pill-dimm-mute-border-color: var(--c-border);
   --pill-dimm-mute-text-color: var(--c-text-2);
   --pill-dimm-mute-bg-color: transparent;
   --pill-dimm-mute-hover-bg-color: var(--c-bg-2);
@@ -885,20 +896,21 @@
  * -------------------------------------------------------------------------- */
 
 :root {
+  --input-border-color: oklch(0.922 0 0);
   --input-label-color: var(--c-text-1);
-  --input-border-color: var(--c-border-mute-1);
   --input-value-color: var(--c-text-1);
   --input-placeholder-color: var(--c-text-3);
-  --input-bg-color: var(--c-bg-elv-2);
-  --input-hover-border-color: var(--c-border-mute-3);
+  --input-bg-color: var(--c-bg-1);
+  --input-box-shadow: var(--shadow-depth-1);
+  --input-hover-border-color: oklch(0.708 0 0);
   --input-focus-border-color: var(--c-border-info-1);
   --input-error-text-color: var(--c-text-danger-1);
   --input-error-border-color: var(--c-border-danger-1);
   --input-warning-text-color: var(--c-text-warning-1);
   --input-warning-border-color: var(--c-border-warning-1);
-  --input-disabled-border-color: var(--c-border-mute-1);
+  --input-disabled-border-color: var(--input-border-color);
   --input-disabled-value-color: var(--c-text-1);
-  --input-disabled-bg-color: var(--c-bg-mute-1);
+  --input-disabled-bg-color: color-mix(in oklab, var(--input-disabled-border-color) 50%, transparent);
 
   --input-mini-font-size: 14px;
   --input-mini-label-font-size: 12px;
@@ -914,3 +926,11 @@
   --input-switch-disabled-toggle-color: var(--c-fg-gray-1);
   --input-switch-disabled-bg-color: var(--c-bg-mute-1);
 }
+
+.dark {
+  --input-border-color: oklch(1 0 0 / 15%);
+  --input-bg-color: color-mix(in oklab, var(--input-border-color) 30%, transparent);
+  --input-hover-border-color: oklch(0.556 0 0);
+  --input-disabled-border-color: var(--c-border);
+  --input-disabled-bg-color: color-mix(in oklab, var(--input-disabled-border-color) 80%, transparent);
+}

package/lib/support/Http.ts

@@ -0,0 +1,42 @@
+export function objectToFormData(
+  obj: any,
+  form?: FormData,
+  namespace?: string,
+  onlyFiles = false
+): FormData {
+  const fd = form || new FormData()
+
+  if (obj == null) {
+    return fd
+  }
+
+  let formKey: string
+
+  Object.keys(obj).forEach((property) => {
+    if (namespace) {
+      formKey = `${namespace}[${property}]`
+    } else {
+      formKey = property
+    }
+
+    if (obj[property] === undefined) {
+      return
+    }
+
+    if (
+      typeof obj[property] === 'object'
+      && !(obj[property] instanceof Blob)
+      && obj[property] !== null
+    ) {
+      objectToFormData(obj[property], fd, formKey, onlyFiles)
+    } else {
+      const value = obj[property] === null ? '' : obj[property]
+      if (onlyFiles && !(value instanceof Blob)) {
+        return
+      }
+      fd.append(formKey, value)
+    }
+  })
+
+  return fd
+}