@utopia-studio-design/design-system-cli 0.5.0 → 0.6.1
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/README.md
CHANGED
|
@@ -40,3 +40,12 @@ Use `npm run build` before deployment. The generated project pins a compatible
|
|
|
40
40
|
Ceramic package range and splits the optional Puck editor dependencies into
|
|
41
41
|
separate production chunks; the validated Layout JSON and registry renderer
|
|
42
42
|
remain usable without opening the visual editor.
|
|
43
|
+
|
|
44
|
+
## 0.6.1 patch
|
|
45
|
+
|
|
46
|
+
Copied templates resolve their own navigation at the standalone project root.
|
|
47
|
+
Dashboard Composer opens `/visual-editor/` and returns to `/`; links to another
|
|
48
|
+
template use the hosted Ceramic preview. The seven-template catalog and Ceramic
|
|
49
|
+
0.8.x dependency range are unchanged. Official starter verification uses
|
|
50
|
+
`npm run build` and runtime checks. `template validate` remains a community
|
|
51
|
+
submission check requiring a separately authored `ceramic.template.json`.
|
package/bin/utopia-ds.mjs
CHANGED
|
@@ -239,7 +239,12 @@ function copyTemplateProject(entry) {
|
|
|
239
239
|
const path = join(directory, name)
|
|
240
240
|
if (statSync(path).isDirectory()) replaceTheme(path)
|
|
241
241
|
else if (/\.(html|tsx|md)$/.test(name)) {
|
|
242
|
+
// Local links follow the copied template root; other templates stay hosted.
|
|
243
|
+
const templateSlug = entry.id.replace(/^template-/, '')
|
|
242
244
|
const content = readFileSync(path, 'utf8')
|
|
245
|
+
.replace(/(["'`])\/templates\/([a-z0-9-]+)\//g, (_match, quote, slug) =>
|
|
246
|
+
slug === templateSlug ? `${quote}/` : `${quote}https://design.utopia-studio.co/templates/${slug}/`)
|
|
247
|
+
.replace('Open live composer</a>', 'Open live composer (hosted preview)</a>')
|
|
243
248
|
.replaceAll('/themes/utopia-default.css', `/themes/${theme}.css`)
|
|
244
249
|
.replaceAll('data-theme="utopia-default"', `data-theme="${theme}"`)
|
|
245
250
|
.replaceAll("const activeTheme = 'utopia-default'", `const activeTheme = '${theme}'`)
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
{
|
|
87
87
|
"id": "precise",
|
|
88
88
|
"label": "Precise dissolve",
|
|
89
|
-
"themes": ["barrier-intelligence", "renacore"],
|
|
89
|
+
"themes": ["barrier-intelligence", "renacore", "vyapti"],
|
|
90
90
|
"personality": "precise",
|
|
91
91
|
"description": "Controlled dissolves and small scale changes for analytical surfaces.",
|
|
92
92
|
"rules": ["Prefer opacity over travel", "Keep scale changes below two percent", "Preserve analytical continuity"],
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://utopia-studio.co/design-system/theme.schema.json",
|
|
3
|
+
"id": "vyapti",
|
|
4
|
+
"name": "Vyapti",
|
|
5
|
+
"type": "theme-policy",
|
|
6
|
+
"locked": false,
|
|
7
|
+
"motionProfile": "precise",
|
|
8
|
+
"summary": "Vyapti maps Ceramic to a white-first, deep-green technical interface that feels calm, exact, and evidence-led. Product surfaces stay restrained while green communicates action, measured signal, and active state.",
|
|
9
|
+
"sourceFiles": [
|
|
10
|
+
"packages/design-system/src/themes/vyapti.css",
|
|
11
|
+
"packages/design-system/src/manifests/theme-vyapti.json",
|
|
12
|
+
"https://github.com/Vyapti-Resonance/VyaptiWeb/blob/04e8ab7260ec48a10146ad65ccfacfc7167eb7be/design-system/tokens.css",
|
|
13
|
+
"https://github.com/Vyapti-Resonance/VyaptiWeb/blob/04e8ab7260ec48a10146ad65ccfacfc7167eb7be/design-system/tokens.ts"
|
|
14
|
+
],
|
|
15
|
+
"brandPrimitives": {
|
|
16
|
+
"colors": {
|
|
17
|
+
"primary50": "#EEFBF4",
|
|
18
|
+
"primary500": "#15B57F",
|
|
19
|
+
"primary600": "#0F9B6A",
|
|
20
|
+
"primary700": "#0C7D57",
|
|
21
|
+
"deep900": "#012519",
|
|
22
|
+
"deep950": "#00140D",
|
|
23
|
+
"white": "#FFFFFF",
|
|
24
|
+
"surface": "#FAFDFB",
|
|
25
|
+
"muted": "#F2F7F4",
|
|
26
|
+
"mutedForeground": "#5D7066"
|
|
27
|
+
},
|
|
28
|
+
"typography": {
|
|
29
|
+
"body": "Inter",
|
|
30
|
+
"display": "Hanken Grotesk",
|
|
31
|
+
"mono": "JetBrains Mono",
|
|
32
|
+
"arabic": "IBM Plex Sans Arabic",
|
|
33
|
+
"weights": [400, 500, 600, 700],
|
|
34
|
+
"displayRule": "Use Hanken Grotesk for concise page and section statements with restrained negative tracking.",
|
|
35
|
+
"bodyRule": "Use Inter for product UI, navigation, controls, and explanatory copy.",
|
|
36
|
+
"monoRule": "Use JetBrains Mono only for protocol labels, phases, metrics, metadata, and system status.",
|
|
37
|
+
"arabicDisplayRule": "Use IBM Plex Sans Arabic with native rhythm and no Latin casing or tracking."
|
|
38
|
+
},
|
|
39
|
+
"geometry": {
|
|
40
|
+
"baseRadius": "10px",
|
|
41
|
+
"controlRadius": "10px",
|
|
42
|
+
"surfaceRadius": "18px",
|
|
43
|
+
"elevation": "Low-contrast green borders and soft deep-green shadows. Structure should come from spacing and typography before containers."
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
"semanticMappings": {
|
|
47
|
+
"--background": "Vyapti White",
|
|
48
|
+
"--foreground": "Deep 900",
|
|
49
|
+
"--card": "Vyapti White",
|
|
50
|
+
"--card-foreground": "Deep 900",
|
|
51
|
+
"--primary": "Primary 500",
|
|
52
|
+
"--primary-foreground": "Deep 950 for accessible contrast",
|
|
53
|
+
"--secondary": "Gray 100",
|
|
54
|
+
"--secondary-foreground": "Deep 900",
|
|
55
|
+
"--muted": "Gray 100",
|
|
56
|
+
"--muted-foreground": "Gray 600",
|
|
57
|
+
"--border": "Deep 900 at 10%",
|
|
58
|
+
"--input": "Deep 900 at 18%",
|
|
59
|
+
"--ring": "Primary 600",
|
|
60
|
+
"--radius-control": "10px",
|
|
61
|
+
"--radius-surface": "18px",
|
|
62
|
+
"--font-sans": "Inter",
|
|
63
|
+
"--font-display": "Hanken Grotesk",
|
|
64
|
+
"--font-mono": "JetBrains Mono",
|
|
65
|
+
"--font-arabic": "IBM Plex Sans Arabic",
|
|
66
|
+
"--motion-duration-page": "260ms",
|
|
67
|
+
"--motion-duration-reveal": "320ms"
|
|
68
|
+
},
|
|
69
|
+
"visualPolicy": {
|
|
70
|
+
"tone": ["calm", "technical", "precise", "evidence-led", "quietly authoritative"],
|
|
71
|
+
"allow": [
|
|
72
|
+
"white-first canvases with green-gray depth",
|
|
73
|
+
"primary green for action, status, measured signal, and focus",
|
|
74
|
+
"deep green inverse surfaces for deliberate emphasis",
|
|
75
|
+
"spacious section rhythm with compact controls",
|
|
76
|
+
"asymmetry when it improves comprehension",
|
|
77
|
+
"restrained borders and soft shadows",
|
|
78
|
+
"technical diagrams and proof-led content"
|
|
79
|
+
],
|
|
80
|
+
"avoid": [
|
|
81
|
+
"generic blue or purple AI gradients",
|
|
82
|
+
"neon cybersecurity styling",
|
|
83
|
+
"pure black surfaces",
|
|
84
|
+
"heavy shadows or large decorative glows",
|
|
85
|
+
"interchangeable bento-card compositions",
|
|
86
|
+
"using green as decoration without a semantic job",
|
|
87
|
+
"component-specific color literals",
|
|
88
|
+
"left/right-only layout APIs"
|
|
89
|
+
]
|
|
90
|
+
},
|
|
91
|
+
"iconPolicy": {
|
|
92
|
+
"system": "lucide",
|
|
93
|
+
"description": "Use restrained Lucide line icons with a consistent 1.5px stroke. Icons clarify function or status and never replace accessible labels.",
|
|
94
|
+
"allow": [
|
|
95
|
+
"Lucide icons at semantic component sizes",
|
|
96
|
+
"1.5px strokes",
|
|
97
|
+
"direction-neutral icons",
|
|
98
|
+
"mirrored directional icons in RTL",
|
|
99
|
+
"accessible names for icon-only controls"
|
|
100
|
+
],
|
|
101
|
+
"avoid": ["emoji as interface icons", "mixed icon families", "decorative icon repetition", "unlabeled icon-only controls"]
|
|
102
|
+
},
|
|
103
|
+
"componentPolicy": {
|
|
104
|
+
"button": "Compact 40px default control. Primary uses Vyapti green with Deep 950 text to preserve contrast; secondary uses quiet green-gray structure.",
|
|
105
|
+
"input": "Compact field with a 10px radius, Deep 900 border at 18%, and Primary 600 focus ring.",
|
|
106
|
+
"card": "18px radius with white or quiet green-gray surface. Use a card only to group a distinct object or interaction.",
|
|
107
|
+
"badge": "Compact status or metadata label. Pair every status color with text or an icon.",
|
|
108
|
+
"sidebar": "Predictable navigation structure with restrained active green and compact controls.",
|
|
109
|
+
"dataVisualization": "Green and deep-green lead the series. Amber and red are reserved for meaningful warning and destructive states."
|
|
110
|
+
},
|
|
111
|
+
"arabicFriendly": {
|
|
112
|
+
"direction": "Support dir=\"rtl\" through logical CSS properties and mirror directional motion or icons.",
|
|
113
|
+
"typography": "Use IBM Plex Sans Arabic roles without Latin uppercase, tracking, or forced line-height behavior."
|
|
114
|
+
},
|
|
115
|
+
"aiRules": [
|
|
116
|
+
"Treat the Vyapti primitive palette as immutable and map components through Ceramic semantic roles.",
|
|
117
|
+
"Use the light white-first canvas as the default product and marketing mode.",
|
|
118
|
+
"Reserve Primary Green for action, active state, status, measured signal, and focus.",
|
|
119
|
+
"Use Deep Green instead of pure black for inverse surfaces.",
|
|
120
|
+
"Use Hanken Grotesk for display statements, Inter for UI and body copy, and JetBrains Mono only for technical metadata.",
|
|
121
|
+
"Prefer typography and spacing before adding a card or container.",
|
|
122
|
+
"Define default, hover, active, focus-visible, disabled, loading, success, and error states for interactive components.",
|
|
123
|
+
"Keep Arabic on IBM Plex Sans Arabic tokens without Latin casing or tracking."
|
|
124
|
+
]
|
|
125
|
+
}
|
|
@@ -535,6 +535,92 @@
|
|
|
535
535
|
"--modal-surface": "#FFFFFF",
|
|
536
536
|
"--popover-surface": "#FFFFFF"
|
|
537
537
|
}
|
|
538
|
+
},
|
|
539
|
+
{
|
|
540
|
+
"id": "vyapti",
|
|
541
|
+
"name": "Vyapti",
|
|
542
|
+
"shortName": "Vyapti",
|
|
543
|
+
"locked": false,
|
|
544
|
+
"role": "brand theme",
|
|
545
|
+
"description": "White-first, deep-green technical theme for calm, precise, evidence-led product and marketing interfaces.",
|
|
546
|
+
"motionProfile": "precise",
|
|
547
|
+
"bestFor": [
|
|
548
|
+
"Vyapti product interfaces",
|
|
549
|
+
"security and cryptography workflows",
|
|
550
|
+
"technical marketing and evidence-led content"
|
|
551
|
+
],
|
|
552
|
+
"principles": [
|
|
553
|
+
"calm technical hierarchy",
|
|
554
|
+
"white-first product surfaces",
|
|
555
|
+
"semantic green emphasis",
|
|
556
|
+
"spacious sections and compact controls",
|
|
557
|
+
"Arabic-friendly logical layout"
|
|
558
|
+
],
|
|
559
|
+
"policyManifest": "packages/design-system/src/manifests/theme-vyapti.json",
|
|
560
|
+
"css": "packages/design-system/src/themes/vyapti.css",
|
|
561
|
+
"iconSystem": "lucide",
|
|
562
|
+
"values": {
|
|
563
|
+
"--background": "#FFFFFF",
|
|
564
|
+
"--foreground": "#012519",
|
|
565
|
+
"--card": "#FFFFFF",
|
|
566
|
+
"--card-foreground": "#012519",
|
|
567
|
+
"--primary": "#15B57F",
|
|
568
|
+
"--primary-foreground": "#00140D",
|
|
569
|
+
"--secondary": "#F2F7F4",
|
|
570
|
+
"--secondary-foreground": "#012519",
|
|
571
|
+
"--muted": "#F2F7F4",
|
|
572
|
+
"--muted-foreground": "#5D7066",
|
|
573
|
+
"--border": "rgb(1 37 25 / 10%)",
|
|
574
|
+
"--input": "rgb(1 37 25 / 18%)",
|
|
575
|
+
"--ring": "#0F9B6A",
|
|
576
|
+
"--radius": "10px",
|
|
577
|
+
"--radius-control": "10px",
|
|
578
|
+
"--radius-surface": "18px",
|
|
579
|
+
"--radius-chat-bubble": "18px",
|
|
580
|
+
"--radius-chat-composer": "24px",
|
|
581
|
+
"--radius-chat-token": "14px",
|
|
582
|
+
"--shadow-control": "0 0 0 4px rgb(21 181 127 / 20%)",
|
|
583
|
+
"--motion-duration-press": "100ms",
|
|
584
|
+
"--motion-duration-page": "260ms",
|
|
585
|
+
"--motion-duration-expand": "220ms",
|
|
586
|
+
"--motion-duration-reveal": "320ms",
|
|
587
|
+
"--motion-duration-icon": "280ms",
|
|
588
|
+
"--motion-ease-standard": "cubic-bezier(0.2, 0, 0, 1)",
|
|
589
|
+
"--motion-ease-emphasized": "cubic-bezier(0.16, 1, 0.3, 1)",
|
|
590
|
+
"--motion-ease-icon": "cubic-bezier(0.16, 1, 0.3, 1)",
|
|
591
|
+
"--motion-press-scale": "0.985",
|
|
592
|
+
"--motion-distance-page": "6px",
|
|
593
|
+
"--motion-distance-reveal": "10px",
|
|
594
|
+
"--font-sans": "Inter",
|
|
595
|
+
"--font-display": "Hanken Grotesk",
|
|
596
|
+
"--font-ui-support": "Inter",
|
|
597
|
+
"--font-marketing-display": "Hanken Grotesk",
|
|
598
|
+
"--font-mono": "JetBrains Mono",
|
|
599
|
+
"--font-arabic": "IBM Plex Sans Arabic",
|
|
600
|
+
"--font-arabic-body": "IBM Plex Sans Arabic",
|
|
601
|
+
"--font-arabic-display": "IBM Plex Sans Arabic",
|
|
602
|
+
"--font-weight-arabic-body": "400",
|
|
603
|
+
"--font-weight-arabic-display": "700",
|
|
604
|
+
"--font-size-display": "clamp(2.35rem, 6vw, 4.75rem)",
|
|
605
|
+
"--font-size-arabic-body": "16px",
|
|
606
|
+
"--font-size-arabic-body-lg": "18px",
|
|
607
|
+
"--font-size-arabic-display": "clamp(2.25rem, 5.7vw, 4.5rem)",
|
|
608
|
+
"--line-height-arabic": "1.75",
|
|
609
|
+
"--line-height-arabic-body": "1.75",
|
|
610
|
+
"--line-height-arabic-display": "1.16",
|
|
611
|
+
"--tracking-arabic": "0",
|
|
612
|
+
"--tracking-arabic-display": "0",
|
|
613
|
+
"--sidebar-width": "17rem",
|
|
614
|
+
"--control-height-sm": "2rem",
|
|
615
|
+
"--sidebar-width-collapsed": "4rem",
|
|
616
|
+
"--sidebar-min-block-size": "30rem",
|
|
617
|
+
"--sidebar-rail-size": "8px",
|
|
618
|
+
"--button-height": "40px",
|
|
619
|
+
"--card-padding": "24px",
|
|
620
|
+
"--overlay": "rgb(0 20 13 / 72%)",
|
|
621
|
+
"--modal-surface": "#FFFFFF",
|
|
622
|
+
"--popover-surface": "#FFFFFF"
|
|
623
|
+
}
|
|
538
624
|
}
|
|
539
625
|
],
|
|
540
626
|
"plannedThemeSlots": [
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@utopia-studio-design/design-system-cli",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.1",
|
|
4
4
|
"description": "AI-readable CLI and MCP server for Ceramic Design System",
|
|
5
5
|
"ceramic": {
|
|
6
|
-
"designSystem": "^0.
|
|
6
|
+
"designSystem": "^0.8.0"
|
|
7
7
|
},
|
|
8
8
|
"type": "module",
|
|
9
9
|
"license": "MIT",
|