igniteui-theming 2.1.0-beta.3 → 2.1.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "2.1.0-beta.3",
+  "version": "2.1.0-beta.5",
   "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

@@ -30,9 +30,11 @@ $light-avatar: (
     ),
     border-radius: rem(0),
     size: (
-        rem(40px),
-        rem(64px),
-        rem(88px),
+        sizable: (
+            rem(40px),
+            rem(64px),
+            rem(88px),
+        ),
     ),
 );
 

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

@@ -20,6 +20,7 @@
 /// @prop {Color} disabled-border-color [transparent] - The disabled border color of the button.
 /// @prop {Map} disabled-background [color: ('gray', 300)] - The disabled background color of the button.
 /// @prop {Map} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the button.
+/// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for the button.
 $material-base-button: (
     shadow-color: transparent,
     border-color: transparent,
@@ -40,6 +41,13 @@ $material-base-button: (
             500,
         ),
     ),
+    size: (
+        sizable: (
+            rem(24px),
+            rem(30px),
+            rem(36px),
+        ),
+    ),
 );
 
 /// @type {Map}
@@ -55,7 +63,6 @@ $material-base-button: (
 /// @prop {Map} active-foreground [color: ('secondary', 500)] - The active text color of a flat button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color a flat button.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for flat button.
-/// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for the flat button.
 /// @requires {Map} $material-base-button
 /// @requires {Map} $flat-elevation-button
 $material-flat-button: extend(
@@ -128,11 +135,6 @@ $material-flat-button: extend(
             rem(0),
             rem(20px),
         ),
-        size: (
-            rem(24px),
-            rem(30px),
-            rem(36px),
-        ),
     )
 );
 
@@ -296,9 +298,11 @@ $material-fab-button: extend(
             rem(28px),
         ),
         size: (
-            rem(48px),
-            rem(40px),
-            rem(32px),
+            sizable: (
+                rem(48px),
+                rem(40px),
+                rem(32px),
+            ),
         ),
     )
 );
@@ -319,6 +323,7 @@ $material-fab-button: extend(
 /// @prop {Map} focus-visible-border-color [color: ('gray', 400)] - The focus-visible border color of the button.
 /// @prop {Map} active-border-color [color: ('gray', 400)] - The active border color of the button.
 /// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for floating button.
+/// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for icon button.
 /// @requires {Map} $material-base-button
 /// @requires {Map} $material-ib-elevation
 $material-icon-button: extend(
@@ -400,6 +405,13 @@ $material-icon-button: extend(
             rem(0),
             rem(20px),
         ),
+        size: (
+            sizable: (
+                rem(24px),
+                rem(30px),
+                rem(36px),
+            ),
+        ),
     )
 );
 
@@ -829,6 +841,7 @@ $fluent-fab-button: extend(
 /// @prop {Map} disabled-foreground [color: ('gray', 400)] - The disabled foreground color of an icon button.
 /// @prop {Map} disabled-border-color [color: ('gray', 100), lighten: 35%] - The disabled focused border color of an icon button.
 /// @prop {List} border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for icon button.
+/// @prop {List} size [(rem(24px), rem(32px), rem(38px))] - The size used for the icon button.
 /// @requires {Map} $material-icon-button
 /// @requires {Map} $fluent-base-button
 $fluent-icon-button: extend(
@@ -903,6 +916,13 @@ $fluent-icon-button: extend(
             rem(0),
             rem(20px),
         ),
+        size: (
+            sizable: (
+                rem(24px),
+                rem(32px),
+                rem(38px),
+            ),
+        ),
     )
 );
 
@@ -1311,6 +1331,7 @@ $bootstrap-fab-button: extend(
 /// @prop {Color} disabled-background [transparent] - The disabled background color of an outlined button.
 /// @prop {Map} disabled-foreground [color: ('primary', 100)] - The disabled foreground color of the button.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for outlined button.
+/// @prop {List} size [(rem(31px), rem(38px), rem(48px))] - The size used for the icon button.
 /// @requires {Map} $material-icon-button
 /// @requires {Map} $bootstrap-base-button
 $bootstrap-icon-button: extend(
@@ -1379,6 +1400,13 @@ $bootstrap-icon-button: extend(
             rem(0),
             rem(20px),
         ),
+        size: (
+            sizable: (
+                rem(31px),
+                rem(38px),
+                rem(48px),
+            ),
+        ),
     )
 );
 
@@ -1656,6 +1684,7 @@ $indigo-raised-button: extend(
 /// @prop {Map} focus-foreground [ color: ('gray', 50)] - The focus text color of a fab button.
 /// @prop {Map} focus-visible-foreground [ color: ('gray', 50)] - The focus-visible text color of a fab button.
 /// @prop {List} border-radius [(rem(36px), rem(42px), rem(48px))] - The border radius used for fab button.
+/// @prop {List} size [(rem(36px), rem(42px), rem(48px))] - The size used for the fab button.
 /// @requires {Map} $material-fab-button
 /// @requires {Map} $indigo-base-button
 /// @requires {Map} $indigo-raised-button
@@ -1695,9 +1724,11 @@ $indigo-fab-button: extend(
             rem(28px),
         ),
         size: (
-            rem(36px),
-            rem(42px),
-            rem(48px),
+            sizable: (
+                rem(36px),
+                rem(42px),
+                rem(48px),
+            ),
         ),
     )
 );
@@ -1716,6 +1747,7 @@ $indigo-fab-button: extend(
 /// @prop {Map} focus-border-color [color: ('gray' 300)] - The focus border color of the button.
 /// @prop {Map} focus-visible-border-color [color: ('gray' 300)] - The focus-visible border color of the button.
 /// @prop {Map} active-border-color [color: ('gray' 300)] - The active border color of the button.
+/// @prop {List} size [(rem(28px), rem(32px), rem(36px))] - The size used for the icon button.
 /// @requires {Map} $material-icon-button
 /// @requires {Map} $indigo-base-button
 $indigo-icon-button: extend(
@@ -1772,6 +1804,13 @@ $indigo-icon-button: extend(
                 'gray' 300,
             ),
         ),
+        size: (
+            sizable: (
+                rem(28px),
+                rem(32px),
+                rem(36px),
+            ),
+        ),
     )
 );
 

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

@@ -180,9 +180,11 @@ $light-chip: extend(
         ),
 
         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

@@ -75,9 +75,11 @@ $light-grid-toolbar: (
     ),
 
     size: (
-        rem(44px),
-        rem(52px),
-        rem(58px),
+        sizable: (
+            rem(44px),
+            rem(52px),
+            rem(58px),
+        ),
     ),
 );
 

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

@@ -636,21 +636,27 @@ $light-grid: extend(
         ),
 
         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

@@ -311,9 +311,11 @@ $light-input-group: extend(
             ),
         ),
         size: (
-            rem(40px),
-            rem(48px),
-            rem(56px),
+            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),
+        ),
     ),
 );