fix(UX-1136): Update slider colours to match Figma designs (#402)

fix: Slider - Make rounded boolean toggle on Widgetbook
fix: Slider - Make circle and square slider thumb the same size
fix: Slider - Make active and inactive track same size

---------

Co-authored-by: thelukewalton <[email protected]>

Author: aygurs

packages/zeta_flutter/lib/src/components/slider/slider.dart

@@ -73,22 +73,22 @@ class _ZetaSliderState extends State<ZetaSlider> {
         label: widget.semanticLabel,
         child: SliderTheme(
           data: SliderThemeData(
-            // TODO(UX-1136): Match with new colors
-
             /// Active Track
             activeTrackColor: _activeColor,
-            disabledActiveTrackColor: colors.surfaceDisabled,
+            disabledActiveTrackColor: colors.mainDisabled,
 
             /// Inactive Track
-            inactiveTrackColor: colors.surfaceInfoSubtle,
+            inactiveTrackColor: colors.mainLight,
 
             /// Ticks
-            activeTickMarkColor: colors.surfaceDefault,
-            inactiveTickMarkColor: colors.surfaceDefault,
+            activeTickMarkColor: colors.mainInverse,
+            inactiveTickMarkColor: colors.mainInverse,
+            disabledActiveTickMarkColor: colors.mainInverse,
+            disabledInactiveTickMarkColor: colors.mainInverse,
 
             /// Thumb
-            thumbColor: colors.surfaceDefaultInverse,
-            disabledThumbColor: colors.surfaceDisabled,
+            thumbColor: colors.mainDefault,
+            disabledThumbColor: colors.mainDisabled,
             overlayShape: _SliderThumb(
               size: Zeta.of(context).spacing.xl / 2,
               rounded: context.rounded,
@@ -99,6 +99,7 @@ class _ZetaSliderState extends State<ZetaSlider> {
               rounded: context.rounded,
               color: _activeColor,
             ),
+            trackShape: context.rounded ? _RoundedRectangleTrackShape() : const RectangularSliderTrackShape(),
           ),
           child: Slider(
             value: widget.value,
@@ -125,9 +126,9 @@ class _ZetaSliderState extends State<ZetaSlider> {
   Color get _activeColor {
     final colors = Zeta.of(context).colors;
     if (widget.onChange == null) {
-      return colors.surfaceDisabled;
+      return colors.mainDisabled;
     }
-    return _selected ? colors.mainPrimary : colors.surfaceDefaultInverse;
+    return _selected ? colors.mainPrimary : colors.mainDefault;
   }
 }
 
@@ -175,6 +176,37 @@ class _SliderThumb extends SliderComponentShape {
     // draw icon with text painter
     rounded
         ? canvas.drawCircle(center, size, paint)
-        : canvas.drawRect(Rect.fromCenter(center: center, width: size, height: size), paint);
+        : canvas.drawRect(Rect.fromCenter(center: center, width: size * 2, height: size * 2), paint);
+  }
+}
+
+class _RoundedRectangleTrackShape extends RoundedRectSliderTrackShape {
+  @override
+  void paint(
+    PaintingContext context,
+    Offset offset, {
+    required RenderBox parentBox,
+    Offset? secondaryOffset,
+    required SliderThemeData sliderTheme,
+    required Animation<double> enableAnimation,
+    required TextDirection textDirection,
+    required Offset thumbCenter,
+    bool isDiscrete = false,
+    bool isEnabled = false,
+    double additionalActiveTrackHeight = 0,
+  }) {
+    super.paint(
+      context,
+      offset,
+      parentBox: parentBox,
+      secondaryOffset: secondaryOffset,
+      sliderTheme: sliderTheme,
+      enableAnimation: enableAnimation,
+      textDirection: textDirection,
+      thumbCenter: thumbCenter,
+      isDiscrete: isDiscrete,
+      isEnabled: isEnabled,
+      additionalActiveTrackHeight: additionalActiveTrackHeight,
+    );
   }
 }

widgetbook/lib/src/components/slider.widgetbook.dart

@@ -20,6 +20,7 @@ Widget sliderUseCase(BuildContext context) {
         value: value,
         divisions: context.knobs.intOrNull.slider(label: 'Divisions', min: 1, initialValue: 10),
         onChange: context.knobs.boolean(label: 'Disabled') ? null : (newValue) => setState(() => value = newValue),
+        rounded: context.knobs.boolean(label: 'Rounded'),
       );
     },
   );