lapikit 0.6.5 → 0.6.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/dist/components/accordion/accordion.svelte +27 -30
  2. package/dist/components/accordion/modules/accordion-item.svelte +4 -4
  3. package/dist/components/alert/alert.svelte +25 -26
  4. package/dist/components/app/app.svelte +17 -5
  5. package/dist/components/appbar/appbar.svelte +26 -33
  6. package/dist/components/avatar/avatar.svelte +22 -35
  7. package/dist/components/btn/btn.svelte +24 -31
  8. package/dist/components/card/card.svelte +5 -8
  9. package/dist/components/card/modules/card-actions.svelte +1 -1
  10. package/dist/components/card/modules/card-content.svelte +9 -1
  11. package/dist/components/card/modules/card-title.svelte +9 -2
  12. package/dist/components/chip/chip.svelte +23 -30
  13. package/dist/components/dialog/dialog.svelte +11 -16
  14. package/dist/components/dropdown/dropdown.svelte +4 -7
  15. package/dist/components/icon/icon.svelte +5 -5
  16. package/dist/components/list/list.svelte +38 -30
  17. package/dist/components/list/modules/list-item.svelte +7 -33
  18. package/dist/components/modal/modal.svelte +9 -12
  19. package/dist/components/popover/popover.svelte +4 -7
  20. package/dist/components/textfield/textfield.svelte +22 -34
  21. package/dist/components/toolbar/toolbar.svelte +25 -41
  22. package/dist/components/tooltip/tooltip.svelte +5 -11
  23. package/package.json +1 -1
package/dist/components/toolbar/toolbar.svelte CHANGED
@@ -95,15 +95,6 @@
95
95
 
96
96
  <style>
97
97
  .kit-toolbar {
98
- /* --kit-toolbar-bg: var(--kit-surface-2);
99
- --kit-toolbar-fg: var(--kit-fg);
100
- --kit-toolbar-bd: color-mix(in oklab, var(--kit-toolbar-fg), transparent 82%);
101
- --kit-toolbar-radius: 1rem;
102
- --kit-toolbar-gap: 0.5rem;
103
- --kit-toolbar-padding-x: 0.75rem;
104
- --kit-toolbar-padding-y: 0.5rem;
105
- --kit-toolbar-size: auto; */
106
-
107
98
  position: relative;
108
99
  display: inline-flex;
109
100
  max-width: 100%;
@@ -150,21 +141,14 @@
150
141
  * density
151
142
  * @link no links
152
143
  */
153
- .kit-toolbar[data-density='none'] {
154
- --kit-toolbar-density-scale: 0;
155
- --kit-toolbar-density-h-scale: 0;
156
- }
157
144
  .kit-toolbar[data-density='compact'] {
158
- --kit-toolbar-density-scale: 0.9;
159
- --kit-toolbar-density-h-scale: 0.92;
145
+ --kit-toolbar-density-offset: var(--kit-density-compact);
160
146
  }
161
147
  .kit-toolbar[data-density='default'] {
162
- --kit-toolbar-density-scale: 1;
163
- --kit-toolbar-density-h-scale: 1;
148
+ --kit-toolbar-density-offset: var(--kit-density-default);
164
149
  }
165
150
  .kit-toolbar[data-density='comfortable'] {
166
- --kit-toolbar-density-scale: 1.1;
167
- --kit-toolbar-density-h-scale: 1.15;
151
+ --kit-toolbar-density-offset: var(--kit-density-comfortable);
168
152
  }
169
153
 
170
154
  /**
@@ -199,34 +183,34 @@
199
183
  * @link nothing...
200
184
  */
201
185
  .kit-toolbar[data-size='xs'] {
202
- --kit-toolbar-h: 24px;
203
- --kit-toolbar-px: 6px;
204
- --kit-toolbar-gap: 4px;
205
- --kit-toolbar-font: 0.75rem;
186
+ --kit-toolbar-h: 32px;
187
+ --kit-toolbar-p: 8px;
188
+ --kit-toolbar-gap: var(--kit-space-compact);
189
+ --kit-toolbar-font: var(--kit-font-xs);
206
190
  }
207
191
  .kit-toolbar[data-size='sm'] {
208
- --kit-toolbar-h: 28px;
209
- --kit-toolbar-px: 8px;
210
- --kit-toolbar-gap: 6px;
211
- --kit-toolbar-font: 0.875rem;
192
+ --kit-toolbar-h: 40px;
193
+ --kit-toolbar-p: 10px;
194
+ --kit-toolbar-gap: var(--kit-space-default);
195
+ --kit-toolbar-font: var(--kit-font-sm);
212
196
  }
213
197
  .kit-toolbar[data-size='md'] {
214
- --kit-toolbar-h: 32px;
215
- --kit-toolbar-px: 10px;
216
- --kit-toolbar-gap: 8px;
217
- --kit-toolbar-font: 1rem;
198
+ --kit-toolbar-h: 48px;
199
+ --kit-toolbar-p: 12px;
200
+ --kit-toolbar-gap: var(--kit-space-default);
201
+ --kit-toolbar-font: var(--kit-font-md);
218
202
  }
219
203
  .kit-toolbar[data-size='lg'] {
220
- --kit-toolbar-h: 38px;
221
- --kit-toolbar-px: 12px;
222
- --kit-toolbar-gap: 10px;
223
- --kit-toolbar-font: 1.125rem;
204
+ --kit-toolbar-h: 56px;
205
+ --kit-toolbar-p: 16px;
206
+ --kit-toolbar-gap: var(--kit-space-default);
207
+ --kit-toolbar-font: var(--kit-font-lg);
224
208
  }
225
209
  .kit-toolbar[data-size='xl'] {
226
- --kit-toolbar-h: 42px;
227
- --kit-toolbar-px: 14px;
228
- --kit-toolbar-gap: 12px;
229
- --kit-toolbar-font: 1.25rem;
210
+ --kit-toolbar-h: 64px;
211
+ --kit-toolbar-p: 20px;
212
+ --kit-toolbar-gap: var(--kit-space-comfortable);
213
+ --kit-toolbar-font: var(--kit-font-xl);
230
214
  }
231
215
 
232
216
  .kit-toolbar .outline {
@@ -243,8 +227,8 @@
243
227
  display: inline-flex;
244
228
  align-items: center;
245
229
  justify-content: flex-start;
246
- min-height: calc(var(--kit-toolbar-h) * var(--kit-toolbar-density-h-scale));
247
- padding: calc(var(--kit-toolbar-px) * var(--kit-toolbar-density-scale));
230
+ min-height: calc(var(--kit-toolbar-h) + var(--kit-toolbar-density-offset) / 2);
231
+ padding: calc(var(--kit-toolbar-p) + var(--kit-toolbar-density-offset) / 2);
248
232
  gap: var(--kit-toolbar-gap);
249
233
  width: 100%;
250
234
  border-radius: inherit;
package/dist/components/tooltip/tooltip.svelte CHANGED
@@ -226,22 +226,19 @@
226
226
  .kit-tooltip__content {
227
227
  --kit-tooltip-bg: var(--kit-color-surface-2);
228
228
  --kit-tooltip-fg: var(--kit-color-text);
229
- --kit-tooltip-py: 0.15rem;
230
- --kit-tooltip-px: 0.625rem;
231
229
 
232
230
  position: relative;
233
231
  display: inline-block;
234
232
  width: max-content;
235
233
  max-width: min(20rem, calc(100vw - 1rem));
236
- padding: calc(var(--kit-tooltip-py) * var(--kit-tooltip-density-scale))
237
- calc(var(--kit-tooltip-px) * var(--kit-tooltip-density-scale));
234
+ padding: calc(var(--kit-space-default) + var(--kit-tooltip-density-offset) / 2);
238
235
  border: 0;
239
236
  border-radius: var(--kit-tooltip-radius);
240
237
  background: var(--kit-tooltip-bg);
241
238
  color: var(--kit-tooltip-fg);
242
239
  font-size: 0.875rem;
243
240
  overflow-wrap: break-word;
244
- box-shadow: 0 16px 29px -10px color-mix(in oklab, black 18%, transparent);
241
+ box-shadow: 0 16px 29px -10px color-mix(in oklab, var(--kit-color-shadow) 18%, transparent);
245
242
  animation: kit-tooltip-enter 150ms ease;
246
243
  }
247
244
 
@@ -249,17 +246,14 @@
249
246
  * density
250
247
  * @link no links
251
248
  */
252
- .kit-tooltip__content[data-density='none'] {
253
- --kit-tooltip-density-scale: 0;
254
- }
255
249
  .kit-tooltip__content[data-density='compact'] {
256
- --kit-tooltip-density-scale: 0.9;
250
+ --kit-tooltip-density-offset: var(--kit-density-compact);
257
251
  }
258
252
  .kit-tooltip__content[data-density='default'] {
259
- --kit-tooltip-density-scale: 1;
253
+ --kit-tooltip-density-offset: var(--kit-density-default);
260
254
  }
261
255
  .kit-tooltip__content[data-density='comfortable'] {
262
- --kit-tooltip-density-scale: 1.1;
256
+ --kit-tooltip-density-offset: var(--kit-density-comfortable);
263
257
  }
264
258
 
265
259
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lapikit",
3
- "version": "0.6.5",
3
+ "version": "0.6.6",
4
4
  "license": "MIT",
5
5
  "publishConfig": {
6
6
  "access": "public"