Introduce new Material 3 Slider shapes (#152237)

fixes [Update `Slider` for Material 3
redesign](https://github.com/flutter/flutter/issues/141842)
previous implementation https://github.com/flutter/flutter/pull/147783

### Description

This PR introduces new Material 3 Slider design. 

### Slider Preview

<img width="912" alt="Screenshot 2024-07-24 at 16 38 11"
src="https://github.com/user-attachments/assets/9645ff6c-b72a-40aa-ae95-4f76994f8302">

<img width="912" alt="Screenshot 2024-07-24 at 16 38 24"
src="https://github.com/user-attachments/assets/fbaed8bb-2717-43a9-9415-ea1365165d9a">

### Value indicator Preview



https://github.com/user-attachments/assets/45fa001c-de81-433a-a8e9-6c0d6a2335c0

### New stop indicator



https://github.com/user-attachments/assets/ad05621d-042d-4b17-9dbb-7f7b802a2593


### Customized 

<img width="912" alt="Screenshot 2024-07-24 at 16 41 49"
src="https://github.com/user-attachments/assets/2f279240-5af8-4bc8-9c65-a4b4ac718101">



## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [ ] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel
on [Discord].

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

dev/tools/gen_defaults/bin/gen_defaults.dart

@@ -47,6 +47,7 @@ import 'package:gen_defaults/radio_template.dart';
 import 'package:gen_defaults/search_bar_template.dart';
 import 'package:gen_defaults/search_view_template.dart';
 import 'package:gen_defaults/segmented_button_template.dart';
+import 'package:gen_defaults/slider_template.dart';
 import 'package:gen_defaults/snackbar_template.dart';
 import 'package:gen_defaults/surface_tint.dart';
 import 'package:gen_defaults/switch_template.dart';
@@ -142,8 +143,7 @@ Future<void> main(List<String> args) async {
   SearchViewTemplate('SearchView', '$materialLib/search_anchor.dart', tokens).updateFile();
   SegmentedButtonTemplate('md.comp.outlined-segmented-button', 'SegmentedButton', '$materialLib/segmented_button.dart', tokens).updateFile();
   SnackbarTemplate('md.comp.snackbar', 'Snackbar', '$materialLib/snack_bar.dart', tokens).updateFile();
-  // TODO(QuncCccccc): uncomment `SliderTemplate` once `Slider` widget is updated to match the latest M3 specs.
-  // SliderTemplate('md.comp.slider', 'Slider', '$materialLib/slider.dart', tokens).updateFile();
+  SliderTemplate('md.comp.slider', 'Slider', '$materialLib/slider.dart', tokens).updateFile();
   SurfaceTintTemplate('SurfaceTint', '$materialLib/elevation_overlay.dart', tokens).updateFile();
   SwitchTemplate('Switch', '$materialLib/switch.dart', tokens).updateFile();
   TimePickerTemplate('TimePicker', '$materialLib/time_picker.dart', tokens).updateFile();

dev/tools/gen_defaults/generated/used_tokens.csv

@@ -655,6 +655,33 @@ md.comp.sheet.bottom.docked.drag-handle.height,
 md.comp.sheet.bottom.docked.drag-handle.width,
 md.comp.sheet.bottom.docked.modal.container.elevation,
 md.comp.sheet.bottom.docked.standard.container.elevation,
+md.comp.slider.active.handle.padding,
+md.comp.slider.active.stop-indicator.container.color,
+md.comp.slider.active.stop-indicator.container.opacity,
+md.comp.slider.active.track.color,
+md.comp.slider.active.track.height,
+md.comp.slider.disabled.active.stop-indicator.container.color,
+md.comp.slider.disabled.active.track.color,
+md.comp.slider.disabled.active.track.opacity,
+md.comp.slider.disabled.handle.color,
+md.comp.slider.disabled.handle.opacity,
+md.comp.slider.disabled.handle.width,
+md.comp.slider.disabled.inactive.stop-indicator.container.color,
+md.comp.slider.disabled.inactive.track.color,
+md.comp.slider.disabled.inactive.track.opacity,
+md.comp.slider.focus.handle.width,
+md.comp.slider.handle.color,
+md.comp.slider.handle.height,
+md.comp.slider.handle.width,
+md.comp.slider.hover.handle.width,
+md.comp.slider.inactive.stop-indicator.container.color,
+md.comp.slider.inactive.stop-indicator.container.opacity,
+md.comp.slider.inactive.track.color,
+md.comp.slider.pressed.handle.width,
+md.comp.slider.stop-indicator.size,
+md.comp.slider.value-indicator.container.color,
+md.comp.slider.value-indicator.label.label-text.color,
+md.comp.slider.value-indicator.label.label-text.text-style,
 md.comp.snackbar.action.focus.label-text.color,
 md.comp.snackbar.action.hover.label-text.color,
 md.comp.snackbar.action.label-text.color,

dev/tools/gen_defaults/lib/slider_template.dart

@@ -27,7 +27,7 @@ class _${blockName}DefaultsM3 extends SliderThemeData {
   Color? get inactiveTrackColor => ${componentColor('$tokenGroup.inactive.track')};
 
   @override
-  Color? get secondaryActiveTrackColor => _colors.primary.withOpacity(0.54);
+  Color? get secondaryActiveTrackColor => ${componentColor('$tokenGroup.active.track')}.withOpacity(0.54);
 
   @override
   Color? get disabledActiveTrackColor => ${componentColor('$tokenGroup.disabled.active.track')};
@@ -36,49 +36,85 @@ class _${blockName}DefaultsM3 extends SliderThemeData {
   Color? get disabledInactiveTrackColor => ${componentColor('$tokenGroup.disabled.inactive.track')};
 
   @override
-  Color? get disabledSecondaryActiveTrackColor => _colors.onSurface.withOpacity(0.12);
+  Color? get disabledSecondaryActiveTrackColor => ${componentColor('$tokenGroup.disabled.active.track')};
 
   @override
-  Color? get activeTickMarkColor => ${componentColor('$tokenGroup.with-tick-marks.active.container')};
+  Color? get activeTickMarkColor => ${componentColor('$tokenGroup.active.stop-indicator.container')};
 
   @override
-  Color? get inactiveTickMarkColor => ${componentColor('$tokenGroup.with-tick-marks.inactive.container')};
+  Color? get inactiveTickMarkColor => ${componentColor('$tokenGroup.inactive.stop-indicator.container')};
 
   @override
-  Color? get disabledActiveTickMarkColor => ${componentColor('$tokenGroup.with-tick-marks.disabled.container')};
+  Color? get disabledActiveTickMarkColor => ${componentColor('$tokenGroup.disabled.active.stop-indicator.container')};
 
   @override
-  Color? get disabledInactiveTickMarkColor => ${componentColor('$tokenGroup.with-tick-marks.disabled.container')};
+  Color? get disabledInactiveTickMarkColor => ${componentColor('$tokenGroup.disabled.inactive.stop-indicator.container')};
 
   @override
   Color? get thumbColor => ${componentColor('$tokenGroup.handle')};
 
   @override
-  Color? get disabledThumbColor => Color.alphaBlend(${componentColor('$tokenGroup.disabled.handle')}, _colors.surface);
+  Color? get disabledThumbColor => ${componentColor('$tokenGroup.disabled.handle')};
 
   @override
   Color? get overlayColor => MaterialStateColor.resolveWith((Set<MaterialState> states) {
     if (states.contains(MaterialState.dragged)) {
-      return ${componentColor('$tokenGroup.pressed.state-layer')};
+      return _colors.primary.withOpacity(0.1);
     }
     if (states.contains(MaterialState.hovered)) {
-      return ${componentColor('$tokenGroup.hover.state-layer')};
+      return _colors.primary.withOpacity(0.08);
     }
     if (states.contains(MaterialState.focused)) {
-      return ${componentColor('$tokenGroup.focus.state-layer')};
+      return _colors.primary.withOpacity(0.1);
     }
 
     return Colors.transparent;
   });
 
   @override
-  TextStyle? get valueIndicatorTextStyle => ${textStyle('$tokenGroup.label.label-text')}!.copyWith(
-    color: ${componentColor('$tokenGroup.label.label-text')},
+  TextStyle? get valueIndicatorTextStyle => ${textStyle('$tokenGroup.value-indicator.label.label-text')}!.copyWith(
+    color: ${componentColor('$tokenGroup.value-indicator.label.label-text')},
   );
 
   @override
-  SliderComponentShape? get valueIndicatorShape => const DropSliderValueIndicatorShape();
+  Color? get valueIndicatorColor => ${componentColor('$tokenGroup.value-indicator.container')};
+
+  @override
+  SliderComponentShape? get valueIndicatorShape => const RoundedRectSliderValueIndicatorShape();
+
+  @override
+  SliderComponentShape? get thumbShape => const HandleThumbShape();
+
+  @override
+  SliderTrackShape? get trackShape => const GappedSliderTrackShape();
+
+  @override
+  SliderComponentShape? get overlayShape => const RoundSliderOverlayShape();
+
+  @override
+  SliderTickMarkShape? get tickMarkShape => const RoundSliderTickMarkShape(tickMarkRadius: ${getToken("$tokenGroup.stop-indicator.size")} / 2);
+
+  @override
+  MaterialStateProperty<Size?>? get thumbSize {
+    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+      if (states.contains(MaterialState.disabled)) {
+        return const Size(${getToken("$tokenGroup.disabled.handle.width")}, ${getToken("$tokenGroup.handle.height")});
+      }
+      if (states.contains(MaterialState.hovered)) {
+        return const Size(${getToken("$tokenGroup.hover.handle.width")}, ${getToken("$tokenGroup.handle.height")});
+      }
+      if (states.contains(MaterialState.focused)) {
+        return const Size(${getToken("$tokenGroup.focus.handle.width")}, ${getToken("$tokenGroup.handle.height")});
+      }
+      if (states.contains(MaterialState.pressed)) {
+        return const Size(${getToken("$tokenGroup.pressed.handle.width")}, ${getToken("$tokenGroup.handle.height")});
+      }
+      return const Size(${getToken("$tokenGroup.handle.width")}, ${getToken("$tokenGroup.handle.height")});
+    });
+  }
+
+  @override
+  double? get trackGap => ${getToken("$tokenGroup.active.handle.padding")};
 }
 ''';
-
 }