refactor(themes): update samples and presets (#15203)

IgniteUI · Jan 7, 2025 · b94df70 · b94df70
1 parent ab58c9e
commit b94df70
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 143 deletions.
diff --git a/projects/igniteui-angular/src/lib/core/styles/base/_mixins.scss b/projects/igniteui-angular/src/lib/core/styles/base/_mixins.scss
@@ -1,4 +1,5 @@
 @use 'igniteui-theming/sass/color/functions' as *;
+@use 'igniteui-theming/sass/color/presets/light/material' as *;
 @use 'variables' as *;
 @use 'functions' as *;
 @use 'sass:color';
@@ -112,7 +113,7 @@
 ///     $suffix: 'bg'
 ///   );
 /// @requires {mixin} gen-color-class
-@mixin gen-color-classes($prop, $prefix, $suffix, $palette: $default-palette) {
+@mixin gen-color-classes($prop, $prefix, $suffix) {
     @each $name, $color in $palette {
         @each $variant, $value in $color {
             @if meta.type-of($value) != 'map' {
@@ -140,6 +141,6 @@
 ///     $suffix: 'bg'
 ///   );
 /// @requires {mixin} gen-color-classes
-@mixin color-classes($prop, $suffix: null, $prefix: 'igx', $palette: $default-palette) {
-    @include gen-color-classes($prop, $prefix, $suffix, $palette);
+@mixin color-classes($prop, $suffix: null, $prefix: 'igx') {
+    @include gen-color-classes($prop, $prefix, $suffix);
 }
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
@@ -670,16 +670,16 @@
     $roundness: null,
     $elevation: true,
 ) {
-    $gray: color($palette, 'gray');
-    $surface: color($palette, 'surface');
+    $gray: color($palette, gray);
+    $surface: color($palette, surface);
 
     $_light-palette: palette(
-        $primary: color($palette, 'primary'),
-        $secondary: color($palette, 'secondary'),
-        $info: color($palette, 'info'),
-        $success: color($palette, 'success'),
-        $warn: color($palette, 'warn'),
-        $error: color($palette, 'error'),
+        $primary: color($palette, primary),
+        $secondary: color($palette, secondary),
+        $info: color($palette, info),
+        $success: color($palette, success),
+        $warn: color($palette, warn),
+        $error: color($palette, error),
         $surface: if($surface != #fff, $surface, #fff),
         $gray: if($gray != #9e9e9e, $gray, #000),
     );
@@ -704,16 +704,16 @@
     $roundness: null,
     $elevation: true,
 ) {
-    $gray: color($palette, 'gray');
-    $surface: color($palette, 'surface');
+    $gray: color($palette, gray);
+    $surface: color($palette, surface);
 
     $_dark-palette: palette(
-        $primary: color($palette, 'primary'),
-        $secondary: color($palette, 'secondary'),
-        $info: color($palette, 'info'),
-        $success: color($palette, 'success'),
-        $warn: color($palette, 'warn'),
-        $error: color($palette, 'error'),
+        $primary: color($palette, primary),
+        $secondary: color($palette, secondary),
+        $info: color($palette, info),
+        $success: color($palette, success),
+        $warn: color($palette, warn),
+        $error: color($palette, error),
         $surface: if($surface != #fff, $surface, #222),
         $gray: if($gray != #9e9e9e, $gray, #fff),
     );

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
@@ -20,14 +20,14 @@
     $roundness: null,
     $elevation: true,
 ) {
-    $primary: color($palette, 'primary');
-    $secondary: color($palette, 'secondary');
-    $gray: color($light-bootstrap-palette, 'gray');
-    $surface: color($light-bootstrap-palette, 'surface');
-    $info: color($palette, 'info');
-    $success: color($palette, 'success');
-    $warn: color($palette, 'warn');
-    $error: color($palette, 'error');
+    $primary: color($palette, primary);
+    $secondary: color($palette, secondary);
+    $gray: color($light-bootstrap-palette, gray);
+    $surface: color($light-bootstrap-palette, surface);
+    $info: color($palette, info);
+    $success: color($palette, success);
+    $warn: color($palette, warn);
+    $error: color($palette, error);
 
     @include theme(
         $palette: palette(
@@ -58,14 +58,14 @@
     $roundness: null,
     $elevation: true,
 ) {
-    $primary: color($palette, 'primary');
-    $secondary: color($palette, 'secondary');
-    $gray: color($dark-bootstrap-palette, 'gray');
-    $surface: color($dark-bootstrap-palette, 'surface');
-    $info: color($palette, 'info');
-    $success: color($palette, 'success');
-    $warn: color($palette, 'warn');
-    $error: color($palette, 'error');
+    $primary: color($palette, primary);
+    $secondary: color($palette, secondary);
+    $gray: color($dark-bootstrap-palette, gray);
+    $surface: color($dark-bootstrap-palette, surface);
+    $info: color($palette, info);
+    $success: color($palette, success);
+    $warn: color($palette, warn);
+    $error: color($palette, error);
 
     @include theme(
         $palette: palette(

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
@@ -20,14 +20,14 @@
     $roundness: null,
     $elevation: true,
 ) {
-    $primary: color($palette, 'primary');
-    $secondary: color($palette, 'secondary');
-    $gray: color($light-fluent-palette, 'gray');
-    $surface: color($light-fluent-palette, 'surface');
-    $info: color($palette, 'info');
-    $success: color($palette, 'success');
-    $warn: color($palette, 'warn');
-    $error: color($palette, 'error');
+    $primary: color($palette, primary);
+    $secondary: color($palette, secondary);
+    $gray: color($light-fluent-palette, gray);
+    $surface: color($light-fluent-palette, surface);
+    $info: color($palette, info);
+    $success: color($palette, success);
+    $warn: color($palette, warn);
+    $error: color($palette, error);
 
     @include theme(
         $palette: palette(
@@ -58,14 +58,14 @@
     $roundness: null,
     $elevation: true,
 ) {
-    $primary: color($palette, 'primary');
-    $secondary: color($palette, 'secondary');
-    $gray: color($dark-fluent-palette, 'gray');
-    $surface: color($dark-fluent-palette, 'surface');
-    $info: color($palette, 'info');
-    $success: color($palette, 'success');
-    $warn: color($palette, 'warn');
-    $error: color($palette, 'error');
+    $primary: color($palette, primary);
+    $secondary: color($palette, secondary);
+    $gray: color($dark-fluent-palette, gray);
+    $surface: color($dark-fluent-palette, surface);
+    $info: color($palette, info);
+    $success: color($palette, success);
+    $warn: color($palette, warn);
+    $error: color($palette, error);
 
     @include theme(
         $palette: palette(

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
@@ -21,14 +21,14 @@
     $roundness: null,
     $elevation: true,
 ) {
-    $primary: color($palette, 'primary');
-    $secondary: color($palette, 'secondary');
-    $gray: color($light-indigo-palette, 'gray');
-    $surface: color($light-indigo-palette, 'surface');
-    $info: color($palette, 'info');
-    $success: color($palette, 'success');
-    $warn: color($palette, 'warn');
-    $error: color($palette, 'error');
+    $primary: color($palette, primary);
+    $secondary: color($palette, secondary);
+    $gray: color($light-indigo-palette, gray);
+    $surface: color($light-indigo-palette, surface);
+    $info: color($palette, info);
+    $success: color($palette, success);
+    $warn: color($palette, warn);
+    $error: color($palette, error);
 
     @include theme(
         $palette: palette(
@@ -60,14 +60,14 @@
     $roundness: null,
     $elevation: true,
 ) {
-    $primary: color($palette, 'primary');
-    $secondary: color($palette, 'secondary');
-    $gray: color($dark-indigo-palette, 'gray');
-    $surface: color($dark-indigo-palette, 'surface');
-    $info: color($palette, 'info');
-    $success: color($palette, 'success');
-    $warn: color($palette, 'warn');
-    $error: color($palette, 'error');
+    $primary: color($palette, primary);
+    $secondary: color($palette, secondary);
+    $gray: color($dark-indigo-palette, gray);
+    $surface: color($dark-indigo-palette, surface);
+    $info: color($palette, info);
+    $success: color($palette, success);
+    $warn: color($palette, warn);
+    $error: color($palette, error);
 
     @include theme(
         $palette: palette(

diff --git a/src/app/styleguide/colors/color.sample.scss b/src/app/styleguide/colors/color.sample.scss
@@ -53,13 +53,11 @@
 }
 
 @include color-classes(
-    $palette: $palette,
     $prop: 'background',
     $prefix: 'bg'
 );
 
 @include color-classes(
-    $palette: $palette,
     $prop: 'color',
     $prefix: 'color'
 );
diff --git a/src/app/styleguide/shadows/shadows.sample.css b/src/app/styleguide/shadows/shadows.sample.css
@@ -34,52 +34,42 @@
     font-size: 14px;
 }
 
-.elevation-sample.elevate-1 {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .26), 0 1px 1px 0 rgba(0, 0, 0, .12),
-        0 2px 1px -1px rgba(0, 0, 0, .08);
+.elevate-1 {
+    box-shadow: var(--ig-elevation-1);
 }
 
-.elevation-sample.elevate-2 {
-    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .26), 0 2px 2px 0 rgba(0, 0, 0, .12),
-        0 3px 1px -2px rgba(0, 0, 0, .08);
+.elevate-2 {
+    box-shadow: var(--ig-elevation-2);
 }
 
-.elevation-sample.elevate-3 {
-    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .26), 0 3px 4px 0 rgba(0, 0, 0, .12),
-        0 3px 3px -2px rgba(0, 0, 0, .08);
+.elevate-3 {
+    box-shadow: var(--ig-elevation-3);
 }
 
-.elevation-sample.elevate-4 {
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .26),
-        0 4px 5px 0 rgba(0, 0, 0, .12), 0 1px 10px 0 rgba(0, 0, 0, .08);
+.elevate-4 {
+    box-shadow: var(--ig-elevation-4);
 }
 
-.elevation-sample.elevate-6 {
-    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .26),
-        0 6px 10px 0 rgba(0, 0, 0, .12), 0 1px 18px 0 rgba(0, 0, 0, .08);
+.elevate-6 {
+    box-shadow: var(--ig-elevation-6);
 }
 
-.elevation-sample.elevate-8 {
-    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .26),
-        0 8px 10px 1px rgba(0, 0, 0, .12), 0 3px 14px 2px rgba(0, 0, 0, .08);
+.elevate-8 {
+    box-shadow: var(--ig-elevation-8);
 }
 
-.elevation-sample.elevate-9 {
-    box-shadow: 0 5px 6px -3px rgba(0, 0, 0, .26),
-        0 9px 12px 1px rgba(0, 0, 0, .12), 0 3px 16px 2px rgba(0, 0, 0, .08);
+.elevate-9 {
+    box-shadow: var(--ig-elevation-9);
 }
 
-.elevation-sample.elevate-12 {
-    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .26),
-        0 12px 17px 2px rgba(0, 0, 0, .12), 0 5px 22px 4px rgba(0, 0, 0, .08);
+.elevate-12 {
+    box-shadow: var(--ig-elevation-12);
 }
 
-.elevation-sample.elevate-16 {
-    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .26),
-        0 16px 24px 2px rgba(0, 0, 0, .12), 0 6px 30px 5px rgba(0, 0, 0, .08);
+.elevate-16 {
+    box-shadow: var(--ig-elevation-16);
 }
 
-.elevation-sample.elevate-24 {
-    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .26),
-        0 24px 38px 3px rgba(0, 0, 0, .12), 0 9px 46px 8px rgba(0, 0, 0, .08);
+.elevate-24 {
+    box-shadow: var(--ig-elevation-24);
 }