@progress/kendo-theme-fluent 11.2.1-dev.1 → 11.3.0-dev.0

package/scss/radio/_variables.scss

@@ -9,10 +9,10 @@
 
 /// The border radius of the RadioButton.
 /// @group radio
-$kendo-radio-border-radius: 50% !default;
+$kendo-radio-border-radius: var( --kendo-radio-border-radius, 50% ) !default;
 /// The border width of the RadioButton.
 /// @group radio
-$kendo-radio-border-width: 1px !default;
+$kendo-radio-border-width: var( --kendo-radio-border-width, 1px ) !default;
 
 /// The map with the different RadioButton sizes.
 /// @group radio
@@ -39,83 +39,83 @@ $kendo-radio-sizes: (
 
 /// The background color of the RadioButton.
 /// @group radio
-$kendo-radio-bg: k-color(surface-alt) !default;
+$kendo-radio-bg: var( --kendo-radio-bg, #{k-color(surface-alt)} ) !default;
 /// The color of the RadioButton.
 /// @group radio
-$kendo-radio-text: transparent !default;
+$kendo-radio-text: var( --kendo-radio-text, transparent ) !default;
 /// The border color of the RadioButton.
 /// @group radio
-$kendo-radio-border: k-color(border-alt) !default;
+$kendo-radio-border: var( --kendo-radio-border, #{k-color(border-alt)} ) !default;
 
 /// The background color of the hovered RadioButton.
 /// @group radio
-$kendo-radio-hover-bg: $kendo-radio-bg !default;
+$kendo-radio-hover-bg: var( --kendo-radio-hover-bg, #{$kendo-radio-bg} ) !default;
 /// The color of the hovered RadioButton.
 /// @group radio
-$kendo-radio-hover-text: k-color(subtle) !default;
+$kendo-radio-hover-text: var( --kendo-radio-hover-text, #{k-color(subtle)} ) !default;
 /// The border color of the hovered RadioButton.
 /// @group radio
-$kendo-radio-hover-border: $kendo-radio-border !default;
+$kendo-radio-hover-border: var( --kendo-radio-hover-border, #{$kendo-radio-border} ) !default;
 
 /// The background color of the checked RadioButton.
 /// @group radio
-$kendo-radio-checked-bg: $kendo-radio-bg !default;
+$kendo-radio-checked-bg: var( --kendo-radio-checked-bg, #{$kendo-radio-bg} ) !default;
 /// The color of the checked RadioButton.
 /// @group radio
-$kendo-radio-checked-text: k-color(primary) !default;
+$kendo-radio-checked-text: var( --kendo-radio-checked-text, #{k-color(primary)} ) !default;
 /// The border color of the checked RadioButton.
 /// @group radio
-$kendo-radio-checked-border: k-color(primary) !default;
+$kendo-radio-checked-border: var( --kendo-radio-checked-border, #{k-color(primary)} ) !default;
 
 /// The background color of the checked and hovered RadioButton.
 /// @group radio
-$kendo-radio-hover-checked-bg: $kendo-radio-bg !default;
+$kendo-radio-hover-checked-bg: var( --kendo-radio-hover-checked-bg, #{$kendo-radio-bg} ) !default;
 /// The color of the checked and hovered RadioButton.
 /// @group radio
-$kendo-radio-hover-checked-text: k-color(primary-hover) !default;
+$kendo-radio-hover-checked-text: var( --kendo-radio-hover-checked-text, #{k-color(primary-hover)} ) !default;
 /// The border color of the checked and hovered RadioButton.
 /// @group radio
-$kendo-radio-hover-checked-border: k-color(primary-hover) !default;
+$kendo-radio-hover-checked-border: var( --kendo-radio-hover-checked-border, #{k-color(primary-hover)} ) !default;
 
 /// The border color of the focused RadioButton.
 /// @group radio
-$kendo-radio-focus-border: null !default;
+$kendo-radio-focus-border: var( --kendo-radio-focus-border, #{$kendo-radio-border} ) !default;
 /// The box shadow of the focused RadioButton.
 /// @group radio
-$kendo-radio-focus-shadow: null !default;
+$kendo-radio-focus-shadow: var( --kendo-radio-focus-shadow, null ) !default;
 /// The outline of the focused RadioButton.
 /// @group radio
-$kendo-radio-focus-outline: 1px solid k-color(base-emphasis) !default;
+$kendo-radio-focus-outline: var( --kendo-radio-focus-outline, 1px solid #{k-color(base-emphasis)} ) !default;
 /// The outline offset of the focused RadioButton.
 /// @group radio
-$kendo-radio-focus-outline-offset: 2px !default;
+$kendo-radio-focus-outline-offset: var( --kendo-radio-focus-outline-offset, 2px ) !default;
 
 /// The background color of the disabled RadioButton.
 /// @group radio
-$kendo-radio-disabled-bg: $kendo-radio-bg !default;
+$kendo-radio-disabled-bg: var( --kendo-radio-disabled-bg, #{$kendo-radio-bg} ) !default;
 /// The color of the disabled RadioButton.
 /// @group radio
-$kendo-radio-disabled-text: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
+$kendo-radio-disabled-text: var( --kendo-radio-disabled-text, #{color-mix(in srgb, k-color(on-app-surface) 28%, transparent)} ) !default;
 /// The border color of the disabled RadioButton.
 /// @group radio
-$kendo-radio-disabled-border: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
+$kendo-radio-disabled-border: var( --kendo-radio-disabled-border, #{color-mix(in srgb, k-color(on-app-surface) 28%, transparent)} ) !default;
 
 /// The background color of the disabled and checked RadioButton.
 /// @group radio
-$kendo-radio-disabled-checked-bg: $kendo-radio-disabled-bg !default;
+$kendo-radio-disabled-checked-bg: var( --kendo-radio-disabled-checked-bg, #{$kendo-radio-disabled-bg} ) !default;
 /// The color of the disabled and checked RadioButton.
 /// @group radio
-$kendo-radio-disabled-checked-text: $kendo-radio-disabled-text !default;
+$kendo-radio-disabled-checked-text: var( --kendo-radio-disabled-checked-text, #{$kendo-radio-disabled-text} ) !default;
 /// The border color of the disabled and checked RadioButton.
 /// @group radio
-$kendo-radio-disabled-checked-border: $kendo-radio-disabled-border !default;
+$kendo-radio-disabled-checked-border: var( --kendo-radio-disabled-checked-border, #{$kendo-radio-disabled-border} ) !default;
 
 /// The color of the invalid RadioButton.
 /// @group radio
-$kendo-radio-invalid-text: k-color(error-on-surface) !default;
+$kendo-radio-invalid-text: var( --kendo-radio-invalid-text, #{k-color(error-on-surface)} ) !default;
 /// The border color of the invalid RadioButton.
 /// @group radio
-$kendo-radio-invalid-border: k-color(error-emphasis) !default;
+$kendo-radio-invalid-border: var( --kendo-radio-invalid-border, #{k-color(error-emphasis)} ) !default;
 
 
 // Radio indicator
@@ -126,11 +126,11 @@ $kendo-radio-indicator-type: pseudo !default;
 
 /// The border radius of the RadioButton indicator.
 /// @group radio
-$kendo-radio-indicator-border-radius: 50% !default;
+$kendo-radio-indicator-border-radius: var( --kendo-radio-indicator-border-radius, 50% ) !default;
 
 /// The glyph font family of the RadioButton indicator.
 /// @group radio
-$kendo-radio-glyph-font-family: "WebComponentsIcons", monospace !default;
+$kendo-radio-glyph-font-family: var( --kendo-radio-glyph-font-family, "WebComponentsIcons", monospace ) !default;
 /// The glyph of the RadioButton indicator.
 /// @group radio
 $kendo-radio-checked-glyph: "\e308" !default;
@@ -140,36 +140,72 @@ $kendo-radio-checked-glyph: "\e308" !default;
 $kendo-radio-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#0078d4'/></svg>") ) !default;
 /// The image of the disabled and checked RadioButton indicator.
 /// @group radio
-$kendo-radio-disabled-checked-image: null !default;
+$kendo-radio-disabled-checked-image: var( --kendo-radio-disabled-checked-image, null ) !default;
 
 
 // Radio label
 
 /// The horizontal margin of the RadioButton inside of a label.
 /// @group radio
-$kendo-radio-label-spacing: k-spacing(2) !default;
+$kendo-radio-label-spacing: var( --kendo-radio-label-spacing, #{k-spacing(2)} ) !default;
 
 
 // Radio list
 
 /// The horizontal list item margin of the RadioButton.
 /// @group radio
-$kendo-radio-list-spacing: k-spacing(4) !default;
+$kendo-radio-list-spacing: var( --kendo-radio-list-spacing, #{k-spacing(4)} ) !default;
 /// The horizontal list item padding of the RadioButton.
 /// @group radio
-$kendo-radio-list-item-padding-x: k-spacing(0) !default;
+$kendo-radio-list-item-padding-x: var( --kendo-radio-list-item-padding-x, #{k-spacing(0)} ) !default;
 /// The vertical list item padding of the RadioButton.
 /// @group radio
-$kendo-radio-list-item-padding-y: $kendo-list-md-item-padding-y !default;
+$kendo-radio-list-item-padding-y: var( --kendo-radio-list-item-padding-y, #{$kendo-list-md-item-padding-y} ) !default;
 /// The gap between the list items of the RadioButton.
 /// @group radio
-$kendo-radio-list-item-gap: k-spacing(2) !default;
+$kendo-radio-list-item-gap: var( --kendo-radio-list-item-gap, #{k-spacing(2)} ) !default;
 
 // Radio ripple
 
 /// The background color of the RadioButton ripple.
 /// @group radio
-$kendo-radio-ripple-bg: k-color(primary) !default;
+$kendo-radio-ripple-bg: var( --kendo-radio-ripple-bg, #{k-color(primary)} ) !default;
 /// The opacity of the RadioButton ripple.
 /// @group radio
-$kendo-radio-ripple-opacity: .25 !default;
+$kendo-radio-ripple-opacity: var( --kendo-radio-ripple-opacity, .25 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/radio/_variables.scss" with (
+    $kendo-radio-border-width: $kendo-radio-border-width,
+    $kendo-radio-radius: $kendo-radio-border-radius,
+    $kendo-radio-sizes: $kendo-radio-sizes,
+    $kendo-radio-bg: $kendo-radio-bg,
+    $kendo-radio-text: $kendo-radio-text,
+    $kendo-radio-border: $kendo-radio-border,
+    $kendo-radio-hover-bg: $kendo-radio-hover-bg,
+    $kendo-radio-hover-text: $kendo-radio-hover-text,
+    $kendo-radio-hover-border: $kendo-radio-hover-border,
+    $kendo-radio-checked-bg: $kendo-radio-checked-bg,
+    $kendo-radio-checked-text: $kendo-radio-checked-text,
+    $kendo-radio-checked-border: $kendo-radio-checked-border,
+    $kendo-radio-focus-border: $kendo-radio-focus-border,
+    $kendo-radio-focus-shadow: $kendo-radio-focus-shadow,
+    $kendo-radio-disabled-bg: $kendo-radio-disabled-bg,
+    $kendo-radio-disabled-text: $kendo-radio-disabled-text,
+    $kendo-radio-disabled-border: $kendo-radio-disabled-border,
+    $kendo-radio-disabled-checked-bg: $kendo-radio-disabled-checked-bg,
+    $kendo-radio-disabled-checked-text: $kendo-radio-disabled-checked-text,
+    $kendo-radio-disabled-checked-border: $kendo-radio-disabled-checked-border,
+    $kendo-radio-invalid-text: $kendo-radio-invalid-text,
+    $kendo-radio-invalid-border: $kendo-radio-invalid-border,
+    $kendo-radio-indicator-type: $kendo-radio-indicator-type,
+    $kendo-radio-glyph-font-family: $kendo-radio-glyph-font-family,
+    $kendo-radio-checked-glyph: $kendo-radio-checked-glyph,
+    $kendo-radio-checked-image: $kendo-radio-checked-image,
+    $kendo-radio-disabled-checked-image: $kendo-radio-disabled-checked-image,
+    $kendo-radio-list-spacing: $kendo-radio-list-spacing,
+    $kendo-radio-list-item-padding-x: $kendo-radio-list-item-padding-x,
+    $kendo-radio-list-item-padding-y: $kendo-radio-list-item-padding-y,
+    $kendo-radio-ripple-bg: $kendo-radio-ripple-bg,
+    $kendo-radio-ripple-opacity: $kendo-radio-ripple-opacity,
+    $kendo-radio-label-margin-x: $kendo-radio-label-spacing
+);

package/scss/rating/_layout.scss

@@ -1,46 +1,19 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/rating/_layout.scss" as *;
 
 @mixin kendo-rating--layout() {
 
-    // Rating
-    .k-rating {
-        margin: 0;
-        padding: 0;
-        border-width: 0;
-        box-sizing: border-box;
-        outline: 0;
-        font-size: var( --kendo-rating-font-size, #{$kendo-rating-font-size} );
-        font-family: var( --kendo-rating-font-family, #{$kendo-rating-font-family} );
-        line-height: var( --kendo-rating-line-height, #{$kendo-rating-line-height} );
-        display: inline-flex;
-        gap: var( --kendo-rating-spacing, #{$kendo-rating-spacing} );
-        background: none;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
+    @include kendo-rating--layout-base();
 
-        &.k-readonly {
-            pointer-events: none;
-        }
-    }
-
-    // Items wrapper
-    .k-rating-container {
-        position: relative;
-        flex: 0 1 auto;
+    .k-rating {
+        gap: $kendo-rating-spacing;
     }
 
-    // Item
     .k-rating-item {
         margin: 0;
-        padding-inline: var( --kendo-rating-item-padding-x, #{$kendo-rating-item-padding-x} );
-        padding-block: var( --kendo-rating-item-padding-y, #{$kendo-rating-item-padding-y} );
+        padding-inline: $kendo-rating-item-padding-x;
+        padding-block: $kendo-rating-item-padding-y;
         vertical-align: middle;
         display: inline-flex;
         align-items: center;
@@ -59,35 +32,16 @@
 
         &:focus,
         &.k-focus {
-            outline-width: var( --kendo-rating-item-focus-outline-width, #{$kendo-rating-item-focus-outline-width} );
-            outline-style: var( --kendo-rating-item-focus-outline-style, #{$kendo-rating-item-focus-outline-style} );
-            outline-offset: -#{$kendo-rating-item-focus-outline-width};
+            outline-width: $kendo-rating-item-focus-outline-width;
+            outline-style: $kendo-rating-item-focus-outline-style;
+            outline-offset: calc( -1 * #{$kendo-rating-item-focus-outline-width} );
         }
     }
 
-    // Label
-    .k-rating-label {
-        vertical-align: middle;
-        display: inline-flex;
-        align-items: center;
-    }
-
-    // Precision
     .k-rating-precision-part,
     .k-rating-precision-complement {
-        display: inherit;
-        position: absolute;
-        top: var( --kendo-rating-item-padding-y, #{$kendo-rating-item-padding-y} );
-        inset-inline-start: var( --kendo-rating-item-padding-x, #{$kendo-rating-item-padding-x} );
-        overflow: hidden;
-    }
-
-    .k-rating-precision-complement {
-        direction: rtl;
-    }
-
-    :is(.k-rtl, [dir="rtl"]) .k-rating-precision-complement {
-        direction: ltr;
+        top: $kendo-rating-item-padding-y;
+        inset-inline-start: $kendo-rating-item-padding-x;
     }
 
 }

package/scss/rating/_theme.scss

@@ -1,23 +1,25 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/rating/_theme.scss" as *;
 
 @mixin kendo-rating--theme() {
 
+    @include kendo-rating--theme-base();
+
     .k-rating-item {
         @include fill(
-            $color: var( --kendo-rating-item-text, #{$kendo-rating-item-text} )
+            $color: $kendo-rating-item-text
         );
 
         &.k-selected {
             @include fill(
-                $color: var( --kendo-rating-item-selected-text, #{$kendo-rating-item-selected-text} )
+                $color: $kendo-rating-item-selected-text
             );
 
-
             &:hover,
             &.k-hover {
                 @include fill(
-                    $color: var( --kendo-rating-item-selected-hover-text, #{$kendo-rating-item-selected-hover-text} )
+                    $color: $kendo-rating-item-selected-hover-text
                 );
             }
         }
@@ -25,14 +27,14 @@
         &:hover,
         &.k-hover {
             @include fill(
-                $color: var( --kendo-rating-item-hover-text, #{$kendo-rating-item-hover-text} )
+                $color: $kendo-rating-item-hover-text
             );
             cursor: pointer;
         }
 
         &:focus,
         &.k-focus {
-            outline-color: var( --kendo-rating-item-focus-outline, #{$kendo-rating-item-focus-outline} );
+            outline-color: $kendo-rating-item-focus-outline;
         }
 
         &.k-disabled {

package/scss/rating/_variables.scss

@@ -3,42 +3,50 @@
 
 /// The font family of the Rating.
 /// @group rating
-$kendo-rating-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-rating-font-family: var( --kendo-rating-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font size of the Rating.
 /// @group rating
-$kendo-rating-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-rating-font-size: var( --kendo-rating-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
 /// The line height of the Rating.
 /// @group rating
-$kendo-rating-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-rating-line-height: var( --kendo-rating-line-height, var( --kendo-line-height, normal ) ) !default;
 
 /// The content spacing of the Rating.
 /// @group rating
-$kendo-rating-spacing: k-spacing(1) !default;
+$kendo-rating-spacing: var( --kendo-rating-spacing, #{k-spacing(1)} ) !default;
 
 /// The horizontal padding of the Rating item.
 /// @group rating
-$kendo-rating-item-padding-x: k-spacing(0.5) !default;
+$kendo-rating-item-padding-x: var( --kendo-rating-item-padding-x, #{k-spacing(0.5)} ) !default;
 /// The vertical padding of the Rating item.
 /// @group rating
-$kendo-rating-item-padding-y: k-spacing(2) !default;
+$kendo-rating-item-padding-y: var( --kendo-rating-item-padding-y, #{k-spacing(2)} ) !default;
 /// The text color of the Rating item.
 /// @group rating
-$kendo-rating-item-text: k-color(subtle) !default;
+$kendo-rating-item-text: var( --kendo-rating-item-text, #{k-color(subtle)} ) !default;
 /// The text color of the hovered Rating item.
 /// @group rating
-$kendo-rating-item-hover-text: k-color(primary) !default;
+$kendo-rating-item-hover-text: var( --kendo-rating-item-hover-text, #{k-color(primary)} ) !default;
 /// The outline width of the focused Rating item.
 /// @group rating
-$kendo-rating-item-focus-outline-width: 1px !default;
+$kendo-rating-item-focus-outline-width: var( --kendo-rating-item-focus-outline-width, 1px ) !default;
 /// The outline style of the focused Rating item.
 /// @group rating
-$kendo-rating-item-focus-outline-style: solid !default;
+$kendo-rating-item-focus-outline-style: var( --kendo-rating-item-focus-outline-style, solid ) !default;
 /// The outline color of the focused Rating item.
 /// @group rating
-$kendo-rating-item-focus-outline: currentColor !default;
+$kendo-rating-item-focus-outline: var( --kendo-rating-item-focus-outline, currentColor ) !default;
 /// The text color of the selected Rating item.
 /// @group rating
-$kendo-rating-item-selected-text: k-color(on-app-surface) !default;
+$kendo-rating-item-selected-text: var( --kendo-rating-item-selected-text, #{k-color(on-app-surface)} ) !default;
 /// The text color of the selected and hovered Rating item.
 /// @group rating
-$kendo-rating-item-selected-hover-text: k-color(primary-active) !default;
+$kendo-rating-item-selected-hover-text: var( --kendo-rating-item-selected-hover-text, #{k-color(primary-active)} ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/rating/_variables.scss" with (
+    $kendo-rating-font-family: $kendo-rating-font-family,
+    $kendo-rating-font-size: $kendo-rating-font-size,
+    $kendo-rating-line-height: $kendo-rating-line-height,
+    $kendo-rating-item-padding-x: $kendo-rating-item-padding-x,
+    $kendo-rating-item-padding-y: $kendo-rating-item-padding-y
+);

package/scss/responsivepanel/_layout.scss

@@ -1,49 +1,6 @@
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/responsivepanel/_layout.scss" as *;
 
 @mixin kendo-responsive-panel--layout() {
-
-    .k-rpanel {}
-
-    // Variants
-    .k-rpanel-left,
-    .k-rpanel-right {
-        position: fixed;
-        display: block;
-        overflow: auto;
-        min-width: 320px;
-        height: 100%;
-        top: 0;
-
-        & + * {
-            overflow: auto;
-        }
-
-        &.k-rpanel-expanded {
-            transform: translateX(0) translateZ(0);
-        }
-    }
-    .k-rpanel-left {
-        transform: translateX(-100%) translateZ(0);
-        left: 0;
-    }
-    .k-rpanel-right {
-        transform: translateX(100%) translateZ(0);
-        right: 0;
-    }
-
-    // Top
-    .k-rpanel-top {
-        position: static;
-        max-height: 0;
-    }
-    .k-rpanel-top.k-rpanel-expanded {
-        max-height: 568px;
-        overflow: visible !important; // stylelint-disable-line declaration-no-important
-    }
-
-    // Toggle button
-    .k-rpanel-toggle {
-        touch-action: manipulation;
-    }
-
+    @include kendo-responsive-panel--layout-base();
 }

package/scss/responsivepanel/_theme.scss

@@ -1,5 +1,5 @@
-@mixin kendo-responsive-panel--theme() {
-
-    .k-rpanel {}
+@use "@progress/kendo-theme-core/scss/components/responsivepanel/_theme.scss" as *;
 
+@mixin kendo-responsive-panel--theme() {
+    @include kendo-responsive-panel--theme-base();
 }

package/scss/ripple/_layout.scss

@@ -1,53 +1,5 @@
-@use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/ripple/_layout.scss" as *;
 
 @mixin kendo-ripple--layout() {
-
-    .k-ripple-target {
-        position: relative;
-    }
-
-    .k-ripple {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: 1;
-        overflow: hidden;
-        pointer-events: none;
-    }
-
-    .k-ripple-blob {
-        pointer-events: none;
-        position: absolute;
-        border-radius: 50%;
-        padding: 0;
-        transform: translate(-50%, -50%) scale(0);
-        transition: opacity 100ms linear, transform 500ms cubic-bezier(.4, 0, .2, 1);
-        opacity: .1;
-        background-color: currentColor;
-    }
-
-    .k-primary .k-ripple-blob {
-        opacity: .2;
-    }
-
-    .k-ripple-focus::after {
-        visibility: visible;
-        animation: ripple 600ms ease-out;
-    }
-
-    @keyframes ripple {
-        0% {
-            transform: translate(-50%, -50%) scale(0);
-        }
-        20% {
-            transform: translate(-50%, -50%) scale(1);
-        }
-        100% {
-            opacity: 0;
-            transform: translate(-50%, -50%) scale(1);
-        }
-    }
-
+    @include kendo-ripple--layout-base();
 }

package/scss/ripple/_theme.scss

@@ -1,5 +1,5 @@
-@use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/ripple/_theme.scss" as *;
 
 @mixin kendo-ripple--theme() {
-    .k-ripple { }
+    @include kendo-ripple--theme-base();
 }