picocrank 1.25.0 → 1.25.2

package/vue/components/NavigationGrid.vue

@@ -181,7 +181,7 @@ function handleLinkClick(link) {
 	gap: 0.75rem;
 	padding: 1.25rem 0.75rem;
 	background: transparent;
-	border: 1px solid var(--border-color, #e1e5e9);
+	border: 1px solid var(--nav-grid-border);
 	border-radius: 8px;
 	cursor: pointer;
 	transition: all 0.2s ease;
@@ -195,37 +195,38 @@ function handleLinkClick(link) {
 }
 
 .nav-button:hover {
-	border-color: var(--primary-color, #007bff);
+	border-color: var(--nav-grid-accent-fg);
+	background: var(--nav-grid-hover-bg);
 	transform: translateY(-2px);
-	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+	box-shadow: 0 4px 8px var(--nav-grid-hover-shadow);
 }
 
 .nav-button:active {
 	transform: translateY(0);
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+	box-shadow: 0 2px 4px var(--nav-grid-shadow);
 }
 
 .nav-button.active {
-	background: var(--primary-color, #007bff);
-	border-color: var(--primary-color, #007bff);
-	color: #fff;
+	background: var(--nav-grid-accent-bg);
+	border-color: var(--nav-grid-accent-bg);
+	color: var(--nav-grid-active-fg);
 }
 
 .nav-button.active .nav-button-icon {
-	color: #fff;
+	color: var(--nav-grid-active-fg);
 }
 
 .nav-button-icon {
 	display: flex;
 	align-items: start;
 	justify-content: start;
-	color: var(--primary-color, #007bff);
+	color: var(--nav-grid-accent-fg);
 	transition: color 0.2s ease;
 	flex-shrink: 0;
 }
 
 .nav-button.active .nav-button-icon {
-	color: #fff;
+	color: var(--nav-grid-active-fg);
 }
 
 .nav-button:disabled,
@@ -236,7 +237,7 @@ function handleLinkClick(link) {
 
 .nav-button:disabled:hover,
 .nav-button.disabled:hover {
-	border-color: var(--border-color, #e1e5e9);
+	border-color: var(--nav-grid-border);
 	transform: none;
 	box-shadow: none;
 	background: transparent;
@@ -244,7 +245,7 @@ function handleLinkClick(link) {
 
 .nav-button:disabled .nav-button-icon,
 .nav-button.disabled .nav-button-icon {
-	color: var(--text-muted, #999);
+	color: var(--nav-grid-disabled-fg);
 }
 
 .nav-button-indicator {
@@ -254,8 +255,8 @@ function handleLinkClick(link) {
 	width: 0.625rem;
 	height: 0.625rem;
 	border-radius: 50%;
-	background: var(--indicator-color, #dc3545);
-	box-shadow: 0 0 0 2px var(--background-color, #fff);
+	background: var(--nav-grid-indicator-bg);
+	box-shadow: 0 0 0 2px var(--nav-grid-ring-bg);
 	flex-shrink: 0;
 }
 
@@ -266,13 +267,13 @@ function handleLinkClick(link) {
 	min-width: 1.25rem;
 	padding: 0.1rem 0.4rem;
 	border-radius: 999px;
-	background: var(--indicator-color, #dc3545);
-	color: #fff;
+	background: var(--nav-grid-indicator-bg);
+	color: var(--nav-grid-indicator-fg);
 	font-size: 0.75em;
 	font-weight: 600;
 	line-height: 1.2;
 	text-align: center;
-	box-shadow: 0 0 0 2px var(--background-color, #fff);
+	box-shadow: 0 0 0 2px var(--nav-grid-ring-bg);
 	flex-shrink: 0;
 }
 
@@ -288,7 +289,7 @@ function handleLinkClick(link) {
 
 .nav-button.active .nav-button-indicator,
 .nav-button.active .nav-button-count {
-	box-shadow: 0 0 0 2px var(--primary-color, #007bff);
+	box-shadow: 0 0 0 2px var(--nav-grid-accent-bg);
 }
 
 .nav-button-label {
@@ -300,50 +301,25 @@ function handleLinkClick(link) {
 }
 
 .nav-button.active .nav-button-label {
-	color: #fff;
+	color: var(--nav-grid-active-fg);
 }
 
 .nav-button-description {
 	font-weight: normal;
-	color: var(--text-muted, #666);
+	color: var(--nav-grid-muted-fg);
 	word-break: break-word;
 	text-align: left;
 	line-height: 1.5;
 }
 
 .nav-button.active .nav-button-description {
-	color: rgba(255, 255, 255, 0.9);
+	color: var(--nav-grid-active-fg);
 }
 
 .no-links {
 	padding: 2rem;
 	text-align: center;
-	color: var(--text-muted, #666);
-}
-
-/* Dark theme support */
-html[data-theme="dark"] {
-	.nav-button {
-		background: transparent;
-	}
-
-	.nav-button:hover {
-		background: var(--hover-background-color, rgba(96, 165, 250, 0.1));
-		border-color: var(--primary-color, #60a5fa);
-	}
-
-	.nav-button.active {
-		background: var(--primary-color, #60a5fa);
-		border-color: var(--primary-color, #60a5fa);
-	}
-
-	.nav-button-description {
-		color: var(--text-muted, #999);
-	}
-
-	.nav-button-icon {
-		color: var(--primary-color, #60a5fa);
-	}
+	color: var(--nav-grid-muted-fg);
 }
 
 @media (max-width: 768px) {

package/vue/components/QuickSearch.vue

@@ -547,14 +547,14 @@ defineExpose({
   width: min(32rem, calc(100vw - 2rem));
   max-width: 32rem;
   padding: 0;
-  border: 1px solid var(--border-color, #d7d7d7);
-  background: var(--standout-bg-color, #fff);
+  border: 1px solid var(--quick-search-border);
+  background: var(--quick-search-dialog-bg);
   /* Dialog is rendered under <header>, so do not inherit header's white text */
-  color: var(--text-color, #334155);
+  color: var(--quick-search-dialog-fg);
 }
 
 .quick-search-dialog::backdrop {
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--quick-search-backdrop);
 }
 
 .dialog-body {
@@ -573,23 +573,22 @@ defineExpose({
 .search-input {
   width: 100%;
   padding: 0.75em 2.25em 0.75em 0.75em;
-  border: 1px solid var(--border-color, #d7d7d7);
+  border: 1px solid var(--quick-search-border);
   border-radius: 0.4em;
   font-size: 1rem;
-  outline: none;
-  background-color: #fff;
-  color: var(--text-color, #334155);
+  background-color: var(--quick-search-input-bg);
+  color: var(--quick-search-input-fg);
 }
 
-.search-input:focus {
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+.search-input:focus-visible {
+  outline: 2px solid var(--quick-search-focus-outline);
+  outline-offset: 2px;
 }
 
 .search-icon {
   position: absolute;
   right: 0.75rem;
-  color: #6b7280;
+  color: var(--quick-search-muted-fg);
   pointer-events: none;
   display: inline-flex;
 }
@@ -606,12 +605,13 @@ defineExpose({
 
 .search-status {
   margin: 0;
+  color: var(--quick-search-muted-fg);
 }
 
 .search-results {
   max-height: min(20rem, 50vh);
   overflow-y: auto;
-  border: 1px solid var(--border-color, #e1e5e9);
+  border: 1px solid var(--quick-search-border);
   border-radius: 0.4em;
 }
 
@@ -620,7 +620,7 @@ defineExpose({
   align-items: center;
   padding: 0.75rem 1rem;
   cursor: pointer;
-  border-bottom: 1px solid var(--border-color, #f3f4f6);
+  border-bottom: 1px solid var(--quick-search-border);
 }
 
 .search-result-item:last-child {
@@ -629,8 +629,8 @@ defineExpose({
 
 .search-result-item:hover,
 .search-result-item.active {
-  background-color: var(--hover-background-color);
-  color: var(--hover-text-color);
+  background-color: var(--quick-search-hover-bg);
+  color: var(--quick-search-hover-fg);
 }
 
 .result-content {
@@ -645,20 +645,20 @@ defineExpose({
 
 .result-description {
   font-size: 0.875rem;
-  color: #6b7280;
+  color: var(--quick-search-muted-fg);
   margin-bottom: 0.25rem;
 }
 
 .result-category {
   font-size: 0.75rem;
-  color: #9ca3af;
+  color: var(--quick-search-subtle-fg);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 
 .result-icon {
   margin-right: 0.75rem;
-  color: #6b7280;
+  color: var(--quick-search-muted-fg);
   flex-shrink: 0;
   display: inline-flex;
 }
@@ -668,7 +668,7 @@ defineExpose({
   flex-direction: column;
   align-items: center;
   padding: 1.5rem 1rem;
-  color: #6b7280;
+  color: var(--quick-search-muted-fg);
   text-align: center;
 }
 
@@ -682,35 +682,9 @@ defineExpose({
 }
 
 mark {
-  background-color: var(--karma-important, #fef3c7);
+  background-color: var(--quick-search-highlight-bg);
   color: inherit;
   padding: 0;
   border-radius: 2px;
 }
-
-html[data-theme="dark"] {
-  .quick-search-dialog {
-    color: #f9fafb;
-  }
-
-  .search-input {
-    background-color: #1f2937;
-    border-color: #374151;
-    color: #f9fafb;
-  }
-
-  .search-icon,
-  .result-description,
-  .result-category,
-  .result-icon,
-  .no-results-content,
-  .search-status {
-    color: #9ca3af;
-  }
-
-  .search-input:focus {
-    border-color: #60a5fa;
-    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
-  }
-}
 </style>

package/vue/components/RadioGroup.vue

@@ -147,7 +147,7 @@ function select(option) {
 }
 
 .radio-group label:has(input:focus-visible) {
-	outline: 2px solid black;
+	outline: 2px solid var(--radio-group-focus-outline);
 	outline-offset: 2px;
 	z-index: 2;
 }
@@ -155,8 +155,8 @@ function select(option) {
 /* Beat Femtocrank's gray .radio-group focus/hover when the option is selected. */
 .radio-group label:has(input:checked):hover,
 .radio-group label:has(input:checked:focus-visible) {
-	background-color: #3a6f3a;
-	color: white;
+	background-color: var(--radio-group-checked-hover-bg);
+	color: var(--radio-group-checked-hover-fg);
 }
 
 .radio-group.disabled {
@@ -185,7 +185,7 @@ function select(option) {
 
 .radio-group label.disabled:has(input:focus-visible),
 .radio-group.disabled label:has(input:focus-visible) {
-	outline: 2px solid black;
+	outline: 2px solid var(--radio-group-focus-outline);
 	outline-offset: 2px;
 }
 </style>

package/vue/components/Sidebar.vue

@@ -414,7 +414,7 @@ button {
 	text-align: left;
 	font-weight: 600;
 	font-size: 1em;
-	color: inherit;
+	color: var(--text-color);
 	background: transparent;
 	border-radius: 0;
 	cursor: pointer;
@@ -422,7 +422,7 @@ button {
 
 .nav-section-header:hover,
 .nav-section-header:focus-visible {
-	background-color: var(--hover-background-color);
+	background-color: var(--sidebar-hover-bg-color);
 	color: var(--hover-text-color);
 }
 
@@ -437,14 +437,8 @@ button {
 	text-align: center;
 }
 
-html[data-theme="dark"] {
-	.nav-section-header {
-		color: #f8f9fa;
-	}
-
-	.supplemental-links {
-		border-top: 1px solid #444;
-	}
+.supplemental-links {
+	border-top: 1px solid var(--border-color);
 }
 
 @media (max-width: 768px) {

package/vue/components/SidebarNavLink.vue

@@ -105,6 +105,7 @@ a {
 	padding: .75em;
 	border-radius: 0;
 	position: relative;
+	color: var(--text-color);
 }
 
 a.active {
@@ -145,23 +146,13 @@ li.disabled a {
 
 .separator {
 	height: 1px;
-	background-color: #eee;
+	background-color: var(--border-color);
 	margin: 0.5rem 0.75rem;
 }
 
-html[data-theme="dark"] {
-	a {
-		color: #f8f9fa;
-	}
-
-	a:hover,
-	a:focus-visible {
-		background-color: var(--hover-background-color);
-		color: var(--hover-text-color, #fff);
-	}
-
-	.separator {
-		background-color: #444;
-	}
+a:hover,
+a:focus-visible {
+	background-color: var(--sidebar-hover-bg-color);
+	color: var(--hover-text-color);
 }
 </style>

package/vue/components/Table.vue

@@ -1361,7 +1361,7 @@ onBeforeUnmount(() => {
 <style scoped>
 table thead th.sortable:hover {
 	cursor: pointer;
-	color: #0366d6;
+	color: var(--table-header-active-fg);
 }
 
 table thead th.filterable {
@@ -1369,12 +1369,12 @@ table thead th.filterable {
 }
 
 table thead th.filtered {
-	color: #0366d6;
+	color: var(--table-header-active-fg);
 }
 
 table thead th.menu-open {
-	background-color: var(--hover-background-color, rgba(3, 102, 214, 0.08));
-	color: var(--text-color, inherit);
+	background-color: var(--table-header-active-bg);
+	color: var(--table-header-fg);
 }
 
 table.loading tbody {
@@ -1414,7 +1414,7 @@ tbody tr.row-clickable {
 	min-height: 6rem;
 	padding: 2rem 1rem;
 	text-align: center;
-	color: var(--text-muted, #666);
+	color: var(--table-muted-fg);
 }
 
 .table-empty-state.loading {
@@ -1436,7 +1436,7 @@ tbody tr.row-clickable {
 	gap: 0.75rem;
 	padding: 2rem 1rem;
 	text-align: center;
-	color: var(--text-muted, #666);
+	color: var(--table-muted-fg);
 }
 
 .table-filtered-empty-message {
@@ -1473,7 +1473,7 @@ td.table-column-options-cell {
 
 .table-layout-label {
 	font-size: 0.85rem;
-	color: var(--text-muted, #666);
+	color: var(--table-muted-fg);
 	max-width: 10rem;
 	overflow: hidden;
 	text-overflow: ellipsis;

package/vue/components/TableColumnFilterPopover.vue

@@ -497,10 +497,10 @@ onBeforeUnmount(() => {
 	max-width: min(24rem, calc(100vw - 1rem));
 	max-height: calc(100vh - 1rem);
 	padding: 0.75rem;
-	border: 1px solid var(--border-color, #e1e5e9);
+	border: 1px solid var(--table-popover-border);
 	border-radius: 0.4rem;
-	background: var(--background-color, #fff);
-	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+	background: var(--table-popover-bg);
+	box-shadow: var(--table-popover-shadow);
 	overflow: hidden;
 }
 
@@ -552,7 +552,7 @@ onBeforeUnmount(() => {
 
 .field-label {
 	font-size: 0.85rem;
-	color: var(--text-muted, #666);
+	color: var(--table-popover-muted-fg);
 }
 
 .popover-actions {
@@ -563,21 +563,21 @@ onBeforeUnmount(() => {
 	gap: 0.5rem;
 	margin-top: 0.75rem;
 	padding-top: 0.75rem;
-	border-top: 1px solid var(--border-color, #e1e5e9);
+	border-top: 1px solid var(--table-popover-divider);
 }
 
 .saved-filters {
 	flex-shrink: 0;
 	margin-top: 0.75rem;
 	padding-top: 0.75rem;
-	border-top: 1px solid var(--border-color, #e1e5e9);
+	border-top: 1px solid var(--table-popover-divider);
 	min-height: 0;
 }
 
 .saved-filters-heading {
 	margin: 0 0 0.5rem;
 	font-size: 0.85rem;
-	color: var(--text-muted, #666);
+	color: var(--table-popover-muted-fg);
 }
 
 .saved-filters-list {
@@ -627,14 +627,4 @@ onBeforeUnmount(() => {
 	align-items: center;
 	justify-content: center;
 }
-
-html[data-theme="dark"] .table-column-filter-popover {
-	background: var(--background-color, #1e1e1e);
-	border-color: var(--border-color, #444);
-}
-
-html[data-theme="dark"] .popover-actions,
-html[data-theme="dark"] .saved-filters {
-	border-top-color: var(--border-color, #444);
-}
 </style>

package/vue/components/TableColumnOptionsPopover.vue

@@ -839,10 +839,10 @@ onBeforeUnmount(() => {
 	min-width: min(30rem, calc(100vw - 1rem));
 	max-height: calc(100vh - 1rem);
 	padding: 0.75rem;
-	border: 1px solid var(--border-color, #e1e5e9);
+	border: 1px solid var(--table-popover-border);
 	border-radius: 0.4rem;
-	background: var(--background-color, #fff);
-	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+	background: var(--table-popover-bg);
+	box-shadow: var(--table-popover-shadow);
 	overflow: hidden;
 	box-sizing: border-box;
 }
@@ -923,19 +923,19 @@ onBeforeUnmount(() => {
 
 .field-label {
 	font-size: 0.85rem;
-	color: var(--text-muted, #666);
+	color: var(--table-popover-muted-fg);
 }
 
 .column-options-tab-error {
 	margin: 0;
 	font-size: 0.85rem;
-	color: var(--bad-color, #c62828);
+	color: var(--table-popover-error-fg);
 }
 
 .column-options-tab-success {
 	margin: 0;
 	font-size: 0.85rem;
-	color: var(--good-color, #2e7d32);
+	color: var(--table-popover-success-fg);
 }
 
 .column-options-load-panel {
@@ -948,7 +948,7 @@ onBeforeUnmount(() => {
 	display: flex;
 	justify-content: center;
 	padding-top: 0.25rem;
-	border-top: 1px solid var(--border-color, #e1e5e9);
+	border-top: 1px solid var(--table-popover-divider);
 }
 
 .column-options-preset-list {
@@ -968,7 +968,7 @@ onBeforeUnmount(() => {
 	gap: 0.5rem;
 	align-items: start;
 	padding-bottom: 0.65rem;
-	border-bottom: 1px solid var(--border-color, #e1e5e9);
+	border-bottom: 1px solid var(--table-popover-divider);
 }
 
 .column-options-preset-item:last-child {
@@ -1014,9 +1014,9 @@ onBeforeUnmount(() => {
 	align-items: center;
 	gap: 0.5rem;
 	padding: 0.25rem 0.45rem;
-	border: 1px solid var(--border-color, #e1e5e9);
+	border: 1px solid var(--table-popover-border);
 	border-radius: 0.35rem;
-	background: var(--standout-bg-color, #f8f9fa);
+	background: var(--table-popover-item-bg);
 }
 
 .column-options-item.is-dragging {
@@ -1024,7 +1024,7 @@ onBeforeUnmount(() => {
 }
 
 .column-options-item.is-drag-over {
-	border-color: var(--text-color, #334155);
+	border-color: var(--table-popover-item-drag-border);
 }
 
 .column-options-item.is-fixed {
@@ -1034,7 +1034,7 @@ onBeforeUnmount(() => {
 .column-options-drag-handle {
 	display: inline-flex;
 	align-items: center;
-	color: var(--text-color, inherit);
+	color: var(--table-popover-fg, inherit);
 	opacity: 0.65;
 	cursor: grab;
 }
@@ -1097,20 +1097,6 @@ onBeforeUnmount(() => {
 	gap: 0.5rem;
 	margin-top: 0.75rem;
 	padding-top: 0.75rem;
-	border-top: 1px solid var(--border-color, #e1e5e9);
-}
-
-html[data-theme="dark"] .table-column-options-popover {
-	background: var(--background-color, #1e1e1e);
-	border-color: var(--border-color, #444);
-}
-
-html[data-theme="dark"] .column-options-item {
-	background: var(--standout-bg-color, #1f1f1f);
-	border-color: var(--border-color, #444);
-}
-
-html[data-theme="dark"] .popover-actions {
-	border-top-color: var(--border-color, #444);
+	border-top: 1px solid var(--table-popover-divider);
 }
 </style>