picocrank 1.21.4 → 1.22.0

package/vue/views/ThemePreview.vue

@@ -0,0 +1,172 @@
+<template>
+	<Section
+		title="Theme Switcher"
+		subtitle="Drop-in themes layered on Femtocrank — not part of the Vite CSS/JS bundle"
+	>
+		<p>
+			Themes live under <code>public/themes/&lt;name&gt;/theme.css</code>. Drop a folder
+			in and restart the dev server (or rebuild); PicoCrank discovers themes from
+			<code>index.json</code> and applies them with <code>useCustomTheme()</code>.
+		</p>
+
+		<label class="theme-picker">
+			<span>Active theme</span>
+			<select :value="themePreference" @change="onThemeChange">
+				<option value="">Default (Femtocrank)</option>
+				<option
+					v-for="name in availableThemes"
+					:key="name"
+					:value="name"
+				>
+					{{ name }}
+				</option>
+			</select>
+		</label>
+
+		<p v-if="availableThemes.length === 0" class="subtle">
+			No drop-in themes found. Add <code>public/themes/&lt;name&gt;/theme.css</code>
+			and restart Vite.
+		</p>
+		<p v-else class="subtle">
+			Preference is stored in localStorage and applies across the whole examples site.
+			Light/dark mode (header sun/moon) is separate from drop-in themes.
+		</p>
+	</Section>
+
+	<Section title="Buttons" subtitle="Default and karma variants">
+		<div role="toolbar" class="preview-row">
+			<button type="button">Default</button>
+			<button type="button" class="neutral">Neutral</button>
+			<button type="button" class="good">Good</button>
+			<button type="button" class="bad">Bad</button>
+			<button type="button" class="warning">Warning</button>
+			<button type="button" disabled>Disabled</button>
+		</div>
+	</Section>
+
+	<Section title="Notifications" subtitle="Block-level karma status">
+		<div class="notification show good" role="status">
+			<strong>GOOD:</strong> Theme tokens are applying to karma backgrounds.
+		</div>
+		<div class="notification show bad" role="status">
+			<strong>BAD:</strong> Check contrast on error surfaces.
+		</div>
+		<div class="notification show warning" role="status">
+			<strong>WARNING:</strong> Accent and border colors should stay readable.
+		</div>
+		<p class="fg-success show inline-notification">
+			<strong>SUCCESS:</strong> Inline notification with foreground karma.
+		</p>
+		<p class="fg-warning show inline-notification">
+			<strong>WARNING:</strong> Another inline status line.
+		</p>
+	</Section>
+
+	<Section title="Form controls" subtitle="Inputs inherit theme variables">
+		<FormLayout @submit.prevent>
+			<FormField label="Name" for="theme-preview-name">
+				<input id="theme-preview-name" type="text" value="PicoCrank" />
+			</FormField>
+			<FormField label="Status" for="theme-preview-status">
+				<select id="theme-preview-status">
+					<option>Ready</option>
+					<option>Busy</option>
+				</select>
+			</FormField>
+			<FormField label="Notes" for="theme-preview-notes">
+				<textarea id="theme-preview-notes" rows="3">Override Femtocrank tokens in theme.css</textarea>
+			</FormField>
+			<template #actions>
+				<button type="submit" class="good">Save</button>
+				<button type="button" class="neutral">Cancel</button>
+			</template>
+		</FormLayout>
+	</Section>
+
+	<Section title="Content chrome" subtitle="Sections, links, and muted text">
+		<p>
+			Body copy should pick up <code>--text-color</code>.
+			<a href="#">Sample link</a> uses the theme link color.
+		</p>
+		<p class="subtle">
+			Muted / subtle text uses secondary contrast — useful for captions and hints.
+		</p>
+		<table class="preview-table">
+			<thead>
+				<tr>
+					<th>Token</th>
+					<th>Role</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td><code>--border-color</code></td>
+					<td>Borders and rules</td>
+				</tr>
+				<tr>
+					<td><code>--standout-bg-color</code></td>
+					<td>Raised / standout surfaces</td>
+				</tr>
+				<tr>
+					<td><code>--karma-*</code></td>
+					<td>Status backgrounds and accents</td>
+				</tr>
+			</tbody>
+		</table>
+	</Section>
+</template>
+
+<script setup>
+import Section from '../components/Section.vue'
+import FormLayout from '../components/FormLayout.vue'
+import FormField from '../components/FormField.vue'
+import { useCustomTheme } from '../composables/useCustomTheme.js'
+
+const { availableThemes, themePreference, setTheme, discoverThemes } = useCustomTheme()
+
+discoverThemes()
+
+function onThemeChange(event) {
+	setTheme(event.target.value)
+}
+</script>
+
+<style scoped>
+.theme-picker {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 0.75rem;
+	margin: 1rem 0;
+}
+
+.theme-picker select {
+	min-width: 14rem;
+}
+
+.preview-row {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+}
+
+.preview-table {
+	width: 100%;
+	border-collapse: collapse;
+}
+
+.preview-table th,
+.preview-table td {
+	text-align: left;
+	padding: 0.5rem 0.75rem;
+	border-bottom: 1px solid var(--border-color, #d7d7d7);
+}
+
+.notification {
+	margin-bottom: 0.5rem;
+}
+
+.inline-notification {
+	margin: 0.5rem 0;
+}
+</style>

package/vue/views/UserDetails.vue

@@ -0,0 +1,39 @@
+<template>
+	<Section
+		title="User details"
+		subtitle="Signed-in account for this example app"
+	>
+		<p class="subtle">
+			This is a minimal profile page used by the header username control.
+		</p>
+
+		<dl>
+			<dt>Display name</dt>
+			<dd>{{ user.displayName }}</dd>
+
+			<dt>Username</dt>
+			<dd>{{ user.username }}</dd>
+
+			<dt>Email</dt>
+			<dd><a :href="`mailto:${user.email}`">{{ user.email }}</a></dd>
+
+			<dt>Role</dt>
+			<dd>{{ user.role }}</dd>
+
+			<dt>Status</dt>
+			<dd><span class="tag good">{{ user.status }}</span></dd>
+		</dl>
+	</Section>
+</template>
+
+<script setup>
+import Section from '../components/Section.vue'
+
+const user = {
+	displayName: 'Guest User',
+	username: 'guest',
+	email: 'guest@example.com',
+	role: 'Viewer',
+	status: 'Active',
+}
+</script>

package/vue/views/Welcome.vue

@@ -110,6 +110,12 @@ 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',
@@ -128,12 +134,6 @@ const popularExamples = [
 		label: 'Buttons',
 		description: 'Variants, toolbars, and form actions',
 	},
-	{
-		name: 'StatusExample',
-		category: 'Feedback',
-		label: 'Status',
-		description: 'Inline messages and notification popups',
-	},
 ]
 
 function showWelcomeToast() {
@@ -156,6 +156,9 @@ onMounted(() => {
 	nav.addRouterLink('PageStructure', 'Page structure', {
 		description: 'Sidebar, header, QuickSearch, and breadcrumbs',
 	})
+	nav.addRouterLink('ThemePreview', 'Theme Switcher', {
+		description: 'Drop-in themes on Femtocrank',
+	})
 	nav.addRouterLink('TableExample', 'Table', {
 		description: 'Lists with sorting and pagination',
 	})