unocss-preset-quasar 0.1.1 → 0.1.2

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 (21) hide show
  1. package/dist/index.js +66 -61
  2. package/dist/styles/md2/components/QSkeleton.unocss.js +51 -51
  3. package/dist/styles/md2/components/QTree.unocss.js +13 -13
  4. package/dist/styles/md3/components/QBtnToggle.unocss.js +3 -3
  5. package/dist/styles/md3/components/QSkeleton.unocss.js +51 -51
  6. package/dist/styles/md3/components/QSlider.unocss.js +2 -2
  7. package/dist/styles/md3/components/QTime.unocss.js +21 -10
  8. package/dist/styles/md3/components/QTree.unocss.js +13 -13
  9. package/dist/theme.js +132 -60
  10. package/dist/types/index.d.ts +1 -1
  11. package/dist/types/theme.d.ts +41 -4
  12. package/package.json +8 -8
  13. package/src/index.ts +71 -63
  14. package/src/styles/md2/components/QSkeleton.unocss.ts +51 -75
  15. package/src/styles/md2/components/QTree.unocss.ts +14 -13
  16. package/src/styles/md3/components/QBtnToggle.unocss.ts +3 -3
  17. package/src/styles/md3/components/QSkeleton.unocss.ts +51 -75
  18. package/src/styles/md3/components/QSlider.unocss.ts +2 -2
  19. package/src/styles/md3/components/QTime.unocss.ts +21 -10
  20. package/src/styles/md3/components/QTree.unocss.ts +14 -13
  21. package/src/theme.ts +239 -62
package/dist/styles/md3/components/QSlider.unocss.js CHANGED
@@ -21,12 +21,12 @@ const shortcuts = [
21
21
  [
22
22
  /^q-slider__track$/,
23
23
  ([, c], { theme }) => theme.quasar?.components?.['q-slider__track'] ??
24
- `bg-[rgba(0,_0,_0,_0.1)] rounded-[4px] [width:inherit] [height:inherit] text-primary`
24
+ `bg-light-secondary-container/10 dark:bg-dark-secondary-container/10 rounded-[4px] [width:inherit] [height:inherit] text-light-primary dark:text-dark-primary`
25
25
  ],
26
26
  [
27
27
  /^q-slider__inner$/,
28
28
  ([, c], { theme }) => theme.quasar?.components?.['q-slider__inner'] ??
29
- `bg-[rgba(0,_0,_0,_0.1)] [border-radius:inherit] w-full h-full`
29
+ `bg-light-secondary-container/10 dark:bg-dark-secondary-container/10 [border-radius:inherit] w-full h-full`
30
30
  ],
31
31
  [
32
32
  /^q-slider__selection$/,
package/dist/styles/md3/components/QTime.unocss.js CHANGED
@@ -2,7 +2,8 @@ const shortcuts = [
2
2
  [
3
3
  /^q-time$/,
4
4
  ([, c], { theme }) => theme.quasar?.components?.['q-time'] ??
5
- `[box-shadow:0_1px_5px_rgba(0,_0,_0,_0.2),_0_2px_2px_rgba(0,_0,_0,_0.14),_0_3px_1px_-2px_rgba(0,_0,_0,_0.12)] rounded-[4px] bg-[#fff] outline-[0] w-[290px] min-w-[290px] max-w-full [&.disabled_.q-time\\_\\_header-ampm]:(pointer-events-none) [&.disabled_.q-time\\_\\_content]:(pointer-events-none)`
5
+ `bg-light-surface-container-high dark:bg-dark-surface-container-high
6
+ [box-shadow:0_1px_5px_rgba(0,_0,_0,_0.2),_0_2px_2px_rgba(0,_0,_0,_0.14),_0_3px_1px_-2px_rgba(0,_0,_0,_0.12)] rounded-[4px] outline-[0] w-[290px] min-w-[290px] max-w-full [&.disabled_.q-time\\_\\_header-ampm]:(pointer-events-none) [&.disabled_.q-time\\_\\_content]:(pointer-events-none)`
6
7
  ],
7
8
  [
8
9
  /^q-time--bordered$/,
@@ -12,7 +13,7 @@ const shortcuts = [
12
13
  [
13
14
  /^q-time__header$/,
14
15
  ([, c], { theme }) => theme.quasar?.components?.['q-time__header'] ??
15
- `[border-top-left-radius:inherit] text-[#fff] p-[16px] font-light bg-primary`
16
+ `[border-top-left-radius:inherit] text-light-on-surface dark:text-dark-on-surface p-[16px] font-light`
16
17
  ],
17
18
  [
18
19
  /^q-time__actions$/,
@@ -22,21 +23,29 @@ const shortcuts = [
22
23
  [
23
24
  /^q-time__header-label$/,
24
25
  ([, c], { theme }) => theme.quasar?.components?.['q-time__header-label'] ??
25
- `text-[28px] leading-none tracking-[-0.00833em] [&_>_div_+_div]:(ml-[4px]) !flex-initial`
26
+ `text-[48px] border-rd-8px
27
+ leading-none tracking-[-0.00833em] [&_>_div_+_div]:(ml-[4px]) !flex-initial`
26
28
  ],
27
29
  [
28
30
  /^q-time__link$/,
29
31
  ([, c], { theme }) => theme.quasar?.components?.['q-time__link'] ??
30
- `opacity-[0.56] outline-[0] [transition:opacity_0.3s_ease-out] [&:hover]:(opacity-100) [&:focus]:(opacity-100)`
32
+ `p-6px
33
+ bg-light-surface-container-highest dark:bg-dark-surface-container-highest
34
+ text-light-on-surface dark:text-dark-on-surface
35
+ opacity-[0.56] outline-[0] [transition:opacity_0.3s_ease-out] [&:hover]:(opacity-100) [&:focus]:(opacity-100)`
31
36
  ],
32
37
  [
33
38
  /^q-time__link--active$/,
34
- ([, c], { theme }) => theme.quasar?.components?.['q-time__link--active'] ?? `opacity-100`
39
+ ([, c], { theme }) => theme.quasar?.components?.['q-time__link--active'] ??
40
+ `
41
+ text-light-on-primary-container dark:text-dark-on-primary-container bg-light-primary-container dark:bg-dark-primary-container
42
+ opacity-100`
35
43
  ],
36
44
  [
37
45
  /^q-time__header-ampm$/,
38
46
  ([, c], { theme }) => theme.quasar?.components?.['q-time__header-ampm'] ??
39
- `text-[16px] tracking-widest !flex-initial`
47
+ `text-[16px] tracking-widest !flex-initial
48
+ [&_.q-time\\_\\_link--active]:(bg-light-tertiary-container dark:bg-dark-tertiary-container)`
40
49
  ],
41
50
  [
42
51
  /^q-time__content$/,
@@ -50,7 +59,7 @@ const shortcuts = [
50
59
  [
51
60
  /^q-time__container-child$/,
52
61
  ([, c], { theme }) => theme.quasar?.components?.['q-time__container-child'] ??
53
- `rounded-[50%] bg-[rgba(0,_0,_0,_0.12)]`
62
+ `rounded-[50%] bg-light-surface-container-highest dark:bg-dark-surface-container-highest`
54
63
  ],
55
64
  [
56
65
  /^q-time__clock$/,
@@ -69,7 +78,9 @@ const shortcuts = [
69
78
  [
70
79
  /^q-time__clock-pointer$/,
71
80
  ([, c], { theme }) => theme.quasar?.components?.['q-time__clock-pointer'] ??
72
- `w-[2px] h-1/2 origin-[0_0] min-h-[0] absolute left-2/4 right-[0] bottom-[0] bg-current -translate-x-1/2 [&:before]:(content-[''] absolute left-2/4 rounded-[50%] bg-current -translate-x-1/2) [&:after]:(content-[''] absolute left-2/4 rounded-[50%] bg-current -translate-x-1/2) [&:before]:(-bottom-[4px] w-[8px] h-[8px]) [&:after]:(-top-[3px] h-[6px] w-[6px])`
81
+ `text-light-primary dark:text-dark-primary w-[2px] h-1/2 origin-[0_0] min-h-[0] absolute left-2/4 right-[0] bottom-[0] bg-current -translate-x-1/2 [&:before]:(content-[''] absolute left-2/4 rounded-[50%] bg-current -translate-x-1/2) [&:after]:(content-[''] absolute left-2/4 rounded-[50%] bg-current -translate-x-1/2)
82
+ [&:before]:(-bottom-[4px] w-[8px] h-[8px])
83
+ [&:after]:(-top-[3px] h-[6px] w-[6px])`
73
84
  ],
74
85
  [
75
86
  /^q-time__clock-position$/,
@@ -84,7 +95,7 @@ const shortcuts = [
84
95
  [
85
96
  /^q-time__clock-position--active$/,
86
97
  ([, c], { theme }) => theme.quasar?.components?.['q-time__clock-position--active'] ??
87
- `text-[#fff]`
98
+ `bg-light-primary dark:bg-dark-primary text-light-on-primary dark:text-dark-on-primary`
88
99
  ],
89
100
  [
90
101
  /^q-time__clock-pos-0$/,
@@ -199,7 +210,7 @@ const shortcuts = [
199
210
  [
200
211
  /^q-time__now-button$/,
201
212
  ([, c], { theme }) => theme.quasar?.components?.['q-time__now-button'] ??
202
- `text-[#fff] top-[12px] right-[12px]`
213
+ `text-light-on-surface dark:text-dark-on-surface top-[12px] right-[12px]`
203
214
  ],
204
215
  [
205
216
  /^q-time--readonly$/,
package/dist/styles/md3/components/QTree.unocss.js CHANGED
@@ -14,22 +14,22 @@ const shortcuts = [
14
14
  [
15
15
  /^q-tree$/,
16
16
  ([, c], { theme }) => theme.quasar?.components?.['q-tree'] ??
17
- `relative text-[#9e9e9e] [&_>_.q-tree\\_\\_node]:(p-0) [&_>_.q-tree\\_\\_node:after]:(hidden) [&_>_.q-tree\\_\\_node_>_.q-tree\\_\\_node-header:before]:(hidden) [&_>_.q-tree\\_\\_node--child_>_.q-tree\\_\\_node-header]:(pl-[24px])`
17
+ `relative text-[#9e9e9e] [&_>_.q-tree\\_\\_node]:(p-0) [&_>_.q-tree\\_\\_node:after]:(hidden) [&_>_.q-tree\\_\\_node>_.q-tree\\_\\_node-header:before]:(hidden) [&_>_.q-tree\\_\\_node--child>_.q-tree\\_\\_node-header]:(pl-[24px])`
18
18
  ],
19
19
  [
20
20
  /^q-tree__node$/,
21
21
  ([, c], { theme }) => theme.quasar?.components?.['q-tree__node'] ??
22
- `pt-[0] pr-[0] pb-[3px] pl-[22px] [&:after]:(content-empty absolute -top-[3px] bottom-[0] w-[2px] right-auto -left-[13px] [border-left:1px_solid_currentColor]) [&:last-child:after]:(hidden)`
22
+ `pt-[0] pr-[0] pb-[3px] pl-[22px] [&:after]:(content-empty absolute -top-[3px] bottom-[0] w-[2px] right-auto -left-[13px] border-left-current) [&:last-child:after]:(hidden)`
23
23
  ],
24
24
  [
25
25
  /^q-tree__node--disabled$/,
26
26
  ([, c], { theme }) => theme.quasar?.components?.['q-tree__node--disabled'] ??
27
- `pointer-events-none [&_.disabled]:(!opacity-100) [&_>_div]:(!opacity-60) [&_>_i]:(!opacity-60) [&_>_.disabled]:(!opacity-60) [&_>_div_.q-tree\\_\\_node--disabled_>_div]:(!opacity-100) [&_>_div_.q-tree\\_\\_node--disabled_>_i]:(!opacity-100) [&_>_div_.q-tree\\_\\_node--disabled_>_.disabled]:(!opacity-100) [&_>_i_.q-tree\\_\\_node--disabled_>_div]:(!opacity-100) [&_>_i_.q-tree\\_\\_node--disabled_>_i]:(!opacity-100) [&_>_i_.q-tree\\_\\_node--disabled_>_.disabled]:(!opacity-100) [&_>_.disabled_.q-tree\\_\\_node--disabled_>_div]:(!opacity-100) [&_>_.disabled_.q-tree\\_\\_node--disabled_>_i]:(!opacity-100) [&_>_.disabled_.q-tree\\_\\_node--disabled_>_.disabled]:(!opacity-100)`
27
+ `pointer-events-none [&_.disabled]:(!opacity-100) [&>div]:(!opacity-60) [&>i]:(!opacity-60) [&>_.disabled]:(!opacity-60) [&>div_.q-tree\\_\\_node--disabled>div]:(!opacity-100) [&>div_.q-tree\\_\\_node--disabled>i]:(!opacity-100) [&>div_.q-tree\\_\\_node--disabled>_.disabled]:(!opacity-100) [&>i_.q-tree\\_\\_node--disabled>div]:(!opacity-100) [&>i_.q-tree\\_\\_node--disabled>i]:(!opacity-100) [&>i_.q-tree\\_\\_node--disabled>_.disabled]:(!opacity-100) [&>_.disabled_.q-tree\\_\\_node--disabled>div]:(!opacity-100) [&>_.disabled_.q-tree\\_\\_node--disabled>i]:(!opacity-100) [&>_.disabled_.q-tree\\_\\_node--disabled>_.disabled]:(!opacity-100)`
28
28
  ],
29
29
  [
30
30
  /^q-tree__node-header$/,
31
31
  ([, c], { theme }) => theme.quasar?.components?.['q-tree__node-header'] ??
32
- `[&:before]:(content-empty absolute -top-[3px] bottom-2/4 w-[31px] -left-[35px] [border-left:1px_solid_currentColor] [border-bottom:1px_solid_currentColor]) p-[4px] mt-[3px] rounded-[4px] outline-[0]`
32
+ `[&:before]:(content-empty absolute -top-[3px] bottom-2/4 w-[31px] -left-[35px] border-left-current border-bottom-current) p-[4px] mt-[3px] rounded-[4px] outline-[0]`
33
33
  ],
34
34
  [
35
35
  /^q-tree__children$/,
@@ -43,7 +43,7 @@ const shortcuts = [
43
43
  [
44
44
  /^q-tree__node--parent$/,
45
45
  ([, c], { theme }) => theme.quasar?.components?.['q-tree__node--parent'] ??
46
- `pl-[2px] [&_>_.q-tree\\_\\_node-header:before]:(w-[15px] -left-[15px]) [&_>_.q-tree\\_\\_node-collapsible_>_.q-tree\\_\\_node-body]:(pt-[5px] pr-[0] pb-[8px] pl-[27px]) [&_>_.q-tree\\_\\_node-collapsible_>_.q-tree\\_\\_node-body:after]:(content-empty absolute top-[0] w-[2px] h-full right-auto left-[12px] [border-left:1px_solid_currentColor] bottom-[50px])`
46
+ `pl-[2px] [&>_.q-tree__node-header:before]:(w-[15px] -left-[15px]) [&>_.q-tree__node-collapsible>_.q-tree__node-body]:(pt-[5px] pr-[0] pb-[8px] pl-[27px]) [&>_.q-tree__node-collapsible>_.q-tree__node-body:after]:(content-empty absolute top-[0] w-[2px] h-full right-auto left-[12px] border-left-current bottom-[50px])`
47
47
  ],
48
48
  [
49
49
  /^q-tree__node--link$/,
@@ -52,16 +52,16 @@ const shortcuts = [
52
52
  [
53
53
  /^q-tree__node-header-content$/,
54
54
  ([, c], { theme }) => theme.quasar?.components?.['q-tree__node-header-content'] ??
55
- `text-[#000] [transition:color_0.3s] [&_.q-icon]:(text-[21px]) [&_.q-avatar]:(text-[28px] rounded-[50%] w-[28px] h-[28px])`
55
+ `text-[#000] [transition:color_0.3s] [&_.q-icon]:(text-21px) [&_.q-avatar]:(text-[28px] rounded-[50%] w-[28px] h-[28px])`
56
56
  ],
57
57
  [
58
58
  /^q-tree__node--selected$/,
59
59
  ([, c], { theme }) => theme.quasar?.components?.['q-tree__node--selected'] ??
60
- `[&_.q-tree\\_\\_node-header-content]:(text-[#9e9e9e])`
60
+ `[&_.q-tree\\_\\_node--selected_.q-tree__node-header-content]:(text-[#9e9e9e])`
61
61
  ],
62
62
  [
63
63
  /^q-tree__icon$/,
64
- ([, c], { theme }) => theme.quasar?.components?.['q-tree__icon'] ?? `text-[21px]`
64
+ ([, c], { theme }) => theme.quasar?.components?.['q-tree__icon'] ?? `text-21px`
65
65
  ],
66
66
  [
67
67
  /^q-tree__img$/,
@@ -84,7 +84,7 @@ const shortcuts = [
84
84
  [
85
85
  /^q-tree__arrow--rotate$/,
86
86
  ([, c], { theme }) => theme.quasar?.components?.['q-tree__arrow--rotate'] ??
87
- `[transform:rotate3d(0,_0,_1,_90deg)]`
87
+ `[transform:rotate3d(0_0_1_90deg)]`
88
88
  ],
89
89
  [
90
90
  /^q-tree__tickbox$/,
@@ -93,22 +93,22 @@ const shortcuts = [
93
93
  [
94
94
  /^q-tree--dark$/,
95
95
  ([, c], { theme }) => theme.quasar?.components?.['q-tree--dark'] ??
96
- `[&_.q-tree\\_\\_node-header-content]:(text-[#fff])`
96
+ `[&--dark] [&_.q-tree__node-header-content]:(text-[#fff])`
97
97
  ],
98
98
  [
99
99
  /^q-tree--no-connectors$/,
100
100
  ([, c], { theme }) => theme.quasar?.components?.['q-tree--no-connectors'] ??
101
- `[&_.q-tree\\_\\_node:after]:(!hidden) [&_.q-tree\\_\\_node-header:before]:(!hidden) [&_.q-tree\\_\\_node-body:after]:(!hidden)`
101
+ `[&--no-connectors] [&_.q-tree__node:after]:(!hidden) [&--no-connectors] [&_.q-tree__node-header:before]:(!hidden) [&--no-connectors] [&_.q-tree__node-body:after]:(!hidden)`
102
102
  ],
103
103
  [
104
104
  /^q-tree--dense$/,
105
105
  ([, c], { theme }) => theme.quasar?.components?.['q-tree--dense'] ??
106
- `[&_>_.q-tree\\_\\_node--child_>_.q-tree\\_\\_node-header]:(pl-px) [&_.q-tree\\_\\_arrow]:(mr-px) [&_.q-tree\\_\\_spinner]:(mr-px) [&_.q-tree\\_\\_img]:(h-[32px]) [&_.q-tree\\_\\_tickbox]:(mr-[3px]) [&_.q-tree\\_\\_node]:(p-0) [&_.q-tree\\_\\_node:after]:(top-[0] -left-[8px]) [&_.q-tree\\_\\_node-header]:(mt-0 p-px) [&_.q-tree\\_\\_node-header:before]:(top-[0] -left-[8px] w-[8px]) [&_.q-tree\\_\\_node--child]:(pl-[17px]) [&_.q-tree\\_\\_node--child_>_.q-tree\\_\\_node-header:before]:(-left-[25px] w-[21px]) [&_.q-tree\\_\\_node-body]:(pt-[0] px-[0] pb-[2px]) [&_.q-tree\\_\\_children]:(pl-[16px])`
106
+ `[&--dense] &>_.q-tree__node--child>_.q-tree__node-header:(pl-px) [&--dense] [&_.q-tree__arrow]:(mr-px) [&--dense] [&_.q-tree__spinner]:(mr-px) [&--dense] [&_.q-tree__img]:(h-[32px]) [&--dense] [&_.q-tree__tickbox]:(mr-[3px]) [&--dense] [&_.q-tree__node]:(p-0) [&--dense] [&_.q-tree__node:after]:(top-[0] -left-[8px]) [&--dense] [&_.q-tree__node-header]:(mt-0 p-px) [&--dense] [&_.q-tree__node-header:before]:(top-[0] -left-[8px] w-[8px]) [&--dense] &>_.q-tree__node--child>_.q-tree__node-header:(pl-[17px]) [&--dense] &>_.q-tree__node--child>_.q-tree__node-header:before:(-left-[25px] w-[21px]) [&--dense] [&_.q-tree__node-body]:(pt-[0] pr-[0] pb-[2px]) [&--dense] [&_.q-tree__children]:(pl-[16px])`
107
107
  ],
108
108
  [
109
109
  /^q-tree--dense$/,
110
110
  ([, c], { theme }) => theme.quasar?.components?.['q-tree--dense'] ??
111
- `[&__.q-tree\\_\\_node--parent__>_.q-tree\\_\\_node-collapsible__>_.q-tree\\_\\_node-body]:(pt-[0] pr-[0] pb-[2px] pl-[20px]) [&__.q-tree\\_\\_node--parent__>_.q-tree\\_\\_node-collapsible__>_.q-tree\\_\\_node-body:after]:(left-[8px])`
111
+ `[&--dense] &__.q-tree__node--parent>_.q-tree__node-collapsible>_.q-tree__node-body:(pt-[0] pr-[0] pb-[2px] pl-[20px]) [&--dense] &__.q-tree__node--parent>_.q-tree__node-collapsible>_.q-tree__node-body:after:(left-[8px])`
112
112
  ]
113
113
  ];
114
114
  export { preflights, shortcuts };
package/dist/theme.js CHANGED
@@ -1,4 +1,4 @@
1
- import materialDynamicColors from 'material-dynamic-colors';
1
+ import { argbFromHex, hexFromArgb, themeFromSourceColor } from '@material/material-color-utilities';
2
2
  const defaultTheme = {
3
3
  typography: {
4
4
  fontFamily: '"Roboto", "-apple-system", "Helvetica Neue", Helvetica, Arial, sans-serif'
@@ -12,84 +12,84 @@ const defaultTheme = {
12
12
  },
13
13
  colors: {
14
14
  light: {
15
- primary: '#6d4ea1',
15
+ primary: '#684fa4',
16
16
  onPrimary: '#ffffff',
17
- primaryContainer: '#ebdcff',
18
- onPrimaryContainer: '#270058',
19
- secondary: '#635b70',
17
+ primaryContainer: '#e9ddff',
18
+ onPrimaryContainer: '#23005c',
19
+ secondary: '#625b70',
20
20
  onSecondary: '#ffffff',
21
- secondaryContainer: '#eadef7',
22
- onSecondaryContainer: '#1f182a',
23
- tertiary: '#7f525d',
21
+ secondaryContainer: '#e8def8',
22
+ onSecondaryContainer: '#1e192b',
23
+ tertiary: '#7e525f',
24
24
  onTertiary: '#ffffff',
25
- tertiaryContainer: '#ffd9e0',
26
- onTertiaryContainer: '#32101a',
25
+ tertiaryContainer: '#ffd9e2',
26
+ onTertiaryContainer: '#31101d',
27
27
  error: '#ba1a1a',
28
28
  onError: '#ffffff',
29
29
  errorContainer: '#ffdad6',
30
30
  onErrorContainer: '#410002',
31
31
  background: '#fffbff',
32
- onBackground: '#1d1b1e',
33
- surface: '#fef8fc',
34
- onSurface: '#1d1b1e',
35
- surfaceVariant: '#e8e0eb',
32
+ onBackground: '#1c1b1e',
33
+ surface: '#fffbff',
34
+ onSurface: '#1c1b1e',
35
+ surfaceVariant: '#e7e0eb',
36
36
  onSurfaceVariant: '#49454e',
37
37
  outline: '#7a757f',
38
- outlineVariant: '#cbc4cf',
38
+ outlineVariant: '#cac4cf',
39
39
  shadow: '#000000',
40
40
  scrim: '#000000',
41
41
  inverseSurface: '#323033',
42
42
  inverseOnSurface: '#f5eff4',
43
- inversePrimary: '#d5bbff',
44
- surfaceDim: '#ded8dd',
45
- surfaceBright: '#fef8fc',
46
- surfaceContainerLowest: '#ffffff',
47
- surfaceContainerLow: '#f8f2f7',
48
- surfaceContainer: '#f2ecf1',
49
- surfaceContainerHigh: '#ece6eb',
50
- surfaceContainerHighest: '#e6e1e6'
43
+ inversePrimary: '#d0bcff',
44
+ surfaceDim: '#141316',
45
+ surfaceBright: '#3a383c',
46
+ surfaceContainerLowest: '#0f0e11',
47
+ surfaceContainerLow: '#1c1b1e',
48
+ surfaceContainer: '#211f22',
49
+ surfaceContainerHigh: '#2b292d',
50
+ surfaceContainerHighest: '#363438'
51
51
  },
52
52
  dark: {
53
- primary: '#d5bbff',
54
- onPrimary: '#3d1c70',
55
- primaryContainer: '#543588',
56
- onPrimaryContainer: '#ebdcff',
57
- secondary: '#cdc2db',
58
- onSecondary: '#342d40',
59
- secondaryContainer: '#4b4357',
60
- onSecondaryContainer: '#eadef7',
61
- tertiary: '#f1b7c4',
62
- onTertiary: '#4a252f',
63
- tertiaryContainer: '#643b45',
64
- onTertiaryContainer: '#ffd9e0',
53
+ primary: '#d0bcff',
54
+ onPrimary: '#391e72',
55
+ primaryContainer: '#50378a',
56
+ onPrimaryContainer: '#e9ddff',
57
+ secondary: '#ccc2db',
58
+ onSecondary: '#332d41',
59
+ secondaryContainer: '#4a4458',
60
+ onSecondaryContainer: '#e8def8',
61
+ tertiary: '#efb8c7',
62
+ onTertiary: '#4a2531',
63
+ tertiaryContainer: '#633b48',
64
+ onTertiaryContainer: '#ffd9e2',
65
65
  error: '#ffb4ab',
66
66
  onError: '#690005',
67
67
  errorContainer: '#93000a',
68
68
  onErrorContainer: '#ffb4ab',
69
- background: '#1d1b1e',
69
+ background: '#1c1b1e',
70
70
  onBackground: '#e6e1e6',
71
- surface: '#141316',
71
+ surface: '#1c1b1e',
72
72
  onSurface: '#e6e1e6',
73
73
  surfaceVariant: '#49454e',
74
- onSurfaceVariant: '#cbc4cf',
75
- outline: '#948e99',
74
+ onSurfaceVariant: '#cac4cf',
75
+ outline: '#948f99',
76
76
  outlineVariant: '#49454e',
77
77
  shadow: '#000000',
78
78
  scrim: '#000000',
79
79
  inverseSurface: '#e6e1e6',
80
80
  inverseOnSurface: '#323033',
81
- inversePrimary: '#6d4ea1',
82
- surfaceDim: '#141316',
83
- surfaceBright: '#3b383c',
84
- surfaceContainerLowest: '#0f0e11',
85
- surfaceContainerLow: '#1d1b1e',
86
- surfaceContainer: '#211f22',
87
- surfaceContainerHigh: '#2b292d',
88
- surfaceContainerHighest: '#363438'
81
+ inversePrimary: '#684fa4',
82
+ surfaceDim: '#ddd8dd',
83
+ surfaceBright: '#fdf8fd',
84
+ surfaceContainerLowest: '#ffffff',
85
+ surfaceContainerLow: '#f7f2f7',
86
+ surfaceContainer: '#f2ecf1',
87
+ surfaceContainerHigh: '#ece7eb',
88
+ surfaceContainerHighest: '#e6e1e6'
89
89
  },
90
- primary: '#1976d2',
91
- secondary: '#26A69A',
92
- accent: '#9C27B0',
90
+ primary: '#684fa4',
91
+ secondary: '#625b70',
92
+ accent: '#7e525f',
93
93
  positive: '#21BA45',
94
94
  negative: '#C10015',
95
95
  info: '#31CCEC',
@@ -409,20 +409,92 @@ const defaultTheme = {
409
409
  }
410
410
  }
411
411
  };
412
- export const generateTheme = async (primaryColor) => {
413
- if (!primaryColor)
414
- primaryColor = '#CEB8F1';
415
- const colors = await materialDynamicColors(primaryColor);
412
+ export const generateTheme = async (sourceColor) => {
413
+ const materialTheme = themeFromSourceColor(argbFromHex(sourceColor));
416
414
  return {
417
415
  ...defaultTheme,
418
416
  colors: {
419
417
  ...defaultTheme.colors,
420
- light: colors.light,
421
- dark: colors.dark,
422
- primary: colors.light.primary,
423
- secondary: colors.light.secondary,
424
- accent: colors.light.tertiary,
425
- 'dark-page': colors.dark.surfaceContainer
418
+ light: {
419
+ primary: hexFromArgb(materialTheme.schemes.light.primary),
420
+ onPrimary: hexFromArgb(materialTheme.schemes.light.onPrimary),
421
+ primaryContainer: hexFromArgb(materialTheme.schemes.light.primaryContainer),
422
+ onPrimaryContainer: hexFromArgb(materialTheme.schemes.light.onPrimaryContainer),
423
+ secondary: hexFromArgb(materialTheme.schemes.light.secondary),
424
+ onSecondary: hexFromArgb(materialTheme.schemes.light.onSecondary),
425
+ secondaryContainer: hexFromArgb(materialTheme.schemes.light.secondaryContainer),
426
+ onSecondaryContainer: hexFromArgb(materialTheme.schemes.light.onSecondaryContainer),
427
+ tertiary: hexFromArgb(materialTheme.schemes.light.tertiary),
428
+ onTertiary: hexFromArgb(materialTheme.schemes.light.onTertiary),
429
+ tertiaryContainer: hexFromArgb(materialTheme.schemes.light.tertiaryContainer),
430
+ onTertiaryContainer: hexFromArgb(materialTheme.schemes.light.onTertiaryContainer),
431
+ error: hexFromArgb(materialTheme.schemes.light.error),
432
+ onError: hexFromArgb(materialTheme.schemes.light.onError),
433
+ errorContainer: hexFromArgb(materialTheme.schemes.light.errorContainer),
434
+ onErrorContainer: hexFromArgb(materialTheme.schemes.light.onErrorContainer),
435
+ background: hexFromArgb(materialTheme.schemes.light.background),
436
+ onBackground: hexFromArgb(materialTheme.schemes.light.onBackground),
437
+ surface: hexFromArgb(materialTheme.schemes.light.surface),
438
+ onSurface: hexFromArgb(materialTheme.schemes.light.onSurface),
439
+ surfaceVariant: hexFromArgb(materialTheme.schemes.light.surfaceVariant),
440
+ onSurfaceVariant: hexFromArgb(materialTheme.schemes.light.onSurfaceVariant),
441
+ outline: hexFromArgb(materialTheme.schemes.light.outline),
442
+ outlineVariant: hexFromArgb(materialTheme.schemes.light.outlineVariant),
443
+ shadow: hexFromArgb(materialTheme.schemes.light.shadow),
444
+ scrim: hexFromArgb(materialTheme.schemes.light.scrim),
445
+ inverseSurface: hexFromArgb(materialTheme.schemes.light.inverseSurface),
446
+ inverseOnSurface: hexFromArgb(materialTheme.schemes.light.inverseOnSurface),
447
+ inversePrimary: hexFromArgb(materialTheme.schemes.light.inversePrimary),
448
+ surfaceDim: hexFromArgb(materialTheme.palettes.neutral.tone(87)),
449
+ surfaceBright: hexFromArgb(materialTheme.palettes.neutral.tone(98)),
450
+ surfaceContainerLowest: hexFromArgb(materialTheme.palettes.neutral.tone(100)),
451
+ surfaceContainerLow: hexFromArgb(materialTheme.palettes.neutral.tone(96)),
452
+ surfaceContainer: hexFromArgb(materialTheme.palettes.neutral.tone(94)),
453
+ surfaceContainerHigh: hexFromArgb(materialTheme.palettes.neutral.tone(92)),
454
+ surfaceContainerHighest: hexFromArgb(materialTheme.palettes.neutral.tone(90))
455
+ },
456
+ dark: {
457
+ primary: hexFromArgb(materialTheme.schemes.dark.primary),
458
+ onPrimary: hexFromArgb(materialTheme.schemes.dark.onPrimary),
459
+ primaryContainer: hexFromArgb(materialTheme.schemes.dark.primaryContainer),
460
+ onPrimaryContainer: hexFromArgb(materialTheme.schemes.dark.onPrimaryContainer),
461
+ secondary: hexFromArgb(materialTheme.schemes.dark.secondary),
462
+ onSecondary: hexFromArgb(materialTheme.schemes.dark.onSecondary),
463
+ secondaryContainer: hexFromArgb(materialTheme.schemes.dark.secondaryContainer),
464
+ onSecondaryContainer: hexFromArgb(materialTheme.schemes.dark.onSecondaryContainer),
465
+ tertiary: hexFromArgb(materialTheme.schemes.dark.tertiary),
466
+ onTertiary: hexFromArgb(materialTheme.schemes.dark.onTertiary),
467
+ tertiaryContainer: hexFromArgb(materialTheme.schemes.dark.tertiaryContainer),
468
+ onTertiaryContainer: hexFromArgb(materialTheme.schemes.dark.onTertiaryContainer),
469
+ error: hexFromArgb(materialTheme.schemes.dark.error),
470
+ onError: hexFromArgb(materialTheme.schemes.dark.onError),
471
+ errorContainer: hexFromArgb(materialTheme.schemes.dark.errorContainer),
472
+ onErrorContainer: hexFromArgb(materialTheme.schemes.dark.onErrorContainer),
473
+ background: hexFromArgb(materialTheme.schemes.dark.background),
474
+ onBackground: hexFromArgb(materialTheme.schemes.dark.onBackground),
475
+ surface: hexFromArgb(materialTheme.schemes.dark.surface),
476
+ onSurface: hexFromArgb(materialTheme.schemes.dark.onSurface),
477
+ surfaceVariant: hexFromArgb(materialTheme.schemes.dark.surfaceVariant),
478
+ onSurfaceVariant: hexFromArgb(materialTheme.schemes.dark.onSurfaceVariant),
479
+ outline: hexFromArgb(materialTheme.schemes.dark.outline),
480
+ outlineVariant: hexFromArgb(materialTheme.schemes.dark.outlineVariant),
481
+ shadow: hexFromArgb(materialTheme.schemes.dark.shadow),
482
+ scrim: hexFromArgb(materialTheme.schemes.dark.scrim),
483
+ inverseSurface: hexFromArgb(materialTheme.schemes.dark.inverseSurface),
484
+ inverseOnSurface: hexFromArgb(materialTheme.schemes.dark.inverseOnSurface),
485
+ inversePrimary: hexFromArgb(materialTheme.schemes.dark.inversePrimary),
486
+ surfaceDim: hexFromArgb(materialTheme.palettes.neutral.tone(6)),
487
+ surfaceBright: hexFromArgb(materialTheme.palettes.neutral.tone(24)),
488
+ surfaceContainerLowest: hexFromArgb(materialTheme.palettes.neutral.tone(4)),
489
+ surfaceContainerLow: hexFromArgb(materialTheme.palettes.neutral.tone(10)),
490
+ surfaceContainer: hexFromArgb(materialTheme.palettes.neutral.tone(12)),
491
+ surfaceContainerHigh: hexFromArgb(materialTheme.palettes.neutral.tone(17)),
492
+ surfaceContainerHighest: hexFromArgb(materialTheme.palettes.neutral.tone(22))
493
+ },
494
+ primary: hexFromArgb(materialTheme.schemes.light.primary),
495
+ secondary: hexFromArgb(materialTheme.schemes.light.secondary),
496
+ accent: hexFromArgb(materialTheme.schemes.light.tertiary),
497
+ 'dark-page': hexFromArgb(materialTheme.palettes.neutral.tone(6))
426
498
  }
427
499
  };
428
500
  };
package/dist/types/index.d.ts CHANGED
@@ -3,7 +3,7 @@ import { type QuasarIconSet, type QuasarPlugins } from 'quasar';
3
3
  import { WebFontsOptions } from '@unocss/preset-web-fonts/index.js';
4
4
  export interface QuasarPresetOptions {
5
5
  style: keyof typeof QuasarStyles;
6
- primaryColor?: string;
6
+ sourceColor?: string;
7
7
  plugins?: (keyof QuasarPlugins)[];
8
8
  iconSet?: QuasarIconSet;
9
9
  presetWebFonts?: WebFontsOptions;
package/dist/types/theme.d.ts CHANGED
@@ -1,4 +1,41 @@
1
- import { type IMaterialDynamicColorsThemeColor } from 'material-dynamic-colors/src/cdn/interfaces';
1
+ interface MaterialColorScheme {
2
+ primary: string;
3
+ onPrimary: string;
4
+ primaryContainer: string;
5
+ onPrimaryContainer: string;
6
+ secondary: string;
7
+ onSecondary: string;
8
+ secondaryContainer: string;
9
+ onSecondaryContainer: string;
10
+ tertiary: string;
11
+ onTertiary: string;
12
+ tertiaryContainer: string;
13
+ onTertiaryContainer: string;
14
+ error: string;
15
+ onError: string;
16
+ errorContainer: string;
17
+ onErrorContainer: string;
18
+ background: string;
19
+ onBackground: string;
20
+ surface: string;
21
+ onSurface: string;
22
+ surfaceVariant: string;
23
+ onSurfaceVariant: string;
24
+ outline: string;
25
+ outlineVariant: string;
26
+ shadow: string;
27
+ scrim: string;
28
+ inverseSurface: string;
29
+ inverseOnSurface: string;
30
+ inversePrimary: string;
31
+ surfaceDim: string;
32
+ surfaceBright: string;
33
+ surfaceContainerLowest: string;
34
+ surfaceContainerLow: string;
35
+ surfaceContainer: string;
36
+ surfaceContainerHigh: string;
37
+ surfaceContainerHighest: string;
38
+ }
2
39
  export interface QuasarTheme {
3
40
  typography: {
4
41
  fontFamily: string;
@@ -11,8 +48,8 @@ export interface QuasarTheme {
11
48
  xl: string;
12
49
  };
13
50
  colors: {
14
- light: IMaterialDynamicColorsThemeColor;
15
- dark: IMaterialDynamicColorsThemeColor;
51
+ light: MaterialColorScheme;
52
+ dark: MaterialColorScheme;
16
53
  primary: string;
17
54
  secondary: string;
18
55
  accent: string;
@@ -1150,5 +1187,5 @@ export interface QuasarTheme {
1150
1187
  };
1151
1188
  }
1152
1189
  declare const defaultTheme: QuasarTheme;
1153
- export declare const generateTheme: (primaryColor?: string) => Promise<QuasarTheme>;
1190
+ export declare const generateTheme: (sourceColor: string) => Promise<QuasarTheme>;
1154
1191
  export { defaultTheme };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "unocss-preset-quasar",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "license": "MIT",
5
5
  "author": "Stefan van Herwijnen",
6
6
  "description": "UnoCSS preset for Quasar Framework",
@@ -29,27 +29,27 @@
29
29
  },
30
30
  "homepage": "https://github.com/simsustech/unocss-preset-quasar/tree/main/#readme",
31
31
  "dependencies": {
32
+ "@material/material-color-utilities": "^0.3.0",
32
33
  "@unocss/core": "^66.0.0",
33
34
  "@unocss/preset-uno": "^66.0.0",
34
- "@unocss/preset-web-fonts": "66.1.0-beta.8",
35
+ "@unocss/preset-web-fonts": "66.1.0-beta.10",
35
36
  "@unocss/preset-wind": "^66.0.0",
36
37
  "animated-unocss": "^0.0.6",
37
- "material-dynamic-colors": "^1.1.2",
38
- "unocss": "66.1.0-beta.8"
38
+ "unocss": "66.1.0-beta.10"
39
39
  },
40
40
  "devDependencies": {
41
41
  "@iconify-json/mdi": "^1.2.3",
42
42
  "@quasar/extras": "^1.16.17",
43
43
  "@quasar/quasar-ui-qmarkdown": "^2.0.5",
44
44
  "@quasar/quasar-ui-qmediaplayer": "^2.0.0-beta.0",
45
- "@types/node": "^22.13.17",
45
+ "@types/node": "^22.14.0",
46
46
  "@unocss/preset-icons": "^66.0.0",
47
- "@unocss/preset-mini": "66.1.0-beta.8",
47
+ "@unocss/preset-mini": "66.1.0-beta.10",
48
48
  "quasar": "^2.18.1",
49
- "typescript": "^5.8.2"
49
+ "typescript": "^5.8.3"
50
50
  },
51
51
  "peerDependencies": {
52
- "quasar": "^2.17.7"
52
+ "quasar": "^2.18.1"
53
53
  },
54
54
  "publishConfig": {
55
55
  "access": "public",