vrembem 4.0.0-next.14 → 4.0.0-next.16

package/dev/base.css

@@ -13,7 +13,7 @@ body {
 
 html {
   box-sizing: border-box;
-  font-size: 16px;
+  font-size: var(--vb-font-size);
   line-height: var(--vb-line-height);
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
@@ -194,7 +194,6 @@ input::-moz-placeholder {
   color: inherit;
   font-family: inherit;
   font-weight: var(--vb-font-weight-semi-bold);
-  line-height: var(--vb-line-height-sm);
 }
 
 .h1 {
@@ -342,7 +341,6 @@ input::-moz-placeholder {
   color: var(--vb-foreground);
   font-family: inherit;
   font-weight: var(--vb-font-weight-semi-bold);
-  line-height: var(--vb-line-height-sm);
 }
 .type > h1 {
   font-size: 2.75em;
@@ -457,68 +455,80 @@ input::-moz-placeholder {
 }
 
 .button {
+  min-width: var(--vb-button-size, var(--vb-form-control-size));
+  min-height: var(--vb-button-size, var(--vb-form-control-size));
+  transition-property: var(--vb-button-transition-property, var(--vb-form-control-transition-property));
+  transition-duration: var(--vb-button-transition-duration, var(--vb-form-control-transition-duration));
+  transition-timing-function: var(--vb-button-transition-timing-function, var(--vb-form-control-transition-timing-function));
+  border-width: var(--vb-button-border-width, var(--vb-form-control-border-width));
+  border-radius: var(--vb-button-border-radius, var(--vb-form-control-border-radius));
+  padding: var(--vb-button-padding,  calc(0.5em - var(--vb-button-border-width, var(--vb-form-control-border-width))) calc(1em - var(--vb-button-border-width, var(--vb-form-control-border-width))));
+  font-size: var(--vb-button-font-size, var(--vb-form-control-font-size));
+  line-height: var(--vb-button-line-height, var(--vb-form-control-line-height));
   position: relative;
   display: inline-flex;
-  gap: var(--vb-button-gap);
+  gap: var(--vb-button-gap, 0.5rem);
   align-items: center;
   justify-content: center;
-  min-width: var(--vb-button-size);
-  height: var(--vb-button-size);
-  padding: var(--vb-button-padding);
-  transition-property: var(--vb-button-transition-property);
-  transition-duration: var(--vb-button-transition-duration);
-  transition-timing-function: var(--vb-button-transition-timing-function);
   outline: none;
-  border: var(--vb-button-border-width) solid var(--vb-button-border-color);
-  border-radius: var(--vb-button-border-radius);
-  background: var(--vb-button-background);
+  border-style: solid;
   background-clip: border-box;
-  box-shadow: var(--vb-button-box-shadow);
-  color: var(--vb-button-foreground);
   font-family: inherit;
-  font-size: var(--vb-button-font-size);
-  font-weight: var(--vb-button-font-weight);
-  line-height: var(--vb-button-line-height);
+  font-weight: inherit;
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
-}
-.button:disabled:not(.is-loading) {
-  opacity: var(--vb-button-disabled-opacity);
-  pointer-events: none;
-}
-.button:hover, .button:focus-visible {
-  border-color: var(--vb-button-border-color-hover);
-  background-color: var(--vb-button-background-hover);
-  box-shadow: var(--vb-button-box-shadow);
-  color: var(--vb-button-foreground-hover);
+  border-color: var(--vb-button-border-color, var(--vb-border-color-dark));
+  background-color: var(--vb-button-background, transparent);
+  box-shadow: var(--vb-button-box-shadow, 0 0 0 0 hsl(from var(--vb-button-accent, var(--vb-form-control-accent)) h s l/0%));
+  color: var(--vb-button-foreground, var(--vb-foreground));
+}
+.button:hover {
+  border-color: var(--vb-button-border-color-hover, var(--vb-button-border-color, var(--vb-border-color-darker)));
+  background-color: var(--vb-button-background-hover, var(--vb-button-background, transparent));
+  box-shadow: var(--vb-button-box-shadow-hover, var(--vb-button-box-shadow, 0 0 0 0 hsl(from var(--vb-button-accent, var(--vb-form-control-accent)) h s l/0%)));
+  color: var(--vb-button-foreground-hover, var(--vb-button-foreground, var(--vb-foreground)));
+}
+.button:focus {
+  border-color: var(--vb-button-border-color-focus, var(--vb-button-border-color-hover, var(--vb-button-border-color, var(--vb-border-color-darker))));
+  background-color: var(--vb-button-background-focus, var(--vb-button-background-hover, var(--vb-button-background, transparent)));
+  box-shadow: var(--vb-button-box-shadow-focus, var(--vb-button-box-shadow-hover, var(--vb-button-box-shadow, 0 0 0 0 hsl(from var(--vb-button-accent, var(--vb-form-control-accent)) h s l/0%))));
+  color: var(--vb-button-foreground-focus, var(--vb-button-foreground-hover, var(--vb-button-foreground, var(--vb-foreground))));
 }
 .button:focus-visible {
-  box-shadow: var(--vb-button-box-shadow-focus);
+  border-color: var(--vb-button-border-color-focus-visible, var(--vb-button-border-color-focus, var(--vb-button-border-color-hover, var(--vb-button-border-color, var(--vb-button-accent, var(--vb-form-control-accent))))));
+  background-color: var(--vb-button-background-focus-visible, var(--vb-button-background-focus, var(--vb-button-background-hover, var(--vb-button-background, transparent))));
+  box-shadow: var(--vb-button-box-shadow-focus-visible, var(--vb-button-box-shadow-focus, var(--vb-button-box-shadow-hover, var(--vb-button-box-shadow, 0 0 0 3px hsl(from var(--vb-button-accent, var(--vb-form-control-accent)) h s l/40%)))));
+  color: var(--vb-button-foreground-focus-visible, var(--vb-button-foreground-focus, var(--vb-button-foreground-hover, var(--vb-button-foreground, var(--vb-foreground)))));
 }
 .button:active {
-  border-color: var(--vb-button-border-color-active);
-  background-color: var(--vb-button-background-active);
-  box-shadow: var(--vb-button-box-shadow);
-  color: var(--vb-button-foreground-active);
+  border-color: var(--vb-button-border-color-active, var(--vb-button-border-color, var(--vb-foreground)));
+  background-color: var(--vb-button-background-active, var(--vb-button-background, transparent));
+  box-shadow: var(--vb-button-box-shadow-active, var(--vb-button-box-shadow, 0 0 0 0 hsl(from var(--vb-button-accent, var(--vb-form-control-accent)) h s l/0%)));
+  color: var(--vb-button-foreground-active, var(--vb-button-foreground, var(--vb-foreground)));
+}
+.button:disabled:not(.is-loading) {
+  opacity: var(--vb-button-disabled-opacity, 0.6);
+  pointer-events: none;
 }
 .button.is-loading {
   color: transparent !important;
   pointer-events: none;
 }
 .button.is-loading::after {
-  width: var(--vb-button-loading-size);
-  height: var(--vb-button-loading-size);
+  --vb-loading-color: var(--vb-button-foreground, var(--vb-foreground));
+  width: var(--vb-loading-size);
+  height: var(--vb-loading-size);
   content: "";
   position: absolute;
-  top: calc(50% - var(--vb-button-loading-size) * 0.5);
-  left: calc(50% - var(--vb-button-loading-size) * 0.5);
-  animation: spin var(--vb-button-loading-animation-duration) infinite var(--vb-button-loading-animation-timing-function);
-  border: var(--vb-button-loading-border);
+  top: calc(50% - var(--vb-loading-size) * 0.5);
+  left: calc(50% - var(--vb-loading-size) * 0.5);
+  display: inline-flex;
+  animation: spin var(--vb-loading-duration) infinite linear;
+  border: var(--vb-loading-border);
   border-radius: 9999px;
-  border-color: var(--vb-button-loading-border-color) var(--vb-button-loading-border-color) transparent transparent;
+  border-color: var(--vb-loading-color) var(--vb-loading-color) transparent transparent;
 }
-
 @keyframes spin {
   from {
     transform: rotate(0deg);
@@ -527,6 +537,7 @@ input::-moz-placeholder {
     transform: rotate(360deg);
   }
 }
+
 .button_block {
   display: flex;
   width: 100%;
@@ -588,87 +599,55 @@ input::-moz-placeholder {
   }
 }
 .button_color_primary {
+  --vb-button-accent: var(--vb-primary-50);
   --vb-button-background: var(--vb-primary-50);
-  --vb-button-background-hover: var(--vb-primary-40);
-  --vb-button-background-active: var(--vb-primary-30);
+  --vb-button-background-hover: hsl(from var(--vb-primary-50) h s 40%);
+  --vb-button-background-active: hsl(from var(--vb-primary-50) h s 30%);
   --vb-button-foreground: white;
-  --vb-button-foreground-hover: white;
-  --vb-button-foreground-active: white;
   --vb-button-border-color: transparent;
-  --vb-button-border-color-hover: transparent;
-  --vb-button-border-color-active: transparent;
-  --vb-button-box-shadow: 0 0 0 0 hsl(var(--vb-primary-hs) 50% / 0%);
-  --vb-button-box-shadow-focus: 0 0 0 0.2rem hsl(var(--vb-primary-hs) 50% / 50%);
   --vb-button-loading-border-color: white;
 }
 
 .button_color_secondary {
+  --vb-button-accent: var(--vb-secondary-50);
   --vb-button-background: var(--vb-secondary-50);
-  --vb-button-background-hover: var(--vb-secondary-40);
-  --vb-button-background-active: var(--vb-secondary-30);
+  --vb-button-background-hover: hsl(from var(--vb-secondary-50) h s 40%);
+  --vb-button-background-active: hsl(from var(--vb-secondary-50) h s 30%);
   --vb-button-foreground: white;
-  --vb-button-foreground-hover: white;
-  --vb-button-foreground-active: white;
   --vb-button-border-color: transparent;
-  --vb-button-border-color-hover: transparent;
-  --vb-button-border-color-active: transparent;
-  --vb-button-box-shadow: 0 0 0 0 hsl(var(--vb-secondary-hs) 50% / 0%);
-  --vb-button-box-shadow-focus: 0 0 0 0.2rem hsl(var(--vb-secondary-hs) 50% / 50%);
   --vb-button-loading-border-color: white;
 }
 
 .button_color_neutral {
+  --vb-button-accent: var(--vb-neutral-50);
   --vb-button-background: var(--vb-neutral-50);
-  --vb-button-background-hover: var(--vb-neutral-40);
-  --vb-button-background-active: var(--vb-neutral-30);
+  --vb-button-background-hover: hsl(from var(--vb-neutral-50) h s 40%);
+  --vb-button-background-active: hsl(from var(--vb-neutral-50) h s 30%);
   --vb-button-foreground: white;
-  --vb-button-foreground-hover: white;
-  --vb-button-foreground-active: white;
   --vb-button-border-color: transparent;
-  --vb-button-border-color-hover: transparent;
-  --vb-button-border-color-active: transparent;
-  --vb-button-box-shadow: 0 0 0 0 hsl(var(--vb-neutral-hs) 50% / 0%);
-  --vb-button-box-shadow-focus: 0 0 0 0.2rem hsl(var(--vb-neutral-hs) 50% / 50%);
   --vb-button-loading-border-color: white;
 }
 
 .button_color_important {
+  --vb-button-accent: var(--vb-important-50);
   --vb-button-background: var(--vb-important-50);
-  --vb-button-background-hover: var(--vb-important-40);
-  --vb-button-background-active: var(--vb-important-30);
+  --vb-button-background-hover: hsl(from var(--vb-important-50) h s 40%);
+  --vb-button-background-active: hsl(from var(--vb-important-50) h s 30%);
   --vb-button-foreground: white;
-  --vb-button-foreground-hover: white;
-  --vb-button-foreground-active: white;
   --vb-button-border-color: transparent;
-  --vb-button-border-color-hover: transparent;
-  --vb-button-border-color-active: transparent;
-  --vb-button-box-shadow: 0 0 0 0 hsl(var(--vb-important-hs) 50% / 0%);
-  --vb-button-box-shadow-focus: 0 0 0 0.2rem hsl(var(--vb-important-hs) 50% / 50%);
   --vb-button-loading-border-color: white;
 }
 
 .button_icon {
-  --vb-button-padding: calc(0.5em - 1px);
-}
-.button_icon.button_size_sm {
-  --vb-button-padding: calc(0.25em - 1px);
-}
-.button_icon.button_size_lg {
-  --vb-button-padding: calc(0.648rem - 1px);
+  --vb-button-padding:  calc(0.5em - var(--vb-form-control-border-width));
 }
 
 .button_size_sm {
-  --vb-button-size: var(--vb-form-control-size-sm);
-  --vb-button-padding: calc(0.25em - 1px) 0.75em;
-  --vb-button-font-size: var(--vb-font-size-sm);
-  --vb-button-line-height: var(--vb-line-height-sm);
+  --vb-button-font-size: var(--vb-form-control-font-size-sm);
 }
 
 .button_size_lg {
-  --vb-button-size: var(--vb-form-control-size-lg);
-  --vb-button-padding: calc(0.648rem - 1px) 1.5rem;
-  --vb-button-font-size: var(--vb-font-size-lg);
-  --vb-button-line-height: var(--vb-line-height-lg);
+  --vb-button-font-size: var(--vb-form-control-font-size-lg);
 }
 
 .card {
@@ -782,40 +761,41 @@ a.card:hover, a.card:focus, a.card:focus-within {
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
+  font-size: var(--vb-checkbox-font-size, var(--vb-form-control-font-size));
   vertical-align: middle;
 }
 
 .checkbox__background {
-  width: var(--vb-checkbox-size);
-  height: var(--vb-checkbox-size);
+  width: var(--vb-checkbox-size, var(--vb-form-control-size));
+  height: var(--vb-checkbox-size, var(--vb-form-control-size));
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--vb-checkbox-background-border-radius);
-  background-color: hsl(from var(--vb-checkbox-background-color) h s l/var(--vb-checkbox-background-opacity));
+  border-radius: var(--vb-checkbox-background-border-radius, var(--vb-form-control-background-border-radius));
+  background-color: hsl(from var(--vb-checkbox-accent, var(--vb-form-control-accent)) h s l/var(--vb-checkbox-background-opacity, var(--vb-form-control-background-opacity)));
 }
 
 .checkbox__box {
-  width: var(--vb-checkbox-box-size);
-  height: var(--vb-checkbox-box-size);
+  width: var(--vb-checkbox-box-size, 1.2em);
+  height: var(--vb-checkbox-box-size, 1.2em);
   display: flex;
   align-items: center;
   justify-content: center;
-  border: var(--vb-checkbox-border-width) solid var(--vb-checkbox-border-color);
-  border-radius: var(--vb-checkbox-border-radius);
-  background-color: var(--vb-checkbox-fill);
+  border: var(--vb-checkbox-border-width, 2px) solid var(--vb-checkbox-foreground, var(--vb-form-control-foreground));
+  border-radius: var(--vb-checkbox-border-radius, var(--vb-border-radius));
+  background-color: var(--vb-checkbox-background, var(--vb-checkbox-background, var(--vb-form-control-background)));
   color: transparent;
 }
 
 .checkbox__icon {
-  width: var(--vb-checkbox-icon-size);
-  height: var(--vb-checkbox-icon-size);
-  background-color: var(--vb-checkbox-icon-color);
-  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9.5,3 4.5,8.5 2,6"></polyline></svg>');
+  width: var(--vb-checkbox-icon-size, 0.8em);
+  height: var(--vb-checkbox-icon-size, 0.8em);
+  background-color: var(--vb-checkbox-background, var(--vb-checkbox-background, var(--vb-form-control-background)));
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="0.8em" height="0.8em" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="10,3 5,9 2,6"></polyline></svg>');
   mask-repeat: no-repeat;
-  mask-position: center calc(var(--vb-checkbox-icon-size) * -1);
+  mask-position: center calc(var(--vb-checkbox-icon-size, 0.8em) * -1);
   mask-size: 100%;
   opacity: 0;
 }
@@ -831,77 +811,57 @@ a.card:hover, a.card:focus, a.card:focus-within {
   cursor: pointer;
 }
 .checkbox__native:hover + .checkbox__background {
-  background-color: hsl(from var(--vb-checkbox-background-color) h s l/var(--vb-checkbox-background-opacity-hover));
+  background-color: hsl(from var(--vb-checkbox-accent, var(--vb-form-control-accent)) h s l/var(--vb-checkbox-background-opacity-hover, var(--vb-form-control-background-opacity-hover)));
 }
 .checkbox__native:hover + .checkbox__background .checkbox__box {
-  border-color: var(--vb-checkbox-color);
-  background-color: var(--vb-checkbox-fill);
+  border-color: var(--vb-checkbox-accent, var(--vb-form-control-accent));
+  background-color: var(--vb-checkbox-background, var(--vb-checkbox-background, var(--vb-form-control-background)));
 }
 .checkbox__native:focus + .checkbox__background {
-  background-color: hsl(from var(--vb-checkbox-background-color) h s l/var(--vb-checkbox-background-opacity-focus));
+  background-color: hsl(from var(--vb-checkbox-accent, var(--vb-form-control-accent)) h s l/var(--vb-checkbox-background-opacity-focus, var(--vb-form-control-background-opacity-focus)));
 }
 .checkbox__native:focus + .checkbox__background .checkbox__box {
-  border-color: var(--vb-checkbox-color);
-  background-color: var(--vb-checkbox-fill);
+  border-color: var(--vb-checkbox-accent, var(--vb-form-control-accent));
+  background-color: var(--vb-checkbox-background, var(--vb-checkbox-background, var(--vb-form-control-background)));
 }
 .checkbox__native:focus-visible + .checkbox__background, .checkbox__native:active + .checkbox__background {
-  background-color: hsl(from var(--vb-checkbox-background-color) h s l/var(--vb-checkbox-background-opacity-active));
+  background-color: hsl(from var(--vb-checkbox-accent, var(--vb-form-control-accent)) h s l/var(--vb-checkbox-background-opacity-active, var(--vb-form-control-background-opacity-active)));
 }
 .checkbox__native:focus-visible + .checkbox__background .checkbox__box, .checkbox__native:active + .checkbox__background .checkbox__box {
-  border-color: var(--vb-checkbox-color);
-  background-color: var(--vb-checkbox-fill);
+  border-color: var(--vb-checkbox-accent, var(--vb-form-control-accent));
+  background-color: var(--vb-checkbox-background, var(--vb-checkbox-background, var(--vb-form-control-background)));
 }
 .checkbox__native:checked + .checkbox__background .checkbox__box {
-  border-color: var(--vb-checkbox-color);
-  background-color: var(--vb-checkbox-color);
+  border-color: var(--vb-checkbox-accent, var(--vb-form-control-accent));
+  background-color: var(--vb-checkbox-accent, var(--vb-form-control-accent));
 }
 .checkbox__native:checked + .checkbox__background .checkbox__icon {
   transition-property: opacity, mask-position;
-  transition-duration: var(--vb-checkbox-transition-duration);
-  transition-timing-function: var(--vb-checkbox-transition-timing-function);
+  transition-duration: var(--vb-checkbox-transition-duration, var(--vb-form-control-transition-duration));
+  transition-timing-function: var(--vb-checkbox-transition-timing-function, var(--vb-form-control-transition-timing-function));
   mask-position: center center;
   opacity: 1;
 }
 .checkbox__native:indeterminate + .checkbox__background .checkbox__box {
-  border-color: var(--vb-checkbox-color);
-  background-color: var(--vb-checkbox-color);
+  border-color: var(--vb-checkbox-accent, var(--vb-form-control-accent));
+  background-color: var(--vb-checkbox-accent, var(--vb-form-control-accent));
 }
 .checkbox__native:indeterminate + .checkbox__background .checkbox__icon {
   transition-property: opacity, mask-position;
-  transition-duration: var(--vb-checkbox-transition-duration);
-  transition-timing-function: var(--vb-checkbox-transition-timing-function);
-  background-color: var(--vb-checkbox-icon-color);
-  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="6" x2="10" y2="6" /></svg>');
+  transition-duration: var(--vb-checkbox-transition-duration, var(--vb-form-control-transition-duration));
+  transition-timing-function: var(--vb-checkbox-transition-timing-function, var(--vb-form-control-transition-timing-function));
+  background-color: var(--vb-checkbox-background, var(--vb-checkbox-background, var(--vb-form-control-background)));
+  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="0.8em" height="0.8em" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="6" x2="10" y2="6" /></svg>');
   mask-position: center center;
   opacity: 1;
 }
 
 .checkbox_size_sm {
-  --vb-checkbox-size: var(--vb-form-control-size-sm);
-  --vb-checkbox-border-width: 2px;
-  --vb-checkbox-box-size: 14px;
-  --vb-checkbox-icon-size: 10px;
-  --vb-checkbox-icon-stroke: 2.5;
-}
-.checkbox_size_sm .checkbox__icon {
-  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9.5,3 4.5,8.5 2,6"></polyline></svg>');
-}
-.checkbox_size_sm .checkbox__native:indeterminate + .checkbox__background .checkbox__icon {
-  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="6" x2="10" y2="6" /></svg>');
+  --vb-checkbox-font-size: var(--vb-form-control-font-size-sm);
 }
 
 .checkbox_size_lg {
-  --vb-checkbox-size: var(--vb-form-control-size-lg);
-  --vb-checkbox-border-width: 2.5px;
-  --vb-checkbox-box-size: 24px;
-  --vb-checkbox-icon-size: 18px;
-  --vb-checkbox-icon-stroke: 2;
-}
-.checkbox_size_lg .checkbox__icon {
-  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9.5,3 4.5,8.5 2,6"></polyline></svg>');
-}
-.checkbox_size_lg .checkbox__native:indeterminate + .checkbox__background .checkbox__icon {
-  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="12px" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="2" y1="6" x2="10" y2="6" /></svg>');
+  --vb-checkbox-font-size: var(--vb-form-control-font-size-lg);
 }
 
 .dialog {
@@ -3532,44 +3492,46 @@ a.card:hover, a.card:focus, a.card:focus-within {
 }
 
 .input {
+  min-width: var(--vb-input-size, var(--vb-form-control-size));
+  min-height: var(--vb-input-size, var(--vb-form-control-size));
+  transition-property: var(--vb-input-transition-property, var(--vb-form-control-transition-property));
+  transition-duration: var(--vb-input-transition-duration, var(--vb-form-control-transition-duration));
+  transition-timing-function: var(--vb-input-transition-timing-function, var(--vb-form-control-transition-timing-function));
+  border-width: var(--vb-input-border-width, var(--vb-form-control-border-width));
+  border-radius: var(--vb-input-border-radius, var(--vb-form-control-border-radius));
+  padding: var(--vb-input-padding,  calc(0.5em - var(--vb-input-border-width, var(--vb-form-control-border-width))));
+  font-size: var(--vb-input-font-size, var(--vb-form-control-font-size));
+  line-height: var(--vb-input-line-height, var(--vb-form-control-line-height));
   position: relative;
   display: block;
   width: 100%;
   max-width: 100%;
-  height: var(--vb-input-size);
-  padding: var(--vb-input-padding);
-  transition-property: var(--vb-input-transition-property);
-  transition-duration: var(--vb-input-transition-duration);
-  transition-timing-function: var(--vb-input-transition-timing-function);
-  outline: var(--vb-input-outline);
-  border: var(--vb-input-border-width) solid var(--vb-input-border-color);
-  border-radius: var(--vb-input-border-radius);
-  background: var(--vb-input-background);
-  box-shadow: 0 0 0 0 var(--vb-input-box-shadow), inset 0 0.1rem 0.2rem var(--vb-input-box-shadow-inset);
-  color: var(--vb-input-foreground);
-  font-family: var(--vb-font-family);
-  font-size: var(--vb-input-font-size);
-  line-height: var(--vb-input-line-height);
-  -moz-appearance: none;
-  -webkit-appearance: none;
+  outline: none;
+  border-style: solid;
+  font-family: inherit;
   appearance: none;
+  border-color: var(--vb-input-border-color, var(--vb-border-color-dark));
+  background-color: var(--vb-input-background, var(--vb-background));
+  box-shadow: var(--vb-input-box-shadow, 0 0 0 0 hsl(from var(--vb-input-accent, var(--vb-form-control-accent)) h s l/0%), inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1));
+  color: var(--vb-input-foreground, var(--vb-foreground));
 }
 .input:hover {
-  border-color: var(--vb-input-border-color-hover, var(--vb-input-border-color));
-  background-color: var(--vb-input-background-hover, var(--vb-input-background));
-  color: var(--vb-input-foreground-hover, var(--vb-input-foreground));
+  border-color: var(--vb-input-border-color-hover, var(--vb-input-border-color, var(--vb-border-color-darker)));
+  background-color: var(--vb-input-background-hover, var(--vb-input-background, var(--vb-background)));
+  box-shadow: var(--vb-input-box-shadow-hover, var(--vb-input-box-shadow, 0 0 0 0 hsl(from var(--vb-input-accent, var(--vb-form-control-accent)) h s l/0%), inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1)));
+  color: var(--vb-input-foreground-hover, var(--vb-input-foreground, var(--vb-foreground)));
 }
 .input:focus {
-  border-color: var(--vb-input-border-color-focus, var(--vb-input-border-color-hover, var(--vb-input-border-color)));
-  background-color: var(--vb-input-background-focus, var(--vb-input-background-hover, var(--vb-input-background)));
-  box-shadow: 0 0 0 0.2rem var(--vb-input-box-shadow-focus), inset 0 0.1rem 0.2rem var(--vb-input-box-shadow-inset-focus);
-  color: var(--vb-input-foreground-focus, var(--vb-input-foreground-hover, var(--vb-input-foreground)));
+  border-color: var(--vb-input-border-color-focus, var(--vb-input-border-color-hover, var(--vb-input-border-color, var(--vb-input-accent, var(--vb-form-control-accent)))));
+  background-color: var(--vb-input-background-focus, var(--vb-input-background-hover, var(--vb-input-background, var(--vb-background))));
+  box-shadow: var(--vb-input-box-shadow-focus, var(--vb-input-box-shadow-hover, var(--vb-input-box-shadow, 0 0 0 3px hsl(from var(--vb-input-accent, var(--vb-form-control-accent)) h s l/40%), inset 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1))));
+  color: var(--vb-input-foreground-focus, var(--vb-input-foreground-hover, var(--vb-input-foreground, var(--vb-foreground))));
 }
 .input:read-only {
-  background-color: var(--vb-input-background-readonly);
+  background-color: var(--vb-input-background-readonly, var(--vb-background-dark));
 }
 .input:disabled {
-  background-color: var(--vb-input-background-disabled);
+  background-color: var(--vb-input-background-disabled, var(--vb-background-darker));
   pointer-events: none;
 }
 .input::placeholder {
@@ -3581,33 +3543,21 @@ a.card:hover, a.card:focus, a.card:focus-within {
 }
 
 .input_size_sm {
-  --vb-input-size: var(--vb-form-control-size-sm);
-  --vb-input-padding: calc(0.25em - 1px) calc(0.25em * 2);
-  --vb-input-font-size: var(--vb-font-size-sm);
-  --vb-input-line-height: var(--vb-line-height-sm);
+  --vb-input-font-size: var(--vb-form-control-font-size-sm);
 }
 
 .input_size_lg {
-  --vb-input-size: var(--vb-form-control-size-lg);
-  --vb-input-padding: calc(0.648rem - 1px);
-  --vb-input-font-size: var(--vb-font-size-lg);
-  --vb-input-line-height: var(--vb-line-height-lg);
+  --vb-input-font-size: var(--vb-form-control-font-size-lg);
 }
 
 .input_state_success {
+  --vb-input-accent: var(--vb-primary-50);
   --vb-input-border-color: var(--vb-primary-50);
-  --vb-input-border-color-hover: var(--vb-primary-50);
-  --vb-input-border-color-focus: var(--vb-primary-50);
-  --vb-input-box-shadow: hsl(var(--vb-primary-hs) 50% / 0%);
-  --vb-input-box-shadow-focus: hsl(var(--vb-primary-hs) 50% / 50%);
 }
 
 .input_state_error {
+  --vb-input-accent: var(--vb-important-50);
   --vb-input-border-color: var(--vb-important-50);
-  --vb-input-border-color-hover: var(--vb-important-50);
-  --vb-input-border-color-focus: var(--vb-important-50);
-  --vb-input-box-shadow: hsl(var(--vb-important-hs) 50% / 0%);
-  --vb-input-box-shadow-focus: hsl(var(--vb-important-hs) 50% / 50%);
 }
 
 .input_type_select {
@@ -3619,33 +3569,23 @@ a.card:hover, a.card:focus, a.card:focus-within {
   cursor: pointer;
 }
 .input_type_select:read-only {
-  background-color: var(--vb-input-background);
+  background-color: var(--vb-input-background, var(--vb-background));
 }
 .input_type_select:disabled {
-  background-color: var(--vb-input-background-disabled);
+  background-color: var(--vb-input-background-disabled, var(--vb-background-darker));
 }
 
 .input_type_textarea {
   min-width: 100%;
-  height: auto;
-  min-height: var(--vb-input-size);
-}
-.input_type_textarea.input_size_sm {
-  height: auto;
-  min-height: var(--vb-input-size);
-}
-.input_type_textarea.input_size_lg {
-  height: auto;
-  min-height: var(--vb-input-size);
 }
 
 .menu {
   display: flex;
-  gap: var(--vb-menu-gap);
+  gap: var(--vb-menu-gap, 1px);
   flex-direction: column;
   align-items: stretch;
-  font-size: var(--vb-menu-font-size);
-  line-height: var(--vb-menu-line-height);
+  font-size: var(--vb-menu-font-size, var(--vb-form-control-font-size));
+  line-height: var(--vb-menu-line-height, var(--vb-form-control-line-height));
   list-style: none;
 }
 
@@ -3653,55 +3593,75 @@ a.card:hover, a.card:focus, a.card:focus-within {
   flex: 0 0 auto;
   align-self: stretch;
   width: auto;
-  height: var(--vb-menu-sep-size);
-  margin: var(--vb-menu-sep-gap) 0;
-  background: var(--vb-menu-sep-background);
+  height: var(--vb-menu-sep-size, 1px);
+  margin: var(--vb-menu-sep-gap, 0.5em) 0;
+  background: var(--vb-menu-sep-background, var(--vb-border-color));
 }
 
 .menu__action {
+  min-width: var(--vb-menu-size, var(--vb-form-control-size));
+  min-height: var(--vb-menu-size, var(--vb-form-control-size));
+  transition-property: var(--vb-menu-transition-property, var(--vb-form-control-transition-property));
+  transition-duration: var(--vb-menu-transition-duration, var(--vb-form-control-transition-duration));
+  transition-timing-function: var(--vb-menu-transition-timing-function, var(--vb-form-control-transition-timing-function));
+  border-width: var(--vb-menu-border-width, var(--vb-form-control-border-width));
+  border-radius: var(--vb-menu-border-radius, var(--vb-form-control-border-radius));
+  padding: var(--vb-menu-padding,  calc(0.5em - var(--vb-menu-border-width, var(--vb-form-control-border-width))) calc(1em - var(--vb-menu-border-width, var(--vb-form-control-border-width))));
   position: relative;
   display: flex;
+  gap: var(--vb-menu-action-gap, 0.5em);
   align-items: center;
   justify-content: flex-start;
   width: 100%;
-  min-width: var(--vb-menu-size);
-  min-height: var(--vb-menu-size);
-  padding: var(--vb-menu-padding);
   outline: none;
-  border: var(--vb-menu-border-width) solid var(--vb-menu-border-color);
-  border-radius: var(--vb-menu-border-radius);
-  background: var(--vb-menu-background);
-  color: var(--vb-menu-foreground);
+  border-style: solid;
+  background-clip: border-box;
+  font-family: inherit;
+  font-weight: inherit;
+  text-decoration: none;
   white-space: normal;
-  gap: var(--vb-menu-action-gap);
-}
-.menu__action:hover, .menu__action:focus-visible {
-  border-color: var(--vb-menu-border-color-hover, var(--vb-menu-border-color));
-  background: var(--vb-menu-background-hover, var(--vb-menu-background));
-  color: var(--vb-menu-foreground-hover, var(--vb-menu-foreground));
+  cursor: pointer;
+  border-color: var(--vb-menu-border-color, transparent);
+  background-color: var(--vb-menu-background, transparent);
+  box-shadow: var(--vb-menu-box-shadow, 0 0 0 0 hsl(from var(--vb-menu-accent, var(--vb-form-control-accent)) h s l/0%));
+  color: var(--vb-menu-foreground, var(--vb-foreground));
+}
+.menu__action:hover {
+  border-color: var(--vb-menu-border-color-hover, var(--vb-menu-border-color, transparent));
+  background-color: var(--vb-menu-background-hover, var(--vb-menu-background, var(--vb-background-hover)));
+  box-shadow: var(--vb-menu-box-shadow-hover, var(--vb-menu-box-shadow, 0 0 0 0 hsl(from var(--vb-menu-accent, var(--vb-form-control-accent)) h s l/0%)));
+  color: var(--vb-menu-foreground-hover, var(--vb-menu-foreground, var(--vb-foreground)));
+}
+.menu__action:focus {
+  border-color: var(--vb-menu-border-color-focus, var(--vb-menu-border-color-hover, var(--vb-menu-border-color, transparent)));
+  background-color: var(--vb-menu-background-focus, var(--vb-menu-background-hover, var(--vb-menu-background, var(--vb-background-hover))));
+  box-shadow: var(--vb-menu-box-shadow-focus, var(--vb-menu-box-shadow-hover, var(--vb-menu-box-shadow, 0 0 0 0 hsl(from var(--vb-menu-accent, var(--vb-form-control-accent)) h s l/0%))));
+  color: var(--vb-menu-foreground-focus, var(--vb-menu-foreground-hover, var(--vb-menu-foreground, var(--vb-foreground))));
 }
 .menu__action:focus-visible {
-  z-index: 1;
-  outline: var(--vb-menu-outline-focus);
+  border-color: var(--vb-menu-border-color-focus-visible, var(--vb-menu-border-color-focus, var(--vb-menu-border-color-hover, var(--vb-menu-border-color, var(--vb-menu-accent, var(--vb-form-control-accent))))));
+  background-color: var(--vb-menu-background-focus-visible, var(--vb-menu-background-focus, var(--vb-menu-background-hover, var(--vb-menu-background, var(--vb-background-hover)))));
+  box-shadow: var(--vb-menu-box-shadow-focus-visible, var(--vb-menu-box-shadow-focus, var(--vb-menu-box-shadow-hover, var(--vb-menu-box-shadow, 0 0 0 3px hsl(from var(--vb-menu-accent, var(--vb-form-control-accent)) h s l/40%)))));
+  color: var(--vb-menu-foreground-focus-visible, var(--vb-menu-foreground-focus, var(--vb-menu-foreground-hover, var(--vb-menu-foreground, var(--vb-foreground)))));
 }
 .menu__action:active {
-  border-color: var(--vb-menu-border-color-active, var(--vb-menu-border-color-hover, var(--vb-menu-border-color)));
-  background: var(--vb-menu-background-active, var(--vb-menu-background-hover, var(--vb-menu-background)));
-  color: var(--vb-menu-foreground-active, var(--vb-menu-foreground-hover, var(--vb-menu-foreground)));
-}
-.menu__action.is-active, .menu__action.is-active:hover, .menu__action.is-active:focus, .menu__action.is-active:active, .menu__action.is-active[disabled] {
-  background: var(--vb-menu-active-background);
-  color: var(--vb-menu-active-foreground);
-  cursor: pointer;
+  border-color: var(--vb-menu-border-color-active, var(--vb-menu-border-color, transparent));
+  background-color: var(--vb-menu-background-active, var(--vb-menu-background, var(--vb-background-active)));
+  box-shadow: var(--vb-menu-box-shadow-active, var(--vb-menu-box-shadow, 0 0 0 0 hsl(from var(--vb-menu-accent, var(--vb-form-control-accent)) h s l/0%)));
+  color: var(--vb-menu-foreground-active, var(--vb-menu-foreground, var(--vb-foreground)));
+}
+.menu__action:disabled:not(.is-active) {
+  background-color: var(--vb-menu-disabled-background, none);
+  color: var(--vb-menu-disabled-foreground, var(--vb-foreground-lighter));
+  pointer-events: none;
 }
-.menu__action.is-disabled, .menu__action.is-disabled:hover, .menu__action.is-disabled:focus, .menu__action.is-disabled:active, .menu__action[disabled] {
-  background: var(--vb-menu-disabled-background);
-  color: var(--vb-menu-disabled-foreground);
-  cursor: default;
+.menu__action.is-active {
+  background-color: var(--vb-menu-active-background, none);
+  color: var(--vb-menu-active-foreground, var(--vb-primary-50));
 }
 
 .menu__action_icon {
-  padding: var(--vb-menu-padding-x);
+  --vb-menu-padding:  calc(0.5em - var(--vb-form-control-border-width));
 }
 
 .menu_full .menu__item {
@@ -3713,9 +3673,9 @@ a.card:hover, a.card:focus, a.card:focus-within {
   align-items: center;
 }
 .menu_inline .menu__sep {
-  width: var(--vb-menu-sep-size);
+  width: var(--vb-menu-sep-size, 1px);
   height: auto;
-  margin: 0 var(--vb-menu-sep-gap);
+  margin: 0 var(--vb-menu-sep-gap, 0.5em);
 }
 .menu_inline .menu__action {
   justify-content: center;
@@ -3723,19 +3683,11 @@ a.card:hover, a.card:focus, a.card:focus-within {
 }
 
 .menu_size_sm {
-  --vb-menu-size: var(--vb-form-control-size-sm);
-  --vb-menu-padding: var(--vb-form-control-padding-sm);
-  --vb-menu-padding-x: 0.25em;
   --vb-menu-font-size: var(--vb-font-size-sm);
-  --vb-menu-line-height: var(--vb-line-height-sm);
 }
 
 .menu_size_lg {
-  --vb-menu-size: var(--vb-form-control-size-lg);
-  --vb-menu-padding: var(--vb-form-control-padding-lg);
-  --vb-menu-padding-x: 0.648rem;
   --vb-menu-font-size: var(--vb-font-size-lg);
-  --vb-menu-line-height: var(--vb-line-height-lg);
 }
 
 .modal {
@@ -4078,38 +4030,39 @@ a.card:hover, a.card:focus, a.card:focus-within {
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
+  font-size: var(--vb-radio-font-size, var(--vb-form-control-font-size));
   vertical-align: middle;
 }
 
 .radio__background {
-  width: var(--vb-radio-size);
-  height: var(--vb-radio-size);
+  width: var(--vb-radio-size, var(--vb-form-control-size));
+  height: var(--vb-radio-size, var(--vb-form-control-size));
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--vb-radio-background-border-radius);
-  background-color: hsl(from var(--vb-radio-background-color) h s l/var(--vb-radio-background-opacity));
+  border-radius: var(--vb-radio-background-border-radius, var(--vb-form-control-background-border-radius));
+  background-color: hsl(from var(--vb-radio-accent, var(--vb-form-control-accent)) h s l/var(--vb-radio-background-opacity, var(--vb-form-control-background-opacity)));
 }
 
 .radio__circle {
-  width: var(--vb-radio-circle-size);
-  height: var(--vb-radio-circle-size);
+  width: var(--vb-radio-circle-size, 1.25em);
+  height: var(--vb-radio-circle-size, 1.25em);
   display: flex;
   align-items: center;
   justify-content: center;
-  border: var(--vb-radio-border-width) solid var(--vb-radio-border-color);
-  border-radius: var(--vb-radio-circle-size);
-  background-color: var(--vb-radio-fill);
+  border: var(--vb-radio-border-width, 2px) solid var(--vb-radio-foreground, var(--vb-form-control-foreground));
+  border-radius: var(--vb-radio-circle-size, 1.25em);
+  background-color: var(--vb-radio-background, var(--vb-radio-background, var(--vb-form-control-background)));
   color: transparent;
 }
 
 .radio__dot {
   width: 0;
   height: 0;
-  border-radius: var(--vb-radio-dot-size);
-  background-color: var(--vb-radio-dot-color);
+  border-radius: var(--vb-radio-dot-size, 0.5em);
+  background-color: var(--vb-radio-background, var(--vb-radio-background, var(--vb-form-control-background)));
   opacity: 0;
 }
 
@@ -4124,52 +4077,46 @@ a.card:hover, a.card:focus, a.card:focus-within {
   cursor: pointer;
 }
 .radio__native:hover + .radio__background {
-  background-color: hsl(from var(--vb-radio-background-color) h s l/var(--vb-radio-background-opacity-hover));
+  background-color: hsl(from var(--vb-radio-accent, var(--vb-form-control-accent)) h s l/var(--vb-radio-background-opacity-hover, var(--vb-form-control-background-opacity-hover)));
 }
 .radio__native:hover + .radio__background .radio__circle {
-  border-color: var(--vb-radio-color);
-  background-color: var(--vb-radio-fill);
+  border-color: var(--vb-radio-accent, var(--vb-radio-accent, var(--vb-form-control-accent)));
+  background-color: var(--vb-radio-background, var(--vb-radio-background, var(--vb-form-control-background)));
 }
 .radio__native:focus + .radio__background {
-  background-color: hsl(from var(--vb-radio-background-color) h s l/var(--vb-radio-background-opacity-focus));
+  background-color: hsl(from var(--vb-radio-accent, var(--vb-form-control-accent)) h s l/var(--vb-radio-background-opacity-focus, var(--vb-form-control-background-opacity-focus)));
 }
 .radio__native:focus + .radio__background .radio__circle {
-  border-color: var(--vb-radio-color);
-  background-color: var(--vb-radio-fill);
+  border-color: var(--vb-radio-accent, var(--vb-radio-accent, var(--vb-form-control-accent)));
+  background-color: var(--vb-radio-background, var(--vb-radio-background, var(--vb-form-control-background)));
 }
 .radio__native:focus-visible + .radio__background, .radio__native:active + .radio__background {
-  background-color: hsl(from var(--vb-radio-background-color) h s l/var(--vb-radio-background-opacity-active));
+  background-color: hsl(from var(--vb-radio-accent, var(--vb-form-control-accent)) h s l/var(--vb-radio-background-opacity-active, var(--vb-form-control-background-opacity-active)));
 }
 .radio__native:focus-visible + .radio__background .radio__circle, .radio__native:active + .radio__background .radio__circle {
-  border-color: var(--vb-radio-color);
-  background-color: var(--vb-radio-fill);
+  border-color: var(--vb-radio-accent, var(--vb-radio-accent, var(--vb-form-control-accent)));
+  background-color: var(--vb-radio-background, var(--vb-radio-background, var(--vb-form-control-background)));
 }
 .radio__native:checked + .radio__background .radio__circle {
-  border-color: var(--vb-radio-color);
-  background-color: var(--vb-radio-color);
+  border-color: var(--vb-radio-accent, var(--vb-radio-accent, var(--vb-form-control-accent)));
+  background-color: var(--vb-radio-accent, var(--vb-radio-accent, var(--vb-form-control-accent)));
 }
 .radio__native:checked + .radio__background .radio__dot {
-  width: var(--vb-radio-dot-size);
-  height: var(--vb-radio-dot-size);
+  width: var(--vb-radio-dot-size, 0.5em);
+  height: var(--vb-radio-dot-size, 0.5em);
   transition-property: opacity, width, height;
-  transition-duration: var(--vb-radio-transition-duration);
-  transition-timing-function: var(--vb-radio-transition-timing-function);
+  transition-duration: var(--vb-radio-transition-duration, var(--vb-form-control-transition-duration));
+  transition-timing-function: var(--vb-radio-transition-timing-function, var(--vb-form-control-transition-timing-function));
   background-position: center center;
   opacity: 1;
 }
 
 .radio_size_sm {
-  --vb-radio-size: var(--vb-form-control-size-sm);
-  --vb-radio-border-width: 2px;
-  --vb-radio-circle-size: 16px;
-  --vb-radio-dot-size: 6px;
+  --vb-radio-font-size: var(--vb-form-control-font-size-sm);
 }
 
 .radio_size_lg {
-  --vb-radio-size: var(--vb-form-control-size-lg);
-  --vb-radio-border-width: 2.5px;
-  --vb-radio-circle-size: 26px;
-  --vb-radio-dot-size: 10px;
+  --vb-radio-font-size: var(--vb-form-control-font-size-lg);
 }
 
 .section {
@@ -4179,6 +4126,17 @@ a.card:hover, a.card:focus, a.card:focus-within {
   padding: var(--vb-section-padding);
   background: var(--vb-section-background);
   color: var(--vb-section-foreground);
+  --vb-section-padding: 1.5em;
+}
+@media (min-width: 760px) {
+  .section {
+    --vb-section-padding: 2em 1.5em;
+  }
+}
+@media (min-width: 990px) {
+  .section {
+    --vb-section-padding: 3em 1.5em;
+  }
 }
 
 .section__container {
@@ -4266,14 +4224,15 @@ a.card:hover, a.card:focus, a.card:focus-within {
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
-  padding-right: calc(var(--vb-switch-size) * 0.25);
-  padding-left: calc(var(--vb-switch-size) * 0.25);
+  padding-right: calc(var(--vb-switch-size, var(--vb-form-control-size)) * 0.25);
+  padding-left: calc(var(--vb-switch-size, var(--vb-form-control-size)) * 0.25);
+  font-size: var(--vb-switch-font-size, var(--vb-form-control-font-size));
   vertical-align: middle;
 }
 
 .switch__background {
-  width: var(--vb-switch-size);
-  height: var(--vb-switch-size);
+  width: var(--vb-switch-size, var(--vb-form-control-size));
+  height: var(--vb-switch-size, var(--vb-form-control-size));
   position: relative;
   z-index: 1;
   display: flex;
@@ -4281,39 +4240,39 @@ a.card:hover, a.card:focus, a.card:focus-within {
   justify-content: center;
 }
 .switch__background::after {
-  width: var(--vb-switch-size);
-  height: var(--vb-switch-size);
+  width: var(--vb-switch-size, var(--vb-form-control-size));
+  height: var(--vb-switch-size, var(--vb-form-control-size));
   content: "";
   position: absolute;
   top: 0;
-  left: calc(var(--vb-switch-size) * 0.25 * -1);
-  transition: left var(--vb-switch-transition-duration) var(--vb-switch-transition-timing-function);
-  border-radius: var(--vb-switch-background-border-radius);
-  background-color: hsl(from var(--vb-switch-background-color) h s l/var(--vb-switch-background-opacity));
+  left: calc(var(--vb-switch-size, var(--vb-form-control-size)) * 0.25 * -1);
+  transition: left var(--vb-switch-transition-duration, var(--vb-form-control-transition-duration)) var(--vb-switch-transition-timing-function, var(--vb-form-control-transition-timing-function));
+  border-radius: var(--vb-switch-background-border-radius, var(--vb-form-control-background-border-radius));
+  background-color: hsl(from var(--vb-switch-accent, var(--vb-form-control-accent)) h s l/var(--vb-switch-background-opacity, var(--vb-form-control-background-opacity)));
 }
 
 .switch__track {
   width: 100%;
-  height: var(--vb-switch-track-size);
+  height: var(--vb-switch-track-size, 1.25em);
   position: relative;
   display: block;
-  border: var(--vb-switch-border-width) solid var(--vb-switch-border-color);
-  border-radius: var(--vb-switch-border-radius);
-  background-color: var(--vb-switch-track-fill);
+  border: var(--vb-switch-border-width, 2px) solid var(--vb-switch-foreground, var(--vb-form-control-foreground));
+  border-radius: var(--vb-switch-border-radius, var(--vb-border-radius-circle));
+  background-color: hsl(from var(--vb-switch-foreground, var(--vb-form-control-foreground)) h s l/20%);
 }
 
 .switch__thumb {
-  width: calc(var(--vb-switch-track-size) - var(--vb-switch-border-width) * 2);
-  height: calc(var(--vb-switch-track-size) - var(--vb-switch-border-width) * 2);
+  width: calc(var(--vb-switch-track-size, 1.25em) - var(--vb-switch-border-width, 2px) * 2);
+  height: calc(var(--vb-switch-track-size, 1.25em) - var(--vb-switch-border-width, 2px) * 2);
   position: absolute;
   z-index: 1;
   top: 0;
   left: 0;
   display: block;
-  transition: left var(--vb-switch-transition-duration) var(--vb-switch-transition-timing-function);
-  border-radius: var(--vb-switch-border-radius);
-  background-color: var(--vb-switch-thumb-fill);
-  box-shadow: 0 0 0 var(--vb-switch-border-width) var(--vb-switch-border-color);
+  transition: left var(--vb-switch-transition-duration, var(--vb-form-control-transition-duration)) var(--vb-switch-transition-timing-function, var(--vb-form-control-transition-timing-function));
+  border-radius: var(--vb-switch-border-radius, var(--vb-border-radius-circle));
+  background-color: var(--vb-switch-background, var(--vb-switch-background, var(--vb-form-control-background)));
+  box-shadow: 0 0 0 var(--vb-switch-border-width, 2px) var(--vb-switch-foreground, var(--vb-form-control-foreground));
 }
 
 .switch__native {
@@ -4327,57 +4286,41 @@ a.card:hover, a.card:focus, a.card:focus-within {
   cursor: pointer;
 }
 .switch__native:hover + .switch__background::after {
-  background-color: hsl(from var(--vb-switch-background-color) h s l/var(--vb-switch-background-opacity-hover));
-}
-.switch__native:hover + .switch__background .switch__track {
-  border-color: var(--vb-switch-border-color);
-  background-color: var(--vb-switch-track-fill);
+  background-color: hsl(from var(--vb-switch-accent, var(--vb-form-control-accent)) h s l/var(--vb-switch-background-opacity-hover, var(--vb-form-control-background-opacity-hover)));
 }
 .switch__native:hover + .switch__background .switch__thumb {
-  box-shadow: 0 0 0 var(--vb-switch-border-width) var(--vb-switch-color);
+  box-shadow: 0 0 0 var(--vb-switch-border-width, 2px) var(--vb-switch-accent, var(--vb-switch-accent, var(--vb-form-control-accent)));
 }
 .switch__native:focus + .switch__background::after {
-  background-color: hsl(from var(--vb-switch-background-color) h s l/var(--vb-switch-background-opacity-focus));
-}
-.switch__native:focus + .switch__background .switch__track {
-  border-color: var(--vb-switch-border-color);
-  background-color: var(--vb-switch-track-fill);
+  background-color: hsl(from var(--vb-switch-accent, var(--vb-form-control-accent)) h s l/var(--vb-switch-background-opacity-focus, var(--vb-form-control-background-opacity-focus)));
 }
 .switch__native:focus + .switch__background .switch__thumb {
-  box-shadow: 0 0 0 var(--vb-switch-border-width) var(--vb-switch-color);
+  box-shadow: 0 0 0 var(--vb-switch-border-width, 2px) var(--vb-switch-accent, var(--vb-switch-accent, var(--vb-form-control-accent)));
 }
 .switch__native:focus-visible + .switch__background::after, .switch__native:active + .switch__background::after {
-  background-color: hsl(from var(--vb-switch-background-color) h s l/var(--vb-switch-background-opacity-active));
-}
-.switch__native:focus-visible + .switch__background .switch__track, .switch__native:active + .switch__background .switch__track {
-  border-color: var(--vb-switch-border-color);
-  background-color: var(--vb-switch-track-fill);
+  background-color: hsl(from var(--vb-switch-accent, var(--vb-form-control-accent)) h s l/var(--vb-switch-background-opacity-active, var(--vb-form-control-background-opacity-active)));
 }
 .switch__native:focus-visible + .switch__background .switch__thumb, .switch__native:active + .switch__background .switch__thumb {
-  box-shadow: 0 0 0 var(--vb-switch-border-width) var(--vb-switch-color);
+  box-shadow: 0 0 0 var(--vb-switch-border-width, 2px) var(--vb-switch-accent, var(--vb-switch-accent, var(--vb-form-control-accent)));
 }
 .switch__native:checked + .switch__background::after {
-  left: calc(100% - var(--vb-switch-size) * 0.75);
+  left: calc(100% - var(--vb-switch-size, var(--vb-form-control-size)) * 0.75);
 }
 .switch__native:checked + .switch__background .switch__track {
-  border-color: var(--vb-switch-color);
-  background-color: var(--vb-switch-color);
+  border-color: var(--vb-switch-accent, var(--vb-switch-accent, var(--vb-form-control-accent)));
+  background-color: var(--vb-switch-accent, var(--vb-switch-accent, var(--vb-form-control-accent)));
 }
 .switch__native:checked + .switch__background .switch__thumb {
-  left: calc(100% - calc(var(--vb-switch-track-size) - var(--vb-switch-border-width) * 2));
-  box-shadow: 0 0 0 var(--vb-switch-border-width) var(--vb-switch-color);
+  left: calc(100% - calc(var(--vb-switch-track-size, 1.25em) - var(--vb-switch-border-width, 2px) * 2));
+  box-shadow: 0 0 0 var(--vb-switch-border-width, 2px) var(--vb-switch-accent, var(--vb-switch-accent, var(--vb-form-control-accent)));
 }
 
 .switch_size_sm {
-  --vb-switch-size: var(--vb-form-control-size-sm);
-  --vb-switch-border-width: 2px;
-  --vb-switch-track-size: 16px;
+  --vb-switch-font-size: var(--vb-form-control-font-size-sm);
 }
 
 .switch_size_lg {
-  --vb-switch-size: var(--vb-form-control-size-lg);
-  --vb-switch-border-width: 2.5px;
-  --vb-switch-track-size: 26px;
+  --vb-switch-font-size: var(--vb-form-control-font-size-lg);
 }
 
 .table {
@@ -5380,23 +5323,23 @@ a.card:hover, a.card:focus, a.card:focus-within {
 }
 
 .border {
-  border: 1px solid var(--vb-border-color) !important;
+  border: var(--vb-border) !important;
 }
 
 .border-top {
-  border-top: 1px solid var(--vb-border-color) !important;
+  border-top: var(--vb-border) !important;
 }
 
 .border-bottom {
-  border-bottom: 1px solid var(--vb-border-color) !important;
+  border-bottom: var(--vb-border) !important;
 }
 
 .border-left {
-  border-left: 1px solid var(--vb-border-color) !important;
+  border-left: var(--vb-border) !important;
 }
 
 .border-right {
-  border-right: 1px solid var(--vb-border-color) !important;
+  border-right: var(--vb-border) !important;
 }
 
 .border-none {
@@ -6956,14 +6899,6 @@ a.card:hover, a.card:focus, a.card:focus-within {
   line-height: var(--vb-line-height) !important;
 }
 
-.font-leading-sm {
-  line-height: var(--vb-line-height-sm) !important;
-}
-
-.font-leading-lg {
-  line-height: var(--vb-line-height-lg) !important;
-}
-
 .font-kerning-0 {
   letter-spacing: 0 !important;
 }