@jackuait/blok 0.7.3-beta.3 → 0.7.3

package/src/styles/main.css

@@ -212,7 +212,7 @@
   override Blok's styling — even when the host uses `!important`.
   Specificity raised from (0,0,1) to (0,1,1) to beat host element-selector rules.
   font-size and font-weight are intentionally omitted from this rule so that the
-  Header tool's own Tailwind utility classes (text-4xl, font-bold, etc.) remain
+  Header tool's own Tailwind utility classes (text-3xl, font-bold, etc.) remain
   effective in the normal cascade. The all:initial !important on the root boundary
   already neutralizes the UA stylesheet's default heading sizes inside the editor.
 */
@@ -234,6 +234,13 @@
   font-weight: bolder;
 }
 
+/* Override the browser UA color: MarkText on <mark> elements so that marks
+   without an explicit inline color inherit the parent's text color instead
+   of defaulting to black in dark mode. */
+:where([data-blok-interface], [data-blok-popover]) mark {
+  color: inherit;
+}
+
 /* Correct the odd em font sizing in all browsers for code elements. */
 :where([data-blok-interface], [data-blok-popover]) :is(code, kbd, samp, pre) {
   font-family: --theme(
@@ -484,7 +491,7 @@
   --spacing-block-padding-vertical: 0.4em;
 
   /* Max-width */
-  --max-width-content: 650px;
+  --max-width-content: 720px;
 
   /* Font family */
   --font-mono: 'PT Mono', 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;
@@ -638,6 +645,11 @@
   --color-link-input-border: var(--blok-link-input-border);
   --color-popover-icon-bg: var(--blok-popover-icon-bg);
   --color-popover-icon-active-bg: var(--blok-popover-icon-active-bg);
+
+  /* Color picker swatch ring */
+  --color-swatch-ring-hover: var(--blok-swatch-ring-hover);
+  --color-swatch-ring-active: var(--blok-swatch-ring-active);
+
 }
 
 @layer utilities {
@@ -667,6 +679,7 @@
   --blok-popover-border: rgba(55, 53, 47, 0.09);
   --blok-popover-shadow: rgba(13, 20, 33, 0.1);
   --blok-popover-bg: #ffffff;
+  --blok-popover-box-shadow: 0 0 0 1px rgba(55, 53, 47, 0.09), 0 4px 16px rgba(0, 0, 0, 0.1), 0 16px 40px -8px rgba(0, 0, 0, 0.08);
   --blok-popover-border-icon: rgb(201 201 204 / 48%);
   --blok-popover-border-icon-disabled: #eff0f1;
   --blok-item-focus-bg: rgba(35, 131, 226, 0.14);
@@ -695,6 +708,50 @@
   /* Popover icon container */
   --blok-popover-icon-bg: rgba(55, 53, 47, 0.06);
   --blok-popover-icon-active-bg: rgba(35, 131, 226, 0.1);
+
+  /* Table */
+  --blok-table-border: #d1d5db;
+  --blok-table-heading-bg: #f9fafb;
+  --blok-table-grip-outline: transparent;
+  --blok-table-drag-source-bg: #f3f4f6;
+
+  /* Toggle switch */
+  --blok-toggle-off-bg: #d4d4d8;
+  --blok-toggle-on-bg: #2383e2;
+  --blok-toggle-thumb-on-bg: #ffffff;
+
+  /* Checklist */
+  --blok-checklist-border: rgba(0, 0, 0, 0.28);
+  --blok-checklist-shadow: rgba(0, 0, 0, 0.08);
+  --blok-checklist-hover-ring: rgba(35, 131, 226, 0.14);
+  --blok-checklist-readonly-fill: #94a3b8;
+
+  /* Color picker swatch */
+  --blok-swatch-neutral-bg: #f7f7f5;
+  --blok-swatch-ring-hover: rgba(0, 0, 0, 0.10);
+  --blok-swatch-ring-active: rgba(0, 0, 0, 0.30);
+
+  /* Marker colors — light theme */
+  --blok-color-gray-text: #787774;
+  --blok-color-gray-bg: #f1f1ef;
+  --blok-color-brown-text: #9f6b53;
+  --blok-color-brown-bg: #f4eeee;
+  --blok-color-orange-text: #d9730d;
+  --blok-color-orange-bg: #fbecdd;
+  --blok-color-yellow-text: #cb9b00;
+  --blok-color-yellow-bg: #fbf3db;
+  --blok-color-green-text: #448361;
+  --blok-color-green-bg: #edf3ec;
+  --blok-color-teal-text: #2b9a8f;
+  --blok-color-teal-bg: #e4f5f3;
+  --blok-color-blue-text: #337ea9;
+  --blok-color-blue-bg: #e7f3f8;
+  --blok-color-purple-text: #9065b0;
+  --blok-color-purple-bg: #f6f3f9;
+  --blok-color-pink-text: #c14c8a;
+  --blok-color-pink-bg: #f9f0f5;
+  --blok-color-red-text: #d44c47;
+  --blok-color-red-bg: #fdebec;
 }
 
 /* ─── Dark theme — system preference ────────────────── */
@@ -711,14 +768,15 @@
     --blok-link: #529cca;
     --blok-line-gray: #37352f;
     --blok-tooltip-bg: #191918;
-    --blok-tooltip-font: #ffffff;
+    --blok-tooltip-font: #e8e6e3;
     --blok-icon-active-bg: rgba(35, 131, 226, 0.2);
     --blok-icon-active-text: #529cca;
-    --blok-text-primary: #f0efed;
+    --blok-text-primary: #e2e0dc;
     --blok-text-secondary: #a39e98;
-    --blok-popover-border: rgba(255, 255, 255, 0.07);
+    --blok-popover-border: rgba(255, 255, 255, 0.14);
     --blok-popover-shadow: rgba(0, 0, 0, 0.6);
     --blok-popover-bg: #252525;
+    --blok-popover-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 4px 24px rgba(0, 0, 0, 0.5), 0 16px 40px -8px rgba(0, 0, 0, 0.4);
     --blok-popover-border-icon: #37352f;
     --blok-popover-border-icon-disabled: #2f2d29;
     --blok-item-focus-bg: rgba(35, 131, 226, 0.2);
@@ -737,12 +795,56 @@
     --blok-notify-btn-cancel-text: #a39e98;
     --blok-notify-btn-confirm-bg: #34c992;
     --blok-mobile-border: rgba(255, 255, 255, 0.07);
-    --blok-search-input-bg: #2f2f2f;
-    --blok-search-input-border: rgba(255, 255, 255, 0.07);
+    --blok-search-input-bg: #363636;
+    --blok-search-input-border: rgba(255, 255, 255, 0.20);
     --blok-search-input-focus-border: rgba(35, 131, 226, 0.5);
     --blok-link-input-border: #37352f;
     --blok-popover-icon-bg: rgba(255, 255, 255, 0.08);
     --blok-popover-icon-active-bg: rgba(35, 131, 226, 0.15);
+
+    /* Table */
+    --blok-table-border: #3e3e3d;
+    --blok-table-heading-bg: #272725;
+    --blok-table-grip-outline: rgba(255, 255, 255, 0.12);
+    --blok-table-drag-source-bg: rgba(255, 255, 255, 0.07);
+
+    /* Toggle switch */
+    --blok-toggle-off-bg: #3f3f46;
+    --blok-toggle-on-bg: #529cca;
+    --blok-toggle-thumb-on-bg: #ffffff;
+
+    /* Checklist */
+    --blok-checklist-border: rgba(255, 255, 255, 0.22);
+    --blok-checklist-shadow: rgba(0, 0, 0, 0.3);
+    --blok-checklist-hover-ring: rgba(82, 156, 202, 0.2);
+    --blok-checklist-readonly-fill: #475569;
+
+    /* Color picker swatch */
+    --blok-swatch-neutral-bg: #3a3a38;
+    --blok-swatch-ring-hover: rgba(255, 255, 255, 0.15);
+    --blok-swatch-ring-active: rgba(255, 255, 255, 0.35);
+
+    /* Marker colors — dark theme */
+    --blok-color-gray-text: #9b9b9b;
+    --blok-color-gray-bg: #2f2f2f;
+    --blok-color-brown-text: #c59177;
+    --blok-color-brown-bg: #452a1c;
+    --blok-color-orange-text: #dc8c47;
+    --blok-color-orange-bg: #4d2f14;
+    --blok-color-yellow-text: #d4ab49;
+    --blok-color-yellow-bg: #544012;
+    --blok-color-green-text: #5db184;
+    --blok-color-green-bg: #1e432f;
+    --blok-color-teal-text: #5cbcb3;
+    --blok-color-teal-bg: #1b4642;
+    --blok-color-blue-text: #5c9fcc;
+    --blok-color-blue-bg: #123a54;
+    --blok-color-purple-text: #a67dca;
+    --blok-color-purple-bg: #341d49;
+    --blok-color-pink-text: #d45e99;
+    --blok-color-pink-bg: #4b1b33;
+    --blok-color-red-text: #dd5e5a;
+    --blok-color-red-bg: #4e1a18;
   }
 }
 
@@ -759,14 +861,15 @@
   --blok-link: #529cca;
   --blok-line-gray: #37352f;
   --blok-tooltip-bg: #191918;
-  --blok-tooltip-font: #ffffff;
+  --blok-tooltip-font: #e8e6e3;
   --blok-icon-active-bg: rgba(35, 131, 226, 0.2);
   --blok-icon-active-text: #529cca;
-  --blok-text-primary: #f0efed;
+  --blok-text-primary: #e2e0dc;
   --blok-text-secondary: #a39e98;
-  --blok-popover-border: rgba(255, 255, 255, 0.07);
+  --blok-popover-border: rgba(255, 255, 255, 0.14);
   --blok-popover-shadow: rgba(0, 0, 0, 0.6);
   --blok-popover-bg: #252525;
+  --blok-popover-box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 4px 24px rgba(0, 0, 0, 0.5), 0 16px 40px -8px rgba(0, 0, 0, 0.4);
   --blok-popover-border-icon: #37352f;
   --blok-popover-border-icon-disabled: #2f2d29;
   --blok-item-focus-bg: rgba(35, 131, 226, 0.2);
@@ -785,12 +888,134 @@
   --blok-notify-btn-cancel-text: #a39e98;
   --blok-notify-btn-confirm-bg: #34c992;
   --blok-mobile-border: rgba(255, 255, 255, 0.07);
-  --blok-search-input-bg: #2f2f2f;
-  --blok-search-input-border: rgba(255, 255, 255, 0.07);
+  --blok-search-input-bg: #363636;
+  --blok-search-input-border: rgba(255, 255, 255, 0.20);
   --blok-search-input-focus-border: rgba(35, 131, 226, 0.5);
   --blok-link-input-border: #37352f;
   --blok-popover-icon-bg: rgba(255, 255, 255, 0.08);
   --blok-popover-icon-active-bg: rgba(35, 131, 226, 0.15);
+
+  /* Table */
+  --blok-table-border: #3e3e3d;
+  --blok-table-heading-bg: #272725;
+  --blok-table-grip-outline: rgba(255, 255, 255, 0.12);
+  --blok-table-drag-source-bg: rgba(255, 255, 255, 0.07);
+
+  /* Toggle switch */
+  --blok-toggle-off-bg: #3f3f46;
+  --blok-toggle-on-bg: #e4e4e7;
+  --blok-toggle-thumb-on-bg: #252525;
+
+  /* Checklist */
+  --blok-checklist-border: rgba(255, 255, 255, 0.22);
+  --blok-checklist-shadow: rgba(0, 0, 0, 0.3);
+  --blok-checklist-hover-ring: rgba(82, 156, 202, 0.2);
+
+  /* Color picker swatch */
+  --blok-swatch-neutral-bg: #3a3a38;
+  --blok-swatch-ring-hover: rgba(255, 255, 255, 0.15);
+  --blok-swatch-ring-active: rgba(255, 255, 255, 0.35);
+
+  /* Marker colors — dark theme */
+  --blok-color-gray-text: #9b9b9b;
+  --blok-color-gray-bg: #2f2f2f;
+  --blok-color-brown-text: #c59177;
+  --blok-color-brown-bg: #452a1c;
+  --blok-color-orange-text: #dc8c47;
+  --blok-color-orange-bg: #4d2f14;
+  --blok-color-yellow-text: #d4ab49;
+  --blok-color-yellow-bg: #544012;
+  --blok-color-green-text: #5db184;
+  --blok-color-green-bg: #1e432f;
+  --blok-color-teal-text: #5cbcb3;
+  --blok-color-teal-bg: #1b4642;
+  --blok-color-blue-text: #5c9fcc;
+  --blok-color-blue-bg: #123a54;
+  --blok-color-purple-text: #a67dca;
+  --blok-color-purple-bg: #341d49;
+  --blok-color-pink-text: #d45e99;
+  --blok-color-pink-bg: #4b1b33;
+  --blok-color-red-text: #dd5e5a;
+  --blok-color-red-bg: #4e1a18;
+}
+
+/* ─── Checklist checkbox — custom styled ────────────────── */
+/*
+  appearance: none removes native browser rendering entirely, eliminating the
+  bright-white native checkbox that causes harsh contrast in dark mode.
+  We rebuild the full visual state in CSS for consistent cross-browser rendering.
+*/
+
+@keyframes blok-checkbox-pop {
+  0%   { transform: scale(1); }
+  35%  { transform: scale(1.18); }
+  65%  { transform: scale(0.9); }
+  82%  { transform: scale(1.07); }
+  100% { transform: scale(1); }
+}
+
+[data-blok-interface] [data-list-style="checklist"] input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  flex-shrink: 0;
+  border-radius: 5px;
+  border: 2px solid var(--blok-checklist-border);
+  background-color: transparent;
+  box-shadow: inset 0 1px 2px var(--blok-checklist-shadow);
+  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
+}
+
+[data-blok-interface] [data-list-style="checklist"] input[type="checkbox"]:checked {
+  background-color: var(--blok-active-icon);
+  border-color: var(--blok-active-icon);
+  box-shadow: none;
+  animation: blok-checkbox-pop 280ms linear;
+  /* SVG checkmark — white path on accent-blue background */
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 5L4 7.5L8.5 2.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
+  background-size: 10px 10px;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+[data-blok-interface] [data-list-style="checklist"] input[type="checkbox"]:not(:disabled):not(:checked):hover {
+  border-color: var(--blok-active-icon);
+  transform: scale(1.06);
+  box-shadow: 0 0 0 3px var(--blok-checklist-hover-ring), inset 0 1px 2px var(--blok-checklist-shadow);
+}
+
+[data-blok-interface] [data-list-style="checklist"] input[type="checkbox"]:not(:disabled):checked:hover {
+  box-shadow: 0 0 0 3px var(--blok-checklist-hover-ring);
+}
+
+[data-blok-interface] [data-list-style="checklist"] input[type="checkbox"]:disabled:not(:checked) {
+  opacity: 0.5;
+}
+
+[data-blok-interface] [data-list-style="checklist"] input[type="checkbox"]:disabled:checked {
+  background-color: var(--blok-checklist-readonly-fill);
+  border-color: var(--blok-checklist-readonly-fill);
+  box-shadow: none;
+  animation: none;
+}
+
+/*
+  The global input:focus-visible rule above suppresses all input focus rings.
+  Checkboxes need a visible focus ring for keyboard accessibility — restore it.
+*/
+[data-blok-interface] [data-list-style="checklist"] input[type="checkbox"]:focus-visible {
+  outline: 2px solid var(--blok-active-icon);
+  outline-offset: 2px;
+}
+
+/* Dark mode: more muted checked text so completed items feel visually "done" */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-blok-theme="light"]) [data-blok-interface] [data-list-style="checklist"] [data-checked="true"] {
+    opacity: 0.45;
+  }
+}
+
+[data-blok-theme="dark"] [data-blok-interface] [data-list-style="checklist"] [data-checked="true"] {
+  opacity: 0.45;
 }
 
 /*
@@ -963,7 +1188,8 @@
  */
 [data-blok-table-heading] [data-blok-table-cell],
 [data-blok-table-heading-col] {
-  @apply font-semibold bg-gray-50;
+  @apply font-semibold;
+  background-color: var(--blok-table-heading-bg);
 }
 
 /**
@@ -974,6 +1200,74 @@
   @apply opacity-100;
 }
 
+/**
+ * Dark theme overrides for table UI chrome.
+ * Grip handles, add-row/col pills, and scroll haze all use hardcoded
+ * Tailwind light-gray/white classes that are too bright on dark backgrounds.
+ * Rules are written for both dark entry points (media query + explicit attr).
+ */
+@media (prefers-color-scheme: dark) {
+  /* Grip pills — collapsed/idle state */
+  :root:not([data-blok-theme="light"]) [data-blok-interface] [data-blok-table-grip]:not(.bg-gray-200):not(.bg-blue-500) {
+    background-color: #4a4a4a;
+  }
+  /* Grip pills — hover-expanded state */
+  :root:not([data-blok-theme="light"]) [data-blok-interface] [data-blok-table-grip].bg-gray-200 {
+    background-color: #555554;
+  }
+  /* Grip dot SVG (exclude active/blue state — text-white must win there) */
+  :root:not([data-blok-theme="light"]) [data-blok-interface] [data-blok-table-grip]:not(.bg-blue-500) svg {
+    color: white;
+  }
+  /* Add row/col pill: border + subtle rest-state fill */
+  :root:not([data-blok-theme="light"]) [data-blok-interface] :is([data-blok-table-add-row], [data-blok-table-add-col]) .border-gray-300 {
+    border-color: rgba(255, 255, 255, 0.17);
+    background-color: #2c2c2b;
+  }
+  /* Add row/col pill hover background */
+  :root:not([data-blok-theme="light"]) [data-blok-interface] :is([data-blok-table-add-row], [data-blok-table-add-col]):hover .border-gray-300 {
+    background-color: #2e2e2d;
+  }
+  /* Add row/col icon color */
+  :root:not([data-blok-theme="light"]) [data-blok-interface] :is([data-blok-table-add-row], [data-blok-table-add-col]) .border-gray-300 svg {
+    color: #9e9e9d;
+  }
+  /* Scroll haze: dark background gradient instead of white */
+  :root:not([data-blok-theme="light"]) [data-blok-interface] [data-blok-table-haze="left"] {
+    background-image: linear-gradient(to right, var(--blok-dark), transparent);
+  }
+  :root:not([data-blok-theme="light"]) [data-blok-interface] [data-blok-table-haze="right"] {
+    background-image: linear-gradient(to left, var(--blok-dark), transparent);
+  }
+}
+
+/* Explicit dark theme attribute — same overrides */
+[data-blok-theme="dark"] [data-blok-interface] [data-blok-table-grip]:not(.bg-gray-200):not(.bg-blue-500) {
+  background-color: #4a4a4a;
+}
+[data-blok-theme="dark"] [data-blok-interface] [data-blok-table-grip].bg-gray-200 {
+  background-color: #555554;
+}
+[data-blok-theme="dark"] [data-blok-interface] [data-blok-table-grip]:not(.bg-blue-500) svg {
+  color: white;
+}
+[data-blok-theme="dark"] [data-blok-interface] :is([data-blok-table-add-row], [data-blok-table-add-col]) .border-gray-300 {
+  border-color: rgba(255, 255, 255, 0.17);
+  background-color: #2c2c2b;
+}
+[data-blok-theme="dark"] [data-blok-interface] :is([data-blok-table-add-row], [data-blok-table-add-col]):hover .border-gray-300 {
+  background-color: #2e2e2d;
+}
+[data-blok-theme="dark"] [data-blok-interface] :is([data-blok-table-add-row], [data-blok-table-add-col]) .border-gray-300 svg {
+  color: #9e9e9d;
+}
+[data-blok-theme="dark"] [data-blok-interface] [data-blok-table-haze="left"] {
+  background-image: linear-gradient(to right, var(--blok-dark), transparent);
+}
+[data-blok-theme="dark"] [data-blok-interface] [data-blok-table-haze="right"] {
+  background-image: linear-gradient(to left, var(--blok-dark), transparent);
+}
+
 /**
  * Slash search input appearance
  * When the user types "/" to open the toolbox, the contenteditable
@@ -981,7 +1275,7 @@
  */
 [data-blok-slash-search],
 [data-blok-slash-search]:focus-visible {
-  @apply bg-search-input-bg rounded-[4px] transition-colors duration-150 max-w-[240px];
+  @apply bg-search-input-bg rounded-md transition-colors duration-150 w-fit max-w-[240px] px-2;
 }
 
 [data-blok-slash-search]::after {
@@ -989,6 +1283,10 @@
   @apply text-gray-text font-medium text-base pointer-events-none;
 }
 
+[data-blok-slash-search]::before {
+  content: none !important;
+}
+
 /**
  * Custom scrollbar for popover items
  */

package/src/tools/header/index.ts

@@ -702,7 +702,7 @@ export class Header implements BlockTool {
    * @returns The arrow element
    */
   private buildArrow(): HTMLElement {
-    const arrow = buildArrow(this._isOpen, this.readOnly ? null : () => this.toggleOpen(), {}, {
+    const arrow = buildArrow(this._isOpen, () => this.toggleOpen(), {}, {
       collapse: this.api.i18n.t('tools.toggle.ariaLabelCollapse'),
       expand: this.api.i18n.t('tools.toggle.ariaLabelExpand'),
     });
@@ -971,10 +971,10 @@ export class Header implements BlockTool {
     icon: string;
     styles: string;
   }> = [
-    { number: 1, tag: 'H1', nameKey: 'tools.header.heading1', name: 'Heading 1', icon: IconH1, styles: 'text-4xl font-bold mt-8 mb-1' },
-    { number: 2, tag: 'H2', nameKey: 'tools.header.heading2', name: 'Heading 2', icon: IconH2, styles: 'text-3xl font-semibold mt-6 mb-px' },
-    { number: 3, tag: 'H3', nameKey: 'tools.header.heading3', name: 'Heading 3', icon: IconH3, styles: 'text-2xl font-semibold mt-4 mb-px' },
-    { number: 4, tag: 'H4', nameKey: 'tools.header.heading4', name: 'Heading 4', icon: IconH4, styles: 'text-xl font-semibold mt-3 mb-px' },
+    { number: 1, tag: 'H1', nameKey: 'tools.header.heading1', name: 'Heading 1', icon: IconH1, styles: 'text-3xl font-semibold mt-8 mb-px' },
+    { number: 2, tag: 'H2', nameKey: 'tools.header.heading2', name: 'Heading 2', icon: IconH2, styles: 'text-2xl font-semibold mt-[26px] mb-px' },
+    { number: 3, tag: 'H3', nameKey: 'tools.header.heading3', name: 'Heading 3', icon: IconH3, styles: 'text-xl font-semibold mt-5 mb-px' },
+    { number: 4, tag: 'H4', nameKey: 'tools.header.heading4', name: 'Heading 4', icon: IconH4, styles: 'text-lg font-semibold mt-3 mb-px' },
     { number: 5, tag: 'H5', nameKey: 'tools.header.heading5', name: 'Heading 5', icon: IconH5, styles: 'text-base font-semibold mt-3 mb-px' },
     { number: 6, tag: 'H6', nameKey: 'tools.header.heading6', name: 'Heading 6', icon: IconH6, styles: 'text-sm font-semibold mt-3 mb-px' },
   ];

package/src/tools/list/constants.ts

@@ -3,9 +3,16 @@
  */
 
 /**
- * Indentation padding per depth level in pixels
+ * Indentation padding per depth level in pixels (unordered/checklist)
+ * Matches Notion's bullet indent: 1.7em × 16px = 27.2px
  */
-export const INDENT_PER_LEVEL = 24;
+export const INDENT_PER_LEVEL = 27;
+
+/**
+ * Indentation padding per depth level in pixels (ordered lists)
+ * Matches Notion's number indent: 1.6em × 16px = 25.6px
+ */
+export const ORDERED_INDENT_PER_LEVEL = 26;
 
 /**
  * Base styles for list wrapper
@@ -17,7 +24,7 @@ export const BASE_STYLES = 'outline-hidden py-[3px] mt-[2px] mb-px';
 /**
  * Styles for standard list items (unordered, ordered)
  */
-export const ITEM_STYLES = 'outline-hidden pl-0.5 leading-[1.6em]';
+export const ITEM_STYLES = 'outline-hidden pl-0.5 leading-[1.5] items-center';
 
 /**
  * Styles for checklist items
@@ -27,7 +34,7 @@ export const CHECKLIST_ITEM_STYLES = 'flex items-start pl-0.5';
 /**
  * Styles for checkbox input
  */
-export const CHECKBOX_STYLES = 'mt-1 w-4 mr-2 h-4 cursor-pointer accent-current';
+export const CHECKBOX_STYLES = 'mt-0.5 w-5 mr-2 h-5 cursor-pointer accent-current';
 
 /**
  * Placeholder translation key

package/src/tools/list/depth-validator.ts

@@ -16,6 +16,11 @@ export interface DepthValidationOptions {
   blockIndex: number;
   /** Current depth */
   currentDepth: number;
+  /**
+   * When true, skip depth-promotion heuristics (shouldMatchNext/Prev).
+   * Used during group drag-drops where the group's relative structure is preserved.
+   */
+  skipDepthPromotion?: boolean;
 }
 
 /**
@@ -63,7 +68,7 @@ export class ListDepthValidator {
    * @returns The target depth for the dropped item
    */
   getTargetDepthForMove(options: DepthValidationOptions): number {
-    const { blockIndex, currentDepth } = options;
+    const { blockIndex, currentDepth, skipDepthPromotion } = options;
     const maxAllowedDepth = this.getMaxAllowedDepth(blockIndex);
 
     // If current depth exceeds max, cap it
@@ -71,6 +76,13 @@ export class ListDepthValidator {
       return maxAllowedDepth;
     }
 
+    // Depth-promotion heuristics are skipped for group moves: the group preserves
+    // its own relative structure, so we should not promote a block's depth to match
+    // its new neighbours (which may be members of the same group).
+    if (skipDepthPromotion) {
+      return currentDepth;
+    }
+
     // Check if we're inserting before a list item (next block)
     const nextBlock = this.blocks.getBlockByIndex(blockIndex + 1);
     const nextIsListItem = nextBlock && nextBlock.name === TOOL_NAME;

package/src/tools/list/dom-builder.ts

@@ -11,6 +11,7 @@ import { twMerge } from '../../components/utils/tw';
 
 import {
   INDENT_PER_LEVEL,
+  ORDERED_INDENT_PER_LEVEL,
   BASE_STYLES,
   ITEM_STYLES,
   CHECKLIST_ITEM_STYLES,
@@ -162,10 +163,11 @@ export const buildStandardContent = (context: DOMBuilderContext): HTMLElement =>
     item.style.fontSize = itemSize;
   }
 
-  // Apply indentation based on depth
+  // Apply indentation based on depth (ordered lists use smaller indent to match Notion)
   const depth = data.depth ?? 0;
   if (depth > 0) {
-    item.style.marginLeft = `${depth * INDENT_PER_LEVEL}px`;
+    const indent = data.style === 'ordered' ? ORDERED_INDENT_PER_LEVEL : INDENT_PER_LEVEL;
+    item.style.marginLeft = `${depth * indent}px`;
   }
 
   // Create marker element
@@ -224,7 +226,7 @@ export const buildChecklistContent = (context: DOMBuilderContext): HTMLElement =
 
   const content = document.createElement('div');
   content.className = twMerge(
-    'flex-1 outline-hidden leading-[1.6em]',
+    'flex-1 outline-hidden leading-[1.5]',
     data.checked ? 'line-through opacity-60' : '',
     ...PLACEHOLDER_CLASSES
   );

package/src/tools/list/index.ts

@@ -149,7 +149,7 @@ export class ListItem implements BlockTool {
   }
 
   public moved(event: MoveEvent): void {
-    this.validateAndAdjustDepthAfterMove(event.toIndex);
+    this.validateAndAdjustDepthAfterMove(event.toIndex, event.isGroupMove);
     this.updateMarkersAfterPositionChange();
   }
 
@@ -162,11 +162,12 @@ export class ListItem implements BlockTool {
     this.updateSiblingListMarkers();
   }
 
-  private validateAndAdjustDepthAfterMove(newIndex: number): void {
+  private validateAndAdjustDepthAfterMove(newIndex: number, skipDepthPromotion?: boolean): void {
     const currentDepth = this.getDepth();
     const targetDepth = this.depthValidator.getTargetDepthForMove({
       blockIndex: newIndex,
       currentDepth,
+      skipDepthPromotion,
     });
 
     if (currentDepth !== targetDepth) {

package/src/tools/paragraph/index.ts

@@ -199,9 +199,9 @@ export class Paragraph implements BlockTool {
    * Paragraph wrapper styling classes using Tailwind.
    */
   private static readonly WRAPPER_CLASSES = [
-    'leading-[1.6em]',
+    'leading-[1.5]',
     'outline-hidden',
-    'mt-[2px]',
+    'mt-px',
     'mb-px',
     '[&>p:first-of-type]:mt-0',
     '[&>p:last-of-type]:mb-0',

package/src/tools/table/table-cell-color-picker.ts

@@ -20,12 +20,12 @@ export const createCellColorPicker = (options: CellColorPickerOptions): CellColo
   const handle = createColorPicker({
     i18n: options.i18n,
     testIdPrefix: 'cell-color',
-    defaultModeIndex: 1,
     modes: [
       { key: 'textColor', labelKey: 'tools.marker.textColor', presetField: 'text' },
       { key: 'backgroundColor', labelKey: 'tools.marker.background', presetField: 'bg' },
     ],
     onColorSelect: (color, modeKey) => {
+      handle.setActiveColor(color, modeKey);
       options.onColorSelect(color, modeKey as CellColorMode);
     },
   });

package/src/tools/table/table-cell-selection.ts

@@ -682,7 +682,7 @@ export class TableCellSelection {
     pill.style.height = `${PILL_HEIGHT}px`;
     pill.style.pointerEvents = 'auto';
     pill.style.transform = 'translate(-50%, -50%)';
-    pill.style.outline = '2px solid white';
+    pill.style.outline = '2px solid var(--blok-table-grip-outline, transparent)';
 
     const svg = createGripDotsSvg('vertical');
 
@@ -740,7 +740,6 @@ export class TableCellSelection {
             element: pickerElement,
           }],
           isFlippable: false,
-          width: '12.5rem',
         },
       });
     }

package/src/tools/table/table-core.ts

@@ -7,7 +7,7 @@ export const ROW_ATTR = 'data-blok-table-row';
 export const CELL_ATTR = 'data-blok-table-cell';
 
 export const BORDER_WIDTH = 1;
-const BORDER_STYLE = `${BORDER_WIDTH}px solid #d1d5db`;
+const BORDER_STYLE = `${BORDER_WIDTH}px solid var(--blok-table-border)`;
 
 const ROW_CLASSES = [
   'flex',
@@ -18,7 +18,7 @@ const CELL_CLASSES = [
   'px-2',
   'min-h-[2em]',
   'outline-hidden',
-  'leading-normal',
+  'leading-none',
   'text-sm',
   'cursor-text',
 ];

package/src/tools/table/table-grip-visuals.ts

@@ -1,5 +1,17 @@
 export const GRIP_HOVER_SIZE = 16;
 
+/**
+ * Sets only the size dimension of a grip pill (height for col, width for row).
+ * Use this in full-state resets where the bg class is already handled by a className overwrite.
+ */
+export const setGripPillSize = (grip: HTMLElement, type: 'col' | 'row', size: number): void => {
+  if (type === 'col') {
+    Object.assign(grip.style, { height: `${size}px` });
+  } else {
+    Object.assign(grip.style, { width: `${size}px` });
+  }
+};
+
 /**
  * Dot positions for vertical layout (2 cols × 3 rows) — used by row grips.
  */
@@ -78,11 +90,7 @@ export const expandGrip = (grip: HTMLElement, type: 'col' | 'row'): void => {
  * Column grips shrink height; row grips shrink width.
  */
 export const collapseGrip = (grip: HTMLElement, type: 'col' | 'row', pillSize: number): void => {
-  if (type === 'col') {
-    Object.assign(grip.style, { height: `${pillSize}px` });
-  } else {
-    Object.assign(grip.style, { width: `${pillSize}px` });
-  }
+  setGripPillSize(grip, type, pillSize);
 
   grip.classList.remove('bg-gray-200');
   grip.classList.add('bg-gray-300');