@vertebr/react 0.5.1 → 0.7.0

package/dist/styles/index.css

@@ -1,4 +1,4 @@
-/* Vertebr React styles — public entry. Partials live in ./styles/ */
+/* Vertebr React styles ? public entry. Partials live in ./styles/ */
 @import "../themes/index.css";
 @import "./base.css";
 @import "./sidebar.css";
@@ -18,4 +18,6 @@
 @import "./form.css";
 @import "./buttons.css";
 @import "./gallery.css";
+@import "./font-library.css";
+@import "./page-preview.css";
 @import "./states.css";

package/dist/styles/main.css

@@ -27,7 +27,7 @@
 }
 
 .vertebr-content {
-  flex: 1 1 auto;
+  flex: 1 1 0%;
   min-width: 0;
   min-height: 0;
   display: flex;

package/dist/styles/page-preview.css

@@ -0,0 +1,208 @@
+/* ── Page preview (host iframe + live drafts) ────────── */
+
+.vertebr-config-editor {
+  flex: 1 1 0%;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.vertebr-config-editor > .vertebr-form,
+.vertebr-config-editor > .vertebr-page-editor {
+  flex: 1 1 0%;
+  min-height: 0;
+}
+
+.vertebr-page-editor {
+  flex: 1 1 0%;
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
+  gap: 0;
+  overflow: hidden;
+}
+
+.vertebr-page-editor-form {
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-right: 1px solid var(--vb-border);
+}
+
+.vertebr-page-editor-form .vertebr-form {
+  flex: 1 1 0%;
+  min-height: 0;
+  height: 100%;
+  border-radius: 0;
+}
+
+.vertebr-page-preview {
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--vb-surface-tint);
+}
+
+.vertebr-page-preview-meta {
+  flex: 0 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem 1.25rem;
+  padding: 0.7rem 1rem;
+  border-bottom: 1px solid var(--vb-border);
+  background: var(--vb-bg-elevated);
+}
+
+.vertebr-page-preview-meta p {
+  margin: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 0.45rem;
+  font-size: 0.78rem;
+  color: var(--vb-text-muted);
+}
+
+.vertebr-page-preview-meta span {
+  font-family: var(--vb-mono);
+  font-size: 0.66rem;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-page-preview-meta strong {
+  font-weight: 560;
+  color: var(--vb-text);
+}
+
+.vertebr-page-preview-viewports {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.15rem;
+  padding: 0.15rem;
+  border: 1px solid var(--vb-border);
+  border-radius: 999px;
+  background: var(--vb-bg);
+}
+
+.vertebr-page-preview-viewports button {
+  appearance: none;
+  margin: 0;
+  border: 0;
+  border-radius: 999px;
+  padding: 0.28rem 0.7rem;
+  font: inherit;
+  font-size: 0.74rem;
+  font-weight: 520;
+  color: var(--vb-text-muted);
+  background: transparent;
+  cursor: pointer;
+}
+
+.vertebr-page-preview-viewports button:hover {
+  color: var(--vb-text);
+}
+
+.vertebr-page-preview-viewports button[data-active="true"] {
+  color: var(--vb-text);
+  background: var(--vb-surface-tint);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vb-border) 80%, transparent);
+}
+
+.vertebr-page-preview-stage {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 0.75rem;
+  display: flex;
+  justify-content: stretch;
+  align-items: stretch;
+}
+
+.vertebr-page-preview-stage[data-viewport="mobile"] {
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+  background:
+    radial-gradient(
+      circle at 50% 0%,
+      color-mix(in srgb, var(--vb-text) 4%, transparent),
+      transparent 55%
+    ),
+    var(--vb-surface-tint);
+}
+
+.vertebr-page-preview-shell {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+}
+
+.vertebr-page-preview-stage[data-viewport="mobile"] .vertebr-page-preview-shell {
+  flex: 0 0 auto;
+}
+
+.vertebr-page-preview-frame {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  border: 1px solid var(--vb-border);
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--vb-bg);
+  box-shadow: var(--vb-shadow);
+}
+
+.vertebr-page-preview-stage[data-viewport="mobile"] .vertebr-page-preview-frame {
+  flex: 0 0 auto;
+  border-radius: 28px;
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--vb-border) 90%, transparent),
+    0 18px 40px color-mix(in srgb, var(--vb-text) 12%, transparent);
+}
+
+.vertebr-page-preview-frame iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: #fff;
+}
+
+.vertebr-page-preview-empty {
+  height: 100%;
+  display: grid;
+  place-items: center;
+  padding: 1.5rem;
+  text-align: center;
+  color: var(--vb-text-muted);
+  font-size: 0.88rem;
+}
+
+@media (max-width: 1100px) {
+  .vertebr-page-editor {
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(240px, 42%) minmax(0, 1fr);
+    overflow: hidden;
+  }
+
+  .vertebr-page-editor-form {
+    border-right: 0;
+    border-bottom: 1px solid var(--vb-border);
+    max-height: none;
+    min-height: 0;
+  }
+
+  .vertebr-page-preview-stage {
+    min-height: 280px;
+  }
+}

package/dist/styles/panel.css

@@ -1,7 +1,7 @@
 /* ── Panel ───────────────────────────────────────────── */
 
 .vertebr-panel {
-  flex: 1 1 auto;
+  flex: 1 1 0%;
   min-width: 0;
   min-height: 0;
   display: flex;
@@ -112,13 +112,18 @@
 }
 
 .vertebr-resource-edit {
-  flex: 1 1 auto;
+  flex: 1 1 0%;
   min-height: 0;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
 
+.vertebr-resource-edit > .vertebr-form {
+  flex: 1 1 0%;
+  min-height: 0;
+}
+
 .vertebr-resource-edit-head {
   flex: 0 0 auto;
   display: flex;

package/dist/styles/states.css

@@ -125,6 +125,7 @@
   .vertebr-actions {
     flex-wrap: wrap;
     padding: 0.85rem 1rem;
+    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px) + 4.75rem);
   }
 
   .vertebr-resource-edit-head {
@@ -150,17 +151,19 @@
 
   .vertebr-main {
     height: auto;
-    overflow: visible;
+    min-height: 0;
+    overflow: hidden;
     padding: 0;
   }
 
   .vertebr-content {
-    overflow: visible;
-    padding: 1.25rem 1rem 2rem;
+    overflow: hidden;
+    padding: 1.25rem 1rem 1rem;
   }
 
   .vertebr-panel {
     min-height: min(70vh, 640px);
+    max-height: calc(100dvh - 8rem);
   }
 
   .vertebr-table-wrap {

package/dist/styles/table.css

@@ -75,6 +75,24 @@
   cursor: pointer;
 }
 
+.vertebr-visibility-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  padding: 0.1rem;
+  border-radius: 6px;
+}
+
+.vertebr-visibility-check[data-dirty="true"] {
+  background: color-mix(in srgb, var(--vb-accent) 14%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--vb-accent) 35%, transparent);
+}
+
+.vertebr-visibility-check .vertebr-visibility-btn[data-dirty="true"] {
+  color: var(--vb-accent);
+}
+
 .vertebr-table-row-clickable {
   cursor: pointer;
 }

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);
   }
 }

package/dist/themes/tokens.css

@@ -0,0 +1,52 @@
+/**
+ * Shared design tokens — spacing, type, elevation (theme-agnostic).
+ */
+:root {
+  --vb-space-100: 0.25rem;
+  --vb-space-200: 0.5rem;
+  --vb-space-300: 0.75rem;
+  --vb-space-400: 1rem;
+  --vb-space-500: 1.25rem;
+  --vb-space-600: 1.5rem;
+  --vb-space-800: 2rem;
+  --vb-space-1000: 2.5rem;
+  --vb-space-1200: 3rem;
+
+  --vb-font-size-75: 0.75rem;
+  --vb-font-size-100: 0.8125rem;
+  --vb-font-size-200: 0.875rem;
+  --vb-font-size-300: 1rem;
+  --vb-font-size-400: 1.125rem;
+  --vb-font-size-500: 1.375rem;
+  --vb-font-size-600: 1.75rem;
+
+  --vb-font-weight-regular: 400;
+  --vb-font-weight-medium: 500;
+  --vb-font-weight-semibold: 600;
+
+  --vb-line-height-tight: 1.2;
+  --vb-line-height-normal: 1.45;
+  --vb-line-height-loose: 1.6;
+
+  --vb-radius-xs: 4px;
+  --vb-radius-sm: 6px;
+  --vb-radius-md: 8px;
+  --vb-radius-lg: 12px;
+  --vb-radius-full: 999px;
+
+  --vb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --vb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --vb-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
+
+  --vb-topbar-height: 3.25rem;
+  --vb-sidebar-width: 240px;
+  --vb-sidebar-width-collapsed: 4rem;
+  --vb-savebar-height: 3.5rem;
+
+  --vb-duration-fast: 120ms;
+  --vb-duration-normal: 200ms;
+  --vb-ease: cubic-bezier(0.4, 0, 0.2, 1);
+
+  --vb-font: "Inter", "IBM Plex Sans", system-ui, sans-serif;
+  --vb-mono: "IBM Plex Mono", ui-monospace, monospace;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertebr/react",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "description": "Vertebr admin dashboard UI",
   "type": "module",
   "main": "./dist/index.js",