@quidgest/ui 0.22.0 → 0.23.0

package/dist/ui.scss

@@ -1,8 +1,9 @@
 /*!
- * Quidgest UI v0.22.0
+ * Quidgest UI v0.23.0
  * (c) 2026 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
+@use 'sass:math' as math;
 @use 'sass:math';
 @use 'sass:map';
 
@@ -373,182 +374,169 @@ summary {
 [type='color']::-moz-color-swatch {
   border: 0;
 }
-$primary: var(--q-theme-primary);
-$primary-rgb: var(--q-theme-primary-rgb);
-$primary-light: var(--q-theme-primary-light);
-$primary-light-rgb: var(--q-theme-primary-light-rgb);
-$primary-dark: var(--q-theme-primary-dark);
-$primary-dark-rgb: var(--q-theme-primary-dark-rgb);
-$on-primary: var(--q-theme-on-primary);
-$on-primary-rgb: var(--q-theme-on-primary-rgb);
-$secondary: var(--q-theme-secondary);
-$secondary-rgb: var(--q-theme-secondary-rgb);
-$on-secondary: var(--q-theme-on-secondary);
-$on-secondary-rgb: var(--q-theme-on-secondary-rgb);
-$highlight: var(--q-theme-highlight);
-$highlight-rgb: var(--q-theme-highlight-rgb);
-$on-highlight: var(--q-theme-on-highlight);
-$on-highlight-rgb: var(--q-theme-on-highlight-rgb);
-$background: var(--q-theme-background);
-$background-rgb: var(--q-theme-background-rgb);
-$on-background: var(--q-theme-on-background);
-$on-background-rgb: var(--q-theme-on-background-rgb);
-$container: var(--q-theme-container);
-$container-rgb: var(--q-theme-container-rgb);
-$info: var(--q-theme-info);
-$info-rgb: var(--q-theme-info-rgb);
-$info-light: var(--q-theme-info-light);
-$info-light-rgb: var(--q-theme-info-light-rgb);
-$info-dark: var(--q-theme-info-dark);
-$info-dark-rgb: var(--q-theme-info-dark-rgb);
-$on-info: var(--q-theme-on-info);
-$on-info-rgb: var(--q-theme-on-info-rgb);
-$success: var(--q-theme-success);
-$success-rgb: var(--q-theme-success-rgb);
-$success-light: var(--q-theme-success-light);
-$success-light-rgb: var(--q-theme-success-light-rgb);
-$success-dark: var(--q-theme-success-dark);
-$success-dark-rgb: var(--q-theme-success-dark-rgb);
-$on-success: var(--q-theme-on-success);
-$on-success-rgb: var(--q-theme-on-success-rgb);
-$warning: var(--q-theme-warning);
-$warning-rgb: var(--q-theme-warning-rgb);
-$warning-light: var(--q-theme-warning-light);
-$warning-light-rgb: var(--q-theme-warning-light-rgb);
-$warning-dark: var(--q-theme-warning-dark);
-$warning-dark-rgb: var(--q-theme-warning-dark-rgb);
-$on-warning: var(--q-theme-on-warning);
-$on-warning-rgb: var(--q-theme-on-warning-rgb);
-$danger: var(--q-theme-danger);
-$danger-rgb: var(--q-theme-danger-rgb);
-$danger-light: var(--q-theme-danger-light);
-$danger-light-rgb: var(--q-theme-danger-light-rgb);
-$danger-dark: var(--q-theme-danger-dark);
-$danger-dark-rgb: var(--q-theme-danger-dark-rgb);
-$on-danger: var(--q-theme-on-danger);
-$on-danger-rgb: var(--q-theme-on-danger-rgb);
-$neutral: var(--q-theme-neutral);
-$neutral-rgb: var(--q-theme-neutral-rgb);
-$neutral-light: var(--q-theme-neutral-light);
-$neutral-light-rgb: var(--q-theme-neutral-light-rgb);
-$neutral-dark: var(--q-theme-neutral-dark);
-$neutral-dark-rgb: var(--q-theme-neutral-dark-rgb);
-$theme-colors: (
-  'primary': $primary,
-  'secondary': $secondary,
-  'highlight': $highlight,
-  'info': $info,
-  'success': $success,
-  'warning': $warning,
-  'danger': $danger,
-  'neutral': $neutral
-);
-$border-radius: 0.25rem !default;
-$compact: true !default;
-$space-base: 0.25rem !default;
-$space-x-base: $space-base !default;
-$space-y-base: $space-base !default;
-$space-none: (
-  x: 0,
-  y: 0
-) !default;
-$space-xs: (
-  x: (
-    $space-x-base * 0.25
-  ),
-  y: (
-    $space-y-base * 0.25
-  )
-) !default;
-$space-sm: (
-  x: (
-    $space-x-base * 0.5
-  ),
-  y: (
-    $space-y-base * 0.5
-  )
-) !default;
-$space-md: (
-  x: $space-x-base,
-  y: $space-y-base
-) !default;
-$space-lg: (
-  x: (
-    $space-x-base * 1.5
-  ),
-  y: (
-    $space-y-base * 1.5
-  )
+$q-control-height-compact-md: 25px !default;
+$q-control-height-regular-md: 32px !default;
+$q-control-height-loose-md: 44px !default;
+$q-density-scale-compact: math.div(
+  $q-control-height-compact-md,
+  $q-control-height-regular-md
 ) !default;
-$space-xl: (
-  x: (
-    $space-x-base * 3
-  ),
-  y: (
-    $space-y-base * 3
-  )
+$q-density-scale-regular: math.div(
+  $q-control-height-regular-md,
+  $q-control-height-regular-md
 ) !default;
-$spaces: (
-  'none': $space-none,
-  'xs': $space-xs,
-  'sm': $space-sm,
-  'md': $space-md,
-  'lg': $space-lg,
-  'xl': $space-xl
-) !default;
-$shadow-sm: (0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgb(0 0 0 / 5%));
-$shadow-md: (
-  0 0 #0000,
-  0 0 #0000,
-  0 4px 6px -1px rgb(0 0 0 / 10%),
-  0 2px 4px -2px rgb(0 0 0 / 10%)
-);
-$overlay-z-index: 1070 !default;
+$q-density-scale-loose: math.div($q-control-height-loose-md, $q-control-height-regular-md) !default;
 $breakpoint-sm: 576px;
 $breakpoint-md: 768px;
 $breakpoint-lg: 992px;
 $breakpoint-xl: 1200px;
 $breakpoint-xxl: 1400px;
-$font-size-base: 0.9rem !default;
-$line-height-base: 1.5 !default;
-$icon-size: 1.15em !default;
-$icon-size-sm: $icon-size * 0.87 !default;
-$selection-control-size: 1.15rem !default;
-$font-weight-thin: 100;
-$font-weight-light: 300;
-$font-weight-regular: 400;
-$font-weight-italic: 400;
-$font-weight-bold: 700;
-$font-weight-black: 900;
-$border: var(--q-theme-neutral-light) !default;
-$outline-width: 2px !default;
-$outline-style: solid !default;
-$outline-color: rgb(var(--q-theme-info-rgb) / 50%) !default;
-$outline: $outline-width $outline-style $outline-color;
-$scrollbar-thumb: var(--q-theme-neutral-light);
-$scrollbar-track: rgb(var(--q-theme-neutral-light-rgb) / 25%);
-$headings-text-transform: uppercase !default;
-$group-border-bottom: 1px solid $border !default;
-$input-padding-y: 0.26rem !default;
-$input-padding-x: 0.25rem !default;
+@mixin q-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+@mixin q-density-scoped-tokens {
+  --q-space-1: calc(4px * var(--q-density-scale));
+  --q-space-2: calc(8px * var(--q-density-scale));
+  --q-space-3: calc(12px * var(--q-density-scale));
+  --q-space-4: calc(16px * var(--q-density-scale));
+  --q-space-5: calc(20px * var(--q-density-scale));
+  --q-space-6: calc(24px * var(--q-density-scale));
+  --q-control-height-sm: calc(28px * var(--q-density-scale));
+  --q-control-height-md: calc(#{$q-control-height-regular-md} * var(--q-density-scale));
+  --q-control-height-lg: calc(40px * var(--q-density-scale));
+  --q-interactive-height: var(--q-control-height-md);
+  --q-control-padding-x-sm: calc(8px * var(--q-density-scale));
+  --q-control-padding-x-md: calc(10px * var(--q-density-scale));
+  --q-control-padding-x-lg: calc(12px * var(--q-density-scale));
+  --q-control-padding-y-sm: calc(4px * var(--q-density-scale));
+  --q-control-padding-y-md: calc(6px * var(--q-density-scale));
+  --q-control-padding-y-lg: calc(8px * var(--q-density-scale));
+  --q-font-size-sm: calc(0.75rem * var(--q-density-scale));
+  --q-font-size-md: calc(0.875rem * var(--q-density-scale));
+  --q-font-size-lg: calc(1rem * var(--q-density-scale));
+  --q-line-height-sm: calc(1rem * var(--q-density-scale));
+  --q-line-height-md: calc(1.25rem * var(--q-density-scale));
+  --q-line-height-lg: calc(1.5rem * var(--q-density-scale));
+  --q-letter-spacing-sm: calc(0.0063rem * var(--q-density-scale));
+  --q-letter-spacing-md: calc(0.0125rem * var(--q-density-scale));
+  --q-letter-spacing-lg: calc(0.0187rem * var(--q-density-scale));
+  --q-selection-control-size: calc(var(--q-selection-control-size-base) * var(--q-density-scale));
+  --q-field-padding-y: calc(var(--q-field-padding-y-base) * var(--q-density-scale));
+  --q-field-padding-x: calc(var(--q-field-padding-x-base) * var(--q-density-scale));
+  --q-icon-size-sm: calc(14px * var(--q-density-scale));
+  --q-icon-size-md: calc(16px * var(--q-density-scale));
+  --q-icon-size-lg: calc(20px * var(--q-density-scale));
+  --q-icon-padding: calc(4px * var(--q-density-scale));
+  --q-border-radius: calc(4px * var(--q-density-scale));
+  
+  --q-border-width: 1px;
+  --q-focus-ring-width: 2px;
+  --q-focus-ring-offset: 1px;
+  --q-focus-ring-radius: var(--q-border-radius);
+  --q-focus-ring-color: rgb(var(--q-theme-info-rgb) / 50%);
+  --q-focus-ring: var(--q-focus-ring-width) solid var(--q-focus-ring-color);
+  
+  --q-shadow-sm: 0 calc(1px * var(--q-density-scale)) calc(2px * var(--q-density-scale)) 0
+    rgb(0 0 0 / 5%);
+  
+  --q-shadow-md:
+    0 calc(4px * var(--q-density-scale)) calc(6px * var(--q-density-scale))
+      calc(-1px * var(--q-density-scale)) rgb(0 0 0 / 10%),
+    0 calc(2px * var(--q-density-scale)) calc(4px * var(--q-density-scale))
+      calc(-2px * var(--q-density-scale)) rgb(0 0 0 / 10%);
+  
+  --q-shadow-lg: 0 calc(8px * var(--q-density-scale)) calc(12px * var(--q-density-scale))
+    rgb(var(--q-theme-neutral-dark-rgb) / 25%);
+}
+@mixin q-size-modifiers {
+  &--small {
+    --q-density-scale: calc(var(--q-density-scale-base) * 0.8);
+    @include q-density-scoped-tokens;
+  }
+  &--large {
+    --q-density-scale: calc(var(--q-density-scale-base) * 1.2);
+    @include q-density-scoped-tokens;
+  }
+}
+@mixin q-field-affix-button {
+  --q-button-height: calc(var(--q-interactive-height) * 0.6);
+  height: var(--q-button-height);
+  min-height: var(--q-button-height);
+  padding: calc(var(--q-control-padding-y-sm) * 0.25) calc(var(--q-control-padding-x-sm) * 0.25);
+  opacity: 0.5;
+  svg {
+    width: var(--q-icon-size-sm);
+    height: var(--q-icon-size-sm);
+  }
+  &:hover {
+    cursor: inherit;
+  }
+}
 :root {
-  --border-radius: #{$border-radius};
+  --q-density: regular;
+  
+  --q-density-scale-base: #{$q-density-scale-regular};
+  --q-density-scale: var(--q-density-scale-base);
+  
+  --q-font-size-base: 0.9rem;
+  --q-font-weight-regular: 400;
+  --q-font-weight-bold: 700;
+  --q-font-weight-black: 900;
+  --q-overlay-z-index: 1070;
+  --q-border-color: var(--q-theme-neutral-light);
+  --q-scrollbar-thumb: var(--q-theme-neutral-light);
+  --q-scrollbar-track: rgb(var(--q-theme-neutral-light-rgb) / 25%);
+  --q-headings-text-transform: uppercase;
+  --q-group-border-bottom: var(--q-border-width) solid var(--q-border-color);
+  --q-transition-duration: 0.2s;
+  --q-transition-timing-function: ease;
+  
+  --q-field-padding-y-base: 0.26rem;
+  --q-field-padding-x-base: 0.25rem;
+  --q-selection-control-size-base: 1.15rem;
+  @include q-density-scoped-tokens;
+}
+[data-q-density='compact'],
+.q-density--compact {
+  --q-density: compact;
+  --q-density-scale-base: #{$q-density-scale-compact};
+  --q-density-scale: var(--q-density-scale-base);
+}
+[data-q-density='regular'],
+.q-density--regular {
+  --q-density: regular;
+  --q-density-scale-base: #{$q-density-scale-regular};
+  --q-density-scale: var(--q-density-scale-base);
+}
+[data-q-density='loose'],
+.q-density--loose {
+  --q-density: loose;
+  --q-density-scale-base: #{$q-density-scale-loose};
+  --q-density-scale: var(--q-density-scale-base);
 }
 *,
 ::after,
 ::before {
-  border: 0 solid $border;
-  outline-offset: 1px;
+  border: 0 solid var(--q-border-color);
+  outline-offset: var(--q-focus-ring-offset);
 }
 body {
   background-color: var(--q-theme-background);
-  font-size: $font-size-base;
+  font-size: var(--q-font-size-base);
   color: var(--q-theme-on-background);
   caret-color: var(--q-theme-on-background);
   
   * {
     
-    scrollbar-color: $scrollbar-thumb $scrollbar-track;
+    scrollbar-color: var(--q-scrollbar-thumb) var(--q-scrollbar-track);
     scrollbar-width: thin;
     
     &::-webkit-scrollbar {
@@ -556,16 +544,15 @@ body {
       height: 7px;
     }
     &::-webkit-scrollbar-thumb {
-      background-color: $scrollbar-thumb;
-      border-radius: var(--border-radius);
+      background-color: var(--q-scrollbar-thumb);
+      border-radius: var(--q-border-radius);
     }
     &::-webkit-scrollbar-track {
-      background-color: $scrollbar-track;
-      border-radius: var(--border-radius);
+      background-color: var(--q-scrollbar-track);
+      border-radius: var(--q-border-radius);
     }
   }
 }
-$transition-duration: 0.2s !default;
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
@@ -576,7 +563,7 @@ $transition-duration: 0.2s !default;
 }
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity $transition-duration;
+  transition: opacity var(--q-transition-duration);
 }
 .scale-enter-from,
 .scale-leave-to {
@@ -591,8 +578,8 @@ $transition-duration: 0.2s !default;
 .scale-enter-active,
 .scale-leave-active {
   transition:
-    transform $transition-duration ease,
-    opacity $transition-duration ease;
+    transform var(--q-transition-duration) var(--q-transition-timing-function),
+    opacity var(--q-transition-duration) var(--q-transition-timing-function);
 }
 .slide-up-enter-from,
 .slide-up-leave-to {
@@ -607,8 +594,8 @@ $transition-duration: 0.2s !default;
 .slide-up-enter-active,
 .slide-up-leave-active {
   transition:
-    transform $transition-duration ease,
-    opacity $transition-duration ease;
+    transform var(--q-transition-duration) var(--q-transition-timing-function),
+    opacity var(--q-transition-duration) var(--q-transition-timing-function);
 }
 .slide-down-enter-from,
 .slide-down-leave-to {
@@ -623,8 +610,8 @@ $transition-duration: 0.2s !default;
 .slide-down-enter-active,
 .slide-down-leave-active {
   transition:
-    transform $transition-duration ease,
-    opacity $transition-duration ease;
+    transform var(--q-transition-duration) var(--q-transition-timing-function),
+    opacity var(--q-transition-duration) var(--q-transition-timing-function);
 }
 .slide-left-enter-from,
 .slide-left-leave-to {
@@ -639,8 +626,8 @@ $transition-duration: 0.2s !default;
 .slide-left-enter-active,
 .slide-left-leave-active {
   transition:
-    transform $transition-duration ease,
-    opacity $transition-duration ease;
+    transform var(--q-transition-duration) var(--q-transition-timing-function),
+    opacity var(--q-transition-duration) var(--q-transition-timing-function);
 }
 .slide-right-enter-from,
 .slide-right-leave-to {
@@ -655,22 +642,11 @@ $transition-duration: 0.2s !default;
 .slide-right-enter-active,
 .slide-right-leave-active {
   transition:
-    transform $transition-duration ease,
-    opacity $transition-duration ease;
-}
-@mixin sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
+    transform var(--q-transition-duration) var(--q-transition-timing-function),
+    opacity var(--q-transition-duration) var(--q-transition-timing-function);
 }
 .q-sr-only {
-  @include sr-only;
+  @include q-sr-only;
 }
 .q-chevron {
   transition: all 0.2s;
@@ -682,15 +658,7 @@ $transition-duration: 0.2s !default;
   }
 }
 .q-clear-btn.q-button {
-  padding: 0.1rem;
-  opacity: 0.5;
-  svg {
-    width: $icon-size-sm;
-    height: $icon-size-sm;
-  }
-  &:hover {
-    cursor: inherit;
-  }
+  @include q-field-affix-button;
   &:hover,
   &:focus {
     opacity: 1;
@@ -706,7 +674,7 @@ $transition-duration: 0.2s !default;
 }
 .q-safe-triangle {
   position: fixed;
-  z-index: $overlay-z-index + 1;
+  z-index: calc(var(--q-overlay-z-index) + 1);
   overflow: visible;
   pointer-events: none;
   &__path {
@@ -717,17 +685,17 @@ $transition-duration: 0.2s !default;
 .q-accordion {
   display: flex;
   flex-direction: column;
-  gap: $space-base;
+  gap: var(--q-space-1);
   height: fit-content;
 }
 .q-avatar {
-  --q-avatar-size: 48px;
+  --q-avatar-size: calc(48px * var(--q-density-scale));
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   box-sizing: border-box;
-  font-size: 1rem;
+  font-size: var(--q-font-size-lg);
   width: var(--q-avatar-size);
   height: var(--q-avatar-size);
   border-radius: 50%; 
@@ -747,10 +715,10 @@ $transition-duration: 0.2s !default;
   }
   
   &--small {
-    --q-avatar-size: 32px;
+    --q-avatar-size: calc(32px * var(--q-density-scale));
   }
   &--large {
-    --q-avatar-size: 64px;
+    --q-avatar-size: calc(64px * var(--q-density-scale));
   }
   
   &--square {
@@ -760,10 +728,12 @@ $transition-duration: 0.2s !default;
 .q-badge {
   $this: &;
   display: inline-flex;
-  border-width: 1px;
+  align-items: center;
+  min-height: var(--q-interactive-height);
+  border-width: var(--q-border-width, 1px);
   border-color: transparent;
-  border-radius: var(--border-radius);
-  font-size: 0.75rem;
+  border-radius: var(--q-border-radius);
+  font-size: var(--q-font-size-sm);
   line-height: 1;
   position: relative;
   transition-property:
@@ -787,12 +757,12 @@ $transition-duration: 0.2s !default;
   &__content,
   &__content.q-button {
     display: inline-flex;
-    border-width: 1px;
-    border-radius: var(--border-radius);
+    border-width: var(--q-border-width, 1px);
+    border-radius: var(--q-border-radius);
     align-items: center;
     gap: 0.25em;
     z-index: 1;
-    font-size: 0.75rem;
+    font-size: var(--q-font-size-sm);
   }
   &__content:not(.q-button) {
     border-color: transparent;
@@ -808,18 +778,22 @@ $transition-duration: 0.2s !default;
     color: currentcolor;
   }
   &__remove.q-button {
-    padding: 0.25rem;
+    padding: var(--q-control-padding-y-sm);
     min-width: fit-content;
   }
   &:not(:has(button.q-badge__content)) {
     
     .q-badge__remove.q-button {
+      
+      --q-button-height: calc(var(--q-interactive-height) - (var(--q-border-width, 1px) * 2));
+      height: var(--q-button-height);
+      min-height: var(--q-button-height);
       background-color: transparent;
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
       border-color: transparent;
       .q-button__content {
-        padding: 0.08rem;
+        padding: calc(0.08rem * var(--q-density-scale));
         border-radius: 9999px;
       }
       &:not(:disabled):hover {
@@ -864,19 +838,7 @@ $transition-duration: 0.2s !default;
     pointer-events: none;
   }
   
-  &--large {
-    min-height: 44px;
-    &:is(span) {
-      padding: 0 0.5rem;
-    }
-    button.q-button {
-      &.q-badge__content,
-      &.q-badge__remove {
-        min-height: 40px;
-        padding: 0 1rem;
-      }
-    }
-  }
+  @include q-size-modifiers;
   span {
     display: inline-flex;
   }
@@ -891,14 +853,21 @@ $transition-duration: 0.2s !default;
 }
 .q-badge-indicator {
   $this: &;
+  --q-badge-indicator-size: calc(1.25rem * var(--q-density-scale));
+  --q-badge-indicator-padding: calc(0.25rem * var(--q-density-scale));
+  --q-badge-indicator-dot-size: calc(8px * var(--q-density-scale));
   flex-wrap: wrap;
   place-content: center center;
   align-items: center;
   position: absolute;
-  height: 1.25rem;
-  min-width: 1.25rem;
-  padding: 0.25rem;
+  height: var(--q-badge-indicator-size);
+  min-width: var(--q-badge-indicator-size);
+  min-height: var(--q-badge-indicator-size);
+  padding: var(--q-badge-indicator-padding);
   transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0;
+  &.q-badge {
+    min-height: var(--q-badge-indicator-size);
+  }
   &__wrapper {
     position: relative;
     display: inline-flex;
@@ -909,11 +878,14 @@ $transition-duration: 0.2s !default;
     padding: 0;
   }
   
-  &--dot {
-    border-radius: 4px;
-    height: 8px;
-    min-width: 8px;
+  &--dot,
+  &.q-badge#{&}--dot {
+    width: var(--q-badge-indicator-dot-size);
+    height: var(--q-badge-indicator-dot-size);
+    min-width: var(--q-badge-indicator-dot-size);
+    min-height: var(--q-badge-indicator-dot-size);
     padding: 0;
+    border-radius: 50%;
   }
   &--top-right {
     top: 0;
@@ -974,17 +946,25 @@ $transition-duration: 0.2s !default;
   --q-button-hover-color-rgb: var(--q-theme-primary-dark-rgb);
   --q-button-on-hover-color: var(--q-theme-on-primary-dark);
   --q-button-on-hover-color-rgb: var(--q-theme-on-primary-dark-rgb);
+  --q-button-height: var(--q-interactive-height);
+  --q-button-padding-y: var(--q-control-padding-y-md);
+  --q-button-padding-x: var(--q-control-padding-x-md);
+  --q-button-labeled-padding-x: var(--q-control-padding-x-lg);
+  --q-button-font-size: var(--q-font-size-md);
   display: inline-flex;
   user-select: none;
   align-items: center;
   justify-content: center;
+  height: var(--q-button-height);
+  min-height: var(--q-button-height);
   overflow: hidden;
   position: relative;
-  border-width: 1px;
-  padding: 0.4rem;
+  border-width: var(--q-border-width, 1px);
+  padding: var(--q-button-padding-y) var(--q-button-padding-x);
   line-height: 1;
-  gap: $space-base;
-  border-radius: var(--border-radius);
+  font-size: var(--q-button-font-size);
+  gap: var(--q-space-1);
+  border-radius: var(--q-border-radius);
   outline: none;
   margin: 0;
   text-decoration: none;
@@ -993,18 +973,18 @@ $transition-duration: 0.2s !default;
     color, background-color, border-color, box-shadow, text-decoration-color, fill, stroke;
   transition-duration: 0.15s;
   &#{$this}--labeled {
-    padding: 0.4rem 0.8rem;
+    padding: var(--q-button-padding-y) var(--q-button-labeled-padding-x);
     
     
     &:where(:has(#{$this}__content > .q-icon)):where(:not(#{$this}--icon-end)):where(
         :not(#{$this}--icon-top)
       ):where(:not(#{$this}--icon-bottom)) {
-      padding-inline-start: 0.6rem;
+      padding-inline-start: var(--q-control-padding-x-md);
     }
     
     &:where(#{$this}--icon-end):where(:has(#{$this}__content > .q-icon)),
     &:where(:has(#{$this}__append .q-icon)) {
-      padding-inline-end: 0.6rem;
+      padding-inline-end: var(--q-control-padding-x-md);
     }
   }
   &__content {
@@ -1023,7 +1003,7 @@ $transition-duration: 0.2s !default;
     opacity: 0.6;
   }
   &:focus {
-    outline: $outline;
+    outline: var(--q-focus-ring);
     z-index: 3; 
     &:not(:focus-visible) {
       outline: 0;
@@ -1131,38 +1111,24 @@ $transition-duration: 0.2s !default;
     }
   }
   
-  &--small {
-    font-size: 0.8em;
-    padding: 0.25rem;
-    &#{$this}--labeled {
-      padding: 0.25rem 0.5rem;
-      &:where(:has(#{$this}__content > .q-icon)):where(:not(#{$this}--icon-end)):where(
-          :not(#{$this}--icon-top)
-        ):where(:not(#{$this}--icon-bottom)) {
-        padding-inline-start: 0.375rem;
-      }
-      &:where(#{$this}--icon-end):where(:has(#{$this}__content > .q-icon)),
-      &:where(:has(#{$this}__append .q-icon)) {
-        padding-inline-end: 0.375rem;
-      }
-    }
-  }
+  @include q-size-modifiers;
   
   &--borderless {
     border-color: transparent;
   }
   &--elevated {
-    box-shadow:
-      0 3px 1px -2px rgb(var(--q-theme-on-background-rgb) / 20%),
-      0 2px 2px 0 rgb(var(--q-theme-on-background-rgb) / 14%),
-      0 1px 5px 0 rgb(var(--q-theme-on-background-rgb) / 12%);
+    box-shadow: var(--q-shadow-md);
   }
   &--icon-end {
     #{$this}__content {
       flex-direction: row-reverse;
     }
   }
-  &--icon-top {
+  &--icon-top,
+  &--icon-bottom {
+    height: auto;
+    min-height: var(--q-button-height);
+    overflow: visible;
     #{$this}__content {
       flex-direction: column;
     }
@@ -1180,12 +1146,9 @@ $transition-duration: 0.2s !default;
 .q-button-group {
   position: relative;
   display: inline-flex;
-  border-radius: var(--border-radius);
+  border-radius: var(--q-border-radius);
   &--elevated {
-    box-shadow:
-      0 3px 1px -2px rgb(var(--q-theme-on-background-rgb) / 20%),
-      0 2px 2px 0 rgb(var(--q-theme-on-background-rgb) / 14%),
-      0 1px 5px 0 rgb(var(--q-theme-on-background-rgb) / 12%);
+    box-shadow: var(--q-shadow-md);
   }
   > .q-button {
     position: relative;
@@ -1211,26 +1174,31 @@ $transition-duration: 0.2s !default;
   }
 }
 .q-card {
-  --card-base-padding: 1rem;
-  --card-padding: 1rem;
-  --card-border: 1px solid #{$border};
-  --card-width: fit-content;
-  --card-hover: 0 5px 15px rgb(var(--q-theme-neutral-rgb) / 25%);
-  --card-scale: 1;
-  --card-shadow: none;
-  --card-background: var(--q-theme-container);
-  min-width: 7rem;
-  min-height: 5rem;
+  --q-card-base-padding: var(--q-space-4);
+  --q-card-padding: var(--q-space-4);
+  --q-card-border: var(--q-border-width) solid var(--q-border-color);
+  --q-card-width: fit-content;
+  --q-card-hover: 0 calc(5px * var(--q-density-scale)) calc(15px * var(--q-density-scale))
+    rgb(var(--q-theme-neutral-rgb) / 25%);
+  --q-card-scale: 1;
+  --q-card-shadow: none;
+  --q-card-background: var(--q-theme-container);
+  --q-card-title-font-size: calc(var(--q-font-size-lg) * 1.05);
+  --q-card-subtitle-font-size: var(--q-font-size-sm);
+  --q-card-min-width: calc(7rem * var(--q-density-scale));
+  --q-card-min-height: calc(5rem * var(--q-density-scale));
+  min-width: var(--q-card-min-width);
+  min-height: var(--q-card-min-height);
   height: 100%;
-  border: var(--card-border);
-  border-radius: var(--border-radius);
-  background-color: var(--card-background);
-  width: var(--card-width);
+  border: var(--q-card-border);
+  border-radius: var(--q-border-radius);
+  background-color: var(--q-card-background);
+  width: var(--q-card-width);
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  box-shadow: var(--card-shadow);
-  transform: scale(var(--card-scale));
+  box-shadow: var(--q-card-shadow);
+  transform: scale(var(--q-card-scale));
   transition:
     box-shadow 0.2s ease-in-out,
     transform 0.2s cubic-bezier(0.155, 1.105, 0.295, 1.12);
@@ -1238,13 +1206,13 @@ $transition-duration: 0.2s !default;
     display: flex;
     flex: 1;
     flex-direction: column;
-    padding-bottom: var(--card-base-padding);
+    padding-bottom: var(--q-card-base-padding);
   }
   &__header-content {
     display: flex;
-    gap: 0.5rem;
-    padding: var(--card-padding);
-    padding-top: var(--card-base-padding);
+    gap: var(--q-space-2);
+    padding: var(--q-card-padding);
+    padding-top: var(--q-card-base-padding);
     padding-bottom: 0;
   }
   &__header-text {
@@ -1255,37 +1223,37 @@ $transition-duration: 0.2s !default;
   &__title {
     width: 100%;
     margin: 0;
-    font-size: 1.05rem;
-    line-height: 1rem;
-    letter-spacing: 0.02rem;
+    font-size: var(--q-card-title-font-size);
+    line-height: var(--q-line-height-md);
+    letter-spacing: var(--q-letter-spacing-md);
     font-weight: 600;
   }
   &__subtitle {
     width: 100%;
     margin: 0;
-    font-size: 0.75rem;
+    font-size: var(--q-card-subtitle-font-size);
     color: var(--q-theme-neutral);
-    padding-top: 0.5rem;
+    padding-top: var(--q-space-2);
   }
   &__content {
     display: flex;
     flex-direction: column;
-    padding: var(--card-padding);
+    padding: var(--q-card-padding);
     padding-top: 0;
-    padding-bottom: var(--card-base-padding);
+    padding-bottom: var(--q-card-base-padding);
   }
   
   &--elevation-low {
-    --card-shadow: 0 4px 6px rgb(var(--q-theme-neutral-dark-rgb) / 15%);
+    --q-card-shadow: var(--q-shadow-sm);
   }
   &--elevation-medium {
-    --card-shadow: 0 6px 9px rgb(var(--q-theme-neutral-dark-rgb) / 20%);
+    --q-card-shadow: var(--q-shadow-md);
   }
   &--elevation-high {
-    --card-shadow: 0 8px 12px rgb(var(--q-theme-neutral-dark-rgb) / 25%);
+    --q-card-shadow: var(--q-shadow-lg);
   }
   &--background {
-    --card-background: rgb(var(--q-theme-primary-light-rgb) / 50%);
+    --q-card-background: rgb(var(--q-theme-primary-light-rgb) / 50%);
     .q-field__control {
       background-color: var(--q-theme-container);
     }
@@ -1293,32 +1261,32 @@ $transition-duration: 0.2s !default;
   &--title-background {
     .q-card__header-content {
       background-color: rgb(var(--q-theme-neutral-light-rgb) / 25%);
-      padding-bottom: 0.75rem;
+      padding-bottom: var(--q-space-3);
     }
     .q-card__title {
       color: var(--q-theme-neutral-dark);
-      font-size: 1.1rem;
+      font-size: calc(var(--q-font-size-lg) * 1.1);
       letter-spacing: unset;
       text-transform: unset;
-      font-weight: $font-weight-bold;
+      font-weight: var(--q-font-weight-bold);
     }
   }
   &--minor {
     .q-card__title {
-      font-size: 0.9rem;
+      font-size: var(--q-font-size-md);
       text-transform: unset;
       font-weight: 600;
       color: var(--q-theme-neutral);
     }
     .q-card__subtitle {
-      font-size: 0.75rem;
+      font-size: var(--q-font-size-sm);
       color: rgb(var(--q-theme-neutral-rgb) / 80%);
     }
   }
   
   &--borderless {
-    --card-border: 1px solid transparent;
-    --card-background: transparent;
+    --q-card-border: var(--q-border-width) solid transparent;
+    --q-card-background: transparent;
   }
   &--clickable {
     text-decoration: none;
@@ -1326,21 +1294,21 @@ $transition-duration: 0.2s !default;
     &:not(.q-card--disabled) {
       cursor: pointer;
       &:hover {
-        --card-scale: 1.01;
-        --card-shadow: var(--card-hover);
+        --q-card-scale: 1.01;
+        --q-card-shadow: var(--q-card-hover);
       }
     }
   }
   
   &--loading {
-    padding: 3rem 5rem;
+    padding: calc(3rem * var(--q-density-scale)) calc(5rem * var(--q-density-scale));
     justify-content: center;
     align-items: center;
   }
   
   @mixin card-width($width, $multiplier: 1) {
     &--#{$width} {
-      --card-width: calc(#{$multiplier} * 5em + #{$multiplier - 1} * #{$space-base});
+      --q-card-width: calc(#{$multiplier} * 5em + #{$multiplier - 1} * var(--q-space-1));
     }
   }
   @include card-width(medium, 3);
@@ -1348,19 +1316,31 @@ $transition-duration: 0.2s !default;
   @include card-width(xlarge, 6);
   @include card-width(xxlarge, 8);
   &--block {
-    --card-width: 100%;
+    --q-card-width: 100%;
   }
 }
 $q-carousel-height: 360px;
 $q-carousel-height-md: 300px;
 .q-carousel {
-  --q-carousel-height: #{$q-carousel-height};
+  --q-carousel-height: calc(#{$q-carousel-height} * var(--q-density-scale));
+  --q-carousel-control-size: calc(48px * var(--q-density-scale));
+  --q-carousel-control-icon-size: calc(24px * var(--q-density-scale));
+  --q-carousel-control-inset: calc(1rem * var(--q-density-scale));
+  --q-carousel-caption-bottom: calc(3.5rem * var(--q-density-scale));
+  --q-carousel-indicator-width: calc(30px * var(--q-density-scale));
+  --q-carousel-indicator-height: calc(4px * var(--q-density-scale));
+  --q-carousel-indicator-gap: calc(0.5rem * var(--q-density-scale));
+  --q-carousel-indicators-bottom: calc(1rem * var(--q-density-scale));
+  --q-carousel-title-size: calc(var(--q-font-size-lg) * 2);
+  --q-carousel-subtitle-size: calc(var(--q-font-size-lg) * 1.1);
+  --q-carousel-skeleton-gap: calc(8px * var(--q-density-scale));
+  --q-carousel-skeleton-inset: calc(16px * var(--q-density-scale));
   position: relative;
   overflow: hidden;
   width: 100%;
   height: var(--q-carousel-height);
-  border-radius: $border-radius;
-  background-color: $neutral-light;
+  border-radius: var(--q-border-radius);
+  background-color: var(--q-theme-neutral-light);
   outline: none;
 }
 .q-carousel__track {
@@ -1385,7 +1365,7 @@ $q-carousel-height-md: 300px;
 }
 .q-carousel__caption-global {
   position: absolute;
-  bottom: 3.5rem;
+  bottom: var(--q-carousel-caption-bottom);
   left: 50%;
   transform: translateX(-50%);
   text-align: center;
@@ -1394,24 +1374,24 @@ $q-carousel-height-md: 300px;
   max-width: 80%;
 }
 .q-carousel__title {
-  margin: 0 0 0.25rem;
-  font-size: 2rem;
+  margin: 0 0 var(--q-space-1);
+  font-size: var(--q-carousel-title-size);
   font-weight: 600;
   text-shadow: 0 2px 4px rgb(0 0 0 / 50%);
 }
 .q-carousel__subtitle {
   margin: 0;
-  font-size: 1.1rem;
+  font-size: var(--q-carousel-subtitle-size);
   opacity: 0.9;
   text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
 }
 .q-carousel__indicators {
   position: absolute;
-  bottom: 1rem;
+  bottom: var(--q-carousel-indicators-bottom);
   left: 50%;
   transform: translateX(-50%);
   display: flex;
-  gap: 0.5rem;
+  gap: var(--q-carousel-indicator-gap);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -1419,9 +1399,9 @@ $q-carousel-height-md: 300px;
 }
 .q-carousel__indicator {
   position: relative; 
-  width: 30px;
-  height: 4px;
-  border-radius: 2px;
+  width: var(--q-carousel-indicator-width);
+  height: var(--q-carousel-indicator-height);
+  border-radius: calc(2px * var(--q-density-scale));
   background-color: rgb(255 255 255 / 50%);
   cursor: pointer;
   transition: all 0.3s ease;
@@ -1432,7 +1412,7 @@ $q-carousel-height-md: 300px;
 }
 .q-carousel__indicator--active {
   background-color: white;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
+  box-shadow: var(--q-shadow-md);
 }
 .q-carousel__indicator--active::before {
   content: '';
@@ -1452,8 +1432,8 @@ $q-carousel-height-md: 300px;
   background: rgb(0 0 0 / 50%);
   border: none;
   border-radius: 50%;
-  width: 48px;
-  height: 48px;
+  width: var(--q-carousel-control-size);
+  height: var(--q-carousel-control-size);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1466,14 +1446,14 @@ $q-carousel-height-md: 300px;
   background: rgb(0 0 0 / 70%);
 }
 .q-carousel__control--prev {
-  left: 1rem;
+  left: var(--q-carousel-control-inset);
 }
 .q-carousel__control--next {
-  right: 1rem;
+  right: var(--q-carousel-control-inset);
 }
 .q-carousel__control-icon.q-icon {
-  width: 24px;
-  height: 24px;
+  width: var(--q-carousel-control-icon-size);
+  height: var(--q-carousel-control-icon-size);
 }
 .q-carousel__skeleton {
   position: relative;
@@ -1488,7 +1468,7 @@ $q-carousel-height-md: 300px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 8px;
+  gap: var(--q-carousel-skeleton-gap);
   width: 100%;
   max-width: 600px;
 }
@@ -1499,7 +1479,7 @@ $q-carousel-height-md: 300px;
   right: 0;
   display: flex;
   justify-content: space-between;
-  padding: 0 16px;
+  padding: 0 var(--q-carousel-skeleton-inset);
   transform: translateY(-50%);
 }
 .q-carousel__skeleton-caption,
@@ -1517,55 +1497,48 @@ $q-carousel-height-md: 300px;
 }
 @media (max-width: $breakpoint-md) {
   .q-carousel {
-    --q-carousel-height: #{$q-carousel-height-md};
+    --q-carousel-height: calc(#{$q-carousel-height-md} * var(--q-density-scale));
+    --q-carousel-control-size: var(--q-control-height-lg);
+    --q-carousel-control-icon-size: var(--q-icon-size-md);
+    --q-carousel-control-inset: calc(0.5rem * var(--q-density-scale));
+    --q-carousel-caption-bottom: calc(3rem * var(--q-density-scale));
+    --q-carousel-title-size: calc(var(--q-font-size-lg) * 1.5);
+    --q-carousel-subtitle-size: var(--q-font-size-lg);
   }
   .q-carousel__caption-global {
-    bottom: 3rem;
     max-width: 90%;
   }
-  .q-carousel__title {
-    font-size: 1.5rem;
-  }
-  .q-carousel__subtitle {
-    font-size: 1rem;
-  }
-  .q-carousel__control {
-    width: 40px;
-    height: 40px;
-  }
   .q-carousel__control-icon svg {
-    width: 16px;
-    height: 16px;
-  }
-  .q-carousel__control--prev {
-    left: 0.5rem;
-  }
-  .q-carousel__control--next {
-    right: 0.5rem;
+    width: var(--q-icon-size-md);
+    height: var(--q-icon-size-md);
   }
 }
 .q-carousel:focus-visible {
-  outline: $outline;
+  outline: var(--q-focus-ring);
 }
 .q-carousel__control:focus-visible,
 .q-carousel__indicator:focus-visible {
-  outline: $outline;
+  outline: var(--q-focus-ring);
 }
 .q-checkbox {
   $this: &;
-  --box-size: #{$selection-control-size};
-  --icon-color: var(--q-theme-on-primary);
-  --icon-opacity: 0;
-  --transition-duration: 0.15s;
+  --q-box-size: var(--q-selection-control-size);
+  --q-icon-color: var(--q-theme-on-primary);
+  --q-icon-opacity: 0;
+  --q-transition-duration: 0.15s;
   display: flex;
-  align-items: flex-start;
-  gap: 0.5rem;
+  align-items: center;
+  gap: calc(0.5rem * var(--q-density-scale));
   width: fit-content;
-  border-radius: var(--border-radius);
+  box-sizing: border-box;
+  min-height: var(--q-interactive-height);
+  
+  padding-block: calc((var(--q-interactive-height) - var(--q-box-size)) / 2);
+  border-radius: var(--q-border-radius);
   color: var(--q-theme-neutral-dark);
   cursor: pointer;
   &--focus-style:focus-within {
-    outline: $outline;
+    outline: var(--q-focus-ring);
   }
   label {
     cursor: pointer;
@@ -1574,21 +1547,22 @@ $q-carousel-height-md: 300px;
     display: flex;
     align-items: center;
     justify-content: center;
-    width: var(--box-size);
-    height: var(--box-size);
-    font-size: calc(var(--box-size) * 0.75);
-    border: 1px solid $border;
-    border-radius: var(--border-radius);
+    box-sizing: border-box;
+    width: var(--q-box-size);
+    height: var(--q-box-size);
+    font-size: calc(var(--q-box-size) * 0.75);
+    border: var(--q-border-width) solid var(--q-border-color);
+    border-radius: var(--q-border-radius);
     padding: 0;
     transition:
-      background var(--transition-duration),
-      border-color var(--transition-duration),
-      box-shadow var(--transition-duration);
+      background var(--q-transition-duration),
+      border-color var(--q-transition-duration),
+      box-shadow var(--q-transition-duration);
     background-color: transparent;
     flex-shrink: 0;
     cursor: inherit;
     &:hover:not(:disabled) {
-      border-color: var(--active-color);
+      border-color: var(--q-active-color);
     }
     &:focus:not(:disabled) {
       outline: 0;
@@ -1597,16 +1571,16 @@ $q-carousel-height-md: 300px;
       outline: 0;
     }
     &-icon.q-icon {
-      color: var(--icon-color);
+      color: var(--q-icon-color);
       pointer-events: none;
       user-select: none;
-      transition: transform var(--transition-duration) ease;
-      opacity: var(--icon-opacity);
+      transition: transform var(--q-transition-duration) ease;
+      opacity: var(--q-icon-opacity);
     }
   }
   &:hover {
     .q-checkbox__input:not(:disabled) {
-      border-color: var(--active-color);
+      border-color: var(--q-active-color);
     }
   }
   &__native-input {
@@ -1618,21 +1592,17 @@ $q-carousel-height-md: 300px;
   }
   &__label.q-label {
     user-select: none;
-    line-height: var(--box-size);
+    font-size: var(--q-font-size-md);
+    
+    line-height: var(--q-box-size);
   }
   
-  &--small {
-    --box-size: 0.95rem;
-  }
-  &--large {
-    --box-size: 1.5rem;
-    padding: 0.625rem 0.375rem;
-  }
+  @include q-size-modifiers;
   
   @mixin color-variant($color) {
     &--#{$color} {
-      --active-color: var(--q-theme-#{$color});
-      --icon-color: var(--q-theme-on-#{$color});
+      --q-active-color: var(--q-theme-#{$color});
+      --q-icon-color: var(--q-theme-on-#{$color});
     }
   }
   @each $color in (primary, info, success, warning, danger) {
@@ -1641,10 +1611,10 @@ $q-carousel-height-md: 300px;
   
   &--checked,
   &--indeterminate {
-    --icon-opacity: 1;
+    --q-icon-opacity: 1;
     #{$this}__input {
-      background-color: var(--active-color);
-      border-color: var(--active-color);
+      background-color: var(--q-active-color);
+      border-color: var(--q-active-color);
     }
   }
   &--disabled {
@@ -1655,7 +1625,7 @@ $q-carousel-height-md: 300px;
     }
   }
   &--readonly {
-    --active-color: var(--q-theme-neutral-light);
+    --q-active-color: var(--q-theme-neutral-light);
     cursor: default;
     &:not(#{$this}--checked):not(#{$this}--indeterminate):not(#{$this}--borderless) {
       #{$this}__input {
@@ -1667,21 +1637,21 @@ $q-carousel-height-md: 300px;
     }
   }
   &--borderless {
-    --active-color: transparent;
+    --q-active-color: transparent;
     &:focus-within {
       outline: 0;
     }
     #{$this}__input {
-      background-color: var(--active-color);
-      border-color: var(--active-color);
+      background-color: var(--q-active-color);
+      border-color: var(--q-active-color);
       &-icon.q-icon {
-        --icon-color: var(--q-theme-neutral-dark);
+        --q-icon-color: var(--q-theme-neutral-dark);
       }
     }
     &:not(#{$this}--readonly) {
       #{$this}__input {
         &-icon.q-icon {
-          --icon-color: var(--q-theme-primary);
+          --q-icon-color: var(--q-theme-primary);
         }
       }
     }
@@ -1694,15 +1664,15 @@ $q-carousel-height-md: 300px;
   }
 }
 .q-collapsible {
-  $btn-padding: 0.2rem; 
-  $header-padding: 0.75rem - $btn-padding;
   $this: &;
+  --q-collapsible-btn-padding: calc(0.2rem * var(--q-density-scale));
+  --q-collapsible-header-padding: calc((0.75rem - 0.2rem) * var(--q-density-scale));
   display: flex;
   flex-direction: column;
   overflow-wrap: break-word;
   background-color: var(--q-theme-container);
   border-width: 1px;
-  border-radius: var(--border-radius);
+  border-radius: var(--q-border-radius);
   position: relative;
   max-width: 100%;
   min-height: 0;
@@ -1725,7 +1695,7 @@ $q-carousel-height-md: 300px;
     position: relative;
     width: 100%;
     margin: 0;
-    border-bottom: 1px solid $border;
+    border-bottom: var(--q-border-width) solid var(--q-border-color);
     overflow: hidden;
     gap: 0;
     justify-content: start;
@@ -1735,26 +1705,32 @@ $q-carousel-height-md: 300px;
   }
   &__btn.q-button {
     width: 100%;
+    height: auto;
+    min-height: unset;
     margin: 0;
+    --q-button-height: auto;
+    --q-button-font-size: var(--q-font-size-md);
     
-    padding: $header-padding;
+    padding: var(--q-collapsible-header-padding);
     .q-button__content {
       gap: 0;
-      padding: $btn-padding;
+      padding: var(--q-collapsible-btn-padding);
       display: flex;
       flex-direction: column;
       align-items: start;
-      letter-spacing: 0.02rem;
+      letter-spacing: calc(0.02rem * var(--q-density-scale));
       h4 {
         margin: 0;
-        text-transform: $headings-text-transform;
+        font-size: var(--q-font-size-md);
+        line-height: 1;
+        text-transform: var(--q-headings-text-transform);
       }
     }
   }
   &__title {
     display: flex;
     width: 100%;
-    gap: 0.2rem;
+    gap: calc(0.2rem * var(--q-density-scale));
     position: relative;
     text-align: start;
     align-items: center;
@@ -1764,19 +1740,19 @@ $q-carousel-height-md: 300px;
     }
   }
   &__subtitle {
-    margin-left: 1.25rem;
+    margin-left: calc(1.25rem * var(--q-density-scale));
     text-align: start;
-    line-height: 0.75rem;
-    font-size: 0.75rem;
+    line-height: var(--q-line-height-sm);
+    font-size: var(--q-font-size-sm);
     text-decoration: none;
     white-space: nowrap;
     color: var(--q-theme-neutral);
     padding: 0;
-    padding-top: 0.3rem;
+    padding-top: calc(0.3rem * var(--q-density-scale));
   }
   &__content {
-    padding: 1rem;
-    padding-top: 0.75rem;
+    padding: var(--q-space-4);
+    padding-top: calc(0.75rem * var(--q-density-scale));
     &-wrapper {
       display: grid;
       grid-template-rows: 0fr;
@@ -1800,7 +1776,7 @@ $q-carousel-height-md: 300px;
     background-color: transparent;
     border-radius: 0;
     border: 0;
-    border-bottom: 1px solid $border;
+    border-bottom: var(--q-border-width) solid var(--q-border-color);
     .q-collapsible__header {
       border: 0;
     }
@@ -1817,20 +1793,24 @@ $q-carousel-height-md: 300px;
   
   @mixin header-spacing($spacing, $increment) {
     &--#{$spacing} .q-collapsible__btn.q-button {
-      padding: calc(#{$header-padding} + #{$increment});
+      padding: calc(var(--q-collapsible-header-padding) + #{$increment});
     }
   }
-  @include header-spacing(loose, $space-base);
-  @include header-spacing(compact, -$space-base);
+  @include header-spacing(relaxed, var(--q-space-1));
+  @include header-spacing(tight, calc(-1 * var(--q-space-1)));
 }
 .q-color-picker__swatch {
-  width: 1.5em;
-  height: 1.5em;
-  border-radius: var(--border-radius);
+  --q-color-picker-swatch-padding: calc(var(--q-field-padding-y) * 2);
+  --q-color-picker-swatch-size: calc(
+    var(--q-interactive-height) - var(--q-color-picker-swatch-padding) - var(--q-border-width) * 2
+  );
+  width: var(--q-color-picker-swatch-size);
+  height: var(--q-color-picker-swatch-size);
+  border-radius: var(--q-border-radius);
   
-  border-width: 1px;
+  border-width: var(--q-border-width);
   &:focus-visible {
-    outline: $outline;
+    outline: var(--q-focus-ring);
   }
   &:not(:disabled) {
     cursor: pointer;
@@ -1849,33 +1829,25 @@ $q-carousel-height-md: 300px;
   }
 }
 .q-combobox__chevron.q-button {
-  padding: 0.1rem;
-  opacity: 0.5;
-  svg {
-    width: $icon-size-sm;
-    height: $icon-size-sm;
-  }
-  &:hover {
-    cursor: inherit;
-  }
+  @include q-field-affix-button;
 }
 .q-date-time-picker__menu {
   --q-date-view-height: 0;
-  width: 16rem;
+  width: calc(16rem * var(--q-density-scale));
   display: flex;
   flex-direction: column;
   background-color: var(--q-theme-container);
   color: var(--q-theme-on-background);
-  border-radius: $border-radius;
-  gap: $space-base;
-  padding: 0.5rem;
+  border-radius: var(--q-border-radius);
+  gap: var(--q-space-1);
+  padding: var(--q-space-2);
 }
 .q-date-time-picker__bottom-bar,
 .q-date-time-picker__year,
 .q-date-time-picker__year-change {
   display: flex;
   justify-content: space-between;
-  gap: $space-base;
+  gap: var(--q-space-1);
   .q-button {
     flex: 1;
   }
@@ -1883,12 +1855,27 @@ $q-carousel-height-md: 300px;
 .q-date-time-picker__month-grid,
 .q-date-time-picker__year-grid {
   height: auto;
+  gap: var(--q-space-1);
+  .q-button {
+    width: 100%;
+  }
+}
+.q-date-time-picker__month-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  min-height: var(--q-date-view-height);
+  .q-button {
+    height: 100%;
+    min-height: var(--q-interactive-height);
+  }
+}
+.q-date-time-picker__year-grid {
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
-  gap: $space-base;
   .q-button {
-    flex: 0 0 calc((100% - 2 * $space-base) / 3);
+    flex: 0 0 calc((100% - 2 * var(--q-space-1)) / 3);
   }
 }
 .q-date-time-picker__month-grid,
@@ -1903,13 +1890,13 @@ $q-carousel-height-md: 300px;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: calc($space-base * 2);
+  padding: var(--q-space-2);
 }
 .q-date-time-picker__year-grid {
   overflow: auto;
   
-  margin: 0 -3px;
-  padding: 3px;
+  margin: 0 calc(-3px * var(--q-density-scale));
+  padding: calc(3px * var(--q-density-scale));
 }
 .q-date-time-picker__calendar {
   display: flex;
@@ -1919,10 +1906,10 @@ $q-carousel-height-md: 300px;
     display: flex;
     justify-content: space-between;
     align-items: stretch;
-    gap: $space-base;
+    gap: var(--q-space-1);
     .q-button {
       font-weight: 600;
-      padding: 0.5rem 0.6rem;
+      padding: var(--q-control-padding-y-lg) calc(var(--q-space-1) * 2.5);
       &--labeled {
         flex: 1;
       }
@@ -1934,16 +1921,16 @@ $q-carousel-height-md: 300px;
     .q-date-time-picker__weekday {
       flex: 1;
       text-align: center;
-      font-size: 0.75rem;
+      font-size: var(--q-font-size-sm);
       font-weight: 600;
       opacity: 0.7;
-      padding: 0.5rem 0;
+      padding: var(--q-space-2) 0;
     }
   }
   .q-date-time-picker__days {
     display: flex;
     flex-wrap: wrap;
-    gap: $space-base 0;
+    gap: var(--q-space-1) 0;
     .q-date-time-picker__day {
       flex: 0 0 calc(100% / 7);
       aspect-ratio: 1;
@@ -1967,12 +1954,12 @@ $q-carousel-height-md: 300px;
         border-radius: 0;
       }
       &.q-date-time-picker__day--range-start {
-        border-top-left-radius: $border-radius;
-        border-bottom-left-radius: $border-radius;
+        border-top-left-radius: var(--q-border-radius);
+        border-bottom-left-radius: var(--q-border-radius);
       }
       &.q-date-time-picker__day--range-end {
-        border-top-right-radius: $border-radius;
-        border-bottom-right-radius: $border-radius;
+        border-top-right-radius: var(--q-border-radius);
+        border-bottom-right-radius: var(--q-border-radius);
       }
     }
   }
@@ -1982,7 +1969,7 @@ $q-carousel-height-md: 300px;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
-  gap: $space-base;
+  gap: var(--q-space-1);
   .q-date-time-picker__time-group,
   .q-date-time-picker__time-period {
     display: flex;
@@ -1993,41 +1980,41 @@ $q-carousel-height-md: 300px;
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 0.5rem;
+    gap: var(--q-space-2);
     .q-date-time-picker__time-separator {
       display: flex;
       flex-direction: column;
-      font-size: 1.5rem;
+      font-size: calc(var(--q-font-size-lg) * 1.5);
       font-weight: 600;
-      margin-bottom: 0.2rem;
+      margin-bottom: calc(var(--q-space-1) * 0.5);
     }
     .q-date-time-picker__time-input-group {
       display: flex;
       flex-direction: column;
       align-items: center;
-      border: $border;
-      border-radius: $border-radius;
+      border: var(--q-border-width) solid var(--q-border-color);
+      border-radius: var(--q-border-radius);
       .q-button {
         width: 100%;
         border-radius: 0;
         &:first-child {
-          border-top-left-radius: $border-radius;
-          border-top-right-radius: $border-radius;
+          border-top-left-radius: var(--q-border-radius);
+          border-top-right-radius: var(--q-border-radius);
         }
         &:last-child {
-          border-bottom-left-radius: $border-radius;
-          border-bottom-right-radius: $border-radius;
+          border-bottom-left-radius: var(--q-border-radius);
+          border-bottom-right-radius: var(--q-border-radius);
         }
       }
       .q-date-time-picker__time-number {
-        width: 3rem;
+        width: calc(3rem * var(--q-density-scale));
         border-radius: 0;
         .q-field__control {
           border: none;
         }
         .q-text-field__input {
           text-align: center;
-          font-size: 120%;
+          font-size: var(--q-font-size-lg);
           line-height: normal;
         }
       }
@@ -2035,65 +2022,96 @@ $q-carousel-height-md: 300px;
   }
 }
 .q-dialog {
+  $this: &;
+  --q-dialog-section-border: var(--q-border-width) solid var(--q-border-color);
   display: flex;
   flex-direction: column;
   width: 100%;
-  max-height: calc(100vh - 2rem);
+  max-height: calc(100vh - 2 * var(--q-space-4));
   &__header {
-    padding: 1rem;
-    padding-bottom: 0;
+    padding: var(--q-space-4);
     &-title {
       display: flex;
-      font-weight: $font-weight-bold;
-      font-size: 1rem;
+      font-weight: var(--q-font-weight-bold);
+      font-size: var(--q-font-size-lg);
     }
   }
   &__body {
-    padding: 1rem 0;
+    padding: var(--q-space-4);
     overflow: auto;
     &-icon {
       display: flex;
       justify-content: center;
-      padding: $space-base 1rem;
+      padding: var(--q-space-1) 0;
       svg {
-        height: 5em;
-        width: 5em;
+        
+        height: calc(5 * var(--q-font-size-lg));
+        width: calc(5 * var(--q-font-size-lg));
       }
     }
     &-text {
       display: flex;
       justify-content: center;
       text-align: center;
-      padding: $space-base 1rem;
+      padding: var(--q-space-1) 0;
     }
   }
   &__footer {
-    padding: 1rem;
-    padding-top: 0;
+    padding: var(--q-space-4);
     &-buttons {
       display: flex;
       width: 100%;
       justify-content: center;
       flex-wrap: wrap;
-      gap: 0.5rem;
+      gap: var(--q-space-2);
     }
   }
+  
+  &__header + &__body,
+  &__header + &__footer,
+  &__body + &__footer {
+    border-top: var(--q-dialog-section-border);
+  }
   &__close.q-button {
     position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
+    top: var(--q-space-2);
+    right: var(--q-space-2);
   }
   &__underlay {
     background-color: rgb(var(--q-theme-on-background-rgb) / 30%);
   }
   &__input {
-    padding: 0.25rem 1rem;
+    padding: var(--q-space-1) 0;
+  }
+  
+  &--flush {
+    #{$this}__header {
+      padding-bottom: 0;
+    }
+    #{$this}__body {
+      padding: var(--q-space-4) 0;
+      #{$this}__body-icon,
+      #{$this}__body-text {
+        padding: var(--q-space-1) var(--q-space-4);
+      }
+    }
+    #{$this}__footer {
+      padding-top: 0;
+    }
+    #{$this}__header + #{$this}__body,
+    #{$this}__header + #{$this}__footer,
+    #{$this}__body + #{$this}__footer {
+      border-top: 0;
+    }
+    #{$this}__input {
+      padding: var(--q-space-1) var(--q-space-4);
+    }
   }
   .q-field--invalid {
     .q-field__extras {
       display: flex;
       align-items: center;
-      gap: 0.25rem;
+      gap: var(--q-space-1);
       color: var(--q-theme-danger);
       svg {
         fill: var(--q-theme-danger);
@@ -2109,12 +2127,12 @@ $q-carousel-height-md: 300px;
   justify-content: center;
   position: relative;
   color: var(--q-divider-color);
-  font-size: 0.875rem;
+  font-size: var(--q-font-size-md);
   
   &--horizontal {
     width: 100%;
     flex-direction: row;
-    margin: 8px 0;
+    margin: var(--q-space-2) 0;
   }
   &--horizontal:not(.q-divider--labeled)::before {
     content: '';
@@ -2129,13 +2147,13 @@ $q-carousel-height-md: 300px;
     border-color: var(--q-divider-color);
   }
   &--horizontal.q-divider--labeled .q-divider__label {
-    padding: 0 12px;
+    padding: 0 var(--q-space-3);
     white-space: nowrap;
   }
   
   &--horizontal.q-divider--inset {
-    max-width: calc(100% - 72px);
-    margin-inline-start: 72px;
+    max-width: calc(100% - (72px * var(--q-density-scale)));
+    margin-inline-start: calc(72px * var(--q-density-scale));
   }
   
   &--vertical {
@@ -2144,7 +2162,7 @@ $q-carousel-height-md: 300px;
     align-items: center;
     height: 100%;
     min-height: 100%; 
-    margin: 0 8px;
+    margin: 0 var(--q-space-2);
   }
   &--vertical:not(.q-divider--labeled)::before {
     content: '';
@@ -2161,21 +2179,21 @@ $q-carousel-height-md: 300px;
   &--vertical.q-divider--labeled .q-divider__label {
     writing-mode: vertical-rl;
     text-orientation: mixed;
-    padding: 12px 0;
+    padding: var(--q-space-3) 0;
     white-space: nowrap;
   }
   
   &--vertical.q-divider--inset {
-    margin-bottom: 8px;
-    margin-top: 8px;
-    max-height: calc(100% - 16px);
+    margin-bottom: var(--q-space-2);
+    margin-top: var(--q-space-2);
+    max-height: calc(100% - (16px * var(--q-density-scale)));
   }
 }
 .q-dropdown-menu {
   &__body {
-    min-width: 8rem;
+    min-width: calc(8rem * var(--q-density-scale));
     .q-list-item-group {
-      padding: $space-base;
+      padding: var(--q-space-1);
       & + .q-list-item-group {
         margin-top: 0;
       }
@@ -2185,35 +2203,43 @@ $q-carousel-height-md: 300px;
     margin-left: auto;
     display: flex;
     color: var(--q-theme-neutral);
-    font-size: 0.75rem;
+    font-size: var(--q-font-size-sm);
   }
 }
 .q-field {
   $this: &;
+  --q-field-font-size: var(--q-font-size-md);
+  --q-field-line-height: 1.5;
   display: flex;
   flex-direction: column;
-  border-radius: var(--border-radius);
+  border-radius: var(--q-border-radius);
   width: fit-content;
   max-width: 100%;
+  &__label {
+    font-size: var(--q-field-font-size);
+  }
   &__control {
     display: flex;
     align-items: center;
-    height: inherit;
+    box-sizing: border-box;
+    height: var(--q-interactive-height);
+    min-height: var(--q-interactive-height);
     width: 100%;
     border-radius: inherit;
     border-width: 1px;
     background-color: transparent;
-    padding: $input-padding-y $input-padding-x;
-    line-height: 1.5;
-    transition: color var(--transition-duration) var(--transition-timing-function);
+    padding: var(--q-field-padding-y) var(--q-field-padding-x);
+    font-size: var(--q-field-font-size);
+    line-height: var(--q-field-line-height);
+    transition: color var(--q-transition-duration) var(--q-transition-timing-function);
   }
   &__extras {
     display: flex;
-    gap: $space-base;
+    gap: var(--q-space-1);
     align-items: center;
     color: var(--q-theme-neutral);
-    margin-top: $space-base;
-    font-size: calc(0.9 * $font-size-base);
+    margin-top: var(--q-space-1);
+    font-size: var(--q-font-size-sm);
     .q-icon {
       color: currentcolor;
     }
@@ -2224,13 +2250,13 @@ $q-carousel-height-md: 300px;
     align-items: center;
   }
   &__prepend {
-    padding-right: 0.25rem;
-    padding-left: 0.05rem;
+    padding-right: var(--q-space-1);
+    padding-left: calc(2px * var(--q-density-scale));
   }
   &__append {
     margin-left: auto;
-    padding-left: 0.25rem;
-    padding-right: 0.05rem;
+    padding-left: var(--q-space-1);
+    padding-right: calc(2px * var(--q-density-scale));
   }
   
   &--readonly {
@@ -2255,16 +2281,16 @@ $q-carousel-height-md: 300px;
   }
   &--label-left {
     flex-direction: row;
-    gap: $space-base;
+    gap: var(--q-space-1);
   }
   &--label-right {
     flex-direction: row-reverse;
-    gap: $space-base;
+    gap: var(--q-space-1);
   }
   &:not(#{$this}--disabled) {
     #{$this}__control {
       &:focus-within {
-        outline: $outline;
+        outline: var(--q-focus-ring);
       }
     }
   }
@@ -2272,7 +2298,7 @@ $q-carousel-height-md: 300px;
   @mixin field-size($size, $multiplier: 1) {
     &--#{$size} {
       > #{$this}__control {
-        width: calc(#{$multiplier} * 5em + #{$multiplier - 1} * $space-base);
+        width: calc(#{$multiplier} * 5em + #{$multiplier - 1} * var(--q-space-1));
         max-width: 100%;
       }
     }
@@ -2289,8 +2315,13 @@ $q-carousel-height-md: 300px;
 }
 .q-file-input {
   $this: &;
-  --q-file-input-preview-side: 3rem;
-  --q-file-input-preview-padding: 0.75rem;
+  --q-file-input-preview-side: calc(3rem * var(--q-density-scale));
+  --q-file-input-preview-padding: var(--q-space-3);
+  
+  &.q-field__control {
+    height: auto;
+    min-height: auto;
+  }
   justify-content: center;
   flex-direction: column;
   border-width: 2px; 
@@ -2301,14 +2332,14 @@ $q-carousel-height-md: 300px;
     background-color 0.2s ease;
   &__drop-area {
     display: flex;
-    gap: 0.5rem;
+    gap: var(--q-space-2);
     align-items: center;
     color: var(--q-theme-neutral);
     min-height: var(--q-file-input-preview-side);
   }
   &__file-details {
     display: flex;
-    gap: 0.5rem;
+    gap: var(--q-space-2);
     align-items: center;
     width: 100%;
   }
@@ -2329,7 +2360,7 @@ $q-carousel-height-md: 300px;
     flex-shrink: 0;
   }
   &__image-preview {
-    border-radius: var(--border-radius);
+    border-radius: var(--q-border-radius);
     overflow: hidden;
     img {
       width: 100%;
@@ -2342,7 +2373,7 @@ $q-carousel-height-md: 300px;
     flex-direction: column;
     justify-content: center;
     line-height: 1;
-    gap: $space-base;
+    gap: var(--q-space-1);
   }
   &__file-name {
     overflow-wrap: break-word;
@@ -2356,12 +2387,12 @@ $q-carousel-height-md: 300px;
   }
   &__action-buttons {
     display: flex;
-    gap: 0.5rem;
+    gap: var(--q-space-2);
   }
   &__empty-container {
     display: flex;
     align-items: center;
-    gap: 0.25rem;
+    gap: var(--q-space-1);
     color: var(--q-theme-neutral);
     min-height: var(--q-file-input-preview-side);
   }
@@ -2391,30 +2422,30 @@ $q-carousel-height-md: 300px;
 .q-gauge {
   display: flex;
   width: 100%;
-  min-width: min(14rem, 100%);
+  min-width: min(calc(14rem * var(--q-density-scale)), 100%);
   flex-direction: column;
   align-items: center;
-  padding: 1rem 1rem 1.125rem;
-  border: 1px solid $border;
-  border-radius: $border-radius;
+  padding: var(--q-space-4) var(--q-space-4) calc(1.125rem * var(--q-density-scale));
+  border: var(--q-border-width) solid var(--q-border-color);
+  border-radius: var(--q-border-radius);
   background-color: var(--q-theme-container);
-  box-shadow: $shadow-sm;
+  box-shadow: var(--q-shadow-sm);
   color: var(--q-theme-on-background);
   &__label {
     width: 100%;
     overflow: hidden;
     color: var(--q-theme-neutral-dark);
-    font-size: 1rem;
-    font-weight: $font-weight-bold;
-    line-height: 1.25;
+    font-size: var(--q-font-size-lg);
+    font-weight: var(--q-font-weight-bold);
+    line-height: var(--q-line-height-md);
     text-align: center;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   &__visual {
     width: 100%;
-    max-width: 18rem;
-    margin-top: 0.25rem;
+    max-width: calc(18rem * var(--q-density-scale));
+    margin-top: var(--q-space-1);
   }
   &__svg {
     display: block;
@@ -2447,8 +2478,8 @@ $q-carousel-height-md: 300px;
     }
     text {
       fill: rgb(var(--q-theme-neutral-dark-rgb) / 78%);
-      font-size: 0.75rem;
-      font-weight: $font-weight-bold;
+      font-size: var(--q-font-size-sm);
+      font-weight: var(--q-font-weight-bold);
       text-anchor: middle;
       dominant-baseline: middle;
     }
@@ -2477,8 +2508,8 @@ $q-carousel-height-md: 300px;
   }
   &__target-value {
     fill: var(--q-theme-neutral-dark);
-    font-size: 0.6875rem;
-    font-weight: $font-weight-bold;
+    font-size: var(--q-font-size-sm);
+    font-weight: var(--q-font-weight-bold);
     paint-order: stroke;
     stroke: var(--q-theme-container);
     stroke-linejoin: round;
@@ -2502,7 +2533,10 @@ $q-carousel-height-md: 300px;
   }
   &__hub {
     fill: var(--q-theme-container);
-    filter: drop-shadow(0 0.4rem 0.45rem rgb(var(--q-theme-neutral-dark-rgb) / 28%));
+    filter: drop-shadow(
+      0 calc(0.4rem * var(--q-density-scale)) calc(0.45rem * var(--q-density-scale))
+        rgb(var(--q-theme-neutral-dark-rgb) / 28%)
+    );
     stroke: rgb(var(--q-theme-neutral-light-rgb) / 65%);
     stroke-width: 1;
   }
@@ -2511,27 +2545,27 @@ $q-carousel-height-md: 300px;
   }
   &__value-row {
     display: flex;
-    min-height: 1.75rem;
+    min-height: calc(1.75rem * var(--q-density-scale));
     align-items: baseline;
     justify-content: center;
-    gap: 0.25rem;
-    margin-top: -0.25rem;
+    gap: var(--q-space-1);
+    margin-top: calc(-0.25rem * var(--q-density-scale));
   }
   &__value {
     color: var(--q-theme-neutral-dark);
-    font-size: 1.5rem;
-    font-weight: $font-weight-bold;
+    font-size: calc(var(--q-font-size-lg) * 1.5);
+    font-weight: var(--q-font-weight-bold);
     line-height: 1;
   }
   &__unit {
     color: var(--q-theme-neutral);
-    font-size: 0.75rem;
+    font-size: var(--q-font-size-sm);
   }
   &__secondary {
     color: var(--q-theme-neutral);
-    font-size: 0.75rem;
-    min-height: 1.125rem;
-    margin-top: 0.25rem;
+    font-size: var(--q-font-size-sm);
+    min-height: calc(1.125rem * var(--q-density-scale));
+    margin-top: var(--q-space-1);
     text-align: center;
   }
   &__legend {
@@ -2539,8 +2573,8 @@ $q-carousel-height-md: 300px;
     width: 100%;
     flex-wrap: wrap;
     justify-content: center;
-    gap: 0.375rem 0.75rem;
-    margin: 0.75rem 0 0;
+    gap: calc(0.375rem * var(--q-density-scale)) calc(0.75rem * var(--q-density-scale));
+    margin: calc(0.75rem * var(--q-density-scale)) 0 0;
     padding: 0;
     list-style: none;
   }
@@ -2548,27 +2582,27 @@ $q-carousel-height-md: 300px;
     display: inline-flex;
     min-width: 0;
     align-items: center;
-    gap: 0.3125rem;
+    gap: calc(0.3125rem * var(--q-density-scale));
     color: var(--q-theme-neutral);
-    font-size: 0.75rem;
+    font-size: var(--q-font-size-sm);
     line-height: 1.2;
   }
   &__legend-item--active {
     color: var(--q-theme-neutral-dark);
-    font-weight: $font-weight-bold;
+    font-weight: var(--q-font-weight-bold);
   }
   &__legend-swatch {
-    width: 0.75rem;
-    height: 0.75rem;
-    flex: 0 0 0.75rem;
-    border: 1px solid rgb(var(--q-theme-neutral-dark-rgb) / 12%);
-    border-radius: 0.125rem;
+    width: calc(0.75rem * var(--q-density-scale));
+    height: calc(0.75rem * var(--q-density-scale));
+    flex: 0 0 calc(0.75rem * var(--q-density-scale));
+    border: var(--q-border-width) solid rgb(var(--q-theme-neutral-dark-rgb) / 12%);
+    border-radius: calc(0.125rem * var(--q-density-scale));
   }
   &__legend-target {
-    width: 1rem;
+    width: calc(1rem * var(--q-density-scale));
     height: 0;
-    flex: 0 0 1rem;
-    border-top: 0.1875rem solid var(--q-theme-success);
+    flex: 0 0 calc(1rem * var(--q-density-scale));
+    border-top: calc(0.1875rem * var(--q-density-scale)) solid var(--q-theme-success);
     border-radius: 999px;
   }
   &__legend-target--missed {
@@ -2588,8 +2622,8 @@ $q-carousel-height-md: 300px;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
-  padding-left: 16px;
-  padding-right: 16px;
+  padding-left: calc(16px * var(--q-density-scale));
+  padding-right: calc(16px * var(--q-density-scale));
 }
 .q-container--fluid {
   max-width: 100%;
@@ -2620,7 +2654,7 @@ $q-carousel-height-md: 300px;
   }
 }
 .q-row {
-  --q-row-gutter: #{$space-base * 2};
+  --q-row-gutter: var(--q-space-2);
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
@@ -2705,11 +2739,11 @@ $q-carousel-height-md: 300px;
 }
 $q-spacers: (
   0: 0,
-  1: $space-base * 0.25,
-  2: $space-base * 0.5,
-  3: $space-base,
-  4: $space-base * 1.5,
-  5: $space-base * 3
+  1: calc(var(--q-space-1) * 0.25),
+  2: calc(var(--q-space-1) * 0.5),
+  3: var(--q-space-1),
+  4: calc(var(--q-space-1) * 1.5),
+  5: var(--q-space-3)
 ) !default;
 $q-breakpoints: (
   sm: $breakpoint-sm,
@@ -2815,30 +2849,30 @@ $q-spacing-sides: (
   }
   &__svg,
   &__img {
-    width: $icon-size;
-    height: $icon-size;
+    width: var(--q-icon-size-md);
+    height: var(--q-icon-size-md);
   }
 }
 $input-group-addon-color: var(--q-theme-primary);
 $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
 .q-input-group {
   &__prepend > :first-child {
-    border-top-left-radius: var(--border-radius);
-    border-bottom-left-radius: var(--border-radius);
+    border-top-left-radius: var(--q-border-radius);
+    border-bottom-left-radius: var(--q-border-radius);
   }
   &__append > :last-child {
-    border-top-right-radius: var(--border-radius);
-    border-bottom-right-radius: var(--border-radius);
+    border-top-right-radius: var(--q-border-radius);
+    border-bottom-right-radius: var(--q-border-radius);
   }
   
   > .q-field__control > .q-input-group__append:first-child > :first-child {
-    border-top-left-radius: var(--border-radius);
-    border-bottom-left-radius: var(--border-radius);
+    border-top-left-radius: var(--q-border-radius);
+    border-bottom-left-radius: var(--q-border-radius);
   }
   
   > .q-field__control > .q-input-group__prepend:last-child > :last-child {
-    border-top-right-radius: var(--border-radius);
-    border-bottom-right-radius: var(--border-radius);
+    border-top-right-radius: var(--q-border-radius);
+    border-bottom-right-radius: var(--q-border-radius);
   }
   &__prepend,
   &__append {
@@ -2847,7 +2881,7 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
     height: inherit;
     > * {
       border-radius: 0;
-      min-width: 40px;
+      min-width: calc(40px * var(--q-density-scale));
       height: 100%;
       justify-content: center;
     }
@@ -2856,12 +2890,12 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
       align-items: center;
       text-align: center;
       line-height: 1.5;
-      font-size: $font-size-base;
+      font-size: var(--q-font-size-md);
       border-width: 1px;
       background-color: $input-group-addon-background;
       color: $input-group-addon-color;
       white-space: nowrap;
-      padding: 0 0.4rem;
+      padding: 0 calc(0.4rem * var(--q-density-scale));
     }
     > * + * {
       margin-left: -1px;
@@ -2893,20 +2927,21 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
       height: auto;
     }
     > :first-child {
-      border-top-left-radius: var(--border-radius);
-      border-bottom-left-radius: var(--border-radius);
+      border-top-left-radius: var(--q-border-radius);
+      border-bottom-left-radius: var(--q-border-radius);
     }
     > :last-child {
-      border-top-right-radius: var(--border-radius);
-      border-bottom-right-radius: var(--border-radius);
+      border-top-right-radius: var(--q-border-radius);
+      border-bottom-right-radius: var(--q-border-radius);
     }
   }
 }
 .q-label {
   display: flex;
-  gap: $space-base;
+  gap: var(--q-space-1);
   align-items: center;
   color: var(--q-theme-neutral-dark);
+  font-size: var(--q-font-size-md);
   line-height: 1.5;
   .q-icon {
     color: currentcolor;
@@ -2921,7 +2956,7 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
 $q-line-loader-height: var(--q-line-loader-height);
 $q-line-loader-color: var(--q-line-loader-color);
 .q-line-loader {
-  --q-line-loader-height: 4px;
+  --q-line-loader-height: calc(4px * var(--q-density-scale));
   --q-line-loader-color: var(--q-theme-primary-rgb);
   width: 100%;
   height: $q-line-loader-height;
@@ -2953,7 +2988,7 @@ $q-line-loader-color: var(--q-line-loader-color);
   padding: 0;
   -webkit-overflow-scrolling: touch;
   width: 100%;
-  border-radius: var(--border-radius);
+  border-radius: var(--q-border-radius);
 }
 .q-list-item-group {
   display: flex;
@@ -2966,32 +3001,34 @@ $q-line-loader-color: var(--q-line-loader-color);
   width: inherit;
   &__title {
     color: var(--q-theme-neutral);
-    padding: 5px 6px;
-    line-height: 15px;
+    padding: var(--q-control-padding-y-sm) var(--q-control-padding-x-sm);
+    font-size: var(--q-font-size-sm);
+    line-height: var(--q-line-height-sm);
     width: inherit;
   }
   & + & {
-    padding-top: $space-base;
-    margin-top: $space-base;
+    padding-top: var(--q-space-1);
+    margin-top: var(--q-space-1);
     border-top-width: 1px;
   }
 }
 .q-list-item {
   $this: &;
   
-  $control-height: $selection-control-size;
+  $control-height: var(--q-selection-control-size);
   display: flex;
-  gap: 0.25rem;
+  gap: var(--q-space-1);
   align-items: center;
-  padding: $space-base * 1.5 $space-base * 2;
+  padding: calc(var(--q-space-1) * 1.5) var(--q-space-2);
   
-  min-height: calc(#{$control-height} + #{$space-base * 3});
+  min-height: calc(var(--q-selection-control-size) + var(--q-space-3));
   list-style: none;
-  line-height: 15px;
+  font-size: var(--q-font-size-md);
+  line-height: var(--q-line-height-md);
   overflow-wrap: break-word;
   -webkit-touch-callout: none;
   width: inherit;
-  border-radius: var(--border-radius);
+  border-radius: var(--q-border-radius);
   outline: none;
   cursor: default;
   &--selectable {
@@ -3022,12 +3059,12 @@ $q-line-loader-color: var(--q-line-loader-color);
     display: flex;
     flex-flow: column wrap;
     flex-grow: 1;
-    gap: $space-base;
+    gap: var(--q-space-1);
   }
   &__content {
     display: flex;
     flex-grow: 1;
-    gap: $space-base * 2;
+    gap: var(--q-space-2);
     cursor: inherit;
     user-select: none;
   }
@@ -3043,13 +3080,18 @@ $q-line-loader-color: var(--q-line-loader-color);
     }
     
     .q-list-item__check {
-      width: $icon-size-sm;
-      height: $icon-size-sm;
+      width: var(--q-icon-size-sm);
+      height: var(--q-icon-size-sm);
+    }
+    .q-checkbox {
+      min-height: auto;
+      outline: 0;
+      padding: 0;
     }
   }
   &__description {
     display: flex;
-    gap: $space-base;
+    gap: var(--q-space-1);
     align-items: flex-start;
     color: var(--q-theme-neutral);
     font-size: 0.75em;
@@ -3067,7 +3109,7 @@ $q-line-loader-color: var(--q-line-loader-color);
 .q-meter {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: var(--q-space-1);
   &__labels {
     display: flex;
     justify-content: space-between;
@@ -3078,9 +3120,9 @@ $q-line-loader-color: var(--q-line-loader-color);
   &__track {
     position: relative;
     width: 100%;
-    height: 0.5rem;
+    height: calc(0.5rem * var(--q-density-scale));
     overflow: hidden;
-    border-radius: $border-radius;
+    border-radius: var(--q-border-radius);
     background-color: rgb(var(--q-theme-neutral-light-rgb) / 50%);
   }
   &__fill {
@@ -3094,13 +3136,13 @@ $q-line-loader-color: var(--q-line-loader-color);
   &__value {
     display: flex;
     align-items: center;
-    gap: $space-base;
+    gap: var(--q-space-1);
     font-size: inherit;
   }
   &__mask {
     display: inline-flex;
     align-items: center;
-    gap: $space-base;
+    gap: var(--q-space-1);
     width: 100%;
     color: var(--q-theme-neutral);
     user-select: none;
@@ -3133,28 +3175,39 @@ $q-line-loader-color: var(--q-line-loader-color);
   &__content {
     display: flex;
     align-items: flex-start;
-    gap: $space-base;
+    gap: var(--q-space-1);
     min-width: 0;
   }
+  
+  
   & &__label-action.q-button {
-    padding: 0;
+    --q-button-height: 1lh;
+    height: 1lh;
+    min-height: 0;
     min-width: auto;
-    min-height: auto;
+    padding: 0;
+    border-width: 0;
+    line-height: inherit;
+    vertical-align: middle;
     &:focus-visible {
+      
       outline-offset: 2px;
     }
     &.q-button--text {
       color: var(--q-theme-primary);
     }
+    .q-obfuscation__icon.q-icon {
+      width: 1em;
+      height: 1em;
+    }
   }
   &__icon.q-icon {
     flex-shrink: 0;
   }
 }
 $q-overflow-fade-size: 2.5rem;
-$q-overflow-control-size: 2.25rem;
 .q-overflow {
-  --q-overflow-fade-size: #{$q-overflow-fade-size};
+  --q-overflow-fade-size: calc(#{$q-overflow-fade-size} * var(--q-density-scale));
   display: flex;
   align-items: stretch;
   min-width: 0;
@@ -3163,10 +3216,10 @@ $q-overflow-control-size: 2.25rem;
   outline: none;
 }
 .q-overflow__viewport:focus-visible {
-  outline: $outline;
+  outline: var(--q-focus-ring);
 }
 .q-overflow__control .q-overflow__button:focus-visible {
-  outline: $outline;
+  outline: var(--q-focus-ring);
 }
 .q-overflow__viewport {
   position: relative;
@@ -3191,8 +3244,8 @@ $q-overflow-control-size: 2.25rem;
   justify-content: center;
 }
 .q-overflow__button {
-  min-width: $q-overflow-control-size;
-  min-height: $q-overflow-control-size;
+  min-width: var(--q-interactive-height);
+  min-height: var(--q-interactive-height);
 }
 .q-overflow--horizontal {
   flex-direction: row;
@@ -3365,23 +3418,25 @@ $q-overflow-control-size: 2.25rem;
     }
   }
 }
-$overlay-border-width: 1px;
-$overlay-arrow-width: 11.31px;
-$overlay-arrow-height: 11.31px;
-$arrow-tip-radius: 0.1rem;
 .q-overlay {
   $this: &;
+  
   --q-overlay-bg: var(--q-theme-container);
   --q-overlay-color: var(--q-theme-on-background);
   --q-overlay-border-color: var(--q-theme-neutral-light);
+  --q-overlay-arrow-gap: calc(8px * var(--q-density-scale));
+  --q-overlay-arrow-size: calc(var(--q-overlay-arrow-gap) * 1.4142);
+  --q-overlay-arrow-tip-radius: calc(0.1rem * var(--q-density-scale));
+  --q-overlay-viewport-inset-x: calc(1rem * var(--q-density-scale));
+  --q-overlay-viewport-inset-y: calc(2rem * var(--q-density-scale));
   position: fixed;
-  z-index: $overlay-z-index;
-  max-width: calc(100vw - 1rem);
-  max-height: calc(100vh - 2rem);
+  z-index: var(--q-overlay-z-index);
+  max-width: calc(100vw - var(--q-overlay-viewport-inset-x));
+  max-height: calc(100vh - var(--q-overlay-viewport-inset-y));
   &__underlay {
     position: fixed;
     inset: 0;
-    z-index: $overlay-z-index;
+    z-index: var(--q-overlay-z-index);
     &--blur {
       backdrop-filter: blur(2px);
     }
@@ -3392,61 +3447,57 @@ $arrow-tip-radius: 0.1rem;
     width: 100%;
     background-color: var(--q-overlay-bg);
     color: var(--q-overlay-color);
-    border: $overlay-border-width solid var(--q-overlay-border-color);
-    border-radius: var(--border-radius);
+    border: var(--q-border-width) solid var(--q-overlay-border-color);
+    border-radius: var(--q-border-radius);
     outline: none;
-    box-shadow:
-      0 0 #0000,
-      0 0 #0000,
-      0 4px 6px -1px rgb(0 0 0 / 10%),
-      0 2px 4px -2px rgb(0 0 0 / 10%);
+    box-shadow: var(--q-shadow-md);
   }
   &__arrow {
     position: absolute;
     display: block;
-    width: $overlay-arrow-width;
-    height: $overlay-arrow-height;
-    transition: opacity 0.2s ease 0s;
+    width: var(--q-overlay-arrow-size);
+    height: var(--q-overlay-arrow-size);
+    transition: opacity var(--q-transition-duration) var(--q-transition-timing-function);
     transform: rotate(45deg);
     background-color: inherit;
     border: 0 solid var(--q-overlay-border-color);
   }
   &--top {
     #{$this}__arrow {
-      bottom: - calc($overlay-arrow-height / 2) - $overlay-border-width;
-      border-bottom-right-radius: $arrow-tip-radius;
-      border-right-width: $overlay-border-width;
-      border-bottom-width: $overlay-border-width;
+      bottom: calc((var(--q-overlay-arrow-size) / -2) - var(--q-border-width));
+      border-bottom-right-radius: var(--q-overlay-arrow-tip-radius);
+      border-right-width: var(--q-border-width);
+      border-bottom-width: var(--q-border-width);
     }
   }
   &--bottom {
     #{$this}__arrow {
-      top: - calc($overlay-arrow-height / 2) - $overlay-border-width;
-      border-top-left-radius: $arrow-tip-radius;
-      border-left-width: $overlay-border-width;
-      border-top-width: $overlay-border-width;
+      top: calc((var(--q-overlay-arrow-size) / -2) - var(--q-border-width));
+      border-top-left-radius: var(--q-overlay-arrow-tip-radius);
+      border-left-width: var(--q-border-width);
+      border-top-width: var(--q-border-width);
     }
   }
   &--left {
     #{$this}__arrow {
-      right: - calc($overlay-arrow-width / 2) - $overlay-border-width;
-      border-top-right-radius: $arrow-tip-radius;
-      border-right-width: $overlay-border-width;
-      border-top-width: $overlay-border-width;
+      right: calc((var(--q-overlay-arrow-size) / -2) - var(--q-border-width));
+      border-top-right-radius: var(--q-overlay-arrow-tip-radius);
+      border-right-width: var(--q-border-width);
+      border-top-width: var(--q-border-width);
     }
   }
   &--right {
     #{$this}__arrow {
-      left: - calc($overlay-arrow-width / 2) - $overlay-border-width;
-      border-bottom-left-radius: $arrow-tip-radius;
-      border-left-width: $overlay-border-width;
-      border-bottom-width: $overlay-border-width;
+      left: calc((var(--q-overlay-arrow-size) / -2) - var(--q-border-width));
+      border-bottom-left-radius: var(--q-overlay-arrow-tip-radius);
+      border-left-width: var(--q-border-width);
+      border-bottom-width: var(--q-border-width);
     }
   }
   
   &--independent {
     inset: 0;
-    margin: 1rem auto;
+    margin: var(--q-overlay-viewport-inset-x) auto;
     width: max-content;
     height: max-content;
   }
@@ -3491,12 +3542,12 @@ $arrow-tip-radius: 0.1rem;
   &__meter {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
-    padding: 1rem;
+    gap: var(--q-space-4);
+    padding: var(--q-space-4);
     &-score {
       display: flex;
       flex-direction: column;
-      gap: 0.5rem;
+      gap: var(--q-space-2);
     }
   }
   &__messages {
@@ -3506,11 +3557,11 @@ $arrow-tip-radius: 0.1rem;
     color: var(--q-theme-danger);
     padding: 0;
     margin: 0;
-    font-size: 0.75rem;
-    gap: 0.25rem;
+    font-size: var(--q-font-size-sm);
+    gap: var(--q-space-1);
   }
   &__inline-messages {
-    padding: 0.25rem 0;
+    padding: var(--q-space-1) 0;
   }
 }
 .q-phone-field {
@@ -3523,13 +3574,13 @@ $arrow-tip-radius: 0.1rem;
       width: max-content;
       min-width: max-content;
       padding-block: 0;
-      padding-inline: $space-base $space-base * 2;
+      padding-inline: var(--q-space-1) var(--q-space-2);
     }
     .q-field__prepend {
-      padding-inline: 0 $space-base;
+      padding-inline: 0 var(--q-space-1);
     }
     .q-field__append {
-      padding-inline: $space-base 0;
+      padding-inline: var(--q-space-1) 0;
     }
   }
   &__input {
@@ -3553,7 +3604,7 @@ $arrow-tip-radius: 0.1rem;
     width: 1.5em;
     aspect-ratio: 3 / 2;
     overflow: hidden;
-    border-radius: calc(var(--border-radius) / 2);
+    border-radius: calc(var(--q-border-radius) / 2);
   }
   &__flag {
     background-position: center;
@@ -3567,13 +3618,13 @@ $arrow-tip-radius: 0.1rem;
     
     color: var(--CountryFlagIcon-height, var(--q-theme-neutral-dark));
     font-size: 0.65em;
-    font-weight: $font-weight-bold;
+    font-weight: var(--q-font-weight-bold);
   }
   &__flag-fallback {
     background-color: rgb(var(--q-theme-neutral-light-rgb) / 25%);
     color: var(--q-theme-neutral-dark);
     font-size: 0.65em;
-    font-weight: $font-weight-bold;
+    font-weight: var(--q-font-weight-bold);
   }
   &__validation-message {
     color: var(--q-theme-danger);
@@ -3582,12 +3633,12 @@ $arrow-tip-radius: 0.1rem;
 .q-phone-field__search {
   align-self: stretch;
   width: auto;
-  margin-inline: $space-base;
+  margin-inline: var(--q-space-1);
   .q-text-field__input::placeholder {
     color: var(--q-theme-neutral-dark);
   }
   & + .q-select__items {
-    --q-phone-field-country-list-max-height: 15rem;
+    --q-phone-field-country-list-max-height: calc(15rem * var(--q-density-scale));
     width: 100%;
     min-width: 0;
     max-height: var(--q-phone-field-country-list-max-height);
@@ -3607,7 +3658,7 @@ $arrow-tip-radius: 0.1rem;
 .q-phone-field__empty {
   width: 100%;
   color: var(--q-theme-neutral-dark);
-  padding: $space-base * 4 $space-base * 2;
+  padding: var(--q-space-4) var(--q-space-2);
   text-align: center;
 }
 .q-popover {
@@ -3615,11 +3666,11 @@ $arrow-tip-radius: 0.1rem;
     position: relative;
     display: flex;
     flex-direction: column;
-    max-width: 276px;
-    gap: $space-base * 2;
-    padding: $space-base * 4;
-    font-size: calc($font-size-base * 0.9);
-    line-height: 1.5;
+    max-width: calc(276px * var(--q-density-scale));
+    gap: var(--q-space-2);
+    padding: var(--q-space-4);
+    font-size: var(--q-font-size-sm);
+    line-height: var(--q-line-height-md);
     word-break: normal;
     word-spacing: normal;
     overflow-wrap: break-word;
@@ -3629,11 +3680,11 @@ $arrow-tip-radius: 0.1rem;
   &__header {
     display: flex;
     align-items: center;
-    gap: $space-base;
+    gap: var(--q-space-1);
   }
   &__title {
     margin: 0;
-    font-size: $font-size-base;
+    font-size: var(--q-font-size-md);
   }
 }
 $transition-speed: 0.4s !default;
@@ -3642,35 +3693,47 @@ $transition-speed: 0.4s !default;
     background-position: 0 0;
   }
   to {
-    background-position: 1rem 0;
+    background-position: var(--q-progress-stripe-size) 0;
   }
 }
-@keyframes q-progress-pulse {
+@keyframes q-progress-shimmer {
   0% {
-    transform: scale(0, 0);
-    opacity: 0.4;
+    transform: translateX(-120%);
+    opacity: 0;
+  }
+  12% {
+    opacity: 1;
+  }
+  72% {
+    opacity: 1;
+  }
+  88% {
+    transform: translateX(120%);
+    opacity: 0;
   }
   100% {
-    transform: scale(10, 10);
+    transform: translateX(120%);
     opacity: 0;
   }
 }
 .q-progress {
-  $this: &;
   --q-progress-main-color: var(--q-theme-primary);
   --q-progress-main-color-rgb: var(--q-theme-primary-rgb);
   --q-progress-on-main-color: var(--q-theme-on-primary);
-  --q-progress-on-main-color-rgb: var(--q-theme-on-primary-rgb);
+  --q-progress-bar-height: calc(1.2rem * var(--q-density-scale));
+  --q-progress-bar-height-mini: calc(0.35rem * var(--q-density-scale));
+  --q-progress-stripe-size: calc(1rem * var(--q-density-scale));
+  --q-progress-values-gap: calc(5px * var(--q-density-scale));
   &__bar {
     display: flex;
     overflow: hidden;
-    height: 1.2rem;
+    height: var(--q-progress-bar-height);
     line-height: 0;
-    font-size: 0.75rem;
+    font-size: var(--q-font-size-sm);
     background-color: var(--q-theme-neutral-light);
-    border-radius: $border-radius;
+    border-radius: var(--q-border-radius);
     &--mini {
-      height: 0.35rem;
+      height: var(--q-progress-bar-height-mini);
       font-size: 0;
     }
   }
@@ -3687,6 +3750,7 @@ $transition-speed: 0.4s !default;
     transition: width $transition-speed ease;
     &-text {
       position: relative;
+      z-index: 1;
       margin: 0 10%;
       height: 100%;
       text-align: center;
@@ -3707,48 +3771,44 @@ $transition-speed: 0.4s !default;
         transparent 75%,
         transparent
       );
-      background-size: 1rem 1rem;
+      background-size: var(--q-progress-stripe-size) var(--q-progress-stripe-size);
     }
     &--animated {
-      animation: 1s linear infinite q-progress-move;
+      
       &::before {
         content: '';
         position: absolute;
-        left: -100%;
-        width: 100%;
-        height: 100%;
-        background-image: radial-gradient(
-          circle at 100%,
-          var(--q-theme-neutral-dark) 75%,
-          transparent 35%
+        top: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 0;
+        width: 50%;
+        pointer-events: none;
+        background-image: linear-gradient(
+          90deg,
+          transparent 0%,
+          rgb(255 255 255 / 20%) 35%,
+          rgb(255 255 255 / 45%) 50%,
+          rgb(255 255 255 / 20%) 65%,
+          transparent 100%
         );
-        animation: 5s linear infinite q-progress-pulse;
+        animation: 1.8s linear infinite q-progress-shimmer;
+      }
+      
+      &.q-progress__fill--striped {
+        animation: 1s linear infinite q-progress-move;
       }
     }
   }
   &__values {
     display: flex;
     justify-content: space-between;
-    margin-top: 5px;
+    margin-top: var(--q-progress-values-gap);
     &-min,
     &-max {
       position: relative;
     }
   }
-  
-  @mixin color-variant($color) {
-    &--#{$color} {
-      --q-progress-main-color: var(--q-theme-#{$color});
-      --q-progress-main-color-rgb: var(--q-theme-#{$color}-rgb);
-      --q-progress-on-main-color: var(--q-theme-on-#{$color});
-      --q-progress-on-main-color-rgb: var(--q-theme-on-#{$color}-rgb);
-      --q-progress-on-hover-color: var(--q-theme-on-#{$color});
-      --q-progress-on-hover-color-rgb: var(--q-theme-on-#{$color}-rgb);
-    }
-  }
-  @each $color, $value in $theme-colors {
-    @include color-variant($color);
-  }
 }
 @media (prefers-reduced-motion: reduce) {
   .q-progress__fill {
@@ -3758,34 +3818,39 @@ $transition-speed: 0.4s !default;
       &::before {
         display: none;
       }
+      &.q-progress__fill--striped {
+        animation: none;
+      }
     }
   }
 }
 $table-header-bg: rgb(var(--q-theme-neutral-light-rgb) / 25%);
 $row-hover-bg: rgb(var(--q-theme-primary-light-rgb) / 50%);
 $row-selected-bg: rgb(var(--q-theme-primary-rgb) / 15%);
-$base-border: 1px solid rgb(var(--q-theme-neutral-light-rgb) / 50%);
+$base-border: var(--q-border-width) solid rgb(var(--q-theme-neutral-light-rgb) / 50%);
 .q-property-list {
   margin: 0;
-  font-size: 0.9rem;
+  font-size: var(--q-font-size-md);
   display: inline-flex;
   width: auto;
   flex-direction: column;
   border: $base-border;
+  border-radius: var(--q-border-radius);
+  overflow: hidden;
   &-panel {
-    padding: 0.4rem;
+    padding: calc(0.4rem * var(--q-density-scale));
     display: flex;
     flex-direction: column;
     overflow-y: auto;
-    min-height: 50px;
-    max-height: 80px;
-    gap: 1rem;
+    min-height: calc(50px * var(--q-density-scale));
+    max-height: calc(80px * var(--q-density-scale));
+    gap: var(--q-space-4);
   }
   &--side-panel {
     flex-direction: row;
     .q-property-list-panel {
       border-left: $base-border;
-      width: 250px;
+      width: calc(250px * var(--q-density-scale));
       max-height: unset;
     }
   }
@@ -3808,7 +3873,7 @@ $base-border: 1px solid rgb(var(--q-theme-neutral-light-rgb) / 50%);
   }
   &__header {
     background: $table-header-bg;
-    height: 25px; 
+    height: calc(25px * var(--q-density-scale)); 
   }
   &__row {
     &:hover {
@@ -3825,10 +3890,10 @@ $base-border: 1px solid rgb(var(--q-theme-neutral-light-rgb) / 50%);
     }
   }
   &__cell {
-    padding: 0.25rem 0.5rem;
+    padding: var(--q-space-1) var(--q-space-2);
     &--label {
       width: 20%;
-      font-size: 0.85rem;
+      font-size: var(--q-font-size-sm);
       text-wrap: nowrap;
       opacity: 0.8;
     }
@@ -3845,19 +3910,19 @@ $base-border: 1px solid rgb(var(--q-theme-neutral-light-rgb) / 50%);
   &-group {
     cursor: pointer;
     td {
-      padding: 0.2rem 0.25rem;
+      padding: calc(0.2rem * var(--q-density-scale)) var(--q-space-1);
     }
     &__content {
       display: flex;
       align-items: center;
     }
     ~ .q-property-list__row .q-property-list__cell-label {
-      padding: 0 2rem;
+      padding: 0 calc(2rem * var(--q-density-scale));
     }
     &--no-toggle {
       cursor: default;
       td {
-        padding: 0.5rem 1rem;
+        padding: var(--q-space-2) var(--q-space-4);
       }
     }
   }
@@ -3868,18 +3933,19 @@ $base-border: 1px solid rgb(var(--q-theme-neutral-light-rgb) / 50%);
 .q-radio-group {
   $this: &;
   --q-radio-group-columns: 1;
-  display: flex;
-  flex-direction: column;
-  gap: calc($space-base * 2);
+  &.q-field--label-left,
+  &.q-field--label-right {
+    gap: var(--q-space-2);
+  }
   &__group {
     display: flex;
     flex-direction: column;
-    gap: calc($space-base * 2);
   }
   
   &--horizontal {
     #{$this}__group {
       flex-direction: row;
+      gap: var(--q-space-2);
     }
   }
   
@@ -3890,25 +3956,38 @@ $base-border: 1px solid rgb(var(--q-theme-neutral-light-rgb) / 50%);
 }
 .q-radio-button {
   $this: &;
-  --q-radio-button-circle-size: 1rem;
+  --q-radio-button-circle-size: var(--q-selection-control-size);
   --q-radio-button-checked-color: var(--q-theme-primary);
   display: flex;
   width: fit-content;
   align-items: center;
-  gap: calc($space-base * 1.5);
+  box-sizing: border-box;
+  height: var(--q-interactive-height);
+  min-height: var(--q-interactive-height);
+  gap: calc(var(--q-space-1) * 1.5);
+  font-size: var(--q-font-size-md);
+  
+  line-height: var(--q-radio-button-circle-size);
+  
+  padding-block: calc((var(--q-interactive-height) - var(--q-radio-button-circle-size)) / 2);
   cursor: pointer;
-  label {
-    line-height: 1;
+  > label {
+    font-size: var(--q-font-size-md);
+    line-height: inherit;
     cursor: pointer;
   }
   &__input {
     position: relative;
+    box-sizing: border-box;
+    flex: 0 0 var(--q-radio-button-circle-size);
     width: var(--q-radio-button-circle-size);
     height: var(--q-radio-button-circle-size);
+    aspect-ratio: 1;
+    margin: 0;
+    padding: 0;
     background-color: transparent;
-    flex-shrink: 0;
     appearance: none;
-    border-width: 1px;
+    border: var(--q-border-width) solid var(--q-border-color);
     border-radius: 50%;
     font-size: var(--q-radio-button-circle-size);
     cursor: pointer;
@@ -4004,76 +4083,75 @@ $base-border: 1px solid rgb(var(--q-theme-neutral-light-rgb) / 50%);
     }
   }
   
-  &--small {
-    --q-radio-button-circle-size: 0.875rem;
-  }
-  &--large {
-    --q-radio-button-circle-size: 1.5rem;
-    padding: 0.625rem;
-  }
+  @include q-size-modifiers;
 }
 .q-radio-group--focus-style .q-radio-button:focus-within {
-  outline: $outline;
+  outline: var(--q-focus-ring);
 }
 .q-section {
   $this: &;
+  --q-section-padding-y: var(--q-space-2);
+  --q-section-padding-x: var(--q-space-4);
+  --q-section-padding-bottom: var(--q-space-4);
+  --q-section-title-size: calc(var(--q-font-size-lg) * 1.2);
+  --q-section-minor-title-size: var(--q-font-size-md);
   display: inline-block;
   overflow-wrap: break-word;
   background-color: var(--q-theme-container);
   border-width: 1px;
-  border-bottom: $group-border-bottom;
-  padding: 0.5rem 1rem 1rem;
-  border-radius: var(--border-radius);
+  border-bottom: var(--q-group-border-bottom);
+  padding: var(--q-section-padding-y) var(--q-section-padding-x) var(--q-section-padding-bottom);
+  border-radius: var(--q-border-radius);
   position: relative;
   max-width: 100%;
   &:focus-visible {
-    outline: $outline;
-    border-radius: var(--border-radius);
+    outline: var(--q-focus-ring);
+    border-radius: var(--q-border-radius);
   }
   &__title {
-    font-size: 1.2rem;
-    line-height: 1rem;
-    letter-spacing: 0.02rem;
+    font-size: var(--q-section-title-size);
+    line-height: var(--q-line-height-md);
+    letter-spacing: var(--q-letter-spacing-md);
     color: var(--q-theme-primary);
-    text-transform: $headings-text-transform;
+    text-transform: var(--q-headings-text-transform);
     margin: 0;
-    margin-top: 0.25rem;
+    margin-top: var(--q-space-1);
     display: flex;
     align-items: flex-start;
     width: fit-content;
-    gap: 0.25rem;
-    margin-bottom: 0.5rem;
+    gap: var(--q-space-1);
+    margin-bottom: var(--q-space-2);
   }
   
   &--background {
     background-color: rgb(var(--q-theme-primary-light-rgb) / 50%);
-    padding: 0.5rem 1rem 1rem;
+    padding: var(--q-section-padding-y) var(--q-section-padding-x) var(--q-section-padding-bottom);
   }
   &--minor {
     background-color: transparent;
     border: none;
     border-radius: 0;
-    padding: 0.5rem 0 0;
+    padding: var(--q-space-2) 0 0;
   }
   &--minor-border-top {
     background-color: transparent;
     border: none;
-    border-top: 1px solid var(--q-theme-neutral-light);
+    border-top: var(--q-border-width) solid var(--q-theme-neutral-light);
     border-radius: 0;
-    margin-top: 0.5rem;
-    padding: 0.25rem 0;
+    margin-top: var(--q-space-2);
+    padding: var(--q-space-1) 0;
   }
   &--minor,
   &--minor-border-top {
     #{$this}__title {
-      font-size: 0.9rem;
-      line-height: 1;
+      font-size: var(--q-section-minor-title-size);
+      line-height: var(--q-line-height-md);
       letter-spacing: initial;
       color: var(--q-theme-neutral-dark);
       text-transform: none;
       font-weight: 600;
-      margin-bottom: 0.25rem;
-      margin-top: 0.25rem;
+      margin-bottom: var(--q-space-1);
+      margin-top: var(--q-space-1);
     }
   }
   &--title-background {
@@ -4082,41 +4160,41 @@ $base-border: 1px solid rgb(var(--q-theme-neutral-light-rgb) / 50%);
       position: absolute;
       top: 0;
       left: 0;
-      height: 30px;
+      height: calc(30px * var(--q-density-scale));
       width: 100%;
       content: '';
       background-color: rgb(var(--q-theme-neutral-light-rgb) / 25%);
-      border-radius: var(--border-radius) var(--border-radius) 0 0;
+      border-radius: var(--q-border-radius) var(--q-border-radius) 0 0;
     }
     #{$this}__title {
-      padding: 0.5rem 1rem;
+      padding: var(--q-space-2) var(--q-space-4);
       margin: 0;
-      font-size: 0.9rem;
+      font-size: var(--q-font-size-md);
       font-weight: 700;
-      line-height: 1;
-      letter-spacing: 0.01rem;
+      line-height: var(--q-line-height-md);
+      letter-spacing: var(--q-letter-spacing-sm);
       color: var(--q-theme-on-background);
       text-transform: none;
       z-index: 10;
       position: relative;
     }
     > #{$this}__content {
-      padding: 0.2rem 1rem 1rem;
+      padding: calc(0.2rem * var(--q-density-scale)) var(--q-space-4) var(--q-space-4);
     }
   }
   &--subsection {
     border: none;
-    margin-left: 0.625rem;
-    margin-bottom: 0.625rem;
+    margin-left: calc(0.625rem * var(--q-density-scale));
+    margin-bottom: calc(0.625rem * var(--q-density-scale));
     #{$this}__title {
-      font-size: 0.9rem;
-      line-height: 1;
+      font-size: var(--q-section-minor-title-size);
+      line-height: var(--q-line-height-md);
       letter-spacing: initial;
       background-color: transparent;
       color: var(--q-theme-neutral-dark);
       text-transform: none;
       font-weight: 600;
-      margin-bottom: 0.25rem;
+      margin-bottom: var(--q-space-1);
     }
   }
   
@@ -4147,7 +4225,7 @@ $base-border: 1px solid rgb(var(--q-theme-neutral-light-rgb) / 50%);
   &--disabled {
     .q-badge--disabled {
       opacity: 1;
-      font-weight: $font-weight-black;
+      font-weight: var(--q-font-weight-black);
       color: var(--q-theme-neutral-dark);
     }
   }
@@ -4177,13 +4255,14 @@ $base-border: 1px solid rgb(var(--q-theme-neutral-light-rgb) / 50%);
   }
   &__value-container {
     display: flex;
-    gap: 0.1rem;
+    align-items: center;
+    gap: var(--q-space-1);
     overflow: hidden;
     width: 100%;
-    height: 1.35rem;
+    min-height: var(--q-control-height-sm);
     #{$this}__badge {
       &-count {
-        font-weight: $font-weight-black;
+        font-weight: var(--q-font-weight-black);
         &--clickable {
           cursor: pointer;
         }
@@ -4206,33 +4285,25 @@ $base-border: 1px solid rgb(var(--q-theme-neutral-light-rgb) / 50%);
     cursor: inherit;
   }
   &__chevron.q-button {
-    padding: 0.1rem;
-    opacity: 0.5;
-    svg {
-      width: $icon-size-sm;
-      height: $icon-size-sm;
-    }
-    &:hover {
-      cursor: inherit;
-    }
+    @include q-field-affix-button;
   }
   &__body {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: $space-base;
+    gap: var(--q-space-1);
     width: 100%;
-    padding: $space-base 0;
+    padding: var(--q-space-1) 0;
     outline: none;
     .q-list-item {
-      width: calc(100% - 2 * $space-base);
-      margin-inline: $space-base;
+      width: calc(100% - 2 * var(--q-space-1));
+      margin-inline: var(--q-space-1);
     }
   }
   &__items {
     min-width: fit-content;
     width: 100%;
-    max-height: 240px;
+    max-height: calc(240px * var(--q-density-scale));
     align-items: start;
   }
   &__loader {
@@ -4242,11 +4313,11 @@ $base-border: 1px solid rgb(var(--q-theme-neutral-light-rgb) / 50%);
   }
   &__loader,
   &__empty {
-    margin: calc(4 * $space-base) 0;
+    margin: var(--q-space-4) 0;
   }
   
   .q-field__prepend {
-    padding-inline: $space-base * 2;
+    padding-inline: var(--q-space-2);
   }
 }
 $sidebar-size-small: 19rem;
@@ -4295,6 +4366,7 @@ $sidebar-sizes: (
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
+  width: calc(50px * var(--q-density-scale));
   background-color: var(--q-theme-container);
   z-index: 10;
 }
@@ -4311,9 +4383,9 @@ $sidebar-sizes: (
   border-width: 0;
   border-bottom-width: 1px;
   border-bottom-color: $sidebar-border-color !important;
-  font-size: 0.6rem;
+  font-size: calc(var(--q-font-size-sm) * 0.8);
   .q-icon {
-    font-size: 20px;
+    font-size: var(--q-icon-size-lg);
   }
 }
 .q-sidebar__indicator {
@@ -4339,8 +4411,8 @@ $sidebar-sizes: (
 .q-sidebar-panel__footer {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  margin: 1rem;
+  gap: var(--q-space-2);
+  margin: var(--q-space-4);
 }
 .q-sidebar-panel__header {
   margin-bottom: 0;
@@ -4354,12 +4426,12 @@ $sidebar-sizes: (
 .q-sidebar-panel__content {
   flex: 1 1 0%;
   overflow: auto;
-  margin: 1rem;
+  margin: var(--q-space-4);
 }
 .q-sidebar-panel__handle {
   position: absolute;
   top: 0;
-  width: 10px;
+  width: calc(10px * var(--q-density-scale));
   height: 100%;
   cursor: ew-resize;
   display: flex;
@@ -4373,10 +4445,10 @@ $sidebar-sizes: (
   right: 0;
 }
 .q-sidebar-panel__grip {
-  width: 4px;
-  height: 24px;
+  width: var(--q-space-1);
+  height: var(--q-space-6);
   background-color: var(--q-theme-neutral);
-  border-radius: 2px;
+  border-radius: calc(2px * var(--q-density-scale));
 }
 @include sidebar-size-modifiers('', width);
 @include sidebar-size-modifiers('min', min-width);
@@ -4416,7 +4488,7 @@ $sidebar-sizes: (
     overflow: hidden;
     background-color: var(--q-theme-neutral-light);
     animation: fade-in 1s;
-    border-radius: var(--border-radius);
+    border-radius: var(--q-border-radius);
     &::after {
       position: absolute;
       inset: 0;
@@ -4438,8 +4510,8 @@ $sidebar-sizes: (
     height: 1em;
   }
   &--icon {
-    width: 20px;
-    height: 20px;
+    width: var(--q-icon-size-lg);
+    height: var(--q-icon-size-lg);
     #{$this}__bone {
       border-radius: 50%;
     }
@@ -4460,7 +4532,7 @@ $sidebar-sizes: (
 }
 $spinner-color: var(--q-theme-primary);
 .q-spinner-loader {
-  font-size: 48px;
+  font-size: calc(48px * var(--q-density-scale));
   width: 1em;
   padding: 0.15em;
   aspect-ratio: 1;
@@ -4483,26 +4555,37 @@ $spinner-color: var(--q-theme-primary);
   
   
   
-  --q-switch-inner-padding: 2px;
+  --q-switch-inner-padding: calc(2px * var(--q-density-scale));
   --q-switch-border-radius: 9999px; 
   --q-switch-transition-duration: 0.15s;
   --q-switch-transition-easing: ease-out;
   
-  --q-switch-label-padding-v: 10px;
-  --q-switch-label-padding-h: 15px;
-  --q-switch-font-size: 0.75rem;
+  --q-switch-label-padding-v: calc(10px * var(--q-density-scale));
+  --q-switch-label-padding-h: calc(15px * var(--q-density-scale));
+  --q-switch-font-size: var(--q-font-size-sm);
+  
+  --q-switch-label-block-size: calc(
+    var(--q-switch-label-padding-v) * 2 + var(--q-switch-font-size)
+  );
+  --q-switch-drawn-height: calc(
+    var(--q-switch-inner-padding) * 2 + var(--q-switch-label-block-size)
+  );
+  --q-switch-hit-padding-block: max(
+    0px,
+    calc((var(--q-interactive-height) - var(--q-switch-drawn-height)) / 2)
+  );
   
   --q-switch-shadow-color-primary: rgb(var(--q-theme-on-background-rgb) / 20%);
   --q-switch-shadow-color-secondary: rgb(var(--q-theme-on-background-rgb) / 10%);
-  --q-switch-shadow-blur-base: 3px;
-  --q-switch-shadow-offset-y: 1px;
-  --q-switch-shadow-spread: 2px;
+  --q-switch-shadow-blur-base: calc(3px * var(--q-density-scale));
+  --q-switch-shadow-offset-y: calc(1px * var(--q-density-scale));
+  --q-switch-shadow-spread: calc(2px * var(--q-density-scale));
   
   --q-switch-shadow-color-primary-hover: rgb(var(--q-theme-on-background-rgb) / 30%);
   --q-switch-shadow-color-secondary-hover: rgb(var(--q-theme-on-background-rgb) / 15%);
-  --q-switch-shadow-blur-hover: 6px;
-  --q-switch-shadow-offset-y-hover: 2px;
-  --q-switch-shadow-spread-hover: 4px;
+  --q-switch-shadow-blur-hover: calc(6px * var(--q-density-scale));
+  --q-switch-shadow-offset-y-hover: calc(2px * var(--q-density-scale));
+  --q-switch-shadow-spread-hover: calc(4px * var(--q-density-scale));
   
   --q-switch-disabled-opacity: 0.5;
   --q-switch-hover-background-opacity: 0.5;
@@ -4518,25 +4601,18 @@ $spinner-color: var(--q-theme-primary);
   align-items: center;
   position: relative;
   white-space: nowrap;
-  background: var(--q-switch-unchecked-background);
+  box-sizing: border-box;
+  height: var(--q-interactive-height);
+  min-height: var(--q-interactive-height);
+  
+  padding: var(--q-switch-hit-padding-block) 0;
+  background: transparent;
   border-radius: var(--q-switch-border-radius);
-  padding: var(--q-switch-inner-padding);
-  transition: background var(--q-switch-transition-duration) var(--q-switch-transition-easing);
+  cursor: pointer;
   
   
   
-  &--small {
-    --q-switch-inner-padding: 1px;
-    --q-switch-label-padding-v: 8px;
-    --q-switch-label-padding-h: 12px;
-    --q-switch-font-size: 0.6875rem;
-  }
-  &--large {
-    --q-switch-inner-padding: 3px;
-    --q-switch-label-padding-v: 12px;
-    --q-switch-label-padding-h: 18px;
-    --q-switch-font-size: 0.875rem;
-  }
+  @include q-size-modifiers;
   
   
   
@@ -4558,9 +4634,10 @@ $spinner-color: var(--q-theme-primary);
 }
 .q-switch__input {
   position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
+  inset: var(--q-switch-hit-padding-block) 0 var(--q-switch-hit-padding-block) 0;
+  
+  width: auto;
+  height: auto;
   margin: 0;
   padding: 0;
   appearance: none;
@@ -4571,7 +4648,7 @@ $spinner-color: var(--q-theme-primary);
   z-index: 2;
   
   &:focus-visible {
-    outline: $outline;
+    outline: var(--q-focus-ring);
   }
   
   &:disabled {
@@ -4586,6 +4663,11 @@ $spinner-color: var(--q-theme-primary);
   align-items: center;
   width: 100%;
   position: relative;
+  box-sizing: border-box;
+  padding: var(--q-switch-inner-padding);
+  background: var(--q-switch-unchecked-background);
+  border-radius: var(--q-switch-border-radius);
+  transition: background var(--q-switch-transition-duration) var(--q-switch-transition-easing);
 }
 .q-switch__label {
   display: inline-flex;
@@ -4615,13 +4697,17 @@ $spinner-color: var(--q-theme-primary);
   padding-left: var(--q-switch-label-padding-v);
 }
 .q-switch--with-labels {
-  --q-switch-label-padding-v: 4px; 
+  --q-switch-label-padding-v: calc(
+    4px * var(--q-density-scale)
+  ); 
   .q-switch__label {
     padding: var(--q-switch-label-padding-v) var(--q-switch-label-padding-h); 
   }
 }
 .q-switch--checked:not(.q-switch--readonly) {
-  background: var(--q-switch-checked-background);
+  .q-switch__labels {
+    background: var(--q-switch-checked-background);
+  }
   .q-switch__label--off {
     color: var(--q-switch-on-checked-background);
   }
@@ -4672,57 +4758,96 @@ $spinner-color: var(--q-theme-primary);
   }
 }
 .q-tabs {
+  --q-tabs-indicator-thickness: calc(4px * var(--q-density-scale));
   display: flex;
   gap: 0;
   &--horizontal {
     flex-direction: column;
     .q-tabs__list {
       width: 100%;
-      border-bottom: 1px solid $border;
+      
+      
+      
+      &::after {
+        content: '';
+        position: absolute;
+        inset-inline: 0;
+        bottom: 0;
+        z-index: 0;
+        height: 1px;
+        pointer-events: none;
+        background-color: var(--q-border-color);
+      }
+    }
+    .q-tabs__overflow {
+      position: relative;
+      z-index: 1;
     }
     .q-tabs__tablist {
       flex-direction: row;
-      width: 100%;
-    }
-    .q-tab {
-      margin-bottom: -1px;
+      
+      
+      width: max-content;
+      min-width: 100%;
     }
     .q-tabs__panels {
-      border: 1px solid $border;
+      border: var(--q-border-width) solid var(--q-border-color);
       border-top: 0;
       border-start-start-radius: 0;
       border-start-end-radius: 0;
-      border-end-start-radius: $border-radius;
-      border-end-end-radius: $border-radius;
-      padding-inline: calc($space-base * 2);
+      border-end-start-radius: var(--q-border-radius);
+      border-end-end-radius: var(--q-border-radius);
+      padding-inline: var(--q-space-2);
     }
   }
   &--vertical {
     flex-direction: row;
     align-items: stretch;
     .q-tabs__list {
+      display: flex;
       flex: 0 0 auto;
+      flex-direction: column;
+      align-self: stretch;
       width: max-content;
       max-width: 100%;
-      border-inline-end: 1px solid $border;
+      min-height: 0;
+      &::after {
+        content: '';
+        position: absolute;
+        inset-block: 0;
+        inset-inline-end: 0;
+        z-index: 0;
+        width: 1px;
+        pointer-events: none;
+        background-color: var(--q-border-color);
+      }
+    }
+    .q-tabs__overflow {
+      position: relative;
+      z-index: 1;
+      flex: 1 1 auto;
+      width: auto;
+      height: 100%;
+      min-height: 0;
     }
     .q-tabs__tablist {
       flex-direction: column;
+      height: max-content;
+      min-height: 100%;
     }
     .q-tab {
       justify-content: flex-start;
-      margin-inline-end: -1px;
     }
     .q-tabs__panels {
       flex: 1;
       min-width: 0;
-      border: 1px solid $border;
+      border: var(--q-border-width) solid var(--q-border-color);
       border-inline-start: 0;
       border-start-start-radius: 0;
       border-end-start-radius: 0;
-      border-start-end-radius: $border-radius;
-      border-end-end-radius: $border-radius;
-      padding-inline: calc($space-base * 2);
+      border-start-end-radius: var(--q-border-radius);
+      border-end-end-radius: var(--q-border-radius);
+      padding-inline: var(--q-space-2);
     }
   }
   
@@ -4730,7 +4855,7 @@ $spinner-color: var(--q-theme-primary);
   &--line {
     .q-tabs__indicator {
       position: absolute;
-      background-color: $primary;
+      background-color: var(--q-theme-primary);
       opacity: 0;
       pointer-events: none;
       z-index: 1;
@@ -4745,15 +4870,15 @@ $spinner-color: var(--q-theme-primary);
     &.q-tabs--horizontal .q-tabs__indicator {
       
       
-      bottom: -1px;
+      bottom: 0;
       left: 0;
     }
     &.q-tabs--horizontal .q-tab {
-      border-bottom: 4px solid transparent;
+      border-bottom: var(--q-tabs-indicator-thickness) solid transparent;
       border-end-start-radius: 0;
       border-end-end-radius: 0;
       &--active {
-        border-bottom-color: $primary;
+        border-bottom-color: var(--q-theme-primary);
       }
       @media (hover: hover) {
         &:hover:not(:disabled, .q-tab--active) {
@@ -4767,14 +4892,14 @@ $spinner-color: var(--q-theme-primary);
     &.q-tabs--vertical .q-tabs__indicator {
       
       top: 0;
-      inset-inline-end: -1px;
+      inset-inline-end: 0;
     }
     &.q-tabs--vertical .q-tab {
-      border-inline-end: 4px solid transparent;
+      border-inline-end: var(--q-tabs-indicator-thickness) solid transparent;
       border-start-end-radius: 0;
       border-end-end-radius: 0;
       &--active {
-        border-inline-end-color: $primary;
+        border-inline-end-color: var(--q-theme-primary);
       }
       @media (hover: hover) {
         &:hover:not(:disabled, .q-tab--active) {
@@ -4792,45 +4917,45 @@ $spinner-color: var(--q-theme-primary);
       gap: 0;
     }
     .q-tab {
-      border: 1px solid $border;
+      border: var(--q-border-width) solid var(--q-border-color);
       background-color: rgb(var(--q-theme-neutral-light-rgb) / 25%);
       &--active {
-        background-color: $container;
+        background-color: var(--q-theme-container);
         z-index: 1;
       }
       @media (hover: hover) {
         &:hover:not(:disabled) {
-          border-color: $border;
+          border-color: var(--q-border-color);
         }
       }
     }
     &.q-tabs--horizontal .q-tab {
-      border-start-start-radius: $border-radius;
-      border-start-end-radius: $border-radius;
+      border-start-start-radius: var(--q-border-radius);
+      border-start-end-radius: var(--q-border-radius);
       border-end-start-radius: 0;
       border-end-end-radius: 0;
       &--active {
-        border-bottom-color: $container;
-        color: $primary;
+        border-bottom-color: var(--q-theme-container);
+        color: var(--q-theme-primary);
       }
     }
     &.q-tabs--horizontal .q-tab--active:hover:not(:disabled) {
       @media (hover: hover) {
-        border-bottom-color: $container;
+        border-bottom-color: var(--q-theme-container);
       }
     }
     &.q-tabs--vertical .q-tab {
-      border-start-start-radius: $border-radius;
-      border-end-start-radius: $border-radius;
+      border-start-start-radius: var(--q-border-radius);
+      border-end-start-radius: var(--q-border-radius);
       border-start-end-radius: 0;
       border-end-end-radius: 0;
       &--active {
-        border-inline-end-color: $container;
+        border-inline-end-color: var(--q-theme-container);
       }
     }
     &.q-tabs--vertical .q-tab--active:hover:not(:disabled) {
       @media (hover: hover) {
-        border-inline-end-color: $container;
+        border-inline-end-color: var(--q-theme-container);
       }
     }
   }
@@ -4851,17 +4976,42 @@ $spinner-color: var(--q-theme-primary);
   }
   &__list {
     position: relative;
+    min-width: 0;
+  }
+  &__overflow {
+    min-width: 0;
+    
+    
+    &.q-overflow--horizontal {
+      align-items: flex-end;
+      &.q-overflow--arrows-outside {
+        .q-overflow__control {
+          align-self: flex-end;
+        }
+        
+        .q-overflow__control > *,
+        .q-overflow__button {
+          height: auto;
+          align-self: auto;
+        }
+      }
+    }
   }
   &__tablist {
     display: flex;
-    gap: $space-base;
+    gap: var(--q-space-1);
+    
+    
+    .q-tab:focus-visible {
+      outline-offset: calc(-1 * (var(--q-focus-ring-width) + var(--q-focus-ring-offset)));
+    }
   }
   &__panels {
-    padding-block: calc($space-base * 2);
+    padding-block: var(--q-space-2);
   }
   &__panel {
     &:focus {
-      outline: $outline;
+      outline: var(--q-focus-ring);
       &:not(:focus-visible) {
         outline: 0;
       }
@@ -4871,22 +5021,22 @@ $spinner-color: var(--q-theme-primary);
 .q-tab {
   background: transparent;
   border: 0;
-  padding: 0.5rem 0.75rem;
+  padding: var(--q-control-padding-y-lg) var(--q-control-padding-x-lg);
   &.q-button.q-button--text {
-    color: $on-background;
+    color: var(--q-theme-on-background);
   }
   &--active.q-button.q-button--text {
-    color: $primary;
+    color: var(--q-theme-primary);
     cursor: default;
     &:hover:not(:disabled) {
-      color: $primary;
+      color: var(--q-theme-primary);
       cursor: default;
     }
   }
   &__title {
     display: inline-flex;
     align-items: center;
-    gap: calc($space-base * 0.5);
+    gap: calc(var(--q-space-1) * 0.5);
   }
   &__title-text {
     font-weight: 600;
@@ -4907,6 +5057,12 @@ $spinner-color: var(--q-theme-primary);
   
   display: flex;
   flex-direction: column;
+  
+  > .q-field__control {
+    height: auto;
+    min-height: var(--q-interactive-height);
+    align-items: flex-start;
+  }
   &__input {
     width: 100%;
     line-height: inherit;
@@ -4914,7 +5070,7 @@ $spinner-color: var(--q-theme-primary);
     color: inherit;
     background-color: transparent;
     padding: 0;
-    min-height: 2.5rem;
+    min-height: calc(2.5rem * var(--q-density-scale));
     resize: vertical;
     font-family: inherit;
     font-size: inherit;
@@ -4982,20 +5138,28 @@ $spinner-color: var(--q-theme-primary);
   color: var(--q-theme-on-background);
   caret-color: var(--q-theme-on-background);
 }
-$q-toast-width: calc(8 * 5em + 7 * #{$space-base}) !default; 
+$q-toast-width: calc(8 * 5em + 7 * var(--q-space-1)) !default; 
 $q-toast-duration: 0.3s !default;
 $q-toast-duration-leave: 0.24s !default; 
-$q-toast-spacing-buffer: clamp(1rem, 4vw, 2.5rem) !default;
-$q-toast-slide-distance: clamp(1rem, 3vw, 1.5rem) !default;
+$q-toast-spacing-buffer: clamp(
+  calc(1rem * var(--q-density-scale)),
+  4vw,
+  calc(2.5rem * var(--q-density-scale))
+) !default;
+$q-toast-slide-distance: clamp(
+  calc(1rem * var(--q-density-scale)),
+  3vw,
+  calc(1.5rem * var(--q-density-scale))
+) !default;
 .q-toaster {
   position: fixed;
   z-index: 9999;
   inset: 0;
   display: flex;
   flex-direction: column;
-  gap: $space-base * 2;
+  gap: var(--q-space-2);
   pointer-events: none;
-  padding: $space-base * 2;
+  padding: var(--q-space-2);
   overflow: hidden;
   
   &[data-placement*='left'] {
@@ -5022,8 +5186,8 @@ $q-toast-slide-distance: clamp(1rem, 3vw, 1.5rem) !default;
   --q-toast-tonal-color: var(--q-theme-info-light);
   max-width: #{$q-toast-width};
   &.q-card {
-    --card-base-padding: 0;
-    --card-padding: 0;
+    --q-card-base-padding: 0;
+    --q-card-padding: 0;
     
     min-height: unset;
   }
@@ -5032,7 +5196,7 @@ $q-toast-slide-distance: clamp(1rem, 3vw, 1.5rem) !default;
   }
   &__title {
     display: flex;
-    gap: $space-base;
+    gap: var(--q-space-1);
     h4 {
       margin-block: 0;
     }
@@ -5040,14 +5204,18 @@ $q-toast-slide-distance: clamp(1rem, 3vw, 1.5rem) !default;
   &__body {
     text-wrap: wrap;
   }
+  .q-col:has(.q-toast__dismiss.q-button) {
+    padding-left: 0;
+    padding-right: 0;
+  }
   
   &--block {
     max-width: unset;
   }
   
   &--vertical {
-    padding-bottom: $space-base * 4; 
-    padding-top: $space-base;
+    padding-bottom: var(--q-space-4); 
+    padding-top: var(--q-space-1);
   }
   &--bold {
     background-color: var(--q-toast-main-color);
@@ -5141,22 +5309,22 @@ $q-toast-slide-distance: clamp(1rem, 3vw, 1.5rem) !default;
   &__content {
     display: flex;
     flex-direction: column;
-    gap: $space-base;
+    gap: var(--q-space-1);
     align-items: center;
-    padding: 0.5rem;
+    padding: var(--q-space-2);
     font-style: normal;
-    font-size: calc($font-size-base * 0.9);
-    font-weight: $font-weight-regular;
+    font-size: var(--q-font-size-sm);
+    font-weight: var(--q-font-weight-regular);
     text-decoration: none;
     text-shadow: none;
     text-transform: none;
-    line-height: 1.5;
+    line-height: var(--q-line-height-md);
     line-break: auto;
     overflow-wrap: break-word;
     word-break: normal;
     word-spacing: normal;
     white-space: normal;
     letter-spacing: normal;
-    max-width: 200px;
+    max-width: calc(200px * var(--q-density-scale));
   }
 }