feat: kilo-ui basic storybook
This commit is contained in:
Catriel Müller
@@ -0,0 +1,49 @@
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
src: url("@opencode-ai/ui/fonts/inter.woff2") format("woff2-variations");
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
font-weight: 100 900;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter Fallback";
|
||||
src: local("Arial");
|
||||
size-adjust: 100%;
|
||||
ascent-override: 97%;
|
||||
descent-override: 25%;
|
||||
line-gap-override: 1%;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "IBM Plex Mono";
|
||||
src: url("@opencode-ai/ui/fonts/ibm-plex-mono.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "IBM Plex Mono";
|
||||
src: url("@opencode-ai/ui/fonts/ibm-plex-mono-medium.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "IBM Plex Mono";
|
||||
src: url("@opencode-ai/ui/fonts/ibm-plex-mono-bold.woff2") format("woff2");
|
||||
font-display: swap;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "IBM Plex Mono Fallback";
|
||||
src: local("Courier New");
|
||||
size-adjust: 100%;
|
||||
ascent-override: 97%;
|
||||
descent-override: 25%;
|
||||
line-gap-override: 1%;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import type { StorybookConfig } from "storybook-solidjs-vite"
|
||||
import { mergeConfig } from "vite"
|
||||
import solidPlugin from "vite-plugin-solid"
|
||||
|
||||
const config: StorybookConfig = {
|
||||
framework: "storybook-solidjs-vite",
|
||||
stories: ["../src/**/*.stories.@(ts|tsx)"],
|
||||
addons: ["@storybook/addon-docs", "@storybook/addon-themes", "@storybook/addon-a11y"],
|
||||
refs: {},
|
||||
viteFinal: async (config) => {
|
||||
return mergeConfig(config, {
|
||||
plugins: [solidPlugin()],
|
||||
resolve: {
|
||||
conditions: ["browser", "solid", "module", "import"],
|
||||
},
|
||||
esbuild: {
|
||||
jsxImportSource: "solid-js",
|
||||
jsx: "automatic",
|
||||
},
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
export default config
|
||||
@@ -0,0 +1,11 @@
|
||||
<style>
|
||||
/* Hide Color Scheme toolbar when kilo-vscode theme is active */
|
||||
html[data-kilo-theme="kilo-vscode"] [aria-label^="Color Scheme"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Hide VS Code Theme toolbar by default and when kilo theme is active */
|
||||
html:not([data-kilo-theme="kilo-vscode"]) [aria-label^="VSCode Theme"] {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,20 @@
|
||||
import { addons } from "storybook/manager-api"
|
||||
import { GLOBALS_UPDATED, SET_GLOBALS } from "storybook/internal/core-events"
|
||||
|
||||
addons.register("kilo-ui/toolbar-visibility", (api) => {
|
||||
const update = (globals: Record<string, unknown>) => {
|
||||
const isVscode = globals["theme"] === "kilo-vscode"
|
||||
document.documentElement.setAttribute("data-kilo-theme", isVscode ? "kilo-vscode" : "kilo")
|
||||
}
|
||||
|
||||
const channel = api.getChannel()
|
||||
if (!channel) return
|
||||
|
||||
channel.on(SET_GLOBALS, ({ globals }: { globals: Record<string, unknown> }) => {
|
||||
update(globals)
|
||||
})
|
||||
|
||||
channel.on(GLOBALS_UPDATED, ({ globals }: { globals: Record<string, unknown> }) => {
|
||||
update(globals)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,94 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Preview, SolidRenderer } from "storybook-solidjs-vite"
|
||||
import type { DecoratorFunction } from "storybook/internal/types"
|
||||
import { applyKiloTheme, applyVscodeTheme, clearVscodeTheme } from "../src/stories/theme-decorator"
|
||||
import "./fonts.css"
|
||||
import "../src/styles/index.css"
|
||||
|
||||
const themeDecorator: DecoratorFunction<SolidRenderer> = (Story, context) => {
|
||||
const themeId = (context.globals["theme"] as string) ?? "kilo"
|
||||
const vscodeThemeId = (context.globals["vscodeTheme"] as string) ?? "dark-modern"
|
||||
|
||||
const colorScheme = (() => {
|
||||
if (themeId === "kilo-vscode") return applyVscodeTheme(vscodeThemeId)
|
||||
clearVscodeTheme()
|
||||
return (context.globals["colorScheme"] as "light" | "dark") ?? "dark"
|
||||
})()
|
||||
|
||||
applyKiloTheme(themeId, colorScheme)
|
||||
document.body.style.background = "var(--background-base)"
|
||||
document.body.style.color = "var(--text-base)"
|
||||
return Story()
|
||||
}
|
||||
|
||||
const preview: Preview = {
|
||||
parameters: {
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/i,
|
||||
},
|
||||
},
|
||||
layout: "centered",
|
||||
},
|
||||
decorators: [themeDecorator],
|
||||
globalTypes: {
|
||||
theme: {
|
||||
description: "Theme",
|
||||
toolbar: {
|
||||
title: "Theme",
|
||||
icon: "paintbrush",
|
||||
items: [
|
||||
{ value: "kilo", title: "Kilo" },
|
||||
{ value: "kilo-vscode", title: "Kilo VSCode" },
|
||||
],
|
||||
dynamicTitle: true,
|
||||
},
|
||||
},
|
||||
colorScheme: {
|
||||
description: "Color Scheme",
|
||||
toolbar: {
|
||||
title: "Color Scheme",
|
||||
icon: "circlehollow",
|
||||
items: [
|
||||
{ value: "dark", title: "Dark", icon: "moon" },
|
||||
{ value: "light", title: "Light", icon: "sun" },
|
||||
],
|
||||
dynamicTitle: true,
|
||||
},
|
||||
},
|
||||
vscodeTheme: {
|
||||
description: "VSCode Theme",
|
||||
toolbar: {
|
||||
title: "VSCode Theme",
|
||||
icon: "browser",
|
||||
items: [
|
||||
{ value: "dark-modern", title: "Dark Modern (default)" },
|
||||
{ value: "dark-plus", title: "Dark+" },
|
||||
{ value: "dark-vs", title: "Dark (Visual Studio)" },
|
||||
{ value: "light-modern", title: "Light Modern" },
|
||||
{ value: "light-plus", title: "Light+" },
|
||||
{ value: "light-vs", title: "Light (Visual Studio)" },
|
||||
{ value: "hc-black", title: "High Contrast" },
|
||||
{ value: "hc-light", title: "High Contrast Light" },
|
||||
{ value: "monokai", title: "Monokai" },
|
||||
{ value: "solarized-dark", title: "Solarized Dark" },
|
||||
{ value: "solarized-light", title: "Solarized Light" },
|
||||
{ value: "red", title: "Red" },
|
||||
{ value: "quiet-light", title: "Quiet Light" },
|
||||
{ value: "tomorrow-night-blue", title: "Tomorrow Night Blue" },
|
||||
{ value: "kimbie-dark", title: "Kimbie Dark" },
|
||||
{ value: "abyss", title: "Abyss" },
|
||||
],
|
||||
dynamicTitle: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
initialGlobals: {
|
||||
theme: "kilo",
|
||||
colorScheme: "dark",
|
||||
vscodeTheme: "dark-modern",
|
||||
},
|
||||
}
|
||||
|
||||
export default preview
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"extends": "../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "solid-js"
|
||||
},
|
||||
"include": ["./**/*", "../src/**/*"]
|
||||
}
|
||||
@@ -80,8 +80,22 @@
|
||||
"solid-js": "catalog:"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-a11y": "10.2.10",
|
||||
"@storybook/addon-docs": "10.2.10",
|
||||
"@storybook/addon-themes": "10.2.10",
|
||||
"@tsconfig/node22": "catalog:",
|
||||
"@types/bun": "catalog:",
|
||||
"typescript": "catalog:"
|
||||
"storybook": "10.2.10",
|
||||
"storybook-solidjs-vite": "10.0.9",
|
||||
"typescript": "catalog:",
|
||||
"vite": "7.3.1",
|
||||
"vite-plugin-solid": "2.11.10"
|
||||
},
|
||||
"scripts": {
|
||||
"storybook": "storybook dev -p 6006",
|
||||
"build-storybook": "storybook build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@kobalte/core": "0.13.11"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Accordion } from "@opencode-ai/ui/accordion"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/Accordion",
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ width: "400px" }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<Accordion collapsible defaultValue={["item-1"]}>
|
||||
<Accordion.Item value="item-1">
|
||||
<Accordion.Header>
|
||||
<Accordion.Trigger>What is Kilo?</Accordion.Trigger>
|
||||
</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
<div style={{ padding: "8px 16px" }}>
|
||||
Kilo is an AI-powered coding assistant that helps you write, debug, and understand code.
|
||||
</div>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item value="item-2">
|
||||
<Accordion.Header>
|
||||
<Accordion.Trigger>How does it work?</Accordion.Trigger>
|
||||
</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
<div style={{ padding: "8px 16px" }}>
|
||||
Kilo uses large language models to understand your codebase and provide intelligent suggestions.
|
||||
</div>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item value="item-3">
|
||||
<Accordion.Header>
|
||||
<Accordion.Trigger>What languages are supported?</Accordion.Trigger>
|
||||
</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
<div style={{ padding: "8px 16px" }}>
|
||||
Kilo supports all major programming languages including TypeScript, Python, Go, Rust, and more.
|
||||
</div>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
),
|
||||
}
|
||||
|
||||
export const Multiple: Story = {
|
||||
render: () => (
|
||||
<Accordion multiple defaultValue={["item-1", "item-2"]}>
|
||||
<Accordion.Item value="item-1">
|
||||
<Accordion.Header>
|
||||
<Accordion.Trigger>Section One</Accordion.Trigger>
|
||||
</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
<div style={{ padding: "8px 16px" }}>Content for section one.</div>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item value="item-2">
|
||||
<Accordion.Header>
|
||||
<Accordion.Trigger>Section Two</Accordion.Trigger>
|
||||
</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
<div style={{ padding: "8px 16px" }}>Content for section two.</div>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item value="item-3">
|
||||
<Accordion.Header>
|
||||
<Accordion.Trigger>Section Three</Accordion.Trigger>
|
||||
</Accordion.Header>
|
||||
<Accordion.Content>
|
||||
<div style={{ padding: "8px 16px" }}>Content for section three.</div>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { For } from "solid-js"
|
||||
import { AppIcon } from "@opencode-ai/ui/app-icon"
|
||||
import type { IconName } from "@opencode-ai/ui/icons/app"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/AppIcon",
|
||||
parameters: { layout: "centered" },
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
const ALL_ICONS: IconName[] = [
|
||||
"vscode",
|
||||
"cursor",
|
||||
"zed",
|
||||
"file-explorer",
|
||||
"finder",
|
||||
"terminal",
|
||||
"iterm2",
|
||||
"ghostty",
|
||||
"xcode",
|
||||
"android-studio",
|
||||
"antigravity",
|
||||
"textmate",
|
||||
"powershell",
|
||||
"sublime-text",
|
||||
]
|
||||
|
||||
export const VSCode: Story = {
|
||||
render: () => <AppIcon id="vscode" style={{ width: "32px", height: "32px" }} />,
|
||||
}
|
||||
|
||||
export const Cursor: Story = {
|
||||
render: () => <AppIcon id="cursor" style={{ width: "32px", height: "32px" }} />,
|
||||
}
|
||||
|
||||
export const Zed: Story = {
|
||||
render: () => <AppIcon id="zed" style={{ width: "32px", height: "32px" }} />,
|
||||
}
|
||||
|
||||
export const AllIcons: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", "flex-wrap": "wrap", gap: "16px", "align-items": "center", padding: "8px" }}>
|
||||
<For each={ALL_ICONS}>
|
||||
{(id) => (
|
||||
<div style={{ display: "flex", "flex-direction": "column", "align-items": "center", gap: "4px" }}>
|
||||
<AppIcon id={id} style={{ width: "32px", height: "32px" }} />
|
||||
<span style={{ "font-size": "10px" }}>{id}</span>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Avatar } from "@opencode-ai/ui/avatar"
|
||||
|
||||
const meta: Meta<typeof Avatar> = {
|
||||
title: "Components/Avatar",
|
||||
component: Avatar,
|
||||
argTypes: {
|
||||
size: { control: "select", options: ["small", "normal", "large"] },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof Avatar>
|
||||
|
||||
export const Default: Story = {
|
||||
args: { fallback: "JD" },
|
||||
}
|
||||
|
||||
export const Small: Story = {
|
||||
args: { fallback: "AB", size: "small" },
|
||||
}
|
||||
|
||||
export const Normal: Story = {
|
||||
args: { fallback: "CD", size: "normal" },
|
||||
}
|
||||
|
||||
export const Large: Story = {
|
||||
args: { fallback: "EF", size: "large" },
|
||||
}
|
||||
|
||||
export const WithCustomColors: Story = {
|
||||
args: { fallback: "KL", background: "#1a4d8f", foreground: "#ffffff" },
|
||||
}
|
||||
|
||||
export const WithImage: Story = {
|
||||
args: {
|
||||
fallback: "OC",
|
||||
src: "https://avatars.githubusercontent.com/u/154330673?s=48",
|
||||
},
|
||||
}
|
||||
|
||||
export const AllSizes: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", gap: "12px", "align-items": "center" }}>
|
||||
<Avatar fallback="SM" size="small" />
|
||||
<Avatar fallback="NO" size="normal" />
|
||||
<Avatar fallback="LG" size="large" />
|
||||
<Avatar fallback="CO" background="#7c3aed" foreground="#ffffff" />
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { BasicTool, GenericTool } from "@opencode-ai/ui/basic-tool"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/BasicTool",
|
||||
parameters: { layout: "padded" },
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<BasicTool icon="code" trigger={{ title: "Read file", subtitle: "src/index.ts" }}>
|
||||
<pre style={{ padding: "8px", margin: 0, "font-size": "12px" }}>{`export const hello = () => "world"`}</pre>
|
||||
</BasicTool>
|
||||
),
|
||||
}
|
||||
|
||||
export const WithArgs: Story = {
|
||||
render: () => (
|
||||
<BasicTool icon="console" trigger={{ title: "Run command", args: ["npm", "install", "--save-dev"] }}>
|
||||
<pre style={{ padding: "8px", margin: 0, "font-size": "12px" }}>{"added 42 packages in 3s"}</pre>
|
||||
</BasicTool>
|
||||
),
|
||||
}
|
||||
|
||||
export const DefaultOpen: Story = {
|
||||
render: () => (
|
||||
<BasicTool icon="magnifying-glass" trigger={{ title: "Search", subtitle: "*.ts" }} defaultOpen>
|
||||
<div style={{ padding: "8px", "font-size": "12px" }}>Found 12 matches across 5 files.</div>
|
||||
</BasicTool>
|
||||
),
|
||||
}
|
||||
|
||||
export const NoChildren: Story = {
|
||||
render: () => <BasicTool icon="mcp" trigger={{ title: "Tool call", subtitle: "No output" }} hideDetails />,
|
||||
}
|
||||
|
||||
export const Locked: Story = {
|
||||
render: () => (
|
||||
<BasicTool icon="folder" trigger={{ title: "Writing file", subtitle: "output.txt" }} defaultOpen locked>
|
||||
<pre style={{ padding: "8px", margin: 0, "font-size": "12px" }}>{"Hello, world!"}</pre>
|
||||
</BasicTool>
|
||||
),
|
||||
}
|
||||
|
||||
export const Generic: Story = {
|
||||
render: () => <GenericTool tool="my_custom_tool" />,
|
||||
}
|
||||
|
||||
export const AllVariants: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", "flex-direction": "column", gap: "8px", width: "400px" }}>
|
||||
<BasicTool icon="code" trigger={{ title: "Read file", subtitle: "src/index.ts" }}>
|
||||
<pre style={{ padding: "8px", margin: 0, "font-size": "12px" }}>content here</pre>
|
||||
</BasicTool>
|
||||
<BasicTool icon="console" trigger={{ title: "Run command", args: ["bun", "test"] }} defaultOpen>
|
||||
<pre style={{ padding: "8px", margin: 0, "font-size": "12px" }}>All tests passed!</pre>
|
||||
</BasicTool>
|
||||
<BasicTool icon="mcp" trigger={{ title: "MCP tool call" }} hideDetails />
|
||||
<GenericTool tool="generic_tool" />
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Button } from "@opencode-ai/ui/button"
|
||||
|
||||
const meta: Meta<typeof Button> = {
|
||||
title: "Components/Button",
|
||||
component: Button,
|
||||
argTypes: {
|
||||
variant: { control: "select", options: ["primary", "secondary", "ghost"] },
|
||||
size: { control: "select", options: ["small", "normal", "large"] },
|
||||
disabled: { control: "boolean" },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof Button>
|
||||
|
||||
export const Primary: Story = {
|
||||
args: { variant: "primary", children: "Primary Button" },
|
||||
}
|
||||
|
||||
export const Secondary: Story = {
|
||||
args: { variant: "secondary", children: "Secondary Button" },
|
||||
}
|
||||
|
||||
export const Ghost: Story = {
|
||||
args: { variant: "ghost", children: "Ghost Button" },
|
||||
}
|
||||
|
||||
export const Small: Story = {
|
||||
args: { variant: "secondary", size: "small", children: "Small" },
|
||||
}
|
||||
|
||||
export const Normal: Story = {
|
||||
args: { variant: "secondary", size: "normal", children: "Normal" },
|
||||
}
|
||||
|
||||
export const Large: Story = {
|
||||
args: { variant: "secondary", size: "large", children: "Large" },
|
||||
}
|
||||
|
||||
export const WithIcon: Story = {
|
||||
args: { variant: "primary", icon: "plus-small", children: "With Icon" },
|
||||
}
|
||||
|
||||
export const Disabled: Story = {
|
||||
args: { variant: "primary", disabled: true, children: "Disabled" },
|
||||
}
|
||||
|
||||
export const AllVariants: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", gap: "8px", "flex-wrap": "wrap", "align-items": "center" }}>
|
||||
<Button variant="primary">Primary</Button>
|
||||
<Button variant="secondary">Secondary</Button>
|
||||
<Button variant="ghost">Ghost</Button>
|
||||
<Button variant="primary" size="small">
|
||||
Small Primary
|
||||
</Button>
|
||||
<Button variant="primary" size="large">
|
||||
Large Primary
|
||||
</Button>
|
||||
<Button variant="secondary" icon="plus-small">
|
||||
With Icon
|
||||
</Button>
|
||||
<Button variant="primary" disabled>
|
||||
Disabled
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Card } from "@opencode-ai/ui/card"
|
||||
|
||||
const meta: Meta<typeof Card> = {
|
||||
title: "Components/Card",
|
||||
component: Card,
|
||||
argTypes: {
|
||||
variant: { control: "select", options: ["normal", "error", "warning", "success", "info"] },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof Card>
|
||||
|
||||
export const Normal: Story = {
|
||||
args: { variant: "normal", children: "This is a normal card" },
|
||||
}
|
||||
|
||||
export const Error: Story = {
|
||||
args: { variant: "error", children: "This is an error card" },
|
||||
}
|
||||
|
||||
export const Warning: Story = {
|
||||
args: { variant: "warning", children: "This is a warning card" },
|
||||
}
|
||||
|
||||
export const Success: Story = {
|
||||
args: { variant: "success", children: "This is a success card" },
|
||||
}
|
||||
|
||||
export const Info: Story = {
|
||||
args: { variant: "info", children: "This is an info card" },
|
||||
}
|
||||
|
||||
export const AllVariants: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", "flex-direction": "column", gap: "8px", width: "300px" }}>
|
||||
<Card variant="normal">Normal card content</Card>
|
||||
<Card variant="error">Error card content</Card>
|
||||
<Card variant="warning">Warning card content</Card>
|
||||
<Card variant="success">Success card content</Card>
|
||||
<Card variant="info">Info card content</Card>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Checkbox } from "@opencode-ai/ui/checkbox"
|
||||
|
||||
const meta: Meta<typeof Checkbox> = {
|
||||
title: "Components/Checkbox",
|
||||
component: Checkbox,
|
||||
argTypes: {
|
||||
disabled: { control: "boolean" },
|
||||
checked: { control: "boolean" },
|
||||
indeterminate: { control: "boolean" },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof Checkbox>
|
||||
|
||||
export const Unchecked: Story = {
|
||||
args: { children: "Unchecked" },
|
||||
}
|
||||
|
||||
export const Checked: Story = {
|
||||
args: { children: "Checked", checked: true },
|
||||
}
|
||||
|
||||
export const Indeterminate: Story = {
|
||||
args: { children: "Indeterminate", indeterminate: true },
|
||||
}
|
||||
|
||||
export const Disabled: Story = {
|
||||
args: { children: "Disabled", disabled: true },
|
||||
}
|
||||
|
||||
export const DisabledChecked: Story = {
|
||||
args: { children: "Disabled Checked", disabled: true, checked: true },
|
||||
}
|
||||
|
||||
export const WithDescription: Story = {
|
||||
args: { children: "Enable feature", description: "This enables the experimental feature" },
|
||||
}
|
||||
|
||||
export const AllVariants: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", "flex-direction": "column", gap: "12px" }}>
|
||||
<Checkbox>Unchecked</Checkbox>
|
||||
<Checkbox checked>Checked</Checkbox>
|
||||
<Checkbox indeterminate>Indeterminate</Checkbox>
|
||||
<Checkbox disabled>Disabled</Checkbox>
|
||||
<Checkbox disabled checked>
|
||||
Disabled Checked
|
||||
</Checkbox>
|
||||
<Checkbox description="Some extra info about this option">With Description</Checkbox>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Collapsible } from "@opencode-ai/ui/collapsible"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/Collapsible",
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ width: "320px" }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
export const Normal: Story = {
|
||||
render: () => (
|
||||
<Collapsible variant="normal" defaultOpen>
|
||||
<Collapsible.Trigger>
|
||||
<div style={{ display: "flex", "align-items": "center", gap: "8px", width: "100%", padding: "8px" }}>
|
||||
<Collapsible.Arrow />
|
||||
<span>Normal Collapsible</span>
|
||||
</div>
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content>
|
||||
<div style={{ padding: "8px 16px" }}>
|
||||
<p>This is the collapsible content. Click the trigger to collapse.</p>
|
||||
</div>
|
||||
</Collapsible.Content>
|
||||
</Collapsible>
|
||||
),
|
||||
}
|
||||
|
||||
export const Ghost: Story = {
|
||||
render: () => (
|
||||
<Collapsible variant="ghost" defaultOpen>
|
||||
<Collapsible.Trigger>
|
||||
<div style={{ display: "flex", "align-items": "center", gap: "8px", width: "100%", padding: "8px" }}>
|
||||
<Collapsible.Arrow />
|
||||
<span>Ghost Collapsible</span>
|
||||
</div>
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content>
|
||||
<div style={{ padding: "8px 16px" }}>
|
||||
<p>Ghost variant has a more subtle appearance.</p>
|
||||
</div>
|
||||
</Collapsible.Content>
|
||||
</Collapsible>
|
||||
),
|
||||
}
|
||||
|
||||
export const Collapsed: Story = {
|
||||
render: () => (
|
||||
<Collapsible variant="normal">
|
||||
<Collapsible.Trigger>
|
||||
<div style={{ display: "flex", "align-items": "center", gap: "8px", width: "100%", padding: "8px" }}>
|
||||
<Collapsible.Arrow />
|
||||
<span>Click to expand</span>
|
||||
</div>
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content>
|
||||
<div style={{ padding: "8px 16px" }}>
|
||||
<p>Hidden content revealed on expand.</p>
|
||||
</div>
|
||||
</Collapsible.Content>
|
||||
</Collapsible>
|
||||
),
|
||||
}
|
||||
|
||||
export const AllVariants: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", "flex-direction": "column", gap: "8px" }}>
|
||||
<Collapsible variant="normal" defaultOpen>
|
||||
<Collapsible.Trigger>
|
||||
<div style={{ display: "flex", "align-items": "center", gap: "8px", width: "100%", padding: "8px" }}>
|
||||
<Collapsible.Arrow />
|
||||
<span>Normal</span>
|
||||
</div>
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content>
|
||||
<div style={{ padding: "8px 16px" }}>Normal content</div>
|
||||
</Collapsible.Content>
|
||||
</Collapsible>
|
||||
<Collapsible variant="ghost" defaultOpen>
|
||||
<Collapsible.Trigger>
|
||||
<div style={{ display: "flex", "align-items": "center", gap: "8px", width: "100%", padding: "8px" }}>
|
||||
<Collapsible.Arrow />
|
||||
<span>Ghost</span>
|
||||
</div>
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content>
|
||||
<div style={{ padding: "8px 16px" }}>Ghost content</div>
|
||||
</Collapsible.Content>
|
||||
</Collapsible>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { ContextMenu } from "@opencode-ai/ui/context-menu"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/ContextMenu",
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ padding: "64px", display: "flex", "justify-content": "center" }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<ContextMenu>
|
||||
<ContextMenu.Trigger>
|
||||
<div
|
||||
style={{
|
||||
padding: "32px 48px",
|
||||
border: "1px dashed var(--border-base)",
|
||||
"border-radius": "4px",
|
||||
color: "var(--text-weak)",
|
||||
"font-size": "13px",
|
||||
}}
|
||||
>
|
||||
Right-click here
|
||||
</div>
|
||||
</ContextMenu.Trigger>
|
||||
<ContextMenu.Portal>
|
||||
<ContextMenu.Content>
|
||||
<ContextMenu.Item>Cut</ContextMenu.Item>
|
||||
<ContextMenu.Item>Copy</ContextMenu.Item>
|
||||
<ContextMenu.Item>Paste</ContextMenu.Item>
|
||||
<ContextMenu.Separator />
|
||||
<ContextMenu.Item>Select All</ContextMenu.Item>
|
||||
</ContextMenu.Content>
|
||||
</ContextMenu.Portal>
|
||||
</ContextMenu>
|
||||
),
|
||||
}
|
||||
|
||||
export const WithGroups: Story = {
|
||||
render: () => (
|
||||
<ContextMenu>
|
||||
<ContextMenu.Trigger>
|
||||
<div
|
||||
style={{
|
||||
padding: "32px 48px",
|
||||
border: "1px dashed var(--border-base)",
|
||||
"border-radius": "4px",
|
||||
color: "var(--text-weak)",
|
||||
"font-size": "13px",
|
||||
}}
|
||||
>
|
||||
Right-click for file menu
|
||||
</div>
|
||||
</ContextMenu.Trigger>
|
||||
<ContextMenu.Portal>
|
||||
<ContextMenu.Content>
|
||||
<ContextMenu.Group>
|
||||
<ContextMenu.GroupLabel>Edit</ContextMenu.GroupLabel>
|
||||
<ContextMenu.Item>Rename</ContextMenu.Item>
|
||||
<ContextMenu.Item>Move to...</ContextMenu.Item>
|
||||
</ContextMenu.Group>
|
||||
<ContextMenu.Separator />
|
||||
<ContextMenu.Item>Delete</ContextMenu.Item>
|
||||
</ContextMenu.Content>
|
||||
</ContextMenu.Portal>
|
||||
</ContextMenu>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Dialog } from "@opencode-ai/ui/dialog"
|
||||
import { Button } from "@opencode-ai/ui/button"
|
||||
import { Dialog as KobalteDialog } from "@kobalte/core/dialog"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/Dialog",
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ padding: "32px" }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
function DialogDemo(props: { size?: "normal" | "large" | "x-large"; title?: string; description?: string }) {
|
||||
return (
|
||||
<KobalteDialog>
|
||||
<KobalteDialog.Trigger as={Button} variant="secondary">
|
||||
Open {props.size ?? "normal"} dialog
|
||||
</KobalteDialog.Trigger>
|
||||
<KobalteDialog.Portal>
|
||||
<KobalteDialog.Overlay data-component="dialog-overlay" />
|
||||
<Dialog size={props.size} title={props.title} description={props.description}>
|
||||
<div style={{ padding: "8px 0" }}>
|
||||
<p>Dialog body content goes here. This is the main area of the dialog.</p>
|
||||
</div>
|
||||
</Dialog>
|
||||
</KobalteDialog.Portal>
|
||||
</KobalteDialog>
|
||||
)
|
||||
}
|
||||
|
||||
export const Normal: Story = {
|
||||
render: () => <DialogDemo size="normal" title="Normal Dialog" description="A standard size dialog" />,
|
||||
}
|
||||
|
||||
export const Large: Story = {
|
||||
render: () => <DialogDemo size="large" title="Large Dialog" description="A large size dialog" />,
|
||||
}
|
||||
|
||||
export const XLarge: Story = {
|
||||
render: () => <DialogDemo size="x-large" title="Extra Large Dialog" description="An extra large dialog" />,
|
||||
}
|
||||
|
||||
export const NoTitle: Story = {
|
||||
render: () => <DialogDemo />,
|
||||
}
|
||||
|
||||
export const AllVariants: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", gap: "12px" }}>
|
||||
<DialogDemo size="normal" title="Normal" />
|
||||
<DialogDemo size="large" title="Large" />
|
||||
<DialogDemo size="x-large" title="X-Large" />
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { DiffChanges } from "@opencode-ai/ui/diff-changes"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/DiffChanges",
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ padding: "16px" }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
const sampleChanges = [
|
||||
{ additions: 12, deletions: 3 },
|
||||
{ additions: 5, deletions: 0 },
|
||||
{ additions: 2, deletions: 2 },
|
||||
{ additions: 0, deletions: 15 },
|
||||
]
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => <DiffChanges changes={sampleChanges} />,
|
||||
}
|
||||
|
||||
export const Bars: Story = {
|
||||
render: () => <DiffChanges changes={sampleChanges} variant="bars" />,
|
||||
}
|
||||
|
||||
export const AllVariants: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", "flex-direction": "column", gap: "24px" }}>
|
||||
<div>
|
||||
<div style={{ "font-size": "12px", color: "var(--text-weak)", "margin-bottom": "8px" }}>Default</div>
|
||||
<DiffChanges changes={sampleChanges} />
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ "font-size": "12px", color: "var(--text-weak)", "margin-bottom": "8px" }}>Bars</div>
|
||||
<DiffChanges changes={sampleChanges} variant="bars" />
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
|
||||
import { Button } from "@opencode-ai/ui/button"
|
||||
import { IconButton } from "@opencode-ai/ui/icon-button"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/DropdownMenu",
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ padding: "64px", display: "flex", "justify-content": "center" }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<DropdownMenu>
|
||||
<DropdownMenu.Trigger>
|
||||
<Button variant="secondary">Open Menu</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content>
|
||||
<DropdownMenu.Item>New File</DropdownMenu.Item>
|
||||
<DropdownMenu.Item>New Folder</DropdownMenu.Item>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Item>Open...</DropdownMenu.Item>
|
||||
<DropdownMenu.Item>Save</DropdownMenu.Item>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Item>Delete</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu>
|
||||
),
|
||||
}
|
||||
|
||||
export const WithGroups: Story = {
|
||||
render: () => (
|
||||
<DropdownMenu>
|
||||
<DropdownMenu.Trigger>
|
||||
<IconButton variant="ghost" icon="settings-gear" />
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content>
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.GroupLabel>Actions</DropdownMenu.GroupLabel>
|
||||
<DropdownMenu.Item>Edit</DropdownMenu.Item>
|
||||
<DropdownMenu.Item>Copy</DropdownMenu.Item>
|
||||
</DropdownMenu.Group>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.GroupLabel>Danger Zone</DropdownMenu.GroupLabel>
|
||||
<DropdownMenu.Item>Delete</DropdownMenu.Item>
|
||||
</DropdownMenu.Group>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu>
|
||||
),
|
||||
}
|
||||
|
||||
export const WithCheckbox: Story = {
|
||||
render: () => (
|
||||
<DropdownMenu>
|
||||
<DropdownMenu.Trigger>
|
||||
<Button variant="secondary">View Options</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content>
|
||||
<DropdownMenu.CheckboxItem checked>Show line numbers</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem>Word wrap</DropdownMenu.CheckboxItem>
|
||||
<DropdownMenu.CheckboxItem checked>Syntax highlighting</DropdownMenu.CheckboxItem>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu>
|
||||
),
|
||||
}
|
||||
|
||||
export const WithSubMenu: Story = {
|
||||
render: () => (
|
||||
<DropdownMenu>
|
||||
<DropdownMenu.Trigger>
|
||||
<Button variant="secondary">With Submenu</Button>
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.Content>
|
||||
<DropdownMenu.Item>Cut</DropdownMenu.Item>
|
||||
<DropdownMenu.Item>Copy</DropdownMenu.Item>
|
||||
<DropdownMenu.Sub>
|
||||
<DropdownMenu.SubTrigger>Paste Special</DropdownMenu.SubTrigger>
|
||||
<DropdownMenu.Portal>
|
||||
<DropdownMenu.SubContent>
|
||||
<DropdownMenu.Item>Paste as Plain Text</DropdownMenu.Item>
|
||||
<DropdownMenu.Item>Paste with Formatting</DropdownMenu.Item>
|
||||
</DropdownMenu.SubContent>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu.Sub>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Portal>
|
||||
</DropdownMenu>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { For } from "solid-js"
|
||||
import { FileIcon } from "@opencode-ai/ui/file-icon"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/FileIcon",
|
||||
parameters: { layout: "centered" },
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
export const TypeScriptFile: Story = {
|
||||
render: () => <FileIcon node={{ path: "src/index.ts", type: "file" }} style={{ width: "20px", height: "20px" }} />,
|
||||
}
|
||||
|
||||
export const JavaScriptFile: Story = {
|
||||
render: () => <FileIcon node={{ path: "app.js", type: "file" }} style={{ width: "20px", height: "20px" }} />,
|
||||
}
|
||||
|
||||
export const MarkdownFile: Story = {
|
||||
render: () => <FileIcon node={{ path: "README.md", type: "file" }} style={{ width: "20px", height: "20px" }} />,
|
||||
}
|
||||
|
||||
export const Folder: Story = {
|
||||
render: () => <FileIcon node={{ path: "src", type: "directory" }} style={{ width: "20px", height: "20px" }} />,
|
||||
}
|
||||
|
||||
export const FolderExpanded: Story = {
|
||||
render: () => (
|
||||
<FileIcon node={{ path: "src", type: "directory" }} expanded style={{ width: "20px", height: "20px" }} />
|
||||
),
|
||||
}
|
||||
|
||||
const FILES = [
|
||||
{ path: "index.ts", type: "file" as const },
|
||||
{ path: "App.tsx", type: "file" as const },
|
||||
{ path: "styles.css", type: "file" as const },
|
||||
{ path: "package.json", type: "file" as const },
|
||||
{ path: "Dockerfile", type: "file" as const },
|
||||
{ path: "README.md", type: "file" as const },
|
||||
{ path: "main.py", type: "file" as const },
|
||||
{ path: "src", type: "directory" as const },
|
||||
{ path: "node_modules", type: "directory" as const },
|
||||
{ path: "docs", type: "directory" as const },
|
||||
]
|
||||
|
||||
export const AllVariants: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", "flex-wrap": "wrap", gap: "16px", "align-items": "center", padding: "8px" }}>
|
||||
<For each={FILES}>
|
||||
{(node) => (
|
||||
<div style={{ display: "flex", "flex-direction": "column", "align-items": "center", gap: "4px" }}>
|
||||
<FileIcon node={node} style={{ width: "20px", height: "20px" }} />
|
||||
<span style={{ "font-size": "10px" }}>{node.path}</span>
|
||||
</div>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { HoverCard } from "@opencode-ai/ui/hover-card"
|
||||
import { Avatar } from "@opencode-ai/ui/avatar"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/HoverCard",
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ padding: "64px", display: "flex", "justify-content": "center" }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<HoverCard
|
||||
trigger={
|
||||
<a href="#" style={{ color: "var(--text-interactive-base)" }}>
|
||||
@opencode
|
||||
</a>
|
||||
}
|
||||
>
|
||||
<div style={{ "max-width": "240px" }}>
|
||||
<div style={{ display: "flex", gap: "12px", "align-items": "center", "margin-bottom": "8px" }}>
|
||||
<Avatar fallback="OC" size="large" />
|
||||
<div>
|
||||
<div style={{ "font-weight": "600" }}>OpenCode</div>
|
||||
<div style={{ color: "var(--text-weak)", "font-size": "12px" }}>@opencode</div>
|
||||
</div>
|
||||
</div>
|
||||
<p style={{ "font-size": "13px", margin: "0" }}>AI-powered coding assistant built for developers.</p>
|
||||
</div>
|
||||
</HoverCard>
|
||||
),
|
||||
}
|
||||
|
||||
export const WithUserCard: Story = {
|
||||
render: () => (
|
||||
<HoverCard trigger={<Avatar fallback="JD" background="#1a4d8f" foreground="#ffffff" />}>
|
||||
<div style={{ "max-width": "200px", padding: "4px" }}>
|
||||
<div style={{ "font-weight": "600", "margin-bottom": "4px" }}>Jane Doe</div>
|
||||
<div style={{ color: "var(--text-weak)", "font-size": "12px" }}>Senior Engineer</div>
|
||||
</div>
|
||||
</HoverCard>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { IconButton } from "@opencode-ai/ui/icon-button"
|
||||
|
||||
const meta: Meta<typeof IconButton> = {
|
||||
title: "Components/IconButton",
|
||||
component: IconButton,
|
||||
argTypes: {
|
||||
variant: { control: "select", options: ["primary", "secondary", "ghost"] },
|
||||
size: { control: "select", options: ["small", "normal", "large"] },
|
||||
disabled: { control: "boolean" },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof IconButton>
|
||||
|
||||
export const Primary: Story = {
|
||||
args: { variant: "primary", icon: "plus-small" },
|
||||
}
|
||||
|
||||
export const Secondary: Story = {
|
||||
args: { variant: "secondary", icon: "edit" },
|
||||
}
|
||||
|
||||
export const Ghost: Story = {
|
||||
args: { variant: "ghost", icon: "close" },
|
||||
}
|
||||
|
||||
export const Small: Story = {
|
||||
args: { variant: "secondary", size: "small", icon: "magnifying-glass" },
|
||||
}
|
||||
|
||||
export const Large: Story = {
|
||||
args: { variant: "secondary", size: "large", icon: "settings-gear" },
|
||||
}
|
||||
|
||||
export const AllVariants: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", gap: "8px", "align-items": "center" }}>
|
||||
<IconButton variant="primary" icon="plus-small" />
|
||||
<IconButton variant="secondary" icon="edit" />
|
||||
<IconButton variant="ghost" icon="close" />
|
||||
<IconButton variant="secondary" size="small" icon="magnifying-glass" />
|
||||
<IconButton variant="secondary" size="large" icon="settings-gear" />
|
||||
<IconButton variant="primary" disabled icon="trash" />
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Icon } from "@opencode-ai/ui/icon"
|
||||
|
||||
const meta: Meta<typeof Icon> = {
|
||||
title: "Components/Icon",
|
||||
component: Icon,
|
||||
argTypes: {
|
||||
size: { control: "select", options: ["small", "normal", "medium", "large"] },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof Icon>
|
||||
|
||||
export const Default: Story = {
|
||||
args: { name: "settings-gear", size: "normal" },
|
||||
}
|
||||
|
||||
export const Small: Story = {
|
||||
args: { name: "settings-gear", size: "small" },
|
||||
}
|
||||
|
||||
export const Medium: Story = {
|
||||
args: { name: "settings-gear", size: "medium" },
|
||||
}
|
||||
|
||||
export const Large: Story = {
|
||||
args: { name: "settings-gear", size: "large" },
|
||||
}
|
||||
|
||||
const iconNames = [
|
||||
"align-right",
|
||||
"arrow-up",
|
||||
"arrow-left",
|
||||
"arrow-right",
|
||||
"archive",
|
||||
"brain",
|
||||
"bullet-list",
|
||||
"check-small",
|
||||
"chevron-down",
|
||||
"chevron-right",
|
||||
"circle-x",
|
||||
"close",
|
||||
"code",
|
||||
"code-lines",
|
||||
"collapse",
|
||||
"console",
|
||||
"copy",
|
||||
"edit",
|
||||
"eye",
|
||||
"folder",
|
||||
"github",
|
||||
"magnifying-glass",
|
||||
"plus-small",
|
||||
"plus",
|
||||
"pencil-line",
|
||||
"settings-gear",
|
||||
"trash",
|
||||
"sliders",
|
||||
"check",
|
||||
"share",
|
||||
"download",
|
||||
"menu",
|
||||
"expand",
|
||||
"bubble-5",
|
||||
"checklist",
|
||||
"circle-check",
|
||||
"circle-ban-sign",
|
||||
"discord",
|
||||
"dot-grid",
|
||||
"comment",
|
||||
"branch",
|
||||
"help",
|
||||
"link",
|
||||
"providers",
|
||||
"models",
|
||||
"mcp",
|
||||
"photo",
|
||||
"enter",
|
||||
"server",
|
||||
"keyboard",
|
||||
"selector",
|
||||
"arrow-down-to-line",
|
||||
"task",
|
||||
"stop",
|
||||
"layout-left",
|
||||
"layout-right",
|
||||
"layout-bottom",
|
||||
] as const
|
||||
|
||||
export const AllIcons: Story = {
|
||||
render: () => (
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
"grid-template-columns": "repeat(auto-fill, 80px)",
|
||||
gap: "12px",
|
||||
padding: "16px",
|
||||
}}
|
||||
>
|
||||
{iconNames.map((name) => (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
"flex-direction": "column",
|
||||
"align-items": "center",
|
||||
gap: "4px",
|
||||
}}
|
||||
>
|
||||
<Icon name={name} size="normal" />
|
||||
<span style={{ "font-size": "10px", color: "var(--text-weak)", "text-align": "center" }}>{name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
parameters: { layout: "fullscreen" },
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Dialog as Kobalte } from "@kobalte/core/dialog"
|
||||
import { ImagePreview } from "@opencode-ai/ui/image-preview"
|
||||
import { Button } from "@opencode-ai/ui/button"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/ImagePreview",
|
||||
parameters: { layout: "centered" },
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<Kobalte>
|
||||
<Kobalte.Trigger as={Button}>Open Image Preview</Kobalte.Trigger>
|
||||
<Kobalte.Portal>
|
||||
<Kobalte.Overlay />
|
||||
<ImagePreview
|
||||
src="https://via.placeholder.com/800x600/3b82f6/ffffff?text=Sample+Image"
|
||||
alt="Sample placeholder image"
|
||||
/>
|
||||
</Kobalte.Portal>
|
||||
</Kobalte>
|
||||
),
|
||||
}
|
||||
|
||||
export const WithLandscapeImage: Story = {
|
||||
render: () => (
|
||||
<Kobalte>
|
||||
<Kobalte.Trigger as={Button}>Open Landscape Image</Kobalte.Trigger>
|
||||
<Kobalte.Portal>
|
||||
<Kobalte.Overlay />
|
||||
<ImagePreview
|
||||
src="https://via.placeholder.com/1200x400/10b981/ffffff?text=Landscape+Image"
|
||||
alt="Landscape image"
|
||||
/>
|
||||
</Kobalte.Portal>
|
||||
</Kobalte>
|
||||
),
|
||||
}
|
||||
|
||||
export const WithPortraitImage: Story = {
|
||||
render: () => (
|
||||
<Kobalte>
|
||||
<Kobalte.Trigger as={Button}>Open Portrait Image</Kobalte.Trigger>
|
||||
<Kobalte.Portal>
|
||||
<Kobalte.Overlay />
|
||||
<ImagePreview
|
||||
src="https://via.placeholder.com/400x800/f59e0b/ffffff?text=Portrait+Image"
|
||||
alt="Portrait image"
|
||||
/>
|
||||
</Kobalte.Portal>
|
||||
</Kobalte>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import { createSignal } from "solid-js"
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { InlineInput } from "@opencode-ai/ui/inline-input"
|
||||
|
||||
const meta: Meta<typeof InlineInput> = {
|
||||
title: "Components/InlineInput",
|
||||
component: InlineInput,
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof InlineInput>
|
||||
|
||||
export const Default: Story = {
|
||||
args: { placeholder: "Enter value..." },
|
||||
}
|
||||
|
||||
export const WithWidth: Story = {
|
||||
args: { placeholder: "120px wide", width: "120px" },
|
||||
}
|
||||
|
||||
export const Disabled: Story = {
|
||||
args: { value: "Read only value", disabled: true },
|
||||
}
|
||||
|
||||
export const Controlled: Story = {
|
||||
render: () => {
|
||||
const [val, setVal] = createSignal("editable text")
|
||||
return (
|
||||
<div style={{ display: "flex", gap: "8px", "align-items": "center" }}>
|
||||
<InlineInput value={val()} onInput={(e) => setVal(e.currentTarget.value)} />
|
||||
<span style={{ "font-size": "12px", color: "var(--text-weak)" }}>Value: {val()}</span>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Keybind } from "@opencode-ai/ui/keybind"
|
||||
|
||||
const meta: Meta<typeof Keybind> = {
|
||||
title: "Components/Keybind",
|
||||
component: Keybind,
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof Keybind>
|
||||
|
||||
export const Default: Story = {
|
||||
args: { children: "⌘K" },
|
||||
}
|
||||
|
||||
export const Combination: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", gap: "8px", "align-items": "center" }}>
|
||||
<Keybind>⌘K</Keybind>
|
||||
<Keybind>Ctrl+S</Keybind>
|
||||
<Keybind>Alt+F4</Keybind>
|
||||
<Keybind>⇧⌘P</Keybind>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { List } from "@opencode-ai/ui/list"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/List",
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div
|
||||
style={{
|
||||
width: "280px",
|
||||
height: "320px",
|
||||
border: "1px solid var(--border-base)",
|
||||
"border-radius": "4px",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
type Item = { id: string; label: string; description?: string }
|
||||
|
||||
const items: Item[] = [
|
||||
{ id: "1", label: "Apple", description: "A sweet fruit" },
|
||||
{ id: "2", label: "Banana", description: "A yellow fruit" },
|
||||
{ id: "3", label: "Cherry", description: "A small red fruit" },
|
||||
{ id: "4", label: "Date", description: "A sweet dried fruit" },
|
||||
{ id: "5", label: "Elderberry", description: "A dark berry" },
|
||||
{ id: "6", label: "Fig", description: "A soft sweet fruit" },
|
||||
{ id: "7", label: "Grape", description: "Grows in clusters" },
|
||||
]
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<List<Item> items={items} key={(item) => item.id} onSelect={(item) => console.log("Selected:", item)}>
|
||||
{(item) => (
|
||||
<div style={{ padding: "4px 8px" }}>
|
||||
<div style={{ "font-size": "13px" }}>{item.label}</div>
|
||||
<div style={{ "font-size": "11px", color: "var(--text-weak)" }}>{item.description}</div>
|
||||
</div>
|
||||
)}
|
||||
</List>
|
||||
),
|
||||
}
|
||||
|
||||
export const WithSearch: Story = {
|
||||
render: () => (
|
||||
<List<Item>
|
||||
items={items}
|
||||
key={(item) => item.id}
|
||||
filterKeys={["label"]}
|
||||
search={{ placeholder: "Search fruits...", autofocus: true }}
|
||||
onSelect={(item) => console.log("Selected:", item)}
|
||||
>
|
||||
{(item) => (
|
||||
<div style={{ padding: "4px 8px" }}>
|
||||
<div style={{ "font-size": "13px" }}>{item.label}</div>
|
||||
</div>
|
||||
)}
|
||||
</List>
|
||||
),
|
||||
}
|
||||
|
||||
export const WithCurrent: Story = {
|
||||
render: () => (
|
||||
<List<Item>
|
||||
items={items}
|
||||
key={(item) => item.id}
|
||||
current={items[1]}
|
||||
onSelect={(item) => console.log("Selected:", item)}
|
||||
>
|
||||
{(item) => (
|
||||
<div style={{ padding: "4px 8px" }}>
|
||||
<div style={{ "font-size": "13px" }}>{item.label}</div>
|
||||
</div>
|
||||
)}
|
||||
</List>
|
||||
),
|
||||
}
|
||||
|
||||
export const Empty: Story = {
|
||||
render: () => (
|
||||
<List<Item>
|
||||
items={[]}
|
||||
key={(item) => item.id}
|
||||
emptyMessage="No fruits found"
|
||||
onSelect={(item) => console.log("Selected:", item)}
|
||||
>
|
||||
{(item) => <div style={{ padding: "4px 8px" }}>{item.label}</div>}
|
||||
</List>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Logo, Mark, Splash } from "@opencode-ai/ui/logo"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/Logo",
|
||||
parameters: { layout: "centered" },
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
export const FullLogo: Story = {
|
||||
render: () => (
|
||||
<div style={{ width: "160px", height: "auto" }}>
|
||||
<Logo />
|
||||
</div>
|
||||
),
|
||||
}
|
||||
|
||||
export const Mark_: Story = {
|
||||
name: "Mark",
|
||||
render: () => (
|
||||
<div style={{ width: "32px", height: "40px" }}>
|
||||
<Mark />
|
||||
</div>
|
||||
),
|
||||
}
|
||||
|
||||
export const SplashMark: Story = {
|
||||
render: () => (
|
||||
<div style={{ width: "64px", height: "80px" }}>
|
||||
<Splash />
|
||||
</div>
|
||||
),
|
||||
}
|
||||
|
||||
export const AllVariants: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", gap: "32px", "align-items": "center" }}>
|
||||
<div style={{ width: "160px" }}>
|
||||
<Logo />
|
||||
</div>
|
||||
<div style={{ width: "48px", height: "60px" }}>
|
||||
<Splash />
|
||||
</div>
|
||||
<div style={{ width: "24px", height: "30px" }}>
|
||||
<Mark />
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Markdown } from "@opencode-ai/ui/markdown"
|
||||
import { MarkedProvider } from "@opencode-ai/ui/context/marked"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/Markdown",
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<MarkedProvider>
|
||||
<div style={{ "max-width": "600px", padding: "16px" }}>
|
||||
<Story />
|
||||
</div>
|
||||
</MarkedProvider>
|
||||
),
|
||||
],
|
||||
parameters: { layout: "padded" },
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
const sampleMarkdown = `# Heading 1
|
||||
|
||||
This is a paragraph with **bold** and *italic* text.
|
||||
|
||||
## Heading 2
|
||||
|
||||
- Item one
|
||||
- Item two
|
||||
- Item three
|
||||
|
||||
### Code Example
|
||||
|
||||
\`\`\`typescript
|
||||
const hello = (name: string) => {
|
||||
return \`Hello, \${name}!\`
|
||||
}
|
||||
\`\`\`
|
||||
|
||||
> This is a blockquote with some important information.
|
||||
|
||||
Visit [OpenCode](https://opencode.ai) for more details.
|
||||
`
|
||||
|
||||
const shortMarkdown = `Hello **world**! This is *markdown* with \`inline code\`.`
|
||||
|
||||
const codeMarkdown = `\`\`\`javascript
|
||||
function fibonacci(n) {
|
||||
if (n <= 1) return n
|
||||
return fibonacci(n - 1) + fibonacci(n - 2)
|
||||
}
|
||||
\`\`\``
|
||||
|
||||
const listMarkdown = `## Features
|
||||
|
||||
- AI-powered code generation
|
||||
- Context-aware suggestions
|
||||
- Multi-language support
|
||||
- TypeScript
|
||||
- Python
|
||||
- Go
|
||||
- Real-time collaboration`
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => <Markdown text={sampleMarkdown} />,
|
||||
}
|
||||
|
||||
export const Short: Story = {
|
||||
render: () => <Markdown text={shortMarkdown} />,
|
||||
}
|
||||
|
||||
export const CodeBlock: Story = {
|
||||
render: () => <Markdown text={codeMarkdown} />,
|
||||
}
|
||||
|
||||
export const Lists: Story = {
|
||||
render: () => <Markdown text={listMarkdown} />,
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { MessageNav } from "@opencode-ai/ui/message-nav"
|
||||
import type { UserMessage } from "@kilocode/sdk/v2"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/MessageNav",
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ "background-color": "var(--background-base)", padding: "8px", width: "280px" }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
const mockMessage = (id: string, title: string, additions: number, deletions: number): UserMessage => ({
|
||||
id,
|
||||
sessionID: "session-1",
|
||||
role: "user",
|
||||
time: { created: Date.now() },
|
||||
agent: "default",
|
||||
model: { providerID: "anthropic", modelID: "claude-3-5-sonnet" },
|
||||
summary: {
|
||||
title,
|
||||
diffs: [{ file: "src/file.ts", before: "", after: "", additions, deletions }],
|
||||
},
|
||||
})
|
||||
|
||||
const mockMessages = [
|
||||
mockMessage("msg-1", "Add authentication", 45, 12),
|
||||
mockMessage("msg-2", "Fix navigation bug", 8, 3),
|
||||
mockMessage("msg-3", "Update dependencies", 2, 2),
|
||||
mockMessage("msg-4", "Add dark mode support", 120, 45),
|
||||
]
|
||||
|
||||
export const Normal: Story = {
|
||||
render: () => (
|
||||
<MessageNav
|
||||
messages={mockMessages}
|
||||
current={mockMessages[1]}
|
||||
size="normal"
|
||||
onMessageSelect={(msg) => console.log("Selected:", msg.id)}
|
||||
/>
|
||||
),
|
||||
}
|
||||
|
||||
export const Compact: Story = {
|
||||
render: () => (
|
||||
<MessageNav
|
||||
messages={mockMessages}
|
||||
current={mockMessages[0]}
|
||||
size="compact"
|
||||
onMessageSelect={(msg) => console.log("Selected:", msg.id)}
|
||||
/>
|
||||
),
|
||||
}
|
||||
|
||||
export const AllVariants: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", gap: "16px" }}>
|
||||
<div>
|
||||
<div style={{ "font-size": "12px", color: "var(--text-weak)", "margin-bottom": "8px" }}>Normal</div>
|
||||
<MessageNav
|
||||
messages={mockMessages}
|
||||
current={mockMessages[0]}
|
||||
size="normal"
|
||||
onMessageSelect={(msg) => console.log("Selected:", msg.id)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ "font-size": "12px", color: "var(--text-weak)", "margin-bottom": "8px" }}>Compact</div>
|
||||
<MessageNav
|
||||
messages={mockMessages}
|
||||
current={mockMessages[1]}
|
||||
size="compact"
|
||||
onMessageSelect={(msg) => console.log("Selected:", msg.id)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Popover } from "@opencode-ai/ui/popover"
|
||||
import { Button } from "@opencode-ai/ui/button"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/Popover",
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ padding: "64px" }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<Popover title="Popover Title" trigger={<Button variant="secondary">Open Popover</Button>}>
|
||||
<div style={{ padding: "8px" }}>
|
||||
<p>This is popover content. Click outside to close.</p>
|
||||
</div>
|
||||
</Popover>
|
||||
),
|
||||
}
|
||||
|
||||
export const WithDescription: Story = {
|
||||
render: () => (
|
||||
<Popover
|
||||
title="Settings"
|
||||
description="Configure your preferences"
|
||||
trigger={<Button variant="secondary">Settings</Button>}
|
||||
>
|
||||
<div style={{ padding: "8px" }}>
|
||||
<p>Settings content goes here.</p>
|
||||
</div>
|
||||
</Popover>
|
||||
),
|
||||
}
|
||||
|
||||
export const NoTitle: Story = {
|
||||
render: () => (
|
||||
<Popover trigger={<Button variant="secondary">Open</Button>}>
|
||||
<div style={{ padding: "12px" }}>
|
||||
<p>Simple popover without title.</p>
|
||||
</div>
|
||||
</Popover>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { ProgressCircle } from "@opencode-ai/ui/progress-circle"
|
||||
|
||||
const meta: Meta<typeof ProgressCircle> = {
|
||||
title: "Components/ProgressCircle",
|
||||
component: ProgressCircle,
|
||||
argTypes: {
|
||||
percentage: { control: { type: "range", min: 0, max: 100 } },
|
||||
size: { control: { type: "number", min: 12, max: 64 } },
|
||||
strokeWidth: { control: { type: "number", min: 1, max: 8 } },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof ProgressCircle>
|
||||
|
||||
export const Quarter: Story = {
|
||||
args: { percentage: 25 },
|
||||
}
|
||||
|
||||
export const Half: Story = {
|
||||
args: { percentage: 50 },
|
||||
}
|
||||
|
||||
export const ThreeQuarters: Story = {
|
||||
args: { percentage: 75 },
|
||||
}
|
||||
|
||||
export const Complete: Story = {
|
||||
args: { percentage: 100 },
|
||||
}
|
||||
|
||||
export const Empty: Story = {
|
||||
args: { percentage: 0 },
|
||||
}
|
||||
|
||||
export const Large: Story = {
|
||||
args: { percentage: 65, size: 48, strokeWidth: 4 },
|
||||
}
|
||||
|
||||
export const AllVariants: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", gap: "16px", "align-items": "center" }}>
|
||||
<ProgressCircle percentage={0} />
|
||||
<ProgressCircle percentage={25} />
|
||||
<ProgressCircle percentage={50} />
|
||||
<ProgressCircle percentage={75} />
|
||||
<ProgressCircle percentage={100} />
|
||||
<ProgressCircle percentage={65} size={32} strokeWidth={4} />
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { RadioGroup } from "@opencode-ai/ui/radio-group"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/RadioGroup",
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
const options = ["Option A", "Option B", "Option C"]
|
||||
|
||||
export const Small: Story = {
|
||||
render: () => <RadioGroup<string> options={options} defaultValue="Option A" size="small" />,
|
||||
}
|
||||
|
||||
export const Medium: Story = {
|
||||
render: () => <RadioGroup<string> options={options} defaultValue="Option B" size="medium" />,
|
||||
}
|
||||
|
||||
export const WithCustomLabels: Story = {
|
||||
render: () => (
|
||||
<RadioGroup<string>
|
||||
options={["left", "center", "right"]}
|
||||
defaultValue="center"
|
||||
size="medium"
|
||||
label={(x) => x.charAt(0).toUpperCase() + x.slice(1)}
|
||||
/>
|
||||
),
|
||||
}
|
||||
|
||||
export const AllVariants: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", "flex-direction": "column", gap: "16px" }}>
|
||||
<RadioGroup<string> options={options} defaultValue="Option A" size="small" />
|
||||
<RadioGroup<string> options={options} defaultValue="Option B" size="medium" />
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import { createSignal } from "solid-js"
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/ResizeHandle",
|
||||
parameters: { layout: "padded" },
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
export const Horizontal: Story = {
|
||||
render: () => {
|
||||
const [width, setWidth] = createSignal(200)
|
||||
return (
|
||||
<div style={{ display: "flex", height: "200px", border: "1px solid var(--border-base)" }}>
|
||||
<div
|
||||
style={{
|
||||
width: `${width()}px`,
|
||||
"background-color": "var(--surface-base)",
|
||||
display: "flex",
|
||||
"align-items": "center",
|
||||
"justify-content": "center",
|
||||
"font-size": "12px",
|
||||
color: "var(--text-weak)",
|
||||
}}
|
||||
>
|
||||
{width()}px
|
||||
</div>
|
||||
<ResizeHandle direction="horizontal" size={width()} min={80} max={400} onResize={setWidth} />
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
"background-color": "var(--background-weak)",
|
||||
display: "flex",
|
||||
"align-items": "center",
|
||||
"justify-content": "center",
|
||||
}}
|
||||
>
|
||||
Main content
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const Vertical: Story = {
|
||||
render: () => {
|
||||
const [height, setHeight] = createSignal(120)
|
||||
return (
|
||||
<div
|
||||
style={{ display: "flex", "flex-direction": "column", height: "300px", border: "1px solid var(--border-base)" }}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
height: `${height()}px`,
|
||||
"background-color": "var(--surface-base)",
|
||||
display: "flex",
|
||||
"align-items": "center",
|
||||
"justify-content": "center",
|
||||
"font-size": "12px",
|
||||
color: "var(--text-weak)",
|
||||
}}
|
||||
>
|
||||
{height()}px
|
||||
</div>
|
||||
<ResizeHandle direction="vertical" size={height()} min={60} max={240} onResize={setHeight} />
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
"background-color": "var(--background-weak)",
|
||||
display: "flex",
|
||||
"align-items": "center",
|
||||
"justify-content": "center",
|
||||
}}
|
||||
>
|
||||
Main content
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Select } from "@opencode-ai/ui/select"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/Select",
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ width: "240px", padding: "8px" }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
const fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape"]
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<Select<string> options={fruits} placeholder="Select a fruit..." onSelect={(v) => console.log("Selected:", v)} />
|
||||
),
|
||||
}
|
||||
|
||||
export const WithCurrentValue: Story = {
|
||||
render: () => <Select<string> options={fruits} current="Banana" onSelect={(v) => console.log("Selected:", v)} />,
|
||||
}
|
||||
|
||||
export const SettingsVariant: Story = {
|
||||
render: () => (
|
||||
<Select<string>
|
||||
options={fruits}
|
||||
placeholder="Choose..."
|
||||
triggerVariant="settings"
|
||||
onSelect={(v) => console.log("Selected:", v)}
|
||||
/>
|
||||
),
|
||||
}
|
||||
|
||||
export const WithGroupBy: Story = {
|
||||
render: () => {
|
||||
type Item = { name: string; category: string }
|
||||
const items: Item[] = [
|
||||
{ name: "Apple", category: "Fruit" },
|
||||
{ name: "Banana", category: "Fruit" },
|
||||
{ name: "Carrot", category: "Vegetable" },
|
||||
{ name: "Daikon", category: "Vegetable" },
|
||||
{ name: "Elderberry", category: "Fruit" },
|
||||
]
|
||||
return (
|
||||
<Select<Item>
|
||||
options={items}
|
||||
placeholder="Pick one..."
|
||||
value={(x) => x.name}
|
||||
label={(x) => x.name}
|
||||
groupBy={(x) => x.category}
|
||||
onSelect={(v) => console.log("Selected:", v)}
|
||||
/>
|
||||
)
|
||||
},
|
||||
}
|
||||
|
||||
export const Disabled: Story = {
|
||||
render: () => (
|
||||
<Select<string> options={fruits} placeholder="Disabled" disabled onSelect={(v) => console.log("Selected:", v)} />
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Spinner } from "@opencode-ai/ui/spinner"
|
||||
|
||||
const meta: Meta<typeof Spinner> = {
|
||||
title: "Components/Spinner",
|
||||
component: Spinner,
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof Spinner>
|
||||
|
||||
export const Default: Story = {}
|
||||
|
||||
export const Small: Story = {
|
||||
render: () => <Spinner style={{ width: "16px", height: "16px" }} />,
|
||||
}
|
||||
|
||||
export const Large: Story = {
|
||||
render: () => <Spinner style={{ width: "48px", height: "48px" }} />,
|
||||
}
|
||||
|
||||
export const Colored: Story = {
|
||||
render: () => <Spinner style={{ width: "24px", height: "24px", color: "var(--text-interactive-base)" }} />,
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Accordion } from "@opencode-ai/ui/accordion"
|
||||
import { StickyAccordionHeader } from "@opencode-ai/ui/sticky-accordion-header"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/StickyAccordionHeader",
|
||||
parameters: { layout: "padded" },
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<Accordion defaultValue={["item-1"]} collapsible>
|
||||
<Accordion.Item value="item-1">
|
||||
<StickyAccordionHeader>
|
||||
<Accordion.Trigger>Section 1</Accordion.Trigger>
|
||||
</StickyAccordionHeader>
|
||||
<Accordion.Content>
|
||||
<div style={{ padding: "8px" }}>Content for section 1</div>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item value="item-2">
|
||||
<StickyAccordionHeader>
|
||||
<Accordion.Trigger>Section 2</Accordion.Trigger>
|
||||
</StickyAccordionHeader>
|
||||
<Accordion.Content>
|
||||
<div style={{ padding: "8px" }}>Content for section 2</div>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
),
|
||||
}
|
||||
|
||||
export const InScrollContainer: Story = {
|
||||
render: () => (
|
||||
<div style={{ height: "200px", overflow: "auto", border: "1px solid var(--border-base)" }}>
|
||||
<Accordion defaultValue={["item-1"]} collapsible>
|
||||
<Accordion.Item value="item-1">
|
||||
<StickyAccordionHeader>
|
||||
<Accordion.Trigger>Sticky Header 1</Accordion.Trigger>
|
||||
</StickyAccordionHeader>
|
||||
<Accordion.Content>
|
||||
<div style={{ padding: "8px" }}>
|
||||
{Array.from({ length: 10 }, (_, i) => (
|
||||
<p style={{ margin: "4px 0" }}>Line {i + 1} of content</p>
|
||||
))}
|
||||
</div>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
<Accordion.Item value="item-2">
|
||||
<StickyAccordionHeader>
|
||||
<Accordion.Trigger>Sticky Header 2</Accordion.Trigger>
|
||||
</StickyAccordionHeader>
|
||||
<Accordion.Content>
|
||||
<div style={{ padding: "8px" }}>
|
||||
{Array.from({ length: 10 }, (_, i) => (
|
||||
<p style={{ margin: "4px 0" }}>Line {i + 1} of content</p>
|
||||
))}
|
||||
</div>
|
||||
</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Switch } from "@opencode-ai/ui/switch"
|
||||
|
||||
const meta: Meta<typeof Switch> = {
|
||||
title: "Components/Switch",
|
||||
component: Switch,
|
||||
argTypes: {
|
||||
disabled: { control: "boolean" },
|
||||
checked: { control: "boolean" },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof Switch>
|
||||
|
||||
export const Off: Story = {
|
||||
args: { children: "Feature disabled" },
|
||||
}
|
||||
|
||||
export const On: Story = {
|
||||
args: { children: "Feature enabled", checked: true },
|
||||
}
|
||||
|
||||
export const Disabled: Story = {
|
||||
args: { children: "Disabled switch", disabled: true },
|
||||
}
|
||||
|
||||
export const DisabledOn: Story = {
|
||||
args: { children: "Disabled on", disabled: true, checked: true },
|
||||
}
|
||||
|
||||
export const WithDescription: Story = {
|
||||
args: { children: "Auto-save", description: "Automatically save changes as you type" },
|
||||
}
|
||||
|
||||
export const AllVariants: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", "flex-direction": "column", gap: "12px" }}>
|
||||
<Switch>Off</Switch>
|
||||
<Switch checked>On</Switch>
|
||||
<Switch disabled>Disabled Off</Switch>
|
||||
<Switch disabled checked>
|
||||
Disabled On
|
||||
</Switch>
|
||||
<Switch description="Save changes automatically">Auto-save</Switch>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Tabs } from "@opencode-ai/ui/tabs"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/Tabs",
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ width: "400px" }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
function TabsDemo(props: {
|
||||
variant?: "normal" | "alt" | "pill" | "settings"
|
||||
orientation?: "horizontal" | "vertical"
|
||||
}) {
|
||||
return (
|
||||
<Tabs defaultValue="tab1" variant={props.variant} orientation={props.orientation}>
|
||||
<Tabs.List>
|
||||
<Tabs.Trigger value="tab1">Files</Tabs.Trigger>
|
||||
<Tabs.Trigger value="tab2">Explorer</Tabs.Trigger>
|
||||
<Tabs.Trigger value="tab3">Search</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
<Tabs.Content value="tab1">
|
||||
<div style={{ padding: "16px" }}>Files content</div>
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="tab2">
|
||||
<div style={{ padding: "16px" }}>Explorer content</div>
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="tab3">
|
||||
<div style={{ padding: "16px" }}>Search content</div>
|
||||
</Tabs.Content>
|
||||
</Tabs>
|
||||
)
|
||||
}
|
||||
|
||||
export const Normal: Story = {
|
||||
render: () => <TabsDemo variant="normal" />,
|
||||
}
|
||||
|
||||
export const Alt: Story = {
|
||||
render: () => <TabsDemo variant="alt" />,
|
||||
}
|
||||
|
||||
export const Pill: Story = {
|
||||
render: () => <TabsDemo variant="pill" />,
|
||||
}
|
||||
|
||||
export const Settings: Story = {
|
||||
render: () => <TabsDemo variant="settings" />,
|
||||
}
|
||||
|
||||
export const Vertical: Story = {
|
||||
render: () => (
|
||||
<div style={{ height: "200px" }}>
|
||||
<TabsDemo variant="normal" orientation="vertical" />
|
||||
</div>
|
||||
),
|
||||
}
|
||||
|
||||
export const AllVariants: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", "flex-direction": "column", gap: "24px" }}>
|
||||
<div>
|
||||
<div style={{ "font-size": "12px", "margin-bottom": "8px", color: "var(--text-weak)" }}>Normal</div>
|
||||
<TabsDemo variant="normal" />
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ "font-size": "12px", "margin-bottom": "8px", color: "var(--text-weak)" }}>Alt</div>
|
||||
<TabsDemo variant="alt" />
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ "font-size": "12px", "margin-bottom": "8px", color: "var(--text-weak)" }}>Pill</div>
|
||||
<TabsDemo variant="pill" />
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ "font-size": "12px", "margin-bottom": "8px", color: "var(--text-weak)" }}>Settings</div>
|
||||
<TabsDemo variant="settings" />
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
parameters: { layout: "padded" },
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Tag } from "@opencode-ai/ui/tag"
|
||||
|
||||
const meta: Meta<typeof Tag> = {
|
||||
title: "Components/Tag",
|
||||
component: Tag,
|
||||
argTypes: {
|
||||
size: { control: "select", options: ["normal", "large"] },
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof Tag>
|
||||
|
||||
export const Normal: Story = {
|
||||
args: { size: "normal", children: "Tag" },
|
||||
}
|
||||
|
||||
export const Large: Story = {
|
||||
args: { size: "large", children: "Tag Large" },
|
||||
}
|
||||
|
||||
export const AllVariants: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", gap: "8px", "align-items": "center" }}>
|
||||
<Tag size="normal">Normal</Tag>
|
||||
<Tag size="large">Large</Tag>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { TextField } from "@opencode-ai/ui/text-field"
|
||||
|
||||
const meta: Meta<typeof TextField> = {
|
||||
title: "Components/TextField",
|
||||
component: TextField,
|
||||
argTypes: {
|
||||
variant: { control: "select", options: ["normal", "ghost"] },
|
||||
disabled: { control: "boolean" },
|
||||
multiline: { control: "boolean" },
|
||||
},
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<div style={{ width: "320px" }}>
|
||||
<Story />
|
||||
</div>
|
||||
),
|
||||
],
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj<typeof TextField>
|
||||
|
||||
export const Normal: Story = {
|
||||
args: { variant: "normal", placeholder: "Enter text..." },
|
||||
}
|
||||
|
||||
export const Ghost: Story = {
|
||||
args: { variant: "ghost", placeholder: "Ghost input..." },
|
||||
}
|
||||
|
||||
export const WithLabel: Story = {
|
||||
args: { label: "Full Name", placeholder: "John Doe" },
|
||||
}
|
||||
|
||||
export const WithDescription: Story = {
|
||||
args: { label: "API Key", description: "Your secret API key", placeholder: "sk-..." },
|
||||
}
|
||||
|
||||
export const WithError: Story = {
|
||||
args: {
|
||||
label: "Email",
|
||||
placeholder: "user@example.com",
|
||||
validationState: "invalid",
|
||||
error: "Invalid email address",
|
||||
},
|
||||
}
|
||||
|
||||
export const Multiline: Story = {
|
||||
args: { label: "Message", multiline: true, placeholder: "Enter a longer message..." },
|
||||
}
|
||||
|
||||
export const Copyable: Story = {
|
||||
args: { label: "API Token", value: "tok_abc123xyz456", copyable: true, readOnly: true },
|
||||
}
|
||||
|
||||
export const CopyableLink: Story = {
|
||||
args: {
|
||||
label: "Share URL",
|
||||
value: "https://example.com/share/abc123",
|
||||
copyable: true,
|
||||
copyKind: "link",
|
||||
readOnly: true,
|
||||
},
|
||||
}
|
||||
|
||||
export const Disabled: Story = {
|
||||
args: { label: "Disabled Field", value: "Can't edit this", disabled: true },
|
||||
}
|
||||
|
||||
export const AllVariants: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", "flex-direction": "column", gap: "16px", width: "320px" }}>
|
||||
<TextField variant="normal" placeholder="Normal input" />
|
||||
<TextField variant="ghost" placeholder="Ghost input" />
|
||||
<TextField label="With Label" placeholder="Enter value" />
|
||||
<TextField label="With Error" validationState="invalid" error="Required field" placeholder="Missing" />
|
||||
<TextField label="Multiline" multiline placeholder="Type here..." />
|
||||
<TextField label="Copyable" value="copy-me-value" copyable readOnly />
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import { createEffect, type JSX } from "solid-js"
|
||||
import { DEFAULT_THEMES } from "../theme/default-themes"
|
||||
import { resolveThemeVariant, themeToCss } from "@opencode-ai/ui/theme/resolve"
|
||||
import { VSCODE_THEMES } from "./vscode-themes"
|
||||
|
||||
const STYLE_ID = "storybook-kilo-theme"
|
||||
const VSCODE_STYLE_ID = "storybook-vscode-theme"
|
||||
|
||||
function getOrCreateStyle(id: string): HTMLStyleElement {
|
||||
const existing = document.getElementById(id) as HTMLStyleElement | null
|
||||
if (existing) return existing
|
||||
const el = document.createElement("style")
|
||||
el.id = id
|
||||
document.head.appendChild(el)
|
||||
return el
|
||||
}
|
||||
|
||||
export function applyKiloTheme(themeId: string, colorScheme: "light" | "dark") {
|
||||
const theme = DEFAULT_THEMES[themeId]
|
||||
if (!theme) return
|
||||
|
||||
const isDark = colorScheme === "dark"
|
||||
const variant = isDark ? theme.dark : theme.light
|
||||
const tokens = resolveThemeVariant(variant, isDark)
|
||||
const css = themeToCss(tokens)
|
||||
|
||||
const fullCss = `:root {
|
||||
color-scheme: ${colorScheme};
|
||||
--text-mix-blend-mode: ${isDark ? "plus-lighter" : "multiply"};
|
||||
${css}
|
||||
}`
|
||||
getOrCreateStyle(STYLE_ID).textContent = fullCss
|
||||
document.documentElement.dataset.theme = themeId
|
||||
document.documentElement.dataset.colorScheme = colorScheme
|
||||
}
|
||||
|
||||
export function applyVscodeTheme(vscodeThemeId: string): "light" | "dark" {
|
||||
const theme = VSCODE_THEMES[vscodeThemeId]
|
||||
if (!theme) return "dark"
|
||||
const vars = Object.entries(theme.vars)
|
||||
.map(([k, v]) => ` ${k}: ${v};`)
|
||||
.join("\n")
|
||||
getOrCreateStyle(VSCODE_STYLE_ID).textContent = `:root {\n${vars}\n}`
|
||||
return theme.colorScheme
|
||||
}
|
||||
|
||||
export function clearVscodeTheme() {
|
||||
const el = document.getElementById(VSCODE_STYLE_ID)
|
||||
if (el) el.textContent = ""
|
||||
}
|
||||
|
||||
export interface ThemeDecoratorProps {
|
||||
Story: () => JSX.Element
|
||||
theme: string
|
||||
colorScheme: "light" | "dark"
|
||||
}
|
||||
|
||||
export function ThemeDecorator(props: ThemeDecoratorProps): JSX.Element {
|
||||
createEffect(() => {
|
||||
applyKiloTheme(props.theme, props.colorScheme)
|
||||
})
|
||||
return <props.Story />
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Toast, showToast } from "@opencode-ai/ui/toast"
|
||||
import { Button } from "@opencode-ai/ui/button"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/Toast",
|
||||
decorators: [
|
||||
(Story) => (
|
||||
<>
|
||||
<Toast.Region />
|
||||
<Story />
|
||||
</>
|
||||
),
|
||||
],
|
||||
parameters: { layout: "centered" },
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<Button variant="secondary" onClick={() => showToast({ description: "This is a default toast" })}>
|
||||
Show Toast
|
||||
</Button>
|
||||
),
|
||||
}
|
||||
|
||||
export const Success: Story = {
|
||||
render: () => (
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() =>
|
||||
showToast({ title: "Success!", description: "Operation completed successfully", variant: "success" })
|
||||
}
|
||||
>
|
||||
Show Success Toast
|
||||
</Button>
|
||||
),
|
||||
}
|
||||
|
||||
export const Error: Story = {
|
||||
render: () => (
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() =>
|
||||
showToast({ title: "Error", description: "Something went wrong. Please try again.", variant: "error" })
|
||||
}
|
||||
>
|
||||
Show Error Toast
|
||||
</Button>
|
||||
),
|
||||
}
|
||||
|
||||
export const Loading: Story = {
|
||||
render: () => (
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => showToast({ description: "Loading...", variant: "loading", persistent: true })}
|
||||
>
|
||||
Show Loading Toast
|
||||
</Button>
|
||||
),
|
||||
}
|
||||
|
||||
export const WithActions: Story = {
|
||||
render: () => (
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() =>
|
||||
showToast({
|
||||
title: "File deleted",
|
||||
description: "report.pdf has been moved to trash",
|
||||
actions: [
|
||||
{ label: "Undo", onClick: () => console.log("Undo!") },
|
||||
{ label: "Dismiss", onClick: "dismiss" },
|
||||
],
|
||||
})
|
||||
}
|
||||
>
|
||||
Show Toast with Actions
|
||||
</Button>
|
||||
),
|
||||
}
|
||||
|
||||
export const WithIcon: Story = {
|
||||
render: () => (
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => showToast({ description: "Session saved", variant: "success", icon: "check" })}
|
||||
>
|
||||
Show Toast with Icon
|
||||
</Button>
|
||||
),
|
||||
}
|
||||
|
||||
export const AllVariants: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", gap: "8px", "flex-wrap": "wrap" }}>
|
||||
<Button variant="secondary" onClick={() => showToast({ description: "Default toast" })}>
|
||||
Default
|
||||
</Button>
|
||||
<Button variant="secondary" onClick={() => showToast({ description: "Success!", variant: "success" })}>
|
||||
Success
|
||||
</Button>
|
||||
<Button variant="secondary" onClick={() => showToast({ description: "Error occurred", variant: "error" })}>
|
||||
Error
|
||||
</Button>
|
||||
<Button variant="secondary" onClick={() => showToast({ description: "Loading...", variant: "loading" })}>
|
||||
Loading
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
|
||||
import { Button } from "@opencode-ai/ui/button"
|
||||
import { IconButton } from "@opencode-ai/ui/icon-button"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/Tooltip",
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<Tooltip value="This is a tooltip">
|
||||
<Button variant="secondary">Hover me</Button>
|
||||
</Tooltip>
|
||||
),
|
||||
}
|
||||
|
||||
export const ForceOpen: Story = {
|
||||
render: () => (
|
||||
<Tooltip value="Always visible tooltip" forceOpen>
|
||||
<Button variant="secondary">Force open</Button>
|
||||
</Tooltip>
|
||||
),
|
||||
}
|
||||
|
||||
export const WithKeybind: Story = {
|
||||
render: () => (
|
||||
<TooltipKeybind title="Open Command Palette" keybind="⌘K">
|
||||
<IconButton variant="ghost" icon="magnifying-glass-menu" />
|
||||
</TooltipKeybind>
|
||||
),
|
||||
}
|
||||
|
||||
export const Placement: Story = {
|
||||
render: () => (
|
||||
<div style={{ display: "flex", gap: "16px", padding: "64px", "flex-wrap": "wrap" }}>
|
||||
<Tooltip value="Top tooltip" placement="top" forceOpen>
|
||||
<Button variant="secondary">Top</Button>
|
||||
</Tooltip>
|
||||
<Tooltip value="Bottom tooltip" placement="bottom" forceOpen>
|
||||
<Button variant="secondary">Bottom</Button>
|
||||
</Tooltip>
|
||||
<Tooltip value="Left tooltip" placement="left" forceOpen>
|
||||
<Button variant="secondary">Left</Button>
|
||||
</Tooltip>
|
||||
<Tooltip value="Right tooltip" placement="right" forceOpen>
|
||||
<Button variant="secondary">Right</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
/** @jsxImportSource solid-js */
|
||||
import type { Meta, StoryObj } from "storybook-solidjs-vite"
|
||||
import { Typewriter } from "@opencode-ai/ui/typewriter"
|
||||
|
||||
const meta: Meta = {
|
||||
title: "Components/Typewriter",
|
||||
parameters: { layout: "centered" },
|
||||
}
|
||||
|
||||
export default meta
|
||||
type Story = StoryObj
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => <Typewriter text="Hello, world! This is a typewriter effect." />,
|
||||
}
|
||||
|
||||
export const Short: Story = {
|
||||
render: () => <Typewriter text="Hi!" />,
|
||||
}
|
||||
|
||||
export const Long: Story = {
|
||||
render: () => (
|
||||
<Typewriter text="The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs." />
|
||||
),
|
||||
}
|
||||
|
||||
export const AsHeading: Story = {
|
||||
render: () => <Typewriter as="h2" text="Welcome to Kilo" />,
|
||||
}
|
||||
|
||||
export const WithClass: Story = {
|
||||
render: () => <Typewriter text="Styled text" class="text-lg font-bold" />,
|
||||
}
|
||||
@@ -0,0 +1,1032 @@
|
||||
export type VscodeThemeVars = {
|
||||
colorScheme: "light" | "dark"
|
||||
vars: Record<string, string>
|
||||
}
|
||||
|
||||
// VS Code default built-in themes with all --vscode-* variables used by vscode-bridge.css and globals.css
|
||||
// Values sourced from microsoft/vscode extensions/theme-defaults/themes/
|
||||
export const VSCODE_THEMES: Record<string, VscodeThemeVars> = {
|
||||
"dark-modern": {
|
||||
colorScheme: "dark",
|
||||
vars: {
|
||||
"--vscode-font-family":
|
||||
"-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif",
|
||||
"--vscode-font-size": "13px",
|
||||
"--vscode-font-weight": "normal",
|
||||
"--vscode-editor-background": "#1F1F1F",
|
||||
"--vscode-editor-foreground": "#CCCCCC",
|
||||
"--vscode-editor-inactiveSelectionBackground": "#3A3D41",
|
||||
"--vscode-foreground": "#CCCCCC",
|
||||
"--vscode-descriptionForeground": "#9D9D9D",
|
||||
"--vscode-disabledForeground": "#6B6B6B",
|
||||
"--vscode-icon-foreground": "#CCCCCC",
|
||||
"--vscode-focusBorder": "#0078D4",
|
||||
"--vscode-textLink-foreground": "#4daafc",
|
||||
"--vscode-sideBar-background": "#181818",
|
||||
"--vscode-editorGroupHeader-tabsBackground": "#181818",
|
||||
"--vscode-editorGroup-border": "#FFFFFF17",
|
||||
"--vscode-editorWidget-background": "#202020",
|
||||
"--vscode-editorWidget-border": "#313131",
|
||||
"--vscode-editorStickyScrollHover-background": "#2A2D2E",
|
||||
"--vscode-editorMarkerNavigationError-headerBackground": "#B02020",
|
||||
"--vscode-editorMarkerNavigationWarning-headerBackground": "#915413",
|
||||
"--vscode-editorMarkerNavigationInfo-headerBackground": "#1857A8",
|
||||
"--vscode-input-background": "#313131",
|
||||
"--vscode-list-activeSelectionBackground": "#0078D4",
|
||||
"--vscode-list-activeSelectionForeground": "#FFFFFF",
|
||||
"--vscode-list-hoverBackground": "#2A2D2E",
|
||||
"--vscode-list-inactiveSelectionBackground": "#37373D",
|
||||
"--vscode-menu-background": "#1F1F1F",
|
||||
"--vscode-panel-border": "#2B2B2B",
|
||||
"--vscode-widget-border": "#313131",
|
||||
"--vscode-button-background": "#0078D4",
|
||||
"--vscode-button-foreground": "#FFFFFF",
|
||||
"--vscode-button-hoverBackground": "#026EC1",
|
||||
"--vscode-button-secondaryBackground": "#00000000",
|
||||
"--vscode-button-secondaryHoverBackground": "#2B2B2B",
|
||||
"--vscode-toolbar-hoverBackground": "#5A5D5E50",
|
||||
"--vscode-toolbar-activeBackground": "#BFBFBF1F",
|
||||
"--vscode-diffEditor-insertedLineBackground": "#28413B",
|
||||
"--vscode-diffEditor-insertedTextBackground": "#2EA04326",
|
||||
"--vscode-diffEditor-removedLineBackground": "#4B1818",
|
||||
"--vscode-diffEditor-removedTextBackground": "#F8514926",
|
||||
"--vscode-diffEditor-unchangedCodeBackground": "#3A3D4140",
|
||||
"--vscode-gitDecoration-addedResourceForeground": "#2EA043",
|
||||
"--vscode-gitDecoration-deletedResourceForeground": "#F85149",
|
||||
"--vscode-gitDecoration-modifiedResourceForeground": "#E2C08D",
|
||||
"--vscode-charts-red": "#F85149",
|
||||
"--vscode-charts-blue": "#0078D4",
|
||||
"--vscode-charts-yellow": "#CCA700",
|
||||
"--vscode-charts-green": "#2EA043",
|
||||
"--vscode-charts-orange": "#D18616",
|
||||
"--vscode-charts-purple": "#B180D7",
|
||||
"--vscode-debugTokenExpression-name": "#9CDCFE",
|
||||
"--vscode-debugTokenExpression-type": "#4EC9B0",
|
||||
"--vscode-debugTokenExpression-number": "#B5CEA8",
|
||||
"--vscode-debugTokenExpression-string": "#CE9178",
|
||||
"--vscode-scrollbarSlider-background": "#4E4E4E99",
|
||||
"--vscode-scrollbarSlider-hoverBackground": "#646464B3",
|
||||
"--vscode-scrollbarSlider-activeBackground": "#BFBFBF66",
|
||||
},
|
||||
},
|
||||
|
||||
"dark-plus": {
|
||||
colorScheme: "dark",
|
||||
vars: {
|
||||
"--vscode-font-family":
|
||||
"-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif",
|
||||
"--vscode-font-size": "13px",
|
||||
"--vscode-font-weight": "normal",
|
||||
"--vscode-editor-background": "#1E1E1E",
|
||||
"--vscode-editor-foreground": "#D4D4D4",
|
||||
"--vscode-editor-inactiveSelectionBackground": "#3A3D41",
|
||||
"--vscode-foreground": "#CCCCCC",
|
||||
"--vscode-descriptionForeground": "#717171",
|
||||
"--vscode-disabledForeground": "#6B6B6B",
|
||||
"--vscode-icon-foreground": "#C5C5C5",
|
||||
"--vscode-focusBorder": "#007FD4",
|
||||
"--vscode-textLink-foreground": "#3794FF",
|
||||
"--vscode-sideBar-background": "#252526",
|
||||
"--vscode-editorGroupHeader-tabsBackground": "#2D2D2D",
|
||||
"--vscode-editorGroup-border": "#444444",
|
||||
"--vscode-editorWidget-background": "#252526",
|
||||
"--vscode-editorWidget-border": "#454545",
|
||||
"--vscode-editorStickyScrollHover-background": "#2A2D2E",
|
||||
"--vscode-editorMarkerNavigationError-headerBackground": "#B02020",
|
||||
"--vscode-editorMarkerNavigationWarning-headerBackground": "#915413",
|
||||
"--vscode-editorMarkerNavigationInfo-headerBackground": "#1857A8",
|
||||
"--vscode-input-background": "#3C3C3C",
|
||||
"--vscode-list-activeSelectionBackground": "#094771",
|
||||
"--vscode-list-activeSelectionForeground": "#FFFFFF",
|
||||
"--vscode-list-hoverBackground": "#2A2D2E",
|
||||
"--vscode-list-inactiveSelectionBackground": "#37373D",
|
||||
"--vscode-menu-background": "#252526",
|
||||
"--vscode-panel-border": "#808080",
|
||||
"--vscode-widget-border": "#454545",
|
||||
"--vscode-button-background": "#0E639C",
|
||||
"--vscode-button-foreground": "#FFFFFF",
|
||||
"--vscode-button-hoverBackground": "#1177BB",
|
||||
"--vscode-button-secondaryBackground": "#3A3D41",
|
||||
"--vscode-button-secondaryHoverBackground": "#45494E",
|
||||
"--vscode-toolbar-hoverBackground": "#5A5D5E50",
|
||||
"--vscode-toolbar-activeBackground": "#BFBFBF1F",
|
||||
"--vscode-diffEditor-insertedLineBackground": "#28413B",
|
||||
"--vscode-diffEditor-insertedTextBackground": "#2EA04326",
|
||||
"--vscode-diffEditor-removedLineBackground": "#4B1818",
|
||||
"--vscode-diffEditor-removedTextBackground": "#F8514926",
|
||||
"--vscode-diffEditor-unchangedCodeBackground": "#3A3D4140",
|
||||
"--vscode-gitDecoration-addedResourceForeground": "#81B88B",
|
||||
"--vscode-gitDecoration-deletedResourceForeground": "#C74E39",
|
||||
"--vscode-gitDecoration-modifiedResourceForeground": "#E2C08D",
|
||||
"--vscode-charts-red": "#F48771",
|
||||
"--vscode-charts-blue": "#75BEFF",
|
||||
"--vscode-charts-yellow": "#CCA700",
|
||||
"--vscode-charts-green": "#89D185",
|
||||
"--vscode-charts-orange": "#D18616",
|
||||
"--vscode-charts-purple": "#B180D7",
|
||||
"--vscode-debugTokenExpression-name": "#9CDCFE",
|
||||
"--vscode-debugTokenExpression-type": "#4EC9B0",
|
||||
"--vscode-debugTokenExpression-number": "#B5CEA8",
|
||||
"--vscode-debugTokenExpression-string": "#CE9178",
|
||||
"--vscode-scrollbarSlider-background": "#4E4E4E99",
|
||||
"--vscode-scrollbarSlider-hoverBackground": "#646464B3",
|
||||
"--vscode-scrollbarSlider-activeBackground": "#BFBFBF66",
|
||||
},
|
||||
},
|
||||
|
||||
"light-modern": {
|
||||
colorScheme: "light",
|
||||
vars: {
|
||||
"--vscode-font-family":
|
||||
"-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif",
|
||||
"--vscode-font-size": "13px",
|
||||
"--vscode-font-weight": "normal",
|
||||
"--vscode-editor-background": "#FFFFFF",
|
||||
"--vscode-editor-foreground": "#3B3B3B",
|
||||
"--vscode-editor-inactiveSelectionBackground": "#E5EBF1",
|
||||
"--vscode-foreground": "#3B3B3B",
|
||||
"--vscode-descriptionForeground": "#3B3B3B",
|
||||
"--vscode-disabledForeground": "#8E8E8E",
|
||||
"--vscode-icon-foreground": "#3B3B3B",
|
||||
"--vscode-focusBorder": "#005FB8",
|
||||
"--vscode-textLink-foreground": "#005FB8",
|
||||
"--vscode-sideBar-background": "#F8F8F8",
|
||||
"--vscode-editorGroupHeader-tabsBackground": "#F8F8F8",
|
||||
"--vscode-editorGroup-border": "#E5E5E5",
|
||||
"--vscode-editorWidget-background": "#F8F8F8",
|
||||
"--vscode-editorWidget-border": "#C8C8C8",
|
||||
"--vscode-editorStickyScrollHover-background": "#F0F0F0",
|
||||
"--vscode-editorMarkerNavigationError-headerBackground": "#E51400",
|
||||
"--vscode-editorMarkerNavigationWarning-headerBackground": "#BF8803",
|
||||
"--vscode-editorMarkerNavigationInfo-headerBackground": "#1a85ff",
|
||||
"--vscode-input-background": "#FFFFFF",
|
||||
"--vscode-list-activeSelectionBackground": "#E8E8E8",
|
||||
"--vscode-list-activeSelectionForeground": "#000000",
|
||||
"--vscode-list-hoverBackground": "#F2F2F2",
|
||||
"--vscode-list-inactiveSelectionBackground": "#E4E6F1",
|
||||
"--vscode-menu-background": "#FFFFFF",
|
||||
"--vscode-panel-border": "#E5E5E5",
|
||||
"--vscode-widget-border": "#E5E5E5",
|
||||
"--vscode-button-background": "#005FB8",
|
||||
"--vscode-button-foreground": "#FFFFFF",
|
||||
"--vscode-button-hoverBackground": "#0258A8",
|
||||
"--vscode-button-secondaryBackground": "#E5E5E5",
|
||||
"--vscode-button-secondaryHoverBackground": "#CCCCCC",
|
||||
"--vscode-toolbar-hoverBackground": "#B8B8B850",
|
||||
"--vscode-toolbar-activeBackground": "#A5A5A550",
|
||||
"--vscode-diffEditor-insertedLineBackground": "#DCFEDC",
|
||||
"--vscode-diffEditor-insertedTextBackground": "#2EA04326",
|
||||
"--vscode-diffEditor-removedLineBackground": "#FFE4E4",
|
||||
"--vscode-diffEditor-removedTextBackground": "#F8514926",
|
||||
"--vscode-diffEditor-unchangedCodeBackground": "#F5F5F5",
|
||||
"--vscode-gitDecoration-addedResourceForeground": "#587C0C",
|
||||
"--vscode-gitDecoration-deletedResourceForeground": "#AD0707",
|
||||
"--vscode-gitDecoration-modifiedResourceForeground": "#895503",
|
||||
"--vscode-charts-red": "#E51400",
|
||||
"--vscode-charts-blue": "#1a85ff",
|
||||
"--vscode-charts-yellow": "#BF8803",
|
||||
"--vscode-charts-green": "#587C0C",
|
||||
"--vscode-charts-orange": "#D18616",
|
||||
"--vscode-charts-purple": "#652D90",
|
||||
"--vscode-debugTokenExpression-name": "#001080",
|
||||
"--vscode-debugTokenExpression-type": "#267F99",
|
||||
"--vscode-debugTokenExpression-number": "#098658",
|
||||
"--vscode-debugTokenExpression-string": "#A31515",
|
||||
"--vscode-scrollbarSlider-background": "#64646466",
|
||||
"--vscode-scrollbarSlider-hoverBackground": "#646464B3",
|
||||
"--vscode-scrollbarSlider-activeBackground": "#00000099",
|
||||
},
|
||||
},
|
||||
|
||||
"light-plus": {
|
||||
colorScheme: "light",
|
||||
vars: {
|
||||
"--vscode-font-family":
|
||||
"-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif",
|
||||
"--vscode-font-size": "13px",
|
||||
"--vscode-font-weight": "normal",
|
||||
"--vscode-editor-background": "#FFFFFF",
|
||||
"--vscode-editor-foreground": "#000000",
|
||||
"--vscode-editor-inactiveSelectionBackground": "#E5EBF1",
|
||||
"--vscode-foreground": "#616161",
|
||||
"--vscode-descriptionForeground": "#717171",
|
||||
"--vscode-disabledForeground": "#ABABAB",
|
||||
"--vscode-icon-foreground": "#424242",
|
||||
"--vscode-focusBorder": "#0090F1",
|
||||
"--vscode-textLink-foreground": "#006AB1",
|
||||
"--vscode-sideBar-background": "#F3F3F3",
|
||||
"--vscode-editorGroupHeader-tabsBackground": "#ECECEC",
|
||||
"--vscode-editorGroup-border": "#E7E7E7",
|
||||
"--vscode-editorWidget-background": "#F3F3F3",
|
||||
"--vscode-editorWidget-border": "#C8C8C8",
|
||||
"--vscode-editorStickyScrollHover-background": "#F0F0F0",
|
||||
"--vscode-editorMarkerNavigationError-headerBackground": "#E51400",
|
||||
"--vscode-editorMarkerNavigationWarning-headerBackground": "#BF8803",
|
||||
"--vscode-editorMarkerNavigationInfo-headerBackground": "#1a85ff",
|
||||
"--vscode-input-background": "#FFFFFF",
|
||||
"--vscode-list-activeSelectionBackground": "#0060C0",
|
||||
"--vscode-list-activeSelectionForeground": "#FFFFFF",
|
||||
"--vscode-list-hoverBackground": "#E8E8E8",
|
||||
"--vscode-list-inactiveSelectionBackground": "#E4E6F1",
|
||||
"--vscode-menu-background": "#FFFFFF",
|
||||
"--vscode-panel-border": "#E7E7E7",
|
||||
"--vscode-widget-border": "#C8C8C8",
|
||||
"--vscode-button-background": "#007ACC",
|
||||
"--vscode-button-foreground": "#FFFFFF",
|
||||
"--vscode-button-hoverBackground": "#0062A3",
|
||||
"--vscode-button-secondaryBackground": "#5F6A79",
|
||||
"--vscode-button-secondaryHoverBackground": "#4C5561",
|
||||
"--vscode-toolbar-hoverBackground": "#B8B8B850",
|
||||
"--vscode-toolbar-activeBackground": "#A5A5A550",
|
||||
"--vscode-diffEditor-insertedLineBackground": "#DCFEDC",
|
||||
"--vscode-diffEditor-insertedTextBackground": "#2EA04326",
|
||||
"--vscode-diffEditor-removedLineBackground": "#FFE4E4",
|
||||
"--vscode-diffEditor-removedTextBackground": "#F8514926",
|
||||
"--vscode-diffEditor-unchangedCodeBackground": "#F5F5F5",
|
||||
"--vscode-gitDecoration-addedResourceForeground": "#587C0C",
|
||||
"--vscode-gitDecoration-deletedResourceForeground": "#AD0707",
|
||||
"--vscode-gitDecoration-modifiedResourceForeground": "#895503",
|
||||
"--vscode-charts-red": "#E51400",
|
||||
"--vscode-charts-blue": "#1a85ff",
|
||||
"--vscode-charts-yellow": "#BF8803",
|
||||
"--vscode-charts-green": "#587C0C",
|
||||
"--vscode-charts-orange": "#D18616",
|
||||
"--vscode-charts-purple": "#652D90",
|
||||
"--vscode-debugTokenExpression-name": "#001080",
|
||||
"--vscode-debugTokenExpression-type": "#267F99",
|
||||
"--vscode-debugTokenExpression-number": "#098658",
|
||||
"--vscode-debugTokenExpression-string": "#A31515",
|
||||
"--vscode-scrollbarSlider-background": "#64646466",
|
||||
"--vscode-scrollbarSlider-hoverBackground": "#646464B3",
|
||||
"--vscode-scrollbarSlider-activeBackground": "#00000099",
|
||||
},
|
||||
},
|
||||
|
||||
"dark-vs": {
|
||||
colorScheme: "dark",
|
||||
vars: {
|
||||
"--vscode-font-family":
|
||||
"-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif",
|
||||
"--vscode-font-size": "13px",
|
||||
"--vscode-font-weight": "normal",
|
||||
"--vscode-editor-background": "#1E1E1E",
|
||||
"--vscode-editor-foreground": "#D4D4D4",
|
||||
"--vscode-editor-inactiveSelectionBackground": "#3A3D41",
|
||||
"--vscode-foreground": "#CCCCCC",
|
||||
"--vscode-descriptionForeground": "#717171",
|
||||
"--vscode-disabledForeground": "#6B6B6B",
|
||||
"--vscode-icon-foreground": "#C5C5C5",
|
||||
"--vscode-focusBorder": "#007FD4",
|
||||
"--vscode-textLink-foreground": "#3794FF",
|
||||
"--vscode-sideBar-background": "#252526",
|
||||
"--vscode-editorGroupHeader-tabsBackground": "#2D2D2D",
|
||||
"--vscode-editorGroup-border": "#444444",
|
||||
"--vscode-editorWidget-background": "#252526",
|
||||
"--vscode-editorWidget-border": "#454545",
|
||||
"--vscode-editorStickyScrollHover-background": "#2A2D2E",
|
||||
"--vscode-editorMarkerNavigationError-headerBackground": "#B02020",
|
||||
"--vscode-editorMarkerNavigationWarning-headerBackground": "#915413",
|
||||
"--vscode-editorMarkerNavigationInfo-headerBackground": "#1857A8",
|
||||
"--vscode-input-background": "#3C3C3C",
|
||||
"--vscode-list-activeSelectionBackground": "#094771",
|
||||
"--vscode-list-activeSelectionForeground": "#FFFFFF",
|
||||
"--vscode-list-hoverBackground": "#2A2D2E",
|
||||
"--vscode-list-inactiveSelectionBackground": "#37373D",
|
||||
"--vscode-menu-background": "#252526",
|
||||
"--vscode-panel-border": "#808080",
|
||||
"--vscode-widget-border": "#454545",
|
||||
"--vscode-button-background": "#0E639C",
|
||||
"--vscode-button-foreground": "#FFFFFF",
|
||||
"--vscode-button-hoverBackground": "#1177BB",
|
||||
"--vscode-button-secondaryBackground": "#3A3D41",
|
||||
"--vscode-button-secondaryHoverBackground": "#45494E",
|
||||
"--vscode-toolbar-hoverBackground": "#5A5D5E50",
|
||||
"--vscode-toolbar-activeBackground": "#BFBFBF1F",
|
||||
"--vscode-diffEditor-insertedLineBackground": "#28413B",
|
||||
"--vscode-diffEditor-insertedTextBackground": "#2EA04326",
|
||||
"--vscode-diffEditor-removedLineBackground": "#4B1818",
|
||||
"--vscode-diffEditor-removedTextBackground": "#F8514926",
|
||||
"--vscode-diffEditor-unchangedCodeBackground": "#3A3D4140",
|
||||
"--vscode-gitDecoration-addedResourceForeground": "#81B88B",
|
||||
"--vscode-gitDecoration-deletedResourceForeground": "#C74E39",
|
||||
"--vscode-gitDecoration-modifiedResourceForeground": "#E2C08D",
|
||||
"--vscode-charts-red": "#F48771",
|
||||
"--vscode-charts-blue": "#75BEFF",
|
||||
"--vscode-charts-yellow": "#CCA700",
|
||||
"--vscode-charts-green": "#89D185",
|
||||
"--vscode-charts-orange": "#D18616",
|
||||
"--vscode-charts-purple": "#B180D7",
|
||||
"--vscode-debugTokenExpression-name": "#9CDCFE",
|
||||
"--vscode-debugTokenExpression-type": "#4EC9B0",
|
||||
"--vscode-debugTokenExpression-number": "#B5CEA8",
|
||||
"--vscode-debugTokenExpression-string": "#CE9178",
|
||||
"--vscode-scrollbarSlider-background": "#4E4E4E99",
|
||||
"--vscode-scrollbarSlider-hoverBackground": "#646464B3",
|
||||
"--vscode-scrollbarSlider-activeBackground": "#BFBFBF66",
|
||||
},
|
||||
},
|
||||
|
||||
"light-vs": {
|
||||
colorScheme: "light",
|
||||
vars: {
|
||||
"--vscode-font-family":
|
||||
"-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif",
|
||||
"--vscode-font-size": "13px",
|
||||
"--vscode-font-weight": "normal",
|
||||
"--vscode-editor-background": "#FFFFFF",
|
||||
"--vscode-editor-foreground": "#000000",
|
||||
"--vscode-editor-inactiveSelectionBackground": "#E5EBF1",
|
||||
"--vscode-foreground": "#616161",
|
||||
"--vscode-descriptionForeground": "#717171",
|
||||
"--vscode-disabledForeground": "#ABABAB",
|
||||
"--vscode-icon-foreground": "#424242",
|
||||
"--vscode-focusBorder": "#0090F1",
|
||||
"--vscode-textLink-foreground": "#006AB1",
|
||||
"--vscode-sideBar-background": "#F3F3F3",
|
||||
"--vscode-editorGroupHeader-tabsBackground": "#ECECEC",
|
||||
"--vscode-editorGroup-border": "#E7E7E7",
|
||||
"--vscode-editorWidget-background": "#F3F3F3",
|
||||
"--vscode-editorWidget-border": "#C8C8C8",
|
||||
"--vscode-editorStickyScrollHover-background": "#F0F0F0",
|
||||
"--vscode-editorMarkerNavigationError-headerBackground": "#E51400",
|
||||
"--vscode-editorMarkerNavigationWarning-headerBackground": "#BF8803",
|
||||
"--vscode-editorMarkerNavigationInfo-headerBackground": "#1a85ff",
|
||||
"--vscode-input-background": "#FFFFFF",
|
||||
"--vscode-list-activeSelectionBackground": "#0060C0",
|
||||
"--vscode-list-activeSelectionForeground": "#FFFFFF",
|
||||
"--vscode-list-hoverBackground": "#E8E8E8",
|
||||
"--vscode-list-inactiveSelectionBackground": "#E4E6F1",
|
||||
"--vscode-menu-background": "#FFFFFF",
|
||||
"--vscode-panel-border": "#E7E7E7",
|
||||
"--vscode-widget-border": "#C8C8C8",
|
||||
"--vscode-button-background": "#007ACC",
|
||||
"--vscode-button-foreground": "#FFFFFF",
|
||||
"--vscode-button-hoverBackground": "#0062A3",
|
||||
"--vscode-button-secondaryBackground": "#5F6A79",
|
||||
"--vscode-button-secondaryHoverBackground": "#4C5561",
|
||||
"--vscode-toolbar-hoverBackground": "#B8B8B850",
|
||||
"--vscode-toolbar-activeBackground": "#A5A5A550",
|
||||
"--vscode-diffEditor-insertedLineBackground": "#DCFEDC",
|
||||
"--vscode-diffEditor-insertedTextBackground": "#2EA04326",
|
||||
"--vscode-diffEditor-removedLineBackground": "#FFE4E4",
|
||||
"--vscode-diffEditor-removedTextBackground": "#F8514926",
|
||||
"--vscode-diffEditor-unchangedCodeBackground": "#F5F5F5",
|
||||
"--vscode-gitDecoration-addedResourceForeground": "#587C0C",
|
||||
"--vscode-gitDecoration-deletedResourceForeground": "#AD0707",
|
||||
"--vscode-gitDecoration-modifiedResourceForeground": "#895503",
|
||||
"--vscode-charts-red": "#E51400",
|
||||
"--vscode-charts-blue": "#1a85ff",
|
||||
"--vscode-charts-yellow": "#BF8803",
|
||||
"--vscode-charts-green": "#587C0C",
|
||||
"--vscode-charts-orange": "#D18616",
|
||||
"--vscode-charts-purple": "#652D90",
|
||||
"--vscode-debugTokenExpression-name": "#001080",
|
||||
"--vscode-debugTokenExpression-type": "#267F99",
|
||||
"--vscode-debugTokenExpression-number": "#098658",
|
||||
"--vscode-debugTokenExpression-string": "#A31515",
|
||||
"--vscode-scrollbarSlider-background": "#64646466",
|
||||
"--vscode-scrollbarSlider-hoverBackground": "#646464B3",
|
||||
"--vscode-scrollbarSlider-activeBackground": "#00000099",
|
||||
},
|
||||
},
|
||||
|
||||
"hc-black": {
|
||||
colorScheme: "dark",
|
||||
vars: {
|
||||
"--vscode-font-family":
|
||||
"-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif",
|
||||
"--vscode-font-size": "13px",
|
||||
"--vscode-font-weight": "normal",
|
||||
"--vscode-editor-background": "#000000",
|
||||
"--vscode-editor-foreground": "#FFFFFF",
|
||||
"--vscode-editor-inactiveSelectionBackground": "#3A3D41",
|
||||
"--vscode-foreground": "#FFFFFF",
|
||||
"--vscode-descriptionForeground": "#FFFFFF",
|
||||
"--vscode-disabledForeground": "#A5A5A5",
|
||||
"--vscode-icon-foreground": "#FFFFFF",
|
||||
"--vscode-focusBorder": "#F38518",
|
||||
"--vscode-textLink-foreground": "#3794FF",
|
||||
"--vscode-sideBar-background": "#000000",
|
||||
"--vscode-editorGroupHeader-tabsBackground": "#000000",
|
||||
"--vscode-editorGroup-border": "#6FC3DF",
|
||||
"--vscode-editorWidget-background": "#0D0D0D",
|
||||
"--vscode-editorWidget-border": "#6FC3DF",
|
||||
"--vscode-editorStickyScrollHover-background": "#1A1A1A",
|
||||
"--vscode-editorMarkerNavigationError-headerBackground": "#B02020",
|
||||
"--vscode-editorMarkerNavigationWarning-headerBackground": "#915413",
|
||||
"--vscode-editorMarkerNavigationInfo-headerBackground": "#1857A8",
|
||||
"--vscode-input-background": "#000000",
|
||||
"--vscode-list-activeSelectionBackground": "#0F4C75",
|
||||
"--vscode-list-activeSelectionForeground": "#FFFFFF",
|
||||
"--vscode-list-hoverBackground": "#000000",
|
||||
"--vscode-list-inactiveSelectionBackground": "#000000",
|
||||
"--vscode-menu-background": "#000000",
|
||||
"--vscode-panel-border": "#6FC3DF",
|
||||
"--vscode-widget-border": "#6FC3DF",
|
||||
"--vscode-button-background": "#0E639C",
|
||||
"--vscode-button-foreground": "#FFFFFF",
|
||||
"--vscode-button-hoverBackground": "#1177BB",
|
||||
"--vscode-button-secondaryBackground": "#000000",
|
||||
"--vscode-button-secondaryHoverBackground": "#1A1A1A",
|
||||
"--vscode-toolbar-hoverBackground": "#FFFFFF1A",
|
||||
"--vscode-toolbar-activeBackground": "#FFFFFF2D",
|
||||
"--vscode-diffEditor-insertedLineBackground": "#003300",
|
||||
"--vscode-diffEditor-insertedTextBackground": "#00CC0040",
|
||||
"--vscode-diffEditor-removedLineBackground": "#330000",
|
||||
"--vscode-diffEditor-removedTextBackground": "#CC000040",
|
||||
"--vscode-diffEditor-unchangedCodeBackground": "#1A1A1A",
|
||||
"--vscode-gitDecoration-addedResourceForeground": "#81B88B",
|
||||
"--vscode-gitDecoration-deletedResourceForeground": "#C74E39",
|
||||
"--vscode-gitDecoration-modifiedResourceForeground": "#E2C08D",
|
||||
"--vscode-charts-red": "#F48771",
|
||||
"--vscode-charts-blue": "#75BEFF",
|
||||
"--vscode-charts-yellow": "#CCA700",
|
||||
"--vscode-charts-green": "#89D185",
|
||||
"--vscode-charts-orange": "#D18616",
|
||||
"--vscode-charts-purple": "#B180D7",
|
||||
"--vscode-debugTokenExpression-name": "#9CDCFE",
|
||||
"--vscode-debugTokenExpression-type": "#4EC9B0",
|
||||
"--vscode-debugTokenExpression-number": "#B5CEA8",
|
||||
"--vscode-debugTokenExpression-string": "#CE9178",
|
||||
"--vscode-scrollbarSlider-background": "#6FC3DF4D",
|
||||
"--vscode-scrollbarSlider-hoverBackground": "#6FC3DF66",
|
||||
"--vscode-scrollbarSlider-activeBackground": "#6FC3DF99",
|
||||
},
|
||||
},
|
||||
|
||||
monokai: {
|
||||
colorScheme: "dark",
|
||||
vars: {
|
||||
"--vscode-font-family":
|
||||
"-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif",
|
||||
"--vscode-font-size": "13px",
|
||||
"--vscode-font-weight": "normal",
|
||||
"--vscode-editor-background": "#272822",
|
||||
"--vscode-editor-foreground": "#f8f8f2",
|
||||
"--vscode-editor-inactiveSelectionBackground": "#3A3D41",
|
||||
"--vscode-foreground": "#CCCCCC",
|
||||
"--vscode-descriptionForeground": "#717171",
|
||||
"--vscode-disabledForeground": "#6B6B6B",
|
||||
"--vscode-icon-foreground": "#C5C5C5",
|
||||
"--vscode-focusBorder": "#99947c",
|
||||
"--vscode-textLink-foreground": "#3794FF",
|
||||
"--vscode-sideBar-background": "#1e1f1c",
|
||||
"--vscode-editorGroupHeader-tabsBackground": "#1e1f1c",
|
||||
"--vscode-editorGroup-border": "#34352f",
|
||||
"--vscode-editorWidget-background": "#1e1f1c",
|
||||
"--vscode-editorWidget-border": "#454545",
|
||||
"--vscode-editorStickyScrollHover-background": "#2A2D2E",
|
||||
"--vscode-editorMarkerNavigationError-headerBackground": "#B02020",
|
||||
"--vscode-editorMarkerNavigationWarning-headerBackground": "#915413",
|
||||
"--vscode-editorMarkerNavigationInfo-headerBackground": "#1857A8",
|
||||
"--vscode-input-background": "#414339",
|
||||
"--vscode-list-activeSelectionBackground": "#75715E",
|
||||
"--vscode-list-activeSelectionForeground": "#FFFFFF",
|
||||
"--vscode-list-hoverBackground": "#3e3d32",
|
||||
"--vscode-list-inactiveSelectionBackground": "#414339",
|
||||
"--vscode-menu-background": "#1e1f1c",
|
||||
"--vscode-panel-border": "#414339",
|
||||
"--vscode-widget-border": "#454545",
|
||||
"--vscode-button-background": "#75715E",
|
||||
"--vscode-button-foreground": "#FFFFFF",
|
||||
"--vscode-button-hoverBackground": "#1177BB",
|
||||
"--vscode-button-secondaryBackground": "#3A3D41",
|
||||
"--vscode-button-secondaryHoverBackground": "#45494E",
|
||||
"--vscode-toolbar-hoverBackground": "#5A5D5E50",
|
||||
"--vscode-toolbar-activeBackground": "#BFBFBF1F",
|
||||
"--vscode-diffEditor-insertedLineBackground": "#28413B",
|
||||
"--vscode-diffEditor-insertedTextBackground": "#4b661680",
|
||||
"--vscode-diffEditor-removedLineBackground": "#4B1818",
|
||||
"--vscode-diffEditor-removedTextBackground": "#90274A70",
|
||||
"--vscode-diffEditor-unchangedCodeBackground": "#3A3D4140",
|
||||
"--vscode-gitDecoration-addedResourceForeground": "#81B88B",
|
||||
"--vscode-gitDecoration-deletedResourceForeground": "#C74E39",
|
||||
"--vscode-gitDecoration-modifiedResourceForeground": "#E2C08D",
|
||||
"--vscode-charts-red": "#F48771",
|
||||
"--vscode-charts-blue": "#75BEFF",
|
||||
"--vscode-charts-yellow": "#CCA700",
|
||||
"--vscode-charts-green": "#89D185",
|
||||
"--vscode-charts-orange": "#D18616",
|
||||
"--vscode-charts-purple": "#B180D7",
|
||||
"--vscode-debugTokenExpression-name": "#9CDCFE",
|
||||
"--vscode-debugTokenExpression-type": "#4EC9B0",
|
||||
"--vscode-debugTokenExpression-number": "#B5CEA8",
|
||||
"--vscode-debugTokenExpression-string": "#CE9178",
|
||||
"--vscode-scrollbarSlider-background": "#4E4E4E99",
|
||||
"--vscode-scrollbarSlider-hoverBackground": "#646464B3",
|
||||
"--vscode-scrollbarSlider-activeBackground": "#BFBFBF66",
|
||||
},
|
||||
},
|
||||
|
||||
"solarized-dark": {
|
||||
colorScheme: "dark",
|
||||
vars: {
|
||||
"--vscode-font-family":
|
||||
"-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif",
|
||||
"--vscode-font-size": "13px",
|
||||
"--vscode-font-weight": "normal",
|
||||
"--vscode-editor-background": "#002B36",
|
||||
"--vscode-editor-foreground": "#839496",
|
||||
"--vscode-editor-inactiveSelectionBackground": "#3A3D41",
|
||||
"--vscode-foreground": "#CCCCCC",
|
||||
"--vscode-descriptionForeground": "#717171",
|
||||
"--vscode-disabledForeground": "#6B6B6B",
|
||||
"--vscode-icon-foreground": "#C5C5C5",
|
||||
"--vscode-focusBorder": "#2AA19899",
|
||||
"--vscode-textLink-foreground": "#3794FF",
|
||||
"--vscode-sideBar-background": "#00212B",
|
||||
"--vscode-editorGroupHeader-tabsBackground": "#004052",
|
||||
"--vscode-editorGroup-border": "#00212B",
|
||||
"--vscode-editorWidget-background": "#00212B",
|
||||
"--vscode-editorWidget-border": "#454545",
|
||||
"--vscode-editorStickyScrollHover-background": "#2A2D2E",
|
||||
"--vscode-editorMarkerNavigationError-headerBackground": "#AB395B",
|
||||
"--vscode-editorMarkerNavigationWarning-headerBackground": "#5B7E7A",
|
||||
"--vscode-editorMarkerNavigationInfo-headerBackground": "#1857A8",
|
||||
"--vscode-input-background": "#003847",
|
||||
"--vscode-list-activeSelectionBackground": "#005A6F",
|
||||
"--vscode-list-activeSelectionForeground": "#FFFFFF",
|
||||
"--vscode-list-hoverBackground": "#004454AA",
|
||||
"--vscode-list-inactiveSelectionBackground": "#00445488",
|
||||
"--vscode-menu-background": "#002B36",
|
||||
"--vscode-panel-border": "#2b2b4a",
|
||||
"--vscode-widget-border": "#454545",
|
||||
"--vscode-button-background": "#2AA19899",
|
||||
"--vscode-button-foreground": "#FFFFFF",
|
||||
"--vscode-button-hoverBackground": "#1177BB",
|
||||
"--vscode-button-secondaryBackground": "#3A3D41",
|
||||
"--vscode-button-secondaryHoverBackground": "#45494E",
|
||||
"--vscode-toolbar-hoverBackground": "#5A5D5E50",
|
||||
"--vscode-toolbar-activeBackground": "#BFBFBF1F",
|
||||
"--vscode-diffEditor-insertedLineBackground": "#28413B",
|
||||
"--vscode-diffEditor-insertedTextBackground": "#2EA04326",
|
||||
"--vscode-diffEditor-removedLineBackground": "#4B1818",
|
||||
"--vscode-diffEditor-removedTextBackground": "#F8514926",
|
||||
"--vscode-diffEditor-unchangedCodeBackground": "#3A3D4140",
|
||||
"--vscode-gitDecoration-addedResourceForeground": "#81B88B",
|
||||
"--vscode-gitDecoration-deletedResourceForeground": "#C74E39",
|
||||
"--vscode-gitDecoration-modifiedResourceForeground": "#E2C08D",
|
||||
"--vscode-charts-red": "#F48771",
|
||||
"--vscode-charts-blue": "#75BEFF",
|
||||
"--vscode-charts-yellow": "#CCA700",
|
||||
"--vscode-charts-green": "#89D185",
|
||||
"--vscode-charts-orange": "#D18616",
|
||||
"--vscode-charts-purple": "#B180D7",
|
||||
"--vscode-debugTokenExpression-name": "#9CDCFE",
|
||||
"--vscode-debugTokenExpression-type": "#4EC9B0",
|
||||
"--vscode-debugTokenExpression-number": "#B5CEA8",
|
||||
"--vscode-debugTokenExpression-string": "#CE9178",
|
||||
"--vscode-scrollbarSlider-background": "#4E4E4E99",
|
||||
"--vscode-scrollbarSlider-hoverBackground": "#646464B3",
|
||||
"--vscode-scrollbarSlider-activeBackground": "#BFBFBF66",
|
||||
},
|
||||
},
|
||||
|
||||
"solarized-light": {
|
||||
colorScheme: "light",
|
||||
vars: {
|
||||
"--vscode-font-family":
|
||||
"-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif",
|
||||
"--vscode-font-size": "13px",
|
||||
"--vscode-font-weight": "normal",
|
||||
"--vscode-editor-background": "#FDF6E3",
|
||||
"--vscode-editor-foreground": "#657B83",
|
||||
"--vscode-editor-inactiveSelectionBackground": "#E5EBF1",
|
||||
"--vscode-foreground": "#616161",
|
||||
"--vscode-descriptionForeground": "#717171",
|
||||
"--vscode-disabledForeground": "#ABABAB",
|
||||
"--vscode-icon-foreground": "#424242",
|
||||
"--vscode-focusBorder": "#b49471",
|
||||
"--vscode-textLink-foreground": "#006AB1",
|
||||
"--vscode-sideBar-background": "#EEE8D5",
|
||||
"--vscode-editorGroupHeader-tabsBackground": "#D9D2C2",
|
||||
"--vscode-editorGroup-border": "#DDD6C1",
|
||||
"--vscode-editorWidget-background": "#EEE8D5",
|
||||
"--vscode-editorWidget-border": "#C8C8C8",
|
||||
"--vscode-editorStickyScrollHover-background": "#F0F0F0",
|
||||
"--vscode-editorMarkerNavigationError-headerBackground": "#E51400",
|
||||
"--vscode-editorMarkerNavigationWarning-headerBackground": "#BF8803",
|
||||
"--vscode-editorMarkerNavigationInfo-headerBackground": "#1a85ff",
|
||||
"--vscode-input-background": "#DDD6C1",
|
||||
"--vscode-list-activeSelectionBackground": "#DFCA88",
|
||||
"--vscode-list-activeSelectionForeground": "#6C6C6C",
|
||||
"--vscode-list-hoverBackground": "#DFCA8844",
|
||||
"--vscode-list-inactiveSelectionBackground": "#D1CBB8",
|
||||
"--vscode-menu-background": "#EEE8D5",
|
||||
"--vscode-panel-border": "#DDD6C1",
|
||||
"--vscode-widget-border": "#C8C8C8",
|
||||
"--vscode-button-background": "#AC9D57",
|
||||
"--vscode-button-foreground": "#FFFFFF",
|
||||
"--vscode-button-hoverBackground": "#0062A3",
|
||||
"--vscode-button-secondaryBackground": "#5F6A79",
|
||||
"--vscode-button-secondaryHoverBackground": "#4C5561",
|
||||
"--vscode-toolbar-hoverBackground": "#B8B8B850",
|
||||
"--vscode-toolbar-activeBackground": "#A5A5A550",
|
||||
"--vscode-diffEditor-insertedLineBackground": "#DCFEDC",
|
||||
"--vscode-diffEditor-insertedTextBackground": "#2EA04326",
|
||||
"--vscode-diffEditor-removedLineBackground": "#FFE4E4",
|
||||
"--vscode-diffEditor-removedTextBackground": "#F8514926",
|
||||
"--vscode-diffEditor-unchangedCodeBackground": "#F5F5F5",
|
||||
"--vscode-gitDecoration-addedResourceForeground": "#587C0C",
|
||||
"--vscode-gitDecoration-deletedResourceForeground": "#AD0707",
|
||||
"--vscode-gitDecoration-modifiedResourceForeground": "#895503",
|
||||
"--vscode-charts-red": "#E51400",
|
||||
"--vscode-charts-blue": "#1a85ff",
|
||||
"--vscode-charts-yellow": "#BF8803",
|
||||
"--vscode-charts-green": "#587C0C",
|
||||
"--vscode-charts-orange": "#D18616",
|
||||
"--vscode-charts-purple": "#652D90",
|
||||
"--vscode-debugTokenExpression-name": "#001080",
|
||||
"--vscode-debugTokenExpression-type": "#267F99",
|
||||
"--vscode-debugTokenExpression-number": "#098658",
|
||||
"--vscode-debugTokenExpression-string": "#A31515",
|
||||
"--vscode-scrollbarSlider-background": "#64646466",
|
||||
"--vscode-scrollbarSlider-hoverBackground": "#646464B3",
|
||||
"--vscode-scrollbarSlider-activeBackground": "#00000099",
|
||||
},
|
||||
},
|
||||
|
||||
red: {
|
||||
colorScheme: "dark",
|
||||
vars: {
|
||||
"--vscode-font-family":
|
||||
"-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif",
|
||||
"--vscode-font-size": "13px",
|
||||
"--vscode-font-weight": "normal",
|
||||
"--vscode-editor-background": "#390000",
|
||||
"--vscode-editor-foreground": "#F8F8F8",
|
||||
"--vscode-editor-inactiveSelectionBackground": "#3A3D41",
|
||||
"--vscode-foreground": "#CCCCCC",
|
||||
"--vscode-descriptionForeground": "#717171",
|
||||
"--vscode-disabledForeground": "#6B6B6B",
|
||||
"--vscode-icon-foreground": "#C5C5C5",
|
||||
"--vscode-focusBorder": "#ff6666aa",
|
||||
"--vscode-textLink-foreground": "#3794FF",
|
||||
"--vscode-sideBar-background": "#330000",
|
||||
"--vscode-editorGroupHeader-tabsBackground": "#330000",
|
||||
"--vscode-editorGroup-border": "#ff666633",
|
||||
"--vscode-editorWidget-background": "#300000",
|
||||
"--vscode-editorWidget-border": "#454545",
|
||||
"--vscode-editorStickyScrollHover-background": "#2A2D2E",
|
||||
"--vscode-editorMarkerNavigationError-headerBackground": "#B02020",
|
||||
"--vscode-editorMarkerNavigationWarning-headerBackground": "#915413",
|
||||
"--vscode-editorMarkerNavigationInfo-headerBackground": "#1857A8",
|
||||
"--vscode-input-background": "#580000",
|
||||
"--vscode-list-activeSelectionBackground": "#880000",
|
||||
"--vscode-list-activeSelectionForeground": "#FFFFFF",
|
||||
"--vscode-list-hoverBackground": "#800000",
|
||||
"--vscode-list-inactiveSelectionBackground": "#770000",
|
||||
"--vscode-menu-background": "#390000",
|
||||
"--vscode-panel-border": "#808080",
|
||||
"--vscode-widget-border": "#454545",
|
||||
"--vscode-button-background": "#833333",
|
||||
"--vscode-button-foreground": "#FFFFFF",
|
||||
"--vscode-button-hoverBackground": "#1177BB",
|
||||
"--vscode-button-secondaryBackground": "#3A3D41",
|
||||
"--vscode-button-secondaryHoverBackground": "#45494E",
|
||||
"--vscode-toolbar-hoverBackground": "#5A5D5E50",
|
||||
"--vscode-toolbar-activeBackground": "#BFBFBF1F",
|
||||
"--vscode-diffEditor-insertedLineBackground": "#28413B",
|
||||
"--vscode-diffEditor-insertedTextBackground": "#2EA04326",
|
||||
"--vscode-diffEditor-removedLineBackground": "#4B1818",
|
||||
"--vscode-diffEditor-removedTextBackground": "#F8514926",
|
||||
"--vscode-diffEditor-unchangedCodeBackground": "#3A3D4140",
|
||||
"--vscode-gitDecoration-addedResourceForeground": "#81B88B",
|
||||
"--vscode-gitDecoration-deletedResourceForeground": "#C74E39",
|
||||
"--vscode-gitDecoration-modifiedResourceForeground": "#E2C08D",
|
||||
"--vscode-charts-red": "#F48771",
|
||||
"--vscode-charts-blue": "#75BEFF",
|
||||
"--vscode-charts-yellow": "#CCA700",
|
||||
"--vscode-charts-green": "#89D185",
|
||||
"--vscode-charts-orange": "#D18616",
|
||||
"--vscode-charts-purple": "#B180D7",
|
||||
"--vscode-debugTokenExpression-name": "#9CDCFE",
|
||||
"--vscode-debugTokenExpression-type": "#4EC9B0",
|
||||
"--vscode-debugTokenExpression-number": "#B5CEA8",
|
||||
"--vscode-debugTokenExpression-string": "#CE9178",
|
||||
"--vscode-scrollbarSlider-background": "#4E4E4E99",
|
||||
"--vscode-scrollbarSlider-hoverBackground": "#646464B3",
|
||||
"--vscode-scrollbarSlider-activeBackground": "#BFBFBF66",
|
||||
},
|
||||
},
|
||||
|
||||
"quiet-light": {
|
||||
colorScheme: "light",
|
||||
vars: {
|
||||
"--vscode-font-family":
|
||||
"-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif",
|
||||
"--vscode-font-size": "13px",
|
||||
"--vscode-font-weight": "normal",
|
||||
"--vscode-editor-background": "#F5F5F5",
|
||||
"--vscode-editor-foreground": "#333333",
|
||||
"--vscode-editor-inactiveSelectionBackground": "#E5EBF1",
|
||||
"--vscode-foreground": "#616161",
|
||||
"--vscode-descriptionForeground": "#717171",
|
||||
"--vscode-disabledForeground": "#ABABAB",
|
||||
"--vscode-icon-foreground": "#424242",
|
||||
"--vscode-focusBorder": "#9769dc",
|
||||
"--vscode-textLink-foreground": "#006AB1",
|
||||
"--vscode-sideBar-background": "#F2F2F2",
|
||||
"--vscode-editorGroupHeader-tabsBackground": "#ECECEC",
|
||||
"--vscode-editorGroup-border": "#E7E7E7",
|
||||
"--vscode-editorWidget-background": "#F3F3F3",
|
||||
"--vscode-editorWidget-border": "#C8C8C8",
|
||||
"--vscode-editorStickyScrollHover-background": "#F0F0F0",
|
||||
"--vscode-editorMarkerNavigationError-headerBackground": "#E51400",
|
||||
"--vscode-editorMarkerNavigationWarning-headerBackground": "#BF8803",
|
||||
"--vscode-editorMarkerNavigationInfo-headerBackground": "#1a85ff",
|
||||
"--vscode-input-background": "#FFFFFF",
|
||||
"--vscode-list-activeSelectionBackground": "#c4d9b1",
|
||||
"--vscode-list-activeSelectionForeground": "#6c6c6c",
|
||||
"--vscode-list-hoverBackground": "#e0e0e0",
|
||||
"--vscode-list-inactiveSelectionBackground": "#d3dbcd",
|
||||
"--vscode-menu-background": "#F5F5F5",
|
||||
"--vscode-panel-border": "#E7E7E7",
|
||||
"--vscode-widget-border": "#C8C8C8",
|
||||
"--vscode-button-background": "#705697",
|
||||
"--vscode-button-foreground": "#FFFFFF",
|
||||
"--vscode-button-hoverBackground": "#0062A3",
|
||||
"--vscode-button-secondaryBackground": "#5F6A79",
|
||||
"--vscode-button-secondaryHoverBackground": "#4C5561",
|
||||
"--vscode-toolbar-hoverBackground": "#B8B8B850",
|
||||
"--vscode-toolbar-activeBackground": "#A5A5A550",
|
||||
"--vscode-diffEditor-insertedLineBackground": "#DCFEDC",
|
||||
"--vscode-diffEditor-insertedTextBackground": "#2EA04326",
|
||||
"--vscode-diffEditor-removedLineBackground": "#FFE4E4",
|
||||
"--vscode-diffEditor-removedTextBackground": "#F8514926",
|
||||
"--vscode-diffEditor-unchangedCodeBackground": "#F5F5F5",
|
||||
"--vscode-gitDecoration-addedResourceForeground": "#587C0C",
|
||||
"--vscode-gitDecoration-deletedResourceForeground": "#AD0707",
|
||||
"--vscode-gitDecoration-modifiedResourceForeground": "#895503",
|
||||
"--vscode-charts-red": "#E51400",
|
||||
"--vscode-charts-blue": "#1a85ff",
|
||||
"--vscode-charts-yellow": "#BF8803",
|
||||
"--vscode-charts-green": "#587C0C",
|
||||
"--vscode-charts-orange": "#D18616",
|
||||
"--vscode-charts-purple": "#652D90",
|
||||
"--vscode-debugTokenExpression-name": "#001080",
|
||||
"--vscode-debugTokenExpression-type": "#267F99",
|
||||
"--vscode-debugTokenExpression-number": "#098658",
|
||||
"--vscode-debugTokenExpression-string": "#A31515",
|
||||
"--vscode-scrollbarSlider-background": "#64646466",
|
||||
"--vscode-scrollbarSlider-hoverBackground": "#646464B3",
|
||||
"--vscode-scrollbarSlider-activeBackground": "#00000099",
|
||||
},
|
||||
},
|
||||
|
||||
"tomorrow-night-blue": {
|
||||
colorScheme: "dark",
|
||||
vars: {
|
||||
"--vscode-font-family":
|
||||
"-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif",
|
||||
"--vscode-font-size": "13px",
|
||||
"--vscode-font-weight": "normal",
|
||||
"--vscode-editor-background": "#002451",
|
||||
"--vscode-editor-foreground": "#ffffff",
|
||||
"--vscode-editor-inactiveSelectionBackground": "#3A3D41",
|
||||
"--vscode-foreground": "#CCCCCC",
|
||||
"--vscode-descriptionForeground": "#717171",
|
||||
"--vscode-disabledForeground": "#6B6B6B",
|
||||
"--vscode-icon-foreground": "#C5C5C5",
|
||||
"--vscode-focusBorder": "#bbdaff",
|
||||
"--vscode-textLink-foreground": "#3794FF",
|
||||
"--vscode-sideBar-background": "#001c40",
|
||||
"--vscode-editorGroupHeader-tabsBackground": "#001733",
|
||||
"--vscode-editorGroup-border": "#404f7d",
|
||||
"--vscode-editorWidget-background": "#001c40",
|
||||
"--vscode-editorWidget-border": "#454545",
|
||||
"--vscode-editorStickyScrollHover-background": "#2A2D2E",
|
||||
"--vscode-editorMarkerNavigationError-headerBackground": "#B02020",
|
||||
"--vscode-editorMarkerNavigationWarning-headerBackground": "#915413",
|
||||
"--vscode-editorMarkerNavigationInfo-headerBackground": "#1857A8",
|
||||
"--vscode-input-background": "#001733",
|
||||
"--vscode-list-activeSelectionBackground": "#ffffff60",
|
||||
"--vscode-list-activeSelectionForeground": "#FFFFFF",
|
||||
"--vscode-list-hoverBackground": "#ffffff30",
|
||||
"--vscode-list-inactiveSelectionBackground": "#ffffff40",
|
||||
"--vscode-menu-background": "#002451",
|
||||
"--vscode-panel-border": "#808080",
|
||||
"--vscode-widget-border": "#454545",
|
||||
"--vscode-button-background": "#0E639C",
|
||||
"--vscode-button-foreground": "#FFFFFF",
|
||||
"--vscode-button-hoverBackground": "#1177BB",
|
||||
"--vscode-button-secondaryBackground": "#3A3D41",
|
||||
"--vscode-button-secondaryHoverBackground": "#45494E",
|
||||
"--vscode-toolbar-hoverBackground": "#5A5D5E50",
|
||||
"--vscode-toolbar-activeBackground": "#BFBFBF1F",
|
||||
"--vscode-diffEditor-insertedLineBackground": "#28413B",
|
||||
"--vscode-diffEditor-insertedTextBackground": "#2EA04326",
|
||||
"--vscode-diffEditor-removedLineBackground": "#4B1818",
|
||||
"--vscode-diffEditor-removedTextBackground": "#F8514926",
|
||||
"--vscode-diffEditor-unchangedCodeBackground": "#3A3D4140",
|
||||
"--vscode-gitDecoration-addedResourceForeground": "#81B88B",
|
||||
"--vscode-gitDecoration-deletedResourceForeground": "#C74E39",
|
||||
"--vscode-gitDecoration-modifiedResourceForeground": "#E2C08D",
|
||||
"--vscode-charts-red": "#F48771",
|
||||
"--vscode-charts-blue": "#75BEFF",
|
||||
"--vscode-charts-yellow": "#CCA700",
|
||||
"--vscode-charts-green": "#89D185",
|
||||
"--vscode-charts-orange": "#D18616",
|
||||
"--vscode-charts-purple": "#B180D7",
|
||||
"--vscode-debugTokenExpression-name": "#9CDCFE",
|
||||
"--vscode-debugTokenExpression-type": "#4EC9B0",
|
||||
"--vscode-debugTokenExpression-number": "#B5CEA8",
|
||||
"--vscode-debugTokenExpression-string": "#CE9178",
|
||||
"--vscode-scrollbarSlider-background": "#4E4E4E99",
|
||||
"--vscode-scrollbarSlider-hoverBackground": "#646464B3",
|
||||
"--vscode-scrollbarSlider-activeBackground": "#BFBFBF66",
|
||||
},
|
||||
},
|
||||
|
||||
"kimbie-dark": {
|
||||
colorScheme: "dark",
|
||||
vars: {
|
||||
"--vscode-font-family":
|
||||
"-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif",
|
||||
"--vscode-font-size": "13px",
|
||||
"--vscode-font-weight": "normal",
|
||||
"--vscode-editor-background": "#221a0f",
|
||||
"--vscode-editor-foreground": "#d3af86",
|
||||
"--vscode-editor-inactiveSelectionBackground": "#3A3D41",
|
||||
"--vscode-foreground": "#CCCCCC",
|
||||
"--vscode-descriptionForeground": "#717171",
|
||||
"--vscode-disabledForeground": "#6B6B6B",
|
||||
"--vscode-icon-foreground": "#C5C5C5",
|
||||
"--vscode-focusBorder": "#a57a4c",
|
||||
"--vscode-textLink-foreground": "#3794FF",
|
||||
"--vscode-sideBar-background": "#362712",
|
||||
"--vscode-editorGroupHeader-tabsBackground": "#131510",
|
||||
"--vscode-editorGroup-border": "#444444",
|
||||
"--vscode-editorWidget-background": "#131510",
|
||||
"--vscode-editorWidget-border": "#454545",
|
||||
"--vscode-editorStickyScrollHover-background": "#2A2D2E",
|
||||
"--vscode-editorMarkerNavigationError-headerBackground": "#B02020",
|
||||
"--vscode-editorMarkerNavigationWarning-headerBackground": "#915413",
|
||||
"--vscode-editorMarkerNavigationInfo-headerBackground": "#1857A8",
|
||||
"--vscode-input-background": "#51412c",
|
||||
"--vscode-list-activeSelectionBackground": "#7c5021",
|
||||
"--vscode-list-activeSelectionForeground": "#FFFFFF",
|
||||
"--vscode-list-hoverBackground": "#7c502166",
|
||||
"--vscode-list-inactiveSelectionBackground": "#645342",
|
||||
"--vscode-menu-background": "#362712",
|
||||
"--vscode-panel-border": "#808080",
|
||||
"--vscode-widget-border": "#454545",
|
||||
"--vscode-button-background": "#6e583b",
|
||||
"--vscode-button-foreground": "#FFFFFF",
|
||||
"--vscode-button-hoverBackground": "#1177BB",
|
||||
"--vscode-button-secondaryBackground": "#3A3D41",
|
||||
"--vscode-button-secondaryHoverBackground": "#45494E",
|
||||
"--vscode-toolbar-hoverBackground": "#5A5D5E50",
|
||||
"--vscode-toolbar-activeBackground": "#BFBFBF1F",
|
||||
"--vscode-diffEditor-insertedLineBackground": "#28413B",
|
||||
"--vscode-diffEditor-insertedTextBackground": "#2EA04326",
|
||||
"--vscode-diffEditor-removedLineBackground": "#4B1818",
|
||||
"--vscode-diffEditor-removedTextBackground": "#F8514926",
|
||||
"--vscode-diffEditor-unchangedCodeBackground": "#3A3D4140",
|
||||
"--vscode-gitDecoration-addedResourceForeground": "#81B88B",
|
||||
"--vscode-gitDecoration-deletedResourceForeground": "#C74E39",
|
||||
"--vscode-gitDecoration-modifiedResourceForeground": "#E2C08D",
|
||||
"--vscode-charts-red": "#F48771",
|
||||
"--vscode-charts-blue": "#75BEFF",
|
||||
"--vscode-charts-yellow": "#CCA700",
|
||||
"--vscode-charts-green": "#89D185",
|
||||
"--vscode-charts-orange": "#D18616",
|
||||
"--vscode-charts-purple": "#B180D7",
|
||||
"--vscode-debugTokenExpression-name": "#9CDCFE",
|
||||
"--vscode-debugTokenExpression-type": "#4EC9B0",
|
||||
"--vscode-debugTokenExpression-number": "#B5CEA8",
|
||||
"--vscode-debugTokenExpression-string": "#CE9178",
|
||||
"--vscode-scrollbarSlider-background": "#4E4E4E99",
|
||||
"--vscode-scrollbarSlider-hoverBackground": "#646464B3",
|
||||
"--vscode-scrollbarSlider-activeBackground": "#BFBFBF66",
|
||||
},
|
||||
},
|
||||
|
||||
abyss: {
|
||||
colorScheme: "dark",
|
||||
vars: {
|
||||
"--vscode-font-family":
|
||||
"-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif",
|
||||
"--vscode-font-size": "13px",
|
||||
"--vscode-font-weight": "normal",
|
||||
"--vscode-editor-background": "#000c18",
|
||||
"--vscode-editor-foreground": "#6688cc",
|
||||
"--vscode-editor-inactiveSelectionBackground": "#3A3D41",
|
||||
"--vscode-foreground": "#CCCCCC",
|
||||
"--vscode-descriptionForeground": "#717171",
|
||||
"--vscode-disabledForeground": "#6B6B6B",
|
||||
"--vscode-icon-foreground": "#C5C5C5",
|
||||
"--vscode-focusBorder": "#596F99",
|
||||
"--vscode-textLink-foreground": "#3794FF",
|
||||
"--vscode-sideBar-background": "#060621",
|
||||
"--vscode-editorGroupHeader-tabsBackground": "#1c1c2a",
|
||||
"--vscode-editorGroup-border": "#2b2b4a",
|
||||
"--vscode-editorWidget-background": "#262641",
|
||||
"--vscode-editorWidget-border": "#454545",
|
||||
"--vscode-editorStickyScrollHover-background": "#2A2D2E",
|
||||
"--vscode-editorMarkerNavigationError-headerBackground": "#AB395B",
|
||||
"--vscode-editorMarkerNavigationWarning-headerBackground": "#5B7E7A",
|
||||
"--vscode-editorMarkerNavigationInfo-headerBackground": "#1857A8",
|
||||
"--vscode-input-background": "#181f2f",
|
||||
"--vscode-list-activeSelectionBackground": "#08286b",
|
||||
"--vscode-list-activeSelectionForeground": "#FFFFFF",
|
||||
"--vscode-list-hoverBackground": "#061940",
|
||||
"--vscode-list-inactiveSelectionBackground": "#152037",
|
||||
"--vscode-menu-background": "#000c18",
|
||||
"--vscode-panel-border": "#2b2b4a",
|
||||
"--vscode-widget-border": "#454545",
|
||||
"--vscode-button-background": "#2B3C5D",
|
||||
"--vscode-button-foreground": "#FFFFFF",
|
||||
"--vscode-button-hoverBackground": "#1177BB",
|
||||
"--vscode-button-secondaryBackground": "#3A3D41",
|
||||
"--vscode-button-secondaryHoverBackground": "#45494E",
|
||||
"--vscode-toolbar-hoverBackground": "#5A5D5E50",
|
||||
"--vscode-toolbar-activeBackground": "#BFBFBF1F",
|
||||
"--vscode-diffEditor-insertedLineBackground": "#28413B",
|
||||
"--vscode-diffEditor-insertedTextBackground": "#31958A55",
|
||||
"--vscode-diffEditor-removedLineBackground": "#4B1818",
|
||||
"--vscode-diffEditor-removedTextBackground": "#892F4688",
|
||||
"--vscode-diffEditor-unchangedCodeBackground": "#3A3D4140",
|
||||
"--vscode-gitDecoration-addedResourceForeground": "#81B88B",
|
||||
"--vscode-gitDecoration-deletedResourceForeground": "#C74E39",
|
||||
"--vscode-gitDecoration-modifiedResourceForeground": "#E2C08D",
|
||||
"--vscode-charts-red": "#F48771",
|
||||
"--vscode-charts-blue": "#75BEFF",
|
||||
"--vscode-charts-yellow": "#CCA700",
|
||||
"--vscode-charts-green": "#89D185",
|
||||
"--vscode-charts-orange": "#D18616",
|
||||
"--vscode-charts-purple": "#B180D7",
|
||||
"--vscode-debugTokenExpression-name": "#9CDCFE",
|
||||
"--vscode-debugTokenExpression-type": "#4EC9B0",
|
||||
"--vscode-debugTokenExpression-number": "#B5CEA8",
|
||||
"--vscode-debugTokenExpression-string": "#CE9178",
|
||||
"--vscode-scrollbarSlider-background": "#1F2230AA",
|
||||
"--vscode-scrollbarSlider-hoverBackground": "#3B3F5188",
|
||||
"--vscode-scrollbarSlider-activeBackground": "#3B3F5188",
|
||||
},
|
||||
},
|
||||
|
||||
"hc-light": {
|
||||
colorScheme: "light",
|
||||
vars: {
|
||||
"--vscode-font-family":
|
||||
"-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, Ubuntu, 'Droid Sans', sans-serif",
|
||||
"--vscode-font-size": "13px",
|
||||
"--vscode-font-weight": "normal",
|
||||
"--vscode-editor-background": "#FFFFFF",
|
||||
"--vscode-editor-foreground": "#292929",
|
||||
"--vscode-editor-inactiveSelectionBackground": "#E5EBF1",
|
||||
"--vscode-foreground": "#292929",
|
||||
"--vscode-descriptionForeground": "#292929",
|
||||
"--vscode-disabledForeground": "#7A7A7A",
|
||||
"--vscode-icon-foreground": "#292929",
|
||||
"--vscode-focusBorder": "#0F4A85",
|
||||
"--vscode-textLink-foreground": "#0F4A85",
|
||||
"--vscode-sideBar-background": "#FFFFFF",
|
||||
"--vscode-editorGroupHeader-tabsBackground": "#FFFFFF",
|
||||
"--vscode-editorGroup-border": "#0F4A85",
|
||||
"--vscode-editorWidget-background": "#FFFFFF",
|
||||
"--vscode-editorWidget-border": "#0F4A85",
|
||||
"--vscode-editorStickyScrollHover-background": "#F0F0F0",
|
||||
"--vscode-editorMarkerNavigationError-headerBackground": "#B5200D",
|
||||
"--vscode-editorMarkerNavigationWarning-headerBackground": "#6C4407",
|
||||
"--vscode-editorMarkerNavigationInfo-headerBackground": "#0C5597",
|
||||
"--vscode-input-background": "#FFFFFF",
|
||||
"--vscode-list-activeSelectionBackground": "#0F4A85",
|
||||
"--vscode-list-activeSelectionForeground": "#FFFFFF",
|
||||
"--vscode-list-hoverBackground": "#F2F2F2",
|
||||
"--vscode-list-inactiveSelectionBackground": "#E8E8E8",
|
||||
"--vscode-menu-background": "#FFFFFF",
|
||||
"--vscode-panel-border": "#0F4A85",
|
||||
"--vscode-widget-border": "#0F4A85",
|
||||
"--vscode-button-background": "#0F4A85",
|
||||
"--vscode-button-foreground": "#FFFFFF",
|
||||
"--vscode-button-hoverBackground": "#0A3666",
|
||||
"--vscode-button-secondaryBackground": "#FFFFFF",
|
||||
"--vscode-button-secondaryHoverBackground": "#E8E8E8",
|
||||
"--vscode-toolbar-hoverBackground": "#0000001A",
|
||||
"--vscode-toolbar-activeBackground": "#0000002D",
|
||||
"--vscode-diffEditor-insertedLineBackground": "#DCFEDC",
|
||||
"--vscode-diffEditor-insertedTextBackground": "#2EA04326",
|
||||
"--vscode-diffEditor-removedLineBackground": "#FFE4E4",
|
||||
"--vscode-diffEditor-removedTextBackground": "#F8514926",
|
||||
"--vscode-diffEditor-unchangedCodeBackground": "#F5F5F5",
|
||||
"--vscode-gitDecoration-addedResourceForeground": "#374E06",
|
||||
"--vscode-gitDecoration-deletedResourceForeground": "#AD0707",
|
||||
"--vscode-gitDecoration-modifiedResourceForeground": "#895503",
|
||||
"--vscode-charts-red": "#B5200D",
|
||||
"--vscode-charts-blue": "#0C5597",
|
||||
"--vscode-charts-yellow": "#6C4407",
|
||||
"--vscode-charts-green": "#374E06",
|
||||
"--vscode-charts-orange": "#6C4407",
|
||||
"--vscode-charts-purple": "#5E2CBC",
|
||||
"--vscode-debugTokenExpression-name": "#001080",
|
||||
"--vscode-debugTokenExpression-type": "#185E73",
|
||||
"--vscode-debugTokenExpression-number": "#096D48",
|
||||
"--vscode-debugTokenExpression-string": "#0F4A85",
|
||||
"--vscode-scrollbarSlider-background": "#0F4A854D",
|
||||
"--vscode-scrollbarSlider-hoverBackground": "#0F4A8566",
|
||||
"--vscode-scrollbarSlider-activeBackground": "#0F4A8599",
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -13,5 +13,5 @@
|
||||
"skipLibCheck": true,
|
||||
"isolatedModules": true
|
||||
},
|
||||
"include": ["src/**/*"]
|
||||
"include": ["src/**/*", ".storybook/**/*"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user