Mihr UI
A complete Flutter UI kit with design tokens, semantic theme extensions, WCAG-compliant palette generation, and production-ready components.
Features
- 6 core + 17 accent + 7 gray color palettes (12 shades each)
- 7 semantic ThemeExtension classes (TextColors, BackgroundColors, BorderColors, ForegroundColors, AlphaColors, UtilityColors, ComponentColors)
- Runtime palette generation from any color with WCAG AA auto-correction
- Typography scale: 11 sizes × 4 weights with Material TextTheme bridge
- Spacing system: 30 primitives + 17 semantic tokens + EdgeInsets/Gap helpers
- Border radius: 11 named sizes with pre-built BorderRadius constants
- Shadows, backdrop blurs, and gradient systems
- Automatic light/dark mode switching
- Button component system: 6 types × 4 sizes with icon variants
- Full Material ColorScheme bridge (30+ properties, 22 widget themes)
Installation
dependencies:
mihr_ui: ^0.1.0-dev.1
Quick Start
import 'package:mihr_ui/mihr_ui.dart';
MaterialApp(
theme: MihrTheme.light(),
darkTheme: MihrTheme.dark(),
home: const MyApp(),
);
Customization
Use a custom brand color:
MihrTheme.light(brand: ColorScaleGenerator.fromHex('#E63946'))
Access semantic tokens via context extensions:
context.textColors.primary
context.bgColors.brandSolid
Semantic Token Reference
| Extension | Getter | Tokens |
|---|---|---|
| TextColors | context.textColors |
23 |
| BackgroundColors | context.bgColors |
32 |
| BorderColors | context.borderColors |
10 |
| ForegroundColors | context.fgColors |
21 |
| AlphaColors | context.alphaColors |
20 |
| UtilityColors | context.utilityColors |
18 families |
| ComponentColors | context.componentColors |
29 |
Components
Available button types:
- MihrPrimaryButton — solid brand fill, highest emphasis
- MihrSoftPrimaryButton — tinted brand fill, no border
- MihrSecondaryButton — outlined with gray border
- MihrTertiaryButton — ghost / transparent
- MihrLinkButton — inline text link (brand or gray)
- MihrDestructiveButton — error variants (primary, soft, secondary, tertiary, link)
All buttons support 4 sizes (sm, md, lg, xl) and icon variants.
Contributing
Contributions are welcome! Please read our Contributing Guide before submitting a PR.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Libraries
- Mihr UI button component library.
- core/theme/colors/accent_colors
- core/theme/colors/alpha_colors
- core/theme/colors/background_colors
- core/theme/colors/border_colors
- core/theme/colors/color_scale
- core/theme/colors/color_scale_generator
- core/theme/colors/component_colors
- core/theme/colors/foreground_colors
- core/theme/colors/gray_variants
- core/theme/colors/mihr_colors
- core/theme/colors/mihr_gradients
- core/theme/colors/text_colors
- core/theme/colors/utility_colors
- core/theme/colors/utility_scale
- core/theme/mihr_theme
- core/theme/radius/mihr_radius
- core/theme/shadows/mihr_backdrop_blurs
- core/theme/spacing/mihr_breakpoints
- core/theme/spacing/mihr_spacing
- core/theme/spacing/mihr_widths
- core/theme/typography/mihr_typography
- core/widgets/frosted_container
- mihr_ui
- Mihr UI -- A complete Flutter design system.