@quidgest/ui 0.20.1 → 0.21.0

package/CHANGELOG.md

@@ -9,6 +9,23 @@ On `0.x`, breaking changes typically ship as a **minor** bump. The `/release` wo
 
 Entries below start at **0.16.0**. Earlier history is in git / GitLab MRs. Patch releases within a minor line may be summarized under that minor unless a break shipped in between.
 
+## [0.21.0] - 2026-09-10
+
+### Changed
+
+- **Breaking:** `useId` — no longer returns a UUID-based `Ref` (`uid-…`); wraps Vue `useId` as a `ComputedRef` with `q-…` ids (custom `app.config.idPrefix` becomes `q-<prefix>-…`) and must run during setup. Drop any reliance on the removed `uuid` dependency from `@quidgest/ui`.
+- **Breaking:** `useDialog` / `useToast` — require `createFramework` plus a mounted `QDialogProvider` / `QToaster`. `addDialog` / `addToast` no longer take a separate `id` argument and return `Promise<string>`; prefer `await addDialog(props)` / `await addToast(props)`, pass overrides via `props.id`, and use `cancelDialog` / `cancelToast` before registration. `removeDialog` / `removeToast` throw if the id is missing; do not mutate the public `dialogs` / `toasts` lists to update the store.
+- **Breaking:** Package exports — the `./*` catch-all export was removed; import only via documented entry points.
+- **Breaking:** Color utilities — public `isCssColor` removed; use `isThemeColor` for utility/BEM classification, or `tryParseColor` / `parseColor` to test parseability. Unsupported / unparsed CSS colors no longer silently fall back to primary-like CSS vars (expect `undefined` style and a non-production warning). Contrasting/`on*` text for custom colors may change where WCAG luminance disagrees with the old HSL-lightness heuristic.
+- **Breaking:** `QButton` / `QBadge` / `QToast` — utility color BEM modifiers (`q-button--primary`, `q-badge--…`, `q-toast--…`, etc.) are no longer emitted; style via bound `--q-*-main-color` / hover CSS variables (`.q-button--background` remains for that special case). Do not target those color modifier classes in consumer CSS.
+- Theme / `useColor` — Light/Dark schemes and default `on*` tokens aligned with WCAG; pure `on*` surface tokens; utility colors always bind style (including Dark-scheme hover).
+
+### Fixed
+
+- `QInputGroup` — restore radius for solo addons; equalize sibling control heights
+- `QIcon` — size uncropped SVGs correctly in controls
+- Storybook — set per-story Vue `idPrefix` to avoid id collisions across stories
+
 ## [0.20.1] - 2026-09-04
 
 ### Added

package/README.md

@@ -42,6 +42,16 @@ import framework from './plugins/quidgest-ui'
 createApp(App).use(framework).mount('#app')
 ```
 
+Mount **one** `QDialogProvider` and **one** `QToaster` in the app root (for example `App.vue`). `useDialog` / `useToast` share a single list per app; mounting a second provider or toaster for the same app throws.
+
+```vue
+<template>
+	<q-dialog-provider />
+	<q-toaster />
+	<router-view />
+</template>
+```
+
 Once installed, components can be used like so:
 
 ```vue

package/dist/json/api.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.20.1",
+  "version": "0.21.0",
   "components": [
     {
       "name": "QAccordion",
@@ -2871,6 +2871,16 @@
             "default": "DEFAULT_ICONS",
             "required": false,
             "category": "Configuration"
+          },
+          {
+            "name": "entryKey",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "",
+            "default": "undefined",
+            "required": false
           }
         ],
         "events": [
@@ -4397,6 +4407,16 @@
           "description": "Groups buttons with fields.",
           "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<q-text-field placeholder=\"Search\" />\n\t\t\t\t<template #append>\n\t\t\t\t\t<q-button>\n\t\t\t\t\t\t<q-icon icon=\"magnify\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
         },
+        {
+          "title": "Append Only",
+          "description": "Append-only group — all four corners of the control should be rounded.",
+          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<template #append>\n\t\t\t\t\t<q-button>\n\t\t\t\t\t\t<q-icon icon=\"cog\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
+        },
+        {
+          "title": "Prepend Only",
+          "description": "Prepend-only group — all four corners of the control should be rounded.",
+          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<template #prepend>\n\t\t\t\t\t<q-button>\n\t\t\t\t\t\t<q-icon icon=\"cog\" />\n\t\t\t\t\t</q-button>\n\t\t\t\t</template>\n\t\t\t</q-input-group>"
+        },
         {
           "title": "Button Group Addon",
           "description": "Further extends button addons with multiple buttons.",
@@ -4407,6 +4427,11 @@
           "description": "Provides a textual description for the group.",
           "code": "<QInputGroup :label=\"Full name\" :required=\"true\" />"
         },
+        {
+          "title": "Mixed Heights",
+          "description": "Keeps sibling controls aligned when one child has a larger intrinsic height.",
+          "code": "<q-input-group v-bind=\"args\">\n\t\t\t\t<q-text-field placeholder=\"Name\" />\n\t\t\t\t<q-text-area placeholder=\"Notes\" :rows=\"3\" />\n\t\t\t</q-input-group>"
+        },
         {
           "title": "Advanced Usage",
           "description": "Supports the creation of custom input groups using selects, text fields, buttons, and more.",
@@ -9485,6 +9510,16 @@
             "default": "DEFAULT_ICONS",
             "required": false,
             "category": "Configuration"
+          },
+          {
+            "name": "entryKey",
+            "type": {
+              "kind": "primitive",
+              "name": "string"
+            },
+            "description": "",
+            "default": "undefined",
+            "required": false
           }
         ],
         "events": [

package/dist/ui.css

@@ -1462,6 +1462,10 @@ body *::-webkit-scrollbar-track {
   padding: 0.1rem;
   opacity: 0.5;
 }
+.q-clear-btn.q-button svg {
+  width: 1.0005em;
+  height: 1.0005em;
+}
 .q-clear-btn.q-button:hover {
   cursor: inherit;
 }
@@ -1637,86 +1641,6 @@ body *::-webkit-scrollbar-track {
   opacity: 0.6;
   pointer-events: none;
 }
-.q-badge--primary {
-  --q-badge-main-color: var(--q-theme-primary);
-  --q-badge-main-color-rgb: var(--q-theme-primary-rgb);
-  --q-badge-on-main-color: var(--q-theme-on-primary);
-  --q-badge-on-main-color-rgb: var(--q-theme-on-primary-rgb);
-  --q-badge-hover-color: var(--q-theme-primary-dark);
-  --q-badge-hover-color-rgb: var(--q-theme-primary-dark-rgb);
-  --q-badge-on-hover-color: var(--q-theme-on-primary);
-  --q-badge-on-hover-color-rgb: var(--q-theme-on-primary-rgb);
-}
-.q-badge--secondary {
-  --q-badge-main-color: var(--q-theme-secondary);
-  --q-badge-main-color-rgb: var(--q-theme-secondary-rgb);
-  --q-badge-on-main-color: var(--q-theme-on-secondary);
-  --q-badge-on-main-color-rgb: var(--q-theme-on-secondary-rgb);
-  --q-badge-hover-color: var(--q-theme-secondary-dark);
-  --q-badge-hover-color-rgb: var(--q-theme-secondary-dark-rgb);
-  --q-badge-on-hover-color: var(--q-theme-on-secondary);
-  --q-badge-on-hover-color-rgb: var(--q-theme-on-secondary-rgb);
-}
-.q-badge--highlight {
-  --q-badge-main-color: var(--q-theme-highlight);
-  --q-badge-main-color-rgb: var(--q-theme-highlight-rgb);
-  --q-badge-on-main-color: var(--q-theme-on-highlight);
-  --q-badge-on-main-color-rgb: var(--q-theme-on-highlight-rgb);
-  --q-badge-hover-color: var(--q-theme-highlight-dark);
-  --q-badge-hover-color-rgb: var(--q-theme-highlight-dark-rgb);
-  --q-badge-on-hover-color: var(--q-theme-on-highlight);
-  --q-badge-on-hover-color-rgb: var(--q-theme-on-highlight-rgb);
-}
-.q-badge--info {
-  --q-badge-main-color: var(--q-theme-info);
-  --q-badge-main-color-rgb: var(--q-theme-info-rgb);
-  --q-badge-on-main-color: var(--q-theme-on-info);
-  --q-badge-on-main-color-rgb: var(--q-theme-on-info-rgb);
-  --q-badge-hover-color: var(--q-theme-info-dark);
-  --q-badge-hover-color-rgb: var(--q-theme-info-dark-rgb);
-  --q-badge-on-hover-color: var(--q-theme-on-info);
-  --q-badge-on-hover-color-rgb: var(--q-theme-on-info-rgb);
-}
-.q-badge--success {
-  --q-badge-main-color: var(--q-theme-success);
-  --q-badge-main-color-rgb: var(--q-theme-success-rgb);
-  --q-badge-on-main-color: var(--q-theme-on-success);
-  --q-badge-on-main-color-rgb: var(--q-theme-on-success-rgb);
-  --q-badge-hover-color: var(--q-theme-success-dark);
-  --q-badge-hover-color-rgb: var(--q-theme-success-dark-rgb);
-  --q-badge-on-hover-color: var(--q-theme-on-success);
-  --q-badge-on-hover-color-rgb: var(--q-theme-on-success-rgb);
-}
-.q-badge--warning {
-  --q-badge-main-color: var(--q-theme-warning);
-  --q-badge-main-color-rgb: var(--q-theme-warning-rgb);
-  --q-badge-on-main-color: var(--q-theme-on-warning);
-  --q-badge-on-main-color-rgb: var(--q-theme-on-warning-rgb);
-  --q-badge-hover-color: var(--q-theme-warning-dark);
-  --q-badge-hover-color-rgb: var(--q-theme-warning-dark-rgb);
-  --q-badge-on-hover-color: var(--q-theme-on-warning);
-  --q-badge-on-hover-color-rgb: var(--q-theme-on-warning-rgb);
-}
-.q-badge--danger {
-  --q-badge-main-color: var(--q-theme-danger);
-  --q-badge-main-color-rgb: var(--q-theme-danger-rgb);
-  --q-badge-on-main-color: var(--q-theme-on-danger);
-  --q-badge-on-main-color-rgb: var(--q-theme-on-danger-rgb);
-  --q-badge-hover-color: var(--q-theme-danger-dark);
-  --q-badge-hover-color-rgb: var(--q-theme-danger-dark-rgb);
-  --q-badge-on-hover-color: var(--q-theme-on-danger);
-  --q-badge-on-hover-color-rgb: var(--q-theme-on-danger-rgb);
-}
-.q-badge--neutral {
-  --q-badge-main-color: var(--q-theme-neutral);
-  --q-badge-main-color-rgb: var(--q-theme-neutral-rgb);
-  --q-badge-on-main-color: var(--q-theme-on-neutral);
-  --q-badge-on-main-color-rgb: var(--q-theme-on-neutral-rgb);
-  --q-badge-hover-color: var(--q-theme-neutral-dark);
-  --q-badge-hover-color-rgb: var(--q-theme-neutral-dark-rgb);
-  --q-badge-on-hover-color: var(--q-theme-on-neutral);
-  --q-badge-on-hover-color-rgb: var(--q-theme-on-neutral-rgb);
-}
 .q-badge--large {
   min-height: 44px;
 }
@@ -1819,8 +1743,8 @@ body *::-webkit-scrollbar-track {
   --q-button-on-main-color-rgb: var(--q-theme-on-primary-rgb);
   --q-button-hover-color: var(--q-theme-primary-dark);
   --q-button-hover-color-rgb: var(--q-theme-primary-dark-rgb);
-  --q-button-on-hover-color: var(--q-theme-on-primary);
-  --q-button-on-hover-color-rgb: var(--q-theme-on-primary-rgb);
+  --q-button-on-hover-color: var(--q-theme-on-primary-dark);
+  --q-button-on-hover-color-rgb: var(--q-theme-on-primary-dark-rgb);
   display: inline-flex;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -1844,6 +1768,9 @@ body *::-webkit-scrollbar-track {
 .q-button.q-button--labeled {
   padding: 0.4rem 0.8rem;
 }
+.q-button.q-button--labeled:where(:has(.q-button__content > .q-icon)):where(:not(.q-button--icon-end)):where(:not(.q-button--icon-top)):where(:not(.q-button--icon-bottom)) {
+  padding: 0.4rem 0.8rem 0.4rem 0.6rem;
+}
 .q-button__content {
   display: inline-flex;
   align-items: center;
@@ -1852,6 +1779,9 @@ body *::-webkit-scrollbar-track {
   width: 100%;
   z-index: 1;
 }
+.q-button__append {
+  display: contents;
+}
 .q-button:disabled {
   opacity: 0.6;
 }
@@ -1945,91 +1875,11 @@ body *::-webkit-scrollbar-track {
 .q-button--pill {
   border-radius: 9999px;
 }
-.q-button--primary {
-  --q-button-main-color: var(--q-theme-primary);
-  --q-button-main-color-rgb: var(--q-theme-primary-rgb);
-  --q-button-on-main-color: var(--q-theme-on-primary);
-  --q-button-on-main-color-rgb: var(--q-theme-on-primary-rgb);
-  --q-button-hover-color: var(--q-theme-primary-dark);
-  --q-button-hover-color-rgb: var(--q-theme-primary-dark-rgb);
-  --q-button-on-hover-color: var(--q-theme-on-primary);
-  --q-button-on-hover-color-rgb: var(--q-theme-on-primary-rgb);
-}
-.q-button--secondary {
-  --q-button-main-color: var(--q-theme-secondary);
-  --q-button-main-color-rgb: var(--q-theme-secondary-rgb);
-  --q-button-on-main-color: var(--q-theme-on-secondary);
-  --q-button-on-main-color-rgb: var(--q-theme-on-secondary-rgb);
-  --q-button-hover-color: var(--q-theme-secondary-dark);
-  --q-button-hover-color-rgb: var(--q-theme-secondary-dark-rgb);
-  --q-button-on-hover-color: var(--q-theme-on-secondary);
-  --q-button-on-hover-color-rgb: var(--q-theme-on-secondary-rgb);
-}
-.q-button--highlight {
-  --q-button-main-color: var(--q-theme-highlight);
-  --q-button-main-color-rgb: var(--q-theme-highlight-rgb);
-  --q-button-on-main-color: var(--q-theme-on-highlight);
-  --q-button-on-main-color-rgb: var(--q-theme-on-highlight-rgb);
-  --q-button-hover-color: var(--q-theme-highlight-dark);
-  --q-button-hover-color-rgb: var(--q-theme-highlight-dark-rgb);
-  --q-button-on-hover-color: var(--q-theme-on-highlight);
-  --q-button-on-hover-color-rgb: var(--q-theme-on-highlight-rgb);
-}
-.q-button--info {
-  --q-button-main-color: var(--q-theme-info);
-  --q-button-main-color-rgb: var(--q-theme-info-rgb);
-  --q-button-on-main-color: var(--q-theme-on-info);
-  --q-button-on-main-color-rgb: var(--q-theme-on-info-rgb);
-  --q-button-hover-color: var(--q-theme-info-dark);
-  --q-button-hover-color-rgb: var(--q-theme-info-dark-rgb);
-  --q-button-on-hover-color: var(--q-theme-on-info);
-  --q-button-on-hover-color-rgb: var(--q-theme-on-info-rgb);
-}
-.q-button--success {
-  --q-button-main-color: var(--q-theme-success);
-  --q-button-main-color-rgb: var(--q-theme-success-rgb);
-  --q-button-on-main-color: var(--q-theme-on-success);
-  --q-button-on-main-color-rgb: var(--q-theme-on-success-rgb);
-  --q-button-hover-color: var(--q-theme-success-dark);
-  --q-button-hover-color-rgb: var(--q-theme-success-dark-rgb);
-  --q-button-on-hover-color: var(--q-theme-on-success);
-  --q-button-on-hover-color-rgb: var(--q-theme-on-success-rgb);
-}
-.q-button--warning {
-  --q-button-main-color: var(--q-theme-warning);
-  --q-button-main-color-rgb: var(--q-theme-warning-rgb);
-  --q-button-on-main-color: var(--q-theme-on-warning);
-  --q-button-on-main-color-rgb: var(--q-theme-on-warning-rgb);
-  --q-button-hover-color: var(--q-theme-warning-dark);
-  --q-button-hover-color-rgb: var(--q-theme-warning-dark-rgb);
-  --q-button-on-hover-color: var(--q-theme-on-warning);
-  --q-button-on-hover-color-rgb: var(--q-theme-on-warning-rgb);
-}
-.q-button--danger {
-  --q-button-main-color: var(--q-theme-danger);
-  --q-button-main-color-rgb: var(--q-theme-danger-rgb);
-  --q-button-on-main-color: var(--q-theme-on-danger);
-  --q-button-on-main-color-rgb: var(--q-theme-on-danger-rgb);
-  --q-button-hover-color: var(--q-theme-danger-dark);
-  --q-button-hover-color-rgb: var(--q-theme-danger-dark-rgb);
-  --q-button-on-hover-color: var(--q-theme-on-danger);
-  --q-button-on-hover-color-rgb: var(--q-theme-on-danger-rgb);
-}
-.q-button--neutral {
-  --q-button-main-color: var(--q-theme-neutral);
-  --q-button-main-color-rgb: var(--q-theme-neutral-rgb);
-  --q-button-on-main-color: var(--q-theme-on-neutral);
-  --q-button-on-main-color-rgb: var(--q-theme-on-neutral-rgb);
-  --q-button-hover-color: var(--q-theme-neutral-dark);
-  --q-button-hover-color-rgb: var(--q-theme-neutral-dark-rgb);
-  --q-button-on-hover-color: var(--q-theme-on-neutral);
-  --q-button-on-hover-color-rgb: var(--q-theme-on-neutral-rgb);
-}
 .q-button--background {
   --q-button-main-color: var(--q-theme-background);
   --q-button-on-main-color: var(--q-theme-on-background);
   --q-button-hover-color: var(--q-theme-primary-dark);
-  --q-button-on-hover-color: var(--q-theme-on-primary);
+  --q-button-on-hover-color: var(--q-theme-on-primary-dark);
 }
 .q-button--loading:hover {
   cursor: not-allowed;
@@ -2044,6 +1894,12 @@ body *::-webkit-scrollbar-track {
 .q-button--small.q-button--labeled {
   padding: 0.25rem 0.5rem;
 }
+.q-button--small.q-button--labeled:where(:has(.q-button__content > .q-icon)):where(:not(.q-button--icon-end)):where(:not(.q-button--icon-top)):where(:not(.q-button--icon-bottom)) {
+  padding: 0.25rem 0.5rem 0.25rem 0.375rem;
+}
+.q-button--small.q-button--icon-end.q-button--labeled:where(:has(.q-button__content > .q-icon)) {
+  padding: 0.25rem 0.375rem 0.25rem 0.5rem;
+}
 .q-button--borderless {
   border-color: transparent;
 }
@@ -2053,6 +1909,9 @@ body *::-webkit-scrollbar-track {
 .q-button--icon-end .q-button__content {
   flex-direction: row-reverse;
 }
+.q-button--icon-end.q-button--labeled:where(:has(.q-button__content > .q-icon)) {
+  padding: 0.4rem 0.6rem 0.4rem 0.8rem;
+}
 .q-button--icon-top .q-button__content {
   flex-direction: column;
 }
@@ -2741,6 +2600,10 @@ body *::-webkit-scrollbar-track {
   padding: 0.1rem;
   opacity: 0.5;
 }
+.q-combobox__chevron.q-button svg {
+  width: 1.0005em;
+  height: 1.0005em;
+}
 .q-combobox__chevron.q-button:hover {
   cursor: inherit;
 }
@@ -5816,8 +5679,8 @@ body *::-webkit-scrollbar-track {
   fill: currentcolor;
 }
 .q-icon__svg, .q-icon__img {
-  width: 1em;
-  height: 1em;
+  width: 1.15em;
+  height: 1.15em;
 }
 
 .q-input-group__prepend > :first-child {
@@ -5828,6 +5691,14 @@ body *::-webkit-scrollbar-track {
   border-top-right-radius: var(--border-radius);
   border-bottom-right-radius: var(--border-radius);
 }
+.q-input-group > .q-field__control > .q-input-group__append:first-child > :first-child {
+  border-top-left-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
+}
+.q-input-group > .q-field__control > .q-input-group__prepend:last-child > :last-child {
+  border-top-right-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+}
 .q-input-group__prepend, .q-input-group__append {
   display: flex;
   align-items: stretch;
@@ -5867,10 +5738,17 @@ body *::-webkit-scrollbar-track {
 }
 .q-input-group > .q-field__control > * {
   border-radius: 0;
+  align-self: stretch;
 }
 .q-input-group > .q-field__control > *:focus-within {
   z-index: 2;
 }
+.q-input-group > .q-field__control > .q-field > .q-field__control {
+  height: 100%;
+}
+.q-input-group > .q-field__control > .q-button {
+  height: auto;
+}
 .q-input-group > .q-field__control > :first-child {
   border-top-left-radius: var(--border-radius);
   border-bottom-left-radius: var(--border-radius);
@@ -5955,6 +5833,7 @@ body *::-webkit-scrollbar-track {
   gap: 0.25rem;
   align-items: center;
   padding: 0.375rem 0.5rem;
+  min-height: calc(1.15rem + 0.75rem);
   list-style: none;
   line-height: 15px;
   overflow-wrap: break-word;
@@ -6010,6 +5889,10 @@ body *::-webkit-scrollbar-track {
 .q-list-item__check-container--top {
   align-self: flex-start;
 }
+.q-list-item__check-container .q-list-item__check {
+  width: 1.0005em;
+  height: 1.0005em;
+}
 .q-list-item__description {
   display: flex;
   gap: 0.25rem;
@@ -6794,6 +6677,10 @@ body *::-webkit-scrollbar-track {
   padding: 0.1rem;
   opacity: 0.5;
 }
+.q-select__chevron.q-button svg {
+  width: 1.0005em;
+  height: 1.0005em;
+}
 .q-select__chevron.q-button:hover {
   cursor: inherit;
 }
@@ -7671,94 +7558,11 @@ body *::-webkit-scrollbar-track {
   border-color: transparent;
   color: var(--q-toast-hover-color);
 }
-.q-toast--tonal .q-toast__dismiss.q-button {
-  --q-button-main-color: var(--q-toast-hover-color);
-}
 .q-toast--outlined {
   background-color: transparent;
   border-color: var(--q-toast-main-color);
   color: var(--q-toast-main-color);
 }
-.q-toast--primary {
-  --q-toast-main-color: var(--q-theme-primary);
-  --q-toast-main-color-rgb: var(--q-theme-primary-rgb);
-  --q-toast-on-main-color: var(--q-theme-on-primary);
-  --q-toast-on-main-color-rgb: var(--q-theme-on-primary-rgb);
-  --q-toast-hover-color: var(--q-theme-primary-dark);
-  --q-toast-hover-color-rgb: var(--q-theme-primary-dark-rgb);
-  --q-toast-on-hover-color: var(--q-theme-on-primary);
-  --q-toast-on-hover-color-rgb: var(--q-theme-on-primary-rgb);
-}
-.q-toast--secondary {
-  --q-toast-main-color: var(--q-theme-secondary);
-  --q-toast-main-color-rgb: var(--q-theme-secondary-rgb);
-  --q-toast-on-main-color: var(--q-theme-on-secondary);
-  --q-toast-on-main-color-rgb: var(--q-theme-on-secondary-rgb);
-  --q-toast-hover-color: var(--q-theme-secondary-dark);
-  --q-toast-hover-color-rgb: var(--q-theme-secondary-dark-rgb);
-  --q-toast-on-hover-color: var(--q-theme-on-secondary);
-  --q-toast-on-hover-color-rgb: var(--q-theme-on-secondary-rgb);
-}
-.q-toast--highlight {
-  --q-toast-main-color: var(--q-theme-highlight);
-  --q-toast-main-color-rgb: var(--q-theme-highlight-rgb);
-  --q-toast-on-main-color: var(--q-theme-on-highlight);
-  --q-toast-on-main-color-rgb: var(--q-theme-on-highlight-rgb);
-  --q-toast-hover-color: var(--q-theme-highlight-dark);
-  --q-toast-hover-color-rgb: var(--q-theme-highlight-dark-rgb);
-  --q-toast-on-hover-color: var(--q-theme-on-highlight);
-  --q-toast-on-hover-color-rgb: var(--q-theme-on-highlight-rgb);
-}
-.q-toast--info {
-  --q-toast-main-color: var(--q-theme-info);
-  --q-toast-main-color-rgb: var(--q-theme-info-rgb);
-  --q-toast-on-main-color: var(--q-theme-on-info);
-  --q-toast-on-main-color-rgb: var(--q-theme-on-info-rgb);
-  --q-toast-hover-color: var(--q-theme-info-dark);
-  --q-toast-hover-color-rgb: var(--q-theme-info-dark-rgb);
-  --q-toast-on-hover-color: var(--q-theme-on-info);
-  --q-toast-on-hover-color-rgb: var(--q-theme-on-info-rgb);
-}
-.q-toast--success {
-  --q-toast-main-color: var(--q-theme-success);
-  --q-toast-main-color-rgb: var(--q-theme-success-rgb);
-  --q-toast-on-main-color: var(--q-theme-on-success);
-  --q-toast-on-main-color-rgb: var(--q-theme-on-success-rgb);
-  --q-toast-hover-color: var(--q-theme-success-dark);
-  --q-toast-hover-color-rgb: var(--q-theme-success-dark-rgb);
-  --q-toast-on-hover-color: var(--q-theme-on-success);
-  --q-toast-on-hover-color-rgb: var(--q-theme-on-success-rgb);
-}
-.q-toast--warning {
-  --q-toast-main-color: var(--q-theme-warning);
-  --q-toast-main-color-rgb: var(--q-theme-warning-rgb);
-  --q-toast-on-main-color: var(--q-theme-on-warning);
-  --q-toast-on-main-color-rgb: var(--q-theme-on-warning-rgb);
-  --q-toast-hover-color: var(--q-theme-warning-dark);
-  --q-toast-hover-color-rgb: var(--q-theme-warning-dark-rgb);
-  --q-toast-on-hover-color: var(--q-theme-on-warning);
-  --q-toast-on-hover-color-rgb: var(--q-theme-on-warning-rgb);
-}
-.q-toast--danger {
-  --q-toast-main-color: var(--q-theme-danger);
-  --q-toast-main-color-rgb: var(--q-theme-danger-rgb);
-  --q-toast-on-main-color: var(--q-theme-on-danger);
-  --q-toast-on-main-color-rgb: var(--q-theme-on-danger-rgb);
-  --q-toast-hover-color: var(--q-theme-danger-dark);
-  --q-toast-hover-color-rgb: var(--q-theme-danger-dark-rgb);
-  --q-toast-on-hover-color: var(--q-theme-on-danger);
-  --q-toast-on-hover-color-rgb: var(--q-theme-on-danger-rgb);
-}
-.q-toast--neutral {
-  --q-toast-main-color: var(--q-theme-neutral);
-  --q-toast-main-color-rgb: var(--q-theme-neutral-rgb);
-  --q-toast-on-main-color: var(--q-theme-on-neutral);
-  --q-toast-on-main-color-rgb: var(--q-theme-on-neutral-rgb);
-  --q-toast-hover-color: var(--q-theme-neutral-dark);
-  --q-toast-hover-color-rgb: var(--q-theme-neutral-dark-rgb);
-  --q-toast-on-hover-color: var(--q-theme-on-neutral);
-  --q-toast-on-hover-color-rgb: var(--q-theme-on-neutral-rgb);
-}
 
 .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);