feat: minor theme updates (#239)

Author: andrzejchm

packages/cosmos_ui_components/lib/components/cosmos_elevated_button.dart

@@ -13,6 +13,10 @@ class CosmosElevatedButton extends StatelessWidget {
     this.prefixIcon,
     this.height = GlobalConstants.defaultButtonHeight,
     this.contentPadding,
+    this.elevation,
+    this.backgroundColor,
+    this.textColor,
+    this.shadowColor,
   }) : super(key: key);
 
   final VoidCallback? onTap;
@@ -21,29 +25,37 @@ class CosmosElevatedButton extends StatelessWidget {
   final Widget? prefixIcon;
   final double height;
   final double? contentPadding;
+  final double? elevation;
+  final Color? backgroundColor;
+  final Color? textColor;
+  final Color? shadowColor;
 
   @override
   Widget build(BuildContext context) {
+    final theme = CosmosTheme.of(context);
     return ElevatedButton(
       onPressed: onTap,
       style: ElevatedButton.styleFrom(
+        primary: backgroundColor,
+        onPrimary: textColor,
         fixedSize: Size.fromHeight(height),
-        shape: RoundedRectangleBorder(borderRadius: CosmosTheme.of(context).borderRadiusM),
-        elevation: 0,
+        shape: RoundedRectangleBorder(borderRadius: theme.borderRadiusM),
+        elevation: elevation ?? 0,
+        shadowColor: shadowColor ?? theme.colors.shadowColor,
       ),
       child: Row(
         mainAxisSize: MainAxisSize.min,
         children: [
           if (prefixIcon != null) ...[
             prefixIcon!,
-            SizedBox(width: contentPadding ?? CosmosTheme.of(context).spacingS),
+            SizedBox(width: contentPadding ?? theme.spacingS),
           ],
           Text(
             text,
             style: CosmosTextTheme.elevatedButton,
           ),
           if (suffixIcon != null) ...[
-            SizedBox(width: contentPadding ?? CosmosTheme.of(context).spacingS),
+            SizedBox(width: contentPadding ?? theme.spacingS),
             suffixIcon!,
           ],
         ],
@@ -58,6 +70,10 @@ class CosmosElevatedButton extends StatelessWidget {
       ..add(DoubleProperty('contentPadding', contentPadding))
       ..add(DoubleProperty('height', height))
       ..add(StringProperty('text', text))
-      ..add(ObjectFlagProperty<VoidCallback?>.has('onTap', onTap));
+      ..add(ObjectFlagProperty<VoidCallback?>.has('onTap', onTap))
+      ..add(DoubleProperty('elevation', elevation))
+      ..add(ColorProperty('textColor', textColor))
+      ..add(ColorProperty('backgroundColor', backgroundColor))
+      ..add(ColorProperty('shadowColor', shadowColor));
   }
 }

packages/cosmos_ui_components/lib/components/cosmos_text_field.dart

@@ -14,6 +14,8 @@ class CosmosTextField extends StatefulWidget {
     this.hint,
     this.keyboardType,
     this.controller,
+    this.textAlign = TextAlign.start,
+    this.style,
     Key? key,
   }) : super(key: key);
 
@@ -26,6 +28,8 @@ class CosmosTextField extends StatefulWidget {
   final Widget? suffix;
   final TextInputType? keyboardType;
   final TextEditingController? controller;
+  final TextAlign textAlign;
+  final TextStyle? style;
 
   @override
   State<CosmosTextField> createState() => _CosmosTextFieldState();
@@ -41,26 +45,28 @@ class CosmosTextField extends StatefulWidget {
       ..add(IntProperty('minLines', minLines))
       ..add(ObjectFlagProperty<Function(String p1)>.has('onChanged', onChanged))
       ..add(DiagnosticsProperty<TextEditingController?>('controller', controller))
-      ..add(StringProperty('hint', hint));
+      ..add(StringProperty('hint', hint))
+      ..add(EnumProperty<TextAlign>('textAlign', textAlign))
+      ..add(DiagnosticsProperty<TextStyle?>('style', style));
   }
 }
 
 class _CosmosTextFieldState extends State<CosmosTextField> {
-  late TextEditingController controller;
-  bool isTextEmpty = false;
+  late TextEditingController _controller;
+  bool _isTextEmpty = false;
 
   @override
   void initState() {
     super.initState();
-    controller = widget.controller ?? TextEditingController();
-    controller.text = widget.initialText;
+    _controller = widget.controller ?? TextEditingController();
+    _controller.text = widget.initialText;
   }
 
   @override
   void dispose() {
     if (widget.controller == null) {
       // it's a controller created internally by the CosmosTextField, thus we'll take care of disposing it properly here
-      controller.dispose();
+      _controller.dispose();
     }
     super.dispose();
   }
@@ -69,18 +75,20 @@ class _CosmosTextFieldState extends State<CosmosTextField> {
   Widget build(BuildContext context) {
     final theme = CosmosTheme.of(context);
     return TextField(
-      controller: controller,
+      controller: _controller,
       maxLines: widget.maxLines,
       maxLength: widget.maxLength,
       minLines: widget.minLines,
       keyboardType: widget.keyboardType,
       onChanged: (value) {
         widget.onChanged(value);
-        if (value.isEmpty == isTextEmpty) {
+        if (value.isEmpty == _isTextEmpty) {
           setState(() {});
-          isTextEmpty = !isTextEmpty;
+          _isTextEmpty = !_isTextEmpty;
         }
       },
+      textAlign: widget.textAlign,
+      style: widget.style,
       decoration: InputDecoration(
         counterText: widget.maxLength == null ? null : '',
         border: UnderlineInputBorder(borderSide: BorderSide(color: theme.colors.inputBorder)),
@@ -90,15 +98,15 @@ class _CosmosTextFieldState extends State<CosmosTextField> {
         ),
         suffix: widget.suffix == null
             ? _buildClearButton()
-            : (controller.text.isEmpty ? widget.suffix : _buildClearButton()),
+            : (_controller.text.isEmpty ? widget.suffix : _buildClearButton()),
       ),
     );
   }
 
   InkWell _buildClearButton() {
     return InkWell(
       onTap: () {
-        controller.clear();
+        _controller.clear();
         setState(() {});
       },
       child: SizedBox(
@@ -108,12 +116,4 @@ class _CosmosTextFieldState extends State<CosmosTextField> {
       ),
     );
   }
-
-  @override
-  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
-    super.debugFillProperties(properties);
-    properties
-      ..add(DiagnosticsProperty<TextEditingController>('controller', controller))
-      ..add(DiagnosticsProperty<bool>('isTextEmpty', isTextEmpty));
-  }
 }

packages/cosmos_ui_components/lib/cosmos_theme.dart

@@ -28,6 +28,7 @@ class CosmosTheme extends InheritedWidget {
 
   @override
   bool updateShouldNotify(CosmosTheme oldWidget) => oldWidget.themeData != themeData;
+
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
@@ -60,6 +61,8 @@ class CosmosThemeData extends Equatable {
     this.borderRadiusM = defaultBorderRadiusM,
     this.borderRadiusS = defaultBorderRadiusS,
     this.elevationS = defaultElevationS,
+    this.elevationM = defaultElevationM,
+    this.elevationL = defaultElevationL,
     this.colors = const CosmosColorsData(),
   });
 
@@ -88,6 +91,8 @@ class CosmosThemeData extends Equatable {
   static const defaultFontSizeXL = 28.0;
   static const defaultFontSizeXXL = 40.0;
   static const defaultElevationS = 4.0;
+  static const defaultElevationM = 8.0;
+  static const defaultElevationL = 12.0;
 
   static const defaultBorderRadiusL = BorderRadius.all(Radius.circular(defaultRadiusL));
   static const defaultBorderRadiusM = BorderRadius.all(Radius.circular(defaultRadiusM));
@@ -113,6 +118,8 @@ class CosmosThemeData extends Equatable {
   final double fontSizeXL;
   final double fontSizeXXL;
   final double elevationS;
+  final double elevationM;
+  final double elevationL;
   final BorderRadius borderRadiusM;
   final BorderRadius borderRadiusL;
   final BorderRadius borderRadiusS;
@@ -122,6 +129,7 @@ class CosmosThemeData extends Equatable {
   List<Object?> get props => [
         spacingXXXL,
         spacingXXL,
+        spacingXL,
         spacingL,
         spacingM,
         spacingS,
@@ -130,15 +138,21 @@ class CosmosThemeData extends Equatable {
         mediumDuration,
         shortDuration,
         radiusXL,
+        radiusL,
         radiusM,
         radiusS,
         fontSizeS,
         fontSizeM,
         fontSizeL,
         fontSizeXL,
         fontSizeXXL,
+        borderRadiusL,
         borderRadiusM,
         borderRadiusS,
+        elevationS,
+        elevationM,
+        elevationL,
+        colors,
       ];
 }
 
@@ -157,6 +171,7 @@ class CosmosColorsData extends Equatable {
     this.inputBorder = lightBorder,
     this.avatarBg = silver,
     this.error = defaultError,
+    this.shadowColor = defaultShadowColor,
   });
 
   static const lightBg = Color(0xFFFFFFFF);
@@ -179,6 +194,7 @@ class CosmosColorsData extends Equatable {
   static const darkDivider = Color(0x17FFFFFF);
   static const iosError = Color(0xFFE74444);
   static const defaultError = Color(0xFFFF3D56);
+  static const defaultShadowColor = Colors.black38;
 
   final Color inactive;
   final Color divider;
@@ -193,6 +209,7 @@ class CosmosColorsData extends Equatable {
   final Color inputBorder;
   final Color avatarBg;
   final Color error;
+  final Color shadowColor;
 
   @override
   List<Object?> get props => [
@@ -209,5 +226,6 @@ class CosmosColorsData extends Equatable {
         inputBorder,
         avatarBg,
         error,
+        shadowColor,
       ];
 }