lutra 0.1.14 → 0.1.16

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 (11) hide show
  1. package/dist/components/MenuItem.svelte +1 -0
  2. package/dist/components/MenuItemContent.svelte +0 -6
  3. package/dist/css/1-props.css +23 -1
  4. package/dist/css/2-base.css +18 -5
  5. package/dist/css/4-layout.css +77 -40
  6. package/dist/css/themes/DefaultTheme.css +46 -17
  7. package/dist/form/Datepicker.svelte +7 -7
  8. package/dist/form/FieldContent.svelte +4 -4
  9. package/dist/form/FormActions.svelte +2 -2
  10. package/dist/form/FormSection.svelte +6 -6
  11. package/package.json +1 -1
package/dist/components/MenuItem.svelte CHANGED
@@ -133,6 +133,7 @@
133
133
  display: inline-flex;
134
134
  align-items: center;
135
135
  white-space: nowrap;
136
+ gap: var(--menu-item-gap, var(--space-sm));
136
137
  }
137
138
 
138
139
  li .Item span.Shortcut {
package/dist/components/MenuItemContent.svelte CHANGED
@@ -29,9 +29,3 @@
29
29
  {#if Comp}
30
30
  <Comp {...props} />
31
31
  {/if}
32
-
33
- <style>
34
- :global(.Icon) {
35
- margin-inline-end: var(--menu-item-icon-gap, var(--space-sm));
36
- }
37
- </style>
package/dist/css/1-props.css CHANGED
@@ -437,4 +437,26 @@
437
437
  @property --menu-border-color { syntax: "*"; inherits: true; initial-value: #cccccc; }
438
438
  @property --menu-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
439
439
  @property --menu-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
440
- @property --menu-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
440
+ @property --menu-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
441
+
442
+ /**
443
+ * Table
444
+ */
445
+
446
+ @property --table-border-color { syntax: "*"; inherits: true; initial-value: #d1d5db; }
447
+ @property --table-border-size { syntax: "<length>"; inherits: true; initial-value: 1px; }
448
+ @property --table-border-style { syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset"; inherits: true; initial-value: solid; }
449
+ @property --table-border-radius { syntax: "<length>"; inherits: true; initial-value: 8px; }
450
+
451
+ @property --table-cell-padding-inline { syntax: "<length>"; inherits: true; initial-value: 12px; }
452
+ @property --table-cell-padding-block { syntax: "<length>"; inherits: true; initial-value: 8px; }
453
+
454
+ @property --table-header-background { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
455
+ @property --table-header-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
456
+ @property --table-header-font-weight { syntax: "<number>"; inherits: true; initial-value: 600; }
457
+
458
+ @property --table-row-background { syntax: "<color>"; inherits: true; initial-value: transparent; }
459
+ @property --table-row-background-even { syntax: "<color>"; inherits: true; initial-value: #f8fafc; }
460
+ @property --table-row-background-hover { syntax: "<color>"; inherits: true; initial-value: #f1f5f9; }
461
+
462
+ @property --table-cell-color { syntax: "*"; inherits: true; initial-value: #1a1a1a; }
package/dist/css/2-base.css CHANGED
@@ -30,11 +30,14 @@
30
30
  --space-900: calc(var(--space-base) * 9);
31
31
  --space-1000: calc(var(--space-base) * 10);
32
32
 
33
- --space-xs: var(--space-025);
34
- --space-sm: var(--space-050);
33
+ --space-xxs: var(--space-025);
34
+ --space-xs: var(--space-050);
35
+ --space-sm: var(--space-075);
35
36
  --space-md: var(--space-100);
36
- --space-lg: var(--space-200);
37
- --space-xl: var(--space-300);
37
+ --space-lg: var(--space-150);
38
+ --space-xl: var(--space-200);
39
+ --space-xxl: var(--space-300);
40
+ --space-xxxl: var(--space-400);
38
41
 
39
42
  --font-scale: 1.175;
40
43
  --font-size-base: 1em;
@@ -112,6 +115,10 @@
112
115
  --tooltip-border-radius: var(--border-radius-base);
113
116
  --tooltip-shadow-color: var(--shadow-color);
114
117
 
118
+ /* Table compound variables */
119
+ --table-border: var(--table-border-size) var(--table-border-style) var(--table-border-color);
120
+ --table-cell-padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
121
+
115
122
  --mix-target: light-dark(black, white);
116
123
  }
117
124
 
@@ -130,6 +137,7 @@ body {
130
137
  min-width: 280px;
131
138
  width: 100%;
132
139
  min-height: 0;
140
+ scrollbar-gutter: stable;
133
141
  }
134
142
 
135
143
  body * {
@@ -173,12 +181,17 @@ input, textarea, select, .button, ::file-selector-button, .Field {
173
181
  outline-offset var(--transition-duration-fast) var(--transition-timing-function);
174
182
  }
175
183
 
176
- input:focus-visible, textarea:focus-visible, select:focus-visible {
184
+ input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
177
185
  outline: var(--focus-ring-size) solid var(--focus-ring-color);
178
186
  outline-offset: var(--focus-ring-offset);
179
187
  border-color: var(--focus-ring-color);
180
188
  }
181
189
 
190
+ /* Remove focus styles for mouse/touch users, keep for keyboard */
191
+ :focus:not(:focus-visible) {
192
+ outline: none;
193
+ }
194
+
182
195
  input::placeholder, textarea::placeholder, select::placeholder {
183
196
  color: var(--field-placeholder-color);
184
197
  }
package/dist/css/4-layout.css CHANGED
@@ -1,17 +1,25 @@
1
1
  @scope (.PageContent) to (.UIContent) {
2
+ /* Optional hyphenation when lang attribute is present */
3
+ :scope:where([lang]) {
4
+ hyphens: auto;
5
+ hyphenate-limit-chars: 6 3 3;
6
+ }
7
+
2
8
  /* Heading spacing for proper markdown hierarchy */
3
9
  h1, h2, h3, h4, h5, h6 {
4
- margin-block: var(--space-lg) var(--space-md);
10
+ margin-block: var(--space-xl) var(--space-md);
11
+ text-wrap: balance;
12
+ scroll-margin-block-start: var(--space-xl);
5
13
 
6
14
  /* No top margin for first heading or when following another heading */
7
15
  &:first-child,
8
- &:has(+ :is(h1, h2, h3, h4, h5, h6)) {
16
+ :is(h1, h2, h3, h4, h5, h6) + & {
9
17
  margin-block-start: 0;
10
18
  }
11
19
 
12
20
  /* Larger spacing before headings that follow non-heading content */
13
21
  &:not(:first-child):not(:is(h1, h2, h3, h4, h5, h6) + *) {
14
- margin-block-start: var(--space-xl);
22
+ margin-block-start: var(--space-xxl);
15
23
  }
16
24
 
17
25
  & + * {
@@ -21,17 +29,18 @@
21
29
 
22
30
  /* h1 and h2 get extra spacing */
23
31
  h1, h2 {
24
- margin-block-start: var(--space-xl);
25
- margin-block-end: var(--space-lg);
32
+ margin-block-start: var(--space-xxl);
33
+ margin-block-end: var(--space-xl);
26
34
  }
27
35
 
28
36
  /* Paragraph spacing with smart adjustments */
29
37
  p {
30
38
  margin-block: 0 var(--space-md);
39
+ text-wrap: pretty;
31
40
 
32
41
  /* Paragraphs with images get extra spacing */
33
42
  &:has(img) {
34
- margin-block: var(--space-lg);
43
+ margin-block: var(--space-xl);
35
44
  }
36
45
 
37
46
  /* Paragraphs with only a small element get reduced spacing */
@@ -47,34 +56,34 @@
47
56
 
48
57
  /* Paragraphs immediately after lists get reduced spacing */
49
58
  :is(ul, ol) + & {
50
- margin-block-start: var(--space-sm);
59
+ margin-block-start: var(--space-xs);
51
60
  }
52
61
  }
53
62
 
54
63
  /* List spacing with contextual adjustments */
55
64
  :is(ul, ol) {
56
65
  margin-block: 0 var(--space-md);
57
- padding-inline-start: var(--space-xl);
66
+ padding-inline-start: var(--space-xxl);
58
67
 
59
68
  /* Lists following paragraphs get closer spacing */
60
69
  p + & {
61
- margin-block-start: var(--space-sm);
70
+ margin-block-start: var(--space-xs);
62
71
  }
63
72
 
64
73
  /* Nested lists */
65
74
  & :is(ul, ol) {
66
- margin-block: var(--space-sm) 0;
75
+ margin-block: var(--space-xs) 0;
67
76
  }
68
77
 
69
78
  /* Lists inside blockquotes */
70
79
  blockquote & {
71
- margin-block: var(--space-sm) 0;
80
+ margin-block: var(--space-xs) 0;
72
81
  }
73
82
  }
74
83
 
75
84
  /* List item spacing */
76
85
  li {
77
- margin-block-end: var(--space-xs);
86
+ margin-block-end: var(--space-xxs);
78
87
 
79
88
  &:last-child {
80
89
  margin-block-end: 0;
@@ -82,7 +91,7 @@
82
91
 
83
92
  /* List items containing only text get tighter spacing */
84
93
  &:not(:has(:is(p, ul, ol, blockquote, pre))) {
85
- margin-block-end: var(--space-xs);
94
+ margin-block-end: var(--space-xxs);
86
95
  }
87
96
  }
88
97
 
@@ -90,10 +99,12 @@
90
99
  blockquote {
91
100
  border-inline-start: var(--space-xs) solid var(--border-color);
92
101
  padding-inline-start: var(--space-md);
93
- padding-block: var(--space-sm);
94
- margin-block: var(--space-lg);
102
+ padding-block: var(--space-xs);
103
+ margin-block: var(--space-xl);
95
104
  margin-inline: 0;
96
105
  color: var(--text-color-p-subtle);
106
+ text-wrap: pretty;
107
+ hanging-punctuation: first last;
97
108
 
98
109
  /* Nested blockquotes get reduced spacing */
99
110
  & blockquote {
@@ -121,11 +132,13 @@
121
132
  border-radius: var(--code-border-radius);
122
133
  overflow-x: auto;
123
134
  line-height: var(--font-line-height);
124
- margin-block: var(--space-lg);
135
+ margin-block: var(--space-xl);
136
+ scrollbar-width: thin;
137
+ tab-size: 2;
125
138
 
126
139
  /* Code blocks following lists get extra spacing */
127
140
  :is(ul, ol) + & {
128
- margin-block-start: var(--space-xl);
141
+ margin-block-start: var(--space-xxl);
129
142
  }
130
143
 
131
144
  /* Code blocks inside blockquotes */
@@ -164,7 +177,7 @@
164
177
  hr {
165
178
  border: none;
166
179
  border-block-start: var(--border-size-thick) var(--border-style) var(--border-color);
167
- margin-block: var(--space-xl);
180
+ margin-block: var(--space-xxl);
168
181
 
169
182
  /* HRs following headings get reduced spacing */
170
183
  :is(h1, h2, h3, h4, h5, h6) + & {
@@ -179,7 +192,7 @@
179
192
 
180
193
  /* Table with responsive and contextual styling */
181
194
  table {
182
- margin-block: var(--space-lg);
195
+ margin-block: var(--space-xl);
183
196
  border-collapse: collapse;
184
197
  width: 100%;
185
198
 
@@ -195,18 +208,35 @@
195
208
  }
196
209
 
197
210
  :is(th, td) {
198
- padding: var(--space-sm);
199
- border: var(--border-size-thin) var(--border-style) var(--border-color);
211
+ padding-block: var(--table-cell-padding-block);
212
+ padding-inline: var(--table-cell-padding-inline);
213
+ border: var(--table-border-size) var(--table-border-style) var(--table-border-color);
200
214
  text-align: start;
201
-
202
- /* First/last cells get adjusted padding */
203
- &:first-child { padding-inline-start: var(--space-md); }
204
- &:last-child { padding-inline-end: var(--space-md); }
215
+ vertical-align: top;
216
+ color: var(--table-cell-color);
205
217
  }
206
218
 
207
219
  th {
208
- background-color: var(--background-color-subtle);
209
- font-weight: var(--font-weight-semibold);
220
+ background-color: var(--table-header-background);
221
+ color: var(--table-header-color);
222
+ font-weight: var(--table-header-font-weight);
223
+ position: sticky;
224
+ top: 0;
225
+ z-index: 1;
226
+ }
227
+
228
+ tbody tr {
229
+ background-color: var(--table-row-background);
230
+
231
+ /* Zebra striping for readability */
232
+ &:nth-child(even) {
233
+ background-color: var(--table-row-background-even);
234
+ }
235
+
236
+ /* Hover state for interactive tables */
237
+ &:hover {
238
+ background-color: var(--table-row-background-hover);
239
+ }
210
240
  }
211
241
 
212
242
  /* Smart image spacing */
@@ -222,24 +252,29 @@
222
252
 
223
253
  /* Block images get more spacing */
224
254
  &:not(p *) {
225
- margin-block: var(--space-lg);
255
+ margin-block: var(--space-xl);
226
256
  display: block;
227
257
  }
228
258
 
229
259
  /* Images in lists */
230
260
  li & {
231
- margin-block: var(--space-sm);
261
+ margin-block: var(--space-xs);
262
+ }
263
+
264
+ /* Aspect ratio preservation during loading */
265
+ &[width][height] {
266
+ aspect-ratio: attr(width) / attr(height);
232
267
  }
233
268
  }
234
269
 
235
270
  /* Figure with enhanced spacing logic */
236
271
  figure {
237
- margin-block: var(--space-lg);
272
+ margin-block: var(--space-xl);
238
273
  margin-inline: 0;
239
274
 
240
275
  /* Figures containing only images */
241
276
  &:has(> img:only-child) {
242
- margin-block: var(--space-xl);
277
+ margin-block: var(--space-xxl);
243
278
  }
244
279
 
245
280
  /* Figures in lists or blockquotes */
@@ -249,7 +284,7 @@
249
284
  }
250
285
 
251
286
  figcaption {
252
- margin-block-start: var(--space-sm);
287
+ margin-block-start: var(--space-xs);
253
288
  font-size: var(--font-size-sm);
254
289
  color: var(--text-color-p-subtle);
255
290
  text-align: center;
@@ -261,7 +296,7 @@
261
296
 
262
297
  /* DLs with many terms get more spacing */
263
298
  &:has(dt:nth-of-type(n+4)) {
264
- margin-block: var(--space-lg);
299
+ margin-block: var(--space-xl);
265
300
 
266
301
  dt {
267
302
  margin-block-start: var(--space-md);
@@ -272,14 +307,14 @@
272
307
 
273
308
  dt {
274
309
  font-weight: var(--font-weight-semibold);
275
- margin-block: var(--space-sm) var(--space-xs);
310
+ margin-block: var(--space-xs) var(--space-xs);
276
311
 
277
312
  &:first-child { margin-block-start: 0; }
278
313
  }
279
314
 
280
315
  dd {
281
- margin-inline-start: var(--space-xl);
282
- margin-block-end: var(--space-sm);
316
+ margin-inline-start: var(--space-xxl);
317
+ margin-block-end: var(--space-xs);
283
318
 
284
319
  &:last-child { margin-block-end: 0; }
285
320
 
@@ -293,6 +328,8 @@
293
328
  a {
294
329
  color: var(--link-color);
295
330
  text-decoration: var(--link-text-decoration);
331
+ text-decoration-skip-ink: auto;
332
+ text-underline-offset: 0.15em;
296
333
 
297
334
  /* Links in headings get subtle styling */
298
335
  :is(h1, h2, h3, h4, h5, h6) & {
@@ -308,8 +345,8 @@
308
345
  display: inline-block;
309
346
  }
310
347
 
311
- /* External links (starting with http) */
312
- &[href^="http"]::after {
348
+ /* External links (starting with http) - but not if they only contain an image */
349
+ &[href^="http"]:not(:has(> img:only-child))::after {
313
350
  content: " ↗";
314
351
  font-size: 0.8em;
315
352
  color: var(--text-color-p-subtler);
@@ -345,12 +382,12 @@
345
382
 
346
383
  /* Content flow improvements */
347
384
  :is(p, li):has(+ :is(h2, h3, h4, h5, h6)) {
348
- margin-block-end: var(--space-sm); /* Reduce space before section headings */
385
+ margin-block-end: var(--space-xs); /* Reduce space before section headings */
349
386
  }
350
387
 
351
388
  /* Adjacent similar elements get reduced spacing */
352
389
  :is(ul, ol) + :is(ul, ol) {
353
- margin-block-start: var(--space-sm);
390
+ margin-block-start: var(--space-xs);
354
391
  }
355
392
 
356
393
  blockquote + blockquote {
package/dist/css/themes/DefaultTheme.css CHANGED
@@ -9,6 +9,35 @@
9
9
 
10
10
  --lutra-primary-color: oklch(0.5 var(--chroma) var(--hue));
11
11
 
12
+ /*
13
+ * Reusable surface colors (derived from primary)
14
+ * These provide consistent backgrounds across components
15
+ */
16
+
17
+ /* Very subtle, near-white surface (code, table headers) */
18
+ --theme-surface-subtlest: light-dark(
19
+ oklch(from var(--lutra-primary-color) calc(l * 1.92) calc(c * 0.02) h),
20
+ oklch(from var(--lutra-primary-color) calc(l * 0.6) calc(c * 0.02) h)
21
+ );
22
+
23
+ /* Subtle surface for slight differentiation */
24
+ --theme-surface-subtle: light-dark(
25
+ oklch(from var(--lutra-primary-color) calc(l * 1.96) calc(c * 0.01) h),
26
+ oklch(from var(--lutra-primary-color) calc(l * 0.65) calc(c * 0.01) h)
27
+ );
28
+
29
+ /* Interactive surface (hover states) */
30
+ --theme-surface-interactive: light-dark(
31
+ oklch(from var(--lutra-primary-color) calc(l * 1.85) calc(c * 0.05) h),
32
+ oklch(from var(--lutra-primary-color) calc(l * 0.7) calc(c * 0.05) h)
33
+ );
34
+
35
+ /* Selected/active surface with more chroma */
36
+ --theme-surface-selected: light-dark(
37
+ oklch(from var(--lutra-primary-color) calc(l * 0.95) calc(c * 0.15) h),
38
+ oklch(from var(--lutra-primary-color) calc(l * 0.8) calc(c * 0.15) h)
39
+ );
40
+
12
41
  /*
13
42
  * Background colors
14
43
  */
@@ -23,10 +52,8 @@
23
52
  oklch(from var(--lutra-primary-color) calc(l * 0.5) calc(c * 0.025) h)
24
53
  );
25
54
 
26
- --background-selected: light-dark(
27
- oklch(from var(--lutra-primary-color) calc(l * 0.95) calc(c * 0.15) h),
28
- oklch(from var(--lutra-primary-color) calc(l * 0.8) calc(c * 0.15) h)
29
- );
55
+ --background-main-subtle: var(--theme-surface-subtlest);
56
+ --background-selected: var(--theme-surface-selected);
30
57
 
31
58
  /*
32
59
  * Text
@@ -71,11 +98,7 @@
71
98
  * Code
72
99
  */
73
100
 
74
- --code-background: light-dark(
75
- oklch(from var(--lutra-primary-color) calc(l * 1.92) calc(c * 0.02) h),
76
- oklch(from var(--lutra-primary-color) calc(l * 0.5) calc(c * 0.02) h)
77
- );
78
-
101
+ --code-background: var(--theme-surface-subtlest);
79
102
  --code-border-color: var(--code-background);
80
103
 
81
104
  --code-color: light-dark(
@@ -149,10 +172,7 @@
149
172
 
150
173
  --field-label-color: var(--text-color-p);
151
174
 
152
- --form-background-actions: light-dark(
153
- oklch(from var(--lutra-primary-color) calc(l * 1.75) calc(c * 0.05) h / 0.35),
154
- oklch(from var(--lutra-primary-color) calc(l * 0.75) calc(c * 0.05) h / 0.35)
155
- );
175
+ --form-background-actions: color-mix(in srgb, var(--theme-surface-interactive) 35%, transparent);
156
176
 
157
177
  /**
158
178
  * Borders
@@ -196,14 +216,23 @@
196
216
  */
197
217
 
198
218
  --menu-background-color: var(--background-body);
199
- --menu-background-color-hover: light-dark(
200
- oklch(from var(--lutra-primary-color) l calc(c * 0.5) h / 0.1),
201
- oklch(from var(--lutra-primary-color) calc(l * 2) calc(c * 0.25) h / 0.15)
202
- );
219
+ --menu-background-color-hover: color-mix(in srgb, var(--theme-surface-interactive) 35%, transparent);
203
220
  --menu-border-color: var(--border-color-subtle);
204
221
  --menu-border-size: var(--border-size-thin);
205
222
  --menu-border-style: var(--border-style);
206
223
  --menu-border-radius: var(--border-radius-base);
224
+
225
+ /**
226
+ * Tables
227
+ */
228
+
229
+ --table-border-color: var(--border-color);
230
+ --table-header-background: var(--theme-surface-subtlest);
231
+ --table-header-color: var(--text-color-heading);
232
+ --table-row-background: transparent;
233
+ --table-row-background-even: color-mix(in srgb, var(--theme-surface-subtle) 50%, transparent);
234
+ --table-row-background-hover: color-mix(in srgb, var(--theme-surface-interactive) 60%, transparent);
235
+ --table-cell-color: var(--text-color-p);
207
236
 
208
237
  }
209
238
  }
package/dist/form/Datepicker.svelte CHANGED
@@ -188,20 +188,20 @@ import UiContent from "../components/UIContent.svelte";
188
188
  .Year {
189
189
  display: block;
190
190
  font-size: 2em;
191
- padding: var(--space-sm);
191
+ padding: var(--space-xs);
192
192
  text-box: trim-both cap alphabetic;
193
193
  }
194
194
  .Months {
195
195
  display: grid;
196
196
  grid-template-columns: auto 1fr;
197
- gap: var(--space-sm);
197
+ gap: var(--space-xs);
198
198
  }
199
199
  .Month {
200
200
  display: grid;
201
201
  grid-template-columns: subgrid;
202
202
  grid-column: span 2;
203
203
  line-height: 1;
204
- padding: var(--space-sm);
204
+ padding: var(--space-xs);
205
205
  text-align: right;
206
206
  white-space: nowrap;
207
207
  }
@@ -225,7 +225,7 @@ import UiContent from "../components/UIContent.svelte";
225
225
  flex-wrap: wrap;
226
226
  justify-content: start;
227
227
  align-items: start;
228
- gap: var(--space-sm);
228
+ gap: var(--space-xs);
229
229
  }
230
230
  .DayName {
231
231
  display: flex;
@@ -242,7 +242,7 @@ import UiContent from "../components/UIContent.svelte";
242
242
  align-items: center;
243
243
  border: var(--border-size-thin) solid var(--border-color);
244
244
  border-radius: calc(var(--border-radius-sm) / 2);
245
- padding: var(--space-050);
245
+ padding: var(--space-xs);
246
246
  line-height: 1;
247
247
  text-box: trim-both cap alphabetic;
248
248
  }
@@ -272,7 +272,7 @@ import UiContent from "../components/UIContent.svelte";
272
272
  font-size: 0.85em;
273
273
  font-weight: 400;
274
274
  opacity: 0.5;
275
- padding: var(--space-sm);
275
+ padding: var(--space-xs);
276
276
  margin: 0;
277
277
  height: 100%;
278
278
  line-height: 1.5;
@@ -283,7 +283,7 @@ import UiContent from "../components/UIContent.svelte";
283
283
  font-weight: 500;
284
284
  font-size: 1.5em;
285
285
  border: none;
286
- padding: var(--space-md) var(--space-sm);
286
+ padding: var(--space-md) var(--space-xs);
287
287
  line-height: 1.5;
288
288
  width: 100%;
289
289
  text-box: trim-both cap alphabetic;
package/dist/form/FieldContent.svelte CHANGED
@@ -105,11 +105,11 @@
105
105
  .FieldContentContainer {
106
106
  display: flex;
107
107
  flex-direction: column;
108
- gap: var(--form-field-gap, var(--space-sm));
108
+ gap: var(--form-field-gap, var(--space-xs));
109
109
  }
110
110
  .FieldContent {
111
111
  display: flex;
112
- gap: var(--form-label-gap, var(--space-sm));
112
+ gap: var(--form-label-gap, var(--space-xs));
113
113
  flex-direction: column;
114
114
  font-size: 1em;
115
115
  }
@@ -159,10 +159,10 @@
159
159
  border-color: var(--focus-ring-color-invalid);
160
160
  }
161
161
  .Field.hasPrefix :global(input) {
162
- padding-inline-start: var(--space-025);
162
+ padding-inline-start: var(--space-xxs);
163
163
  }
164
164
  .Field :global(button) {
165
- margin-right: var(--space-025);
165
+ margin-right: var(--space-xxs);
166
166
  }
167
167
  .Field :global(button:focus-visible) {
168
168
  outline: var(--focus-outline);
package/dist/form/FormActions.svelte CHANGED
@@ -30,7 +30,7 @@
30
30
  .FormActions {
31
31
  display: grid;
32
32
  background: color-mix(in srgb, var(--form-background-actions) calc(var(--fcc) * 100%), transparent);
33
- padding: calc(var(--space-md) * var(--fcc)) calc(var(--space-lg) * var(--fcc));
33
+ padding: calc(var(--space-md) * var(--fcc)) calc(var(--space-xl) * var(--fcc));
34
34
  grid-column: 1 / -1;
35
35
  grid-template-columns: subgrid;
36
36
  border-bottom-left-radius: inherit;
@@ -66,7 +66,7 @@
66
66
  @container (max-width: 480px) {
67
67
  .FormActions {
68
68
  justify-content: center;
69
- gap: var(--space-sm);
69
+ gap: var(--space-xs);
70
70
  }
71
71
  .Info {
72
72
  order: 1;
package/dist/form/FormSection.svelte CHANGED
@@ -48,7 +48,7 @@
48
48
  grid-column: 1 / -1;
49
49
  padding-block: calc(var(--fcc) * var(--form-padding-block));
50
50
  padding-inline: calc(var(--fcc) * var(--form-padding-inline));
51
- gap: var(--form-section-gap, var(--space-lg));
51
+ gap: var(--form-section-gap, var(--space-xl));
52
52
  }
53
53
  .FormSectionTitle {
54
54
  display: flex;
@@ -62,28 +62,28 @@
62
62
  }
63
63
  .FormSectionContent {
64
64
  display: grid;
65
- gap: var(--form-field-gap, var(--space-lg));
65
+ gap: var(--form-field-gap, var(--space-xl));
66
66
  }
67
67
  .FormSection.noTitle .FormSectionContent {
68
68
  grid-column: 1 / -1;
69
69
  }
70
70
  @media(max-width: 1280px) {
71
71
  .FormSection {
72
- padding: var(--space-lg);
72
+ padding: var(--space-xl);
73
73
  gap: var(--space-md);
74
74
  }
75
75
  .FormSectionTitle {
76
- gap: var(--space-sm);
76
+ gap: var(--space-xs);
77
77
  padding-block-end: var(--space-md);
78
78
  }
79
79
  }
80
80
  @media(max-width: 640px) {
81
81
  .FormSection {
82
- padding: var(--space-md);
82
+ padding: var(--space-xl);
83
83
  gap: var(--space-md);
84
84
  }
85
85
  .FormSectionTitle {
86
- gap: var(--space-sm);
86
+ gap: var(--space-xs);
87
87
  padding-block-end: var(--space-md);
88
88
  }
89
89
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lutra",
3
- "version": "0.1.14",
3
+ "version": "0.1.16",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "vite build && npm run package",