Update README feature descriptions and refine UI styling with dynamic theming variables

Author: robertpiosik

README.md

@@ -19,10 +19,10 @@ Code Web Chat is a free and open-source AI coding toolkit. You can use CWC in **
 - Chatbots—_[Gemini](https://gemini.google.com/app), [ChatGPT](https://chatgpt.com/), [Claude](https://claude.ai/), [Grok](https://grok.com/), [DeepSeek](https://chat.deepseek.com/), etc._
 - APIs—_[Google](https://aistudio.google.com/api-keys), [OpenAI](https://platform.openai.com/api-keys), [OpenRouter](https://openrouter.ai/settings/keys), [local Ollama](https://ollama.com/search), etc._
 
-💅 **Apply responses**—interactive integration of edits with easy rollback \
-🤙 **Fully-featured**—code completions, commit messages, and more \
-🫰 **Cost-efficient**—optimized for [prompt caching](https://platform.openai.com/docs/guides/prompt-caching) across tasks \
-✋ **Privacy-first**—zero telemetry, 100% local operation
+💅 **Apply responses**—interactive multi-file changes integration \
+🤙 **Fully-featured**—tab completions and commit messages \
+🫰 **Cost-efficient**—optimized for [prompt caching](https://platform.openai.com/docs/guides/prompt-caching) \
+✋ **Privacy-first**—strict zero telemetry policy
 
 <p>
 <img src="https://github.com/robertpiosik/CodeWebChat/raw/HEAD/packages/shared/src/media/screenshot.png" alt="Screenshot" />

packages/ui/.storybook/styles.css

@@ -1,11 +1,47 @@
 :root {
+  --cwc-text-color: var(--vscode-foreground);
+  --cwc-text-color-dimmed: color-mix(
+    in srgb,
+    var(--vscode-foreground) 75%,
+    transparent
+  );
+  --cwc-bg-primary: color-mix(
+    in srgb,
+    var(--vscode-foreground) 20%,
+    transparent
+  );
+  --cwc-bg-secondary: color-mix(
+    in srgb,
+    var(--vscode-foreground) 8%,
+    transparent
+  );
+  --cwc-bg-tertiary: color-mix(
+    in srgb,
+    var(--vscode-foreground) 4%,
+    transparent
+  );
+  --cwc-border-color: color-mix(
+    in srgb,
+    var(--vscode-foreground) 25%,
+    transparent
+  );
+  --cwc-border-color-hover: color-mix(
+    in srgb,
+    var(--vscode-foreground) 35%,
+    transparent
+  );
+  --cwc-border-color-dimmed: color-mix(
+    in srgb,
+    var(--vscode-foreground) 17%,
+    transparent
+  );
+
   --vscode-font-weight: normal;
   --vscode-font-size: 13px;
   --vscode-editor-font-weight: normal;
   --vscode-editor-font-size: 15px;
   --vscode-foreground: #f3eff5;
   --vscode-errorForeground: #f48771;
-  --cwc-text-color-dimmed: rgba(243, 239, 245, 0.7);
   --vscode-icon-foreground: #c5c5c5;
   --vscode-focusBorder: #263354;
   --vscode-selection-background: rgba(243, 239, 245, 0.31);

packages/ui/src/components/editor/panel/Donations/Donations.tsx

@@ -199,29 +199,29 @@ export const Donations: React.FC<DonationsProps> = (props) => {
 
           <div className={styles.donations}>
             {props.is_fetching ? (
-              <>
+              <div className={styles.donations__inner}>
                 <div className={styles.donations__inner__donation}>
                   <div
                     className={styles.skeleton}
-                    style={{ width: '50%', height: '14px' }}
+                    style={{ width: '25%', height: '14px' }}
                   />
                   <div className={styles.skeleton} style={{ height: '30px' }} />
                 </div>
                 <div className={styles.donations__inner__donation}>
                   <div
                     className={styles.skeleton}
-                    style={{ width: '70%', height: '14px' }}
+                    style={{ width: '30%', height: '14px' }}
                   />
                   <div className={styles.skeleton} style={{ height: '30px' }} />
                 </div>
                 <div className={styles.donations__inner__donation}>
                   <div
                     className={styles.skeleton}
-                    style={{ width: '40%', height: '14px' }}
+                    style={{ width: '20%', height: '14px' }}
                   />
                   <div className={styles.skeleton} style={{ height: '30px' }} />
                 </div>
-              </>
+              </div>
             ) : (
               <>
                 <div

packages/ui/src/components/editor/panel/modals/ProgressModal/ProgressModal.module.scss

@@ -2,6 +2,7 @@
   text-align: center;
   font-size: 18px;
   font-variant-numeric: tabular-nums;
+  font-family: var(--font-family-accent);
 }
 
 .tokens-per-second {