@rvx/ui 0.3.8 → 0.4.0

package/src/components/secondary.tsx

@@ -1,10 +1,9 @@
-import { THEME } from "../common/theme.js";
+import styles from "@rvx/ui/theme/components/secondary.module.css";
 
 export function Secondary(props: {
 	children?: unknown;
 }): unknown {
-	const theme = THEME.current;
-	return <span class={[theme?.secondary]} >
+	return <span class={styles.secondary}>
 		{props.children}
 	</span>;
 }

package/src/components/separated.tsx

@@ -1,5 +1,5 @@
+import styles from "@rvx/ui/theme/components/separated.module.css";
 import { ClassValue, Expression, map, StyleValue } from "rvx";
-import { THEME } from "../common/theme.js";
 
 export function Separated(props: {
 	class?: ClassValue;
@@ -8,11 +8,10 @@ export function Separated(props: {
 	children?: unknown;
 	row?: Expression<boolean | undefined>;
 }) {
-	const theme = THEME.current;
 	return <div
 		class={[
 			props.class,
-			map(props.row, row => row ? theme?.separated_row : theme?.separated_column),
+			map(props.row, row => row ? styles.row : styles.column),
 		]}
 		style={props.style}
 		id={props.id}

package/src/components/slider.tsx

@@ -1,6 +1,6 @@
+import styles from "@rvx/ui/theme/components/slider.module.css";
 import { Expression, map, Show, Signal, uniqueId } from "rvx";
 import { ID_PAIR } from "../common/id-pairs.js";
-import { THEME } from "../common/theme.js";
 
 export function Slider(props: {
 	id?: Expression<string | undefined>;
@@ -11,7 +11,6 @@ export function Slider(props: {
 	markers?: Expression<number[] | undefined>;
 	children?: unknown;
 }) {
-	const theme = THEME.current;
 	const markerId = uniqueId();
 	const id = props.id ?? ID_PAIR.current.consume();
 
@@ -30,9 +29,7 @@ export function Slider(props: {
 		list={map(props.markers, markers => markers ? markerId : undefined)}
 	/> as HTMLInputElement;
 
-	return <div
-		class={theme?.slider_host}
-	>
+	return <div class={styles.host}>
 		{input}
 
 		<Show when={props.markers}>

package/src/components/tabs.tsx

@@ -1,6 +1,7 @@
+import separatedStyles from "@rvx/ui/theme/components/separated.module.css";
+import styles from "@rvx/ui/theme/components/tabs.module.css";
 import { $, ClassValue, Component, Expression, For, get, map, Show, Signal, StyleValue, uniqueIdFor, watch } from "rvx";
 import { string } from "rvx/convert";
-import { THEME } from "../common/theme.js";
 
 export interface Tab {
 	label: Component;
@@ -44,13 +45,12 @@ export function TabList(props: {
 	class?: ClassValue;
 	style?: StyleValue;
 }) {
-	const theme = THEME.current;
 	return <div
 		role="tablist"
 		class={[
-			theme?.tab_list,
-			theme?.has_separator,
-			map(props.padded, padded => padded ? theme?.tab_list_padded : undefined),
+			styles.list,
+			separatedStyles.has_separator,
+			map(props.padded, padded => padded ? styles.list_padded : undefined),
 			props.class,
 		]}
 		style={props.style}
@@ -59,8 +59,8 @@ export function TabList(props: {
 			{tab => <button
 				role="tab"
 				class={[
-					theme?.tab_handle,
-					() => props.selected.value === tab ? theme?.tab_handle_current : undefined,
+					styles.handle,
+					() => props.selected.value === tab ? styles.handle_current : undefined,
 				]}
 				aria-selected={string(() => props.selected.value === tab)}
 				aria-controls={uniqueIdFor(tab)}
@@ -82,13 +82,12 @@ export function TabPanel(props: {
 	style?: StyleValue;
 	content?: Component<Component>;
 }) {
-	const theme = THEME.current;
 	return <Show when={props.tab}>
 		{tab => <div
 			role="tabpanel"
 			id={uniqueIdFor(tab)}
 			class={[
-				theme?.tab_panel,
+				styles.panel,
 				props.class,
 			]}
 			style={props.style}

package/src/components/text-input.tsx

@@ -1,8 +1,8 @@
+import styles from "@rvx/ui/theme/components/text-input.module.css";
 import { ClassValue, Expression, get, Signal, StyleValue } from "rvx";
 import { isPending } from "rvx/async";
 import { optionalString } from "rvx/convert";
 import { ID_PAIR } from "../common/id-pairs.js";
-import { THEME } from "../common/theme.js";
 import { closestValidator } from "./validation.js";
 
 export type TextInputType = "text" | "password";
@@ -63,7 +63,6 @@ export function TextInput(props: ({
 	"aria-labelledby"?: Expression<string | undefined>;
 }): unknown {
 	const id = props.id ?? ID_PAIR.current.consume();
-	const theme = THEME.current;
 	const disabled = () => isPending() || get(props.disabled);
 
 	const validator = props.value instanceof Signal ? closestValidator(props.value) : undefined;
@@ -75,7 +74,7 @@ export function TextInput(props: ({
 		wrap={props.multiline ? props.wrap : undefined}
 		disabled={disabled}
 		class={[
-			theme?.text_input,
+			styles.text_input,
 			props.class,
 		]}
 		style={props.style}

package/src/components/text.tsx

@@ -1,5 +1,5 @@
+import styles from "@rvx/ui/theme/components/text.module.css";
 import { ClassValue, Expression, StyleValue } from "rvx";
-import { THEME } from "../common/theme.js";
 
 export function Text(props: {
 	class?: ClassValue;
@@ -7,10 +7,9 @@ export function Text(props: {
 	id?: Expression<string | undefined>;
 	children?: unknown;
 }): unknown {
-	const theme = THEME.current;
 	return <div
 		class={[
-			theme?.text,
+			styles.text,
 			props.class,
 		]}
 		style={props.style}

package/src/components/value.tsx

@@ -1,10 +1,9 @@
-import { THEME } from "../common/theme.js";
+import styles from "@rvx/ui/theme/components/value.module.css";
 
 export function Value(props: {
 	children?: unknown;
 }): unknown {
-	const theme = THEME.current;
-	return <span class={[theme?.value]} >
+	return <span class={styles.value}>
 		{props.children}
 	</span>;
 }

package/src/index.tsx

@@ -1,3 +1,5 @@
+import "@rvx/ui/theme/global.css";
+
 export * from "./common/context.js";
 export * from "./common/coupling.js";
 export * from "./common/events.js";

package/src/types.d.ts

@@ -0,0 +1,5 @@
+
+declare module "*.css" {
+	const map: Record<string, string>;
+	export default map;
+}

package/{src/theme/components/breadcrumbs.scss → theme/components/breadcrumbs.module.css}

@@ -1,11 +1,3 @@
-@use "../common";
-
-@include common.theme((
-	breadcrumb-separator: (
-		dark: rgb(120, 120, 120),
-		light: rgb(180, 180, 180),
-	),
-));
 
 .breadcrumbs {
 	flex-wrap: wrap;
@@ -13,7 +5,7 @@
 	row-gap: var(--control-row-gap);
 }
 
-.breadcrumbs, .breadcrumb_item {
+.breadcrumbs, .item {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -21,18 +13,26 @@
 	row-gap: var(--control-row-gap);
 }
 
-.breadcrumb_item {
+.item {
 	line-height: calc(1em + var(--line-gap));
 	margin-block: calc(var(--line-gap) / -2);
 }
 
-.breadcrumb_separator {
+.separator {
 	block-size: calc(1em + var(--line-gap));
 	display: block;
 	position: relative;
 }
 
-.breadcrumb_separator svg {
+.separator svg {
 	block-size: 100%;
 	stroke: var(--breadcrumb-separator);
 }
+
+:global(.rvx-dark) {
+	--breadcrumb-separator: rgb(120 120 120);
+}
+
+:global(.rvx-light) {
+	--breadcrumb-separator: rgb(180 180 180);
+}

package/theme/components/button.module.css

@@ -0,0 +1,168 @@
+
+.button {
+	font-family: inherit;
+	font-size: inherit;
+	font-weight: 600;
+	line-height: 1;
+
+	cursor: pointer;
+
+	outline: none;
+	padding-block: var(--control-padding-block);
+	padding-inline: var(--control-padding-inline);
+
+	border-radius: var(--control-radius);
+	border-width: var(--control-border);
+
+	transition:
+		background-color var(--transition-color),
+		color var(--transition-color),
+		border-color var(--transition-color);
+
+	&[disabled] {
+		cursor: default;
+		filter: var(--control-disabled);
+	}
+
+	background-color: var(--button-bg);
+	color: var(--button-fg);
+	border: var(--control-border) solid var(--button-border, var(--button-bg));
+
+	&:hover:not(:active):not([disabled]) {
+		background-color: var(--button-active);
+		&:not(:focus-visible) {
+			border-color: var(--button-active);
+		}
+	}
+
+	&:focus-visible {
+		border-color: var(--button-focus);
+	}
+}
+
+.default {
+	--button-bg: var(--button-default-bg);
+	--button-fg: var(--button-default-fg);
+	--button-active: var(--button-default-active);
+	--button-focus: var(--button-default-focus);
+}
+
+.primary {
+	--button-bg: var(--button-primary-bg);
+	--button-fg: var(--button-primary-fg);
+	--button-active: var(--button-primary-active);
+	--button-focus: var(--button-primary-focus);
+}
+
+.success {
+	--button-bg: var(--button-success-bg);
+	--button-fg: var(--button-success-fg);
+	--button-active: var(--button-success-active);
+	--button-focus: var(--button-success-focus);
+}
+
+.warning {
+	--button-bg: var(--button-warning-bg);
+	--button-fg: var(--button-warning-fg);
+	--button-active: var(--button-warning-active);
+	--button-focus: var(--button-warning-focus);
+}
+
+.danger {
+	--button-bg: var(--button-danger-bg);
+	--button-fg: var(--button-danger-fg);
+	--button-active: var(--button-danger-active);
+	--button-focus: var(--button-danger-focus);
+}
+
+.input {
+	text-align: left;
+	--button-bg: var(--button-input-bg);
+	--button-fg: var(--button-input-fg);
+	--button-active: var(--button-input-active);
+	--button-focus: var(--button-input-focus);
+	--button-border: var(--button-input-border);
+}
+
+.item {
+	--button-bg: var(--button-item-bg);
+	--button-fg: var(--button-item-fg);
+	--button-active: var(--button-item-active);
+	--button-focus: var(--button-item-focus);
+}
+
+:global(.rvx-dark) {
+	--button-default-bg: rgb(72 72 72);
+	--button-default-fg: white;
+	--button-default-active: rgb(100 100 100);
+	--button-default-focus: var(--accent);
+
+	--button-primary-bg: rgb(64 160 255);
+	--button-primary-fg: black;
+	--button-primary-active: rgb(112 184 255);
+	--button-primary-focus: rgb(200 241 255);
+
+	--button-success-bg: rgb(64 255 64);
+	--button-success-fg: black;
+	--button-success-active: rgb(160 255 160);
+	--button-success-focus: rgb(224 255 224);
+
+	--button-warning-bg: rgb(255 200 0);
+	--button-warning-fg: black;
+	--button-warning-active: rgb(255 224 112);
+	--button-warning-focus: rgb(255 243 200);
+
+	--button-danger-bg: rgb(255 40 40);
+	--button-danger-fg: black;
+	--button-danger-active: rgb(255 100 100);
+	--button-danger-focus: rgb(255 200 200);
+
+	--button-input-bg: rgb(36 36 36);
+	--button-input-fg: white;
+	--button-input-border: rgb(54 54 54);
+	--button-input-active: rgb(64 64 64);
+	--button-input-focus: var(--accent);
+
+	--button-item-bg: rgb(48 48 48);
+	--button-item-fg: white;
+	--button-item-active: rgb(64 64 64);
+	--button-item-focus: var(--accent);
+}
+
+:global(.rvx-light) {
+	--button-default-bg: rgb(224 224 224);
+	--button-default-fg: black;
+	--button-default-active: rgb(200 200 200);
+	--button-default-focus: var(--accent);
+
+	--button-primary-bg: rgb(0 127 255);
+	--button-primary-fg: white;
+	--button-primary-active: rgb(64 160 255);
+	--button-primary-focus: rgb(0 56 112);
+
+	--button-success-bg: rgb(0 255 0);
+	--button-success-fg: black;
+	--button-success-active: rgb(130 255 130);
+	--button-success-focus: rgb(0 160 0);
+
+	--button-warning-bg: rgb(255 200 0);
+	--button-warning-fg: black;
+	--button-warning-active: rgb(255 224 112);
+	--button-warning-focus: rgb(150 117 0);
+
+	--button-danger-bg: rgb(255 40 40);
+	--button-danger-fg: white;
+	--button-danger-active: rgb(255 80 80);
+	--button-danger-focus: rgb(130 0 0);
+
+	--button-input-bg: rgb(250 250 250);
+	--button-input-fg: black;
+	--button-input-border: rgb(220 220 220);
+	--button-input-active: rgb(230 230 230);
+	--button-input-focus: var(--accent);
+
+	--button-item-bg: rgb(230 230 230);
+	--button-item-fg: black;
+	--button-item-active: rgb(215 215 215);
+	--button-item-focus: var(--accent);
+}

package/theme/components/card.module.css

@@ -0,0 +1,50 @@
+
+.card {
+	box-shadow: var(--content-shadow);
+	border-radius: var(--content-radius);
+	background-color: var(--bg-alt);
+	--parent-bg: var(--bg-alt);
+
+	border: var(--content-border) solid transparent;
+
+	&:not(.raw) {
+		padding-block: var(--content-padding-block);
+		padding-inline: var(--content-padding-inline);
+	}
+}
+
+.default {
+	border-color: var(--card-default);
+}
+
+.info {
+	border-color: var(--card-info);
+}
+
+.success {
+	border-color: var(--card-success);
+}
+
+.warning {
+	border-color: var(--card-warning);
+}
+
+.danger {
+	border-color: var(--card-danger);
+}
+
+:global(.rvx-dark) {
+	--card-default: var(--default-border);
+	--card-info: rgb(64 160 255);
+	--card-success: rgb(64 255 64);
+	--card-warning: rgb(255 200 0);
+	--card-danger: rgb(255 64 64);
+}
+
+:global(.rvx-light) {
+	--card-default: var(--default-border);
+	--card-info: rgb(0 127 255);
+	--card-success: rgb(0 255 0);
+	--card-warning: rgb(255 160 0);
+	--card-danger: rgb(255 0 0);
+}

package/{src/theme/components/checkbox.scss → theme/components/checkbox.module.css}

@@ -1,5 +1,5 @@
 
-.checkbox_label {
+.label {
 	display: flex;
 	column-gap: var(--control-column-gap);
 	align-items: start;
@@ -8,22 +8,22 @@
 		cursor: pointer;
 	}
 
-	&:has(.checkbox_input:disabled) > .checkbox_content {
+	&:has(.input:disabled) > .content {
 		filter: var(--control-disabled);
 	}
 
-	&:has(.checkbox_input:focus-visible) {
+	&:has(.input:focus-visible) {
 		outline: var(--focus-outline);
 		outline-offset: var(--focus-outline-offset);
 	}
 }
 
-.checkbox_padding {
+.padding {
 	padding: var(--input-extension);
 	margin: calc(var(--input-extension) * -1);
 }
 
-.checkbox_input {
+.input {
 	margin: 0;
 	outline: none;
 	cursor: inherit;

package/{src/theme/components/collapse.scss → theme/components/collapse.module.css}

@@ -6,60 +6,60 @@
 	--space-scale: 0;
 }
 
-.collapse_sized {
+.sized {
 	transition:
-		margin-block-start var(--layout-transition),
-		margin-block-end var(--layout-transition),
-		opacity var(--layout-transition);
+		margin-block-start var(--transition-layout),
+		margin-block-end var(--transition-layout),
+		opacity var(--transition-layout);
 }
 
 @keyframes alert {
 	from { transform: translateX(0rem); }
-	30% { transform: translateX(.2rem); }
-	70% { transform: translateX(-.2rem); }
+	30% { transform: translateX(calc(3rem / 14)); }
+	70% { transform: translateX(calc(-3rem / 14)); }
 	to { transform: translateX(0rem); }
 }
 
-.collapse_alert {
+.alert {
 	animation: alert .2s ease;
 }
 
-.collapse_visible.collapse_visible {
+.visible.visible {
 	--space-scale: 1;
 	opacity: 1;
 }
 
-.collapse_view {
+.view {
 	block-size: 0px;
 	position: relative;
 	overflow: hidden;
 
-	.collapse_sized > & {
+	.sized > & {
 		transition:
-			block-size var(--layout-transition),
-			margin var(--layout-transition);
+			block-size var(--transition-layout),
+			margin var(--transition-layout);
 	}
 
-	.collapse_visible > & {
+	.visible > & {
 		block-size: calc(var(--collapse-size) + var(--overflow-safe-area) * 2);
 		margin: calc(var(--overflow-safe-area) * -1);
 	}
 }
 
-.collapse_content {
+.content {
 	position: absolute;
 	inline-size: 100%;
 	top: 0px;
 	left: 0px;
 
-	.collapse_sized > * > & {
+	.sized > * > & {
 		transition:
-			top var(--layout-transition),
-			left var(--layout-transition),
-			inline-size var(--layout-transition);
+			top var(--transition-layout),
+			left var(--transition-layout),
+			inline-size var(--transition-layout);
 	}
 
-	.collapse_visible & {
+	.visible & {
 		top: var(--overflow-safe-area);
 		left: var(--overflow-safe-area);
 		inline-size: calc(100% - var(--overflow-safe-area) * 2);

package/{src/theme/components/column.scss → theme/components/column.module.css}

@@ -1,4 +1,3 @@
-@use "../common";
 
 .column {
 	display: flex;
@@ -27,15 +26,38 @@
 	}
 }
 
-@each $size in "content", "group", "control" {
-	.column_#{$size} {
-		row-gap: var(--#{$size}-row-gap);
-		& > * {
-			--parent-row-gap: var(--#{$size}-row-gap);
-		}
+.content {
+	row-gap: var(--content-row-gap);
+	& > * {
+		--parent-row-gap: var(--content-row-gap);
+	}
+
+	&.padded {
+		padding-block: var(--content-padding-block);
+		padding-inline: var(--content-padding-inline);
+	}
+}
+
+.group {
+	row-gap: var(--group-row-gap);
+	& > * {
+		--parent-row-gap: var(--group-row-gap);
+	}
+
+	&.padded {
+		padding-block: var(--group-padding-block);
+		padding-inline: var(--group-padding-inline);
+	}
+}
+
+.control {
+	row-gap: var(--control-row-gap);
+	& > * {
+		--parent-row-gap: var(--control-row-gap);
+	}
 
-		&.column_padded {
-			@include common.padding(#{$size}-pad);
-		}
+	&.padded {
+		padding-block: var(--control-padding-block);
+		padding-inline: var(--control-padding-inline);
 	}
 }

package/{src/theme/components/control-group.scss → theme/components/control-group.module.css}

@@ -10,7 +10,7 @@
 	}
 }
 
-.control_group_row {
+.row {
 	flex-direction: row;
 	& > :first-child {
 		border-start-start-radius: inherit;
@@ -30,7 +30,7 @@
 	}
 }
 
-.control_group_column {
+.column {
 	flex-direction: column;
 	& > :first-child {
 		border-start-start-radius: inherit;