[HDS-5541] UI: Align color and border-radius styles to HDS tokens

[dchyun]

Description

If merged, this PR would update color and border-radius styles to reference HDS tokens. This is done in order to ensure greater alignment with HDS, and improve the flexibility of styles in Cloud UI to reflect any changes to HDS tokens.

The changes made should result in no visual changes. The values updated are a 1:1 match for values that were already present in HDS tokens.

Color

Any hard-coded color values have been updated to references HDS tokens instead. Additionally some instances of styles that already referenced HDS color tokens have been updated from referencing the core palette to referencing the semantic palette.

The semantic color tokens of the HDS token library are more agnostic, and embed meaning into color names, making it easier to select correct consistent values across applications. By relying on semantic tokens instead of the core palette, it will also be easier in the future to support potential efforts like theming, major style updates, etc.

There are semantic color groups for common styles such as foreground (typography color), surface (background color), etc.

Example update: --token-color-palette-neutral-700 -> --token-color-foreground-strong

If an instance of a core color palette token did not align to a semantic token, that style was left untouched. Ex: If --token-color-palette-neutral-700 was being used for a background color it was left as is, since foreground is specifically for typography colors.

• Learn more about our semantic tokens
• View the full color palette

Core palette to semantic tokens map

• Neutral-700 - Foreground-strong
• Neutral-600 - Foreground-primary
• Neutral-500 - Foreground-faint
• Neutral-400 - Foreground-disabled
• Neutral-200 - Surface-interactive-active
• Neutral-100 - Surface-strong - Surface-interactive-hover
• Neutral-50 - Surface-faint - Surface-interactive-disabled - Page-faint
• Neutral-0 - Foreground-high-contrast - Surface-primary - Surface-interactive - Page-primary
• Blue-400 - Foreground-action-active
• Blue-300 - Foreground-action-hover
• Blue-200 - Foreground-action
• Blue-100 - Border-action
• Blue-50 - Surface-action
• {Purple/green/amber/red}-500 - Foreground-{highlight/success/warning/critical}-high-contrast
• {Purple/green/amber/red}-300 - Foreground-{highlight/success/warning/critical}-on-surface
• {Purple/green/amber/red}-200 - Foreground-{highlight/success/warning/critical}
• {Purple/green/amber/red}-100 - Border-{highlight/success/warning/critical}
• {Purple/green/amber/red}-50 - Surface-{highlight/success/warning/critical}

Border Radius

The HDS token library also contains tokens for border-radius, and in this PR any hard-coded border-radius values that aligned to values present in the tokens have been updated.

Border radius tokens map

• X-small - 3px
• Small - 5px
• Medium - 6px
• Large - 8px

External Links

• HDS JIRA - Colors
• HDS JIRA - Border radius
• HDS tokens list
• HDS color palette

TODO only if you're a HashiCorp employee

• Backport Labels: If this fix needs to be backported, use the appropriate backport/ label that matches the desired release branch.
  • LTS: If this fixes a critical security vulnerability or severity 1 bug, it will also need to be backported to the current LTS versions of Vault. To ensure this, use all available enterprise labels.
• Jira: If this change has an associated Jira, it's referenced either in the PR description, commit message, or branch name.
• RFC: If this change has an associated RFC, please link it in the description.

PCI review checklist

• I have documented a clear reason for, and description of, the change I am making.
• If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
• If applicable, I've documented the impact of any changes to security controls.

Examples of changes to security controls include using new access control methods, adding or removing logging pipelines, etc.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
vault-ui	Ready	Preview	Comment	Oct 9, 2025 5:54pm

[github-actions]

CI Results:
All Go tests succeeded! ✅

[hc-github-team-secure-vault-core]

Copy workflow completed!

From	To	Skipped Merge Commits	Error
hashicorp/vault#31583	hashicorp/vault-enterprise#10182	0