igniteui-theming 19.3.1 → 20.0.0-beta.2

package/json/colors/presets/palettes.json

@@ -1 +1 @@
-{"light-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#949ea9","surface":"#f8f9fa","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"dark-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"#b6bdc4","surface":"#212529","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"light-material-palette":{"primary":"#0099ff","secondary":"#df1b74","gray":"#9e9e9e","surface":"white","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"dark-material-palette":{"primary":"#0099ff","secondary":"#df1b74","gray":"#bdbdbd","surface":"#222222","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"light-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","gray":"#9e9e9e","surface":"white","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","gray":"#bdbdbd","surface":"#1b1b1b","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-indigo-palette":{"primary":"#3f51b5","secondary":"#3f51b5","gray":"#9a9da2","surface":"#f8f8fa","info":"#9c27b0","success":"#689f38","warn":"#f56b1d","error":"#cf1a2b"},"dark-indigo-palette":{"primary":"#3f51b5","secondary":"#3f51b5","gray":"#c3c4c7","surface":"#1e1f24","info":"#9c27b0","success":"#689f38","warn":"#f56b1d","error":"#cf1a2b"}}
+{"light-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"rgb(147.62511, 158.1, 168.57489)","surface":"#f8f9fa","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"dark-bootstrap-palette":{"primary":"#0d6efd","secondary":"#6c757d","gray":"rgb(181.53297, 188.7, 195.86703)","surface":"#212529","info":"#0dcaf0","success":"#198754","warn":"#ffc107","error":"#dc3545"},"light-material-palette":{"primary":"#0099ff","secondary":"#df1b74","gray":"rgb(158.1, 158.1, 158.1)","surface":"white","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"dark-material-palette":{"primary":"#0099ff","secondary":"#df1b74","gray":"rgb(188.7, 188.7, 188.7)","surface":"#222222","info":"#1377d5","success":"#4eb862","warn":"#faa419","error":"#ff134a"},"light-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","gray":"rgb(158.1, 158.1, 158.1)","surface":"white","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"dark-fluent-palette":{"primary":"#0078d4","secondary":"#2b88d8","gray":"rgb(188.7, 188.7, 188.7)","surface":"#1b1b1b","info":"#1377d5","success":"#107c10","warn":"#797673","error":"#a80000"},"light-indigo-palette":{"primary":"rgb(63, 81, 181)","secondary":"rgb(63, 81, 181)","gray":"rgb(154, 157, 162)","surface":"#f8f8fa","info":"rgb(156, 39, 176)","success":"rgb(104, 159, 56)","warn":"rgb(245, 107, 29)","error":"rgb(207, 26, 43)"},"dark-indigo-palette":{"primary":"rgb(63, 81, 181)","secondary":"rgb(63, 81, 181)","gray":"rgb(195, 196, 199)","surface":"#1e1f24","info":"rgb(156, 39, 176)","success":"rgb(104, 159, 56)","warn":"rgb(245, 107, 29)","error":"rgb(207, 26, 43)"}}

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "igniteui-theming",
-  "version": "19.3.1",
+  "version": "20.0.0-beta.2",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {
     "clean": "npm run clean:json && npm run clean:docs",
     "clean:json": "shx rm -rf json",
     "clean:docs": "shx rm -rf docs",
-    "build": "npm run build:json && npm run build:tailwind && npm run build:e2e",
+    "clean:tailwind": "shx rm -rf tailwind",
+    "build": "npm run clean && npm run build:json && npm run build:tailwind && npm run build:e2e",
     "build:docs": "npm run clean:docs && npm run build:docs:en:production",
     "build:docs:en:production": "set NODE_ENV=production && npx sassdoc ./sass -d docs",
     "build:docs:en:staging": "set NODE_ENV=staging && npx sassdoc ./sass -d docs",
-    "build:e2e": "sass ./test/e2e/theme.scss ./test/e2e/theme.css",
+    "build:e2e": "sass --quiet ./test/e2e/theme.scss ./test/e2e/theme.css",
     "build:json": "node scripts/buildJSON.mjs",
-    "build:tailwind": "node scripts/buildTailwind.mjs",
+    "build:tailwind": "npm run clean:tailwind && node scripts/buildTailwind.mjs",
     "serve:docs": "npx http-server ./docs",
     "preview:palette": "node scripts/previewPalette.mjs",
     "lint": "npm run lint:styles && npm run lint:prettier",
@@ -92,14 +93,12 @@
     "postcss": "^8.4.35",
     "postcss-safe-parser": "^7.0.0",
     "prettier": "^3.2.5",
-    "sass-true": "^7.0.0",
+    "sass-embedded": "^1.92.1",
+    "sass-true": "^9.0.0",
     "sassdoc-plugin-localization": "^2.0.0",
     "shx": "^0.3.4",
     "stylelint": "^15.6.2",
     "stylelint-config-standard-scss": "^7.0.1",
     "stylelint-scss": "^4.7.0"
-  },
-  "peerDependencies": {
-    "sass": "^1.69.5"
   }
 }

package/sass/color/_functions.scss

@@ -151,7 +151,11 @@ $_enhanced-accessibility: false;
         $len: list.length($lmap);
         $i: list.index(map.keys($lmap), #{$shade});
         $l: list.nth(map.values($lmap), if($lum > 0.5, $len - $i + 1, $i));
-        $raw: hsl(to-fixed(color.hue($color)), to-fixed(color.saturation($color)), $l);
+        $raw: hsl(
+            to-fixed(color.channel($color, 'hue', $space: hsl)),
+            to-fixed(color.channel($color, 'saturation', $space: hsl)),
+            $l
+        );
         $hsl: #{hsl(from var(--ig-#{$name}-500) h s $l)};
 
         @if #{$shade} == '500' {
@@ -160,23 +164,57 @@ $_enhanced-accessibility: false;
 
         @return (raw: $raw, hsl: $hsl);
     } @else {
-        $sx: map.get(multipliers.$color, 's', #{$shade});
-        $lx: map.get(multipliers.$color, 'l', #{$shade});
-        $raw: hsl(
-            to-fixed(color.hue($color)),
-            to-fixed(color.saturation($color) * $sx),
-            to-fixed(color.lightness($color) * $lx)
-        );
-        $hsl: #{hsl(from var(--ig-#{$name}-500) h calc(s * $sx) calc(l * $lx))};
+        $hsl: null;
+        $raw: null;
 
         @if #{$shade} == '500' {
             $hsl: $color;
+            $raw: $color;
+        } @else {
+            $sx: map.get(multipliers.$color, 's', #{$shade});
+            $lx: map.get(multipliers.$color, 'l', #{$shade});
+            $raw: hsl(
+                to-fixed(color.channel($color, 'hue', $space: hsl)),
+                to-fixed(color.channel($color, 'saturation', $space: hsl) * $sx),
+                to-fixed(color.channel($color, 'lightness', $space: hsl) * $lx)
+            );
+            $hsl: #{hsl(from var(--ig-#{$name}-500) h calc(s * $sx) calc(l * $lx))};
         }
 
         @return (raw: $raw, hsl: $hsl);
     }
 }
 
+/// Calculates a dynamic shade of a color by adjusting its lightness in LCH color space.
+/// @access public
+/// @param {Color} $color - The base color to shade.
+/// @param {Number} $lightness [50] - The target lightness value to move toward.
+/// @param {Number} $percentage [0.1] - The percentage to move toward the target lightness.
+/// @param {Number} $offset [10] - The offset added or subtracted based on direction.
+/// @returns {Color} - The dynamically shaded color in LCH color space
+@function dynamic-shade($color, $lightness: 50, $factor: 0.1, $offset: 5) {
+    @return lch(from $color calc(l + ($lightness - l) * $factor + sign($lightness - l) * $offset) c h);
+}
+
+/// Normalizes a color value to ensure consistent format output.
+/// This fixes issues with newer Sass versions that return RGB format with floating point precision.
+/// @access private
+/// @group Color
+/// @param {Color} $color - The color to normalize.
+/// @returns {Color} - The normalized color in hex format.
+@function _normalize-color($color) {
+    @if meta.type-of($color) == 'color' {
+        // Round RGB channels to integers to maintain backward compatibility with older Sass behavior
+        $r: math.round(color.channel($color, 'red', $space: rgb));
+        $g: math.round(color.channel($color, 'green', $space: rgb));
+        $b: math.round(color.channel($color, 'blue', $space: rgb));
+
+        @return rgb($r, $g, $b);
+    }
+
+    @return $color;
+}
+
 /// Retrieves a color from a color palette.
 /// @access public
 /// @group Palettes
@@ -217,7 +255,11 @@ $_enhanced-accessibility: false;
         $base: map.get($s, #{$variant});
         $raw: map.get($s, #{$variant}-raw);
 
-        @return if($contrast, $_relative-color, if($raw and $variant != '500', rgba($raw, $_alpha), $base));
+        @return if(
+            $contrast,
+            $_relative-color,
+            if($raw and $variant != '500', rgba($raw, $_alpha), _normalize-color($base))
+        );
     }
 
     @return $_relative-color;
@@ -335,13 +377,13 @@ $_enhanced-accessibility: false;
 /// @return {Color} - The color representation of the rgba value.
 @function to-opaque($color-1, $color-2: #fff) {
     @if meta.type-of($color-1) == color and meta.type-of($color-2) == color {
-        $red: color.red($color-1);
-        $green: color.green($color-1);
-        $blue: color.blue($color-1);
-        $a: color.alpha($color-1);
-        $r: math.floor($a * $red + (1 - $a) * color.red($color-2));
-        $g: math.floor($a * $green + (1 - $a) * color.green($color-2));
-        $b: math.floor($a * $blue + (1 - $a) * color.blue($color-2));
+        $red: color.channel($color-1, 'red', $space: rgb);
+        $green: color.channel($color-1, 'green', $space: rgb);
+        $blue: color.channel($color-1, 'blue', $space: rgb);
+        $a: color.channel($color-1, 'alpha');
+        $r: math.floor($a * $red + (1 - $a) * color.channel($color-2, 'red', $space: rgb));
+        $g: math.floor($a * $green + (1 - $a) * color.channel($color-2, 'green', $space: rgb));
+        $b: math.floor($a * $blue + (1 - $a) * color.channel($color-2, 'blue', $space: rgb));
 
         @return rgb($r, $g, $b);
     }
@@ -358,7 +400,11 @@ $_enhanced-accessibility: false;
 ///   $hsl-list: to-hsl(#000); // (0deg, 0%, 0%);
 /// @return {List} - This list of HSL values.
 @function to-hsl($color) {
-    @return (math.round(color.hue($color)), math.round(color.saturation($color)), math.round(color.lightness($color)));
+    @return (
+        math.round(color.channel($color, 'hue', $space: hsl)),
+        math.round(color.channel($color, 'saturation', $space: hsl)),
+        math.round(color.channel($color, 'lightness', $space: hsl))
+    );
 }
 
 /// Calculates the contrast ratio between two colors.
@@ -395,9 +441,9 @@ $_enhanced-accessibility: false;
 /// @link https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests. WCAG 2.0 Contrast Ratio
 @function luminance($color) {
     @if meta.type-of($color) == 'color' {
-        $r: math.div(color.red($color), 255);
-        $g: math.div(color.green($color), 255);
-        $b: math.div(color.blue($color), 255);
+        $r: math.div(color.channel($color, 'red', $space: rgb), 255);
+        $g: math.div(color.channel($color, 'green', $space: rgb), 255);
+        $b: math.div(color.channel($color, 'blue', $space: rgb), 255);
 
         @return 0.2126 * _lcv($r) + 0.7152 * _lcv($g) + 0.0722 * _lcv($b);
     }

package/sass/elevations/_functions.scss

@@ -16,7 +16,7 @@ $factor: var(--ig-elevation-factor, 1);
 @function _is-shadow($shadow) {
     $lastIndex: list.length($shadow);
 
-    @if type-of($shadow) != list {
+    @if meta.type-of($shadow) != list {
         @return false;
     }
 

package/sass/tailwind/_mixins.scss

@@ -0,0 +1,62 @@
+@use 'sass:string';
+@use 'sass:map';
+@use 'sass:meta';
+@use '../index' as *;
+@use '../elevations/presets/material' as *;
+
+$theme-schemas: () !default;
+
+@mixin generate-color-vars {
+    @each $colorName, $shades in $IPaletteColors {
+        @each $shade in $shades {
+            --color-#{$colorName}-#{$shade}: var(--ig-#{$colorName}-#{$shade});
+            --color-#{$colorName}-#{$shade}-contrast: var(--ig-#{$colorName}-#{$shade}-contrast);
+        }
+    }
+}
+
+@mixin generate-shadow-vars {
+    @each $level, $shadow in $elevations {
+        --shadow-elevation-#{$level}: var(--ig-elevation-#{$level});
+    }
+}
+
+@mixin generate-typography-utilities {
+    @each $type in $ITypeScale {
+        @utility type-style-#{$type} {
+            @each $prop, $_ in $ITypeStyle {
+                #{$prop}: var(--ig-#{$type}-#{$prop});
+            }
+        }
+    }
+}
+
+@mixin tailwind-theme($component, $props: ()) {
+    $has-theme: meta.function-exists(#{$component}-theme);
+
+    @if $has-theme {
+        $fn: meta.get-function(#{$component}-theme);
+
+        @each $_, $schema in $theme-schemas {
+            $_theme: meta.call($fn, $schema: $schema);
+            $_defaults: ();
+
+            @each $prop in $props {
+                $_defaults: map.merge(
+                    $_defaults,
+                    (
+                        $prop: map.get($_theme, $prop),
+                    )
+                );
+            }
+
+            $_t: meta.call($fn, $schema: $schema, $_defaults...);
+            $_name: map.get($_t, name);
+            $_variant: map.get($_t, _meta, variant);
+
+            @utility #{$_variant}-#{$component} {
+                @include css-vars-from-theme($_t, $_name);
+            }
+        }
+    }
+}

package/sass/tailwind/themes/base.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@use '../mixins' as *;
+
+@theme {
+    @include generate-color-vars();
+    @include generate-shadow-vars();
+
+    --font-ig: var(--ig-font-family);
+    --text-base: var(--ig-base-font-size);
+}
+
+@include generate-typography-utilities();

package/sass/tailwind/{presets/bootstrap-dark.scss → themes/dark/bootstrap.scss}

@@ -1,7 +1,7 @@
-@use '../../index' as *;
-@use '../../color/presets' as *;
-@use '../../typography/presets' as *;
-@use '../../elevations/presets' as *;
+@use '../../../index' as *;
+@use '../../../color/presets' as *;
+@use '../../../typography/presets' as *;
+@use '../../../elevations/presets' as *;
 @include palette($dark-bootstrap-palette);
 @include typography($bootstrap-typeface, $bootstrap-type-scale);
 @include elevations($material-elevations);

package/sass/tailwind/themes/dark/fluent.scss

@@ -0,0 +1,7 @@
+@use '../../../index' as *;
+@use '../../../color/presets' as *;
+@use '../../../typography/presets' as *;
+@use '../../../elevations/presets' as *;
+@include palette($dark-fluent-palette);
+@include typography($fluent-typeface, $fluent-type-scale);
+@include elevations($material-elevations);

package/sass/tailwind/themes/dark/indigo.scss

@@ -0,0 +1,7 @@
+@use '../../../index' as *;
+@use '../../../color/presets' as *;
+@use '../../../typography/presets' as *;
+@use '../../../elevations/presets' as *;
+@include palette($dark-indigo-palette);
+@include typography($indigo-typeface, $indigo-type-scale);
+@include elevations($indigo-elevations);

package/sass/tailwind/{presets/material-dark.scss → themes/dark/material.scss}

@@ -1,7 +1,7 @@
-@use '../../index' as *;
-@use '../../color/presets' as *;
-@use '../../typography/presets' as *;
-@use '../../elevations/presets' as *;
+@use '../../../index' as *;
+@use '../../../color/presets' as *;
+@use '../../../typography/presets' as *;
+@use '../../../elevations/presets' as *;
 @include palette($dark-material-palette);
 @include typography($material-typeface, $material-type-scale);
 @include elevations($material-elevations);

package/sass/tailwind/{presets/bootstrap-light.scss → themes/light/bootstrap.scss}

@@ -1,7 +1,7 @@
-@use '../../index' as *;
-@use '../../color/presets' as *;
-@use '../../typography/presets' as *;
-@use '../../elevations/presets' as *;
+@use '../../../index' as *;
+@use '../../../color/presets' as *;
+@use '../../../typography/presets' as *;
+@use '../../../elevations/presets' as *;
 @include palette($light-bootstrap-palette);
 @include typography($bootstrap-typeface, $bootstrap-type-scale);
 @include elevations($material-elevations);

package/sass/tailwind/themes/light/fluent.scss

@@ -0,0 +1,7 @@
+@use '../../../index' as *;
+@use '../../../color/presets' as *;
+@use '../../../typography/presets' as *;
+@use '../../../elevations/presets' as *;
+@include palette($light-fluent-palette);
+@include typography($fluent-typeface, $fluent-type-scale);
+@include elevations($material-elevations);

package/sass/tailwind/themes/light/indigo.scss

@@ -0,0 +1,7 @@
+@use '../../../index' as *;
+@use '../../../color/presets' as *;
+@use '../../../typography/presets' as *;
+@use '../../../elevations/presets' as *;
+@include palette($light-indigo-palette);
+@include typography($indigo-typeface, $indigo-type-scale);
+@include elevations($indigo-elevations);

package/sass/tailwind/{presets/material-light.scss → themes/light/material.scss}

@@ -1,7 +1,7 @@
-@use '../../index' as *;
-@use '../../color/presets' as *;
-@use '../../typography/presets' as *;
-@use '../../elevations/presets' as *;
+@use '../../../index' as *;
+@use '../../../color/presets' as *;
+@use '../../../typography/presets' as *;
+@use '../../../elevations/presets' as *;
 @include palette($light-material-palette);
 @include typography($material-typeface, $material-type-scale);
 @include elevations($material-elevations);

package/sass/tailwind/utilities/_common.scss

@@ -0,0 +1,288 @@
+@use 'sass:map';
+@use '../../themes/mixins' as *;
+@use '../../themes/functions' as *;
+@use '../_mixins.scss' as *;
+
+$theme-schemas: () !default;
+
+@mixin tailwind-themes() {
+    // Avatar
+    @include tailwind-theme(
+        $component: avatar,
+        $props: (
+            background,
+        )
+    );
+
+    // Badge
+    @include tailwind-theme(
+        $component: badge,
+        $props: (
+            background-color,
+        )
+    );
+
+    // Bottom Navigation
+    @include tailwind-theme(
+        $component: bottom-nav,
+        $props: (
+            background,
+        )
+    );
+
+    // Button Group
+    @include tailwind-theme(
+        $component: button-group,
+        $props: (
+            item-background,
+        )
+    );
+
+    // Flat Button
+    @include tailwind-theme(
+        $component: flat-button,
+        $props: (
+            foreground,
+        )
+    );
+
+    // Contained Button
+    @include tailwind-theme(
+        $component: contained-button,
+        $props: (
+            background,
+        )
+    );
+
+    // Outlined Button
+    @include tailwind-theme(
+        $component: outlined-button,
+        $props: (
+            foreground,
+        )
+    );
+
+    // FAB Button
+    @include tailwind-theme(
+        $component: fab-button,
+        $props: (
+            background,
+        )
+    );
+
+    // Card
+    @include tailwind-theme(
+        $component: card,
+        $props: (
+            background,
+        )
+    );
+
+    // Chip
+    @include tailwind-theme(
+        $component: chip,
+        $props: (
+            background,
+        )
+    );
+
+    // Carousel
+    @include tailwind-theme(
+        $component: carousel,
+        $props: (
+            button-background,
+            indicator-background,
+        )
+    );
+
+    // Calendar
+    @include tailwind-theme(
+        $component: calendar,
+        $props: (
+            header-background,
+            content-background,
+        )
+    );
+
+    // Checkbox
+    @include tailwind-theme(
+        $component: checkbox,
+        $props: (
+            empty-color,
+            fill-color,
+        )
+    );
+
+    // Combo
+    @include tailwind-theme(
+        $component: combo,
+        $props: (
+            toggle-button-background,
+        )
+    );
+
+    // // Expansion Panel
+    @include tailwind-theme(
+        $component: expansion-panel,
+        $props: (
+            header-background,
+            body-background,
+        )
+    );
+
+    // Grid
+    @include tailwind-theme(
+        $component: grid,
+        $props: (
+            content-background,
+        )
+    );
+
+    // Icon
+    @include tailwind-theme(
+        $component: icon,
+        $props: (
+            color,
+        )
+    );
+
+    // Flat Icon Button
+    @include tailwind-theme(
+        $component: flat-icon-button,
+        $props: (
+            foreground,
+        )
+    );
+
+    // Contained Icon Button
+    @include tailwind-theme(
+        $component: contained-icon-button,
+        $props: (
+            background,
+        )
+    );
+
+    // Outlined Icon Button
+    @include tailwind-theme(
+        $component: outlined-icon-button,
+        $props: (
+            foreground,
+        )
+    );
+
+    // Input Group
+    @include tailwind-theme(
+        $component: input-group,
+        $props: (
+            box-background,
+            search-background,
+            border-color,
+        )
+    );
+
+    // List
+    @include tailwind-theme(
+        $component: list,
+        $props: (
+            background,
+            item-background,
+        )
+    );
+
+    // Navbar
+    @include tailwind-theme(
+        $component: navbar,
+        $props: (
+            background,
+        )
+    );
+
+    // // Navdrawer
+    @include tailwind-theme(
+        $component: navdrawer,
+        $props: (
+            background,
+        )
+    );
+
+    // Query Builder
+    @include tailwind-theme(
+        $component: query-builder,
+        $props: (
+            background,
+        )
+    );
+
+    // Radio
+    @include tailwind-theme(
+        $component: radio,
+        $props: (
+            empty-color,
+            fill-color,
+        )
+    );
+
+    // Select
+    @include tailwind-theme(
+        $component: select,
+        $props: (
+            toggle-button-background,
+        )
+    );
+
+    // Snackbar
+    @include tailwind-theme(
+        $component: snackbar-theme,
+        $props: (
+            background,
+        )
+    );
+
+    // Splitter
+    @include tailwind-theme(
+        $component: splitter,
+        $props: (
+            bar-color,
+        )
+    );
+
+    // Stepper
+    @include tailwind-theme(
+        $component: stepper,
+        $props: (
+            step-background,
+        )
+    );
+
+    // Tabs
+    @include tailwind-theme(
+        $component: tabs,
+        $props: (
+            item-background,
+        )
+    );
+
+    // Toast
+    @include tailwind-theme(
+        $component: toast,
+        $props: (
+            background,
+        )
+    );
+
+    // Tooltip
+    @include tailwind-theme(
+        $component: tooltip,
+        $props: (
+            background,
+        )
+    );
+
+    // Tree - use with tree-node, not tree directly
+    @include tailwind-theme(
+        $component: tree,
+        $props: (
+            background,
+        )
+    );
+}