@salmexio/ui 0.3.0 → 0.4.0

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 (18) hide show
  1. package/dist/dialogs/ContextMenu/ContextMenu.svelte +4 -4
  2. package/dist/dialogs/Modal/Modal.svelte +23 -9
  3. package/dist/feedback/Alert/Alert.svelte +19 -19
  4. package/dist/feedback/Spinner/Spinner.svelte +4 -5
  5. package/dist/forms/Checkbox/Checkbox.svelte +12 -11
  6. package/dist/forms/Select/Select.svelte +16 -15
  7. package/dist/forms/TextInput/TextInput.svelte +18 -18
  8. package/dist/layout/Card/Card.svelte +7 -8
  9. package/dist/navigation/CommandPalette/CommandPalette.svelte +18 -7
  10. package/dist/navigation/Tabs/Tabs.svelte +40 -26
  11. package/dist/navigation/Tabs/Tabs.svelte.d.ts +6 -0
  12. package/dist/navigation/Tabs/Tabs.svelte.d.ts.map +1 -1
  13. package/dist/primitives/Badge/Badge.svelte +3 -4
  14. package/dist/primitives/Button/Button.svelte +53 -72
  15. package/dist/styles/tokens.css +31 -22
  16. package/dist/windowing/Window/Window.svelte +45 -10
  17. package/dist/windowing/WindowManager/WindowManager.svelte +23 -8
  18. package/package.json +1 -1
package/dist/dialogs/ContextMenu/ContextMenu.svelte CHANGED
@@ -383,11 +383,12 @@ onMount(() => {
383
383
  min-width: 180px;
384
384
  max-width: 320px;
385
385
  background: rgb(var(--salmex-bg-primary));
386
- border: 3px solid rgb(var(--salmex-border-dark));
386
+ border: 2px solid rgb(var(--salmex-border-dark));
387
+ border-radius: var(--salmex-radius-md);
387
388
  box-shadow:
388
389
  inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
389
390
  inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
390
- 5px 5px 0 rgb(0 0 0 / 0.35);
391
+ 4px 4px 2px rgb(0 0 0 / 0.3);
391
392
  padding: var(--salmex-space-1) 0;
392
393
  outline: none;
393
394
  font-family: var(--salmex-font-system);
@@ -397,7 +398,7 @@ onMount(() => {
397
398
  box-shadow:
398
399
  inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
399
400
  inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
400
- 5px 5px 0 rgb(0 0 0 / 0.7);
401
+ 4px 4px 2px rgb(0 0 0 / 0.6);
401
402
  }
402
403
 
403
404
  /* ========================================
@@ -504,7 +505,6 @@ onMount(() => {
504
505
  padding: var(--salmex-space-2) var(--salmex-space-4) var(--salmex-space-1);
505
506
  font-size: var(--salmex-font-size-xs);
506
507
  font-weight: 700;
507
- text-transform: uppercase;
508
508
  letter-spacing: 0.4px;
509
509
  color: rgb(var(--salmex-text-secondary));
510
510
  user-select: none;
package/dist/dialogs/Modal/Modal.svelte CHANGED
@@ -254,12 +254,23 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
254
254
  width: 100%;
255
255
  max-height: calc(100vh - 2rem);
256
256
  background: rgb(var(--salmex-window-surface));
257
- border: 3px solid rgb(var(--salmex-button-dark-edge));
258
- box-shadow: var(--salmex-shadow-lg);
257
+ border: 2px solid rgb(var(--salmex-button-dark-edge));
258
+ border-radius: var(--salmex-radius-md);
259
+ box-shadow:
260
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
261
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
262
+ var(--salmex-shadow-lg);
259
263
  animation: salmex-modal-scale-in var(--salmex-transition-slow) ease-out;
260
264
  overflow: hidden;
261
265
  }
262
266
 
267
+ :global([data-theme='dark']) .salmex-modal-container {
268
+ box-shadow:
269
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
270
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
271
+ 4px 4px 3px rgb(0 0 0 / 0.5);
272
+ }
273
+
263
274
  @keyframes salmex-modal-scale-in {
264
275
  from {
265
276
  opacity: 0;
@@ -308,7 +319,8 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
308
319
  rgb(var(--salmex-titlebar-bold))
309
320
  );
310
321
  color: rgb(var(--salmex-chalk-white));
311
- border-bottom: 3px solid rgb(var(--salmex-button-dark-edge));
322
+ border-bottom: 2px solid rgb(var(--salmex-button-dark-edge));
323
+ border-radius: calc(var(--salmex-radius-md) - 2px) calc(var(--salmex-radius-md) - 2px) 0 0;
312
324
  flex-shrink: 0;
313
325
  font-family: var(--salmex-font-display);
314
326
  }
@@ -316,8 +328,8 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
316
328
  :global([data-theme='dark']) .salmex-modal-header {
317
329
  background: linear-gradient(
318
330
  90deg,
319
- rgb(0 100 220),
320
- rgb(0 140 255)
331
+ rgb(0 75 180),
332
+ rgb(0 105 210)
321
333
  );
322
334
  }
323
335
 
@@ -336,9 +348,9 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
336
348
  margin: 0;
337
349
  font-size: var(--salmex-font-size-md);
338
350
  font-weight: 900;
339
- text-transform: uppercase;
340
351
  letter-spacing: 0.5px;
341
352
  line-height: 1.3;
353
+ text-shadow: 1px 1px 2px rgb(0 0 0 / 0.3);
342
354
  }
343
355
 
344
356
  .salmex-modal-close {
@@ -349,7 +361,8 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
349
361
  height: 32px;
350
362
  padding: 0;
351
363
  background: rgb(var(--salmex-button-face));
352
- border: 2px solid rgb(var(--salmex-button-dark-edge));
364
+ border: 1px solid rgb(var(--salmex-button-dark-edge));
365
+ border-radius: var(--salmex-radius-sm);
353
366
  color: rgb(var(--salmex-text-primary));
354
367
  cursor: pointer;
355
368
  flex-shrink: 0;
@@ -379,7 +392,7 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
379
392
  inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
380
393
  2px 2px 0 rgb(0 0 0 / 0.3),
381
394
  0 0 0 2px rgb(var(--salmex-midnight-black)),
382
- 0 0 0 5px rgb(var(--salmex-crown-yellow));
395
+ 0 0 2px 4px rgb(var(--salmex-crown-yellow));
383
396
  }
384
397
 
385
398
  .salmex-modal-body {
@@ -396,7 +409,8 @@ const closeLabel = $derived(closeBtnAriaLabel ?? 'Close dialog');
396
409
  justify-content: flex-end;
397
410
  gap: var(--salmex-space-3);
398
411
  padding: var(--salmex-space-4);
399
- border-top: 3px solid rgb(var(--salmex-button-dark-edge));
412
+ border-top: 2px solid rgb(var(--salmex-button-dark-edge));
413
+ border-radius: 0 0 calc(var(--salmex-radius-md) - 2px) calc(var(--salmex-radius-md) - 2px);
400
414
  background: rgb(var(--salmex-bg-secondary));
401
415
  flex-shrink: 0;
402
416
  }
package/dist/feedback/Alert/Alert.svelte CHANGED
@@ -162,20 +162,20 @@ function toggleExpanded() {
162
162
  display: flex;
163
163
  gap: var(--salmex-space-3);
164
164
  padding: var(--salmex-space-4);
165
- border: 3px solid transparent;
165
+ border: 2px solid transparent;
166
166
  font-family: var(--salmex-font-system);
167
167
  transition: box-shadow var(--salmex-transition-fast);
168
- border-radius: var(--salmex-radius-none);
168
+ border-radius: var(--salmex-radius-sm);
169
169
  /* Inner depth + flat outer shadow */
170
170
  box-shadow:
171
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
172
- inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
171
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
172
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
173
173
  var(--salmex-shadow-md);
174
174
  background: rgb(var(--salmex-window-surface));
175
175
  }
176
176
 
177
177
  .salmex-alert-standard {
178
- border-radius: var(--salmex-radius-none);
178
+ border-radius: var(--salmex-radius-sm);
179
179
  }
180
180
 
181
181
  .salmex-alert-slim {
@@ -211,7 +211,6 @@ function toggleExpanded() {
211
211
  font-weight: 800;
212
212
  line-height: 1.4;
213
213
  margin: 0 0 var(--salmex-space-1);
214
- text-transform: uppercase;
215
214
  letter-spacing: 0.5px;
216
215
  }
217
216
 
@@ -256,11 +255,11 @@ function toggleExpanded() {
256
255
 
257
256
  .salmex-alert-title-btn:focus-visible {
258
257
  outline: none;
259
- box-shadow: 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 0 5px rgb(var(--salmex-crown-yellow));
258
+ box-shadow: 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 2px 4px rgb(var(--salmex-crown-yellow));
260
259
  }
261
260
 
262
261
  :global([data-theme='dark']) .salmex-alert-title-btn:focus-visible {
263
- box-shadow: 0 0 0 3px rgb(var(--salmex-crown-yellow));
262
+ box-shadow: 0 0 2px 3px rgb(var(--salmex-crown-yellow));
264
263
  }
265
264
 
266
265
  .salmex-alert-expand-icon {
@@ -277,14 +276,15 @@ function toggleExpanded() {
277
276
  justify-content: center;
278
277
  padding: var(--salmex-space-1);
279
278
  margin: -2px -2px -2px 0;
280
- border: 2px solid rgb(var(--salmex-border-dark));
279
+ border: 1px solid rgb(var(--salmex-border-dark));
280
+ border-radius: var(--salmex-radius-sm);
281
281
  background: rgb(var(--salmex-button-face));
282
282
  color: rgb(var(--salmex-text-primary));
283
283
  cursor: pointer;
284
284
  transition: all var(--salmex-transition-fast);
285
285
  box-shadow:
286
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
287
- inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
286
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
287
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
288
288
  1px 1px 0 rgb(0 0 0 / 0.2);
289
289
  }
290
290
 
@@ -295,8 +295,8 @@ function toggleExpanded() {
295
295
 
296
296
  .salmex-alert-dismiss:active {
297
297
  box-shadow:
298
- inset -2px -2px 0 rgb(var(--salmex-button-highlight)),
299
- inset 2px 2px 0 rgb(var(--salmex-button-shadow)),
298
+ inset -1px -1px 0 rgb(var(--salmex-button-highlight)),
299
+ inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
300
300
  1px 1px 0 rgb(0 0 0 / 0.2);
301
301
  transform: translate(1px, 1px);
302
302
  }
@@ -304,17 +304,17 @@ function toggleExpanded() {
304
304
  .salmex-alert-dismiss:focus-visible {
305
305
  outline: none;
306
306
  box-shadow:
307
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
308
- inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
307
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
308
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
309
309
  0 0 0 2px rgb(var(--salmex-midnight-black)),
310
- 0 0 0 5px rgb(var(--salmex-crown-yellow));
310
+ 0 0 2px 4px rgb(var(--salmex-crown-yellow));
311
311
  }
312
312
 
313
313
  :global([data-theme='dark']) .salmex-alert-dismiss:focus-visible {
314
314
  box-shadow:
315
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
316
- inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
317
- 0 0 0 3px rgb(var(--salmex-crown-yellow));
315
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
316
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
317
+ 0 0 2px 3px rgb(var(--salmex-crown-yellow));
318
318
  }
319
319
 
320
320
  /* Type colors — panel + left accent; canvas base, bold borders */
package/dist/feedback/Spinner/Spinner.svelte CHANGED
@@ -180,7 +180,6 @@ const config = $derived(sizeConfig[size]);
180
180
  .salmex-spinner-label {
181
181
  font-family: var(--salmex-font-system);
182
182
  font-weight: 700;
183
- text-transform: uppercase;
184
183
  letter-spacing: 0.3px;
185
184
  color: rgb(var(--salmex-text-secondary));
186
185
  }
@@ -207,12 +206,12 @@ const config = $derived(sizeConfig[size]);
207
206
  z-index: var(--salmex-z-modal-backdrop);
208
207
  border-radius: inherit;
209
208
  /* Flat, bold overlay edge - no blur */
210
- box-shadow: inset 0 0 0 3px rgb(var(--salmex-border-default));
209
+ box-shadow: inset 0 0 0 2px rgb(var(--salmex-border-default));
211
210
  }
212
211
 
213
212
  :global([data-theme='dark']) .salmex-spinner-overlay {
214
213
  background: rgb(var(--salmex-midnight-black) / 0.9);
215
- box-shadow: inset 0 0 0 3px rgb(var(--salmex-border-light));
214
+ box-shadow: inset 0 0 0 2px rgb(var(--salmex-border-light));
216
215
  }
217
216
 
218
217
  /* Variants - crown yellow / electric blue, bold */
@@ -287,7 +286,7 @@ const config = $derived(sizeConfig[size]);
287
286
  .salmex-spinner-dot {
288
287
  width: var(--dot-size);
289
288
  height: var(--dot-size);
290
- border-radius: var(--salmex-radius-sm);
289
+ border-radius: 50%;
291
290
  background: currentColor;
292
291
  box-shadow: var(--salmex-shadow-sm);
293
292
  animation: salmex-dot-bounce 1s ease-out infinite both;
@@ -336,7 +335,7 @@ const config = $derived(sizeConfig[size]);
336
335
  .salmex-pulse-dot {
337
336
  width: 28%;
338
337
  height: 28%;
339
- border-radius: var(--salmex-radius-sm);
338
+ border-radius: 50%;
340
339
  background: currentColor;
341
340
  box-shadow: var(--salmex-shadow-sm);
342
341
  animation: salmex-pulse-dot 1.5s ease-out infinite;
package/dist/forms/Checkbox/Checkbox.svelte CHANGED
@@ -184,10 +184,11 @@ function handleChange(e: Event) {
184
184
  align-items: center;
185
185
  justify-content: center;
186
186
  background: rgb(var(--salmex-button-face));
187
- border: 2px solid rgb(var(--salmex-button-dark-edge));
187
+ border: 1px solid rgb(var(--salmex-button-dark-edge));
188
+ border-radius: var(--salmex-radius-sm);
188
189
  box-shadow:
189
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
190
- inset -2px -2px 0 rgb(var(--salmex-button-shadow));
190
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
191
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow));
191
192
  transition: background var(--salmex-transition-fast), border-color var(--salmex-transition-fast),
192
193
  box-shadow var(--salmex-transition-fast);
193
194
  color: rgb(var(--salmex-chalk-white));
@@ -223,8 +224,8 @@ function handleChange(e: Event) {
223
224
  background: rgb(var(--salmex-electric-blue));
224
225
  border-color: rgb(var(--salmex-button-dark-edge));
225
226
  box-shadow:
226
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
227
- inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
227
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
228
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
228
229
  0 0 0 2px rgb(var(--salmex-border-dark));
229
230
  }
230
231
 
@@ -246,17 +247,17 @@ function handleChange(e: Event) {
246
247
  /* Focus — crown yellow ring (design system) */
247
248
  .salmex-checkbox-input:focus-visible + .salmex-checkbox-box {
248
249
  box-shadow:
249
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
250
- inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
250
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
251
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
251
252
  0 0 0 2px rgb(var(--salmex-midnight-black)),
252
- 0 0 0 5px rgb(var(--salmex-crown-yellow));
253
+ 0 0 2px 4px rgb(var(--salmex-crown-yellow));
253
254
  }
254
255
 
255
256
  :global([data-theme='dark']) .salmex-checkbox-input:focus-visible + .salmex-checkbox-box {
256
257
  box-shadow:
257
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
258
- inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
259
- 0 0 0 3px rgb(var(--salmex-crown-yellow));
258
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
259
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
260
+ 0 0 2px 3px rgb(var(--salmex-crown-yellow));
260
261
  }
261
262
 
262
263
  /* High contrast / forced colors: solid outline so focus is visible (APG) */
package/dist/forms/Select/Select.svelte CHANGED
@@ -600,7 +600,6 @@ onMount(() => {
600
600
  .salmex-select-label {
601
601
  font-size: var(--salmex-font-size-sm);
602
602
  font-weight: 700;
603
- text-transform: uppercase;
604
603
  letter-spacing: 0.3px;
605
604
  color: rgb(var(--salmex-text-primary));
606
605
  }
@@ -631,7 +630,8 @@ onMount(() => {
631
630
  justify-content: space-between;
632
631
  gap: var(--salmex-space-2);
633
632
  width: 100%;
634
- border: 2px solid rgb(var(--salmex-border-dark));
633
+ border: 1px solid rgb(var(--salmex-border-dark));
634
+ border-radius: var(--salmex-radius-sm);
635
635
  background: rgb(var(--salmex-bg-primary));
636
636
  color: rgb(var(--salmex-text-primary));
637
637
  font-family: var(--salmex-font-system);
@@ -641,7 +641,7 @@ onMount(() => {
641
641
  transition: all var(--salmex-transition-fast);
642
642
  /* Sunken inset — same as TextInput */
643
643
  box-shadow:
644
- inset 2px 2px 0 rgb(var(--salmex-button-shadow)),
644
+ inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
645
645
  inset -1px -1px 0 rgb(var(--salmex-button-highlight));
646
646
  }
647
647
 
@@ -653,17 +653,17 @@ onMount(() => {
653
653
  outline: none;
654
654
  border-color: rgb(var(--salmex-text-primary));
655
655
  box-shadow:
656
- inset 2px 2px 0 rgb(var(--salmex-button-shadow)),
656
+ inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
657
657
  inset -1px -1px 0 rgb(var(--salmex-button-highlight)),
658
658
  0 0 0 2px rgb(var(--salmex-midnight-black)),
659
- 0 0 0 5px rgb(var(--salmex-crown-yellow));
659
+ 0 0 2px 4px rgb(var(--salmex-crown-yellow));
660
660
  }
661
661
 
662
662
  :global([data-theme='dark']) .salmex-select-trigger:focus-visible {
663
663
  box-shadow:
664
- inset 2px 2px 0 rgb(var(--salmex-button-shadow)),
664
+ inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
665
665
  inset -1px -1px 0 rgb(var(--salmex-button-highlight)),
666
- 0 0 0 3px rgb(var(--salmex-crown-yellow));
666
+ 0 0 2px 3px rgb(var(--salmex-crown-yellow));
667
667
  }
668
668
 
669
669
  .salmex-select-trigger-open {
@@ -684,19 +684,19 @@ onMount(() => {
684
684
  SIZES
685
685
  ======================================== */
686
686
  .salmex-select-sm .salmex-select-trigger {
687
- min-height: 28px;
687
+ min-height: 24px;
688
688
  padding: 0 var(--salmex-space-3);
689
689
  font-size: var(--salmex-font-size-xs);
690
690
  }
691
691
 
692
692
  .salmex-select-md .salmex-select-trigger {
693
- min-height: 36px;
693
+ min-height: 32px;
694
694
  padding: 0 var(--salmex-space-4);
695
695
  font-size: var(--salmex-font-size-base);
696
696
  }
697
697
 
698
698
  .salmex-select-lg .salmex-select-trigger {
699
- min-height: 44px;
699
+ min-height: 40px;
700
700
  padding: 0 var(--salmex-space-5);
701
701
  font-size: var(--salmex-font-size-md);
702
702
  }
@@ -735,11 +735,12 @@ onMount(() => {
735
735
  overflow-y: auto;
736
736
  overflow-x: hidden;
737
737
  background: rgb(var(--salmex-bg-primary));
738
- border: 3px solid rgb(var(--salmex-border-dark));
738
+ border: 2px solid rgb(var(--salmex-border-dark));
739
+ border-radius: var(--salmex-radius-md);
739
740
  box-shadow:
740
741
  inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
741
742
  inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
742
- 5px 5px 0 rgb(0 0 0 / 0.35);
743
+ 4px 4px 2px rgb(0 0 0 / 0.3);
743
744
  outline: none;
744
745
  padding: var(--salmex-space-1) 0;
745
746
  font-family: var(--salmex-font-system);
@@ -749,7 +750,7 @@ onMount(() => {
749
750
  box-shadow:
750
751
  inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
751
752
  inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
752
- 5px 5px 0 rgb(0 0 0 / 0.7);
753
+ 4px 4px 2px rgb(0 0 0 / 0.6);
753
754
  }
754
755
 
755
756
  /* ========================================
@@ -822,7 +823,8 @@ onMount(() => {
822
823
  justify-content: center;
823
824
  width: 16px;
824
825
  height: 16px;
825
- border: 2px solid rgb(var(--salmex-border-dark));
826
+ border: 1px solid rgb(var(--salmex-border-dark));
827
+ border-radius: var(--salmex-radius-sm);
826
828
  background: rgb(var(--salmex-bg-primary));
827
829
  box-shadow:
828
830
  inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
@@ -844,7 +846,6 @@ onMount(() => {
844
846
  padding: var(--salmex-space-2) var(--salmex-space-4) var(--salmex-space-1);
845
847
  font-size: var(--salmex-font-size-xs);
846
848
  font-weight: 700;
847
- text-transform: uppercase;
848
849
  letter-spacing: 0.4px;
849
850
  color: rgb(var(--salmex-text-secondary));
850
851
  user-select: none;
package/dist/forms/TextInput/TextInput.svelte CHANGED
@@ -305,9 +305,8 @@ function handleKeyDown(e: KeyboardEvent) {
305
305
 
306
306
  .salmex-input-label {
307
307
  font-family: var(--salmex-font-system);
308
- font-weight: 700;
308
+ font-weight: 600;
309
309
  font-size: var(--salmex-font-size-sm);
310
- text-transform: uppercase;
311
310
  letter-spacing: 0.3px;
312
311
  color: rgb(var(--salmex-text-primary));
313
312
  }
@@ -333,10 +332,11 @@ function handleKeyDown(e: KeyboardEvent) {
333
332
  display: flex;
334
333
  align-items: center;
335
334
  background: rgb(var(--salmex-button-face));
336
- border: 2px solid rgb(var(--salmex-border-dark));
335
+ border: 1px solid rgb(var(--salmex-border-dark));
336
+ border-radius: var(--salmex-radius-sm);
337
337
  box-shadow:
338
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
339
- inset -2px -2px 0 rgb(var(--salmex-button-shadow));
338
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
339
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow));
340
340
  transition: box-shadow var(--salmex-transition-fast), border-color var(--salmex-transition-fast);
341
341
  }
342
342
 
@@ -344,18 +344,18 @@ function handleKeyDown(e: KeyboardEvent) {
344
344
  .salmex-input-focused {
345
345
  border-color: rgb(var(--salmex-midnight-black));
346
346
  box-shadow:
347
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
348
- inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
347
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
348
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
349
349
  0 0 0 2px rgb(var(--salmex-midnight-black)),
350
- 0 0 0 5px rgb(var(--salmex-crown-yellow));
350
+ 0 0 2px 4px rgb(var(--salmex-crown-yellow));
351
351
  }
352
352
 
353
353
  :global([data-theme='dark']) .salmex-input-focused {
354
354
  border-color: rgb(var(--salmex-border-light));
355
355
  box-shadow:
356
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
357
- inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
358
- 0 0 0 3px rgb(var(--salmex-crown-yellow));
356
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
357
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
358
+ 0 0 2px 3px rgb(var(--salmex-crown-yellow));
359
359
  }
360
360
 
361
361
  .salmex-input-error {
@@ -382,12 +382,12 @@ function handleKeyDown(e: KeyboardEvent) {
382
382
  font-size: var(--salmex-font-size-sm);
383
383
  font-weight: 600;
384
384
  color: rgb(var(--salmex-text-secondary));
385
- border-right: 2px solid rgb(var(--salmex-border-default));
385
+ border-right: 1px solid rgb(var(--salmex-border-default));
386
386
  }
387
387
 
388
388
  .salmex-input-suffix {
389
389
  border-right: none;
390
- border-left: 2px solid rgb(var(--salmex-border-default));
390
+ border-left: 1px solid rgb(var(--salmex-border-default));
391
391
  margin-left: 0;
392
392
  }
393
393
 
@@ -440,7 +440,7 @@ function handleKeyDown(e: KeyboardEvent) {
440
440
  }
441
441
 
442
442
  .salmex-input-sm .salmex-input-field-wrapper {
443
- min-height: 32px;
443
+ min-height: 28px;
444
444
  }
445
445
 
446
446
  .salmex-input-sm .salmex-input-field {
@@ -449,11 +449,11 @@ function handleKeyDown(e: KeyboardEvent) {
449
449
  }
450
450
 
451
451
  .salmex-input-md .salmex-input-field-wrapper {
452
- min-height: 40px;
452
+ min-height: 36px;
453
453
  }
454
454
 
455
455
  .salmex-input-lg .salmex-input-field-wrapper {
456
- min-height: 48px;
456
+ min-height: 44px;
457
457
  }
458
458
 
459
459
  .salmex-input-lg .salmex-input-field {
@@ -525,12 +525,12 @@ function handleKeyDown(e: KeyboardEvent) {
525
525
  .salmex-input-clear:focus-visible,
526
526
  .salmex-input-password-toggle:focus-visible {
527
527
  outline: none;
528
- box-shadow: 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 0 5px rgb(var(--salmex-crown-yellow));
528
+ box-shadow: 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 2px 4px rgb(var(--salmex-crown-yellow));
529
529
  }
530
530
 
531
531
  :global([data-theme='dark']) .salmex-input-clear:focus-visible,
532
532
  :global([data-theme='dark']) .salmex-input-password-toggle:focus-visible {
533
- box-shadow: 0 0 0 3px rgb(var(--salmex-crown-yellow));
533
+ box-shadow: 0 0 2px 3px rgb(var(--salmex-crown-yellow));
534
534
  }
535
535
 
536
536
  .salmex-input-footer {
package/dist/layout/Card/Card.svelte CHANGED
@@ -96,10 +96,10 @@ const currentPadding = $derived(paddingValues[padding]);
96
96
  .salmex-card {
97
97
  position: relative;
98
98
  overflow: hidden;
99
- border-radius: var(--salmex-radius-none);
99
+ border-radius: var(--salmex-radius-sm);
100
100
  background: rgb(var(--salmex-window-surface));
101
- /* Bold 3px border, flat shadow — Win2K × Basquiat */
102
- border: 3px solid rgb(var(--salmex-border-dark));
101
+ /* Bold 2px border, flat shadow — Win2K × Basquiat */
102
+ border: 2px solid rgb(var(--salmex-border-dark));
103
103
  box-shadow: var(--salmex-shadow-lg);
104
104
  }
105
105
 
@@ -116,14 +116,13 @@ const currentPadding = $derived(paddingValues[padding]);
116
116
  }
117
117
 
118
118
  .salmex-card-header {
119
- border-bottom: 2px solid rgb(var(--salmex-border-default));
119
+ border-bottom: 1px solid rgb(var(--salmex-border-default));
120
120
  font-weight: 700;
121
- text-transform: uppercase;
122
121
  letter-spacing: 0.3px;
123
122
  }
124
123
 
125
124
  .salmex-card-footer {
126
- border-top: 2px solid rgb(var(--salmex-border-default));
125
+ border-top: 1px solid rgb(var(--salmex-border-default));
127
126
  }
128
127
 
129
128
  .salmex-card-content {
@@ -132,12 +131,12 @@ const currentPadding = $derived(paddingValues[padding]);
132
131
 
133
132
  /* Dark mode — heavier shadow (flat shadow on near-black bg is invisible) */
134
133
  :global([data-theme='dark']) .salmex-card {
135
- box-shadow: 5px 5px 0 rgb(0 0 0 / 0.7);
134
+ box-shadow: 4px 4px 2px rgb(0 0 0 / 0.6);
136
135
  }
137
136
 
138
137
  @media (prefers-color-scheme: dark) {
139
138
  :global(:root:not([data-theme='light'])) .salmex-card {
140
- box-shadow: 5px 5px 0 rgb(0 0 0 / 0.7);
139
+ box-shadow: 4px 4px 2px rgb(0 0 0 / 0.6);
141
140
  }
142
141
  }
143
142
  </style>
package/dist/navigation/CommandPalette/CommandPalette.svelte CHANGED
@@ -365,11 +365,12 @@ function getCumulativeIndex(groupIdx: number, itemIdx: number): number {
365
365
  display: flex;
366
366
  flex-direction: column;
367
367
  background: rgb(var(--salmex-window-surface));
368
- border: 3px solid rgb(var(--salmex-border-dark));
368
+ border: 2px solid rgb(var(--salmex-border-dark));
369
+ border-radius: var(--salmex-radius-lg);
369
370
  box-shadow:
370
371
  inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
371
372
  inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
372
- 8px 8px 0 rgb(0 0 0 / 0.4);
373
+ 6px 6px 4px rgb(0 0 0 / 0.35);
373
374
  font-family: var(--salmex-font-system);
374
375
  overflow: hidden;
375
376
  }
@@ -378,7 +379,7 @@ function getCumulativeIndex(groupIdx: number, itemIdx: number): number {
378
379
  box-shadow:
379
380
  inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
380
381
  inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
381
- 8px 8px 0 rgb(0 0 0 / 0.7);
382
+ 6px 6px 4px rgb(0 0 0 / 0.6);
382
383
  }
383
384
 
384
385
  /* ========================================
@@ -390,6 +391,10 @@ function getCumulativeIndex(groupIdx: number, itemIdx: number): number {
390
391
  gap: var(--salmex-space-3);
391
392
  padding: var(--salmex-space-4) var(--salmex-space-5);
392
393
  border-bottom: 1px solid rgb(var(--salmex-border-default));
394
+ background: rgb(var(--salmex-button-face));
395
+ box-shadow:
396
+ inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
397
+ inset -1px -1px 0 rgb(var(--salmex-button-highlight));
393
398
  }
394
399
 
395
400
  .salmex-cmd-search-icon {
@@ -400,13 +405,18 @@ function getCumulativeIndex(groupIdx: number, itemIdx: number): number {
400
405
 
401
406
  .salmex-cmd-input {
402
407
  flex: 1;
408
+ min-width: 0;
403
409
  border: none;
404
410
  background: transparent;
405
411
  outline: none;
406
412
  font-family: var(--salmex-font-system);
407
- font-size: var(--salmex-font-size-md);
408
- font-weight: 600;
413
+ font-size: var(--salmex-font-size-base);
409
414
  color: rgb(var(--salmex-text-primary));
415
+ padding: var(--salmex-space-2) 0;
416
+ }
417
+
418
+ .salmex-cmd-input:focus-visible {
419
+ box-shadow: none;
410
420
  }
411
421
 
412
422
  .salmex-cmd-input::placeholder {
@@ -419,7 +429,8 @@ function getCumulativeIndex(groupIdx: number, itemIdx: number): number {
419
429
  font-size: var(--salmex-font-size-xs);
420
430
  font-weight: 700;
421
431
  padding: 2px 6px;
422
- border: 2px solid rgb(var(--salmex-border-default));
432
+ border: 1px solid rgb(var(--salmex-border-default));
433
+ border-radius: var(--salmex-radius-sm);
423
434
  background: rgb(var(--salmex-button-face));
424
435
  color: rgb(var(--salmex-text-secondary));
425
436
  box-shadow:
@@ -454,7 +465,6 @@ function getCumulativeIndex(groupIdx: number, itemIdx: number): number {
454
465
  font-family: var(--salmex-font-mono);
455
466
  font-size: 10px;
456
467
  font-weight: 600;
457
- text-transform: uppercase;
458
468
  letter-spacing: 0.8px;
459
469
  color: rgb(var(--salmex-text-disabled));
460
470
  border-top: 1px solid rgb(var(--salmex-border-light));
@@ -559,6 +569,7 @@ function getCumulativeIndex(groupIdx: number, itemIdx: number): number {
559
569
  font-weight: 700;
560
570
  padding: 1px 4px;
561
571
  border: 1px solid rgb(var(--salmex-border-default));
572
+ border-radius: var(--salmex-radius-sm);
562
573
  background: rgb(var(--salmex-button-face));
563
574
  font-size: 0.9em;
564
575
  }