NebuxColors - Nebux Design System

Overview

The NebuxColors class defines the complete color palette for the NebuX Design System. It provides semantic color definitions for all UI elements including branding, text, actions, states, and surfaces. Built with Freezed for immutability and JSON serialization support, it enables theme customization via configuration files. Source: lib/src/core/theme/colors/nebux_colors.dart

Class Definition

@freezed
abstract class NebuxColors with _$NebuxColors

Properties

All color properties are annotated with @ColorConverter() for JSON serialization support.

Brand Colors

primary

Color

required

Primary brand color - used for main actions and brandingLight default: Color(0xFF2196F3) (Material Blue 500)Dark default: Color(0xFFD0BCFF) (Material Purple 200)

secondary

Color

required

Secondary color - used for secondary actionsLight default: Color(0xFF03A9F4) (Light Blue 500)Dark default: Color(0xFFCCC2DC) (Material Purple 100)

secondaryVariant

Color

required

Secondary variant color - darker shade of secondaryLight default: Color(0xFF0288D1) (Light Blue 700)Dark default: Color(0xFF9A82DB) (Darker Purple)

Surface Colors

background

Color

required

Background color for the app scaffoldLight default: Color(0xFFFFFBFE) (Material Surface Light)Dark default: Color(0xFF1C1B1F) (Material Surface Dark)

surface

Color

required

Surface color - for cards and elevated surfacesLight default: Color(0xFFFFFBFE)Dark default: Color(0xFF1C1B1F)

cardColor

Color

required

Card color - specific color for card componentsLight default: Color(0xFFF7F2FA) (Light Purple Tint)Dark default: Color(0xFF2B2930) (Dark Purple Tint)

Text Colors

textPrimary

Color

required

Primary text color - for headings and important textLight default: Color(0xFF1C1B1F) (Near Black)Dark default: Color(0xFFE6E1E5) (Near White)

textSecondary

Color

required

Secondary text color - for supporting text and descriptionsLight default: Color(0xFF49454F) (Gray)Dark default: Color(0xFFCAC4D0) (Light Gray)

Action Colors

actionPrimary

Color

required

Action primary color - for primary buttons and interactive elementsLight default: Color(0xFF2196F3) (Blue)Dark default: Color(0xFFD0BCFF) (Purple)

actionSecondary

Color

required

Action secondary color - for secondary buttonsLight default: Color(0xFF03A9F4) (Light Blue)Dark default: Color(0xFFCCC2DC) (Light Purple)

UI Element Colors

divider

Color

required

Divider color - for separators and bordersLight default: Color(0xFFCAC4D0) (Gray)Dark default: Color(0xFF49454F) (Dark Gray)

overlay

Color

required

Overlay color - for scrim and modal backdropLight default: Color(0x52000000) (32% black)Dark default: Color(0x78000000) (47% black)

focus

Color

required

Focus color - for focus rings and accessibility indicatorsLight default: Color(0xFF2196F3) (Blue)Dark default: Color(0xFFD0BCFF) (Purple)

State Colors

success

Color

required

Success color - for positive actions and successful statesLight default: Color(0xFF4CAF50) (Green 500)Dark default: Color(0xFF81C784) (Green 300)

warning

Color

required

Warning color - for caution states and alertsLight default: Color(0xFFFFC107) (Amber 500)Dark default: Color(0xFFFFD54F) (Amber 300)

error

Color

required

Error color - for error states and destructive actionsLight default: Color(0xFFB3261E) (Material Error Light)Dark default: Color(0xFFF2B8B5) (Material Error Dark)

info

Color

required

Info color - for informational states and messagesLight default: Color(0xFF2196F3) (Blue)Dark default: Color(0xFF90CAF9) (Light Blue 200)

disabled

Color

required

Disabled color - for disabled states and inactive elementsLight default: Color(0xFF1C1B1F) (Dark)Dark default: Color(0xFFE6E1E5) (Light)

Base Colors

white

Color

required

White color - for light elements and text on dark backgroundsDefault: Color(0xFFFFFFFF)

black

Color

required

Black color - for dark elements and shadowsDefault: Color(0xFF000000)

Gradients

primaryGradient

LinearGradient

required

Primary gradient - from primary to secondary colorLight default: Blue to Light Blue gradientDark default: Purple gradient

secondaryGradient

LinearGradient

required

Secondary gradient - from secondary to accent colorLight default: Light Blue to Cyan gradientDark default: Purple gradient

Constructors

NebuxColors (default)

Creates a new NebuxColors instance with all color properties.

const factory NebuxColors({
  @ColorConverter() required Color primary,
  @ColorConverter() required Color secondary,
  @ColorConverter() required Color secondaryVariant,
  @ColorConverter() required Color background,
  @ColorConverter() required Color surface,
  @ColorConverter() required Color textPrimary,
  @ColorConverter() required Color textSecondary,
  @ColorConverter() required Color actionPrimary,
  @ColorConverter() required Color actionSecondary,
  @ColorConverter() required Color cardColor,
  @ColorConverter() required Color divider,
  @ColorConverter() required Color overlay,
  @ColorConverter() required Color focus,
  @ColorConverter() required Color success,
  @ColorConverter() required Color warning,
  @ColorConverter() required Color error,
  @ColorConverter() required Color info,
  @ColorConverter() required Color disabled,
  @ColorConverter() required Color white,
  @ColorConverter() required Color black,
  @LinearGradientConverter() required LinearGradient primaryGradient,
  @LinearGradientConverter() required LinearGradient secondaryGradient,
})

Factory Constructors

fromJson

Creates a NebuxColors instance from JSON data. Supports hex color strings.

factory NebuxColors.fromJson(Map<String, dynamic> json)

json

Map<String, dynamic>

required

JSON object containing color definitions. Colors can be specified as hex strings (e.g., “#2196F3”) or color values.

Example

final colorsJson = {
  'primary': '#2196F3',
  'secondary': '#03A9F4',
  'background': '#FFFBFE',
  'textPrimary': '#1C1B1F',
  // ... other properties
};

final colors = NebuxColors.fromJson(colorsJson);

standardLight

Creates a standard light color palette inspired by Material Design 3.

static NebuxColors standardLight()

Example

final lightColors = NebuxColors.standardLight();

standardDark

Creates a standard dark color palette inspired by Material Design 3.

static NebuxColors standardDark()

Example

final darkColors = NebuxColors.standardDark();

Instance Methods

forBrightness

Returns the appropriate standard color palette based on brightness.

NebuxColors forBrightness(Brightness brightness)

brightness

Brightness

required

The brightness mode (Brightness.light or Brightness.dark)

Example

final colors = NebuxColors.standardLight();
final darkColors = colors.forBrightness(Brightness.dark);
// Returns NebuxColors.standardDark()

copyWith

Creates a copy with optional property overrides. Generated by Freezed.

NebuxColors copyWith({
  Color? primary,
  Color? secondary,
  // ... all other properties
})

Example

final original = NebuxColors.standardLight();
final modified = original.copyWith(
  primary: Color(0xFFFF5722),
  secondary: Color(0xFFFF9800),
);

NebuxColorThemes

A collection class that holds both light and dark color themes.

@freezed
abstract class NebuxColorThemes with _$NebuxColorThemes

Properties

light

NebuxColors

required

Light theme colors

dark

NebuxColors

required

Dark theme colors

Factory Constructors

NebuxColorThemes.standard

Creates standard color themes with Material 3 inspired palettes.

factory NebuxColorThemes.standard()

NebuxColorThemes.fromJson

Creates color themes from JSON data.

factory NebuxColorThemes.fromJson(Map<String, dynamic> json)

Methods

getColorsByBrightness

Returns the appropriate color palette based on brightness.

NebuxColors getColorsByBrightness(Brightness brightness)

brightness

Brightness

required

The brightness mode

Example

final colorThemes = NebuxColorThemes.standard();
final currentColors = colorThemes.getColorsByBrightness(
  MediaQuery.of(context).platformBrightness,
);

NebuxColorsLerp Extension

Extension providing color interpolation support for smooth theme transitions.

lerp

Interpolates between two color schemes.

static NebuxColors? lerp(NebuxColors? c, NebuxColors? o, double t)

NebuxColors

Starting color scheme (can be null)

NebuxColors

Target color scheme (can be null)

double

required

Interpolation value from 0.0 to 1.0

Example

final lightColors = NebuxColors.standardLight();
final darkColors = NebuxColors.standardDark();

// 30% transition from light to dark
final blendedColors = NebuxColorsLerp.lerp(lightColors, darkColors, 0.3);

Usage Examples

Basic Color Usage

class ColorExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final colors = NebuxColors.standardLight();
    
    return Container(
      color: colors.background,
      child: Column(
        children: [
          Container(
            color: colors.surface,
            padding: EdgeInsets.all(16),
            child: Text(
              'Primary Text',
              style: TextStyle(color: colors.textPrimary),
            ),
          ),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              backgroundColor: colors.actionPrimary,
              foregroundColor: colors.white,
            ),
            onPressed: () {},
            child: Text('Action'),
          ),
        ],
      ),
    );
  }
}

Using Gradients

class GradientExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final colors = NebuxColors.standardLight();
    
    return Container(
      decoration: BoxDecoration(
        gradient: colors.primaryGradient,
        borderRadius: BorderRadius.circular(16),
      ),
      padding: EdgeInsets.all(24),
      child: Text(
        'Gradient Background',
        style: TextStyle(color: colors.white),
      ),
    );
  }
}

State Colors

class StateIndicator extends StatelessWidget {
  final String status;
  
  const StateIndicator({required this.status});

  @override
  Widget build(BuildContext context) {
    final colors = NebuxColors.standardLight();
    
    Color getStatusColor() {
      switch (status) {
        case 'success':
          return colors.success;
        case 'warning':
          return colors.warning;
        case 'error':
          return colors.error;
        case 'info':
          return colors.info;
        default:
          return colors.disabled;
      }
    }
    
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
      decoration: BoxDecoration(
        color: getStatusColor().withOpacity(0.1),
        borderRadius: BorderRadius.circular(8),
        border: Border.all(color: getStatusColor()),
      ),
      child: Text(
        status.toUpperCase(),
        style: TextStyle(color: getStatusColor(), fontWeight: FontWeight.bold),
      ),
    );
  }
}

Loading from JSON

future<void> loadCustomColors() async {
  final jsonString = await rootBundle.loadString('assets/colors.json');
  final jsonData = json.decode(jsonString) as Map<String, dynamic>;
  
  final customColors = NebuxColors.fromJson(jsonData);
  
  // Use custom colors
  print('Primary: ${customColors.primary}');
}

JSON format example:

{
  "primary": "#2196F3",
  "secondary": "#03A9F4",
  "background": "#FFFBFE",
  "surface": "#FFFBFE",
  "textPrimary": "#1C1B1F",
  "textSecondary": "#49454F"
}

Theme

Components

Configuration

Utilities

Documentation Index

​Overview

​Class Definition

​Properties

​Brand Colors

​Surface Colors

​Text Colors

​Action Colors

​UI Element Colors

​State Colors

​Base Colors

​Gradients

​Constructors

​NebuxColors (default)

​Factory Constructors

​fromJson

​Example

​standardLight

​Example

​standardDark

​Example

​Instance Methods

​forBrightness

​Example

​copyWith

​Example

​NebuxColorThemes

​Properties

​Factory Constructors

​NebuxColorThemes.standard

​NebuxColorThemes.fromJson

​Methods

​getColorsByBrightness

​Example

​NebuxColorsLerp Extension

​lerp

​Example

​Usage Examples

​Basic Color Usage

​Using Gradients

​State Colors

​Loading from JSON

​See Also

Overview

Class Definition

Properties

Brand Colors

Surface Colors

Text Colors

Action Colors

UI Element Colors

State Colors

Base Colors

Gradients

Constructors

NebuxColors (default)

Factory Constructors

fromJson

Example

standardLight

Example

standardDark

Example

Instance Methods

forBrightness

Example

copyWith

Example

NebuxColorThemes

Properties

Factory Constructors

NebuxColorThemes.standard

NebuxColorThemes.fromJson

Methods

getColorsByBrightness

Example

NebuxColorsLerp Extension

lerp

Example

Usage Examples

Basic Color Usage

Using Gradients

State Colors

Loading from JSON

See Also