@rvx/ui 0.1.6

package/src/theme/components/dialog.scss

@@ -0,0 +1,44 @@
+@use "../common";
+
+@include common.theme((
+	dialog-container-bg: (
+		dark: rgba(32, 32, 32, .8),
+	),
+	dialog-bg: (
+		dark: var(--bg),
+	),
+	dialog-border: (
+		dark: rgb(72, 72, 72),
+	),
+	dialog-shadow: (
+		dark: 0 0 2rem rgba(0, 0, 0, .5),
+	),
+));
+
+.dialog_container {
+	position: fixed;
+	inset: 0;
+
+	background-color: var(--dialog-container-bg);
+
+	display: grid;
+	grid-template-columns: 1fr auto 1fr;
+	grid-template-rows: 3fr auto 4fr;
+
+	overflow: auto;
+}
+
+.dialog_body {
+	grid-row: 2 / 3;
+	grid-column: 2 / 3;
+
+	background-color: var(--dialog-bg);
+	box-shadow: var(--dialog-shadow);
+	border-radius: var(--content-radius);
+	border: var(--content-border) solid var(--dialog-border);
+	@include common.padding(content-pad, var(--content-border));
+}
+
+.dialog_footer {
+	--space-above: 2rem;
+}

package/src/theme/components/dropdown.scss

@@ -0,0 +1,50 @@
+@use "../common";
+
+@include common.theme((
+	dropdown-bg: (
+		dark: var(--bg),
+	),
+	dropdown-border: (
+		dark: rgb(72, 72, 72),
+	),
+	dropdown-shadow: (
+		dark: 0 0 1rem rgba(0, 0, 0, .5),
+	),
+	dropdown-item-active-bg: (
+		dark: rgb(63, 63, 63),
+	),
+));
+
+.dropdown {
+	position: relative;
+	outline: none;
+
+	&:not(.dropdown_expansion) {
+		min-inline-size: var(--popout-anchor-inline-size);
+	}
+}
+
+.dropdown_scroll_area {
+	background-color: var(--dropdown-bg);
+	box-shadow: var(--dropdown-shadow);
+	border-radius: var(--control-radius);
+	max-block-size: var(--popout-max-block-size);
+	max-inline-size: var(--popout-max-inline-size);
+	overflow: auto;
+}
+
+.dropdown_content {
+	display: flex;
+	flex-direction: column;
+	border-radius: var(--control-radius);
+	border: var(--content-border) solid var(--dropdown-border);
+}
+
+.dropdown_item {
+	cursor: pointer;
+	@include common.padding(control-pad, var(--control-border));
+
+	&.dropdown_item_active {
+		background-color: var(--dropdown-item-active-bg);
+	}
+}

package/src/theme/components/flex-space.scss

@@ -0,0 +1,6 @@
+
+.flex_space {
+	flex-basis: 0;
+	pointer-events: none;
+	--space-scale: 0;
+}

package/src/theme/components/heading.scss

@@ -0,0 +1,39 @@
+
+.heading {
+	line-height: calc(1em + var(--line-gap));
+	margin-block: 0;
+
+	&::before,
+	&::after {
+		content: "";
+		display: block;
+		pointer-events: none;
+		margin-block-start: calc(var(--line-gap) / -2);
+	}
+}
+
+h1.heading {
+	font-size: 2.4rem;
+	font-weight: 600;
+	--space-above: 5rem;
+}
+
+h2.heading {
+	font-size: 1.8rem;
+	font-weight: 600;
+	--space-above: 3.2rem;
+}
+
+h3.heading {
+	font-size: 1.5rem;
+	font-weight: 600;
+	--space-above: 2.4rem;
+}
+
+h4.heading,
+h5.heading,
+h6.heading {
+	font-size: 1.2rem;
+	font-weight: 600;
+	--space-above: 2rem;
+}

package/src/theme/components/label.scss

@@ -0,0 +1,24 @@
+@use "../common";
+
+@include common.theme((
+	label-fg: (
+		dark: rgb(200, 200, 200),
+	),
+));
+
+.label {
+	--space-below: var(--control-row-gap);
+	line-height: calc(1em + var(--line-gap));
+
+	color: var(--label-fg);
+	font-size: .87rem;
+	font-weight: 600;
+
+	&::before,
+	&::after {
+		content: "";
+		display: block;
+		pointer-events: none;
+		margin-block-start: calc(var(--line-gap) / -2);
+	}
+}

package/src/theme/components/link.scss

@@ -0,0 +1,25 @@
+@use "../common";
+
+@include common.theme((
+	link-fg: (
+		dark: rgb(64, 160, 255),
+	),
+));
+
+.link {
+	--space-below: var(--control-row-gap);
+	line-height: calc(1em + var(--line-gap));
+
+	color: var(--link-fg);
+	font-weight: 600;
+	text-decoration: none;
+	cursor: pointer;
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		text-decoration: underline;
+	}
+}

package/src/theme/components/page.scss

@@ -0,0 +1,22 @@
+
+.page {
+	margin: 2rem;
+	display: flex;
+	justify-content: center;
+}
+
+.page_scrollbar_comp {
+	flex-grow: 1;
+	flex-basis: 0;
+	max-inline-size: var(--scrollbar-comp, 0);
+}
+
+.page_content_col {
+	flex-grow: 1;
+	max-inline-size: var(--page-inline-size);
+	flex-basis: calc(var(--page-inline-size) - var(--scrollbar-comp, 0));
+}
+
+.page_content {
+	--scrollbar-size: 0rem;
+}

package/src/theme/components/popover.scss

@@ -0,0 +1,58 @@
+@use "../common";
+
+@include common.theme((
+	popover-bg: (
+		dark: var(--bg),
+	),
+	popover-border: (
+		dark: rgb(72, 72, 72),
+	),
+	popover-shadow: (
+		dark: 0 0 1rem rgba(0, 0, 0, .5),
+	),
+));
+
+.popover {
+	position: relative;
+	outline: none;
+}
+
+.popover_spike_area {
+	pointer-events: none;
+	position: absolute;
+	inset: -1rem;
+	z-index: 1;
+}
+
+.popover_spike {
+	position: relative;
+	transform-origin: bottom;
+	width: 2rem;
+	height: 1rem;
+
+	--popover-spike-min-offset: 1rem;
+
+	svg {
+		width: 2rem;
+		height: 1rem;
+		fill: var(--popover-border);
+		transform-origin: bottom;
+		transform: scale(0.75);
+		stroke: none;
+	}
+}
+
+.popover_scroll_area {
+	background-color: var(--popover-bg);
+	box-shadow: var(--popover-shadow);
+	border-radius: var(--content-radius);
+	max-block-size: var(--popout-max-block-size);
+	max-inline-size: var(--popout-max-inline-size);
+	overflow: auto;
+}
+
+.popover_content {
+	border-radius: var(--content-radius);
+	border: var(--content-border) solid var(--popover-border);
+	@include common.padding(content-pad, var(--content-border));
+}

package/src/theme/components/radio-buttons.scss

@@ -0,0 +1,31 @@
+
+.radio_buttons {
+	display: flex;
+	flex-direction: column;
+	row-gap: var(--control-row-gap);
+
+	&:has(.radio_button_input:focus-visible) {
+		outline: var(--focus-outline);
+		outline-offset: var(--focus-outline-offset);
+	}
+}
+
+.radio_button_label {
+	display: flex;
+	column-gap: var(--control-column-gap);
+	align-items: start;
+
+	&:has(.radio_button_input:not(:disabled)) {
+		cursor: pointer;
+	}
+
+	&:has(.radio_button_input:disabled) > .radio_button_content {
+		filter: var(--control-disabled);
+	}
+}
+
+.radio_button_input {
+	margin: 0;
+	outline: none;
+	cursor: inherit;
+}

package/src/theme/components/row.scss

@@ -0,0 +1,17 @@
+
+.row {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+@each $size in "content", "control" {
+	.row_#{$size} {
+		column-gap: var(--#{$size}-column-gap);
+		row-gap: var(--#{$size}-row-gap);
+		& > * {
+			--parent-column-gap: var(--#{$size}-column-gap);
+			--parent-row-gap: var(--#{$size}-row-gap);
+		}
+	}
+}

package/src/theme/components/scroll-view.scss

@@ -0,0 +1,51 @@
+@use "../common";
+
+@include common.theme((
+	scroll-view-indicator-size: (
+		dark: 1.5rem,
+	),
+	scroll-view-indicator-color: (
+		dark: rgba(0, 0, 0, .7),
+	),
+));
+
+.scroll_view {
+	flex-grow: 1;
+	position: relative;
+	overflow: hidden;
+}
+
+.scroll_view_area {
+	position: absolute;
+	inset: 0;
+}
+
+.scroll_view_content {
+	inline-size: 100%;
+	min-block-size: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.scroll_view_indicator_start,
+.scroll_view_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);
+}
+
+.scroll_view_indicator_start {
+	inset-block-end: 100%;
+}
+
+.scroll_view_indicator_end {
+	inset-block-start: 100%;
+}
+
+.scroll_view_indicator_visible {
+	opacity: 1;
+}

package/src/theme/components/text-input.scss

@@ -0,0 +1,45 @@
+@use "../common";
+
+@include common.theme((
+	text-input-bg: (
+		dark: rgb(16, 16, 16),
+	),
+	text-input-fg: (
+		dark: white,
+	),
+	text-input-border: (
+		dark: rgb(80, 80, 80),
+	),
+	text-input-border-lit: (
+		dark: rgb(0, 128, 255),
+	),
+));
+
+.text_input {
+	font-family: inherit;
+	font-size: inherit;
+	font-weight: inherit;
+
+	cursor: text;
+
+	outline: none;
+	@include common.padding(control-pad);
+	border: var(--control-border) solid var(--text-input-border);
+	border-radius: var(--control-radius);
+
+	background-color: var(--text-input-bg);
+	color: var(--text-input-fg);
+
+	&:focus {
+		border-color: var(--text-input-border-lit);
+	}
+
+	&[disabled] {
+		filter: var(--control-disabled);
+		cursor: default;
+	}
+}
+
+input.text_input {
+	block-size: calc(var(--control-pad-block-start) + 1em + var(--control-pad-block-end));
+}

package/src/theme/components/text.scss

@@ -0,0 +1,12 @@
+
+.text {
+	line-height: calc(1em + var(--line-gap));
+
+	&::before,
+	&::after {
+		content: "";
+		display: block;
+		pointer-events: none;
+		margin-block-start: calc(var(--line-gap) / -2);
+	}
+}

package/src/theme/components/validation.scss

@@ -0,0 +1,15 @@
+@use "../common";
+
+@include common.theme((
+	validation-message-fg: (
+		dark: rgb(255, 84, 127),
+	),
+));
+
+.validation_message {
+	color: var(--validation-message-fg);
+}
+
+.validation_message_container {
+	--space-above: 0.5rem;
+}

package/src/theme/components/value.scss

@@ -0,0 +1,4 @@
+
+.value {
+	font-weight: 600;
+}

package/src/theme/theme.scss

@@ -0,0 +1,22 @@
+@import "base";
+
+@import "components/button";
+@import "components/checkbox";
+@import "components/collapse";
+@import "components/column";
+@import "components/control-group";
+@import "components/dialog";
+@import "components/dropdown.scss";
+@import "components/flex-space";
+@import "components/heading";
+@import "components/label";
+@import "components/link";
+@import "components/page";
+@import "components/popover";
+@import "components/radio-buttons";
+@import "components/row";
+@import "components/scroll-view";
+@import "components/text-input";
+@import "components/text";
+@import "components/validation";
+@import "components/value";