@k2b/cloud 0.39.0 → 0.41.0

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;
 }

package/src/styles/utilities-navigation.css

@@ -176,12 +176,16 @@
   }
 }
 
+/* The current navigation target carries the app's navigation fill and ink. */
 @utility sidebar-icon-action-active {
-  @apply bg-blue-50 text-blue-700 hover:bg-blue-100 hover:text-blue-800;
-  @apply dark:bg-blue-950/45 dark:text-blue-300 dark:hover:bg-blue-900/45 dark:hover:text-blue-200;
-  box-shadow:
-    inset 0 0 0 1px color-mix(in srgb, var(--color-blue-500) 22%, transparent),
-    var(--ui-control-bevel);
+  color: var(--ui-app-accent-text);
+  background: var(--ui-app-selected-nav);
+  box-shadow: none;
+
+  &:hover {
+    color: var(--ui-app-accent-text);
+    background: var(--ui-app-selected-nav);
+  }
 }
 
 @utility sidebar-icon-action-success {
@@ -225,7 +229,7 @@
 
 @utility sidebar-item-active {
   position: relative;
-  background: var(--ui-selected);
+  background: var(--ui-app-selected-nav);
   color: var(--ui-app-accent-text);
   @apply font-medium;
   box-shadow: var(--ui-shadow-surface);
@@ -714,7 +718,7 @@
 @utility list-item-active {
   border-left: 0;
   position: relative;
-  background: var(--ui-selected);
+  background: var(--ui-app-selected);
   color: var(--ui-app-accent-text);
   @apply rounded-lg font-medium;
   box-shadow: var(--ui-shadow-surface);
@@ -1047,23 +1051,14 @@
   padding: 0 0.25rem;
 }
 
+/* The box and the app ink; the chip comes from the shared `k2b-icon-tile` on the same element. */
 .sidebar-header-icon {
   width: 1.4375rem;
   height: 1.4375rem;
-  border-radius: 0.4375rem;
-  background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 9%, transparent) !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);
-}
-
-.sidebar-header-icon-mobile {
-  background: color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 9%, transparent) !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);
 }
 
-.dark :is(.sidebar-header-icon, .sidebar-header-icon-mobile) {
-  color: color-mix(in srgb, var(--app-accent, var(--color-blue-400)) 58%, white) !important;
+:is(.sidebar-header-icon, .sidebar-header-icon-mobile) {
+  color: var(--ui-app-accent-text) !important;
 }
 
 .sidebar-header-title {
@@ -1100,8 +1095,8 @@
 
 .sidebar-icon-action-active {
   color: var(--ui-app-accent-text);
-  background: var(--ui-selected);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent, var(--color-blue-500)) 20%, transparent);
+  background: var(--ui-app-selected-nav);
+  box-shadow: none;
 }
 
 :is(.sidebar-item-active, .list-item-active) {
@@ -1114,7 +1109,7 @@
 }
 
 .file-tree > li > div[data-state="selected"] {
-  background: var(--ui-selected) !important;
+  background: var(--ui-app-selected) !important;
   box-shadow: none !important;
 }