diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss
index 999915aa6e2..5e1916a1790 100644
--- a/packages/bootstrap/scss/_variables.scss
+++ b/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";
diff --git a/packages/bootstrap/scss/checkbox/_variables.scss b/packages/bootstrap/scss/checkbox/_variables.scss
index a83ad8acf36..a23e37b88b3 100644
--- a/packages/bootstrap/scss/checkbox/_variables.scss
+++ b/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,") ) !default;
+$kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,") ) !default;
/// Image of checked checkbox indicator.
/// @group checkbox
-$kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,") ) !default;
+$kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,") ) !default;
// Checkbox label
diff --git a/packages/bootstrap/scss/color-preview/_variables.scss b/packages/bootstrap/scss/color-preview/_variables.scss
index 629c57cd632..362fdc55552 100644
--- a/packages/bootstrap/scss/color-preview/_variables.scss
+++ b/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,") ) !default;
+$color-preview-no-color-image: k-escape-svg( url("data:image/svg+xml,") ) !default;
$color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default;
diff --git a/packages/bootstrap/scss/core/_asp-fallback.scss b/packages/bootstrap/scss/core/_asp-fallback.scss
deleted file mode 100644
index cf63304e590..00000000000
--- a/packages/bootstrap/scss/core/_asp-fallback.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "~@progress/kendo-theme-default/scss/core/_asp-fallback.scss";
diff --git a/packages/bootstrap/scss/core/_color-system.scss b/packages/bootstrap/scss/core/_color-system.scss
deleted file mode 100644
index 953d27a88da..00000000000
--- a/packages/bootstrap/scss/core/_color-system.scss
+++ /dev/null
@@ -1 +0,0 @@
-// @import "~@progress/kendo-theme-default/scss/core/_color-system.scss";
diff --git a/packages/bootstrap/scss/core/_extra.scss b/packages/bootstrap/scss/core/_extra.scss
deleted file mode 100644
index 805396c45df..00000000000
--- a/packages/bootstrap/scss/core/_extra.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "~@progress/kendo-theme-default/scss/core/_extra.scss";
diff --git a/packages/bootstrap/scss/core/_index.scss b/packages/bootstrap/scss/core/_index.scss
index f3a3e3e8daa..c0f93466f73 100644
--- a/packages/bootstrap/scss/core/_index.scss
+++ b/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";
diff --git a/packages/bootstrap/scss/core/_layout.scss b/packages/bootstrap/scss/core/_layout.scss
deleted file mode 100644
index f2e8362bb50..00000000000
--- a/packages/bootstrap/scss/core/_layout.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "~@progress/kendo-theme-default/scss/core/_layout.scss";
diff --git a/packages/bootstrap/scss/core/_normalize.scss b/packages/bootstrap/scss/core/_normalize.scss
deleted file mode 100644
index 082a27d382d..00000000000
--- a/packages/bootstrap/scss/core/_normalize.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "~@progress/kendo-theme-default/scss/core/_normalize.scss";
diff --git a/packages/nouvelle/scss/core/color-system/_index.scss b/packages/bootstrap/scss/core/color-system/index.import.scss
similarity index 100%
rename from packages/nouvelle/scss/core/color-system/_index.scss
rename to packages/bootstrap/scss/core/color-system/index.import.scss
diff --git a/packages/bootstrap/scss/core/functions/_index.scss b/packages/bootstrap/scss/core/functions/_index.scss
deleted file mode 100644
index 161ad4f8bca..00000000000
--- a/packages/bootstrap/scss/core/functions/_index.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$wcag-min-contrast-ratio: 4.5 !default;
-
-@import "~@progress/kendo-theme-core/scss/functions/index.import.scss";
-@import "~@progress/kendo-theme-default/scss/core/functions/_index.scss";
diff --git a/packages/nouvelle/scss/core/functions/_index.scss b/packages/bootstrap/scss/core/functions/index.import.scss
similarity index 100%
rename from packages/nouvelle/scss/core/functions/_index.scss
rename to packages/bootstrap/scss/core/functions/index.import.scss
diff --git a/packages/bootstrap/scss/core/mixins/_index.scss b/packages/bootstrap/scss/core/mixins/_index.scss
deleted file mode 100644
index e596855e96e..00000000000
--- a/packages/bootstrap/scss/core/mixins/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "~@progress/kendo-theme-default/scss/core/mixins/_index.scss";
diff --git a/packages/bootstrap/scss/core/mixins/index.import.scss b/packages/bootstrap/scss/core/mixins/index.import.scss
new file mode 100644
index 00000000000..72c8c7fc1ba
--- /dev/null
+++ b/packages/bootstrap/scss/core/mixins/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/mixins/index.import.scss";
diff --git a/packages/bootstrap/scss/core/module-system/index.import.scss b/packages/bootstrap/scss/core/module-system/index.import.scss
new file mode 100644
index 00000000000..f80356df009
--- /dev/null
+++ b/packages/bootstrap/scss/core/module-system/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/module-system/index.import.scss";
diff --git a/packages/bootstrap/scss/core/styles/index.import.scss b/packages/bootstrap/scss/core/styles/index.import.scss
new file mode 100644
index 00000000000..f098a4cf466
--- /dev/null
+++ b/packages/bootstrap/scss/core/styles/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/styles/index.import.scss";
diff --git a/packages/bootstrap/scss/dialog/_theme.scss b/packages/bootstrap/scss/dialog/_theme.scss
index a0c032e9774..faed5397388 100644
--- a/packages/bootstrap/scss/dialog/_theme.scss
+++ b/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;
}
}
diff --git a/packages/bootstrap/scss/radio/_variables.scss b/packages/bootstrap/scss/radio/_variables.scss
index f7875ff0327..9ec0ba681ef 100644
--- a/packages/bootstrap/scss/radio/_variables.scss
+++ b/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,") ) !default;
+$kendo-radio-checked-image: k-escape-svg( url("data:image/svg+xml,") ) !default;
/// Image of disabled and checked radio button indicator.
/// @group radio
$kendo-radio-disabled-checked-image: null !default;
diff --git a/packages/classic/scss/_variables.scss b/packages/classic/scss/_variables.scss
index 4cfe4b6f293..850566cab0c 100644
--- a/packages/classic/scss/_variables.scss
+++ b/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;
diff --git a/packages/classic/scss/adaptive/_variables.scss b/packages/classic/scss/adaptive/_variables.scss
index c4dff1df6bc..784de72ff4a 100644
--- a/packages/classic/scss/adaptive/_variables.scss
+++ b/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;
diff --git a/packages/classic/scss/button/_variables.scss b/packages/classic/scss/button/_variables.scss
index 4f939b8550c..3f61da86da0 100644
--- a/packages/classic/scss/button/_variables.scss
+++ b/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;
diff --git a/packages/classic/scss/chat/_variables.scss b/packages/classic/scss/chat/_variables.scss
index 79e6937ea2a..0dc0bb75e30 100644
--- a/packages/classic/scss/chat/_variables.scss
+++ b/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;
diff --git a/packages/classic/scss/checkbox/_variables.scss b/packages/classic/scss/checkbox/_variables.scss
index 1cd2b8d363b..702401186b9 100644
--- a/packages/classic/scss/checkbox/_variables.scss
+++ b/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,") ) !default;
+$kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,") ) !default;
/// Image image of checked checkbox indicator.
/// @group checkbox
-$kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,") ) !default;
+$kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,") ) !default;
// Checkbox label
diff --git a/packages/classic/scss/chip/_variables.scss b/packages/classic/scss/chip/_variables.scss
index bf6ec643612..93f1476cd9b 100644
--- a/packages/classic/scss/chip/_variables.scss
+++ b/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
diff --git a/packages/classic/scss/color-preview/_variables.scss b/packages/classic/scss/color-preview/_variables.scss
index 629c57cd632..362fdc55552 100644
--- a/packages/classic/scss/color-preview/_variables.scss
+++ b/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,") ) !default;
+$color-preview-no-color-image: k-escape-svg( url("data:image/svg+xml,") ) !default;
$color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default;
diff --git a/packages/classic/scss/core/_asp-fallback.scss b/packages/classic/scss/core/_asp-fallback.scss
deleted file mode 100644
index cf63304e590..00000000000
--- a/packages/classic/scss/core/_asp-fallback.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "~@progress/kendo-theme-default/scss/core/_asp-fallback.scss";
diff --git a/packages/classic/scss/core/_color-system.scss b/packages/classic/scss/core/_color-system.scss
deleted file mode 100644
index 953d27a88da..00000000000
--- a/packages/classic/scss/core/_color-system.scss
+++ /dev/null
@@ -1 +0,0 @@
-// @import "~@progress/kendo-theme-default/scss/core/_color-system.scss";
diff --git a/packages/classic/scss/core/_extra.scss b/packages/classic/scss/core/_extra.scss
deleted file mode 100644
index 805396c45df..00000000000
--- a/packages/classic/scss/core/_extra.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "~@progress/kendo-theme-default/scss/core/_extra.scss";
diff --git a/packages/classic/scss/core/_index.scss b/packages/classic/scss/core/_index.scss
index f3a3e3e8daa..c0f93466f73 100644
--- a/packages/classic/scss/core/_index.scss
+++ b/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";
diff --git a/packages/classic/scss/core/_layout.scss b/packages/classic/scss/core/_layout.scss
deleted file mode 100644
index f2e8362bb50..00000000000
--- a/packages/classic/scss/core/_layout.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "~@progress/kendo-theme-default/scss/core/_layout.scss";
diff --git a/packages/classic/scss/core/_normalize.scss b/packages/classic/scss/core/_normalize.scss
deleted file mode 100644
index 082a27d382d..00000000000
--- a/packages/classic/scss/core/_normalize.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "~@progress/kendo-theme-default/scss/core/_normalize.scss";
diff --git a/packages/classic/scss/core/color-system/index.import.scss b/packages/classic/scss/core/color-system/index.import.scss
new file mode 100644
index 00000000000..0dca4c662a3
--- /dev/null
+++ b/packages/classic/scss/core/color-system/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/color-system/index.import.scss";
diff --git a/packages/classic/scss/core/functions/_index.scss b/packages/classic/scss/core/functions/_index.scss
deleted file mode 100644
index 161ad4f8bca..00000000000
--- a/packages/classic/scss/core/functions/_index.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$wcag-min-contrast-ratio: 4.5 !default;
-
-@import "~@progress/kendo-theme-core/scss/functions/index.import.scss";
-@import "~@progress/kendo-theme-default/scss/core/functions/_index.scss";
diff --git a/packages/classic/scss/core/functions/index.import.scss b/packages/classic/scss/core/functions/index.import.scss
new file mode 100644
index 00000000000..11cdf684a33
--- /dev/null
+++ b/packages/classic/scss/core/functions/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/functions/index.import.scss";
diff --git a/packages/classic/scss/core/mixins/_index.scss b/packages/classic/scss/core/mixins/_index.scss
deleted file mode 100644
index e596855e96e..00000000000
--- a/packages/classic/scss/core/mixins/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "~@progress/kendo-theme-default/scss/core/mixins/_index.scss";
diff --git a/packages/classic/scss/core/mixins/index.import.scss b/packages/classic/scss/core/mixins/index.import.scss
new file mode 100644
index 00000000000..72c8c7fc1ba
--- /dev/null
+++ b/packages/classic/scss/core/mixins/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/mixins/index.import.scss";
diff --git a/packages/classic/scss/core/module-system/index.import.scss b/packages/classic/scss/core/module-system/index.import.scss
new file mode 100644
index 00000000000..f80356df009
--- /dev/null
+++ b/packages/classic/scss/core/module-system/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/module-system/index.import.scss";
diff --git a/packages/classic/scss/core/styles/index.import.scss b/packages/classic/scss/core/styles/index.import.scss
new file mode 100644
index 00000000000..f098a4cf466
--- /dev/null
+++ b/packages/classic/scss/core/styles/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/styles/index.import.scss";
diff --git a/packages/classic/scss/notification/_variables.scss b/packages/classic/scss/notification/_variables.scss
index db72e1a6e8a..19e8a11a41d 100644
--- a/packages/classic/scss/notification/_variables.scss
+++ b/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 );
diff --git a/packages/classic/scss/progressbar/_variables.scss b/packages/classic/scss/progressbar/_variables.scss
index af00e31687c..cbda1d9f1dd 100644
--- a/packages/classic/scss/progressbar/_variables.scss
+++ b/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;
diff --git a/packages/classic/scss/radio/_variables.scss b/packages/classic/scss/radio/_variables.scss
index 68b5ca38f06..0a41ca9aba4 100644
--- a/packages/classic/scss/radio/_variables.scss
+++ b/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,") ) !default;
+$kendo-radio-checked-image: k-escape-svg( url("data:image/svg+xml,") ) !default;
/// Image of disabled and checked radio button indicator.
/// @group radio
$kendo-radio-disabled-checked-image: null !default;
diff --git a/packages/classic/scss/slider/_variables.scss b/packages/classic/scss/slider/_variables.scss
index 10f17a8bd37..47a871b17ee 100644
--- a/packages/classic/scss/slider/_variables.scss
+++ b/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;
diff --git a/packages/classic/scss/stepper/_variables.scss b/packages/classic/scss/stepper/_variables.scss
index b1adb86f6ba..1edb6ac7d6d 100644
--- a/packages/classic/scss/stepper/_variables.scss
+++ b/packages/classic/scss/stepper/_variables.scss
@@ -42,7 +42,7 @@ $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;
@@ -50,7 +50,7 @@ $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;
diff --git a/packages/classic/scss/timeline/_variables.scss b/packages/classic/scss/timeline/_variables.scss
index 2d4cadafd39..8afe4a3eb25 100644
--- a/packages/classic/scss/timeline/_variables.scss
+++ b/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;
diff --git a/packages/classic/scss/tooltip/_variables.scss b/packages/classic/scss/tooltip/_variables.scss
index 2ed335d4074..41c3bd5e32f 100644
--- a/packages/classic/scss/tooltip/_variables.scss
+++ b/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;
diff --git a/packages/core/scss/functions/_color-contrast.import.scss b/packages/core/scss/functions/_color-contrast.import.scss
index 3c85852901b..67c8e2a2f33 100644
--- a/packages/core/scss/functions/_color-contrast.import.scss
+++ b/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;
+}
diff --git a/packages/core/scss/functions/_escape-svg.import.scss b/packages/core/scss/functions/_escape-svg.import.scss
new file mode 100644
index 00000000000..d5a89749e0b
--- /dev/null
+++ b/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;
+}
diff --git a/packages/core/scss/functions/index.import.scss b/packages/core/scss/functions/index.import.scss
index bd516cae1e8..ae9ceb32228 100644
--- a/packages/core/scss/functions/index.import.scss
+++ b/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";
diff --git a/packages/core/scss/index.import.scss b/packages/core/scss/index.import.scss
index 71131a68aad..ab6a5010061 100644
--- a/packages/core/scss/index.import.scss
+++ b/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";
diff --git a/packages/core/scss/mixins/_disabled.scss b/packages/core/scss/mixins/_disabled.scss
index 9b7262c7d0f..3ccd6dfc2db 100644
--- a/packages/core/scss/mixins/_disabled.scss
+++ b/packages/core/scss/mixins/_disabled.scss
@@ -1,5 +1,3 @@
-$disabled-styling: () !default;
-
// Disabled
@mixin disabled( $disabled-styling ) {
outline: none;
@@ -9,10 +7,3 @@ $disabled-styling: () !default;
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;
-}
diff --git a/packages/core/scss/module-system/index.import.scss b/packages/core/scss/module-system/index.import.scss
index 18be285579e..5e47207339f 100644
--- a/packages/core/scss/module-system/index.import.scss
+++ b/packages/core/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.";
}
diff --git a/packages/core/scss/styles/_layout.scss b/packages/core/scss/styles/_layout.scss
index de8030e941f..5c76c05c0ae 100644
--- a/packages/core/scss/styles/_layout.scss
+++ b/packages/core/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; }
diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss
index d4d0fdbe64c..a544e266cfa 100644
--- a/packages/default/scss/_variables.scss
+++ b/packages/default/scss/_variables.scss
@@ -1,5 +1,5 @@
-@import "core/functions/_index.scss";
-@import "core/_color-system.scss";
+@import "core/functions/index.import.scss";
+@import "core/color-system/index.import.scss";
// Options
@@ -119,7 +119,7 @@ $accent: #ff6358 !default;
/// @deprecated Will be removed in v5. Use `$primary-contrast` variable instead.
/// @group color-system
/// @type Color
-$accent-contrast: contrast-wcag( $accent ) !default;
+$accent-contrast: k-contrast-legacy( $accent ) !default;
// Theme colors
@@ -128,68 +128,68 @@ $accent-contrast: contrast-wcag( $accent ) !default;
/// @group color-system
/// @type Color
$primary: #ff6358 !default;
-$primary-lighter: tint( $primary, 2 ) !default;
-$primary-darker: shade( $primary, 2 ) !default;
+$primary-lighter: k-color-tint( $primary, 2 ) !default;
+$primary-darker: k-color-shade( $primary, 2 ) !default;
/// The color used along with the accent color denoted by $primary.
/// 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
/// @type Color
$secondary: #666666 !default;
-$secondary-lighter: tint( $secondary, 2 ) !default;
-$secondary-darker: shade( $secondary, 2 ) !default;
+$secondary-lighter: k-color-tint( $secondary, 2 ) !default;
+$secondary-darker: k-color-shade( $secondary, 2 ) !default;
/// The color used along with the secondary color denoted by $secondary.
/// Used to provide contrast between the background and foreground colors.
/// @group color-system
/// @type Color
-$secondary-contrast: contrast-wcag( $secondary ) !default;
+$secondary-contrast: k-contrast-legacy( $secondary ) !default;
/// The tertiary color of the theme.
/// @group color-system
/// @type Color
$tertiary: #03a9f4 !default;
-$tertiary-lighter: tint( $tertiary, 2 ) !default;
-$tertiary-darker: shade( $tertiary, 2 ) !default;
+$tertiary-lighter: k-color-tint( $tertiary, 2 ) !default;
+$tertiary-darker: k-color-shade( $tertiary, 2 ) !default;
/// The color used along with the tertiary color denoted by $tertiary.
/// Used to provide contrast between the background and foreground colors.
/// @group color-system
/// @type Color
-$tertiary-contrast: contrast-wcag( $tertiary ) !default;
+$tertiary-contrast: k-contrast-legacy( $tertiary ) !default;
/// The color for informational messages and states.
/// @group color-system
/// @type Color
$info: #0058e9 !default;
-$info-lighter: tint( $info, 2 ) !default;
-$info-darker: shade( $info, 2 ) !default;
+$info-lighter: k-color-tint( $info, 2 ) !default;
+$info-darker: k-color-shade( $info, 2 ) !default;
/// The color for success messages and states.
/// @group color-system
/// @type Color
$success: #37b400 !default;
-$success-lighter: tint( $success, 2 ) !default;
-$success-darker: shade( $success, 2 ) !default;
+$success-lighter: k-color-tint( $success, 2 ) !default;
+$success-darker: k-color-shade( $success, 2 ) !default;
/// The color for warning messages and states.
/// @group color-system
/// @type Color
$warning: #ffc000 !default;
-$warning-lighter: tint( $warning, 2 ) !default;
-$warning-darker: shade( $warning, 2 ) !default;
+$warning-lighter: k-color-tint( $warning, 2 ) !default;
+$warning-darker: k-color-shade( $warning, 2 ) !default;
/// The color for error messages and states.
/// @group color-system
/// @type Color
$error: #f31700 !default;
-$error-lighter: tint( $error, 2 ) !default;
-$error-darker: shade( $error, 2 ) !default;
+$error-lighter: k-color-tint( $error, 2 ) !default;
+$error-darker: k-color-shade( $error, 2 ) !default;
/// The dark color of the theme.
/// @group color-system
@@ -234,7 +234,7 @@ $heading-text: #292929 !default;
$subtle-text: #666666 !default;
$disabled-text: #8f8f8f !default;
-$app-bg: try-shade( $body-bg, .25 ) !default;
+$app-bg: k-try-shade( $body-bg, .25 ) !default;
$app-text: $body-text !default;
$app-border: rgba( $black, .08 ) !default;
@@ -266,7 +266,7 @@ $base-border: rgba( black, .08 ) !default;
$base-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
/// The background of hovered items.
-$hovered-bg: try-shade( $base-bg, .5 ) !default;
+$hovered-bg: k-try-shade( $base-bg, .5 ) !default;
/// The text color of hovered items.
$hovered-text: $base-text !default;
/// The border color of hovered items.
@@ -277,13 +277,13 @@ $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: $base-border !default;
/// The gradient background of selected items.
$selected-gradient: $base-gradient !default;
-$selected-hover-bg: try-shade( $selected-bg, .5 ) !default;
+$selected-hover-bg: k-try-shade( $selected-bg, .5 ) !default;
$selected-hover-text: $selected-text !default;
$selected-hover-border: $base-border !default;
$selected-hover-gradient: $base-gradient !default;
diff --git a/packages/default/scss/adaptive/_variables.scss b/packages/default/scss/adaptive/_variables.scss
index c4dff1df6bc..784de72ff4a 100644
--- a/packages/default/scss/adaptive/_variables.scss
+++ b/packages/default/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;
diff --git a/packages/default/scss/appbar/_theme.scss b/packages/default/scss/appbar/_theme.scss
index b826a455953..9b2aa37ff44 100644
--- a/packages/default/scss/appbar/_theme.scss
+++ b/packages/default/scss/appbar/_theme.scss
@@ -18,7 +18,7 @@
color: $kendo-appbar-dark-text;
background-color: $kendo-appbar-dark-bg;
} @else {
- color: contrast-wcag( $color );
+ color: k-contrast-legacy( $color );
background-color: $color;
}
}
diff --git a/packages/default/scss/appbar/_variables.scss b/packages/default/scss/appbar/_variables.scss
index 74f1e17e7b2..2c6b937e631 100644
--- a/packages/default/scss/appbar/_variables.scss
+++ b/packages/default/scss/appbar/_variables.scss
@@ -13,10 +13,10 @@ $kendo-appbar-font-family: $font-family !default;
$kendo-appbar-gap: map-get( $spacing, 2 ) !default;
$kendo-appbar-light-bg: $light !default;
-$kendo-appbar-light-text: contrast-wcag( $light ) !default;
+$kendo-appbar-light-text: k-contrast-legacy( $light ) !default;
$kendo-appbar-dark-bg: $dark !default;
-$kendo-appbar-dark-text: contrast-wcag( $dark ) !default;
+$kendo-appbar-dark-text: k-contrast-legacy( $dark ) !default;
$kendo-appbar-box-shadow: 0px 1px 1px rgba(0, 0, 0, .16) !default;
$kendo-appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
diff --git a/packages/default/scss/avatar/_theme.scss b/packages/default/scss/avatar/_theme.scss
index 02772c2f140..2d49ee4dfaf 100644
--- a/packages/default/scss/avatar/_theme.scss
+++ b/packages/default/scss/avatar/_theme.scss
@@ -4,7 +4,7 @@
@each $name, $color in $kendo-avatar-theme-colors {
.k-avatar-solid-#{$name} {
border-color: $color;
- color: contrast-wcag( $color );
+ color: k-contrast-legacy( $color );
background-color: $color;
}
}
diff --git a/packages/default/scss/badge/_theme.scss b/packages/default/scss/badge/_theme.scss
index c6e0c93647c..88f48492492 100644
--- a/packages/default/scss/badge/_theme.scss
+++ b/packages/default/scss/badge/_theme.scss
@@ -4,7 +4,7 @@
@each $name, $color in $kendo-theme-colors {
.k-badge-solid-#{$name} {
border-color: $color;
- color: contrast-wcag( $color );
+ color: k-contrast-legacy( $color );
background-color: $color;
}
}
diff --git a/packages/default/scss/bottom-navigation/_theme.scss b/packages/default/scss/bottom-navigation/_theme.scss
index 0f994adde82..7d210ccdc95 100644
--- a/packages/default/scss/bottom-navigation/_theme.scss
+++ b/packages/default/scss/bottom-navigation/_theme.scss
@@ -4,17 +4,17 @@
@each $name, $color in $kendo-theme-colors {
.k-bottom-nav-solid.k-bottom-nav-#{$name} {
@include fill(
- $color: true-mix( $color, contrast-wcag( $color ), 35%),
+ $color: k-true-mix( $color, k-contrast-legacy( $color ), 35%),
$bg: $color
);
.k-bottom-nav-item.k-focus,
.k-bottom-nav-item:focus {
- @include fill( $bg: rgba(true-mix( $color, contrast-wcag( $color ), 35%), .2));
+ @include fill( $bg: rgba(k-true-mix( $color, k-contrast-legacy( $color ), 35%), .2));
}
.k-bottom-nav-item.k-selected {
- @include fill( $color: contrast-wcag( $color ) );
+ @include fill( $color: k-contrast-legacy( $color ) );
}
}
}
@@ -35,7 +35,7 @@
@each $name, $color in $kendo-theme-colors {
&.k-bottom-nav-#{$name} .k-bottom-nav-item.k-selected {
@if $name == "secondary" or $name == "light" {
- @include fill( $color: try-shade($color, 3) );
+ @include fill( $color: k-try-shade($color, 3) );
} @else {
@include fill( $color: $color );
}
diff --git a/packages/default/scss/button/_theme.scss b/packages/default/scss/button/_theme.scss
index 7a5ffb05523..6e4b2cb117a 100644
--- a/packages/default/scss/button/_theme.scss
+++ b/packages/default/scss/button/_theme.scss
@@ -68,7 +68,7 @@
@each $name, $color in $kendo-button-theme-colors {
@if ($name != "base") {
- $_button-text: contrast-wcag( $color );
+ $_button-text: k-contrast-legacy( $color );
$_button-bg: if( $kendo-solid-button-shade-bg-amount, call( $_shade-fn, $color, $kendo-solid-button-shade-bg-amount ), null );
$_button-border: if( $kendo-solid-button-shade-border-amount, call( $_shade-fn, $color, $kendo-solid-button-shade-border-amount ), null );
@@ -153,7 +153,7 @@
&:hover,
&.k-hover {
@include fill(
- contrast-wcag( $color ),
+ k-contrast-legacy( $color ),
$color,
$color
);
@@ -171,7 +171,7 @@
&:active,
&.k-active {
@include fill(
- contrast-wcag( $color ),
+ k-contrast-legacy( $color ),
$color,
$color
);
@@ -180,7 +180,7 @@
// Selected
&.k-selected {
@include fill(
- contrast-wcag( $color ),
+ k-contrast-legacy( $color ),
$color,
$color
);
@@ -217,7 +217,7 @@
// Hover
&:hover,
&.k-hover {
- color: try-shade( $color, 2 );
+ color: k-try-shade( $color, 2 );
}
// Focus
@@ -231,12 +231,12 @@
// Active
&:active,
&.k-active {
- color: try-shade( $color, 2 );
+ color: k-try-shade( $color, 2 );
}
// Selected
&.k-selected {
- color: try-shade( $color, 2 );
+ color: k-try-shade( $color, 2 );
}
// Disabled state
diff --git a/packages/default/scss/button/_variables.scss b/packages/default/scss/button/_variables.scss
index abd7eb5435f..6a948494d42 100644
--- a/packages/default/scss/button/_variables.scss
+++ b/packages/default/scss/button/_variables.scss
@@ -99,7 +99,7 @@ $kendo-button-shadow: null !default;
/// The base background of hovered button.
/// @group button
-$kendo-button-hover-bg: try-shade( $kendo-button-bg, .5 ) !default;
+$kendo-button-hover-bg: k-try-shade( $kendo-button-bg, .5 ) !default;
/// The base text color of hovered button.
/// @group button
$kendo-button-hover-text: null !default;
@@ -115,7 +115,7 @@ $kendo-button-hover-shadow: null !default;
/// The base background color of active button.
/// @group button
-$kendo-button-active-bg: try-shade( $kendo-button-bg, 1.5 ) !default;
+$kendo-button-active-bg: k-try-shade( $kendo-button-bg, 1.5 ) !default;
/// The base text color of active button.
/// @group button
$kendo-button-active-text: null !default;
@@ -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;
@@ -179,7 +179,7 @@ $kendo-button-disabled-shadow: null !default;
// Solid button
$kendo-solid-button-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
-$kendo-solid-button-shade-function: "try-shade" !default;
+$kendo-solid-button-shade-function: "k-try-shade" !default;
$kendo-solid-button-shade-text-amount: 0 !default;
$kendo-solid-button-shade-bg-amount: 0 !default;
$kendo-solid-button-shade-border-amount: 0 !default;
diff --git a/packages/default/scss/card/_theme.scss b/packages/default/scss/card/_theme.scss
index 8bdb858990b..d57fc4d6660 100644
--- a/packages/default/scss/card/_theme.scss
+++ b/packages/default/scss/card/_theme.scss
@@ -64,9 +64,9 @@
// Card theme colors
@each $name, $color in $kendo-theme-colors {
.k-card-#{$name} {
- background-color: tint($color, 10);
- color: shade($color, 6);
- border-color: tint($color, 9);
+ background-color: k-color-tint($color, 10);
+ color: k-color-shade($color, 6);
+ border-color: k-color-tint($color, 9);
.k-card-subtitle {
color: inherit;
diff --git a/packages/default/scss/chat/_variables.scss b/packages/default/scss/chat/_variables.scss
index 485c6f62fdc..46acbab421b 100644
--- a/packages/default/scss/chat/_variables.scss
+++ b/packages/default/scss/chat/_variables.scss
@@ -57,7 +57,7 @@ $chat-bubble-hover-shadow: 0 1px 2px rgba( 0, 0, 0, .16) !default;
$chat-bubble-selected-shadow: 0 3px 10px rgba( 0, 0, 0, .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;
diff --git a/packages/default/scss/checkbox/_variables.scss b/packages/default/scss/checkbox/_variables.scss
index 655ee0072da..383f6b3b855 100644
--- a/packages/default/scss/checkbox/_variables.scss
+++ b/packages/default/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,") ) !default;
+$kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,") ) !default;
/// Image image of checked checkbox indicator.
/// @group checkbox
-$kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,") ) !default;
+$kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,") ) !default;
// Checkbox label
diff --git a/packages/default/scss/chip/_theme.scss b/packages/default/scss/chip/_theme.scss
index 86dad5aa7e2..30e0a07e698 100644
--- a/packages/default/scss/chip/_theme.scss
+++ b/packages/default/scss/chip/_theme.scss
@@ -28,9 +28,9 @@
}
} @else {
@include fill(
- try-shade( $color, 65% ),
- try-tint( $color, 80% ),
- try-tint( $color, 25% ),
+ k-try-shade( $color, 65% ),
+ k-try-tint( $color, 80% ),
+ k-try-tint( $color, 25% ),
$kendo-chip-solid-gradient
);
@@ -41,11 +41,11 @@
&:hover,
&.k-hover {
- @include fill( $bg: try-tint($color, 65% ) );
+ @include fill( $bg: k-try-tint($color, 65% ) );
}
&.k-selected {
- @include fill( $bg: try-tint( $color, 50% ) );
+ @include fill( $bg: k-try-tint( $color, 50% ) );
}
}
}
@@ -83,54 +83,54 @@
}
} @else if ($name == "warning") {
@include fill(
- if( $dark-theme, tint($color, 25%), $kendo-chip-outline-text),
+ if( $dark-theme, k-color-tint($color, 25%), $kendo-chip-outline-text),
if( $dark-theme, $black, $white ),
- if( $dark-theme, tint($color, 25%), $color)
+ if( $dark-theme, k-color-tint($color, 25%), $color)
);
&:focus,
&.k-focus {
- @include box-shadow( 0 0 0 2px if( $dark-theme, rgba( tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
+ @include box-shadow( 0 0 0 2px if( $dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
}
&:hover,
&.k-hover {
@include fill(
- $color: if( $dark-theme, contrast-wcag( $color ), try-shade( $color, 80% ) ) ,
- $bg: if( $dark-theme, tint($color, 25%), $color)
+ $color: if( $dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) ) ,
+ $bg: if( $dark-theme, k-color-tint($color, 25%), $color)
);
}
&.k-selected {
@include fill(
- $color: if( $dark-theme, contrast-wcag( $color ), try-shade( $color, 80% ) ) ,
- $bg: if( $dark-theme, tint($color, 25%), $color)
+ $color: if( $dark-theme, k-contrast-legacy( $color ), k-try-shade( $color, 80% ) ) ,
+ $bg: if( $dark-theme, k-color-tint($color, 25%), $color)
);
}
} @else {
@include fill(
- try-shade( $color, 25% ),
+ k-try-shade( $color, 25% ),
if( $dark-theme, $black, $white ),
- try-shade( $color, 25% )
+ k-try-shade( $color, 25% )
);
&:focus,
&.k-focus {
- @include box-shadow( 0 0 0 2px if( $dark-theme, rgba( tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
+ @include box-shadow( 0 0 0 2px if( $dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 )) );
}
&:hover,
&.k-hover {
@include fill(
- $color: contrast-wcag( try-shade( $color, 25% ) ),
- $bg: try-shade( $color, 25% )
+ $color: k-contrast-legacy( k-try-shade( $color, 25% ) ),
+ $bg: k-try-shade( $color, 25% )
);
}
&.k-selected {
@include fill(
- $color: contrast-wcag( try-shade( $color, 25% ) ),
- $bg: try-shade( $color, 25% )
+ $color: k-contrast-legacy( k-try-shade( $color, 25% ) ),
+ $bg: k-try-shade( $color, 25% )
);
}
}
diff --git a/packages/default/scss/chip/_variables.scss b/packages/default/scss/chip/_variables.scss
index 2e7b758963c..da74a252645 100644
--- a/packages/default/scss/chip/_variables.scss
+++ b/packages/default/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
diff --git a/packages/default/scss/color-preview/_variables.scss b/packages/default/scss/color-preview/_variables.scss
index 629c57cd632..362fdc55552 100644
--- a/packages/default/scss/color-preview/_variables.scss
+++ b/packages/default/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,") ) !default;
+$color-preview-no-color-image: k-escape-svg( url("data:image/svg+xml,") ) !default;
$color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default;
diff --git a/packages/default/scss/core/_asp-fallback.scss b/packages/default/scss/core/_asp-fallback.scss
deleted file mode 100644
index baf5be5cffb..00000000000
--- a/packages/default/scss/core/_asp-fallback.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@include exports( "core/asp-fallback" ) {
-
- .k-theme-test-class,
- .k-common-test-class {
- opacity: 0;
- }
-
-}
diff --git a/packages/default/scss/core/_color-system.scss b/packages/default/scss/core/_color-system.scss
deleted file mode 100644
index 6252fd499bb..00000000000
--- a/packages/default/scss/core/_color-system.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-// Color constants
-$black: #000000; // stylelint-disable-line scss/dollar-variable-default
-$white: #ffffff; // stylelint-disable-line scss/dollar-variable-default
-
-$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
-
-$gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
-
-
-$palettes: (
-
- gray: (
- 50: #fafafa, // rgba( black, .02 )
- 100: #f5f5f5, // rgba( black, .04 )
- 200: #ebebeb, // rgba( black, .08 )
- 300: #e0e0e0, // rgba( black, .12 )
- 400: #d6d6d6, // rgba( black, .16 )
- 500: #cccccc, // rgba( black, .20 )
- 600: #8f8f8f, // rgba( black, .44 )
- 700: #666666, // rgba( black, .60 )
- 800: #424242, // rgba( black, .74 )
- 900: #292929 // rgba( black, .84 )
- )
-
-) !default;
-
-
-// Text colors for light themes
-$primary-text-on-light: #424242 !default;
-$secondary-text-on-light: #666666 !default;
-$tertiary-text-on-light: "" !default;
-$placeholder-text-on-light: #666666 !default;
-$disabled-text-on-light: #8f8f8f !default;
-
-
-// Text colors for dark themes
-$primary-text-on-dark: "" !default;
-$secondary-text-on-dark: "" !default;
-$tertiary-text-on-dark: "" !default;
-$placeholder-text-on-dark: "" !default;
-$disabled-text-on-dark: "" !default;
-
-
-// Color system functions
-@function get-base-palette($name) {
- @return map-get( $palettes, $name );
-}
-
-@function get-base-hue($palette, $hue) {
- @return map-get( get-base-palette( $palette ), $hue );
-}
diff --git a/packages/default/scss/core/_extra.scss b/packages/default/scss/core/_extra.scss
deleted file mode 100644
index 52694a012fd..00000000000
--- a/packages/default/scss/core/_extra.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@include exports( "core/extra" ) {
-
- // Hidden
- .k-hidden {
- display: none !important; // sass-lint:disable-line no-important
- }
-
-
- // RTL
- .k-rtl {
- direction: rtl;
- }
-
-
- /// This class could be assigned to elements which should be visually hidden, but remain accessible for screen readers.
- /// @name .k-sr-only
- /// @group extra
- .k-sr-only {
- position: absolute;
- left: -1px;
- width: 1px;
- height: 1px;
- overflow: hidden;
- }
-
-}
diff --git a/packages/default/scss/core/_index.scss b/packages/default/scss/core/_index.scss
index f3a3e3e8daa..c0f93466f73 100644
--- a/packages/default/scss/core/_index.scss
+++ b/packages/default/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";
diff --git a/packages/default/scss/core/_layout.scss b/packages/default/scss/core/_layout.scss
deleted file mode 100644
index d54476779c0..00000000000
--- a/packages/default/scss/core/_layout.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-@include exports( "core/layout" ) {
-
- // Basic layout
- .k-hbox,
- .k-hstack {
- display: flex;
- flex-flow: row nowrap;
- }
-
- .k-vbox,
- .k-vstack {
- display: flex;
- flex-flow: column nowrap;
- }
-
- .k-flex,
- .k-spacer {
- flex: 1 0 0%;
- }
-
-
- // Stack layout
- .k-stack-layout {}
-
-
- // Flex layout
- .k-flex-layout {
- display: flex;
- }
-
-
- // Grid layout
- .k-grid-layout {
- display: grid;
- }
-
-
- // Separator
- .k-separator {
- width: auto;
- height: 0;
- border-width: 1px 0 0;
- border-style: solid;
- border-color: inherit;
- display: block;
- flex-grow: 0 !important; // sass-lint:disable-line no-important
- flex-shrink: 0 !important; // sass-lint:disable-line no-important
- align-self: stretch;
- }
- .k-separator-horizontal,
- .k-vstack > .k-separator {
- width: auto;
- height: 0;
- border-width: 1px 0 0;
- }
- .k-separator-vertical,
- .k-hstack > .k-separator {
- width: 0;
- height: auto;
- border-width: 0 0 0 1px;
- }
-
- hr.k-separator {
- margin: 0;
- padding: 0;
- }
-
-}
diff --git a/packages/default/scss/core/_normalize.scss b/packages/default/scss/core/_normalize.scss
deleted file mode 100644
index e47f7e8c09d..00000000000
--- a/packages/default/scss/core/_normalize.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-@include exports( "core/normalize" ) {
-
- // Hidden attribute
- [hidden] {
- display: none !important; // sass-lint:disable-line no-important
- }
-
-
- // Hide script tags
- // see https://github.com/telerik/kendo-themes/issues/2360
- script {
- display: none !important; // sass-lint:disable-line no-important
- }
-
-}
diff --git a/packages/default/scss/core/color-system/index.import.scss b/packages/default/scss/core/color-system/index.import.scss
new file mode 100644
index 00000000000..0dca4c662a3
--- /dev/null
+++ b/packages/default/scss/core/color-system/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/color-system/index.import.scss";
diff --git a/packages/default/scss/core/functions/_colors.scss b/packages/default/scss/core/functions/_colors.scss
deleted file mode 100644
index 6f54967a1e0..00000000000
--- a/packages/default/scss/core/functions/_colors.scss
+++ /dev/null
@@ -1,424 +0,0 @@
-// contrast wcag adapted from https://gist.github.com/sgomes/ccc72f71137fe29039c92c0a9fe9b657
-
-// Precomputed linear color channel values, for use in contrast calculations.
-// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
-//
-// Algorithm, for c in 0 to 255:
-// f(c) {
-// c = c / 255;
-// return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-// }
-//
-// This lookup table is needed since there is no `pow` in SASS.
-// stylelint-disable-next-line scss/dollar-variable-default
-$linear-channel-values: (
- 0
- .0003035269835488375
- .000607053967097675
- .0009105809506465125
- .00121410793419535
- .0015176349177441874
- .001821161901293025
- .0021246888848418626
- .0024282158683907
- .0027317428519395373
- .003035269835488375
- .003346535763899161
- .003676507324047436
- .004024717018496307
- .004391442037410293
- .004776953480693729
- .005181516702338386
- .005605391624202723
- .006048833022857054
- .006512090792594475
- .006995410187265387
- .007499032043226175
- .008023192985384994
- .008568125618069307
- .009134058702220787
- .00972121732023785
- .010329823029626936
- .010960094006488246
- .011612245179743885
- .012286488356915872
- .012983032342173012
- .013702083047289686
- .014443843596092545
- .01520851442291271
- .01599629336550963
- .016807375752887384
- .017641954488384078
- .018500220128379697
- .019382360956935723
- .0202885630566524
- .021219010376003555
- .022173884793387385
- .02315336617811041
- .024157632448504756
- .02518685962736163
- .026241221894849898
- .027320891639074894
- .028426039504420793
- .0295568344378088
- .030713443732993635
- .03189603307301153
- .033104766570885055
- .03433980680868217
- .03560131487502034
- .03688945040110004
- .0382043715953465
- .03954623527673284
- .04091519690685319
- .042311410620809675
- .043735029256973465
- .04518620438567554
- .046665086336880095
- .04817182422688942
- .04970656598412723
- .05126945837404324
- .052860647023180246
- .05448027644244237
- .05612849004960009
- .05780543019106723
- .0595112381629812
- .06124605423161761
- .06301001765316767
- .06480326669290577
- .06662593864377289
- .06847816984440017
- .07036009569659588
- .07227185068231748
- .07421356838014963
- .07618538148130785
- .07818742180518633
- .08021982031446832
- .0822827071298148
- .08437621154414882
- .08650046203654976
- .08865558628577294
- .09084171118340768
- .09305896284668745
- .0953074666309647
- .09758734714186246
- .09989872824711389
- .10224173308810132
- .10461648409110419
- .10702310297826761
- .10946171077829933
- .1119324278369056
- .11443537382697373
- .11697066775851084
- .11953842798834562
- .12213877222960187
- .12477181756095049
- .12743768043564743
- .1301364766903643
- .13286832155381798
- .13563332965520566
- .13843161503245183
- .14126329114027164
- .14412847085805777
- .14702726649759498
- .14995978981060856
- .15292615199615017
- .1559264637078274
- .1589608350608804
- .162029375639111
- .1651321945016676
- .16826940018969075
- .1714411007328226
- .17464740365558504
- .17788841598362912
- .18116424424986022
- .184474994500441
- .18782077230067787
- .19120168274079138
- .1946178304415758
- .19806931955994886
- .20155625379439707
- .20507873639031693
- .20863687014525575
- .21223075741405523
- .21586050011389926
- .2195261997292692
- .2232279573168085
- .22696587351009836
- .23074004852434915
- .23455058216100522
- .238397573812271
- .24228112246555486
- .24620132670783548
- .25015828472995344
- .25415209433082675
- .2581828529215958
- .26225065752969623
- .26635560480286247
- .2704977910130658
- .27467731206038465
- .2788942634768104
- .2831487404299921
- .2874408377269175
- .29177064981753587
- .2961382707983211
- .3005437944157765
- .3049873140698863
- .30946892281750854
- .31398871337571754
- .31854677812509186
- .32314320911295075
- .3277780980565422
- .33245153634617935
- .33716361504833037
- .3419144249086609
- .3467040563550296
- .35153259950043936
- .3564001441459435
- .3613067797835095
- .3662525955988395
- .3712376804741491
- .3762621229909065
- .38132601143253014
- .386429433787049
- .39157247774972326
- .39675523072562685
- .4019777798321958
- .4072402119017367
- .41254261348390375
- .4178850708481375
- .4232676699860717
- .4286904966139066
- .43415363617474895
- .4396571738409188
- .44520119451622786
- .45078578283822346
- .45641102318040466
- .4620769996544071
- .467783796112159
- .47353149614800955
- .4793201831008268
- .4851499400560704
- .4910208498478356
- .4969329950608704
- .5028864580325687
- .5088813208549338
- .5149176653765214
- .5209955732043543
- .5271151257058131
- .5332764040105052
- .5394794890121072
- .5457244613701866
- .5520114015120001
- .5583403896342679
- .5647115057049292
- .5711248294648731
- .5775804404296506
- .5840784178911641
- .5906188409193369
- .5972017883637634
- .6038273388553378
- .6104955708078648
- .6172065624196511
- .6239603916750761
- .6307571363461468
- .6375968739940326
- .6444796819705821
- .6514056374198242
- .6583748172794485
- .665387298282272
- .6724431569576875
- .6795424696330938
- .6866853124353135
- .6938717612919899
- .7011018919329731
- .7083757798916868
- .7156935005064807
- .7230551289219693
- .7304607400903537
- .7379104087727308
- .7454042095403874
- .7529422167760779
- .7605245046752924
- .768151147247507
- .7758222183174236
- .7835377915261935
- .7912979403326302
- .799102738014409
- .8069522576692516
- .8148465722161012
- .8227857543962835
- .8307698767746546
- .83879901174074
- .846873231509858
- .8549926081242338
- .8631572134541023
- .8713671191987972
- .8796223968878317
- .8879231178819663
- .8962693533742664
- .9046611743911496
- .9130986517934192
- .9215818562772946
- .9301108583754237
- .938685728457888
- .9473065367331999
- .9559733532492861
- .9646862478944651
- .9734452903984125
- .9822505503331171
- .9911020971138298
- 1
-);
-
-/// Set a specific jump point for requesting color jumps
-/// @group color-system
-/// @access private
-$color-level-step: if(
- /* check for existance of bootstrap variable */
- variable-exists("theme-color-interval"),
- $theme-color-interval,
- /* fallback */
- 8%
-) !default;
-
-/// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
-/// @group color-system
-/// @access private
-$yiq-threshold: if(
- /* check for existance of bootstrap variable */
- variable-exists("yiq-contrasted-threshold"),
- $yiq-contrasted-threshold,
- /* fallback */
- 150
-) !default;
-
-/// Dark color for use in YIQ color contrast function.
-/// @group color-system
-/// @access private
-$yiq-dark: if(
- /* check for existance of bootstrap variable */
- variable-exists("yiq-text-dark"),
- $yiq-text-dark,
- /* fallback */
- black
-) !default;
-
-/// Light color for use in YIQ color contrast function.
-/// @group color-system
-/// @access private
-$yiq-light: if(
- /* check for existance of bootstrap variable */
- variable-exists("yiq-text-light"),
- $yiq-text-light,
- /* fallback */
- white
-) !default;
-
-$wcag-dark: black !default;
-$wcag-light: white !default;
-
-// Calculate the luminance for a color.
-// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
-@function luminance($color) {
- $red: nth($linear-channel-values, red($color) + 1);
- $green: nth($linear-channel-values, green($color) + 1);
- $blue: nth($linear-channel-values, blue($color) + 1);
-
- @return .2126 * $red + .7152 * $green + .0722 * $blue;
-}
-@function is-dark( $color ) {
- @return if( luminance($color) < .5, true, false );
-}
-@function is-light( $color ) {
- @return if( luminance($color) < .5, false, true );
-}
-
-
-@function color-level($color, $level: 0) {
-
- @if ($level == 0) {
- @return $color;
- }
-
- $base: if($level < 0, #ffffff, #000000);
- $level: abs($level);
-
- @if ( unit($level) == "%" ) {
- @return mix( $base, $color, $level );
- }
-
- @return mix($base, $color, $level * $color-level-step);
-}
-
-@function tint( $color, $level: 1 ) {
- @return color-level( $color, -1 * $level );
-}
-
-@function shade( $color, $level: 1 ) {
- @return color-level( $color, 1 * $level );
-}
-
-@function try-shade( $color, $level: 1 ) {
- $dark-theme: if(variable-exists(dark-theme), $dark-theme, false);
-
- @if $dark-theme {
- @return tint( $color, $level );
- }
-
- @return shade( $color, $level );
-}
-@function try-tint($color, $level: 1) {
- $dark-theme: if(variable-exists(dark-theme), $dark-theme, false);
-
- @if $dark-theme {
- @return shade( $color, $level );
- }
-
- @return tint( $color, $level );
-}
-
-
-@function try-darken( $color, $amount ) {
- $dark-theme: if(variable-exists(dark-theme), $dark-theme, false);
-
- @if $dark-theme {
- @return lighten( $color, $amount );
- }
- @return darken( $color, $amount );
-}
-
-@function try-lighten( $color, $amount ) {
- $dark-theme: if(variable-exists(dark-theme), $dark-theme, false);
-
- @if $dark-theme {
- @return darken( $color, $amount );
- }
- @return lighten( $color, $amount );
-}
-
-
-@function yiq($color) {
- $r: red($color);
- $g: green($color);
- $b: blue($color);
-
- $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
-
- @return $yiq;
-}
-@function contrast-yiq($color, $dark: $yiq-dark, $light: $yiq-light) {
- $yiq: yiq($color);
- $out: if($yiq >= $yiq-threshold, $dark, $light);
- // @debug yiq;
- @return $out;
-}
-@function contrast-wcag($color, $dark: $wcag-dark, $light: $wcag-light) {
- $luma: luminance($color);
- $out: if($luma < .5, $light, $dark);
- // @debug $luma;
- @return $out;
-}
-
-@function true-mix($color1, $color2, $weight: 50%) {
- @return mix(rgba($color1, 1), rgba($color2, 1), $weight);
-}
diff --git a/packages/default/scss/core/functions/_index.scss b/packages/default/scss/core/functions/_index.scss
deleted file mode 100644
index 97d550fed03..00000000000
--- a/packages/default/scss/core/functions/_index.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "_math.scss";
-@import "_colors.scss";
-@import "_misc.scss";
diff --git a/packages/default/scss/core/functions/_math.scss b/packages/default/scss/core/functions/_math.scss
deleted file mode 100644
index 735552f95d0..00000000000
--- a/packages/default/scss/core/functions/_math.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@function decimal-round($float, $digits: 2) {
- $pow: pow(10, $digits);
-
- @return round($float * $pow) / $pow;
-}
-
-@function pow($x, $n) {
- $ret: 1;
-
- @if $n >= 0 {
- @for $i from 1 through $n {
- $ret: $ret * $x;
- }
- } @else {
- @for $i from $n to 0 {
- $ret: $ret / $x;
- }
- }
-
- @return $ret;
-}
diff --git a/packages/default/scss/core/functions/_misc.scss b/packages/default/scss/core/functions/_misc.scss
deleted file mode 100644
index 74906e76670..00000000000
--- a/packages/default/scss/core/functions/_misc.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-$svg-escaped-characters: (
- ("%", "%25"),
- ("<", "%3c"),
- (">", "%3e"),
- ("#", "%23"),
- ("(", "%28"),
- (")", "%29")
-) !default;
-
-// See https://www.sassmeister.com/gist/1b4f2da5527830088e4d
-@function str-replace($string, $search, $replace: "") {
- $index: str-index($string, $search);
-
- @if $index {
- @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
- }
-
- @return $string;
-}
-
-// See https://codepen.io/kevinweber/pen/dXWoRw
-@function escape-svg($string) {
- @if str-index($string, "data:image/svg+xml") {
- @each $char, $encoded in $svg-escaped-characters {
- // Do not escape the url brackets
- @if str-index($string, "url(") == 1 {
- $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
- } @else {
- $string: str-replace($string, $char, $encoded);
- }
- }
- }
-
- @return $string;
-}
diff --git a/packages/default/scss/core/functions/index.import.scss b/packages/default/scss/core/functions/index.import.scss
new file mode 100644
index 00000000000..11cdf684a33
--- /dev/null
+++ b/packages/default/scss/core/functions/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/functions/index.import.scss";
diff --git a/packages/default/scss/core/mixins/_border-radius.scss b/packages/default/scss/core/mixins/_border-radius.scss
deleted file mode 100644
index cc455079ad5..00000000000
--- a/packages/default/scss/core/mixins/_border-radius.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-// Border radius
-@mixin border-radius( $radius: null ) {
- @if $enable-rounded {
- border-radius: $radius;
- }
-}
-
-@mixin border-top-radius( $radius: null ) {
- @if $enable-rounded {
- border-top-left-radius: $radius;
- border-top-right-radius: $radius;
- }
-}
-
-@mixin border-right-radius( $radius: null ) {
- @if $enable-rounded {
- border-top-right-radius: $radius;
- border-bottom-right-radius: $radius;
- }
-}
-
-@mixin border-bottom-radius( $radius: null ) {
- @if $enable-rounded {
- border-bottom-right-radius: $radius;
- border-bottom-left-radius: $radius;
- }
-}
-
-@mixin border-left-radius( $radius: null ) {
- @if $enable-rounded {
- border-top-left-radius: $radius;
- border-bottom-left-radius: $radius;
- }
-}
-
-@mixin border-top-radius-only( $radius: null ) {
- @if $enable-rounded {
- border-radius: $radius $radius 0 0;
- }
-}
-
-@mixin border-right-radius-only( $radius: null ) {
- @if $enable-rounded {
- border-radius: 0 $radius $radius 0;
- }
-}
-
-@mixin border-bottom-radius-only( $radius: null ) {
- @if $enable-rounded {
- border-radius: 0 0 $radius $radius;
- }
-}
-
-@mixin border-left-radius-only( $radius: null ) {
- @if $enable-rounded {
- border-radius: $radius 0 0 $radius;
- }
-}
diff --git a/packages/default/scss/core/mixins/_box-shadow.scss b/packages/default/scss/core/mixins/_box-shadow.scss
deleted file mode 100644
index 67ab4980e73..00000000000
--- a/packages/default/scss/core/mixins/_box-shadow.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@mixin box-shadow( $shadow... ) {
- @if $enable-shadows and nth($shadow, 1) {
- box-shadow: $shadow;
- }
-}
diff --git a/packages/default/scss/core/mixins/_data-uri.scss b/packages/default/scss/core/mixins/_data-uri.scss
deleted file mode 100644
index cae058cb639..00000000000
--- a/packages/default/scss/core/mixins/_data-uri.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-/// A list of files converted to data URIs
-/// @access private
-$data-uris: () !default;
-
-/// Saves a data URI that can be used from the $data-uris map instead of a file reference.
-/// @access private
-/// @param {String} $name - The name of the resource.
-/// @param {String} $content - The data URI of the resource.
-/// @require $data-uris
-@mixin register-data-uri($name, $content) {
- @if (map-has-key($data-uris, $name)) {
- @warn "Attempt to redefine data URI of file `#{$name}`.";
- }
-
- $data-uris: map-merge($data-uris, ($name: $content)) !global;
-}
diff --git a/packages/default/scss/core/mixins/_decoration.scss b/packages/default/scss/core/mixins/_decoration.scss
deleted file mode 100644
index 0c33487a08b..00000000000
--- a/packages/default/scss/core/mixins/_decoration.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-// Fill and outline
-@mixin fill( $color: null, $bg: null, $border: null, $gradient: null ) {
- @if $border {
- border-color: $border;
- }
- @if $color {
- color: $color;
- }
- @if $bg {
- background-color: $bg;
- }
- @if $gradient {
- @include linear-gradient( $gradient );
- }
-}
-@mixin outline( $color: null ) {
- border-color: $color;
- color: $color;
- background-color: transparent;
- background-image: none;
-}
-
-@mixin background-image( $background-image: null ) {
- @if $background-image {
- background-image: url(#{$background-image});
- }
-}
diff --git a/packages/default/scss/core/mixins/_disabled.scss b/packages/default/scss/core/mixins/_disabled.scss
deleted file mode 100644
index a051985ff59..00000000000
--- a/packages/default/scss/core/mixins/_disabled.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-// Disabled
-@mixin disabled( $disabled-styling ) {
- outline: none;
- cursor: default;
- opacity: map-get($disabled-styling, opacity);
- filter: map-get($disabled-styling, filter);
- pointer-events: none;
- box-shadow: none;
-}
-
-@mixin disabled-legacy-ie( $disabled-styling ) {
- outline: none;
- cursor: default;
- opacity: map-get($disabled-styling, opacity);
- box-shadow: none;
-}
diff --git a/packages/default/scss/core/mixins/_gradients.scss b/packages/default/scss/core/mixins/_gradients.scss
deleted file mode 100644
index 5290c04ed6a..00000000000
--- a/packages/default/scss/core/mixins/_gradients.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-@mixin linear-gradient( $gradient: null ) {
- @if $gradient and $enable-gradients {
- @if $gradient == none {
- background-image: none;
- }
- @else {
- background-image: linear-gradient( $gradient );
- }
- }
-}
-
-@mixin striped-gradient( $color: rgba(255,255,255,.15), $angle: 45deg) {
- background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
-}
-
-@mixin checkerboard-gradient( $primary-color: white, $secondary-color: rgba(0, 0, 0, .09), $size: 10px ) {
- $position: calc(#{$size} / 2);
- background:
- linear-gradient(45deg, $secondary-color 25%, transparent 25%, transparent 75%, $secondary-color 75%, $secondary-color 0),
- linear-gradient(45deg, $secondary-color 25%, transparent 25%, transparent 75%, $secondary-color 75%, $secondary-color 0),
- $primary-color;
- background-repeat: repeat, repeat;
- background-position: 0px 0px, $position $position;
- transform-origin: 0 0 0;
- background-origin: padding-box, padding-box;
- background-size: $size $size, $size $size;
- box-shadow: none;
- text-shadow: none;
- transition: none;
- transform: scaleX(1) scaleY(1) scaleZ(1);
-}
-
-@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);
-}
diff --git a/packages/default/scss/core/mixins/_hide-scrollbar.scss b/packages/default/scss/core/mixins/_hide-scrollbar.scss
deleted file mode 100644
index 04c24d15f43..00000000000
--- a/packages/default/scss/core/mixins/_hide-scrollbar.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-// Infinite calendar and timepicker
-@mixin hide-scrollbar($dir: "right", $max-scrollbar: 100px) {
- // anything larger than the scrollbar width will do
- $scrollbar-size: var( --kendo-scrollbar-width, #{$default-scrollbar-width} );
- $margin: calc( -#{$max-scrollbar} - #{$scrollbar-size} );
-
- padding-right: $max-scrollbar;
- padding-left: $max-scrollbar;
-
- @if ($dir == "right") {
- margin-left: -$max-scrollbar;
- margin-right: $margin;
- } @else {
- margin-left: $margin;
- margin-right: -$max-scrollbar;
- }
-}
diff --git a/packages/default/scss/core/mixins/_import-once.scss b/packages/default/scss/core/mixins/_import-once.scss
deleted file mode 100644
index 7886c39ac41..00000000000
--- a/packages/default/scss/core/mixins/_import-once.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-/// A list of exported modules.
-/// @access private
-$imported-modules: () !default;
-
-/// Outputs a module once, no matter how many times it is included.
-/// @access public
-/// @param {String} $name - The name of the exported module.
-/// @require $imported-modules
-@mixin exports($name) {
- @if (index($imported-modules, $name) == null) {
- $imported-modules: append($imported-modules, $name) !global;
- @content;
- }
-}
diff --git a/packages/default/scss/core/mixins/_index.scss b/packages/default/scss/core/mixins/_index.scss
deleted file mode 100644
index 510f47dd901..00000000000
--- a/packages/default/scss/core/mixins/_index.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// Core
-@import "_import-once.scss";
-@import "_data-uri.scss";
-@import "_module-system.scss";
-
-
-// Utils
-@import "_border-radius.scss";
-@import "_box-shadow.scss";
-@import "_disabled.scss";
-@import "_decoration.scss";
-@import "_gradients.scss";
-@import "_typography.scss";
-@import "_hide-scrollbar.scss";
-
diff --git a/packages/default/scss/core/mixins/_module-system.scss b/packages/default/scss/core/mixins/_module-system.scss
deleted file mode 100644
index 20034d6a1c0..00000000000
--- a/packages/default/scss/core/mixins/_module-system.scss
+++ /dev/null
@@ -1,149 +0,0 @@
-// Load all modules by default
-$kendo-components: (
- // Typography and utils
- "typography",
- "utils",
- "cursor",
-
- // Generic content
- "styling",
- "icon",
- "messagebox",
-
- // Primitive components
- "list",
- "listgroup",
- "overlay",
- "popup",
- "ripple",
- "table",
-
- // Indicators
- "avatar",
- "badge",
- "chip",
- "color-preview",
- "loader",
- "loading",
- "skeleton",
-
- // Form helpers
- "form",
- "validator",
- "floating-label",
-
- // Native forms
- "button",
- "input",
- "textbox",
- "textarea",
- "checkbox",
- "listbox",
- "progressbar",
- "radio",
- "slider",
-
- // Form requirements
- "calendar",
-
- // Augmented inputs
- "autocomplete",
- "captcha",
- "color-palette",
- "color-gradient",
- "color-editor",
- "color-picker",
- "combobox",
- "datetime",
- "dropdowngrid",
- "dropdownlist",
- "dropdowntree",
- "maskedtextbox",
- "multiselect",
- "numerictextbox",
- "rating",
- "searchbox",
- "switch",
- "upload",
- "dropzone",
-
- // Command interfaces
- "actions",
- "appbar",
- "fab",
- "menu",
- "toolbar",
-
- // Popups and modals
- "action-sheet",
- "dialog",
- "drawer",
- "notification",
- "popover",
- "responsivepanel",
- "tooltip",
- "window",
-
- // Navigation
- "bottom-nav",
- "breadcrumb",
- "pager",
- "stepper",
- "tabstrip",
- "treeview",
- "wizard",
-
- // Layout & containers
- "card",
- "expander",
- "panelbar",
- "splitter",
- "tilelayout",
-
- // Data management
- "grid",
- "listview",
- "spreadsheet",
- "pivotgrid",
- "treelist",
- "filter",
- "filemanager",
- "taskboard",
-
- // Editors
- "editor",
- "imageeditor",
-
- // Scheduling
- "gantt",
- "scheduler",
-
- // Misc
- "adaptive",
- "chat",
- "mediaplayer",
- "timeline",
- "pdf-viewer",
- "scroller",
- "scrollview",
-
- // Dataviz
- "dataviz",
- "map",
- "orgchart"
-
-) !default;
-
-$_kendo-imported-modules: ();
-
-@mixin register-module( $name: null, $dependencies: null ) {
- @if ( index( $kendo-components, $name ) != null ) and ( index( $_kendo-imported-modules, $name ) == null) {
- $_kendo-imported-modules: append( $_kendo-imported-modules, $name ) !global;
- @content;
- }
-}
-@mixin load-modules( $names... ) {
- @each $name in $names {
- $kendo-components: append( $kendo-components, $name ) !global;
- }
-}
diff --git a/packages/default/scss/core/mixins/_typography.scss b/packages/default/scss/core/mixins/_typography.scss
deleted file mode 100644
index 13126c533eb..00000000000
--- a/packages/default/scss/core/mixins/_typography.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@mixin typography($font-size: null, $font-family: null, $line-height: null, $font-weight: null, $letter-spacing: null) {
- @if $font-size {
- font-size: $font-size;
- }
- @if $font-family {
- font-family: $font-family;
- }
- @if $line-height {
- line-height: $line-height;
- }
- @if $font-weight {
- font-weight: $font-weight;
- }
- @if $letter-spacing {
- letter-spacing: $letter-spacing;
- }
-}
diff --git a/packages/default/scss/core/mixins/index.import.scss b/packages/default/scss/core/mixins/index.import.scss
new file mode 100644
index 00000000000..72c8c7fc1ba
--- /dev/null
+++ b/packages/default/scss/core/mixins/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/mixins/index.import.scss";
diff --git a/packages/default/scss/core/module-system/index.import.scss b/packages/default/scss/core/module-system/index.import.scss
new file mode 100644
index 00000000000..f80356df009
--- /dev/null
+++ b/packages/default/scss/core/module-system/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/module-system/index.import.scss";
diff --git a/packages/default/scss/core/styles/index.import.scss b/packages/default/scss/core/styles/index.import.scss
new file mode 100644
index 00000000000..f098a4cf466
--- /dev/null
+++ b/packages/default/scss/core/styles/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/styles/index.import.scss";
diff --git a/packages/default/scss/dataviz/_layout.scss b/packages/default/scss/dataviz/_layout.scss
index b7a3f015105..034e9198ddb 100644
--- a/packages/default/scss/dataviz/_layout.scss
+++ b/packages/default/scss/dataviz/_layout.scss
@@ -462,7 +462,7 @@
series-30: $series-30,
gauge-pointer: $primary,
- gauge-track: try-shade( $chart-bg )
+ gauge-track: k-try-shade( $chart-bg )
);
@each $name, $value in $exported {
diff --git a/packages/default/scss/dataviz/_variables.scss b/packages/default/scss/dataviz/_variables.scss
index 969b5afcc70..343b6e7d2b0 100644
--- a/packages/default/scss/dataviz/_variables.scss
+++ b/packages/default/scss/dataviz/_variables.scss
@@ -115,7 +115,7 @@ $chart-border: $component-border !default;
$chart-crosshair-background: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
$chart-crosshair-shared-tooltip-color: $chart-text !default;
-$chart-crosshair-shared-tooltip-background: try-shade( $chart-bg, 1 ) !default;
+$chart-crosshair-shared-tooltip-background: k-try-shade( $chart-bg, 1 ) !default;
$chart-crosshair-shared-tooltip-border: rgba( if( $dark-theme, $white, $black ), .08) !default;
$chart-notes-background: rgba( if( $dark-theme, $white, $black ), .5 ) !default;
diff --git a/packages/default/scss/dialog/_theme.scss b/packages/default/scss/dialog/_theme.scss
index 73e6668f70f..6e715190cd2 100644
--- a/packages/default/scss/dialog/_theme.scss
+++ b/packages/default/scss/dialog/_theme.scss
@@ -11,7 +11,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;
}
}
diff --git a/packages/default/scss/dropzone/_variables.scss b/packages/default/scss/dropzone/_variables.scss
index 59c09a4ebbf..b728ee8f64a 100644
--- a/packages/default/scss/dropzone/_variables.scss
+++ b/packages/default/scss/dropzone/_variables.scss
@@ -14,7 +14,7 @@ $dropzone-border: $base-border !default;
$dropzone-icon-size: ( $icon-size * 3 ) !default;
$dropzone-icon-spacing: map-get( $spacing, 6 ) !default;
-$dropzone-icon-text: try-tint( $dropzone-text, 4 ) !default;
+$dropzone-icon-text: k-try-tint( $dropzone-text, 4 ) !default;
$dropzone-icon-hover-text: $primary !default;
$dropzone-hint-font-size: null !default;
diff --git a/packages/default/scss/fab/_theme.scss b/packages/default/scss/fab/_theme.scss
index 1e6bb422572..8507e78e068 100644
--- a/packages/default/scss/fab/_theme.scss
+++ b/packages/default/scss/fab/_theme.scss
@@ -7,7 +7,7 @@
outline: $kendo-fab-border-width solid $color;
outline-offset: -$kendo-fab-border-width;
border-color: $color;
- color: contrast-wcag( $color );
+ color: k-contrast-legacy( $color );
background-color: $color;
}
}
@@ -16,8 +16,8 @@
@each $name, $color in $kendo-fab-theme-colors {
.k-hover.k-fab-solid-#{$name},
.k-fab-solid-#{$name}:hover {
- border-color: try-shade( $color, .5 );
- background-color: try-shade( $color, .5 );
+ border-color: k-try-shade( $color, .5 );
+ background-color: k-try-shade( $color, .5 );
}
}
@@ -37,8 +37,8 @@
.k-selected.k-fab-solid-#{$name},
.k-fab-solid-#{$name}:active {
@include box-shadow($kendo-fab-active-shadow);
- border-color: try-shade( $color, 1.5);
- background-color: try-shade( $color, 1.5);
+ border-color: k-try-shade( $color, 1.5);
+ background-color: k-try-shade( $color, 1.5);
}
}
@@ -47,8 +47,8 @@
.k-disabled.k-fab-solid-#{$name},
.k-fab-solid-#{$name}:disabled {
@include box-shadow($kendo-fab-disabled-shadow);
- background-color: try-tint( $color, 5 );
- color: try-tint( contrast-wcag( $color ), 5 );
+ background-color: k-try-tint( $color, 5 );
+ color: k-try-tint( k-contrast-legacy( $color ), 5 );
opacity: 1;
}
}
@@ -77,8 +77,8 @@
// Hover state
.k-fab-item.k-hover .k-fab-item-icon,
.k-fab-item:hover .k-fab-item-icon {
- border-color: try-shade( $kendo-fab-item-icon-border, .5 );
- background-color: try-shade( $kendo-fab-item-icon-bg, .5 );
+ border-color: k-try-shade( $kendo-fab-item-icon-border, .5 );
+ background-color: k-try-shade( $kendo-fab-item-icon-bg, .5 );
}
// Focus state
@@ -95,8 +95,8 @@
.k-fab-item.k-active .k-fab-item-icon,
.k-fab-item:active .k-fab-item-icon {
@include box-shadow($kendo-fab-item-active-shadow);
- border-color: try-shade( $kendo-fab-item-icon-border, 1);
- background-color: try-shade( $kendo-fab-item-icon-bg, 1);
+ border-color: k-try-shade( $kendo-fab-item-icon-border, 1);
+ background-color: k-try-shade( $kendo-fab-item-icon-bg, 1);
}
// Disabled state
@@ -107,8 +107,8 @@
.k-fab-item-text,
.k-fab-item-icon {
@include box-shadow($kendo-fab-item-disabled-shadow);
- background-color: try-tint( $kendo-fab-item-bg, 5 );
- color: try-tint( $kendo-fab-item-text, 5 );
+ background-color: k-try-tint( $kendo-fab-item-bg, 5 );
+ color: k-try-tint( $kendo-fab-item-text, 5 );
}
}
diff --git a/packages/default/scss/fab/_variables.scss b/packages/default/scss/fab/_variables.scss
index 7504d91df00..fb28d81497a 100644
--- a/packages/default/scss/fab/_variables.scss
+++ b/packages/default/scss/fab/_variables.scss
@@ -95,7 +95,7 @@ $kendo-fab-theme-colors: $kendo-theme-colors !default;
$kendo-fab-shadow: 0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2) !default;
/// The disabled shadow of the FAB.
/// @group floating-action-button
-$kendo-fab-disabled-shadow: 0 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px try-tint( rgba(0, 0, 0, .2), .5 ) !default;
+$kendo-fab-disabled-shadow: 0 6px 10px k-try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px k-try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px k-try-tint( rgba(0, 0, 0, .2), .5 ) !default;
/// The active shadow of the FAB.
/// @group floating-action-button
$kendo-fab-active-shadow: null !default;
diff --git a/packages/default/scss/filemanager/_variables.scss b/packages/default/scss/filemanager/_variables.scss
index 255f0610150..3ad305d853b 100644
--- a/packages/default/scss/filemanager/_variables.scss
+++ b/packages/default/scss/filemanager/_variables.scss
@@ -43,7 +43,7 @@ $filemanager-listview-item-border: null !default;
$filemanager-listview-item-icon-size: ($icon-size * 3) !default;
$filemanager-listview-item-icon-bg: null !default;
-$filemanager-listview-item-icon-text: try-tint($filemanager-text, 4) !default;
+$filemanager-listview-item-icon-text: k-try-tint($filemanager-text, 4) !default;
$filemanager-listview-item-icon-border: null !default;
$filemanager-listview-item-icon-selected-bg: null !default;
$filemanager-listview-item-icon-selected-text: inherit !default;
@@ -65,5 +65,5 @@ $filemanager-preview-border: null !default;
$filemanager-preview-icon-size: ($icon-size * 6) !default;
$filemanager-preview-icon-bg: null !default;
-$filemanager-preview-icon-text: try-tint($filemanager-text, 4) !default;
+$filemanager-preview-icon-text: k-try-tint($filemanager-text, 4) !default;
$filemanager-preview-icon-border: null !default;
diff --git a/packages/default/scss/forms/_variables.scss b/packages/default/scss/forms/_variables.scss
index d823f5b99b8..efc3005a2ae 100644
--- a/packages/default/scss/forms/_variables.scss
+++ b/packages/default/scss/forms/_variables.scss
@@ -61,7 +61,7 @@ $kendo-fieldset-text: null !default;
$kendo-fieldset-border: null !default;
$kendo-fieldset-legend-bg: null !default;
-$kendo-fieldset-legend-text: try-shade( $body-text, 2 ) !default;
+$kendo-fieldset-legend-text: k-try-shade( $body-text, 2 ) !default;
$kendo-fieldset-legend-border: null !default;
// Sizes
diff --git a/packages/default/scss/gantt/_variables.scss b/packages/default/scss/gantt/_variables.scss
index 3092b643a97..8375ab5eda5 100644
--- a/packages/default/scss/gantt/_variables.scss
+++ b/packages/default/scss/gantt/_variables.scss
@@ -12,12 +12,12 @@ $gantt-treelist-bg: null !default;
$gantt-treelist-text: null !default;
$gantt-treelist-border: null !default;
-$gantt-nonwork-bg: rgba( contrast-wcag( $gantt-bg ), .025 ) !default;
+$gantt-nonwork-bg: rgba( k-contrast-legacy( $gantt-bg ), .025 ) !default;
$gantt-nonwork-text: null !default;
$gantt-nonwork-border: null !default;
$gantt-line-size: 2px !default;
-$gantt-line-fill: contrast-wcag( $gantt-bg ) !default;
+$gantt-line-fill: k-contrast-legacy( $gantt-bg ) !default;
$gantt-line-selected-fill: $primary !default;
$gantt-dot-size: 8px !default;
@@ -32,19 +32,19 @@ $gantt-milestone-border: $gantt-border !default;
$gantt-milestone-selected-bg: $selected-bg !default;
$gantt-milestone-selected-border: $selected-border !default;
-$gantt-summary-bg: try-tint( $gantt-text, 1 ) !default;
-$gantt-summary-progress-bg: try-shade( $gantt-text, 5 ) !default;
-$gantt-summary-selected-bg: try-tint( $selected-bg, 6 ) !default;
+$gantt-summary-bg: k-try-tint( $gantt-text, 1 ) !default;
+$gantt-summary-progress-bg: k-try-shade( $gantt-text, 5 ) !default;
+$gantt-summary-selected-bg: k-try-tint( $selected-bg, 6 ) !default;
$gantt-summary-progress-selected-bg: $selected-bg !default;
$gantt-task-border-width: 0px !default;
$gantt-task-padding-x: map-get( $spacing, 2 ) !default;
$gantt-task-padding-y: map-get( $spacing, 1 ) !default;
-$gantt-task-bg: try-tint( $gantt-text, 2 ) !default;
-$gantt-task-text: contrast-wcag( $gantt-text ) !default;
+$gantt-task-bg: k-try-tint( $gantt-text, 2 ) !default;
+$gantt-task-text: k-contrast-legacy( $gantt-text ) !default;
$gantt-task-border: null !default;
$gantt-task-progress-bg: $gantt-text !default;
-$gantt-task-selected-bg: try-tint( $selected-bg, 6 ) !default;
+$gantt-task-selected-bg: k-try-tint( $selected-bg, 6 ) !default;
$gantt-task-selected-text: $selected-text !default;
$gantt-task-selected-border: null !default;
$gantt-task-progress-selected-bg: $selected-bg !default;
@@ -78,10 +78,10 @@ $gantt-planned-bg: $primary !default;
$gantt-planned-border: $gantt-planned-bg !default;
$gantt-delayed-bg: $error !default;
-$gantt-delayed-bg-lighter: tint($gantt-delayed-bg, 5) !default;
+$gantt-delayed-bg-lighter: k-color-tint($gantt-delayed-bg, 5) !default;
$gantt-advanced-bg: $success !default;
-$gantt-advanced-bg-lighter: tint($gantt-advanced-bg, 5) !default;
+$gantt-advanced-bg-lighter: k-color-tint($gantt-advanced-bg, 5) !default;
$gantt-action-on-offset-text: #000000 !default;
$gantt-offset-resize-handler-top: 50% !default;
diff --git a/packages/default/scss/grid/_theme.scss b/packages/default/scss/grid/_theme.scss
index 6198fbac16b..33901f6b778 100644
--- a/packages/default/scss/grid/_theme.scss
+++ b/packages/default/scss/grid/_theme.scss
@@ -1,7 +1,7 @@
@include exports("grid/theme") {
$tooltip-bg: $primary !default;
- $tooltip-text: contrast-wcag($primary) !default;
+ $tooltip-text: k-contrast-legacy($primary) !default;
.k-grid-header,
.k-header,
diff --git a/packages/default/scss/grid/_variables.scss b/packages/default/scss/grid/_variables.scss
index 8a92fcdd38e..8e4d7552593 100644
--- a/packages/default/scss/grid/_variables.scss
+++ b/packages/default/scss/grid/_variables.scss
@@ -64,7 +64,7 @@ $grid-footer-border: $grid-header-border !default;
/// Background color of alternating rows in grid
/// @group grid
-$grid-alt-bg: rgba( contrast-wcag( $grid-bg ), .04 ) !default;
+$grid-alt-bg: rgba( k-contrast-legacy( $grid-bg ), .04 ) !default;
/// Text color of alternating rows in grid
/// @group grid
$grid-alt-text: null !default;
@@ -92,13 +92,13 @@ $grid-selected-text: null !default;
/// @group grid
$grid-selected-border: null !default;
-$grid-selected-alt-bg: shade($grid-selected-bg, .4) !default;
-$grid-selected-hovered-bg: shade($grid-selected-bg, .7) !default;
+$grid-selected-alt-bg: k-color-shade($grid-selected-bg, .4) !default;
+$grid-selected-hovered-bg: k-color-shade($grid-selected-bg, .7) !default;
$grid-grouping-row-bg: $base-bg !default;
$grid-grouping-row-text: $grid-text !default;
-$grid-sorted-bg: rgba( contrast-wcag( $grid-bg ), .02 ) !default;
+$grid-sorted-bg: rgba( k-contrast-legacy( $grid-bg ), .02 ) !default;
$grid-sorting-indicator-text: $primary !default;
$grid-sorting-index-font-size: $font-size-sm !default;
$grid-sorting-index-height: $icon-size !default;
@@ -117,7 +117,7 @@ $grid-sticky-bg: $component-bg !default;
$grid-sticky-text: $grid-text !default;
$grid-sticky-border: rgba( black, .3 ) !default;
-$grid-sticky-alt-bg: shade($grid-bg, 3.5%) !default;
+$grid-sticky-alt-bg: k-color-shade($grid-bg, 3.5%) !default;
$grid-sticky-header-bg: $grid-header-bg !default;
$grid-sticky-header-text: $grid-header-text !default;
@@ -127,10 +127,10 @@ $grid-sticky-footer-bg: $grid-header-bg !default;
$grid-sticky-footer-hovered-bg: $grid-hovered-bg !default;
$grid-sticky-selected-bg: mix($selected-bg, #ffffff, 25%) !default;
-$grid-sticky-selected-alt-bg: shade($grid-sticky-selected-bg, .4) !default;
+$grid-sticky-selected-alt-bg: k-color-shade($grid-sticky-selected-bg, .4) !default;
$grid-sticky-hovered-bg: darken($grid-bg, 8%) !default;
-$grid-sticky-selected-hovered-bg: shade($grid-sticky-selected-bg, .7) !default;
+$grid-sticky-selected-hovered-bg: k-color-shade($grid-sticky-selected-bg, .7) !default;
$grid-column-menu-width: 230px !default;
diff --git a/packages/default/scss/input/_variables.scss b/packages/default/scss/input/_variables.scss
index eb61c602b58..57b07aad26d 100644
--- a/packages/default/scss/input/_variables.scss
+++ b/packages/default/scss/input/_variables.scss
@@ -149,7 +149,7 @@ $kendo-picker-outline-text: $kendo-button-text !default;
$kendo-picker-outline-border: rgba( $kendo-picker-outline-text, .5) !default;
$kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default;
-$kendo-picker-outline-hover-text: contrast-wcag( $kendo-picker-outline-hover-bg ) !default;
+$kendo-picker-outline-hover-text: k-contrast-legacy( $kendo-picker-outline-hover-bg ) !default;
$kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default;
$kendo-picker-outline-focus-bg: null !default;
diff --git a/packages/default/scss/list/_theme.scss b/packages/default/scss/list/_theme.scss
index 3f2f6e8a7ee..20f1e4367e0 100644
--- a/packages/default/scss/list/_theme.scss
+++ b/packages/default/scss/list/_theme.scss
@@ -58,7 +58,7 @@
&.k-selected:hover,
&.k-selected.k-hover {
color: $kendo-list-item-selected-text;
- background-color: shade( $kendo-list-item-selected-bg );
+ background-color: k-color-shade( $kendo-list-item-selected-bg );
}
}
diff --git a/packages/default/scss/messagebox/_theme.scss b/packages/default/scss/messagebox/_theme.scss
index 056632244d5..7c8f9aea759 100644
--- a/packages/default/scss/messagebox/_theme.scss
+++ b/packages/default/scss/messagebox/_theme.scss
@@ -3,9 +3,9 @@
@each $color-name, $color in $kendo-theme-colors {
.k-messagebox-#{$color-name} {
@include fill(
- color-level( $color, $message-box-text-level ),
- color-level( $color, $message-box-bg-level ),
- color-level( $color, $message-box-border-level )
+ k-color-level( $color, $message-box-text-level ),
+ k-color-level( $color, $message-box-bg-level ),
+ k-color-level( $color, $message-box-border-level )
);
}
}
diff --git a/packages/default/scss/notification/_variables.scss b/packages/default/scss/notification/_variables.scss
index 2b1040780a0..dde52844518 100644
--- a/packages/default/scss/notification/_variables.scss
+++ b/packages/default/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: map-merge(( $name: (
- color: contrast-wcag( $color ),
+ color: k-contrast-legacy( $color ),
background-color: $color,
border: $color,
)), $_theme );
diff --git a/packages/default/scss/panelbar/_variables.scss b/packages/default/scss/panelbar/_variables.scss
index 209c191b9e3..7be4e3500de 100644
--- a/packages/default/scss/panelbar/_variables.scss
+++ b/packages/default/scss/panelbar/_variables.scss
@@ -26,7 +26,7 @@ $panelbar-header-text: $link-text !default;
$panelbar-header-border: null !default;
$panelbar-header-gradient: null !default;
-$panelbar-header-hovered-bg: try-shade( $panelbar-header-bg, .5 ) !default;
+$panelbar-header-hovered-bg: k-try-shade( $panelbar-header-bg, .5 ) !default;
$panelbar-header-hovered-text: null !default;
$panelbar-header-hovered-border: null !default;
$panelbar-header-hovered-gradient: null !default;
@@ -47,7 +47,7 @@ $panelbar-header-selected-text: $selected-text !default;
$panelbar-header-selected-border: null !default;
$panelbar-header-selected-gradient: null !default;
-$panelbar-header-selected-hovered-bg: try-shade( $panelbar-header-selected-bg ) !default;
+$panelbar-header-selected-hovered-bg: k-try-shade( $panelbar-header-selected-bg ) !default;
$panelbar-header-selected-hovered-text: null !default;
$panelbar-header-selected-hovered-border: null !default;
$panelbar-header-selected-hovered-gradient: null !default;
@@ -62,7 +62,7 @@ $panelbar-header-selected-hovered-focused-text: null !default;
$panelbar-header-selected-hovered-focused-border: null !default;
$panelbar-header-selected-hovered-focused-gradient: null !default;
-$panelbar-item-hovered-bg: try-shade( $panelbar-bg, .5 ) !default;
+$panelbar-item-hovered-bg: k-try-shade( $panelbar-bg, .5 ) !default;
$panelbar-item-hovered-text: null !default;
$panelbar-item-hovered-border: null !default;
$panelbar-item-hovered-gradient: null !default;
@@ -83,7 +83,7 @@ $panelbar-item-selected-text: $selected-text !default;
$panelbar-item-selected-border: null !default;
$panelbar-item-selected-gradient: null !default;
-$panelbar-item-selected-hovered-bg: try-shade( $panelbar-item-selected-bg ) !default;
+$panelbar-item-selected-hovered-bg: k-try-shade( $panelbar-item-selected-bg ) !default;
$panelbar-item-selected-hovered-text: null !default;
$panelbar-item-selected-hovered-border: null !default;
$panelbar-item-selected-hovered-gradient: null !default;
diff --git a/packages/default/scss/pivotgrid/_variables.scss b/packages/default/scss/pivotgrid/_variables.scss
index 441def55913..4c0cb5d8b88 100644
--- a/packages/default/scss/pivotgrid/_variables.scss
+++ b/packages/default/scss/pivotgrid/_variables.scss
@@ -19,13 +19,13 @@ $pivotgrid-bg: $component-bg !default;
$pivotgrid-text: $component-text !default;
$pivotgrid-border: $component-border !default;
-$pivotgrid-alt-border: try-shade($pivotgrid-border, 2) !default;
+$pivotgrid-alt-border: k-try-shade($pivotgrid-border, 2) !default;
$pivotgrid-headers-bg: $header-bg !default;
$pivotgrid-headers-text: $header-text !default;
$pivotgrid-headers-border: $header-border !default;
-$pivotgrid-total-bg: try-shade( $pivotgrid-bg, 1 ) !default;
+$pivotgrid-total-bg: k-try-shade( $pivotgrid-bg, 1 ) !default;
$pivotgrid-total-text: $header-text !default;
$pivotgrid-total-border: $header-border !default;
@@ -101,7 +101,7 @@ $pivotgrid-alt-text: $grid-header-text !default;
$pivotgrid-chrome-border: $grid-border !default;
$pivotgrid-container-bg: $component-bg !default;
-$pivotgrid-row-headers-bg: try-shade( $component-bg, 1 ) !default;
+$pivotgrid-row-headers-bg: k-try-shade( $component-bg, 1 ) !default;
$pivotgrid-button-bg: null !default;
$pivotgrid-button-text: null !default;
diff --git a/packages/default/scss/progressbar/_theme.scss b/packages/default/scss/progressbar/_theme.scss
index f6481035767..95c9e2d4c86 100644
--- a/packages/default/scss/progressbar/_theme.scss
+++ b/packages/default/scss/progressbar/_theme.scss
@@ -29,7 +29,7 @@
.k-progressbar-indeterminate {
@include fill( $kendo-progressbar-indeterminate-text, $kendo-progressbar-indeterminate-bg, $kendo-progressbar-indeterminate-border );
- @include striped-gradient( shade($kendo-progressbar-indeterminate-bg) );
+ @include striped-gradient( k-color-shade($kendo-progressbar-indeterminate-bg) );
background-size: $kendo-progressbar-height $kendo-progressbar-height;
animation: kendo-progressbar-indeterminate-animation $kendo-progressbar-animation-timing;
}
diff --git a/packages/default/scss/progressbar/_variables.scss b/packages/default/scss/progressbar/_variables.scss
index da194c188f1..cbda1d9f1dd 100644
--- a/packages/default/scss/progressbar/_variables.scss
+++ b/packages/default/scss/progressbar/_variables.scss
@@ -23,7 +23,7 @@ $kendo-progressbar-font-size: $font-size-sm !default;
$kendo-progressbar-line-height: 1 !default;
/// Background color of the progressbar.
/// @group progressbar
-$kendo-progressbar-bg: try-shade( $component-bg, 1 ) !default;
+$kendo-progressbar-bg: k-try-shade( $component-bg, 1 ) !default;
/// Text color of the progressbar.
/// @group progressbar
$kendo-progressbar-text: $component-text !default;
@@ -39,10 +39,10 @@ $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: try-shade( $kendo-progressbar-value-bg ) !default;
+$kendo-progressbar-value-border: k-try-shade( $kendo-progressbar-value-bg ) !default;
/// Progress background gradient of the progressbar.
/// @group progressbar
$kendo-progressbar-value-gradient: null !default;
diff --git a/packages/default/scss/radio/_variables.scss b/packages/default/scss/radio/_variables.scss
index 483628fbb70..04d63e2aaed 100644
--- a/packages/default/scss/radio/_variables.scss
+++ b/packages/default/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,") ) !default;
+$kendo-radio-checked-image: k-escape-svg( url("data:image/svg+xml,") ) !default;
/// Image of disabled and checked radio button indicator.
/// @group radio
$kendo-radio-disabled-checked-image: null !default;
diff --git a/packages/default/scss/scheduler/_theme.scss b/packages/default/scss/scheduler/_theme.scss
index 13c997be099..f6d73c8e2bf 100644
--- a/packages/default/scss/scheduler/_theme.scss
+++ b/packages/default/scss/scheduler/_theme.scss
@@ -127,7 +127,7 @@
}
}
.k-event-inverse {
- color: contrast-wcag( $scheduler-event-text );
+ color: k-contrast-legacy( $scheduler-event-text );
}
.k-event-ongoing {
@include box-shadow( $scheduler-event-ongoing-shadow );
diff --git a/packages/default/scss/scheduler/_variables.scss b/packages/default/scss/scheduler/_variables.scss
index 0cd598366ad..09e2a7090a1 100644
--- a/packages/default/scss/scheduler/_variables.scss
+++ b/packages/default/scss/scheduler/_variables.scss
@@ -22,7 +22,7 @@ $scheduler-event-min-height: 25px !default;
$scheduler-event-border-radius: $kendo-border-radius-md !default;
$scheduler-event-line-height: calc( #{$scheduler-event-min-height} - (2 * #{$padding-y}) ) !default;
-$scheduler-event-bg: tint( $selected-bg, 2 ) !default;
+$scheduler-event-bg: k-color-tint( $selected-bg, 2 ) !default;
$scheduler-event-text: $selected-text !default;
$scheduler-event-border: null !default;
$scheduler-event-gradient: null !default;
@@ -50,13 +50,13 @@ $scheduler-timecolumn-width: 11em !default;
$scheduler-current-time-color: #ff0000 !default;
-$scheduler-nonwork-bg: try-shade( $scheduler-bg, .5 ) !default;
+$scheduler-nonwork-bg: k-try-shade( $scheduler-bg, .5 ) !default;
$scheduler-nonwork-text: null !default;
$scheduler-weekend-bg: null !default;
$scheduler-weekend-text: null !default;
-$scheduler-othermonth-bg: try-shade( $scheduler-bg, .5 ) !default;
+$scheduler-othermonth-bg: k-try-shade( $scheduler-bg, .5 ) !default;
$scheduler-othermonth-text: null !default;
$scheduler-yearview-padding-x: map-get( $spacing, 3 ) !default;
diff --git a/packages/default/scss/slider/_variables.scss b/packages/default/scss/slider/_variables.scss
index 0f7fdca258c..f3f345abe38 100644
--- a/packages/default/scss/slider/_variables.scss
+++ b/packages/default/scss/slider/_variables.scss
@@ -19,18 +19,18 @@ $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: $primary !default;
$slider-draghandle-gradient: null !default;
-$slider-draghandle-hovered-bg: try-shade( $primary , .5 ) !default;
+$slider-draghandle-hovered-bg: k-try-shade( $primary , .5 ) !default;
$slider-draghandle-hovered-text: null !default;
$slider-draghandle-hovered-border: $primary !default;
$slider-draghandle-hovered-gradient: null !default;
-$slider-draghandle-pressed-bg: try-shade( $primary , 1.5 ) !default;
+$slider-draghandle-pressed-bg: k-try-shade( $primary , 1.5 ) !default;
$slider-draghandle-pressed-text: null !default;
-$slider-draghandle-pressed-border: try-shade( $primary , 1.5 ) !default;
+$slider-draghandle-pressed-border: k-try-shade( $primary , 1.5 ) !default;
$slider-draghandle-pressed-gradient: null !default;
$slider-draghandle-focused-shadow: 0 0 0 2px rgba( $primary , .3 ) !default;
@@ -40,6 +40,6 @@ $slider-transition-function: ease-out !default;
$slider-draghandle-transition-speed: .4s !default;
$slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !default;
-$slider-track-bg: try-shade( $component-bg, 1 ) !default;
+$slider-track-bg: k-try-shade( $component-bg, 1 ) !default;
$slider-selection-bg: $primary !default;
$slider-disabled-opacity: null !default;
diff --git a/packages/default/scss/splitter/_variables.scss b/packages/default/scss/splitter/_variables.scss
index 205e3915f3a..0e0581066ce 100644
--- a/packages/default/scss/splitter/_variables.scss
+++ b/packages/default/scss/splitter/_variables.scss
@@ -17,7 +17,7 @@ $splitter-drag-icon-margin: 7px !default;
$splitbar-bg: $base-bg !default;
$splitbar-text: $base-text !default;
-$splitbar-hover-bg: try-shade( $splitbar-bg, .5 ) !default;
+$splitbar-hover-bg: k-try-shade( $splitbar-bg, .5 ) !default;
$splitbar-hover-text: $splitbar-text !default;
$splitbar-selected-bg: $selected-bg !default;
diff --git a/packages/default/scss/stepper/_variables.scss b/packages/default/scss/stepper/_variables.scss
index 938e77f3c8e..90d4bbc673a 100644
--- a/packages/default/scss/stepper/_variables.scss
+++ b/packages/default/scss/stepper/_variables.scss
@@ -33,7 +33,7 @@ $stepper-indicator-bg: $component-bg !default;
$stepper-indicator-text: $component-text !default;
$stepper-indicator-border: #cccccc !default;
-$stepper-indicator-hover-bg: try-shade( $stepper-indicator-bg ) !default;
+$stepper-indicator-hover-bg: k-try-shade( $stepper-indicator-bg ) !default;
$stepper-indicator-hover-text: null !default;
$stepper-indicator-hover-border: null !default;
@@ -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: try-shade( $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: 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;
@@ -68,7 +68,7 @@ $stepper-indicator-current-disabled-border: $stepper-indicator-done-disabled-bor
$stepper-label-text: null !default;
$stepper-label-success-text: $success !default;
$stepper-label-error-text: $error !default;
-$stepper-label-hover-text: try-shade( $stepper-text, 2 ) !default;
+$stepper-label-hover-text: k-try-shade( $stepper-text, 2 ) !default;
$stepper-label-disabled-text: $disabled-text !default;
$stepper-optional-label-text: $subtle-text !default;
diff --git a/packages/default/scss/switch/_variables.scss b/packages/default/scss/switch/_variables.scss
index d399bfcdb78..e41ad268de8 100644
--- a/packages/default/scss/switch/_variables.scss
+++ b/packages/default/scss/switch/_variables.scss
@@ -35,7 +35,7 @@ $kendo-switch-off-track-bg: $component-bg !default;
$kendo-switch-off-track-text: $component-text !default;
/// The border color of the track when the switch is not checked.
/// @group switch
-$kendo-switch-off-track-border: try-shade( $kendo-switch-off-track-bg, 8% ) !default;
+$kendo-switch-off-track-border: k-try-shade( $kendo-switch-off-track-bg, 8% ) !default;
/// The background gradient of the track when the switch is not checked.
/// @group switch
$kendo-switch-off-track-gradient: null !default;
@@ -114,7 +114,7 @@ $kendo-switch-off-thumb-hover-gradient: null !default;
$kendo-switch-on-track-bg: $primary !default;
/// The text color of the track when the switch is checked.
/// @group switch
-$kendo-switch-on-track-text: contrast-wcag( $kendo-switch-on-track-bg ) !default;
+$kendo-switch-on-track-text: k-contrast-legacy( $kendo-switch-on-track-bg ) !default;
/// The border color of the track when the switch is checked.
/// @group switch
$kendo-switch-on-track-border: $kendo-switch-on-track-bg !default;
diff --git a/packages/default/scss/taskboard/_variables.scss b/packages/default/scss/taskboard/_variables.scss
index 0a40fc83a4a..0e74c338573 100644
--- a/packages/default/scss/taskboard/_variables.scss
+++ b/packages/default/scss/taskboard/_variables.scss
@@ -33,7 +33,7 @@ $taskboard-column-border: transparent !default;
$taskboard-column-focus-bg: null !default;
$taskboard-column-focus-text: null !default;
-$taskboard-column-focus-border: try-shade( $base-border, 2.5 ) !default;
+$taskboard-column-focus-border: k-try-shade( $base-border, 2.5 ) !default;
$taskboard-column-header-padding-y: ( $taskboard-spacer / 2 ) !default;
$taskboard-column-header-padding-x: $taskboard-column-header-padding-y !default;
@@ -76,12 +76,12 @@ $taskboard-card-border: $card-border !default;
$taskboard-card-category-border-width: 4px !default;
-$taskboard-card-focus-border: try-shade( $taskboard-card-border, 18% ) !default;
+$taskboard-card-focus-border: k-try-shade( $taskboard-card-border, 18% ) !default;
$taskboard-card-focus-shadow: none !default;
-$taskboard-card-hover-border: try-shade( $taskboard-card-border, 10% ) !default;
+$taskboard-card-hover-border: k-try-shade( $taskboard-card-border, 10% ) !default;
-$taskboard-card-selected-border: tint( $primary-lighter, 5 ) !default;
+$taskboard-card-selected-border: k-color-tint( $primary-lighter, 5 ) !default;
$taskboard-card-selected-shadow: none !default;
$taskboard-card-header-text: $primary !default;
diff --git a/packages/default/scss/timeline/_variables.scss b/packages/default/scss/timeline/_variables.scss
index 02ebef60771..92d69fcaeea 100644
--- a/packages/default/scss/timeline/_variables.scss
+++ b/packages/default/scss/timeline/_variables.scss
@@ -13,9 +13,9 @@ $timeline-mobile-spacing-y: 16px !default;
$timeline-track-arrow-width: 30px !default;
$timeline-track-arrow-height: 30px !default;
-$timeline-track-arrow-disabled-bg: true-mix($kendo-button-bg, $body-bg, 65%) !default;
-$timeline-track-arrow-disabled-text: true-mix($kendo-button-text, $body-bg, 65%) !default;
-$timeline-track-arrow-disabled-border: true-mix(#000000, $body-bg, 4.8%) !default;
+$timeline-track-arrow-disabled-bg: k-true-mix($kendo-button-bg, $body-bg, 65%) !default;
+$timeline-track-arrow-disabled-text: k-true-mix($kendo-button-text, $body-bg, 65%) !default;
+$timeline-track-arrow-disabled-border: k-true-mix(#000000, $body-bg, 4.8%) !default;
$timeline-track-size: 6px !default;
$timeline-track-wrap-padding-bottom: ($timeline-track-size / 2) !default;
@@ -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;
diff --git a/packages/default/scss/tooltip/_variables.scss b/packages/default/scss/tooltip/_variables.scss
index 81e16459458..a396622131a 100644
--- a/packages/default/scss/tooltip/_variables.scss
+++ b/packages/default/scss/tooltip/_variables.scss
@@ -14,22 +14,22 @@ $tooltip-title-line-height: 1 !default;
$tooltip-callout-size: 6px !default;
-$tooltip-bg: rgba( contrast-wcag( $body-bg ), .75 ) !default;
-$tooltip-text: contrast-wcag( $tooltip-bg ) !default;
+$tooltip-bg: rgba( k-contrast-legacy( $body-bg ), .75 ) !default;
+$tooltip-text: k-contrast-legacy( $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: contrast-wcag( $tooltip-info-bg ) !default;
+$tooltip-info-text: k-contrast-legacy( $tooltip-info-bg ) !default;
$tooltip-info-border: $tooltip-info-bg !default;
$tooltip-success-bg: $success !default;
-$tooltip-success-text: contrast-wcag( $tooltip-success-bg ) !default;
+$tooltip-success-text: k-contrast-legacy( $tooltip-success-bg ) !default;
$tooltip-success-border: $tooltip-success-bg !default;
$tooltip-warning-bg: $warning !default;
-$tooltip-warning-text: contrast-wcag( $tooltip-warning-bg ) !default;
+$tooltip-warning-text: k-contrast-legacy( $tooltip-warning-bg ) !default;
$tooltip-warning-border: $tooltip-warning-bg !default;
$tooltip-error-bg: $error !default;
-$tooltip-error-text: contrast-wcag( $tooltip-error-bg ) !default;
+$tooltip-error-text: k-contrast-legacy( $tooltip-error-bg ) !default;
$tooltip-error-border: $tooltip-error-bg !default;
diff --git a/packages/default/scss/window/_theme.scss b/packages/default/scss/window/_theme.scss
index ac0c5ce134d..6e4f32a47d0 100644
--- a/packages/default/scss/window/_theme.scss
+++ b/packages/default/scss/window/_theme.scss
@@ -31,7 +31,7 @@
// Window theme colors
@each $name, $color in $kendo-window-theme-colors {
.k-window-#{$name} .k-window-titlebar {
- color: contrast-wcag( $color );
+ color: k-contrast-legacy( $color );
background-color: $color;
}
}
diff --git a/packages/fluent/scss/scheduler/_theme.scss b/packages/fluent/scss/scheduler/_theme.scss
index c019c519446..8249185d12b 100644
--- a/packages/fluent/scss/scheduler/_theme.scss
+++ b/packages/fluent/scss/scheduler/_theme.scss
@@ -132,7 +132,7 @@
}
// .k-event-inverse {
- // color: contrast-wcag( $kendo-scheduler-event-text );
+ // color: k-contrast-legacy( $kendo-scheduler-event-text );
// }
.k-event-ongoing {
diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss
index b6b59151783..9179ff9ba52 100644
--- a/packages/material/scss/_variables.scss
+++ b/packages/material/scss/_variables.scss
@@ -1,5 +1,5 @@
-@import "core/functions/_index.scss";
-@import "core/_color-system.scss";
+@import "core/functions/index.import.scss";
+@import "core/color-system/index.import.scss";
// Options
diff --git a/packages/material/scss/checkbox/_variables.scss b/packages/material/scss/checkbox/_variables.scss
index 3519c65895b..39998992dfb 100644
--- a/packages/material/scss/checkbox/_variables.scss
+++ b/packages/material/scss/checkbox/_variables.scss
@@ -127,10 +127,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,") ) !default;
+$kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,") ) !default;
/// Image of checked checkbox indicator.
/// @group checkbox
-$kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,") ) !default;
+$kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,") ) !default;
// Checkbox label
diff --git a/packages/material/scss/color-preview/_variables.scss b/packages/material/scss/color-preview/_variables.scss
index 629c57cd632..362fdc55552 100644
--- a/packages/material/scss/color-preview/_variables.scss
+++ b/packages/material/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,") ) !default;
+$color-preview-no-color-image: k-escape-svg( url("data:image/svg+xml,") ) !default;
$color-preview-transparent-color-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC") !default;
diff --git a/packages/material/scss/core/_asp-fallback.scss b/packages/material/scss/core/_asp-fallback.scss
deleted file mode 100644
index cf63304e590..00000000000
--- a/packages/material/scss/core/_asp-fallback.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "~@progress/kendo-theme-default/scss/core/_asp-fallback.scss";
diff --git a/packages/material/scss/core/_extra.scss b/packages/material/scss/core/_extra.scss
deleted file mode 100644
index 805396c45df..00000000000
--- a/packages/material/scss/core/_extra.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "~@progress/kendo-theme-default/scss/core/_extra.scss";
diff --git a/packages/material/scss/core/_index.scss b/packages/material/scss/core/_index.scss
index f3a3e3e8daa..c0f93466f73 100644
--- a/packages/material/scss/core/_index.scss
+++ b/packages/material/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";
diff --git a/packages/material/scss/core/_layout.scss b/packages/material/scss/core/_layout.scss
deleted file mode 100644
index f2e8362bb50..00000000000
--- a/packages/material/scss/core/_layout.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "~@progress/kendo-theme-default/scss/core/_layout.scss";
diff --git a/packages/material/scss/core/_normalize.scss b/packages/material/scss/core/_normalize.scss
deleted file mode 100644
index 082a27d382d..00000000000
--- a/packages/material/scss/core/_normalize.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "~@progress/kendo-theme-default/scss/core/_normalize.scss";
diff --git a/packages/material/scss/core/_color-system.scss b/packages/material/scss/core/color-system/_color-system-material.scss
similarity index 96%
rename from packages/material/scss/core/_color-system.scss
rename to packages/material/scss/core/color-system/_color-system-material.scss
index 7df691b096f..f5d6645c8c5 100644
--- a/packages/material/scss/core/_color-system.scss
+++ b/packages/material/scss/core/color-system/_color-system-material.scss
@@ -1,19 +1,6 @@
// Adapted from https://github.com/angular/material2/blob/master/src/lib/core/theming/_palette.scss
// Adapted from https://github.com/angular/components/blob/master/src/material/core/theming/_theming.scss
-// Color constants
-$black: black; // stylelint-disable-line scss/dollar-variable-default
-$white: white; // stylelint-disable-line scss/dollar-variable-default
-
-$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
-
-$gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000; // stylelint-disable-line scss/dollar-variable-default
-
$dark-primary-text: rgba( black, .87 ) !default;
$dark-secondary-text: rgba( black, .54 ) !default;
$dark-disabled-text: rgba( black, .38 ) !default;
diff --git a/packages/material/scss/core/color-system/index.import.scss b/packages/material/scss/core/color-system/index.import.scss
new file mode 100644
index 00000000000..ebdfc1ef187
--- /dev/null
+++ b/packages/material/scss/core/color-system/index.import.scss
@@ -0,0 +1,2 @@
+@import "~@progress/kendo-theme-core/scss/color-system/index.import.scss";
+@import "_color-system-material.scss";
diff --git a/packages/material/scss/core/functions/_index.scss b/packages/material/scss/core/functions/_index.scss
deleted file mode 100644
index 161ad4f8bca..00000000000
--- a/packages/material/scss/core/functions/_index.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-$wcag-min-contrast-ratio: 4.5 !default;
-
-@import "~@progress/kendo-theme-core/scss/functions/index.import.scss";
-@import "~@progress/kendo-theme-default/scss/core/functions/_index.scss";
diff --git a/packages/material/scss/core/functions/index.import.scss b/packages/material/scss/core/functions/index.import.scss
new file mode 100644
index 00000000000..11cdf684a33
--- /dev/null
+++ b/packages/material/scss/core/functions/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/functions/index.import.scss";
diff --git a/packages/material/scss/core/mixins/_index.scss b/packages/material/scss/core/mixins/_index.scss
deleted file mode 100644
index e596855e96e..00000000000
--- a/packages/material/scss/core/mixins/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "~@progress/kendo-theme-default/scss/core/mixins/_index.scss";
diff --git a/packages/material/scss/core/mixins/index.import.scss b/packages/material/scss/core/mixins/index.import.scss
new file mode 100644
index 00000000000..72c8c7fc1ba
--- /dev/null
+++ b/packages/material/scss/core/mixins/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/mixins/index.import.scss";
diff --git a/packages/material/scss/core/module-system/index.import.scss b/packages/material/scss/core/module-system/index.import.scss
new file mode 100644
index 00000000000..f80356df009
--- /dev/null
+++ b/packages/material/scss/core/module-system/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/module-system/index.import.scss";
diff --git a/packages/material/scss/core/styles/index.import.scss b/packages/material/scss/core/styles/index.import.scss
new file mode 100644
index 00000000000..f098a4cf466
--- /dev/null
+++ b/packages/material/scss/core/styles/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/styles/index.import.scss";
diff --git a/packages/material/scss/pager/_variables.scss b/packages/material/scss/pager/_variables.scss
index dc0403306b1..43101ec4c2d 100644
--- a/packages/material/scss/pager/_variables.scss
+++ b/packages/material/scss/pager/_variables.scss
@@ -49,7 +49,7 @@ $kendo-pager-border: $component-border !default;
/// Background color of the focused pager.
/// @group pager
-$kendo-pager-focus-bg: try-shade( $kendo-pager-bg, .5 ) !default;
+$kendo-pager-focus-bg: k-try-shade( $kendo-pager-bg, .5 ) !default;
/// Box shadow of the focused pager.
/// @group pager
$kendo-pager-focus-shadow: null !default;
diff --git a/packages/material/scss/radio/_variables.scss b/packages/material/scss/radio/_variables.scss
index 2fda3a92e6a..e2e124b0b18 100644
--- a/packages/material/scss/radio/_variables.scss
+++ b/packages/material/scss/radio/_variables.scss
@@ -115,10 +115,10 @@ $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,") ) !default;
+$kendo-radio-checked-image: k-escape-svg( url("data:image/svg+xml,") ) !default;
/// Image of disabled and checked radio button indicator.
/// @group radio
-$kendo-radio-disabled-checked-image: escape-svg( url("data:image/svg+xml,") ) !default;
+$kendo-radio-disabled-checked-image: k-escape-svg( url("data:image/svg+xml,") ) !default;
// Radio label
diff --git a/packages/nouvelle/scss/core/_asp-fallback.scss b/packages/nouvelle/scss/core/_asp-fallback.scss
deleted file mode 100644
index 897e649d9d4..00000000000
--- a/packages/nouvelle/scss/core/_asp-fallback.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.k-theme-test-class,
-.k-common-test-class {
- opacity: 0;
-}
diff --git a/packages/nouvelle/scss/core/_component-reset.scss b/packages/nouvelle/scss/core/_component-reset.scss
deleted file mode 100644
index d974c44afe3..00000000000
--- a/packages/nouvelle/scss/core/_component-reset.scss
+++ /dev/null
@@ -1 +0,0 @@
-// This is needed before we can use :where
diff --git a/packages/nouvelle/scss/core/_extra.scss b/packages/nouvelle/scss/core/_extra.scss
deleted file mode 100644
index 3a30a7f85e4..00000000000
--- a/packages/nouvelle/scss/core/_extra.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-// Hidden
-.k-hidden {
- display: none !important; // sass-lint:disable-line no-important
-}
-
-
-// RTL
-.k-rtl {
- direction: rtl;
-}
-
-
-.k-sr-only {
- position: absolute;
- left: -1px;
- width: 1px;
- height: 1px;
- overflow: hidden;
-}
diff --git a/packages/nouvelle/scss/core/_layout.scss b/packages/nouvelle/scss/core/_layout.scss
deleted file mode 100644
index 7e75a318ee2..00000000000
--- a/packages/nouvelle/scss/core/_layout.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-// Basic layout
-.k-hbox,
-.k-hstack {
- display: flex;
- flex-flow: row nowrap;
-}
-
-.k-vbox,
-.k-vstack {
- display: flex;
- flex-flow: column nowrap;
-}
-
-.k-flex,
-.k-spacer {
- flex: 1 1 auto;
-}
-.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
-.k-separator {
- width: auto;
- height: 0;
- border-width: 1px 0 0;
- border-style: solid;
- border-color: inherit;
- display: block;
- flex-grow: 0 !important; // sass-lint:disable-line no-important
- flex-shrink: 0 !important; // sass-lint:disable-line no-important
- align-self: stretch;
-}
-.k-separator-horizontal,
-.k-vstack > .k-separator {
- width: auto;
- height: 0;
- border-width: 1px 0 0;
-}
-.k-separator-vertical,
-.k-hstack > .k-separator {
- width: 0;
- height: auto;
- border-width: 0 0 0 1px;
-}
-
-hr.k-separator {
- margin: 0;
- padding: 0;
-}
diff --git a/packages/nouvelle/scss/core/_normalize.scss b/packages/nouvelle/scss/core/_normalize.scss
deleted file mode 100644
index c747f7b2d4b..00000000000
--- a/packages/nouvelle/scss/core/_normalize.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-// Box sizing
-*,
-::before,
-::after {
- box-sizing: border-box;
-}
-
-// Hidden attribute
-[hidden] {
- display: none !important; // sass-lint:disable-line no-important
-}
-
-// Hide script tags
-// see https://github.com/telerik/kendo-themes/issues/2360
-script {
- display: none !important; // sass-lint:disable-line no-important
-}
diff --git a/packages/nouvelle/scss/core/color-system/index.import.scss b/packages/nouvelle/scss/core/color-system/index.import.scss
new file mode 100644
index 00000000000..0dca4c662a3
--- /dev/null
+++ b/packages/nouvelle/scss/core/color-system/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/color-system/index.import.scss";
diff --git a/packages/nouvelle/scss/core/functions/index.import.scss b/packages/nouvelle/scss/core/functions/index.import.scss
new file mode 100644
index 00000000000..11cdf684a33
--- /dev/null
+++ b/packages/nouvelle/scss/core/functions/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/functions/index.import.scss";
diff --git a/packages/nouvelle/scss/core/index.scss b/packages/nouvelle/scss/core/index.scss
index 7190671e814..a48b35d92f5 100644
--- a/packages/nouvelle/scss/core/index.scss
+++ b/packages/nouvelle/scss/core/index.scss
@@ -1,24 +1,16 @@
-// Module system
-@import "module-system/_index.scss";
-
-// Color system
-@import "color-system/_index.scss";
+$wcag-min-contrast-ratio: 4.5 !default;
// Functions
-@import "functions/_index.scss";
+@import "functions/index.import.scss";
+
+// Color system
+@import "color-system/index.import.scss";
// Mixins
-@import "mixins/_index.scss";
+@import "mixins/index.import.scss";
-// Helpers
-// @import "helpers/_index.scss"
+// Module system
+@import "module-system/index.import.scss";
// Common styles
-
-@import "_asp-fallback.scss";
-@import "_normalize.scss";
-@import "_extra.scss";
-@import "_layout.scss";
-
-
-@import "_component-reset.scss";
+@import "styles/index.import.scss";
diff --git a/packages/nouvelle/scss/core/mixins/_index.scss b/packages/nouvelle/scss/core/mixins/_index.scss
deleted file mode 100644
index 3a139859554..00000000000
--- a/packages/nouvelle/scss/core/mixins/_index.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-@mixin fill( $color: null, $bg: null, $border: null, $gradient: null ) {
- @if $border {
- border-color: $border;
- }
- @if $color {
- color: $color;
- }
- @if $bg {
- background-color: $bg;
- }
- @if $gradient {
- @include linear-gradient( $gradient );
- }
-}
-
-@mixin linear-gradient( $gradient: null ) {
- @if $gradient and $enable-gradients {
- @if $gradient == none {
- background-image: none;
- }
- @else {
- background-image: linear-gradient( $gradient );
- }
- }
-}
-
-
-
-
-// Border radius
-@mixin border-radius( $radius: null ) {
- @if $enable-rounded {
- border-radius: $radius;
- }
-}
-
-@mixin border-top-radius( $radius: null ) {
- @if $enable-rounded {
- border-top-left-radius: $radius;
- border-top-right-radius: $radius;
- }
-}
-
-@mixin border-right-radius( $radius: null ) {
- @if $enable-rounded {
- border-top-right-radius: $radius;
- border-bottom-right-radius: $radius;
- }
-}
-
-@mixin border-bottom-radius( $radius: null ) {
- @if $enable-rounded {
- border-bottom-right-radius: $radius;
- border-bottom-left-radius: $radius;
- }
-}
-
-@mixin border-left-radius( $radius: null ) {
- @if $enable-rounded {
- border-top-left-radius: $radius;
- border-bottom-left-radius: $radius;
- }
-}
-
-@mixin border-top-radius-only( $radius: null ) {
- @if $enable-rounded {
- border-radius: $radius $radius 0 0;
- }
-}
-
-@mixin border-right-radius-only( $radius: null ) {
- @if $enable-rounded {
- border-radius: 0 $radius $radius 0;
- }
-}
-
-@mixin border-bottom-radius-only( $radius: null ) {
- @if $enable-rounded {
- border-radius: 0 0 $radius $radius;
- }
-}
-
-@mixin border-left-radius-only( $radius: null ) {
- @if $enable-rounded {
- border-radius: $radius 0 0 $radius;
- }
-}
diff --git a/packages/nouvelle/scss/core/mixins/index.import.scss b/packages/nouvelle/scss/core/mixins/index.import.scss
new file mode 100644
index 00000000000..72c8c7fc1ba
--- /dev/null
+++ b/packages/nouvelle/scss/core/mixins/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/mixins/index.import.scss";
diff --git a/packages/nouvelle/scss/core/module-system/_components.scss b/packages/nouvelle/scss/core/module-system/_components.scss
deleted file mode 100644
index 834b3d848b5..00000000000
--- a/packages/nouvelle/scss/core/module-system/_components.scss
+++ /dev/null
@@ -1,143 +0,0 @@
-$components: (
- // Typography and utils
- "typography",
- "utils",
- "cursor",
- "draggable",
-
- // Generic content
- "styling",
- "table",
- "icon",
- "chip",
- "messagebox",
-
- // Primitive components
- "input",
- "list",
- "listgroup",
- "overlay",
- "ripple",
- "virtual-scroller",
-
- // Indicators
- "avatar",
- "badge",
- "color-preview",
- "loader",
- "loading",
- "skeleton",
- "tooltip",
-
- // Native forms
- "button",
- "split-button",
- "menu-button",
- "textbox",
- "textarea",
- "checkbox",
- "listbox",
- "progressbar",
- "radio",
- "slider",
-
- // Form helpers
- "forms",
- "validator",
- "floating-label",
-
- // Form requirements
- "calendar",
- "popup",
- "time-selector",
-
- // Augmented inputs
- "autocomplete",
- "captcha",
- "colorpalette",
- "colorgradient",
- "coloreditor",
- "colorpicker",
- "combobox",
- "dateinput",
- "datepicker",
- "timepicker",
- "datetimepicker",
- "daterangepicker",
- "dropdowngrid",
- "dropdownlist",
- "dropdowntree",
- "maskedtextbox",
- "multiselect",
- "numerictextbox",
- "rating",
- "searchbox",
- "switch",
- "upload",
- "dropzone",
-
- // Command interfaces
- "actions",
- "appbar",
- "fab",
- "menu",
- "toolbar",
-
- // Popups and modals
- "action-sheet",
- "dialog",
- "drawer",
- "notification",
- "popover",
- "responsivepanel",
- "window",
-
- // Navigation
- "bottom-navigation",
- "breadcrumb",
- "pager",
- "stepper",
- "tabstrip",
- "treeview",
- "wizard",
-
- // Layout & containers
- "card",
- "expansion-panel",
- "panelbar",
- "splitter",
- "tilelayout",
-
- // Data management
- "grid",
- "listview",
- "spreadsheet",
- "pivotgrid",
- "treelist",
- "filter",
- "filemanager",
- "taskboard",
-
- // Editors
- "editor",
- "imageeditor",
-
- // Scheduling
- "gantt",
- "scheduler",
-
- // Misc
- "adaptive",
- "chat",
- "mediaplayer",
- "timeline",
- "pdf-viewer",
- "scroller",
- "scrollview",
-
- // Dataviz
- "dataviz",
- "map",
- "orgchart",
- "signature"
-) !default;
diff --git a/packages/nouvelle/scss/core/module-system/_index.scss b/packages/nouvelle/scss/core/module-system/_index.scss
deleted file mode 100644
index 19df245b451..00000000000
--- a/packages/nouvelle/scss/core/module-system/_index.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@import "_components.scss";
-
-$_deps: ();
-$_imported: ();
-
-@mixin module-register( $name: null, $dependencies: null ) {
- @if (k-list-index( $components, $name) != null) {
- $_deps: k-map-merge( $_deps, ( $name: $dependencies ) );
-
- @if $dependencies {
- @each $dep in $dependencies {
- @if ( k-list-index( $components, $dep ) == null ) {
- // sass-lint:disable-block no-warn
- @warn "The module \"#{$name}\" depends on module \"#{$dep}\", but the styles will not be loaded!";
- }
- }
- }
- }
-}
-
-@mixin module-render( $name: null ) {
- $dependencies: k-map-get( $_deps, $name );
-
- @if $dependencies {
- @each $dep in $dependencies {
- @if ( k-list-index( $_imported, $dep ) == null ) {
- // sass-lint:disable-block no-warn
- @warn "The module \"#{$name}\" depends on module \"#{$dep}\", but the styles have not been loaded yet!";
- }
- }
- }
-
- @if ( k-list-index( $components, $name ) != null ) and ( k-list-index( $_imported, $name ) == null ) {
- $_imported: k-list-append( $_imported, $name );
- @content;
- }
-}
diff --git a/packages/nouvelle/scss/core/module-system/index.import.scss b/packages/nouvelle/scss/core/module-system/index.import.scss
new file mode 100644
index 00000000000..f80356df009
--- /dev/null
+++ b/packages/nouvelle/scss/core/module-system/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/module-system/index.import.scss";
diff --git a/packages/nouvelle/scss/core/styles/index.import.scss b/packages/nouvelle/scss/core/styles/index.import.scss
new file mode 100644
index 00000000000..f098a4cf466
--- /dev/null
+++ b/packages/nouvelle/scss/core/styles/index.import.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-core/scss/styles/index.import.scss";
diff --git a/packages/nouvelle/scss/icon/index.scss b/packages/nouvelle/scss/icon/index.scss
index 6763b3c3fac..a2d0e87aabb 100644
--- a/packages/nouvelle/scss/icon/index.scss
+++ b/packages/nouvelle/scss/icon/index.scss
@@ -12,7 +12,7 @@ $_kendo-module-meta: (
// Register
-@import "../core/module-system/_index.scss";
+@import "../core/module-system/index.import.scss";
@include module-register( $_kendo-module-meta... );