ROU-12927: Align content patterns with Figma

[OS-giulianasilva]

This PR is for aligning the Content pattern group with the Figma design specs.

What was happening

• Content patterns had drifted from the Figma specs — Tag had no per-family text colour for the IsLight variant and reused the global 8px soft radius instead of the 4px Figma radius; User Avatar colour options did not match the Figma palette; Chat Message used oversized photos, padding and status type; Section had no colour on the content area, the wrong title weight, and no gap between grouped sections; List Item and List Item Content mixed spacing and hover tokens inconsistently.
• Several spacing declarations used $token-scale-* where $token-space-* is the correct semantic spacing scale (Floating Content, Chat Message, Section, Tag).
• --osui-bg-surface-hover was pinned to a raw neutral primitive with a future: TODO instead of the now-available $token-bg-neutral-subtlest-hover token.
• Storybook could not serve the development bundle, so pattern stories rendered against a stale production CSS build.

What was done

• Tag: added a per-family text-colour map for the IsLight variant, reworked the neutral/background colour options, and scoped a 4px --osui-tag-soft-border-radius to the Soft shape.
• User Avatar: aligned the colour options and sizing with the Figma spec.
• Chat Message: resized the photo to 32px, corrected padding and the status type scale, and exposed --osui-chat-message-status-color.
• Section: exposed --osui-section-content-color (text/subtlest), switched the title to the medium weight, and made .section-group a flex column with a new --osui-section-group-gap.
• List Item / List Item Content: consolidated hover and spacing tokens and dropped the unused list-item keyframes.
• Tooltip and Floating Content: corrected spacing tokens.
• Replaced the remaining $token-scale-* spacing uses with $token-space-*.
• Storybook: added a dev-bundle fallback so stories serve the development files.

Test Steps

1. Run npm run dev -- --target ODC to build the development bundle.
2. Run npm run storybook and open the local Storybook.
3. Check the Tag story across every colour family with IsLight on and off, and with the Soft shape selected — text colour and the 4px radius should match Figma.
4. Check User Avatar, Chat Message, List Item, Section (including a Section Group), Floating Content and Tooltip stories against their Figma frames.
5. Confirm the Section content text renders in text/subtlest and that sections inside a Section Group are spaced 16px apart.

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)

[wiz-code-outsystems]

Wiz Scan Summary

Scanner	Findings
Vulnerabilities	-
Sensitive Data	-
Secrets	-
IaC Misconfigurations	-
SAST Findings	3
Software Management Findings	-
Total	3

View scan details in Wiz

To detect these findings earlier in the dev lifecycle, try the Wiz Code extension for VS Code, JetBrains, or Visual Studio.

Pull Request Developer Guidance

Questions? See the Wiz FAQ.

Please contact the Security Office if you encounter issues with Wiz pull request scanning.

[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