Fix invalid generated CSS (HDS-5314)

[KristinLBradley]

📌 Summary

If merged, this PR removes/fixes SCSS styles which compile to invalid CSS.

Previews of affected component Showcases:

(See disabled states, no visible changes should be observed)

• Button: https://hds-showcase-git-kristin-hds-5314-fix-invalid-css-hashicorp.vercel.app/components/button#states
• Dropdown: https://hds-showcase-git-kristin-hds-5314-fix-invalid-css-hashicorp.vercel.app/components/dropdown#states
• FileInput: https://hds-showcase-git-kristin-hds-5314-fix-invalid-css-hashicorp.vercel.app/components/form/file-input#states

🛠️ Detailed description

Where hds-button-state-disabled mixin is used:

• button.scss
  • one usage:

  .hds-button {
    // ...
    &:disabled,
    &[disabled],
    &.mock-disabled,
    &:disabled:focus,
    &[disabled]:focus,
    &.mock-disabled:focus,
    &:disabled:hover,
    &[disabled]:hover,
    &.mock-disabled:hover {
      @include hds-button-state-disabled();
    }
    // ...
  }
  

• dropdown.scss
  • two usages:

  .hds-dropdown-toggle-icon {
    // ...
    &:disabled,
    &.mock-disabled {
      @include hds-button-state-disabled();
    }
  }
  

  .hds-dropdown-toggle-button {
    // ...
    &:disabled,
    &.mock-disabled,
    &:disabled:focus,
    &.mock-disabled:focus,
    &:disabled:hover,
    &.mock-disabled:hover {
      @include hds-button-state-disabled();
      // ...
    }
  }
  

• file-input.scss
  • one usage:

  .hds-form-file-input {
    &:disabled,
    &[disabled],
    &.mock-disabled,
    &:disabled:focus,
    &[disabled]:focus,
    &.mock-disabled:focus,
    &:disabled:hover,
    &[disabled]:hover,
    &.mock-disabled:hover {
      // ...
      &::file-selector-button {
        @include hds-button-state-disabled();
        // ...
      }
    }
  }
  

🔗 External links

• Jira ticket: HDS-5314

---

👀 Component checklist

• Percy was checked for any visual regression
• A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

📋 PCI review checklist

• If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
• If applicable, I've worked with GRC to document the impact of any changes to security controls.
  Examples of changes to controls include access controls, encryption, logging, etc.
• If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
  Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

[vercel]

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

Project	Deployment	Preview	Updated (UTC)
hds-showcase	Ready	Preview	Aug 27, 2025 6:47pm
hds-website	Ready	Preview	Aug 27, 2025 6:47pm

[KristinLBradley]

Result of deleting this style:

• ::file-selector-button::before & similar styles no longer exist in the compiled CSS output (packages/components/dist/styles/@hashicorp/design-system-components.css)
• There are no Percy diffs