igniteui-theming 1.0.0-beta.7 → 1.0.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-beta.8",
   "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/_mixins.scss

@@ -116,12 +116,11 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector');
 /// Adds the required CSS properties so that the scope can react to size changes.
 /// @access public
 @mixin sizable() {
-    --size: clamp(1, var(--ig-size, var(--ig-size-small, 1)), 3);
-    --is-large: clamp(0, (var(--size) + 1) - var(--ig-size-large, 3), 1);
+    --is-large: clamp(0, (var(--ig-size, 1) + 1) - var(--ig-size-large, 3), 1);
     --is-medium:
         min(
-            clamp(0, (var(--size) + 1) - var(--ig-size-medium, 2), 1),
-            clamp(0, var(--ig-size-large, 3) - var(--size), 1)
+            clamp(0, (var(--ig-size, 1) + 1) - var(--ig-size-medium, 2), 1),
+            clamp(0, var(--ig-size-large, 3) - var(--ig-size, 1), 1)
         );
-    --is-small: clamp(0, var(--ig-size-medium) - var(--size), 1);
+    --is-small: clamp(0, var(--ig-size-medium) - var(--ig-size, 1), 1);
 }

package/sass/typography/_mixins.scss

@@ -10,13 +10,15 @@
 
 /// Includes all category related styles into the current style block.
 /// @param {String} $category - The type scale category.
+/// @param {String} $check [true] - Toggles category checks against ITypeScale.
+/// Set to false when using a custom type scale.
 /// @example scss Add the `h1` styles to custom CSS selector.
 ///   .fancy-h1 {
 ///      @include type-style('h1');
 ///      color: mediumvioletred;
 ///   }
-@mixin type-style($category) {
-    $valid: list.index(types.$ITypeScale, $category);
+@mixin type-style($category, $check: true) {
+    $valid: if($check, list.index(types.$ITypeScale, $category), true);
 
     @if $valid {
         @each $key, $value in types.$ITypeStyle {

package/test/_typography.spec.scss

@@ -8,6 +8,7 @@
 @use 'sass:string';
 @use '../node_modules/sass-true/' as *;
 @use '../sass/typography/' as *;
+@use '../sass/typography/presets' as presets;
 
 $h1: (font-size: 96px);
 $h2: (font-size: 70px);
@@ -157,6 +158,22 @@ $scale: type-scale(
             }
         }
 
+        @include it('should include all styles from a custom type category') {
+            @include assert() {
+                $custom-category: 'calendar-labels';
+
+                @include output() {
+                    @include type-style($custom-category, $check: false);
+                }
+
+                @include expect() {
+                    @each $key, $value in map.get(presets.$bootstrap-type-scale, $custom-category) {
+                        #{$key}: var(--ig-#{$custom-category}-#{$key});
+                    }
+                }
+            }
+        }
+
         @include it('should include type styles with CSS var refs as values for a specific category') {
             $category: 'h1';