fix(material): add the option to auto ajust contrast for material swa…

…tches
telerik · Sep 11, 2021 · 058c115 · 058c115
1 parent 8773e40
commit 058c115
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 14 deletions.
diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss
@@ -61,11 +61,12 @@ $default-scrollbar-width: 17px !default;
 $primary-palette-name: indigo !default;
 $secondary-palette-name: pink !default;
 $tertiary-palette-name: teal !default;
+$adjust-contrast: true !default;
 $theme-type: light !default; // light or dark
 
-$primary-palette: material-palette($primary-palette-name) !default;
-$secondary-palette: material-palette($secondary-palette-name) !default;
-$tertiary-palette: material-palette($tertiary-palette-name) !default;
+$primary-palette: material-palette( $primary-palette-name, 500, 300, 700, $adjust-contrast ) !default;
+$secondary-palette: material-palette( $secondary-palette-name, 500, 300, 700, $adjust-contrast ) !default;
+$tertiary-palette: material-palette( $tertiary-palette-name, 500, 300, 700, $adjust-contrast ) !default;
 
 $theme: material-theme(
     $primary-palette,

diff --git a/packages/material/scss/core/_color-system.scss b/packages/material/scss/core/_color-system.scss
@@ -726,24 +726,26 @@ $material-light-complimentary: (
 
 // Creates a map of hues to colors for a theme. This is used to define a theme palette in terms
 // of the Material Design hues.
-@function material-palette($base-palette, $main: 500, $lighter: 300, $darker: 700) {
+@function material-palette($base-palette, $main: 500, $lighter: 300, $darker: 700, $adjust-contrast: true) {
 
     @if not (type-of($base-palette) == map) {
         $base-palette: get-base-palette($base-palette);
     }
 
     $main-contrast: material-contrast($base-palette, $main);
 
-    @if ($theme-type == dark) and ($main-contrast == $light-primary-text) {
-        $main: 200;
-        $lighter: 100;
-        $darker: 300;
-    }
-
-    @if ($theme-type == light) and ($main-contrast == $dark-primary-text) {
-        $main: 800;
-        $lighter: 700;
-        $darker: 900;
+    @if ( $adjust-contrast == true ) {
+        @if ($theme-type == dark) and ($main-contrast == $light-primary-text) {
+            $main: 200;
+            $lighter: 100;
+            $darker: 300;
+        }
+
+        @if ($theme-type == light) and ($main-contrast == $dark-primary-text) {
+            $main: 800;
+            $lighter: 700;
+            $darker: 900;
+        }
     }
 
     $result: map-merge($base-palette, (