@rvx/ui 0.1.7 → 0.1.9

package/src/components/value.tsx

@@ -1,5 +1,4 @@
-import { ClassValue, Expression, extract, StyleValue } from "rvx";
-
+import { ClassValue, Expression, StyleValue } from "rvx";
 import { THEME } from "../common/theme.js";
 
 export function Value(props: {
@@ -8,7 +7,7 @@ export function Value(props: {
 	id?: Expression<string | undefined>;
 	children?: unknown;
 }): unknown {
-	const theme = extract(THEME);
+	const theme = THEME.current;
 	return <span
 		class={[
 			theme?.value,

package/src/index.tsx

@@ -5,13 +5,14 @@ export * from "./common/trim.js";
 export * from "./common/types.js";
 export * from "./common/writing-mode.js";
 export * from "./components/button.js";
+export * from "./components/card.js";
 export * from "./components/checkbox.js";
 export * from "./components/collapse.js";
 export * from "./components/column.js";
 export * from "./components/control-group.js";
 export * from "./components/dialog.js";
-export * from "./components/dropdown.js";
 export * from "./components/dropdown-input.js";
+export * from "./components/dropdown.js";
 export * from "./components/flex-space.js";
 export * from "./components/heading.js";
 export * from "./components/label.js";
@@ -23,7 +24,7 @@ export * from "./components/popover.js";
 export * from "./components/radio-buttons.js";
 export * from "./components/row.js";
 export * from "./components/scroll-view.js";
-export * from "./components/text.js";
 export * from "./components/text-input.js";
+export * from "./components/text.js";
 export * from "./components/validation.js";
 export * from "./components/value.js";

package/src/test.tsx

@@ -1,2 +1,3 @@
 export * from "./common/theme-test.js";
+export * from "./components/checkbox-test.js";
 export * from "./components/collapse-test.js";

package/src/theme/base.scss

@@ -12,16 +12,21 @@ $root-size: 14px;
 	font-size: #{math.div(1rem, 16px) * $root-size};
 	line-height: 1;
 
+	--accent: rgb(0, 192, 255);
+	accent-color: var(--accent);
+
 	--content-column-gap: #{px(16)};
 	--content-row-gap: #{px(16)};
 	--content-radius: #{px(8)};
 	--content-border: #{px(2)};
+	--content-shadow: 0 0 #{px(16)} rgba(0, 0, 0, .2);
 	@include common.define-quad(content-pad, px(20), px(20));
 
 	--control-column-gap: #{px(8)};
 	--control-row-gap: #{px(8)};
-	--control-radius: #{px(4)};
-	--control-border: #{px(1)};
+	--control-radius: #{px(5)};
+	--control-border: #{px(2)};
+	--control-shadow: 0 0 #{px(3)} rgba(0, 0, 0, .5);
 	--control-disabled: opacity(.5);
 	@include common.define-quad(control-pad, px(8), px(10));
 
@@ -33,17 +38,18 @@ $root-size: 14px;
 	--space-gap: #{px(6)};
 
 	--layout-transition: .15s ease;
+	--color-transition: .1s ease;
 }
 
 @include common.theme((
 	bg: (
-		dark: rgb(32, 32, 32),
+		dark: rgb(36, 36, 36),
 	),
 	fg: (
 		dark: white,
 	),
 	focus-outline: (
-		dark: var(--control-border) dashed rgb(0, 127, 255),
+		dark: var(--control-border) dashed var(--accent),
 	),
 ));
 
@@ -65,5 +71,5 @@ body {
 }
 
 ::selection {
-	background-color: rgba(0, 100, 200, .7);
+	background-color: rgba(0, 150, 200, .6);
 }

package/src/theme/components/button.scss

@@ -2,75 +2,75 @@
 
 @include common.theme((
 	button-default-bg: (
-		dark: rgb(54, 54, 54),
+		dark: rgb(64, 64, 64),
 	),
-	button-default-bg-lit: (
-		dark: rgb(72, 72, 72),
+	button-default-bg-hover: (
+		dark: rgb(90, 90, 90),
 	),
 	button-default-fg: (
 		dark: var(--fg),
 	),
-	button-default-border: (
-		dark: rgb(80, 80, 80),
-	),
 
 	button-primary-bg: (
-		dark: rgb(0, 100, 200),
+		dark: rgb(0, 192, 255),
 	),
-	button-primary-bg-lit: (
-		dark: rgb(0, 128, 255),
+	button-primary-bg-hover: (
+		dark: rgb(92, 214, 255),
 	),
 	button-primary-fg: (
-		dark: white,
+		dark: black,
 	),
-	button-primary-border: (
-		dark: rgb(0, 100, 200),
+	button-primary-focus: (
+		dark: rgb(200, 241, 255),
 	),
 
 	button-success-bg: (
 		dark: rgb(0, 200, 100),
 	),
-	button-success-bg-lit: (
+	button-success-bg-hover: (
 		dark: rgb(0, 242, 121),
 	),
 	button-success-fg: (
 		dark: black,
 	),
-	button-success-border: (
-		dark: rgb(0, 200, 100),
+	button-success-focus: (
+		dark: rgb(200, 255, 228),
 	),
 
 	button-warning-bg: (
-		dark: rgb(255, 200, 0),
+		dark: rgb(230, 180, 0),
 	),
-	button-warning-bg-lit: (
-		dark: rgb(255, 224, 122),
+	button-warning-bg-hover: (
+		dark: rgb(255, 220, 105),
 	),
 	button-warning-fg: (
 		dark: black,
 	),
-	button-warning-border: (
-		dark: rgb(255, 200, 0),
+	button-warning-focus: (
+		dark: rgb(255, 243, 200),
 	),
 
 	button-danger-bg: (
 		dark: rgb(255, 0, 64),
 	),
-	button-danger-bg-lit: (
-		dark: rgb(255, 64, 96),
+	button-danger-bg-hover: (
+		dark: rgb(255, 70, 100),
 	),
 	button-danger-fg: (
 		dark: black,
 	),
-	button-danger-border: (
-		dark: rgb(255, 0, 64),
+	button-danger-focus: (
+		dark: rgb(255, 200, 214),
 	),
 
 	button-input-bg: (
 		dark: rgb(16, 16, 16),
 	),
-	button-input-bg-lit: (
-		dark: rgb(36, 36, 36),
+	button-input-bg-hover: (
+		dark: rgb(60, 60, 60),
+	),
+	button-input-bg-active: (
+		dark: rgb(80, 80, 80),
 	),
 	button-input-fg: (
 		dark: white,
@@ -78,6 +78,19 @@
 	button-input-border: (
 		dark: rgb(80, 80, 80),
 	),
+
+	button-text-bg: (
+		dark: transparent,
+	),
+	button-text-bg-hover: (
+		dark: rgb(80, 80, 80),
+	),
+	button-text-bg-active: (
+		dark: rgb(100, 100, 100),
+	),
+	button-text-fg: (
+		dark: var(--fg),
+	),
 ));
 
 .button {
@@ -92,6 +105,12 @@
 	@include common.padding(control-pad, var(--control-border));
 
 	border-radius: var(--control-radius);
+	transition: var(--color-transition) background-color,
+		var(--color-transition) border-color;
+
+	&:not(.button_text) {
+		box-shadow: var(--control-shadow);
+	}
 
 	&[disabled] {
 		cursor: default;
@@ -99,14 +118,22 @@
 	}
 }
 
-@each $variant in (default, primary, success, warning, danger, input) {
+@each $variant in (default, primary, success, warning, danger, input, text) {
 	.button_#{$variant} {
 		background-color: var(--button-#{$variant}-bg);
 		color: var(--button-#{$variant}-fg);
-		border: var(--control-border) solid var(--button-#{$variant}-border, transparent);
-		&:hover:not(:active):not([disabled]),
-		&:focus-visible:not([disabled]) {
-			background-color: var(--button-#{$variant}-bg-lit);
+		border: var(--button-#{$variant}-border, transparent) solid var(--control-border);
+
+		&:hover:not(:active):not([disabled]) {
+			background-color: var(--button-#{$variant}-bg-hover);
+		}
+
+		&:focus-visible {
+			border-color: var(--button-#{$variant}-focus, var(--accent));
+		}
+
+		&:active {
+			background-color: var(--button-#{$variant}-bg-active, var(--button-#{$variant}-bg));
 		}
 	}
 }

package/src/theme/components/card.scss

@@ -0,0 +1,31 @@
+@use "../common";
+
+@include common.theme((
+	card-default-border: (
+		dark: rgb(72, 72, 72),
+	),
+	card-info-border: (
+		dark: rgb(0, 96, 128),
+	),
+	card-success-border: (
+		dark: rgb(0, 128, 64),
+	),
+	card-warning-border: (
+		dark: rgb(150, 117, 0),
+	),
+	card-danger-border: (
+		dark: rgb(160, 0, 40),
+	),
+));
+
+.card {
+	box-shadow: var(--content-shadow);
+	border-radius: var(--content-radius);
+	@include common.padding(content-pad, var(--content-border));
+}
+
+@each $name in (default, info, success, warning, danger) {
+	.card_#{$name} {
+		border: var(--content-border) solid var(--card-#{$name}-border);
+	}
+}

package/src/theme/components/column.scss

@@ -10,12 +10,20 @@
 		);
 	}
 
+	& > :first-child {
+		margin-block-start: calc(var(--parent-row-gap) * (var(--space-scale) - 1) / 2);
+	}
+
 	& > :not(:last-child) {
 		margin-block-end: calc(
 			(var(--space-below, var(--parent-row-gap)) - var(--parent-row-gap)) * var(--space-scale)
 			+ var(--parent-row-gap) * (var(--space-scale) - 1) / 2
 		);
 	}
+
+	& > :last-child {
+		margin-block-end: calc(var(--parent-row-gap) * (var(--space-scale) - 1) / 2);
+	}
 }
 
 @each $size in "content", "control" {

package/src/theme/components/control-group.scss

@@ -2,7 +2,12 @@
 .control_group {
 	display: flex;
 	flex-direction: row;
-	flex-wrap: wrap;
+
+	box-shadow: var(--control-shadow);
+	* {
+		--control-shadow: none;
+	}
+
 	& > :not(:first-child) {
 		border-start-start-radius: 0;
 		border-end-start-radius: 0;

package/src/theme/components/link.scss

@@ -2,7 +2,7 @@
 
 @include common.theme((
 	link-fg: (
-		dark: rgb(64, 160, 255),
+		dark: rgb(64, 208, 255),
 	),
 ));
 

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

@@ -11,7 +11,7 @@
 		dark: rgb(80, 80, 80),
 	),
 	text-input-border-lit: (
-		dark: rgb(0, 128, 255),
+		dark: var(--accent),
 	),
 ));
 
@@ -26,7 +26,7 @@
 	@include common.padding(control-pad);
 	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);
 

package/src/theme/theme.scss

@@ -1,6 +1,7 @@
 @forward "base";
 
 @forward "components/button";
+@forward "components/card";
 @forward "components/checkbox";
 @forward "components/collapse";
 @forward "components/column";