# ThemeKit

> A token-driven, brand-neutral SwiftUI design system — 117 components, runtime theming, and the 33 theme presets. Every color / radius / spacing / type style is a design token resolved at runtime from the active `Theme`; components never hardcode a color.

Rules for generating ThemeKit code:
- Read the theme via `@Environment(\.theme) private var theme`; inject `.environment(Theme.shared)` once at the root. Never hardcode a color — use `theme.text(.textPrimary)`, `theme.background(.bgWhite)`, or a `SemanticColor`.
- Put required content/bindings/actions in `init`; set variants, sizes, flags, colors and callbacks with chainable modifiers.
- Sizes use `.controlSize(_:)`; disabled state uses `.disabled(_:)`.
- Recolor everything with `Theme.shared.applyGenerated(primaryHex:)` or a daisyUI theme: `ThemePreset.named("dracula")?.apply()`.

## Docs
- [SKILL.md](skills/themekit/SKILL.md): idioms, setup, patterns, anti-patterns
- [Components reference](skills/themekit/references/components.md): every component's init + modifiers
- [Themes reference](skills/themekit/references/themes.md): the theme-preset catalog

## Atoms

`AnimatedImage`, `Avatar`, `AvatarGroup`, `Badge`, `Chip`, `Ribbon`, `DividerView`, `GaugeView`, `Icon`, `InlineText`, `InputLabel`, `Join`, `Kbd`, `ProgressBar`, `StepIndicator`, `RadialProgress`, `Rating`, `RemoteImage`, `RollingNumber`, `ScoreBadge`, `ShareButton`, `Skeleton`, `Spinner`, `StatusDot`, `Swap`, `Tag`, `TextLink`, `TextRotate`, `Title`

## Molecules

`Autocomplete`, `Breadcrumbs`, `ButtonGroup`, `PrimaryButton`, `SecondaryButton`, `OutlineButton`, `GhostButton`, `LinkButton`, `ThemeButton`, `CalendarView`, `Checkbox`, `CheckboxGroup`, `ImageChip`, `CompactChip`, `ChoseChip`, `FilterChip`, `ChipGroup`, `ColorField`, `DateField`, `Fieldset`, `FileInput`, `FilterGroup`, `InputNumber`, `MultiLineTextInput`, `MultiSelect`, `OTPInput`, `Pagination`, `ProgressIndicator`, `QuantityStepper`, `RadioButton`, `RadioGroup`, `RadioButtonGroup`, `RangeSlider`, `SearchBar`, `SegmentedControl`, `Select`, `SelectBox`, `Slider`, `Stat`, `Steps`, `TextInput`, `ThemeController`, `ThemeToggle`, `TimeField`, `ToggleGroup`, `TreeSelect`

## Organisms

`Accordion`, `AccordionGroup`, `AlertToast`, `BlogCard`, `Callout`, `Card`, `CardStack`, `Carousel`, `ChatBubble`, `Counter`, `Coupon`, `DataTable`, `Diff`, `EmptyState`, `FloatingActionButton`, `Footer`, `Gallery`, `Hero`, `HeroSurface`, `ImageCollage`, `InfoBanner`, `KeyValueTable`, `ListRow`, `ListSectionHeader`, `ListView`, `MenuCard`, `NavigationBar`, `NotificationCard`, `PageHeader`, `PagingCarousel`, `PromoBanner`, `RatingSummary`, `ResultView`, `SegmentedTabBar`, `RadioCard`, `CheckboxCard`, `Sidebar`, `ThemePicker`, `Timeline`, `Upload`, `UploadList`, `VideoPlayerView`

## Chainable modifiers

`.a11yID()` `.a11yLabel()` `.action()` `.actions()` `.addons()` `.alertCount()` `.alignment()` `.allowHalf()` `.arrows()` `.aspect()` `.autocorrectionDisabled()` `.autoplay()` `.axis()` `.backButton()` `.badge()` `.badgeColor()` `.badgeShape()` `.badgeStyle()` `.barHeight()` `.bordered()` `.buttonTitle()` `.calloutStyle()` `.cascade()` `.characterLimit()` `.chipStyle()` `.circle()` `.clearable()` `.closable()` `.color()` `.colors()` `.columns()` `.compact()` `.components()` `.confirmsSuccess()` `.contentMode()` `.contentPadding()` `.cornerRadius()` `.countLabel()` `.couponStyle()` `.cta()` `.ctaTitle()` `.customSize()` `.dark()` `.dashboard()` `.dashed()` `.date()` `.debounce()` `.density()` `.description()` `.digitCount()` `.dimension()` `.divider()` `.dots()` `.editable()` `.elevation()` `.emptyText()` `.errorText()` `.excerpt()` `.exists()` `.expands()` `.externalFocus()` `.extraAction()` `.eyebrow()` `.fade()` `.fileName()` `.fillColor()` `.footer()` `.formatter()` `.free()` `.fullWidth()` `.gap()` `.gaugeStyle()` `.gradient()` `.groupStyle()` `.hasError()` `.hasInfo()` `.header()` `.height()` `.helper()` `.helperText()` `.highlighted()` `.hint()` `.hourCycle()` `.icon()` `.iconBackground()` `.iconCircleSize()` `.iconForeground()` `.imageMaxHeight()` `.imageURL()` `.indeterminate()` `.indicator()` `.infoMessages()` `.infos()` `.inlineStyle()` `.inputs()` `.interactive()` `.jumper()` `.keyboard()` `.label()` `.large()` `.layout()` `.leadingImage()` `.leadingSelection()` `.lineWidth()` `.loading()` `.locale()` `.loop()` `.marks()` `.maxCount()` `.maxLength()` `.maxResults()` `.maxTags()` `.maxValue()` `.maxVisible()` `.message()` `.meta()` `.minHeight()` `.minuteInterval()` `.mode()` `.multilineTitle()` `.muteToggle()` `.muted()` `.nodeEnabled()` `.number()` `.onBack()` `.onChangeEnd()` `.onClear()` `.onClose()` `.onCommit()` `.onDismiss()` `.onInfo()` `.onRate()` `.onReviewTap()` `.onRowTap()` `.onSearch()` `.onSelect()` `.onValueChange()` `.optionDescription()` `.optionEnabled()` `.pageSize()` `.peek()` `.pending()` `.placeholder()` `.prefix()` `.presence()` `.primaryAction()` `.progressDot()` `.progressLabel()` `.prompt()` `.pulse()` `.radioStyle()` `.range()` `.rating()` `.ratio()` `.recent()` `.required()` `.resend()` `.reversed()` `.reviews()` `.ringColor()` `.rotate()` `.scrollable()` `.searchable()` `.secondaryAction()` `.secure()` `.selectAll()` `.selected()` `.sentiment()` `.shape()` `.showTotal()` `.showsCount()` `.showsIcon()` `.showsLabel()` `.showsPercentage()` `.showsValue()` `.showsValueTooltip()` `.side()` `.simple()` `.size()` `.small()` `.spacing()` `.split()` `.starSize()` `.status()` `.step()` `.stepText()` `.steps()` `.striped()` `.style()` `.subtitle()` `.successSegment()` `.suffix()` `.suggestionEnabled()` `.suggestions()` `.supportsOpacity()` `.symbol()` `.symbols()` `.tabStyle()` `.tagStyle()` `.tags()` `.tapToToggle()` `.title()` `.titleAlign()` `.titleSize()` `.titleTextStyle()` `.trailing()` `.trailingIcon()` `.trend()` `.truncateSubtitle()` `.type()` `.underline()` `.unit()` `.unread()` `.valueFormat()` `.valueLabel()` `.variant()` `.videoProgress()` `.warningText()` `.weight()` `.width()` `.window()`

## Theme presets

`default`, `light`, `dark`, `cupcake`, `bumblebee`, `emerald`, `corporate`, `synthwave`, `retro`, `cyberpunk`, `valentine`, `halloween`, `garden`, `forest`, `aqua`, `lofi`, `pastel`, `fantasy`, `wireframe`, `black`, `luxury`, `dracula`, `cmyk`, `autumn`, `business`, `acid`, `lemonade`, `night`, `coffee`, `winter`, `dim`, `nord`, `sunset`
