From 2519f094cc607ad5bd282fdde21c7ebd79311744 Mon Sep 17 00:00:00 2001
From: Mathew Pareles <mathewpareles@gmail.com>
Date: Fri, 3 Jan 2025 00:00:01 -0800
Subject: [PATCH] input and dropdown styles

---
 .../browser/react/src/markdown/BlockCode.tsx  |  2 +-
 .../react/src/markdown/ChatMarkdownRender.tsx |  6 ++--
 .../browser/react/src/sidebar-tsx/Sidebar.tsx |  9 +++++-
 .../react/src/sidebar-tsx/SidebarChat.tsx     | 10 +++----
 .../void/browser/react/src/util/inputs.tsx    | 11 +++++--
 .../void/browser/react/tailwind.config.js     | 30 +++++++++++++++++--
 6 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/src/vs/workbench/contrib/void/browser/react/src/markdown/BlockCode.tsx b/src/vs/workbench/contrib/void/browser/react/src/markdown/BlockCode.tsx
index e64c43c3..dd095451 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/markdown/BlockCode.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/markdown/BlockCode.tsx
@@ -69,7 +69,7 @@ export const BlockCode = ({ text, buttonsOnHover, language }: { text: string, bu
 	const isSingleLine = !text.includes('\n')
 
 	return (<>
-		<div className={`relative group w-full bg-vscode-editor-bg overflow-hidden isolate`}>
+		<div className={`relative group w-full bg-void-bg-3 overflow-hidden isolate`}>
 			{buttonsOnHover === null ? null : (
 				<div className="z-[1] absolute top-0 right-0 opacity-0 group-hover:opacity-100 duration-200">
 					<div className={`flex space-x-2 ${isSingleLine ? '' : 'p-2'}`}>{buttonsOnHover}</div>
diff --git a/src/vs/workbench/contrib/void/browser/react/src/markdown/ChatMarkdownRender.tsx b/src/vs/workbench/contrib/void/browser/react/src/markdown/ChatMarkdownRender.tsx
index ef5221f7..12656acb 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/markdown/ChatMarkdownRender.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/markdown/ChatMarkdownRender.tsx
@@ -49,14 +49,14 @@ const CodeButtonsOnHover = ({ text }: { text: string }) => {
 
 	return <>
 		<button
-			className={`${isSingleLine ? '' : 'p-1'} text-xs hover:brightness-110 bg-vscode-input-bg border border-vscode-input-border rounded text-xs text-vscode-input-fg`}
+			className={`${isSingleLine ? '' : 'p-1'} text-xs bg-void-bg-1 text-void-fg-3 hover:brightness-110 border border-vscode-input-border rounded text-xs`}
 			onClick={onCopy}
 		>
 			{copyButtonState}
 		</button>
 		<button
-			// btn btn-secondary btn-sm border text-xs text-vscode-input-fg border-vscode-input-border rounded
-			className={`${isSingleLine ? '' : 'p-1'} text-xs hover:brightness-110 bg-vscode-input-bg border border-vscode-input-border rounded text-xs text-vscode-input-fg`}
+			// btn btn-secondary btn-sm border text-xs border-vscode-input-border rounded
+			className={`${isSingleLine ? '' : 'p-1'} text-xs bg-void-bg-1 hover:brightness-110 border border-vscode-input-border rounded text-xs`}
 			onClick={onApply}
 		>
 			Apply
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
index 92ecf82e..b259a728 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
@@ -24,7 +24,14 @@ export const Sidebar = ({ className }: { className: string }) => {
 	const isDark = useIsDark()
 	// ${isDark ? 'dark' : ''}
 	return <div className={`@@void-scope`} style={{ width: '100%', height: '100%' }}>
-		<div className={`w-full h-full flex flex-col py-2 bg-vscode-sidebar-bg`}>
+		<div
+			// default background + text styles for sidebar
+			className={`
+				w-full h-full py-2
+				bg-void-bg-2
+				text-void-fg-1
+			`}
+		>
 
 			{/* <span onClick={() => {
 				const tabs = ['chat', 'settings', 'threadSelector']
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
index 0ac769f3..97e342bd 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
@@ -289,9 +289,9 @@ export const SelectedFiles = (
 									rounded-md p-1
 									w-fit h-fit
 									select-none
-									bg-vscode-editor-bg hover:brightness-95
+									bg-void-bg-3 hover:brightness-95
+									text-void-fg-3 text-xs text-nowrap
 									border border-vscode-commandcenter-border rounded-xs
-									text-xs text-vscode-editor-fg text-nowrap
 								`}
 								onClick={() => {
 									setSelectionIsOpened(s => {
@@ -636,13 +636,13 @@ export const SidebarChat = () => {
 						//     .split(' ')
 						//     .map(style => `@@[&_div.monaco-inputbox]:!void-${style}`)
 						//     .join(' ');
-						`@@[&_textarea]:!void-bg-transparent
+						`
 						@@[&_textarea]:!void-outline-none
-						@@[&_textarea]:!void-text-vscode-input-fg
 						@@[&_textarea]:!void-min-h-[81px]
 						@@[&_textarea]:!void-max-h-[500px]
 						@@[&_div.monaco-inputbox]:!void-border-none
-						@@[&_div.monaco-inputbox]:!void-outline-none`
+						@@[&_div.monaco-inputbox]:!void-outline-none
+						`
 					}
 				>
 
diff --git a/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx b/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
index 402ab1a8..7c3fc861 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
@@ -60,6 +60,10 @@ export const VoidInputBox = ({ onChangeText, onCreateInstance, inputBoxRef, plac
 	const contextViewProvider = accessor.get('IContextViewService')
 	return <WidgetComponent
 		ctor={InputBox}
+		className='
+			bg-void-bg-1
+			@@[&_::placeholder]:!void-text-void-fg-3
+		'
 		propsFn={useCallback((container) => [
 			container,
 			contextViewProvider,
@@ -205,7 +209,10 @@ export const VoidSelectBox = <T,>({ onChangeSelection, onCreateInstance, selectB
 	let containerRef = useRef<HTMLDivElement | null>(null);
 
 	return <WidgetComponent
-		className='@@select-child-restyle'
+		className='@@select-child-restyle
+			@@[&_select]:!void-text-void-fg-3
+			@@[&_select]:!void-text-xs
+		'
 		ctor={SelectBox}
 		propsFn={useCallback((container) => {
 			containerRef.current = container
@@ -301,7 +308,7 @@ export const VoidCodeEditor = ({ initValue, language }: { initValue: string, lan
 
 	return <div ref={divRef}>
 		<WidgetComponent
-			className='relative z-0 text-sm bg-vscode-editor-bg'
+			className='relative z-0 bg-void-bg-3' // text-sm
 			ctor={useCallback((container) =>
 				instantiationService.createInstance(
 					CodeEditorWidget,
diff --git a/src/vs/workbench/contrib/void/browser/react/tailwind.config.js b/src/vs/workbench/contrib/void/browser/react/tailwind.config.js
index d310f0e8..d339138a 100644
--- a/src/vs/workbench/contrib/void/browser/react/tailwind.config.js
+++ b/src/vs/workbench/contrib/void/browser/react/tailwind.config.js
@@ -9,7 +9,33 @@ module.exports = {
 	content: ['./src2/**/*.{jsx,tsx}'], // uses these files to decide how to transform the css file
 	theme: {
 		extend: {
+			fontSize: {
+				xs: '10px',
+				sm: '12px',
+				root: '13px',
+				lg: '14px',
+				xl: '16px',
+				'2xl': '18px',
+				'3xl': '20px',
+				'4xl': '24px',
+				'5xl': '30px',
+				'6xl': '36px',
+				'7xl': '48px',
+				'8xl': '64px',
+				'9xl': '72px',
+			},
+			// common colors to use, ordered light to dark
+
 			colors: {
+				"void-bg-1": "var(--vscode-input-background)",
+				"void-bg-2": "var(--vscode-sideBar-background)",
+				"void-bg-3": "var(--vscode-editor-background)",
+
+				"void-fg-1": "var(--vscode-editor-foreground)",
+				"void-fg-2": "var(--vscode-input-foreground)",
+				"void-fg-3": "var(--vscode-input-placeholderForeground)",
+
+
 				vscode: {
 					// see: https://code.visualstudio.com/api/extension-guides/webview#theming-webview-content
 
@@ -39,8 +65,8 @@ module.exports = {
 					"input-bg": "var(--vscode-input-background)",
 					"input-border": "var(--vscode-input-border)",
 					"input-fg": "var(--vscode-input-foreground)",
-					"input-placeholder-fg": "var(--vscode-placeholderForeground)",
-					"input-active-bg": "var(--vscode-activeBackground)",
+					"input-placeholder-fg": "var(--vscode-input-placeholderForeground)",
+					"input-active-bg": "var(--vscode-input-activeBackground)",
 					"input-option-active-border": "var(--vscode-inputOption-activeBorder)",
 					"input-option-active-fg": "var(--vscode-inputOption-activeForeground)",
 					"input-option-hover-bg": "var(--vscode-inputOption-hoverBackground)",