From 0b44ea515d9c8de8b70410653e5936f991a453bb Mon Sep 17 00:00:00 2001 From: ishanvaghani Date: Wed, 22 Jan 2025 12:09:32 +0530 Subject: [PATCH 1/2] feat: Added support for name colors --- packages/mirai/lib/src/utils/color_type.dart | 43 ++- packages/mirai/lib/src/utils/color_utils.dart | 308 +++++++++++++----- website/docs/styles/colors.md | 64 ++++ 3 files changed, 340 insertions(+), 75 deletions(-) create mode 100644 website/docs/styles/colors.md diff --git a/packages/mirai/lib/src/utils/color_type.dart b/packages/mirai/lib/src/utils/color_type.dart index dda03f5a..2d33847f 100644 --- a/packages/mirai/lib/src/utils/color_type.dart +++ b/packages/mirai/lib/src/utils/color_type.dart @@ -1,4 +1,4 @@ -enum ColorType { +enum MiraiColorType { primary, onPrimary, primaryContainer, @@ -32,3 +32,44 @@ enum ColorType { scaffoldBackgroundColor, none, } + +enum MiraiColors { + amber, + amberAccent, + black, + blue, + blueAccent, + blueGrey, + brown, + cyan, + cyanAccent, + deepOrange, + deepOrangeAccent, + deepPurple, + deepPurpleAccent, + green, + greenAccent, + grey, + indigo, + indigoAccent, + lightBlue, + lightBlueAccent, + lightGreen, + lightGreenAccent, + lime, + limeAccent, + orange, + orangeAccent, + pink, + pinkAccent, + purple, + purpleAccent, + red, + redAccent, + teal, + tealAccent, + transparent, + white, + yellow, + yellowAccent, +} diff --git a/packages/mirai/lib/src/utils/color_utils.dart b/packages/mirai/lib/src/utils/color_utils.dart index 1079f795..72643581 100644 --- a/packages/mirai/lib/src/utils/color_utils.dart +++ b/packages/mirai/lib/src/utils/color_utils.dart @@ -1,85 +1,245 @@ import 'package:flutter/material.dart'; import 'package:mirai/src/utils/color_type.dart'; +const String _hashtag = "#"; +const String _empty = ""; +const String _defaultOpacity = "ff"; + extension ColorExt on String? { Color? toColor(BuildContext context) { if (this?.isEmpty ?? true) return null; - switch (colorType) { - case ColorType.primary: - return Theme.of(context).colorScheme.primary; - case ColorType.onPrimary: - return Theme.of(context).colorScheme.onPrimary; - case ColorType.primaryContainer: - return Theme.of(context).colorScheme.primaryContainer; - case ColorType.onPrimaryContainer: - return Theme.of(context).colorScheme.onPrimaryContainer; - case ColorType.secondary: - return Theme.of(context).colorScheme.secondary; - case ColorType.onSecondary: - return Theme.of(context).colorScheme.onSecondary; - case ColorType.secondaryContainer: - return Theme.of(context).colorScheme.secondaryContainer; - case ColorType.onSecondaryContainer: - return Theme.of(context).colorScheme.onSecondaryContainer; - case ColorType.tertiary: - return Theme.of(context).colorScheme.tertiary; - case ColorType.onTertiary: - return Theme.of(context).colorScheme.onTertiary; - case ColorType.tertiaryContainer: - return Theme.of(context).colorScheme.tertiaryContainer; - case ColorType.onTertiaryContainer: - return Theme.of(context).colorScheme.onTertiaryContainer; - case ColorType.error: - return Theme.of(context).colorScheme.error; - case ColorType.onError: - return Theme.of(context).colorScheme.onError; - case ColorType.errorContainer: - return Theme.of(context).colorScheme.errorContainer; - case ColorType.onErrorContainer: - return Theme.of(context).colorScheme.onErrorContainer; - case ColorType.background: - return Theme.of(context).colorScheme.surface; - case ColorType.onBackground: - return Theme.of(context).colorScheme.onSurface; - case ColorType.surface: - return Theme.of(context).colorScheme.surface; - case ColorType.onSurface: - return Theme.of(context).colorScheme.onSurface; - case ColorType.surfaceVariant: - return Theme.of(context).colorScheme.surfaceContainerHighest; - case ColorType.onSurfaceVariant: - return Theme.of(context).colorScheme.onSurfaceVariant; - case ColorType.outline: - return Theme.of(context).colorScheme.outline; - case ColorType.outlineVariant: - return Theme.of(context).colorScheme.outlineVariant; - case ColorType.shadow: - return Theme.of(context).colorScheme.shadow; - case ColorType.scrim: - return Theme.of(context).colorScheme.scrim; - case ColorType.inverseSurface: - return Theme.of(context).colorScheme.inverseSurface; - case ColorType.onInverseSurface: - return Theme.of(context).colorScheme.onInverseSurface; - case ColorType.inversePrimary: - return Theme.of(context).colorScheme.inversePrimary; - case ColorType.surfaceTint: - return Theme.of(context).colorScheme.surfaceTint; - case ColorType.scaffoldBackgroundColor: - return Theme.of(context).scaffoldBackgroundColor; - case ColorType.none: - final buffer = StringBuffer(); - if (this!.length == 6 || this!.length == 7) buffer.write('ff'); - buffer.write(this!.replaceFirst('#', '')); - int? intColor = int.tryParse(buffer.toString(), radix: 16); - intColor = intColor ?? 0x00000000; - return Color(intColor); + final parsedColor = _parseThemeColor(this!, context); + if (parsedColor != null) { + return parsedColor; + } else if (this!.startsWith(_hashtag)) { + return _parseHexColor(this!); + } else { + return _parseNameColor(this!); } } +} - ColorType get colorType => ColorType.values.firstWhere( - (e) => e.name == this, - orElse: () => ColorType.none, - ); +Color? _parseThemeColor(String color, BuildContext context) { + // Ex: primary + MiraiColorType colorType = MiraiColorType.values.firstWhere( + (e) => e.name == color, + orElse: () => MiraiColorType.none, + ); + + switch (colorType) { + case MiraiColorType.primary: + return Theme.of(context).colorScheme.primary; + case MiraiColorType.onPrimary: + return Theme.of(context).colorScheme.onPrimary; + case MiraiColorType.primaryContainer: + return Theme.of(context).colorScheme.primaryContainer; + case MiraiColorType.onPrimaryContainer: + return Theme.of(context).colorScheme.onPrimaryContainer; + case MiraiColorType.secondary: + return Theme.of(context).colorScheme.secondary; + case MiraiColorType.onSecondary: + return Theme.of(context).colorScheme.onSecondary; + case MiraiColorType.secondaryContainer: + return Theme.of(context).colorScheme.secondaryContainer; + case MiraiColorType.onSecondaryContainer: + return Theme.of(context).colorScheme.onSecondaryContainer; + case MiraiColorType.tertiary: + return Theme.of(context).colorScheme.tertiary; + case MiraiColorType.onTertiary: + return Theme.of(context).colorScheme.onTertiary; + case MiraiColorType.tertiaryContainer: + return Theme.of(context).colorScheme.tertiaryContainer; + case MiraiColorType.onTertiaryContainer: + return Theme.of(context).colorScheme.onTertiaryContainer; + case MiraiColorType.error: + return Theme.of(context).colorScheme.error; + case MiraiColorType.onError: + return Theme.of(context).colorScheme.onError; + case MiraiColorType.errorContainer: + return Theme.of(context).colorScheme.errorContainer; + case MiraiColorType.onErrorContainer: + return Theme.of(context).colorScheme.onErrorContainer; + case MiraiColorType.background: + return Theme.of(context).colorScheme.surface; + case MiraiColorType.onBackground: + return Theme.of(context).colorScheme.onSurface; + case MiraiColorType.surface: + return Theme.of(context).colorScheme.surface; + case MiraiColorType.onSurface: + return Theme.of(context).colorScheme.onSurface; + case MiraiColorType.surfaceVariant: + return Theme.of(context).colorScheme.surfaceContainerHighest; + case MiraiColorType.onSurfaceVariant: + return Theme.of(context).colorScheme.onSurfaceVariant; + case MiraiColorType.outline: + return Theme.of(context).colorScheme.outline; + case MiraiColorType.outlineVariant: + return Theme.of(context).colorScheme.outlineVariant; + case MiraiColorType.shadow: + return Theme.of(context).colorScheme.shadow; + case MiraiColorType.scrim: + return Theme.of(context).colorScheme.scrim; + case MiraiColorType.inverseSurface: + return Theme.of(context).colorScheme.inverseSurface; + case MiraiColorType.onInverseSurface: + return Theme.of(context).colorScheme.onInverseSurface; + case MiraiColorType.inversePrimary: + return Theme.of(context).colorScheme.inversePrimary; + case MiraiColorType.surfaceTint: + return Theme.of(context).colorScheme.surfaceTint; + case MiraiColorType.scaffoldBackgroundColor: + return Theme.of(context).scaffoldBackgroundColor; + case MiraiColorType.none: + return null; + } +} + +Color _parseHexColor(String color) { + // Ex: #000000 + final buffer = StringBuffer(); + if (color.length == 6 || color.length == 7) buffer.write(_defaultOpacity); + buffer.write(color.replaceFirst(_hashtag, _empty)); + int? intColor = int.tryParse(buffer.toString(), radix: 16); + intColor = intColor ?? 0x00000000; + return Color(intColor); +} + +Color? _parseNameColor(String colorString) { + // 3 digits shade - Ex: yellow200 + String color = colorString.substring(0, colorString.length - 3); + String shade = colorString.substring( + colorString.length - 3, + colorString.length, + ); + int? shadeInt = int.tryParse(shade); + if (shadeInt == null) { + // 2 digits shade - Ex: yellow50 + color = colorString.substring(0, colorString.length - 2); + shade = colorString.substring(colorString.length - 2, colorString.length); + shadeInt = int.tryParse(shade); + } + if (shadeInt == null) { + // no shade - Ex: yellow + color = colorString; + shadeInt = 500; + } + + MiraiColors miraiColor = MiraiColors.values.firstWhere( + (e) => e.name == color, + orElse: () => MiraiColors.transparent, + ); + + switch (miraiColor) { + case MiraiColors.amber: + return Colors.amber[shadeInt]; + case MiraiColors.amberAccent: + return Colors.amberAccent[shadeInt]; + case MiraiColors.black: + switch (shadeInt) { + case 12: + return Colors.black12; + case 26: + return Colors.black26; + case 38: + return Colors.black38; + case 45: + return Colors.black45; + case 54: + return Colors.black54; + case 87: + return Colors.black87; + default: + return Colors.black; + } + case MiraiColors.blue: + return Colors.blue[shadeInt]; + case MiraiColors.blueAccent: + return Colors.blueAccent[shadeInt]; + case MiraiColors.blueGrey: + return Colors.blueGrey[shadeInt]; + case MiraiColors.brown: + return Colors.brown[shadeInt]; + case MiraiColors.cyan: + return Colors.cyan[shadeInt]; + case MiraiColors.cyanAccent: + return Colors.cyanAccent[shadeInt]; + case MiraiColors.deepOrange: + return Colors.deepOrange[shadeInt]; + case MiraiColors.deepOrangeAccent: + return Colors.deepOrangeAccent[shadeInt]; + case MiraiColors.deepPurple: + return Colors.deepPurple[shadeInt]; + case MiraiColors.deepPurpleAccent: + return Colors.deepPurpleAccent[shadeInt]; + case MiraiColors.green: + return Colors.green[shadeInt]; + case MiraiColors.greenAccent: + return Colors.greenAccent[shadeInt]; + case MiraiColors.grey: + return Colors.grey[shadeInt]; + case MiraiColors.indigo: + return Colors.indigo[shadeInt]; + case MiraiColors.indigoAccent: + return Colors.indigoAccent[shadeInt]; + case MiraiColors.lightBlue: + return Colors.lightBlue[shadeInt]; + case MiraiColors.lightBlueAccent: + return Colors.lightBlueAccent[shadeInt]; + case MiraiColors.lightGreen: + return Colors.lightGreen[shadeInt]; + case MiraiColors.lightGreenAccent: + return Colors.lightGreenAccent[shadeInt]; + case MiraiColors.lime: + return Colors.lime[shadeInt]; + case MiraiColors.limeAccent: + return Colors.limeAccent[shadeInt]; + case MiraiColors.orange: + return Colors.orange[shadeInt]; + case MiraiColors.orangeAccent: + return Colors.orangeAccent[shadeInt]; + case MiraiColors.pink: + return Colors.pink[shadeInt]; + case MiraiColors.pinkAccent: + return Colors.pinkAccent[shadeInt]; + case MiraiColors.purple: + return Colors.purple[shadeInt]; + case MiraiColors.purpleAccent: + return Colors.purpleAccent[shadeInt]; + case MiraiColors.red: + return Colors.red[shadeInt]; + case MiraiColors.redAccent: + return Colors.redAccent[shadeInt]; + case MiraiColors.teal: + return Colors.teal[shadeInt]; + case MiraiColors.tealAccent: + return Colors.tealAccent[shadeInt]; + case MiraiColors.transparent: + return Colors.transparent; + case MiraiColors.white: + switch (shadeInt) { + case 10: + return Colors.white10; + case 12: + return Colors.white12; + case 24: + return Colors.white24; + case 30: + return Colors.white30; + case 38: + return Colors.white38; + case 54: + return Colors.white54; + case 60: + return Colors.white60; + case 70: + return Colors.white70; + default: + return Colors.white; + } + case MiraiColors.yellow: + return Colors.yellow[shadeInt]; + case MiraiColors.yellowAccent: + return Colors.yellowAccent[shadeInt]; + } } diff --git a/website/docs/styles/colors.md b/website/docs/styles/colors.md new file mode 100644 index 00000000..4c1adc29 --- /dev/null +++ b/website/docs/styles/colors.md @@ -0,0 +1,64 @@ +# Color + +The `Color` that can apply to different Flutter widgets for example text color, background color, border color etc. [official documentation](https://api.flutter.dev/flutter/material/Colors-class.html). + +## Types of color + +There are three different types of colors. Theme color, Hex color and Name color. + +### Theme colors + +The Theme colors are theme based colors which we define in theme. + +These are the theme colors [`primary`, `onPrimary`,`primaryContainer`, `onPrimaryContainer`, `secondary`, `onSecondary`, `secondaryContainer`, `onSecondaryContainer`, `tertiary`, `onTertiary`, `tertiaryContainer`, `onTertiaryContainer`, `error`, `onError`, `errorContainer`, `onErrorContainer`, `background`, `onBackground`, `surface`, `onSurface`, `surfaceVariant`, `onSurfaceVariant`, `outline`, `outlineVariant`, `shadow`, `scrim`, `inverseSurface`, `onInverseSurface`, `inversePrimary`, `surfaceTint`, `scaffoldBackgroundColor`]. + +### Hex colors + +The Hex colors will allows to define custom hex value. It could be 6 digit Hex code(`#FF0000`) or it could be 8 digit Hex code(`#88FF0000`) where first 2 digits are for opacity. + +### Name colors + +The Name colors will allows to provide color by using color names and shades or opacity. + +These are the name colors [`amber`, `amberAccent`, `black`, `blue`, `blueAccent`, `blueGrey`, `brown`, `cyan`, `cyanAccent`, `deepOrange`, `deepOrangeAccent`, `deepPurple`, `deepPurpleAccent`, `green`, `greenAccent`, `grey`, `indigo`, `indigoAccent`, `lightBlue`, `lightBlueAccent`, `lightGreen`, `lightGreenAccent`, `lime`, `limeAccent`, `orange`, `orangeAccent`, `pink`, `pinkAccent`, `purple`, `purpleAccent`, `red`, `redAccent`, `teal`, `tealAccent`, `transparent`, `white`, `yellow`, `yellowAccent`]. + +These are the color shades for all the colors except white and black [`50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`]. + +These are the opacities for white color [`10`, `12`, `24`, `30`, `38`, `54`, `60`, `70`]. + +These are the opacities for black color [`12`, `26`, `38`, `45`, `54`, `87`]. + +## Example + +### Example 1: Theme color +```json +{ + "type": "text", + "data": "Hello World!", + "style": { + "color": "primary" + } +} +``` + +### Example 2: Hex color +```json +{ + "type": "text", + "data": "Hello World!", + "style": { + "color": "#000000" + } +} +``` + +### Example 3: Name color +```json +{ + "type": "text", + "data": "Hello World!", + "style": { + "color": "red100" + } +} +``` From 25be3c6e3f15ddc8b9845e0085daa13f807761c4 Mon Sep 17 00:00:00 2001 From: ishanvaghani Date: Thu, 23 Jan 2025 11:21:37 +0530 Subject: [PATCH 2/2] Removed shades from colors --- packages/mirai/lib/src/utils/color_utils.dart | 103 +++++++++--------- website/docs/styles/colors.md | 6 +- 2 files changed, 53 insertions(+), 56 deletions(-) diff --git a/packages/mirai/lib/src/utils/color_utils.dart b/packages/mirai/lib/src/utils/color_utils.dart index 72643581..aa7288e7 100644 --- a/packages/mirai/lib/src/utils/color_utils.dart +++ b/packages/mirai/lib/src/utils/color_utils.dart @@ -106,23 +106,22 @@ Color _parseHexColor(String color) { } Color? _parseNameColor(String colorString) { - // 3 digits shade - Ex: yellow200 - String color = colorString.substring(0, colorString.length - 3); - String shade = colorString.substring( - colorString.length - 3, - colorString.length, - ); - int? shadeInt = int.tryParse(shade); - if (shadeInt == null) { - // 2 digits shade - Ex: yellow50 + String color; + int? opacity; + if (colorString.startsWith(MiraiColors.white.name) || + colorString.startsWith(MiraiColors.black.name)) { + // Ex: black54 color = colorString.substring(0, colorString.length - 2); - shade = colorString.substring(colorString.length - 2, colorString.length); - shadeInt = int.tryParse(shade); - } - if (shadeInt == null) { - // no shade - Ex: yellow + opacity = int.tryParse( + colorString.substring(colorString.length - 2, colorString.length), + ); + if (opacity == null) { + // Ex: black + color = colorString; + } + } else { + // Ex: red color = colorString; - shadeInt = 500; } MiraiColors miraiColor = MiraiColors.values.firstWhere( @@ -132,11 +131,11 @@ Color? _parseNameColor(String colorString) { switch (miraiColor) { case MiraiColors.amber: - return Colors.amber[shadeInt]; + return Colors.amber; case MiraiColors.amberAccent: - return Colors.amberAccent[shadeInt]; + return Colors.amberAccent; case MiraiColors.black: - switch (shadeInt) { + switch (opacity) { case 12: return Colors.black12; case 26: @@ -153,71 +152,71 @@ Color? _parseNameColor(String colorString) { return Colors.black; } case MiraiColors.blue: - return Colors.blue[shadeInt]; + return Colors.blue; case MiraiColors.blueAccent: - return Colors.blueAccent[shadeInt]; + return Colors.blueAccent; case MiraiColors.blueGrey: - return Colors.blueGrey[shadeInt]; + return Colors.blueGrey; case MiraiColors.brown: - return Colors.brown[shadeInt]; + return Colors.brown; case MiraiColors.cyan: - return Colors.cyan[shadeInt]; + return Colors.cyan; case MiraiColors.cyanAccent: - return Colors.cyanAccent[shadeInt]; + return Colors.cyanAccent; case MiraiColors.deepOrange: - return Colors.deepOrange[shadeInt]; + return Colors.deepOrange; case MiraiColors.deepOrangeAccent: - return Colors.deepOrangeAccent[shadeInt]; + return Colors.deepOrangeAccent; case MiraiColors.deepPurple: - return Colors.deepPurple[shadeInt]; + return Colors.deepPurple; case MiraiColors.deepPurpleAccent: - return Colors.deepPurpleAccent[shadeInt]; + return Colors.deepPurpleAccent; case MiraiColors.green: - return Colors.green[shadeInt]; + return Colors.green; case MiraiColors.greenAccent: - return Colors.greenAccent[shadeInt]; + return Colors.greenAccent; case MiraiColors.grey: - return Colors.grey[shadeInt]; + return Colors.grey; case MiraiColors.indigo: - return Colors.indigo[shadeInt]; + return Colors.indigo; case MiraiColors.indigoAccent: - return Colors.indigoAccent[shadeInt]; + return Colors.indigoAccent; case MiraiColors.lightBlue: - return Colors.lightBlue[shadeInt]; + return Colors.lightBlue; case MiraiColors.lightBlueAccent: - return Colors.lightBlueAccent[shadeInt]; + return Colors.lightBlueAccent; case MiraiColors.lightGreen: - return Colors.lightGreen[shadeInt]; + return Colors.lightGreen; case MiraiColors.lightGreenAccent: - return Colors.lightGreenAccent[shadeInt]; + return Colors.lightGreenAccent; case MiraiColors.lime: - return Colors.lime[shadeInt]; + return Colors.lime; case MiraiColors.limeAccent: - return Colors.limeAccent[shadeInt]; + return Colors.limeAccent; case MiraiColors.orange: - return Colors.orange[shadeInt]; + return Colors.orange; case MiraiColors.orangeAccent: - return Colors.orangeAccent[shadeInt]; + return Colors.orangeAccent; case MiraiColors.pink: - return Colors.pink[shadeInt]; + return Colors.pink; case MiraiColors.pinkAccent: - return Colors.pinkAccent[shadeInt]; + return Colors.pinkAccent; case MiraiColors.purple: - return Colors.purple[shadeInt]; + return Colors.purple; case MiraiColors.purpleAccent: - return Colors.purpleAccent[shadeInt]; + return Colors.purpleAccent; case MiraiColors.red: - return Colors.red[shadeInt]; + return Colors.red; case MiraiColors.redAccent: - return Colors.redAccent[shadeInt]; + return Colors.redAccent; case MiraiColors.teal: - return Colors.teal[shadeInt]; + return Colors.teal; case MiraiColors.tealAccent: - return Colors.tealAccent[shadeInt]; + return Colors.tealAccent; case MiraiColors.transparent: return Colors.transparent; case MiraiColors.white: - switch (shadeInt) { + switch (opacity) { case 10: return Colors.white10; case 12: @@ -238,8 +237,8 @@ Color? _parseNameColor(String colorString) { return Colors.white; } case MiraiColors.yellow: - return Colors.yellow[shadeInt]; + return Colors.yellow; case MiraiColors.yellowAccent: - return Colors.yellowAccent[shadeInt]; + return Colors.yellowAccent; } } diff --git a/website/docs/styles/colors.md b/website/docs/styles/colors.md index 4c1adc29..8c9cc538 100644 --- a/website/docs/styles/colors.md +++ b/website/docs/styles/colors.md @@ -18,12 +18,10 @@ The Hex colors will allows to define custom hex value. It could be 6 digit Hex c ### Name colors -The Name colors will allows to provide color by using color names and shades or opacity. +The Name colors will allows to provide color by using color names and opacity for black and white colors. These are the name colors [`amber`, `amberAccent`, `black`, `blue`, `blueAccent`, `blueGrey`, `brown`, `cyan`, `cyanAccent`, `deepOrange`, `deepOrangeAccent`, `deepPurple`, `deepPurpleAccent`, `green`, `greenAccent`, `grey`, `indigo`, `indigoAccent`, `lightBlue`, `lightBlueAccent`, `lightGreen`, `lightGreenAccent`, `lime`, `limeAccent`, `orange`, `orangeAccent`, `pink`, `pinkAccent`, `purple`, `purpleAccent`, `red`, `redAccent`, `teal`, `tealAccent`, `transparent`, `white`, `yellow`, `yellowAccent`]. -These are the color shades for all the colors except white and black [`50`, `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900`]. - These are the opacities for white color [`10`, `12`, `24`, `30`, `38`, `54`, `60`, `70`]. These are the opacities for black color [`12`, `26`, `38`, `45`, `54`, `87`]. @@ -58,7 +56,7 @@ These are the opacities for black color [`12`, `26`, `38`, `45`, `54`, `87`]. "type": "text", "data": "Hello World!", "style": { - "color": "red100" + "color": "black45" } } ```