@tangle-network/sandbox-ui 0.44.0 → 0.45.0

package/dist/globals.css

@@ -4169,7 +4169,9 @@
   }
 }
 :root,
-[data-sandbox-ui] {
+[data-sandbox-ui],
+[data-theme="dark"],
+.dark {
   --md3-surface: #0a0a14;
   --md3-surface-dim: #07070d;
   --md3-surface-bright: #1b1a2c;
@@ -4412,7 +4414,9 @@
   --font-display: "Inter", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 }
-[data-sandbox-theme="vault"] {
+[data-sandbox-theme="vault"],
+[data-theme="light"],
+.light {
   --md3-surface: #f8f9fb;
   --md3-surface-dim: #d9dae0;
   --md3-surface-bright: #f8f9fb;

package/dist/styles.css

@@ -4169,7 +4169,9 @@
   }
 }
 :root,
-[data-sandbox-ui] {
+[data-sandbox-ui],
+[data-theme="dark"],
+.dark {
   --md3-surface: #0a0a14;
   --md3-surface-dim: #07070d;
   --md3-surface-bright: #1b1a2c;
@@ -4412,7 +4414,9 @@
   --font-display: "Inter", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 }
-[data-sandbox-theme="vault"] {
+[data-sandbox-theme="vault"],
+[data-theme="light"],
+.light {
   --md3-surface: #f8f9fb;
   --md3-surface-dim: #d9dae0;
   --md3-surface-bright: #f8f9fb;

package/dist/tokens.css

@@ -2,8 +2,13 @@
 /* Brand: warm purple palette, #5B4ED4 primary */
 
 /* MD3 surface hierarchy */
+/* Dark is the default theme (`:root`/`[data-sandbox-ui]`). It also responds to
+ * the standard `[data-theme="dark"]` / `.dark` switch so any consumer can pin or
+ * toggle a theme without inventing an ad-hoc `data-sandbox-theme` name. */
 :root,
-[data-sandbox-ui] {
+[data-sandbox-ui],
+[data-theme="dark"],
+.dark {
   --md3-surface: #0a0a14;
   --md3-surface-dim: #07070d;
   --md3-surface-bright: #1b1a2c;
@@ -304,7 +309,13 @@
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 }
 
-[data-sandbox-theme="vault"] {
+/* Light theme — reachable via the named `vault` theme or the standard
+ * `[data-theme="light"]` / `.light` switch. Both blocks are single-attribute/
+ * class selectors, and this one is later in source order, so when an element
+ * carries both `data-sandbox-ui` (dark) and `data-theme="light"`, light wins. */
+[data-sandbox-theme="vault"],
+[data-theme="light"],
+.light {
   /* Light theme — clean professional, warm purple accents */
 
   /* MD3 surface hierarchy */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -122,7 +122,7 @@
     "test:bridge": "pnpm build && vitest run src/__tests__/re-export-identity.test.ts"
   },
   "peerDependencies": {
-    "@tangle-network/brand": "^0.5.0",
+    "@tangle-network/brand": "^0.6.0",
     "@tangle-network/ui": "^4.0.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
@@ -176,7 +176,7 @@
     "@storybook/react-vite": "^8.6.18",
     "@tailwindcss/postcss": "^4.2.2",
     "@tailwindcss/vite": "^4.2.2",
-    "@tangle-network/brand": "^0.5.0",
+    "@tangle-network/brand": "^0.6.0",
     "@tangle-network/ui": "^4.1.0",
     "@tanstack/react-query": "^5.91.0",
     "@testing-library/dom": "^10.4.1",