@rvx/ui 0.3.8 → 0.4.0

package/theme/components/dialog.module.css

@@ -0,0 +1,63 @@
+
+.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(--transition-layout);
+	opacity: 0;
+}
+
+.fadein {
+	opacity: 1;
+	.dialog_body {
+		transform: scale(1);
+	}
+}
+
+.fadeout {
+	pointer-events: none;
+	opacity: 0;
+	.dialog_body {
+		transform: scale(.9);
+	}
+}
+
+@media (prefers-reduced-motion) {
+	.body.body {
+		transform: unset;
+	}
+}
+
+.body {
+	grid-row: 2 / 3;
+	grid-column: 2 / 3;
+
+	transform: scale(.9);
+	transition: transform var(--transition-layout);
+
+	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(--default-border);
+}
+
+.scroll_view {
+	border-block: var(--content-border) solid var(--default-border);
+	margin-inline: calc(var(--content-border) - var(--content-padding-inline));
+}
+
+.scroll_view_content {
+	padding-block: var(--content-padding-block);
+	padding-inline: var(--content-padding-inline);
+}

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

@@ -1,15 +1,14 @@
-@use "../common";
 
 .dropdown {
 	position: relative;
 	outline: none;
 
-	&:not(.dropdown_expansion) {
+	&:not(.expansion) {
 		min-inline-size: var(--popout-anchor-inline-size);
 	}
 }
 
-.dropdown_scroll_area {
+.scroll_area {
 	border-radius: var(--control-radius);
 	background-color: var(--button-item-bg);
 	box-shadow: var(--overlay-shadow);
@@ -18,21 +17,22 @@
 	overflow: auto;
 }
 
-.dropdown_content {
+.content {
 	display: flex;
 	flex-direction: column;
 	border-radius: var(--control-radius);
-	border: var(--content-border) solid var(--card-default-border);
+	border: var(--content-border) solid var(--default-border);
 	overflow: hidden;
 }
 
-.dropdown_item {
+.item {
 	cursor: pointer;
-	@include common.padding(control-pad);
+	padding-block: var(--control-padding-block);
+	padding-inline: var(--control-padding-inline);
 	border: transparent solid var(--control-border);
 	border-radius: calc(var(--control-radius) - var(--control-border));
 
-	&.dropdown_item_active {
-		background-color: var(--button-item-bg-hover);
+	&.item_active {
+		background-color: var(--button-item-active);
 	}
 }

package/theme/components/error.module.css

@@ -0,0 +1,4 @@
+
+.message {
+	color: var(--fg-danger);
+}

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

@@ -13,27 +13,27 @@
 }
 
 h1.heading {
-	font-size: 2.4rem;
+	font-size: calc(36rem / 14);
 	font-weight: 600;
-	--space-above: 5rem;
+	--space-above: calc(60rem / 14);
 }
 
 h2.heading {
-	font-size: 1.8rem;
+	font-size: calc(24rem / 14);
 	font-weight: 600;
-	--space-above: 3.2rem;
+	--space-above: calc(40rem / 14);
 }
 
 h3.heading {
-	font-size: 1.5rem;
+	font-size: calc(20rem / 14);
 	font-weight: 600;
-	--space-above: 2.4rem;
+	--space-above: calc(32rem / 14);
 }
 
 h4.heading,
 h5.heading,
 h6.heading {
-	font-size: 1.2rem;
+	font-size: calc(17rem / 14);
 	font-weight: 600;
-	--space-above: 2rem;
+	--space-above: calc(28rem / 14);
 }

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

@@ -1,18 +1,10 @@
-@use "../common";
-
-@include common.theme((
-	label-fg: (
-		dark: rgb(200, 200, 200),
-		light: rgb(100, 100, 100),
-	),
-));
 
 .label {
 	--space-below: var(--control-row-gap);
 	line-height: calc(1em + var(--line-gap));
 
-	color: var(--label-fg);
-	font-size: .87rem;
+	filter: var(--secondary-filter);
+	font-size: calc(12rem / 14);
 	font-weight: 600;
 
 	&::before,

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

@@ -1,4 +1,3 @@
-@use "../common";
 
 .link {
 	--space-below: var(--control-row-gap);

package/theme/components/nav-list.module.css

@@ -0,0 +1,76 @@
+
+.nav_list {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	z-index: 0;
+}
+
+.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;
+	padding-block: var(--control-padding-block);
+	padding-inline: var(--control-padding-inline);
+
+	transition: var(--transition-color) background-color,
+		var(--transition-color) 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);
+	}
+}
+
+.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;
+}
+
+:global(.rvx-dark) {
+	--nav-list-item-bg: transparent;
+	--nav-list-item-bg-hover: rgb(255 255 255 / .1);
+	--nav-list-item-bg-active: rgb(255 255 255 / .08);
+	--nav-list-item-bg-current: rgb(255 255 255 / .1);
+	--nav-list-item-fg: rgb(172 172 172);
+	--nav-list-item-fg-hover: var(--fg);
+	--nav-list-item-fg-active: var(--fg);
+	--nav-list-item-fg-current: var(--fg);
+	--nav-list-item-border: transparent;
+}
+
+:global(.rvx-light) {
+	--nav-list-item-bg: transparent;
+	--nav-list-item-bg-hover: rgb(0 0 0 / .075);
+	--nav-list-item-bg-active: rgb(0 0 0 / .125);
+	--nav-list-item-bg-current: rgb(0 0 0 / .125);
+	--nav-list-item-fg: rgb(72 72 72);
+	--nav-list-item-fg-hover: var(--fg);
+	--nav-list-item-fg-active: var(--fg);
+	--nav-list-item-fg-current: var(--fg);
+	--nav-list-item-border: transparent;
+}

package/theme/components/notifications.module.css

@@ -0,0 +1,31 @@
+
+.host {
+	--overflow-safe-area: calc(7rem / 14);
+	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;
+}
+
+.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(.raw) {
+		padding-block: var(--content-padding-block);
+		padding-inline: var(--content-padding-inline);
+	}
+}

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

@@ -1,18 +1,14 @@
 
 .page {
-	padding-block:
-		var(--page-pad-block-start)
-		var(--page-pad-block-end);
-	padding-inline:
-		var(--page-pad-inline-start)
-		var(--page-pad-inline-end);
+	padding-block: var(--page-padding-block);
+	padding-inline: var(--page-padding-inline);
 
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 }
 
-.page_center_block {
+.center_block {
 	flex-grow: 1;
 
 	& > .page_content_col {
@@ -25,19 +21,19 @@
 	}
 }
 
-.page_scrollbar_comp {
+.scrollbar_comp {
 	flex-grow: 1;
 	flex-basis: 0;
 	max-inline-size: var(--scrollbar-comp, 0);
 }
 
-.page_content_col {
+.content_col {
 	flex-grow: 1;
 	max-inline-size: var(--page-inline-size);
 	flex-basis: calc(var(--page-inline-size) - var(--scrollbar-comp, 0px));
 }
 
-.page_content {
+.content {
 	--scrollbar-comp: initial;
 	--page-inline-size: initial;
 }

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

@@ -1,12 +1,12 @@
 
-.placeholder_area {
+.area {
 	flex-grow: 1;
 	display: flex;
 	flex-direction: column;
 	position: relative;
 }
 
-.placeholder_content {
+.content {
 	flex-grow: 1;
 	display: flex;
 	flex-direction: column;
@@ -22,6 +22,6 @@
 	grid-template-rows: 5fr auto 7fr;
 }
 
-.placeholder_message {
+.message {
 	grid-area: 2 / 2;
 }

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

@@ -1,18 +1,17 @@
-@use "../common";
 
 .popover {
 	position: relative;
 	outline: none;
 }
 
-.popover_spike_area {
+.spike_area {
 	pointer-events: none;
 	position: absolute;
 	inset: -1rem;
 	z-index: 1;
 }
 
-.popover_spike {
+.spike {
 	position: relative;
 	transform-origin: bottom;
 	width: 2rem;
@@ -23,14 +22,14 @@
 	svg {
 		width: 2rem;
 		height: 1rem;
-		fill: var(--card-default-border);
+		fill: var(--default-border);
 		transform-origin: bottom;
 		transform: scale(0.75);
 		stroke: none;
 	}
 }
 
-.popover_scroll_area {
+.scroll_area {
 	background-color: var(--bg-alt);
 	--parent-bg: var(--bg);
 
@@ -41,11 +40,12 @@
 	overflow: auto;
 }
 
-.popover_content {
+.content {
 	border-radius: var(--content-radius);
-	border: var(--content-border) solid var(--overlay-border);
+	border: var(--content-border) solid var(--default-border);
 
-	&:not(.popover_raw) {
-		@include common.padding(content-pad);
+	&:not(.raw) {
+		padding-block: var(--content-padding-block);
+		padding-inline: var(--content-padding-inline);
 	}
 }

package/theme/components/row.module.css

@@ -0,0 +1,36 @@
+
+.row {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+.content {
+	row-gap: var(--content-row-gap);
+	column-gap: var(--content-column-gap);
+
+	& > * {
+		--parent-row-gap: var(--content-row-gap);
+		--parent-column-gap: var(--content-column-gap);
+	}
+}
+
+.group {
+	row-gap: var(--group-row-gap);
+	column-gap: var(--group-column-gap);
+
+	& > * {
+		--parent-row-gap: var(--group-row-gap);
+		--parent-column-gap: var(--group-column-gap);
+	}
+}
+
+.control {
+	row-gap: var(--control-row-gap);
+	column-gap: var(--control-column-gap);
+
+	& > * {
+		--parent-row-gap: var(--control-row-gap);
+		--parent-column-gap: var(--control-column-gap);
+	}
+}

package/{src/theme/components/scroll-view.scss → theme/components/scroll-view.module.css}

@@ -1,15 +1,3 @@
-@use "../common";
-
-@include common.theme((
-	scroll-view-indicator-size: (
-		dark: 2rem,
-		light: 2rem,
-	),
-	scroll-view-indicator-color: (
-		dark: rgba(0, 0, 0, .6),
-		light: rgba(0, 0, 0, .2),
-	),
-));
 
 .scroll_view {
 	flex-grow: 1;
@@ -17,42 +5,52 @@
 	overflow: hidden;
 }
 
-.scroll_view_area {
+.area {
 	position: absolute;
 	inset: 0;
 }
 
-.scroll_view_area:focus-visible {
+.area:focus-visible {
 	outline: var(--focus-outline);
 	outline-offset: calc(var(--control-border) * -1);
 }
 
-.scroll_view_content {
+.content {
 	inline-size: 100%;
 	min-block-size: 100%;
 	display: flex;
 	flex-direction: column;
 }
 
-.scroll_view_indicator_start,
-.scroll_view_indicator_end {
+.indicator_start,
+.indicator_end {
 	position: absolute;
 	inset-inline: 0;
 	block-size: var(--scroll-view-indicator-size);
 	box-shadow: 0 0 var(--scroll-view-indicator-size) var(--scroll-view-indicator-color);
 	pointer-events: none;
 	opacity: 0;
-	transition: opacity var(--layout-transition);
+	transition: opacity var(--transition-layout);
 }
 
-.scroll_view_indicator_start {
+.indicator_start {
 	inset-block-end: 100%;
 }
 
-.scroll_view_indicator_end {
+.indicator_end {
 	inset-block-start: 100%;
 }
 
-.scroll_view_indicator_visible {
+.indicator_visible {
 	opacity: 1;
 }
+
+:global(.rvx-dark) {
+	--scroll-view-indicator-size: 2rem;
+	--scroll-view-indicator-color: rgb(0 0 0 / .6);
+}
+
+:global(.rvx-light) {
+	--scroll-view-indicator-size: 2rem;
+	--scroll-view-indicator-color: rgb(0 0 0 / .2);
+}

package/theme/components/secondary.module.css

@@ -0,0 +1,4 @@
+
+.secondary {
+	filter: var(--secondary-filter);
+}

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

@@ -1,5 +1,5 @@
 
-.separated_column {
+.column {
 	display: flex;
 	flex-direction: column;
 
@@ -11,7 +11,7 @@
 	}
 }
 
-.separated_row {
+.row {
 	display: flex;
 	flex-direction: row;
 

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

@@ -1,5 +1,5 @@
 
-.slider_host {
+.host {
 	display: flex;
 	flex-direction: column;
 	row-gap: var(--group-row-gap);
@@ -10,6 +10,7 @@
 
 		&:focus-visible {
 			outline: var(--focus-outline);
+			outline-offset: var(--focus-outline-offset);
 		}
 	}
 }

package/theme/components/tabs.module.css

@@ -0,0 +1,71 @@
+
+.list {
+	display: flex;
+	flex-direction: row;
+	border-bottom: var(--separator) solid var(--separator-color);
+}
+
+.list_padded {
+	padding-inline: calc(var(--content-padding-inline) - var(--control-padding-inline));
+}
+
+.handle {
+	font-family: inherit;
+	font-size: inherit;
+	font-weight: 600;
+	line-height: 1;
+
+	cursor: pointer;
+	outline: none;
+
+	padding-block: var(--control-padding-block);
+	padding-inline: calc(var(--control-padding-inline) + var(--control-border));
+
+	background-color: transparent;
+	color: var(--tab-handle-fg);
+	border: none;
+	border-block-end: transparent solid var(--control-border);
+
+	border-radius: var(--control-radius) var(--control-radius) 0 0;
+	transition:
+		var(--transition-color) background-color,
+		var(--transition-color) border-color;
+
+	&:hover,
+	&:focus-visible {
+		color: var(--tab-handle-fg-active);
+		background-color: var(--tab-handle-bg-active);
+	}
+	&:active {
+		background-color: var(--tab-handle-bg);
+	}
+}
+
+.handle_current {
+	border-block-end-color: var(--tab-handle-marker);
+	color: var(--tab-handle-fg-current);
+}
+
+.panel {
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+}
+
+:global(.rvx-dark) {
+	--tab-handle-marker: rgb(150 150 150);
+	--tab-handle-bg: rgb(64 64 64);
+	--tab-handle-bg-active: rgb(72 72 72);
+	--tab-handle-fg: rgb(172 172 172);
+	--tab-handle-fg-active: var(--fg);
+	--tab-handle-fg-current: var(--fg);
+}
+
+:global(.rvx-light) {
+	--tab-handle-marker: rgb(180 180 180);
+	--tab-handle-bg: rgb(230 230 230);
+	--tab-handle-bg-active: rgb(220 220 220);
+	--tab-handle-fg: rgb(72 72 72);
+	--tab-handle-fg-active: var(--fg);
+	--tab-handle-fg-current: var(--fg);
+}

package/theme/components/text-input.module.css

@@ -0,0 +1,45 @@
+
+.text_input {
+	font-family: inherit;
+	font-size: inherit;
+	font-weight: inherit;
+
+	cursor: text;
+
+	outline: none;
+
+	padding-block: calc(var(--control-padding-block) - var(--control-border));
+	padding-inline: var(--control-padding-inline);
+
+	border: var(--control-border) solid var(--text-input-border);
+	border-radius: var(--control-radius);
+	box-shadow: var(--control-shadow);
+	background-color: var(--text-input-bg);
+	color: var(--text-input-fg);
+	line-height: calc(1em + var(--line-gap));
+
+	&:focus {
+		border-color: var(--accent);
+	}
+
+	&[disabled] {
+		filter: var(--control-disabled);
+		cursor: default;
+	}
+}
+
+input.text_input {
+	block-size: calc(var(--control-padding-block) * 2 + 1em + var(--control-border) * 2);
+}
+
+:global(.rvx-dark) {
+	--text-input-bg: rgb(36 36 36);
+	--text-input-fg: white;
+	--text-input-border: rgb(54 54 54);
+}
+
+:global(.rvx-light) {
+	--text-input-bg: rgb(250 250 250);
+	--text-input-fg: black;
+	--text-input-border: rgb(220 220 220);
+}