Support MaterialAccentColor (#40)

* Use color library

* Buckner logic accent swatch

* Accent color generator

* Update README

* Refactor

Author: lcdsmao

.gitignore

@@ -110,3 +110,5 @@ node_modules/
 coverage/
 test/.test_coverage.dart
 
+## Test resources
+test_resources/lib

README.md

@@ -499,12 +499,19 @@ flutter_gen:
       - assets/color/colors2.xml
 ```
 
-[FlutterGen] generates [MaterialColor](https://api.flutter.dev/flutter/material/MaterialColor-class.html) class 
-if the element has the attribute `type="material"`, otherwise a normal [Color](https://api.flutter.dev/flutter/material/Colors-class.html) class will be generated.
+[FlutterGen] can generate a [Color](https://api.flutter.dev/flutter/material/Colors-class.html) class based on the `name` attribute and the color hex value.
+If the element has the attribute `type`, then a specially color will be generated.
+
+Currently supported special color types:
+  - [MaterialColor](https://api.flutter.dev/flutter/material/MaterialColor-class.html)
+  - [MaterialAccentColor](https://api.flutter.dev/flutter/material/MaterialAccentColor-class.html)
+  
+> Noticed that there is no official material color generation algorithm. The implementation is based on the [mcg](https://github.com/mbitson/mcg) project.
 
 ```xml
 <color name="milk_tea">#F5CB84</color>
 <color name="cinnamon" type="material">#955E1C</color>
+<color name="yellow_ocher" type="material material-accent">#DF9527</color>
 ```
 
 These configurations will generate **`colors.gen.dart`** under the **`lib/gen/`** directory by default.
@@ -572,6 +579,15 @@ class ColorName {
       900: Color(0xFFCA670E),
     },
   );
+  static const MaterialAccentColor yellowOcherAccent = MaterialAccentColor(
+    0xFFFFBCA3,
+    <int, Color>{
+      100: Color(0xFFFFE8E0),
+      200: Color(0xFFFFBCA3),
+      400: Color(0xFFFFA989),
+      700: Color(0xFFFF9E7A),
+    },
+  );
 }
 
 ```
@@ -593,6 +609,10 @@ If you wish to contribute a change to any of the existing plugins in this repo,
 please review our [contribution guide](https://github.com/FlutterGen/flutter_gen/blob/master/CONTRIBUTING.md)
 and open a [pull request](https://github.com/FlutterGen/flutter_gen/pulls).
 
+## Credits
+
+The material color generation implementation is based on [mcg](https://github.com/mbitson/mcg) and [TinyColor](https://github.com/bgrins/TinyColor).
+
 ### Milestone
 
 - [ ] Documentation (English proofreading)

example/assets/color/colors.xml

@@ -5,5 +5,5 @@
     <color name="gray_70">#EEEEEE</color>
     <color name="gray_410">#979797</color>
     <color name="crimson_red" type="material">#CF2A2A</color>
-    <color name="yellow_ocher" type="material">#DF9527</color>
+    <color name="yellow_ocher" type="material material-accent">#DF9527</color>
 </resources>

example/lib/gen/colors.gen.dart

@@ -47,4 +47,13 @@ class ColorName {
       900: Color(0xFFCA670E),
     },
   );
+  static const MaterialAccentColor yellowOcherAccent = MaterialAccentColor(
+    0xFFFFBCA3,
+    <int, Color>{
+      100: Color(0xFFFFE8E0),
+      200: Color(0xFFFFBCA3),
+      400: Color(0xFFFFA989),
+      700: Color(0xFFFF9E7A),
+    },
+  );
 }

lib/src/generators/colors_generator.dart

@@ -48,46 +48,67 @@ String generateColors(
       .distinctBy((color) => color.name)
       .sortedBy((color) => color.name)
       .map(_colorStatement)
-      .forEach(buffer.writeln);
+      .forEach(buffer.write);
 
   buffer.writeln('}');
   return formatter.format(buffer.toString());
 }
 
 String _colorStatement(_Color color) {
-  final hex = colorFromHex(color.hex);
-  if (color.type == 'material') {
-    final swatch = swatchFromPrimaryHex(hex);
-    return '''
+  final buffer = StringBuffer();
+  if (color.isMaterial) {
+    final swatch = swatchFromPrimaryHex(color.hex);
+    final statement = '''
   static const MaterialColor ${color.name.camelCase()} = MaterialColor(
     ${swatch[500]},
     <int, Color>{
       ${swatch.entries.map((e) => '${e.key}: Color(${e.value}),').join('\n')}
     },
   );''';
-  } else if (color.type == null) {
-    return '  static const Color ${color.name.camelCase()} = Color($hex);';
+    buffer.writeln(statement);
+  }
+  if (color.isMaterialAccent) {
+    final accentSwatch = accentSwatchFromPrimaryHex(color.hex);
+    final statement = '''
+  static const MaterialAccentColor ${color.name.camelCase()}Accent = MaterialAccentColor(
+   ${accentSwatch[200]},
+   <int, Color>{
+     ${accentSwatch.entries.map((e) => '${e.key}: Color(${e.value}),').join('\n')}
+    },
+  );''';
+    buffer.writeln(statement);
   }
-  throw 'Not supported color type ${color.type}.';
+  if (color.isNormal) {
+    final statement =
+        '''static const Color ${color.name.camelCase()} = Color(${colorFromHex(color.hex)});''';
+    buffer.writeln(statement);
+  }
+  return buffer.toString();
 }
 
 class _Color {
   const _Color(
     this.name,
-    this.type,
     this.hex,
+    this._types,
   );
 
   _Color.fromXmlElement(XmlElement element)
       : this(
           element.getAttribute('name'),
-          element.getAttribute('type'),
           element.text,
+          element.getAttribute('type')?.split(' ') ?? List.empty(),
         );
 
   final String name;
 
   final String hex;
 
-  final String type;
+  final List<String> _types;
+
+  bool get isNormal => _types.isEmpty;
+
+  bool get isMaterial => _types.contains('material');
+
+  bool get isMaterialAccent => _types.contains('material-accent');
 }

lib/src/utils/color.dart

@@ -1,3 +1,5 @@
+import 'package:color/color.dart';
+
 String colorFromHex(String hexColor) {
   hexColor = hexColor.toUpperCase().replaceFirst('#', '');
   if (hexColor.length == 6) {
@@ -7,68 +9,101 @@ String colorFromHex(String hexColor) {
 }
 
 /// [Material Design Color Generator](https://github.com/mbitson/mcg)
-/// Constantin logic: https://github.com/mbitson/mcg/blob/858cffea0d79ac143d590d110fbe20a1ea54d59d/scripts/controllers/ColorGeneratorCtrl.js#L238
+/// Constantin/Buckner logic: https://github.com/mbitson/mcg/blob/858cffea0d79ac143d590d110fbe20a1ea54d59d/scripts/controllers/ColorGeneratorCtrl.js#L238
 Map<int, String> swatchFromPrimaryHex(String primaryHex) {
-  final primary = _Rgb.fromHex(int.parse(primaryHex));
-  const baseLight = _Rgb.fromHex(0xffffff);
+  final primary = Color.hex(primaryHex);
+  final baseLight = Color.hex("ffffff");
   final baseDark = primary * primary;
   return {
-    50: _Rgb.mix(baseLight, primary, 12).toHexString(),
-    100: _Rgb.mix(baseLight, primary, 30).toHexString(),
-    200: _Rgb.mix(baseLight, primary, 50).toHexString(),
-    300: _Rgb.mix(baseLight, primary, 70).toHexString(),
-    400: _Rgb.mix(baseLight, primary, 85).toHexString(),
-    500: _Rgb.mix(baseLight, primary, 100).toHexString(),
-    600: _Rgb.mix(baseDark, primary, 87).toHexString(),
-    700: _Rgb.mix(baseDark, primary, 70).toHexString(),
-    800: _Rgb.mix(baseDark, primary, 54).toHexString(),
-    900: _Rgb.mix(baseDark, primary, 25).toHexString(),
+    50: _mix(baseLight, primary, 12).toHexString(),
+    100: _mix(baseLight, primary, 30).toHexString(),
+    200: _mix(baseLight, primary, 50).toHexString(),
+    300: _mix(baseLight, primary, 70).toHexString(),
+    400: _mix(baseLight, primary, 85).toHexString(),
+    500: _mix(baseLight, primary, 100).toHexString(),
+    600: _mix(baseDark, primary, 87).toHexString(),
+    700: _mix(baseDark, primary, 70).toHexString(),
+    800: _mix(baseDark, primary, 54).toHexString(),
+    900: _mix(baseDark, primary, 25).toHexString(),
   };
 }
 
-class _Rgb {
-  const _Rgb(int r, int g, int b)
-      : value = ((0xff << 24) |
-                ((r & 0xff) << 16) |
-                ((g & 0xff) << 8) |
-                ((b & 0xff) << 0)) &
-            0xFFFFFFFF;
-
-  const _Rgb.fromHex(int value) : value = (value | 0xFF000000) & 0xFFFFFFFF;
-
-  final int value;
-
-  int get r => (0x00ff0000 & value) >> 16;
-
-  int get g => (0x0000ff00 & value) >> 8;
+/// Buckner logic: https://github.com/mbitson/mcg/blob/858cffea0d79ac143d590d110fbe20a1ea54d59d/scripts/controllers/ColorGeneratorCtrl.js#L275
+Map<int, String> accentSwatchFromPrimaryHex(String primaryHex) {
+  final primary = Color.hex(primaryHex);
+  final baseDark = primary * primary;
+  final baseTriad = primary.tetrad();
+  return {
+    100:
+        _mix(baseDark, baseTriad[3], 15).saturate(80).lighten(48).toHexString(),
+    200:
+        _mix(baseDark, baseTriad[3], 15).saturate(80).lighten(36).toHexString(),
+    400: _mix(baseDark, baseTriad[3], 15)
+        .saturate(100)
+        .lighten(31)
+        .toHexString(),
+    700: _mix(baseDark, baseTriad[3], 15)
+        .saturate(100)
+        .lighten(28)
+        .toHexString(),
+  };
+}
 
-  int get b => (0x000000ff & value) >> 0;
+extension _ColorExt on Color {
+  String toHexString() {
+    return '0xFF${toHexColor().toString().toUpperCase()}';
+  }
 
   // https://github.com/mbitson/mcg/blob/858cffea0d79ac143d590d110fbe20a1ea54d59d/scripts/controllers/ColorGeneratorCtrl.js#L221
-  _Rgb operator *(_Rgb other) {
-    return _Rgb(
-      (r * other.r / 255).floor(),
-      (g * other.g / 255).floor(),
-      (b * other.b / 255).floor(),
+  Color operator *(Color other) {
+    return Color.rgb(
+      (toRgbColor().r * other.toRgbColor().r / 255).floor(),
+      (toRgbColor().g * other.toRgbColor().g / 255).floor(),
+      (toRgbColor().b * other.toRgbColor().b / 255).floor(),
     );
   }
 
-  String toHexString() {
-    return '0x${value.toRadixString(16).padLeft(8, '0').toUpperCase()}';
+  // https://github.com/bgrins/TinyColor/blob/ab58ca0a3738dc06b7e64c749cebfd5d6fb5044c/tinycolor.js#L647
+  List<Color> tetrad() {
+    final hsl = toHslColor();
+    return [
+      this,
+      Color.hsl((hsl.h + 90) % 360, hsl.s, hsl.l),
+      Color.hsl((hsl.h + 180) % 360, hsl.s, hsl.l),
+      Color.hsl((hsl.h + 270) % 360, hsl.s, hsl.l),
+    ];
   }
 
-  // https://github.com/bgrins/TinyColor/blob/96592a5cacdbf4d4d16cd7d39d4d6dd28da9bd5f/tinycolor.js#L701
-  static _Rgb mix(
-    _Rgb color1,
-    _Rgb color2,
-    int amount,
-  ) {
+  // https://github.com/bgrins/TinyColor/blob/ab58ca0a3738dc06b7e64c749cebfd5d6fb5044c/tinycolor.js#L580
+  Color saturate(int amount) {
     assert(amount >= 0 && amount <= 100);
-    final p = amount / 100;
-    return _Rgb(
-      ((color2.r - color1.r) * p + color1.r).round(),
-      ((color2.g - color1.g) * p + color1.g).round(),
-      ((color2.b - color1.b) * p + color1.b).round(),
-    );
+    final hsl = toHslColor();
+    final s = (hsl.s + amount).clamp(0, 100);
+    return Color.hsl(hsl.h, s, hsl.l);
   }
+
+  // https://github.com/bgrins/TinyColor/blob/ab58ca0a3738dc06b7e64c749cebfd5d6fb5044c/tinycolor.js#L592
+  Color lighten(int amount) {
+    assert(amount >= 0 && amount <= 100);
+    final hsl = toHslColor();
+    final l = (hsl.l + amount).clamp(0, 100);
+    return Color.hsl(hsl.h, hsl.s, l);
+  }
+}
+
+// https://github.com/bgrins/TinyColor/blob/96592a5cacdbf4d4d16cd7d39d4d6dd28da9bd5f/tinycolor.js#L701
+Color _mix(
+  Color color1,
+  Color color2,
+  int amount,
+) {
+  assert(amount >= 0 && amount <= 100);
+  final p = amount / 100;
+  final _color1 = color1.toRgbColor();
+  final _color2 = color2.toRgbColor();
+  return Color.rgb(
+    ((_color2.r - _color1.r) * p + _color1.r).round(),
+    ((_color2.g - _color1.g) * p + _color1.g).round(),
+    ((_color2.b - _color1.b) * p + _color1.b).round(),
+  );
 }

pubspec.lock

@@ -99,6 +99,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.14.13"
+  color:
+    dependency: "direct main"
+    description:
+      name: color
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.1"
   convert:
     dependency: transitive
     description:

pubspec.yaml

@@ -24,6 +24,7 @@ dependencies:
   xml: ^4.2.0
   dart_style: ^1.3.6
   dartx: ^0.5.0
+  color: ^2.1.1
 
 dev_dependencies:
   test:

test_resources/actual_data/colors.gen.dart

@@ -47,4 +47,13 @@ class ColorName {
       900: Color(0xFFCA670E),
     },
   );
+  static const MaterialAccentColor yellowOcherAccent = MaterialAccentColor(
+    0xFFFFBCA3,
+    <int, Color>{
+      100: Color(0xFFFFE8E0),
+      200: Color(0xFFFFBCA3),
+      400: Color(0xFFFFA989),
+      700: Color(0xFFFF9E7A),
+    },
+  );
 }

test_resources/assets/color/colors.xml

@@ -5,5 +5,5 @@
     <color name="gray_70">#EEEEEE</color>
     <color name="gray_410">#979797</color>
     <color name="crimson_red" type="material">#CF2A2A</color>
-    <color name="yellow_ocher" type="material">#DF9527</color>
+    <color name="yellow_ocher" type="material material-accent">#DF9527</color>
 </resources>