|
| 1 | +# Theming |
| 2 | + |
| 3 | +Lime Elements is relatively restrictive about the look and feel of the components. For instance, consumers cannot apply custom spaces around internal elements, change border radiuses, or size of the visual details. |
| 4 | + |
| 5 | +However, you still have lots of theming possibilities, such as setting your desired font, controlling colors on component level, and setting a global accent color. |
| 6 | + |
| 7 | +## Setting desired font family |
| 8 | + |
| 9 | +To achieve a blazing fast rendering, our components' user interface utilizes a default cross-browser sans-serif font stack. |
| 10 | + |
| 11 | +Lime Element is by default font agnostic, and basically relies on the inbuilt font of user's device. So there is no need for the users to download any fonts, while loading Lime Elements on their device. |
| 12 | + |
| 13 | +This also means that the UI would look slightly different on iOS, Android, Windows, Linux, etc… as they all have their own default system UI font. |
| 14 | + |
| 15 | +However, you can easily set your own desired font family. As web components typically inherit font-related styles such as `font-family`, `font-size`, and `color`, we recommend defining these styles at a higher level, such as the `<body>` element. |
| 16 | + |
| 17 | +If you use other libraries in combination with Lime Elements in your project, to maintain consistency with the look & feel demonstrated in this documentation, we suggest incorporating the following styles into your project: |
| 18 | + |
| 19 | +```css |
| 20 | +font-family: ui-sans-serif, system-ui, sans-serif; |
| 21 | +font-size: 0.875rem; |
| 22 | +font-style: normal; |
| 23 | +font-weight: 400; |
| 24 | +color: rgb(var(--contrast-1500)); |
| 25 | +``` |
| 26 | + |
| 27 | +💡 About the `color` specified above, read more on [our color system](/#/DesignGuidelines/color-system.md/). |
| 28 | + |
| 29 | +Or if you want to customize the font-family and related styles to suit your project's needs, you might prefer a different typeface like below: |
| 30 | + |
| 31 | +```css |
| 32 | +font-family: 'Roboto', Arial, Verdana, sans-serif; |
| 33 | +``` |
0 commit comments