chore: merge dev into v2
This commit is contained in:
Aiden Cline
commit
6cd5812ca1
304 changed files with 24678 additions and 4507 deletions
|
|
@ -127,6 +127,12 @@
|
|||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-variant="ghost"][data-scope="file-tree-v2"] {
|
||||
> [data-slot="collapsible-trigger"] {
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { describe, expect, test } from "bun:test"
|
||||
import { scrollKey, scrollTopFromThumbPointer } from "./scroll-view"
|
||||
import { canScrollKey, scrollKey, scrollTopFromThumbPointer } from "./scroll-view"
|
||||
|
||||
describe("scrollKey", () => {
|
||||
test("maps plain navigation keys", () => {
|
||||
|
|
@ -16,6 +16,27 @@ describe("scrollKey", () => {
|
|||
expect(scrollKey({ key: "PageUp", altKey: false, ctrlKey: true, metaKey: false, shiftKey: false })).toBeUndefined()
|
||||
expect(scrollKey({ key: "End", altKey: false, ctrlKey: false, metaKey: false, shiftKey: true })).toBeUndefined()
|
||||
})
|
||||
|
||||
test("maps space and shift-space directions", () => {
|
||||
expect(scrollKey({ key: " ", altKey: false, ctrlKey: false, metaKey: false, shiftKey: false })).toBe("page-down")
|
||||
expect(scrollKey({ key: " ", altKey: false, ctrlKey: false, metaKey: false, shiftKey: true })).toBe("page-up")
|
||||
})
|
||||
})
|
||||
|
||||
describe("canScrollKey", () => {
|
||||
const element = (scrollTop: number, clientHeight = 100, scrollHeight = 300) =>
|
||||
({ scrollTop, clientHeight, scrollHeight }) as HTMLElement
|
||||
|
||||
test("owns upward keys only above the top boundary", () => {
|
||||
expect(canScrollKey(element(50), "page-up")).toBe(true)
|
||||
expect(canScrollKey(element(0), "page-up")).toBe(false)
|
||||
})
|
||||
|
||||
test("owns downward keys only before the bottom boundary", () => {
|
||||
expect(canScrollKey(element(50), "page-down")).toBe(true)
|
||||
expect(canScrollKey(element(200), "page-down")).toBe(false)
|
||||
expect(canScrollKey(element(0, 100, 100), "page-down")).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
describe("scrollTopFromThumbPointer", () => {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,19 @@
|
|||
import { onMount, splitProps, type ComponentProps, Show, mergeProps } from "solid-js"
|
||||
import { onCleanup, onMount, splitProps, type ComponentProps, Show, mergeProps } from "solid-js"
|
||||
import { createResizeObserver } from "@solid-primitives/resize-observer"
|
||||
import { createStore } from "solid-js/store"
|
||||
import { useI18n } from "../context/i18n"
|
||||
|
||||
export type ScrollViewThumbVisibility = "hover" | "scroll"
|
||||
|
||||
export interface ScrollViewProps extends ComponentProps<"div"> {
|
||||
viewportRef?: (el: HTMLDivElement) => void
|
||||
orientation?: "vertical" | "horizontal" // currently only vertical is fully implemented for thumb
|
||||
thumbVisibility?: ScrollViewThumbVisibility
|
||||
}
|
||||
|
||||
export const scrollKey = (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">) => {
|
||||
if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
|
||||
if (event.altKey || event.ctrlKey || event.metaKey) return
|
||||
if (event.shiftKey && event.key !== " ") return
|
||||
|
||||
switch (event.key) {
|
||||
case "PageDown":
|
||||
|
|
@ -24,9 +28,36 @@ export const scrollKey = (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey
|
|||
return "up"
|
||||
case "ArrowDown":
|
||||
return "down"
|
||||
case " ":
|
||||
return event.shiftKey ? "page-up" : "page-down"
|
||||
}
|
||||
}
|
||||
|
||||
export function canScrollKey(element: HTMLElement, key: NonNullable<ReturnType<typeof scrollKey>>) {
|
||||
const up = key === "up" || key === "page-up" || key === "home"
|
||||
return up ? element.scrollTop > 0 : element.scrollTop + element.clientHeight < element.scrollHeight
|
||||
}
|
||||
|
||||
export function scrollKeyOwner(
|
||||
root: HTMLElement,
|
||||
target: EventTarget | null,
|
||||
key: NonNullable<ReturnType<typeof scrollKey>>,
|
||||
) {
|
||||
const element = target instanceof Element ? target : undefined
|
||||
const owner = element?.closest<HTMLElement>("[data-scrollable]")
|
||||
if (!owner || owner === root) return root
|
||||
if (!root.contains(owner)) return owner
|
||||
return canScrollKey(owner, key) ? owner : root
|
||||
}
|
||||
|
||||
export function isScrollKeyTarget(target: EventTarget | null, key: NonNullable<ReturnType<typeof scrollKey>>) {
|
||||
const element = target instanceof HTMLElement ? target : undefined
|
||||
if (!element) return true
|
||||
if (["INPUT", "TEXTAREA", "SELECT"].includes(element.tagName) || element.isContentEditable) return false
|
||||
if ((key === "page-up" || key === "page-down") && element.closest('button, a[href], [role="button"]')) return false
|
||||
return true
|
||||
}
|
||||
|
||||
export function scrollTopFromThumbPointer(input: {
|
||||
pointer: number
|
||||
viewportTop: number
|
||||
|
|
@ -44,10 +75,10 @@ export function scrollTopFromThumbPointer(input: {
|
|||
|
||||
export function ScrollView(props: ScrollViewProps) {
|
||||
const i18n = useI18n()
|
||||
const merged = mergeProps({ orientation: "vertical" }, props)
|
||||
const merged = mergeProps({ orientation: "vertical", thumbVisibility: "hover" }, props)
|
||||
const [local, events, rest] = splitProps(
|
||||
merged,
|
||||
["class", "children", "viewportRef", "orientation", "style"],
|
||||
["class", "children", "viewportRef", "orientation", "thumbVisibility", "style"],
|
||||
[
|
||||
"onScroll",
|
||||
"onWheel",
|
||||
|
|
@ -68,16 +99,37 @@ export function ScrollView(props: ScrollViewProps) {
|
|||
const [state, setState] = createStore({
|
||||
isHovered: false,
|
||||
isDragging: false,
|
||||
isScrolling: false,
|
||||
thumbHeight: 0,
|
||||
thumbTop: 0,
|
||||
showThumb: false,
|
||||
})
|
||||
const isHovered = () => state.isHovered
|
||||
const isDragging = () => state.isDragging
|
||||
const isScrolling = () => state.isScrolling
|
||||
const thumbHeight = () => state.thumbHeight
|
||||
const thumbTop = () => state.thumbTop
|
||||
const showThumb = () => state.showThumb
|
||||
|
||||
let scrollIdleTimer: ReturnType<typeof setTimeout> | undefined
|
||||
|
||||
const markScrolling = () => {
|
||||
if (local.thumbVisibility !== "scroll") return
|
||||
setState("isScrolling", true)
|
||||
if (scrollIdleTimer !== undefined) clearTimeout(scrollIdleTimer)
|
||||
scrollIdleTimer = setTimeout(() => setState("isScrolling", false), 800)
|
||||
}
|
||||
|
||||
const thumbVisible = () => {
|
||||
if (isDragging()) return true
|
||||
if (local.thumbVisibility === "scroll") return isScrolling()
|
||||
return isHovered()
|
||||
}
|
||||
|
||||
onCleanup(() => {
|
||||
if (scrollIdleTimer !== undefined) clearTimeout(scrollIdleTimer)
|
||||
})
|
||||
|
||||
const updateThumb = () => {
|
||||
if (!viewportRef) return
|
||||
const { scrollTop, scrollHeight, clientHeight } = viewportRef
|
||||
|
|
@ -160,9 +212,10 @@ export function ScrollView(props: ScrollViewProps) {
|
|||
if (document.activeElement && ["INPUT", "TEXTAREA", "SELECT"].includes(document.activeElement.tagName)) {
|
||||
return
|
||||
}
|
||||
|
||||
const next = scrollKey(e)
|
||||
if (!next) return
|
||||
if (!isScrollKeyTarget(e.target, next)) return
|
||||
if (scrollKeyOwner(viewportRef, e.target, next) !== viewportRef) return
|
||||
|
||||
const scrollAmount = viewportRef.clientHeight * 0.8
|
||||
const lineAmount = 40
|
||||
|
|
@ -208,11 +261,18 @@ export function ScrollView(props: ScrollViewProps) {
|
|||
<div
|
||||
ref={viewportRef}
|
||||
class="scroll-view__viewport"
|
||||
data-scrollable
|
||||
onScroll={(e) => {
|
||||
updateThumb()
|
||||
markScrolling()
|
||||
if (typeof events.onScroll === "function") events.onScroll(e as any)
|
||||
}}
|
||||
onWheel={events.onWheel as any}
|
||||
onWheel={(e) => {
|
||||
markScrolling()
|
||||
const handler = events.onWheel
|
||||
if (typeof handler === "function") handler(e as any)
|
||||
if (Array.isArray(handler)) handler[0](handler[1], e as any)
|
||||
}}
|
||||
onTouchStart={events.onTouchStart as any}
|
||||
onTouchMove={events.onTouchMove as any}
|
||||
onTouchEnd={events.onTouchEnd as any}
|
||||
|
|
@ -236,7 +296,7 @@ export function ScrollView(props: ScrollViewProps) {
|
|||
ref={thumbRef}
|
||||
onPointerDown={onThumbPointerDown}
|
||||
class="scroll-view__thumb"
|
||||
data-visible={isHovered() || isDragging()}
|
||||
data-visible={thumbVisible()}
|
||||
data-dragging={isDragging()}
|
||||
style={{
|
||||
height: `${thumbHeight()}px`,
|
||||
|
|
|
|||
|
|
@ -135,7 +135,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
#review-panel &[data-variant="normal"][data-orientation="horizontal"] {
|
||||
#review-panel &[data-variant="normal"][data-orientation="horizontal"],
|
||||
#terminal-panel &[data-variant="normal"][data-orientation="horizontal"] {
|
||||
background-color: var(--background-stronger);
|
||||
|
||||
[data-slot="tabs-list"] {
|
||||
|
|
@ -267,6 +268,51 @@
|
|||
}
|
||||
}
|
||||
|
||||
#terminal-panel &[data-variant="normal"][data-orientation="horizontal"] {
|
||||
[data-slot="tabs-list"] {
|
||||
height: 52px;
|
||||
padding-right: 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
[data-slot="tabs-trigger-wrapper"] {
|
||||
height: 28px;
|
||||
padding-inline: 8px;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-slot="tabs-trigger"] {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
&:has([data-slot="tabs-trigger-close-button"]) {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
&:has([data-selected]) {
|
||||
background-color: var(--v2-background-bg-layer-01);
|
||||
box-shadow: inset 0 0 0 0.5px var(--v2-border-border-muted);
|
||||
}
|
||||
}
|
||||
|
||||
[data-slot="terminal-tab-title"] {
|
||||
font-family: Inter, sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 440;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
letter-spacing: -0.04px;
|
||||
color: var(--v2-text-text-base);
|
||||
font-variation-settings: "slnt" 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-variant="alt"] {
|
||||
[data-slot="tabs-list"] {
|
||||
padding-left: 24px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { marked } from "marked"
|
||||
import markedKatex from "marked-katex-extension"
|
||||
import { marked, type MarkedExtension, type Tokens } from "marked"
|
||||
import markedShiki from "marked-shiki"
|
||||
import katex from "katex"
|
||||
import { bundledLanguages, type BundledLanguage } from "shiki"
|
||||
|
|
@ -395,8 +394,8 @@ function renderMathInText(text: string): string {
|
|||
}
|
||||
})
|
||||
|
||||
// Inline math: $...$
|
||||
const inlineMathRegex = /(?<!\$)\$(?!\$)((?:[^$\\]|\\.)+?)\$(?!\$)/g
|
||||
// Inline math: \(...\)
|
||||
const inlineMathRegex = /\\\(((?:\\.|[^\\\n])*?)\\\)/g
|
||||
result = result.replace(inlineMathRegex, (_, math) => {
|
||||
try {
|
||||
return katex.renderToString(math, {
|
||||
|
|
@ -404,13 +403,63 @@ function renderMathInText(text: string): string {
|
|||
throwOnError: false,
|
||||
})
|
||||
} catch {
|
||||
return `$${math}$`
|
||||
return `\\(${math}\\)`
|
||||
}
|
||||
})
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
const inlineMathRegex = /^\\\(((?:\\.|[^\\\n])*?)\\\)/
|
||||
const blockMathRegex = /^\$\$\n([\s\S]+?)\n\$\$(?:\n|$)/
|
||||
|
||||
const katexExtension: MarkedExtension = {
|
||||
extensions: [
|
||||
{
|
||||
name: "inlineKatex",
|
||||
level: "inline",
|
||||
start(src) {
|
||||
const index = src.indexOf("\\(")
|
||||
if (index === -1) return
|
||||
return index
|
||||
},
|
||||
tokenizer(src) {
|
||||
const match = src.match(inlineMathRegex)
|
||||
if (!match) return
|
||||
return {
|
||||
type: "inlineKatex",
|
||||
raw: match[0],
|
||||
text: match[1].trim(),
|
||||
displayMode: false,
|
||||
}
|
||||
},
|
||||
renderer: renderKatexToken,
|
||||
},
|
||||
{
|
||||
name: "blockKatex",
|
||||
level: "block",
|
||||
tokenizer(src) {
|
||||
const match = src.match(blockMathRegex)
|
||||
if (!match) return
|
||||
return {
|
||||
type: "blockKatex",
|
||||
raw: match[0],
|
||||
text: match[1].trim(),
|
||||
displayMode: true,
|
||||
}
|
||||
},
|
||||
renderer: renderKatexToken,
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
function renderKatexToken(token: Tokens.Generic) {
|
||||
return katex.renderToString(typeof token.text === "string" ? token.text : "", {
|
||||
displayMode: token.displayMode === true,
|
||||
throwOnError: false,
|
||||
})
|
||||
}
|
||||
|
||||
function renderMathExpressions(html: string): string {
|
||||
// Split on code/pre/kbd tags to avoid processing their contents
|
||||
const codeBlockPattern = /(<(?:pre|code|kbd)[^>]*>[\s\S]*?<\/(?:pre|code|kbd)>)/gi
|
||||
|
|
@ -480,10 +529,7 @@ export const { use: useMarked, provider: MarkedProvider } = createSimpleContext(
|
|||
},
|
||||
},
|
||||
},
|
||||
markedKatex({
|
||||
throwOnError: false,
|
||||
nonStandard: true,
|
||||
}),
|
||||
katexExtension,
|
||||
markedShiki({
|
||||
async highlight(code, lang) {
|
||||
const highlighter = await getSharedHighlighter({
|
||||
|
|
|
|||
|
|
@ -15,6 +15,23 @@ export const dict: Record<string, string> = {
|
|||
"ui.sessionReview.largeDiff.title": "Diff too large to render",
|
||||
"ui.sessionReview.largeDiff.meta": "Limit: {{limit}} changed lines. Current: {{current}} changed lines.",
|
||||
"ui.sessionReview.largeDiff.renderAnyway": "Render anyway",
|
||||
"ui.sessionReviewV2.expandMode": "Expand or collapse diff",
|
||||
"ui.sessionReviewV2.filterFiles": "Filter files",
|
||||
"ui.sessionReviewV2.toggleSidebar": "Toggle file tree",
|
||||
"ui.sessionReviewV2.showAllLines": "Show all lines",
|
||||
"ui.sessionReviewV2.hideNonDiffLines": "Hide non-diff lines",
|
||||
"ui.sessionReviewV2.unifiedDiff": "Unified diff",
|
||||
"ui.sessionReviewV2.splitDiff": "Split diff",
|
||||
"ui.sessionReviewV2.previousFile": "Previous file",
|
||||
"ui.sessionReviewV2.nextFile": "Next file",
|
||||
"ui.sessionReviewV2.diffView": "Diff view",
|
||||
"ui.sessionReviewV2.empty.noGit.title": "No tracked changes",
|
||||
"ui.sessionReviewV2.empty.noGit.description": "Track, review, and undo changes in this project",
|
||||
"ui.sessionReviewV2.empty.noGit.action": "Create Git repository",
|
||||
"ui.sessionReviewV2.empty.noGit.actionLoading": "Creating Git repository...",
|
||||
"ui.sessionReviewV2.empty.changes.title": "No file changes yet",
|
||||
"ui.sessionReviewV2.empty.changes.description": "Project changes will appear here",
|
||||
|
||||
"ui.sessionReview.openFile": "Open file",
|
||||
"ui.sessionReview.selection.line": "line {{line}}",
|
||||
"ui.sessionReview.selection.lines": "lines {{start}}-{{end}}",
|
||||
|
|
@ -35,6 +52,7 @@ export const dict: Record<string, string> = {
|
|||
"ui.lineComment.editorLabel.suffix": "",
|
||||
"ui.lineComment.placeholder": "Add comment",
|
||||
"ui.lineComment.submit": "Comment",
|
||||
"ui.lineComment.cancel": "Cancel",
|
||||
|
||||
"ui.sessionTurn.steps.show": "Show steps",
|
||||
"ui.sessionTurn.steps.hide": "Hide steps",
|
||||
|
|
|
|||
|
|
@ -281,6 +281,15 @@
|
|||
--icon-agent-docs-base: #fcb239;
|
||||
--icon-agent-ask-base: #2090f5;
|
||||
--icon-agent-build-base: #034cff;
|
||||
--v2-agent-plan-solid: var(--v2-pink-900);
|
||||
--v2-agent-plan-border: rgba(200, 61, 139, 0.5);
|
||||
--v2-agent-plan-background: rgba(253, 236, 243, 0.33);
|
||||
--v2-agent-build-solid: var(--v2-blue-900);
|
||||
--v2-agent-build-border: rgba(59, 92, 246, 0.5);
|
||||
--v2-agent-build-background: rgba(236, 241, 254, 0.33);
|
||||
--v2-agent-explore-solid: var(--v2-yellow-900);
|
||||
--v2-agent-explore-border: rgba(142, 114, 49, 0.5);
|
||||
--v2-agent-explore-background: rgba(254, 250, 236, 0.33);
|
||||
--icon-on-success-base: rgba(18, 201, 5, 0.9);
|
||||
--icon-on-success-hover: rgba(45, 186, 38, 0.9);
|
||||
--icon-on-success-selected: rgba(7, 137, 1, 0.9);
|
||||
|
|
@ -541,6 +550,15 @@
|
|||
--icon-agent-docs-base: #fbb73c;
|
||||
--icon-agent-ask-base: #2090f5;
|
||||
--icon-agent-build-base: #9dbefe;
|
||||
--v2-agent-plan-solid: var(--v2-pink-400);
|
||||
--v2-agent-plan-border: rgba(250, 188, 216, 0.5);
|
||||
--v2-agent-plan-background: rgba(247, 213, 228, 0.1);
|
||||
--v2-agent-build-solid: var(--v2-blue-400);
|
||||
--v2-agent-build-border: rgba(215, 226, 252, 0.5);
|
||||
--v2-agent-build-background: rgba(215, 226, 252, 0.1);
|
||||
--v2-agent-explore-solid: var(--v2-yellow-400);
|
||||
--v2-agent-explore-border: rgba(247, 229, 181, 0.5);
|
||||
--v2-agent-explore-background: rgba(252, 239, 208, 0.1);
|
||||
--icon-on-success-base: rgba(18, 201, 5, 0.9);
|
||||
--icon-on-success-hover: rgba(53, 192, 45, 0.9);
|
||||
--icon-on-success-selected: rgba(77, 225, 68, 0.9);
|
||||
|
|
|
|||
|
|
@ -3,6 +3,30 @@ import { V2_AVATAR_DARK, V2_AVATAR_LIGHT } from "./avatar"
|
|||
|
||||
const ref = (name: string): V2ColorValue => `var(--${name})`
|
||||
|
||||
const lightAgentTokens: Record<string, V2ColorValue> = {
|
||||
"v2-agent-plan-solid": ref("v2-pink-900"),
|
||||
"v2-agent-plan-border": "rgba(200, 61, 139, 0.5)",
|
||||
"v2-agent-plan-background": "rgba(253, 236, 243, 0.33)",
|
||||
"v2-agent-build-solid": ref("v2-blue-900"),
|
||||
"v2-agent-build-border": "rgba(59, 92, 246, 0.5)",
|
||||
"v2-agent-build-background": "rgba(236, 241, 254, 0.33)",
|
||||
"v2-agent-explore-solid": ref("v2-yellow-900"),
|
||||
"v2-agent-explore-border": "rgba(142, 114, 49, 0.5)",
|
||||
"v2-agent-explore-background": "rgba(254, 250, 236, 0.33)",
|
||||
}
|
||||
|
||||
const darkAgentTokens: Record<string, V2ColorValue> = {
|
||||
"v2-agent-plan-solid": ref("v2-pink-400"),
|
||||
"v2-agent-plan-border": "rgba(250, 188, 216, 0.5)",
|
||||
"v2-agent-plan-background": "rgba(247, 213, 228, 0.1)",
|
||||
"v2-agent-build-solid": ref("v2-blue-400"),
|
||||
"v2-agent-build-border": "rgba(215, 226, 252, 0.5)",
|
||||
"v2-agent-build-background": "rgba(215, 226, 252, 0.1)",
|
||||
"v2-agent-explore-solid": ref("v2-yellow-400"),
|
||||
"v2-agent-explore-border": "rgba(247, 229, 181, 0.5)",
|
||||
"v2-agent-explore-background": "rgba(252, 239, 208, 0.1)",
|
||||
}
|
||||
|
||||
const light: Record<string, V2ColorValue> = {
|
||||
"v2-background-bg-base": ref("v2-grey-100"),
|
||||
"v2-background-bg-deep": ref("v2-grey-200"),
|
||||
|
|
@ -46,6 +70,7 @@ const light: Record<string, V2ColorValue> = {
|
|||
"v2-state-bg-info": ref("v2-blue-100"),
|
||||
"v2-state-fg-info": ref("v2-blue-800"),
|
||||
"v2-state-border-info": ref("v2-blue-300"),
|
||||
...lightAgentTokens,
|
||||
...V2_AVATAR_LIGHT,
|
||||
"v2-elevation-raised":
|
||||
"0px 2px 4px 0px var(--v2-alpha-dark-4), 0px 1px 2px -1px var(--v2-alpha-dark-8), 0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0)",
|
||||
|
|
@ -110,6 +135,7 @@ const dark: Record<string, V2ColorValue> = {
|
|||
"v2-state-bg-info": ref("v2-blue-1200"),
|
||||
"v2-state-fg-info": ref("v2-blue-500"),
|
||||
"v2-state-border-info": ref("v2-blue-900"),
|
||||
...darkAgentTokens,
|
||||
...V2_AVATAR_DARK,
|
||||
"v2-elevation-raised":
|
||||
"0px 2px 4px 0px var(--v2-alpha-dark-30), 0px 1px 2px 0px var(--v2-alpha-dark-30), 0px 0px 0px 0.5px var(--v2-alpha-light-16), 0px -0.5px 0px 0px var(--v2-alpha-light-6)",
|
||||
|
|
|
|||
120
packages/ui/src/v2/components/file-tree-v2.css
Normal file
120
packages/ui/src/v2/components/file-tree-v2.css
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
[data-component="file-tree-v2"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"] {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 6px;
|
||||
padding-right: 8px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background-color: transparent;
|
||||
color: var(--v2-text-text-muted);
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color 120ms ease,
|
||||
color 120ms ease;
|
||||
}
|
||||
|
||||
[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-ignored] {
|
||||
color: var(--v2-text-text-faint);
|
||||
}
|
||||
|
||||
[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"]:hover {
|
||||
background-color: var(--v2-overlay-simple-overlay-hover);
|
||||
}
|
||||
|
||||
[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-selected] {
|
||||
color: var(--v2-text-text-base);
|
||||
background-color: var(--v2-overlay-simple-overlay-pressed);
|
||||
}
|
||||
|
||||
[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-selected]:hover {
|
||||
background-color: var(--v2-overlay-simple-overlay-pressed);
|
||||
}
|
||||
|
||||
[data-component="file-tree-v2"] .filetree-icon--mono {
|
||||
color: var(--v2-icon-icon-muted);
|
||||
}
|
||||
|
||||
[data-component="file-tree-v2"] .filetree-iconpair .filetree-icon--color {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-selected] .filetree-iconpair .filetree-icon--color {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-selected] .filetree-iconpair .filetree-icon--mono {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
[data-component="file-tree-v2"] [data-slot="file-tree-v2-chevron"] {
|
||||
color: var(--v2-text-text-muted);
|
||||
}
|
||||
|
||||
[data-component="file-tree-v2"] [data-slot="file-tree-v2-chevron"] svg {
|
||||
transition: transform 120ms ease;
|
||||
}
|
||||
|
||||
[data-component="file-tree-v2"] [data-slot="file-tree-v2-chevron"]:not([data-expanded]) svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-selected] [data-slot="file-tree-v2-chevron"] {
|
||||
color: var(--v2-text-text-base);
|
||||
}
|
||||
|
||||
[data-component="file-tree-v2"] .filetree-iconpair {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
[data-component="file-tree-v2"] .filetree-iconpair [data-component="file-icon"] {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
[data-component="file-tree-v2"] [data-slot="file-tree-v2-change"] {
|
||||
box-sizing: border-box;
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
font-size: 11px;
|
||||
font-weight: 530;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.04px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-variant-numeric: tabular-nums lining-nums;
|
||||
font-feature-settings:
|
||||
"tnum" on,
|
||||
"lnum" on;
|
||||
}
|
||||
|
||||
[data-component="file-tree-v2"] [data-slot="file-tree-v2-change"][data-change="modified"] {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
[data-component="file-tree-v2"] [data-slot="file-tree-v2-change"][data-change="added"] {
|
||||
color: var(--v2-state-fg-success);
|
||||
}
|
||||
|
||||
[data-component="file-tree-v2"] [data-slot="file-tree-v2-change"][data-change="deleted"] {
|
||||
color: var(--v2-state-fg-danger);
|
||||
}
|
||||
|
|
@ -57,6 +57,10 @@ const icons = {
|
|||
viewBox: "0 0 16 16",
|
||||
body: `<path d="M5 6.5L8 9.5L11 6.5" stroke="currentColor"/>`,
|
||||
},
|
||||
collapse: {
|
||||
viewBox: "0 0 16 16",
|
||||
body: `<path d="M8 1V6M11 3L8 6L5 3" stroke="currentColor"/><path d="M8 15V10M11 13L8 10L5 13" stroke="currentColor"/><path d="M4 8H6" stroke="currentColor"/><path d="M7 8H9" stroke="currentColor"/><path d="M10 8H12" stroke="currentColor"/>`,
|
||||
},
|
||||
check: {
|
||||
viewBox: "0 0 16 16",
|
||||
body: `<path d="M3.53613 8.17857L6.39328 11.75L12.4647 4.25" stroke="currentColor"/>`,
|
||||
|
|
@ -93,6 +97,26 @@ const icons = {
|
|||
viewBox: "0 0 16 16",
|
||||
body: `<path d="M2.5 7.5H3.5V8.5H2.5V7.5Z" stroke="currentColor"/><path d="M7.5 7.5H8.5V8.5H7.5V7.5Z" stroke="currentColor"/><path d="M12.5 7.5H13.5V8.5H12.5V7.5Z" stroke="currentColor"/>`,
|
||||
},
|
||||
expand: {
|
||||
viewBox: "0 0 16 16",
|
||||
body: `<path d="M8.25 6.17773V1.17773M11.25 4.17773L8.25 1.17773L5.25 4.17773" stroke="currentColor"/><path d="M8.25 9.17773V14.1777M11.25 11.1777L8.25 14.1777L5.25 11.1777" stroke="currentColor"/><path d="M4.25 7.67773H12.25" stroke="currentColor"/>`,
|
||||
},
|
||||
filetree: {
|
||||
viewBox: "0 0 16 16",
|
||||
body: `<path d="M2.5 1.5V12.2484H6.75M2.5 4.74838H6.75" stroke="currentColor"/><rect x="8.5" y="3.2168" width="6" height="3" fill="none" stroke="currentColor"/><rect x="8.5" y="10.75" width="6" height="3" fill="none" stroke="currentColor"/>`,
|
||||
},
|
||||
split: {
|
||||
viewBox: "0 0 16 16",
|
||||
body: `<path d="M1 14H15L15 2H1V14Z" stroke="currentColor"/><rect x="3" y="4" width="4" height="8" fill="currentColor" fill-opacity="0.5"/><rect x="9" y="4" width="4" height="8" fill="currentColor" fill-opacity="0.5"/>`,
|
||||
},
|
||||
unified: {
|
||||
viewBox: "0 0 16 16",
|
||||
body: `<path d="M3.00001 4.00045L12.9998 4L13 6.99955L3 7L3.00001 4.00045Z" fill="currentColor" fill-opacity="0.5"/><path d="M3.0001 9H13L12.9999 12H3L3.0001 9Z" fill="currentColor" fill-opacity="0.5"/><path d="M1 14H15L15 2H1V14Z" stroke="currentColor"/>`,
|
||||
},
|
||||
review: {
|
||||
viewBox: "0 0 20 20",
|
||||
body: `<path d="M7 14.5H13M7 7.99512H10.0049M10.0049 7.99512H13M10.0049 7.99512V5M10.0049 7.99512V11M18 18V2L2 2L2 18H18Z" stroke="currentColor"/>`,
|
||||
},
|
||||
"outline-sliders": {
|
||||
viewBox: "0 0 16 16",
|
||||
body: `<path d="M11.7779 4.66675H14.4446M11.7779 4.66675C11.7779 5.77132 10.8825 6.66675 9.77789 6.66675C8.67332 6.66675 7.77789 5.77132 7.77789 4.66675M11.7779 4.66675C11.7779 3.56218 10.8825 2.66675 9.77789 2.66675C8.67332 2.66675 7.77789 3.56218 7.77789 4.66675M1.55566 4.66675H7.77789M4.22233 11.3334H1.55566M4.22233 11.3334C4.22233 12.438 5.11776 13.3334 6.22233 13.3334C7.3269 13.3334 8.22233 12.438 8.22233 11.3334M4.22233 11.3334C4.22233 10.2288 5.11776 9.33341 6.22233 9.33341C7.3269 9.33341 8.22233 10.2288 8.22233 11.3334M14.4446 11.3334H8.22233" stroke="currentColor"/>`,
|
||||
|
|
|
|||
|
|
@ -81,6 +81,13 @@
|
|||
--project-avatar-border: var(--v2-avatar-border-gray);
|
||||
}
|
||||
|
||||
[data-slot="project-avatar-surface"][data-variant="outline"] {
|
||||
--project-avatar-bg: var(--v2-background-bg-base);
|
||||
--project-avatar-border: var(--v2-border-border-strong);
|
||||
color: var(--v2-text-text-muted);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
[data-slot="project-avatar-surface"][data-has-image] {
|
||||
background: var(--project-avatar-bg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ Saturated 16px project avatar with color variants and optional unread dot.
|
|||
|
||||
### Variants
|
||||
- Color: orange, yellow, cyan, green, red, pink, blue, purple, gray.
|
||||
- Outline: neutral, muted style for de-emphasized projects (e.g. recently closed).
|
||||
- Image vs initial content state.
|
||||
- Unread dot with corner mask when \`unread\` is set.
|
||||
|
||||
|
|
@ -33,7 +34,7 @@ export default {
|
|||
argTypes: {
|
||||
variant: {
|
||||
control: "select",
|
||||
options: [...PROJECT_AVATAR_VARIANTS],
|
||||
options: [...PROJECT_AVATAR_VARIANTS, "outline"],
|
||||
},
|
||||
},
|
||||
args: {
|
||||
|
|
@ -62,6 +63,13 @@ export const AllVariants = {
|
|||
),
|
||||
}
|
||||
|
||||
export const Outline = {
|
||||
args: {
|
||||
fallback: "O",
|
||||
variant: "outline",
|
||||
},
|
||||
}
|
||||
|
||||
export const Unread = {
|
||||
args: {
|
||||
fallback: "O",
|
||||
|
|
|
|||
|
|
@ -26,10 +26,13 @@ export const PROJECT_AVATAR_VARIANTS = [
|
|||
|
||||
export type ProjectAvatarVariant = (typeof PROJECT_AVATAR_VARIANTS)[number]
|
||||
|
||||
// "outline" is a neutral, muted style (e.g. recently closed projects) and is not part of the color rotation.
|
||||
export type ProjectAvatarStyle = ProjectAvatarVariant | "outline"
|
||||
|
||||
export interface ProjectAvatarProps extends ComponentProps<"div"> {
|
||||
fallback: string
|
||||
src?: string
|
||||
variant?: ProjectAvatarVariant
|
||||
variant?: ProjectAvatarStyle
|
||||
unread?: boolean
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -53,11 +53,30 @@
|
|||
align-items: center;
|
||||
align-self: stretch;
|
||||
padding: 0;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
[data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 8px;
|
||||
color: var(--v2-icon-icon-muted);
|
||||
}
|
||||
|
||||
[data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] :is(svg, [data-slot="icon-svg"]) {
|
||||
display: block;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
[data-component="text-input-v2"][data-leading-icon] [data-slot="text-input-v2-input"] {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
[data-component="text-input-v2"] [data-slot="text-input-v2-input"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -81,6 +100,12 @@
|
|||
color: var(--v2-text-text-faint);
|
||||
}
|
||||
|
||||
[data-component="text-input-v2"] [data-slot="text-input-v2-input"][type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-component="text-input-v2"][data-numeric] [data-slot="text-input-v2-input"] {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
|
@ -134,6 +159,14 @@
|
|||
color: currentColor;
|
||||
}
|
||||
|
||||
[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"][data-variant="clear"] {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
border-radius: 6px;
|
||||
margin-right: -8px;
|
||||
}
|
||||
|
||||
[data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"] {
|
||||
color: var(--v2-state-fg-danger);
|
||||
caret-color: var(--v2-state-fg-danger);
|
||||
|
|
|
|||
|
|
@ -1,13 +1,20 @@
|
|||
import { type ComponentProps, Show, splitProps } from "solid-js"
|
||||
import { type ComponentProps, type JSX, Show, splitProps } from "solid-js"
|
||||
import { Icon } from "./icon"
|
||||
import "./text-input-v2.css"
|
||||
|
||||
export interface TextInputV2Props extends Omit<ComponentProps<"input">, "type"> {
|
||||
/** Icon or adornment shown before the field value. */
|
||||
leadingIcon?: JSX.Element
|
||||
/** Show the trailing copy action. */
|
||||
showCopyButton?: boolean
|
||||
/** Show the trailing clear action. */
|
||||
showClearButton?: boolean
|
||||
/** Accessible label for the copy button. */
|
||||
copyLabel?: string
|
||||
/** Accessible label for the clear button. */
|
||||
clearLabel?: string
|
||||
onCopyClick?: (event: MouseEvent) => void
|
||||
onClearClick?: (event: MouseEvent) => void
|
||||
/** Apply tabular numerals to the field value. */
|
||||
numeric?: boolean
|
||||
/** Error styling for the field and value text. */
|
||||
|
|
@ -21,9 +28,13 @@ export function TextInputV2(props: TextInputV2Props) {
|
|||
const [local, inputProps] = splitProps(props, [
|
||||
"class",
|
||||
"classList",
|
||||
"leadingIcon",
|
||||
"showCopyButton",
|
||||
"showClearButton",
|
||||
"copyLabel",
|
||||
"clearLabel",
|
||||
"onCopyClick",
|
||||
"onClearClick",
|
||||
"numeric",
|
||||
"invalid",
|
||||
"appearance",
|
||||
|
|
@ -37,12 +48,16 @@ export function TextInputV2(props: TextInputV2Props) {
|
|||
data-invalid={local.invalid ? "" : undefined}
|
||||
data-numeric={local.numeric ? "" : undefined}
|
||||
data-appearance={local.appearance ?? "base"}
|
||||
data-leading-icon={local.leadingIcon ? "" : undefined}
|
||||
classList={{
|
||||
...local.classList,
|
||||
[local.class ?? ""]: !!local.class,
|
||||
}}
|
||||
>
|
||||
<div data-slot="text-input-v2-value">
|
||||
<Show when={local.leadingIcon}>
|
||||
<span data-slot="text-input-v2-leading-icon">{local.leadingIcon}</span>
|
||||
</Show>
|
||||
<input
|
||||
{...inputProps}
|
||||
type={inputProps.type ?? "text"}
|
||||
|
|
@ -51,15 +66,26 @@ export function TextInputV2(props: TextInputV2Props) {
|
|||
data-slot="text-input-v2-input"
|
||||
/>
|
||||
</div>
|
||||
<Show when={local.showCopyButton}>
|
||||
<Show when={local.showClearButton || local.showCopyButton}>
|
||||
<button
|
||||
type="button"
|
||||
data-slot="text-input-v2-icon-button"
|
||||
aria-label={local.copyLabel ?? "Copy"}
|
||||
data-variant={local.showClearButton ? "clear" : "copy"}
|
||||
aria-label={local.showClearButton ? (local.clearLabel ?? "Clear") : (local.copyLabel ?? "Copy")}
|
||||
disabled={local.disabled}
|
||||
onClick={local.onCopyClick}
|
||||
onMouseDown={(event) => {
|
||||
if (!local.showClearButton) return
|
||||
event.preventDefault()
|
||||
}}
|
||||
onClick={(event) => {
|
||||
if (local.showClearButton) {
|
||||
local.onClearClick?.(event)
|
||||
return
|
||||
}
|
||||
local.onCopyClick?.(event)
|
||||
}}
|
||||
>
|
||||
<Icon name="copy" />
|
||||
<Icon name={local.showClearButton ? "xmark-small" : "copy"} />
|
||||
</button>
|
||||
</Show>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -97,44 +97,46 @@ export interface ToastV2Options {
|
|||
|
||||
export function showToastV2(options: ToastV2Options | string) {
|
||||
const opts = typeof options === "string" ? { description: options } : options
|
||||
const resolvedIcon = children(() => opts.icon)
|
||||
return toaster.show((props) => (
|
||||
<ToastV2 toastId={props.toastId} duration={opts.duration} persistent={opts.persistent}>
|
||||
<div data-slot="toast-v2-header">
|
||||
<Show when={resolvedIcon()}>
|
||||
<ToastV2.Icon>{resolvedIcon()}</ToastV2.Icon>
|
||||
return toaster.show((props) => {
|
||||
const resolvedIcon = children(() => opts.icon)
|
||||
return (
|
||||
<ToastV2 toastId={props.toastId} duration={opts.duration} persistent={opts.persistent}>
|
||||
<div data-slot="toast-v2-header">
|
||||
<Show when={resolvedIcon()}>
|
||||
<ToastV2.Icon>{resolvedIcon()}</ToastV2.Icon>
|
||||
</Show>
|
||||
<ToastV2.Content>
|
||||
<Show when={opts.title}>
|
||||
<ToastV2.Title>{opts.title}</ToastV2.Title>
|
||||
</Show>
|
||||
<Show when={opts.description}>
|
||||
<ToastV2.Description>{opts.description}</ToastV2.Description>
|
||||
</Show>
|
||||
</ToastV2.Content>
|
||||
<ToastV2.CloseButton />
|
||||
</div>
|
||||
<Show when={opts.actions?.length}>
|
||||
<ToastV2.Actions>
|
||||
{opts.actions!.map((action) => (
|
||||
<ButtonV2
|
||||
variant={action.variant === "secondary" ? "ghost" : "neutral"}
|
||||
size="small"
|
||||
data-action-variant={action.variant ?? "primary"}
|
||||
onClick={() => {
|
||||
if (typeof action.onClick === "function") {
|
||||
action.onClick()
|
||||
}
|
||||
toaster.dismiss(props.toastId)
|
||||
}}
|
||||
>
|
||||
{action.label}
|
||||
</ButtonV2>
|
||||
))}
|
||||
</ToastV2.Actions>
|
||||
</Show>
|
||||
<ToastV2.Content>
|
||||
<Show when={opts.title}>
|
||||
<ToastV2.Title>{opts.title}</ToastV2.Title>
|
||||
</Show>
|
||||
<Show when={opts.description}>
|
||||
<ToastV2.Description>{opts.description}</ToastV2.Description>
|
||||
</Show>
|
||||
</ToastV2.Content>
|
||||
<ToastV2.CloseButton />
|
||||
</div>
|
||||
<Show when={opts.actions?.length}>
|
||||
<ToastV2.Actions>
|
||||
{opts.actions!.map((action) => (
|
||||
<ButtonV2
|
||||
variant={action.variant === "secondary" ? "ghost" : "neutral"}
|
||||
size="small"
|
||||
data-action-variant={action.variant ?? "primary"}
|
||||
onClick={() => {
|
||||
if (typeof action.onClick === "function") {
|
||||
action.onClick()
|
||||
}
|
||||
toaster.dismiss(props.toastId)
|
||||
}}
|
||||
>
|
||||
{action.label}
|
||||
</ButtonV2>
|
||||
))}
|
||||
</ToastV2.Actions>
|
||||
</Show>
|
||||
</ToastV2>
|
||||
))
|
||||
</ToastV2>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
export interface ToastV2PromiseOptions<T, U = unknown> {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,12 @@
|
|||
display: flex;
|
||||
}
|
||||
|
||||
[data-popper-positioner]:has([data-component="tooltip-v2"]) {
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
[data-component="tooltip-v2"] {
|
||||
z-index: 1000;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
|
|
|
|||
|
|
@ -77,6 +77,16 @@
|
|||
--v2-state-fg-info: var(--v2-blue-800);
|
||||
--v2-state-border-info: var(--v2-blue-300);
|
||||
|
||||
--v2-agent-plan-solid: var(--v2-pink-900);
|
||||
--v2-agent-plan-border: rgba(200, 61, 139, 0.5);
|
||||
--v2-agent-plan-background: rgba(253, 236, 243, 0.33);
|
||||
--v2-agent-build-solid: var(--v2-blue-900);
|
||||
--v2-agent-build-border: rgba(59, 92, 246, 0.5);
|
||||
--v2-agent-build-background: rgba(236, 241, 254, 0.33);
|
||||
--v2-agent-explore-solid: var(--v2-yellow-900);
|
||||
--v2-agent-explore-border: rgba(142, 114, 49, 0.5);
|
||||
--v2-agent-explore-background: rgba(254, 250, 236, 0.33);
|
||||
|
||||
/* ── Project avatar (fixed; theme-independent) ── */
|
||||
--v2-avatar-fg: #ffffffff;
|
||||
--v2-avatar-bg-orange: #ee7330ff;
|
||||
|
|
@ -193,6 +203,16 @@
|
|||
--v2-state-fg-info: var(--v2-blue-500);
|
||||
--v2-state-border-info: var(--v2-blue-900);
|
||||
|
||||
--v2-agent-plan-solid: var(--v2-pink-400);
|
||||
--v2-agent-plan-border: rgba(250, 188, 216, 0.5);
|
||||
--v2-agent-plan-background: rgba(247, 213, 228, 0.1);
|
||||
--v2-agent-build-solid: var(--v2-blue-400);
|
||||
--v2-agent-build-border: rgba(215, 226, 252, 0.5);
|
||||
--v2-agent-build-background: rgba(215, 226, 252, 0.1);
|
||||
--v2-agent-explore-solid: var(--v2-yellow-400);
|
||||
--v2-agent-explore-border: rgba(247, 229, 181, 0.5);
|
||||
--v2-agent-explore-background: rgba(252, 239, 208, 0.1);
|
||||
|
||||
--v2-elevation-raised:
|
||||
0px 2px 4px 0px var(--v2-alpha-dark-30),
|
||||
0px 1px 2px 0px var(--v2-alpha-dark-30),
|
||||
|
|
@ -296,6 +316,16 @@
|
|||
--v2-state-fg-info: var(--v2-blue-800);
|
||||
--v2-state-border-info: var(--v2-blue-300);
|
||||
|
||||
--v2-agent-plan-solid: var(--v2-pink-900);
|
||||
--v2-agent-plan-border: rgba(200, 61, 139, 0.5);
|
||||
--v2-agent-plan-background: rgba(253, 236, 243, 0.33);
|
||||
--v2-agent-build-solid: var(--v2-blue-900);
|
||||
--v2-agent-build-border: rgba(59, 92, 246, 0.5);
|
||||
--v2-agent-build-background: rgba(236, 241, 254, 0.33);
|
||||
--v2-agent-explore-solid: var(--v2-yellow-900);
|
||||
--v2-agent-explore-border: rgba(142, 114, 49, 0.5);
|
||||
--v2-agent-explore-background: rgba(254, 250, 236, 0.33);
|
||||
|
||||
--v2-elevation-raised:
|
||||
0px 2px 4px 0px var(--v2-alpha-dark-4), 0px 1px 2px -1px var(--v2-alpha-dark-8),
|
||||
0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0);
|
||||
|
|
@ -406,6 +436,16 @@
|
|||
--v2-state-fg-info: var(--v2-blue-500);
|
||||
--v2-state-border-info: var(--v2-blue-900);
|
||||
|
||||
--v2-agent-plan-solid: var(--v2-pink-400);
|
||||
--v2-agent-plan-border: rgba(250, 188, 216, 0.5);
|
||||
--v2-agent-plan-background: rgba(247, 213, 228, 0.1);
|
||||
--v2-agent-build-solid: var(--v2-blue-400);
|
||||
--v2-agent-build-border: rgba(215, 226, 252, 0.5);
|
||||
--v2-agent-build-background: rgba(215, 226, 252, 0.1);
|
||||
--v2-agent-explore-solid: var(--v2-yellow-400);
|
||||
--v2-agent-explore-border: rgba(247, 229, 181, 0.5);
|
||||
--v2-agent-explore-background: rgba(252, 239, 208, 0.1);
|
||||
|
||||
--v2-avatar-fg: #ffffffff;
|
||||
--v2-avatar-bg-orange: #723d22ff;
|
||||
--v2-avatar-border-orange: #ff8648ff;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue