@quidgest/ui 0.23.4 → 0.25.0

package/dist/ui.scss

@@ -1,5 +1,5 @@
 /*!
- * Quidgest UI v0.23.4
+ * Quidgest UI v0.25.0
  * (c) 2026 Quidgest - Consultores de Gestão, S.A.
  * Released under the MIT License.
  */
@@ -373,9 +373,9 @@ summary {
 [type='color']::-moz-color-swatch {
   border: 0;
 }
-$q-control-height-compact-md: 25px !default;
-$q-control-height-regular-md: 32px !default;
-$q-control-height-loose-md: 44px !default;
+$q-control-height-compact-md: 1.5625rem !default; 
+$q-control-height-regular-md: 2rem !default; 
+$q-control-height-loose-md: 2.75rem !default; 
 $q-density-scale-compact: math.div(
   $q-control-height-compact-md,
   $q-control-height-regular-md
@@ -485,7 +485,6 @@ $breakpoint-xxl: 1400px;
   --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;
@@ -498,21 +497,21 @@ $breakpoint-xxl: 1400px;
   --q-transition-duration: 0.2s;
   --q-transition-timing-function: ease;
   
-  --q-space-1-base: 4px;
-  --q-space-2-base: 8px;
-  --q-space-3-base: 12px;
-  --q-space-4-base: 16px;
-  --q-space-5-base: 20px;
-  --q-space-6-base: 24px;
-  --q-control-height-sm-base: 28px;
+  --q-space-1-base: 0.25rem;
+  --q-space-2-base: 0.5rem;
+  --q-space-3-base: 0.75rem;
+  --q-space-4-base: 1rem;
+  --q-space-5-base: 1.25rem;
+  --q-space-6-base: 1.5rem;
+  --q-control-height-sm-base: 1.75rem;
   --q-control-height-md-base: #{$q-control-height-regular-md};
-  --q-control-height-lg-base: 40px;
-  --q-control-padding-x-sm-base: 8px;
-  --q-control-padding-x-md-base: 10px;
-  --q-control-padding-x-lg-base: 12px;
-  --q-control-padding-y-sm-base: 4px;
-  --q-control-padding-y-md-base: 6px;
-  --q-control-padding-y-lg-base: 8px;
+  --q-control-height-lg-base: 2.5rem;
+  --q-control-padding-x-sm-base: 0.5rem;
+  --q-control-padding-x-md-base: 0.625rem;
+  --q-control-padding-x-lg-base: 0.75rem;
+  --q-control-padding-y-sm-base: 0.25rem;
+  --q-control-padding-y-md-base: 0.375rem;
+  --q-control-padding-y-lg-base: 0.5rem;
   --q-font-size-sm-base: 0.75rem;
   --q-font-size-md-base: 0.875rem;
   --q-font-size-lg-base: 1rem;
@@ -525,11 +524,11 @@ $breakpoint-xxl: 1400px;
   --q-selection-control-size-base: 1.15rem;
   --q-field-padding-y-base: 0.26rem;
   --q-field-padding-x-base: 0.25rem;
-  --q-icon-size-sm-base: 14px;
-  --q-icon-size-md-base: 16px;
-  --q-icon-size-lg-base: 20px;
-  --q-icon-padding-base: 4px;
-  --q-border-radius-base: 4px;
+  --q-icon-size-sm-base: 1em;
+  --q-icon-size-md-base: 1.15em;
+  --q-icon-size-lg-base: 1.45em;
+  --q-icon-padding-base: 0.25rem;
+  --q-border-radius-base: 0.25rem;
   @include q-density-scoped-tokens;
 }
 [data-q-density='compact'],
@@ -558,9 +557,9 @@ $breakpoint-xxl: 1400px;
 }
 body {
   background-color: var(--q-theme-background);
-  font-size: var(--q-font-size-base);
-  color: var(--q-theme-on-background);
-  caret-color: var(--q-theme-on-background);
+  font-size: var(--q-font-size-md);
+  color: var(--q-theme-neutral-dark);
+  caret-color: var(--q-theme-neutral-dark);
   
   * {
     
@@ -717,7 +716,7 @@ body {
   height: fit-content;
 }
 .q-avatar {
-  --q-avatar-size: calc(48px * var(--q-density-scale));
+  --q-avatar-size: calc(var(--q-space-1) * 12);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -743,10 +742,10 @@ body {
   }
   
   &--small {
-    --q-avatar-size: calc(32px * var(--q-density-scale));
+    --q-avatar-size: calc(var(--q-space-1) * 8);
   }
   &--large {
-    --q-avatar-size: calc(64px * var(--q-density-scale));
+    --q-avatar-size: calc(var(--q-space-1) * 16);
   }
   
   &--square {
@@ -821,7 +820,7 @@ body {
       border-bottom-left-radius: 0;
       border-color: transparent;
       .q-button__content {
-        padding: calc(0.08rem * var(--q-density-scale));
+        padding: calc(var(--q-space-1) * 0.32);
         border-radius: 9999px;
       }
       &:not(:disabled):hover {
@@ -881,9 +880,9 @@ body {
 }
 .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));
+  --q-badge-indicator-size: var(--q-space-5);
+  --q-badge-indicator-padding: var(--q-space-1);
+  --q-badge-indicator-dot-size: var(--q-space-2);
   flex-wrap: wrap;
   place-content: center center;
   align-items: center;
@@ -964,6 +963,16 @@ body {
     transform-origin: 100% 100%;
   }
 }
+@keyframes q-button-ripple {
+  0% {
+    transform: scale(0);
+    opacity: 0.3;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
 .q-button {
   $this: &;
   --q-button-main-color: var(--q-theme-primary);
@@ -979,6 +988,7 @@ body {
   --q-button-padding-x: var(--q-control-padding-x-sm);
   --q-button-labeled-padding-x: var(--q-control-padding-x-lg);
   --q-button-font-size: var(--q-font-size-md);
+  --q-button-ripple-duration: 0.6s;
   display: inline-flex;
   user-select: none;
   align-items: center;
@@ -1057,6 +1067,15 @@ body {
       color: currentcolor;
     }
   }
+  &__ripple {
+    position: absolute;
+    border-radius: 50%;
+    background-color: currentcolor;
+    opacity: 0;
+    transform: scale(0);
+    pointer-events: none;
+    animation: q-button-ripple var(--q-button-ripple-duration) ease-out;
+  }
   
   &--bold {
     background-color: var(--q-button-main-color);
@@ -1171,6 +1190,14 @@ body {
     min-width: 100%;
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .q-button__ripple {
+    
+    
+    animation-duration: 0.001s;
+    opacity: 0;
+  }
+}
 .q-button-group {
   position: relative;
   display: inline-flex;
@@ -1206,15 +1233,14 @@ body {
   --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-hover: var(--q-shadow-lg);
   --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));
+  --q-card-min-width: calc(var(--q-space-1) * 28);
+  --q-card-min-height: calc(var(--q-space-1) * 20);
   min-width: var(--q-card-min-width);
   min-height: var(--q-card-min-height);
   height: 100%;
@@ -1329,40 +1355,38 @@ body {
   }
   
   &--loading {
-    padding: calc(3rem * var(--q-density-scale)) calc(5rem * var(--q-density-scale));
+    padding: calc(var(--q-space-1) * 12) calc(var(--q-space-1) * 20);
     justify-content: center;
     align-items: center;
   }
   
-  @mixin card-width($width, $multiplier: 1) {
+  @mixin q-card-width($width, $multiplier: 1) {
     &--#{$width} {
       --q-card-width: calc(#{$multiplier} * 5em + #{$multiplier - 1} * var(--q-space-1));
     }
   }
-  @include card-width(medium, 3);
-  @include card-width(large, 4);
-  @include card-width(xlarge, 6);
-  @include card-width(xxlarge, 8);
+  @include q-card-width(medium, 3);
+  @include q-card-width(large, 4);
+  @include q-card-width(xlarge, 6);
+  @include q-card-width(xxlarge, 8);
   &--block {
     --q-card-width: 100%;
   }
 }
-$q-carousel-height: 360px;
-$q-carousel-height-md: 300px;
 .q-carousel {
-  --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-height: calc(var(--q-space-1) * 90);
+  --q-carousel-control-size: calc(var(--q-space-1) * 12);
+  --q-carousel-control-icon-size: var(--q-icon-size-lg);
+  --q-carousel-control-inset: var(--q-space-4);
+  --q-carousel-caption-bottom: calc(var(--q-space-1) * 14);
+  --q-carousel-indicator-width: calc(var(--q-space-1) * 7.5);
+  --q-carousel-indicator-height: var(--q-space-1);
+  --q-carousel-indicator-gap: var(--q-space-2);
+  --q-carousel-indicators-bottom: var(--q-space-4);
   --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));
+  --q-carousel-skeleton-gap: var(--q-space-2);
+  --q-carousel-skeleton-inset: var(--q-space-4);
   position: relative;
   overflow: hidden;
   width: 100%;
@@ -1429,7 +1453,7 @@ $q-carousel-height-md: 300px;
   position: relative; 
   width: var(--q-carousel-indicator-width);
   height: var(--q-carousel-indicator-height);
-  border-radius: calc(2px * var(--q-density-scale));
+  border-radius: calc(var(--q-space-1) * 0.5);
   background-color: rgb(255 255 255 / 50%);
   cursor: pointer;
   transition: all 0.3s ease;
@@ -1525,11 +1549,11 @@ $q-carousel-height-md: 300px;
 }
 @media (max-width: $breakpoint-md) {
   .q-carousel {
-    --q-carousel-height: calc(#{$q-carousel-height-md} * var(--q-density-scale));
+    --q-carousel-height: calc(var(--q-space-1) * 75);
     --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-control-inset: var(--q-space-2);
+    --q-carousel-caption-bottom: calc(var(--q-space-1) * 12);
     --q-carousel-title-size: calc(var(--q-font-size-lg) * 1.5);
     --q-carousel-subtitle-size: var(--q-font-size-lg);
   }
@@ -1556,7 +1580,7 @@ $q-carousel-height-md: 300px;
   --q-transition-duration: 0.15s;
   display: flex;
   align-items: center;
-  gap: calc(0.5rem * var(--q-density-scale));
+  gap: var(--q-space-2);
   width: fit-content;
   box-sizing: border-box;
   min-height: var(--q-interactive-height);
@@ -1627,14 +1651,14 @@ $q-carousel-height-md: 300px;
   
   @include q-size-modifiers;
   
-  @mixin color-variant($color) {
+  @mixin q-color-variant($color) {
     &--#{$color} {
       --q-active-color: var(--q-theme-#{$color});
       --q-icon-color: var(--q-theme-on-#{$color});
     }
   }
   @each $color in (primary, info, success, warning, danger) {
-    @include color-variant($color);
+    @include q-color-variant($color);
   }
   
   &--checked,
@@ -1693,8 +1717,8 @@ $q-carousel-height-md: 300px;
 }
 .q-collapsible {
   $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));
+  --q-collapsible-btn-padding: var(--q-space-1);
+  --q-collapsible-header-padding: calc(var(--q-space-1) * 2.2);
   display: flex;
   flex-direction: column;
   overflow-wrap: break-word;
@@ -1746,7 +1770,7 @@ $q-carousel-height-md: 300px;
       display: flex;
       flex-direction: column;
       align-items: start;
-      letter-spacing: calc(0.02rem * var(--q-density-scale));
+      letter-spacing: calc(var(--q-space-1) * 0.08);
       h4 {
         margin: 0;
         font-size: var(--q-font-size-md);
@@ -1758,7 +1782,7 @@ $q-carousel-height-md: 300px;
   &__title {
     display: flex;
     width: 100%;
-    gap: calc(0.2rem * var(--q-density-scale));
+    gap: var(--q-space-1);
     position: relative;
     text-align: start;
     align-items: center;
@@ -1768,7 +1792,7 @@ $q-carousel-height-md: 300px;
     }
   }
   &__subtitle {
-    margin-left: calc(1.25rem * var(--q-density-scale));
+    margin-left: var(--q-space-5);
     text-align: start;
     line-height: var(--q-line-height-sm);
     font-size: var(--q-font-size-sm);
@@ -1776,11 +1800,11 @@ $q-carousel-height-md: 300px;
     white-space: nowrap;
     color: var(--q-theme-neutral);
     padding: 0;
-    padding-top: calc(0.3rem * var(--q-density-scale));
+    padding-top: var(--q-space-1);
   }
   &__content {
     padding: var(--q-space-4);
-    padding-top: calc(0.75rem * var(--q-density-scale));
+    padding-top: var(--q-space-3);
     &-wrapper {
       display: grid;
       grid-template-rows: 0fr;
@@ -1819,13 +1843,13 @@ $q-carousel-height-md: 300px;
     }
   }
   
-  @mixin header-spacing($spacing, $increment) {
+  @mixin q-header-spacing($spacing, $increment) {
     &--#{$spacing} .q-collapsible__btn.q-button {
       padding: calc(var(--q-collapsible-header-padding) + #{$increment});
     }
   }
-  @include header-spacing(relaxed, var(--q-space-1));
-  @include header-spacing(tight, calc(-1 * var(--q-space-1)));
+  @include q-header-spacing(relaxed, var(--q-space-1));
+  @include q-header-spacing(tight, calc(-1 * var(--q-space-1)));
 }
 .q-color-picker__swatch {
   --q-color-picker-swatch-padding: calc(var(--q-field-padding-y) * 2);
@@ -1861,11 +1885,11 @@ $q-carousel-height-md: 300px;
 }
 .q-date-time-picker__menu {
   --q-date-view-height: 0;
-  width: calc(16rem * var(--q-density-scale));
+  width: calc(var(--q-space-1) * 64);
   display: flex;
   flex-direction: column;
   background-color: var(--q-theme-container);
-  color: var(--q-theme-on-background);
+  color: var(--q-theme-neutral-dark);
   border-radius: var(--q-border-radius);
   gap: var(--q-space-1);
   padding: var(--q-space-2);
@@ -1923,8 +1947,8 @@ $q-carousel-height-md: 300px;
 .q-date-time-picker__year-grid {
   overflow: auto;
   
-  margin: 0 calc(-3px * var(--q-density-scale));
-  padding: calc(3px * var(--q-density-scale));
+  margin: 0 calc(var(--q-space-1) * -0.75);
+  padding: calc(var(--q-space-1) * 0.75);
 }
 .q-date-time-picker__calendar {
   display: flex;
@@ -2035,7 +2059,7 @@ $q-carousel-height-md: 300px;
         }
       }
       .q-date-time-picker__time-number {
-        width: calc(3rem * var(--q-density-scale));
+        width: calc(var(--q-space-1) * 12);
         border-radius: 0;
         .q-field__control {
           border: none;
@@ -2180,8 +2204,8 @@ $q-carousel-height-md: 300px;
   }
   
   &--horizontal.q-divider--inset {
-    max-width: calc(100% - (72px * var(--q-density-scale)));
-    margin-inline-start: calc(72px * var(--q-density-scale));
+    max-width: calc(100% - (var(--q-space-1) * 18));
+    margin-inline-start: calc(var(--q-space-1) * 18);
   }
   
   &--vertical {
@@ -2214,12 +2238,12 @@ $q-carousel-height-md: 300px;
   &--vertical.q-divider--inset {
     margin-bottom: var(--q-space-2);
     margin-top: var(--q-space-2);
-    max-height: calc(100% - (16px * var(--q-density-scale)));
+    max-height: calc(100% - var(--q-space-4));
   }
 }
 .q-dropdown-menu {
   &__body {
-    min-width: calc(8rem * var(--q-density-scale));
+    min-width: calc(var(--q-space-1) * 32);
     .q-list-item-group {
       padding: var(--q-space-1);
       & + .q-list-item-group {
@@ -2279,12 +2303,12 @@ $q-carousel-height-md: 300px;
   }
   &__prepend {
     padding-right: var(--q-space-1);
-    padding-left: calc(2px * var(--q-density-scale));
+    padding-left: calc(var(--q-space-1) * 0.5);
   }
   &__append {
     margin-left: auto;
     padding-left: var(--q-space-1);
-    padding-right: calc(2px * var(--q-density-scale));
+    padding-right: calc(var(--q-space-1) * 0.5);
   }
   
   &--readonly {
@@ -2323,7 +2347,7 @@ $q-carousel-height-md: 300px;
     }
   }
   
-  @mixin field-size($size, $multiplier: 1) {
+  @mixin q-field-size($size, $multiplier: 1) {
     &--#{$size} {
       > #{$this}__control {
         width: calc(#{$multiplier} * 5em + #{$multiplier - 1} * var(--q-space-1));
@@ -2331,19 +2355,19 @@ $q-carousel-height-md: 300px;
       }
     }
   }
-  @include field-size(mini, 1);
-  @include field-size(small, 2);
-  @include field-size(medium, 3);
-  @include field-size(large, 4);
-  @include field-size(xlarge, 6);
-  @include field-size(xxlarge, 8);
+  @include q-field-size(mini, 1);
+  @include q-field-size(small, 2);
+  @include q-field-size(medium, 3);
+  @include q-field-size(large, 4);
+  @include q-field-size(xlarge, 6);
+  @include q-field-size(xxlarge, 8);
   &--block {
     width: 100%;
   }
 }
 .q-file-input {
   $this: &;
-  --q-file-input-preview-side: calc(3rem * var(--q-density-scale));
+  --q-file-input-preview-side: calc(var(--q-space-1) * 12);
   --q-file-input-preview-padding: var(--q-space-3);
   
   &.q-field__control {
@@ -2450,15 +2474,15 @@ $q-carousel-height-md: 300px;
 .q-gauge {
   display: flex;
   width: 100%;
-  min-width: min(calc(14rem * var(--q-density-scale)), 100%);
+  min-width: min(calc(var(--q-space-1) * 56), 100%);
   flex-direction: column;
   align-items: center;
-  padding: var(--q-space-4) var(--q-space-4) calc(1.125rem * var(--q-density-scale));
+  padding: var(--q-space-4) var(--q-space-4) calc(var(--q-space-1) * 4.5);
   border: var(--q-border-width) solid var(--q-border-color);
   border-radius: var(--q-border-radius);
   background-color: var(--q-theme-container);
   box-shadow: var(--q-shadow-sm);
-  color: var(--q-theme-on-background);
+  color: var(--q-theme-neutral-dark);
   &__label {
     width: 100%;
     overflow: hidden;
@@ -2472,7 +2496,7 @@ $q-carousel-height-md: 300px;
   }
   &__visual {
     width: 100%;
-    max-width: calc(18rem * var(--q-density-scale));
+    max-width: calc(var(--q-space-1) * 72);
     margin-top: var(--q-space-1);
   }
   &__svg {
@@ -2561,10 +2585,7 @@ $q-carousel-height-md: 300px;
   }
   &__hub {
     fill: var(--q-theme-container);
-    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%)
-    );
+    filter: drop-shadow(var(--q-shadow-lg));
     stroke: rgb(var(--q-theme-neutral-light-rgb) / 65%);
     stroke-width: 1;
   }
@@ -2573,11 +2594,11 @@ $q-carousel-height-md: 300px;
   }
   &__value-row {
     display: flex;
-    min-height: calc(1.75rem * var(--q-density-scale));
+    min-height: calc(var(--q-space-1) * 7);
     align-items: baseline;
     justify-content: center;
     gap: var(--q-space-1);
-    margin-top: calc(-0.25rem * var(--q-density-scale));
+    margin-top: calc(var(--q-space-1) * -1);
   }
   &__value {
     color: var(--q-theme-neutral-dark);
@@ -2592,7 +2613,7 @@ $q-carousel-height-md: 300px;
   &__secondary {
     color: var(--q-theme-neutral);
     font-size: var(--q-font-size-sm);
-    min-height: calc(1.125rem * var(--q-density-scale));
+    min-height: calc(var(--q-space-1) * 4.5);
     margin-top: var(--q-space-1);
     text-align: center;
   }
@@ -2601,8 +2622,8 @@ $q-carousel-height-md: 300px;
     width: 100%;
     flex-wrap: wrap;
     justify-content: center;
-    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;
+    gap: calc(var(--q-space-1) * 1.5) var(--q-space-3);
+    margin: var(--q-space-3) 0 0;
     padding: 0;
     list-style: none;
   }
@@ -2610,7 +2631,7 @@ $q-carousel-height-md: 300px;
     display: inline-flex;
     min-width: 0;
     align-items: center;
-    gap: calc(0.3125rem * var(--q-density-scale));
+    gap: calc(var(--q-space-1) * 1.25);
     color: var(--q-theme-neutral);
     font-size: var(--q-font-size-sm);
     line-height: 1.2;
@@ -2620,17 +2641,17 @@ $q-carousel-height-md: 300px;
     font-weight: var(--q-font-weight-bold);
   }
   &__legend-swatch {
-    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));
+    width: var(--q-space-3);
+    height: var(--q-space-3);
+    flex: 0 0 var(--q-space-3);
     border: var(--q-border-width) solid rgb(var(--q-theme-neutral-dark-rgb) / 12%);
-    border-radius: calc(0.125rem * var(--q-density-scale));
+    border-radius: calc(var(--q-space-1) * 0.5);
   }
   &__legend-target {
-    width: calc(1rem * var(--q-density-scale));
+    width: var(--q-space-4);
     height: 0;
-    flex: 0 0 calc(1rem * var(--q-density-scale));
-    border-top: calc(0.1875rem * var(--q-density-scale)) solid var(--q-theme-success);
+    flex: 0 0 var(--q-space-4);
+    border-top: calc(var(--q-space-1) * 0.75) solid var(--q-theme-success);
     border-radius: 999px;
   }
   &__legend-target--missed {
@@ -2650,8 +2671,8 @@ $q-carousel-height-md: 300px;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
-  padding-left: calc(16px * var(--q-density-scale));
-  padding-right: calc(16px * var(--q-density-scale));
+  padding-left: var(--q-space-4);
+  padding-right: var(--q-space-4);
 }
 .q-container--fluid {
   max-width: 100%;
@@ -2736,7 +2757,7 @@ $q-carousel-height-md: 300px;
   width: auto;
   max-width: 100%;
 }
-@mixin generate-cols($infix: '') {
+@mixin q-generate-cols($infix: '') {
   @for $i from 1 through 12 {
     $width: math.div($i, 12) * 100%;
     .q-col#{$infix}-#{$i} {
@@ -2745,21 +2766,21 @@ $q-carousel-height-md: 300px;
     }
   }
 }
-@include generate-cols;
+@include q-generate-cols;
 @media (min-width: $breakpoint-sm) {
-  @include generate-cols('-sm');
+  @include q-generate-cols('-sm');
 }
 @media (min-width: $breakpoint-md) {
-  @include generate-cols('-md');
+  @include q-generate-cols('-md');
 }
 @media (min-width: $breakpoint-lg) {
-  @include generate-cols('-lg');
+  @include q-generate-cols('-lg');
 }
 @media (min-width: $breakpoint-xl) {
-  @include generate-cols('-xl');
+  @include q-generate-cols('-xl');
 }
 @media (min-width: $breakpoint-xxl) {
-  @include generate-cols('-xxl');
+  @include q-generate-cols('-xxl');
 }
 
 .q-spacer {
@@ -2880,6 +2901,9 @@ $q-spacing-sides: (
     width: var(--q-icon-size-md);
     height: var(--q-icon-size-md);
   }
+  &__font {
+    font-size: 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%);
@@ -2909,7 +2933,7 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
     height: inherit;
     > * {
       border-radius: 0;
-      min-width: calc(40px * var(--q-density-scale));
+      min-width: calc(var(--q-space-1) * 10);
       height: 100%;
       justify-content: center;
     }
@@ -2923,7 +2947,7 @@ $input-group-addon-background: rgb(var(--q-theme-neutral-light-rgb) / 25%);
       background-color: $input-group-addon-background;
       color: $input-group-addon-color;
       white-space: nowrap;
-      padding: 0 calc(0.4rem * var(--q-density-scale));
+      padding: 0 calc(var(--q-space-1) * 1.6);
     }
     > * + * {
       margin-left: -1px;
@@ -2984,7 +3008,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: calc(4px * var(--q-density-scale));
+  --q-line-loader-height: var(--q-space-1);
   --q-line-loader-color: var(--q-theme-primary-rgb);
   width: 100%;
   height: $q-line-loader-height;
@@ -3042,8 +3066,6 @@ $q-line-loader-color: var(--q-line-loader-color);
 }
 .q-list-item {
   $this: &;
-  
-  $control-height: var(--q-selection-control-size);
   display: flex;
   gap: var(--q-space-1);
   align-items: center;
@@ -3102,7 +3124,7 @@ $q-line-loader-color: var(--q-line-loader-color);
     align-items: center;
     margin-left: auto;
     min-width: 1em;
-    min-height: $control-height;
+    min-height: var(--q-selection-control-size);
     align-self: center;
     &--top {
       align-self: flex-start;
@@ -3149,7 +3171,7 @@ $q-line-loader-color: var(--q-line-loader-color);
   &__track {
     position: relative;
     width: 100%;
-    height: calc(0.5rem * var(--q-density-scale));
+    height: var(--q-space-2);
     overflow: hidden;
     border-radius: var(--q-border-radius);
     background-color: rgb(var(--q-theme-neutral-light-rgb) / 50%);
@@ -3226,17 +3248,16 @@ $q-line-loader-color: var(--q-line-loader-color);
       color: var(--q-theme-primary);
     }
     .q-obfuscation__icon.q-icon {
-      width: 1em;
-      height: 1em;
+      width: var(--q-icon-size-sm);
+      height: var(--q-icon-size-sm);
     }
   }
   &__icon.q-icon {
     flex-shrink: 0;
   }
 }
-$q-overflow-fade-size: 2.5rem;
 .q-overflow {
-  --q-overflow-fade-size: calc(#{$q-overflow-fade-size} * var(--q-density-scale));
+  --q-overflow-fade-size: calc(var(--q-space-1) * 10);
   display: flex;
   align-items: stretch;
   min-width: 0;
@@ -3451,13 +3472,13 @@ $q-overflow-fade-size: 2.5rem;
   $this: &;
   
   --q-overlay-bg: var(--q-theme-container);
-  --q-overlay-color: var(--q-theme-on-background);
+  --q-overlay-color: var(--q-theme-neutral-dark);
   --q-overlay-border-color: var(--q-theme-neutral-light);
-  --q-overlay-arrow-gap: calc(8px * var(--q-density-scale));
+  --q-overlay-arrow-gap: var(--q-space-2);
   --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));
+  --q-overlay-arrow-tip-radius: calc(var(--q-space-1) * 0.4);
+  --q-overlay-viewport-inset-x: var(--q-space-4);
+  --q-overlay-viewport-inset-y: calc(var(--q-space-1) * 8);
   position: fixed;
   z-index: var(--q-overlay-z-index);
   max-width: calc(100vw - var(--q-overlay-viewport-inset-x));
@@ -3667,7 +3688,7 @@ $q-overflow-fade-size: 2.5rem;
     color: var(--q-theme-neutral-dark);
   }
   & + .q-select__items {
-    --q-phone-field-country-list-max-height: calc(15rem * var(--q-density-scale));
+    --q-phone-field-country-list-max-height: calc(var(--q-space-1) * 60);
     width: 100%;
     min-width: 0;
     max-height: var(--q-phone-field-country-list-max-height);
@@ -3695,7 +3716,7 @@ $q-overflow-fade-size: 2.5rem;
     position: relative;
     display: flex;
     flex-direction: column;
-    max-width: calc(276px * var(--q-density-scale));
+    max-width: calc(var(--q-space-1) * 69);
     gap: var(--q-space-2);
     padding: var(--q-space-4);
     font-size: var(--q-font-size-sm);
@@ -3716,7 +3737,6 @@ $q-overflow-fade-size: 2.5rem;
     font-size: var(--q-font-size-md);
   }
 }
-$transition-speed: 0.4s !default;
 @keyframes q-progress-move {
   from {
     background-position: 0 0;
@@ -3746,13 +3766,14 @@ $transition-speed: 0.4s !default;
   }
 }
 .q-progress {
+  --q-transition-duration: 0.4s;
   --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-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));
+  --q-progress-bar-height: calc(var(--q-space-1) * 4.8);
+  --q-progress-bar-height-mini: calc(var(--q-space-1) * 1.4);
+  --q-progress-stripe-size: var(--q-space-4);
+  --q-progress-values-gap: calc(var(--q-space-1) * 1.25);
   &__bar {
     display: flex;
     overflow: hidden;
@@ -3776,7 +3797,7 @@ $transition-speed: 0.4s !default;
     text-align: center;
     white-space: nowrap;
     background-color: var(--q-progress-main-color);
-    transition: width $transition-speed ease;
+    transition: width var(--q-transition-duration) var(--q-transition-timing-function);
     &-text {
       position: relative;
       z-index: 1;
@@ -3867,19 +3888,19 @@ $base-border: var(--q-border-width) solid rgb(var(--q-theme-neutral-light-rgb) /
   border-radius: var(--q-border-radius);
   overflow: hidden;
   &-panel {
-    padding: calc(0.4rem * var(--q-density-scale));
+    padding: calc(var(--q-space-1) * 1.6);
     display: flex;
     flex-direction: column;
     overflow-y: auto;
-    min-height: calc(50px * var(--q-density-scale));
-    max-height: calc(80px * var(--q-density-scale));
+    min-height: calc(var(--q-space-1) * 12.5);
+    max-height: calc(var(--q-space-1) * 20);
     gap: var(--q-space-4);
   }
   &--side-panel {
     flex-direction: row;
     .q-property-list-panel {
       border-left: $base-border;
-      width: calc(250px * var(--q-density-scale));
+      width: calc(var(--q-space-1) * 62.5);
       max-height: unset;
     }
   }
@@ -3902,7 +3923,7 @@ $base-border: var(--q-border-width) solid rgb(var(--q-theme-neutral-light-rgb) /
   }
   &__header {
     background: $table-header-bg;
-    height: calc(25px * var(--q-density-scale)); 
+    height: calc(var(--q-space-1) * 6.25); 
   }
   &__row {
     &:hover {
@@ -3939,14 +3960,14 @@ $base-border: var(--q-border-width) solid rgb(var(--q-theme-neutral-light-rgb) /
   &-group {
     cursor: pointer;
     td {
-      padding: calc(0.2rem * var(--q-density-scale)) var(--q-space-1);
+      padding: var(--q-space-1);
     }
     &__content {
       display: flex;
       align-items: center;
     }
     ~ .q-property-list__row .q-property-list__cell-label {
-      padding: 0 calc(2rem * var(--q-density-scale));
+      padding: 0 calc(var(--q-space-1) * 8);
     }
     &--no-toggle {
       cursor: default;
@@ -4061,13 +4082,13 @@ $base-border: var(--q-border-width) solid rgb(var(--q-theme-neutral-light-rgb) /
     }
   }
   
-  @mixin color-variant($color) {
+  @mixin q-color-variant($color) {
     &--#{$color} {
       --q-radio-button-checked-color: var(--q-theme-#{$color});
     }
   }
   @each $color in (primary, info, success, warning, danger) {
-    @include color-variant($color);
+    @include q-color-variant($color);
   }
   
   &--disabled {
@@ -4190,7 +4211,7 @@ $base-border: var(--q-border-width) solid rgb(var(--q-theme-neutral-light-rgb) /
       position: absolute;
       top: 0;
       left: 0;
-      height: calc(30px * var(--q-density-scale));
+      height: calc(var(--q-space-1) * 7.5);
       width: 100%;
       content: '';
       background-color: rgb(var(--q-theme-neutral-light-rgb) / 25%);
@@ -4203,19 +4224,19 @@ $base-border: var(--q-border-width) solid rgb(var(--q-theme-neutral-light-rgb) /
       font-weight: 700;
       line-height: var(--q-line-height-md);
       letter-spacing: var(--q-letter-spacing-sm);
-      color: var(--q-theme-on-background);
+      color: var(--q-theme-neutral-dark);
       text-transform: none;
       z-index: 10;
       position: relative;
     }
     > #{$this}__content {
-      padding: calc(0.2rem * var(--q-density-scale)) var(--q-space-4) var(--q-space-4);
+      padding: var(--q-space-1) var(--q-space-4) var(--q-space-4);
     }
   }
   &--subsection {
     border: none;
-    margin-left: calc(0.625rem * var(--q-density-scale));
-    margin-bottom: calc(0.625rem * var(--q-density-scale));
+    margin-left: calc(var(--q-space-1) * 2.5);
+    margin-bottom: calc(var(--q-space-1) * 2.5);
     #{$this}__title {
       font-size: var(--q-section-minor-title-size);
       line-height: var(--q-line-height-md);
@@ -4333,7 +4354,7 @@ $base-border: var(--q-border-width) solid rgb(var(--q-theme-neutral-light-rgb) /
   &__items {
     min-width: fit-content;
     width: 100%;
-    max-height: calc(240px * var(--q-density-scale));
+    max-height: calc(var(--q-space-1) * 60);
     align-items: start;
   }
   &__loader {
@@ -4355,7 +4376,6 @@ $sidebar-size-medium: 27rem;
 $sidebar-size-large: 35rem;
 $sidebar-size-xlarge: 50%;
 $sidebar-size-block: 100%;
-$sidebar-border-color: rgb(var(--q-theme-neutral-rgb) / 25%);
 $sidebar-sizes: (
   small: $sidebar-size-small,
   medium: $sidebar-size-medium,
@@ -4363,7 +4383,7 @@ $sidebar-sizes: (
   xlarge: $sidebar-size-xlarge,
   block: $sidebar-size-block
 );
-@mixin sidebar-size-modifiers($prefix, $property) {
+@mixin q-sidebar-size-modifiers($prefix, $property) {
   @each $size, $value in $sidebar-sizes {
     $suffix: if($prefix == '', $size, '#{$prefix}-#{$size}');
     .q-sidebar--expanded.q-sidebar--#{$suffix} {
@@ -4372,6 +4392,7 @@ $sidebar-sizes: (
   }
 }
 .q-sidebar {
+  --q-sidebar-border-color: rgb(var(--q-theme-neutral-rgb) / 25%);
   height: 100%;
   display: flex;
   overflow: hidden;
@@ -4396,7 +4417,7 @@ $sidebar-sizes: (
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  width: calc(50px * var(--q-density-scale));
+  width: calc(var(--q-space-1) * 12.5);
   background-color: var(--q-theme-container);
   z-index: 10;
 }
@@ -4411,8 +4432,8 @@ $sidebar-sizes: (
   aspect-ratio: 1;
   border-radius: 0;
   border-width: 0;
-  border-bottom-width: 1px;
-  border-bottom-color: $sidebar-border-color !important;
+  border-bottom-width: var(--q-border-width);
+  border-bottom-color: var(--q-sidebar-border-color) !important;
   font-size: calc(var(--q-font-size-sm) * 0.8);
   .q-icon {
     font-size: var(--q-icon-size-lg);
@@ -4461,7 +4482,7 @@ $sidebar-sizes: (
 .q-sidebar-panel__handle {
   position: absolute;
   top: 0;
-  width: calc(10px * var(--q-density-scale));
+  width: calc(var(--q-space-1) * 2.5);
   height: 100%;
   cursor: ew-resize;
   display: flex;
@@ -4478,30 +4499,36 @@ $sidebar-sizes: (
   width: var(--q-space-1);
   height: var(--q-space-6);
   background-color: var(--q-theme-neutral);
-  border-radius: calc(2px * var(--q-density-scale));
+  border-radius: calc(var(--q-space-1) * 0.5);
 }
-@include sidebar-size-modifiers('', width);
-@include sidebar-size-modifiers('min', min-width);
-@include sidebar-size-modifiers('max', max-width);
+@include q-sidebar-size-modifiers('', width);
+@include q-sidebar-size-modifiers('min', min-width);
+@include q-sidebar-size-modifiers('max', max-width);
 .q-sidebar--right {
-  right: 0;
+  box-shadow: calc(var(--q-space-1) * -0.5) 0 var(--q-space-2)
+    rgb(var(--q-theme-neutral-dark-rgb) / 15%);
   flex-direction: row-reverse;
-}
-.q-sidebar--left .q-sidebar__indicator {
-  left: 0;
-}
-.q-sidebar--right .q-sidebar__indicator {
   right: 0;
+  .q-sidebar-panel,
+  .q-sidebar-anchor {
+    border-left-width: var(--q-border-width);
+    border-left-color: var(--q-sidebar-border-color);
+  }
+  .q-sidebar__indicator {
+    right: 0;
+  }
 }
-.q-sidebar--left .q-sidebar-panel,
-.q-sidebar--left .q-sidebar-anchor {
-  border-right-width: 1px;
-  border-right-color: $sidebar-border-color;
-}
-.q-sidebar--right .q-sidebar-panel,
-.q-sidebar--right .q-sidebar-anchor {
-  border-left-width: 1px;
-  border-left-color: $sidebar-border-color;
+.q-sidebar--left {
+  box-shadow: calc(var(--q-space-1) * 0.5) 0 var(--q-space-2)
+    rgb(var(--q-theme-neutral-dark-rgb) / 15%);
+  .q-sidebar-panel,
+  .q-sidebar-anchor {
+    border-right-width: var(--q-border-width);
+    border-right-color: var(--q-sidebar-border-color);
+  }
+  .q-sidebar__indicator {
+    left: 0;
+  }
 }
 @media (prefers-reduced-motion: reduce) {
   .q-sidebar__indicator {
@@ -4562,7 +4589,7 @@ $sidebar-sizes: (
 }
 $spinner-color: var(--q-theme-primary);
 .q-spinner-loader {
-  font-size: calc(48px * var(--q-density-scale));
+  font-size: calc(var(--q-space-1) * 12);
   width: 1em;
   padding: 0.15em;
   aspect-ratio: 1;
@@ -4585,13 +4612,13 @@ $spinner-color: var(--q-theme-primary);
   
   
   
-  --q-switch-inner-padding: calc(2px * var(--q-density-scale));
+  --q-switch-inner-padding: calc(var(--q-space-1) * 0.5);
   --q-switch-border-radius: 9999px; 
   --q-switch-transition-duration: 0.15s;
   --q-switch-transition-easing: ease-out;
   
-  --q-switch-label-padding-v: calc(10px * var(--q-density-scale));
-  --q-switch-label-padding-h: calc(15px * var(--q-density-scale));
+  --q-switch-label-padding-v: calc(var(--q-space-1) * 2.5);
+  --q-switch-label-padding-h: calc(var(--q-space-1) * 3.75);
   --q-switch-font-size: var(--q-font-size-sm);
   
   --q-switch-label-block-size: calc(
@@ -4607,15 +4634,15 @@ $spinner-color: var(--q-theme-primary);
   
   --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: 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-blur-base: calc(var(--q-space-1) * 0.75);
+  --q-switch-shadow-offset-y: calc(var(--q-space-1) * 0.25);
+  --q-switch-shadow-spread: calc(var(--q-space-1) * 0.5);
   
   --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: 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-shadow-blur-hover: calc(var(--q-space-1) * 1.5);
+  --q-switch-shadow-offset-y-hover: calc(var(--q-space-1) * 0.5);
+  --q-switch-shadow-spread-hover: var(--q-space-1);
   
   --q-switch-disabled-opacity: 0.5;
   --q-switch-hover-background-opacity: 0.5;
@@ -4727,9 +4754,7 @@ $spinner-color: var(--q-theme-primary);
   padding-left: var(--q-switch-label-padding-v);
 }
 .q-switch--with-labels {
-  --q-switch-label-padding-v: calc(
-    4px * var(--q-density-scale)
-  ); 
+  --q-switch-label-padding-v: var(--q-space-1); 
   .q-switch__label {
     padding: var(--q-switch-label-padding-v) var(--q-switch-label-padding-h); 
   }
@@ -4788,7 +4813,7 @@ $spinner-color: var(--q-theme-primary);
   }
 }
 .q-tabs {
-  --q-tabs-indicator-thickness: calc(4px * var(--q-density-scale));
+  --q-tabs-indicator-thickness: var(--q-space-1);
   display: flex;
   gap: 0;
   &--horizontal {
@@ -5053,7 +5078,7 @@ $spinner-color: var(--q-theme-primary);
   border: 0;
   padding: var(--q-control-padding-y-lg) var(--q-control-padding-x-lg);
   &.q-button.q-button--text {
-    color: var(--q-theme-on-background);
+    color: var(--q-theme-neutral-dark);
   }
   &--active.q-button.q-button--text {
     color: var(--q-theme-primary);
@@ -5100,7 +5125,7 @@ $spinner-color: var(--q-theme-primary);
     color: inherit;
     background-color: transparent;
     padding: 0;
-    min-height: calc(2.5rem * var(--q-density-scale));
+    min-height: calc(var(--q-space-1) * 10);
     resize: vertical;
     font-family: inherit;
     font-size: inherit;
@@ -5116,15 +5141,15 @@ $spinner-color: var(--q-theme-primary);
       cursor: inherit;
     }
     
-    @mixin resize-attr($direction) {
+    @mixin q-resize-attr($direction) {
       &[resize='#{$direction}'] {
         resize: $direction;
       }
     }
-    @include resize-attr(none);
-    @include resize-attr(horizontal);
-    @include resize-attr(vertical);
-    @include resize-attr(both);
+    @include q-resize-attr(none);
+    @include q-resize-attr(horizontal);
+    @include q-resize-attr(vertical);
+    @include q-resize-attr(both);
   }
   .q-text-area__input {
     flex: 1;
@@ -5165,23 +5190,14 @@ $spinner-color: var(--q-theme-primary);
 }
 .q-theme-provider {
   background: var(--q-theme-background);
-  color: var(--q-theme-on-background);
-  caret-color: var(--q-theme-on-background);
-}
-$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(
-  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;
+  color: var(--q-theme-neutral-dark);
+  caret-color: var(--q-theme-neutral-dark);
+}
 .q-toaster {
+  --q-toast-duration: 0.3s;
+  --q-toast-duration-leave: 0.24s; 
+  --q-toast-spacing-buffer: clamp(var(--q-space-4), 4vw, calc(var(--q-space-1) * 10));
+  --q-toast-slide-distance: clamp(var(--q-space-4), 3vw, var(--q-space-6));
   position: fixed;
   z-index: 9999;
   inset: 0;
@@ -5214,7 +5230,8 @@ $q-toast-slide-distance: clamp(
   --q-toast-main-color: var(--q-theme-info);
   --q-toast-on-main-color: var(--q-theme-on-info);
   --q-toast-tonal-color: var(--q-theme-info-light);
-  max-width: #{$q-toast-width};
+  --q-toast-width: calc(8 * 5em + 7 * var(--q-space-1)); 
+  max-width: var(--q-toast-width);
   &.q-card {
     --q-card-base-padding: 0;
     --q-card-padding: 0;
@@ -5263,66 +5280,66 @@ $q-toast-slide-distance: clamp(
     color: var(--q-toast-main-color);
   }
 }
-.toast-stack-enter-active {
+.q-toast-stack-enter-active {
   transition:
-    transform $q-toast-duration cubic-bezier(0.4, 0, 0.2, 1),
-    opacity $q-toast-duration cubic-bezier(0.4, 0, 0.2, 1);
+    transform var(--q-toast-duration) cubic-bezier(0.4, 0, 0.2, 1),
+    opacity var(--q-toast-duration) cubic-bezier(0.4, 0, 0.2, 1);
 }
-.toast-stack-leave-active {
+.q-toast-stack-leave-active {
   transition:
-    transform $q-toast-duration-leave cubic-bezier(0.4, 0, 0.2, 1),
-    opacity $q-toast-duration-leave cubic-bezier(0.4, 0, 0.2, 1);
+    transform var(--q-toast-duration-leave) cubic-bezier(0.4, 0, 0.2, 1),
+    opacity var(--q-toast-duration-leave) cubic-bezier(0.4, 0, 0.2, 1);
   will-change: transform, opacity;
 }
-.toast-stack-move {
-  transition: transform $q-toast-duration cubic-bezier(0.4, 0, 0.2, 1);
+.q-toast-stack-move {
+  transition: transform var(--q-toast-duration) cubic-bezier(0.4, 0, 0.2, 1);
 }
-.toast-stack-enter-from {
+.q-toast-stack-enter-from {
   opacity: 0;
-  transform: translateY($q-toast-slide-distance) scale(0.96);
+  transform: translateY(var(--q-toast-slide-distance)) scale(0.96);
 }
-.toast-stack-leave-to[data-placement*='right'] {
+.q-toast-stack-leave-to[data-placement*='right'] {
   opacity: 0;
-  transform: translateX(calc(100% + $q-toast-spacing-buffer)) scale(0.94);
+  transform: translateX(calc(100% + var(--q-toast-spacing-buffer))) scale(0.94);
 }
-.toast-stack-leave-to[data-placement*='left'] {
+.q-toast-stack-leave-to[data-placement*='left'] {
   opacity: 0;
-  transform: translateX(calc(-100% - $q-toast-spacing-buffer)) scale(0.94);
+  transform: translateX(calc(-100% - var(--q-toast-spacing-buffer))) scale(0.94);
 }
-.toast-stack-leave-to[data-placement^='top'] {
+.q-toast-stack-leave-to[data-placement^='top'] {
   opacity: 0;
-  transform: translateY(calc(-1 * $q-toast-slide-distance)) scale(0.94);
+  transform: translateY(calc(-1 * var(--q-toast-slide-distance))) scale(0.94);
 }
-.toast-stack-leave-to[data-placement^='bottom'] {
+.q-toast-stack-leave-to[data-placement^='bottom'] {
   opacity: 0;
-  transform: translateY($q-toast-slide-distance) scale(0.94);
+  transform: translateY(var(--q-toast-slide-distance)) scale(0.94);
 }
-.toast-stack-leave-to[data-placement$='center'] {
+.q-toast-stack-leave-to[data-placement$='center'] {
   opacity: 0;
   transform: scale(0.92);
 }
-.toast-stack-leave-to {
+.q-toast-stack-leave-to {
   opacity: 0;
   transform: scale(0.94);
 }
 @media (prefers-reduced-motion: reduce) {
-  .toast-stack-enter-active,
-  .toast-stack-leave-active,
-  .toast-stack-move {
+  .q-toast-stack-enter-active,
+  .q-toast-stack-leave-active,
+  .q-toast-stack-move {
     transition-duration: 0.1s;
     transition-timing-function: ease;
   }
-  .toast-stack-enter-from,
-  .toast-stack-leave-to {
+  .q-toast-stack-enter-from,
+  .q-toast-stack-leave-to {
     transform: none;
   }
 }
-.toast-stack-enter-active,
-.toast-stack-leave-active {
+.q-toast-stack-enter-active,
+.q-toast-stack-leave-active {
   will-change: transform, opacity;
 }
-.toast-stack-enter-to,
-.toast-stack-leave-to {
+.q-toast-stack-enter-to,
+.q-toast-stack-leave-to {
   will-change: auto;
 }
 .q-toggle {
@@ -5355,6 +5372,6 @@ $q-toast-slide-distance: clamp(
     word-spacing: normal;
     white-space: normal;
     letter-spacing: normal;
-    max-width: calc(200px * var(--q-density-scale));
+    max-width: calc(var(--q-space-1) * 50);
   }
 }