@k2b/cloud 0.38.0 → 0.40.0

package/src/styles/panel.css

@@ -0,0 +1,416 @@
+/* Panel slot: one provider page in a same-origin iframe beside the app.
+   From 1024 px it is a column after the app card and the app card narrows;
+   from 768 to 1023 px a non-modal drawer over the right edge; below 768 px a
+   sheet from the bottom. The canvas carries the state from the cloud_panel
+   cookie, so the server draws the first frame. Loading, failure, the resize
+   shield and the closing hint are stacked in the body and only change their
+   visibility, so nothing ever moves inside the reserved box. */
+.cloud-panel {
+  --cloud-panel-width: var(--cloud-panel-width-set, 26rem);
+  position: relative;
+  display: none;
+  min-height: 0;
+  color: var(--k2b-text);
+}
+
+@media not all and (min-width: 1280px) {
+  .cloud-panel {
+    --cloud-panel-width: var(--cloud-panel-width-set, 21.5rem);
+  }
+}
+
+/* The same surface, radius, frame and dark border as the app card. */
+.cloud-panel__card {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  border: 1px solid transparent;
+  border-radius: var(--cloud-card-radius, var(--k2b-radius-dialog));
+  background: var(--k2b-surface);
+  box-shadow: var(--k2b-shadow-frame);
+}
+
+.dark .cloud-panel__card {
+  border-color: var(--k2b-border);
+}
+
+/* One 46 px row, no line below; the provider's page starts right under it. */
+.cloud-panel__head {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 0.25rem;
+  min-height: 2.875rem;
+  padding: 0.375rem 0.375rem 0.375rem 0.5rem;
+}
+
+.cloud-panel__head .k2b-icon-button .ti {
+  font-size: 1.125rem;
+}
+
+.cloud-panel__title {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem;
+  padding-inline-start: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.cloud-panel__title > .ti {
+  flex: none;
+  font-size: 1rem;
+  color: var(--k2b-text-muted);
+}
+
+.cloud-panel__title > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cloud-panel__tabs {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  gap: 0.125rem;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.cloud-panel__tab {
+  display: inline-flex;
+  flex: none;
+  max-width: 12rem;
+  height: 2rem;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0 0.625rem;
+  border: 0;
+  border-radius: var(--k2b-radius-control);
+  background: transparent;
+  color: var(--k2b-text-muted);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.cloud-panel__tab > .ti {
+  flex: none;
+  font-size: 1rem;
+}
+
+.cloud-panel__tab:hover {
+  background: var(--k2b-hover);
+  color: var(--k2b-text);
+}
+
+.cloud-panel__tab[aria-selected="true"] {
+  background: var(--k2b-surface-muted);
+  color: var(--k2b-text);
+}
+
+.cloud-panel__tab:focus-visible,
+.cloud-panel__grabber:focus-visible {
+  outline: 2px solid var(--k2b-focus-ring);
+  outline-offset: -2px;
+}
+
+/* Row 1 holds the consent question when the shell asks; the layers share row 2 and only change visibility. */
+.cloud-panel__body {
+  position: relative;
+  display: grid;
+  flex: 1;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
+  min-height: 0;
+}
+
+.cloud-panel__body > :is(.cloud-panel__skeleton, .cloud-panel__frame, .cloud-panel__fallback, .cloud-panel__shield, .cloud-panel__closing) {
+  grid-area: 2 / 1;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  visibility: hidden;
+  opacity: 0;
+}
+
+.cloud-panel__body > .cloud-panel__closing {
+  grid-row: 1 / -1;
+}
+
+.cloud-panel[data-state="ready"] .cloud-panel__frame,
+.cloud-panel[data-state="failed"] .cloud-panel__fallback,
+.cloud-panel[data-resizing="true"] .cloud-panel__shield,
+.cloud-panel[data-closing="true"] .cloud-panel__closing {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* A loading page already takes focus and keys; the skeleton covers it until it reports ready. */
+.cloud-panel[data-state="loading"] .cloud-panel__frame {
+  visibility: visible;
+}
+
+.cloud-panel[data-state="loading"] .cloud-panel__skeleton {
+  visibility: visible;
+  opacity: 1;
+}
+
+.cloud-panel__frame {
+  display: block;
+  border: 0;
+  background: var(--k2b-surface);
+}
+
+.cloud-panel__skeleton {
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0.5rem 1rem;
+  background: var(--k2b-surface);
+  pointer-events: none;
+}
+
+.cloud-panel__skeleton > span {
+  display: block;
+  height: 0.75rem;
+  border-radius: 0.375rem;
+  background: var(--k2b-surface-muted);
+}
+
+.cloud-panel__skeleton > span:nth-child(2) {
+  width: 85%;
+}
+
+.cloud-panel__skeleton > span:last-child {
+  width: 60%;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  html:not([data-k2b-motion="reduced"]) .cloud-panel[data-state="loading"] .cloud-panel__skeleton > span {
+    animation: cloud-panel-pulse 1.4s ease-in-out infinite;
+  }
+}
+
+@keyframes cloud-panel-pulse {
+  50% {
+    opacity: 0.55;
+  }
+}
+
+.cloud-panel__fallback {
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  background: var(--k2b-surface);
+}
+
+/* Takes the pointer from the iframe while the separator drags. */
+.cloud-panel__shield {
+  z-index: 2;
+  cursor: col-resize;
+}
+
+/* Dragging clearly below 20 rem: the panel fades and says what release does. */
+.cloud-panel__closing {
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: color-mix(in srgb, var(--k2b-surface) 82%, transparent);
+  pointer-events: none;
+}
+
+.cloud-panel__closing > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--k2b-radius-control);
+  background: var(--k2b-surface-muted);
+  color: var(--k2b-text);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.cloud-panel__closing .ti {
+  font-size: 1rem;
+  color: var(--k2b-text-muted);
+}
+
+.cloud-panel__grabber {
+  display: none;
+}
+
+/* The separator sits in the gap at the panel's start edge. */
+.cloud-panel__resize {
+  position: absolute !important;
+  inset-block: 0;
+  inset-inline-start: calc(-6px - var(--cloud-card-inset, 0.5rem) / 2);
+  z-index: 4;
+}
+
+/* Column: the app area is the AppWorkspace host, so the app lays out by its narrowed width. */
+@media (min-width: 1024px) {
+  .cloud-app-canvas[data-panel="open"] > .cloud-panel {
+    display: block;
+    flex: none;
+    align-self: stretch;
+    width: var(--cloud-panel-width);
+    margin-inline-start: var(--cloud-card-inset, 0.5rem);
+  }
+
+  .cloud-app-canvas[data-panel="open"] > [data-cloud-app-area] {
+    container: k2b-app-area / inline-size;
+  }
+}
+
+/* Drawer: over the app's right edge; the app keeps its width. Not modal. */
+@media (min-width: 768px) {
+  @media not all and (min-width: 1024px) {
+    .cloud-app-canvas[data-panel="open"] > .cloud-panel {
+      position: absolute;
+      z-index: 20;
+      inset-block: calc(0.5rem + env(safe-area-inset-top, 0px)) calc(0.5rem + env(safe-area-inset-bottom, 0px));
+      inset-inline-end: calc(0.5rem + env(safe-area-inset-right, 0px));
+      display: block;
+      width: min(var(--cloud-panel-width), calc(100% - 1rem));
+    }
+
+    .cloud-panel__card {
+      border-radius: var(--k2b-radius-dialog);
+      box-shadow: var(--k2b-shadow-float);
+    }
+
+    .cloud-panel__resize {
+      display: none !important;
+    }
+  }
+}
+
+/* Sheet: from the bottom, a little over half the height; the grabber makes it full. */
+@media not all and (min-width: 768px) {
+  .cloud-app-canvas[data-panel-sheet="open"] > .cloud-panel {
+    position: fixed;
+    z-index: 30;
+    inset-inline: 0;
+    bottom: 0;
+    display: block;
+    height: 58dvh;
+  }
+
+  /* The page's last row scrolls up above the sheet. Only the end of the page
+     grows, so nothing above it moves; full pages own their own scrollers. */
+  .cloud-app-canvas[data-layout-authenticated][data-panel-sheet="open"]:not([data-layout-full-page]) .layout-content-main {
+    padding-bottom: max(58dvh, var(--cloud-tab-bar-space, 0px));
+    scroll-padding-bottom: max(58dvh, var(--cloud-tab-bar-space, 0px));
+  }
+
+  .cloud-app-canvas[data-panel-sheet="open"] > .cloud-panel[data-panel-size="full"] {
+    height: calc(100dvh - 2.875rem - env(safe-area-inset-top, 0px));
+  }
+
+  .cloud-panel__card {
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+    border-radius: 1.125rem 1.125rem 0 0;
+    box-shadow: 0 -10px 36px rgb(9 9 11 / 0.18);
+  }
+
+  .dark .cloud-panel__card {
+    border-bottom-color: transparent;
+    box-shadow: 0 -10px 36px rgb(0 0 0 / 0.5);
+  }
+
+  .cloud-panel__grabber {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 1.25rem;
+    padding: 0;
+    border: 0;
+    background: transparent;
+  }
+
+  .cloud-panel__grabber > span {
+    width: 2.375rem;
+    height: 0.3125rem;
+    border-radius: 999px;
+    background: var(--k2b-border-strong);
+  }
+
+  .cloud-panel__head {
+    padding-top: 0;
+  }
+
+  .cloud-panel__resize {
+    display: none !important;
+  }
+}
+
+@media print {
+  .cloud-panel {
+    display: none !important;
+  }
+}
+
+/* The provider's page inside the iframe: the panel surface from the first paint. */
+.cloud-panel-page {
+  display: flex;
+  height: 100dvh;
+  min-height: 0;
+  flex-direction: column;
+  background: var(--k2b-surface);
+}
+
+html:has([data-cloud-panel-page]),
+html:has([data-cloud-panel-page]) body {
+  background: var(--k2b-surface);
+}
+
+/* The shell's consent question: one calm notice above the provider page, inset from the card edge like the
+   tabs above it. The server draws it when the answer is missing, so hydration never moves it; the error line is
+   reserved and fills in place. */
+.cloud-panel .cloud-panel__consent.k2b-notice-card {
+  display: none;
+  grid-area: 1 / 1;
+  margin: 0 0.5rem 0.5rem;
+  padding: 0.75rem 0.875rem 0;
+  outline: none;
+}
+
+.cloud-panel[data-consent="ask"] .cloud-panel__consent.k2b-notice-card {
+  display: block;
+}
+
+.cloud-panel__consent-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+/* The reserved line doubles as the notice's bottom padding until a failed save fills it. */
+.cloud-panel__consent-error {
+  min-height: 1.75rem;
+  margin: 0;
+  padding-block: 0.25rem;
+  color: var(--k2b-danger-text);
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+}
+
+.cloud-panel__menu {
+  display: inline-flex;
+  flex: none;
+}

package/src/styles/resource-search.css

@@ -184,10 +184,14 @@
 .cloud-resource-search__result:hover {
   background: var(--k2b-hover);
 }
-.cloud-resource-search__result.is-active,
-.cloud-resource-search__result.is-selected {
+/* The keyboard-active option is a state of the listbox and keeps the platform
+   selection; a picked resource is an object row and carries the app fill. */
+.cloud-resource-search__result.is-active {
   background: var(--k2b-selected);
 }
+.cloud-resource-search__result.is-selected {
+  background: var(--ui-app-selected);
+}
 .cloud-resource-search__result-copy {
   display: flex;
   flex: 1;

package/src/styles/tokens.css

@@ -7,15 +7,26 @@
   --ui-surface-subtle: rgb(248 248 248 / 0.96);
   --ui-surface-muted: rgb(243 244 243 / 0.96);
   --ui-surface-raised: rgb(255 255 255 / 0.99);
-  /* Dimmed text stays at WCAG AA on the muted surfaces it often sits on, such
-     as dialog section groups, not only on the plain surface. */
-  --ui-text-dimmed: color-mix(in srgb, var(--color-zinc-500) 80%, var(--color-zinc-600));
+  /* The ink hierarchy matches @k2b/ui: secondary is its text-secondary, and
+     dimmed sits one step below its text-muted. Dimmed keeps at least 6.5:1
+     on the muted surfaces it often sits on, such as dialog section groups. */
+  --ui-text-secondary: #27272a;
+  --ui-text-dimmed: #55555e;
   --ui-border: rgb(218 220 219 / 0.68);
   --ui-border-strong: rgb(207 210 208 / 0.9);
   --ui-hover: rgb(239 240 239 / 0.9);
   --ui-active: rgb(229 231 230 / 0.94);
   --ui-selected: color-mix(in srgb, var(--color-blue-500) 7%, var(--ui-surface));
-  --ui-app-accent-text: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 78%, black);
+  /* app-color.ts computes these defaults from --color-blue-500; app-color.test.ts pins them. */
+  --app-ink-light: #2469d4;
+  --app-ink-dark: #589aff;
+  --app-selected-light: #f0f6ff;
+  --app-selected-dark: #15243b;
+  --app-selected-nav-light: #eaf2ff;
+  --app-selected-nav-dark: #152742;
+  --ui-app-accent-text: var(--app-ink-light);
+  --ui-app-selected: var(--app-selected-light);
+  --ui-app-selected-nav: var(--app-selected-nav-light);
   --ui-app-accent-border: var(--app-accent, var(--color-blue-500));
   --ui-focus: inset 0 0 0 2px color-mix(in srgb, var(--color-blue-500) 45%, transparent);
   --ui-action-primary-surface: var(--color-zinc-900);
@@ -42,7 +53,6 @@
   --ui-data-divider: var(--ui-border);
   --ui-data-row-divider: color-mix(in srgb, var(--ui-border) 72%, transparent);
   --ui-data-row-hover: rgb(9 9 11 / 0.025);
-  --ui-data-row-selected: var(--ui-selected);
   --ui-data-column-hover: rgb(9 9 11 / 0.012);
   --ui-dialog-surface: var(--ui-surface-raised);
   --ui-dialog-border: var(--ui-border-strong);
@@ -137,13 +147,16 @@
   --ui-surface-subtle: color-mix(in srgb, var(--ui-surface) 68%, var(--ui-surface-muted));
   --ui-surface-muted: #20242a;
   --ui-surface-raised: #181d24;
-  --ui-text-dimmed: color-mix(in srgb, var(--color-zinc-500) 40%, var(--color-zinc-400));
+  --ui-text-secondary: #f1f1f3;
+  --ui-text-dimmed: #a8a8b2;
   --ui-border: #29313a;
   --ui-border-strong: #3a4552;
   --ui-hover: #252c35;
   --ui-active: color-mix(in srgb, var(--ui-hover) 72%, var(--ui-border-strong));
   --ui-selected: color-mix(in srgb, var(--color-blue-400) 12%, var(--ui-surface));
-  --ui-app-accent-text: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
+  --ui-app-accent-text: var(--app-ink-dark);
+  --ui-app-selected: var(--app-selected-dark);
+  --ui-app-selected-nav: var(--app-selected-nav-dark);
   --ui-app-accent-border: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
   --ui-focus: inset 0 0 0 2px color-mix(in srgb, var(--color-blue-400) 55%, transparent);
   --ui-action-primary-surface: var(--color-zinc-100);
@@ -186,23 +199,32 @@
   --ui-shadow-workspace-edge: -3px 0 6px -5px rgb(0 0 0 / 0.28), 3px 0 6px -5px rgb(0 0 0 / 0.28);
 }
 
-/* App appearance is applied on the canvas rather than :root. Recompute the
-   derived accent roles here so an app never inherits the platform fallback. */
+/* Custom properties resolve where declared. Each app scope must re-read its
+   inline per-app values instead of inheriting the resolved platform defaults.
+   The page shell's body carries the current app's scope so portalled dialogs inherit it. */
 .cloud-app-canvas,
 .app-accent-scope {
-  --ui-app-accent-text: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 78%, black);
+  --ui-app-accent-text: var(--app-ink-light);
+  --ui-app-selected: var(--app-selected-light);
+  --ui-app-selected-nav: var(--app-selected-nav-light);
   --ui-app-accent-border: var(--app-accent, var(--color-blue-500));
   /* Portable UI components consume their own optional hook; Cloud alone maps
      it to the active app appearance. */
   --k2b-app-workspace-active: var(--ui-app-accent-text);
+  --k2b-app-workspace-selected: var(--ui-app-selected-nav);
+  --k2b-row-selected: var(--ui-app-selected);
   --k2b-detail-panel-accent: var(--ui-app-accent-text);
   --k2b-link-accent: var(--ui-app-accent-text);
 }
 
 .dark :is(.cloud-app-canvas, .app-accent-scope) {
-  --ui-app-accent-text: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
+  --ui-app-accent-text: var(--app-ink-dark);
+  --ui-app-selected: var(--app-selected-dark);
+  --ui-app-selected-nav: var(--app-selected-nav-dark);
   --ui-app-accent-border: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white);
   --k2b-app-workspace-active: var(--ui-app-accent-text);
+  --k2b-app-workspace-selected: var(--ui-app-selected-nav);
+  --k2b-row-selected: var(--ui-app-selected);
   --k2b-detail-panel-accent: var(--ui-app-accent-text);
   --k2b-link-accent: var(--ui-app-accent-text);
 }
@@ -222,7 +244,7 @@
 }
 
 @utility text-secondary {
-  @apply text-zinc-700 dark:text-zinc-300;
+  color: var(--ui-text-secondary);
 }
 
 @utility text-dimmed {
@@ -230,5 +252,6 @@
 }
 
 @utility text-label {
-  @apply text-sm font-medium text-zinc-700 dark:text-zinc-300;
+  @apply text-sm font-medium;
+  color: var(--ui-text-secondary);
 }

package/src/styles/utilities-buttons.css

@@ -246,7 +246,7 @@
 @utility icon-btn {
   border-radius: var(--ui-radius-control);
   @apply inline-flex h-8 w-8 items-center justify-center p-1;
-  @apply text-zinc-400 dark:text-zinc-500;
+  @apply text-dimmed;
   @apply transition-[color,background-color] duration-150 ease-out;
   @apply bg-transparent border-0 shadow-none;
   @apply hover:text-zinc-700 hover:bg-zinc-100;
@@ -398,8 +398,9 @@
   background: var(--ui-hover);
 }
 
+/* An active filter chip shares the navigation fill, as the @k2b/ui FilterChip does. */
 .filter-chip-trigger[data-state="active"] {
   border-color: transparent;
-  background: var(--ui-selected);
+  background: var(--ui-app-selected-nav);
   box-shadow: none;
 }

package/src/styles/utilities-data.css

@@ -19,8 +19,9 @@
   }
 }
 
+/* Selected rows carry the active app's selection fill, as @k2b/ui rows do. */
 @utility data-table-row-selected {
-  background: var(--ui-data-row-selected);
+  background: var(--ui-app-selected);
 }
 
 @utility data-table-column-hover {

package/src/styles/utilities-feedback.css

@@ -88,11 +88,11 @@
 }
 
 @utility menu-label {
-  @apply px-4 pt-3 pb-1 text-xs font-medium uppercase tracking-wider text-zinc-500;
+  @apply px-4 pt-3 pb-1 text-xs font-medium uppercase tracking-wider text-dimmed;
 }
 
 @utility state-placeholder-icon {
-  @apply flex shrink-0 items-center justify-center text-zinc-400 dark:text-zinc-500;
+  @apply flex shrink-0 items-center justify-center text-dimmed;
 }
 
 @utility state-placeholder-icon-panel {

package/src/styles/utilities-layout.css

@@ -319,23 +319,17 @@
   gap: 0.625rem;
 }
 
+/* The box and the app ink; the chip comes from the shared `k2b-icon-tile` on the same element. */
 .app-overview-icon {
   width: 2.5rem;
   height: 2.5rem;
-  border-radius: var(--ui-radius-control);
-  background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 9%, var(--ui-surface)) !important;
-  color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 80%, black) !important;
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 16%, transparent);
+  color: var(--ui-app-accent-text) !important;
 }
 
 .app-overview-icon > i {
   color: inherit !important;
 }
 
-.dark .app-overview-icon {
-  color: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white) !important;
-}
-
 .app-overview-title {
   font-size: 1.125rem;
   letter-spacing: -0.015em;
@@ -507,15 +501,11 @@
 }
 
 .floating-window {
-  border: 1px solid color-mix(in srgb, var(--app-accent, var(--ui-border-strong)) 28%, var(--ui-border-strong));
+  border: 1px solid var(--ui-border-strong);
   border-radius: var(--ui-dialog-radius);
   box-shadow: var(--ui-shadow-float);
 }
 
-.dark .floating-window {
-  border-color: color-mix(in srgb, var(--app-accent, var(--ui-border-strong)) 34%, var(--ui-border-strong));
-}
-
 .panel-dialog-layout[data-surface="floating"] {
   gap: 0;
   border: 1px solid var(--ui-dialog-border);

package/src/styles/utilities-markdown-editor.css

@@ -95,7 +95,7 @@
 .md-editor-tool {
   @apply inline-flex items-center justify-center;
   @apply w-7 h-7 rounded;
-  @apply text-zinc-500 dark:text-zinc-400;
+  @apply text-dimmed;
   @apply hover:bg-zinc-200 hover:text-zinc-800;
   @apply dark:hover:bg-zinc-700 dark:hover:text-zinc-100;
   @apply transition-colors;
@@ -339,7 +339,7 @@
   pointer-events: none !important;
   user-select: none !important;
   z-index: 0 !important;
-  @apply text-zinc-400 dark:text-zinc-500;
+  @apply text-dimmed;
   white-space: pre-wrap !important;
   word-wrap: break-word !important;
   word-break: normal !important;
@@ -354,7 +354,7 @@
    on-screen but dimmed so prose stands out. */
 .md-syntax,
 .md-marker {
-  @apply text-zinc-400 dark:text-zinc-500;
+  @apply text-dimmed;
 }
 
 /* Bold + headers via `text-shadow` instead of `font-weight`.
@@ -422,7 +422,7 @@
    doesn't affect layout, unlike border-left or padding-left). The bar
    sits visually outside the text column edge so prose stays aligned. */
 .md-quote {
-  @apply text-zinc-600 dark:text-zinc-400;
+  @apply text-dimmed;
   box-shadow: inset 3px 0 0 var(--color-zinc-300);
 }
 
@@ -475,7 +475,7 @@
 /* Horizontal rule (---) — just dim the marker; can't draw an actual
    rule line without inserting layout-shifting elements. */
 .md-hr {
-  @apply text-zinc-400 dark:text-zinc-500;
+  @apply text-dimmed;
 }
 
 /* Completion match — every occurrence of a registered completion
@@ -498,7 +498,7 @@
 .md-editor-stats {
   @apply flex justify-start items-center gap-3;
   @apply px-3 py-1;
-  @apply text-[10px] text-zinc-400 dark:text-zinc-500;
+  @apply text-[10px] text-dimmed;
   @apply font-mono select-none;
   letter-spacing: 0.02em;
 }