picocrank 1.25.0 → 1.25.2

package/supplemental-themes/waffles/theme.css

@@ -15,17 +15,48 @@ html {
 	--waffle-syrup: #8b4513;
 	--waffle-butter: #ffd966;
 	--waffle-berry: #c23b5a;
+	--waffle-accent: #a05020;
+
+	--body-bg-color: var(--waffle-cream);
+	--surface-bg-color: #fffdf6;
+	--standout-bg-color: var(--waffle-batter);
+	--section-header-bg-color: var(--waffle-batter);
+	--shadow-color: rgba(139, 69, 19, 0.12);
 
 	--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;
-	--standout-bg-color: var(--waffle-batter);
+
 	--hover-background-color: #f0d9a8;
 	--hover-text-color: var(--waffle-syrup);
+
+	--header-fg-color: var(--waffle-cream);
 	--header-hover-background-color: var(--waffle-crust);
 	--header-hover-text-color: var(--waffle-cream);
+	--header-button-hover-bg-color: var(--waffle-crust);
+
+	--sidebar-bg-color: var(--waffle-sidebar);
+	--sidebar-link-color: var(--waffle-syrup);
+	--sidebar-hover-bg-color: var(--hover-background-color);
+	--sidebar-border-color: var(--waffle-crust);
+
+	--input-bg-color: var(--waffle-cream);
+	--input-fg-color: var(--waffle-syrup);
+	--control-option-bg-color: var(--waffle-butter);
+	--control-hover-bg-color: #ffe14d;
+
 	--disabled-background-color: #efe4cb;
 	--disabled-text-color: #a88860;
 
+	--button-good-bg: #9ccc65;
+	--button-good-hover-bg: #9ccc65;
+	--button-bad-bg: var(--waffle-berry);
+	--button-bad-hover-bg: var(--waffle-berry);
+	--button-on-accent-fg: #fff8e7;
+
 	--karma-good: #b8d98a;
 	--karma-bad: #f0a0a8;
 	--karma-warning: var(--waffle-butter);
@@ -46,8 +77,8 @@ html {
 }
 
 body {
-	background-color: var(--waffle-cream);
-	color: var(--waffle-syrup);
+	background-color: var(--body-bg-color);
+	color: var(--text-color);
 	background-image:
 		repeating-linear-gradient(
 			0deg,
@@ -68,142 +99,11 @@ body {
 header {
 	background: linear-gradient(180deg, var(--waffle-crust), #a86e2e);
 	border-bottom: 3px solid var(--waffle-syrup);
-	color: var(--waffle-cream);
 	box-shadow: 0 2px 8px rgba(139, 69, 19, 0.25);
 }
 
-header a,
-header button,
-header .button {
-	color: var(--waffle-cream);
-}
-
-#sidebar-toggler-button,
-#sidebar-toggler-button.neutral,
-header .theme-toggle,
-header .theme-toggle.neutral,
-header .search-trigger,
-header .search-trigger.neutral {
-	background-color: transparent;
-	border: 0;
-	color: var(--waffle-cream);
-}
-
-#sidebar-toggler-button:hover,
-header .theme-toggle:hover,
-header .search-trigger:hover,
-header .user-info:hover {
-	background-color: var(--header-hover-background-color);
-	color: var(--header-hover-text-color);
-}
-
-section {
-	background-color: #fffdf6;
-	border: 1px solid var(--border-color);
-	box-shadow: 0 2px 6px rgba(139, 69, 19, 0.12);
-}
-
 section .section-header {
-	background-color: var(--waffle-batter);
-	border-bottom: 2px solid var(--waffle-crust);
-	color: var(--waffle-syrup);
-}
-
-html[data-theme="dark"] {
-	--waffle-foreground: #3a1f08;
-	--waffle-foreground-muted: #5c3a18;
-	--text-color: var(--waffle-foreground);
-	--hover-background-color: #f0d9a8;
-	--hover-text-color: var(--waffle-foreground);
-	--border-color: #c9a66a;
-	--standout-bg-color: var(--waffle-batter);
-	--disabled-text-color: #7a6548;
-}
-
-html[data-theme="dark"] body {
-	color: var(--waffle-foreground);
-}
-
-html[data-theme="dark"] section {
-	background-color: var(--waffle-batter);
-	color: var(--waffle-foreground);
-}
-
-html[data-theme="dark"] section .section-header,
-html[data-theme="dark"] section .section-subheader {
-	background-color: var(--waffle-section);
 	border-bottom: 2px solid var(--waffle-crust);
-	color: var(--waffle-foreground);
-}
-
-html[data-theme="dark"] aside,
-html[data-theme="dark"] #sidebar {
-	background-color: var(--waffle-sidebar);
-	color: var(--waffle-foreground);
-	border-color: var(--waffle-crust);
-	box-shadow: 0.15em 0 0.6em rgba(139, 69, 19, 0.22);
-}
-
-html[data-theme="dark"] aside a,
-html[data-theme="dark"] aside a:visited,
-html[data-theme="dark"] aside .nav-section-header {
-	color: var(--waffle-foreground) !important;
-}
-
-html[data-theme="dark"] aside a:hover,
-html[data-theme="dark"] aside a:focus-visible,
-html[data-theme="dark"] aside :is(ul, menu) li a:hover,
-html[data-theme="dark"] aside :is(ul, menu) li a:focus-visible,
-html[data-theme="dark"] aside .nav-section-header:hover,
-html[data-theme="dark"] aside .nav-section-header:focus-visible {
-	background-color: var(--hover-background-color);
-	color: var(--hover-text-color) !important;
-}
-
-html[data-theme="dark"] a {
-	color: #6b3410;
-}
-
-html[data-theme="dark"] a:visited {
-	color: #5c2d0e;
-}
-
-html[data-theme="dark"] button,
-html[data-theme="dark"] .button {
-	color: var(--waffle-foreground);
-}
-
-html[data-theme="dark"] input,
-html[data-theme="dark"] select,
-html[data-theme="dark"] textarea {
-	background-color: var(--waffle-cream);
-	border-color: var(--border-color);
-	color: var(--waffle-foreground);
-}
-
-html[data-theme="dark"] table,
-html[data-theme="dark"] th,
-html[data-theme="dark"] td {
-	color: var(--waffle-foreground);
-}
-
-html[data-theme="dark"] table.row-hover tr:hover td {
-	background-color: var(--hover-background-color);
-	color: var(--waffle-foreground);
-}
-
-html[data-theme="dark"] pre {
-	background-color: var(--waffle-batter);
-	border-color: var(--border-color);
-	color: var(--waffle-foreground);
-}
-
-html[data-theme="dark"] footer {
-	color: var(--waffle-foreground-muted);
-}
-
-html[data-theme="dark"] .subtle {
-	color: var(--waffle-foreground-muted);
 }
 
 button,
@@ -220,23 +120,51 @@ button:hover,
 
 button.good,
 .button.good {
-	background-color: #9ccc65;
-	border-color: #6a9a38;
 	color: #2a4010;
 }
 
 button.bad,
 .button.bad {
-	background-color: var(--waffle-berry);
 	border-color: #8a2040;
-	color: #fff8e7;
-}
-
-a {
-	color: #a05020;
 }
 
 footer {
-	color: var(--waffle-syrup);
 	border-top: 1px dashed var(--border-color);
 }
+
+html[data-theme="dark"] {
+	--waffle-foreground: #3a1f08;
+	--waffle-foreground-muted: #5c3a18;
+	--waffle-accent-dark: #6b3410;
+
+	--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;
+	--hover-text-color: var(--waffle-foreground);
+	--disabled-text-color: #7a6548;
+
+	--body-bg-color: var(--waffle-cream);
+	--surface-bg-color: var(--waffle-batter);
+	--section-header-bg-color: var(--waffle-section);
+	--sidebar-bg-color: var(--waffle-sidebar);
+	--sidebar-link-color: var(--waffle-foreground);
+	--sidebar-hover-bg-color: var(--hover-background-color);
+	--sidebar-border-color: var(--waffle-crust);
+
+	--input-bg-color: var(--waffle-cream);
+	--input-fg-color: var(--waffle-foreground);
+}
+
+html[data-theme="dark"] section .section-header,
+html[data-theme="dark"] section .section-subheader {
+	border-bottom: 2px solid var(--waffle-crust);
+}
+
+html[data-theme="dark"] a:visited {
+	color: #5c2d0e;
+}

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

@@ -205,7 +205,7 @@
 .header-actions :deep(button) {
 	border: 0;
 	border-radius: 0;
-	color: var(--header-text-color, #fff);
+	color: var(--header-fg-color, var(--header-text-color, #fff));
 	background-color: transparent;
 	align-self: stretch;
 	display: inline-flex;
@@ -227,7 +227,7 @@
 #sidebar-toggler-button {
 	border: 0;
 	border-radius: 0;
-	color: var(--header-text-color, #fff);
+	color: var(--header-fg-color, var(--header-text-color, #fff));
 	background-color: transparent;
 	align-self: stretch;
 	display: inline-flex;
@@ -260,7 +260,7 @@ header .search-trigger,
 header .search-trigger.neutral {
 	border: 0;
 	border-radius: 0;
-	color: var(--header-text-color, #fff);
+	color: var(--header-fg-color, var(--header-text-color, #fff));
 	background-color: transparent;
 	align-self: stretch;
 	height: 100%;

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) {