@rvx/ui 0.1.25 → 0.1.27

package/dist/theme.module.css

@@ -2,7 +2,6 @@
   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;
@@ -12,28 +11,26 @@
   --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;
-  --content-pad-inline-end: 1.4285714286rem;
+  --content-pad-block-start: 1.1428571429rem;
+  --content-pad-inline-start: 1.1428571429rem;
+  --content-pad-block-end: 1.1428571429rem;
+  --content-pad-inline-end: 1.1428571429rem;
   --group-column-gap: 1.1428571429rem;
   --group-row-gap: 1.1428571429rem;
-  --group-pad-block-start: 1.4285714286rem;
-  --group-pad-inline-start: 1.4285714286rem;
-  --group-pad-block-end: 1.4285714286rem;
-  --group-pad-inline-end: 1.4285714286rem;
+  --group-pad-block-start: 1.1428571429rem;
+  --group-pad-inline-start: 1.1428571429rem;
+  --group-pad-block-end: 1.1428571429rem;
+  --group-pad-inline-end: 1.1428571429rem;
   --control-column-gap: 0.5714285714rem;
   --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;
-  --control-pad-block-end: 0.5714285714rem;
-  --control-pad-inline-end: 0.7142857143rem;
-  --input-padding: 0.2857142857rem;
+  --control-pad-block-start: 0.5rem;
+  --control-pad-inline-start: 0.5714285714rem;
+  --control-pad-block-end: 0.5rem;
+  --control-pad-inline-end: 0.5714285714rem;
+  --input-extension: 0.2857142857rem;
   --separator: 0.0714285714rem;
   --focus-outline-offset: 0.1428571429rem;
   --overflow-safe-area: 0.2857142857rem;
@@ -44,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;
   }
 }
@@ -72,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);
@@ -111,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;
   }
@@ -151,8 +204,8 @@ body {
   line-height: 1;
   cursor: pointer;
   outline: none;
-  padding-block: calc(var(--control-pad-block-start) - var(--control-border)) calc(var(--control-pad-block-end) - var(--control-border));
-  padding-inline: calc(var(--control-pad-inline-start) - var(--control-border)) calc(var(--control-pad-inline-end) - var(--control-border));
+  padding-block: var(--control-pad-block-start) var(--control-pad-block-end);
+  padding-inline: var(--control-pad-inline-start) var(--control-pad-inline-end);
   border-radius: var(--control-radius);
   transition: var(--color-transition) background-color, var(--color-transition) border-color;
 }
@@ -273,23 +326,31 @@ 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));
-  padding-inline: calc(var(--content-pad-inline-start) - var(--content-border)) calc(var(--content-pad-inline-end) - var(--content-border));
+  padding-block: var(--content-pad-block-start) var(--content-pad-block-end);
+  padding-inline: var(--content-pad-inline-start) var(--content-pad-inline-end);
 }
 
 .card_default {
@@ -329,8 +390,8 @@ body {
 }
 
 .checkbox_padding {
-  padding: var(--input-padding);
-  margin: calc(var(--input-padding) * -1);
+  padding: var(--input-extension);
+  margin: calc(var(--input-extension) * -1);
 }
 
 .checkbox_input {
@@ -425,8 +486,8 @@ body {
   --parent-row-gap: var(--content-row-gap);
 }
 .column_content.column_padded {
-  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));
+  padding-block: var(--content-pad-block-start) var(--content-pad-block-end);
+  padding-inline: var(--content-pad-inline-start) var(--content-pad-inline-end);
 }
 
 .column_group {
@@ -436,8 +497,8 @@ body {
   --parent-row-gap: var(--group-row-gap);
 }
 .column_group.column_padded {
-  padding-block: calc(var(--group-pad-block-start) - var(--content-border)) calc(var(--group-pad-block-end) - var(--content-border));
-  padding-inline: calc(var(--group-pad-inline-start) - var(--content-border)) calc(var(--group-pad-inline-end) - var(--content-border));
+  padding-block: var(--group-pad-block-start) var(--group-pad-block-end);
+  padding-inline: var(--group-pad-inline-start) var(--group-pad-inline-end);
 }
 
 .column_control {
@@ -447,8 +508,8 @@ body {
   --parent-row-gap: var(--control-row-gap);
 }
 .column_control.column_padded {
-  padding-block: calc(var(--control-pad-block-start) - var(--content-border)) calc(var(--control-pad-block-end) - var(--content-border));
-  padding-inline: calc(var(--control-pad-inline-start) - var(--content-border)) calc(var(--control-pad-inline-end) - var(--content-border));
+  padding-block: var(--control-pad-block-start) var(--control-pad-block-end);
+  padding-inline: var(--control-pad-inline-start) var(--control-pad-inline-end);
 }
 
 .control_group {
@@ -468,19 +529,10 @@ 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: 5fr minmax(auto, var(--dialog-block-size)) 7fr;
@@ -514,31 +566,29 @@ 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);
-  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));
+  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 {
-  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));
+  padding-block: var(--content-pad-block-start) var(--content-pad-block-end);
+  padding-inline: var(--content-pad-inline-start) var(--content-pad-inline-end);
 }
 
+: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;
   }
@@ -552,8 +602,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);
@@ -564,13 +614,14 @@ 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 {
   cursor: pointer;
-  padding-block: calc(var(--control-pad-block-start) - var(--control-border)) calc(var(--control-pad-block-end) - var(--control-border));
-  padding-inline: calc(var(--control-pad-inline-start) - var(--control-border)) calc(var(--control-pad-inline-end) - var(--control-border));
+  padding-block: var(--control-pad-block-start) var(--control-pad-block-end);
+  padding-inline: var(--control-pad-inline-start) var(--control-pad-inline-end);
+  border: transparent solid var(--control-border);
 }
 .dropdown_item.dropdown_item_active {
   background-color: var(--dropdown-item-active-bg);
@@ -619,6 +670,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);
@@ -639,16 +693,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;
@@ -660,6 +708,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;
@@ -690,11 +749,11 @@ h6.heading {
   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;
-  padding-block: calc(var(--control-pad-block-start) - var(--control-border)) calc(var(--control-pad-block-end) - var(--control-border));
-  padding-inline: calc(var(--control-pad-inline-start) - var(--control-border)) calc(var(--control-pad-inline-end) - var(--control-border));
-  border-radius: var(--control-radius);
+  padding-block: var(--control-pad-block-start) var(--control-pad-block-end);
+  padding-inline: var(--control-pad-inline-start) var(--control-pad-inline-end);
   transition: var(--color-transition) background-color, var(--color-transition) border-color;
 }
 .nav_list_item[disabled] {
@@ -717,14 +776,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;
   }
 }
@@ -747,13 +812,13 @@ 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);
 }
 .notification:not(.notification_raw) {
-  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));
+  padding-block: var(--content-pad-block-start) var(--content-pad-block-end);
+  padding-inline: var(--content-pad-inline-start) var(--content-pad-inline-end);
 }
 
 .notification_default {
@@ -812,14 +877,6 @@ h6.heading {
   --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;
@@ -842,15 +899,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);
@@ -859,9 +916,11 @@ h6.heading {
 
 .popover_content {
   border-radius: var(--content-radius);
-  border: var(--content-border) solid var(--popover-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));
+  border: var(--content-border) solid var(--overlay-border);
+}
+.popover_content:not(.popover_raw) {
+  padding-block: var(--content-pad-block-start) var(--content-pad-block-end);
+  padding-inline: var(--content-pad-inline-start) var(--content-pad-inline-end);
 }
 
 .radio_buttons {
@@ -887,8 +946,8 @@ h6.heading {
 }
 
 .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 {
@@ -911,6 +970,10 @@ h6.heading {
   --parent-column-gap: var(--content-column-gap);
   --parent-row-gap: var(--content-row-gap);
 }
+.row_content.row_padded {
+  padding-block: var(--content-pad-block-start) var(--content-pad-block-end);
+  padding-inline: var(--content-pad-inline-start) var(--content-pad-inline-end);
+}
 
 .row_group {
   column-gap: var(--group-column-gap);
@@ -920,6 +983,10 @@ h6.heading {
   --parent-column-gap: var(--group-column-gap);
   --parent-row-gap: var(--group-row-gap);
 }
+.row_group.row_padded {
+  padding-block: var(--group-pad-block-start) var(--group-pad-block-end);
+  padding-inline: var(--group-pad-inline-start) var(--group-pad-inline-end);
+}
 
 .row_control {
   column-gap: var(--control-column-gap);
@@ -929,11 +996,19 @@ h6.heading {
   --parent-column-gap: var(--control-column-gap);
   --parent-row-gap: var(--control-row-gap);
 }
+.row_control.row_padded {
+  padding-block: var(--control-pad-block-start) var(--control-pad-block-end);
+  padding-inline: var(--control-pad-inline-start) var(--control-pad-inline-end);
+}
 
+: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;
   }
 }
@@ -983,6 +1058,24 @@ h6.heading {
   opacity: 1;
 }
 
+.separated_column {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.separated_column > * + * {
+  border-block-start: calc(var(--separator) * var(--space-scale)) solid var(--separator-color);
+}
+
+.separated_row {
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+}
+.separated_row > * + * {
+  border-inline-start: calc(var(--separator) * var(--space-scale)) solid var(--separator-color);
+}
+
 .slider_host {
   display: flex;
   flex-direction: column;
@@ -996,6 +1089,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);
@@ -1020,8 +1121,8 @@ h6.heading {
   line-height: 1;
   cursor: pointer;
   outline: none;
-  padding-block: var(--control-pad-block-start) calc(var(--control-pad-block-end) - var(--control-border));
-  padding-inline: var(--control-pad-inline-start) var(--control-pad-inline-end);
+  padding-block: calc(var(--control-pad-block-start) + var(--control-border)) var(--control-pad-block-end);
+  padding-inline: 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);
   border: none;
@@ -1043,15 +1144,21 @@ h6.heading {
 }
 
 .tab_panel_padded {
-  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));
+  padding-block: var(--content-pad-block-start) var(--content-pad-block-end);
+  padding-inline: var(--content-pad-inline-start) var(--content-pad-inline-end);
 }
 
+: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;
   }
@@ -1080,7 +1187,7 @@ h6.heading {
 }
 
 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);
 }
 
 .text {
@@ -1093,9 +1200,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;
   }
 }