UI: Toggles and border fixes on edge case themes.

[sachasayan]

Context

Referenced in #2987 cc @elianiva:

Some themes don't define border colors, so a white border bleeds through. This PR addresses the issue by setting a transparent fallback if --vscode-input-border is undefined:

Before/After:

For the auto-approve toggles specifically, this also addresses some themes which do not have highly differentiated default and outline button variants by making the falsy state partially-transparent:

---

Important

Fixes border color and toggle button opacity issues in themes with missing definitions by adding transparent fallbacks and adjusting opacity in index.css and AutoApproveToggle.tsx.

• CSS Changes:
  • In index.css, set --color-vscode-input-border to fallback to transparent if --vscode-input-border is undefined.
  • Update --border variable to use transparent fallback in index.css.
• Component Changes:
  • In AutoApproveToggle.tsx, add opacity-50 class to toggles in falsy state for better differentiation in themes with similar default and outline button variants.

^{This description was created by for 82ddde4. You can customize this summary. It will automatically update as commits are pushed.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 82ddde4

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[elianiva]

LGTM! We can explore the idea of making our own token mapping later down the line after your chat UI PR gets merged and my settings UI PR gets merged.