Skip to content

Chore: Tailwind Migration — Markdown and Codeblocks Components #3503

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

Chore: Tailwind Migration — Markdown and Codeblocks Components #3503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4fc47eb
Fill out tailwind css vars.
sachasayan May 12, 2025
ef265c9
Tailwind migration — codeblock and markdown.
sachasayan May 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion webview-ui/src/components/ui/markdown/Blockquote.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
export const Blockquote = ({ children }: { children: React.ReactNode }) => {
return <div className="border-l-3 border-accent italic pl-2 py-2 mb-2">{children}</div>
return <div className="border-l-[3px] border-accent italic pl-2 py-2 mb-2">{children}</div>
}
6 changes: 1 addition & 5 deletions webview-ui/src/components/ui/markdown/CodeBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,7 @@ export const CodeBlock: FC<CodeBlockProps> = memo(({ language, value, className,
size="icon"
className="absolute top-1 right-1 cursor-pointer bg-black/10"
onClick={onCopy}>
{isCopied ? (
<CheckIcon style={{ width: 12, height: 12 }} />
) : (
<CopyIcon style={{ width: 12, height: 12 }} />
)}
{isCopied ? <CheckIcon className="w-3 h-3" /> : <CopyIcon className="w-3 h-3" />}
</Button>
</div>
)
Expand Down
62 changes: 62 additions & 0 deletions webview-ui/src/index.css
View file
Open in desktop
Copy link
Member

@daniel-lxs daniel-lxs May 27, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see a similar inline @keyframes fadeIn is already defined and used in webview-ui/src/components/chat/Markdown.tsx. Is the intention for this global animation to replace the inline one, or is it for other components? If it's to replace the inline one, it would be good to update webview-ui/src/components/chat/Markdown.tsx to use the global animation in this PR or a follow-up. If it's for other components not touched in this PR, it could be introduced separately.

Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,51 @@
--color-vscode-inputValidation-infoForeground: var(--vscode-inputValidation-infoForeground);
--color-vscode-inputValidation-infoBackground: var(--vscode-inputValidation-infoBackground);
--color-vscode-inputValidation-infoBorder: var(--vscode-inputValidation-infoBorder);
--color-vscode-descriptionForeground-transparent-30: color-mix(
in srgb,
var(--vscode-descriptionForeground) 30%,
transparent
);
--color-vscode-testing-iconPassed: var(--vscode-testing-iconPassed);
--color-vscode-testing-iconFailed: var(--vscode-testing-iconFailed);
--color-vscode-titleBar-inactiveForeground: var(--vscode-titleBar-inactiveForeground);
--color-vscode-titleBar-activeForeground: var(--vscode-titleBar-activeForeground);
--color-vscode-editor-lineHighlightBorder: var(--vscode-editor-lineHighlightBorder);
--color-vscode-titleBar-inactiveForeground-20: color-mix(
in srgb,
var(--vscode-titleBar-inactiveForeground) 20%,
transparent
);

/* Custom color for CodeBlock background with fallbacks */
--color-vscode-code-block-background: var(
--vscode-editor-background,
var(--vscode-sideBar-background, rgb(30 30 30))
);

/* Custom colors for Slider border */
--color-vscode-slider-border-light: #767676;
--color-vscode-slider-border-dark: #858585;

/* Fallback colors for Highlight.js (Light theme) */
--color-vscode-fallback-light-comment: #008000;
--color-vscode-fallback-light-doctag: #0000ff;
--color-vscode-fallback-light-keyword: #0000ff;
--color-vscode-fallback-light-title-class: #001080;
--color-vscode-fallback-light-title-function: #795e26;
--color-vscode-fallback-light-number: #098658;
--color-vscode-fallback-light-regexp: #a31515;
--color-vscode-fallback-light-string: #a31515;

/* Fallback colors for Highlight.js (Dark theme) */
--color-vscode-fallback-dark-comment: #6a9955;
--color-vscode-fallback-dark-doctag: #569cd6;
--color-vscode-fallback-dark-keyword: #569cd6;
--color-vscode-fallback-dark-title-class: #9cdcfe;
--color-vscode-fallback-dark-title-function: #dcdcaa;
--color-vscode-fallback-dark-number: #b5cea8;
--color-vscode-fallback-dark-regexp: #ce9178;
--color-vscode-fallback-dark-string: #ce9178;
}

@layer base {
Expand Down Expand Up @@ -184,6 +229,11 @@
.history-item-highlight {
@apply underline;
}

/* Shiki code block inner code transparency */
.shiki > code {
Copy link
Member

@daniel-lxs daniel-lxs May 27, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Was the !important necessary to override Shiki's default styles, or could a less specific selector achieve the same result? Just checking for best practices.

background-color: transparent !important;
}
}

/* Form Element Focus States */
Expand Down Expand Up @@ -421,3 +471,15 @@ input[cmdk-input]:focus {
a:focus {
outline: 1px solid var(--vscode-focusBorder);
}
/**
* Animations
*/

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}