@vertebr/react 0.6.0 → 0.8.0

package/dist/styles/shell.css

@@ -0,0 +1,314 @@
+/* ── Top bar ─────────────────────────────────────────── */
+
+.vertebr-topbar {
+  grid-column: 1 / -1;
+  grid-row: 1;
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--vb-space-400);
+  height: var(--vb-topbar-height);
+  padding: 0 var(--vb-space-500);
+  border-bottom: 1px solid var(--vb-border-subdued);
+  background: var(--vb-topbar-bg);
+}
+
+.vertebr-topbar-start,
+.vertebr-topbar-end {
+  display: flex;
+  align-items: center;
+  gap: var(--vb-space-300);
+  min-width: 0;
+}
+
+.vertebr-topbar-brand {
+  font-size: var(--vb-font-size-200);
+  font-weight: var(--vb-font-weight-semibold);
+  white-space: nowrap;
+}
+
+.vertebr-topbar-toggle {
+  appearance: none;
+  border: 1px solid var(--vb-border);
+  background: var(--vb-bg-elevated);
+  color: var(--vb-text);
+  border-radius: var(--vb-radius-sm);
+  width: 2rem;
+  height: 2rem;
+  cursor: pointer;
+}
+
+.vertebr-topbar-env {
+  display: flex;
+  align-items: center;
+  gap: var(--vb-space-200);
+}
+
+.vertebr-topbar-search {
+  display: flex;
+  align-items: center;
+  gap: var(--vb-space-200);
+  min-width: 12rem;
+  max-width: 22rem;
+  flex: 1;
+  padding: 0.45rem 0.75rem;
+  border: 1px solid var(--vb-border);
+  border-radius: var(--vb-radius-full);
+  background: var(--vb-bg-muted);
+  color: var(--vb-text-subtle);
+  font-size: var(--vb-font-size-100);
+}
+
+.vertebr-topbar-search kbd {
+  margin-left: auto;
+  font-family: var(--vb-mono);
+  font-size: var(--vb-font-size-75);
+  opacity: 0.7;
+}
+
+.vertebr-topbar-token {
+  display: flex;
+  align-items: center;
+  gap: var(--vb-space-100);
+}
+
+.vertebr-topbar-user {
+  font-size: var(--vb-font-size-100);
+  color: var(--vb-text-muted);
+  max-width: 12rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 900px) {
+  .vertebr-topbar-search {
+    display: none;
+  }
+}
+
+/* ── Save bar ────────────────────────────────────────── */
+
+.vertebr-savebar {
+  position: sticky;
+  bottom: 0;
+  z-index: 35;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--vb-space-400);
+  min-height: var(--vb-savebar-height);
+  padding: var(--vb-space-300) var(--vb-space-500);
+  padding-bottom: calc(var(--vb-space-300) + env(safe-area-inset-bottom, 0px));
+  border-top: 1px solid var(--vb-border);
+  background: color-mix(in srgb, var(--vb-bg-elevated) 92%, transparent);
+  backdrop-filter: blur(8px);
+}
+
+.vertebr-savebar-message {
+  font-size: var(--vb-font-size-200);
+  color: var(--vb-text-secondary);
+}
+
+.vertebr-savebar[data-tone="ok"] .vertebr-savebar-message {
+  color: var(--vb-ok);
+}
+
+.vertebr-savebar[data-tone="danger"] .vertebr-savebar-message {
+  color: var(--vb-danger-text);
+}
+
+.vertebr-savebar-actions {
+  display: flex;
+  gap: var(--vb-space-200);
+}
+
+/* ── Toasts ──────────────────────────────────────────── */
+
+.vertebr-toast-stack {
+  position: fixed;
+  right: var(--vb-space-500);
+  bottom: calc(var(--vb-space-500) + env(safe-area-inset-bottom, 0px));
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: var(--vb-space-200);
+  pointer-events: none;
+}
+
+.vertebr-toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--vb-space-300);
+  min-width: 16rem;
+  max-width: 24rem;
+  padding: var(--vb-space-300) var(--vb-space-400);
+  border: 1px solid var(--vb-border);
+  border-radius: var(--vb-radius-md);
+  background: var(--vb-bg-elevated);
+  box-shadow: var(--vb-shadow-lg);
+  font-size: var(--vb-font-size-200);
+}
+
+.vertebr-toast[data-tone="ok"] {
+  border-color: color-mix(in srgb, var(--vb-ok) 40%, var(--vb-border));
+}
+
+.vertebr-toast[data-tone="danger"] {
+  border-color: color-mix(in srgb, var(--vb-danger) 40%, var(--vb-border));
+}
+
+.vertebr-toast-dismiss {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--vb-text-muted);
+  font-size: 1.1rem;
+  cursor: pointer;
+  margin-left: auto;
+}
+
+/* ── UI primitives ───────────────────────────────────── */
+
+.vertebr-card {
+  border: 1px solid var(--vb-border-subdued);
+  border-radius: var(--vb-radius-lg);
+  background: var(--vb-bg-elevated);
+  box-shadow: var(--vb-shadow-sm);
+}
+
+.vertebr-card[data-subdued="true"] {
+  background: var(--vb-bg-subdued);
+  box-shadow: none;
+}
+
+.vertebr-card-head {
+  padding: var(--vb-space-400) var(--vb-space-500);
+  border-bottom: 1px solid var(--vb-border-subdued);
+  font-weight: var(--vb-font-weight-semibold);
+}
+
+.vertebr-card-body {
+  padding: var(--vb-space-500);
+}
+
+.vertebr-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.12rem 0.45rem;
+  border-radius: var(--vb-radius-full);
+  font-size: var(--vb-font-size-75);
+  font-weight: var(--vb-font-weight-medium);
+  border: 1px solid var(--vb-border);
+  color: var(--vb-text-secondary);
+  background: var(--vb-bg-muted);
+}
+
+.vertebr-badge[data-tone="ok"] {
+  color: var(--vb-ok);
+  border-color: color-mix(in srgb, var(--vb-ok) 35%, transparent);
+  background: var(--vb-ok-soft);
+}
+
+.vertebr-badge[data-tone="danger"] {
+  color: var(--vb-danger-text);
+  border-color: color-mix(in srgb, var(--vb-danger) 35%, transparent);
+  background: var(--vb-danger-soft);
+}
+
+.vertebr-banner {
+  padding: var(--vb-space-300) var(--vb-space-400);
+  border-radius: var(--vb-radius-md);
+  border: 1px solid var(--vb-border);
+  background: var(--vb-bg-muted);
+  font-size: var(--vb-font-size-200);
+}
+
+.vertebr-banner[data-tone="ok"] {
+  border-color: color-mix(in srgb, var(--vb-ok) 35%, transparent);
+  background: var(--vb-ok-soft);
+}
+
+.vertebr-banner[data-tone="danger"] {
+  border-color: color-mix(in srgb, var(--vb-danger) 35%, transparent);
+  background: var(--vb-danger-soft);
+}
+
+.vertebr-empty-state {
+  display: grid;
+  gap: var(--vb-space-200);
+  justify-items: start;
+  padding: var(--vb-space-800);
+  text-align: left;
+}
+
+.vertebr-empty-state h3 {
+  margin: 0;
+  font-size: var(--vb-font-size-400);
+}
+
+.vertebr-empty-state p {
+  margin: 0;
+  color: var(--vb-text-muted);
+  max-width: 28rem;
+}
+
+.vertebr-skeleton {
+  display: grid;
+  gap: var(--vb-space-200);
+}
+
+.vertebr-skeleton span {
+  display: block;
+  height: 0.85rem;
+  border-radius: var(--vb-radius-sm);
+  background: linear-gradient(
+    90deg,
+    var(--vb-bg-muted) 0%,
+    var(--vb-bg-hover) 50%,
+    var(--vb-bg-muted) 100%
+  );
+  background-size: 200% 100%;
+  animation: vb-skeleton 1.2s ease-in-out infinite;
+}
+
+@keyframes vb-skeleton {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
+
+/* ── Breadcrumbs ─────────────────────────────────────── */
+
+.vertebr-breadcrumbs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+  margin: 0 0 var(--vb-space-200);
+  padding: 0;
+  list-style: none;
+  font-size: var(--vb-font-size-100);
+  color: var(--vb-text-muted);
+}
+
+.vertebr-breadcrumbs li {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.vertebr-breadcrumbs li:not(:last-child)::after {
+  content: "/";
+  opacity: 0.5;
+}
+
+.vertebr-breadcrumbs strong {
+  color: var(--vb-text);
+  font-weight: var(--vb-font-weight-medium);
+}

package/dist/styles/sidebar.css

@@ -1,15 +1,16 @@
 /* ── Sidebar ─────────────────────────────────────────── */
 
 .vertebr-sidebar {
+  grid-row: 2;
   position: sticky;
-  top: 0;
+  top: var(--vb-topbar-height);
   z-index: 30;
   align-self: start;
-  height: 100vh;
-  max-height: 100vh;
-  border-right: 1px solid var(--vb-border);
+  height: calc(100dvh - var(--vb-topbar-height));
+  max-height: calc(100dvh - var(--vb-topbar-height));
+  border-right: 1px solid var(--vb-border-subdued);
   background: var(--vb-sidebar-from);
-  padding: 1.35rem 0.9rem 1rem;
+  padding: var(--vb-space-400) var(--vb-space-300) var(--vb-space-400);
   display: flex;
   flex-direction: column;
   gap: 0;
@@ -17,6 +18,26 @@
   isolation: isolate;
 }
 
+.vertebr-sidebar[data-collapsed="true"] {
+  padding-inline: var(--vb-space-200);
+}
+
+.vertebr-sidebar[data-collapsed="true"] .vertebr-nav-label-text {
+  display: none;
+}
+
+.vertebr-sidebar[data-collapsed="true"] .vertebr-nav > button,
+.vertebr-sidebar[data-collapsed="true"] .vertebr-nav-parent-label {
+  justify-content: center;
+  padding-inline: var(--vb-space-200);
+}
+
+.vertebr-nav-icon {
+  flex: 0 0 auto;
+  width: 1.1rem;
+  height: 1.1rem;
+}
+
 .vertebr-sidebar-top {
   display: flex;
   flex-direction: column;

package/dist/themes/dark.css

@@ -1,55 +1,57 @@
 /**
- * Vertebr dark theme (default).
- * Apply with data-vb-theme="dark" or leave unset (:root defaults here).
+ * Vertebr dark theme (default) — neutral Shopify-inspired palette.
  */
 :root,
 [data-vb-theme="dark"] {
   color-scheme: dark;
 
-  --vb-bg: #0e1014;
-  --vb-bg-deep: #12151c;
-  --vb-bg-elevated: #161922;
-  --vb-bg-muted: #1e2330;
-  --vb-bg-hover: #252b3a;
-  --vb-border: #2a3142;
-  --vb-border-strong: #3a4358;
-  --vb-text: #f0eee8;
-  --vb-text-muted: #8b93a7;
-  --vb-text-subtle: #6a7285;
-  --vb-accent: #c9a66b;
-  --vb-accent-dim: #9a7d45;
-  --vb-accent-soft: rgba(201, 166, 107, 0.14);
-  --vb-accent-contrast: #1a140c;
-  --vb-danger: #e07a72;
-  --vb-danger-soft: rgba(224, 122, 114, 0.12);
-  --vb-danger-text: #f3c4bf;
-  --vb-ok: #87a87f;
-  --vb-ok-soft: rgba(135, 168, 127, 0.14);
-  --vb-warn-text: #e8d0a0;
+  --vb-bg: #1a1a1a;
+  --vb-bg-deep: #141414;
+  --vb-bg-elevated: #242424;
+  --vb-bg-muted: #2e2e2e;
+  --vb-bg-hover: #383838;
+  --vb-bg-subdued: #303030;
+  --vb-border: #424242;
+  --vb-border-subdued: #353535;
+  --vb-border-strong: #5c5c5c;
+  --vb-text: #f3f3f3;
+  --vb-text-muted: #a8a8a8;
+  --vb-text-subtle: #7a7a7a;
+  --vb-text-secondary: #b5b5b5;
+  --vb-accent: #008060;
+  --vb-accent-dim: #006e52;
+  --vb-accent-soft: rgba(0, 128, 96, 0.14);
+  --vb-accent-contrast: #ffffff;
+  --vb-interactive: #5c9eff;
+  --vb-interactive-soft: rgba(92, 158, 255, 0.12);
+  --vb-danger: #e51c00;
+  --vb-danger-soft: rgba(229, 28, 0, 0.12);
+  --vb-danger-text: #ff8a7a;
+  --vb-ok: #29845a;
+  --vb-ok-soft: rgba(41, 132, 90, 0.14);
+  --vb-warn-text: #ffc96b;
+  --vb-warn-soft: rgba(255, 201, 107, 0.12);
 
-  --vb-glow-accent: rgba(201, 166, 107, 0.07);
-  --vb-glow-cool: rgba(60, 80, 120, 0.08);
-  --vb-surface-tint: rgba(255, 255, 255, 0.02);
-  --vb-surface-tint-strong: rgba(255, 255, 255, 0.04);
-  --vb-sidebar-from: #0e1014;
-  --vb-sidebar-to: #12151c;
-  --vb-header-from: rgba(14, 16, 20, 0.96);
-  --vb-header-to: rgba(14, 16, 20, 0.86);
-  --vb-actions-from: rgba(22, 25, 34, 0.65);
-  --vb-actions-to: rgba(18, 21, 28, 0.95);
-  --vb-input-focus-bg: #12151c;
-  --vb-btn-primary-from: #d4b27a;
-  --vb-btn-primary-to: #c9a66b;
-  --vb-btn-primary-border: #b89255;
-  --vb-btn-primary-hover-from: #dbbc88;
-  --vb-btn-primary-hover-to: #d0ad72;
-  --vb-btn-primary-hover-border: #c4a574;
+  --vb-glow-accent: transparent;
+  --vb-glow-cool: transparent;
+  --vb-surface-tint: rgba(255, 255, 255, 0.03);
+  --vb-surface-tint-strong: rgba(255, 255, 255, 0.06);
+  --vb-sidebar-from: #1a1a1a;
+  --vb-sidebar-to: #1a1a1a;
+  --vb-header-from: #1a1a1a;
+  --vb-header-to: #1a1a1a;
+  --vb-topbar-bg: #242424;
+  --vb-actions-from: rgba(36, 36, 36, 0.95);
+  --vb-actions-to: rgba(26, 26, 26, 0.98);
+  --vb-input-focus-bg: #2e2e2e;
+  --vb-btn-primary-from: #008060;
+  --vb-btn-primary-to: #008060;
+  --vb-btn-primary-border: #006e52;
+  --vb-btn-primary-hover-from: #00966d;
+  --vb-btn-primary-hover-to: #00966d;
+  --vb-btn-primary-hover-border: #008060;
 
-  --vb-font: "IBM Plex Sans", "Segoe UI", sans-serif;
-  --vb-mono: "IBM Plex Mono", ui-monospace, monospace;
-  --vb-radius: 8px;
-  --vb-radius-sm: 6px;
-  --vb-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
-    0 18px 48px rgba(0, 0, 0, 0.45);
-  --vb-sidebar-width: 260px;
+  --vb-radius: var(--vb-radius-md);
+  --vb-radius-sm: var(--vb-radius-sm);
+  --vb-shadow: var(--vb-shadow-md);
 }

package/dist/themes/index.css

@@ -1,2 +1,3 @@
+@import "./tokens.css";
 @import "./dark.css";
 @import "./light.css";

package/dist/themes/light.css

@@ -1,102 +1,108 @@
 /**
- * Vertebr light theme.
- * Apply with data-vb-theme="light" on <html> or .vertebr-root.
+ * Vertebr light theme — neutral Shopify-inspired palette.
  */
 [data-vb-theme="light"] {
   color-scheme: light;
 
-  --vb-bg: #f4f2ec;
-  --vb-bg-deep: #ebe7de;
-  --vb-bg-elevated: #fffcf7;
-  --vb-bg-muted: #ebe6db;
-  --vb-bg-hover: #e2dcd0;
-  --vb-border: #d5cfc2;
-  --vb-border-strong: #bdb5a6;
-  --vb-text: #1c1a16;
-  --vb-text-muted: #5c564c;
-  --vb-text-subtle: #7a7368;
-  --vb-accent: #9a6f2e;
-  --vb-accent-dim: #7d5924;
-  --vb-accent-soft: rgba(154, 111, 46, 0.12);
-  --vb-accent-contrast: #fff8eb;
-  --vb-danger: #c44d44;
-  --vb-danger-soft: rgba(196, 77, 68, 0.12);
-  --vb-danger-text: #9a2f28;
-  --vb-ok: #3f6b3a;
-  --vb-ok-soft: rgba(63, 107, 58, 0.12);
-  --vb-warn-text: #7a5620;
+  --vb-bg: #f1f1f1;
+  --vb-bg-deep: #ebebeb;
+  --vb-bg-elevated: #ffffff;
+  --vb-bg-muted: #f6f6f7;
+  --vb-bg-hover: #f1f1f1;
+  --vb-bg-subdued: #fafbfb;
+  --vb-border: #e3e3e3;
+  --vb-border-subdued: #ebebeb;
+  --vb-border-strong: #c9cccf;
+  --vb-text: #202223;
+  --vb-text-muted: #6d7175;
+  --vb-text-subtle: #8c9196;
+  --vb-text-secondary: #5c5f62;
+  --vb-accent: #008060;
+  --vb-accent-dim: #006e52;
+  --vb-accent-soft: rgba(0, 128, 96, 0.08);
+  --vb-accent-contrast: #ffffff;
+  --vb-interactive: #005bd3;
+  --vb-interactive-soft: rgba(0, 91, 211, 0.08);
+  --vb-danger: #d72c0d;
+  --vb-danger-soft: rgba(215, 44, 13, 0.08);
+  --vb-danger-text: #8e1f0b;
+  --vb-ok: #108043;
+  --vb-ok-soft: rgba(16, 128, 67, 0.08);
+  --vb-warn-text: #916a00;
+  --vb-warn-soft: rgba(255, 184, 0, 0.12);
 
-  --vb-glow-accent: rgba(154, 111, 46, 0.1);
-  --vb-glow-cool: rgba(80, 100, 140, 0.06);
-  --vb-surface-tint: rgba(28, 26, 22, 0.03);
-  --vb-surface-tint-strong: rgba(28, 26, 22, 0.05);
-  --vb-sidebar-from: #fffcf7;
-  --vb-sidebar-to: #f4f2ec;
-  --vb-header-from: rgba(255, 252, 247, 0.96);
-  --vb-header-to: rgba(255, 252, 247, 0.88);
-  --vb-actions-from: rgba(255, 252, 247, 0.85);
-  --vb-actions-to: rgba(244, 242, 236, 0.98);
-  --vb-input-focus-bg: #fffcf7;
-  --vb-btn-primary-from: #b8893f;
-  --vb-btn-primary-to: #9a6f2e;
-  --vb-btn-primary-border: #815c26;
-  --vb-btn-primary-hover-from: #c4964a;
-  --vb-btn-primary-hover-to: #a87a34;
-  --vb-btn-primary-hover-border: #8f662a;
+  --vb-glow-accent: transparent;
+  --vb-glow-cool: transparent;
+  --vb-surface-tint: rgba(32, 34, 35, 0.03);
+  --vb-surface-tint-strong: rgba(32, 34, 35, 0.05);
+  --vb-sidebar-from: #ebebeb;
+  --vb-sidebar-to: #ebebeb;
+  --vb-header-from: #ffffff;
+  --vb-header-to: #ffffff;
+  --vb-topbar-bg: #ffffff;
+  --vb-actions-from: rgba(255, 255, 255, 0.95);
+  --vb-actions-to: rgba(255, 255, 255, 0.98);
+  --vb-input-focus-bg: #ffffff;
+  --vb-btn-primary-from: #008060;
+  --vb-btn-primary-to: #008060;
+  --vb-btn-primary-border: #006e52;
+  --vb-btn-primary-hover-from: #006e52;
+  --vb-btn-primary-hover-to: #006e52;
+  --vb-btn-primary-hover-border: #005e46;
 
-  --vb-font: "IBM Plex Sans", "Segoe UI", sans-serif;
-  --vb-mono: "IBM Plex Mono", ui-monospace, monospace;
-  --vb-radius: 8px;
-  --vb-radius-sm: 6px;
-  --vb-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset,
-    0 14px 40px rgba(40, 32, 18, 0.1);
-  --vb-sidebar-width: 260px;
+  --vb-shadow: var(--vb-shadow-sm);
 }
 
 @media (prefers-color-scheme: light) {
   :root:not([data-vb-theme]) {
     color-scheme: light;
 
-    --vb-bg: #f4f2ec;
-    --vb-bg-deep: #ebe7de;
-    --vb-bg-elevated: #fffcf7;
-    --vb-bg-muted: #ebe6db;
-    --vb-bg-hover: #e2dcd0;
-    --vb-border: #d5cfc2;
-    --vb-border-strong: #bdb5a6;
-    --vb-text: #1c1a16;
-    --vb-text-muted: #5c564c;
-    --vb-text-subtle: #7a7368;
-    --vb-accent: #9a6f2e;
-    --vb-accent-dim: #7d5924;
-    --vb-accent-soft: rgba(154, 111, 46, 0.12);
-    --vb-accent-contrast: #fff8eb;
-    --vb-danger: #c44d44;
-    --vb-danger-soft: rgba(196, 77, 68, 0.12);
-    --vb-danger-text: #9a2f28;
-    --vb-ok: #3f6b3a;
-    --vb-ok-soft: rgba(63, 107, 58, 0.12);
-    --vb-warn-text: #7a5620;
+    --vb-bg: #f1f1f1;
+    --vb-bg-deep: #ebebeb;
+    --vb-bg-elevated: #ffffff;
+    --vb-bg-muted: #f6f6f7;
+    --vb-bg-hover: #f1f1f1;
+    --vb-bg-subdued: #fafbfb;
+    --vb-border: #e3e3e3;
+    --vb-border-subdued: #ebebeb;
+    --vb-border-strong: #c9cccf;
+    --vb-text: #202223;
+    --vb-text-muted: #6d7175;
+    --vb-text-subtle: #8c9196;
+    --vb-text-secondary: #5c5f62;
+    --vb-accent: #008060;
+    --vb-accent-dim: #006e52;
+    --vb-accent-soft: rgba(0, 128, 96, 0.08);
+    --vb-accent-contrast: #ffffff;
+    --vb-interactive: #005bd3;
+    --vb-interactive-soft: rgba(0, 91, 211, 0.08);
+    --vb-danger: #d72c0d;
+    --vb-danger-soft: rgba(215, 44, 13, 0.08);
+    --vb-danger-text: #8e1f0b;
+    --vb-ok: #108043;
+    --vb-ok-soft: rgba(16, 128, 67, 0.08);
+    --vb-warn-text: #916a00;
+    --vb-warn-soft: rgba(255, 184, 0, 0.12);
 
-    --vb-glow-accent: rgba(154, 111, 46, 0.1);
-    --vb-glow-cool: rgba(80, 100, 140, 0.06);
-    --vb-surface-tint: rgba(28, 26, 22, 0.03);
-    --vb-surface-tint-strong: rgba(28, 26, 22, 0.05);
-    --vb-sidebar-from: #fffcf7;
-    --vb-sidebar-to: #f4f2ec;
-    --vb-header-from: rgba(255, 252, 247, 0.96);
-    --vb-header-to: rgba(255, 252, 247, 0.88);
-    --vb-actions-from: rgba(255, 252, 247, 0.85);
-    --vb-actions-to: rgba(244, 242, 236, 0.98);
-    --vb-input-focus-bg: #fffcf7;
-    --vb-btn-primary-from: #b8893f;
-    --vb-btn-primary-to: #9a6f2e;
-    --vb-btn-primary-border: #815c26;
-    --vb-btn-primary-hover-from: #c4964a;
-    --vb-btn-primary-hover-to: #a87a34;
-    --vb-btn-primary-hover-border: #8f662a;
+    --vb-glow-accent: transparent;
+    --vb-glow-cool: transparent;
+    --vb-surface-tint: rgba(32, 34, 35, 0.03);
+    --vb-surface-tint-strong: rgba(32, 34, 35, 0.05);
+    --vb-sidebar-from: #ebebeb;
+    --vb-sidebar-to: #ebebeb;
+    --vb-header-from: #ffffff;
+    --vb-header-to: #ffffff;
+    --vb-topbar-bg: #ffffff;
+    --vb-actions-from: rgba(255, 255, 255, 0.95);
+    --vb-actions-to: rgba(255, 255, 255, 0.98);
+    --vb-input-focus-bg: #ffffff;
+    --vb-btn-primary-from: #008060;
+    --vb-btn-primary-to: #008060;
+    --vb-btn-primary-border: #006e52;
+    --vb-btn-primary-hover-from: #006e52;
+    --vb-btn-primary-hover-to: #006e52;
+    --vb-btn-primary-hover-border: #005e46;
 
-    --vb-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset,
-      0 14px 40px rgba(40, 32, 18, 0.1);
+    --vb-shadow: var(--vb-shadow-sm);
   }
 }