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

package/dist/runtime/components/PaperSystemBar.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/PaperWindowSnapHints.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/PaperWindowSnapHints.vue

@@ -0,0 +1,7 @@
+<script setup>
+import WindowSnapHintsBase from "@owdproject/nuxt/runtime/components/window/DesktopCoreWindowSnapHintsBase.vue";
+</script>
+
+<template>
+  <WindowSnapHintsBase />
+</template>

package/dist/runtime/components/PaperWindowSnapHints.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/usePaperAppearance.d.ts

@@ -0,0 +1,8 @@
+import { type PaperAppearance } from '../utils/paperAppearance.js';
+/** Read/write Paper light/dark appearance (theme-local, not core store). */
+export declare function usePaperAppearance(): {
+    appearance: import("vue").Ref<PaperAppearance, PaperAppearance>;
+    defaultAppearance: PaperAppearance;
+    setAppearance: (appearance: PaperAppearance) => void;
+    toggleAppearance: () => void;
+};

package/dist/runtime/composables/usePaperAppearance.js

@@ -0,0 +1,18 @@
+import {
+  DEFAULT_PAPER_APPEARANCE,
+  paperAppearanceId
+} from "../utils/paperAppearance.js";
+export function usePaperAppearance() {
+  function setAppearance(appearance) {
+    paperAppearanceId.value = appearance;
+  }
+  function toggleAppearance() {
+    paperAppearanceId.value = paperAppearanceId.value === "dark" ? "light" : "dark";
+  }
+  return {
+    appearance: paperAppearanceId,
+    defaultAppearance: DEFAULT_PAPER_APPEARANCE,
+    setAppearance,
+    toggleAppearance
+  };
+}

package/dist/runtime/plugins/paper-appearance.client.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Paper light/dark: localStorage → shared ref → html[data-owd-appearance].
+ * Head bootstrap script prevents first-paint flash on reload.
+ */
+declare const _default: any;
+export default _default;

package/dist/runtime/plugins/paper-appearance.client.js

@@ -0,0 +1,16 @@
+import { watch } from "vue";
+import {
+  DEFAULT_PAPER_APPEARANCE,
+  PAPER_APPEARANCE_STORAGE_KEY,
+  paperAppearanceId,
+  readPersistedAppearance,
+  syncHtmlAppearance
+} from "../utils/paperAppearance.js";
+export default defineNuxtPlugin(() => {
+  paperAppearanceId.value = readPersistedAppearance() ?? DEFAULT_PAPER_APPEARANCE;
+  syncHtmlAppearance(paperAppearanceId.value);
+  watch(paperAppearanceId, (appearance) => {
+    localStorage.setItem(PAPER_APPEARANCE_STORAGE_KEY, appearance);
+    syncHtmlAppearance(appearance);
+  });
+});

package/dist/runtime/utils/paperAppearance.d.ts

@@ -0,0 +1,10 @@
+export type PaperAppearance = 'light' | 'dark';
+export declare const PAPER_APPEARANCE_STORAGE_KEY = "owd-paper-appearance";
+export declare const DEFAULT_PAPER_APPEARANCE: PaperAppearance;
+/** Shared appearance state — hydrated and synced by `paper-appearance.client` plugin. */
+export declare const paperAppearanceId: import("vue").Ref<PaperAppearance, PaperAppearance>;
+export declare function isPaperAppearance(value: string): value is PaperAppearance;
+export declare function readPersistedAppearance(): PaperAppearance | undefined;
+/** Inline bootstrap: set data-owd-appearance before CSS paints (no flash). */
+export declare const paperAppearanceBootstrapScript: string;
+export declare function syncHtmlAppearance(appearance: PaperAppearance): void;

package/dist/runtime/utils/paperAppearance.js

@@ -0,0 +1,18 @@
+import { ref } from "vue";
+export const PAPER_APPEARANCE_STORAGE_KEY = "owd-paper-appearance";
+export const DEFAULT_PAPER_APPEARANCE = "light";
+export const paperAppearanceId = ref(DEFAULT_PAPER_APPEARANCE);
+export function isPaperAppearance(value) {
+  return value === "light" || value === "dark";
+}
+export function readPersistedAppearance() {
+  if (typeof localStorage === "undefined") return void 0;
+  const stored = localStorage.getItem(PAPER_APPEARANCE_STORAGE_KEY);
+  if (stored && isPaperAppearance(stored)) return stored;
+  return void 0;
+}
+export const paperAppearanceBootstrapScript = `(function(){var el=document.documentElement,d=${JSON.stringify(DEFAULT_PAPER_APPEARANCE)};try{var s=localStorage.getItem(${JSON.stringify(PAPER_APPEARANCE_STORAGE_KEY)});if(s==="light"||s==="dark"){el.dataset.owdAppearance=s;return}}catch(e){}el.dataset.owdAppearance=d})();`;
+export function syncHtmlAppearance(appearance) {
+  if (typeof document === "undefined") return;
+  document.documentElement.dataset.owdAppearance = appearance;
+}

package/dist/types.d.mts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.mjs'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.mjs'

package/package.json

@@ -1,6 +1,63 @@
 {
   "name": "@owdproject/nuxt-theme-paper",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "4.0.0-alpha.3",
+  "description": "Open Web Desktop theme",
+  "homepage": "https://github.com/owdproject/nuxt-theme-paper",
+  "license": "MIT",
+  "author": {
+    "name": "Open Web Desktop Team",
+    "url": "https://github.com/owdproject"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "development": "./src/module.ts",
+      "import": "./dist/module.mjs",
+      "default": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build build",
+    "dev": "pnpm run dev:prepare && cd playground && pnpm exec nuxt dev",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && cd playground && pnpm exec nuxt prepare",
+    "dev:generate": "NUXT_APP_BASE_URL=${NUXT_APP_BASE_URL:-/theme-paper/} nuxt generate playground",
+    "validate": "desktop validate ."
+  },
+  "dependencies": {
+    "@nuxt/kit": "^4.6.2",
+    "@owdproject/nuxt-kit-primevue": "^4.0.0-alpha.3",
+    "@owdproject/nuxt": "^4.0.0-alpha.3",
+    "@owdproject/nuxt-kit-tailwind": "^4.0.0-alpha.3"
+  },
+  "devDependencies": {
+    "@nuxt/module-builder": "^1.0.2",
+    "@owdproject/core": "^4.0.0-alpha.3",
+    "@owdproject/nuxt-kit-primevue": "^4.0.0-alpha.3",
+    "nuxt": "^4.6.2",
+    "typescript": "~6.0.3",
+    "vue-tsc": "^3.3.13",
+    "jiti": "^2.7.0",
+    "tailwindcss": "^3.4.19"
+  },
+  "peerDependencies": {
+    "@owdproject/core": "^4.0.0-alpha.3",
+    "@owdproject/nuxt-kit-primevue": "^4.0.0-alpha.3",
+    "@owdproject/nuxt-kit-tailwind": "^4.0.0-alpha.3",
+    "@owdproject/nuxt": "^4.0.0-alpha.3",
+    "vue": "^3.5.33",
+    "vue-i18n": "^11.0.0",
+    "primevue": "^4.5.5",
+    "nuxt": "^4.6.2"
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "alpha",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/module.ts

@@ -0,0 +1,71 @@
+import { existsSync } from 'node:fs'
+import {
+  createResolver,
+  addComponentsDir,
+  addImportsDir,
+  addPlugin,
+  installModule,
+} from '@nuxt/kit'
+import { defineDesktopTheme } from '@owdproject/nuxt'
+import { registerThemeTailwindPath } from '@owdproject/nuxt-kit-tailwind/kit/registerTailwindPath'
+import { paperAppearanceBootstrapScript } from './runtime/utils/paperAppearance'
+
+export default 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,
+    })
+  },
+})

package/src/runtime/assets/styles/index.scss

@@ -0,0 +1,13 @@
+@use './partials/variables';
+@use './partials/contextmenu';
+@use './partials/menu';
+@use './partials/scrollbar';
+@use './partials/window';
+@use './partials/window-chrome';
+@use './partials/desktop';
+@use './partials/input';
+@use './partials/tabs';
+@use './partials/checkbox';
+
+
+

package/src/runtime/assets/styles/partials/_variables.scss

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

package/src/runtime/assets/styles/partials/checkbox.scss

@@ -0,0 +1,64 @@
+@use './variables';
+
+/* 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;
+
+  .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;
+
+    .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;
+
+      .p-checkbox-icon {
+        font-size: 10px;
+        transition: transform 0.1s;
+      }
+    }
+
+    &.p-checkbox-checked {
+      .p-checkbox-box {
+        background: var(--p-checkbox-checked-background);
+        border-color: var(--p-checkbox-checked-border-color);
+        color: white;
+      }
+    }
+
+    &:not(.p-checkbox-disabled):hover {
+      .p-checkbox-box {
+        border-color: var(--p-checkbox-hover-border-color);
+        background: var(--p-checkbox-hover-background);
+      }
+
+      &.p-checkbox-checked .p-checkbox-box {
+        background: var(--p-checkbox-checked-background);
+        border-color: var(--p-checkbox-checked-border-color);
+      }
+    }
+  }
+}

package/src/runtime/assets/styles/partials/contextmenu.scss

@@ -0,0 +1,25 @@
+.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-item-content {
+    border-radius: var(--paper-radius);
+    transition: background-color 0.12s ease, color 0.12s ease;
+  }
+
+  .p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover,
+  .p-contextmenu-item.p-focus > .p-contextmenu-item-content {
+    background: var(--paper-accent-soft);
+    color: var(--paper-accent);
+  }
+
+  .p-contextmenu-separator {
+    margin: 0.25rem 0.375rem;
+    border-top: 1px solid var(--paper-border);
+  }
+}

package/src/runtime/assets/styles/partials/desktop.scss

@@ -0,0 +1,70 @@
+/* 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/src/runtime/assets/styles/partials/input.scss

@@ -0,0 +1,55 @@
+@use './variables';
+
+/* Input elements inside the paper theme */
+.owd-desktop--paper {
+  /* Style for InputText */
+  .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;
+
+    &::placeholder {
+      color: var(--paper-text-tertiary);
+    }
+
+    &:hover {
+      border-color: color-mix(in srgb, var(--paper-border) 70%, var(--paper-text));
+    }
+
+    &:focus {
+      outline: none;
+      border-color: var(--paper-accent);
+      box-shadow: 0 0 0 2px var(--paper-accent-soft);
+    }
+  }
+
+  /* Style for generic buttons */
+  .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;
+
+    &: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;
+    }
+
+    &: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;
+    }
+  }
+}