[vector_graphics_compiler] Fix rgb/rgba color parsing to support modern CSS syntax

- Consolidate rgb() and rgba() parsing into single implementation
- Add support for space-separated color values
- Add support for percentage-based RGB values
- Add support for slash (/) separator before alpha channel
- Handle both comma and space delimiters
- Add comprehensive test coverage for various color formats

Author: AlexDochioiu

packages/vector_graphics_compiler/lib/src/svg/parser.dart

@@ -1372,21 +1372,40 @@ class SvgParser {
       }
     }
 
-    // handle rgba() colors e.g. rgba(255, 255, 255, 1.0)
-    if (colorString.toLowerCase().startsWith('rgba')) {
-      final List<String> rawColorElements = colorString
+    // handle rgba() colors e.g. rgb(255, 255, 255) and rgba(255, 255, 255, 1.0)
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/rgb
+    if (colorString.toLowerCase().startsWith('rgba') ||
+        colorString.toLowerCase().startsWith('rgb')) {
+      final List<int> rgba = colorString
           .substring(colorString.indexOf('(') + 1, colorString.indexOf(')'))
-          .split(',')
+          .split(RegExp(r'[,/\s]'))
           .map((String rawColor) => rawColor.trim())
+          .where((e) => e.isNotEmpty)
+          .indexed
+          .map((indexedColor) {
+            var (index, rawColor) = indexedColor;
+            if (rawColor.endsWith('%')) {
+              rawColor = rawColor.substring(0, rawColor.length - 1);
+              return (parseDouble(rawColor)! * 2.55).round();
+            }
+            if (index == 3) {
+              // if alpha is not percentage, it means it's a double between 0 and 1
+              final double opacity = parseDouble(rawColor)!;
+              if (opacity < 0 || opacity > 1) {
+                throw StateError('Invalid "opacity": $opacity');
+              }
+              return (opacity * 255).round();
+            }
+            // If rgb is not percentage, it means it's an integer between 0 and 255
+            return int.parse(rawColor);
+          })
           .toList();
 
-      final double opacity = parseDouble(rawColorElements.removeLast())!;
-
-      final List<int> rgb = rawColorElements
-          .map((String rawColor) => int.parse(rawColor))
-          .toList();
+      if (rgba.length == 3) {
+        rgba.add(255);
+      }
 
-      return Color.fromRGBO(rgb[0], rgb[1], rgb[2], opacity);
+      return Color.fromARGB(rgba[3], rgba[0], rgba[1], rgba[2]);
     }
 
     // Conversion code from: https://github.com/MichaelFenwick/Color, thanks :)
@@ -1456,26 +1475,6 @@ class SvgParser {
       );
     }
 
-    // handle rgb() colors e.g. rgb(255, 255, 255)
-    if (colorString.toLowerCase().startsWith('rgb')) {
-      final List<int> rgb = colorString
-          .substring(colorString.indexOf('(') + 1, colorString.indexOf(')'))
-          .split(',')
-          .map((String rawColor) {
-            rawColor = rawColor.trim();
-            if (rawColor.endsWith('%')) {
-              rawColor = rawColor.substring(0, rawColor.length - 1);
-              return (parseDouble(rawColor)! * 2.55).round();
-            }
-            return int.parse(rawColor);
-          })
-          .toList();
-
-      // rgba() isn't really in the spec, but Firefox supported it at one point so why not.
-      final int a = rgb.length > 3 ? rgb[3] : 255;
-      return Color.fromARGB(a, rgb[0], rgb[1], rgb[2]);
-    }
-
     // handle named colors ('red', 'green', etc.).
     final Color? namedColor = namedColors[colorString];
     if (namedColor != null) {

packages/vector_graphics_compiler/test/parsers_test.dart

@@ -21,11 +21,71 @@ void main() {
       parser.parseColor('#ABCDEF', attributeName: 'foo', id: null),
       const Color.fromARGB(255, 0xAB, 0xCD, 0xEF),
     );
-    // RGBA in svg/css, ARGB in this library.
-    expect(
-      parser.parseColor('#ABCDEF88', attributeName: 'foo', id: null),
-      const Color.fromARGB(0x88, 0xAB, 0xCD, 0xEF),
-    );
+  });
+
+  group('Colors - svg/css', () {
+    final parser = SvgParser('', const SvgTheme(), 'test_key', true, null);
+
+    group('with no opacity', () {
+      const rgbContentVariations = [
+        '171, 205, 239',
+        '171,205,239',
+        '171 205 239',
+        '171 205 239',
+        '171 205 239',
+        '171 205 239',
+        '171 205 239',
+        '67% 80.5% 93.7%',
+      ];
+
+      final List<String> rgbaVariations = [
+        '#ABCDEF',
+        ...rgbContentVariations.map((rgb) => 'rgba($rgb)'),
+        ...rgbContentVariations.map((rgb) => 'rgb($rgb)'),
+      ];
+
+      for (final rgba in rgbaVariations) {
+        test(rgba, () {
+          expect(
+            parser.parseColor(rgba, attributeName: 'foo', id: null),
+            const Color.fromARGB(0xFF, 0xAB, 0xCD, 0xEF),
+          );
+        });
+      }
+    });
+    group('with opacity', () {
+      const rgbContentVariations = [
+        '171, 205, 239, 0.53',
+        '171,205,239,0.53',
+        '171 205 239 0.53',
+        '171 205 239  0.53',
+        '171 205 239 / 53%',
+        '171 205 239 /  0.53',
+        '171 205 239 / 53%',
+        '67% 80.5% 93.7% / 53%',
+      ];
+      final List<String> rgbaVariations = [
+        '#ABCDEF87',
+        ...rgbContentVariations.map((rgb) => 'rgba($rgb)'),
+        ...rgbContentVariations.map((rgb) => 'rgb($rgb)'),
+      ];
+      for (final rgba in rgbaVariations) {
+        test(rgba, () {
+          expect(
+            parser.parseColor(rgba, attributeName: 'foo', id: null),
+            const Color.fromARGB(0x87, 0xAB, 0xCD, 0xEF),
+          );
+        });
+      }
+    });
+
+    test('rgba with no opacity', () {
+      // RGBA is now an alias for RGB, so opacity can be missing entirely
+      expect(
+        parser.parseColor('rgba(171 205 239)', attributeName: 'foo', id: null),
+        const Color.fromARGB(0xFF, 0xAB, 0xCD, 0xEF),
+      );
+    });
   });
 
   test('Colors - mapped', () async {