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

package/scss/card/_variables.scss

@@ -0,0 +1,240 @@
+@use "../core/_index.scss" as *;
+@use "../button/_variables.scss" as *;
+
+// Card
+
+
+/// The horizontal padding of the Card.
+/// @group card
+$kendo-card-padding-x: k-spacing(4) !default;
+/// The vertical padding of the Card.
+/// @group card
+$kendo-card-padding-y: k-spacing(4) !default;
+/// The width of the border around the Card.
+/// @group card
+$kendo-card-border-width: 1px !default;
+/// The border radius of the Card.
+/// @group card
+$kendo-card-border-radius: k-border-radius(xxl) !default;
+/// The inner border radius of the Card.
+/// @group card
+$kendo-card-inner-border-radius: calc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} ) !default;
+/// The font family of the Card.
+/// @group card
+$kendo-card-font-family: var( --kendo-font-family ) !default;
+/// The font size of the Card.
+/// @group card
+$kendo-card-font-size: var( --kendo-font-size ) !default;
+/// The line height of the Card.
+/// @group card
+$kendo-card-line-height: var( --kendo-line-height ) !default;
+
+/// The spacing between the Cards in the Card deck.
+/// @group card
+$kendo-card-deck-gap: k-spacing(4) !default;
+
+/// The background color of the Card.
+/// @group card
+$kendo-card-bg: k-translucency-bg(k-elevation-bg(1, k-color(surface-alt))) !default;
+/// The text color of the Card.
+/// @group card
+$kendo-card-text: k-color(on-app-surface) !default;
+/// The border color of the Card.
+/// @group card
+$kendo-card-border: k-color(border) !default;
+/// The shadow of the Card.
+/// @group card
+$kendo-card-shadow: k-elevation(1) !default;
+
+/// The background color of the focused Card.
+/// @group card
+$kendo-card-focus-bg: null !default;
+/// The text color of the focused Card.
+/// @group card
+$kendo-card-focus-text: null !default;
+/// The border color of the focused Card.
+/// @group card
+$kendo-card-focus-border: k-color(border-alt) !default;
+
+// TODO: double-check: the default theme is not supposed to elevate the Card on focus
+
+/// The shadow of the focused Card.
+/// @group card
+$kendo-card-focus-shadow: k-elevation(4) !default;
+
+/// The horizontal padding of the Card header.
+/// @group card
+$kendo-card-header-padding-x: $kendo-card-padding-x !default;
+/// The vertical padding of the Card header.
+/// @group card
+$kendo-card-header-padding-y: $kendo-card-padding-y !default;
+/// The bottom border width of the Card header.
+/// @group card
+$kendo-card-header-border-width: 0 !default;
+/// The background color of the Card header.
+/// @group card
+$kendo-card-header-bg: null !default;
+/// The text color of the Card header.
+/// @group card
+$kendo-card-header-text: k-color(on-app-surface) !default;
+/// The border color of the Card header.
+/// @group card
+$kendo-card-header-border: null !default;
+
+/// The horizontal padding of the Card body.
+/// @group card
+$kendo-card-body-padding-x: $kendo-card-padding-x !default;
+/// The vertical padding of the Card body.
+/// @group card
+$kendo-card-body-padding-y: $kendo-card-padding-y !default;
+
+/// The horizontal padding of the Card footer.
+/// @group card
+$kendo-card-footer-padding-x: $kendo-card-padding-x !default;
+/// The vertical padding of the Card footer.
+/// @group card
+$kendo-card-footer-padding-y: $kendo-card-padding-y !default;
+/// The top border width of the Card footer.
+/// @group card
+$kendo-card-footer-border-width: 0 !default;
+/// The background color of the Card footer.
+/// @group card
+$kendo-card-footer-bg: null !default;
+/// The text color of the Card footer.
+/// @group card
+$kendo-card-footer-text: k-color(on-app-surface) !default;
+/// The border color of the Card footer.
+/// @group card
+$kendo-card-footer-border: null !default;
+
+/// The bottom margin of the Card title.
+/// @group card
+$kendo-card-title-margin-bottom: k-spacing(1.5) !default;
+/// The font size of the Card title.
+/// @group card
+$kendo-card-title-font-size: var( --kendo-font-size-lg ) !default;
+/// The font family of the Card title.
+/// @group card
+$kendo-card-title-font-family: null !default;
+/// The line height of the Card title.
+/// @group card
+$kendo-card-title-line-height: calc( var( --kendo-line-height-xs ) * 1.2 ) !default;
+/// The font weight of the Card title.
+/// @group card
+$kendo-card-title-font-weight: var( --kendo-font-weight-medium ) !default;
+/// The letter spacing of the Card title.
+/// @group card
+$kendo-card-title-letter-spacing: null !default;
+
+/// The bottom margin of the Card subtitle.
+/// @group card
+$kendo-card-subtitle-margin-bottom: k-spacing(1.5) !default;
+/// The font size of the Card subtitle.
+/// @group card
+$kendo-card-subtitle-font-size: var( --kendo-font-size-sm ) !default;
+/// The font family of the Card subtitle.
+/// @group card
+$kendo-card-subtitle-font-family: null !default;
+/// The line height of the Card subtitle.
+/// @group card
+$kendo-card-subtitle-line-height: var( --kendo-line-height-sm ) !default;
+/// The font weight of the Card subtitle.
+/// @group card
+$kendo-card-subtitle-font-weight: var( --kendo-font-weight-normal ) !default;
+/// The letter spacing of the Card subtitle.
+/// @group card
+$kendo-card-subtitle-letter-spacing: null !default;
+/// The text color of the Card subtitle.
+/// @group card
+$kendo-card-subtitle-text: k-color(subtle) !default;
+
+/// The maximum width of the Card image.
+/// @group card
+$kendo-card-img-max-width: 100px !default;
+/// The spacing between the Avatar and the text in the Card.
+/// @group card
+$kendo-card-avatar-spacing: k-spacing(2) !default;
+
+/// The horizontal padding of the Card actions.
+/// @group card
+$kendo-card-actions-padding-x: $kendo-card-padding-x !default;
+/// The vertical padding of the Card actions.
+/// @group card
+$kendo-card-actions-padding-y: $kendo-card-padding-y !default;
+/// The top border width of the Card actions.
+/// @group card
+$kendo-card-actions-border-width: 0 !default;
+/// The spacing between the Card actions.
+/// @group card
+$kendo-card-actions-gap: k-spacing(2.5) !default;
+
+/// The border radius of the scroll button in the Card deck.
+/// @group card
+$kendo-card-deck-scroll-button-radius: 0px !default;
+/// The border radius of the scroll button in the Card deck.
+/// @group card
+$kendo-card-deck-scroll-button-offset: -$kendo-button-border-width !default;
+
+/// The width of the Card callout.
+/// @group card
+$kendo-card-callout-width: 20px !default;
+/// The height of the Card callout.
+/// @group card
+$kendo-card-callout-height: 20px !default;
+
+@forward "@progress/kendo-theme-core/scss/components/card/_variables.scss" with (
+    $kendo-card-padding-x: $kendo-card-padding-x,
+    $kendo-card-padding-y: $kendo-card-padding-y,
+    $kendo-card-border-width: $kendo-card-border-width,
+    $kendo-card-border-radius: $kendo-card-border-radius,
+    $kendo-card-inner-border-radius: $kendo-card-inner-border-radius,
+    $kendo-card-font-family: $kendo-card-font-family,
+    $kendo-card-font-size: $kendo-card-font-size,
+    $kendo-card-line-height: $kendo-card-line-height,
+    $kendo-card-deck-gap: $kendo-card-deck-gap,
+    $kendo-card-bg: $kendo-card-bg,
+    $kendo-card-text: $kendo-card-text,
+    $kendo-card-border: $kendo-card-border,
+    $kendo-card-shadow: $kendo-card-shadow,
+    $kendo-card-focus-bg: $kendo-card-focus-bg,
+    $kendo-card-focus-text: $kendo-card-focus-text,
+    $kendo-card-focus-border: $kendo-card-focus-border,
+    $kendo-card-focus-shadow: $kendo-card-focus-shadow,
+    $kendo-card-header-padding-x: $kendo-card-header-padding-x,
+    $kendo-card-header-padding-y: $kendo-card-header-padding-y,
+    $kendo-card-header-border-width: $kendo-card-header-border-width,
+    $kendo-card-header-bg: $kendo-card-header-bg,
+    $kendo-card-header-text: $kendo-card-header-text,
+    $kendo-card-header-border: $kendo-card-header-border,
+    $kendo-card-body-padding-x: $kendo-card-body-padding-x,
+    $kendo-card-body-padding-y: $kendo-card-body-padding-y,
+    $kendo-card-footer-padding-x: $kendo-card-footer-padding-x,
+    $kendo-card-footer-padding-y: $kendo-card-footer-padding-y,
+    $kendo-card-footer-border-width: $kendo-card-footer-border-width,
+    $kendo-card-footer-bg: $kendo-card-footer-bg,
+    $kendo-card-footer-text: $kendo-card-footer-text,
+    $kendo-card-footer-border: $kendo-card-footer-border,
+    $kendo-card-title-margin-bottom: $kendo-card-title-margin-bottom,
+    $kendo-card-title-font-size: $kendo-card-title-font-size,
+    $kendo-card-title-font-family: $kendo-card-title-font-family,
+    $kendo-card-title-line-height: $kendo-card-title-line-height,
+    $kendo-card-title-font-weight: $kendo-card-title-font-weight,
+    $kendo-card-title-letter-spacing: $kendo-card-title-letter-spacing,
+    $kendo-card-subtitle-margin-bottom: $kendo-card-subtitle-margin-bottom,
+    $kendo-card-subtitle-font-size: $kendo-card-subtitle-font-size,
+    $kendo-card-subtitle-font-family: $kendo-card-subtitle-font-family,
+    $kendo-card-subtitle-line-height: $kendo-card-subtitle-line-height,
+    $kendo-card-subtitle-font-weight: $kendo-card-subtitle-font-weight,
+    $kendo-card-subtitle-letter-spacing: $kendo-card-subtitle-letter-spacing,
+    $kendo-card-subtitle-text: $kendo-card-subtitle-text,
+    $kendo-card-img-max-width: $kendo-card-img-max-width,
+    $kendo-card-avatar-spacing: $kendo-card-avatar-spacing,
+    $kendo-card-actions-padding-x: $kendo-card-actions-padding-x,
+    $kendo-card-actions-padding-y: $kendo-card-actions-padding-y,
+    $kendo-card-actions-border-width: $kendo-card-actions-border-width,
+    $kendo-card-actions-gap: $kendo-card-actions-gap,
+    $kendo-card-deck-scroll-button-radius: $kendo-card-deck-scroll-button-radius,
+    $kendo-card-deck-scroll-button-offset: $kendo-card-deck-scroll-button-offset,
+    $kendo-card-callout-width: $kendo-card-callout-width,
+    $kendo-card-callout-height: $kendo-card-callout-height
+);

package/scss/chart-wizard/_index.scss

@@ -0,0 +1,37 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../window/_index.scss" as *;
+@use "../splitter/_index.scss" as *;
+@use "../dataviz/_index.scss" as *;
+@use "../expansion-panel/_index.scss" as *;
+@use "../grid/_index.scss" as *;
+@use "../tabstrip/_index.scss" as *;
+@use "../listview/_index.scss" as *;
+@use "../forms/_index.scss" as *;
+@use "../combobox/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-chart-wizard--styles() {
+    @include import-once( "chart-wizard" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-window--styles();
+        @include kendo-splitter--styles();
+        @include kendo-dataviz--styles();
+        @include kendo-expander--styles();
+        @include kendo-grid--styles();
+        @include kendo-tabstrip--styles();
+        @include kendo-listview--styles();
+        @include kendo-form--styles();
+        @include kendo-combobox--styles();
+        @include kendo-chart-wizard--layout();
+        @include kendo-chart-wizard--theme();
+    }
+}

package/scss/chart-wizard/_layout.scss

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

package/scss/chart-wizard/_theme.scss

@@ -0,0 +1,23 @@
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/chart-wizard/_theme.scss" as *;
+
+@mixin kendo-chart-wizard--theme() {
+    @include kendo-chart-wizard--theme-base();
+
+    .k-chart-wizard {
+        .k-icon-text-wrapper {
+            &:focus,
+            &.k-focus {
+                .k-icon-background-area {
+                    @include focus-indicator(
+                        $type: "outline",
+                        $indicator: $kendo-chart-wizard-icon-area-focus-outline-color,
+                        $outline-width: $kendo-chart-wizard-icon-area-focus-outline-width,
+                        $outline-offset: $kendo-chart-wizard-icon-area-focus-outline-offset
+                    );
+                }
+            }
+        }
+    }
+}

package/scss/chart-wizard/_variables.scss

@@ -0,0 +1,81 @@
+@use "../core/_index.scss" as *;
+
+
+// Chart wizard
+
+/// The color of the area around the chart type icon.
+/// @group chart-wizard
+$kendo-chart-wizard-icon-area-color: k-color(primary) !default;
+/// The background color of the area around the chart type icon.
+/// @group chart-wizard
+$kendo-chart-wizard-icon-area-bg: k-color(primary-subtle) !default;
+/// The border radius of the area around the chart type icon.
+/// @group chart-wizard
+$kendo-chart-wizard-icon-area-border-radius: k-border-radius(sm) !default;
+/// The padding of the area around the chart type icon.
+/// @group chart-wizard
+$kendo-chart-wizard-icon-area-padding: k-spacing(4) !default;
+/// The border width of the area around the chart type icon.
+/// @group chart-wizard
+$kendo-chart-wizard-icon-area-border-width: 1px !default;
+/// The border color of the area around the chart type icon.
+/// @group chart-wizard
+$kendo-chart-wizard-icon-area-border-color: k-color(primary-subtle) !default;
+/// The box shadow of the focused area around the chart type icon.
+/// @group chart-wizard
+$kendo-chart-wizard-icon-area-focus-shadow: null !default;
+/// The box shadow of the selected area around the chart type icon.
+/// @group chart-wizard
+$kendo-chart-wizard-icon-area-selected-shadow: null !default;
+/// The border color of the selected area around the chart type icon.
+/// @group chart-wizard
+$kendo-chart-wizard-icon-area-selected-border-color: k-color(primary) !default;
+/// The background color of the selected area around the chart type icon.
+/// @group chart-wizard
+$kendo-chart-wizard-icon-area-selected-bg: k-color(primary-subtle-active) !default;
+
+/// The color of the selected chart type items in the Property panel.
+/// @group chart-wizard
+$kendo-chart-wizard-chart-type-selected-color: k-color(primary) !default;
+
+/// The padding of the preview pane.
+/// @group chart-wizard
+$kendo-chart-wizard-preview-pane-padding: k-spacing(4) !default;
+/// The padding of the property pane.
+/// @group chart-wizard
+$kendo-chart-wizard-property-pane-padding: k-spacing(4) !default;
+
+/// The gap between the chart type items in the Property panel.
+/// @group chart-wizard
+$kendo-chart-wizard-chart-type-spacing: k-spacing(4) !default;
+/// The gap between the icon area and its text.
+/// @group chart-wizard
+$kendo-chart-wizard-icon-text-gap: k-spacing(3) !default;
+
+/// The outline color of the focused icon area in the ChartWizard.
+/// @group chart-wizard
+$kendo-chart-wizard-icon-area-focus-outline-color: k-color(subtle) !default;
+/// The outline width of the focused icon area in the ChartWizard.
+/// @group chart-wizard
+$kendo-chart-wizard-icon-area-focus-outline-width: 1px !default;
+/// The outline offset of the focused icon area in the ChartWizard.
+/// @group chart-wizard
+$kendo-chart-wizard-icon-area-focus-outline-offset: 1px !default;
+
+@forward "@progress/kendo-theme-core/scss/components/chart-wizard/_variables.scss" with (
+    $kendo-chart-wizard-icon-area-color: $kendo-chart-wizard-icon-area-color,
+    $kendo-chart-wizard-icon-area-bg: $kendo-chart-wizard-icon-area-bg,
+    $kendo-chart-wizard-icon-area-border-radius: $kendo-chart-wizard-icon-area-border-radius,
+    $kendo-chart-wizard-icon-area-border-width: $kendo-chart-wizard-icon-area-border-width,
+    $kendo-chart-wizard-icon-area-border-color: $kendo-chart-wizard-icon-area-border-color,
+    $kendo-chart-wizard-icon-area-padding: $kendo-chart-wizard-icon-area-padding,
+    $kendo-chart-wizard-icon-area-focus-shadow: $kendo-chart-wizard-icon-area-focus-shadow,
+    $kendo-chart-wizard-icon-area-selected-shadow: $kendo-chart-wizard-icon-area-selected-shadow,
+    $kendo-chart-wizard-icon-area-selected-border-color: $kendo-chart-wizard-icon-area-selected-border-color,
+    $kendo-chart-wizard-icon-area-selected-bg: $kendo-chart-wizard-icon-area-selected-bg,
+    $kendo-chart-wizard-chart-type-selected-color: $kendo-chart-wizard-chart-type-selected-color,
+    $kendo-chart-wizard-preview-pane-padding: $kendo-chart-wizard-preview-pane-padding,
+    $kendo-chart-wizard-property-pane-padding: $kendo-chart-wizard-property-pane-padding,
+    $kendo-chart-wizard-chart-type-spacing: $kendo-chart-wizard-chart-type-spacing,
+    $kendo-chart-wizard-icon-text-gap: $kendo-chart-wizard-icon-text-gap
+);

package/scss/chat/_index.scss

@@ -0,0 +1,44 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../textarea/_index.scss" as *;
+@use "../card/_index.scss" as *;
+@use "../appbar/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../bubble/_index.scss" as *;
+@use "../upload/_index.scss" as *;
+@use "../dropzone/_index.scss" as *;
+@use "../avatar/_index.scss" as *;
+@use "../speech-to-text-button/_index.scss" as *;
+@use "../suggestion/_index.scss" as *;
+@use "../skeleton/_index.scss" as *;
+@use "../file-box/_index.scss" as *;
+@use "../prompt-box/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-chat--styles() {
+    @include import-once( "chat" ) {
+        @include core-styles();
+        @include kendo-textarea--styles();
+        @include kendo-card--styles();
+        @include kendo-icon--styles();
+        @include kendo-appbar--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-bubble--styles();
+        @include kendo-suggestion--styles();
+        @include kendo-skeleton--styles();
+        @include kendo-upload--styles();
+        @include kendo-dropzone--styles();
+        @include kendo-avatar--styles();
+        @include kendo-prompt-box--styles();
+        @include kendo-speech-to-text-button--styles();
+        @include kendo-file-box--styles();
+        @include kendo-chat--layout();
+        @include kendo-chat--theme();
+    }
+}

package/scss/chat/_layout.scss

@@ -0,0 +1,46 @@
+@use "../core/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/chat/_layout.scss" as *;
+@use "./variables.scss" as *;
+
+
+@mixin kendo-chat--layout() {
+    @include kendo-chat--layout-base();
+
+    .k-message-list-content {
+        padding-block-end: k-spacing(2);
+    }
+
+    .k-chat-bubble,
+    .k-message-box-wrapper {
+        .k-message-reference {
+            padding-block: 0;
+        }
+    }
+
+    .k-message-reference-content {
+        padding-block: calc( #{$kendo-chat-message-reference-padding-y} - 1px );
+    }
+
+    .k-message-reference-content {
+        &:has(>.k-file-box) {
+            padding-block: 0;
+        }
+
+        &::before {
+              height: calc( var(--kendo-font-size-sm) * var(--kendo-line-height-sm));
+        }
+    }
+
+    .k-message,
+    .k-message-box-wrapper {
+        .k-message-reference {
+            border-radius: var(--kendo-border-radius-md);
+            border-width: 1px;
+            border-style: solid;
+        }
+    }
+
+    .k-chat-download-button-wrapper {
+        padding: k-spacing(0.5);
+    }
+}

package/scss/chat/_theme.scss

@@ -0,0 +1,32 @@
+@use "@progress/kendo-theme-core/scss/components/chat/_theme.scss" as *;
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
+
+
+@mixin kendo-chat--theme() {
+    @include kendo-chat--theme-base();
+
+    .k-chat .k-alt .k-chat-bubble {
+        &:focus,
+        &.k-focus {
+            @include focus-indicator(
+                $type: "outline",
+                $indicator: $kendo-chat-alt-bubble-focus-outline-color,
+                $outline-width: $kendo-chat-alt-bubble-focus-outline-width,
+                $outline-offset: $kendo-chat-alt-bubble-focus-outline-offset
+            );
+        }
+    }
+
+    // Message time
+    .k-message-time {
+        color: $kendo-chat-status-text;
+    }
+
+    .k-message,
+    .k-message-box-wrapper {
+        .k-message-reference {
+            border-color: var(--kendo-color-border);
+        }
+    }
+}