fix: match form component borders, update foundation

[wbarbee]

Summary

Radio button and dropdown borders did not match the rest of the form components, making them stand out.
Fix bug in dropdown where disabled

on hover was transparent.

ADO Story or GitHub Issue Link

N/A

Figma Link

N/A

Notes

• radio and dropdown previously used --kd-color-border-ui-default for border-color, which was not matching the rest of the form components. this PR changes to use --kd-color-border-forms-default

To Do

• ensure that these changes are reflected in figma designs and approved by UX

Checklist

• Used Conventional Commit messages as outlined in the contributing guide.
  • Noted breaking changes (if any).
• Documented/updated all props, events, slots, parts, etc with JSDoc.
  • Ran the analyze command to update Storybook docs.
• Added/updated Stories with controls to cover all variants.
• Ran test locally to address any failures.
• Added/updated the Figma link for the Story's Design tab.
• Added any new component exports to the src/index.ts file

Testing Instructions

Provide guidance to reviewers/testers here.

Screenshots

Previous:

Updated:

•

[netlify]

✅ Deploy Preview for shidoka-applications ready!

Name	Link
🔨 Latest commit	7b4756d
🔍 Latest deploy log	https://app.netlify.com/sites/shidoka-applications/deploys/677fda45eb92e3000805e94d
😎 Deploy Preview	https://deploy-preview-314--shidoka-applications.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[brian-patrick-3]

Any particular reason the datepicker inputs have a different background color vs the other form components?

[wbarbee]

Any particular reason the datepicker inputs have a different background color vs the other form components?

nope. i think those were the original tokens used in the designs. fixed those

[brian-patrick-3]

I noticed Dropdown also has a different background color, in light mode

[wbarbee]

I noticed Dropdown also has a different background color, in light mode

fixed this as well. we're using a <span> wrapper when the input isn't searchable, so the placeholder is not styled the same as other placeholders? when i add the class and the placeholder styling when applicable, i'm getting an accessibility error.

is this what you were avoiding @brian-patrick-3?

shidoka-applications/src/components/reusable/dropdown/dropdown.ts

Lines 300 to 306 in e83c4c4

	<span class=${this.value === '' ? 'placeholder' : ''}>
	${this.multiple
	? this.placeholder
	: this.value === ''
	? this.placeholder
	: this.text}
	</span>

[brian-patrick-3]

I'm guessing the input placeholder attribute does not get flagged for accessibility, but this does being actual text.

[srpriyankashetty]

As discussed with @wbarbee , the dropdown is showing as transparent in dark mode, dev is looking into it.

[wbarbee]

As discussed with @wbarbee , the dropdown is showing as transparent in dark mode, dev is looking into it.

this color token has an opacity value (the 0.3) that makes it semi transparent but is set for the background of the dropdown

in figma. need to confirm with UX

[wbarbee]

spoke with ux, the double background color was not unintentional. setting to Background/UI/Hollow/Default

[srpriyankashetty]

Verified Radio button color, dropdown options background color and looks fine
Verified the field background color for drop down, multi select dropdown, Date fields and Text fields

[brian-patrick-3]

🎉 This PR is included in version 2.0.0-next.41 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀