Merge pull request #278 from conceptadev/fix/doc-updates

Grammar corrections in the documentation

website/pages/docs/guides/_meta.json

@@ -4,6 +4,5 @@
   "widget-modifiers": "Widget Modifiers",
   "design-token": "Design Tokens",
   "animations": "Animations",
-  "directives": "Directives",
-  "supporting-new-widgets": "Supporting new Widgets"
+  "directives": "Directives"
 }

website/pages/docs/guides/animations.mdx

@@ -3,9 +3,9 @@ id: animations
 title: "Animations"
 ---
 
-# How to Create Animations Using Mix
+# Animations
 
-In this guide, we will learn how to create animations using Mix. First, we need to understand how Mix styles work. All stylizations begin with the `Style` class.
+In this guide, we will learn how animations work in Mix. Firstly, we need to understand how Mix styles work. All stylizations begin with the `Style` class.
 
 ## Style Class
 
@@ -55,7 +55,7 @@ PressableBox(
 
 ## Simplifying Animation with `animate()`
 
-The `Style` class provides a method `animate()` that simplifies the creation of animations by returning an `AnimatedStyle` from the current `Style` with specified duration and curve. This method allows for more concise and readable code when animating widgets.
+The `Style` class provides a method `animate()` that simplifies the creation of animations by returning an `AnimatedStyle` from the current `Style` with a specified duration and curve. This method allows for more concise and readable code when animating widgets.
 
 ### Example of `animate()`
 
@@ -80,7 +80,7 @@ PressableBox(
 );
 ```
 
-Note that, different from the `Style` class, the `AnimatedStyle` class receives, besides the style, the `duration` and `curve` parameters. The `duration` parameter specifies the time the animation will take to complete, and the `curve` parameter determines the path the animation will follow.
+Note that, unlike the `Style` class, the `AnimatedStyle` class receives, in addition to the style, the `duration` and `curve` parameters. The `duration` parameter specifies the time the animation will take to complete, and the `curve` parameter determines the path the animation will follow.
 
 ## Start Point and End Point
 
@@ -135,4 +135,4 @@ PressableBox(
     ),
   ),
 );
-```
+```

website/pages/docs/guides/design-token.mdx

@@ -13,7 +13,7 @@ Design tokens are the core of any design system. They are the smallest pieces of
 
 ## Getting Started
 
-Mix has a built-in support for design tokens. It naturally integrates with five types of them: `color`, `textStyle`, `space`, `radius`, and `breakpoint`. These tokens are used to define the visual properties in key-value pairs, where the key is the token name and the value is the actual value of the token.
+Mix has built-in support for design tokens. It naturally integrates with five types of them: `color`, `textStyle`, `space`, `radius`, and `breakpoint`. These tokens are used to define the visual properties in key-value pairs, where the key is the token name and the value is the actual value of the token.
 
 ```dart {1,5}
 final primary = ColorToken('primary');
@@ -30,7 +30,7 @@ final docTheme = MixThemeData(
 
 ## MixTheme and MixThemeData
 
-As the same way we use `Theme` and `ThemeData` in Flutter, Mix has `MixTheme` and `MixThemeData`. `MixTheme` is a widget that wraps the application and provides the design tokens to all its child widgets. `MixThemeData` is a class that defines the values for the design tokens that will be used throughout the application.
+In the same way we use `Theme` and `ThemeData` in Flutter, Mix has `MixTheme` and `MixThemeData`. `MixTheme` is a widget that wraps the application and provides the design tokens to all its child widgets. `MixThemeData` is a class that defines the values for the design tokens that will be used throughout the application.
 
 ```dart {1,5}
 MixTheme(
@@ -41,7 +41,7 @@ MixTheme(
 
 ## Applying design tokens
 
-After defining the design tokens, you can use them in your application to style your widgets. All attributes that accept a token as a value have a `ref` method that allows you to access the token value. for instance:
+After defining the design tokens, you can use them in your application to style your widgets. All attributes that accept a token as a value have a `ref` method that allows you to access the token value. For instance:
 
 ```dart
 $box.color.ref(ColorToken)
@@ -65,7 +65,7 @@ Box(
 );
 ```
 
-Mix's tokens also are flexible enought to be used in Flutter's widgets, you just need to use the `resolve` method to get the token value.
+Mix's tokens are also flexible enough to be used in Flutter's widgets, you just need to use the `resolve` method to get the token value.
 
 ```dart
 Container(
@@ -77,4 +77,4 @@ Container(
 
 ## Next Steps
 
-Now that you know how design tokens work in Mix, you can start defining your own tokens and using them in your application. For a step by step tutorial on how to theming your app with Mix, check the [Theming](/docs/tutorials/theming) guide.
+Now that you know how design tokens work in Mix, you can start defining your own tokens and using them in your application. For a step-by-step tutorial on how to theme your app with Mix, check the [Theming](/docs/tutorials/theming) guide.

website/pages/docs/guides/directives.mdx

@@ -4,7 +4,7 @@ Directives in Mix are specialized attributes that define transformations to be a
 
 ## Example: Text Directives
 
-A prime example is the TextDirective, which allows for text case transformations in `StyledText` widgets.
+A prime example is the `TextDirective`, which allows for text case transformations in `StyledText` widgets.
 
 ```dart {4}
 const StyledText(
@@ -15,16 +15,16 @@ const StyledText(
 ),
 ```
 
-n this example, the text "Hello World" is transformed to "HELLO WORLD" using the upperCase() directive.
+In this example, the text "Hello World" is transformed to "HELLO WORLD" using the `upperCase()` directive.
 
-### Directives catalog
+### 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:
+Mix provides a range of directives, allowing for a variety of transformations to be applied to widgets. The following is a list of all available directives:
 
 #### Text Directives
 
 - `$text.capitalize()`: Capitalizes the first letter of each word.
 - `$text.upperCase()`: Converts all characters to uppercase.
 - `$text.lowerCase()`: Converts all characters to lowercase.
 - `$text.titleCase()`: Transforms the first letter of each word in a sentence to uppercase.
-- `$text.sentenceCase()`: Transforms the first letter of the first word in a sentence to uppercase.
+- `$text.sentenceCase()`: Transforms the first letter of the first word in a sentence to uppercase.

website/pages/docs/guides/styling.mdx

@@ -58,7 +58,7 @@ final newStyle = baseStyle.add(
 );
 ```
 
-In this example, the `newStyle` inherits all attributes from the `baseStyle`, and add `border.width` and `border.color` attributes to it.
+In this example, the `newStyle` inherits all attributes from the `baseStyle`, and adds `border.width` and `border.color` attributes to it.
 
 #### **Overriding Attributes**
 

website/pages/docs/guides/variants.mdx

@@ -7,7 +7,7 @@ import { Callout } from "nextra-theme-docs";
 
 # Variants
 
-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
+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.
 
 ## Key Concepts
 
@@ -29,7 +29,7 @@ const outlined = Variant('outlined');
 
 ### Using a Variant in a Style
 
-To use a variant in a style, you can call it as a function on a `Style` passing the attributes.
+To use a variant in a style, you can call it as a function on a `Style`, passing the attributes.
 
 ```dart {1, 8-12}
 const outlined = Variant('outlined');
@@ -58,7 +58,6 @@ final style = Style(
   $box.padding(20),
   $box.borderRadius(10),
   $box.color.black(),
-
   $text.style.color.white(),
   outlined(
     $box.color.transparent(),
@@ -102,13 +101,12 @@ class OnDarkVariant extends ContextVariant {
 ```
 
 <Callout type="info">
-  Defining the name of a context variant with `on` is a convention, but not a
-  requirement. That helps identify that this is a `ContextVariant`.
+  Defining the name of a context variant with `on` is a convention, but not a requirement. This helps identify that this is a `ContextVariant`.
 </Callout>
 
 ### Using a Context Variant in a Style
 
-To use a context variant in a style, you can call it as a function on a `Style` passing the attributes.
+To use a context variant in a style, you can call it as a function on a `Style`, passing the attributes.
 
 ```dart {6-9}
 final style = Style(
@@ -123,7 +121,7 @@ final style = Style(
 );
 ```
 
-When the `$on.dark` variant is applied, it will override the `$box.color` and `$text.style.color` attributes. When this happens the style will be equivalent to the following:
+When the `$on.dark` variant is applied, it will override the `$box.color` and `$text.style.color` attributes. When this happens, the style will be equivalent to the following:
 
 ```dart highlight="2-4"
 final style = Style(
@@ -136,7 +134,7 @@ final style = Style(
 
 ### Prioritization
 
-When applying multiple variants to a `Style`, the last variant will always have priority over the previous ones. However, you can use the `priority` parameter to change the priority of a `ContextVariant`, then the highest priority will be last. The `priority` is a required parameter for `ContextVariant` that can be set when defining the variant. look at the following example:
+When applying multiple variants to a `Style`, the last variant will always have priority over the previous ones. However, you can use the `priority` parameter to change the priority of a `ContextVariant`. Then, the highest priority will be last. The `priority` is a required parameter for `ContextVariant` that can be set when defining the variant. Look at the following example:
 
 ```dart
 class OnCustomVariant extends ContextVariant {
@@ -149,7 +147,7 @@ class OnCustomVariant extends ContextVariant {
 }
 ```
 
-The `priority` parameter can be set to `VariantPriority.low`, `VariantPriority.medium`, `VariantPriority.high` or `VariantPriority.highest`. A good example of this is when you are using a variants that involves some kind of gesture, like `onHover` and `onPress`. In this case, those variants will always have the highest priority. It happens because Mix needs to make sure that the defined styles will be applied correctly.
+The `priority` parameter can be set to `VariantPriority.low`, `VariantPriority.medium`, `VariantPriority.high`, or `VariantPriority.highest`. A good example of this is when you are using variants that involve some kind of gesture, like `onHover` and `onPress`. In this case, those variants will always have the highest priority. This happens because Mix needs to make sure that the defined styles will be applied correctly.
 
 ## Conditional operators
 
@@ -170,7 +168,7 @@ final style = Style(
 );
 ```
 
-When the `$on.small` variant or `$on.medium` variant is applied, the resulted `Style` will be equivalent to the following:
+When the `$on.small` variant or `$on.medium` variant is applied, the resulting `Style` will be equivalent to the following:
 
 ```dart highlight="2-4"
 Style(
@@ -196,7 +194,7 @@ final style = Style(
 );
 ```
 
-In this scenery only when the onHover variant and onPress are applied, the resulted `Style` will be equivalent to the following:
+In this scenario, only when the onHover variant and onPress are applied, the resulting `Style` will be equivalent to the following:
 
 ```dart highlight="2-4"
 Style(
@@ -221,14 +219,12 @@ final style = Style(
 ```
 
 <Callout type="info">
-  The operator that has preference is the first readed operator, so in this case
-  the `onHover` variant will be applied first, then the `onPress` and finally
-  the `$on.dark` variant.
+  The operator that has preference is the first read operator, so in this case, the `onHover` variant will be applied first, then the `onPress`, and finally the `$on.dark` variant.
 </Callout>
 
 To understand how this works, let's see the following example:
 
-1. When the `onHover` variant is applied, the resulted `Style` will be equivalent to:
+1. When the `onHover` variant is applied, the resulting `Style` will be equivalent to:
 
 ```dart
 Style(
@@ -300,4 +296,4 @@ For the following variants, the widget must be wrapped in a `Pressable` widget o
 - **`$on.longPress()`:** Applies styles when the widget is long pressed.
 - **`$on.focus()`:** Applies styles when the widget is focused.
 - **`$on.disabled()`:** Applies styles when the widget is disabled.
-- **`$on.enabled()`:** Applies styles when the widget is enabled.
+- **`$on.enabled()`:** Applies styles when the widget is enabled.

website/pages/docs/guides/widget-modifiers.mdx

@@ -61,7 +61,7 @@ You can then create an extension of the
 
 ### Crafting a modifier utility
 
-To simplify modifier usage, you can design a utility function that automatically creates the modifier for you.
+To simplify modifier usage, you can design an utility function that automatically creates the modifier for you.
 
 ```dart
 ScaleModifier scale(double scale, {Key? key}) => ScaleModifier(scale, key: key);
@@ -232,10 +232,10 @@ IntrinsicHeight( // or IntrinsicWidth
 
 **Helper methods**
 
-- `$with.show()`: Wraps the **Box** with an **Visibility** widget that is visible
-- `$with.hide()`: Wraps the **Box** with an **Visibility** widget that is invisible
-- `$with.visibility.on()`: Wraps the **Box** with an **Visibility** widget that is visible
-- `$with.visibility.off()`: Wraps the **`**Box**`** with an **`**Visibility**`** widget that is invisible
+- `$with.show()`: Wraps the **Box** with a **Visibility** widget that is visible
+- `$with.hide()`: Wraps the **Box** with a **Visibility** widget that is invisible
+- `$with.visibility.on()`: Wraps the **Box** with a **Visibility** widget that is visible
+- `$with.visibility.off()`: Wraps the **`**Box**`** with a **`**Visibility**`** widget that is invisible
 
 ### Flexible
 

website/pages/docs/overview/best-practices.mdx

@@ -9,14 +9,14 @@ import { FileTree } from "nextra/components";
 
 # Best Practices
 
-As you start to build your app with Mix, you'll want to follow some best practices to ensure your code is aligned with the framework's conventions.
+As you start to build your app with Mix, you'll want to follow some best practices to ensure your code aligns with the framework's conventions.
 
 <Callout type="info">
   Guidelines in this guide are crafted for scalability and maintainability in
   Mix, and will evolve with community insights.
 </Callout>
 
-To get started, We'll create a button based on the Shadcn's [Button](https://ui.shadcn.com/docs/components/button) component. We'll call it a `CustomButton`.
+To get started, we'll create a button based on Shadcn's [Button](https://ui.shadcn.com/docs/components/button) component. We'll call it `CustomButton`.
 
 ## File Structure
 
@@ -76,7 +76,7 @@ class CustomButtonType extends Variant {
   const CustomButtonType._(super.name);
 
   static const primary = CustomButtonType._('custom.button.primary');
-  static const destructive = CustomButtonType._('custom.button.desctructive');
+  static const destructive = CustomButtonType._('custom.button.destructive');
   static const link = CustomButtonType._('custom.button.link');
 }
 
@@ -90,7 +90,7 @@ class CustomButtonSize extends Variant {
 
 By defining variants, we create a set of predefined styles that can be easily applied to the `CustomButton`. This approach offers several advantages:
 
-- **Consistency**: Variants allows you to maintain a simple API to style your component. You can easily apply a set of predefined styles to your component, ensuring consistency across your application.
+- **Consistency**: Variants allow you to maintain a simple API to style your component. You can easily apply a set of predefined styles to your component, ensuring consistency across your application.
 - **Flexibility**: They allow for customization without altering the core component logic. You can introduce new styles or modify existing ones without impacting the button's basic functionality.
 - **Ease of Use**: With variants, the component's API becomes more intuitive and easier to use, as developers can pick from a set of predefined options.
 
@@ -210,4 +210,4 @@ class CustomButton extends StatelessWidget {
 }
 ```
 
-Congratulations! You are now ready to use your `CustomButton` component, fully aligned with the Mix framework's conventions.
+Congratulations! You are now ready to use your `CustomButton` component, fully aligned with the Mix framework's conventions.

website/pages/docs/overview/comparison.mdx

@@ -2,18 +2,18 @@
 title: "A Comparative Look"
 ---
 
-## A Comparative Look of Mix
+## A Comparative Look at 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.
+- **Leveraging ThemeData for Styling**: This illustrates how Mix uses values from ThemeData, ensuring consistency and ease in styling widgets with the existing Material theme.
+- **Flexible Overriding of Styles**: This demonstrates the ability to override specific TextStyle and BoxDecoration properties, showcasing Mix's flexibility and adaptability in customization.
+- **Simplified Interaction-Based Styling**: This highlights Mix’s capability to handle hover states effortlessly, allowing for dynamic styling changes in response to user interactions.
+- **Inherited Text Styles**: This shows how text styles can be inherited within the same style context in Mix, eliminating the need for repetitive style declarations.
 
 #### With Mix
 
@@ -107,4 +107,4 @@ class _CustomWidgetState extends State<CustomWidget> {
 
 ```
 
-Without Mix, the code is more verbose, especially in managing the hover state and styling. The separation between logic and presentation is less clear.
+Without Mix, the code is more verbose, especially in managing the hover state and styling. The separation between logic and presentation is less clear.

website/pages/docs/overview/index.mdx

@@ -107,4 +107,4 @@ $box.padding.top(20); /// Padding 20 on top
 $box.padding.horizontal(20); /// Padding 20 on left and right
 ```
 
-Learn more about [utilities](/docs/overview/utility-first)
+Learn more about [utilities](/docs/overview/utility-first)