@progress/kendo-theme-fluent 5.7.0

package/scss/searchbox/_theme.scss

@@ -0,0 +1,9 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-searchbox--theme() {
+    .k-searchbox {
+        .k-input-icon {
+            color: var( --kendo-searchbox-icon-color, #{$kendo-searchbox-icon-color} )
+        }
+     }
+}

package/scss/searchbox/_variables.scss

@@ -0,0 +1,5 @@
+@use "../core/color-system" as *;
+
+/// Color of the searchbox icon.
+/// @group searchbox
+$kendo-searchbox-icon-color: get-theme-color-var( primary-100 ) !default;

package/scss/searchbox/index.scss

@@ -0,0 +1,27 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "searchbox",
+    dependencies: (
+        "icon",
+        "button",
+        "input"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "searchbox" ) {
+        @include kendo-searchbox--layout();
+        @include kendo-searchbox--theme();
+    }
+}

package/scss/signature/_layout.scss

@@ -0,0 +1,68 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-signature--layout() {
+
+    .k-signature {
+        width: var( --kendo-signature-width, #{$kendo-signature-width} );
+        min-height: var( --kendo-signature-height, #{$kendo-signature-height} );
+        position: relative;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        &.k-signature-maximized {
+            width: var( --kendo-signature-maximized-width, #{$kendo-signature-maximized-width} );
+            height: var( --kendo-signature-maximized-height, #{$kendo-signature-maximized-height} );
+
+            > .k-signature-line {
+                border-bottom-width: var( --kendo-signature-maximized-line-width, #{$kendo-signature-maximized-line-width} );
+            }
+        }
+    }
+
+    .k-signature-actions {
+        display: flex;
+        width: min-content;
+        margin-inline-start: auto;
+        gap: var( --kendo-signature-actions-gap, #{$kendo-signature-actions-gap} );
+        z-index: 2;
+    }
+
+    .k-signature-canvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: block;
+        z-index: 1;
+    }
+
+    .k-signature-line {
+        position: absolute;
+        bottom: var( --kendo-signature-line-bottom-offset, #{$kendo-signature-line-bottom-offset} );
+        z-index: 2;
+        pointer-events: none;
+        border-bottom-width: var( --kendo-signature-line-width, #{$kendo-signature-line-width} );
+        border-bottom-style: var( --kendo-signature-line-style, #{$kendo-signature-line-style} );
+    }
+
+    // Sizes
+    @each $size, $size-props in $kendo-signature-sizes {
+        $_padding-x: map-get( $size-props, padding-x );
+        $_padding-y: map-get( $size-props, padding-y );
+        $_line-size: map-get( $size-props, line-size );
+        $_line-offset: map-get( $size-props, line-offset );
+
+        .k-signature-#{$size} {
+            padding-inline: $_padding-x;
+            padding-block: $_padding-y;
+
+            .k-signature-line {
+                width: $_line-size;
+            }
+        }
+    }
+
+}

package/scss/signature/_theme.scss

@@ -0,0 +1,13 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-signature--theme() {
+
+    // Solid signature
+    .k-signature {
+
+        .k-signature-line {
+            border-bottom-color: var( --kendo-signature-line-color, #{$kendo-signature-line-color} );
+        }
+    }
+
+}

package/scss/signature/_variables.scss

@@ -0,0 +1,73 @@
+@use "../core/" as *;
+
+/// The default width of the signature component.
+/// @group signature
+$kendo-signature-width: 250px !default;
+/// The default height of the signature component.
+/// @group signature
+$kendo-signature-height: 84px !default;
+/// The default width of the maximized signature component.
+/// @group signature
+$kendo-signature-maximized-width: 750px !default;
+/// The default height of the maximized signature component.
+/// @group signature
+$kendo-signature-maximized-height: 252px !default;
+/// The horizontal paddings of the signature component.
+/// @group signature
+$kendo-signature-padding-x: map-get( $kendo-spacing, 1 ) !default;
+$kendo-signature-padding-x-sm: $kendo-signature-padding-x !default;
+$kendo-signature-padding-x-md: $kendo-signature-padding-x !default;
+$kendo-signature-padding-x-lg: $kendo-signature-padding-x !default;
+/// The vertical paddings of the signature component.
+/// @group signature
+$kendo-signature-padding-y: $kendo-signature-padding-x !default;
+$kendo-signature-padding-y-sm: map-get( $kendo-spacing, thin ) !default;
+$kendo-signature-padding-y-md: $kendo-signature-padding-x-md !default;
+$kendo-signature-padding-y-lg: map-get( $kendo-spacing, 1 ) + map-get( $kendo-spacing, thin ) !default;
+
+/// The bottom-border width of the row line of the signature component.
+/// @group signature
+$kendo-signature-line-width: 1px !default;
+/// The border style of the row line of the signature component.
+/// @group signature
+$kendo-signature-line-style: dashed !default;
+/// The color of the row line of the signature component.
+/// @group signature
+$kendo-signature-line-color: get-theme-color-var( primary-30 ) !default;
+/// The width of the row line of the signature component.
+/// @group signature
+$kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default;
+$kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-x-sm} ) !default;
+$kendo-signature-line-size-md: calc( 100% - 2 * #{$kendo-signature-padding-x-md} ) !default;
+$kendo-signature-line-size-lg: calc( 100% - 2 * #{$kendo-signature-padding-x-lg} ) !default;
+/// The bottom offset of the row line of the signature component.
+/// @group signature
+$kendo-signature-line-bottom-offset: 33% !default;
+
+/// The sizes map of the signature component.
+/// @group signature
+$kendo-signature-sizes: (
+    sm: (
+        padding-x: $kendo-signature-padding-x-sm,
+        padding-y: $kendo-signature-padding-y-sm,
+        line-size: $kendo-signature-line-size-sm
+    ),
+    md: (
+        padding-x: $kendo-signature-padding-x-md,
+        padding-y: $kendo-signature-padding-y-md,
+        line-size: $kendo-signature-line-size-md
+    ),
+    lg: (
+        padding-x: $kendo-signature-padding-x-lg,
+        padding-y: $kendo-signature-padding-y-lg,
+        line-size: $kendo-signature-line-size-lg
+    )
+) !default;
+
+/// The gap between individual action items of the signature component
+/// @group signature
+$kendo-signature-actions-gap: map-get( $kendo-spacing, 1 ) !default;
+
+/// The bottom-border width of the row line of the maximized signature component.
+/// @group signature
+$kendo-signature-maximized-line-width: 3px !default;

package/scss/signature/index.scss

@@ -0,0 +1,26 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "signature",
+    dependencies: (
+        "button",
+        "input"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "signature" ) {
+        @include kendo-signature--layout();
+        @include kendo-signature--theme();
+    }
+}

package/scss/skeleton/_layout.scss

@@ -0,0 +1,76 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-skeleton--layout() {
+
+    .k-skeleton {
+        display: block;
+    }
+
+    // Text
+    .k-skeleton-text {
+        border-radius: var( --kendo-skeleton-text-border-radius, #{$kendo-skeleton-text-border-radius} );
+        transform: var( --kendo-skeleton-text-transform, #{$kendo-skeleton-text-transform} );
+
+        &:empty::before {
+            content: "\200b";
+        }
+    }
+
+    // Shapes
+    .k-skeleton-rect {
+        border-radius: var( --kendo-skeleton-rect-border-radius, #{$kendo-skeleton-rect-border-radius} );
+    }
+
+    .k-skeleton-circle {
+        border-radius: var( --kendo-skeleton-circle-border-radius, #{$kendo-skeleton-circle-border-radius} );
+    }
+
+    // Wave animation
+    @keyframes k-skeleton-wave {
+        0% {
+            transform: translateX(-100%);
+        }
+        60% {
+            transform: translateX(100%);
+        }
+        100% {
+            transform: translateX(100%);
+        }
+    }
+
+    .k-skeleton-wave .k-skeleton,
+    .k-skeleton-wave .k-skeleton {
+        position: relative;
+        overflow: hidden;
+
+        &::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            transform: translateX(-100%);
+            animation: k-skeleton-wave 1.6s linear .5s infinite;
+        }
+    }
+
+    // Pulse
+    @keyframes k-skeleton-pulse {
+        0% {
+            opacity: 1;
+        }
+        50% {
+            opacity: .4;
+        }
+        100% {
+            opacity: 1;
+        }
+    }
+
+    .k-skeleton-pulse  .k-skeleton,
+    .k-skeleton-pulse .k-skeleton {
+        animation: k-skeleton-pulse 1.5s ease-in-out .5s infinite;
+    }
+
+}

package/scss/skeleton/_theme.scss

@@ -0,0 +1,22 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-skeleton--theme() {
+
+    .k-skeleton {
+        @include fill(
+            $bg: var( --kendo-skeleton-item-bg, #{$kendo-skeleton-item-bg} )
+        );
+    }
+
+    // Wave animation
+    .k-skeleton-wave  .k-skeleton::after,
+    .k-skeleton-wave .k-skeleton::after {
+        background-image: linear-gradient(
+            to right,
+            transparent,
+            var( --kendo-skeleton-wave-bg, #{$kendo-skeleton-wave-bg} ),
+            transparent
+        );
+    }
+}

package/scss/skeleton/_variables.scss

@@ -0,0 +1,22 @@
+@use "../core/color-system" as *;
+
+/// Text transform scale of the skeleton.
+/// @group skeleton
+$kendo-skeleton-text-transform: scale( 1, .6 ) !default;
+/// Border radius of the skeleton text.
+/// @group skeleton
+$kendo-skeleton-text-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+
+/// Border radius of the rectangle skeleton.
+/// @group skeleton
+$kendo-skeleton-rect-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+/// Border radius of the circle skeleton.
+/// @group skeleton
+$kendo-skeleton-circle-border-radius: 9999px !default;
+
+/// Background color of the skeleton item.
+/// @group skeleton
+$kendo-skeleton-item-bg: get-theme-color-var( neutral-50 ) !default;
+/// Background color of the skeleton wave animation.
+/// @group skeleton
+$kendo-skeleton-wave-bg: get-theme-color-var( neutral-20 ) !default;

package/scss/skeleton/index.scss

@@ -0,0 +1,23 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "skeleton",
+    dependencies: ()
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "skeleton" ) {
+        @include kendo-skeleton--layout();
+        @include kendo-skeleton--theme();
+    }
+}