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() {