picocrank 1.25.2 → 1.26.0

package/eslint.config.js

@@ -0,0 +1,68 @@
+import js from '@eslint/js'
+import pluginVue from 'eslint-plugin-vue'
+import globals from 'globals'
+import tseslint from 'typescript-eslint'
+import vueParser from 'vue-eslint-parser'
+
+export default [
+	{
+		ignores: ['dist/**', 'node_modules/**'],
+	},
+	js.configs.recommended,
+	...pluginVue.configs['flat/recommended'],
+	{
+		files: ['**/*.{js,vue}'],
+		languageOptions: {
+			ecmaVersion: 'latest',
+			sourceType: 'module',
+			globals: {
+				...globals.browser,
+				...globals.node,
+			},
+		},
+		rules: {
+			'no-unused-vars': ['error', {
+				argsIgnorePattern: '^_',
+				caughtErrorsIgnorePattern: '^_',
+				varsIgnorePattern: '^_',
+			}],
+			'vue/multi-word-component-names': 'off',
+			'vue/no-v-html': 'off',
+			'vue/html-indent': 'off',
+			'vue/max-attributes-per-line': 'off',
+			'vue/singleline-html-element-content-newline': 'off',
+			'vue/html-self-closing': 'off',
+			'vue/multiline-html-element-content-newline': 'off',
+			'vue/first-attribute-linebreak': 'off',
+			'vue/html-closing-bracket-newline': 'off',
+			'vue/attributes-order': 'off',
+			'vue/attribute-hyphenation': 'off',
+			'vue/v-on-event-hyphenation': 'off',
+			'vue/no-spaces-around-equal-signs-in-attribute': 'off',
+			'vue/require-default-prop': 'off',
+			'vue/block-order': 'off',
+			'vue/v-slot-style': 'off',
+			'vue/html-closing-bracket-spacing': 'off',
+		},
+	},
+	{
+		files: ['**/*.vue'],
+		languageOptions: {
+			parser: vueParser,
+			parserOptions: {
+				parser: {
+					js: 'espree',
+					ts: tseslint.parser,
+				},
+				sourceType: 'module',
+				extraFileExtensions: ['.vue'],
+			},
+		},
+	},
+	{
+		files: ['**/*.vue'],
+		rules: {
+			'no-undef': 'off',
+		},
+	},
+]

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "picocrank",
-  "version": "1.25.2",
+  "version": "1.26.0",
+  "type": "module",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
   "scripts": {
@@ -8,6 +9,8 @@
     "build": "vite build --base './'",
     "build:minimal": "VITE_INCLUDE_SUPPLEMENTAL_THEMES=false vite build --base './'",
     "preview": "vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -23,14 +26,21 @@
     "@hugeicons/core-free-icons": "^4.3.0",
     "@hugeicons/vue": "^1.0.8",
     "@vitejs/plugin-vue": "^6.0.8",
-    "femtocrank": "^2.6.1",
+    "femtocrank": "^2.7.0",
     "unplugin-vue-components": "^32.1.0",
     "vite": "^8.2.2",
     "vue": "^3.5.41",
     "vue-router": "^5.2.0"
   },
   "devDependencies": {
-    "semantic-release": "^25.0.9"
+    "@eslint/js": "^10.0.1",
+    "eslint": "^10.9.1",
+    "eslint-plugin-vue": "^10.10.0",
+    "globals": "^17.11.0",
+    "semantic-release": "^25.0.9",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.68.0",
+    "vue-eslint-parser": "^10.4.1"
   },
   "homepage": "https://github.com/jamesread/picocrank#readme"
 }

package/router.js

@@ -16,6 +16,13 @@ import { PaintBoardIcon } from '@hugeicons/core-free-icons';
 import { UserIcon } from '@hugeicons/core-free-icons';
 import { InformationCircleIcon } from '@hugeicons/core-free-icons';
 
+import {
+	hubChildBreadcrumbs,
+	hubSectionBreadcrumbs,
+	standaloneBreadcrumbs,
+	viewItemBreadcrumbs,
+} from './vue/data/routeBreadcrumbs.js';
+
 const routes = [
   {
     name: 'Welcome',
@@ -33,6 +40,7 @@ const routes = [
     meta: {
       title: 'Page structure',
       icon: LayoutGridIcon,
+      breadcrumbs: hubChildBreadcrumbs('NavLayoutsHub', 'PageStructure', 'Page structure'),
     }
   },
   {
@@ -42,6 +50,7 @@ const routes = [
     meta: {
       title: 'Theme Switcher',
       icon: PaintBoardIcon,
+      breadcrumbs: hubChildBreadcrumbs('NavLayoutsHub', 'ThemePreview', 'Theme Switcher'),
     }
   },
   {
@@ -51,6 +60,7 @@ const routes = [
     meta: {
       title: 'User details',
       icon: UserIcon,
+      breadcrumbs: standaloneBreadcrumbs('UserDetails', 'User details'),
     }
   },
   {
@@ -61,6 +71,7 @@ const routes = [
     meta: {
       title: 'Table',
       icon: TableIcon,
+      breadcrumbs: hubChildBreadcrumbs('NavDataDisplayHub', 'TableExample', 'Table'),
     }
   },
   {
@@ -70,6 +81,7 @@ const routes = [
     meta: {
       title: 'Remote table',
       icon: TableIcon,
+      breadcrumbs: hubChildBreadcrumbs('NavDataDisplayHub', 'TableRemoteExample', 'Remote table'),
     }
   },
   {
@@ -80,6 +92,7 @@ const routes = [
     meta: {
       title: 'View item',
       icon: ViewIcon,
+      breadcrumbs: viewItemBreadcrumbs,
     }
   },
   {
@@ -89,6 +102,7 @@ const routes = [
     meta: {
       title: 'Admin',
       icon: SecurityValidationIcon,
+      breadcrumbs: hubChildBreadcrumbs('NavLayoutsHub', 'Admin', 'Admin'),
     }
   },
   {
@@ -99,6 +113,7 @@ const routes = [
     meta: {
       title: 'Calendar',
       icon: CalendarIcon,
+      breadcrumbs: hubChildBreadcrumbs('NavDataDisplayHub', 'CalendarExample', 'Calendar'),
     }
   },
   {
@@ -108,6 +123,7 @@ const routes = [
     meta: {
       title: 'Login',
       icon: SecurityValidationIcon,
+      breadcrumbs: standaloneBreadcrumbs('Login', 'Login'),
     }
   },
   {
@@ -117,6 +133,7 @@ const routes = [
     meta: {
       title: 'Buttons',
       icon: CursorPointer01Icon,
+      breadcrumbs: hubChildBreadcrumbs('NavFormsInputHub', 'ButtonsExample', 'Buttons'),
     }
   },
   {
@@ -126,6 +143,7 @@ const routes = [
     meta: {
       title: 'Forms',
       icon: EditIcon,
+      breadcrumbs: hubChildBreadcrumbs('NavFormsInputHub', 'FormExample', 'Forms'),
     }
   },
   {
@@ -135,6 +153,7 @@ const routes = [
     meta: {
       title: 'Read-only output',
       icon: ClipboardCopyIcon,
+      breadcrumbs: hubChildBreadcrumbs('NavDataDisplayHub', 'ReadOnlyTextAreaExample', 'Read-only output'),
     }
   },
   {
@@ -144,6 +163,7 @@ const routes = [
     meta: {
       title: 'Status & notifications',
       icon: StatusIcon,
+      breadcrumbs: hubChildBreadcrumbs('NavFeedbackStatusHub', 'StatusExample', 'Status & notifications'),
     }
   },
   {
@@ -153,6 +173,7 @@ const routes = [
     meta: {
       title: 'Dialog',
       icon: InformationCircleIcon,
+      breadcrumbs: hubChildBreadcrumbs('NavFeedbackStatusHub', 'DialogExample', 'Dialog'),
     }
   },
   {
@@ -162,6 +183,7 @@ const routes = [
     meta: {
       title: 'Tabs',
       icon: Menu01Icon,
+      breadcrumbs: hubChildBreadcrumbs('NavLayoutsHub', 'TabsExample', 'Tabs'),
     }
   },
   {
@@ -171,6 +193,57 @@ const routes = [
     meta: {
       title: 'Navigation Grid',
       icon: Navigation01Icon,
+      breadcrumbs: hubChildBreadcrumbs('NavLayoutsHub', 'NavigationGridExample', 'Navigation Grid'),
+    }
+  },
+  {
+    name: 'NavLayoutsHub',
+    path: '/nav/layouts',
+    component: () => import('./vue/examples/NavSectionHub.vue'),
+    meta: {
+      title: 'Layouts',
+      icon: LayoutGridIcon,
+      breadcrumbs: hubSectionBreadcrumbs('NavLayoutsHub'),
+    }
+  },
+  {
+    name: 'NavDataDisplayHub',
+    path: '/nav/data-display',
+    component: () => import('./vue/examples/NavSectionHub.vue'),
+    meta: {
+      title: 'Data display',
+      icon: TableIcon,
+      breadcrumbs: hubSectionBreadcrumbs('NavDataDisplayHub'),
+    }
+  },
+  {
+    name: 'NavFormsInputHub',
+    path: '/nav/forms-input',
+    component: () => import('./vue/examples/NavSectionHub.vue'),
+    meta: {
+      title: 'Forms & input',
+      icon: EditIcon,
+      breadcrumbs: hubSectionBreadcrumbs('NavFormsInputHub'),
+    }
+  },
+  {
+    name: 'NavFeedbackStatusHub',
+    path: '/nav/feedback-status',
+    component: () => import('./vue/examples/NavSectionHub.vue'),
+    meta: {
+      title: 'Feedback & status',
+      icon: StatusIcon,
+      breadcrumbs: hubSectionBreadcrumbs('NavFeedbackStatusHub'),
+    }
+  },
+  {
+    name: 'NavPatternsHub',
+    path: '/nav/patterns',
+    component: () => import('./vue/examples/NavSectionHub.vue'),
+    meta: {
+      title: 'Patterns',
+      icon: CursorPointer01Icon,
+      breadcrumbs: hubSectionBreadcrumbs('NavPatternsHub'),
     }
   },
   {
@@ -180,6 +253,7 @@ const routes = [
     meta: {
       title: 'Login',
       icon: SecurityValidationIcon,
+      breadcrumbs: hubChildBreadcrumbs('NavFormsInputHub', 'LoginExample', 'Login'),
     }
   }
 ];

package/styles/dark-theme.css

@@ -4,9 +4,9 @@ html[data-theme="dark"] {
 	color-scheme: dark;
 
 	--body-bg-color: #262626;
-	--surface-bg-color: #343434;
+	--section-bg-color: #343434;
 	--standout-bg-color: #1f1f1f;
-	--section-header-bg-color: var(--surface-bg-color);
+	--section-header-bg-color: var(--section-bg-color);
 
 	--header-bg-color: #000;
 	--header-border-color: #222;
@@ -18,16 +18,18 @@ html[data-theme="dark"] {
 	--sidebar-hover-bg-color: var(--hover-background-color);
 
 	--footer-chip-bg-color: #444;
+	--footer-link-color: lightblue;
 
 	--text-color: #ddd;
+	--muted-text-color: color-mix(in srgb, var(--text-color) 87%, #121619);
 	--link-color: lightblue;
 	--annotation-key-color: #aaa;
 	--focus-outline-color: #fff;
 
 	--border-color: #595959;
-	--shadow-color: #121212;
+	--shadow-color: color-mix(in srgb, var(--body-bg-color) 48%, #121619);
 
-	--hover-background-color: #1d345c;
+	--hover-background-color: color-mix(in srgb, var(--header-hover-background-color) 45%, var(--section-bg-color));
 	--hover-text-color: var(--on-accent-fg);
 
 	--disabled-background-color: #333;
@@ -35,26 +37,33 @@ html[data-theme="dark"] {
 
 	--input-bg-color: #4e4e4e;
 	--input-fg-color: var(--text-color);
-	--control-option-bg-color: #555;
+	--control-option-bg-color: var(--section-bg-color);
 	--control-hover-bg-color: var(--hover-background-color);
+	--control-checked-bg: color-mix(in srgb, #8fb59a 45%, var(--section-bg-color));
+	--control-checked-hover-bg: color-mix(in srgb, #8fb59a 55%, var(--section-bg-color));
+	--control-checked-fg: var(--text-color);
 
 	--menu-item-hover-background-color: var(--hover-background-color);
-	--menu-dropdown-background-color: var(--surface-bg-color);
-	--menu-dropdown-shadow: 0 0 .5em var(--shadow-color);
+	--menu-dropdown-background-color: var(--section-bg-color);
+	--menu-dropdown-shadow: 0 .4em 1.1em color-mix(in srgb, black 55%, transparent), 0 0 0 1px var(--menu-dropdown-border-color);
 	--menu-dropdown-link-hover-background-color: var(--hover-background-color);
 	--header-menu-dropdown-link-hover-background-color: var(--header-hover-background-color);
 
-	--table-sticky-bg: var(--surface-bg-color);
+	--table-sticky-bg: var(--section-bg-color);
 	--table-row-hover-bg: var(--hover-background-color);
 	--table-row-hover-fg: var(--on-accent-fg);
 	--table-sticky-hover-bg: var(--table-row-hover-bg);
-	--table-uneditable-bg: #555;
+	--table-uneditable-bg: color-mix(in srgb, var(--header-hover-background-color) 18%, var(--section-bg-color));
 	--table-sticky-uneditable-bg: var(--table-uneditable-bg);
 
 	--progress-track-bg-color: var(--table-uneditable-bg);
+	--progress-fill-bg-color: #8fb59a;
 
-	--nav-grid-accent-fg: var(--link-color);
-	--nav-grid-accent-bg: var(--link-color);
+	--karma-info-tint: color-mix(in srgb, var(--karma-info) 30%, var(--standout-bg-color));
+	--karma-info-wash: color-mix(in srgb, var(--karma-info) 22%, var(--standout-bg-color));
+
+	--karma-warning: #ffeb3b;
+	--karma-warning-tint: color-mix(in srgb, var(--karma-warning) 30%, var(--standout-bg-color));
 }
 
 html[data-theme="light"] {

package/styles/picocrank-extensions.css

@@ -5,22 +5,13 @@
 	--table-header-active-fg: var(--link-color);
 	--table-header-active-bg: var(--hover-background-color);
 	--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);
+	--tab-active-fg: var(--control-checked-fg);
+	--tab-active-bg: var(--control-checked-bg);
+	--tab-active-hover-bg: var(--control-checked-hover-bg);
+
+	--hover-background-color: color-mix(in srgb, var(--body-bg-color) 45%, var(--section-bg-color));
+	--control-hover-bg-color: var(--hover-background-color);
+	--sidebar-hover-bg-color: var(--hover-background-color);
 
 	--quick-search-dialog-bg: var(--standout-bg-color);
 	--quick-search-dialog-fg: var(--text-color);
@@ -31,25 +22,22 @@
 	--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-highlight-bg: var(--karma-warning-tint);
 	--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-error-fg: var(--karma-on-bg-fg);
 	--login-muted-fg: var(--muted-text-color);
 
 	--table-muted-fg: var(--muted-text-color);
 
-	--table-popover-bg: var(--surface-bg-color);
+	--table-popover-bg: var(--section-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);
@@ -57,17 +45,17 @@
 	--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);
+	--table-popover-error-fg: var(--karma-bad);
+	--table-popover-success-fg: var(--karma-good);
 
 	--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-surface-bg: var(--section-bg-color);
 	--calendar-border: var(--border-color);
-	--calendar-error-fg: var(--karma-bad-fg);
+	--calendar-error-fg: var(--karma-bad);
 	--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);
@@ -75,23 +63,82 @@
 	--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-today-bg: var(--karma-warning-tint);
+	--calendar-today-hover-bg: var(--karma-note-tint);
 	--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-border: color-mix(in srgb, var(--karma-on-bg-fg) 35%, var(--karma-good));
+	--calendar-event-hover-bg: color-mix(in srgb, var(--karma-good) 80%, var(--karma-on-bg-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);
+
+	--danger-zone-border: color-mix(in srgb, var(--karma-bad) 35%, var(--border-color));
+	--danger-zone-bg: var(--standout-bg-color);
+	--danger-zone-summary-hover-bg: var(--karma-bad-tint);
+	--danger-zone-warning-fg: var(--muted-text-color);
+	--danger-zone-focus-outline: var(--karma-bad-border);
 }
 
 table thead th {
 	color: var(--table-header-fg);
 }
+
+/* Flex children default to min-width: auto, which lets wide tables expand the page. */
+#content,
+#content main,
+section .section-content {
+	min-width: 0;
+}
+
+/* Femtocrank 2.7 compacts section toolbars; keep pre-upgrade default button padding. */
+section .section-header [role="toolbar"] button,
+section .section-header [role="toolbar"] .button {
+	padding-top: .4em;
+	padding-bottom: .4em;
+	padding-left: 1em;
+	padding-right: 1em;
+	min-width: 0;
+	line-height: normal;
+}
+}
+
+/*
+ * Responsive column priorities: classes col-priority-1 … col-priority-5 on th/td only
+ * take effect inside a .responsive-cols wrapper via container queries (not standalone
+ * class rules). Mirrored here (outside @layer) so they win the cascade and are easy to find.
+ * See also node_modules/femtocrank/style.css (.responsive-cols / @container responsive-cols).
+ */
+.responsive-cols {
+	container-type: inline-size;
+	container-name: responsive-cols;
+	display: block;
+	width: 100%;
+	min-width: 0;
+	max-width: 100%;
+}
+
+@container responsive-cols (max-width: 38rem) {
+	:is(th, td).col-priority-1 { display: none; }
+}
+
+@container responsive-cols (max-width: 34rem) {
+	:is(th, td).col-priority-2 { display: none; }
+}
+
+@container responsive-cols (max-width: 30rem) {
+	:is(th, td).col-priority-3 { display: none; }
+}
+
+@container responsive-cols (max-width: 26rem) {
+	:is(th, td).col-priority-4 { display: none; }
+}
+
+@container responsive-cols (max-width: 22rem) {
+	:is(th, td).col-priority-5 { display: none; }
 }

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

@@ -41,7 +41,7 @@ html[data-theme="dark"] {
 	--ctp-good-fg: var(--ctp-crust);
 
 	--body-bg-color: var(--ctp-base);
-	--surface-bg-color: var(--ctp-mantle);
+	--section-bg-color: var(--ctp-mantle);
 	--standout-bg-color: var(--ctp-mantle);
 	--section-header-bg-color: var(--ctp-mantle);
 	--shadow-color: var(--ctp-shadow-strong);
@@ -50,8 +50,6 @@ 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);
@@ -74,6 +72,9 @@ html[data-theme="dark"] {
 	--input-fg-color: var(--ctp-text);
 	--control-option-bg-color: var(--ctp-surface0);
 	--control-hover-bg-color: var(--ctp-surface1);
+	--control-checked-bg: color-mix(in srgb, var(--ctp-green) 28%, var(--standout-bg-color));
+	--control-checked-hover-bg: color-mix(in srgb, var(--ctp-green) 36%, var(--standout-bg-color));
+	--control-checked-fg: var(--ctp-text);
 	--menu-hover-bg-color: var(--ctp-surface0);
 
 	--table-row-hover-bg: var(--ctp-surface0);
@@ -96,19 +97,11 @@ html[data-theme="dark"] {
 	--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);
+	--karma-on-bg-fg: var(--ctp-good-fg);
 }
 
 html[data-theme="light"] {
@@ -144,7 +137,7 @@ html[data-theme="light"] {
 	--ctp-good-fg: var(--ctp-base);
 
 	--body-bg-color: var(--ctp-base);
-	--surface-bg-color: var(--ctp-mantle);
+	--section-bg-color: var(--ctp-mantle);
 	--standout-bg-color: var(--ctp-mantle);
 	--section-header-bg-color: var(--ctp-mantle);
 	--shadow-color: var(--ctp-shadow-strong);
@@ -153,8 +146,6 @@ 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);
@@ -177,6 +168,9 @@ html[data-theme="light"] {
 	--input-fg-color: var(--ctp-text);
 	--control-option-bg-color: var(--ctp-surface0);
 	--control-hover-bg-color: var(--ctp-surface1);
+	--control-checked-bg: color-mix(in srgb, var(--ctp-green) 20%, var(--standout-bg-color));
+	--control-checked-hover-bg: color-mix(in srgb, var(--ctp-green) 28%, var(--standout-bg-color));
+	--control-checked-fg: var(--ctp-text);
 	--menu-hover-bg-color: var(--ctp-surface0);
 
 	--table-row-hover-bg: var(--ctp-surface0);
@@ -199,17 +193,9 @@ html[data-theme="light"] {
 	--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);
+	--karma-on-bg-fg: var(--ctp-good-fg);
 }