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

package/scss/toolbar/_variables.scss

@@ -0,0 +1,196 @@
+@use "../core/_index.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "../menu/_variables.scss" as *;
+
+// Toolbar
+
+/// The default fill mode of the Toolbar.
+/// @group toolbar
+/// @role default
+$kendo-toolbar-default-fill-mode: "solid" !default;
+/// The default size of the Toolbar.
+/// @group toolbar
+/// @role default
+$kendo-toolbar-default-size: "md" !default;
+
+/// The horizontal padding of the small Toolbar.
+/// @group toolbar
+$kendo-toolbar-sm-padding-x: k-spacing(2) !default;
+/// The horizontal padding of the medium Toolbar.
+/// @group toolbar
+$kendo-toolbar-md-padding-x: k-spacing(2.5) !default;
+/// The horizontal padding of the large Toolbar.
+/// @group toolbar
+$kendo-toolbar-lg-padding-x: k-spacing(3) !default;
+
+/// The vertical padding of the small Toolbar.
+/// @group toolbar
+$kendo-toolbar-sm-padding-y: k-spacing(2) !default;
+/// The vertical padding of the medium Toolbar.
+/// @group toolbar
+$kendo-toolbar-md-padding-y: k-spacing(2.5) !default;
+/// The vertical padding of the large Toolbar.
+/// @group toolbar
+$kendo-toolbar-lg-padding-y: k-spacing(3) !default;
+
+/// The spacing between the tools of the small Toolbar.
+/// @group toolbar
+$kendo-toolbar-sm-spacing: k-spacing(2) !default;
+/// The spacing between the tools of the medium Toolbar.
+/// @group toolbar
+$kendo-toolbar-md-spacing: k-spacing(2) !default;
+/// The spacing between the tools of the large Toolbar.
+/// @group toolbar
+$kendo-toolbar-lg-spacing: k-spacing(2) !default;
+
+/// The height of the Toolbar button separator.
+/// @group toolbar
+$kendo-toolbar-separator-height: $kendo-button-md-calc-size !default;
+/// The height of the small Toolbar button separator.
+/// @group toolbar
+$kendo-toolbar-sm-separator-height: $kendo-button-sm-calc-size !default;
+/// The height of the medium Toolbar button separator.
+/// @group toolbar
+$kendo-toolbar-md-separator-height: $kendo-toolbar-separator-height !default;
+/// The height of the large Toolbar button separator.
+/// @group toolbar
+$kendo-toolbar-lg-separator-height: $kendo-button-lg-calc-size !default;
+
+/// The width of the border around the Toolbar.
+/// @group toolbar
+$kendo-toolbar-border-width: 1px !default;
+/// The border radius of the Toolbar.
+/// @group toolbar
+$kendo-toolbar-border-radius: k-border-radius(xl) !default;
+
+/// The font family of the Toolbar.
+/// @group toolbar
+$kendo-toolbar-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the Toolbar.
+/// @group toolbar
+$kendo-toolbar-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the Toolbar.
+/// @group toolbar
+$kendo-toolbar-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The background color of the Toolbar.
+/// @group toolbar
+$kendo-toolbar-bg: k-translucency-bg(k-color(surface-alt)) !default;
+/// The text color of the Toolbar.
+/// @group toolbar
+$kendo-toolbar-text: k-color(on-app-surface) !default;
+/// The color of the border around the Toolbar.
+/// @group toolbar
+$kendo-toolbar-border: k-color(border) !default;
+/// The gradient of the Toolbar.
+/// @group toolbar
+$kendo-toolbar-gradient: null !default;
+/// The box shadow of the Toolbar.
+/// @group toolbar
+$kendo-toolbar-shadow: null !default;
+/// The left and right scroll overlay of the Toolbar.
+/// @group toolbar
+$kendo-toolbar-scroll-overlay: $kendo-toolbar-bg, color-mix(in srgb, k-color(app-surface) 0%, transparent) !default;
+
+/// The text color of the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-text: $kendo-button-text !default;
+/// The color of the border around the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-border: color-mix(in srgb, k-color(base-emphasis) 80%, transparent) !default;
+/// The box shadow of the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-shadow: null !default;
+/// The width of the border around the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-border-width: $kendo-toolbar-border-width !default;
+/// The left and right scroll overlay of the outline Toolbar.
+/// @group toolbar
+$kendo-toolbar-outline-scroll-overlay: k-color(app-surface), color-mix(in srgb, k-color(app-surface) 0%, transparent) !default;
+
+/// The text color of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-text: null !default;
+/// The color of the border around the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-border: $kendo-toolbar-border !default;
+/// The box shadow of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-shadow: null !default;
+/// The left and right scroll overlay of the flat Toolbar.
+/// @group toolbar
+$kendo-toolbar-flat-scroll-overlay: k-color(app-surface), color-mix(in srgb, k-color(app-surface) 0%, transparent) !default;
+
+/// The color of the separator border of the Toolbar.
+/// @group toolbar
+$kendo-toolbar-separator-border: inherit !default;
+
+/// The width of the input in the Toolbar.
+/// @group toolbar
+$kendo-toolbar-input-width: 10em !default;
+/// The minimum width of the Smart ToolBox in the Toolbar.
+/// @group toolbar
+$kendo-toolbar-smart-box-min-width: 350px !default;
+
+/// The box shadow of the focused Toolbar item.
+/// @group toolbar
+$kendo-toolbar-item-shadow: $kendo-button-focus-shadow !default;
+
+/// The font size of the Toolbar overflow container.
+/// @group toolbar
+$kendo-toolbar-overflow-container-font-size: $kendo-menu-popup-md-font-size !default;
+/// The line-height of the Toolbar overflow container.
+/// @group toolbar
+$kendo-toolbar-overflow-container-line-height: $kendo-menu-popup-md-line-height !default;
+/// The vertical padding of the Toolbar overflow button.
+/// @group toolbar
+$kendo-toolbar-overflow-button-padding-y: $kendo-menu-popup-md-item-padding-y !default;
+/// The horizontal padding of the Toolbar overflow button.
+/// @group toolbar
+$kendo-toolbar-overflow-button-padding-x: $kendo-menu-popup-md-item-padding-x !default;
+
+@forward "@progress/kendo-theme-core/scss/components/toolbar/_variables.scss" with (
+    $kendo-toolbar-default-fill-mode: $kendo-toolbar-default-fill-mode,
+    $kendo-toolbar-default-size: $kendo-toolbar-default-size,
+    $kendo-toolbar-sm-padding-x: $kendo-toolbar-sm-padding-x,
+    $kendo-toolbar-md-padding-x: $kendo-toolbar-md-padding-x,
+    $kendo-toolbar-lg-padding-x: $kendo-toolbar-lg-padding-x,
+    $kendo-toolbar-sm-padding-y: $kendo-toolbar-sm-padding-y,
+    $kendo-toolbar-md-padding-y: $kendo-toolbar-md-padding-y,
+    $kendo-toolbar-lg-padding-y: $kendo-toolbar-lg-padding-y,
+    $kendo-toolbar-sm-spacing: $kendo-toolbar-sm-spacing,
+    $kendo-toolbar-md-spacing: $kendo-toolbar-md-spacing,
+    $kendo-toolbar-lg-spacing: $kendo-toolbar-lg-spacing,
+    $kendo-toolbar-separator-height: $kendo-toolbar-separator-height,
+    $kendo-toolbar-sm-separator-height: $kendo-toolbar-sm-separator-height,
+    $kendo-toolbar-md-separator-height: $kendo-toolbar-md-separator-height,
+    $kendo-toolbar-lg-separator-height: $kendo-toolbar-lg-separator-height,
+    $kendo-toolbar-border-width: $kendo-toolbar-border-width,
+    $kendo-toolbar-border-radius: $kendo-toolbar-border-radius,
+    $kendo-toolbar-font-family: $kendo-toolbar-font-family,
+    $kendo-toolbar-font-size: $kendo-toolbar-font-size,
+    $kendo-toolbar-line-height: $kendo-toolbar-line-height,
+    $kendo-toolbar-bg: $kendo-toolbar-bg,
+    $kendo-toolbar-text: $kendo-toolbar-text,
+    $kendo-toolbar-border: $kendo-toolbar-border,
+    $kendo-toolbar-gradient: $kendo-toolbar-gradient,
+    $kendo-toolbar-shadow: $kendo-toolbar-shadow,
+    $kendo-toolbar-scroll-overlay: $kendo-toolbar-scroll-overlay,
+    $kendo-toolbar-outline-text: $kendo-toolbar-outline-text,
+    $kendo-toolbar-outline-border: $kendo-toolbar-outline-border,
+    $kendo-toolbar-outline-shadow: $kendo-toolbar-outline-shadow,
+    $kendo-toolbar-outline-border-width: $kendo-toolbar-outline-border-width,
+    $kendo-toolbar-outline-scroll-overlay: $kendo-toolbar-outline-scroll-overlay,
+    $kendo-toolbar-flat-text: $kendo-toolbar-flat-text,
+    $kendo-toolbar-flat-border: $kendo-toolbar-flat-border,
+    $kendo-toolbar-flat-shadow: $kendo-toolbar-flat-shadow,
+    $kendo-toolbar-flat-scroll-overlay: $kendo-toolbar-flat-scroll-overlay,
+    $kendo-toolbar-separator-border: $kendo-toolbar-separator-border,
+    $kendo-toolbar-input-width: $kendo-toolbar-input-width,
+    $kendo-toolbar-smart-box-min-width: $kendo-toolbar-smart-box-min-width,
+    $kendo-toolbar-item-shadow: $kendo-toolbar-item-shadow,
+    $kendo-toolbar-overflow-container-font-size: $kendo-toolbar-overflow-container-font-size,
+    $kendo-toolbar-overflow-container-line-height: $kendo-toolbar-overflow-container-line-height,
+    $kendo-toolbar-overflow-button-padding-y: $kendo-toolbar-overflow-button-padding-y,
+    $kendo-toolbar-overflow-button-padding-x: $kendo-toolbar-overflow-button-padding-x
+);

package/scss/tooltip/_functions.scss

@@ -0,0 +1,17 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+
+
+@function tooltip-theme( $colors ) {
+    $_theme: ();
+
+    @each $name in $colors {
+        $_theme: map.merge(( $name: (
+            color: k-color(on-#{$name}),
+            background-color: k-color(#{$name}),
+            border: k-color(#{$name}),
+        )), $_theme );
+    }
+
+    @return $_theme;
+}

package/scss/tooltip/_index.scss

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

package/scss/tooltip/_layout.scss

@@ -0,0 +1,10 @@
+@use "@progress/kendo-theme-core/scss/components/tooltip/_layout.scss" as *;
+
+
+@mixin kendo-tooltip--layout() {
+    @include kendo-tooltip--layout-base();
+
+    .k-tooltip-button .k-icon {
+        vertical-align: text-bottom;
+    }
+}

package/scss/tooltip/_theme.scss

@@ -0,0 +1,11 @@
+@use "../core/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/tooltip/_theme.scss" as *;
+
+
+@mixin kendo-tooltip--theme() {
+    @include kendo-tooltip--theme-base();
+
+    .k-tooltip {
+        backdrop-filter: k-translucency-blur(5);
+    }
+}

package/scss/tooltip/_variables.scss

@@ -0,0 +1,81 @@
+@use "sass:map";
+@use "./_functions.scss" as *;
+@use "../core/_index.scss" as *;
+
+
+// Tooltip
+
+/// The vertical padding of the Tooltip.
+/// @group tooltip
+$kendo-tooltip-padding-y: k-spacing(1.5) !default;
+/// The horizontal padding of the Tooltip.
+/// @group tooltip
+$kendo-tooltip-padding-x: k-spacing(2.5) !default;
+/// The width of the border around the Tooltip.
+/// @group tooltip
+$kendo-tooltip-border-width: 0px !default;
+/// The border radius of the Tooltip.
+/// @group tooltip
+$kendo-tooltip-border-radius: k-border-radius(md) !default;
+
+/// The font family of the Tooltip.
+/// @group tooltip
+$kendo-tooltip-font-family: var( --kendo-font-family ) !default;
+/// The font size of the Tooltip.
+/// @group tooltip
+$kendo-tooltip-font-size: var( --kendo-font-size-md ) !default;
+/// The line height of the Tooltip.
+/// @group tooltip
+$kendo-tooltip-line-height: calc( var( --kendo-line-height-xs ) * 1.25 ) !default;
+
+/// The font size of the Tooltip title.
+/// @group tooltip
+$kendo-tooltip-title-font-size: calc( ( var( --kendo-font-size, .875rem ) * 1.25 ) ) !default;
+/// The line height of the Tooltip title.
+/// @group tooltip
+$kendo-tooltip-title-line-height: var( --kendo-line-height-xs, normal ) !default;
+
+/// The size of the Tooltip callout.
+/// @group tooltip
+$kendo-tooltip-callout-size: 6px !default;
+
+/// The default background of the Tooltip.
+/// @group tooltip
+$kendo-tooltip-bg: k-translucency-bg(k-elevation-bg(2, k-color(inverse))) !default;
+/// The default text color of the Tooltip.
+/// @group tooltip
+$kendo-tooltip-text: k-color(on-inverse) !default;
+/// The default border color of the Tooltip.
+/// @group tooltip
+$kendo-tooltip-border: k-color(border) !default;
+
+/// The box-shadow of the Tooltip.
+/// @group tooltip
+$kendo-tooltip-shadow: k-elevation(2) !default;
+
+/// The theme colors map for the Tooltip.
+/// @group tooltip
+$kendo-tooltip-theme-colors: ("base", "info", "success", "warning", "error", "inverse") !default;
+
+/// The generated theme colors map for the Tooltip.
+/// @group tooltip
+$kendo-tooltip-theme: tooltip-theme( $kendo-tooltip-theme-colors ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/tooltip/_variables.scss" with (
+    $kendo-tooltip-padding-y: $kendo-tooltip-padding-y,
+    $kendo-tooltip-padding-x: $kendo-tooltip-padding-x,
+    $kendo-tooltip-border-width: $kendo-tooltip-border-width,
+    $kendo-tooltip-border-radius: $kendo-tooltip-border-radius,
+    $kendo-tooltip-font-family: $kendo-tooltip-font-family,
+    $kendo-tooltip-font-size: $kendo-tooltip-font-size,
+    $kendo-tooltip-line-height: $kendo-tooltip-line-height,
+    $kendo-tooltip-title-font-size: $kendo-tooltip-title-font-size,
+    $kendo-tooltip-title-line-height: $kendo-tooltip-title-line-height,
+    $kendo-tooltip-callout-size: $kendo-tooltip-callout-size,
+    $kendo-tooltip-bg: $kendo-tooltip-bg,
+    $kendo-tooltip-text: $kendo-tooltip-text,
+    $kendo-tooltip-border: $kendo-tooltip-border,
+    $kendo-tooltip-shadow: $kendo-tooltip-shadow,
+    $kendo-tooltip-theme-colors: $kendo-tooltip-theme-colors,
+    $kendo-tooltip-theme: $kendo-tooltip-theme
+);

package/scss/treelist/_index.scss

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

package/scss/treelist/_layout.scss

@@ -0,0 +1,10 @@
+@use "@progress/kendo-theme-core/scss/components/treelist/_layout.scss" as *;
+
+
+@mixin kendo-treelist--layout() {
+    @include kendo-treelist--layout-base();
+
+    .k-splitter .k-property-grid {
+        border-radius: 0;
+    }
+}

package/scss/treelist/_theme.scss

@@ -0,0 +1,11 @@
+@use "../grid/_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/treelist/_theme.scss" as *;
+
+
+@mixin kendo-treelist--theme() {
+    @include kendo-treelist--theme-base();
+
+    .k-treelist-scrollable > .k-table {
+        background-color: $kendo-grid-bg;
+    }
+}

package/scss/treelist/_variables.scss

@@ -0,0 +1,15 @@
+@use "../grid/_variables.scss" as *;
+
+// Treelist
+
+/// The background color of the TreeList footer row.
+/// @group treelist
+$kendo-treelist-footer-row-bg: $kendo-grid-hover-bg !default;
+/// The border width of the TreeList footer row.
+/// @group treelist
+$kendo-treelist-footer-row-border-width: 1px !default;
+
+@forward "@progress/kendo-theme-core/scss/components/treelist/_variables.scss" with (
+    $kendo-treelist-footer-row-bg: $kendo-treelist-footer-row-bg,
+    $kendo-treelist-footer-row-border-width: $kendo-treelist-footer-row-border-width
+);

package/scss/treeview/_index.scss

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

package/scss/treeview/_layout.scss

@@ -0,0 +1,15 @@
+@use "@progress/kendo-theme-core/scss/components/treeview/_layout.scss" as *;
+@use "../core/index.scss" as *;
+
+
+@mixin kendo-treeview--layout() {
+    @include kendo-treeview--layout-base();
+
+    .k-treeview-leaf {
+        transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), outline k-transition(rapid);
+    }
+
+    .k-treeview-item-content {
+        margin-bottom: k-spacing(.5);
+    }
+}

package/scss/treeview/_theme.scss

@@ -0,0 +1,22 @@
+@use "@progress/kendo-theme-core/scss/components/treeview/_theme.scss" as *;
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.scss" as *;
+@use "./_variables.scss" as *;
+
+
+@mixin kendo-treeview--theme() {
+    @include kendo-treeview--theme-base();
+
+    .k-treeview-item-content {
+        // Focus state
+        &:focus,
+        &.k-focus {
+            @include focus-indicator(
+                $indicator: $kendo-treeview-item-focus-outline-color,
+                $inset: true,
+                $type: "outline",
+                $outline-offset: $kendo-treeview-item-focus-outline-offset
+            );
+        }
+    }
+}