diff --git a/en/components/button.md b/en/components/button.md index f1a0e7f13..6b969d195 100644 --- a/en/components/button.md +++ b/en/components/button.md @@ -249,7 +249,25 @@ If all went well, you should see something like the following in the browser: ## Styling -To get started with styling the button, we need to import the `index` file, where all the theme functions and component mixins live: +Following the simplest approach, you can use CSS variables to customize the appearance of the button: + +```css +.igx-button { + --background: #ff4d4f; + --hover-background: #ff7875; + --active-background: #d9363e; + --focus-visible-background: #ff4d4f; + --focus-visible-foreground: #fff; +} +``` + +By changing the values of these CSS variables, you can alter the entire look of the button. + +
+ +Another way to style the button is by using **Sass**, along with our [`button-theme`]({environment:sassApiUrl}/index.html#function-button-theme) function. + +To start styling the button using **Sass**, first import the `index` file, which includes all theme functions and component mixins: ```scss @use "igniteui-angular/theming" as *; @@ -268,27 +286,27 @@ Given the following markup: ``` -We need to create a theme: +We need to create the following theme: ```scss $custom-button-theme: button-theme( - $foreground: #fdfdfd, - $hover-foreground: #fdfdfd, - $focus-foreground: #fdfdfd, - $background: #345779, - $hover-background: #2e4d6b, - $focus-background: #2e4d6b, - $disabled-foreground: #2e4d6b, + $foreground: #fdfdfd, + $hover-foreground: #fdfdfd, + $focus-foreground: #fdfdfd, + $background: #345779, + $hover-background: #2e4d6b, + $focus-background: #2e4d6b, + $disabled-foreground: #2e4d6b, ); ``` Take a look at the [`button-theme`]({environment:sassApiUrl}/themes#function-button-theme) section for a complete list of available parameters for styling any type of button. -The last step is to pass the custom button theme in our application: +Finally, **include** the custom theme in your application: ```scss .button-sample { - @include css-vars($custom-button-theme); + @include css-vars($custom-button-theme); } ``` @@ -310,7 +328,7 @@ If you want to style only the `contained` button, you can use the [`contained-bu ```scss $custom-contained-theme: contained-button-theme( - $background: #348ae0, + $background: #348ae0, ); ``` @@ -318,14 +336,17 @@ With the new type-specific theme functions, styling buttons is now easier. For [ For [`flat-button-theme`]({environment:sassApiUrl}/themes#function-flat-button-theme) and [`outlined-button-theme`]({environment:sassApiUrl}/themes#function-outlined-button-theme) functions, the button state colors are also automatically generated and applied, but they are derived from the supplied `$foreground` parameter instead of `$background`. -### Demo +In the sample below, you can see how using the button component with customized CSS variables allows you to create a design that visually resembles the button used in the [`Ant`](https://ant.design/components/button?theme=light#button-demo-color-variant) design system. - +> [!NOTE] +> The sample uses the [Bootstrap Light](themes/sass/schemas.md#predefined-schemas) schema. + ### Custom sizing You can change the button height either by using the `--size` variable, targeting the `button` directly: diff --git a/en/components/calendar.md b/en/components/calendar.md index c66882e9a..e728e7dae 100644 --- a/en/components/calendar.md +++ b/en/components/calendar.md @@ -480,13 +480,14 @@ The last step is to pass the custom calendar theme: @include css-vars($custom-calendar-theme); ``` - - ## API References
diff --git a/en/components/card.md b/en/components/card.md index 79939fb65..9dd85f153 100644 --- a/en/components/card.md +++ b/en/components/card.md @@ -328,7 +328,25 @@ You can justify the buttons so that they are laid out across the entire axis, no ``` ## Styling -To get started with styling the card, we need to import the `index` file, where all the theme functions and component mixins live: + +Following the simplest approach, you can use CSS variables to customize the appearance of the card: + +```css +igx-card { + --border-radius: 8px; + --outline-color: #f0f0f0; + --background: #bfbfbf; + --header-text-color: #000; +} +``` + +By changing the values of these CSS variables, you can alter the entire look of the card component. + +
+ +Another way to style the card is by using **Sass**, along with our [`card-theme`]({environment:sassApiUrl}/index.html#function-card-theme) function. + +To start styling the card using **Sass**, first import the `index` file, which includes all theme functions and component mixins: ```scss @use "igniteui-angular/theming" as *; @@ -336,33 +354,32 @@ To get started with styling the card, we need to import the `index` file, where // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` + Following the simplest approach, we create a new theme that extends the [`card-theme`]({environment:sassApiUrl}/themes#function-card-theme) and providing just a few styling parameters. If you only specify the `$background` parameter, the appropriate foreground colors will be automatically chosen, either black or white, based on which offers better contrast with the background. ```scss -$colorful-card: card-theme( - $background: #011627, - $subtitle-text-color: #ecaa53, +$custom-card-theme: card-theme( + $background: #011627, + $subtitle-text-color: #ecaa53, ); ``` -As seen, the `card-theme` exposes some useful parameters for basic styling of its items. -The last step is to **include** the component theme in our application. +Finally, **include** the custom theme in your application: ```scss -@include css-vars($colorful-card); +@include css-vars($custom-card-theme); ``` -### Angular Card Demo +In the sample below, you can see how using the card component with customized CSS variables allows you to create a design that visually resembles the card used in the [`Ant`](https://ant.design/components/card?theme=light#card-demo-meta) design system. - - - ### Summary + In this article we covered a lot of ground with the card component. First, we created a very simple card with text content only. Then added some images to make the card a bit more appealing. We used some additional Ignite UI for Angular components inside our card, avatar, buttons and icons, to enrich the experience and add some functionality. And finally, we changed the card's theme by setting some exposed theme colors, creating custom palettes and extending schemas. The card component is capable of displaying more different layouts worth exploring in the Card Demo in the beginning of this article. diff --git a/en/components/checkbox.md b/en/components/checkbox.md index 3b797c7de..990de2c23 100644 --- a/en/components/checkbox.md +++ b/en/components/checkbox.md @@ -211,7 +211,31 @@ After all that is done, our application should look like this: ## Styling -To get started with styling the checkbox, we need to import the `index` file, where all the theme functions and component mixins live: +Following the simplest approach, you can use CSS variables to customize the appearance of the checkbox: + +```css +igx-checkbox { + --tick-color: #0064d9; + --tick-color-hover: #e3f0ff; + --fill-color: transparent; + --fill-color-hover: #e3f0ff; + --label-color: #131e29; + --focus-outline-color: #0032a5; + --border-radius: 0.25rem; +} + +igx-checkbox:hover { + --empty-fill-color: #e3f0ff; +} +``` + +By changing the values of these CSS variables, you can alter the entire look of the checkbox component. + +
+ +Another way to style the checkbox is by using **Sass**, along with our [`checkbox-theme`]({environment:sassApiUrl}/index.html#function-checkbox-theme) function. + +To start styling the checkbox using **Sass**, first import the `index` file, which includes all theme functions and component mixins: ```scss @use "igniteui-angular/theming" as *; @@ -225,20 +249,19 @@ Then, we create a new theme that extends the [`checkbox-theme`]({environment:sas ```scss // in styles.scss $custom-checkbox-theme: checkbox-theme( - $empty-color: #ecaa53, - $fill-color: #ecaa53, - $border-radius: 5px + $empty-color: #ecaa53, + $fill-color: #ecaa53, + $border-radius: 5px ); ``` -The last step is to **include** the component theme in our application. +Finally, **include** the custom theme in your application: ```scss @include css-vars($custom-checkbox-theme); ``` -### Demo - +In the sample below, you can see how using the checkbox component with customized CSS variables allows you to create a design that visually resembles the checkbox used in the [`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.CheckBox/sample/sap.m.sample.CheckBox) design system. +> [!NOTE] +> The sample uses the [Fluent Light](themes/sass/schemas.md#predefined-schemas) schema.
diff --git a/en/components/chip.md b/en/components/chip.md index 612854db9..ef05a3d7d 100644 --- a/en/components/chip.md +++ b/en/components/chip.md @@ -480,7 +480,23 @@ If everything's set up correctly, you should see this in your browser: ## Styling -To get started with styling the chip, we need to import the `index` file, where all the theme functions and component mixins live: +Following the simplest approach, you can use CSS variables to customize the appearance of the chip: + +```css +igx-chip { + --background: #cd201f; + --hover-background: #cd201f; + --focus-background: #9f1717; + --text-color: #fff; +} +``` +By changing the values of these CSS variables, you can alter the entire look of the chip component. + +
+ +Another way to style the chip is by using **Sass**, along with our [`chip-theme`]({environment:sassApiUrl}/index.html#function-chip-theme) function. + +To start styling the chip using **Sass**, first import the `index` file, which includes all theme functions and component mixins: ```scss @use "igniteui-angular/theming" as *; @@ -492,21 +508,21 @@ To get started with styling the chip, we need to import the `index` file, where Following the simplest approach, we create a new theme that extends the [`chip-theme`]({environment:sassApiUrl}/themes#function-chip-theme) and accepts some parameters that style the chip's items. By specifying the `$background` or the `$selected-background`, the theme automatically calculates appropriate state colors and contrast foregrounds. You can still override any other parameter with custom values as needed. ```scss -$custom-theme: chip-theme( - $background: #57a5cd, - $selected-background: #ecaa53, - $remove-icon-color: #d81414, - $border-radius: 5px, +$custom-chip-theme: chip-theme( + $background: #57a5cd, + $selected-background: #ecaa53, + $remove-icon-color: #d81414, + $border-radius: 5px, ); ``` -The last step is to **include** the component theme in our application. +Finally, **include** the custom theme in your application: ```scss -@include css-vars($custom-theme); +@include css-vars($custom-chip-theme); ``` -### Demo +In the sample below, you can see how using the chip component with customized CSS variables allows you to create a design that visually resembles the chip used in the [`Ant`](https://ant.design/components/tag?theme=light#tag-demo-icon) design system. +> [!NOTE] +> The sample uses the [Indigo Light](themes/sass/schemas.md#predefined-schemas) schema. + >[!NOTE] >If your page includes multiple types of input groups — such as `box`, `border`, `line`, or `search` — it's best to scope your theme variables to the specific input group type.
For example:
diff --git a/en/components/radio-button.md b/en/components/radio-button.md index 43c11d809..d313fdfc5 100644 --- a/en/components/radio-button.md +++ b/en/components/radio-button.md @@ -146,7 +146,30 @@ The final result would be something like that: ## Styling -To get started with styling the radio buttons, we need to import the `index` file, where all the theme functions and component mixins live: +Following the simplest approach, you can use CSS variables to customize the appearance of the radio button: + +```css +igx-radio { + --empty-color: #556b81; + --label-color: #131e29; + --fill-color: #0064d9; + --focus-outline-color: #0032a5; +} + +igx-radio:hover { + --empty-fill-color: #e3f0ff; + --empty-color: #0064d9; + --hover-color: transparent; +} +``` + +By changing the values of these CSS variables, you can alter the entire look of the component. + +
+ +Another way to style the radio button is by using **Sass**, along with our [`radio-theme`]({environment:sassApiUrl}/index.html#function-radio-theme) function. + +To start styling the radio button using **Sass**, first import the `index` file, which includes all theme functions and component mixins: ```scss @use "igniteui-angular/theming" as *; @@ -155,26 +178,31 @@ To get started with styling the radio buttons, we need to import the `index` fil // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`radio-theme`]({environment:sassApiUrl}/index.html#function-radio-theme). By providing just two key parameters — `$empty-color` and `$fill-color` — you can generate a fully styled radio button. These values serve as the foundation for the theme, by providing them it will automatically compute all the required foreground and background colors for various states (e.g., hover, selected, disabled). +Then, create a new theme that extends the [`radio-theme`]({environment:sassApiUrl}/index.html#function-radio-theme) function. By providing just two key parameters — `$empty-color` and `$fill-color` — you can generate a fully styled radio button. These values serve as the foundation for the theme, by providing them it will automatically compute all the required foreground and background colors for various states (e.g., hover, selected, disabled). ```scss $custom-radio-theme: radio-theme( - $empty-color: #345779, - $fill-color: #2dabe8, + $empty-color: #345779, + $fill-color: #2dabe8, ); ``` -The last step is to pass the custom radio theme in our application: +Finally, **include** the custom theme in your application: ```scss @include css-vars($custom-radio-theme); ``` +In the sample below, you can see how using the radio button with customized CSS variables allows you to create a design that visually resembles the radio button used in the [`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.RadioButton/sample/sap.m.sample.RadioButton) design system. + +> [!NOTE] +> The sample uses the [Fluent Light](themes/sass/schemas.md#predefined-schemas) schema. +
## Radio Group diff --git a/en/components/switch.md b/en/components/switch.md index 3343e1918..891ec8170 100644 --- a/en/components/switch.md +++ b/en/components/switch.md @@ -131,7 +131,33 @@ If the `labelPosition` is not set, the label will be positioned after the switch ## Styling -To get started with styling the switch, we need to import the `index` file, where all the theme functions and component mixins live: +Following the simplest approach, you can use CSS variables to customize the appearance of the switch: + +```css +igx-switch { + --thumb-on-color: #e3f0ff; + --thumb-off-color: #fff; + --track-on-color: #0064d9; + --track-off-color: #788fa6; + --track-on-hover-color: #0058bf; + --border-radius-track: 1rem; + --focus-outline-color: #0032a5; + --border-on-color: transparent; + --border-color: transparent; +} + +igx-switch:hover { + --track-off-color: #637d97; +} +``` + +By changing the values of these CSS variables, you can alter the entire look of the switch component. + +
+ +Another way to style the switch is by using **Sass**, along with our [`switch-theme`]({environment:sassApiUrl}/index.html#function-switch-theme) function. + +To start styling the switch using **Sass**, first import the `index` file, which includes all theme functions and component mixins: ```scss @use "igniteui-angular/theming" as *; @@ -140,22 +166,22 @@ To get started with styling the switch, we need to import the `index` file, wher // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Then, we create a new theme that extends the [`switch-theme`]({environment:sassApiUrl}/index.html#function-switch-theme) and by providing just two parameters - `$thumb-off-color` and `$thumb-on-color` you can get a fully styled switch, as the theme generates all the rest of the necessary colors based on these two, you can of course override any of the other parameters for a customized look: +Then, create a new theme by extending the [`switch-theme`]({environment:sassApiUrl}/index.html#function-switch-theme) function. By providing just two parameters - `$thumb-off-color` and `$thumb-on-color` — you can generate a fully styled switch. The theme automatically calculates all the necessary state colors based on these values. You can, of course, override any of the other parameters for a customized look. ```scss $custom-switch-theme: switch-theme( - $thumb-off-color: #7cadd5, - $thumb-on-color: #ecaa53, + $thumb-off-color: #7cadd5, + $thumb-on-color: #ecaa53, ); ``` -The last step is to **include** the component theme in our application. +Finally, **include** the custom theme in your application: ```scss @include css-vars($custom-switch-theme); ``` -### Demo +In the sample below, you can see how using the switch component with customized CSS variables allows you to create a design that visually resembles the switch used in the [`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.Switch/sample/sap.m.sample.Switch) design system. +> [!NOTE] +> The sample uses the [Fluent Light](themes/sass/schemas.md#predefined-schemas) schema. +
## API References