mirror of
https://github.com/cline/cline.git
synced 2026-09-19 02:05:44 +08:00
dev: add JetBrains theme support to storybook
- Add JetBrains Dark and Light theme options to Storybook toolbar - Change default docs theme from "dark" to "vs_dark" - Implement complete JetBrains theme CSS variables for both dark and light variants - Export new theme objects for use in Storybook stories
This commit is contained in:
abeatrix
@@ -22,7 +22,7 @@ const preview: Preview = {
|
||||
},
|
||||
docs: {
|
||||
theme: {
|
||||
base: "dark",
|
||||
base: "vs_dark",
|
||||
colorPrimary: "#3794ff",
|
||||
colorSecondary: "#0e639c",
|
||||
appBg: "#1e1e1e",
|
||||
@@ -44,6 +44,8 @@ const preview: Preview = {
|
||||
items: [
|
||||
{ value: "vs_dark", title: "VS Code Dark" },
|
||||
{ value: "vs_light", title: "VS Code Light" },
|
||||
{ value: "jb_dark", title: "JetBrains Dark" },
|
||||
{ value: "jb_light", title: "JetBrains Light" },
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
@@ -62,8 +62,172 @@ const mockVSCodeLightTheme = {
|
||||
"--vscode-badge-foreground": "#FFFFFF",
|
||||
}
|
||||
|
||||
const mockJetBrainsDarkTheme = {
|
||||
"--vscode-badge-background": "#404040ff",
|
||||
"--vscode-badge-foreground": "#9da0a8ff",
|
||||
"--vscode-banner-background": "#8a8a00ff",
|
||||
"--vscode-button-background": "#3574f0ff",
|
||||
"--vscode-button-foreground": "#ffffffff",
|
||||
"--vscode-button-hoverBackground": "#3574f0ff",
|
||||
"--vscode-editor-background": "#2b2d30ff",
|
||||
"--vscode-editor-foreground": "#dfe1e5ff",
|
||||
"--vscode-errorForeground": "#db5c5cff",
|
||||
"--vscode-foreground": "#dfe1e5ff",
|
||||
"--vscode-sideBar-background": "#2b2d30ff",
|
||||
"--vscode-sideBar-foreground": "#dfe1e5ff",
|
||||
"--vscode-menu-background": "#2b2d30ff",
|
||||
"--vscode-menu-foreground": "#dfe1e5ff",
|
||||
"--vscode-menu-border": "#1e1f22ff",
|
||||
"--vscode-menu-shadow": "#ffffffff",
|
||||
"--vscode-panel-background": "#2b2d30ff",
|
||||
"--vscode-textLink-activeForeground": "#6b9bfaff",
|
||||
"--vscode-textLink-foreground": "#589df6ff",
|
||||
"--vscode-input-background": "#2b2d30ff",
|
||||
"--vscode-input-foreground": "#dfe1e5ff",
|
||||
"--vscode-button-secondaryBackground": "#404040ff",
|
||||
"--vscode-button-secondaryForeground": "#c0c0c0ff",
|
||||
"--vscode-button-secondaryHoverBackground": "#808080ff",
|
||||
"--vscode-icon-foreground": "#dfe1e5ff",
|
||||
"--vscode-charts-green": "#629655ff",
|
||||
"--vscode-charts-yellow": "#8a8a00ff",
|
||||
"--vscode-checkbox-background": "#2b2d30ff",
|
||||
"--vscode-checkbox-foreground": "#dfe1e5ff",
|
||||
"--vscode-descriptionForeground": "#dfe1e5ff",
|
||||
"--vscode-diffEditor-insertedTextBackground": "#005000ff",
|
||||
"--vscode-diffEditor-removedTextBackground": "#500000ff",
|
||||
"--vscode-dropdown-background": "#2b2d30ff",
|
||||
"--vscode-dropdown-foreground": "#dfe1e5ff",
|
||||
"--vscode-editor-findMatchHighlightBackground": "#8a8a00ff",
|
||||
"--vscode-editor-inactiveSelectionBackground": "#404040ff",
|
||||
"--vscode-editorError-foreground": "#db5c5cff",
|
||||
"--vscode-editorWarning-foreground": "#9f6b00ff",
|
||||
"--vscode-editorWidget-background": "#1e1f22ff",
|
||||
"--vscode-focusBorder": "#3574f0ff",
|
||||
"--vscode-input-placeholderForeground": "#808080ff",
|
||||
"--vscode-inputValidation-errorBackground": "#5a0000ff",
|
||||
"--vscode-inputValidation-warningBorder": "#8a7000ff",
|
||||
"--vscode-list-activeSelectionBackground": "#43454aff",
|
||||
"--vscode-list-activeSelectionForeground": "#dfe1e5ff",
|
||||
"--vscode-list-hoverBackground": "#2e436eff",
|
||||
"--vscode-panelTitle-activeForeground": "#dfe1e5ff",
|
||||
"--vscode-panelTitle-inactiveForeground": "#6f737aff",
|
||||
"--vscode-progressBar-background": "#589df6ff",
|
||||
"--vscode-quickInput-background": "#2b2d30ff",
|
||||
"--vscode-quickInputList-focusBackground": "#2e436eff",
|
||||
"--vscode-quickInputList-focusForeground": "#dfe1e5ff",
|
||||
"--vscode-scrollbarSlider-activeBackground": "#404040ff",
|
||||
"--vscode-scrollbarSlider-background": "#2b2d30ff",
|
||||
"--vscode-scrollbarSlider-hoverBackground": "#2b2d30ff",
|
||||
"--vscode-terminal-ansiGreen": "#629655ff",
|
||||
"--vscode-terminal-ansiRed": "#ff6464ff",
|
||||
"--vscode-testing-iconFailed": "#ff6464ff",
|
||||
"--vscode-testing-iconPassed": "#629655ff",
|
||||
"--vscode-textBlockQuote-background": "#404040ff",
|
||||
"--vscode-textCodeBlock-background": "#404040ff",
|
||||
"--vscode-textPreformat-foreground": "#dfe1e5ff",
|
||||
"--vscode-textSeparator-foreground": "#808080ff",
|
||||
"--vscode-titleBar-inactiveForeground": "#6f737aff",
|
||||
"--vscode-toolbar-hoverBackground": "#5a5d5e55",
|
||||
"--vscode-activityWarningBadge-background": "#8a7000ff",
|
||||
"--vscode-checkbox-border": "#3c3c3cff",
|
||||
"--vscode-dropdown-border": "#3c3c3cff",
|
||||
"--vscode-editorGroup-border": "#3c3c3cff",
|
||||
"--vscode-editorWidget-border": "#3c3c3cff",
|
||||
"--vscode-panel-border": "#3c3c3cff",
|
||||
"--vscode-panelTitle-activeBorder": "#3c3c3cff",
|
||||
"--vscode-settings-dropdownListBorder": "#3c3c3cff",
|
||||
"--vscode-sideBar-border": "#3c3c3cff",
|
||||
"--vscode-font-family": "var(--font-sans)",
|
||||
"--vscode-editor-font-family": "var(--font-mono)",
|
||||
"--vscode-font-size": "13px",
|
||||
"--vscode-editor-font-size": "13px",
|
||||
"--vscode-font-weight": "normal",
|
||||
}
|
||||
|
||||
const mockJetBrainsLightTheme = {
|
||||
"--vscode-badge-background": "#c0c0c0ff",
|
||||
"--vscode-badge-foreground": "#6c707eff",
|
||||
"--vscode-banner-background": "#ffff00ff",
|
||||
"--vscode-button-background": "#3574f0ff",
|
||||
"--vscode-button-foreground": "#ffffffff",
|
||||
"--vscode-button-hoverBackground": "#3574f0ff",
|
||||
"--vscode-editor-background": "#f7f8faff",
|
||||
"--vscode-editor-foreground": "#808080ff",
|
||||
"--vscode-errorForeground": "#db3b4bff",
|
||||
"--vscode-foreground": "#000000ff",
|
||||
"--vscode-sideBar-background": "#f7f8faff",
|
||||
"--vscode-sideBar-foreground": "#000000ff",
|
||||
"--vscode-menu-background": "#ffffffff",
|
||||
"--vscode-menu-foreground": "#000000ff",
|
||||
"--vscode-menu-border": "#383a42ff",
|
||||
"--vscode-menu-shadow": "#ffffffff",
|
||||
"--vscode-panel-background": "#f7f8faff",
|
||||
"--vscode-textLink-activeForeground": "#315fbdff",
|
||||
"--vscode-textLink-foreground": "#589df6ff",
|
||||
"--vscode-input-background": "#ffffffff",
|
||||
"--vscode-input-foreground": "#000000ff",
|
||||
"--vscode-button-secondaryBackground": "#c0c0c0ff",
|
||||
"--vscode-button-secondaryForeground": "#404040ff",
|
||||
"--vscode-button-secondaryHoverBackground": "#808080ff",
|
||||
"--vscode-icon-foreground": "#000000ff",
|
||||
"--vscode-charts-green": "#388a34ff",
|
||||
"--vscode-charts-yellow": "#ffff00ff",
|
||||
"--vscode-checkbox-background": "#f7f8faff",
|
||||
"--vscode-checkbox-foreground": "#000000ff",
|
||||
"--vscode-descriptionForeground": "#000000ff",
|
||||
"--vscode-diffEditor-insertedTextBackground": "#b4ffb4ff",
|
||||
"--vscode-diffEditor-removedTextBackground": "#ffb4b4ff",
|
||||
"--vscode-dropdown-background": "#f7f8faff",
|
||||
"--vscode-dropdown-foreground": "#000000ff",
|
||||
"--vscode-editor-findMatchHighlightBackground": "#ffff00ff",
|
||||
"--vscode-editor-inactiveSelectionBackground": "#c0c0c0ff",
|
||||
"--vscode-editorError-foreground": "#db3b4bff",
|
||||
"--vscode-editorWarning-foreground": "#ffc800ff",
|
||||
"--vscode-editorWidget-background": "#ffffffff",
|
||||
"--vscode-focusBorder": "#3574f0ff",
|
||||
"--vscode-input-placeholderForeground": "#808080ff",
|
||||
"--vscode-inputValidation-errorBackground": "#ffe6e6ff",
|
||||
"--vscode-inputValidation-warningBorder": "#bf8803ff",
|
||||
"--vscode-list-activeSelectionBackground": "#dfe1e5ff",
|
||||
"--vscode-list-activeSelectionForeground": "#000000ff",
|
||||
"--vscode-list-hoverBackground": "#d4e2ffff",
|
||||
"--vscode-panelTitle-activeForeground": "#000000ff",
|
||||
"--vscode-panelTitle-inactiveForeground": "#818594ff",
|
||||
"--vscode-progressBar-background": "#0000ffff",
|
||||
"--vscode-quickInput-background": "#f7f8faff",
|
||||
"--vscode-quickInputList-focusBackground": "#d4e2ffff",
|
||||
"--vscode-quickInputList-focusForeground": "#000000ff",
|
||||
"--vscode-scrollbarSlider-activeBackground": "#c0c0c0ff",
|
||||
"--vscode-scrollbarSlider-background": "#f7f8faff",
|
||||
"--vscode-scrollbarSlider-hoverBackground": "#f7f8faff",
|
||||
"--vscode-terminal-ansiGreen": "#00ff00ff",
|
||||
"--vscode-terminal-ansiRed": "#ff0000ff",
|
||||
"--vscode-testing-iconFailed": "#ff0000ff",
|
||||
"--vscode-testing-iconPassed": "#00ff00ff",
|
||||
"--vscode-textBlockQuote-background": "#c0c0c0ff",
|
||||
"--vscode-textCodeBlock-background": "#c0c0c0ff",
|
||||
"--vscode-textPreformat-foreground": "#000000ff",
|
||||
"--vscode-textSeparator-foreground": "#808080ff",
|
||||
"--vscode-titleBar-inactiveForeground": "#818594ff",
|
||||
"--vscode-toolbar-hoverBackground": "#5a5d5e55",
|
||||
"--vscode-activityWarningBadge-background": "#bf8803ff",
|
||||
"--vscode-checkbox-border": "#3c3c3cff",
|
||||
"--vscode-dropdown-border": "#3c3c3cff",
|
||||
"--vscode-editorGroup-border": "#3c3c3cff",
|
||||
"--vscode-editorWidget-border": "#3c3c3cff",
|
||||
"--vscode-panel-border": "#3c3c3cff",
|
||||
"--vscode-panelTitle-activeBorder": "#3c3c3cff",
|
||||
"--vscode-settings-dropdownListBorder": "#3c3c3cff",
|
||||
"--vscode-sideBar-border": "#3c3c3cff",
|
||||
"--vscode-font-family": "var(--font-sans)",
|
||||
"--vscode-editor-font-family": "var(--font-mono)",
|
||||
"--vscode-font-size": "13px",
|
||||
"--vscode-editor-font-size": "13px",
|
||||
"--vscode-font-weight": "normal",
|
||||
}
|
||||
|
||||
// Mock VSCode theme variables for Storybook
|
||||
export const StorybookThemes = {
|
||||
dark: mockVSCodeDarkTheme,
|
||||
light: mockVSCodeLightTheme,
|
||||
dark: { vs: mockVSCodeDarkTheme, jb: mockJetBrainsDarkTheme },
|
||||
light: { vs: mockVSCodeLightTheme, jb: mockJetBrainsLightTheme },
|
||||
}
|
||||
|
||||
@@ -201,6 +201,7 @@ const mockActiveMessages: ClineMessage[] = [
|
||||
|
||||
const mockStreamingMessages: ClineMessage[] = [
|
||||
...mockActiveMessages,
|
||||
createApiReqMessage(4.9, "Initial analysis request"),
|
||||
createMessage(
|
||||
0.17,
|
||||
"say",
|
||||
@@ -350,21 +351,27 @@ export const LongConversation: Story = {
|
||||
// Optimized message patterns for common scenarios
|
||||
const createErrorMessages = () => [
|
||||
createMessage(5, "say", "task", "Help me fix the build errors in my React application"),
|
||||
createApiReqMessage(4.9, "<task>mock</task> Mocking"),
|
||||
createMessage(
|
||||
4.7,
|
||||
"say",
|
||||
"text",
|
||||
"I'll help you fix the build errors. Let me first examine the current state of your application.",
|
||||
),
|
||||
createApiReqMessage(4.9, "<task>mock</task> Mocking"),
|
||||
createMessage(4.3, "say", "command", "npm run build"),
|
||||
createApiReqMessage(4.9, "<task>mock</task> Mocking"),
|
||||
createMessage(4, "say", "error", "Build failed with TypeScript errors in UserProfile.tsx and api.ts"),
|
||||
createApiReqMessage(4.9, "<task>mock</task> Mocking"),
|
||||
createMessage(
|
||||
3.7,
|
||||
"say",
|
||||
"text",
|
||||
"I can see there are TypeScript errors in your code. Let me examine the files and fix these issues.",
|
||||
),
|
||||
createApiReqMessage(4.9, "<task>mock</task> Mocking"),
|
||||
createMessage(3.3, "say", "tool", JSON.stringify({ tool: "readFile", path: "src/components/UserProfile.tsx" })),
|
||||
createApiReqMessage(4.9, "<task>mock</task> Mocking"),
|
||||
createMessage(
|
||||
3,
|
||||
"say",
|
||||
@@ -456,6 +463,17 @@ export const EmptyState: Story = {
|
||||
},
|
||||
}
|
||||
|
||||
export const EmptyStateWithHistory: Story = {
|
||||
decorators: [createStoryDecorator({ clineMessages: [], taskHistory: mockTaskHistory, isNewUser: true })],
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
story: "Shows the chat view to users with conversation history but no active tasks.",
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const createBrowserMessages = () => [
|
||||
createMessage(5, "say", "task", "Help me test the login functionality on my web application"),
|
||||
createMessage(
|
||||
|
||||
@@ -13,7 +13,9 @@ import { StorybookThemes } from "../../.storybook/themes"
|
||||
// Component that handles theme switching
|
||||
const ThemeHandler: React.FC<{ children: React.ReactNode; theme?: string }> = ({ children, theme }) => {
|
||||
React.useEffect(() => {
|
||||
const styles = theme?.includes("light") ? StorybookThemes.light : StorybookThemes.dark
|
||||
const isVSCode = theme?.startsWith("vs")
|
||||
const color = theme?.includes("light") ? StorybookThemes.light : StorybookThemes.dark
|
||||
const styles = isVSCode ? color.vs : color.jb
|
||||
|
||||
// Apply CSS variables to the document root
|
||||
const root = document.documentElement
|
||||
@@ -21,7 +23,7 @@ const ThemeHandler: React.FC<{ children: React.ReactNode; theme?: string }> = ({
|
||||
root.style.setProperty(property, value)
|
||||
})
|
||||
|
||||
document.body.style.backgroundColor = styles["--vscode-editor-background"]
|
||||
document.body.style.backgroundColor = styles["--vscode-sideBar-background"]
|
||||
document.body.style.color = styles["--vscode-editor-foreground"]
|
||||
document.body.style.fontFamily = styles["--vscode-font-family"]
|
||||
document.body.style.fontSize = styles["--vscode-font-size"]
|
||||
|
||||
Reference in New Issue
Block a user