From a282df8a09e911337cd1ed54893b8c2410a4fefc Mon Sep 17 00:00:00 2001 From: Leo Farias Date: Wed, 10 Jan 2024 11:51:44 -0500 Subject: [PATCH] Improved comments and docs --- analysis_options.yaml | 1 + coverage/lcov.info | 352 +++++++++--------- dartdoc_options.yaml | 115 +----- lib/src/core/styled_widget.dart | 69 +++- lib/src/specs/container/box_widget.dart | 94 ++--- lib/src/widgets/pressable/gesture_widget.dart | 11 +- .../pages/docs/Utilities/box-utilities.mdx | 0 website/pages/docs/_meta.json | 6 +- website/pages/docs/concepts/directives.mdx | 21 -- .../docs/{concepts => guides}/_meta.json | 1 - .../docs/{concepts => guides}/decorators.mdx | 0 website/pages/docs/guides/directives.mdx | 30 ++ .../{concepts => guides}/styled-widgets.mdx | 0 .../docs/{concepts => guides}/styling.mdx | 20 +- .../docs/{concepts => guides}/variants.mdx | 8 +- website/pages/docs/introduction/_meta.json | 4 +- .../pages/docs/introduction/comparison.mdx | 110 ++++++ .../docs/introduction/getting-started.mdx | 165 +++----- website/pages/docs/introduction/index.mdx | 41 ++ .../utility-first.mdx} | 20 +- website/pages/docs/overview/concepts.mdx | 10 - website/pages/docs/overview/introduction.mdx | 15 - website/pages/docs/overview/overview.mdx | 1 - website/pages/docs/overview/why-mix.mdx | 100 ----- website/theme.config.tsx | 2 +- 25 files changed, 553 insertions(+), 643 deletions(-) delete mode 100644 website/pages/docs/Utilities/box-utilities.mdx delete mode 100644 website/pages/docs/concepts/directives.mdx rename website/pages/docs/{concepts => guides}/_meta.json (74%) rename website/pages/docs/{concepts => guides}/decorators.mdx (100%) create mode 100644 website/pages/docs/guides/directives.mdx rename website/pages/docs/{concepts => guides}/styled-widgets.mdx (100%) rename website/pages/docs/{concepts => guides}/styling.mdx (80%) rename website/pages/docs/{concepts => guides}/variants.mdx (89%) create mode 100644 website/pages/docs/introduction/comparison.mdx create mode 100644 website/pages/docs/introduction/index.mdx rename website/pages/docs/{concepts/utilities.mdx => introduction/utility-first.mdx} (61%) delete mode 100644 website/pages/docs/overview/concepts.mdx delete mode 100644 website/pages/docs/overview/introduction.mdx delete mode 100644 website/pages/docs/overview/overview.mdx delete mode 100644 website/pages/docs/overview/why-mix.mdx diff --git a/analysis_options.yaml b/analysis_options.yaml index 76203f1b1..618a64d1f 100644 --- a/analysis_options.yaml +++ b/analysis_options.yaml @@ -47,6 +47,7 @@ dart_code_metrics: format-comment: false no-equal-arguments: false prefer_initializing_formals: false + avoid-returning-widgets: false avoid-nested-conditional-expressions: acceptable-level: 3 member-ordering: diff --git a/coverage/lcov.info b/coverage/lcov.info index 3c14cef1e..d02ae86d9 100644 --- a/coverage/lcov.info +++ b/coverage/lcov.info @@ -1,76 +1,3 @@ -SF:lib/src/helpers/compare_mixin.dart -DA:10,4 -DA:11,16 -DA:18,34 -DA:24,34 -DA:25,68 -DA:28,57 -DA:29,34 -DA:30,34 -DA:33,48 -DA:34,14 -DA:37,67 -DA:38,13 -DA:41,81 -DA:45,27 -DA:55,34 -DA:56,34 -DA:62,4 -DA:64,4 -DA:65,2 -DA:66,10 -DA:67,4 -DA:68,8 -DA:74,4 -DA:75,0 -DA:78,4 -DA:79,4 -DA:80,4 -DA:83,4 -DA:87,12 -DA:88,16 -DA:90,8 -DA:94,4 -DA:95,16 -DA:96,8 -DA:98,16 -DA:104,2 -DA:105,6 -DA:107,3 -DA:109,5 -DA:110,1 -DA:112,1 -DA:116,2 -DA:118,2 -DA:129,3 -DA:132,55 -DA:135,49 -DA:136,147 -DA:137,138 -DA:141,8 -DA:142,40 -DA:145,0 -DA:147,0 -DA:150,0 -DA:152,0 -DA:153,0 -DA:154,0 -DA:156,0 -DA:157,0 -DA:158,0 -DA:160,0 -DA:161,0 -DA:162,0 -DA:164,0 -DA:165,0 -DA:166,0 -DA:167,0 -DA:171,0 -DA:178,3 -DA:180,12 -LF:69 -LH:51 -end_of_record SF:lib/src/attributes/border/border_dto.dart DA:21,8 DA:30,4 @@ -1564,6 +1491,79 @@ DA:86,0 LF:33 LH:23 end_of_record +SF:lib/src/helpers/compare_mixin.dart +DA:10,4 +DA:11,16 +DA:18,34 +DA:24,34 +DA:25,68 +DA:28,57 +DA:29,34 +DA:30,34 +DA:33,48 +DA:34,14 +DA:37,67 +DA:38,13 +DA:41,81 +DA:45,27 +DA:55,34 +DA:56,34 +DA:62,4 +DA:64,4 +DA:65,2 +DA:66,10 +DA:67,4 +DA:68,8 +DA:74,4 +DA:75,0 +DA:78,4 +DA:79,4 +DA:80,4 +DA:83,4 +DA:87,12 +DA:88,16 +DA:90,8 +DA:94,4 +DA:95,16 +DA:96,8 +DA:98,16 +DA:104,2 +DA:105,6 +DA:107,3 +DA:109,5 +DA:110,1 +DA:112,1 +DA:116,2 +DA:118,2 +DA:129,3 +DA:132,55 +DA:135,49 +DA:136,147 +DA:137,138 +DA:141,8 +DA:142,40 +DA:145,0 +DA:147,0 +DA:150,0 +DA:152,0 +DA:153,0 +DA:154,0 +DA:156,0 +DA:157,0 +DA:158,0 +DA:160,0 +DA:161,0 +DA:162,0 +DA:164,0 +DA:165,0 +DA:166,0 +DA:167,0 +DA:171,0 +DA:178,3 +DA:180,12 +LF:69 +LH:51 +end_of_record SF:lib/src/core/attribute.dart DA:8,362 DA:16,50 @@ -1692,13 +1692,13 @@ LF:33 LH:17 end_of_record SF:lib/src/core/styled_widget.dart -DA:9,4 -DA:23,4 -DA:24,5 -DA:26,8 -DA:28,0 -DA:30,8 -DA:38,0 +DA:18,4 +DA:39,4 +DA:40,5 +DA:42,8 +DA:44,0 +DA:46,8 +DA:74,0 LF:7 LH:5 end_of_record @@ -2394,50 +2394,50 @@ LF:55 LH:35 end_of_record SF:lib/src/specs/container/box_widget.dart -DA:46,3 -DA:50,3 -DA:52,6 -DA:53,6 +DA:22,3 +DA:26,3 +DA:28,6 +DA:29,6 +DA:68,4 +DA:79,4 +DA:81,7 +DA:83,4 +DA:87,4 DA:92,4 -DA:103,4 -DA:105,7 -DA:107,4 -DA:111,4 -DA:116,4 -DA:117,4 -DA:118,4 -DA:119,4 -DA:120,4 -DA:121,4 -DA:122,4 -DA:123,4 -DA:124,4 -DA:125,4 -DA:126,4 -DA:169,0 -DA:180,0 -DA:185,0 -DA:188,0 +DA:93,4 +DA:94,4 +DA:95,4 +DA:96,4 +DA:97,4 +DA:98,4 +DA:99,4 +DA:100,4 +DA:101,4 +DA:102,4 +DA:145,0 +DA:156,0 +DA:161,0 +DA:164,0 +DA:165,0 +DA:166,0 +DA:167,0 +DA:174,0 +DA:187,0 DA:189,0 -DA:190,0 DA:191,0 +DA:197,0 DA:198,0 -DA:211,0 -DA:213,0 -DA:215,0 -DA:221,0 -DA:222,0 -DA:223,0 -DA:224,0 -DA:225,0 -DA:226,0 -DA:227,0 -DA:228,0 -DA:229,0 -DA:230,0 -DA:231,0 -DA:232,0 -DA:233,0 +DA:199,0 +DA:200,0 +DA:201,0 +DA:202,0 +DA:203,0 +DA:204,0 +DA:205,0 +DA:206,0 +DA:207,0 +DA:208,0 +DA:209,0 LF:44 LH:20 end_of_record @@ -3478,75 +3478,79 @@ LH:12 end_of_record SF:lib/src/widgets/pressable/gesture_widget.dart DA:8,0 -DA:32,0 -DA:34,0 -DA:35,0 DA:36,0 -DA:37,0 DA:38,0 DA:39,0 DA:40,0 DA:41,0 DA:42,0 -DA:48,1 -DA:72,1 -DA:73,1 -DA:84,1 -DA:86,1 -DA:87,4 -DA:88,3 -DA:91,1 -DA:92,4 +DA:43,0 +DA:44,0 +DA:45,0 +DA:46,0 +DA:47,0 +DA:48,0 +DA:49,0 +DA:50,0 +DA:57,1 +DA:81,1 +DA:82,1 +DA:93,1 DA:95,1 -DA:98,1 +DA:96,4 +DA:97,3 DA:100,1 -DA:105,0 -DA:107,0 -DA:108,0 -DA:109,0 -DA:111,0 -DA:112,0 -DA:116,1 -DA:118,3 -DA:120,1 -DA:123,0 -DA:124,0 -DA:125,0 -DA:126,0 -DA:129,0 +DA:101,4 +DA:104,1 +DA:107,1 +DA:109,1 +DA:114,0 +DA:116,0 +DA:117,0 +DA:118,0 +DA:120,0 +DA:121,0 +DA:125,1 +DA:127,3 +DA:129,1 DA:132,0 DA:133,0 DA:134,0 -DA:137,1 -DA:139,1 -DA:141,2 -DA:143,1 -DA:145,1 +DA:135,0 +DA:138,0 +DA:141,0 +DA:142,0 +DA:143,0 DA:146,1 -DA:149,2 +DA:148,1 DA:150,2 -DA:151,1 -DA:152,0 -DA:153,0 -DA:154,2 -DA:155,0 -DA:156,0 -DA:157,2 -DA:158,0 -DA:159,0 -DA:160,2 -DA:161,1 -DA:163,1 -DA:164,2 +DA:152,1 +DA:154,1 +DA:155,1 +DA:158,2 +DA:159,2 +DA:160,1 +DA:161,0 +DA:162,0 +DA:163,2 +DA:164,0 DA:165,0 -DA:166,0 -DA:167,2 -DA:168,1 -DA:169,1 +DA:166,2 +DA:167,0 +DA:168,0 +DA:169,2 DA:170,1 -DA:173,1 -DA:175,2 -LF:69 +DA:172,1 +DA:173,2 +DA:174,0 +DA:175,0 +DA:176,2 +DA:177,1 +DA:178,1 +DA:179,1 +DA:182,1 +DA:184,2 +LF:73 LH:36 end_of_record SF:lib/src/widgets/pressable/widget_state_util.dart diff --git a/dartdoc_options.yaml b/dartdoc_options.yaml index a1077c80a..017f5cb8d 100644 --- a/dartdoc_options.yaml +++ b/dartdoc_options.yaml @@ -1,113 +1,8 @@ dartdoc: showStats: true categories: - "Mixable Widgets": - markdown: lib/topics/mixable_widgets.md - "Mix Object": - markdown: lib/topics/mix_object.md - "Attributes": - markdown: lib/topics/attributes.md - "Utilities": - markdown: lib/topics/utilities.md - "Variants": - markdown: lib/topics/variants.md - "Decorators": - markdown: lib/topics/decorators.md - "Misc Utils": - markdown: lib/topics/misc_utils.md - categoryOrder: - - "Mix Object" - - "Mixable Widgets" - - "Attributes" - - "Utilities" - - "Variants" - - "Decorators" - - "Misc Utils" - nodoc: - - "lib/src/helpers/dto/edge_insets.dto.dart" - - "lib/src/helpers/dto/dto.dart" - - "lib/src/helpers/dto/border.dto.dart" - - "lib/src/helpers/dto/box_shadow.dto.dart" - - "lib/src/helpers/dto/text_style.dto.dart" - - "lib/src/helpers/dto/border_radius.dto.dart" - - "lib/src/attributes/directives/text/text_directive_short.utils.dart" - - "lib/src/attributes/variants/variants_short.utils.dart" - - "lib/src/attributes/box/box.props.dart" - - "lib/src/attributes/box/box_short.utils.dart" - - "lib/src/attributes/shared/shared_short.utils.dart" - - "lib/src/attributes/shared/shared.props.dart" - - "lib/src/attributes/image/image.attributes.dart" - - "lib/src/attributes/image/image_short.utils.dart" - - "lib/src/attributes/image/image.utils.dart" - - "lib/src/attributes/image/image.props.dart" - - "lib/src/attributes/pressable/pressable.notifier.dart" - - "lib/src/attributes/shared/attribute.dart" - - "lib/src/attributes/exports.dart" - - "lib/src/attributes/text/text_short.utils.dart" - - "lib/src/attributes/text/text.props.dart" - - "lib/src/attributes/text/text.notifier.dart" - - "lib/src/attributes/icon/icon.props.dart" - - "lib/src/attributes/icon/icon_short.utils.dart" - - "lib/src/attributes/flex/flex_short.utils.dart" - - "lib/src/attributes/flex/flex.props.dart" - - "lib/src/attributes/zbox/zbox.props.dart" - - "lib/src/attributes/zbox/zbox_short.utils.dart" - - "lib/src/attributes/helpers/helper.utils.dart" - - "lib/src/attributes/helpers/helper_short.utils.dart" - - "lib/src/attributes/widget_decorators/decorator_short_utils.dart" - - "lib/src/attributes/widget_decorators/clip_decorators/clip_utils.dart" - - "lib/src/theme/refs/typography_tokens.dart" - - "lib/src/theme/refs/refs.dart" - - "lib/src/theme/refs/color_tokens.dart" - - "lib/src/theme/mix_theme.dart" - - "lib/src/theme/tokens/breakpoints_token.dart" - - "lib/src/theme/tokens/space_token.dart" - - "lib/src/headless/button.dart" - - "lib/src/headless/exports.dart" - - "lib/src/mixer/mix_context.dart" - - "lib/src/helpers/utils.dart" - - "lib/src/widgets/gap.widget.dart" - - "lib/src/widgets/mixable.widget.dart" - - "lib/src/widgets/remixable.widget.dart" - - "lib/src/widgets/nothing.widget.dart" - - "lib/src/widgets/decorator.widget.dart" - processed: - - "lib/src/widgets/box.widget.dart" - - "lib/src/mixer/mix_factory.dart" - - "lib/src/widgets/pressable.widget.dart" - - "lib/src/attributes/box/box.attributes.dart" - - "lib/src/attributes/box/box.utils.dart" - - "lib/src/widgets/text.widget.dart" - - "lib/src/attributes/text/text.attributes.dart" - - "lib/src/attributes/text/text.utils.dart" - - "lib/src/attributes/directives/text/text_directive.utils.dart" - - "lib/src/attributes/directives/text/text_directive.attributes.dart" - - "lib/src/widgets/flex.widget.dart" - - "lib/src/attributes/flex/flex.utils.dart" - - "lib/src/attributes/flex/flex.attributes.dart" - - "lib/src/widgets/icon.widget.dart" - - "lib/src/attributes/icon/icon.attributes.dart" - - "lib/src/attributes/icon/icon.utils.dart" - - "lib/src/headless/chip.dart" - - "lib/src/headless/card.dart" - - "lib/src/headless/switch.dart" - - "lib/src/headless/radio_button.dart" - - "lib/src/headless/checkbox.dart" - - "lib/src/headless/alert_dialog.dart" - - "lib/src/attributes/variants/variants.utils.dart" - - "lib/src/helpers/variants.dart" - - "lib/src/attributes/widget_decorators/rotate.dart" - - "lib/src/attributes/widget_decorators/flexible.dart" - - "lib/src/attributes/widget_decorators/aspect_ratio.dart" - - "lib/src/attributes/widget_decorators/clip_decorators/clip_rrect.dart" - - "lib/src/attributes/widget_decorators/clip_decorators/clip_utils.dart" - - "lib/src/attributes/widget_decorators/opacity.dart" - - "lib/src/attributes/widget_decorators/scale.dart" - - "lib/src/attributes/widget_decorators/decorator_utils.dart" - - "lib/src/attributes/shared/shared.attributes.dart" - - "lib/src/attributes/shared/shared.utils.dart" - - "lib/src/helpers/extensions.dart" - - "lib/src/helpers/color.utils.dart" - - "lib/src/widgets/zbox.widget.dart" - - "lib/src/attributes/zbox.attributes.dart" - - "lib/src/attributes/zbox.utils.dart" + "Widgets": + name: Widgets + "Second Category": + name: Great + categoryOrder: ["Widgets", "Second Category"] \ No newline at end of file diff --git a/lib/src/core/styled_widget.dart b/lib/src/core/styled_widget.dart index ab84d45a0..cfe4280d3 100644 --- a/lib/src/core/styled_widget.dart +++ b/lib/src/core/styled_widget.dart @@ -4,22 +4,38 @@ import '../factory/mix_provider.dart'; import '../factory/mix_provider_data.dart'; import '../factory/style_mix.dart'; -abstract class StyledWidget extends StatelessWidget { - /// Constructor. - const StyledWidget({ - required Style? style, - super.key, +/// An abstract widget for applying custom styles. +/// +/// `StyledWidget` serves as a base class for widgets that need custom styling. +/// It facilitates the application of a `Style` object to the widget and optionally +/// allows this style to be inherited from its parent. This class is intended to be +/// extended by more concrete widgets that implement specific styled behavior. - /// Inherit beavhior is off by default and allows to inherit the style from the parent Context. - /// Only WidgetAttributes are inherited. Decorators will not be inherited as - /// decorators should have already been applied to the parent Widget. - this.inherit = false, - }) : style = style ?? const Style.empty(); +abstract class StyledWidget extends StatelessWidget { + /// Constructor for a styled widget. + /// + /// Takes a [Style] object and an optional [inherit] flag. + const StyledWidget({Style? style, super.key, this.inherit = false}) + : style = style ?? const Style.empty(); + /// The style to apply to the widget. + /// + /// Defines the appearance of the widget using a [Style] object. If null, defaults + /// to an empty [Style], meaning no style is applied. final Style style; + /// Whether the widget should inherit its style from its parent. + /// + /// If set to true, the widget will merge its style with the style from the nearest + /// [StyledWidget] ancestor in the widget tree. Defaults to false. final bool inherit; + /// Applies a mix of inherited and local styles to the widget. + /// + /// Accepts a [BuildContext] and a [MixBuilder]. It computes the final style by + /// merging the inherited style with the local style, then applies it to the widget. + /// This method is typically used in the `build` method of widgets extending + /// [StyledWidget] to provide the actual styled widget. Widget withMix(BuildContext context, MixBuilder builder) { final inheritedMix = inherit ? MixProvider.maybeOf(context) : null; @@ -34,7 +50,27 @@ abstract class StyledWidget extends StatelessWidget { Widget build(BuildContext context); } +/// An abstract widget that applies custom styles with animations. +/// +/// `AnimatedStyledWidget` extends [StyledWidget] to include animations in the +/// style application process. This widget is designed to create animated effects +/// on styles applied to Flutter widgets. It should be extended by more concrete +/// widgets that implement specific animated styled behaviors. abstract class AnimatedStyledWidget extends StyledWidget { + /// Creates an animated styled widget. + /// + /// This constructor initializes the widget with an optional [style], [inherit] flag, + /// animation [curve], and a required animation [duration]. The [curve] defines the + /// nature of the animation's progression and [duration] specifies the length of time + /// the animation will run. + /// + /// The [style] and [inherit] parameters are passed to the superclass [StyledWidget]. + /// If [inherit] is true, the widget will merge its style with its nearest [StyledWidget] + /// ancestor's style. + /// + /// The [curve] parameter defaults to [Curves.linear], representing a steady animation + /// pace. The [duration] parameter is required and determines how long the animation + /// takes to complete. const AnimatedStyledWidget({ super.key, super.inherit, @@ -43,6 +79,19 @@ abstract class AnimatedStyledWidget extends StyledWidget { required this.duration, }); + /// The curve used for the animation. + /// + /// Specifies how the animation speed transitions over the course of the [duration]. + /// By default, it's set to [Curves.linear], indicating a uniform animation speed. + /// Custom curves can be provided to create different animation effects. final Curve curve; + + /// The duration of the animation. + /// + /// Determines the total time it takes for the animation to complete from start to end. + /// This duration is essential to control the speed and responsiveness of the animation. final Duration duration; + + // Note: The build method will be implemented in subclasses, where the animation logic + // will be applied based on the provided style, curve, and duration. } diff --git a/lib/src/specs/container/box_widget.dart b/lib/src/specs/container/box_widget.dart index bcacbe0bc..ae6a6e72d 100644 --- a/lib/src/specs/container/box_widget.dart +++ b/lib/src/specs/container/box_widget.dart @@ -10,85 +10,42 @@ import 'box_spec.dart'; typedef StyledContainer = Box; typedef StyledAnimatedContainer = AnimatedBox; -/// [Box] - A styled widget that applies a [Style] to its [child], similar to a [Container]. +/// A widget that applies styling from `StyledWidget` to a `MixedBox`. /// -/// `Box` behaves similarly to Flutter's [Container] widget but offers enhanced styling capabilities -/// through its use of a `Style`. This widget extends [StyledWidget] and acts as a flexible -/// wrapper for applying a mix of styles and decorations to its [child]. Unlike `Container`, -/// `Box` is specifically designed to work with the styling system that utilizes `Style`, -/// allowing for more complex and varied style compositions. -/// -/// One of the key features of `Box` is its ability to apply decorators, which are made possible -/// by its use of the [MixedBox] widget internally. This enables `Box` to go beyond the basic styling -/// functionalities of a `Container` by supporting advanced styling and decoration features -/// defined in the `Style`. -/// -/// Parameters: -/// - [style]: The [Style] to be applied. Inherits from [StyledWidget] and enhances the -/// styling capabilities beyond what is offered by a standard [Container]. -/// - [key]: The key for the widget. Inherits from [StyledWidget]. -/// - [inherit]: Determines whether the [Box] should inherit styles from its -/// ancestors. Default is `false`. This attribute is part of the [StyledWidget] base class. -/// - [child]: The widget below this widget in the tree. The [child] is styled based on the -/// attributes defined in the provided [Style]. -/// -/// Example usage: -/// ```dart -/// Box( -/// style: Style( /* ...style attributes... */ ), -/// child: Text('Styled Box Widget') -/// ) -/// ``` -/// -/// This example creates a `Box` widget with a custom `Style`, offering enhanced styling -/// and decoration capabilities compared to a standard [Container]. +/// `Box` extends `StyledWidget` and uses its styling capabilities to style a `MixedBox`. +/// This widget serves as a convenient way to apply consistent styles to its child widget +/// using the `MixData` obtained from `StyledWidget`. class Box extends StyledWidget { + /// Creates a `Box` widget. + /// + /// The [style], [key], and [inherit] parameters are passed to `StyledWidget`. + /// The [child] is the widget to which the styling will be applied. const Box({super.style, super.key, super.inherit, this.child}); + /// The child widget that will receive the styles. final Widget? child; @override Widget build(BuildContext context) { + // Apply styling from StyledWidget to a MixedBox. + // This method uses `withMix` to get the `MixData` and then applies it to `MixedBox`, + // effectively styling the [child]. return withMix(context, (mix) { return MixedBox(child: child); }); } } -/// [MixedBox] - A widget that applies a given [Style] to its [child]. -/// -/// This widget is primarily used by [Box] and [AnimatedBox] to render their children -/// with the styles specified in the `Style`. It acts as an intermediary widget -/// that resolves and applies the styling attributes from the provided `Style` -/// to the [child]. It also integrates with the decorator system, enabling the application -/// of various styling effects in a flexible manner. +/// A widget that applies styling defined in `MixData` to a child widget. /// -/// The [MixedBox] handles the extraction of [BoxSpecAttribute] from the `Style` -/// and uses it to create a [BoxSpecWidget]. The decorators, if any, are applied -/// in the specified order, allowing for layered styling effects. -/// -/// Parameters: -/// - [mix]: The `MixData` representing the current styling context. It contains -/// the resolved attributes from the `Style` that are to be applied to the [child]. -/// - [key]: The key for the widget. -/// - [child]: The widget below this widget in the tree. It is the recipient of the -/// styles and decorations applied by this widget. -/// - [decoratorOrder]: Specifies the order in which decorators are applied to the widget. -/// This allows for fine-grained control over how multiple decorators interact -/// with each other. -/// -/// Example usage: -/// ```dart -/// MixedBox( -/// mix: mixData, -/// child: Text('Styled with Mix'), -/// decoratorOrder: [ /* Decorator types in desired order */ ] -/// ) -/// ``` -/// -/// This example shows how `MixedBox` is used to apply a `Style` to a text widget, -/// potentially with a series of decorators applied in a specific order. +/// `MixedBox` transforms styling rules from `MixData` into concrete properties on +/// a `Container`. It's used to dynamically style a child widget based on these rules. class MixedBox extends StatelessWidget { + /// Creates a `MixedBox` widget. + /// + /// The [mix] parameter holds styling rules. If null, styling is obtained from + /// the closest `MixProvider`. The [child] is the widget to be styled. The optional + /// [decoratorOrder] determines the order of style decorators on the child. const MixedBox({ this.mix, super.key, @@ -102,17 +59,16 @@ class MixedBox extends StatelessWidget { @override Widget build(BuildContext context) { + // Get MixData from this widget or the nearest MixProvider. final mix = this.mix ?? MixProvider.of(context); - // Resolve the BoxSpecAttribute from the mix. If not found, use an empty BoxSpec. + + // Retrieve styling properties from MixData. Use default properties if MixData is not provided. final spec = BoxSpec.of(mix); - // The RenderWidgetDecorators widget is responsible for applying the decorators - // to the child widget in the specified order. + // Apply styles and decorators to the Container, which wraps the child widget. return RenderWidgetDecorators( mix: mix, - // The Container widget is used here as a foundation for applying the styling. - // Each property of the BoxSpec is mapped to the corresponding property of the Container, - // allowing for a flexible and dynamic approach to styling. + orderOfDecorators: decoratorOrder, child: Container( alignment: spec.alignment, padding: spec.padding, diff --git a/lib/src/widgets/pressable/gesture_widget.dart b/lib/src/widgets/pressable/gesture_widget.dart index 213df562a..112d2ecca 100644 --- a/lib/src/widgets/pressable/gesture_widget.dart +++ b/lib/src/widgets/pressable/gesture_widget.dart @@ -16,6 +16,8 @@ class GestureBox extends StatelessWidget { this.behavior, required this.child, this.style, + this.animationDuration = const Duration(milliseconds: 100), + this.animationCurve = Curves.linear, }); final Style? style; @@ -26,6 +28,8 @@ class GestureBox extends StatelessWidget { final bool autofocus; final Duration unpressDelay; final Function(bool focus)? onFocusChange; + final Duration animationDuration; + final Curve animationCurve; final HitTestBehavior? behavior; @@ -39,7 +43,12 @@ class GestureBox extends StatelessWidget { onLongPress: onLongPress, unpressDelay: unpressDelay, onPressed: onPressed, - child: Box(style: style, child: child), + child: AnimatedBox( + style: style, + curve: animationCurve, + duration: animationDuration, + child: child, + ), ); } } diff --git a/website/pages/docs/Utilities/box-utilities.mdx b/website/pages/docs/Utilities/box-utilities.mdx deleted file mode 100644 index e69de29bb..000000000 diff --git a/website/pages/docs/_meta.json b/website/pages/docs/_meta.json index eb4b5e8b6..7e7cb3cb6 100644 --- a/website/pages/docs/_meta.json +++ b/website/pages/docs/_meta.json @@ -9,10 +9,10 @@ }, "-- Concepts": { "type": "separator", - "title": "Concepts" + "title": "Guides" }, - "concepts": { - "title": "Concepts", + "guides": { + "title": "Guides", "display": "children" }, "theme": "Theme", diff --git a/website/pages/docs/concepts/directives.mdx b/website/pages/docs/concepts/directives.mdx deleted file mode 100644 index 5eccc1386..000000000 --- a/website/pages/docs/concepts/directives.mdx +++ /dev/null @@ -1,21 +0,0 @@ -## Directives - -Directives are _Attributes_ that define a transformation that needs to happen within the widget during build time. A great example of this would be the `TextDirective` which allow to define the text case, for your `TextMix` widget. - -```dart highlight="2" -final style = Style( - upperCase(), -); - -const TextMix('Open', style: style), -``` - -In the above example, the text `Open` becomes `OPEN`. Currently, Directives only apply to text - -### Directives catalog - -- `capitalize()` -- `upperCase()` -- `lowerCase()` -- `titleCase()` -- `sentenceCase()` diff --git a/website/pages/docs/concepts/_meta.json b/website/pages/docs/guides/_meta.json similarity index 74% rename from website/pages/docs/concepts/_meta.json rename to website/pages/docs/guides/_meta.json index 063a188c8..24d693cbd 100644 --- a/website/pages/docs/concepts/_meta.json +++ b/website/pages/docs/guides/_meta.json @@ -1,6 +1,5 @@ { "styling": "Styling", - "utilities": "Utilities Fundamentals", "variants": "Variants", "decorators": "Decorators", "styled-widgets": "Styled Widgets" diff --git a/website/pages/docs/concepts/decorators.mdx b/website/pages/docs/guides/decorators.mdx similarity index 100% rename from website/pages/docs/concepts/decorators.mdx rename to website/pages/docs/guides/decorators.mdx diff --git a/website/pages/docs/guides/directives.mdx b/website/pages/docs/guides/directives.mdx new file mode 100644 index 000000000..be0f96189 --- /dev/null +++ b/website/pages/docs/guides/directives.mdx @@ -0,0 +1,30 @@ +## Directives + +Directives in Mix are specialized attributes that define transformations to be applied to widgets during the build process. They are particularly useful for dynamically modifying widget properties based on specific conditions or parameters. + +## Example: Text Directives + +A prime example is the TextDirective, which allows for text case transformations in `StyledText` widgets. + +```dart {4} +const TextMix( + 'Hello World', + style: Style( + upperCase(), + ), +), +``` + +n this example, the text "Hello World" is transformed to "HELLO WORLD" using the upperCase() directive. + +### Directives catalog + +Mix provides a range of directives, which allow for a variety of transformations to be applied to widgets. The following is a list of all available directives: + +#### Text Directives + +- `capitalize()`: Capitalizes the first letter of each word. +- `upperCase()`: Converts all characters to uppercase. +- `lowerCase()`: Converts all characters to lowercase. +- `titleCase()`: Transforms the first letter of each word in a sentence to uppercase. +- `sentenceCase()`: Transforms the first letter of the first word in a sentence to uppercase. diff --git a/website/pages/docs/concepts/styled-widgets.mdx b/website/pages/docs/guides/styled-widgets.mdx similarity index 100% rename from website/pages/docs/concepts/styled-widgets.mdx rename to website/pages/docs/guides/styled-widgets.mdx diff --git a/website/pages/docs/concepts/styling.mdx b/website/pages/docs/guides/styling.mdx similarity index 80% rename from website/pages/docs/concepts/styling.mdx rename to website/pages/docs/guides/styling.mdx index b36d1e1c3..77bf993e6 100644 --- a/website/pages/docs/concepts/styling.mdx +++ b/website/pages/docs/guides/styling.mdx @@ -7,24 +7,16 @@ import { Callout } from "nextra-theme-docs"; # Styling with Mix -Mix introduces an efficient, user-friendly approach to managing the visual semantics of widgets. By leveraging the functional style syntax, Mix not only enhances the aesthetic appeal of your interfaces but also promotes code maintainability. This methodology is crafted for clarity and consistency, pivotal in streamlining your project’s styling process. +Mix enhances Flutter development with a functional styling approach, focusing on separating visual semantics from business logic for improved readability and maintainability. Its emphasis on concise style declarations simplifies the workflow, allowing the creation of complex styles from simple building blocks. -Emphasizing readable and concise style declarations, Mix significantly simplifies the development workflow. It stands out for its adeptness in handling style overrides, offering remarkable flexibility to customize and adapt styles across diverse widgets with ease. +This method fosters modularity, reusability, and flexibility in styling, streamlining the process of defining and applying styles to widgets. -## Comprehensive Overview - -At the core of Mix's styling capabilities is the `Style` class, a robust toolkit for style management and application. It encapsulates a suite of styling attributes and variants, providing a versatile and efficient approach to widget styling. This section delves into the essential features and practical applications of the `Style` class. +## Key Concepts - **Functionality**: The `Style` class is engineered for efficient handling and reuse of styling attributes and variants. Its design simplifies the application of uniform and reusable styles throughout your Flutter application. - **Mechanism**: It integrates various styling aspects, including colors, fonts, dimensions, and more, into a unified construct, streamlining the application of styles to widgets. - **Advanced Capabilities**: Beyond conventional styling attributes, `Style` also supports dynamic variants, enabling context-responsive and adaptable styling solutions. - - Important Note: Remember that the sequence of attributes is crucial in their - composition and overriding. Styling attributes merge sequentially, with - subsequent attributes taking precedence. - - ### **Crafting Your Unique Style** Creating a Mix style is a seamless process. Start by constructing a `Style` object and incorporate your desired attributes: @@ -38,6 +30,12 @@ final style = Style( ); ``` + + Important Note: Remember that the sequence of attributes is crucial in their + composition and overriding. Styling attributes merge sequentially, with + subsequent attributes taking precedence. + + ### **Composing Styles** Create styles by combining and merging multiple Style instances. This technique, called style composition, allows you to build complex styles while ensuring modularity, reusability, flexibility, and maintainability in your codebase. The secret lies in calling the Mix class and passing attributes as arguments. diff --git a/website/pages/docs/concepts/variants.mdx b/website/pages/docs/guides/variants.mdx similarity index 89% rename from website/pages/docs/concepts/variants.mdx rename to website/pages/docs/guides/variants.mdx index 08f96d0cd..8f18dcd0d 100644 --- a/website/pages/docs/concepts/variants.mdx +++ b/website/pages/docs/guides/variants.mdx @@ -7,13 +7,13 @@ import { Callout } from "nextra-theme-docs"; # Variants -Variants in Mix are tools that simplify variations of a widget styling. They can group style for specific use cases, or to create responsive variants that are applied automatically based on the context. +Variants are a fundamental feature in Mix, streamlining the styling of widgets by defining styling variations that can be applied both conditionally and responsively for dynamic UI adaptation -## Overview +## Key Concepts -Variants play a crucial role in building custom widgets. Often, we encounter styles that appear quite similar, with only a handful of minor yet influential differences. +Variants are key to customizing widgets in Mix. They address the need for styles that are broadly similar yet have minor, impactful differences. -Take a button, for instance. It could embody a primary or secondary variant, or maybe even change its style based on the screen's brightness. These subtle transformations, while seemingly small, can significantly shape UI, illustrating the power of Variants. +For example, a button might have primary or secondary styles, or its appearance could vary with screen brightness. These nuanced changes, although subtle, are critical in defining the UI's look and feel, showcasing the versatility and utility of Variants in Mix. ## Simple Variants diff --git a/website/pages/docs/introduction/_meta.json b/website/pages/docs/introduction/_meta.json index 1dc6cc52d..e38289794 100644 --- a/website/pages/docs/introduction/_meta.json +++ b/website/pages/docs/introduction/_meta.json @@ -1,4 +1,6 @@ { "index": "Introduction", - "getting-started": "Getting started" + "getting-started": "Getting started", + "comparison": "Comparative Overview", + "utility-first": "Utility-First Approach" } diff --git a/website/pages/docs/introduction/comparison.mdx b/website/pages/docs/introduction/comparison.mdx new file mode 100644 index 000000000..cb51621c5 --- /dev/null +++ b/website/pages/docs/introduction/comparison.mdx @@ -0,0 +1,110 @@ +--- +title: "A Comparative Look" +--- + +## A Comparative Look of Mix + +Mix rethinks the way we handle styling in Flutter by simplifying and streamlining the process. This comparison aims to showcase how Mix enhances code readability, maintainability, and reduces boilerplate, especially when dealing with complex widget styles and interactions. + +### Code Comparison: With Mix vs. Without Mix + +We'll compare a common scenario: styling a custom widget, to illustrate the advantages of using Mix. In this example, we'll be styling a custom widget with the following requirements: + +- **Leveraging ThemeData for Styling**: Illustrating how Mix uses values from ThemeData, ensuring consistency and ease in styling widgets with the existing Material theme. +- **Flexible Overriding of Styles**: Demonstrating the ability to override specific TextStyle and BoxDecoration properties, showcasing Mix's flexibility and adaptability in customization. +- **Simplified Interaction-Based Styling**: Highlighting Mix’s capability to handle hover states effortlessly, allowing for dynamic styling changes in response to user interactions. +- **Inherited Text Styles**: Showcasing how text styles can be inherited within the same style context in Mix, eliminating the need for repetitive style declarations. + +#### With Mix + +```dart +class CustomMixWidget extends StatelessWidget { + const CustomMixWidget({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + final style = Style( + height(100), + margin.vertical(10), + elevation(10), + border.radius(10), + backgroundColor($md.colors.primary()), + text.style.as($button()), + text.style.color($md.colors.onPrimary()), + onHover( + elevation(2), + padding(20), + backgroundColor($md.colors.secondary()), + text.style(color: $md.colors.onSecondary()), + ), + ); + return GestureBox( + style: style, + child: const StyledText('Custom Widget'), + ); + } +} +``` + +In this Mix example, notice the streamlined declaration of styles and the simplified handling of hover states. The code is more concise and easier to read. + +### Without Mix + +```dart +class CustomWidget extends StatefulWidget { + const CustomWidget({ + Key? key, + }) : super(key: key); + + @override + _CustomWidgetState createState() => _CustomWidgetState(); +} + +class _CustomWidgetState extends State { + bool _isHover = false; + @override + void initState() { + super.initState(); + } + + @override + Widget build(BuildContext context) { + final colorScheme = Theme.of(context).colorScheme; + + return MouseRegion( + onEnter: (event) { + setState(() => _isHover = true); + }, + onExit: (event) { + setState(() => _isHover = false); + }, + child: Material( + elevation: _isHover ? 2 : 10, + child: AnimatedContainer( + curve: Curves.linear, + duration: const Duration(milliseconds: 100), + height: 100, + padding: + _isHover ? const EdgeInsets.all(20) : const EdgeInsets.all(0), + margin: const EdgeInsets.symmetric(vertical: 10), + decoration: BoxDecoration( + color: _isHover ? colorScheme.secondary : colorScheme.primary, + borderRadius: BorderRadius.circular(10), + ), + child: Text( + 'Custom Widget', + style: Theme.of(context).textTheme.button?.copyWith( + color: _isHover + ? colorScheme.onSecondary + : colorScheme.onPrimary, + ), + ), + ), + ), + ); + } +} + +``` + +Without Mix, the code is more verbose, especially in managing the hover state and styling. The separation between logic and presentation is less clear. diff --git a/website/pages/docs/introduction/getting-started.mdx b/website/pages/docs/introduction/getting-started.mdx index d4592747b..24c6ce679 100644 --- a/website/pages/docs/introduction/getting-started.mdx +++ b/website/pages/docs/introduction/getting-started.mdx @@ -1,119 +1,76 @@ --- -id: introduction -title: "Introduction" +title: "Getting Started" --- -## The what and why of Mix +import { Steps } from "nextra/components"; -Motivation -Flutter favors composition over inheritance when building widgets. This choice keeps Flutter API extremely easy to interact with and powerful. -However, in our experience, both inheritance and composition are essential when defining presentation attributes. Themes are an excellent example of inheritance but are not extended across all visual properties. -Maintaining a design system is much harder than building it. -When building a design system, it can be challenging to develop and maintain a consistent UI that shares the same design language for widget variations or across different widgets within the design system. -Goals -Provide simple API to compose design and layout attributes for widgets. That can easily be extended, overridden, and combined; we call this a Mix. -Visual attributes should be defined outside of a BuildContext by a composable API shared across the design system. -Style consistently with a global context -Allow to respond to changing requirements quickly -Create adaptive designs and layouts with ease -Principles -Abstract Flutter API, and not modify its behavior. -Development efficiency is gained by the ease of use, consistency, and reusability, not coding speed. -Composability should be a priority. Mixes, Attributes, Widgets, etc. -Designer friendly (use simple standard semantics when possible). +# Getting Started -## Comparison + -Mix provides a lot of different benefits on how you can define and organize your design tokens, and no documentation would be complete without a syntax comparison between **Mix vs. Without Mix**. +### Installation -Let's go ahead and take a look at the code. Don't worry about understanding each line, the docs will go into more detail about each item. +Run the following command in the root of your project: -### With Mix +``` +flutter pub add mix +``` + +Import it everywhere you use it: + +```dart +import 'package:mix/mix.dart'; +``` + +### Styling Your First Widget + +#### Flutter's Traditional Approach + +In Flutter, you might style a Container with elevation and color like this: ```dart -class CustomMixWidget extends StatelessWidget { - const CustomMixWidget({super.key}); - - @override - Widget build(BuildContext context) { - final style = Style( - height(100), - margin.top(10), - margin.bottom(5), - elevation(10), - border.radius(10), - backgroundColor($md.colors.primary()), - text.style.of($button), - text.style(color: $onPrimary), - onHover( - elevation(2), - padding(20), - backgroundColor($md.colors.secondary()), - text.style.color($md.colors.onSecondary()), - ), - ); - return Box( - style: style, - child: const StyledText('Custom Widget'), - ); - } -} +Container( + height: 100, + width: 100, + margin: EdgeInsets.symmetric( + vertical: 10, + horizontal: 20, + ), + decoration: BoxDecoration( + color: Colors.blue, + borderRadius: BorderRadius.circular(10), + border: Border.all( + color: Colors.black, + width: 1, + style: BorderStyle.solid, + ), + ), + child: Text('Hello World'), +); ``` -### Without Mix +### Mix's Approach + +Now, let's style the same Container with Mix: ```dart -class CustomWidget extends StatefulWidget { - const CustomWidget({ - Key? key, - }) : super(key: key); - - @override - _CustomWidgetState createState() => _CustomWidgetState(); -} - -class _CustomWidgetState extends State { - bool _isHover = false; - @override - void initState() { - super.initState(); - } - - @override - Widget build(BuildContext context) { - final colorScheme = Theme.of(context).colorScheme; - - return MouseRegion( - onEnter: (event) { - setState(() => _isHover = true); - }, - onExit: (event) { - setState(() => _isHover = false); - }, - child: Material( - elevation: _isHover ? 2 : 10, - child: AnimatedContainer( - curve: Curves.linear, - duration: const Duration(milliseconds: 100), - height: 100, - padding: - _isHover ? const EdgeInsets.all(20) : const EdgeInsets.all(0), - margin: const EdgeInsets.only(top: 10, bottom: 5), - decoration: BoxDecoration( - color: _isHover ? colorScheme.secondary : colorScheme.primary, - borderRadius: BorderRadius.circular(10), - ), - child: Text( - 'Custom Widget', - style: Theme.of(context).textTheme.button?.copyWith( - color: _isHover - ? colorScheme.onSecondary - : colorScheme.onPrimary, - ), - ), - ), - ), - ); - } -} +final style = Style( + height(100), + width(100), + margin(10, 20), + backgroundColor.blue(), + border.radius(10), + border( + color: Colors.black, + width: 1, + style: BorderStyle.solid, + ), +); + +Box( + style: style, + child: Text('Hello Mix'), +); ``` + + diff --git a/website/pages/docs/introduction/index.mdx b/website/pages/docs/introduction/index.mdx new file mode 100644 index 000000000..e46f9c70b --- /dev/null +++ b/website/pages/docs/introduction/index.mdx @@ -0,0 +1,41 @@ +--- +title: "Introduction" +--- + +# Introduction + +Mix offers a novel approach to styling in Flutter, targeting the specific challenges developers encounter with traditional methods. It emphasizes the separation of presentation from logic, akin to the division of HTML and CSS in web development, ensuring maintainable and readable code. + +- **Comprehensive Styling**: By extending beyond Flutter's theme system, Mix for composability across broader range of visual properties. This comprehensive approach guarantees consistent styling across all widgets, including custom ones. + +- **Streamlined Code Structure**: Mix reduces the need for inline styling and resolves the complexity associated with subclassing and widget composition. Its advanced features facilitate a clean, organized, and efficient codebase. + +## Why Mix? + +- **Separation of Concerns**: Mix distinctly separates styling from widget logic. This not only enhances code clarity but also makes the UI design process more intuitive and efficient. + +- **Flexible and Modular Styling**: Through its compositional approach, Mix allows for the creation of complex styles from simple, reusable elements. This promotes modularity and flexibility, making UI development faster and more scalable. + +- **Enhanced Custom Widget Support**: Addressing the limitations of ThemeData, Mix ensures that custom widgets receive the same level of styling support as standard Flutter widgets, maintaining a unified aesthetic throughout the application. + +### Key Features + +#### Powerful Style Semantics + +Mix's compositional approach allows for the creation of complex styles from simple, reusable elements. This promotes modularity and flexibility, making UI development faster and more scalable. + +#### First-Class Variant Support + +As a first-class feature, Variants in Mix enable the design of flexible and composable widget styling. They can be applied both conditionally and responsively for dynamic UI adaptation. + +#### Design Tokens & Theming + +Inspired by constraint-based design principles projects like [Theme UI](https://theme-ui.com/), and [Styled System](https://github.com/styled-system/styled-system), Mix's theming system allows for definition of style properties that can be used across any widget. This ensures consistent styling across the entire application. + +#### Utility-First + +Mix style attributes consist of simple and reusable functions, allowing for complete control over the styling API while also facilitating easy customization and extension of its API + +#### Developer experience + +Mix is designed to optimize developer experience, offering an intuitive, efficient, and flexible framework for Flutter UI design, significantly enhancing productivity and creativity. diff --git a/website/pages/docs/concepts/utilities.mdx b/website/pages/docs/introduction/utility-first.mdx similarity index 61% rename from website/pages/docs/concepts/utilities.mdx rename to website/pages/docs/introduction/utility-first.mdx index 0c7281244..7c8f7ed45 100644 --- a/website/pages/docs/concepts/utilities.mdx +++ b/website/pages/docs/introduction/utility-first.mdx @@ -4,15 +4,19 @@ title: "Utilities Fundamentals" import { Callout } from "nextra-theme-docs"; -# Utilities Fundamentals +# Utility-First Approach -Mix Utilities are essential tools for effortlessly styling Flutter widgets. They provide a streamlined and semantic approach to defining and applying style attributes, offering an intuitive and efficient styling experience. Designed as flexible classes that mimic method functionalities, Mix Utilities enable precise and granular control over widget aesthetics, enhancing both the functionality and elegance of your UI designs. +Mix Utilities are essential for efficient and intuitive styling. This functional approach not only enhances the consistency of UI designs but also ensures a more intuitive styling process. -## Purpose of Utilities +## Key Concept -- Semantic Consistency: Apply styles to widgets in a way that's both meaningful and easy to understand. -- Increased Efficiency: Simplify your code and increase maintenance, allowing for faster and more streamlined development. -- Enhanced Control: Gain more control over styling, composability, and integration of design tokens. +The Utility-First Approach focuses on crafting small, reusable style components like color variations, borders, radii, and spacing. These components can be seamlessly combined to form complex styles. This method encourages a modular approach to UI development, significantly reducing code duplication and enhancing flexibility. + +## Purpose & Benefits + +- **Semantic Consistency**: Facilitates meaningful and easily understandable styling for widgets. +- **Increased Efficiency**: Streamlines development by simplifying code and improving maintainability. +- **Enhanced Control**: Offers greater command over styling, enabling better composability and integration of design elements. ## Descriptive Styling @@ -29,7 +33,9 @@ final style = Style( ## Intuitive API design -A utility is a class that mimics the functionality of a method. This allows you to use utilities in a way that feels natural and intuitive. As there are many ways to use an utility to achieve the same result, normally they are done for different purposes, but they all achieve the same result, and you can use the one that makes more sense for you. +A utility is a class that mimics the functionality of a method. This allows you to use utilities in a way that feels natural and intuitive. + +As there are many ways to use an utility to achieve the same result, normally they are done for different purposes, but they all achieve the same result, and you can use the one that makes more sense for you. ```dart // Chaining style is the most common way to use utilities. diff --git a/website/pages/docs/overview/concepts.mdx b/website/pages/docs/overview/concepts.mdx deleted file mode 100644 index 8bee813a5..000000000 --- a/website/pages/docs/overview/concepts.mdx +++ /dev/null @@ -1,10 +0,0 @@ -# Concepts - -- Attributes -- Directives -- Variant -- Context Variant -- Tokens -- Refs -- Decorator -- Dtos diff --git a/website/pages/docs/overview/introduction.mdx b/website/pages/docs/overview/introduction.mdx deleted file mode 100644 index e1b46d8c1..000000000 --- a/website/pages/docs/overview/introduction.mdx +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: "Introduction" ---- - -Run the following command in the root of your project: - -``` -flutter pub add mix -``` - -Import it everywhere you use it: - -```dart -import 'package:mix/mix.dart'; -``` diff --git a/website/pages/docs/overview/overview.mdx b/website/pages/docs/overview/overview.mdx deleted file mode 100644 index 07dd0c5c7..000000000 --- a/website/pages/docs/overview/overview.mdx +++ /dev/null @@ -1 +0,0 @@ -# Overview diff --git a/website/pages/docs/overview/why-mix.mdx b/website/pages/docs/overview/why-mix.mdx deleted file mode 100644 index 074873218..000000000 --- a/website/pages/docs/overview/why-mix.mdx +++ /dev/null @@ -1,100 +0,0 @@ ---- -id: why-mix -title: "Why Mix?" ---- - -## With and without Mix - -Mix provides a lot of different benefits on how you can define and organize your design tokens, and no documentation would be complete without a syntax comparison between **Mix vs. Without Mix**. - -Let's go ahead and take a look at the code. Don't worry about understanding each line, the docs will go into more detail about each item. - -### With Mix - -```dart -class CustomMixWidget extends StatelessWidget { - const CustomMixWidget({Key? key}) : super(key: key); - - @override - Widget build(BuildContext context) { - final style = Style( - height(100), - animated(), - marginY(10), - elevation(10), - borderRadius(10), - backgroundColor(MaterialTokens.colorScheme.primary), - text.style($button), - text.style(color: $onPrimary), - onHover( - elevation(2), - padding(20), - backgroundColor($secondary), - text.style(color: $onSecondary), - ), - ); - return Box( - style: style, - child: const TextMix('Custom Widget'), - ); - } -} -``` - -### Without Mix - -```dart -class CustomWidget extends StatefulWidget { - const CustomWidget({ - Key? key, - }) : super(key: key); - - @override - _CustomWidgetState createState() => _CustomWidgetState(); -} - -class _CustomWidgetState extends State { - bool _isHover = false; - @override - void initState() { - super.initState(); - } - - @override - Widget build(BuildContext context) { - final colorScheme = Theme.of(context).colorScheme; - - return MouseRegion( - onEnter: (event) { - setState(() => _isHover = true); - }, - onExit: (event) { - setState(() => _isHover = false); - }, - child: Material( - elevation: _isHover ? 2 : 10, - child: AnimatedContainer( - curve: Curves.linear, - duration: const Duration(milliseconds: 100), - height: 100, - padding: - _isHover ? const EdgeInsets.all(20) : const EdgeInsets.all(0), - margin: const EdgeInsets.symmetric(vertical: 10), - decoration: BoxDecoration( - color: _isHover ? colorScheme.secondary : colorScheme.primary, - borderRadius: BorderRadius.circular(10), - ), - child: Text( - 'Custom Widget', - style: Theme.of(context).textTheme.button?.copyWith( - color: _isHover - ? colorScheme.onSecondary - : colorScheme.onPrimary, - ), - ), - ), - ), - ); - } -} -``` diff --git a/website/theme.config.tsx b/website/theme.config.tsx index c695d0fcf..e170b82ae 100644 --- a/website/theme.config.tsx +++ b/website/theme.config.tsx @@ -101,7 +101,7 @@ const themeConfig = { }, primaryHue: { light: 200, - dark: 251, + dark: 285, }, primarySaturation: { light: 50,