Fix: Improve Storybook theming, token reliability, and form control focus behavior

[tinydinosaurs]

This PR cleans up Storybook styling infrastructure and fixes a few visual behavior issues in form controls.

What changed

• Unified theme setup so Storybook switches between light and dark more reliably, with less visual flashing.
• Consolidated VS Code token usage to reduce drift and missing-token issues.
• Added token coverage validation so missing CSS variables are caught early.
• Improved docs/preview styling rules and added clearer notes for maintenance.
• Fixed focus behavior on input-like controls so focus styles are consistent and match expected VS Code behavior.
• Fixed dropdown/combobox focus edge cases where focus visuals could appear at the wrong time.
• Added new dropdown and combobox stories to better show:
  • selected states
  • open popup states
  • closed trigger vs open list visual coverage

Why this matters

For design review:

• More consistent light/dark visuals
• More accurate focus and selected-state behavior
• Better story coverage for UI state validation

For engineering review:

• Less theme re-render churn
• Stronger token source-of-truth and validation
• Safer Storybook setup with clearer behavior and easier regression checking

Validation done

• Lint and formatting run
• Typecheck passes
• Test suite passes, including token coverage tests

Scope

• Storybook and styling infrastructure improvements
• Focus/visual behavior fixes for input/dropdown/combobox
• Story additions for state coverage
• No API redesign or large behavioral changes outside styling/state presentation

[amy-sijinc-chen]

1. When using dark mode, could we also make the page background dark?

2. could we add a toggle to show or hide the icon, and use a placeholder icon to indicate selection for before or after? 3. Could this be a component issue? The large label should be 14px rather than 12px. Perhaps we could include a checkbox list here as an example for the three sizes? 4. there is a bug with the field 5. error message and warning message styling looks different from the playground and design 6.this might be a component thing: i wonder if we should remove the "x" in the default state because there is nothing to clear 7.not sure how to change size here?

[tinydinosaurs]

Updates based on feedback:

1. Full dark background in dark mode - that might take a bit of work. I'd like to do it in a different PR.
2. Button w/ icons - added an icon property in the controls with a dropdown so you can select from a variety of icons or select "none." It defaults to "none."
3. Dropdown sizes - added size property in the controls with radio buttons to select from small, medium, and large.
4. Field warning state - fixed the storybook story so it renders validations states correctly when using the controls
5. Input validation message - neither the playground nor the figma have a message variant; however, the component itself provides the option to include a variant. It's custom - Fluent inputs don't include it. It's styled in the code the way it appears in Storybook, so we'll need to figure how to handle that.
6. Searchbox X icon - requires a change to the actual component. I recommend a separate PR for that work.
7. Tablist size prop - swapped the object field for radio buttons to easily preview different sizes.

[amy-sijinc-chen]

1. Could we add the three sizes to the input elements as well?

2. The "error/warning state with message" in the field elements appears correct, but in the input element, it looks different. Is it possible to keep the correct version?

3. For the tabs, I don't think we had the grey background on hover?

[tinydinosaurs]

Note: will follow up with potentially 3 PRs:

1. Input validation, once we decide on approach
2. Radio buttons, if this PR doesn't fix them
3. Reorganization of storybook sidebar and possibly update UI