unocss-preset-quasar 0.1.5 → 0.2.0

package/dist/core/colors.unocss.js

@@ -11,7 +11,83 @@ const preflights = [
   --q-warning: ${theme.colors.warning};
   --q-dark: ${theme.colors.dark};
   --q-dark-page: ${theme.colors['dark-page']};
+  --light-primary: ${theme.colors.light.primary};
+  --light-on-primary: ${theme.colors.light.onPrimary};
+  --light-primary-container: ${theme.colors.light.primaryContainer};
+  --light-on-primary-container: ${theme.colors.light.onPrimaryContainer};
+  --light-secondary: ${theme.colors.light.secondary};
+  --light-on-secondary: ${theme.colors.light.onSecondary};
+  --light-secondary-container: ${theme.colors.light.secondaryContainer};
+  --light-on-secondary-container: ${theme.colors.light.onSecondaryContainer};
+  --light-tertiary: ${theme.colors.light.tertiary};
+  --light-on-tertiary: ${theme.colors.light.onTertiary};
+  --light-tertiary-container: ${theme.colors.light.tertiaryContainer};
+  --light-on-tertiary-container: ${theme.colors.light.onTertiaryContainer};
+  --light-error: ${theme.colors.light.error};
+  --light-on-error: ${theme.colors.light.onError};
+  --light-error-container: ${theme.colors.light.errorContainer};
+  --light-on-error-container: ${theme.colors.light.onErrorContainer};
+  --light-background: ${theme.colors.light.background};
+  --light-on-background: ${theme.colors.light.onBackground};
+  --light-surface: ${theme.colors.light.surface};
+  --light-on-surface: ${theme.colors.light.onSurface};
+  --light-surface-variant: ${theme.colors.light.surfaceVariant};
+  --light-on-surface-variant: ${theme.colors.light.onSurfaceVariant};
+  --light-outline: ${theme.colors.light.outline};
+  --light-outline-variant: ${theme.colors.light.outlineVariant};
+  --light-shadow: ${theme.colors.light.shadow};
+  --light-scrim: ${theme.colors.light.scrim};
+  --light-inverse-surface: ${theme.colors.light.inverseSurface};
+  --light-inverse-on-surface: ${theme.colors.light.inverseOnSurface};
+  --light-inverse-primary: ${theme.colors.light.inversePrimary};
+  --light-surface-dim: ${theme.colors.light.surfaceDim};
+  --light-surface-bright: ${theme.colors.light.surfaceBright};
+  --light-surface-container-lowest: ${theme.colors.light.surfaceContainerLowest};
+  --light-surface-container-low: ${theme.colors.light.surfaceContainerLow};
+  --light-surface-container: ${theme.colors.light.surfaceContainer};
+  --light-surface-container-high: ${theme.colors.light.surfaceContainerHigh};
+  --light-surface-container-highest: ${theme.colors.light.surfaceContainerHighest};
+  --dark-primary: ${theme.colors.dark.primary};
+  --dark-on-primary: ${theme.colors.dark.onPrimary};
+  --dark-primary-container: ${theme.colors.dark.primaryContainer};
+  --dark-on-primary-container: ${theme.colors.dark.onPrimaryContainer};
+  --dark-secondary: ${theme.colors.dark.secondary};
+  --dark-on-secondary: ${theme.colors.dark.onSecondary};
+  --dark-secondary-container: ${theme.colors.dark.secondaryContainer};
+  --dark-on-secondary-container: ${theme.colors.dark.onSecondaryContainer};
+  --dark-tertiary: ${theme.colors.dark.tertiary};
+  --dark-on-tertiary: ${theme.colors.dark.onTertiary};
+  --dark-tertiary-container: ${theme.colors.dark.tertiaryContainer};
+  --dark-on-tertiary-container: ${theme.colors.dark.onTertiaryContainer};
+  --dark-error: ${theme.colors.dark.error};
+  --dark-on-error: ${theme.colors.dark.onError};
+  --dark-error-container: ${theme.colors.dark.errorContainer};
+  --dark-on-error-container: ${theme.colors.dark.onErrorContainer};
+  --dark-background: ${theme.colors.dark.background};
+  --dark-on-background: ${theme.colors.dark.onBackground};
+  --dark-surface: ${theme.colors.dark.surface};
+  --dark-on-surface: ${theme.colors.dark.onSurface};
+  --dark-surface-variant: ${theme.colors.dark.surfaceVariant};
+  --dark-on-surface-variant: ${theme.colors.dark.onSurfaceVariant};
+  --dark-outline: ${theme.colors.dark.outline};
+  --dark-outline-variant: ${theme.colors.dark.outlineVariant};
+  --dark-shadow: ${theme.colors.dark.shadow};
+  --dark-scrim: ${theme.colors.dark.scrim};
+  --dark-inverse-surface: ${theme.colors.dark.inverseSurface};
+  --dark-inverse-on-surface: ${theme.colors.dark.inverseOnSurface};
+  --dark-inverse-primary: ${theme.colors.dark.inversePrimary};
+  --dark-surface-dim: ${theme.colors.dark.surfaceDim};
+  --dark-surface-bright: ${theme.colors.dark.surfaceBright};
+  --dark-surface-container-lowest: ${theme.colors.dark.surfaceContainerLowest};
+  --dark-surface-container-low: ${theme.colors.dark.surfaceContainerLow};
+  --dark-surface-container: ${theme.colors.dark.surfaceContainer};
+  --dark-surface-container-high: ${theme.colors.dark.surfaceContainerHigh};
+  --dark-surface-container-highest: ${theme.colors.dark.surfaceContainerHighest};
 }`
     }
 ];
-export { preflights };
+const shortcuts = [
+    [/^text-(primary|secondary|accent)$/, ([, c], { theme }) => `text-$q-${c}`],
+    [/^bg-(primary|secondary|accent)$/, ([, c], { theme }) => `bg-$q-${c}`]
+];
+export { preflights, shortcuts };

package/dist/core/dark.unocss.js

@@ -8,6 +8,9 @@ body.body--dark {
     }
 ];
 const shortcuts = [
-    [/^q-dark$/, ([, c], { theme }) => `text-white bg-dark`]
+    [
+        /^q-dark$/,
+        ([, c], { theme }) => `dark:text-dark-on-surface bg-dark-surface`
+    ]
 ];
 export { preflights, shortcuts };

package/dist/core/flex.unocss.js

@@ -8,6 +8,7 @@ const colGutter = {
     lg: 6,
     xl: 12
 };
+const sizes = ['none', 'xs', 'sm', 'md', 'lg', 'xl'];
 const shortcuts = [
     [
         /^row$/,
@@ -18,18 +19,28 @@ const shortcuts = [
         ([, c], { theme }) => `flex flex-col flex-wrap flex-auto [&.reverse]:(flex-col-reverse)`
     ],
     [
-        /^col(?:-)?(none|xs|sm|md|lg|xl)?(?:-)?([2-9]|1[0-2]?)?$/,
+        /^col(?:-)?(none|xs|sm|md|lg|xl|all|auto|grow)?(?:-)?([2-9]|1[0-2]?)?$/,
         ([, size, nr], { theme }) => {
+            const classes = ['w-auto max-w-full'];
             if (size && nr) {
-                return `${size}:basis-${nr}/12)`;
+                classes.push(`${size}:basis-${nr}/12)`);
             }
             else if (nr) {
-                return `basis-${nr}/12`;
+                classes.push(`basis-${nr}/12`);
             }
-            else if (size) {
-                return `${size}:basis-auto ${size}:grow`;
+            else if (size === 'all') {
+                classes.push('basis-12/12');
             }
-            return `grow`;
+            else if (size === 'auto') {
+                classes.push('basis-auto');
+            }
+            else if (sizes.includes(size)) {
+                classes.push(`${size}:basis-auto ${size}:grow`);
+            }
+            else if (size === 'grow' || size === void 0) {
+                classes.push('grow');
+            }
+            return classes.join(' ');
         }
     ],
     [

package/dist/core/index.js

@@ -1,4 +1,4 @@
-import { preflights as ColorPreflights } from './colors.unocss.js';
+import { preflights as ColorPreflights, shortcuts as ColorShortcuts } from './colors.unocss.js';
 import { preflights as DarkPreflights, shortcuts as DarkShortcuts } from './dark.unocss.js';
 import { shortcuts as ElevationShortcuts, rules as ElevationRules } from './elevation.unocss.js';
 import { shortcuts as FlexShortcuts } from './flex.unocss.js';
@@ -298,4 +298,4 @@ body {
     }
 ].concat(ColorPreflights, DarkPreflights, HelperPreflights, MousePreflights, TypographyPreflights, VisibilityPreflights, TransitionPreflights, SizePreflights);
 export const rules = [].concat(MouseRules, HelperRules, ElevationRules, VisibilityRules);
-export const shortcuts = [].concat(DarkShortcuts, FlexShortcuts, HelperShortcuts, MouseShortcuts, OrientationShortcuts, PositionShortcuts, SizeShortcuts, TouchShortcuts, TransitionsShortcuts, TypographyShortcuts, VisibilityShortcuts, ElevationShortcuts);
+export const shortcuts = [].concat(ColorShortcuts, DarkShortcuts, FlexShortcuts, HelperShortcuts, MouseShortcuts, OrientationShortcuts, PositionShortcuts, SizeShortcuts, TouchShortcuts, TransitionsShortcuts, TypographyShortcuts, VisibilityShortcuts, ElevationShortcuts);

package/dist/index.js

@@ -1,4 +1,4 @@
-import { definePreset, presetIcons, presetWebFonts, transformerVariantGroup } from 'unocss';
+import { definePreset, presetIcons, presetWebFonts, transformerDirectives, transformerVariantGroup } from 'unocss';
 import presetWind3 from '@unocss/preset-wind3';
 import { generateTheme } from './theme.js';
 import { animatedUno } from 'animated-unocss';
@@ -121,6 +121,20 @@ const QSliderSafelist = [
     'q-slider--dark',
     'q-slider--dense'
 ];
+const QChipSafelist = [
+    'q-chip',
+    'q-chip--colored',
+    'q-chip--dark',
+    'q-chip--outline',
+    'q-chip--selected',
+    'q-chip__icon',
+    'q-chip__icon--left',
+    'q-chip__icon--right',
+    'q-chip__icon--remove',
+    'q-chip__content',
+    'q-chip--dense',
+    'q-chip--square'
+];
 const componentsSafelistMap = {
     QIcon: ['q-icon'],
     QTabPanel: ['q-panel', 'q-panel-parent'],
@@ -136,6 +150,7 @@ const componentsSafelistMap = {
     ],
     QBanner: [
         'q-banner',
+        'q-banner__content',
         'q-banner--top-padding',
         'q-banner__avatar',
         'q-banner__actions',
@@ -256,20 +271,7 @@ const componentsSafelistMap = {
         'q-checkbox--dark',
         'q-checkbox--dense'
     ],
-    QChip: [
-        'q-chip',
-        'q-chip--colored',
-        'q-chip--dark',
-        'q-chip--outline',
-        'q-chip--selected',
-        'q-chip__icon',
-        'q-chip__icon--left',
-        'q-chip__icon--right',
-        'q-chip__icon--remove',
-        'q-chip__content',
-        'q-chip--dense',
-        'q-chip--square'
-    ],
+    QChip: QChipSafelist,
     QCircularProgress: [
         'q-circular-progress',
         'q-circular-progress__svg',
@@ -612,9 +614,11 @@ const componentsSafelistMap = {
         'q-scrollarea__bar--invisible',
         'q-scrollarea__thumb--invisible',
         'q-scrollarea__content',
-        'q-scrollarea--dark'
+        'q-scrollarea--dark',
+        'relative-position'
     ],
     QSelect: [
+        ...QChipSafelist,
         'q-list',
         'q-item',
         'q-virtual-scroll',
@@ -677,6 +681,7 @@ const componentsSafelistMap = {
     ],
     QStepper: [
         'q-stepper',
+        'q-stepper__label',
         'q-stepper__title',
         'q-stepper__caption',
         'q-stepper__dot',
@@ -698,7 +703,8 @@ const componentsSafelistMap = {
         'q-stepper--flat',
         'q-stepper--bordered',
         'q-stepper--horizontal',
-        'q-stepper--vertical'
+        'q-stepper--vertical',
+        'col-grow'
     ],
     QTabPanels: ['q-tab-panels', 'q-tab-panel'],
     QMarkupTable: ['q-markup-table'],
@@ -1004,6 +1010,12 @@ const pluginSafelistMap = {
         'q-loading-bar--right',
         'q-loading-bar--left'
     ],
+    Loading: [
+        'q-loading',
+        'q-loading__backdrop',
+        'q-loading__box',
+        'q-loading__message'
+    ],
     Notify: [
         'q-avatar',
         'q-avatar__content',
@@ -1594,7 +1606,8 @@ export const QuasarPreset = definePreset((options) => {
                 }
             ],
             transformers: [
-                transformerVariantGroup()
+                transformerVariantGroup(),
+                transformerDirectives()
                 // {
                 //   name: 'find-classes-in-quasar-src',
                 //   enforce: 'pre', // enforce before other transformers

package/dist/styles/md2/components/QBanner.unocss.js

@@ -10,6 +10,11 @@ const shortcuts = [
         ([, c], { theme }) => theme.quasar?.components?.['q-banner__avatar'] ??
             `!flex-initial !min-w-[1px] [&_>_.q-avatar]:(text-[46px]) [&_>_.q-icon]:(text-[40px]) [&:not(:empty)_+_.q-banner\\_\\_content]:(pl-[16px])`
     ],
+    [
+        /^q-banner__content$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-banner__content'] ??
+            `max-w-[calc(100%-56px)]`
+    ],
     [
         /^q-banner__actions$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-banner__actions'] ??

package/dist/styles/md2/components/QCheckbox.unocss.js

@@ -51,7 +51,7 @@ const shortcuts = [
     [
         /^q-checkbox__inner$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-checkbox__inner'] ??
-            `text-[40px] w-[1em] min-w-[1em] h-[1em] outline-[0] rounded-[50%] layer-components:text-[rgba(0,_0,_0,_0.54)]`
+            `mr-2px text-[40px] w-[1em] min-w-[1em] h-[1em] outline-[0] rounded-[50%] layer-components:text-[rgba(0,_0,_0,_0.54)]`
     ],
     [
         /^q-checkbox__inner--truthy$/,

package/dist/styles/md2/components/QItem.unocss.js

@@ -8,12 +8,12 @@ const shortcuts = [
     [
         /^q-item__section--side$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-item__section--side'] ??
-            `!flex-initial text-[#757575] items-start pr-[16px] w-auto min-w-[0] max-w-full [&_>_.q-icon]:(text-[24px]) [&_>_.q-avatar]:(text-[40px])`
+            `!flex-initial text-[#757575] items-start pr-[16px] w-auto max-w-full [&_>_.q-icon]:(text-[24px]) [&_>_.q-avatar]:(text-[40px])`
     ],
     [
         /^q-item__section--avatar$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-item__section--avatar'] ??
-            `!flex-initial [color:inherit] min-w-[56px]`
+            `!flex-initial [color:inherit] min-w-[40px]`
     ],
     [
         /^q-item__section--thumbnail$/,

package/dist/styles/md2/components/QScrollarea.unocss.js

@@ -1,5 +1,5 @@
 const shortcuts = [
-    [/^q-scrollarea$/, ([, c], { theme }) => `relative`],
+    [/^q-scrollarea$/, ([, c], { theme }) => `relative [contain:strict]`],
     [
         /^q-scrollarea__bar$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-scrollarea__bar'] ??
@@ -26,10 +26,7 @@ const shortcuts = [
     ],
     [/^q-scrollarea__thumb:hover$/, ([, c], { theme }) => `hover:opacity-30`],
     [/^q-scrollarea__thumb:active$/, ([, c], { theme }) => `active:opacity-50`],
-    [
-        /^q-scrollarea__content$/,
-        ([, c], { theme }) => `!relative min-h-full min-w-full`
-    ],
+    [/^q-scrollarea__content$/, ([, c], { theme }) => `min-h-full w-full`],
     [
         /^q-scrollarea--dark$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-scrollarea--dark'] ??

package/dist/styles/md2/components/QTabs.unocss.js

@@ -2,11 +2,13 @@ const shortcuts = [
     [
         /^q-tab$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tab'] ??
-            `px-[16px] py-[0] min-h-[48px] [transition:color_0.3s,_background-color_0.3s] uppercase whitespace-nowrap [color:inherit] no-underline [&_.q-badge]:(top-[3px] -right-[12px])`
+            `px-[16px] py-[0] min-h-[48px] [transition:color_0.3s,_background-color_0.3s] whitespace-nowrap [color:inherit] no-underline
+      [&_.q-badge]:(top-[3px] -right-[12px])
+      `
     ],
     [
         /^q-tab--full$/,
-        ([, c], { theme }) => theme.quasar?.components?.['q-tab--full'] ?? `min-h-[72px]`
+        ([, c], { theme }) => theme.quasar?.components?.['q-tab--full'] ?? `min-h-72px h-72px`
     ],
     [
         /^q-tab--no-caps$/,
@@ -15,7 +17,7 @@ const shortcuts = [
     [
         /^q-tab__content$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tab__content'] ??
-            `[height:inherit] px-[0] py-[4px] min-w-[40px] [&_.q-chip--floating]:(top-[0] -right-[16px])`
+            `[height:inherit] z-2 px-[0] py-[4px] min-w-[40px] [&_.q-chip--floating]:(top-[0] -right-[16px])`
     ],
     [
         /^q-tab__content--inline$/,
@@ -45,7 +47,7 @@ const shortcuts = [
     [
         /^q-tab__indicator$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tab__indicator'] ??
-            `!relative opacity-0 h-[2px] bg-current`
+            `opacity-0 h-[2px] bg-current`
     ],
     [
         /^q-tab--active$/,
@@ -108,7 +110,14 @@ const shortcuts = [
     [
         /^q-tabs--vertical$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tabs--vertical'] ??
-            `!block h-full [&_.q-tabs\\_\\_content]:(!block h-full) [&_.q-tabs\\_\\_arrow]:(w-full h-[36px] text-center) [&_.q-tabs\\_\\_arrow--left]:(top-[0] left-[0] right-[0]) [&_.q-tabs\\_\\_arrow--right]:(left-[0] right-[0] bottom-[0]) [&_.q-tab]:(px-[8px] py-[0]) [&_.q-tab\\_\\_indicator]:(h-[unset] w-[2px]) [&.q-tabs--not-scrollable_.q-tabs\\_\\_content]:(h-full) [&.q-tabs--dense_.q-tab\\_\\_content]:(min-w-[24px])`
+            `!block h-full [&_.q-tabs\\_\\_content]:(!block h-full) 
+      [&_.q-tabs\\_\\_arrow]:(w-full h-[36px] text-center) 
+      [&_.q-tabs\\_\\_arrow--left]:(top-[0] left-[0] right-[0]) 
+      [&_.q-tabs\\_\\_arrow--right]:(left-[0] right-[0] bottom-[0]) 
+      [&_.q-tab]:(px-[8px] py-[0]) 
+      [&_.q-tab\\_\\_indicator]:(h-[unset] w-2px min-h-100%)
+      [&_.q-tabs--not-scrollable_.q-tabs\\_\\_content]:(h-full) 
+      [&_.q-tabs--dense_.q-tab\\_\\_content]:(min-w-[24px])`
     ],
     [
         /^q-tabs--dense$/,

package/dist/styles/md3/components/QBanner.unocss.js

@@ -2,13 +2,18 @@ const shortcuts = [
     [
         /^q-banner$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-banner'] ??
-            `min-h-[54px] px-[16px] py-[8px] bg-[#fff]`
+            `min-h-[54px] px-[16px] py-[8px] bg-transparent`
     ],
     [/^q-banner--top-padding$/, ([, c], { theme }) => `pt-[14px]`],
     [
         /^q-banner__avatar$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-banner__avatar'] ??
-            `!flex-initial !min-w-[1px] [&_>_.q-avatar]:(text-[46px]) [&_>_.q-icon]:(text-[40px]) [&:not(:empty)_+_.q-banner\\_\\_content]:(pl-[16px])`
+            `!self-auto !flex-initial !min-w-[1px] [&_>_.q-avatar]:(text-[46px]) [&_>_.q-icon]:(text-[40px]) [&:not(:empty)_+_.q-banner\\_\\_content]:(pl-[16px])`
+    ],
+    [
+        /^q-banner__content$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-banner__content'] ??
+            `max-w-[calc(100%-56px)]`
     ],
     [
         /^q-banner__actions$/,

package/dist/styles/md3/components/QBtn.unocss.js

@@ -2,7 +2,7 @@ const shortcuts = [
     [
         /^q-btn$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-btn'] ??
-            `layer-components:bg-light-primary dark:bg-dark-primary layer-components:text-light-on-primary layer-components:dark:text-dark-on-primary inline-flex flex-col font-medium items-stretch relative outline-0 border-0 align-middle text-[14px] leading-[1.715em] no-underline font-medium text-center w-auto min-h-40px cursor-default px-[16px] py-[4px] min-h-[2.572em] [&_.q-icon]:(text-[1.715em]) [&_.q-spinner]:(text-[1.715em]) [&.disabled]:(!opacity-70) [&:before]:(content-empty block absolute left-[0] right-[0] top-[0] bottom-[0] [border-radius:inherit] elevation-2)`
+            `layer-components:bg-$light-primary dark:bg-$dark-primary layer-components:text-$light-on-primary layer-components:dark:text-$dark-on-primary inline-flex flex-col font-medium items-stretch relative outline-0 border-0 align-middle text-[14px] leading-[1.715em] no-underline font-medium text-center w-auto min-h-40px cursor-default px-[16px] py-[4px] min-h-[2.572em] [&_.q-icon]:(text-[1.715em]) [&_.q-spinner]:(text-[1.715em]) [&.disabled]:(!opacity-70) [&:before]:(content-empty block absolute left-[0] right-[0] top-[0] bottom-[0] [border-radius:inherit] elevation-2)`
     ],
     [
         /^q-btn--actionable$/,
@@ -14,8 +14,8 @@ const shortcuts = [
     [
         /^q-btn--outline$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-btn--outline'] ??
-            `!bg-transparent layer-components:text-light-primary layer-components:dark:text-dark-primary
-       [&:before]:(border-[1px] border-solid border-[currentColor] [box-shadow:none]]) 
+            `!bg-transparent layer-components:text-$light-primary layer-components:dark:text-$dark-primary
+       [&:before]:(shadow-none border-[1px] border-solid border-[currentColor]) 
        [&_.q-btn\\_\\_progress-indicator]:(opacity-20 bg-current)`
     ],
     [
@@ -33,7 +33,7 @@ const shortcuts = [
     [
         /^q-btn--flat$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-btn--flat'] ??
-            `!bg-transparent layer-components:text-light-primary layer-components:dark:text-dark-primary
+            `!bg-transparent layer-components:text-$light-primary layer-components:dark:text-$dark-primary
       [&:before]:([box-shadow:none]) 
       [&_.q-btn\\_\\_progress-indicator]:(opacity-20 bg-current)`
     ],
@@ -51,7 +51,7 @@ const shortcuts = [
     [
         /^q-btn--fab$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-btn--fab'] ??
-            `layer-components:bg-light-primary-container layer-components:dark:bg-dark-primary-container layer-components:text-light-on-surface layer-components:dark:text-dark-on-surface
+            `layer-components:bg-$light-primary-container layer-components:dark:bg-$dark-primary-container layer-components:text-$light-on-surface layer-components:dark:text-$dark-on-surface
        w-56px h-56px !rounded-16px
        z-${theme.quasar.z.fab}
        [&_.q-icon]:(text-[24px]) [&_.q-icon]:(m-auto)`
@@ -60,7 +60,7 @@ const shortcuts = [
     [
         /^q-btn--fab-mini$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-btn--fab-mini'] ??
-            `layer-components:bg-light-primary-container layer-components:dark:bg-dark-primary-container layer-components:text-light-on-surface layer-components:dark:text-dark-on-surface
+            `layer-components:bg-$light-primary-container layer-components:dark:bg-$dark-primary-container layer-components:text-$light-on-surface layer-components:dark:text-$dark-on-surface
       w-40px h-40px !rounded-16px
       [&_.q-icon]:(text-[24px])`
         // min-h-[40px] min-w-[40px]

package/dist/styles/md3/components/QBtnToggle.unocss.js

@@ -7,12 +7,13 @@ const shortcuts = [
       rounded-[3px] 
       [box-shadow:0_1px_5px_rgba(0,_0,_0,_0.2),_0_2px_2px_rgba(0,_0,_0,_0.14),_0_3px_1px_-2px_rgba(0,_0,_0,_0.12)] 
       align-middle 
-      [&_>_.q-btn-item]:(text-light-on-surface dark:text-dark-on-surface self-stretch) 
-      [&_>_.q-btn-item.bg-primary]:(!bg-light-primary !text-light-on-primary dark:!bg-dark-primary dark:!text-dark-on-primary)
+      [&_>_.q-btn]:(layer-components:bg-$light-surface-container layer-components:dark:bg-$dark-surface-container) 
+      [&_>_.q-btn-item]:(text-$light-on-surface dark:text-$dark-on-surface self-stretch) 
+      [&_>_.q-btn-item.bg-primary]:(!bg-$light-primary !text-$light-on-primary dark:!bg-$dark-primary dark:!text-$dark-on-primary)
       [&_>_.q-btn-item:before]:([box-shadow:none]) 
       [&_>_.q-btn-item_.q-badge--floating]:(right-0) 
       [&_>_.q-btn-group]:([box-shadow:none]) 
-      [&_>_.q-btn-group:first-child_>_.q-btn--active]:(!bg-light-secondary-container dark:!bg-dark-secondary-container) 
+      [&_>_.q-btn-group:first-child_>_.q-btn--active]:(!bg-$light-secondary-container dark:!bg-$dark-secondary-container) 
       [&_>_.q-btn-group:first-child_>_.q-btn:first-child]:([border-top-left-radius:inherit] [border-bottom-left-radius:inherit]) 
       [&_>_.q-btn-group:last-child_>_.q-btn:last-child]:() 
       [&_>_.q-btn-group:not(:first-child)_>_.q-btn:first-child]:(border-rd-l-0) 

package/dist/styles/md3/components/QCard.unocss.js

@@ -2,7 +2,7 @@ const shortcuts = [
     [
         /^q-card$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-card'] ??
-            `p-16px rounded-[12px] align-top bg-[#fff] relative bg-light-surface-container dark:bg-dark-surface-container
+            `p-16px rounded-[12px] align-top relative bg-$light-surface-container-low dark:bg-$dark-surface-container-low
       [&_>_div:not(.q--avoid-card-border)]:(rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none)
       [&_>_img:not(.q--avoid-card-border)]:(rounded-tl-none rounded-tr-none rounded-bl-none rounded-br-none)
       [&_>_div:nth-child(1_of_:not(.q--avoid-card-border))]:([border-top:0] [border-top-left-radius:inherit] [border-top-right-radius:inherit])
@@ -11,10 +11,15 @@ const shortcuts = [
       [&_>_img:nth-last-child(1_of_:not(.q--avoid-card-border))]:([border-bottom:0] [border-bottom-left-radius:inherit] [border-bottom-right-radius:inherit])
       [&_>_div:not(.q--avoid-card-border)]:([border-left:0] [border-right:0] shadow-none)
       [&_>_img]:(block w-full max-w-full border-[0])
-      [&:not(.disabled):focus]:(bg-light-secondary dark:bg-dark-secondary)
+      [&:not(.disabled):focus]:(bg-$light-secondary dark:bg-$dark-secondary)
       [&:not(.disabled):hover]:(shadow-md)
       [&.disabled]:(op-38)`
     ],
+    [
+        /^q-card--filled$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-card--filled'] ??
+            `bg-$light-surface-container-highest dark:bg-$dark-surface-container-highest`
+    ],
     [
         /^q-card--bordered$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-card--bordered'] ??

package/dist/styles/md3/components/QCheckbox.unocss.js

@@ -10,14 +10,18 @@ const shortcuts = [
         /^q-checkbox$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-checkbox'] ??
             `align-middle [&.disabled]:(!opacity-75)
-      [&:not(.disabled):hover_.q-checkbox\\_\\_inner:before]:(content-[''] absolute top-[12.5%] left-[12.5%] bottom-0 right-0 border-rd-50 bg-current op-12 scale-x-120 scale-y-120 scale-z-100)
+      [&:not(.disabled):hover_.q-checkbox\\_\\_inner:before]:(content-[''] absolute top-0 left-0 bottom-0 right-0 border-rd-50 bg-current op-12 scale-x-120 scale-y-120 scale-z-100)
       [&:not(.disabled):focus_.q-checkbox\\_\\_inner:before]:(scale-z-100)`
     ],
     [/^q-checkbox__native$/, ([, c], { theme }) => `w-px h-px`],
+    [
+        /^q-checkbox__label$/,
+        ([, c], { theme }) => theme.quasar?.components?.['q-checkbox__label'] ?? `pl-0.25em`
+    ],
     [
         /^q-checkbox__bg$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-checkbox__bg'] ??
-            `select-none top-1/4 left-1/4 w-1/2 h-1/2 border-[2px] border-solid border-[currentColor] rounded-[2px] [transition:background_0.22s_cubic-bezier(0,_0,_0.2,_1)_0ms]`
+            `ml--2px mt--2px select-none top-1/4 left-1/4 w-1/2 h-1/2 border-[2px] border-solid border-[currentColor] rounded-[2px] [transition:background_0.22s_cubic-bezier(0,_0,_0.2,_1)_0ms]`
     ],
     [/^q-checkbox__icon-container$/, ([, c], { theme }) => `select-none`],
     [/^q-checkbox__icon$/, ([, c], { theme }) => `text-current text-[0.5em]`],
@@ -35,27 +39,27 @@ const shortcuts = [
     [
         /^q-checkbox__inner$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-checkbox__inner'] ??
-            `text-[40px] w-[1em] min-w-[1em] h-[1em] outline-[0] rounded-[50%] layer-components:text-[rgba(0,_0,_0,_0.54)]`
+            `mr-2px text-[40px] w-[1em] min-w-[1em] h-[1em] outline-[0] rounded-[50%] layer-components:text-[rgba(0,_0,_0,_0.54)]`
     ],
     [
         /^q-checkbox__inner--truthy$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-checkbox__inner--truthy'] ??
-            `text-light-primary dark:text-dark-primary
+            `text-$light-primary dark:text-$dark-primary
       [&_.q-checkbox\\_\\_bg]:(bg-current)
       [&_path]:(stroke-offset-none [transition:stroke-dashoffset_0.18s_cubic-bezier(0.4,_0,_0.6,_1)_0ms])`
     ],
     [
         /^q-checkbox__inner--indet$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-checkbox__inner--indet'] ??
-            `text-light-primary dark:text-dark-primary [&_.q-checkbox\\_\\_bg]:(bg-current) [&_.q-checkbox\\_\\_indet]:(rotate-[0] scale-100 [transition:transform_0.22s_cubic-bezier(0,_0,_0.2,_1)_0ms])`
+            `text-$light-primary dark:text-$dark-primary [&_.q-checkbox\\_\\_bg]:(bg-current) [&_.q-checkbox\\_\\_indet]:(rotate-[0] scale-100 [transition:transform_0.22s_cubic-bezier(0,_0,_0.2,_1)_0ms])`
     ],
     [
         /^q-checkbox--dark$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-checkbox--dark'] ??
             `[&_.q-checkbox\\_\\_inner]:(layer-components:text-[rgba(255,_255,_255,_0.7)])
        [&_.q-checkbox\\_\\_inner:before]:(!opacity-[0.32])
-       [&_.q-checkbox\\_\\_inner--truthy]:(layer-components:(text-light-primary dark:text-dark-primary))
-       [&_.q-checkbox\\_\\_inner--indet]:(layer-components:(text-light-primary dark:text-dark-primary))`
+       [&_.q-checkbox\\_\\_inner--truthy]:(layer-components:(text-$light-primary dark:text-$dark-primary))
+       [&_.q-checkbox\\_\\_inner--indet]:(layer-components:(text-$light-primary dark:text-$dark-primary))`
     ],
     [
         /^q-checkbox--dense$/,

package/dist/styles/md3/components/QChip.unocss.js

@@ -15,8 +15,9 @@ const shortcuts = [
         /^q-chip$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-chip'] ??
             `!flex-initial align-middle rounded-[0.5em] outline-[0] relative h-[2em] max-w-full m-[4px] 
-      bg-light-surface-container dark:bg-dark-surface-container
-      text-light-on-surface dark:text-dark-on-surface
+      outline-solid outline-1px outline-$light-outline-variant dark:outline-$dark-outline-variant
+      bg-$light-surface-container-low dark:bg-$dark-secondary-container
+      text-$light-on-surface-variant dark:text-$dark-on-secondary-container
       text-[14px] px-[1em] py-[0.375em] 
       [&_.q-avatar]:(text-[2em] -ml-[0.45em] mr-[0.2em] rounded-[16px])`
     ],
@@ -42,7 +43,7 @@ const shortcuts = [
     [
         /^q-chip__icon$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-chip__icon'] ??
-            `text-light-primary dark:text-dark-primary text-[1.40625em] -m-[0.2em]`
+            `text-$light-primary dark:text-$dark-primary text-[1.40625em] -m-[0.2em]`
     ],
     [
         /^q-chip__icon--left$/,
@@ -70,7 +71,7 @@ const shortcuts = [
     [
         /^q-chip--square$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-chip--square'] ??
-            `rounded-[4px] [&_.q-avatar]:(rounded-tl-[3px] rounded-br-[0] rounded-tr-[0] rounded-bl-[3px])`
+            `rounded-[8px] [&_.q-avatar]:(rounded-tl-[3px] rounded-br-[0] rounded-tr-[0] rounded-bl-[3px])`
     ]
 ];
 export { preflights, shortcuts };

package/dist/styles/md3/components/QCircularProgress.unocss.js

@@ -21,7 +21,7 @@ const shortcuts = [
     [
         /^q-circular-progress$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-circular-progress'] ??
-            `text-light-primary dark:text-dark-primary inline-block relative align-middle w-[1em] h-[1em] leading-none`
+            `text-$light-primary dark:text-$dark-primary inline-block relative align-middle w-[1em] h-[1em] leading-none`
     ],
     [/^q-circular-progress__svg$/, ([, c], { theme }) => `w-full h-full`],
     [/^q-circular-progress__text$/, ([, c], { theme }) => `text-[0.25em]`],