# Animax Design System Components

Animax Design includes 3 major categories of primary components:

* **Base components** are low-level primitives that can be used to build more complex components. They are minimally styled and maximally customizable but require the most work to use, as they are not ready-to-use.
* A custom styled component can be formed by combining numerous base components together
* **Element components** are self-contained, ready-to-use UI components that work cohesively together. Due to the nature of their creation they do not require much customization, but still need careful consideration to achieve good results when used.
* Each element component has between 2 and 6 customizable parameters
* **Compound components** are large UI chunks that can essentially be drag and dropped to create a fully functional UI in seconds. They are, however, not customizable, and UI

Additionally, Animax Design also includes 5 categories of supplemental components:

* **Motion components** are building blocks for creating smooth animations and transitions across all platforms
* **Themes** are a group of offically-supported themes

## Base

- [ ] Font (Animax Sans, Animax Mono & Animax Serif)
- [ ] Typography
- [ ] Headings
- [ ] Paragraph text
- [ ] Animax icons set
- [ ] Small size icons
- [ ] Medium size icons
- [ ] Large size icons
- [ ] Variable size icons
- [ ] Color palette
- [ ] Shapes
- [ ] Rounding
- [ ] Border types
- [ ] Fills
- [ ] Shadows
- [ ] Size
- [ ] Base widths
- [ ] Base heights
- [ ] Spacing
- [ ] Bi-directional languages
- [ ] Accessibility
- [ ] Internationalization
- [ ] Layout
- Layout grid
- Ordering
- Application shells
- Application frames
- Header bars
- Containers (these are there not as panels, but to act as `<div class="container">` for setting a base amount of whitespace around a certain element)
- Menus
- Sidebars
- Toolbars
- Panels
- Single panels
- Panel groups
- Cards
- Draggables
- Resizables
- Bottom Bars
- [ ] Responsive layout
- [ ] Text
- [ ] Prose (based on Tailwind typography styles)
- [ ] Info text
- Help text
- Warning text
- Inline alert
- Link

## Element

(Please sort these in alphabetical order)

- [ ] Avatar
- [ ] Button
- [ ] Tool buttons
- [ ] Action buttons
- [ ] Card
- [ ] Carousel
- [ ] Contextual Actions (AKA Quick Actions)
- [ ] Context Menu (e.g. right-click menu)
- [ ] Collapse
- [ ] Textarea
- Plain textarea
- Rich text textarea
- Code textarea
- Markdown textarea
- [ ] Divider
- [ ] Dropdown
- [ ] Text
- Ellipsis
- Gradient Text
- [ ] Tags (including editable/creatable tags)
- [ ] Input label
- [ ] Autocomplete input (i.e. memory-based suggestion inputs, kind of linke Adobe Spectrum's Combo Box)
- [ ] Cascading input
- [ ] Colorpicker input
- Color area
- Color slider
- Color wheel
- Color loupe
- [ ] Checkbox
- [ ] Toggle switch
- [ ] Multiselect
- [ ] Text Input
- [ ] Number Input
- [ ] Radio input
- [ ] Select dropdown (including multiple nested dropdowns)
- [ ] Slider
- [ ] Time picker
- [ ] Status
- [ ] Badge (for individual color-based categorization)
- [ ] Tree select
- [ ] Scrollbar
- [ ] Zoombar
- [ ] Meter (e.g. storage used) - should have 3 colors, green, orange, and red for - [ ] indicating the quantity or percentage
- [ ] Tree/outliner view
- [ ] File upload input
- [ ] Tables
- [ ] Empty state page
- [ ] Block/inline image (w/ lightbox effect and photo viewer support)
- [ ] Onboarding/guides
- Steps
- Hightlight
- Coach mark
- [ ] List
- [ ] Logging
- [ ] Statistics
- [ ] Time
- [ ] Timeline
- [ ] Breadcrumbs
- [ ] Progress
- Loading bar
- Circular progress
- Loading animator
- Load indicator
- Spinner
- [ ] Pagination
- [ ] Tabs
- [ ] Dialog
- [ ] Drawer
- [ ] Accordion
- [ ] Modal
- [ ] Notification
- [ ] Popover
- [ ] Popconfirm
- [ ] Space
- [ ] Languages
- [ ] Theme select

## Compound

## Motion

Animation
Interaction
Transition

## Extras

Graphics
Diagrams
Data visualization
- Axis
- Legend
- Area chart
- Bar chart
- Big number
- Donut chart
- Historgram
- Line chart
- Scatter plot
Illustration

## Language & Writing

(To be added)

## Patterns

## Interface Testing

Design checklist
- Works properly across:
- All color themes
- All platform/screen sizes
- Accessible color
- Accessible contrast
- Clear text content
- Includes clearly-defines guidelines for:
- Element options (size style, orientation, etc.)
- Element behaviors
- Dos and dont's
- Best practices, common mistakes
- Internationalization
- Language/writing standards
Altered color simulation
- Deuteranopia simulation
- Tritanopia simulation
- Monochromacy simulation
False color tests (for determining how well hierarchy and layout is structured even in the absence of color)
Tab index
Keyboard-accessible usage
Non-visual feedback

## Theming

Light theme
Dark theme
High Contrast theme
Tinted themes
- Purple-tinted theme
- Red-tinted theme
- Blue-tinted theme
Eye comfort theme (eye-protecting theme, less blue light)