@progress/kendo-theme-core 5.12.0 → 5.12.1-dev.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-core",
   "description": "A collection of functions and mixins used for building themes for Kendo UI",
-  "version": "5.12.0",
+  "version": "5.12.1-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -28,16 +28,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "sass-build",
-    "sass": "sass-build",
-    "nuget-pack": "jq '.version' package.json | xargs nuget pack package.nuspec -Version",
-    "nuget-push": "nuget push *.nupkg -ApiKey $NUGET_API_KEY -Source $NUGET_FEED -SkipDuplicate",
-    "prepublishOnly": "node ../../scripts/themes-prepublish.js",
-    "postpublish": "echo 'no postpublish for core theme'"
-  },
-  "devDependencies": {
-    "sass-build": "^1.0.0"
-  },
-  "gitHead": "9eaba5fe84f407f8f7240d2391cf6f5807f8eef4"
+  "scripts": {},
+  "gitHead": "6b89eb7de787b8a794d7ead79e0c4218abf59b18"
 }

package/scss/_variables.scss

@@ -0,0 +1,3 @@
+// Equilateral triangle variables
+$equilateral-index: 1.7320508076 !default;
+$equilateral-height: .8660254038 !default;

package/scss/color-system/_variables.scss

@@ -1,18 +1,12 @@
 // Color constants
-$white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
-$black: #000000; // stylelint-disable-line scss/dollar-variable-default
+$kendo-color-white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
+$kendo-color-black: #000000; // stylelint-disable-line scss/dollar-variable-default
 
-$rgba-transparent: rgba( 0, 0, 0, 0 ); // stylelint-disable-line scss/dollar-variable-default
+$kendo-color-rgba-transparent: rgba( 0, 0, 0, 0 ); // stylelint-disable-line scss/dollar-variable-default
 
-$gradient-transparent-to-black: rgba( black, 0 ), black; // stylelint-disable-line scss/dollar-variable-default
-$gradient-transparent-to-white: rgba( white, 0 ), white; // stylelint-disable-line scss/dollar-variable-default
-$gradient-black-to-transparent: black, rgba( black, 0 ); // stylelint-disable-line scss/dollar-variable-default
-$gradient-white-to-transparent: white, rgba( white, 0 ); // stylelint-disable-line scss/dollar-variable-default
+$kendo-gradient-transparent-to-black: rgba( black, 0 ), black; // stylelint-disable-line scss/dollar-variable-default
+$kendo-gradient-transparent-to-white: rgba( white, 0 ), white; // stylelint-disable-line scss/dollar-variable-default
+$kendo-gradient-black-to-transparent: black, rgba( black, 0 ); // stylelint-disable-line scss/dollar-variable-default
+$kendo-gradient-white-to-transparent: white, rgba( white, 0 ); // stylelint-disable-line scss/dollar-variable-default
 
-$gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
-
-
-/// Set a specific jump point for requesting color jumps
-/// @group color-system
-/// @access private
-$kendo-color-level-step: 8% !default;
+$kendo-gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default

package/scss/functions/_color-contrast.import.scss

@@ -331,3 +331,27 @@ $wcag-light: white !default;
 
     @return $max-ratio-color;
 }
+
+
+// Legacy functions
+@function k-yiq-luma-information($color) {
+    $r: k-color-red($color);
+    $g: k-color-green($color);
+    $b: k-color-blue($color);
+
+    $yiq: k-math-div( (($r * 299) + ($g * 587) + ($b * 114)), 1000 );
+
+    @return $yiq;
+}
+@function k-contrast-yiq($color, $dark: $yiq-dark, $light: $yiq-light) {
+    $yiq: k-yiq-luma-information($color);
+    $out: if($yiq >= $yiq-threshold, $dark, $light);
+    // @debug yiq;
+    @return $out;
+}
+@function k-contrast-legacy($color, $dark: $wcag-dark, $light: $wcag-light) {
+    $luma: k-color-luminance($color);
+    $out: if($luma < .5, $light, $dark);
+    // @debug $luma;
+    @return $out;
+}

package/scss/functions/_color-manipulation.import.scss

@@ -28,18 +28,18 @@ $kendo-color-level-step: 8% !default;
 }
 
 @function k-try-shade( $color, $level: 1 ) {
-    $dark-theme: if( variable-exists( dark-theme ), $dark-theme, false );
+    $_dark-theme: if( k-meta-variable-exists( dark-theme ), $dark-theme, false );
 
-    @if $dark-theme {
+    @if $_dark-theme {
         @return k-color-tint( $color, $level );
     }
 
     @return k-color-shade( $color, $level );
 }
 @function k-try-tint( $color, $level: 1 ) {
-    $dark-theme: if( variable-exists( dark-theme ), $dark-theme, false );
+    $_dark-theme: if( k-meta-variable-exists( dark-theme ), $dark-theme, false );
 
-    @if $dark-theme {
+    @if $_dark-theme {
         @return k-color-shade( $color, $level );
     }
 
@@ -48,18 +48,18 @@ $kendo-color-level-step: 8% !default;
 
 
 @function k-try-darken( $color, $amount ) {
-    $dark-theme: if( variable-exists( dark-theme ), $dark-theme, false );
+    $_dark-theme: if( k-meta-variable-exists( dark-theme ), $dark-theme, false );
 
-    @if $dark-theme {
+    @if $_dark-theme {
         @return k-color-lighten( $color, $amount );
     }
     @return k-color-darken( $color, $amount );
 }
 
 @function k-try-lighten( $color, $amount ) {
-    $dark-theme: if( variable-exists( dark-theme ), $dark-theme, false );
+    $_dark-theme: if( k-meta-variable-exists( dark-theme ), $dark-theme, false );
 
-    @if $dark-theme {
+    @if $_dark-theme {
         @return k-color-darken( $color, $amount );
     }
     @return k-color-lighten( $color, $amount );

package/scss/functions/_color.import.scss

@@ -14,6 +14,18 @@
     @return blue( $color );
 }
 
+@function k-color-hue( $color ) {
+    @return hue( $color );
+}
+
+@function k-color-saturation( $color ) {
+    @return saturation( $color );
+}
+
+@function k-color-lightness( $color ) {
+    @return lightness( $color );
+}
+
 @function k-color-mix( $color1, $color2, $weight: 50% ) {
     @return mix( $color1, $color2, $weight );
 }
@@ -25,3 +37,27 @@
 @function k-color-lighten( $color, $amount) {
     @return lighten( $color, $amount );
 }
+
+@function k-color-adjust-hue( $color, $degrees ) {
+    @return adjust-hue( $color, $degrees );
+}
+
+@function k-color-saturate( $color, $amount ) {
+    @return saturate( $color, $amount );
+}
+
+@function k-color-desaturate( $color, $amount ) {
+    @return desaturate( $color, $amount );
+}
+
+@function k-color-grayscale( $color ) {
+    @return grayscale( $color );
+}
+
+@function k-color-complement( $color ) {
+    @return complement( $color );
+}
+
+@function k-color-invert( $color ) {
+    @return invert( $color );
+}

package/scss/functions/_escape-string.import.scss

@@ -0,0 +1,41 @@
+$_kendo-svg-escaped-characters: (
+    ("%", "%25"),
+    ("<", "%3c"),
+    (">", "%3e"),
+    ("#", "%23"),
+    ("(", "%28"),
+    (")", "%29")
+) !default;
+
+// See https://codepen.io/kevinweber/pen/dXWoRw
+@function k-escape-svg($string) {
+    @if k-string-index($string, "data:image/svg+xml") {
+        @each $char, $encoded in $_kendo-svg-escaped-characters {
+            // Do not escape the url brackets
+            @if k-string-index($string, "url(") == 1 {
+                $string: url("#{k-string-replace(k-string-slice($string, 6, -3), $char, $encoded)}");
+            } @else {
+                $string: k-string-replace($string, $char, $encoded);
+            }
+        }
+    }
+
+    @return $string;
+}
+
+
+
+$_kendo-escape-class-name: (
+    ".": "\\.",
+    "/": "\\/"
+);
+
+@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/_math.import.scss

@@ -63,6 +63,10 @@
 
 }
 
+@function k-math-percentage( $number ) {
+    @return percentage( $number );
+}
+
 @function k-math-random( $limit: null ) {
     @if ( $limit == null ) {
         @return random();

package/scss/functions/_meta.import.scss

@@ -1,9 +1,33 @@
 // Adapted from https://css-tricks.com/snippets/sass/advanced-type-checking/
 
+@function k-meta-call( $function, $args... ) {
+    @return call( $function, $args... );
+}
+
+@function k-meta-function-exists( $name ) {
+    @return function-exists( $name );
+}
+
+@function k-meta-get-function( $name, $args... ) {
+    @return get-function( $name, $args... );
+}
+
+@function k-meta-inspect( $value ) {
+    @return inspect( $value );
+}
+
+@function k-meta-keywords( $args ) {
+    @return keywords( $args );
+}
+
 @function k-meta-type-of( $value ) {
     @return type-of( $value );
 }
 
+@function k-meta-variable-exists( $name ) {
+    @return variable-exists( $name );
+}
+
 @function k-meta-is-number( $value ) {
     @return k-meta-type-of( $value ) == "number";
 }

package/scss/functions/_string.import.scss

@@ -16,6 +16,10 @@
 
 // See https://www.sassmeister.com/gist/1b4f2da5527830088e4d
 @function k-string-replace( $string, $search, $replace: "" ) {
+    @if k-meta-type-of( $string ) == number {
+        $string: $string + "";
+    }
+
     $index: k-string-index( $string, $search );
 
     @if $index {

package/scss/functions/index.import.scss

@@ -1,10 +1,13 @@
-@import "_color.import.scss";
-@import "_color-contrast.import.scss";
-@import "_color-manipulation.import.scss";
-@import "_custom-properties.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";
+@import "../_variables.scss";
+
+@import "./_color.import.scss";
+@import "./_color-contrast.import.scss";
+@import "./_color-manipulation.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";

package/scss/index.import.scss

@@ -1,5 +1,6 @@
-@import "./color-system/index.import.scss";
 @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 "./_variables.scss";

package/scss/mixins/_border-radius.scss

@@ -1,58 +1,58 @@
 // Border radius
 @mixin border-radius( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-radius: $radius;
     }
 }
 
 @mixin border-top-radius( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-top-left-radius: $radius;
         border-top-right-radius: $radius;
     }
 }
 
 @mixin border-right-radius( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-top-right-radius: $radius;
         border-bottom-right-radius: $radius;
     }
 }
 
 @mixin border-bottom-radius( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-bottom-right-radius: $radius;
         border-bottom-left-radius: $radius;
     }
 }
 
 @mixin border-left-radius( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-top-left-radius: $radius;
         border-bottom-left-radius: $radius;
     }
 }
 
 @mixin border-top-radius-only( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-radius: $radius $radius 0 0;
     }
 }
 
 @mixin border-right-radius-only( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-radius: 0 $radius $radius 0;
     }
 }
 
 @mixin border-bottom-radius-only( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-radius: 0 0 $radius $radius;
     }
 }
 
 @mixin border-left-radius-only( $radius: null ) {
-    @if $enable-rounded {
+    @if $kendo-enable-rounded {
         border-radius: $radius 0 0 $radius;
     }
 }

package/scss/mixins/_box-shadow.scss

@@ -1,5 +1,5 @@
 @mixin box-shadow( $shadow... ) {
-    @if $enable-shadows and nth($shadow, 1) {
+    @if $kendo-enable-shadows and k-list-nth($shadow, 1) {
         box-shadow: $shadow;
     }
 }

package/scss/mixins/_disabled.scss

@@ -1,18 +1,9 @@
-$disabled-styling: () !default;
-
 // Disabled
-@mixin disabled( $disabled-styling ) {
+@mixin disabled( $kendo-disabled-styling ) {
     outline: none;
     cursor: default;
-    opacity: k-map-get($disabled-styling, opacity);
-    filter: k-map-get($disabled-styling, filter);
+    opacity: k-map-get($kendo-disabled-styling, opacity);
+    filter: k-map-get($kendo-disabled-styling, filter);
     pointer-events: none;
     box-shadow: none;
 }
-
-@mixin disabled-legacy-ie( $disabled-styling ) {
-    outline: none;
-    cursor: default;
-    opacity: k-map-get($disabled-styling, opacity);
-    box-shadow: none;
-}

package/scss/mixins/_gradient.scss

@@ -1,5 +1,5 @@
 @mixin linear-gradient( $gradient: null ) {
-    @if $gradient and $enable-gradients {
+    @if $gradient and $kendo-enable-gradients {
         @if $gradient == none {
             background-image: none;
         } @else {

package/scss/module-system/index.import.scss

@@ -39,7 +39,7 @@ $_imported: ();
 
 @mixin verify-dependencies() {
     @each $component in $kendo-components {
-        @if (k-map-has-key( $_kendo-dependencies, $component) == false) {
+        @if (k-map-has-key( $_kendo-dependencies, $component ) == false) {
             // sass-lint:disable-block no-warn
             @error "Module '#{$component}' is not defined.";
         }

package/scss/styles/_accessibility.scss

@@ -1,5 +1,5 @@
-/// @name k-sr-only
-/// @description This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
+/// This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
+/// @name .k-sr-only
 /// @group accessibility
 .k-sr-only {
     position: absolute;

package/scss/styles/_layout.scss

@@ -7,10 +7,32 @@
     display: flex;
     flex-flow: column nowrap;
 }
+.k-flex {
+    flex: 1 1 auto;
+}
 .k-spacer {
     flex: none;
     flex-grow: 1;
 }
+.k-spacer-sized {
+    flex-grow: 0;
+}
+
+
+// Stack layout
+.k-stack-layout {}
+
+
+// Flex layout
+.k-flex-layout {
+    display: flex;
+}
+
+
+// Grid layout
+.k-grid-layout {
+    display: grid;
+}
 
 
 // Separator
@@ -54,3 +76,8 @@ hr.k-separator {
 .k-rtl {
     direction: rtl;
 }
+
+
+// Legacy aliases
+.k-hbox { @extend .k-hstack; }
+.k-vbox { @extend .k-vstack; }