@webspire/mcp 0.3.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 (9) 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 +213 -213
  5. package/dist/index.js +1 -1
  6. package/dist/registration.js +146 -2
  7. package/package.json +3 -2
  8. package/dist/tools.d.ts +0 -3
  9. package/dist/tools.js +0 -151
package/css/webspire-tokens.css ADDED
@@ -0,0 +1,151 @@
1
+ /*
2
+ * Webspire Token System
3
+ * =====================
4
+ *
5
+ * Architecture: 3 layers
6
+ *
7
+ * Host Tokens (optional) → Your project's design tokens
8
+ * WebSpire Alias Tokens → Stable library integration layer
9
+ * Component Tokens → Per-component semantic variables
10
+ *
11
+ * Usage:
12
+ * @import "webspire-tokens.css";
13
+ * @import "webspire-components.css"; (component token definitions)
14
+ *
15
+ * Customization:
16
+ * :root { --ws-color-primary: #2563eb; } (override alias)
17
+ * .ws-cta { --ws-cta-action-bg: var(--my-brand-accent); } (override component)
18
+ *
19
+ * Docs & configurator: https://webspire.de/tokens
20
+ */
21
+
22
+ /* ── Layer 2: WebSpire Alias Tokens ── */
23
+ /* These bridge your project tokens to component tokens. */
24
+ /* Override these to match your brand — all components adapt. */
25
+
26
+ :root {
27
+ /* Surface */
28
+ --ws-color-surface: var(--surface-1, #ffffff);
29
+ --ws-color-surface-alt: var(--surface-2, #f8fafc);
30
+ --ws-color-surface-muted: var(--surface-3, #f1f5f9);
31
+
32
+ /* Text */
33
+ --ws-color-text: var(--text-1, #0f172a);
34
+ --ws-color-text-soft: var(--text-2, #334155);
35
+ --ws-color-text-muted: var(--text-3, #64748b);
36
+ --ws-color-text-faint: var(--text-4, #94a3b8);
37
+ --ws-color-text-inverse: var(--text-inverse, #ffffff);
38
+
39
+ /* Primary / Brand */
40
+ --ws-color-primary: var(--color-primary, #4f46e5);
41
+ --ws-color-primary-hover: var(--color-primary-hover, #4338ca);
42
+ --ws-color-primary-soft: var(--color-primary-soft, #eef2ff);
43
+ --ws-color-primary-text: var(--color-primary-text, #ffffff);
44
+
45
+ /* Accent */
46
+ --ws-color-accent: var(--color-accent, #06b6d4);
47
+ --ws-color-accent-hover: var(--color-accent-hover, #0891b2);
48
+ --ws-color-accent-soft: var(--color-accent-soft, #ecfeff);
49
+
50
+ /* Borders */
51
+ --ws-color-border: var(--color-border, #e2e8f0);
52
+ --ws-color-border-strong: var(--color-border-strong, #94a3b8);
53
+
54
+ /* Semantic */
55
+ --ws-color-success: var(--color-success, #10b981);
56
+ --ws-color-success-soft: var(--color-success-soft, #ecfdf5);
57
+ --ws-color-warning: var(--color-warning, #f59e0b);
58
+ --ws-color-warning-soft: var(--color-warning-soft, #fffbeb);
59
+ --ws-color-danger: var(--color-danger, #ef4444);
60
+ --ws-color-danger-soft: var(--color-danger-soft, #fef2f2);
61
+ --ws-color-info: var(--color-info, #3b82f6);
62
+ --ws-color-info-soft: var(--color-info-soft, #eff6ff);
63
+
64
+ /* Radius */
65
+ --ws-radius-sm: var(--radius-sm, 0.375rem);
66
+ --ws-radius-md: var(--radius-md, 0.5rem);
67
+ --ws-radius-lg: var(--radius-lg, 0.75rem);
68
+ --ws-radius-xl: var(--radius-xl, 1rem);
69
+
70
+ /* Shadows */
71
+ --ws-shadow-sm: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.05));
72
+ --ws-shadow-md: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
73
+ --ws-shadow-lg: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
74
+ }
75
+
76
+ /* ── Dark Mode ── */
77
+ /* Single place for dark overrides — not per-component. */
78
+ /* Supports both class-based (.dark) and media query. */
79
+
80
+ @media (prefers-color-scheme: dark) {
81
+ :root:not(.light) {
82
+ --ws-color-surface: var(--surface-1-dark, #0f172a);
83
+ --ws-color-surface-alt: var(--surface-2-dark, #1e293b);
84
+ --ws-color-surface-muted: var(--surface-3-dark, #334155);
85
+
86
+ --ws-color-text: var(--text-1-dark, #f1f5f9);
87
+ --ws-color-text-soft: var(--text-2-dark, #cbd5e1);
88
+ --ws-color-text-muted: var(--text-3-dark, #94a3b8);
89
+ --ws-color-text-faint: var(--text-4-dark, #64748b);
90
+ --ws-color-text-inverse: var(--text-inverse-dark, #0f172a);
91
+
92
+ --ws-color-primary: var(--color-primary-dark, #818cf8);
93
+ --ws-color-primary-hover: var(--color-primary-hover-dark, #6366f1);
94
+ --ws-color-primary-soft: var(--color-primary-soft-dark, rgba(99, 102, 241, 0.15));
95
+
96
+ --ws-color-accent: var(--color-accent-dark, #22d3ee);
97
+ --ws-color-accent-soft: var(--color-accent-soft-dark, rgba(6, 182, 212, 0.15));
98
+
99
+ --ws-color-border: var(--color-border-dark, #334155);
100
+ --ws-color-border-strong: var(--color-border-strong-dark, #475569);
101
+
102
+ --ws-color-success: var(--color-success-dark, #34d399);
103
+ --ws-color-success-soft: var(--color-success-soft-dark, rgba(16, 185, 129, 0.15));
104
+ --ws-color-warning: var(--color-warning-dark, #fbbf24);
105
+ --ws-color-warning-soft: var(--color-warning-soft-dark, rgba(245, 158, 11, 0.15));
106
+ --ws-color-danger: var(--color-danger-dark, #f87171);
107
+ --ws-color-danger-soft: var(--color-danger-soft-dark, rgba(239, 68, 68, 0.15));
108
+ --ws-color-info: var(--color-info-dark, #60a5fa);
109
+ --ws-color-info-soft: var(--color-info-soft-dark, rgba(59, 130, 246, 0.15));
110
+
111
+ --ws-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.2);
112
+ --ws-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3);
113
+ --ws-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3);
114
+ }
115
+ }
116
+
117
+ /* Class-based dark mode (for manual toggle) */
118
+ .dark {
119
+ --ws-color-surface: var(--surface-1-dark, #0f172a);
120
+ --ws-color-surface-alt: var(--surface-2-dark, #1e293b);
121
+ --ws-color-surface-muted: var(--surface-3-dark, #334155);
122
+
123
+ --ws-color-text: var(--text-1-dark, #f1f5f9);
124
+ --ws-color-text-soft: var(--text-2-dark, #cbd5e1);
125
+ --ws-color-text-muted: var(--text-3-dark, #94a3b8);
126
+ --ws-color-text-faint: var(--text-4-dark, #64748b);
127
+ --ws-color-text-inverse: var(--text-inverse-dark, #0f172a);
128
+
129
+ --ws-color-primary: var(--color-primary-dark, #818cf8);
130
+ --ws-color-primary-hover: var(--color-primary-hover-dark, #6366f1);
131
+ --ws-color-primary-soft: var(--color-primary-soft-dark, rgba(99, 102, 241, 0.15));
132
+
133
+ --ws-color-accent: var(--color-accent-dark, #22d3ee);
134
+ --ws-color-accent-soft: var(--color-accent-soft-dark, rgba(6, 182, 212, 0.15));
135
+
136
+ --ws-color-border: var(--color-border-dark, #334155);
137
+ --ws-color-border-strong: var(--color-border-strong-dark, #475569);
138
+
139
+ --ws-color-success: var(--color-success-dark, #34d399);
140
+ --ws-color-success-soft: var(--color-success-soft-dark, rgba(16, 185, 129, 0.15));
141
+ --ws-color-warning: var(--color-warning-dark, #fbbf24);
142
+ --ws-color-warning-soft: var(--color-warning-soft-dark, rgba(245, 158, 11, 0.15));
143
+ --ws-color-danger: var(--color-danger-dark, #f87171);
144
+ --ws-color-danger-soft: var(--color-danger-soft-dark, rgba(239, 68, 68, 0.15));
145
+ --ws-color-info: var(--color-info-dark, #60a5fa);
146
+ --ws-color-info-soft: var(--color-info-soft-dark, rgba(59, 130, 246, 0.15));
147
+
148
+ --ws-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.2);
149
+ --ws-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3);
150
+ --ws-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3);
151
+ }