@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/navigation/Tabs/Tabs.svelte CHANGED
@@ -53,6 +53,12 @@ interface Props {
53
53
  class?: string;
54
54
  /** Change handler */
55
55
  onchange?: (value: string) => void;
56
+ /** Called when a tab receives focus (keyboard or click) */
57
+ onfocus?: (value: string) => void;
58
+ /** Called when the pointer enters a tab (hover) */
59
+ onmouseenter?: (value: string) => void;
60
+ /** Called when the pointer leaves a tab */
61
+ onmouseleave?: (value: string) => void;
56
62
  /** Panel content - receives active tab value */
57
63
  children?: Snippet<[activeValue: string]>;
58
64
  /** Test ID */
@@ -67,6 +73,9 @@ let {
67
73
  size = 'md',
68
74
  class: className = '',
69
75
  onchange,
76
+ onfocus,
77
+ onmouseenter,
78
+ onmouseleave,
70
79
  children,
71
80
  testId
72
81
  }: Props = $props();
@@ -144,6 +153,9 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
144
153
  )}
145
154
  onclick={() => activateTab(index)}
146
155
  onkeydown={(e) => handleKeydown(e, index)}
156
+ onfocus={() => !isDisabled && onfocus?.(tab.value)}
157
+ onmouseenter={() => !isDisabled && onmouseenter?.(tab.value)}
158
+ onmouseleave={() => !isDisabled && onmouseleave?.(tab.value)}
147
159
  >
148
160
  {#if tab.icon}
149
161
  <span class="salmex-tab-icon" aria-hidden="true">
@@ -202,15 +214,15 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
202
214
  }
203
215
 
204
216
  .salmex-tabs-list-sm {
205
- min-height: 52px;
217
+ min-height: 48px;
206
218
  }
207
219
 
208
220
  .salmex-tabs-list-md {
209
- min-height: 58px;
221
+ min-height: 54px;
210
222
  }
211
223
 
212
224
  .salmex-tabs-list-lg {
213
- min-height: 64px;
225
+ min-height: 60px;
214
226
  }
215
227
 
216
228
  /* ========================================
@@ -239,20 +251,20 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
239
251
  /* Move all unselected tabs up more */
240
252
  transform: translateY(-8px);
241
253
 
242
- /* Simplified 3D - just 2px inset, cleaner look */
254
+ /* Simplified 3D - just 1px inset, cleaner look */
243
255
  box-shadow:
244
256
  /* Top-left highlight */
245
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
257
+ inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
246
258
  /* Bottom-right shadow */
247
- inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
259
+ inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
248
260
  /* Flat shadow - Basquiat style */
249
- 3px 3px 0 rgb(0 0 0 / 0.2);
261
+ 3px 3px 1px rgb(0 0 0 / 0.2);
250
262
 
251
263
  /* Always account for focus border space (transparent when not focused) */
252
264
  outline: 2px dashed transparent;
253
265
  outline-offset: 2px;
254
266
 
255
- border-radius: 0;
267
+ border-radius: var(--salmex-radius-sm) var(--salmex-radius-sm) 0 0;
256
268
  transition: all var(--salmex-transition-fast);
257
269
  }
258
270
 
@@ -277,17 +289,17 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
277
289
  background: rgb(var(--salmex-button-light));
278
290
  transform: translateY(-6px);
279
291
  box-shadow:
280
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
281
- inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
282
- 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);
283
295
  }
284
296
 
285
297
  /* Active (pressed) state - inverted shadow for tactile feedback */
286
298
  .salmex-tab:active:not(.salmex-tab-disabled):not(.salmex-tab-selected) {
287
299
  box-shadow:
288
300
  /* Inverted shadows for pressed effect */
289
- inset -2px -2px 0 rgb(var(--salmex-button-highlight)),
290
- 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)),
291
303
  /* Reduced flat shadow */
292
304
  1px 1px 0 rgb(0 0 0 / 0.3);
293
305
 
@@ -311,8 +323,8 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
311
323
 
312
324
  /* Subtle 3D on sides only - merges at bottom */
313
325
  box-shadow:
314
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
315
- 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));
316
328
  }
317
329
 
318
330
  /* Dark mode selected - bright blue text with lighter grey shadow */
@@ -327,20 +339,20 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
327
339
  .salmex-tab:focus-visible {
328
340
  outline: none;
329
341
  box-shadow:
330
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
331
- inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
332
- 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),
333
345
  0 0 0 2px rgb(var(--salmex-midnight-black)),
334
- 0 0 0 5px rgb(var(--salmex-crown-yellow));
346
+ 0 0 2px 4px rgb(var(--salmex-crown-yellow));
335
347
  z-index: 10;
336
348
  }
337
349
 
338
350
  :global([data-theme='dark']) .salmex-tab:focus-visible {
339
351
  box-shadow:
340
- inset 2px 2px 0 rgb(var(--salmex-button-highlight)),
341
- inset -2px -2px 0 rgb(var(--salmex-button-shadow)),
342
- 3px 3px 0 rgb(0 0 0 / 0.2),
343
- 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));
344
356
  }
345
357
 
346
358
  .salmex-tab-disabled {
@@ -374,7 +386,7 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
374
386
  font-size: 11px;
375
387
  font-weight: 700;
376
388
  color: rgb(var(--salmex-text-secondary));
377
- border-radius: 0;
389
+ border-radius: var(--salmex-radius-xl);
378
390
  }
379
391
 
380
392
  .salmex-tab-selected .salmex-tab-badge {
@@ -401,11 +413,13 @@ function handleKeydown(event: KeyboardEvent, currentIndex: number) {
401
413
  position: relative;
402
414
  z-index: 1;
403
415
 
416
+ border-radius: 0 0 var(--salmex-radius-sm) var(--salmex-radius-sm);
417
+
404
418
  /* Simplified inset 3D effect */
405
419
  box-shadow:
406
420
  /* Inner shadows for depth */
407
- inset 2px 2px 0 rgb(var(--salmex-button-shadow)),
408
- 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));
409
423
  }
410
424
 
411
425
  .salmex-tabs-panel-hidden {
package/dist/navigation/Tabs/Tabs.svelte.d.ts CHANGED
@@ -27,6 +27,12 @@ interface Props {
27
27
  class?: string;
28
28
  /** Change handler */
29
29
  onchange?: (value: string) => void;
30
+ /** Called when a tab receives focus (keyboard or click) */
31
+ onfocus?: (value: string) => void;
32
+ /** Called when the pointer enters a tab (hover) */
33
+ onmouseenter?: (value: string) => void;
34
+ /** Called when the pointer leaves a tab */
35
+ onmouseleave?: (value: string) => void;
30
36
  /** Panel content - receives active tab value */
31
37
  children?: Snippet<[activeValue: string]>;
32
38
  /** Test ID */
package/dist/navigation/Tabs/Tabs.svelte.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/navigation/Tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnC,MAAM,WAAW,SAAS;IACzB,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,KAAK;IACd,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAC1C,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AA8GD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
1
+ {"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/navigation/Tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnC,MAAM,WAAW,SAAS;IACzB,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,KAAK;IACd,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,sBAAsB;IACtB,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,mDAAmD;IACnD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,2CAA2C;IAC3C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAC1C,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAiHD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
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