claude-code-kanban 4.8.0 → 4.10.0

package/public/style.css

@@ -472,6 +472,8 @@ body::before {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  /* reserve room for the absolutely-positioned pin button at top-right */
+  padding-right: 22px;
 }
 
 .session-indicators .pulse {
@@ -891,13 +893,84 @@ body::before {
 }
 
 .icon-btn-danger {
-  color: #ef4444;
+  color: var(--danger);
+  border-color: var(--danger);
 }
 
 .icon-btn-danger:hover {
-  background: rgba(239, 68, 68, 0.1);
-  color: #dc2626;
-  border-color: #ef4444;
+  background: color-mix(in srgb, var(--danger) 12%, transparent);
+  color: color-mix(in srgb, var(--danger) 80%, black);
+  border-color: var(--danger);
+}
+
+/* theme picker: palette icon button + custom popover with per-theme swatches
+   (swatch colors are generated into themes.css) */
+.theme-picker {
+  position: relative;
+}
+.theme-menu {
+  display: none;
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 100;
+  min-width: 170px;
+  max-height: 70vh;
+  overflow-y: auto;
+  padding: 4px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+.theme-menu.open {
+  display: block;
+}
+.theme-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  text-align: left;
+  cursor: pointer;
+}
+.theme-menu-item:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.theme-menu-item.on {
+  color: var(--accent-text);
+}
+/* 3-dot palette preview: surface, accent, ink (colors from themes.css vars) */
+.theme-swatch {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  flex: 0 0 auto;
+}
+.theme-swatch i {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  border: 1px solid var(--sw-border);
+}
+.theme-swatch .sw-bg {
+  background: var(--sw-bg);
+}
+.theme-swatch .sw-accent {
+  background: var(--sw-accent);
+}
+.theme-swatch .sw-ink {
+  background: var(--sw-ink);
 }
 
 /* #endregion */
@@ -1095,8 +1168,8 @@ body::before {
 }
 
 .task-badge.blocked {
-  background: rgba(220, 80, 30, 0.15);
-  color: #dc4e1e;
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  color: var(--accent);
 }
 
 .task-title {
@@ -1496,61 +1569,6 @@ body::before {
 
 /* #endregion */
 
-/* #region NOTE_FORM */
-.note-section {
-  margin-top: 8px;
-}
-
-.note-form {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.note-input {
-  width: 100%;
-  padding: 10px 12px;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text-primary);
-  font-family: var(--mono);
-  font-size: 12px;
-  line-height: 1.5;
-  resize: vertical;
-  min-height: 60px;
-}
-
-.note-input:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px var(--accent-dim);
-}
-
-.note-input::placeholder {
-  color: var(--text-muted);
-}
-
-.note-submit {
-  align-self: flex-end;
-  padding: 8px 16px;
-  background: var(--accent);
-  border: none;
-  border-radius: 5px;
-  color: white;
-  font-family: var(--mono);
-  font-size: 11px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.note-submit:hover {
-  filter: brightness(1.1);
-}
-
-/* #endregion */
-
 /* #region TEAM_BADGE */
 .session-indicators {
   display: flex;
@@ -2440,8 +2458,8 @@ body::before {
   color: var(--success);
 }
 .toast.toast-error {
-  border-color: #f85149;
-  color: #f85149;
+  border-color: var(--danger);
+  color: var(--danger);
 }
 .toast.toast-info {
   border-color: var(--accent);
@@ -2775,10 +2793,10 @@ body::before {
   font-weight: 600;
 }
 .protocol-bool-true {
-  color: #4caf50;
+  color: var(--success);
 }
 .protocol-bool-false {
-  color: #ef5350;
+  color: var(--danger);
 }
 .msg-jump-latest {
   position: absolute;
@@ -2882,9 +2900,7 @@ body::before {
 .agent-card.selected:hover {
   background: var(--bg-elevated);
   border-color: var(--accent);
-  box-shadow:
-    0 0 0 1px var(--accent-dim),
-    0 0 12px var(--accent-dim);
+  box-shadow: 0 0 0 1px var(--accent-dim);
 }
 .agent-card.fading {
   opacity: 0.4;
@@ -2920,18 +2936,18 @@ body::before {
   gap: 5px;
 }
 .agent-dot {
-  width: 7px;
-  height: 7px;
+  width: 5px;
+  height: 5px;
   border-radius: 50%;
   flex-shrink: 0;
 }
 .agent-dot.active {
   background: var(--success);
-  box-shadow: 0 0 6px var(--success);
+  box-shadow: 0 0 4px color-mix(in srgb, var(--success) 50%, transparent);
 }
 .agent-dot.idle {
   background: var(--warning);
-  box-shadow: 0 0 6px var(--warning);
+  box-shadow: 0 0 4px color-mix(in srgb, var(--warning) 50%, transparent);
 }
 .agent-dot.stopped {
   background: var(--text-muted);
@@ -3113,8 +3129,8 @@ body.light .msg-assistant .msg-text {
 
 /* #region INTERACTIVE */
 .icon-btn.delete:hover {
-  background: rgba(239, 68, 68, 0.1);
-  border-color: #ef4444;
+  background: color-mix(in srgb, var(--danger) 12%, transparent);
+  border-color: var(--danger);
 }
 
 .column-header {
@@ -3490,11 +3506,23 @@ select.form-input option:checked {
 }
 
 .btn-primary:hover {
-  background: #d96329;
+  background: color-mix(in srgb, var(--accent) 82%, black);
   transform: translateY(-1px);
   box-shadow: 0 4px 12px var(--accent-glow);
 }
 
+.btn-danger {
+  background: var(--danger);
+  border-color: var(--danger);
+  color: white;
+}
+
+.btn-danger:hover {
+  background: color-mix(in srgb, var(--danger) 82%, black);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--danger) 45%, transparent);
+}
+
 .btn-secondary {
   background: transparent;
   color: var(--text-secondary);
@@ -3615,8 +3643,8 @@ select.form-input option:checked {
 
 .badge-success {
   display: inline-block;
-  background: rgba(34, 197, 94, 0.15);
-  color: #22c55e;
+  background: color-mix(in srgb, var(--success) 15%, transparent);
+  color: var(--success);
   border-radius: 4px;
   padding: 1px 6px;
   font-size: 12px;
@@ -3625,8 +3653,8 @@ select.form-input option:checked {
 
 .badge-failed {
   display: inline-block;
-  background: rgba(239, 68, 68, 0.15);
-  color: #ef4444;
+  background: color-mix(in srgb, var(--danger) 15%, transparent);
+  color: var(--danger);
   border-radius: 4px;
   padding: 1px 6px;
   font-size: 12px;
@@ -3635,8 +3663,8 @@ select.form-input option:checked {
 
 .badge-rejected {
   display: inline-block;
-  background: rgba(245, 158, 11, 0.15);
-  color: #f59e0b;
+  background: color-mix(in srgb, var(--warning) 15%, transparent);
+  color: var(--warning);
   border-radius: 4px;
   padding: 1px 6px;
   font-size: 12px;
@@ -3644,7 +3672,7 @@ select.form-input option:checked {
 }
 
 .tool-stats-chip-val.rejected {
-  color: #f59e0b;
+  color: var(--warning);
 }
 
 .impact-bar-wrap {
@@ -3840,8 +3868,8 @@ select.form-input option:checked {
 }
 
 .storage-item-badge.orphan {
-  background: rgba(239, 68, 68, 0.15);
-  color: #ef4444;
+  background: color-mix(in srgb, var(--danger) 15%, transparent);
+  color: var(--danger);
 }
 
 .storage-item-badge.pinned {
@@ -3850,8 +3878,8 @@ select.form-input option:checked {
 }
 
 .storage-item-badge.sticky {
-  background: rgba(234, 179, 8, 0.15);
-  color: #eab308;
+  background: color-mix(in srgb, var(--gold) 15%, transparent);
+  color: var(--gold);
 }
 
 .storage-item-actions {
@@ -3878,8 +3906,8 @@ select.form-input option:checked {
 }
 
 .storage-item-actions button.danger:hover {
-  background: rgba(239, 68, 68, 0.15);
-  color: #ef4444;
+  background: color-mix(in srgb, var(--danger) 15%, transparent);
+  color: var(--danger);
 }
 
 .storage-group-header {