material-foundation / material-theme-builder

Visualize dynamic color and create a custom Material Theme.
https://material-foundation.github.io/material-theme-builder/
Apache License 2.0
364 stars 28 forks source link

Colour harmonization feature not implemented #34

Closed tonyhallett closed 2 years ago

tonyhallett commented 2 years ago

Describe the bug From https://m3.material.io/styles/color/the-color-system/custom-colors

The Material Theme Builder will include a color harmonization feature that can shift tones of a custom color to ensure that visual balance and accessible contrast is achieved when combined with user-generated colors.

To Reproduce There is no such feature.

Expected behavior There is such a feature

Additional context Add any other context about the problem here.

https://github.com/material-foundation/material-dynamic-color-flutter/blob/main/lib/src/harmonization.dart

extension ColorSchemeHarmonization on ColorScheme {
  /// Harmonizes [color] with this [ColorScheme]'s [primary].
  Color _harmonizeWithPrimary(Color color) => _harmonizeColor(color, primary);

  /// Harmonizes semantic and custom [ColorScheme] colors with its [primary] color.
  ///
  /// Harmonization makes adding and introducing new colors to your app more
  /// seamless by automatically shifting hue and chroma slightly so that a
  /// product's colors feel more cohesive with user colors.
  ///
  /// Semantic colors (i.e. colors with meaning) include colors such as [error].
  /// See https://m3.material.io/styles/color/the-color-system/custom-colors#harmonization
  /// for more information.
  ///
  /// Subclasses of [ColorScheme] that add custom colors should re-implement
  /// [harmonized]. For example:
  /// import 'package:dynamic_color/dynamic_color.dart';
  ///
  /// class CustomColorScheme extends ColorScheme {
  ///   const CustomColorScheme(this.customYellow) : super(...);
  ///
  ///   final Color customYellow;
  ///
  ///   CustomColorScheme copyWith({ ... }) {}
  ///
  ///   CustomColorScheme harmonized() {
  ///     return copyWith(
  ///       customYellow: _harmonizeWithPrimary(customYellow),
  ///       error: _harmonizeWithPrimary(error),
  ///       onError: _harmonizeWithPrimary(onError),
  ///       errorContainer: _harmonizeWithPrimary(errorContainer),
  ///       onErrorContainer: _harmonizeWithPrimary(onErrorContainer),
  ///     );
  ///   }
  /// }
  ///

I would expect that each of the roles colorCustom, onColorCustom, colorContainerCustom, onColorContainerCustom taken from custom color palette to be harmonized with primary in the same way as error above. The light scheme from the light primary colour and for the dark scheme the dark primary colour.

rodydavis commented 2 years ago

It is now implemented on the web! 🎉

https://material-foundation.github.io/material-theme-builder/#/dynamic

Figma version is in progress