unocss-preset-quasar 0.1.2 → 0.1.4

package/dist/index.js

@@ -3,10 +3,6 @@ import presetWind3 from '@unocss/preset-wind3';
 import { generateTheme } from './theme.js';
 import { animatedUno } from 'animated-unocss';
 import { preflights as corePreflights, rules as coreRules, shortcuts as coreShortcuts } from './core/index.js';
-const QuasarStyles = {
-    md2: import('./styles/md2/index.js'),
-    md3: import('./styles/md3/index.js')
-};
 const extractKeys = (obj) => Object.values(obj).reduce((acc, cur) => {
     if (typeof cur === 'string')
         acc.push(cur);
@@ -1475,19 +1471,12 @@ const generateSafelist = ({ plugins, iconSet }) => {
     }
     return safelist;
 };
-export const QuasarPreset = definePreset(async (options) => {
-    if (!options)
-        options = {
-            style: 'md2',
-            sourceColor: '#806cb0'
-        };
-    if (!Object.keys(QuasarStyles).includes(options.style))
-        throw new Error('Unsupported Quasar style');
+export const QuasarPreset = definePreset((options) => {
     if (!options.sourceColor) {
         options.sourceColor = '#806cb0';
     }
-    const style = (await QuasarStyles[options.style]).default;
-    const theme = await generateTheme(options.sourceColor);
+    const style = options.style;
+    const theme = generateTheme(options.sourceColor);
     return [
         presetWind3({
             dark: {

package/dist/styles/index.js

@@ -1,3 +1,3 @@
-import { setDefaultProps as setDefaultPropsMd2 } from './md2/index.js';
-import { setDefaultProps as setDefaultPropsMd3 } from './md3/index.js';
-export { setDefaultPropsMd2, setDefaultPropsMd3 };
+import { default as MaterialDesign2, setDefaultProps as setDefaultPropsMd2 } from './md2/index.js';
+import { default as MaterialDesign3, setDefaultProps as setDefaultPropsMd3 } from './md3/index.js';
+export { MaterialDesign2, MaterialDesign3, setDefaultPropsMd2, setDefaultPropsMd3 };

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

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

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

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

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

@@ -7,15 +7,15 @@ 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]:(bg-transparent text-light-on-surface dark:text-dark-on-surface self-stretch) 
+      [&_>_.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:first-child]:([border-top-left-radius:inherit] [border-bottom-left-radius:inherit]) 
-      [&_>_.q-btn-group:last-child_>_.q-btn:last-child]:([border-top-right-radius:inherit] [border-bottom-right-radius:inherit]) 
-      [&_>_.q-btn-group:not(:first-child)_>_.q-btn:first-child:before]:([border-left:0]) 
+      [&_>_.q-btn-group:last-child_>_.q-btn:last-child]:() 
+      [&_>_.q-btn-group:not(:first-child)_>_.q-btn:first-child]:(border-rd-l-0) 
       [&_>_.q-btn-group:not(:last-child)_>_.q-btn:last-child:before]:([border-right:0]) 
       [&_>_.q-btn-item:not(:last-child)]:(rounded-tr-none rounded-br-none) 
       [&_>_.q-btn-item:not(:first-child)]:(rounded-tl-none rounded-bl-none) 

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

@@ -59,8 +59,8 @@ const shortcuts = [
         ([, c], { theme }) => theme.quasar?.components?.['q-drawer__content'] ??
             `[&_>_.q-list]:(px-28px)
       [&_>_.q-list_>_.q-item]:(border-rd-16px)
-      [&_>_.q-list_>_.q-router-link--active]:(text-light-primary dark:text-dark-primary)
-      [&_>_.q-list_>_.q-router-link--exact-active]:(bg-light-secondary-container dark:bg-dark-secondary-container
+      [&_.q-list_>_.q-router-link--active]:(text-light-primary dark:text-dark-primary)
+      [&_.q-list_.q-router-link--exact-active]:(bg-light-secondary-container dark:bg-dark-secondary-container
       )`
     ]
 ];

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 text-light-on-surface dark:text-dark-on-surface inline-flex items-center justify-center v-middle
+  select-none cursor-inherit layer-components:(text-light-on-surface dark:text-dark-on-surface) inline-flex items-center justify-center v-middle
   `
     ],
     // [

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

@@ -21,20 +21,20 @@ const shortcuts = [
     [
         /^q-toggle__track$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-toggle__track'] ??
-            `outline-solid outline-2px outline-light-outline dark:outline-dark-outline !rounded-full h-[2em] w-[3.25em] bg-light-surface-container dark:bg-dark-surface-container`
+            `outline-solid outline-2px outline-light-outline dark:outline-dark-outline !rounded-full h-[1em] w-[1.6125em] bg-light-surface-container dark:bg-dark-surface-container`
     ],
     [
         /^q-toggle__thumb$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-toggle__thumb'] ??
-            `top-[0.5625em] left-[0.5625em] w-[1.5em] h-[1.5em] [transition:left_0.22s_cubic-bezier(0.4,_0,_0.2,_1)] select-none z-0 
+            `layer-components:text-light-surface-container-highest layer-components:dark:text-dark-surface-container-highest
+      top-[0.125em] left-[0.5125em] w-[0.75em] h-[0.75em] [transition:left_0.22s_cubic-bezier(0.4,_0,_0.2,_1)] select-none z-0 
     [&:before]:()
-    [&:after]:(content-[''] bg-light-outline dark:bg-dark-outline absolute top-[0] right-[0] bottom-[0] left-[0] rounded-[50%] [box-shadow:0_3px_1px_-2px_rgba(0,_0,_0,_0.2),_0_2px_2px_0_rgba(0,_0,_0,_0.14),_0_1px_5px_0_rgba(0,_0,_0,_0.12)]) 
-    [&_.q-icon]:(layer-components:text-[0.3em] min-w-[1em] layer-components:text-[#000] opacity-[0.54])`
+    [&:after]:(content-[''] layer-components:bg-light-outline layer-components:dark:bg-dark-outline absolute top-[0] right-[0] bottom-[0] left-[0] rounded-[50%] [box-shadow:0_3px_1px_-2px_rgba(0,_0,_0,_0.2),_0_2px_2px_0_rgba(0,_0,_0,_0.14),_0_1px_5px_0_rgba(0,_0,_0,_0.12)]) 
+    [&_.q-icon]:(z-2 layer-components:text-[0.5em] layer-components:text-[#000] opacity-[0.54])`
     ],
     [
         /^q-toggle__inner$/,
-        ([, c], { theme }) => theme.quasar?.components?.['q-toggle__inner'] ??
-            `text-[1.25em] w-[1.4em] min-w-[1.4em] max-h-[1em] px-[0.3em] py-[0.325em]`
+        ([, c], { theme }) => theme.quasar?.components?.['q-toggle__inner'] ?? `px-0.325em`
     ],
     [
         /^q-toggle__inner--indet$/,
@@ -45,8 +45,8 @@ const shortcuts = [
         /^q-toggle__inner--truthy$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-toggle__inner--truthy'] ??
             `[&_.q-toggle\\_\\_track]:(bg-light-primary dark:bg-dark-primary) 
-      [&_.q-toggle\\_\\_thumb]:(left-[1.625em] top-[0.45em] w-[1.75em] h-[1.75em])
-      [&_.q-toggle\\_\\_thumb:after]:(!bg-light-on-primary dark:!bg-dark-on-primary)
+      [&_.q-toggle\\_\\_thumb]:(text-light-on-primary-container dark:text-light-on-primary-container left-[0.95em] top-[0.0625em] w-[0.875em] h-[0.875em])
+      [&_.q-toggle\\_\\_thumb:after]:(layer-components:!bg-light-on-primary dark:!bg-dark-on-primary)
       [&_.q-toggle\\_\\_thumb_.q-icon]:(layer-components:text-[#fff] opacity-100)
       [&:not(.disabled):focus_.q-toggle\\_\\_thumb:before]:(scale-200)
       [&:not(.disabled):hover_.q-toggle\\_\\_thumb:before]:(scale-200)`

package/dist/theme.js

@@ -409,7 +409,7 @@ const defaultTheme = {
         }
     }
 };
-export const generateTheme = async (sourceColor) => {
+export const generateTheme = (sourceColor) => {
     const materialTheme = themeFromSourceColor(argbFromHex(sourceColor));
     return {
         ...defaultTheme,

package/dist/types/index.d.ts

@@ -1,19 +1,15 @@
 import { type Preset } from 'unocss';
 import { type QuasarIconSet, type QuasarPlugins } from 'quasar';
+import { type QuasarStyle } from './styles/index.js';
 import { WebFontsOptions } from '@unocss/preset-web-fonts/index.js';
 export interface QuasarPresetOptions {
-    style: keyof typeof QuasarStyles;
+    style: QuasarStyle;
     sourceColor?: string;
     plugins?: (keyof QuasarPlugins)[];
     iconSet?: QuasarIconSet;
     presetWebFonts?: WebFontsOptions;
 }
-declare const QuasarStyles: {
-    md2: Promise<typeof import("./styles/md2/index.js")>;
-    md3: Promise<typeof import("./styles/md3/index.js")>;
-};
 export declare const QuasarPreset: Preset<object>;
 export declare const defaultSplitRE: RegExp;
 export declare const splitWithVariantGroupRE: RegExp;
 export declare function splitCode(code: string): string[];
-export {};

package/dist/types/styles/index.d.ts

@@ -1,11 +1,11 @@
 import { Preflight, Rule, UserShortcuts, Variant } from '@unocss/core';
 import { QuasarTheme } from '../theme.js';
-import { setDefaultProps as setDefaultPropsMd2 } from './md2/index.js';
-import { setDefaultProps as setDefaultPropsMd3 } from './md3/index.js';
+import { default as MaterialDesign2, setDefaultProps as setDefaultPropsMd2 } from './md2/index.js';
+import { default as MaterialDesign3, setDefaultProps as setDefaultPropsMd3 } from './md3/index.js';
 export interface QuasarStyle {
     rules: Rule<QuasarTheme>[];
     variants: Variant<QuasarTheme>[];
     preflights: Preflight<QuasarTheme>[];
     shortcuts: UserShortcuts<QuasarTheme>[];
 }
-export { setDefaultPropsMd2, setDefaultPropsMd3 };
+export { MaterialDesign2, MaterialDesign3, setDefaultPropsMd2, setDefaultPropsMd3 };

package/dist/types/theme.d.ts

@@ -1187,5 +1187,5 @@ export interface QuasarTheme {
     };
 }
 declare const defaultTheme: QuasarTheme;
-export declare const generateTheme: (sourceColor: string) => Promise<QuasarTheme>;
+export declare const generateTheme: (sourceColor: string) => QuasarTheme;
 export { defaultTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unocss-preset-quasar",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "UnoCSS preset for Quasar Framework",

package/src/index.ts

@@ -24,18 +24,13 @@ import {
 import { WebFontsOptions } from '@unocss/preset-web-fonts/index.js'
 
 export interface QuasarPresetOptions {
-  style: keyof typeof QuasarStyles
+  style: QuasarStyle
   sourceColor?: string
   plugins?: (keyof QuasarPlugins)[]
   iconSet?: QuasarIconSet
   presetWebFonts?: WebFontsOptions
 }
 
-const QuasarStyles = {
-  md2: import('./styles/md2/index.js'),
-  md3: import('./styles/md3/index.js')
-}
-
 const extractKeys = (obj: Record<string, any>) =>
   Object.values(obj).reduce((acc, cur) => {
     if (typeof cur === 'string') acc.push(cur)
@@ -1520,153 +1515,142 @@ const generateSafelist = ({
   return safelist
 }
 
-export const QuasarPreset = definePreset(
-  async (options?: QuasarPresetOptions) => {
-    if (!options)
-      options = {
-        style: 'md2',
-        sourceColor: '#806cb0'
-      }
-    if (!Object.keys(QuasarStyles).includes(options.style))
-      throw new Error('Unsupported Quasar style')
-
-    if (!options.sourceColor) {
-      options.sourceColor = '#806cb0'
-    }
-
-    const style: QuasarStyle = (await QuasarStyles[options.style]).default
+export const QuasarPreset = definePreset((options: QuasarPresetOptions) => {
+  if (!options.sourceColor) {
+    options.sourceColor = '#806cb0'
+  }
 
-    const theme = await generateTheme(options.sourceColor)
+  const style = options.style
+  const theme = generateTheme(options.sourceColor)
 
-    return [
-      presetWind3({
-        dark: {
-          light: '.body--light',
-          dark: '.body--dark'
-        }
-      }),
-      animatedUno(),
-      presetIcons({}),
-      presetWebFonts(
-        options.presetWebFonts || {
-          provider: 'bunny',
-          fonts: {
-            roboto: 'Roboto'
-          }
+  return [
+    presetWind3({
+      dark: {
+        light: '.body--light',
+        dark: '.body--dark'
+      }
+    }),
+    animatedUno(),
+    presetIcons({}),
+    presetWebFonts(
+      options.presetWebFonts || {
+        provider: 'bunny',
+        fonts: {
+          roboto: 'Roboto'
         }
-      ),
-      {
-        name: 'quasar',
-        safelist: generateSafelist(options),
-        preflights: corePreflights.concat(style.preflights),
-        rules: coreRules.concat(style.rules),
-        variants: style.variants,
-        shortcuts: coreShortcuts.concat(style.shortcuts),
-        theme,
-        outputToCssLayers: true,
-        layers: {
-          components: -1,
-          default: 1,
-          utilities: 2
-        },
-        extractors: [
-          {
-            name: 'quasar-extractor',
-            order: 0,
-            extract({ code }) {
-              const kebabMatch = code.matchAll(/q-(\w)([\w-]*)/g)
-              const pascalMatch = code.matchAll(/Q([A-Z][a-z0-9]+)+/g)
-              const transitionMatch = code.matchAll(
-                /(transition|transition-show|transition-hide|transition-prev|transition-next)="(\S*)"/g
-              )
-              const colorMatch = code.matchAll(/color[=|:]"(.*?)"/g)
-
-              const pascalComponentsMatch: string[] = []
-              const matches: string[] = []
+      }
+    ),
+    {
+      name: 'quasar',
+      safelist: generateSafelist(options),
+      preflights: corePreflights.concat(style.preflights),
+      rules: coreRules.concat(style.rules),
+      variants: style.variants,
+      shortcuts: coreShortcuts.concat(style.shortcuts),
+      theme,
+      outputToCssLayers: true,
+      layers: {
+        components: -1,
+        default: 1,
+        utilities: 2
+      },
+      extractors: [
+        {
+          name: 'quasar-extractor',
+          order: 0,
+          extract({ code }) {
+            const kebabMatch = code.matchAll(/q-(\w)([\w-]*)/g)
+            const pascalMatch = code.matchAll(/Q([A-Z][a-z0-9]+)+/g)
+            const transitionMatch = code.matchAll(
+              /(transition|transition-show|transition-hide|transition-prev|transition-next)="(\S*)"/g
+            )
+            const colorMatch = code.matchAll(/color[=|:]"(.*?)"/g)
 
-              for (const match of kebabMatch) {
-                matches.push(match[0])
-                pascalComponentsMatch.push(toPascalCase(match[0]))
-              }
-              for (const match of pascalMatch) {
-                pascalComponentsMatch.push(match[0])
-                matches.push(toKebabCase(match[0]))
-              }
-              const transitionClasses = []
-              for (const match of transitionMatch) {
-                transitionClasses.push(
-                  ...[
-                    'enter-from',
-                    'enter-active',
-                    'enter-to',
-                    'leave-from',
-                    'leave-active',
-                    'leave-to'
-                  ].map((v) => `q-transition--${match[2]}-${v}`)
-                )
-              }
-              const colorClasses = []
-              for (const match of colorMatch) {
-                colorClasses.push(`text-${match[1]}`, `bg-${match[1]}`)
-              }
+            const pascalComponentsMatch: string[] = []
+            const matches: string[] = []
 
-              // const classes = qClasses.filter((c) =>
-              //   matches.some((component) => {
-              //     component = component.replaceAll(
-              //       'q-chat-message',
-              //       'q-message'
-              //     )
-              //     component = component.replaceAll(
-              //       'q-scroll-area',
-              //       'q-scrollarea'
-              //     )
-              //     return c.includes(component)
-              //   })
-              // )
-              const classes = []
-              const componentClasses = [
-                ...matches,
-                ...pascalComponentsMatch.reduce((acc, component) => {
-                  if (component in componentsSafelistMap) {
-                    acc.push(
-                      ...(componentsSafelistMap as Record<string, string>)[
-                        component
-                      ]
-                    )
-                  }
-                  return acc
-                }, [] as string[])
-              ]
-              classes.push(
-                ...transitionClasses,
-                ...colorClasses,
-                ...componentClasses
+            for (const match of kebabMatch) {
+              matches.push(match[0])
+              pascalComponentsMatch.push(toPascalCase(match[0]))
+            }
+            for (const match of pascalMatch) {
+              pascalComponentsMatch.push(match[0])
+              matches.push(toKebabCase(match[0]))
+            }
+            const transitionClasses = []
+            for (const match of transitionMatch) {
+              transitionClasses.push(
+                ...[
+                  'enter-from',
+                  'enter-active',
+                  'enter-to',
+                  'leave-from',
+                  'leave-active',
+                  'leave-to'
+                ].map((v) => `q-transition--${match[2]}-${v}`)
               )
-              return classes
             }
+            const colorClasses = []
+            for (const match of colorMatch) {
+              colorClasses.push(`text-${match[1]}`, `bg-${match[1]}`)
+            }
+
+            // const classes = qClasses.filter((c) =>
+            //   matches.some((component) => {
+            //     component = component.replaceAll(
+            //       'q-chat-message',
+            //       'q-message'
+            //     )
+            //     component = component.replaceAll(
+            //       'q-scroll-area',
+            //       'q-scrollarea'
+            //     )
+            //     return c.includes(component)
+            //   })
+            // )
+            const classes = []
+            const componentClasses = [
+              ...matches,
+              ...pascalComponentsMatch.reduce((acc, component) => {
+                if (component in componentsSafelistMap) {
+                  acc.push(
+                    ...(componentsSafelistMap as Record<string, string>)[
+                      component
+                    ]
+                  )
+                }
+                return acc
+              }, [] as string[])
+            ]
+            classes.push(
+              ...transitionClasses,
+              ...colorClasses,
+              ...componentClasses
+            )
+            return classes
           }
-        ],
-        transformers: [
-          transformerVariantGroup()
-          // {
-          //   name: 'find-classes-in-quasar-src',
-          //   enforce: 'pre', // enforce before other transformers
-          //   idFilter(id) {
-          //     return id.match(/quasar\/src\/.*\.js/)
-          //   },
-          //   async transform(code, id, { uno }) {
-          //     for (const c of baseSafelist) {
-          //       if (code.toString().includes(c)) console.log(c)
-          //     }
-          //     return code
-          //     // code is a MagicString instance
-          //   }
-          // }
-        ]
-      } as Preset
-    ]
-  }
-)
+        }
+      ],
+      transformers: [
+        transformerVariantGroup()
+        // {
+        //   name: 'find-classes-in-quasar-src',
+        //   enforce: 'pre', // enforce before other transformers
+        //   idFilter(id) {
+        //     return id.match(/quasar\/src\/.*\.js/)
+        //   },
+        //   async transform(code, id, { uno }) {
+        //     for (const c of baseSafelist) {
+        //       if (code.toString().includes(c)) console.log(c)
+        //     }
+        //     return code
+        //     // code is a MagicString instance
+        //   }
+        // }
+      ]
+    } as Preset
+  ]
+})
 
 export const defaultSplitRE = /[\\:]?[\s'"`;{}]+/g
 export const splitWithVariantGroupRE = /([\\:]?[\s"'`;<>]|:\(|\)"|\)\s)/g

package/src/styles/index.ts

@@ -1,7 +1,13 @@
 import { Preflight, Rule, UserShortcuts, Variant } from '@unocss/core'
 import { QuasarTheme } from '../theme.js'
-import { setDefaultProps as setDefaultPropsMd2 } from './md2/index.js'
-import { setDefaultProps as setDefaultPropsMd3 } from './md3/index.js'
+import {
+  default as MaterialDesign2,
+  setDefaultProps as setDefaultPropsMd2
+} from './md2/index.js'
+import {
+  default as MaterialDesign3,
+  setDefaultProps as setDefaultPropsMd3
+} from './md3/index.js'
 
 export interface QuasarStyle {
   rules: Rule<QuasarTheme>[]
@@ -10,4 +16,9 @@ export interface QuasarStyle {
   shortcuts: UserShortcuts<QuasarTheme>[]
 }
 
-export { setDefaultPropsMd2, setDefaultPropsMd3 }
+export {
+  MaterialDesign2,
+  MaterialDesign3,
+  setDefaultPropsMd2,
+  setDefaultPropsMd3
+}

package/src/styles/md2/components/QBanner.unocss.ts

@@ -15,7 +15,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-banner__avatar$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-banner__avatar'] ??
-      `!min-w-[1px] [&_>_.q-avatar]:(text-[46px]) [&_>_.q-icon]:(text-[40px]) [&:not(:empty)_+_.q-banner\\_\\_content]:(pl-[16px])`
+      `!flex-initial !min-w-[1px] [&_>_.q-avatar]:(text-[46px]) [&_>_.q-icon]:(text-[40px]) [&:not(:empty)_+_.q-banner\\_\\_content]:(pl-[16px])`
   ],
 
   [

package/src/styles/md3/components/QBanner.unocss.ts

@@ -15,7 +15,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-banner__avatar$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-banner__avatar'] ??
-      `!min-w-[1px] [&_>_.q-avatar]:(text-[46px]) [&_>_.q-icon]:(text-[40px]) [&:not(:empty)_+_.q-banner\\_\\_content]:(pl-[16px])`
+      `!flex-initial !min-w-[1px] [&_>_.q-avatar]:(text-[46px]) [&_>_.q-icon]:(text-[40px]) [&:not(:empty)_+_.q-banner\\_\\_content]:(pl-[16px])`
   ],
 
   [

package/src/styles/md3/components/QBtnToggle.unocss.ts

@@ -12,15 +12,15 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
       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]:(bg-transparent text-light-on-surface dark:text-dark-on-surface self-stretch) 
+      [&_>_.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:first-child]:([border-top-left-radius:inherit] [border-bottom-left-radius:inherit]) 
-      [&_>_.q-btn-group:last-child_>_.q-btn:last-child]:([border-top-right-radius:inherit] [border-bottom-right-radius:inherit]) 
-      [&_>_.q-btn-group:not(:first-child)_>_.q-btn:first-child:before]:([border-left:0]) 
+      [&_>_.q-btn-group:last-child_>_.q-btn:last-child]:() 
+      [&_>_.q-btn-group:not(:first-child)_>_.q-btn:first-child]:(border-rd-l-0) 
       [&_>_.q-btn-group:not(:last-child)_>_.q-btn:last-child:before]:([border-right:0]) 
       [&_>_.q-btn-item:not(:last-child)]:(rounded-tr-none rounded-br-none) 
       [&_>_.q-btn-item:not(:first-child)]:(rounded-tl-none rounded-bl-none) 

package/src/styles/md3/components/QDrawer.unocss.ts

@@ -85,8 +85,8 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
       theme.quasar?.components?.['q-drawer__content'] ??
       `[&_>_.q-list]:(px-28px)
       [&_>_.q-list_>_.q-item]:(border-rd-16px)
-      [&_>_.q-list_>_.q-router-link--active]:(text-light-primary dark:text-dark-primary)
-      [&_>_.q-list_>_.q-router-link--exact-active]:(bg-light-secondary-container dark:bg-dark-secondary-container
+      [&_.q-list_>_.q-router-link--active]:(text-light-primary dark:text-dark-primary)
+      [&_.q-list_.q-router-link--exact-active]:(bg-light-secondary-container dark:bg-dark-secondary-container
       )`
   ]
 ]

package/src/styles/md3/components/QIcon.unocss.ts

@@ -13,7 +13,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [&>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 text-light-on-surface dark:text-dark-on-surface inline-flex items-center justify-center v-middle
+  select-none cursor-inherit layer-components:(text-light-on-surface dark:text-dark-on-surface) inline-flex items-center justify-center v-middle
   `
   ],
   // [

package/src/styles/md3/components/QToggle.unocss.ts

@@ -29,24 +29,24 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-toggle__track$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-toggle__track'] ??
-      `outline-solid outline-2px outline-light-outline dark:outline-dark-outline !rounded-full h-[2em] w-[3.25em] bg-light-surface-container dark:bg-dark-surface-container`
+      `outline-solid outline-2px outline-light-outline dark:outline-dark-outline !rounded-full h-[1em] w-[1.6125em] bg-light-surface-container dark:bg-dark-surface-container`
   ],
 
   [
     /^q-toggle__thumb$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-toggle__thumb'] ??
-      `top-[0.5625em] left-[0.5625em] w-[1.5em] h-[1.5em] [transition:left_0.22s_cubic-bezier(0.4,_0,_0.2,_1)] select-none z-0 
+      `layer-components:text-light-surface-container-highest layer-components:dark:text-dark-surface-container-highest
+      top-[0.125em] left-[0.5125em] w-[0.75em] h-[0.75em] [transition:left_0.22s_cubic-bezier(0.4,_0,_0.2,_1)] select-none z-0 
     [&:before]:()
-    [&:after]:(content-[''] bg-light-outline dark:bg-dark-outline absolute top-[0] right-[0] bottom-[0] left-[0] rounded-[50%] [box-shadow:0_3px_1px_-2px_rgba(0,_0,_0,_0.2),_0_2px_2px_0_rgba(0,_0,_0,_0.14),_0_1px_5px_0_rgba(0,_0,_0,_0.12)]) 
-    [&_.q-icon]:(layer-components:text-[0.3em] min-w-[1em] layer-components:text-[#000] opacity-[0.54])`
+    [&:after]:(content-[''] layer-components:bg-light-outline layer-components:dark:bg-dark-outline absolute top-[0] right-[0] bottom-[0] left-[0] rounded-[50%] [box-shadow:0_3px_1px_-2px_rgba(0,_0,_0,_0.2),_0_2px_2px_0_rgba(0,_0,_0,_0.14),_0_1px_5px_0_rgba(0,_0,_0,_0.12)]) 
+    [&_.q-icon]:(z-2 layer-components:text-[0.5em] layer-components:text-[#000] opacity-[0.54])`
   ],
 
   [
     /^q-toggle__inner$/,
     ([, c], { theme }) =>
-      theme.quasar?.components?.['q-toggle__inner'] ??
-      `text-[1.25em] w-[1.4em] min-w-[1.4em] max-h-[1em] px-[0.3em] py-[0.325em]`
+      theme.quasar?.components?.['q-toggle__inner'] ?? `px-0.325em`
   ],
 
   [
@@ -61,8 +61,8 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-toggle__inner--truthy'] ??
       `[&_.q-toggle\\_\\_track]:(bg-light-primary dark:bg-dark-primary) 
-      [&_.q-toggle\\_\\_thumb]:(left-[1.625em] top-[0.45em] w-[1.75em] h-[1.75em])
-      [&_.q-toggle\\_\\_thumb:after]:(!bg-light-on-primary dark:!bg-dark-on-primary)
+      [&_.q-toggle\\_\\_thumb]:(text-light-on-primary-container dark:text-light-on-primary-container left-[0.95em] top-[0.0625em] w-[0.875em] h-[0.875em])
+      [&_.q-toggle\\_\\_thumb:after]:(layer-components:!bg-light-on-primary dark:!bg-dark-on-primary)
       [&_.q-toggle\\_\\_thumb_.q-icon]:(layer-components:text-[#fff] opacity-100)
       [&:not(.disabled):focus_.q-toggle\\_\\_thumb:before]:(scale-200)
       [&:not(.disabled):hover_.q-toggle\\_\\_thumb:before]:(scale-200)`

package/src/styles/md3/index.ts

@@ -127,7 +127,6 @@ import { shortcuts as QFooterShortcuts } from './components/QFooter.unocss.js'
 import { shortcuts as QDrawerShortcuts } from './components/QDrawer.unocss.js'
 import { QuasarStyle } from '../index.js'
 
-import { QBtn as QuasarButton } from 'quasar'
 const style: QuasarStyle = {
   variants: [],
   preflights: ([] as Preflight<QuasarTheme>[]).concat(

package/src/theme.ts

@@ -1621,9 +1621,7 @@ const defaultTheme: QuasarTheme = {
   }
 }
 
-export const generateTheme = async (
-  sourceColor: string
-): Promise<QuasarTheme> => {
+export const generateTheme = (sourceColor: string): QuasarTheme => {
   const materialTheme = themeFromSourceColor(argbFromHex(sourceColor))
 
   return {