igniteui-theming 2.1.0-beta.2 → 2.1.0-beta.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "2.1.0-beta.2",
+  "version": "2.1.0-beta.4",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/themes/_functions.scss

@@ -65,6 +65,7 @@
     @each $fn, $args in $instructions {
         $color: meta.function-exists($fn, $module: color);
         $util: meta.function-exists($fn, $module: utils);
+        $self: meta.function-exists($fn);
 
         @if $color {
             $func: meta.get-function($fn, $module: color);
@@ -85,6 +86,13 @@
                 $result: meta.call($func, $result, $args...);
             }
         }
+
+        @if $self {
+            @if $fn == 'sizable' {
+                $func: meta.get-function($fn);
+                $result: meta.call($func, $args...);
+            }
+        }
     }
 
     @return $result;

package/sass/themes/schemas/components/light/_avatar.scss

@@ -14,11 +14,6 @@
 /// @prop {Number} border-radius [rem(0)] - The border radius.
 /// @prop {List} size [(rem(40px), rem(64px), rem(88px))] - The size used for the avatar width and height.
 $light-avatar: (
-    size: (
-        rem(40px),
-        rem(64px),
-        rem(88px),
-    ),
     background: (
         color: (
             'gray',
@@ -34,6 +29,13 @@ $light-avatar: (
         ),
     ),
     border-radius: rem(0),
+    size: (
+        sizable: (
+            rem(40px),
+            rem(64px),
+            rem(88px),
+        ),
+    ),
 );
 
 /// Generates a fluent avatar schema.

package/sass/themes/schemas/components/light/_button.scss

@@ -129,9 +129,11 @@ $material-flat-button: extend(
             rem(20px),
         ),
         size: (
-            rem(24px),
-            rem(30px),
-            rem(36px),
+            sizable: (
+                rem(24px),
+                rem(30px),
+                rem(36px),
+            ),
         ),
     )
 );

package/sass/themes/schemas/components/light/_chip.scss

@@ -157,6 +157,7 @@ $light-chip: extend(
             rem(0),
             rem(16px),
         ),
+
         disabled-text-color: (
             color: (
                 'gray',
@@ -177,10 +178,13 @@ $light-chip: extend(
                 200,
             ),
         ),
+
         size: (
-            rem(20px),
-            rem(24px),
-            rem(32px),
+            sizable: (
+                rem(20px),
+                rem(24px),
+                rem(32px),
+            ),
         ),
     )
 );

package/sass/themes/schemas/components/light/_drop-down.scss

@@ -145,9 +145,11 @@ $light-drop-down: extend(
             rem(20px),
         ),
         size: (
-            rem(28px),
-            rem(32px),
-            rem(40px),
+            sizable: (
+                rem(28px),
+                rem(32px),
+                rem(40px),
+            ),
         ),
     )
 );

package/sass/themes/schemas/components/light/_grid-toolbar.scss

@@ -73,10 +73,13 @@ $light-grid-toolbar: (
             600,
         ),
     ),
+
     size: (
-        rem(44px),
-        rem(52px),
-        rem(58px),
+        sizable: (
+            rem(44px),
+            rem(52px),
+            rem(58px),
+        ),
     ),
 );
 

package/sass/themes/schemas/components/light/_grid.scss

@@ -95,7 +95,6 @@
 /// @prop {List} header-size [(rem(32px), rem(40px), rem(50px))] - The size used for the grid header.
 /// @prop {List} drop-area-size [(rem(24px), rem(24px), rem(32px))] - The size used for the grid drop area.
 /// @prop {List} group-area-size [(rem(41), rem(49px), rem(57px))] - The size used for the grid group area.
-
 /// @requires {Map} $default-elevation-grid
 $light-grid: extend(
     $default-elevation-grid,
@@ -635,20 +634,29 @@ $light-grid: extend(
             rem(0),
             rem(16px),
         ),
+
         header-size: (
-            rem(32px),
-            rem(40px),
-            rem(50px),
+            sizable: (
+                rem(32px),
+                rem(40px),
+                rem(50px),
+            ),
         ),
+
         drop-area-size: (
-            rem(24px),
-            rem(24x),
-            rem(32px),
+            sizable: (
+                rem(24px),
+                rem(24px),
+                rem(32px),
+            ),
         ),
+
         group-area-size: (
-            rem(41px),
-            rem(49x),
-            rem(57px),
+            sizable: (
+                rem(41px),
+                rem(49px),
+                rem(57px),
+            ),
         ),
     )
 );

package/sass/themes/schemas/components/light/_icon.scss

@@ -16,9 +16,11 @@ $light-icon: (
     color: "'currentColor'",
     disabled-color: "'currentColor'",
     size: (
-        rem(16px),
-        rem(20px),
-        rem(24px),
+        sizable: (
+            rem(16px),
+            rem(20px),
+            rem(24px),
+        ),
     ),
 );
 

package/sass/themes/schemas/components/light/_input-group.scss

@@ -296,11 +296,6 @@ $light-input-group: extend(
             rem(0),
             rem(20px),
         ),
-        size: (
-            rem(40px),
-            rem(48px),
-            rem(56px),
-        ),
         success-shadow-color: (
             color: (
                 'success',
@@ -315,6 +310,13 @@ $light-input-group: extend(
                 0.38,
             ),
         ),
+        size: (
+            sizable: (
+                rem(40px),
+                rem(48px),
+                rem(56px),
+            ),
+        ),
     )
 );
 

package/sass/themes/schemas/components/light/_pagination.scss

@@ -35,9 +35,11 @@ $light-pagination: (
         ),
     ),
     size: (
-        rem(44px),
-        rem(48px),
-        rem(56px),
+        sizable: (
+            rem(44px),
+            rem(48px),
+            rem(56px),
+        ),
     ),
 );
 

package/sass/themes/schemas/components/light/_tree.scss

@@ -102,9 +102,11 @@ $light-tree: (
         ),
     ),
     size: (
-        rem(32px),
-        rem(40px),
-        rem(50px),
+        sizable: (
+            rem(32px),
+            rem(40px),
+            rem(50px),
+        ),
     ),
 );