feat: add border-top-color, border-right-color, border-bottom-color, border-left-color CSS property support

Author: kevin-sakemaer

packages/spark_css/CHANGELOG.md

@@ -11,6 +11,7 @@
 - **Feat**: Added `CssAnimation` sealed class for the `animation` shorthand property with `.none`, single animation (name, duration, timingFunction, delay, iterationCount, direction, fillMode, playState), `.multiple()`, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
 - **Feat**: Added `CssAnimationDirection`, `CssAnimationFillMode`, `CssAnimationPlayState`, and `CssAnimationIterationCount` sealed classes for animation sub-properties. Reuses existing `CssDuration` and `CssTimingFunction` from `CssTransition`.
 - **Feat**: Added `CssBorderCollapse` sealed class for `border-collapse` property with `.separate`, `.collapse` keywords, plus `.variable()`, `.raw()`, and `.global()` escape hatches.
+- **Feat**: Added `border-top-color`, `border-right-color`, `border-bottom-color`, and `border-left-color` CSS property support via `CssColor?` parameters in `Style.typed()`.
 
 ### Changed
 

packages/spark_css/lib/src/style.dart

@@ -290,6 +290,10 @@ class Style implements CssStyle {
     CssBorder? borderRight,
     CssBorder? borderBottom,
     CssBorder? borderLeft,
+    CssColor? borderTopColor,
+    CssColor? borderRightColor,
+    CssColor? borderBottomColor,
+    CssColor? borderLeftColor,
     CssBorderRadius? borderRadius,
     CssBorderCollapse? borderCollapse,
     CssOutline? outline,
@@ -413,6 +417,18 @@ class Style implements CssStyle {
       _properties['border-bottom'] = borderBottom.toCss();
     }
     if (borderLeft != null) _properties['border-left'] = borderLeft.toCss();
+    if (borderTopColor != null) {
+      _properties['border-top-color'] = borderTopColor.toCss();
+    }
+    if (borderRightColor != null) {
+      _properties['border-right-color'] = borderRightColor.toCss();
+    }
+    if (borderBottomColor != null) {
+      _properties['border-bottom-color'] = borderBottomColor.toCss();
+    }
+    if (borderLeftColor != null) {
+      _properties['border-left-color'] = borderLeftColor.toCss();
+    }
     if (borderRadius != null) {
       _properties['border-radius'] = borderRadius.toCss();
     }

packages/spark_css/test/style_test.dart

@@ -100,6 +100,10 @@ void main() {
           CssBorderStyle.solid,
         ),
         borderLeft: CssBorder.widthStyle(CssLength.px(1), CssBorderStyle.solid),
+        borderTopColor: CssColor.red,
+        borderRightColor: CssColor.green,
+        borderBottomColor: CssColor.blue,
+        borderLeftColor: CssColor.black,
         borderRadius: CssBorderRadius.all(CssLength.px(5)),
         outline: CssOutline(
           width: CssLength.px(1),
@@ -144,6 +148,80 @@ void main() {
       expect(css, contains('margin: 10px;'));
       expect(css, contains('background: red;'));
       expect(css, contains('grid-template-columns: 1fr 1fr;'));
+      expect(css, contains('border-top-color: red;'));
+      expect(css, contains('border-right-color: green;'));
+      expect(css, contains('border-bottom-color: blue;'));
+      expect(css, contains('border-left-color: black;'));
+    });
+
+    test('renders border-top-color property', () {
+      expect(
+        Style.typed(borderTopColor: CssColor.hex('ff0000')).toCss(),
+        contains('border-top-color: #ff0000;'),
+      );
+      expect(
+        Style.typed(borderTopColor: CssColor.variable('border-top')).toCss(),
+        contains('border-top-color: var(--border-top);'),
+      );
+      expect(
+        Style.typed(borderTopColor: CssColor.global(CssGlobal.inherit)).toCss(),
+        contains('border-top-color: inherit;'),
+      );
+    });
+
+    test('renders border-right-color property', () {
+      expect(
+        Style.typed(borderRightColor: CssColor.hex('00ff00')).toCss(),
+        contains('border-right-color: #00ff00;'),
+      );
+      expect(
+        Style.typed(
+          borderRightColor: CssColor.variable('border-right'),
+        ).toCss(),
+        contains('border-right-color: var(--border-right);'),
+      );
+      expect(
+        Style.typed(
+          borderRightColor: CssColor.global(CssGlobal.inherit),
+        ).toCss(),
+        contains('border-right-color: inherit;'),
+      );
+    });
+
+    test('renders border-bottom-color property', () {
+      expect(
+        Style.typed(borderBottomColor: CssColor.hex('0000ff')).toCss(),
+        contains('border-bottom-color: #0000ff;'),
+      );
+      expect(
+        Style.typed(
+          borderBottomColor: CssColor.variable('border-bottom'),
+        ).toCss(),
+        contains('border-bottom-color: var(--border-bottom);'),
+      );
+      expect(
+        Style.typed(
+          borderBottomColor: CssColor.global(CssGlobal.inherit),
+        ).toCss(),
+        contains('border-bottom-color: inherit;'),
+      );
+    });
+
+    test('renders border-left-color property', () {
+      expect(
+        Style.typed(borderLeftColor: CssColor.hex('000000')).toCss(),
+        contains('border-left-color: #000000;'),
+      );
+      expect(
+        Style.typed(borderLeftColor: CssColor.variable('border-left')).toCss(),
+        contains('border-left-color: var(--border-left);'),
+      );
+      expect(
+        Style.typed(
+          borderLeftColor: CssColor.global(CssGlobal.inherit),
+        ).toCss(),
+        contains('border-left-color: inherit;'),
+      );
     });
 
     test('renders accent-color property', () {