ai-workspace-services/opencode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(app): update all components to use v2 tokens (#33598)

Browse Source
This commit is contained in:
Aarav Sareen 2026-06-24 11:03:14 +05:30 committed by GitHub
parent 6c12c32fb1
commit 8aff7b8c7b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 117 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/ui/src/v2/components/accordion-v2.css
View File

@ -1,8 +1,8 @@
[data-component="accordion-v2"] {
--accordion-v2-fg: var(--text-text-base);
--accordion-v2-icon: var(--icon-icon-base);
--accordion-v2-border: var(--border-border-strong);
--accordion-v2-bg: var(--background-bg-base);
--accordion-v2-fg: var(--v2-text-text-base);
--accordion-v2-icon: var(--v2-icon-icon-base);
--accordion-v2-border: var(--v2-border-border-strong);
--accordion-v2-bg: var(--v2-background-bg-base);
box-sizing: border-box;
display: flex;

14
packages/ui/src/v2/components/basic-tool-v2.css
View File

@ -5,12 +5,12 @@
}
[data-component="basic-tool-v2"] {
--bt-title: var(--text-text-base);
--bt-sep: var(--text-text-muted);
--bt-subtitle: var(--text-text-muted);
--bt-args: var(--text-text-muted);
--bt-chevron: var(--text-text-faint);
--bt-content: var(--text-text-muted);
--bt-title: var(--v2-text-text-base);
--bt-sep: var(--v2-text-text-muted);
--bt-subtitle: var(--v2-text-text-muted);
--bt-args: var(--v2-text-text-muted);
--bt-chevron: var(--v2-text-text-faint);
--bt-content: var(--v2-text-text-muted);
box-sizing: border-box;
display: flex;
@ -40,7 +40,7 @@
}
[data-slot="basic-tool-v2-trigger"]:focus-visible {
outline: 2px solid var(--border-border-focus);
outline: 2px solid var(--v2-border-border-focus);
outline-offset: 2px;
border-radius: 2px;
}

26
packages/ui/src/v2/components/checkbox-v2.css
View File

@ -9,7 +9,7 @@
}
[data-slot="checkbox-v2-error"] {
color: var(--state-fg-danger);
color: var(--v2-state-fg-danger);
font-size: 12px;
font-weight: var(--font-weight-regular);
line-height: var(--line-height-normal);
@ -59,9 +59,9 @@
top: calc(50% - 16px / 2);
border-radius: 4px;
border: none;
box-shadow: inset 0 0 0 0.5px var(--border-border-strong);
box-shadow: inset 0 0 0 0.5px var(--v2-border-border-strong);
background: linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
background: linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
transition:
background 170ms ease-out,
opacity 170ms ease-out,
@ -99,14 +99,14 @@
display: inline-flex;
align-items: center;
user-select: none;
color: var(--text-text-base);
color: var(--v2-text-text-base);
font-size: 13px;
line-height: 20px;
letter-spacing: -0.04px;
}
[data-slot="checkbox-v2-description"] {
color: var(--text-text-muted);
color: var(--v2-text-text-muted);
font-size: 11px;
font-weight: 440;
line-height: 1;
@ -120,7 +120,7 @@
[data-slot="checkbox-v2-input"]:focus-visible
~ [data-slot="checkbox-v2-control-stack"]
[data-slot="checkbox-v2-control"] {
outline: 2px solid var(--border-border-focus);
outline: 2px solid var(--v2-border-border-focus);
outline-offset: 1px;
}
@ -129,8 +129,8 @@
)
[data-slot="checkbox-v2-control"] {
background:
linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
}
[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-control"] {
@ -138,7 +138,7 @@
}
[data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]) [data-slot="checkbox-v2-control"] {
background: linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%), var(--background-bg-accent);
background: linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-accent);
}
[data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]):where(:hover):where(
@ -146,14 +146,14 @@
)
[data-slot="checkbox-v2-control"] {
background:
linear-gradient(0deg, var(--overlay-simple-overlay-contrast-hover), var(--overlay-simple-overlay-contrast-hover)),
linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%), var(--background-bg-accent);
linear-gradient(0deg, var(--v2-overlay-simple-overlay-contrast-hover), var(--v2-overlay-simple-overlay-contrast-hover)),
linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-accent);
}
[data-slot="checkbox-v2"]:where([data-invalid]):where(:not([data-checked], [data-indeterminate]))
[data-slot="checkbox-v2-control"] {
background: var(--state-bg-danger);
box-shadow: inset 0 0 0 0.5px #b82d35;
background: var(--v2-state-bg-danger);
box-shadow: inset 0 0 0 0.5px var(--v2-state-border-danger);
}
[data-slot="checkbox-v2"] .checkbox-v2-icon {

1
packages/ui/src/v2/components/dialog-v2.css
View File

@ -91,6 +91,7 @@
border-radius: 4px;
flex-shrink: 0;
cursor: pointer;
color: var(--v2-icon-icon-muted);
&:hover {
background: var(--v2-overlay-simple-overlay-hover);

2
packages/ui/src/v2/components/dialog-v2.tsx
View File

@ -78,7 +78,7 @@ export function Dialog(props: DialogProps) {
>
<path
d="M12.4446 3.55469L3.55566 12.4436M3.55566 3.55469L12.4446 12.4436"
stroke="#808080"
stroke="currentColor"
stroke-linejoin="round"
/>
</svg>

4
packages/ui/src/v2/components/diff-changes-v2.css
View File

@ -15,10 +15,10 @@
}
[data-slot="diff-changes-additions"] {
color: var(--state-fg-success);
color: var(--v2-state-fg-success);
}
[data-slot="diff-changes-deletions"] {
color: var(--state-fg-danger);
color: var(--v2-state-fg-danger);
}
}

10
packages/ui/src/v2/components/field-v2.css
View File

@ -22,7 +22,7 @@
font-size: 13px;
line-height: 1;
letter-spacing: -0.04px;
color: var(--text-text-base);
color: var(--v2-text-text-base);
font-variation-settings: "slnt" 0;
cursor: default;
user-select: none;
@ -51,13 +51,13 @@
border: 0;
border-radius: 0;
background: transparent;
color: var(--icon-icon-muted);
color: var(--v2-icon-icon-muted);
cursor: pointer;
outline: none;
}
[data-component="field-v2"] [data-slot="field-v2-label-info"]:is(:hover, [data-state="hover"]) {
color: var(--text-text-base);
color: var(--v2-text-text-base);
}
[data-component="field-v2"] [data-slot="field-v2-label-info"]:focus {
@ -65,7 +65,7 @@
}
[data-component="field-v2"] [data-slot="field-v2-label-info"]:focus-visible {
outline: 2px solid var(--border-border-focus);
outline: 2px solid var(--v2-border-border-focus);
outline-offset: 1px;
border-radius: 2px;
}
@ -80,7 +80,7 @@
font-size: 11px;
line-height: 1;
letter-spacing: 0.05px;
color: var(--text-text-muted);
color: var(--v2-text-text-muted);
font-variation-settings: "slnt" 0;
user-select: none;
}

38
packages/ui/src/v2/components/inline-input-v2.css
View File

@ -10,8 +10,8 @@
border-radius: 6px;
outline: 1px solid transparent;
outline-offset: 0;
background: linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
box-shadow: var(--elevation-button-neutral);
background: linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
box-shadow: var(--v2-elevation-button-neutral);
flex: none;
align-self: stretch;
overflow: hidden;
@ -27,8 +27,8 @@
[data-component="inline-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
background:
linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
}
[data-component="inline-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within)
@ -37,12 +37,12 @@
}
[data-component="inline-input-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
outline-color: var(--border-border-focus);
outline-color: var(--v2-border-border-focus);
box-shadow: none;
}
[data-component="inline-input-v2"]:where([data-invalid]):not([data-disabled]) {
outline-color: var(--state-fg-danger);
outline-color: var(--v2-state-fg-danger);
box-shadow: none;
}
@ -64,7 +64,7 @@
max-width: 100%;
padding: 4px 8px;
gap: 4px;
background: var(--background-bg-layer-01);
background: var(--v2-background-bg-layer-01);
border-radius: 4px 0 0 4px;
transition: background 85ms ease-out;
}
@ -86,7 +86,7 @@
font-size: 13px;
line-height: 1;
letter-spacing: -0.04px;
color: var(--text-text-muted);
color: var(--v2-text-text-muted);
font-variation-settings: "slnt" 0;
}
@ -99,7 +99,7 @@
align-self: stretch;
width: 0.5px;
min-width: 0.5px;
background: var(--border-border-base);
background: var(--v2-border-border-base);
}
[data-component="inline-input-v2"] [data-slot="inline-input-v2-field"] {
@ -142,12 +142,12 @@
font-size: 13px;
line-height: 1;
letter-spacing: -0.04px;
color: var(--text-text-base);
color: var(--v2-text-text-base);
font-variation-settings: "slnt" 0;
}
[data-component="inline-input-v2"] [data-slot="inline-input-v2-input"]::placeholder {
color: var(--text-text-faint);
color: var(--v2-text-text-faint);
}
[data-component="inline-input-v2"][data-numeric] [data-slot="inline-input-v2-input"] {
@ -167,19 +167,19 @@
border: 0;
border-radius: 4px;
background: transparent;
color: var(--icon-icon-muted);
color: var(--v2-icon-icon-muted);
cursor: pointer;
outline: none;
}
[data-component="inline-input-v2"]
[data-slot="inline-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) {
background-color: var(--overlay-simple-overlay-hover);
background-color: var(--v2-overlay-simple-overlay-hover);
}
[data-component="inline-input-v2"]
[data-slot="inline-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) {
background-color: var(--overlay-simple-overlay-pressed);
background-color: var(--v2-overlay-simple-overlay-pressed);
}
[data-component="inline-input-v2"] [data-slot="inline-input-v2-icon-button"]:focus {
@ -187,7 +187,7 @@
}
[data-component="inline-input-v2"] [data-slot="inline-input-v2-icon-button"]:focus-visible {
outline: 2px solid var(--border-border-focus);
outline: 2px solid var(--v2-border-border-focus);
outline-offset: 1px;
}
@ -203,15 +203,15 @@
}
[data-component="inline-input-v2"][data-invalid]:not([data-disabled]) [data-slot="inline-input-v2-prefix-text"] {
color: var(--text-text-muted);
color: var(--v2-text-text-muted);
}
[data-component="inline-input-v2"][data-invalid]:not([data-disabled]) [data-slot="inline-input-v2-input"] {
color: var(--state-fg-danger);
caret-color: var(--state-fg-danger);
color: var(--v2-state-fg-danger);
caret-color: var(--v2-state-fg-danger);
}
[data-component="inline-input-v2"][data-invalid]:not([data-disabled]) [data-slot="inline-input-v2-input"]::placeholder {
color: var(--state-fg-danger);
color: var(--v2-state-fg-danger);
opacity: 1;
}

30
packages/ui/src/v2/components/line-comment-v2.css
View File

@ -19,9 +19,9 @@
}
[data-component="line-comment-v2"] [data-slot="line-comment-v2-shell"] {
background: var(--background-bg-layer-01);
background: var(--v2-background-bg-layer-01);
border-radius: 6px;
box-shadow: var(--elevation-raised);
box-shadow: var(--v2-elevation-raised);
}
/* --- Display (read) --- */
@ -50,7 +50,7 @@
font-weight: 440;
line-height: 1;
letter-spacing: -0.04px;
color: var(--text-text-base);
color: var(--v2-text-text-base);
font-variation-settings: "slnt" 0;
}
@ -60,7 +60,7 @@
font-weight: 530;
line-height: 1;
letter-spacing: 0.05px;
color: var(--text-text-faint);
color: var(--v2-text-text-faint);
font-variation-settings: "slnt" 0;
}
@ -84,7 +84,7 @@
border: none;
border-radius: 4px;
background: transparent;
color: var(--icon-icon-muted);
color: var(--v2-icon-icon-muted);
cursor: pointer;
outline: none;
}
@ -94,16 +94,16 @@
}
[data-slot="line-comment-v2-overflow"]:focus-visible {
outline: 2px solid var(--border-border-focus);
outline: 2px solid var(--v2-border-border-focus);
outline-offset: 2px;
}
[data-slot="line-comment-v2-overflow"]:is(:hover, [data-state="hover"]) {
background-color: var(--overlay-simple-overlay-hover);
background-color: var(--v2-overlay-simple-overlay-hover);
}
[data-slot="line-comment-v2-overflow"]:is(:active, [data-state="pressed"]) {
background-color: var(--overlay-simple-overlay-pressed);
background-color: var(--v2-overlay-simple-overlay-pressed);
}
[data-slot="line-comment-v2-overflow"] svg {
@ -139,7 +139,7 @@
font-weight: 530;
line-height: 1;
letter-spacing: -0.04px;
color: var(--text-text-base);
color: var(--v2-text-text-base);
user-select: none;
}
@ -151,26 +151,26 @@
padding: 8px;
margin: 0;
resize: vertical;
border: 1px solid var(--border-border-base);
border: 1px solid var(--v2-border-border-base);
border-radius: 6px;
background: linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
background: linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
font-size: 13px;
font-style: normal;
font-weight: 440;
line-height: 1.35;
letter-spacing: -0.04px;
color: var(--text-text-base);
color: var(--v2-text-text-base);
font-variation-settings: "slnt" 0;
outline: none;
}
[data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-textarea"]::placeholder {
color: var(--text-text-faint);
color: var(--v2-text-text-faint);
user-select: none;
}
[data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-textarea"]:focus {
border-color: var(--border-border-focus);
border-color: var(--v2-border-border-focus);
}
[data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-footer"] {
@ -190,7 +190,7 @@
font-weight: 530;
line-height: 1;
letter-spacing: 0.05px;
color: var(--text-text-faint);
color: var(--v2-text-text-faint);
font-variation-settings: "slnt" 0;
}

34
packages/ui/src/v2/components/radio-v2.css
View File

@ -8,7 +8,7 @@
display: inline-flex;
align-items: center;
user-select: none;
color: var(--text-text-faint);
color: var(--v2-text-text-faint);
font-size: 11px;
font-style: normal;
font-weight: 440;
@ -18,7 +18,7 @@
}
[data-slot="radio-v2-description"] {
color: var(--text-text-faint);
color: var(--v2-text-text-faint);
font-size: 11px;
font-weight: 440;
line-height: 1.2;
@ -32,7 +32,7 @@
}
[data-slot="radio-v2-error"] {
color: var(--state-fg-danger);
color: var(--v2-state-fg-danger);
font-size: 12px;
font-weight: var(--font-weight-regular);
line-height: var(--line-height-normal);
@ -86,9 +86,9 @@
border-radius: 9999px;
border: none;
box-shadow: inset 0 0 0 0.5px var(--border-border-strong);
box-shadow: inset 0 0 0 0.5px var(--v2-border-border-strong);
background: linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
background: linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
transition:
background 170ms ease-out,
opacity 170ms ease-out,
@ -99,15 +99,15 @@
[data-slot="radio-v2-item-input"]:focus-visible
~ [data-slot="radio-v2-item-control-stack"]
[data-slot="radio-v2-item-control"] {
outline: 2px solid var(--border-border-focus);
outline: 2px solid var(--v2-border-border-focus);
outline-offset: 1px;
}
&:where(:hover):where(:not([data-disabled], [data-readonly])):where(:not([data-checked]))
[data-slot="radio-v2-item-control"] {
background:
linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
}
&:where([data-disabled]) [data-slot="radio-v2-item-control"] {
@ -116,14 +116,14 @@
&:where([data-checked]) [data-slot="radio-v2-item-control"] {
background:
linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%), var(--background-bg-accent);
linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-accent);
}
&:where([data-checked]):where(:hover):where(:not([data-disabled], [data-readonly]))
[data-slot="radio-v2-item-control"] {
background:
linear-gradient(0deg, var(--overlay-simple-overlay-contrast-hover), var(--overlay-simple-overlay-contrast-hover)),
linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%), var(--background-bg-accent);
linear-gradient(0deg, var(--v2-overlay-simple-overlay-contrast-hover), var(--v2-overlay-simple-overlay-contrast-hover)),
linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-accent);
}
&:where([data-checked][data-disabled]) [data-slot="radio-v2-item-control"] {
@ -131,8 +131,8 @@
}
&:where([data-invalid]):where(:not([data-checked])) [data-slot="radio-v2-item-control"] {
background: var(--state-bg-danger);
box-shadow: inset 0 0 0 0.5px #b82d35;
background: var(--v2-state-bg-danger);
box-shadow: inset 0 0 0 0.5px var(--v2-state-border-danger);
}
[data-slot="radio-v2-item-indicator"] {
@ -144,10 +144,10 @@
top: calc(50% - 6px / 2);
border-radius: 9999px;
background: var(--grey-300);
background: var(--v2-grey-300);
border: none;
box-shadow:
inset 0 0 0 0.5px var(--overlay-gradient-depth-overlay-depth-top),
inset 0 0 0 0.5px var(--v2-overlay-gradient-depth-overlay-depth-top),
0px 0.5px 0.5px rgba(0, 0, 0, 0.4);
}
@ -174,14 +174,14 @@
display: inline-flex;
align-items: center;
user-select: none;
color: var(--text-text-base);
color: var(--v2-text-text-base);
font-size: 13px;
line-height: 20px;
letter-spacing: -0.04px;
}
[data-slot="radio-v2-item-description"] {
color: var(--text-text-muted);
color: var(--v2-text-text-muted);
font-size: 11px;
font-weight: 440;
line-height: 1;

14
packages/ui/src/v2/components/segmented-control-v2.css
View File

@ -11,10 +11,10 @@
width: 232px;
max-width: 100%;
height: 28px;
background: var(--background-bg-layer-01);
background: var(--v2-background-bg-layer-01);
border: none;
border-radius: 6px;
box-shadow: 0 0 0 0.5px var(--border-border-base);
box-shadow: 0 0 0 0.5px var(--v2-border-border-base);
flex: none;
}
@ -41,7 +41,7 @@
letter-spacing: -0.04px;
font-variant-numeric: tabular-nums;
font-variation-settings: "slnt" 0;
color: var(--text-text-muted);
color: var(--v2-text-text-muted);
transition:
background-color 0.12s ease,
color 0.12s ease,
@ -54,15 +54,15 @@
}
[data-slot="segmented-control-v2-item"]:where(:focus-visible) {
outline: 2px solid var(--border-border-focus);
outline: 2px solid var(--v2-border-border-focus);
outline-offset: 1px;
z-index: 2;
}
[data-slot="segmented-control-v2-item"]:where([data-pressed]) {
background: var(--background-bg-base);
color: var(--text-text-base);
box-shadow: 0 0 0 0.5px var(--border-border-strong);
background: var(--v2-background-bg-base);
color: var(--v2-text-text-base);
box-shadow: 0 0 0 0.5px var(--v2-border-border-strong);
z-index: 1;
}

4
packages/ui/src/v2/components/text-shimmer-v2.css
View File

@ -12,8 +12,8 @@
--_angle: 90deg;
--_spread: 5.2ch;
--_size: 360%;
--_base-color: var(--text-text-muted);
--_peak-color: var(--text-text-base);
--_base-color: var(--v2-text-text-muted);
--_peak-color: var(--v2-text-text-base);
--_sweep: linear-gradient(
var(--_angle),
transparent calc(50% - var(--_spread)),

22
packages/ui/src/v2/components/textarea-v2.css
View File

@ -10,8 +10,8 @@
border-radius: 6px;
outline: 1px solid transparent;
outline-offset: 0;
background: linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
box-shadow: var(--elevation-button-neutral);
background: linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
box-shadow: var(--v2-elevation-button-neutral);
flex: none;
align-self: stretch;
transition:
@ -22,17 +22,17 @@
[data-component="textarea-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
background:
linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
}
[data-component="textarea-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
outline-color: var(--border-border-focus);
outline-color: var(--v2-border-border-focus);
box-shadow: none;
}
[data-component="textarea-v2"]:where([data-invalid]):not([data-disabled]) {
outline-color: var(--state-fg-danger);
outline-color: var(--v2-state-fg-danger);
box-shadow: none;
}
@ -58,20 +58,20 @@
font-size: 13px;
line-height: 1.35;
letter-spacing: -0.04px;
color: var(--text-text-base);
color: var(--v2-text-text-base);
font-variation-settings: "slnt" 0;
}
[data-component="textarea-v2"] [data-slot="textarea-v2-textarea"]::placeholder {
color: var(--text-text-faint);
color: var(--v2-text-text-faint);
}
[data-component="textarea-v2"][data-invalid]:not([data-disabled]) [data-slot="textarea-v2-textarea"] {
color: var(--state-fg-danger);
caret-color: var(--state-fg-danger);
color: var(--v2-state-fg-danger);
caret-color: var(--v2-state-fg-danger);
}
[data-component="textarea-v2"][data-invalid]:not([data-disabled]) [data-slot="textarea-v2-textarea"]::placeholder {
color: var(--state-fg-danger);
color: var(--v2-state-fg-danger);
opacity: 1;
}

16
packages/ui/src/v2/components/tool-error-card-v2.css
View File

@ -1,11 +1,11 @@
[data-component="tool-error-card"] {
--tec-border: var(--state-fg-danger);
--tec-title: var(--text-text-base);
--tec-sep: var(--text-text-muted);
--tec-subtitle: var(--text-text-muted);
--tec-suffix: var(--text-text-faint);
--tec-chevron: var(--text-text-faint);
--tec-icon: var(--icon-icon-base);
--tec-border: var(--v2-state-fg-danger);
--tec-title: var(--v2-text-text-base);
--tec-sep: var(--v2-text-text-muted);
--tec-subtitle: var(--v2-text-text-muted);
--tec-suffix: var(--v2-text-text-faint);
--tec-chevron: var(--v2-text-text-faint);
--tec-icon: var(--v2-icon-icon-base);
box-sizing: border-box;
display: flex;
@ -36,7 +36,7 @@
}
[data-slot="tool-error-card-trigger"]:focus-visible {
outline: 2px solid var(--border-border-focus);
outline: 2px solid var(--v2-border-border-focus);
outline-offset: 2px;
}

4
packages/ui/src/v2/components/tool-error-card-v2.tsx
View File

@ -38,7 +38,7 @@ function LoaderIcon() {
<circle
r={r}
fill="none"
stroke="var(--icon-icon-base)"
stroke="var(--v2-icon-icon-base)"
stroke-width="1"
stroke-opacity="0.3"
transform="rotate(-90)"
@ -46,7 +46,7 @@ function LoaderIcon() {
<circle
r={r}
fill="none"
stroke="var(--icon-icon-base)"
stroke="var(--v2-icon-icon-base)"
stroke-width="1"
pathLength="100"
stroke-dasharray="25 75"

6
packages/ui/src/v2/components/tooltip-v2.css
View File

@ -6,8 +6,8 @@
padding: 5px 6px;
gap: 6px;
background: var(--background-bg-layer-01);
box-shadow: var(--elevation-floating);
background: var(--v2-background-bg-layer-01);
box-shadow: var(--v2-elevation-floating);
border-radius: 4px;
font-style: normal;
@ -15,7 +15,7 @@
font-size: 11px;
line-height: 12px;
letter-spacing: 0.05px;
color: var(--text-text-base);
color: var(--v2-text-text-base);
font-variant-numeric: tabular-nums;
font-variation-settings: "slnt" 0;