From 4e18bf56219c8165043ff71ced837d8931806e00 Mon Sep 17 00:00:00 2001 From: Calvin Tam Date: Mon, 20 Jun 2022 01:23:49 -0700 Subject: [PATCH] Update extension codes to remove usage of deprecated methods and add new methods (#59) * fix: .toHsl() -> .toHSLColor() in extension * feat: .toHex8() in extension * style: reorder methods in extension * fix: replace .color usage to .toColor() in extension * style: format issues in extension * docs: add changelog for #59 * refacor: rename extensions.dart * docs: fix some readme header missing # * docs: add extensions section to readme for #59 * docs: remove extension usage in the constructors section in readme * docs: remove extensions update text from getting started in readme --- CHANGELOG.md | 1 + README.md | 29 +++++++++++---- .../{color_extension.dart => extensions.dart} | 37 ++++++++++--------- lib/tinycolor2.dart | 2 +- 4 files changed, 44 insertions(+), 25 deletions(-) rename lib/src/{color_extension.dart => extensions.dart} (74%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 48aad57..1a9511c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ * `HslColor` class is now deprecated in favor of native `HSLColor` at [PR #18](https://github.com/TinyCommunity/tinycolor2/pull/35) * Deprecated TinyColor.fromRGB() at [PR #40](https://github.com/TinyCommunity/tinycolor2/pull/40) * Refactor and improve tests at [PR #57](https://github.com/TinyCommunity/tinycolor2/pull/57) +* Update extension codes to remove usage of deprecated methods and add new methods at [PR #59](https://github.com/TinyCommunity/tinycolor2/pull/59) ### Fixed * Not validating range of parameters at [PR #55](https://github.com/TinyCommunity/tinycolor2/pull/55) diff --git a/README.md b/README.md index ed9bbc6..70a0b71 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ import 'package:tinycolor2/tinycolor2.dart'; final TinyColor tinyColor = TinyColor.fromColor(Colors.green); ``` -Now you can also use the package to extend the native `Color` class with all the same features, but simpler. To use extension update, make sure to change envieronment sdk version in pubspec like this: ` sdk: ">=2.6.0 <3.0.0"` +Now you can also use the package to extend the native `Color` class with all the same features, but simpler. ## Constructors @@ -20,8 +20,6 @@ Now you can also use the package to extend the native `Color` class with all the ```dart TinyColor.fromColor(Colors.blue); -// or with Color extension -Colors.blue.toTinyColor(); ``` ### From a Hex String @@ -76,7 +74,7 @@ final HSVColor color = TinyColor.fromColor(Colors.white).toHSVColor(); ### Properties -### `.isLight()` +#### `.isLight()` Return a boolean indicating whether the color's perceived brightness is light. @@ -87,7 +85,7 @@ TinyColor.fromString("#000000").isLight(); // false Colors.white.isLight; // true ``` -### `.isDark()` +#### `.isDark()` Return a boolean indicating whether the color's perceived brightness is dark. @@ -98,7 +96,7 @@ TinyColor.fromString("#000000").isDark(); // true Colors.white.isDark; // false ``` -### `.getBrightness()` +#### `.getBrightness()` Returns the perceived brightness of a color, from `0` to `255`, as defined by [Web Content Accessibility Guidelines (Version 1.0)](https://www.w3.org/TR/AERT#color-contrast). @@ -109,7 +107,7 @@ TinyColor.fromString("#000000").getBrightness(); // 0 Colors.grey.brightness; // 127 ``` -### `.getLuminance()` +#### `.getLuminance()` Return the perceived luminance of a color, a shorthand for flutter `Color.computeLuminance()` @@ -286,3 +284,20 @@ TinyColor.fromColor(Colors.red).mix(TinyColor.fromColor(Colors.yellow, 20)).colo // or with Color extension Colors.red.mix(Colors.yellow, 20); ``` + +## Extensions + +All methods listed above are included in extensions. Note that some methods has changed to return a `bool` or `double` value instead to match with Dart approach, and the rest would return its original class type instead of `TinyColor`. + +### `Color` + +```dart +final TinyColor color = Colors.black.toTinyColor(); +final HSVColor hsv = Colors.white.toHSVColor(); +final HSLColor hsl = Colors.white.toHSLColor(); +final bool isDark = Colors.yellow.isDark; +final bool isLight = Colors.red.isLight; +final double luminance = Colors.blue.luminance; +final double brightness = Colors.blue.brightness; +final Color newColor = Colors.green.mix(Colors.white, 50); +``` diff --git a/lib/src/color_extension.dart b/lib/src/extensions.dart similarity index 74% rename from lib/src/color_extension.dart rename to lib/src/extensions.dart index e7054b6..6ae3a7e 100644 --- a/lib/src/color_extension.dart +++ b/lib/src/extensions.dart @@ -9,41 +9,51 @@ extension TinyColorExtension on Color { HSVColor toHSVColor() => TinyColor.fromColor(this).toHSVColor(); - HSLColor toHsl() => TinyColor.fromColor(this).toHsl(); + HSLColor toHSLColor() => TinyColor.fromColor(this).toHSLColor(); + + String toHex8() => TinyColor.fromColor(this).toHex8(); /// Lighten the color a given amount, from 0 to 100. Providing 100 will always return white. Color lighten([int amount = 10]) => - TinyColor.fromColor(this).lighten(amount).color; + TinyColor.fromColor(this).lighten(amount).toColor(); /// Brighten the color a given amount, from 0 to 100. Color brighten([int amount = 10]) => - TinyColor.fromColor(this).brighten(amount).color; + TinyColor.fromColor(this).brighten(amount).toColor(); /// Darken the color a given amount, from 0 to 100. Providing 100 will always return black. Color darken([int amount = 10]) => - TinyColor.fromColor(this).darken(amount).color; + TinyColor.fromColor(this).darken(amount).toColor(); /// Mix the color with pure white, from 0 to 100. Providing 0 will do nothing, providing 100 will always return white. - Color tint([int amount = 10]) => TinyColor.fromColor(this).tint(amount).color; + Color tint([int amount = 10]) => + TinyColor.fromColor(this).tint(amount).toColor(); /// Mix the color with pure black, from 0 to 100. Providing 0 will do nothing, providing 100 will always return black. Color shade([int amount = 10]) => - TinyColor.fromColor(this).shade(amount).color; + TinyColor.fromColor(this).shade(amount).toColor(); /// Desaturate the color a given amount, from 0 to 100. Providing 100 will is the same as calling greyscale. Color desaturate([int amount = 10]) => - TinyColor.fromColor(this).desaturate(amount).color; + TinyColor.fromColor(this).desaturate(amount).toColor(); /// Saturate the color a given amount, from 0 to 100. Color saturate([int amount = 10]) => - TinyColor.fromColor(this).saturate(amount).color; + TinyColor.fromColor(this).saturate(amount).toColor(); /// Completely desaturates a color into greyscale. Same as calling desaturate(100). - Color greyscale() => TinyColor.fromColor(this).greyscale().color; + Color greyscale() => TinyColor.fromColor(this).greyscale().toColor(); /// Spin the hue a given amount, from -360 to 360. Calling with 0, 360, or -360 will do nothing (since it sets the hue back to what it was before). Color spin([double amount = 0]) => - TinyColor.fromColor(this).spin(amount).color; + TinyColor.fromColor(this).spin(amount).toColor(); + + /// Blends the color with another color a given amount, from 0 - 100, default 50. + Color mix(Color toColor, [int amount = 50]) => + TinyColor.fromColor(this).mix(toColor, amount).toColor(); + + /// Returns the complementary color for dynamic matching + Color complement() => TinyColor.fromColor(this).complement().toColor(); /// Returns the perceived brightness of a color, from 0-255, as defined by Web Content Accessibility Guidelines (Version 1.0).Returns the perceived brightness of a color, from 0-255, as defined by Web Content Accessibility Guidelines (Version 1.0). double get brightness => TinyColor.fromColor(this).getBrightness(); @@ -56,11 +66,4 @@ extension TinyColorExtension on Color { /// Return a boolean indicating whether the color's perceived brightness is dark. bool get isDark => TinyColor.fromColor(this).isDark(); - - /// Returns the complementary color for dynamic matching - Color complement() => TinyColor.fromColor(this).complement().color; - - /// Blends the color with another color a given amount, from 0 - 100, default 50. - Color mix(Color toColor, [int amount = 50]) => - TinyColor.fromColor(this).mix(toColor, amount).color; } diff --git a/lib/tinycolor2.dart b/lib/tinycolor2.dart index 577856c..719422d 100644 --- a/lib/tinycolor2.dart +++ b/lib/tinycolor2.dart @@ -1,6 +1,6 @@ library tinycolor2; -export 'src/color_extension.dart'; +export 'src/extensions.dart'; export 'src/conversion.dart'; export 'src/tinycolor.dart'; export 'src/util.dart';