@progress/kendo-theme-fluent 5.7.0

package/LICENSE.md

@@ -0,0 +1,17 @@
+# Kendo UI Fluent Theme
+
+This package is part of the following suites:
+
+* [Kendo UI for Angular](http://www.telerik.com/kendo-angular-ui/)
+* [KendoReact](http://www.telerik.com/kendo-react-ui/)
+* [Kendo UI for jQuery](http://www.telerik.com/kendo-ui)
+* [UI for ASP.NET MVC](http://www.telerik.com/aspnet-mvc)
+* [UI for ASP.NET Core](http://www.telerik.com/aspnet-core-ui)
+
+## License
+
+All available Kendo UI commercial licenses may be obtained at http://www.telerik.com/purchase/kendo-ui.
+
+If you do not own a commercial license, the usage of this software shall be governed by the [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0).
+
+*Copyright © 2022 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*

package/README.md

@@ -0,0 +1,72 @@
+# Kendo UI Fluent Theme
+
+The Kendo UI Fluent Theme is a SCSS-based theme for the Kendo UI components which is based on the [Fluent Design System](https://www.microsoft.com/design/fluent/#/).
+
+* [Quick start](#quick-start)
+* [Customizing](#customizing)
+* [Bug reports and feature requests](#bug-reports-and-feature-requests)
+* [Versioning](#versioning)
+* [License](#license)
+
+## Quick start
+
+Kendo UI Fluent Theme is available as an npm package.
+
+If you don't need to apply any [customization](#customizing) to the theme, you can can reference the precompiled CSS directly from unpkg CDN:
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-fluent/dist/all.css" />
+```
+
+While using the pre-compiled CSS file is faster than compiling the theme from the source code, the approach has the two drawbacks: it includes CSS for all components; it does not provide options for theme customization through SCSS variables (which is possible when you build the theme from the source code) because the theme is already compiled.
+
+If you prefer, or you need to customize the theme, you can install it:
+
+```sh
+npm install --save @progress/kendo-theme-fluent
+```
+
+and then import it in your project styles:
+
+```scss
+// Import the entire theme
+@import "~@progress/kendo-theme-fluent/dist/all.scss";
+```
+
+## Customizing
+
+You can customize Kendo UI Fluent Theme both in terms of what gets compiled and how the theme will look.
+
+### Importing
+
+In your custom scss file, you can import the entirety of the theme, by importing `dist/all.scss` or pick just the styles for the components you need. The files for individual components are in `scss/` folder:
+
+```scss
+// Import only PanelBar and Grid styles
+@import "~@progress/kendo-theme-fluent/scss/panelbar/_index.scss";
+@import "~@progress/kendo-theme-fluent/scss/grid/_index.scss";
+```
+
+## Bug reports and feature requests
+
+Have a bug or a feature request? Please first search for existing and closed issues. If your problem or idea is not addressed yet, please open a new [bug report](https://github.com/telerik/kendo-themes/issues/new?labels=bug,T:Fluent&template=bug_report.md) or [feature request](https://github.com/telerik/kendo-themes/issues/new?labels=Enhancement,T:Fluent&template=feature_request.md).
+
+## Versioning
+
+To ensure version predictability, we use [Semantic Versioning](https://semver.org/): we try to add only features for minor versions and bugfixes (or smaller features) for patch version.
+
+## License
+
+This package is part of the following suites:
+
+* [Kendo UI for Angular](https://www.telerik.com/kendo-angular-ui/)
+* [KendoReact](https://www.telerik.com/kendo-react-ui/)
+* [Kendo UI for Vue](https://www.telerik.com/kendo-vue-ui)
+
+All available Kendo UI commercial licenses may be obtained at http://www.telerik.com/purchase/kendo-ui.
+
+If you do not own a commercial license, the usage of this software shall be governed by the [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0).
+
+*Copyright © 2022 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
+
+*Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.*

package/dist/all.scss

@@ -0,0 +1,7 @@
+// This file is auto-generated. Do not edit!
+// baka:source undefinedpackages/fluent/scss/all.scss
+
+@use "index.scss" as kendo-theme;
+
+@include kendo-theme.config();
+@include kendo-theme.styles();

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@progress/kendo-theme-fluent",
+  "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
+  "version": "5.7.0",
+  "author": "Progress",
+  "license": "Apache-2.0",
+  "keywords": [
+    "Kendo UI",
+    "Theme",
+    "Fluent",
+    "CSS Variables"
+  ],
+  "main": "dist/index.css",
+  "sass": "scss/index.scss",
+  "files": [
+    "dist/",
+    "scss/",
+    "lib/"
+  ],
+  "homepage": "https://github.com/telerik/kendo-themes/tree/master/packages/fluent",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/telerik/kendo-themes.git",
+    "directory": "packages/fluent"
+  },
+  "bugs": {
+    "url": "https://github.com/telerik/kendo-themes/issues/new?labels=bug,T:Fluent&template=bug_report.md"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "kendo": {
+    "themebuilder": {
+      "swatches": {
+        "path": "lib/swatches",
+        "default": "fluent-main.json"
+      }
+    }
+  },
+  "scripts": {
+    "build": "sass-build",
+    "sass": "sass-build",
+    "prepublishOnly": "node ../../scripts/themes-prepublish.js",
+    "postpublish": "echo 'no postpublish for the Fluent theme'"
+  },
+  "dependencies": {
+    "@progress/kendo-font-icons": "^0.2.0",
+    "@progress/kendo-theme-utils": "^5.7.0"
+  },
+  "devDependencies": {
+    "sass-build": "^1.0.0"
+  },
+  "gitHead": "5e316441f8406d4e3ef94f189ae71304cf7f6a15"
+}

package/scss/action-buttons/_layout.scss

@@ -0,0 +1,54 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-action-buttons--layout() {
+    .k-actions {
+        padding-inline: var( --kendo-actions-padding-x, #{$kendo-actions-padding-x} );
+        padding-block: var( --kendo-actions-padding-y, #{$kendo-actions-padding-y} );
+        box-sizing: border-box;
+        border-width: var( --kendo-actions-border-width, #{$kendo-actions-border-width} ) 0 0 0;
+        border-style: solid;
+        border-color: inherit;
+        flex-shrink: 0;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        gap: var( --kendo-actions-button-spacing, #{$kendo-actions-button-spacing} );
+        overflow: hidden;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+    // Aliases
+    .k-edit-buttons,
+    .k-action-buttons,
+    .k-columnmenu-actions {
+        @extend .k-actions;
+    }
+
+    // Actions align
+    .k-actions-start {
+        justify-content: flex-start;
+    }
+    .k-actions-center {
+        justify-content: center;
+    }
+    .k-actions-end {
+        justify-content: flex-end;
+    }
+    .k-actions-stretched > * {
+        flex: 1 0 0%;
+    }
+
+    // Actions orientation
+    .k-actions-horizontal {
+        width: 100%;
+        flex-flow: row nowrap;
+    }
+    .k-actions-vertical {
+        flex-flow: column nowrap;
+    }
+}

package/scss/action-buttons/_theme.scss

@@ -0,0 +1,14 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-action-buttons--theme() {
+
+    .k-actions {
+        @include fill(
+            var( --kendo-actions-text, #{$kendo-actions-text} ),
+            var( --kendo-actions-bg, #{$kendo-actions-bg} ),
+            var( --kendo-actions-border, #{$kendo-actions-border} )
+        );
+    }
+
+}

package/scss/action-buttons/_variables.scss

@@ -0,0 +1,24 @@
+@use "../core" as *;
+
+/// Horizontal padding of the action buttons container.
+/// @group action-buttons
+$kendo-actions-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// Vertical padding of the action buttons container.
+/// @group action-buttons
+$kendo-actions-padding-y: map-get( $kendo-spacing, 3 ) !default;
+/// Width of the border around the action buttons container.
+/// @group action-buttons
+$kendo-actions-border-width: 0px !default;
+/// The background color of the action buttons container.
+/// @group action-buttons
+$kendo-actions-bg: inherit !default;
+/// The text color of the action buttons container.
+/// @group action-buttons
+$kendo-actions-text: inherit !default;
+/// The border color of the action buttons container.
+/// @group action-buttons
+$kendo-actions-border: inherit !default;
+
+/// Spacing between the action buttons.
+/// @group button
+$kendo-actions-button-spacing: map-get( $kendo-spacing, 2 ) !default;

package/scss/action-buttons/index.scss

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

package/scss/action-sheet/_layout.scss

@@ -0,0 +1,233 @@
+@use "_variables.scss" as *;
+@use "../core/mixins" as *;
+
+@mixin kendo-action-sheet--layout() {
+    .k-actionsheet-container {
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 9999;
+        overflow: hidden;
+    }
+
+    // Actionsheet
+    .k-actionsheet {
+        padding-inline: var( --kendo-actionsheet-padding-x, #{$kendo-actionsheet-padding-x} );
+        padding-block: var( --kendo-actionsheet-padding-y, #{$kendo-actionsheet-padding-y} );
+        width: var( --kendo-actionsheet-width, #{$kendo-actionsheet-width} );
+        max-width: var( --kendo-actionsheet-max-width, #{$kendo-actionsheet-max-width} );
+        max-height: var( --kendo-actionsheet-max-height, #{$kendo-actionsheet-max-height} );
+        border-width: 0;
+        border-style: solid;
+        border-color: transparent;
+        box-sizing: border-box;
+        font-size: var( --kendo-actionsheet-font-size, #{$kendo-actionsheet-font-size} );
+        font-family: var( --kendo-actionsheet-font-family, #{$kendo-actionsheet-font-family} );
+        line-height: var( --kendo-actionsheet-line-height, #{$kendo-actionsheet-line-height} );
+        overflow-x: hidden;
+        overflow-y: auto;
+        position: fixed;
+        z-index: 10002;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+    }
+
+    .k-actionsheet-fullscreen {
+        max-height: 100%;
+        height: 100%;
+    }
+
+
+    // Actionsheet header
+    .k-actionsheet-header {
+        padding-inline: var( --kendo-actionsheet-header-padding-x, #{$kendo-actionsheet-header-padding-x} );
+        padding-block: var( --kendo-actionsheet-header-padding-y, #{$kendo-actionsheet-header-padding-y} );
+        border-width: 0;
+        border-bottom-width: var( --kendo-actionsheet-header-border-width, #{$kendo-actionsheet-header-border-width} );
+        border-style: solid;
+        border-color: transparent;
+        box-sizing: border-box;
+        font-size: var( --kendo-actionsheet-header-font-size, #{$kendo-actionsheet-header-font-size} );
+        font-family: var( --kendo-actionsheet-header-font-family, #{$kendo-actionsheet-header-font-family} );
+        line-height: var( --kendo-actionsheet-header-line-height, #{$kendo-actionsheet-header-line-height} );
+        flex: none;
+    }
+
+
+    // Actionsheet titlebar
+    .k-actionsheet-titlebar {
+        @extend .k-actionsheet-header !optional;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+    }
+
+    .k-actionsheet-title {
+        flex: 1;
+    }
+
+    .k-actionsheet-actions {
+        flex: none;
+    }
+
+
+    // Actionsheet content
+    .k-actionsheet-content {
+        flex: 1;
+        overflow: auto;
+    }
+
+
+    // Actionsheet footer
+    .k-actionsheet-footer {
+        flex: none;
+    }
+
+
+    // Actionsheet items
+    .k-actionsheet-items {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+
+    // Actionsheet item
+    .k-actionsheet-item {
+        padding: 0;
+        box-sizing: border-box;
+    }
+
+    .k-actionsheet-action {
+        margin: 0;
+        padding-inline: var( --kendo-actionsheet-item-padding-x, #{$kendo-actionsheet-item-padding-x} );
+        padding-block: var( --kendo-actionsheet-item-padding-y, #{$kendo-actionsheet-item-padding-y} );
+        min-height: var( --kendo-actionsheet-item-min-height, #{$kendo-actionsheet-item-min-height} );
+        box-sizing: border-box;
+        color: inherit;
+        text-decoration: none;
+        outline: 0;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        gap: var( --kendo-actionsheet-item-spacing, #{$kendo-actionsheet-item-spacing} );
+
+
+        &:focus,
+        &.k-focus {
+            outline-width: var( --kendo-actionsheet-item-focus-outline-width, #{$kendo-actionsheet-item-focus-outline-width} );
+            outline-style: solid;
+            outline-offset: calc( -1 * var( --kendo-actionsheet-item-focus-outline-width, #{$kendo-actionsheet-item-focus-outline-width} ) );
+        }
+    }
+
+    .k-actionsheet-item-icon {
+        font-size: var( --kendo-actionsheet-item-icon-size, #{$kendo-actionsheet-item-icon-size} );
+    }
+
+    .k-actionsheet-item-text {
+        display: flex;
+        flex-flow: column nowrap;
+    }
+
+    .k-actionsheet-item-title {
+        font-weight: var( --kendo-actionsheet-item-title-font-weight, #{$kendo-actionsheet-item-title-font-weight} );
+        text-transform: var( --kendo-actionsheet-item-title-text-transform, #{$kendo-actionsheet-item-title-text-transform} );
+    }
+
+    .k-actionsheet-item-description {
+        font-size: var( --kendo-actionsheet-item-description-font-size, #{$kendo-actionsheet-item-description-font-size} );
+    }
+
+
+    // Actionsheet separator
+    .k-actionsheet > .k-hr {
+        margin: 0;
+        border-color: inherit;
+    }
+
+
+    // Action sheet position
+    .k-actionsheet-top {
+        @include border-bottom-radius( var( --kendo-actionsheet-border-radius, #{$kendo-actionsheet-border-radius} ) );
+        border-width: var( --kendo-actionsheet-border-width, #{$kendo-actionsheet-border-width} );
+        border-top-width: 0;
+        top: 0;
+        left: 50%;
+        transform: translateX( -50% );
+    }
+
+    .k-actionsheet-bottom {
+        @include border-top-radius( var( --kendo-actionsheet-border-radius, #{$kendo-actionsheet-border-radius} ) );
+        border-width: var( --kendo-actionsheet-border-width, #{$kendo-actionsheet-border-width} );
+        border-bottom-width: 0;
+        bottom: 0;
+        left: 50%;
+        transform: translateX( -50% );
+    }
+
+    .k-actionsheet-left {
+        @include border-right-radius( var( --kendo-actionsheet-border-radius, #{$kendo-actionsheet-border-radius} ) );
+        border-width: var( --kendo-actionsheet-border-width, #{$kendo-actionsheet-border-width} );
+        border-left-width: var( --kendo-actionsheet-border-width, #{$kendo-actionsheet-border-width} );
+        left: 0;
+        top: 50%;
+        transform: translateY( -50% );
+    }
+
+    .k-actionsheet-right {
+        @include border-left-radius( var( --kendo-actionsheet-border-radius, #{$kendo-actionsheet-border-radius} ) );
+        border-width: var( --kendo-actionsheet-border-width, #{$kendo-actionsheet-border-width} );
+        border-right-width: 0;
+        right: 0;
+        top: 50%;
+        transform: translateY( -50% );
+    }
+
+
+    // Action sheet in popup
+    .k-animation-container > .k-actionsheet {
+        top: auto;
+        right: auto;
+        bottom: auto;
+        left: auto;
+        transform: none;
+    }
+
+
+    // Adaptive action sheet
+    .k-adaptive-actionsheet {
+        max-width: 100%;
+        width: 100%;
+
+        // TMP: this should be moved to action sheet
+        display: flex;
+        flex-flow: column nowrap;
+
+        .k-calendar {
+            margin-inline: auto;
+            border-width: 0;
+            display: flex;
+        }
+
+        .k-timeselector {
+            height: 100%;
+            border-width: 0;
+            overflow: hidden;
+
+            .k-time-part {
+                display: contents;
+            }
+
+            .k-time-list-wrapper {
+                height: 100%;
+            }
+        }
+    }
+}

package/scss/action-sheet/_theme.scss

@@ -0,0 +1,89 @@
+@use "_variables.scss" as *;
+@use "../core/mixins" as *;
+
+@mixin kendo-action-sheet--theme() {
+
+    // Actionsheet
+    .k-actionsheet {
+        color: var( --kendo-actionsheet-text, #{$kendo-actionsheet-text} );
+        background-color: var( --kendo-actionsheet-bg, #{$kendo-actionsheet-bg} );
+        border-color: var( --kendo-actionsheet-border, #{$kendo-actionsheet-border} );
+        @include box-shadow( var( --kendo-actionsheet-shadow, #{$kendo-actionsheet-shadow} ) );
+    }
+
+
+    // Actionsheet header
+    .k-actionsheet-header {
+        color: var( --kendo-actionsheet-header-text, #{$kendo-actionsheet-header-text} );
+        background-color: var( --kendo-actionsheet-header-bg, #{$kendo-actionsheet-header-bg} );
+        border-color: var( --kendo-actionsheet-header-border, #{$kendo-actionsheet-header-border} );
+        @include box-shadow( var( --kendo-actionsheet-header-shadow, #{$kendo-actionsheet-header-shadow} ) );
+    }
+
+
+    // Actionsheet items
+    .k-actionsheet-items {}
+
+
+    // Actionsheet item
+    .k-actionsheet-item {}
+
+    // Actionsheet item icon
+    .k-actionsheet-item-icon {
+        color: var( --kendo-actionsheet-item-icon-color, #{$kendo-actionsheet-item-icon-color} );
+    }
+
+    // Actionsheet item description
+    .k-actionsheet-item-description {
+       color: var( --kendo-actionsheet-item-description-text, #{$kendo-actionsheet-item-description-text} );
+    }
+
+
+    // Actionsheet action
+    .k-actionsheet-action {
+
+        color: var( --INTERNAL--kendo-actionsheet-item-text, inherit );
+        background-color: var( --INTERNAL--kendo-actionsheet-item-bg, inherit );
+        border-color: var( --INTERNAL--kendo-actionsheet-item-border, inherit );
+        outline-color: var( --INTERNAL--kendo-actionsheet-item-outline, inherit );
+
+        // Hover state
+        &:hover,
+        &.k-hover {
+            --INTERNAL--kendo-actionsheet-item-text: var( --kendo-actionsheet-item-hover-text, #{$kendo-actionsheet-item-hover-text} );
+            --INTERNAL--kendo-actionsheet-item-bg: var( --kendo-actionsheet-item-hover-bg, #{$kendo-actionsheet-item-hover-bg} );
+            --INTERNAL--kendo-actionsheet-item-border: var( --kendo-actionsheet-item-hover-border, #{$kendo-actionsheet-item-hover-border} );
+        }
+
+
+        // Focus state
+        &:focus,
+        &.k-focus {
+            --INTERNAL--kendo-actionsheet-item-text: var( --kendo-actionsheet-item-focus-text, #{$kendo-actionsheet-item-focus-text} );
+            --INTERNAL--kendo-actionsheet-item-bg: var( --kendo-actionsheet-item-focus-bg, #{$kendo-actionsheet-item-focus-bg} );
+            --INTERNAL--kendo-actionsheet-item-border: var( --kendo-actionsheet-item-focus-border, #{$kendo-actionsheet-item-focus-border} );
+            --INTERNAL--kendo-actionsheet-item-outline: var( --kendo-actionsheet-item-focus-outline, #{$kendo-actionsheet-item-focus-outline} );
+
+            &:hover,
+            &.k-hover {
+                --INTERNAL--kendo-actionsheet-item-text: var( --kendo-actionsheet-item-focus-hover-text, #{$kendo-actionsheet-item-focus-hover-text} );
+                --INTERNAL--kendo-actionsheet-item-bg: var( --kendo-actionsheet-item-focus-hover-bg, #{$kendo-actionsheet-item-focus-hover-bg} );
+                --INTERNAL--kendo-actionsheet-item-border: var( --kendo-actionsheet-item-focus-hover-border, #{$kendo-actionsheet-item-focus-hover-border} );
+            }
+        }
+
+
+        // Disabed state
+        &:disabled,
+        &.k-disabled {
+            --INTERNAL--kendo-actionsheet-item-text: var( --kendo-actionsheet-item-disabled-text, #{$kendo-actionsheet-item-disabled-text} );
+            --INTERNAL--kendo-actionsheet-item-bg: var( --kendo-actionsheet-item-disabled-bg, #{$kendo-actionsheet-item-disabled-bg} );
+            --INTERNAL--kendo-actionsheet-item-border: var( --kendo-actionsheet-item-disabled-border, #{$kendo-actionsheet-item-disabled-border} );
+
+            .k-actionsheet-item-description,
+            .k-actionsheet-item-icon {
+                color: inherit;
+            }
+        }
+    }
+}