feat: [MDS-629] Add pin for linear progress

example/lib/src/storybook/stories/linear_progress.dart

@@ -24,7 +24,7 @@ class LinearProgressStory extends Story {
 
             final progressColorKnob = context.knobs.nullable.options(
               label: "color",
-              description: "MoonColors variants for LinearProgress color.",
+              description: "MoonColors variants for LinearProgress progress.",
               enabled: false,
               initial: 0,
               // piccolo
@@ -44,6 +44,39 @@ class LinearProgressStory extends Story {
 
             final backgroundColor = colorTable(context)[progressBackgroundColorKnob ?? 40];
 
+            final pinColorKnob = context.knobs.nullable.options(
+              label: "pinColor",
+              description: "MoonColors variants for LinearProgress pin.",
+              enabled: false,
+              initial: 0,
+              // piccolo
+              options: colorOptions,
+            );
+
+            final pinColor = colorTable(context)[pinColorKnob ?? 40];
+
+            final pinBorderColorKnob = context.knobs.nullable.options(
+              label: "pinBorderColor",
+              description: "MoonColors variants for LinearProgress pin border.",
+              enabled: false,
+              initial: 0,
+              // piccolo
+              options: colorOptions,
+            );
+
+            final pinBorderColor = colorTable(context)[pinBorderColorKnob ?? 40];
+
+            final thumbColorKnob = context.knobs.nullable.options(
+              label: "thumbColor",
+              description: "MoonColors variants for LinearProgress thumb.",
+              enabled: false,
+              initial: 0,
+              // piccolo
+              options: colorOptions,
+            );
+
+            final thumbColor = colorTable(context)[thumbColorKnob ?? 40];
+
             final borderRadiusKnob = context.knobs.nullable.sliderInt(
               label: "borderRadius",
               description: "Border radius for LinearProgress.",
@@ -58,10 +91,29 @@ class LinearProgressStory extends Story {
               initial: 0.5,
             );
 
+            final showPinKnob = context.knobs.boolean(
+              label: "showPin",
+              description: "Show pin for LinearProgress",
+              initial: true,
+            );
+
+            final showPinShadowKnob = context.knobs.boolean(
+              label: "showPinShadow",
+              description: "Show pin shadow for LinearProgress",
+              initial: true,
+            );
+
             return Center(
               child: Padding(
-                padding: const EdgeInsets.symmetric(vertical: 64),
+                padding: const EdgeInsets.symmetric(vertical: 64, horizontal: 8),
                 child: MoonLinearProgress(
+                  showPin: showPinKnob,
+                  pinStyle: PinStyle(
+                    pinColor: pinColor,
+                    pinBorderColor: pinBorderColor,
+                    thumbColor: thumbColor,
+                    showShadow: showPinShadowKnob,
+                  ),
                   value: linearProgressValueKnob,
                   linearProgressSize: progressSizeKnob,
                   color: color,

lib/moon_design.dart

@@ -15,10 +15,12 @@ export 'package:moon_design/src/theme/drawer/drawer_theme.dart';
 export 'package:moon_design/src/theme/effects/effects_theme.dart';
 export 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_theme.dart';
 export 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_theme.dart';
+export 'package:moon_design/src/theme/menu_item/menu_item_theme.dart';
 export 'package:moon_design/src/theme/modal/modal_theme.dart';
 export 'package:moon_design/src/theme/popover/popover_theme.dart';
 export 'package:moon_design/src/theme/progress/circular_progress/circular_progress_theme.dart';
 export 'package:moon_design/src/theme/progress/linear_progress/linear_progress_theme.dart';
+export 'package:moon_design/src/theme/progress_pin/progress_pin_theme.dart';
 export 'package:moon_design/src/theme/radio/radio_theme.dart';
 export 'package:moon_design/src/theme/segmented_control/segmented_control_theme.dart';
 export 'package:moon_design/src/theme/switch/switch_theme.dart';
@@ -77,6 +79,8 @@ export 'package:moon_design/src/widgets/modal/modal.dart';
 export 'package:moon_design/src/widgets/popover/popover.dart';
 export 'package:moon_design/src/widgets/progress/circular_progress.dart';
 export 'package:moon_design/src/widgets/progress/linear_progress.dart';
+export 'package:moon_design/src/widgets/progress_pin/pin_style.dart';
+export 'package:moon_design/src/widgets/progress_pin/progress_pin.dart';
 export 'package:moon_design/src/widgets/radio/radio.dart';
 export 'package:moon_design/src/widgets/segmented_control/segment.dart';
 export 'package:moon_design/src/widgets/segmented_control/segment_style.dart';

lib/src/theme/progress/circular_progress/circular_progress_theme.dart

@@ -23,7 +23,7 @@ class MoonCircularProgressTheme extends ThemeExtension<MoonCircularProgressTheme
   })  : colors = colors ??
             MoonCircularProgressColors(
               color: tokens.colors.piccolo,
-              backgroundColor: tokens.colors.trunks,
+              backgroundColor: tokens.colors.beerus,
             ),
         sizes = sizes ?? MoonCircularProgressSizes(tokens: tokens);
 

lib/src/theme/progress/linear_progress/linear_progress_theme.dart

@@ -23,7 +23,7 @@ class MoonLinearProgressTheme extends ThemeExtension<MoonLinearProgressTheme> wi
   })  : colors = colors ??
             MoonLinearProgressColors(
               color: tokens.colors.piccolo,
-              backgroundColor: tokens.colors.trunks,
+              backgroundColor: tokens.colors.beerus,
             ),
         sizes = sizes ?? MoonLinearProgressSizes(tokens: tokens);
 

lib/src/theme/progress_pin/progress_pin_colors.dart

@@ -0,0 +1,72 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/utils/color_premul_lerp.dart';
+
+@immutable
+class MoonProgressPinColors extends ThemeExtension<MoonProgressPinColors> with DiagnosticableTreeMixin {
+  /// Progress pin color.
+  final Color pinColor;
+
+  /// Progress pin border color.
+  final Color pinBorderColor;
+
+  /// Progress pin thumb color.
+  final Color thumbColor;
+
+  /// Progress pin shadow color.
+  final Color shadowColor;
+
+  /// Progress pin text color.
+  final Color textColor;
+
+  const MoonProgressPinColors({
+    required this.pinColor,
+    required this.pinBorderColor,
+    required this.thumbColor,
+    required this.shadowColor,
+    required this.textColor,
+  });
+
+  @override
+  MoonProgressPinColors copyWith({
+    Color? pinColor,
+    Color? pinBorderColor,
+    Color? thumbColor,
+    Color? shadowColor,
+    Color? textColor,
+  }) {
+    return MoonProgressPinColors(
+      pinColor: pinColor ?? this.pinColor,
+      pinBorderColor: pinBorderColor ?? this.pinBorderColor,
+      thumbColor: thumbColor ?? this.thumbColor,
+      shadowColor: shadowColor ?? this.shadowColor,
+      textColor: textColor ?? this.textColor,
+    );
+  }
+
+  @override
+  MoonProgressPinColors lerp(ThemeExtension<MoonProgressPinColors>? other, double t) {
+    if (other is! MoonProgressPinColors) return this;
+
+    return MoonProgressPinColors(
+      pinColor: colorPremulLerp(pinColor, other.pinColor, t)!,
+      pinBorderColor: colorPremulLerp(pinBorderColor, other.pinBorderColor, t)!,
+      thumbColor: colorPremulLerp(thumbColor, other.thumbColor, t)!,
+      shadowColor: colorPremulLerp(shadowColor, other.shadowColor, t)!,
+      textColor: colorPremulLerp(textColor, other.textColor, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonProgressPinColors"))
+      ..add(ColorProperty("pinColor", pinColor))
+      ..add(ColorProperty("pinBorderColor", pinBorderColor))
+      ..add(ColorProperty("thumbColor", thumbColor))
+      ..add(ColorProperty("shadowColor", shadowColor))
+      ..add(ColorProperty("textColor", textColor));
+  }
+}

lib/src/theme/progress_pin/progress_pin_properties.dart

@@ -0,0 +1,80 @@
+import 'dart:ui';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+@immutable
+class MoonProgressPinProperties extends ThemeExtension<MoonProgressPinProperties> with DiagnosticableTreeMixin {
+  /// Progress pin shadow elevation.
+  final double shadowElevation;
+
+  /// Vertical space between pin and linear progress.
+  final double pinDistance;
+
+  /// Progress pin width.
+  final double pinWidth;
+
+  /// Progress pin border width.
+  final double pinBorderWidth;
+
+  /// Thumb width multiplier for linear progress.
+  final double thumbWidthMultiplier;
+
+  /// Progress pin text style.
+  final TextStyle textStyle;
+
+  const MoonProgressPinProperties({
+    required this.shadowElevation,
+    required this.pinDistance,
+    required this.pinWidth,
+    required this.pinBorderWidth,
+    required this.thumbWidthMultiplier,
+    required this.textStyle,
+  });
+
+  @override
+  MoonProgressPinProperties copyWith({
+    double? shadowElevation,
+    double? pinDistance,
+    double? pinWidth,
+    double? pinBorderWidth,
+    double? thumbWidthMultiplier,
+    TextStyle? textStyle,
+  }) {
+    return MoonProgressPinProperties(
+      shadowElevation: shadowElevation ?? this.shadowElevation,
+      pinDistance: pinDistance ?? this.pinDistance,
+      pinWidth: pinWidth ?? this.pinWidth,
+      pinBorderWidth: pinBorderWidth ?? this.pinBorderWidth,
+      thumbWidthMultiplier: thumbWidthMultiplier ?? this.thumbWidthMultiplier,
+      textStyle: textStyle ?? this.textStyle,
+    );
+  }
+
+  @override
+  MoonProgressPinProperties lerp(ThemeExtension<MoonProgressPinProperties>? other, double t) {
+    if (other is! MoonProgressPinProperties) return this;
+
+    return MoonProgressPinProperties(
+      shadowElevation: lerpDouble(shadowElevation, other.shadowElevation, t)!,
+      pinDistance: lerpDouble(pinDistance, other.pinDistance, t)!,
+      pinWidth: lerpDouble(pinWidth, other.pinWidth, t)!,
+      pinBorderWidth: lerpDouble(pinBorderWidth, other.pinBorderWidth, t)!,
+      thumbWidthMultiplier: lerpDouble(thumbWidthMultiplier, other.thumbWidthMultiplier, t)!,
+      textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonProgressPinProperties"))
+      ..add(DoubleProperty("shadowElevation", shadowElevation))
+      ..add(DoubleProperty("pinDistance", pinDistance))
+      ..add(DoubleProperty("pinWidth", pinWidth))
+      ..add(DoubleProperty("pinBorderWidth", pinBorderWidth))
+      ..add(DoubleProperty("thumbWidthMultiplier", thumbWidthMultiplier))
+      ..add(DiagnosticsProperty<TextStyle>("textStyle", textStyle));
+  }
+}

lib/src/theme/progress_pin/progress_pin_theme.dart

@@ -0,0 +1,74 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/progress_pin/progress_pin_colors.dart';
+import 'package:moon_design/src/theme/progress_pin/progress_pin_properties.dart';
+import 'package:moon_design/src/theme/tokens/tokens.dart';
+
+@immutable
+class MoonProgressPinTheme extends ThemeExtension<MoonProgressPinTheme> with DiagnosticableTreeMixin {
+  /// MDS tokens.
+  final MoonTokens tokens;
+
+  /// Progress pin colors.
+  final MoonProgressPinColors colors;
+
+  /// Progress pin properties.
+  final MoonProgressPinProperties properties;
+
+  MoonProgressPinTheme({
+    required this.tokens,
+    MoonProgressPinColors? colors,
+    MoonProgressPinProperties? properties,
+  })  : colors = colors ??
+            MoonProgressPinColors(
+              pinColor: tokens.colors.popo,
+              pinBorderColor: tokens.colors.goten,
+              thumbColor: tokens.colors.goten,
+              shadowColor: tokens.colors.popo,
+              textColor: tokens.colors.goten,
+            ),
+        properties = properties ??
+            MoonProgressPinProperties(
+              pinDistance: 6,
+              pinWidth: 36,
+              pinBorderWidth: 2,
+              thumbWidthMultiplier: 1.5,
+              shadowElevation: 6,
+              textStyle: tokens.typography.caption.text10.copyWith(letterSpacing: 0.5),
+            );
+
+  @override
+  MoonProgressPinTheme copyWith({
+    MoonTokens? tokens,
+    MoonProgressPinColors? colors,
+    MoonProgressPinProperties? properties,
+  }) {
+    return MoonProgressPinTheme(
+      tokens: tokens ?? this.tokens,
+      colors: colors ?? this.colors,
+      properties: properties ?? this.properties,
+    );
+  }
+
+  @override
+  MoonProgressPinTheme lerp(ThemeExtension<MoonProgressPinTheme>? other, double t) {
+    if (other is! MoonProgressPinTheme) return this;
+
+    return MoonProgressPinTheme(
+      tokens: tokens.lerp(other.tokens, t),
+      colors: colors.lerp(other.colors, t),
+      properties: properties.lerp(other.properties, t),
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) {
+    super.debugFillProperties(diagnosticProperties);
+    diagnosticProperties
+      ..add(DiagnosticsProperty("type", "MoonProgressPinTheme"))
+      ..add(DiagnosticsProperty<MoonTokens>("tokens", tokens))
+      ..add(DiagnosticsProperty<MoonProgressPinColors>("colors", colors))
+      ..add(DiagnosticsProperty<MoonProgressPinProperties>("properties", properties));
+  }
+}