CSS Files & Contracts - Builder Studio Docs

The complete CSS surface area of BuilderStudio-main: the global stylesheets, the component-scoped *.module.css inventory grouped by area, and the TypeScript files that own CSS class names as typed constants.

9
Global stylesheets
177
Module CSS files
27,221
Module CSS lines
6
TS class contracts

Global stylesheets

Loaded app-wide (or per-layout). These hold tokens, resets, shared utilities, and cross-cutting runtime rules.

File	Lines	Role
`app/globals.css`	120	Root entry — imported by app/layout.tsx; reset, base elements, a11y
`styles/tokens.css`	235	Design tokens (:root custom properties) — imported first
`styles/utilities.css`	40	Global a11y/layout utilities (.bs-sr-only, .bs-skip-link)
`styles/dashboard-form-primitives.css`	218	Shared form controls (consumed via formStyles.ts)
`styles/route-state-primitives.css`	116	Route error/empty/retry states (via stateActionClasses.ts)
`styles/animations.css`	63	Shared @keyframes + .animate-* classes
`styles/dashboard-shell.css`	764	Dashboard shell classes (via styleConstants.ts); imported by (protected)/layout
`styles/canvas-layers.css`	60	Canvas viewport layer classes; imported by canvas/layout
`styles/canvas.css`	113	Canvas global interaction rules; imported by canvas/layout

Module CSS by area

177 *.module.css files totalling 27,221 lines, grouped by their top-level source area (bar width ∝ line count).

components/canvas
72 files · 12,323 lines
components/dashboard
45 files · 8,041 lines
app/(public)
19 files · 2,119 lines
components/public
13 files · 1,176 lines
components/ui
10 files · 1,008 lines
components/landing
6 files · 830 lines
app/(protected)
5 files · 637 lines
lib/theme
1 files · 590 lines
components/brand
4 files · 324 lines
components/workspace
1 files · 139 lines
components/ErrorBoundary.module.css
1 files · 34 lines

TypeScript class contracts

These files own CSS class names (and a few CSS-variable names) as exported constants. Components reference the constants instead of raw strings, so a class can't silently drift from the stylesheet that defines it.

File	Exports	Backs	Purpose
`lib/dashboard/styleConstants.ts`	63	`styles/dashboard-shell.css`	Dashboard shell class-name constants
`components/ui/formStyles.ts`	11	`styles/dashboard-form-primitives.css`	Form control class-name constants
`components/ui/stateActionClasses.ts`	6	`styles/route-state-primitives.css`	Route-state class-name constants
`lib/canvas/interactionMarkers.ts`	37	`styles/canvas.css + canvas-layers.css`	Canvas interaction marker class/attr names
`lib/canvas/uiSurfaces.ts`	2	`styles/canvas.css`	Portaled canvas surface markers
`lib/pan-zoom/viewportTransform.ts`	6	`tokens / inline vars`	Viewport CSS-var names (zoom-reactive)

Full module inventory

All 177 module stylesheets, by path.

File	Lines
`app/(protected)/canvas/[canvasId]/_shared/CanvasErrorFallback.module.css`	9
`app/(protected)/canvas/[canvasId]/_shared/CanvasRouteLoadingShell.module.css`	8
`app/(protected)/dashboard/DashboardOverviewPageClient.module.css`	508
`app/(protected)/dashboard/dev/node-sync-metrics/NodeSyncMetricsDevClient.module.css`	106
`app/(protected)/protectedLayout.module.css`	6
`app/(public)/alpha/AlphaPage.module.css`	184
`app/(public)/consent/ConsentClient.module.css`	299
`app/(public)/consent/consentLoading.module.css`	91
`app/(public)/contact/ContactForm.module.css`	74
`app/(public)/contact/ContactPage.module.css`	75
`app/(public)/dev/create-mcp-key/CreateMcpKeyClient.module.css`	156
`app/(public)/dev/multiplayer/DevMultiplayerContent.module.css`	124
`app/(public)/invite/[token]/InvitePage.module.css`	71
`app/(public)/publicAppShell.module.css`	10
`app/(public)/publicTaskShellContent.module.css`	9
`app/(public)/reset-password/ResetPasswordClient.module.css`	137
`app/(public)/signin/AuthenticatedSignInRedirect.module.css`	137
`app/(public)/signin/DevAuthPanel.module.css`	63
`app/(public)/signin/SignInClient.module.css`	214
`app/(public)/signin/signinLoading.module.css`	121
`app/(public)/signin/signinPage.module.css`	16
`app/(public)/signin/SignInShowcasePanel.module.css`	233
`app/(public)/signout/signout.module.css`	36
`app/(public)/taskLightLoadingSkeleton.module.css`	69
`components/brand/BuilderLogoGradientSequence.module.css`	141
`components/brand/CompactLogo.module.css`	9
`components/brand/CreditsLogoIcon.module.css`	4
`components/brand/GlassyButton/GlassyButton.module.css`	170
`components/canvas/banners/CanvasBanners.module.css`	179
`components/canvas/core/CanvasLayersFallback.module.css`	58
`components/canvas/core/FlowCanvas.module.css`	31
`components/canvas/edges/EdgePath.module.css`	25
`components/canvas/edges/EdgeRenderer.module.css`	25
`components/canvas/loading/CanvasLoadingGate.module.css`	12
`components/canvas/loading/CanvasLoadingScreen.module.css`	233
`components/canvas/loading/LoadingGateOverlay.module.css`	19
`components/canvas/nodes/AudioNode/AudioNode.module.css`	467
`components/canvas/nodes/base/AssetDimensions/AssetDimensions.module.css`	92
`components/canvas/nodes/base/badge-position.module.css`	34
`components/canvas/nodes/base/CancelButton/CancelButton.module.css`	57
`components/canvas/nodes/base/ErrorBadge/ErrorBadge.module.css`	58
`components/canvas/nodes/base/GenerateButton/GenerateButton.module.css`	62
`components/canvas/nodes/base/GenerationStatusContent/GenerationStatusContent.module.css`	91
`components/canvas/nodes/base/ModelParamsEditor/ModelParamsEditor.module.css`	134
`components/canvas/nodes/base/NodeAssetLabel/NodeAssetLabel.module.css`	87
`components/canvas/nodes/base/NodeConnectionStatus/NodeConnectionStatus.module.css`	31
`components/canvas/nodes/base/NodeDragHeader/NodeDragHeader.module.css`	29
`components/canvas/nodes/base/NodeFallbackShell/NodeFallbackShell.module.css`	110
`components/canvas/nodes/base/NodeFooter/NodeFooter.module.css`	26
`components/canvas/nodes/base/NodeHandles/NodeHandles.module.css`	230
`components/canvas/nodes/base/NodeHeader/NodeHeader.module.css`	56
`components/canvas/nodes/base/NodeLightbox/NodeLightbox.module.css`	224
`components/canvas/nodes/base/NodeMediaSyncBadge/NodeMediaSyncBadge.module.css`	118
`components/canvas/nodes/base/NodeSelect/NodeSelect.module.css`	43
`components/canvas/nodes/base/NodeShell/NodeShell.module.css`	114
`components/canvas/nodes/base/NodeTypeLabel/NodeTypeLabel.module.css`	39
`components/canvas/nodes/base/PromptInput/DictationToggleButton.module.css`	93
`components/canvas/nodes/base/PromptInput/PromptInput.module.css`	282
`components/canvas/nodes/base/properties/properties.module.css`	214
`components/canvas/nodes/base/ResizeHandle/ResizeHandle.module.css`	49
`components/canvas/nodes/base/ResponseTextDisplay/ResponseTextDisplay.module.css`	76
`components/canvas/nodes/CodeNode/CodeNode.module.css`	233
`components/canvas/nodes/DocumentNode/DocumentNode.module.css`	370
`components/canvas/nodes/EasyConnectNode/EasyConnectNode.module.css`	49
`components/canvas/nodes/ElevenLabsSpeechNode/ElevenLabsSpeechNode.module.css`	171
`components/canvas/nodes/GenerateImageNode/GenerateImageNode.module.css`	12
`components/canvas/nodes/GenerateSfxNode/GenerateSfxNode.module.css`	199
`components/canvas/nodes/GenerateVideoNode/GenerateVideoNode.module.css`	12
`components/canvas/nodes/ImageNode/ImageNode.module.css`	306
`components/canvas/nodes/PromptNode/PromptNode.module.css`	46
`components/canvas/nodes/recipes/chrome/MinimalNodeFrame.module.css`	32
`components/canvas/nodes/recipes/chrome/PrimitiveObjectFrame.module.css`	25
`components/canvas/nodes/recipes/generation/audioGenerationPlayer.module.css`	116
`components/canvas/nodes/recipes/generation/VisualGenerationPreview.module.css`	112
`components/canvas/nodes/recipes/media/image/ImageCropOverlay.module.css`	95
`components/canvas/nodes/recipes/media/MediaUploadSurface.module.css`	121
`components/canvas/nodes/recipes/media/showcase/EditorialMediaFrame.module.css`	263
`components/canvas/nodes/recipes/triggers/TriggerNodeShared.module.css`	156
`components/canvas/nodes/ShapeNode/ShapeNode.module.css`	14
`components/canvas/nodes/TextGenNode/TextGenNode.module.css`	89
`components/canvas/nodes/TextNode/TextNode.module.css`	32
`components/canvas/nodes/VideoNode/VideoNode.module.css`	613
`components/canvas/nodes/WebhookCallNode/WebhookCallNode.module.css`	207
`components/canvas/nodes/WebhookTriggerNode/WebhookTriggerNode.module.css`	131
`components/canvas/overlays/CanvasFloatingToolbar.module.css`	867
`components/canvas/overlays/CanvasImageCropOverlay.module.css`	45
`components/canvas/overlays/CanvasOverlays.module.css`	338
`components/canvas/overlays/CanvasPerfBadge.module.css`	43
`components/canvas/overlays/CanvasPrecisionDemoOverlay.module.css`	136
`components/canvas/overlays/CanvasPromptHud.module.css`	260
`components/canvas/overlays/CanvasShapeResizeOverlay.module.css`	85
`components/canvas/overlays/paint/CanvasPaintOverlay.module.css`	26
`components/canvas/overlays/SyncStatus.module.css`	43
`components/canvas/overlays/ZoomControls/TabbedColorPicker.module.css`	183
`components/canvas/overlays/ZoomControls/ZoomControls.module.css`	801
`components/canvas/sidebars/CanvasAssetsList.module.css`	812
`components/canvas/sidebars/CanvasGitHubSourcesPanel.module.css`	478
`components/canvas/sidebars/CanvasInsertSheet.module.css`	322
`components/canvas/sidebars/CanvasSidebarSheet.module.css`	620
`components/canvas/sidebars/CanvasVoicesPanel.module.css`	462
`components/dashboard/account-security/accountSecurity.module.css`	347
`components/dashboard/activity/DashboardFeed.module.css`	98
`components/dashboard/activity/FeedItemCard.module.css`	190
`components/dashboard/activity/FeedSettingsPopover.module.css`	95
`components/dashboard/analytics/AnalyticsBreakdownList.module.css`	18
`components/dashboard/analytics/AnalyticsSkeleton.module.css`	82
`components/dashboard/analytics/BreakdownSkeletonRows.module.css`	39
`components/dashboard/analytics/HorizontalBar.module.css`	52
`components/dashboard/analytics/RecentFailureCard.module.css`	113
`components/dashboard/analytics/RecentFailuresSection.module.css`	41
`components/dashboard/analytics/RunsOverTimeChart.module.css`	193
`components/dashboard/analytics/StatCard.module.css`	32
`components/dashboard/analytics/TopCallersTable.module.css`	183
`components/dashboard/analytics/UpgradePrompt.module.css`	83
`components/dashboard/analytics/WorkspaceAnalyticsPanel.module.css`	217
`components/dashboard/DashboardEntryLoadingScreen.module.css`	133
`components/dashboard/DashboardLayout.module.css`	164
`components/dashboard/DashboardMobileSidebar.module.css`	80
`components/dashboard/DashboardSidebar/CreditsSection.module.css`	162
`components/dashboard/DashboardSidebar/DashboardSidebar.module.css`	104
`components/dashboard/DashboardSidebar/NewWorkspaceForm.module.css`	148
`components/dashboard/DashboardSidebar/SidebarNav.module.css`	10
`components/dashboard/DashboardSidebar/sidebarShared.module.css`	93
`components/dashboard/DashboardSidebar/SidebarWorkspaceSection.module.css`	93
`components/dashboard/DashboardSidebar/UserSection.module.css`	114
`components/dashboard/DashboardSidebar/WorkspaceList.module.css`	94
`components/dashboard/DashboardSkeletonPrimitives.module.css`	110
`components/dashboard/integrations/elevenlabs/voiceLibraryUi.module.css`	465
`components/dashboard/integrations/VendorAssetGroup.module.css`	130
`components/dashboard/integrations/VendorAssetList.module.css`	207
`components/dashboard/integrations/VendorAssetRegisterForm.module.css`	65
`components/dashboard/integrations/VendorAssetsSection.module.css`	6
`components/dashboard/overview/CanvasCard.module.css`	421
`components/dashboard/overview/CanvasListRow.module.css`	229
`components/dashboard/overview/CanvasPreview.module.css`	13
`components/dashboard/overview/DashboardGlassDemoCard.module.css`	151
`components/dashboard/overview/DashboardSortControls.module.css`	71
`components/dashboard/overview/NewCanvasCard.module.css`	84
`components/dashboard/overview/WorkspaceOverviewPanel.module.css`	12
`components/dashboard/workspace-settings/Calendar.module.css`	131
`components/dashboard/workspace-settings/DatePicker.module.css`	64
`components/dashboard/workspace-settings/KeyTable.module.css`	369
`components/dashboard/workspace-settings/workspaceSettingsBilling.module.css`	528
`components/dashboard/workspace-settings/workspaceSettingsUi.module.css`	1870
`components/dashboard/workspace/WorkspacePage.module.css`	137
`components/ErrorBoundary.module.css`	34
`components/landing/FaqSection.module.css`	210
`components/landing/Hero.module.css`	235
`components/landing/LandingConnectorSection.module.css`	93
`components/landing/LandingCursorAwareSection.module.css`	140
`components/landing/LandingHeroImageSection.module.css`	45
`components/landing/LandingLogoReveal.module.css`	107
`components/public/AskAiLogoLinks.module.css`	42
`components/public/Footer.module.css`	274
`components/public/legal/LegalDocument.module.css`	121
`components/public/legal/LegalPageLayout.module.css`	79
`components/public/MobileNavPanel.module.css`	96
`components/public/Navbar.module.css`	213
`components/public/PublicAuthShell.module.css`	106
`components/public/PublicShellBrand.module.css`	25
`components/public/publicShellPrimitives.module.css`	65
`components/public/PublicSiteShell.module.css`	10
`components/public/PublicTaskImageCard.module.css`	30
`components/public/PublicTaskShell.module.css`	99
`components/public/TaskShellLegalFooter.module.css`	16
`components/ui/ConvexDeployFallback.module.css`	70
`components/ui/layout/AppShell.module.css`	13
`components/ui/primitives/ConfirmPopover.module.css`	312
`components/ui/primitives/PrimitivesShared.module.css`	28
`components/ui/primitives/Select.module.css`	215
`components/ui/primitives/ShimmerText.module.css`	75
`components/ui/primitives/Toast.module.css`	103
`components/ui/primitives/Tooltip.module.css`	148
`components/ui/RouteErrorBody.module.css`	40
`components/ui/RouteErrorShell.module.css`	4
`components/workspace/InviteMembersForm.module.css`	139
`lib/theme/authSurfaces.module.css`	590

Was this page helpful?