@progress/kendo-theme-fluent 5.7.0

package/scss/action-sheet/_variables.scss

@@ -0,0 +1,163 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+
+/// Horizontal padding of the action sheet.
+/// @group action-sheet
+$kendo-actionsheet-padding-x: 0px !default;
+/// Vertical padding of the action sheet.
+/// @group action-sheet
+$kendo-actionsheet-padding-y: 0px !default;
+/// Width of the action sheet.
+/// @group action-sheet
+$kendo-actionsheet-width: 360px !default;
+/// Maximum width of the action sheet.
+/// @group action-sheet
+$kendo-actionsheet-max-width: 100% !default;
+/// Maximum height of the action sheet.
+/// @group action-sheet
+$kendo-actionsheet-max-height: 50vh !default;
+
+/// Border width around the action sheet.
+/// @group action-sheet
+$kendo-actionsheet-border-width: 0px !default;
+/// Border radius of the action sheet.
+/// @group action-sheet
+$kendo-actionsheet-border-radius: 0px !default;
+
+/// Font size of the action sheet.
+/// @group action-sheet
+$kendo-actionsheet-font-size: var( --kendo-font-size, inherit ) !default;
+/// Font family of the action sheet.
+/// @group action-sheet
+$kendo-actionsheet-font-family: var( --kendo-font-family, inherit ) !default;
+/// Line height of the action sheet.
+/// @group action-sheet
+$kendo-actionsheet-line-height: var( --kendo-line-height, inherit ) !default;
+
+/// Background color of the action sheet.
+/// @group action-sheet
+$kendo-actionsheet-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of the action sheet.
+/// @group action-sheet
+$kendo-actionsheet-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the action sheet.
+/// @group action-sheet
+$kendo-actionsheet-border: var( --kendo-component-border, initial ) !default;
+/// Box shadow of the action sheet.
+/// @group action-sheet
+$kendo-actionsheet-shadow:  var( --kendo-box-shadow-depth-4, none ) !default;
+
+/// Horizontal padding of the action sheet header.
+/// @group action-sheet
+$kendo-actionsheet-header-padding-x: map-get( $kendo-spacing, 4 ) !default;
+/// Vertical padding of the action sheet header.
+/// @group action-sheet
+$kendo-actionsheet-header-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// Border width of the action sheet header.
+/// @group action-sheet
+$kendo-actionsheet-header-border-width: 1px !default;
+/// Font size of the action sheet header.
+/// @group action-sheet
+$kendo-actionsheet-header-font-size: inherit !default;
+/// Font family of the action sheet header.
+/// @group action-sheet
+$kendo-actionsheet-header-font-family: inherit !default;
+/// Line height of the action sheet header.
+/// @group action-sheet
+$kendo-actionsheet-header-line-height: inherit !default;
+
+/// Background color of the action sheet header.
+/// @group action-sheet
+$kendo-actionsheet-header-bg: inherit !default;
+/// Text color of the action sheet header.
+/// @group action-sheet
+$kendo-actionsheet-header-text: inherit !default;
+/// Border color of the action sheet header.
+/// @group action-sheet
+$kendo-actionsheet-header-border: inherit !default;
+/// Box shadow of the action sheet header.
+/// @group action-sheet
+$kendo-actionsheet-header-shadow: none !default;
+
+/// Minimum height of the action sheet item.
+/// @group action-sheet
+$kendo-actionsheet-item-min-height: 40px !default;
+/// Horiozontal padding of the action sheet item.
+/// @group action-sheet
+$kendo-actionsheet-item-padding-x: map-get( $kendo-spacing, 4 ) !default;
+/// Vertical padding of the action sheet item.
+/// @group action-sheet
+$kendo-actionsheet-item-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// Border around the action sheet item.
+/// @group action-sheet
+$kendo-actionsheet-item-border-width: 1px !default;
+/// Spacing between the icon and the text in the action sheet item.
+/// @group action-sheet
+$kendo-actionsheet-item-spacing: map-get( $kendo-spacing, 2 ) !default;
+
+/// Size of the action sheet item icon.
+/// @group action-sheet
+$kendo-actionsheet-item-icon-size: var( --kendo-icon-size, 1rem ) !default;
+/// Color of the action sheet item icon.
+/// @group action-sheet
+$kendo-actionsheet-item-icon-color: get-theme-color-var( primary-110 ) !default;
+
+/// Font weight of the action sheet item text.
+/// @group action-sheet
+$kendo-actionsheet-item-title-font-weight: inherit !default;
+/// Transform of the action sheet item text.
+/// @group action-sheet
+$kendo-actionsheet-item-title-text-transform: none !default;
+
+/// Font size of the action sheet item description.
+/// @group action-sheet
+$kendo-actionsheet-item-description-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// Color of the action sheet item description.
+/// @group action-sheet
+$kendo-actionsheet-item-description-text: var( --kendo-subtle-text, inherit ) !default;
+
+/// Hover background color of the action sheet item.
+/// @group action-sheet
+$kendo-actionsheet-item-hover-bg: var( --kendo-hover-bg, inherit ) !default;
+/// Hover text color of the action sheet item.
+/// @group action-sheet
+$kendo-actionsheet-item-hover-text: var( --kendo-hover-text, inherit ) !default;
+/// Hover border color of the action sheet item.
+/// @group action-sheet
+$kendo-actionsheet-item-hover-border: inherit !default;
+
+/// Focus background color of the action sheet item.
+/// @group action-sheet
+$kendo-actionsheet-item-focus-bg: inherit !default;
+/// Focus text color of the action sheet item.
+/// @group action-sheet
+$kendo-actionsheet-item-focus-text: inherit !default;
+/// Focus border color of the action sheet item.
+/// @group action-sheet
+$kendo-actionsheet-item-focus-border: inherit !default;
+/// Focus outline color of the action sheet item.
+/// @group action-sheet
+$kendo-actionsheet-item-focus-outline: var( --kendo-outline-color, inherit ) !default;
+/// Focus outline width of the action sheet item.
+/// @group action-sheet
+$kendo-actionsheet-item-focus-outline-width: 1px !default;
+
+/// Focus and hover background color of the action sheet item.
+/// @group action-sheet
+$kendo-actionsheet-item-focus-hover-bg: $kendo-actionsheet-item-hover-bg !default;
+/// Focus and hover text color of the action sheet item.
+/// @group action-sheet
+$kendo-actionsheet-item-focus-hover-text: $kendo-actionsheet-item-hover-text !default;
+/// Focus and hover border color of the action sheet item.
+/// @group action-sheet
+$kendo-actionsheet-item-focus-hover-border: $kendo-actionsheet-item-hover-border !default;
+
+/// Disabled background color of the action sheet item.
+/// @group action-sheet
+$kendo-actionsheet-item-disabled-bg: $kendo-actionsheet-bg !default;
+/// Disabled text color of the action sheet item.
+/// @group action-sheet
+$kendo-actionsheet-item-disabled-text: var( --kendo-disabled-text, inherit ) !default;
+/// Disabled border color of the action sheet item.
+/// @group action-sheet
+$kendo-actionsheet-item-disabled-border: var( --kendo-disabled-border, inherit ) !default;

package/scss/action-sheet/index.scss

@@ -0,0 +1,27 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "action-sheet",
+    dependencies: (
+        "icon",
+        "listgroup",
+        "popup"
+    )
+);
+
+
+// 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( "action-sheet" ) {
+        @include kendo-action-sheet--layout();
+        @include kendo-action-sheet--theme();
+    }
+}

package/scss/all.scss

@@ -0,0 +1,4 @@
+@use "index.scss" as kendo-theme;
+
+@include kendo-theme.config();
+@include kendo-theme.styles();

package/scss/appbar/_layout.scss

@@ -0,0 +1,119 @@
+@use "_variables.scss" as *;
+@use "../core/color-system" as *;
+
+@mixin kendo-appbar--layout() {
+
+    // Appbar
+    .k-appbar {
+        margin-inline: var( --kendo-appbar-margin-x, #{$kendo-appbar-margin-x} );
+        margin-block: var( --kendo-appbar-margin-y, #{$kendo-appbar-margin-y} );
+        padding-inline: var( --kendo-appbar-padding-x, #{$kendo-appbar-padding-x} );
+        padding-block: var( --kendo-appbar-padding-y, #{$kendo-appbar-padding-y} );
+        border-width: var( --kendo-appbar-border-width, #{$kendo-appbar-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-appbar-font-family, #{$kendo-appbar-font-family} );
+        font-size: var( --kendo-appbar-font-size, #{$kendo-appbar-font-size} );
+        line-height: var( --kendo-appbar-line-height, #{$kendo-appbar-line-height} );
+        list-style: none;
+        display: flex;
+        gap: var( --kendo-appbar-spacing, #{$kendo-appbar-spacing} );
+        flex-flow: row wrap;
+        align-items: center;
+        overflow: hidden;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
+        >* {
+            flex-shrink: 0;
+        }
+
+        // Appbar section
+        .k-appbar-section {
+            display: inline-flex;
+            flex-wrap: nowrap;
+            align-items: center;
+        }
+
+
+        // Appbar Spacer
+        .k-appbar-spacer {
+            flex: 1 0 auto;
+        }
+
+
+        .k-appbar-spacer-sized {
+            flex-grow: 0;
+        }
+
+
+        // Separator
+        .k-appbar-separator {
+            margin: 0;
+            width: 0;
+            min-height: 1em;
+            border-style: solid;
+            border-width: 0 0 0 1px;
+            display: inline-block;
+        }
+
+
+        // Input
+        .k-input,
+        .k-picker {
+            width: 10em;
+        }
+
+        .k-color-picker {
+            width: min-content;
+        }
+
+    }
+
+
+    // Static appbar
+    .k-appbar-static {
+        position: static;
+    }
+
+
+    // Sticky appbar
+    .k-appbar-sticky {
+        width: 100%;
+        position: sticky;
+        top: 0;
+        z-index: var( --kendo-appbar-zindex, #{$kendo-appbar-zindex} );
+    }
+
+
+    // Fixed appbar
+    .k-appbar-fixed {
+        width: 100%;
+        position: fixed;
+        z-index: 1;
+    }
+
+
+    // Appbar position
+    .k-appbar-top {
+        top: 0;
+        bottom: auto;
+    }
+
+    .k-appbar-bottom {
+        top: auto;
+        bottom: 0;
+
+        &.k-appbar-fixed {
+            bottom: 0;
+        }
+    }
+
+}

package/scss/appbar/_theme.scss

@@ -0,0 +1,40 @@
+@use "../core/color-system" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-appbar--theme() {
+
+    .k-appbar {
+        --INTERNAL--kendo-appbar-text: var( --kendo-appbar-text, #{$kendo-appbar-text} );
+        --INTERNAL--kendo-appbar-bg: var( --kendo-appbar-bg, #{$kendo-appbar-bg} );
+        --INTERNAL--kendo-appbar-border: var( --kendo-appbar-border, #{$kendo-appbar-border} );
+
+        color: var( --INTERNAL--kendo-appbar-text, inherit );
+        background-color: var( --INTERNAL--kendo-appbar-bg, inherit );
+        border-color: var( --INTERNAL--kendo-appbar-border, inherit );
+    }
+
+    .k-appbar-inherit {
+        color: inherit;
+        background-color: inherit;
+        border-color: inherit;
+    }
+
+    // AppBar theme colors
+    @each $theme-color, $color-props in $kendo-appbar-theme-colors {
+
+        $_text: map-get( $color-props, text );
+        $_bg: map-get( $color-props, bg );
+        $_border: map-get( $color-props, border );
+
+        .k-appbar-#{$theme-color} {
+            --kendo-appbar-text: var( --kendo-appbar-#{$theme-color}-text, #{$_text} );
+            --kendo-appbar-bg: var( --kendo-appbar-#{$theme-color}-bg, #{$_bg} );
+            --kendo-appbar-border: var( --kendo-appbar-#{$theme-color}-border, #{$_border} );
+
+            .k-appbar-subtitle {
+                color: inherit;
+            }
+        }
+    }
+
+}

package/scss/appbar/_variables.scss

@@ -0,0 +1,106 @@
+@use "sass:map";
+@use "../core/color-system" as *;
+@use "../core/variables" as *;
+
+/// Background color of the appbar.
+/// @group appbar
+$kendo-appbar-bg: get-theme-color-var( neutral-10 ) !default;
+/// Text color of the appbar.
+/// @group appbar
+$kendo-appbar-text: var( --kendo-component-text, initial ) !default;
+/// Border color of the appbar.
+/// @group appbar
+$kendo-appbar-border: var( --kendo-component-border, initial ) !default;
+
+/// Vertical margin of the appbar.
+/// @group appbar
+$kendo-appbar-margin-y: 0 !default;
+/// Horizontal margin of the appbar.
+/// @group appbar
+$kendo-appbar-margin-x: 0 !default;
+/// Vertical padding of the appbar.
+/// @group appbar
+$kendo-appbar-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// Horizontal padding of the appbar.
+/// @group appbar
+$kendo-appbar-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// Width of the border around the appbar.
+/// @group appbar
+$kendo-appbar-border-width: 0px !default;
+
+/// Z-index of the appbar.
+/// @group appbar
+$kendo-appbar-zindex: 1000 !default;
+
+/// Font size of the appbar.
+/// @group appbar
+$kendo-appbar-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the appbar.
+/// @group appbar
+$kendo-appbar-line-height: var( --kendo-line-height, normal ) !default;
+/// Font family of the appbar.
+/// @group appbar
+$kendo-appbar-font-family: var( --kendo-font-family, inherit ) !default;
+/// Content spacing of the appbar.
+/// @group appbar
+$kendo-appbar-spacing: map-get( $kendo-spacing, 2 ) !default;
+
+/// Theme variations for the appbar.
+$kendo-appbar-brand-colors: (
+    primary: primary,
+    error: error,
+    success: success,
+    info: info,
+    secondary: neutral,
+    tertiary: tertiary,
+ );
+
+// Matrix with appbar theme colors in the order: bg, color, border
+$_tc-appbar-matrix: (
+    (normal: (100, $white, 100)),
+);
+
+$_tc-appbar-warning-matrix: (
+    (normal: (100, get-theme-color-var( neutral-160 ), 100)),
+);
+
+$_tc-appbar-dark-matrix: (
+    (normal: (160, $white, 160)),
+);
+
+$_tc-appbar-light-matrix: (
+    (normal: (50, 160, 50)),
+);
+
+/// Theme colors map for the appbar variations.
+$kendo-appbar-theme-colors: ();
+
+@each $ui-states in $_tc-appbar-matrix {
+    @each $brand-color, $palette in $kendo-appbar-brand-colors {
+        $kendo-appbar-theme-colors: map.deep-merge(
+            $kendo-appbar-theme-colors,
+            generate-theme-variation( $brand-color, $palette, $ui-states )
+        );
+    };
+}
+
+@each $ui-states in $_tc-appbar-warning-matrix {
+    $kendo-appbar-theme-colors: map.deep-merge(
+        $kendo-appbar-theme-colors,
+        generate-theme-variation( warning, warning, $ui-states )
+    );
+}
+
+@each $ui-states in $_tc-appbar-dark-matrix {
+    $kendo-appbar-theme-colors: map.deep-merge(
+        $kendo-appbar-theme-colors,
+        generate-theme-variation( dark, neutral, $ui-states )
+    );
+}
+
+@each $ui-states in $_tc-appbar-light-matrix {
+    $kendo-appbar-theme-colors: map.deep-merge(
+        $kendo-appbar-theme-colors,
+        generate-theme-variation( light, neutral, $ui-states )
+    );
+}

package/scss/appbar/index.scss

@@ -0,0 +1,25 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "appbar",
+    dependencies: (
+        "icon"
+    )
+);
+
+
+// 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("appbar") {
+        @include kendo-appbar--layout();
+        @include kendo-appbar--theme();
+    }
+}

package/scss/autocomplete/_layout.scss

@@ -0,0 +1,4 @@
+@mixin kendo-autocomplete--layout() {
+
+    .k-autocomplete {}
+}

package/scss/autocomplete/_theme.scss

@@ -0,0 +1,4 @@
+@mixin kendo-autocomplete--theme() {
+
+    .k-autocomplete {}
+}

package/scss/autocomplete/_variables.scss

@@ -0,0 +1 @@
+// Autocomplete

package/scss/autocomplete/index.scss

@@ -0,0 +1,28 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "autocomplete",
+    dependencies: (
+        "input",
+        "floating-label",
+        "popup",
+        "list",
+        "icon"
+    )
+);
+
+// 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( "autocomplete" ) {
+        @include kendo-autocomplete--layout();
+        @include kendo-autocomplete--theme();
+    }
+}

package/scss/avatar/_layout.scss

@@ -0,0 +1,77 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-avatar--layout() {
+
+    // Avatar
+    .k-avatar {
+        border-width: 0;
+        border-style: solid;
+        box-sizing: border-box;
+        vertical-align: middle;
+        display: inline-flex;
+        flex-flow: row nowrap;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+        overflow: hidden;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+
+    // Avatar text
+    .k-avatar-text,
+    .k-avatar-initials {
+        font-size: var( --kendo-avatar-font-size, #{$kendo-avatar-font-size} );
+        font-family: var( --kendo-avatar-font-family, #{$kendo-avatar-font-family} );
+        line-height: var( --kendo-avatar-line-height, #{$kendo-avatar-line-height} );
+    }
+
+
+    // Avatar icon
+    .k-avatar-icon {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+    }
+
+
+    // Avatar image
+    .k-avatar-image {
+        width: 100%;
+        height: 100%;
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+
+        > img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            vertical-align: top;
+        }
+    }
+
+
+    // Sizes
+    @each $name, $size in $kendo-avatar-sizes {
+        .k-avatar-#{$name} {
+            width: var( --kendo-avatar-#{$name}-size, #{$size} );
+            height: var( --kendo-avatar-#{$name}-size, #{$size} );
+            flex-basis: var( --kendo-avatar-#{$name}-size, #{$size} );
+        }
+    }
+
+    // Shapes
+    .k-avatar-square {}
+
+    // Bordered
+    .k-avatar-bordered {
+        border-width: var( --kendo-avatar-border-width, #{$kendo-avatar-border-width} );
+    }
+
+}

package/scss/avatar/_theme.scss

@@ -0,0 +1,20 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-avatar--theme() {
+
+    @each $fill-mode, $theme-colors in $kendo-avatar-theme-colors {
+        @each $theme-color, $color-props in $theme-colors {
+
+            $_text-color: map-get( $color-props, text );
+            $_bg: map-get( $color-props, bg );
+            $_border-color: map-get( $color-props, border );
+
+            .k-avatar-#{$fill-mode}-#{$theme-color} {
+                color: var( --kendo-avatar-#{$fill-mode}-#{$theme-color}-text, #{$_text-color} );
+                background-color: var( --kendo-avatar-#{$fill-mode}-#{$theme-color}-bg, #{$_bg} );
+                border-color: var( --kendo-avatar-#{$fill-mode}-#{$theme-color}-border, #{$_border-color} );
+            }
+        }
+
+    }
+}