From 0608c6d33aca8efd2a43803731ca92b74d9dae9d Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Wed, 16 Jul 2025 01:54:59 +0300 Subject: [PATCH 1/3] docs(samples): add new design system samples text --- en/components/button.md | 51 ++++++++++++++++++++++++----------- en/components/card.md | 41 +++++++++++++++++++--------- en/components/checkbox.md | 41 ++++++++++++++++++++++------ en/components/chip.md | 36 ++++++++++++++++++------- en/components/radio-button.md | 38 ++++++++++++++++++++++---- en/components/switch.md | 41 +++++++++++++++++++++++----- 6 files changed, 192 insertions(+), 56 deletions(-) diff --git a/en/components/button.md b/en/components/button.md index cb713c955..db2153489 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 *; @@ -258,7 +276,7 @@ To get started with styling the button, we need to import the `index` file, wher // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`button-theme`]({environment:sassApiUrl}/index.html#function-button-theme) and accepts the `$foreground` and the `$background` parameters with their respective hover and focus parameters. +Then, create a new theme that extends the [`button-theme`]({environment:sassApiUrl}/index.html#function-button-theme) and accepts the `$foreground` and `$background` parameters, along with their respective hover and focus parameters. Given the following markup: @@ -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}/index.html#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}/index.html#function-flat-button-theme) and [`outlined-button-theme`]({environment:sassApiUrl}/index.html#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/card.md b/en/components/card.md index 371c05a9a..aa21667a4 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}/index.html#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. + +Then, create a new theme by extending the [`card-theme`]({environment:sassApiUrl}/index.html#function-card-theme) and providing a few styling parameters. If you specify only the `$background` parameter, the appropriate foreground color (either black or white) will be automatically selected based on which offers better contrast. ```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 a1a0d4c3e..43a68447b 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 *; @@ -220,25 +244,24 @@ To get started with styling the checkbox, we need to import the `index` file, wh // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Then, we create a new theme that extends the [`checkbox-theme`]({environment:sassApiUrl}/index.html#function-checkbox-theme) and setting parameters to style the checkbox elements. By specifying the `$empty-color` and `$fill-color`, the theme automatically calculates appropriate state colors and contrast foregrounds. You can still override any other parameter with custom values as needed. +Then, create a new theme by extending the [`checkbox-theme`]({environment:sassApiUrl}/index.html#function-checkbox-theme) function and setting its parameters to style the checkbox element. By specifying the `$empty-color` and `$fill-color`, the theme automatically calculates the appropriate state colors and contrast foregrounds. You can still override any other parameters with custom values as needed. ```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 43f804e4a..d45c93474 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 *; @@ -489,24 +505,24 @@ To get started with styling the chip, we need to import the `index` file, where // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`chip-theme`]({environment:sassApiUrl}/index.html#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. +Then, create a new theme that extends the [`chip-theme`]({environment:sassApiUrl}/index.html#function-chip-theme) function and setting its parameters to style the chip component. By specifying the `$background` or the `$selected-background`, the theme automatically calculates appropriate state colors and contrast foregrounds. You can still override any additional parameters 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. + +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 63a870109..b5682922d 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 From f05026bdad2baac8e767e1c6bcf96bbdccf62909 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Tue, 12 Aug 2025 16:28:48 +0300 Subject: [PATCH 2/3] feat(styling): update calendar and input samples --- en/components/calendar.md | 5 +++-- en/components/input-group.md | 7 +++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/en/components/calendar.md b/en/components/calendar.md index b180242e3..aa81d37a8 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/input-group.md b/en/components/input-group.md index 36994d1d8..aa282940f 100644 --- a/en/components/input-group.md +++ b/en/components/input-group.md @@ -452,7 +452,7 @@ To customize the appearance of input groups, you can create a new theme by exten Even by specifying just a few core parameters—like colors for the border or background—you'll get a fully styled input group with consistent state-based styles (hover, focus, etc.) applied for you. Here’s a simple example: - + ```scss $custom-input-group: input-group-theme( $box-background: #57a5cd, @@ -466,7 +466,7 @@ The last step is to include the newly created theme: @include css-vars($custom-input-group); ``` -### Demo +In the sample below, you can see how using the input group with customized CSS variables allows you to create a design that visually resembles the one used in the [`Carbon`](https://carbondesignsystem.com/components/text-input/usage/#live-demo) 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:
From dfa2ac62c4085f51147b745c39075cafdee5f83f Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 28 Oct 2025 16:23:32 +0200 Subject: [PATCH 3/3] Update en/components/button.md --- en/components/button.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/button.md b/en/components/button.md index 6b969d195..9860d16a0 100644 --- a/en/components/button.md +++ b/en/components/button.md @@ -252,7 +252,7 @@ If all went well, you should see something like the following in the browser: Following the simplest approach, you can use CSS variables to customize the appearance of the button: ```css -.igx-button { +[igxButton] { --background: #ff4d4f; --hover-background: #ff7875; --active-background: #d9363e;