@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.
- package/README.md +52 -3
- package/dist/dialogs/ContextMenu/ContextMenu.svelte +97 -94
- package/dist/dialogs/ContextMenu/ContextMenu.svelte.d.ts +3 -2
- package/dist/dialogs/ContextMenu/ContextMenu.svelte.d.ts.map +1 -1
- package/dist/dialogs/Modal/Modal.svelte +112 -116
- package/dist/dialogs/Modal/Modal.svelte.d.ts +1 -1
- package/dist/feedback/Alert/Alert.svelte +119 -220
- package/dist/feedback/Alert/Alert.svelte.d.ts +1 -1
- package/dist/feedback/ProgressBar/ProgressBar.svelte +265 -0
- package/dist/feedback/ProgressBar/ProgressBar.svelte.d.ts +40 -0
- package/dist/feedback/ProgressBar/ProgressBar.svelte.d.ts.map +1 -0
- package/dist/feedback/ProgressBar/index.d.ts +2 -0
- package/dist/feedback/ProgressBar/index.d.ts.map +1 -0
- package/dist/feedback/ProgressBar/index.js +1 -0
- package/dist/feedback/Skeleton/Skeleton.svelte +157 -0
- package/dist/feedback/Skeleton/Skeleton.svelte.d.ts +37 -0
- package/dist/feedback/Skeleton/Skeleton.svelte.d.ts.map +1 -0
- package/dist/feedback/Skeleton/index.d.ts +2 -0
- package/dist/feedback/Skeleton/index.d.ts.map +1 -0
- package/dist/feedback/Skeleton/index.js +1 -0
- package/dist/feedback/Spinner/Spinner.svelte +86 -151
- package/dist/feedback/Spinner/Spinner.svelte.d.ts +5 -3
- package/dist/feedback/Spinner/Spinner.svelte.d.ts.map +1 -1
- package/dist/feedback/Toast/Toaster.svelte +431 -0
- package/dist/feedback/Toast/Toaster.svelte.d.ts +22 -0
- package/dist/feedback/Toast/Toaster.svelte.d.ts.map +1 -0
- package/dist/feedback/Toast/index.d.ts +4 -0
- package/dist/feedback/Toast/index.d.ts.map +1 -0
- package/dist/feedback/Toast/index.js +2 -0
- package/dist/feedback/Toast/toastStore.d.ts +34 -0
- package/dist/feedback/Toast/toastStore.d.ts.map +1 -0
- package/dist/feedback/Toast/toastStore.js +43 -0
- package/dist/feedback/index.d.ts +4 -0
- package/dist/feedback/index.d.ts.map +1 -1
- package/dist/feedback/index.js +3 -0
- package/dist/forms/Checkbox/Checkbox.svelte +87 -104
- package/dist/forms/Checkbox/Checkbox.svelte.d.ts +1 -1
- package/dist/forms/Select/Select.svelte +137 -179
- package/dist/forms/Select/Select.svelte.d.ts +1 -1
- package/dist/forms/Slider/Slider.svelte +356 -0
- package/dist/forms/Slider/Slider.svelte.d.ts +50 -0
- package/dist/forms/Slider/Slider.svelte.d.ts.map +1 -0
- package/dist/forms/Slider/index.d.ts +2 -0
- package/dist/forms/Slider/index.d.ts.map +1 -0
- package/dist/forms/Slider/index.js +1 -0
- package/dist/forms/TextInput/TextInput.svelte +161 -167
- package/dist/forms/TextInput/TextInput.svelte.d.ts +1 -1
- package/dist/forms/Textarea/Textarea.svelte +615 -0
- package/dist/forms/Textarea/Textarea.svelte.d.ts +47 -0
- package/dist/forms/Textarea/Textarea.svelte.d.ts.map +1 -0
- package/dist/forms/Textarea/index.d.ts +2 -0
- package/dist/forms/Textarea/index.d.ts.map +1 -0
- package/dist/forms/Textarea/index.js +1 -0
- package/dist/forms/Toggle/Toggle.svelte +239 -0
- package/dist/forms/Toggle/Toggle.svelte.d.ts +39 -0
- package/dist/forms/Toggle/Toggle.svelte.d.ts.map +1 -0
- package/dist/forms/Toggle/index.d.ts +2 -0
- package/dist/forms/Toggle/index.d.ts.map +1 -0
- package/dist/forms/Toggle/index.js +1 -0
- package/dist/forms/index.d.ts +3 -0
- package/dist/forms/index.d.ts.map +1 -1
- package/dist/forms/index.js +3 -0
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -1
- package/dist/layout/Card/Card.svelte +66 -39
- package/dist/layout/Card/Card.svelte.d.ts +1 -1
- package/dist/layout/Card/Card.svelte.d.ts.map +1 -1
- package/dist/layout/Container/Container.svelte +71 -71
- package/dist/layout/Container/Container.svelte.d.ts +2 -2
- package/dist/layout/ThermalBackground/ThermalBackground.svelte +313 -0
- package/dist/layout/ThermalBackground/ThermalBackground.svelte.d.ts +16 -0
- package/dist/layout/ThermalBackground/ThermalBackground.svelte.d.ts.map +1 -0
- package/dist/layout/ThermalBackground/index.d.ts +2 -0
- package/dist/layout/ThermalBackground/index.d.ts.map +1 -0
- package/dist/layout/ThermalBackground/index.js +1 -0
- package/dist/layout/index.d.ts +1 -0
- package/dist/layout/index.d.ts.map +1 -1
- package/dist/layout/index.js +1 -0
- package/dist/navigation/CommandPalette/CommandPalette.svelte +407 -189
- package/dist/navigation/CommandPalette/CommandPalette.svelte.d.ts +8 -3
- package/dist/navigation/CommandPalette/CommandPalette.svelte.d.ts.map +1 -1
- package/dist/navigation/Tabs/Tabs.svelte +139 -192
- package/dist/navigation/Tabs/Tabs.svelte.d.ts +2 -2
- package/dist/primitives/Badge/Badge.svelte +85 -220
- package/dist/primitives/Badge/Badge.svelte.d.ts +2 -2
- package/dist/primitives/Badge/Badge.svelte.d.ts.map +1 -1
- package/dist/primitives/Button/Button.svelte +214 -194
- package/dist/primitives/Button/Button.svelte.d.ts +3 -3
- package/dist/primitives/Button/Button.svelte.d.ts.map +1 -1
- package/dist/primitives/Tooltip/Tooltip.svelte +260 -0
- package/dist/primitives/Tooltip/Tooltip.svelte.d.ts +36 -0
- package/dist/primitives/Tooltip/Tooltip.svelte.d.ts.map +1 -0
- package/dist/primitives/Tooltip/index.d.ts +2 -0
- package/dist/primitives/Tooltip/index.d.ts.map +1 -0
- package/dist/primitives/Tooltip/index.js +1 -0
- package/dist/primitives/index.d.ts +1 -0
- package/dist/primitives/index.d.ts.map +1 -1
- package/dist/primitives/index.js +1 -0
- package/dist/styles/tokens.css +329 -260
- package/package.json +5 -5
- package/dist/windowing/Window/Window.svelte +0 -637
- package/dist/windowing/Window/Window.svelte.d.ts +0 -65
- package/dist/windowing/Window/Window.svelte.d.ts.map +0 -1
- package/dist/windowing/Window/index.d.ts +0 -2
- package/dist/windowing/Window/index.d.ts.map +0 -1
- package/dist/windowing/Window/index.js +0 -1
- package/dist/windowing/WindowManager/WindowManager.svelte +0 -425
- package/dist/windowing/WindowManager/WindowManager.svelte.d.ts +0 -38
- package/dist/windowing/WindowManager/WindowManager.svelte.d.ts.map +0 -1
- package/dist/windowing/WindowManager/index.d.ts +0 -2
- package/dist/windowing/WindowManager/index.d.ts.map +0 -1
- package/dist/windowing/WindowManager/index.js +0 -1
- package/dist/windowing/index.d.ts +0 -5
- package/dist/windowing/index.d.ts.map +0 -1
- package/dist/windowing/index.js +0 -3
- package/dist/windowing/windowStore.svelte.d.ts +0 -49
- package/dist/windowing/windowStore.svelte.d.ts.map +0 -1
- package/dist/windowing/windowStore.svelte.js +0 -170
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
<!--
|
|
2
2
|
@component Button
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
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
|
-
'
|
|
72
|
-
`
|
|
73
|
-
`
|
|
74
|
-
iconOnly && '
|
|
75
|
-
fullWidth && !iconOnly && '
|
|
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="
|
|
83
|
+
<span class="sx-btn-content">
|
|
84
84
|
{#if iconLeft}
|
|
85
|
-
<span class="
|
|
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="
|
|
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="
|
|
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 -
|
|
110
|
+
BASE BUTTON - INFRARED
|
|
111
111
|
======================================== */
|
|
112
|
-
.
|
|
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(--
|
|
118
|
-
font-family: var(--
|
|
119
|
-
font-weight:
|
|
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
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
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
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
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
|
-
/*
|
|
167
|
-
.
|
|
168
|
-
|
|
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
|
-
/*
|
|
178
|
-
.
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
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
|
-
|
|
187
|
-
|
|
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
|
-
.
|
|
160
|
+
.sx-btn:disabled {
|
|
192
161
|
opacity: 0.5;
|
|
193
162
|
cursor: not-allowed;
|
|
194
|
-
color:
|
|
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
|
-
.
|
|
202
|
-
height:
|
|
203
|
-
padding: 0 var(--
|
|
204
|
-
font-size: var(--
|
|
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
|
-
.
|
|
208
|
-
height:
|
|
209
|
-
padding: 0 var(--
|
|
210
|
-
font-size: var(--
|
|
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
|
-
.
|
|
214
|
-
height:
|
|
215
|
-
padding: 0 var(--
|
|
216
|
-
font-size: var(--
|
|
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
|
-
.
|
|
221
|
-
width:
|
|
188
|
+
.sx-btn-icon-only.sx-btn-sm {
|
|
189
|
+
width: 28px;
|
|
222
190
|
padding: 0;
|
|
223
191
|
}
|
|
224
192
|
|
|
225
|
-
.
|
|
226
|
-
width:
|
|
193
|
+
.sx-btn-icon-only.sx-btn-md {
|
|
194
|
+
width: 36px;
|
|
227
195
|
padding: 0;
|
|
228
196
|
}
|
|
229
197
|
|
|
230
|
-
.
|
|
231
|
-
width:
|
|
198
|
+
.sx-btn-icon-only.sx-btn-lg {
|
|
199
|
+
width: 44px;
|
|
232
200
|
padding: 0;
|
|
233
201
|
}
|
|
234
202
|
|
|
235
203
|
/* Full width */
|
|
236
|
-
.
|
|
204
|
+
.sx-btn-full-width {
|
|
237
205
|
width: 100%;
|
|
238
206
|
}
|
|
239
207
|
|
|
240
208
|
/* ========================================
|
|
241
|
-
VARIANT STYLES -
|
|
209
|
+
VARIANT STYLES - INFRARED
|
|
242
210
|
======================================== */
|
|
243
|
-
|
|
244
|
-
/* Default variant
|
|
245
|
-
.
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
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
|
-
/*
|
|
266
|
-
.
|
|
248
|
+
/* Grain texture — SVG feTurbulence noise at low opacity */
|
|
249
|
+
.sx-btn-primary::after {
|
|
267
250
|
content: '';
|
|
268
251
|
position: absolute;
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
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
|
-
|
|
285
|
-
|
|
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
|
-
.
|
|
291
|
-
transform:
|
|
290
|
+
.sx-btn-primary:active:not(:disabled) {
|
|
291
|
+
transform: translateY(0);
|
|
292
292
|
box-shadow:
|
|
293
|
-
|
|
294
|
-
|
|
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
|
-
|
|
300
|
-
|
|
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
|
-
|
|
303
|
-
color:
|
|
304
|
-
|
|
304
|
+
border: none;
|
|
305
|
+
color: var(--sx-color-text-secondary);
|
|
306
|
+
box-shadow: none;
|
|
305
307
|
}
|
|
306
308
|
|
|
307
|
-
.
|
|
308
|
-
background:
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
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
|
-
.
|
|
318
|
-
background:
|
|
319
|
-
|
|
320
|
-
|
|
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
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
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
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
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
|
-
|
|
342
|
-
|
|
343
|
-
|
|
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
|
-
.
|
|
344
|
+
.sx-btn-content {
|
|
350
345
|
display: inline-flex;
|
|
351
346
|
align-items: center;
|
|
352
|
-
gap: var(--
|
|
347
|
+
gap: var(--sx-space-2);
|
|
353
348
|
position: relative;
|
|
354
349
|
z-index: 1;
|
|
355
350
|
}
|
|
356
351
|
|
|
357
|
-
.
|
|
352
|
+
.sx-btn-icon {
|
|
358
353
|
display: inline-flex;
|
|
359
354
|
flex-shrink: 0;
|
|
360
355
|
line-height: 0;
|
|
361
356
|
}
|
|
362
357
|
|
|
363
|
-
.
|
|
364
|
-
margin-left: var(--
|
|
358
|
+
.sx-btn-shortcut {
|
|
359
|
+
margin-left: var(--sx-space-3);
|
|
365
360
|
font-size: 0.8em;
|
|
366
|
-
opacity: 0.
|
|
367
|
-
font-family: var(--
|
|
361
|
+
opacity: 0.9;
|
|
362
|
+
font-family: var(--sx-font-mono);
|
|
368
363
|
font-weight: 600;
|
|
369
364
|
padding: 2px 6px;
|
|
370
|
-
background:
|
|
371
|
-
border-radius: var(--
|
|
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
|
-
.
|
|
391
|
+
.sx-btn {
|
|
379
392
|
transition: none;
|
|
380
393
|
}
|
|
381
|
-
|
|
382
|
-
.
|
|
394
|
+
|
|
395
|
+
.sx-btn:hover:not(:disabled) {
|
|
383
396
|
transform: none;
|
|
384
397
|
}
|
|
385
|
-
|
|
386
|
-
.
|
|
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
|
-
*
|
|
31
|
-
*
|
|
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;
|
|
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"}
|