unocss-preset-quasar 0.2.0 → 0.2.2

package/dist/core/colors.unocss.js

@@ -9,7 +9,7 @@ const preflights = [
   --q-negative: ${theme.colors.negative};
   --q-info: ${theme.colors.info};
   --q-warning: ${theme.colors.warning};
-  --q-dark: ${theme.colors.dark};
+  --q-dark: ${theme.colors.dark.primary};
   --q-dark-page: ${theme.colors['dark-page']};
   --light-primary: ${theme.colors.light.primary};
   --light-on-primary: ${theme.colors.light.onPrimary};

package/dist/core/index.js

@@ -11,6 +11,7 @@ import { shortcuts as TouchShortcuts } from './touch.unocss.js';
 import { preflights as TransitionPreflights, shortcuts as TransitionsShortcuts } from './transitions.unocss.js';
 import { preflights as TypographyPreflights, shortcuts as TypographyShortcuts } from './typography.unocss.js';
 import { rules as VisibilityRules, preflights as VisibilityPreflights, shortcuts as VisibilityShortcuts } from './visibility.unocss.js';
+import { preflights as ShapePreflights } from './shape.unocss.js';
 export const preflights = [
     {
         getCSS: ({ theme }) => `/* beasties:include start */
@@ -296,6 +297,6 @@ body {
 
 /* beasties:include end */`
     }
-].concat(ColorPreflights, DarkPreflights, HelperPreflights, MousePreflights, TypographyPreflights, VisibilityPreflights, TransitionPreflights, SizePreflights);
+].concat(ColorPreflights, DarkPreflights, HelperPreflights, MousePreflights, TypographyPreflights, VisibilityPreflights, TransitionPreflights, SizePreflights, ShapePreflights);
 export const rules = [].concat(MouseRules, HelperRules, ElevationRules, VisibilityRules);
 export const shortcuts = [].concat(ColorShortcuts, DarkShortcuts, FlexShortcuts, HelperShortcuts, MouseShortcuts, OrientationShortcuts, PositionShortcuts, SizeShortcuts, TouchShortcuts, TransitionsShortcuts, TypographyShortcuts, VisibilityShortcuts, ElevationShortcuts);

package/dist/core/shape.unocss.js

@@ -0,0 +1,11 @@
+const preflights = [
+    {
+        getCSS: ({ theme }) => `
+:root {
+  --shape-corner-small: ${theme.shape.corner.small};
+  --shape-corner-medium: ${theme.shape.corner.medium};
+  --shape-corner-large: ${theme.shape.corner.large};
+}`
+    }
+];
+export { preflights };

package/dist/index.js

@@ -841,7 +841,8 @@ const componentsSafelistMap = {
         'q-toggle--dark',
         'q-toggle--dense'
     ],
-    QToolbar: ['q-toolbar', 'q-toolbar--inset', 'q-toolbar__title'],
+    QToolbar: ['q-toolbar', 'q-toolbar--inset'],
+    QToolbarTitle: ['q-toolbar__title'],
     QTooltip: ['q-tooltip--style', 'q-tooltip'],
     QTree: [
         'q-tree',
@@ -1500,9 +1501,6 @@ const generateSafelist = ({ plugins, iconSet }) => {
     return safelist;
 };
 export const QuasarPreset = definePreset((options) => {
-    if (!options.sourceColor) {
-        options.sourceColor = '#806cb0';
-    }
     const style = options.style;
     const theme = generateTheme(options.sourceColor);
     return [

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

@@ -2,12 +2,12 @@ const shortcuts = [
     [
         /^q-btn$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-btn'] ??
-            `inline-flex flex-col font-medium items-stretch relative outline-0 border-0 align-middle text-[14px] leading-[1.715em] no-underline [color:inherit] bg-transparent 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)`
+            `inline-flex flex-col font-medium items-stretch relative outline-0 border-0 align-middle text-[14px] leading-[1.715em] no-underline [color:inherit] bg-transparent 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] shadow-md shadow-gray/14)`
     ],
     [
         /^q-btn--actionable$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-btn--actionable'] ??
-            `cursor-pointer [&.q-btn--standard:before]:([transition:box-shadow_0.3s_cubic-bezier(0.25,_0.8,_0.5,_1)]) [&.q-btn--standard:active:before]:([box-shadow:0_3px_5px_-1px_rgba(0,_0,_0,_0.2),_0_5px_8px_rgba(0,_0,_0,_0.14),_0_1px_14px_rgba(0,_0,_0,_0.12)]) [&.q-btn--standard.q-btn--active:before]:([elevation-5)`
+            `cursor-pointer [&.q-btn--standard:before]:([transition:box-shadow_0.3s_cubic-bezier(0.25,_0.8,_0.5,_1)]) [&.q-btn--standard:active:before]:([box-shadow:0_3px_5px_-1px_rgba(0,_0,_0,_0.2),_0_5px_8px_rgba(0,_0,_0,_0.14),_0_1px_14px_rgba(0,_0,_0,_0.12)]) [&.q-btn--standard.q-btn--active:before]:([shadow-lg shadow-gray/14)`
     ],
     [/^q-btn--no-uppercase$/, ([, c], { theme }) => `normal-case`],
     [/^q-btn--rectangle$/, ([, c], { theme }) => `rounded-[3px]`],

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

@@ -8,7 +8,7 @@ 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 max-w-full [&_>_.q-icon]:(text-[24px]) [&_>_.q-avatar]:(text-[40px])`
+            `!flex-initial text-[#757575] items-start pr-[16px] w-auto [&_>_.q-icon]:(text-[24px]) [&_>_.q-avatar]:(text-[40px])`
     ],
     [
         /^q-item__section--avatar$/,

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

@@ -2,12 +2,12 @@ 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] shadow-md shadow-gray/14)`
     ],
     [
         /^q-btn--actionable$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-btn--actionable'] ??
-            `cursor-pointer [&.q-btn--standard:before]:([transition:box-shadow_0.3s_cubic-bezier(0.25,_0.8,_0.5,_1)]) [&.q-btn--standard:active:before]:([box-shadow:0_3px_5px_-1px_rgba(0,_0,_0,_0.2),_0_5px_8px_rgba(0,_0,_0,_0.14),_0_1px_14px_rgba(0,_0,_0,_0.12)]) [&.q-btn--standard.q-btn--active:before]:(elevation-5)`
+            `cursor-pointer [&.q-btn--standard:before]:([transition:box-shadow_0.3s_cubic-bezier(0.25,_0.8,_0.5,_1)]) [&.q-btn--standard:active:before]:([box-shadow:0_3px_5px_-1px_rgba(0,_0,_0,_0.2),_0_5px_8px_rgba(0,_0,_0,_0.14),_0_1px_14px_rgba(0,_0,_0,_0.12)]) [&.q-btn--standard.q-btn--active:before]:(shadow-lg shadow-gray/14)`
     ],
     [/^q-btn--no-uppercase$/, ([, c], { theme }) => `normal-case`],
     [/^q-btn--rectangle$/, ([, c], { theme }) => `rounded-[3px]`],
@@ -52,7 +52,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
-       w-56px h-56px !rounded-16px
+       w-56px h-56px !rounded-$shape-corner-large
        z-${theme.quasar.z.fab}
        [&_.q-icon]:(text-[24px]) [&_.q-icon]:(m-auto)`
         // min-h-[56px] min-w-[56px] p-[16px] pb-0
@@ -61,7 +61,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
-      w-40px h-40px !rounded-16px
+      w-40px h-40px !rounded-$shape-corner-large
       [&_.q-icon]:(text-[24px])`
         // min-h-[40px] min-w-[40px]
     ],

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-$shape-corner-medium 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])

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

@@ -19,7 +19,7 @@ const shortcuts = [
       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])`
+      [&_.q-avatar]:(text-[2em] -ml-[0.45em] mr-[0.2em] rounded-$shape-corner-large)`
     ],
     [
         /^q-chip--colored$/,
@@ -66,12 +66,12 @@ const shortcuts = [
     [
         /^q-chip--dense$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-chip--dense'] ??
-            `rounded-[12px] px-[0.4em] py-[0] h-[1.5em] [&_.q-avatar]:(text-[1.5em] -ml-[0.27em] mr-[0.1em] rounded-[12px]) [&_.q-chip\\_\\_icon]:(text-[1.25em]) [&_.q-chip\\_\\_icon--left]:(mr-[0.195em]) [&_.q-chip\\_\\_icon--remove]:(-mr-[0.25em])`
+            `rounded-$shape-corner-medium px-[0.4em] py-[0] h-[1.5em] [&_.q-avatar]:(text-[1.5em] -ml-[0.27em] mr-[0.1em] rounded-$shape-corner-medium) [&_.q-chip\\_\\_icon]:(text-[1.25em]) [&_.q-chip\\_\\_icon--left]:(mr-[0.195em]) [&_.q-chip\\_\\_icon--remove]:(-mr-[0.25em])`
     ],
     [
         /^q-chip--square$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-chip--square'] ??
-            `rounded-[8px] [&_.q-avatar]:(rounded-tl-[3px] rounded-br-[0] rounded-tr-[0] rounded-bl-[3px])`
+            `rounded-$shape-corner-small [&_.q-avatar]:(rounded-tl-[3px] rounded-br-[0] rounded-tr-[0] rounded-bl-[3px])`
     ]
 ];
 export { preflights, shortcuts };

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']}`
+            `rounded-$shape-corner-large 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,7 +71,6 @@ 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)
       `

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

@@ -8,7 +8,7 @@ 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 max-w-full [&_>_.q-icon]:(text-[24px]) [&_>_.q-avatar]:(text-[40px])`
+            `!flex-initial text-[#757575] items-start pr-[16px] w-auto [&_>_.q-icon]:(text-[24px]) [&_>_.q-avatar]:(text-[40px])`
     ],
     [
         /^q-item__section--avatar$/,

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

@@ -4,7 +4,7 @@ const shortcuts = [
         ([, c], { theme }) => theme.quasar?.components?.['q-tab'] ??
             `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-focus-helper]:(!absolute !h-32px !w-52px !top-[calc(50%-23px)] !left-[calc(50%-26px)] !border-rd-16px)
+      [&_>_.q-focus-helper]:(!absolute !h-32px !w-52px !top-[calc(50%-23px)] !left-[calc(50%-26px)] !rounded-$shape-corner-large)
       `
     ],
     [

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

@@ -23,7 +23,7 @@ const shortcuts = [
     [
         /^q-time__header-label$/,
         ([, c], { theme }) => theme.quasar?.components?.['q-time__header-label'] ??
-            `text-[48px] border-rd-8px
+            `text-[48px] rounded-$shape-corner-small
       leading-none tracking-[-0.00833em] [&_>_div_+_div]:(ml-[4px]) !flex-initial`
     ],
     [

package/dist/theme.js

@@ -10,6 +10,13 @@ const defaultTheme = {
         lg: '1440px',
         xl: '1920px'
     },
+    shape: {
+        corner: {
+            small: '8px',
+            medium: '12px',
+            large: '16px'
+        }
+    },
     colors: {
         light: {
             primary: '#684fa4',
@@ -409,7 +416,7 @@ const defaultTheme = {
         }
     }
 };
-const generateTheme = (sourceColor) => {
+const generateTheme = (sourceColor = '#806cb0') => {
     const materialTheme = themeFromSourceColor(argbFromHex(sourceColor));
     return {
         ...defaultTheme,

package/dist/types/core/shape.unocss.d.ts

@@ -0,0 +1,4 @@
+import { type Preflight } from '@unocss/core';
+import { type QuasarTheme } from '../theme.js';
+declare const preflights: Preflight<QuasarTheme>[];
+export { preflights };

package/dist/types/theme.d.ts

@@ -47,6 +47,13 @@ export interface QuasarTheme {
         lg: string;
         xl: string;
     };
+    shape: {
+        corner: {
+            small: string;
+            medium: string;
+            large: string;
+        };
+    };
     colors: {
         light: MaterialColorScheme;
         dark: MaterialColorScheme;
@@ -1192,7 +1199,7 @@ export interface QuasarTheme {
     };
 }
 declare const defaultTheme: QuasarTheme;
-declare const generateTheme: (sourceColor: string) => QuasarTheme;
+declare const generateTheme: (sourceColor?: string) => QuasarTheme;
 /**
  * Do not use on server.
  * @param theme unocss-preset-quasar theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unocss-preset-quasar",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "license": "MIT",
   "author": "Stefan van Herwijnen",
   "description": "UnoCSS preset for Quasar Framework",
@@ -34,21 +34,21 @@
   "homepage": "https://github.com/simsustech/unocss-preset-quasar/tree/main/#readme",
   "dependencies": {
     "@material/material-color-utilities": "^0.3.0",
-    "@unocss/core": "^66.0.0",
-    "@unocss/preset-uno": "^66.0.0",
-    "@unocss/preset-web-fonts": "66.1.0-beta.10",
-    "@unocss/preset-wind": "^66.0.0",
+    "@unocss/core": "^66.1.1",
+    "@unocss/preset-uno": "^66.1.1",
+    "@unocss/preset-web-fonts": "66.1.1",
+    "@unocss/preset-wind": "^66.1.1",
     "animated-unocss": "^0.0.6",
-    "unocss": "66.1.0-beta.10"
+    "unocss": "66.1.1"
   },
   "devDependencies": {
     "@iconify-json/mdi": "^1.2.3",
     "@quasar/extras": "^1.16.17",
     "@quasar/quasar-ui-qmarkdown": "^2.0.5",
     "@quasar/quasar-ui-qmediaplayer": "^2.0.0-beta.0",
-    "@types/node": "^22.14.0",
-    "@unocss/preset-icons": "^66.0.0",
-    "@unocss/preset-mini": "66.1.0-beta.10",
+    "@types/node": "^22.15.17",
+    "@unocss/preset-icons": "^66.1.1",
+    "@unocss/preset-mini": "66.1.1",
     "quasar": "^2.18.1",
     "typescript": "^5.8.3"
   },

package/src/core/colors.unocss.ts

@@ -12,7 +12,7 @@ const preflights: Preflight<QuasarTheme>[] = [
   --q-negative: ${theme.colors.negative};
   --q-info: ${theme.colors.info};
   --q-warning: ${theme.colors.warning};
-  --q-dark: ${theme.colors.dark};
+  --q-dark: ${theme.colors.dark.primary};
   --q-dark-page: ${theme.colors['dark-page']};
   --light-primary: ${theme.colors.light.primary};
   --light-on-primary: ${theme.colors.light.onPrimary};

package/src/core/index.ts

@@ -43,6 +43,7 @@ import {
   preflights as VisibilityPreflights,
   shortcuts as VisibilityShortcuts
 } from './visibility.unocss.js'
+import { preflights as ShapePreflights } from './shape.unocss.js'
 
 export const preflights: Preflight<QuasarTheme>[] = (
   [
@@ -339,7 +340,8 @@ body {
   TypographyPreflights,
   VisibilityPreflights,
   TransitionPreflights,
-  SizePreflights
+  SizePreflights,
+  ShapePreflights
 )
 
 export const rules = ([] as Rule<QuasarTheme>[]).concat(

package/src/core/shape.unocss.ts

@@ -0,0 +1,15 @@
+import { type Preflight } from '@unocss/core'
+import { type QuasarTheme } from '../theme.js'
+
+const preflights: Preflight<QuasarTheme>[] = [
+  {
+    getCSS: ({ theme }) => `
+:root {
+  --shape-corner-small: ${theme.shape.corner.small};
+  --shape-corner-medium: ${theme.shape.corner.medium};
+  --shape-corner-large: ${theme.shape.corner.large};
+}`
+  }
+]
+
+export { preflights }

package/src/index.ts

@@ -877,7 +877,8 @@ const componentsSafelistMap: Partial<Record<keyof QuasarComponents, string[]>> =
       'q-toggle--dark',
       'q-toggle--dense'
     ],
-    QToolbar: ['q-toolbar', 'q-toolbar--inset', 'q-toolbar__title'],
+    QToolbar: ['q-toolbar', 'q-toolbar--inset'],
+    QToolbarTitle: ['q-toolbar__title'],
     QTooltip: ['q-tooltip--style', 'q-tooltip'],
     QTree: [
       'q-tree',
@@ -1545,10 +1546,6 @@ const generateSafelist = ({
 }
 
 export const QuasarPreset = definePreset((options: QuasarPresetOptions) => {
-  if (!options.sourceColor) {
-    options.sourceColor = '#806cb0'
-  }
-
   const style = options.style
   const theme = generateTheme(options.sourceColor)
 

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

@@ -6,13 +6,13 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-btn$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-btn'] ??
-      `inline-flex flex-col font-medium items-stretch relative outline-0 border-0 align-middle text-[14px] leading-[1.715em] no-underline [color:inherit] bg-transparent 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)`
+      `inline-flex flex-col font-medium items-stretch relative outline-0 border-0 align-middle text-[14px] leading-[1.715em] no-underline [color:inherit] bg-transparent 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] shadow-md shadow-gray/14)`
   ],
   [
     /^q-btn--actionable$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-btn--actionable'] ??
-      `cursor-pointer [&.q-btn--standard:before]:([transition:box-shadow_0.3s_cubic-bezier(0.25,_0.8,_0.5,_1)]) [&.q-btn--standard:active:before]:([box-shadow:0_3px_5px_-1px_rgba(0,_0,_0,_0.2),_0_5px_8px_rgba(0,_0,_0,_0.14),_0_1px_14px_rgba(0,_0,_0,_0.12)]) [&.q-btn--standard.q-btn--active:before]:([elevation-5)`
+      `cursor-pointer [&.q-btn--standard:before]:([transition:box-shadow_0.3s_cubic-bezier(0.25,_0.8,_0.5,_1)]) [&.q-btn--standard:active:before]:([box-shadow:0_3px_5px_-1px_rgba(0,_0,_0,_0.2),_0_5px_8px_rgba(0,_0,_0,_0.14),_0_1px_14px_rgba(0,_0,_0,_0.12)]) [&.q-btn--standard.q-btn--active:before]:([shadow-lg shadow-gray/14)`
   ],
 
   [/^q-btn--no-uppercase$/, ([, c], { theme }) => `normal-case`],

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

@@ -14,7 +14,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-item__section--side$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-item__section--side'] ??
-      `!flex-initial text-[#757575] items-start pr-[16px] w-auto max-w-full [&_>_.q-icon]:(text-[24px]) [&_>_.q-avatar]:(text-[40px])`
+      `!flex-initial text-[#757575] items-start pr-[16px] w-auto [&_>_.q-icon]:(text-[24px]) [&_>_.q-avatar]:(text-[40px])`
   ],
 
   [

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

@@ -6,13 +6,13 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^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] shadow-md shadow-gray/14)`
   ],
   [
     /^q-btn--actionable$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-btn--actionable'] ??
-      `cursor-pointer [&.q-btn--standard:before]:([transition:box-shadow_0.3s_cubic-bezier(0.25,_0.8,_0.5,_1)]) [&.q-btn--standard:active:before]:([box-shadow:0_3px_5px_-1px_rgba(0,_0,_0,_0.2),_0_5px_8px_rgba(0,_0,_0,_0.14),_0_1px_14px_rgba(0,_0,_0,_0.12)]) [&.q-btn--standard.q-btn--active:before]:(elevation-5)`
+      `cursor-pointer [&.q-btn--standard:before]:([transition:box-shadow_0.3s_cubic-bezier(0.25,_0.8,_0.5,_1)]) [&.q-btn--standard:active:before]:([box-shadow:0_3px_5px_-1px_rgba(0,_0,_0,_0.2),_0_5px_8px_rgba(0,_0,_0,_0.14),_0_1px_14px_rgba(0,_0,_0,_0.12)]) [&.q-btn--standard.q-btn--active:before]:(shadow-lg shadow-gray/14)`
   ],
 
   [/^q-btn--no-uppercase$/, ([, c], { theme }) => `normal-case`],
@@ -75,7 +75,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     ([, 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
-       w-56px h-56px !rounded-16px
+       w-56px h-56px !rounded-$shape-corner-large
        z-${theme.quasar.z.fab}
        [&_.q-icon]:(text-[24px]) [&_.q-icon]:(m-auto)`
     // min-h-[56px] min-w-[56px] p-[16px] pb-0
@@ -86,7 +86,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     ([, 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
-      w-40px h-40px !rounded-16px
+      w-40px h-40px !rounded-$shape-corner-large
       [&_.q-icon]:(text-[24px])`
     // min-h-[40px] min-w-[40px]
   ],

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

@@ -6,7 +6,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^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-$shape-corner-medium 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])

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

@@ -24,7 +24,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
       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])`
+      [&_.q-avatar]:(text-[2em] -ml-[0.45em] mr-[0.2em] rounded-$shape-corner-large)`
   ],
 
   [
@@ -91,14 +91,14 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-chip--dense$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-chip--dense'] ??
-      `rounded-[12px] px-[0.4em] py-[0] h-[1.5em] [&_.q-avatar]:(text-[1.5em] -ml-[0.27em] mr-[0.1em] rounded-[12px]) [&_.q-chip\\_\\_icon]:(text-[1.25em]) [&_.q-chip\\_\\_icon--left]:(mr-[0.195em]) [&_.q-chip\\_\\_icon--remove]:(-mr-[0.25em])`
+      `rounded-$shape-corner-medium px-[0.4em] py-[0] h-[1.5em] [&_.q-avatar]:(text-[1.5em] -ml-[0.27em] mr-[0.1em] rounded-$shape-corner-medium) [&_.q-chip\\_\\_icon]:(text-[1.25em]) [&_.q-chip\\_\\_icon--left]:(mr-[0.195em]) [&_.q-chip\\_\\_icon--remove]:(-mr-[0.25em])`
   ],
 
   [
     /^q-chip--square$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-chip--square'] ??
-      `rounded-[8px] [&_.q-avatar]:(rounded-tl-[3px] rounded-br-[0] rounded-tr-[0] rounded-bl-[3px])`
+      `rounded-$shape-corner-small [&_.q-avatar]:(rounded-tl-[3px] rounded-br-[0] rounded-tr-[0] rounded-bl-[3px])`
   ]
 ]
 

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

@@ -6,7 +6,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^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']}`
+      `rounded-$shape-corner-large absolute top-[0] bottom-[0] bg-$light-surface-container-low dark:bg-$dark-surface-container-low z-${theme.quasar.z['side']}`
   ],
 
   [
@@ -97,7 +97,6 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
       [&_>_.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)
       `

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

@@ -14,7 +14,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-item__section--side$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-item__section--side'] ??
-      `!flex-initial text-[#757575] items-start pr-[16px] w-auto max-w-full [&_>_.q-icon]:(text-[24px]) [&_>_.q-avatar]:(text-[40px])`
+      `!flex-initial text-[#757575] items-start pr-[16px] w-auto [&_>_.q-icon]:(text-[24px]) [&_>_.q-avatar]:(text-[40px])`
   ],
 
   [

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

@@ -8,7 +8,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
       theme.quasar?.components?.['q-tab'] ??
       `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-focus-helper]:(!absolute !h-32px !w-52px !top-[calc(50%-23px)] !left-[calc(50%-26px)] !border-rd-16px)
+      [&_>_.q-focus-helper]:(!absolute !h-32px !w-52px !top-[calc(50%-23px)] !left-[calc(50%-26px)] !rounded-$shape-corner-large)
       `
   ],
 

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

@@ -35,7 +35,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
     /^q-time__header-label$/,
     ([, c], { theme }) =>
       theme.quasar?.components?.['q-time__header-label'] ??
-      `text-[48px] border-rd-8px
+      `text-[48px] rounded-$shape-corner-small
       leading-none tracking-[-0.00833em] [&_>_div_+_div]:(ml-[4px]) !flex-initial`
   ],
 

package/src/theme.ts

@@ -61,6 +61,13 @@ export interface QuasarTheme {
     lg: string
     xl: string
   }
+  shape: {
+    corner: {
+      small: string
+      medium: string
+      large: string
+    }
+  }
   colors: {
     light: MaterialColorScheme
     dark: MaterialColorScheme
@@ -1222,6 +1229,13 @@ const defaultTheme: QuasarTheme = {
     lg: '1440px',
     xl: '1920px'
   },
+  shape: {
+    corner: {
+      small: '8px',
+      medium: '12px',
+      large: '16px'
+    }
+  },
   colors: {
     light: {
       primary: '#684fa4',
@@ -1626,7 +1640,7 @@ const defaultTheme: QuasarTheme = {
   }
 }
 
-const generateTheme = (sourceColor: string): QuasarTheme => {
+const generateTheme = (sourceColor: string = '#806cb0'): QuasarTheme => {
   const materialTheme = themeFromSourceColor(argbFromHex(sourceColor))
 
   return {