Update MCU to for expressive on-colors.

PiperOrigin-RevId: 642276412
material-foundation · Jun 11, 2024 · 03336bf · 03336bf
1 parent 1e2c1ae
commit 03336bf
Show file tree

Hide file tree

Showing 11 changed files with 124 additions and 67 deletions.
diff --git a/cpp/dynamiccolor/material_dynamic_colors.cc b/cpp/dynamiccolor/material_dynamic_colors.cc
@@ -593,7 +593,8 @@ DynamicColor MaterialDynamicColors::PrimaryContainer() {
 
 DynamicColor MaterialDynamicColors::OnPrimaryContainer() {
   return DynamicColor(
-      /* name= */ "on_primary_container",
+      /* name= */
+      "on_primary_container",
       /* palette= */
       [](const DynamicScheme& s) -> TonalPalette { return s.primary_palette; },
       /* tone= */
@@ -604,13 +605,13 @@ DynamicColor MaterialDynamicColors::OnPrimaryContainer() {
         if (IsMonochrome(s)) {
           return s.is_dark ? 0.0 : 100.0;
         }
-        return s.is_dark ? 90.0 : 10.0;
+        return s.is_dark ? 90.0 : 30.0;
       },
       /* isBackground= */ false,
       /* background= */
       [](const DynamicScheme& s) -> DynamicColor { return PrimaryContainer(); },
       /* secondBackground= */ nullopt,
-      /* contrastCurve= */ ContrastCurve(4.5, 7.0, 11.0, 21.0),
+      /* contrastCurve= */ ContrastCurve(3.0, 4.5, 7.0, 11.0),
       /* toneDeltaPair= */ nullopt);
 }
 
@@ -707,16 +708,20 @@ DynamicColor MaterialDynamicColors::SecondaryContainer() {
 
 DynamicColor MaterialDynamicColors::OnSecondaryContainer() {
   return DynamicColor(
-      /* name= */ "on_secondary_container",
+      /* name= */
+      "on_secondary_container",
       /* palette= */
       [](const DynamicScheme& s) -> TonalPalette {
         return s.secondary_palette;
       },
       /* tone= */
       [](const DynamicScheme& s) -> double {
-        if (!IsFidelity(s)) {
+        if (IsMonochrome(s)) {
           return s.is_dark ? 90.0 : 10.0;
         }
+        if (!IsFidelity(s)) {
+          return s.is_dark ? 90.0 : 30.0;
+        }
         return ForegroundTone(SecondaryContainer().tone_(s), 4.5);
       },
       /* isBackground= */ false,
@@ -725,7 +730,7 @@ DynamicColor MaterialDynamicColors::OnSecondaryContainer() {
         return SecondaryContainer();
       },
       /* secondBackground= */ nullopt,
-      /* contrastCurve= */ ContrastCurve(4.5, 7.0, 11.0, 21.0),
+      /* contrastCurve= */ ContrastCurve(3.0, 4.5, 7.0, 11.0),
       /* toneDeltaPair= */ nullopt);
 }
 
@@ -804,7 +809,8 @@ DynamicColor MaterialDynamicColors::TertiaryContainer() {
 
 DynamicColor MaterialDynamicColors::OnTertiaryContainer() {
   return DynamicColor(
-      /* name= */ "on_tertiary_container",
+      /* name= */
+      "on_tertiary_container",
       /* palette= */
       [](const DynamicScheme& s) -> TonalPalette { return s.tertiary_palette; },
       /* tone= */
@@ -813,7 +819,7 @@ DynamicColor MaterialDynamicColors::OnTertiaryContainer() {
           return s.is_dark ? 0.0 : 100.0;
         }
         if (!IsFidelity(s)) {
-          return s.is_dark ? 90.0 : 10.0;
+          return s.is_dark ? 90.0 : 30.0;
         }
         return ForegroundTone(TertiaryContainer().tone_(s), 4.5);
       },
@@ -823,7 +829,7 @@ DynamicColor MaterialDynamicColors::OnTertiaryContainer() {
         return TertiaryContainer();
       },
       /* secondBackground= */ nullopt,
-      /* contrastCurve= */ ContrastCurve(4.5, 7.0, 11.0, 21.0),
+      /* contrastCurve= */ ContrastCurve(3.0, 4.5, 7.0, 11.0),
       /* toneDeltaPair= */ nullopt);
 }
 
@@ -882,16 +888,22 @@ DynamicColor MaterialDynamicColors::ErrorContainer() {
 
 DynamicColor MaterialDynamicColors::OnErrorContainer() {
   return DynamicColor(
-      /* name= */ "on_error_container",
+      /* name= */
+      "on_error_container",
       /* palette= */
       [](const DynamicScheme& s) -> TonalPalette { return s.error_palette; },
       /* tone= */
-      [](const DynamicScheme& s) -> double { return s.is_dark ? 90.0 : 10.0; },
+      [](const DynamicScheme& s) -> double {
+        if (IsMonochrome(s)) {
+          return s.is_dark ? 90.0 : 10.0;
+        }
+        return s.is_dark ? 90.0 : 30.0;
+      },
       /* isBackground= */ false,
       /* background= */
       [](const DynamicScheme& s) -> DynamicColor { return ErrorContainer(); },
       /* secondBackground= */ nullopt,
-      /* contrastCurve= */ ContrastCurve(4.5, 7.0, 11.0, 21.0),
+      /* contrastCurve= */ ContrastCurve(3.0, 4.5, 7.0, 11.0),
       /* toneDeltaPair= */ nullopt);
 }
 

diff --git a/dart/CHANGELOG.md b/dart/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.12.0 - 2024-06-06
+### Changed
+- Updated `MaterialDynamicColors` to use the expressive on-colors spec.
+
 ## 0.11.2 - 2024-04-30
 ### Changed
 - Updated `TonalPalette` to use new key color algorithm.

diff --git a/dart/lib/dynamiccolor/material_dynamic_colors.dart b/dart/lib/dynamiccolor/material_dynamic_colors.dart
@@ -279,10 +279,10 @@ class MaterialDynamicColors {
       if (_isMonochrome(s)) {
         return s.isDark ? 0 : 100;
       }
-      return s.isDark ? 90 : 10;
+      return s.isDark ? 90 : 30;
     },
     background: (s) => MaterialDynamicColors.primaryContainer,
-    contrastCurve: ContrastCurve(4.5, 7, 11, 21),
+    contrastCurve: ContrastCurve(3, 4.5, 7, 11),
   );
 
   static DynamicColor inversePrimary = DynamicColor.fromPalette(
@@ -351,14 +351,17 @@ class MaterialDynamicColors {
     name: 'on_secondary_container',
     palette: (s) => s.secondaryPalette,
     tone: (s) {
-      if (!_isFidelity(s)) {
+      if (_isMonochrome(s)) {
         return s.isDark ? 90 : 10;
       }
+      if (!_isFidelity(s)) {
+        return s.isDark ? 90 : 30;
+      }
       return DynamicColor.foregroundTone(
           MaterialDynamicColors.secondaryContainer.tone(s), 4.5);
     },
     background: (s) => MaterialDynamicColors.secondaryContainer,
-    contrastCurve: ContrastCurve(4.5, 7, 11, 21),
+    contrastCurve: ContrastCurve(3, 4.5, 7, 11),
   );
 
   static DynamicColor tertiary = DynamicColor.fromPalette(
@@ -418,13 +421,13 @@ class MaterialDynamicColors {
         return s.isDark ? 0 : 100;
       }
       if (!_isFidelity(s)) {
-        return s.isDark ? 90 : 10;
+        return s.isDark ? 90 : 30;
       }
       return DynamicColor.foregroundTone(
           MaterialDynamicColors.tertiaryContainer.tone(s), 4.5);
     },
     background: (s) => MaterialDynamicColors.tertiaryContainer,
-    contrastCurve: ContrastCurve(4.5, 7, 11, 21),
+    contrastCurve: ContrastCurve(3, 4.5, 7, 11),
   );
 
   static DynamicColor error = DynamicColor.fromPalette(
@@ -460,9 +463,14 @@ class MaterialDynamicColors {
   static DynamicColor onErrorContainer = DynamicColor.fromPalette(
     name: 'on_error_container',
     palette: (s) => s.errorPalette,
-    tone: (s) => s.isDark ? 90 : 10,
+    tone: (s) {
+      if (_isMonochrome(s)) {
+        return s.isDark ? 90 : 10;
+      }
+      return s.isDark ? 90 : 30;
+    },
     background: (s) => MaterialDynamicColors.errorContainer,
-    contrastCurve: ContrastCurve(4.5, 7, 11, 21),
+    contrastCurve: ContrastCurve(3, 4.5, 7, 11),
   );
 
   static DynamicColor primaryFixed = DynamicColor.fromPalette(

diff --git a/dart/pubspec.yaml b/dart/pubspec.yaml
@@ -14,7 +14,7 @@
 
 name: material_color_utilities
 description: Algorithms and utilities that power the Material Design 3 color system, including choosing theme colors from images and creating tones of colors; all in a new color space.
-version: 0.11.2
+version: 0.12.0
 repository: https://github.com/material-foundation/material-color-utilities/tree/main/dart
 issue_tracker: https://github.com/material-foundation/material-color-utilities/issues
 screenshots:

diff --git a/dart/test/dynamic_color_test.dart b/dart/test/dynamic_color_test.dart
@@ -12,15 +12,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import 'package:material_color_utilities/hct/hct.dart';
 import 'package:material_color_utilities/contrast/contrast.dart';
 import 'package:material_color_utilities/dynamiccolor/dynamic_color.dart';
 import 'package:material_color_utilities/dynamiccolor/material_dynamic_colors.dart';
+import 'package:material_color_utilities/hct/hct.dart';
 import 'package:material_color_utilities/scheme/scheme_content.dart';
 import 'package:material_color_utilities/scheme/scheme_fidelity.dart';
 import 'package:material_color_utilities/scheme/scheme_monochrome.dart';
 import 'package:material_color_utilities/scheme/scheme_tonal_spot.dart';
-
 import 'package:test/test.dart';
 
 final seedColors = [
@@ -120,7 +119,7 @@ void main() {
         isDark: true,
         contrastLevel: -0.5,
       )),
-      equals(0xffbac040),
+      equals(0xff959b1a),
     );
     expect(
       MaterialDynamicColors.inverseSurface.getArgb(SchemeContent(

diff --git a/dart/test/scheme_correctness_test.dart b/dart/test/scheme_correctness_test.dart
@@ -283,16 +283,16 @@ final constraints = [
       contrastCurve: ContrastCurve(4.5, 7, 11, 21)),
   _ContrastConstraint(MaterialDynamicColors.onPrimaryContainer,
       MaterialDynamicColors.primaryContainer,
-      contrastCurve: ContrastCurve(4.5, 7, 11, 21)),
+      contrastCurve: ContrastCurve(3, 4.5, 7, 11)),
   _ContrastConstraint(MaterialDynamicColors.onSecondaryContainer,
       MaterialDynamicColors.secondaryContainer,
-      contrastCurve: ContrastCurve(4.5, 7, 11, 21)),
+      contrastCurve: ContrastCurve(3, 4.5, 7, 11)),
   _ContrastConstraint(MaterialDynamicColors.onTertiaryContainer,
       MaterialDynamicColors.tertiaryContainer,
-      contrastCurve: ContrastCurve(4.5, 7, 11, 21)),
+      contrastCurve: ContrastCurve(3, 4.5, 7, 11)),
   _ContrastConstraint(MaterialDynamicColors.onErrorContainer,
       MaterialDynamicColors.errorContainer,
-      contrastCurve: ContrastCurve(4.5, 7, 11, 21)),
+      contrastCurve: ContrastCurve(3, 4.5, 7, 11)),
   _ContrastConstraint(
       MaterialDynamicColors.onPrimaryFixed, MaterialDynamicColors.primaryFixed,
       contrastCurve: ContrastCurve(4.5, 7, 11, 21)),

diff --git a/java/dynamiccolor/MaterialDynamicColors.java b/java/dynamiccolor/MaterialDynamicColors.java
@@ -434,12 +434,12 @@ public DynamicColor onPrimaryContainer() {
           if (isMonochrome(s)) {
             return s.isDark ? 0.0 : 100.0;
           }
-          return s.isDark ? 90.0 : 10.0;
+          return s.isDark ? 90.0 : 30.0;
         },
         /* isBackground= */ false,
         /* background= */ (s) -> primaryContainer(),
         /* secondBackground= */ null,
-        /* contrastCurve= */ new ContrastCurve(4.5, 7.0, 11.0, 21.0),
+        /* contrastCurve= */ new ContrastCurve(3.0, 4.5, 7.0, 11.0),
         /* toneDeltaPair= */ null);
   }
 
@@ -519,15 +519,18 @@ public DynamicColor onSecondaryContainer() {
         /* name= */ "on_secondary_container",
         /* palette= */ (s) -> s.secondaryPalette,
         /* tone= */ (s) -> {
-          if (!isFidelity(s)) {
+          if (isMonochrome(s)) {
             return s.isDark ? 90.0 : 10.0;
           }
+          if (!isFidelity(s)) {
+            return s.isDark ? 90.0 : 30.0;
+          }
           return DynamicColor.foregroundTone(secondaryContainer().tone.apply(s), 4.5);
         },
         /* isBackground= */ false,
         /* background= */ (s) -> secondaryContainer(),
         /* secondBackground= */ null,
-        /* contrastCurve= */ new ContrastCurve(4.5, 7.0, 11.0, 21.0),
+        /* contrastCurve= */ new ContrastCurve(3.0, 4.5, 7.0, 11.0),
         /* toneDeltaPair= */ null);
   }
 
@@ -601,14 +604,14 @@ public DynamicColor onTertiaryContainer() {
             return s.isDark ? 0.0 : 100.0;
           }
           if (!isFidelity(s)) {
-            return s.isDark ? 90.0 : 10.0;
+            return s.isDark ? 90.0 : 30.0;
           }
           return DynamicColor.foregroundTone(tertiaryContainer().tone.apply(s), 4.5);
         },
         /* isBackground= */ false,
         /* background= */ (s) -> tertiaryContainer(),
         /* secondBackground= */ null,
-        /* contrastCurve= */ new ContrastCurve(4.5, 7.0, 11.0, 21.0),
+        /* contrastCurve= */ new ContrastCurve(3.0, 4.5, 7.0, 11.0),
         /* toneDeltaPair= */ null);
   }
 
@@ -658,11 +661,16 @@ public DynamicColor onErrorContainer() {
     return new DynamicColor(
         /* name= */ "on_error_container",
         /* palette= */ (s) -> s.errorPalette,
-        /* tone= */ (s) -> s.isDark ? 90.0 : 10.0,
+        /* tone= */ (s) -> {
+          if (isMonochrome(s)) {
+            return s.isDark ? 90.0 : 10.0;
+          }
+          return s.isDark ? 90.0 : 30.0;
+        },
         /* isBackground= */ false,
         /* background= */ (s) -> errorContainer(),
         /* secondBackground= */ null,
-        /* contrastCurve= */ new ContrastCurve(4.5, 7.0, 11.0, 21.0),
+        /* contrastCurve= */ new ContrastCurve(3.0, 4.5, 7.0, 11.0),
         /* toneDeltaPair= */ null);
   }
 

diff --git a/swift/Sources/MaterialColorUtilities/DynamicColor/MaterialDynamicColors.swift b/swift/Sources/MaterialColorUtilities/DynamicColor/MaterialDynamicColors.swift
@@ -402,12 +402,12 @@ public class MaterialDynamicColors {
       if _isMonochrome(scheme) {
         return scheme.isDark ? 0 : 100
       }
-      return scheme.isDark ? 90 : 10
+      return scheme.isDark ? 90 : 30
     },
     background: { scheme in
       return MaterialDynamicColors.primaryContainer
     },
-    contrastCurve: ContrastCurve(4.5, 7, 11, 21)
+    contrastCurve: ContrastCurve(3, 4.5, 7, 11)
   )
 
   public static let inversePrimary: DynamicColor = DynamicColor(
@@ -497,16 +497,19 @@ public class MaterialDynamicColors {
       return scheme.secondaryPalette
     },
     tone: { scheme in
-      if !_isFidelity(scheme) {
+      if _isMonochrome(scheme) {
         return scheme.isDark ? 90 : 10
       }
+      if !_isFidelity(scheme) {
+        return scheme.isDark ? 90 : 30
+      }
       return DynamicColor.foregroundTone(
         MaterialDynamicColors.secondaryContainer.tone(scheme), 4.5)
     },
     background: { scheme in
       return MaterialDynamicColors.secondaryContainer
     },
-    contrastCurve: ContrastCurve(4.5, 7, 11, 21)
+    contrastCurve: ContrastCurve(3, 4.5, 7, 11)
   )
 
   public static let tertiary: DynamicColor = DynamicColor(
@@ -586,15 +589,15 @@ public class MaterialDynamicColors {
         return scheme.isDark ? 0 : 100
       }
       if !_isFidelity(scheme) {
-        return scheme.isDark ? 90 : 10
+        return scheme.isDark ? 90 : 30
       }
       return DynamicColor.foregroundTone(
         MaterialDynamicColors.tertiaryContainer.tone(scheme), 4.5)
     },
     background: { scheme in
       return MaterialDynamicColors.tertiaryContainer
     },
-    contrastCurve: ContrastCurve(4.5, 7, 11, 21)
+    contrastCurve: ContrastCurve(3, 4.5, 7, 11)
   )
 
   public static let error: DynamicColor = DynamicColor(
@@ -657,12 +660,15 @@ public class MaterialDynamicColors {
       return scheme.errorPalette
     },
     tone: { scheme in
-      return scheme.isDark ? 90 : 10
+      if _isMonochrome(scheme) {
+        return scheme.isDark ? 90 : 10
+      }
+      return scheme.isDark ? 90 : 30
     },
     background: { scheme in
       return MaterialDynamicColors.errorContainer
     },
-    contrastCurve: ContrastCurve(4.5, 7, 11, 21)
+    contrastCurve: ContrastCurve(3, 4.5, 7, 11)
   )
 
   public static let primaryFixed: DynamicColor = DynamicColor(