From e9caa8a4f8b92890b203d7f5a6f36351f4f62c22 Mon Sep 17 00:00:00 2001 From: Rydmike <39990307+rydmike@users.noreply.github.com> Date: Mon, 23 Sep 2024 02:25:23 +0300 Subject: [PATCH] Version 3.4.0 --- CHANGELOG.md | 30 +- README.md | 74 ++- example/lib/core/constants/app_data.dart | 4 +- .../views/universal/showcase_material.dart | 94 +-- example/lib/home/views/pages/home_page.dart | 159 +++-- example/pubspec.lock | 2 +- example/pubspec.yaml | 2 +- lib/src/flex/flex_scheme_variant.dart | 6 +- lib/src/flex/flex_seed_scheme.dart | 90 ++- lib/src/flex/flex_tones.dart | 30 +- .../dynamiccolor/material_dynamic_colors.dart | 3 - lib/src/mcu/scheme/scheme_content.dart | 9 +- lib/src/mcu/scheme/scheme_fidelity.dart | 9 +- pubspec.yaml | 2 +- test/flex_seed_scheme_test.dart | 597 +++++++++++++++++- 15 files changed, 901 insertions(+), 210 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5518b9e..b9e2b54 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,29 +4,27 @@ All notable changes to the **FlexSeedScheme** (FSS) package are documented here. ## 3.4.0 -**Sep 16, 2024** - -**DRAFT NOT YET PUBLISHED** - -**TODO** -* Lots of new tests. No tests are broken, but coverage is down to 98% due to new not yet tested features. -* Review expressive On Container usage. Missing somewhere? -* Fidelity and content with monochrome seed is bad. Fix? +**Sep 23, 2024** **CHANGE** -* The parameter `useExpressiveOnContainerColors` in `SeedColorScheme.fromSeeds` now impacts both scheme `variant`s regardless of if its `isFlutterScheme` is true or false. - * For `tones` based variants, when using a built-in `FlexTones` or even a custom `tones`, it is no longer necessary to use the `FlexTones` modifier `.expressiveOnContainer()` on the used `tones` to get a seeded color scheme with expressive on container tones in light mode. - * The `FlexTones` based seeded color schemes the modifier is still used, but it is applied internally when the flag `useExpressiveOnContainerColors` is set t true. - * This makes this flag consistent and applicable to all seed generated schemes, regardless of if it is based on `DynamicSchemeVariant` or `FlexTones`. +* The parameter `useExpressiveOnContainerColors` in `SeedColorScheme.fromSeeds` now works with a scheme `variant` regardless of if it has `isFlutterScheme` set to true or false. Meaning it impacts both MCU `DynamicSchemeVariant` and FSS `FlexTones` based scheme variants. + + * For `FlexTones` based variants, when using a built-in `FlexTones` or even a custom one, it is no longer necessary to use the `FlexTones` modifier `.expressiveOnContainer()` on the used `tones` to get a seeded color scheme with expressive on container tones in light mode. + * The `FlexTones` based modifier `.expressiveOnContainer()` is still used, but it is applied internally when the flag `useExpressiveOnContainerColors` is set to true. + * The `useExpressiveOnContainerColors` only applies in light mode to on container tones that are equal to 10, other tones are considered custom on purpose and are not changed. This is in-line with that the MCU `DynamicSchemeVariant`s that did not use tone 30 before as on container color in light mode, like Fidelity, Monochrome and Content were not affected by this change in MCU 0.12.0. In the same manner, this flag no longer changes `FlexTones` based schemes that have on container tones that are not 10. This applies to some on container colors in UltraContrast, Candy Pop and Chroma predefined `FlexTones`. + * This change makes this flag consistent and applicable to all seed generated schemes, regardless of if it is based on `DynamicSchemeVariant`, built-in `FlexTones` or even custom `FlexTones` configurations. + * For MCU seed generated schemes, `useExpressiveOnContainerColors` only has any impact when contrast level is at the default value (0), normal contrast. + * When using FFS seed generated schemes with `useExpressiveOnContainerColors` set to true, the modifier is applied before any `FlexTones` modifiers. Using tones modifiers, like e.g. `onMainsUseBW()` will thus as expected, override this setting and set on container colors to tone 0 or tone 100, depending on the container colors brightness. **NEW** -* A new `bool` parameter, `respectMonochromeSeed`, in `SeedColorScheme.fromSeeds` can now be used to make generated schemes that respect a monochrome seed color as input. +* A new `bool` parameter, `respectMonochromeSeed` in `SeedColorScheme.fromSeeds` can now be used to make seed generated ColorSchemes that work as expected if a monochrome color is used as seed color input. * When set to `true`, any monochrome RGB input value will result in the creation of a greyscale tonal palette for the palette using the monochrome seed color. An RGB monochrome value is one where Red, Green and Blue values are all equal. - * Previously in FSS and in Material Color Utilities (MCU), and thus Flutter's default, using a monochrome seed value or white, results in a tonal palette with cyan color tones. A black input results in red like color tones. This is not very intuitive and not really expected by most users of monochrome seed colors. + * Previously in FSS and in Material Color Utilities (MCU) and thus still as default in Flutter `ColorScheme.fromSeed`, using a monochrome seed color value or white, resulted in a tonal palette with cyan color tones. A black input resulted in red like color tones. This is not very intuitive and not really expected when using monochrome seed colors. * FSS still defaults to setting `respectMonochromeSeed` to `false`, to not break any existing code that may rely on the old behavior. - * Prefer using `respectMonochromeSeed` set to `true`, to get more logical seed results when using monochrome colors or white and black as seed colors. + * Prefer setting `respectMonochromeSeed` to `true`, to get more logical seed results when using monochrome seed colors or white and black as seed colors. + * **NOTE:** When using `respectMonochromeSeed` with `DynamicSchemeVariant` variants `fidelity` or `content`, for some monochrome input colors they produce `primaryContainer` and `onPrimaryContainer` as well as `tertiaryContainer` and `onTertiaryContainer` color pairs, with low contrast. Consider using some other scheme variants with monochrome seed colors. All others work well with any monochrome seed color. This is just how the MCU `DynamicScheme`s `SchemeContent` and `SchemeFidelity` are defined in MCU. They also produce fairly low contrast for these color pairs with very dark seed colors. This behavior with MCU's `SchemeContent` and `SchemeFidelity` could be fixed in FlexSeedScheme's internal MCU fork, but we want to keep the result of these schemes consistent with MCU. ## 3.3.0 @@ -35,7 +33,7 @@ All notable changes to the **FlexSeedScheme** (FSS) package are documented here. **NEW** * Exposed `DynamicColor`, `MaterialDynamicColors` and `Scheme` from the underlying forked Material Color Utilities (MCU) library. -* Undeprecated `Scheme`, that original MCU deprecated. It does not conflict with the new `DynamicSchemes` that replaced it, thus in the internal MCU fork, we do not need to deprecate it and can offer it for legacy access to old `ColorScheme.fromSeed` scheme result in use before Flutter 3.22.0. +* Un-deprecated `Scheme`, that original MCU deprecated. It does not conflict with the new `DynamicSchemes` that replaced it, thus in the internal MCU fork, we do not need to deprecate it and can offer it for legacy access to old `ColorScheme.fromSeed` scheme result in use before Flutter 3.22.0. * Internally FlexSeedScheme does not use `Scheme` for its own legacy version of the same scheme, it uses its FlexTones based setup instead, but produces the same color values. We still recommend using its tones `FlexTones.material3Legacy` version instead of `Scheme` for a legacy Material-3 seed generated `ColorScheme`. * This API is provided for legacy access to the old MCU `Scheme` style and API, that was used in Flutter 3.19.0 and earlier in its `ColorScheme.fromSeed` constructor back then. If you want to recreate its exact older internal API algorithm, you can now do so using `Scheme` that it used to use before Flutter 3.22.0. * This revived `Scheme` class was also complemented with the new `ColorScheme` colors added in Flutter 3.22.0, but it uses legacy Flutter 3.19 and earlier tone mappings for all colors that existed then. Except for dark mode `onErrorContainer` that it corrected from 80 to 90. It was always a bug in Flutter version 3.19 and earlier that tone 80 was used. diff --git a/README.md b/README.md index 4ead729..dc16c33 100644 --- a/README.md +++ b/README.md @@ -109,7 +109,7 @@ If the variant `FlexSchemeVariant` style is one that is also provided by Flutter The `FlexSchemeVariant` also include the predefined `FlexTone` based variants. You can use the `variant` option as a way to select `ColorScheme` seed generation variant that is based on both the in Flutter 3.22.2 new SDK `dynamicSchemeVariant` and the FlexSeedScheme predefined FlexTones `tones` based seed generation options. -Starting with FlexSeedSeed scheme version 3.0.0, when using `SeedColorScheme.fromSeeds` with a `variant` that is based on MCU and Flutter SDK `DynamicSchemeVariant`, you can use all the same seed key as with `FlexTones` based schemes using the `tones` property. You are no longer limited to using only your primary or main brand color as seed color, even when using the Flutter SDK `DynamicSchemeVariant` based variants. In previous versions of FlexSeedScheme, you could only use a single seed color with the `dynamicSchemeVariant` based variants. FSS uses a custom fork of MCU to enable this feature. +Starting with FlexSeedSeed scheme version 3.0.0, when using `SeedColorScheme.fromSeeds` with a `variant` that is based on MCU and Flutter SDK `DynamicSchemeVariant`, you can use all the same seed keys as with `FlexTones` based schemes using the `tones` property. You are no longer limited to using only your primary or main brand color as seed color, even when using the Flutter SDK `DynamicSchemeVariant` based variants. In versions before 3.0.0 of FlexSeedScheme, you could only use a single seed color with the `dynamicSchemeVariant` based variants. FSS uses a custom fork of MCU to enable this feature. ```dart // Make a light ColorScheme from a seeds using variant style fidelity. @@ -175,7 +175,7 @@ color used as `primaryKey` to `primary` color as well. This strategy works well for the light mode `ColorScheme`, since the prominent brand color a company has defined is typically intended to be printed on white paper. If you have secondary brand colors that are to be used, using them as seeds for `secondaryKey` and `tertiaryKey` will work too. How well they will fit and match the Material 3 color system, if assigned to `secondary` and `tertiary` directly as colors in `SeedColorScheme.fromSeeds`, will vary depending on what colors they are. -If your brand color(s) for light mode are light, so that they require dark text for good contrast, instead of light or white text, you will also have to override the contrast colors for them if you overrode them by giving the seed colors to `primary`, `secondary` and `tertairy`. You then have to manually also assign suitable contrast colors to `onPrimary`, `onSecondary` and `onTertairy`. +If your brand color(s) for light mode are light, so that they require dark text for good contrast, instead of light or white text, you will also have to override the contrast colors for them if you overrode them by giving the seed colors to `primary`, `secondary` and `tertiary`. You then have to manually also assign suitable contrast colors to `onPrimary`, `onSecondary` and `onTertiary`. Companies rarely have brand colors suited for good contrast in dark theme mode. In that case prefer only using the same light mode brand colors as key colors to seed the dark mode `ColorScheme`. If they do have dark mode specifications, and the colors are of same hue as light mode, consider still using the light mode colors as the seed source, and only applying the appropriate dark mode colors to `primary`, `secondary` and `tertiary` as needed. @@ -195,7 +195,7 @@ In the above example, we used a predefined tone mapping and chroma setup `ColorS * `FlexTones.jolly`, for a more "jolly" and colorful theme. * `FlexTones.vividBackground`, like `vividSurfaces`, but with less tint in surface color and a slightly darker surface color than default in dark mode. * `FlexTones.oneHue`, a balanced chromatic setup. It is called oneHue because When only primary color is used as seed, it does not rotate its hue value to make a computed hue for tertiary tonal palettes, but uses the same hue. This makes it possible to make seed-generated color schemes from a single color. In such themes, all colors are based on the same hue, but using different chroma and tones. -* `FlexTones.canyPop`, A high contrast color scheme, useful for accessible themes, with colors that pop like candy. Keeps the background and surface white in light mode, and only a slight tint in dark mode. Neutrals have very low chroma. +* `FlexTones.candyPop`, A high contrast color scheme, useful for accessible themes, with colors that pop like candy. Keeps the background and surface white in light mode, and only a slight tint in dark mode. Neutrals have very low chroma. * `FlexTones.chroma`, use it to create a color scheme that follows chroma of each used seed color. Useful for manual control of pop or low chromacity. It uses low surface tint and neutrals with medium chroma. You can also define custom tones mapping and chroma limitation setups with `FlexTones`. Prefer using the `FlexTones.light` and `FlexTones.dark` constructors as base for custom definitions. By using them, you only need to override system defaults that you want to change. @@ -235,7 +235,7 @@ const FlexTones myDarkTones = FlexTones.dark( ## Extended Palette -The extended palette type is the new default, it contains 30 tones. If you are using Flutter 3.22, or later you should only use it. The `common` tones option is provided for backwards compatibility with older Flutter versions and older FSS versions. +The extended palette type is the new default, it contains 30 tones. If you are using Flutter 3.22 or later, you should only use extended palette. The `common` tones option is provided for backwards compatibility with older Flutter versions and older FSS versions. By using `paletteType` with value `FlexPaletteType.extended`, you can create seed generated `ColorScheme`s that use and access new color tones that exists in the late 2022 revised `ColorScheme` for surface colors and even more colors for **fixed** and **fixedDim** main colors that arrived in the Material-3 design during later half of 2023. @@ -255,7 +255,7 @@ You can use `FlexTones` to create a seed generated `ColorScheme`, that is based There are two high contrast `FlexTones` configuration pre-made for this. They are called `FlexTones.highContrast`, a colorful high-contrast version, and `FlexTones.ultraContrast`, a less colorful version, a more dark on light in light theme mode, and light on dark in dark mode. -The `FlexTones.canyPop` also creates high contrast theme, with colors that are vibrant and pop, it can also be used for high contrast themes. Depending on seed color input values and its chroma value, `FlexTones.chroma` can also be very vibrant and high contrast. It can also be monochromatic, i.e., gray-scale if input seed colors have chroma value zero. +The `FlexTones.candyPop` also creates high contrast theme, with colors that are vibrant and pop, it can also be used for high contrast themes. Depending on seed color input values and its chroma value, `FlexTones.chroma` can also be very vibrant and high contrast. It can also be monochromatic, i.e., gray-scale if input seed colors have chroma value zero. ```dart // Make a high contrast light ColorScheme from the seeds. @@ -292,7 +292,7 @@ If you define equivalent `ThemeData` based on those schemes as your standard `Ma When using a `variant` that is based on the equivalent Flutter SDK `DynamicSchemeVariant`, indicated by that it has its `FlexSchemeVariant` property `isFlutterScheme` set to true, you can also provide a `contrastLevel` for the seed generation. -The `contrastLevel` parameter is used to indicate the contrast level between color pairs, such as `primary` and `onPrimary`. The value 0.0 is the default normal contrast; -1.0 is the lowest; 1.0 is the highest. From **Material Design guideline**, the medium and high contrast, correspond to 0.5 and 1.0 respectively. The `contrastLevel` is used to adjust the contrast between the main color and its on color pair. The `contraslLevel` must be from -1.0 to 1.0. +The `contrastLevel` parameter is used to indicate the contrast level between color pairs, such as `primary` and `onPrimary`. The value 0.0 is the default normal contrast; -1.0 is the lowest; 1.0 is the highest. From **Material Design guideline**, the medium and high contrast, correspond to 0.5 and 1.0 respectively. The `contrastLevel` is used to adjust the contrast between the main color and its on color pair. The `contrastLevel` must be from -1.0 to 1.0. ```dart // Make a light high contrast ColorScheme from a seeds using variant style fidelity. @@ -450,9 +450,7 @@ By setting `useExpressiveOnContainerColors` to true in `SeedColorScheme.fromSeed Opting in changes the light mode color tone for the colors `onPrimaryContainer`, `onSecondaryContainer`, `onTertiaryContainer` and `onErrorContainer` from 10 to 30, making them more color expressive, but they then also have less contrast. The accepted min contrast curve is now `ContrastCurve(3, 4.5, 7, 11)` instead of `ContrastCurve(4.5, 7, 11, 21)` for the on-container colors. Meaning normal contrast of 4.5 is now accepted when it was 7 before. -This option is only available when using MCU based `DynamicScheme` variants and not when using `FlexTones` based `tones` and `variants` based on `FlexTones`. It thus only applies to variants that are based on MCU's `DynamicScheme` and have their `isFlutterScheme` set to true. - -Prior to MCU version 0.12.0 the `MaterialDynamicColors` used an older M3 spec. Flutter stable 3.22.x and Flutter master 3.23.x still use MCU versions lower than 0.12.0 and default to the older color tones 10 in light mode. This will be changed in Flutter SDK when Flutter is updated to use MCU 0.12.0 or later. With FSS 3.0.0, you can opt in on using the new spec already now. FSS still defaults to the older spec with more contrast. When Flutter stable changes to use the new spec, FSS will also change to use it as default. While Flutter and MCU will then no longer offer the older higher contrast version, FSS will continue to do so. +Prior to MCU version 0.12.0 the `MaterialDynamicColors` used an older Material-3 spec. Flutter stable 3.22.x and Flutter master 3.23.x still use MCU versions lower than 0.12.0 and default to the older color tones 10 in light mode. This will be changed when Flutter is updated to use MCU 0.12.0 or later. With FSS 3.0.0, you can opt in on using the new spec already now. FSS still defaults to the older spec with more contrast. When Flutter stable changes to use the new spec, FSS will also change to use it as default. While Flutter and MCU will then no longer offer the older higher contrast version, FSS will continue to do so. The optional usage of the expressive colors for on-container colors is a customization of MCU features in the forked version. We see value in being able to offer both the higher contrast older, still current, version and the new more color expressive one. @@ -477,14 +475,30 @@ The optional usage of the expressive colors for on-container colors is a customi The variants `fidelity` and `content` have their own algorithm for the on colors that `useExpressiveOnContainerColors` impacts that are already expressive. Thus, the flag does nothing to their on-colors. Likewise `monochrome` is excluded from the expressive on colors feature, as it is intended to be monochrome. However, even for these variants the `useExpressiveOnContainerColors` will change the `onErrorContainer` color, to be more expressive in light mode. +Starting with version 3.4.0 the parameter `useExpressiveOnContainerColors` in `SeedColorScheme.fromSeeds` now works with a scheme `variant` regardless of if it has `isFlutterScheme` set to true or false. Meaning it impacts both MCU `DynamicSchemeVariant` and FSS `FlexTones` based scheme variants. + +For `FlexTones` based variants, when using a built-in `FlexTones` or even a custom one, it is no longer necessary to use the `FlexTones` modifier `.expressiveOnContainer()` on the used `tones` to get a seeded color scheme with expressive on container tones in light mode. + +The `FlexTones` based modifier `.expressiveOnContainer()` is still used, but it is applied internally when the flag `useExpressiveOnContainerColors` is set to true. + +The `useExpressiveOnContainerColors` only applies in light mode to on container tones that are equal to 10, other tones are considered custom on purpose and are not changed. This is in-line with that the MCU `DynamicSchemeVariant`s that did not use tone 30 before as on container color in light mode, like Fidelity, Monochrome and Content were not affected by this change in MCU 0.12.0. In the same manner, this flag no longer changes `FlexTones` based schemes that have on container tones that are not 10. This applies to some on container colors in UltraContrast, Candy Pop and Chroma predefined `FlexTones`. + +This change makes this flag consistent and applicable to all seed generated schemes, regardless of if it is based on `DynamicSchemeVariant`, built-in `FlexTones` or even custom `FlexTones` configurations. + +For MCU seed generated schemes, `useExpressiveOnContainerColors` only has any impact when contrast level is at the default value (0), normal contrast. + +When using FFS seed generated schemes with `useExpressiveOnContainerColors` set to true, the modifier is applied before any `FlexTones` modifiers. Using tones modifiers, like e.g. `onMainsUseBW()` will thus as expected, override this setting and set on container colors to tone 0 or tone 100, depending on the container colors brightness. + + ### FlexTones Modifier `expressiveOnContainer()` -The `tones` configuration class `FlexTones` can also use modifier `expressiveOnContainer()`. It can be applied to any predefined or custom `FlexTones` to make a returned `FlexTones` instance where the tones for light mode on container tones are set to 30 for more color expressive container text and icons on none surface containers. +While no longer needed to be used directly, the `tones` configuration class `FlexTones` can still also use the modifier `expressiveOnContainer()`. It can be applied to any predefined or custom `FlexTones` to make a returned `FlexTones` instance where the tones for light mode on container tones are set to 30 for more color expressive container text and icons on none surface containers. -This modifier only impacts none surface on-container tones that are dark and thus only has any impact on the light theme mode on-container colors. The impacted on container colors are `onPrimaryContainerTone`,`onSecondaryContainerTone`, `onTertiaryContainerTone` and `onErrorContainerTone`. +This modifier only impacts none surface on-container tones that are equal to 10 and thus only has any impact on the light theme mode on-container colors. The impacted on container colors are `onPrimaryContainerTone`,`onSecondaryContainerTone`, `onTertiaryContainerTone` and `onErrorContainerTone`. -This feature brings optional light mode expressive on-container colors to any predefined or custom `FlexTones` configuration. The expressive on-color in light mode containers are a new coming change to Material Design 3 ColorScheme. This modifier is equivalent to setting the `SeedColorScheme.fromSeeds` and its `useExpressiveOnContainerColors` property to true, when using MCU dynamic scheme variant based seeded color schemes. +This feature brings optional light mode expressive on-container colors to any predefined or custom `FlexTones` configuration. The expressive on-color in light mode containers are a new coming change to Material Design 3 ColorScheme. This modifier is equivalent to setting the `SeedColorScheme.fromSeeds` and its `useExpressiveOnContainerColors` property to true. +**Usage example:** ```dart // Make a Material 3 seeded light ColorScheme, but with always @@ -501,6 +515,40 @@ final ColorScheme schemeLightOnBW = SeedColorScheme.fromSeeds( ); ``` +## Using Monochrome Seed Colors + +In version 3.4.0 a new `bool` parameter, `respectMonochromeSeed` in `SeedColorScheme.fromSeeds` can now be used to make seed generated ColorSchemes that work as expected if a monochrome color is used as seed color input. + +When set to `true`, any monochrome RGB input value will result in the creation of a greyscale tonal palette for the palette using the monochrome seed color. An RGB monochrome value is one where Red, Green and Blue values are all equal. + +Previously in FSS and in Material Color Utilities (MCU) and thus still as default in Flutter `ColorScheme.fromSeed`, using a monochrome seed color value or white, resulted in a tonal palette with cyan color tones. A black input resulted in red like color tones. This is not very intuitive and not really expected when using monochrome seed colors. + +FSS still defaults to setting `respectMonochromeSeed` to `false`, to not break any existing code that may rely on the old behavior. Prefer setting `respectMonochromeSeed` to `true`, to get more logical seed results when using monochrome seed colors or white and black as seed colors. + +> **NOTE:** When using `respectMonochromeSeed` with `DynamicSchemeVariant` variants `fidelity` or `content`, for some monochrome input colors they produce `primaryContainer` and `onPrimaryContainer` as well as `tertiaryContainer` and `onTertiaryContainer` color pairs, with low contrast. Consider using some other scheme variants with monochrome seed colors. All others work well with any monochrome seed color. +> +>This is just how the MCU `DynamicScheme`s `SchemeContent` and `SchemeFidelity` are defined in MCU. They also produce fairly low contrast for these color pairs with very dark seed colors. This behavior with MCU's `SchemeContent` and `SchemeFidelity` could be fixed in FlexSeedScheme's internal MCU fork, but we want to keep the result of these schemes consistent with MCU. + +**Usage example:** + +```dart + // Make a light ColorScheme from a seeds using variant style vibrant. + final ColorScheme schemeLight = SeedColorScheme.fromSeeds( + brightness: Brightness.light, + respectMonochromeSeed: true, + primaryKey: Colors.black, + variant: FlexSchemeVariant.chroma, + ); + // Make a dark ColorScheme from a seeds using variant style vibrant. + final ColorScheme schemeDark = SeedColorScheme.fromSeeds( + brightness: Brightness.dark, + respectMonochromeSeed: true, + primaryKey: const Colors(0xFF555555), + variant: FlexSchemeVariant.chroma, + ); +``` + + ## [Example Application](https://rydmike.com/flexseedscheme/demo-v2) The included example application uses above color seeding and custom tone mapping. You can also choose any of the built-in pre-configured tone mappings as used seeding strategy. When you select seeding strategy, basic info about is displayed. @@ -624,7 +672,7 @@ Same for dark mode. | comp widgets_oh2_d | widgets_tsp2_d | -As we can see, there is more pop and colorfulness in the **One hue** version. We can also notice that most common widgets only use colors based on `primary` and `secondary` and their shades. The `tertiary` colors that get a different hue are rarely used in common widgets when using their default `ColorScheme` mappings. We can find it if we compare e.g. the `DatePicker` result. +As we can see, there is more pop and colorfulness in the **One hue** version. We can also notice that most common widgets only use colors based on `primary` and `secondary` and their shades. The `tertiary` colors that get a different hue are rarely used in common widgets when using their default `ColorScheme` mappings. We can find it if we compare e.g., the `DatePicker` result. | Pickers from brand - One hue | Pickers from brand - Flutter default | |-------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------| diff --git a/example/lib/core/constants/app_data.dart b/example/lib/core/constants/app_data.dart index b646a77..2f661cd 100644 --- a/example/lib/core/constants/app_data.dart +++ b/example/lib/core/constants/app_data.dart @@ -24,14 +24,14 @@ sealed class AppData { // Version of the WEB build, usually same as package, but it also has a // build numbers. static const String versionMajor = '3'; - static const String versionMinor = '3'; + static const String versionMinor = '4'; static const String versionPatch = '0'; static const String versionBuild = '01'; static const String version = '$versionMajor.$versionMinor.$versionPatch ' 'Build-$versionBuild'; static const String packageVersion = '$versionMajor.$versionMinor.$versionPatch'; - static const String flutterVersion = '3.24.2 (canvaskit)'; + static const String flutterVersion = '3.24.3 (canvaskit)'; static const String copyright = '© 2022-2024'; static const String author = 'Mike Rydstrom'; static const String license = 'BSD 3-Clause License'; diff --git a/example/lib/core/views/universal/showcase_material.dart b/example/lib/core/views/universal/showcase_material.dart index 8ec6700..b2bfc2d 100644 --- a/example/lib/core/views/universal/showcase_material.dart +++ b/example/lib/core/views/universal/showcase_material.dart @@ -73,7 +73,10 @@ class ShowcaseMaterial extends StatelessWidget { // const Text('Switch', style: headerStyle), const SizedBox(height: 8), - const SwitchShowcase(showCupertinoSwitches: true), + const SwitchShowcase( + showCupertinoSwitches: false, + showAdaptiveSwitches: false, + ), const SizedBox(height: 16), const Text('Checkbox', style: headerStyle), const SizedBox(height: 8), @@ -732,7 +735,12 @@ class _FabShowcaseState extends State { } class SwitchShowcase extends StatefulWidget { - const SwitchShowcase({super.key, this.showCupertinoSwitches = false}); + const SwitchShowcase({ + super.key, + this.showAdaptiveSwitches = false, + this.showCupertinoSwitches = false, + }); + final bool showAdaptiveSwitches; final bool showCupertinoSwitches; @override @@ -826,46 +834,48 @@ class _SwitchShowcaseState extends State { ), ], ), - Wrap( - crossAxisAlignment: WrapCrossAlignment.center, - spacing: 8, - runSpacing: 8, - children: [ - const SizedBox(width: _width, child: Text('Adaptive')), - Switch.adaptive( - value: isOn1, - onChanged: (bool value) { - setState(() { - isOn1 = value; - }); - }, - ), - Switch.adaptive( - value: !isOn1, - onChanged: (bool value) { - setState(() { - isOn1 = !value; - }); - }, - ), - ], - ), - Wrap( - crossAxisAlignment: WrapCrossAlignment.center, - spacing: 8, - runSpacing: 8, - children: [ - const SizedBox(width: _width, child: Text('Disabled')), - Switch.adaptive( - value: isOn1, - onChanged: null, - ), - Switch.adaptive( - value: !isOn1, - onChanged: null, - ), - ], - ), + if (widget.showAdaptiveSwitches) + Wrap( + crossAxisAlignment: WrapCrossAlignment.center, + spacing: 8, + runSpacing: 8, + children: [ + const SizedBox(width: _width, child: Text('Adaptive')), + Switch.adaptive( + value: isOn1, + onChanged: (bool value) { + setState(() { + isOn1 = value; + }); + }, + ), + Switch.adaptive( + value: !isOn1, + onChanged: (bool value) { + setState(() { + isOn1 = !value; + }); + }, + ), + ], + ), + if (widget.showCupertinoSwitches) + Wrap( + crossAxisAlignment: WrapCrossAlignment.center, + spacing: 8, + runSpacing: 8, + children: [ + const SizedBox(width: _width, child: Text('Disabled')), + Switch.adaptive( + value: isOn1, + onChanged: null, + ), + Switch.adaptive( + value: !isOn1, + onChanged: null, + ), + ], + ), if (widget.showCupertinoSwitches) Wrap( crossAxisAlignment: WrapCrossAlignment.center, diff --git a/example/lib/home/views/pages/home_page.dart b/example/lib/home/views/pages/home_page.dart index b935e09..f365b65 100644 --- a/example/lib/home/views/pages/home_page.dart +++ b/example/lib/home/views/pages/home_page.dart @@ -97,6 +97,7 @@ class HomePage extends StatelessWidget { padding: const EdgeInsets.symmetric(horizontal: 16), child: ShowTonalPalette(controller: controller), ), + const SizedBox(height: 8), Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -110,15 +111,32 @@ class HomePage extends StatelessWidget { 'light mode. This is a new Material-3 spec standard. It is ' 'more color expressive, but reduces contrast.\n' '\n' - 'It is not yet used by Flutter SDK in ColorScheme.fromSeed ' - 'produced color schemes, but will be when Flutter upgrades ' - 'to Material Color Utilities 0.12.0. You can opt in on ' - 'using it already with FSS, or decide to not use it, even ' - 'after it becomes a forced default in Flutter SDK.\n' + 'This modifier only impacts light scheme variants where ' + 'the container on colors use tone 10. For scheme variants ' + 'with an intentionally custom tone for onColors on ' + 'containers, this setting has no impact. Such variants ' + 'are:\n' + ' - Fidelity\n' + ' - Monochrome\n' + ' - Content\n' + ' - Ultra Contrast\n' + ' - Candy pop\n' + ' - Chroma\n' '\n' - 'The DynamicScheme variants Fidelity and Content have ' - 'their own predefined expressive on-colors for containers ' - 'and do not use this setting.', + "This feature is not yet used by Flutter's " + 'ColorScheme.fromSeed produced ColorSchemes, but will be ' + 'when Flutter upgrades to Material Color Utilities (MCU) ' + 'v0.12.0. You can opt in on using it already now, or ' + 'decide not to use it. With FSS you will be able to do so, ' + 'even after it becomes a forced default and the only ' + "option in Flutter's ColorScheme.fromSeed.\n" + '\n' + 'For MCU seed generated schemes, this only has any impact ' + 'when contrast level is at the default value (0), normal ' + 'contrast.\n' + '\n' + 'When using FFS seed generated schemes, the tones modifier ' + '"B&W main onColors" will override this setting.\n', ), value: controller.useExpressiveOn, onChanged: controller.setUseExpressiveOn, @@ -183,58 +201,83 @@ class HomePage extends StatelessWidget { ? null : controller.setUseMonoSurfaces, ), - SwitchListTile( - dense: true, - title: const Text('Higher contrast fixed colors'), - subtitle: const Text('tones.higherContrastFixed()'), - value: controller.higherContrastFixedColors && - !controller.usedVariant.isFlutterScheme, - onChanged: controller.usedVariant.isFlutterScheme - ? null - : controller.setHigherContrastFixedColors, - ), - SwitchListTile( - dense: true, - title: const Text('Keep main on-colors black and white'), - subtitle: const Text('tones.onMainsUseBW()'), - value: controller.keepMainOnColorsBW && - !controller.usedVariant.isFlutterScheme, - onChanged: controller.usedVariant.isFlutterScheme - ? null - : controller.setKeepMainOnColorsBW, + Row( + children: [ + Expanded( + child: SwitchListTile( + contentPadding: paddingStartColumn, + dense: true, + title: const Text('Higher contrast fixed colors'), + subtitle: const Text('tones.higherContrastFixed()'), + value: controller.higherContrastFixedColors && + !controller.usedVariant.isFlutterScheme, + onChanged: controller.usedVariant.isFlutterScheme + ? null + : controller.setHigherContrastFixedColors, + ), + ), + Expanded( + child: SwitchListTile( + contentPadding: paddingEndColumn, + dense: true, + title: const Text('Keep main on-colors black and white'), + subtitle: const Text('tones.onMainsUseBW()'), + value: controller.keepMainOnColorsBW && + !controller.usedVariant.isFlutterScheme, + onChanged: controller.usedVariant.isFlutterScheme + ? null + : controller.setKeepMainOnColorsBW, + ), + ), + ], ), - SwitchListTile( - dense: true, - title: const Text('Keep surface on-colors black and white'), - subtitle: const Text('tones.onSurfacesUseBW()'), - value: controller.keepSurfaceOnColorsBW && - !controller.usedVariant.isFlutterScheme, - onChanged: controller.usedVariant.isFlutterScheme - ? null - : controller.setKeepSurfaceOnColorsBW, + Row( + children: [ + Expanded( + child: SwitchListTile( + contentPadding: paddingStartColumn, + dense: true, + title: const Text('Keep surface on-colors black and white'), + subtitle: const Text('tones.onSurfacesUseBW()'), + value: controller.keepSurfaceOnColorsBW && + !controller.usedVariant.isFlutterScheme, + onChanged: controller.usedVariant.isFlutterScheme + ? null + : controller.setKeepSurfaceOnColorsBW, + ), + ), + if (isLight) + Expanded( + child: SwitchListTile( + contentPadding: paddingEndColumn, + dense: true, + title: + const Text('Keep surface color white in light scheme'), + subtitle: const Text('tones.surfacesUseBW()'), + value: controller.keepLightSurfaceColorsWhite && + !controller.usedVariant.isFlutterScheme, + onChanged: controller.usedVariant.isFlutterScheme + ? null + : controller.setKeepLightSurfaceColorsWhite, + ), + ) + else + Expanded( + child: SwitchListTile( + contentPadding: paddingEndColumn, + dense: true, + title: + const Text('Keep surface color black in dark scheme'), + subtitle: const Text('tones.surfacesUseBW()'), + value: controller.keepDarkSurfaceColorsBlack && + !controller.usedVariant.isFlutterScheme, + onChanged: controller.usedVariant.isFlutterScheme + ? null + : controller.setKeepDarkSurfaceColorsBlack, + ), + ), + ], ), - if (isLight) - SwitchListTile( - dense: true, - title: const Text('Keep surface color white in light scheme'), - subtitle: const Text('tones.surfacesUseBW()'), - value: controller.keepLightSurfaceColorsWhite && - !controller.usedVariant.isFlutterScheme, - onChanged: controller.usedVariant.isFlutterScheme - ? null - : controller.setKeepLightSurfaceColorsWhite, - ) - else - SwitchListTile( - dense: true, - title: const Text('Keep surface color black in dark scheme'), - subtitle: const Text('tones.surfacesUseBW()'), - value: controller.keepDarkSurfaceColorsBlack && - !controller.usedVariant.isFlutterScheme, - onChanged: controller.usedVariant.isFlutterScheme - ? null - : controller.setKeepDarkSurfaceColorsBlack, - ), const Divider(), const ListTile( title: Text('Widget showcase, using Material default styles')), diff --git a/example/pubspec.lock b/example/pubspec.lock index 1e86a01..29d2ad8 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -71,7 +71,7 @@ packages: path: ".." relative: true source: path - version: "3.3.0" + version: "3.4.0" flutter: dependency: "direct main" description: flutter diff --git a/example/pubspec.yaml b/example/pubspec.yaml index c6c0e52..cb03262 100644 --- a/example/pubspec.yaml +++ b/example/pubspec.yaml @@ -1,6 +1,6 @@ name: flex_seed_scheme_example description: Example that demonstrate how to use the FlexSeedScheme package. -version: 3.3.0 +version: 3.4.0 publish_to: 'none' environment: sdk: '>=3.0.0 <4.0.0' diff --git a/lib/src/flex/flex_scheme_variant.dart b/lib/src/flex/flex_scheme_variant.dart index e442b8d..eef437d 100644 --- a/lib/src/flex/flex_scheme_variant.dart +++ b/lib/src/flex/flex_scheme_variant.dart @@ -165,7 +165,7 @@ enum FlexSchemeVariant { /// The primary palette's hue is different from the seed color, for variety. expressive( variantName: 'Expressive', - description: 'Hue are intentionally different from the ' + description: 'Hues are intentionally different from the ' 'seed colors', configDetails: 'Primary - Hue rotated 240 degrees, Chroma 40\n' 'Secondary - Chroma 24, Hue rotated 20-95 degrees\n' @@ -260,7 +260,9 @@ enum FlexSchemeVariant { /// Flutter SDK DynamicSchemeVariant and MCU do not provide that feature-set. material( variantName: 'Material-3', - description: 'Material-3 design tones and chroma setup', + description: 'Material-3 design tones and chroma setup. Same result as the ' + "Flutter's default TonalSpot DynamicSchemeVariant, but this version " + 'enables you to use FSS based tones modifiers.', configDetails: 'Primary - Chroma from key color, but min 36\n' 'Secondary - Chroma 16\n' 'Tertiary - Hue rotated 60 degrees or key hue, Chroma 24\n' diff --git a/lib/src/flex/flex_seed_scheme.dart b/lib/src/flex/flex_seed_scheme.dart index 1637cba..47f7fcb 100644 --- a/lib/src/flex/flex_seed_scheme.dart +++ b/lib/src/flex/flex_seed_scheme.dart @@ -313,9 +313,18 @@ class FlexSeedScheme { int? errorKey, int? neutralKey, int? neutralVariantKey, - required FlexTones tones, + required FlexTones flexTones, + bool useExpressiveOnContainerColors = false, required bool respectMonochromeSeed, }) { + // We will not use the expressiveOnContainer if the onPrimaryContainerTone + // is set to zero, because that indicates the .onMainsUseBW() modifier + // is being used on passed in tones and we want it to take precedence + // over the expressiveOnContainer setting. + final FlexTones tones = flexTones.onPrimaryContainerTone != 0 + ? flexTones.expressiveOnContainer(useExpressiveOnContainerColors) + : flexTones; + final FlexCorePalette core = FlexCorePalette.fromSeeds( primary: primaryKey, secondary: secondaryKey, @@ -662,34 +671,63 @@ extension SeedColorScheme on ColorScheme { /// Use expressive on container colors for light mode. /// - /// Material specification and Material Color Utilities (MCU) v0.12.0 - /// changes the light mode on colors for none surface containers from tone - /// 10 to tone 30. It also sets the min `ContrastCurve` from + /// The [useExpressiveOnContainerColors] is used to make the light theme + /// mode [ColorScheme] colors [onPrimaryContainer], [onSecondaryContainer], + /// [onTertiaryContainer] and [onErrorContainer] more color expressive. + /// + /// This comes at the cost of their contrast level and accessibility. + /// + /// The value has no impact on dark mode [ColorScheme] colors. Expressive + /// onColors for container colors have always been used in dark mode in + /// Material-3 design and they have good contrast and accessibility. + /// + /// Setting the [useExpressiveOnContainerColors] to `true` will make the + /// onContainer colors of all scheme variants and [FlexTones] based schemes + /// use the new expressive tone, if the currently used tone is 10. If a + /// scheme already uses an intentionally customized tone, the new expressive + /// tone will not be used for those tones, even when this settings is true. + /// + /// Schemes that contain such on container tones are: + /// - Fidelity + /// - Monochrome + /// - Content + /// - Ultra Contrast + /// - Candy pop + /// - Chroma + /// + /// Defaults to `false` if undefined. + /// + /// The Material design spec for the tones used by the colors + /// [onPrimaryContainer], [onSecondaryContainer], [onTertiaryContainer] and + /// [onErrorContainer] have changed from tone **10** to **30** for **LIGHT** + /// theme mode. It also sets the min `ContrastCurve` from /// ContrastCurve(4.5, 7.0, 11.0, 21.0) to /// ContrastCurve(3.0, 4.5, 7.0, 11.0), making min contrast for normal /// contrast 4.5 instead of past 7.0. /// - /// This change is not in use by Flutter and not fully documented in the - /// M3 guide. In the FSS MCU fork we are making this change a deliberate - /// opt-in feature and default to not opting in on it. This default may be - /// adjusted later to opt-in by default, but FSS will continue to offer - /// the older version with better contrast too. Any later change to opt-in - /// by default will only be considered color style breaking and will not - /// bump major version of FSS, only minor. + /// The expressive light container tone is not yet used in the Flutter SDK + /// (Sep 22, 2024), but it is in the Material-3 design spec and also in + /// MCU v0.12.0. This is a breaking change in MCU 0.12.0 compared to 0.11.1 + /// used in Flutter 3.24 and it will change the light mode color schemes + /// produced by all DynamicColor based Material color schemes. /// - /// Defaults to `false` in FSS version 3.0.0. + /// When this change lands in stable Flutter, it will be made + /// `true` by default in FCS too when undefined. You you will still be able + /// to opt out of using it, by setting it `false`. Flutter SDK and MCU will + /// not contain such an opt-out feature. This /// - /// The result you get with false, corresponds to used results in MCU until - /// version 0.11.1. Version 0.12.0 of MCU it corresponds to setting - /// this flag to true. This is a breaking change in MCU 0.12.0 and will - /// change the light mode color schemes produced by all DynamicColor based - /// Material color schemes. + /// The new **on** color tones for containers in light mode make them more + /// color expressive, but they also reduce their contrast level and + /// accessibility. We recommend keeping them at the higher contrast level, + /// by setting [useExpressiveOnContainerColors] to `false`. With it set to + /// `false`, you will also keep this preference when Flutter SDK + /// defaults to using the expressive tones. final bool useExpressiveOnContainerColors = false, /// If true, when a seed color is monochrome, it is recognized as such and - /// the chroma is set to 0 to respect that it has no chroma, in its - /// conversion from Color or integer value to HCT space, so we get all - /// greyscale tones. + /// the chroma is set to 0 to respect that it has no chroma. THis is then + /// used in its conversion from Color or integer value to HCT space, so + /// we get all greyscale tones. /// /// If not set to true, we get a "cyan" tonal palette for monochrome and /// white seed colors, while black, gives a "red" tonal palette. @@ -697,7 +735,7 @@ extension SeedColorScheme on ColorScheme { /// Defaults to `false` to keep the default behavior of the package and the /// Material-3 color system. /// - /// Consider setting it to `true` if you want to get + /// Prefer setting it to `true` if you want to get /// greyscale palette tones for any given monochrome seed color. /// /// If [respectMonochromeSeed] is true, any given configured minimum @@ -1007,11 +1045,8 @@ extension SeedColorScheme on ColorScheme { errorKey: errorKey?.value, neutralKey: neutralKey?.value, neutralVariantKey: neutralVariantKey?.value, - tones: tones?.expressiveOnContainer(useExpressiveOnContainerColors) ?? - variantTones - ?.expressiveOnContainer(useExpressiveOnContainerColors) ?? - FlexTones.material(brightness) - .expressiveOnContainer(useExpressiveOnContainerColors), + useExpressiveOnContainerColors: useExpressiveOnContainerColors, + flexTones: tones ?? variantTones ?? FlexTones.material(brightness), respectMonochromeSeed: respectMonochromeSeed, ); @@ -1119,9 +1154,6 @@ extension SeedColorScheme on ColorScheme { final Hct? errorSourceColor = errorSeedColor != null ? Hct.fromInt(errorSeedColor.value) : null; - debugPrint('primarySourceColor = $primarySourceColor'); - debugPrint('neutralSourceColor = $neutralSourceColor'); - return switch (variant) { FlexSchemeVariant.material || FlexSchemeVariant.material3Legacy || diff --git a/lib/src/flex/flex_tones.dart b/lib/src/flex/flex_tones.dart index ef5029b..84d5217 100644 --- a/lib/src/flex/flex_tones.dart +++ b/lib/src/flex/flex_tones.dart @@ -1015,8 +1015,8 @@ class FlexTones with Diagnosticable { } /// Returns a new [FlexTones] instance where the tones for light mode on - /// container tones are set to 30 for more color expressive container text - /// and icons on none surface containers. + /// container tones are set to 30 if they are 10. This gives us more + /// color expressive container text and icons on none surface containers. /// /// This [FlexTones] modifier only impacts none surface on-container tones /// that are dark and thus only has any impact on the light theme mode @@ -1027,10 +1027,11 @@ class FlexTones with Diagnosticable { /// [onErrorContainerTone]. /// /// This feature brings optional light mode expressive on container colors to - /// any predefined or custom [FlexTones] configuration. The expressive on - /// color in light mode containers are a new change to Material Design 3 - /// ColorScheme. It was introduced in Material Color Utilities (MCU) - /// lib v0.12.0. + /// any predefined or custom [FlexTones] configuration. + /// + /// These expressive on color in light mode containers are a change + /// to the Material Design 3 ColorScheme. It was introduced in Material Color + /// Utilities (MCU) package v0.12.0. /// /// This modifier is equivalent to setting the /// [SeedColorScheme.fromSeeds] and its [useExpressiveOnContainerColors] to @@ -1039,19 +1040,24 @@ class FlexTones with Diagnosticable { /// The [useExpressive] flag is true by default, making the function /// effective. If set to false, the function is a no op and just returns the /// [FlexTones] object unmodified. This is typically used to control applying - /// modifier via a controller. + /// the modifier via a controller. There is also an early no op exit + /// if the onPrimaryContainerTone is > 60, indicating that this is a dark + /// theme and the modifier should not have any effect. /// /// **NOTE**: If some [FlexTones] modifiers change same properties, the used /// order in which they are applied matters. The last one applied will be /// the one that is used. FlexTones expressiveOnContainer([bool useExpressive = true]) { - // ignore: avoid_returning_this if ((!useExpressive) || (onPrimaryContainerTone > 60)) return this; return copyWith( - onPrimaryContainerTone: 30, - onSecondaryContainerTone: 30, - onTertiaryContainerTone: 30, - onErrorContainerTone: 30, + onPrimaryContainerTone: + onPrimaryContainerTone == 10 ? 30 : onPrimaryContainerTone, + onSecondaryContainerTone: + onSecondaryContainerTone == 10 ? 30 : onSecondaryContainerTone, + onTertiaryContainerTone: + onTertiaryContainerTone == 10 ? 30 : onTertiaryContainerTone, + onErrorContainerTone: + onErrorContainerTone == 10 ? 30 : onErrorContainerTone, ); } diff --git a/lib/src/mcu/dynamiccolor/material_dynamic_colors.dart b/lib/src/mcu/dynamiccolor/material_dynamic_colors.dart index 65629ec..7cd32b5 100644 --- a/lib/src/mcu/dynamiccolor/material_dynamic_colors.dart +++ b/lib/src/mcu/dynamiccolor/material_dynamic_colors.dart @@ -22,9 +22,6 @@ import 'dynamic_color.dart'; import 'src/contrast_curve.dart'; import 'src/tone_delta_pair.dart'; -// TODO(rydmike): Review expressive On Container usage. Missing somewhere? -// TODO(rydmike): Fidelity and content with monochrome seed is bad. Fix? - bool _isFidelity(DynamicScheme scheme) => scheme.variant == Variant.fidelity || scheme.variant == Variant.content; diff --git a/lib/src/mcu/scheme/scheme_content.dart b/lib/src/mcu/scheme/scheme_content.dart index 37986a1..05f026d 100644 --- a/lib/src/mcu/scheme/scheme_content.dart +++ b/lib/src/mcu/scheme/scheme_content.dart @@ -79,13 +79,8 @@ class SchemeContent extends DynamicScheme { ? 0 : tertiarySourceColorHct.chroma, ) - : respectMonochromeSeed && isTertiaryMonochrome - ? TonalPalette.of( - sourceColorHct.hue, - respectMonochromeSeed && isTertiaryMonochrome - ? 0 - : sourceColorHct.chroma, - ) + : respectMonochromeSeed + ? TonalPalette.of(sourceColorHct.hue, 0) : TonalPalette.fromHct( DislikeAnalyzer.fixIfDisliked( TemperatureCache(sourceColorHct) diff --git a/lib/src/mcu/scheme/scheme_fidelity.dart b/lib/src/mcu/scheme/scheme_fidelity.dart index c5a08d2..63b98db 100644 --- a/lib/src/mcu/scheme/scheme_fidelity.dart +++ b/lib/src/mcu/scheme/scheme_fidelity.dart @@ -78,13 +78,8 @@ class SchemeFidelity extends DynamicScheme { ? 0 : tertiarySourceColorHct.chroma, ) - : respectMonochromeSeed && isTertiaryMonochrome - ? TonalPalette.of( - sourceColorHct.hue, - respectMonochromeSeed && isTertiaryMonochrome - ? 0 - : sourceColorHct.chroma, - ) + : respectMonochromeSeed + ? TonalPalette.of(sourceColorHct.hue, 0) : TonalPalette.fromHct( DislikeAnalyzer.fixIfDisliked( TemperatureCache(sourceColorHct).complement, diff --git a/pubspec.yaml b/pubspec.yaml index d97d81e..8c04586 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: flex_seed_scheme description: A more flexible and powerful version of Flutter's ColorScheme.fromSeed. Use multiple seed colors, custom chroma and tone mapping. -version: 3.3.0 +version: 3.4.0 homepage: https://github.com/rydmike/flex_seed_scheme repository: https://github.com/rydmike/flex_seed_scheme issue_tracker: https://github.com/rydmike/flex_seed_scheme/issues diff --git a/test/flex_seed_scheme_test.dart b/test/flex_seed_scheme_test.dart index 303e472..45e8dc5 100644 --- a/test/flex_seed_scheme_test.dart +++ b/test/flex_seed_scheme_test.dart @@ -1122,6 +1122,126 @@ void main() { expect(scheme, scheme2); }); + test( + 'FCS7.016-l-expr2: GIVEN a SeedColorScheme.fromSeeds using six seeds ' + 'and variant material for a light scheme and ' + 'useExpressiveOnContainerColors set to true ' + 'EXPECT scheme equal to using tones material with same seeds ' + 'and using modifier expressiveOnContainer', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.light, + primaryKey: primarySeedColor, + secondaryKey: secondarySeedColor, + tertiaryKey: tertiarySeedColor, + errorKey: errorSeedColor, + neutralKey: neutralSeedColor, + neutralVariantKey: neutralVariantSeedColor, + useExpressiveOnContainerColors: true, + variant: FlexSchemeVariant.material, + ); + final ColorScheme scheme2 = SeedColorScheme.fromSeeds( + brightness: Brightness.light, + primaryKey: primarySeedColor, + secondaryKey: secondarySeedColor, + tertiaryKey: tertiarySeedColor, + errorKey: errorSeedColor, + neutralKey: neutralSeedColor, + neutralVariantKey: neutralVariantSeedColor, + tones: FlexTones.material(Brightness.light).expressiveOnContainer(), + ); + expect(scheme, scheme2); + }); + + test( + 'FCS7.016-d-expr2: GIVEN a SeedColorScheme.fromSeeds using six seeds ' + 'and variant material for a dark scheme and ' + 'useExpressiveOnContainerColors set to true ' + 'EXPECT scheme equal to using tones material with same seeds ' + 'and using modifier expressiveOnContainer', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.dark, + primaryKey: primarySeedColor, + secondaryKey: secondarySeedColor, + tertiaryKey: tertiarySeedColor, + errorKey: errorSeedColor, + neutralKey: neutralSeedColor, + neutralVariantKey: neutralVariantSeedColor, + useExpressiveOnContainerColors: true, + variant: FlexSchemeVariant.material, + ); + final ColorScheme scheme2 = SeedColorScheme.fromSeeds( + brightness: Brightness.dark, + primaryKey: primarySeedColor, + secondaryKey: secondarySeedColor, + tertiaryKey: tertiarySeedColor, + errorKey: errorSeedColor, + neutralKey: neutralSeedColor, + neutralVariantKey: neutralVariantSeedColor, + tones: FlexTones.material(Brightness.dark).expressiveOnContainer(), + ); + expect(scheme, scheme2); + }); + + test( + 'FCS7.016-l-expr3: GIVEN a SeedColorScheme.fromSeeds using six seeds ' + 'and variant chroma for a light scheme and ' + 'useExpressiveOnContainerColors set to true ' + 'EXPECT scheme equal to using tones material with same seeds ' + 'and using modifier expressiveOnContainer', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.light, + primaryKey: primarySeedColor, + secondaryKey: secondarySeedColor, + tertiaryKey: tertiarySeedColor, + errorKey: errorSeedColor, + neutralKey: neutralSeedColor, + neutralVariantKey: neutralVariantSeedColor, + useExpressiveOnContainerColors: true, + variant: FlexSchemeVariant.chroma, + ); + final ColorScheme scheme2 = SeedColorScheme.fromSeeds( + brightness: Brightness.light, + primaryKey: primarySeedColor, + secondaryKey: secondarySeedColor, + tertiaryKey: tertiarySeedColor, + errorKey: errorSeedColor, + neutralKey: neutralSeedColor, + neutralVariantKey: neutralVariantSeedColor, + tones: FlexTones.chroma(Brightness.light).expressiveOnContainer(), + ); + expect(scheme, scheme2); + }); + + test( + 'FCS7.016-d-expr3: GIVEN a SeedColorScheme.fromSeeds using six seeds ' + 'and variant chroma for a dark scheme and ' + 'useExpressiveOnContainerColors set to true ' + 'EXPECT scheme equal to using tones material with same seeds ' + 'and using modifier expressiveOnContainer', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.dark, + primaryKey: primarySeedColor, + secondaryKey: secondarySeedColor, + tertiaryKey: tertiarySeedColor, + errorKey: errorSeedColor, + neutralKey: neutralSeedColor, + neutralVariantKey: neutralVariantSeedColor, + useExpressiveOnContainerColors: true, + variant: FlexSchemeVariant.chroma, + ); + final ColorScheme scheme2 = SeedColorScheme.fromSeeds( + brightness: Brightness.dark, + primaryKey: primarySeedColor, + secondaryKey: secondarySeedColor, + tertiaryKey: tertiarySeedColor, + errorKey: errorSeedColor, + neutralKey: neutralSeedColor, + neutralVariantKey: neutralVariantSeedColor, + tones: FlexTones.chroma(Brightness.dark).expressiveOnContainer(), + ); + expect(scheme, scheme2); + }); + test( 'FCS7.017-l: GIVEN a SeedColorScheme.fromSeeds using six seeds ' 'and variant content for a light scheme ' @@ -1148,11 +1268,6 @@ void main() { expect(scheme.surfaceContainer, const Color(0xfff1eded)); }); - // TODO(rydmike): Examine tertiary black and white response, it is odd! - // but a result of the weird "content" scheme, maybe add special cases - // for white and seed with respectMonochromeSeed set to true? - // as it is not a normal cases content was designed for. - // for now this tests fails on purpose, so I will notice this. test( 'FCS7.017-l-respect: GIVEN a SeedColorScheme.fromSeeds using six seeds ' 'and variant content for a light scheme and ' @@ -1173,15 +1288,15 @@ void main() { expect(scheme.primaryContainer, const Color(0xff1b1b1b)); expect(scheme.secondary, const Color(0xff4d5f7d)); expect(scheme.secondaryContainer, const Color(0xffc8dbfe)); - expect(scheme.tertiary, const Color(0xff1f5205)); - expect(scheme.tertiaryContainer, const Color(0xff376b1e)); + expect(scheme.tertiary, const Color(0xff000000)); + expect(scheme.tertiaryContainer, const Color(0xff072100)); expect(scheme.error, const Color(0xffba1a1a)); expect(scheme.errorContainer, const Color(0xffffdad6)); expect(scheme.surface, const Color(0xfffcf8f8)); expect(scheme.surfaceContainer, const Color(0xfff1eded)); }); test( - 'FCS7.017-l-respect: GIVEN a SeedColorScheme.fromSeeds using one seeds ' + 'FCS7.017-l-respect: GIVEN a SeedColorScheme.fromSeeds using one seed ' 'and variant content for a light scheme and ' 'respectMonochromeSeed true ' 'EXPECT this given checked color result', () { @@ -1202,6 +1317,60 @@ void main() { expect(scheme.surface, const Color(0xFFF9F9F9)); expect(scheme.surfaceContainer, const Color(0xFFEEEEEE)); }); + test( + 'FCS7.017-l-mono-2: GIVEN a SeedColorScheme.fromSeeds using six ' + 'seeds and variant content for a light scheme and ' + 'respectMonochromeSeed false ' + 'EXPECT this given checked color result', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.light, + primaryKey: const Color(0xffdddddd), + secondaryKey: secondarySeedColor, + tertiaryKey: const Color(0xFF999999), + errorKey: errorSeedColor, + neutralKey: neutralSeedColor, + neutralVariantKey: neutralVariantSeedColor, + respectMonochromeSeed: false, + variant: FlexSchemeVariant.content, + ); + expect(scheme.primary, const Color(0xff5d5f5f)); + expect(scheme.primaryContainer, const Color(0xffdddddd)); + expect(scheme.secondary, const Color(0xff4d5f7d)); + expect(scheme.secondaryContainer, const Color(0xffc8dbfe)); + expect(scheme.tertiary, const Color(0xff5e5e5e)); + expect(scheme.tertiaryContainer, const Color(0xffdedddd)); + expect(scheme.error, const Color(0xffba1a1a)); + expect(scheme.errorContainer, const Color(0xffffdad6)); + expect(scheme.surface, const Color(0xfffcf8f8)); + expect(scheme.surfaceContainer, const Color(0xfff1eded)); + }); + test( + 'FCS7.017-l-mono-3: GIVEN a SeedColorScheme.fromSeeds using six ' + 'seeds and variant content for a light scheme and ' + 'respectMonochromeSeed true ' + 'EXPECT this given checked color result', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.light, + primaryKey: const Color(0xffdddddd), + secondaryKey: const Color(0xFF555555), + tertiaryKey: const Color(0xFF999999), + errorKey: errorSeedColor, + neutralKey: neutralSeedColor, + neutralVariantKey: neutralVariantSeedColor, + respectMonochromeSeed: true, + variant: FlexSchemeVariant.content, + ); + expect(scheme.primary, const Color(0xff5e5e5e)); + expect(scheme.primaryContainer, const Color(0xffdddddd)); + expect(scheme.secondary, const Color(0xff5e5e5e)); + expect(scheme.secondaryContainer, const Color(0xffe2e2e2)); + expect(scheme.tertiary, const Color(0xff5e5e5e)); + expect(scheme.tertiaryContainer, const Color(0xffdddddd)); + expect(scheme.error, const Color(0xffba1a1a)); + expect(scheme.errorContainer, const Color(0xffffdad6)); + expect(scheme.surface, const Color(0xfffcf8f8)); + expect(scheme.surfaceContainer, const Color(0xfff1eded)); + }); test( 'FCS7.018-l: GIVEN a SeedColorScheme.fromSeeds using six seeds ' 'and variant expressive for a light scheme ' @@ -1227,6 +1396,33 @@ void main() { expect(scheme.surface, const Color(0xfffbf8ff)); expect(scheme.surfaceContainer, const Color(0xffeeedf8)); }); + test( + 'FCS7.018-l-mono: GIVEN a SeedColorScheme.fromSeeds using six seeds ' + 'and variant expressive for a light scheme and ' + 'respectMonochromeSeed true ' + 'EXPECT this given checked color result', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.light, + primaryKey: const Color(0xffdddddd), + secondaryKey: secondarySeedColor, + tertiaryKey: tertiarySeedColor, + errorKey: errorSeedColor, + neutralKey: neutralSeedColor, + neutralVariantKey: neutralVariantSeedColor, + respectMonochromeSeed: true, + variant: FlexSchemeVariant.expressive, + ); + expect(scheme.primary, const Color(0xff5e5e5e)); + expect(scheme.primaryContainer, const Color(0xffe2e2e2)); + expect(scheme.secondary, const Color(0xff7b5266)); + expect(scheme.secondaryContainer, const Color(0xffffd8e8)); + expect(scheme.tertiary, const Color(0xff1f695e)); + expect(scheme.tertiaryContainer, const Color(0xffa9f0e2)); + expect(scheme.error, const Color(0xffba1a1a)); + expect(scheme.errorContainer, const Color(0xffffdad6)); + expect(scheme.surface, const Color(0xfffbf8ff)); + expect(scheme.surfaceContainer, const Color(0xffeeedf8)); + }); test( 'FCS7.019-l: GIVEN a SeedColorScheme.fromSeeds using six seeds ' 'and variant fidelity for a light scheme ' @@ -1252,6 +1448,113 @@ void main() { expect(scheme.surface, const Color(0xfffcf8f8)); expect(scheme.surfaceContainer, const Color(0xfff1eded)); }); + test( + 'FCS7.019-l-mono: GIVEN a SeedColorScheme.fromSeeds using six ' + 'seeds and variant fidelity for a light scheme and ' + 'respectMonochromeSeed true ' + 'EXPECT this given checked color result', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.light, + primaryKey: const Color(0xffdddddd), + secondaryKey: secondarySeedColor, + tertiaryKey: tertiarySeedColor, + errorKey: errorSeedColor, + neutralKey: neutralSeedColor, + neutralVariantKey: neutralVariantSeedColor, + respectMonochromeSeed: true, + variant: FlexSchemeVariant.fidelity, + ); + expect(scheme.primary, const Color(0xff5e5e5e)); + expect(scheme.primaryContainer, const Color(0xffdddddd)); + expect(scheme.secondary, const Color(0xff4d5f7d)); + expect(scheme.secondaryContainer, const Color(0xffc8dbfe)); + expect(scheme.tertiary, const Color(0xff366a1d)); + expect(scheme.tertiaryContainer, const Color(0xffb1ee91)); + expect(scheme.error, const Color(0xffba1a1a)); + expect(scheme.errorContainer, const Color(0xffffdad6)); + expect(scheme.surface, const Color(0xfffcf8f8)); + expect(scheme.surfaceContainer, const Color(0xfff1eded)); + }); + test( + 'FCS7.019-l-mono-2: GIVEN a SeedColorScheme.fromSeeds using six ' + 'seeds and variant fidelity for a light scheme and ' + 'respectMonochromeSeed false ' + 'EXPECT this given checked color result', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.light, + primaryKey: const Color(0xffdddddd), + secondaryKey: secondarySeedColor, + tertiaryKey: const Color(0xFF999999), + errorKey: errorSeedColor, + neutralKey: neutralSeedColor, + neutralVariantKey: neutralVariantSeedColor, + respectMonochromeSeed: false, + variant: FlexSchemeVariant.fidelity, + ); + expect(scheme.primary, const Color(0xff5d5f5f)); + expect(scheme.primaryContainer, const Color(0xffdddddd)); + expect(scheme.secondary, const Color(0xff4d5f7d)); + expect(scheme.secondaryContainer, const Color(0xffc8dbfe)); + expect(scheme.tertiary, const Color(0xff5e5e5e)); + expect(scheme.tertiaryContainer, const Color(0xffdedddd)); + expect(scheme.error, const Color(0xffba1a1a)); + expect(scheme.errorContainer, const Color(0xffffdad6)); + expect(scheme.surface, const Color(0xfffcf8f8)); + expect(scheme.surfaceContainer, const Color(0xfff1eded)); + }); + test( + 'FCS7.019-l-mono-3: GIVEN a SeedColorScheme.fromSeeds using six ' + 'seeds and variant fidelity for a light scheme and ' + 'respectMonochromeSeed true ' + 'EXPECT this given checked color result', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.light, + primaryKey: const Color(0xffdddddd), + secondaryKey: const Color(0xFF555555), + tertiaryKey: const Color(0xFF999999), + errorKey: errorSeedColor, + neutralKey: neutralSeedColor, + neutralVariantKey: neutralVariantSeedColor, + respectMonochromeSeed: true, + variant: FlexSchemeVariant.fidelity, + ); + expect(scheme.primary, const Color(0xff5e5e5e)); + expect(scheme.primaryContainer, const Color(0xffdddddd)); + expect(scheme.secondary, const Color(0xff5e5e5e)); + expect(scheme.secondaryContainer, const Color(0xffe2e2e2)); + expect(scheme.tertiary, const Color(0xff5e5e5e)); + expect(scheme.tertiaryContainer, const Color(0xffdddddd)); + expect(scheme.error, const Color(0xffba1a1a)); + expect(scheme.errorContainer, const Color(0xffffdad6)); + expect(scheme.surface, const Color(0xfffcf8f8)); + expect(scheme.surfaceContainer, const Color(0xfff1eded)); + }); + test( + 'FCS7.019-l-mono-4: GIVEN a SeedColorScheme.fromSeeds using six ' + 'seeds and variant fidelity for a light scheme and ' + 'respectMonochromeSeed true ' + 'EXPECT this given checked color result', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.light, + primaryKey: const Color(0xffdddddd), + secondaryKey: const Color(0xFF555555), + errorKey: errorSeedColor, + neutralKey: neutralSeedColor, + neutralVariantKey: neutralVariantSeedColor, + respectMonochromeSeed: true, + variant: FlexSchemeVariant.fidelity, + ); + expect(scheme.primary, const Color(0xff5e5e5e)); + expect(scheme.primaryContainer, const Color(0xffdddddd)); + expect(scheme.secondary, const Color(0xff5e5e5e)); + expect(scheme.secondaryContainer, const Color(0xffe2e2e2)); + expect(scheme.tertiary, const Color(0xff5e5e5e)); + expect(scheme.tertiaryContainer, const Color(0xffdddddd)); + expect(scheme.error, const Color(0xffba1a1a)); + expect(scheme.errorContainer, const Color(0xffffdad6)); + expect(scheme.surface, const Color(0xfffcf8f8)); + expect(scheme.surfaceContainer, const Color(0xfff1eded)); + }); test( 'FCS7.020-l: GIVEN a SeedColorScheme.fromSeeds using six seeds ' 'and fruitSalad content for a light scheme ' @@ -1277,6 +1580,33 @@ void main() { expect(scheme.surface, const Color(0xfff9f9ff)); expect(scheme.surfaceContainer, const Color(0xffeaeefa)); }); + test( + 'FCS7.020-l-mono: GIVEN a SeedColorScheme.fromSeeds using six ' + 'seeds and fruitSalad content for a light scheme and ' + 'respectMonochromeSeed true ' + 'EXPECT this given checked color result', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.light, + primaryKey: Colors.black, + secondaryKey: secondarySeedColor, + tertiaryKey: tertiarySeedColor, + errorKey: errorSeedColor, + neutralKey: neutralSeedColor, + neutralVariantKey: neutralVariantSeedColor, + respectMonochromeSeed: true, + variant: FlexSchemeVariant.fruitSalad, + ); + expect(scheme.primary, const Color(0xff5e5e5e)); + expect(scheme.primaryContainer, const Color(0xffe2e2e2)); + expect(scheme.secondary, const Color(0xff006875)); + expect(scheme.secondaryContainer, const Color(0xff9eeffe)); + expect(scheme.tertiary, const Color(0xff446732)); + expect(scheme.tertiaryContainer, const Color(0xffc5efab)); + expect(scheme.error, const Color(0xffba1a1a)); + expect(scheme.errorContainer, const Color(0xffffdad6)); + expect(scheme.surface, const Color(0xfff9f9ff)); + expect(scheme.surfaceContainer, const Color(0xffeaeefa)); + }); test( 'FCS7.021-l: GIVEN a SeedColorScheme.fromSeeds using six seeds ' 'and monochrome content for a light scheme ' @@ -1302,6 +1632,33 @@ void main() { expect(scheme.surface, const Color(0xfff9f9f9)); expect(scheme.surfaceContainer, const Color(0xffeeeeee)); }); + test( + 'FCS7.021-l-mono: GIVEN a SeedColorScheme.fromSeeds using six seeds ' + 'and monochrome content for a light scheme and using mono error ' + 'respectMonochromeSeed true ' + 'EXPECT this given checked color result', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.light, + primaryKey: Colors.black, + secondaryKey: secondarySeedColor, + tertiaryKey: tertiarySeedColor, + errorKey: Colors.black, + neutralKey: neutralSeedColor, + neutralVariantKey: neutralVariantSeedColor, + respectMonochromeSeed: true, + variant: FlexSchemeVariant.monochrome, + ); + expect(scheme.primary, const Color(0xff000000)); + expect(scheme.primaryContainer, const Color(0xff3b3b3b)); + expect(scheme.secondary, const Color(0xff5e5e5e)); + expect(scheme.secondaryContainer, const Color(0xffd4d4d4)); + expect(scheme.tertiary, const Color(0xff3b3b3b)); + expect(scheme.tertiaryContainer, const Color(0xff747474)); + expect(scheme.error, const Color(0xff5e5e5e)); + expect(scheme.errorContainer, const Color(0xffe2e2e2)); + expect(scheme.surface, const Color(0xfff9f9f9)); + expect(scheme.surfaceContainer, const Color(0xffeeeeee)); + }); test( 'FCS7.022-l: GIVEN a SeedColorScheme.fromSeeds using six seeds ' 'and neutral content for a light scheme ' @@ -1327,6 +1684,55 @@ void main() { expect(scheme.surface, const Color(0xfffbf8fa)); expect(scheme.surfaceContainer, const Color(0xfff0edee)); }); + test( + 'FCS7.022-l-mono: GIVEN a SeedColorScheme.fromSeeds using six seeds ' + 'and neutral content for a light scheme and ' + 'respectMonochromeSeed true ' + 'EXPECT this given checked color result', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.light, + primaryKey: Colors.white, + secondaryKey: secondarySeedColor, + tertiaryKey: tertiarySeedColor, + errorKey: errorSeedColor, + neutralKey: neutralSeedColor, + neutralVariantKey: neutralVariantSeedColor, + respectMonochromeSeed: true, + variant: FlexSchemeVariant.neutral, + ); + expect(scheme.primary, const Color(0xff5e5e5e)); + expect(scheme.primaryContainer, const Color(0xffe2e2e2)); + expect(scheme.secondary, const Color(0xff5b5e66)); + expect(scheme.secondaryContainer, const Color(0xffe0e2ec)); + expect(scheme.tertiary, const Color(0xff55624c)); + expect(scheme.tertiaryContainer, const Color(0xffd8e7cb)); + expect(scheme.error, const Color(0xffba1a1a)); + expect(scheme.errorContainer, const Color(0xffffdad6)); + expect(scheme.surface, const Color(0xfffbf8fa)); + expect(scheme.surfaceContainer, const Color(0xfff0edee)); + }); + test( + 'FCS7.022-l-mono: GIVEN a SeedColorScheme.fromSeeds using one seed ' + 'and neutral content for a light scheme and ' + 'respectMonochromeSeed true ' + 'EXPECT this given checked color result', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.light, + primaryKey: Colors.white, + respectMonochromeSeed: true, + variant: FlexSchemeVariant.neutral, + ); + expect(scheme.primary, const Color(0xff5e5e5e)); + expect(scheme.primaryContainer, const Color(0xffe2e2e2)); + expect(scheme.secondary, const Color(0xFF5E5E5E)); + expect(scheme.secondaryContainer, const Color(0xFFE2E2E2)); + expect(scheme.tertiary, const Color(0xFF5E5E5E)); + expect(scheme.tertiaryContainer, const Color(0xffe2e2e2)); + expect(scheme.error, const Color(0xffba1a1a)); + expect(scheme.errorContainer, const Color(0xffffdad6)); + expect(scheme.surface, const Color(0xFFF9F9F9)); + expect(scheme.surfaceContainer, const Color(0xFFEEEEEE)); + }); test( 'FCS7.023-l: GIVEN a SeedColorScheme.fromSeeds using six seeds ' 'and rainbow content for a light scheme ' @@ -1352,6 +1758,32 @@ void main() { expect(scheme.surface, const Color(0xfff9f9f9)); expect(scheme.surfaceContainer, const Color(0xffeeeeee)); }); + test( + 'FCS7.023-l-mono: GIVEN a SeedColorScheme.fromSeeds using six seeds ' + 'and rainbow content for a light scheme ' + 'EXPECT this given checked color result', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.light, + primaryKey: const Color(0xFF111111), + secondaryKey: secondarySeedColor, + tertiaryKey: const Color(0xFF222222), + errorKey: errorSeedColor, + neutralKey: neutralSeedColor, + neutralVariantKey: neutralVariantSeedColor, + respectMonochromeSeed: true, + variant: FlexSchemeVariant.rainbow, + ); + expect(scheme.primary, const Color(0xff5e5e5e)); + expect(scheme.primaryContainer, const Color(0xffe2e2e2)); + expect(scheme.secondary, const Color(0xff555f71)); + expect(scheme.secondaryContainer, const Color(0xffd9e3f8)); + expect(scheme.tertiary, const Color(0xff5e5e5e)); + expect(scheme.tertiaryContainer, const Color(0xffe2e2e2)); + expect(scheme.error, const Color(0xffba1a1a)); + expect(scheme.errorContainer, const Color(0xffffdad6)); + expect(scheme.surface, const Color(0xfff9f9f9)); + expect(scheme.surfaceContainer, const Color(0xffeeeeee)); + }); test( 'FCS7.024-l: GIVEN a SeedColorScheme.fromSeeds using six seeds ' 'and vibrant content for a light scheme ' @@ -1378,6 +1810,147 @@ void main() { expect(scheme.surfaceContainer, const Color(0xffeaeefa)); }); + test( + 'FCS7.024-l-mono: GIVEN a SeedColorScheme.fromSeeds using six seeds ' + 'and vibrant content for a light scheme ' + 'EXPECT this given checked color result', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.light, + primaryKey: Colors.black, + secondaryKey: secondarySeedColor, + tertiaryKey: tertiarySeedColor, + errorKey: errorSeedColor, + neutralKey: neutralSeedColor, + neutralVariantKey: neutralVariantSeedColor, + respectMonochromeSeed: true, + variant: FlexSchemeVariant.vibrant, + ); + expect(scheme.primary, const Color(0xff5e5e5e)); + expect(scheme.primaryContainer, const Color(0xffe2e2e2)); + expect(scheme.secondary, const Color(0xff565d7e)); + expect(scheme.secondaryContainer, const Color(0xffdde1ff)); + expect(scheme.tertiary, const Color(0xff2b6952)); + expect(scheme.tertiaryContainer, const Color(0xffb0f0d2)); + expect(scheme.error, const Color(0xffba1a1a)); + expect(scheme.errorContainer, const Color(0xffffdad6)); + expect(scheme.surface, const Color(0xfff9f9ff)); + expect(scheme.surfaceContainer, const Color(0xffeaeefa)); + }); + + test( + 'FCS7.024-l-mono: GIVEN a SeedColorScheme.fromSeeds using one seed ' + 'and vibrant content for a light scheme ' + 'EXPECT this given checked color result', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.light, + primaryKey: const Color(0xFFAAAAAA), + respectMonochromeSeed: true, + variant: FlexSchemeVariant.vibrant, + ); + expect(scheme.primary, const Color(0xff5e5e5e)); + expect(scheme.primaryContainer, const Color(0xffe2e2e2)); + expect(scheme.secondary, const Color(0xFF5E5E5E)); + expect(scheme.secondaryContainer, const Color(0xFFE2E2E2)); + expect(scheme.tertiary, const Color(0xFF5E5E5E)); + expect(scheme.tertiaryContainer, const Color(0xffe2e2e2)); + expect(scheme.error, const Color(0xffba1a1a)); + expect(scheme.errorContainer, const Color(0xffffdad6)); + expect(scheme.surface, const Color(0xFFF9F9F9)); + expect(scheme.surfaceContainer, const Color(0xFFEEEEEE)); + }); + + test( + 'FCS7.025-l-mono: GIVEN a SeedColorScheme.fromSeeds using one seed ' + 'and chroma for a light scheme ' + 'EXPECT this given checked color result', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.light, + primaryKey: const Color(0xFFAAAAAA), + respectMonochromeSeed: true, + variant: FlexSchemeVariant.chroma, + ); + expect(scheme.primary, const Color(0xff5e5e5e)); + expect(scheme.primaryContainer, const Color(0xffc6c6c6)); + expect(scheme.secondary, const Color(0xff777777)); + expect(scheme.secondaryContainer, const Color(0xffe8e8e8)); + expect(scheme.tertiary, const Color(0xff777777)); + expect(scheme.tertiaryContainer, const Color(0xfff1f1f1)); + expect(scheme.error, const Color(0xffba1a1a)); + expect(scheme.errorContainer, const Color(0xffffdad6)); + expect(scheme.surface, const Color(0xfffcfcfc)); + expect(scheme.surfaceContainer, const Color(0xFFEEEEEE)); + }); + + test( + 'FCS7.025-d-mono: GIVEN a SeedColorScheme.fromSeeds using one seed ' + 'and chroma for a light scheme ' + 'EXPECT this given checked color result', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.dark, + primaryKey: const Color(0xFFAAAAAA), + respectMonochromeSeed: true, + variant: FlexSchemeVariant.chroma, + ); + expect(scheme.primary, const Color(0xffc6c6c6)); + expect(scheme.primaryContainer, const Color(0xff5e5e5e)); + expect(scheme.secondary, const Color(0xffababab)); + expect(scheme.secondaryContainer, const Color(0xff777777)); + expect(scheme.tertiary, const Color(0xffdadada)); + expect(scheme.tertiaryContainer, const Color(0xff474747)); + expect(scheme.error, const Color(0xffffb4ab)); + expect(scheme.errorContainer, const Color(0xff93000a)); + expect(scheme.surface, const Color(0xff0e0e0e)); + expect(scheme.surfaceContainer, const Color(0xff1f1f1f)); + }); + + test( + 'FCS7.025-l-mono-2: GIVEN a SeedColorScheme.fromSeeds using one seed ' + 'and chroma for a light scheme and error mono ' + 'EXPECT this given checked color result', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.light, + primaryKey: const Color(0xFFAAAAAA), + errorKey: const Color(0xFF888888), + respectMonochromeSeed: true, + useExpressiveOnContainerColors: true, + variant: FlexSchemeVariant.ultraContrast, + ); + expect(scheme.primary, const Color(0xff303030)); + expect(scheme.primaryContainer, const Color(0xffe2e2e2)); + expect(scheme.secondary, const Color(0xff5e5e5e)); + expect(scheme.secondaryContainer, const Color(0xffe2e2e2)); + expect(scheme.tertiary, const Color(0xff474747)); + expect(scheme.tertiaryContainer, const Color(0xfff1f1f1)); + expect(scheme.error, const Color(0xff5e5e5e)); + expect(scheme.errorContainer, const Color(0xfff1f1f1)); + expect(scheme.surface, const Color(0xffffffff)); + expect(scheme.surfaceContainer, const Color(0xfff3f3f3)); + }); + + test( + 'FCS7.025-d-mono-2: GIVEN a SeedColorScheme.fromSeeds using one seed ' + 'and chroma for a light scheme and error mono ' + 'EXPECT this given checked color result', () { + final ColorScheme scheme = SeedColorScheme.fromSeeds( + brightness: Brightness.dark, + primaryKey: const Color(0xFFAAAAAA), + errorKey: const Color(0xFF888888), + respectMonochromeSeed: true, + useExpressiveOnContainerColors: true, + variant: FlexSchemeVariant.ultraContrast, + ); + expect(scheme.primary, const Color(0xffe2e2e2)); + expect(scheme.primaryContainer, const Color(0xff474747)); + expect(scheme.secondary, const Color(0xfff1f1f1)); + expect(scheme.secondaryContainer, const Color(0xff474747)); + expect(scheme.tertiary, const Color(0xfff1f1f1)); + expect(scheme.tertiaryContainer, const Color(0xff474747)); + expect(scheme.error, const Color(0xffc6c6c6)); + expect(scheme.errorContainer, const Color(0xff474747)); + expect(scheme.surface, const Color(0xff070707)); + expect(scheme.surfaceContainer, const Color(0xff1f1f1f)); + }); + test( 'FCS7.026-l: GIVEN a SeedColorScheme.fromSeeds using primary seed ' 'and variant material3Legacy for a light scheme ' @@ -1481,10 +2054,6 @@ void main() { expect(scheme.shadow, Color(scheme2.shadow)); expect(scheme.scrim, Color(scheme2.scrim)); expect(scheme.surfaceTint, Color(scheme2.primary)); - // TODO(rydmike): No longer testing these deprecated colors. - // expect(scheme.background, Color(scheme2.background)); - // expect(scheme.onBackground, Color(scheme2.onBackground)); - // expect(scheme.surfaceVariant, Color(scheme2.surfaceVariant)); }); test( @@ -1561,10 +2130,6 @@ void main() { expect(scheme.shadow, Color(scheme2.shadow)); expect(scheme.scrim, Color(scheme2.scrim)); expect(scheme.surfaceTint, Color(scheme2.primary)); - // TODO(rydmike): No longer testing these deprecated colors. - // expect(scheme.background, Color(scheme2.background)); - // expect(scheme.onBackground, Color(scheme2.onBackground)); - // expect(scheme.surfaceVariant, Color(scheme2.surfaceVariant)); }); }); }