Skip to content

Commit ba84ab7

Browse files
committed
Update README.md
1 parent 7836cdd commit ba84ab7

File tree

1 file changed

+2
-10
lines changed
  • projects/igniteui-angular/src/lib/core/styles

1 file changed

+2
-10
lines changed

projects/igniteui-angular/src/lib/core/styles/README.md

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,24 @@ Our approach to theming is based around several simple concepts.
88
The Ignite UI for Angular theming library is based on [**Sass**](https://sass-lang.com). If you used the **<a href="https://github.com/IgniteUI/igniteui-cli" target="_blank">Ignite UI CLI</a>** to bootstrap your app, you can specify the style in the **angular.json** config to _scss_, the CLI will take care of compiling the Sass styles for you. If you haven't used Ignite UI CLI then you have to configure your builder to compile Sass styles for you.
99

1010
### Palettes
11-
<div class="divider--half"></div>
1211

1312
The first concept is the one of palettes of colors. As in any visual tool, colors are the main differentiating factor between one application and another. The Material Design Guidelines prescribe predefined palettes of colors that range in hue and lightness for a base color. There's a good reason for that. They really want to ensure good color matching and contrast between the background colors and the foreground text colors. This is great, but limiting at the same time. If you wanted to have your own custom palette that matches your branding, you would be out of luck. We recognize this is a problem, so we invented an algorithm that would generate Material-like palettes from base colors you provide. Even more, we also generate contrast text colors for each hue in the palette.
1413

15-
<div class="divider--half"></div>
1614

1715
### Schemas
18-
<div class="divider--half"></div>
1916

20-
The second important concept revolves around theme schemas. Theme schemas are like recipes for component themes. They give individual component themes information about colors, margins, paddings, etc. For instance, a component scheme tells a component theme that the background color for an element should be the `500` variant from the `primary` palette, without caring what palette the user passes to the component theme.
17+
The second important concept revolves around theme schemas. Theme schemas are like recipes for component themes. They give inidual component themes information about colors, margins, paddings, etc. For instance, a component scheme tells a component theme that the background color for an element should be the `500` variant from the `primary` palette, without caring what palette the user passes to the component theme.
2118

22-
<div class="divider--half"></div>
2319

2420
### Themes
25-
<div class="divider--half"></div>
2621

27-
Finally, we have component themes. Palettes and Schemas wouldn't do much good on their own if they weren't used by a theme. We have themes for individual component, and a global one, that styles the entire application and every component in it. You simply pass a palette and a schema to the global theme, we take care of the rest. You can, of course, style each component individually to your liking.
22+
Finally, we have component themes. Palettes and Schemas wouldn't do much good on their own if they weren't used by a theme. We have themes for inidual component, and a global one, that styles the entire application and every component in it. You simply pass a palette and a schema to the global theme, we take care of the rest. You can, of course, style each component individually to your liking.
2823

2924
### Typography
30-
<div class="divider--half"></div>
3125

3226
Typography is a separate module in our Sass theming framework, which is decoupled from the component themes. Although we have a default typeface of choice, we really want to give you the power to style your application in every single way. Typography is such an important part of that. We provide a method for changing the font family, the sizes and weights for headings, subheadings, buttons, body text, etc. in your app.
33-
<div class="divider--half"></div>
3427

3528
### Additional Resources
36-
<div class="divider--half"></div>
3729

3830
Learn how to create themes:
3931

0 commit comments

Comments
 (0)