@progress/kendo-theme-core 14.4.0-dev.2 → 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/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";