[flutter_web]

notes/flutter_web/lib/routes.g.dart

@@ -25,7 +25,7 @@ import 'package:flutter_web/routes/notes/state/StatefulBuilder/page.dart' as _St
 import 'package:flutter_web/routes/notes/media&assets&file/file_desktop/page.dart' as _file_desktop_page;
 import 'package:flutter_web/routes/notes/media&assets&file/file_web/page.dart' as _file_web_page;
 import 'package:flutter_web/routes/notes/media&assets&file/assets/page.dart' as _assets_page;
-import 'package:flutter_web/routes/notes/style&theming/material3/page.dart' as _material3_page;
+import 'package:flutter_web/routes/notes/style&theming/colors/page.dart' as _colors_page;
 import 'package:flutter_web/routes/notes/pure_dart/dart3/page.dart' as _dart3_page;
 import 'package:flutter_web/routes/notes/pure_dart/async/page.dart' as _async_page;
 import 'package:flutter_web/routes/notes/pure_dart/safe_interface/page.dart' as _safe_interface_page;
@@ -81,9 +81,7 @@ mixin RoutesMixin {
         ToNote('assets', page: _assets_page.build),
       ]),
       ToNote('style&theming', children: [
-        ToNote('material3', page: _material3_page.build),
-        ToNote('colors'),
-        ToNote('Material'),
+        ToNote('colors', page: _colors_page.build, pageAnno: _Pages.notes_style_theming_colors),
       ]),
       ToNote('pure_dart', children: [
         ToNote('dart3', page: _dart3_page.build),
@@ -154,7 +152,7 @@ mixin RoutesMixin {
   late final ToNote routes_notes_media_assets_file_file_desktop = (root.find('/notes/media&assets&file/file_desktop')! as ToNote);
   late final ToNote routes_notes_media_assets_file_file_web = (root.find('/notes/media&assets&file/file_web')! as ToNote);
   late final ToNote routes_notes_media_assets_file_assets = (root.find('/notes/media&assets&file/assets')! as ToNote);
-  late final ToNote routes_notes_style_theming_material3 = (root.find('/notes/style&theming/material3')! as ToNote);
+  late final ToNote routes_notes_style_theming_colors = (root.find('/notes/style&theming/colors')! as ToNote);
   late final ToNote routes_notes_pure_dart_dart3 = (root.find('/notes/pure_dart/dart3')! as ToNote);
   late final ToNote routes_notes_pure_dart_async = (root.find('/notes/pure_dart/async')! as ToNote);
   late final ToNote routes_notes_pure_dart_safe_interface = (root.find('/notes/pure_dart/safe_interface')! as ToNote);
@@ -188,5 +186,6 @@ class Routes with RoutesMixin {}
 
 class _Pages {
   static const notes = NoteAnnotation(label: "笔记");
+  static const notes_style_theming_colors = NoteAnnotation(label: "Color roles", publish: true);
   static const notes_widgets_specific_widgets_button = NoteAnnotation(label: "按钮", publish: true);
 }

notes/flutter_web/lib/routes/layout.dart

@@ -4,7 +4,7 @@ import 'package:you_flutter/better_ui.dart';
 import 'package:you_flutter/note.dart';
 import 'package:you_flutter/router.dart';
 import 'package:you_flutter/state.dart';
-import 'package:url_launcher/url_launcher.dart';
+import 'package:url_launcher/url_launcher.dart' as url_launcher;
 
 /// [LayoutBuilder]
 Widget build(BuildContext context, Widget child) {
@@ -184,7 +184,7 @@ extension _NoteTreeNode on To {
 }
 
 Future<void> _launchUrl(Uri url) async {
-  if (!await launchUrl(url)) {
+  if (!await url_launcher.launchUrl(url)) {
     throw Exception('Could not launch $url');
   }
 }
@@ -274,6 +274,7 @@ class _ThemeViewState extends State<_ThemeView> {
 
   @override
   Widget build(BuildContext context) {
+    final route = YouRouter.of(context);
     final colors = Theme.of(context).colorScheme;
 
     List<Color> getChildrenColors(MaterialColor e) {
@@ -300,8 +301,10 @@ class _ThemeViewState extends State<_ThemeView> {
           ]),
         ),
         const Divider(),
-        const SizedBox(height: 20,),
 
+        const SizedBox(
+          height: 20,
+        ),
         const Text("Theme mode"),
         Card(
           child: Watch((context) {
@@ -319,7 +322,9 @@ class _ThemeViewState extends State<_ThemeView> {
             );
           }),
         ),
-        const SizedBox(height: 20,),
+        const SizedBox(
+          height: 20,
+        ),
         const Text("Theme color seed"),
         Column(
           crossAxisAlignment: CrossAxisAlignment.center,
@@ -332,6 +337,12 @@ class _ThemeViewState extends State<_ThemeView> {
             }),
           ],
         ).paddingAll$(10),
+        FilledButton(
+            onPressed: () {
+              route.to(routes.routes_notes_style_theming_colors.toUri());
+            },
+            child: const Text("open Material 3 color roles page")),
+
       ],
     ).constrainedBox$(
       constraints: const BoxConstraints.tightFor(width: 280),

notes/flutter_web/lib/routes/notes/style&theming/colors/page.dart

@@ -0,0 +1,193 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:you_flutter/better_ui.dart';
+import 'package:you_flutter/note.dart';
+
+@NoteAnnotation(label: "Color roles",publish: true)
+void build(BuildContext context, Cell print) {
+  final colors = Theme.of(context).colorScheme;
+  print(const MD(r'''
+# Color roles
+
+ref
+
+- <https://m3.material.io/styles/color/roles>
+
+  '''));
+
+  print(
+    Column(
+      children: [
+        Wrap(
+          children: [
+            ColorChip(label: "primary", color: colors.primary, onColors: [ColorItem(label: "onPrimary", color: colors.onPrimary)]),
+            ColorChip(label: "secondary", color: colors.secondary, onColors: [ColorItem(label: "onSecondary", color: colors.onSecondary)]),
+            ColorChip(label: "tertiary", color: colors.tertiary, onColors: [ColorItem(label: "onTertiary", color: colors.onTertiary)]),
+          ],
+        ),
+        Wrap(
+          children: [
+            ColorChip(label: "primaryContainer", color: colors.primaryContainer, onColors: [ColorItem(label: "onPrimaryContainer", color: colors.onPrimaryContainer)]),
+            ColorChip(label: "secondaryContainer", color: colors.secondaryContainer, onColors: [ColorItem(label: "onSecondaryContainer", color: colors.onSecondaryContainer)]),
+            ColorChip(label: "tertiaryContainer", color: colors.tertiaryContainer, onColors: [ColorItem(label: "onTertiaryContainer", color: colors.onTertiaryContainer)]),
+          ],
+        ),
+        Wrap(
+          children: [
+            ColorChip(label: "primaryFixed", color: colors.primaryFixed, onColors: [ColorItem(label: "onPrimaryFixed", color: colors.onPrimaryFixed)]),
+            ColorChip(label: "secondaryFixed", color: colors.secondaryFixed, onColors: [ColorItem(label: "onSecondaryFixed", color: colors.onSecondaryFixed)]),
+            ColorChip(label: "tertiaryFixed", color: colors.tertiaryFixed, onColors: [ColorItem(label: "onTertiaryFixed", color: colors.onTertiaryFixed)]),
+          ],
+        ),
+        Wrap(
+          children: [
+            ColorChip(label: "primaryFixedDim", color: colors.primaryFixedDim, onColors: [
+              ColorItem(label: "onPrimaryFixed", color: colors.onPrimaryFixed),
+              ColorItem(label: "onPrimaryFixedVariant", color: colors.onPrimaryFixedVariant),
+            ]),
+            ColorChip(label: "secondaryFixedDim", color: colors.secondaryFixedDim, onColors: [
+              ColorItem(label: "onSecondaryFixed", color: colors.onSecondaryFixed),
+              ColorItem(label: "onSecondaryFixedVariant", color: colors.onSecondaryFixedVariant),
+            ]),
+            ColorChip(label: "tertiaryFixedDim", color: colors.tertiaryFixedDim, onColors: [
+              ColorItem(label: "onTertiaryFixed", color: colors.onTertiaryFixed),
+              ColorItem(label: "onTertiaryFixedVariant", color: colors.onTertiaryFixedVariant),
+            ]),
+          ],
+        ),
+        Wrap(
+          children: [
+            ColorChip(label: "error", color: colors.error, onColors: [ColorItem(label: "onError", color: colors.onError)]),
+            ColorChip(label: "errorContainer", color: colors.errorContainer, onColors: [ColorItem(label: "onError", color: colors.onErrorContainer)]),
+          ],
+        ),
+        Wrap(
+          children: [
+            ColorChip(label: "surface", color: colors.surface, onColors: [
+              ColorItem(label: "onSurface", color: colors.onSurface),
+              ColorItem(label: "onSurfaceVariant", color: colors.onSurfaceVariant),
+              ColorItem(label: "outline", color: colors.outline),
+              ColorItem(label: "outlineVariant", color: colors.outlineVariant),
+            ]),
+            ColorChip(label: "surfaceBright", color: colors.surfaceBright, onColors: [
+              ColorItem(label: "onSurface", color: colors.onSurface),
+              ColorItem(label: "onSurfaceVariant", color: colors.onSurfaceVariant),
+              ColorItem(label: "outline", color: colors.outline),
+              ColorItem(label: "outlineVariant", color: colors.outlineVariant),
+            ]),
+            ColorChip(label: "surfaceDim", color: colors.surfaceDim, onColors: [
+              ColorItem(label: "onSurface", color: colors.onSurface),
+              ColorItem(label: "onSurfaceVariant", color: colors.onSurfaceVariant),
+              ColorItem(label: "outline", color: colors.outline),
+              ColorItem(label: "outlineVariant", color: colors.outlineVariant),
+            ]),
+          ],
+        ),
+        Wrap(
+          children: [
+            ColorChip(label: "surfaceContainerHighest", color: colors.surfaceContainerHighest, onColors: [
+              ColorItem(label: "onSurface", color: colors.onSurface),
+              ColorItem(label: "onSurfaceVariant", color: colors.onSurfaceVariant),
+              ColorItem(label: "outline", color: colors.outline),
+              ColorItem(label: "outlineVariant", color: colors.outlineVariant),
+            ]),
+            ColorChip(label: "surfaceContainerHigh", color: colors.surfaceContainerHigh, onColors: [
+              ColorItem(label: "onSurface", color: colors.onSurface),
+              ColorItem(label: "onSurfaceVariant", color: colors.onSurfaceVariant),
+              ColorItem(label: "outline", color: colors.outline),
+              ColorItem(label: "outlineVariant", color: colors.outlineVariant),
+            ]),
+            ColorChip(label: "surfaceContainer", color: colors.surfaceContainer, onColors: [
+              ColorItem(label: "onSurface", color: colors.onSurface),
+              ColorItem(label: "onSurfaceVariant", color: colors.onSurfaceVariant),
+              ColorItem(label: "outline", color: colors.outline),
+              ColorItem(label: "outlineVariant", color: colors.outlineVariant),
+            ]),
+            ColorChip(label: "surfaceContainerLow", color: colors.surfaceContainerLow, onColors: [
+              ColorItem(label: "onSurface", color: colors.onSurface),
+              ColorItem(label: "onSurfaceVariant", color: colors.onSurfaceVariant),
+              ColorItem(label: "outline", color: colors.outline),
+              ColorItem(label: "outlineVariant", color: colors.outlineVariant),
+            ]),
+            ColorChip(label: "surfaceContainerLowest", color: colors.surfaceContainerLowest, onColors: [
+              ColorItem(label: "onSurface", color: colors.onSurface),
+              ColorItem(label: "onSurfaceVariant", color: colors.onSurfaceVariant),
+              ColorItem(label: "outline", color: colors.outline),
+              ColorItem(label: "outlineVariant", color: colors.outlineVariant),
+            ]),
+          ],
+        ),
+        ColorChip(label: "inverseSurface", color: colors.inverseSurface, onColors: [
+          ColorItem(label: "onInverseSurface", color: colors.onInverseSurface),
+          ColorItem(label: "inversePrimary", color: colors.inversePrimary),
+        ]),
+      ],
+    ),
+  );
+}
+
+class ColorItem extends StatelessWidget {
+  const ColorItem({
+    super.key,
+    required this.label,
+    required this.color,
+  });
+
+  final String label;
+  final Color color;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      alignment: Alignment.center,
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.start,
+        children: [
+          // Container(color: color, width: 12, height: 12),
+          const SizedBox(width: 2),
+          Container(alignment: Alignment.center, child: Text(label, style: TextStyle(color: color))).borderAll$(),
+        ],
+      ).borderAll$(color: color),
+    );
+  }
+}
+
+class ColorChip extends StatelessWidget {
+  const ColorChip({
+    super.key,
+    required this.label,
+    required this.color,
+    this.onColors = const [],
+  });
+
+  final Color color;
+  final List<ColorItem> onColors;
+  final String label;
+
+  static Color contrastColor(Color color) {
+    final Brightness brightness = ThemeData.estimateBrightnessForColor(color);
+    return brightness == Brightness.dark ? Colors.white : Colors.black;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        SizedBox(child: Text(label)),
+        Container(
+          // width: 200,
+          color: color,
+          child: Padding(
+            padding: const EdgeInsets.all(2),
+            child: Column(
+              children: [
+                for (var onColor in onColors) onColor.marginAll$(4),
+              ],
+            ),
+          ),
+        )
+
+      ],
+    ).marginAll$(4).intrinsicWidth$(stepWidth: 200);
+  }
+}

notes/flutter_web/lib/routes/notes/style&theming/colors/index.md → notes/flutter_web/lib/routes/notes/style&theming/index.md

@@ -12,4 +12,10 @@ Chroma（色度/ch彩度/纯度）:
 彩度或纯度指的是颜色的纯净程度或鲜艳程度，也就是颜色偏离灰色的程度。一个颜色的彩度越高，它就越接近该色相的最纯净形式，看起来越鲜艳、生动；反之，彩度越低，则颜色看起来越灰暗、浑浊。在不同的色彩模型中，彩度可能有不同的表达方式，例如在HSV色彩模型中，这个属性被称为饱和度（Saturation）。
 
 Tone（色调）:
-不同于传统意义上的色调（即Hue色相），Tone更贴近于色彩的亮度或明暗程度，但它是在考虑了人对颜色感知的基础上，结合了色相和彩度调整的一个属性。在HCT色彩空间中，Tone可以帮助调整颜色使其适应不同的视觉环境，增强可读性和感知一致性，尤其适用于用户界面设计等领域。简而言之，Tone帮助调节颜色的整体明暗感受，使得颜色在不同背景下保持其特性的同时，更加和谐易读。
+不同于传统意义上的色调（即Hue色相），Tone更贴近于色彩的亮度或明暗程度，但它是在考虑了人对颜色感知的基础上，结合了色相和彩度调整的一个属性。在HCT色彩空间中，Tone可以帮助调整颜色使其适应不同的视觉环境，增强可读性和感知一致性，尤其适用于用户界面设计等领域。简而言之，Tone帮助调节颜色的整体明暗感受，使得颜色在不同背景下保持其特性的同时，更加和谐易读。
+
+## Material3
+
+> Material3 组件索引参考:
+> <https://api.flutter.dev/flutter/material/ThemeData/useMaterial3.html>
+

packages/you_flutter/lib/src/better_ui.dart

@@ -92,6 +92,11 @@ final class BetterUI {
 }
 
 extension StyleExtension on Widget {
+  /// Warp a [Padding]
+  Widget marginAll$(double value) {
+    return Container(margin: EdgeInsets.all(value), child: this);
+  }
+
   /// Warp a [Padding]
   Widget padding$(EdgeInsetsGeometry padding) => Padding(padding: padding, child: this);
 

packages/you_flutter/lib/src/note/contents/contents.dart

@@ -1,15 +1,24 @@
 import 'package:flutter/widgets.dart';
 import 'package:flutter_markdown/flutter_markdown.dart';
 import 'package:you_flutter/src/note/contents/markdown_content.dart';
+import 'package:url_launcher/url_launcher.dart' as url_launcher;
 
-final Contents contents=Contents._();
-class Contents{
+final Contents contents = Contents._();
+
+class Contents {
   Contents._();
+
   Widget contentToWidget(content) {
     return switch (content) {
-      MD _ => MarkdownBody(data: content.text),
+      MD _ => MarkdownBody(
+          data: content.text,
+          onTapLink: (String text, String? href, String title) async {
+            if (href == null) return;
+            await url_launcher.launchUrl(Uri.parse(href));
+          },
+        ),
       Widget _ => content,
       _ => Text("$content"),
     };
   }
-}
+}