vibe-design-system 2.8.16 → 2.8.18
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.
package/package.json
CHANGED
|
@@ -1730,6 +1730,8 @@ function extractTokenUsage() {
|
|
|
1730
1730
|
const radiusCounts = new Map();
|
|
1731
1731
|
const animateCounts = new Map();
|
|
1732
1732
|
const textSizeCounts = new Map();
|
|
1733
|
+
// Per-file tracking: token → Map<componentName, count>
|
|
1734
|
+
const textSizeFiles = new Map();
|
|
1733
1735
|
|
|
1734
1736
|
// Spacing utilities: gap-*, p-*, px-*, py-*, pt-*, pb-*, pl-*, pr-*, m-*, mx-*, my-*, mt-*, mb-*, ml-*, mr-*, space-*, w-*, h-*
|
|
1735
1737
|
const spacingRe = /\b(gap|p|px|py|pt|pb|pl|pr|m|mx|my|mt|mb|ml|mr|space-x|space-y|w|h|size|inset|top|bottom|left|right|min-w|min-h|max-w|max-h)-((?:\d+(\.\d+)?|px|full|screen|auto|fit|max|min|svh|dvh|svw|dvw))\b/g;
|
|
@@ -1792,11 +1794,16 @@ function extractTokenUsage() {
|
|
|
1792
1794
|
animateCounts.set(key, (animateCounts.get(key) || 0) + 1);
|
|
1793
1795
|
}
|
|
1794
1796
|
|
|
1795
|
-
// Text sizes
|
|
1797
|
+
// Text sizes — global count + per-component breakdown
|
|
1798
|
+
const componentName = path.basename(rel).replace(/\.(tsx|jsx|ts|js)$/, "");
|
|
1796
1799
|
const textSizeUtilReCopy = new RegExp(textSizeUtilRe.source, "g");
|
|
1797
1800
|
while ((m = textSizeUtilReCopy.exec(content)) !== null) {
|
|
1798
1801
|
const key = `text-${m[1]}`;
|
|
1799
1802
|
textSizeCounts.set(key, (textSizeCounts.get(key) || 0) + 1);
|
|
1803
|
+
// Per-file
|
|
1804
|
+
if (!textSizeFiles.has(key)) textSizeFiles.set(key, new Map());
|
|
1805
|
+
const fm = textSizeFiles.get(key);
|
|
1806
|
+
fm.set(componentName, (fm.get(componentName) || 0) + 1);
|
|
1800
1807
|
}
|
|
1801
1808
|
}
|
|
1802
1809
|
|
|
@@ -1812,7 +1819,15 @@ function extractTokenUsage() {
|
|
|
1812
1819
|
zIndex: toTop(zIndexCounts, 10),
|
|
1813
1820
|
radius: toTop(radiusCounts, 10),
|
|
1814
1821
|
animations: toTop(animateCounts, 8),
|
|
1815
|
-
textSizes: toTop(textSizeCounts, 12),
|
|
1822
|
+
textSizes: toTop(textSizeCounts, 12).map(({ token, count }) => ({
|
|
1823
|
+
token,
|
|
1824
|
+
count,
|
|
1825
|
+
// Top 5 components that use this text size most
|
|
1826
|
+
topFiles: [...(textSizeFiles.get(token) || new Map()).entries()]
|
|
1827
|
+
.sort((a, b) => b[1] - a[1])
|
|
1828
|
+
.slice(0, 5)
|
|
1829
|
+
.map(([name]) => name),
|
|
1830
|
+
})),
|
|
1816
1831
|
};
|
|
1817
1832
|
}
|
|
1818
1833
|
|
|
@@ -1353,24 +1353,35 @@ function writeFoundationsStories(foundations) {
|
|
|
1353
1353
|
" ) : (",
|
|
1354
1354
|
" <div style={{ display: \"flex\", flexDirection: \"column\", gap: 0, marginBottom: 48, border: \"1px solid #e5e7eb\", borderRadius: 10, overflow: \"hidden\" }}>",
|
|
1355
1355
|
" {typeScale.map(({ step, size, px, lineHeight }, i) => {",
|
|
1356
|
-
" const
|
|
1357
|
-
" const
|
|
1358
|
-
" const
|
|
1356
|
+
" const usage = usedTextSizes.find(u => u.token === `text-${step}`);",
|
|
1357
|
+
" const usageCount = usage?.count;",
|
|
1358
|
+
" const topFiles = usage?.topFiles || [];",
|
|
1359
1359
|
" return (",
|
|
1360
|
-
" <div key={step} style={{ display: \"flex\",
|
|
1361
|
-
" <div style={{
|
|
1362
|
-
" <div style={{
|
|
1363
|
-
" <
|
|
1364
|
-
"
|
|
1360
|
+
" <div key={step} style={{ display: \"flex\", flexDirection: \"column\", padding: \"14px 20px\", background: i % 2 === 0 ? \"#fff\" : \"#f9fafb\", borderTop: i === 0 ? \"none\" : \"1px solid #f0f0f0\" }}>",
|
|
1361
|
+
" <div style={{ display: \"flex\", alignItems: \"center\", gap: 20 }}>",
|
|
1362
|
+
" <div style={{ width: 140, flexShrink: 0 }}>",
|
|
1363
|
+
" <div style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>",
|
|
1364
|
+
" <code style={{ fontSize: 12, fontWeight: 600, color: \"var(--color-primary, #6366f1)\", background: \"color-mix(in srgb, var(--color-primary, #6366f1) 12%, white)\", padding: \"2px 7px\", borderRadius: 4 }}>text-{step}</code>",
|
|
1365
|
+
" {usageCount && <span style={{ fontSize: 11, color: \"#9ca3af\" }}>×{usageCount}</span>}",
|
|
1366
|
+
" </div>",
|
|
1367
|
+
" <div style={{ fontSize: 11, color: \"#9ca3af\", marginTop: 4 }}>",
|
|
1368
|
+
" {size}{px && px !== size ? ` · ${px}` : \"\"}",
|
|
1369
|
+
" {lineHeight ? <span style={{ marginLeft: 8 }}>lh {lineHeight}</span> : null}",
|
|
1370
|
+
" </div>",
|
|
1365
1371
|
" </div>",
|
|
1366
|
-
" <div style={{ fontSize:
|
|
1367
|
-
"
|
|
1368
|
-
" {lineHeight ? <span style={{ marginLeft: 8 }}>lh {lineHeight}</span> : null}",
|
|
1372
|
+
" <div style={{ fontSize: size, fontFamily: sansFamily, color: \"#111\", lineHeight: lineHeight || 1.5, overflow: \"hidden\", whiteSpace: \"nowrap\", textOverflow: \"ellipsis\", flex: 1 }}>",
|
|
1373
|
+
" The quick brown fox jumps over the lazy dog",
|
|
1369
1374
|
" </div>",
|
|
1370
1375
|
" </div>",
|
|
1371
|
-
"
|
|
1372
|
-
"
|
|
1373
|
-
"
|
|
1376
|
+
" {topFiles.length > 0 && (",
|
|
1377
|
+
" <div style={{ display: \"flex\", flexWrap: \"wrap\", gap: 5, marginTop: 8, paddingLeft: 0 }}>",
|
|
1378
|
+
" {topFiles.map((name: string) => (",
|
|
1379
|
+
" <span key={name} style={{ fontSize: 10, background: \"#f0f9ff\", color: \"#0369a1\", padding: \"2px 8px\", borderRadius: 3, border: \"1px solid #bae6fd\", fontFamily: \"monospace\" }}>",
|
|
1380
|
+
" {name}",
|
|
1381
|
+
" </span>",
|
|
1382
|
+
" ))}",
|
|
1383
|
+
" </div>",
|
|
1384
|
+
" )}",
|
|
1374
1385
|
" </div>",
|
|
1375
1386
|
" );",
|
|
1376
1387
|
" })}",
|
|
@@ -1607,7 +1618,7 @@ function writeFoundationsStories(foundations) {
|
|
|
1607
1618
|
" {spacingTokens.map(({ token, label, barWidth }) => (",
|
|
1608
1619
|
" <div key={token} style={{ display: \"flex\", alignItems: \"center\", gap: 10, minHeight: 24 }}>",
|
|
1609
1620
|
" <span style={{ width: 40, fontSize: 11, color: \"#9ca3af\", textAlign: \"right\", flexShrink: 0, fontVariantNumeric: \"tabular-nums\" }}>{token}</span>",
|
|
1610
|
-
" <div style={{ width: Math.max(barWidth, 2), height: 16, background: barWidth === 0 ? \"transparent\" : \"
|
|
1621
|
+
" <div style={{ width: Math.max(barWidth, 2), height: 16, background: barWidth === 0 ? \"transparent\" : \"var(--color-primary, #6366f1)\", opacity: barWidth === 0 ? 1 : 0.85, borderRadius: 3, flexShrink: 0, border: barWidth === 0 ? \"1px dashed #555\" : \"none\", boxSizing: \"border-box\" as any }} />",
|
|
1611
1622
|
" <code style={{ fontSize: 11, color: \"#6b7280\" }}>{label}</code>",
|
|
1612
1623
|
" </div>",
|
|
1613
1624
|
" ))}",
|
|
@@ -1744,7 +1755,7 @@ function writeFoundationsStories(foundations) {
|
|
|
1744
1755
|
" <div style={{ display: \"flex\", flexDirection: \"column\", gap: 6, maxWidth: 380 }}>",
|
|
1745
1756
|
" {zIndexTokens.map(({ token, value, label }) => (",
|
|
1746
1757
|
" <div key={token} style={{ display: \"flex\", alignItems: \"center\", gap: 12, padding: \"8px 14px\", background: \"#fff\", borderRadius: 8, border: \"1px solid #e5e7eb\" }}>",
|
|
1747
|
-
" <span style={{ width: 36, fontSize: 15, fontWeight: 700, color: \"#6366f1\", textAlign: \"right\", flexShrink: 0, fontVariantNumeric: \"tabular-nums\" }}>{value}</span>",
|
|
1758
|
+
" <span style={{ width: 36, fontSize: 15, fontWeight: 700, color: \"var(--color-primary, #6366f1)\", textAlign: \"right\", flexShrink: 0, fontVariantNumeric: \"tabular-nums\" }}>{value}</span>",
|
|
1748
1759
|
" <div>",
|
|
1749
1760
|
" <span style={{ fontSize: 12, fontWeight: 600 }}>{token}</span>",
|
|
1750
1761
|
" {label ? <span style={{ fontSize: 11, color: \"#9ca3af\", marginLeft: 8 }}>{label}</span> : null}",
|
|
@@ -1756,7 +1767,7 @@ function writeFoundationsStories(foundations) {
|
|
|
1756
1767
|
" <div style={{ display: \"flex\", flexDirection: \"column\", gap: 6, maxWidth: 380 }}>",
|
|
1757
1768
|
" {usedZIndex.map(({ token, count }) => (",
|
|
1758
1769
|
" <div key={token} style={{ display: \"flex\", alignItems: \"center\", gap: 12, padding: \"8px 14px\", background: \"#fff\", borderRadius: 8, border: \"1px solid #e5e7eb\" }}>",
|
|
1759
|
-
" <span style={{ width: 36, fontSize: 15, fontWeight: 700, color: \"#6366f1\", textAlign: \"right\", flexShrink: 0 }}>{token.replace('z-','')}</span>",
|
|
1770
|
+
" <span style={{ width: 36, fontSize: 15, fontWeight: 700, color: \"var(--color-primary, #6366f1)\", textAlign: \"right\", flexShrink: 0 }}>{token.replace('z-','')}</span>",
|
|
1760
1771
|
" <div>",
|
|
1761
1772
|
" <span style={{ fontSize: 12, fontWeight: 600 }}>{token}</span>",
|
|
1762
1773
|
" {zSemantics[token] ? <span style={{ fontSize: 11, color: \"#9ca3af\", marginLeft: 8 }}>{zSemantics[token]}</span> : null}",
|
|
@@ -1837,7 +1848,7 @@ function writeFoundationsStories(foundations) {
|
|
|
1837
1848
|
" <div style={{",
|
|
1838
1849
|
" width: isFull ? 64 : 72,",
|
|
1839
1850
|
" height: isFull ? 64 : 56,",
|
|
1840
|
-
" background: \"
|
|
1851
|
+
" background: \"var(--color-primary, #6366f1)\",",
|
|
1841
1852
|
" borderRadius: isFull ? \"50%\" : value === \"0px\" || value === \"0\" ? 0 : value,",
|
|
1842
1853
|
" flexShrink: 0,",
|
|
1843
1854
|
" }} />",
|
|
@@ -1907,7 +1918,7 @@ function writeFoundationsStories(foundations) {
|
|
|
1907
1918
|
" position: \"absolute\",",
|
|
1908
1919
|
" top: 4, left: active ? 172 : 4,",
|
|
1909
1920
|
" width: 44, height: 24,",
|
|
1910
|
-
" background: \"
|
|
1921
|
+
" background: \"var(--color-primary, #6366f1)\",",
|
|
1911
1922
|
" borderRadius: 6,",
|
|
1912
1923
|
" transition: `left ${value} cubic-bezier(0.4,0,0.2,1)`,",
|
|
1913
1924
|
" }} />",
|