# Hopper Documentation for LLMs

> Hopper is Workleap's accessible component system for building products with speed and consistency

## Full Documentation Sets

- [Complete documentation](./llms-full.txt): The complete Hopper documentation including all components, styling, design tokens, icons, and guides
- [Getting Started](./getting-started/index.txt): Comprehensive guides for installing the Hopper Design System across various frameworks.
- [Styling](./styled-system/index.txt): Documentation for the styled system, design tokens, responsive styles, and theme customization
- [Design Tokens](./tokens/index.txt): Comprehensive reference for semantic colors, typography, spacing, and other design tokens
- [Components](./components/index.txt): Documentation for all React components in Hopper
- [Components Best Practices](./components/concepts/index.txt): Concepts and best practices for using components effectively
- [Components Utilities](./components/utilities/index.txt): Utility functions and React hooks for using components effectively
- [Icons](./icons/index.txt): Documentation for all React icons and rich icons with descriptions and usage examples

## Best Practices

- [Layout](./components/layout.txt): Building application layouts using Flex or Grid
- [Color Schemes](./components/color-schemes.txt): Applying light mode, dark mode, or adapt to operating system's dark mode
- [Forms](./components/forms.txt): Best practices for building forms in Hopper Design System
- [Controlled Mode](./components/controlled-mode.txt): Using controlled and uncontrolled modes to customize components
- [Slots](./components/slots.txt): How Hopper components include predefined layouts that you can insert elements into via slots
- [Internationalization](./components/internationalization.txt): Adapting components to respect languages and cultures
- [Client Side Routing](./components/client-side-routing.txt): Integrating Hopper links with your framework or client side router

## Icons

- [React Icons](./icons/react-icons/index.txt): All available react icons with each icon description and usage examples
- [SVG Icons](./icons/SVG-icons/index.txt): All available SVG icons with each icon description and usage examples

## Design Tokens

### Semantic Tokens

- [Semantic Color](./tokens/semantic/color.txt): Semantic colors for text, surfaces, borders, and icons with interactive states
- [Semantic Elevation](./tokens/semantic/elevation.txt): Box shadows for creating depth and hierarchy in interfaces
- [Semantic Shape](./tokens/semantic/shape.txt): Border radius values for rounded corners and circular elements
- [Semantic Space](./tokens/semantic/space.txt): Spacing tokens for padding, margin, and layout gaps
- [Semantic Typography](./tokens/semantic/typography.txt): Font styles, sizes, and weights for headings and body text

### Core Tokens

- [Core Border Radius](./tokens/core/border-radius.txt): Fundamental border radius values from 0 to full circles
- [Core Color](./tokens/core/color.txt): Raw color palette values across all brand color scales
- [Core Dimensions](./tokens/core/dimensions.txt): Base spacing units from 0 to 8rem for layouts
- [Core Font Family](./tokens/core/font-family.txt): Typography font stacks for primary, secondary, and monospace
- [Core Font Size](./tokens/core/font-size.txt): Font size scale from 0.75rem to 3rem
- [Core Font Weight](./tokens/core/font-weight.txt): Font weight values from 400 to 690
- [Core Letter Spacing](./tokens/core/letter-spacing.txt): Letter spacing values for tracking adjustments in typography
- [Core Line Height](./tokens/core/line-height.txt): Line height ratios for consistent vertical rhythm
- [Core Motion](./tokens/core/motion.txt): Animation durations and easing functions for transitions
- [Core Shadow](./tokens/core/shadow.txt): Box shadow values for elevation effects

## Notes

- The complete documentation includes all content from the official Hopper documentation
- All components are built with React Aria for accessibility and keyboard navigation
- Content is automatically generated from the same source as the official documentation