@owdproject/nuxt-theme-paper 0.0.0-stage → 4.0.0-alpha.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025  Open Web Desktop Team ~ github.com/owdproject
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,63 @@
-# Temporary Holding Version
+<p align="center">
+  <img width="160" height="160" src="https://avatars.githubusercontent.com/u/65117737?s=160&v=4" />
+</p>
+<h1 align="center">Paper Theme</h1>
+<h3 align="center">
+  Paper Theme for your Open Web Desktop client.
+</h3>
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+## Overview
+
+A minimal theme for Open Web Desktop focused on the core shell: windows, a slim system bar, and little else. Use it to test window chrome, layout, and app rendering without the full Nova desktop experience.
+
+**Visual style** — light and dark zinc neutrals, thin borders, compact system typography, and a subtle desktop grid.
+
+**Shell** — top system bar (start menu and clock); fixed window layer with resize and drag; no dock, workspaces, or file-system integration.
+
+**Components**
+
+- `Desktop` — `DesktopCore` with `PaperSystemBar`, stage content, and `DesktopCoreApplicationRender`
+- `Window` — title bar and content around `DesktopWindow`
+- Playground apps: Dino, Gridsky, Terminal, YouTube, SoundCloud, and To-do.
+
+## Installation
+
+```bash
+pnpm desktop add @owdproject/nuxt-theme-paper
+```
+
+## Usage
+
+#### Configuration
+
+```typescript
+// desktop.config.ts
+import { defineDesktopConfig } from '@owdproject/nuxt'
+
+export default defineDesktopConfig({
+  theme: '@owdproject/nuxt-theme-paper',
+  apps: ['@owdproject/nuxt-app-about'],
+})
+```
+
+## Development
+
+```bash
+git clone https://github.com/owdproject/nuxt-theme-paper.git
+cd theme-paper
+pnpm install
+pnpm dev
+```
+
+The theme and its playground form a standalone workspace. Use `@owdproject/nuxt` as the Nuxt module; the headless `@owdproject/core` is not a Nuxt module. The playground opens Terminal in development.
+
+To build the module and export the playground:
+
+```bash
+pnpm run prepack
+pnpm --dir playground run generate
+```
+
+## License
+
+The application is released under the [MIT License](LICENSE).

package/dist/module.d.mts

@@ -0,0 +1,7 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+declare const _default: {
+    with: <TOptionsDefaults extends Partial<_nuxt_schema.ModuleOptions>>(definition: _nuxt_schema.ModuleDefinition<_nuxt_schema.ModuleOptions, TOptionsDefaults, true> | _nuxt_schema.NuxtModule<_nuxt_schema.ModuleOptions, TOptionsDefaults, true>) => _nuxt_schema.NuxtModule<_nuxt_schema.ModuleOptions, TOptionsDefaults, true>;
+};
+
+export { _default as default };

package/dist/module.json

@@ -0,0 +1,9 @@
+{
+  "name": "desktop-theme-paper",
+  "configKey": "desktop",
+  "version": "4.0.0-alpha.3",
+  "builder": {
+    "@nuxt/module-builder": "1.0.3",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,55 @@
+import { existsSync } from 'node:fs';
+import { createResolver, installModule, addComponentsDir, addImportsDir, addPlugin } from '@nuxt/kit';
+import { defineDesktopTheme } from '@owdproject/nuxt';
+import { registerThemeTailwindPath } from '@owdproject/nuxt-kit-tailwind/kit/registerTailwindPath';
+import { paperAppearanceBootstrapScript } from '../dist/runtime/utils/paperAppearance.js';
+
+const module$1 = defineDesktopTheme({
+  meta: {
+    name: "desktop-theme-paper"
+  },
+  defaults: {
+    name: "paper",
+    systemBar: { enabled: true, position: "top", startButton: true },
+    dockBar: { enabled: false },
+    workspaces: { enabled: false },
+    windows: { position: "fixed" }
+  },
+  async setup(_options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    await installModule("@owdproject/nuxt-kit-primevue", { explorer: false });
+    registerThemeTailwindPath(nuxt, import.meta.url);
+    addComponentsDir({
+      path: resolve("./runtime/components"),
+      global: true
+    });
+    addImportsDir(resolve("./runtime/composables"));
+    const css = resolve("./runtime/assets/styles/index.css");
+    nuxt.options.css.push(existsSync(css) ? css : resolve("./runtime/assets/styles/index.scss"));
+    const head = nuxt.options.app.head ?? {};
+    const existingScripts = Array.isArray(head.script) ? head.script : head.script ? [head.script] : [];
+    nuxt.options.app.head = {
+      ...head,
+      htmlAttrs: {
+        "data-owd-appearance": "light",
+        ...head.htmlAttrs ?? {}
+      },
+      script: [
+        {
+          key: "paper-appearance-bootstrap",
+          innerHTML: paperAppearanceBootstrapScript,
+          tagPosition: "head",
+          type: "text/javascript"
+        },
+        ...existingScripts
+      ]
+    };
+    addPlugin({
+      src: resolve("./runtime/plugins/paper-appearance.client"),
+      mode: "client",
+      order: 1
+    });
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/assets/styles/index.css

@@ -0,0 +1,533 @@
+@charset "UTF-8";
+/* Light (default) — warm neutral Paper */
+:root,
+html[data-owd-appearance=light] {
+  color-scheme: light;
+  --paper-bg: #ececee;
+  --paper-surface: #f4f4f6;
+  --paper-menu-bg: #f4f4f6;
+  --paper-menu-header-bg: #f4f4f6;
+  /* Same mix ratio in both schemes → equal hairline weight on light/dark */
+  --paper-border: color-mix(in srgb, var(--paper-text) 10%, var(--paper-surface));
+  --paper-border-window: color-mix(in srgb, var(--paper-text) 18%, var(--paper-surface));
+  --paper-grid-color: color-mix(in srgb, var(--paper-text) 6%, transparent);
+  --paper-line: var(--paper-border);
+  --paper-line-strong: var(--paper-border);
+  --paper-text: #2c2c30;
+  --paper-text-secondary: #68686f;
+  --paper-text-tertiary: #98989f;
+  --paper-accent: #3b6fd4;
+  --paper-accent-soft: #e8eef8;
+  --paper-scrim: rgba(44, 44, 48, 0.14);
+  --paper-scrollbar-track: transparent;
+  --paper-scrollbar-thumb: var(--paper-border);
+  --paper-scrollbar-thumb-hover: color-mix(in srgb, var(--paper-text) 22%, var(--paper-surface));
+  --paper-shadow-menu: none;
+  --paper-shadow-bar: none;
+  --paper-shadow-window:
+    0 1px 2px rgba(44, 44, 48, 0.04),
+    0 8px 24px -6px rgba(44, 44, 48, 0.08);
+}
+
+/* Dark — lifted surfaces, same accent family */
+html[data-owd-appearance=dark] {
+  color-scheme: dark;
+  --paper-bg: #1c1c20;
+  --paper-surface: #26262a;
+  --paper-menu-bg: #26262a;
+  --paper-menu-header-bg: #26262a;
+  --paper-border: color-mix(in srgb, var(--paper-text) 10%, var(--paper-surface));
+  --paper-border-window: color-mix(in srgb, var(--paper-text) 12%, var(--paper-surface));
+  --paper-grid-color: color-mix(in srgb, var(--paper-text) 3.5%, transparent);
+  --paper-line: var(--paper-border);
+  --paper-line-strong: var(--paper-border);
+  --paper-text: #e6e6ea;
+  --paper-text-secondary: #94949c;
+  --paper-text-tertiary: #707078;
+  --paper-accent: #3b6fd4;
+  --paper-accent-soft: rgba(59, 111, 212, 0.14);
+  --paper-scrim: rgba(0, 0, 0, 0.35);
+  --paper-scrollbar-track: transparent;
+  --paper-scrollbar-thumb: var(--paper-border);
+  --paper-scrollbar-thumb-hover: color-mix(in srgb, var(--paper-text) 22%, var(--paper-surface));
+  --paper-shadow-menu: none;
+  --paper-shadow-bar: none;
+  --paper-shadow-window:
+    0 1px 2px rgba(0, 0, 0, 0.15),
+    0 10px 28px -6px rgba(0, 0, 0, 0.28);
+}
+
+/* Shared tokens (both schemes) */
+:root {
+  --paper-font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
+    sans-serif;
+  --paper-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+  --paper-bar-height: 2.75rem;
+  --paper-nav-height: 2rem;
+  --paper-nav-button-size: 1.75rem;
+  /* Single corner scale — containers, controls, and PrimeVue overlays */
+  --paper-radius: 6px;
+  --paper-radius-pill: 9999px;
+  --paper-radius-circle: 50%;
+  --paper-radius-sm: var(--paper-radius);
+  --paper-radius-md: var(--paper-radius);
+  --paper-radius-lg: var(--paper-radius);
+  --paper-z-bar: 10061;
+  --paper-z-menu: 10070;
+  /* PrimeVue 4 — navigation / overlay surfaces */
+  --p-content-background: var(--paper-menu-bg);
+  --p-content-border-color: var(--paper-border);
+  --p-content-color: var(--paper-text);
+  --p-content-border-radius: var(--paper-radius);
+  --p-contextmenu-background: var(--paper-menu-bg);
+  --p-contextmenu-border-color: var(--paper-border);
+  --p-contextmenu-border-radius: var(--paper-radius);
+  --p-contextmenu-color: var(--paper-text);
+  --p-contextmenu-shadow: var(--paper-shadow-menu);
+  --p-contextmenu-submenu-background: var(--paper-menu-bg);
+  --p-menu-background: var(--paper-menu-bg);
+  --p-menu-border-color: var(--paper-border);
+  --p-menu-border-radius: var(--paper-radius);
+  --p-menu-color: var(--paper-text);
+  --p-menu-shadow: var(--paper-shadow-menu);
+  --p-menu-submenu-background: var(--paper-menu-bg);
+  --p-tieredmenu-background: var(--paper-menu-bg);
+  --p-tieredmenu-border-color: var(--paper-border);
+  --p-tieredmenu-border-radius: var(--paper-radius);
+  --p-tieredmenu-color: var(--paper-text);
+  --p-tieredmenu-shadow: var(--paper-shadow-menu);
+  --p-tieredmenu-submenu-background: var(--paper-menu-bg);
+  --p-menubar-submenu-background: var(--paper-menu-bg);
+  --p-menubar-submenu-border-color: var(--paper-border);
+  --p-menubar-submenu-border-radius: var(--paper-radius);
+  --p-menubar-submenu-color: var(--paper-text);
+  --p-menubar-submenu-shadow: var(--paper-shadow-menu);
+}
+
+.p-contextmenu {
+  font-family: var(--paper-font);
+  font-size: 0.8125rem;
+  color: var(--paper-text);
+  background-color: var(--paper-menu-bg);
+  border: 1px solid var(--paper-border);
+  border-radius: var(--paper-radius);
+  box-shadow: none;
+}
+.p-contextmenu .p-contextmenu-item-content {
+  border-radius: var(--paper-radius);
+  transition: background-color 0.12s ease, color 0.12s ease;
+}
+.p-contextmenu .p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover,
+.p-contextmenu .p-contextmenu-item.p-focus > .p-contextmenu-item-content {
+  background: var(--paper-accent-soft);
+  color: var(--paper-accent);
+}
+.p-contextmenu .p-contextmenu-separator {
+  margin: 0.25rem 0.375rem;
+  border-top: 1px solid var(--paper-border);
+}
+
+/* Popup / overlay menus (teleport to body) */
+.p-menu,
+.p-tieredmenu,
+.p-menubar .p-menubar-submenu {
+  font-family: var(--paper-font);
+  font-size: 0.8125rem;
+  color: var(--paper-text);
+  background-color: var(--paper-menu-bg);
+  border: 1px solid var(--paper-border);
+  border-radius: var(--paper-radius);
+  box-shadow: none;
+}
+
+.p-menu .p-menu-list {
+  padding: 0.25rem;
+}
+.p-menu .p-menu-item-content {
+  border-radius: var(--paper-radius);
+  transition: background-color 0.12s ease, color 0.12s ease;
+}
+.p-menu .p-menu-item:not(.p-disabled) > .p-menu-item-content:hover,
+.p-menu .p-menu-item.p-focus > .p-menu-item-content {
+  background: var(--paper-accent-soft);
+  color: var(--paper-accent);
+}
+.p-menu .p-menu-separator {
+  margin: 0.25rem 0.375rem;
+  border-top: 1px solid var(--paper-border);
+}
+
+.p-tieredmenu .p-tieredmenu-root-list,
+.p-tieredmenu .p-tieredmenu-submenu {
+  padding: 0.25rem;
+}
+.p-tieredmenu .p-tieredmenu-item-content {
+  border-radius: var(--paper-radius);
+  transition: background-color 0.12s ease, color 0.12s ease;
+}
+.p-tieredmenu .p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover,
+.p-tieredmenu .p-tieredmenu-item.p-focus > .p-tieredmenu-item-content,
+.p-tieredmenu .p-tieredmenu-item-active > .p-tieredmenu-item-content {
+  background: var(--paper-accent-soft);
+  color: var(--paper-accent);
+}
+.p-tieredmenu .p-tieredmenu-separator {
+  margin: 0.25rem 0.375rem;
+  border-top: 1px solid var(--paper-border);
+}
+.p-tieredmenu .p-tieredmenu-submenu {
+  background-color: var(--paper-menu-bg);
+  border: 1px solid var(--paper-border);
+  border-radius: var(--paper-radius);
+  box-shadow: none;
+}
+
+.p-menubar .p-menubar-submenu {
+  padding: 0.25rem;
+  border-radius: var(--paper-radius);
+}
+.p-menubar .p-menubar-submenu .p-menubar-item-content {
+  border-radius: var(--paper-radius);
+  transition: background-color 0.12s ease, color 0.12s ease;
+}
+.p-menubar .p-menubar-submenu .p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover,
+.p-menubar .p-menubar-submenu .p-menubar-item.p-focus > .p-menubar-item-content {
+  background: var(--paper-accent-soft);
+  color: var(--paper-accent);
+}
+.p-menubar .p-menubar-separator {
+  margin: 0.25rem 0.375rem;
+  border-top: 1px solid var(--paper-border);
+}
+
+/* Scroll only inside window content and app panels — not on body */
+.owd-desktop--paper .desktop-window__content {
+  scrollbar-width: thin;
+  scrollbar-color: var(--paper-scrollbar-thumb) var(--paper-scrollbar-track);
+}
+.owd-desktop--paper .desktop-window__content::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.owd-desktop--paper .desktop-window__content::-webkit-scrollbar-track {
+  background: var(--paper-scrollbar-track);
+}
+.owd-desktop--paper .desktop-window__content::-webkit-scrollbar-thumb {
+  background-color: var(--paper-scrollbar-thumb);
+  border: 2px solid transparent;
+  border-radius: var(--paper-radius-pill);
+  background-clip: padding-box;
+}
+.owd-desktop--paper .desktop-window__content::-webkit-scrollbar-thumb:hover {
+  background-color: var(--paper-scrollbar-thumb-hover);
+}
+.owd-desktop--paper .desktop-window__content::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* Theme Window chrome lives in Window*.vue (scoped). Globals only for fallbacks. */
+.owd-desktop--paper .paper-window.owd-window.resizable-component {
+  overflow: hidden;
+}
+
+/* Apps that use DesktopWindow without theme <Window> (e.g. kit-fs explorer) */
+.owd-desktop--paper .owd-window.resizable-component:not(.paper-window) {
+  box-sizing: border-box;
+  overflow: hidden;
+  background: var(--paper-surface);
+  border: 1px solid var(--paper-border-window);
+  border-radius: var(--paper-radius);
+}
+
+.owd-desktop--paper .owd-window.resizable-component:not(.paper-window) .owd-window-nav {
+  min-height: var(--paper-nav-height);
+  padding: 0 0.625rem;
+  border-bottom: 1px solid var(--paper-border-window);
+  background: var(--paper-surface);
+  align-items: center;
+}
+
+.owd-desktop--paper .owd-window.resizable-component:not(.paper-window) .desktop-window__content {
+  background: var(--paper-surface);
+}
+
+.owd-desktop--paper .desktop-window__content--padded {
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+/*
+ * Window titlebar chrome for Paper theme windows.
+ * Layout/sizing lives in Vue components; colors and hover states here.
+ */
+.owd-desktop--paper .paper-window.owd-window.resizable-component .paper-window-nav {
+  min-height: var(--paper-nav-height);
+  padding: 0 0.5rem;
+  border-bottom: 1px solid var(--paper-border-window);
+  background: var(--paper-surface);
+  color: var(--paper-text);
+}
+.owd-desktop--paper .paper-window.owd-window.resizable-component .paper-window-nav .owd-window-nav__btn-group--append {
+  align-self: stretch;
+}
+.owd-desktop--paper .paper-window.owd-window.resizable-component .paper-window-nav .owd-window-nav__btn-group--append-inner {
+  display: flex;
+  align-items: stretch;
+}
+.owd-desktop--paper .paper-window.owd-window.resizable-component .paper-window-nav .owd-window-nav__button {
+  color: var(--paper-text-secondary);
+  transition: background-color 0.12s ease, color 0.12s ease;
+}
+.owd-desktop--paper .paper-window.owd-window.resizable-component .paper-window-nav .owd-window-nav__button:hover {
+  background: var(--paper-bg);
+  color: var(--paper-text);
+}
+.owd-desktop--paper .paper-window.owd-window.resizable-component .paper-window-nav .owd-window-nav__button:active {
+  background: color-mix(in srgb, var(--paper-text) 8%, var(--paper-bg));
+}
+.owd-desktop--paper .paper-window.owd-window.resizable-component .paper-window-nav .owd-window-nav__button--close:hover {
+  background: color-mix(in srgb, #c0392b 88%, var(--paper-surface));
+  color: #fff;
+}
+.owd-desktop--paper .paper-window.owd-window.resizable-component .paper-window-nav .owd-window-nav__button--close:active {
+  background: color-mix(in srgb, #e74c3c 92%, var(--paper-surface));
+  color: #fff;
+}
+
+.owd-desktop--paper .owd-window.resizable-component:not(.paper-window) .owd-window-nav .owd-window-nav__button {
+  color: var(--paper-text-secondary);
+}
+.owd-desktop--paper .owd-window.resizable-component:not(.paper-window) .owd-window-nav .owd-window-nav__button:hover {
+  background: var(--paper-bg);
+  color: var(--paper-text);
+}
+
+/* Desktop shell: no document scrollbars — scroll only inside windows/apps */
+html,
+body {
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  overscroll-behavior: none;
+}
+
+#__nuxt {
+  height: 100%;
+  overflow: hidden;
+}
+
+.owd-desktop.owd-desktop--paper {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  height: 100dvh;
+  overflow: hidden;
+  background: var(--paper-bg);
+  background-image: linear-gradient(var(--paper-grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--paper-grid-color) 1px, transparent 1px);
+  background-size: 80px 80px;
+  background-position: center;
+  color: var(--paper-text);
+  font-family: var(--paper-font);
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+.owd-desktop--paper .owd-desktop__system-bar {
+  position: relative;
+  z-index: var(--paper-z-bar);
+  flex-shrink: 0;
+}
+
+.owd-desktop--paper .paper-shell__stage {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.owd-desktop--paper .desktop-window__content--centered {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  min-height: 0;
+  text-align: center;
+}
+
+.owd-desktop--paper .desktop-window__content--centered > * {
+  width: 100%;
+}
+
+.owd-desktop--paper .desktop-window__content a {
+  color: var(--paper-accent);
+  text-decoration: none;
+}
+
+.owd-desktop--paper .desktop-window__content a:hover {
+  text-decoration: underline;
+}
+
+/* Input elements inside the paper theme */
+.owd-desktop--paper {
+  /* Style for InputText */
+}
+.owd-desktop--paper .p-inputtext {
+  font-family: var(--paper-font);
+  font-size: 14px;
+  background: var(--paper-surface);
+  border: 1px solid var(--paper-border);
+  border-radius: var(--paper-radius);
+  color: var(--paper-text);
+  padding: 6px 12px;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  box-shadow: none;
+}
+.owd-desktop--paper .p-inputtext::placeholder {
+  color: var(--paper-text-tertiary);
+}
+.owd-desktop--paper .p-inputtext:hover {
+  border-color: color-mix(in srgb, var(--paper-border) 70%, var(--paper-text));
+}
+.owd-desktop--paper .p-inputtext:focus {
+  outline: none;
+  border-color: var(--paper-accent);
+  box-shadow: 0 0 0 2px var(--paper-accent-soft);
+}
+.owd-desktop--paper {
+  /* Style for generic buttons */
+}
+.owd-desktop--paper .p-button {
+  font-family: var(--paper-font);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--paper-text);
+  background: var(--paper-surface) !important;
+  border: 1px solid var(--paper-border) !important;
+  border-radius: var(--paper-radius);
+  padding: 6px 12px;
+  cursor: pointer;
+  transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
+}
+.owd-desktop--paper .p-button:hover {
+  background: color-mix(in srgb, var(--paper-surface) 92%, var(--paper-text)) !important;
+  border-color: color-mix(in srgb, var(--paper-border) 60%, var(--paper-text)) !important;
+}
+.owd-desktop--paper .p-button:active {
+  background: color-mix(in srgb, var(--paper-surface) 84%, var(--paper-text)) !important;
+  border-color: color-mix(in srgb, var(--paper-border) 40%, var(--paper-text)) !important;
+}
+
+/* PrimeVue Tabs inside paper theme */
+.owd-desktop--paper .p-tabs {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.owd-desktop--paper .p-tabs .p-tablist {
+  background: transparent;
+  border-bottom: 1px solid var(--paper-border);
+}
+.owd-desktop--paper .p-tabs .p-tablist-tab-list {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.owd-desktop--paper .p-tabs .p-tablist-tab-list .p-tab {
+  font-family: var(--paper-font);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--paper-text-secondary);
+  background: transparent;
+  border: 1px solid transparent;
+  border-bottom: 0;
+  border-top-left-radius: var(--paper-radius);
+  border-top-right-radius: var(--paper-radius);
+  padding: 4px 10px;
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+  margin-bottom: -1px;
+}
+.owd-desktop--paper .p-tabs .p-tablist-tab-list .p-tab:hover {
+  color: var(--paper-text);
+  background: color-mix(in srgb, var(--paper-surface) 95%, var(--paper-text));
+  border-color: transparent;
+  border-bottom: 0;
+}
+.owd-desktop--paper .p-tabs .p-tablist-tab-list .p-tab.p-tab-active {
+  color: var(--paper-accent);
+  background: var(--paper-surface);
+  border-color: var(--paper-border);
+  border-bottom: 1px solid var(--paper-surface);
+}
+.owd-desktop--paper .p-tabs .p-tablist-tab-list .p-tab.p-tab-active:hover {
+  border-color: var(--paper-border);
+  border-bottom: 1px solid var(--paper-surface);
+  background: var(--paper-surface);
+}
+.owd-desktop--paper .p-tabs .p-tabpanels {
+  background: transparent;
+  padding: 12px 0 0 0;
+  border: 0;
+  color: var(--paper-text);
+}
+
+/* PrimeVue Checkbox inside paper theme */
+.owd-desktop--paper {
+  --p-checkbox-width: 16px;
+  --p-checkbox-height: 16px;
+  --p-checkbox-border-radius: 4px;
+  --p-checkbox-background: var(--paper-surface);
+  --p-checkbox-hover-background: color-mix(in srgb, var(--paper-surface) 95%, var(--paper-text));
+  --p-checkbox-checked-background: var(--paper-accent);
+  --p-checkbox-border-color: var(--paper-border);
+  --p-checkbox-hover-border-color: color-mix(in srgb, var(--paper-border) 70%, var(--paper-text));
+  --p-checkbox-checked-border-color: var(--paper-accent);
+  --p-checkbox-shadow: none;
+}
+.owd-desktop--paper .p-checkbox {
+  display: inline-flex;
+  position: relative;
+  user-select: none;
+  vertical-align: middle;
+  width: var(--p-checkbox-width);
+  height: var(--p-checkbox-height);
+  margin-top: -2px;
+}
+.owd-desktop--paper .p-checkbox .p-checkbox-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--p-checkbox-border-color);
+  background: var(--p-checkbox-background);
+  width: var(--p-checkbox-width) !important;
+  height: var(--p-checkbox-height) !important;
+  min-width: var(--p-checkbox-width) !important;
+  min-height: var(--p-checkbox-height) !important;
+  border-radius: var(--p-checkbox-border-radius);
+  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.owd-desktop--paper .p-checkbox .p-checkbox-box .p-checkbox-icon {
+  font-size: 10px;
+  transition: transform 0.1s;
+}
+.owd-desktop--paper .p-checkbox.p-checkbox-checked .p-checkbox-box {
+  background: var(--p-checkbox-checked-background);
+  border-color: var(--p-checkbox-checked-border-color);
+  color: white;
+}
+.owd-desktop--paper .p-checkbox:not(.p-checkbox-disabled):hover .p-checkbox-box {
+  border-color: var(--p-checkbox-hover-border-color);
+  background: var(--p-checkbox-hover-background);
+}
+.owd-desktop--paper .p-checkbox:not(.p-checkbox-disabled):hover.p-checkbox-checked .p-checkbox-box {
+  background: var(--p-checkbox-checked-background);
+  border-color: var(--p-checkbox-checked-border-color);
+}