@webspire/mcp 0.2.0 → 0.5.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 (10) hide show
  1. package/README.md +35 -21
  2. package/css/webspire-components.css +481 -0
  3. package/css/webspire-tokens.css +151 -0
  4. package/data/registry.json +1309 -214
  5. package/dist/index.js +1 -1
  6. package/dist/registration.js +305 -2
  7. package/dist/types.d.ts +35 -0
  8. package/package.json +4 -3
  9. package/dist/tools.d.ts +0 -3
  10. package/dist/tools.js +0 -151
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # @webspire/mcp
2
2
 
3
- MCP server for [Webspire](https://webspire.de) CSS snippets — AI-native snippet discovery and matching.
3
+ MCP server for [Webspire](https://webspire.de) — AI-native discovery of CSS snippets, UI patterns, and page templates.
4
4
 
5
- 49 production-ready CSS snippets across 7 categories: glass, animations, easing, scroll, decorative, interactions, text.
5
+ **49 CSS snippets** + **212 UI patterns** + **18 page templates** — all Tailwind v4, dark mode, accessible.
6
6
 
7
7
  ## Quick Start
8
8
 
@@ -39,39 +39,53 @@ Add to your MCP settings (`~/.claude/settings.json` or Claude Desktop config):
39
39
  | Tool | Description |
40
40
  |------|-------------|
41
41
  | `list_categories` | List all snippet categories with counts |
42
- | `search_snippets` | Search by keyword, use case, or CSS technique |
42
+ | `search_snippets` | Search snippets by keyword, use case, or CSS technique |
43
43
  | `get_snippet` | Get full CSS source, metadata, and usage example |
44
- | `recommend_snippet` | Describe a UI problem, get best matching snippets |
45
- | `list_pattern_families` | List all UI pattern families |
46
- | `search_patterns` | Search UI patterns by intent |
47
- | `get_pattern` | Get full pattern HTML/CSS/JS |
44
+ | `recommend_snippet` | Describe a UI problem, get best matching snippets with reasoning |
45
+ | `list_pattern_families` | List all 55 pattern families with counts |
46
+ | `search_patterns` | Search 212 UI patterns by intent, family, or tier |
47
+ | `get_pattern` | Get full pattern HTML/CSS/JS with slots, props, and metadata |
48
48
 
49
49
  ## Available Resources
50
50
 
51
51
  | URI | Description |
52
52
  |-----|-------------|
53
- | `webspire://categories` | All categories with counts (JSON) |
53
+ | `webspire://categories` | All snippet categories with counts (JSON) |
54
54
  | `webspire://category/{name}` | Snippets in a category (JSON) |
55
55
  | `webspire://snippet/{id}` | Full snippet data including CSS (JSON) |
56
- | `webspire://patterns` | All patterns (JSON) |
57
- | `webspire://pattern/{id}` | Full pattern data (JSON) |
56
+ | `webspire://patterns` | All 212 patterns with brief metadata (JSON) |
57
+ | `webspire://pattern/{id}` | Full pattern data including HTML source (JSON) |
58
58
 
59
- ## Snippet Categories
59
+ ## Content
60
60
 
61
- - **glass** — Frosted, subtle, bold, colored, dark glassmorphism effects
62
- - **animations** — Fade, slide, scale, blur, stagger, pulse, infinite scroll
63
- - **easing** — Spring, bounce, snap easing tokens
64
- - **scroll** — Parallax, reveal, progress bar, snap, sticky header
65
- - **decorative** — Aurora, gradient mesh, neon glow, noise, orbs, shimmer
66
- - **interactions** — Hover lift, ripple, flip card, tilt, magnetic, focus ring
67
- - **text** — Fluid size, gradient text, typewriter, truncate, balance
61
+ ### CSS Snippets (49)
62
+
63
+ Effects that Tailwind v4 can't do natively:
64
+
65
+ - **glass** (5) — Frosted, subtle, bold, colored, dark glassmorphism
66
+ - **animations** (7) — Fade, slide, scale, blur, stagger, pulse, infinite scroll
67
+ - **easing** (1) — Spring, bounce, snap easing tokens
68
+ - **scroll** (8) — Parallax, reveal, progress bar, snap, sticky header
69
+ - **decorative** (11) — Aurora, gradient mesh, neon glow, noise, orbs, shimmer
70
+ - **interactions** (11) — Hover lift, ripple, flip card, tilt, magnetic, focus ring
71
+ - **text** (6) — Fluid size, gradient text, typewriter, truncate, balance
72
+
73
+ ### UI Patterns (212)
74
+
75
+ Full Tailwind HTML sections across 55 families:
76
+
77
+ accordion, auth, avatar, badge, banner, bento, blog, breadcrumb, callout, cards, checkout, code-preview, comments, comparison, contact, cookie-consent, cta, dashboard, description-list, divider, empty-state, error, faq, features, file-tree, footer, forms, gallery, hero, kbd, link-card, logo-cloud, modal, navbar, newsletter, onboarding, pagination, popup, pricing, product-card, property-table, quote, related-articles, see-also, sidebar, social-proof, stats, steps, tabs, team, testimonials, and more.
78
+
79
+ ### Page Templates (18)
80
+
81
+ Complete page layouts: company, portfolio, saas-landing, shop — ready to scaffold.
68
82
 
69
83
  ## Search Features
70
84
 
71
- - **Synonym expansion**: "blur" also finds glass/frosted snippets
85
+ - **Synonym expansion**: "blur" also matches glass/frosted snippets
72
86
  - **Stemming**: "animations" matches "animated", "animate"
73
- - **Multi-field scoring**: Matches in title, description, use cases, tags, classes
74
- - **Filters**: Category, tags, dark mode support, responsive support
87
+ - **Multi-field scoring**: Weighted matches across title, description, use cases, tags, classes, IDs
88
+ - **Filters**: Category, tags, dark mode support, responsive support, reduced motion
75
89
 
76
90
  ## Programmatic Usage
77
91
 
package/css/webspire-components.css ADDED
@@ -0,0 +1,481 @@
1
+ /*
2
+ * Webspire Component Tokens
3
+ * =========================
4
+ *
5
+ * Layer 3: Per-component semantic variables.
6
+ * Each component class (.ws-{family}) defines its own tokens
7
+ * that reference the global WebSpire alias tokens.
8
+ *
9
+ * Override at component level:
10
+ * .ws-cta { --ws-cta-action-bg: #your-color; }
11
+ */
12
+
13
+ /* ── Page Sections ── */
14
+
15
+ .ws-hero {
16
+ --ws-hero-bg: var(--ws-color-surface);
17
+ --ws-hero-text: var(--ws-color-text);
18
+ --ws-hero-text-soft: var(--ws-color-text-soft);
19
+ --ws-hero-text-muted: var(--ws-color-text-muted);
20
+ --ws-hero-action-bg: var(--ws-color-primary);
21
+ --ws-hero-action-bg-hover: var(--ws-color-primary-hover);
22
+ --ws-hero-action-text: var(--ws-color-primary-text);
23
+ --ws-hero-border: var(--ws-color-border);
24
+ }
25
+
26
+ .ws-navbar {
27
+ --ws-navbar-bg: var(--ws-color-surface);
28
+ --ws-navbar-text: var(--ws-color-text);
29
+ --ws-navbar-text-muted: var(--ws-color-text-muted);
30
+ --ws-navbar-border: var(--ws-color-border);
31
+ --ws-navbar-hover-bg: var(--ws-color-surface-alt);
32
+ --ws-navbar-active: var(--ws-color-primary);
33
+ }
34
+
35
+ .ws-footer {
36
+ --ws-footer-bg: var(--ws-color-surface);
37
+ --ws-footer-text: var(--ws-color-text-soft);
38
+ --ws-footer-text-muted: var(--ws-color-text-muted);
39
+ --ws-footer-border: var(--ws-color-border);
40
+ --ws-footer-link-hover: var(--ws-color-text);
41
+ }
42
+
43
+ .ws-cta {
44
+ --ws-cta-bg: var(--ws-color-surface);
45
+ --ws-cta-text: var(--ws-color-text);
46
+ --ws-cta-text-soft: var(--ws-color-text-soft);
47
+ --ws-cta-action-bg: var(--ws-color-primary);
48
+ --ws-cta-action-bg-hover: var(--ws-color-primary-hover);
49
+ --ws-cta-action-text: var(--ws-color-primary-text);
50
+ --ws-cta-border: var(--ws-color-border);
51
+ }
52
+
53
+ .ws-pricing {
54
+ --ws-pricing-bg: var(--ws-color-surface);
55
+ --ws-pricing-card-bg: var(--ws-color-surface);
56
+ --ws-pricing-card-border: var(--ws-color-border);
57
+ --ws-pricing-highlight-bg: var(--ws-color-primary);
58
+ --ws-pricing-highlight-text: var(--ws-color-primary-text);
59
+ --ws-pricing-text: var(--ws-color-text);
60
+ --ws-pricing-text-soft: var(--ws-color-text-soft);
61
+ --ws-pricing-text-muted: var(--ws-color-text-muted);
62
+ --ws-pricing-action-bg: var(--ws-color-primary);
63
+ --ws-pricing-action-bg-hover: var(--ws-color-primary-hover);
64
+ --ws-pricing-action-text: var(--ws-color-primary-text);
65
+ }
66
+
67
+ .ws-features {
68
+ --ws-features-bg: var(--ws-color-surface);
69
+ --ws-features-text: var(--ws-color-text);
70
+ --ws-features-text-soft: var(--ws-color-text-soft);
71
+ --ws-features-text-muted: var(--ws-color-text-muted);
72
+ --ws-features-icon-bg: var(--ws-color-primary-soft);
73
+ --ws-features-icon-color: var(--ws-color-primary);
74
+ --ws-features-card-bg: var(--ws-color-surface-alt);
75
+ --ws-features-border: var(--ws-color-border);
76
+ }
77
+
78
+ .ws-faq {
79
+ --ws-faq-bg: var(--ws-color-surface);
80
+ --ws-faq-text: var(--ws-color-text);
81
+ --ws-faq-text-soft: var(--ws-color-text-soft);
82
+ --ws-faq-border: var(--ws-color-border);
83
+ --ws-faq-icon: var(--ws-color-text-muted);
84
+ }
85
+
86
+ .ws-testimonials {
87
+ --ws-testimonials-bg: var(--ws-color-surface);
88
+ --ws-testimonials-card-bg: var(--ws-color-surface-alt);
89
+ --ws-testimonials-text: var(--ws-color-text);
90
+ --ws-testimonials-text-soft: var(--ws-color-text-soft);
91
+ --ws-testimonials-text-muted: var(--ws-color-text-muted);
92
+ --ws-testimonials-border: var(--ws-color-border);
93
+ --ws-testimonials-accent: var(--ws-color-primary);
94
+ }
95
+
96
+ .ws-contact {
97
+ --ws-contact-bg: var(--ws-color-surface);
98
+ --ws-contact-text: var(--ws-color-text);
99
+ --ws-contact-text-soft: var(--ws-color-text-soft);
100
+ --ws-contact-input-bg: var(--ws-color-surface);
101
+ --ws-contact-input-border: var(--ws-color-border);
102
+ --ws-contact-action-bg: var(--ws-color-primary);
103
+ --ws-contact-action-text: var(--ws-color-primary-text);
104
+ }
105
+
106
+ .ws-newsletter {
107
+ --ws-newsletter-bg: var(--ws-color-surface-alt);
108
+ --ws-newsletter-text: var(--ws-color-text);
109
+ --ws-newsletter-text-soft: var(--ws-color-text-soft);
110
+ --ws-newsletter-input-bg: var(--ws-color-surface);
111
+ --ws-newsletter-input-border: var(--ws-color-border);
112
+ --ws-newsletter-action-bg: var(--ws-color-primary);
113
+ --ws-newsletter-action-text: var(--ws-color-primary-text);
114
+ }
115
+
116
+ .ws-stats {
117
+ --ws-stats-bg: var(--ws-color-surface);
118
+ --ws-stats-text: var(--ws-color-text);
119
+ --ws-stats-text-soft: var(--ws-color-text-soft);
120
+ --ws-stats-text-muted: var(--ws-color-text-muted);
121
+ --ws-stats-accent: var(--ws-color-primary);
122
+ --ws-stats-border: var(--ws-color-border);
123
+ }
124
+
125
+ .ws-team {
126
+ --ws-team-bg: var(--ws-color-surface);
127
+ --ws-team-card-bg: var(--ws-color-surface-alt);
128
+ --ws-team-text: var(--ws-color-text);
129
+ --ws-team-text-soft: var(--ws-color-text-soft);
130
+ --ws-team-border: var(--ws-color-border);
131
+ }
132
+
133
+ .ws-logo-cloud {
134
+ --ws-logo-cloud-bg: var(--ws-color-surface);
135
+ --ws-logo-cloud-text-muted: var(--ws-color-text-muted);
136
+ --ws-logo-cloud-border: var(--ws-color-border);
137
+ }
138
+
139
+ .ws-gallery {
140
+ --ws-gallery-bg: var(--ws-color-surface);
141
+ --ws-gallery-text: var(--ws-color-text);
142
+ --ws-gallery-text-soft: var(--ws-color-text-soft);
143
+ --ws-gallery-border: var(--ws-color-border);
144
+ }
145
+
146
+ .ws-blog {
147
+ --ws-blog-bg: var(--ws-color-surface);
148
+ --ws-blog-card-bg: var(--ws-color-surface);
149
+ --ws-blog-text: var(--ws-color-text);
150
+ --ws-blog-text-soft: var(--ws-color-text-soft);
151
+ --ws-blog-text-muted: var(--ws-color-text-muted);
152
+ --ws-blog-accent: var(--ws-color-primary);
153
+ --ws-blog-border: var(--ws-color-border);
154
+ }
155
+
156
+ .ws-banner {
157
+ --ws-banner-bg: var(--ws-color-primary);
158
+ --ws-banner-text: var(--ws-color-primary-text);
159
+ --ws-banner-border: var(--ws-color-border);
160
+ }
161
+
162
+ .ws-error {
163
+ --ws-error-bg: var(--ws-color-surface);
164
+ --ws-error-text: var(--ws-color-text);
165
+ --ws-error-text-soft: var(--ws-color-text-soft);
166
+ --ws-error-action-bg: var(--ws-color-primary);
167
+ --ws-error-action-text: var(--ws-color-primary-text);
168
+ }
169
+
170
+ .ws-comparison {
171
+ --ws-comparison-bg: var(--ws-color-surface);
172
+ --ws-comparison-text: var(--ws-color-text);
173
+ --ws-comparison-text-soft: var(--ws-color-text-soft);
174
+ --ws-comparison-border: var(--ws-color-border);
175
+ --ws-comparison-highlight: var(--ws-color-primary);
176
+ }
177
+
178
+ .ws-bento {
179
+ --ws-bento-bg: var(--ws-color-surface);
180
+ --ws-bento-card-bg: var(--ws-color-surface-alt);
181
+ --ws-bento-text: var(--ws-color-text);
182
+ --ws-bento-text-soft: var(--ws-color-text-soft);
183
+ --ws-bento-border: var(--ws-color-border);
184
+ }
185
+
186
+ .ws-sidebar {
187
+ --ws-sidebar-bg: var(--ws-color-surface);
188
+ --ws-sidebar-text: var(--ws-color-text);
189
+ --ws-sidebar-text-muted: var(--ws-color-text-muted);
190
+ --ws-sidebar-active-bg: var(--ws-color-primary-soft);
191
+ --ws-sidebar-active-text: var(--ws-color-primary);
192
+ --ws-sidebar-hover-bg: var(--ws-color-surface-alt);
193
+ --ws-sidebar-border: var(--ws-color-border);
194
+ }
195
+
196
+ .ws-dashboard {
197
+ --ws-dashboard-bg: var(--ws-color-surface-alt);
198
+ --ws-dashboard-card-bg: var(--ws-color-surface);
199
+ --ws-dashboard-text: var(--ws-color-text);
200
+ --ws-dashboard-text-soft: var(--ws-color-text-soft);
201
+ --ws-dashboard-text-muted: var(--ws-color-text-muted);
202
+ --ws-dashboard-border: var(--ws-color-border);
203
+ --ws-dashboard-accent: var(--ws-color-primary);
204
+ }
205
+
206
+ /* ── Content Elements ── */
207
+
208
+ .ws-cards {
209
+ --ws-cards-bg: var(--ws-color-surface);
210
+ --ws-cards-text: var(--ws-color-text);
211
+ --ws-cards-text-soft: var(--ws-color-text-soft);
212
+ --ws-cards-text-muted: var(--ws-color-text-muted);
213
+ --ws-cards-border: var(--ws-color-border);
214
+ --ws-cards-accent: var(--ws-color-primary);
215
+ }
216
+
217
+ .ws-forms {
218
+ --ws-forms-bg: var(--ws-color-surface);
219
+ --ws-forms-text: var(--ws-color-text);
220
+ --ws-forms-label: var(--ws-color-text-soft);
221
+ --ws-forms-input-bg: var(--ws-color-surface);
222
+ --ws-forms-input-border: var(--ws-color-border);
223
+ --ws-forms-input-focus: var(--ws-color-primary);
224
+ --ws-forms-action-bg: var(--ws-color-primary);
225
+ --ws-forms-action-text: var(--ws-color-primary-text);
226
+ }
227
+
228
+ .ws-auth {
229
+ --ws-auth-bg: var(--ws-color-surface);
230
+ --ws-auth-card-bg: var(--ws-color-surface);
231
+ --ws-auth-text: var(--ws-color-text);
232
+ --ws-auth-text-soft: var(--ws-color-text-soft);
233
+ --ws-auth-input-border: var(--ws-color-border);
234
+ --ws-auth-action-bg: var(--ws-color-primary);
235
+ --ws-auth-action-text: var(--ws-color-primary-text);
236
+ --ws-auth-border: var(--ws-color-border);
237
+ }
238
+
239
+ .ws-callout {
240
+ --ws-callout-bg: var(--ws-color-surface-alt);
241
+ --ws-callout-text: var(--ws-color-text);
242
+ --ws-callout-text-soft: var(--ws-color-text-soft);
243
+ --ws-callout-border: var(--ws-color-border);
244
+ --ws-callout-icon: var(--ws-color-text-muted);
245
+ }
246
+
247
+ .ws-badge {
248
+ --ws-badge-bg: var(--ws-color-surface-alt);
249
+ --ws-badge-text: var(--ws-color-text-soft);
250
+ --ws-badge-border: var(--ws-color-border);
251
+ }
252
+
253
+ .ws-accordion {
254
+ --ws-accordion-bg: var(--ws-color-surface);
255
+ --ws-accordion-text: var(--ws-color-text);
256
+ --ws-accordion-text-soft: var(--ws-color-text-soft);
257
+ --ws-accordion-border: var(--ws-color-border);
258
+ --ws-accordion-icon: var(--ws-color-text-muted);
259
+ }
260
+
261
+ .ws-tabs {
262
+ --ws-tabs-bg: var(--ws-color-surface);
263
+ --ws-tabs-text: var(--ws-color-text-muted);
264
+ --ws-tabs-active-text: var(--ws-color-primary);
265
+ --ws-tabs-active-border: var(--ws-color-primary);
266
+ --ws-tabs-border: var(--ws-color-border);
267
+ }
268
+
269
+ .ws-quote {
270
+ --ws-quote-bg: var(--ws-color-surface);
271
+ --ws-quote-text: var(--ws-color-text);
272
+ --ws-quote-text-soft: var(--ws-color-text-soft);
273
+ --ws-quote-accent: var(--ws-color-primary);
274
+ }
275
+
276
+ .ws-steps {
277
+ --ws-steps-bg: var(--ws-color-surface);
278
+ --ws-steps-text: var(--ws-color-text);
279
+ --ws-steps-text-soft: var(--ws-color-text-soft);
280
+ --ws-steps-accent: var(--ws-color-primary);
281
+ --ws-steps-accent-text: var(--ws-color-primary-text);
282
+ --ws-steps-line: var(--ws-color-border);
283
+ }
284
+
285
+ .ws-divider {
286
+ --ws-divider-color: var(--ws-color-border);
287
+ --ws-divider-text: var(--ws-color-text-muted);
288
+ }
289
+
290
+ .ws-link-card {
291
+ --ws-link-card-bg: var(--ws-color-surface);
292
+ --ws-link-card-text: var(--ws-color-text);
293
+ --ws-link-card-text-soft: var(--ws-color-text-soft);
294
+ --ws-link-card-border: var(--ws-color-border);
295
+ --ws-link-card-hover-border: var(--ws-color-primary);
296
+ --ws-link-card-accent: var(--ws-color-primary);
297
+ }
298
+
299
+ .ws-property-table {
300
+ --ws-property-table-bg: var(--ws-color-surface);
301
+ --ws-property-table-header-bg: var(--ws-color-surface-alt);
302
+ --ws-property-table-text: var(--ws-color-text);
303
+ --ws-property-table-text-soft: var(--ws-color-text-soft);
304
+ --ws-property-table-border: var(--ws-color-border);
305
+ }
306
+
307
+ .ws-description-list {
308
+ --ws-description-list-bg: var(--ws-color-surface-alt);
309
+ --ws-description-list-text: var(--ws-color-text);
310
+ --ws-description-list-label: var(--ws-color-text-muted);
311
+ --ws-description-list-border: var(--ws-color-border);
312
+ }
313
+
314
+ .ws-browser-support {
315
+ --ws-browser-support-bg: var(--ws-color-surface-alt);
316
+ --ws-browser-support-text: var(--ws-color-text);
317
+ --ws-browser-support-text-soft: var(--ws-color-text-soft);
318
+ --ws-browser-support-border: var(--ws-color-border);
319
+ }
320
+
321
+ .ws-stats-display {
322
+ --ws-stats-display-bg: var(--ws-color-surface-alt);
323
+ --ws-stats-display-text: var(--ws-color-text);
324
+ --ws-stats-display-label: var(--ws-color-text-muted);
325
+ --ws-stats-display-border: var(--ws-color-border);
326
+ }
327
+
328
+ .ws-file-tree {
329
+ --ws-file-tree-bg: var(--ws-color-surface-alt);
330
+ --ws-file-tree-text: var(--ws-color-text);
331
+ --ws-file-tree-text-soft: var(--ws-color-text-soft);
332
+ --ws-file-tree-border: var(--ws-color-border);
333
+ }
334
+
335
+ .ws-kbd {
336
+ --ws-kbd-bg: var(--ws-color-surface-alt);
337
+ --ws-kbd-text: var(--ws-color-text);
338
+ --ws-kbd-border: var(--ws-color-border);
339
+ }
340
+
341
+ .ws-empty-state {
342
+ --ws-empty-state-bg: var(--ws-color-surface);
343
+ --ws-empty-state-text: var(--ws-color-text);
344
+ --ws-empty-state-text-soft: var(--ws-color-text-soft);
345
+ --ws-empty-state-border: var(--ws-color-border);
346
+ --ws-empty-state-action-bg: var(--ws-color-primary);
347
+ --ws-empty-state-action-text: var(--ws-color-primary-text);
348
+ }
349
+
350
+ .ws-see-also {
351
+ --ws-see-also-bg: var(--ws-color-surface-alt);
352
+ --ws-see-also-text: var(--ws-color-text);
353
+ --ws-see-also-text-soft: var(--ws-color-text-soft);
354
+ --ws-see-also-accent: var(--ws-color-primary);
355
+ --ws-see-also-border: var(--ws-color-border);
356
+ }
357
+
358
+ .ws-code-preview {
359
+ --ws-code-preview-bg: #0f172a;
360
+ --ws-code-preview-text: #e2e8f0;
361
+ --ws-code-preview-header-bg: #1e293b;
362
+ --ws-code-preview-border: #334155;
363
+ }
364
+
365
+ .ws-cookie-consent {
366
+ --ws-cookie-consent-bg: var(--ws-color-surface);
367
+ --ws-cookie-consent-text: var(--ws-color-text);
368
+ --ws-cookie-consent-text-soft: var(--ws-color-text-soft);
369
+ --ws-cookie-consent-action-bg: var(--ws-color-primary);
370
+ --ws-cookie-consent-action-text: var(--ws-color-primary-text);
371
+ --ws-cookie-consent-border: var(--ws-color-border);
372
+ }
373
+
374
+ .ws-modal {
375
+ --ws-modal-bg: var(--ws-color-surface);
376
+ --ws-modal-text: var(--ws-color-text);
377
+ --ws-modal-text-soft: var(--ws-color-text-soft);
378
+ --ws-modal-border: var(--ws-color-border);
379
+ --ws-modal-overlay: rgba(0, 0, 0, 0.5);
380
+ --ws-modal-action-bg: var(--ws-color-primary);
381
+ --ws-modal-action-text: var(--ws-color-primary-text);
382
+ }
383
+
384
+ .ws-popup {
385
+ --ws-popup-bg: var(--ws-color-surface);
386
+ --ws-popup-text: var(--ws-color-text);
387
+ --ws-popup-text-soft: var(--ws-color-text-soft);
388
+ --ws-popup-border: var(--ws-color-border);
389
+ }
390
+
391
+ .ws-social-proof {
392
+ --ws-social-proof-bg: var(--ws-color-surface-alt);
393
+ --ws-social-proof-text: var(--ws-color-text);
394
+ --ws-social-proof-text-muted: var(--ws-color-text-muted);
395
+ --ws-social-proof-border: var(--ws-color-border);
396
+ }
397
+
398
+ .ws-breadcrumb {
399
+ --ws-breadcrumb-text: var(--ws-color-text-muted);
400
+ --ws-breadcrumb-active: var(--ws-color-text);
401
+ --ws-breadcrumb-separator: var(--ws-color-text-faint);
402
+ }
403
+
404
+ .ws-pagination {
405
+ --ws-pagination-bg: var(--ws-color-surface);
406
+ --ws-pagination-text: var(--ws-color-text-soft);
407
+ --ws-pagination-active-bg: var(--ws-color-primary);
408
+ --ws-pagination-active-text: var(--ws-color-primary-text);
409
+ --ws-pagination-hover-bg: var(--ws-color-surface-alt);
410
+ --ws-pagination-border: var(--ws-color-border);
411
+ }
412
+
413
+ .ws-avatar {
414
+ --ws-avatar-bg: var(--ws-color-primary-soft);
415
+ --ws-avatar-text: var(--ws-color-primary);
416
+ --ws-avatar-border: var(--ws-color-surface);
417
+ }
418
+
419
+ .ws-product-card {
420
+ --ws-product-card-bg: var(--ws-color-surface);
421
+ --ws-product-card-text: var(--ws-color-text);
422
+ --ws-product-card-text-soft: var(--ws-color-text-soft);
423
+ --ws-product-card-border: var(--ws-color-border);
424
+ --ws-product-card-action-bg: var(--ws-color-primary);
425
+ --ws-product-card-action-text: var(--ws-color-primary-text);
426
+ }
427
+
428
+ .ws-checkout {
429
+ --ws-checkout-bg: var(--ws-color-surface);
430
+ --ws-checkout-card-bg: var(--ws-color-surface-alt);
431
+ --ws-checkout-text: var(--ws-color-text);
432
+ --ws-checkout-text-soft: var(--ws-color-text-soft);
433
+ --ws-checkout-border: var(--ws-color-border);
434
+ --ws-checkout-action-bg: var(--ws-color-primary);
435
+ --ws-checkout-action-text: var(--ws-color-primary-text);
436
+ }
437
+
438
+ .ws-comments {
439
+ --ws-comments-bg: var(--ws-color-surface);
440
+ --ws-comments-text: var(--ws-color-text);
441
+ --ws-comments-text-soft: var(--ws-color-text-soft);
442
+ --ws-comments-text-muted: var(--ws-color-text-muted);
443
+ --ws-comments-border: var(--ws-color-border);
444
+ --ws-comments-action-bg: var(--ws-color-primary);
445
+ --ws-comments-action-text: var(--ws-color-primary-text);
446
+ }
447
+
448
+ .ws-related-articles {
449
+ --ws-related-articles-bg: var(--ws-color-surface);
450
+ --ws-related-articles-text: var(--ws-color-text);
451
+ --ws-related-articles-text-soft: var(--ws-color-text-soft);
452
+ --ws-related-articles-text-muted: var(--ws-color-text-muted);
453
+ --ws-related-articles-accent: var(--ws-color-primary);
454
+ --ws-related-articles-border: var(--ws-color-border);
455
+ }
456
+
457
+ .ws-event-schedule {
458
+ --ws-event-schedule-bg: var(--ws-color-surface);
459
+ --ws-event-schedule-header-bg: var(--ws-color-surface-alt);
460
+ --ws-event-schedule-text: var(--ws-color-text);
461
+ --ws-event-schedule-text-soft: var(--ws-color-text-soft);
462
+ --ws-event-schedule-border: var(--ws-color-border);
463
+ }
464
+
465
+ .ws-onboarding {
466
+ --ws-onboarding-bg: var(--ws-color-surface);
467
+ --ws-onboarding-text: var(--ws-color-text);
468
+ --ws-onboarding-text-soft: var(--ws-color-text-soft);
469
+ --ws-onboarding-accent: var(--ws-color-primary);
470
+ --ws-onboarding-accent-text: var(--ws-color-primary-text);
471
+ --ws-onboarding-border: var(--ws-color-border);
472
+ }
473
+
474
+ .ws-error-500 {
475
+ --ws-error-500-bg: var(--ws-color-surface);
476
+ --ws-error-500-text: var(--ws-color-text);
477
+ --ws-error-500-text-soft: var(--ws-color-text-soft);
478
+ --ws-error-500-accent: var(--ws-color-primary);
479
+ --ws-error-500-action-bg: var(--ws-color-primary);
480
+ --ws-error-500-action-text: var(--ws-color-primary-text);
481
+ }