@quidgest/ui 0.7.22 → 0.8.0

package/dist/ui.css

@@ -228,26 +228,29 @@ summary {
 *,
 ::after,
 ::before {
-  border: 0 solid #c4c5ca;
+  border: 0 solid var(--q-theme-neutral-light);
   outline-offset: 1px;
 }
 
 body {
   font-size: 0.9rem;
+  color: var(--q-theme-on-background);
+  caret-color: var(--q-theme-on-background);
 }
 body * {
-  scrollbar-color: #ccc #f1f1f1;
+  scrollbar-color: var(--q-theme-neutral-light) rgb(var(--q-theme-neutral-light-rgb)/0.25);
   scrollbar-width: thin;
 }
 body *::-webkit-scrollbar {
   width: 7px;
+  height: 7px;
 }
 body *::-webkit-scrollbar-thumb {
-  background-color: #ccc;
+  background-color: var(--q-theme-neutral-light);
   border-radius: 0.25rem;
 }
 body *::-webkit-scrollbar-track {
-  background-color: #f1f1f1;
+  background-color: rgb(var(--q-theme-neutral-light-rgb)/0.25);
   border-radius: 0.25rem;
 }
 
@@ -276,12 +279,11 @@ body *::-webkit-scrollbar-track {
   padding: 0.4rem;
   border-width: 1px;
   background-color: transparent;
-  color: var(--q-theme-on-background);
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   border-radius: 0.25rem;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color, box-shadow, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 0.15s;
 }
@@ -294,7 +296,6 @@ body *::-webkit-scrollbar-track {
 }
 .q-btn:focus:not(:focus-visible) {
   outline: 0;
-  box-shadow: none;
 }
 .q-btn__content {
   position: relative;
@@ -312,41 +313,28 @@ body *::-webkit-scrollbar-track {
 .q-btn .q-spinner-loader {
   color: currentColor;
 }
-.q-btn--active {
-  z-index: 2;
-  background-color: var(--q-theme-primary-light);
-}
-.q-btn:disabled {
-  opacity: 0.6;
-}
-.q-btn--loading {
-  cursor: progress;
-}
-.q-btn--loading span {
-  visibility: hidden;
-}
 .q-btn--primary {
-  --box-shadow-tint: var(--q-theme-primary-rgb);
+  --box-shadow-tint: var(--q-theme-primary-dark-rgb);
   background-color: var(--q-theme-primary);
   border-color: var(--q-theme-primary);
-  color: var(--q-theme-on-primary);
+  color: var(--q-theme-background);
 }
 .q-btn--primary:hover:not(:disabled) {
   background-color: var(--q-theme-primary-dark);
   border-color: var(--q-theme-primary-dark);
 }
 .q-btn--secondary {
-  --box-shadow-tint: var(--q-theme-primary-rgb);
+  --box-shadow-tint: var(--q-theme-primary-dark-rgb);
   border-color: currentColor;
   color: var(--q-theme-primary);
 }
 .q-btn--secondary:hover:not(:disabled) {
   background-color: var(--q-theme-primary-dark);
   border-color: var(--q-theme-primary-dark);
-  color: var(--q-theme-on-primary);
+  color: var(--q-theme-background);
 }
 .q-btn--tertiary {
-  --box-shadow-tint: var(--q-theme-primary-rgb);
+  --box-shadow-tint: var(--q-theme-primary-dark-rgb);
   background-color: transparent;
   border-color: transparent;
   color: var(--q-theme-primary);
@@ -355,18 +343,34 @@ body *::-webkit-scrollbar-track {
   color: var(--q-theme-primary-dark);
 }
 .q-btn--danger {
-  --outline-color: var(--q-theme-danger-light);
-  --box-shadow-tint: var(--q-theme-danger-rgb);
+  --box-shadow-tint: var(--q-theme-danger-dark-rgb);
   background-color: var(--q-theme-danger);
   border-color: var(--q-theme-danger);
-  color: var(--q-theme-on-danger);
+  color: var(--q-theme-background);
 }
 .q-btn--danger:hover:not(:disabled) {
   background-color: var(--q-theme-danger-dark);
   border-color: var(--q-theme-danger-dark);
 }
+.q-btn--plain {
+  color: var(--q-theme-on-background);
+}
 .q-btn--plain:hover:not(:disabled) {
-  background-color: rgb(var(--q-theme-on-background-rgb)/0.1);
+  background-color: rgb(var(--q-theme-neutral-rgb)/0.1);
+}
+.q-btn--active {
+  z-index: 2;
+  background-color: rgb(var(--q-theme-primary-light-rgb)/0.5);
+  box-shadow: inset 0 -2px 0 0 currentColor;
+}
+.q-btn:disabled {
+  opacity: 0.6;
+}
+.q-btn--loading {
+  cursor: not-allowed;
+}
+.q-btn--loading span {
+  visibility: hidden;
 }
 .q-btn--small {
   padding: 0.25rem;
@@ -385,10 +389,6 @@ body *::-webkit-scrollbar-track {
 .q-btn--block {
   display: block;
   width: 100%;
-  padding: 0.5rem;
-}
-.q-btn--block span {
-  gap: 0.5rem;
 }
 .q-btn--block + .q-btn--block {
   margin-top: 0.5rem;
@@ -400,12 +400,14 @@ body *::-webkit-scrollbar-track {
 }
 
 .q-btn-group {
+  --box-shadow-tint: 0 0 0;
   position: relative;
   display: inline-flex;
   border-radius: 0.25rem;
 }
 .q-btn-group--elevated {
-  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  --box-shadow-tint: var(--q-theme-primary-rgb);
+  box-shadow: 0 2px 4px -1px rgb(var(--box-shadow-tint)/0.2), 0 4px 5px 0 rgb(var(--box-shadow-tint)/0.14), 0 1px 10px 0 rgb(var(--box-shadow-tint)/0.12);
 }
 .q-btn-group > .q-btn {
   position: relative;
@@ -427,9 +429,9 @@ body *::-webkit-scrollbar-track {
 .q-combobox__clear {
   opacity: 0.5;
 }
-.q-combobox__clear:hover {
-  opacity: 1;
+.q-combobox__clear:hover, .q-combobox__clear:focus {
   cursor: pointer;
+  opacity: 1;
 }
 
 .q-field {
@@ -443,7 +445,7 @@ body *::-webkit-scrollbar-track {
   display: flex;
   gap: 0.25rem;
   align-items: center;
-  color: rgb(var(--q-theme-on-background-rgb)/0.8);
+  color: var(--q-theme-neutral-dark);
   line-height: 1.5;
 }
 .q-field__control {
@@ -458,15 +460,13 @@ body *::-webkit-scrollbar-track {
   line-height: 1.5;
   transition: color var(--transition-duration) var(--transition-timing-function);
 }
-.q-field__control:focus-within {
-  outline: 2px solid rgb(var(--q-theme-info-rgb)/0.5);
-}
 .q-field__extras {
   display: flex;
   gap: 0.25rem;
   align-items: center;
-  color: rgb(var(--q-theme-on-background-rgb)/0.8);
+  color: var(--q-theme-neutral);
   margin-top: 0.25rem;
+  font-size: 0.81rem;
 }
 .q-field__prepend, .q-field__append {
   display: flex;
@@ -481,12 +481,15 @@ body *::-webkit-scrollbar-track {
   color: var(--q-theme-danger);
 }
 .q-field--readonly > .q-field__control {
-  background-color: #f2f5f7;
+  background-color: rgb(var(--q-theme-neutral-light-rgb)/0.25);
 }
 .q-field--disabled > .q-field__control {
   cursor: not-allowed;
   opacity: 0.5;
 }
+.q-field:not(.q-field--disabled) .q-field__control:focus-within {
+  outline: 2px solid rgb(var(--q-theme-info-rgb)/0.5);
+}
 .q-field--mini > .q-field__control {
   width: calc(1 * 5em + 0 * 0.25rem);
 }
@@ -538,7 +541,6 @@ body *::-webkit-scrollbar-track {
   min-width: 40px;
   height: 100%;
   justify-content: center;
-  padding: 0 0.4rem;
 }
 .q-input-group__prepend > span, .q-input-group__append > span {
   display: flex;
@@ -547,9 +549,10 @@ body *::-webkit-scrollbar-track {
   line-height: 1.5;
   font-size: 0.9rem;
   border-width: 1px;
-  background-color: rgb(var(--q-theme-on-background-rgb)/0.1);
+  background-color: rgb(var(--q-theme-neutral-light-rgb)/0.25);
   color: var(--q-theme-primary);
   white-space: nowrap;
+  padding: 0 0.4rem;
 }
 .q-input-group__prepend > * + *, .q-input-group__append > * + * {
   margin-left: -1px;
@@ -560,13 +563,14 @@ body *::-webkit-scrollbar-track {
   height: auto;
   border-width: 0;
   padding: 0;
-}
-.q-input-group > .q-field__control:focus-within {
-  outline: none;
+  outline: none !important;
 }
 .q-input-group > .q-field__control > * {
   border-radius: 0;
 }
+.q-input-group > .q-field__control > *:focus-within {
+  z-index: 2;
+}
 .q-input-group > .q-field__control > :first-child {
   border-top-left-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
@@ -634,7 +638,7 @@ body *::-webkit-scrollbar-track {
   width: inherit;
 }
 .q-list-item-group__title {
-  color: rgb(var(--q-theme-on-background-rgb)/0.62);
+  color: var(--q-theme-neutral);
   padding: 5px 6px;
   line-height: 15px;
   width: inherit;
@@ -665,13 +669,10 @@ body *::-webkit-scrollbar-track {
   opacity: 0.5;
 }
 .q-list-item:hover, .q-list-item:focus-visible, .q-list-item--highlighted {
-  background-color: var(--q-theme-primary-light);
+  background-color: rgb(var(--q-theme-primary-light-rgb)/0.5);
 }
 .q-list-item--selected {
-  background-color: rgb(var(--q-theme-primary-rgb)/0.24);
-}
-.q-list-item--selected:hover, .q-list-item--selected:focus-visible, .q-list-item--selected--highlighted {
-  background-color: rgb(var(--q-theme-primary-rgb)/0.39);
+  background-color: var(--q-theme-primary-light) !important;
 }
 .q-list-item em {
   font-style: normal;
@@ -689,7 +690,7 @@ body *::-webkit-scrollbar-track {
 .q-overlay {
   --q-overlay-bg: var(--q-theme-background);
   --q-overlay-color: var(--q-theme-on-background);
-  --q-overlay-border-color: #c4c5ca;
+  --q-overlay-border-color: var(--q-theme-neutral-light);
   position: absolute;
   z-index: 1070;
 }
@@ -815,7 +816,7 @@ body *::-webkit-scrollbar-track {
   padding: 0.5rem 1rem;
   margin: 0;
   font-size: 0.9rem;
-  background-color: rgb(var(--q-theme-on-background-rgb)/0.04);
+  background-color: rgb(var(--q-theme-neutral-light-rgb)/0.25);
   border-bottom: 1px solid var(--q-overlay-border-color);
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
@@ -825,7 +826,7 @@ body *::-webkit-scrollbar-track {
 }
 
 .q-popover.q-overlay--bottom .q-overlay__arrow::after {
-  border-bottom-color: rgb(var(--q-theme-on-background-rgb)/0.04);
+  border-bottom-color: rgb(var(--q-theme-neutral-light-rgb)/0.25);
 }
 
 .q-select {
@@ -834,8 +835,9 @@ body *::-webkit-scrollbar-track {
 .q-select:not(.q-select--readonly):not(.q-select--disabled) {
   cursor: pointer;
 }
-.q-select:not(.q-select--disabled) .q-select__clear:hover,
-.q-select:not(.q-select--disabled) .q-select__chevron:hover {
+.q-select:not(.q-select--disabled) .q-select__clear:hover, .q-select:not(.q-select--disabled) .q-select__clear:focus,
+.q-select:not(.q-select--disabled) .q-select__chevron:hover,
+.q-select:not(.q-select--disabled) .q-select__chevron:focus {
   opacity: 1;
 }
 .q-select__value, .q-select__placeholder {
@@ -843,11 +845,11 @@ body *::-webkit-scrollbar-track {
   overflow: hidden;
   text-overflow: ellipsis;
   pointer-events: none;
-  min-height: 1.5em;
+  min-height: 1lh;
 }
 .q-select__placeholder {
   font-style: italic;
-  color: rgb(var(--q-theme-on-background-rgb)/0.5);
+  color: var(--q-theme-neutral);
 }
 .q-select--expanded .q-select__chevron {
   transform: rotate(-180deg);
@@ -869,7 +871,7 @@ body *::-webkit-scrollbar-track {
 .q-select__body {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: start;
   gap: 0.25rem;
   width: 100%;
   padding: 0.25rem 0;
@@ -889,6 +891,12 @@ body *::-webkit-scrollbar-track {
   align-items: start;
 }
 
+.q-select__loader {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
 .q-select__loader,
 .q-select__empty {
   margin: 1rem 0;
@@ -959,17 +967,18 @@ body *::-webkit-scrollbar-track {
   width: 100%;
   line-height: inherit;
   outline: none;
+  color: inherit;
   background-color: transparent;
   cursor: inherit;
   padding: 0;
 }
 .q-text-field__input::-moz-placeholder {
   font-style: italic;
-  color: rgb(var(--q-theme-on-background-rgb)/0.5);
+  color: var(--q-theme-neutral);
 }
 .q-text-field__input::placeholder {
   font-style: italic;
-  color: rgb(var(--q-theme-on-background-rgb)/0.5);
+  color: var(--q-theme-neutral);
 }
 .q-text-field__input:disabled {
   -webkit-user-select: none;
@@ -977,11 +986,9 @@ body *::-webkit-scrollbar-track {
           user-select: none;
 }
 
-.q-text-field__counter {
-  display: flex;
-  margin-top: 0.1rem;
-  justify-content: flex-end;
-  color: rgb(var(--q-theme-on-background-rgb)/0.5);
+.q-theme-provider {
+  color: var(--q-theme-on-background);
+  caret-color: var(--q-theme-on-background);
 }
 
 .q-tooltip .q-overlay__content {