picocrank 1.25.1 → 1.25.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.25.1",
+  "version": "1.25.2",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
   "scripts": {

package/styles/dark-theme.css

@@ -52,6 +52,9 @@ html[data-theme="dark"] {
 	--table-sticky-uneditable-bg: var(--table-uneditable-bg);
 
 	--progress-track-bg-color: var(--table-uneditable-bg);
+
+	--nav-grid-accent-fg: var(--link-color);
+	--nav-grid-accent-bg: var(--link-color);
 }
 
 html[data-theme="light"] {

package/styles/picocrank-extensions.css

@@ -7,6 +7,88 @@
 	--tab-fg: var(--muted-text-color);
 	--tab-active-fg: var(--link-color);
 	--tab-focus-outline-color: var(--tab-active-fg);
+
+	/* Default light: bright bold blues for icons and active fill. */
+	--nav-grid-accent-fg: #007dff;
+	--nav-grid-accent-bg: #0066cc;
+	--nav-grid-active-fg: var(--button-on-accent-fg);
+	--nav-grid-muted-fg: var(--muted-text-color);
+	--nav-grid-border: var(--border-color);
+	--nav-grid-hover-bg: var(--hover-background-color);
+	--nav-grid-indicator-bg: var(--button-bad-bg);
+	--nav-grid-indicator-fg: var(--button-on-accent-fg);
+	--nav-grid-ring-bg: var(--surface-bg-color);
+	--nav-grid-disabled-fg: var(--disabled-text-color);
+	--nav-grid-shadow: var(--shadow-color);
+	--nav-grid-hover-shadow: color-mix(in srgb, var(--nav-grid-shadow) 50%, transparent);
+
+	--quick-search-dialog-bg: var(--standout-bg-color);
+	--quick-search-dialog-fg: var(--text-color);
+	--quick-search-backdrop: var(--backdrop-color);
+	--quick-search-input-bg: var(--input-bg-color);
+	--quick-search-input-fg: var(--input-fg-color);
+	--quick-search-border: var(--border-color);
+	--quick-search-muted-fg: var(--muted-text-color);
+	--quick-search-subtle-fg: var(--annotation-key-color);
+	--quick-search-focus-outline: var(--focus-outline-color);
+	--quick-search-highlight-bg: var(--karma-important);
+	--quick-search-hover-bg: var(--hover-background-color);
+	--quick-search-hover-fg: var(--hover-text-color);
+
+	--breadcrumbs-separator-fg: var(--muted-text-color);
+	--breadcrumbs-link-hover-bg: var(--hover-background-color);
+
+	--radio-group-focus-outline: var(--focus-outline-color);
+	--radio-group-checked-hover-bg: var(--control-checked-hover-bg);
+	--radio-group-checked-hover-fg: var(--control-checked-fg);
+
+	--login-input-focus-outline: var(--focus-outline-color);
+	--login-error-bg: var(--karma-bad);
+	--login-error-fg: var(--karma-bad-fg);
+	--login-muted-fg: var(--muted-text-color);
+
+	--table-muted-fg: var(--muted-text-color);
+
+	--table-popover-bg: var(--surface-bg-color);
+	--table-popover-border: var(--border-color);
+	--table-popover-shadow: 0 8px 24px color-mix(in srgb, var(--shadow-color) 60%, transparent);
+	--table-popover-muted-fg: var(--muted-text-color);
+	--table-popover-fg: var(--text-color);
+	--table-popover-item-bg: var(--standout-bg-color);
+	--table-popover-item-drag-border: var(--text-color);
+	--table-popover-divider: var(--border-color);
+	--table-popover-error-fg: var(--karma-bad-fg);
+	--table-popover-success-fg: var(--karma-good-fg);
+
+	--tab-border: var(--border-color);
+	--tab-hover-fg: var(--text-color);
+	--tab-hover-bg: var(--hover-background-color);
+
+	--calendar-chrome-bg: var(--standout-bg-color);
+	--calendar-surface-bg: var(--surface-bg-color);
+	--calendar-border: var(--border-color);
+	--calendar-error-fg: var(--karma-bad-fg);
+	--calendar-loading-overlay-bg: color-mix(in srgb, var(--calendar-surface-bg) 60%, transparent);
+	--calendar-day-fg: var(--text-color);
+	--calendar-muted-fg: var(--muted-text-color);
+	--calendar-accent-fg: var(--link-color);
+	--calendar-day-hover-bg: color-mix(in srgb, var(--link-color) 8%, var(--calendar-surface-bg));
+	--calendar-day-muted-bg: var(--standout-bg-color);
+	--calendar-day-muted-hover-bg: var(--table-uneditable-bg);
+	--calendar-today-bg: var(--karma-important);
+	--calendar-today-hover-bg: var(--karma-note);
+	--calendar-range-accent: var(--link-color);
+	--calendar-range-bg-strong: color-mix(in srgb, var(--link-color) 22%, transparent);
+	--calendar-range-bg: color-mix(in srgb, var(--link-color) 14%, transparent);
+	--calendar-range-bg-subtle: color-mix(in srgb, var(--link-color) 10%, transparent);
+	--calendar-event-bg: var(--karma-good);
+	--calendar-event-border: color-mix(in srgb, var(--karma-good-fg) 35%, var(--karma-good));
+	--calendar-event-hover-bg: color-mix(in srgb, var(--karma-good) 80%, var(--karma-good-fg));
+	--calendar-event-title-fg: var(--text-color);
+	--calendar-event-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-color) 50%, transparent);
+	--calendar-event-hover-shadow: 0 2px 4px color-mix(in srgb, var(--shadow-color) 60%, transparent);
+	--calendar-more-bg: var(--standout-bg-color);
+	--calendar-event-custom-border-mix: var(--karma-on-bg-fg);
 }
 
 table thead th {

package/supplemental-themes/catppuccin-latte-frappe/theme.css

@@ -50,6 +50,8 @@ html[data-theme="dark"] {
 	--muted-text-color: var(--ctp-subtext0);
 	--annotation-key-color: var(--ctp-subtext0);
 	--link-color: var(--ctp-blue);
+	--nav-grid-accent-fg: var(--link-color);
+	--nav-grid-accent-bg: var(--link-color);
 	--border-color: var(--ctp-surface1);
 
 	--hover-background-color: var(--ctp-surface0);
@@ -71,7 +73,7 @@ html[data-theme="dark"] {
 	--input-bg-color: var(--ctp-surface0);
 	--input-fg-color: var(--ctp-text);
 	--control-option-bg-color: var(--ctp-surface0);
-	--control-hover-bg-color: var(--ctp-surface0);
+	--control-hover-bg-color: var(--ctp-surface1);
 	--menu-hover-bg-color: var(--ctp-surface0);
 
 	--table-row-hover-bg: var(--ctp-surface0);
@@ -151,6 +153,8 @@ html[data-theme="light"] {
 	--muted-text-color: var(--ctp-subtext0);
 	--annotation-key-color: var(--ctp-subtext0);
 	--link-color: var(--ctp-blue);
+	--nav-grid-accent-fg: var(--link-color);
+	--nav-grid-accent-bg: var(--link-color);
 	--border-color: var(--ctp-surface1);
 
 	--hover-background-color: var(--ctp-surface0);
@@ -172,7 +176,7 @@ html[data-theme="light"] {
 	--input-bg-color: var(--ctp-surface0);
 	--input-fg-color: var(--ctp-text);
 	--control-option-bg-color: var(--ctp-surface0);
-	--control-hover-bg-color: var(--ctp-surface0);
+	--control-hover-bg-color: var(--ctp-surface1);
 	--menu-hover-bg-color: var(--ctp-surface0);
 
 	--table-row-hover-bg: var(--ctp-surface0);

package/supplemental-themes/dracula-alucard/theme.css

@@ -41,6 +41,8 @@ html[data-theme="dark"] {
 	--muted-text-color: var(--dt-muted);
 	--annotation-key-color: var(--dt-muted);
 	--link-color: var(--dt-accent);
+	--nav-grid-accent-fg: var(--link-color);
+	--nav-grid-accent-bg: var(--link-color);
 	--border-color: var(--dt-border);
 
 	--hover-background-color: var(--dt-selection);
@@ -61,8 +63,8 @@ html[data-theme="dark"] {
 
 	--input-bg-color: var(--dt-background);
 	--input-fg-color: var(--dt-foreground);
-	--control-option-bg-color: var(--dt-overlay);
-	--control-hover-bg-color: var(--dt-selection);
+	--control-option-bg-color: var(--dt-background);
+	--control-hover-bg-color: var(--dt-overlay);
 	--menu-hover-bg-color: var(--dt-selection);
 
 	--table-row-hover-bg: var(--dt-selection);
@@ -133,6 +135,8 @@ html[data-theme="light"] {
 	--muted-text-color: var(--dt-muted);
 	--annotation-key-color: var(--dt-muted);
 	--link-color: var(--dt-accent);
+	--nav-grid-accent-fg: var(--link-color);
+	--nav-grid-accent-bg: var(--link-color);
 	--border-color: var(--dt-border);
 
 	--hover-background-color: var(--dt-selection);

package/supplemental-themes/gruvbox-dark-light/theme.css

@@ -44,6 +44,8 @@ html[data-theme="dark"] {
 	--muted-text-color: var(--gb-fg3);
 	--annotation-key-color: var(--gb-fg3);
 	--link-color: var(--gb-accent);
+	--nav-grid-accent-fg: var(--link-color);
+	--nav-grid-accent-bg: var(--link-color);
 	--border-color: var(--gb-bg3);
 
 	--hover-background-color: var(--gb-bg2);
@@ -65,7 +67,7 @@ html[data-theme="dark"] {
 	--input-bg-color: var(--gb-bg0);
 	--input-fg-color: var(--gb-fg0);
 	--control-option-bg-color: var(--gb-bg2);
-	--control-hover-bg-color: var(--gb-bg2);
+	--control-hover-bg-color: var(--gb-bg3);
 	--menu-hover-bg-color: var(--gb-bg2);
 
 	--table-row-hover-bg: var(--gb-bg2);
@@ -139,6 +141,8 @@ html[data-theme="light"] {
 	--muted-text-color: var(--gb-fg3);
 	--annotation-key-color: var(--gb-fg3);
 	--link-color: var(--gb-accent);
+	--nav-grid-accent-fg: var(--link-color);
+	--nav-grid-accent-bg: var(--link-color);
 	--border-color: var(--gb-bg3);
 
 	--hover-background-color: var(--gb-bg2);
@@ -160,7 +164,7 @@ html[data-theme="light"] {
 	--input-bg-color: var(--gb-bg0);
 	--input-fg-color: var(--gb-fg0);
 	--control-option-bg-color: var(--gb-bg2);
-	--control-hover-bg-color: var(--gb-bg2);
+	--control-hover-bg-color: var(--gb-bg3);
 	--menu-hover-bg-color: var(--gb-bg2);
 
 	--table-row-hover-bg: var(--gb-bg2);

package/supplemental-themes/waffles/theme.css

@@ -26,6 +26,8 @@ html {
 	--text-color: var(--waffle-syrup);
 	--muted-text-color: #a88860;
 	--link-color: var(--waffle-accent);
+	--nav-grid-accent-fg: var(--link-color);
+	--nav-grid-accent-bg: var(--link-color);
 	--border-color: #e0c896;
 
 	--hover-background-color: #f0d9a8;
@@ -138,6 +140,8 @@ html[data-theme="dark"] {
 	--text-color: var(--waffle-foreground);
 	--muted-text-color: var(--waffle-foreground-muted);
 	--link-color: var(--waffle-accent-dark);
+	--nav-grid-accent-fg: var(--link-color);
+	--nav-grid-accent-bg: var(--link-color);
 	--border-color: #c9a66a;
 	--standout-bg-color: var(--waffle-batter);
 	--hover-background-color: #f0d9a8;

package/vue/components/Breadcrumbs.vue

@@ -10,8 +10,8 @@
 </template>
 
 <style scoped>
-span {
-    color: #bbb;
+.separator {
+    color: var(--breadcrumbs-separator-fg);
 }
 
 a {
@@ -22,7 +22,7 @@ a {
 
 a:hover {
     text-decoration: underline;
-    background-color: #000;
+    background-color: var(--breadcrumbs-link-hover-bg);
 }
 
 </style>

package/vue/components/Calendar.vue

@@ -731,7 +731,7 @@ watch([currentMonth, currentYear], () => {
   align-items: center;
   margin-bottom: 1rem;
   padding: 1rem;
-  background: #f8f9fa;
+  background: var(--calendar-chrome-bg);
   border-radius: 8px;
 }
 
@@ -748,7 +748,7 @@ watch([currentMonth, currentYear], () => {
 }
 
 .calendar-error {
-  color: #b00020;
+  color: var(--calendar-error-fg);
   padding: 1rem;
 }
 
@@ -763,14 +763,14 @@ watch([currentMonth, currentYear], () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(255, 255, 255, 0.6);
+  background: var(--calendar-loading-overlay-bg);
   z-index: 1;
   font-weight: 600;
 }
 
 .calendar-container {
-  background: white;
-  border: 1px solid #e0e0e0;
+  background: var(--calendar-surface-bg);
+  border: 1px solid var(--calendar-border);
   overflow: hidden;
   border-radius: 8px;
   position: relative;
@@ -788,36 +788,36 @@ watch([currentMonth, currentYear], () => {
 }
 
 .calendar-day.range-single {
-  background-color: rgba(0, 123, 255, 0.22) !important;
-  box-shadow: inset 0 0 0 2px #007bff;
+  background-color: var(--calendar-range-bg-strong) !important;
+  box-shadow: inset 0 0 0 2px var(--calendar-range-accent);
 }
 
 .calendar-day.range-start {
-  background-color: rgba(0, 123, 255, 0.14) !important;
+  background-color: var(--calendar-range-bg) !important;
   box-shadow:
-    inset 2px 0 0 0 #007bff,
-    inset 0 2px 0 0 #007bff,
-    inset 0 -2px 0 0 #007bff;
+    inset 2px 0 0 0 var(--calendar-range-accent),
+    inset 0 2px 0 0 var(--calendar-range-accent),
+    inset 0 -2px 0 0 var(--calendar-range-accent);
 }
 
 .calendar-day.range-end {
-  background-color: rgba(0, 123, 255, 0.14) !important;
+  background-color: var(--calendar-range-bg) !important;
   box-shadow:
-    inset -2px 0 0 0 #007bff,
-    inset 0 2px 0 0 #007bff,
-    inset 0 -2px 0 0 #007bff;
+    inset -2px 0 0 0 var(--calendar-range-accent),
+    inset 0 2px 0 0 var(--calendar-range-accent),
+    inset 0 -2px 0 0 var(--calendar-range-accent);
 }
 
 .calendar-day.range-middle {
-  background-color: rgba(0, 123, 255, 0.14) !important;
+  background-color: var(--calendar-range-bg) !important;
   box-shadow:
-    inset 0 2px 0 0 #007bff,
-    inset 0 -2px 0 0 #007bff;
+    inset 0 2px 0 0 var(--calendar-range-accent),
+    inset 0 -2px 0 0 var(--calendar-range-accent);
 }
 
 .calendar-day.drag-over-target {
-  background-color: rgba(0, 123, 255, 0.1) !important;
-  outline: 2px dashed #007bff;
+  background-color: var(--calendar-range-bg-subtle) !important;
+  outline: 2px dashed var(--calendar-range-accent);
   outline-offset: -3px;
 }
 
@@ -825,10 +825,10 @@ watch([currentMonth, currentYear], () => {
   padding: 1rem;
   text-align: center;
   font-weight: 600;
-  color: #666;
-  border-right: 1px solid #e0e0e0;
-  border-bottom: 1px solid #e0e0e0;
-  background: #f8f9fa;
+  color: var(--calendar-muted-fg);
+  border-right: 1px solid var(--calendar-border);
+  border-bottom: 1px solid var(--calendar-border);
+  background: var(--calendar-chrome-bg);
 }
 
 .day-header:last-child {
@@ -836,8 +836,8 @@ watch([currentMonth, currentYear], () => {
 }
 
 .calendar-day {
-  border-right: 1px solid #e0e0e0;
-  border-bottom: 1px solid #e0e0e0;
+  border-right: 1px solid var(--calendar-border);
+  border-bottom: 1px solid var(--calendar-border);
   height: 160px;
   position: relative;
   transition: background-color 0.2s ease;
@@ -846,7 +846,7 @@ watch([currentMonth, currentYear], () => {
 }
 
 .calendar-day:hover {
-  background-color: #f0f8ff;
+  background-color: var(--calendar-day-hover-bg);
 }
 
 .calendar-day:hover .day-number .day-month {
@@ -858,21 +858,21 @@ watch([currentMonth, currentYear], () => {
 }
 
 .calendar-day.weekend {
-  background: #f8f9fa;
+  background: var(--calendar-day-muted-bg);
 }
 
 .calendar-day.weekend:hover {
-  background: #e9ecef;
+  background: var(--calendar-day-muted-hover-bg);
 }
 
 .calendar-day.next-month,
 .calendar-day.prev-month {
-  background: #f8f9fa;
+  background: var(--calendar-day-muted-bg);
 }
 
 .calendar-day.next-month:hover,
 .calendar-day.prev-month:hover {
-  background: #e9ecef;
+  background: var(--calendar-day-muted-hover-bg);
 }
 
 .calendar-day.past {
@@ -884,12 +884,12 @@ watch([currentMonth, currentYear], () => {
 }
 
 .calendar-day.today {
-  background: #f7f8d7;
+  background: var(--calendar-today-bg);
   font-weight: bold;
 }
 
 .calendar-day.today:hover {
-  background: #bbdefb;
+  background: var(--calendar-today-hover-bg);
 }
 
 
@@ -902,7 +902,7 @@ watch([currentMonth, currentYear], () => {
 .day-number {
   font-size: 0.9rem;
   margin-bottom: 0.25rem;
-  color: #333;
+  color: var(--calendar-day-fg);
   text-decoration: none;
   display: inline-block;
   padding: 0.1rem;
@@ -932,7 +932,7 @@ watch([currentMonth, currentYear], () => {
 }
 
 .day-content:hover .day-number.clickable {
-  color: #007bff;
+  color: var(--calendar-accent-fg);
 }
 
 .day-events {
@@ -941,12 +941,12 @@ watch([currentMonth, currentYear], () => {
 }
 
 .calendar-event {
-  background: #d6f1aa;
-  border: 1px solid #c4db96;
+  background: var(--calendar-event-bg);
+  border: 1px solid var(--calendar-event-border);
   margin-bottom: 0.25rem;
   cursor: pointer;
   transition: all 0.2s;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--calendar-event-shadow);
   padding: 0.1rem 0.1rem;
 }
 
@@ -963,20 +963,20 @@ watch([currentMonth, currentYear], () => {
 }
 
 .calendar-event:hover {
-  background: #b3de6e;
-  border-color: #c4db96;
+  background: var(--calendar-event-hover-bg);
+  border-color: var(--calendar-event-border);
   transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+  box-shadow: var(--calendar-event-hover-shadow);
 }
 
 .calendar-event.has-custom-color {
   background: var(--event-color);
-  border-color: color-mix(in srgb, var(--event-color) 75%, black);
+  border-color: color-mix(in srgb, var(--event-color) 75%, var(--calendar-event-custom-border-mix));
 }
 
 .calendar-event.has-custom-color:hover {
   background: var(--event-color);
-  border-color: color-mix(in srgb, var(--event-color) 75%, black);
+  border-color: color-mix(in srgb, var(--event-color) 75%, var(--calendar-event-custom-border-mix));
   filter: brightness(0.92);
 }
 
@@ -1005,7 +1005,7 @@ watch([currentMonth, currentYear], () => {
 .event-title {
   font-weight: bold;
   font-size: 0.85rem;
-  color: #333;
+  color: var(--calendar-event-title-fg);
   white-space: normal;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1016,22 +1016,22 @@ watch([currentMonth, currentYear], () => {
 
 .multi-day-indicator {
   font-size: 0.7rem;
-  color: #007bff;
+  color: var(--calendar-accent-fg);
   font-weight: bold;
 }
 
 .event-time {
   font-size: 0.75rem;
-  color: #666;
+  color: var(--calendar-muted-fg);
   margin-top: 0.125rem;
 }
 
 .more-events {
   font-size: 0.75rem;
-  color: #666;
+  color: var(--calendar-muted-fg);
   text-align: center;
   padding: 0.25rem;
-  background: #f8f9fa;
+  background: var(--calendar-more-bg);
   border-radius: 4px;
   margin-top: 0.25rem;
 }
@@ -1085,111 +1085,4 @@ watch([currentMonth, currentYear], () => {
     padding: 0.25rem 0.5rem;
   }
 }
-
-html[data-theme="dark"] {
-  .calendar-container {
-    background: #565656;
-    border-color: #374151;
-    border: 1px solid #565656;
-  }
-
-  .calendar-day.today {
-    background: #646c70;
-  }
-
-  .calendar-day.weekend {
-    background: #444;
-  }
-
-  .calendar-day.weekend:hover {
-    background: #1a1a1a;
-  }
-
-  .calendar-day.next-month,
-  .calendar-day.prev-month {
-    background: #1a1a1a !important;
-  }
-  
-  .calendar-day.next-month:hover,
-  .calendar-day.prev-month:hover {
-    background: #374151;
-  }
-
-  .calendar-day.today:hover {
-    background: #374151;
-  }
-
-  .calendar-day {
-    border: 1px solid #3b3b3b;
-  }
-
-  .day-number {
-    color: #f9fafb;
-  }
-
-  .day-header {
-    color: #f9fafb;
-    background: #444 !important;
-    border: 1px solid #374151;
-    border-color: #374151;
-  }
-
-  .day-content:hover .day-number.clickable {
-    color: #f9fafb;
-  }
-
-  .calendar-day:hover {
-    background-color: #374151;
-  }
-
-  .calendar-day.today:hover {
-    background: #374151;
-  }
-
-  .calendar-day.weekend:hover {
-    background: #374151;
-  }
-
-  .calendar-day.range-single {
-    background-color: rgba(96, 165, 250, 0.28) !important;
-    box-shadow: inset 0 0 0 2px #60a5fa;
-  }
-
-  .calendar-day.range-start {
-    background-color: rgba(96, 165, 250, 0.18) !important;
-    box-shadow:
-      inset 2px 0 0 0 #60a5fa,
-      inset 0 2px 0 0 #60a5fa,
-      inset 0 -2px 0 0 #60a5fa;
-  }
-
-  .calendar-day.range-end {
-    background-color: rgba(96, 165, 250, 0.18) !important;
-    box-shadow:
-      inset -2px 0 0 0 #60a5fa,
-      inset 0 2px 0 0 #60a5fa,
-      inset 0 -2px 0 0 #60a5fa;
-  }
-
-  .calendar-day.range-middle {
-    background-color: rgba(96, 165, 250, 0.18) !important;
-    box-shadow:
-      inset 0 2px 0 0 #60a5fa,
-      inset 0 -2px 0 0 #60a5fa;
-  }
-
-  .calendar-day.drag-over-target {
-    background-color: rgba(96, 165, 250, 0.12) !important;
-    outline: 2px dashed #60a5fa;
-    outline-offset: -3px;
-  }
-
-  .calendar-day.past {
-    opacity: 0.6;
-  }
-
-  .calendar-day.past:hover {
-    opacity: 0.8;
-  }
-}
 </style>

package/vue/components/Login.vue

@@ -247,10 +247,9 @@ defineExpose({
 	box-sizing: border-box;
 }
 
-.local-login-form input:focus {
-	outline: none;
-	border-color: var(--primary-color, #007bff);
-	box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+.local-login-form input:focus-visible {
+	outline: 2px solid var(--login-input-focus-outline);
+	outline-offset: 2px;
 }
 
 .local-login-form button {
@@ -303,8 +302,8 @@ defineExpose({
 
 .error-message {
 	padding: 0.75rem;
-	background-color: var(--error-bg, #fee);
-	color: var(--error-color, #c33);
+	background-color: var(--login-error-bg);
+	color: var(--login-error-fg);
 	border-radius: 4px;
 	font-size: 0.9em;
 	margin-top: 0.5rem;
@@ -314,7 +313,7 @@ defineExpose({
 .no-providers {
 	padding: 2rem;
 	text-align: center;
-	color: var(--text-muted, #666);
+	color: var(--login-muted-fg);
 }
 
 @media (min-width: 768px) {

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/Table.vue

@@ -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>

package/vue/components/Tabs.vue

@@ -116,7 +116,7 @@ defineExpose({
 
 .tabs-header {
 	display: flex;
-	border-bottom: 2px solid var(--border-color, #e1e5e9);
+	border-bottom: 2px solid var(--tab-border);
 	gap: 0.25rem;
 	overflow-x: auto;
 	scrollbar-width: thin;
@@ -131,7 +131,7 @@ defineExpose({
 }
 
 .tabs-header::-webkit-scrollbar-thumb {
-	background: var(--border-color, #ccc);
+	background: var(--tab-border);
 	border-radius: 2px;
 }
 
@@ -153,8 +153,8 @@ defineExpose({
 }
 
 .tab-button:hover {
-	color: var(--text-color, #000);
-	background-color: var(--hover-background-color, #f5f5f5);
+	color: var(--tab-hover-fg);
+	background-color: var(--tab-hover-bg);
 }
 
 .tab-button.active {

package/vue/examples/Welcome.vue

@@ -47,24 +47,6 @@
 		</Navigation>
 	</Section>
 
-	<Section
-		title="Popular examples"
-		subtitle="A few good places to begin"
-	>
-		<div class="grid-boxed welcome-popular-grid">
-			<router-link
-				v-for="example in popularExamples"
-				:key="example.name"
-				:to="{ name: example.name }"
-				class="stat-display welcome-popular-card"
-			>
-				<span class="subtle">{{ example.category }}</span>
-				<span class="stat">{{ example.label }}</span>
-				<span class="welcome-popular-description">{{ example.description }}</span>
-			</router-link>
-		</div>
-	</Section>
-
 	<Section
 		title="Try it"
 		subtitle="Small interactions you can trigger right now"
@@ -109,33 +91,6 @@ import logoUrl from '/logo.png'
 const { show: showPopup } = useNotificationPopups()
 const welcomeNavigation = ref(null)
 
-const popularExamples = [
-	{
-		name: 'ThemePreview',
-		category: 'Layouts',
-		label: 'Theme Switcher',
-		description: 'Switch drop-in themes live',
-	},
-	{
-		name: 'TableExample',
-		category: 'Data display',
-		label: 'Table',
-		description: 'Sorting, pagination, and column filters',
-	},
-	{
-		name: 'CalendarExample',
-		category: 'Data display',
-		label: 'Calendar',
-		description: 'Events, drag-and-drop, and date ranges',
-	},
-	{
-		name: 'ButtonsExample',
-		category: 'Forms & input',
-		label: 'Buttons',
-		description: 'Variants, toolbars, and form actions',
-	},
-]
-
 function showWelcomeToast() {
 	showPopup({
 		label: 'WELCOME',
@@ -212,31 +167,4 @@ onMounted(() => {
 	gap: 0.5rem;
 	margin-bottom: 0.75rem;
 }
-
-.welcome-popular-grid {
-	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-}
-
-.welcome-popular-card {
-	display: flex;
-	flex-direction: column;
-	gap: 0.35rem;
-	text-decoration: none;
-	color: inherit;
-	transition: transform 0.15s ease, box-shadow 0.15s ease;
-}
-
-.welcome-popular-card:hover {
-	transform: translateY(-2px);
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-}
-
-.welcome-popular-description {
-	font-size: 0.85rem;
-	color: #666;
-}
-
-html[data-theme="dark"] .welcome-popular-description {
-	color: #bbb;
-}
 </style>