refactor(themes): update theme preset mixins (#15101)

IgniteUI · Nov 22, 2024 · 45b82aa · 45b82aa
1 parent e6b257a
commit 45b82aa
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 20 deletions.
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
@@ -6,6 +6,7 @@
 @use '../../base' as *;
 @use '../../components' as *;
 @use 'igniteui-theming/sass/color' as *;
+@use 'igniteui-theming/sass/color/presets' as *;
 @use 'igniteui-theming/sass/elevations' as *;
 @use 'igniteui-theming/sass/elevations/presets' as elevations;
 @use 'igniteui-theming/sass/utils' as *;
@@ -683,7 +684,7 @@
     );
 
     @include theme(
-        $palette: $light-palette,
+        $palette: $light-material-palette,
         $schema: $light-material-schema,
         $exclude: $exclude,
         $roundness: $roundness,
@@ -716,7 +717,7 @@
     );
 
     @include theme(
-        $palette: $dark-palette,
+        $palette: $dark-material-palette,
         $schema: $dark-material-schema,
         $exclude: $exclude,
         $roundness: $roundness,

diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_bootstrap.scss
@@ -1,6 +1,7 @@
 @use 'base' as *;
 @use '../schemas' as *;
 @use 'igniteui-theming/sass/color' as *;
+@use 'igniteui-theming/sass/color/presets' as *;
 
 ////
 /// @group themes
@@ -20,7 +21,8 @@
 ) {
     $primary: color($palette, 'primary');
     $secondary: color($palette, 'secondary');
-    $surface: color($palette, 'surface');
+    $gray: color($light-bootstrap-palette, 'gray');
+    $surface: color($light-bootstrap-palette, 'surface');
     $info: color($palette, 'info');
     $success: color($palette, 'success');
     $warn: color($palette, 'warn');
@@ -30,8 +32,8 @@
         $palette: palette(
             $primary,
             $secondary,
-            $surface: if($surface != #f8f9fa, $surface, #f8f9fa),
-            $gray: #212529,
+            $surface: $surface,
+            $gray: $gray,
             $info: $info,
             $success: $success,
             $warn: $warn,
@@ -56,7 +58,8 @@
 ) {
     $primary: color($palette, 'primary');
     $secondary: color($palette, 'secondary');
-    $surface: color($palette, 'surface');
+    $gray: color($dark-bootstrap-palette, 'gray');
+    $surface: color($dark-bootstrap-palette, 'surface');
     $info: color($palette, 'info');
     $success: color($palette, 'success');
     $warn: color($palette, 'warn');
@@ -66,8 +69,8 @@
         $palette: palette(
             $primary,
             $secondary,
-            $surface: if($surface != white, $surface, #222),
-            $gray: #fff,
+            $surface: $surface,
+            $gray: $gray,
             $info: $info,
             $success: $success,
             $warn: $warn,

diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_fluent.scss
@@ -1,6 +1,7 @@
 @use 'base' as *;
 @use '../schemas' as *;
 @use 'igniteui-theming/sass/color' as *;
+@use 'igniteui-theming/sass/color/presets' as *;
 
 ////
 /// @group themes
@@ -20,7 +21,8 @@
 ) {
     $primary: color($palette, 'primary');
     $secondary: color($palette, 'secondary');
-    $surface: color($palette, 'surface');
+    $gray: color($light-fluent-palette, 'gray');
+    $surface: color($light-fluent-palette, 'surface');
     $info: color($palette, 'info');
     $success: color($palette, 'success');
     $warn: color($palette, 'warn');
@@ -30,8 +32,8 @@
         $palette: palette(
             $primary,
             $secondary,
-            $surface: if($surface != #fff, $surface, #fff),
-            $gray: #000,
+            $surface: $surface,
+            $gray: $gray,
             $info: $info,
             $success: $success,
             $warn: $warn,
@@ -56,7 +58,8 @@
 ) {
     $primary: color($palette, 'primary');
     $secondary: color($palette, 'secondary');
-    $surface: color($palette, 'surface');
+    $gray: color($dark-fluent-palette, 'gray');
+    $surface: color($dark-fluent-palette, 'surface');
     $info: color($palette, 'info');
     $success: color($palette, 'success');
     $warn: color($palette, 'warn');
@@ -66,8 +69,8 @@
         $palette: palette(
             $primary,
             $secondary,
-            $surface: if($surface != #fff, $surface, #222),
-            $gray: #fff,
+            $surface: $surface,
+            $gray: $gray,
             $info: $info,
             $success: $success,
             $warn: $warn,

diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_indigo.scss
@@ -1,6 +1,7 @@
 @use 'base' as *;
 @use '../schemas' as *;
 @use 'igniteui-theming/sass/color' as *;
+@use 'igniteui-theming/sass/color/presets' as *;
 @use 'igniteui-theming/sass/elevations/presets' as elevations;
 
 ////
@@ -21,7 +22,8 @@
 ) {
     $primary: color($palette, 'primary');
     $secondary: color($palette, 'secondary');
-    $surface: color($palette, 'surface');
+    $gray: color($light-indigo-palette, 'gray');
+    $surface: color($light-indigo-palette, 'surface');
     $info: color($palette, 'info');
     $success: color($palette, 'success');
     $warn: color($palette, 'warn');
@@ -31,8 +33,8 @@
         $palette: palette(
             $primary,
             $secondary,
-            $surface: if($surface != #fff, $surface, #fff),
-            $gray: #060716,
+            $surface: $surface,
+            $gray: $gray,
             $info: $info,
             $success: $success,
             $warn: $warn,
@@ -58,7 +60,8 @@
 ) {
     $primary: color($palette, 'primary');
     $secondary: color($palette, 'secondary');
-    $surface: color($palette, 'surface');
+    $gray: color($dark-indigo-palette, 'gray');
+    $surface: color($dark-indigo-palette, 'surface');
     $info: color($palette, 'info');
     $success: color($palette, 'success');
     $warn: color($palette, 'warn');
@@ -68,8 +71,8 @@
         $palette: palette(
             $primary,
             $secondary,
-            $surface: if($surface != white, $surface, #2a2b2f),
-            $gray: #fff,
+            $surface: $surface,
+            $gray: $gray,
             $info: $info,
             $success: $success,
             $warn: $warn,