lutra 0.1.43 → 0.1.44

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 (7) hide show
  1. package/dist/components/Modal.svelte +3 -3
  2. package/dist/components/Toast.svelte +13 -13
  3. package/dist/components/Tooltip.svelte +5 -5
  4. package/dist/css/1-props.css +21 -27
  5. package/dist/css/2-base.css +4 -6
  6. package/dist/css/themes/DefaultTheme.css +23 -17
  7. package/package.json +1 -1
package/dist/components/Modal.svelte CHANGED
@@ -214,9 +214,9 @@
214
214
  dialog.Modal {
215
215
  border: none;
216
216
  padding: 0;
217
- background: var(--modal-background);
218
- border-radius: var(--modal-border-radius);
219
- box-shadow: 0 0.5rem 1rem var(--modal-shadow-color);
217
+ background: var(--modal-background, var(--surface-background));
218
+ border-radius: var(--modal-border-radius, var(--surface-border-radius));
219
+ box-shadow: var(--modal-shadow, var(--surface-shadow));
220
220
  width: var(--modal-width, fit-content);
221
221
  max-width: min(var(--modal-max-width, 40rem), calc(100vw - 2rem));
222
222
  max-height: min(var(--modal-max-height, 80vh), calc(100vh - 2rem));
package/dist/components/Toast.svelte CHANGED
@@ -77,18 +77,18 @@
77
77
  position: relative;
78
78
  display: grid;
79
79
  grid-template-columns: 1fr;
80
- gap: var(--notification-gap, var(--space-sm));
80
+ gap: var(--toast-gap, var(--space-sm));
81
81
 
82
82
  /* Surface styling - consistent with Popover and Modal */
83
- background: var(--notification-background-color, var(--background-body));
84
- border: var(--notification-border-size) var(--notification-border-style) var(--notification-border-color);
85
- border-radius: var(--notification-border-radius);
86
- box-shadow: 0 0.25rem 1rem var(--notification-shadow-color);
83
+ background: var(--toast-background, var(--surface-background));
84
+ border: var(--toast-border, var(--surface-border));
85
+ border-radius: var(--toast-border-radius, var(--surface-border-radius));
86
+ box-shadow: var(--toast-shadow, var(--surface-shadow));
87
87
 
88
- padding-block: var(--notification-padding-block);
89
- padding-inline: var(--notification-padding-inline);
90
- min-width: var(--notification-min-width);
91
- max-width: var(--notification-max-width);
88
+ padding-block: var(--toast-padding-block, var(--space-md));
89
+ padding-inline: var(--toast-padding-inline, var(--space-lg));
90
+ min-width: var(--toast-min-width, 20rem);
91
+ max-width: var(--toast-max-width, 28rem);
92
92
 
93
93
  animation: toast-enter 0.2s ease-out;
94
94
  }
@@ -108,7 +108,7 @@
108
108
  .Icon {
109
109
  display: flex;
110
110
  align-items: flex-start;
111
- font-size: var(--notification-icon-size);
111
+ font-size: var(--toast-icon-size, 1.25rem);
112
112
  color: var(--text-color-p-subtle);
113
113
  }
114
114
 
@@ -119,14 +119,14 @@
119
119
  }
120
120
 
121
121
  .Title {
122
- font-weight: var(--notification-title-font-weight);
123
- color: var(--notification-title-color);
122
+ font-weight: var(--toast-title-font-weight, var(--font-weight-semibold));
123
+ color: var(--toast-title-color, var(--text-color-heading));
124
124
  line-height: 1.3;
125
125
  }
126
126
 
127
127
  .Text {
128
128
  margin: 0;
129
- color: var(--notification-text-color);
129
+ color: var(--toast-text-color, var(--text-color-p-subtle));
130
130
  line-height: 1.4;
131
131
  }
132
132
 
package/dist/components/Tooltip.svelte CHANGED
@@ -61,15 +61,15 @@
61
61
  margin-block-end: 0.5rem;
62
62
 
63
63
  /* Styling */
64
- background-color: var(--tooltip-background);
64
+ background: var(--tooltip-background, var(--surface-background));
65
65
  padding: 0.35rem 0.5rem;
66
- border-radius: var(--tooltip-border-radius);
67
- border: var(--tooltip-border-size) var(--tooltip-border-style, solid) var(--tooltip-border-color);
68
- filter: drop-shadow(0px 2px 5px var(--tooltip-shadow-color));
66
+ border-radius: var(--tooltip-border-radius, var(--surface-border-radius));
67
+ border: var(--tooltip-border, var(--surface-border));
68
+ box-shadow: var(--tooltip-shadow, 0 0.25rem 0.5rem var(--shadow-color));
69
69
  font-size: max(0.75rem, 11px);
70
70
  line-height: 1.35;
71
71
  font-weight: 500;
72
- color: var(--tooltip-color);
72
+ color: var(--tooltip-color, var(--text-color-p));
73
73
  max-width: 25ch;
74
74
  width: max-content;
75
75
  text-align: center;
package/dist/css/1-props.css CHANGED
@@ -409,34 +409,30 @@
409
409
  * Tooltips
410
410
  */
411
411
 
412
- @property --tooltip-background { syntax: "<color># | <image># | <gradient>#"; inherits: true; initial-value: #ffffff; }
412
+ @property --tooltip-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
413
413
  @property --tooltip-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
414
- @property --tooltip-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
415
- @property --tooltip-border-size { syntax: "<length>"; inherits: true; initial-value: 0; }
416
- @property --tooltip-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
414
+ @property --tooltip-border { syntax: "*"; inherits: true; initial-value: 1px solid #d1d5db; }
417
415
  @property --tooltip-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
418
- @property --tooltip-shadow-color { syntax: "*"; inherits: true; initial-value: #000000; }
416
+ @property --tooltip-shadow { syntax: "*"; inherits: true; initial-value: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15); }
419
417
 
420
418
  /**
421
- * Notifications
419
+ * Toast (inherits from surface system)
422
420
  */
423
421
 
424
- @property --notification-background-color { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
425
- @property --notification-border-color { syntax: "*"; inherits: true; initial-value: #cccccc; }
426
- @property --notification-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
427
- @property --notification-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
428
- @property --notification-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
429
- @property --notification-shadow-color { syntax: "*"; inherits: true; initial-value: rgba(0, 0, 0, 0.1); }
430
- @property --notification-padding-inline { syntax: "<length>"; inherits: true; initial-value: 1rem; }
431
- @property --notification-padding-block { syntax: "<length>"; inherits: true; initial-value: 0.75rem; }
432
- @property --notification-gap { syntax: "<length>"; inherits: true; initial-value: 0.75rem; }
433
- @property --notification-min-width { syntax: "<length>"; inherits: true; initial-value: 16rem; }
434
- @property --notification-max-width { syntax: "<length>"; inherits: true; initial-value: 24rem; }
435
- @property --notification-title-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
436
- @property --notification-title-font-weight { syntax: "<number>"; inherits: true; initial-value: 600; }
437
- @property --notification-text-color { syntax: "*"; inherits: true; initial-value: #666666; }
438
- @property --notification-icon-size { syntax: "<length>"; inherits: true; initial-value: 1.5rem; }
439
- @property --notification-offset { syntax: "<length>"; inherits: true; initial-value: 1rem; }
422
+ @property --toast-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
423
+ @property --toast-border { syntax: "*"; inherits: true; initial-value: 1px solid #d1d5db; }
424
+ @property --toast-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
425
+ @property --toast-shadow { syntax: "*"; inherits: true; initial-value: 0 0.25rem 1rem rgba(0, 0, 0, 0.15); }
426
+ @property --toast-padding-inline { syntax: "<length>"; inherits: true; initial-value: 1rem; }
427
+ @property --toast-padding-block { syntax: "<length>"; inherits: true; initial-value: 0.75rem; }
428
+ @property --toast-gap { syntax: "<length>"; inherits: true; initial-value: 0.75rem; }
429
+ @property --toast-min-width { syntax: "<length>"; inherits: true; initial-value: 20rem; }
430
+ @property --toast-max-width { syntax: "<length>"; inherits: true; initial-value: 28rem; }
431
+ @property --toast-title-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
432
+ @property --toast-title-font-weight { syntax: "<number>"; inherits: true; initial-value: 600; }
433
+ @property --toast-text-color { syntax: "*"; inherits: true; initial-value: #666666; }
434
+ @property --toast-icon-size { syntax: "<length>"; inherits: true; initial-value: 1.25rem; }
435
+ @property --toast-offset { syntax: "<length>"; inherits: true; initial-value: 1rem; }
440
436
 
441
437
  /**
442
438
  * Menu
@@ -482,7 +478,7 @@
482
478
  @property --modal-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
483
479
  @property --modal-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
484
480
  @property --modal-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
485
- @property --modal-shadow-color { syntax: "*"; inherits: true; initial-value: rgba(0, 0, 0, 0.1); }
481
+ @property --modal-shadow { syntax: "*"; inherits: true; initial-value: 0 0.25rem 1rem rgba(0, 0, 0, 0.15); }
486
482
 
487
483
  @property --modal-padding-inline { syntax: "<length>"; inherits: true; initial-value: 24px; }
488
484
  @property --modal-padding-block { syntax: "<length>"; inherits: true; initial-value: 24px; }
@@ -504,7 +500,7 @@
504
500
  @property --surface-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
505
501
  @property --surface-border { syntax: "*"; inherits: true; initial-value: 1px solid #d1d5db; }
506
502
  @property --surface-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
507
- @property --surface-shadow { syntax: "*"; inherits: true; initial-value: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); }
503
+ @property --surface-shadow { syntax: "*"; inherits: true; initial-value: 0 0.25rem 1rem rgba(0, 0, 0, 0.15); }
508
504
 
509
505
  /**
510
506
  * Popover Component
@@ -513,9 +509,7 @@
513
509
  @property --popover-background { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
514
510
  @property --popover-border { syntax: "*"; inherits: true; initial-value: 1px solid #d1d5db; }
515
511
  @property --popover-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
516
- @property --popover-shadow { syntax: "*"; inherits: true; initial-value: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); }
517
- @property --popover-padding { syntax: "<length>"; inherits: true; initial-value: 0; }
518
- @property --popover-offset { syntax: "<length>"; inherits: true; initial-value: 0.25rem; }
512
+ @property --popover-shadow { syntax: "*"; inherits: true; initial-value: 0 0.25rem 1rem rgba(0, 0, 0, 0.15); }
519
513
  @property --popover-width { syntax: "*"; inherits: true; initial-value: max-content; }
520
514
  @property --popover-max-width { syntax: "<length>"; inherits: true; initial-value: calc(100vw - 2rem); }
521
515
  @property --popover-max-height { syntax: "<length>"; inherits: true; initial-value: calc(100vh - 2rem); }
package/dist/css/2-base.css CHANGED
@@ -107,13 +107,11 @@
107
107
  --shadow-xl: var(--shadow-xl);
108
108
  --shadow-2xl: var(--shadow-2xl);
109
109
 
110
- --tooltip-background: var(--background-body);
110
+ --tooltip-background: var(--surface-background);
111
111
  --tooltip-color: var(--text-color-p);
112
- --tooltip-border-color: var(--border-color);
113
- --tooltip-border-size: var(--border-size-thin);
114
- --tooltip-border-style: var(--border-style);
115
- --tooltip-border-radius: var(--border-radius-base);
116
- --tooltip-shadow-color: var(--shadow-color);
112
+ --tooltip-border: var(--surface-border);
113
+ --tooltip-border-radius: var(--surface-border-radius);
114
+ --tooltip-shadow: 0 0.25rem 0.5rem var(--shadow-color);
117
115
 
118
116
  /* Table compound variables */
119
117
  --table-border: var(--table-border-size) var(--table-border-style) var(--table-border-color);
package/dist/css/themes/DefaultTheme.css CHANGED
@@ -201,19 +201,6 @@
201
201
  --link-color-hover: var(--button-submit-base-color-hover);
202
202
  --link-color-active: var(--button-submit-base-color-active);
203
203
 
204
- /**
205
- * Notifications
206
- */
207
-
208
- --notification-background-color: var(--background-body);
209
- --notification-border-color: var(--border-color);
210
- --notification-border-size: var(--border-size-thin);
211
- --notification-border-style: var(--border-style);
212
- --notification-border-radius: var(--border-radius-base);
213
- --notification-shadow-color: var(--shadow-color);
214
- --notification-title-color: var(--text-color-heading);
215
- --notification-text-color: var(--text-color-p-subtle);
216
- --notification-offset: 1rem;
217
204
 
218
205
  /**
219
206
  * Menus
@@ -238,6 +225,15 @@
238
225
  --table-row-background-hover: color-mix(in srgb, var(--theme-surface-interactive) 60%, transparent);
239
226
  --table-cell-color: var(--text-color-p);
240
227
 
228
+ /**
229
+ * Shadows
230
+ */
231
+
232
+ --shadow-color: light-dark(
233
+ rgba(0, 0, 0, 0.15),
234
+ rgba(0, 0, 0, 0.4)
235
+ );
236
+
241
237
  /**
242
238
  * Shared Surface (for Popover, Modal, Menu, Toast)
243
239
  */
@@ -245,10 +241,10 @@
245
241
  --surface-background: var(--background-body);
246
242
  --surface-border: var(--border-size-thin) var(--border-style) var(--border-color);
247
243
  --surface-border-radius: var(--border-radius-base);
248
- --surface-shadow: 0 0.5rem 1rem var(--shadow-color);
244
+ --surface-shadow: 0 0.25rem 1rem var(--shadow-color);
249
245
 
250
246
  /**
251
- * Popover
247
+ * Popover (inherits from surface)
252
248
  */
253
249
 
254
250
  --popover-background: var(--surface-background);
@@ -257,15 +253,25 @@
257
253
  --popover-shadow: var(--surface-shadow);
258
254
 
259
255
  /**
260
- * Modals
256
+ * Modal (inherits from surface)
261
257
  */
262
258
 
263
259
  --modal-background: var(--surface-background);
260
+ --modal-border-radius: var(--surface-border-radius);
261
+ --modal-shadow: var(--surface-shadow);
264
262
  --modal-border-color: var(--border-color);
265
- --modal-shadow-color: var(--shadow-color);
266
263
  --modal-actions-background: var(--theme-surface-subtlest);
267
264
  --modal-actions-border-color: var(--border-color);
268
265
 
266
+ /**
267
+ * Toast (inherits from surface)
268
+ */
269
+
270
+ --toast-background: var(--surface-background);
271
+ --toast-border: var(--surface-border);
272
+ --toast-border-radius: var(--surface-border-radius);
273
+ --toast-shadow: var(--surface-shadow);
274
+
269
275
  /**
270
276
  * Scrim/Backdrop
271
277
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lutra",
3
- "version": "0.1.43",
3
+ "version": "0.1.44",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "bump-and-publish:patch": "pnpm version:patch && pnpm build && npm publish",