refactor(themes): include shared schemas (#1025)

Author: SisIvanova

package-lock.json

@@ -85,7 +85,7 @@
     "globby": "^14.0.0",
     "husky": "^9.0.10",
     "ig-typedoc-theme": "^5.0.3",
-    "igniteui-theming": "^4.2.0",
+    "igniteui-theming": "^4.3.0",
     "keep-a-changelog": "^2.5.3",
     "lint-staged": "^15.2.2",
     "lit-analyzer": "^2.0.3",

package.json

@@ -34,6 +34,7 @@ export async function buildThemes() {
   const paths = await globby([
     'src/components/**/*.base.scss',
     'src/components/**/*.common.scss',
+    'src/components/**/*.shared.scss',
     'src/components/**/*.material.scss',
     'src/components/**/*.bootstrap.scss',
     'src/components/**/*.indigo.scss',

scripts/build-styles.mjs

@@ -1,7 +1,7 @@
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/dark/avatar' as *;
 
-$material: digest-schema($dark-avatar);
+$material: digest-schema($dark-material-avatar);
 $bootstrap: digest-schema($dark-bootstrap-avatar);
 $fluent: digest-schema($dark-fluent-avatar);
 $indigo: digest-schema($dark-indigo-avatar);

src/components/avatar/themes/dark/_themes.scss

@@ -1,8 +1,9 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
+@use '../light/themes' as light;
 
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-avatar');
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-avatar');
 }

src/components/avatar/themes/dark/avatar.bootstrap.scss

@@ -1,8 +1,9 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
+@use '../light/themes' as light;
 
 $theme: $fluent;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-avatar');
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-avatar');
 }

src/components/avatar/themes/dark/avatar.fluent.scss

@@ -1,8 +1,9 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
+@use '../light/themes' as light;
 
 $theme: $indigo;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-avatar');
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-avatar');
 }

src/components/avatar/themes/dark/avatar.indigo.scss

@@ -1,8 +1,9 @@
 @use 'styles/utilities' as *;
 @use 'themes' as *;
+@use '../light/themes' as light;
 
 $theme: $material;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-avatar');
+    @include css-vars-from-theme(diff(light.$base, $theme), 'ig-avatar');
 }

src/components/avatar/themes/dark/avatar.material.scss

@@ -1,7 +1,8 @@
 @use 'styles/utilities' as *;
 @use 'igniteui-theming/sass/themes/schemas/components/light/avatar' as *;
 
-$material: digest-schema($light-avatar);
+$base: digest-schema($light-avatar);
+$material: digest-schema($material-avatar);
 $bootstrap: digest-schema($bootstrap-avatar);
 $fluent: digest-schema($fluent-avatar);
 $indigo: digest-schema($indigo-avatar);

src/components/avatar/themes/light/_themes.scss

@@ -4,5 +4,5 @@
 $theme: $bootstrap;
 
 :host {
-    @include css-vars-from-theme($theme, 'ig-avatar');
+    @include css-vars-from-theme(diff($base, $theme), 'ig-avatar');
 }