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

package/package.json

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

@@ -0,0 +1,2 @@
+@forward 'light';
+@forward 'dark';

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

@@ -0,0 +1,13 @@
+@use '../../functions' as *;
+
+$palette: palette(
+    $primary: #0d6efd,
+    $secondary: #6c757d,
+    $gray: #adb5bd,
+    $surface: #212529,
+    $info: #0dcaf0,
+    $success: #198754,
+    $warn: #ffc107,
+    $error: #dc3545,
+    $variant: 'bootstrap'
+);

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

@@ -0,0 +1,11 @@
+@use '../../functions' as *;
+
+$palette: palette(
+    $primary: #0078d4,
+    $secondary: #0078d4,
+    $surface: #222,
+    $success: #107c10,
+    $warn: #797673,
+    $error: #a80000,
+    $variant: 'fluent'
+);

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/dark/_indigo.scss

@@ -0,0 +1,13 @@
+@use '../../functions' as *;
+
+$palette: palette(
+    $primary: #3f51b5,
+    $secondary: #3f51b5,
+    $gray: hsl(262deg 8% 98%),
+    $surface: #2a2b2f,
+    $info: #9208bc,
+    $success: #689f38,
+    $warn: #ff9800,
+    $error: #cf1a2b,
+    $variant: 'indigo'
+);

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

@@ -0,0 +1,8 @@
+@use '../../functions' as *;
+
+$palette: palette(
+    $primary: #09f,
+    $secondary: #e41c77,
+    $surface: #222,
+    $variant: 'material'
+);

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

@@ -0,0 +1,13 @@
+@use '../../functions' as *;
+
+$palette: palette(
+    $primary: #0d6efd,
+    $secondary: #6c757d,
+    $gray: #adb5bd,
+    $surface: #f8f9fa,
+    $info: #0dcaf0,
+    $success: #198754,
+    $warn: #ffc107,
+    $error: #dc3545,
+    $variant: 'bootstrap'
+);

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

@@ -0,0 +1,12 @@
+@use '../../functions' as *;
+
+$palette: palette(
+    $primary: #0078d4,
+    $secondary: #0078d4,
+    $surface: #fff,
+    $info: #1377d5,
+    $success: #107c10,
+    $warn: #797673,
+    $error: #a80000,
+    $variant: 'fluent'
+);

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/color/presets/light/_indigo.scss

@@ -0,0 +1,13 @@
+@use '../../functions' as *;
+
+$palette: palette(
+    $primary: #3f51b5,
+    $secondary: #3f51b5,
+    $gray: hsl(236deg 8% 5%),
+    $surface: #fff,
+    $info: #9208bc,
+    $success: #689f38,
+    $warn: #ff9800,
+    $error: #cf1a2b,
+    $variant: 'indigo'
+);

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

@@ -0,0 +1,8 @@
+@use '../../functions' as *;
+
+$palette: palette(
+    $primary: #09f,
+    $secondary: #e41c77,
+    $surface: white,
+    $variant: 'material'
+);

package/sass/elevations/_mixins.scss

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

package/sass/elevations/presets/_index.scss

@@ -0,0 +1 @@
+@forward './material' as material-*;

package/sass/elevations/presets/_material.scss

@@ -1,4 +1,4 @@
-@use '../index' as *;
+@use '../functions' as *;
 
 ////
 /// @group elevations
@@ -6,42 +6,57 @@
 ////
 
 /// Level 1 - Umbra Shadows
-/// @type {Color} $color-1 - The color used to generate umbra shadows.
-$color-1: rgba(0 0 0 / 26%);
+/// @type {Color} $_color-1 - The color used to generate umbra shadows.
+$_color-1: rgba(0 0 0 / 26%);
 
 /// Level 2 - Penumbra Shadows
-/// @type {Color} $color-2 - The color used to generate penumbra shadows.
-$color-2: rgba(0 0 0 / 12%);
+/// @type {Color} $_color-2 - The color used to generate penumbra shadows.
+$_color-2: rgba(0 0 0 / 12%);
 
 /// Level 3 - Ambient Shadows
-/// @type {Color} $color-3 - The color used to generate ambient shadows.
-$color-3: rgba(0 0 0 / 8%);
+/// @type {Color} $_color-3 - The color used to generate ambient shadows.
+$_color-3: rgba(0 0 0 / 8%);
+
+/// Allows user configration of this module.
+@mixin configure($color-1, $color-2, $color-3) {
+    @if $color-1 {
+        $_color-1: $color-1 !global;
+    }
+
+    @if $color-2 {
+        $_color-2: $color-2 !global;
+    }
+
+    @if $color-3 {
+        $_color-3: $color-3 !global;
+    }
+}
 
 /// @type {Map} $elevations - А map of 24 shadow elevations with the umbra, penumbra and ambient shadows.
 $elevations: (
     0: none,
-    1: box-shadow((0 1px 3px 0 $color-1, 0 1px 1px 0 $color-2, 0 2px 1px -1px $color-3)),
-    2: box-shadow((0 1px 5px 0 $color-1, 0 2px 2px 0 $color-2, 0 3px 1px -2px $color-3)),
-    3: box-shadow((0 1px 8px 0 $color-1, 0 3px 4px 0 $color-2, 0 3px 3px -2px $color-3)),
-    4: box-shadow((0 2px 4px -1px $color-1, 0 4px 5px 0 $color-2, 0 1px 10px 0 $color-3)),
-    5: box-shadow((0 3px 5px -1px $color-1, 0 5px 8px 0 $color-2, 0 1px 14px 0 $color-3)),
-    6: box-shadow((0 3px 5px -1px $color-1, 0 6px 10px 0 $color-2, 0 1px 18px 0 $color-3)),
-    7: box-shadow((0 4px 5px -2px $color-1, 0 7px 10px 1px $color-2, 0 2px 16px 1px $color-3)),
-    8: box-shadow((0 5px 5px -3px $color-1, 0 8px 10px 1px $color-2, 0 3px 14px 2px $color-3)),
-    9: box-shadow((0 5px 6px -3px $color-1, 0 9px 12px 1px $color-2, 0 3px 16px 2px $color-3)),
-    10: box-shadow((0 6px 6px -3px $color-1, 0 10px 14px 1px $color-2, 0 4px 18px 3px $color-3)),
-    11: box-shadow((0 6px 7px -4px $color-1, 0 11px 15px 1px $color-2, 0 4px 20px 3px $color-3)),
-    12: box-shadow((0 7px 8px -4px $color-1, 0 12px 17px 2px $color-2, 0 5px 22px 4px $color-3)),
-    13: box-shadow((0 7px 8px -4px $color-1, 0 13px 19px 2px $color-2, 0 5px 24px 4px $color-3)),
-    14: box-shadow((0 7px 9px -4px $color-1, 0 14px 21px 2px $color-2, 0 5px 26px 4px $color-3)),
-    15: box-shadow((0 8px 9px -5px $color-1, 0 15px 22px 2px $color-2, 0 6px 28px 5px $color-3)),
-    16: box-shadow((0 8px 10px -5px $color-1, 0 16px 24px 2px $color-2, 0 6px 30px 5px $color-3)),
-    17: box-shadow((0 8px 11px -5px $color-1, 0 17px 26px 2px $color-2, 0 6px 32px 5px $color-3)),
-    18: box-shadow((0 9px 11px -5px $color-1, 0 18px 28px 2px $color-2, 0 7px 34px 6px $color-3)),
-    19: box-shadow((0 9px 12px -6px $color-1, 0 19px 29px 2px $color-2, 0 7px 36px 6px $color-3)),
-    20: box-shadow((0 10px 13px -6px $color-1, 0 20px 31px 3px $color-2, 0 8px 38px 7px $color-3)),
-    21: box-shadow((0 10px 13px -6px $color-1, 0 21px 33px 3px $color-2, 0 8px 40px 7px $color-3)),
-    22: box-shadow((0 10px 14px -6px $color-1, 0 22px 35px 3px $color-2, 0 8px 42px 7px $color-3)),
-    23: box-shadow((0 11px 14px -7px $color-1, 0 23px 36px 3px $color-2, 0 9px 44px 8px $color-3)),
-    24: box-shadow((0 11px 15px -7px $color-1, 0 24px 38px 3px $color-2, 0 9px 46px 8px $color-3))
+    1: box-shadow((0 1px 3px 0 $_color-1, 0 1px 1px 0 $_color-2, 0 2px 1px -1px $_color-3)),
+    2: box-shadow((0 1px 5px 0 $_color-1, 0 2px 2px 0 $_color-2, 0 3px 1px -2px $_color-3)),
+    3: box-shadow((0 1px 8px 0 $_color-1, 0 3px 4px 0 $_color-2, 0 3px 3px -2px $_color-3)),
+    4: box-shadow((0 2px 4px -1px $_color-1, 0 4px 5px 0 $_color-2, 0 1px 10px 0 $_color-3)),
+    5: box-shadow((0 3px 5px -1px $_color-1, 0 5px 8px 0 $_color-2, 0 1px 14px 0 $_color-3)),
+    6: box-shadow((0 3px 5px -1px $_color-1, 0 6px 10px 0 $_color-2, 0 1px 18px 0 $_color-3)),
+    7: box-shadow((0 4px 5px -2px $_color-1, 0 7px 10px 1px $_color-2, 0 2px 16px 1px $_color-3)),
+    8: box-shadow((0 5px 5px -3px $_color-1, 0 8px 10px 1px $_color-2, 0 3px 14px 2px $_color-3)),
+    9: box-shadow((0 5px 6px -3px $_color-1, 0 9px 12px 1px $_color-2, 0 3px 16px 2px $_color-3)),
+    10: box-shadow((0 6px 6px -3px $_color-1, 0 10px 14px 1px $_color-2, 0 4px 18px 3px $_color-3)),
+    11: box-shadow((0 6px 7px -4px $_color-1, 0 11px 15px 1px $_color-2, 0 4px 20px 3px $_color-3)),
+    12: box-shadow((0 7px 8px -4px $_color-1, 0 12px 17px 2px $_color-2, 0 5px 22px 4px $_color-3)),
+    13: box-shadow((0 7px 8px -4px $_color-1, 0 13px 19px 2px $_color-2, 0 5px 24px 4px $_color-3)),
+    14: box-shadow((0 7px 9px -4px $_color-1, 0 14px 21px 2px $_color-2, 0 5px 26px 4px $_color-3)),
+    15: box-shadow((0 8px 9px -5px $_color-1, 0 15px 22px 2px $_color-2, 0 6px 28px 5px $_color-3)),
+    16: box-shadow((0 8px 10px -5px $_color-1, 0 16px 24px 2px $_color-2, 0 6px 30px 5px $_color-3)),
+    17: box-shadow((0 8px 11px -5px $_color-1, 0 17px 26px 2px $_color-2, 0 6px 32px 5px $_color-3)),
+    18: box-shadow((0 9px 11px -5px $_color-1, 0 18px 28px 2px $_color-2, 0 7px 34px 6px $_color-3)),
+    19: box-shadow((0 9px 12px -6px $_color-1, 0 19px 29px 2px $_color-2, 0 7px 36px 6px $_color-3)),
+    20: box-shadow((0 10px 13px -6px $_color-1, 0 20px 31px 3px $_color-2, 0 8px 38px 7px $_color-3)),
+    21: box-shadow((0 10px 13px -6px $_color-1, 0 21px 33px 3px $_color-2, 0 8px 40px 7px $_color-3)),
+    22: box-shadow((0 10px 14px -6px $_color-1, 0 22px 35px 3px $_color-2, 0 8px 42px 7px $_color-3)),
+    23: box-shadow((0 11px 14px -7px $_color-1, 0 23px 36px 3px $_color-2, 0 9px 44px 8px $_color-3)),
+    24: box-shadow((0 11px 15px -7px $_color-1, 0 24px 38px 3px $_color-2, 0 9px 46px 8px $_color-3))
 );

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/presets/_bootstrap.scss

@@ -1,10 +1,13 @@
-@use '../index' as *;
+@use '../functions' as *;
+@use '../../utils/map' as *;
 
 ////
 /// @group Typography
 ////
 
-$scale: (
+/* 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),
         $font-weight: 500,
@@ -116,8 +119,8 @@ $bootstrap_weekday: type-style(
     $margin-top: 0,
     $margin-bottom: 0
 );
-$bootstrap_type-scale: utils.extend(
-    $scale,
+$type-scale: extend(
+    $_base-scale,
     (
         calendar-labels: $bootstrap_weekday,
     )

package/sass/typography/presets/_fluent.scss

@@ -1,10 +1,10 @@
-@use '../index' as *;
+@use '../functions' as *;
 
 ////
 /// @group Typography
 ////
-
-$scale: (
+$typeface: "'Open Sans', Helvetica, Arial, sans-serif";
+$type-scale: (
     h1: type-style(
         $font-size: rem(68px),
         $font-weight: 700,

package/sass/typography/presets/_index.scss

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

package/sass/typography/presets/_indigo.scss

@@ -1,10 +1,10 @@
-@use '../index' as *;
+@use '../functions' as *;
 
 ////
 /// @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

@@ -1,12 +1,12 @@
-@use '../index' as *;
+@use '../functions' as *;
 
 ////
 /// @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);