@rvx/ui 0.1.24 → 0.1.26

package/dist/theme.module.css

@@ -2,13 +2,15 @@
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   font-size: 0.875rem;
   line-height: 1;
-  --accent: rgb(0, 192, 255);
   accent-color: var(--accent);
+  --page-pad-block-start: 2.2857142857rem;
+  --page-pad-inline-start: 2.2857142857rem;
+  --page-pad-block-end: 2.2857142857rem;
+  --page-pad-inline-end: 2.2857142857rem;
   --content-column-gap: 1.7142857143rem;
   --content-row-gap: 1.7142857143rem;
   --content-radius: 0.5714285714rem;
   --content-border: 0.1428571429rem;
-  --content-shadow: 0 0 1.1428571429rem rgba(0, 0, 0, .2);
   --content-pad-block-start: 1.4285714286rem;
   --content-pad-inline-start: 1.4285714286rem;
   --content-pad-block-end: 1.4285714286rem;
@@ -23,7 +25,6 @@
   --control-row-gap: 0.5714285714rem;
   --control-radius: 0.3571428571rem;
   --control-border: 0.1428571429rem;
-  --control-shadow: 0 0 0.2142857143rem rgba(0, 0, 0, .5);
   --control-disabled: opacity(.5);
   --control-pad-block-start: 0.5714285714rem;
   --control-pad-inline-start: 0.7142857143rem;
@@ -40,12 +41,36 @@
   --layout-transition-ms: 150;
 }
 
+:root {
+  --bg: rgb(245, 245, 245);
+  --bg-alt: rgb(255, 255, 255);
+  --accent: rgb(0, 127, 255);
+  --fg: black;
+  --focus-outline: var(--control-border) dashed var(--accent);
+  --separator-color: rgb(220, 220, 220);
+  --selection-bg: rgba(0, 127, 255, 0.3);
+  --overlay-backdrop: rgba(245, 245, 245, 0.7);
+  --overlay-bg: var(--bg);
+  --overlay-border: rgb(216, 216, 216);
+  --overlay-shadow: 0 0 0.8571428571rem rgba(128, 128, 128, 0.2);
+  --content-shadow: 0 0 0.8571428571rem rgba(128, 128, 128, 0.2);
+  --control-shadow: 0 0 0.1428571429rem rgba(128, 128, 128, 0.2);
+}
 @media (prefers-color-scheme: dark) {
   :root {
-    --bg: rgb(36, 36, 36);
+    --bg: rgb(24, 24, 24);
+    --bg-alt: rgb(32, 32, 32);
+    --accent: rgb(64, 160, 255);
     --fg: white;
     --focus-outline: var(--control-border) dashed var(--accent);
     --separator-color: rgb(64, 64, 64);
+    --selection-bg: rgba(64, 160, 255, 0.5);
+    --overlay-backdrop: rgba(24, 24, 24, 0.8);
+    --overlay-bg: var(--bg);
+    --overlay-border: rgb(48, 48, 48);
+    --overlay-shadow: 0 0 0.8571428571rem rgba(0, 0, 0, 0.3);
+    --content-shadow: 0 0 0.8571428571rem rgba(0, 0, 0, 0.3);
+    --control-shadow: 0 0 0.2142857143rem rgba(0, 0, 0, 0.5);
     color-scheme: dark;
   }
 }
@@ -68,9 +93,12 @@ body {
 }
 
 ::selection {
-  background-color: rgba(0, 150, 200, 0.6);
+  background-color: var(--selection-bg);
 }
 
+:root {
+  --breadcrumb-separator: rgb(180, 180, 180);
+}
 @media (prefers-color-scheme: dark) {
   :root {
     --breadcrumb-separator: rgb(120, 120, 120);
@@ -107,35 +135,64 @@ body {
   stroke: var(--breadcrumb-separator);
 }
 
+:root {
+  --button-default-bg: rgb(92, 92, 92);
+  --button-default-bg-hover: rgb(128, 128, 128);
+  --button-default-fg: white;
+  --button-default-focus: rgb(100, 178, 255);
+  --button-primary-bg: rgb(0, 127, 255);
+  --button-primary-bg-hover: rgb(64, 160, 255);
+  --button-primary-fg: white;
+  --button-primary-focus: rgb(0, 56, 112);
+  --button-success-bg: rgb(0, 255, 0);
+  --button-success-bg-hover: rgb(130, 255, 130);
+  --button-success-fg: black;
+  --button-success-focus: rgb(0, 160, 0);
+  --button-warning-bg: rgb(255, 200, 0);
+  --button-warning-bg-hover: rgb(255, 224, 112);
+  --button-warning-fg: black;
+  --button-warning-focus: rgb(150, 117, 0);
+  --button-danger-bg: rgb(255, 0, 0);
+  --button-danger-bg-hover: rgb(255, 80, 80);
+  --button-danger-fg: white;
+  --button-danger-focus: rgb(112, 0, 0);
+  --button-input-bg: rgb(250, 250, 250);
+  --button-input-bg-hover: rgb(230, 230, 230);
+  --button-input-fg: black;
+  --button-input-border: rgb(220, 220, 220);
+  --button-text-bg: transparent;
+  --button-text-bg-hover: rgb(230, 230, 230);
+  --button-text-bg-active: rgb(240, 240, 240);
+  --button-text-fg: var(--fg);
+}
 @media (prefers-color-scheme: dark) {
   :root {
-    --button-default-bg: rgb(64, 64, 64);
-    --button-default-bg-hover: rgb(90, 90, 90);
-    --button-default-fg: var(--fg);
-    --button-primary-bg: rgb(0, 192, 255);
-    --button-primary-bg-hover: rgb(92, 214, 255);
+    --button-default-bg: rgb(72, 72, 72);
+    --button-default-bg-hover: rgb(100, 100, 100);
+    --button-default-fg: white;
+    --button-primary-bg: rgb(64, 160, 255);
+    --button-primary-bg-hover: rgb(112, 184, 255);
     --button-primary-fg: black;
     --button-primary-focus: rgb(200, 241, 255);
-    --button-success-bg: rgb(0, 200, 100);
-    --button-success-bg-hover: rgb(0, 242, 121);
+    --button-success-bg: rgb(64, 255, 64);
+    --button-success-bg-hover: rgb(160, 255, 160);
     --button-success-fg: black;
-    --button-success-focus: rgb(200, 255, 228);
-    --button-warning-bg: rgb(230, 180, 0);
-    --button-warning-bg-hover: rgb(255, 220, 105);
+    --button-success-focus: rgb(224, 255, 224);
+    --button-warning-bg: rgb(255, 200, 0);
+    --button-warning-bg-hover: rgb(255, 224, 112);
     --button-warning-fg: black;
     --button-warning-focus: rgb(255, 243, 200);
-    --button-danger-bg: rgb(255, 0, 64);
-    --button-danger-bg-hover: rgb(255, 70, 100);
-    --button-danger-fg: black;
+    --button-danger-bg: rgb(255, 40, 40);
+    --button-danger-bg-hover: rgb(255, 100, 100);
+    --button-danger-fg: white;
     --button-danger-focus: rgb(255, 200, 214);
-    --button-input-bg: rgb(16, 16, 16);
-    --button-input-bg-hover: rgb(40, 40, 40);
-    --button-input-bg-active: rgb(60, 60, 60);
+    --button-input-bg: rgb(48, 48, 48);
+    --button-input-bg-hover: rgb(64, 64, 64);
     --button-input-fg: white;
-    --button-input-border: rgb(0, 0, 0);
+    --button-input-border: transparent;
     --button-text-bg: transparent;
-    --button-text-bg-hover: rgb(80, 80, 80);
-    --button-text-bg-active: rgb(100, 100, 100);
+    --button-text-bg-hover: rgb(48, 48, 48);
+    --button-text-bg-active: rgb(64, 64, 64);
     --button-text-fg: var(--fg);
     color-scheme: dark;
   }
@@ -269,19 +326,27 @@ body {
   text-align: left;
 }
 
+:root {
+  --card-default-border: rgb(216, 216, 216);
+  --card-info-border: rgb(0, 127, 255);
+  --card-success-border: rgb(0, 255, 0);
+  --card-warning-border: rgb(255, 200, 0);
+  --card-danger-border: rgb(255, 0, 0);
+}
 @media (prefers-color-scheme: dark) {
   :root {
-    --card-default-border: rgb(72, 72, 72);
-    --card-info-border: rgb(0, 192, 255);
-    --card-success-border: rgb(0, 255, 128);
+    --card-default-border: rgb(36, 36, 36);
+    --card-info-border: rgb(64, 160, 255);
+    --card-success-border: rgb(64, 255, 64);
     --card-warning-border: rgb(255, 200, 0);
-    --card-danger-border: rgb(255, 0, 64);
+    --card-danger-border: rgb(255, 64, 64);
     color-scheme: dark;
   }
 }
 .card {
   box-shadow: var(--content-shadow);
   border-radius: var(--content-radius);
+  background-color: var(--bg-alt);
 }
 .card:not(.card_raw) {
   padding-block: calc(var(--content-pad-block-start) - var(--content-border)) calc(var(--content-pad-block-end) - var(--content-border));
@@ -464,22 +529,13 @@ body {
   border-end-end-radius: 0;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --dialog-container-bg: rgba(32, 32, 32, 0.8);
-    --dialog-bg: var(--bg);
-    --dialog-border: rgb(72, 72, 72);
-    --dialog-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
-    color-scheme: dark;
-  }
-}
 .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;
   transition: opacity var(--layout-transition);
   opacity: 0;
@@ -510,17 +566,17 @@ body {
   grid-column: 2/3;
   transform: scale(0.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);
   padding-block: calc(var(--content-pad-block-start) - var(--content-border)) calc(var(--content-pad-block-end) - var(--content-border));
   padding-inline: calc(var(--content-pad-inline-start) - var(--content-border)) calc(var(--content-pad-inline-end) - 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));
 }
@@ -530,11 +586,11 @@ body {
   padding-inline: calc(var(--content-pad-inline-start) - var(--content-border)) calc(var(--content-pad-inline-end) - var(--content-border));
 }
 
+:root {
+  --dropdown-item-active-bg: rgb(224, 224, 224);
+}
 @media (prefers-color-scheme: dark) {
   :root {
-    --dropdown-bg: var(--bg);
-    --dropdown-border: rgb(72, 72, 72);
-    --dropdown-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
     --dropdown-item-active-bg: rgb(63, 63, 63);
     color-scheme: dark;
   }
@@ -548,8 +604,8 @@ body {
 }
 
 .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);
@@ -560,7 +616,7 @@ body {
   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 {
@@ -615,6 +671,9 @@ h6.heading {
   --space-above: 2rem;
 }
 
+:root {
+  --label-fg: rgb(100, 100, 100);
+}
 @media (prefers-color-scheme: dark) {
   :root {
     --label-fg: rgb(200, 200, 200);
@@ -635,16 +694,10 @@ h6.heading {
   margin-block-start: calc(var(--line-gap) / -2);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --link-fg: rgb(64, 208, 255);
-    color-scheme: dark;
-  }
-}
 .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;
@@ -656,6 +709,17 @@ h6.heading {
   text-decoration: underline;
 }
 
+:root {
+  --nav-list-item-bg: transparent;
+  --nav-list-item-bg-hover: rgba(0, 0, 0, 0.075);
+  --nav-list-item-bg-active: rgba(0, 0, 0, 0.125);
+  --nav-list-item-bg-current: rgba(0, 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;
+}
 @media (prefers-color-scheme: dark) {
   :root {
     --nav-list-item-bg: transparent;
@@ -713,14 +777,20 @@ h6.heading {
   z-index: 1;
 }
 
+:root {
+  --notification-default-border: rgb(200, 200, 200);
+  --notification-info-border: rgb(0, 127, 255);
+  --notification-success-border: rgb(0, 255, 0);
+  --notification-warning-border: rgb(255, 200, 0);
+  --notification-danger-border: rgb(255, 0, 0);
+}
 @media (prefers-color-scheme: dark) {
   :root {
-    --notification-default-border: rgb(72, 72, 72);
-    --notification-info-border: rgb(0, 192, 255);
-    --notification-success-border: rgb(0, 255, 128);
+    --notification-default-border: rgb(48, 48, 48);
+    --notification-info-border: rgb(64, 160, 255);
+    --notification-success-border: rgb(64, 255, 64);
     --notification-warning-border: rgb(255, 200, 0);
-    --notification-danger-border: rgb(255, 0, 64);
-    --notification-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
+    --notification-danger-border: rgb(255, 64, 64);
     color-scheme: dark;
   }
 }
@@ -743,7 +813,7 @@ h6.heading {
 
 .notification {
   pointer-events: all;
-  box-shadow: var(--notification-shadow);
+  box-shadow: var(--content-shadow);
   border-radius: var(--content-radius);
   background-color: var(--bg);
 }
@@ -773,11 +843,24 @@ h6.heading {
 }
 
 .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_center_block > .page_content_col {
+  display: grid;
+  grid-template-rows: 5fr auto 7fr;
+}
+.page_center_block > .page_content_col > .page_content {
+  grid-row: 2;
+}
+
 .page_scrollbar_comp {
   flex-grow: 1;
   flex-basis: 0;
@@ -787,21 +870,14 @@ h6.heading {
 .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;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --popover-bg: var(--bg);
-    --popover-border: rgb(72, 72, 72);
-    --popover-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
-    color-scheme: dark;
-  }
-}
 .popover {
   position: relative;
   outline: none;
@@ -824,15 +900,15 @@ h6.heading {
 .popover_spike svg {
   width: 2rem;
   height: 1rem;
-  fill: var(--popover-border);
+  fill: var(--overlay-border);
   transform-origin: bottom;
   transform: scale(0.75);
   stroke: none;
 }
 
 .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);
@@ -841,7 +917,7 @@ h6.heading {
 
 .popover_content {
   border-radius: var(--content-radius);
-  border: var(--content-border) solid var(--popover-border);
+  border: var(--content-border) solid var(--overlay-border);
   padding-block: calc(var(--content-pad-block-start) - var(--content-border)) calc(var(--content-pad-block-end) - var(--content-border));
   padding-inline: calc(var(--content-pad-inline-start) - var(--content-border)) calc(var(--content-pad-inline-end) - var(--content-border));
 }
@@ -912,10 +988,14 @@ h6.heading {
   --parent-row-gap: var(--control-row-gap);
 }
 
+:root {
+  --scroll-view-indicator-size: 2rem;
+  --scroll-view-indicator-color: rgba(0, 0, 0, 0.2);
+}
 @media (prefers-color-scheme: dark) {
   :root {
-    --scroll-view-indicator-size: 1.5rem;
-    --scroll-view-indicator-color: rgba(0, 0, 0, 0.7);
+    --scroll-view-indicator-size: 2rem;
+    --scroll-view-indicator-color: rgba(0, 0, 0, 0.6);
     color-scheme: dark;
   }
 }
@@ -978,6 +1058,14 @@ h6.heading {
   outline: var(--focus-outline);
 }
 
+:root {
+  --tab-handle-marker: rgb(160, 160, 160);
+  --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);
+}
 @media (prefers-color-scheme: dark) {
   :root {
     --tab-handle-marker: rgb(150, 150, 150);
@@ -1029,11 +1117,17 @@ h6.heading {
   padding-inline: calc(var(--content-pad-inline-start) - var(--content-border)) calc(var(--content-pad-inline-end) - var(--content-border));
 }
 
+:root {
+  --text-input-bg: rgb(250, 250, 250);
+  --text-input-fg: black;
+  --text-input-border: rgb(220, 220, 220);
+  --text-input-border-lit: var(--accent);
+}
 @media (prefers-color-scheme: dark) {
   :root {
-    --text-input-bg: rgb(16, 16, 16);
+    --text-input-bg: rgb(36, 36, 36);
     --text-input-fg: white;
-    --text-input-border: rgb(0, 0, 0);
+    --text-input-border: rgb(54, 54, 54);
     --text-input-border-lit: var(--accent);
     color-scheme: dark;
   }
@@ -1075,9 +1169,12 @@ input.text_input {
   margin-block-start: calc(var(--line-gap) / -2);
 }
 
+:root {
+  --validation-message-fg: rgb(212, 0, 0);
+}
 @media (prefers-color-scheme: dark) {
   :root {
-    --validation-message-fg: rgb(255, 84, 127);
+    --validation-message-fg: rgb(255, 64, 64);
     color-scheme: dark;
   }
 }

package/dist/theme.module.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../src/theme/base.scss","../src/theme/common.scss","../src/theme/components/breadcrumbs.scss","../src/theme/components/button.scss","../src/theme/components/card.scss","../src/theme/components/checkbox.scss","../src/theme/components/collapse.scss","../src/theme/components/column.scss","../src/theme/components/control-group.scss","../src/theme/components/dialog.scss","../src/theme/components/dropdown.scss","../src/theme/components/flex-space.scss","../src/theme/components/heading.scss","../src/theme/components/label.scss","../src/theme/components/link.scss","../src/theme/components/nav-list.scss","../src/theme/components/notifications.scss","../src/theme/components/page.scss","../src/theme/components/popover.scss","../src/theme/components/radio-buttons.scss","../src/theme/components/row.scss","../src/theme/components/scroll-view.scss","../src/theme/components/slider.scss","../src/theme/components/tabs.scss","../src/theme/components/text-input.scss","../src/theme/components/text.scss","../src/theme/components/validation.scss","../src/theme/components/value.scss"],"names":[],"mappings":"AASA;EACC;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;ECOA;EACA;EACA;EACA;EDPA;EACA;ECGA;EACA;EACA;EACA;EDHA;EACA;EACA;EACA;EACA;EACA;ECLA;EACA;EACA;EACA;EDKA;EAEA;EAEA;EAEA;EAEA;EACA;EAEA;EACA;EAEA;;;ACrCC;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;ADqDH;EACC;EACA;EAEA;;AACA;EALD;IAME;;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;ACzEC;EAFD;IANE;IAUA;;;ACPH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;ADtBC;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AEgFH;EACC;EACA;EACA;EACA;EAEA;EAEA;EFnEC,eACC;EAED,gBACC;EEkEF;EACA;;AAGA;EACC;;AAGD;EACC;EACA;;;AAKD;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAKH;EACC;;;AFhIC;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAUA;;;AGKH;EACC;EACA;;AAEA;EHYC,eACC;EAED,gBACC;;;AGVF;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AC9BF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AC3BD;EACC;EACA;EACA;EACA;;;AAGD;EACC,YACC;;;AAKF;EACC;IAAO;;EACP;IAAM;;EACN;IAAM;;EACN;IAAK;;;AAGN;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC,YACC;;AAIF;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC,YACC;;AAKF;EACC;EACA;EACA;;;AC9DF;EACC;EACA;;AAEA;EACC;;AAMD;EACC;;AAGD;EACC;;AAMD;EACC;;;AAKD;EACC;;AACA;EACC;;AAGD;ENAA,eACC;EAED,gBACC;;;AMVF;EACC;;AACA;EACC;;AAGD;ENAA,eACC;EAED,gBACC;;;AMVF;EACC;;AACA;EACC;;AAGD;ENAA,eACC;EAED,gBACC;;;AOvCH;EACC;EACA;EAEA;;AACA;EACC;;AAGD;EACC;EACA;;AAED;EACC;EACA;;;APHA;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AQEH;EACC;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAGD;EACC;;AACA;EACC;;;AAIF;EACC;EACA;;AACA;EACC;;;AAIF;EACC;IACC;;;AAIF;EACC;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;ER5BC,eACC;EAED,gBACC;;;AQ4BH;EACC;EACA;EACA;EACA;;;AAGD;ERvCE,eACC;EAED,gBACC;;;AA3BD;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;ASEH;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;ETPC,eACC;EAED,gBACC;;ASMF;EACC;;;AC9CF;EACC;EACA;EACA;;;ACHD;EACC;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;;;AXxBC;EAFD;IANE;IAUA;;;AYPH;EACC;EACA;EAEA;EACA;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;AZRA;EAFD;IANE;IAUA;;;AaPH;EACC;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AbTA;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AciBH;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EdhBC,eACC;EAED,gBACC;EceF;EACA;;AAGA;EACC;EACA;;AAGD;EAEC;EACA;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;;AdnEC;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AeSH;EACC;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EfbC,eACC;EAED,gBACC;;;AeeF;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;ACvDF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AhBPC;EAFD;IANE;IAAA;IAAA;IAUA;;;AiBDH;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EAEA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EjBnBC,eACC;EAED,gBACC;;;AkBvCH;EACC;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;ACjCD;EACC;EACA;EACA;;;AAIA;EACC;EACA;;AACA;EACC;EACA;;;AALF;EACC;EACA;;AACA;EACC;EACA;;;AALF;EACC;EACA;;AACA;EACC;EACA;;;AnBAD;EAFD;IANE;IAAA;IAUA;;;AoBJH;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;ACrDD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;;ArBED;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AsBQH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EAEA;EACA;EAEA,eACC;EAED,gBACC;EAGD;EACA;EACA;EACA;EAEA;EACA;;AAGA;EAEC;EACA;;AAED;EACC;;;AAIF;EACC;EACA;;;AAGD;EtBjCE,eACC;EAED,gBACC;;;AA3BD;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AuBEH;EACC;EACA;EACA;EAEA;EAEA;EvBmBC,eACC;EAED,gBACC;EuBrBF;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AC3CD;EACC;;AAEA;EAEC;EACA;EACA;EACA;;;AxBIA;EAFD;IANE;IAUA;;;AyBPH;EACC;;;AAGD;EACC;;;ACZD;EACC","file":"theme.module.css"}
+{"version":3,"sourceRoot":"","sources":["../src/theme/base.scss","../src/theme/common.scss","../src/theme/components/breadcrumbs.scss","../src/theme/components/button.scss","../src/theme/components/card.scss","../src/theme/components/checkbox.scss","../src/theme/components/collapse.scss","../src/theme/components/column.scss","../src/theme/components/control-group.scss","../src/theme/components/dialog.scss","../src/theme/components/dropdown.scss","../src/theme/components/flex-space.scss","../src/theme/components/heading.scss","../src/theme/components/label.scss","../src/theme/components/link.scss","../src/theme/components/nav-list.scss","../src/theme/components/notifications.scss","../src/theme/components/page.scss","../src/theme/components/popover.scss","../src/theme/components/radio-buttons.scss","../src/theme/components/row.scss","../src/theme/components/scroll-view.scss","../src/theme/components/slider.scss","../src/theme/components/tabs.scss","../src/theme/components/text-input.scss","../src/theme/components/text.scss","../src/theme/components/validation.scss","../src/theme/components/value.scss"],"names":[],"mappings":"AASA;EACC;EACA;EACA;EAEA;ECcA;EACA;EACA;EACA;EDbA;EACA;EACA;EACA;ECOA;EACA;EACA;EACA;EDPA;EACA;ECGA;EACA;EACA;EACA;EDHA;EACA;EACA;EACA;EACA;ECJA;EACA;EACA;EACA;EDIA;EAEA;EAEA;EAEA;EAEA;EACA;EAEA;EACA;EAEA;;;ACtCA;EANE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AD4FH;EACC;EACA;EAEA;;AACA;EALD;IAME;;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AClHA;EANE;;AAQD;EAFD;IANE;IAUA;;;ACNH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;ADzBA;EANE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AE2GH;EACC;EACA;EACA;EACA;EAEA;EAEA;EF9FC,eACC;EAED,gBACC;EE6FF;EACA;;AAGA;EACC;;AAGD;EACC;EACA;;;AAKD;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAKH;EACC;;;AF7JA;EANE;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAUA;;;AGUH;EACC;EACA;EACA;;AAEA;EHMC,eACC;EAED,gBACC;;;AGJF;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;ACpCF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AC3BD;EACC;EACA;EACA;EACA;;;AAGD;EACC,YACC;;;AAKF;EACC;IAAO;;EACP;IAAM;;EACN;IAAM;;EACN;IAAK;;;AAGN;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC,YACC;;AAIF;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC,YACC;;AAKF;EACC;EACA;EACA;;;AC9DF;EACC;EACA;;AAEA;EACC;;AAMD;EACC;;AAGD;EACC;;AAMD;EACC;;;AAKD;EACC;;AACA;EACC;;AAGD;ENAA,eACC;EAED,gBACC;;;AMVF;EACC;;AACA;EACC;;AAGD;ENAA,eACC;EAED,gBACC;;;AMVF;EACC;;AACA;EACC;;AAGD;ENAA,eACC;EAED,gBACC;;;AOvCH;EACC;EACA;EAEA;;AACA;EACC;;AAGD;EACC;EACA;;AAED;EACC;EACA;;;ACdF;EACC;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAGD;EACC;;AACA;EACC;;;AAIF;EACC;EACA;;AACA;EACC;;;AAIF;EACC;IACC;;;AAIF;EACC;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;ERbC,eACC;EAED,gBACC;;;AQaH;EACC;EACA;EACA;EACA;;;AAGD;ERxBE,eACC;EAED,gBACC;;;AA7BF;EANE;;AAQD;EAFD;IANE;IAUA;;;ASNH;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;ETCC,eACC;EAED,gBACC;;ASFF;EACC;;;ACtCF;EACC;EACA;EACA;;;ACHD;EACC;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;;;AX1BA;EANE;;AAQD;EAFD;IANE;IAUA;;;AYNH;EACC;EACA;EAEA;EACA;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;ACpBF;EACC;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AbLD;EANE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;Ac0BH;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EdzBC,eACC;EAED,gBACC;EcwBF;EACA;;AAGA;EACC;EACA;;AAGD;EAEC;EACA;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;;Ad9EA;EANE;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAUA;;;AeWH;EACC;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EffC,eACC;EAED,gBACC;;;AeiBF;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;ACzDF;EACC,eACC;EAED,gBACC;EAGD;EACA;EACA;;;AAGD;EACC;;AAEA;EACC;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;ACvCD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EAEA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EjBPC,eACC;EAED,gBACC;;;AkBvCH;EACC;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;ACjCD;EACC;EACA;EACA;;;AAIA;EACC;EACA;;AACA;EACC;EACA;;;AALF;EACC;EACA;;AACA;EACC;EACA;;;AALF;EACC;EACA;;AACA;EACC;EACA;;;AnBFF;EANE;EAAA;;AAQD;EAFD;IANE;IAAA;IAUA;;;AoBFH;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;ACvDD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;;ArBAF;EANE;EAAA;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AsBcH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EAEA;EACA;EAEA,eACC;EAED,gBACC;EAGD;EACA;EACA;EACA;EAEA;EACA;;AAGA;EAEC;EACA;;AAED;EACC;;;AAIF;EACC;EACA;;;AAGD;EtBvCE,eACC;EAED,gBACC;;;AA7BF;EANE;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AuBMH;EACC;EACA;EACA;EAEA;EAEA;EvBeC,eACC;EAED,gBACC;EuBjBF;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AC/CD;EACC;;AAEA;EAEC;EACA;EACA;EACA;;;AxBED;EANE;;AAQD;EAFD;IANE;IAUA;;;AyBNH;EACC;;;AAGD;EACC;;;ACbD;EACC","file":"theme.module.css"}

package/package.json

@@ -12,7 +12,7 @@
 		"rvx"
 	],
 	"license": "MIT",
-	"version": "0.1.24",
+	"version": "0.1.26",
 	"type": "module",
 	"main": "./dist/index.js",
 	"sideEffects": false,
@@ -28,6 +28,6 @@
 		"./dist/": "./dist/"
 	},
 	"peerDependencies": {
-		"rvx": "^22.4.2"
+		"rvx": "^22.4.3"
 	}
 }

package/src/common/theme.tsx

@@ -103,6 +103,7 @@ export interface Theme {
 	notification_danger?: string;
 
 	page?: string;
+	page_center_block?: string;
 	page_scrollbar_comp?: string;
 	page_content_col?: string;
 	page_content?: string;

package/src/components/page.tsx

@@ -1,9 +1,10 @@
-import { ClassValue, Expression, StyleValue } from "rvx";
+import { ClassValue, Expression, map, StyleValue } from "rvx";
 import { THEME } from "../common/theme.js";
 import { Column } from "./column.js";
 
 export function Page(props: {
 	inlineSize?: Expression<string | undefined>;
+	centerBlock?: Expression<boolean>;
 	role?: Expression<string | undefined>;
 	id?: Expression<string | undefined>;
 	class?: ClassValue;
@@ -17,6 +18,7 @@ export function Page(props: {
 		class={[
 			props.class,
 			theme?.page,
+			map(props.centerBlock, v => v ? theme?.page_center_block : undefined),
 		]}
 		style={[
 			props.style,

package/src/theme/base.scss

@@ -12,14 +12,14 @@ $root-size: 14px;
 	font-size: #{math.div(1rem, 16px) * $root-size};
 	line-height: 1;
 
-	--accent: rgb(0, 192, 255);
 	accent-color: var(--accent);
 
+	@include common.define-quad(page-pad, px(32), px(32));
+
 	--content-column-gap: #{px(24)};
 	--content-row-gap: #{px(24)};
 	--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));
 
 	--group-column-gap: #{px(16)};
@@ -30,7 +30,6 @@ $root-size: 14px;
 	--control-row-gap: #{px(8)};
 	--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));
 
@@ -53,16 +52,56 @@ $root-size: 14px;
 
 @include common.theme((
 	bg: (
-		dark: rgb(36, 36, 36),
+		dark: rgb(24, 24, 24),
+		light: rgb(245, 245, 245),
+	),
+	bg-alt: (
+		dark: rgb(32, 32, 32),
+		light: rgb(255, 255, 255),
+	),
+	accent: (
+		dark: rgb(64, 160, 255),
+		light: rgb(0, 127, 255),
 	),
 	fg: (
 		dark: white,
+		light: black,
 	),
 	focus-outline: (
 		dark: var(--control-border) dashed var(--accent),
+		light: var(--control-border) dashed var(--accent),
 	),
 	separator-color: (
 		dark: rgb(64, 64, 64),
+		light: rgb(220, 220, 220),
+	),
+	selection-bg: (
+		dark: rgba(64, 160, 255, 0.5),
+		light: rgba(0, 127, 255, 0.3),
+	),
+	overlay-backdrop: (
+		dark: rgba(24, 24, 24, .8),
+		light: rgba(245, 245, 245, .7),
+	),
+	overlay-bg: (
+		dark: var(--bg),
+		light: var(--bg),
+	),
+	overlay-border: (
+		dark: rgb(48, 48, 48),
+		light: rgb(216, 216, 216),
+	),
+	overlay-shadow: (
+		dark: 0 0 #{px(12)} rgba(0, 0, 0, .3),
+		light: 0 0 #{px(12)} rgba(128, 128, 128, .2),
+	),
+	content-shadow: (
+		dark: 0 0 #{px(12)} rgba(0, 0, 0, .3),
+		light: 0 0 #{px(12)} rgba(128, 128, 128, .2),
+	),
+	control-shadow: (
+		dark: 0 0 #{px(3)} rgba(0, 0, 0, 0.5),
+		light: 0 0 #{px(2)} rgba(128, 128, 128, .2),
 	),
 ));
 
@@ -84,5 +123,5 @@ body {
 }
 
 ::selection {
-	background-color: rgba(0, 150, 200, .6);
+	background-color: var(--selection-bg);
 }

package/src/theme/components/breadcrumbs.scss

@@ -3,6 +3,7 @@
 @include common.theme((
 	breadcrumb-separator: (
 		dark: rgb(120, 120, 120),
+		light: rgb(180, 180, 180),
 	),
 ));