@phcdevworks/spectre-ui 0.0.1 → 0.0.3

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 (11) hide show
  1. package/README.md +251 -27
  2. package/dist/base.css +45 -15
  3. package/dist/components.css +234 -114
  4. package/dist/index.cjs +215 -148
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.d.cts +86 -52
  7. package/dist/index.d.ts +86 -52
  8. package/dist/index.js +212 -143
  9. package/dist/index.js.map +1 -1
  10. package/dist/utilities.css +3 -3
  11. package/package.json +42 -27
package/dist/components.css CHANGED
@@ -1,4 +1,77 @@
1
1
  @layer components {
2
+
3
+ :root {
4
+ /* button roles */
5
+ --sp-component-button-border-base: var(--sp-component-button-ghost-bg, var(--sp-button-ghost-bg));
6
+ --sp-component-button-shadow: var(--sp-shadow-sm);
7
+ --sp-component-button-primary-bg: var(--sp-button-primary-bg);
8
+ --sp-component-button-primary-bg-hover: var(--sp-button-primary-bghover);
9
+ --sp-component-button-primary-bg-active: var(--sp-button-primary-bgactive);
10
+ --sp-component-button-primary-bg-disabled: var(--sp-button-primary-bgdisabled);
11
+ --sp-component-button-primary-text: var(--sp-button-primary-text);
12
+ --sp-component-button-primary-text-disabled: var(--sp-button-primary-textdisabled);
13
+ --sp-component-button-secondary-bg: var(--sp-button-secondary-bg);
14
+ --sp-component-button-secondary-bg-hover: var(--sp-button-secondary-bghover);
15
+ --sp-component-button-secondary-bg-active: var(--sp-button-secondary-bgactive);
16
+ --sp-component-button-secondary-bg-disabled: var(--sp-button-secondary-bgdisabled);
17
+ --sp-component-button-secondary-text: var(--sp-button-secondary-text);
18
+ --sp-component-button-secondary-text-disabled: var(--sp-button-secondary-textdisabled);
19
+ --sp-component-button-secondary-border: var(--sp-button-secondary-border);
20
+ --sp-component-button-secondary-border-disabled: var(--sp-button-secondary-borderdisabled);
21
+ --sp-component-button-ghost-bg: var(--sp-button-ghost-bg);
22
+ --sp-component-button-ghost-bg-hover: var(--sp-button-ghost-bghover);
23
+ --sp-component-button-ghost-bg-active: var(--sp-button-ghost-bgactive);
24
+ --sp-component-button-ghost-bg-disabled: var(--sp-button-ghost-bgdisabled);
25
+ --sp-component-button-ghost-text: var(--sp-button-ghost-text);
26
+ --sp-component-button-ghost-text-disabled: var(--sp-button-ghost-textdisabled);
27
+ --sp-component-button-danger-bg: var(--sp-button-danger-bg);
28
+ --sp-component-button-danger-bg-hover: var(--sp-button-danger-bghover);
29
+ --sp-component-button-danger-bg-active: var(--sp-button-danger-bgactive);
30
+ --sp-component-button-danger-bg-disabled: var(--sp-button-danger-bgdisabled);
31
+ --sp-component-button-danger-text: var(--sp-button-danger-text);
32
+ --sp-component-button-danger-text-disabled: var(--sp-button-danger-textdisabled);
33
+ --sp-component-button-success-bg: var(--sp-button-success-bg);
34
+ --sp-component-button-success-bg-hover: var(--sp-button-success-bghover);
35
+ --sp-component-button-success-bg-active: var(--sp-button-success-bgactive);
36
+ --sp-component-button-success-bg-disabled: var(--sp-button-success-bgdisabled);
37
+ --sp-component-button-success-text: var(--sp-button-success-text);
38
+ --sp-component-button-success-text-disabled: var(--sp-button-success-textdisabled);
39
+
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));
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));
46
+ --sp-component-card-shadow: var(--sp-shadow-sm);
47
+ --sp-component-card-shadow-elevated: var(--sp-shadow-lg);
48
+ --sp-component-card-shadow-flat: var(--sp-shadow-none);
49
+ --sp-component-card-shadow-outline: var(--sp-shadow-none);
50
+ --sp-component-card-shadow-ghost: var(--sp-shadow-none);
51
+ --sp-component-card-outline-bg: var(--sp-component-card-bg);
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));
54
+ --sp-component-card-ghost-border: var(--sp-component-card-ghost-bg);
55
+
56
+ /* input roles */
57
+ --sp-component-input-border: var(--sp-form-default-border);
58
+ --sp-component-input-bg: var(--sp-surface-input, var(--sp-form-default-bg));
59
+ --sp-component-input-text: var(--sp-text-on-surface-default, var(--sp-form-default-text));
60
+ --sp-component-input-placeholder: var(--sp-text-on-surface-muted, var(--sp-form-default-placeholder));
61
+ --sp-component-input-border-focus: var(--sp-form-focus-border);
62
+ --sp-component-input-ring: var(--sp-form-focus-ring, var(--sp-color-focus-primary));
63
+ --sp-component-input-border-invalid: var(--sp-form-invalid-border);
64
+ --sp-component-input-bg-invalid: var(--sp-form-invalid-bg);
65
+ --sp-component-input-text-invalid: var(--sp-form-invalid-text);
66
+ --sp-component-input-border-valid: var(--sp-form-valid-border);
67
+ --sp-component-input-bg-valid: var(--sp-form-valid-bg);
68
+ --sp-component-input-text-valid: var(--sp-form-valid-text);
69
+ --sp-component-input-bg-disabled: var(--sp-form-disabled-bg);
70
+ --sp-component-input-text-disabled: var(--sp-form-disabled-text);
71
+ --sp-component-input-border-disabled: var(--sp-form-disabled-border);
72
+ }
73
+
74
+ /* BUTTONS -------------------------------------------------------------- */
2
75
  .sp-btn {
3
76
  display: inline-flex;
4
77
  align-items: center;
@@ -6,213 +79,260 @@
6
79
  gap: var(--sp-space-2xs, 0.25rem);
7
80
  padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
8
81
  border-radius: var(--sp-radius-md, 4px);
9
- border: 1px solid transparent;
82
+ border: 1px solid var(
83
+ --sp-component-button-border-base,
84
+ var(--sp-component-button-ghost-bg, var(--sp-button-ghost-bg))
85
+ );
10
86
  font-family: var(--sp-font-family-sans, system-ui);
11
87
  font-size: var(--sp-font-md-size, 1rem);
12
88
  line-height: 1;
13
89
  font-weight: var(--sp-font-md-weight, 500);
14
- transition: background-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
90
+ transition:
91
+ background-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
15
92
  color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
16
- box-shadow var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease);
93
+ box-shadow var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
94
+ border-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease);
17
95
  cursor: pointer;
18
96
  min-height: var(--sp-min-touch-target, 44px);
19
97
  }
20
98
 
21
- .sp-btn-sm {
99
+ .sp-btn:disabled,
100
+ .sp-btn[aria-disabled="true"] {
101
+ cursor: not-allowed;
102
+ }
103
+
104
+ /* sizes */
105
+ .sp-btn--sm {
22
106
  padding: var(--sp-space-3xs, 0.125rem) var(--sp-space-sm, 0.75rem);
23
107
  font-size: var(--sp-font-sm-size, 0.875rem);
24
108
  line-height: var(--sp-font-sm-line-height, 1.5rem);
25
109
  }
26
110
 
27
- .sp-btn-md {
111
+ .sp-btn--md {
28
112
  padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
29
113
  font-size: var(--sp-font-md-size, 1rem);
30
114
  line-height: var(--sp-font-md-line-height, 1.75rem);
31
115
  }
32
116
 
33
- .sp-btn-lg {
117
+ .sp-btn--lg {
34
118
  padding: var(--sp-space-xs, 0.5rem) var(--sp-space-lg, 1.5rem);
35
- font-size: var(--sp-font-lg-size, 1.25rem);
36
- line-height: var(--sp-font-lg-line-height, 2rem);
119
+ font-size: var(--sp-font-lg-size, 1.125rem);
120
+ line-height: var(--sp-font-lg-line-height, 1.75rem);
37
121
  }
38
122
 
39
- .sp-btn-primary {
40
- background-color: var(--sp-button-primary-bg, #8652ff);
41
- color: var(--sp-button-primary-text, #ffffff);
42
- box-shadow: var(--sp-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
123
+ /* primary */
124
+ .sp-btn--primary {
125
+ background-color: var(--sp-component-button-primary-bg);
126
+ color: var(--sp-component-button-primary-text);
127
+ box-shadow: var(
128
+ --sp-component-button-shadow,
129
+ var(--sp-shadow-sm)
130
+ );
43
131
  }
44
132
 
45
- .sp-btn-primary.sp-btn-hover,
46
- .sp-btn-primary:hover {
47
- background-color: var(--sp-button-primary-bghover, #6c32e6);
133
+ .sp-btn--primary.sp-btn--hover,
134
+ .sp-btn--primary:hover {
135
+ background-color: var(--sp-component-button-primary-bg-hover);
48
136
  }
49
137
 
50
- .sp-btn-primary.sp-btn-active,
51
- .sp-btn-primary:active {
52
- background-color: var(--sp-button-primary-bgactive, #5626b4);
138
+ .sp-btn--primary.sp-btn--active,
139
+ .sp-btn--primary:active {
140
+ background-color: var(--sp-component-button-primary-bg-active);
53
141
  }
54
142
 
55
- .sp-btn-primary.sp-btn-disabled,
56
- .sp-btn-primary:disabled {
57
- background-color: var(--sp-button-primary-bgdisabled, #cbd5f5);
58
- color: var(--sp-button-primary-textdisabled, #94a3b8);
143
+ .sp-btn--primary.sp-btn--disabled,
144
+ .sp-btn--primary:disabled {
145
+ background-color: var(--sp-component-button-primary-bg-disabled);
146
+ color: var(--sp-component-button-primary-text-disabled);
147
+ box-shadow: none;
59
148
  }
60
149
 
61
- .sp-btn-secondary {
62
- background-color: var(--sp-button-secondary-bg, #ffffff);
63
- color: var(--sp-button-secondary-text, #8652ff);
64
- border-color: var(--sp-button-secondary-border, #8652ff);
150
+ /* secondary */
151
+ .sp-btn--secondary {
152
+ background-color: var(--sp-component-button-secondary-bg);
153
+ color: var(--sp-component-button-secondary-text);
154
+ border-color: var(--sp-component-button-secondary-border);
65
155
  }
66
156
 
67
- .sp-btn-secondary.sp-btn-hover,
68
- .sp-btn-secondary:hover {
69
- background-color: var(--sp-button-secondary-bghover, #f1f5f9);
157
+ .sp-btn--secondary.sp-btn--hover,
158
+ .sp-btn--secondary:hover {
159
+ background-color: var(--sp-component-button-secondary-bg-hover);
70
160
  }
71
161
 
72
- .sp-btn-secondary.sp-btn-active,
73
- .sp-btn-secondary:active {
74
- background-color: var(--sp-button-secondary-bgactive, #e2e8f0);
162
+ .sp-btn--secondary.sp-btn--active,
163
+ .sp-btn--secondary:active {
164
+ background-color: var(--sp-component-button-secondary-bg-active);
75
165
  }
76
166
 
77
- .sp-btn-secondary.sp-btn-disabled,
78
- .sp-btn-secondary:disabled {
79
- background-color: var(--sp-button-secondary-bgdisabled, #f8fafc);
80
- color: var(--sp-button-secondary-textdisabled, #94a3b8);
81
- border-color: var(--sp-button-secondary-borderdisabled, #cbd5f5);
167
+ .sp-btn--secondary.sp-btn--disabled,
168
+ .sp-btn--secondary:disabled {
169
+ background-color: var(--sp-component-button-secondary-bg-disabled);
170
+ color: var(--sp-component-button-secondary-text-disabled);
171
+ border-color: var(--sp-component-button-secondary-border-disabled);
82
172
  }
83
173
 
84
- .sp-btn-ghost {
85
- background-color: var(--sp-button-ghost-bg, transparent);
86
- color: var(--sp-button-ghost-text, #8652ff);
174
+ /* ghost */
175
+ .sp-btn--ghost {
176
+ background-color: var(--sp-component-button-ghost-bg);
177
+ color: var(--sp-component-button-ghost-text);
87
178
  }
88
179
 
89
- .sp-btn-ghost.sp-btn-hover,
90
- .sp-btn-ghost:hover {
91
- background-color: var(--sp-button-ghost-bghover, #f5f0ff);
180
+ .sp-btn--ghost.sp-btn--hover,
181
+ .sp-btn--ghost:hover {
182
+ background-color: var(--sp-component-button-ghost-bg-hover);
92
183
  }
93
184
 
94
- .sp-btn-ghost.sp-btn-active,
95
- .sp-btn-ghost:active {
96
- background-color: var(--sp-button-ghost-bgactive, #ebe2ff);
185
+ .sp-btn--ghost.sp-btn--active,
186
+ .sp-btn--ghost:active {
187
+ background-color: var(--sp-component-button-ghost-bg-active);
97
188
  }
98
189
 
99
- .sp-btn-ghost.sp-btn-disabled,
100
- .sp-btn-ghost:disabled {
101
- color: var(--sp-button-ghost-textdisabled, #94a3b8);
102
- background-color: var(--sp-button-ghost-bgdisabled, transparent);
190
+ .sp-btn--ghost.sp-btn--disabled,
191
+ .sp-btn--ghost:disabled {
192
+ color: var(--sp-component-button-ghost-text-disabled);
193
+ background-color: var(--sp-component-button-ghost-bg-disabled);
103
194
  }
104
195
 
105
- .sp-btn-danger {
106
- background-color: var(--sp-button-danger-bg, #ef4444);
107
- color: var(--sp-button-danger-text, #ffffff);
196
+ /* danger */
197
+ .sp-btn--danger {
198
+ background-color: var(--sp-component-button-danger-bg);
199
+ color: var(--sp-component-button-danger-text);
108
200
  }
109
201
 
110
- .sp-btn-danger.sp-btn-hover,
111
- .sp-btn-danger:hover {
112
- background-color: var(--sp-button-danger-bghover, #dc2626);
202
+ .sp-btn--danger.sp-btn--hover,
203
+ .sp-btn--danger:hover {
204
+ background-color: var(--sp-component-button-danger-bg-hover);
113
205
  }
114
206
 
115
- .sp-btn-danger.sp-btn-active,
116
- .sp-btn-danger:active {
117
- background-color: var(--sp-button-danger-bgactive, #b91c1c);
207
+ .sp-btn--danger.sp-btn--active,
208
+ .sp-btn--danger:active {
209
+ background-color: var(--sp-component-button-danger-bg-active);
118
210
  }
119
211
 
120
- .sp-btn-danger.sp-btn-disabled,
121
- .sp-btn-danger:disabled {
122
- background-color: var(--sp-button-danger-bgdisabled, #fecaca);
123
- color: var(--sp-button-danger-textdisabled, #94a3b8);
212
+ .sp-btn--danger.sp-btn--disabled,
213
+ .sp-btn--danger:disabled {
214
+ background-color: var(--sp-component-button-danger-bg-disabled);
215
+ color: var(--sp-component-button-danger-text-disabled);
124
216
  }
125
217
 
126
- .sp-btn-success {
127
- background-color: var(--sp-button-success-bg, #22c55e);
128
- color: var(--sp-button-success-text, #ffffff);
218
+ /* success */
219
+ .sp-btn--success {
220
+ background-color: var(--sp-component-button-success-bg);
221
+ color: var(--sp-component-button-success-text);
129
222
  }
130
223
 
131
- .sp-btn-success.sp-btn-hover,
132
- .sp-btn-success:hover {
133
- background-color: var(--sp-button-success-bghover, #16a34a);
224
+ .sp-btn--success.sp-btn--hover,
225
+ .sp-btn--success:hover {
226
+ background-color: var(--sp-component-button-success-bg-hover);
134
227
  }
135
228
 
136
- .sp-btn-success.sp-btn-active,
137
- .sp-btn-success:active {
138
- background-color: var(--sp-button-success-bgactive, #15803d);
229
+ .sp-btn--success.sp-btn--active,
230
+ .sp-btn--success:active {
231
+ background-color: var(--sp-component-button-success-bg-active);
139
232
  }
140
233
 
141
- .sp-btn-success.sp-btn-disabled,
142
- .sp-btn-success:disabled {
143
- background-color: var(--sp-button-success-bgdisabled, #bbf7d0);
144
- color: var(--sp-button-success-textdisabled, #94a3b8);
234
+ .sp-btn--success.sp-btn--disabled,
235
+ .sp-btn--success:disabled {
236
+ background-color: var(--sp-component-button-success-bg-disabled);
237
+ color: var(--sp-component-button-success-text-disabled);
145
238
  }
146
239
 
147
- .sp-btn-disabled,
148
- .sp-btn:disabled {
149
- cursor: not-allowed;
150
- box-shadow: none;
151
- opacity: var(--sp-opacity-disabled, 0.38);
152
- }
240
+ /* INPUTS --------------------------------------------------------------- */
153
241
 
154
242
  .sp-input {
155
243
  width: 100%;
156
244
  display: block;
157
245
  padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
158
246
  border-radius: var(--sp-radius-md, 4px);
159
- border: 1px solid var(--sp-form-default-border, #cbd5f5);
160
- background-color: var(--sp-form-default-bg, #ffffff);
161
- color: var(--sp-form-default-text, #0f172a);
247
+ border: 1px solid var(--sp-component-input-border, var(--sp-form-default-border));
248
+ background: var(--sp-component-input-bg, var(--sp-surface-input, var(--sp-form-default-bg)));
249
+ color: var(--sp-component-input-text, var(--sp-text-on-surface-default, var(--sp-form-default-text)));
162
250
  font-family: var(--sp-font-family-sans, system-ui);
163
251
  font-size: var(--sp-font-md-size, 1rem);
164
- line-height: var(--sp-font-md-line-height, 1.75rem);
165
- transition: border-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
252
+ line-height: var(--sp-font-md-line-height, 1.5rem);
253
+ transition:
254
+ border-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
166
255
  box-shadow var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease),
167
256
  background-color var(--sp-duration-fast, 150ms) var(--sp-easing-out, ease);
168
257
  }
169
258
 
170
259
  .sp-input::placeholder {
171
- color: var(--sp-form-default-placeholder, #94a3b8);
260
+ color: var(--sp-component-input-placeholder, var(--sp-text-on-surface-muted, var(--sp-form-default-placeholder)));
172
261
  }
173
262
 
174
263
  .sp-input:focus,
175
- .sp-input-focus {
176
- border-color: var(--sp-form-focus-border, #8652ff);
177
- box-shadow: 0 0 0 var(--sp-focus-ring-width, 2px) var(--sp-form-focus-ring, #8652ff);
264
+ .sp-input--focus {
265
+ border-color: var(
266
+ --sp-component-input-border-focus,
267
+ var(--sp-component-input-border, var(--sp-form-focus-border))
268
+ );
269
+ box-shadow: 0 0 0 var(--sp-focus-ring-width, 2px) var(
270
+ --sp-component-input-ring,
271
+ var(--sp-form-focus-ring, var(--sp-color-focus-primary))
272
+ );
178
273
  outline: none;
179
274
  }
180
275
 
181
- .sp-input-error {
182
- border-color: var(--sp-form-invalid-border, #ef4444);
183
- background-color: var(--sp-form-invalid-bg, #fef2f2);
184
- color: var(--sp-form-invalid-text, #b91c1c);
276
+ .sp-input--error {
277
+ border-color: var(--sp-component-input-border-invalid, var(--sp-form-invalid-border));
278
+ background-color: var(--sp-component-input-bg-invalid, var(--sp-form-invalid-bg));
279
+ color: var(--sp-component-input-text-invalid, var(--sp-form-invalid-text));
185
280
  }
186
281
 
187
- .sp-input-success {
188
- border-color: var(--sp-form-valid-border, #22c55e);
189
- background-color: var(--sp-form-valid-bg, #f0fdf4);
190
- color: var(--sp-form-valid-text, #15803d);
282
+ .sp-input--success {
283
+ border-color: var(--sp-component-input-border-valid, var(--sp-form-valid-border));
284
+ background-color: var(--sp-component-input-bg-valid, var(--sp-form-valid-bg));
285
+ color: var(--sp-component-input-text-valid, var(--sp-form-valid-text));
191
286
  }
192
287
 
193
- .sp-input-disabled,
194
- .sp-input:disabled {
195
- background-color: var(--sp-form-disabled-bg, #f8fafc);
196
- border-color: var(--sp-form-disabled-border, #e2e8f0);
197
- color: var(--sp-form-disabled-text, #94a3b8);
198
- cursor: not-allowed;
288
+ .sp-input--disabled {
289
+ background-color: var(--sp-component-input-bg-disabled, var(--sp-form-disabled-bg));
290
+ color: var(--sp-component-input-text-disabled, var(--sp-form-disabled-text));
291
+ border-color: var(--sp-component-input-border-disabled, var(--sp-form-disabled-border));
199
292
  }
200
293
 
294
+ .sp-input--disabled,
295
+ .sp-input--disabled:focus {
296
+ box-shadow: none;
297
+ }
298
+
299
+ /* CARDS ---------------------------------------------------------------- */
300
+
201
301
  .sp-card {
202
- background-color: var(--sp-form-default-bg, #ffffff);
203
- color: var(--sp-form-default-text, #0f172a);
302
+ background: var(--sp-component-card-bg);
303
+ color: var(--sp-component-card-text);
204
304
  border-radius: var(--sp-radius-lg, 8px);
205
305
  padding: var(--sp-space-lg, 1.5rem);
206
- box-shadow: var(--sp-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
207
- border: 1px solid transparent;
306
+ box-shadow: var(--sp-component-card-shadow, var(--sp-shadow-sm));
307
+ border: 1px solid var(
308
+ --sp-component-card-border-base,
309
+ var(--sp-component-card-ghost-border, var(--sp-component-card-bg))
310
+ );
311
+ }
312
+
313
+ .sp-card p,
314
+ .sp-card span {
315
+ color: var(--sp-component-card-text-muted);
316
+ }
317
+
318
+ .sp-card--elevated {
319
+ box-shadow: var(--sp-component-card-shadow-elevated, var(--sp-shadow-lg));
320
+ }
321
+
322
+ .sp-card--flat {
323
+ box-shadow: var(--sp-component-card-shadow-flat, var(--sp-shadow-none));
324
+ border-color: var(--sp-component-card-border);
208
325
  }
209
326
 
210
- .sp-card-elevated {
211
- box-shadow: var(--sp-shadow-lg, 0 8px 20px rgba(15, 23, 42, 0.18));
327
+ .sp-card--outline {
328
+ background-color: var(--sp-component-card-outline-bg, var(--sp-component-card-bg));
329
+ border-color: var(--sp-component-card-outline-border, var(--sp-component-card-border));
330
+ box-shadow: var(--sp-component-card-shadow-outline, var(--sp-shadow-none));
212
331
  }
213
332
 
214
- .sp-card-flat {
215
- box-shadow: var(--sp-shadow-none, none);
216
- border-color: var(--sp-color-neutral-200, #e2e8f0);
333
+ .sp-card--ghost {
334
+ background-color: var(--sp-component-card-ghost-bg);
335
+ border-color: var(--sp-component-card-ghost-border);
336
+ box-shadow: var(--sp-component-card-shadow-ghost, var(--sp-shadow-none));
217
337
  }
218
338
  }