ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
commit 8aff7b8c7b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 117 additions and 116 deletions
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"] { [data-component="accordion-v2"] {
--accordion-v2-fg: var(--text-text-base); --accordion-v2-fg: var(--v2-text-text-base);
--accordion-v2-icon: var(--icon-icon-base); --accordion-v2-icon: var(--v2-icon-icon-base);
--accordion-v2-border: var(--border-border-strong); --accordion-v2-border: var(--v2-border-border-strong);
--accordion-v2-bg: var(--background-bg-base); --accordion-v2-bg: var(--v2-background-bg-base);
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;

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

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

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

@ -9,7 +9,7 @@
} }
[data-slot="checkbox-v2-error"] { [data-slot="checkbox-v2-error"] {
color: var(--state-fg-danger); color: var(--v2-state-fg-danger);
font-size: 12px; font-size: 12px;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: var(--line-height-normal); line-height: var(--line-height-normal);
@ -59,9 +59,9 @@
top: calc(50% - 16px / 2); top: calc(50% - 16px / 2);
border-radius: 4px; border-radius: 4px;
border: none; 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: transition:
background 170ms ease-out, background 170ms ease-out,
opacity 170ms ease-out, opacity 170ms ease-out,
@ -99,14 +99,14 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
user-select: none; user-select: none;
color: var(--text-text-base); color: var(--v2-text-text-base);
font-size: 13px; font-size: 13px;
line-height: 20px; line-height: 20px;
letter-spacing: -0.04px; letter-spacing: -0.04px;
} }
[data-slot="checkbox-v2-description"] { [data-slot="checkbox-v2-description"] {
color: var(--text-text-muted); color: var(--v2-text-text-muted);
font-size: 11px; font-size: 11px;
font-weight: 440; font-weight: 440;
line-height: 1; line-height: 1;
@ -120,7 +120,7 @@
[data-slot="checkbox-v2-input"]:focus-visible [data-slot="checkbox-v2-input"]:focus-visible
~ [data-slot="checkbox-v2-control-stack"] ~ [data-slot="checkbox-v2-control-stack"]
[data-slot="checkbox-v2-control"] { [data-slot="checkbox-v2-control"] {
outline: 2px solid var(--border-border-focus); outline: 2px solid var(--v2-border-border-focus);
outline-offset: 1px; outline-offset: 1px;
} }
@ -129,8 +129,8 @@
) )
[data-slot="checkbox-v2-control"] { [data-slot="checkbox-v2-control"] {
background: background:
linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)), linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%), var(--background-bg-base); 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"] { [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"] { [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( [data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]):where(:hover):where(
@ -146,14 +146,14 @@
) )
[data-slot="checkbox-v2-control"] { [data-slot="checkbox-v2-control"] {
background: background:
linear-gradient(0deg, var(--overlay-simple-overlay-contrast-hover), var(--overlay-simple-overlay-contrast-hover)), linear-gradient(0deg, var(--v2-overlay-simple-overlay-contrast-hover), var(--v2-overlay-simple-overlay-contrast-hover)),
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);
} }
[data-slot="checkbox-v2"]:where([data-invalid]):where(:not([data-checked], [data-indeterminate])) [data-slot="checkbox-v2"]:where([data-invalid]):where(:not([data-checked], [data-indeterminate]))
[data-slot="checkbox-v2-control"] { [data-slot="checkbox-v2-control"] {
background: var(--state-bg-danger); background: var(--v2-state-bg-danger);
box-shadow: inset 0 0 0 0.5px #b82d35; box-shadow: inset 0 0 0 0.5px var(--v2-state-border-danger);
} }
[data-slot="checkbox-v2"] .checkbox-v2-icon { [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; border-radius: 4px;
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; cursor: pointer;
color: var(--v2-icon-icon-muted);
&:hover { &:hover {
background: var(--v2-overlay-simple-overlay-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 <path
d="M12.4446 3.55469L3.55566 12.4436M3.55566 3.55469L12.4446 12.4436" d="M12.4446 3.55469L3.55566 12.4436M3.55566 3.55469L12.4446 12.4436"
stroke="#808080" stroke="currentColor"
stroke-linejoin="round" stroke-linejoin="round"
/> />
</svg> </svg>

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

@ -15,10 +15,10 @@
} }
[data-slot="diff-changes-additions"] { [data-slot="diff-changes-additions"] {
color: var(--state-fg-success); color: var(--v2-state-fg-success);
} }
[data-slot="diff-changes-deletions"] { [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; font-size: 13px;
line-height: 1; line-height: 1;
letter-spacing: -0.04px; letter-spacing: -0.04px;
color: var(--text-text-base); color: var(--v2-text-text-base);
font-variation-settings: "slnt" 0; font-variation-settings: "slnt" 0;
cursor: default; cursor: default;
user-select: none; user-select: none;
@ -51,13 +51,13 @@
border: 0; border: 0;
border-radius: 0; border-radius: 0;
background: transparent; background: transparent;
color: var(--icon-icon-muted); color: var(--v2-icon-icon-muted);
cursor: pointer; cursor: pointer;
outline: none; outline: none;
} }
[data-component="field-v2"] [data-slot="field-v2-label-info"]:is(:hover, [data-state="hover"]) { [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 { [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 { [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; outline-offset: 1px;
border-radius: 2px; border-radius: 2px;
} }
@ -80,7 +80,7 @@
font-size: 11px; font-size: 11px;
line-height: 1; line-height: 1;
letter-spacing: 0.05px; letter-spacing: 0.05px;
color: var(--text-text-muted); color: var(--v2-text-text-muted);
font-variation-settings: "slnt" 0; font-variation-settings: "slnt" 0;
user-select: none; user-select: none;
} }

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

@ -10,8 +10,8 @@
border-radius: 6px; border-radius: 6px;
outline: 1px solid transparent; outline: 1px solid transparent;
outline-offset: 0; outline-offset: 0;
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);
box-shadow: var(--elevation-button-neutral); box-shadow: var(--v2-elevation-button-neutral);
flex: none; flex: none;
align-self: stretch; align-self: stretch;
overflow: hidden; overflow: hidden;
@ -27,8 +27,8 @@
[data-component="inline-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) { [data-component="inline-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
background: background:
linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)), linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base); 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) [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]) { [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; box-shadow: none;
} }
[data-component="inline-input-v2"]:where([data-invalid]):not([data-disabled]) { [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; box-shadow: none;
} }
@ -64,7 +64,7 @@
max-width: 100%; max-width: 100%;
padding: 4px 8px; padding: 4px 8px;
gap: 4px; gap: 4px;
background: var(--background-bg-layer-01); background: var(--v2-background-bg-layer-01);
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
transition: background 85ms ease-out; transition: background 85ms ease-out;
} }
@ -86,7 +86,7 @@
font-size: 13px; font-size: 13px;
line-height: 1; line-height: 1;
letter-spacing: -0.04px; letter-spacing: -0.04px;
color: var(--text-text-muted); color: var(--v2-text-text-muted);
font-variation-settings: "slnt" 0; font-variation-settings: "slnt" 0;
} }
@ -99,7 +99,7 @@
align-self: stretch; align-self: stretch;
width: 0.5px; width: 0.5px;
min-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"] { [data-component="inline-input-v2"] [data-slot="inline-input-v2-field"] {
@ -142,12 +142,12 @@
font-size: 13px; font-size: 13px;
line-height: 1; line-height: 1;
letter-spacing: -0.04px; letter-spacing: -0.04px;
color: var(--text-text-base); color: var(--v2-text-text-base);
font-variation-settings: "slnt" 0; font-variation-settings: "slnt" 0;
} }
[data-component="inline-input-v2"] [data-slot="inline-input-v2-input"]::placeholder { [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"] { [data-component="inline-input-v2"][data-numeric] [data-slot="inline-input-v2-input"] {
@ -167,19 +167,19 @@
border: 0; border: 0;
border-radius: 4px; border-radius: 4px;
background: transparent; background: transparent;
color: var(--icon-icon-muted); color: var(--v2-icon-icon-muted);
cursor: pointer; cursor: pointer;
outline: none; outline: none;
} }
[data-component="inline-input-v2"] [data-component="inline-input-v2"]
[data-slot="inline-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) { [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-component="inline-input-v2"]
[data-slot="inline-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) { [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 { [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 { [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; outline-offset: 1px;
} }
@ -203,15 +203,15 @@
} }
[data-component="inline-input-v2"][data-invalid]:not([data-disabled]) [data-slot="inline-input-v2-prefix-text"] { [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"] { [data-component="inline-input-v2"][data-invalid]:not([data-disabled]) [data-slot="inline-input-v2-input"] {
color: var(--state-fg-danger); color: var(--v2-state-fg-danger);
caret-color: var(--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 { [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; 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"] { [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; border-radius: 6px;
box-shadow: var(--elevation-raised); box-shadow: var(--v2-elevation-raised);
} }
/* --- Display (read) --- */ /* --- Display (read) --- */
@ -50,7 +50,7 @@
font-weight: 440; font-weight: 440;
line-height: 1; line-height: 1;
letter-spacing: -0.04px; letter-spacing: -0.04px;
color: var(--text-text-base); color: var(--v2-text-text-base);
font-variation-settings: "slnt" 0; font-variation-settings: "slnt" 0;
} }
@ -60,7 +60,7 @@
font-weight: 530; font-weight: 530;
line-height: 1; line-height: 1;
letter-spacing: 0.05px; letter-spacing: 0.05px;
color: var(--text-text-faint); color: var(--v2-text-text-faint);
font-variation-settings: "slnt" 0; font-variation-settings: "slnt" 0;
} }
@ -84,7 +84,7 @@
border: none; border: none;
border-radius: 4px; border-radius: 4px;
background: transparent; background: transparent;
color: var(--icon-icon-muted); color: var(--v2-icon-icon-muted);
cursor: pointer; cursor: pointer;
outline: none; outline: none;
} }
@ -94,16 +94,16 @@
} }
[data-slot="line-comment-v2-overflow"]:focus-visible { [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; outline-offset: 2px;
} }
[data-slot="line-comment-v2-overflow"]:is(:hover, [data-state="hover"]) { [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"]) { [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 { [data-slot="line-comment-v2-overflow"] svg {
@ -139,7 +139,7 @@
font-weight: 530; font-weight: 530;
line-height: 1; line-height: 1;
letter-spacing: -0.04px; letter-spacing: -0.04px;
color: var(--text-text-base); color: var(--v2-text-text-base);
user-select: none; user-select: none;
} }
@ -151,26 +151,26 @@
padding: 8px; padding: 8px;
margin: 0; margin: 0;
resize: vertical; resize: vertical;
border: 1px solid var(--border-border-base); border: 1px solid var(--v2-border-border-base);
border-radius: 6px; 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-size: 13px;
font-style: normal; font-style: normal;
font-weight: 440; font-weight: 440;
line-height: 1.35; line-height: 1.35;
letter-spacing: -0.04px; letter-spacing: -0.04px;
color: var(--text-text-base); color: var(--v2-text-text-base);
font-variation-settings: "slnt" 0; font-variation-settings: "slnt" 0;
outline: none; outline: none;
} }
[data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-textarea"]::placeholder { [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; user-select: none;
} }
[data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-textarea"]:focus { [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"] { [data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-footer"] {
@ -190,7 +190,7 @@
font-weight: 530; font-weight: 530;
line-height: 1; line-height: 1;
letter-spacing: 0.05px; letter-spacing: 0.05px;
color: var(--text-text-faint); color: var(--v2-text-text-faint);
font-variation-settings: "slnt" 0; font-variation-settings: "slnt" 0;
} }

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

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

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

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

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

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

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

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

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

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

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

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

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

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