Skip to content

Commit 31edb04

Browse files
authored
docs: update styling and themes docs (#461)
1 parent 58bc082 commit 31edb04

File tree

2 files changed

+12
-12
lines changed

2 files changed

+12
-12
lines changed

docs/styling/customizing.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ For a visual preview of the theme, use the [ThemeBuilder application](slug:theme
3535
With this setup, you can customize theme variables directly in your application. For example, you can change the default primary color from orange to pink with the following lines:
3636

3737
```scss
38-
$primary: #ff69b4;
38+
$kendo-color-primary: #ff69b4;
3939

4040
@import "~@progress/kendo-theme-default/dist/all.scss";
4141
```
@@ -70,7 +70,7 @@ To create a swatch:
7070

7171
1. Clone the [kendo-themes](https://github.com/telerik/kendo-themes) GitHub repository.
7272
1. Install the [node-gyp](https://github.com/nodejs/node-gyp#installation).
73-
1. Install the dependencies for all themes with `npm install && npx lerna bootstrap`.
73+
1. Install the dependencies for all themes with `npm run setup`.
7474
1. Switch the working directory to `packages/<THEME_NAME>`.
7575
1. Create a `SWATCH_NAME.scss` swatch file in the `scss/swatches` folder.
7676
1. To build the swatches for the theme, type `npm run sass:swatches` or `npm run dart:swatches`.
@@ -94,8 +94,8 @@ $theme-type: dark;
9494
For the Default and Bootstrap themes, the swatch should look like:
9595
```scss
9696
// Variables.
97-
$primary: blue;
98-
$secondary: pink;
97+
$kendo-color-primary: blue;
98+
$kendo-color-secondary: pink;
9999

100100
// Import the theme file for the components you use.
101101
@import "../panelbar/_index.scss";
@@ -110,7 +110,7 @@ $secondary: pink;
110110
To create a custom theme by modifying the themes source code:
111111

112112
1. Clone the [kendo-themes](https://github.com/telerik/kendo-themes) GitHub repository.
113-
1. Install the dependencies for all themes with `npm install && npx lerna bootstrap`.
113+
1. Install the dependencies for all themes with `npm run setup`.
114114
1. Customize the theme variables in the `packages/THEME_NAME/scss/_variables.scss` files.
115115
1. Build the themes with the `npm run sass` or `npm run dart` command to create the customized version of the themes in the `packages/THEME_NAME/dist/all.css` file.
116116
1. After the build completes, use the [compiled CSS](slug:themesandstyles#toc-using-precompiled-css).
@@ -120,7 +120,7 @@ To create a custom theme by modifying the themes source code:
120120
You might want to omit the styles for some components in the CSS output. To include only the styles that you need:
121121

122122
1. Clone the [kendo-themes](https://github.com/telerik/kendo-themes) GitHub repository.
123-
1. Install the dependencies for all themes with `npm install && npx lerna bootstrap`.
123+
1. Install the dependencies for all themes with `npm run setup`.
124124
1. Switch the working directory to `packages/<THEME_NAME>`.
125125
1. Create a `CUSTOM_THEME.scss` file in the `scss` folder. For example, create `custom.scss` file with the following lines:
126126
```scss

docs/styling/index.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ For a visual preview of the theme for all components and versatile color swatche
7676
With this setup, you can customize theme variables directly in your application. For example, you can change the default primary color from orange to pink with the following lines:
7777

7878
```scss
79-
$primary: #ff69b4;
79+
$kendo-color-primary: #ff69b4;
8080
8181
@import "~@progress/kendo-theme-default/dist/all.scss";
8282
```
@@ -109,7 +109,7 @@ To create a swatch:
109109

110110
1. Clone the [kendo-themes](https://github.com/telerik/kendo-themes) GitHub repository.
111111
1. Install the [node-gyp](https://github.com/nodejs/node-gyp#installation).
112-
1. Install the dependencies for all themes with `npm install && npx lerna bootstrap`.
112+
1. Install the dependencies for all themes with `npm run setup`.
113113
1. Switch the working directory to `packages/<THEME_NAME>`.
114114
1. Create a `SWATCH_NAME.scss` swatch file in the `scss/swatches` folder.
115115
1. To build the swatches for the theme by running `npm run sass:swatches` or `npm run dart:swatches`.
@@ -133,8 +133,8 @@ $theme-type: dark;
133133
For the rest of the themes, the swatch should look like:
134134
```scss
135135
// Variables.
136-
$primary: blue;
137-
$secondary: pink;
136+
$kendo-color-primary: blue;
137+
$kendo-color-secondary: pink;
138138
139139
// Import the theme file for the components you use.
140140
@import "../grid/_index.scss";
@@ -148,7 +148,7 @@ $secondary: pink;
148148
To create a custom theme by modifying the themes source code:
149149

150150
1. Clone the [kendo-themes](https://github.com/telerik/kendo-themes) GitHub repository.
151-
1. Install the dependencies for all themes with `npm install && npx lerna bootstrap`.
151+
1. Install the dependencies for all themes with `npm run setup`.
152152
1. Customize the theme variables in the `packages/THEME_NAME/scss/_variables.scss` files.
153153
1. Build the themes with the `npm run sass` or `npm run dart` command to create the customized version of the themes in the `packages/THEME_NAME/dist/all.css` file.
154154
1. After the build completes, use the [compiled CSS](#toc-using-precompiled-css).
@@ -158,7 +158,7 @@ To create a custom theme by modifying the themes source code:
158158
You might want to omit the styles for some components in the CSS output. To include only the styles that you need:
159159

160160
1. Clone the [kendo-themes](https://github.com/telerik/kendo-themes) GitHub repository.
161-
1. Install the dependencies for all themes with `npm install && npx lerna bootstrap`.
161+
1. Install the dependencies for all themes with `npm run setup`.
162162
1. Switch the working directory to `packages/<THEME_NAME>`.
163163
1. Create a `CUSTOM_THEME.scss` file in the `scss` folder. For example, create `custom.scss` file with the following lines:
164164
```scss

0 commit comments

Comments
 (0)