chore: use functions and mixins only from theme-core

BREAKING CHANGE: Use functions and mixins only from theme-core

All, but two, functions are prefixed with `k-` to avoid conflicts with other libraries:

* `contrast-wcag` is renamed to `k-contrast-legacy`, and
* `yiq` is renamed to `k-yiq-luma-information`

as the new names describe them better.

Note: `k-contrast-legacy` is deprecated and will be removed.

packages/bootstrap/scss/_variables.scss

@@ -1,4 +1,4 @@
-@import "core/functions/_index.scss";
+@import "core/functions/index.import.scss";
 @import "_bootstrap-overrides.scss";
 @import "~bootstrap/scss/_functions.scss";
 @import "~bootstrap/scss/_variables.scss";

packages/bootstrap/scss/checkbox/_variables.scss

@@ -125,10 +125,10 @@ $kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
 /// Image of checked checkbox indicator.
 /// @group checkbox
-$kendo-checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") ) !default;
+$kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") ) !default;
 /// Image of checked checkbox indicator.
 /// @group checkbox
-$kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") ) !default;
+$kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") ) !default;
 
 
 // Checkbox label

packages/bootstrap/scss/color-preview/_variables.scss

@@ -10,5 +10,5 @@ $color-preview-no-color-bg: $white !default;
 $color-preview-no-color-text: $error !default;
 $color-preview-no-color-border: null !default;
 
-$color-preview-no-color-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;
+$color-preview-no-color-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;
 $color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default;

packages/bootstrap/scss/core/_index.scss

@@ -1,9 +1,19 @@
-@import "functions/_index.scss";
-@import "mixins/_index.scss";
-@import "../_variables.scss";
+$wcag-min-contrast-ratio: 4.5 !default;
+
+// Functions
+@import "functions/index.import.scss";
+
+// Color system
+@import "color-system/index.import.scss";
+
+// Mixins
+@import "mixins/index.import.scss";
 
-@import "_asp-fallback.scss";
-@import "_normalize.scss";
-@import "_extra.scss";
-@import "_layout.scss";
-@import "_color-system.scss";
+// Module system
+@import "module-system/index.import.scss";
+
+// Common styles
+@import "styles/index.import.scss";
+
+// Variables
+@import "../_variables.scss";

packages/bootstrap/scss/core/mixins/index.import.scss

@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/mixins/index.import.scss";

packages/bootstrap/scss/core/module-system/index.import.scss

@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/module-system/index.import.scss";

packages/bootstrap/scss/core/styles/index.import.scss

@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/styles/index.import.scss";

packages/bootstrap/scss/dialog/_theme.scss

@@ -19,7 +19,7 @@
     // Dialog theme colors
     @each $name, $color in $kendo-dialog-theme-colors {
         .k-dialog-#{$name} .k-dialog-titlebar {
-            color: contrast-wcag( $color );
+            color: k-contrast-legacy( $color );
             background-color: $color;
         }
     }

packages/bootstrap/scss/radio/_variables.scss

@@ -115,7 +115,7 @@ $kendo-radio-checked-glyph: "\e308" !default;
 
 /// Image of checked radio button indicator.
 /// @group radio
-$kendo-radio-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$kendo-radio-checked-text}'/></svg>") ) !default;
+$kendo-radio-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$kendo-radio-checked-text}'/></svg>") ) !default;
 /// Image of disabled and checked radio button indicator.
 /// @group radio
 $kendo-radio-disabled-checked-image: null !default;

packages/classic/scss/_variables.scss

@@ -1,4 +1,4 @@
-@import "core/functions/_index.scss";
+@import "core/functions/index.import.scss";
 
 
 // Options
@@ -121,7 +121,7 @@ $primary-darker: k-color-shade( $primary, 2 ) !default;
 /// Used to provide contrast between the background and foreground colors.
 /// @group color-system
 /// @type Color
-$primary-contrast: contrast-wcag( $primary ) !default;
+$primary-contrast: k-contrast-legacy( $primary ) !default;
 
 /// The secondary color of the theme.
 /// @group color-system
@@ -271,14 +271,14 @@ $hovered-gradient: $base-gradient !default;
 /// The background of selected items.
 $selected-bg: $primary !default;
 /// The text color of selected items.
-$selected-text: contrast-wcag( $selected-bg ) !default;
+$selected-text: k-contrast-legacy( $selected-bg ) !default;
 /// The border color of selected items.
 $selected-border: k-try-shade( $selected-bg, 2 ) !default;
 /// The gradient background of selected items.
 $selected-gradient: $base-gradient !default;
 
 $selected-hover-bg: k-try-shade( $selected-bg, 1 ) !default;
-$selected-hover-text: contrast-wcag( $selected-hover-bg ) !default;
+$selected-hover-text: k-contrast-legacy( $selected-hover-bg ) !default;
 $selected-hover-border: $selected-border !default;
 $selected-hover-gradient: $selected-gradient !default;
 

packages/classic/scss/adaptive/_variables.scss

@@ -7,7 +7,7 @@ $adaptive-content-bg: $app-bg !default;
 $adaptive-content-text: $app-text !default;
 
 $adaptive-menu-bg: $primary !default;
-$adaptive-menu-text: contrast-wcag( $adaptive-menu-bg ) !default;
+$adaptive-menu-text: k-contrast-legacy( $adaptive-menu-bg ) !default;
 
 $adaptive-menu-clear-text: $primary !default;
 

packages/classic/scss/button/_variables.scss

@@ -134,7 +134,7 @@ $kendo-button-active-shadow: null !default;
 $kendo-button-selected-bg: $primary !default;
 /// The text color of selected buttons.
 /// @group button
-$kendo-button-selected-text: contrast-wcag( $kendo-button-selected-bg ) !default;
+$kendo-button-selected-text: k-contrast-legacy( $kendo-button-selected-bg ) !default;
 /// The border color of selected buttons.
 /// @group button
 $kendo-button-selected-border: $kendo-button-selected-bg !default;

packages/classic/scss/chat/_variables.scss

@@ -57,7 +57,7 @@ $chat-bubble-hover-shadow: 0 1px 2px rgba( black, .16 ) !default;
 $chat-bubble-selected-shadow: 0 3px 10px rgba( black, .16 ) !default;
 
 $chat-alt-bubble-bg: $primary !default;
-$chat-alt-bubble-text: contrast-wcag( $chat-alt-bubble-bg ) !default;
+$chat-alt-bubble-text: k-contrast-legacy( $chat-alt-bubble-bg ) !default;
 $chat-alt-bubble-border: $chat-alt-bubble-bg !default;
 $chat-alt-bubble-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default;
 $chat-alt-bubble-hover-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default;

packages/classic/scss/checkbox/_variables.scss

@@ -48,7 +48,7 @@ $kendo-checkbox-hover-border: null !default;
 $kendo-checkbox-checked-bg: $primary !default;
 /// Color of checked checkbox.
 /// @group checkbox
-$kendo-checkbox-checked-text: contrast-wcag( $kendo-checkbox-checked-bg ) !default;
+$kendo-checkbox-checked-text: k-contrast-legacy( $kendo-checkbox-checked-bg ) !default;
 /// Border color of checked checkbox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
@@ -125,10 +125,10 @@ $kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
 /// Image of checked checkbox indicator.
 /// @group checkbox
-$kendo-checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+$kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
 /// Image image of checked checkbox indicator.
 /// @group checkbox
-$kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) !default;
+$kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) !default;
 
 
 // Checkbox label

packages/classic/scss/chip/_variables.scss

@@ -131,7 +131,7 @@ $kendo-chip-outline-shadow: 0 0 0 2px if($dark-theme, rgba( 255, 255, 255, .16 )
 $kendo-chip-outline-hover-bg: $kendo-chip-outline-text !default;
 /// The base text color of hovered outline chip.
 /// @group chip
-$kendo-chip-outline-hover-text: contrast-wcag( $kendo-chip-outline-hover-bg ) !default;
+$kendo-chip-outline-hover-text: k-contrast-legacy( $kendo-chip-outline-hover-bg ) !default;
 
 /// The base background color of selected outline chip.
 /// @group chip

packages/classic/scss/color-preview/_variables.scss

@@ -10,5 +10,5 @@ $color-preview-no-color-bg: $white !default;
 $color-preview-no-color-text: $error !default;
 $color-preview-no-color-border: null !default;
 
-$color-preview-no-color-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;
+$color-preview-no-color-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' version='1.1'><line x1='0' x2='20' y1='0' y2='20' stroke='#{$color-preview-no-color-text}' stroke-width='1'/></svg>") ) !default;
 $color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default;

packages/classic/scss/core/_index.scss

@@ -1,9 +1,19 @@
-@import "functions/_index.scss";
-@import "mixins/_index.scss";
-@import "../_variables.scss";
+$wcag-min-contrast-ratio: 4.5 !default;
+
+// Functions
+@import "functions/index.import.scss";
+
+// Color system
+@import "color-system/index.import.scss";
+
+// Mixins
+@import "mixins/index.import.scss";
 
-@import "_asp-fallback.scss";
-@import "_normalize.scss";
-@import "_extra.scss";
-@import "_layout.scss";
-@import "_color-system.scss";
+// Module system
+@import "module-system/index.import.scss";
+
+// Common styles
+@import "styles/index.import.scss";
+
+// Variables
+@import "../_variables.scss";

packages/classic/scss/core/color-system/index.import.scss

@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/color-system/index.import.scss";

packages/classic/scss/core/functions/index.import.scss

@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/functions/index.import.scss";

packages/classic/scss/core/mixins/index.import.scss

@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/mixins/index.import.scss";

packages/classic/scss/core/module-system/index.import.scss

@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/module-system/index.import.scss";

packages/classic/scss/core/styles/index.import.scss

@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/styles/index.import.scss";

packages/classic/scss/notification/_variables.scss

@@ -45,7 +45,7 @@ $kendo-notification-border: $component-border !default;
     // sass-lint:disable-block indentation
     @each $name, $color in $colors {
         $_theme: k-map-merge(( $name: (
-            color: contrast-wcag( $color ),
+            color: k-contrast-legacy( $color ),
             background-color: $color,
             border: $color,
         )), $_theme );

packages/classic/scss/progressbar/_variables.scss

@@ -39,7 +39,7 @@ $kendo-progressbar-gradient: null !default;
 $kendo-progressbar-value-bg: $primary !default;
 /// Progress text color of the progressbar.
 /// @group progressbar
-$kendo-progressbar-value-text: contrast-wcag( $kendo-progressbar-value-bg ) !default;
+$kendo-progressbar-value-text: k-contrast-legacy( $kendo-progressbar-value-bg ) !default;
 /// Progress border color of the progressbar.
 /// @group progressbar
 $kendo-progressbar-value-border: k-try-shade( $kendo-progressbar-value-bg ) !default;

packages/classic/scss/radio/_variables.scss

@@ -115,7 +115,7 @@ $kendo-radio-checked-glyph: "\e308" !default;
 
 /// Image of checked radio button indicator.
 /// @group radio
-$kendo-radio-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>") ) !default;
+$kendo-radio-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>") ) !default;
 /// Image of disabled and checked radio button indicator.
 /// @group radio
 $kendo-radio-disabled-checked-image: null !default;

packages/classic/scss/slider/_variables.scss

@@ -19,7 +19,7 @@ $slider-draghandle-active-scale: 1 !default;
 $slider-draghandle-active-size: null !default;
 
 $slider-draghandle-bg: $primary !default;
-$slider-draghandle-text: contrast-wcag( $primary ) !default;
+$slider-draghandle-text: k-contrast-legacy( $primary ) !default;
 $slider-draghandle-border: k-try-shade( $primary, 2 ) !default;
 $slider-draghandle-gradient: null !default;
 

packages/classic/scss/stepper/_variables.scss

@@ -42,15 +42,15 @@ $stepper-indicator-disabled-text: $disabled-text !default;
 $stepper-indicator-disabled-border: null !default;
 
 $stepper-indicator-done-bg: $primary !default;
-$stepper-indicator-done-text: contrast-wcag( $stepper-indicator-done-bg ) !default;
+$stepper-indicator-done-text: k-contrast-legacy( $stepper-indicator-done-bg ) !default;
 $stepper-indicator-done-border: $stepper-indicator-done-bg !default;
 
 $stepper-indicator-done-hover-bg: k-try-shade( $stepper-indicator-done-bg ) !default;
 $stepper-indicator-done-hover-text: null !default;
 $stepper-indicator-done-hover-border: null !default;
 
 $stepper-indicator-done-disabled-bg: k-color-mix( $stepper-indicator-done-bg, $component-bg, 60% ) !default;
-$stepper-indicator-done-disabled-text: contrast-wcag( $stepper-indicator-done-bg ) !default;
+$stepper-indicator-done-disabled-text: k-contrast-legacy( $stepper-indicator-done-bg ) !default;
 $stepper-indicator-done-disabled-border: $stepper-indicator-done-disabled-bg !default;
 
 $stepper-indicator-current-bg: $stepper-indicator-done-bg !default;

packages/classic/scss/timeline/_variables.scss

@@ -39,7 +39,7 @@ $timeline-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-spa
 $timeline-mobile-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-mobile-spacing-x}) !default;
 $timeline-horizontal-flag-min-width: 60px !default;
 $timeline-flag-bg: $primary !default;
-$timeline-flag-text: contrast-wcag( $timeline-flag-bg ) !default;
+$timeline-flag-text: k-contrast-legacy( $timeline-flag-bg ) !default;
 
 $timeline-flag-callout-width: 10px !default;
 $timeline-flag-callout-height: 10px !default;

packages/classic/scss/tooltip/_variables.scss

@@ -19,7 +19,7 @@ $tooltip-text: k-contrast-color( $tooltip-bg ) !default;
 $tooltip-border: $tooltip-bg !default;
 
 $tooltip-primary-bg: $primary !default;
-$tooltip-primary-text: contrast-wcag( $tooltip-primary-bg ) !default;
+$tooltip-primary-text: k-contrast-legacy( $tooltip-primary-bg ) !default;
 $tooltip-primary-border: $tooltip-primary-bg !default;
 $tooltip-info-bg: $info !default;
 $tooltip-info-text: k-contrast-color( $tooltip-info-bg ) !default;

packages/core/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: (($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;
+}

packages/core/scss/functions/_escape-svg.import.scss

@@ -0,0 +1,24 @@
+$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 $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;
+}

packages/core/scss/functions/index.import.scss

@@ -2,6 +2,7 @@
 @import "_color-contrast.import.scss";
 @import "_color-manipulation.import.scss";
 @import "_custom-properties.import.scss";
+@import "_escape-svg.import.scss";
 @import "_lang.import.scss";
 @import "_list.import.scss";
 @import "_math.import.scss";

packages/core/scss/index.import.scss

@@ -1,5 +1,5 @@
-@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";