@progress/kendo-theme-core 9.1.1-dev.2 → 10.0.0-dev.0

package/scss/functions/_math.import.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 /// Returns the absolute value of a number.
 /// @param {Number} $number - The number to get the absolute value of.
 /// @return {Number} - The absolute value of `$number`.
@@ -5,7 +7,7 @@
 /// @example scss - Usage
 ///   @debug k-math-abs( -10 ); // => 10
 @function k-math-abs( $number ) {
-    @return abs( $number );
+    @return math.abs( $number );
 }
 
 /// Returns the smallest integer greater than or equal to a number.
@@ -15,7 +17,7 @@
 /// @example scss - Usage
 ///   @debug k-math-ceil( 10.1 ); // => 11
 @function k-math-ceil( $number ) {
-    @return ceil( $number );
+    @return math.ceil( $number );
 }
 
 /// Returns the largest integer less than or equal to a number.
@@ -25,7 +27,7 @@
 /// @example scss - Usage
 ///   @debug k-math-floor( 10.9 ); // => 10
 @function k-math-floor( $number ) {
-    @return floor( $number );
+    @return math.floor( $number );
 }
 
 /// Restricts `$number` to the range between `$min` and `$max`. If `$number` is
@@ -51,7 +53,7 @@
 ///   @debug k-math-compatible( 10px, 10px ); // => true
 ///   @debug k-math-compatible( 10px, 10em ); // => false
 @function k-math-compatible( $a, $b ) {
-    @return comparable( $a, $b );
+    @return math.comparable( $a, $b );
 }
 
 /// Returns the quotient of two numbers.
@@ -63,7 +65,7 @@
 ///   @debug k-math-div( 10, 2 ); // => 5
 ///   @debug k-math-div( 10px, 2 ); // => 5px
 @function k-math-div( $a, $b )  {
-    @return ( $a / $b );
+    @return math.div( $a, $b );
 }
 
 /// Returns whether `$number` has no units.
@@ -74,7 +76,7 @@
 ///   @debug k-math-is-unitless( 10 ); // => true
 ///   @debug k-math-is-unitless( 10px ); // => false
 @function k-math-is-unitless( $number ) {
-    @return unitless( $number );
+    @return math.unitless( $number );
 }
 
 /// Returns the larger of two numbers.
@@ -86,7 +88,7 @@
 ///   @debug k-math-max( 10, 20 ); // => 20
 ///   @debug k-math-max( 10px, 20px ); // => 20px
 @function k-math-max( $a, $b ) {
-    @return max( $a, $b );
+    @return math.max( $a, $b );
 }
 
 /// Returns the smaller of two numbers.
@@ -98,7 +100,7 @@
 ///   @debug k-math-min( 10, 20 ); // => 10
 ///   @debug k-math-min( 10px, 20px ); // => 10px
 @function k-math-min( $a, $b ) {
-    @return min( $a, $b );
+    @return math.min( $a, $b );
 }
 
 /// Returns the remainder of two numbers.
@@ -132,7 +134,7 @@
 /// @example scss - Usage
 ///   @debug k-math-percentage( 0.5 ); // => 50%
 @function k-math-percentage( $number ) {
-    @return percentage( $number );
+    @return math.percentage( $number );
 }
 
 /// Returns the result of raising `$x` to the power of `$n`.
@@ -171,10 +173,10 @@
 ///   @debug k-math-random(); // => 0.123456789
 @function k-math-random( $limit: null ) {
     @if ( $limit == null ) { // stylelint-disable-line
-        @return random();
+        @return math.random();
     }
 
-    @return random( $limit );
+    @return math.random( $limit );
 }
 
 /// Returns the result of rounding `$number` to the nearest integer
@@ -188,7 +190,7 @@
 @function k-math-round( $number, $precision: 0 ) {
 
     @if ( $precision == 0 ) {
-        @return round( $number );
+        @return math.round( $number );
     }
 
     $pow: k-math-pow( 10, $precision );
@@ -203,7 +205,7 @@
 /// @example scss - Usage
 ///   @debug k-math-unit( 10px ); // => px
 @function k-math-unit( $number ) {
-    @return unit( $number );
+    @return math.unit( $number );
 }
 
 /// Remove the unit from a number.

package/scss/functions/_meta.import.scss

@@ -1,3 +1,5 @@
+@use "sass:meta";
+
 // Adapted from https://css-tricks.com/snippets/sass/advanced-type-checking/
 
 /// A wrapper around the `call()` function.
@@ -9,7 +11,7 @@
 /// @example scss - Usage
 ///   @debug k-meta-call( k-meta-get-function( "k-string-replace" ), "foo bar", "bar", "baz" ); // => "foo baz"
 @function k-meta-call( $function, $args... ) {
-    @return call( $function, $args... );
+    @return meta.call( $function, $args... );
 }
 
 /// A wrapper around the `function-exists()` function.
@@ -24,7 +26,7 @@
         @return false;
     }
 
-    @return function-exists( $name );
+    @return meta.function-exists( $name );
 }
 
 /// A wrapper around the `get-function()` function.
@@ -37,7 +39,7 @@
 /// @example scss - Usage
 ///   @debug k-meta-get-function( "k-string-replace" ); // => Function
 @function k-meta-get-function( $name, $args... ) {
-    @return get-function( $name, $args... );
+    @return meta.get-function( $name, $args... );
 }
 
 /// A wrapper around the `inspect()` function.
@@ -48,7 +50,7 @@
 /// @example scss - Usage
 ///   @debug k-meta-inspect( "foo bar" ); // => "foo bar"
 @function k-meta-inspect( $value ) {
-    @return inspect( $value );
+    @return meta.inspect( $value );
 }
 
 /// A wrapper around the `keywords()` function.
@@ -59,7 +61,7 @@
 /// @example scss - Usage
 ///   @debug k-meta-keywords( ( "foo" "bar" "baz" "qux" ) ); // => ( "foo": "bar", "baz": "qux" )
 @function k-meta-keywords( $args ) {
-    @return keywords( $args );
+    @return meta.keywords( $args );
 }
 
 /// A wrapper around the `type-of()` function.
@@ -70,7 +72,7 @@
 /// @example scss - Usage
 ///   @debug k-meta-type-of( "foo bar" ); // => "string"
 @function k-meta-type-of( $value ) {
-    @return type-of( $value );
+    @return meta.type-of( $value );
 }
 
 /// A wrapper around the `variable-exists()` function.
@@ -81,7 +83,7 @@
 /// @example scss - Usage
 ///   @debug k-meta-variable-exists( "foo" ); // => true
 @function k-meta-variable-exists( $name ) {
-    @return variable-exists( $name );
+    @return meta.variable-exists( $name );
 }
 
 /// Checks whether `$value` is a <number> CSS data type.

package/scss/functions/_string.import.scss

@@ -1,4 +1,7 @@
-$svg-escaped-characters: (
+@use "sass:meta";
+@use "sass:string";
+
+$_kendo-svg-escaped-characters: (
     ("%", "%25"),
     ("<", "%3c"),
     (">", "%3e"),
@@ -7,6 +10,11 @@ $svg-escaped-characters: (
     (")", "%29")
 ) !default;
 
+$_kendo-escape-class-name: (
+    ".": "\\.",
+    "/": "\\/"
+);
+
 /// Returns the first index of `$substring` in `$string`, or `null` if `$string` doesn’t contain `$substring`.
 /// @param {String} $string - The string to process.
 /// @param {String} $substring - The substring to look for.
@@ -15,7 +23,7 @@ $svg-escaped-characters: (
 /// @example scss - Usage
 ///   @debug k-string-index( "foo bar", "bar" ); // => 5
 @function k-string-index( $string, $substring ) {
-    @return str-index( $string, $substring );
+    @return string.index( $string, $substring );
 }
 
 /// Returns a copy of `$string` with `$insert` inserted at `$index`.
@@ -27,7 +35,7 @@ $svg-escaped-characters: (
 /// @example scss - Usage
 ///   @debug k-string-insert( "foo bar", "baz", 5 ); // => "foo baz bar"
 @function k-string-insert( $string, $insert, $index ) {
-    @return str-insert( $string, $insert, $index );
+    @return string.insert( $string, $insert, $index );
 }
 
 /// Returns the length of `$string`.
@@ -37,7 +45,7 @@ $svg-escaped-characters: (
 /// @example scss - Usage
 ///   @debug k-string-length( "foo bar" ); // => 7
 @function k-string-length( $string ) {
-    @return str-length( $string );
+    @return string.length( $string );
 }
 
 /// Returns a copy of `$string` with quotes added.
@@ -47,7 +55,7 @@ $svg-escaped-characters: (
 /// @example scss - Usage
 ///   @debug k-string-quote( "foo bar" ); // => "foo bar"
 @function k-string-quote( $string ) {
-    @return quote( $string );
+    @return string.quote( $string );
 }
 
 /// Returns a copy of `$string` with all occurrences of `$search`
@@ -62,7 +70,7 @@ $svg-escaped-characters: (
 /// @example scss - Usage
 ///   @debug k-string-replace( "foo bar", "bar", "baz" ); // => "foo baz"
 @function k-string-replace( $string, $search, $replace: "" ) {
-    @if k-meta-type-of( $string ) == number {
+    @if meta.type-of( $string ) == number {
         $string: $string + "";
     }
 
@@ -84,7 +92,7 @@ $svg-escaped-characters: (
 /// @example scss - Usage
 ///   @debug k-string-slice( "foo bar", 5 ); // => "bar"
 @function k-string-slice( $string, $start-at, $end-at: -1 ) {
-    @return str-slice( $string, $start-at, $end-at );
+    @return string.slice( $string, $start-at, $end-at );
 }
 
 /// Returns a copy of `$string` with all uppercase letters converted to lowercase.
@@ -94,7 +102,7 @@ $svg-escaped-characters: (
 /// @example scss - Usage
 ///   @debug k-string-to-lower-case( "FOO BAR" ); // => "foo bar"
 @function k-string-to-lower-case( $string ) {
-    @return to-lower-case( $string );
+    @return string.to-lower-case( $string );
 }
 
 /// Returns a copy of `$string` with all lowercase letters converted to uppercase.
@@ -104,7 +112,7 @@ $svg-escaped-characters: (
 /// @example scss - Usage
 ///   @debug k-string-to-upper-case( "foo bar" ); // => "FOO BAR"
 @function k-string-to-upper-case( $string ) {
-    @return to-upper-case( $string );
+    @return string.to-upper-case( $string );
 }
 
 /// Returns a unique identifier.
@@ -113,7 +121,7 @@ $svg-escaped-characters: (
 /// @example scss - Usage
 ///   @debug k-string-unique-id(); // => UNIQUE_ID
 @function k-string-unique-id() {
-    @return unique-id();
+    @return string.unique-id();
 }
 
 /// Returns a copy of `$string` with quotes removed.
@@ -123,7 +131,7 @@ $svg-escaped-characters: (
 /// @example scss - Usage
 ///   @debug k-string-unquote( "foo bar" ); // => foo bar
 @function k-string-unquote( $string ) {
-    @return unquote( $string );
+    @return string.unquote( $string );
 }
 
 
@@ -139,17 +147,30 @@ $svg-escaped-characters: (
 }
 
 // See https://codepen.io/kevinweber/pen/dXWoRw
-@function escape-svg($string) {
+@function k-escape-svg($string) {
     @if k-string-index($string, "data:image/svg+xml") {
-        @each $char, $encoded in $svg-escaped-characters {
+        @each $char, $encoded in $_kendo-svg-escaped-characters {
             // Do not escape the url brackets
             @if k-string-index($string, "url(") == 1 {
-                $string: url("#{str-replace(k-string-slice($string, 6, -3), $char, $encoded)}");
+                $string: url("#{k-string-replace(k-string-slice($string, 6, -3), $char, $encoded)}");
             } @else {
-                $string: str-replace($string, $char, $encoded);
+                $string: k-string-replace($string, $char, $encoded);
             }
         }
     }
 
     @return $string;
 }
+
+/// Escapes special characters in a class name
+/// @param {String} $text - The string to escape
+/// @return {String} - The escaped string
+@function k-escape-class-name( $text ) {
+    $_text: $text;
+
+    @each $char, $rep in $_kendo-escape-class-name {
+        $_text: k-string-replace( $_text, k-string-unquote( $char ), k-string-unquote( $rep ) );
+    }
+
+    @return $_text;
+}

package/scss/functions/index.import.scss

@@ -1,12 +1,8 @@
-@import "./_color.import.scss";
-@import "./_color-contrast.import.scss";
-@import "./_color-manipulation.import.scss";
-@import "./_color-system.import.scss";
-@import "./_custom-properties.import.scss";
-@import "./_escape-string.import.scss";
-@import "./_lang.import.scss";
-@import "./_list.import.scss";
-@import "./_math.import.scss";
-@import "./_map.import.scss";
-@import "./_meta.import.scss";
-@import "./_string.import.scss";
+@forward "./_color.import.scss";
+@forward "./_custom-properties.import.scss";
+@forward "./_lang.import.scss";
+@forward "./_list.import.scss";
+@forward "./_math.import.scss";
+@forward "./_map.import.scss";
+@forward "./_meta.import.scss";
+@forward "./_string.import.scss";

package/scss/index.import.scss

@@ -1,10 +1,27 @@
-@import "./functions/index.import.scss";
-@import "./color-system/index.import.scss";
-@import "./mixins/index.import.scss";
-@import "./module-system/index.import.scss";
-@import "./styles/index.import.scss";
-@import "./elevation/index.import.scss";
-@import "./typography/index.import.scss";
-@import "./spacing/index.import.scss";
-@import "./border-radii/index.import.scss";
-@import "./_variables.scss";
+@forward "./_variables.scss";
+@forward "./color-system/index.import.scss";
+@forward "./mixins/index.import.scss";
+@forward "./spacing/index.import.scss";
+@forward "./styles/index.import.scss";
+@forward "./elevation/index.import.scss";
+@forward "./typography/index.import.scss";
+@forward "./border-radii/index.import.scss";
+
+@use "./color-system/index.import.scss" as *;
+@use "./mixins/index.import.scss" as *;
+@use "./styles/index.import.scss" as *;
+@use "./elevation/index.import.scss" as *;
+@use "./typography/index.import.scss" as *;
+@use "./spacing/index.import.scss" as *;
+@use "./border-radii/index.import.scss" as *;
+
+@mixin core-styles() {
+    @include import-once("core-styles") {
+        @include kendo-color-system--styles();
+        @include kendo-core--styles();
+        @include kendo-spacing--styles();
+        @include kendo-elevation--styles();
+        @include kendo-core--typography--styles();
+        @include kendo-border-radius--styles();
+    }
+}

package/scss/mixins/_border-radius.scss

@@ -1,3 +1,5 @@
+@use "../_variables.scss" as *;
+
 // Border radius
 @mixin border-radius( $radius: null ) {
     @if $kendo-enable-rounded {

package/scss/mixins/_box-shadow.scss

@@ -1,3 +1,5 @@
+@use "../_variables.scss" as *;
+
 @mixin box-shadow( $shadow... ) {
     @if $kendo-enable-shadows and k-list-nth($shadow, 1) {
         box-shadow: $shadow;

package/scss/mixins/_decoration.scss

@@ -1,3 +1,5 @@
+@use "./_gradient.scss" as *;
+
 @mixin fill( $color: null, $bg: null, $border: null, $gradient: null ) {
     @if $border {
         border-color: $border;
@@ -13,16 +15,7 @@
     }
 }
 
-@mixin linear-gradient( $gradient: null ) {
-    @if $gradient and $kendo-enable-gradients {
-        @if $gradient == none {
-            background-image: none;
-        } @else {
-            background-image: linear-gradient( $gradient );
-        }
-    }
-}
-
-@mixin repeating-striped-gradient( $color: rgba(255,255,255,.15), $background: #FFF, $angle: 45deg, $largeStep: 2px, $smallStep: 1px) {
-    background-image: repeating-linear-gradient($angle, $background, $background $smallStep, $color $smallStep, $color $largeStep);
-}
+// TODO: Remove as we have the same mixin in _gradient.scss
+// @mixin repeating-striped-gradient( $color: rgba(255,255,255,.15), $background: #FFF, $angle: 45deg, $largeStep: 2px, $smallStep: 1px) {
+//     background-image: repeating-linear-gradient($angle, $background, $background $smallStep, $color $smallStep, $color $largeStep);
+// }

package/scss/mixins/_focus-indicator.scss

@@ -1,3 +1,6 @@
+@use "../_variables.scss" as *;
+@use "./_box-shadow.scss" as *;
+
 @mixin focus-indicator( $indicator, $inset: false, $themeable: false, $type: "box-shadow" ) {
     @if $kendo-enable-focus-contrast and k-list-nth($indicator, 1) {
         @include box-shadow( if( $inset, inset, null ) 0 0 0 2px if( $themeable, currentColor, rgb( 0, 0, 0 ) ) );

package/scss/mixins/_gradient.scss

@@ -1,3 +1,5 @@
+@use "../_variables.scss" as *;
+
 @mixin linear-gradient( $gradient: null ) {
     @if $gradient and $kendo-enable-gradients {
         @if $gradient == none {

package/scss/mixins/_import-once.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+
 /// A list of exported modules.
 /// @access private
 $_kendo-imported-modules: () !default;
@@ -6,9 +8,9 @@ $_kendo-imported-modules: () !default;
 /// @access public
 /// @param {String} $name - The name of the exported module.
 /// @require $_kendo-imported-modules
-@mixin exports( $name ) {
-    @if (k-list-index( $_kendo-imported-modules, $name ) == null) { // stylelint-disable-line
-        $_kendo-imported-modules: k-list-append( $_kendo-imported-modules, $name ) !global;
+@mixin import-once( $name ) {
+    @if (list.index( $_kendo-imported-modules, $name ) == null) { // stylelint-disable-line
+        $_kendo-imported-modules: list.append( $_kendo-imported-modules, $name ) !global;
         @content;
     }
 }

package/scss/mixins/index.import.scss

@@ -1,11 +1,11 @@
-@import "./_border-radius.scss";
-@import "./_box-shadow.scss";
-@import "./_disabled.scss";
-@import "./_decoration.scss";
-@import "./_focus-indicator.scss";
-@import "./_gradient.scss";
-@import "./_hide-scrollbar.scss";
-@import "./_import-once.scss";
+@forward "./_border-radius.scss";
+@forward "./_box-shadow.scss";
+@forward "./_disabled.scss";
+@forward "./_decoration.scss";
+@forward "./_focus-indicator.scss";
+@forward "./_gradient.scss";
+@forward "./_hide-scrollbar.scss";
+@forward "./_import-once.scss";
 
 @mixin background-image( $background-image: null ) {
     @if $background-image {

package/scss/spacing/index.import.scss

@@ -1,4 +1,5 @@
-@import "../functions/index.import.scss";
+@use "sass:map";
+@use "../functions/_string.import.scss" as *;
 
 $_default-spacing: (
     0: 0px,
@@ -47,11 +48,11 @@ $_default-spacing: (
 /// @group spacing
 $kendo-spacing: $_default-spacing !default;
 
-$kendo-spacing: k-map-merge($_default-spacing, $kendo-spacing);
+$kendo-spacing: map.merge($_default-spacing, $kendo-spacing);
 
 
 @function k-spacing($step) {
-    $spacing: k-map-get($kendo-spacing, $step);
+    $spacing: map.get($kendo-spacing, $step);
     $_step: k-escape-class-name( $step );
     @return var(--kendo-spacing-#{$_step}, #{$spacing});
 }
@@ -66,7 +67,7 @@ $kendo-spacing: k-map-merge($_default-spacing, $kendo-spacing);
     }
 }
 
-$kendo-sizing: k-map-merge( $kendo-spacing, (
+$kendo-sizing: map.merge( $kendo-spacing, (
     "auto": auto,
     "1/2": 50%,
     "1/3": 33.333333%,

package/scss/styles/_base.scss

@@ -1,3 +1,7 @@
+@use "../mixins/_disabled.scss" as *;
+@use "../spacing/index.import.scss" as *;
+@use "../_variables.scss" as *;
+
 @mixin kendo-core--styles--base() {
 
     // Disabled state
@@ -5,11 +9,11 @@
     .k-widget[disabled],
     .k-disabled {
         @include disabled(
-            $color: var( --kendo-disabled-text, #{$kendo-disabled-text}),
-            $bg: var( --kendo-disabled-bg, #{$kendo-disabled-bg}),
-            $border: var( --kendo-disabled-border, #{$kendo-disabled-border}),
-            $opacity: var( --kendo-disabled-opacity, #{$kendo-disabled-opacity}),
-            $filter: var( --kendo-disabled-filter, #{$kendo-disabled-filter})
+            $color: var( --kendo-disabled-text, unset),
+            $bg: var( --kendo-disabled-bg, unset),
+            $border: var( --kendo-disabled-border, unset),
+            $opacity: var( --kendo-disabled-opacity, unset),
+            $filter: var( --kendo-disabled-filter, unset)
         );
 
         .k-link {
@@ -34,7 +38,7 @@
         height: 0;
         border-width: 1px 0 0;
         border-style: solid;
-        border-color: var( --kendo-component-border, #{$kendo-component-border} );
+        border-color: var( --kendo-hr-border, unset );
         display: block;
         float: none;
         clear: both;

package/scss/styles/_selection.scss

@@ -16,20 +16,20 @@
     }
 
     .k-marquee-color {
-        color: k-get-theme-color-var( neutral-160, #{$kendo-selected-text} );
-        background-color: k-get-theme-color-var( primary-60, #{$kendo-selected-bg} );
-        border-color: k-get-theme-color-var( primary-100, #{$kendo-selected-border} );
+        color: var( --kendo-marquee-text, unset );
+        background-color: var( --kendo-marquee-bg, unset );
+        border-color: var( --kendo-marquee-border, unset );
         opacity: .6;
     }
     .k-marquee-text {
-        color: k-get-theme-color-var( neutral-160, #{$kendo-selected-text} );
+        color: var( --kendo-marquee-text, unset );
     }
 
     // Text selection
     .k-text-selection {
         ::selection {
-            background-color:  if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ));
-            color: if($kendo-enable-color-system, k-color( on-primary ), $kendo-selected-text);
+            background-color: var( --kendo-text-selection-bg, unset );
+            color: var( --kendo-marquee-text, unset );
         }
     }
 

package/scss/styles/index.import.scss

@@ -1,25 +1,37 @@
-@import "./_accessibility.scss";
-@import "./_animations.scss";
-@import "./_asp-fallback.scss";
-@import "./_layout.scss";
-@import "./_normalize.scss";
-@import "./_base.scss";
-@import "./_selection.scss";
-@import "./_scrollbar.scss";
-@import "./_resizing.scss";
-@import "./_colors.scss";
-@import "./_utils-components.scss";
+@forward "./_accessibility.scss";
+@forward "./_animations.scss";
+@forward "./_asp-fallback.scss";
+@forward "./_layout.scss";
+@forward "./_normalize.scss";
+@forward "./_base.scss";
+@forward "./_selection.scss";
+@forward "./_scrollbar.scss";
+@forward "./_resizing.scss";
+@forward "./_utils-components.scss";
+
+@use "./_accessibility.scss" as *;
+@use "./_animations.scss" as *;
+@use "./_asp-fallback.scss" as *;
+@use "./_layout.scss" as *;
+@use "./_normalize.scss" as *;
+@use "./_base.scss" as *;
+@use "./_selection.scss" as *;
+@use "./_scrollbar.scss" as *;
+@use "./_resizing.scss" as *;
+@use "./_utils-components.scss" as *;
+@use "../mixins/index.import.scss" as *;
 
 @mixin kendo-core--styles() {
-    @include kendo-core--styles--colors();
-    @include kendo-core--styles--accessibility();
-    @include kendo-core--styles--animations();
-    @include kendo-core--styles--asp-fallback();
-    @include kendo-core--styles--layout();
-    @include kendo-core--styles--normalize();
-    @include kendo-core--styles--base();
-    @include kendo-core--styles--selection();
-    @include kendo-core--styles--scrollbar();
-    @include kendo-core--styles--resizing();
-    @include kendo-core--styles--utils-components();
+    @include import-once("core--styles") {
+        @include kendo-core--styles--accessibility();
+        @include kendo-core--styles--animations();
+        @include kendo-core--styles--asp-fallback();
+        @include kendo-core--styles--layout();
+        @include kendo-core--styles--normalize();
+        @include kendo-core--styles--base();
+        @include kendo-core--styles--selection();
+        @include kendo-core--styles--scrollbar();
+        @include kendo-core--styles--resizing();
+        @include kendo-core--styles--utils-components();
+    }
 }