Improve new color changes (#138)

* Example: add selected border, improve apptheme * Example: Display Colors in ColorsView * ControlsView: reduce splashradius of dialogbtn
ubuntu · Mar 17, 2022 · 2e893bb · 2e893bb
1 parent d8a975e
commit 2e893bb
Show file tree

Hide file tree

Showing 22 changed files with 201 additions and 219 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -37,15 +37,4 @@ class DarkTheme extends ValueNotifier<ThemeData> {
 
 class AppTheme extends ValueNotifier<ThemeMode> {
   AppTheme(ThemeMode value) : super(value);
-
-  void apply(Brightness brightness) {
-    switch (brightness) {
-      case Brightness.dark:
-        value = ThemeMode.dark;
-        break;
-      case Brightness.light:
-        value = ThemeMode.light;
-        break;
-    }
-  }
 }
diff --git a/example/lib/view/color_disk.dart b/example/lib/view/color_disk.dart
@@ -1,11 +1,16 @@
 import 'package:flutter/material.dart';
 
 class ColorDisk extends StatelessWidget {
-  const ColorDisk({Key? key, required this.onPressed, required this.color})
+  const ColorDisk(
+      {Key? key,
+      required this.onPressed,
+      required this.color,
+      required this.selected})
       : super(key: key);
 
   final VoidCallback onPressed;
   final Color color;
+  final bool selected;
 
   @override
   Widget build(BuildContext context) {
@@ -14,7 +19,14 @@ class ColorDisk extends StatelessWidget {
       child: Padding(
         padding: const EdgeInsets.all(8.0),
         child: TextButton(
-          style: TextButton.styleFrom(padding: const EdgeInsets.all(0)),
+          style: TextButton.styleFrom(
+            padding: const EdgeInsets.all(0),
+            shape: CircleBorder(
+                side: BorderSide(
+                    color: selected
+                        ? Theme.of(context).primaryColor
+                        : Colors.transparent)),
+          ),
           onPressed: onPressed,
           child: SizedBox(
             height: 20,

diff --git a/example/lib/view/colors_view.dart b/example/lib/view/colors_view.dart
@@ -16,23 +16,39 @@ class ColorsView extends StatelessWidget {
             SizedBox(width: 25.0),
             Expanded(
                 child: colorPaletteExample(
-                    'lightAubergine', YaruColors.lightAubergine)),
+                    'oliveMaterialColor', oliveMaterialColor)),
             SizedBox(width: 25.0),
             Expanded(
                 child: colorPaletteExample(
-                    'midAubergine', YaruColors.midAubergine)),
+                    'barkMaterialColor', barkMaterialColor)),
           ],
         ),
         Divider(height: 50.0, color: Colors.black),
         Row(
           children: [
             Expanded(
                 child: colorPaletteExample(
-                    'canonicalAubergine', YaruColors.canonicalAubergine)),
+                    'viridianMaterialColor', viridianMaterialColor)),
             SizedBox(width: 25.0),
             Expanded(
                 child: colorPaletteExample(
-                    'darkAubergine', YaruColors.darkAubergine)),
+                    'purpleMaterialColor', purpleMaterialColor)),
+            SizedBox(width: 25.0),
+            Expanded(
+                child:
+                    colorPaletteExample('redMaterialColor', redMaterialColor)),
+          ],
+        ),
+        Divider(height: 50.0, color: Colors.black),
+        Row(
+          children: [
+            Expanded(
+                child: colorPaletteExample(
+                    'blueMaterialColor', blueMaterialColor)),
+            SizedBox(width: 25.0),
+            Expanded(
+                child: colorPaletteExample(
+                    'magentaMaterialColor', magentaMaterialColor)),
             SizedBox(width: 25.0),
             Expanded(
                 child: colorPaletteExample('warmGrey', YaruColors.warmGrey)),

diff --git a/example/lib/view/controls_view.dart b/example/lib/view/controls_view.dart
@@ -134,6 +134,7 @@ class _ControlsViewState extends State<ControlsView>
                     Row(
                       children: [
                         IconButton(
+                            splashRadius: 20,
                             onPressed: () => showDialog(
                                 context: context,
                                 builder: (context) => SimpleDialog(

diff --git a/example/lib/view/home_page.dart b/example/lib/view/home_page.dart
@@ -47,68 +47,79 @@ class _HomePageState extends State<HomePage> {
     final darkTheme = context.read<DarkTheme>();
     return Scaffold(
       appBar: AppBar(
-        actions: [
-          SizedBox(
-            width: 50,
-            child: Padding(
-              padding: const EdgeInsets.all(8.0),
-              child: TextButton(
-                  style: TextButton.styleFrom(padding: const EdgeInsets.all(0)),
-                  onPressed: () => themeMode.value == ThemeMode.light
-                      ? themeMode.value = ThemeMode.dark
-                      : themeMode.value = ThemeMode.light,
-                  child: Icon(themeMode.value == ThemeMode.light
-                      ? Icons.dark_mode
-                      : Icons.light_mode)),
-            ),
+        leading: SizedBox(
+          width: 50,
+          child: Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: TextButton(
+                style: TextButton.styleFrom(
+                    padding: const EdgeInsets.all(0),
+                    shape: const CircleBorder()),
+                onPressed: () => themeMode.value == ThemeMode.light
+                    ? themeMode.value = ThemeMode.dark
+                    : themeMode.value = ThemeMode.light,
+                child: Icon(themeMode.value == ThemeMode.light
+                    ? Icons.dark_mode
+                    : Icons.light_mode)),
           ),
+        ),
+        actions: [
           ColorDisk(
               color: YaruColors.ubuntuOrange,
+              selected:
+                  Theme.of(context).primaryColor == YaruColors.ubuntuOrange,
               onPressed: () {
                 lightTheme.value = yaruLight;
                 darkTheme.value = yaruDark;
               }),
           ColorDisk(
-              color: olive,
+              color: YaruColors.olive,
+              selected: Theme.of(context).primaryColor == oliveMaterialColor,
               onPressed: () {
-                lightTheme.value = oliveLight;
-                darkTheme.value = oliveDark;
+                lightTheme.value = yaruOliveLight;
+                darkTheme.value = yaruOliveDark;
               }),
           ColorDisk(
-              color: bark,
+              color: YaruColors.bark,
+              selected: Theme.of(context).primaryColor == barkMaterialColor,
               onPressed: () {
-                lightTheme.value = barkLight;
-                darkTheme.value = barkDark;
+                lightTheme.value = yaruBarkLight;
+                darkTheme.value = yaruBarkDark;
               }),
           ColorDisk(
-              color: viridian,
+              color: YaruColors.viridian,
+              selected: Theme.of(context).primaryColor == viridianMaterialColor,
               onPressed: () {
-                lightTheme.value = viridianLight;
-                darkTheme.value = viridianDark;
+                lightTheme.value = yaruViridianLight;
+                darkTheme.value = yaruViridianDark;
               }),
           ColorDisk(
-              color: purple,
+              color: YaruColors.purple,
+              selected: Theme.of(context).primaryColor == purpleMaterialColor,
               onPressed: () {
-                lightTheme.value = purpleLight;
-                darkTheme.value = purpleDark;
+                lightTheme.value = yaruPurpleLight;
+                darkTheme.value = yaruPurpleDark;
               }),
           ColorDisk(
-              color: red,
+              color: YaruColors.red,
+              selected: Theme.of(context).primaryColor == redMaterialColor,
               onPressed: () {
-                lightTheme.value = redLight;
-                darkTheme.value = redDark;
+                lightTheme.value = yaruRedLight;
+                darkTheme.value = yaruRedDark;
               }),
           ColorDisk(
-              color: blue,
+              color: YaruColors.blue,
+              selected: Theme.of(context).primaryColor == blueMaterialColor,
               onPressed: () {
-                lightTheme.value = blueLight;
-                darkTheme.value = blueDark;
+                lightTheme.value = yaruBlueLight;
+                darkTheme.value = yaruBlueDark;
               }),
           ColorDisk(
-              color: magenta,
+              color: YaruColors.magenta,
+              selected: Theme.of(context).primaryColor == magentaMaterialColor,
               onPressed: () {
-                lightTheme.value = magentaLight;
-                darkTheme.value = magentaDark;
+                lightTheme.value = yarMagentaLight;
+                darkTheme.value = yaruMagentaDark;
               }),
           SizedBox(
             width: 20,

diff --git a/lib/src/colors/yaru_colors.dart b/lib/src/colors/yaru_colors.dart
@@ -22,58 +22,6 @@ class YaruColors {
     900: Color(0xFF2F1106),
   });
 
-  static const int _lightAuberginePrimaryValue = 0xFF77216F;
-
-  ///![](https://raw.githubusercontent.com/ubuntu/yaru.dart/main/doc/api/src/utils/colors/lightAubergine.png)
-  static const MaterialColor lightAubergine =
-      MaterialColor(_lightAuberginePrimaryValue, {
-    50: Color(0xFFF1E8F0),
-    100: Color(0xFFE3D2E2),
-    200: Color(0xFFC8A6C5),
-    300: Color(0xFFAD79A8),
-    400: Color(0xFF924D8B),
-    500: Color(_lightAuberginePrimaryValue),
-  });
-
-  static const int _midAuberginePrimaryValue = 0xFF5E2750;
-
-  ///![](https://raw.githubusercontent.com/ubuntu/yaru.dart/main/doc/api/src/utils/colors/midAubergine.png)
-  static const MaterialColor midAubergine =
-      MaterialColor(_midAuberginePrimaryValue, {
-    50: Color(0xFFEEE9ED),
-    100: Color(0xFFDED3DC),
-    200: Color(0xFFBEA8B9),
-    300: Color(0xFF9E7D96),
-    400: Color(0xFF7E5273),
-    500: Color(_midAuberginePrimaryValue),
-  });
-
-  static const int _canonicalAuberginePrimaryValue = 0xFF772953;
-
-  ///![](https://raw.githubusercontent.com/ubuntu/yaru.dart/main/doc/api/src/utils/colors/canonicalAubergine.png)
-  static const MaterialColor canonicalAubergine =
-      MaterialColor(_canonicalAuberginePrimaryValue, {
-    50: Color(0xFFF1E9ED),
-    100: Color(0xFFE3D4DC),
-    200: Color(0xFFC8A9BA),
-    300: Color(0xFFAD7E97),
-    400: Color(0xFF925375),
-    500: Color(_canonicalAuberginePrimaryValue),
-  });
-
-  static const int _darkAuberginePrimaryValue = 0xFF2C001E;
-
-  ///![](https://raw.githubusercontent.com/ubuntu/yaru.dart/main/doc/api/src/utils/colors/darkAubergine.png)
-  static const MaterialColor darkAubergine =
-      MaterialColor(_darkAuberginePrimaryValue, {
-    50: Color(0xFFE9E5E8),
-    100: Color(0xFFD4CCD2),
-    200: Color(0xFFAA99A5),
-    300: Color(0xFF806678),
-    400: Color(0xFF56334B),
-    500: Color(_darkAuberginePrimaryValue),
-  });
-
   static const int _warmGreyPrimaryValue = 0xFFAEA79F;
 
   ///![](https://raw.githubusercontent.com/ubuntu/yaru.dart/main/doc/api/src/utils/colors/warmGrey.png)
@@ -88,14 +36,38 @@ class YaruColors {
 
   static const Color coolGrey = Color(0xFF333333);
   static const Color textGrey = Color(0xFF111111);
-  static const Color red = Color(0xFFff0000);
+  static const Color errorRed = Color(0xFFff0000);
   static const Color yellow = Color(0xFFf99b11);
   static const Color green = Color(0xFF0e8420);
-  static const Color blue = Color(0xFF19B6EE);
-  static const Color linkBlue = Color(0xFF007aa6);
-  static const Color darkBlue = Color(0xFF335280);
   static const Color disabledGreyDark = Color(0xFF535353);
   static const Color porcelain = Color(0xFFFAFAFA);
   static const Color inkstone = Color(0xFF3B3B3B);
   static const Color jet = Color(0xFF2B2B2B);
+  static const olive = Color(0xFF4B8501);
+  static const bark = Color(0xFF787859);
+  static const viridian = Color(0xFF03875B);
+  static const purple = Color(0xFF8856EB);
+  static const red = Color(0xFFE61D34);
+  static const blue = Color(0xFF0073E5);
+  static const magenta = Color(0xFFBC33DB);
+
+  static MaterialColor createMaterialColor(Color color) {
+    List strengths = <double>[.05];
+    Map<int, Color> swatch = {};
+    final int r = color.red, g = color.green, b = color.blue;
+
+    for (int i = 1; i < 10; i++) {
+      strengths.add(0.1 * i);
+    }
+    for (var strength in strengths) {
+      final double ds = 0.5 - strength;
+      swatch[(strength * 1000).round()] = Color.fromRGBO(
+        r + ((ds < 0 ? r : (255 - r)) * ds).round(),
+        g + ((ds < 0 ? g : (255 - g)) * ds).round(),
+        b + ((ds < 0 ? b : (255 - b)) * ds).round(),
+        1,
+      );
+    }
+    return MaterialColor(color.value, swatch);
+  }
 }
diff --git a/lib/src/themes/common_themes.dart b/lib/src/themes/common_themes.dart
@@ -282,23 +282,3 @@ ThemeData createYaruDarkTheme(
     toggleButtonsTheme: _toggleButtonsTheme,
   );
 }
-
-MaterialColor createMaterialColor(Color color) {
-  List strengths = <double>[.05];
-  Map<int, Color> swatch = {};
-  final int r = color.red, g = color.green, b = color.blue;
-
-  for (int i = 1; i < 10; i++) {
-    strengths.add(0.1 * i);
-  }
-  for (var strength in strengths) {
-    final double ds = 0.5 - strength;
-    swatch[(strength * 1000).round()] = Color.fromRGBO(
-      r + ((ds < 0 ? r : (255 - r)) * ds).round(),
-      g + ((ds < 0 ? g : (255 - g)) * ds).round(),
-      b + ((ds < 0 ? b : (255 - b)) * ds).round(),
-      1,
-    );
-  }
-  return MaterialColor(color.value, swatch);
-}