Skip to content

Commit

Permalink
chore: update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
epetrow committed Oct 31, 2024
1 parent 1c3c6d1 commit 0374e25
Showing 1 changed file with 7 additions and 20 deletions.
27 changes: 7 additions & 20 deletions packages/fluent/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ and then import it in your project styles:

```scss
// Import the entire theme
@use "~@progress/kendo-theme-fluent/scss/all.scss";
@use "@progress/kendo-theme-fluent/scss/all.scss" as *;
```

## Importing
Expand All @@ -39,43 +39,30 @@ In your custom scss file, you can import the entirety of the theme, by importing

```scss
// 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();
@use "@progress/kendo-theme-default/scss/index.scss" as *;

@include kendo-button--styles();
@include kendo-grid--styles();
```

## SCSS Variables Customization

The Kendo UI Fluent theme enables customization through SCSS variables as follows:

```scss
@use "index.scss" as kendo-theme with (
@use "@progress/kendo-theme-fluent/scss/all.scss" as kendo-theme with (
$kendo-body-bg: beige,
$kendo-font-size: 1rem
);

@include kendo-theme.config();
@include kendo-theme.styles();
```

or:

```scss
@use "index.scss" as kendo-theme;
@use "@progress/kendo-theme-fluent/scss/all.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
Expand Down

0 comments on commit 0374e25

Please sign in to comment.