@vertebr/react 0.6.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components/fonts/FontPickerField.d.ts.map +1 -1
  2. package/dist/components/fonts/FontPickerField.js +12 -1
  3. package/dist/styles/base.css +8 -14
  4. package/dist/styles/buttons.css +3 -12
  5. package/dist/themes/dark.css +48 -46
  6. package/dist/themes/index.css +1 -0
  7. package/dist/themes/light.css +91 -85
  8. package/dist/themes/tokens.css +52 -0
  9. package/package.json +1 -1
package/dist/components/fonts/FontPickerField.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FontPickerField.d.ts","sourceRoot":"","sources":["../../../src/components/fonts/FontPickerField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAKvD,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAUF,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,cAAc,EACd,WAA0B,GAC3B,EAAE,oBAAoB,+BA0LtB"}
1
+ {"version":3,"file":"FontPickerField.d.ts","sourceRoot":"","sources":["../../../src/components/fonts/FontPickerField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAKvD,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAUF,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,cAAc,EACd,WAA0B,GAC3B,EAAE,oBAAoB,+BAqMtB"}
package/dist/components/fonts/FontPickerField.js CHANGED
@@ -42,7 +42,18 @@ export function FontPickerField({ id, value, label, description, readOnly, fonts
42
42
  return null;
43
43
  return fonts.find((item) => item.id === previewId) ?? null;
44
44
  }, [fonts, previewId]);
45
- return (_jsxs("div", { className: "vertebr-font-picker", children: [_jsx(FontFaceInjector, { items: fonts, apiBase: fontApiBase }), _jsxs("div", { className: "vertebr-font-picker-current", children: [_jsxs("div", { children: [_jsx("strong", { children: selected?.label ?? "Default system fonts" }), selected ? (_jsx("span", { children: selected.family })) : (_jsx("span", { children: "Manrope / Syne until a library font is chosen" }))] }), !readOnly ? (_jsx("button", { id: id, type: "button", className: "vertebr-btn", onClick: () => setOpen(true), children: "Choose font" })) : (_jsx("span", { id: id, className: "vertebr-font-picker-ro-anchor" }))] }), selected ? (_jsx("div", { className: "vertebr-font-picker-preview", children: _jsx(FontPreviewSample, { family: selected.family, bodyWeight: weightForItem(selected, "body"), headingWeight: weightForItem(selected, "heading"), compact: true }) })) : null, open ? (_jsx("div", { className: "vertebr-font-picker-modal-backdrop", onClick: () => closeModal(true), children: _jsxs("div", { className: "vertebr-font-picker-modal", role: "dialog", "aria-labelledby": `${id}-font-picker-title`, onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "vertebr-font-picker-modal-head", children: [_jsxs("div", { children: [_jsx("h3", { id: `${id}-font-picker-title`, children: label ?? "Choose a font" }), description ? _jsx("p", { children: description }) : null] }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => closeModal(true), children: "Close" })] }), loading ? (_jsx("div", { className: "vertebr-empty", children: "Loading fonts\u2026" })) : fonts.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: "No fonts in the library yet. Open Font Library to upload or add Google Fonts." })) : (_jsxs("div", { className: "vertebr-font-picker-modal-body", children: [_jsx("div", { className: "vertebr-font-picker-grid-scroll", children: _jsxs("div", { className: "vertebr-font-picker-grid", children: [_jsxs("button", { type: "button", className: "vertebr-font-picker-option", "data-active": previewId === "" || undefined, onClick: () => previewFont(""), children: [_jsx("strong", { children: "Default" }), _jsx("span", { children: "Manrope / Syne" })] }), fonts.map((item) => (_jsxs("button", { type: "button", className: "vertebr-font-picker-option", "data-active": item.id === previewId || undefined, style: {
45
+ const faceItems = useMemo(() => {
46
+ const items = [];
47
+ const seen = new Set();
48
+ for (const item of [selected, previewItem]) {
49
+ if (!item || seen.has(item.id))
50
+ continue;
51
+ seen.add(item.id);
52
+ items.push(item);
53
+ }
54
+ return items;
55
+ }, [previewItem, selected]);
56
+ return (_jsxs("div", { className: "vertebr-font-picker", children: [_jsx(FontFaceInjector, { items: faceItems, apiBase: fontApiBase }), _jsxs("div", { className: "vertebr-font-picker-current", children: [_jsxs("div", { children: [_jsx("strong", { children: selected?.label ?? "Default system fonts" }), selected ? (_jsx("span", { children: selected.family })) : (_jsx("span", { children: "Manrope / Syne until a library font is chosen" }))] }), !readOnly ? (_jsx("button", { id: id, type: "button", className: "vertebr-btn", onClick: () => setOpen(true), children: "Choose font" })) : (_jsx("span", { id: id, className: "vertebr-font-picker-ro-anchor" }))] }), selected ? (_jsx("div", { className: "vertebr-font-picker-preview", children: _jsx(FontPreviewSample, { family: selected.family, bodyWeight: weightForItem(selected, "body"), headingWeight: weightForItem(selected, "heading"), compact: true }) })) : null, open ? (_jsx("div", { className: "vertebr-font-picker-modal-backdrop", onClick: () => closeModal(true), children: _jsxs("div", { className: "vertebr-font-picker-modal", role: "dialog", "aria-labelledby": `${id}-font-picker-title`, onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "vertebr-font-picker-modal-head", children: [_jsxs("div", { children: [_jsx("h3", { id: `${id}-font-picker-title`, children: label ?? "Choose a font" }), description ? _jsx("p", { children: description }) : null] }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => closeModal(true), children: "Close" })] }), loading ? (_jsx("div", { className: "vertebr-empty", children: "Loading fonts\u2026" })) : fonts.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: "No fonts in the library yet. Open Font Library to upload or add Google Fonts." })) : (_jsxs("div", { className: "vertebr-font-picker-modal-body", children: [_jsx("div", { className: "vertebr-font-picker-grid-scroll", children: _jsxs("div", { className: "vertebr-font-picker-grid", children: [_jsxs("button", { type: "button", className: "vertebr-font-picker-option", "data-active": previewId === "" || undefined, onClick: () => previewFont(""), children: [_jsx("strong", { children: "Default" }), _jsx("span", { children: "Manrope / Syne" })] }), fonts.map((item) => (_jsxs("button", { type: "button", className: "vertebr-font-picker-option", "data-active": item.id === previewId || undefined, style: {
46
57
  fontFamily: `"${item.family}", ui-sans-serif, sans-serif`,
47
58
  fontWeight: weightForItem(item, "heading"),
48
59
  }, onClick: () => previewFont(item.id), children: [_jsx("strong", { children: item.label }), _jsx("span", { children: item.family }), _jsx("em", { children: "The quick brown fox" })] }, item.id)))] }) }), _jsxs("aside", { className: "vertebr-font-picker-detail", children: [_jsx("p", { className: "vertebr-font-picker-detail-label", children: "Preview" }), previewId === "" ? (_jsx(FontPreviewSample, { family: "Manrope", bodyWeight: 400, headingWeight: 700 })) : previewItem ? (_jsx(FontPreviewSample, { family: previewItem.family, bodyWeight: weightForItem(previewItem, "body"), headingWeight: weightForItem(previewItem, "heading") })) : (_jsx("div", { className: "vertebr-empty", children: "Select a font to preview." }))] })] })), _jsxs("div", { className: "vertebr-font-picker-modal-actions", children: [_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => closeModal(true), children: "Cancel" }), _jsx("button", { type: "button", className: "vertebr-btn", disabled: loading, onClick: () => closeModal(false), children: "Done" })] })] }) })) : null] }));
package/dist/styles/base.css CHANGED
@@ -27,27 +27,21 @@ html:has(.vertebr-error) body {
27
27
  width: 100%;
28
28
  display: grid;
29
29
  grid-template-columns: var(--vb-sidebar-width) 1fr;
30
- background:
31
- radial-gradient(
32
- 900px 480px at 0% -10%,
33
- var(--vb-glow-accent),
34
- transparent 55%
35
- ),
36
- radial-gradient(
37
- 700px 400px at 100% 100%,
38
- var(--vb-glow-cool),
39
- transparent 50%
40
- ),
41
- linear-gradient(180deg, var(--vb-bg-deep) 0%, var(--vb-bg) 45%);
30
+ grid-template-rows: var(--vb-topbar-height) 1fr;
31
+ background: var(--vb-bg);
42
32
  color: var(--vb-text);
43
33
  font-family: var(--vb-font);
44
- font-size: 15px;
45
- line-height: 1.45;
34
+ font-size: var(--vb-font-size-300);
35
+ line-height: var(--vb-line-height-normal);
46
36
  -webkit-font-smoothing: antialiased;
47
37
  isolation: isolate;
48
38
  overflow: clip;
49
39
  }
50
40
 
41
+ .vertebr-root[data-sidebar-collapsed="true"] {
42
+ grid-template-columns: var(--vb-sidebar-width-collapsed) 1fr;
43
+ }
44
+
51
45
  .vertebr-root *,
52
46
  .vertebr-root *::before,
53
47
  .vertebr-root *::after {
package/dist/styles/buttons.css CHANGED
@@ -27,23 +27,14 @@
27
27
  }
28
28
 
29
29
  .vertebr-btn-primary {
30
- background: linear-gradient(
31
- 180deg,
32
- var(--vb-btn-primary-from) 0%,
33
- var(--vb-btn-primary-to) 100%
34
- );
30
+ background: var(--vb-btn-primary-from);
35
31
  border-color: var(--vb-btn-primary-border);
36
32
  color: var(--vb-accent-contrast);
37
- font-weight: 600;
38
- box-shadow: 0 1px 0 var(--vb-surface-tint-strong) inset;
33
+ font-weight: var(--vb-font-weight-semibold);
39
34
  }
40
35
 
41
36
  .vertebr-btn-primary:hover:not(:disabled) {
42
- background: linear-gradient(
43
- 180deg,
44
- var(--vb-btn-primary-hover-from) 0%,
45
- var(--vb-btn-primary-hover-to) 100%
46
- );
37
+ background: var(--vb-btn-primary-hover-from);
47
38
  border-color: var(--vb-btn-primary-hover-border);
48
39
  }
49
40
 
package/dist/themes/dark.css CHANGED
@@ -1,55 +1,57 @@
1
1
  /**
2
- * Vertebr dark theme (default).
3
- * Apply with data-vb-theme="dark" or leave unset (:root defaults here).
2
+ * Vertebr dark theme (default) — neutral Shopify-inspired palette.
4
3
  */
5
4
  :root,
6
5
  [data-vb-theme="dark"] {
7
6
  color-scheme: dark;
8
7
 
9
- --vb-bg: #0e1014;
10
- --vb-bg-deep: #12151c;
11
- --vb-bg-elevated: #161922;
12
- --vb-bg-muted: #1e2330;
13
- --vb-bg-hover: #252b3a;
14
- --vb-border: #2a3142;
15
- --vb-border-strong: #3a4358;
16
- --vb-text: #f0eee8;
17
- --vb-text-muted: #8b93a7;
18
- --vb-text-subtle: #6a7285;
19
- --vb-accent: #c9a66b;
20
- --vb-accent-dim: #9a7d45;
21
- --vb-accent-soft: rgba(201, 166, 107, 0.14);
22
- --vb-accent-contrast: #1a140c;
23
- --vb-danger: #e07a72;
24
- --vb-danger-soft: rgba(224, 122, 114, 0.12);
25
- --vb-danger-text: #f3c4bf;
26
- --vb-ok: #87a87f;
27
- --vb-ok-soft: rgba(135, 168, 127, 0.14);
28
- --vb-warn-text: #e8d0a0;
8
+ --vb-bg: #1a1a1a;
9
+ --vb-bg-deep: #141414;
10
+ --vb-bg-elevated: #242424;
11
+ --vb-bg-muted: #2e2e2e;
12
+ --vb-bg-hover: #383838;
13
+ --vb-bg-subdued: #303030;
14
+ --vb-border: #424242;
15
+ --vb-border-subdued: #353535;
16
+ --vb-border-strong: #5c5c5c;
17
+ --vb-text: #f3f3f3;
18
+ --vb-text-muted: #a8a8a8;
19
+ --vb-text-subtle: #7a7a7a;
20
+ --vb-text-secondary: #b5b5b5;
21
+ --vb-accent: #008060;
22
+ --vb-accent-dim: #006e52;
23
+ --vb-accent-soft: rgba(0, 128, 96, 0.14);
24
+ --vb-accent-contrast: #ffffff;
25
+ --vb-interactive: #5c9eff;
26
+ --vb-interactive-soft: rgba(92, 158, 255, 0.12);
27
+ --vb-danger: #e51c00;
28
+ --vb-danger-soft: rgba(229, 28, 0, 0.12);
29
+ --vb-danger-text: #ff8a7a;
30
+ --vb-ok: #29845a;
31
+ --vb-ok-soft: rgba(41, 132, 90, 0.14);
32
+ --vb-warn-text: #ffc96b;
33
+ --vb-warn-soft: rgba(255, 201, 107, 0.12);
29
34
 
30
- --vb-glow-accent: rgba(201, 166, 107, 0.07);
31
- --vb-glow-cool: rgba(60, 80, 120, 0.08);
32
- --vb-surface-tint: rgba(255, 255, 255, 0.02);
33
- --vb-surface-tint-strong: rgba(255, 255, 255, 0.04);
34
- --vb-sidebar-from: #0e1014;
35
- --vb-sidebar-to: #12151c;
36
- --vb-header-from: rgba(14, 16, 20, 0.96);
37
- --vb-header-to: rgba(14, 16, 20, 0.86);
38
- --vb-actions-from: rgba(22, 25, 34, 0.65);
39
- --vb-actions-to: rgba(18, 21, 28, 0.95);
40
- --vb-input-focus-bg: #12151c;
41
- --vb-btn-primary-from: #d4b27a;
42
- --vb-btn-primary-to: #c9a66b;
43
- --vb-btn-primary-border: #b89255;
44
- --vb-btn-primary-hover-from: #dbbc88;
45
- --vb-btn-primary-hover-to: #d0ad72;
46
- --vb-btn-primary-hover-border: #c4a574;
35
+ --vb-glow-accent: transparent;
36
+ --vb-glow-cool: transparent;
37
+ --vb-surface-tint: rgba(255, 255, 255, 0.03);
38
+ --vb-surface-tint-strong: rgba(255, 255, 255, 0.06);
39
+ --vb-sidebar-from: #1a1a1a;
40
+ --vb-sidebar-to: #1a1a1a;
41
+ --vb-header-from: #1a1a1a;
42
+ --vb-header-to: #1a1a1a;
43
+ --vb-topbar-bg: #242424;
44
+ --vb-actions-from: rgba(36, 36, 36, 0.95);
45
+ --vb-actions-to: rgba(26, 26, 26, 0.98);
46
+ --vb-input-focus-bg: #2e2e2e;
47
+ --vb-btn-primary-from: #008060;
48
+ --vb-btn-primary-to: #008060;
49
+ --vb-btn-primary-border: #006e52;
50
+ --vb-btn-primary-hover-from: #00966d;
51
+ --vb-btn-primary-hover-to: #00966d;
52
+ --vb-btn-primary-hover-border: #008060;
47
53
 
48
- --vb-font: "IBM Plex Sans", "Segoe UI", sans-serif;
49
- --vb-mono: "IBM Plex Mono", ui-monospace, monospace;
50
- --vb-radius: 8px;
51
- --vb-radius-sm: 6px;
52
- --vb-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
53
- 0 18px 48px rgba(0, 0, 0, 0.45);
54
- --vb-sidebar-width: 260px;
54
+ --vb-radius: var(--vb-radius-md);
55
+ --vb-radius-sm: var(--vb-radius-sm);
56
+ --vb-shadow: var(--vb-shadow-md);
55
57
  }
package/dist/themes/index.css CHANGED
@@ -1,2 +1,3 @@
1
+ @import "./tokens.css";
1
2
  @import "./dark.css";
2
3
  @import "./light.css";
package/dist/themes/light.css CHANGED
@@ -1,102 +1,108 @@
1
1
  /**
2
- * Vertebr light theme.
3
- * Apply with data-vb-theme="light" on <html> or .vertebr-root.
2
+ * Vertebr light theme — neutral Shopify-inspired palette.
4
3
  */
5
4
  [data-vb-theme="light"] {
6
5
  color-scheme: light;
7
6
 
8
- --vb-bg: #f4f2ec;
9
- --vb-bg-deep: #ebe7de;
10
- --vb-bg-elevated: #fffcf7;
11
- --vb-bg-muted: #ebe6db;
12
- --vb-bg-hover: #e2dcd0;
13
- --vb-border: #d5cfc2;
14
- --vb-border-strong: #bdb5a6;
15
- --vb-text: #1c1a16;
16
- --vb-text-muted: #5c564c;
17
- --vb-text-subtle: #7a7368;
18
- --vb-accent: #9a6f2e;
19
- --vb-accent-dim: #7d5924;
20
- --vb-accent-soft: rgba(154, 111, 46, 0.12);
21
- --vb-accent-contrast: #fff8eb;
22
- --vb-danger: #c44d44;
23
- --vb-danger-soft: rgba(196, 77, 68, 0.12);
24
- --vb-danger-text: #9a2f28;
25
- --vb-ok: #3f6b3a;
26
- --vb-ok-soft: rgba(63, 107, 58, 0.12);
27
- --vb-warn-text: #7a5620;
7
+ --vb-bg: #f1f1f1;
8
+ --vb-bg-deep: #ebebeb;
9
+ --vb-bg-elevated: #ffffff;
10
+ --vb-bg-muted: #f6f6f7;
11
+ --vb-bg-hover: #f1f1f1;
12
+ --vb-bg-subdued: #fafbfb;
13
+ --vb-border: #e3e3e3;
14
+ --vb-border-subdued: #ebebeb;
15
+ --vb-border-strong: #c9cccf;
16
+ --vb-text: #202223;
17
+ --vb-text-muted: #6d7175;
18
+ --vb-text-subtle: #8c9196;
19
+ --vb-text-secondary: #5c5f62;
20
+ --vb-accent: #008060;
21
+ --vb-accent-dim: #006e52;
22
+ --vb-accent-soft: rgba(0, 128, 96, 0.08);
23
+ --vb-accent-contrast: #ffffff;
24
+ --vb-interactive: #005bd3;
25
+ --vb-interactive-soft: rgba(0, 91, 211, 0.08);
26
+ --vb-danger: #d72c0d;
27
+ --vb-danger-soft: rgba(215, 44, 13, 0.08);
28
+ --vb-danger-text: #8e1f0b;
29
+ --vb-ok: #108043;
30
+ --vb-ok-soft: rgba(16, 128, 67, 0.08);
31
+ --vb-warn-text: #916a00;
32
+ --vb-warn-soft: rgba(255, 184, 0, 0.12);
28
33
 
29
- --vb-glow-accent: rgba(154, 111, 46, 0.1);
30
- --vb-glow-cool: rgba(80, 100, 140, 0.06);
31
- --vb-surface-tint: rgba(28, 26, 22, 0.03);
32
- --vb-surface-tint-strong: rgba(28, 26, 22, 0.05);
33
- --vb-sidebar-from: #fffcf7;
34
- --vb-sidebar-to: #f4f2ec;
35
- --vb-header-from: rgba(255, 252, 247, 0.96);
36
- --vb-header-to: rgba(255, 252, 247, 0.88);
37
- --vb-actions-from: rgba(255, 252, 247, 0.85);
38
- --vb-actions-to: rgba(244, 242, 236, 0.98);
39
- --vb-input-focus-bg: #fffcf7;
40
- --vb-btn-primary-from: #b8893f;
41
- --vb-btn-primary-to: #9a6f2e;
42
- --vb-btn-primary-border: #815c26;
43
- --vb-btn-primary-hover-from: #c4964a;
44
- --vb-btn-primary-hover-to: #a87a34;
45
- --vb-btn-primary-hover-border: #8f662a;
34
+ --vb-glow-accent: transparent;
35
+ --vb-glow-cool: transparent;
36
+ --vb-surface-tint: rgba(32, 34, 35, 0.03);
37
+ --vb-surface-tint-strong: rgba(32, 34, 35, 0.05);
38
+ --vb-sidebar-from: #ebebeb;
39
+ --vb-sidebar-to: #ebebeb;
40
+ --vb-header-from: #ffffff;
41
+ --vb-header-to: #ffffff;
42
+ --vb-topbar-bg: #ffffff;
43
+ --vb-actions-from: rgba(255, 255, 255, 0.95);
44
+ --vb-actions-to: rgba(255, 255, 255, 0.98);
45
+ --vb-input-focus-bg: #ffffff;
46
+ --vb-btn-primary-from: #008060;
47
+ --vb-btn-primary-to: #008060;
48
+ --vb-btn-primary-border: #006e52;
49
+ --vb-btn-primary-hover-from: #006e52;
50
+ --vb-btn-primary-hover-to: #006e52;
51
+ --vb-btn-primary-hover-border: #005e46;
46
52
 
47
- --vb-font: "IBM Plex Sans", "Segoe UI", sans-serif;
48
- --vb-mono: "IBM Plex Mono", ui-monospace, monospace;
49
- --vb-radius: 8px;
50
- --vb-radius-sm: 6px;
51
- --vb-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset,
52
- 0 14px 40px rgba(40, 32, 18, 0.1);
53
- --vb-sidebar-width: 260px;
53
+ --vb-shadow: var(--vb-shadow-sm);
54
54
  }
55
55
 
56
56
  @media (prefers-color-scheme: light) {
57
57
  :root:not([data-vb-theme]) {
58
58
  color-scheme: light;
59
59
 
60
- --vb-bg: #f4f2ec;
61
- --vb-bg-deep: #ebe7de;
62
- --vb-bg-elevated: #fffcf7;
63
- --vb-bg-muted: #ebe6db;
64
- --vb-bg-hover: #e2dcd0;
65
- --vb-border: #d5cfc2;
66
- --vb-border-strong: #bdb5a6;
67
- --vb-text: #1c1a16;
68
- --vb-text-muted: #5c564c;
69
- --vb-text-subtle: #7a7368;
70
- --vb-accent: #9a6f2e;
71
- --vb-accent-dim: #7d5924;
72
- --vb-accent-soft: rgba(154, 111, 46, 0.12);
73
- --vb-accent-contrast: #fff8eb;
74
- --vb-danger: #c44d44;
75
- --vb-danger-soft: rgba(196, 77, 68, 0.12);
76
- --vb-danger-text: #9a2f28;
77
- --vb-ok: #3f6b3a;
78
- --vb-ok-soft: rgba(63, 107, 58, 0.12);
79
- --vb-warn-text: #7a5620;
60
+ --vb-bg: #f1f1f1;
61
+ --vb-bg-deep: #ebebeb;
62
+ --vb-bg-elevated: #ffffff;
63
+ --vb-bg-muted: #f6f6f7;
64
+ --vb-bg-hover: #f1f1f1;
65
+ --vb-bg-subdued: #fafbfb;
66
+ --vb-border: #e3e3e3;
67
+ --vb-border-subdued: #ebebeb;
68
+ --vb-border-strong: #c9cccf;
69
+ --vb-text: #202223;
70
+ --vb-text-muted: #6d7175;
71
+ --vb-text-subtle: #8c9196;
72
+ --vb-text-secondary: #5c5f62;
73
+ --vb-accent: #008060;
74
+ --vb-accent-dim: #006e52;
75
+ --vb-accent-soft: rgba(0, 128, 96, 0.08);
76
+ --vb-accent-contrast: #ffffff;
77
+ --vb-interactive: #005bd3;
78
+ --vb-interactive-soft: rgba(0, 91, 211, 0.08);
79
+ --vb-danger: #d72c0d;
80
+ --vb-danger-soft: rgba(215, 44, 13, 0.08);
81
+ --vb-danger-text: #8e1f0b;
82
+ --vb-ok: #108043;
83
+ --vb-ok-soft: rgba(16, 128, 67, 0.08);
84
+ --vb-warn-text: #916a00;
85
+ --vb-warn-soft: rgba(255, 184, 0, 0.12);
80
86
 
81
- --vb-glow-accent: rgba(154, 111, 46, 0.1);
82
- --vb-glow-cool: rgba(80, 100, 140, 0.06);
83
- --vb-surface-tint: rgba(28, 26, 22, 0.03);
84
- --vb-surface-tint-strong: rgba(28, 26, 22, 0.05);
85
- --vb-sidebar-from: #fffcf7;
86
- --vb-sidebar-to: #f4f2ec;
87
- --vb-header-from: rgba(255, 252, 247, 0.96);
88
- --vb-header-to: rgba(255, 252, 247, 0.88);
89
- --vb-actions-from: rgba(255, 252, 247, 0.85);
90
- --vb-actions-to: rgba(244, 242, 236, 0.98);
91
- --vb-input-focus-bg: #fffcf7;
92
- --vb-btn-primary-from: #b8893f;
93
- --vb-btn-primary-to: #9a6f2e;
94
- --vb-btn-primary-border: #815c26;
95
- --vb-btn-primary-hover-from: #c4964a;
96
- --vb-btn-primary-hover-to: #a87a34;
97
- --vb-btn-primary-hover-border: #8f662a;
87
+ --vb-glow-accent: transparent;
88
+ --vb-glow-cool: transparent;
89
+ --vb-surface-tint: rgba(32, 34, 35, 0.03);
90
+ --vb-surface-tint-strong: rgba(32, 34, 35, 0.05);
91
+ --vb-sidebar-from: #ebebeb;
92
+ --vb-sidebar-to: #ebebeb;
93
+ --vb-header-from: #ffffff;
94
+ --vb-header-to: #ffffff;
95
+ --vb-topbar-bg: #ffffff;
96
+ --vb-actions-from: rgba(255, 255, 255, 0.95);
97
+ --vb-actions-to: rgba(255, 255, 255, 0.98);
98
+ --vb-input-focus-bg: #ffffff;
99
+ --vb-btn-primary-from: #008060;
100
+ --vb-btn-primary-to: #008060;
101
+ --vb-btn-primary-border: #006e52;
102
+ --vb-btn-primary-hover-from: #006e52;
103
+ --vb-btn-primary-hover-to: #006e52;
104
+ --vb-btn-primary-hover-border: #005e46;
98
105
 
99
- --vb-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset,
100
- 0 14px 40px rgba(40, 32, 18, 0.1);
106
+ --vb-shadow: var(--vb-shadow-sm);
101
107
  }
102
108
  }
package/dist/themes/tokens.css ADDED
@@ -0,0 +1,52 @@
1
+ /**
2
+ * Shared design tokens — spacing, type, elevation (theme-agnostic).
3
+ */
4
+ :root {
5
+ --vb-space-100: 0.25rem;
6
+ --vb-space-200: 0.5rem;
7
+ --vb-space-300: 0.75rem;
8
+ --vb-space-400: 1rem;
9
+ --vb-space-500: 1.25rem;
10
+ --vb-space-600: 1.5rem;
11
+ --vb-space-800: 2rem;
12
+ --vb-space-1000: 2.5rem;
13
+ --vb-space-1200: 3rem;
14
+
15
+ --vb-font-size-75: 0.75rem;
16
+ --vb-font-size-100: 0.8125rem;
17
+ --vb-font-size-200: 0.875rem;
18
+ --vb-font-size-300: 1rem;
19
+ --vb-font-size-400: 1.125rem;
20
+ --vb-font-size-500: 1.375rem;
21
+ --vb-font-size-600: 1.75rem;
22
+
23
+ --vb-font-weight-regular: 400;
24
+ --vb-font-weight-medium: 500;
25
+ --vb-font-weight-semibold: 600;
26
+
27
+ --vb-line-height-tight: 1.2;
28
+ --vb-line-height-normal: 1.45;
29
+ --vb-line-height-loose: 1.6;
30
+
31
+ --vb-radius-xs: 4px;
32
+ --vb-radius-sm: 6px;
33
+ --vb-radius-md: 8px;
34
+ --vb-radius-lg: 12px;
35
+ --vb-radius-full: 999px;
36
+
37
+ --vb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
38
+ --vb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
39
+ --vb-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
40
+
41
+ --vb-topbar-height: 3.25rem;
42
+ --vb-sidebar-width: 240px;
43
+ --vb-sidebar-width-collapsed: 4rem;
44
+ --vb-savebar-height: 3.5rem;
45
+
46
+ --vb-duration-fast: 120ms;
47
+ --vb-duration-normal: 200ms;
48
+ --vb-ease: cubic-bezier(0.4, 0, 0.2, 1);
49
+
50
+ --vb-font: "Inter", "IBM Plex Sans", system-ui, sans-serif;
51
+ --vb-mono: "IBM Plex Mono", ui-monospace, monospace;
52
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vertebr/react",
3
- "version": "0.6.0",
3
+ "version": "0.7.0",
4
4
  "description": "Vertebr admin dashboard UI",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",