@telepath-computer/television 0.1.74 → 0.1.76

package/dist/canonical/v1/styles.css

@@ -74,6 +74,15 @@ select {
   --text-xl: round(calc(var(--text-lg) * var(--text-scale)), 1px);
   --leading-base: 1.5;
 
+  /* Control height — single source of truth for buttons, segmented-controls,
+     inputs and any future control whose shape includes "horizontal pill".
+     Suffix names a size (md = default); add `--control-height-sm`,
+     `--control-height-lg` if/when those sizes appear. Setting the height
+     directly (vs. computing from padding + line-height) is what lets a
+     mixed row of text + icon-only chrome line up exactly. */
+  --control-height-sm: 24px;
+  --control-height-md: 28px;
+
   /* Spacing */
   --space-2: 2px;
   --space-4: 4px;
@@ -379,19 +388,30 @@ th {
    either light or dark surfaces. */
 input,
 textarea {
-  padding: 6px 10px;
   border: 0.5px solid var(--tint-300);
   border-radius: var(--radius-12);
   background: var(--tint-100);
   color: inherit;
   font: inherit;
+  box-sizing: border-box;
   transition:
     background 120ms ease,
     border-color 120ms ease,
     box-shadow 120ms ease;
 }
 
+/* Single-line input snaps to the shared control height so it lines up
+   with buttons in a chrome row. Padding goes horizontal-only since the
+   explicit height handles vertical centering via the line-box. */
+input {
+  height: var(--control-height-md);
+  padding: 0 10px;
+}
+
+/* Multi-line textarea stays intrinsic — height grows with content (or
+   max-height on a host) rather than locking to a control unit. */
 textarea {
+  padding: 6px 10px;
   resize: none;
 }
 
@@ -434,26 +454,53 @@ label.field > span {
   }
 }
 
+/* Button-only layout — placement of icon + label inside a single
+   button. Segmented-button doesn't share these (it's a flex row of
+   children, not a center-aligned label-and-icon stack).
+   `height: var(--control-height-md)` is explicit so a row of mixed
+   chrome (text button + icon-only button + segmented-control) lines up
+   without each variant having to tune its intrinsic content + padding
+   to match. Padding is purely horizontal — vertical centering is handled
+   by `align-items: center`. */
 button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-6);
-  padding: 4px 14px;
-  border: 0.5px solid var(--tint-200);
-  border-radius: var(--radius-12);
-  background: var(--color-surface);
-  color: inherit;
+  box-sizing: border-box;
+  height: var(--control-height-md);
+  /* 2px extra bottom padding compensates for the visual offset from
+     font ascender/descender asymmetry — `align-items: center` centers
+     the line-box but the glyph mass sits below center because the
+     ascender claims more vertical space than the descender. The
+     icon-only override resets padding to 0 since icons are already
+     symmetric. */
+  padding: 0 14px 2px;
   font: inherit;
   cursor: default;
+}
+
+/* Default chrome — shared between <button> and <segmented-control> so
+   the two stay in visual lockstep. Variant overrides (ghost, primary,
+   danger) and tone-dark / tone-light / disabled cascades live below.
+   The shared-with-segmented bits are intentional: a segmented control
+   is a chrome surface that looks like a single button containing two
+   click targets, so its host adopts the same fill, hairline, radius,
+   and shadow. */
+button,
+segmented-control {
+  background: var(--color-surface);
+  border: 0.5px solid var(--tint-200);
+  border-radius: var(--radius-12);
   box-shadow: var(--shadow-control);
+  color: inherit;
 }
 
-button:hover:not(:disabled) {
+button:not([material]):hover:not(:disabled) {
   background: color-mix(in srgb, var(--color-surface) 96%, black);
 }
 
-button:active:not(:disabled) {
+button:not([material]):active:not(:disabled) {
   background: color-mix(in srgb, var(--color-surface) 88%, black);
   box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.08);
 }
@@ -503,7 +550,7 @@ button[variant="ghost"] {
 /* Ghost is a chromeless overlay — at rest it's invisible and relies on
    the surface behind it. The overlay tokens cascade through `tone="dark"`
    (set on the button itself by the auto-tone watcher in
-   `elements/button.ts`, or inherited from a tone-sampled ancestor), so
+   `utils/button-tone.ts`, or inherited from a tone-sampled ancestor), so
    one rule covers light + dark backdrops. */
 button[variant="ghost"]:hover:not(:disabled) {
   background: var(--color-overlay-hover);
@@ -527,6 +574,81 @@ button[variant="ghost"][aria-expanded="true"]:hover:not(:disabled) {
   box-shadow: none;
 }
 
+/* Glass variant — translucent surface with backdrop blur. Shared between
+   <button variant="glass"> and <segmented-control variant="glass"> so a
+   chrome row of buttons + segmented controls reads as one surface
+   family. Self-contained per-variant chrome (bg + border + shadow + blur
+   + hover/active overlays) means no fighting with default-button rules
+   or tone-driven default fills.
+
+   No explicit `color` here — auto-tone (utils/button-tone.ts) writes
+   `tone="light"` or `tone="dark"` on the element after sampling its
+   actual backdrop. The materials.css `[tone="…"]` color rules then set
+   text color on the element directly (specificity 0,1,0), beating the
+   shared `button { color: inherit }` (0,0,1). An explicit `color:
+   inherit` here would be 0,1,1 and would defeat the tone-aware color. */
+button[variant="glass"],
+segmented-control[variant="glass"] {
+  background: transparent;
+  border: 0.5px solid color-mix(in srgb, var(--black) var(--alpha-100), transparent);
+  backdrop-filter: blur(20px) brightness(0.95) saturate(1.5);
+  -webkit-backdrop-filter: blur(20px) brightness(0.95) saturate(1.5);
+  box-shadow: none;
+}
+
+/* `background:` shorthand (not `background-image`) resets background-color
+   back to transparent — necessary because the default-button hover rule
+   `button:not([material]):hover` fires on glass too (glass has no
+   material) at equal specificity and would otherwise paint a 96% white
+   surface underneath this overlay. */
+button[variant="glass"]:hover:not(:disabled) {
+  background: linear-gradient(var(--color-overlay-hover), var(--color-overlay-hover));
+}
+
+button[variant="glass"]:active:not(:disabled) {
+  background: linear-gradient(var(--color-overlay-active), var(--color-overlay-active));
+}
+
+[tone="dark"] button[variant="glass"],
+[tone="dark"] segmented-control[variant="glass"] {
+  border-color: var(--tint-400);
+}
+
+/* Material composition with controls (option B in the design notes —
+   contained override rather than refactoring materials.css globally).
+   Material is a passive-surface primitive: it locks color, draws a
+   fixed-alpha hairline, and a default-variant `:hover` would replace
+   its background entirely. These overrides let `<button material="...">`
+   and `<segmented-control material="...">` compose:
+
+   - `color: inherit` so the tone-aware text cascade still applies
+     (material sets a fixed `--color-text` which doesn't flip on dark).
+   - `box-shadow: none` because both materials want a flat surface; the
+     default control shadow fights glass especially.
+   - hover/active paint via `background-image` (a flat linear-gradient)
+     so the material's `background-color` is preserved underneath.
+   - dark-tone bumps the hairline to `--tint-400` so the rim reads on
+     dark backdrops (material's locked black-alpha border vanishes
+     against tone-dark patches). */
+button[material],
+segmented-control[material] {
+  color: inherit;
+  box-shadow: none;
+}
+
+button[material]:hover:not(:disabled) {
+  background-image: linear-gradient(var(--color-overlay-hover), var(--color-overlay-hover));
+}
+
+button[material]:active:not(:disabled) {
+  background-image: linear-gradient(var(--color-overlay-active), var(--color-overlay-active));
+}
+
+[tone="dark"] button[material],
+[tone="dark"] segmented-control[material] {
+  border-color: var(--tint-400);
+}
+
 button:disabled {
   background: var(--tint-300);
   border-color: transparent;
@@ -537,18 +659,26 @@ button:disabled {
 /* Default-variant button on a dark surface — drop the chromed light fill,
    pick up a brighter white-tint than inputs (15% vs 8%) to read as raised
    rather than recessed, and replace the ineffective black drop shadow
-   with a top-edge inset highlight (macOS NSButton-on-dark convention). */
-[tone="dark"] button:not([variant]):not(:disabled) {
+   with a top-edge inset highlight (macOS NSButton-on-dark convention).
+   `:not([material])` opts the tone-driven default fill OUT when the
+   element has explicit `material` — material owns the surface in that
+   case, regardless of tone. */
+:where([tone="dark"]) button:not([variant]):not([material]):not(:disabled),
+:where([tone="dark"]) button[variant="default"]:not([material]):not(:disabled),
+:where([tone="dark"]) segmented-control:not([variant]):not([material]),
+:where([tone="dark"]) segmented-control[variant="default"]:not([material]) {
   background: var(--tint-200);
   border-color: var(--tint-300);
   box-shadow: inset 0 0.5px 0 var(--tint-300);
 }
 
-[tone="dark"] button:not([variant]):hover:not(:disabled) {
+:where([tone="dark"]) button:not([variant]):hover:not(:disabled),
+:where([tone="dark"]) button[variant="default"]:hover:not(:disabled) {
   background: var(--tint-300);
 }
 
-[tone="dark"] button:not([variant]):active:not(:disabled) {
+:where([tone="dark"]) button:not([variant]):active:not(:disabled),
+:where([tone="dark"]) button[variant="default"]:active:not(:disabled) {
   background: var(--tint-400);
   box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.20);
 }
@@ -558,39 +688,45 @@ button:disabled {
    one (e.g. a paper popover anchored inside dark chrome). Same
    specificity as the dark-tone rules above; source order makes the
    closer light-tone scope win for slotted descendants. */
-[tone="light"] button:not([variant]):not(:disabled) {
+:where([tone="light"]) button:not([variant]):not([material]):not(:disabled),
+:where([tone="light"]) button[variant="default"]:not([material]):not(:disabled),
+:where([tone="light"]) segmented-control:not([variant]):not([material]),
+:where([tone="light"]) segmented-control[variant="default"]:not([material]) {
   background: var(--color-surface);
   border-color: var(--tint-200);
   box-shadow: var(--shadow-control);
 }
 
-[tone="light"] button:not([variant]):hover:not(:disabled) {
+:where([tone="light"]) button:not([variant]):hover:not(:disabled) {
   background: color-mix(in srgb, var(--color-surface) 96%, black);
 }
 
-[tone="light"] button:not([variant]):active:not(:disabled) {
+:where([tone="light"]) button:not([variant]):active:not(:disabled) {
   background: color-mix(in srgb, var(--color-surface) 88%, black);
   box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.08);
 }
 
-button[size="sm"] {
-  min-height: 24px;
-  padding: var(--space-2) var(--space-8);
+/* Size opt-in: `size="sm"` swaps to the smaller control-height token.
+   Same applies to `<segmented-control size="sm">` so the host stretches
+   children correctly, and to `<button size="sm" icon-only>` so the
+   square footprint stays at the smaller control unit. The default
+   (md, 28px) is set on the base `<button>` rule above; only sm needs
+   an explicit override. */
+button[size="sm"],
+segmented-control[size="sm"] {
+  height: var(--control-height-sm);
 }
 
-button[size="md"] {
-  min-height: 32px;
-  padding: var(--space-6) var(--space-12);
+button[size="sm"][icon-only] {
+  width: var(--control-height-sm);
 }
 
-/* Square icon-only buttons. Sizing only — chrome is determined by the
-   variant (default = chromed pill, ghost = chromeless overlay). The
-   square footprint and zero padding stop a 24px SVG from being padded
-   out by the text-button defaults. */
+/* Square icon-only buttons. Width = control height so the footprint is
+   square at the same vertical size as a text-button sibling. Chrome is
+   determined by the variant (default = chromed pill, ghost = chromeless
+   overlay). */
 button[icon-only] {
-  width: 24px;
-  height: 24px;
-  min-height: 0;
+  width: var(--control-height-md);
   padding: 0;
 }