vitrify 0.17.11 → 0.17.13

package/src/node/plugins/quasar/unocss/core/flex.unocss.ts

@@ -17,12 +17,12 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^row$/,
     ([, c], { theme }) =>
-      `flex flex-row flex-wrap [&.reverse]:(flex-row-reverse)`
+      `flex flex-row flex-wrap flex-auto [&.reverse]:(flex-row-reverse)`
   ],
   [
     /^column$/,
     ([, c], { theme }) =>
-      `flex flex-col flex-wrap [&.reverse]:(flex-col-reverse)`
+      `flex flex-col flex-wrap flex-auto [&.reverse]:(flex-col-reverse)`
   ],
   [
     /^col(?:-)?(none|xs|sm|md|lg|xl)?(?:-)?([2-9]|1[0-2]?)?$/,
@@ -40,38 +40,52 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
   [
     /^q-col-gutter-(none|xs|sm|md|lg|xl)$/,
     ([, size], { theme }) =>
-      `gap-${colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']}`
+      `gap-${colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']}
+      [&_>_[class^="col"]]:(mr--${
+        colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']
+      })
+      [&_>_[class^="col"]]:(mb--${
+        colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']
+      })`
   ],
   [
     /^q-col-gutter-x-(none|xs|sm|md|lg|xl)$/,
     ([, size], { theme }) =>
-      `gap-x-${colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']}`
+      `gap-x-${colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']}
+      [&_>_[class^="col"]]:(mr--${
+        colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']
+      })`
   ],
   [
     /^q-col-gutter-y-(none|xs|sm|md|lg|xl)$/,
     ([, size], { theme }) =>
-      `gap-y-${colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']}`
+      `gap-y-${colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']}
+      [&_>_[class^="col"]]:(mb--${
+        colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']
+      })`
   ],
   [
     /^q-gutter-(none|xs|sm|md|lg|xl)$/,
     ([, size], { theme }) =>
-      `mt--${colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']}
-        ml--${colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']}
-    [&_>_*]:(ml-${
-      colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']
-    } mt-${colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']})`
+      `[&_>_*]:(mr-${
+        colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']
+      } mb-${colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']})`
   ],
   [
     /^q-gutter-x-(none|xs|sm|md|lg|xl)$/,
     ([, size], { theme }) =>
-      `ml--${colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']}
-      space-x-${colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']}`
+      `
+        [&_>_*]:(mr-${
+          colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']
+        })`
   ],
   [
     /^q-gutter-y-(none|xs|sm|md|lg|xl)$/,
     ([, size], { theme }) =>
-      `mt--${colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']}
-       space-y-${colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']}`
+      `
+        [&_>_*]:(mb-${
+          colGutter[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']
+        })`
   ],
   [/^wrap$/, ([, size], { theme }) => `flex-wrap`],
   [/^no-wrap$/, ([, size], { theme }) => `flex-nowrap`],

package/src/node/plugins/quasar/unocss/core/size.unocss.ts

@@ -25,173 +25,191 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
 
   [/^window-width$/, ([, c], { theme }) => `!ml-0 !mr-0 !w-screen`],
 
-  [/^q-pa-none$/, ([, c], { theme }) => `p-[0]`],
+  [
+    /^q-p(a|t|b|l|r|x|y)?(?:-)(none|xs|sm|md|lg|xl)$/,
+    ([, side, size], { theme }) => {
+      return `p${side}-${
+        theme.quasar?.spaces[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']
+      }`
+    }
+  ],
 
-  [/^q-pl-none$/, ([, c], { theme }) => `pl-0`],
+  [
+    /^q-m(a|t|b|l|r|x|y)?(?:-)(none|xs|sm|md|lg|xl)$/,
+    ([, side, size], { theme }) => {
+      return `m${side}-${
+        theme.quasar?.spaces[size as 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl']
+      }`
+    }
+  ],
 
-  [/^q-pr-none$/, ([, c], { theme }) => `pr-0`],
+  // [/^q-pa-none$/, ([, c], { theme }) => `p-[0]`],
 
-  [/^q-pt-none$/, ([, c], { theme }) => `pt-0`],
+  // [/^q-pl-none$/, ([, c], { theme }) => `pl-0`],
 
-  [/^q-pb-none$/, ([, c], { theme }) => `pb-0`],
+  // [/^q-pr-none$/, ([, c], { theme }) => `pr-0`],
 
-  [/^q-px-none$/, ([, c], { theme }) => `pl-0 pr-0`],
+  // [/^q-pt-none$/, ([, c], { theme }) => `pt-0`],
 
-  [/^q-py-none$/, ([, c], { theme }) => `pt-0 pb-0`],
+  // [/^q-pb-none$/, ([, c], { theme }) => `pb-0`],
 
-  [/^q-ma-none$/, ([, c], { theme }) => `m-[0]`],
+  // [/^q-px-none$/, ([, c], { theme }) => `pl-0 pr-0`],
 
-  [/^q-ml-none$/, ([, c], { theme }) => `ml-0`],
+  // [/^q-py-none$/, ([, c], { theme }) => `pt-0 pb-0`],
 
-  [/^q-mr-none$/, ([, c], { theme }) => `mr-0`],
+  // [/^q-ma-none$/, ([, c], { theme }) => `m-[0]`],
 
-  [/^q-mt-none$/, ([, c], { theme }) => `mt-0`],
+  // [/^q-ml-none$/, ([, c], { theme }) => `ml-0`],
 
-  [/^q-mb-none$/, ([, c], { theme }) => `mb-0`],
+  // [/^q-mr-none$/, ([, c], { theme }) => `mr-0`],
 
-  [/^q-mx-none$/, ([, c], { theme }) => `ml-0 mr-0`],
+  // [/^q-mt-none$/, ([, c], { theme }) => `mt-0`],
 
-  [/^q-my-none$/, ([, c], { theme }) => `mt-0 mb-0`],
+  // [/^q-mb-none$/, ([, c], { theme }) => `mb-0`],
 
-  [/^q-pa-xs$/, ([, c], { theme }) => `p-[4px]`],
+  // [/^q-mx-none$/, ([, c], { theme }) => `ml-0 mr-0`],
 
-  [/^q-pl-xs$/, ([, c], { theme }) => `pl-[4px]`],
+  // [/^q-my-none$/, ([, c], { theme }) => `mt-0 mb-0`],
 
-  [/^q-pr-xs$/, ([, c], { theme }) => `pr-[4px]`],
+  // [/^q-pa-xs$/, ([, c], { theme }) => `p-[4px]`],
 
-  [/^q-pt-xs$/, ([, c], { theme }) => `pt-[4px]`],
+  // [/^q-pl-xs$/, ([, c], { theme }) => `pl-[4px]`],
 
-  [/^q-pb-xs$/, ([, c], { theme }) => `pb-[4px]`],
+  // [/^q-pr-xs$/, ([, c], { theme }) => `pr-[4px]`],
 
-  [/^q-px-xs$/, ([, c], { theme }) => `pl-[4px] pr-[4px]`],
+  // [/^q-pt-xs$/, ([, c], { theme }) => `pt-[4px]`],
 
-  [/^q-py-xs$/, ([, c], { theme }) => `pt-[4px] pb-[4px]`],
+  // [/^q-pb-xs$/, ([, c], { theme }) => `pb-[4px]`],
 
-  [/^q-ma-xs$/, ([, c], { theme }) => `m-[4px]`],
+  // [/^q-px-xs$/, ([, c], { theme }) => `pl-[4px] pr-[4px]`],
 
-  [/^q-ml-xs$/, ([, c], { theme }) => `ml-[4px]`],
+  // [/^q-py-xs$/, ([, c], { theme }) => `pt-[4px] pb-[4px]`],
 
-  [/^q-mr-xs$/, ([, c], { theme }) => `mr-[4px]`],
+  // [/^q-ma-xs$/, ([, c], { theme }) => `m-[4px]`],
 
-  [/^q-mt-xs$/, ([, c], { theme }) => `mt-[4px]`],
+  // [/^q-ml-xs$/, ([, c], { theme }) => `ml-[4px]`],
 
-  [/^q-mb-xs$/, ([, c], { theme }) => `mb-[4px]`],
+  // [/^q-mr-xs$/, ([, c], { theme }) => `mr-[4px]`],
 
-  [/^q-mx-xs$/, ([, c], { theme }) => `ml-[4px] mr-[4px]`],
+  // [/^q-mt-xs$/, ([, c], { theme }) => `mt-[4px]`],
 
-  [/^q-my-xs$/, ([, c], { theme }) => `mt-[4px] mb-[4px]`],
+  // [/^q-mb-xs$/, ([, c], { theme }) => `mb-[4px]`],
 
-  [/^q-pa-sm$/, ([, c], { theme }) => `p-[8px]`],
+  // [/^q-mx-xs$/, ([, c], { theme }) => `ml-[4px] mr-[4px]`],
 
-  [/^q-pl-sm$/, ([, c], { theme }) => `pl-[8px]`],
+  // [/^q-my-xs$/, ([, c], { theme }) => `mt-[4px] mb-[4px]`],
 
-  [/^q-pr-sm$/, ([, c], { theme }) => `pr-[8px]`],
+  // [/^q-pa-sm$/, ([, c], { theme }) => `p-[8px]`],
 
-  [/^q-pt-sm$/, ([, c], { theme }) => `pt-[8px]`],
+  // [/^q-pl-sm$/, ([, c], { theme }) => `pl-[8px]`],
 
-  [/^q-pb-sm$/, ([, c], { theme }) => `pb-[8px]`],
+  // [/^q-pr-sm$/, ([, c], { theme }) => `pr-[8px]`],
 
-  [/^q-px-sm$/, ([, c], { theme }) => `pl-[8px] pr-[8px]`],
+  // [/^q-pt-sm$/, ([, c], { theme }) => `pt-[8px]`],
 
-  [/^q-py-sm$/, ([, c], { theme }) => `pt-[8px] pb-[8px]`],
+  // [/^q-pb-sm$/, ([, c], { theme }) => `pb-[8px]`],
 
-  [/^q-ma-sm$/, ([, c], { theme }) => `m-[8px]`],
+  // [/^q-px-sm$/, ([, c], { theme }) => `pl-[8px] pr-[8px]`],
 
-  [/^q-ml-sm$/, ([, c], { theme }) => `ml-[8px]`],
+  // [/^q-py-sm$/, ([, c], { theme }) => `pt-[8px] pb-[8px]`],
 
-  [/^q-mr-sm$/, ([, c], { theme }) => `mr-[8px]`],
+  // [/^q-ma-sm$/, ([, c], { theme }) => `m-[8px]`],
 
-  [/^q-mt-sm$/, ([, c], { theme }) => `mt-[8px]`],
+  // [/^q-ml-sm$/, ([, c], { theme }) => `ml-[8px]`],
 
-  [/^q-mb-sm$/, ([, c], { theme }) => `mb-[8px]`],
+  // [/^q-mr-sm$/, ([, c], { theme }) => `mr-[8px]`],
 
-  [/^q-mx-sm$/, ([, c], { theme }) => `ml-[8px] mr-[8px]`],
+  // [/^q-mt-sm$/, ([, c], { theme }) => `mt-[8px]`],
 
-  [/^q-my-sm$/, ([, c], { theme }) => `mt-[8px] mb-[8px]`],
+  // [/^q-mb-sm$/, ([, c], { theme }) => `mb-[8px]`],
 
-  [/^q-pa-md$/, ([, c], { theme }) => `p-[16px]`],
+  // [/^q-mx-sm$/, ([, c], { theme }) => `ml-[8px] mr-[8px]`],
 
-  [/^q-pl-md$/, ([, c], { theme }) => `pl-[16px]`],
+  // [/^q-my-sm$/, ([, c], { theme }) => `mt-[8px] mb-[8px]`],
 
-  [/^q-pr-md$/, ([, c], { theme }) => `pr-[16px]`],
+  // [/^q-pa-md$/, ([, c], { theme }) => `p-[16px]`],
 
-  [/^q-pt-md$/, ([, c], { theme }) => `pt-[16px]`],
+  // [/^q-pl-md$/, ([, c], { theme }) => `pl-[16px]`],
 
-  [/^q-pb-md$/, ([, c], { theme }) => `pb-[16px]`],
+  // [/^q-pr-md$/, ([, c], { theme }) => `pr-[16px]`],
 
-  [/^q-px-md$/, ([, c], { theme }) => `pl-[16px] pr-[16px]`],
+  // [/^q-pt-md$/, ([, c], { theme }) => `pt-[16px]`],
 
-  [/^q-py-md$/, ([, c], { theme }) => `pt-[16px] pb-[16px]`],
+  // [/^q-pb-md$/, ([, c], { theme }) => `pb-[16px]`],
 
-  [/^q-ma-md$/, ([, c], { theme }) => `m-[16px]`],
+  // [/^q-px-md$/, ([, c], { theme }) => `pl-[16px] pr-[16px]`],
 
-  [/^q-ml-md$/, ([, c], { theme }) => `ml-[16px]`],
+  // [/^q-py-md$/, ([, c], { theme }) => `pt-[16px] pb-[16px]`],
 
-  [/^q-mr-md$/, ([, c], { theme }) => `mr-[16px]`],
+  // [/^q-ma-md$/, ([, c], { theme }) => `m-[16px]`],
 
-  [/^q-mt-md$/, ([, c], { theme }) => `mt-[16px]`],
+  // [/^q-ml-md$/, ([, c], { theme }) => `ml-[16px]`],
 
-  [/^q-mb-md$/, ([, c], { theme }) => `mb-[16px]`],
+  // [/^q-mr-md$/, ([, c], { theme }) => `mr-[16px]`],
 
-  [/^q-mx-md$/, ([, c], { theme }) => `ml-[16px] mr-[16px]`],
+  // [/^q-mt-md$/, ([, c], { theme }) => `mt-[16px]`],
 
-  [/^q-my-md$/, ([, c], { theme }) => `mt-[16px] mb-[16px]`],
+  // [/^q-mb-md$/, ([, c], { theme }) => `mb-[16px]`],
 
-  [/^q-pa-lg$/, ([, c], { theme }) => `p-[24px]`],
+  // [/^q-mx-md$/, ([, c], { theme }) => `ml-[16px] mr-[16px]`],
 
-  [/^q-pl-lg$/, ([, c], { theme }) => `pl-[24px]`],
+  // [/^q-my-md$/, ([, c], { theme }) => `mt-[16px] mb-[16px]`],
 
-  [/^q-pr-lg$/, ([, c], { theme }) => `pr-[24px]`],
+  // [/^q-pa-lg$/, ([, c], { theme }) => `p-[24px]`],
 
-  [/^q-pt-lg$/, ([, c], { theme }) => `pt-[24px]`],
+  // [/^q-pl-lg$/, ([, c], { theme }) => `pl-[24px]`],
 
-  [/^q-pb-lg$/, ([, c], { theme }) => `pb-[24px]`],
+  // [/^q-pr-lg$/, ([, c], { theme }) => `pr-[24px]`],
 
-  [/^q-px-lg$/, ([, c], { theme }) => `pl-[24px] pr-[24px]`],
+  // [/^q-pt-lg$/, ([, c], { theme }) => `pt-[24px]`],
 
-  [/^q-py-lg$/, ([, c], { theme }) => `pt-[24px] pb-[24px]`],
+  // [/^q-pb-lg$/, ([, c], { theme }) => `pb-[24px]`],
 
-  [/^q-ma-lg$/, ([, c], { theme }) => `m-[24px]`],
+  // [/^q-px-lg$/, ([, c], { theme }) => `pl-[24px] pr-[24px]`],
 
-  [/^q-ml-lg$/, ([, c], { theme }) => `ml-[24px]`],
+  // [/^q-py-lg$/, ([, c], { theme }) => `pt-[24px] pb-[24px]`],
 
-  [/^q-mr-lg$/, ([, c], { theme }) => `mr-[24px]`],
+  // [/^q-ma-lg$/, ([, c], { theme }) => `m-[24px]`],
 
-  [/^q-mt-lg$/, ([, c], { theme }) => `mt-[24px]`],
+  // [/^q-ml-lg$/, ([, c], { theme }) => `ml-[24px]`],
 
-  [/^q-mb-lg$/, ([, c], { theme }) => `mb-[24px]`],
+  // [/^q-mr-lg$/, ([, c], { theme }) => `mr-[24px]`],
 
-  [/^q-mx-lg$/, ([, c], { theme }) => `ml-[24px] mr-[24px]`],
+  // [/^q-mt-lg$/, ([, c], { theme }) => `mt-[24px]`],
 
-  [/^q-my-lg$/, ([, c], { theme }) => `mt-[24px] mb-[24px]`],
+  // [/^q-mb-lg$/, ([, c], { theme }) => `mb-[24px]`],
 
-  [/^q-pa-xl$/, ([, c], { theme }) => `p-[48px]`],
+  // [/^q-mx-lg$/, ([, c], { theme }) => `ml-[24px] mr-[24px]`],
 
-  [/^q-pl-xl$/, ([, c], { theme }) => `pl-[48px]`],
+  // [/^q-my-lg$/, ([, c], { theme }) => `mt-[24px] mb-[24px]`],
 
-  [/^q-pr-xl$/, ([, c], { theme }) => `pr-[48px]`],
+  // [/^q-pa-xl$/, ([, c], { theme }) => `p-[48px]`],
 
-  [/^q-pt-xl$/, ([, c], { theme }) => `pt-[48px]`],
+  // [/^q-pl-xl$/, ([, c], { theme }) => `pl-[48px]`],
 
-  [/^q-pb-xl$/, ([, c], { theme }) => `pb-[48px]`],
+  // [/^q-pr-xl$/, ([, c], { theme }) => `pr-[48px]`],
 
-  [/^q-px-xl$/, ([, c], { theme }) => `pl-[48px] pr-[48px]`],
+  // [/^q-pt-xl$/, ([, c], { theme }) => `pt-[48px]`],
 
-  [/^q-py-xl$/, ([, c], { theme }) => `pt-[48px] pb-[48px]`],
+  // [/^q-pb-xl$/, ([, c], { theme }) => `pb-[48px]`],
 
-  [/^q-ma-xl$/, ([, c], { theme }) => `m-[48px]`],
+  // [/^q-px-xl$/, ([, c], { theme }) => `pl-[48px] pr-[48px]`],
 
-  [/^q-ml-xl$/, ([, c], { theme }) => `ml-[48px]`],
+  // [/^q-py-xl$/, ([, c], { theme }) => `pt-[48px] pb-[48px]`],
 
-  [/^q-mr-xl$/, ([, c], { theme }) => `mr-[48px]`],
+  // [/^q-ma-xl$/, ([, c], { theme }) => `m-[48px]`],
 
-  [/^q-mt-xl$/, ([, c], { theme }) => `mt-[48px]`],
+  // [/^q-ml-xl$/, ([, c], { theme }) => `ml-[48px]`],
 
-  [/^q-mb-xl$/, ([, c], { theme }) => `mb-[48px]`],
+  // [/^q-mr-xl$/, ([, c], { theme }) => `mr-[48px]`],
 
-  [/^q-mx-xl$/, ([, c], { theme }) => `ml-[48px] mr-[48px]`],
+  // [/^q-mt-xl$/, ([, c], { theme }) => `mt-[48px]`],
 
-  [/^q-my-xl$/, ([, c], { theme }) => `mt-[48px] mb-[48px]`],
+  // [/^q-mb-xl$/, ([, c], { theme }) => `mb-[48px]`],
+
+  // [/^q-mx-xl$/, ([, c], { theme }) => `ml-[48px] mr-[48px]`],
+
+  // [/^q-my-xl$/, ([, c], { theme }) => `mt-[48px] mb-[48px]`],
 
   [/^q-mt-auto$/, ([, c], { theme }) => `mt-auto`],
 

package/src/node/plugins/quasar/unocss/index.ts

@@ -178,7 +178,11 @@ import {
 import { shortcuts as QHeaderShortcuts } from './components/QHeader.unocss.js'
 import { shortcuts as QFooterShortcuts } from './components/QFooter.unocss.js'
 import { shortcuts as QDrawerShortcuts } from './components/QDrawer.unocss.js'
-import { type QuasarIconSet, type QuasarPlugins } from 'quasar'
+import {
+  type QuasarComponents,
+  type QuasarIconSet,
+  type QuasarPlugins
+} from 'quasar'
 
 export interface QuasarPresetOptions {
   plugins?: (keyof QuasarPlugins)[]
@@ -198,6 +202,11 @@ const toKebabCase = (str: string) =>
     ?.map((x) => x.toLowerCase())
     .join('-') ?? ''
 
+const componentsSafelistMap: Partial<Record<keyof QuasarComponents, string[]>> =
+  {
+    QSelect: ['q-list', 'q-item', 'q-virtual-scroll', 'q-menu']
+  }
+
 const pluginSafelistMap: Partial<Record<keyof QuasarPlugins, string[]>> = {
   BottomSheet: [
     'q-bottom-sheet',
@@ -2001,9 +2010,11 @@ textarea {
         QDrawerShortcuts,
         ElevationShortcuts
       ),
+      outputToCssLayers: true,
       layers: {
-        dismiss: -1,
-        default: 1
+        components: -1,
+        default: 1,
+        utilities: 2
       },
       theme: defaultTheme,
       variants: [
@@ -2021,9 +2032,11 @@ textarea {
             )
             const colorMatch = code.matchAll(/color="(\S*)"/g)
 
+            const pascalComponentsMatch: string[] = []
             const matches: string[] = []
             for (const match of kebabMatch) matches.push(match[0])
             for (const match of pascalMatch) {
+              pascalComponentsMatch.push(match[0])
               matches.push(toKebabCase(match[0]))
             }
             const transitionClasses = []
@@ -2047,10 +2060,31 @@ textarea {
             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)
               })
             )
-            classes.push(...transitionClasses, ...colorClasses)
+            const componentClasses = 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
           }
         }

package/src/node/plugins/quasar/unocss/theme.ts

@@ -1117,6 +1117,14 @@ export interface QuasarTheme {
       'q-notification--bottom-leave-active'?: string
       'q-notification--bottom-right-leave-active'?: string
     }
+    spaces: {
+      none: number
+      xs: number
+      sm: number
+      md: number
+      lg: number
+      xl: number
+    }
     z: {
       fab: number
       side: number
@@ -1444,6 +1452,14 @@ const defaultTheme: QuasarTheme = {
     'blue-grey-14': '#455a64'
   },
   quasar: {
+    spaces: {
+      none: 0,
+      xs: 1,
+      sm: 2,
+      md: 4,
+      lg: 6,
+      xl: 12
+    },
     z: {
       fab: 990,
       side: 1000,