igniteui-theming 1.0.0-beta.2 → 1.0.0-beta.5

package/package.json

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

@@ -1,8 +1,2 @@
-@forward './light/material' as light-material-*;
-@forward './light/bootstrap' as light-bootstrap-*;
-@forward './light/fluent' as light-fluent-*;
-@forward './light/indigo' as light-indigo-*;
-@forward './dark/material' as dark-material-*;
-@forward './dark/bootstrap' as dark-bootstrap-*;
-@forward './dark/fluent' as dark-fluent-*;
-@forward './dark/indigo' as dark-indigo-*;
+@forward 'light';
+@forward 'dark';

package/sass/color/presets/dark/_index.scss

@@ -0,0 +1,4 @@
+@forward 'material' as dark-material-*;
+@forward 'bootstrap' as dark-bootstrap-*;
+@forward 'fluent' as dark-fluent-*;
+@forward 'indigo' as dark-indigo-*;

package/sass/color/presets/light/_index.scss

@@ -0,0 +1,4 @@
+@forward 'material' as light-material-*;
+@forward 'bootstrap' as light-bootstrap-*;
+@forward 'fluent' as light-fluent-*;
+@forward 'indigo' as light-indigo-*;

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/_functions.scss

@@ -57,7 +57,7 @@ $browser-context: 16px;
 
 /// Produces a type style map of values that adheres to the ITypeStyle map.
 /// @access public
-/// @param {String} $font-family [var(--igc-font-family)] - The font family of the type style.
+/// @param {String} $font-family [var(--ig-font-family)] - The font family of the type style.
 /// @param {String} $font-size - The font size of the type style.
 /// @param {Number|String} $font-weight [normal] - The font weight of the type style.
 /// @param {String} $font-style [normal] - The font style of the type style.

package/sass/typography/_index.scss

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

package/sass/typography/presets/_bootstrap.scss

@@ -5,6 +5,8 @@
 /// @group Typography
 ////
 
+/* stylelint-disable-next-line max-line-length */
+$typeface: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
 $_base-scale: (
     h1: type-style(
         $font-size: rem(40px),
@@ -117,7 +119,7 @@ $bootstrap_weekday: type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-$scale: extend(
+$type-scale: extend(
     $_base-scale,
     (
         calendar-labels: $bootstrap_weekday,

package/sass/typography/presets/_fluent.scss

@@ -3,8 +3,8 @@
 ////
 /// @group Typography
 ////
-
-$scale: (
+$typeface: "'Open Sans', Helvetica, Arial, sans-serif";
+$type-scale: (
     h1: type-style(
         $font-size: rem(68px),
         $font-weight: 700,
@@ -93,6 +93,14 @@ $scale: (
         $margin-top: 0,
         $margin-bottom: 0
     ),
+    caption: type-style(
+        $font-size: rem(12px),
+        $font-weight: 400,
+        $font-style: normal,
+        $letter-spacing: rem(.4px),
+        $line-height: rem(16px),
+        $text-transform: none
+    ),
     overline: type-style(
         $font-size: rem(10px),
         $font-weight: 400,

package/sass/typography/presets/_indigo.scss

@@ -3,8 +3,8 @@
 ////
 /// @group Typography
 ////
-
-$scale: (
+$typeface: "'Nunito Sans', sans-serif";
+$type-scale: (
     h1: type-style(
         $font-size: rem(96px),
         $font-weight: 200,

package/sass/typography/presets/_material.scss

@@ -4,9 +4,9 @@
 /// @group Typography
 ////
 
-$scale: (
+$typeface: "'Titillium Web', sans-serif";
+$type-scale: (
     h1: type-style(
-        $font-family: var(--igc-font-family),
         $font-size: rem(96px),
         $font-weight: 300,
         $font-style: normal,
@@ -17,7 +17,6 @@ $scale: (
         $margin-bottom: rem(56px)
     ),
     h2: type-style(
-        $font-family: var(--igc-font-family),
         $font-size: rem(60px),
         $font-weight: 300,
         $font-style: normal,
@@ -28,7 +27,6 @@ $scale: (
         $margin-bottom: rem(28px)
     ),
     h3: type-style(
-        $font-family: var(--igc-font-family),
         $font-size: rem(48px),
         $font-weight: 400,
         $font-style: normal,
@@ -39,7 +37,6 @@ $scale: (
         $margin-bottom: 0
     ),
     h4: type-style(
-        $font-family: var(--igc-font-family),
         $font-size: rem(34px),
         $font-weight: 400,
         $font-style: normal,
@@ -50,7 +47,6 @@ $scale: (
         $margin-bottom: 0
     ),
     h5: type-style(
-        $font-family: var(--igc-font-family),
         $font-size: rem(24px),
         $font-weight: 400,
         $font-style: normal,
@@ -61,7 +57,6 @@ $scale: (
         $margin-bottom: 0
     ),
     h6: type-style(
-        $font-family: var(--igc-font-family),
         $font-size: rem(20px),
         $font-weight: 600,
         $font-style: normal,
@@ -72,7 +67,6 @@ $scale: (
         $margin-bottom: 0
     ),
     subtitle-1: type-style(
-        $font-family: var(--igc-font-family),
         $font-size: rem(16px),
         $font-weight: 400,
         $font-style: normal,
@@ -81,7 +75,6 @@ $scale: (
         $text-transform: none
     ),
     subtitle-2: type-style(
-        $font-family: var(--igc-font-family),
         $font-size: rem(14px),
         $font-weight: 600,
         $font-style: normal,
@@ -90,7 +83,6 @@ $scale: (
         $text-transform: none
     ),
     body-1: type-style(
-        $font-family: var(--igc-font-family),
         $font-size: rem(16px),
         $font-weight: 400,
         $font-style: normal,
@@ -101,7 +93,6 @@ $scale: (
         $margin-bottom: rem(16)
     ),
     body-2: type-style(
-        $font-family: var(--igc-font-family),
         $font-size: rem(14px),
         $font-weight: 400,
         $font-style: normal,
@@ -110,7 +101,6 @@ $scale: (
         $text-transform: none
     ),
     button: type-style(
-        $font-family: var(--igc-font-family),
         $font-size: rem(14px),
         $font-weight: 600,
         $font-style: normal,
@@ -119,7 +109,6 @@ $scale: (
         $text-transform: uppercase
     ),
     caption: type-style(
-        $font-family: var(--igc-font-family),
         $font-size: rem(12px),
         $font-weight: 400,
         $font-style: normal,
@@ -128,7 +117,6 @@ $scale: (
         $text-transform: none
     ),
     overline: type-style(
-        $font-family: var(--igc-font-family),
         $font-size: rem(10px),
         $font-weight: 400,
         $font-style: normal,

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') {

package/test/e2e/theme.scss

@@ -1,38 +1,4 @@
 @use '../../index' as *;
-@use '../../sass/elevations/presets/material' as *;
-
-$h1: (font-size: 96px);
-$h2: (font-size: 70px);
-$h3: (font-size: 40px);
-$h4: (font-size: 30px);
-$h5: (font-size: 20px);
-$h6: (font-size: 10px);
-$subtitle-1: (font-size: 96px);
-$subtitle-2: (font-size: 70px);
-$body-1: (font-size: 40px);
-$body-2: (font-size: 30px);
-$button: (font-size: 20px);
-$caption: (font-size: 10px);
-$overline: (font-size: 10px);
-$theme: 'material';
-$scale: type-scale(
-    $h1: $h1,
-    $h2: $h2,
-    $h3: $h3,
-    $h4: $h4,
-    $h5: $h5,
-    $h6: $h6,
-    $subtitle-1: $subtitle-1,
-    $subtitle-2: $subtitle-2,
-    $body-1: $body-1,
-    $body-2: $body-2,
-    $button: $button,
-    $caption: $caption,
-    $overline: $overline,
-    $_theme: $theme
-);
-$palette: palette($primary: #9fe, $secondary: orange, $surface: #fff);
-
-@include palette($palette);
-@include typography("'Roboto', sans-serif", $scale);
-@include elevations($elevations);
+@include palette($light-material-palette);
+@include typography($material-typeface, $material-type-scale);
+@include elevations($material-elevations);