omi/app/lib/utils/ui_guidelines.dart at web/mobile-refresh · ghzhost/omi · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
import 'package:flutter/material.dart';

/// UI Guidelines to ensure consistent styling throughout the app
/// Use this class for reference when creating new UI components
class AppStyles {
  // Text Styles
  static const TextStyle title = TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: Colors.white);

  static const TextStyle subtitle = TextStyle(fontSize: 16, fontWeight: FontWeight.w500, color: Colors.white);

  static const TextStyle body = TextStyle(fontSize: 15, height: 1.4, color: Colors.white);

  static const TextStyle caption = TextStyle(fontSize: 14, color: Colors.white70);

  static const TextStyle small = TextStyle(fontSize: 12, color: Colors.white70);

  static const TextStyle label = TextStyle(fontSize: 12, fontWeight: FontWeight.w500, color: Colors.white70);

  // Colors
  static const Color backgroundPrimary = Colors.black;
  static const Color backgroundSecondary = Color(0xFF1F1F25);
  static const Color backgroundTertiary = Color(0xFF35343B);

  static const Color textPrimary = Colors.white;
  static final Color textSecondary = Colors.white.withValues(alpha: 0.8);
  static final Color textTertiary = Colors.white.withValues(alpha: 0.6);

  static const Color accent = Colors.blue;
  static final Color error = Colors.red.shade800;
  static final Color success = Colors.green.shade600;

  // Spacing
  static const double spacingXS = 4.0;
  static const double spacingS = 8.0;
  static const double spacingM = 12.0;
  static const double spacingL = 16.0;
  static const double spacingXL = 24.0;
  static const double spacingXXL = 32.0;

  // Radius
  static const double radiusSmall = 6.0;
  static const double radiusMedium = 8.0;
  static const double radiusLarge = 12.0;
  static const double radiusCircular = 100.0;

  // Widget specific
  static final cardDecoration = BoxDecoration(
    color: backgroundSecondary,
    borderRadius: BorderRadius.circular(radiusLarge),
    boxShadow: [BoxShadow(color: Colors.black.withValues(alpha: 0.1), blurRadius: 4, offset: const Offset(0, 2))],
  );

  static final inputDecoration = InputDecoration(
    filled: true,
    fillColor: backgroundTertiary,
    contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    border: OutlineInputBorder(borderRadius: BorderRadius.circular(radiusMedium), borderSide: BorderSide.none),
  );

  static final chipDecoration = BoxDecoration(
    color: backgroundTertiary.withValues(alpha: 0.6),
    borderRadius: BorderRadius.circular(radiusCircular),
  );
}

/// Theme extension to provide app styles as part of the theme
class AppTheme extends ThemeExtension<AppTheme> {
  final TextStyle title;
  final TextStyle subtitle;
  final TextStyle body;
  final TextStyle caption;
  final TextStyle small;
  final TextStyle label;

  AppTheme({
    required this.title,
    required this.subtitle,
    required this.body,
    required this.caption,
    required this.small,
    required this.label,
  });

  @override
  ThemeExtension<AppTheme> copyWith({
    TextStyle? title,
    TextStyle? subtitle,
    TextStyle? body,
    TextStyle? caption,
    TextStyle? small,
    TextStyle? label,
  }) {
    return AppTheme(
      title: title ?? this.title,
      subtitle: subtitle ?? this.subtitle,
      body: body ?? this.body,
      caption: caption ?? this.caption,
      small: small ?? this.small,
      label: label ?? this.label,
    );
  }

  @override
  ThemeExtension<AppTheme> lerp(ThemeExtension<AppTheme>? other, double t) {
    if (other is! AppTheme) {
      return this;
    }
    return AppTheme(
      title: TextStyle.lerp(title, other.title, t)!,
      subtitle: TextStyle.lerp(subtitle, other.subtitle, t)!,
      body: TextStyle.lerp(body, other.body, t)!,
      caption: TextStyle.lerp(caption, other.caption, t)!,
      small: TextStyle.lerp(small, other.small, t)!,
      label: TextStyle.lerp(label, other.label, t)!,
    );
  }

  /// Apply AppTheme to ThemeData
  static ThemeData applyToTheme(ThemeData theme) {
    return theme.copyWith(
      extensions: [
        AppTheme(
          title: AppStyles.title,
          subtitle: AppStyles.subtitle,
          body: AppStyles.body,
          caption: AppStyles.caption,
          small: AppStyles.small,
          label: AppStyles.label,
        ),
      ],
    );
  }
}