@rvx/ui 0.3.8 → 0.4.0

package/dist/theme.module.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../src/theme/base.scss","../src/theme/common.scss","../src/theme/components/breadcrumbs.scss","../src/theme/components/button.scss","../src/theme/components/card.scss","../src/theme/components/checkbox.scss","../src/theme/components/collapse.scss","../src/theme/components/column.scss","../src/theme/components/control-group.scss","../src/theme/components/dialog.scss","../src/theme/components/dropdown.scss","../src/theme/components/error.scss","../src/theme/components/flex-space.scss","../src/theme/components/heading.scss","../src/theme/components/label.scss","../src/theme/components/link.scss","../src/theme/components/nav-list.scss","../src/theme/components/notifications.scss","../src/theme/components/page.scss","../src/theme/components/placeholder.scss","../src/theme/components/popover.scss","../src/theme/components/radio-buttons.scss","../src/theme/components/row.scss","../src/theme/components/scroll-view.scss","../src/theme/components/secondary.scss","../src/theme/components/separated.scss","../src/theme/components/slider.scss","../src/theme/components/tabs.scss","../src/theme/components/text-input.scss","../src/theme/components/text.scss","../src/theme/components/value.scss"],"names":[],"mappings":"AASA;EACC;EACA;EACA;EAEA;ECcA;EACA;EACA;EACA;EDbA;EACA;EACA;EACA;ECOA;EACA;EACA;EACA;EDPA;EACA;ECGA;EACA;EACA;EACA;EDHA;EACA;EACA;EACA;EACA;ECJA;EACA;EACA;EACA;EDIA;EAEA;EAEA;EAEA;EAEA;EACA;EAEA;EACA;EAEA;;;ACtCA;EANE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;ADoFH;EACC;EACA;EAEA;EAEA;;AACA;EAPD;IAQE;;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AC5GA;EANE;;AAQD;EAFD;IANE;IAUA;;;ACNH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;ADzBA;EANE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AEoGH;EACC;EACA;EACA;EACA;EAEA;EAEA;EFxFA,eACC;EAED,gBACC;EEuFD;EACA;;AAGA;EACC;;AAGD;EACC;EACA;;;AAKD;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAKH;AAAA;EAEC;;;AFvJA;EANE;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAUA;;;AGUH;EACC;EACA;EACA;EACA;;AAEA;EHIA,eACC;EAED,gBACC;;;AGFD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;ACrCF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AC3BD;EACC;EACA;EACA;EACA;;;AAGD;EACC,YACC;;;AAKF;EACC;IAAO;;EACP;IAAM;;EACN;IAAM;;EACN;IAAK;;;AAGN;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC,YACC;;AAIF;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC,YACC;;AAKF;EACC;EACA;EACA;;;AC9DF;EACC;EACA;;AAEA;EACC;;AAMD;EACC;;AAGD;EACC;;AAMD;EACC;;;AAKD;EACC;;AACA;EACC;;AAGD;ENDD,eACC;EAED,gBACC;;;AMTD;EACC;;AACA;EACC;;AAGD;ENDD,eACC;EAED,gBACC;;;AMTD;EACC;;AACA;EACC;;AAGD;ENDD,eACC;EAED,gBACC;;;AOtCF;EACC;EACA;EACA;EACA;;AAEA;EACC;;;AAIF;EACC;;AACA;EACC;EACA;;AAED;EACC;EACA;;AAED;EACC;EACA;;AAED;EACC;EACA;;;AAIF;EACC;;AACA;EACC;EACA;;AAED;EACC;EACA;;AAED;EACC;EACA;;AAED;EACC;EACA;;;AC9CF;EACC;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAGD;EACC;;AACA;EACC;;;AAIF;EACC;EACA;;AACA;EACC;;;AAIF;EACC;IACC;;;AAIF;EACC;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EAEA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;ER3BC,eACC;EAED,gBACC;;;ASrCF;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;ETMA,eACC;EAED,gBACC;ESRD;EACA;;AAEA;EACC;;;ATxBD;EANE;;AAQD;EAFD;IANE;IAUA;;;AUNH;EACC;;;ACTD;EACC;EACA;EACA;;;ACHD;EACC;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;;;AZ1BA;EANE;;AAQD;EAFD;IANE;IAUA;;;AaNH;EACC;EACA;EAEA;EACA;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;ACpBF;EACC;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AdLD;EANE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;Ae0BH;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;Ef3BA,eACC;EAED,gBACC;Ee0BD;;AAGA;EACC;EACA;;AAGD;EAEC;EACA;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;;Af9EA;EANE;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAUA;;;AgBWH;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAEA;EhBhBA,eACC;EAED,gBACC;;;AgBkBD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;ACzDF;EACC,eACC;EAED,gBACC;EAGD;EACA;EACA;;;AAGD;EACC;;AAEA;EACC;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;ACxCD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;ACvBD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EAEA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;AAEA;EnBZA,eACC;EAED,gBACC;;;AoBtCF;EACC;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AChCD;EACC;EACA;EACA;;;AAIA;EACC;EACA;;AACA;EACC;EACA;;AAGD;ErBkBD,eACC;EAED,gBACC;;;AqB9BD;EACC;EACA;;AACA;EACC;EACA;;AAGD;ErBkBD,eACC;EAED,gBACC;;;AqB9BD;EACC;EACA;;AACA;EACC;EACA;;AAGD;ErBkBD,eACC;EAED,gBACC;;;AA5BD;EANE;EAAA;;AAQD;EAFD;IANE;IAAA;IAUA;;;AsBFH;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;ACvDD;EACC;;;ACDD;EACC;EACA;;AAEA;EACC;;AAED;EACC;;;AAIF;EACC;EACA;;AAEA;EACC;;AAED;EACC;;;ACpBF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;;AzBAF;EANE;EAAA;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;A0BcH;EACC;EACA;EACA;;;AAGD;EACC,gBACC;;;AAIF;EACC;EACA;EACA;EACA;EAEA;EACA;EAEA,eACC;EAED,gBACC;EAGD;EACA;EACA;EACA;EAEA;EACA;;AAGA;EAEC;EACA;;AAED;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;E1BpDC,eACC;EAED,gBACC;;;AA5BD;EANE;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;A2BMH;EACC;EACA;EACA;EAEA;EAEA;E3BOA,eACC;EAED,gBACC;E2BTD;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AC/CD;EACC;;AAEA;EAEC;EACA;EACA;EACA;;;ACRF;EACC","file":"theme.module.css"}

package/src/common/theme-test.tsx

@@ -1,18 +0,0 @@
-import { THEME, Theme } from "./theme.js";
-
-/**
- * Get a class name from the current theme.
- *
- * @throws An error if the current theme doesn't support the specified key.
- */
-export function themeClass(key: keyof Theme): string {
-	const theme = THEME.current;
-	if (!theme) {
-		throw new Error("theme is not available in the current context");
-	}
-	const value = theme[key];
-	if (value === undefined) {
-		throw new Error(`${key} is not supported by the current theme`);
-	}
-	return value;
-}

package/src/components/checkbox-test.tsx

@@ -1,35 +0,0 @@
-import { ENV } from "rvx";
-import { themeClass } from "../common/theme-test.js";
-
-function assertCheckbox(checkbox: Element): asserts checkbox is HTMLElement {
-	if (!checkbox.matches(`.${themeClass("checkbox_label")}`)) {
-		throw new Error("checkbox must be a checkbox root element.");
-	}
-}
-
-function getInput(checkbox: HTMLElement): HTMLInputElement {
-	return checkbox.querySelector("input")!;
-}
-
-export function isCheckboxChecked(checkbox: Element): boolean | undefined {
-	assertCheckbox(checkbox);
-	const input = getInput(checkbox);
-	return input.indeterminate ? undefined : input.checked;
-}
-
-export function toggleCheckbox(checkbox: Element, checked?: boolean): void {
-	assertCheckbox(checkbox);
-	const input = getInput(checkbox);
-	if (input.disabled) {
-		return;
-	}
-	checked ??= !input.checked;
-	input.indeterminate = false;
-	input.checked = checked;
-	input.dispatchEvent(new ENV.current.CustomEvent("input"));
-}
-
-export function getCheckboxContent(checkbox: Element): HTMLElement {
-	assertCheckbox(checkbox);
-	return checkbox.querySelector(`.${themeClass("checkbox_content")}`) as HTMLElement;
-}

package/src/components/collapse-test.tsx

@@ -1,23 +0,0 @@
-import { themeClass } from "../test.js";
-
-function assertCollapse(collapse: Element): asserts collapse is HTMLDivElement {
-	if (!collapse.matches(`.${themeClass("collapse")}`)) {
-		throw new Error("collapse must be a collapse root element.");
-	}
-}
-
-/**
- * Get the content element of a collapse.
- */
-export function getCollapseContent(collapse: Element): HTMLDivElement {
-	assertCollapse(collapse);
-	return collapse.querySelector<HTMLDivElement>(`.${themeClass("collapse_content")}`)!;
-}
-
-/**
- * Check if a collapse is visible.
- */
-export function isCollapseVisible(collapse: Element): boolean {
-	assertCollapse(collapse);
-	return !collapse.hasAttribute("inert");
-}

package/src/test.tsx

@@ -1,3 +0,0 @@
-export * from "./common/theme-test.js";
-export * from "./components/checkbox-test.js";
-export * from "./components/collapse-test.js";

package/src/theme/base.scss

@@ -1,121 +0,0 @@
-@use "sass:math";
-@use "common";
-
-$root-size: 14px;
-
-@function px($value) {
-	@return math.div($value * 1px, $root-size) * 1rem;
-}
-
-:root {
-	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-	font-size: #{math.div(1rem, 16px) * $root-size};
-	line-height: 1;
-
-	accent-color: var(--accent);
-
-	@include common.define-quad(page-pad, px(32), px(32));
-
-	--content-column-gap: #{px(24)};
-	--content-row-gap: #{px(24)};
-	--content-radius: #{px(8)};
-	--content-border: #{px(2)};
-	@include common.define-quad(content-pad, px(16), px(16));
-
-	--group-column-gap: #{px(16)};
-	--group-row-gap: #{px(16)};
-	@include common.define-quad(group-pad, px(16), px(16));
-
-	--control-column-gap: #{px(8)};
-	--control-row-gap: #{px(8)};
-	--control-radius: #{px(5)};
-	--control-border: #{px(2)};
-	--control-disabled: opacity(.5);
-	@include common.define-quad(control-pad, px(7), px(8));
-
-	--input-extension: #{px(4)};
-
-	--separator: #{px(2)};
-
-	--focus-outline-offset: #{px(2)};
-
-	--overflow-safe-area: #{px(4)};
-
-	--line-gap: #{px(6)};
-	--space-gap: #{px(6)};
-
-	--layout-transition: .15s ease;
-	--color-transition: .1s ease;
-
-	--layout-transition-ms: 150;
-}
-
-@include common.theme((
-	bg: (
-		dark: rgb(24, 24, 24),
-		light: rgb(247, 247, 247),
-	),
-	bg-alt: (
-		dark: rgb(32, 32, 32),
-		light: rgb(255, 255, 255),
-	),
-	accent: (
-		dark: rgb(64, 160, 255),
-		light: rgb(0, 127, 255),
-	),
-	fg: (
-		dark: white,
-		light: black,
-	),
-	focus-outline: (
-		dark: var(--control-border) dashed var(--accent),
-		light: var(--control-border) dashed var(--accent),
-	),
-	separator-color: (
-		dark: rgb(40, 40, 40),
-		light: rgba(200, 200, 200, 0.3),
-	),
-	selection-bg: (
-		dark: rgba(64, 160, 255, 0.5),
-		light: rgba(0, 127, 255, 0.3),
-	),
-	overlay-backdrop: (
-		dark: rgba(24, 24, 24, .8),
-		light: rgba(245, 245, 245, .7),
-	),
-	overlay-shadow: (
-		dark: 0 0 #{px(12)} rgba(0, 0, 0, .3),
-		light: 0 0 #{px(12)} rgba(128, 128, 128, .2),
-	),
-	content-shadow: (
-		dark: 0 0 #{px(12)} rgba(0, 0, 0, .3),
-		light: 0 0 #{px(12)} rgba(128, 128, 128, .2),
-	),
-	control-shadow: (
-		dark: 0 0 #{px(3)} rgba(0, 0, 0, 0.5),
-		light: 0 0 #{px(2)} rgba(128, 128, 128, .2),
-	),
-));
-
-body {
-	background-color: var(--bg);
-	--parent-bg: var(--bg);
-
-	color: var(--fg);
-
-	text-wrap: balance;
-	@supports (text-wrap: pretty) {
-		text-wrap: pretty;
-	}
-}
-
-* {
-	box-sizing: border-box;
-	--space-scale: 1;
-	--space-above: unset;
-	--space-below: unset;
-}
-
-::selection {
-	background-color: var(--selection-bg);
-}

package/src/theme/common.scss

@@ -1,42 +0,0 @@
-@use "sass:map";
-
-@mixin set-theme-vars($defs, $target) {
-	@each $name, $targets in $defs {
-		@if map.has-key($targets, $target) {
-			--#{$name}: #{map.get($targets, $target)};
-		}
-	}
-}
-
-@mixin theme($defs) {
-	:root {
-		@include set-theme-vars($defs, light);
-		@media (prefers-color-scheme: dark) {
-			@include set-theme-vars($defs, dark);
-			color-scheme: dark;
-		}
-
-		@media (prefers-contrast: more) {
-			@include set-theme-vars($defs, light-hc);
-			@media (prefers-color-scheme: dark) {
-				@include set-theme-vars($defs, dark-hc);
-			}
-		}
-	}
-}
-
-@mixin define-quad($name, $block-start, $inline-start: $block-start, $block-end: $block-start, $inline-end: $inline-start) {
-	--#{$name}-block-start: #{$block-start};
-	--#{$name}-inline-start: #{$inline-start};
-	--#{$name}-block-end: #{$block-end};
-	--#{$name}-inline-end: #{$inline-end};
-}
-
-@mixin padding($name) {
-	padding-block:
-		var(--#{$name}-block-start)
-		var(--#{$name}-block-end);
-	padding-inline:
-		var(--#{$name}-inline-start)
-		var(--#{$name}-inline-end);
-}

package/src/theme/components/button.scss

@@ -1,164 +0,0 @@
-@use "../common";
-
-@include common.theme((
-	button-default-bg: (
-		dark: rgb(72, 72, 72),
-		light: rgb(208, 208, 208),
-	),
-	button-default-bg-hover: (
-		dark: rgb(100, 100, 100),
-		light: rgb(192, 192, 192),
-	),
-	button-default-fg: (
-		dark: white,
-		light: black,
-	),
-
-	button-primary-bg: (
-		dark: rgb(64, 160, 255),
-		light: rgb(0, 127, 255),
-	),
-	button-primary-bg-hover: (
-		dark: rgb(112, 184, 255),
-		light: rgb(64, 160, 255),
-	),
-	button-primary-fg: (
-		dark: black,
-		light: white,
-	),
-	button-primary-focus: (
-		dark: rgb(200, 241, 255),
-		light: rgb(0, 56, 112),
-	),
-
-	button-success-bg: (
-		dark: rgb(64, 255, 64),
-		light: rgb(0, 255, 0),
-	),
-	button-success-bg-hover: (
-		dark: rgb(160, 255, 160),
-		light: rgb(130, 255, 130),
-	),
-	button-success-fg: (
-		dark: black,
-		light: black,
-	),
-	button-success-focus: (
-		dark: rgb(224, 255, 224),
-		light: rgb(0, 160, 0),
-	),
-
-	button-warning-bg: (
-		dark: rgb(255, 200, 0),
-		light: rgb(255, 200, 0),
-	),
-	button-warning-bg-hover: (
-		dark: rgb(255, 224, 112),
-		light: rgb(255, 224, 112),
-	),
-	button-warning-fg: (
-		dark: black,
-		light: black,
-	),
-	button-warning-focus: (
-		dark: rgb(255, 243, 200),
-		light: rgb(150, 117, 0),
-	),
-
-	button-danger-bg: (
-		dark: rgb(255, 40, 40),
-		light: rgb(255, 0, 0),
-	),
-	button-danger-bg-hover: (
-		dark: rgb(255, 100, 100),
-		light: rgb(255, 80, 80),
-	),
-	button-danger-fg: (
-		dark: white,
-		light: white,
-	),
-	button-danger-focus: (
-		dark: rgb(255, 200, 214),
-		light: rgb(112, 0, 0),
-	),
-
-	button-input-bg: (
-		dark: rgb(36, 36, 36),
-		light: rgb(250, 250, 250),
-	),
-	button-input-bg-hover: (
-		dark: rgb(64, 64, 64),
-		light: rgb(230, 230, 230),
-	),
-	button-input-fg: (
-		dark: white,
-		light: black,
-	),
-	button-input-border: (
-		dark: rgb(54, 54, 54),
-		light: rgb(220, 220, 220),
-	),
-
-	button-item-bg: (
-		dark: rgb(48, 48, 48),
-		light: rgb(235, 235, 235),
-	),
-	button-item-bg-hover: (
-		dark: rgb(64, 64, 64),
-		light: rgb(215, 215, 215),
-	),
-	button-item-fg: (
-		dark: white,
-		light: black,
-	),
-));
-
-.button {
-	font-family: inherit;
-	font-size: inherit;
-	font-weight: 600;
-	line-height: 1;
-
-	cursor: pointer;
-
-	outline: none;
-	@include common.padding(control-pad);
-
-	border-radius: var(--control-radius);
-	transition: var(--color-transition) background-color,
-		var(--color-transition) border-color;
-
-	&:not(.button_text) {
-		box-shadow: var(--control-shadow);
-	}
-
-	&[disabled] {
-		cursor: default;
-		filter: var(--control-disabled);
-	}
-}
-
-@each $variant in (default, primary, success, warning, danger, input, item) {
-	.button_#{$variant} {
-		background-color: var(--button-#{$variant}-bg);
-		color: var(--button-#{$variant}-fg);
-		border: var(--button-#{$variant}-border, transparent) solid var(--control-border);
-
-		&:hover:not(:active):not([disabled]) {
-			background-color: var(--button-#{$variant}-bg-hover);
-		}
-
-		&:focus-visible {
-			border-color: var(--button-#{$variant}-focus, var(--accent));
-		}
-
-		&:active {
-			background-color: var(--button-#{$variant}-bg-active, var(--button-#{$variant}-bg));
-		}
-	}
-}
-
-.button_input,
-.button_item {
-	text-align: left;
-}

package/src/theme/components/card.scss

@@ -1,41 +0,0 @@
-@use "../common";
-
-@include common.theme((
-	card-default-border: (
-		dark: rgb(36, 36, 36),
-		light: rgb(216, 216, 216),
-	),
-	card-info-border: (
-		dark: rgb(64, 160, 255),
-		light: rgb(0, 127, 255),
-	),
-	card-success-border: (
-		dark: rgb(64, 255, 64),
-		light: rgb(0, 255, 0),
-	),
-	card-warning-border: (
-		dark: rgb(255, 200, 0),
-		light: rgb(255, 200, 0),
-	),
-	card-danger-border: (
-		dark: rgb(255, 64, 64),
-		light: rgb(255, 0, 0),
-	),
-));
-
-.card {
-	box-shadow: var(--content-shadow);
-	border-radius: var(--content-radius);
-	background-color: var(--bg-alt);
-	--parent-bg: var(--bg-alt);
-
-	&:not(.card_raw) {
-		@include common.padding(content-pad);
-	}
-}
-
-@each $name in (default, info, success, warning, danger) {
-	.card_#{$name} {
-		border: var(--content-border) solid var(--card-#{$name}-border);
-	}
-}

package/src/theme/components/dialog.scss

@@ -1,65 +0,0 @@
-@use "../common";
-
-.dialog_container {
-	position: fixed;
-	inset: 0;
-
-	background-color: var(--overlay-backdrop);
-
-	display: grid;
-	grid-template-columns: 1fr minmax(auto, var(--dialog-inline-size)) 1fr;
-	grid-template-rows: 5fr minmax(auto, var(--dialog-block-size)) 7fr;
-
-	overflow: auto;
-
-	transition: opacity var(--layout-transition);
-	opacity: 0;
-}
-
-.dialog_fadein {
-	opacity: 1;
-	.dialog_body {
-		transform: scale(1);
-	}
-}
-
-.dialog_fadeout {
-	pointer-events: none;
-	opacity: 0;
-	.dialog_body {
-		transform: scale(.9);
-	}
-}
-
-@media (prefers-reduced-motion) {
-	.dialog_body.dialog_body {
-		transform: unset;
-	}
-}
-
-.dialog_body {
-	grid-row: 2 / 3;
-	grid-column: 2 / 3;
-
-	transform: scale(.9);
-	transition: transform var(--layout-transition);
-
-	background-color: var(--bg-alt);
-	--parent-bg: var(--bg-alt);
-
-	box-shadow: var(--overlay-shadow);
-	border-radius: var(--content-radius);
-
-	border: var(--content-border) solid var(--card-default-border);
-}
-
-.dialog_scroll_view {
-	border-block-start: var(--content-border) solid var(--card-default-border);
-	border-block-end: var(--content-border) solid var(--card-default-border);
-	margin-inline-start: calc(var(--content-pad-inline-start) * -1 + var(--content-border));
-	margin-inline-end: calc(var(--content-pad-inline-end) * -1 + var(--content-border));
-}
-
-.dialog_scroll_view_content {
-	@include common.padding(content-pad);
-}

package/src/theme/components/error.scss

@@ -1,12 +0,0 @@
-@use "../common";
-
-@include common.theme((
-	error-message-fg: (
-		dark: rgb(255, 64, 64),
-		light: rgb(212, 0, 0),
-	),
-));
-
-.error_message {
-	color: var(--error-message-fg);
-}

package/src/theme/components/nav-list.scss

@@ -1,91 +0,0 @@
-@use "../common";
-
-@include common.theme((
-	nav-list-item-bg: (
-		dark: transparent,
-		light: transparent,
-	),
-	nav-list-item-bg-hover: (
-		dark: rgba(255, 255, 255, 0.1),
-		light: rgba(0, 0, 0, 0.075),
-	),
-	nav-list-item-bg-active: (
-		dark: rgba(255, 255, 255, 0.08),
-		light: rgba(0, 0, 0, 0.125),
-	),
-	nav-list-item-bg-current: (
-		dark: rgba(255, 255, 255, 0.1),
-		light: rgba(0, 0, 0, 0.125),
-	),
-	nav-list-item-fg: (
-		dark: rgb(172, 172, 172),
-		light: rgb(72, 72, 72),
-	),
-	nav-list-item-fg-hover: (
-		dark: var(--fg),
-		light: var(--fg),
-	),
-	nav-list-item-fg-active: (
-		dark: var(--fg),
-		light: var(--fg),
-	),
-	nav-list-item-fg-current: (
-		dark: var(--fg),
-		light: var(--fg),
-	),
-	nav-list-item-border: (
-		dark: transparent,
-		light: transparent,
-	),
-));
-
-.nav_list {
-	display: flex;
-	flex-direction: column;
-	position: relative;
-	z-index: 0;
-}
-
-.nav_list_item {
-	font-family: inherit;
-	font-size: inherit;
-	font-weight: 600;
-	line-height: 1;
-	text-align: left;
-
-	background-color: var(--nav-list-item-bg);
-	color: var(--nav-list-item-fg);
-	border: var(--nav-list-item-border) solid var(--control-border);
-	border-radius: var(--control-radius);
-
-	cursor: pointer;
-
-	outline: none;
-	@include common.padding(control-pad);
-
-	transition: var(--color-transition) background-color,
-		var(--color-transition) border-color;
-
-	&[disabled] {
-		cursor: default;
-		filter: var(--control-disabled);
-	}
-
-	&:hover:not(:active):not([disabled]),
-	&:focus-visible {
-		color: var(--nav-list-item-fg-hover);
-		background-color: var(--nav-list-item-bg-hover);
-	}
-
-	&:active {
-		color: var(--nav-list-item-fg-active);
-		background-color: var(--nav-list-item-bg-active);
-	}
-}
-
-.nav_list_item_current {
-	color: var(--nav-list-item-fg-current);
-	background-color: var(--nav-list-item-bg-current);
-	box-shadow: var(--control-shadow);
-	z-index: 1;
-}

package/src/theme/components/notifications.scss

@@ -1,61 +0,0 @@
-@use "../common";
-
-// TODO: Maybe just use cards with extra marker class for optional style distinction.
-@include common.theme((
-	notification-default-border: (
-		dark: rgb(48, 48, 48),
-		light: rgb(200, 200, 200),
-	),
-	notification-info-border: (
-		dark: rgb(64, 160, 255),
-		light: rgb(0, 127, 255),
-	),
-	notification-success-border: (
-		dark: rgb(64, 255, 64),
-		light: rgb(0, 255, 0),
-	),
-	notification-warning-border: (
-		dark: rgb(255, 200, 0),
-		light: rgb(255, 200, 0),
-	),
-	notification-danger-border: (
-		dark: rgb(255, 64, 64),
-		light: rgb(255, 0, 0),
-	),
-));
-
-.notification_host {
-	--overflow-safe-area: .5rem;
-	display: grid;
-	grid-template-columns: 1fr minmax(auto, var(--notification-inline-size)) 0;
-	grid-template-rows: 1fr auto 0;
-	overflow: auto;
-
-	position: fixed;
-	inset: 0;
-	pointer-events: none;
-	z-index: 2;
-	padding: 1rem;
-}
-
-.notification_area {
-	grid-area: 2 / 2;
-}
-
-.notification {
-	pointer-events: all;
-	box-shadow: var(--content-shadow);
-	border-radius: var(--content-radius);
-	background-color: var(--bg);
-	--parent-bg: var(--bg);
-
-	&:not(.notification_raw) {
-		@include common.padding(content-pad);
-	}
-}
-
-@each $name in (default, info, success, warning, danger) {
-	.notification_#{$name} {
-		border: var(--content-border) solid var(--notification-#{$name}-border);
-	}
-}