@progress/kendo-theme-fluent 5.7.0

package/scss/checkbox/_layout.scss

@@ -0,0 +1,248 @@
+@use "_variables.scss" as *;
+@use "../core/_variables.scss" as *;
+@use "../core/mixins/_disabled.scss" as *;
+
+@mixin kendo-checkbox--layout() {
+
+    // Checkbox
+    .k-checkbox {
+        margin: 0;
+        padding: 0;
+        width: var( --INTERNAL--kendo-checkbox-width, #{ $kendo-checkbox-width });
+        height: var( --INTERNAL--kendo-checkbox-height, #{ $kendo-checkbox-height });
+        line-height: initial;
+        border-width: var( --kendo-checkbox-border-width, #{$kendo-checkbox-border-width} );
+        border-style: solid;
+        outline: 0;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        display: inline-block;
+        flex: none;
+        vertical-align: middle;
+        position: relative;
+        cursor: pointer;
+        -webkit-appearance: none;
+    }
+
+
+    // Checkbox indicator
+    .k-checkbox::before {
+        @if $kendo-checkbox-indicator-type == "glyph" {
+            content: $kendo-checkbox-checked-glyph;
+            width: 1em;
+            height: 1em;
+            font-size: var( --INTERNAL-kendo-glyph-size, #{ calc(( map-get( $kendo-spacing, 4 ) - map-get( $kendo-spacing, thin ) )) });
+            font-family: var( --kendo-checkbox-glyph-font-family, #{ $kendo-checkbox-glyph-font-family } );
+            line-height: 1;
+            transform: translate(-50%, -50%) scale(0);
+            overflow: hidden;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+        }
+    }
+
+
+    // Checked state
+    .k-checkbox:checked,
+    .k-checkbox.k-checked {
+        @if $kendo-checkbox-indicator-type == "image" {
+            background-image: var( --kendo-checkbox-checked-image, #{ $kendo-checkbox-checked-image } );
+        }
+
+        @if $kendo-checkbox-indicator-type == "glyph" {
+            &::before {
+                transform: translate(-50%, -50%) scale(1);
+            }
+        }
+    }
+
+    .k-checkbox:focus,
+    .k-checkbox.k-focus {
+        &::before {
+            content: '';
+            display: block;
+            position: absolute;
+            margin: -4px;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            border: 1px solid #ccc;
+        }
+    }
+
+    // Indeterminate state
+    .k-checkbox:indeterminate,
+    .k-checkbox.k-indeterminate {
+        &::after {
+            content: "";
+            width: var( --INTERNAL--kendo-checkbox-indeterminate-width, #{ $kendo-checkbox-indeterminate-width });
+            height: var( --INTERNAL--kendo-checkbox-indeterminate-height, #{ $kendo-checkbox-indeterminate-height });
+            border-width: var( --INTERNAL--kendo-checkbox-indeterminate-border-width, 5px);
+            border-style: solid;
+            border-radius: 2px;
+            box-sizing: border-box;
+            position: absolute;
+            top: var( --INTERNAL--kendo-checkbox-indeterminate-top, #{ $kendo-checkbox-indeterminate-top });
+            left: var( --INTERNAL--kendo-checkbox-indeterminate-left, #{ $kendo-checkbox-indeterminate-left });
+        }
+    }
+
+    // Checkbox wrap
+    .k-checkbox-wrap {
+        flex: none;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        gap: 0;
+        align-items: center;
+        align-self: flex-start;
+        vertical-align: middle;
+        position: relative;
+
+        &::before {
+            content: "\200b";
+            width: 0px;
+            overflow: hidden;
+            flex: none;
+            display: inline-block;
+            vertical-align: top;
+        }
+    }
+
+
+    // Checkbox label
+    .k-checkbox-label {
+        margin: 0;
+        padding: 0;
+        display: inline-flex;
+        align-items: flex-start;
+        gap: var( --kendo-checkbox-label-margin-x, #{ $kendo-checkbox-label-margin-x } );
+        vertical-align: middle;
+        position: relative;
+        cursor: pointer;
+
+        .k-ripple {
+            // Hide ripple temporarily
+            visibility: hidden !important; // sass-lint:disable-line no-important
+        }
+    }
+    .k-checkbox + .k-label,
+    .k-checkbox-wrap + .k-label,
+    .k-checkbox + .k-checkbox-label,
+    .k-checkbox-wrap + .k-checkbox-label {
+        display: inline;
+        margin-inline-start: var( --kendo-checkbox-label-margin-x, #{ $kendo-checkbox-label-margin-x } );
+    }
+
+
+    // Empty label
+    .k-checkbox-label:empty {
+        display: none !important; // sass-lint:disable-line no-important
+    }
+    .k-checkbox-label.k-no-text {
+        min-width: 1px;
+    }
+
+
+    // Checkbox list
+    .k-checkbox-list {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-flow: column nowrap;
+        gap: 0;
+        list-style: none;
+    }
+    .k-checkbox-item,
+    .k-checkbox-list-item {
+        padding-inline: var( --kendo-checkbox-list-item-padding-x, #{ $kendo-checkbox-list-item-padding-x } );
+        padding-block: var( --kendo-checkbox-list-item-padding-y, #{ $kendo-checkbox-list-item-padding-y } );
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-content: center;
+        gap: map-get( $kendo-spacing, 2 );
+
+        .k-checkbox-label {
+            margin: 0;
+        }
+    }
+    .k-checkbox-list-horizontal,
+    .k-checkbox-list.k-list-horizontal {
+        display: flex;
+        flex-flow: row wrap;
+        gap: var( --kendo-checkbox-list-spacing, #{ $kendo-checkbox-list-spacing });
+    }
+
+
+    // Ripple
+    .k-ripple-container {
+        .k-checkbox::after {
+            content: "";
+            width: var( --INTERNAL-kendo-ripple-size-width, calc( map-get( $kendo-spacing, 5 ) * 3 ));
+            height: var( --INTERNAL-kendo-ripple-size-height, calc( map-get( $kendo-spacing, 5 ) * 3 ));
+            display: block;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            border-radius: 100%;
+            z-index: -1;
+            transition: opacity 100ms linear, transform 150ms cubic-bezier(.4, 0, .2, 1);
+            transform: translate(-50%, -50%) scale(0);
+            transform-origin: center center;
+        }
+
+        .k-checkbox:focus,
+        .k-checkbox.k-focus {
+            outline-style: solid;
+            outline-offset: 5rem;
+        }
+
+        .k-checkbox:disabled::after,
+        .k-checkbox.k-disabled::after {
+            display: none;
+        }
+    }
+
+
+    // Checkbox size
+    @each $size, $size-props in $kendo-checkbox-sizes {
+        $_size: map-get( $size-props, size );
+        $_glyph-size: map-get( $size-props, glyph-size );
+        $_ripple-size: map-get( $size-props, ripple-size );
+
+        .k-checkbox-#{$size} {
+            --INTERNAL--kendo-checkbox-width: #{ $_size };
+            --INTERNAL--kendo-checkbox-height: #{ $_size };
+
+            &::before {
+                --INTERNAL-kendo-glyph-size: #{ $_glyph-size };
+            }
+        }
+        .k-ripple-container {
+            .k-checkbox-#{size}::after {
+                --INTERNAL-kendo-ripple-size-width: #{ $_ripple-size };
+                --INTERNAL-kendo-ripple-size-height: #{ $_ripple-size };
+            }
+        }
+    }
+
+    @each $size, $size-props in $kendo-checkbox-indeterminate-sizes {
+        $_size: map-get( $size-props, size );
+        $_position: map-get( $size-props, position );
+        $_border-width: map-get( $size-props, border-width);
+
+        .k-checkbox-#{$size}:indeterminate,
+        .k-checkbox-#{$size}.k-indeterminate {
+                &::after {
+                    --INTERNAL--kendo-checkbox-indeterminate-width: #{ $size };
+                    --INTERNAL--kendo-checkbox-indeterminate-height: #{ $size };
+                    --INTERNAL--kendo-checkbox-indeterminate-top: #{  $_position };
+                    --INTERNAL--kendo-checkbox-indeterminate-left: #{  $_position };
+                    --INTERNAL--kendo-checkbox-indeterminate-border-width: #{ $_border-width };
+                }
+        }
+    }
+}

package/scss/checkbox/_theme.scss

@@ -0,0 +1,142 @@
+@use "_variables.scss" as *;
+@use "../core/mixins" as *;
+
+@mixin kendo-checkbox--theme() {
+
+     // 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 } )
+        );
+    }
+
+    // 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 } )
+        );
+
+        &: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 } ) );
+        }
+    }
+
+    // Indeterminate
+    .k-checkbox:indeterminate,
+    .k-checkbox.k-indeterminate {
+        @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 } )
+        );
+
+        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 } )
+                );
+            }
+        }
+    }
+
+
+    // Checked
+    .k-checkbox:checked,
+    .k-checkbox.k-checked {
+        @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 } )
+        );
+
+        // 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 } )
+            );
+        }
+    }
+
+    // Disabled
+    .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 } )
+        );
+    }
+
+
+    // Invalid
+    .k-checkbox.k-invalid {
+        @include fill( $border: var( --kendo-checkbox-invalid-border, #{ $kendo-checkbox-invalid-border} ) );
+    }
+    .k-checkbox.k-invalid + .k-checkbox-label {
+        @include fill( $color: var( --kendo-checkbox-invalid-text, #{ $kendo-checkbox-invalid-text } ) );
+    }
+
+
+    // Ripple
+    .k-checkbox-wrap .k-ripple-blob {
+        color: var( --kendo-checkbox-ripple-bg, #{ $kendo-checkbox-ripple-bg } );
+        opacity: var( --kendo-checkbox-ripple-opacity, #{ $kendo-checkbox-ripple-opacity } );
+    }
+    .k-ripple-container {
+        .k-checkbox::after {
+            background: var( --kendo-checkbox-ripple-bg, #{ $kendo-checkbox-ripple-bg } );
+            opacity: var( --kendo-checkbox-ripple-opacity, #{ $kendo-checkbox-ripple-opacity } );
+        }
+    }
+}

package/scss/checkbox/_variables.scss

@@ -0,0 +1,234 @@
+@use "../core/color-system/" as *;
+@use "../core/_variables.scss" as *;
+@use "../list/_variables.scss" as *;
+@use "../core/functions/" as *;
+// Checkbox
+
+/// Border width of checkbox.
+/// @group checkbox
+$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 )
+    ),
+    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 ))
+    ),
+    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 )
+    )
+) !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;
+/// Color of checkbox.
+/// @group checkbox
+$kendo-checkbox-text: initial !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;
+/// Color of hovered checkbox.
+/// @group checkbox
+$kendo-checkbox-hover-text: var( --kendo-body-text, initial ) !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;
+/// Border color of checked checkbox.
+/// @group checkbox
+$kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !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;
+/// 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.
+/// @group checkbox
+$kendo-checkbox-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
+/// Border color of focused and checked checkbox.
+/// @group checkbox
+$kendo-checkbox-focus-checked-border: null !default;
+/// Box shadow of focused and checked checkbox.
+/// @group checkbox
+$kendo-checkbox-focus-checked-shadow: 0 0 0 2px rgba( get-theme-color-var( primary-100 ), .3 ) !default;
+
+/// Background color of disabled checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-bg: $white !default;
+/// Color of disabled checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-text: null !default;
+/// Border color of disabled checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-border: get-theme-color-var( neutral-60 ) !default;
+
+/// Background color of disabled and checked checkbox.
+/// @group checkbox
+$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;
+/// Border color of disabled and checked checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-checked-border: get-theme-color-var( neutral-60 ) !default;
+
+/// Background color of invalid checkbox.
+/// @group checkbox
+$kendo-checkbox-invalid-bg: null !default;
+/// Color of invalid checkbox.
+/// @group checkbox
+$kendo-checkbox-invalid-text: $kendo-invalid-text !default;
+/// Border color of invalid checkbox.
+/// @group checkbox
+$kendo-checkbox-invalid-border: $kendo-invalid-border !default;
+
+
+// Checkbox indicator
+
+/// Type of checkbox indicator.
+/// @group checkbox
+$kendo-checkbox-indicator-type: image !default;
+
+/// Glyph font family of checkbox indicator.
+/// @group checkbox
+$kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
+/// Glyph of checkbox indicator.
+/// @group checkbox
+$kendo-checkbox-checked-glyph: "\e118" !default;
+/// Glyph of indeterminate checkbox indicator.
+/// @group checkbox
+$kendo-checkbox-indeterminate-glyph: "\e121" !default;
+
+/// Image of checked checkbox indicator.
+/// @group checkbox
+$kendo-checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+/// 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-hovered-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></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;
+
+
+// Checkbox list
+
+/// Spacing between items of horizontal checkbox list.
+/// @group checkbox
+$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;
+/// Vertical padding of checkbox list items.
+/// @group checkbox
+$kendo-checkbox-list-item-padding-y: $kendo-list-item-padding-y-md !default;
+
+
+// Checkbox ripple
+
+/// Background color of checkbox ripple.
+/// @group checkbox
+$kendo-checkbox-ripple-bg: $kendo-checkbox-checked-bg !default;
+/// Opacity of checkbox ripple.
+/// @group checkbox
+$kendo-checkbox-ripple-opacity: .25 !default;

package/scss/checkbox/index.scss

@@ -0,0 +1,25 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "checkbox",
+    dependencies: (
+        'list'
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "checkbox" ) {
+        @include kendo-checkbox--layout();
+        @include kendo-checkbox--theme();
+    }
+}