@floegence/floe-webapp-core 0.57.1 → 0.59.0

package/dist/components/ui/FloatingWindow.js

@@ -1,19 +1,20 @@
-import { createComponent as l, Portal as Je, spread as _e, mergeProps as Se, memo as B, insert as u, effect as f, setAttribute as Ze, addEventListener as b, className as w, template as s, use as Ie, delegateEvents as Ke } from "solid-js/web";
-import { createSignal as g, createUniqueId as Qe, onCleanup as C, onMount as et, createEffect as _, untrack as Pe, Show as z, batch as Re } from "solid-js";
+import { createComponent as l, Portal as Ge, spread as _e, mergeProps as Se, memo as B, insert as c, effect as f, setAttribute as Je, addEventListener as b, className as w, template as s, use as Ie, delegateEvents as Qe } from "solid-js/web";
+import { createSignal as g, createUniqueId as Ze, onCleanup as C, onMount as Ke, createEffect as _, untrack as Pe, Show as z, batch as Re } from "solid-js";
+import { useMediaQuery as et } from "../../hooks/useMediaQuery.js";
 import { cn as D } from "../../utils/cn.js";
-import { useLayout as tt } from "../../context/LayoutContext.js";
+import { useOptionalLayout as tt } from "../../context/LayoutContext.js";
 import { Button as Ae } from "./Button.js";
 import { Restore as nt, Maximize as it, X as ot } from "../icons/index.js";
 import { startHotInteraction as rt } from "../../utils/hotInteraction.js";
 import { startPointerSession as lt } from "./pointerSession.js";
-import { resolveFloatingWindowViewport as K, normalizeFloatingWindowRect as at, resolveFloatingWindowRect as st } from "./floatingWindowGeometry.js";
+import { resolveFloatingWindowViewport as Z, normalizeFloatingWindowRect as at, resolveFloatingWindowRect as st } from "./floatingWindowGeometry.js";
 import { createFloatingPresence as dt } from "./floatingPresence.js";
 import { LOCAL_INTERACTION_SURFACE_ATTR as Ee } from "./localInteractionSurface.js";
-import { readSurfaceSafeArea as ct, resolveFloatingBoundary as ut } from "./surfaceFloatingBoundary.js";
+import { readSurfaceSafeArea as ut, resolveFloatingBoundary as ct } from "./surfaceFloatingBoundary.js";
 import { SURFACE_PORTAL_LAYER_ATTR as ft, resolveSurfacePortalHost as ht, SURFACE_FLOATING_LAYER_ATTR as wt } from "./dialogSurfaceScope.js";
 var gt = /* @__PURE__ */ s("<span hidden>"), mt = /* @__PURE__ */ s('<h2 class="text-xs leading-none font-medium truncate select-none">'), vt = /* @__PURE__ */ s('<div data-floe-floating-window-header-actions=true class="flex shrink-0 cursor-default items-center gap-1"><span aria-hidden=true class="mx-2 h-4 w-px shrink-0 bg-border">'), yt = /* @__PURE__ */ s('<div data-floe-floating-window-footer=true class="flex items-center justify-end gap-2 p-3 border-t border-border">'), xt = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=n style=touch-action:none>"), bt = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=s style=touch-action:none>"), zt = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=e style=touch-action:none>"), pt = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=w style=touch-action:none>"), $t = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=ne style=touch-action:none>"), _t = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=nw style=touch-action:none>"), St = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=se style=touch-action:none>"), It = /* @__PURE__ */ s("<div data-floe-floating-window-resize-handle=sw style=touch-action:none>"), Pt = /* @__PURE__ */ s('<div data-floe-geometry-surface=floating-window><div data-floe-dialog-surface-host=true><div data-floe-floating-window-titlebar=true style=touch-action:none><div class="flex-1 min-w-0 px-2"></div><div class="flex h-full shrink-0 items-stretch"></div></div><div data-floe-floating-window-content=true class="flex-1 overflow-auto p-3">');
-function Ht(n) {
-  const Q = () => n.resizable ?? !0, H = () => n.maximizable ?? !0, ee = () => n.draggable ?? !0, te = () => n.minSize ?? {
+function Yt(n) {
+  const K = () => n.resizable ?? !0, H = () => n.maximizable ?? !0, ee = () => n.draggable ?? !0, te = () => n.minSize ?? {
     width: 200,
     height: 150
   }, ne = () => n.maxSize ?? {
@@ -21,21 +22,21 @@ function Ht(n) {
     height: 1 / 0
   };
   let N;
-  const Ce = ct(), [F, ie] = g({}), [Fe, oe] = g(1 / 0), [Y, re] = g(!0), h = () => !!(n.compactBelow && Fe() < n.compactBelow), S = () => ({
+  const Ce = ut(), [F, ie] = g({}), [Fe, oe] = g(1 / 0), [Y, re] = g(!0), h = () => !!(n.compactBelow && Fe() < n.compactBelow), S = () => ({
     top: (F().top ?? 0) + (n.viewportInsets?.top ?? 0),
     right: (F().right ?? 0) + (n.viewportInsets?.right ?? 0),
     bottom: (F().bottom ?? 0) + (n.viewportInsets?.bottom ?? 0),
     left: (F().left ?? 0) + (n.viewportInsets?.left ?? 0)
-  }), Le = () => n.zIndex ?? 100, ke = Qe(), Me = tt(), L = () => Me.isMobile(), le = 16, ae = () => `floating-window-${ke}-title`, [q, Te] = g(n.defaultPosition ?? {
+  }), Le = () => n.zIndex ?? 100, ke = Ze(), L = tt()?.isMobile ?? et("(max-width: 767px)"), le = 16, ae = () => `floating-window-${ke}-title`, [q, Me] = g(n.defaultPosition ?? {
     x: 0,
     y: 0
-  }), [X, We] = g(n.defaultSize ?? {
+  }), [X, Oe] = g(n.defaultSize ?? {
     width: 400,
     height: 300
-  }), [d, se] = g(!1), [k, de] = g(!1), [M, ce] = g(!1), [Oe, U] = g(!1), I = dt({
+  }), [d, se] = g(!1), [k, de] = g(!1), [M, ue] = g(!1), [Te, U] = g(!1), I = dt({
     open: () => n.open
   });
-  let ue = {
+  let ce = {
     x: 0,
     y: 0
   }, fe = {
@@ -51,10 +52,10 @@ function Ht(n) {
     y: 0,
     width: 0,
     height: 0
-  }, ge = "se", a, c = null, T, m = null, E = {
+  }, ge = "se", a, u = null, O, m = null, E = {
     x: 0,
     y: 0
-  }, P = null, W = null, j = !1, p = {
+  }, P = null, T = null, j = !1, p = {
     x: n.defaultPosition?.x ?? 0,
     y: n.defaultPosition?.y ?? 0,
     width: n.defaultSize?.width ?? 400,
@@ -66,7 +67,7 @@ function Ht(n) {
     v = {
       ...e
     };
-    const t = K({
+    const t = Z({
       width: window.innerWidth,
       height: window.innerHeight
     }, S());
@@ -74,7 +75,7 @@ function Ht(n) {
       x: t.width > e.width ? (e.x - t.x) / (t.width - e.width) : $?.x ?? 0.5,
       y: t.height > e.height ? (e.y - t.y) / (t.height - e.height) : $?.y ?? 0.5
     };
-  }, Be = {
+  }, We = {
     n: "ns-resize",
     s: "ns-resize",
     e: "ew-resize",
@@ -85,17 +86,17 @@ function Ht(n) {
     sw: "nesw-resize"
   }, V = (e, t) => {
     if (!e) {
-      W?.(), W = null;
+      T?.(), T = null;
       return;
     }
-    W?.(), W = rt({
+    T?.(), T = rt({
       kind: m === "resize" ? "resize" : "drag",
       cursor: t,
       lockUserSelect: !0
     });
   }, ve = (e) => {
     p = e, a && (a.style.transform = `translate3d(${e.x}px, ${e.y}px, 0)`, a.style.width = `${e.width}px`, a.style.height = `${e.height}px`);
-  }, De = () => {
+  }, Be = () => {
     const e = q(), t = X();
     return {
       x: e.x,
@@ -104,27 +105,27 @@ function Ht(n) {
       height: t.height
     };
   }, G = (e) => {
-    p = e, Te((t) => t.x === e.x && t.y === e.y ? t : {
+    p = e, Me((t) => t.x === e.x && t.y === e.y ? t : {
       x: e.x,
       y: e.y
-    }), We((t) => t.width === e.width && t.height === e.height ? t : {
+    }), Oe((t) => t.width === e.width && t.height === e.height ? t : {
       width: e.width,
       height: e.height
     });
-  }, He = () => {
+  }, De = () => {
     try {
       a?.focus({
         preventScroll: !0
       });
     } catch {
     }
-  }, Ne = (e) => {
+  }, He = (e) => {
     const t = e instanceof Element ? e : null;
     return t ? t.closest('button, input, select, textarea, a, [role="button"], [tabindex]:not([tabindex="-1"])') === null : !0;
-  }, J = (e) => !!a && e instanceof Node && a.contains(e), Ye = (e) => {
+  }, J = (e) => !!a && e instanceof Node && a.contains(e), Ne = (e) => {
     const o = (e instanceof Element ? e : null)?.closest('[role="menu"]')?.closest(`[${wt}="true"]`);
     return !!(o && a?.contains(o));
-  }, qe = () => {
+  }, Ye = () => {
     if (!a) return null;
     const e = a.getBoundingClientRect();
     return {
@@ -134,10 +135,10 @@ function Ht(n) {
       height: e.height
     };
   }, ye = () => {
-    n.open && (c === null || m === null || typeof window > "u" || ve(st({
+    n.open && (u === null || m === null || typeof window > "u" || ve(st({
       mode: m,
       pointer: E,
-      dragStartPos: ue,
+      dragStartPos: ce,
       dragStartRect: fe,
       resizeStartPos: he,
       resizeStartRect: we,
@@ -159,7 +160,7 @@ function Ht(n) {
       height: window.innerHeight
     };
     if (d() || h()) {
-      G(K(t, S()));
+      G(Z(t, S()));
       return;
     }
     let r = at({
@@ -173,7 +174,7 @@ function Ht(n) {
       center: e?.center ?? !1
     });
     if (n.boundary !== void 0 && $ && !e?.center) {
-      const o = K(t, S());
+      const o = Z(t, S());
       r = {
         ...r,
         x: o.x + $.x * Math.max(0, o.width - r.width),
@@ -189,7 +190,7 @@ function Ht(n) {
     }
   }, xe = (e) => {
     P !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(P), P = null), e && ye();
-    const t = e ? qe() ?? p : null;
+    const t = e ? Ye() ?? p : null;
     Re(() => {
       if (t) {
         G(t);
@@ -199,18 +200,18 @@ function Ht(n) {
         };
         me(t), m === "drag" && Object.assign(v, r);
       }
-      c = null, m = null, de(!1), ce(!1);
-    }), V(!1, ""), T = void 0;
-  }, Z = (e = !1) => {
-    T ? T.stop({
+      u = null, m = null, de(!1), ue(!1);
+    }), V(!1, ""), O = void 0;
+  }, Q = (e = !1) => {
+    O ? O.stop({
       commit: e
     }) : xe(e);
   };
-  C(() => Z(!1)), et(() => {
+  C(() => Q(!1)), Ke(() => {
     let e = 0;
     const t = () => {
       if (n.boundary !== void 0) {
-        const o = ut(ht({
+        const o = ct(ht({
           owner: N
         }), n.boundary, Ce), A = o ? {
           top: o.top,
@@ -219,7 +220,7 @@ function Ht(n) {
           bottom: window.innerHeight - o.bottom
         } : {};
         Re(() => {
-          re(!!(o && o.width > 16 && o.height > 16)), oe(o?.width ?? 0), ie((O) => JSON.stringify(O) === JSON.stringify(A) ? O : A);
+          re(!!(o && o.width > 16 && o.height > 16)), oe(o?.width ?? 0), ie((W) => JSON.stringify(W) === JSON.stringify(A) ? W : A);
         });
       } else
         re(!0), oe(window.innerWidth), ie((o) => Object.keys(o).length ? {} : o);
@@ -229,7 +230,7 @@ function Ht(n) {
       center: !n.defaultPosition
     });
     const r = () => {
-      c === null && R({
+      u === null && R({
         center: !1
       });
     };
@@ -248,7 +249,7 @@ function Ht(n) {
     }
     requestAnimationFrame(t);
   }), _(() => {
-    S(), h(), !(!n.open || !j || c !== null) && Pe(() => R({
+    S(), h(), !(!n.open || !j || u !== null) && Pe(() => R({
       center: !1
     }));
   }), _(() => {
@@ -262,12 +263,12 @@ function Ht(n) {
     const e = (t) => {
       if (t.key !== "Escape") return;
       const r = typeof document < "u" ? document.activeElement : null;
-      !J(t.target) && !J(r) || Ye(t.target) || (t.preventDefault(), typeof t.stopImmediatePropagation == "function" ? t.stopImmediatePropagation() : t.stopPropagation(), n.onOpenChange(!1));
+      !J(t.target) && !J(r) || Ne(t.target) || (t.preventDefault(), typeof t.stopImmediatePropagation == "function" ? t.stopImmediatePropagation() : t.stopPropagation(), n.onOpenChange(!1));
     };
     document.addEventListener("keydown", e, !0), C(() => document.removeEventListener("keydown", e, !0));
   }), _(() => {
     if (!n.open) {
-      U(!1), Z(!1);
+      U(!1), Q(!1);
       return;
     }
     U(!0);
@@ -285,11 +286,11 @@ function Ht(n) {
     });
   }), _(() => {
     if (!n.open) return;
-    const e = De();
-    c === null ? ve(e) : p = e;
+    const e = Be();
+    u === null ? ve(e) : p = e;
   });
-  const Xe = (e) => {
-    !ee() || d() || h() || c !== null || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"], [data-floe-floating-window-header-actions]') || (e.preventDefault(), c = e.pointerId, m = "drag", de(!0), ue = {
+  const qe = (e) => {
+    !ee() || d() || h() || u !== null || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"], [data-floe-floating-window-header-actions]') || (e.preventDefault(), u = e.pointerId, m = "drag", de(!0), ce = {
       x: e.clientX,
       y: e.clientY
     }, fe = {
@@ -299,7 +300,7 @@ function Ht(n) {
       y: e.clientY
     }, V(!0, "grabbing"), ze(e));
   }, y = (e) => (t) => {
-    !Q() || d() || h() || c !== null || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), t.stopPropagation(), c = t.pointerId, m = "resize", ce(!0), ge = e, he = {
+    !K() || d() || h() || u !== null || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), t.stopPropagation(), u = t.pointerId, m = "resize", ue(!0), ge = e, he = {
       x: t.clientX,
       y: t.clientY
     }, we = {
@@ -307,11 +308,11 @@ function Ht(n) {
     }, E = {
       x: t.clientX,
       y: t.clientY
-    }, V(!0, Be[e]), ze(t));
+    }, V(!0, We[e]), ze(t));
   }, be = () => {
     P = null, ye();
-  }, Ue = (e) => {
-    if (!(c === null || e.pointerId !== c) && m !== null && (E = {
+  }, Xe = (e) => {
+    if (!(u === null || e.pointerId !== u) && m !== null && (E = {
       x: e.clientX,
       y: e.clientY
     }, P === null)) {
@@ -322,10 +323,10 @@ function Ht(n) {
       P = requestAnimationFrame(be);
     }
   }, ze = (e) => {
-    T = lt({
+    O = lt({
       pointerEvent: e,
       captureEl: a,
-      onMove: Ue,
+      onMove: Xe,
       onEnd: ({
         commit: t,
         reason: r,
@@ -338,11 +339,11 @@ function Ht(n) {
       }
     });
   }, pe = () => {
-    !H() || h() || (c !== null && Z(!0), se(!d()), R());
-  }, je = (e) => {
+    !H() || h() || (u !== null && Q(!0), se(!d()), R());
+  }, Ue = (e) => {
     e.target?.closest("button, [data-floe-floating-window-header-actions]") || pe();
-  }, Ve = (e) => {
-    Ne(e.target) && He();
+  }, je = (e) => {
+    He(e.target) && De();
   }, x = (e) => D("absolute z-10", {
     n: "cursor-ns-resize top-0 left-2 right-2 h-1",
     s: "cursor-ns-resize bottom-0 left-2 right-2 h-1",
@@ -361,9 +362,9 @@ function Ht(n) {
       return I.mounted();
     },
     get children() {
-      return l(Je, {
+      return l(Ge, {
         get children() {
-          var e = Pt(), t = e.firstChild, r = t.firstChild, o = r.firstChild, A = o.nextSibling, O = r.nextSibling, $e = a;
+          var e = Pt(), t = e.firstChild, r = t.firstChild, o = r.firstChild, A = o.nextSibling, W = r.nextSibling, $e = a;
           return typeof $e == "function" ? Ie($e, e) : a = e, _e(e, Se({
             get "data-floating-presence"() {
               return I.state();
@@ -398,7 +399,7 @@ function Ht(n) {
               return B(() => !!n.title)() ? ae() : void 0;
             },
             tabIndex: -1,
-            onPointerDown: Ve
+            onPointerDown: je
           }), !1, !0), _e(t, Se({
             [ft]: "true"
           }, {
@@ -408,7 +409,7 @@ function Ht(n) {
               return k() || M() ? "true" : void 0;
             },
             get "data-floe-floating-window-state"() {
-              return Oe() ? "active" : "inactive";
+              return Te() ? "active" : "inactive";
             }
           }, {
             [Ee]: "true"
@@ -424,23 +425,23 @@ function Ht(n) {
             get "data-floating-presence"() {
               return I.state();
             }
-          }), !1, !0), r.$$dblclick = je, r.$$pointerdown = Xe, u(o, l(z, {
+          }), !1, !0), r.$$dblclick = Ue, r.$$pointerdown = qe, c(o, l(z, {
             get when() {
               return n.title;
             },
             get children() {
               var i = mt();
-              return u(i, () => n.title), f(() => Ze(i, "id", ae())), i;
+              return c(i, () => n.title), f(() => Je(i, "id", ae())), i;
             }
-          })), u(r, l(z, {
+          })), c(r, l(z, {
             get when() {
               return n.headerActions;
             },
             get children() {
-              var i = vt(), Ge = i.firstChild;
-              return u(i, () => n.headerActions, Ge), i;
+              var i = vt(), Ve = i.firstChild;
+              return c(i, () => n.headerActions, Ve), i;
             }
-          }), A), u(A, l(z, {
+          }), A), c(A, l(z, {
             get when() {
               return B(() => !!H())() && !h();
             },
@@ -475,7 +476,7 @@ function Ht(n) {
                 }
               });
             }
-          }), null), u(A, l(Ae, {
+          }), null), c(A, l(Ae, {
             variant: "ghost-destructive",
             size: "icon",
             "data-floe-floating-window-control": "close",
@@ -491,17 +492,17 @@ function Ht(n) {
                 class: "w-3.5 h-3.5"
               });
             }
-          }), null), u(O, () => n.children), u(t, l(z, {
+          }), null), c(W, () => n.children), c(t, l(z, {
             get when() {
               return n.footer;
             },
             get children() {
               var i = yt();
-              return u(i, () => n.footer), i;
+              return c(i, () => n.footer), i;
             }
-          }), null), u(t, l(z, {
+          }), null), c(t, l(z, {
             get when() {
-              return B(() => !!(Q() && !d()))() && !h();
+              return B(() => !!(K() && !d()))() && !h();
             },
             get children() {
               return [(() => {
@@ -543,7 +544,7 @@ function Ht(n) {
     }
   })];
 }
-Ke(["pointerdown", "dblclick"]);
+Qe(["pointerdown", "dblclick"]);
 export {
-  Ht as FloatingWindow
+  Yt as FloatingWindow
 };

package/dist/components/ui/picker/PickerBase.js

@@ -187,6 +187,7 @@ function ye(t) {
                   p[m()] = c;
                 }, o), i(o, n(J, {
                   item: e,
+                  size: 16,
                   class: "h-4 w-4 shrink-0"
                 }), u), i(u, () => e.name), i(o, n(V, {
                   class: "h-3 w-3 shrink-0 text-muted-foreground"

package/dist/context/LayoutContext.d.ts

@@ -24,5 +24,5 @@ export interface LayoutContextValue {
 }
 export declare const LayoutProvider: (props: {
     children: import("solid-js").JSX.Element;
-}) => import("solid-js").JSX.Element, useLayout: () => LayoutContextValue;
+}) => import("solid-js").JSX.Element, useLayout: () => LayoutContextValue, useOptionalLayout: () => LayoutContextValue | undefined;
 export declare function createLayoutService(): LayoutContextValue;

package/dist/context/LayoutContext.js

@@ -4,13 +4,14 @@ import { createSimpleContext as u } from "./createSimpleContext.js";
 import { useResolvedFloeConfig as v } from "./FloeConfigContext.js";
 const {
   Provider: x,
-  use: C
+  use: C,
+  useOptional: L
 } = u({
   name: "Layout",
   init: g
 });
 function g() {
-  const n = v(), i = () => n.config.layout, p = () => typeof window > "u" ? !1 : window.matchMedia(i().mobileQuery).matches, s = n.persist.load(i().storageKey, {}), h = {
+  const d = v(), i = () => d.config.layout, p = () => typeof window > "u" ? !1 : window.matchMedia(i().mobileQuery).matches, s = d.persist.load(i().storageKey, {}), h = {
     sidebar: {
       width: s.sidebar?.width ?? i().sidebar.defaultWidth,
       activeTab: s.sidebar?.activeTab ?? i().sidebar.defaultActiveTab,
@@ -37,7 +38,7 @@ function g() {
         height: t.terminal.height
       }
     };
-    n.persist.debouncedSave(i().storageKey, e);
+    d.persist.debouncedSave(i().storageKey, e);
   }), {
     // Sidebar accessors
     sidebarWidth: () => t.sidebar.width,
@@ -51,10 +52,10 @@ function g() {
       a.sidebar.width = m(e);
     })),
     setSidebarActiveTab: (e, a) => {
-      o(r((d) => {
-        d.sidebar.activeTab = e, a?.openSidebar !== !1 && (d.sidebar.collapsed = !1);
-      })), a?.visibilityMotion === "instant" && b(r((d) => {
-        d.motion = "instant", d.revision += 1;
+      o(r((n) => {
+        n.sidebar.activeTab = e, a?.openSidebar !== !1 && (n.sidebar.collapsed = !1);
+      })), a?.visibilityMotion === "instant" && b(r((n) => {
+        n.motion = "instant", n.revision += 1;
       }));
     },
     setSidebarCollapsed: (e) => o(r((a) => {
@@ -84,5 +85,6 @@ function g() {
 export {
   x as LayoutProvider,
   g as createLayoutService,
-  C as useLayout
+  C as useLayout,
+  L as useOptionalLayout
 };

package/dist/file-icons.css

@@ -0,0 +1,43 @@
+/* Approved file artwork colors. Brand palettes are embedded in SVG geometry. */
+[data-file-icon-type] {
+  --floe-icon-surface: #fff;
+  --floe-icon-raised: #edf1f4;
+  --floe-icon-paper-top: #fff;
+  --floe-icon-paper-bottom: #e6eef4;
+  --floe-icon-paper-stroke: #96a9b7;
+  --floe-icon-fold: #d4e0e9;
+  --floe-icon-white: #fff;
+  --floe-icon-yellow: #d8a43c;
+  --floe-icon-orange: #cd7b37;
+  --floe-icon-red: #d86873;
+  --floe-icon-blue: #4e92d2;
+  --floe-icon-cyan: #399db7;
+  --floe-icon-green: #42a578;
+  --floe-icon-purple: #9273c2;
+  --floe-icon-neutral: #788d9b;
+  --floe-icon-folder: #dcb156;
+  --floe-icon-ink: #15202a;
+  --floe-icon-monochrome: #000000;
+  display: block;
+  flex-shrink: 0;
+}
+.dark [data-file-icon-type] {
+  --floe-icon-surface: #15181b;
+  --floe-icon-raised: #1c2024;
+  --floe-icon-paper-top: #303d47;
+  --floe-icon-paper-bottom: #1c252c;
+  --floe-icon-paper-stroke: #60727f;
+  --floe-icon-fold: #40515e;
+  --floe-icon-white: #f6f8fb;
+  --floe-icon-yellow: #e8c15c;
+  --floe-icon-orange: #e69b5d;
+  --floe-icon-red: #ec7d86;
+  --floe-icon-blue: #74b1eb;
+  --floe-icon-cyan: #6bc4d8;
+  --floe-icon-green: #77c9a4;
+  --floe-icon-purple: #b49be1;
+  --floe-icon-neutral: #aab6bf;
+  --floe-icon-folder: #ecc26b;
+  --floe-icon-ink: #15202a;
+  --floe-icon-monochrome: #ffffff;
+}

package/dist/floe.css

@@ -1,5 +1,6 @@
 @import './input-focus.css';
 @import './surface.css';
+@import './file-icons.css';
 /*
  * Floe design tokens + base styles + custom utilities.
  *