refactor(*): use default size from component schemas (#13593)

Author: SisIvanova

package-lock.json

@@ -70,7 +70,7 @@
     "express": "^4.18.2",
     "fflate": "^0.7.3",
     "hammerjs": "^2.0.8",
-    "igniteui-theming": "^3.3.0",
+    "igniteui-theming": "^3.3.3",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^6.6.7",
@@ -138,4 +138,4 @@
     "typedoc-plugin-localization": "^3.0.3",
     "typescript": "5.2.2"
   }
-}
+}

package.json

@@ -76,7 +76,7 @@
         "igniteui-trial-watermark": "^3.0.2",
         "lodash-es": "^4.17.21",
         "uuid": "^9.0.0",
-        "igniteui-theming": "^3.3.0",
+        "igniteui-theming": "^3.3.3",
         "@igniteui/material-icons-extended": "^3.0.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -82,7 +82,7 @@
 
     %igx-avatar-display {
         @include sizable();
-        --component-size: var(--ig-size, var(--ig-size-small));
+        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
 
         position: relative;
         display: inline-flex;

projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss

@@ -456,7 +456,6 @@
 
     %igx-button-display {
         @include sizable();
-        --component-size: var(--ig-size, var(--ig-size-large));
 
         position: relative;
         display: inline-flex;
@@ -526,6 +525,7 @@
     }
 
     %igx-button--flat {
+        --component-size: var(--ig-size, #{var-get($flat-theme, 'default-size')});
         background: var-get($flat-theme, 'background');
         color: var-get($flat-theme, 'foreground');
         border-radius: var-get($flat-theme, 'border-radius');
@@ -566,6 +566,7 @@
     }
 
     %igx-button--outlined {
+        --component-size: var(--ig-size, #{var-get($outlined-theme, 'default-size')});
         background: var-get($outlined-theme, 'background');
         color: var-get($outlined-theme, 'foreground');
         border-color: var-get($outlined-theme, 'border-color');
@@ -668,6 +669,7 @@
     }
 
     %igx-button--raised {
+        --component-size: var(--ig-size, #{var-get($raised-theme, 'default-size')});
         color: var-get($raised-theme, 'foreground');
         background: var-get($raised-theme, 'background');
         box-shadow: $raised-shadow;
@@ -774,6 +776,7 @@
     }
 
     %igx-button--fab {
+        --component-size: var(--ig-size, #{var-get($fab-theme, 'default-size')});
         padding-block: pad-block(
             map.get($button-floating-padding-block, 'compact'),
             map.get($button-floating-padding-block, 'cosy'),
@@ -880,6 +883,7 @@
     }
 
     %igx-button--icon {
+        --component-size: var(--ig-size, #{var-get($icon-theme, 'default-size')});
         width: var-get($icon-theme, 'size');
         height: var-get($icon-theme, 'size');
         min-width: unset;

projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss

@@ -299,7 +299,7 @@
 
     %igx-chip {
         @include sizable();
-        --component-size: var(--ig-size, var(--ig-size-large));
+        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
         --chip-size: var(--component-size);
 
         position: relative;

projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss

@@ -194,7 +194,7 @@
     %igx-drop-down__list {
         @include sizable();
 
-        --component-size: var(--ig-size, var(--ig-size-large));
+        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
         --dropdown-size: var(--component-size);
         overflow: hidden;
         border-radius: var-get($theme, 'border-radius');

projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss

@@ -55,7 +55,7 @@
     // this approach effectively enables us to eliminate any potential style conflicts without the need of !important
     %igx-icon-display {
         @include sizable();
-        --component-size: var(--ig-size, var(--ig-size-large));
+        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
 
         display: inline-flex;
         font-size: $size;

projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss

@@ -399,7 +399,7 @@
 
     %form-group-display {
         @include sizable();
-        --component-size: var(--ig-size, var(--ig-size-large));
+        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
         --input-size: var(--component-size);
 
         position: relative;

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -281,7 +281,7 @@
     %igx-list {
         @include sizable();
 
-        --component-size: var(--ig-size, var(--ig-size-large));
+        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
         --list-size: var(--component-size);
         position: relative;
         display: flex;