@phcdevworks/spectre-ui 0.0.5 → 0.2.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 (11) hide show
  1. package/README.md +82 -10
  2. package/dist/base.css +5 -11
  3. package/dist/components.css +218 -50
  4. package/dist/index.cjs +295 -77
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.d.cts +44 -61
  7. package/dist/index.d.ts +44 -61
  8. package/dist/index.js +290 -79
  9. package/dist/index.js.map +1 -1
  10. package/dist/utilities.css +6 -6
  11. package/package.json +3 -3
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Framework-agnostic styling layer that powers Spectre Blocks, Spectre Astro, Spectre 11ty, and every Spectre integration.
4
4
 
5
- > 📋 **[View Roadmap](https://github.com/phcdevworks/spectre-ui/blob/main/ROADMAP.md)** | 🤝 **[Contributing Guide](CONTRIBUTING.md)** | 📝 **[Changelog](CHANGELOG.md)**
5
+ > 🤝 **[Contributing Guide](CONTRIBUTING.md)** | 📝 **[Changelog](CHANGELOG.md)**
6
6
 
7
7
  ## Overview
8
8
 
@@ -57,6 +57,31 @@ export default {
57
57
 
58
58
  Works with Tailwind 3.x and 4.x through the classic config API.
59
59
 
60
+ Need a plain theme object without presets? Generate it from the first-party tokens.
61
+
62
+ ```ts
63
+ // tailwind.config.ts
64
+ import {
65
+ createSpectreTailwindTheme,
66
+ spectreTokens,
67
+ } from "@phcdevworks/spectre-ui";
68
+
69
+ const { theme } = createSpectreTailwindTheme({
70
+ tokens: spectreTokens,
71
+ overrides: {
72
+ spacing: {
73
+ ...spectreTokens.spacing,
74
+ gutter: "1.125rem",
75
+ },
76
+ },
77
+ });
78
+
79
+ export default {
80
+ content: ["./src/**/*.{js,ts,jsx,tsx,astro}"],
81
+ theme,
82
+ };
83
+ ```
84
+
60
85
  ### 3. Use Spectre recipes
61
86
 
62
87
  Recipes wrap Spectre's class combinations so every framework composes styles consistently.
@@ -66,6 +91,8 @@ import {
66
91
  getButtonClasses,
67
92
  getCardClasses,
68
93
  getInputClasses,
94
+ getBadgeClasses,
95
+ getIconBoxClasses,
69
96
  } from "@phcdevworks/spectre-ui";
70
97
 
71
98
  const buttonClasses = getButtonClasses({
@@ -84,6 +111,12 @@ const inputClasses = getInputClasses({
84
111
  fullWidth: true,
85
112
  });
86
113
  // "sp-input sp-input--error sp-input--sm sp-input--full"
114
+
115
+ const badgeClasses = getBadgeClasses({ variant: "success", size: "sm" });
116
+ // "sp-badge sp-badge--success sp-badge--sm"
117
+
118
+ const iconBoxClasses = getIconBoxClasses({ variant: "info", size: "lg" });
119
+ // "sp-iconbox sp-iconbox--info sp-iconbox--lg"
87
120
  ```
88
121
 
89
122
  ## Component Surfaces
@@ -95,9 +128,10 @@ getButtonClasses({ variant: "primary" }); // CTA baseline
95
128
  getButtonClasses({ variant: "secondary" }); // Outlined
96
129
  getButtonClasses({ variant: "ghost" }); // Low-emphasis
97
130
  getButtonClasses({ variant: "danger" }); // Destructive
131
+ getButtonClasses({ variant: "success" }); // Positive actions
98
132
  ```
99
133
 
100
- Each variant ships with full state coverage: `default`, `hover`, `active`, `disabled`, and tone modifiers (`success`, `warning`, `danger`).
134
+ Each variant ships with full state coverage: `default`, `hover`, `active`, `disabled`.
101
135
 
102
136
  ```css
103
137
  .cta-button {
@@ -120,8 +154,7 @@ getInputClasses({ state: "success" });
120
154
  ```css
121
155
  .input:focus {
122
156
  border-color: var(--sp-component-input-border-focus);
123
- outline: var(--sp-focus-ring-width) var(--sp-focus-ring-style)
124
- var(--sp-component-input-ring-focus);
157
+ outline: var(--sp-focus-ring-width) var(--sp-focus-ring-style) var(--sp-component-input-ring-focus);
125
158
  }
126
159
  .input.error {
127
160
  border-color: var(--sp-component-input-border-error);
@@ -137,6 +170,39 @@ getCardClasses({ variant: "outline" }); // Bordered
137
170
  getCardClasses({ variant: "ghost" }); // Transparent
138
171
  ```
139
172
 
173
+ ### Badge variants
174
+
175
+ ```ts
176
+ getBadgeClasses({ variant: "primary" }); // Primary/default
177
+ getBadgeClasses({ variant: "success" }); // Success state
178
+ getBadgeClasses({ variant: "warning" }); // Warning state
179
+ getBadgeClasses({ variant: "danger" }); // Danger/error state
180
+ ```
181
+
182
+ Available sizes: `sm`, `md`, `lg`
183
+
184
+ ```ts
185
+ getBadgeClasses({ variant: "success", size: "sm" });
186
+ // "sp-badge sp-badge--success sp-badge--sm"
187
+ ```
188
+
189
+ ### Icon Box variants
190
+
191
+ ```ts
192
+ getIconBoxClasses({ variant: "primary" }); // Primary/default
193
+ getIconBoxClasses({ variant: "success" }); // Success state
194
+ getIconBoxClasses({ variant: "warning" }); // Warning state
195
+ getIconBoxClasses({ variant: "danger" }); // Danger/error state
196
+ getIconBoxClasses({ variant: "info" }); // Info state
197
+ ```
198
+
199
+ Available sizes: `sm`, `md`, `lg`
200
+
201
+ ```ts
202
+ getIconBoxClasses({ variant: "info", size: "lg" });
203
+ // "sp-iconbox sp-iconbox--info sp-iconbox--lg"
204
+ ```
205
+
140
206
  ## Surface & Typography Roles
141
207
 
142
208
  Spectre exposes semantic layers that decouple structural styles from raw palette values. Override these roles at any scope (root, layout, or component wrapper) to restyle whole experiences without editing CSS.
@@ -217,10 +283,10 @@ import {
217
283
 
218
284
  ## Repository Layout
219
285
 
220
- | Folder | Responsibility |
221
- | ------------- | ------------------------------------------------------------------------------------------------------------- |
222
- | `src/` | TypeScript source: recipes, Tailwind preset, token re-exports, CSS constants. |
223
- | `src/styles/` | Raw CSS files (`base.css`, `components.css`, `utilities.css`) copied to `dist/` during build. |
286
+ | Folder | Responsibility |
287
+ | ------------- | ----------------------------------------------------------------------------------------------------------- |
288
+ | `src/` | TypeScript source: recipes, Tailwind preset, token re-exports, CSS constants. |
289
+ | `src/styles/` | Raw CSS files (`base.css`, `components.css`, `utilities.css`) copied to `dist/` during build. |
224
290
  | `dist/` | Generated artifacts: `index.js`, `index.cjs`, `index.d.ts`, and CSS files. Regenerated via `npm run build`. |
225
291
 
226
292
  Designers update tokens in `@phcdevworks/spectre-tokens`. Engineering evolves recipes, presets, and CSS in this package.
@@ -252,11 +318,19 @@ import type {
252
318
  SpectreTokens,
253
319
  SpectreTailwindTheme,
254
320
  ButtonVariant,
321
+ ButtonSize,
255
322
  InputState,
323
+ InputSize,
256
324
  CardVariant,
325
+ BadgeVariant,
326
+ BadgeSize,
327
+ IconBoxVariant,
328
+ IconBoxSize,
257
329
  ButtonRecipeOptions,
258
330
  CardRecipeOptions,
259
331
  InputRecipeOptions,
332
+ BadgeRecipeOptions,
333
+ IconBoxRecipeOptions,
260
334
  } from "@phcdevworks/spectre-ui";
261
335
  ```
262
336
 
@@ -268,8 +342,6 @@ import type {
268
342
  - **Spectre Astro** – Astro integration
269
343
  - **Spectre 11ty** – Eleventy integration
270
344
 
271
- For the project's future direction, see the **[Roadmap](https://github.com/phcdevworks/spectre-ui/blob/main/ROADMAP.md)**.
272
-
273
345
  ## Contributing
274
346
 
275
347
  Issues and pull requests are welcome. If you are proposing style or recipe changes, update `src/` and include regenerated builds.
package/dist/base.css CHANGED
@@ -1,12 +1,5 @@
1
1
  @layer base {
2
2
 
3
- :root {
4
- --sp-surface-page: var(--sp-color-neutral-50, #f8fafc);
5
- --sp-surface-card: #ffffff;
6
- --sp-surface-input: var(--sp-form-default-bg, #ffffff);
7
- --sp-surface-overlay: rgba(15, 23, 42, var(--sp-opacity-overlay, 0.5));
8
- }
9
-
10
3
  *,
11
4
  *::before,
12
5
  *::after {
@@ -52,7 +45,7 @@
52
45
  }
53
46
 
54
47
  a {
55
- color: var(--sp-color-primary, inherit);
48
+ color: var(--sp-color-brand-600, inherit);
56
49
  text-decoration: none;
57
50
  }
58
51
 
@@ -61,12 +54,13 @@
61
54
  }
62
55
 
63
56
  :focus-visible {
64
- outline: 2px solid var(--sp-color-primary, currentColor);
65
- outline-offset: 2px;
57
+ outline: var(--sp-focus-ring-width, 2px) solid var(--sp-color-focus-primary,
58
+ var(--sp-color-brand-600, currentColor));
59
+ outline-offset: var(--sp-focus-ring-offset, 2px);
66
60
  }
67
61
 
68
62
  ::selection {
69
- background-color: var(--sp-color-primary-soft, rgba(79, 70, 229, 0.15));
63
+ background-color: var(--sp-color-brand-100, #ebe2ff);
70
64
  color: inherit;
71
65
  }
72
66
  }
package/dist/components.css CHANGED
@@ -54,21 +54,80 @@
54
54
  --sp-component-card-ghost-border: var(--sp-component-card-ghost-bg);
55
55
 
56
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);
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)));
87
+
88
+ /* 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);
115
+
116
+ /* 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);
72
131
  }
73
132
 
74
133
  /* BUTTONS -------------------------------------------------------------- */
@@ -79,10 +138,8 @@
79
138
  gap: var(--sp-space-2xs, 0.25rem);
80
139
  padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
81
140
  border-radius: var(--sp-radius-md, 4px);
82
- border: 1px solid var(
83
- --sp-component-button-border-base,
84
- var(--sp-component-button-ghost-bg, var(--sp-button-ghost-bg))
85
- );
141
+ border: 1px solid var(--sp-component-button-border-base,
142
+ var(--sp-component-button-ghost-bg, var(--sp-button-ghost-bg)));
86
143
  font-family: var(--sp-font-family-sans, system-ui);
87
144
  font-size: var(--sp-font-md-size, 1rem);
88
145
  line-height: 1;
@@ -143,10 +200,8 @@
143
200
  .sp-btn--primary {
144
201
  background-color: var(--sp-component-button-primary-bg);
145
202
  color: var(--sp-component-button-primary-text);
146
- box-shadow: var(
147
- --sp-component-button-shadow,
148
- var(--sp-shadow-sm)
149
- );
203
+ box-shadow: var(--sp-component-button-shadow,
204
+ var(--sp-shadow-sm));
150
205
  }
151
206
 
152
207
  .sp-btn--primary.sp-btn--hover,
@@ -265,7 +320,7 @@
265
320
  }
266
321
 
267
322
  .sp-label {
268
- color: var(--sp-component-input-text, var(--sp-text-on-surface-default, var(--sp-form-default-text)));
323
+ color: var(--sp-component-input-role-text);
269
324
  font-size: var(--sp-font-sm-size, 0.875rem);
270
325
  font-weight: var(--sp-font-sm-weight, 500);
271
326
  line-height: var(--sp-font-sm-line-height, 1.25rem);
@@ -278,7 +333,7 @@
278
333
  }
279
334
 
280
335
  .sp-error-message {
281
- color: var(--sp-color-danger, #dc2626);
336
+ color: var(--sp-color-error-600, #dc2626);
282
337
  font-size: var(--sp-font-xs-size, 0.75rem);
283
338
  line-height: var(--sp-font-xs-line-height, 1rem);
284
339
  }
@@ -289,9 +344,9 @@
289
344
  appearance: none;
290
345
  padding: var(--sp-space-2xs, 0.25rem) var(--sp-space-md, 1rem);
291
346
  border-radius: var(--sp-radius-md, 4px);
292
- border: 1px solid var(--sp-component-input-border, var(--sp-form-default-border));
293
- background-color: var(--sp-component-input-bg, var(--sp-surface-input, var(--sp-form-default-bg)));
294
- color: var(--sp-component-input-text, var(--sp-text-on-surface-default, var(--sp-form-default-text)));
347
+ border: 1px solid var(--sp-component-input-role-border);
348
+ background-color: var(--sp-component-input-role-bg);
349
+ color: var(--sp-component-input-role-text);
295
350
  font-family: var(--sp-font-family-sans, system-ui);
296
351
  font-size: var(--sp-font-md-size, 1rem);
297
352
  line-height: var(--sp-font-md-line-height, 1.5rem);
@@ -302,7 +357,7 @@
302
357
  }
303
358
 
304
359
  .sp-input::placeholder {
305
- color: var(--sp-component-input-placeholder, var(--sp-text-on-surface-muted, var(--sp-form-default-placeholder)));
360
+ color: var(--sp-component-input-role-placeholder);
306
361
  }
307
362
 
308
363
  .sp-input--sm {
@@ -329,33 +384,27 @@
329
384
 
330
385
  .sp-input:focus,
331
386
  .sp-input--focus {
332
- border-color: var(
333
- --sp-component-input-border-focus,
334
- var(--sp-component-input-border, var(--sp-form-focus-border))
335
- );
336
- box-shadow: 0 0 0 var(--sp-focus-ring-width, 2px) var(
337
- --sp-component-input-ring,
338
- var(--sp-form-focus-ring, var(--sp-color-focus-primary))
339
- );
387
+ 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);
340
389
  outline: none;
341
390
  }
342
391
 
343
392
  .sp-input--error {
344
- border-color: var(--sp-component-input-border-invalid, var(--sp-form-invalid-border));
345
- background-color: var(--sp-component-input-bg-invalid, var(--sp-form-invalid-bg));
346
- color: var(--sp-component-input-text-invalid, var(--sp-form-invalid-text));
393
+ border-color: var(--sp-component-input-role-border-error);
394
+ background-color: var(--sp-component-input-role-bg-error);
395
+ color: var(--sp-component-input-role-text-error);
347
396
  }
348
397
 
349
398
  .sp-input--success {
350
- border-color: var(--sp-component-input-border-valid, var(--sp-form-valid-border));
351
- background-color: var(--sp-component-input-bg-valid, var(--sp-form-valid-bg));
352
- color: var(--sp-component-input-text-valid, var(--sp-form-valid-text));
399
+ border-color: var(--sp-component-input-role-border-success);
400
+ background-color: var(--sp-component-input-role-bg-success);
401
+ color: var(--sp-component-input-role-text-success);
353
402
  }
354
403
 
355
404
  .sp-input--disabled {
356
- background-color: var(--sp-component-input-bg-disabled, var(--sp-form-disabled-bg));
357
- color: var(--sp-component-input-text-disabled, var(--sp-form-disabled-text));
358
- border-color: var(--sp-component-input-border-disabled, var(--sp-form-disabled-border));
405
+ background-color: var(--sp-component-input-role-bg-disabled);
406
+ color: var(--sp-component-input-role-text-disabled);
407
+ border-color: var(--sp-component-input-role-border-disabled);
359
408
  cursor: not-allowed;
360
409
  }
361
410
 
@@ -372,10 +421,8 @@
372
421
  border-radius: var(--sp-radius-lg, 8px);
373
422
  padding: var(--sp-space-lg, 1.5rem);
374
423
  box-shadow: var(--sp-component-card-shadow, var(--sp-shadow-sm));
375
- border: 1px solid var(
376
- --sp-component-card-border-base,
377
- var(--sp-component-card-ghost-border, var(--sp-component-card-bg))
378
- );
424
+ border: 1px solid var(--sp-component-card-border-base,
425
+ var(--sp-component-card-ghost-border, var(--sp-component-card-bg)));
379
426
  }
380
427
 
381
428
  .sp-card p,
@@ -430,4 +477,125 @@
430
477
  transform: translateY(-1px);
431
478
  box-shadow: var(--sp-component-card-shadow-elevated, var(--sp-shadow-lg));
432
479
  }
480
+
481
+ /* BADGES --------------------------------------------------------------- */
482
+
483
+ .sp-badge {
484
+ display: inline-flex;
485
+ align-items: center;
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);
495
+ border: 1px solid transparent;
496
+ white-space: nowrap;
497
+ }
498
+
499
+ .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);
504
+ }
505
+
506
+ .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);
511
+ }
512
+
513
+ .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);
518
+ }
519
+
520
+ .sp-badge--primary {
521
+ background-color: var(--sp-component-badge-primary-bg);
522
+ color: var(--sp-component-badge-primary-text);
523
+ }
524
+
525
+ .sp-badge--success {
526
+ background-color: var(--sp-component-badge-success-bg);
527
+ color: var(--sp-component-badge-success-text);
528
+ }
529
+
530
+ .sp-badge--warning {
531
+ background-color: var(--sp-component-badge-warning-bg);
532
+ color: var(--sp-component-badge-warning-text);
533
+ }
534
+
535
+ .sp-badge--danger {
536
+ background-color: var(--sp-component-badge-danger-bg);
537
+ color: var(--sp-component-badge-danger-text);
538
+ }
539
+
540
+ /* ICON BOXES ----------------------------------------------------------- */
541
+
542
+ .sp-iconbox {
543
+ display: inline-flex;
544
+ align-items: center;
545
+ justify-content: center;
546
+ border-radius: var(--sp-component-iconbox-radius, var(--sp-radius-lg, 8px));
547
+ color: var(--sp-component-iconbox-primary-text);
548
+ 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);
551
+ }
552
+
553
+ .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);
557
+ }
558
+
559
+ .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);
563
+ }
564
+
565
+ .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;
575
+ }
576
+
577
+ .sp-iconbox--primary {
578
+ background-color: var(--sp-component-iconbox-primary-bg);
579
+ color: var(--sp-component-iconbox-primary-text);
580
+ }
581
+
582
+ .sp-iconbox--success {
583
+ background-color: var(--sp-component-iconbox-success-bg);
584
+ color: var(--sp-component-iconbox-success-text);
585
+ }
586
+
587
+ .sp-iconbox--warning {
588
+ background-color: var(--sp-component-iconbox-warning-bg);
589
+ color: var(--sp-component-iconbox-warning-text);
590
+ }
591
+
592
+ .sp-iconbox--danger {
593
+ background-color: var(--sp-component-iconbox-danger-bg);
594
+ color: var(--sp-component-iconbox-danger-text);
595
+ }
596
+
597
+ .sp-iconbox--info {
598
+ background-color: var(--sp-component-iconbox-info-bg);
599
+ color: var(--sp-component-iconbox-info-text);
600
+ }
433
601
  }