@dixy-ui/themes 0.1.0-beta.4 → 0.1.0-beta.6

package/README.md

@@ -1,12 +1,12 @@
 # @dixy-ui/themes
 
-32 starter themes for [Dixy UI](https://github.com/akssmax/DixyUI), from paper and glass to terminals and festivals, plus an authoring API for your own. Each theme is a material, a frame, a character and a chrome over the same accessible components.
+38 starter themes for [Dixy UI](https://github.com/akssmax/DixyUI), from paper and glass to terminals and festivals, plus an authoring API for your own. Each theme is a material, a frame, a character and a chrome over the same accessible components.
 
 [![npm](https://img.shields.io/npm/v/%40dixy-ui%2Fthemes/beta?label=npm&color=7c3aed)](https://www.npmjs.com/package/@dixy-ui/themes) [![MIT](https://img.shields.io/badge/license-MIT-7c3aed)](https://github.com/akssmax/DixyUI/blob/main/LICENSE)
 
 > **Public beta.** APIs may change between `0.x` releases. See the [changelog](./CHANGELOG.md) and the [known issues](https://github.com/akssmax/DixyUI#known-issues).
 
-[Documentation](https://dixy-ui-docs.akshaysaini-design.workers.dev) · [Components](https://dixy-ui-docs.akshaysaini-design.workers.dev/docs/components/button) · [Themes](https://dixy-ui-docs.akshaysaini-design.workers.dev/#themes) · [GitHub](https://github.com/akssmax/DixyUI)
+[Documentation](https://dixyui.com) · [Components](https://dixyui.com/docs/components/button) · [Themes](https://dixyui.com/#themes) · [GitHub](https://github.com/akssmax/DixyUI)
 
 ## Install
 
@@ -31,7 +31,7 @@ import { retroOSTheme } from "@dixy-ui/themes/retro-os";
 </Theme>;
 ```
 
-Browse all 32 starters on the [landing page](https://dixy-ui-docs.akshaysaini-design.workers.dev/#themes) or build your own in the [playground](https://dixy-ui-docs.akshaysaini-design.workers.dev/playground).
+Browse all 38 starters on the [landing page](https://dixyui.com/#themes) or build your own in the [playground](https://dixyui.com/playground).
 
 ## Skins and ornament renderers
 
@@ -125,7 +125,7 @@ Omit animateOrnaments for still geometry. The playground's Animate details butto
 | Y2K Titanium    | `TitaniumOrnament`    | Chamfers, screws, perforations and light pipes                         |
 | Material Light  | `LightOrnament`       | Porcelain halo and fine rim highlights                                 |
 
-Each export comes from `@dixy-ui/themes/<slug>/react`. CSS/definition-only consumption remains supported without the React artwork. See `docs/PROCEDURAL_SKINS.md` in the repository for architecture and verification scope.
+Each export comes from `@dixy-ui/themes/<slug>/react`. Ocean Depths and Candy Clay now ship plain cards (No frame), so their stylesheets keep `OceanOrnament` and `ClayOrnament` hidden and out of layout; the renderers draw on themes whose frame recipe is `coral` or `cushion`. CSS/definition-only consumption remains supported without the React artwork. See `docs/PROCEDURAL_SKINS.md` in the repository for architecture and verification scope.
 
 Themes style component surfaces and edges. Button labels and icons belong to the consumer; no renderer is mounted inside a Button. A loading spinner remains a functional Button feature. Retro frames do not simulate window title bars, window actions or resize handles. Compose working controls explicitly when an application needs them.
 

package/dist/ansi-panes.css

@@ -156,11 +156,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/ansi-panes"] {
+  .dixy-theme[data-dixy-skin="dixy/ansi-panes"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/ansi-panes"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/arcade-cabinet.css

@@ -160,11 +160,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/arcade-cabinet"] {
+  .dixy-theme[data-dixy-skin="dixy/arcade-cabinet"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/arcade-cabinet"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/art-deco.css

@@ -172,11 +172,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/art-deco"] {
+  .dixy-theme[data-dixy-skin="dixy/art-deco"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/art-deco"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/atomic-lounge.css

@@ -165,11 +165,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/atomic-lounge"] {
+  .dixy-theme[data-dixy-skin="dixy/atomic-lounge"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/atomic-lounge"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/azulejo-tile.css

@@ -185,11 +185,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/azulejo-tile"] {
+  .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/azulejo-tile"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/blueprint.css

@@ -159,11 +159,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/blueprint"] {
+  .dixy-theme[data-dixy-skin="dixy/blueprint"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/blueprint"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/brutalist-concrete.css

@@ -167,13 +167,11 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/brutalist-concrete"] {
-    position: relative;
-    isolation: isolate;
-  }
   .dixy-theme[data-dixy-skin="dixy/brutalist-concrete"]:not(
       .dixy-portal-scope
     ) {
+    position: relative;
+    isolation: isolate;
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/bytes.json

@@ -1,192 +1,192 @@
 [
   {
     "id": "dixy/living-forest",
-    "cssBytes": 32270,
-    "gzipBytes": 4717
+    "cssBytes": 32213,
+    "gzipBytes": 4721
   },
   {
     "id": "dixy/retro-os",
-    "cssBytes": 29780,
-    "gzipBytes": 4333
+    "cssBytes": 29728,
+    "gzipBytes": 4335
   },
   {
     "id": "dixy/winamp-signal",
-    "cssBytes": 35266,
-    "gzipBytes": 4926
+    "cssBytes": 35209,
+    "gzipBytes": 4929
   },
   {
     "id": "dixy/studio-hardware",
-    "cssBytes": 30392,
-    "gzipBytes": 4372
+    "cssBytes": 30333,
+    "gzipBytes": 4374
   },
   {
     "id": "dixy/prism-glass",
-    "cssBytes": 32487,
-    "gzipBytes": 4640
+    "cssBytes": 32432,
+    "gzipBytes": 4642
   },
   {
     "id": "dixy/tactile-atelier",
-    "cssBytes": 32810,
-    "gzipBytes": 4711
+    "cssBytes": 32751,
+    "gzipBytes": 4714
   },
   {
     "id": "dixy/ocean-depths",
-    "cssBytes": 29613,
-    "gzipBytes": 4308
+    "cssBytes": 29717,
+    "gzipBytes": 4327
   },
   {
     "id": "dixy/candy-clay",
-    "cssBytes": 27849,
-    "gzipBytes": 3996
+    "cssBytes": 27953,
+    "gzipBytes": 4012
   },
   {
     "id": "dixy/art-deco",
-    "cssBytes": 29540,
-    "gzipBytes": 4420
+    "cssBytes": 29488,
+    "gzipBytes": 4421
   },
   {
     "id": "dixy/y2k-titanium",
-    "cssBytes": 35533,
-    "gzipBytes": 4971
+    "cssBytes": 35477,
+    "gzipBytes": 4974
   },
   {
     "id": "dixy/material-light",
-    "cssBytes": 29603,
-    "gzipBytes": 4155
+    "cssBytes": 29545,
+    "gzipBytes": 4156
   },
   {
     "id": "dixy/scrapbook",
-    "cssBytes": 23826,
-    "gzipBytes": 3530
+    "cssBytes": 23930,
+    "gzipBytes": 3550
   },
   {
     "id": "dixy/blueprint",
-    "cssBytes": 31015,
-    "gzipBytes": 4595
+    "cssBytes": 30962,
+    "gzipBytes": 4597
   },
   {
     "id": "dixy/riso-zine",
-    "cssBytes": 27390,
-    "gzipBytes": 4144
+    "cssBytes": 27337,
+    "gzipBytes": 4145
   },
   {
     "id": "dixy/neon-night-market",
-    "cssBytes": 31455,
-    "gzipBytes": 4459
+    "cssBytes": 31394,
+    "gzipBytes": 4460
   },
   {
     "id": "dixy/sumi-ink",
-    "cssBytes": 25964,
-    "gzipBytes": 4030
+    "cssBytes": 25912,
+    "gzipBytes": 4029
   },
   {
     "id": "dixy/tokyo-transit",
-    "cssBytes": 26531,
-    "gzipBytes": 3901
+    "cssBytes": 26474,
+    "gzipBytes": 3904
   },
   {
     "id": "dixy/phosphor-terminal",
-    "cssBytes": 34242,
-    "gzipBytes": 4675
+    "cssBytes": 34181,
+    "gzipBytes": 4677
   },
   {
     "id": "dixy/ansi-panes",
-    "cssBytes": 31535,
-    "gzipBytes": 4569
+    "cssBytes": 31481,
+    "gzipBytes": 4572
   },
   {
     "id": "dixy/swiss-poster",
-    "cssBytes": 27506,
+    "cssBytes": 27450,
     "gzipBytes": 4039
   },
   {
     "id": "dixy/azulejo-tile",
-    "cssBytes": 32602,
-    "gzipBytes": 4655
+    "cssBytes": 32546,
+    "gzipBytes": 4656
   },
   {
     "id": "dixy/brutalist-concrete",
-    "cssBytes": 32809,
-    "gzipBytes": 4721
+    "cssBytes": 32747,
+    "gzipBytes": 4723
   },
   {
     "id": "dixy/atomic-lounge",
-    "cssBytes": 31938,
-    "gzipBytes": 4502
+    "cssBytes": 31881,
+    "gzipBytes": 4504
   },
   {
     "id": "dixy/orbital-hud",
-    "cssBytes": 34688,
-    "gzipBytes": 4853
+    "cssBytes": 34633,
+    "gzipBytes": 4856
   },
   {
     "id": "dixy/freighter",
-    "cssBytes": 34353,
-    "gzipBytes": 5033
+    "cssBytes": 34300,
+    "gzipBytes": 5035
   },
   {
     "id": "dixy/solar-sail",
-    "cssBytes": 30916,
-    "gzipBytes": 4478
+    "cssBytes": 30862,
+    "gzipBytes": 4480
   },
   {
     "id": "dixy/diwali-lights",
-    "cssBytes": 30995,
-    "gzipBytes": 4521
+    "cssBytes": 30938,
+    "gzipBytes": 4520
   },
   {
     "id": "dixy/papel-picado",
-    "cssBytes": 30178,
+    "cssBytes": 30122,
     "gzipBytes": 4395
   },
   {
     "id": "dixy/holi-colours",
-    "cssBytes": 30688,
-    "gzipBytes": 4433
+    "cssBytes": 30632,
+    "gzipBytes": 4434
   },
   {
     "id": "dixy/yule-knit",
-    "cssBytes": 29152,
-    "gzipBytes": 4293
+    "cssBytes": 29099,
+    "gzipBytes": 4296
   },
   {
     "id": "dixy/glass-ui",
-    "cssBytes": 30834,
-    "gzipBytes": 4457
+    "cssBytes": 30782,
+    "gzipBytes": 4458
   },
   {
     "id": "dixy/sunset-drive",
-    "cssBytes": 31436,
-    "gzipBytes": 4559
+    "cssBytes": 31380,
+    "gzipBytes": 4561
   },
   {
     "id": "dixy/save-point",
-    "cssBytes": 30491,
-    "gzipBytes": 4436
+    "cssBytes": 30437,
+    "gzipBytes": 4438
   },
   {
     "id": "dixy/arcade-cabinet",
-    "cssBytes": 33882,
-    "gzipBytes": 4697
+    "cssBytes": 33824,
+    "gzipBytes": 4699
   },
   {
     "id": "dixy/ledger",
-    "cssBytes": 19148,
-    "gzipBytes": 2959
+    "cssBytes": 19252,
+    "gzipBytes": 3001
   },
   {
     "id": "dixy/mainframe",
-    "cssBytes": 24511,
-    "gzipBytes": 3438
+    "cssBytes": 24615,
+    "gzipBytes": 3468
   },
   {
     "id": "dixy/dispatch",
-    "cssBytes": 23183,
-    "gzipBytes": 3270
+    "cssBytes": 23287,
+    "gzipBytes": 3316
   },
   {
     "id": "dixy/signal",
-    "cssBytes": 19272,
-    "gzipBytes": 2875
+    "cssBytes": 19376,
+    "gzipBytes": 2917
   }
 ]

package/dist/candy-clay.css

@@ -186,11 +186,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/candy-clay"] {
+  .dixy-theme[data-dixy-skin="dixy/candy-clay"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/candy-clay"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }
@@ -515,6 +513,13 @@
     border: 1px solid var(--dixy-skin-edge);
   }
 
+  .dixy-theme[data-dixy-skin="dixy/candy-clay"] .dixy-skin-ornament {
+    position: absolute;
+    inset: 0;
+    display: none;
+    pointer-events: none;
+  }
+
   .dixy-theme[data-dixy-skin="dixy/candy-clay"]
     :is(.dixy-switch-thumb)[data-dixy-skin="dixy/candy-clay"] {
     border-radius: 999px;

package/dist/compile-css.js

@@ -62,6 +62,10 @@ export function compileThemeCSS(m) {
     // Base 8/9 at 50% measured >= 3.35:1 on every built-in theme.
     // Character rules sit after material rules and carry the theme ancestor, so they win over paint defaults.
     const C = (parts, state = "") => `${theme} :is(${parts})[data-dixy-skin="${m.id}"]${state}`;
+    // The theme root is positioned and isolated, but never the portal scope: a
+    // zero-height wrapper at the end of <body>. Positioned, it becomes the popups'
+    // containing block while Floating UI measures from the document, so popups
+    // land a whole page height away.
     return `
 @layer dixy.tokens, dixy.components;
 @layer dixy.tokens {
@@ -107,8 +111,7 @@ export function compileThemeCSS(m) {
   ${paletteCSS}
 }
 @layer dixy.components {
-  ${theme} { position:relative; isolation:isolate; }
-  ${theme}:not(.dixy-portal-scope) { background-color:var(--dixy-skin-ground); background-image:var(--dixy-skin-canvas); }
+  ${theme}:not(.dixy-portal-scope) { position:relative; isolation:isolate; background-color:var(--dixy-skin-ground); background-image:var(--dixy-skin-canvas); }
   ${S(surfaces)} { position:relative; border-radius:${radius("card")}; }
   ${S(overlays)} { border-radius:${radius("overlay")}; }
   ${S(".dixy-card,.dixy-dialog-popup")} { padding:var(--dixy-skin-card-inset); border:${frameWidth}px ${borderStyle} var(--dixy-skin-edge); }

package/dist/dispatch.css

@@ -148,11 +148,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/dispatch"] {
+  .dixy-theme[data-dixy-skin="dixy/dispatch"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/dispatch"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }
@@ -471,6 +469,13 @@
     border: 1px solid var(--dixy-skin-edge);
   }
 
+  .dixy-theme[data-dixy-skin="dixy/dispatch"] .dixy-skin-ornament {
+    position: absolute;
+    inset: 0;
+    display: none;
+    pointer-events: none;
+  }
+
   .dixy-theme[data-dixy-skin="dixy/dispatch"] {
     --dixy-motion-easing-standard: cubic-bezier(0.22, 1, 0.36, 1);
     --dixy-motion-easing-enter: linear(

package/dist/diwali-lights.css

@@ -156,11 +156,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/diwali-lights"] {
+  .dixy-theme[data-dixy-skin="dixy/diwali-lights"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/diwali-lights"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/frame-styles.js

@@ -37,8 +37,14 @@ export const framePrefixes = {
 };
 /** Frame code owns trim/geometry only. It never paints an input or action surface. */
 export function frameStyles(m, theme) {
+    // No frame: the material carries the look, so an ornament renderer passed
+    // anyway (e.g. ClayOrnament on Candy Clay) must stay inert. Take it out of
+    // flow and hide it; without this its wrapper and canvas sat in normal flow
+    // and grew the card or dialog (issue #24).
     if (m.frame === "none")
-        return "";
+        return `
+    ${theme} .dixy-skin-ornament { position:absolute; inset:0; display:none; pointer-events:none; }
+  `;
     const prefix = framePrefixes[m.frame];
     const art = `${theme} .dixy-${prefix}-ornament`;
     const safe = {

package/dist/freighter.css

@@ -176,11 +176,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/freighter"] {
+  .dixy-theme[data-dixy-skin="dixy/freighter"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/freighter"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/glass-ui.css

@@ -169,11 +169,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/glass-ui"] {
+  .dixy-theme[data-dixy-skin="dixy/glass-ui"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/glass-ui"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/holi-colours.css

@@ -170,11 +170,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/holi-colours"] {
+  .dixy-theme[data-dixy-skin="dixy/holi-colours"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/holi-colours"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/ledger.css

@@ -139,11 +139,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/ledger"] {
+  .dixy-theme[data-dixy-skin="dixy/ledger"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/ledger"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }
@@ -459,6 +457,13 @@
     border: 1px solid var(--dixy-skin-edge);
   }
 
+  .dixy-theme[data-dixy-skin="dixy/ledger"] .dixy-skin-ornament {
+    position: absolute;
+    inset: 0;
+    display: none;
+    pointer-events: none;
+  }
+
   .dixy-theme[data-dixy-skin="dixy/ledger"] {
     --dixy-motion-easing-standard: cubic-bezier(0.5, 0, 0.1, 1);
     --dixy-motion-easing-enter: cubic-bezier(0.5, 0, 0.1, 1);

package/dist/living-forest.css

@@ -216,11 +216,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/living-forest"] {
+  .dixy-theme[data-dixy-skin="dixy/living-forest"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/living-forest"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/mainframe.css

@@ -136,11 +136,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/mainframe"] {
+  .dixy-theme[data-dixy-skin="dixy/mainframe"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/mainframe"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }
@@ -459,6 +457,13 @@
     border: 1px solid var(--dixy-skin-edge);
   }
 
+  .dixy-theme[data-dixy-skin="dixy/mainframe"] .dixy-skin-ornament {
+    position: absolute;
+    inset: 0;
+    display: none;
+    pointer-events: none;
+  }
+
   .dixy-theme[data-dixy-skin="dixy/mainframe"]
     :is(.dixy-switch-root)[data-dixy-skin="dixy/mainframe"]::before {
     border-radius: 3px;

package/dist/material-light.css

@@ -147,11 +147,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/material-light"] {
+  .dixy-theme[data-dixy-skin="dixy/material-light"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/material-light"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/neon-night-market.css

@@ -166,11 +166,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/neon-night-market"] {
+  .dixy-theme[data-dixy-skin="dixy/neon-night-market"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/neon-night-market"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/ocean-depths.css

@@ -196,11 +196,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/ocean-depths"] {
+  .dixy-theme[data-dixy-skin="dixy/ocean-depths"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/ocean-depths"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }
@@ -525,6 +523,13 @@
     border: 1px solid var(--dixy-skin-edge);
   }
 
+  .dixy-theme[data-dixy-skin="dixy/ocean-depths"] .dixy-skin-ornament {
+    position: absolute;
+    inset: 0;
+    display: none;
+    pointer-events: none;
+  }
+
   .dixy-theme[data-dixy-skin="dixy/ocean-depths"]
     :is(.dixy-switch-thumb)[data-dixy-skin="dixy/ocean-depths"] {
     border-radius: 999px;

package/dist/orbital-hud.css

@@ -175,11 +175,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/orbital-hud"] {
+  .dixy-theme[data-dixy-skin="dixy/orbital-hud"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/orbital-hud"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/papel-picado.css

@@ -187,11 +187,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/papel-picado"] {
+  .dixy-theme[data-dixy-skin="dixy/papel-picado"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/papel-picado"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/phosphor-terminal.css

@@ -168,11 +168,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/phosphor-terminal"] {
+  .dixy-theme[data-dixy-skin="dixy/phosphor-terminal"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/phosphor-terminal"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/prism-glass.css

@@ -186,11 +186,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/prism-glass"] {
+  .dixy-theme[data-dixy-skin="dixy/prism-glass"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/prism-glass"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/retro-os.css

@@ -152,11 +152,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/retro-os"] {
+  .dixy-theme[data-dixy-skin="dixy/retro-os"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/retro-os"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/riso-zine.css

@@ -165,11 +165,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/riso-zine"] {
+  .dixy-theme[data-dixy-skin="dixy/riso-zine"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/riso-zine"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/save-point.css

@@ -162,11 +162,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/save-point"] {
+  .dixy-theme[data-dixy-skin="dixy/save-point"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/save-point"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/scrapbook.css

@@ -141,11 +141,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/scrapbook"] {
+  .dixy-theme[data-dixy-skin="dixy/scrapbook"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/scrapbook"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }
@@ -464,6 +462,13 @@
     border: 1px solid var(--dixy-skin-edge);
   }
 
+  .dixy-theme[data-dixy-skin="dixy/scrapbook"] .dixy-skin-ornament {
+    position: absolute;
+    inset: 0;
+    display: none;
+    pointer-events: none;
+  }
+
   .dixy-theme[data-dixy-skin="dixy/scrapbook"] {
     --dixy-motion-easing-standard: cubic-bezier(0.22, 1, 0.36, 1);
     --dixy-motion-easing-enter: linear(

package/dist/signal.css

@@ -139,11 +139,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/signal"] {
+  .dixy-theme[data-dixy-skin="dixy/signal"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/signal"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }
@@ -459,6 +457,13 @@
     border: 1px solid var(--dixy-skin-edge);
   }
 
+  .dixy-theme[data-dixy-skin="dixy/signal"] .dixy-skin-ornament {
+    position: absolute;
+    inset: 0;
+    display: none;
+    pointer-events: none;
+  }
+
   .dixy-theme[data-dixy-skin="dixy/signal"] {
     --dixy-personality-press-distance: 0px;
   }

package/dist/solar-sail.css

@@ -185,11 +185,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/solar-sail"] {
+  .dixy-theme[data-dixy-skin="dixy/solar-sail"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/solar-sail"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/studio-hardware.css

@@ -148,11 +148,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/studio-hardware"] {
+  .dixy-theme[data-dixy-skin="dixy/studio-hardware"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/studio-hardware"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/sumi-ink.css

@@ -168,11 +168,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/sumi-ink"] {
+  .dixy-theme[data-dixy-skin="dixy/sumi-ink"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/sumi-ink"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/sunset-drive.css

@@ -172,11 +172,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/sunset-drive"] {
+  .dixy-theme[data-dixy-skin="dixy/sunset-drive"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/sunset-drive"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/swiss-poster.css

@@ -164,11 +164,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/swiss-poster"] {
+  .dixy-theme[data-dixy-skin="dixy/swiss-poster"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/swiss-poster"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/tactile-atelier.css

@@ -186,11 +186,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/tactile-atelier"] {
+  .dixy-theme[data-dixy-skin="dixy/tactile-atelier"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/tactile-atelier"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/tokyo-transit.css

@@ -162,11 +162,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/tokyo-transit"] {
+  .dixy-theme[data-dixy-skin="dixy/tokyo-transit"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/tokyo-transit"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/winamp-signal.css

@@ -152,11 +152,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/winamp-signal"] {
+  .dixy-theme[data-dixy-skin="dixy/winamp-signal"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/winamp-signal"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/y2k-titanium.css

@@ -199,11 +199,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/y2k-titanium"] {
+  .dixy-theme[data-dixy-skin="dixy/y2k-titanium"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/y2k-titanium"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/dist/yule-knit.css

@@ -158,11 +158,9 @@
   }
 }
 @layer dixy.components {
-  .dixy-theme[data-dixy-skin="dixy/yule-knit"] {
+  .dixy-theme[data-dixy-skin="dixy/yule-knit"]:not(.dixy-portal-scope) {
     position: relative;
     isolation: isolate;
-  }
-  .dixy-theme[data-dixy-skin="dixy/yule-knit"]:not(.dixy-portal-scope) {
     background-color: var(--dixy-skin-ground);
     background-image: var(--dixy-skin-canvas);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dixy-ui/themes",
-  "version": "0.1.0-beta.4",
+  "version": "0.1.0-beta.6",
   "type": "module",
   "description": "Independent 2D skins for Dixy's existing components.",
   "license": "MIT",
@@ -372,7 +372,7 @@
     "./signal.css": "./dist/signal.css"
   },
   "dependencies": {
-    "@dixy-ui/tokens": "0.1.0-beta.3"
+    "@dixy-ui/tokens": "0.1.0-beta.4"
   },
   "devDependencies": {
     "typescript": "5.9.3",