Migrating to Kendo Theme Bootstrap 8.0.1

Schoof-T commented 1 week ago

Describe the issue or request We have been using the Kendo-theme-bootstrap, together with bootstrap (5.1.3 currently) for Blazor for a couple of years. This week we wanted to upgrade to the latest version of Kendo UI Bootstrap, but we are noticing the colours are no longer matching with our bootstrap.

I noticed you are also no longer dependent on bootstrap, but in our applications we use mostly bootstrap classes and component together with more advanced Telerik components. Is this no longer supported?

Is there a migration guide, which variables need to be overwritten?

Additional context The way we have set up our theme is as follows:

Imported both the scss of kento UI bootstrap and bootstrap
Created our very own variables file, with our colours
Created a scss file for bootstrap where we overwrite the variables
Created a scss file for telerik bootstrap where we overwrite the variables The telerik bootstrap scss file we created looks as following:
```
@import '../_variables.scss';
```

$border-radius: 0.35rem; $primary: $jdn-red; $secondary: #6c757d; // $secondary from bootstrap $info: $jdn-light; $success: $jdn-green; $warning: $jdn-yellow; $error: $jdn-red; $body-text: #212529; $body-bg: #ffffff; $headings-text: #212529; $subtle-text: #6c757d; $disabled-text: #8f8f8f; $component-text: #212529; $component-bg: #ffffff; $base-text: #212529; $base-bg: #f7f7f7; $hovered-text: #16181b; $hovered-bg: #e9ecef; $selected-text: #ffffff; $selected-bg: $jdn-red; $button-text: #212529; $button-bg: #e4e7eb; $link-text: $jdn-font-color; $link-hover-text: shift-color($jdn-red, 20%); $series-a: #0275d8; $series-b: #5bc0de; $series-c: #5cb85c; $series-d: #f0ad4e; $series-e: #e67d4a; $series-f: #d9534f; $font-size-base: $jdn-font-size-base;

// Remove styling of valid inputs $kendo-input-valid-border: #ced4da; $kendo-input-valid-shadow: 0 0 0 0.25rem rgba(186,12,47,.25);

// grid $table-cell-padding: 0.35rem;

// loader $loader-container-panel-bg: initial; $loader-container-panel-border-style: initial;

@import "../../lib/telerik/dist/all.scss";



Thank you in advance.

Schoof-T commented 1 week ago

I figured out that I have to overwrite the colors as follows:

$kendo-colors: ( 
primary: $primary, 
secondary: #6c757d, 
info: $jdn-light,
success: $jdn-green,
warning: $jdn-yellow,
danger: $jdn-red,
);

But this doesn't change the colour of a lot of other items. Such as the :hovers, the :actives, grid paging, toasters...

epetrow commented 1 week ago

Hey, @Schoof-T with version 8.0.0 of the Kendo Themes we have enabled the new Color system which introduces a new way of customizing the old color variables like $kendo-color-primary, $kendo-color-secondary, $kendo-base-bg, etc.

You can find detailed information about the Color system here and how to upgrade to Kendo Theme Bootstrap v8.0.1 here.

The gist of it is:

Want to opt-out and preserve the old behaviour? - Simply set the $kendo-enable-color-system variable to false
If you wish to migrate and make use of the new Color System - Follow the migration guide for Bootstrap

Basically this is how customizing the Kendo Theme Bootstrap colors looks like as of v8.0.0

@import "@progress/kendo-theme-core/scss/functions/index.import.scss";

$kendo-colors: ();
$kendo-colors: k-map-merge($kendo-colors, (
app-surface: #f8f8f8,
on-app-surface: #111111,
subtle: rgba(0, 0, 0, 0.54),
surface: #f3f2f1,
surface-alt: #fafafa,
border: rgba(0, 0, 0, 0.2),
border-alt: rgba(0, 0, 0, 0.3)
),
k-generate-color-variations( 'primary', #9c27b0, 'bootstrap' ),
k-generate-color-variations( 'secondary', #e51a5f, 'bootstrap' ),
k-generate-color-variations( 'info', #0058e9, 'bootstrap' ),
k-generate-color-variations( 'success', #37b400, 'bootstrap' ),
k-generate-color-variations( 'base', #eaeaea, 'bootstrap' )
);

@import "@progress/kendo-theme-bootstrap/dist/all.scss"

Schoof-T commented 6 days ago

Thanks @epetrow! I couldn't find the documentation, but with your help I am managing now.

I'm trying to import "@progress/kendo-theme-core/scss/functions/index.import.scss" But the file itself again contains the same import?

So I can't import it. Any idea how to get around that?

epetrow commented 6 days ago

@Schoof-T, I am not sure if it became clear from my previous comment, but you would only need to import "@progress/kendo-theme-core/scss/functions/index.import.scss"; in the same file where you customize the Kendo Bootstrap theme.

Just make sure it is before any of the customizations to the colors.

Schoof-T commented 6 days ago

@Schoof-T, I am not sure if it became clear from my previous comment, but you would only need to import "@progress/kendo-theme-core/scss/functions/index.import.scss"; in the same file where you customize the Kendo Bootstrap theme.

Just make sure it is before any of the customizations to the colors.

Yeah, I made my overrides file look like this:

@import "../_variables.scss";
@import "../../lib/telerik/scss/core/functions/index.import.scss";

$border-radius: 0.35rem;

$kendo-colors: ();
$kendo-colors: k-map-merge($kendo-colors,  
    k-generate-color-variations( 'primary', $jdn-red, 'bootstrap' ),
    k-generate-color-variations( 'secondary', #6c757d, 'bootstrap' ),
    k-generate-color-variations( 'info', $jdn-light, 'bootstrap' ), 
    k-generate-color-variations( 'success', $jdn-green, 'bootstrap' ),  
    k-generate-color-variations( 'warning', $jdn-yellow, 'bootstrap' ), 
    k-generate-color-variations( 'danger', $jdn-red 'bootstrap' ) 
);

...

@import "../../lib/telerik/dist/all.scss";

But upon compiling I get the following error:

Error       Error: Can't find stylesheet to import.
  ╷
1 │ @import "@progress/kendo-theme-core/scss/functions/index.import.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

So I went to look at the index.import.scss file, and I found that the content of said file is the following:

@import "@progress/kendo-theme-core/scss/functions/index.import.scss";

Which will not compile on my system, because I don't have a folder that starts with @progress.

We import the files from jsDelivr: https://www.jsdelivr.com/package/npm/@progress/kendo-theme-bootstrap

epetrow commented 5 days ago

@Schoof-T, I am not sure if it became clear from my previous comment, but you would only need to import "@progress/kendo-theme-core/scss/functions/index.import.scss"; in the same file where you customize the Kendo Bootstrap theme. Just make sure it is before any of the customizations to the colors.

Yeah, I made my overrides file look like this:
@import "../_variables.scss";
@import "../../lib/telerik/scss/core/functions/index.import.scss";

$border-radius: 0.35rem;

$kendo-colors: ();
$kendo-colors: k-map-merge($kendo-colors,  
    k-generate-color-variations( 'primary', $jdn-red, 'bootstrap' ),
    k-generate-color-variations( 'secondary', #6c757d, 'bootstrap' ),
  k-generate-color-variations( 'info', $jdn-light, 'bootstrap' ), 
  k-generate-color-variations( 'success', $jdn-green, 'bootstrap' ),  
  k-generate-color-variations( 'warning', $jdn-yellow, 'bootstrap' ), 
  k-generate-color-variations( 'danger', $jdn-red 'bootstrap' ) 
);

...

@import "../../lib/telerik/dist/all.scss";
But upon compiling I get the following error:
Error     Error: Can't find stylesheet to import.
  ╷
1 │ @import "@progress/kendo-theme-core/scss/functions/index.import.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
So I went to look at the index.import.scss file, and I found that the content of said file is the following:

@import "@progress/kendo-theme-core/scss/functions/index.import.scss";

Which will not compile on my system, because I don't have a folder that starts with @progress.

We import the files from jsDelivr: https://www.jsdelivr.com/package/npm/@progress/kendo-theme-bootstrap

Is it possible to share a sample demo, so I can inspect it?

Schoof-T commented 5 days ago

@epetrow

Please find the sample attached.

TelerikUI.zip

telerik / kendo-themes

Migrating to Kendo Theme Bootstrap 8.0.1 #5090