[Task] Implement AppBar

[soroushm]

Task Description ✏️

Implement the AppBar component as part of the design system epic #40.
The AppBar provides a top-level container for application navigation, headers, or toolbars. It will consume theme tokens for color, spacing, and elevation. It will support configurable color, position, and dark-mode behavior.

Acceptance Criteria ✅

• AppBar component implemented
• Supports color from theme tokens.
• Supports position prop (absolute, fixed, relative, static, sticky) for layout positioning.
• Renders children correctly within the AppBar.
• Inherits styled-system props for spacing, layout, color, and position if needed.
• Unit tests verify rendering, color application, position behavior, and dark mode behavior.
• Storybook stories demonstrate color variations, positions, and dark-mode behavior.
• No raw CSS values — all styles derived from theme tokens.
• Code passes linting, typing, and CI checks.

Dependencies 🔗

No response

Definition of Ready (DoR) 📋

• Task is independent and scoped to the AppBar component.
• Theme tokens for color and elevation are available.
• Props to be supported by AppBar are agreed upon (color, position).

Definition of Done (DoD) 🏁

• AppBar component implemented with color, position, and dark-mode support.
• Children render correctly inside AppBar.
• Unit tests cover color variations, position behavior, and dark-mode behavior.
• Storybook stories demonstrate all supported colors, positions, and dark-mode application.
• Code reviewed, linted, typed, and passes CI checks.
• Documentation updated in Storybook for AppBar usage.
• Component is ready for reuse across the design system.

Additional Notes or Resources 📎

No response