@progress/kendo-theme-meridian 14.0.0-dev.1

package/scss/chat/_variables.scss

@@ -0,0 +1,315 @@
+@use "../core/_index.scss" as *;
+@use "../toolbar/_variables.scss" as *;
+
+// Chat
+
+/// The horizontal padding of the Chat.
+/// @group chat
+$kendo-chat-padding-x: k-spacing(5) !default;
+/// The vertical padding of the Chat.
+/// @group chat
+$kendo-chat-padding-y: k-spacing(5) !default;
+/// The minimum width of the Chat.
+/// @group chat
+$kendo-chat-width: 280px !default;
+/// The minimum height of the Chat.
+/// @group chat
+$kendo-chat-height: 320px !default;
+/// The border width of the Chat.
+/// @group chat
+$kendo-chat-border-width: 1px !default;
+/// The border radius of the Chat.
+/// @group chat
+$kendo-chat-border-radius: k-border-radius(xxl) !default;
+/// The font family of the Chat.
+/// @group chat
+$kendo-chat-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the Chat.
+/// @group chat
+$kendo-chat-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the Chat.
+/// @group chat
+$kendo-chat-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The vertical spacing between the items of the Chat.
+/// @group chat
+$kendo-chat-item-spacing-y: k-spacing(4) !default;
+
+/// The maximum width of the Chat message.
+/// @group chat
+$kendo-chat-message-max-width: min(75%, 460px) !default;
+/// The spacing between the items of the Chat message.
+/// @group chat
+$kendo-chat-message-gap: k-spacing(2) !default;
+
+/// The border radius of sequential Chat messages.
+/// @group chat
+$kendo-sequential-messages-border-radius: k-border-radius(sm) !default;
+
+/// The horizontal padding of the Chat message list.
+/// @group chat
+$kendo-chat-message-list-padding-x: $kendo-chat-padding-x !default;
+/// The vertical padding of the Chat message list.
+/// @group chat
+$kendo-chat-message-list-padding-y: $kendo-chat-padding-y !default;
+/// The spacing of the Chat message list.
+/// @group chat
+$kendo-chat-message-list-spacing: $kendo-chat-item-spacing-y !default;
+/// The spacing of the Chat message box wrapper.
+/// @group chat
+$kendo-chat-message-box-wrapper-spacing: k-spacing(3) !default;
+
+/// The minimum size of the Chat message status.
+/// @group chat
+$kendo-chat-status-min-size: k-spacing(1.5) !default;
+/// The maximum size of the Chat message status.
+/// @group chat
+$kendo-chat-status-max-size: k-spacing(8) !default;
+/// The spacing between the icon and text in the Chat message status.
+/// @group chat
+$kendo-chat-message-status-gap: k-spacing(1) !default;
+
+/// The font size of the Chat timestamp.
+/// @group chat
+$kendo-chat-timestamp-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The line height of the Chat timestamp.
+/// @group chat
+$kendo-chat-timestamp-line-height: var( --kendo-line-height-lg, normal ) !default;
+/// The text transform of the Chat timestamp.
+/// @group chat
+$kendo-chat-timestamp-transform: none !default;
+/// The text color of the Chat timestamp.
+/// @group chat
+$kendo-chat-timestamp-text: k-color(subtle) !default;
+/// The background color of the Chat timestamp.
+/// @group chat
+$kendo-chat-timestamp-bg: null !default;
+/// The background color of the Chat timestamp separator.
+/// @group chat
+$kendo-chat-timestamp-separator-bg: k-color(border) !default;
+/// The spacing between the Chat timestamp and its separator.
+/// @group chat
+$kendo-chat-timestamp-separator-spacing: k-spacing(1) !default;
+
+/// The font size of the Chat message meta text.
+/// @group chat
+$kendo-chat-message-meta-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The line height of the Chat message meta text.
+/// @group chat
+$kendo-chat-message-meta-line-height: var( --kendo-line-height-xs, normal ) !default;
+
+/// The font size of the Chat author text.
+/// @group chat
+$kendo-chat-author-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The line height of the Chat author text.
+/// @group chat
+$kendo-chat-author-line-height: var( --kendo-line-height-xs, normal ) !default;
+
+/// The text color of the Chat status.
+/// @group chat
+$kendo-chat-status-text: k-color(subtle) !default;
+
+/// The spacing of the Chat bubble message.
+/// @group chat
+$kendo-chat-bubble-spacing: k-spacing(1) !default;
+
+/// The background color of the Chat Toolbar.
+/// @group chat
+$kendo-chat-toolbar-bg: $kendo-toolbar-bg !default;
+/// The text color of the Chat Toolbar.
+/// @group chat
+$kendo-chat-toolbar-text: $kendo-toolbar-text !default;
+/// The border color of the Chat Toolbar.
+/// @group chat
+$kendo-chat-toolbar-border: inherit !default;
+
+/// The background color of the Chat.
+/// @group chat
+$kendo-chat-bg: k-color(app-surface) !default;
+/// The text color of the Chat.
+/// @group chat
+$kendo-chat-text: k-color(on-app-surface) !default;
+/// The border color of the Chat.
+/// @group chat
+$kendo-chat-border: k-color(border) !default;
+
+/// The color of the typing indicator dots.
+/// @group chat
+$kendo-chat-typing-indicator-text: k-color(base-on-subtle) !default;
+
+/// The background color of the Chat alt bubble.
+/// @group chat
+$kendo-chat-alt-bubble-bg: k-color(secondary-subtle) !default;
+/// The text color of the Chat alt bubble.
+/// @group chat
+$kendo-chat-alt-bubble-text: k-color(secondary-on-subtle) !default;
+/// The border color of the Chat alt bubble.
+/// @group chat
+$kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
+/// The shadow of the Chat alt bubble.
+/// @group chat
+$kendo-chat-alt-bubble-shadow: none !default;
+/// The background color of the hovered alt Bubble.
+/// @group bubble
+$kendo-chat-alt-bubble-hover-bg: k-color(secondary-subtle-hover) !default;
+/// The border color of the hovered alt Bubble.
+/// @group bubble
+$kendo-chat-alt-bubble-hover-border: $kendo-chat-alt-bubble-hover-bg !default;
+/// The background color of the active Bubble.
+/// @group bubble
+$kendo-chat-alt-bubble-active-bg: k-color(secondary-subtle-active) !default;
+/// The border color of the active alt Bubble.
+/// @group bubble
+$kendo-chat-alt-bubble-active-border: $kendo-chat-alt-bubble-active-bg !default;
+/// The background color of the focused alt Bubble.
+/// @group bubble
+$kendo-chat-alt-bubble-focus-bg: $kendo-chat-alt-bubble-bg !default;
+/// The border color of the focused alt Bubble.
+/// @group bubble
+$kendo-chat-alt-bubble-focus-border: $kendo-chat-alt-bubble-focus-bg !default;
+/// The box shadow of the focused alt Bubble.
+/// @group bubble
+$kendo-chat-alt-bubble-focus-shadow: null !default;
+
+/// The outline color of the focused alt Bubble.
+/// @group chat
+$kendo-chat-alt-bubble-focus-outline-color: k-color(secondary-on-surface) !default;
+/// The outline width of the focused alt Bubble.
+/// @group chat
+$kendo-chat-alt-bubble-focus-outline-width: 1px !default;
+/// The outline offset of the focused alt Bubble.
+/// @group chat
+$kendo-chat-alt-bubble-focus-outline-offset: 1px !default;
+
+/// The text color of the bubble of the failed Chat message.
+/// @group chat
+$kendo-chat-failed-bubble-text: k-color(base-on-subtle) !default;
+/// The background color of the bubble of the failed Chat message.
+/// @group chat
+$kendo-chat-failed-bubble-bg: k-color(error-subtle) !default;
+/// The border color of the bubble of the failed Chat message.
+/// @group chat
+$kendo-chat-failed-bubble-border: k-color(error-emphasis) !default;
+/// The text color of the failed Chat message content.
+/// @group chat
+$kendo-chat-failed-content-color: k-color(error-on-surface) !default;
+
+/// The background color of the hovered bubble of the failed Chat message.
+/// @group chat
+$kendo-chat-failed-bubble-hover-bg: k-color(error-subtle-hover) !default;
+
+/// The background color of the selected bubble of the failed Chat message.
+/// @group chat
+$kendo-chat-failed-bubble-selected-bg: k-color(error-subtle-active) !default;
+
+/// The background color of the Chat sender file.
+/// @group chat
+$kendo-chat-sender-file-bg: k-color(surface) !default;
+/// The text color of the Chat sender file.
+/// @group chat
+$kendo-chat-sender-file-text: k-color(on-app-surface) !default;
+/// The border color of the Chat sender file.
+/// @group chat
+$kendo-chat-sender-file-border: k-color(border) !default;
+
+/// The border width of the Chat pinned message;
+/// @group chat
+$kendo-chat-message-pinned-border-width: 1px !default;
+/// The border style of the Chat pinned message;
+/// @group chat
+$kendo-chat-message-pinned-border-style: solid !default;
+/// The border color of the Chat pinned message;
+/// @group chat
+$kendo-chat-message-pinned-border-color: k-color(border) !default;
+
+/// The horizontal padding of the Chat message reference.
+/// @group chat
+$kendo-chat-message-reference-padding-x: k-spacing(2) !default;
+/// The vertical padding of the Chat message reference.
+/// @group chat
+$kendo-chat-message-reference-padding-y: k-spacing(2) !default;
+
+/// The background color of the Chat message reference.
+/// @group chat
+$kendo-chat-message-reference-bg: color-mix(in srgb, k-color(surface) 90%, transparent) !default;
+/// The text color of the Chat message reference.
+/// @group chat
+$kendo-chat-message-reference-text: k-color(on-app-surface) !default;
+/// The background color of the message reference marker.
+/// @group chat
+$kendo-chat-message-reference-marker-bg: k-color(base-emphasis) !default;
+/// The background color of the message reference alt marker.
+/// @group chat
+$kendo-chat-message-reference-marker-alt-bg: k-color(secondary-emphasis) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/chat/_variables.scss" with (
+    $kendo-chat-padding-x: $kendo-chat-padding-x,
+    $kendo-chat-padding-y: $kendo-chat-padding-y,
+    $kendo-chat-width: $kendo-chat-width,
+    $kendo-chat-height: $kendo-chat-height,
+    $kendo-chat-border-width: $kendo-chat-border-width,
+    $kendo-chat-border-radius: $kendo-chat-border-radius,
+    $kendo-chat-font-family: $kendo-chat-font-family,
+    $kendo-chat-font-size: $kendo-chat-font-size,
+    $kendo-chat-line-height: $kendo-chat-line-height,
+    $kendo-chat-item-spacing-y: $kendo-chat-item-spacing-y,
+    $kendo-chat-message-max-width: $kendo-chat-message-max-width,
+    $kendo-chat-message-gap: $kendo-chat-message-gap,
+    $kendo-sequential-messages-border-radius: $kendo-sequential-messages-border-radius,
+    $kendo-chat-message-list-padding-x: $kendo-chat-message-list-padding-x,
+    $kendo-chat-message-list-padding-y: $kendo-chat-message-list-padding-y,
+    $kendo-chat-message-list-spacing: $kendo-chat-message-list-spacing,
+    $kendo-chat-message-box-wrapper-spacing: $kendo-chat-message-box-wrapper-spacing,
+    $kendo-chat-status-min-size: $kendo-chat-status-min-size,
+    $kendo-chat-status-max-size: $kendo-chat-status-max-size,
+    $kendo-chat-message-status-gap: $kendo-chat-message-status-gap,
+    $kendo-chat-timestamp-font-size: $kendo-chat-timestamp-font-size,
+    $kendo-chat-timestamp-line-height: $kendo-chat-timestamp-line-height,
+    $kendo-chat-timestamp-transform: $kendo-chat-timestamp-transform,
+    $kendo-chat-timestamp-text: $kendo-chat-timestamp-text,
+    $kendo-chat-timestamp-bg: $kendo-chat-timestamp-bg,
+    $kendo-chat-timestamp-separator-bg: $kendo-chat-timestamp-separator-bg,
+    $kendo-chat-timestamp-separator-spacing: $kendo-chat-timestamp-separator-spacing,
+    $kendo-chat-message-meta-font-size: $kendo-chat-message-meta-font-size,
+    $kendo-chat-message-meta-line-height: $kendo-chat-message-meta-line-height,
+    $kendo-chat-author-font-size: $kendo-chat-author-font-size,
+    $kendo-chat-author-line-height: $kendo-chat-author-line-height,
+    $kendo-chat-status-text: $kendo-chat-status-text,
+    $kendo-chat-bubble-spacing: $kendo-chat-bubble-spacing,
+    $kendo-chat-toolbar-bg: $kendo-chat-toolbar-bg,
+    $kendo-chat-toolbar-text: $kendo-chat-toolbar-text,
+    $kendo-chat-toolbar-border: $kendo-chat-toolbar-border,
+    $kendo-chat-bg: $kendo-chat-bg,
+    $kendo-chat-text: $kendo-chat-text,
+    $kendo-chat-border: $kendo-chat-border,
+    $kendo-chat-alt-bubble-bg: $kendo-chat-alt-bubble-bg,
+    $kendo-chat-alt-bubble-text: $kendo-chat-alt-bubble-text,
+    $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-border,
+    $kendo-chat-alt-bubble-shadow: $kendo-chat-alt-bubble-shadow,
+    $kendo-chat-alt-bubble-hover-bg: $kendo-chat-alt-bubble-hover-bg,
+    $kendo-chat-alt-bubble-hover-border: $kendo-chat-alt-bubble-hover-border,
+    $kendo-chat-alt-bubble-active-bg: $kendo-chat-alt-bubble-active-bg,
+    $kendo-chat-alt-bubble-active-border: $kendo-chat-alt-bubble-active-border,
+    $kendo-chat-alt-bubble-focus-bg: $kendo-chat-alt-bubble-focus-bg,
+    $kendo-chat-alt-bubble-focus-border: $kendo-chat-alt-bubble-focus-border,
+    $kendo-chat-alt-bubble-focus-shadow: $kendo-chat-alt-bubble-focus-shadow,
+    $kendo-chat-failed-bubble-text: $kendo-chat-failed-bubble-text,
+    $kendo-chat-failed-bubble-bg: $kendo-chat-failed-bubble-bg,
+    $kendo-chat-failed-bubble-border: $kendo-chat-failed-bubble-border,
+    $kendo-chat-failed-content-color: $kendo-chat-failed-content-color,
+    $kendo-chat-failed-bubble-hover-bg: $kendo-chat-failed-bubble-hover-bg,
+    $kendo-chat-failed-bubble-selected-bg: $kendo-chat-failed-bubble-selected-bg,
+    $kendo-chat-typing-indicator-text: $kendo-chat-typing-indicator-text,
+    $kendo-chat-sender-file-bg: $kendo-chat-sender-file-bg,
+    $kendo-chat-sender-file-text: $kendo-chat-sender-file-text,
+    $kendo-chat-sender-file-border: $kendo-chat-sender-file-border,
+    $kendo-chat-message-pinned-border-width: $kendo-chat-message-pinned-border-width,
+    $kendo-chat-message-pinned-border-style: $kendo-chat-message-pinned-border-style,
+    $kendo-chat-message-pinned-border-color:  $kendo-chat-message-pinned-border-color,
+    $kendo-chat-message-reference-padding-x: $kendo-chat-message-reference-padding-x,
+    $kendo-chat-message-reference-padding-y: $kendo-chat-message-reference-padding-y,
+    $kendo-chat-message-reference-bg: $kendo-chat-message-reference-bg,
+    $kendo-chat-message-reference-text: $kendo-chat-message-reference-text,
+    $kendo-chat-message-reference-marker-bg: $kendo-chat-message-reference-marker-bg,
+    $kendo-chat-message-reference-marker-alt-bg: $kendo-chat-message-reference-marker-alt-bg,
+);

package/scss/checkbox/_index.scss

@@ -0,0 +1,16 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-checkbox--styles() {
+    @include import-once( "checkbox" ) {
+        @include core-styles();
+        @include kendo-checkbox--layout();
+        @include kendo-checkbox--theme();
+    }
+}

package/scss/checkbox/_layout.scss

@@ -0,0 +1,11 @@
+@use "@progress/kendo-theme-core/scss/components/checkbox/_layout.scss" as *;
+@use "../core/index.scss" as *;
+
+
+@mixin kendo-checkbox--layout() {
+    @include kendo-checkbox--layout-base();
+
+    .k-checkbox {
+        transition: background-color k-transition(rapid), border-color k-transition(rapid), outline k-transition(rapid), opacity k-transition(rapid);
+    }
+}

package/scss/checkbox/_theme.scss

@@ -0,0 +1,30 @@
+@use "@progress/kendo-theme-core/scss/components/checkbox/_theme.scss" as *;
+@use "../core/_index.scss" as *;
+@use "../checkbox/_variables.scss" as *;
+
+
+@mixin kendo-checkbox--theme() {
+    @include kendo-checkbox--theme-base();
+
+    .k-checkbox {
+        &:focus,
+        &.k-focus {
+            @include focus-indicator(
+                $type: "outline",
+                $indicator: $kendo-checkbox-focus-outline-color,
+                $outline-width: $kendo-checkbox-focus-outline-width,
+                $outline-offset: $kendo-checkbox-focus-outline-offset
+            );
+        }
+
+        &:checked:focus,
+        &.k-checked.k-focus {
+            @include focus-indicator(
+                $type: "outline",
+                $indicator: $kendo-checkbox-focus-checked-outline-color,
+                $outline-width: $kendo-checkbox-focus-checked-outline-width,
+                $outline-offset: $kendo-checkbox-focus-checked-outline-offset
+            );
+        }
+    }
+}

package/scss/checkbox/_variables.scss

@@ -0,0 +1,256 @@
+@use "../list/_variables.scss" as *;
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.scss" as *;
+
+
+// CheckBox
+
+/// The border width of the CheckBox.
+/// @group checkbox
+$kendo-checkbox-border-width: 1px !default;
+
+/// The size of a small CheckBox.
+/// @group checkbox
+$kendo-checkbox-sm-size: k-spacing(4) !default;
+/// The size of a medium CheckBox.
+/// @group checkbox
+$kendo-checkbox-md-size: k-spacing(4.5) !default;
+/// The size of a large CheckBox.
+/// @group checkbox
+$kendo-checkbox-lg-size: k-spacing(5) !default;
+
+/// The glyph size of a small CheckBox.
+/// @group checkbox
+$kendo-checkbox-sm-glyph-size: k-spacing(3.5) !default;
+/// The glyph size of a medium CheckBox.
+/// @group checkbox
+$kendo-checkbox-md-glyph-size: k-spacing(4) !default;
+/// The glyph size of a large CheckBox.
+/// @group checkbox
+$kendo-checkbox-lg-glyph-size: k-spacing(4.5) !default;
+
+/// The ripple size of a small CheckBox.
+/// @group checkbox
+$kendo-checkbox-sm-ripple-size: 300% !default;
+/// The ripple size of a medium CheckBox.
+/// @group checkbox
+$kendo-checkbox-md-ripple-size: 300% !default;
+/// The ripple size of a large CheckBox.
+/// @group checkbox
+$kendo-checkbox-lg-ripple-size: 300% !default;
+
+
+/// The background color of the CheckBox.
+/// @group checkbox
+$kendo-checkbox-bg: k-color(surface-alt) !default;
+/// The text color of the CheckBox.
+/// @group checkbox
+$kendo-checkbox-text: null !default;
+/// The border color of the CheckBox.
+/// @group checkbox
+$kendo-checkbox-border: k-color(border) !default;
+
+/// The background color of the hovered CheckBox.
+/// @group checkbox
+$kendo-checkbox-hover-bg: null !default;
+/// The text color of the hovered CheckBox.
+/// @group checkbox
+$kendo-checkbox-hover-text: null !default;
+/// The border color of the hovered CheckBox.
+/// @group checkbox
+$kendo-checkbox-hover-border: null !default;
+
+/// The background color of the checked CheckBox.
+/// @group checkbox
+$kendo-checkbox-checked-bg: k-color(secondary) !default;
+/// The text color of the checked CheckBox.
+/// @group checkbox
+$kendo-checkbox-checked-text: k-color(on-secondary) !default;
+/// The border color of the checked CheckBox.
+/// @group checkbox
+$kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
+
+/// The background color of the indeterminate CheckBox.
+/// @group checkbox
+$kendo-checkbox-indeterminate-bg: $kendo-checkbox-bg !default;
+/// The text color of the indeterminate CheckBox.
+/// @group checkbox
+$kendo-checkbox-indeterminate-text: $kendo-checkbox-checked-bg !default;
+/// The border color of the indeterminate CheckBox.
+/// @group checkbox
+$kendo-checkbox-indeterminate-border: $kendo-checkbox-border !default;
+
+/// The border color of the focused CheckBox.
+/// @group checkbox
+$kendo-checkbox-focus-border: null !default;
+/// The box shadow of the focused CheckBox.
+/// @group checkbox
+$kendo-checkbox-focus-shadow: none !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: none !default;
+
+/// The outline color of the focused CheckBox.
+/// @group checkbox
+$kendo-checkbox-focus-outline-color: k-color(subtle) !default;
+/// The outline width of the focused CheckBox.
+/// @group checkbox
+$kendo-checkbox-focus-outline-width: 1px !default;
+/// The outline offset of the focused CheckBox.
+/// @group checkbox
+$kendo-checkbox-focus-outline-offset: 1px !default;
+
+/// The outline color of the focused and checked CheckBox.
+/// @group checkbox
+$kendo-checkbox-focus-checked-outline-color: k-color(secondary-on-surface) !default;
+/// The outline width of the focused and checked CheckBox.
+/// @group checkbox
+$kendo-checkbox-focus-checked-outline-width: 1px !default;
+/// The outline offset of the focused and checked CheckBox.
+/// @group checkbox
+$kendo-checkbox-focus-checked-outline-offset: 1px !default;
+
+/// The background color of the disabled CheckBox.
+/// @group checkbox
+$kendo-checkbox-disabled-bg: null !default;
+/// The text color of the disabled CheckBox.
+/// @group checkbox
+$kendo-checkbox-disabled-text: null !default;
+/// The border color of the disabled CheckBox.
+/// @group checkbox
+$kendo-checkbox-disabled-border: null !default;
+
+/// The background color of the disabled and checked CheckBox.
+/// @group checkbox
+$kendo-checkbox-disabled-checked-bg: null !default;
+/// The text color of the disabled and checked CheckBox.
+/// @group checkbox
+$kendo-checkbox-disabled-checked-text: null !default;
+/// The border color of the disabled and checked CheckBox.
+/// @group checkbox
+$kendo-checkbox-disabled-checked-border: null !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-on-surface) !default;
+
+/// The default size of the Checkbox.
+/// @group checkbox
+/// @role default
+$kendo-checkbox-default-size: "md" !default;
+
+/// The default border radius of the Checkbox.
+/// @group checkbox
+/// @role default
+$kendo-checkbox-default-roundness: "sm" !default;
+
+
+// CheckBox indicator
+
+/// The type of the CheckBox indicator.
+/// @group checkbox
+$kendo-checkbox-indicator-type: image !default;
+
+/// The font family of the CheckBox indicator glyph.
+/// @group checkbox
+$kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
+/// The glyph of the CheckBox indicator.
+/// @group checkbox
+$kendo-checkbox-checked-glyph: "\e118" !default;
+/// The glyph of the indeterminate CheckBox indicator.
+/// @group checkbox
+$kendo-checkbox-indeterminate-glyph: "\e121" !default;
+
+/// The image for a 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;
+/// The image for a 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'><path fill='none' stroke='#ff6358' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) !default;
+
+
+// CheckBox label
+
+/// The horizontal margin of the CheckBox inside a label.
+/// @group checkbox
+$kendo-checkbox-label-margin-x: k-spacing(1) !default;
+
+
+// CheckBox list
+
+/// The spacing between the items in a horizontal CheckBox list.
+/// @group checkbox
+$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;
+/// The vertical padding of the CheckBox list items.
+/// @group checkbox
+$kendo-checkbox-list-item-padding-y: $kendo-list-md-item-padding-y !default;
+
+
+// CheckBox ripple
+
+/// The background color of the CheckBox' ripple.
+/// @group checkbox
+$kendo-checkbox-ripple-bg: $kendo-checkbox-checked-bg !default;
+/// The opacity of the CheckBox' ripple.
+/// @group checkbox
+$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-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,
+    $kendo-checkbox-default-size: $kendo-checkbox-default-size,
+    $kendo-checkbox-default-roundness: $kendo-checkbox-default-roundness
+);

package/scss/chip/_index.scss

@@ -0,0 +1,20 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-chip--styles() {
+    @include import-once( "chip" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-chip--layout();
+        @include kendo-chip--theme();
+        @include kendo-utils--typography--text-overflow();
+    }
+}

package/scss/chip/_layout.scss

@@ -0,0 +1,11 @@
+@use "@progress/kendo-theme-core/scss/components/chip/_layout.scss" as *;
+@use "../core/index.scss" as *;
+
+
+@mixin kendo-chip--layout() {
+    @include kendo-chip--layout-base();
+
+    .k-chip {
+        transition: color k-transition(rapid), background-color k-transition(rapid), outline k-transition(rapid), opacity k-transition(rapid);
+    }
+}