@rvx/ui 0.1.25 → 0.1.27

package/src/theme/components/dialog.scss

@@ -1,25 +1,10 @@
 @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);
+	background-color: var(--overlay-backdrop);
 
 	display: grid;
 	grid-template-columns: 1fr minmax(auto, var(--dialog-inline-size)) 1fr;
@@ -59,20 +44,19 @@
 	transform: scale(.9);
 	transition: transform var(--layout-transition);
 
-	background-color: var(--dialog-bg);
-	box-shadow: var(--dialog-shadow);
+	background-color: var(--overlay-bg);
+	box-shadow: var(--overlay-shadow);
 	border-radius: var(--content-radius);
-	border: var(--content-border) solid var(--dialog-border);
-	@include common.padding(content-pad, var(--content-border));
+	border: var(--content-border) solid var(--overlay-border);
 }
 
 .dialog_scroll_view {
-	border-block-start: var(--content-border) solid var(--dialog-border);
-	border-block-end: var(--content-border) solid var(--dialog-border);
+	border-block-start: var(--content-border) solid var(--overlay-border);
+	border-block-end: var(--content-border) solid var(--overlay-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, var(--content-border));
+	@include common.padding(content-pad);
 }

package/src/theme/components/dropdown.scss

@@ -1,17 +1,9 @@
 @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),
+		light: rgb(224, 224, 224),
 	),
 ));
 
@@ -25,8 +17,8 @@
 }
 
 .dropdown_scroll_area {
-	background-color: var(--dropdown-bg);
-	box-shadow: var(--dropdown-shadow);
+	background-color: var(--overlay-bg);
+	box-shadow: var(--overlay-shadow);
 	border-radius: var(--control-radius);
 	max-block-size: var(--popout-max-block-size);
 	max-inline-size: var(--popout-max-inline-size);
@@ -37,12 +29,13 @@
 	display: flex;
 	flex-direction: column;
 	border-radius: var(--control-radius);
-	border: var(--content-border) solid var(--dropdown-border);
+	border: var(--content-border) solid var(--overlay-border);
 }
 
 .dropdown_item {
 	cursor: pointer;
-	@include common.padding(control-pad, var(--control-border));
+	@include common.padding(control-pad);
+	border: transparent solid var(--control-border);
 
 	&.dropdown_item_active {
 		background-color: var(--dropdown-item-active-bg);

package/src/theme/components/label.scss

@@ -3,6 +3,7 @@
 @include common.theme((
 	label-fg: (
 		dark: rgb(200, 200, 200),
+		light: rgb(100, 100, 100),
 	),
 ));
 

package/src/theme/components/link.scss

@@ -1,16 +1,10 @@
 @use "../common";
 
-@include common.theme((
-	link-fg: (
-		dark: rgb(64, 208, 255),
-	),
-));
-
 .link {
 	--space-below: var(--control-row-gap);
 	line-height: calc(1em + var(--line-gap));
 
-	color: var(--link-fg);
+	color: var(--accent);
 	font-weight: 600;
 	text-decoration: none;
 	cursor: pointer;

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

@@ -3,30 +3,39 @@
 @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,
 	),
 ));
 
@@ -47,13 +56,13 @@
 	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, var(--control-border));
+	@include common.padding(control-pad);
 
-	border-radius: var(--control-radius);
 	transition: var(--color-transition) background-color,
 		var(--color-transition) border-color;
 

package/src/theme/components/notifications.scss

@@ -3,22 +3,24 @@
 // TODO: Maybe just use cards with extra marker class for optional style distinction.
 @include common.theme((
 	notification-default-border: (
-		dark: rgb(72, 72, 72),
+		dark: rgb(48, 48, 48),
+		light: rgb(200, 200, 200),
 	),
 	notification-info-border: (
-		dark: rgb(0, 192, 255),
+		dark: rgb(64, 160, 255),
+		light: rgb(0, 127, 255),
 	),
 	notification-success-border: (
-		dark: rgb(0, 255, 128),
+		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, 0, 64),
-	),
-	notification-shadow: (
-		dark: 0 0 .5rem rgba(0, 0, 0, .5),
+		dark: rgb(255, 64, 64),
+		light: rgb(255, 0, 0),
 	),
 ));
 
@@ -43,12 +45,12 @@
 
 .notification {
 	pointer-events: all;
-	box-shadow: var(--notification-shadow);
+	box-shadow: var(--content-shadow);
 	border-radius: var(--content-radius);
 	background-color: var(--bg);
 
 	&:not(.notification_raw) {
-		@include common.padding(content-pad, var(--content-border));
+		@include common.padding(content-pad);
 	}
 }
 

package/src/theme/components/popover.scss

@@ -1,17 +1,5 @@
 @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;
@@ -35,7 +23,7 @@
 	svg {
 		width: 2rem;
 		height: 1rem;
-		fill: var(--popover-border);
+		fill: var(--overlay-border);
 		transform-origin: bottom;
 		transform: scale(0.75);
 		stroke: none;
@@ -43,8 +31,8 @@
 }
 
 .popover_scroll_area {
-	background-color: var(--popover-bg);
-	box-shadow: var(--popover-shadow);
+	background-color: var(--overlay-bg);
+	box-shadow: var(--overlay-shadow);
 	border-radius: var(--content-radius);
 	max-block-size: var(--popout-max-block-size);
 	max-inline-size: var(--popout-max-inline-size);
@@ -53,6 +41,9 @@
 
 .popover_content {
 	border-radius: var(--content-radius);
-	border: var(--content-border) solid var(--popover-border);
-	@include common.padding(content-pad, var(--content-border));
+	border: var(--content-border) solid var(--overlay-border);
+
+	&:not(.popover_raw) {
+		@include common.padding(content-pad);
+	}
 }

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

@@ -25,8 +25,8 @@
 }
 
 .radio_button_padding {
-	padding: var(--input-padding);
-	margin: calc(var(--input-padding) * -1);
+	padding: var(--input-extension);
+	margin: calc(var(--input-extension) * -1);
 }
 
 .radio_button_input {

package/src/theme/components/row.scss

@@ -1,3 +1,4 @@
+@use "../common";
 
 .row {
 	display: flex;
@@ -13,5 +14,9 @@
 			--parent-column-gap: var(--#{$size}-column-gap);
 			--parent-row-gap: var(--#{$size}-row-gap);
 		}
+
+		&.row_padded {
+			@include common.padding(#{$size}-pad);
+		}
 	}
 }

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

@@ -2,10 +2,12 @@
 
 @include common.theme((
 	scroll-view-indicator-size: (
-		dark: 1.5rem,
+		dark: 2rem,
+		light: 2rem,
 	),
 	scroll-view-indicator-color: (
-		dark: rgba(0, 0, 0, .7),
+		dark: rgba(0, 0, 0, .6),
+		light: rgba(0, 0, 0, .2),
 	),
 ));
 

package/src/theme/components/separated.scss

@@ -0,0 +1,20 @@
+
+.separated_column {
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+
+	& > * + * {
+		border-block-start: calc(var(--separator) * var(--space-scale)) solid var(--separator-color);
+	}
+}
+
+.separated_row {
+	overflow: hidden;
+	display: flex;
+	flex-direction: row;
+
+	& > * + * {
+		border-inline-start: calc(var(--separator) * var(--space-scale)) solid var(--separator-color);
+	}
+}

package/src/theme/components/tabs.scss

@@ -3,21 +3,27 @@
 @include common.theme((
 	tab-handle-marker: (
 		dark: rgb(150, 150, 150),
+		light: rgb(160, 160, 160),
 	),
 	tab-handle-bg: (
 		dark: rgb(64, 64, 64),
+		light: rgb(230, 230, 230),
 	),
 	tab-handle-bg-active: (
 		dark: rgb(72, 72, 72),
+		light: rgb(220, 220, 220),
 	),
 	tab-handle-fg: (
 		dark: rgb(172, 172, 172),
+		light: rgb(72, 72, 72),
 	),
 	tab-handle-fg-active: (
 		dark: var(--fg),
+		light: var(--fg),
 	),
 	tab-handle-fg-current: (
 		dark: var(--fg),
+		light: var(--fg),
 	),
 ));
 
@@ -37,11 +43,11 @@
 	outline: none;
 
 	padding-block:
-		var(--control-pad-block-start)
-		calc(var(--control-pad-block-end) - var(--control-border));
+		calc(var(--control-pad-block-start) + var(--control-border))
+		var(--control-pad-block-end);
 	padding-inline:
-		var(--control-pad-inline-start)
-		var(--control-pad-inline-end);
+		calc(var(--control-pad-inline-start) + var(--control-border))
+		calc(var(--control-pad-inline-end) + var(--control-border));
 
 	background-color: transparent;
 	color: var(--tab-handle-fg);
@@ -68,5 +74,5 @@
 }
 
 .tab_panel_padded {
-	@include common.padding(content-pad, var(--content-border));
+	@include common.padding(content-pad);
 }

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

@@ -2,16 +2,20 @@
 
 @include common.theme((
 	text-input-bg: (
-		dark: rgb(16, 16, 16),
+		dark: rgb(36, 36, 36),
+		light: rgb(250, 250, 250),
 	),
 	text-input-fg: (
 		dark: white,
+		light: black,
 	),
 	text-input-border: (
-		dark: rgb(0, 0, 0),
+		dark: rgb(54, 54, 54),
+		light: rgb(220, 220, 220),
 	),
 	text-input-border-lit: (
 		dark: var(--accent),
+		light: var(--accent),
 	),
 ));
 
@@ -42,5 +46,5 @@
 }
 
 input.text_input {
-	block-size: calc(var(--control-pad-block-start) + 1em + var(--control-pad-block-end));
+	block-size: calc(var(--control-pad-block-start) + 1em + var(--control-pad-block-end) + var(--control-border) * 2);
 }

package/src/theme/components/validation.scss

@@ -2,7 +2,8 @@
 
 @include common.theme((
 	validation-message-fg: (
-		dark: rgb(255, 84, 127),
+		dark: rgb(255, 64, 64),
+		light: rgb(212, 0, 0),
 	),
 ));
 

package/src/theme/theme.scss

@@ -20,6 +20,7 @@
 @forward "components/radio-buttons";
 @forward "components/row";
 @forward "components/scroll-view";
+@forward "components/separated";
 @forward "components/slider";
 @forward "components/tabs";
 @forward "components/text-input";