igniteui-theming 5.0.0 → 5.1.0

package/sass/json/generators.scss

@@ -0,0 +1,98 @@
+// stylelint-disable selector-type-no-unknown, max-nesting-depth
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:meta';
+@use 'sass:string';
+@use '../color' as *;
+@use '../color/multipliers' as multipliers;
+@use '../color/presets/light' as light-palettes;
+@use '../color/presets/dark' as dark-palettes;
+@use '../typography/presets' as typography;
+@use '../elevations/presets' as elevations;
+@use '../themes/mixins' as *;
+
+$themes: (bootstrap, material, fluent, indigo);
+
+/*
+* @outputDir - /colors/meta
+*/
+palette {
+    @each $key, $value in map.remove($IPalette, '_meta') {
+        --#{$key}: [#{$value}];
+    }
+}
+
+multipliers {
+    @each $variant in ('color', 'grayscale') {
+        $multipliers: meta.module-variables(multipliers);
+
+        > #{$variant} {
+            @each $multiplier, $props in map.get($multipliers, $variant) {
+                > #{$multiplier} {
+                    @each $key, $value in $props {
+                        --#{$key}: '#{$value}';
+                    }
+                }
+            }
+        }
+    }
+}
+
+/*
+* @outputDir - /colors/presets
+*/
+palettes {
+    @each $theme in $themes {
+        @each $variant in ('light', 'dark') {
+            $name: #{$variant}-#{$theme}-palette;
+            $palettes: meta.module-variables(#{$variant}-palettes);
+            $palette: map.get($palettes, $name);
+
+            > #{$name} {
+                @each $color in map.remove($IPalette, '_meta') {
+                    $name: list.nth($color, 1);
+
+                    --#{$name}: '#{color($palette, #{$name})}';
+                }
+            }
+        }
+    }
+}
+
+/*
+* @outputDir - /typography/presets
+*/
+typescales {
+    $type-styles: meta.module-variables(typography);
+
+    @each $theme in $themes {
+        $typeface: map.get($type-styles, #{$theme}-typeface);
+        $type-scale: map.remove(map.get($type-styles, #{$theme}-type-scale), '_meta');
+
+        > #{'' + $theme} {
+            --typeface: '#{$typeface}';
+
+            @each $style, $props in $type-scale {
+                > #{$style} {
+                    @each $key, $value in $props {
+                        --#{$key}: #{$value};
+                    }
+                }
+            }
+        }
+    }
+}
+
+/*
+* @outputDir - /elevations
+*/
+@each $theme in ('material', 'indigo') {
+    $elevations: map.get(meta.module-variables(elevations), #{$theme}-elevations);
+    #{$theme} {
+        > elevations {
+            @each $level, $value in $elevations {
+                --#{$level}: #{$value};
+            }
+        }
+    }
+}

package/sass/themes/schemas/components/light/_drop-down.scss

@@ -340,9 +340,9 @@ $bootstrap-drop-down: extend(
 /// @prop {Map} focused-item-background [color: ('primary', 500, .15)] - The drop-down focused item background color.
 /// @prop {Map} selected-item-text-color [contrast-color: ('primary', 500)] - The drop-down selected item text color.
 /// @prop {Map} selected-hover-item-background [color: ('primary', 400)] - The drop-down selected item hover background color.
-/// @prop {Map} selected-hover-item-text-color [contrast-color: ('primary', 400)] - The drop-down selected item hover text color.
+/// @prop {Map} selected-hover-item-text-color [contrast-color: ('primary', 500)] - The drop-down selected item hover text color.
 /// @prop {Map} selected-focus-item-background [color: ('primary', 400)] - The drop-down selected item focus background color.
-/// @prop {Map} selected-focus-item-text-color [contrast-color: ('primary', 400)] - The drop-down selected item focus text color.
+/// @prop {Map} selected-focus-item-text-color [contrast-color: ('primary', 500)] - The drop-down selected item focus text color.
 /// @prop {Number} elevation [3] - The elevation level, between 0-24, to be used for the badge shadow.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for drop-down component.
 /// @prop {List} item-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for the drop-down items.
@@ -393,7 +393,7 @@ $indigo-drop-down: extend(
         selected-hover-item-text-color: (
             contrast-color: (
                 'primary',
-                400,
+                500,
             ),
         ),
         selected-focus-item-background: (
@@ -405,7 +405,7 @@ $indigo-drop-down: extend(
         selected-focus-item-text-color: (
             contrast-color: (
                 'primary',
-                400,
+                500,
             ),
         ),
         border-radius: (

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

@@ -411,6 +411,7 @@ $bootstrap-switch: extend(
 /// @prop {Map} label-disabled-color [color: ('gray', 300)] - The color of the switch label when the switch is disabled
 /// @prop {Map} error-color [color: ('gray', 500)] - The border and thumb color in invalid state.
 /// @prop {Map} error-color-hover [color: ('gray', 300)] - The border and thumb color in invalid state on hover.
+/// @prop {Color} track-error-color [transparent] - The color of the track in invalid state when the switch is off.
 /// @prop {List} border-radius-track [(rem(8px), rem(0), rem(8px))] - The border radius used for switch track.
 /// @prop {Map} focus-outline-color [color: ('gray', 300)] - The focus outlined color.
 /// @prop {Map} focus-outline-color-focused [color: ('primary', 200)] - The focus outlined color for focused state.
@@ -472,6 +473,7 @@ $indigo-switch: extend(
                 300,
             ),
         ),
+        track-error-color: transparent,
         thumb-disabled-color: (
             color: (
                 'gray',

package/sass/typography/presets/_bootstrap.scss

@@ -8,9 +8,6 @@
 /// @group Typography
 ////
 
-/**
- * @sass-export-section="bootstrap"
- */
 $typeface: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
 $h1: type-style(
     $font-size: rem(40px),
@@ -24,7 +21,7 @@ $h1: type-style(
 $h2: type-style(
     $font-size: rem(32px),
     $font-weight: 500,
-    $letter-spacing: rem(-0.5px),
+    $letter-spacing: normal,
     $line-height: rem(38.4px),
     $text-transform: none,
     $margin-top: 0,
@@ -33,7 +30,7 @@ $h2: type-style(
 $h3: type-style(
     $font-size: rem(28px),
     $font-weight: 500,
-    $letter-spacing: 0,
+    $letter-spacing: normal,
     $line-height: rem(33.6px),
     $text-transform: none,
     $margin-top: 0,
@@ -42,7 +39,7 @@ $h3: type-style(
 $h4: type-style(
     $font-size: rem(24px),
     $font-weight: 500,
-    $letter-spacing: rem(0.25px),
+    $letter-spacing: normal,
     $line-height: rem(28.8px),
     $text-transform: none,
     $margin-top: 0,
@@ -51,7 +48,7 @@ $h4: type-style(
 $h5: type-style(
     $font-size: rem(20px),
     $font-weight: 500,
-    $letter-spacing: 0,
+    $letter-spacing: normal,
     $line-height: rem(24px),
     $text-transform: none,
     $margin-top: 0,
@@ -60,7 +57,7 @@ $h5: type-style(
 $h6: type-style(
     $font-size: rem(16px),
     $font-weight: 500,
-    $letter-spacing: rem(0.15px),
+    $letter-spacing: normal,
     $line-height: rem(19.2px),
     $text-transform: none,
     $margin-top: 0,
@@ -69,43 +66,43 @@ $h6: type-style(
 $body-1: type-style(
     $font-size: rem(16px),
     $font-weight: 400,
-    $letter-spacing: rem(0.5px),
+    $letter-spacing: normal,
     $line-height: rem(24px),
     $text-transform: none,
     $margin-top: 0,
     $margin-bottom: 0,
 );
 $body-2: type-style(
-    $font-size: rem(14.4px),
+    $font-size: rem(14px),
     $font-weight: 400,
-    $letter-spacing: rem(0.25px),
-    $line-height: rem(24px),
+    $letter-spacing: normal,
+    $line-height: rem(21px),
     $text-transform: none,
     $margin-top: 0,
     $margin-bottom: 0,
 );
 $subtitle-1: type-style(
-    $font-size: rem(14px),
-    $font-weight: 400,
-    $letter-spacing: rem(0.15px),
+    $font-size: rem(16px),
+    $font-weight: 700,
+    $letter-spacing: normal,
     $line-height: rem(24px),
     $text-transform: none,
     $margin-top: 0,
     $margin-bottom: 0,
 );
 $subtitle-2: type-style(
-    $font-size: rem(14.4px),
-    $font-weight: 400,
-    $letter-spacing: rem(0.1px),
-    $line-height: rem(21.6px),
+    $font-size: rem(14px),
+    $font-weight: 700,
+    $letter-spacing: normal,
+    $line-height: rem(24px),
     $text-transform: none,
     $margin-top: 0,
     $margin-bottom: 0,
 );
 $button: type-style(
     $font-size: rem(16px),
-    $font-weight: 500,
-    $letter-spacing: rem(0.75px),
+    $font-weight: 400,
+    $letter-spacing: normal,
     $line-height: rem(24px),
     $text-transform: none,
     $margin-top: 0,
@@ -114,7 +111,7 @@ $button: type-style(
 $caption: type-style(
     $font-size: rem(12px),
     $font-weight: 400,
-    $letter-spacing: rem(0.4px),
+    $letter-spacing: normal,
     $line-height: rem(16px),
     $text-transform: none,
 );

package/sass/typography/presets/_fluent.scss

@@ -6,14 +6,11 @@
 /// @group Typography
 ////
 
-/**
- * @sass-export-section="fluent"
- */
 $typeface: "'Open Sans', Helvetica, Arial, sans-serif";
 $h1: type-style(
     $font-size: rem(68px),
-    $font-weight: 700,
-    $letter-spacing: rem(-1.5px),
+    $font-weight: 400,
+    $letter-spacing: normal,
     $line-height: rem(76px),
     $text-transform: none,
     $margin-top: 0,
@@ -21,8 +18,8 @@ $h1: type-style(
 );
 $h2: type-style(
     $font-size: rem(42px),
-    $font-weight: 700,
-    $letter-spacing: rem(-0.5px),
+    $font-weight: 400,
+    $letter-spacing: normal,
     $line-height: rem(52px),
     $text-transform: none,
     $margin-top: 0,
@@ -30,8 +27,8 @@ $h2: type-style(
 );
 $h3: type-style(
     $font-size: rem(32px),
-    $font-weight: 600,
-    $letter-spacing: 0,
+    $font-weight: 400,
+    $letter-spacing: normal,
     $line-height: rem(40px),
     $text-transform: none,
     $margin-top: 0,
@@ -40,7 +37,7 @@ $h3: type-style(
 $h4: type-style(
     $font-size: rem(28px),
     $font-weight: 400,
-    $letter-spacing: rem(0.25px),
+    $letter-spacing: normal,
     $line-height: rem(36px),
     $text-transform: none,
     $margin-top: 0,
@@ -49,7 +46,7 @@ $h4: type-style(
 $h5: type-style(
     $font-size: rem(24px),
     $font-weight: 400,
-    $letter-spacing: 0,
+    $letter-spacing: normal,
     $line-height: rem(32px),
     $text-transform: none,
     $margin-top: 0,
@@ -58,7 +55,7 @@ $h5: type-style(
 $h6: type-style(
     $font-size: rem(20px),
     $font-weight: 400,
-    $letter-spacing: rem(0.15px),
+    $letter-spacing: normal,
     $line-height: rem(28px),
     $text-transform: none,
     $margin-top: 0,
@@ -67,7 +64,7 @@ $h6: type-style(
 $body-1: type-style(
     $font-size: rem(16px),
     $font-weight: 400,
-    $letter-spacing: rem(0.5px),
+    $letter-spacing: normal,
     $line-height: rem(22px),
     $text-transform: none,
     $margin-top: 0,
@@ -76,7 +73,7 @@ $body-1: type-style(
 $body-2: type-style(
     $font-size: rem(14px),
     $font-weight: 400,
-    $letter-spacing: rem(0.25px),
+    $letter-spacing: normal,
     $line-height: rem(20px),
     $text-transform: none,
     $margin-top: 0,
@@ -85,7 +82,7 @@ $body-2: type-style(
 $subtitle-1: type-style(
     $font-size: rem(18px),
     $font-weight: 400,
-    $letter-spacing: rem(0.15px),
+    $letter-spacing: normal,
     $line-height: rem(24px),
     $text-transform: none,
     $margin-top: 0,
@@ -93,8 +90,8 @@ $subtitle-1: type-style(
 );
 $subtitle-2: type-style(
     $font-size: rem(14px),
-    $font-weight: 600,
-    $letter-spacing: rem(0.1px),
+    $font-weight: 700,
+    $letter-spacing: normal,
     $line-height: rem(20px),
     $text-transform: none,
     $margin-top: 0,
@@ -103,7 +100,7 @@ $subtitle-2: type-style(
 $button: type-style(
     $font-size: rem(14px),
     $font-weight: 600,
-    $letter-spacing: rem(0.75px),
+    $letter-spacing: normal,
     $line-height: rem(14px),
     $text-transform: capitalize,
     $margin-top: 0,
@@ -113,14 +110,14 @@ $caption: type-style(
     $font-size: rem(12px),
     $font-weight: 400,
     $font-style: normal,
-    $letter-spacing: rem(0.4px),
+    $letter-spacing: normal,
     $line-height: rem(16px),
     $text-transform: none,
 );
 $overline: type-style(
     $font-size: rem(10px),
     $font-weight: 400,
-    $letter-spacing: rem(1.5px),
+    $letter-spacing: normal,
     $line-height: rem(14px),
     $text-transform: uppercase,
     $margin-top: 0,

package/sass/typography/presets/_indigo.scss

@@ -6,9 +6,6 @@
 /// @group Typography
 ////
 
-/**
- * @sass-export-section="indigo"
- */
 $typeface: "'Nunito Sans', sans-serif";
 $h1: type-style(
     $font-size: rem(36px),

package/sass/typography/presets/_material.scss

@@ -6,9 +6,6 @@
 /// @group Typography
 ////
 
-/**
- * @sass-export-section="material"
- */
 $typeface: "'Titillium Web', sans-serif";
 $h1: type-style(
     $font-size: rem(96px),

package/json/elevations/elevations.json

@@ -1 +0,0 @@
-{"indigo":{"elevations":{"0":"","1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":"","9":"","10":"","11":"","12":"","13":"","14":"","15":"","16":"","17":"","18":"","19":"","20":"","21":"","22":"","23":"","24":""}},"material":{"elevations":{"0":"","1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":"","9":"","10":"","11":"","12":"","13":"","14":"","15":"","16":"","17":"","18":"","19":"","20":"","21":"","22":"","23":"","24":""}}}