@phcdevworks/spectre-ui 0.2.2 → 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 (5) hide show
  1. package/README.md +108 -14
  2. package/dist/components.css +228 -189
  3. package/dist/index.css +1068 -4
  4. package/dist/utilities.css +7 -7
  5. package/package.json +7 -4
package/dist/components.css CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  :root {
4
4
  /* button roles */
5
- --sp-component-button-border-base: var(--sp-component-button-ghost-bg, var(--sp-button-ghost-bg));
5
+ --sp-component-button-border-base: var(--sp-component-button-ghost-bg);
6
6
  --sp-component-button-shadow: var(--sp-shadow-sm);
7
7
  --sp-component-button-primary-bg: var(--sp-button-primary-bg);
8
8
  --sp-component-button-primary-bg-hover: var(--sp-button-primary-bghover);
@@ -38,11 +38,11 @@
38
38
  --sp-component-button-success-text-disabled: var(--sp-button-success-textdisabled);
39
39
 
40
40
  /* card roles */
41
- --sp-component-card-bg: var(--sp-surface-card, var(--sp-color-neutral-50));
42
- --sp-component-card-text: var(--sp-text-on-surface-default, var(--sp-color-neutral-900));
43
- --sp-component-card-text-muted: var(--sp-text-on-surface-muted, var(--sp-color-neutral-600));
41
+ --sp-component-card-bg: var(--sp-surface-card);
42
+ --sp-component-card-text: var(--sp-text-on-surface-default);
43
+ --sp-component-card-text-muted: var(--sp-text-on-surface-muted);
44
44
  --sp-component-card-border: var(--sp-color-neutral-200);
45
- --sp-component-card-border-base: var(--sp-component-card-ghost-border, var(--sp-component-card-bg));
45
+ --sp-component-card-border-base: var(--sp-component-card-ghost-border);
46
46
  --sp-component-card-shadow: var(--sp-shadow-sm);
47
47
  --sp-component-card-shadow-elevated: var(--sp-shadow-lg);
48
48
  --sp-component-card-shadow-flat: var(--sp-shadow-none);
@@ -50,84 +50,62 @@
50
50
  --sp-component-card-shadow-ghost: var(--sp-shadow-none);
51
51
  --sp-component-card-outline-bg: var(--sp-component-card-bg);
52
52
  --sp-component-card-outline-border: var(--sp-component-card-border);
53
- --sp-component-card-ghost-bg: var(--sp-component-button-ghost-bg, var(--sp-button-ghost-bg));
53
+ --sp-component-card-ghost-bg: var(--sp-component-button-ghost-bg);
54
54
  --sp-component-card-ghost-border: var(--sp-component-card-ghost-bg);
55
55
 
56
56
  /* input roles */
57
- --sp-component-input-role-border: var(--sp-component-input-border,
58
- var(--sp-surface-input, var(--sp-color-neutral-200, #e2e8f0)));
59
- --sp-component-input-role-bg: var(--sp-component-input-bg,
60
- var(--sp-surface-input, var(--sp-color-neutral-50, #f8fafc)));
61
- --sp-component-input-role-text: var(--sp-component-input-text,
62
- var(--sp-text-on-surface-default, var(--sp-color-neutral-900, #0f172a)));
63
- --sp-component-input-role-placeholder: var(--sp-component-input-placeholder,
64
- var(--sp-text-on-surface-muted, var(--sp-color-neutral-500, #64748b)));
65
- --sp-component-input-role-border-focus: var(--sp-component-input-border-focus,
66
- var(--sp-color-brand-500, #8652ff));
67
- --sp-component-input-role-ring: var(--sp-component-input-ring,
68
- var(--sp-color-brand-500, #8652ff));
69
- --sp-component-input-role-border-error: var(--sp-component-input-border-error,
70
- var(--sp-color-error-500, #ef4444));
71
- --sp-component-input-role-bg-error: var(--sp-component-input-bg-error,
72
- var(--sp-color-error-50, #fef2f2));
73
- --sp-component-input-role-text-error: var(--sp-component-input-text-error,
74
- var(--sp-color-error-700, #b91c1c));
75
- --sp-component-input-role-border-success: var(--sp-component-input-border-success,
76
- var(--sp-color-success-500, #22c55e));
77
- --sp-component-input-role-bg-success: var(--sp-component-input-bg-success,
78
- var(--sp-color-success-50, #f0fdf4));
79
- --sp-component-input-role-text-success: var(--sp-component-input-text-success,
80
- var(--sp-color-success-700, #15803d));
81
- --sp-component-input-role-bg-disabled: var(--sp-component-input-bg-disabled,
82
- var(--sp-surface-input, var(--sp-color-neutral-50, #f8fafc)));
83
- --sp-component-input-role-text-disabled: var(--sp-component-input-text-disabled,
84
- var(--sp-text-on-surface-muted, var(--sp-color-neutral-400, #94a3b8)));
85
- --sp-component-input-role-border-disabled: var(--sp-component-input-border-disabled,
86
- var(--sp-surface-input, var(--sp-color-neutral-200, #e2e8f0)));
57
+ --sp-component-input-role-border: var(--sp-color-neutral-300);
58
+ --sp-component-input-role-bg: var(--sp-surface-input);
59
+ --sp-component-input-role-text: var(--sp-component-input-text);
60
+ --sp-component-input-role-placeholder: var(--sp-component-input-placeholder);
61
+ --sp-component-input-role-border-focus: var(--sp-color-focus-primary);
62
+ --sp-component-input-role-ring: var(--sp-color-focus-primary);
63
+ --sp-component-input-role-border-error: var(--sp-color-error-500);
64
+ --sp-component-input-role-bg-error: var(--sp-color-error-50);
65
+ --sp-component-input-role-text-error: var(--sp-color-error-700);
66
+ --sp-component-input-role-border-success: var(--sp-color-success-500);
67
+ --sp-component-input-role-bg-success: var(--sp-color-success-50);
68
+ --sp-component-input-role-text-success: var(--sp-color-success-700);
69
+ --sp-component-input-role-bg-disabled: var(--sp-surface-input);
70
+ --sp-component-input-role-text-disabled: var(--sp-text-on-surface-meta);
71
+ /* Important: border-disabled should fall back to a BORDER token, not a surface token */
72
+ --sp-component-input-role-border-disabled: var(--sp-color-neutral-200);
87
73
 
88
74
  /* badge roles */
89
- --sp-component-badge-font: var(--sp-font-family-sans, system-ui);
90
- --sp-component-badge-weight: var(--sp-font-sm-weight, 500);
91
- --sp-component-badge-gap: var(--sp-space-4xs, 0.125rem);
92
- --sp-component-badge-radius: var(--sp-radius-pill, 999px);
93
- --sp-component-badge-primary-bg: var(--sp-badge-primary-bg,
94
- var(--sp-color-brand-500, #8652ff));
95
- --sp-component-badge-primary-text: var(--sp-badge-primary-text,
96
- var(--sp-text-on-surface-default, var(--sp-color-neutral-900, #0f172a)));
97
- --sp-component-badge-success-bg: var(--sp-badge-success-bg,
98
- var(--sp-color-success-500, #22c55e));
99
- --sp-component-badge-success-text: var(--sp-badge-success-text,
100
- var(--sp-text-on-surface-default, var(--sp-color-neutral-900, #0f172a)));
101
- --sp-component-badge-warning-bg: var(--sp-badge-warning-bg,
102
- var(--sp-color-warning-500, #f59e0b));
103
- --sp-component-badge-warning-text: var(--sp-badge-warning-text,
104
- var(--sp-text-on-surface-default, var(--sp-color-neutral-900, #0f172a)));
105
- --sp-component-badge-danger-bg: var(--sp-badge-danger-bg,
106
- var(--sp-color-error-500, #ef4444));
107
- --sp-component-badge-danger-text: var(--sp-badge-danger-text,
108
- var(--sp-text-on-surface-default, var(--sp-color-neutral-900, #0f172a)));
109
- --sp-component-badge-padding-x-sm: var(--sp-space-xs, 0.5rem);
110
- --sp-component-badge-padding-x-md: var(--sp-space-sm, 0.75rem);
111
- --sp-component-badge-padding-x-lg: var(--sp-space-md, 1rem);
112
- --sp-component-badge-padding-y-sm: var(--sp-space-4xs, 0.125rem);
113
- --sp-component-badge-padding-y-md: var(--sp-space-3xs, 0.1875rem);
114
- --sp-component-badge-padding-y-lg: var(--sp-space-2xs, 0.25rem);
75
+ --sp-component-badge-font: var(--sp-font-family-sans);
76
+ --sp-component-badge-weight: var(--sp-font-sm-weight);
77
+ --sp-component-badge-gap: var(--sp-space-4);
78
+ --sp-component-badge-radius: var(--sp-radius-pill);
79
+ --sp-component-badge-primary-bg: var(--sp-button-primary-bg);
80
+ --sp-component-badge-primary-text: var(--sp-button-text-on-primary);
81
+ --sp-component-badge-success-bg: var(--sp-badge-success-bg);
82
+ --sp-component-badge-success-text: var(--sp-badge-success-text);
83
+ --sp-component-badge-warning-bg: var(--sp-badge-warning-bg);
84
+ --sp-component-badge-warning-text: var(--sp-badge-warning-text);
85
+ --sp-component-badge-danger-bg: var(--sp-badge-danger-bg);
86
+ --sp-component-badge-danger-text: var(--sp-badge-danger-text);
87
+ --sp-component-badge-padding-x-sm: var(--sp-space-8);
88
+ --sp-component-badge-padding-x-md: var(--sp-space-12);
89
+ --sp-component-badge-padding-x-lg: var(--sp-space-16);
90
+ --sp-component-badge-padding-y-sm: var(--sp-space-4);
91
+ --sp-component-badge-padding-y-md: var(--sp-space-4);
92
+ --sp-component-badge-padding-y-lg: var(--sp-space-4);
115
93
 
116
94
  /* icon box roles */
117
- --sp-component-iconbox-radius: var(--sp-radius-lg, 8px);
118
- --sp-component-iconbox-size-sm: var(--sp-space-xl, 2rem);
119
- --sp-component-iconbox-size-md: var(--sp-space-2xl, 3rem);
120
- --sp-component-iconbox-size-lg: var(--sp-space-3xl, 4rem);
121
- --sp-component-iconbox-primary-bg: var(--sp-color-brand-50, #f5f0ff);
122
- --sp-component-iconbox-primary-text: var(--sp-color-brand-700, #5626b4);
123
- --sp-component-iconbox-success-bg: var(--sp-color-success-50, #f0fdf4);
124
- --sp-component-iconbox-success-text: var(--sp-color-success-700, #15803d);
125
- --sp-component-iconbox-warning-bg: var(--sp-color-warning-50, #fffbeb);
126
- --sp-component-iconbox-warning-text: var(--sp-color-warning-700, #b45309);
127
- --sp-component-iconbox-danger-bg: var(--sp-color-error-50, #fef2f2);
128
- --sp-component-iconbox-danger-text: var(--sp-color-error-700, #b91c1c);
129
- --sp-component-iconbox-info-bg: var(--sp-color-info-50, #eff6ff);
130
- --sp-component-iconbox-info-text: var(--sp-color-info-700, #1d4ed8);
95
+ --sp-component-iconbox-radius: var(--sp-radius-lg);
96
+ --sp-component-iconbox-size-sm: var(--sp-space-32);
97
+ --sp-component-iconbox-size-md: var(--sp-space-48);
98
+ --sp-component-iconbox-size-lg: var(--sp-space-64);
99
+ --sp-component-iconbox-primary-bg: var(--sp-color-brand-50);
100
+ --sp-component-iconbox-primary-text: var(--sp-icon-box-icon-default);
101
+ --sp-component-iconbox-success-bg: var(--sp-color-success-50);
102
+ --sp-component-iconbox-success-text: var(--sp-icon-box-icon-success);
103
+ --sp-component-iconbox-warning-bg: var(--sp-color-warning-50);
104
+ --sp-component-iconbox-warning-text: var(--sp-icon-box-icon-warning);
105
+ --sp-component-iconbox-danger-bg: var(--sp-color-error-50);
106
+ --sp-component-iconbox-danger-text: var(--sp-icon-box-icon-danger);
107
+ --sp-component-iconbox-info-bg: var(--sp-color-info-50);
108
+ --sp-component-iconbox-info-text: var(--sp-badge-info-text);
131
109
  }
132
110
 
133
111
  /* BUTTONS -------------------------------------------------------------- */
@@ -135,37 +113,36 @@
135
113
  display: inline-flex;
136
114
  align-items: center;
137
115
  justify-content: center;
138
- gap: var(--sp-space-2xs, 0.25rem);
139
- padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
140
- border-radius: var(--sp-radius-md, 4px);
141
- border: 1px solid var(--sp-component-button-border-base,
142
- var(--sp-component-button-ghost-bg, var(--sp-button-ghost-bg)));
143
- font-family: var(--sp-font-family-sans, system-ui);
144
- font-size: var(--sp-font-md-size, 1rem);
116
+ gap: var(--sp-space-4);
117
+ padding: var(--sp-space-4) var(--sp-space-16);
118
+ border-radius: var(--sp-radius-md);
119
+ border: 1px solid var(--sp-component-button-border-base);
120
+ font-family: var(--sp-font-family-sans);
121
+ font-size: var(--sp-font-md-size);
145
122
  line-height: 1;
146
- font-weight: var(--sp-font-md-weight, 500);
123
+ font-weight: var(--sp-font-md-weight);
147
124
  text-decoration: none;
148
125
  appearance: none;
149
126
  transition:
150
- background-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
151
- color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
152
- box-shadow var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
153
- border-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease);
127
+ background-color var(--sp-duration-fast) var(--sp-easing-out),
128
+ color var(--sp-duration-fast) var(--sp-easing-out),
129
+ box-shadow var(--sp-duration-fast) var(--sp-easing-out),
130
+ border-color var(--sp-duration-fast) var(--sp-easing-out);
154
131
  cursor: pointer;
155
- min-height: var(--sp-min-touch-target, 44px);
132
+ min-height: var(--sp-min-touch-target);
156
133
  }
157
134
 
158
135
  .sp-btn:disabled,
159
136
  .sp-btn[aria-disabled="true"],
160
137
  .sp-btn.sp-btn--disabled {
161
138
  cursor: not-allowed;
162
- opacity: var(--sp-opacity-disabled, 0.5);
139
+ opacity: var(--sp-opacity-disabled);
163
140
  pointer-events: none;
164
141
  }
165
142
 
166
143
  .sp-btn--loading {
167
144
  pointer-events: none;
168
- opacity: var(--sp-opacity-loading, 0.7);
145
+ opacity: var(--sp-opacity-active);
169
146
  }
170
147
 
171
148
  .sp-btn--full {
@@ -173,43 +150,55 @@
173
150
  }
174
151
 
175
152
  .sp-btn--icon {
176
- padding-inline: var(--sp-space-sm, 0.75rem);
177
- padding-block: var(--sp-space-3xs, 0.125rem);
153
+ padding-inline: var(--sp-space-12);
154
+ padding-block: var(--sp-space-4);
178
155
  }
179
156
 
180
157
  /* sizes */
181
158
  .sp-btn--sm {
182
- padding: var(--sp-space-3xs, 0.125rem) var(--sp-space-sm, 0.75rem);
183
- font-size: var(--sp-font-sm-size, 0.875rem);
184
- line-height: var(--sp-font-sm-line-height, 1.5rem);
159
+ padding: var(--sp-space-4) var(--sp-space-12);
160
+ font-size: var(--sp-font-sm-size);
161
+ line-height: var(--sp-font-sm-line-height);
185
162
  }
186
163
 
187
164
  .sp-btn--md {
188
- padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
189
- font-size: var(--sp-font-md-size, 1rem);
190
- line-height: var(--sp-font-md-line-height, 1.75rem);
165
+ padding: var(--sp-space-4) var(--sp-space-16);
166
+ font-size: var(--sp-font-md-size);
167
+ line-height: var(--sp-font-md-line-height);
191
168
  }
192
169
 
193
170
  .sp-btn--lg {
194
- padding: var(--sp-space-xs, 0.5rem) var(--sp-space-lg, 1.5rem);
195
- font-size: var(--sp-font-lg-size, 1.125rem);
196
- line-height: var(--sp-font-lg-line-height, 1.75rem);
171
+ padding: var(--sp-space-8) var(--sp-space-24);
172
+ font-size: var(--sp-font-lg-size);
173
+ line-height: var(--sp-font-lg-line-height);
174
+ }
175
+
176
+ /* Generic forced-state helpers (safe, variant rules still set actual colors) */
177
+ .sp-btn.sp-btn--hover,
178
+ .sp-btn.is-hover {
179
+ /* no-op here; variant sections below define the actual hover colors */
180
+ }
181
+
182
+ .sp-btn.sp-btn--active,
183
+ .sp-btn.is-active {
184
+ /* no-op here; variant sections below define the actual active colors */
197
185
  }
198
186
 
199
187
  /* primary */
200
188
  .sp-btn--primary {
201
189
  background-color: var(--sp-component-button-primary-bg);
202
190
  color: var(--sp-component-button-primary-text);
203
- box-shadow: var(--sp-component-button-shadow,
204
- var(--sp-shadow-sm));
191
+ box-shadow: var(--sp-component-button-shadow);
205
192
  }
206
193
 
207
194
  .sp-btn--primary.sp-btn--hover,
195
+ .sp-btn--primary.is-hover,
208
196
  .sp-btn--primary:hover {
209
197
  background-color: var(--sp-component-button-primary-bg-hover);
210
198
  }
211
199
 
212
200
  .sp-btn--primary.sp-btn--active,
201
+ .sp-btn--primary.is-active,
213
202
  .sp-btn--primary:active {
214
203
  background-color: var(--sp-component-button-primary-bg-active);
215
204
  }
@@ -229,11 +218,13 @@
229
218
  }
230
219
 
231
220
  .sp-btn--secondary.sp-btn--hover,
221
+ .sp-btn--secondary.is-hover,
232
222
  .sp-btn--secondary:hover {
233
223
  background-color: var(--sp-component-button-secondary-bg-hover);
234
224
  }
235
225
 
236
226
  .sp-btn--secondary.sp-btn--active,
227
+ .sp-btn--secondary.is-active,
237
228
  .sp-btn--secondary:active {
238
229
  background-color: var(--sp-component-button-secondary-bg-active);
239
230
  }
@@ -252,11 +243,13 @@
252
243
  }
253
244
 
254
245
  .sp-btn--ghost.sp-btn--hover,
246
+ .sp-btn--ghost.is-hover,
255
247
  .sp-btn--ghost:hover {
256
248
  background-color: var(--sp-component-button-ghost-bg-hover);
257
249
  }
258
250
 
259
251
  .sp-btn--ghost.sp-btn--active,
252
+ .sp-btn--ghost.is-active,
260
253
  .sp-btn--ghost:active {
261
254
  background-color: var(--sp-component-button-ghost-bg-active);
262
255
  }
@@ -274,11 +267,13 @@
274
267
  }
275
268
 
276
269
  .sp-btn--danger.sp-btn--hover,
270
+ .sp-btn--danger.is-hover,
277
271
  .sp-btn--danger:hover {
278
272
  background-color: var(--sp-component-button-danger-bg-hover);
279
273
  }
280
274
 
281
275
  .sp-btn--danger.sp-btn--active,
276
+ .sp-btn--danger.is-active,
282
277
  .sp-btn--danger:active {
283
278
  background-color: var(--sp-component-button-danger-bg-active);
284
279
  }
@@ -296,11 +291,13 @@
296
291
  }
297
292
 
298
293
  .sp-btn--success.sp-btn--hover,
294
+ .sp-btn--success.is-hover,
299
295
  .sp-btn--success:hover {
300
296
  background-color: var(--sp-component-button-success-bg-hover);
301
297
  }
302
298
 
303
299
  .sp-btn--success.sp-btn--active,
300
+ .sp-btn--success.is-active,
304
301
  .sp-btn--success:active {
305
302
  background-color: var(--sp-component-button-success-bg-active);
306
303
  }
@@ -315,45 +312,45 @@
315
312
 
316
313
  .sp-input-wrapper {
317
314
  display: grid;
318
- gap: var(--sp-space-4xs, 0.125rem);
315
+ gap: var(--sp-space-4);
319
316
  width: 100%;
320
317
  }
321
318
 
322
319
  .sp-label {
323
320
  color: var(--sp-component-input-role-text);
324
- font-size: var(--sp-font-sm-size, 0.875rem);
325
- font-weight: var(--sp-font-sm-weight, 500);
326
- line-height: var(--sp-font-sm-line-height, 1.25rem);
321
+ font-size: var(--sp-font-sm-size);
322
+ font-weight: var(--sp-font-sm-weight);
323
+ line-height: var(--sp-font-sm-line-height);
327
324
  }
328
325
 
329
326
  .sp-helper-text {
330
- color: var(--sp-text-on-surface-muted);
331
- font-size: var(--sp-font-xs-size, 0.75rem);
332
- line-height: var(--sp-font-xs-line-height, 1rem);
327
+ color: var(--sp-text-on-surface-meta);
328
+ font-size: var(--sp-font-xs-size);
329
+ line-height: var(--sp-font-xs-line-height);
333
330
  }
334
331
 
335
332
  .sp-error-message {
336
- color: var(--sp-color-error-600, #dc2626);
337
- font-size: var(--sp-font-xs-size, 0.75rem);
338
- line-height: var(--sp-font-xs-line-height, 1rem);
333
+ color: var(--sp-component-input-role-text-error);
334
+ font-size: var(--sp-font-xs-size);
335
+ line-height: var(--sp-font-xs-line-height);
339
336
  }
340
337
 
341
338
  .sp-input {
342
339
  width: 100%;
343
340
  display: block;
344
341
  appearance: none;
345
- padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
346
- border-radius: var(--sp-radius-md, 4px);
342
+ padding: var(--sp-space-4) var(--sp-space-16);
343
+ border-radius: var(--sp-radius-md);
347
344
  border: 1px solid var(--sp-component-input-role-border);
348
345
  background-color: var(--sp-component-input-role-bg);
349
346
  color: var(--sp-component-input-role-text);
350
- font-family: var(--sp-font-family-sans, system-ui);
351
- font-size: var(--sp-font-md-size, 1rem);
352
- line-height: var(--sp-font-md-line-height, 1.5rem);
347
+ font-family: var(--sp-font-family-sans);
348
+ font-size: var(--sp-font-md-size);
349
+ line-height: var(--sp-font-md-line-height);
353
350
  transition:
354
- border-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
355
- box-shadow var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
356
- background-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease);
351
+ border-color var(--sp-duration-fast) var(--sp-easing-out),
352
+ box-shadow var(--sp-duration-fast) var(--sp-easing-out),
353
+ background-color var(--sp-duration-fast) var(--sp-easing-out);
357
354
  }
358
355
 
359
356
  .sp-input::placeholder {
@@ -361,21 +358,21 @@
361
358
  }
362
359
 
363
360
  .sp-input--sm {
364
- padding: var(--sp-space-3xs, 0.125rem) var(--sp-space-sm, 0.75rem);
365
- font-size: var(--sp-font-sm-size, 0.875rem);
366
- line-height: var(--sp-font-sm-line-height, 1.25rem);
361
+ padding: var(--sp-space-4) var(--sp-space-12);
362
+ font-size: var(--sp-font-sm-size);
363
+ line-height: var(--sp-font-sm-line-height);
367
364
  }
368
365
 
369
366
  .sp-input--md {
370
- padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
371
- font-size: var(--sp-font-md-size, 1rem);
372
- line-height: var(--sp-font-md-line-height, 1.5rem);
367
+ padding: var(--sp-space-4) var(--sp-space-16);
368
+ font-size: var(--sp-font-md-size);
369
+ line-height: var(--sp-font-md-line-height);
373
370
  }
374
371
 
375
372
  .sp-input--lg {
376
- padding: var(--sp-space-xs, 0.5rem) var(--sp-space-lg, 1.5rem);
377
- font-size: var(--sp-font-lg-size, 1.125rem);
378
- line-height: var(--sp-font-lg-line-height, 1.75rem);
373
+ padding: var(--sp-space-8) var(--sp-space-24);
374
+ font-size: var(--sp-font-lg-size);
375
+ line-height: var(--sp-font-lg-line-height);
379
376
  }
380
377
 
381
378
  .sp-input--full {
@@ -385,20 +382,21 @@
385
382
  .sp-input:focus,
386
383
  .sp-input--focus {
387
384
  border-color: var(--sp-component-input-role-border-focus);
388
- box-shadow: 0 0 0 var(--sp-focus-ring-width, 2px) var(--sp-component-input-role-ring);
385
+ box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + 1px) var(--sp-component-input-role-ring);
389
386
  outline: none;
390
387
  }
391
388
 
389
+ /* State styling should not force typed text to be red/green by default */
392
390
  .sp-input--error {
393
391
  border-color: var(--sp-component-input-role-border-error);
394
392
  background-color: var(--sp-component-input-role-bg-error);
395
- color: var(--sp-component-input-role-text-error);
393
+ color: var(--sp-component-input-role-text);
396
394
  }
397
395
 
398
396
  .sp-input--success {
399
397
  border-color: var(--sp-component-input-role-border-success);
400
398
  background-color: var(--sp-component-input-role-bg-success);
401
- color: var(--sp-component-input-role-text-success);
399
+ color: var(--sp-component-input-role-text);
402
400
  }
403
401
 
404
402
  .sp-input--disabled {
@@ -408,6 +406,10 @@
408
406
  cursor: not-allowed;
409
407
  }
410
408
 
409
+ .sp-input--disabled::placeholder {
410
+ color: var(--sp-component-input-role-text-disabled);
411
+ }
412
+
411
413
  .sp-input--disabled,
412
414
  .sp-input--disabled:focus {
413
415
  box-shadow: none;
@@ -418,15 +420,13 @@
418
420
  .sp-card {
419
421
  background-color: var(--sp-component-card-bg);
420
422
  color: var(--sp-component-card-text);
421
- border-radius: var(--sp-radius-lg, 8px);
422
- padding: var(--sp-space-lg, 1.5rem);
423
- box-shadow: var(--sp-component-card-shadow, var(--sp-shadow-sm));
424
- border: 1px solid var(--sp-component-card-border-base,
425
- var(--sp-component-card-ghost-border, var(--sp-component-card-bg)));
423
+ border-radius: var(--sp-radius-lg);
424
+ padding: var(--sp-space-24);
425
+ box-shadow: var(--sp-component-card-shadow);
426
+ border: 1px solid var(--sp-component-card-border-base);
426
427
  }
427
428
 
428
- .sp-card p,
429
- .sp-card span {
429
+ .sp-card p {
430
430
  color: var(--sp-component-card-text-muted);
431
431
  }
432
432
 
@@ -436,28 +436,28 @@
436
436
  }
437
437
 
438
438
  .sp-card--elevated {
439
- box-shadow: var(--sp-component-card-shadow-elevated, var(--sp-shadow-lg));
439
+ box-shadow: var(--sp-component-card-shadow-elevated);
440
440
  }
441
441
 
442
442
  .sp-card--flat {
443
- box-shadow: var(--sp-component-card-shadow-flat, var(--sp-shadow-none));
443
+ box-shadow: var(--sp-component-card-shadow-flat);
444
444
  border-color: var(--sp-component-card-border);
445
445
  }
446
446
 
447
447
  .sp-card--outline {
448
- background-color: var(--sp-component-card-outline-bg, var(--sp-component-card-bg));
449
- border-color: var(--sp-component-card-outline-border, var(--sp-component-card-border));
450
- box-shadow: var(--sp-component-card-shadow-outline, var(--sp-shadow-none));
448
+ background-color: var(--sp-component-card-outline-bg);
449
+ border-color: var(--sp-component-card-outline-border);
450
+ box-shadow: var(--sp-component-card-shadow-outline);
451
451
  }
452
452
 
453
453
  .sp-card--ghost {
454
454
  background-color: var(--sp-component-card-ghost-bg);
455
455
  border-color: var(--sp-component-card-ghost-border);
456
- box-shadow: var(--sp-component-card-shadow-ghost, var(--sp-shadow-none));
456
+ box-shadow: var(--sp-component-card-shadow-ghost);
457
457
  }
458
458
 
459
459
  .sp-card--padded {
460
- padding: var(--sp-space-xl, 2rem);
460
+ padding: var(--sp-space-32);
461
461
  }
462
462
 
463
463
  .sp-card--full {
@@ -467,15 +467,15 @@
467
467
  .sp-card--interactive {
468
468
  cursor: pointer;
469
469
  transition:
470
- transform var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
471
- box-shadow var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease);
470
+ transform var(--sp-duration-fast) var(--sp-easing-out),
471
+ box-shadow var(--sp-duration-fast) var(--sp-easing-out);
472
472
  }
473
473
 
474
474
  .sp-card--interactive:hover,
475
475
  .sp-card--interactive:focus-visible,
476
476
  .sp-card--interactive:focus-within {
477
477
  transform: translateY(-1px);
478
- box-shadow: var(--sp-component-card-shadow-elevated, var(--sp-shadow-lg));
478
+ box-shadow: var(--sp-component-card-shadow-elevated);
479
479
  }
480
480
 
481
481
  /* BADGES --------------------------------------------------------------- */
@@ -484,37 +484,33 @@
484
484
  display: inline-flex;
485
485
  align-items: center;
486
486
  justify-content: center;
487
- gap: var(--sp-component-badge-gap, var(--sp-space-4xs, 0.125rem));
488
- border-radius: var(--sp-component-badge-radius, var(--sp-radius-pill, 999px));
489
- font-family: var(--sp-component-badge-font, var(--sp-font-family-sans, system-ui));
490
- font-weight: var(--sp-component-badge-weight, var(--sp-font-sm-weight, 500));
491
- padding: var(--sp-component-badge-padding-y-md, var(--sp-space-3xs, 0.1875rem))
492
- var(--sp-component-badge-padding-x-md, var(--sp-space-sm, 0.75rem));
493
- font-size: var(--sp-font-sm-size, 0.875rem);
494
- line-height: var(--sp-font-sm-line-height, 1.5rem);
487
+ gap: var(--sp-component-badge-gap);
488
+ border-radius: var(--sp-component-badge-radius);
489
+ font-family: var(--sp-component-badge-font);
490
+ font-weight: var(--sp-component-badge-weight);
491
+ padding: var(--sp-component-badge-padding-y-md) var(--sp-component-badge-padding-x-md);
492
+ font-size: var(--sp-font-sm-size);
493
+ line-height: var(--sp-font-sm-line-height);
495
494
  border: 1px solid transparent;
496
495
  white-space: nowrap;
497
496
  }
498
497
 
499
498
  .sp-badge--sm {
500
- padding: var(--sp-component-badge-padding-y-sm, var(--sp-space-4xs, 0.125rem))
501
- var(--sp-component-badge-padding-x-sm, var(--sp-space-xs, 0.5rem));
502
- font-size: var(--sp-font-xs-size, 0.75rem);
503
- line-height: var(--sp-font-xs-line-height, 1.25rem);
499
+ padding: var(--sp-component-badge-padding-y-sm) var(--sp-component-badge-padding-x-sm);
500
+ font-size: var(--sp-font-xs-size);
501
+ line-height: var(--sp-font-xs-line-height);
504
502
  }
505
503
 
506
504
  .sp-badge--md {
507
- padding: var(--sp-component-badge-padding-y-md, var(--sp-space-3xs, 0.1875rem))
508
- var(--sp-component-badge-padding-x-md, var(--sp-space-sm, 0.75rem));
509
- font-size: var(--sp-font-sm-size, 0.875rem);
510
- line-height: var(--sp-font-sm-line-height, 1.5rem);
505
+ padding: var(--sp-component-badge-padding-y-md) var(--sp-component-badge-padding-x-md);
506
+ font-size: var(--sp-font-sm-size);
507
+ line-height: var(--sp-font-sm-line-height);
511
508
  }
512
509
 
513
510
  .sp-badge--lg {
514
- padding: var(--sp-component-badge-padding-y-lg, var(--sp-space-2xs, 0.25rem))
515
- var(--sp-component-badge-padding-x-lg, var(--sp-space-md, 1rem));
516
- font-size: var(--sp-font-md-size, 1rem);
517
- line-height: var(--sp-font-md-line-height, 1.75rem);
511
+ padding: var(--sp-component-badge-padding-y-lg) var(--sp-component-badge-padding-x-lg);
512
+ font-size: var(--sp-font-md-size);
513
+ line-height: var(--sp-font-md-line-height);
518
514
  }
519
515
 
520
516
  .sp-badge--primary {
@@ -543,35 +539,78 @@
543
539
  display: inline-flex;
544
540
  align-items: center;
545
541
  justify-content: center;
546
- border-radius: var(--sp-component-iconbox-radius, var(--sp-radius-lg, 8px));
542
+ border-radius: var(--sp-component-iconbox-radius);
547
543
  color: var(--sp-component-iconbox-primary-text);
548
544
  background-color: var(--sp-component-iconbox-primary-bg);
549
- font-family: var(--sp-font-family-sans, system-ui);
550
- font-weight: var(--sp-font-md-weight, 500);
545
+ font-family: var(--sp-font-family-sans);
546
+ font-weight: var(--sp-font-md-weight);
547
+ line-height: 0;
548
+ }
549
+
550
+ /* Harden icon rendering:
551
+ - center, no baseline wobble
552
+ - force currentColor for common svg shapes
553
+ - preserve stroke-only icons (fill="none")
554
+ */
555
+ .sp-iconbox,
556
+ .sp-iconbox>i {
557
+ line-height: 0;
558
+ }
559
+
560
+ .sp-iconbox>i {
561
+ display: inline-flex;
562
+ align-items: center;
563
+ justify-content: center;
564
+ width: 1em;
565
+ height: 1em;
566
+ flex-shrink: 0;
567
+ vertical-align: middle;
568
+ }
569
+
570
+ .sp-iconbox svg {
571
+ display: block;
572
+ width: 1em;
573
+ height: 1em;
574
+ flex-shrink: 0;
575
+ }
576
+
577
+ /* default to inheriting via currentColor */
578
+ .sp-iconbox svg,
579
+ .sp-iconbox svg path,
580
+ .sp-iconbox svg circle,
581
+ .sp-iconbox svg rect,
582
+ .sp-iconbox svg line,
583
+ .sp-iconbox svg polyline,
584
+ .sp-iconbox svg polygon,
585
+ .sp-iconbox svg g {
586
+ stroke: currentColor;
587
+ }
588
+
589
+ /* only force fill when the icon isn't explicitly stroke-only */
590
+ .sp-iconbox svg:not([fill="none"]),
591
+ .sp-iconbox svg:not([fill="none"]) path,
592
+ .sp-iconbox svg:not([fill="none"]) circle,
593
+ .sp-iconbox svg:not([fill="none"]) rect,
594
+ .sp-iconbox svg:not([fill="none"]) polygon {
595
+ fill: currentColor;
551
596
  }
552
597
 
553
598
  .sp-iconbox--sm {
554
- width: var(--sp-component-iconbox-size-sm, var(--sp-space-xl, 2rem));
555
- height: var(--sp-component-iconbox-size-sm, var(--sp-space-xl, 2rem));
556
- font-size: var(--sp-font-sm-size, 0.875rem);
599
+ width: var(--sp-component-iconbox-size-sm);
600
+ height: var(--sp-component-iconbox-size-sm);
601
+ font-size: var(--sp-font-sm-size);
557
602
  }
558
603
 
559
604
  .sp-iconbox--md {
560
- width: var(--sp-component-iconbox-size-md, var(--sp-space-2xl, 3rem));
561
- height: var(--sp-component-iconbox-size-md, var(--sp-space-2xl, 3rem));
562
- font-size: var(--sp-font-md-size, 1rem);
605
+ width: var(--sp-component-iconbox-size-md);
606
+ height: var(--sp-component-iconbox-size-md);
607
+ font-size: var(--sp-font-md-size);
563
608
  }
564
609
 
565
610
  .sp-iconbox--lg {
566
- width: var(--sp-component-iconbox-size-lg, var(--sp-space-3xl, 4rem));
567
- height: var(--sp-component-iconbox-size-lg, var(--sp-space-3xl, 4rem));
568
- font-size: var(--sp-font-lg-size, 1.125rem);
569
- }
570
-
571
- .sp-iconbox > svg,
572
- .sp-iconbox > i {
573
- width: 1em;
574
- height: 1em;
611
+ width: var(--sp-component-iconbox-size-lg);
612
+ height: var(--sp-component-iconbox-size-lg);
613
+ font-size: var(--sp-font-lg-size);
575
614
  }
576
615
 
577
616
  .sp-iconbox--primary {