@salmexio/ui 0.4.0 → 1.1.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 (119) hide show
  1. package/README.md +52 -3
  2. package/dist/dialogs/ContextMenu/ContextMenu.svelte +97 -94
  3. package/dist/dialogs/ContextMenu/ContextMenu.svelte.d.ts +3 -2
  4. package/dist/dialogs/ContextMenu/ContextMenu.svelte.d.ts.map +1 -1
  5. package/dist/dialogs/Modal/Modal.svelte +112 -116
  6. package/dist/dialogs/Modal/Modal.svelte.d.ts +1 -1
  7. package/dist/feedback/Alert/Alert.svelte +119 -220
  8. package/dist/feedback/Alert/Alert.svelte.d.ts +1 -1
  9. package/dist/feedback/ProgressBar/ProgressBar.svelte +265 -0
  10. package/dist/feedback/ProgressBar/ProgressBar.svelte.d.ts +40 -0
  11. package/dist/feedback/ProgressBar/ProgressBar.svelte.d.ts.map +1 -0
  12. package/dist/feedback/ProgressBar/index.d.ts +2 -0
  13. package/dist/feedback/ProgressBar/index.d.ts.map +1 -0
  14. package/dist/feedback/ProgressBar/index.js +1 -0
  15. package/dist/feedback/Skeleton/Skeleton.svelte +157 -0
  16. package/dist/feedback/Skeleton/Skeleton.svelte.d.ts +37 -0
  17. package/dist/feedback/Skeleton/Skeleton.svelte.d.ts.map +1 -0
  18. package/dist/feedback/Skeleton/index.d.ts +2 -0
  19. package/dist/feedback/Skeleton/index.d.ts.map +1 -0
  20. package/dist/feedback/Skeleton/index.js +1 -0
  21. package/dist/feedback/Spinner/Spinner.svelte +86 -151
  22. package/dist/feedback/Spinner/Spinner.svelte.d.ts +5 -3
  23. package/dist/feedback/Spinner/Spinner.svelte.d.ts.map +1 -1
  24. package/dist/feedback/Toast/Toaster.svelte +431 -0
  25. package/dist/feedback/Toast/Toaster.svelte.d.ts +22 -0
  26. package/dist/feedback/Toast/Toaster.svelte.d.ts.map +1 -0
  27. package/dist/feedback/Toast/index.d.ts +4 -0
  28. package/dist/feedback/Toast/index.d.ts.map +1 -0
  29. package/dist/feedback/Toast/index.js +2 -0
  30. package/dist/feedback/Toast/toastStore.d.ts +34 -0
  31. package/dist/feedback/Toast/toastStore.d.ts.map +1 -0
  32. package/dist/feedback/Toast/toastStore.js +43 -0
  33. package/dist/feedback/index.d.ts +4 -0
  34. package/dist/feedback/index.d.ts.map +1 -1
  35. package/dist/feedback/index.js +3 -0
  36. package/dist/forms/Checkbox/Checkbox.svelte +87 -104
  37. package/dist/forms/Checkbox/Checkbox.svelte.d.ts +1 -1
  38. package/dist/forms/Select/Select.svelte +137 -179
  39. package/dist/forms/Select/Select.svelte.d.ts +1 -1
  40. package/dist/forms/Slider/Slider.svelte +356 -0
  41. package/dist/forms/Slider/Slider.svelte.d.ts +50 -0
  42. package/dist/forms/Slider/Slider.svelte.d.ts.map +1 -0
  43. package/dist/forms/Slider/index.d.ts +2 -0
  44. package/dist/forms/Slider/index.d.ts.map +1 -0
  45. package/dist/forms/Slider/index.js +1 -0
  46. package/dist/forms/TextInput/TextInput.svelte +161 -167
  47. package/dist/forms/TextInput/TextInput.svelte.d.ts +1 -1
  48. package/dist/forms/Textarea/Textarea.svelte +615 -0
  49. package/dist/forms/Textarea/Textarea.svelte.d.ts +47 -0
  50. package/dist/forms/Textarea/Textarea.svelte.d.ts.map +1 -0
  51. package/dist/forms/Textarea/index.d.ts +2 -0
  52. package/dist/forms/Textarea/index.d.ts.map +1 -0
  53. package/dist/forms/Textarea/index.js +1 -0
  54. package/dist/forms/Toggle/Toggle.svelte +239 -0
  55. package/dist/forms/Toggle/Toggle.svelte.d.ts +39 -0
  56. package/dist/forms/Toggle/Toggle.svelte.d.ts.map +1 -0
  57. package/dist/forms/Toggle/index.d.ts +2 -0
  58. package/dist/forms/Toggle/index.d.ts.map +1 -0
  59. package/dist/forms/Toggle/index.js +1 -0
  60. package/dist/forms/index.d.ts +3 -0
  61. package/dist/forms/index.d.ts.map +1 -1
  62. package/dist/forms/index.js +3 -0
  63. package/dist/index.d.ts +0 -1
  64. package/dist/index.d.ts.map +1 -1
  65. package/dist/index.js +0 -1
  66. package/dist/layout/Card/Card.svelte +66 -39
  67. package/dist/layout/Card/Card.svelte.d.ts +1 -1
  68. package/dist/layout/Card/Card.svelte.d.ts.map +1 -1
  69. package/dist/layout/Container/Container.svelte +71 -71
  70. package/dist/layout/Container/Container.svelte.d.ts +2 -2
  71. package/dist/layout/ThermalBackground/ThermalBackground.svelte +313 -0
  72. package/dist/layout/ThermalBackground/ThermalBackground.svelte.d.ts +16 -0
  73. package/dist/layout/ThermalBackground/ThermalBackground.svelte.d.ts.map +1 -0
  74. package/dist/layout/ThermalBackground/index.d.ts +2 -0
  75. package/dist/layout/ThermalBackground/index.d.ts.map +1 -0
  76. package/dist/layout/ThermalBackground/index.js +1 -0
  77. package/dist/layout/index.d.ts +1 -0
  78. package/dist/layout/index.d.ts.map +1 -1
  79. package/dist/layout/index.js +1 -0
  80. package/dist/navigation/CommandPalette/CommandPalette.svelte +407 -189
  81. package/dist/navigation/CommandPalette/CommandPalette.svelte.d.ts +8 -3
  82. package/dist/navigation/CommandPalette/CommandPalette.svelte.d.ts.map +1 -1
  83. package/dist/navigation/Tabs/Tabs.svelte +139 -192
  84. package/dist/navigation/Tabs/Tabs.svelte.d.ts +2 -2
  85. package/dist/primitives/Badge/Badge.svelte +85 -220
  86. package/dist/primitives/Badge/Badge.svelte.d.ts +2 -2
  87. package/dist/primitives/Badge/Badge.svelte.d.ts.map +1 -1
  88. package/dist/primitives/Button/Button.svelte +214 -194
  89. package/dist/primitives/Button/Button.svelte.d.ts +3 -3
  90. package/dist/primitives/Button/Button.svelte.d.ts.map +1 -1
  91. package/dist/primitives/Tooltip/Tooltip.svelte +260 -0
  92. package/dist/primitives/Tooltip/Tooltip.svelte.d.ts +36 -0
  93. package/dist/primitives/Tooltip/Tooltip.svelte.d.ts.map +1 -0
  94. package/dist/primitives/Tooltip/index.d.ts +2 -0
  95. package/dist/primitives/Tooltip/index.d.ts.map +1 -0
  96. package/dist/primitives/Tooltip/index.js +1 -0
  97. package/dist/primitives/index.d.ts +1 -0
  98. package/dist/primitives/index.d.ts.map +1 -1
  99. package/dist/primitives/index.js +1 -0
  100. package/dist/styles/tokens.css +329 -260
  101. package/package.json +5 -5
  102. package/dist/windowing/Window/Window.svelte +0 -637
  103. package/dist/windowing/Window/Window.svelte.d.ts +0 -65
  104. package/dist/windowing/Window/Window.svelte.d.ts.map +0 -1
  105. package/dist/windowing/Window/index.d.ts +0 -2
  106. package/dist/windowing/Window/index.d.ts.map +0 -1
  107. package/dist/windowing/Window/index.js +0 -1
  108. package/dist/windowing/WindowManager/WindowManager.svelte +0 -425
  109. package/dist/windowing/WindowManager/WindowManager.svelte.d.ts +0 -38
  110. package/dist/windowing/WindowManager/WindowManager.svelte.d.ts.map +0 -1
  111. package/dist/windowing/WindowManager/index.d.ts +0 -2
  112. package/dist/windowing/WindowManager/index.d.ts.map +0 -1
  113. package/dist/windowing/WindowManager/index.js +0 -1
  114. package/dist/windowing/index.d.ts +0 -5
  115. package/dist/windowing/index.d.ts.map +0 -1
  116. package/dist/windowing/index.js +0 -3
  117. package/dist/windowing/windowStore.svelte.d.ts +0 -49
  118. package/dist/windowing/windowStore.svelte.d.ts.map +0 -1
  119. package/dist/windowing/windowStore.svelte.js +0 -170
@@ -1,14 +1,14 @@
1
1
  <!--
2
2
  @component Button
3
-
4
- Win2K × Basquiat - Bold 3D button with neo-expressionist flair.
5
- Raw structure, expressive energy, world-class accessibility.
6
-
3
+
4
+ INFRARED Glassmorphism button with glow effects.
5
+ Clean geometry, expressive energy, world-class accessibility.
6
+
7
7
  @example
8
8
  <Button variant="default" size="md" onclick={() => handleClick()}>
9
9
  Click me
10
10
  </Button>
11
-
11
+
12
12
  @example
13
13
  <Button variant="primary" disabled>
14
14
  <Icon slot="icon-left" />
@@ -21,7 +21,7 @@ import type { HTMLButtonAttributes } from 'svelte/elements';
21
21
  import { cn } from '../../utils/cn.js';
22
22
 
23
23
  type ButtonSize = 'sm' | 'md' | 'lg';
24
- type ButtonVariant = 'default' | 'primary' | 'ghost';
24
+ type ButtonVariant = 'default' | 'primary' | 'ghost' | 'danger';
25
25
 
26
26
  interface Props extends Omit<HTMLButtonAttributes, 'class'> {
27
27
  /** Visual variant of the button */
@@ -68,11 +68,11 @@ const isDisabled = $derived(disabled);
68
68
  <button
69
69
  {type}
70
70
  class={cn(
71
- 'salmex-btn',
72
- `salmex-btn-${variant}`,
73
- `salmex-btn-${size}`,
74
- iconOnly && 'salmex-btn-icon-only',
75
- fullWidth && !iconOnly && 'salmex-btn-full-width',
71
+ 'sx-btn',
72
+ `sx-btn-${variant}`,
73
+ `sx-btn-${size}`,
74
+ iconOnly && 'sx-btn-icon-only',
75
+ fullWidth && !iconOnly && 'sx-btn-full-width',
76
76
  className
77
77
  )}
78
78
  disabled={isDisabled}
@@ -80,9 +80,9 @@ const isDisabled = $derived(disabled);
80
80
  data-testid={testId}
81
81
  {...restProps}
82
82
  >
83
- <span class="salmex-btn-content">
83
+ <span class="sx-btn-content">
84
84
  {#if iconLeft}
85
- <span class="salmex-btn-icon" aria-hidden="true">
85
+ <span class="sx-btn-icon" aria-hidden="true">
86
86
  {@render iconLeft()}
87
87
  </span>
88
88
  {/if}
@@ -92,13 +92,13 @@ const isDisabled = $derived(disabled);
92
92
  {/if}
93
93
 
94
94
  {#if iconRight}
95
- <span class="salmex-btn-icon" aria-hidden="true">
95
+ <span class="sx-btn-icon" aria-hidden="true">
96
96
  {@render iconRight()}
97
97
  </span>
98
98
  {/if}
99
99
 
100
100
  {#if shortcut}
101
- <span class="salmex-btn-shortcut" aria-label="Keyboard shortcut: {shortcut}">
101
+ <span class="sx-btn-shortcut" aria-label="Keyboard shortcut: {shortcut}">
102
102
  {shortcut}
103
103
  </span>
104
104
  {/if}
@@ -107,284 +107,304 @@ const isDisabled = $derived(disabled);
107
107
 
108
108
  <style>
109
109
  /* ========================================
110
- BASE BUTTON - Basquiat × Win2K 3D
110
+ BASE BUTTON - INFRARED
111
111
  ======================================== */
112
- .salmex-btn {
112
+ .sx-btn {
113
113
  position: relative;
114
114
  display: inline-flex;
115
115
  align-items: center;
116
116
  justify-content: center;
117
- gap: var(--salmex-space-2);
118
- font-family: var(--salmex-font-system);
119
- font-weight: 700;
117
+ gap: var(--sx-space-2);
118
+ font-family: var(--sx-font-body);
119
+ font-weight: 600;
120
120
  cursor: pointer;
121
121
  user-select: none;
122
122
  -webkit-tap-highlight-color: transparent;
123
-
124
- /* Canvas-like button surface */
125
- background: rgb(var(--salmex-button-face));
126
- border: none;
127
- border-radius: var(--salmex-radius-md);
128
123
 
129
- /* Bold 3D effect - stronger than original Win2K */
130
- box-shadow:
131
- /* Top-left highlight */
132
- inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
133
- /* Bottom-right shadow */
134
- inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
135
- /* Outer bold border */
136
- 0 0 0 2px rgb(var(--salmex-border-dark)),
137
- /* Flat shadow - Basquiat style */
138
- 4px 4px 1px rgb(0 0 0 / 0.25);
139
-
140
- transition: all var(--salmex-transition-fast);
141
- text-transform: uppercase;
142
- letter-spacing: 0.3px;
143
- }
144
-
145
- /* Focus - use global yellow ring (visible in light and dark) */
146
- .salmex-btn:focus-visible {
147
- outline: none;
148
- box-shadow:
149
- inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
150
- inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
151
- 0 0 0 2px rgb(var(--salmex-border-dark)),
152
- 4px 4px 1px rgb(0 0 0 / 0.25),
153
- 0 0 0 2px rgb(var(--salmex-midnight-black)),
154
- 0 0 2px 4px rgb(var(--salmex-crown-yellow));
124
+ background: var(--sx-color-surface-2);
125
+ border: 1px solid var(--sx-color-border-strong);
126
+ border-radius: var(--sx-radius-md);
127
+ color: var(--sx-color-text);
128
+ box-shadow: var(--sx-shadow-sm);
129
+
130
+ transition: transform var(--sx-transition-fast), box-shadow var(--sx-transition-fast),
131
+ background var(--sx-transition-fast), border-color var(--sx-transition-fast),
132
+ color var(--sx-transition-fast);
155
133
  }
156
134
 
157
- :global([data-theme='dark']) .salmex-btn:focus-visible {
158
- box-shadow:
159
- inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
160
- inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
161
- 0 0 0 2px rgb(var(--salmex-border-dark)),
162
- 4px 4px 1px rgb(0 0 0 / 0.25),
163
- 0 0 2px 3px rgb(var(--salmex-crown-yellow));
135
+ /* Focus */
136
+ .sx-btn:focus-visible {
137
+ outline: 2px solid var(--sx-color-primary);
138
+ outline-offset: 2px;
164
139
  }
165
140
 
166
- /* Hover state - energetic highlight */
167
- .salmex-btn:hover:not(:disabled) {
168
- background: rgb(var(--salmex-button-light));
169
- transform: translateY(-1px);
170
- box-shadow:
171
- inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
172
- inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
173
- 0 0 0 2px rgb(var(--salmex-border-dark)),
174
- 5px 5px 1px rgb(0 0 0 / 0.3);
141
+ /* Primary focus needs white outline since vermilion-on-vermilion is invisible */
142
+ .sx-btn-primary:focus-visible {
143
+ outline-color: var(--sx-white);
175
144
  }
176
145
 
177
- /* Active (pressed) state - inverted shadow */
178
- .salmex-btn:active:not(:disabled) {
179
- box-shadow:
180
- /* Inverted shadows */
181
- inset -1px -1px 0 rgb(var(--salmex-button-highlight)),
182
- inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
183
- 0 0 0 2px rgb(var(--salmex-border-dark)),
184
- 2px 2px 1px rgb(0 0 0 / 0.3);
146
+ /* Hover state */
147
+ .sx-btn:hover:not(:disabled) {
148
+ transform: translateY(-2px);
149
+ box-shadow: var(--sx-shadow-md);
150
+ border-color: var(--sx-color-border-hover);
151
+ }
185
152
 
186
- /* Shift down-right for pressed effect */
187
- transform: translate(1px, 1px);
153
+ /* Active (pressed) state */
154
+ .sx-btn:active:not(:disabled) {
155
+ transform: translateY(0);
156
+ box-shadow: var(--sx-shadow-sm);
188
157
  }
189
158
 
190
159
  /* Disabled state */
191
- .salmex-btn:disabled {
160
+ .sx-btn:disabled {
192
161
  opacity: 0.5;
193
162
  cursor: not-allowed;
194
- color: rgb(var(--salmex-text-disabled));
195
- filter: grayscale(0.5);
163
+ color: var(--sx-color-text-disabled);
196
164
  }
197
165
 
198
166
  /* ========================================
199
167
  SIZE VARIANTS
200
168
  ======================================== */
201
- .salmex-btn-sm {
202
- height: 24px;
203
- padding: 0 var(--salmex-space-2);
204
- font-size: var(--salmex-font-size-xs);
169
+ .sx-btn-sm {
170
+ height: 28px;
171
+ padding: 0 var(--sx-space-2);
172
+ font-size: var(--sx-text-xs);
205
173
  }
206
174
 
207
- .salmex-btn-md {
208
- height: 32px;
209
- padding: 0 var(--salmex-space-4);
210
- font-size: var(--salmex-font-size-base);
175
+ .sx-btn-md {
176
+ height: 36px;
177
+ padding: 0 var(--sx-space-4);
178
+ font-size: var(--sx-text-sm);
211
179
  }
212
180
 
213
- .salmex-btn-lg {
214
- height: 40px;
215
- padding: 0 var(--salmex-space-5);
216
- font-size: var(--salmex-font-size-md);
181
+ .sx-btn-lg {
182
+ height: 44px;
183
+ padding: 0 var(--sx-space-5);
184
+ font-size: var(--sx-text-base);
217
185
  }
218
186
 
219
187
  /* Icon-only variants */
220
- .salmex-btn-icon-only.salmex-btn-sm {
221
- width: 24px;
188
+ .sx-btn-icon-only.sx-btn-sm {
189
+ width: 28px;
222
190
  padding: 0;
223
191
  }
224
192
 
225
- .salmex-btn-icon-only.salmex-btn-md {
226
- width: 32px;
193
+ .sx-btn-icon-only.sx-btn-md {
194
+ width: 36px;
227
195
  padding: 0;
228
196
  }
229
197
 
230
- .salmex-btn-icon-only.salmex-btn-lg {
231
- width: 40px;
198
+ .sx-btn-icon-only.sx-btn-lg {
199
+ width: 44px;
232
200
  padding: 0;
233
201
  }
234
202
 
235
203
  /* Full width */
236
- .salmex-btn-full-width {
204
+ .sx-btn-full-width {
237
205
  width: 100%;
238
206
  }
239
207
 
240
208
  /* ========================================
241
- VARIANT STYLES - Neo-Expressionist
209
+ VARIANT STYLES - INFRARED
242
210
  ======================================== */
243
-
244
- /* Default variant - bold canvas */
245
- .salmex-btn-default {
246
- color: rgb(var(--salmex-text-primary));
247
- }
248
-
249
- /* Primary variant - electric blue with yellow accent */
250
- .salmex-btn-primary {
251
- background: linear-gradient(135deg,
252
- rgb(var(--salmex-electric-blue)),
253
- rgb(var(--salmex-titlebar-bold))
254
- );
255
- color: rgb(var(--salmex-chalk-white));
256
- font-weight: 900;
257
-
258
- box-shadow:
259
- inset 1px 1px 0 rgba(255, 255, 255, 0.3),
260
- inset -1px -1px 0 rgba(0, 0, 0, 0.4),
261
- 0 0 0 2px rgb(var(--salmex-border-dark)),
262
- 4px 4px 1px rgb(0 0 0 / 0.35);
211
+
212
+ /* Default variant */
213
+ .sx-btn-default {
214
+ background: var(--sx-color-surface-2);
215
+ color: var(--sx-color-text);
216
+ border: 1px solid var(--sx-color-border-strong);
217
+ }
218
+
219
+ /* Primary variant — Aurora grain.
220
+ Two-layer background: mostly-opaque vermilion on top with slight
221
+ edge transparency, a slow-drifting brass/teal/vermilion aurora
222
+ underneath that bleeds through at the margins. SVG noise grain
223
+ overlay for tactile feel. Breathing glow pulse at rest. */
224
+ .sx-btn-primary {
225
+ background:
226
+ radial-gradient(
227
+ ellipse at center,
228
+ rgba(255, 107, 53, 0.97) 25%,
229
+ rgba(255, 107, 53, 0.82) 100%
230
+ ),
231
+ linear-gradient(
232
+ 135deg,
233
+ #C8A84E 0%,
234
+ #3D8B8B 35%,
235
+ #FF6B35 65%,
236
+ #C8A84E 100%
237
+ );
238
+ background-size: 100% 100%, 280% 280%;
239
+ color: var(--sx-color-text-inverse);
240
+ border: none;
241
+ font-weight: 600;
242
+ overflow: hidden;
243
+ animation:
244
+ sx-primary-aurora 10s ease-in-out infinite,
245
+ sx-primary-glow 4s ease-in-out infinite;
263
246
  }
264
247
 
265
- /* Yellow accent underline on primary */
266
- .salmex-btn-primary::after {
248
+ /* Grain texture SVG feTurbulence noise at low opacity */
249
+ .sx-btn-primary::after {
267
250
  content: '';
268
251
  position: absolute;
269
- bottom: 4px;
270
- left: 10%;
271
- width: 80%;
272
- height: 2px;
273
- background: rgb(var(--salmex-crown-yellow));
274
- opacity: 0.7;
275
- }
276
-
277
- .salmex-btn-primary:hover:not(:disabled) {
278
- background: linear-gradient(135deg,
279
- rgb(var(--salmex-primary-light)),
280
- rgb(var(--salmex-electric-blue))
281
- );
282
- transform: translateY(-1px);
252
+ inset: 0;
253
+ border-radius: inherit;
254
+ pointer-events: none;
255
+ opacity: 0.06;
256
+ mix-blend-mode: overlay;
257
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
258
+ }
259
+
260
+ /* Aurora drift — moves the underlayer gradient position */
261
+ @keyframes sx-primary-aurora {
262
+ 0%, 100% { background-position: center, 0% 50%; }
263
+ 33% { background-position: center, 100% 0%; }
264
+ 66% { background-position: center, 50% 100%; }
265
+ }
266
+
267
+ /* Breathing glow pulse */
268
+ @keyframes sx-primary-glow {
269
+ 0%, 100% {
270
+ box-shadow:
271
+ var(--sx-shadow-sm),
272
+ 0 0 12px -3px rgba(255, 107, 53, 0.3);
273
+ }
274
+ 50% {
275
+ box-shadow:
276
+ var(--sx-shadow-sm),
277
+ 0 0 20px -2px rgba(255, 107, 53, 0.5);
278
+ }
279
+ }
280
+
281
+ .sx-btn-primary:hover:not(:disabled) {
282
+ transform: translateY(-2px);
283
+ animation:
284
+ sx-primary-aurora 10s ease-in-out infinite;
283
285
  box-shadow:
284
- inset 1px 1px 0 rgba(255, 255, 255, 0.3),
285
- inset -1px -1px 0 rgba(0, 0, 0, 0.4),
286
- 0 0 0 2px rgb(var(--salmex-border-dark)),
287
- 5px 5px 1px rgb(0 0 0 / 0.4);
286
+ var(--sx-shadow-md),
287
+ 0 0 24px -3px rgba(255, 107, 53, 0.55);
288
288
  }
289
289
 
290
- .salmex-btn-primary:active:not(:disabled) {
291
- transform: translate(1px, 1px);
290
+ .sx-btn-primary:active:not(:disabled) {
291
+ transform: translateY(0);
292
292
  box-shadow:
293
- inset -1px -1px 0 rgba(255, 255, 255, 0.3),
294
- inset 1px 1px 0 rgba(0, 0, 0, 0.4),
295
- 0 0 0 2px rgb(var(--salmex-border-dark)),
296
- 2px 2px 1px rgb(0 0 0 / 0.3);
293
+ var(--sx-shadow-sm),
294
+ 0 0 8px -2px rgba(255, 107, 53, 0.2);
297
295
  }
298
296
 
299
- /* Ghost variant — visible border at rest, full 3D bevel on hover */
300
- .salmex-btn-ghost {
297
+ .sx-btn-primary:disabled {
298
+ animation-play-state: paused;
299
+ }
300
+
301
+ /* Ghost variant — transparent, subtle */
302
+ .sx-btn-ghost {
301
303
  background: transparent;
302
- box-shadow: 0 0 0 2px rgb(var(--salmex-border-dark));
303
- color: rgb(var(--salmex-text-primary));
304
- font-weight: 600;
304
+ border: none;
305
+ color: var(--sx-color-text-secondary);
306
+ box-shadow: none;
305
307
  }
306
308
 
307
- .salmex-btn-ghost:hover:not(:disabled) {
308
- background: rgb(var(--salmex-button-face));
309
- transform: translateY(-1px);
310
- box-shadow:
311
- inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
312
- inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
313
- 0 0 0 2px rgb(var(--salmex-border-dark)),
314
- 4px 4px 1px rgb(0 0 0 / 0.25);
309
+ .sx-btn-ghost:hover:not(:disabled) {
310
+ background: var(--sx-color-surface-2);
311
+ color: var(--sx-color-text);
312
+ transform: none;
313
+ box-shadow: none;
315
314
  }
316
315
 
317
- .salmex-btn-ghost:active:not(:disabled) {
318
- background: rgb(var(--salmex-button-face));
319
- box-shadow:
320
- inset -1px -1px 0 rgb(var(--salmex-button-highlight)),
321
- inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
322
- 0 0 0 2px rgb(var(--salmex-border-dark)),
323
- 2px 2px 1px rgb(0 0 0 / 0.3);
324
- transform: translate(1px, 1px);
316
+ .sx-btn-ghost:active:not(:disabled) {
317
+ background: var(--sx-color-surface-2);
318
+ transform: translateY(0);
319
+ box-shadow: none;
325
320
  }
326
321
 
327
- .salmex-btn-ghost:focus-visible {
328
- outline: none;
329
- box-shadow:
330
- 0 0 0 2px rgb(var(--salmex-border-dark)),
331
- 0 0 0 2px rgb(var(--salmex-midnight-black)),
332
- 0 0 2px 5px rgb(var(--salmex-crown-yellow));
322
+ /* Danger variant — red glow */
323
+ .sx-btn-danger {
324
+ background: var(--sx-color-red-hover);
325
+ color: var(--sx-color-red);
326
+ border: 1px solid rgba(220, 38, 38, 0.2);
333
327
  }
334
328
 
335
- :global([data-theme='dark']) .salmex-btn-ghost:focus-visible {
336
- box-shadow:
337
- 0 0 0 2px rgb(var(--salmex-border-dark)),
338
- 0 0 2px 4px rgb(var(--salmex-crown-yellow));
329
+ .sx-btn-danger:hover:not(:disabled) {
330
+ background: rgba(220, 38, 38, 0.2);
331
+ transform: translateY(-2px);
332
+ box-shadow: var(--sx-shadow-glow-red);
333
+ border-color: rgba(220, 38, 38, 0.4);
339
334
  }
340
335
 
341
- /* Dark mode — more visible yellow underline on primary */
342
- :global([data-theme='dark']) .salmex-btn-primary::after {
343
- opacity: 0.9;
336
+ .sx-btn-danger:active:not(:disabled) {
337
+ transform: translateY(0);
338
+ box-shadow: var(--sx-shadow-sm);
344
339
  }
345
340
 
346
341
  /* ========================================
347
342
  CONTENT & LAYOUT
348
343
  ======================================== */
349
- .salmex-btn-content {
344
+ .sx-btn-content {
350
345
  display: inline-flex;
351
346
  align-items: center;
352
- gap: var(--salmex-space-2);
347
+ gap: var(--sx-space-2);
353
348
  position: relative;
354
349
  z-index: 1;
355
350
  }
356
351
 
357
- .salmex-btn-icon {
352
+ .sx-btn-icon {
358
353
  display: inline-flex;
359
354
  flex-shrink: 0;
360
355
  line-height: 0;
361
356
  }
362
357
 
363
- .salmex-btn-shortcut {
364
- margin-left: var(--salmex-space-3);
358
+ .sx-btn-shortcut {
359
+ margin-left: var(--sx-space-3);
365
360
  font-size: 0.8em;
366
- opacity: 0.8;
367
- font-family: var(--salmex-font-mono);
361
+ opacity: 0.9;
362
+ font-family: var(--sx-font-mono);
368
363
  font-weight: 600;
369
364
  padding: 2px 6px;
370
- background: rgba(0, 0, 0, 0.1);
371
- border-radius: var(--salmex-radius-sm);
365
+ background: var(--sx-color-surface-3);
366
+ border-radius: var(--sx-radius-sm);
367
+ }
368
+
369
+ /* Shortcut on primary: semi-transparent against the vermilion fill */
370
+ .sx-btn-primary .sx-btn-shortcut {
371
+ background: rgba(0, 0, 0, 0.15);
372
+ color: var(--sx-color-text-inverse);
373
+ }
374
+
375
+ /* Shortcut on danger: match the red text */
376
+ .sx-btn-danger .sx-btn-shortcut {
377
+ background: rgba(220, 38, 38, 0.15);
378
+ color: var(--sx-color-red);
379
+ }
380
+
381
+ /* Shortcut on ghost: subtle */
382
+ .sx-btn-ghost .sx-btn-shortcut {
383
+ background: var(--sx-color-surface-2);
384
+ color: var(--sx-color-text-secondary);
372
385
  }
373
386
 
374
387
  /* ========================================
375
388
  REDUCED MOTION
376
389
  ======================================== */
377
390
  @media (prefers-reduced-motion: reduce) {
378
- .salmex-btn {
391
+ .sx-btn {
379
392
  transition: none;
380
393
  }
381
-
382
- .salmex-btn:hover:not(:disabled) {
394
+
395
+ .sx-btn:hover:not(:disabled) {
383
396
  transform: none;
384
397
  }
385
-
386
- .salmex-btn:active:not(:disabled) {
398
+
399
+ .sx-btn:active:not(:disabled) {
387
400
  transform: none;
388
401
  }
402
+
403
+ /* Fallback: solid vermilion, no aurora/glow animation */
404
+ .sx-btn-primary {
405
+ animation: none;
406
+ background: var(--sx-color-primary);
407
+ box-shadow: var(--sx-shadow-sm);
408
+ }
389
409
  }
390
410
  </style>
@@ -1,7 +1,7 @@
1
1
  import type { Snippet } from 'svelte';
2
2
  import type { HTMLButtonAttributes } from 'svelte/elements';
3
3
  type ButtonSize = 'sm' | 'md' | 'lg';
4
- type ButtonVariant = 'default' | 'primary' | 'ghost';
4
+ type ButtonVariant = 'default' | 'primary' | 'ghost' | 'danger';
5
5
  interface Props extends Omit<HTMLButtonAttributes, 'class'> {
6
6
  /** Visual variant of the button */
7
7
  variant?: ButtonVariant;
@@ -27,8 +27,8 @@ interface Props extends Omit<HTMLButtonAttributes, 'class'> {
27
27
  /**
28
28
  * Button
29
29
  *
30
- * Win2K × Basquiat - Bold 3D button with neo-expressionist flair.
31
- * Raw structure, expressive energy, world-class accessibility.
30
+ * INFRARED Glassmorphism button with glow effects.
31
+ * Clean geometry, expressive energy, world-class accessibility.
32
32
  *
33
33
  * @example
34
34
  * <Button variant="default" size="md" onclick={() => handleClick()}>
@@ -1 +1 @@
1
- {"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/primitives/Button/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAI5D,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrC,KAAK,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD,UAAU,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC;IAC1D,mCAAmC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAkED;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/primitives/Button/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAI5D,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrC,KAAK,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhE,UAAU,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC;IAC1D,mCAAmC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAkED;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}