@fluixi-ui/skin-paper 0.1.0-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Fluixi
+
+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

@@ -0,0 +1,43 @@
+# @fluixi-ui/skin-paper
+
+A warm, paper-like skin for Fluixi UI: a tinted canvas, white sheets that float on it, and
+outlines drawn as translucent half-pixel rings instead of grey borders.
+
+Colour stays theme-driven. Surfaces come from the gray scale and rings from the foreground,
+so `data-theme` (light, dark) and `data-accent` keep working.
+
+## Usage
+
+```ts
+import '@fluixi-ui/styles/all.css';
+import '@fluixi-ui/skin-paper/fonts.css'; // optional: self-hosted Figtree and Bricolage Grotesque
+import '@fluixi-ui/skin-paper/styles.css';
+
+document.documentElement.dataset.ui = 'paper';
+```
+
+The attribute can sit on any subtree to scope the skin there.
+
+## Construction
+
+Every surface belongs to one family:
+
+| Family | Recipe | Used by |
+| --- | --- | --- |
+| field | recessed: inset ring and inset shadow | inputs, search |
+| control | flat: ring and a 1px contact shadow | buttons, icon buttons |
+| card | resting: ring and a soft lift | `Card`, `Surface elevation={1}` |
+| floating | ring, contact and ambient shadow | panels, menus, dialogs (`Surface` 2 to 4) |
+
+Inner radii are the outer radius minus the padding. In dark themes surfaces lift with a lighter
+ring and a top highlight, since shadows go unseen.
+
+The families are exposed as tokens (`--flx-ui-paper-card-shadow` and the like) for surfaces of
+your own, and fluixi-ui's `--flx-ui-shadow-sm` to `-xl` map onto them.
+
+## Type
+
+Figtree for the interface, Bricolage Grotesque from 20px up (`h1` and `[data-display]`). Without
+`fonts.css` both fall back to the system sans.
+
+Rules live in the `flx.skin` layer, above `flx.components`; your own unlayered CSS still wins.

package/fonts.css

@@ -0,0 +1,6 @@
+/**
+ * The paper skin's typefaces, self-hosted: Figtree for the interface, Bricolage Grotesque
+ * for display sizes. Optional; without it the stacks fall back to the system sans.
+ */
+@import '@fontsource-variable/figtree';
+@import '@fontsource-variable/bricolage-grotesque';

package/fonts.css.js

@@ -0,0 +1,8 @@
+const href = new URL('./fonts.css', import.meta.url).href;
+if (typeof document !== 'undefined' && !document.querySelector(`link[data-flx-ui="${href}"]`)) {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = href;
+  link.dataset.flxUi = href;
+  document.head.appendChild(link);
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@fluixi-ui/skin-paper",
+  "version": "0.1.0-alpha.0",
+  "description": "Paper skin for Fluixi UI: warm canvas, floating white sheets, hairline rings; activate with data-ui=\"paper\"",
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fluixi/ui.git",
+    "directory": "packages/skin-paper"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "paper.css",
+    "paper.css.js",
+    "fonts.css",
+    "fonts.css.js",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./styles.css": "./paper.css",
+    "./fonts.css": "./fonts.css"
+  },
+  "dependencies": {
+    "@fontsource-variable/figtree": "^5.3.0",
+    "@fontsource-variable/bricolage-grotesque": "^5.3.0"
+  },
+  "scripts": {
+    "build": "node ../../scripts/css-loaders.mjs paper.css fonts.css"
+  }
+}

package/paper.css

@@ -0,0 +1,397 @@
+/**
+ * @fluixi-ui/skin-paper: a warm, paper-like skin for Fluixi UI.
+ *
+ * Activate with `data-ui="paper"` on a root or any subtree. Rules live in the `flx.skin`
+ * layer, above `flx.components`; consumer CSS stays unlayered and still wins.
+ *
+ * Construction, not decoration: outlines are translucent half-pixel rings drawn with
+ * box-shadow, never grey borders, so they take the tint of whatever they sit on. Every
+ * surface belongs to one family with one recipe:
+ *
+ *   field    recessed: inset ring and inset shadow
+ *   control  flat: ring and a 1px contact shadow
+ *   card     resting: ring and a soft lift with negative spread
+ *   floating panel, menu, dialog: ring, contact and ambient shadow, wider as it rises
+ *
+ * Inner radii are the outer radius minus the padding. Colour stays theme-driven: surfaces
+ * come from the gray scale and rings from the foreground, so `data-theme` and
+ * `data-accent` keep working.
+ */
+@layer flx.reset, flx.base, flx.tokens, flx.components, flx.skin, flx.fx;
+
+@layer flx.skin {
+  [data-ui='paper'] {
+    /* Type: Figtree for the interface, Bricolage Grotesque from 20px up. fonts.css
+       self-hosts both; without it the stacks fall back to the system sans. */
+    --flx-ui-font-family-sans: 'Figtree Variable', 'Figtree', ui-sans-serif, system-ui, sans-serif;
+    --flx-ui-paper-font-display: 'Bricolage Grotesque Variable', 'Bricolage Grotesque',
+      var(--flx-ui-font-family-sans);
+    --flx-ui-font-size-xs: 12px;
+    --flx-ui-font-size-sm: 13px;
+    --flx-ui-font-size-md: 14px;
+    --flx-ui-font-size-lg: 15px;
+    --flx-ui-line-height-normal: 1.5;
+
+    --flx-ui-radius-sm: 6px;
+    --flx-ui-radius-md: 10px;
+    --flx-ui-radius-lg: 16px;
+    --flx-ui-radius-xl: 20px;
+
+    /* Controls and fields that share a bar are 36px high. */
+    --flx-ui-size-xs: 24px;
+    --flx-ui-size-sm: 30px;
+    --flx-ui-size-md: 36px;
+    --flx-ui-size-lg: 42px;
+    --flx-ui-size-xl: 48px;
+
+    /* Surfaces from the theme's gray scale. */
+    --flx-ui-paper-canvas: var(--flx-ui-gray-3);
+    --flx-ui-paper-sheet: var(--flx-ui-color-bg);
+    --flx-ui-paper-sunken: var(--flx-ui-gray-2);
+    --flx-ui-paper-field: var(--flx-ui-gray-1);
+    --flx-ui-paper-control: var(--flx-ui-color-bg);
+    --flx-ui-paper-control-hover: var(--flx-ui-gray-2);
+    --flx-ui-paper-track: var(--flx-ui-gray-2);
+    --flx-ui-paper-floating: var(--flx-ui-color-bg);
+    --flx-ui-paper-item-hover: color-mix(in srgb, var(--flx-ui-gray-12) 6%, transparent);
+
+    /* Rings from the foreground, so they flip with the theme. */
+    --flx-ui-paper-ring: color-mix(in srgb, var(--flx-ui-gray-12) 10%, transparent);
+    --flx-ui-paper-ring-strong: color-mix(in srgb, var(--flx-ui-gray-12) 16%, transparent);
+    --flx-ui-paper-ring-field: color-mix(in srgb, var(--flx-ui-gray-12) 18%, transparent);
+    --flx-ui-paper-contact: rgb(24 22 18 / 0.05);
+    --flx-ui-paper-ambient: rgb(24 22 18 / 0.08);
+    --flx-ui-paper-highlight: transparent;
+
+    /* The four families. */
+    --flx-ui-paper-field-shadow: inset 0 0 0 0.5px var(--flx-ui-paper-ring-field),
+      inset 0 1px 2px var(--flx-ui-paper-contact);
+    --flx-ui-paper-control-shadow: inset 0 1px 0 var(--flx-ui-paper-highlight),
+      0 0 0 0.5px var(--flx-ui-paper-ring-strong), 0 1px 1px var(--flx-ui-paper-contact);
+    --flx-ui-paper-card-shadow: inset 0 1px 0 var(--flx-ui-paper-highlight),
+      0 0 0 0.5px var(--flx-ui-paper-ring), 0 1px 2px var(--flx-ui-paper-contact),
+      0 4px 16px -8px var(--flx-ui-paper-ambient);
+    --flx-ui-paper-panel-shadow: inset 0 1px 0 var(--flx-ui-paper-highlight),
+      0 0 0 0.5px var(--flx-ui-paper-ring), 0 1px 2px var(--flx-ui-paper-contact),
+      0 10px 32px var(--flx-ui-paper-ambient);
+    --flx-ui-paper-menu-shadow: inset 0 1px 0 var(--flx-ui-paper-highlight),
+      0 0 0 0.5px var(--flx-ui-paper-ring-strong), 0 4px 8px var(--flx-ui-paper-contact),
+      0 16px 40px rgb(24 22 18 / 0.12);
+    --flx-ui-paper-action-highlight: rgb(255 255 255 / 0.16);
+    --flx-ui-paper-dialog-shadow: inset 0 1px 0 var(--flx-ui-paper-highlight),
+      0 0 0 0.5px var(--flx-ui-paper-ring-strong), 0 8px 16px rgb(24 22 18 / 0.08),
+      0 32px 80px rgb(24 22 18 / 0.2);
+
+    /* fluixi-ui's elevation scale, mapped onto the families. */
+    --flx-ui-shadow-sm: var(--flx-ui-paper-control-shadow);
+    --flx-ui-shadow-md: var(--flx-ui-paper-card-shadow);
+    --flx-ui-shadow-lg: var(--flx-ui-paper-menu-shadow);
+    --flx-ui-shadow-xl: var(--flx-ui-paper-dialog-shadow);
+
+    font-family: var(--flx-ui-font-family-sans);
+    font-size: var(--flx-ui-font-size-md);
+    background: var(--flx-ui-paper-canvas);
+    color: var(--flx-ui-color-fg);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* Dark: shadows go unseen, so surfaces lift with a lighter ring and a top highlight. */
+  [data-ui='paper']:where([data-theme='dark']),
+  :where([data-theme='dark']) [data-ui='paper'] {
+    --flx-ui-paper-canvas: var(--flx-ui-gray-1);
+    --flx-ui-paper-sheet: var(--flx-ui-gray-2);
+    --flx-ui-paper-sunken: var(--flx-ui-gray-3);
+    --flx-ui-paper-field: var(--flx-ui-gray-1);
+    --flx-ui-paper-control: var(--flx-ui-gray-4);
+    --flx-ui-paper-control-hover: var(--flx-ui-gray-5);
+    --flx-ui-paper-track: var(--flx-ui-gray-1);
+    --flx-ui-paper-floating: var(--flx-ui-gray-3);
+    --flx-ui-paper-item-hover: color-mix(in srgb, var(--flx-ui-gray-12) 8%, transparent);
+    --flx-ui-paper-contact: rgb(0 0 0 / 0.4);
+    --flx-ui-paper-ambient: rgb(0 0 0 / 0.5);
+    --flx-ui-paper-highlight: rgb(255 255 255 / 0.04);
+  }
+
+  /* Display face for page and record titles. */
+  [data-ui='paper'] :where(h1, [data-display]) {
+    font-family: var(--flx-ui-paper-font-display);
+    font-weight: 700;
+    letter-spacing: -0.035em;
+    line-height: 1.1;
+  }
+
+  /* ---- Card: the resting family ------------------------------------------------ */
+  [data-ui='paper'] :where([data-card]) {
+    background: var(--flx-ui-paper-sheet);
+    border: none;
+    border-radius: var(--flx-ui-radius-lg);
+    box-shadow: var(--flx-ui-paper-card-shadow);
+  }
+  [data-ui='paper'] :where([data-card-header]) {
+    gap: 2px;
+    padding: 16px 20px 0;
+  }
+  [data-ui='paper'] :where([data-card-title]) {
+    font-size: var(--flx-ui-font-size-lg);
+    font-weight: 600;
+    letter-spacing: -0.005em;
+  }
+  [data-ui='paper'] :where([data-card-description]) {
+    font-size: var(--flx-ui-font-size-sm);
+  }
+  [data-ui='paper'] :where([data-card-body]) {
+    padding: 14px 20px 18px;
+    font-size: var(--flx-ui-font-size-md);
+  }
+  [data-ui='paper'] :where([data-card-footer]) {
+    padding: 12px 20px;
+    border-top: none;
+    box-shadow: inset 0 0.5px 0 var(--flx-ui-paper-ring);
+  }
+
+  /* ---- Surface: elevation 0 flat, 1 resting, 2 panel, 3 menu, 4 dialog ------------- */
+  [data-ui='paper'] :where([data-surface]) {
+    background: var(--flx-ui-paper-sheet);
+    border: none;
+  }
+  [data-ui='paper'] :where([data-surface][data-elevation='0']) { box-shadow: none; }
+  [data-ui='paper'] :where([data-surface][data-elevation='0'][data-bordered]) {
+    box-shadow: 0 0 0 0.5px var(--flx-ui-paper-ring);
+  }
+  [data-ui='paper'] :where([data-surface][data-elevation='1']) { box-shadow: var(--flx-ui-paper-card-shadow); }
+  [data-ui='paper'] :where([data-surface][data-elevation='2']) { box-shadow: var(--flx-ui-paper-panel-shadow); }
+  [data-ui='paper'] :where([data-surface][data-elevation='3']) { box-shadow: var(--flx-ui-paper-menu-shadow); }
+  [data-ui='paper'] :where([data-surface][data-elevation='4']) { box-shadow: var(--flx-ui-paper-dialog-shadow); }
+
+  /* ---- Buttons: the control family -------------------------------------------- */
+  /* Rings replace the border; pressing settles the button half a pixel. Focus is an
+     outline, offset 2px, so it never replaces the construction shadow. */
+  [data-ui='paper'] :where([data-variant]:not([data-badge])) {
+    border: none;
+    font-weight: 600;
+    transition:
+      background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+      box-shadow var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+      transform var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+  }
+  [data-ui='paper'] :where([data-variant]:not([data-badge])[data-pressed]:not([data-disabled])) {
+    transform: translateY(0.5px);
+  }
+  [data-ui='paper'] :where([data-variant]:not([data-badge]):focus-visible) {
+    outline: 2px solid var(--flx-ui-color-focus-ring);
+    outline-offset: 2px;
+  }
+  /* A filled action: top highlight, a ring darker than its fill, contact below. Built
+     here, not as a root token, so a data-tone on the button recolours the ring. */
+  [data-ui='paper'] :where([data-variant='solid']:not([data-badge])) {
+    box-shadow: inset 0 1px 0 var(--flx-ui-paper-action-highlight),
+      0 0 0 0.5px color-mix(in srgb, var(--flx-ui-color-primary) 70%, #000),
+      0 1px 2px var(--flx-ui-paper-contact);
+  }
+  [data-ui='paper'] :where([data-variant='outline']:not([data-badge])) {
+    background: var(--flx-ui-paper-control);
+    box-shadow: var(--flx-ui-paper-control-shadow);
+  }
+  [data-ui='paper'] :where([data-variant='outline']:not([data-badge]):hover:not([data-disabled])) {
+    background: var(--flx-ui-paper-control-hover);
+  }
+  [data-ui='paper'] :where([data-variant='soft']:not([data-badge])) {
+    box-shadow: none;
+  }
+  [data-ui='paper'] :where([data-variant='ghost']:not([data-badge])) {
+    box-shadow: none;
+  }
+  [data-ui='paper'] :where([data-variant='ghost']:not([data-badge]):hover:not([data-disabled])) {
+    background: color-mix(in srgb, var(--flx-ui-gray-12) 6%, transparent);
+  }
+  [data-ui='paper'] :where([data-variant]:not([data-badge])[data-disabled]) {
+    box-shadow: none;
+  }
+  [data-ui='paper'] :where([data-variant='outline']:not([data-badge])[data-disabled]) {
+    background: transparent;
+    box-shadow: 0 0 0 0.5px var(--flx-ui-paper-ring);
+  }
+
+  /* Icon button: glyphs a step smaller than the default, to sit in a 36px control. */
+  [data-ui='paper'] :where([data-icon-button] svg) { width: 18px; height: 18px; }
+  [data-ui='paper'] :where([data-icon-button][data-size='sm'] svg) { width: 16px; height: 16px; }
+  [data-ui='paper'] :where([data-icon-button][data-size='lg'] svg) { width: 20px; height: 20px; }
+
+  /* ---- Toggle -------------------------------------------------------------------- */
+  [data-ui='paper'] :where([aria-pressed]) {
+    border: none;
+    background: var(--flx-ui-paper-control);
+    box-shadow: var(--flx-ui-paper-control-shadow);
+    font-weight: 500;
+  }
+  [data-ui='paper'] :where([aria-pressed]:hover:not([data-disabled])) {
+    background: var(--flx-ui-paper-control-hover);
+  }
+  [data-ui='paper'] :where([aria-pressed][data-state='on']) {
+    background: var(--flx-ui-color-primary-subtle);
+    box-shadow: 0 0 0 0.5px var(--flx-ui-color-primary), 0 1px 1px var(--flx-ui-paper-contact);
+  }
+  [data-ui='paper'] :where([aria-pressed]:focus-visible) {
+    outline: 2px solid var(--flx-ui-color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  /* Toggle group: a recessed track, the chosen item raised out of it. Items keep the
+     track's radius minus its 2px padding, and the track keeps the control height. */
+  [data-ui='paper'] :where([role='group'][data-orientation]:has(> [aria-pressed])) {
+    gap: 2px;
+    padding: 2px;
+    border-radius: var(--flx-ui-radius-md);
+    background: var(--flx-ui-paper-track);
+    box-shadow: inset 0 0 0 0.5px var(--flx-ui-paper-ring);
+  }
+  [data-ui='paper'] :where([role='group'][data-orientation] > [aria-pressed]) {
+    height: calc(var(--flx-ui-size-md) - 4px);
+    margin: 0;
+    border-radius: calc(var(--flx-ui-radius-md) - 2px);
+    background: transparent;
+    box-shadow: none;
+    color: var(--flx-ui-color-fg-muted);
+  }
+  [data-ui='paper'] :where([role='group'][data-orientation] > [aria-pressed]:hover:not([data-disabled])) {
+    background: transparent;
+    color: var(--flx-ui-color-fg);
+  }
+  [data-ui='paper'] :where([role='group'][data-orientation] > [aria-pressed][data-state='on']) {
+    background: var(--flx-ui-paper-control);
+    box-shadow: var(--flx-ui-paper-control-shadow);
+    color: var(--flx-ui-color-fg);
+  }
+
+  /* ---- Fields: input, input group, select trigger, combobox --------------------- */
+  /* Recessed: no border, an inset ring and shadow. Hover deepens the ring; focus is the
+     same offset outline as the controls. Outlined and filled variants keep their own look. */
+  [data-ui='paper'] :where([data-input]:not([data-field-variant]),
+    [data-input-group]:not([data-field-variant]),
+    button[role='combobox']:not([data-field-variant]),
+    [data-combobox-control]:not([data-field-variant])) {
+    border: none;
+    min-height: var(--flx-ui-size-md);
+    border-radius: var(--flx-ui-radius-md);
+    background: var(--flx-ui-paper-field);
+    box-shadow: var(--flx-ui-paper-field-shadow);
+  }
+  [data-ui='paper'] :where(button[role='combobox']:not([data-field-variant])) {
+    height: var(--flx-ui-size-md);
+  }
+  [data-ui='paper'] :where([data-input]:not([data-field-variant]):hover,
+    [data-input-group]:not([data-field-variant]):hover,
+    button[role='combobox']:not([data-field-variant]):hover,
+    [data-combobox-control]:not([data-field-variant]):hover) {
+    box-shadow: inset 0 0 0 0.5px var(--flx-ui-gray-8), inset 0 1px 2px var(--flx-ui-paper-contact);
+  }
+  [data-ui='paper'] :where([data-input]:not([data-field-variant]):focus-visible,
+    [data-input-group]:not([data-field-variant]):focus-within,
+    button[role='combobox']:not([data-field-variant]):focus-visible,
+    [data-combobox-control]:not([data-field-variant]):focus-within) {
+    outline: 2px solid var(--flx-ui-color-focus-ring);
+    outline-offset: 2px;
+    box-shadow: var(--flx-ui-paper-field-shadow);
+  }
+  [data-ui='paper'] :where([data-input][data-invalid]:not([data-field-variant]),
+    [data-input-group][data-invalid]:not([data-field-variant])) {
+    box-shadow: inset 0 0 0 1px var(--flx-ui-color-danger), inset 0 1px 2px var(--flx-ui-paper-contact);
+  }
+  /* The combobox's toggle sits inside the field, a square two pixels short of it. */
+  [data-ui='paper'] :where([data-combobox-control] > button) {
+    align-self: stretch;
+    margin: 3px 0;
+    padding: 0 6px;
+    border-radius: calc(var(--flx-ui-radius-md) - 3px);
+  }
+  [data-ui='paper'] :where([data-combobox-control] > button:hover) {
+    background: var(--flx-ui-paper-item-hover);
+    color: var(--flx-ui-color-fg);
+  }
+
+  /* ---- Popup triggers ------------------------------------------------------------ */
+  /* DropdownMenuTrigger and PopoverTrigger render a bare button; given no variant, it
+     takes the control recipe. A trigger with a variant is already a Button. */
+  [data-ui='paper'] :where(button[aria-haspopup='menu']:not([data-variant]):not([role='menuitem']),
+    button[aria-haspopup='dialog']:not([data-variant])) {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: var(--flx-ui-size-md);
+    padding: 0 12px;
+    font: inherit;
+    font-weight: 500;
+    color: var(--flx-ui-color-fg);
+    background: var(--flx-ui-paper-control);
+    border: none;
+    border-radius: var(--flx-ui-radius-md);
+    box-shadow: var(--flx-ui-paper-control-shadow);
+    cursor: pointer;
+    transition: background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+  }
+  [data-ui='paper'] :where(button[aria-haspopup='menu']:not([data-variant]):not([role='menuitem']),
+    button[aria-haspopup='dialog']:not([data-variant])):where(:hover, [data-state='open']) {
+    background: var(--flx-ui-paper-control-hover);
+  }
+  [data-ui='paper'] :where(button[aria-haspopup='menu']:not([data-variant]):not([role='menuitem']),
+    button[aria-haspopup='dialog']:not([data-variant])):focus-visible {
+    outline: 2px solid var(--flx-ui-color-focus-ring);
+    outline-offset: 2px;
+  }
+
+  /* ---- Floating: menus, select and combobox popups, popovers, dialogs ----------- */
+  /* Menus and popups pad 4px, so their 14px corner holds items at the 10px control
+     radius. Hover and keyboard focus are a neutral tint; the accent marks selection. */
+  [data-ui='paper'] :where([role='menu'], [role='listbox'][data-state='open']) {
+    padding: 4px;
+    border: none;
+    border-radius: calc(var(--flx-ui-radius-md) + 4px);
+    background: var(--flx-ui-paper-floating);
+    box-shadow: var(--flx-ui-paper-menu-shadow);
+  }
+  [data-ui='paper'] :where([role='menuitem'], [role='option']) {
+    min-height: calc(var(--flx-ui-size-md) - 4px);
+    padding: 0 10px;
+    border-radius: var(--flx-ui-radius-md);
+    font-size: var(--flx-ui-font-size-md);
+  }
+  [data-ui='paper'] :where([role='menu'] [role='menuitem'], [role='listbox'] [role='option']):where(:hover, :focus, [data-active]) {
+    background: var(--flx-ui-paper-item-hover);
+    color: var(--flx-ui-color-fg);
+  }
+  [data-ui='paper'] :where([role='menuitem'][aria-haspopup='menu'][data-state='open']) {
+    background: var(--flx-ui-paper-item-hover);
+    color: var(--flx-ui-color-fg);
+  }
+  [data-ui='paper'] :where([role='menu'] [role='separator']) {
+    height: 0;
+    margin: 4px 6px;
+    background: none;
+    box-shadow: 0 0 0 0.25px var(--flx-ui-paper-ring-strong);
+  }
+  [data-ui='paper'] :where([data-menu-label], [data-listbox-group-label]) {
+    padding: 8px 10px 4px;
+    letter-spacing: 0.02em;
+  }
+  [data-ui='paper'] :where([data-listbox-search], [data-select-search]) {
+    min-height: calc(var(--flx-ui-size-md) - 4px);
+    margin-bottom: 4px;
+    border: none;
+    border-radius: var(--flx-ui-radius-md);
+    background: var(--flx-ui-paper-field);
+    box-shadow: var(--flx-ui-paper-field-shadow);
+  }
+  [data-ui='paper'] :where([role='dialog'][data-placement]) {
+    border: none;
+    border-radius: var(--flx-ui-radius-lg);
+    background: var(--flx-ui-paper-floating);
+    box-shadow: var(--flx-ui-paper-menu-shadow);
+  }
+  [data-ui='paper'] :where([role='dialog']:not([data-placement]), [role='alertdialog']) {
+    border: none;
+    border-radius: var(--flx-ui-radius-xl);
+    background: var(--flx-ui-paper-floating);
+    box-shadow: var(--flx-ui-paper-dialog-shadow);
+  }
+}

package/paper.css.js

@@ -0,0 +1,8 @@
+const href = new URL('./paper.css', import.meta.url).href;
+if (typeof document !== 'undefined' && !document.querySelector(`link[data-flx-ui="${href}"]`)) {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = href;
+  link.dataset.flxUi = href;
+  document.head.appendChild(link);
+}