From c3dd2575eba9af2253557152442bd99bd6417a0d Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Tue, 3 Dec 2024 14:45:38 -0300 Subject: [PATCH 1/6] Create title_validation copy.yml --- .github/workflows/title_validation copy.yml | 42 +++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 .github/workflows/title_validation copy.yml diff --git a/.github/workflows/title_validation copy.yml b/.github/workflows/title_validation copy.yml new file mode 100644 index 000000000..ab66505fd --- /dev/null +++ b/.github/workflows/title_validation copy.yml @@ -0,0 +1,42 @@ +name: "Lint PR" + +on: push + +jobs: + production: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup flutter + uses: subosito/flutter-action@v2 + with: + channel: stable + + - name: Bootstrap App + shell: bash + run: | + flutter pub get + + - name: Bootstrap Widgetbook + working-directory: widgetbook + shell: bash + run: | + cd packages/remix/demo + flutter pub get + dart run build_runner build -d + + - name: Build Widgetbook + working-directory: widgetbook + shell: bash + run: | + cd packages/remix/demo + flutter build web + + - name: Install Widgetbook CLI + run: dart pub global activate widgetbook_cli + + - name: Upload Widgetbook + working-directory: widgetbook + run: widgetbook cloud build push --api-key ${{ secrets.WIDGETBOOK_API_KEY }} From 269eb2ea80d5d3760e031ca979147c25892f21f2 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Tue, 3 Dec 2024 14:46:48 -0300 Subject: [PATCH 2/6] widgetbook --- .github/workflows/{title_validation copy.yml => widgetbook.yml} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename .github/workflows/{title_validation copy.yml => widgetbook.yml} (98%) diff --git a/.github/workflows/title_validation copy.yml b/.github/workflows/widgetbook.yml similarity index 98% rename from .github/workflows/title_validation copy.yml rename to .github/workflows/widgetbook.yml index ab66505fd..d53b854ae 100644 --- a/.github/workflows/title_validation copy.yml +++ b/.github/workflows/widgetbook.yml @@ -1,4 +1,4 @@ -name: "Lint PR" +name: "Widgetbook" on: push From 0a7e66635b83d6fde6b5357290ab89d68098544a Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Tue, 3 Dec 2024 14:49:57 -0300 Subject: [PATCH 3/6] Update widgetbook.yml --- .github/workflows/widgetbook.yml | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/.github/workflows/widgetbook.yml b/.github/workflows/widgetbook.yml index d53b854ae..d348ced37 100644 --- a/.github/workflows/widgetbook.yml +++ b/.github/workflows/widgetbook.yml @@ -9,10 +9,26 @@ jobs: - name: Checkout uses: actions/checkout@v4 - - name: Setup flutter - uses: subosito/flutter-action@v2 + - name: Install FVM + shell: bash + run: | + curl -fsSL https://fvm.app/install.sh | bash + fvm use ${{ inputs.flutter-version }} --force + + - uses: kuhnroyal/flutter-fvm-config-action@v2 + id: fvm-config-action + + - uses: subosito/flutter-action@v2 with: - channel: stable + flutter-version: ${{ steps.fvm-config-action.outputs.FLUTTER_VERSION }} + channel: ${{ steps.fvm-config-action.outputs.FLUTTER_CHANNEL }} + + - name: Flutter version + shell: bash + run: flutter --version + + - name: Setup Melos + uses: bluefireteam/melos-action@v3 - name: Bootstrap App shell: bash From 9e78002f5c87aa20f2ee366606672ef3f5636363 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Tue, 3 Dec 2024 14:53:05 -0300 Subject: [PATCH 4/6] Update widgetbook.yml --- .github/workflows/widgetbook.yml | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/.github/workflows/widgetbook.yml b/.github/workflows/widgetbook.yml index d348ced37..fdc8382be 100644 --- a/.github/workflows/widgetbook.yml +++ b/.github/workflows/widgetbook.yml @@ -36,18 +36,16 @@ jobs: flutter pub get - name: Bootstrap Widgetbook - working-directory: widgetbook + working-directory: packages/remix/demo shell: bash run: | - cd packages/remix/demo flutter pub get dart run build_runner build -d - name: Build Widgetbook - working-directory: widgetbook + working-directory: packages/remix/demo shell: bash run: | - cd packages/remix/demo flutter build web - name: Install Widgetbook CLI From d47fbbaa10204d2699f77b198722c0c48d175177 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Tue, 3 Dec 2024 14:57:26 -0300 Subject: [PATCH 5/6] Update widgetbook.yml --- .github/workflows/widgetbook.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/widgetbook.yml b/.github/workflows/widgetbook.yml index fdc8382be..ddbc87ed4 100644 --- a/.github/workflows/widgetbook.yml +++ b/.github/workflows/widgetbook.yml @@ -52,5 +52,5 @@ jobs: run: dart pub global activate widgetbook_cli - name: Upload Widgetbook - working-directory: widgetbook + working-directory: packages/remix/demo run: widgetbook cloud build push --api-key ${{ secrets.WIDGETBOOK_API_KEY }} From 70111fc9fd40a5a0de196692de9d76a9102d0c0f Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62367544+tilucasoli@users.noreply.github.com> Date: Wed, 4 Dec 2024 09:51:05 -0300 Subject: [PATCH 6/6] docs: Add section for `TokenResolver` (#537) --- .../src/theme/tokens/breakpoints_token.dart | 4 +- .../mix/lib/src/theme/tokens/color_token.dart | 9 +++- .../lib/src/theme/tokens/radius_token.dart | 2 + .../src/theme/tokens/text_style_token.dart | 1 + website/pages/docs/guides/design-token.mdx | 54 +++++++++++++++++-- 5 files changed, 63 insertions(+), 7 deletions(-) diff --git a/packages/mix/lib/src/theme/tokens/breakpoints_token.dart b/packages/mix/lib/src/theme/tokens/breakpoints_token.dart index 22ea3d456..e596dab51 100644 --- a/packages/mix/lib/src/theme/tokens/breakpoints_token.dart +++ b/packages/mix/lib/src/theme/tokens/breakpoints_token.dart @@ -77,13 +77,13 @@ class BreakpointToken extends MixToken { } } -/// A resolver for breakpoint tokens. +/// {@macro mix.token.resolver} @immutable class BreakpointResolver extends Breakpoint with WithTokenResolver { @override final BuildContextResolver resolve; - /// Creates a new breakpoint resolver with the given [resolve] function. + /// {@macro mix.token.resolver} const BreakpointResolver(this.resolve); } diff --git a/packages/mix/lib/src/theme/tokens/color_token.dart b/packages/mix/lib/src/theme/tokens/color_token.dart index 18a424d5b..b22368195 100644 --- a/packages/mix/lib/src/theme/tokens/color_token.dart +++ b/packages/mix/lib/src/theme/tokens/color_token.dart @@ -102,15 +102,20 @@ class ColorSwatchToken extends ColorToken { } } -/// A color resolver that allows dynamic resolution of a color value. +/// {@template mix.token.resolver} +/// A resolver that allows dynamic resolution of a token value. /// -/// This is useful when the color value is dependent on the current [BuildContext], +/// This is useful when the token value is dependent on the current [BuildContext], /// and cannot be resolved statically. +/// +/// For more information, see [Dynamic Themes](https://www.fluttermix.com/docs/guides/design-token#dynamic-themes). +/// {@endtemplate} class ColorResolver extends Color with WithTokenResolver { /// The function used to resolve the color value dynamically. @override final BuildContextResolver resolve; + /// {@macro mix.token.resolver} const ColorResolver(this.resolve) : super(0); } diff --git a/packages/mix/lib/src/theme/tokens/radius_token.dart b/packages/mix/lib/src/theme/tokens/radius_token.dart index a77c271fa..95bec7afa 100644 --- a/packages/mix/lib/src/theme/tokens/radius_token.dart +++ b/packages/mix/lib/src/theme/tokens/radius_token.dart @@ -26,11 +26,13 @@ class RadiusToken extends MixToken { } } +/// {@macro mix.token.resolver} @immutable class RadiusResolver extends Radius with WithTokenResolver { @override final BuildContextResolver resolve; + /// {@macro mix.token.resolver} const RadiusResolver(this.resolve) : super.circular(0); } diff --git a/packages/mix/lib/src/theme/tokens/text_style_token.dart b/packages/mix/lib/src/theme/tokens/text_style_token.dart index 743fa045e..febaa8ef4 100644 --- a/packages/mix/lib/src/theme/tokens/text_style_token.dart +++ b/packages/mix/lib/src/theme/tokens/text_style_token.dart @@ -26,6 +26,7 @@ class TextStyleToken extends MixToken { } } +/// {@macro mix.token.resolver} @immutable class TextStyleResolver extends TextStyle with WithTokenResolver { @override diff --git a/website/pages/docs/guides/design-token.mdx b/website/pages/docs/guides/design-token.mdx index 44cc8d602..ad50af9e6 100644 --- a/website/pages/docs/guides/design-token.mdx +++ b/website/pages/docs/guides/design-token.mdx @@ -43,11 +43,38 @@ MixTheme( `MixThemeData` is a class that defines the values for the design tokens that will be used throughout the application. It has five properties related to Design Tokens: `colors`, `textStyles`, `spaces`, `radii`, and `breakpoints`. Each property is a map that contains the tokens and their values. +```dart {1-4} +const primary = ColorToken('primary'); +const h1 = TextStyleToken('h1'); +const radiusMedium = RadiusToken('radiusMedium'); +const spaceMedium = SpaceToken('spaceMedium'); + +final docTheme = MixThemeData( + colors: { + primary: Colors.lightBlue, + }, + textStyles: { + h1: const TextStyle( + fontSize: 24, + fontWeight: FontWeight.bold, + ), + }, + radii: { + radiusMedium: const Radius.circular(10), + }, + spaces: { + spaceMedium: 10, + }, +); +``` + Also, `MixThemeData` has an additional property called `defaultOrderOfModifiers`, which is used to override the default order of modifiers. Therefore, if you prefer to use a different order of modifiers, you can set it in the `defaultOrderOfModifiers` instead of using the `orderOfModifiers` property in each `StyledWidget`. To set your own order of modifiers, you just need to pass a list of types that extends `WidgetModifierSpec`. For instance: -```dart {3-5} -final overrideOrderTheme = MixThemeData( - defaultOrderOfModifiers: [ +```dart +final docTheme = MixThemeData( + + // ... + defaultOrderOfModifiers: const [ SizedBoxModifierSpec, ClipRectModifierSpec, TransformModifierSpec, @@ -55,6 +82,27 @@ final overrideOrderTheme = MixThemeData( ); ``` +### Dynamic Themes + +Mix allows you to define dynamic themes, which means that the values of the design tokens can be resolved dynamically using a [BuildContext](https://api.flutter.dev/flutter/widgets/BuildContext-class.html). To do this, you need to use the `ColorResolver`, `TextStyleResolver`, `RadiusResolver` and `BreakpointResolver` classes. These classes are used to resolve the values of the design tokens based on the current `BuildContext`. + +As an example, let's say you want to define a `surface` color token that changes based on the platform brightness. You can do this by using the `ColorResolver` class: + +```dart +final surface = ColorToken('surface'); + +final docTheme = MixThemeData( + colors: { + surface: ColorResolver((context) { + if (MediaQuery.of(context).platformBrightness == Brightness.dark) { + return Colors.black; + } + return Colors.white; + }), + }, +); +``` + ## 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: