unocss-preset-quasar 0.1.6 → 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/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/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,7 +14,7 @@ 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
+            `!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,13 +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]:(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]:(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 relative bg-light-surface-container-low dark:bg-dark-surface-container-low
+            `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,14 +11,14 @@ 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`
+            `bg-$light-surface-container-highest dark:bg-$dark-surface-container-highest`
     ],
     [
         /^q-card--bordered$/,

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

@@ -44,22 +44,22 @@ const shortcuts = [
     [
         /^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,9 +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] 
-      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
+      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])`
     ],
@@ -43,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$/,

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]`],

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

@@ -2,7 +2,7 @@ const shortcuts = [
     [
         /^q-date$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-date'] ??
-            `bg-light-surface-container-high dark:bg-dark-surface-container-high inline-flex [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)] rounded-[4px] bg-[#fff] w-[290px] min-w-[290px] max-w-full`
+            `bg-$light-surface-container-high dark:bg-$dark-surface-container-high inline-flex [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)] rounded-[4px] bg-[#fff] w-[290px] min-w-[290px] max-w-full`
     ],
     [
         /^q-date--bordered$/,
@@ -50,7 +50,7 @@ const shortcuts = [
         ([, c], { theme }) => theme.quasar?.components?.['q-date__navigation'] ??
             `h-[12.5%]
       [&_>_div:first-child]:(w-[8%] min-w-[24px] justify-end) [&_>_div:last-child]:(w-[8%] min-w-[24px] justify-start)
-      [&_.q-btn]:(text-light-on-surface dark:text-dark-on-surface)`
+      [&_.q-btn]:(text-$light-on-surface dark:text-$dark-on-surface)`
     ],
     [
         /^q-date__calendar-weekdays$/,
@@ -67,8 +67,8 @@ const shortcuts = [
     [
         /^q-date__calendar-item--in$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-date__calendar-item--in'] ??
-            `[&_.q-btn]:(text-light-on-primary dark:text-dark-on-primary bg-light-primary dark:bg-dark-primary)
-       [&_.q-btn--flat]:(text-light-on-surface dark:text-dark-on-surface)`
+            `[&_.q-btn]:(text-$light-on-primary dark:text-$dark-on-primary bg-$light-primary dark:bg-$dark-primary)
+       [&_.q-btn--flat]:(text-$light-on-surface dark:text-$dark-on-surface)`
     ],
     [
         /^q-date__range$/,
@@ -88,7 +88,7 @@ const shortcuts = [
     [
         /^q-date__edit-range$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-date__edit-range'] ??
-            `[&:after]:(border-light-primary dark:border-dark-primary border-l-transparent border-r-transparent) 
+            `[&:after]:(border-$light-primary dark:border-$dark-primary border-l-transparent border-r-transparent) 
       [&:nth-child(7n-6):after]:(rounded-tl-none rounded-bl-none) 
       [&:nth-child(7n):after]:(rounded-tr-none rounded-br-none)`
     ],
@@ -96,18 +96,18 @@ const shortcuts = [
         /^q-date__edit-range-from$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-date__edit-range-from'] ??
             `[&:after]:(left-[4px] 
-      border-r-0 border-light-primary dark:border-dark-primary rounded-tl-[28px] rounded-bl-[28px])`
+      border-r-0 border-$light-primary dark:border-$dark-primary rounded-tl-[28px] rounded-bl-[28px])`
     ],
     [
         /^q-date__edit-range-from-to$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-date__edit-range-from-to'] ??
-            `[&:after]:(left-[4px] border-light-primary dark:border-dark-primary border-r-transparent rounded-tl-[28px] rounded-bl-[28px]) 
-      [&:after]:(right-[4px] [border-light-primary dark:border-dark-primary border-l-transparent rounded-tr-[28px] rounded-br-[28px])`
+            `[&:after]:(left-[4px] border-$light-primary dark:border-$dark-primary border-r-transparent rounded-tl-[28px] rounded-bl-[28px]) 
+      [&:after]:(right-[4px] [border-$light-primary dark:border-$dark-primary border-l-transparent rounded-tr-[28px] rounded-br-[28px])`
     ],
     [
         /^q-date__edit-range-to$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-date__edit-range-to'] ??
-            `[&:after]:(right-[4px] border-l-transparent border-light-primary dark:border-dark-primary rounded-tr-[28px] rounded-br-[28px])`
+            `[&:after]:(right-[4px] border-l-transparent border-$light-primary dark:border-$dark-primary rounded-tr-[28px] rounded-br-[28px])`
     ],
     [
         /^q-date__calendar-days-container$/,
@@ -118,7 +118,7 @@ const shortcuts = [
     [
         /^q-date__event$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-date__event'] ??
-            `absolute bottom-[2px] left-2/4 h-[5px] w-[8px] rounded-[5px] [transform:translate3d(-50%,_0,_0)] bg-light-primary dark:bg-dark-primary`
+            `absolute bottom-[2px] left-2/4 h-[5px] w-[8px] rounded-[5px] [transform:translate3d(-50%,_0,_0)] bg-$light-primary dark:bg-$dark-primary`
     ],
     [
         /^q-date__today$/,
@@ -134,8 +134,8 @@ const shortcuts = [
         /^q-date__years-item$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-date__years-item'] ??
             `flex-[0_0_33.3333%]
-        [&_.q-btn]:(h-30px w-60px text-light-on-primary dark:text-dark-on-primary bg-light-primary dark:bg-dark-primary)
-       [&_.q-btn--flat]:(h-30px w-60px text-light-on-surface dark:text-dark-on-surface)`
+        [&_.q-btn]:(h-30px w-60px text-$light-on-primary dark:text-$dark-on-primary bg-$light-primary dark:bg-$dark-primary)
+       [&_.q-btn--flat]:(h-30px w-60px text-$light-on-surface dark:text-$dark-on-surface)`
     ],
     [
         /^q-date__arrow$/,
@@ -151,8 +151,8 @@ const shortcuts = [
         /^q-date__months-item$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-date__months-item'] ??
             `flex-[0_0_33.3333%]
-          [&_.q-btn]:(text-light-on-primary dark:text-dark-on-primary bg-light-primary dark:bg-dark-primary)
-       [&_.q-btn--flat]:(text-light-on-surface dark:text-dark-on-surface)`
+          [&_.q-btn]:(text-$light-on-primary dark:text-$dark-on-primary bg-$light-primary dark:bg-$dark-primary)
+       [&_.q-btn--flat]:(text-$light-on-surface dark:text-$dark-on-surface)`
     ],
     [
         /^q-date--readonly$/,

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

@@ -2,7 +2,7 @@ const shortcuts = [
     [
         /^q-drawer$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-drawer'] ??
-            `border-rd-16px absolute top-[0] bottom-[0] bg-light-surface-container-low dark:bg-dark-surface-container-low z-${theme.quasar.z['side']}`
+            `border-rd-16px absolute top-[0] bottom-[0] bg-$light-surface-container-low dark:bg-$dark-surface-container-low z-${theme.quasar.z['side']}`
     ],
     [
         /^q-drawer--on-top$/,
@@ -71,9 +71,9 @@ const shortcuts = [
       [&_>_.q-scrollarea]:(px-0)
       [&_>_.q-list]:(px-12px)
       [&_.q-list_.q-item]:(border-rd-32px)
-      [&_.q-list_.q-item:hover]:(bg-light-on-secondary-container/8 dark:bg-dark-on-secondary-container/8)
-      [&_.q-list_>_.q-router-link--active]:(text-light-primary dark:text-dark-primary)
-      [&_.q-list_.q-router-link--active]:(bg-light-secondary-container dark:bg-dark-secondary-container)
+      [&_.q-list_.q-item:hover]:(bg-$light-on-secondary-container/8 dark:bg-$dark-on-secondary-container/8)
+      [&_.q-list_>_.q-router-link--active]:(text-$light-primary dark:text-$dark-primary)
+      [&_.q-list_.q-router-link--active]:(bg-$light-secondary-container dark:bg-$dark-secondary-container)
       `
     ]
 ];

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

@@ -83,7 +83,7 @@ const shortcuts = [
     [
         /^q-field__control$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-field__control'] ??
-            `h-[56px] max-w-full outline-none text-light-primary dark:text-dark-primary
+            `h-[56px] max-w-full outline-none text-$light-primary dark:text-$dark-primary
 	[&:before]:(content-empty top-[0] right-[0] bottom-[0] left-[0] pointer-events-none absolute border-rd-inherit) 
 	[&:after]:(content-empty top-[0] right-[0] bottom-[0] left-[0] pointer-events-none absolute)`
     ],
@@ -174,8 +174,8 @@ const shortcuts = [
     [
         /^q-field--filled$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-field--filled'] ??
-            `[&_.q-field\\_\\_control]:(bg-light-surface-container text-light-on-surface-variant
-       dark:bg-dark-surface-container dark:text-dark-on-surface-variant)
+            `[&_.q-field\\_\\_control]:(bg-$light-surface-container-highest text-$light-on-surface-variant
+       dark:bg-$dark-surface-container-highest dark:text-$dark-on-surface-variant)
       [&_.q-field\\_\\_control]:(px-[16px] py-[0] layer-components:bg-black/5 rounded-tl-[4px] rounded-br-[0] rounded-tr-[4px] rounded-bl-[0]) 
       [&_.q-field\\_\\_control:before]:(layer-components:bg-black/5 [border-bottom:1px_solid_rgba(0,_0,_0,_0.42)] opacity-0 [transition:opacity_0.36s_cubic-bezier(0.4,_0,_0.2,_1),_background_0.36s_cubic-bezier(0.4,_0,_0.2,_1)]) 
       [&_.q-field\\_\\_control:hover:before]:(opacity-100) 
@@ -229,28 +229,29 @@ const shortcuts = [
     [
         /^q-field--standout$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-field--standout'] ??
-            `[&_.q-field\\_\\_control]:(px-[12px] py-[0] layer-components:bg-light-surface-container-high
+            `[&_.q-field\\_\\_control]:(px-[12px] py-[0] layer-components:bg-$light-surface-container-highest
        rounded-[4px] [transition:box-shadow_0.36s_cubic-bezier(0.4,_0,_0.2,_1),_background-color_0.36s_cubic-bezier(0.4,_0,_0.2,_1)]) 
 	[&_.q-field\\_\\_control:before]:(layer-components:bg-black/7 opacity-0 [transition:opacity_0.36s_cubic-bezier(0.4,_0,_0.2,_1),_background_0.36s_cubic-bezier(0.4,_0,_0.2,_1)]) 
 	[&_.q-field\\_\\_control:hover:before]:(opacity-100) 
 	[&.q-field--rounded_.q-field\\_\\_control]:(rounded-[28px]) 
 	[&.q-field--highlighted_.q-field\\_\\_control]:([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)]) 
-	[&.q-field--highlighted_.q-field\\_\\_native]:(text-light-primary) 
-	[&.q-field--highlighted_.q-field\\_\\_prefix]:(text-light-primary) 
-	[&.q-field--highlighted_.q-field\\_\\_suffix]:(text-light-primary) 
-	[&.q-field--highlighted_.q-field\\_\\_prepend]:(text-light-primary) 
-	[&.q-field--highlighted_.q-field\\_\\_append]:(text-light-primary) 
-	[&.q-field--highlighted_.q-field\\_\\_input]:(text-light-on-surface) 
+	[&.q-field--highlighted_.q-field\\_\\_native]:(text-$light-primary) 
+	[&.q-field--highlighted_.q-field\\_\\_prefix]:(text-$light-primary) 
+	[&.q-field--highlighted_.q-field\\_\\_suffix]:(text-$light-primary) 
+	[&.q-field--highlighted_.q-field\\_\\_prepend]:(text-$light-primary) 
+	[&.q-field--highlighted_.q-field\\_\\_append]:(text-$light-primary) 
+	[&.q-field--highlighted_.q-field\\_\\_input]:(text-$light-on-surface) 
 	[&.q-field--readonly_.q-field\\_\\_control:before]:(opacity-100 bg-transparent border-[1px] border-dashed border-black/24) 
-	[&.q-field--dark_.q-field\\_\\_control]:(bg-dark-surface-container-high) 
+	[&.q-field--dark_.q-field\\_\\_control]:(bg-$dark-surface-container-highest) 
 	[&.q-field--dark_.q-field\\_\\_control:before]:(layer-components:bg-white/7) 
-	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_control]:(layer-components:bg-dark-surface-container-highest) 
-	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_native]:(text-dark-primary) 
-	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_prefix]:(text-dark-primary) 
-	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_suffix]:(text-dark-primary) 
-	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_prepend]:(text-dark-primary) 
-	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_append]:(text-dark-primary) 
-	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_input]:(!text-dark-on-surface) 
+	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_control]:(layer-components:bg-$dark-surface-container-highest) 
+	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_native]:(text-$dark-primary) 
+	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_prefix]:(text-$dark-primary) 
+	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_suffix]:(text-$dark-primary) 
+	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_prepend]:(text-$dark-primary) 
+	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_append]:(text-$dark-primary) 
+	[&.q-field--dark.q-field--highlighted_.q-field\\_\\_input]:(!      [&_>_.q-btn-item]:(text-$light-on-surface dark:text-$dark-on-surface self-stretch) 
+text-$dark-on-surface) 
 	[&.q-field--dark.q-field--readonly_.q-field\\_\\_control:before]:(border-white/24)`
     ],
     [

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

@@ -7,7 +7,7 @@ const shortcuts = [
   [&>img]:(h-full w-full)
   [&:before]:(w-full h-full flex! items-center justify-center)
   [&:after]:(w-full h-full flex! items-center justify-center)
-  select-none cursor-inherit layer-components:text-light-on-surface layer-components:dark:text-dark-on-surface inline-flex items-center justify-center v-middle
+  select-none cursor-inherit layer-components:text-$light-on-surface layer-components:dark:text-$dark-on-surface inline-flex items-center justify-center v-middle
   `
     ],
     // [

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

@@ -3,7 +3,7 @@ const shortcuts = [
         /^q-item$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-item'] ??
             `min-h-[28px] px-[16px] py-[8px] [color:inherit] [transition:color_0.3s,_background-color_0.3s] [&_>_.q-item\\_\\_section--thumbnail:first-child]:(-ml-[16px]) [&_>_.q-focus-helper_+_.q-item\\_\\_section--thumbnail]:(-ml-[16px]) [&_>_.q-item\\_\\_section--thumbnail:last-of-type]:(-mr-[16px]) relative
-    [&.q-router-link--active]:(text-light-primary dark:text-dark-primary)`
+    [&.q-router-link--active]:(text-$light-primary dark:text-$dark-primary)`
     ],
     [
         /^q-item__section--side$/,
@@ -90,7 +90,7 @@ const shortcuts = [
     ],
     [
         /^q-item--active$/,
-        ([, c], { theme }) => `text-light-primary dark:text-dark-primary`
+        ([, c], { theme }) => `text-$light-primary dark:text-$dark-primary`
     ]
 ];
 export { shortcuts };

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

@@ -78,7 +78,7 @@ const shortcuts = [
     [
         /^q-layout__section--marginal$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-layout__section--marginal'] ??
-            `text-[#fff] bg-light-surface-container-low dark:bg-dark-surface-container-low text-light-on-surface dark:text-dark-on-surface`
+            `text-[#fff] bg-$light-surface-container-low dark:bg-$dark-surface-container-low text-$light-on-surface dark:text-$dark-on-surface`
     ]
 ];
 export { preflights, shortcuts };

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

@@ -2,7 +2,7 @@ const shortcuts = [
     [
         /^q-menu$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-menu'] ??
-            `bg-light-surface-container dark:bg-dark-surface-container text-light-on-surface dark:text-dark-on-surface
+            `bg-$light-surface-container dark:bg-$dark-surface-container text-$light-on-surface dark:text-$dark-on-surface
       !fixed inline-block max-w-[95vw] max-h-[65vh] [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)] rounded-[4px] overflow-y-auto overflow-x-hidden outline-0 z-${theme.quasar.z['menu']}`
     ],
     [/^q-menu--square$/, ([, c], { theme }) => `rounded-none`],

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

@@ -49,13 +49,13 @@ const shortcuts = [
         /^q-radio__check$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-radio__check'] ??
             `origin-[50%_50%] [transform:scale3d(0,_0,_1)] [transition:transform_0.22s_cubic-bezier(0,_0,_0.2,_1)_0ms]
-      text-light-primary dark:text-dark-primary`
+      text-$light-primary dark:text-$dark-primary`
     ],
     [
         /^q-radio__inner$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-radio__inner'] ??
             `text-[40px] w-[1em] min-w-[1em] h-[1em] outline-[0] rounded-[50%]
-      text-light-on-surface-variant dark:text-dark-on-surface-variant`
+      text-$light-on-surface-variant dark:text-$dark-on-surface-variant`
     ],
     [
         /^q-radio__inner--truthy$/,

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

@@ -21,12 +21,12 @@ const shortcuts = [
     [
         /^q-slider__track$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-slider__track'] ??
-            `bg-light-secondary-container/10 dark:bg-dark-secondary-container/10 rounded-[4px] [width:inherit] [height:inherit] text-light-primary dark:text-dark-primary`
+            `bg-$light-secondary-container/10 dark:bg-$dark-secondary-container/10 rounded-[4px] [width:inherit] [height:inherit] text-$light-primary dark:text-$dark-primary`
     ],
     [
         /^q-slider__inner$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-slider__inner'] ??
-            `bg-light-secondary-container/10 dark:bg-dark-secondary-container/10 [border-radius:inherit] w-full h-full`
+            `bg-$light-secondary-container/10 dark:bg-$dark-secondary-container/10 [border-radius:inherit] w-full h-full`
     ],
     [
         /^q-slider__selection$/,

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

@@ -3,13 +3,13 @@ const shortcuts = [
         /^q-stepper$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-stepper'] ??
             `[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)] rounded-[4px]
-      bg-light-surface dark:bg-dark-surface
+      bg-$light-surface dark:bg-$dark-surface
       `
     ],
     [
         /^q-stepper__label$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-stepper__label'] ??
-            `bg-light-surface dark:bg-dark-surface`
+            `bg-$light-surface dark:bg-$dark-surface`
     ],
     [
         /^q-stepper__title$/,
@@ -53,7 +53,7 @@ const shortcuts = [
     [
         /^q-stepper__tab--active$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-stepper__tab--active'] ??
-            `text-light-primary dark:text-dark-primary [&_.q-stepper\\_\\_dot]:([text-shadow:0_0_0_currentColor]) 
+            `text-$light-primary dark:text-$dark-primary [&_.q-stepper\\_\\_dot]:([text-shadow:0_0_0_currentColor]) 
       [&_.q-stepper\\_\\_label]:([text-shadow:0_0_0_currentColor])`
     ],
     [

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

@@ -53,7 +53,7 @@ const shortcuts = [
     [
         /^q-tab--active$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-tab--active'] ??
-            `text-light-primary dark:text-dark-primary [&_.q-tab\\_\\_indicator]:(opacity-100 origin-left)`
+            `text-$light-primary dark:text-$dark-primary [&_.q-tab\\_\\_indicator]:(opacity-100 origin-left)`
     ],
     [
         /^q-tab--inactive$/,