@progress/kendo-theme-fluent
Advanced tools
A css variables based theme for Kendo UI that follows the Fluent design system guidelines.
The Kendo UI Fluent Theme is a SCSS-based theme for the Kendo UI components which is based on the Fluent Design System.
Kendo UI Fluent Theme is available as an npm package.
If you don't need to apply any customization to the theme, you can can reference the precompiled CSS directly from unpkg CDN:
<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:
npm install --save @progress/kendo-theme-fluent
and then import it in your project styles:
// Import the entire theme
@use "~@progress/kendo-theme-fluent/scss/all.scss";
In your custom scss file, you can import the entirety of the theme, by importing scss/all.scss or pick just the styles for the components you need. The files for individual components:
// Import only Button and Grid styles
@use "~@progress/kendo-theme-fluent/scss/index.scss" as kendo-theme;
@include kendo-theme.config(
$config: (
"components": (
"button",
"grid"
)
)
);
@include kendo-theme.styles();
The Kendo UI Fluent theme enables customization through SCSS variables as follows:
@use "index.scss" as kendo-theme with (
$kendo-body-bg: beige,
$kendo-font-size: 1rem
);
@include kendo-theme.config();
@include kendo-theme.styles();
or:
@use "index.scss" as kendo-theme;
kendo-theme.$kendo-body-bg: beige;
kendo-theme.$kendo-font-size: 30px;
@include kendo-theme.config();
@include kendo-theme.styles();
The theme is also making use of CSS custom properties in its compiled output for runtime customization. This eliminates the need to recompile the theme from the source.
The theme exposes global root variables that can be used anywhere on the page to dynamically customize the theme:
body {
--kendo-font-size: 1.2rem;
}
The theme also exposes CSS variables for all components and allows dynamic restyling:
.k-button-solid-primary {
--kendo-button-text: #fff;
--kendo-button-bg: #28a745;
--kendo-button-border: #28a745;
--kendo-button-hover-text: #fff;
--kendo-button-hover-bg: #218838;
--kendo-button-hover-border: #218838;
--kendo-button-focus-text: #fff;
--kendo-button-focus-bg: #28a745;
--kendo-button-focus-border: #28a745;
--kendo-button-active-text: #fff;
--kendo-button-active-bg: #1e7e34;
--kendo-button-active-border: #1e7e34;
}
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 or feature request.
To ensure version predictability, we use Semantic Versioning: we try to add only features for minor versions and bugfixes (or smaller features) for patch version.
This package is part of the following suites:
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.
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.
9.0.0-dev.0 (2024-07-19)
Effective with the R3 2024 release, the utilities package is now independent of the themes package. This means that, moving forward, components will selectively import only the utilities they require, rather than the entire utilities package. This adjustment does not impact the styling of components but is designed to improve the system's flexibility and modularity.
For developers using utility classes for custom layouts, you will now need to manually import the utilities as a separate stylesheet on your pages. For step-by-step instructions on how to do this, please visit: https://www.telerik.com/design-system/docs/utils/get-started/installation/
Effective with the R3 2024 release, the utilities package is now independent of the themes package. This means that, moving forward, components will selectively import only the utilities they require, rather than the entire utilities package. This adjustment does not impact the styling of components but is designed to improve the system's flexibility and modularity.
For developers using utility classes for custom layouts, you will now need to manually import the utilities as a separate stylesheet on your pages. For step-by-step instructions on how to do this, please visit: https://www.telerik.com/design-system/docs/utils/get-started/installation/
Effective with the R3 2024 release, the utilities package is now independent of the themes package. This means that, moving forward, components will selectively import only the utilities they require, rather than the entire utilities package. This adjustment does not impact the styling of components but is designed to improve the system's flexibility and modularity.
For developers using utility classes for custom layouts, you will now need to manually import the utilities as a separate stylesheet on your pages. For step-by-step instructions on how to do this, please visit: https://www.telerik.com/design-system/docs/utils/get-started/installation/
Effective with the R3 2024 release, the utilities package is now independent of the themes package. This means that, moving forward, components will selectively import only the utilities they require, rather than the entire utilities package. This adjustment does not impact the styling of components but is designed to improve the system's flexibility and modularity.
For developers using utility classes for custom layouts, you will now need to manually import the utilities as a separate stylesheet on your pages. For step-by-step instructions on how to do this, please visit: https://www.telerik.com/design-system/docs/utils/get-started/installation/
Effective with the R3 2024 release, the utilities package is now independent of the themes package. This means that, moving forward, components will selectively import only the utilities they require, rather than the entire utilities package. This adjustment does not impact the styling of components but is designed to improve the system's flexibility and modularity.
For developers using utility classes for custom layouts, you will now need to manually import the utilities as a separate stylesheet on your pages. For step-by-step instructions on how to do this, please visit: https://www.telerik.com/design-system/docs/utils/get-started/installation/
FAQs
A css variables based theme for Kendo UI that follows the Fluent design system guidelines.
The npm package @progress/kendo-theme-fluent receives a total of 6,041 weekly downloads. As such, @progress/kendo-theme-fluent popularity was classified as popular.
We found that @progress/kendo-theme-fluent demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.