diff --git a/packages/ui/src/v2/components/accordion-v2.css b/packages/ui/src/v2/components/accordion-v2.css
index 3bf4b39df3dd..281a031c36e1 100644
--- a/packages/ui/src/v2/components/accordion-v2.css
+++ b/packages/ui/src/v2/components/accordion-v2.css
@@ -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;
diff --git a/packages/ui/src/v2/components/basic-tool-v2.css b/packages/ui/src/v2/components/basic-tool-v2.css
index 256552ab1b0e..44e984758c6e 100644
--- a/packages/ui/src/v2/components/basic-tool-v2.css
+++ b/packages/ui/src/v2/components/basic-tool-v2.css
@@ -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;
}
diff --git a/packages/ui/src/v2/components/checkbox-v2.css b/packages/ui/src/v2/components/checkbox-v2.css
index 49d7ea56f927..375934273a1f 100644
--- a/packages/ui/src/v2/components/checkbox-v2.css
+++ b/packages/ui/src/v2/components/checkbox-v2.css
@@ -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 {
diff --git a/packages/ui/src/v2/components/dialog-v2.css b/packages/ui/src/v2/components/dialog-v2.css
index be6b1573047d..fa18dfc92e50 100644
--- a/packages/ui/src/v2/components/dialog-v2.css
+++ b/packages/ui/src/v2/components/dialog-v2.css
@@ -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);
diff --git a/packages/ui/src/v2/components/dialog-v2.tsx b/packages/ui/src/v2/components/dialog-v2.tsx
index d4113d067865..eab668bdeef0 100644
--- a/packages/ui/src/v2/components/dialog-v2.tsx
+++ b/packages/ui/src/v2/components/dialog-v2.tsx
@@ -78,7 +78,7 @@ export function Dialog(props: DialogProps) {
>
diff --git a/packages/ui/src/v2/components/diff-changes-v2.css b/packages/ui/src/v2/components/diff-changes-v2.css
index a4405dc0c0dd..6f2cff6c71f5 100644
--- a/packages/ui/src/v2/components/diff-changes-v2.css
+++ b/packages/ui/src/v2/components/diff-changes-v2.css
@@ -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);
}
}
diff --git a/packages/ui/src/v2/components/field-v2.css b/packages/ui/src/v2/components/field-v2.css
index 853d5da6fc91..ae64c89b31e2 100644
--- a/packages/ui/src/v2/components/field-v2.css
+++ b/packages/ui/src/v2/components/field-v2.css
@@ -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;
}
diff --git a/packages/ui/src/v2/components/inline-input-v2.css b/packages/ui/src/v2/components/inline-input-v2.css
index 71297af5a8fb..4e6fe095e9a8 100644
--- a/packages/ui/src/v2/components/inline-input-v2.css
+++ b/packages/ui/src/v2/components/inline-input-v2.css
@@ -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;
}
diff --git a/packages/ui/src/v2/components/line-comment-v2.css b/packages/ui/src/v2/components/line-comment-v2.css
index e0843d836789..55a3120813a6 100644
--- a/packages/ui/src/v2/components/line-comment-v2.css
+++ b/packages/ui/src/v2/components/line-comment-v2.css
@@ -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;
}
diff --git a/packages/ui/src/v2/components/radio-v2.css b/packages/ui/src/v2/components/radio-v2.css
index b9f954d301b3..b572fabd1bc2 100644
--- a/packages/ui/src/v2/components/radio-v2.css
+++ b/packages/ui/src/v2/components/radio-v2.css
@@ -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;
diff --git a/packages/ui/src/v2/components/segmented-control-v2.css b/packages/ui/src/v2/components/segmented-control-v2.css
index 6303a357ff04..61846cd3b30c 100644
--- a/packages/ui/src/v2/components/segmented-control-v2.css
+++ b/packages/ui/src/v2/components/segmented-control-v2.css
@@ -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;
}
diff --git a/packages/ui/src/v2/components/text-shimmer-v2.css b/packages/ui/src/v2/components/text-shimmer-v2.css
index 3292c89a93e1..d10d53581b88 100644
--- a/packages/ui/src/v2/components/text-shimmer-v2.css
+++ b/packages/ui/src/v2/components/text-shimmer-v2.css
@@ -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)),
diff --git a/packages/ui/src/v2/components/textarea-v2.css b/packages/ui/src/v2/components/textarea-v2.css
index 17bad60ed181..9234f28f16cd 100644
--- a/packages/ui/src/v2/components/textarea-v2.css
+++ b/packages/ui/src/v2/components/textarea-v2.css
@@ -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;
}
diff --git a/packages/ui/src/v2/components/tool-error-card-v2.css b/packages/ui/src/v2/components/tool-error-card-v2.css
index 2eaa3c4276b8..946b03567056 100644
--- a/packages/ui/src/v2/components/tool-error-card-v2.css
+++ b/packages/ui/src/v2/components/tool-error-card-v2.css
@@ -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;
}
diff --git a/packages/ui/src/v2/components/tool-error-card-v2.tsx b/packages/ui/src/v2/components/tool-error-card-v2.tsx
index 6951001dfc45..20edd9fa3f69 100644
--- a/packages/ui/src/v2/components/tool-error-card-v2.tsx
+++ b/packages/ui/src/v2/components/tool-error-card-v2.tsx
@@ -38,7 +38,7 @@ function LoaderIcon() {