From 78404dab55e3c2c6e1d17eb58e0b76ff426fbb5b Mon Sep 17 00:00:00 2001 From: ran Date: Fri, 8 Aug 2025 16:16:59 +0200 Subject: [PATCH 1/4] chore: add basic branded styling --- .../app/[integrationId]/feature/layout.tsx | 2 +- typescript-sdk/apps/dojo/src/app/globals.css | 170 ++++++++++++++---- .../src/components/layout/main-layout.tsx | 2 +- .../src/components/layout/viewer-layout.tsx | 32 +++- .../dojo/src/components/sidebar/sidebar.tsx | 10 +- typescript-sdk/apps/dojo/tailwind.config.ts | 18 +- 6 files changed, 176 insertions(+), 58 deletions(-) diff --git a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/layout.tsx b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/layout.tsx index e45a37e50..3a2bc8ddb 100644 --- a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/layout.tsx +++ b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/layout.tsx @@ -55,5 +55,5 @@ export default function FeatureLayout({ children, params }: Props) { } }, [children, codeFiles, readme, view]) - return
{content}
; + return
{content}
; } diff --git a/typescript-sdk/apps/dojo/src/app/globals.css b/typescript-sdk/apps/dojo/src/app/globals.css index e7efb37ab..8ea34139b 100644 --- a/typescript-sdk/apps/dojo/src/app/globals.css +++ b/typescript-sdk/apps/dojo/src/app/globals.css @@ -1,48 +1,145 @@ @import "tailwindcss"; +@import "../styles/typography.css"; @plugin "tailwindcss-animate"; @custom-variant dark (&:is(.dark *)); -@theme inline { +@theme { + /* Base Shadcn Colors */ --color-background: var(--background); --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); - --color-sidebar-ring: var(--sidebar-ring); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar: var(--sidebar); - --color-chart-5: var(--chart-5); - --color-chart-4: var(--chart-4); - --color-chart-3: var(--chart-3); - --color-chart-2: var(--chart-2); - --color-chart-1: var(--chart-1); - --color-ring: var(--ring); - --color-input: var(--input); - --color-border: var(--border); - --color-destructive-foreground: var(--destructive-foreground); - --color-destructive: var(--destructive); - --color-accent-foreground: var(--accent-foreground); - --color-accent: var(--accent); - --color-muted-foreground: var(--muted-foreground); - --color-muted: var(--muted); - --color-secondary-foreground: var(--secondary-foreground); - --color-secondary: var(--secondary); - --color-primary-foreground: var(--primary-foreground); - --color-primary: var(--primary); - --color-popover-foreground: var(--popover-foreground); - --color-popover: var(--popover); - --color-card-foreground: var(--card-foreground); --color-card: var(--card); - --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + + /* Provider Colors */ + --color-provider-openai: var(--openai); + --color-provider-anthropic: var(--anthropic); + --color-provider-cohere: var(--cohere); + + /* CopilotCloud Palette Colors */ + --color-palette-grey-0: #FFFFFF; + --color-palette-grey-25: #FAFCFA; + --color-palette-grey-100: #F7F7F9; + --color-palette-grey-200: #F0F0F4; + --color-palette-grey-300: #E9E9EF; + --color-palette-grey-400: #E2E2EA; + --color-palette-grey-500: #DBDBE5; + --color-palette-grey-600: #AFAFB7; + --color-palette-grey-700: #838389; + --color-palette-grey-800: #575758; + --color-palette-grey-900: #2B2B2B; + --color-palette-grey-1000: #010507; + + --color-palette-mint-40030: rgba(133,224,206,0.3); + --color-palette-mint-400: #85E0CE; + --color-palette-mint-800: #1B936F; + + --color-palette-lilac-40010: rgba(190,194,255,0.1); + --color-palette-lilac-40020: rgba(190,194,255,0.2); + --color-palette-lilac-40030: rgba(190,194,255,0.3); + --color-palette-lilac-400: #BEC2FF; + + --color-palette-yellow-40030: rgba(255,243,136,0.3); + --color-palette-yellow-400: #FFF388; + + --color-palette-orange-40020: rgba(255,172,77,0.2); + --color-palette-orange-400: #FFAC4D; + + --color-palette-surface-main: #DEDEE9; + --color-palette-surface-solidEquivalentDefault70: #F8F8FB; + --color-palette-surface-default70: rgba(255,255,255,0.7); + --color-palette-surface-default50: rgba(255,255,255,0.5); + --color-palette-surface-default30: rgba(255,255,255,0.3); + --color-palette-surface-container: #FFFFFF; + --color-palette-surface-containerHovered: #FAFCFA; + --color-palette-surface-containerFocusedPressed: rgba(190,194,255,0.1); + --color-palette-surface-containerActive: #BEC2FF1A; + --color-palette-surface-containerActiveHovered: rgba(190,194,255,0.2); + --color-palette-surface-containerActiveFocused: rgba(190,194,255,0.3); + --color-palette-surface-containerMint: #B5E0CE; + --color-palette-surface-containerMint30: rgba(181,224,206,0.3); + --color-palette-surface-containerLilac: #BEC2FF; + --color-palette-surface-containerInvert: #010507; + --color-palette-surface-background: #DBDBE5; + --color-palette-surface-progressBarEmpty: #0105071A; + --color-palette-surface-progressBarFull: #189370; + --color-palette-surface-surfaceActionFilledHoveredAndFocused: #2B2B2B; + --color-palette-surface-surfaceActionFilledPressed: #57575B; + --color-palette-surface-containerPressed: #BEC2FF4D; + --color-palette-surface-containerEnabledSolidEquivalent: #F8F9FF; + --color-palette-surface-containerPressedHoverSolidEquivalent: #F1F2FF; + --color-palette-surface-containerActivePressedSolidEquivalent: #E5E7FD; + --color-palette-surface-containerHoveredAndFocused: #F0F0F4; + --color-palette-surface-actionGhostHoveredAndFocused: #0105070D; + + --color-palette-text-primary: #010507; + --color-palette-text-secondary: #57575B; + --color-palette-text-disabled: #838389; + --color-palette-text-invert: #FFFFFF; + --color-palette-text-details: #189370; + --color-palette-text-title: #3C464A; + --color-palette-text-progressBar: #525252; + --color-palette-text-link: #0D2E41; + + --color-palette-icon-default: #010507; + --color-palette-icon-disabled: #838389; + --color-palette-icon-invert: #FFFFFF; + + --color-palette-border-default: #FFFFFF; + --color-palette-border-container: #DBDBE5; + --color-palette-border-actionEnabled: #BEC2FF; + --color-palette-border-divider: #DBDBE5; + + --color-palette-gradient-primary: linear-gradient(90deg, #85E0CE 0%, #FFF388 100%); + + /* CopilotCloud Spacing */ + --spacing-spacing-1: 4px; + --spacing-spacing-2: 8px; + --spacing-spacing-3: 12px; + --spacing-spacing-4: 16px; + --spacing-spacing-5: 20px; + --spacing-spacing-6: 24px; + --spacing-spacing-7: 28px; + --spacing-spacing-8: 32px; + --spacing-spacing-9: 36px; + --spacing-spacing-10: 40px; + --spacing-spacing-11: 44px; + --spacing-spacing-12: 48px; + --spacing-spacing-13: 52px; + --spacing-spacing-14: 56px; + --spacing-spacing-15: 60px; + --spacing-spacing-16: 64px; + --spacing-spacing-17: 68px; + --spacing-spacing-18: 72px; + + /* CopilotCloud Border Radius */ + --radius-xs: 2px; + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-xl: 16px; + --radius-2xl: 20px; + --radius-3xl: 24px; + + /* Font Families */ + --font-family-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; + --font-family-mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, monospace; } :root { @@ -84,6 +181,7 @@ --openai: hsl(160 70% 50%); /* Bright green */ --anthropic: hsl(240 80% 60%); /* Bright blue */ --cohere: hsl(0 80% 60%); /* Bright red */ + } .dark { diff --git a/typescript-sdk/apps/dojo/src/components/layout/main-layout.tsx b/typescript-sdk/apps/dojo/src/components/layout/main-layout.tsx index 9706452ce..db0c6ce49 100644 --- a/typescript-sdk/apps/dojo/src/components/layout/main-layout.tsx +++ b/typescript-sdk/apps/dojo/src/components/layout/main-layout.tsx @@ -40,7 +40,7 @@ export function MainLayout({ children }: { children: React.ReactNode }) { return ( -
+
{/* Mobile Header with Hamburger Menu */} {isMobile && (
diff --git a/typescript-sdk/apps/dojo/src/components/layout/viewer-layout.tsx b/typescript-sdk/apps/dojo/src/components/layout/viewer-layout.tsx index 3fedfdd6d..520546cdf 100644 --- a/typescript-sdk/apps/dojo/src/components/layout/viewer-layout.tsx +++ b/typescript-sdk/apps/dojo/src/components/layout/viewer-layout.tsx @@ -14,13 +14,41 @@ export function ViewerLayout({ className, children, }: ViewerLayoutProps) { + // return ( + // + // ); + return ( -
-
+
+
{children}
+ {/* Background blur circles - Figma exact specs */} + {/* Ellipse 1351 */} +
+ + {/* Ellipse 1347 */} +
+ + {/* Ellipse 1350 */} +
+ + {/* Ellipse 1348 */} +
+ + {/* Ellipse 1346 */} +
+ + {/* Ellipse 1268 */} +
); } diff --git a/typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx b/typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx index aef8940df..c5dcf1a3e 100644 --- a/typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx +++ b/typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx @@ -99,11 +99,11 @@ export function Sidebar({ isMobile, onMobileClose }: SidebarProps) { }, []); return ( -
{/* Sidebar Header */} -
+

@@ -117,7 +117,7 @@ export function Sidebar({ isMobile, onMobileClose }: SidebarProps) { {/* Controls Section */} {(!frameworkPickerHidden|| !viewPickerHidden) && ( -
+
{/* Integration picker */} {!frameworkPickerHidden&& (
@@ -153,7 +153,7 @@ export function Sidebar({ isMobile, onMobileClose }: SidebarProps) { onValueChange={tab => setView(tab as View)} className="w-full" > - + Date: Fri, 8 Aug 2025 17:23:23 +0200 Subject: [PATCH 2/4] chore: finalize branded styling --- typescript-sdk/apps/dojo/package.json | 1 + .../app/[integrationId]/feature/layout.tsx | 2 +- typescript-sdk/apps/dojo/src/app/globals.css | 22 +- .../src/components/demo-list/demo-list.tsx | 6 +- .../dojo/src/components/sidebar/sidebar.tsx | 66 +++-- .../apps/dojo/src/styles/typography.css | 240 ++++++++++++++++++ typescript-sdk/apps/dojo/tailwind.config.ts | 6 + typescript-sdk/pnpm-lock.yaml | 17 +- 8 files changed, 331 insertions(+), 29 deletions(-) create mode 100644 typescript-sdk/apps/dojo/src/styles/typography.css diff --git a/typescript-sdk/apps/dojo/package.json b/typescript-sdk/apps/dojo/package.json index 4d66573c3..669c75e51 100644 --- a/typescript-sdk/apps/dojo/package.json +++ b/typescript-sdk/apps/dojo/package.json @@ -38,6 +38,7 @@ "@mdx-js/react": "^3.1.0", "@monaco-editor/react": "^4.7.0", "@next/mdx": "^15.2.3", + "@phosphor-icons/react": "^2.1.10", "@radix-ui/react-dropdown-menu": "^2.1.6", "@radix-ui/react-slot": "^1.1.2", "@radix-ui/react-tabs": "^1.1.3", diff --git a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/layout.tsx b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/layout.tsx index 3a2bc8ddb..b4fd59bd4 100644 --- a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/layout.tsx +++ b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/layout.tsx @@ -55,5 +55,5 @@ export default function FeatureLayout({ children, params }: Props) { } }, [children, codeFiles, readme, view]) - return
{content}
; + return
{content}
; } diff --git a/typescript-sdk/apps/dojo/src/app/globals.css b/typescript-sdk/apps/dojo/src/app/globals.css index 8ea34139b..dbe11ba3d 100644 --- a/typescript-sdk/apps/dojo/src/app/globals.css +++ b/typescript-sdk/apps/dojo/src/app/globals.css @@ -129,17 +129,23 @@ --spacing-spacing-18: 72px; /* CopilotCloud Border Radius */ - --radius-xs: 2px; - --radius-sm: 4px; - --radius-md: 8px; - --radius-lg: 12px; - --radius-xl: 16px; - --radius-2xl: 20px; - --radius-3xl: 24px; + --radius-xs: 4px; + --radius-sm: 8px; + --radius-md: 12px; + --radius-lg: 16px; + --radius-xl: 24px; + --radius-2xl: 48px; + --radius-3xl: 200px; /* Font Families */ --font-family-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; --font-family-mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, monospace; + + /* Elevation/Shadows */ + --shadow-sm: 0px 1px 3px 0px rgba(1, 5, 7, 0.08); + --shadow-md: 0px 6px 6px -2px rgba(1, 5, 7, 0.08); + --shadow-lg: 0px 16px 24px -8px rgba(1, 5, 7, 0.12); + --shadow-xl: 0px 24px 32px -12px rgba(1, 5, 7, 0.16); } :root { @@ -234,6 +240,6 @@ @apply border-border outline-ring/50; } body { - @apply bg-background text-foreground; + @apply bg-background text-foreground font-sans; } } diff --git a/typescript-sdk/apps/dojo/src/components/demo-list/demo-list.tsx b/typescript-sdk/apps/dojo/src/components/demo-list/demo-list.tsx index 2a5c0431c..ec770ca81 100644 --- a/typescript-sdk/apps/dojo/src/components/demo-list/demo-list.tsx +++ b/typescript-sdk/apps/dojo/src/components/demo-list/demo-list.tsx @@ -14,7 +14,11 @@ export function DemoList({ demos, selectedDemo, onSelect, llmSelector }: DemoLis return (
-

+

Demos

{llmSelector &&
{llmSelector}
} diff --git a/typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx b/typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx index c5dcf1a3e..cf63b28d3 100644 --- a/typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx +++ b/typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx @@ -1,11 +1,12 @@ "use client"; import React, { useState, useEffect } from "react"; -import Image from "next/image"; +import { EyeIcon as Eye, CodeIcon as Code, BookOpenTextIcon as Book } from "@phosphor-icons/react"; +import { cn } from "@/lib/utils"; import { useRouter, usePathname } from "next/navigation"; import { DemoList } from "@/components/demo-list/demo-list"; import { ThemeToggle } from "@/components/ui/theme-toggle"; -import { Eye, Code, Book, ChevronDown } from "lucide-react"; +import { ChevronDown } from "lucide-react"; import featureConfig from "@/config"; import { DropdownMenu, @@ -98,8 +99,10 @@ export function Sidebar({ isMobile, onMobileClose }: SidebarProps) { } }, []); + const tabClass = `cursor-pointer flex-1 h-8 px-2 text-sm text-primary shadow-none bg-none border-none font-medium gap-1 rounded-lg data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:shadow-none` + return ( -
{/* Sidebar Header */} @@ -111,7 +114,7 @@ export function Sidebar({ isMobile, onMobileClose }: SidebarProps) {

- + {/**/}
@@ -120,21 +123,23 @@ export function Sidebar({ isMobile, onMobileClose }: SidebarProps) {
{/* Integration picker */} {!frameworkPickerHidden&& ( -
- +
+ - +
+ + {currentIntegration ? currentIntegration.name : "Select Integration"} + + +
- + {menuIntegrations.map((integration) => ( handleIntegrationSelect(integration.id)} - className="cursor-pointer" + className="cursor-pointer hover:bg-palette-grey-200 text-palette-text-primary text-base h-10 rounded-sm" > {integration.name} @@ -147,30 +152,30 @@ export function Sidebar({ isMobile, onMobileClose }: SidebarProps) { {/* Preview/Code Tabs */} {!viewPickerHidden &&
- + setView(tab as View)} - className="w-full" + className="w-full rounded-lg bg-none border-none" > - + Preview Code Docs @@ -199,3 +204,28 @@ export function Sidebar({ isMobile, onMobileClose }: SidebarProps) {
); } + +function SectionTitle({ title }: { title: string }) { + return ( +
+ +
+
+ ); +} diff --git a/typescript-sdk/apps/dojo/src/styles/typography.css b/typescript-sdk/apps/dojo/src/styles/typography.css new file mode 100644 index 000000000..881b3e89f --- /dev/null +++ b/typescript-sdk/apps/dojo/src/styles/typography.css @@ -0,0 +1,240 @@ +/* CopilotCloud Typography Components */ + +/* Headings */ +.H1-SemiBold { + font-family: "Plus Jakarta Sans", sans-serif; + font-size: 56px; + line-height: 64px; + letter-spacing: 0px; + font-weight: 600; +} + +.H1-Medium { + font-family: "Plus Jakarta Sans", sans-serif; + font-size: 56px; + line-height: 64px; + letter-spacing: 0px; + font-weight: 500; +} + +.H2-SemiBold { + font-family: "Plus Jakarta Sans", sans-serif; + font-size: 40px; + line-height: 46px; + letter-spacing: 0px; + font-weight: 600; +} + +.H2-Medium { + font-family: "Plus Jakarta Sans", sans-serif; + font-size: 40px; + line-height: 46px; + letter-spacing: 0px; + font-weight: 500; +} + +.H3-SemiBold { + font-family: "Plus Jakarta Sans", sans-serif; + font-size: 32px; + line-height: 36px; + letter-spacing: 0px; + font-weight: 600; +} + +.H3-Medium { + font-family: "Plus Jakarta Sans", sans-serif; + font-size: 32px; + line-height: 36px; + letter-spacing: 0px; + font-weight: 500; +} + +.H4-SemiBold { + font-family: "Plus Jakarta Sans", sans-serif; + font-size: 24px; + line-height: 28px; + letter-spacing: 0px; + font-weight: 600; +} + +.H4-Medium { + font-family: "Plus Jakarta Sans", sans-serif; + font-size: 24px; + line-height: 28px; + letter-spacing: 0px; + font-weight: 500; +} + +.H5-SemiBold { + font-family: "Plus Jakarta Sans", sans-serif; + font-size: 20px; + line-height: 24px; + letter-spacing: 0px; + font-weight: 600; +} + +.H5-Medium { + font-family: "Plus Jakarta Sans", sans-serif; + font-size: 20px; + line-height: 24px; + letter-spacing: 0px; + font-weight: 500; +} + +.H6-SemiBold { + font-family: "Plus Jakarta Sans", sans-serif; + font-size: 18px; + line-height: 20px; + letter-spacing: 0px; + font-weight: 600; +} + +.H6-Medium { + font-family: "Plus Jakarta Sans", sans-serif; + font-size: 18px; + line-height: 20px; + letter-spacing: 0px; + font-weight: 500; +} + +/* Paragraphs */ +.paragraphs-Large-Bold { + font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; + font-size: 16px; + line-height: 24px; + letter-spacing: 0px; + font-weight: 700; +} + +.paragraphs-Large-SemiBold { + font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; + font-size: 16px; + line-height: 24px; + letter-spacing: 0px; + font-weight: 600; +} + +.paragraphs-Large-Medium { + font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; + font-size: 16px; + line-height: 24px; + letter-spacing: 0px; + font-weight: 500; +} + +.paragraphs-Large-Regular { + font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; + font-size: 16px; + line-height: 24px; + letter-spacing: 0px; + font-weight: 400; +} + +.paragraphs-Medium-SemiBold { + font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; + font-size: 14px; + line-height: 22px; + letter-spacing: 0px; + font-weight: 600; +} + +.paragraphs-Medium-Medium { + font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; + font-size: 14px; + line-height: 22px; + letter-spacing: 0px; + font-weight: 500; +} + +.paragraphs-Medium-Regular { + font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; + font-size: 14px; + line-height: 22px; + letter-spacing: 0px; + font-weight: 400; +} + +.paragraphs-Small-SemiBold { + font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; + font-size: 12px; + line-height: 16px; + letter-spacing: 0px; + font-weight: 600; +} + +.paragraphs-Small-Medium { + font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; + font-size: 12px; + line-height: 16px; + letter-spacing: 0px; + font-weight: 500; +} + +.paragraphs-Small-Regular { + font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; + font-size: 12px; + line-height: 16px; + letter-spacing: 0px; + font-weight: 400; +} + +.paragraphs-Small-Regular-Uppercase { + font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; + font-size: 12px; + line-height: 16px; + letter-spacing: 0px; + font-weight: 400; + text-transform: uppercase; +} + +/* Details */ +.details-Medium-Medium { + font-family: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace; + font-size: 14px; + line-height: 14px; + letter-spacing: 0px; + font-weight: 500; +} + +.details-Medium-Medium-Uppercase { + font-family: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace; + font-size: 14px; + line-height: 14px; + letter-spacing: 0px; + font-weight: 500; + text-transform: uppercase; +} + +.details-Small-Medium { + font-family: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace; + font-size: 12px; + line-height: 12px; + letter-spacing: 0px; + font-weight: 500; +} + +.details-Small-Medium-Uppercase { + font-family: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace; + font-size: 12px; + line-height: 12px; + letter-spacing: 0px; + font-weight: 500; + text-transform: uppercase; +} + +.details-ExtraSmall-Medium { + font-family: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace; + font-size: 10px; + line-height: 10px; + letter-spacing: 0px; + font-weight: 500; +} + +.details-ExtraSmall-Medium-Uppercase { + font-family: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace; + font-size: 10px; + line-height: 10px; + letter-spacing: 0px; + font-weight: 500; + text-transform: uppercase; +} \ No newline at end of file diff --git a/typescript-sdk/apps/dojo/tailwind.config.ts b/typescript-sdk/apps/dojo/tailwind.config.ts index 92f0a1999..717af65a2 100644 --- a/typescript-sdk/apps/dojo/tailwind.config.ts +++ b/typescript-sdk/apps/dojo/tailwind.config.ts @@ -50,6 +50,12 @@ const config = { sans: ['Plus Jakarta Sans', 'ui-sans-serif', 'system-ui', 'sans-serif'], mono: ['Spline Sans Mono', 'ui-monospace', 'SFMono-Regular', 'monospace'], }, + boxShadow: { + 'elevation-sm': 'var(--shadow-sm)', + 'elevation-md': 'var(--shadow-md)', + 'elevation-lg': 'var(--shadow-lg)', + 'elevation-xl': 'var(--shadow-xl)', + }, keyframes: { "accordion-down": { from: { height: "0" }, diff --git a/typescript-sdk/pnpm-lock.yaml b/typescript-sdk/pnpm-lock.yaml index a9c32ac16..95a0413c1 100644 --- a/typescript-sdk/pnpm-lock.yaml +++ b/typescript-sdk/pnpm-lock.yaml @@ -159,6 +159,9 @@ importers: '@next/mdx': specifier: ^15.2.3 version: 15.3.2(@mdx-js/loader@3.1.0(acorn@8.14.1)(webpack@5.99.9))(@mdx-js/react@3.1.0(@types/react@19.1.5)(react@19.1.0)) + '@phosphor-icons/react': + specifier: ^2.1.10 + version: 2.1.10(react-dom@19.1.0(react@19.1.0))(react@19.1.0) '@radix-ui/react-dropdown-menu': specifier: ^2.1.6 version: 2.1.15(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) @@ -3430,6 +3433,13 @@ packages: peerDependencies: '@opentelemetry/api': ^1.1.0 + '@phosphor-icons/react@2.1.10': + resolution: {integrity: sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==} + engines: {node: '>=10'} + peerDependencies: + react: '>= 16.8' + react-dom: '>= 16.8' + '@pkgjs/parseargs@0.11.0': resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} engines: {node: '>=14'} @@ -13773,6 +13783,11 @@ snapshots: '@opentelemetry/api': 1.9.0 '@opentelemetry/core': 2.0.1(@opentelemetry/api@1.9.0) + '@phosphor-icons/react@2.1.10(react-dom@19.1.0(react@19.1.0))(react@19.1.0)': + dependencies: + react: 19.1.0 + react-dom: 19.1.0(react@19.1.0) + '@pkgjs/parseargs@0.11.0': optional: true @@ -18235,7 +18250,7 @@ snapshots: semver: 7.7.2 uuid: 10.0.0 optionalDependencies: - openai: 4.104.0(ws@8.18.3)(zod@3.25.67) + openai: 4.104.0(ws@8.18.3)(zod@3.25.71) langsmith@0.3.49(@opentelemetry/api@1.9.0)(@opentelemetry/exporter-trace-otlp-proto@0.203.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.0.1(@opentelemetry/api@1.9.0))(openai@4.100.0(ws@8.18.3)(zod@3.25.67)): dependencies: From d3e26647ba54b508751372d045beef8fbc6b17c3 Mon Sep 17 00:00:00 2001 From: ran Date: Fri, 8 Aug 2025 17:41:39 +0200 Subject: [PATCH 3/4] chore: mobile view design tweaks --- .../apps/dojo/src/components/layout/viewer-layout.tsx | 9 +++++---- .../apps/dojo/src/components/sidebar/sidebar.tsx | 4 ++-- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/typescript-sdk/apps/dojo/src/components/layout/viewer-layout.tsx b/typescript-sdk/apps/dojo/src/components/layout/viewer-layout.tsx index 520546cdf..958482850 100644 --- a/typescript-sdk/apps/dojo/src/components/layout/viewer-layout.tsx +++ b/typescript-sdk/apps/dojo/src/components/layout/viewer-layout.tsx @@ -1,6 +1,7 @@ import React from "react"; import { ViewerConfig } from "@/types/feature"; import { cn } from "@/lib/utils"; +import { useMobileView } from "@/utils/use-mobile-view"; interface ViewerLayoutProps extends ViewerConfig { className?: string; @@ -14,12 +15,12 @@ export function ViewerLayout({ className, children, }: ViewerLayoutProps) { - // return ( - // - // ); + const { isMobile } = useMobileView(); return ( -
+
{children}
diff --git a/typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx b/typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx index cf63b28d3..23a1a2048 100644 --- a/typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx +++ b/typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx @@ -102,8 +102,8 @@ export function Sidebar({ isMobile, onMobileClose }: SidebarProps) { const tabClass = `cursor-pointer flex-1 h-8 px-2 text-sm text-primary shadow-none bg-none border-none font-medium gap-1 rounded-lg data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:shadow-none` return ( -
{/* Sidebar Header */}
From c38029323d5e59d5ae7fccd854df7fe61657031a Mon Sep 17 00:00:00 2001 From: ran Date: Fri, 8 Aug 2025 17:56:12 +0200 Subject: [PATCH 4/4] chore: list design tweaks --- .../apps/dojo/src/components/demo-list/demo-list.tsx | 11 +++++------ .../apps/dojo/src/components/sidebar/sidebar.tsx | 2 +- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/typescript-sdk/apps/dojo/src/components/demo-list/demo-list.tsx b/typescript-sdk/apps/dojo/src/components/demo-list/demo-list.tsx index ec770ca81..784eda7ec 100644 --- a/typescript-sdk/apps/dojo/src/components/demo-list/demo-list.tsx +++ b/typescript-sdk/apps/dojo/src/components/demo-list/demo-list.tsx @@ -23,14 +23,14 @@ export function DemoList({ demos, selectedDemo, onSelect, llmSelector }: DemoLis {llmSelector &&
{llmSelector}
}
-
    +
      {demos.map((demo) => (