Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@progress/kendo-theme-fluent

Package Overview
Dependencies
Maintainers
1
Versions
200
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@progress/kendo-theme-fluent

A css variables based theme for Kendo UI that follows the Fluent design system guidelines.

  • 6.4.0-dev.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
6.2K
increased by1.96%
Maintainers
1
Weekly downloads
 
Created
Source

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.

Quick start

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";

Importing

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(
    $components: (
        "button",
        "grid"
    )
);
@include kendo-theme.styles();

SCSS Variables Customization

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();

CSS Variables Customization

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.

Root variables

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;
}

Component variables

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;
}

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 or feature request.

Versioning

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.

License

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.

Keywords

FAQs

Package last updated on 24 Apr 2023

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc