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

package/scss/checkbox/_variables.scss

@@ -7,72 +7,102 @@
 
 /// The border width of the CheckBox.
 /// @group checkbox
-$kendo-checkbox-border-width: 1px !default;
+$kendo-checkbox-border-width: var( --kendo-checkbox-border-width, 1px ) !default;
+
+/// The size of a small CheckBox.
+/// @group checkbox
+$kendo-checkbox-sm-size: var( --kendo-checkbox-sm-size, k-spacing(4) ) !default;
+/// The size of a medium CheckBox.
+/// @group checkbox
+$kendo-checkbox-md-size: var( --kendo-checkbox-md-size, k-spacing(5) ) !default;
+/// The size of a large CheckBox.
+/// @group checkbox
+$kendo-checkbox-lg-size: var( --kendo-checkbox-lg-size, k-spacing(6) ) !default;
+
+/// The glyph size of a small CheckBox.
+/// @group checkbox
+$kendo-checkbox-sm-glyph-size: var( --kendo-checkbox-sm-glyph-size, k-spacing(3.5) ) !default;
+/// The glyph size of a medium CheckBox.
+/// @group checkbox
+$kendo-checkbox-md-glyph-size: var( --kendo-checkbox-md-glyph-size, k-spacing(4.5) ) !default;
+/// The glyph size of a large CheckBox.
+/// @group checkbox
+$kendo-checkbox-lg-glyph-size: var( --kendo-checkbox-lg-glyph-size, k-spacing(5.5) ) !default;
+
+/// The ripple size of a small CheckBox.
+/// @group checkbox
+$kendo-checkbox-sm-ripple-size: var( --kendo-checkbox-sm-ripple-size, 300% ) !default;
+/// The ripple size of a medium CheckBox.
+/// @group checkbox
+$kendo-checkbox-md-ripple-size: var( --kendo-checkbox-md-ripple-size, 300% ) !default;
+/// The ripple size of a large CheckBox.
+/// @group checkbox
+$kendo-checkbox-lg-ripple-size: var( --kendo-checkbox-lg-ripple-size, 300% ) !default;
 
 // A map with the different CheckBox sizes.
 $kendo-checkbox-sizes: (
     sm: (
-        size: k-spacing(4),
-        glyph-size: k-spacing(3.5),
+        size: $kendo-checkbox-sm-size,
+        glyph-size: $kendo-checkbox-sm-glyph-size,
+        ripple-size: $kendo-checkbox-sm-ripple-size,
         indicator-size: k-spacing(4),
         indeterminate-size: k-spacing(3),
-        ripple-size: 300%
     ),
     md: (
-        size: k-spacing(5),
-        glyph-size: k-spacing(4.5),
+        size: $kendo-checkbox-md-size,
+        glyph-size: $kendo-checkbox-md-glyph-size,
+        ripple-size: $kendo-checkbox-md-ripple-size,
         indicator-size: k-spacing(4),
         indeterminate-size: k-spacing(4),
-        ripple-size: 300%
     ),
     lg: (
-        size: k-spacing(6),
-        glyph-size: k-spacing(5.5),
+        size: $kendo-checkbox-lg-size,
+        glyph-size: $kendo-checkbox-lg-glyph-size,
+        ripple-size: $kendo-checkbox-lg-ripple-size,
         indicator-size: k-spacing(4),
         indeterminate-size: k-spacing(5),
-        ripple-size: 300%
     )
 ) !default;
 
 /// The background color of the CheckBox.
 /// @group checkbox
-$kendo-checkbox-bg: k-color(surface-alt) !default;
+$kendo-checkbox-bg: var( --kendo-checkbox-bg, k-color(surface-alt) ) !default;
 /// The text color of the CheckBox.
 /// @group checkbox
-$kendo-checkbox-text: transparent !default;
+$kendo-checkbox-text: var( --kendo-checkbox-text, transparent ) !default;
 /// The border color of the CheckBox.
 /// @group checkbox
-$kendo-checkbox-border: k-color(border-alt) !default;
+$kendo-checkbox-border: var( --kendo-checkbox-border, k-color(border-alt) ) !default;
 
 /// The background color of the hovered CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-bg: $kendo-checkbox-bg !default;
+$kendo-checkbox-hover-bg: var( --kendo-checkbox-hover-bg, $kendo-checkbox-bg ) !default;
 /// The text color of the hovered CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-text: k-color(on-app-surface) !default;
+$kendo-checkbox-hover-text: var( --kendo-checkbox-hover-text, k-color(on-app-surface) ) !default;
 /// The border color of the hovered CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-border: $kendo-checkbox-border !default;
+$kendo-checkbox-hover-border: var( --kendo-checkbox-hover-border, $kendo-checkbox-border ) !default;
 
 /// The background color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-bg: k-color(primary) !default;
+$kendo-checkbox-checked-bg: var( --kendo-checkbox-checked-bg, k-color(primary) ) !default;
 /// The text color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-text: k-color(app-surface) !default;
+$kendo-checkbox-checked-text: var( --kendo-checkbox-checked-text, k-color(app-surface) ) !default;
 /// The border color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
+$kendo-checkbox-checked-border: var( --kendo-checkbox-checked-border, $kendo-checkbox-checked-bg ) !default;
 
-/// The background of the hovered and checked CheckBox.
+/// The background color of the indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-checked-bg: k-color(primary-hover) !default;
-/// The text color of the hovered and checked CheckBox.
+$kendo-checkbox-indeterminate-bg: var( --kendo-checkbox-indeterminate-bg, $kendo-checkbox-bg ) !default;
+/// The text color of the indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-checked-text: k-color(app-surface) !default;
-/// The border color of the hovered and checked CheckBox.
+$kendo-checkbox-indeterminate-text: var( --kendo-checkbox-indeterminate-text, k-color(primary) ) !default;
+/// The border color of the indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-checked-border: $kendo-checkbox-hover-checked-bg !default;
+$kendo-checkbox-indeterminate-border: var( --kendo-checkbox-indeterminate-border, k-color(primary) ) !default;
 
 /// The border color of the focused CheckBox.
 /// @group checkbox
@@ -80,68 +110,75 @@ $kendo-checkbox-focus-border: null !default;
 /// The box shadow of the focused CheckBox.
 /// @group checkbox
 $kendo-checkbox-focus-shadow: null !default;
+/// The border color of the focused and checked CheckBox.
+/// @group checkbox
+$kendo-checkbox-focus-checked-border: null !default;
+/// The box shadow of the focused and checked CheckBox.
+/// @group checkbox
+$kendo-checkbox-focus-checked-shadow: null !default;
 /// The outline of the focused CheckBox.
 /// @group checkbox
 $kendo-checkbox-focus-outline: 1px solid k-color(base-emphasis) !default;
+/// The outline offset of the focused CheckBox.
+/// @group checkbox
 $kendo-checkbox-focus-outline-offset: 2px !default;
 
-/// The background color of the indeterminate CheckBox.
+/// The background color of the disabled CheckBox.
 /// @group checkbox
-$kendo-checkbox-indeterminate-bg: $kendo-checkbox-bg !default;
-/// The text color of the indeterminate CheckBox.
+$kendo-checkbox-disabled-bg: var( --kendo-checkbox-disabled-bg, $kendo-checkbox-bg ) !default;
+/// The text color of the disabled CheckBox.
 /// @group checkbox
-$kendo-checkbox-indeterminate-text: k-color(primary) !default;
-/// The border color of the indeterminate CheckBox.
+$kendo-checkbox-disabled-text: var( --kendo-checkbox-disabled-text, color-mix(in srgb, k-color(on-app-surface) 28%, transparent) ) !default;
+/// The border color of the disabled CheckBox.
 /// @group checkbox
-$kendo-checkbox-indeterminate-border: k-color(primary) !default;
+$kendo-checkbox-disabled-border: var( --kendo-checkbox-disabled-border, color-mix(in srgb, k-color(on-app-surface) 28%, transparent) ) !default;
 
-/// The background color of the hovered and indeterminate CheckBox.
+/// The background color of the disabled and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-indeterminate-bg: $kendo-checkbox-bg !default;
-/// The text color of the hovered and indeterminate CheckBox.
+$kendo-checkbox-disabled-checked-bg: var( --kendo-checkbox-disabled-checked-bg, $kendo-checkbox-disabled-border ) !default;
+/// The text color of the disabled and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-indeterminate-text: k-color(primary-hover) !default;
-/// The border color of the hovered and indeterminate CheckBox.
+$kendo-checkbox-disabled-checked-text: var( --kendo-checkbox-disabled-checked-text, k-color(app-surface) ) !default;
+/// The border color of the disabled and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-hover-indeterminate-border: k-color(primary-hover) !default;
+$kendo-checkbox-disabled-checked-border: var( --kendo-checkbox-disabled-checked-border, transparent ) !default;
 
-/// The background color of the disabled CheckBox.
+/// The text color of an invalid CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-bg: $kendo-checkbox-bg !default;
-/// The text color of the disabled CheckBox.
+$kendo-checkbox-invalid-text: var( --kendo-checkbox-invalid-text, k-color(error-on-surface) ) !default;
+/// The border color of an invalid CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-text: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
-/// The border color of the disabled CheckBox.
+$kendo-checkbox-invalid-border: var( --kendo-checkbox-invalid-border, k-color(error-emphasis) ) !default;
+
+/// The background of the hovered and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-border: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
+$kendo-checkbox-hover-checked-bg: var( --kendo-checkbox-hover-checked-bg, k-color(primary-hover) ) !default;
+/// The text color of the hovered and checked CheckBox.
+/// @group checkbox
+$kendo-checkbox-hover-checked-text: var( --kendo-checkbox-hover-checked-text, k-color(app-surface) ) !default;
+/// The border color of the hovered and checked CheckBox.
+/// @group checkbox
+$kendo-checkbox-hover-checked-border: var( --kendo-checkbox-hover-checked-border, $kendo-checkbox-hover-checked-bg ) !default;
 
-/// The background color of the disabled and checked CheckBox.
+/// The background color of the hovered and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-bg: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
-/// The text color of the disabled and checked CheckBox.
+$kendo-checkbox-hover-indeterminate-bg: var( --kendo-checkbox-hover-indeterminate-bg, $kendo-checkbox-bg ) !default;
+/// The text color of the hovered and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-text: k-color(app-surface) !default;
-/// The border color of the disabled and checked CheckBox.
+$kendo-checkbox-hover-indeterminate-text: var( --kendo-checkbox-hover-indeterminate-text, k-color(primary-hover) ) !default;
+/// The border color of the hovered and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-border: transparent !default;
+$kendo-checkbox-hover-indeterminate-border: var( --kendo-checkbox-hover-indeterminate-border, k-color(primary-hover) ) !default;
 
 /// The background color of the disabled and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-indeterminate-bg: $kendo-checkbox-bg !default;
+$kendo-checkbox-disabled-indeterminate-bg: var( --kendo-checkbox-disabled-indeterminate-bg, $kendo-checkbox-bg ) !default;
 /// The border color of the disabled and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-indeterminate-text: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
+$kendo-checkbox-disabled-indeterminate-text: var( --kendo-checkbox-disabled-indeterminate-text, $kendo-checkbox-disabled-text ) !default;
 /// The border color of the disabled and indeterminate CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-indeterminate-border: color-mix(in srgb, k-color(on-app-surface) 28%, transparent) !default;
-
-/// The text color of an invalid CheckBox.
-/// @group checkbox
-$kendo-checkbox-invalid-text: k-color(error-on-surface) !default;
-/// The border color of an invalid CheckBox.
-/// @group checkbox
-$kendo-checkbox-invalid-border: k-color(error-emphasis) !default;
-
+$kendo-checkbox-disabled-indeterminate-border: var( --kendo-checkbox-disabled-indeterminate-border, $kendo-checkbox-disabled-border ) !default;
 
 // Checkbox indicator
 
@@ -151,59 +188,109 @@ $kendo-checkbox-indicator-type: image !default;
 
 /// The font family of the CheckBox indicator glyph.
 /// @group checkbox
-$kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
+$kendo-checkbox-glyph-font-family: var( --kendo-checkbox-glyph-font-family, "WebComponentsIcons", monospace ) !default;
 /// The glyph of the CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-checked-glyph: "\e118" !default;
+$kendo-checkbox-checked-glyph: var( --kendo-checkbox-checked-glyph, "\e118" ) !default;
 /// The glyph of the indeterminate CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-indeterminate-glyph: "\e121" !default;
+$kendo-checkbox-indeterminate-glyph: var( --kendo-checkbox-indeterminate-glyph, "\e121" ) !default;
 
-/// The image of the hovered CheckBox indicator.
-/// @group checkbox
-$kendo-checkbox-hover-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#323130' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
 /// The image of the checked CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+$kendo-checkbox-checked-image: var( --kendo-checkbox-checked-image, #{ k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") )} ) !default;
 /// The image of the indeterminate CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#0078d4'/></svg>") ) !default;
+$kendo-checkbox-indeterminate-image: var( --kendo-checkbox-indeterminate-image, #{ k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#0078d4'/></svg>") )} ) !default;
+
+/// The image of the hovered CheckBox indicator.
+/// @group checkbox
+$kendo-checkbox-hover-image: var( --kendo-checkbox-hover-image, #{ k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#323130' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") )} ) !default;
 /// The image of the hovered and indeterminate CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-hover-indeterminate-image: k-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='#106ebe'/></svg>") ) !default;
+$kendo-checkbox-hover-indeterminate-image: var( --kendo-checkbox-hover-indeterminate-image, #{ k-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='#106ebe'/></svg>") )} ) !default;
 /// The image of the checked CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+$kendo-checkbox-disabled-checked-image: var( --kendo-checkbox-disabled-checked-image, #{ k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) }) !default;
 /// The image of the indeterminate CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-disabled-indeterminate-image: k-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='#323130'/></svg>") ) !default;
-
+$kendo-checkbox-disabled-indeterminate-image: var( --kendo-checkbox-disabled-indeterminate-image, #{ k-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='#323130'/></svg>") )} ) !default;
 
 // Checkbox label
 
 /// The horizontal margin of the CheckBox inside a label.
 /// @group checkbox
-$kendo-checkbox-label-margin-x: k-spacing(2) !default;
+$kendo-checkbox-label-margin-x: var( --kendo-checkbox-label-margin-x, k-spacing(2) ) !default;
 
 
 // Checkbox list
 
 /// The spacing between the items in a horizontal CheckBox list.
 /// @group checkbox
-$kendo-checkbox-list-spacing: k-spacing(4) !default;
+$kendo-checkbox-list-spacing: var( --kendo-checkbox-list-spacing, k-spacing(4) ) !default;
 /// The horizontal padding of the CheckBox list items.
 /// @group checkbox
-$kendo-checkbox-list-item-padding-x: k-spacing(0) !default;
+$kendo-checkbox-list-item-padding-x: var( --kendo-checkbox-list-item-padding-x, k-spacing(0) ) !default;
 /// The vertical padding of the CheckBox list items.
 /// @group checkbox
-$kendo-checkbox-list-item-padding-y: $kendo-list-md-item-padding-y !default;
+$kendo-checkbox-list-item-padding-y: var( --kendo-checkbox-list-item-padding-y, k-spacing(2) )!default;
 
 
 // Checkbox ripple
 
 /// The background color of the CheckBox' ripple.
 /// @group checkbox
-$kendo-checkbox-ripple-bg: k-color(primary) !default;
+$kendo-checkbox-ripple-bg: var( --kendo-checkbox-ripple-bg, k-color(primary) ) !default;
 /// The opacity of the CheckBox' ripple.
 /// @group checkbox
-$kendo-checkbox-ripple-opacity: .25 !default;
+$kendo-checkbox-ripple-opacity: var( --kendo-checkbox-ripple-opacity, .25 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/checkbox/_variables.scss" with (
+    $kendo-checkbox-border-width: $kendo-checkbox-border-width,
+    $kendo-checkbox-sm-size: $kendo-checkbox-sm-size,
+    $kendo-checkbox-md-size: $kendo-checkbox-md-size,
+    $kendo-checkbox-lg-size: $kendo-checkbox-lg-size,
+    $kendo-checkbox-sm-glyph-size: $kendo-checkbox-sm-glyph-size,
+    $kendo-checkbox-md-glyph-size: $kendo-checkbox-md-glyph-size,
+    $kendo-checkbox-lg-glyph-size: $kendo-checkbox-lg-glyph-size,
+    $kendo-checkbox-sm-ripple-size: $kendo-checkbox-sm-ripple-size,
+    $kendo-checkbox-md-ripple-size: $kendo-checkbox-md-ripple-size,
+    $kendo-checkbox-lg-ripple-size: $kendo-checkbox-lg-ripple-size,
+    $kendo-checkbox-sizes: $kendo-checkbox-sizes,
+    $kendo-checkbox-bg: $kendo-checkbox-bg,
+    $kendo-checkbox-text: $kendo-checkbox-text,
+    $kendo-checkbox-border: $kendo-checkbox-border,
+    $kendo-checkbox-hover-bg: $kendo-checkbox-hover-bg,
+    $kendo-checkbox-hover-text: $kendo-checkbox-hover-text,
+    $kendo-checkbox-hover-border: $kendo-checkbox-hover-border,
+    $kendo-checkbox-checked-bg: $kendo-checkbox-checked-bg,
+    $kendo-checkbox-checked-text: $kendo-checkbox-checked-text,
+    $kendo-checkbox-checked-border: $kendo-checkbox-checked-border,
+    $kendo-checkbox-indeterminate-bg: $kendo-checkbox-indeterminate-bg,
+    $kendo-checkbox-indeterminate-text: $kendo-checkbox-indeterminate-text,
+    $kendo-checkbox-indeterminate-border: $kendo-checkbox-indeterminate-border,
+    $kendo-checkbox-focus-border: $kendo-checkbox-focus-border,
+    $kendo-checkbox-focus-shadow: $kendo-checkbox-focus-shadow,
+    $kendo-checkbox-focus-checked-border: $kendo-checkbox-focus-checked-border,
+    $kendo-checkbox-focus-checked-shadow: $kendo-checkbox-focus-checked-shadow,
+    $kendo-checkbox-disabled-bg: $kendo-checkbox-disabled-bg,
+    $kendo-checkbox-disabled-text: $kendo-checkbox-disabled-text,
+    $kendo-checkbox-disabled-border: $kendo-checkbox-disabled-border,
+    $kendo-checkbox-disabled-checked-bg: $kendo-checkbox-disabled-checked-bg,
+    $kendo-checkbox-disabled-checked-text: $kendo-checkbox-disabled-checked-text,
+    $kendo-checkbox-disabled-checked-border: $kendo-checkbox-disabled-checked-border,
+    $kendo-checkbox-invalid-text: $kendo-checkbox-invalid-text,
+    $kendo-checkbox-invalid-border: $kendo-checkbox-invalid-border,
+    $kendo-checkbox-indicator-type: $kendo-checkbox-indicator-type,
+    $kendo-checkbox-glyph-font-family: $kendo-checkbox-glyph-font-family,
+    $kendo-checkbox-checked-glyph: $kendo-checkbox-checked-glyph,
+    $kendo-checkbox-indeterminate-glyph: $kendo-checkbox-indeterminate-glyph,
+    $kendo-checkbox-checked-image: $kendo-checkbox-checked-image,
+    $kendo-checkbox-indeterminate-image: $kendo-checkbox-indeterminate-image,
+    $kendo-checkbox-label-margin-x: $kendo-checkbox-label-margin-x,
+    $kendo-checkbox-list-spacing: $kendo-checkbox-list-spacing,
+    $kendo-checkbox-list-item-padding-x: $kendo-checkbox-list-item-padding-x,
+    $kendo-checkbox-list-item-padding-y: $kendo-checkbox-list-item-padding-y,
+    $kendo-checkbox-ripple-bg: $kendo-checkbox-ripple-bg,
+    $kendo-checkbox-ripple-opacity: $kendo-checkbox-ripple-opacity
+);

package/scss/chip/_layout.scss

@@ -1,39 +1,16 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/chip/_layout.scss" as *;
 
 @mixin kendo-chip--layout() {
 
+    @include kendo-chip--layout-base();
+
     // Chip
     .k-chip {
-        padding-inline: var( --kendo-chip-padding-x, 0 );
-        padding-block: var( --kendo-chip-padding-y, 0 );
-        border-width: var( --kendo-chip-border-width, #{ $kendo-chip-border-width } );
-        border-style: solid;
-        outline: 0;
-        font-family: var( --kendo-chip-font-family, #{ $kendo-chip-font-family } );
-        font-weight: var( --kendo-chip-font-weight, #{ $kendo-chip-font-weight } ) ;
-        font-size: var( --kendo-chip-font-size, 1rem );
-        line-height: var( --kendo-chip-line-height, normal );
-        display: inline-flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        justify-content: center;
-        gap: var( --kendo-chip-spacing, #{ $kendo-chip-spacing } );
-        position: relative;
-        overflow: hidden;
-        cursor: pointer;
-        user-select: none;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        .k-selected-icon-wrapper {
-            display: none !important; // stylelint-disable-line declaration-no-important
-        }
+        // TODO: Decide wether to define the same variable for the rest of the themes, or remove it
+        font-family: $kendo-chip-font-family;
 
         &:hover,
         &:focus {
@@ -46,122 +23,19 @@
                 content: '';
                 position: absolute;
                 border: medium none;
-                inset: var( --kendo-chip-focus-offset, #{ $kendo-chip-focus-offset } );
-                outline-width: var( --kendo-chip-focus-outline-width, #{ $kendo-chip-focus-outline-width } );
-                outline-style: var( --kendo-chip-focus-outline-style, #{ $kendo-chip-focus-outline-style } );
+                inset: $kendo-chip-focus-offset;
+                outline-width: $kendo-chip-focus-outline-width;
+                outline-style: $kendo-chip-focus-outline-style;
                 z-index: 1;
         }
     }
 
 
-    // Chip content
-    .k-chip-content {
-        min-width: 0;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        flex: 1 1 auto;
-
-        // Adjustment for kendo-icon-wrapper
-        .k-icon-wrapper-host {
-            display: initial;
-        }
-    }
-
-    .k-chip-content:first-child {
-        margin-inline-start: var( --kendo-chip-spacing, #{ $kendo-chip-spacing } );
-    }
-    .k-chip-content:last-child {
-        margin-inline-end: var( --kendo-chip-spacing, #{ $kendo-chip-spacing } );
-    }
-
-    // Chip text
-    .k-chip-text,
-    .k-chip-label {
-        padding-block: .5em;
-        padding-inline: 0;
-        margin-block: -.5em;
-        margin-inline: 0;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        flex: 1 1 auto;
-    }
-
-
     // Chip avatar
     .k-chip-avatar {
-        width: var( --kendo-chip-avatar-width, #{ $kendo-chip-avatar-width } );
-        height: var( --kendo-chip-avatar-height, #{ $kendo-chip-avatar-height } );
-        flex-basis: var( --kendo-chip-avatar-flex-basis, #{ $kendo-chip-avatar-flex-basis } );
-        border-radius: 50%;
-        background-size: cover;
-        background-position: center;
-    }
-
-
-    // Chip icon
-    .k-chip-icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex: none;
-    }
-
-
-    // Actions
-    .k-chip-actions {
-        margin-block: -5em;
-        margin-inline: 0;
-        flex: none;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        align-self: center;
-    }
-    .k-chip-action {
-        flex: none;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        align-self: center;
-    }
-
-
-    // Chip list
-    .k-chip-list {
-        min-width: 0px;
-        display: inline-flex;
-        flex-wrap: wrap;
-        align-items: center;
-        position: relative;
-    }
-
-
-    // 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 );
-
-        .k-chip-#{$size} {
-            --kendo-chip-padding-x: #{ $_padding-x };
-            --kendo-chip-padding-y: #{ $_padding-y };
-            --kendo-chip-font-size: #{ $_font-size };
-            --kendo-chip-line-height: #{ $_line-height };
-
-            .k-chip-action {
-                padding: $_padding-y;
-            }
-        }
-    }
-
-    // Sizes
-    @each $name, $size in $kendo-chip-list-sizes {
-        .k-chip-list-#{$name} {
-            gap: $size;
-        }
+        width: $kendo-chip-avatar-width;
+        height: $kendo-chip-avatar-height;
+        flex-basis: $kendo-chip-avatar-flex-basis;
     }
 
 }