@salmexio/ui 0.3.1 → 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 (16) 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 +28 -26
  11. package/dist/primitives/Badge/Badge.svelte +3 -4
  12. package/dist/primitives/Button/Button.svelte +53 -72
  13. package/dist/styles/tokens.css +31 -22
  14. package/dist/windowing/Window/Window.svelte +45 -10
  15. package/dist/windowing/WindowManager/WindowManager.svelte +23 -8
  16. package/package.json +1 -1
package/dist/navigation/Tabs/Tabs.svelte CHANGED
@@ -214,15 +214,15 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
214
214
  }
215
215
 
216
216
  .salmex-tabs-list-sm {
217
- min-height: 52px;
217
+ min-height: 48px;
218
218
  }
219
219
 
220
220
  .salmex-tabs-list-md {
221
- min-height: 58px;
221
+ min-height: 54px;
222
222
  }
223
223
 
224
224
  .salmex-tabs-list-lg {
225
- min-height: 64px;
225
+ min-height: 60px;
226
226
  }
227
227
 
228
228
  /* ========================================
@@ -251,20 +251,20 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
251
251
  /* Move all unselected tabs up more */
252
252
  transform: translateY(-8px);
253
253
 
254
- /* Simplified 3D - just 2px inset, cleaner look */
254
+ /* Simplified 3D - just 1px inset, cleaner look */
255
255
  box-shadow:
256
256
  /* Top-left highlight */
257
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
257
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
258
258
  /* Bottom-right shadow */
259
- inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
259
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
260
260
  /* Flat shadow - Basquiat style */
261
- 3px 3px 0 rgb(0 0 0 / 0.2);
261
+ 3px 3px 1px rgb(0 0 0 / 0.2);
262
262
 
263
263
  /* Always account for focus border space (transparent when not focused) */
264
264
  outline: 2px dashed transparent;
265
265
  outline-offset: 2px;
266
266
 
267
- border-radius: 0;
267
+ border-radius: var(--salmex-radius-sm) var(--salmex-radius-sm) 0 0;
268
268
  transition: all var(--salmex-transition-fast);
269
269
  }
270
270
 
@@ -289,17 +289,17 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
289
289
  background: rgb(var(--salmex-button-light));
290
290
  transform: translateY(-6px);
291
291
  box-shadow:
292
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
293
- inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
294
- 4px 4px 0 rgb(0 0 0 / 0.25);
292
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
293
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
294
+ 4px 4px 1px rgb(0 0 0 / 0.25);
295
295
  }
296
296
 
297
297
  /* Active (pressed) state - inverted shadow for tactile feedback */
298
298
  .salmex-tab:active:not(.salmex-tab-disabled):not(.salmex-tab-selected) {
299
299
  box-shadow:
300
300
  /* Inverted shadows for pressed effect */
301
- inset -2px -2px 0 rgb(var(--salmex-button-highlight)),
302
- inset 2px 2px 0 rgb(var(--salmex-button-shadow)),
301
+ inset -1px -1px 0 rgb(var(--salmex-button-highlight)),
302
+ inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
303
303
  /* Reduced flat shadow */
304
304
  1px 1px 0 rgb(0 0 0 / 0.3);
305
305
 
@@ -323,8 +323,8 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
323
323
 
324
324
  /* Subtle 3D on sides only - merges at bottom */
325
325
  box-shadow:
326
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
327
- inset -2px 0 0 rgb(var(--salmex-button-shadow));
326
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
327
+ inset -1px 0 0 rgb(var(--salmex-button-shadow));
328
328
  }
329
329
 
330
330
  /* Dark mode selected - bright blue text with lighter grey shadow */
@@ -339,20 +339,20 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
339
339
  .salmex-tab:focus-visible {
340
340
  outline: none;
341
341
  box-shadow:
342
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
343
- inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
344
- 3px 3px 0 rgb(0 0 0 / 0.2),
342
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
343
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
344
+ 3px 3px 1px rgb(0 0 0 / 0.2),
345
345
  0 0 0 2px rgb(var(--salmex-midnight-black)),
346
- 0 0 0 5px rgb(var(--salmex-crown-yellow));
346
+ 0 0 2px 4px rgb(var(--salmex-crown-yellow));
347
347
  z-index: 10;
348
348
  }
349
349
 
350
350
  :global([data-theme='dark']) .salmex-tab:focus-visible {
351
351
  box-shadow:
352
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
353
- inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
354
- 3px 3px 0 rgb(0 0 0 / 0.2),
355
- 0 0 0 3px rgb(var(--salmex-crown-yellow));
352
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
353
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
354
+ 3px 3px 1px rgb(0 0 0 / 0.2),
355
+ 0 0 2px 3px rgb(var(--salmex-crown-yellow));
356
356
  }
357
357
 
358
358
  .salmex-tab-disabled {
@@ -386,7 +386,7 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
386
386
  font-size: 11px;
387
387
  font-weight: 700;
388
388
  color: rgb(var(--salmex-text-secondary));
389
- border-radius: 0;
389
+ border-radius: var(--salmex-radius-xl);
390
390
  }
391
391
 
392
392
  .salmex-tab-selected .salmex-tab-badge {
@@ -413,11 +413,13 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
413
413
  position: relative;
414
414
  z-index: 1;
415
415
 
416
+ border-radius: 0 0 var(--salmex-radius-sm) var(--salmex-radius-sm);
417
+
416
418
  /* Simplified inset 3D effect */
417
419
  box-shadow:
418
420
  /* Inner shadows for depth */
419
- inset 2px 2px 0 rgb(var(--salmex-button-shadow)),
420
- inset -2px -2px 0 rgb(var(--salmex-button-highlight));
421
+ inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
422
+ inset -1px -1px 0 rgb(var(--salmex-button-highlight));
421
423
  }
422
424
 
423
425
  .salmex-tabs-panel-hidden {
package/dist/primitives/Badge/Badge.svelte CHANGED
@@ -87,17 +87,16 @@ let {
87
87
  gap: var(--salmex-space-1);
88
88
  font-family: var(--salmex-font-system);
89
89
  font-weight: 700;
90
- text-transform: uppercase;
91
90
  letter-spacing: 0.4px;
92
91
  white-space: nowrap;
93
92
  transition: box-shadow var(--salmex-transition-fast);
94
- border: 2px solid transparent;
95
- box-shadow: var(--salmex-shadow-sm);
93
+ border: 1px solid transparent;
94
+ box-shadow: none;
96
95
  }
97
96
 
98
97
  /* Stay sharp — minimal radius, Basquiat style */
99
98
  .salmex-badge:not(.salmex-badge-dot) {
100
- border-radius: var(--salmex-radius-none);
99
+ border-radius: var(--salmex-radius-md);
101
100
  }
102
101
 
103
102
  .salmex-badge-icon {
package/dist/primitives/Button/Button.svelte CHANGED
@@ -124,19 +124,18 @@ const isDisabled = $derived(disabled);
124
124
  /* Canvas-like button surface */
125
125
  background: rgb(var(--salmex-button-face));
126
126
  border: none;
127
-
127
+ border-radius: var(--salmex-radius-md);
128
+
128
129
  /* Bold 3D effect - stronger than original Win2K */
129
130
  box-shadow:
130
131
  /* Top-left highlight */
131
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
132
- inset 3px 3px 0 rgb(var(--salmex-button-light)),
132
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
133
133
  /* Bottom-right shadow */
134
- inset -2px -2px 0 rgb(var(--salmex-button-dark-edge)),
135
- inset -3px -3px 0 rgb(var(--salmex-button-shadow)),
134
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
136
135
  /* Outer bold border */
137
136
  0 0 0 2px rgb(var(--salmex-border-dark)),
138
137
  /* Flat shadow - Basquiat style */
139
- 4px 4px 0 rgb(0 0 0 / 0.25);
138
+ 4px 4px 1px rgb(0 0 0 / 0.25);
140
139
 
141
140
  transition: all var(--salmex-transition-fast);
142
141
  text-transform: uppercase;
@@ -147,25 +146,21 @@ const isDisabled = $derived(disabled);
147
146
  .salmex-btn:focus-visible {
148
147
  outline: none;
149
148
  box-shadow:
150
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
151
- inset 3px 3px 0 rgb(var(--salmex-button-light)),
152
- inset -2px -2px 0 rgb(var(--salmex-button-dark-edge)),
153
- inset -3px -3px 0 rgb(var(--salmex-button-shadow)),
149
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
150
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
154
151
  0 0 0 2px rgb(var(--salmex-border-dark)),
155
- 4px 4px 0 rgb(0 0 0 / 0.25),
152
+ 4px 4px 1px rgb(0 0 0 / 0.25),
156
153
  0 0 0 2px rgb(var(--salmex-midnight-black)),
157
- 0 0 0 5px rgb(var(--salmex-crown-yellow));
154
+ 0 0 2px 4px rgb(var(--salmex-crown-yellow));
158
155
  }
159
156
 
160
157
  :global([data-theme='dark']) .salmex-btn:focus-visible {
161
158
  box-shadow:
162
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
163
- inset 3px 3px 0 rgb(var(--salmex-button-light)),
164
- inset -2px -2px 0 rgb(var(--salmex-button-dark-edge)),
165
- inset -3px -3px 0 rgb(var(--salmex-button-shadow)),
159
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
160
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
166
161
  0 0 0 2px rgb(var(--salmex-border-dark)),
167
- 4px 4px 0 rgb(0 0 0 / 0.25),
168
- 0 0 0 3px rgb(var(--salmex-crown-yellow));
162
+ 4px 4px 1px rgb(0 0 0 / 0.25),
163
+ 0 0 2px 3px rgb(var(--salmex-crown-yellow));
169
164
  }
170
165
 
171
166
  /* Hover state - energetic highlight */
@@ -173,27 +168,23 @@ const isDisabled = $derived(disabled);
173
168
  background: rgb(var(--salmex-button-light));
174
169
  transform: translateY(-1px);
175
170
  box-shadow:
176
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
177
- inset 3px 3px 0 rgb(var(--salmex-button-light)),
178
- inset -2px -2px 0 rgb(var(--salmex-button-dark-edge)),
179
- inset -3px -3px 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)),
180
173
  0 0 0 2px rgb(var(--salmex-border-dark)),
181
- 5px 5px 0 rgb(0 0 0 / 0.3);
174
+ 5px 5px 1px rgb(0 0 0 / 0.3);
182
175
  }
183
176
 
184
177
  /* Active (pressed) state - inverted shadow */
185
178
  .salmex-btn:active:not(:disabled) {
186
179
  box-shadow:
187
180
  /* Inverted shadows */
188
- inset -2px -2px 0 rgb(var(--salmex-button-highlight)),
189
- inset -3px -3px 0 rgb(var(--salmex-button-light)),
190
- inset 2px 2px 0 rgb(var(--salmex-button-dark-edge)),
191
- inset 3px 3px 0 rgb(var(--salmex-button-shadow)),
181
+ inset -1px -1px 0 rgb(var(--salmex-button-highlight)),
182
+ inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
192
183
  0 0 0 2px rgb(var(--salmex-border-dark)),
193
- 2px 2px 0 rgb(0 0 0 / 0.3);
194
-
184
+ 2px 2px 1px rgb(0 0 0 / 0.3);
185
+
195
186
  /* Shift down-right for pressed effect */
196
- transform: translate(2px, 2px);
187
+ transform: translate(1px, 1px);
197
188
  }
198
189
 
199
190
  /* Disabled state */
@@ -208,36 +199,36 @@ const isDisabled = $derived(disabled);
208
199
  SIZE VARIANTS
209
200
  ======================================== */
210
201
  .salmex-btn-sm {
211
- height: 28px;
212
- padding: 0 var(--salmex-space-3);
202
+ height: 24px;
203
+ padding: 0 var(--salmex-space-2);
213
204
  font-size: var(--salmex-font-size-xs);
214
205
  }
215
206
 
216
207
  .salmex-btn-md {
217
- height: 36px;
218
- padding: 0 var(--salmex-space-5);
208
+ height: 32px;
209
+ padding: 0 var(--salmex-space-4);
219
210
  font-size: var(--salmex-font-size-base);
220
211
  }
221
212
 
222
213
  .salmex-btn-lg {
223
- height: 44px;
224
- padding: 0 var(--salmex-space-6);
214
+ height: 40px;
215
+ padding: 0 var(--salmex-space-5);
225
216
  font-size: var(--salmex-font-size-md);
226
217
  }
227
218
 
228
219
  /* Icon-only variants */
229
220
  .salmex-btn-icon-only.salmex-btn-sm {
230
- width: 28px;
221
+ width: 24px;
231
222
  padding: 0;
232
223
  }
233
224
 
234
225
  .salmex-btn-icon-only.salmex-btn-md {
235
- width: 36px;
226
+ width: 32px;
236
227
  padding: 0;
237
228
  }
238
229
 
239
230
  .salmex-btn-icon-only.salmex-btn-lg {
240
- width: 44px;
231
+ width: 40px;
241
232
  padding: 0;
242
233
  }
243
234
 
@@ -265,12 +256,10 @@ const isDisabled = $derived(disabled);
265
256
  font-weight: 900;
266
257
 
267
258
  box-shadow:
268
- inset 2px 2px 0 rgba(255, 255, 255, 0.3),
269
- inset 3px 3px 0 rgba(255, 255, 255, 0.15),
270
- inset -2px -2px 0 rgba(0, 0, 0, 0.4),
271
- inset -3px -3px 0 rgba(0, 0, 0, 0.2),
259
+ inset 1px 1px 0 rgba(255, 255, 255, 0.3),
260
+ inset -1px -1px 0 rgba(0, 0, 0, 0.4),
272
261
  0 0 0 2px rgb(var(--salmex-border-dark)),
273
- 4px 4px 0 rgb(0 0 0 / 0.35);
262
+ 4px 4px 1px rgb(0 0 0 / 0.35);
274
263
  }
275
264
 
276
265
  /* Yellow accent underline on primary */
@@ -286,29 +275,25 @@ const isDisabled = $derived(disabled);
286
275
  }
287
276
 
288
277
  .salmex-btn-primary:hover:not(:disabled) {
289
- background: linear-gradient(135deg,
290
- rgb(var(--salmex-primary-light)),
278
+ background: linear-gradient(135deg,
279
+ rgb(var(--salmex-primary-light)),
291
280
  rgb(var(--salmex-electric-blue))
292
281
  );
293
282
  transform: translateY(-1px);
294
283
  box-shadow:
295
- inset 2px 2px 0 rgba(255, 255, 255, 0.3),
296
- inset 3px 3px 0 rgba(255, 255, 255, 0.15),
297
- inset -2px -2px 0 rgba(0, 0, 0, 0.4),
298
- inset -3px -3px 0 rgba(0, 0, 0, 0.2),
284
+ inset 1px 1px 0 rgba(255, 255, 255, 0.3),
285
+ inset -1px -1px 0 rgba(0, 0, 0, 0.4),
299
286
  0 0 0 2px rgb(var(--salmex-border-dark)),
300
- 5px 5px 0 rgb(0 0 0 / 0.4);
287
+ 5px 5px 1px rgb(0 0 0 / 0.4);
301
288
  }
302
289
 
303
290
  .salmex-btn-primary:active:not(:disabled) {
304
- transform: translate(2px, 2px);
291
+ transform: translate(1px, 1px);
305
292
  box-shadow:
306
- inset -2px -2px 0 rgba(255, 255, 255, 0.3),
307
- inset -3px -3px 0 rgba(255, 255, 255, 0.15),
308
- inset 2px 2px 0 rgba(0, 0, 0, 0.4),
309
- inset 3px 3px 0 rgba(0, 0, 0, 0.2),
293
+ inset -1px -1px 0 rgba(255, 255, 255, 0.3),
294
+ inset 1px 1px 0 rgba(0, 0, 0, 0.4),
310
295
  0 0 0 2px rgb(var(--salmex-border-dark)),
311
- 2px 2px 0 rgb(0 0 0 / 0.3);
296
+ 2px 2px 1px rgb(0 0 0 / 0.3);
312
297
  }
313
298
 
314
299
  /* Ghost variant — visible border at rest, full 3D bevel on hover */
@@ -323,38 +308,34 @@ const isDisabled = $derived(disabled);
323
308
  background: rgb(var(--salmex-button-face));
324
309
  transform: translateY(-1px);
325
310
  box-shadow:
326
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
327
- inset 3px 3px 0 rgb(var(--salmex-button-light)),
328
- inset -2px -2px 0 rgb(var(--salmex-button-dark-edge)),
329
- inset -3px -3px 0 rgb(var(--salmex-button-shadow)),
311
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
312
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
330
313
  0 0 0 2px rgb(var(--salmex-border-dark)),
331
- 4px 4px 0 rgb(0 0 0 / 0.25);
314
+ 4px 4px 1px rgb(0 0 0 / 0.25);
332
315
  }
333
316
 
334
317
  .salmex-btn-ghost:active:not(:disabled) {
335
318
  background: rgb(var(--salmex-button-face));
336
319
  box-shadow:
337
- inset -2px -2px 0 rgb(var(--salmex-button-highlight)),
338
- inset -3px -3px 0 rgb(var(--salmex-button-light)),
339
- inset 2px 2px 0 rgb(var(--salmex-button-dark-edge)),
340
- inset 3px 3px 0 rgb(var(--salmex-button-shadow)),
320
+ inset -1px -1px 0 rgb(var(--salmex-button-highlight)),
321
+ inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
341
322
  0 0 0 2px rgb(var(--salmex-border-dark)),
342
- 2px 2px 0 rgb(0 0 0 / 0.3);
343
- transform: translate(2px, 2px);
323
+ 2px 2px 1px rgb(0 0 0 / 0.3);
324
+ transform: translate(1px, 1px);
344
325
  }
345
326
 
346
327
  .salmex-btn-ghost:focus-visible {
347
328
  outline: none;
348
329
  box-shadow:
349
330
  0 0 0 2px rgb(var(--salmex-border-dark)),
350
- 0 0 0 4px rgb(var(--salmex-midnight-black)),
351
- 0 0 0 7px rgb(var(--salmex-crown-yellow));
331
+ 0 0 0 2px rgb(var(--salmex-midnight-black)),
332
+ 0 0 2px 5px rgb(var(--salmex-crown-yellow));
352
333
  }
353
334
 
354
335
  :global([data-theme='dark']) .salmex-btn-ghost:focus-visible {
355
336
  box-shadow:
356
337
  0 0 0 2px rgb(var(--salmex-border-dark)),
357
- 0 0 0 5px rgb(var(--salmex-crown-yellow));
338
+ 0 0 2px 4px rgb(var(--salmex-crown-yellow));
358
339
  }
359
340
 
360
341
  /* Dark mode — more visible yellow underline on primary */
@@ -387,7 +368,7 @@ const isDisabled = $derived(disabled);
387
368
  font-weight: 600;
388
369
  padding: 2px 6px;
389
370
  background: rgba(0, 0, 0, 0.1);
390
- border-radius: 2px;
371
+ border-radius: var(--salmex-radius-sm);
391
372
  }
392
373
 
393
374
  /* ========================================
package/dist/styles/tokens.css CHANGED
@@ -82,7 +82,7 @@
82
82
  --salmex-focus-outline: none;
83
83
  --salmex-focus-offset: 0;
84
84
  --salmex-focus-style: dashed;
85
- --salmex-focus-ring: 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 0 5px
85
+ --salmex-focus-ring: 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 2px 4px
86
86
  rgb(var(--salmex-crown-yellow));
87
87
  /* Thicker dashed outline fallback for outline-only usage */
88
88
  --salmex-focus-outline-color: rgb(var(--salmex-crown-yellow));
@@ -96,11 +96,11 @@
96
96
  --salmex-space-2: 8px;
97
97
  --salmex-space-3: 12px;
98
98
  --salmex-space-4: 16px;
99
- --salmex-space-5: 22px; /* Slightly off */
100
- --salmex-space-6: 26px; /* Not perfect 24 */
101
- --salmex-space-8: 34px; /* Intentionally irregular */
102
- --salmex-space-10: 42px;
103
- --salmex-space-12: 50px;
99
+ --salmex-space-5: 20px;
100
+ --salmex-space-6: 24px;
101
+ --salmex-space-8: 32px;
102
+ --salmex-space-10: 40px;
103
+ --salmex-space-12: 48px;
104
104
 
105
105
  /* ========================================
106
106
  TYPOGRAPHY - Win2K workhorse + Basquiat accents
@@ -127,28 +127,37 @@
127
127
  SHADOWS - Stronger, More Dramatic
128
128
  ======================================== */
129
129
 
130
- --salmex-shadow-sm: 2px 2px 0 rgb(var(--salmex-button-shadow));
131
- --salmex-shadow-md: 3px 3px 0 rgb(0 0 0 / 0.3); /* Flat, bold shadow */
132
- --salmex-shadow-lg: 5px 5px 0 rgb(0 0 0 / 0.4); /* Very bold */
133
- --salmex-shadow-inset: inset 2px 2px 4px rgb(0 0 0 / 0.2);
130
+ --salmex-shadow-sm: 2px 2px 1px rgb(var(--salmex-button-shadow));
131
+ --salmex-shadow-md: 3px 3px 2px rgb(0 0 0 / 0.25);
132
+ --salmex-shadow-lg: 4px 4px 3px rgb(0 0 0 / 0.3);
133
+ --salmex-shadow-inset: inset 2px 2px 3px rgb(0 0 0 / 0.15);
134
134
 
135
135
  /* ========================================
136
136
  BORDER RADIUS - Minimal but Slightly Imperfect
137
137
  ======================================== */
138
138
 
139
139
  --salmex-radius-none: 0;
140
- --salmex-radius-sm: 1px;
141
- --salmex-radius-md: 2px;
142
- --salmex-radius-lg: 3px;
140
+ --salmex-radius-sm: 4px;
141
+ --salmex-radius-md: 6px;
142
+ --salmex-radius-lg: 10px;
143
+ --salmex-radius-xl: 14px;
143
144
  --salmex-radius-rough: 0; /* Sharp edges, Basquiat style */
144
145
 
146
+ /* ========================================
147
+ BORDER WIDTHS
148
+ ======================================== */
149
+
150
+ --salmex-border-width-sm: 1px; /* inputs, badges, separators */
151
+ --salmex-border-width-md: 2px; /* buttons, cards, panels */
152
+ --salmex-border-width-lg: 3px; /* windows only */
153
+
145
154
  /* ========================================
146
155
  TRANSITIONS - Snappier, More Energetic
147
156
  ======================================== */
148
157
 
149
- --salmex-transition-fast: 80ms ease-out;
150
- --salmex-transition-base: 120ms ease-out;
151
- --salmex-transition-slow: 180ms ease-out;
158
+ --salmex-transition-fast: 100ms ease-out;
159
+ --salmex-transition-base: 150ms ease-out;
160
+ --salmex-transition-slow: 200ms ease-out;
152
161
 
153
162
  /* ========================================
154
163
  Z-INDEX LAYERS
@@ -225,7 +234,7 @@
225
234
 
226
235
  /* Focus - bright yellow ring (no dark edge needed on dark bg) */
227
236
  --salmex-focus-outline: 2px dashed rgb(var(--salmex-crown-yellow));
228
- --salmex-focus-ring: 0 0 0 3px rgb(var(--salmex-crown-yellow));
237
+ --salmex-focus-ring: 0 0 2px 3px rgb(var(--salmex-crown-yellow));
229
238
  --salmex-focus-outline-color: rgb(var(--salmex-crown-yellow));
230
239
  --salmex-focus-outline-width: 3px;
231
240
  }
@@ -284,7 +293,7 @@ body::before {
284
293
  width: 100%;
285
294
  height: 100%;
286
295
  pointer-events: none;
287
- opacity: 0.03;
296
+ opacity: 0.015;
288
297
  background-image: repeating-linear-gradient(
289
298
  0deg,
290
299
  transparent,
@@ -309,17 +318,17 @@ body::before {
309
318
 
310
319
  /* Light theme: dark edge + yellow in one clean ring */
311
320
  :root:not([data-theme="dark"]) :focus-visible {
312
- box-shadow: 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 0 5px rgb(var(--salmex-crown-yellow));
321
+ box-shadow: 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 2px 4px rgb(var(--salmex-crown-yellow));
313
322
  }
314
323
 
315
- /* Dark theme: yellow only */
324
+ /* Dark theme: yellow only with blur */
316
325
  [data-theme="dark"] :focus-visible {
317
- box-shadow: 0 0 0 3px rgb(var(--salmex-crown-yellow));
326
+ box-shadow: 0 0 2px 3px rgb(var(--salmex-crown-yellow));
318
327
  }
319
328
 
320
329
  @media (prefers-color-scheme: dark) {
321
330
  :root:not([data-theme="light"]) :focus-visible {
322
- box-shadow: 0 0 0 3px rgb(var(--salmex-crown-yellow));
331
+ box-shadow: 0 0 2px 3px rgb(var(--salmex-crown-yellow));
323
332
  }
324
333
  }
325
334
 
package/dist/windowing/Window/Window.svelte CHANGED
@@ -335,13 +335,14 @@ function handleKeyDown(e: KeyboardEvent) {
335
335
  flex-direction: column;
336
336
  background: rgb(var(--salmex-window-surface));
337
337
  border: 3px solid rgb(var(--salmex-button-dark-edge));
338
+ border-radius: var(--salmex-radius-md);
339
+ overflow: hidden;
338
340
  box-shadow:
339
341
  /* 3D raised outer edge */
340
342
  inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
341
343
  inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
342
344
  /* Flat bold drop shadow */
343
- 5px 5px 0 rgb(0 0 0 / 0.35);
344
- overflow: hidden;
345
+ 4px 4px 3px rgb(0 0 0 / 0.25);
345
346
  outline: none;
346
347
  transition:
347
348
  box-shadow var(--salmex-transition-fast),
@@ -354,11 +355,26 @@ function handleKeyDown(e: KeyboardEvent) {
354
355
  box-shadow:
355
356
  inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
356
357
  inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
357
- 3px 3px 0 rgb(0 0 0 / 0.2);
358
+ 3px 3px 2px rgb(0 0 0 / 0.15);
359
+ }
360
+
361
+ :global([data-theme='dark']) .salmex-win {
362
+ box-shadow:
363
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
364
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
365
+ 4px 4px 3px rgb(0 0 0 / 0.5);
366
+ }
367
+
368
+ :global([data-theme='dark']) .salmex-win:not(.salmex-win-focused) {
369
+ box-shadow:
370
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
371
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
372
+ 3px 3px 2px rgb(0 0 0 / 0.35);
358
373
  }
359
374
 
360
375
  .salmex-win-maximized {
361
376
  border-width: 2px;
377
+ border-radius: 0;
362
378
  box-shadow: none !important;
363
379
  }
364
380
 
@@ -384,7 +400,8 @@ function handleKeyDown(e: KeyboardEvent) {
384
400
  rgb(var(--salmex-titlebar-bold))
385
401
  );
386
402
  color: rgb(var(--salmex-chalk-white));
387
- border-bottom: 2px solid rgb(var(--salmex-button-dark-edge));
403
+ border-bottom: 1px solid rgb(var(--salmex-button-dark-edge));
404
+ border-radius: 3px 3px 0 0;
388
405
  flex-shrink: 0;
389
406
  font-family: var(--salmex-font-display);
390
407
  user-select: none;
@@ -437,6 +454,7 @@ function handleKeyDown(e: KeyboardEvent) {
437
454
  width: 50%;
438
455
  height: 3px;
439
456
  background: rgb(var(--salmex-crown-yellow));
457
+ border-radius: 0 2px 0 0;
440
458
  }
441
459
 
442
460
  :root:not([data-theme='dark']) .salmex-win-focused .salmex-win-titlebar::after {
@@ -504,7 +522,8 @@ function handleKeyDown(e: KeyboardEvent) {
504
522
  height: 22px;
505
523
  padding: 0;
506
524
  background: rgb(var(--salmex-button-face));
507
- border: 2px solid rgb(var(--salmex-button-dark-edge));
525
+ border: 1px solid rgb(var(--salmex-button-dark-edge));
526
+ border-radius: var(--salmex-radius-sm);
508
527
  color: rgb(var(--salmex-text-primary));
509
528
  cursor: pointer;
510
529
  box-shadow:
@@ -530,14 +549,14 @@ function handleKeyDown(e: KeyboardEvent) {
530
549
  inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
531
550
  inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
532
551
  0 0 0 2px rgb(var(--salmex-midnight-black)),
533
- 0 0 0 5px rgb(var(--salmex-crown-yellow));
552
+ 0 0 2px 4px rgb(var(--salmex-crown-yellow));
534
553
  }
535
554
 
536
555
  :global([data-theme='dark']) .salmex-win-btn:focus-visible {
537
556
  box-shadow:
538
557
  inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
539
558
  inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
540
- 0 0 0 3px rgb(var(--salmex-crown-yellow));
559
+ 0 0 2px 3px rgb(var(--salmex-crown-yellow));
541
560
  }
542
561
 
543
562
  /* Close button — red accent on hover */
@@ -561,10 +580,18 @@ function handleKeyDown(e: KeyboardEvent) {
561
580
  }
562
581
 
563
582
  /* Sunken inset for the body area — Win2K content area.
564
- Uses only a subtle top inset shadow; no border or margin
565
- so child components (TextInput, etc.) don't double-frame. */
583
+ L-shaped top+left inset reads "sunken" without the full
584
+ 4-sided frame that would double-frame child inputs. */
566
585
  .salmex-win-body {
567
- box-shadow: inset 0 1px 0 rgb(var(--salmex-button-shadow));
586
+ box-shadow:
587
+ inset 0 1px 0 rgb(var(--salmex-button-shadow)),
588
+ inset 1px 0 0 rgb(var(--salmex-button-shadow) / 0.5);
589
+ }
590
+
591
+ :global([data-theme='dark']) .salmex-win-body {
592
+ box-shadow:
593
+ inset 0 1px 0 rgb(0 0 0 / 0.4),
594
+ inset 1px 0 0 rgb(0 0 0 / 0.2);
568
595
  }
569
596
 
570
597
  /* ========================================
@@ -578,6 +605,7 @@ function handleKeyDown(e: KeyboardEvent) {
578
605
  padding: var(--salmex-space-1) var(--salmex-space-3);
579
606
  background: rgb(var(--salmex-window-surface));
580
607
  border-top: 1px solid rgb(var(--salmex-button-highlight));
608
+ border-radius: 0 0 3px 3px;
581
609
  font-size: var(--salmex-font-size-xs);
582
610
  font-family: var(--salmex-font-system);
583
611
  color: rgb(var(--salmex-text-secondary));
@@ -587,6 +615,13 @@ function handleKeyDown(e: KeyboardEvent) {
587
615
  inset -1px -1px 0 rgb(var(--salmex-button-highlight));
588
616
  }
589
617
 
618
+ :global([data-theme='dark']) .salmex-win-statusbar {
619
+ border-top-color: rgb(var(--salmex-button-shadow));
620
+ box-shadow:
621
+ inset 1px 1px 0 rgb(0 0 0 / 0.3),
622
+ inset -1px -1px 0 rgb(var(--salmex-button-highlight));
623
+ }
624
+
590
625
  /* ========================================
591
626
  REDUCED MOTION
592
627
  ======================================== */