Fluent: Input Group - discrepancies between Figma design and implementation

[yradoeva]

There are some visual differences between the Figma design and the implementation (both Angular and WebC) for the Input group controls - Input, Combo, Select, Text area, Date picker, Time picker, Search in the Fluent theme.

❗ Currently I am double-checking and updating in a branch the Figma design kit - as soon as ready I'll put a link here.

Some of the discrepancies are:
Light mode:

1. Input Group (Input, Search, Text area, Combo, Select, Date Picker, Time Picker) - idle, filled - border color should be grays.700 (not grays.500)
2. Input Group (Input, Search, Text area, Combo, Select, Date Picker, Time Picker) - hover, filled & hover- border color should be grays.900 (not grays.700)
3. Combo - disabled - toggle button color should be light grays.500 (not .400)
4. Input, Search, Date picker - focused; Combo, Select - focused, dropdown closed
   The label should be grays.900 (not .800)
5. Search: - Idle, idle & hover, filled, filled&hover - prefix and suffix icons are color primary.500 and have transparent background of the slot

Dark Mode
6. Input Group (Input, Search, Text area, Combo, Select, Date Picker, Time Picker) - idle, filled - border color should be grays.400 (not grays.500)
7. Input Group (Input, Search, Text area, Combo, Select, Date Picker, Time Picker) - hover, filled & hover - hover border color should be grays.800 (not grays.700)
8. Input Group (Input, Text area, Combo, Select, Date Picker, Time Picker) - label color should be grays.800 (not .900) in all states, except disabled
9. Input Group (Input, Text area, Combo, Select, Date Picker, Time Picker) - placeholder and hover placeholder color should be grays.400 (not .700)
10. Input Group (Input, Text area, Combo, Select, Date Picker, Time Picker) - disabled state: - label, hint, prefix icon, suffix icon, toggle icon, clear icon, placeholder, input text color should be grays.300 (not .500)
11. Input Group (Input, Search, Text area, Combo, Select, Date Picker, Time Picker) - focused - border color should be primary.500 (not grays.500)
12. Input Group (Input, Text area, Combo, Select, Date Picker, Time Picker) - prefix, suffix and toggle button - all states except disabled: - background-color: dark grays.50; - color: dark grays.400
13. Search: - Idle, idle & hover, filled, filled&hover - prefix and suffix icons are color primary.500 and have transparent background of the slot

[yradoeva]

The design is ready - https://www.figma.com/design/hHXKBpg1UhCMziIkdsYLFF/Indigo.Design-UI-Kit-for-Fluent-1.6?m=auto&node-id=2453-63968&t=n9k7tTzo8ngdmalO-1