@marimo-team/islands 0.24.1-dev65 → 0.24.1-dev66

package/dist/{swiper-component-CxICHnAu.js → swiper-component-deYugN58.js}

@@ -1,9 +1,9 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { c as t, h as n, t as r } from "./button-DOCIubLd.js";
+import { c as t, h as n, t as r } from "./button-DlqUC8W-.js";
 import { t as i } from "./react-DMWcHin-.js";
 import { t as a } from "./compiler-runtime-CAH9RLw2.js";
 import { t as o } from "./jsx-runtime-CpoKNRgu.js";
-import { t as s } from "./useIframeCapabilities-DEIrjkAH.js";
+import { t as s } from "./useIframeCapabilities-BmYPLMe1.js";
 /* empty css                */
 //#region ../node_modules/.pnpm/swiper@12.1.2/node_modules/swiper/shared/ssr-window.esm.mjs
 var c = /* @__PURE__ */ e(i(), 1), l = a();

package/dist/{toDate-Mzvy7JMZ.js → toDate-BfSgxzgl.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { g as t } from "./button-DOCIubLd.js";
+import { g as t } from "./button-DlqUC8W-.js";
 import { t as n } from "./compiler-runtime-CAH9RLw2.js";
-import { u as r } from "./dist-DTSuOdDc.js";
-import { E as i, _ as a, a as o, b as s } from "./useTheme-3Ul40fOV.js";
+import { u as r } from "./dist-wdOJ5T7-.js";
+import { E as i, _ as a, a as o, b as s } from "./useTheme-T2IIlG9u.js";
 import { t as c } from "./invariant-DLmrl-hA.js";
 var l = r("circle-question-mark", [
 	["circle", {

package/dist/{tooltip-rwx3Qbw6.js → tooltip-7p_32zdw.js}

@@ -1,10 +1,10 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { d as t, h as n, p as r } from "./button-DOCIubLd.js";
+import { d as t, h as n, p as r } from "./button-DlqUC8W-.js";
 import { t as i } from "./react-DMWcHin-.js";
 import { t as a } from "./compiler-runtime-CAH9RLw2.js";
-import { a as o, i as s, n as c, r as l, s as u, t as d } from "./dist-DTSuOdDc.js";
+import { a as o, i as s, n as c, r as l, s as u, t as d } from "./dist-wdOJ5T7-.js";
 import { t as f } from "./jsx-runtime-CpoKNRgu.js";
-import { Bc as p, Dc as m, Ec as h, Hc as ee, Kc as g, Lc as _, Pc as v, Vc as y, Wc as b, kc as x, qc as S } from "./schemas-DeBAkn_c.js";
+import { Bc as p, Dc as m, Ec as h, Hc as ee, Kc as g, Lc as _, Pc as v, Vc as y, Wc as b, kc as x, qc as S } from "./schemas-JTyiKlcH.js";
 //#region ../node_modules/.pnpm/@radix-ui+react-tooltip@1.2.8_@types+react-dom@19.2.3_@types+react@19.2.10__@types+reac_6c936392a1aa34d496e116dc55299197/node_modules/@radix-ui/react-tooltip/dist/index.mjs
 var C = /* @__PURE__ */ e(i(), 1), w = f(), [T, E] = g("Tooltip", [o]), D = o(), O = "TooltipProvider", te = 700, k = "tooltip.open", [ne, A] = T(O), j = (e) => {
 	let { __scopeTooltip: t, delayDuration: n = te, skipDelayDuration: r = 300, disableHoverableContent: i = !1, children: a } = e, o = C.useRef(!0), s = C.useRef(!1), c = C.useRef(0);

package/dist/{types-D8U7wKuc.js → types-eyYyHvz7.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { u as t } from "./dist-DTSuOdDc.js";
+import { u as t } from "./dist-wdOJ5T7-.js";
 var n = t("pencil", [["path", {
 	d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
 	key: "1a8usu"

package/dist/{useAsyncData-VgHmkX1q.js → useAsyncData-C4YwNjhG.js}

@@ -1,7 +1,7 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { t } from "./react-DMWcHin-.js";
 import { t as n } from "./compiler-runtime-CAH9RLw2.js";
-import { j as r } from "./useTheme-3Ul40fOV.js";
+import { j as r } from "./useTheme-T2IIlG9u.js";
 import { t as i } from "./invariant-DLmrl-hA.js";
 //#region src/hooks/useAsyncData.ts
 var a = n(), o = /* @__PURE__ */ e(t(), 1), s = {

package/dist/{useDateFormatter-DjRKOAkR.js → useDateFormatter-CcY1uXEk.js}

@@ -1,7 +1,7 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { t } from "./react-DMWcHin-.js";
-import { u as n } from "./dist-DTSuOdDc.js";
-import { E as r } from "./select-Bakm9EUs.js";
+import { u as n } from "./dist-wdOJ5T7-.js";
+import { E as r } from "./select-DQ9jU_B_.js";
 var i = n("chart-pie", [["path", {
 	d: "M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z",
 	key: "pzmjnu"

package/dist/{useDeepCompareMemoize-CcanIsdI.js → useDeepCompareMemoize-B2mdYxCr.js}

@@ -1,6 +1,6 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { t } from "./react-DMWcHin-.js";
-import { A as n } from "./useTheme-3Ul40fOV.js";
+import { A as n } from "./useTheme-T2IIlG9u.js";
 //#region src/hooks/useDeepCompareMemoize.ts
 var r = /* @__PURE__ */ e(t(), 1);
 function i(e) {

package/dist/{useIframeCapabilities-DEIrjkAH.js → useIframeCapabilities-BmYPLMe1.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./compiler-runtime-CAH9RLw2.js";
-import { t } from "./capabilities-ehiSCVl-.js";
+import { t } from "./capabilities-CGBDXz_E.js";
 //#region src/hooks/useIframeCapabilities.ts
 var n = e();
 function r() {

package/dist/{useLifecycle-ClOphI_o.js → useLifecycle-hEcsyQ2P.js}

@@ -1,10 +1,10 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { g as t, h as n, r } from "./button-DOCIubLd.js";
+import { g as t, h as n, r } from "./button-DlqUC8W-.js";
 import { t as i } from "./react-DMWcHin-.js";
 import { t as a } from "./compiler-runtime-CAH9RLw2.js";
-import { u as o } from "./dist-DTSuOdDc.js";
+import { u as o } from "./dist-wdOJ5T7-.js";
 import { t as s } from "./jsx-runtime-CpoKNRgu.js";
-import { E as c, w as l } from "./useTheme-3Ul40fOV.js";
+import { E as c, w as l } from "./useTheme-T2IIlG9u.js";
 var u = o("calendar", [
 	["path", {
 		d: "M8 2v4",

package/dist/{useTheme-3Ul40fOV.js → useTheme-T2IIlG9u.js}

@@ -1,8 +1,8 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { a as t, g as n, s as r } from "./button-DOCIubLd.js";
+import { a as t, g as n, s as r } from "./button-DlqUC8W-.js";
 import { t as i } from "./react-DMWcHin-.js";
 import { t as a } from "./compiler-runtime-CAH9RLw2.js";
-import { Cn as o, In as s, Jn as c, Sn as l, Tt as u, jn as d, kt as f, un as p, vt as m } from "./schemas-DeBAkn_c.js";
+import { Cn as o, In as s, Jn as c, Sn as l, Tt as u, jn as d, kt as f, un as p, vt as m } from "./schemas-JTyiKlcH.js";
 import { n as h, t as g } from "./_baseMerge-Dv8bBloN.js";
 //#region ../node_modules/.pnpm/lodash-es@4.18.1/node_modules/lodash-es/mergeWith.js
 var _ = h(function(e, t, n, r) {

package/dist/{vega-component-D45ozr-k.js → vega-component-B2K69XxL.js}

@@ -1,21 +1,21 @@
 import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
-import { g as t, h as n, m as r } from "./button-DOCIubLd.js";
+import { g as t, h as n, m as r } from "./button-DlqUC8W-.js";
 import { t as i } from "./react-DMWcHin-.js";
 import { t as a } from "./compiler-runtime-CAH9RLw2.js";
-import { _ as o, c as s } from "./toDate-Mzvy7JMZ.js";
+import { _ as o, c as s } from "./toDate-BfSgxzgl.js";
 import { t as c } from "./jsx-runtime-CpoKNRgu.js";
-import { n as l } from "./error-banner-BT4uIIQ2.js";
-import { t as u } from "./tooltip-rwx3Qbw6.js";
+import { n as l } from "./error-banner-xVkWHg51.js";
+import { t as u } from "./tooltip-7p_32zdw.js";
 import { t as d } from "./debounce-C3jyATpc.js";
-import { j as f, n as p } from "./useTheme-3Ul40fOV.js";
+import { j as f, n as p } from "./useTheme-T2IIlG9u.js";
 import { c as m } from "./arrays-CN1djC4k.js";
 import { t as ee } from "./objects-CzUgoMIF.js";
-import { t as h } from "./useAsyncData-VgHmkX1q.js";
-import { a as te, i as ne, n as re, t as g } from "./formats-BepI-dIg.js";
+import { t as h } from "./useAsyncData-C4YwNjhG.js";
+import { a as te, i as ne, n as re, t as g } from "./formats-BEoM6hhG.js";
 import { A as ie, n as ae } from "./vega-loader.browser-DEggZzni.js";
 import { t as oe } from "./react-vega-DSD5aT7_.js";
-import { a as se, n as _ } from "./loader-CgRtoLc5.js";
-import { t as ce } from "./useDeepCompareMemoize-CcanIsdI.js";
+import { a as se, n as _ } from "./loader-D8jS1unC.js";
+import { t as ce } from "./useDeepCompareMemoize-B2mdYxCr.js";
 import { t as le } from "./semaphore-89jsoHtS.js";
 import { t as ue } from "./use-vega-container-remeasure-DUW4tRxq.js";
 //#region src/plugins/impl/vega/fix-relative-url.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.24.1-dev65",
+  "version": "0.24.1-dev66",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/ui/__tests__/button.test.ts

@@ -0,0 +1,42 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { buttonVariants } from "../button";
+
+describe("buttonVariants", () => {
+  it.each([
+    {
+      variant: "destructive" as const,
+      expected: [
+        "bg-destructive",
+        "text-destructive-foreground",
+        "border-destructive-border",
+        "hover:bg-destructive-hover",
+      ],
+    },
+    {
+      variant: "success" as const,
+      expected: [
+        "bg-success",
+        "text-success-foreground",
+        "border-success-border",
+        "hover:bg-success-hover",
+      ],
+    },
+    {
+      variant: "warn" as const,
+      expected: [
+        "bg-action",
+        "text-action-foreground",
+        "border-action-border",
+        "hover:bg-action-hover",
+      ],
+    },
+  ])("uses semantic theme colors for $variant", ({ variant, expected }) => {
+    const classes = buttonVariants({ variant });
+
+    expect(classes).toEqual(expect.stringContaining(expected.join(" ")));
+    expect(classes).not.toMatch(/--(?:red|grass|yellow)-/);
+    expect(classes).not.toContain("dark:");
+  });
+});

package/src/components/ui/button.tsx

@@ -24,28 +24,22 @@ const buttonVariants = cva(
         ),
         destructive: cn(
           "border shadow-xs",
-          "bg-(--red-9) hover:bg-(--red-10) dark:bg-(--red-6) dark:hover:bg-(--red-7)",
-          "text-(--red-1) dark:text-(--red-12)",
-          "border-(--red-11)",
+          "bg-destructive text-destructive-foreground border-destructive-border hover:bg-destructive-hover",
           activeCommon,
         ),
         success: cn(
           "border shadow-xs",
-          "bg-(--grass-9) hover:bg-(--grass-10) dark:bg-(--grass-6) dark:hover:bg-(--grass-7)",
-          "text-(--grass-1) dark:text-(--grass-12)",
-          "border-(--grass-11)",
+          "bg-success text-success-foreground border-success-border hover:bg-success-hover",
           activeCommon,
         ),
         warn: cn(
           "border shadow-xs",
-          "bg-(--yellow-9) hover:bg-(--yellow-10) dark:bg-(--yellow-6) dark:hover:bg-(--yellow-7)",
-          "text-(--yellow-12)",
-          "border-(--yellow-11)",
+          "bg-action text-action-foreground border-action-border hover:bg-action-hover",
           activeCommon,
         ),
         action: cn(
           "bg-action text-action-foreground shadow-xs",
-          "hover:bg-action-hover border border-action",
+          "hover:bg-action-hover border border-action-border",
           activeCommon,
         ),
         outline: cn(

package/src/css/globals.css

@@ -83,19 +83,26 @@
     --ring: hsl(215deg 20.2% 65.1%);
 
     /* Semantic colors. */
-    --destructive: hsl(0deg 100% 70%);
-    --destructive-foreground: hsl(210deg 40% 98%);
-    --error: hsl(0deg 77% 64%);
-    --error-foreground: hsl(210deg 40% 98%);
-    --success: hsl(130deg 100% 70%);
-    --success-foreground: hsl(210deg 40% 98%);
-    --action: hsl(52deg 96.8% 82%);
-    --action-hover: hsl(54deg 100% 86.7%);
-    --action-foreground: hsl(42deg 100% 29%);
+    --destructive: var(--red-9, #e5484d);
+    --destructive-hover: var(--red-10, #dc3e42);
+    --destructive-border: var(--red-11, #ce2c31);
+    --destructive-foreground: var(--red-1, #fffcfc);
+    --error: var(--red-9, #e5484d);
+    --error-foreground: var(--red-1, #fffcfc);
+    --success: var(--grass-9, #46a758);
+    --success-hover: var(--grass-10, #3e9b4f);
+    --success-border: var(--grass-11, #2a7e3b);
+    --success-foreground: var(--grass-1, #fbfefb);
+    --action: var(--yellow-9, #ffe629);
+    --action-hover: var(--yellow-10, #ffdc00);
+    --action-border: var(--yellow-11, #9e6c00);
+    --action-foreground: var(--yellow-12, #473b1f);
     --link: light-dark(hsl(211deg 90% 42%), hsl(211deg 90% 62%));
     --link-visited: light-dark(hsl(272deg 51% 54%), hsl(272deg 51% 74%));
     --stale: hsl(42deg 56% 44% / 25%);
 
+    accent-color: var(--primary);
+
     /* Base shadows. */
     --base-shadow: light-dark(hsl(0deg 0% 85% / 40%), hsla(0deg 0% 36% / 60%));
     --base-shadow-darker: light-dark(
@@ -122,6 +129,26 @@
   .marimo:is(.dark *) {
     color-scheme: dark;
   }
+
+  .dark,
+  .marimo:is(.dark *) {
+    --ring: var(--blue-8, #2870bd);
+    --destructive: var(--red-6, #72232d);
+    --destructive-hover: var(--red-7, #8c333a);
+    --destructive-border: var(--red-11, #ff9592);
+    --destructive-foreground: var(--red-12, #ffd1d9);
+    --error: var(--red-6, #72232d);
+    --error-foreground: var(--red-12, #ffd1d9);
+    --success: var(--grass-6, #2d5736);
+    --success-hover: var(--grass-7, #366740);
+    --success-border: var(--grass-11, #71d083);
+    --success-foreground: var(--grass-12, #c2f0c2);
+    --action: var(--yellow-6, #524202);
+    --action-hover: var(--yellow-7, #665417);
+    --action-border: var(--yellow-11, #f5e147);
+    --action-foreground: var(--yellow-12, #f6eeb4);
+    --stale: hsl(54deg 100% 86.7% / 25%);
+  }
 }
 
 @layer base {