[DOCS] Docs describing the API, utilization and examples of the @daffodil/design package

[xelaint]

📄 Documentation Request

What were you doing?

Expected behavior

Package Docs

• Getting Started (docs(design): update getting started docs #3271)
• What's new/Release Notes [FEAT] Consider creating a "what's new/release notes" for @daffodil/design #3303
• Colors
• SCSS Usage Examples
• SCSS API
• SCSS Tutorials
• Typography
• [DOCS] Add documentation for design token/css custom properties #2801
• [DOCS] Update daff-illuminate function documentation #1412
• [DOCS] @daffodil/design Theming Guide #2901
• Accessibility

For each component

• Overview with basic examples
• Overview with general features of the component
• Overviews should reference token of the API
• Reference should take you to a separate API page with usage examples
• Tabs: Usage, API ([FEAT] Tabs Component #3123)

Component Docs

• Accordion
  • Overview (docs exist, but need more in depth docs)
  • Examples
• Article
  • Overview
  • Examples
• Button
  • Overview
  • Examples
• Callout
  • Overview
  • Examples
• Card
  • Overview
  • Examples
• Container
  • Overview (docs exist, but need more in depth docs)
  • Examples
• Hero
  • Overview
  • Examples
• Image
  • Overview
  • Examples
• Input (needs to be refactored, so current docs are irrelevant)
  • Overview
  • Examples
• Link Set
  • Overview (needs to be cleaned up)
  • Examples (examples need to be moved into its own components so that it can be rendered by the example viewer)
• List
  • Overview (needs to be cleaned up)
  • Examples (examples need to be moved into its own components so that it can be rendered by the example viewer)
• Loading Icon
  • Overview (readme file is not up-to-date)
  • Examples
• Media Gallery
  • Overview
  • Examples
• Menu
  • Overview (docs exist, but need more in depth docs)
  • Examples
• Modal
  • Overview (design-land and readme docs are not synced up)
  • Examples
• Navbar
  • Overview
  • Examples
• Notification
  • Overview (design-land and readme docs are not synced up)
  • Examples
• Paginator
  • Overview (design-land and readme docs are not synced up)
  • Examples
• Quantity Field
  • Overview (design-land and readme docs are not synced up)
  • Examples
• Radio (needs to be refactored, so current docs are irrelevant)
  • Overview
  • Examples
• Sidebar
  • Overview
  • Examples
• Tree
  • Overview
  • Examples

Existing Documentation

Environment

Daffodil version: X.Y.Z
Angular version: X.Y.Z 

 
For Tooling issues:
- Node version: XX  
- Platform:  

Others: