fix(form components): dark mode token updates

[wbarbee]

Summary

Implement Dark Mode color tokens from updated Figma files for 2.0 Breaking Changes on the following components:

• Checkbox -- (* check after Robert's new tokens are updated, may need to update checked base tokens)

• Radio Button -- (* check after Robert's new tokens are updated)

• Text Input

• Text Area

• Toggle Button

• Dropdown -- (* check tags when tokens updated)

• Number Input (* check +/- when button tokens updated)

• Form Label

• form-input.scss* (base styles for most form input components) -- check WARNING, check whether disabled labels should have styling

Form components that will be handled on a separate PR:

• Date Picker
• Date Range Picker
• Timepicker

ADO Story or GitHub Issue Link

• Checkbox
• Text Input
• Text Area
• Toggle Button
• Dropdown
• Number Input
• Radio Button

Figma Links

• Checkbox
• Text Input
• Text Area
• Toggle Button
• Dropdown
• Number Input
• Radio Button

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

Figma/Storybook Inconsistencies

• thumb color on toggleButton hover in dark mode (--kd-color-background-ui-hollow-default):
• Background/UI/Default/Secondary (--kd-color-background-ui-default-secondary) -- not available in storybook/tokens (push requested from design team)
• Background/Container/Default (--kd-color-background-container-default) doesn't match figma

Testing Instructions

• all of these components should have a Storybook sidenav item, except for Form Label, that can be most easily checked in the Patterns/Forms story
• there are still a few inconsistencies in the colors as they appear in Figma vs. Storybook. i've noted all that i could find in the section above, but please make any notes of others that you might see. the tokens themselves should all be consistent between the code and the figma file, just not fully reflected yet in storybook

Screenshots

(if any)

[netlify]

✅ Deploy Preview for shidoka-applications ready!

Name	Link
🔨 Latest commit	c5df43d
🔍 Latest deploy log	https://app.netlify.com/sites/shidoka-applications/deploys/674e043bf90ddc00081fefb9
😎 Deploy Preview	https://deploy-preview-277--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.

[srpriyankashetty]

Hi @wbarbee ,

1. The tooltips in the dark mode - shows with black or transparent background - is this expected?
2. The Figma links provided does not show the dark theme - are these just for reference? (just check for 2 checkbox and Text area)

[wbarbee]

Hi @wbarbee ,

1. The tooltips in the dark mode - shows with black or transparent background - is this expected?
2. The Figma links provided does not show the dark theme - are these just for reference? (just check for 2 checkbox and Text area)

hi @srpriyankashetty

1. the tooltips and buttons will be updated separately as they are their own components
2. not all of the figma files have dark mode, we're just going off of the token values that they both share

thanks!

[srpriyankashetty]

In Dropdown
Multi select, multi select searchable and Data driven options - The selected options text is not clearly visible due to font color in dark mode.

[wbarbee]

In Dropdown Multi select, multi select searchable and Data driven options - The selected options text is not clearly visible due to font color in dark mode.

same thing here @srpriyankashetty. those are instances of the Tag component that will be styled correctly once those changes are merged in

[srpriyankashetty]

Verified Checkbox, Checkbox group and Checkbox subgroup looks fine in dark mode theme.
Verified Single, Single searchable, Multi select, Multi select searchable, Grouped and Data driven options dropdown looks fine in dark mode theme.
Verified the Number input in dark mode and looks fine
Verified the Toggle button in dark mode and looks fine.
Verified Text input and text input with icon in dark mode theme and looks fine.
Verified that Text Area looks fine in Dark mode theme.
Verified the Radio button and Radio button group in dark mode theme.

@wbarbee .
Just need clarification on the color of Radio button in dark mode - is this expected color?
The look and feel wise i feel its better if we have some lighter color.!

[wbarbee]

Verified Checkbox, Checkbox group and Checkbox subgroup looks fine in dark mode theme. Verified Single, Single searchable, Multi select, Multi select searchable, Grouped and Data driven options dropdown looks fine in dark mode theme. Verified the Number input in dark mode and looks fine Verified the Toggle button in dark mode and looks fine. Verified Text input and text input with icon in dark mode theme and looks fine. Verified that Text Area looks fine in Dark mode theme. Verified the Radio button and Radio button group in dark mode theme.

@wbarbee . Just need clarification on the color of Radio button in dark mode - is this expected color? The look and feel wise i feel its better if we have some lighter color.!

confirmed that this token, --kd-color-background-button-secondary-state-default, matches the checked color values from the radio button figma file. i'll double-check again when we make our final pass on these components. thank you!

[brian-patrick-3]

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

The release is available on:

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

Your semantic-release bot 📦🚀