@rvx/ui 0.1.24 → 0.1.26

package/src/theme/components/button.scss

@@ -2,94 +2,121 @@
 
 @include common.theme((
 	button-default-bg: (
-		dark: rgb(64, 64, 64),
+		dark: rgb(72, 72, 72),
+		light: rgb(92, 92, 92),
 	),
 	button-default-bg-hover: (
-		dark: rgb(90, 90, 90),
+		dark: rgb(100, 100, 100),
+		light: rgb(128, 128, 128),
 	),
 	button-default-fg: (
-		dark: var(--fg),
+		dark: white,
+		light: white,
+	),
+	button-default-focus: (
+		light: rgb(100, 178, 255),
 	),
 
 	button-primary-bg: (
-		dark: rgb(0, 192, 255),
+		dark: rgb(64, 160, 255),
+		light: rgb(0, 127, 255),
 	),
 	button-primary-bg-hover: (
-		dark: rgb(92, 214, 255),
+		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(0, 200, 100),
+		dark: rgb(64, 255, 64),
+		light: rgb(0, 255, 0),
 	),
 	button-success-bg-hover: (
-		dark: rgb(0, 242, 121),
+		dark: rgb(160, 255, 160),
+		light: rgb(130, 255, 130),
 	),
 	button-success-fg: (
 		dark: black,
+		light: black,
 	),
 	button-success-focus: (
-		dark: rgb(200, 255, 228),
+		dark: rgb(224, 255, 224),
+		light: rgb(0, 160, 0),
 	),
 
 	button-warning-bg: (
-		dark: rgb(230, 180, 0),
+		dark: rgb(255, 200, 0),
+		light: rgb(255, 200, 0),
 	),
 	button-warning-bg-hover: (
-		dark: rgb(255, 220, 105),
+		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, 0, 64),
+		dark: rgb(255, 40, 40),
+		light: rgb(255, 0, 0),
 	),
 	button-danger-bg-hover: (
-		dark: rgb(255, 70, 100),
+		dark: rgb(255, 100, 100),
+		light: rgb(255, 80, 80),
 	),
 	button-danger-fg: (
-		dark: black,
+		dark: white,
+		light: white,
 	),
 	button-danger-focus: (
 		dark: rgb(255, 200, 214),
+		light: rgb(112, 0, 0),
 	),
 
 	button-input-bg: (
-		dark: rgb(16, 16, 16),
+		dark: rgb(48, 48, 48),
+		light: rgb(250, 250, 250),
 	),
 	button-input-bg-hover: (
-		dark: rgb(40, 40, 40),
-	),
-	button-input-bg-active: (
-		dark: rgb(60, 60, 60),
+		dark: rgb(64, 64, 64),
+		light: rgb(230, 230, 230),
 	),
 	button-input-fg: (
 		dark: white,
+		light: black,
 	),
 	button-input-border: (
-		dark: rgb(0, 0, 0),
+		dark: transparent,
+		light: rgb(220, 220, 220),
 	),
 
 	button-text-bg: (
 		dark: transparent,
+		light: transparent,
 	),
 	button-text-bg-hover: (
-		dark: rgb(80, 80, 80),
+		dark: rgb(48, 48, 48),
+		light: rgb(230, 230, 230),
 	),
 	button-text-bg-active: (
-		dark: rgb(100, 100, 100),
+		dark: rgb(64, 64, 64),
+		light: rgb(240, 240, 240),
 	),
 	button-text-fg: (
 		dark: var(--fg),
+		light: var(--fg),
 	),
 ));
 

package/src/theme/components/card.scss

@@ -2,25 +2,31 @@
 
 @include common.theme((
 	card-default-border: (
-		dark: rgb(72, 72, 72),
+		dark: rgb(36, 36, 36),
+		light: rgb(216, 216, 216),
 	),
 	card-info-border: (
-		dark: rgb(0, 192, 255),
+		dark: rgb(64, 160, 255),
+		light: rgb(0, 127, 255),
 	),
 	card-success-border: (
-		dark: rgb(0, 255, 128),
+		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, 0, 64),
+		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);
 
 	&:not(.card_raw) {
 		@include common.padding(content-pad, var(--content-border));

package/src/theme/components/dialog.scss

@@ -1,29 +1,14 @@
 @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;
-	grid-template-rows: 3fr minmax(auto, var(--dialog-block-size)) 4fr;
+	grid-template-rows: 5fr minmax(auto, var(--dialog-block-size)) 7fr;
 
 	overflow: auto;
 
@@ -59,16 +44,16 @@
 	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);
+	border: var(--content-border) solid var(--overlay-border);
 	@include common.padding(content-pad, var(--content-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));
 }

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,7 +29,7 @@
 	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 {

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,
 	),
 ));
 

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,7 +45,7 @@
 
 .notification {
 	pointer-events: all;
-	box-shadow: var(--notification-shadow);
+	box-shadow: var(--content-shadow);
 	border-radius: var(--content-radius);
 	background-color: var(--bg);
 

package/src/theme/components/page.scss

@@ -1,10 +1,30 @@
 
 .page {
-	margin: 2rem;
+	padding-block:
+		var(--page-pad-block-start)
+		var(--page-pad-block-end);
+	padding-inline:
+		var(--page-pad-inline-start)
+		var(--page-pad-inline-end);
+
 	display: flex;
+	flex-direction: row;
 	justify-content: center;
 }
 
+.page_center_block {
+	flex-grow: 1;
+
+	& > .page_content_col {
+		display: grid;
+		grid-template-rows: 5fr auto 7fr;
+
+		& > .page_content {
+			grid-row: 2;
+		}
+	}
+}
+
 .page_scrollbar_comp {
 	flex-grow: 1;
 	flex-basis: 0;
@@ -14,9 +34,10 @@
 .page_content_col {
 	flex-grow: 1;
 	max-inline-size: var(--page-inline-size);
-	flex-basis: calc(var(--page-inline-size) - var(--scrollbar-comp, 0));
+	flex-basis: calc(var(--page-inline-size) - var(--scrollbar-comp, 0px));
 }
 
 .page_content {
-	--scrollbar-size: 0rem;
+	--scrollbar-comp: unset;
+	--page-inline-size: unset;
 }

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,6 @@
 
 .popover_content {
 	border-radius: var(--content-radius);
-	border: var(--content-border) solid var(--popover-border);
+	border: var(--content-border) solid var(--overlay-border);
 	@include common.padding(content-pad, var(--content-border));
 }

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/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),
 	),
 ));
 

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),
 	),
 ));
 

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),
 	),
 ));