@phcdevworks/spectre-ui 0.3.0 → 0.4.1

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