igniteui-theming 1.0.0-beta.3 → 1.0.0-beta.4

package/package.json

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

@@ -7,7 +7,7 @@
 @use 'charts';
 @use 'multipliers';
 @use 'types';
-@use '../utils' as *;
+@use '../utils/math' as *;
 
 $_enhanced-accessibility: false;
 
@@ -175,7 +175,7 @@ $_enhanced-accessibility: false;
     $meta: if($palette, map.get($palette, '_meta'), null);
 
     @if not($c) {
-        @error 'The passed color #{$color} is not valid.';
+        @error 'The passed color #{meta.inspect($color)} is not valid.';
     }
 
     @if not($palette) or not($meta) {

package/sass/color/_index.scss

@@ -3,4 +3,3 @@
 @forward 'types';
 @forward 'multipliers';
 @forward 'charts';
-@forward 'presets';

package/sass/elevations/_index.scss

@@ -1,3 +1,2 @@
 @forward 'functions';
 @forward 'mixins';
-@forward 'presets';

package/sass/elevations/_mixins.scss

@@ -1,4 +1,4 @@
-@use '../utils' as *;
+@use '../utils/meta' as *;
 
 ////
 /// @group elevations

package/sass/themes/_functions.scss

@@ -1,14 +1,13 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@use '../utils/map' as *;
-@use '../elevations/' as *;
-@use '../color/' as color;
+@use '../typography/functions' as *;
+@use '../elevations/functions' as *;
+@use '../color/functions' as color;
 
 /// Digests a theme schema and returns a resolved theme map.
 /// @access private
 /// @param {Map} $schema - A theme schema.
-/// @requires {function} extend
 /// @requires {function} resolve-value
 /// @example scss Get the resolved theme for a schema
 ///   $custom-schema: (
@@ -24,14 +23,14 @@
 
     @each $key, $value in $schema {
         @if meta.type-of($value) == 'map' {
-            $result: extend($result, (#{$key}: resolve-value($value)));
+            $result: map.merge($result, (#{$key}: resolve-value($value)));
         } @else {
-            $result: extend($result, (#{$key}: $value));
+            $result: map.merge($result, (#{$key}: $value));
         }
 
         // Special case for chart elevation literals
         @if string.index($key, 'elevation') {
-            $result: extend(
+            $result: map.merge(
                 $result,
                 (
                     #{$key}: #{elevation($value)}
@@ -41,7 +40,7 @@
 
         // Special case for chart brushes
         @if $value == 'series' {
-            $result: extend(
+            $result: map.merge(
                 $result,
                 (
                     #{$key}: #{color.chart-brushes()}
@@ -105,6 +104,6 @@
 /// @param {Number} $radius - The preferred value.
 /// @param {Number} $min [rem(0)] - The minimum value.
 /// @param {Number} $max [$radius] - The maximum allowed value.
-@function border-radius($radius, $min: rem(0), $max: $radius) {
-    @return clamp($min, calc(var(--ig-radius-factor) * #{$radius}), $max);
+@function border-radius($radius, $min: #{rem(0)}, $max: $radius) {
+    @return clamp(#{$min}, #{calc(var(--ig-radius-factor) * #{$radius})}, #{$max});
 }

package/sass/themes/_mixins.scss

@@ -1,9 +1,8 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@use '../utils/' as *;
-@use '../elevations/' as *;
-@use './functions' as *;
+@use '../utils/meta' as *;
+@use '../typography/functions' as *;
 
 /// A list of ignored keywords to be excluded when generating CSS variables for a theme.
 /// @access private
@@ -65,8 +64,8 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector');
 /// @param {Number} $radius - The preferred value.
 /// @param {Number} $min [rem(0)] - The minimum value.
 /// @param {Number} $max [$radius] - The maximum allowed value.
-@mixin border-radius($radius, $min: rem(0), $max: $radius) {
-    border-radius: border-radius($radius, $min, $max);
+@mixin border-radius($radius, $min: #{rem(0)}, $max: $radius) {
+    border-radius: clamp(#{$min}, #{calc(var(--ig-radius-factor) * #{$radius})}, #{$max});
 }
 
 /// Truncates text to a specific number of lines.

package/sass/typography/_index.scss

@@ -1,4 +1,3 @@
 @forward 'functions';
 @forward 'mixins';
 @forward 'types';
-@forward 'presets';

package/test/_color.spec.scss

@@ -5,7 +5,7 @@
 @use 'sass:meta';
 @use 'sass:color';
 @use '../node_modules/sass-true/' as *;
-@use '../index' as *;
+@use '../sass/color' as *;
 
 // base colors
 $_primary: #09f;

package/test/_elevations.spec.scss

@@ -1,7 +1,7 @@
 @use 'sass:meta';
 @use 'sass:list';
 @use '../node_modules/sass-true/' as *;
-@use '../index' as *;
+@use '../sass/elevations/' as *;
 
 @include describe('Elevations') {
     @include it('should return an empty list for a list of non box-shadow values') {

package/test/_themes.spec.scss

@@ -180,18 +180,18 @@ $schema: (
         }
 
         @include it('should set the border-radius to a value between min and max') {
-            $border-radius: border-radius(4px, 2px, 3px);
-            $expected: meta.inspect(clamp(2px, var(--ig-radius-factor) * 4px, 3px));
+            $border-radius: border-radius(rem(4px), rem(2px), rem(3px));
+            $expected: clamp(.125rem, meta.inspect(calc(var(--ig-radius-factor) * .25rem)), .1875rem);
 
             @include assert-equal($assert: $border-radius, $expected: $expected, $inspect: true);
         }
 
         @include it('should include border-radius styles to a given scope with a value between min and max') {
-            $expected: meta.inspect(clamp(2px, var(--ig-radius-factor) * 4px, 3px));
+            $expected: clamp(.125rem, meta.inspect(calc(var(--ig-radius-factor) * .25rem)), .1875rem);
 
             @include assert() {
                 @include output() {
-                    @include border-radius(4px, 2px, 3px);
+                    @include border-radius(rem(4px), rem(2px), rem(3px));
                 }
 
                 @include expect() {

package/test/_typography.spec.scss

@@ -7,8 +7,7 @@
 @use 'sass:color';
 @use 'sass:string';
 @use '../node_modules/sass-true/' as *;
-@use '../index' as *;
-@use '../sass/typography/types';
+@use '../sass/typography/' as *;
 
 $h1: (font-size: 96px);
 $h2: (font-size: 70px);
@@ -74,7 +73,7 @@ $scale: type-scale(
             $font-size: 18px;
             $rules: type-style($font-size: $font-size);
 
-            @each $rule, $value in map.remove(types.$ITypeStyle, 'font-size') {
+            @each $rule, $value in map.remove($ITypeStyle, 'font-size') {
                 @include assert-equal(map.get($rules, $rule), $value);
             }
 
@@ -170,7 +169,7 @@ $scale: type-scale(
 
                 @include expect() {
                     .my-h1 {
-                        @each $key, $value in types.$ITypeStyle {
+                        @each $key, $value in $ITypeStyle {
                             #{$key}: var(--ig-#{$category}-#{$key});
                         }
                     }
@@ -185,7 +184,7 @@ $scale: type-scale(
                 }
 
                 @include expect() {
-                    @each $category in types.$ITypeScale {
+                    @each $category in $ITypeScale {
                         &__#{$category} {
                             @include type-style($category);
                         }
@@ -201,7 +200,7 @@ $scale: type-scale(
                 }
 
                 @include expect() {
-                    @each $category, $element in types.$IElementCategories {
+                    @each $category, $element in $IElementCategories {
                         #{$element} {
                             @include type-style($category);
                         }

package/test/_utils.spec.scss

@@ -1,6 +1,6 @@
 /* stylelint-disable max-nesting-depth */
 @use '../node_modules/sass-true/' as *;
-@use '../index' as *;
+@use '../sass/utils/' as *;
 
 @include describe('Utilities') {
     @include describe('meta') {