@quidgest/ui 0.24.0 → 0.25.0

package/dist/ui.css

@@ -1310,14 +1310,13 @@ to ensure consistent appearance across different browsers.
  * Affix buttons inside fields (clear, chevron) sized to fit the field content box.
  * ~0.6 × interactive height matches main chevron (~19.6px at regular 32px).
  */
-/* global settings */
+/* Global settings */
 :root {
   --q-density: regular;
   /* Base is never overridden by local size modifiers — they multiply this. */
   --q-density-scale-base: 1;
   --q-density-scale: var(--q-density-scale-base);
   /* Static chrome (not density-scaled) */
-  --q-font-size-base: 0.9rem;
   --q-font-weight-regular: 400;
   --q-font-weight-bold: 700;
   --q-font-weight-black: 900;
@@ -1330,21 +1329,21 @@ to ensure consistent appearance across different browsers.
   --q-transition-duration: 0.2s;
   --q-transition-timing-function: ease;
   /* Bases before density (consumed as calc in density tokens), overridable from outside the package */
-  --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-control-height-md-base: 32px;
-  --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-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: 2rem;
+  --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;
@@ -1360,8 +1359,8 @@ to ensure consistent appearance across different browsers.
   --q-icon-size-sm-base: 1em;
   --q-icon-size-md-base: 1.15em;
   --q-icon-size-lg-base: 1.45em;
-  --q-icon-padding-base: 4px;
-  --q-border-radius-base: 4px;
+  --q-icon-padding-base: 0.25rem;
+  --q-border-radius-base: 0.25rem;
   --q-space-1: calc(var(--q-space-1-base) * var(--q-density-scale));
   --q-space-2: calc(var(--q-space-2-base) * var(--q-density-scale));
   --q-space-3: calc(var(--q-space-3-base) * var(--q-density-scale));
@@ -1446,9 +1445,9 @@ to ensure consistent appearance across different browsers.
 
 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);
 }
 body * {
   scrollbar-color: var(--q-scrollbar-thumb) var(--q-scrollbar-track);
@@ -1645,7 +1644,7 @@ body *::-webkit-scrollbar-track {
 }
 
 .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;
@@ -1674,10 +1673,10 @@ body *::-webkit-scrollbar-track {
           user-select: none;
 }
 .q-avatar--small {
-  --q-avatar-size: calc(32px * var(--q-density-scale));
+  --q-avatar-size: calc(var(--q-space-1) * 8);
 }
 .q-avatar--large {
-  --q-avatar-size: calc(64px * var(--q-density-scale));
+  --q-avatar-size: calc(var(--q-space-1) * 16);
 }
 .q-avatar--square {
   border-radius: 0;
@@ -1749,7 +1748,7 @@ body *::-webkit-scrollbar-track {
   border-color: transparent;
 }
 .q-badge:not(:has(button.q-badge__content)) .q-badge__remove.q-button .q-button__content {
-  padding: calc(0.08rem * var(--q-density-scale));
+  padding: calc(var(--q-space-1) * 0.32);
   border-radius: 9999px;
 }
 .q-badge:not(:has(button.q-badge__content)) .q-badge__remove.q-button:not(:disabled):hover {
@@ -1911,9 +1910,9 @@ body *::-webkit-scrollbar-track {
 }
 
 .q-badge-indicator {
-  --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;
@@ -1993,6 +1992,16 @@ body *::-webkit-scrollbar-track {
   transform-origin: 100% 100%;
 }
 
+@keyframes q-button-ripple {
+  0% {
+    transform: scale(0);
+    opacity: 0.3;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
 .q-button {
   --q-button-main-color: var(--q-theme-primary);
   --q-button-main-color-rgb: var(--q-theme-primary-rgb);
@@ -2007,6 +2016,7 @@ body *::-webkit-scrollbar-track {
   --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;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -2080,6 +2090,15 @@ body *::-webkit-scrollbar-track {
   font-size: 1em;
   color: currentcolor;
 }
+.q-button__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;
+}
 .q-button--bold {
   background-color: var(--q-button-main-color);
   border-color: var(--q-button-main-color);
@@ -2289,6 +2308,12 @@ body *::-webkit-scrollbar-track {
   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;
@@ -2326,15 +2351,14 @@ body *::-webkit-scrollbar-track {
   --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%;
@@ -2441,7 +2465,7 @@ body *::-webkit-scrollbar-track {
   --q-card-shadow: var(--q-card-hover);
 }
 .q-card--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;
 }
@@ -2462,19 +2486,19 @@ body *::-webkit-scrollbar-track {
 }
 
 .q-carousel {
-  --q-carousel-height: calc(360px * var(--q-density-scale));
-  --q-carousel-control-size: calc(48px * 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: 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-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%;
@@ -2554,7 +2578,7 @@ body *::-webkit-scrollbar-track {
   position: relative; /* Needed for pseudo-element positioning */
   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: rgba(255, 255, 255, 0.5);
   cursor: pointer;
   transition: all 0.3s ease;
@@ -2665,11 +2689,11 @@ body *::-webkit-scrollbar-track {
 
 @media (max-width: 768px) {
   .q-carousel {
-    --q-carousel-height: calc(300px * 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);
   }
@@ -2697,7 +2721,7 @@ body *::-webkit-scrollbar-track {
   --q-transition-duration: 0.15s;
   display: flex;
   align-items: center;
-  gap: calc(0.5rem * var(--q-density-scale));
+  gap: var(--q-space-2);
   width: -moz-fit-content;
   width: fit-content;
   box-sizing: border-box;
@@ -2942,8 +2966,8 @@ body *::-webkit-scrollbar-track {
   }
 }
 .q-collapsible {
-  --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;
@@ -2992,7 +3016,7 @@ body *::-webkit-scrollbar-track {
   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);
 }
 .q-collapsible__btn.q-button .q-button__content h4 {
   margin: 0;
@@ -3003,7 +3027,7 @@ body *::-webkit-scrollbar-track {
 .q-collapsible__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;
@@ -3013,7 +3037,7 @@ body *::-webkit-scrollbar-track {
   font-weight: 600;
 }
 .q-collapsible__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);
@@ -3021,11 +3045,11 @@ body *::-webkit-scrollbar-track {
   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);
 }
 .q-collapsible__content {
   padding: var(--q-space-4);
-  padding-top: calc(0.75rem * var(--q-density-scale));
+  padding-top: var(--q-space-3);
 }
 .q-collapsible__content-wrapper {
   display: grid;
@@ -3106,11 +3130,11 @@ body *::-webkit-scrollbar-track {
 
 .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);
@@ -3178,8 +3202,8 @@ body *::-webkit-scrollbar-track {
 
 .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 {
@@ -3294,7 +3318,7 @@ body *::-webkit-scrollbar-track {
   border-bottom-right-radius: var(--q-border-radius);
 }
 .q-date-time-picker__time .q-date-time-picker__time-inputs .q-date-time-picker__time-input-group .q-date-time-picker__time-number {
-  width: calc(3rem * var(--q-density-scale));
+  width: calc(var(--q-space-1) * 12);
   border-radius: 0;
 }
 .q-date-time-picker__time .q-date-time-picker__time-inputs .q-date-time-picker__time-input-group .q-date-time-picker__time-number .q-field__control {
@@ -3432,8 +3456,8 @@ body *::-webkit-scrollbar-track {
   white-space: nowrap;
 }
 .q-divider--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);
 }
 .q-divider--vertical {
   display: flex;
@@ -3463,11 +3487,11 @@ body *::-webkit-scrollbar-track {
 .q-divider--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-dropdown-menu__body .q-list-item-group {
   padding: var(--q-space-1);
@@ -3527,12 +3551,12 @@ body *::-webkit-scrollbar-track {
 }
 .q-field__prepend {
   padding-right: var(--q-space-1);
-  padding-left: calc(2px * var(--q-density-scale));
+  padding-left: calc(var(--q-space-1) * 0.5);
 }
 .q-field__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);
 }
 .q-field--readonly > .q-field__control {
   background-color: rgb(var(--q-theme-neutral-light-rgb)/25%);
@@ -3586,7 +3610,7 @@ body *::-webkit-scrollbar-track {
 }
 
 .q-file-input {
-  --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);
   justify-content: center;
   flex-direction: column;
@@ -3689,15 +3713,15 @@ body *::-webkit-scrollbar-track {
 .q-gauge {
   display: flex;
   width: 100%;
-  min-width: min(14rem * var(--q-density-scale), 100%);
+  min-width: min(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);
 }
 .q-gauge__label {
   width: 100%;
@@ -3712,7 +3736,7 @@ body *::-webkit-scrollbar-track {
 }
 .q-gauge__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);
 }
 .q-gauge__svg {
@@ -3797,7 +3821,7 @@ body *::-webkit-scrollbar-track {
 }
 .q-gauge__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;
 }
@@ -3806,11 +3830,11 @@ body *::-webkit-scrollbar-track {
 }
 .q-gauge__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);
 }
 .q-gauge__value {
   color: var(--q-theme-neutral-dark);
@@ -3825,7 +3849,7 @@ body *::-webkit-scrollbar-track {
 .q-gauge__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;
 }
@@ -3834,8 +3858,8 @@ body *::-webkit-scrollbar-track {
   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;
 }
@@ -3843,7 +3867,7 @@ body *::-webkit-scrollbar-track {
   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;
@@ -3853,17 +3877,17 @@ body *::-webkit-scrollbar-track {
   font-weight: var(--q-font-weight-bold);
 }
 .q-gauge__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);
 }
 .q-gauge__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;
 }
 .q-gauge__legend-target--missed {
@@ -3883,8 +3907,8 @@ body *::-webkit-scrollbar-track {
   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);
 }
 
 /* Disable max-width when fluid */
@@ -6257,7 +6281,7 @@ body *::-webkit-scrollbar-track {
 }
 .q-input-group__prepend > *, .q-input-group__append > * {
   border-radius: 0;
-  min-width: calc(40px * var(--q-density-scale));
+  min-width: calc(var(--q-space-1) * 10);
   height: 100%;
   justify-content: center;
 }
@@ -6271,7 +6295,7 @@ body *::-webkit-scrollbar-track {
   background-color: rgb(var(--q-theme-neutral-light-rgb)/25%);
   color: var(--q-theme-primary);
   white-space: nowrap;
-  padding: 0 calc(0.4rem * var(--q-density-scale));
+  padding: 0 calc(var(--q-space-1) * 1.6);
 }
 .q-input-group__prepend > * + *, .q-input-group__append > * + * {
   margin-left: -1px;
@@ -6328,7 +6352,7 @@ body *::-webkit-scrollbar-track {
 }
 
 .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: var(--q-line-loader-height);
@@ -6485,7 +6509,7 @@ body *::-webkit-scrollbar-track {
 .q-meter__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%);
@@ -6568,7 +6592,7 @@ body *::-webkit-scrollbar-track {
 }
 
 .q-overflow {
-  --q-overflow-fade-size: calc(2.5rem * var(--q-density-scale));
+  --q-overflow-fade-size: calc(var(--q-space-1) * 10);
   display: flex;
   align-items: stretch;
   min-width: 0;
@@ -6756,13 +6780,13 @@ body *::-webkit-scrollbar-track {
 
 .q-overlay {
   --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));
@@ -6965,7 +6989,7 @@ body *::-webkit-scrollbar-track {
   color: var(--q-theme-neutral-dark);
 }
 .q-phone-field__search + .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);
@@ -6995,7 +7019,7 @@ body *::-webkit-scrollbar-track {
   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);
@@ -7045,13 +7069,14 @@ body *::-webkit-scrollbar-track {
   }
 }
 .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);
 }
 .q-progress__bar {
   display: flex;
@@ -7076,7 +7101,7 @@ body *::-webkit-scrollbar-track {
   text-align: center;
   white-space: nowrap;
   background-color: var(--q-progress-main-color);
-  transition: width 0.4s ease;
+  transition: width var(--q-transition-duration) var(--q-transition-timing-function);
 }
 .q-progress__fill-text {
   position: relative;
@@ -7143,12 +7168,12 @@ body *::-webkit-scrollbar-track {
   overflow: hidden;
 }
 .q-property-list-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);
 }
 .q-property-list--side-panel {
@@ -7156,7 +7181,7 @@ body *::-webkit-scrollbar-track {
 }
 .q-property-list--side-panel .q-property-list-panel {
   border-left: var(--q-border-width) solid rgb(var(--q-theme-neutral-light-rgb)/50%);
-  width: calc(250px * var(--q-density-scale));
+  width: calc(var(--q-space-1) * 62.5);
   max-height: unset;
 }
 .q-property-list-panel__label {
@@ -7178,7 +7203,7 @@ body *::-webkit-scrollbar-track {
 }
 .q-property-list__header {
   background: rgb(var(--q-theme-neutral-light-rgb)/25%);
-  height: calc(25px * var(--q-density-scale));
+  height: calc(var(--q-space-1) * 6.25);
 }
 .q-property-list__row:hover {
   background-color: rgb(var(--q-theme-primary-light-rgb)/50%);
@@ -7214,14 +7239,14 @@ body *::-webkit-scrollbar-track {
   cursor: pointer;
 }
 .q-property-list-group td {
-  padding: calc(0.2rem * var(--q-density-scale)) var(--q-space-1);
+  padding: var(--q-space-1);
 }
 .q-property-list-group__content {
   display: flex;
   align-items: center;
 }
 .q-property-list-group ~ .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);
 }
 .q-property-list-group--no-toggle {
   cursor: default;
@@ -7562,7 +7587,7 @@ body *::-webkit-scrollbar-track {
   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%);
@@ -7575,18 +7600,18 @@ body *::-webkit-scrollbar-track {
   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;
 }
 .q-section--title-background > .q-section__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);
 }
 .q-section--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);
 }
 .q-section--subsection .q-section__title {
   font-size: var(--q-section-minor-title-size);
@@ -7705,7 +7730,7 @@ body *::-webkit-scrollbar-track {
   min-width: -moz-fit-content;
   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;
 }
 .q-select__loader {
@@ -7721,6 +7746,7 @@ body *::-webkit-scrollbar-track {
 }
 
 .q-sidebar {
+  --q-sidebar-border-color: rgb(var(--q-theme-neutral-rgb) / 25%);
   height: 100%;
   display: flex;
   overflow: hidden;
@@ -7749,7 +7775,7 @@ body *::-webkit-scrollbar-track {
   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;
 }
@@ -7766,8 +7792,8 @@ body *::-webkit-scrollbar-track {
   aspect-ratio: 1;
   border-radius: 0;
   border-width: 0;
-  border-bottom-width: 1px;
-  border-bottom-color: rgb(var(--q-theme-neutral-rgb)/25%) !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-sidebar__item.q-button .q-icon {
@@ -7821,7 +7847,7 @@ body *::-webkit-scrollbar-track {
 .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;
@@ -7841,7 +7867,7 @@ body *::-webkit-scrollbar-track {
   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);
 }
 
 .q-sidebar--expanded.q-sidebar--small {
@@ -7905,28 +7931,29 @@ body *::-webkit-scrollbar-track {
 }
 
 .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;
+  right: 0;
 }
-
-.q-sidebar--left .q-sidebar__indicator {
-  left: 0;
+.q-sidebar--right .q-sidebar-panel,
+.q-sidebar--right .q-sidebar-anchor {
+  border-left-width: var(--q-border-width);
+  border-left-color: var(--q-sidebar-border-color);
 }
-
 .q-sidebar--right .q-sidebar__indicator {
   right: 0;
 }
 
+.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--left .q-sidebar-panel,
 .q-sidebar--left .q-sidebar-anchor {
-  border-right-width: 1px;
-  border-right-color: rgb(var(--q-theme-neutral-rgb)/25%);
+  border-right-width: var(--q-border-width);
+  border-right-color: var(--q-sidebar-border-color);
 }
-
-.q-sidebar--right .q-sidebar-panel,
-.q-sidebar--right .q-sidebar-anchor {
-  border-left-width: 1px;
-  border-left-color: rgb(var(--q-theme-neutral-rgb)/25%);
+.q-sidebar--left .q-sidebar__indicator {
+  left: 0;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -7979,7 +8006,7 @@ body *::-webkit-scrollbar-track {
 }
 
 .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;
@@ -8000,12 +8027,12 @@ body *::-webkit-scrollbar-track {
   }
 }
 .q-switch {
-  --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(
     var(--q-switch-label-padding-v) * 2 + var(--q-switch-font-size)
@@ -8019,14 +8046,14 @@ body *::-webkit-scrollbar-track {
   );
   --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;
   --q-switch-checked-background: var(--q-theme-primary);
@@ -8241,9 +8268,7 @@ body *::-webkit-scrollbar-track {
 }
 
 .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--with-labels .q-switch__label {
   padding: var(--q-switch-label-padding-v) var(--q-switch-label-padding-h);
@@ -8295,7 +8320,7 @@ body *::-webkit-scrollbar-track {
   }
 }
 .q-tabs {
-  --q-tabs-indicator-thickness: calc(4px * var(--q-density-scale));
+  --q-tabs-indicator-thickness: var(--q-space-1);
   display: flex;
   gap: 0;
 }
@@ -8537,7 +8562,7 @@ body *::-webkit-scrollbar-track {
   padding: var(--q-control-padding-y-lg) var(--q-control-padding-x-lg);
 }
 .q-tab.q-button.q-button--text {
-  color: var(--q-theme-on-background);
+  color: var(--q-theme-neutral-dark);
 }
 .q-tab--active.q-button.q-button--text {
   color: var(--q-theme-primary);
@@ -8584,7 +8609,7 @@ body *::-webkit-scrollbar-track {
   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;
@@ -8668,11 +8693,15 @@ body *::-webkit-scrollbar-track {
 
 .q-theme-provider {
   background: var(--q-theme-background);
-  color: var(--q-theme-on-background);
-  caret-color: var(--q-theme-on-background);
+  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;
@@ -8703,7 +8732,8 @@ body *::-webkit-scrollbar-track {
   --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: calc(40em + 7 * var(--q-space-1));
+  --q-toast-width: calc(8 * 5em + 7 * var(--q-space-1));
+  max-width: var(--q-toast-width);
 }
 .q-toast.q-card {
   --q-card-base-padding: 0;
@@ -8750,73 +8780,73 @@ body *::-webkit-scrollbar-track {
   color: var(--q-toast-main-color);
 }
 
-.toast-stack-enter-active {
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+.q-toast-stack-enter-active {
+  transition: 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 {
-  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1);
+.q-toast-stack-leave-active {
+  transition: 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 0.3s 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(clamp(1rem * var(--q-density-scale), 3vw, 1.5rem * var(--q-density-scale))) 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% + clamp(1rem * var(--q-density-scale), 4vw, 2.5rem * var(--q-density-scale)))) 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% - clamp(1rem * var(--q-density-scale), 4vw, 2.5rem * var(--q-density-scale)))) 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 * clamp(1rem * var(--q-density-scale), 3vw, 1.5rem * var(--q-density-scale)))) 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(clamp(1rem * var(--q-density-scale), 3vw, 1.5rem * var(--q-density-scale))) 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;
 }
 
@@ -8848,5 +8878,5 @@ body *::-webkit-scrollbar-track {
   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);
 }