@telepath-computer/television 1.3.2 → 1.3.4

package/dist/skills/television/theming.md

@@ -106,20 +106,18 @@ These four tokens are enough to replace the main surfaces and text, but they do
    alone. Between the tables themselves, source order decides: the dark
    table follows the light one, so it wins where the attribute matches. */
 :where(:root) {
-  /* A surface's inner edge moves toward its light pole; its outer line moves
-     toward its dark pole. Both follow the surface rather than appearance. */
-  --surface-border-color: color-mix(in oklch, var(--color-surface), oklch(from var(--color-surface) 1 0 h) var(--alpha-15));
-  --surface-outline-color: color-mix(in oklch, var(--color-surface), oklch(from var(--color-surface) 0 0 h) var(--alpha-10));
-  --surface-outline-width: 1px;
-  --surface-outline: var(--surface-outline-width) solid var(--surface-outline-color);
+  /* Complete decorative paints. The consuming pseudo sets 1em to its radius. */
+  --panel-edge-highlight: linear-gradient(to bottom,
+    rgb(255 255 255 / .36) 0 .5px,
+    rgb(255 255 255 / .28) .5px 1px,
+    rgb(255 255 255 / .20) 1em);
+  --panel-edge-shadow: 0 0 0 .5px rgb(0 0 0 / .205);
 
   /* Panels: popovers, menus, selects and dialogs. */
   --panel-background: var(--color-surface);
   --panel-text-color: var(--color-text);
-  --panel-border-color: var(--surface-border-color);
-  --panel-border-width: 1px;
-  --panel-border: var(--panel-border-width) solid var(--panel-border-color);
-  --panel-outline: var(--surface-outline);
+  --panel-border-color: var(--color-border);
+  --panel-border: none;
 
   /* Options: menu items and select options. */
   --option-background-highlighted: color-mix(in oklch, transparent, var(--option-background-active) var(--hover-mix));
@@ -423,6 +421,7 @@ These four tokens are enough to replace the main surfaces and text, but they do
    on near-black), and every derived step follows. The neutral slot does not
    move — the roles flip which steps they take. */
 :where([data-theme="dark"]) {
+  --panel-edge-shadow: 0 0 0 .5px rgb(0 0 0 / .912);
   --alpha-active: 12%;
   --red: oklch(0.704 0.191 22.216);
   --orange: oklch(0.75 0.183 55.934);
@@ -574,10 +573,8 @@ These four tokens are enough to replace the main surfaces and text, but they do
   --sidebar-background: var(--color-surface-muted);
   --sidebar-text-color: var(--color-text);
   --sidebar-shadow: none;
-  --sidebar-border-color: var(--surface-border-color);
-  --sidebar-border-width: 1px;
-  --sidebar-border: var(--sidebar-border-width) solid var(--sidebar-border-color);
-  --sidebar-outline: var(--surface-outline);
+  --sidebar-border-color: color-mix(in oklch, var(--color-surface), oklch(from var(--color-surface) 1 0 h) var(--alpha-15));
+  --sidebar-border: var(--panel-border);
   --sidebar-heading-text-color: var(--color-text-muted);
   --sidebar-heading-font-size: var(--text-md);
   --sidebar-width: 260px;
@@ -599,10 +596,8 @@ These four tokens are enough to replace the main surfaces and text, but they do
   /* Artifact frame and title bar. */
   --artifact-frame-shadow: var(--shadow-xl);
   --frame-background: var(--color-surface);
-  --frame-border-color: var(--surface-border-color);
-  --frame-border-width: 1px;
-  --frame-border: var(--frame-border-width) solid var(--frame-border-color);
-  --frame-outline: var(--surface-outline);
+  --frame-border-color: var(--color-border);
+  --frame-border: var(--panel-border);
   --frame-titlebar-background: var(--color-surface-muted);
   --frame-titlebar-text-color: var(--color-text);
   --frame-titlebar-border-color: transparent;
@@ -665,9 +660,9 @@ These four tokens are enough to replace the main surfaces and text, but they do
   --tab-background-active: var(--wallpaper-overlay-background-active);
   --tab-background-selected: var(--color-surface-muted);
   /* Reserve the edge in every state so theme borders do not shift tabs. */
-  --tab-border-selected: 1px solid var(--surface-border-color);
+  --tab-border-selected: 1px solid transparent;
   --tab-outline: var(--wallpaper-overlay-outline);
-  --tab-outline-selected: var(--surface-outline);
+  --tab-outline-selected: none;
 
   /* The drag placeholder's ghost fill — the "a carried thing could land
      here" mark the tab strip and the sidebar share
@@ -738,7 +733,7 @@ For the optional iframe surfaces and protected overlay stacking, see [Theme effe
 </nav>
 ```
 
-`.sidebar` paints its light inner edge over its own background, alongside its optional soft shadow. The app shell paints the adjoining dark line as the left border of `.app-main`, so it blends over the wallpaper without a raised layer. `.sidebar-titlebar` reserves the window controls and drag area. `.sidebar-body` scrolls both groups together; `.sidebar:has(.sidebar-body[continues-start]) .sidebar-titlebar` draws the top boundary while content extends above the viewport. `.channel-group + .channel-group` separates the groups, and `.channel-group-label` styles their labels. `.channel-create` sits at the right of the titlebar and is excluded from window dragging.
+`.sidebar::after` paints the light inner seam over the sidebar background, alongside its optional soft shadow. `.app-main::before` paints the adjoining fractional dark seam over the wallpaper. Both are pointer-transparent. The sidebar accepts an independent native border; the main region reserves the exterior seam track. `.sidebar-titlebar` reserves the window controls and drag area. `.sidebar-body` scrolls both groups together; `.sidebar:has(.sidebar-body[continues-start]) .sidebar-titlebar` draws the top boundary while content extends above the viewport. `.channel-group + .channel-group` separates the groups, and `.channel-group-label` styles their labels. `.channel-create` sits at the right of the titlebar and is excluded from window dragging.
 
 The channel name and its menu trigger are siblings within the row. `.channel` owns the name box; `.channel[aria-selected="true"]` paints the selection. The selected row changes `.channel-menu-trigger` text color through `.channel-row:has(> .channel[aria-selected="true"])`. Shared foundation tints follow that color for hover, press and expanded states. A hover or an expanded trigger preserves the unselected row tint through `:where(.channel-row:hover, .channel-row:has(.channel-menu-trigger[aria-expanded="true"])) .channel:not([aria-selected="true"])`. Trigger visibility follows row hover, `:focus-visible`, selected state, and expanded state. Use the expanded trigger state when styling an open menu subject. Panels remain in their authored DOM position when opened.
 
@@ -788,21 +783,23 @@ An empty channel adds `.stage-empty`, containing an artifact `tv-icon` and a par
 
 ```html
 <div class="artifact-frame">
-  <iframe title="…"></iframe>
-  <footer class="artifact-title-bar">
-    <tv-icon name="artifact"></tv-icon>
-    <span class="artifact-title">…</span>
-    <!-- Navigation controls appear together when either direction exists. -->
-    <button class="artifact-back" icon variant="ghost" size="sm">…</button>
-    <button class="artifact-forward" icon variant="ghost" size="sm">…</button>
-    <span class="artifact-bar-divider" aria-hidden="true"></span>
-    <button class="artifact-menu-trigger" icon variant="ghost" size="sm">…</button>
-    <tv-menu>…</tv-menu>
-  </footer>
+  <div class="artifact-frame-clip">
+    <iframe title="…"></iframe>
+    <footer class="artifact-title-bar">
+      <tv-icon name="artifact"></tv-icon>
+      <span class="artifact-title">…</span>
+      <!-- Navigation controls appear together when either direction exists. -->
+      <button class="artifact-back" icon variant="ghost" size="sm">…</button>
+      <button class="artifact-forward" icon variant="ghost" size="sm">…</button>
+      <span class="artifact-bar-divider" aria-hidden="true"></span>
+      <button class="artifact-menu-trigger" icon variant="ghost" size="sm">…</button>
+      <tv-menu>…</tv-menu>
+    </footer>
+  </div>
 </div>
 ```
 
-`.artifact-frame` owns the border, curve, surface and shadow; background pages suppress the shadow. `.artifact-frame > iframe` fills the document area. `.artifact-title-bar` paints the lower band, `.artifact-title-bar .artifact-title` takes the remaining width and truncates, and `.artifact-bar-divider` separates navigation from the menu trigger. The two direction buttons use `disabled` to show unavailable history. The document repeats the top clipping radius where required for composited iframe/webview rendering.
+`.artifact-frame` owns the border, curve, surface and broad shadow. Its `::before` paints the sharp rim and its `::after` paints a pointer-transparent masked inner highlight over document and titlebar. Background pages suppress the broad shadow while retaining the exterior rim. `.artifact-frame-clip > :is(iframe, webview)` fills the document area through the one-pixel padding track. `.artifact-frame-clip` clips the document and titlebar while the outer frame lets both shadows extend outward. `.artifact-title-bar` paints the lower band, `.artifact-title-bar .artifact-title` takes the remaining width and truncates, and `.artifact-bar-divider` separates navigation from the menu trigger. The two direction buttons use `disabled` to show unavailable history. The document repeats the top clipping radius where required for composited iframe/webview rendering.
 
 The artifact menu uses the same shared menu elements and placement as channel menus. Deletion uses the shared dialog outline below.
 
@@ -860,15 +857,17 @@ The reusable copy control is `button.copy-button[size="sm"][prompt]`, optionally
 ```html
 <div class="dialog-overlay">
   <dialog open>
+    <div class="dialog-content">
     <div class="dialog-alert" role="alertdialog">
       <h2>…</h2><p>…</p>
       <div class="dialog-actions"><button>Cancel</button><button intent="danger">…</button></div>
     </div>
+    </div>
   </dialog>
 </div>
 ```
 
-The dialog may contain ordinary content instead of an alert. Ambient selectors `:where(.dialog-overlay)`, `:where(dialog)`, and `:where(dialog:focus-visible)` define dimming, centering, panel chrome and container focus treatment. `:where(.dialog-alert)`, `:where(.dialog-alert h2)`, `:where(.dialog-alert p)`, and `:where(.dialog-actions)` define the shared confirmation interior. Keep the modal input boundary and focus behavior intact.
+The scrolling `.dialog-content` wrapper may contain ordinary content instead of an alert. Ambient selectors `:where(.dialog-overlay)`, `:where(dialog)`, and `:where(dialog:focus-visible)` define dimming, centering, panel chrome and container focus treatment. `:where(.dialog-alert)`, `:where(.dialog-alert h2)`, `:where(.dialog-alert p)`, and `:where(.dialog-actions)` define the shared confirmation interior. Keep the modal input boundary and focus behavior intact.
 
 Connection and authorization states reuse the dialog with `.system-modal`: an icon, heading and optional supporting paragraph. `.system-modal h2` and `.system-modal p:not(.tv-error)` set their hierarchy. Connecting and disconnected states use a spinning `tv-icon`; an error adds `.system-modal .server-url`. Authorization uses `form.system-modal.auth-form`. The field uses shared native-input styling; `.auth-form .auth-token` and `.auth-form .auth-submit` stretch the field and submit control. Rejection adds `aria-invalid="true"` and associates the shared error paragraph through `aria-describedby`; the alert communicates the failure. The rejected state is:
 
@@ -884,7 +883,7 @@ Connection and authorization states reuse the dialog with `.system-modal`: an ic
 
 The ordinary authorization state omits the invalid attribute, error association and error paragraph.
 
-Upgrade instructions use `.desktop-upgrade-gate > .dialog-overlay > dialog > .upgrade-gate-body`. The gate fills the halted page; the body scrolls within the panel. `.upgrade-gate-body h1`, `.upgrade-gate-body p`, `.upgrade-gate-body pre`, and `.upgrade-gate-body :last-child` restore local reading rhythm and command formatting.
+Upgrade instructions use `.desktop-upgrade-gate > .dialog-overlay > dialog > .dialog-content > .upgrade-gate-body`. The gate fills the halted page; the body scrolls within the panel. `.upgrade-gate-body h1`, `.upgrade-gate-body p`, `.upgrade-gate-body pre`, and `.upgrade-gate-body :last-child` restore local reading rhythm and command formatting.
 
 ### Standalone artifact error documents
 
@@ -901,7 +900,7 @@ Upgrade instructions use `.desktop-upgrade-gate > .dialog-overlay > dialog > .up
 
 ## Panels and surface edges
 
-Popovers, including menus and select option lists, and dialogs share a light inner border and dark outer outline. Artifact frames, the sidebar and selected tabs reuse this treatment. Ordinary buttons and text fields use a simple border. The catalog provides the corresponding component overrides. Decorative outlines must leave keyboard focus visible.
+Popovers, menus, select option lists, dialogs, artifact frames and the sidebar divider consume `--panel-edge-highlight` (a complete gradient) and `--panel-edge-shadow` (a complete sharp shadow). Set both to `none` to disable the decoration. Broad shadows are independent: `--artifact-frame-shadow` defaults to `var(--shadow-xl)` and either accepts `none` without erasing the rim. `--panel-border` defaults to `none`; frame and sidebar borders inherit it and accept explicit overrides. Ordinary buttons, text fields, separators and keyboard focus retain their own borders and outlines.
 
 ## Interaction feedback