picocrank 1.21.5 → 1.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.21.5",
+  "version": "1.22.0",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
   "scripts": {
@@ -18,17 +18,17 @@
     "url": "https://github.com/jamesread/picocrank/issues"
   },
   "dependencies": {
-    "@hugeicons/core-free-icons": "^4.2.2",
+    "@hugeicons/core-free-icons": "^4.2.3",
     "@hugeicons/vue": "^1.0.7",
-    "@vitejs/plugin-vue": "^6.0.7",
-    "femtocrank": "^2.5.0",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "femtocrank": "^2.5.1",
     "unplugin-vue-components": "^32.1.0",
-    "vite": "^8.1.2",
-    "vue": "^3.5.39",
-    "vue-router": "^5.1.0"
+    "vite": "^8.2.0",
+    "vue": "^3.5.40",
+    "vue-router": "^5.2.0"
   },
   "devDependencies": {
-    "semantic-release": "^25.0.5"
+    "semantic-release": "^25.0.8"
   },
   "homepage": "https://github.com/jamesread/picocrank#readme"
 }

package/public/themes/README.md

@@ -0,0 +1,29 @@
+# Drop-in themes
+
+Themes are **not** part of the PicoCrank Vite/JS CSS bundle. Drop a folder here and restart the dev server (or rebuild) to make it discoverable.
+
+## Layout
+
+```
+public/themes/
+├── index.json              # generated by Vite — do not edit by hand
+├── <theme-folder-name>/
+│   ├── theme.css           # required
+│   └── …optional assets…
+```
+
+A directory is a valid theme only if it contains `theme.css`.
+
+## Asset URLs
+
+Theme CSS is loaded via `@import` into a document-level stylesheet, so relative URLs resolve incorrectly. Use absolute paths:
+
+```css
+body {
+  background-image: url('/themes/mytheme/background.png');
+}
+```
+
+## Switching
+
+The examples app uses `useCustomTheme()` to list themes from `index.json` and apply the selected `theme.css` with `@import … layer(theme)`.

package/public/themes/catppuccin/theme.css

@@ -0,0 +1,195 @@
+/*
+ * Catppuccin Mocha sample theme for PicoCrank / Femtocrank.
+ * Palette: https://catppuccin.com/palette/ (Mocha)
+ *
+ * Asset URLs must be absolute, e.g.:
+ *   background-image: url('/themes/catppuccin/background.png');
+ */
+
+:root,
+html {
+	color-scheme: dark;
+
+	--ctp-rosewater: #f5e0dc;
+	--ctp-flamingo: #f2cdcd;
+	--ctp-pink: #f5c2e7;
+	--ctp-mauve: #cba6f7;
+	--ctp-red: #f38ba8;
+	--ctp-maroon: #eba0ac;
+	--ctp-peach: #fab387;
+	--ctp-yellow: #f9e2af;
+	--ctp-green: #a6e3a1;
+	--ctp-teal: #94e2d5;
+	--ctp-sky: #89dceb;
+	--ctp-sapphire: #74c7ec;
+	--ctp-blue: #89b4fa;
+	--ctp-lavender: #b4befe;
+	--ctp-text: #cdd6f4;
+	--ctp-subtext1: #bac2de;
+	--ctp-subtext0: #a6adc8;
+	--ctp-overlay2: #9399b2;
+	--ctp-overlay1: #7f849c;
+	--ctp-overlay0: #6c7086;
+	--ctp-surface2: #585b70;
+	--ctp-surface1: #45475a;
+	--ctp-surface0: #313244;
+	--ctp-base: #1e1e2e;
+	--ctp-mantle: #181825;
+	--ctp-crust: #11111b;
+
+	--text-color: var(--ctp-text);
+	--border-color: var(--ctp-surface1);
+	--standout-bg-color: var(--ctp-mantle);
+	--hover-background-color: var(--ctp-surface0);
+	--hover-text-color: var(--ctp-text);
+	--header-hover-background-color: var(--ctp-surface1);
+	--header-hover-text-color: var(--ctp-text);
+	--disabled-background-color: var(--ctp-surface0);
+	--disabled-text-color: var(--ctp-overlay0);
+
+	--karma-good: var(--ctp-green);
+	--karma-bad: var(--ctp-red);
+	--karma-warning: var(--ctp-yellow);
+	--karma-severe: var(--ctp-maroon);
+	--karma-important: var(--ctp-peach);
+	--karma-note: var(--ctp-sapphire);
+	--karma-info: var(--ctp-surface1);
+	--karma-old: var(--ctp-overlay0);
+
+	--karma-good-fg: var(--ctp-green);
+	--karma-bad-fg: var(--ctp-red);
+	--karma-warning-fg: var(--ctp-yellow);
+	--karma-severe-fg: var(--ctp-maroon);
+	--karma-important-fg: var(--ctp-peach);
+	--karma-note-fg: var(--ctp-sapphire);
+	--karma-info-fg: var(--ctp-subtext0);
+	--karma-old-fg: var(--ctp-overlay1);
+}
+
+body {
+	background-color: var(--ctp-base);
+	color: var(--ctp-text);
+}
+
+header {
+	background-color: var(--ctp-crust);
+	border-bottom: 1px solid var(--ctp-surface0);
+	box-shadow: none;
+	color: var(--ctp-text);
+}
+
+#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(--ctp-text);
+}
+
+#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);
+}
+
+aside,
+#sidebar {
+	background-color: var(--ctp-mantle);
+	color: var(--ctp-text);
+	border-color: var(--ctp-surface0);
+	/* Replace Femtocrank's light gray glow — it reads as a haze on Mocha */
+	box-shadow: 0.15em 0 0.6em rgba(17, 17, 27, 0.65);
+}
+
+aside a,
+aside a:visited {
+	color: var(--ctp-text);
+}
+
+aside a:hover,
+aside :is(ul, menu) li a:hover,
+aside .nav-section-header:hover {
+	background-color: var(--ctp-surface0);
+	color: var(--ctp-text);
+}
+
+section {
+	background-color: var(--ctp-mantle);
+	color: var(--ctp-text);
+	box-shadow: 0 0 0.5em var(--ctp-crust);
+	border-color: var(--ctp-surface0);
+}
+
+section .section-header,
+section .section-subheader {
+	background-color: var(--ctp-mantle);
+	border-bottom-color: var(--ctp-surface0);
+	color: var(--ctp-text);
+}
+
+button,
+.button {
+	background-color: var(--ctp-surface0);
+	border: 1px solid var(--ctp-surface1);
+	color: var(--ctp-text);
+}
+
+button:hover,
+.button:hover {
+	background-color: var(--ctp-surface1);
+	color: var(--ctp-text);
+}
+
+button.good,
+.button.good {
+	background-color: var(--ctp-green);
+	border-color: var(--ctp-green);
+	color: var(--ctp-crust);
+}
+
+button.bad,
+.button.bad {
+	background-color: var(--ctp-red);
+	border-color: var(--ctp-red);
+	color: var(--ctp-crust);
+}
+
+button.warning,
+.button.warning {
+	background-color: var(--ctp-yellow);
+	border-color: var(--ctp-yellow);
+	color: var(--ctp-crust);
+}
+
+button.neutral,
+.button.neutral {
+	background-color: var(--ctp-surface1);
+	border-color: var(--ctp-surface2);
+	color: var(--ctp-text);
+}
+
+input,
+select,
+textarea {
+	background-color: var(--ctp-surface0);
+	border: 1px solid var(--ctp-surface1);
+	color: var(--ctp-text);
+}
+
+a {
+	color: var(--ctp-blue);
+}
+
+footer {
+	color: var(--ctp-subtext0);
+	border-top-color: var(--ctp-surface0);
+}
+
+.subtle {
+	color: var(--ctp-subtext0);
+}

package/public/themes/dracula/theme.css

@@ -0,0 +1,181 @@
+/*
+ * Dracula sample theme for PicoCrank / Femtocrank.
+ * Palette: https://draculatheme.com/ / https://spec.draculatheme.com/
+ *
+ * Asset URLs must be absolute, e.g.:
+ *   background-image: url('/themes/dracula/background.png');
+ */
+
+:root,
+html {
+	color-scheme: dark;
+
+	--dracula-background: #282a36;
+	--dracula-current-line: #44475a;
+	--dracula-foreground: #f8f8f2;
+	--dracula-comment: #6272a4;
+	--dracula-cyan: #8be9fd;
+	--dracula-green: #50fa7b;
+	--dracula-orange: #ffb86c;
+	--dracula-pink: #ff79c6;
+	--dracula-purple: #bd93f9;
+	--dracula-red: #ff5555;
+	--dracula-yellow: #f1fa8c;
+	--dracula-selection: #44475a;
+	--dracula-ansi-black: #21222c;
+
+	--text-color: var(--dracula-foreground);
+	--border-color: var(--dracula-current-line);
+	--standout-bg-color: var(--dracula-ansi-black);
+	--hover-background-color: var(--dracula-selection);
+	--hover-text-color: var(--dracula-foreground);
+	--header-hover-background-color: var(--dracula-selection);
+	--header-hover-text-color: var(--dracula-foreground);
+	--disabled-background-color: var(--dracula-current-line);
+	--disabled-text-color: var(--dracula-comment);
+
+	--karma-good: var(--dracula-green);
+	--karma-bad: var(--dracula-red);
+	--karma-warning: var(--dracula-yellow);
+	--karma-severe: var(--dracula-orange);
+	--karma-important: var(--dracula-purple);
+	--karma-note: var(--dracula-cyan);
+	--karma-info: var(--dracula-current-line);
+	--karma-old: var(--dracula-comment);
+
+	--karma-good-fg: var(--dracula-green);
+	--karma-bad-fg: var(--dracula-red);
+	--karma-warning-fg: var(--dracula-yellow);
+	--karma-severe-fg: var(--dracula-orange);
+	--karma-important-fg: var(--dracula-purple);
+	--karma-note-fg: var(--dracula-cyan);
+	--karma-info-fg: var(--dracula-comment);
+	--karma-old-fg: var(--dracula-comment);
+}
+
+body {
+	background-color: var(--dracula-background);
+	color: var(--dracula-foreground);
+}
+
+header {
+	background-color: var(--dracula-ansi-black);
+	border-bottom: 1px solid var(--dracula-current-line);
+	box-shadow: none;
+	color: var(--dracula-foreground);
+}
+
+#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(--dracula-foreground);
+}
+
+#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);
+}
+
+aside,
+#sidebar {
+	background-color: var(--dracula-ansi-black);
+	color: var(--dracula-foreground);
+	border-color: var(--dracula-current-line);
+	box-shadow: 0.15em 0 0.6em rgba(33, 34, 44, 0.85);
+}
+
+aside a,
+aside a:visited {
+	color: var(--dracula-foreground);
+}
+
+aside a:hover,
+aside :is(ul, menu) li a:hover,
+aside .nav-section-header:hover {
+	background-color: var(--dracula-selection);
+	color: var(--dracula-foreground);
+}
+
+section {
+	background-color: var(--dracula-ansi-black);
+	color: var(--dracula-foreground);
+	box-shadow: 0 0 0.5em rgba(33, 34, 44, 0.9);
+	border-color: var(--dracula-current-line);
+}
+
+section .section-header,
+section .section-subheader {
+	background-color: var(--dracula-ansi-black);
+	border-bottom-color: var(--dracula-current-line);
+	color: var(--dracula-foreground);
+}
+
+button,
+.button {
+	background-color: var(--dracula-current-line);
+	border: 1px solid var(--dracula-comment);
+	color: var(--dracula-foreground);
+}
+
+button:hover,
+.button:hover {
+	background-color: var(--dracula-selection);
+	color: var(--dracula-foreground);
+}
+
+button.good,
+.button.good {
+	background-color: var(--dracula-green);
+	border-color: var(--dracula-green);
+	color: var(--dracula-ansi-black);
+}
+
+button.bad,
+.button.bad {
+	background-color: var(--dracula-red);
+	border-color: var(--dracula-red);
+	color: var(--dracula-foreground);
+}
+
+button.warning,
+.button.warning {
+	background-color: var(--dracula-yellow);
+	border-color: var(--dracula-yellow);
+	color: var(--dracula-ansi-black);
+}
+
+button.neutral,
+.button.neutral {
+	background-color: var(--dracula-selection);
+	border-color: var(--dracula-comment);
+	color: var(--dracula-foreground);
+}
+
+input,
+select,
+textarea {
+	background-color: var(--dracula-background);
+	border: 1px solid var(--dracula-current-line);
+	color: var(--dracula-foreground);
+}
+
+a {
+	color: var(--dracula-pink);
+}
+
+footer {
+	color: var(--dracula-comment);
+	border-top-color: var(--dracula-current-line);
+}
+
+.subtle {
+	color: var(--dracula-comment);
+}

package/public/themes/index.json

@@ -0,0 +1,7 @@
+{
+  "themes": [
+    "catppuccin",
+    "dracula",
+    "waffles"
+  ]
+}

package/public/themes/waffles/theme.css

@@ -0,0 +1,143 @@
+/*
+ * Waffles — a playful accent sample theme for PicoCrank.
+ *
+ * Asset URLs must be absolute, e.g.:
+ *   background-image: url('/themes/waffles/background.png');
+ */
+
+:root,
+html {
+	--waffle-cream: #fff8e7;
+	--waffle-batter: #f5e6c8;
+	--waffle-crust: #c4863b;
+	--waffle-syrup: #8b4513;
+	--waffle-butter: #ffd966;
+	--waffle-berry: #c23b5a;
+
+	--text-color: var(--waffle-syrup);
+	--border-color: #e0c896;
+	--standout-bg-color: var(--waffle-batter);
+	--hover-background-color: #f0d9a8;
+	--hover-text-color: var(--waffle-syrup);
+	--header-hover-background-color: var(--waffle-crust);
+	--header-hover-text-color: var(--waffle-cream);
+	--disabled-background-color: #efe4cb;
+	--disabled-text-color: #a88860;
+
+	--karma-good: #b8d98a;
+	--karma-bad: #f0a0a8;
+	--karma-warning: var(--waffle-butter);
+	--karma-severe: #e08a6a;
+	--karma-important: #ffe8a3;
+	--karma-note: #a8d4e8;
+	--karma-info: var(--waffle-batter);
+	--karma-old: #d4c4a0;
+
+	--karma-good-fg: #4a7a28;
+	--karma-bad-fg: var(--waffle-berry);
+	--karma-warning-fg: #9a6b00;
+	--karma-severe-fg: #a04020;
+	--karma-important-fg: #8a6800;
+	--karma-note-fg: #2a6a88;
+	--karma-info-fg: #7a6540;
+	--karma-old-fg: #6a5840;
+}
+
+body {
+	background-color: var(--waffle-cream);
+	color: var(--waffle-syrup);
+	background-image:
+		repeating-linear-gradient(
+			0deg,
+			transparent,
+			transparent 11px,
+			rgba(196, 134, 59, 0.08) 11px,
+			rgba(196, 134, 59, 0.08) 12px
+		),
+		repeating-linear-gradient(
+			90deg,
+			transparent,
+			transparent 11px,
+			rgba(196, 134, 59, 0.08) 11px,
+			rgba(196, 134, 59, 0.08) 12px
+		);
+}
+
+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);
+}
+
+button,
+.button {
+	border: 1px solid var(--waffle-crust);
+	background-color: var(--waffle-butter);
+	color: var(--waffle-syrup);
+}
+
+button:hover,
+.button:hover {
+	background-color: #ffe14d;
+}
+
+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);
+}

package/router.js

@@ -12,6 +12,8 @@ import { ClipboardCopyIcon } from '@hugeicons/core-free-icons';
 import { CursorPointer01Icon } from '@hugeicons/core-free-icons';
 import { LayoutGridIcon } from '@hugeicons/core-free-icons';
 import { StatusIcon } from '@hugeicons/core-free-icons';
+import { PaintBoardIcon } from '@hugeicons/core-free-icons';
+import { UserIcon } from '@hugeicons/core-free-icons';
 
 const routes = [
   {
@@ -32,6 +34,24 @@ const routes = [
       icon: LayoutGridIcon,
     }
   },
+  {
+    name: 'ThemePreview',
+    path: '/theme-preview',
+    component: () => import('./vue/views/ThemePreview.vue'),
+    meta: {
+      title: 'Theme Switcher',
+      icon: PaintBoardIcon,
+    }
+  },
+  {
+    name: 'UserDetails',
+    path: '/user',
+    component: () => import('./vue/views/UserDetails.vue'),
+    meta: {
+      title: 'User details',
+      icon: UserIcon,
+    }
+  },
   {
     name: 'TableExample',
     path: '/table-example',

package/styles/dark-theme.css

@@ -158,12 +158,26 @@ html[data-theme="dark"] {
     background-color: #555;
   }
 
+  & .radio-group label:hover,
+  & .radio-group label:has(input:focus-visible) {
+    background-color: var(--hover-background-color);
+    color: white;
+  }
+
+  & .multiple-checklist {
+    border-color: var(--border-color);
+  }
+
+  & .multiple-checklist label {
+    background-color: #555;
+  }
+
   & aside {
     background-color: #000;
     box-shadow: 0 0 .5em #121212;
   }
 
-  & aside ul li a:hover {
+  & aside :is(ul, menu) li a:hover {
     background-color: var(--hover-background-color);
   }
 

package/styles.css

@@ -1,3 +1,19 @@
-/* Import femtocrank styles */
-@import 'femtocrank/style.css';
+/* Layer order: drop-in themes win over component and karma styles */
+@layer components, karma, theme;
+
+@import 'femtocrank/style.css' layer(components);
 @import './styles/dark-theme.css';
+
+/* Sidebar uses <menu> for nav items; mirror Femtocrank's aside ul rules. */
+@layer components {
+	aside menu {
+		list-style: none;
+		padding: 0;
+	}
+
+	aside menu li a {
+		text-decoration: none;
+		display: block;
+		padding: .4em .6em;
+	}
+}