unocss-preset-quasar 0.2.4 → 0.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/core/shape.unocss.js +1 -0
  2. package/dist/styles/md3/components/QDialog.unocss.js +2 -2
  3. package/dist/styles/md3/components/QDrawer.unocss.js +2 -1
  4. package/dist/styles/md3/components/QEditor.unocss.js +1 -0
  5. package/dist/styles/md3/components/QField.unocss.js +15 -17
  6. package/dist/theme.js +1 -0
  7. package/dist/types/theme.d.ts +1 -0
  8. package/package.json +1 -1
  9. package/src/core/shape.unocss.ts +1 -0
  10. package/src/styles/md3/components/QDialog.unocss.ts +2 -2
  11. package/src/styles/md3/components/QDrawer.unocss.ts +2 -1
  12. package/src/styles/md3/components/QEditor.unocss.ts +1 -0
  13. package/src/styles/md3/components/QField.unocss.ts +15 -17
  14. package/src/theme.ts +2 -0
package/dist/core/shape.unocss.js CHANGED
@@ -2,6 +2,7 @@ const preflights = [
2
2
  {
3
3
  getCSS: ({ theme }) => `
4
4
  :root {
5
+ --shape-corner-extra-small: ${theme.shape.corner.extraSmall};
5
6
  --shape-corner-small: ${theme.shape.corner.small};
6
7
  --shape-corner-medium: ${theme.shape.corner.medium};
7
8
  --shape-corner-large: ${theme.shape.corner.large};
package/dist/styles/md3/components/QDialog.unocss.js CHANGED
@@ -43,7 +43,7 @@ const shortcuts = [
43
43
  /^q-dialog__inner$/,
44
44
  ([, c], { theme }) => theme.quasar?.components?.['q-dialog__inner'] ??
45
45
  `outline-0
46
- [&>div]:(pointer-events-all overflow-auto border-rd-28px)
46
+ [&>div]:(pointer-events-all overflow-auto rounded-$shape-corner-large)
47
47
  [&>.q-card>.q-card\\_\\_actions_.q-btn--rectangle]:(min-w-64px)
48
48
  `
49
49
  ],
@@ -69,7 +69,7 @@ const shortcuts = [
69
69
  /^q-dialog__inner--top$/,
70
70
  ([, c], { theme }) => theme.quasar?.components?.['q-dialog__inner--top'] ??
71
71
  `pt-0! pb-0!
72
- [&:not(.q-dialog\\_\\_inner--animating)>div]:(rounded-tl-none rounded-tr-none)
72
+ [&:not(.q-dialog\\_\\_inner--animating)>div]:()
73
73
 
74
74
  `
75
75
  ],
package/dist/styles/md3/components/QDrawer.unocss.js CHANGED
@@ -32,7 +32,8 @@ const shortcuts = [
32
32
  [
33
33
  /^q-drawer--mini$/,
34
34
  ([, c], { theme }) => theme.quasar?.components?.['q-drawer--mini'] ??
35
- `[&_>_.q-drawer\\_\\_content]:(!py-9px)
35
+ `rounded-none
36
+ [&_>_.q-drawer\\_\\_content]:(!py-9px)
36
37
  [&_>_.q-drawer\\_\\_content_>_*]:(!px-4px)
37
38
  [&_.q-mini-drawer-hide]:(hidden) [&_.q-expansion-item\\_\\_content]:(hidden)
38
39
  [&_.q-tab\\_\\_label]:(text-12px)
package/dist/styles/md3/components/QEditor.unocss.js CHANGED
@@ -16,6 +16,7 @@ const shortcuts = [
16
16
  [
17
17
  /^q-editor__content$/,
18
18
  ([, c], { theme }) => `outline-0 p-10px min-h-10em border-b-inherit border-b-inherit overflow-auto max-w-full
19
+ bg-$light-surface-container-highest text-$light-on-surface-variant dark:bg-$dark-surface-container-highest dark:text-$dark-on-surface-variant
19
20
  [&_pre]:(whitespace-pre-wrap)
20
21
  [&_hr]:(border-none outline-0 m-1px h-1px bg-black bg-op-12)
21
22
  [&:empty:not(:focus):before]:(content-[attr(placeholder)] op-70)
package/dist/styles/md3/components/QField.unocss.js CHANGED
@@ -49,7 +49,8 @@ const shortcuts = [
49
49
  ([, c], { theme }) => theme.quasar?.components?.['q-field__append'] ??
50
50
  `flex-initial pl-[12px]
51
51
  [&:empty]:(hidden)
52
- [&_+_.q-field\\_\\_append]:(pl-[2px])`
52
+ [&_+_.q-field\\_\\_append]:(pl-[2px])
53
+ [&_>_.q-icon]:(bg-light-on-surface dark:bg-dark-on-surface cursor-pointer)`
53
54
  ],
54
55
  [/^q-field__inner$/, ([, c], { theme }) => `text-left`],
55
56
  [
@@ -174,18 +175,15 @@ const shortcuts = [
174
175
  [
175
176
  /^q-field--filled$/,
176
177
  ([, c], { theme }) => theme.quasar?.components?.['q-field--filled'] ??
177
- `[&_.q-field\\_\\_control]:(bg-$light-surface-container-highest text-$light-on-surface-variant
178
- dark:bg-$dark-surface-container-highest dark:text-$dark-on-surface-variant)
179
- [&_.q-field\\_\\_control]:(px-[16px] py-[0] layer-components:bg-black/5 rounded-tl-[4px] rounded-br-[0] rounded-tr-[4px] rounded-bl-[0])
178
+ `
179
+ [&_.q-field\\_\\_control]:(bg-$light-surface-container-highest text-$light-on-surface-variant
180
+ dark:bg-$dark-surface-container-highest dark:text-$dark-on-surface-variant px-[16px] py-[0] layer-components:bg-black/5 rounded-$shape-corner-extra-small)
180
181
  [&_.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)])
181
182
  [&_.q-field\\_\\_control:hover:before]:(opacity-100)
182
183
  [&_.q-field\\_\\_control:after]:(h-[2px] top-auto origin-[center_bottom] [transform:scale3d(0,_1,_1)] bg-current [transition:transform_0.36s_cubic-bezier(0.4,_0,_0.2,_1)])
183
184
  [&.q-field--rounded_.q-field\\_\\_control]:(rounded-tl-[28px] rounded-br-[0] rounded-tr-[28px] rounded-bl-[0])
184
185
  [&.q-field--highlighted_.q-field\\_\\_control:before]:(opacity-100 layer-components:bg-black/12)
185
186
  [&.q-field--highlighted_.q-field\\_\\_control:after]:([transform:scale3d(1,_1,_1)])
186
- [&.q-field--dark_.q-field\\_\\_control]:(layer-components:bg-white/7)
187
- [&.q-field--dark_.q-field\\_\\_control:before]:(layer-components:bg-white/7)
188
- [&.q-field--dark.q-field--highlighted_.q-field\\_\\_control:before]:(layer-components:bg-white/1)
189
187
  [&.q-field--readonly_.q-field\\_\\_control:before]:(opacity-100 bg-transparent [border-bottom-style:dashed])`
190
188
  ],
191
189
  [
@@ -216,15 +214,15 @@ const shortcuts = [
216
214
  [
217
215
  /^q-field--dark$/,
218
216
  ([, c], { theme }) => theme.quasar?.components?.['q-field--dark'] ??
219
- `[&_.q-field\\_\\_control:before]:(border-white/60)
220
- [&_.q-field\\_\\_control:hover:before]:(border-white)
221
- [&_.q-field\\_\\_native]:(text-white)
222
- [&_.q-field\\_\\_prefix]:(text-white)
223
- [&_.q-field\\_\\_suffix]:(text-white)
224
- [&_.q-field\\_\\_input]:(text-white)
225
- [&:not(.q-field--highlighted)_.q-field\\_\\_label]:(text-white/70)
226
- [&_.q-field\\_\\_marginal]:(text-white/70)
227
- [&_.q-field\\_\\_bottom]:(text-white/70)`
217
+ `[&_.q-field\\_\\_control:before]:(border-$dark-on-surface-variant/60)
218
+ [&_.q-field\\_\\_control:hover:before]:(border-$dark-on-surface-variant)
219
+ [&_.q-field\\_\\_native]:(text-$dark-on-surface-variant)
220
+ [&_.q-field\\_\\_prefix]:(text-$dark-on-surface-variant)
221
+ [&_.q-field\\_\\_suffix]:(text-$dark-on-surface-variant)
222
+ [&_.q-field\\_\\_input]:(text-$dark-on-surface-variant)
223
+ [&:not(.q-field--highlighted)_.q-field\\_\\_label]:(text-$dark-on-surface-variant/70)
224
+ [&_.q-field\\_\\_marginal]:(text-$dark-on-surface-variant/70)
225
+ [&_.q-field\\_\\_bottom]:(text-$dark-on-surface-variant/70)`
228
226
  ],
229
227
  [
230
228
  /^q-field--standout$/,
@@ -315,7 +313,7 @@ text-$dark-on-surface)
315
313
  [
316
314
  /^q-field__focusable-action$/,
317
315
  ([, c], { theme }) => theme.quasar?.components?.['q-field__focusable-action'] ??
318
- `opacity-60 cursor-pointer !outline-[0] border-[0] [color:inherit] bg-transparent p-0
316
+ `opacity-60 cursor-pointer !outline-[0] border-[0] [color:inherit] p-0
319
317
  [&:hover]:(opacity-100)
320
318
  [&:focus]:(opacity-100)`
321
319
  ],
package/dist/theme.js CHANGED
@@ -12,6 +12,7 @@ const defaultTheme = {
12
12
  },
13
13
  shape: {
14
14
  corner: {
15
+ extraSmall: '4px',
15
16
  small: '8px',
16
17
  medium: '12px',
17
18
  large: '16px'
package/dist/types/theme.d.ts CHANGED
@@ -49,6 +49,7 @@ export interface QuasarTheme {
49
49
  };
50
50
  shape: {
51
51
  corner: {
52
+ extraSmall: string;
52
53
  small: string;
53
54
  medium: string;
54
55
  large: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unocss-preset-quasar",
3
- "version": "0.2.4",
3
+ "version": "0.2.6",
4
4
  "license": "MIT",
5
5
  "author": "Stefan van Herwijnen",
6
6
  "description": "UnoCSS preset for Quasar Framework",
package/src/core/shape.unocss.ts CHANGED
@@ -5,6 +5,7 @@ const preflights: Preflight<QuasarTheme>[] = [
5
5
  {
6
6
  getCSS: ({ theme }) => `
7
7
  :root {
8
+ --shape-corner-extra-small: ${theme.shape.corner.extraSmall};
8
9
  --shape-corner-small: ${theme.shape.corner.small};
9
10
  --shape-corner-medium: ${theme.shape.corner.medium};
10
11
  --shape-corner-large: ${theme.shape.corner.large};
package/src/styles/md3/components/QDialog.unocss.ts CHANGED
@@ -49,7 +49,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
49
49
  ([, c], { theme }) =>
50
50
  theme.quasar?.components?.['q-dialog__inner'] ??
51
51
  `outline-0
52
- [&>div]:(pointer-events-all overflow-auto border-rd-28px)
52
+ [&>div]:(pointer-events-all overflow-auto rounded-$shape-corner-large)
53
53
  [&>.q-card>.q-card\\_\\_actions_.q-btn--rectangle]:(min-w-64px)
54
54
  `
55
55
  ],
@@ -81,7 +81,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
81
81
  ([, c], { theme }) =>
82
82
  theme.quasar?.components?.['q-dialog__inner--top'] ??
83
83
  `pt-0! pb-0!
84
- [&:not(.q-dialog\\_\\_inner--animating)>div]:(rounded-tl-none rounded-tr-none)
84
+ [&:not(.q-dialog\\_\\_inner--animating)>div]:()
85
85
 
86
86
  `
87
87
  ],
package/src/styles/md3/components/QDrawer.unocss.ts CHANGED
@@ -46,7 +46,8 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
46
46
  /^q-drawer--mini$/,
47
47
  ([, c], { theme }) =>
48
48
  theme.quasar?.components?.['q-drawer--mini'] ??
49
- `[&_>_.q-drawer\\_\\_content]:(!py-9px)
49
+ `rounded-none
50
+ [&_>_.q-drawer\\_\\_content]:(!py-9px)
50
51
  [&_>_.q-drawer\\_\\_content_>_*]:(!px-4px)
51
52
  [&_.q-mini-drawer-hide]:(hidden) [&_.q-expansion-item\\_\\_content]:(hidden)
52
53
  [&_.q-tab\\_\\_label]:(text-12px)
package/src/styles/md3/components/QEditor.unocss.ts CHANGED
@@ -26,6 +26,7 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
26
26
  [, c],
27
27
  { theme }
28
28
  ) => `outline-0 p-10px min-h-10em border-b-inherit border-b-inherit overflow-auto max-w-full
29
+ bg-$light-surface-container-highest text-$light-on-surface-variant dark:bg-$dark-surface-container-highest dark:text-$dark-on-surface-variant
29
30
  [&_pre]:(whitespace-pre-wrap)
30
31
  [&_hr]:(border-none outline-0 m-1px h-1px bg-black bg-op-12)
31
32
  [&:empty:not(:focus):before]:(content-[attr(placeholder)] op-70)
package/src/styles/md3/components/QField.unocss.ts CHANGED
@@ -62,7 +62,8 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
62
62
  theme.quasar?.components?.['q-field__append'] ??
63
63
  `flex-initial pl-[12px]
64
64
  [&:empty]:(hidden)
65
- [&_+_.q-field\\_\\_append]:(pl-[2px])`
65
+ [&_+_.q-field\\_\\_append]:(pl-[2px])
66
+ [&_>_.q-icon]:(bg-light-on-surface dark:bg-dark-on-surface cursor-pointer)`
66
67
  ],
67
68
 
68
69
  [/^q-field__inner$/, ([, c], { theme }) => `text-left`],
@@ -222,18 +223,15 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
222
223
  /^q-field--filled$/,
223
224
  ([, c], { theme }) =>
224
225
  theme.quasar?.components?.['q-field--filled'] ??
225
- `[&_.q-field\\_\\_control]:(bg-$light-surface-container-highest text-$light-on-surface-variant
226
- dark:bg-$dark-surface-container-highest dark:text-$dark-on-surface-variant)
227
- [&_.q-field\\_\\_control]:(px-[16px] py-[0] layer-components:bg-black/5 rounded-tl-[4px] rounded-br-[0] rounded-tr-[4px] rounded-bl-[0])
226
+ `
227
+ [&_.q-field\\_\\_control]:(bg-$light-surface-container-highest text-$light-on-surface-variant
228
+ dark:bg-$dark-surface-container-highest dark:text-$dark-on-surface-variant px-[16px] py-[0] layer-components:bg-black/5 rounded-$shape-corner-extra-small)
228
229
  [&_.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)])
229
230
  [&_.q-field\\_\\_control:hover:before]:(opacity-100)
230
231
  [&_.q-field\\_\\_control:after]:(h-[2px] top-auto origin-[center_bottom] [transform:scale3d(0,_1,_1)] bg-current [transition:transform_0.36s_cubic-bezier(0.4,_0,_0.2,_1)])
231
232
  [&.q-field--rounded_.q-field\\_\\_control]:(rounded-tl-[28px] rounded-br-[0] rounded-tr-[28px] rounded-bl-[0])
232
233
  [&.q-field--highlighted_.q-field\\_\\_control:before]:(opacity-100 layer-components:bg-black/12)
233
234
  [&.q-field--highlighted_.q-field\\_\\_control:after]:([transform:scale3d(1,_1,_1)])
234
- [&.q-field--dark_.q-field\\_\\_control]:(layer-components:bg-white/7)
235
- [&.q-field--dark_.q-field\\_\\_control:before]:(layer-components:bg-white/7)
236
- [&.q-field--dark.q-field--highlighted_.q-field\\_\\_control:before]:(layer-components:bg-white/1)
237
235
  [&.q-field--readonly_.q-field\\_\\_control:before]:(opacity-100 bg-transparent [border-bottom-style:dashed])`
238
236
  ],
239
237
 
@@ -270,15 +268,15 @@ const shortcuts: UserShortcuts<QuasarTheme> = [
270
268
  /^q-field--dark$/,
271
269
  ([, c], { theme }) =>
272
270
  theme.quasar?.components?.['q-field--dark'] ??
273
- `[&_.q-field\\_\\_control:before]:(border-white/60)
274
- [&_.q-field\\_\\_control:hover:before]:(border-white)
275
- [&_.q-field\\_\\_native]:(text-white)
276
- [&_.q-field\\_\\_prefix]:(text-white)
277
- [&_.q-field\\_\\_suffix]:(text-white)
278
- [&_.q-field\\_\\_input]:(text-white)
279
- [&:not(.q-field--highlighted)_.q-field\\_\\_label]:(text-white/70)
280
- [&_.q-field\\_\\_marginal]:(text-white/70)
281
- [&_.q-field\\_\\_bottom]:(text-white/70)`
271
+ `[&_.q-field\\_\\_control:before]:(border-$dark-on-surface-variant/60)
272
+ [&_.q-field\\_\\_control:hover:before]:(border-$dark-on-surface-variant)
273
+ [&_.q-field\\_\\_native]:(text-$dark-on-surface-variant)
274
+ [&_.q-field\\_\\_prefix]:(text-$dark-on-surface-variant)
275
+ [&_.q-field\\_\\_suffix]:(text-$dark-on-surface-variant)
276
+ [&_.q-field\\_\\_input]:(text-$dark-on-surface-variant)
277
+ [&:not(.q-field--highlighted)_.q-field\\_\\_label]:(text-$dark-on-surface-variant/70)
278
+ [&_.q-field\\_\\_marginal]:(text-$dark-on-surface-variant/70)
279
+ [&_.q-field\\_\\_bottom]:(text-$dark-on-surface-variant/70)`
282
280
  ],
283
281
 
284
282
  [
@@ -381,7 +379,7 @@ text-$dark-on-surface)
381
379
  /^q-field__focusable-action$/,
382
380
  ([, c], { theme }) =>
383
381
  theme.quasar?.components?.['q-field__focusable-action'] ??
384
- `opacity-60 cursor-pointer !outline-[0] border-[0] [color:inherit] bg-transparent p-0
382
+ `opacity-60 cursor-pointer !outline-[0] border-[0] [color:inherit] p-0
385
383
  [&:hover]:(opacity-100)
386
384
  [&:focus]:(opacity-100)`
387
385
  ],
package/src/theme.ts CHANGED
@@ -63,6 +63,7 @@ export interface QuasarTheme {
63
63
  }
64
64
  shape: {
65
65
  corner: {
66
+ extraSmall: string
66
67
  small: string
67
68
  medium: string
68
69
  large: string
@@ -1231,6 +1232,7 @@ const defaultTheme: QuasarTheme = {
1231
1232
  },
1232
1233
  shape: {
1233
1234
  corner: {
1235
+ extraSmall: '4px',
1234
1236
  small: '8px',
1235
1237
  medium: '12px',
1236
1238
  large: '16px'