feat(KLEF-42): Glass Components

[Chronyyx]

Pull Request

Summary

This PR introduces the new glassmorphism UI tokens and interactive effects into the core @kleffio/ui library. It establishes the global CSS utility classes required for the updated Cortex-inspired aesthetic and overhauls several foundational components (Buttons, Badges, Button Groups) to support glowing drop shadows and semi-transparent alpha overlays.

Related Issues

Closes #KLEF-42

---

Changes

What's Included

• Global CSS (index.css):
  • Added new glassmorphism structural classes (.overview-glass-card, .glass-surface, .glass-panel).
  • Added keyframes and utility classes for the new interactive orb backgrounds (.ui-orb-shell, .ui-orb-core, .ui-orb-edge-scrim).
  • Introduced .ui-animated-input and progress particle animation utilities.
• Badge Component: Overhauled all variants (default, secondary, destructive, outline, ghost, beta, stable, new) to use white alpha backgrounds and glowing shadows (shadow-[0_0_12px_...]) instead of solid colors.
• Button Component: Updated the default button variant in button-variants.ts to use bg-gradient-kleff, fully rounded corners, and a new golden drop shadow (shadow-[0_12px_27px_rgba(196,143,0,0.22)]).
• Button Group Component: Refactored ButtonGroupText and ButtonGroupSeparator to use the .glass-surface utility and semi-transparent white/[0.08] dividers instead of solid input borders.

What's Not Included

• No changes to component APIs or prop structures (this is strictly a visual token/styling update).
• The toast routing/showcase changes are handled in the components-plugin repository.

---

Testing

How Was This Tested?

• Verified the rendering of the new glass-surface and overview-glass-card classes locally.
• Confirmed that the updated button gradient and shadow tokens apply correctly across all button sizes.
• Tested the newly added .ui-orb-shell and particle animation CSS classes for performance/layout issues.

Test Coverage

• Unit tests added or updated
• Integration tests added or updated
• Manually tested visually via Storybook/Showcase

---

Breaking Changes

Does this PR introduce breaking changes?

• Yes
• No

If yes, describe the impact and any required migration steps:
(While visual styles have changed significantly, component APIs remain completely backward compatible.)

---

Security Considerations

• This PR affects authentication or authorization logic
• This PR touches secrets, tokens, or environment variables
• This PR affects infrastructure, deployment pipelines, or network configuration

If any box is checked, describe the security impact and any mitigations applied:

---

Documentation

Does this PR require documentation updates?

• Yes
• No

If yes, check all that apply:

• README.md
• ARCHITECTURE.md (Design system tokens)
• API reference
• Architecture diagrams (C4 / DDD)
• /docs

---

UI/UX (If Applicable)

• Includes new components or views
• Changes styles or theme tokens
• Responsive behavior verified
• Requires design approval

Screenshots or recordings:
(Feel free to drop screenshots of the updated Buttons and Badges here)

---

Pre-Merge Checklist

• PR title follows semantic format (feat:, fix:, chore:, docs:, refactor:, test:)
• All CI checks passing
• Code follows project style guidelines
• No debug logs or commented-out code left in
• Dependencies reviewed (no unnecessary additions)
• No sensitive information included

---

Reviewer Notes

These core tokens are required by components-plugin PR #KLEF-42. Please ensure this is merged and published before deploying the plugin update.