ROU-12875: Align Dropdown, DatePicker and Animated Label with Figma

[OS-giulianasilva]

This PR is for aligning the Dropdown (search/tags), DatePicker calendar, and Animated Label visuals with the Figma spec, and for routing remaining hardcoded values through design tokens.

What was happening

• Dropdown tag text and clear icons used --color-text with opacity-based hover states, diverging from the Figma spec (subtlest icon/text colors with a darkened hover state)
• Dropdown tags had symmetric padding and a smaller height than Figma; the "toggle all" checkbox sat at the start of the search bar
• The clear icon color was a hardcoded hex (#91999e) and the search placeholder used --color-text at 50% opacity
• The dropdown selected-value text always used the default text color, with no distinction between placeholder, hover, and filled states
• Focused options in the VirtualSelect list used --color-border-subtle as background, and focused+selected options had no visual feedback
• The disabled Dropdown border used --color-border instead of matching the disabled input border, and the disabled-state rules were nested under the search/tags mode classes only, tinting the whole toggle button instead of just the value text
• The DatePicker weekday header used the subtlest text color (too low contrast), and hovered/focused day cells showed primary-tinted text on a border-colored background; the "Today" button separator used --osui-border-subtle
• The Service Studio dropdown preview had wrong border radius, padding, text color, and vertical alignment, and the tag preview was double-offset vertically
• The Animated Label floating text had a hardcoded top offset on tablet/phone, misaligning it against the default position
• --osui-border-subtle pointed directly at $token-primitives-neutral-300 as a workaround while the border.subtle token was wrong upstream (neutral.100); the fix is now upstream in outsystems-design-tokens PR 99
• The generated CSS API reference was stale (missing the Badge/IconBadge updates from ROU-12877)

What was done

• Added --osui-dropdown-tag-color CSS API property defaulting to $token-text-subtlest
• Tag clear button and search clear icon now use $token-icon-subtlest, darkening to $token-icon-default on hover (replaces the opacity-based states)
• Tag height bumped to $token-scale-700, horizontal padding adjusted to space tokens (0 $token-space-200 0 $token-space-300), and the "toggle all" checkbox moved to the end of the search bar
• Search placeholder now uses --color-text-subtlest; clear icon hex replaced with $token-icon-subtlest
• Selected-value text now defaults to --color-text-subtlest (placeholder state), switches to --color-text on hover, and stays --color-text whenever the dropdown has a value
• Focused options (including selected ones) now use $token-bg-neutral-subtlest-hover
• Disabled Dropdown border now uses --color-border-input to match disabled inputs; disabled-state styles consolidated at the widget root classes (osui-dropdown / osui-dropdown-search / osui-dropdown-tags), with the disabled text color scoped to the value element
• DatePicker weekday header now uses --color-text-subtle; hovered/focused day cells use $token-bg-neutral-subtle-default background with --color-border and --color-text; "Today" button separator uses --color-border
• Fixed Service Studio dropdown preview border radius ($token-border-radius-200), padding ($token-space-400), text color ($token-text-subtlest), and vertical centering
• Storybook Dropdown story now mirrors the platform mode class (osui-dropdown-search / osui-dropdown-tags) on the widget root
• Removed the tablet/phone top offset on .animated-label-text
• --osui-border-subtle now aliases $token-border-subtle (resolves to the intended neutral-300 once the upstream token fix ships and the dependency is bumped)
• Regenerated the CSS API reference docs

Test Steps

1. Run npm run dev -- --target ODC and open the Storybook/dev page with a Dropdown in tags mode
2. Verify tag text and clear icons render in the subtlest color and darken on hover, and tags have the updated height/padding
3. With no selection, verify the placeholder text is subtlest and darkens on hover; select a value and verify the text stays in the default text color even without hover
4. Open the dropdown list and verify focused and focused+selected options show the neutral hover background, and the "toggle all" checkbox sits at the end of the search bar
5. Set the Dropdown to disabled (both search and tags modes) and verify the border matches a disabled input and only the value text is tinted with the disabled color
6. Open a DatePicker and verify the weekday header contrast and the neutral hover state on day cells
7. Check a Dropdown preview in Service Studio for correct radius, padding, and centering
8. On a tablet/phone viewport, verify the Animated Label floating text position

Screenshots

(prefer animated gif)

Checklist

• tested locally
• documented the code
• clean all warnings and errors of eslint
• requires changes in OutSystems (if so, provide a module with changes)
• requires new sample page in OutSystems (if so, provide a module with changes)

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud