shelving 1.264.0 → 1.264.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.264.0",
+	"version": "1.264.2",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",

package/ui/README.md

@@ -27,7 +27,7 @@ The styling system lives in `style/` and has four moving parts: design tokens, t
 
 **Styling props.** The cross-cutting visual options are props, each backed by a helper in `style/` that maps the prop to a class. Colour and status move the tint anchor — `getColorClass()` and `getStatusClass()`; font size, weight, family, and case, plus text alignment, tint, and wrapping, all come from `getTypographyClass()`, which extends `ColorVariants` and composes `getColorClass()` so every typographic element also accepts `color` (use `getColorClass()` directly only for colour-without-typography, e.g. `<Icon>`); spacing, block-padding, inline-padding ("indent"), and gap from `getSpaceClass()`, `getPaddingClass()`, `getIndentClass()`, and `getGapClass()`; width constraints from `getWidthClass()`; flex layout from `getFlexClass()`; and opt-in scrolling from `getScrollClass()`. Each helper's page lists its exact prop values and what they set. A component opts into the props it wants by extending the matching `*Props` interfaces and composing the `getXxxClass(props)` calls.
 
-Each painting component also exposes its own theme hooks — a single tint hook (`--card-tint`) to recolour the whole component, plus per-property hooks (`--card-background`, `--card-radius`, …) for surgical overrides. Those are documented in each component's own **Styling** section (see `<Card>` for the precedent).
+Each painting component also exposes per-property theme hooks (`--card-background`, `--card-radius`, …) for surgical overrides. To recolour a component or a whole region, apply `color=` / `status=` — on it or an ancestor scope — rather than a per-component tint hook; components no longer set the tint anchor themselves. Those hooks are documented in each component's own **Styling** section (see `<Card>` for the precedent).
 
 ## Theming
 
@@ -50,7 +50,7 @@ Each base token lives in a themed module that documents the variables it defines
 - `space` · `width` — layout spacing and widths (`--space-*`, `--width-*`).
 - `radius` · `stroke` · `shadow` · `duration` — surface tokens (`--radius-*`, `--stroke-*`, `--shadow-*`, `--duration-*`).
 
-The **tint ladder** is the one exception that doesn't follow the override-a-variable pattern: its 21 steps are *recomputed* from a single anchor inside every tinted scope, so you move the anchor rather than overriding individual steps. See `TINT_CLASS` for the full theming guide, and each component's **Styling** section for its per-component hooks.
+The **tint ladder** is the one exception that doesn't follow the override-a-variable pattern: its 21 steps are *recomputed* from a single anchor inside every tinted scope, so you move the anchor (via `color=` / `status=`) rather than overriding individual steps. See `TINT_CLASS` for the full theming guide, and each component's **Styling** section for its per-property hooks.
 
 ## Finding your way around
 

package/ui/block/Blockquote.module.css

@@ -7,9 +7,6 @@
 @layer components {
 	.blockquote,
 	.prose blockquote {
-		/* Theme */
-		--tint-50: var(--blockquote-tint, inherit);
-
 		/* Box */
 		margin-block: var(--blockquote-space, var(--space-paragraph));
 		border-inline-start: var(--blockquote-border, var(--blockquote-stroke, var(--stroke-normal)) solid var(--tint-80));

package/ui/block/Card.d.ts

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import { type ClickableProps } from "../form/Clickable.js";
+import { type ClickableProps } from "../button/Clickable.js";
 import { type BlockVariants } from "../style/Block.js";
 import { type StatusVariants } from "../style/Status.js";
 import type { BlockElement } from "./Block.js";

package/ui/block/Card.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Clickable } from "../form/Clickable.js";
+import { Clickable } from "../button/Clickable.js";
 import { getBlockClass } from "../style/Block.js";
 import { getStatusClass } from "../style/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";

package/ui/block/Card.md

@@ -45,11 +45,10 @@ import { Card, Subheading } from "shelving/ui";
 
 ## Styling
 
-`Card` paints from the [tint ladder](/ui/TINT_CLASS); override these hooks at `:root` (or any ancestor scope) to retheme. Move `--card-tint` to recolour everything at once; reach for a per-property hook for a single surgical change.
+`Card` paints from the [tint ladder](/ui/TINT_CLASS); override these hooks at `:root` (or any ancestor scope) to retheme. Apply `color=` / `status=` (on the card or an ancestor scope) to recolour everything at once — surface, border, text, and hover shade re-derive together; reach for a per-property hook for a single surgical change.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--card-tint` | Tint anchor for the card scope — recolours surface, border, text and hover together | `inherit` (flows from `color=` / `status=` / parent) |
 | `--card-background` | Surface fill | `var(--tint-90)` |
 | `--card-hover-background` | Surface fill when a navigable card is hovered | `var(--tint-95)` |
 | `--card-color` | Text colour | `var(--tint-00)` |
@@ -71,9 +70,6 @@ import { Card, Subheading } from "shelving/ui";
   --card-shadow: var(--shadow-small);
   --card-radius: var(--radius-small);
 }
-
-/* Retint every card purple — surface, border, text and hover all follow. */
-:root {
-  --card-tint: var(--color-purple);
-}
 ```
+
+To recolour cards, apply `color=` / `status=` to the card (or a tinted ancestor scope) — e.g. `<Card color="purple">` — rather than a per-component tint hook.

package/ui/block/Card.module.css

@@ -19,9 +19,6 @@
 
 @layer components {
 	.card {
-		/* Theme */
-		--tint-50: var(--card-tint, inherit);
-
 		/* Box */
 		position: relative;
 		margin-inline: 0;

package/ui/block/Card.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from "react";
-import { Clickable, type ClickableProps } from "../form/Clickable.js";
+import { Clickable, type ClickableProps } from "../button/Clickable.js";
 import { type BlockVariants, getBlockClass } from "../style/Block.js";
 import { getStatusClass, type StatusVariants } from "../style/Status.js";
 import { getClass, getModuleClass } from "../util/css.js";

package/ui/block/Heading.md

@@ -44,7 +44,6 @@ import { Heading } from "shelving/ui";
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--heading-tint` | Tint anchor for the heading scope | `inherit` (flows from `color=` / parent) |
 | `--heading-color` | Text colour | `inherit` |
 | `--heading-space-before` | Top margin | `var(--space-section)` (2rem) |
 | `--heading-space` | Bottom margin | `var(--space-paragraph)` (16px) |

package/ui/block/Heading.module.css

@@ -6,9 +6,6 @@
 @layer components {
 	.heading,
 	.prose h2 {
-		/* Theme */
-		--tint-50: var(--heading-tint, inherit);
-
 		/* Box */
 		margin-block-start: var(--heading-space-before, var(--space-section));
 		margin-block-end: var(--heading-space, var(--space-paragraph));

package/ui/block/Image.d.ts

@@ -1,6 +1,6 @@
 import type { ReactElement } from "react";
-import { type SpaceVariants } from "../style/Space.js";
-import { type WidthVariants } from "../style/Width.js";
+import type { SpaceVariants } from "../style/Space.js";
+import type { WidthVariants } from "../style/Width.js";
 /**
  * Props for `Image` — an `src`, optional `alt` text, plus space and width variants.
  *
@@ -17,4 +17,4 @@ export interface ImageProps extends SpaceVariants, WidthVariants {
  * @example <Image src="/logo.png" alt="Logo" width="narrow" />
  * @see https://shelving.cc/ui/Image
  */
-export declare function Image({ src, alt, ...variants }: ImageProps): ReactElement;
+export declare function Image({ src, alt, ...props }: ImageProps): ReactElement;

package/ui/block/Image.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getSpaceClass } from "../style/Space.js";
-import { getWidthClass } from "../style/Width.js";
+import { getBlockClass } from "../style/Block.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import IMAGE_CSS from "./Image.module.css";
 const IMAGE_CLASS = getModuleClass(IMAGE_CSS, "image");
@@ -11,6 +10,7 @@ const IMAGE_CLASS = getModuleClass(IMAGE_CSS, "image");
  * @example <Image src="/logo.png" alt="Logo" width="narrow" />
  * @see https://shelving.cc/ui/Image
  */
-export function Image({ src, alt, ...variants }) {
-    return _jsx("img", { src: src, alt: alt, className: getClass(IMAGE_CLASS, getSpaceClass(variants), getWidthClass(variants)) });
+export function Image({ src, alt, ...props }) {
+    return (_jsx("img", { src: src, alt: alt, className: getClass(IMAGE_CLASS, //
+        getBlockClass(props)) }));
 }

package/ui/block/Image.module.css

@@ -4,9 +4,12 @@
 @layer components {
 	.image,
 	.prose img {
-		inline-size: var(--image-width, 100%);
+		/* Box */
+		border: var(--image-border, none);
+		border-radius: var(--image-radius, var(--radius-normal));
 		margin-block: var(--image-space, var(--space-paragraph));
 
+		/* Contents */
 		object-position: center center;
 		object-fit: cover; /* Don't distort when resized. */
 	}

package/ui/block/Image.tsx

@@ -1,6 +1,7 @@
 import type { ReactElement } from "react";
-import { getSpaceClass, type SpaceVariants } from "../style/Space.js";
-import { getWidthClass, type WidthVariants } from "../style/Width.js";
+import { getBlockClass } from "../style/Block.js";
+import type { SpaceVariants } from "../style/Space.js";
+import type { WidthVariants } from "../style/Width.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import IMAGE_CSS from "./Image.module.css";
 
@@ -23,6 +24,15 @@ export interface ImageProps extends SpaceVariants, WidthVariants {
  * @example <Image src="/logo.png" alt="Logo" width="narrow" />
  * @see https://shelving.cc/ui/Image
  */
-export function Image({ src, alt, ...variants }: ImageProps): ReactElement {
-	return <img src={src} alt={alt} className={getClass(IMAGE_CLASS, getSpaceClass(variants), getWidthClass(variants))} />;
+export function Image({ src, alt, ...props }: ImageProps): ReactElement {
+	return (
+		<img
+			src={src}
+			alt={alt}
+			className={getClass(
+				IMAGE_CLASS, //
+				getBlockClass(props),
+			)}
+		/>
+	);
 }

package/ui/block/Label.module.css

@@ -5,9 +5,6 @@
 
 @layer components {
 	.label {
-		/* Theme */
-		--tint-50: var(--label-tint, inherit);
-
 		/* Box */
 		margin-block: var(--label-space, var(--space-paragraph));
 

package/ui/block/List.md

@@ -31,11 +31,10 @@ import { List } from "shelving/ui";
 
 ## Styling
 
-`List` paints from the [tint ladder](/ui/TINT_CLASS) for its markers only; rebind `--list-tint` to recolour the scope, or reach for a per-property hook for a single change.
+`List` paints from the [tint ladder](/ui/TINT_CLASS) for its markers only; apply `color=` (on the list or an ancestor scope) to recolour the markers, or reach for a per-property hook for a single change.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--list-tint` | Tint anchor for the list scope | `inherit` (flows from `color=` / parent) |
 | `--list-space` | Outer block margin (top + bottom) | `var(--space-paragraph)` (16px) |
 | `--list-gap` | Space between items | `var(--space-xsmall)` |
 | `--list-indent` | Inline start padding (marker gutter) | `1.125em` unordered / `1.8em` ordered |

package/ui/block/List.module.css

@@ -9,9 +9,6 @@
 	.ordered,
 	.prose ul,
 	.prose ol {
-		/* Theme */
-		--tint-50: var(--list-tint, inherit);
-
 		/* Box */
 		margin-block: var(--list-space, var(--space-paragraph));
 

package/ui/block/Panel.md

@@ -31,11 +31,10 @@ import { Panel, Block, Title, Paragraph } from "shelving/ui";
 
 ## Styling
 
-`Panel` paints from the [tint ladder](/ui/TINT_CLASS); rebind `--panel-tint` to recolour the whole scope at once, or reach for a per-property hook for a single change.
+`Panel` paints from the [tint ladder](/ui/TINT_CLASS); apply `color=` / `status=` (on the panel or an ancestor scope) to recolour the whole scope at once — surface, border, and text re-derive together — or reach for a per-property hook for a single change.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--panel-tint` | Tint anchor for the panel scope — recolours surface, border, and text together | `inherit` (flows from `color=` / `status=` / parent) |
 | `--panel-background` | Surface fill | `var(--tint-90)` |
 | `--panel-color` | Text colour | `var(--tint-00)` |
 | `--panel-border` | Top/bottom border shorthand | `var(--panel-stroke) solid var(--tint-80)` |

package/ui/block/Panel.module.css

@@ -14,9 +14,6 @@
  */
 @layer components {
 	.panel {
-		/* Theme */
-		--tint-50: var(--panel-tint, inherit);
-
 		/* Box */
 		position: relative;
 		padding-block: var(--panel-padding, var(--space-section));

package/ui/block/Paragraph.md

@@ -31,11 +31,10 @@ import { Paragraph, Strong, Link } from "shelving/ui";
 
 ## Styling
 
-`Paragraph` exposes a single hook for its own block margin and rebinds the tint anchor for its scope; it paints no colour of its own, so it inherits the surrounding text colour.
+`Paragraph` exposes a single hook for its own block margin; it paints no colour of its own, so it inherits the surrounding text colour. Apply `color=` / `status=` to set the tint scope for any ladder-reading inline content inside it.
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--paragraph-tint` | Tint anchor for the paragraph scope | `inherit` (flows from `color=` / parent) |
 | `--paragraph-space` | Outer block margin (top + bottom) | `var(--space-paragraph)` (16px) |
 
 **Global tokens it reads:** `--space-paragraph`.

package/ui/block/Paragraph.module.css

@@ -4,9 +4,6 @@
 @layer components {
 	.prose p,
 	.paragraph {
-		/* Theme */
-		--tint-50: var(--paragraph-tint, inherit);
-
 		/* Box */
 		margin-block: var(--paragraph-space, var(--space-paragraph));
 	}

package/ui/block/Preformatted.module.css

@@ -10,9 +10,6 @@
 @layer components {
 	.preformatted,
 	.prose pre {
-		/* Theme */
-		--tint-50: var(--preformatted-tint, inherit);
-
 		/* Box */
 		position: relative;
 		margin-inline: 0;

package/ui/block/Subheading.md

@@ -39,7 +39,6 @@ import { Title, Heading, Subheading } from "shelving/ui";
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--subheading-tint` | Tint anchor for the subheading scope | `inherit` (flows from `color=` / parent) |
 | `--subheading-color` | Text colour | `inherit` |
 | `--subheading-space-before` | Top margin | `var(--space-section)` (2rem) |
 | `--subheading-space` | Bottom margin | `var(--space-paragraph)` (16px) |

package/ui/block/Subheading.module.css

@@ -6,9 +6,6 @@
 @layer components {
 	.subheading,
 	.prose :is(h3, h4, h5, h6) {
-		/* Theme */
-		--tint-50: var(--subheading-tint, inherit);
-
 		/* Box */
 		margin-block-start: var(--subheading-space-before, var(--space-section));
 		margin-block-end: var(--subheading-space, var(--space-paragraph));

package/ui/block/Title.md

@@ -38,7 +38,6 @@ import { Panel, Block, Title } from "shelving/ui";
 
 | Variable | Styles | Default |
 |---|---|---|
-| `--title-tint` | Tint anchor for the title scope | `inherit` (flows from `color=` / parent) |
 | `--title-color` | Text colour | `inherit` |
 | `--title-space-before` | Top margin | `var(--space-section)` (2rem) |
 | `--title-space` | Bottom margin | `var(--space-paragraph)` (16px) |

package/ui/block/Title.module.css

@@ -6,9 +6,6 @@
 @layer components {
 	.title,
 	.prose h1 {
-		/* Theme */
-		--tint-50: var(--title-tint, inherit);
-
 		/* Box */
 		margin-block-start: var(--title-space-before, var(--space-section));
 		margin-block-end: var(--title-space, var(--space-paragraph));

package/ui/block/Video.d.ts

@@ -1,7 +1,7 @@
-import { type MouseEvent, type ReactElement } from "react";
+import { type ReactElement } from "react";
 import type { SpaceVariants } from "../style/Space.js";
 import type { WidthVariants } from "../style/Width.js";
-import type { ChildProps, OptionalChildProps } from "../util/props.js";
+import type { OptionalChildProps } from "../util/props.js";
 /**
  * Props for `Video` — space and width variants plus optional `children`.
  *
@@ -9,68 +9,13 @@ import type { ChildProps, OptionalChildProps } from "../util/props.js";
  */
 export interface VideoProps extends SpaceVariants, WidthVariants, OptionalChildProps {
 }
-/**
- * Props for `VideoButtons` — `children` plus an optional `left` alignment flag.
- *
- * @see https://shelving.cc/ui/VideoButtonsProps
- */
-export interface VideoButtonsProps extends ChildProps {
-    left?: boolean;
-}
-/**
- * Props for `VideoButton` — `children` plus optional `title`, `onClick`, `danger`, and `disabled`.
- *
- * @see https://shelving.cc/ui/VideoButtonProps
- */
-export interface VideoButtonProps extends ChildProps {
-    title?: string | undefined;
-    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
-    danger?: boolean;
-    disabled?: boolean;
-}
 /**
  * Video container element.
  * - Has a black background and a 16:9 aspect ratio.
- * - Shows its contents (i.e. a `<video>` element or a `<TwilioRoom>`.
+ * - Shows its contents (i.e. a `<video>` element or a `<TwilioRoom>`).
  *
  * @kind component
  * @example <Video><video src="/clip.mp4" /></Video>
  * @see https://shelving.cc/ui/Video
  */
 export declare function Video({ children, ...props }: VideoProps): ReactElement;
-/**
- * Set of video buttons floating over a video.
- *
- * @example <VideoButtons><FullscreenVideoButton /></VideoButtons>
- * @see https://shelving.cc/ui/VideoButtons
- */
-export declare function VideoButtons({ children, ...variants }: VideoButtonsProps): import("react").JSX.Element;
-/**
- * Individual video button over a video — renders a `<button>`.
- *
- * @kind component
- * @example <VideoButton title="Play" onClick={play}><PlayIcon /></VideoButton>
- * @see https://shelving.cc/ui/VideoButton
- */
-export declare function VideoButton({ children, title, onClick, disabled, ...variants }: VideoButtonProps): ReactElement;
-declare const _fullscreenVideoButtonProps: unique symbol;
-/**
- * Props for `FullscreenVideoButton` — an empty marker interface (the component takes no props).
- *
- * @see https://shelving.cc/ui/FullscreenVideoButtonProps
- */
-export interface FullscreenVideoButtonProps {
-    readonly [_fullscreenVideoButtonProps]?: never;
-}
-/**
- * Button to toggle the surrounding video element in and out of fullscreen.
- * - Renders `null` when the browser does not support the Fullscreen API.
- * - Tracks fullscreen state so the icon and title flip between enter/exit.
- *
- * @returns Rendered fullscreen toggle button, or `null` when fullscreen is unavailable.
- * @kind component
- * @example <Video><video src="/clip.mp4" /><VideoButtons><FullscreenVideoButton /></VideoButtons></Video>
- * @see https://shelving.cc/ui/FullscreenVideoButton
- */
-export declare function FullscreenVideoButton(): ReactElement | null;
-export {};

package/ui/block/Video.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ArrowsPointingInIcon, ArrowsPointingOutIcon } from "@heroicons/react/24/solid";
-import { useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 import { getBlockClass } from "../style/Block.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import VIDEO_CSS from "./Video.module.css";
@@ -8,7 +7,7 @@ const VIDEO_CLASS = getModuleClass(VIDEO_CSS, "video");
 /**
  * Video container element.
  * - Has a black background and a 16:9 aspect ratio.
- * - Shows its contents (i.e. a `<video>` element or a `<TwilioRoom>`.
+ * - Shows its contents (i.e. a `<video>` element or a `<TwilioRoom>`).
  *
  * @kind component
  * @example <Video><video src="/clip.mp4" /></Video>
@@ -19,52 +18,3 @@ export function Video({ children, ...props }) {
     return (_jsx("figure", { ref: ref, className: getClass(VIDEO_CLASS, //
         getBlockClass(props)), children: children }));
 }
-/**
- * Set of video buttons floating over a video.
- *
- * @example <VideoButtons><FullscreenVideoButton /></VideoButtons>
- * @see https://shelving.cc/ui/VideoButtons
- */
-export function VideoButtons({ children, ...variants }) {
-    return _jsx("div", { className: getModuleClass(VIDEO_CSS, "buttons", variants), children: children });
-}
-/**
- * Individual video button over a video — renders a `<button>`.
- *
- * @kind component
- * @example <VideoButton title="Play" onClick={play}><PlayIcon /></VideoButton>
- * @see https://shelving.cc/ui/VideoButton
- */
-export function VideoButton({ children, title, onClick, disabled, ...variants }) {
-    return (_jsx("button", { type: "button", onClick: onClick, className: getModuleClass(VIDEO_CSS, "button", variants), title: title, disabled: disabled, children: children }));
-}
-/**
- * Button to toggle the surrounding video element in and out of fullscreen.
- * - Renders `null` when the browser does not support the Fullscreen API.
- * - Tracks fullscreen state so the icon and title flip between enter/exit.
- *
- * @returns Rendered fullscreen toggle button, or `null` when fullscreen is unavailable.
- * @kind component
- * @example <Video><video src="/clip.mp4" /><VideoButtons><FullscreenVideoButton /></VideoButtons></Video>
- * @see https://shelving.cc/ui/FullscreenVideoButton
- */
-export function FullscreenVideoButton() {
-    const [isFull, setFull] = useState(() => typeof document !== "undefined" && !!document.fullscreenElement);
-    useEffect(() => {
-        const onChange = () => setFull(!!document.fullscreenElement);
-        document.addEventListener("fullscreenchange", onChange);
-        return () => document.removeEventListener("fullscreenchange", onChange);
-    });
-    if (!document.fullscreenEnabled)
-        return null;
-    return (_jsx(VideoButton, { title: isFull ? "Exit full screen mode" : "Enter full screen mode", onClick: ({ currentTarget }) => {
-            if (document.fullscreenElement) {
-                document.exitFullscreen();
-            }
-            else {
-                const parent = currentTarget.closest("figure, video");
-                if (parent)
-                    parent.requestFullscreen();
-            }
-        }, children: isFull ? _jsx(ArrowsPointingInIcon, {}) : _jsx(ArrowsPointingOutIcon, {}) }));
-}

package/ui/block/Video.module.css

@@ -12,7 +12,7 @@
 		/* Box */
 		aspect-ratio: 16 / 9;
 		margin-block: var(--video-space, var(--space-paragraph));
-		border: var(--video-border, var(--stroke-normal) solid black);
+		border: var(--video-border, none);
 		border-radius: var(--video-radius, var(--radius-normal));
 		padding: var(--video-padding, var(--space-normal));
 
@@ -35,54 +35,4 @@
 			border-radius: 0;
 		}
 	}
-
-	.buttons {
-		position: absolute;
-		top: var(--video-buttons-offset-y, var(--space-normal));
-		right: var(--video-buttons-offset-x, var(--space-normal));
-		display: flex;
-		gap: var(--video-buttons-gap, var(--space-small));
-
-		&.left {
-			right: auto;
-			left: var(--video-buttons-offset-x, var(--space-normal));
-		}
-	}
-
-	.button {
-		/* Box */
-		display: block;
-		border: var(--video-button-border, var(--stroke-normal) solid black);
-		border-radius: var(--video-button-radius, 100rem);
-		padding-inline: var(--video-button-padding-x, var(--space-xsmall));
-
-		/* Style */
-		color: var(--video-button-text, white);
-		background: var(--video-button-bg, black);
-		transition: var(--video-button-transition, all var(--duration-fast));
-		outline: var(--video-button-focus-border, var(--stroke-focus) solid var(--color-focus));
-		outline-offset: calc(0px - var(--stroke-normal));
-		box-shadow: var(--video-button-shadow, var(--shadow-normal));
-		cursor: pointer;
-
-		/* Pseudo-classes */
-		&:disabled,
-		&:where(a:not(:any-link)) {
-			opacity: var(--video-button-disabled-opacity, 0.5);
-			cursor: default;
-		}
-		&:enabled:hover,
-		&:any-link:hover,
-		&:focus:not(:focus-visible) {
-			background: color-mix(in oklch, white 85%, transparent);
-		}
-	}
-}
-
-@layer overrides {
-	.button {
-		&:not(:focus-visible) {
-			outline-color: transparent;
-		}
-	}
 }