@progress/kendo-theme-fluent 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/checkbox/_theme.scss

@@ -1,129 +1,117 @@
-@use "_variables.scss" as *;
-@use "../core/mixins" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-checkbox--theme() {
 
-     // Checkbox
-     .k-checkbox {
+    // Checkbox
+    .k-checkbox {
         @include fill(
-            var( --kendo-checkbox-text, #{ $kendo-checkbox-text } ),
-            var( --kendo-checkbox-bg, #{ $kendo-checkbox-bg } ),
-            var( --kendo-checkbox-border, #{ $kendo-checkbox-border } )
+            var( --kendo-checkbox-text, #{$kendo-checkbox-text} ),
+            var( --kendo-checkbox-bg, #{$kendo-checkbox-bg} ),
+            var( --kendo-checkbox-border, #{$kendo-checkbox-border} )
         );
     }
 
+
     // Hover state
     .k-checkbox:hover,
     .k-checkbox.k-hover {
         @include fill(
-            var( --kendo-checkbox-hover-text, #{ $kendo-checkbox-hover-text } ),
-            var( --kendo-checkbox-hover-bg, #{ $kendo-checkbox-hover-bg } ),
-            var( --kendo-checkbox-hover-border, #{ $kendo-checkbox-hover-border } )
+            var( --kendo-checkbox-hover-text, #{$kendo-checkbox-hover-text} ),
+            var( --kendo-checkbox-hover-bg, #{$kendo-checkbox-hover-bg} ),
+            var( --kendo-checkbox-hover-border, #{$kendo-checkbox-hover-border} )
         );
-
-        &:not(
-            .k-checkbox.k-checked, .k-checkbox:checked,
-            .k-checkbox:indeterminate, .k-checkbox.k-indeterminate,
-            .k-checkbox:invalid, .k-checkbox.k-invalid,
-            .k-checkbox:disabled, .k-checkbox.k-disabled) {
-                background-image: var( --kendo-checkbox-hover-image, #{ $kendo-checkbox-hover-image } );
-        }
     }
 
+
     // Focus state
     .k-checkbox:focus,
     .k-checkbox.k-focus {
-        &::before {
-            @include fill( $border: var( --kendo-checkbox-focus-outline, #{ $kendo-checkbox-focus-outline } ) );
-        }
+        box-shadow: $kendo-checkbox-focus-shadow;
+        outline: $kendo-checkbox-focus-outline;
     }
 
-    // Indeterminate
-    .k-checkbox:indeterminate,
-    .k-checkbox.k-indeterminate {
+
+    // Checked state
+    .k-checkbox:checked,
+    .k-checkbox.k-checked {
         @include fill(
-            var( --kendo-checkbox-indeterminate-text, #{ $kendo-checkbox-indeterminate-text }) ,
-            var( --kendo-checkbox-indeterminate-bg, #{ $kendo-checkbox-indeterminate-bg } ),
-            var( --kendo-checkbox-indeterminate-border, #{ $kendo-checkbox-indeterminate-border } )
+            var( --kendo-checkbox-checked-text, #{$kendo-checkbox-checked-text} ),
+            var( --kendo-checkbox-checked-bg, #{$kendo-checkbox-checked-bg} ),
+            var( --kendo-checkbox-checked-border, #{$kendo-checkbox-checked-border} )
         );
+    }
 
-        transition-property: border-width, border, border-color;
-        transition-duration: 200ms;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.23, 1);
 
-        &::after {
-            @include fill(
-                $bg: var( --kendo-checkbox-indeterminate-border, #{ $kendo-checkbox-indeterminate-border } )
-            );
-        }
-
-        &:hover,
-        &.k-hover {
-            &::after {
-                @include fill(
-                    $bg: var( --kendo-checkbox-indeterminate-hover-border, #{ $kendo-checkbox-indeterminate-hover-border } ),
-                    $border: var( --kendo-checkbox-indeterminate-hover-border, #{ $kendo-checkbox-indeterminate-hover-border } )
-                );
-            }
-        }
-
-        // Indeterminate and disabled
-        &:disabled,
-        &.k-disabled {
-            &::after {
-                @include fill(
-                    var( --kendo-checkbox-indeterminate-disabled-border, #{ $kendo-checkbox-indeterminate-disabled-border } ),
-                    var( --kendo-checkbox-indeterminate-disabled-border, #{ $kendo-checkbox-indeterminate-disabled-border } )
-                );
-            }
-        }
+    // Hover checked state
+    .k-checkbox:checked:hover,
+    .k-checkbox.k-checked.k-hover {
+        @include fill(
+            var( --kendo-checkbox-hover-checked-text, #{$kendo-checkbox-hover-checked-text} ),
+            var( --kendo-checkbox-hover-checked-bg, #{$kendo-checkbox-hover-checked-bg} ),
+            var( --kendo-checkbox-hover-checked-border, #{$kendo-checkbox-hover-checked-border} )
+        );
     }
 
 
-    // Checked
-    .k-checkbox:checked,
-    .k-checkbox.k-checked {
+    // Indeterminate state
+    .k-checkbox:indeterminate,
+    .k-checkbox.k-indeterminate {
         @include fill(
-            var( --kendo-checkbox-checked-text, #{ $kendo-checkbox-checked-text }) ,
-            var( --kendo-checkbox-checked-bg, #{ $kendo-checkbox-checked-bg } ),
-            var( --kendo-checkbox-checked-border, #{ $kendo-checkbox-checked-border } )
+            var( --kendo-checkbox-indeterminate-text, #{$kendo-checkbox-indeterminate-text} ),
+            var( --kendo-checkbox-indeterminate-bg, #{$kendo-checkbox-indeterminate-bg} ),
+            var( --kendo-checkbox-indeterminate-border, #{$kendo-checkbox-indeterminate-border} )
         );
+    }
 
-        // Checked and hovered
-        &:hover,
-        &.k-hover {
-            @include fill(
-                $bg: var( --kendo-checkbox-checked-hover-bg, #{ $kendo-checkbox-checked-hover-bg } ),
-                $border: var( --kendo-checkbox-checked-hover-border, #{ $kendo-checkbox-checked-hover-border } )
-            );
-        }
 
-        &:disabled,
-        &.k-disabled {
-            @include fill(
-                var( --kendo-checkbox-disabled-checked-text, #{ $kendo-checkbox-disabled-checked-text } ),
-                var( --kendo-checkbox-disabled-checked-bg, #{ $kendo-checkbox-disabled-checked-bg } ),
-                var( --kendo-checkbox-disabled-checked-border, #{ $kendo-checkbox-disabled-checked-border } )
-            );
-        }
+    // Hover indeterminate state
+    .k-checkbox:indeterminate:hover,
+    .k-checkbox.k-indeterminate.k-hover {
+        @include fill(
+            var( --kendo-checkbox-hover-indeterminate-text, #{$kendo-checkbox-hover-indeterminate-text} ),
+            var( --kendo-checkbox-hover-indeterminate-bg, #{$kendo-checkbox-hover-indeterminate-bg} ),
+            var( --kendo-checkbox-hover-indeterminate-border, #{$kendo-checkbox-hover-indeterminate-border} )
+        );
     }
 
-    // Disabled
+
+    // Disabled state
     .k-checkbox:disabled,
     .k-checkbox.k-disabled {
         @include fill(
-            var( --kendo-checkbox-disabled-text, #{ $kendo-checkbox-disabled-text } ),
-            var( --kendo-checkbox-disabled-bg, #{ $kendo-checkbox-disabled-bg } ),
-            var( --kendo-checkbox-disabled-border, #{ $kendo-checkbox-disabled-border } )
+            var( --kendo-checkbox-disabled-text, #{$kendo-checkbox-disabled-text} ),
+            var( --kendo-checkbox-disabled-bg, #{$kendo-checkbox-disabled-bg} ),
+            var( --kendo-checkbox-disabled-border, #{$kendo-checkbox-disabled-border} )
+        );
+    }
+    .k-checkbox:checked:disabled,
+    .k-checkbox.k-checked.k-disabled {
+        @include fill(
+            var( --kendo-checkbox-disabled-checked-text, #{$kendo-checkbox-disabled-checked-text} ),
+            var( --kendo-checkbox-disabled-checked-bg, #{$kendo-checkbox-disabled-checked-bg} ),
+            var( --kendo-checkbox-disabled-checked-border, #{$kendo-checkbox-disabled-checked-border} )
+        );
+    }
+    .k-checkbox:indeterminate:disabled,
+    .k-checkbox.k-indeterminate.k-disabled {
+        @include fill(
+            var( --kendo-checkbox-disabled-indeterminate-text, #{$kendo-checkbox-disabled-indeterminate-text} ),
+            var( --kendo-checkbox-disabled-indeterminate-bg, #{$kendo-checkbox-disabled-indeterminate-bg} ),
+            var( --kendo-checkbox-disabled-indeterminate-border, #{$kendo-checkbox-disabled-indeterminate-border} )
         );
     }
 
 
-    // Invalid
-    .k-checkbox.k-invalid {
+    // Invalid state
+    .k-checkbox.k-invalid,
+    .k-checkbox.ng-invalid.ng-touched,
+    .k-checkbox.ng-invalid.ng-dirty {
         @include fill( $border: var( --kendo-checkbox-invalid-border, #{ $kendo-checkbox-invalid-border} ) );
     }
-    .k-checkbox.k-invalid + .k-checkbox-label {
+    .k-checkbox.k-invalid + .k-checkbox-label,
+    .k-checkbox.ng-invalid.ng-touched + .k-checkbox-label,
+    .k-checkbox.ng-invalid.ng-dirty + .k-checkbox-label {
         @include fill( $color: var( --kendo-checkbox-invalid-text, #{ $kendo-checkbox-invalid-text } ) );
     }
 
@@ -139,4 +127,5 @@
             opacity: var( --kendo-checkbox-ripple-opacity, #{ $kendo-checkbox-ripple-opacity } );
         }
     }
+
 }

package/scss/checkbox/_variables.scss

@@ -1,9 +1,13 @@
-@use "../core/color-system/" as *;
-@use "../core/_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
 @use "../list/_variables.scss" as *;
-@use "../core/functions/" as *;
+
 // Checkbox
 
+/// Border radius of radio button.
+/// @group checkbox
+$kendo-checkbox-border-radius: null !default;
+
 /// Border width of checkbox.
 /// @group checkbox
 $kendo-checkbox-border-width: 1px !default;
@@ -11,150 +15,105 @@ $kendo-checkbox-border-width: 1px !default;
 // Checkbox sizes
 $kendo-checkbox-sizes: (
     sm: (
-        size: map-get( $kendo-spacing, 4 ),
-        glyph-size: ( map-get( $kendo-spacing, 4 ) - map-get( $kendo-spacing, thin ) ),
-        ripple-size: map-get( $kendo-spacing, 4 ) * 3,
-        indeterminate-size: map-get( $kendo-spacing, sm )
+        size: map.get( $kendo-spacing, 4 ),
+        glyph-size: map.get( $kendo-spacing, 3.5 ),
+        indicator-size: map.get( $kendo-spacing, 4 ),
+        indeterminate-size: map.get( $kendo-spacing, 3 ),
+        ripple-size: 300%
     ),
     md: (
-        size: map-get( $kendo-spacing, 5 ),
-        glyph-size: ( map-get( $kendo-spacing, 6 ) - map-get( $kendo-spacing, thin ) ),
-        ripple-size: map-get( $kendo-spacing, 5 ) * 3,
-        indeterminate-size: ( map-get( $kendo-spacing, md ) - map-get( $kendo-spacing, thin ))
+        size: map.get( $kendo-spacing, 5 ),
+        glyph-size: map.get( $kendo-spacing, 4.5 ),
+        indicator-size: map.get( $kendo-spacing, 4 ),
+        indeterminate-size: map.get( $kendo-spacing, 4 ),
+        ripple-size: 300%
     ),
     lg: (
-        size: map-get( $kendo-spacing, 6 ),
-        glyph-size: ( map-get( $kendo-spacing, 6 ) - map-get( $kendo-spacing, thin ) ),
-        ripple-size: map-get( $kendo-spacing, 6 ) * 3,
-        indeterminate-size: map-get( $kendo-spacing, md )
+        size: map.get( $kendo-spacing, 6 ),
+        glyph-size: map.get( $kendo-spacing, 5.5 ),
+        indicator-size: map.get( $kendo-spacing, 4 ),
+        indeterminate-size: map.get( $kendo-spacing, 5 ),
+        ripple-size: 300%
     )
 ) !default;
 
-// Checkbox indeterminte sizes
-$kendo-checkbox-indeterminate-sizes: (
-    sm: (
-        size: map-get( $kendo-spacing, sm ),
-        position: ( map-get( $kendo-spacing, 1 ) - map-get( $kendo-spacing, hair )),
-        border-width: map-get( $kendo-spacing, 1 )
-    ),
-    md: (
-        size: ( map-get( $kendo-spacing, md ) - map-get( $kendo-spacing, thin )),
-        position: map-get( $kendo-spacing, 1 ),
-        border-width: ( map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, hair ))
-    ),
-    lg: (
-        size: map-get( $kendo-spacing, md ),
-        position: ( map-get( $kendo-spacing, 1) + map-get( $kendo-spacing, hair )),
-        border-width: ( map-get( $kendo-spacing, 1) + map-get( $kendo-spacing, thin ))
-    )
-) !default;
-
-/// Default width of the checbox.
-/// @group checkbox
-$kendo-checkbox-width: map-get( $kendo-spacing, 5 ) !default;
-/// Default height of the checbox.
-/// @group checkbox
-$kendo-checkbox-height: map-get( $kendo-spacing, 5 ) !default;
-
-/// Default width of indeterminate checkbox.
-/// @group checkbox
-$kendo-checkbox-indeterminate-width: ( map-get( $kendo-spacing, 3) - map-get( $kendo-spacing, thin) ) !default;
-/// Default height of indeterminate checkbox.
-/// @group checkbox
-$kendo-checkbox-indeterminate-height: ( map-get( $kendo-spacing, 3) - map-get( $kendo-spacing, thin) ) !default;
-
-/// Default top position of indeterminate checkbox.
-/// @group checkbox
-$kendo-checkbox-indeterminate-top: map-get( $kendo-spacing, 1 ) !default;
-/// Default left position of indeterminate checkbox.
-/// @group checkbox
-$kendo-checkbox-indeterminate-left: map-get( $kendo-spacing, 1 ) !default;
-
 /// Background color of checkbox.
 /// @group checkbox
-$kendo-checkbox-bg: var( --kendo-component-bg, initial ) !default;
+$kendo-checkbox-bg: $kendo-component-bg !default;
 /// Color of checkbox.
 /// @group checkbox
-$kendo-checkbox-text: initial !default;
+$kendo-checkbox-text: transparent !default;
 /// Border color of checkbox.
 /// @group checkbox
 $kendo-checkbox-border: get-theme-color-var( neutral-160 ) !default;
 
-/// The outline of a focused checkbox.
-/// @group checkbox
-$kendo-checkbox-focus-outline: get-theme-color-var( neutral-130 ) !default;
-
 /// Background color of hovered checkbox.
 /// @group checkbox
-$kendo-checkbox-hover-bg: var( --kendo-checkbox-bg, initial ) !default;
+$kendo-checkbox-hover-bg: $kendo-checkbox-bg !default;
 /// Color of hovered checkbox.
 /// @group checkbox
-$kendo-checkbox-hover-text: var( --kendo-body-text, initial ) !default;
+$kendo-checkbox-hover-text: get-theme-color( neutral, 130 ) !default;
 /// Border color of hovered checkbox.
 /// @group checkbox
 $kendo-checkbox-hover-border: $kendo-checkbox-border !default;
 
-/// Background of hovered and checked checkbox.
-/// @group checkbox
-$kendo-checkbox-checked-hover-bg: get-theme-color-var( primary-120 ) !default;
-/// Border of hovered and checked checkbox.
-/// @group checkbox
-$kendo-checkbox-checked-hover-border: get-theme-color-var( primary-120 ) !default;
-
 /// Background color of checked checkbox.
 /// @group checkbox
 $kendo-checkbox-checked-bg: get-theme-color-var( primary-100 ) !default;
 /// Color of checked checkbox.
 /// @group checkbox
-$kendo-checkbox-checked-text: $white !default;
-/// Color of checked checkbox.
-/// @group checkbox
-$kendo-checkbox-hovered-text: get-theme-color-var( neutral-130 ) !default;
+$kendo-checkbox-checked-text: $kendo-color-white !default;
 /// Border color of checked checkbox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
 
+/// Background of hovered and checked checkbox.
+/// @group checkbox
+$kendo-checkbox-hover-checked-bg: get-theme-color-var( primary-110 ) !default;
+/// Color of checked checkbox.
+/// @group checkbox
+$kendo-checkbox-hover-checked-text: $kendo-color-white !default;
+/// Border of hovered and checked checkbox.
+/// @group checkbox
+$kendo-checkbox-hover-checked-border: $kendo-checkbox-hover-checked-bg !default;
+
+/// Border color of focused checkbox.
+/// @group checkbox
+$kendo-checkbox-focus-border: null !default;
+/// Box shadow of focused checkbox.
+/// @group checkbox
+$kendo-checkbox-focus-shadow: null !default;
+/// The outline of a focused checkbox.
+/// @group checkbox
+$kendo-checkbox-focus-outline: 1px solid get-theme-color-var( neutral-130 ) !default;
+$kendo-checkbox-focus-outline-offset: 2px !default;
+
 /// Background color of indeterminate checkbox.
 /// @group checkbox
 $kendo-checkbox-indeterminate-bg: $kendo-checkbox-bg !default;
 /// Color of indeterminate checkbox.
 /// @group checkbox
-$kendo-checkbox-indeterminate-text: get-theme-color-var( primary-100 ) !default;
+$kendo-checkbox-indeterminate-text: get-theme-color( primary, 100 ) !default;
 /// Border color of indeterminate checkbox.
 /// @group checkbox
 $kendo-checkbox-indeterminate-border: get-theme-color-var( primary-100 ) !default;
-/// Border color of indeterminate and hovered checkbox.
-/// @group checkbox
-$kendo-checkbox-indeterminate-hover-border: get-theme-color-var( primary-120 ) !default;
-/// Background color of indeterminate and hovered checkbox.
-/// @group checkbox
-$kendo-checkbox-indeterminate-hover-bg: get-theme-color-var( primary-120 ) !default;
-/// Background color of indeterminate and disabled checkbox.
-/// @group checkbox
-$kendo-checkbox-indeterminate-disabled-bg: get-theme-color-var( neutral-60 ) !default;
-/// Border color of indeterminate and disabled checkbox.
-/// @group checkbox
-$kendo-checkbox-indeterminate-disabled-border: get-theme-color-var( neutral-60 ) !default;
 
-/// Border color of focused checkbox.
-/// @group checkbox
-$kendo-checkbox-focus-border: null !default;
-/// Box shadow of focused checkbox.
+/// Background color of hovered and indeterminate checkbox.
 /// @group checkbox
-$kendo-checkbox-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
-/// Border color of focused and checked checkbox.
+$kendo-checkbox-hover-indeterminate-bg: $kendo-checkbox-bg !default;
+/// Background color of hovered and indeterminate checkbox.
 /// @group checkbox
-$kendo-checkbox-focus-checked-border: null !default;
-/// Box shadow of focused and checked checkbox.
+$kendo-checkbox-hover-indeterminate-text: get-theme-color( primary, 110 ) !default;
+/// Border color of hovered and indeterminate checkbox.
 /// @group checkbox
-$kendo-checkbox-focus-checked-shadow: 0 0 0 2px rgba( get-theme-color-var( primary-100 ), .3 ) !default;
+$kendo-checkbox-hover-indeterminate-border: get-theme-color-var( primary-110 ) !default;
 
 /// Background color of disabled checkbox.
 /// @group checkbox
-$kendo-checkbox-disabled-bg: $white !default;
+$kendo-checkbox-disabled-bg: $kendo-checkbox-bg !default;
 /// Color of disabled checkbox.
 /// @group checkbox
-$kendo-checkbox-disabled-text: null !default;
+$kendo-checkbox-disabled-text: get-theme-color-var( neutral-60 ) !default;
 /// Border color of disabled checkbox.
 /// @group checkbox
 $kendo-checkbox-disabled-border: get-theme-color-var( neutral-60 ) !default;
@@ -164,14 +123,24 @@ $kendo-checkbox-disabled-border: get-theme-color-var( neutral-60 ) !default;
 $kendo-checkbox-disabled-checked-bg: get-theme-color-var( neutral-60 ) !default;
 /// Color of disabled and checked checkbox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-text: null !default;
+$kendo-checkbox-disabled-checked-text: $kendo-color-white !default;
 /// Border color of disabled and checked checkbox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-border: get-theme-color-var( neutral-60 ) !default;
 
+/// Background color of disabled and indeterminate checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-indeterminate-bg: $kendo-checkbox-bg !default;
+/// Border color of disabled and indeterminate checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-indeterminate-text: get-theme-color( neutral, 60 ) !default;
+/// Border color of disabled and indeterminate checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-indeterminate-border: get-theme-color-var( neutral-60 ) !default;
+
 /// Background color of invalid checkbox.
 /// @group checkbox
-$kendo-checkbox-invalid-bg: null !default;
+$kendo-checkbox-invalid-bg: $kendo-checkbox-bg !default;
 /// Color of invalid checkbox.
 /// @group checkbox
 $kendo-checkbox-invalid-text: $kendo-invalid-text !default;
@@ -196,26 +165,41 @@ $kendo-checkbox-checked-glyph: "\e118" !default;
 /// @group checkbox
 $kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
+/// Image of hovered checkbox indicator.
+/// @group checkbox
+$kendo-checkbox-hover-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-hover-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
 /// Image of checked checkbox indicator.
 /// @group checkbox
 $kendo-checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
-/// Image of hovered checkbox indicator.
+/// Image of indeterminate checkbox indicator.
+/// @group checkbox
+$kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#{$kendo-checkbox-indeterminate-text}'/></svg>") ) !default;
+/// Image of hovered and checked checkbox indicator.
+/// @group checkbox
+$kendo-checkbox-hover-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-hover-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+/// Image of hovered and indeterminate checkbox indicator.
+/// @group checkbox
+$kendo-checkbox-hover-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#{$kendo-checkbox-hover-indeterminate-text}'/></svg>") ) !default;
+/// Image of checked checkbox indicator.
+/// @group checkbox
+$kendo-checkbox-disabled-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-disabled-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+/// Image of indeterminate checkbox indicator.
 /// @group checkbox
-$kendo-checkbox-hover-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-hovered-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+$kendo-checkbox-disabled-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#{$kendo-checkbox-disabled-indeterminate-text}'/></svg>") ) !default;
 
 
 // Checkbox label
 
 /// The horizontal margin of the checkbox inside a label.
 /// @group checkbox
-$kendo-checkbox-label-margin-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-checkbox-label-margin-x: map.get( $kendo-spacing, 2 ) !default;
 
 
 // Checkbox list
 
 /// Spacing between items of horizontal checkbox list.
 /// @group checkbox
-$kendo-checkbox-list-spacing: map-get( $kendo-spacing, 4 ) !default;
+$kendo-checkbox-list-spacing: map.get( $kendo-spacing, 4 ) !default;
 /// Horizontal padding of checkbox list items.
 /// @group checkbox
 $kendo-checkbox-list-item-padding-x: 0px !default;
@@ -228,7 +212,7 @@ $kendo-checkbox-list-item-padding-y: $kendo-list-item-padding-y-md !default;
 
 /// Background color of checkbox ripple.
 /// @group checkbox
-$kendo-checkbox-ripple-bg: $kendo-checkbox-checked-bg !default;
+$kendo-checkbox-ripple-bg: get-theme-color-var( primary-100 ) !default;
 /// Opacity of checkbox ripple.
 /// @group checkbox
 $kendo-checkbox-ripple-opacity: .25 !default;

package/scss/checkbox/index.scss

@@ -8,12 +8,12 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
-@use "../core/module-system" as module;
+@use "../core/module-system/" as module;
 @include module.register( $_kendo-module-meta... );
 
 // Expose

package/scss/chip/_layout.scss

@@ -1,5 +1,6 @@
-@use "_variables.scss" as *;
-@use "../core/_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-chip--layout() {
 
@@ -133,10 +134,10 @@
 
     // Sizes
     @each $size, $size-props in $kendo-chip-sizes {
-        $_padding-x: map-get( $size-props, padding-x );
-        $_padding-y: map-get( $size-props, padding-y );
-        $_font-size: map-get( $size-props, font-size );
-        $_line-height: map-get( $size-props, line-height );
+        $_padding-x: map.get( $size-props, padding-x );
+        $_padding-y: map.get( $size-props, padding-y );
+        $_font-size: map.get( $size-props, font-size );
+        $_line-height: map.get( $size-props, line-height );
 
         .k-chip-#{$size} {
             --INTERNAL-kendo-chip-padding-x: #{ $_padding-x };

package/scss/chip/_theme.scss

@@ -1,5 +1,6 @@
-@use "_variables.scss" as *;
-@use "../core/mixins/" as *;
+@use "sass:map";
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-chip--theme() {
 
@@ -48,26 +49,26 @@
 
     @each $fill-mode, $theme-colors in $kendo-chip-theme-colors {
         @each $theme-color, $color-props in $theme-colors {
-            $_text-color: map-get( $color-props, text );
-            $_bg: map-get( $color-props, bg );
-            $_border-color: map-get( $color-props, border );
-
-            $_hover-text: map-get( $color-props, hover-text );
-            $_hover-bg: map-get( $color-props, hover-bg );
-            $_hover-border: map-get( $color-props, hover-border );
-
-            $_focus-text: map-get( $color-props, focus-text );
-            $_focus-bg: map-get( $color-props, focus-bg );
-            $_focus-border: map-get( $color-props, focus-border );
-            $_focus-outline: map-get( $color-props, focus-outline );
-
-            $_selected-text: map-get( $color-props, selected-text );
-            $_selected-bg: map-get( $color-props, selected-bg );
-            $_selected-border: map-get( $color-props, selected-border );
-
-            $_disabled-text: map-get( $color-props, disabled-text );
-            $_disabled-bg: map-get( $color-props, disabled-bg );
-            $_disabled-border: map-get( $color-props, disabled-border );
+            $_text-color: map.get( $color-props, text );
+            $_bg: map.get( $color-props, bg );
+            $_border-color: map.get( $color-props, border );
+
+            $_hover-text: map.get( $color-props, hover-text );
+            $_hover-bg: map.get( $color-props, hover-bg );
+            $_hover-border: map.get( $color-props, hover-border );
+
+            $_focus-text: map.get( $color-props, focus-text );
+            $_focus-bg: map.get( $color-props, focus-bg );
+            $_focus-border: map.get( $color-props, focus-border );
+            $_focus-outline: map.get( $color-props, focus-outline );
+
+            $_selected-text: map.get( $color-props, selected-text );
+            $_selected-bg: map.get( $color-props, selected-bg );
+            $_selected-border: map.get( $color-props, selected-border );
+
+            $_disabled-text: map.get( $color-props, disabled-text );
+            $_disabled-bg: map.get( $color-props, disabled-bg );
+            $_disabled-border: map.get( $color-props, disabled-border );
 
             .k-chip-#{$fill-mode}-#{$theme-color} {
                 --kendo-chip-text: var( --kendo-chip-#{$fill-mode}-#{$theme-color}-text, #{$_text-color} );