feat: implement light and dark theme (#30)

packages/bolt/app/components/chat/Artifact.tsx

@@ -4,7 +4,6 @@ import { computed } from 'nanostores';
 import { memo, useEffect, useRef, useState } from 'react';
 import { createHighlighter, type BundledLanguage, type BundledTheme, type HighlighterGeneric } from 'shiki';
 import type { ActionState } from '~/lib/runtime/action-runner';
-import { chatStore } from '~/lib/stores/chat';
 import { workbenchStore } from '~/lib/stores/workbench';
 import { classNames } from '~/utils/classNames';
 import { cubicEasingFn } from '~/utils/easings';
@@ -29,7 +28,6 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
   const userToggledActions = useRef(false);
   const [showActions, setShowActions] = useState(false);
 
-  const chat = useStore(chatStore);
   const artifacts = useStore(workbenchStore.artifacts);
   const artifact = artifacts[messageId];
 
@@ -51,27 +49,21 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
   }, [actions]);
 
   return (
-    <div className="flex flex-col overflow-hidden border rounded-lg w-full">
+    <div className="artifact border border-bolt-elements-borderColor flex flex-col overflow-hidden rounded-lg w-full transition-border duration-150">
       <div className="flex">
         <button
-          className="flex items-stretch bg-gray-50/25 w-full overflow-hidden"
+          className="flex items-stretch bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover w-full overflow-hidden"
           onClick={() => {
             const showWorkbench = workbenchStore.showWorkbench.get();
             workbenchStore.showWorkbench.set(!showWorkbench);
           }}
         >
-          <div className="flex items-center px-6 bg-gray-100/50">
-            {!artifact?.closed && !chat.aborted ? (
-              <div className="i-svg-spinners:90-ring-with-bg scale-130"></div>
-            ) : (
-              <div className="i-ph:code-bold scale-130 text-gray-600"></div>
-            )}
-          </div>
-          <div className="px-4 p-3 w-full text-left">
-            <div className="w-full">{artifact?.title}</div>
-            <small className="inline-block w-full w-full">Click to open Workbench</small>
+          <div className="px-5 p-3.5 w-full text-left">
+            <div className="w-full text-bolt-elements-textPrimary font-medium leading-5 text-sm">{artifact?.title}</div>
+            <div className="w-full w-full text-bolt-elements-textSecondary text-xs mt-0.5">Click to open Workbench</div>
           </div>
         </button>
+        <div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
         <AnimatePresence>
           {actions.length && (
             <motion.button
@@ -79,7 +71,7 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
               animate={{ width: 'auto' }}
               exit={{ width: 0 }}
               transition={{ duration: 0.15, ease: cubicEasingFn }}
-              className="hover:bg-gray-200"
+              className="bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover"
               onClick={toggleActions}
             >
               <div className="p-4">
@@ -98,7 +90,8 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
             exit={{ height: '0px' }}
             transition={{ duration: 0.15 }}
           >
-            <div className="p-4 text-left border-t">
+            <div className="bg-bolt-elements-artifacts-borderColor h-[1px]" />
+            <div className="p-5 text-left bg-bolt-elements-actions-background">
               <ActionList actions={actions} />
             </div>
           </motion.div>
@@ -108,29 +101,6 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
   );
 });
 
-function getTextColor(status: ActionState['status']) {
-  switch (status) {
-    case 'pending': {
-      return 'text-gray-500';
-    }
-    case 'running': {
-      return 'text-gray-1000';
-    }
-    case 'complete': {
-      return 'text-positive-600';
-    }
-    case 'aborted': {
-      return 'text-gray-600';
-    }
-    case 'failed': {
-      return 'text-negative-600';
-    }
-    default: {
-      return undefined;
-    }
-  }
-}
-
 interface ShellCodeBlockProps {
   classsName?: string;
   code: string;
@@ -140,7 +110,12 @@ function ShellCodeBlock({ classsName, code }: ShellCodeBlockProps) {
   return (
     <div
       className={classNames('text-xs', classsName)}
-      dangerouslySetInnerHTML={{ __html: shellHighlighter.codeToHtml(code, { lang: 'shell', theme: 'dark-plus' }) }}
+      dangerouslySetInnerHTML={{
+        __html: shellHighlighter.codeToHtml(code, {
+          lang: 'shell',
+          theme: 'dark-plus',
+        }),
+      }}
     ></div>
   );
 }
@@ -160,6 +135,7 @@ const ActionList = memo(({ actions }: ActionListProps) => {
       <ul className="list-none space-y-2.5">
         {actions.map((action, index) => {
           const { status, type, content } = action;
+          const isLast = index === actions.length - 1;
 
           return (
             <motion.li
@@ -172,21 +148,24 @@ const ActionList = memo(({ actions }: ActionListProps) => {
                 ease: cubicEasingFn,
               }}
             >
-              <div className="flex items-center gap-1.5">
-                <div className={classNames('text-lg', getTextColor(action.status))}>
+              <div className="flex items-center gap-1.5 text-sm">
+                <div className={classNames('text-lg', getIconColor(action.status))}>
                   {status === 'running' ? (
                     <div className="i-svg-spinners:90-ring-with-bg"></div>
                   ) : status === 'pending' ? (
                     <div className="i-ph:circle-duotone"></div>
                   ) : status === 'complete' ? (
-                    <div className="i-ph:check-circle-duotone"></div>
+                    <div className="i-ph:check"></div>
                   ) : status === 'failed' || status === 'aborted' ? (
-                    <div className="i-ph:x-circle-duotone"></div>
+                    <div className="i-ph:x"></div>
                   ) : null}
                 </div>
                 {type === 'file' ? (
                   <div>
-                    Create <code className="bg-gray-100 text-gray-700">{action.filePath}</code>
+                    Create{' '}
+                    <code className="bg-bolt-elements-artifacts-inlineCode-background text-bolt-elements-artifacts-inlineCode-text px-1.5 py-1 rounded-md">
+                      {action.filePath}
+                    </code>
                   </div>
                 ) : type === 'shell' ? (
                   <div className="flex items-center w-full min-h-[28px]">
@@ -194,7 +173,14 @@ const ActionList = memo(({ actions }: ActionListProps) => {
                   </div>
                 ) : null}
               </div>
-              {type === 'shell' && <ShellCodeBlock classsName="mt-1" code={content} />}
+              {type === 'shell' && (
+                <ShellCodeBlock
+                  classsName={classNames('mt-1', {
+                    'mb-3.5': !isLast,
+                  })}
+                  code={content}
+                />
+              )}
             </motion.li>
           );
         })}
@@ -202,3 +188,26 @@ const ActionList = memo(({ actions }: ActionListProps) => {
     </motion.div>
   );
 });
+
+function getIconColor(status: ActionState['status']) {
+  switch (status) {
+    case 'pending': {
+      return 'text-bolt-elements-textTertiary';
+    }
+    case 'running': {
+      return 'text-bolt-elements-loader-progress';
+    }
+    case 'complete': {
+      return 'text-bolt-elements-icon-success';
+    }
+    case 'aborted': {
+      return 'text-bolt-elements-textSecondary';
+    }
+    case 'failed': {
+      return 'text-bolt-elements-icon-error';
+    }
+    default: {
+      return undefined;
+    }
+  }
+}

packages/bolt/app/components/chat/BaseChat.tsx

@@ -32,7 +32,7 @@ const EXAMPLE_PROMPTS = [
   { text: 'How do I center a div?' },
 ];
 
-const TEXTAREA_MIN_HEIGHT = 72;
+const TEXTAREA_MIN_HEIGHT = 76;
 
 export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
   (
@@ -56,14 +56,18 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
 
     return (
-      <div ref={ref} className="relative flex h-full w-full overflow-hidden ">
+      <div ref={ref} className="relative flex h-full w-full overflow-hidden bg-bolt-elements-background-depth-1">
         <ClientOnly>{() => <Menu />}</ClientOnly>
         <div ref={scrollRef} className="flex overflow-scroll w-full h-full">
           <div className="flex flex-col w-full h-full px-6">
             {!chatStarted && (
               <div id="intro" className="mt-[26vh] max-w-2xl mx-auto">
-                <h1 className="text-5xl text-center font-bold text-slate-800 mb-2">Where ideas begin</h1>
-                <p className="mb-4 text-center">Bring ideas to life in seconds or get help on existing projects.</p>
+                <h1 className="text-5xl text-center font-bold text-bolt-elements-textPrimary mb-2">
+                  Where ideas begin
+                </h1>
+                <p className="mb-4 text-center text-bolt-elements-textSecondary">
+                  Bring ideas to life in seconds or get help on existing projects.
+                </p>
               </div>
             )}
             <div
@@ -76,7 +80,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                   return chatStarted ? (
                     <Messages
                       ref={messageRef}
-                      className="flex flex-col w-full flex-1 max-w-2xl px-4 pb-10 mx-auto z-1"
+                      className="flex flex-col w-full flex-1 max-w-2xl px-4 pb-6 mx-auto z-1"
                       messages={messages}
                       isStreaming={isStreaming}
                     />
@@ -90,12 +94,12 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
               >
                 <div
                   className={classNames(
-                    'shadow-sm border border-gray-200 bg-white/85 backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden',
+                    'shadow-sm border border-bolt-elements-borderColor bg-bolt-elements-prompt-background backdrop-filter backdrop-blur-[8px] rounded-lg overflow-hidden',
                   )}
                 >
                   <textarea
                     ref={textareaRef}
-                    className={`w-full pl-4 pt-4 pr-16 focus:outline-none resize-none bg-transparent`}
+                    className={`w-full pl-4 pt-4 pr-16 focus:outline-none resize-none text-md text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary bg-transparent`}
                     onKeyDown={(event) => {
                       if (event.key === 'Enter') {
                         if (event.shiftKey) {
@@ -136,44 +140,42 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                   </ClientOnly>
                   <div className="flex justify-between text-sm p-4 pt-2">
                     <div className="flex gap-1 items-center">
-                      <IconButton icon="i-ph:microphone-duotone" className="-ml-1" />
-                      <IconButton icon="i-ph:plus-circle-duotone" />
-                      <IconButton icon="i-ph:pencil-simple-duotone" />
                       <IconButton
+                        title="Enhance prompt"
                         disabled={input.length === 0 || enhancingPrompt}
                         className={classNames({
                           'opacity-100!': enhancingPrompt,
-                          'text-accent! pr-1.5 enabled:hover:bg-accent/12!': promptEnhanced,
+                          'text-bolt-elements-item-contentAccent! pr-1.5 enabled:hover:bg-bolt-elements-item-backgroundAccent!':
+                            promptEnhanced,
                         })}
                         onClick={() => enhancePrompt?.()}
                       >
                         {enhancingPrompt ? (
                           <>
-                            <div className="i-svg-spinners:90-ring-with-bg text-black text-xl"></div>
+                            <div className="i-svg-spinners:90-ring-with-bg text-bolt-elements-loader-progress text-xl"></div>
                             <div className="ml-1.5">Enhancing prompt...</div>
                           </>
                         ) : (
                           <>
-                            <div className="i-blitz:stars text-xl"></div>
+                            <div className="i-bolt:stars text-xl"></div>
                             {promptEnhanced && <div className="ml-1.5">Prompt enhanced</div>}
                           </>
                         )}
                       </IconButton>
                     </div>
                     {input.length > 3 ? (
-                      <div className="text-xs">
-                        Use <kbd className="bg-gray-100 p-1 rounded-md">Shift</kbd> +{' '}
-                        <kbd className="bg-gray-100 p-1 rounded-md">Return</kbd> for a new line
+                      <div className="text-xs text-bolt-elements-textTertiary">
+                        Use <kbd className="kdb">Shift</kbd> + <kbd className="kdb">Return</kbd> for a new line
                       </div>
                     ) : null}
                   </div>
                 </div>
-                <div className="bg-white pb-6">{/* Ghost Element */}</div>
+                <div className="bg-bolt-elements-background-depth-1 pb-6">{/* Ghost Element */}</div>
               </div>
             </div>
             {!chatStarted && (
-              <div id="examples" className="relative w-full max-w-2xl mx-auto text-center mt-8 flex justify-center">
-                <div className="flex flex-col items-center space-y-2 [mask-image:linear-gradient(to_bottom,black_0%,transparent_180%)] hover:[mask-image:none]">
+              <div id="examples" className="relative w-full max-w-2xl mx-auto mt-8 flex justify-center">
+                <div className="flex flex-col space-y-2 [mask-image:linear-gradient(to_bottom,black_0%,transparent_180%)] hover:[mask-image:none]">
                   {EXAMPLE_PROMPTS.map((examplePrompt, index) => {
                     return (
                       <button
@@ -181,7 +183,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                         onClick={(event) => {
                           sendMessage?.(event, examplePrompt.text);
                         }}
-                        className="group flex items-center gap-2 bg-transparent text-gray-500 hover:text-gray-1000"
+                        className="group flex items-center w-full gap-2 justify-center bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary transition-theme"
                       >
                         {examplePrompt.text}
                         <div className="i-ph:arrow-bend-down-left" />

packages/bolt/app/components/chat/Chat.client.tsx

@@ -1,7 +1,7 @@
 import type { Message } from 'ai';
 import { useChat } from 'ai/react';
 import { useAnimate } from 'framer-motion';
-import { useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 import { cssTransition, toast, ToastContainer } from 'react-toastify';
 import { useMessageParser, usePromptEnhancer, useShortcuts, useSnapScroll } from '~/lib/hooks';
 import { useChatHistory } from '~/lib/persistence';
@@ -9,7 +9,7 @@ import { chatStore } from '~/lib/stores/chat';
 import { workbenchStore } from '~/lib/stores/workbench';
 import { fileModificationsToHTML } from '~/utils/diff';
 import { cubicEasingFn } from '~/utils/easings';
-import { createScopedLogger } from '~/utils/logger';
+import { createScopedLogger, renderLogger } from '~/utils/logger';
 import { BaseChat } from './BaseChat';
 
 const toastAnimation = cssTransition({
@@ -20,12 +20,40 @@ const toastAnimation = cssTransition({
 const logger = createScopedLogger('Chat');
 
 export function Chat() {
+  renderLogger.trace('Chat');
+
   const { ready, initialMessages, storeMessageHistory } = useChatHistory();
 
   return (
     <>
       {ready && <ChatImpl initialMessages={initialMessages} storeMessageHistory={storeMessageHistory} />}
-      <ToastContainer position="bottom-right" stacked pauseOnFocusLoss transition={toastAnimation} />
+      <ToastContainer
+        closeButton={({ closeToast }) => {
+          return (
+            <button className="Toastify__close-button" onClick={closeToast}>
+              <div className="i-ph:x text-lg" />
+            </button>
+          );
+        }}
+        icon={({ type }) => {
+          /**
+           * @todo Handle more types if we need them. This may require extra color palettes.
+           */
+          switch (type) {
+            case 'success': {
+              return <div className="i-ph:check-bold text-bolt-elements-icon-success text-2xl" />;
+            }
+            case 'error': {
+              return <div className="i-ph:warning-circle-bold text-bolt-elements-icon-error text-2xl" />;
+            }
+          }
+
+          return undefined;
+        }}
+        position="bottom-right"
+        pauseOnFocusLoss
+        transition={toastAnimation}
+      />
     </>
   );
 }
@@ -35,7 +63,7 @@ interface ChatProps {
   storeMessageHistory: (messages: Message[]) => Promise<void>;
 }
 
-export function ChatImpl({ initialMessages, storeMessageHistory }: ChatProps) {
+export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProps) => {
   useShortcuts();
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -199,4 +227,4 @@ export function ChatImpl({ initialMessages, storeMessageHistory }: ChatProps) {
       }}
     />
   );
-}
+});

packages/bolt/app/components/chat/Markdown.module.scss

@@ -1,10 +1,5 @@
-$font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace,
-  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
-$color-text: #333;
-$color-heading: #2c3e50;
-$color-link: #3498db;
-$color-code-bg: #f8f8f8;
-$color-blockquote-border: #dfe2e5;
+$font-mono: ui-monospace, 'Fira Code', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+$code-font-size: 13px;
 
 @mixin not-inside-actions {
   &:not(:has(:global(.actions)), :global(.actions *)) {
@@ -14,31 +9,35 @@ $color-blockquote-border: #dfe2e5;
 
 .MarkdownContent {
   line-height: 1.6;
-  color: $color-text;
+  color: var(--bolt-elements-textPrimary);
 
   > *:not(:last-child) {
-    margin-bottom: 16px;
+    margin-block-end: 16px;
+  }
+
+  :global(.artifact) {
+    margin: 1.5em 0;
   }
 
   :is(h1, h2, h3, h4, h5, h6) {
     @include not-inside-actions {
-      margin-top: 24px;
-      margin-bottom: 16px;
+      margin-block-start: 24px;
+      margin-block-end: 16px;
       font-weight: 600;
       line-height: 1.25;
-      color: $color-heading;
+      color: var(--bolt-elements-textPrimary);
     }
   }
 
   h1 {
     font-size: 2em;
-    border-bottom: 1px solid #eaecef;
+    border-bottom: 1px solid var(--bolt-elements-borderColor);
     padding-bottom: 0.3em;
   }
 
   h2 {
     font-size: 1.5em;
-    border-bottom: 1px solid #eaecef;
+    border-bottom: 1px solid var(--bolt-elements-borderColor);
     padding-bottom: 0.3em;
   }
 
@@ -60,13 +59,14 @@ $color-blockquote-border: #dfe2e5;
   }
 
   p:not(:last-of-type) {
-    margin-top: 0;
-    margin-bottom: 16px;
+    margin-block-start: 0;
+    margin-block-end: 16px;
   }
 
   a {
-    color: $color-link;
+    color: var(--bolt-elements-messages-linkColor);
     text-decoration: none;
+    cursor: pointer;
 
     &:hover {
       text-decoration: underline;
@@ -75,12 +75,13 @@ $color-blockquote-border: #dfe2e5;
 
   :not(pre) > code {
     font-family: $font-mono;
-    font-size: 14px;
-    border-radius: 6px;
-    padding: 0.2em 0.4em;
+    font-size: $code-font-size;
 
     @include not-inside-actions {
-      background-color: $color-code-bg;
+      border-radius: 6px;
+      padding: 0.2em 0.4em;
+      background-color: var(--bolt-elements-messages-inlineCode-background);
+      color: var(--bolt-elements-messages-inlineCode-text);
     }
   }
 
@@ -91,7 +92,7 @@ $color-blockquote-border: #dfe2e5;
 
   pre:has(> code) {
     font-family: $font-mono;
-    font-size: 14px;
+    font-size: $code-font-size;
     background: transparent;
     overflow-x: auto;
     min-width: 0;
@@ -100,15 +101,15 @@ $color-blockquote-border: #dfe2e5;
   blockquote {
     margin: 0;
     padding: 0 1em;
-    color: #6a737d;
-    border-left: 0.25em solid $color-blockquote-border;
+    color: var(--bolt-elements-textTertiary);
+    border-left: 0.25em solid var(--bolt-elements-borderColor);
   }
 
   :is(ul, ol) {
     @include not-inside-actions {
       padding-left: 2em;
-      margin-top: 0;
-      margin-bottom: 24px;
+      margin-block-start: 0;
+      margin-block-end: 16px;
     }
   }
 
@@ -127,11 +128,11 @@ $color-blockquote-border: #dfe2e5;
   li {
     @include not-inside-actions {
       & + li {
-        margin-top: 8px;
+        margin-block-start: 8px;
       }
 
       > *:not(:last-child) {
-        margin-bottom: 16px;
+        margin-block-end: 16px;
       }
     }
   }
@@ -145,14 +146,14 @@ $color-blockquote-border: #dfe2e5;
     height: 0.25em;
     padding: 0;
     margin: 24px 0;
-    background-color: #e1e4e8;
+    background-color: var(--bolt-elements-borderColor);
     border: 0;
   }
 
   table {
     border-collapse: collapse;
     width: 100%;
-    margin-bottom: 16px;
+    margin-block-end: 16px;
 
     :is(th, td) {
       padding: 6px 13px;

packages/bolt/app/components/chat/Messages.client.tsx

@@ -17,49 +17,41 @@ export const Messages = React.forwardRef<HTMLDivElement, MessagesProps>((props:
   return (
     <div id={id} ref={ref} className={props.className}>
       {messages.length > 0
-        ? messages.map((message, i) => {
+        ? messages.map((message, index) => {
             const { role, content } = message;
-            const isUser = role === 'user';
-            const isFirst = i === 0;
-            const isLast = i === messages.length - 1;
-            const isUserMessage = message.role === 'user';
-            const isAssistantMessage = message.role === 'assistant';
+            const isUserMessage = role === 'user';
+            const isFirst = index === 0;
+            const isLast = index === messages.length - 1;
 
             return (
               <div
-                key={message.id}
-                className={classNames('relative overflow-hidden rounded-md p-[1px]', {
+                key={index}
+                className={classNames('flex gap-4 p-6 w-full rounded-[calc(0.75rem-1px)]', {
+                  'bg-bolt-elements-messages-background': isUserMessage || !isStreaming || (isStreaming && !isLast),
+                  'bg-gradient-to-b from-bolt-elements-messages-background from-30% to-transparent':
+                    isStreaming && isLast,
                   'mt-4': !isFirst,
-                  'bg-gray-200': isUserMessage || !isStreaming || (isStreaming && isAssistantMessage && !isLast),
-                  'bg-gradient-to-b from-gray-200 to-transparent': isStreaming && isAssistantMessage && isLast,
                 })}
               >
-                <div
-                  className={classNames('flex gap-4 p-6 w-full rounded-[calc(0.375rem-1px)]', {
-                    'bg-white': isUserMessage || !isStreaming || (isStreaming && !isLast),
-                    'bg-gradient-to-b from-white from-30% to-transparent': isStreaming && isLast,
-                  })}
-                >
+                {isUserMessage && (
                   <div
                     className={classNames(
-                      'flex items-center justify-center min-w-[34px] min-h-[34px] text-gray-600 rounded-md p-1 self-start',
-                      {
-                        'bg-gray-100': isUserMessage,
-                        'bg-accent text-xl': isAssistantMessage,
-                      },
+                      'flex items-center justify-center min-w-[34px] min-h-[34px] bg-white text-gray-600 rounded-full p-1 self-start',
                     )}
                   >
-                    <div className={isUserMessage ? 'i-ph:user-fill text-xl' : 'i-blitz:logo'}></div>
-                  </div>
-                  <div className="grid grid-col-1 w-full">
-                    {isUser ? <UserMessage content={content} /> : <AssistantMessage content={content} />}
+                    <div className="i-ph:user-fill text-xl"></div>
                   </div>
+                )}
+                <div className="grid grid-col-1 w-full">
+                  {isUserMessage ? <UserMessage content={content} /> : <AssistantMessage content={content} />}
                 </div>
               </div>
             );
           })
         : null}
-      {isStreaming && <div className="text-center w-full i-svg-spinners:3-dots-fade text-4xl mt-4"></div>}
+      {isStreaming && (
+        <div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
+      )}
     </div>
   );
 });

packages/bolt/app/components/chat/SendButton.client.tsx

@@ -13,7 +13,7 @@ export function SendButton({ show, isStreaming, onClick }: SendButtonProps) {
     <AnimatePresence>
       {show ? (
         <motion.button
-          className="absolute flex justify-center items-center top-[18px] right-[22px] p-1 bg-accent hover:brightness-110 color-white rounded-md w-[34px] h-[34px]"
+          className="absolute flex justify-center items-center top-[18px] right-[22px] p-1 bg-accent-500 hover:brightness-94 color-white rounded-md w-[34px] h-[34px] transition-theme"
           transition={{ ease: customEasingFn, duration: 0.17 }}
           initial={{ opacity: 0, y: 10 }}
           animate={{ opacity: 1, y: 0 }}

packages/bolt/app/components/chat/UserMessage.tsx

@@ -7,7 +7,7 @@ interface UserMessageProps {
 
 export function UserMessage({ content }: UserMessageProps) {
   return (
-    <div className="overflow-hidden">
+    <div className="overflow-hidden pt-[4px]">
       <Markdown>{sanitizeUserMessage(content)}</Markdown>
     </div>
   );

packages/bolt/app/components/editor/codemirror/CodeMirrorEditor.tsx

@@ -34,6 +34,7 @@ export interface EditorDocument {
 
 export interface EditorSettings {
   fontSize?: string;
+  gutterFontSize?: string;
   tabSize?: number;
 }
 

packages/bolt/app/components/editor/codemirror/cm-theme.ts

@@ -1,11 +1,8 @@
-import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language';
 import { Compartment, type Extension } from '@codemirror/state';
 import { EditorView } from '@codemirror/view';
+import { vscodeDark, vscodeLight } from '@uiw/codemirror-theme-vscode';
 import type { Theme } from '~/types/theme.js';
 import type { EditorSettings } from './CodeMirrorEditor.js';
-import { vscodeDarkTheme } from './themes/vscode-dark.js';
-
-import './styles.css';
 
 export const darkTheme = EditorView.theme({}, { dark: true });
 export const themeSelection = new Compartment();
@@ -23,11 +20,9 @@ export function reconfigureTheme(theme: Theme) {
 
 function getEditorTheme(settings: EditorSettings) {
   return EditorView.theme({
-    ...(settings.fontSize && {
-      '&': {
-        fontSize: settings.fontSize,
-      },
-    }),
+    '&': {
+      fontSize: settings.fontSize ?? '12px',
+    },
     '&.cm-editor': {
       height: '100%',
       background: 'var(--cm-backgroundColor)',
@@ -46,7 +41,7 @@ function getEditorTheme(settings: EditorSettings) {
       padding: '0 0 0 4px',
     },
     '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
-      backgroundColor: 'var(--cm-selection-backgroundColorFocused)',
+      backgroundColor: 'var(--cm-selection-backgroundColorFocused) !important',
       opacity: 'var(--cm-selection-backgroundOpacityFocused, 0.3)',
     },
     '&:not(.cm-focused) > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': {
@@ -67,7 +62,7 @@ function getEditorTheme(settings: EditorSettings) {
     '.cm-gutter': {
       '&.cm-lineNumbers': {
         fontFamily: 'Roboto Mono, monospace',
-        fontSize: '13px',
+        fontSize: settings.gutterFontSize ?? settings.fontSize ?? '12px',
         minWidth: '40px',
       },
       '& .cm-activeLineGutter': {
@@ -91,6 +86,13 @@ function getEditorTheme(settings: EditorSettings) {
     },
     '.cm-panel.cm-search label': {
       marginLeft: '2px',
+      fontSize: '12px',
+    },
+    '.cm-panel.cm-search .cm-button': {
+      fontSize: '12px',
+    },
+    '.cm-panel.cm-search .cm-textfield': {
+      fontSize: '12px',
     },
     '.cm-panel.cm-search input[type=checkbox]': {
       position: 'relative',
@@ -100,10 +102,14 @@ function getEditorTheme(settings: EditorSettings) {
     '.cm-panels': {
       borderColor: 'var(--cm-panels-borderColor)',
     },
+    '.cm-panels-bottom': {
+      borderTop: '1px solid var(--cm-panels-borderColor)',
+      backgroundColor: 'transparent',
+    },
     '.cm-panel.cm-search': {
       background: 'var(--cm-search-backgroundColor)',
       color: 'var(--cm-search-textColor)',
-      padding: '6px 8px',
+      padding: '8px',
     },
     '.cm-search .cm-button': {
       background: 'var(--cm-search-button-backgroundColor)',
@@ -130,6 +136,7 @@ function getEditorTheme(settings: EditorSettings) {
       top: '6px',
       right: '6px',
       padding: '0 6px',
+      fontSize: '1rem',
       backgroundColor: 'var(--cm-search-closeButton-backgroundColor)',
       color: 'var(--cm-search-closeButton-textColor)',
       '&:hover': {
@@ -141,6 +148,7 @@ function getEditorTheme(settings: EditorSettings) {
     '.cm-search input': {
       background: 'var(--cm-search-input-backgroundColor)',
       borderColor: 'var(--cm-search-input-borderColor)',
+      color: 'var(--cm-search-input-textColor)',
       outline: 'none',
       borderRadius: '4px',
       '&:focus-visible': {
@@ -149,6 +157,7 @@ function getEditorTheme(settings: EditorSettings) {
     },
     '.cm-tooltip': {
       background: 'var(--cm-tooltip-backgroundColor)',
+      border: '1px solid transparent',
       borderColor: 'var(--cm-tooltip-borderColor)',
       color: 'var(--cm-tooltip-textColor)',
     },
@@ -156,13 +165,16 @@ function getEditorTheme(settings: EditorSettings) {
       background: 'var(--cm-tooltip-backgroundColorSelected)',
       color: 'var(--cm-tooltip-textColorSelected)',
     },
+    '.cm-searchMatch': {
+      backgroundColor: 'var(--cm-searchMatch-backgroundColor)',
+    },
   });
 }
 
 function getLightTheme() {
-  return syntaxHighlighting(defaultHighlightStyle);
+  return vscodeLight;
 }
 
 function getDarkTheme() {
-  return syntaxHighlighting(vscodeDarkTheme);
+  return vscodeDark;
 }

packages/bolt/app/components/editor/codemirror/themes/vscode-dark.ts

@@ -1,76 +0,0 @@
-import { HighlightStyle } from '@codemirror/language';
-import { tags } from '@lezer/highlight';
-
-export const vscodeDarkTheme = HighlightStyle.define([
-  {
-    tag: [
-      tags.keyword,
-      tags.operatorKeyword,
-      tags.modifier,
-      tags.color,
-      tags.constant(tags.name),
-      tags.standard(tags.name),
-      tags.standard(tags.tagName),
-      tags.special(tags.brace),
-      tags.atom,
-      tags.bool,
-      tags.special(tags.variableName),
-    ],
-    color: '#569cd6',
-  },
-  {
-    tag: [tags.controlKeyword, tags.moduleKeyword],
-    color: '#c586c0',
-  },
-  {
-    tag: [
-      tags.name,
-      tags.deleted,
-      tags.character,
-      tags.macroName,
-      tags.propertyName,
-      tags.variableName,
-      tags.labelName,
-      tags.definition(tags.name),
-    ],
-    color: '#9cdcfe',
-  },
-  { tag: tags.heading, fontWeight: 'bold', color: '#9cdcfe' },
-  {
-    tag: [
-      tags.typeName,
-      tags.className,
-      tags.tagName,
-      tags.number,
-      tags.changed,
-      tags.annotation,
-      tags.self,
-      tags.namespace,
-    ],
-    color: '#4ec9b0',
-  },
-  {
-    tag: [tags.function(tags.variableName), tags.function(tags.propertyName)],
-    color: '#dcdcaa',
-  },
-  { tag: [tags.number], color: '#b5cea8' },
-  {
-    tag: [tags.operator, tags.punctuation, tags.separator, tags.url, tags.escape, tags.regexp],
-    color: '#d4d4d4',
-  },
-  {
-    tag: [tags.regexp],
-    color: '#d16969',
-  },
-  {
-    tag: [tags.special(tags.string), tags.processingInstruction, tags.string, tags.inserted],
-    color: '#ce9178',
-  },
-  { tag: [tags.angleBracket], color: '#808080' },
-  { tag: tags.strong, fontWeight: 'bold' },
-  { tag: tags.emphasis, fontStyle: 'italic' },
-  { tag: tags.strikethrough, textDecoration: 'line-through' },
-  { tag: [tags.meta, tags.comment], color: '#6a9955' },
-  { tag: tags.link, color: '#6a9955', textDecoration: 'underline' },
-  { tag: tags.invalid, color: '#ff0000' },
-]);

packages/bolt/app/components/header/Header.tsx

@@ -9,14 +9,17 @@ export function Header() {
 
   return (
     <header
-      className={classNames('flex items-center bg-white p-5 border-b h-[var(--header-height)]', {
-        'border-transparent': !chat.started,
-        'border-gray-200': chat.started,
-      })}
+      className={classNames(
+        'flex items-center bg-bolt-elements-background-depth-1 p-5 border-b h-[var(--header-height)]',
+        {
+          'border-transparent': !chat.started,
+          'border-bolt-elements-borderColor': chat.started,
+        },
+      )}
     >
-      <div className="flex items-center gap-2">
-        <a href="/" className="text-2xl font-semibold text-accent">
-          <img src="/logo_text.svg" width="60px" alt="Bolt Logo" />
+      <div className="flex items-center gap-2 z-logo text-bolt-elements-textPrimary">
+        <a href="/" className="text-2xl font-semibold text-accent flex items-center">
+          <span className="i-bolt:logo-text?mask w-[46px] inline-block" />
         </a>
       </div>
       <div className="ml-auto flex gap-2">

packages/bolt/app/components/sidebar/HistoryItem.tsx

@@ -53,18 +53,18 @@ export function HistoryItem({ item, loadEntries }: { item: ChatHistory; loadEntr
   return (
     <div
       ref={hoverRef}
-      className="group rounded-md hover:bg-gray-100 overflow-hidden flex justify-between items-center px-2 py-1"
+      className="group rounded-md text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 overflow-hidden flex justify-between items-center px-2 py-1"
     >
       <a href={`/chat/${item.urlId}`} className="flex w-full relative truncate block">
         {item.description}
-        <div className="absolute right-0 z-1 top-0 bottom-0 bg-gradient-to-l from-white group-hover:from-gray-100 to-transparent w-10 flex justify-end group-hover:w-15 group-hover:from-45%">
+        <div className="absolute right-0 z-1 top-0 bottom-0 bg-gradient-to-l from-bolt-elements-background-depth-2 group-hover:from-bolt-elements-background-depth-3 to-transparent w-10 flex justify-end group-hover:w-15 group-hover:from-45%">
           {hovering && (
-            <div className="flex items-center p-1">
+            <div className="flex items-center p-1 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary">
               {requestingDelete ? (
-                <button className="i-ph:check text-gray-600 hover:text-gray-1000 scale-110" onClick={deleteItem} />
+                <button className="i-ph:check scale-110" onClick={deleteItem} />
               ) : (
                 <button
-                  className="i-ph:trash text-gray-600 hover:text-gray-1000 scale-110"
+                  className="i-ph:trash scale-110"
                   onClick={(event) => {
                     event.preventDefault();
                     setRequestingDelete(true);

packages/bolt/app/components/sidebar/Menu.client.tsx

@@ -2,6 +2,7 @@ import { motion, type Variants } from 'framer-motion';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { toast } from 'react-toastify';
 import { IconButton } from '~/components/ui/IconButton';
+import { ThemeSwitch } from '~/components/ui/ThemeSwitch';
 import { db, getAll, type ChatHistory } from '~/lib/persistence';
 import { cubicEasingFn } from '~/utils/easings';
 import { HistoryItem } from './HistoryItem';
@@ -10,6 +11,7 @@ import { binDates } from './date-binning';
 const menuVariants = {
   closed: {
     opacity: 0,
+    visibility: 'hidden',
     left: '-150px',
     transition: {
       duration: 0.2,
@@ -18,6 +20,7 @@ const menuVariants = {
   },
   open: {
     opacity: 1,
+    visibility: 'initial',
     left: 0,
     transition: {
       duration: 0.2,
@@ -47,21 +50,22 @@ export function Menu() {
   }, [open]);
 
   useEffect(() => {
+    const enterThreshold = 80;
+    const exitThreshold = 40;
+
     function onMouseMove(event: MouseEvent) {
-      if (event.pageX < 80) {
+      if (event.pageX < enterThreshold) {
         setOpen(true);
       }
-    }
 
-    function onMouseLeave(_event: MouseEvent) {
-      setOpen(false);
+      if (menuRef.current && event.clientX > menuRef.current.getBoundingClientRect().right + exitThreshold) {
+        setOpen(false);
+      }
     }
 
-    menuRef.current?.addEventListener('mouseleave', onMouseLeave);
     window.addEventListener('mousemove', onMouseMove);
 
     return () => {
-      menuRef.current?.removeEventListener('mouseleave', onMouseLeave);
       window.removeEventListener('mousemove', onMouseMove);
     };
   }, []);
@@ -72,34 +76,34 @@ export function Menu() {
       initial="closed"
       animate={open ? 'open' : 'closed'}
       variants={menuVariants}
-      className="flex flex-col side-menu fixed top-0 w-[350px] h-full bg-white border-r rounded-r-3xl border-gray-200 z-max shadow-xl text-sm"
+      className="flex flex-col side-menu fixed top-0 w-[350px] h-full bg-bolt-elements-background-depth-2 border-r rounded-r-3xl border-bolt-elements-borderColor z-sidebar shadow-xl shadow-bolt-elements-sidebar-dropdownShadow text-sm"
     >
-      <div className="flex items-center p-4 h-[var(--header-height)]">
-        <img src="/logo_text.svg" width="60px" alt="Bolt Logo" />
-      </div>
+      <div className="flex items-center h-[var(--header-height)]">{/* Placeholder */}</div>
       <div className="flex-1 flex flex-col h-full w-full overflow-hidden">
         <div className="p-4">
           <a
             href="/"
-            className="flex gap-2 items-center text-accent-600 rounded-md bg-accent-600/12 hover:bg-accent-600/15 p-2 font-medium"
+            className="flex gap-2 items-center bg-bolt-elements-sidebar-buttonBackgroundDefault text-bolt-elements-sidebar-buttonText hover:bg-bolt-elements-sidebar-buttonBackgroundHover rounded-md p-2 transition-theme"
           >
-            <span className="inline-block i-blitz:chat scale-110" />
+            <span className="inline-block i-bolt:chat scale-110" />
             Start new chat
           </a>
         </div>
-        <div className="font-semibold pl-6 pr-5 my-2">Your Chats</div>
+        <div className="text-bolt-elements-textPrimary font-medium pl-6 pr-5 my-2">Your Chats</div>
         <div className="flex-1 overflow-scroll pl-4 pr-5 pb-5">
-          {list.length === 0 && <div className="pl-2 text-gray">No previous conversations</div>}
+          {list.length === 0 && <div className="pl-2 text-bolt-elements-textTertiary">No previous conversations</div>}
           {binDates(list).map(({ category, items }) => (
             <div key={category} className="mt-4 first:mt-0 space-y-1">
-              <div className="text-gray sticky top-0 z-20 bg-white pl-2 pt-2 pb-1">{category}</div>
+              <div className="text-bolt-elements-textTertiary sticky top-0 z-1 bg-bolt-elements-background-depth-2 pl-2 pt-2 pb-1">
+                {category}
+              </div>
               {items.map((item) => (
                 <HistoryItem key={item.id} item={item} loadEntries={loadEntries} />
               ))}
             </div>
           ))}
         </div>
-        <div className="flex items-center border-t p-4">
+        <div className="flex items-center border-t border-bolt-elements-borderColor p-4">
           <a href="/logout">
             <IconButton className="p-1.5 gap-1.5">
               <>
@@ -107,6 +111,7 @@ export function Menu() {
               </>
             </IconButton>
           </a>
+          <ThemeSwitch className="ml-auto" />
         </div>
       </div>
     </motion.div>

packages/bolt/app/components/ui/IconButton.tsx

@@ -8,6 +8,7 @@ interface BaseIconButtonProps {
   className?: string;
   iconClassName?: string;
   disabledClassName?: string;
+  title?: string;
   disabled?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
@@ -32,18 +33,20 @@ export const IconButton = memo(
     iconClassName,
     disabledClassName,
     disabled = false,
+    title,
     onClick,
     children,
   }: IconButtonProps) => {
     return (
       <button
         className={classNames(
-          'flex items-center text-gray-600 bg-transparent enabled:hover:text-gray-900 rounded-md p-1 enabled:hover:bg-gray-200/80 disabled:cursor-not-allowed',
+          'flex items-center text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive rounded-md p-1 enabled:hover:bg-bolt-elements-item-backgroundActive disabled:cursor-not-allowed',
           {
             [classNames('opacity-30', disabledClassName)]: disabled,
           },
           className,
         )}
+        title={title}
         disabled={disabled}
         onClick={(event) => {
           if (disabled) {

packages/bolt/app/components/ui/PanelHeader.tsx

@@ -8,7 +8,12 @@ interface PanelHeaderProps {
 
 export const PanelHeader = memo(({ className, children }: PanelHeaderProps) => {
   return (
-    <div className={classNames('flex items-center gap-2 bg-gray-50 border-b px-4 py-1 min-h-[34px]', className)}>
+    <div
+      className={classNames(
+        'flex items-center gap-2 bg-bolt-elements-background-depth-2 text-bolt-elements-textSecondary border-b border-bolt-elements-borderColor px-4 py-1 min-h-[34px] text-sm',
+        className,
+      )}
+    >
       {children}
     </div>
   );

packages/bolt/app/components/ui/PanelHeaderButton.tsx

@@ -14,7 +14,7 @@ export const PanelHeaderButton = memo(
     return (
       <button
         className={classNames(
-          'flex items-center gap-1.5 px-1.5 rounded-md py-0.5 bg-transparent hover:bg-white disabled:cursor-not-allowed',
+          'flex items-center gap-1.5 px-1.5 rounded-md py-0.5 text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive enabled:hover:bg-bolt-elements-item-backgroundActive disabled:cursor-not-allowed',
           {
             [classNames('opacity-30', disabledClassName)]: disabled,
           },

packages/bolt/app/components/ui/Slider.tsx

@@ -23,7 +23,7 @@ export const Slider = genericMemo(<T,>({ selected, options, setSelected }: Slide
   const isLeftSelected = selected === options.left.value;
 
   return (
-    <div className="flex items-center flex-wrap gap-1 border rounded-lg p-1">
+    <div className="flex items-center flex-wrap gap-1 bg-bolt-elements-background-depth-1 rounded-full p-1">
       <SliderButton selected={isLeftSelected} setSelected={() => setSelected?.(options.left.value)}>
         {options.left.text}
       </SliderButton>
@@ -45,8 +45,10 @@ const SliderButton = memo(({ selected, children, setSelected }: SliderButtonProp
     <button
       onClick={setSelected}
       className={classNames(
-        'bg-transparent text-sm transition-colors px-2.5 py-0.5 rounded-md relative',
-        selected ? 'text-white' : 'text-gray-600 hover:text-accent-600 hover:bg-accent-600/10',
+        'bg-transparent text-sm px-2.5 py-0.5 rounded-full relative',
+        selected
+          ? 'text-bolt-elements-item-contentAccent'
+          : 'text-bolt-elements-item-contentDefault hover:text-bolt-elements-item-contentActive',
       )}
     >
       <span className="relative z-10">{children}</span>
@@ -54,7 +56,7 @@ const SliderButton = memo(({ selected, children, setSelected }: SliderButtonProp
         <motion.span
           layoutId="pill-tab"
           transition={{ type: 'spring', duration: 0.5 }}
-          className="absolute inset-0 z-0 bg-accent-600 rounded-md"
+          className="absolute inset-0 z-0 bg-bolt-elements-item-backgroundAccent rounded-full"
         ></motion.span>
       )}
     </button>

packages/bolt/app/components/ui/ThemeSwitch.tsx

@@ -0,0 +1,29 @@
+import { useStore } from '@nanostores/react';
+import { memo, useEffect, useState } from 'react';
+import { themeStore, toggleTheme } from '~/lib/stores/theme';
+import { IconButton } from './IconButton';
+
+interface ThemeSwitchProps {
+  className?: string;
+}
+
+export const ThemeSwitch = memo(({ className }: ThemeSwitchProps) => {
+  const theme = useStore(themeStore);
+  const [domLoaded, setDomLoaded] = useState(false);
+
+  useEffect(() => {
+    setDomLoaded(true);
+  }, []);
+
+  return (
+    domLoaded && (
+      <IconButton
+        className={className}
+        icon={theme === 'dark' ? 'i-ph-sun-dim-duotone' : 'i-ph-moon-stars-duotone'}
+        size="xl"
+        title="Toggle Theme"
+        onClick={toggleTheme}
+      />
+    )
+  );
+});

packages/bolt/app/components/workbench/EditorPanel.tsx

@@ -125,7 +125,7 @@ export const EditorPanel = memo(
         <Panel defaultSize={showTerminal ? DEFAULT_EDITOR_SIZE : 100} minSize={20}>
           <PanelGroup direction="horizontal">
             <Panel defaultSize={25} minSize={10} collapsible>
-              <div className="flex flex-col border-r h-full">
+              <div className="flex flex-col border-r border-bolt-elements-borderColor h-full">
                 <PanelHeader>
                   <div className="i-ph:tree-structure-duotone shrink-0" />
                   Files
@@ -143,6 +143,7 @@ export const EditorPanel = memo(
               <PanelHeader>
                 {activeFile && (
                   <div className="flex items-center flex-1 text-sm">
+                    <div className="i-ph:file-duotone mr-2" />
                     {activeFile} {isStreaming && <span className="text-xs ml-1 font-semibold">(read-only)</span>}
                     {activeFileUnsaved && (
                       <div className="flex gap-1 ml-auto -mr-1.5">
@@ -191,50 +192,58 @@ export const EditorPanel = memo(
             }
           }}
         >
-          <div className="border-t h-full flex flex-col">
-            <div className="flex items-center bg-gray-50 min-h-[34px]">
+          <div className="h-full">
+            <div className="bg-bolt-elements-terminals-background h-full flex flex-col">
+              <div className="flex items-center bg-bolt-elements-background-depth-2 border-y border-bolt-elements-borderColor gap-1.5 min-h-[34px] p-2">
+                {Array.from({ length: terminalCount }, (_, index) => {
+                  const isActive = activeTerminal === index;
+
+                  return (
+                    <button
+                      key={index}
+                      className={classNames(
+                        'flex items-center text-sm cursor-pointer gap-1.5 px-3 py-2 h-full whitespace-nowrap rounded-full',
+                        {
+                          'bg-bolt-elements-terminals-buttonBackground text-bolt-elements-textPrimary': isActive,
+                          'bg-bolt-elements-background-depth-2 text-bolt-elements-textSecondary hover:bg-bolt-elements-terminals-buttonBackground':
+                            !isActive,
+                        },
+                      )}
+                      onClick={() => setActiveTerminal(index)}
+                    >
+                      <div className="i-ph:terminal-window-duotone text-lg" />
+                      Terminal {terminalCount > 1 && index + 1}
+                    </button>
+                  );
+                })}
+                {terminalCount < MAX_TERMINALS && <IconButton icon="i-ph:plus" size="md" onClick={addTerminal} />}
+                <IconButton
+                  className="ml-auto"
+                  icon="i-ph:caret-down"
+                  title="Close"
+                  size="md"
+                  onClick={() => workbenchStore.toggleTerminal(false)}
+                />
+              </div>
               {Array.from({ length: terminalCount }, (_, index) => {
                 const isActive = activeTerminal === index;
 
                 return (
-                  <button
+                  <Terminal
                     key={index}
-                    className={classNames(
-                      'flex items-center text-sm bg-transparent cursor-pointer gap-1.5 px-3.5 h-full whitespace-nowrap',
-                      {
-                        'bg-white': isActive,
-                        'hover:bg-gray-100': !isActive,
-                      },
-                    )}
-                    onClick={() => setActiveTerminal(index)}
-                  >
-                    <div className="i-ph:terminal-window-duotone text-md" />
-                    Terminal {terminalCount > 1 && index + 1}
-                  </button>
+                    className={classNames('h-full overflow-hidden', {
+                      hidden: !isActive,
+                    })}
+                    ref={(ref) => {
+                      terminalRefs.current.push(ref);
+                    }}
+                    onTerminalReady={(terminal) => workbenchStore.attachTerminal(terminal)}
+                    onTerminalResize={(cols, rows) => workbenchStore.onTerminalResize(cols, rows)}
+                    theme={theme}
+                  />
                 );
               })}
-              {terminalCount < MAX_TERMINALS && (
-                <IconButton className="ml-2" icon="i-ph:plus" size="md" onClick={addTerminal} />
-              )}
             </div>
-            {Array.from({ length: terminalCount }, (_, index) => {
-              const isActive = activeTerminal === index;
-
-              return (
-                <Terminal
-                  key={index}
-                  className={classNames('h-full overflow-hidden', {
-                    hidden: !isActive,
-                  })}
-                  ref={(ref) => {
-                    terminalRefs.current.push(ref);
-                  }}
-                  onTerminalReady={(terminal) => workbenchStore.attachTerminal(terminal)}
-                  onTerminalResize={(cols, rows) => workbenchStore.onTerminalResize(cols, rows)}
-                  theme={theme}
-                />
-              );
-            })}
           </div>
         </Panel>
       </PanelGroup>

packages/bolt/app/components/workbench/FileTree.tsx

@@ -3,7 +3,7 @@ import type { FileMap } from '~/lib/stores/files';
 import { classNames } from '~/utils/classNames';
 import { renderLogger } from '~/utils/logger';
 
-const NODE_PADDING_LEFT = 12;
+const NODE_PADDING_LEFT = 8;
 const DEFAULT_HIDDEN_FILES = [/\/node_modules\//, /\/\.next/, /\/\.astro/];
 
 interface Props {
@@ -86,7 +86,7 @@ export const FileTree = memo(
     };
 
     return (
-      <div className={className}>
+      <div className={classNames('text-sm', className)}>
         {filteredFileList.map((fileOrFolder) => {
           switch (fileOrFolder.kind) {
             case 'file': {
@@ -135,7 +135,7 @@ interface FolderProps {
 function Folder({ folder: { depth, name }, collapsed, onClick }: FolderProps) {
   return (
     <NodeButton
-      className="group bg-white hover:bg-gray-50 text-md"
+      className="group bg-transparent text-bolt-elements-item-contentDefault hover:text-bolt-elements-item-contentActive hover:bg-bolt-elements-item-backgroundActive"
       depth={depth}
       iconClasses={classNames({
         'i-ph:caret-right scale-98': collapsed,
@@ -159,18 +159,22 @@ function File({ file: { depth, name }, onClick, selected, unsavedChanges = false
   return (
     <NodeButton
       className={classNames('group', {
-        'bg-white hover:bg-gray-50': !selected,
-        'bg-gray-100': selected,
+        'bg-transparent hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-item-contentDefault': !selected,
+        'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent': selected,
       })}
       depth={depth}
       iconClasses={classNames('i-ph:file-duotone scale-98', {
-        'text-gray-600': !selected,
+        'group-hover:text-bolt-elements-item-contentActive': !selected,
       })}
       onClick={onClick}
     >
-      <div className="flex items-center">
+      <div
+        className={classNames('flex items-center', {
+          'group-hover:text-bolt-elements-item-contentActive': !selected,
+        })}
+      >
         <div className="flex-1 truncate pr-2">{name}</div>
-        {unsavedChanges && <span className="i-ph:circle-fill scale-68 shrink-0 text-warning-400" />}
+        {unsavedChanges && <span className="i-ph:circle-fill scale-68 shrink-0 text-orange-500" />}
       </div>
     </NodeButton>
   );
@@ -187,8 +191,11 @@ interface ButtonProps {
 function NodeButton({ depth, iconClasses, onClick, className, children }: ButtonProps) {
   return (
     <button
-      className={`flex items-center gap-1.5 w-full pr-2 border-2 border-transparent text-faded ${className ?? ''}`}
-      style={{ paddingLeft: `${12 + depth * NODE_PADDING_LEFT}px` }}
+      className={classNames(
+        'flex items-center gap-1.5 w-full pr-2 border-2 border-transparent text-faded py-0.5',
+        className,
+      )}
+      style={{ paddingLeft: `${6 + depth * NODE_PADDING_LEFT}px` }}
       onClick={() => onClick?.()}
     >
       <div className={classNames('scale-120 shrink-0', iconClasses)}></div>

packages/bolt/app/components/workbench/Preview.tsx

@@ -56,12 +56,12 @@ export const Preview = memo(() => {
 
   return (
     <div className="w-full h-full flex flex-col">
-      <div className="bg-white p-2 flex items-center gap-1.5">
+      <div className="bg-bolt-elements-background-depth-2 p-2 flex items-center gap-1.5">
         <IconButton icon="i-ph:arrow-clockwise" onClick={reloadPreview} />
-        <div className="flex items-center gap-1 flex-grow bg-gray-100 rounded-full px-3 py-1 text-sm text-gray-600 hover:bg-gray-200 hover:focus-within:bg-white focus-within:bg-white focus-within:ring-2 focus-within:ring-accent">
-          <div className="bg-white rounded-full p-[2px] -ml-1">
-            <div className="i-ph:info-bold text-lg" />
-          </div>
+        <div
+          className="flex items-center gap-1 flex-grow bg-bolt-elements-preview-addressBar-background border border-bolt-elements-borderColor text-bolt-elements-preview-addressBar-text rounded-full px-3 py-1 text-sm hover:bg-bolt-elements-preview-addressBar-backgroundHover hover:focus-within:bg-bolt-elements-preview-addressBar-backgroundActive focus-within:bg-bolt-elements-preview-addressBar-backgroundActive
+        focus-within-border-bolt-elements-borderColorActive focus-within:text-bolt-elements-preview-addressBar-textActive"
+        >
           <input
             ref={inputRef}
             className="w-full bg-transparent outline-none"

packages/bolt/app/components/workbench/Workbench.client.tsx

@@ -8,6 +8,7 @@ import {
   type OnScrollCallback as OnEditorScroll,
 } from '~/components/editor/codemirror/CodeMirrorEditor';
 import { IconButton } from '~/components/ui/IconButton';
+import { PanelHeaderButton } from '~/components/ui/PanelHeaderButton';
 import { Slider, type SliderOptions } from '~/components/ui/Slider';
 import { workbenchStore } from '~/lib/stores/workbench';
 import { cubicEasingFn } from '~/utils/easings';
@@ -100,13 +101,22 @@ export const Workbench = memo(({ chatStarted, isStreaming }: WorkspaceProps) =>
     chatStarted && (
       <motion.div initial="closed" animate={showWorkbench ? 'open' : 'closed'} variants={workbenchVariants}>
         <div className="fixed top-[calc(var(--header-height)+1.5rem)] bottom-[calc(1.5rem-1px)] w-[50vw] mr-4 z-0">
-          <div className="flex flex-col bg-white border border-gray-200 shadow-sm rounded-lg overflow-hidden absolute inset-0 right-8">
-            <div className="flex items-center px-3 py-2 border-b border-gray-200">
+          <div className="flex flex-col bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor shadow-sm rounded-lg overflow-hidden absolute inset-0 right-8">
+            <div className="flex items-center px-3 py-2 border-b border-bolt-elements-borderColor">
               <Slider selected={selectedView} options={sliderOptions} setSelected={setSelectedView} />
+              <PanelHeaderButton
+                className="ml-auto mr-1 text-sm"
+                onClick={() => {
+                  workbenchStore.toggleTerminal(!workbenchStore.showTerminal.get());
+                }}
+              >
+                <div className="i-ph:terminal" />
+                Toggle Terminal
+              </PanelHeaderButton>
               <IconButton
                 icon="i-ph:x-circle"
-                className="ml-auto -mr-1"
-                size="xxl"
+                className="-mr-1"
+                size="xl"
                 onClick={() => {
                   workbenchStore.showWorkbench.set(false);
                 }}

packages/bolt/app/components/workbench/terminal/Terminal.tsx

@@ -36,7 +36,7 @@ export const Terminal = memo(
         convertEol: true,
         disableStdin: readonly,
         theme: getTerminalTheme(readonly ? { cursor: '#00000000' } : {}),
-        fontSize: 13,
+        fontSize: 12,
         fontFamily: 'Menlo, courier-new, courier, monospace',
       });
 

packages/bolt/app/root.tsx

@@ -17,9 +17,9 @@ export const links: LinksFunction = () => [
     href: '/favicon.svg',
     type: 'image/svg+xml',
   },
+  { rel: 'stylesheet', href: reactToastifyStyles },
   { rel: 'stylesheet', href: tailwindReset },
   { rel: 'stylesheet', href: globalStyles },
-  { rel: 'stylesheet', href: reactToastifyStyles },
   { rel: 'stylesheet', href: xtermStyles },
   {
     rel: 'preconnect',

packages/bolt/app/styles/components/code.scss

@@ -0,0 +1,9 @@
+.actions .shiki {
+  background-color: var(--bolt-elements-actions-code-background) !important;
+}
+
+.shiki {
+  &:not(:has(.actions), .actions *) {
+    background-color: var(--bolt-elements-messages-code-background) !important;
+  }
+}

packages/bolt/app/{components/editor/codemirror/styles.css → styles/components/editor.scss}

@@ -1,11 +1,11 @@
 :root {
-  --cm-backgroundColor: var(--bolt-elements-editor-backgroundColor, var(--bolt-elements-app-backgroundColor));
-  --cm-textColor: var(--bolt-elements-editor-textColor, var(--bolt-text-primary));
+  --cm-backgroundColor: var(--bolt-elements-editor-backgroundColor, var(--bolt-elements-bg-depth-1));
+  --cm-textColor: var(--bolt-elements-editor-textColor, var(--bolt-elements-textPrimary));
 
   /* Gutter */
 
   --cm-gutter-backgroundColor: var(--bolt-elements-editor-gutter-backgroundColor, var(--cm-backgroundColor));
-  --cm-gutter-textColor: var(--bolt-elements-editor-gutter-textColor, var(--bolt-text-secondary));
+  --cm-gutter-textColor: var(--bolt-elements-editor-gutter-textColor, var(--bolt-elements-textSecondary));
   --cm-gutter-activeLineTextColor: var(--bolt-elements-editor-gutter-activeLineTextColor, var(--cm-gutter-textColor));
 
   /* Fold Gutter */
@@ -20,7 +20,7 @@
   /* Cursor */
 
   --cm-cursor-width: 2px;
-  --cm-cursor-backgroundColor: var(--bolt-elements-editor-cursorColor, var(--bolt-text-primary));
+  --cm-cursor-backgroundColor: var(--bolt-elements-editor-cursorColor, var(--bolt-elements-textSecondary));
 
   /* Matching Brackets */
 
@@ -35,99 +35,101 @@
 
   /* Panels */
 
-  --cm-panels-borderColor: var(--bolt-elements-editor-panels-borderColor, var(--bolt-elements-app-borderColor));
+  --cm-panels-borderColor: var(--bolt-elements-editor-panels-borderColor, var(--bolt-elements-borderColor));
 
   /* Search */
 
   --cm-search-backgroundColor: var(--bolt-elements-editor-search-backgroundColor, var(--cm-backgroundColor));
-  --cm-search-textColor: var(--bolt-elements-editor-search-textColor, var(--bolt-elements-app-textColor));
+  --cm-search-textColor: var(--bolt-elements-editor-search-textColor, var(--bolt-elements-textSecondary));
   --cm-search-closeButton-backgroundColor: var(--bolt-elements-editor-search-closeButton-backgroundColor, transparent);
 
   --cm-search-closeButton-backgroundColorHover: var(
     --bolt-elements-editor-search-closeButton-backgroundColorHover,
-    var(--bolt-background-secondary)
+    var(--bolt-elements-item-backgroundActive)
   );
 
   --cm-search-closeButton-textColor: var(
     --bolt-elements-editor-search-closeButton-textColor,
-    var(--bolt-text-secondary)
+    var(--bolt-elements-item-contentDefault)
   );
 
   --cm-search-closeButton-textColorHover: var(
     --bolt-elements-editor-search-closeButton-textColorHover,
-    var(--bolt-text-primary)
+    var(--bolt-elements-item-contentActive)
   );
 
   --cm-search-button-backgroundColor: var(
     --bolt-elements-editor-search-button-backgroundColor,
-    var(--bolt-background-secondary)
+    var(--bolt-elements-item-backgroundDefault)
   );
 
   --cm-search-button-backgroundColorHover: var(
     --bolt-elements-editor-search-button-backgroundColorHover,
-    var(--bolt-background-active)
+    var(--bolt-elements-item-backgroundActive)
   );
 
-  --cm-search-button-textColor: var(--bolt-elements-editor-search-button-textColor, var(--bolt-text-secondary));
-  --cm-search-button-textColorHover: var(--bolt-elements-editor-search-button-textColorHover, var(--bolt-text-primary));
-  --cm-search-button-borderColor: var(--bolt-elements-editor-search-button-borderColor, transparent);
+  --cm-search-button-textColor: var(--bolt-elements-editor-search-button-textColor, var(--bolt-elements-textSecondary));
 
-  --cm-search-button-borderColorHover: var(
-    --bolt-elements-editor-search-button-borderColorHover,
-    var(--cm-search-button-borderColor)
+  --cm-search-button-textColorHover: var(
+    --bolt-elements-editor-search-button-textColorHover,
+    var(--bolt-elements-textPrimary)
   );
 
+  --cm-search-button-borderColor: var(--bolt-elements-editor-search-button-borderColor, transparent);
+  --cm-search-button-borderColorHover: var(--bolt-elements-editor-search-button-borderColorHover, transparent);
+
   --cm-search-button-borderColorFocused: var(
     --bolt-elements-editor-search-button-borderColorFocused,
-    var(--bolt-border-accent)
+    var(--bolt-elements-borderColorActive)
   );
 
-  --cm-search-input-backgroundColor: var(
-    --bolt-elements-editor-search-input-backgroundColor,
-    var(--bolt-background-primary)
-  );
-
-  --cm-search-input-borderColor: var(
-    --bolt-elements-editor-search-input-borderColor,
-    var(--bolt-elements-app-borderColor)
-  );
+  --cm-search-input-backgroundColor: var(--bolt-elements-editor-search-input-backgroundColor, transparent);
+  --cm-search-input-textColor: var(--bolt-elements-editor-search-input-textColor, var(--bolt-elements-textPrimary));
+  --cm-search-input-borderColor: var(--bolt-elements-editor-search-input-borderColor, var(--bolt-elements-borderColor));
 
   --cm-search-input-borderColorFocused: var(
     --bolt-elements-editor-search-input-borderColorFocused,
-    var(--bolt-border-accent)
+    var(--bolt-elements-borderColorActive)
   );
 
   /* Tooltip */
 
-  --cm-tooltip-backgroundColor: var(
-    --bolt-elements-editor-tooltip-backgroundColor,
-    var(--bolt-elements-app-backgroundColor)
-  );
-
-  --cm-tooltip-textColor: var(--bolt-elements-editor-tooltip-textColor, var(--bolt-text-primary));
+  --cm-tooltip-backgroundColor: var(--bolt-elements-editor-tooltip-backgroundColor, var(--cm-backgroundColor));
+  --cm-tooltip-textColor: var(--bolt-elements-editor-tooltip-textColor, var(--bolt-elements-textPrimary));
 
   --cm-tooltip-backgroundColorSelected: var(
     --bolt-elements-editor-tooltip-backgroundColorSelected,
-    var(--bolt-background-accent)
+    theme('colors.alpha.accent.30')
   );
 
   --cm-tooltip-textColorSelected: var(
     --bolt-elements-editor-tooltip-textColorSelected,
-    var(--bolt-text-primary-inverted)
+    var(--bolt-elements-textPrimary)
   );
 
-  --cm-tooltip-borderColor: var(--bolt-elements-editor-tooltip-borderColor, var(--bolt-elements-app-borderColor));
+  --cm-tooltip-borderColor: var(--bolt-elements-editor-tooltip-borderColor, var(--bolt-elements-borderColor));
+
+  --cm-searchMatch-backgroundColor: var(--bolt-elements-editor-searchMatch-backgroundColor, rgba(234, 92, 0, 0.33));
 }
 
 html[data-theme='light'] {
   --bolt-elements-editor-gutter-textColor: #237893;
-  --bolt-elements-editor-gutter-activeLineTextColor: var(--bolt-text-primary);
-  --bolt-elements-editor-foldGutter-textColorHover: var(--bolt-text-primary);
+  --bolt-elements-editor-gutter-activeLineTextColor: var(--bolt-elements-textPrimary);
+  --bolt-elements-editor-foldGutter-textColorHover: var(--bolt-elements-textPrimary);
+  --bolt-elements-editor-activeLineBackgroundColor: rgb(50 53 63 / 5%);
+  --bolt-elements-editor-tooltip-backgroundColorSelected: theme('colors.alpha.accent.20');
+  --bolt-elements-editor-search-button-backgroundColor: theme('colors.gray.100');
+  --bolt-elements-editor-search-button-backgroundColorHover: theme('colors.alpha.gray.10');
 }
 
 html[data-theme='dark'] {
-  --bolt-elements-editor-gutter-activeLineTextColor: var(--bolt-text-primary);
-  --bolt-elements-editor-selection-backgroundOpacityBlured: 0.1;
+  --cm-backgroundColor: var(--bolt-elements-bg-depth-2);
+  --bolt-elements-editor-gutter-textColor: var(--bolt-elements-textTertiary);
+  --bolt-elements-editor-gutter-activeLineTextColor: var(--bolt-elements-textSecondary);
+  --bolt-elements-editor-selection-inactiveBackgroundOpacity: 0.3;
   --bolt-elements-editor-activeLineBackgroundColor: rgb(50 53 63 / 50%);
-  --bolt-elements-editor-foldGutter-textColorHover: var(--bolt-text-primary);
+  --bolt-elements-editor-foldGutter-textColorHover: var(--bolt-elements-textPrimary);
+  --bolt-elements-editor-matchingBracketBackgroundColor: rgba(66, 180, 255, 0.3);
+  --bolt-elements-editor-search-button-backgroundColor: theme('colors.gray.800');
+  --bolt-elements-editor-search-button-backgroundColorHover: theme('colors.alpha.white.10');
 }

packages/bolt/app/styles/components/toast.scss

@@ -0,0 +1,17 @@
+.Toastify__toast {
+  --at-apply: shadow-md;
+
+  background-color: var(--bolt-elements-bg-depth-2);
+  color: var(--bolt-elements-textPrimary);
+  border: 1px solid var(--bolt-elements-borderColor);
+}
+
+.Toastify__close-button {
+  color: var(--bolt-elements-item-contentDefault);
+  opacity: 1;
+  transition: none;
+
+  &:hover {
+    color: var(--bolt-elements-item-contentActive);
+  }
+}

packages/bolt/app/styles/index.scss

@@ -3,6 +3,9 @@
 @import './animations.scss';
 @import './components/terminal.scss';
 @import './components/resize-handle.scss';
+@import './components/code.scss';
+@import './components/editor.scss';
+@import './components/toast.scss';
 
 html,
 body {

packages/bolt/app/styles/variables.scss

@@ -1,28 +1,77 @@
 /* Color Tokens Light Theme */
 :root,
 :root[data-theme='light'] {
-  --bolt-background-primary: theme('colors.gray.0');
-  --bolt-background-secondary: theme('colors.gray.50');
-  --bolt-background-active: theme('colors.gray.200');
-  --bolt-background-accent: theme('colors.accent.600');
-  --bolt-background-accent-secondary: theme('colors.accent.600');
-  --bolt-background-accent-active: theme('colors.accent.500');
-
-  --bolt-text-primary: theme('colors.gray.800');
-  --bolt-text-primary-inverted: theme('colors.gray.0');
-  --bolt-text-secondary: theme('colors.gray.600');
-  --bolt-text-secondary-inverted: theme('colors.gray.200');
-  --bolt-text-disabled: theme('colors.gray.400');
-  --bolt-text-accent: theme('colors.accent.600');
-  --bolt-text-positive: theme('colors.positive.700');
-  --bolt-text-warning: theme('colors.warning.600');
-  --bolt-text-negative: theme('colors.negative.600');
-
-  --bolt-border-primary: theme('colors.gray.200');
-  --bolt-border-accent: theme('colors.accent.600');
+  --bolt-elements-borderColor: theme('colors.alpha.gray.10');
+  --bolt-elements-borderColorActive: theme('colors.accent.600');
+
+  --bolt-elements-bg-depth-1: theme('colors.white');
+  --bolt-elements-bg-depth-2: theme('colors.gray.50');
+  --bolt-elements-bg-depth-3: theme('colors.gray.200');
+  --bolt-elements-bg-depth-4: theme('colors.alpha.gray.5');
+
+  --bolt-elements-textPrimary: theme('colors.gray.950');
+  --bolt-elements-textSecondary: theme('colors.gray.600');
+  --bolt-elements-textTertiary: theme('colors.gray.500');
+
+  --bolt-elements-code-background: theme('colors.gray.100');
+  --bolt-elements-code-text: theme('colors.gray.950');
+
+  --bolt-elements-item-contentDefault: theme('colors.alpha.gray.50');
+  --bolt-elements-item-contentActive: theme('colors.gray.950');
+  --bolt-elements-item-contentAccent: theme('colors.accent.700');
+  --bolt-elements-item-contentDanger: theme('colors.red.500');
+  --bolt-elements-item-backgroundDefault: rgba(0, 0, 0, 0);
+  --bolt-elements-item-backgroundActive: theme('colors.alpha.gray.5');
+  --bolt-elements-item-backgroundAccent: theme('colors.alpha.accent.10');
+  --bolt-elements-item-backgroundDanger: theme('colors.alpha.red.10');
+
+  --bolt-elements-loader-background: theme('colors.alpha.gray.10');
+  --bolt-elements-loader-progress: theme('colors.accent.500');
+
+  --bolt-elements-artifacts-background: theme('colors.white');
+  --bolt-elements-artifacts-backgroundHover: theme('colors.alpha.gray.2');
+  --bolt-elements-artifacts-borderColor: var(--bolt-elements-borderColor);
+  --bolt-elements-artifacts-inlineCode-background: theme('colors.gray.100');
+  --bolt-elements-artifacts-inlineCode-text: var(--bolt-elements-textPrimary);
+
+  --bolt-elements-actions-background: theme('colors.white');
+  --bolt-elements-actions-code-background: theme('colors.gray.800');
+
+  --bolt-elements-messages-background: theme('colors.gray.100');
+  --bolt-elements-messages-linkColor: theme('colors.accent.500');
+  --bolt-elements-messages-code-background: theme('colors.gray.800');
+  --bolt-elements-messages-inlineCode-background: theme('colors.gray.200');
+  --bolt-elements-messages-inlineCode-text: theme('colors.gray.800');
+
+  --bolt-elements-icon-success: theme('colors.green.500');
+  --bolt-elements-icon-error: theme('colors.red.500');
+  --bolt-elements-icon-primary: theme('colors.gray.950');
+  --bolt-elements-icon-secondary: theme('colors.gray.600');
+  --bolt-elements-icon-tertiary: theme('colors.gray.500');
+
+  --bolt-elements-dividerColor: theme('colors.gray.100');
+
+  --bolt-elements-prompt-background: theme('colors.alpha.white.80');
+
+  --bolt-elements-sidebar-dropdownShadow: theme('colors.alpha.gray.10');
+  --bolt-elements-sidebar-buttonBackgroundDefault: theme('colors.alpha.accent.10');
+  --bolt-elements-sidebar-buttonBackgroundHover: theme('colors.alpha.accent.20');
+  --bolt-elements-sidebar-buttonText: theme('colors.accent.700');
+
+  --bolt-elements-preview-addressBar-background: theme('colors.gray.100');
+  --bolt-elements-preview-addressBar-backgroundHover: theme('colors.alpha.gray.5');
+  --bolt-elements-preview-addressBar-backgroundActive: theme('colors.white');
+  --bolt-elements-preview-addressBar-text: var(--bolt-elements-textSecondary);
+  --bolt-elements-preview-addressBar-textActive: var(--bolt-elements-textPrimary);
+
+  --bolt-elements-terminals-background: theme('colors.white');
+  --bolt-elements-terminals-buttonBackground: var(--bolt-elements-bg-depth-4);
+
+  --bolt-elements-cta-background: theme('colors.gray.100');
+  --bolt-elements-cta-text: theme('colors.gray.950');
 
   /* Terminal Colors */
-  --bolt-terminal-background: var(--bolt-background-primary);
+  --bolt-terminal-background: var(--bolt-elements-terminals-background);
   --bolt-terminal-foreground: #333333;
   --bolt-terminal-selection-background: #00000040;
   --bolt-terminal-black: #000000;
@@ -46,28 +95,77 @@
 /* Color Tokens Dark Theme */
 :root,
 :root[data-theme='dark'] {
-  --bolt-background-primary: theme('colors.gray.0');
-  --bolt-background-secondary: theme('colors.gray.50');
-  --bolt-background-active: theme('colors.gray.200');
-  --bolt-background-accent: theme('colors.accent.600');
-  --bolt-background-accent-secondary: theme('colors.accent.600');
-  --bolt-background-accent-active: theme('colors.accent.500');
-
-  --bolt-text-primary: theme('colors.gray.800');
-  --bolt-text-primary-inverted: theme('colors.gray.0');
-  --bolt-text-secondary: theme('colors.gray.600');
-  --bolt-text-secondary-inverted: theme('colors.gray.200');
-  --bolt-text-disabled: theme('colors.gray.400');
-  --bolt-text-accent: theme('colors.accent.600');
-  --bolt-text-positive: theme('colors.positive.700');
-  --bolt-text-warning: theme('colors.warning.600');
-  --bolt-text-negative: theme('colors.negative.600');
-
-  --bolt-border-primary: theme('colors.gray.200');
-  --bolt-border-accent: theme('colors.accent.600');
+  --bolt-elements-borderColor: theme('colors.alpha.white.10');
+  --bolt-elements-borderColorActive: theme('colors.accent.500');
+
+  --bolt-elements-bg-depth-1: theme('colors.gray.950');
+  --bolt-elements-bg-depth-2: theme('colors.gray.900');
+  --bolt-elements-bg-depth-3: theme('colors.gray.800');
+  --bolt-elements-bg-depth-4: theme('colors.alpha.white.5');
+
+  --bolt-elements-textPrimary: theme('colors.white');
+  --bolt-elements-textSecondary: theme('colors.gray.400');
+  --bolt-elements-textTertiary: theme('colors.gray.500');
+
+  --bolt-elements-code-background: theme('colors.gray.800');
+  --bolt-elements-code-text: theme('colors.white');
+
+  --bolt-elements-item-contentDefault: theme('colors.alpha.white.50');
+  --bolt-elements-item-contentActive: theme('colors.white');
+  --bolt-elements-item-contentAccent: theme('colors.accent.500');
+  --bolt-elements-item-contentDanger: theme('colors.red.500');
+  --bolt-elements-item-backgroundDefault: rgba(255, 255, 255, 0);
+  --bolt-elements-item-backgroundActive: theme('colors.alpha.white.10');
+  --bolt-elements-item-backgroundAccent: theme('colors.alpha.accent.10');
+  --bolt-elements-item-backgroundDanger: theme('colors.alpha.red.10');
+
+  --bolt-elements-loader-background: theme('colors.alpha.gray.10');
+  --bolt-elements-loader-progress: theme('colors.accent.500');
+
+  --bolt-elements-artifacts-background: theme('colors.gray.900');
+  --bolt-elements-artifacts-backgroundHover: theme('colors.alpha.white.5');
+  --bolt-elements-artifacts-borderColor: var(--bolt-elements-borderColor);
+  --bolt-elements-artifacts-inlineCode-background: theme('colors.gray.800');
+  --bolt-elements-artifacts-inlineCode-text: theme('colors.white');
+
+  --bolt-elements-actions-background: theme('colors.gray.900');
+  --bolt-elements-actions-code-background: theme('colors.gray.800');
+
+  --bolt-elements-messages-background: theme('colors.gray.800');
+  --bolt-elements-messages-linkColor: theme('colors.accent.500');
+  --bolt-elements-messages-code-background: theme('colors.gray.900');
+  --bolt-elements-messages-inlineCode-background: theme('colors.gray.700');
+  --bolt-elements-messages-inlineCode-text: var(--bolt-elements-textPrimary);
+
+  --bolt-elements-icon-success: theme('colors.green.400');
+  --bolt-elements-icon-error: theme('colors.red.400');
+  --bolt-elements-icon-primary: theme('colors.gray.950');
+  --bolt-elements-icon-secondary: theme('colors.gray.600');
+  --bolt-elements-icon-tertiary: theme('colors.gray.500');
+
+  --bolt-elements-dividerColor: theme('colors.gray.100');
+
+  --bolt-elements-prompt-background: theme('colors.alpha.gray.80');
+
+  --bolt-elements-sidebar-dropdownShadow: theme('colors.alpha.gray.30');
+  --bolt-elements-sidebar-buttonBackgroundDefault: theme('colors.alpha.accent.10');
+  --bolt-elements-sidebar-buttonBackgroundHover: theme('colors.alpha.accent.20');
+  --bolt-elements-sidebar-buttonText: theme('colors.accent.500');
+
+  --bolt-elements-preview-addressBar-background: var(--bolt-elements-bg-depth-1);
+  --bolt-elements-preview-addressBar-backgroundHover: theme('colors.alpha.white.5');
+  --bolt-elements-preview-addressBar-backgroundActive: var(--bolt-elements-bg-depth-1);
+  --bolt-elements-preview-addressBar-text: var(--bolt-elements-textSecondary);
+  --bolt-elements-preview-addressBar-textActive: var(--bolt-elements-textPrimary);
+
+  --bolt-elements-terminals-background: var(--bolt-elements-bg-depth-1);
+  --bolt-elements-terminals-buttonBackground: var(--bolt-elements-bg-depth-3);
+
+  --bolt-elements-cta-background: theme('colors.gray.100');
+  --bolt-elements-cta-text: theme('colors.gray.950');
 
   /* Terminal Colors */
-  --bolt-terminal-background: #16181d;
+  --bolt-terminal-background: var(--bolt-elements-terminals-background);
   --bolt-terminal-foreground: #eff0eb;
   --bolt-terminal-selection-background: #97979b33;
   --bolt-terminal-black: #000000;
@@ -94,13 +192,11 @@
  * Hierarchy: Element Token -> (Element Token | Color Tokens) -> Primitives
  */
 :root {
-  --header-height: 65px;
+  --header-height: 54px;
 
-  /* App */
-  --bolt-elements-app-backgroundColor: var(--bolt-background-primary);
-  --bolt-elements-app-borderColor: var(--bolt-border-primary);
-  --bolt-elements-app-textColor: var(--bolt-text-primary);
-  --bolt-elements-app-linkColor: var(--bolt-text-accent);
+  /* Toasts */
+  --toastify-color-progress-success: var(--bolt-elements-icon-success);
+  --toastify-color-progress-error: var(--bolt-elements-icon-error);
 
   /* Terminal */
   --bolt-elements-terminal-backgroundColor: var(--bolt-terminal-background);

packages/bolt/app/styles/z-index.scss

@@ -1,5 +1,13 @@
 $zIndexMax: 999;
 
+.z-logo {
+  z-index: $zIndexMax - 1;
+}
+
+.z-sidebar {
+  z-index: $zIndexMax - 2;
+}
+
 .z-max {
   z-index: $zIndexMax;
 }

packages/bolt/package.json

@@ -40,6 +40,7 @@
     "@remix-run/cloudflare-pages": "^2.10.2",
     "@remix-run/react": "^2.10.2",
     "@stackblitz/sdk": "^1.11.0",
+    "@uiw/codemirror-theme-vscode": "^4.23.0",
     "@unocss/reset": "^0.61.0",
     "@webcontainer/api": "^1.3.0-internal.2",
     "@xterm/addon-fit": "^0.10.0",

packages/bolt/uno.config.ts

@@ -5,7 +5,7 @@ import { defineConfig, presetIcons, presetUno, transformerDirectives } from 'uno
 
 const iconPaths = globSync('./icons/*.svg');
 
-const collectionName = 'blitz';
+const collectionName = 'bolt';
 
 const customIconCollection = iconPaths.reduce(
   (acc, iconPath) => {
@@ -19,101 +19,185 @@ const customIconCollection = iconPaths.reduce(
   {} as Record<string, Record<string, () => Promise<string>>>,
 );
 
-const COLOR_PRIMITIVES = {
+const BASE_COLORS = {
+  white: '#FFFFFF',
+  gray: {
+    50: '#FAFAFA',
+    100: '#F5F5F5',
+    200: '#E5E5E5',
+    300: '#D4D4D4',
+    400: '#A3A3A3',
+    500: '#737373',
+    600: '#525252',
+    700: '#404040',
+    800: '#262626',
+    900: '#171717',
+    950: '#0A0A0A',
+  },
   accent: {
-    DEFAULT: '#1389FD',
     50: '#EEF9FF',
     100: '#D8F1FF',
-    200: '#B9E7FF',
-    300: '#89DBFF',
-    400: '#52C5FF',
-    500: '#2AA7FF',
-    600: '#1389FD',
-    700: '#0C70E9',
-    800: '#115ABC',
-    900: '#144D94',
-    950: '#11305A',
+    200: '#BAE7FF',
+    300: '#8ADAFF',
+    400: '#53C4FF',
+    500: '#2BA6FF',
+    600: '#1488FC',
+    700: '#0D6FE8',
+    800: '#1259BB',
+    900: '#154E93',
+    950: '#122F59',
   },
-  gray: {
-    0: '#FFFFFF',
-    50: '#F6F8F9',
-    100: '#EEF0F1',
-    200: '#E4E6E9',
-    300: '#D2D5D9',
-    400: '#AAAFB6',
-    500: '#7C8085',
-    600: '#565A64',
-    700: '#414349',
-    800: '#31343B',
-    900: '#2B2D35',
-    950: '#232429',
-    1000: '#000000',
+  green: {
+    50: '#F0FDF4',
+    100: '#DCFCE7',
+    200: '#BBF7D0',
+    300: '#86EFAC',
+    400: '#4ADE80',
+    500: '#22C55E',
+    600: '#16A34A',
+    700: '#15803D',
+    800: '#166534',
+    900: '#14532D',
+    950: '#052E16',
   },
-  positive: {
-    50: '#EDFCF6',
-    100: '#CEFDEB',
-    200: '#A1F9DC',
-    300: '#64F1CB',
-    400: '#24E0B3',
-    500: '#02C79F',
-    600: '#00A282',
-    700: '#00826B',
-    800: '#006656',
-    900: '#005449',
-    950: '#223533',
+  orange: {
+    50: '#FFFAEB',
+    100: '#FEEFC7',
+    200: '#FEDF89',
+    300: '#FEC84B',
+    400: '#FDB022',
+    500: '#F79009',
+    600: '#DC6803',
+    700: '#B54708',
+    800: '#93370D',
+    900: '#792E0D',
   },
-  negative: {
-    50: '#FEF2F3',
-    100: '#FDE6E7',
-    200: '#FBD0D4',
-    300: '#F7AAB1',
-    400: '#F06A78',
-    500: '#E84B60',
-    600: '#D42A48',
-    700: '#B21E3C',
-    800: '#951C38',
-    900: '#801B36',
-    950: '#45212A',
+  red: {
+    50: '#FEF2F2',
+    100: '#FEE2E2',
+    200: '#FECACA',
+    300: '#FCA5A5',
+    400: '#F87171',
+    500: '#EF4444',
+    600: '#DC2626',
+    700: '#B91C1C',
+    800: '#991B1B',
+    900: '#7F1D1D',
+    950: '#450A0A',
   },
-  info: {
-    50: '#EFF9FF',
-    100: '#E5F6FF',
-    200: '#B6E9FF',
-    300: '#75DAFF',
-    400: '#2CC8FF',
-    500: '#00AEF2',
-    600: '#008ED4',
-    700: '#0071AB',
-    800: '#005F8D',
-    900: '#064F74',
-    950: '#17374A',
-  },
-  warning: {
-    50: '#FEFAEC',
-    100: '#FCF4D9',
-    200: '#F9E08E',
-    300: '#F6CA53',
-    400: '#ED9413',
-    500: '#D2700D',
-    600: '#AE4E0F',
-    700: '#AE4E0F',
-    800: '#8E3D12',
-    900: '#753212',
-    950: '#402C22',
+};
+
+const COLOR_PRIMITIVES = {
+  ...BASE_COLORS,
+  alpha: {
+    white: generateAlphaPalette(BASE_COLORS.white),
+    gray: generateAlphaPalette(BASE_COLORS.gray[900]),
+    red: generateAlphaPalette(BASE_COLORS.red[500]),
+    accent: generateAlphaPalette(BASE_COLORS.accent[500]),
   },
 };
 
 export default defineConfig({
+  shortcuts: {
+    'transition-theme':
+      'transition-[background-color,border-color,color] duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]',
+    kdb: 'bg-bolt-elements-code-background text-bolt-elements-code-text py-1 px-1.5 rounded-md',
+  },
   theme: {
     colors: {
       ...COLOR_PRIMITIVES,
       bolt: {
         elements: {
-          app: {
-            backgroundColor: 'var(--bolt-elements-app-backgroundColor)',
-            borderColor: 'var(--bolt-elements-app-borderColor)',
-            textColor: 'var(--bolt-elements-app-textColor)',
-            linkColor: 'var(--bolt-elements-app-linkColor)',
+          borderColor: 'var(--bolt-elements-borderColor)',
+          borderColorActive: 'var(--bolt-elements-borderColorActive)',
+          background: {
+            depth: {
+              1: 'var(--bolt-elements-bg-depth-1)',
+              2: 'var(--bolt-elements-bg-depth-2)',
+              3: 'var(--bolt-elements-bg-depth-3)',
+              4: 'var(--bolt-elements-bg-depth-4)',
+            },
+          },
+          textPrimary: 'var(--bolt-elements-textPrimary)',
+          textSecondary: 'var(--bolt-elements-textSecondary)',
+          textTertiary: 'var(--bolt-elements-textTertiary)',
+          code: {
+            background: 'var(--bolt-elements-code-background)',
+            text: 'var(--bolt-elements-code-text)',
+          },
+          item: {
+            contentDefault: 'var(--bolt-elements-item-contentDefault)',
+            contentActive: 'var(--bolt-elements-item-contentActive)',
+            contentAccent: 'var(--bolt-elements-item-contentAccent)',
+            contentDanger: 'var(--bolt-elements-item-contentDanger)',
+            backgroundDefault: 'var(--bolt-elements-item-backgroundDefault)',
+            backgroundActive: 'var(--bolt-elements-item-backgroundActive)',
+            backgroundAccent: 'var(--bolt-elements-item-backgroundAccent)',
+            backgroundDanger: 'var(--bolt-elements-item-backgroundDanger)',
+          },
+          actions: {
+            background: 'var(--bolt-elements-actions-background)',
+            code: {
+              background: 'var(--bolt-elements-actions-code-background)',
+            },
+          },
+          artifacts: {
+            background: 'var(--bolt-elements-artifacts-background)',
+            backgroundHover: 'var(--bolt-elements-artifacts-backgroundHover)',
+            borderColor: 'var(--bolt-elements-artifacts-borderColor)',
+            inlineCode: {
+              background: 'var(--bolt-elements-artifacts-inlineCode-background)',
+              text: 'var(--bolt-elements-artifacts-inlineCode-text)',
+            },
+          },
+          messages: {
+            background: 'var(--bolt-elements-messages-background)',
+            linkColor: 'var(--bolt-elements-messages-linkColor)',
+            code: {
+              background: 'var(--bolt-elements-messages-code-background)',
+            },
+            inlineCode: {
+              background: 'var(--bolt-elements-messages-inlineCode-background)',
+              text: 'var(--bolt-elements-messages-inlineCode-text)',
+            },
+          },
+          icon: {
+            success: 'var(--bolt-elements-icon-success)',
+            error: 'var(--bolt-elements-icon-error)',
+            primary: 'var(--bolt-elements-icon-primary)',
+            secondary: 'var(--bolt-elements-icon-secondary)',
+            tertiary: 'var(--bolt-elements-icon-tertiary)',
+          },
+          preview: {
+            addressBar: {
+              background: 'var(--bolt-elements-preview-addressBar-background)',
+              backgroundHover: 'var(--bolt-elements-preview-addressBar-backgroundHover)',
+              backgroundActive: 'var(--bolt-elements-preview-addressBar-backgroundActive)',
+              text: 'var(--bolt-elements-preview-addressBar-text)',
+              textActive: 'var(--bolt-elements-preview-addressBar-textActive)',
+            },
+          },
+          terminals: {
+            background: 'var(--bolt-elements-terminals-background)',
+            buttonBackground: 'var(--bolt-elements-terminals-buttonBackground)',
+          },
+          dividerColor: 'var(--bolt-elements-dividerColor)',
+          loader: {
+            background: 'var(--bolt-elements-loader-background)',
+            progress: 'var(--bolt-elements-loader-progress)',
+          },
+          prompt: {
+            background: 'var(--bolt-elements-prompt-background)',
+          },
+          sidebar: {
+            dropdownShadow: 'var(--bolt-elements-sidebar-dropdownShadow)',
+            buttonBackgroundDefault: 'var(--bolt-elements-sidebar-buttonBackgroundDefault)',
+            buttonBackgroundHover: 'var(--bolt-elements-sidebar-buttonBackgroundHover)',
+            buttonText: 'var(--bolt-elements-sidebar-buttonText)',
+          },
+          cta: {
+            background: 'var(--bolt-elements-cta-background)',
+            text: 'var(--bolt-elements-cta-text)',
           },
         },
       },
@@ -135,3 +219,34 @@ export default defineConfig({
     }),
   ],
 });
+
+/**
+ * Generates an alpha palette for a given hex color.
+ *
+ * @param hex - The hex color code (without alpha) to generate the palette from.
+ * @returns An object where keys are opacity percentages and values are hex colors with alpha.
+ *
+ * Example:
+ *
+ * ```
+ * {
+ *   '1': '#FFFFFF03',
+ *   '2': '#FFFFFF05',
+ *   '3': '#FFFFFF08',
+ * }
+ * ```
+ */
+function generateAlphaPalette(hex: string) {
+  return [1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100].reduce(
+    (acc, opacity) => {
+      const alpha = Math.round((opacity / 100) * 255)
+        .toString(16)
+        .padStart(2, '0');
+
+      acc[opacity] = `${hex}${alpha}`;
+
+      return acc;
+    },
+    {} as Record<number, string>,
+  );
+}

pnpm-lock.yaml

@@ -107,6 +107,9 @@ importers:
       '@stackblitz/sdk':
         specifier: ^1.11.0
         version: 1.11.0
+      '@uiw/codemirror-theme-vscode':
+        specifier: ^4.23.0
+        version: 4.23.0(@codemirror/[email protected])(@codemirror/[email protected])(@codemirror/[email protected])
       '@unocss/reset':
         specifier: ^0.61.0
         version: 0.61.0
@@ -1601,6 +1604,16 @@ packages:
     resolution: {integrity: sha512-r0WTMpzFo6owx48/DgBVi9pKqNdGQhJcUAvO4JOn4V9MSeEd8UTFXmMt+Kgeqfai1NpGvRH3b+jJlr3WVZAChw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@uiw/[email protected]':
+    resolution: {integrity: sha512-zl1FD7U1b58tqlF216jYv2okvVkTe+FP1ztqO/DF129bcH99QjszkakshyfxQEvvF4ys3zyzqZ7vU3VYBir8tg==}
+
+  '@uiw/[email protected]':
+    resolution: {integrity: sha512-9fiji9xooZyBQozR1i6iTr56YP7j/Dr/VgsNWbqf5Szv+g+4WM1iZuiDGwNXmFMWX8gbkDzp6ASE21VCPSofWw==}
+    peerDependencies:
+      '@codemirror/language': '>=6.0.0'
+      '@codemirror/state': '>=6.0.0'
+      '@codemirror/view': '>=6.0.0'
+
   '@ungap/[email protected]':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
 
@@ -6609,6 +6622,20 @@ snapshots:
       '@typescript-eslint/types': 8.0.0-alpha.33
       eslint-visitor-keys: 3.4.3
 
+  '@uiw/[email protected](@codemirror/[email protected])(@codemirror/[email protected])(@codemirror/[email protected])':
+    dependencies:
+      '@uiw/codemirror-themes': 4.23.0(@codemirror/[email protected])(@codemirror/[email protected])(@codemirror/[email protected])
+    transitivePeerDependencies:
+      - '@codemirror/language'
+      - '@codemirror/state'
+      - '@codemirror/view'
+
+  '@uiw/[email protected](@codemirror/[email protected])(@codemirror/[email protected])(@codemirror/[email protected])':
+    dependencies:
+      '@codemirror/language': 6.10.2
+      '@codemirror/state': 6.4.1
+      '@codemirror/view': 6.28.4
+
   '@ungap/[email protected]': {}
 
   '@unocss/[email protected]([email protected])([email protected](@types/[email protected])([email protected]))':