picocrank 1.25.0 → 1.25.1

package/supplemental-themes/waffles/theme.css

@@ -15,17 +15,46 @@ 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);
 	--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 +75,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 +97,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 +118,49 @@ 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);
+	--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/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/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 {

package/vue/components/Tabs.vue

@@ -146,7 +146,7 @@ defineExpose({
 	border-radius: 0;
 	cursor: pointer;
 	font-size: 1em;
-	color: var(--text-muted, #666);
+	color: var(--tab-fg);
 	transition: all 0.2s ease;
 	white-space: nowrap;
 	position: relative;
@@ -158,13 +158,13 @@ defineExpose({
 }
 
 .tab-button.active {
-	color: var(--primary-color, #007bff);
-	border-bottom-color: var(--primary-color, #007bff);
+	color: var(--tab-active-fg);
+	border-bottom-color: var(--tab-active-fg);
 	font-weight: bold;
 }
 
 .tab-button:focus {
-	outline: 2px solid var(--primary-color, #007bff);
+	outline: 2px solid var(--tab-focus-outline-color);
 	outline-offset: -2px;
 	border-radius: 0;
 }
@@ -196,27 +196,6 @@ defineExpose({
 	}
 }
 
-/* Dark theme support */
-html[data-theme="dark"] {
-	.tabs-header {
-		border-bottom-color: var(--border-color, #444);
-	}
-
-	.tab-button {
-		color: var(--text-muted, #999);
-	}
-
-	.tab-button:hover {
-		color: var(--text-color, #fff);
-		background-color: var(--hover-background-color, #333);
-	}
-
-	.tab-button.active {
-		color: var(--primary-color, #60a5fa);
-		border-bottom-color: var(--primary-color, #60a5fa);
-	}
-}
-
 /* Responsive */
 @media (max-width: 768px) {
 	.tabs-header {

package/vue/components/ThemeSwitcher.vue

@@ -1,7 +1,13 @@
 <template>
-	<label class="theme-switcher">
+	<label :class="['theme-switcher', { 'theme-switcher--compact': compact }]">
 		<span v-if="label" class="theme-switcher-label">{{ label }}</span>
-		<select :value="themePreference" @change="onThemeChange">
+		<select
+			ref="selectRef"
+			:id="selectId || undefined"
+			:value="themePreference"
+			:aria-label="compact ? (label || 'Active theme') : undefined"
+			@change="onThemeChange"
+		>
 			<option value="">{{ defaultOptionLabel }}</option>
 			<option
 				v-for="name in availableThemes"
@@ -12,7 +18,7 @@
 			</option>
 		</select>
 	</label>
-	<p v-if="showEmptyHint && availableThemes.length === 0" class="subtle theme-switcher-hint">
+	<p v-if="showEmptyHint && !compact && availableThemes.length === 0" class="subtle theme-switcher-hint">
 		<slot name="empty">
 			No drop-in themes found. Add <code>public/themes/&lt;name&gt;/theme.css</code>
 			or set <code>include-supplemental-themes</code> to list bundled supplemental themes.
@@ -20,8 +26,12 @@
 	</p>
 </template>
 
+<script>
+export const HEADER_THEME_SWITCHER_SELECT_ID = 'picocrank-header-theme-switcher'
+</script>
+
 <script setup>
-import { onMounted, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { useCustomTheme } from '../composables/useCustomTheme.js'
 
 const props = defineProps({
@@ -31,7 +41,7 @@ const props = defineProps({
 	},
 	defaultOptionLabel: {
 		type: String,
-		default: 'Default (Femtocrank)',
+		default: 'Default (Femtocrank only)',
 	},
 	includeSupplementalThemes: {
 		type: Boolean,
@@ -53,6 +63,14 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	compact: {
+		type: Boolean,
+		default: false,
+	},
+	selectId: {
+		type: String,
+		default: undefined,
+	},
 })
 
 const emit = defineEmits(['change'])
@@ -66,6 +84,17 @@ const {
 	configure,
 } = useCustomTheme()
 
+const selectRef = ref(null)
+
+function focusSelect() {
+	selectRef.value?.focus()
+	selectRef.value?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+}
+
+defineExpose({
+	focus: focusSelect,
+})
+
 function syncOptions() {
 	configure({
 		includeSupplementalThemes: props.includeSupplementalThemes,
@@ -113,6 +142,16 @@ onMounted(() => {
 	min-width: 14rem;
 }
 
+.theme-switcher--compact {
+	flex-wrap: nowrap;
+	gap: 0;
+}
+
+.theme-switcher--compact select {
+	min-width: 10rem;
+	max-width: 13.5rem;
+}
+
 .theme-switcher-hint {
 	margin: 0.75rem 0 0;
 }

package/vue/components/TopBar.vue

@@ -97,7 +97,7 @@ function handleLinkClick(callback = null) {
 	padding: 0.5em 0.75em;
 	border-radius: 0.25em;
 	text-decoration: none;
-	color: var(--header-text-color, inherit);
+	color: var(--header-fg-color, var(--header-text-color, inherit));
 	transition: background-color 0.15s ease;
 	white-space: nowrap;
 	border: 0;
@@ -124,7 +124,7 @@ function handleLinkClick(callback = null) {
 
 html[data-theme="dark"] {
 	.topbar-link {
-		color: var(--header-text-color, #f8f9fa);
+		color: var(--header-fg-color, var(--header-text-color, #f8f9fa));
 	}
 	
 	.separator {

package/vue/examples/App.vue

@@ -2,6 +2,10 @@
 	<Navigation ref="navigation">
 		<Header username = "Guest" @toggleSidebar="toggleSidebar" @logoClick="goToIndex" @userClick="goToUserDetails" title = "PicoCrank" :logoUrl="logoUrl" :sidebarEnabled="sidebarEnabled" :navigation="navigation" :topBarEnabled="topBarEnabled" :showBranding="brandingEnabled" :breadcrumbs="breadcrumbsEnabled" :themeToggleEnabled="themeToggleEnabled">
 			<template #toolbar>
+				<ExampleHeaderThemeSwitcher
+					v-if="themeSwitcherEnabled"
+					:include-supplemental-themes="includeSupplementalThemes"
+				/>
 				<QuickSearch
 					v-if="quickSearchEnabled"
 					ref="quickSearchRef"
@@ -37,6 +41,7 @@
 	import { Pin02Icon, UserIcon } from '@hugeicons/core-free-icons'
 
 	import QuickSearch from './../components/QuickSearch.vue'
+	import ExampleHeaderThemeSwitcher from './ExampleHeaderThemeSwitcher.vue'
 	import Navigation from './../components/Navigation.vue'
 	import NotificationPopups from './../components/NotificationPopups.vue'
 	import '../../styles.css'
@@ -54,6 +59,8 @@
 	const quickSearchEnabled = ref(true);
 	const dummySearchFetchEnabled = ref(false);
 	const themeToggleEnabled = ref(true);
+	const themeSwitcherEnabled = ref(true);
+	const includeSupplementalThemes = ref(true);
 	const topBarEnabled = ref(false);
 	const breadcrumbsEnabled = ref(false);
 
@@ -93,6 +100,10 @@
 		themeToggleEnabled.value = !themeToggleEnabled.value;
 	}
 
+	function toggleThemeSwitcherEnabled() {
+		themeSwitcherEnabled.value = !themeSwitcherEnabled.value;
+	}
+
 	function toggleTopBarEnabled() {
 		topBarEnabled.value = !topBarEnabled.value;
 	}
@@ -161,6 +172,8 @@
 	provide('toggleDummySearchFetchEnabled', toggleDummySearchFetchEnabled);
 	provide('themeToggleEnabled', themeToggleEnabled);
 	provide('toggleThemeToggleEnabled', toggleThemeToggleEnabled);
+	provide('themeSwitcherEnabled', themeSwitcherEnabled);
+	provide('toggleThemeSwitcherEnabled', toggleThemeSwitcherEnabled);
 	provide('topBarEnabled', topBarEnabled);
 	provide('toggleTopBarEnabled', toggleTopBarEnabled);
 	provide('breadcrumbsEnabled', breadcrumbsEnabled);

package/vue/examples/ExampleHeaderThemeSwitcher.vue

@@ -0,0 +1,78 @@
+<template>
+	<ThemeSwitcher
+		v-if="enabled"
+		compact
+		label=""
+		:select-id="HEADER_THEME_SWITCHER_SELECT_ID"
+		default-option-label="Default (Femtocrank only)"
+		:include-supplemental-themes="includeSupplementalThemes"
+	/>
+</template>
+
+<script setup>
+import ThemeSwitcher, { HEADER_THEME_SWITCHER_SELECT_ID } from '../components/ThemeSwitcher.vue'
+
+defineProps({
+	enabled: {
+		type: Boolean,
+		default: true,
+	},
+	includeSupplementalThemes: {
+		type: Boolean,
+		default: true,
+	},
+})
+</script>
+
+<!-- Examples app only: match Header toolbar chrome (see Header search-trigger styles). -->
+<style>
+/*
+ * Header renders theme toggle before the toolbar slot; use flex order to swap
+ * the drop-in theme selector ahead of the light/dark button without changing Header.
+ */
+header .header-actions .theme-switcher--compact {
+	order: 1;
+	align-self: stretch;
+	display: inline-flex;
+	align-items: center;
+	margin: 0;
+}
+
+header .header-actions .theme-toggle {
+	order: 2;
+}
+
+header .header-actions .quick-search {
+	order: 3;
+}
+
+header .header-actions .user-info {
+	order: 4;
+}
+
+header .header-actions .theme-switcher--compact select {
+	align-self: stretch;
+	height: 100%;
+	border: 0;
+	border-radius: 0;
+	background-color: transparent;
+	color: var(--header-fg-color, var(--header-text-color, #fff));
+	padding-top: 0;
+	padding-bottom: 0;
+	padding-left: 0.6em;
+	padding-right: 0.6em;
+	font-size: small;
+	font-family: inherit;
+	cursor: pointer;
+}
+
+header .header-actions .theme-switcher--compact select:hover {
+	background-color: var(--header-hover-background-color);
+	color: var(--header-hover-text-color);
+}
+
+header .header-actions .theme-switcher--compact select:focus-visible {
+	outline: 2px solid var(--header-hover-text-color, #fff);
+	outline-offset: -2px;
+}
+</style>