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

package/dist/runtime/assets/styles/partials/checkbox.css

@@ -0,0 +1,158 @@
+@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);
+}
+
+/* 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);
+}

package/dist/runtime/assets/styles/partials/contextmenu.css

@@ -0,0 +1,22 @@
+.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);
+}

package/dist/runtime/assets/styles/partials/desktop.css

@@ -0,0 +1,69 @@
+@charset "UTF-8";
+/* 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;
+}

package/dist/runtime/assets/styles/partials/input.css

@@ -0,0 +1,155 @@
+@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);
+}
+
+/* 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;
+}

package/dist/runtime/assets/styles/partials/menu.css

@@ -0,0 +1,72 @@
+/* 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);
+}

package/dist/runtime/assets/styles/partials/scrollbar.css

@@ -0,0 +1,25 @@
+@charset "UTF-8";
+/* 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;
+}

package/dist/runtime/assets/styles/partials/tabs.css

@@ -0,0 +1,163 @@
+@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);
+}
+
+/* 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);
+}