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

package/scss/button/_variables.scss

@@ -0,0 +1,364 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+
+
+// Button
+
+/// The default theme color of the Button.
+/// @group button
+/// @role default
+$kendo-button-default-theme-color: "base" !default;
+/// The default fill mode of the Button.
+/// @group button
+/// @role default
+$kendo-button-default-fill-mode: "solid" !default;
+/// The default roundness of the Button.
+/// @group button
+/// @role default
+$kendo-button-default-roundness: "md" !default;
+/// The default size of the Button.
+/// @group button
+/// @role default
+$kendo-button-default-size: "md" !default;
+
+/// The width of the border around the Button.
+/// @group button
+$kendo-button-border-width: 1px !default;
+
+/// The border radius of the Button.
+/// @group button
+$kendo-button-border-radius: null !default;
+
+/// The spacing between icon and text inside the Button.
+/// @group button
+$kendo-button-gap: k-spacing(1.5) !default;
+
+/// The horizontal padding of the xsmall Button.
+/// @group button
+$kendo-button-xs-padding-x: k-spacing(1) !default;
+/// The horizontal padding of the small Button.
+/// @group button
+$kendo-button-sm-padding-x: k-spacing(2) !default;
+/// The horizontal padding of the medium Button.
+/// @group button
+$kendo-button-md-padding-x: k-spacing(2.5) !default;
+/// The horizontal padding of the large Button.
+/// @group button
+$kendo-button-lg-padding-x: k-spacing(3) !default;
+
+/// The vertical padding of the xsmall Button.
+/// @group button
+$kendo-button-xs-padding-y: k-spacing(0.5) !default;
+/// The vertical padding of the small Button.
+/// @group button
+$kendo-button-sm-padding-y: k-spacing(1) !default;
+/// The vertical padding of the medium Button.
+/// @group button
+$kendo-button-md-padding-y: k-spacing(1.5) !default;
+/// The vertical padding of the large Button.
+/// @group button
+$kendo-button-lg-padding-y: k-spacing(2) !default;
+
+/// The font family of the Button.
+/// @group button
+$kendo-button-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font weight of the Button.
+/// @group button
+$kendo-button-font-weight: var( --kendo-font-weight-normal, normal ) !default;
+
+/// The font size of the Button.
+/// @group button
+$kendo-button-font-size: var( --kendo-font-size, inherit ) !default;
+/// The font size of the xsmall Button.
+/// @group button
+$kendo-button-xs-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The font size of the small Button.
+/// @group button
+$kendo-button-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The font size of the medium Button.
+/// @group button
+$kendo-button-md-font-size: $kendo-button-font-size !default;
+/// The font size of the large Button.
+/// @group button
+$kendo-button-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
+
+/// The line height used along with the $kendo-font-size the.
+/// @group button
+$kendo-button-line-height: var( --kendo-line-height, normal ) !default;
+/// The line height used along with the $kendo-font-size the of the xsmall Button.
+/// @group button
+$kendo-button-xs-line-height: var( --kendo-line-height-sm, normal ) !default;
+/// The line height used along with the $kendo-font-size the of the small Button.
+/// @group button
+$kendo-button-sm-line-height: var( --kendo-line-height-sm, normal ) !default;
+/// The line height used along with the $kendo-font-size the of the medium Button.
+/// @group button
+$kendo-button-md-line-height: $kendo-button-line-height !default;
+/// The line height used along with the $kendo-font-size the of the large Button.
+/// @group button
+$kendo-button-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
+
+$kendo-button-xs-calc-size: calc( ( #{$kendo-button-xs-line-height} * 1em ) + ( #{$kendo-button-xs-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
+$kendo-button-sm-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
+$kendo-button-md-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
+$kendo-button-lg-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
+
+$kendo-button-inner-calc-size: calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) !default;
+$kendo-button-xs-inner-calc-size: calc( ( #{$kendo-button-xs-line-height} * 1em ) + ( #{$kendo-button-xs-padding-y} * 2 ) ) !default;
+$kendo-button-sm-inner-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
+$kendo-button-md-inner-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) !default;
+$kendo-button-lg-inner-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) ) !default;
+
+/// The base background of the Button.
+/// @group button
+$kendo-button-bg: k-color(base) !default;
+/// The base text color of the Button.
+/// @group button
+$kendo-button-text: k-color(on-base) !default;
+/// The base border color of the Button.
+/// @group button
+$kendo-button-border: transparent !default;
+/// The base background gradient of the Button.
+/// @group button
+$kendo-button-gradient: null !default;
+/// The base shadow of the Button.
+/// @group button
+$kendo-button-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.16) !default;
+
+/// The base background of the hovered Button.
+/// @group button
+$kendo-button-hover-bg: k-color(base-hover) !default;
+/// The base text color of the hovered Button.
+/// @group button
+$kendo-button-hover-text: k-color(on-base) !default;
+/// The base border color of the hovered Button.
+/// @group button
+$kendo-button-hover-border: transparent !default;
+/// The base background gradient of the hovered Button.
+/// @group button
+$kendo-button-hover-gradient: null !default;
+/// The base shadow of the hovered Button.
+/// @group button
+$kendo-button-hover-shadow: null !default;
+
+/// The base background color of the active Button.
+/// @group button
+$kendo-button-active-bg: k-color(base-active) !default;
+/// The base text color of the active Button.
+/// @group button
+$kendo-button-active-text: k-color(on-base) !default;
+/// The base border color of the active Button.
+/// @group button
+$kendo-button-active-border: transparent !default;
+/// The base background gradient of the active Button.
+/// @group button
+$kendo-button-active-gradient: null !default;
+/// The base shadow of the active Button.
+/// @group button
+$kendo-button-active-shadow: null !default;
+
+/// The base background color of the selected Button.
+/// @group button
+$kendo-button-selected-bg: k-color(base-active) !default;
+/// The text color of the selected Button.
+/// @group button
+$kendo-button-selected-text: k-color(on-base) !default;
+/// The border color of the selected Button.
+/// @group button
+$kendo-button-selected-border: transparent !default;
+/// The background gradient of the selected Button.
+/// @group button
+$kendo-button-selected-gradient: $kendo-button-active-gradient !default;
+/// The base shadow of the selected Button.
+/// @group button
+$kendo-button-selected-shadow: $kendo-button-active-shadow !default;
+
+/// The base shadow of the focused Button.
+/// @group button
+$kendo-button-focus-shadow: none !default;
+
+/// The outline width of the focused Button.
+/// @group button
+$kendo-button-focus-outline-width: 1px !default;
+/// The outline offset of the focused Button.
+/// @group button
+$kendo-button-focus-outline-offset: 1px !default;
+
+/// The base background of the disabled Button.
+/// @group button
+$kendo-button-disabled-bg: null !default;
+/// The base text color of the disabled Button.
+/// @group button
+$kendo-button-disabled-text: null !default;
+/// The base border color of the disabled Button.
+/// @group button
+$kendo-button-disabled-border: null !default;
+/// The base background gradient of the disabled Button.
+/// @group button
+$kendo-button-disabled-gradient: null !default;
+/// The base shadow of the disabled Button.
+/// @group button
+$kendo-button-disabled-shadow: null !default;
+
+/// The opacity of the pulsing animation for the generating Button.
+/// @group button
+$kendo-button-pulsing-opacity: .4 !default;
+
+// Solid Button
+/// The button gradient of the Button.
+/// @group button
+$kendo-solid-button-gradient: null !default;
+/// The shadow of the Button.
+/// @group button
+$kendo-solid-button-shadow: true !default;
+/// The button shadow blur of the Button.
+/// @group button
+$kendo-solid-button-shadow-blur: 0px !default;
+/// The button shadow spread of the Button.
+/// @group button
+$kendo-solid-button-shadow-spread: 2px !default;
+/// The button shadow opacity of the Button.
+/// @group button
+$kendo-solid-button-shadow-opacity: .3 !default;
+
+// Outline Button
+/// The border color of the outline Button.
+/// @group button
+$kendo-outline-button-border: color-mix(in srgb, k-color(base-emphasis) 80%, transparent) !default;
+/// The shadow of the Button.
+/// @group button
+$kendo-outline-button-shadow: true !default;
+/// The button shadow blur of the Button.
+/// @group button
+$kendo-outline-button-shadow-blur: 0px !default;
+/// The button shadow spread of the Button.
+/// @group button
+$kendo-outline-button-shadow-spread: 2px !default;
+/// The button shadow opacity of the Button.
+/// @group button
+$kendo-outline-button-shadow-opacity: .3 !default;
+
+// Link Button
+/// The shadow of the Button.
+/// @group button
+$kendo-link-button-shadow: true !default;
+/// The button shadow blur of the Button.
+/// @group button
+$kendo-link-button-shadow-blur: 0px !default;
+/// The button shadow spread of the Button.
+/// @group button
+$kendo-link-button-shadow-spread: 2px !default;
+/// The button shadow opacity of the Button.
+/// @group button
+$kendo-link-button-shadow-opacity: .3 !default;
+
+// Clear Button
+/// The button focus opacity of the Button.
+/// @group button
+$kendo-clear-button-focus-opacity: .1 !default;
+
+/// The overlay opacity of the hovered flat Button. Used to create a background for the flat Button.
+/// @group button
+$kendo-flat-button-hover-opacity: .08 !default;
+/// The overlay opacity of the focused flat Button. Used to create a background for the flat Button.
+/// @group button
+$kendo-flat-button-focus-opacity: null !default;
+/// The overlay opacity of the active flat Button. Used to create background for the flat Button.
+/// @group button
+$kendo-flat-button-active-opacity: .16 !default;
+/// The overlay opacity of the selected flat Button. Used to create background for the flat Button.
+/// @group button
+$kendo-flat-button-selected-opacity: .2 !default;
+/// The opacity of the flat Button focus ring. Used to create a border for the flat Button.
+/// @group button
+$kendo-flat-button-focus-ring-opacity: .12 !default;
+
+/// The transition of the Button.
+/// @group button
+$kendo-button-transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), box-shadow k-transition(rapid), opacity k-transition(rapid) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/button/_variables.scss" with (
+    $kendo-button-border-width: $kendo-button-border-width,
+    $kendo-button-border-radius: $kendo-button-border-radius,
+    $kendo-button-gap: $kendo-button-gap,
+    $kendo-button-xs-padding-x: $kendo-button-xs-padding-x,
+    $kendo-button-sm-padding-x: $kendo-button-sm-padding-x,
+    $kendo-button-md-padding-x: $kendo-button-md-padding-x,
+    $kendo-button-lg-padding-x: $kendo-button-lg-padding-x,
+    $kendo-button-xs-padding-y: $kendo-button-xs-padding-y,
+    $kendo-button-sm-padding-y: $kendo-button-sm-padding-y,
+    $kendo-button-md-padding-y: $kendo-button-md-padding-y,
+    $kendo-button-lg-padding-y: $kendo-button-lg-padding-y,
+    $kendo-button-font-family: $kendo-button-font-family,
+    $kendo-button-font-weight: $kendo-button-font-weight,
+    $kendo-button-font-size: $kendo-button-font-size,
+    $kendo-button-xs-font-size: $kendo-button-xs-font-size,
+    $kendo-button-sm-font-size: $kendo-button-sm-font-size,
+    $kendo-button-md-font-size: $kendo-button-md-font-size,
+    $kendo-button-lg-font-size: $kendo-button-lg-font-size,
+    $kendo-button-line-height: $kendo-button-line-height,
+    $kendo-button-xs-line-height: $kendo-button-xs-line-height,
+    $kendo-button-sm-line-height: $kendo-button-sm-line-height,
+    $kendo-button-md-line-height: $kendo-button-md-line-height,
+    $kendo-button-lg-line-height: $kendo-button-lg-line-height,
+    $kendo-button-xs-calc-size: $kendo-button-xs-calc-size,
+    $kendo-button-sm-calc-size: $kendo-button-sm-calc-size,
+    $kendo-button-md-calc-size: $kendo-button-md-calc-size,
+    $kendo-button-lg-calc-size: $kendo-button-lg-calc-size,
+    $kendo-button-inner-calc-size: $kendo-button-inner-calc-size,
+    $kendo-button-xs-inner-calc-size: $kendo-button-xs-inner-calc-size,
+    $kendo-button-sm-inner-calc-size: $kendo-button-sm-inner-calc-size,
+    $kendo-button-md-inner-calc-size: $kendo-button-md-inner-calc-size,
+    $kendo-button-lg-inner-calc-size: $kendo-button-lg-inner-calc-size,
+    $kendo-button-bg: $kendo-button-bg,
+    $kendo-button-text: $kendo-button-text,
+    $kendo-button-border: $kendo-button-border,
+    $kendo-button-gradient: $kendo-button-gradient,
+    $kendo-button-shadow: $kendo-button-shadow,
+    $kendo-button-hover-bg: $kendo-button-hover-bg,
+    $kendo-button-hover-text: $kendo-button-hover-text,
+    $kendo-button-hover-border: $kendo-button-hover-border,
+    $kendo-button-hover-gradient: $kendo-button-hover-gradient,
+    $kendo-button-hover-shadow: $kendo-button-hover-shadow,
+    $kendo-button-active-bg: $kendo-button-active-bg,
+    $kendo-button-active-text: $kendo-button-active-text,
+    $kendo-button-active-border: $kendo-button-active-border,
+    $kendo-button-active-gradient: $kendo-button-active-gradient,
+    $kendo-button-active-shadow: $kendo-button-active-shadow,
+    $kendo-button-selected-bg: $kendo-button-selected-bg,
+    $kendo-button-selected-text: $kendo-button-selected-text,
+    $kendo-button-selected-border: $kendo-button-selected-border,
+    $kendo-button-selected-gradient: $kendo-button-selected-gradient,
+    $kendo-button-selected-shadow: $kendo-button-selected-shadow,
+    $kendo-button-focus-shadow: $kendo-button-focus-shadow,
+    $kendo-button-disabled-bg: $kendo-button-disabled-bg,
+    $kendo-button-disabled-text: $kendo-button-disabled-text,
+    $kendo-button-disabled-border: $kendo-button-disabled-border,
+    $kendo-button-disabled-gradient: $kendo-button-disabled-gradient,
+    $kendo-button-disabled-shadow: $kendo-button-disabled-shadow,
+    $kendo-button-pulsing-opacity: $kendo-button-pulsing-opacity,
+    $kendo-solid-button-gradient: $kendo-solid-button-gradient,
+    $kendo-solid-button-shadow: $kendo-solid-button-shadow,
+    $kendo-solid-button-shadow-blur: $kendo-solid-button-shadow-blur,
+    $kendo-solid-button-shadow-spread: $kendo-solid-button-shadow-spread,
+    $kendo-solid-button-shadow-opacity: $kendo-solid-button-shadow-opacity,
+    $kendo-outline-button-shadow: $kendo-outline-button-shadow,
+    $kendo-outline-button-shadow-blur: $kendo-outline-button-shadow-blur,
+    $kendo-outline-button-shadow-spread: $kendo-outline-button-shadow-spread,
+    $kendo-outline-button-shadow-opacity: $kendo-outline-button-shadow-opacity,
+    $kendo-link-button-shadow: $kendo-link-button-shadow,
+    $kendo-link-button-shadow-blur: $kendo-link-button-shadow-blur,
+    $kendo-link-button-shadow-spread: $kendo-link-button-shadow-spread,
+    $kendo-link-button-shadow-opacity: $kendo-link-button-shadow-opacity,
+    $kendo-clear-button-focus-opacity: $kendo-clear-button-focus-opacity,
+    $kendo-flat-button-hover-opacity: $kendo-flat-button-hover-opacity,
+    $kendo-flat-button-focus-opacity: $kendo-flat-button-focus-opacity,
+    $kendo-flat-button-active-opacity: $kendo-flat-button-active-opacity,
+    $kendo-flat-button-selected-opacity: $kendo-flat-button-selected-opacity,
+    $kendo-flat-button-focus-ring-opacity: $kendo-flat-button-focus-ring-opacity,
+    $kendo-button-transition: $kendo-button-transition,
+    $kendo-button-default-theme-color: $kendo-button-default-theme-color,
+    $kendo-button-default-fill-mode: $kendo-button-default-fill-mode,
+    $kendo-button-default-roundness: $kendo-button-default-roundness,
+    $kendo-button-default-size: $kendo-button-default-size
+);

package/scss/calendar/_index.scss

@@ -0,0 +1,26 @@
+// Dependencies
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../list/_index.scss" as *;
+
+// Component
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
+
+// Expose
+@mixin kendo-calendar--styles() {
+    @include import-once( "calendar" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-icon--styles();
+        @include kendo-list--styles();
+        @include kendo-calendar--layout();
+        @include kendo-calendar--theme();
+        @include kendo-utils--flex-grid--align-items();
+        @include kendo-utils--flex-grid--justify-content();
+        @include kendo-utils--interactivity--pointer-events();
+    }
+}

package/scss/calendar/_layout.scss

@@ -0,0 +1,36 @@
+@use "@progress/kendo-theme-core/scss/components/calendar/_layout.scss" as *;
+@use "../core/index.scss" as *;
+@use "./variables.scss" as *;
+
+
+@mixin kendo-calendar--layout() {
+    @include kendo-calendar--layout-base();
+
+    .k-calendar {
+        .k-range-start,
+        .k-range-end {
+            border-radius: 0;
+
+            .k-link {
+                border-radius: $kendo-calendar-range-cell-border-radius;
+            }
+        }
+
+        .k-calendar-cell-inner {
+            transition: color k-transition(rapid), background-color k-transition(rapid), border-color k-transition(rapid), outline k-transition(rapid);
+        }
+    }
+
+    .k-calendar:not(.k-calendar-infinite) {
+        .k-calendar-view {
+            margin: 0;
+            width: auto;
+            padding-block: calc( #{$kendo-calendar-header-padding-x} / 2 ) $kendo-calendar-header-padding-x;
+        }
+    }
+
+    // Calendar in popup
+    .k-popup > .k-calendar {
+        border-radius: inherit;
+    }
+}

package/scss/calendar/_theme.scss

@@ -0,0 +1,83 @@
+@use "@progress/kendo-theme-core/scss/components/calendar/_theme.scss" as *;
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.scss" as *;
+@use "./_variables.scss" as *;
+@use "../core/z-index/index.scss" as *;
+
+
+@mixin kendo-calendar--theme() {
+    @include kendo-calendar--theme-base();
+
+    .k-calendar {
+        background: unset;
+
+        .k-calendar-navigation {
+            backdrop-filter: k-translucency-blur(1);
+            background-color: $kendo-calendar-header-bg;
+        }
+
+        .k-calendar-view {
+            background-color: $kendo-calendar-bg;
+        }
+
+        .k-calendar-td {
+            &:focus,
+            &.k-focus {
+                .k-calendar-cell-inner,
+                .k-link {
+                    box-shadow: none;
+                    @include focus-indicator(
+                        $indicator: k-color(secondary-on-surface),
+                        $type: "outline",
+                        $outline-width: $kendo-calendar-cell-focus-outline-width,
+                        $outline-offset: $kendo-calendar-cell-focus-outline-offset
+                    );
+                    z-index: k-z-index("base", 1);
+                }
+            }
+        }
+
+        .k-range-start {
+            background: $kendo-calendar-range-start-bg;
+        }
+
+        .k-range-end {
+            background: $kendo-calendar-range-end-bg;
+        }
+
+        .k-range-mid {
+            .k-link {
+                color: $kendo-calendar-cell-hover-text;
+            }
+        }
+    }
+
+    .k-calendar .k-header,
+    .k-calendar-header {
+        backdrop-filter: k-translucency-blur(1);
+        background-color: $kendo-calendar-header-bg;
+    }
+
+    .k-calendar .k-footer,
+    .k-calendar-footer {
+        backdrop-filter: k-translucency-blur(1);
+        background-color: $kendo-calendar-header-bg;
+    }
+
+    .k-calendar-nav {
+        color: k-color(secondary-on-surface);
+    }
+
+    .k-rtl .k-calendar,
+    [dir="rtl"] .k-calendar,
+    .k-calendar.k-rtl,
+    .k-calendar[dir="rtl"] {
+        .k-range-start {
+            background: $kendo-calendar-range-end-bg;
+        }
+
+        .k-range-end {
+            background: $kendo-calendar-range-start-bg;
+        }
+    }
+}