Color Tokens
Base color palette tokens used to generate semantic color systems.Neutral Colors
Grayscale colors for backgrounds, text, and borders:import 'package:chromia_ui/chromia_ui.dart';
ColorTokens.neutral0 // #FFFFFF (White)
ColorTokens.neutral50 // #FAFAFA
ColorTokens.neutral100 // #F5F5F5
ColorTokens.neutral200 // #EEEEEE
ColorTokens.neutral300 // #E0E0E0
ColorTokens.neutral400 // #BDBDBD
ColorTokens.neutral500 // #9E9E9E
ColorTokens.neutral600 // #757575
ColorTokens.neutral700 // #616161
ColorTokens.neutral800 // #424242
ColorTokens.neutral900 // #2A2A2A
ColorTokens.neutral1000 // #212121 (Black)
Primary Colors
Blue colors for primary brand elements:ColorTokens.primary50 // #E3F2FD
ColorTokens.primary100 // #BBDEFB
ColorTokens.primary200 // #90CAF9
ColorTokens.primary300 // #64B5F6
ColorTokens.primary400 // #42A5F5
ColorTokens.primary500 // #2196F3
ColorTokens.primary600 // #1E88E5
ColorTokens.primary700 // #1976D2
ColorTokens.primary800 // #1565C0
ColorTokens.primary900 // #0D47A1
Secondary Colors
Purple colors for secondary brand elements:ColorTokens.secondary50 // #F3E5F5
ColorTokens.secondary100 // #E1BEE7
ColorTokens.secondary200 // #CE93D8
ColorTokens.secondary300 // #BA68C8
ColorTokens.secondary400 // #AB47BC
ColorTokens.secondary500 // #9C27B0
ColorTokens.secondary600 // #8E24AA
ColorTokens.secondary700 // #7B1FA2
ColorTokens.secondary800 // #6A1B9A
ColorTokens.secondary900 // #4A148C
Success Colors
Green colors for success states:ColorTokens.success50 // #E8F5E9
ColorTokens.success100 // #C8E6C9
ColorTokens.success200 // #A5D6A7
ColorTokens.success300 // #81C784
ColorTokens.success400 // #66BB6A
ColorTokens.success500 // #4CAF50
ColorTokens.success600 // #43A047
ColorTokens.success700 // #388E3C
ColorTokens.success800 // #2E7D32
ColorTokens.success900 // #1B5E20
Warning Colors
Orange colors for warning states:ColorTokens.warning50 // #FFF3E0
ColorTokens.warning100 // #FFE0B2
ColorTokens.warning200 // #FFCC80
ColorTokens.warning300 // #FFB74D
ColorTokens.warning400 // #FFA726
ColorTokens.warning500 // #FF9800
ColorTokens.warning600 // #FB8C00
ColorTokens.warning700 // #F57C00
ColorTokens.warning800 // #EF6C00
ColorTokens.warning900 // #E65100
Error Colors
Red colors for error states:ColorTokens.error50 // #FFEBEE
ColorTokens.error100 // #FFCDD2
ColorTokens.error200 // #EF9A9A
ColorTokens.error300 // #E57373
ColorTokens.error400 // #EF5350
ColorTokens.error500 // #F44336
ColorTokens.error600 // #E53935
ColorTokens.error700 // #D32F2F
ColorTokens.error800 // #C62828
ColorTokens.error900 // #B71C1C
Info Colors
Cyan colors for informational states:ColorTokens.info50 // #E0F7FA
ColorTokens.info100 // #B2EBF2
ColorTokens.info200 // #80DEEA
ColorTokens.info300 // #4DD0E1
ColorTokens.info400 // #26C6DA
ColorTokens.info500 // #00BCD4
ColorTokens.info600 // #00ACC1
ColorTokens.info700 // #0097A7
ColorTokens.info800 // #00838F
ColorTokens.info900 // #006064
Color Utilities
// Create color from hex string
final color = ColorTokens.fromHex('#FF5733');
final colorWithAlpha = ColorTokens.fromHex('#80FF5733');
// Get all shades as a map
final primaryShades = ColorTokens.primaryShades;
final neutralShades = ColorTokens.neutralShades;
// Create MaterialColor from any color
final materialColor = ColorTokens.createMaterialColor(Color(0xFF2196F3));
Typography Tokens
Standardized font sizes, weights, line heights, and letter spacing.Font Families
TypographyTokens.defaultFontFamily // 'Roboto'
TypographyTokens.monospaceFontFamily // 'RobotoMono'
Font Sizes
TypographyTokens.fontSize10 // 10.0
TypographyTokens.fontSize12 // 12.0
TypographyTokens.fontSize14 // 14.0
TypographyTokens.fontSize16 // 16.0
TypographyTokens.fontSize18 // 18.0
TypographyTokens.fontSize20 // 20.0
TypographyTokens.fontSize24 // 24.0
TypographyTokens.fontSize28 // 28.0
TypographyTokens.fontSize32 // 32.0
TypographyTokens.fontSize36 // 36.0
TypographyTokens.fontSize40 // 40.0
TypographyTokens.fontSize48 // 48.0
TypographyTokens.fontSize56 // 56.0
TypographyTokens.fontSize64 // 64.0
TypographyTokens.fontSize72 // 72.0
Font Weights
TypographyTokens.thin // FontWeight.w100
TypographyTokens.extraLight // FontWeight.w200
TypographyTokens.light // FontWeight.w300
TypographyTokens.regular // FontWeight.w400
TypographyTokens.medium // FontWeight.w500
TypographyTokens.semiBold // FontWeight.w600
TypographyTokens.bold // FontWeight.w700
TypographyTokens.extraBold // FontWeight.w800
TypographyTokens.black // FontWeight.w900
Line Heights
Relative to font size:TypographyTokens.lineHeightTight // 1.2
TypographyTokens.lineHeightNormal // 1.5
TypographyTokens.lineHeightRelaxed // 1.75
TypographyTokens.lineHeightLoose // 2.0
Letter Spacing
TypographyTokens.letterSpacingTight // -0.5
TypographyTokens.letterSpacingNormal // 0.0
TypographyTokens.letterSpacingWide // 0.5
TypographyTokens.letterSpacingWider // 1.0
TypographyTokens.letterSpacingWidest // 1.5
Spacing Tokens
Consistent spacing values following a 4px grid system.Base Spacing
SpacingTokens.none // 0px
SpacingTokens.xxs // 2px
SpacingTokens.xs // 4px
SpacingTokens.s // 8px
SpacingTokens.m // 12px
SpacingTokens.l // 16px
SpacingTokens.xl // 20px
SpacingTokens.xxl // 24px
SpacingTokens.xxxl // 32px
SpacingTokens.huge // 40px
SpacingTokens.xhuge // 48px
SpacingTokens.xxhuge // 64px
SpacingTokens.massive // 80px
Inset Tokens
For padding within components:InsetTokens.xs // 4px
InsetTokens.s // 8px
InsetTokens.m // 12px
InsetTokens.l // 16px
InsetTokens.xl // 24px
InsetTokens.xxl // 32px
Stack Tokens
For vertical spacing between stacked elements:StackTokens.xs // 4px
StackTokens.s // 8px
StackTokens.m // 12px
StackTokens.l // 16px
StackTokens.xl // 20px
StackTokens.xxl // 24px
StackTokens.xxxl // 32px
Inline Tokens
For horizontal spacing between inline elements:InlineTokens.xs // 4px
InlineTokens.s // 8px
InlineTokens.m // 12px
InlineTokens.l // 16px
InlineTokens.xl // 20px
InlineTokens.xxl // 24px
Semantic Design Systems
Tokens are composed into semantic design systems that provide higher-level APIs.ChromiaColors
Semantic color names for UI elements:- Brand Colors
- Surface Colors
- State Colors
- Borders & Text
colors.primary // Primary brand color
colors.primaryHover // Primary hover state
colors.primaryPressed // Primary pressed state
colors.primaryDisabled // Primary disabled state
colors.onPrimary // Text/icon color on primary
colors.secondary // Secondary brand color
colors.secondaryHover // Secondary hover state
colors.secondaryPressed // Secondary pressed state
colors.secondaryDisabled// Secondary disabled state
colors.onSecondary // Text/icon color on secondary
colors.surface // Default surface color
colors.surfaceHover // Surface hover state
colors.surfacePressed // Surface pressed state
colors.surfaceVariant // Variant surface color
colors.surfaceContainer // Container background
colors.surfaceContainerHigh // Elevated container
colors.surfaceContainerHighest // Most elevated container
colors.onSurface // Text/icon on surface
colors.onSurfaceVariant // Secondary text on surface
colors.background // Page background
colors.onBackground // Text/icon on background
colors.success // Success state color
colors.successHover // Success hover state
colors.onSuccess // Text/icon on success
colors.warning // Warning state color
colors.warningHover // Warning hover state
colors.onWarning // Text/icon on warning
colors.error // Error state color
colors.errorHover // Error hover state
colors.onError // Text/icon on error
colors.info // Info state color
colors.infoHover // Info hover state
colors.onInfo // Text/icon on info
colors.border // Default border color
colors.borderHover // Border hover state
colors.borderStrong // Emphasized border
colors.divider // Divider line color
colors.textPrimary // Primary text color
colors.textSecondary // Secondary text color
colors.textTertiary // Tertiary text color
colors.textDisabled // Disabled text color
colors.shadow // Shadow color
colors.overlay // Modal overlay color
colors.scrim // Scrim color
colors.transparent // Transparent
ChromiaTypography
Predefined text styles organized by purpose:// Display styles (largest text)
typography.displayLarge // 72px, bold
typography.displayMedium // 56px, bold
typography.displaySmall // 48px, semi-bold
// Headline styles (page titles)
typography.headlineLarge // 40px, semi-bold
typography.headlineMedium // 32px, semi-bold
typography.headlineSmall // 28px, medium
// Title styles (section titles)
typography.titleLarge // 24px, medium
typography.titleMedium // 20px, medium
typography.titleSmall // 18px, medium
// Body styles (main content)
typography.bodyLarge // 16px, regular
typography.bodyMedium // 14px, regular
typography.bodySmall // 12px, regular
// Label styles (buttons, form labels)
typography.labelLarge // 16px, medium, wider tracking
typography.labelMedium // 14px, medium, wider tracking
typography.labelSmall // 12px, medium, wider tracking
// Caption styles (supporting text)
typography.caption // 12px, regular
typography.overline // 10px, medium, widest tracking
// Code style
typography.code // 14px, monospace, relaxed line height
ChromiaSpacing
Spacing utilities with predefined values:// Raw values
spacing.none // 0
spacing.xxs // 2
spacing.xs // 4
spacing.s // 8
spacing.m // 12
spacing.l // 16
spacing.xl // 20
spacing.xxl // 24
spacing.xxxl // 32
// Predefined padding
spacing.paddingXS // EdgeInsets.all(4)
spacing.paddingS // EdgeInsets.all(8)
spacing.paddingM // EdgeInsets.all(12)
spacing.paddingL // EdgeInsets.all(16)
spacing.paddingXL // EdgeInsets.all(20)
spacing.paddingXXL // EdgeInsets.all(24)
// Horizontal/vertical padding
spacing.horizontalS // EdgeInsets.symmetric(horizontal: 8)
spacing.verticalM // EdgeInsets.symmetric(vertical: 12)
// Gap helpers
spacing.gapHS // SizedBox(width: 8)
spacing.gapVM // SizedBox(height: 12)
ChromiaRadius
Border radius utilities:// Raw values
radius.none // 0
radius.xs // 2
radius.s // 4
radius.m // 8
radius.l // 12
radius.xl // 16
radius.xxl // 24
radius.full // 9999 (pill shape)
// Predefined BorderRadius
radius.radiusS // BorderRadius.circular(4)
radius.radiusM // BorderRadius.circular(8)
radius.radiusL // BorderRadius.circular(12)
// Directional radius
radius.topM // Top corners only
radius.bottomL // Bottom corners only
// Predefined shapes
radius.shapeM // RoundedRectangleBorder with radius 8
radius.shapeFull // RoundedRectangleBorder with pill shape
ChromiaShadows
Shadow definitions for depth:shadows.none // No shadow
shadows.xs // Subtle shadow (2px blur, 1px offset)
shadows.s // Small shadow (4px blur, 2px offset)
shadows.m // Medium shadow (8px blur, 4px offset)
shadows.l // Large shadow (16px blur, 8px offset)
shadows.xl // Extra large shadow (24px blur, 12px offset)
shadows.xxl // Maximum shadow (32px blur, 16px offset)
ChromiaElevation
Material Design elevation levels:ChromiaElevation.level0 // 0dp
ChromiaElevation.level1 // 1dp
ChromiaElevation.level2 // 2dp
ChromiaElevation.level3 // 3dp
ChromiaElevation.level4 // 4dp
ChromiaElevation.level5 // 6dp
ChromiaElevation.level6 // 8dp
ChromiaElevation.level7 // 12dp
ChromiaElevation.level8 // 16dp
ChromiaElevation.level9 // 24dp
// Get elevation for a level
final elevation = ChromiaElevation.forLevel(5); // Returns 6.0
Usage Examples
- Colors
- Typography
- Spacing
- Radius & Shadows
Container(
color: context.chromiaColors.surface,
decoration: BoxDecoration(
border: Border.all(
color: context.chromiaColors.border,
),
),
child: Text(
'Hello',
style: TextStyle(
color: context.chromiaColors.textPrimary,
),
),
)
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Heading',
style: context.chromiaTypography.headlineMedium,
),
Text(
'Body text',
style: context.chromiaTypography.bodyLarge,
),
Text(
'Caption',
style: context.chromiaTypography.caption,
),
],
)
final spacing = context.chromiaSpacing;
Column(
children: [
Container(
padding: spacing.paddingL,
child: Text('Padded content'),
),
spacing.gapVM,
Container(
margin: spacing.horizontalL,
child: Text('With margin'),
),
],
)
final radius = context.chromiaRadius;
final shadows = context.chromiaShadows;
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: radius.radiusM,
boxShadow: shadows.m,
),
child: Text('Card with shadow'),
)
Next Steps
Theming Overview
Learn about the theming system
Custom Themes
Create custom themes using tokens