refactor(themes): implement components default size by theme (#977)

Author: SisIvanova

package-lock.json

@@ -84,7 +84,7 @@
     "globby": "^13.2.2",
     "husky": "^8.0.3",
     "ig-typedoc-theme": "^5.0.0",
-    "igniteui-theming": "^3.3.0",
+    "igniteui-theming": "^3.3.1",
     "keep-a-changelog": "^2.4.1",
     "lint-staged": "^15.0.2",
     "lit-analyzer": "^2.0.1",

package.json

@@ -3,6 +3,10 @@
 
 $theme: $bootstrap;
 
+:host {
+    --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+}
+
 [part='base'] {
     color: var-get($theme, 'color');
     background: var-get($theme, 'background');

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

@@ -3,6 +3,10 @@
 
 $theme: $fluent;
 
+:host {
+    --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+}
+
 [part='base'] {
     color: var-get($theme, 'color');
     background: var-get($theme, 'background');

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

@@ -3,6 +3,10 @@
 
 $theme: $indigo;
 
+:host {
+    --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+}
+
 [part='base'] {
     color: var-get($theme, 'color');
     background: var-get($theme, 'background');

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

@@ -3,6 +3,10 @@
 
 $theme: $material;
 
+:host {
+    --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+}
+
 [part='base'] {
     color: var-get($theme, 'color');
     background: var-get($theme, 'background');

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

@@ -4,7 +4,6 @@
 $transition: all 140ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
 
 :host {
-    --component-size: var(--ig-size, var(--ig-size-large));
     --_toggle-button-border-size: #{rem(1px)};
 
     @include type-style(button);

src/components/button-group/themes/button.base.scss

@@ -4,6 +4,7 @@
 $theme: $bootstrap;
 
 :host {
+    --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
     --button-min-width: #{rem(42px)};
 }
 

src/components/button-group/themes/shared/group/group.bootstrap.scss

@@ -4,6 +4,7 @@
 $theme: $fluent;
 
 :host {
+    --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
     --button-min-width: #{rem(50px)};
 }
 

src/components/button-group/themes/shared/group/group.fluent.scss

@@ -4,6 +4,7 @@
 $theme: $indigo;
 
 :host {
+    --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
     --button-min-width: #{rem(50px)};
 }