@progress/kendo-theme-core 14.4.0-dev.2 → 14.4.0-dev.4

package/scss/components/agent-response/_layout.scss

@@ -0,0 +1,114 @@
+@use "../../spacing/index.scss" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-agent-response--layout-base() {
+    // Agent Step
+    .k-agent-step {
+        .k-card {
+            box-shadow: none;
+        }
+    }
+
+    .k-agent-step-icon {
+        align-self: start;
+        margin-top: $kendo-agent-step-icon-margin-top;
+        aspect-ratio: 1;
+    }
+
+    // Typography — label, secondary/meta text, and diffstat all share the small font size.
+    .k-agent-step-label,
+    .k-agent-step-sep,
+    .k-agent-step-secondary,
+    .k-agent-step-time,
+    .k-agent-step-added,
+    .k-agent-step-removed {
+        font-size: $kendo-agent-step-font-size;
+    }
+
+    .k-agent-step-diffstat {
+        display: inline-flex;
+        gap: k-spacing(1);
+    }
+
+    // Head — a reset <button> housing the icon column and the content row.
+    .k-agent-step-head {
+        padding-inline: 0;
+        padding-block: $kendo-agent-step-padding-y;
+        display: flex;
+        align-items: center;
+        gap: $kendo-agent-step-gap;
+        width: 100%;
+        margin: 0;
+        border: 0;
+        background: none;
+        font: inherit;
+        color: inherit;
+        text-align: inherit;
+        appearance: none;
+    }
+
+    .k-agent-step-content {
+        display: flex;
+        flex: 1 1 auto;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: $kendo-agent-step-gap;
+        min-width: 0;
+    }
+
+    .k-agent-completed > .k-agent-step-head .k-agent-step-label {
+        font-weight: var(--kendo-font-weight-medium);
+    }
+
+    // Body — expanded content indented under the head, with vertical spacing
+    // between stacked steps and a connector line linking them.
+    .k-agent-step-body {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        font-size: $kendo-agent-step-body-font-size;
+    }
+
+    .k-reasoning {
+    }
+
+    .k-tool-call .k-agent-step-body {
+        padding-inline-start: $kendo-tool-call-indent;
+        padding-block-end: $kendo-tool-call-padding-y;
+        gap: k-spacing(2);
+    }
+
+    .k-chain-of-thought {
+        .k-agent-step-body {
+            padding-block: k-spacing(2);
+            gap: k-spacing(1);
+        }
+    }
+
+    .k-thought {
+        display: flex;
+        gap: $kendo-thought-gap;
+
+        .k-agent-step-icon-col {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: $kendo-thought-icon-col-gap;
+        }
+
+        .k-agent-step-body {
+            padding-block: 0;
+        }
+
+        &:not(:last-child) .k-agent-step-content {
+            margin-bottom: $kendo-thought-spacing;
+        }
+
+        &:has(+ .k-thought) .k-agent-step-icon-col::after {
+            content: "";
+            height: 100%;
+            width: 1px;
+            margin-inline: -1px;
+        }
+    }
+}

package/scss/components/agent-response/_theme.scss

@@ -0,0 +1,67 @@
+@use "../../color-system/index.scss" as *;
+@use "../../mixins/index.scss" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-agent-response--theme-base() {
+    .k-agent-step > .k-agent-step-head,
+    .k-thought {
+        .k-agent-step-icon,
+        .k-agent-step-label,
+        .k-agent-step-expand {
+            color: k-color("on-app-surface");
+        }
+
+        .k-agent-step-sep,
+        .k-agent-step-secondary,
+        .k-agent-step-time {
+            color: k-color("subtle");
+        }
+
+        .k-agent-step-added {
+            color: $kendo-agent-step-added-color;
+        }
+
+        .k-agent-step-removed {
+            color: $kendo-agent-step-removed-color;
+        }
+    }
+
+    .k-agent-completed > .k-agent-step-head,
+    .k-thought.k-thought-completed {
+        .k-agent-step-icon,
+        .k-agent-step-label,
+        .k-agent-step-expand {
+            color: k-color("subtle");
+        }
+    }
+
+    .k-agent-step > .k-agent-step-head:hover {
+        .k-agent-step-icon,
+        .k-agent-step-label,
+        .k-agent-step-expand,
+        .k-agent-step-sep,
+        .k-agent-step-secondary,
+        .k-agent-step-time {
+            color: k-color("on-app-surface");
+        }
+    }
+
+    .k-agent-step:not(.k-agent-completed) > .k-agent-step-head .k-agent-step-label,
+    .k-thought:not(.k-thought-completed) .k-agent-step-label {
+        @include text-shimmer();
+    }
+
+    .k-thought .k-agent-step-icon-col::after {
+        background: $kendo-thought-connector-color;
+    }
+
+    .k-reasoning {
+    }
+
+    .k-tool-call .k-agent-step-body {
+        color: k-color("subtle");
+    }
+
+    .k-chain-of-thought {
+    }
+}

package/scss/components/agent-response/_variables.scss

@@ -0,0 +1,43 @@
+// Agent Response
+
+/// The gap between the icon and the content of the AgentStep head and content row.
+/// @group agent-response
+$kendo-agent-step-gap: null !default;
+/// The vertical padding of the AgentStep head.
+/// @group agent-response
+$kendo-agent-step-padding-y: null !default;
+/// The top margin of the AgentStep icon.
+/// @group agent-response
+$kendo-agent-step-icon-margin-top: null !default;
+/// The text color of the added lines count in the AgentStep diffstat.
+/// @group agent-response
+$kendo-agent-step-added-color: null !default;
+/// The text color of the removed lines count in the AgentStep diffstat.
+/// @group agent-response
+$kendo-agent-step-removed-color: null !default;
+/// The font size of the AgentStep label, secondary text, and diffstat.
+/// @group agent-response
+$kendo-agent-step-font-size: null !default;
+/// The font size of the AgentStep body content.
+/// @group agent-response
+$kendo-agent-step-body-font-size: null !default;
+
+/// The gap between the icon column and the content of the Thought.
+/// @group agent-response
+$kendo-thought-gap: null !default;
+/// The gap in the icon column of the Thought.
+/// @group agent-response
+$kendo-thought-icon-col-gap: null !default;
+/// The spacing between stacked Thought items.
+/// @group agent-response
+$kendo-thought-spacing: null !default;
+/// The color of the connector line between stacked Thought items.
+/// @group agent-response
+$kendo-thought-connector-color: null !default;
+
+/// The start indent of the ToolCall body.
+/// @group agent-response
+$kendo-tool-call-indent: null !default;
+/// The bottom padding of the ToolCall body.
+/// @group agent-response
+$kendo-tool-call-padding-y: null !default;

package/scss/components/button/_layout.scss

@@ -93,38 +93,38 @@
 
                         &.k-svg-icon > svg,
                         &.k-icon-md > svg {
-                            width: $kendo-icon-size-md;
-                            height: $kendo-icon-size-md;
+                            width: var(--kendo-icon-size-md, #{$ki-icon-size-md});
+                            height: var(--kendo-icon-size-md, #{$ki-icon-size-md});
                         }
 
                         &.k-icon-xs > svg {
-                            width: $kendo-icon-size-xs;
-                            height: $kendo-icon-size-xs;
+                            width: var(--kendo-icon-size-xs, #{$ki-icon-size-xs});
+                            height: var(--kendo-icon-size-xs, #{$ki-icon-size-xs});
                         }
 
                         &.k-icon-sm > svg {
-                            width: $kendo-icon-size-sm;
-                            height: $kendo-icon-size-sm;
+                            width: var(--kendo-icon-size-sm, #{$ki-icon-size-sm});
+                            height: var(--kendo-icon-size-sm, #{$ki-icon-size-sm});
                         }
 
                         &.k-icon-lg > svg {
-                            width: $kendo-icon-size-lg;
-                            height: $kendo-icon-size-lg;
+                            width: var(--kendo-icon-size-lg, #{$ki-icon-size-lg});
+                            height: var(--kendo-icon-size-lg, #{$ki-icon-size-lg});
                         }
 
                         &.k-icon-xl > svg {
-                            width: $kendo-icon-size-xl;
-                            height: $kendo-icon-size-xl;
+                            width: var(--kendo-icon-size-xl, #{$ki-icon-size-xl});
+                            height: var(--kendo-icon-size-xl, #{$ki-icon-size-xl});
                         }
 
                         &.k-icon-xxl > svg {
-                            width: $kendo-icon-size-xxl;
-                            height: $kendo-icon-size-xxl;
+                            width: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
+                            height: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
                         }
 
                         &.k-icon-xxxl > svg {
-                            width: $kendo-icon-size-xxxl;
-                            height: $kendo-icon-size-xxxl;
+                            width: var(--kendo-icon-size-xxxl, #{$ki-icon-size-xxxl});
+                            height: var(--kendo-icon-size-xxxl, #{$ki-icon-size-xxxl});
                         }
                     }
                 }

package/scss/components/checkpoint/_layout.scss

@@ -0,0 +1,34 @@
+@use "../../spacing/index.scss" as *;
+@use "../../motion/index.scss" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-checkpoint--layout-base() {
+    .k-checkpoint {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: $kendo-checkpoint-gap;
+        opacity: 0;
+        transition: opacity k-transition(fade-out);
+
+        &:hover,
+        &:focus-within,
+        &.k-checkpoint-visible {
+            opacity: 1;
+            transition: opacity k-transition(fade-in);
+        }
+
+        .k-checkpoint-line {
+            flex: 1 1 0%;
+            height: $kendo-checkpoint-line-width;
+            align-self: center;
+            border: none;
+        }
+
+        .k-checkpoint-stamp {
+            font-size: $kendo-checkpoint-stamp-font-size;
+            font-weight: $kendo-checkpoint-stamp-font-weight;
+            padding-inline: $kendo-checkpoint-stamp-padding-x;
+        }
+    }
+}

package/scss/components/checkpoint/_theme.scss

@@ -0,0 +1,25 @@
+@use "../../color-system/index.scss" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-checkpoint--theme-base() {
+    .k-checkpoint-stamp {
+        color: $kendo-checkpoint-stamp-color;
+    }
+
+    .k-checkpoint {
+        .k-checkpoint-line {
+            background-color: $kendo-checkpoint-line-color;
+            opacity: .35;
+
+            &:first-child {
+                background: linear-gradient(to right, transparent, $kendo-checkpoint-line-color);
+                opacity: 1;
+            }
+
+            &:last-child {
+                background: linear-gradient(to left, transparent, $kendo-checkpoint-line-color);
+                opacity: 1;
+            }
+        }
+    }
+}

package/scss/components/checkpoint/_variables.scss

@@ -0,0 +1,21 @@
+/// The color of the Checkpoint separator line.
+/// @group checkpoint
+$kendo-checkpoint-line-color: null !default;
+/// The gap between the Checkpoint line and stamp.
+/// @group checkpoint
+$kendo-checkpoint-gap: null !default;
+/// The width of the Checkpoint separator line.
+/// @group checkpoint
+$kendo-checkpoint-line-width: null !default;
+/// The font size of the Checkpoint stamp text.
+/// @group checkpoint
+$kendo-checkpoint-stamp-font-size: null !default;
+/// The text color of the Checkpoint stamp.
+/// @group checkpoint
+$kendo-checkpoint-stamp-color: null !default;
+/// The font weight of the Checkpoint stamp text.
+/// @group checkpoint
+$kendo-checkpoint-stamp-font-weight: null !default;
+/// The horizontal padding of the Checkpoint stamp.
+/// @group checkpoint
+$kendo-checkpoint-stamp-padding-x: null !default;

package/scss/components/citation/_layout.scss

@@ -0,0 +1,33 @@
+@use "../../spacing/index.scss" as *;
+@use "../../motion/index.scss" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-citation--layout-base() {
+    .k-citation-popover {
+        .k-popover-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-size: var(--kendo-font-size-sm);
+        }
+
+        .k-popover-body:has(> .k-citation-popover-view) {
+            padding: 0;
+            overflow: hidden;
+            display: flex;
+            flex-flow: row nowrap;
+        }
+    }
+
+    .k-citation-popover-view {
+        flex: 0 0 100%;
+        box-sizing: border-box;
+        padding: $kendo-citation-popover-view-padding;
+        transition: transform k-transition(slide-in);
+        transform: translateX(calc(-100% * (var(--kendo-citation-popover-view-current, 1) - 1)));
+    }
+
+    :is([dir="rtl"], .k-rtl) .k-citation-popover-view {
+        transform: translateX(calc(100% * (var(--kendo-citation-popover-view-current, 1) - 1)));
+    }
+}

package/scss/components/citation/_theme.scss

@@ -0,0 +1,10 @@
+@use "../../color-system/index.scss" as *;
+@use "./_variables.scss" as *;
+
+@mixin kendo-citation--theme-base() {
+    .k-citation-popover {
+        .k-citation-pages {
+            color: $kendo-citation-pages-color;
+        }
+    }
+}

package/scss/components/citation/_variables.scss

@@ -0,0 +1,8 @@
+// Citation
+
+/// The padding of the CitationPopover view.
+/// @group citation
+$kendo-citation-popover-view-padding: null !default;
+/// The text color of the CitationPopover page indicator.
+/// @group citation
+$kendo-citation-pages-color: null !default;

package/scss/components/color-preview/_layout.scss

@@ -42,7 +42,7 @@
         gap: 2px;
 
         .k-color-preview-mask {
-            width: calc( #{$kendo-icon-size} - 2px );
+            width: calc( #{$ki-icon-size} - 2px );
             height: 2px;
         }
     }

package/scss/components/filemanager/_layout.scss

@@ -137,7 +137,7 @@
 
         // File preview
         .k-file-preview {
-            margin-inline-end: $kendo-icon-spacing;
+            margin-inline-end: $kendo-file-manager-icon-spacing;
             display: inline-flex;
             flex-direction: row;
             vertical-align: middle;
@@ -159,7 +159,7 @@
     .k-filemanager-preview {
         padding: calc( #{$kendo-file-manager-preview-padding-y} * 3) $kendo-file-manager-preview-padding-x $kendo-file-manager-preview-padding-y;
         width: $kendo-file-manager-preview-width;
-        min-height: calc( calc( #{$kendo-file-manager-preview-padding-y} * 4 ) + calc( #{$kendo-icon-size-xxxl} * 2 ) + calc( #{$kendo-file-manager-preview-spacing} * 3 ) );
+        min-height: calc( calc( #{$kendo-file-manager-preview-padding-y} * 4 ) + calc( var(--kendo-icon-size-xxxl, #{$ki-icon-size-xxxl}) * 2 ) + calc( #{$kendo-file-manager-preview-spacing} * 3 ) );
         border-width: 0;
         border-inline-start-width: $kendo-file-manager-preview-border-width;
         border-style: solid;
@@ -236,7 +236,7 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-        gap: $kendo-icon-spacing;
+        gap: $kendo-file-manager-icon-spacing;
     }
 
 }

package/scss/components/filemanager/_variables.scss

@@ -57,6 +57,8 @@ $kendo-file-manager-preview-width: null !default;
 $kendo-file-manager-preview-border-width: null !default;
 $kendo-file-manager-preview-spacing: null !default;
 $kendo-file-manager-preview-column-gap: null !default;
+
+$kendo-file-manager-icon-spacing: null !default;
 $kendo-file-manager-preview-bg: null !default;
 $kendo-file-manager-preview-text: null !default;
 $kendo-file-manager-preview-border: null !default;

package/scss/components/gantt/_layout.scss

@@ -667,7 +667,7 @@
             display: block;
         }
         .k-task-pct {
-            font-size: $kendo-icon-size-xxl;
+            font-size: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
         }
         ul {
             line-height: normal;

package/scss/components/grid/_layout.scss

@@ -216,7 +216,7 @@
             .k-sort-order {
                 display: inline-block;
                 vertical-align: top;
-                height: $kendo-icon-size;
+                height: $ki-icon-size;
                 font-size: $kendo-grid-sorting-index-font-size;
                 margin-block-start: $kendo-grid-sorting-index-spacing-y;
                 margin-inline-start: $kendo-grid-sorting-index-spacing-x;
@@ -326,8 +326,8 @@
         }
 
         .k-grouping-row .k-icon {
-            margin-inline-start: calc( ( $kendo-icon-size / 2 ) - #{$kendo-grid-cell-padding-x} );
-            margin-inline-end: calc( $kendo-icon-size / 2 );
+            margin-inline-start: calc( ( $ki-icon-size / 2 ) - #{$kendo-grid-cell-padding-x} );
+            margin-inline-end: calc( $ki-icon-size / 2 );
             text-decoration: none;
         }
 
@@ -1156,7 +1156,7 @@
                 }
 
                 .k-grouping-row .k-icon {
-                    margin-inline-start: calc( ( $kendo-icon-size / 2 ) - #{$_cell-padding-x} );
+                    margin-inline-start: calc( ( $ki-icon-size / 2 ) - #{$_cell-padding-x} );
                 }
 
                 .k-grouping-dropclue {
@@ -1232,8 +1232,8 @@
 
                 > .k-svg-icon > svg,
                 > .k-icon-wrapper-host svg {
-                    width: $kendo-icon-size-md;
-                    height: $kendo-icon-size-md;
+                    width: var(--kendo-icon-size-md, #{$ki-icon-size-md});
+                    height: var(--kendo-icon-size-md, #{$ki-icon-size-md});
                 }
             }
         }
@@ -1656,7 +1656,7 @@
         > .k-icon,
         > .k-icon-wrapper-host .k-icon,
         > .k-expander-indicator {
-            margin-inline-end: $kendo-icon-spacing;
+            margin-inline-end: $kendo-grid-column-menu-icon-spacing;
         }
     }
 

package/scss/components/grid/_variables.scss

@@ -111,6 +111,8 @@ $kendo-grid-header-font-size: null !default;
 $kendo-grid-header-first-border: null !default;
 $kendo-grid-header-menu-icon-spacing: null !default;
 
+$kendo-grid-column-menu-icon-spacing: null !default;
+
 $kendo-grid-toolbar-border-width: null !default;
 
 $kendo-grid-cell-horizontal-border-width: null !default;

package/scss/components/icons/_layout.scss

@@ -1,9 +1,6 @@
 @use "./_variables.scss" as *;
-
-@use "@progress/kendo-svg-icons/scss/index.scss" as * with (
-    $ki-icon-size: $kendo-icon-size,
-    $ki-icon-default-size: $kendo-icon-default-size
-);
+@use "../../spacing/index.scss" as *;
+@use "@progress/kendo-svg-icons/scss/index.scss" as *;
 
 @mixin kendo-icon--layout-base() {
 
@@ -58,7 +55,7 @@
 
     .k-icon-action {
         display: inline-flex;
-        padding: $kendo-icon-padding;
+        padding: k-spacing(1);
         line-height: 1;
         align-items: center;
         vertical-align: middle;

package/scss/components/icons/_variables.scss

@@ -1,14 +1,12 @@
 $kendo-icon-default-size: null !default;
 $kendo-icon-size: null !default;
-$kendo-icon-size-xs: null !default;
-$kendo-icon-size-sm: null !default;
-$kendo-icon-size-md: null !default;
-$kendo-icon-size-lg: null !default;
-$kendo-icon-size-xl: null !default;
-$kendo-icon-size-xxl: null !default;
-$kendo-icon-size-xxxl: null !default;
 $kendo-icon-spacing: null !default;
 $kendo-icon-padding: null !default;
 
 $kendo-accent-icon-color: null !default;
 $kendo-action-icon-color: null !default;
+
+@forward "@progress/kendo-svg-icons/scss/index.scss" with (
+    $ki-icon-size: $kendo-icon-size,
+    $ki-icon-default-size: $kendo-icon-default-size
+);

package/scss/components/input/_layout.scss

@@ -361,7 +361,7 @@
         border-style: solid;
         border-color: inherit;
         border-width: 0 0 0 1px;
-        height: $kendo-icon-size;
+        height: $ki-icon-size;
         align-self: center;
 
         &-horizontal {
@@ -448,7 +448,7 @@
     .k-input-loading-icon {
         width: 1em;
         height: 1em;
-        font-size: $kendo-icon-size;
+        font-size: $ki-icon-size;
     }
 
     // Input with SVG icon
@@ -457,38 +457,38 @@
     .k-input-loading-icon {
         &.k-svg-icon > svg,
         &.k-icon-md > svg {
-            width: $kendo-icon-size-md;
-            height: $kendo-icon-size-md;
+            width: var(--kendo-icon-size-md, #{$ki-icon-size-md});
+            height: var(--kendo-icon-size-md, #{$ki-icon-size-md});
         }
 
         &.k-icon-xs > svg {
-            width: $kendo-icon-size-xs;
-            height: $kendo-icon-size-xs;
+            width: var(--kendo-icon-size-xs, #{$ki-icon-size-xs});
+            height: var(--kendo-icon-size-xs, #{$ki-icon-size-xs});
         }
 
         &.k-icon-sm > svg {
-            width: $kendo-icon-size-sm;
-            height: $kendo-icon-size-sm;
+            width: var(--kendo-icon-size-sm, #{$ki-icon-size-sm});
+            height: var(--kendo-icon-size-sm, #{$ki-icon-size-sm});
         }
 
         &.k-icon-lg > svg {
-            width: $kendo-icon-size-lg;
-            height: $kendo-icon-size-lg;
+            width: var(--kendo-icon-size-lg, #{$ki-icon-size-lg});
+            height: var(--kendo-icon-size-lg, #{$ki-icon-size-lg});
         }
 
         &.k-icon-xl > svg {
-            width: $kendo-icon-size-xl;
-            height: $kendo-icon-size-xl;
+            width: var(--kendo-icon-size-xl, #{$ki-icon-size-xl});
+            height: var(--kendo-icon-size-xl, #{$ki-icon-size-xl});
         }
 
         &.k-icon-xxl > svg {
-            width: $kendo-icon-size-xxl;
-            height: $kendo-icon-size-xxl;
+            width: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
+            height: var(--kendo-icon-size-xxl, #{$ki-icon-size-xxl});
         }
 
         &.k-icon-xxxl > svg {
-            width: $kendo-icon-size-xxxl;
-            height: $kendo-icon-size-xxxl;
+            width: var(--kendo-icon-size-xxxl, #{$ki-icon-size-xxxl});
+            height: var(--kendo-icon-size-xxxl, #{$ki-icon-size-xxxl});
         }
     }
 

package/scss/components/list/_layout.scss

@@ -114,11 +114,11 @@
 
                 &:has(.k-list-item-icon) .k-list-item,
                 &:has(.k-list-item-icon) .k-list-group-item {
-                    padding-inline-start:  calc( #{$kendo-icon-size} + $_item-padding-x + #{$kendo-list-item-gap} );
+                    padding-inline-start:  calc( #{$ki-icon-size} + $_item-padding-x + #{$kendo-list-item-gap} );
                 }
 
                 .k-list-item:has(.k-list-item-icon) .k-list-item-description {
-                    padding-inline-start:  calc( #{$kendo-icon-size} + #{$kendo-list-item-gap});
+                    padding-inline-start:  calc( #{$ki-icon-size} + #{$kendo-list-item-gap});
                 }
 
                 .k-list-item:has(.k-list-item-icon),

package/scss/components/loader/_layout.scss

@@ -469,8 +469,8 @@
 
     // Loading indicator
     .k-i-loading {
-        width: $kendo-icon-size-md;
-        height: $kendo-icon-size-md;
+        width: $ki-icon-size;
+        height: $ki-icon-size;
         line-height: 1;
         display: inline-flex;
         flex-flow: row nowrap;