@code-coaching/vuetiful 0.5.0 → 0.5.1

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/style.css +1 -1
  2. package/dist/styles/all.css +62 -54
  3. package/dist/types/types/index.d.ts +1 -1
  4. package/dist/types/utils/platform/platform.service.d.ts +1 -1
  5. package/dist/vuetiful.es.mjs +1 -1
  6. package/dist/vuetiful.umd.js +1 -1
  7. package/package.json +2 -2
  8. package/src/components/molecules/VDrawer.vue +1 -1
  9. package/src/styles/elements/alerts.css +1 -1
  10. package/src/styles/elements/buttons.css +2 -2
  11. package/src/styles/elements/forms.css +3 -3
  12. package/src/styles/elements/popups.css +1 -1
  13. package/src/styles/typography.css +1 -1
  14. package/src/tailwind/generated/intellisense-classes.cjs +106 -106
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@code-coaching/vuetiful",
3
- "version": "0.5.0",
3
+ "version": "0.5.1",
4
4
  "scripts": {
5
5
  "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",
6
6
  "prebuild": "node 'scripts/intellisense.js'",
@@ -31,7 +31,7 @@
31
31
  "prettier": "^2.8.4",
32
32
  "prettier-plugin-tailwindcss": "^0.2.4",
33
33
  "rimraf": "^3.0.2",
34
- "tailwindcss": "^3.2.7",
34
+ "tailwindcss": "^3.3.1",
35
35
  "typescript": "^4.4.4",
36
36
  "vite": "^2.7.2",
37
37
  "vitest": "^0.29.8",
package/src/components/molecules/VDrawer.vue CHANGED
@@ -81,7 +81,7 @@ onMounted(() => {
81
81
  <div
82
82
  v-if="drawer.open"
83
83
  ref="elemBackdrop"
84
- :class="`drawer-backdrop backdrop-blur-xs fixed top-0 left-0 right-0 bottom-0 flex bg-surface-backdrop-token ${regionBackdrop} z-40 ${
84
+ :class="`drawer-backdrop backdrop-blur-xs fixed bottom-0 left-0 right-0 top-0 flex bg-surface-backdrop-token ${regionBackdrop} z-40 ${
85
85
  attrs.class ?? ''
86
86
  }`"
87
87
  @mousedown="onBackdropInteraction"
package/src/styles/elements/alerts.css CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  @layer components {
4
4
  .alert {
5
- @apply flex flex-col items-start space-y-4 p-4 lg:flex-row lg:items-center lg:space-y-0 lg:space-x-4;
5
+ @apply flex flex-col items-start space-y-4 p-4 lg:flex-row lg:items-center lg:space-x-4 lg:space-y-0;
6
6
  /* Text */
7
7
  @apply text-surface-900-50-token;
8
8
  /* Rounded */
package/src/styles/elements/buttons.css CHANGED
@@ -95,9 +95,9 @@
95
95
 
96
96
  /* Set Neutral Divider */
97
97
  .btn-group * + * {
98
- @apply border-t-0 border-l border-surface-500/20;
98
+ @apply border-l border-t-0 border-surface-500/20;
99
99
  }
100
100
  .btn-group-vertical * + * {
101
- @apply border-t border-l-0 border-surface-500/20;
101
+ @apply border-l-0 border-t border-surface-500/20;
102
102
  }
103
103
  }
package/src/styles/elements/forms.css CHANGED
@@ -113,8 +113,8 @@
113
113
  }
114
114
  .select option:checked {
115
115
  /* https://stackoverflow.com/questions/50618602/change-color-of-selected-option-in-select-multiple */
116
- background: rgb(var(--color-primary-500))
117
- linear-gradient(0deg, rgb(var(--color-primary-500)) 0%, rgb(var(--color-primary-500)) 100%);
116
+ /* prettier-ignore */
117
+ background: rgb(var(--color-primary-500)) linear-gradient(0deg, rgb(var(--color-primary-500)) 0%, rgb(var(--color-primary-500)) 100%);
118
118
  @apply text-on-primary-token;
119
119
  }
120
120
 
@@ -255,7 +255,7 @@
255
255
  /* Material */
256
256
  .variant-form-material {
257
257
  /* Border Radius */
258
- @apply !rounded-tl !rounded-tr !rounded-bl-none !rounded-br-none;
258
+ @apply !rounded-bl-none !rounded-br-none !rounded-tl !rounded-tr;
259
259
  /* Background */
260
260
  @apply bg-surface-500/10 dark:bg-surface-500/20;
261
261
  /* Border */
package/src/styles/elements/popups.css CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  [data-popup] {
6
6
  /* https://floating-ui.com/docs/computeposition#usage */
7
- @apply absolute top-0 left-0; /* max-w-max */
7
+ @apply absolute left-0 top-0; /* max-w-max */
8
8
  /* Set hidden on page load */
9
9
  @apply hidden;
10
10
  /* Transitions */
package/src/styles/typography.css CHANGED
@@ -61,7 +61,7 @@
61
61
  code:not(.unstyled):is(:not(.prose *)):is(:not(pre *)) {
62
62
  @apply whitespace-nowrap font-mono text-xs text-primary-700 dark:text-primary-400;
63
63
  @apply bg-primary-500/30 dark:bg-primary-500/20;
64
- @apply rounded py-0.5 px-1;
64
+ @apply rounded px-1 py-0.5;
65
65
  }
66
66
 
67
67
  /* === Insertions / Deletions ==== */
package/src/tailwind/generated/intellisense-classes.cjs CHANGED
@@ -8,7 +8,7 @@ module.exports = {
8
8
  "scrollbar-width": "none ",
9
9
  },
10
10
  ".divider-vertical": {
11
- "@apply inline-block border-l border-solid border-surface-300-600-token min-h-[10px] mx-auto": {},
11
+ "@apply mx-auto inline-block min-h-[10px] border-l border-solid border-surface-300-600-token": {},
12
12
  },
13
13
  ".hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_": {
14
14
  "@apply text-red-400": {},
@@ -47,148 +47,148 @@ module.exports = {
47
47
  "@apply font-bold text-neutral-200": {},
48
48
  },
49
49
  ".hljs-addition": {
50
- "@apply text-lime-300 bg-green-700": {},
50
+ "@apply bg-green-700 text-lime-300": {},
51
51
  },
52
52
  ".hljs-deletion": {
53
- "@apply text-rose-300 bg-rose-700": {},
53
+ "@apply bg-rose-700 text-rose-300": {},
54
54
  },
55
55
  ".variant-outline-primary": {
56
- "@apply ring-[1px] ring-primary-500 dark:ring-primary-500 ring-inset": {},
56
+ "@apply ring-[1px] ring-inset ring-primary-500 dark:ring-primary-500": {},
57
57
  },
58
58
  ".variant-outline-secondary": {
59
- "@apply ring-[1px] ring-secondary-500 dark:ring-secondary-500 ring-inset": {},
59
+ "@apply ring-[1px] ring-inset ring-secondary-500 dark:ring-secondary-500": {},
60
60
  },
61
61
  ".variant-outline-tertiary": {
62
- "@apply ring-[1px] ring-tertiary-500 dark:ring-tertiary-500 ring-inset": {},
62
+ "@apply ring-[1px] ring-inset ring-tertiary-500 dark:ring-tertiary-500": {},
63
63
  },
64
64
  ".variant-outline-success": {
65
- "@apply ring-[1px] ring-success-500 dark:ring-success-500 ring-inset": {},
65
+ "@apply ring-[1px] ring-inset ring-success-500 dark:ring-success-500": {},
66
66
  },
67
67
  ".variant-outline-warning": {
68
- "@apply ring-[1px] ring-warning-500 dark:ring-warning-500 ring-inset": {},
68
+ "@apply ring-[1px] ring-inset ring-warning-500 dark:ring-warning-500": {},
69
69
  },
70
70
  ".variant-outline-error": {
71
- "@apply ring-[1px] ring-error-500 dark:ring-error-500 ring-inset": {},
71
+ "@apply ring-[1px] ring-inset ring-error-500 dark:ring-error-500": {},
72
72
  },
73
73
  ".variant-outline,.variant-outline-surface": {
74
- "@apply ring-[1px] ring-surface-500 dark:ring-surface-500 ring-inset": {},
74
+ "@apply ring-[1px] ring-inset ring-surface-500 dark:ring-surface-500": {},
75
75
  },
76
76
  ".variant-filled": {
77
77
  "@apply bg-surface-900-50-token text-surface-50-900-token": {},
78
78
  },
79
79
  ".variant-filled-primary": {
80
- "@apply bg-primary-500 dark:bg-primary-500 text-on-primary-token dark:text-on-primary-token": {},
80
+ "@apply bg-primary-500 text-on-primary-token dark:bg-primary-500 dark:text-on-primary-token": {},
81
81
  },
82
82
  ".variant-filled-secondary": {
83
- "@apply bg-secondary-500 dark:bg-secondary-500 text-on-secondary-token dark:text-on-secondary-token": {},
83
+ "@apply bg-secondary-500 text-on-secondary-token dark:bg-secondary-500 dark:text-on-secondary-token": {},
84
84
  },
85
85
  ".variant-filled-tertiary": {
86
- "@apply bg-tertiary-500 dark:bg-tertiary-500 text-on-tertiary-token dark:text-on-tertiary-token": {},
86
+ "@apply bg-tertiary-500 text-on-tertiary-token dark:bg-tertiary-500 dark:text-on-tertiary-token": {},
87
87
  },
88
88
  ".variant-filled-success": {
89
- "@apply bg-success-500 dark:bg-success-500 text-on-success-token dark:text-on-success-token": {},
89
+ "@apply bg-success-500 text-on-success-token dark:bg-success-500 dark:text-on-success-token": {},
90
90
  },
91
91
  ".variant-filled-warning": {
92
- "@apply bg-warning-500 dark:bg-warning-500 text-on-warning-token dark:text-on-warning-token": {},
92
+ "@apply bg-warning-500 text-on-warning-token dark:bg-warning-500 dark:text-on-warning-token": {},
93
93
  },
94
94
  ".variant-filled-error": {
95
- "@apply bg-error-500 dark:bg-error-500 text-on-error-token dark:text-on-error-token": {},
95
+ "@apply bg-error-500 text-on-error-token dark:bg-error-500 dark:text-on-error-token": {},
96
96
  },
97
97
  ".variant-filled-surface": {
98
98
  "@apply bg-surface-400-500-token text-on-surface-token dark:text-on-surface-token": {},
99
99
  },
100
100
  ".variant-ringed": {
101
- "@apply bg-transparent dark:bg-transparent variant-outline": {},
101
+ "@apply variant-outline bg-transparent dark:bg-transparent": {},
102
102
  },
103
103
  ".variant-ringed-primary": {
104
- "@apply bg-transparent dark:bg-transparent variant-outline-primary": {},
104
+ "@apply variant-outline-primary bg-transparent dark:bg-transparent": {},
105
105
  },
106
106
  ".variant-ringed-secondary": {
107
- "@apply bg-transparent dark:bg-transparent variant-outline-secondary": {},
107
+ "@apply variant-outline-secondary bg-transparent dark:bg-transparent": {},
108
108
  },
109
109
  ".variant-ringed-tertiary": {
110
- "@apply bg-transparent dark:bg-transparent variant-outline-tertiary": {},
110
+ "@apply variant-outline-tertiary bg-transparent dark:bg-transparent": {},
111
111
  },
112
112
  ".variant-ringed-success": {
113
- "@apply bg-transparent dark:bg-transparent variant-outline-success": {},
113
+ "@apply variant-outline-success bg-transparent dark:bg-transparent": {},
114
114
  },
115
115
  ".variant-ringed-warning": {
116
- "@apply bg-transparent dark:bg-transparent variant-outline-warning": {},
116
+ "@apply variant-outline-warning bg-transparent dark:bg-transparent": {},
117
117
  },
118
118
  ".variant-ringed-error": {
119
- "@apply bg-transparent dark:bg-transparent variant-outline-error": {},
119
+ "@apply variant-outline-error bg-transparent dark:bg-transparent": {},
120
120
  },
121
121
  ".variant-ringed-surface": {
122
- "@apply bg-transparent dark:bg-transparent variant-outline-surface": {},
122
+ "@apply variant-outline-surface bg-transparent dark:bg-transparent": {},
123
123
  },
124
124
  ".variant-ghost-primary": {
125
- "@apply bg-primary-500/20 dark:bg-primary-500/20 variant-outline-primary": {},
125
+ "@apply variant-outline-primary bg-primary-500/20 dark:bg-primary-500/20": {},
126
126
  },
127
127
  ".variant-ghost-secondary": {
128
- "@apply bg-secondary-500/20 dark:bg-secondary-500/20 variant-outline-secondary": {},
128
+ "@apply variant-outline-secondary bg-secondary-500/20 dark:bg-secondary-500/20": {},
129
129
  },
130
130
  ".variant-ghost-tertiary": {
131
- "@apply bg-tertiary-500/20 dark:bg-tertiary-500/20 variant-outline-tertiary": {},
131
+ "@apply variant-outline-tertiary bg-tertiary-500/20 dark:bg-tertiary-500/20": {},
132
132
  },
133
133
  ".variant-ghost-success": {
134
- "@apply bg-success-500/20 dark:bg-success-500/20 variant-outline-success": {},
134
+ "@apply variant-outline-success bg-success-500/20 dark:bg-success-500/20": {},
135
135
  },
136
136
  ".variant-ghost-warning": {
137
- "@apply bg-warning-500/20 dark:bg-warning-500/20 variant-outline-warning": {},
137
+ "@apply variant-outline-warning bg-warning-500/20 dark:bg-warning-500/20": {},
138
138
  },
139
139
  ".variant-ghost-error": {
140
- "@apply bg-error-500/20 dark:bg-error-500/20 variant-outline-error": {},
140
+ "@apply variant-outline-error bg-error-500/20 dark:bg-error-500/20": {},
141
141
  },
142
142
  ".variant-ghost,.variant-ghost-surface": {
143
- "@apply bg-surface-500/20 dark:bg-surface-500/20 variant-outline-surface": {},
143
+ "@apply variant-outline-surface bg-surface-500/20 dark:bg-surface-500/20": {},
144
144
  },
145
145
  ".variant-soft-primary": {
146
- "@apply bg-primary-400/20 dark:bg-primary-500/20 text-primary-700-200-token !ring-0": {},
146
+ "@apply bg-primary-400/20 !ring-0 text-primary-700-200-token dark:bg-primary-500/20": {},
147
147
  },
148
148
  ".variant-soft-secondary": {
149
- "@apply bg-secondary-400/20 dark:bg-secondary-500/20 text-secondary-700-200-token !ring-0": {},
149
+ "@apply bg-secondary-400/20 !ring-0 text-secondary-700-200-token dark:bg-secondary-500/20": {},
150
150
  },
151
151
  ".variant-soft-tertiary": {
152
- "@apply bg-tertiary-400/20 dark:bg-tertiary-500/20 text-tertiary-700-200-token !ring-0": {},
152
+ "@apply bg-tertiary-400/20 !ring-0 text-tertiary-700-200-token dark:bg-tertiary-500/20": {},
153
153
  },
154
154
  ".variant-soft-success": {
155
- "@apply bg-success-400/20 dark:bg-success-500/20 text-success-700-200-token !ring-0": {},
155
+ "@apply bg-success-400/20 !ring-0 text-success-700-200-token dark:bg-success-500/20": {},
156
156
  },
157
157
  ".variant-soft-warning": {
158
- "@apply bg-warning-400/20 dark:bg-warning-500/20 text-warning-700-200-token !ring-0": {},
158
+ "@apply bg-warning-400/20 !ring-0 text-warning-700-200-token dark:bg-warning-500/20": {},
159
159
  },
160
160
  ".variant-soft-error": {
161
- "@apply bg-error-400/20 dark:bg-error-500/20 text-error-700-200-token !ring-0": {},
161
+ "@apply bg-error-400/20 !ring-0 text-error-700-200-token dark:bg-error-500/20": {},
162
162
  },
163
163
  ".variant-soft,.variant-soft-surface": {
164
- "@apply bg-surface-400/20 dark:bg-surface-500/20 text-surface-700-200-token !ring-0": {},
164
+ "@apply bg-surface-400/20 !ring-0 text-surface-700-200-token dark:bg-surface-500/20": {},
165
165
  },
166
166
  ".variant-glass-primary": {
167
- "@apply bg-primary-500/20 dark:bg-primary-500/20 backdrop-blur-lg": {},
167
+ "@apply bg-primary-500/20 backdrop-blur-lg dark:bg-primary-500/20": {},
168
168
  },
169
169
  ".variant-glass-secondary": {
170
- "@apply bg-secondary-500/20 dark:bg-secondary-500/20 backdrop-blur-lg": {},
170
+ "@apply bg-secondary-500/20 backdrop-blur-lg dark:bg-secondary-500/20": {},
171
171
  },
172
172
  ".variant-glass-tertiary": {
173
- "@apply bg-tertiary-500/20 dark:bg-tertiary-500/20 backdrop-blur-lg": {},
173
+ "@apply bg-tertiary-500/20 backdrop-blur-lg dark:bg-tertiary-500/20": {},
174
174
  },
175
175
  ".variant-glass-success": {
176
- "@apply bg-success-500/20 dark:bg-success-500/20 backdrop-blur-lg": {},
176
+ "@apply bg-success-500/20 backdrop-blur-lg dark:bg-success-500/20": {},
177
177
  },
178
178
  ".variant-glass-warning": {
179
- "@apply bg-warning-500/20 dark:bg-warning-500/20 backdrop-blur-lg": {},
179
+ "@apply bg-warning-500/20 backdrop-blur-lg dark:bg-warning-500/20": {},
180
180
  },
181
181
  ".variant-glass-error": {
182
- "@apply bg-error-500/20 dark:bg-error-500/20 backdrop-blur-lg": {},
182
+ "@apply bg-error-500/20 backdrop-blur-lg dark:bg-error-500/20": {},
183
183
  },
184
184
  ".variant-glass-surface": {
185
- "@apply bg-surface-500/20 dark:bg-surface-500/20 backdrop-blur-lg": {},
185
+ "@apply bg-surface-500/20 backdrop-blur-lg dark:bg-surface-500/20": {},
186
186
  },
187
187
  ".variant-glass": {
188
- "@apply bg-surface-50/30 dark:bg-surface-900/30 backdrop-blur-lg": {},
188
+ "@apply bg-surface-50/30 backdrop-blur-lg dark:bg-surface-900/30": {},
189
189
  },
190
190
  ".alert": {
191
- "@apply flex flex-col items-start lg:items-center lg:flex-row p-4 space-y-4 lg:space-y-0 lg:space-x-4": {},
191
+ "@apply flex flex-col items-start space-y-4 p-4 lg:flex-row lg:items-center lg:space-x-4 lg:space-y-0": {},
192
192
  "@apply text-surface-900-50-token": {},
193
193
  "@apply rounded-container-token": {},
194
194
  },
@@ -199,28 +199,28 @@ module.exports = {
199
199
  "@apply flex items-center space-x-2": {},
200
200
  },
201
201
  ".badge": {
202
- "@apply inline-flex justify-center items-center space-x-2 whitespace-nowrap": {},
203
- "@apply font-semibold text-xs": {},
202
+ "@apply inline-flex items-center justify-center space-x-2 whitespace-nowrap": {},
203
+ "@apply text-xs font-semibold": {},
204
204
  "@apply px-2 py-1": {},
205
205
  "@apply rounded-token": {},
206
206
  },
207
207
  ".badge-icon": {
208
- "@apply w-5 h-5 flex justify-center items-center rounded-full": {},
209
- "@apply font-semibold text-xs": {},
208
+ "@apply flex h-5 w-5 items-center justify-center rounded-full": {},
209
+ "@apply text-xs font-semibold": {},
210
210
  "@apply shadow": {},
211
211
  },
212
212
  ".badge-glass": {
213
- "@apply bg-surface-500/20 dark:bg-surface-500/20 backdrop-blur-lg": {},
214
- "@apply ring-[1px] ring-neutral-900/5 dark:ring-neutral-50/5 ring-inset": {},
213
+ "@apply bg-surface-500/20 backdrop-blur-lg dark:bg-surface-500/20": {},
214
+ "@apply ring-[1px] ring-inset ring-neutral-900/5 dark:ring-neutral-50/5": {},
215
215
  },
216
216
  ".breadcrumb,.breadcrumb-nonresponsive": {
217
- "@apply flex items-center space-x-4 w-full hide-scrollbar overflow-x-auto": {},
217
+ "@apply hide-scrollbar flex w-full items-center space-x-4 overflow-x-auto": {},
218
218
  },
219
219
  ".crumb": {
220
- "@apply flex justify-center items-center space-x-2": {},
220
+ "@apply flex items-center justify-center space-x-2": {},
221
221
  },
222
222
  ".crumb-separator": {
223
- "@apply flex text-surface-700-200-token opacity-50": {},
223
+ "@apply flex opacity-50 text-surface-700-200-token": {},
224
224
  },
225
225
  ".breadcrumb li": {
226
226
  "@apply hidden md:block": {},
@@ -229,9 +229,9 @@ module.exports = {
229
229
  "@apply block": {},
230
230
  },
231
231
  ".button-base-styles": {
232
- "@apply text-base px-5 py-[9px]": {},
233
- "@apply text-center whitespace-nowrap": {},
234
- "@apply inline-flex justify-center items-center space-x-2": {},
232
+ "@apply px-5 py-[9px] text-base": {},
233
+ "@apply whitespace-nowrap text-center": {},
234
+ "@apply inline-flex items-center justify-center space-x-2": {},
235
235
  "@apply hover:brightness-[1.15]": {},
236
236
  "@apply transition-all": {},
237
237
  },
@@ -239,30 +239,30 @@ module.exports = {
239
239
  "@apply button-base-styles rounded-token active:scale-[95%] active:brightness-90": {},
240
240
  },
241
241
  ".btn-sm": {
242
- "@apply text-sm px-3 py-1.5": {},
242
+ "@apply px-3 py-1.5 text-sm": {},
243
243
  },
244
244
  ".btn-lg": {
245
- "@apply text-lg px-7 py-3": {},
245
+ "@apply px-7 py-3 text-lg": {},
246
246
  },
247
247
  ".btn-xl": {
248
- "@apply text-xl px-9 py-4": {},
248
+ "@apply px-9 py-4 text-xl": {},
249
249
  },
250
250
  ".btn-icon": {
251
251
  "@apply btn": {},
252
- "@apply text-base aspect-square w-[43px]": {},
252
+ "@apply aspect-square w-[43px] text-base": {},
253
253
  "@apply rounded-full": {},
254
254
  },
255
255
  ".btn-icon-sm": {
256
- "@apply text-sm aspect-square w-[33px]": {},
256
+ "@apply aspect-square w-[33px] text-sm": {},
257
257
  },
258
258
  ".btn-icon-base": {
259
- "@apply text-base aspect-square w-[43px]": {},
259
+ "@apply aspect-square w-[43px] text-base": {},
260
260
  },
261
261
  ".btn-icon-lg": {
262
- "@apply text-lg aspect-square w-[53px]": {},
262
+ "@apply aspect-square w-[53px] text-lg": {},
263
263
  },
264
264
  ".btn-icon-xl": {
265
- "@apply text-xl aspect-square w-[63px]": {},
265
+ "@apply aspect-square w-[63px] text-xl": {},
266
266
  },
267
267
  ".btn-group": {
268
268
  "@apply inline-flex flex-row space-x-0 overflow-hidden rounded-token": {},
@@ -274,13 +274,13 @@ module.exports = {
274
274
  },
275
275
  ".btn-group button,.btn-group a,.btn-group-vertical button,.btn-group-vertical a": {
276
276
  "@apply button-base-styles hover:bg-surface-50/[3%] active:bg-surface-900/[3%]": {},
277
- "@apply !no-underline !text-inherit": {},
277
+ "@apply !text-inherit !no-underline": {},
278
278
  },
279
279
  ".btn-group * + *": {
280
- "@apply border-t-0 border-l border-surface-500/20": {},
280
+ "@apply border-l border-t-0 border-surface-500/20": {},
281
281
  },
282
282
  ".btn-group-vertical * + *": {
283
- "@apply border-t border-l-0 border-surface-500/20": {},
283
+ "@apply border-l-0 border-t border-surface-500/20": {},
284
284
  },
285
285
  ".card": {
286
286
  "@apply bg-surface-100-800-token": {},
@@ -297,25 +297,25 @@ module.exports = {
297
297
  "@apply transition-all hover:scale-[101%] hover:shadow-xl": {},
298
298
  },
299
299
  ".chip": {
300
- "@apply px-3 py-1.5 whitespace-nowrap cursor-pointer": {},
301
- "@apply text-xs text-center": {},
300
+ "@apply cursor-pointer whitespace-nowrap px-3 py-1.5": {},
301
+ "@apply text-center text-xs": {},
302
302
  "@apply rounded": {},
303
- "@apply inline-flex justify-center items-center space-x-2": {},
303
+ "@apply inline-flex items-center justify-center space-x-2": {},
304
304
  "@apply hover:brightness-[1.15]": {},
305
305
  "@apply transition-all": {},
306
306
  },
307
307
  ".chip-disabled,.chip:disabled": {
308
- "@apply !opacity-50 !cursor-not-allowed active:scale-100": {},
308
+ "@apply !cursor-not-allowed !opacity-50 active:scale-100": {},
309
309
  },
310
310
  ".legend": {
311
- "@apply font-heading-token text-xl md:text-2xl": {},
311
+ "@apply text-xl font-heading-token md:text-2xl": {},
312
312
  },
313
313
  ".label": {
314
314
  "@apply space-y-1": {},
315
315
  },
316
316
  ".input,.textarea,.select,.input-group": {
317
317
  "@apply w-full transition duration-200": {},
318
- "@apply bg-surface-200-700-token focus:brightness-105 hover:brightness-105": {},
318
+ "@apply bg-surface-200-700-token hover:brightness-105 focus:brightness-105": {},
319
319
  "@apply !ring-0": {},
320
320
  "@apply border-token border-surface-400-500-token focus-within:border-primary-500": {},
321
321
  },
@@ -326,7 +326,7 @@ module.exports = {
326
326
  "@apply rounded-container-token": {},
327
327
  },
328
328
  ".select": {
329
- "@apply p-2 pr-8 space-y-1": {},
329
+ "@apply space-y-1 p-2 pr-8": {},
330
330
  },
331
331
  ".select[size]": {
332
332
  "@apply bg-none": {},
@@ -344,15 +344,15 @@ module.exports = {
344
344
  "@apply !mb-3": {},
345
345
  },
346
346
  ".select option": {
347
- "@apply bg-surface-200-700-token px-4 py-2 rounded-token cursor-pointer": {},
347
+ "@apply cursor-pointer px-4 py-2 bg-surface-200-700-token rounded-token": {},
348
348
  },
349
349
  ".select option:checked": {
350
350
  "background": "rgb(var(--color-primary-500)) linear-gradient(0deg, rgb(var(--color-primary-500)) 0%, rgb(var(--color-primary-500)) 100%);",
351
351
  "@apply text-on-primary-token": {},
352
352
  },
353
353
  ".checkbox,.radio": {
354
- "@apply w-5 h-5 !ring-0 rounded cursor-pointer": {},
355
- "@apply bg-surface-200-700-token focus:brightness-105 hover:brightness-105": {},
354
+ "@apply h-5 w-5 cursor-pointer rounded !ring-0": {},
355
+ "@apply bg-surface-200-700-token hover:brightness-105 focus:brightness-105": {},
356
356
  "@apply border-token border-surface-400-500-token focus:border-primary-500": {},
357
357
  },
358
358
  ".checkbox:checked,.radio:checked": {
@@ -361,39 +361,39 @@ module.exports = {
361
361
  ".radio": {
362
362
  "@apply rounded-token": {},
363
363
  },
364
- ".input[type='file']": {
364
+ ".input[type="file"]": {
365
365
  "@apply p-1": {},
366
366
  },
367
- ".input[type='color']": {
368
- "@apply border-none w-10 h-10 overflow-hidden rounded-token cursor-pointer": {},
367
+ ".input[type="color"]": {
368
+ "@apply h-10 w-10 cursor-pointer overflow-hidden border-none rounded-token": {},
369
369
  "-webkit-appearance": "none ",
370
370
  },
371
- ".input[type='color']::-webkit-color-swatch-wrapper": {
371
+ ".input[type="color"]::-webkit-color-swatch-wrapper": {
372
372
  "@apply p-0": {},
373
373
  },
374
- ".input[type='color']::-webkit-color-swatch": {
374
+ ".input[type="color"]::-webkit-color-swatch": {
375
375
  "@apply border-none hover:brightness-110": {},
376
376
  },
377
- ".input[type='color']::-moz-color-swatch": {
377
+ ".input[type="color"]::-moz-color-swatch": {
378
378
  "@apply border-none": {},
379
379
  },
380
380
  ".input:disabled,.textarea:disabled,.select:disabled": {
381
- "@apply !opacity-50 !cursor-not-allowed hover:!brightness-100": {},
381
+ "@apply !cursor-not-allowed !opacity-50 hover:!brightness-100": {},
382
382
  },
383
383
  ".input[readonly],.textarea[readonly],.select[readonly]": {
384
- "@apply !border-0 !cursor-not-allowed hover:!brightness-100": {},
384
+ "@apply !cursor-not-allowed !border-0 hover:!brightness-100": {},
385
385
  },
386
386
  ".input-group": {
387
387
  "@apply grid overflow-hidden": {},
388
388
  },
389
389
  ".input-group input,.input-group select": {
390
- "@apply border-0 ring-0 bg-transparent": {},
390
+ "@apply border-0 bg-transparent ring-0": {},
391
391
  },
392
392
  ".input-group select option": {
393
393
  "@apply bg-surface-200-700-token": {},
394
394
  },
395
395
  ".input-group div,.input-group a,.input-group button": {
396
- "@apply px-4 flex justify-between items-center": {},
396
+ "@apply flex items-center justify-between px-4": {},
397
397
  },
398
398
  ".input-group-divider input,.input-group-divider select,.input-group-divider div,.input-group-divider a": {
399
399
  "@apply border-l border-surface-400-500-token focus:border-surface-400-500-token": {},
@@ -407,7 +407,7 @@ module.exports = {
407
407
  "@apply bg-surface-400/10 text-surface-600-300-token": {},
408
408
  },
409
409
  ".input-success": {
410
- "@apply !bg-success-200 !border-success-500 !text-success-700": {},
410
+ "@apply !border-success-500 !bg-success-200 !text-success-700": {},
411
411
  },
412
412
  ".input-success::-moz-placeholder": {
413
413
  "@apply text-success-700": {},
@@ -419,7 +419,7 @@ module.exports = {
419
419
  "@apply text-success-700": {},
420
420
  },
421
421
  ".input-warning": {
422
- "@apply !bg-warning-200 !border-warning-500 !text-warning-700": {},
422
+ "@apply !border-warning-500 !bg-warning-200 !text-warning-700": {},
423
423
  },
424
424
  ".input-warning::-moz-placeholder": {
425
425
  "@apply text-warning-700": {},
@@ -431,7 +431,7 @@ module.exports = {
431
431
  "@apply text-warning-700": {},
432
432
  },
433
433
  ".input-error": {
434
- "@apply !bg-error-200 !border-error-500 !text-error-500": {},
434
+ "@apply !border-error-500 !bg-error-200 !text-error-500": {},
435
435
  },
436
436
  ".input-error::-moz-placeholder": {
437
437
  "@apply text-error-500": {},
@@ -443,12 +443,12 @@ module.exports = {
443
443
  "@apply text-error-500": {},
444
444
  },
445
445
  ".variant-form-material": {
446
- "@apply !rounded-tl !rounded-tr !rounded-bl-none !rounded-br-none": {},
446
+ "@apply !rounded-bl-none !rounded-br-none !rounded-tl !rounded-tr": {},
447
447
  "@apply bg-surface-500/10 dark:bg-surface-500/20": {},
448
448
  "@apply border-0 border-b-2": {},
449
449
  "@apply backdrop-blur": {},
450
450
  },
451
- ".variant-form-material[type='file']": {
451
+ ".variant-form-material[type="file"]": {
452
452
  "@apply !py-1.5": {},
453
453
  },
454
454
  ".list,.list-dl,.list-nav ul": {
@@ -478,7 +478,7 @@ module.exports = {
478
478
  },
479
479
  ".logo-item": {
480
480
  "@apply: flex-auto text-center space-x-4 shadow": {},
481
- "@apply flex justify-center items-center space-x-4": {},
481
+ "@apply flex items-center justify-center space-x-4": {},
482
482
  "@apply bg-surface-100-800-token": {},
483
483
  "@apply text-base font-bold text-black dark:text-white": {},
484
484
  "@apply py-4 md:py-8": {},
@@ -493,17 +493,17 @@ module.exports = {
493
493
  "@apply w-full max-w-[80%]": {},
494
494
  },
495
495
  ".placeholder": {
496
- "@apply bg-surface-300-600-token h-5": {},
496
+ "@apply h-5 bg-surface-300-600-token": {},
497
497
  "@apply rounded-token": {},
498
498
  },
499
499
  ".placeholder-circle": {
500
- "@apply bg-surface-300-600-token aspect-square rounded-full": {},
500
+ "@apply aspect-square rounded-full bg-surface-300-600-token": {},
501
501
  },
502
502
  ".table-container": {
503
- "@apply overflow-x-auto w-full rounded-container-token": {},
503
+ "@apply w-full overflow-x-auto rounded-container-token": {},
504
504
  },
505
505
  ".table": {
506
- "@apply w-full overflow-hidden table-auto": {},
506
+ "@apply w-full table-auto overflow-hidden": {},
507
507
  "@apply bg-surface-100-800-token": {},
508
508
  "@apply rounded-container-token": {},
509
509
  },
@@ -511,7 +511,7 @@ module.exports = {
511
511
  "@apply hover:bg-surface-500/20 even:hover:bg-surface-500/20": {},
512
512
  },
513
513
  ".table-interactive tbody tr": {
514
- "@apply hover:bg-primary-hover-token even:hover:bg-primary-hover-token cursor-pointer": {},
514
+ "@apply cursor-pointer hover:bg-primary-hover-token even:hover:bg-primary-hover-token": {},
515
515
  },
516
516
  ".table-sort-asc": {
517
517
  "@apply after:opacity-50 after:!content-['↓']": {},
@@ -520,19 +520,19 @@ module.exports = {
520
520
  "@apply after:opacity-50 after:!content-['↑']": {},
521
521
  },
522
522
  ".table thead": {
523
- "@apply bg-surface-200-700-token border-b border-surface-500/20": {},
523
+ "@apply border-b border-surface-500/20 bg-surface-200-700-token": {},
524
524
  },
525
525
  ".table thead tr": {
526
- "@apply capitalize text-left": {},
526
+ "@apply text-left capitalize": {},
527
527
  },
528
528
  ".table thead th": {
529
- "@apply font-bold p-4": {},
529
+ "@apply p-4 font-bold": {},
530
530
  },
531
531
  ".table tbody tr": {
532
532
  "@apply border-b border-surface-500/20 even:bg-surface-500/5": {},
533
533
  },
534
534
  ".table tbody td": {
535
- "@apply text-sm px-3 py-4 align-top whitespace-nowrap lg:whitespace-normal": {},
535
+ "@apply whitespace-nowrap px-3 py-4 align-top text-sm lg:whitespace-normal": {},
536
536
  },
537
537
  ".table-compact tbody td": {
538
538
  "@apply !py-3": {},
@@ -544,7 +544,7 @@ module.exports = {
544
544
  "@apply bg-surface-100-800-token": {},
545
545
  },
546
546
  ".table tfoot tr": {
547
- "@apply capitalize text-left": {},
547
+ "@apply text-left capitalize": {},
548
548
  },
549
549
  ".table tfoot th,.table tfoot td": {
550
550
  "@apply p-4": {},