@k2b/cloud 0.39.0 → 0.40.0

package/src/styles/effects.css

@@ -104,6 +104,12 @@
   border-radius: var(--k2b-radius-control);
 }
 
+/* An open question stands apart from the place before and after it; consecutive outcome lines stay together. */
+.k2b-ui .ai-turn__action:has(.k2b-chat-decision__card) + .ai-turn__action,
+.k2b-ui .ai-turn__action + .ai-turn__action:has(.k2b-chat-decision__card) {
+  margin-top: 1rem;
+}
+
 .k2b-ui .ai-turn__action:focus {
   outline: none;
 }
@@ -113,6 +119,60 @@
   outline-offset: var(--k2b-focus-offset);
 }
 
+/* Assistant questions and outcome lines (card v4), built from @k2b/ui Chat.Decision, Chat.Preview, and Chat.Outcome.
+   Only what an older review needs lives here: values that keep their line breaks, a Markdown block, and the call's
+   raw input on demand. Everything else is the shared primitives' look. */
+.k2b-ui .cloud-action-preview__value {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.k2b-ui .cloud-action-preview__markdown {
+  min-width: 0;
+  color: var(--k2b-text-secondary);
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.k2b-ui .cloud-action-preview__input {
+  display: grid;
+  min-width: 0;
+  justify-items: start;
+  gap: 0.5rem;
+}
+
+.k2b-ui .cloud-action-preview__input > [role="region"] {
+  width: 100%;
+  min-width: 0;
+}
+
+.k2b-ui .cloud-action-preview__raw {
+  max-height: 13rem;
+  margin: 0;
+  overflow: auto;
+  border-radius: var(--k2b-radius-control);
+  padding: 0.5rem;
+  color: var(--k2b-text);
+  background: var(--k2b-surface-muted);
+  box-shadow: var(--ui-control-recess);
+  font-size: 0.6875rem;
+  line-height: 1.45;
+  white-space: pre-wrap;
+}
+
+/* The review's other links continue the preview above them instead of starting a new block. */
+.k2b-ui .k2b-chat-decision__card > .k2b-chat-preview + .cloud-action-preview__links {
+  margin-top: 0.25rem;
+}
+
+/* The approvals page: where a request waits stands above its card, quiet, on the card's edge. */
+.k2b-ui .cloud-approvals .cloud-approval {
+  display: grid;
+  min-width: 0;
+  gap: 0.25rem;
+  grid-template-columns: minmax(0, 1fr);
+}
+
 /* A pending approval: a calm tinted card in place 4 that says what will happen. Fields stack on phones and the
    decision buttons share the width there. */
 .k2b-ui .ai-approval {
@@ -341,10 +401,6 @@
 /* App help is a reader, not a generic Markdown preview. Keep the measure,
    hierarchy, and rhythm close to the task-first Help wireframe while reusing
    the same safe server-rendered Markdown pipeline as the rest of Cloud. */
-.help-topic-icon {
-  background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 10%, var(--ui-surface-muted));
-}
-
 /* Help shell: one head (app tile, "Help for <App>", the menu, and the search) above the start, an article, or
    results. The head never changes size between them, so the search stays in one place. The start and the head share
    the article's measure: wide, the article and its contents; narrower, the article column alone. */
@@ -371,6 +427,7 @@
 
 /* Above a scroll area the head keeps the same scrollbar gutter, so both centre their measure alike. */
 .help-shell[data-surface="modal"] .help-head,
+.help-shell[data-surface="panel"] .help-head,
 .help-shell[data-surface="embedded"] .help-head {
   overflow: hidden;
   padding-bottom: 0.25rem;
@@ -384,6 +441,29 @@
   }
 }
 
+/* Help without a panel slot on a phone: the shared bottom sheet at its full height, with its grabber (#858). */
+.k2b-ui .k2b-dialog.cloud-help-sheet {
+  height: min(92dvh, var(--k2b-dialog-available-height));
+}
+
+.cloud-help-sheet .k2b-bottom-sheet-viewport {
+  height: 100%;
+}
+
+.cloud-help-sheet .help-shell[data-surface="modal"] {
+  height: auto;
+  flex: 1 1 auto;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+/* In the panel the slot's own title row sits right above: the Help head follows it closely. */
+.help-shell[data-surface="panel"] .help-head {
+  padding-top: 0.25rem;
+}
+
 .help-head-inner {
   display: flex;
   flex-direction: column;
@@ -549,7 +629,7 @@
 }
 
 .help-start-tile:hover {
-  background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 6%, var(--ui-surface-subtle));
+  background: var(--ui-surface-muted);
 }
 
 .help-start-tile-icon,
@@ -559,8 +639,6 @@
   height: 2.25rem;
   flex: 0 0 auto;
   place-items: center;
-  border-radius: var(--ui-radius-control);
-  background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 14%, var(--ui-surface-muted));
   font-size: 1.125rem;
 }
 
@@ -568,6 +646,32 @@
   margin-bottom: 0.5rem;
 }
 
+/* A narrow reader, such as the panel column at 20-23 rem, has no room for two tiles side by side: each task keeps
+   its tile, one per row, with the icon beside its title. */
+@container help-shell (max-width: 23rem) {
+  .help-start-tiles {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .help-start-tile {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: 0.75rem;
+    row-gap: 0.125rem;
+    align-items: start;
+    padding: 0.75rem;
+  }
+
+  .help-start-tile-icon {
+    grid-row: span 2;
+    margin-bottom: 0;
+  }
+
+  .help-start-tile-description {
+    -webkit-line-clamp: 2;
+  }
+}
+
 .help-start-tile-title {
   max-width: 100%;
   color: var(--color-zinc-950);
@@ -750,12 +854,56 @@
   padding-top: 0.25rem;
 }
 
+/* The article head names the app whose Help this is: the app's own canvas gradient (the same tokens and strength as
+   the app background, over the reader's surface), without a border or a shadow, and the article's icon in the flat
+   shared tile. Without app colours it stays the plain surface. The embedded readers (Grids, Pulse) sit inside the
+   app's own chrome, which already names the app: their head stays flat. Text sits on this gradient, so its tint stays at
+   most 30 % light and 15 % dark, as on the phone shell: then the title and the lead read at 4.5:1 on any app colour. */
 .help-article-head {
+  margin-bottom: 2rem;
+}
+
+.help-article:not([data-surface="embedded"]) .help-article-head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 1.5rem;
+  border-radius: var(--ui-radius-surface);
+  padding: 1.5rem;
+  background: linear-gradient(
+    var(--app-canvas-angle, 135deg),
+    color-mix(in srgb, var(--app-canvas-from, var(--k2b-surface)) min(var(--app-canvas-strength, 0%), 30%), var(--k2b-surface)),
+    color-mix(in srgb, var(--app-canvas-via, var(--k2b-surface)) min(var(--app-canvas-strength, 0%), 30%), var(--k2b-surface)) 50%,
+    color-mix(in srgb, var(--app-canvas-to, var(--k2b-surface)) min(var(--app-canvas-strength, 0%), 30%), var(--k2b-surface))
+  );
+}
+
+.dark .help-article:not([data-surface="embedded"]) .help-article-head {
+  background: linear-gradient(
+    var(--app-canvas-angle, 135deg),
+    color-mix(in srgb, var(--app-canvas-from, var(--k2b-surface)) min(var(--app-canvas-dark-strength, 0%), 15%), var(--k2b-surface)),
+    var(--k2b-surface) 50%,
+    color-mix(in srgb, var(--app-canvas-to, var(--k2b-surface)) min(var(--app-canvas-dark-strength, 0%), 15%), var(--k2b-surface))
+  );
+}
+
+.help-article-head-copy {
   display: flex;
+  min-width: 0;
   flex-direction: column;
   align-items: flex-start;
   gap: 0.75rem;
-  margin-bottom: 2rem;
+}
+
+.help-article-icon {
+  width: 4.5rem;
+  height: 4.5rem;
+  font-size: 2.25rem;
+}
+
+/* Over the gradient the chips keep their own quiet fill, so they read as facts and not as part of the colour. */
+.help-article:not([data-surface="embedded"]) .help-article-head .help-article-fact {
+  background: color-mix(in srgb, var(--k2b-surface) 72%, transparent);
 }
 
 .help-article-path {
@@ -1104,7 +1252,7 @@
 }
 
 .help-document :where(ul > li)::marker {
-  color: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 75%, var(--color-zinc-400));
+  color: var(--ui-text-secondary);
 }
 
 .help-document :where(ol > li)::marker {
@@ -1460,11 +1608,52 @@
   }
 }
 
+/* Narrow: the tile stands before the title, and the path, the short answer, and the chips use the full width. */
 @container help-article (max-width: 40rem) {
   .help-article-head {
     margin-bottom: 1.5rem;
   }
 
+  .help-article:not([data-surface="embedded"]) .help-article-head {
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: 0.75rem;
+    row-gap: 0;
+    padding: 1.25rem 1rem;
+  }
+
+  .help-article:not([data-surface="embedded"]) .help-article-head-copy {
+    display: contents;
+  }
+
+  .help-article:not([data-surface="embedded"]) .help-article-path {
+    grid-column: 1 / -1;
+    grid-row: 1;
+    margin-bottom: 0.75rem;
+  }
+
+  .help-article-icon {
+    grid-column: 1;
+    grid-row: 2;
+    width: 2.75rem;
+    height: 2.75rem;
+    font-size: 1.375rem;
+  }
+
+  .help-article:not([data-surface="embedded"]) .help-article-title {
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  .help-article:not([data-surface="embedded"]) .help-article-head-copy > :not(.help-article-path, .help-article-title) {
+    grid-column: 1 / -1;
+    margin-top: 0.75rem;
+  }
+
+  /* The panel article has no path row (the panel head names the app), so the tile and the title open the head. */
+  .help-article[data-surface="panel"] :is(.help-article-icon, .help-article-title) {
+    grid-row: 1;
+  }
+
   /* Two columns leave a phone about 140 px per alternative. */
   .help-document .help-compare > ul {
     grid-template-columns: minmax(0, 1fr);

package/src/styles/file-chooser.css

@@ -68,8 +68,9 @@
   color: var(--k2b-text-secondary);
 }
 
+/* A picked file is an object row: its check carries the app ink. */
 .cloud-file-chooser__icon[data-selected="true"] {
-  color: var(--k2b-action);
+  color: var(--ui-app-accent-text);
 }
 
 .cloud-file-chooser__meta {

package/src/styles/global.css

@@ -118,9 +118,8 @@ html:has(.cloud-app-canvas[data-layout-full-page="true"]) {
       55%,
     color-mix(in srgb, var(--app-canvas-to, var(--color-zinc-400)) var(--cloud-shell-strength), var(--ui-canvas))
   );
-  /* On color the open item is the surface; on the surface it is tinted. Its
-     label is the app ink, which app-color.ts keeps at AA on the surface and on
-     the app's selection fills. */
+  /* On color the open item is the surface in light and tinted in dark. Its
+     label is the app ink, which app-color.ts keeps at AA on both fills. */
   --cloud-shell-selected: var(--k2b-surface);
   --cloud-shell-selected-text: var(--ui-app-accent-text);
 }
@@ -128,7 +127,9 @@ html:has(.cloud-app-canvas[data-layout-full-page="true"]) {
 .dark .cloud-app-canvas {
   --cloud-shell-strength: 22%;
   --cloud-shell-via-strength: 12%;
-  --cloud-shell-selected: var(--ui-app-selected-nav);
+  /* The navigation share over the muted surface, which stays apart from the
+     dark bar; app-color.ts derives the same fill as shellSelected. */
+  --cloud-shell-selected: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 17%, var(--ui-surface-muted));
 }
 
 :root {
@@ -493,6 +494,35 @@ solid-island {
     background: linear-gradient(to bottom, color-mix(in srgb, var(--k2b-surface) 0%, transparent), var(--k2b-surface) 0.75rem);
     pointer-events: none;
   }
+  /* The app's one primary action (the primary of `AppWorkspace.Head`) is the
+     round button in that free place beside the bar: the bar's height, its end
+     edge, and its shadow. The card keeps the bar's space free at its end and in
+     its scroll padding, so the button never covers the last row or a focused
+     control either. Only the outermost workspace's head offers it. */
+  .cloud-app-canvas[data-layout-authenticated]:has(> .cloud-tab-bar)
+    .k2b-app-workspace:not(.k2b-app-workspace *)
+    > .k2b-app-workspace__head
+    .k2b-app-workspace__head-primary {
+    position: fixed;
+    z-index: 11;
+    right: max(calc(env(safe-area-inset-right, 0px) + 0.75rem), calc((100vw - 33.75rem) / 2));
+    bottom: var(--cloud-tab-bar-end);
+    width: var(--cloud-tab-bar-height);
+    min-width: var(--cloud-tab-bar-height);
+    height: var(--cloud-tab-bar-height);
+    min-height: var(--cloud-tab-bar-height);
+    box-shadow:
+      0 10px 28px -14px rgb(9 9 11 / 0.34),
+      0 0 0 1px rgb(9 9 11 / 0.06);
+  }
+  .dark .cloud-app-canvas[data-layout-authenticated]:has(> .cloud-tab-bar)
+    .k2b-app-workspace:not(.k2b-app-workspace *)
+    > .k2b-app-workspace__head
+    .k2b-app-workspace__head-primary {
+    box-shadow:
+      0 12px 30px -14px rgb(0 0 0 / 0.7),
+      0 0 0 1px var(--k2b-border);
+  }
 }
 
 /* The bar exists only on signed-in phones. Its row keeps the place of the
@@ -644,9 +674,10 @@ solid-island {
    Phones ignore it. The app area takes the app bar's place and starts at the
    card spacing. The button that
    shows them again floats at the app area's bottom start corner; on touch
-   screens a drag from the 18 px strip at the left edge does the same. From
-   768 to 1023 px the navigation is already an overlay behind the
-   workspace head's button, so there only the app bar hides. */
+   screens a drag from the 18 px strip at the left edge does the same. In an
+   app host below 64 rem (a window from 768 to 1023 px, or the app beside the
+   panel column) the navigation is already an overlay behind the workspace
+   head's button, so there only the app bar hides. */
 .cloud-shell-show,
 .cloud-shell-reveal {
   display: none;
@@ -698,12 +729,18 @@ solid-island {
     left: calc(max(var(--cloud-card-inset), env(safe-area-inset-left, 0px)) + 0.75rem);
     bottom: calc(var(--cloud-card-inset) + var(--cloud-card-inset-bottom) + 0.75rem);
   }
-  /* The navigation leaves like a hidden sidebar: its track, its resize
-     handle, and navigation panes go, and the work area rounds its start
-     corners with the card. An island may wrap the sidebar or Main, as in
-     Grids. */
+}
+
+/* The navigation leaves like a hidden sidebar: its track, its resize handle,
+   and navigation panes go, and the work area rounds its start corners with
+   the card. An island may wrap the sidebar or Main, as in Grids. This follows
+   the app's host, as the sidebar column does: in a host below 64 rem, such as
+   the app beside the panel column, the navigation is an overlay behind the
+   workspace head's button and stays there. */
+@container k2b-app-area (min-width: 64rem) {
   .cloud-app-canvas[data-shell-focus] .k2b-app-workspace:not(.k2b-app-workspace *) {
     --k2b-workspace-start-radius: var(--k2b-workspace-inner-radius);
+    --k2b-workspace-sidebar-space: 0px;
   }
   .cloud-app-canvas[data-shell-focus]
     .k2b-app-workspace:not(.k2b-app-workspace *)
@@ -749,7 +786,7 @@ solid-island {
 .cloud-mobile-menu .k2b-panel-dialog__actions { flex: 1; min-width: 0; }
 .cloud-mobile-menu__switch { width: 100%; flex-wrap: nowrap; }
 .cloud-mobile-menu__switch button { flex: 1; min-width: 0; min-height: 3rem; white-space: nowrap; }
-.cloud-mobile-menu__switch button > span { overflow: hidden; text-overflow: ellipsis; }
+.cloud-mobile-menu__switch button > span { min-width: 0; overflow: hidden; }
 .cloud-mobile-menu .k2b-dialog__close { width: 2.75rem; height: 2.75rem; flex-shrink: 0; }
 
 .cloud-mobile-menu .k2b-panel-dialog__body { padding: .75rem 1rem 1rem; }

package/src/styles/panel.css

@@ -68,8 +68,7 @@
   color: var(--k2b-text-muted);
 }
 
-.cloud-panel__title > span,
-.cloud-panel__tab-label {
+.cloud-panel__title > span {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -122,21 +121,29 @@
   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) {
-  position: absolute;
-  inset: 0;
+  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,
@@ -371,3 +378,39 @@ 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,21 +7,23 @@
   --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));
   /* app-color.ts computes these defaults from --color-blue-500; app-color.test.ts pins them. */
-  --app-ink-light: #2264c9;
+  --app-ink-light: #2469d4;
   --app-ink-dark: #589aff;
   --app-selected-light: #f0f6ff;
   --app-selected-dark: #15243b;
-  --app-selected-nav-light: #e0e8f6;
-  --app-selected-nav-dark: #22334e;
+  --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);
@@ -51,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);
@@ -146,7 +147,8 @@
   --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;
@@ -198,7 +200,8 @@
 }
 
 /* Custom properties resolve where declared. Each app scope must re-read its
-   inline per-app values instead of inheriting the resolved platform defaults. */
+   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: var(--app-ink-light);
@@ -209,6 +212,7 @@
      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);
 }
@@ -220,6 +224,7 @@
   --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);
 }
@@ -239,7 +244,7 @@
 }
 
 @utility text-secondary {
-  @apply text-zinc-700 dark:text-zinc-300;
+  color: var(--ui-text-secondary);
 }
 
 @utility text-dimmed {
@@ -247,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);