unocss-preset-quasar 0.1.1 → 0.1.3

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 (25) hide show
  1. package/dist/index.js +67 -73
  2. package/dist/styles/index.js +3 -3
  3. package/dist/styles/md2/components/QSkeleton.unocss.js +51 -51
  4. package/dist/styles/md2/components/QTree.unocss.js +13 -13
  5. package/dist/styles/md3/components/QBtnToggle.unocss.js +5 -5
  6. package/dist/styles/md3/components/QSkeleton.unocss.js +51 -51
  7. package/dist/styles/md3/components/QSlider.unocss.js +2 -2
  8. package/dist/styles/md3/components/QTime.unocss.js +21 -10
  9. package/dist/styles/md3/components/QTree.unocss.js +13 -13
  10. package/dist/theme.js +132 -60
  11. package/dist/types/index.d.ts +3 -7
  12. package/dist/types/styles/index.d.ts +3 -3
  13. package/dist/types/theme.d.ts +41 -4
  14. package/package.json +8 -8
  15. package/src/index.ts +192 -200
  16. package/src/styles/index.ts +14 -3
  17. package/src/styles/md2/components/QSkeleton.unocss.ts +51 -75
  18. package/src/styles/md2/components/QTree.unocss.ts +14 -13
  19. package/src/styles/md3/components/QBtnToggle.unocss.ts +5 -5
  20. package/src/styles/md3/components/QSkeleton.unocss.ts +51 -75
  21. package/src/styles/md3/components/QSlider.unocss.ts +2 -2
  22. package/src/styles/md3/components/QTime.unocss.ts +21 -10
  23. package/src/styles/md3/components/QTree.unocss.ts +14 -13
  24. package/src/styles/md3/index.ts +0 -1
  25. package/src/theme.ts +239 -64
package/dist/styles/md3/components/QSkeleton.unocss.js CHANGED
@@ -57,122 +57,122 @@ const preflights = [
57
57
  ];
58
58
  const shortcuts = [
59
59
  [
60
- /^q-skeleton$/,
60
+ /^q-skeleton\$/,
61
61
  ([, c], { theme }) => theme.quasar?.components?.['q-skeleton'] ??
62
- `bg-[rgba(0,_0,_0,_0.12)] rounded-[4px] box-border [&:before]:(content-['_'])`
62
+ `bg-gray-200 rounded box-border`
63
63
  ],
64
64
  [
65
- /^q-skeleton--anim$/,
65
+ /^q-skeleton--anim\$/,
66
66
  ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--anim'] ?? `cursor-wait`
67
67
  ],
68
68
  [
69
- /^q-skeleton--type-text$/,
69
+ /^q-skeleton--type-text\$/,
70
70
  ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-text'] ??
71
- `scale-x-100 scale-y-[0.5]`
71
+ `transform scale-y-50`
72
72
  ],
73
73
  [
74
- /^q-skeleton--type-circle$/,
74
+ /^q-skeleton--type-circle\$/,
75
75
  ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-circle'] ??
76
- `h-[48px] w-[48px] rounded-[50%]`
76
+ `h-12 w-12 rounded-full`
77
77
  ],
78
78
  [
79
- /^q-skeleton--type-QAvatar$/,
79
+ /^q-skeleton--type-QAvatar\$/,
80
80
  ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QAvatar'] ??
81
- `h-[48px] w-[48px] rounded-[50%]`
81
+ `h-12 w-12 rounded-full`
82
82
  ],
83
83
  [
84
- /^q-skeleton--type-QBtn$/,
85
- ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QBtn'] ?? `w-[90px] h-[36px]`
84
+ /^q-skeleton--type-QBtn\$/,
85
+ ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QBtn'] ?? `w-24 h-9`
86
86
  ],
87
87
  [
88
- /^q-skeleton--type-QBadge$/,
89
- ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QBadge'] ??
90
- `w-[70px] h-[16px]`
88
+ /^q-skeleton--type-QBadge\$/,
89
+ ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QBadge'] ?? `w-18 h-4`
91
90
  ],
92
91
  [
93
- /^q-skeleton--type-QChip$/,
92
+ /^q-skeleton--type-QChip\$/,
94
93
  ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QChip'] ??
95
- `w-[90px] h-[28px] rounded-[16px]`
94
+ `w-24 h-7 rounded-full`
96
95
  ],
97
96
  [
98
- /^q-skeleton--type-QToolbar$/,
99
- ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QToolbar'] ?? `h-[50px]`
97
+ /^q-skeleton--type-QToolbar\$/,
98
+ ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QToolbar'] ?? `h-12`
100
99
  ],
101
100
  [
102
- /^q-skeleton--type-QCheckbox$/,
101
+ /^q-skeleton--type-QCheckbox\$/,
103
102
  ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QCheckbox'] ??
104
- `w-[40px] h-[40px] rounded-[50%]`
103
+ `h-10 w-10 rounded-full`
105
104
  ],
106
105
  [
107
- /^q-skeleton--type-QRadio$/,
106
+ /^q-skeleton--type-QRadio\$/,
108
107
  ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QRadio'] ??
109
- `w-[40px] h-[40px] rounded-[50%]`
108
+ `h-10 w-10 rounded-full`
110
109
  ],
111
110
  [
112
- /^q-skeleton--type-QToggle$/,
111
+ /^q-skeleton--type-QToggle\$/,
113
112
  ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QToggle'] ??
114
- `w-[56px] h-[40px] rounded-[7px]`
113
+ `w-14 h-10 rounded-md`
115
114
  ],
116
115
  [
117
- /^q-skeleton--type-QSlider$/,
118
- ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QSlider'] ?? `h-[40px]`
116
+ /^q-skeleton--type-QSlider\$/,
117
+ ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QSlider'] ?? `h-10`
119
118
  ],
120
119
  [
121
- /^q-skeleton--type-QRange$/,
122
- ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QRange'] ?? `h-[40px]`
120
+ /^q-skeleton--type-QRange\$/,
121
+ ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QRange'] ?? `h-10`
123
122
  ],
124
123
  [
125
- /^q-skeleton--type-QInput$/,
126
- ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QInput'] ?? `h-[56px]`
124
+ /^q-skeleton--type-QInput\$/,
125
+ ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--type-QInput'] ?? `h-14`
127
126
  ],
128
127
  [
129
- /^q-skeleton--bordered$/,
128
+ /^q-skeleton--bordered\$/,
130
129
  ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--bordered'] ??
131
- `border-[1px] border-solid border-[rgba(0,0,0,0.05)]`
130
+ `border border-gray-200`
132
131
  ],
133
132
  [
134
- /^q-skeleton--square$/,
133
+ /^q-skeleton--square\$/,
135
134
  ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--square'] ?? `rounded-none`
136
135
  ],
137
136
  [
138
- /^q-skeleton--anim-fade$/,
139
- ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--anim-fade'] ??
140
- `animate-[q-skeleton--fade_var(--q-skeleton-speed)_linear_0.5s_infinite]`
137
+ /^q-skeleton--anim-fade\$/,
138
+ ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--anim-fade'] ?? `animate-fade`
141
139
  ],
142
140
  [
143
- /^q-skeleton--anim-pulse$/,
144
- ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--anim-pulse'] ??
145
- `animate-[q-skeleton--pulse_var(--q-skeleton-speed)_ease-in-out_0.5s_infinite]`
141
+ /^q-skeleton--anim-pulse\$/,
142
+ ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--anim-pulse'] ?? `animate-pulse`
146
143
  ],
147
144
  [
148
- /^q-skeleton--anim-pulse-x$/,
145
+ /^q-skeleton--anim-pulse-x\$/,
149
146
  ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--anim-pulse-x'] ??
150
- `animate-[q-skeleton--pulse-x_var(--q-skeleton-speed)_ease-in-out_0.5s_infinite]`
147
+ `animate-pulse-x`
151
148
  ],
152
149
  [
153
- /^q-skeleton--anim-pulse-y$/,
150
+ /^q-skeleton--anim-pulse-y\$/,
154
151
  ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--anim-pulse-y'] ??
155
- `animate-[q-skeleton--pulse-y_var(--q-skeleton-speed)_ease-in-out_0.5s_infinite]`
152
+ `animate-pulse-y`
156
153
  ],
157
154
  [
158
- /^q-skeleton--anim-wave$/,
155
+ /^q-skeleton--anim-wave\$/,
159
156
  ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--anim-wave'] ??
160
- `relative overflow-hidden [&:after]:(content-[''] absolute top-[0] right-[0] bottom-[0] left-[0] z-0) [&:after]:(bg-[linear-gradient(_90deg,_rgba(255,_255,_255,_0),_rgba(255,_255,_255,_0.5),_rgba(255,_255,_255,_0)_)] animate-[q-skeleton--wave_var(--q-skeleton-speed)_linear_0.5s_infinite])`
157
+ `relative overflow-hidden z-10 before:content-['\\00a0'] before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-0 after:content-[''] after:absolute after:top-0 after:right-0 after:bottom-0 after:left-0 after:z-0 after:bg-gradient-to-r after:from-transparent after:via-white/50 after:to-transparent after:animate-wave`
161
158
  ],
162
159
  [
163
- /^q-skeleton--anim-blink$/,
160
+ /^q-skeleton--anim-blink\$/,
164
161
  ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--anim-blink'] ??
165
- `relative overflow-hidden [&:after]:(content-[''] absolute top-[0] right-[0] bottom-[0] left-[0] z-0) [&:after]:(bg-[rgba(255,_255,_255,_0.7)] animate-[q-skeleton--fade_var(--q-skeleton-speed)_linear_0.5s_infinite])`
162
+ `relative overflow-hidden z-10 before:content-['\\00a0'] before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-0 after:content-[''] after:absolute after:top-0 after:right-0 after:bottom-0 after:left-0 after:z-0 after:bg-white/70 after:animate-fade`
166
163
  ],
167
164
  [
168
- /^q-skeleton--anim-pop$/,
165
+ /^q-skeleton--anim-pop\$/,
169
166
  ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--anim-pop'] ??
170
- `relative overflow-hidden [&:after]:(content-[''] absolute top-[0] right-[0] bottom-[0] left-[0] z-0)`
167
+ `relative overflow-hidden z-10 before:content-['\\00a0'] before:absolute before:top-0 before:right-0 before:bottom-0 before:left-0 before:z-0 after:content-[''] after:absolute after:top-0 after:right-0 after:bottom-0 after:left-0 after:z-0`
171
168
  ],
172
169
  [
173
- /^q-skeleton--dark$/,
170
+ /^q-skeleton--dark\$/,
174
171
  ([, c], { theme }) => theme.quasar?.components?.['q-skeleton--dark'] ??
175
- `bg-[rgba(255,_255,_255,_0.05)] [&.q-skeleton--bordered]:(border-[1px] border-solid border-[rgba(255,255,255,0.25)]) [&.q-skeleton--anim-wave:after]:(bg-[linear-gradient(_90deg,_rgba(255,_255,_255,_0),_rgba(255,_255,_255,_0.1),_rgba(255,_255,_255,_0)_)]) [&.q-skeleton--anim-blink:after]:(bg-[rgba(255,_255,_255,_0.2)])`
172
+ `bg-white/5
173
+ [&.q-skeleton--bordered]:(border border-white/25)
174
+ [&.q-skeleton--anim-wave]:(after:bg-gradient-to-r after:from-transparent after:via-white/10 after:to-transparent)
175
+ [&.q-skeleton--anim-blink]:(after:bg-white/20)`
176
176
  ]
177
177
  ];
178
178
  export { preflights, shortcuts };
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 = (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
  };