@webmate-studio/builder 0.2.95 → 0.2.96

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/design-tokens.js +71 -3
  3. package/src/markdown.js +8 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webmate-studio/builder",
3
- "version": "0.2.95",
3
+ "version": "0.2.96",
4
4
  "type": "module",
5
5
  "description": "Webmate Studio Component Builder",
6
6
  "keywords": [
package/src/design-tokens.js CHANGED
@@ -69,28 +69,55 @@ function generateSemanticColorUtilities(tokens) {
69
69
  // Otherwise generate all three variants
70
70
 
71
71
  if (className.startsWith('bg-')) {
72
- // Only generate bg-* utility
72
+ // Only generate bg-* utility (with hover/focus/active variants)
73
73
  if (!processedClasses.has(className)) {
74
74
  processedClasses.add(className);
75
+ // Base class
75
76
  utilities += `\n.${className} {`;
76
77
  utilities += `\n background-color: var(${colorVar});`;
77
78
  utilities += `\n}`;
79
+ // Hover variant
80
+ utilities += `\n.hover\\:${className}:hover {`;
81
+ utilities += `\n background-color: var(${colorVar});`;
82
+ utilities += `\n}`;
83
+ // Focus variant
84
+ utilities += `\n.focus\\:${className}:focus {`;
85
+ utilities += `\n background-color: var(${colorVar});`;
86
+ utilities += `\n}`;
78
87
  }
79
88
  } else if (className.startsWith('text-')) {
80
- // Only generate text-* utility
89
+ // Only generate text-* utility (with hover/focus/active variants)
81
90
  if (!processedClasses.has(className)) {
82
91
  processedClasses.add(className);
92
+ // Base class
83
93
  utilities += `\n.${className} {`;
84
94
  utilities += `\n color: var(${colorVar});`;
85
95
  utilities += `\n}`;
96
+ // Hover variant
97
+ utilities += `\n.hover\\:${className}:hover {`;
98
+ utilities += `\n color: var(${colorVar});`;
99
+ utilities += `\n}`;
100
+ // Focus variant
101
+ utilities += `\n.focus\\:${className}:focus {`;
102
+ utilities += `\n color: var(${colorVar});`;
103
+ utilities += `\n}`;
86
104
  }
87
105
  } else if (className.startsWith('border-')) {
88
- // Only generate border-* utility
106
+ // Only generate border-* utility (with hover/focus/active variants)
89
107
  if (!processedClasses.has(className)) {
90
108
  processedClasses.add(className);
109
+ // Base class
91
110
  utilities += `\n.${className} {`;
92
111
  utilities += `\n border-color: var(${colorVar});`;
93
112
  utilities += `\n}`;
113
+ // Hover variant
114
+ utilities += `\n.hover\\:${className}:hover {`;
115
+ utilities += `\n border-color: var(${colorVar});`;
116
+ utilities += `\n}`;
117
+ // Focus variant
118
+ utilities += `\n.focus\\:${className}:focus {`;
119
+ utilities += `\n border-color: var(${colorVar});`;
120
+ utilities += `\n}`;
94
121
  }
95
122
  } else {
96
123
  // No prefix: generate all three variants (for primary, secondary, etc.)
@@ -100,23 +127,50 @@ function generateSemanticColorUtilities(tokens) {
100
127
 
101
128
  if (!processedClasses.has(textClass)) {
102
129
  processedClasses.add(textClass);
130
+ // Base class
103
131
  utilities += `\n.${textClass} {`;
104
132
  utilities += `\n color: var(${colorVar});`;
105
133
  utilities += `\n}`;
134
+ // Hover variant
135
+ utilities += `\n.hover\\:${textClass}:hover {`;
136
+ utilities += `\n color: var(${colorVar});`;
137
+ utilities += `\n}`;
138
+ // Focus variant
139
+ utilities += `\n.focus\\:${textClass}:focus {`;
140
+ utilities += `\n color: var(${colorVar});`;
141
+ utilities += `\n}`;
106
142
  }
107
143
 
108
144
  if (!processedClasses.has(bgClass)) {
109
145
  processedClasses.add(bgClass);
146
+ // Base class
110
147
  utilities += `\n.${bgClass} {`;
111
148
  utilities += `\n background-color: var(${colorVar});`;
112
149
  utilities += `\n}`;
150
+ // Hover variant
151
+ utilities += `\n.hover\\:${bgClass}:hover {`;
152
+ utilities += `\n background-color: var(${colorVar});`;
153
+ utilities += `\n}`;
154
+ // Focus variant
155
+ utilities += `\n.focus\\:${bgClass}:focus {`;
156
+ utilities += `\n background-color: var(${colorVar});`;
157
+ utilities += `\n}`;
113
158
  }
114
159
 
115
160
  if (!processedClasses.has(borderClass)) {
116
161
  processedClasses.add(borderClass);
162
+ // Base class
117
163
  utilities += `\n.${borderClass} {`;
118
164
  utilities += `\n border-color: var(${colorVar});`;
119
165
  utilities += `\n}`;
166
+ // Hover variant
167
+ utilities += `\n.hover\\:${borderClass}:hover {`;
168
+ utilities += `\n border-color: var(${colorVar});`;
169
+ utilities += `\n}`;
170
+ // Focus variant
171
+ utilities += `\n.focus\\:${borderClass}:focus {`;
172
+ utilities += `\n border-color: var(${colorVar});`;
173
+ utilities += `\n}`;
120
174
  }
121
175
  }
122
176
  }
@@ -1268,6 +1322,20 @@ export function generateCSSFromTokens(tokens) {
1268
1322
  lines.push(' margin-bottom: 0.25rem;');
1269
1323
  lines.push('}');
1270
1324
 
1325
+ // Blockquotes
1326
+ lines.push('.prose blockquote {');
1327
+ lines.push(' margin-top: 1.5rem;');
1328
+ lines.push(' margin-bottom: 1.5rem;');
1329
+ lines.push(' padding-left: 1rem;');
1330
+ lines.push(' border-left: 4px solid var(--color-primary, #3b82f6);');
1331
+ lines.push(' font-style: italic;');
1332
+ lines.push(' color: var(--color-text-subtle, #6b7280);');
1333
+ lines.push('}');
1334
+ lines.push('.prose blockquote p {');
1335
+ lines.push(' margin-top: 0.5rem;');
1336
+ lines.push(' margin-bottom: 0.5rem;');
1337
+ lines.push('}');
1338
+
1271
1339
  // Inline styles
1272
1340
  lines.push('.prose strong {');
1273
1341
  lines.push(' font-weight: 700;');
package/src/markdown.js CHANGED
@@ -77,8 +77,15 @@ export function markdownToHtml(markdown, options = {}) {
77
77
  return '';
78
78
  }
79
79
 
80
+ // Decode HTML entities in markdown (wichtig für Blockquotes: > → >)
81
+ // Markdown sollte nie HTML-escaped sein, aber manchmal wird es so gespeichert
82
+ const doc = new JSDOM('<!DOCTYPE html><html><body><textarea></textarea></body></html>');
83
+ const textarea = doc.window.document.querySelector('textarea');
84
+ textarea.innerHTML = markdown;
85
+ const decodedMarkdown = textarea.value;
86
+
80
87
  // Markdown zu HTML
81
- let html = marked.parse(markdown);
88
+ let html = marked.parse(decodedMarkdown);
82
89
 
83
90
  // Shift heading levels if requested
84
91
  if (options.headingStartLevel) {