@progress/kendo-theme-core 12.2.0 → 12.2.1-dev.1

package/scss/functions/_meta.scss

@@ -0,0 +1,163 @@
+@use "sass:meta";
+@use "sass:math";
+@use "sass:string";
+
+// Adapted from https://css-tricks.com/snippets/sass/advanced-type-checking/
+
+/// Checks whether `$value` is a <number> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a number.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/number
+///
+/// @example scss - Usage
+///   @debug k-meta-is-number( 1 ); // => true
+///   @debug k-meta-is-number( "foo" ); // => false
+@function k-meta-is-number($value) {
+    @return meta.type-of($value) == "number";
+}
+
+/// Checks whether `$value` is a <integer> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a integer.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/integer
+///
+/// @example scss - Usage
+///   @debug k-meta-is-integer( 1 ); // => true
+///   @debug k-meta-is-integer( 1.5 ); // => false
+@function k-meta-is-integer($value) {
+    @return k-meta-is-number($value) and k-math-round($value) == $value;
+}
+
+/// Checks whether `$value` is a <time> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a time.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/time
+///
+/// @example scss - Usage
+///   @debug k-meta-is-time( 1s ); // => true
+///   @debug k-meta-is-time( 1 ); // => false
+@function k-meta-is-time($value) {
+    @return k-meta-is-number($value) and string.index("ms" "s", math.unit($value)) != null;
+}
+
+/// Checks whether `$value` is a valid duration period.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a duration.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/time
+///
+/// @example scss - Usage
+///   @debug k-meta-is-duration( 1s ); // => true
+///   @debug k-meta-is-duration( 1 ); // => false
+@function k-meta-is-duration($value) {
+    @return k-meta-is-time($value);
+}
+
+/// Checks whether `$value` is a <angle> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a angle.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/angle
+///
+/// @example scss - Usage
+///   @debug k-meta-is-angle( 1deg ); // => true
+///   @debug k-meta-is-angle( 1 ); // => false
+@function k-meta-is-angle($value) {
+    @return k-meta-is-number($value) and string.index("deg" "rad" "grad" "turn", math.unit($value)) != null;
+}
+
+/// Checks whether `$value` is a <frequency> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a frequency.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/frequency
+///
+/// @example scss - Usage
+///   @debug k-meta-is-frequency( 1Hz ); // => true
+///   @debug k-meta-is-frequency( 1 ); // => false
+@function k-meta-is-frequency($value) {
+    @return k-meta-is-number($value) and string.index("Hz" "kHz", math.unit($value)) != null;
+}
+
+/// Checks whether `$value` is a relative <length> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a relative length.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_font
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport
+///
+/// @example scss - Usage
+///   @debug k-meta-is-relative-length( 1em ); // => true
+///   @debug k-meta-is-relative-length( 1ch ); // => true
+///   @debug k-meta-is-relative-length( 1 ); // => false
+@function k-meta-is-relative-length($value) {
+    @return k-meta-is-number($value) and string.index("em" "ex" "ch" "rem" "vw" "vh" "vmin" "vmax", math.unit($value)) != null;
+}
+
+/// Checks whether `$value` is an absolute <length> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is an absolute length.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length#absolute_length_units
+///
+/// @example scss - Usage
+///   @debug k-meta-is-absolute-length( 1cm ); // => true
+///   @debug k-meta-is-absolute-length( 1 ); // => false
+@function k-meta-is-absolute-length($value) {
+    @return k-meta-is-number($value) and string.index("cm" "mm" "in" "px" "pt" "pc", math.unit($value)) != null;
+}
+
+/// Checks whether `$value` is a <percentage> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a percentage.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/percentage
+///
+/// @example scss - Usage
+///   @debug k-meta-is-percentage( 1% ); // => true
+///   @debug k-meta-is-percentage( 1 ); // => false
+@function k-meta-is-percentage($value) {
+    @return k-meta-is-number($value) and math.unit($value) == "%";
+}
+
+/// Checks whether `$value` is a <length> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a length.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/length
+///
+/// @example scss - Usage
+///   @debug k-meta-is-length( 1em ); // => true
+///   @debug k-meta-is-length( 1cm ); // => true
+///   @debug k-meta-is-length( 1 ); // => false
+@function k-meta-is-length($value) {
+    @return k-meta-is-relative-length($value) or k-meta-is-absolute-length($value);
+}
+
+/// Checks whether `$value` is a <resolution> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a resolution.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/resolution
+///
+/// @example scss - Usage
+///   @debug k-meta-is-resolution( 1dpi ); // => true
+///   @debug k-meta-is-resolution( 1 ); // => false
+@function k-meta-is-resolution($value) {
+    @return k-meta-is-number($value) and string.index("dpi" "dpcm" "dppx", math.unit($value)) != null;
+}
+
+/// Checks whether `$value` is a <position> CSS data type.
+/// @param {Any} $value - The value to check.
+/// @return {Boolean} - Whether `$value` is a position.
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/position
+///
+/// @example scss - Usage
+///   @debug k-meta-is-position( center ); // => true
+@function k-meta-is-position($value) {
+    @return k-meta-is-length($value) or k-meta-is-percentage($value) or string.index("top" "right" "bottom" "left" "center", $value) != null;
+}

package/scss/functions/_string.scss

@@ -0,0 +1,82 @@
+@use "sass:meta";
+@use "sass:string";
+
+$_kendo-svg-escaped-characters: (
+    ("%", "%25"),
+    ("<", "%3c"),
+    (">", "%3e"),
+    ("#", "%23"),
+    ("(", "%28"),
+    (")", "%29")
+) !default;
+
+$_kendo-escape-class-name: (
+    ".": "\\.",
+    "/": "\\/"
+);
+
+
+/// Returns a copy of `$string` with all occurrences of `$search`
+/// replaced by `$replace`.
+/// @param {String} $string - The string to process.
+/// @param {String} $search - The substring to look for.
+/// @param {String} $replace - The replacement string.
+/// @return {String} - The resulting string.
+///
+/// @link https://www.sassmeister.com/gist/1b4f2da5527830088e4d
+///
+/// @example scss - Usage
+///   @debug k-string-replace( "foo bar", "bar", "baz" ); // => "foo baz"
+@function k-string-replace( $string, $search, $replace: "" ) {
+    @if meta.type-of( $string ) == number {
+        $string: $string + "";
+    }
+
+    $index: string.index( $string, $search );
+
+    @if $index {
+        @return string.slice( $string, 1, $index - 1 ) + $replace + k-string-replace( string.slice( $string, $index + string.length( $search ) ), $search, $replace );
+    }
+
+    @return $string;
+}
+
+// See https://www.sassmeister.com/gist/1b4f2da5527830088e4d
+@function str-replace($string, $search, $replace: "") {
+    $index: string.index($string, $search);
+
+    @if $index {
+        @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+    }
+
+    @return $string;
+}
+
+// See https://codepen.io/kevinweber/pen/dXWoRw
+@function k-escape-svg($string) {
+    @if string.index($string, "data:image/svg+xml") {
+        @each $char, $encoded in $_kendo-svg-escaped-characters {
+            // Do not escape the url brackets
+            @if string.index($string, "url(") == 1 {
+                $string: url("#{k-string-replace(string.slice($string, 6, -3), $char, $encoded)}");
+            } @else {
+                $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, string.unquote( $char ), string.unquote( $rep ) );
+    }
+
+    @return $_text;
+}

package/scss/functions/index.scss

@@ -0,0 +1,7 @@
+@forward "./_color.scss";
+@forward "./_lang.scss";
+@forward "./_list.scss";
+@forward "./_math.scss";
+@forward "./_map.scss";
+@forward "./_meta.scss";
+@forward "./_string.scss";

package/scss/index.scss

@@ -1,29 +1,29 @@
 @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";
-@forward "./motion/index.import.scss";
-@forward "./z-index/index.import.scss";
+@forward "./color-system/index.scss";
+@forward "./mixins/index.scss";
+@forward "./spacing/index.scss";
+@forward "./styles/index.scss";
+@forward "./elevation/index.scss";
+@forward "./typography/index.scss";
+@forward "./border-radii/index.scss";
+@forward "./motion/index.scss";
+@forward "./z-index/index.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 *;
+@use "./color-system/index.scss" as *;
+@use "./mixins/index.scss" as *;
+@use "./styles/index.scss" as *;
+@use "./elevation/index.scss" as *;
+@use "./typography/index.scss" as *;
+@use "./spacing/index.scss" as *;
+@use "./border-radii/index.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-border-radius--styles();
         @include kendo-elevation--styles();
         @include kendo-core--typography--styles();
-        @include kendo-border-radius--styles();
+        @include kendo-core--styles();
     }
 }

package/scss/mixins/_box-shadow.scss

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

package/scss/mixins/_focus-indicator.scss

@@ -1,8 +1,9 @@
+@use "sass:list";
 @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) {
+    @if $kendo-enable-focus-contrast and list.nth($indicator, 1) {
         @include box-shadow( if( $inset, inset, null ) 0 0 0 2px if( $themeable, currentColor, rgb( 0, 0, 0 ) ) );
     } @else {
         @include box-shadow( $indicator... );

package/scss/spacing/{index.import.scss → index.scss}

@@ -1,5 +1,5 @@
 @use "sass:map";
-@use "../functions/_string.import.scss" as *;
+@use "../functions/_string.scss" as *;
 
 $default-spacing: (
     0: 0px,

package/scss/styles/_base.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "../mixins/_disabled.scss" as *;
-@use "../spacing/index.import.scss" as *;
+@use "../spacing/index.scss" as *;
 @use "../_variables.scss" as *;
 
 @mixin kendo-core--styles--base() {

package/scss/styles/{index.import.scss → index.scss}

@@ -17,7 +17,7 @@
 @use "./_scrollbar.scss" as *;
 @use "./_resizing.scss" as *;
 @use "./_utils-components.scss" as *;
-@use "../mixins/index.import.scss" as *;
+@use "../mixins/index.scss" as *;
 
 @mixin kendo-core--styles() {
     @include import-once("core--styles") {

package/scss/color-system/_mixins.import.scss

@@ -1,13 +0,0 @@
-@use "sass:meta";
-
-@mixin k-css-vars($map) {
-    @each $group, $values in $map {
-        @if meta.type-of($values) != 'map' {
-            --kendo-text-#{$group}: #{$values};
-        } @else {
-            @each $key, $value in $values {
-                --kendo-#{meta.inspect($group)}-#{$key}: #{$value};
-            }
-        }
-    }
-}

package/scss/components/action-buttons/_index.scss

@@ -1,19 +0,0 @@
-// Dependencies
-@use "../core/_index.scss" as *;
-@use "../utils/_index.scss" as *;
-@use "../button/_index.scss" as *;
-
-// Component
-@forward "./_variables.scss";
-@use "./_layout.scss" as *;
-@use "./_theme.scss" as *;
-// Expose
-@mixin kendo-action-buttons--styles() {
-    @include import-once( "action-buttons" ) {
-        @include core-styles();
-        @include kendo-button--styles();
-        @include kendo-action-buttons--layout();
-        @include kendo-action-buttons--theme();
-        @include kendo-utils--flex-grid--justify-content();
-    }
-}

package/scss/components/action-sheet/_index.scss

@@ -1,24 +0,0 @@
-// Dependencies
-@use "../core/_index.scss" as *;
-@use "../icons/_index.scss" as *;
-@use "../utils/_index.scss" as *;
-@use "../listgroup/_index.scss" as *;
-@use "../popup/_index.scss" as *;
-
-// Component
-@forward "./_variables.scss";
-@use "./_layout.scss" as *;
-@use "./_theme.scss" as *;
-
-// Expose
-@mixin kendo-action-sheet--styles() {
-    @include import-once( "action-sheet" ) {
-        @include core-styles();
-        @include kendo-icon--styles();
-        @include kendo-listgroup--styles();
-        @include kendo-popup--styles();
-        @include kendo-action-sheet--layout();
-        @include kendo-action-sheet--theme();
-        @include kendo-utils--typography--text-align();
-    }
-}

package/scss/components/adaptive/_index.scss

@@ -1,26 +0,0 @@
-// Dependencies (TODO: extract variables)
-@use "../core/_index.scss" as *;
-@use "../listgroup/_index.scss" as *;
-@use "../checkbox/_index.scss" as *;
-@use "../radio/_index.scss" as *;
-@use "../switch/_index.scss" as *;
-@use "../toolbar/_index.scss" as *;
-
-// Component
-@forward "./_variables.scss";
-@use "./_layout.scss" as *;
-@use "./_theme.scss" as *;
-
-// Expose
-@mixin kendo-adaptive--styles() {
-    @include import-once( "adaptive" ) {
-        @include core-styles();
-        @include kendo-listgroup--styles();
-        @include kendo-checkbox--styles();
-        @include kendo-radio--styles();
-        @include kendo-switch--styles();
-        @include kendo-toolbar--styles();
-        @include kendo-adaptive--layout();
-        @include kendo-adaptive--theme();
-    }
-}

package/scss/components/appbar/_index.scss

@@ -1,16 +0,0 @@
-// Dependencies
-@use "../core/_index.scss" as *;
-
-// Component
-@forward "./_variables.scss";
-@use "./_layout.scss" as *;
-@use "./_theme.scss" as *;
-
-// Expose
-@mixin kendo-appbar--styles() {
-    @include import-once( "appbar" ) {
-        @include core-styles();
-        @include kendo-appbar--layout();
-        @include kendo-appbar--theme();
-    }
-}

package/scss/components/autocomplete/_index.scss

@@ -1,26 +0,0 @@
-// Dependencies
-@use "../core/_index.scss" as *;
-@use "../icons/_index.scss" as *;
-@use "../input/_index.scss" as *;
-@use "../floating-label/_index.scss" as *;
-@use "../popup/_index.scss" as *;
-@use "../list/_index.scss" as *;
-
-// Component
-@forward "./_variables.scss";
-@use "./_layout.scss" as *;
-@use "./_theme.scss" as *;
-
-// Expose
-@mixin kendo-autocomplete--styles() {
-    @include import-once( "autocomplete" ) {
-        @include core-styles();
-        @include kendo-input--styles();
-        @include kendo-floating-label--styles();
-        @include kendo-popup--styles();
-        @include kendo-list--styles();
-        @include kendo-icon--styles();
-        @include kendo-autocomplete--layout();
-        @include kendo-autocomplete--theme();
-    }
-}

package/scss/components/avatar/_index.scss

@@ -1,16 +0,0 @@
-// Dependencies
-@use "../core/_index.scss" as *;
-
-// Component
-@forward "./_variables.scss";
-@use "./_layout.scss" as *;
-@use "./_theme.scss" as *;
-
-// Expose
-@mixin kendo-avatar--styles() {
-    @include import-once( "avatar" ) {
-        @include core-styles();
-        @include kendo-avatar--layout();
-        @include kendo-avatar--theme();
-    }
-}

package/scss/components/badge/_index.scss

@@ -1,18 +0,0 @@
-// Dependencies
-@use "../core/_index.scss" as *;
-@use "../icons/_index.scss" as *;
-
-// Component
-@forward "./_variables.scss";
-@use "./_layout.scss" as *;
-@use "./_theme.scss" as *;
-
-// Expose
-@mixin kendo-badge--styles() {
-    @include import-once( "badge" ) {
-        @include core-styles();
-        @include kendo-icon--styles();
-        @include kendo-badge--layout();
-        @include kendo-badge--theme();
-    }
-}

package/scss/components/bottom-navigation/_index.scss

@@ -1,20 +0,0 @@
-// Dependencies
-@use "../core/_index.scss" as *;
-@use "../icons/_index.scss" as *;
-@use "../utils/_index.scss" as *;
-
-// Component
-@forward "./_variables.scss";
-@use "./_layout.scss" as *;
-@use "./_theme.scss" as *;
-
-// Expose
-@mixin kendo-bottom-navigation--styles() {
-    @include import-once( "bottom-navigation" ) {
-        @include core-styles();
-        @include kendo-icon--styles();
-        @include kendo-bottom-navigation--layout();
-        @include kendo-bottom-navigation--theme();
-        @include kendo-utils--layout--position();
-    }
-}

package/scss/components/breadcrumb/_index.scss

@@ -1,23 +0,0 @@
-// Dependencies
-@use "../core/_index.scss" as *;
-@use "../icons/_index.scss" as *;
-@use "../utils/_index.scss" as *;
-@use "../input/_index.scss" as *;
-
-// Component
-@forward "./_variables.scss";
-@use "./_layout.scss" as *;
-@use "./_theme.scss" as *;
-
-// Expose
-@mixin kendo-breadcrumb--styles() {
-    @include import-once( "breadcrumb" ) {
-        @include core-styles();
-        @include kendo-input--styles();
-        @include kendo-icon--styles();
-        @include kendo-breadcrumb--layout();
-        @include kendo-breadcrumb--theme();
-        @include kendo-utils--flex-grid--flex();
-        @include kendo-utils--flex-grid--flex-wrap();
-    }
-}

package/scss/components/bubble/_index.scss

@@ -1,16 +0,0 @@
-// Dependencies
-@use "../core/_index.scss" as *;
-
-// Component
-@forward "./_variables.scss";
-@use "./_layout.scss" as *;
-@use "./_theme.scss" as *;
-
-// Expose
-@mixin kendo-bubble--styles() {
-    @include import-once( "bubble" ) {
-        @include core-styles();
-        @include kendo-bubble--layout();
-        @include kendo-bubble--theme();
-    }
-}

package/scss/components/button/_index.scss

@@ -1,20 +0,0 @@
-// Dependencies
-@use "../core/_index.scss" as *;
-@use "../icons/_index.scss" as *;
-@use "../badge/_index.scss" as *;
-
-// Component
-@forward "./_variables.scss";
-@use "./_layout.scss" as *;
-@use "./_theme.scss" as *;
-
-// Expose
-@mixin kendo-button--styles() {
-    @include import-once( "button" ) {
-        @include core-styles();
-        @include kendo-badge--styles();
-        @include kendo-icon--styles();
-        @include kendo-button--layout();
-        @include kendo-button--theme();
-    }
-}

package/scss/components/calendar/_index.scss

@@ -1,26 +0,0 @@
-// Dependencies
-@use "../core/_index.scss" as *;
-@use "../icons/_index.scss" as *;
-@use "../utils/_index.scss" as *;
-@use "../button/_index.scss" as *;
-@use "../list/_index.scss" as *;
-
-// Component
-@forward "./_variables.scss";
-@use "./_layout.scss" as *;
-@use "./_theme.scss" as *;
-
-// Expose
-@mixin kendo-calendar--styles() {
-    @include import-once( "calendar" ) {
-        @include core-styles();
-        @include kendo-button--styles();
-        @include kendo-icon--styles();
-        @include kendo-list--styles();
-        @include kendo-calendar--layout();
-        @include kendo-calendar--theme();
-        @include kendo-utils--flex-grid--align-items();
-        @include kendo-utils--flex-grid--justify-content();
-        @include kendo-utils--interactivity--pointer-events();
-    }
-}

package/scss/components/captcha/_index.scss

@@ -1,29 +0,0 @@
-// Dependencies
-@use "../core/_index.scss" as *;
-@use "../icons/_index.scss" as *;
-@use "../utils/_index.scss" as *;
-@use "../input/_index.scss" as *;
-@use "../button/_index.scss" as *;
-@use "../textbox/_index.scss" as *;
-@use "../slider/_index.scss" as *;
-
-// Component
-@forward "./_variables.scss";
-@use "./_layout.scss" as *;
-@use "./_theme.scss" as *;
-
-// Expose
-@mixin kendo-captcha--styles() {
-    @include import-once( "captcha" ) {
-        @include core-styles();
-        @include kendo-icon--styles();
-        @include kendo-input--styles();
-        @include kendo-button--styles();
-        @include kendo-textbox--styles();
-        @include kendo-slider--styles();
-        @include kendo-captcha--layout();
-        @include kendo-captcha--theme();
-        @include kendo-utils--typography--text-color();
-        @include kendo-utils--layout--position();
-    }
-}