@progress/kendo-theme-core 14.4.0-dev.1 → 14.4.0-dev.3

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/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/pdf-viewer/_layout.scss

@@ -23,7 +23,7 @@
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         // Toolbar
-        .k-toolbar {
+        > .k-toolbar {
             border-block-start-width: 0;
             border-inline-end-width: 0;
             border-inline-start-width: 0;
@@ -31,8 +31,8 @@
             flex: 0 0 auto;
             z-index: k-z-index("base", 1);
         }
-        .k-toolbar .k-pager-wrap,
-        .k-toolbar .k-pager {
+        > .k-toolbar .k-pager-wrap,
+        > .k-toolbar .k-pager {
             padding: 0;
             border-width: 0;
             color: inherit;
@@ -308,6 +308,7 @@
     }
 
     // Search
+    // TODO: Remove once product teams adopt the floating toolbar search panel
     .k-pdf-viewer-canvas > .k-search-panel {
         width: max-content;
         margin-block-start: calc( (#{$kendo-button-md-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-panel-padding-y} )) * -1 );
@@ -345,6 +346,18 @@
         }
     }
 
+    // Search (floating toolbar)
+    .k-floating-toolbar {
+        .k-search-dialog-draghandle {
+            cursor: move;
+        }
+
+        .k-search-matches {
+            display: inline-flex;
+            gap: $kendo-pdf-viewer-search-panel-matches-spacing;
+        }
+    }
+
     // Annotation Toolbar
     .k-pdf-viewer-annotation-editor-toolbar > .k-toolbar {
         width: min-content;

package/scss/components/toolbar/_layout.scss

@@ -272,7 +272,16 @@
         }
     }
 
-    .k-floating-toolbar,
+    .k-floating-toolbar {
+        max-width: fit-content;
+        border-radius: $kendo-floating-toolbar-border-radius;
+
+        .k-toolbar {
+            border-width: 0;
+            border-radius: inherit;
+        }
+    }
+
     .k-window-content:where(.editorToolbarWindow) { // stylelint-disable-line
         padding-block: $kendo-toolbar-md-padding-y !important; // stylelint-disable-line declaration-no-important
         padding-inline: $kendo-toolbar-md-padding-x !important; // stylelint-disable-line declaration-no-important

package/scss/components/toolbar/_theme.scss

@@ -112,8 +112,6 @@
             border-color: $kendo-toolbar-flat-border;
         }
     }
-
-    .k-floating-toolbar,
     .editorToolbarWindow.k-window-content { // stylelint-disable-line
         @include fill(
             $kendo-toolbar-text,

package/scss/components/toolbar/_variables.scss

@@ -79,3 +79,5 @@ $kendo-toolbar-sizes: (
         separator-height: $kendo-toolbar-lg-separator-height
     )
 ) !default;
+
+$kendo-floating-toolbar-border-radius: null !default;

package/scss/mixins/_animation.scss

@@ -0,0 +1,21 @@
+// Shimmer
+
+@keyframes k-shimmer {
+    0% { background-position: 200% center; }
+    100% { background-position: -200% center; }
+}
+
+@mixin text-shimmer() {
+    background: linear-gradient(
+        90deg,
+        currentColor 20%,
+        color-mix(in srgb, currentColor 50%, transparent) 50%,
+        currentColor 80%
+    );
+    background-size: 200% auto;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: k-shimmer 2s linear infinite;
+    display: inline-block;
+}

package/scss/mixins/index.scss

@@ -1,3 +1,4 @@
+@forward "./_animation.scss";
 @forward "./_border-radius.scss";
 @forward "./_box-shadow.scss";
 @forward "./_disabled.scss";