Skip to content

Commit 423b31b

Browse files
ranst91ranst91
authored
Merge pull request ag-ui-protocol#285 from ag-ui-protocol/chore/dojo-redesign
chore: dojo redesign
2 parents 7233dce + c4e5614 commit 423b31b

File tree

10 files changed

+502
-82
lines changed

10 files changed

+502
-82
lines changed

‎typescript-sdk/apps/dojo/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
"@mdx-js/react": "^3.1.0",
3939
"@monaco-editor/react": "^4.7.0",
4040
"@next/mdx": "^15.2.3",
41+
"@phosphor-icons/react": "^2.1.10",
4142
"@radix-ui/react-dropdown-menu": "^2.1.6",
4243
"@radix-ui/react-slot": "^1.1.2",
4344
"@radix-ui/react-tabs": "^1.1.3",

‎typescript-sdk/apps/dojo/src/app/[integrationId]/feature/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,5 +55,5 @@ export default function FeatureLayout({ children, params }: Props) {
5555
}
5656
}, [children, codeFiles, readme, view])
5757

58-
return <div className="bg-(--copilot-kit-background-color) w-full h-full">{content}</div>;
58+
return <div className="bg-white rounded-lg overflow-hidden w-full h-full">{content}</div>;
5959
}

‎typescript-sdk/apps/dojo/src/app/globals.css‎

Lines changed: 141 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,151 @@
11
@import "tailwindcss";
2+
@import "../styles/typography.css";
23

34
@plugin "tailwindcss-animate";
45

56
@custom-variant dark (&:is(.dark *));
67

7-
@theme inline {
8+
@theme {
9+
/* Base Shadcn Colors */
810
--color-background: var(--background);
911
--color-foreground: var(--foreground);
10-
--font-sans: var(--font-geist-sans);
11-
--font-mono: var(--font-geist-mono);
12-
--color-sidebar-ring: var(--sidebar-ring);
13-
--color-sidebar-border: var(--sidebar-border);
14-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
15-
--color-sidebar-accent: var(--sidebar-accent);
16-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
17-
--color-sidebar-primary: var(--sidebar-primary);
18-
--color-sidebar-foreground: var(--sidebar-foreground);
19-
--color-sidebar: var(--sidebar);
20-
--color-chart-5: var(--chart-5);
21-
--color-chart-4: var(--chart-4);
22-
--color-chart-3: var(--chart-3);
23-
--color-chart-2: var(--chart-2);
24-
--color-chart-1: var(--chart-1);
25-
--color-ring: var(--ring);
26-
--color-input: var(--input);
27-
--color-border: var(--border);
28-
--color-destructive-foreground: var(--destructive-foreground);
29-
--color-destructive: var(--destructive);
30-
--color-accent-foreground: var(--accent-foreground);
31-
--color-accent: var(--accent);
32-
--color-muted-foreground: var(--muted-foreground);
33-
--color-muted: var(--muted);
34-
--color-secondary-foreground: var(--secondary-foreground);
35-
--color-secondary: var(--secondary);
36-
--color-primary-foreground: var(--primary-foreground);
37-
--color-primary: var(--primary);
38-
--color-popover-foreground: var(--popover-foreground);
39-
--color-popover: var(--popover);
40-
--color-card-foreground: var(--card-foreground);
4112
--color-card: var(--card);
42-
--radius-sm: calc(var(--radius) - 4px);
43-
--radius-md: calc(var(--radius) - 2px);
44-
--radius-lg: var(--radius);
45-
--radius-xl: calc(var(--radius) + 4px);
13+
--color-card-foreground: var(--card-foreground);
14+
--color-popover: var(--popover);
15+
--color-popover-foreground: var(--popover-foreground);
16+
--color-primary: var(--primary);
17+
--color-primary-foreground: var(--primary-foreground);
18+
--color-secondary: var(--secondary);
19+
--color-secondary-foreground: var(--secondary-foreground);
20+
--color-muted: var(--muted);
21+
--color-muted-foreground: var(--muted-foreground);
22+
--color-accent: var(--accent);
23+
--color-accent-foreground: var(--accent-foreground);
24+
--color-destructive: var(--destructive);
25+
--color-destructive-foreground: var(--destructive-foreground);
26+
--color-border: var(--border);
27+
--color-input: var(--input);
28+
--color-ring: var(--ring);
29+
30+
/* Provider Colors */
31+
--color-provider-openai: var(--openai);
32+
--color-provider-anthropic: var(--anthropic);
33+
--color-provider-cohere: var(--cohere);
34+
35+
/* CopilotCloud Palette Colors */
36+
--color-palette-grey-0: #FFFFFF;
37+
--color-palette-grey-25: #FAFCFA;
38+
--color-palette-grey-100: #F7F7F9;
39+
--color-palette-grey-200: #F0F0F4;
40+
--color-palette-grey-300: #E9E9EF;
41+
--color-palette-grey-400: #E2E2EA;
42+
--color-palette-grey-500: #DBDBE5;
43+
--color-palette-grey-600: #AFAFB7;
44+
--color-palette-grey-700: #838389;
45+
--color-palette-grey-800: #575758;
46+
--color-palette-grey-900: #2B2B2B;
47+
--color-palette-grey-1000: #010507;
48+
49+
--color-palette-mint-40030: rgba(133,224,206,0.3);
50+
--color-palette-mint-400: #85E0CE;
51+
--color-palette-mint-800: #1B936F;
52+
53+
--color-palette-lilac-40010: rgba(190,194,255,0.1);
54+
--color-palette-lilac-40020: rgba(190,194,255,0.2);
55+
--color-palette-lilac-40030: rgba(190,194,255,0.3);
56+
--color-palette-lilac-400: #BEC2FF;
57+
58+
--color-palette-yellow-40030: rgba(255,243,136,0.3);
59+
--color-palette-yellow-400: #FFF388;
60+
61+
--color-palette-orange-40020: rgba(255,172,77,0.2);
62+
--color-palette-orange-400: #FFAC4D;
63+
64+
--color-palette-surface-main: #DEDEE9;
65+
--color-palette-surface-solidEquivalentDefault70: #F8F8FB;
66+
--color-palette-surface-default70: rgba(255,255,255,0.7);
67+
--color-palette-surface-default50: rgba(255,255,255,0.5);
68+
--color-palette-surface-default30: rgba(255,255,255,0.3);
69+
--color-palette-surface-container: #FFFFFF;
70+
--color-palette-surface-containerHovered: #FAFCFA;
71+
--color-palette-surface-containerFocusedPressed: rgba(190,194,255,0.1);
72+
--color-palette-surface-containerActive: #BEC2FF1A;
73+
--color-palette-surface-containerActiveHovered: rgba(190,194,255,0.2);
74+
--color-palette-surface-containerActiveFocused: rgba(190,194,255,0.3);
75+
--color-palette-surface-containerMint: #B5E0CE;
76+
--color-palette-surface-containerMint30: rgba(181,224,206,0.3);
77+
--color-palette-surface-containerLilac: #BEC2FF;
78+
--color-palette-surface-containerInvert: #010507;
79+
--color-palette-surface-background: #DBDBE5;
80+
--color-palette-surface-progressBarEmpty: #0105071A;
81+
--color-palette-surface-progressBarFull: #189370;
82+
--color-palette-surface-surfaceActionFilledHoveredAndFocused: #2B2B2B;
83+
--color-palette-surface-surfaceActionFilledPressed: #57575B;
84+
--color-palette-surface-containerPressed: #BEC2FF4D;
85+
--color-palette-surface-containerEnabledSolidEquivalent: #F8F9FF;
86+
--color-palette-surface-containerPressedHoverSolidEquivalent: #F1F2FF;
87+
--color-palette-surface-containerActivePressedSolidEquivalent: #E5E7FD;
88+
--color-palette-surface-containerHoveredAndFocused: #F0F0F4;
89+
--color-palette-surface-actionGhostHoveredAndFocused: #0105070D;
90+
91+
--color-palette-text-primary: #010507;
92+
--color-palette-text-secondary: #57575B;
93+
--color-palette-text-disabled: #838389;
94+
--color-palette-text-invert: #FFFFFF;
95+
--color-palette-text-details: #189370;
96+
--color-palette-text-title: #3C464A;
97+
--color-palette-text-progressBar: #525252;
98+
--color-palette-text-link: #0D2E41;
99+
100+
--color-palette-icon-default: #010507;
101+
--color-palette-icon-disabled: #838389;
102+
--color-palette-icon-invert: #FFFFFF;
103+
104+
--color-palette-border-default: #FFFFFF;
105+
--color-palette-border-container: #DBDBE5;
106+
--color-palette-border-actionEnabled: #BEC2FF;
107+
--color-palette-border-divider: #DBDBE5;
108+
109+
--color-palette-gradient-primary: linear-gradient(90deg, #85E0CE 0%, #FFF388 100%);
110+
111+
/* CopilotCloud Spacing */
112+
--spacing-spacing-1: 4px;
113+
--spacing-spacing-2: 8px;
114+
--spacing-spacing-3: 12px;
115+
--spacing-spacing-4: 16px;
116+
--spacing-spacing-5: 20px;
117+
--spacing-spacing-6: 24px;
118+
--spacing-spacing-7: 28px;
119+
--spacing-spacing-8: 32px;
120+
--spacing-spacing-9: 36px;
121+
--spacing-spacing-10: 40px;
122+
--spacing-spacing-11: 44px;
123+
--spacing-spacing-12: 48px;
124+
--spacing-spacing-13: 52px;
125+
--spacing-spacing-14: 56px;
126+
--spacing-spacing-15: 60px;
127+
--spacing-spacing-16: 64px;
128+
--spacing-spacing-17: 68px;
129+
--spacing-spacing-18: 72px;
130+
131+
/* CopilotCloud Border Radius */
132+
--radius-xs: 4px;
133+
--radius-sm: 8px;
134+
--radius-md: 12px;
135+
--radius-lg: 16px;
136+
--radius-xl: 24px;
137+
--radius-2xl: 48px;
138+
--radius-3xl: 200px;
139+
140+
/* Font Families */
141+
--font-family-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
142+
--font-family-mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, monospace;
143+
144+
/* Elevation/Shadows */
145+
--shadow-sm: 0px 1px 3px 0px rgba(1, 5, 7, 0.08);
146+
--shadow-md: 0px 6px 6px -2px rgba(1, 5, 7, 0.08);
147+
--shadow-lg: 0px 16px 24px -8px rgba(1, 5, 7, 0.12);
148+
--shadow-xl: 0px 24px 32px -12px rgba(1, 5, 7, 0.16);
46149
}
47150

48151
:root {
@@ -84,6 +187,7 @@
84187
--openai: hsl(160 70% 50%); /* Bright green */
85188
--anthropic: hsl(240 80% 60%); /* Bright blue */
86189
--cohere: hsl(0 80% 60%); /* Bright red */
190+
87191
}
88192

89193
.dark {
@@ -136,6 +240,6 @@
136240
@apply border-border outline-ring/50;
137241
}
138242
body {
139-
@apply bg-background text-foreground;
243+
@apply bg-background text-foreground font-sans;
140244
}
141245
}

‎typescript-sdk/apps/dojo/src/components/demo-list/demo-list.tsx‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,23 @@ export function DemoList({ demos, selectedDemo, onSelect, llmSelector }: DemoLis
1414
return (
1515
<div className="h-full">
1616
<div className="px-4 pt-3 pb-2">
17-
<h2 className="text-xs uppercase tracking-wider font-semibold text-muted-foreground mb-1">
17+
<h2
18+
className={cn(
19+
"transition-all duration-300 ease-in-out inline-block whitespace-nowrap paragraphs-Small-Regular-Uppercase text-[10px] text-palette-text-secondary opacity-100 scale-100 w-fit",
20+
)}
21+
>
1822
Demos
1923
</h2>
2024
{llmSelector && <div className="mt-2">{llmSelector}</div>}
2125
</div>
22-
<ul className="px-2 space-y-0.5">
26+
<ul className="px-2 space-y-1">
2327
{demos.map((demo) => (
2428
<li key={demo.id}>
2529
<button
2630
className={cn(
27-
"w-full text-left py-2 px-3 rounded-md hover:bg-accent/50 transition-colors",
31+
"w-full text-left py-2 px-3 rounded-sm hover:bg-white/50 transition-colors",
2832
"flex flex-col gap-0.5",
29-
selectedDemo === demo.id && "bg-accent",
33+
selectedDemo === demo.id && "bg-white/70",
3034
)}
3135
onClick={() => onSelect(demo.id)}
3236
>
@@ -39,11 +43,10 @@ export function DemoList({ demos, selectedDemo, onSelect, llmSelector }: DemoLis
3943
{demo.tags.map((tag) => (
4044
<Badge
4145
key={tag}
42-
variant={selectedDemo === demo.id ? "default" : "secondary"}
4346
className={cn(
44-
"text-xs px-1.5 py-0.5 rounded-full",
47+
"text-xs px-1.5 py-0.5 rounded-full bg-white/65 text-primary",
4548
selectedDemo === demo.id &&
46-
"bg-primary text-primary-foreground border-transparent",
49+
"bg-primary text-primary-foreground border-transparent",
4750
)}
4851
>
4952
{tag}

‎typescript-sdk/apps/dojo/src/components/layout/main-layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export function MainLayout({ children }: { children: React.ReactNode }) {
4040

4141
return (
4242
<ViewerLayout>
43-
<div className="flex h-full w-full overflow-hidden relative">
43+
<div className="flex h-full w-full overflow-hidden relative gap-2">
4444
{/* Mobile Header with Hamburger Menu */}
4545
{isMobile && (
4646
<div className="absolute top-0 left-0 right-0 z-50 bg-background border-b p-2 md:hidden">

‎typescript-sdk/apps/dojo/src/components/layout/viewer-layout.tsx‎

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22
import { ViewerConfig } from "@/types/feature";
33
import { cn } from "@/lib/utils";
4+
import { useMobileView } from "@/utils/use-mobile-view";
45

56
interface ViewerLayoutProps extends ViewerConfig {
67
className?: string;
@@ -14,13 +15,41 @@ export function ViewerLayout({
1415
className,
1516
children,
1617
}: ViewerLayoutProps) {
18+
const { isMobile } = useMobileView();
19+
1720
return (
18-
<div className={cn("flex h-screen", className)}>
19-
<div className="flex flex-1 overflow-hidden">
21+
<div className={cn("relative flex h-screen overflow-hidden bg-palette-surface-main", className, {
22+
"p-spacing-2": !isMobile,
23+
})}>
24+
<div className="flex flex-1 overflow-hidden z-1">
2025
<main className="flex-1 overflow-auto">
2126
<div className="h-full">{children}</div>
2227
</main>
2328
</div>
29+
{/* Background blur circles - Figma exact specs */}
30+
{/* Ellipse 1351 */}
31+
<div className="absolute w-[445.84px] h-[445.84px] left-[1040px] top-[11px] rounded-full z-0"
32+
style={{ background: 'rgba(255, 172, 77, 0.2)', filter: 'blur(103.196px)' }} />
33+
34+
{/* Ellipse 1347 */}
35+
<div className="absolute w-[609.35px] h-[609.35px] left-[1338.97px] top-[624.5px] rounded-full z-0"
36+
style={{ background: '#C9C9DA', filter: 'blur(103.196px)' }} />
37+
38+
{/* Ellipse 1350 */}
39+
<div className="absolute w-[609.35px] h-[609.35px] left-[670px] top-[-365px] rounded-full z-0"
40+
style={{ background: '#C9C9DA', filter: 'blur(103.196px)' }} />
41+
42+
{/* Ellipse 1348 */}
43+
<div className="absolute w-[609.35px] h-[609.35px] left-[507.87px] top-[702.14px] rounded-full z-0"
44+
style={{ background: '#F3F3FC', filter: 'blur(103.196px)' }} />
45+
46+
{/* Ellipse 1346 */}
47+
<div className="absolute w-[445.84px] h-[445.84px] left-[127.91px] top-[331px] rounded-full z-0"
48+
style={{ background: 'rgba(255, 243, 136, 0.3)', filter: 'blur(103.196px)' }} />
49+
50+
{/* Ellipse 1268 */}
51+
<div className="absolute w-[445.84px] h-[445.84px] left-[-205px] top-[802.72px] rounded-full z-0"
52+
style={{ background: 'rgba(255, 172, 77, 0.2)', filter: 'blur(103.196px)' }} />
2453
</div>
2554
);
2655
}

0 commit comments

Comments
 (0)