@crediblemark/build 0.24.1 → 0.24.3

package/dist/{chunk-5H2KI7SK.mjs → chunk-XUV5DF24.mjs}

@@ -6147,7 +6147,7 @@ var Layout = ({ children }) => {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsx36(Canvas, {}),
+                  /* @__PURE__ */ jsx36("div", { className: getLayoutClassName("editor"), children: /* @__PURE__ */ jsx36(Canvas, {}) }),
                   !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx36(
                     Sidebar,
                     {

package/dist/index.css

@@ -146,20 +146,35 @@
 
 /* bundle/index.css */
 .CredBuild {
-  --cb-bg-base: #020617;
-  --cb-bg-surface: #0f172a;
-  --cb-bg-panel: #1e293b;
-  --cb-gold: #fbbf24;
-  --cb-gold-glow: rgba(251, 191, 36, 0.15);
-  --cb-gold-faint: rgba(251, 191, 36, 0.05);
-  --cb-silver: #f8fafc;
-  --cb-silver-muted: #cbd5e1;
-  --cb-border: rgba(248, 250, 252, 0.1);
   --credbuild-font-family: "Inter", sans-serif;
+  --cb-radius-m: 5px;
+}
+.CredBuild[data-theme=light] {
+  --cb-bg-base: #f8fafc;
+  --cb-bg-surface: #ffffff;
+  --cb-bg-panel: #f1f5f9;
+  --cb-gold: #d97706;
+  --cb-gold-glow: rgba(217, 119, 6, 0.1);
+  --cb-gold-faint: rgba(217, 119, 6, 0.05);
+  --cb-silver: #0f172a;
+  --cb-silver-muted: #64748b;
+  --cb-border: #e2e8f0;
+}
+.CredBuild[data-theme=dark] {
+  --cb-bg-base: #191919;
+  --cb-bg-surface: #202020;
+  --cb-bg-panel: #262626;
+  --cb-gold: #ffffff;
+  --cb-gold-glow: rgba(255, 255, 255, 0.1);
+  --cb-gold-faint: rgba(255, 255, 255, 0.05);
+  --cb-silver: #ffffff;
+  --cb-silver-muted: #a1a1aa;
+  --cb-border: #2f2f2f;
 }
 .CredBuild {
   background-color: var(--cb-bg-base) !important;
   color: var(--cb-silver) !important;
+  font-family: var(--credbuild-font-family) !important;
 }
 .CredBuildHeader {
   background: var(--cb-bg-base) !important;
@@ -167,8 +182,8 @@
   height: 48px !important;
 }
 .CredBuild svg {
-  color: var(--cb-gold) !important;
-  stroke: var(--cb-gold) !important;
+  color: currentColor !important;
+  stroke: currentColor !important;
 }
 .CredBuild h1,
 .CredBuild h2,
@@ -196,9 +211,6 @@
 .CredBuild button {
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
-.CredBuild button:hover {
-  filter: brightness(1.2);
-}
 [class*=Layout-left],
 [class*=Layout-right],
 [class*=Layout-header],
@@ -233,10 +245,11 @@
   background-color: var(--cb-bg-surface) !important;
   color: var(--cb-silver) !important;
   border: 1px solid var(--cb-border) !important;
+  padding: 4px 8px !important;
 }
 [class*=DrawerItem-draggable]:hover {
   border-color: var(--cb-gold) !important;
-  background-color: var(--cb-gold-glow) !important;
+  background-color: var(--cb-gold-faint) !important;
 }
 [class*=DrawerItem-name] {
   color: var(--cb-silver) !important;
@@ -244,19 +257,26 @@
 }
 [class*=DrawerItem-icon] svg,
 [class*=DrawerItem-draggable] svg {
-  color: var(--cb-gold) !important;
-  stroke: var(--cb-gold) !important;
+  color: var(--cb-silver-muted) !important;
+  stroke: var(--cb-silver-muted) !important;
+  opacity: 0.7 !important;
+}
+[class*=DrawerItem-draggable]:hover svg {
+  color: var(--cb-silver) !important;
+  stroke: var(--cb-silver) !important;
   opacity: 1 !important;
 }
 [class*=ComponentList-title] {
-  background-color: var(--cb-bg-panel) !important;
-  color: var(--cb-gold) !important;
+  background-color: transparent !important;
+  color: var(--cb-silver-muted) !important;
   border-radius: 0 !important;
   margin-bottom: 2px !important;
-  font-weight: 700 !important;
+  font-weight: 600 !important;
   letter-spacing: 0.05em !important;
   text-transform: uppercase !important;
   opacity: 1 !important;
+  padding: 8px 10px !important;
+  border-bottom: 1px solid var(--cb-border) !important;
 }
 [class*=ComponentList-title]:hover {
   background-color: var(--cb-gold-faint) !important;
@@ -267,10 +287,11 @@
 [class*=ExternalInput-input],
 [class*=Select-select] {
   background-color: var(--cb-bg-base) !important;
+  background: var(--cb-bg-base) !important;
   border: 1px solid var(--cb-border) !important;
   border-radius: var(--cb-radius-m) !important;
   color: var(--cb-silver) !important;
-  padding: 8px 12px !important;
+  padding: 6px 10px !important;
   font-size: 12px !important;
   width: 100% !important;
   transition: all 0.2s ease !important;
@@ -290,8 +311,8 @@
   font-weight: 600 !important;
   text-transform: uppercase !important;
   letter-spacing: 0.05em !important;
-  margin-top: 12px !important;
-  margin-bottom: 8px !important;
+  margin-top: 6px !important;
+  margin-bottom: 4px !important;
 }
 [class*=SidebarSection] {
   border-bottom: 1px solid var(--cb-border) !important;
@@ -317,30 +338,8 @@
   border: 1px solid var(--cb-border) !important;
   border-radius: var(--cb-radius-m) !important;
   color: var(--cb-silver) !important;
-  padding: 8px !important;
-  margin-bottom: 4px !important;
-}
-.CredBuild [class*=Layout-right] div {
-  background-image: none !important;
-}
-[class*=CredBuildHeader] {
-  background-color: var(--cb-bg-base) !important;
-  background: var(--cb-bg-base) !important;
-  border-bottom: 1px solid var(--cb-border) !important;
-}
-[class*=Header-path],
-[class*=Header-title],
-[class*=Header-inner] * {
-  color: var(--cb-gold) !important;
-  font-weight: 600 !important;
-}
-[class*=Header] div,
-[class*=Header] button,
-[class*=Header] span {
-  background-color: transparent !important;
-  background: transparent !important;
-  border-color: transparent !important;
-  box-shadow: none !important;
+  padding: 6px !important;
+  margin-bottom: 3px !important;
 }
 [class*=Button--secondary] {
   background-color: var(--cb-bg-surface) !important;
@@ -370,66 +369,13 @@
   box-shadow: 0 0 15px var(--cb-gold-glow) !important;
   transform: translateY(-1px);
 }
-[class*=Header] svg,
-[class*=Header] svg * {
-  color: var(--cb-gold) !important;
-  stroke: var(--cb-gold) !important;
-  fill: none !important;
-}
-[class*=Header-tools] > div,
-[class*=Header-rightActions] > div {
-  background: transparent !important;
-}
-[class*=Drawer] input,
-[class*=ComponentList] input,
-[class*=Search] input {
-  background-color: var(--cb-bg-base) !important;
-  color: var(--cb-silver) !important;
-  border: 1px solid var(--cb-border) !important;
-  border-radius: var(--cb-radius-m) !important;
-  padding: 10px 12px !important;
-  font-size: 13px !important;
-  transition: all 0.2s ease !important;
-}
-[class*=Drawer] input:focus {
-  border-color: var(--cb-gold) !important;
-  box-shadow: 0 0 10px var(--cb-gold-glow) !important;
-  outline: none !important;
-}
-[class*=ComponentList-title] {
-  color: var(--cb-gold) !important;
-  text-transform: uppercase !important;
-  font-weight: 700 !important;
-  letter-spacing: 0.07em !important;
-  opacity: 1 !important;
-  padding: 12px !important;
-}
-[class*=ComponentList-title]:hover {
-  background-color: var(--cb-gold-glow) !important;
-  color: var(--cb-gold) !important;
-}
-[class*=ComponentList-titleIcon] svg {
-  color: var(--cb-gold) !important;
-}
-[class*=DrawerItem] {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  border: none !important;
-  border-bottom: none !important;
-}
-[class*=DrawerItem-name],
-[class*=DrawerItem] span,
-[class*=DrawerItem] div {
-  background-color: transparent !important;
-  background: transparent !important;
-}
-:root {
+.CredBuild {
   --credbuild-color-azure-05: var(--cb-gold);
   --credbuild-color-azure-06: var(--cb-gold);
   --credbuild-color-azure-07: var(--cb-gold);
   --credbuild-color-azure-10: var(--cb-gold-glow);
   --credbuild-color-azure-11: var(--cb-gold-glow);
-  --credbuild-color-white: var(--cb-silver);
+  --credbuild-color-white: var(--cb-bg-surface);
   --credbuild-color-grey-11: var(--cb-bg-surface);
   --credbuild-color-grey-10: var(--cb-border);
   --credbuild-color-grey-09: var(--cb-bg-base);

package/dist/index.js

@@ -14872,7 +14872,7 @@ var Layout = ({ children }) => {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Canvas, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: getLayoutClassName("editor"), children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Canvas, {}) }),
                   !hasDesktopFieldsPlugin && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
                     Sidebar,
                     {

package/dist/index.mjs

@@ -12,7 +12,7 @@ import {
   registerOverlayPortal,
   useCredBuild,
   useGetCredBuild
-} from "./chunk-5H2KI7SK.mjs";
+} from "./chunk-XUV5DF24.mjs";
 import "./chunk-FC3ZRBT2.mjs";
 import {
   setDeep

package/dist/no-external.js

@@ -14872,7 +14872,7 @@ var Layout = ({ children }) => {
                       ]
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Canvas, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: getLayoutClassName("editor"), children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Canvas, {}) }),
                   !hasDesktopFieldsPlugin && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
                     Sidebar,
                     {

package/dist/no-external.mjs

@@ -12,7 +12,7 @@ import {
   registerOverlayPortal,
   useCredBuild,
   useGetCredBuild
-} from "./chunk-5H2KI7SK.mjs";
+} from "./chunk-XUV5DF24.mjs";
 import "./chunk-FC3ZRBT2.mjs";
 import {
   setDeep

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crediblemark/build",
-  "version": "0.24.1",
+  "version": "0.24.3",
   "description": "The open-source visual editor for React",
   "author": "Rasyiqi Crediblemark",
   "repository": {