From 490d42892a7418aa5a8a287dfe8efe0ab718c996 Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Wed, 3 Apr 2024 14:41:54 +0300 Subject: [PATCH 01/25] fix(*): removing another topic that is not used --- en/components/general-licensing.md | 202 ----------------------------- 1 file changed, 202 deletions(-) delete mode 100644 en/components/general-licensing.md diff --git a/en/components/general-licensing.md b/en/components/general-licensing.md deleted file mode 100644 index 0c6c746d03..0000000000 --- a/en/components/general-licensing.md +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: Angular Licensing | Dock Manager | Ignite UI for Angular | Infragistics -_description: Learn how to use Infragistics' Ignite UI for Angular licensed npm feed. -_keywords: npm package license, Ignite UI for Angular license feed, licensing -mentionedTypes: [] ---- - -# License FAQ and Installation - -## License Agreements in Ignite UI for Angular - -It is important to know all the [legal terms and conditions](https://www.infragistics.com/legal/license/igultimate-la) regarding the Ignite UI for Angular that you purchase and use. - -> We have updated our license terms and subscription model in second quarter of 2020. - -If your trial has ended or your subscription [has expired](http://www.infragistics.com/renewal), each developer on your team using Ignite UI will need to [purchase](https://www.infragistics.com/how-to-buy/product-pricing) a subscription. This will enable you to use our private npm feed hosted on for development. There you will find the latest versions of the Ignite UI for Angular packages. If you have a current subscription, you can use this private feed and you will have access to the full version of Ignite UI for Angular. - -For detailed explanation of the Ignite UI license agreement and terms of use, [click here](https://www.infragistics.com/legal/license/igultimate-la). - -Infragistics offers free, non-commercial, not-for-resale (NFR) licenses for the following: - -* If you are part of a developer program like the Microsoft MVP, Microsoft Regional Director, Google Developer Expert, etc. -* If you are a primary, secondary or university student, or an academic institution, or a professor. - -If you qualify for a free, non-commercial, NFR license or if you have any license questions, please [contact us](https://www.infragistics.com/about-us/contact-us). - -> Currently only the **igniteui-dockmanager** package is available in our private npm feed, but in the future we will add the other Ignite UI for Angular packages as well. - -## Ignite UI for Angular npm packages - Using the Private npm feed - -Npm is the most popular package manager and is also the default one for the runtime environment Node.js. It is highly adopted and is one of the fastest and easiest ways to manage the packages that you depend on in your project. For more information on how npm works, read the official [npm documentation](https://docs.npmjs.com/). - -Infragistics Ignite UI for Angular is available as npm packages and you can add them as dependencies to your project in a [few easy steps](./general-getting-started.md). Choosing this approach will not require configuring npm. By installing this package you will start using the **Ignite UI for Angular Trial version** of the product. - -> Currently only the [igniteui-dockmanager](https://www.npmjs.com/package/igniteui-dockmanager) npm package has a trial watermark, but in the future we will add it to the other Ignite UI for Angular packages as well. - -### How to setup your environment to use the private npm feed - -#### First you need to setup the private registry and to associate this registry with the Infragistics scope. - -This will allow you to seamlessly use a mix of packages from the public npm registry and the Infragistics private registry. You will be asked to provide the username and the password that you use for logging into your Infragistics account. You should also provide the email that is registered to your Infragistics profile. - -> If your account is not licensed (you are still using a Trial account) the private package feed won't be accessible to you e.g. it will return 404 or 403 error message. **Only licensed accounts can access the packages.infragistics private feed.** - -### Now, to log in to our private feed using npm - -#### npm version 9+ - -Our private feed doesn't currently support login/adduser commands with npm v9, so we recommend the following steps instead to add the required auth fields to the config: - -```cmd -npm config set @infragistics:registry https://packages.infragistics.com/npm/js-licensed/ - -npm config set //packages.infragistics.com/npm/js-licensed/:username=YOUR_USERNAME - -npm config set //packages.infragistics.com/npm/js-licensed/:email=YOUR_IG_EMAIL - -npm config set //packages.infragistics.com/npm/js-licensed/:_auth=YOUR_IG_AUTH_TOKEN -``` - -You can generate [Access Token](#access-token-usage) through your Infragistics profile. - -This approach is applicable to all prior versions of `npm`. - -#### npm version up to v8 - -Run the `adduser` command and specify a user account and password: - -```cmd -npm adduser --registry=https://packages.infragistics.com/npm/js-licensed/ --scope=@infragistics -``` - -You will be asked to provide the username and the password that you use for logging into your Infragistics account. You should also provide the email that is registered to your Infragistics profile. - -> `npm` is disallowing the use of the `"@"` symbol inside your username as it is considered as being "not safe for the net". Because your username is actually the email that you use for your Infragistics account it always contains the symbol `"@"`. That's why you must escape this limitation by replacing the `"@"` symbol with `"!!"` (two exclamation marks). For example, if your username is `"username@example.com"` when asked about your username you should provide the following input: `"username!!example.com"`. - -#### After this is done, you will be logged in and you will be able to install the latest versions of the Ignite UI packages into your project: - -```cmd -npm uninstall igniteui-dockmanager -npm install @infragistics/igniteui-dockmanager - -npm uninstall igniteui-dockmanager -npm install @infragistics/igniteui-dockmanager -``` - -Have in mind that we have set the Ignite UI for Angular package to be scoped, meaning that no changing the registries is needed if you want to install packages from our private feed and from npmjs.org simultaneously. - -### Changes in your project source after license package update - -If you are upgrading from trial to licensed package the new packages will be scoped under `@infragistics`. -As a result you can either: - -* Do a global replace for all trial packages and change then to the licensed scoped version across all files in your project. For example, replace all `igniteui-dockmanager` references to `@infragicstics/igniteui-dockmanager` The change should affect all imports where such packages are used. - - **Or** - -* Add a **paths** mapping in the project **tsconfig.json**. - -```json -{ - /* ... */ - "compilerOptions": { - "baseUrl": "./", - "outDir": "./dist/out-tsc", - /* ... */ - "paths": { - "igniteui-dockmanager": ["./node_modules/@infragistics/igniteui-dockmanager"], - "igniteui-dockmanager/*": ["./node_modules/@infragistics/igniteui-dockmanager/*"], - } - } -} -``` - -* Change the themes imports like this: - -```ts -@import '~igniteui-dockmanager/dist/collection/styles/igc.themes'; - -// Should be changed to - -@import '~@infragistics/igniteui-dockmanager/dist/collection/styles/igc.themes'; -``` - -So, if you've already adopted npm and you have an Ignite UI for Angular license, don't hesitate setting up the Infragistics private feed and boost your productivity, using the full potential of Ignite UI for Angular. - -## Access Token Usage - -You can also authenticate to our private npm feed using an access token, which you can acquire through your [infragistics.com user account](https://account.infragistics.com/access-tokens). The access token authentication is the preferred alternative when you want to integrate a CI process in a publicly accessible repository, which uses the Ignite UI for Angular licensed packages. - -The following information is on how to setup authentication to our private npm registry using an access token in local configuration, Azure Pipelines build procedures and Travis CI build process: - -* Generate a token from https://account.infragistics.com/access-tokens - - - -> Each token is with Base64 encoding. - -* Add the following into your [.npmrc](https://docs.npmjs.com/configuring-npm/npmrc.html) file - -```cmd -@infragistics:registry=https://packages.infragistics.com/npm/js-licensed/ -//packages.infragistics.com/npm/js-licensed/:_auth=YOUR_ACCESS_TOKEN -//packages.infragistics.com/npm/js-licensed/:username=YOUR_USERNAME -``` - -## Azure Pipelines Configuration - -Update the azure-pipelines.yml with the following steps: - -```cmd -steps: - -- script: npm config set @infragistics:registry $(npmRegistry) - displayName: 'Npm add registry' -- script: npm config set $(igScope):_auth=$(token) - displayName: 'Npm config auth' -``` - -Add **npm registry** and **token** variables. - - - - - -## Travis CI Configuration - -We will follow almost the same approach here. The only difference would be that the configuration will be set on [before_install](https://docs.travis-ci.com/user/job-lifecycle/#the-job-lifecycle) - -```cmd -before_install: -- echo "@infragistics:registry=https://packages.infragistics.com/npm/js-licensed/" >> ~/.npmrc -- echo "//packages.infragistics.com/npm/js-licensed/:_auth=$TOKEN" >> ~/.npmrc -``` - -The best way to define an environment variable depends on what type of information it will contain. So [you have two options](https://docs.travis-ci.com/user/environment-variables/): - -* encrypt it and add it [to your .travis.yml](https://docs.travis-ci.com/user/environment-variables/#defining-encrypted-variables-in-travisyml) -* add it to your [Repository Settings](https://docs.travis-ci.com/user/environment-variables/#defining-variables-in-repository-settings) - -### GitHub Actions Configuration - -Add the following scripts before the **npm i(ci)** step to your [CI workflow configuration](https://help.github.com/en/actions/language-and-framework-guides/using-nodejs-with-github-actions): - -```cmd -- run: echo "@infragistics:registry=https://packages.infragistics.com/npm/js-licensed/" >> ~/.npmrc -- run: echo "//packages.infragistics.com/npm/js-licensed/:_auth=${{ secrets.NPM_TOKEN }}" >> ~/.npmrc -``` - -Define [*secrets* (encrypted environment variables)](https://help.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets) and use them in the GitHub actions workflow for sensitive information like the access token. From c9e44b1bece15884cf6bfcb77fb39b4e95955aa9 Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Thu, 22 Aug 2024 16:37:06 +0300 Subject: [PATCH 02/25] feat(list): restoring wrongly remove chat component sample --- en/components/list.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/en/components/list.md b/en/components/list.md index fce538f2db..faac35252a 100644 --- a/en/components/list.md +++ b/en/components/list.md @@ -591,6 +591,16 @@ public selectItem(item) {
+## Chat Component +The following sample demonstrates how to create a simple chat component using **IgxList**. + + + + +
+ ## Applying theme to the list component Let's see how we can change the background of our list. First we need to import index.scss in to our component .scss file. From 1e7b1da0bf6c3b163359a3e310b7d0fb5b0aa7fc Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 25 Sep 2024 18:09:14 +0300 Subject: [PATCH 03/25] refactor(badge): add --size clarification --- en/components/badge.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/en/components/badge.md b/en/components/badge.md index 319abcc343..ee15af22f8 100644 --- a/en/components/badge.md +++ b/en/components/badge.md @@ -118,6 +118,20 @@ We can change the badge shape through the `shape` attribute setting its value to If everything's done right, you should see the demo sample shown above in your browser. +### Badge Size + +The size of the badge can be controlled using the `--size` variable. It will make sure that the badge sizes proportionally in both directions. Keep in mind, however, that badges containing text values use the `caption` typography style for its font-size and line-height. For that reason, when setting the `--size` of a badge containing text to values below 16px, you will also need to modify its typography. + +Example: +```scss +igx-badge { + --size: 12px; + + font-size: calc(var(--size) / 2); + line-height: normal; +} +``` + ### Badge Icon In addition to material icons, the `igx-badge` component also supports usage of [Material Icons Extended](../components/material-icons-extended.md) and any other custom icon set. To add an icon from the material icons extended set inside your badge component, first you have to register it: From 68346520b9123c5d28ec3b392101b6cad3de1d56 Mon Sep 17 00:00:00 2001 From: RivaIvanova Date: Tue, 29 Oct 2024 11:29:35 +0200 Subject: [PATCH 04/25] docs(carousel): update topic with new properties --- en/components/carousel.md | 39 ++++++++++++--------------------------- 1 file changed, 12 insertions(+), 27 deletions(-) diff --git a/en/components/carousel.md b/en/components/carousel.md index b416e814b7..1168bb4715 100644 --- a/en/components/carousel.md +++ b/en/components/carousel.md @@ -121,19 +121,7 @@ export class HomeComponent { By default, the Carousel in Angular has its **[`loop`]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#loop)** input property set to `true` ( *looping occurs when the first slide comes after the last by navigating using the Next action, or when the last slide comes after the first by using the Previous action* ). The looping behavior can be disabled by setting the value of the `loop` input to `false`. -To keep track of each slide index, the carousel has indicators that are positioned at the `bottom` of the carousel by default. In order to change this behavior, we have to use the [indicatorsOrientation]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#indicatorsOrientation) property and assign it to `top`. Indicators can be disabled by adding an empty template. - -The carousel template may look like this: - -```html -
- - ... - - - -
-``` +To keep track of each slide index, the carousel has indicators that are positioned at the `bottom` of the carousel by default. In order to change this behavior, we have to use the [indicatorsOrientation]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#indicatorsOrientation) property and assign it to `top`. Indicators can be disabled by setting the `indicators` input property to `false`. ### Custom indicators
@@ -279,12 +267,13 @@ The carousel [animations](carousel.md#angular-carousel-animations) are fully sup ### Keyboard navigation
-* To navigate to the **next**/**previous** slide, you have to use, respectfully: - * `Arrow Right` key for the next slide - * `Arrow Left` key for the previous slide -* To navigate to the **end**/**start** slide you have to use, respectfully: - * `End` key for the end slide - * `Home` key for the start slide +* Navigation buttons + * `Space`/`Enter` key - navigates to the next/previous slide. +* Indicators + * `Arrow Left` key - navigates to the previous (next in Right-to-Left mode) slide. + * `Arrow Right` key - navigates to the next (previous in Right-to-Left mode) slide. + * `Home` key - navigates to the first (last in Right-to-Left mode) slide. + * `End` key - navigates to the last (first in Right-to-Left mode) slide. ### Automatic transitioning
@@ -312,14 +301,10 @@ Our carousel will look like this in the template: ```html ...
- -
- - - -
- - + + + +
... From 8c72f23a4b0bd9b06b97662e9b0b7ab9fd448e60 Mon Sep 17 00:00:00 2001 From: sivanova Date: Mon, 4 Nov 2024 16:23:04 +0200 Subject: [PATCH 05/25] docs(toast/snackbar): remove overlaySettings sections --- en/components/snackbar.md | 39 ++++++++++++++++++++------------------- en/components/toast.md | 29 +---------------------------- 2 files changed, 21 insertions(+), 47 deletions(-) diff --git a/en/components/snackbar.md b/en/components/snackbar.md index 387ceba8a0..16fa17728e 100644 --- a/en/components/snackbar.md +++ b/en/components/snackbar.md @@ -254,29 +254,30 @@ public restore() { iframe-src="{environment:demosBaseUrl}/notifications/snackbar-sample-4" > -### Overlay Settings -The [`IgxSnackbarComponent`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html) uses [Overlay Settings]({environment:angularApiUrl}/interfaces/overlaysettings.html) to control the position of its container. The default settings can be changed by defining Custom OverlaySettings and passing them to the snackbar `open()` method: +### Positioning +Use [`positionSettings`]({environment:angularApiUrl}/classes/igxtoastcomponent.html#positionSettings) property to configure where the snackbar appears. By default, it is displayed at the bottom of the page. In the sample below, we set notification to appear at the top position. -```typescript -public customSettings: OverlaySettings = { - positionStrategy: new GlobalPositionStrategy( - { - horizontalDirection: HorizontalAlignment.Left, - verticalDirection: VerticalAlignment.Top - }), - modal: true, - closeOnOutsideClick: true, -}; - -snackbar.open(customSettings); +```html + +
+ + Notification displayed +
``` -Users can also provide a specific outlet where the snackbar will be placed in the DOM when it is visible: - -```html - -
+```typescript +// sample.component.ts +import { VerticalAlignment, HorizontalAlignment } from 'igniteui-angular'; +// import { VerticalAlignment, HorizontalAlignment } from '@infragistics/igniteui-angular'; for licensed package +... +public open(snackbar) { + snackbar.positionSettings.verticalDirection = VerticalAlignment.Top; + snackbar.positionSettings.horizontalDirection = HorizontalAlignment.Right; + snackbar.open(); +} +... ``` + ## Styling To get started with styling the snackbar, we need to import the index file, where all the theme functions and component mixins live: diff --git a/en/components/toast.md b/en/components/toast.md index a1fb181e6a..6b3c94eda7 100644 --- a/en/components/toast.md +++ b/en/components/toast.md @@ -110,9 +110,6 @@ public showMessage() { } ``` -> [!WARNING] -> The igx-toast component `show` and `hide` methods have been deprecated. `open` and `close` should be used instead. - ## Examples ### Hide/Auto Hide @@ -178,30 +175,6 @@ public open(toast) { iframe-src="{environment:demosBaseUrl}/notifications/toast-sample-5" > -### Overlay Settings -The [`IgxToastComponent`]({environment:angularApiUrl}/classes/igxtoastcomponent.html) uses [Overlay Settings]({environment:angularApiUrl}/interfaces/overlaysettings.html) to control the position of its container. The default settings can be changed by defining Custom OverlaySettings and passing them to the toast `open()` method: - -```typescript -public customSettings: OverlaySettings = { - positionStrategy: new GlobalPositionStrategy( - { - horizontalDirection: HorizontalAlignment.Left, - verticalDirection: VerticalAlignment.Top - }), - modal: true, - closeOnOutsideClick: true, -}; - -toast.open(customSettings); -``` - -Users can also provide a specific outlet where the toast will be placed in the DOM when it is visible: - -```html - -
-``` -
## Styling @@ -215,7 +188,7 @@ To get started with styling the toast, we need to import the index file, where a // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`toast-theme`]({environment:sassApiUrl}/index.html#function-toast-theme) and accepts the `$shadow`, `$background`, `$text-color` and the `$border-radius` parameters. +Following the simplest approach, we create a new theme that extends the [`toast-theme`]({environment:sassApiUrl}/index.html#function-toast-theme) and accepts the `$background`, `$text-color` and `$border-radius` parameters. ```scss $custom-toast-theme: toast-theme( From 387b20ecf03f5b1a1485ce1dd683be341a1b0601 Mon Sep 17 00:00:00 2001 From: Silvia Ivanova <59446295+SisIvanova@users.noreply.github.com> Date: Mon, 4 Nov 2024 16:54:45 +0200 Subject: [PATCH 06/25] Update en/components/snackbar.md Co-authored-by: Riva Ivanova <49126110+RivaIvanova@users.noreply.github.com> --- en/components/snackbar.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/snackbar.md b/en/components/snackbar.md index 16fa17728e..e854fb5a1a 100644 --- a/en/components/snackbar.md +++ b/en/components/snackbar.md @@ -255,7 +255,7 @@ public restore() { ### Positioning -Use [`positionSettings`]({environment:angularApiUrl}/classes/igxtoastcomponent.html#positionSettings) property to configure where the snackbar appears. By default, it is displayed at the bottom of the page. In the sample below, we set notification to appear at the top position. +Use [`positionSettings`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html#positionSettings) property to configure where the snackbar appears. By default, it is displayed at the bottom of the page. In the sample below, we set notification to appear at the top position. ```html From 5b398dcd515c7e2f73454ab8e89d4c72536007fc Mon Sep 17 00:00:00 2001 From: Rumyana Andriova <54146583+randriova@users.noreply.github.com> Date: Wed, 6 Nov 2024 15:12:18 +0200 Subject: [PATCH 07/25] docs(*): Update JA for #5983 --- jp/components/carousel.md | 39 ++++++++++++--------------------------- 1 file changed, 12 insertions(+), 27 deletions(-) diff --git a/jp/components/carousel.md b/jp/components/carousel.md index 028a55d180..4e08f374bd 100644 --- a/jp/components/carousel.md +++ b/jp/components/carousel.md @@ -122,19 +122,7 @@ export class HomeComponent { デフォルトでは、Angular のカルーセルの **[`loop`]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#loop)** 入力プロパティは `true` に設定されています (ループは、Next 動作でナビゲートするときに最初のスライドが最後のスライドの後に来るか、Previous 動作を使用して最後のスライドが最初のスライドの後に来るときに起こります)。ループ動作を無効にするには、`loop` 入力の値を `false` に設定します。 -各スライド インデックスを追跡するために、カルーセルには、デフォルトでカルーセルの `bottom` に配置されるインジケーターがあります。この動作を変更するには、[indicatorsOrientation]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#indicatorsOrientation) プロパティを使用して、`top` に割り当てる必要があります。空のテンプレートを追加すると、インジケーターを無効にできます。 - -カルーセル テンプレートは以下のようになります。 - -```html -
- - ... - - - -
-``` +各スライド インデックスを追跡するために、カルーセルには、デフォルトでカルーセルの `bottom` に配置されるインジケーターがあります。この動作を変更するには、[indicatorsOrientation]({environment:angularApiUrl}/classes/igxcarouselcomponent.html#indicatorsOrientation) プロパティを使用して、`top` に割り当てる必要があります。インジケーターは、`indicators` 入力プロパティを `false` に設定することで無効にできます。 ### カスタム インジケーター
@@ -280,12 +268,13 @@ Carousel [アニメーション](carousel.md#angular-carousel-のアニメーシ ### キーボード ナビゲーション
-* **次へ**/**前へ**のスライドに移動するには、それぞれ以下を使用する必要があります。 - * `右矢印` キー - 次のスライド - * `左矢印` キー - 前のスライド -* **最後**/**最初**のスライドに移動するには、それぞれ以下を使用する必要があります。 - * `End` キー - 最後のスライド - * `Home` キー - 最初のスライド +* ナビゲーション ボタン + * `Space`/`Enter` キー - 次のスライド/前のスライドに移動します。 +* インジケーター + * `左矢印` キー - 前のスライド (右から左モードでは次) に移動します。 + * `右矢印` キー - 次のスライド (右から左モードでは前へ) に移動します。 + * `Home` キー - 最初のスライド (右から左モードでは最後) に移動します。 + * `End` キー - 最後のスライド (右から左モードでは最初) に移動します。 ### 自動的なトランジション
@@ -313,14 +302,10 @@ Carousel [アニメーション](carousel.md#angular-carousel-のアニメーシ ```html ...
- -
- - - -
- - + + + +
... From 2da760fcdef6b61642c5048c5704618b7092ecb6 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 12 Nov 2024 13:49:48 +0200 Subject: [PATCH 08/25] Update en/components/snackbar.md --- en/components/snackbar.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/en/components/snackbar.md b/en/components/snackbar.md index e854fb5a1a..d97a77aa8b 100644 --- a/en/components/snackbar.md +++ b/en/components/snackbar.md @@ -259,10 +259,8 @@ Use [`positionSettings`]({environment:angularApiUrl}/classes/igxsnackbarcomponen ```html -
- - Notification displayed -
+ +Notification displayed ``` ```typescript From 90a087c853db3465fea2b6eb9e6928ddba92b310 Mon Sep 17 00:00:00 2001 From: Rumyana Andriova <54146583+randriova@users.noreply.github.com> Date: Tue, 19 Nov 2024 14:21:20 +0200 Subject: [PATCH 09/25] docs(*): Updating Snackbar and Toast topics - #5990. --- jp/components/snackbar.md | 40 +++++++++++++++++++-------------------- jp/components/toast.md | 29 +--------------------------- 2 files changed, 20 insertions(+), 49 deletions(-) diff --git a/jp/components/snackbar.md b/jp/components/snackbar.md index 5420cb2d7a..a3d0021cc5 100644 --- a/jp/components/snackbar.md +++ b/jp/components/snackbar.md @@ -5,7 +5,7 @@ _keywords: Angular Snackbar コンポーネント, Angular Snackbar コントロ _language: ja --- # Angular Snackbar (スナックバー) コンポーネントの概要 -

Ignite UI for Angular Snackbar コンポーネントは、アクションを含むことができる単一行のメッセージで操作のフィードバックを提供します。SnackBar メッセージがその他の画面要素の上に表示され、画面の中央下に配置されます。

+

Ignite UI for Angular Snackbar コンポーネントは、アクションを含むことができる単一行のメッセージで操作のフィードバックを提供します。Snackbar メッセージがその他の画面要素の上に表示され、画面の中央下に配置されます。

## Angular Snackbar の例 @@ -255,31 +255,29 @@ public restore() { iframe-src="{environment:demosBaseUrl}/notifications/snackbar-sample-4" > -### オーバーレイ設定 -[`IgxSnackbarComponent`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html) は、[オーバーレイ設定]({environment:angularApiUrl}/interfaces/overlaysettings.html)を使用してコンテナーの位置を制御します。デフォルト設定は、カスタム オーバーレイ設定を定義し、それらをスナックバーの `open()` メソッドに渡すことで変更できます。 +### 配置 +[`positionSettings`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html#positionSettings) プロパティを使用すると、Snackbar の表示位置を構成します。デフォルトで、ページの下に表示されます。以下のサンプルで、通知が上位置に表示されます。 -```typescript -public customSettings: OverlaySettings = { - positionStrategy: new GlobalPositionStrategy( - { - horizontalDirection: HorizontalAlignment.Left, - verticalDirection: VerticalAlignment.Top - }), - modal: true, - closeOnOutsideClick: true, -}; - -snackbar.open(customSettings); +```html + + +Notification displayed ``` -ユーザーは、スナックバーが表示されたときに DOM に配置される特定のアウトレットを提供することもできます。 - -```html - -
+```typescript +// sample.component.ts +import { VerticalAlignment, HorizontalAlignment } from 'igniteui-angular'; +// import { VerticalAlignment, HorizontalAlignment } from '@infragistics/igniteui-angular'; for licensed package +... +public open(snackbar) { + snackbar.positionSettings.verticalDirection = VerticalAlignment.Top; + snackbar.positionSettings.horizontalDirection = HorizontalAlignment.Right; + snackbar.open(); +} +... ``` -## スタイル設定 +## スタイル設定 スナックバーのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。 ```scss diff --git a/jp/components/toast.md b/jp/components/toast.md index aba997a849..3ecfffa0d7 100644 --- a/jp/components/toast.md +++ b/jp/components/toast.md @@ -111,9 +111,6 @@ public showMessage() { } ``` -> [!WARNING] -> igx-toast コンポーネントの `show` メソッドと `hide` メソッドは非推奨になりました。代わりに `open` と `close` を使用する必要があります。 - ## 例 ### 非表示/自動的に隠す @@ -179,30 +176,6 @@ public open(toast) { iframe-src="{environment:demosBaseUrl}/notifications/toast-sample-5" > -### オーバーレイ設定 -[`IgxToastComponent`]({environment:angularApiUrl}/classes/igxtoastcomponent.html) は、[オーバーレイ設定]({environment:angularApiUrl}/interfaces/overlaysettings.html)を使用してコンテナーの位置を制御します。デフォルト設定は、カスタム オーバーレイ設定を定義し、それらをトーストの `open()` メソッドに渡すことで変更できます。 - -```typescript -public customSettings: OverlaySettings = { - positionStrategy: new GlobalPositionStrategy( - { - horizontalDirection: HorizontalAlignment.Left, - verticalDirection: VerticalAlignment.Top - }), - modal: true, - closeOnOutsideClick: true, -}; - -toast.open(customSettings); -``` - -ユーザーは、トーストが表示されたときに DOM に配置される特定のアウトレットを提供することもできます。 - -```html - -
-``` -
## スタイル設定 @@ -216,7 +189,7 @@ Toast のスタイル設定を始めるには、すべてのテーマ関数と // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最も簡単な方法は、[`toast-theme`]({environment:sassApiUrl}/index.html#function-toast-theme) を拡張する新しいテーマを作成し、`$shadow`、`$background`、`$text-color` と `$border-radius` パラメーターを受け取る方法です。 +最も簡単な方法は、[`toast-theme`]({environment:sassApiUrl}/index.html#function-toast-theme) を拡張する新しいテーマを作成し、`$background`、`$text-color` と `$border-radius` パラメーターを受け取る方法です。 ```scss $custom-toast-theme: toast-theme( From a45acf984d1c1ca372324160edab09ab4ee8beb8 Mon Sep 17 00:00:00 2001 From: RivaIvanova Date: Tue, 26 Nov 2024 09:38:08 +0200 Subject: [PATCH 10/25] docs(combo): update single selection code snippet --- en/components/combo.md | 2 +- jp/components/combo.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/en/components/combo.md b/en/components/combo.md index 251b821a5a..4a10851ae4 100644 --- a/en/components/combo.md +++ b/en/components/combo.md @@ -231,7 +231,7 @@ By default, the combo control provides multiple selection. The snippet below dem ```typescript public singleSelection(event: IComboSelectionChangeEventArgs) { if (event.added.length) { - event.newSelection = event.added; + event.newValue = event.added; } } ``` diff --git a/jp/components/combo.md b/jp/components/combo.md index f69617a17c..f321f462ca 100644 --- a/jp/components/combo.md +++ b/jp/components/combo.md @@ -232,7 +232,7 @@ export class MyExampleCombo { ```typescript public singleSelection(event: IComboSelectionChangeEventArgs) { if (event.added.length) { - event.newSelection = event.added; + event.newValue = event.added; } } ``` From a82635d599062f9f5ac9f598bff5e22e38e19133 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Thu, 12 Dec 2024 15:05:32 +0200 Subject: [PATCH 11/25] refactor(themes): updating docs --- en/components/themes/sass/component-themes.md | 72 +++--------- en/components/themes/sass/configuration.md | 27 ----- en/components/themes/sass/global-themes.md | 105 +++++------------- .../themes/sass/presets/bootstrap.md | 9 +- en/components/themes/sass/presets/fluent.md | 11 +- en/components/themes/sass/presets/indigo.md | 9 +- en/components/themes/sass/presets/material.md | 26 ++--- en/components/themes/sass/roundness.md | 27 +++-- en/components/themes/sass/typography.md | 45 +++++++- 9 files changed, 127 insertions(+), 204 deletions(-) diff --git a/en/components/themes/sass/component-themes.md b/en/components/themes/sass/component-themes.md index 02a1bbc58c..7321bc2d97 100644 --- a/en/components/themes/sass/component-themes.md +++ b/en/components/themes/sass/component-themes.md @@ -113,6 +113,21 @@ The Angular team has adopted 3 strategies for View Encapsulation - Emulated(defa What exactly does `Emulated` View Encapsulation mean, anyway? This type of View Encapsulation does not take advantage of the Shadow DOM specification, instead it employs a way to bind styles for a component and its children by using a unique attribute identifier applied on the host element. Any style rules you add to a stylesheet of a View Encapsulated component that target some inner selector will not apply because they do not reference the unique attribute of the host element. To be able to 'penetrate' this encapsulation we have to use some View Encapsulation penetration strategy. Right now, in Angular this strategy is `::ng-deep`; it allows you to target any inner selector, which is encapsulated by its host element. It's good practice to use `::ng-deep` if you're dealing with CSS rules, instead of CSS variables and you want to customize a single instance of a component. We'll provide an example for that in the next section. +```scss +// Import the theming module +@use "igniteui-angular/theming" as *; + +$avatar-royalblue-theme: avatar-theme( + $initials-background: royalblue, +); + +:host ::ng-deep { + @include css-vars($avatar-royalblue-theme); +} +``` + +
+ Let's take a look at an example using CSS variables. Let's create an avatar theme that is bound to specific parent component. Here's our simple component: @@ -152,7 +167,7 @@ $avatar-royalblue-theme: avatar-theme( When using CSS variables, we don't have to use the `::ng-deep` pseudo-selector. With the code above we've created CSS variables for the `igx-avatar`, which will always have `royalblue` as its background color. The theme for our custom avatar will not 'leak' into other `igx-avatar` component instances, thus staying encapsulated within our custom `app-avatar` component. -Any Ignite UI for Angular theme built with the `$igx-legacy-support` set to `false` will allow styling of components without the need of Sass in your project. For instance the above could be achieved by setting the value of `--igx-avatar-background` CSS variable to the desired color: +The above instance could also be achieved without using any Sass. All we need to do is to set the value of `--igx-avatar-background` CSS variable to the desired color: ```css /* app-avatar.component.css */ @@ -161,62 +176,9 @@ Any Ignite UI for Angular theme built with the `$igx-legacy-support` set to `fal } ``` -
- -## Targeting Older Browsers - -
- -In the [overview](#overview) section I mentioned you could use hard-coded values to style your components by setting the `$igx-legacy-support` global variable to `true`. If you use the `theme` mixin and pass it `$legacy-support` with value of `true` it will set the `$igx-legacy-support` to `true`, too. - -### Usage in global themes +
-The below example shows how you can style components using hard-coded values. - -```scss -// Import the theming module -@use "igniteui-angular/theming" as *; - -// !IMPORTANT: Prior to Ignite UI for Angular version 13 use: -// @import '~igniteui-angular/lib/core/styles/themes/index'; -@include core(); -@include theme($palette: $default-palette, $legacy-support: true); - -// Overwrite the default themes for igx-avatar using hard-coded values: -$avatar-royalblue-theme: avatar-theme( - $background: royalblue, -); - -@include avatar($avatar-royalblue-theme); -``` - -
- -### Usage in encapsulated views - -The below sample uses the sample from the [View Encapsulation](#view-encapsulation) section as a starting point: - -```scss -// Import the theming module -@use "igniteui-angular/theming" as *; - -// !IMPORTANT: Prior to Ignite UI for Angular version 13 use: -// @import '~igniteui-angular/lib/core/styles/themes/index'; - -// Enable legacy support first. -// !IMPORTANT: Only applicable for versions older than Ignite UI for Angular 13. -$igx-legacy-support: true; -$avatar-royalblue-theme: avatar-theme( - $initials-background: royalblue, -); - -:host ::ng-deep { - @include avatar($avatar-royalblue-theme); -} -``` - -
## API Overview diff --git a/en/components/themes/sass/configuration.md b/en/components/themes/sass/configuration.md index c096a4e682..fb77a6eb5e 100644 --- a/en/components/themes/sass/configuration.md +++ b/en/components/themes/sass/configuration.md @@ -9,33 +9,6 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
The Ignite UI for Angular theming library exposes several input arguments variables that let you configure how the theming engine works.
-## Legacy Support - -The development of Ignite UI for Angular started back in 2016 when Internet Explorer 11 was still relevant. Some of our users depend on IE11 to this day. Our theming engine was built in a way that allows you to produce styles for ever-green and old browsers alike, using the same API. We allow you to configure how the engine behaves based on a single global variable - `$igx-legacy-support`. By default, it is set to `false`, but you can shadow its declaration. The value of this variable is also implicitly set when you specify the `$legacy-support` parameter on the `theme` mixin. - -> [!WARNING] -> The `$legacy-support` option was removed in igniteui-angular 13.0.x. Support for IE11 and legacy browsers was removed in version 13 and this option is no longer valid. - -Example: - -```scss -// Sets the global $igx-legacy-support variable to true -@include theme( - $legacy-support: true -); -``` - -This is the default way to turn off legacy support for the theme you're building in your `styles.scss` file. If you have styles scoped to specific components, like the `app.component.scss` file, you will have to specify the legacy support there as well. - -```scss -// app.component.scss -$igx-legacy-support: true; - -$color: color($light-material-palette, 'primary', 900); -``` - -We recommend you create a `_variables.scss` file in the `styles` directory of your project where you store all of your global configuration variables. In this way, you can simply import your configuration in every style file. - ## Global Variables Here's a list of global Sass variables forwarded in the main theming module: diff --git a/en/components/themes/sass/global-themes.md b/en/components/themes/sass/global-themes.md index ecf4115c2e..c1b32b7959 100644 --- a/en/components/themes/sass/global-themes.md +++ b/en/components/themes/sass/global-themes.md @@ -14,7 +14,7 @@ If you've included the _`igniteui-angular.css`_ file in your application project **Ignite UI for Angular** uses a global theme by default to theme the entire suite of components. You can, however, create themes scoped to components you have in your app, depending on your use case. For now, we will be including all of our themes in a single file. To generate a global theme we're going to be including two mixins `core` and `theme`. Both of those mixins accept a few arguments: -###core +### Core mixin
| Name | Type | Default | Description | @@ -23,7 +23,7 @@ To generate a global theme we're going to be including two mixins `core` and `th | `$enhanced-accessibility` | boolean | false | Switches component colors and other properties to more accessible values. | -###theme +### Theme mixins
| Name | Type | Default | Description | @@ -35,7 +35,7 @@ To generate a global theme we're going to be including two mixins `core` and `th | `$elevation` | boolean | `true` | Turns on/off elevations for all components in the theme. | | `$elevations` | Map | `$material-elevations` | The elevation map to be used by all component themes. | -Let's create a custom global theme that will use the primary and secondary colors of our company. +Let's create a custom global theme that will use the primary, secondary and surface colors of our company. ```scss // Import the theming module @@ -46,24 +46,25 @@ Let's create a custom global theme that will use the primary and secondary color $primary-color: #2ab759; $secondary-color: #f96a88; +$surface-color: #fff; $my-color-palette: palette( $primary: $primary-color, - $secondary: $secondary-color + $secondary: $secondary-color, + $surface: $surface-color ); -// IMPORTANT: Make sure you always includecore first! +// IMPORTANT: Make sure you always include core first! @include core(); -// Add the typography styles before the main theme. @include typography(); -// Pass the color palette we generated to thetheme mixin. +// Pass the color palette we generated to the theme mixin. @include theme($my-color-palette); ``` Let's explain what the `core` and `theme` mixins do. The `core` mixin takes care of some configurations, like adding enhanced accessibility(e.g. colors suitable for color blind users) and printing styles for all components. The `theme` mixin includes each individual component style (bar the ones listed as excluded) and configures the palette, schema, elevations, and roundness that is not listed in the `$exclude` list of components. > [!IMPORTANT] -> Including `core` and `typography` before `theme` is essential. The `core` and `typography` mixins provide all base definitions needed for the `theme` mixin to work correctly. +> Including `core` before `theme` is essential. The `core` mixins provide all base definitions needed for the `theme` mixin to work correctly. ## Excluding Components
@@ -97,81 +98,35 @@ $allowed: (igx-avatar, igx-badge); ## Light and Dark Themes -In addition to the more powerful `theme` mixin, we include two additional global theme mixins for fast bootstrapping *__light__* and *__dark__* themes. Those mixins are `light-theme` and `dark-theme`. +We also provide *__light__* and *__dark__* versions for our four themes - Material, Fluent, Indigo, Bootstrap. -Here's a quick showcase of how you can create a light and dark theme for your application: +To use any of the versions, you would simply need to pass it to our [theme]({environment:sassApiUrl}/index.html#mixin-theme) mixin: +*__Light__* ```scss -.light-theme { - @include light-theme($light-material-palette); -} - -.dark-theme { - background: #333; - color: #fff; - - @include dark-theme($light-material-palette); -} +@include core(); +@include typography( + $font-family: $material-typeface, + $type-scale: $material-type-scale +); +@include theme( + $schema: $light-material-schema, + $palette: $light-material-palette, +); ``` - -Ideally, you set `.light-theme` or `.dark-theme` classes on an element high in your application DOM tree. Your `app-root` element is a good candidate for that. - -### Available Themes -Ignite UI for Angular gives you the option to pick from a set of predefined themes. -The table below shows all the built-in themes that you can use right away. - -| Theme | Mixin | Schema | Color Palette | Available in version | -| ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ---------------------------------- | -------------------------------------------------------------------------------------- | -------------------- | -| [**Material (base)**](presets/material.md) | [theme()]({environment:sassApiUrl}/index.html#mixin-theme) | `$light-material-schema ` | null | **all** | -| [**Material (light)**](presets/material.md#material-light-theme) | [light-theme()]({environment:sassApiUrl}/index.html#mixin-light-theme) | `$light-material-schema ` | $light-material-palette | **6.2 +** | -| [**Material (dark)**](presets/material.md#material-dark-theme) | [dark-theme()]({environment:sassApiUrl}/index.html#mixin-dark-theme) | `$dark-material-schema ` | $dark-material-palette | **6.2 +** | -| [**Fluent**](presets/fluent.md) | [fluent-light-theme()]({environment:sassApiUrl}/index.html#mixin-fluent-light-theme) | `$light-fluent-schema ` | $light-fluent-palette
$light-fluent-excel-palette
$light-fluent-word-palette | **8.2 +** | -| [**Fluent (dark)**](presets/fluent.md#fluent-dark-theme) | [fluent-dark-theme()]({environment:sassApiUrl}/index.html#mixin-fluent-dark-theme) | `$dark-fluent-schema ` | $dark-fluent-palette
$dark-fluent-excel-palette
$dark-fluent-word-palette | **8.2 +** | -| [**Bootstrap**](presets/bootstrap.md) | [bootstrap-light-theme()]({environment:sassApiUrl}/index.html#mixin-bootstrap-light-theme) | `$light-bootstrap-schema` | $light-bootstrap-palette | **9.0 +** | -| [**Bootstrap (dark)**](presets/bootstrap.md#bootstrap-dark-theme) | [bootstrap-dark-theme()]({environment:sassApiUrl}/index.html#mixin-bootstrap-dark-theme) | `$dark-bootstrap-schema ` | $dark-bootstrap-palette | **9.0 +** | -| [**Indigo**](presets/indigo.md) | [indigo-light-theme()]({environment:sassApiUrl}/index.html#mixin-indigo-light-theme) | `$light-indigo-schema` | $light-indigo-palette | **10.1 +** | -| [**Indigo (dark)**](presets/indigo.md#indigo-dark-theme) | [indigo-dark-theme()]({environment:sassApiUrl}/index.html#mixin-indigo-dark-theme) | `$dark-indigo-schema ` | $dark-indigo-palette | **10.1 +** | - -> [!NOTE] -> Note that all high-level theme mixins wrap the base `theme` mixin. - -All theme mixins can be used as a starting point to create your own theme. Let's create a new theme by using the `bootstrap-light-theme` mixin. - +*__Dark__* ```scss -// Import the theming module -@use "igniteui-angular/theming" as *; - -// IMPORTANT: Prior to Ignite UI for Angular version 13 use: -// @import '~igniteui-angular/lib/core/styles/themes/index'; - -$primary-color: #b71053; -$secondary-color: #6c757d; - -$my-color-palette: palette( - $primary: $primary-color, - $secondary: $secondary-color -); - -// IMPORTANT: Make sure you always includecore first! @include core(); -// Pass the color palette we generated to thebootstrap-theme mixin -@include bootstrap-light-theme($my-color-palette); +@include typography( + $font-family: $material-typeface, + $type-scale: $material-type-scale +); +@include theme( + $schema: $dark-material-schema, + $palette: $dark-material-palette, +); ``` -## Browser Support -
- -Prior to Ignite UI for Angular 13, the value of `$igx-legacy-support` is quite important as it determines how component themes work. When its value is set to `true`, individual component style rules will have their values set at build time to the hard-coded values defined in their theme. If you set the value of `$igx-legacy-support` to `false`, however, style rules will look for values from CSS variables defined at the `:root` scope, or the nearest block scope. - -The general rule of thumb regarding what the value of `$legacy-support` should be dictated by whether you will be including support for Internet Explorer 11 or not. If you want to include support for IE11 set the `$legacy-support` value to `true`, otherwise setting its value to `false` (default) will force CSS variables for theming. Support for IE11 and older browsers was removed in Ignite UI for Angular 13. - -## API Overview -* [Global Theme]({environment:sassApiUrl}/index.html#mixin-theme) -* [Light Theme]({environment:sassApiUrl}/index.html#mixin-light-theme) -* [Dark Theme]({environment:sassApiUrl}/index.html#mixin-dark-theme) -* [Palette]({environment:sassApiUrl}/index.html#function-igx-palette) - -
## Additional Resources
diff --git a/en/components/themes/sass/presets/bootstrap.md b/en/components/themes/sass/presets/bootstrap.md index 4630cd0a63..39e38c1278 100644 --- a/en/components/themes/sass/presets/bootstrap.md +++ b/en/components/themes/sass/presets/bootstrap.md @@ -1,6 +1,6 @@ # Switching from Material to Bootstrap Theme Since version `9.0` our components include a new theme inspired by [Bootstrap 4](https://getbootstrap.com/) and [ng-bootstrap](https://ng-bootstrap.github.io/#/home). -In order to switch from `Material` to `Bootstrap`, you can use one of the built-in mixins. +In order to switch from `Material` to `Bootstrap`, you can use the [theme]({environment:sassApiUrl}/index.html#mixin-theme) build-in mixin. ## Bootstrap Light Theme ```scss @@ -9,7 +9,7 @@ In order to switch from `Material` to `Bootstrap`, you can use one of the built- // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); -@include bootstrap-light-theme($light-bootstrap-palette); +@include theme($palette: $light-bootstrap-palette, $schema: $light-bootstrap-schema); ``` ## Bootstrap Dark Theme @@ -19,9 +19,8 @@ In order to switch from `Material` to `Bootstrap`, you can use one of the built- // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); -@include bootstrap-dark-theme($dark-bootstrap-palette); +@include theme($palette: $dark-bootstrap-palette, $schema: $dark-bootstrap-schema); ``` ## API Overview -* [Light Theme]({environment:sassApiUrl}/index.html#mixin-bootstrap-light-theme) -* [Dark Theme]({environment:sassApiUrl}/index.html#mixin-bootstrap-dark-theme) +* [Global Theme]({environment:sassApiUrl}/index.html#mixin-theme) diff --git a/en/components/themes/sass/presets/fluent.md b/en/components/themes/sass/presets/fluent.md index f5bd6c70e4..8e7673b090 100644 --- a/en/components/themes/sass/presets/fluent.md +++ b/en/components/themes/sass/presets/fluent.md @@ -1,9 +1,9 @@ # Switching from Material to Fluent Theme Since version `8.2` our components include a new theme inspired by the [`Microsoft Fluent Design System`](https://www.microsoft.com/design/fluent/) -In order to switch from `Material` to `Fluent`, you can use one of the build-in mixins. +In order to switch from `Material` to `Fluent`, you can use the [theme]({environment:sassApiUrl}/index.html#mixin-theme) build-in mixin. -We support Word and Excel palettes. To use them just pass one of the two maps `$light-fluent-excel-palette` or `$light-fluent-word-palette` to the theme mixin: +We also support Word and Excel palettes. To use them just pass one of the two *__light__* maps `$light-fluent-excel-palette`, `$light-fluent-word-palette` or one of the two *__dark__* maps `dark-fluent-excel-palette`, `$light-fluent-word-palette` to the `theme` mixin: ## Fluent Light Theme ```scss @@ -12,7 +12,7 @@ We support Word and Excel palettes. To use them just pass one of the two maps `$ // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); -@include fluent-light-theme($light-fluent-excel-palette); +@include theme($palette: $light-fluent-palette, $schema: $light-fluent-schema); ``` ## Fluent Dark Theme @@ -22,9 +22,8 @@ We support Word and Excel palettes. To use them just pass one of the two maps `$ // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); -@include fluent-dark-theme($dark-fluent-excel-palette); +@include theme($palette: $dark-fluent-palette, $schema: $dark-fluent-schema); ``` ## API Overview -* [Light Theme]({environment:sassApiUrl}/index.html#mixin-fluent-light-theme) -* [Dark Theme]({environment:sassApiUrl}/index.html#mixin-fluent-dark-theme) +* [Global Theme]({environment:sassApiUrl}/index.html#mixin-theme) diff --git a/en/components/themes/sass/presets/indigo.md b/en/components/themes/sass/presets/indigo.md index fc88ae3f5d..541c5f4748 100644 --- a/en/components/themes/sass/presets/indigo.md +++ b/en/components/themes/sass/presets/indigo.md @@ -1,13 +1,13 @@ # Switching from Material to Indigo Theme Since version `10.1` our components include a new theme inspired by our own design language. -In order to switch from `Material` to `Indigo`, you can use one of the built-in mixins. +In order to switch from `Material` to `Indigo`, you can use the [theme]({environment:sassApiUrl}/index.html#mixin-theme) build-in mixin. ## Indigo Light Theme ```scss @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); -@include indigo-light-theme($light-indigo-palette); +@include theme($palette: $light-indigo-palette, $schema: $light-indigo-schema); ``` ## Indigo Dark Theme @@ -17,9 +17,8 @@ In order to switch from `Material` to `Indigo`, you can use one of the built-in // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); -@include indigo-dark-theme($dark-indigo-palette); +@include theme($palette: $dark-indigo-palette, $schema: $dark-indigo-schema); ``` ## API Overview -* [Light Theme]({environment:sassApiUrl}/index.html#mixin-indigo-light-theme) -* [Dark Theme]({environment:sassApiUrl}/index.html#mixin-indigo-dark-theme) +* [Global Theme]({environment:sassApiUrl}/index.html#mixin-theme) diff --git a/en/components/themes/sass/presets/material.md b/en/components/themes/sass/presets/material.md index e913f03c73..0ac61f6166 100644 --- a/en/components/themes/sass/presets/material.md +++ b/en/components/themes/sass/presets/material.md @@ -1,5 +1,5 @@ # Default Theme -The Material theme is the default theme in Ignite UI for Angular. To use it include the `theme` mixins after `core`. +The *__light__* version of the Material theme is the default theme in Ignite UI for Angular. To use it you need to include the `theme` mixin after the `core` mixin. ```scss @use "igniteui-angular/theming" as *; @@ -7,17 +7,7 @@ The Material theme is the default theme in Ignite UI for Angular. To use it incl // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); -@include theme($light-material-palette); -``` - -## Material Light Theme -```scss -@use "igniteui-angular/theming" as *; - -// IMPORTANT: Prior to Ignite UI for Angular version 13 use: -// @import '~igniteui-angular/lib/core/styles/themes/index'; -@include core(); -@include light-theme($light-material-palette); +@include theme($palette: $light-material-palette, $schema: $light-material-schema); ``` ## Material Dark Theme @@ -27,11 +17,10 @@ The Material theme is the default theme in Ignite UI for Angular. To use it incl // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); -@include dark-theme($dark-material-palette); +@include theme($palette: $dark-material-palette, $schema: $dark-material-schema); ``` -Both `light-theme` and `dark-theme` mixins includes the `theme` mixin. -We create those mixins just for your convenience, otherwise, if you want to use the `theme` but with a dark palette and dark schema you have to manually do the following: +If you want to use only the dark schema, but with your own palette you have to manually do the following: ```scss @use "igniteui-angular/theming" as *; @@ -42,15 +31,17 @@ We create those mixins just for your convenience, otherwise, if you want to use $primary-color: #2ab759; $secondary-color: #f96a88; +$surface-color: #303030; $my-color-palette: palette( // IMPORTANT, the primary and secondary colors are required $primary: $primary-color, $secondary: $secondary-color, + $surface: $surface-color, // The $gray will ensure that all the black text, borders, etc will // become a shade of white in order to be visible against a dark background $gray: #fff - // Since all individual components use the $default-palette by default, if you don't specify the rest of the colors like $info and $error they will use their default values from the $default-palette + // Since all individual components use the $default-palette by default, if you dont specify the rest of the colors like $info and $error they will use their default values from the $default-palette ); @include theme($my-color-palette, $schema: $dark-schema); @@ -58,5 +49,4 @@ $my-color-palette: palette( ## API Overview * [Global Theme]({environment:sassApiUrl}/index.html#mixin-theme) -* [Light Theme]({environment:sassApiUrl}/index.html#mixin-light-theme) -* [Dark Theme]({environment:sassApiUrl}/index.html#mixin-dark-theme) + diff --git a/en/components/themes/sass/roundness.md b/en/components/themes/sass/roundness.md index 647db75511..42aec89f63 100644 --- a/en/components/themes/sass/roundness.md +++ b/en/components/themes/sass/roundness.md @@ -9,7 +9,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
## Overview -Border radius is defined in the theme schema of the component (see the example below). The border radius for any component defined in this manner can then be controlled via the `$roundness` parameter of the [theme]({environment:sassApiUrl}/index.html#mixin-theme) mixin or a single CSS variable called `--ig-radius-factor`. +Border radius is defined in the [theme schema](https://github.com/IgniteUI/igniteui-theming/blob/18f878033898e1b6a3bb0ed28993e9a4037d1a80/sass/themes/schemas/components/light/_toast.scss#L44) of the component (see the example below). The border radius for any component defined in this manner can then be controlled via the `$roundness` parameter of the [theme]({environment:sassApiUrl}/index.html#mixin-theme) mixin or a single CSS variable called `--ig-radius-factor`. ```scss $light-toast: ( @@ -36,25 +36,28 @@ If you want the toast to still be affected by the `$roundness` or the `--ig-radi ```scss // Change the default, min and max values, // while preserving customization via $roundness or --ig-radius-factor. -$toast-theme: ( - ..., - border-radus: border-radius(rem(4px), rem(4px), rem(16px)) -); - -@include css-vars($toast-theme); +igx-toast { + --border-radius: #{border-radius(rem(4px), rem(4px), rem(16px))}; +} ``` If you want the border-radius to be a constant value, unaffected by changes of `--ig-radius-factor`, just pass it directly to the border-radius parameter. ```scss // Will be unaffected by changes to $roundess or --ig-radius-factor. -$toast-theme: ( - ..., - border-radus: rem(4px) -); +igx-toast { + --border-radius: rem(4px); +} +``` -@include css-vars($toast-theme); +We can also use the `border-radius` mixin to directly assign the border-radius property to elements. + +```scss +button { + @include border-radius(rem(4px), rem(4px), rem(16px)); +} ``` +Now the `border-radius` on the button will be affected by the `$roundness` and `--ig-radius-factor` variables.
diff --git a/en/components/themes/sass/typography.md b/en/components/themes/sass/typography.md index 10e2b97e2b..e1fd3e30ce 100644 --- a/en/components/themes/sass/typography.md +++ b/en/components/themes/sass/typography.md @@ -100,7 +100,7 @@ It currently accepts 2 arguments: - `$font-family` - The global font family to be used by the application. - `$type-scale` - The default type scale to be used by the application. -To use the typography styles, include the `typography` mixin anywhere after the `core` mixin and before the `theme` mixin. Let's take advantage of the type scale `$my-type-scale` we defined above and make it the default type scale. +To use the typography styles, include the `typography` mixin anywhere after the `core`. Let's take advantage of the type scale `$my-type-scale` we defined above and make it the default type scale. ```scss @include typography( @@ -170,6 +170,49 @@ $card-categories: ( We no longer include the `typography` mixin by passing it the `$my-type-scale` scale with our modification to the `h6` category. Now all we do is pass the custom h6 style we created to the `type-style-vars` mixin. +Also with the `card-typography` mixin we can change all of the elements type scales with a different ones. If we set `title: 'h1'` in the `$card-categories` map, and then include it with the `card-typography` mixin, the card will now use `h1` isntead of the default `h6` for it's title element. + +```scss +// You can specify which categories from the type sale the card uses +$card-categories: ( + title: 'h1', + title-small: 'h3', + subtitle: 'subtitle-1', + content: 'body-1', +); + +.my-cool-card { + @include card-typography($card-categories); +} +``` + +## Units Converting + +We also have three typography function for converting property units. +With the functions we can convert `px` units to `em` and `rem` and also `em` and `rem` units to `px`. +All we need to do is to call one of the three functions and pass the number that we want to convert. + +### To 'px' +```scss + .my-component { + margin: px(3.23rem); + } +``` + +### To 'rem' +```scss + .my-component { + margin: rem(10px) rem(5px); + } +``` + +### To 'em' +```scss + .my-component { + margin: em(10px) em(5px); + } +``` + ## CSS Classes In addition to adding text styles for all components based on type scale categories, we also style the default h1-h6 and p elements. This allows us to separate semantics from styling. So for instance, even though the `h1` tag has some default styling that we provide when using `typography`, you can modify it to look like an `h3` by giving it a class of `ig-typography__h3`. From 44cd38e678c056d28926fc55da3b2953fcccb079 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Thu, 12 Dec 2024 17:19:44 +0200 Subject: [PATCH 12/25] refactor(themes): updating docs --- en/components/themes/sass/component-themes.md | 4 +--- en/components/themes/sass/roundness.md | 15 ++++++++++++--- en/components/themes/sass/typography.md | 18 ++---------------- 3 files changed, 15 insertions(+), 22 deletions(-) diff --git a/en/components/themes/sass/component-themes.md b/en/components/themes/sass/component-themes.md index 7321bc2d97..13c7c60a1d 100644 --- a/en/components/themes/sass/component-themes.md +++ b/en/components/themes/sass/component-themes.md @@ -118,7 +118,7 @@ What exactly does `Emulated` View Encapsulation mean, anyway? This type of View @use "igniteui-angular/theming" as *; $avatar-royalblue-theme: avatar-theme( - $initials-background: royalblue, + $icon-color: royalblue, ); :host ::ng-deep { @@ -178,8 +178,6 @@ The above instance could also be achieved without using any Sass. All we need to
- - ## API Overview
diff --git a/en/components/themes/sass/roundness.md b/en/components/themes/sass/roundness.md index 42aec89f63..672ee3946b 100644 --- a/en/components/themes/sass/roundness.md +++ b/en/components/themes/sass/roundness.md @@ -12,9 +12,18 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI Border radius is defined in the [theme schema](https://github.com/IgniteUI/igniteui-theming/blob/18f878033898e1b6a3bb0ed28993e9a4037d1a80/sass/themes/schemas/components/light/_toast.scss#L44) of the component (see the example below). The border radius for any component defined in this manner can then be controlled via the `$roundness` parameter of the [theme]({environment:sassApiUrl}/index.html#mixin-theme) mixin or a single CSS variable called `--ig-radius-factor`. ```scss -$light-toast: ( - ..., - border-radius: (rem(26px), rem(0), rem(26px)), +$light-toast: extend( + $default-elevation-toast, + ( + ..., + border-radius: ( + border-radius: ( + rem(26px), + rem(0), + rem(26px), + ), + ), + ) ); ``` diff --git a/en/components/themes/sass/typography.md b/en/components/themes/sass/typography.md index e1fd3e30ce..a76e0cd831 100644 --- a/en/components/themes/sass/typography.md +++ b/en/components/themes/sass/typography.md @@ -154,7 +154,7 @@ $my-h6: type-style($font-size: 12px); // You can specify which categories from the type sale the card uses $card-categories: ( title: 'h6', - title-small: 'subtitle-2', + title-small: 'subtitle-1', subtitle: 'subtitle-2', content: 'body-2', ); @@ -170,21 +170,7 @@ $card-categories: ( We no longer include the `typography` mixin by passing it the `$my-type-scale` scale with our modification to the `h6` category. Now all we do is pass the custom h6 style we created to the `type-style-vars` mixin. -Also with the `card-typography` mixin we can change all of the elements type scales with a different ones. If we set `title: 'h1'` in the `$card-categories` map, and then include it with the `card-typography` mixin, the card will now use `h1` isntead of the default `h6` for it's title element. - -```scss -// You can specify which categories from the type sale the card uses -$card-categories: ( - title: 'h1', - title-small: 'h3', - subtitle: 'subtitle-1', - content: 'body-1', -); - -.my-cool-card { - @include card-typography($card-categories); -} -``` +Also with the `card-typography` mixin we can change all of the elements type scales with a different ones. In the exmaple above, we set the `title-small` key in the `$card-categories` map to have type scale value of `subtitle-1`, which will result in making the small title in our card component a little bit bigger. This is because by default the card component is using type scale `subtitle-2` which is smaller in font size than the `subtitle-1` type scale which we just set with the `card-typography` mixin. ## Units Converting From 499633c23c652737af7fa24cbf40e3bbf8653e26 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Thu, 12 Dec 2024 17:48:03 +0200 Subject: [PATCH 13/25] refactor(themes): updating docs --- en/components/themes/sass/global-themes.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/en/components/themes/sass/global-themes.md b/en/components/themes/sass/global-themes.md index c1b32b7959..a3c67535fe 100644 --- a/en/components/themes/sass/global-themes.md +++ b/en/components/themes/sass/global-themes.md @@ -126,6 +126,20 @@ To use any of the versions, you would simply need to pass it to our [theme]({env $palette: $dark-material-palette, ); ``` +### Available Themes +Ignite UI for Angular gives you the option to pick from a set of predefined themes. +The table below shows all the built-in themes that you can use right away. + +| Theme | Schema | Color Palette | +| ----------------------------------------------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- | +| [**Material Light**](presets/material.md#default-theme) | `$light-material-schema` | $light-material-palette | +| [**Material Dark**](presets/material.md#material-dark-theme) | `$dark-material-schema` | $dark-material-palette | +| [**Fluent Light**](presets/fluent.md) | `$light-fluent-schema` | $light-fluent-palette
$light-fluent-excel-palette
$light-fluent-word-palette | +| [**Fluent Dark**](presets/fluent.md#fluent-dark-theme) | `$dark-fluent-schema` | $dark-fluent-palette
$dark-fluent-excel-palette
$dark-fluent-word-palette | +| [**Bootstrap Light**](presets/bootstrap.md) | `$light-bootstrap-schema` | $light-bootstrap-palette | +| [**Bootstrap Dark**](presets/bootstrap.md#bootstrap-dark-theme) | `$dark-bootstrap-schema ` | $dark-bootstrap-palette | +| [**Indigo Light**](presets/indigo.md) | `$light-indigo-schema` | $light-indigo-palette | +| [**Indigo Dark**](presets/indigo.md#indigo-dark-theme) | `$dark-indigo-schema ` | $dark-indigo-palette | ## Additional Resources From 0a376fc5c30438545f64f28a4bf5001db8636102 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Thu, 12 Dec 2024 17:57:08 +0200 Subject: [PATCH 14/25] refactor(themes): updating docs --- en/components/themes/sass/presets/bootstrap.md | 5 +++++ en/components/themes/sass/presets/fluent.md | 5 +++++ en/components/themes/sass/presets/indigo.md | 10 +++++++++- en/components/themes/sass/presets/material.md | 5 +++++ 4 files changed, 24 insertions(+), 1 deletion(-) diff --git a/en/components/themes/sass/presets/bootstrap.md b/en/components/themes/sass/presets/bootstrap.md index 39e38c1278..83574539e2 100644 --- a/en/components/themes/sass/presets/bootstrap.md +++ b/en/components/themes/sass/presets/bootstrap.md @@ -10,6 +10,9 @@ In order to switch from `Material` to `Bootstrap`, you can use the [theme]({envi // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); @include theme($palette: $light-bootstrap-palette, $schema: $light-bootstrap-schema); + +// We can also include the Indigo font and font scaling +@include typography($font-family: $bootstrap-typeface, $type-scale: $bootstrap-type-scale); ``` ## Bootstrap Dark Theme @@ -20,6 +23,8 @@ In order to switch from `Material` to `Bootstrap`, you can use the [theme]({envi // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); @include theme($palette: $dark-bootstrap-palette, $schema: $dark-bootstrap-schema); + +@include typography($font-family: $bootstrap-typeface, $type-scale: $bootstrap-type-scale); ``` ## API Overview diff --git a/en/components/themes/sass/presets/fluent.md b/en/components/themes/sass/presets/fluent.md index 8e7673b090..5b225623eb 100644 --- a/en/components/themes/sass/presets/fluent.md +++ b/en/components/themes/sass/presets/fluent.md @@ -13,6 +13,9 @@ We also support Word and Excel palettes. To use them just pass one of the two *_ // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); @include theme($palette: $light-fluent-palette, $schema: $light-fluent-schema); + +// We can also include the Indigo font and font scaling +@include typography($font-family: $fluent-typeface, $type-scale: $fluent-type-scale); ``` ## Fluent Dark Theme @@ -23,6 +26,8 @@ We also support Word and Excel palettes. To use them just pass one of the two *_ // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); @include theme($palette: $dark-fluent-palette, $schema: $dark-fluent-schema); + +@include typography($font-family: $fluent-typeface, $type-scale: $fluent-type-scale); ``` ## API Overview diff --git a/en/components/themes/sass/presets/indigo.md b/en/components/themes/sass/presets/indigo.md index 541c5f4748..990b55e376 100644 --- a/en/components/themes/sass/presets/indigo.md +++ b/en/components/themes/sass/presets/indigo.md @@ -5,9 +5,15 @@ In order to switch from `Material` to `Indigo`, you can use the [theme]({environ ## Indigo Light Theme ```scss -@import '~igniteui-angular/lib/core/styles/themes/index'; +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); @include theme($palette: $light-indigo-palette, $schema: $light-indigo-schema); + +// We can also include the Indigo font and font scaling +@include typography($font-family: $indigo-typeface, $type-scale: $indigo-type-scale); ``` ## Indigo Dark Theme @@ -18,6 +24,8 @@ In order to switch from `Material` to `Indigo`, you can use the [theme]({environ // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); @include theme($palette: $dark-indigo-palette, $schema: $dark-indigo-schema); + +@include typography($font-family: $indigo-typeface, $type-scale: $indigo-type-scale); ``` ## API Overview diff --git a/en/components/themes/sass/presets/material.md b/en/components/themes/sass/presets/material.md index 0ac61f6166..a385593263 100644 --- a/en/components/themes/sass/presets/material.md +++ b/en/components/themes/sass/presets/material.md @@ -8,6 +8,9 @@ The *__light__* version of the Material theme is the default theme in Ignite UI // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); @include theme($palette: $light-material-palette, $schema: $light-material-schema); + +// We can also include the Material font and font scaling +@include typography($font-family: $material-typeface, $type-scale: $material-type-scale); ``` ## Material Dark Theme @@ -18,6 +21,8 @@ The *__light__* version of the Material theme is the default theme in Ignite UI // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); @include theme($palette: $dark-material-palette, $schema: $dark-material-schema); + +@include typography($font-family: $material-typeface, $type-scale: $material-type-scale); ``` If you want to use only the dark schema, but with your own palette you have to manually do the following: From 93c307c1b9cf87564410b63e5712518c9e276990 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Tue, 17 Dec 2024 17:34:56 +0200 Subject: [PATCH 15/25] refactor(themes): updating docs --- .DS_Store | Bin 0 -> 6148 bytes en/.DS_Store | Bin 0 -> 8196 bytes en/components/.DS_Store | Bin 0 -> 18436 bytes en/components/themes.md | 26 +-- en/components/themes/.DS_Store | Bin 0 -> 6148 bytes en/components/themes/index.md | 14 +- en/components/themes/palettes.md | 133 +++++++--------- en/components/themes/sass/.DS_Store | Bin 0 -> 6148 bytes en/components/themes/sass/configuration.md | 13 +- en/components/themes/sass/palettes.md | 148 +++++++++--------- .../themes/sass/presets/bootstrap.md | 5 + en/components/themes/sass/presets/fluent.md | 5 + en/components/themes/sass/presets/indigo.md | 10 +- en/components/themes/sass/presets/material.md | 5 + en/components/themes/sass/schemas.md | 68 ++++++-- 15 files changed, 226 insertions(+), 201 deletions(-) create mode 100644 .DS_Store create mode 100644 en/.DS_Store create mode 100644 en/components/.DS_Store create mode 100644 en/components/themes/.DS_Store create mode 100644 en/components/themes/sass/.DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..834e34b1d0cd1309c4b197e3153efedb2e23a5f2 GIT binary patch literal 6148 zcmeHK%Zd|06us4nPRB%yFoFm|gWF6@bY>9T#7st*g_~(#pc1>&nb@YMDs(3X41w&` zU+@>)`ycu*uJqJnFzFt*B2pJ_oqF6;U3I8O7ZI`UENT&fE1#?VI z4aiga(9up7X z&7aDUBXSVKb1`4eiwWo1#PstuoFs8JZMD8Lr&PXham(FutL`iRjhOq>U^>gXLHa_L z9t)9#XZav}8V~3F`u2g~(;()(}hVjhWkSIl^nDXy;@+=^T2*KaHqyZ81R zUi)tQ&a&Yx+U>no!`t86T`nu`wOhCEANR+}DHk8roQUB(Q+CWCmQk$?dHItdIiA6e!Ieg|z?h~2HIsV#vReT+;3~ipw06PX(8c_qYKLSby Ln^*<@ssg_NLkQBW literal 0 HcmV?d00001 diff --git a/en/.DS_Store b/en/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..3cd0d2d66c680a6ae5a0668d55310271b17d15d6 GIT binary patch literal 8196 zcmeHMK~EDw6n;}cwt%uIC=g9H_F@7-sz6MPp%#o1V?as}B3gI1LtWX7z{8GnLaJ?Wd7t+WLa!@+2rNoKycGw++(`Pw(zw*>%_T`!~o`T@Ye zD$wl2W}hO)Mcq>paZeW_K|TPT@ww~x+}Y!+JG25?0j+>mKr5gX_&XH9XSOKD0ndFk zs#~pqR^Y!>K%5U2R)Luqs|w}OfsIT75L>ZZ7PK)BkQ^(Tnq zz1%}y$whXw9%k*}uDDv@+;?iW?JRnIwTrZ4OaTifaM_~@`TF+R4llQjBL=P%Fa*ZdOWPvxG0#77Ps zRoB1TXK3xKi05v^yCWZJyZd6Awf!YKI=hY@>o$9ipXllB>FYars=sewaPV~AJmJ{x zS}_p!J;i+t)!EB=vpaMH?)!5*^dgV5<&_XspNVK`hOKg3aRU{fEsLRWkp>~+9?sIT z9RxNj((Kkf-*%`!%d$L*cu9DQ*<8-%0xD)&^3WE0NlkuJlBO~@YsNWcn2=HiKq~X1 zEN!E=))gaJV4TrpGL@N&dkh%DukI~agf(~!&*3G!hIjBDKEqe|PTI);IZKAf7`Z|w z$qjOw%oCS9Bp!LB_=(yFex`9H65{o~ANWQtU_NI>92eXUC}4oNunL$HPIWFale+hTrJjGS%eW0TrCtL2q%yFx1Y2Vk1W$N3ZIR zBb-7%|4{^8v;v1vpha=|MgD*7;P?NBm|0V_0$PE8MFG+}otw_$-PV5hG~c+$wJod< uu!ly$dNw*?i~0NxWSP>fjgIl@9Q^X^&9n*cb|8Mt`p3^?YeG+mGrQlkFcH=?)w>LqUBkJOYGxFUT{^@^A7750!@2a^9OwGnd55!YxH0BDz}$ms;3#=gTs>(iEip=-9PiiDaeL|Y!e2ePD~V+ANhPyz;ZYLlxYlulqqHZN;!mN0 zLIZ{d-o<-msZ2-i*s5ih{t?ut&fS&KW2t_-sDpb_5g(v-?xS9A;QeQ)F*~?x<8RyI zx%_^P=QZ#o#i`3x$L>88&;85l*tr@;QqtHRLDm4Z_yOk4N<31B2h_JgeTo^6LDv9f zg4d^bub0zJe8H(J1kl0pJY`I^-w!WLhKGP{^dg47Ms>Q;Zz9v{=zsh^#A+8=P zhJM7dHZ{950CuSYpf ze1+WGI0x~WilsH*+cWrb)dT1_0nZ^g8!HzaXnwEF;Floov)jsjYGiUFE;P3{XL2K- zNlf*g_*9||rO;kc9}!e(Nq6T+dJ0~L@KkzI#P0-in&)m%A)OWwW`?VJj>d$v~-+uI<{?6NPy?9Zryt?z%Z~pMf zaqpy`{LW{_rL?$o*K?Wj?{Ob!;B0@`?Gec}Gkj0iY zZ3VQ9g2c3iEuvA6CsGn1@gaQi#PxDJ8j+|+b1eywaVW^Q_!EhmVofNR335#XYfgek zO>+xlnE|tA$aW#-qTH*Qr;hLsNHcj6o0`|1D6b=|aEX*kI3JxYacpK|7 zB`^*K^oXT26<5J*%hat{MvuOU(OuZ`K&iY>KuGXm2W7zvt6;=ktMI27F#od?vXayL7ArB3&nuetf-{tVaa7=4QOf@%cyz`UHLjXdnU@5wOCk7+yFJT z&F883DzUvpEUoEwE=QA&*&TC6dKu#nJL)iIXwLP8IiJI7?0YdjCAgaW1#O!D7p}~I(&w@zFy?3pZ_JdC%{tS& zukQIBgxW<+zhSJ>a&}%)PFf$>`Vs_dDPMj`DbsyPQ+tAREpKavycpu+^vp5X1CK{A z?0QSTP{`gE`Ru9s$meTGe@_oF=D>X~;89C?5TD$un3Enr-)9yz5gJh6FsLV9Y{+L! z3^-KNe3#YSQ&T3e6i}2AKN;(N?8{a5#6&RqemEMdV^m?zeXQaMb0X&D^n6AwbM>@; z!27i+-rg@fC%>CTxiS9D87h#`N6ICG#803aLHz2qG&LlxS|Bla=Zx zo&A%++~>Jka$+vRe(G%WXs$a~;QC9VAFHe2M^HoIOfYY5RPQKdH*yNKL z-iijEh|+-LR~F(p@i2Ou{x+Xk>H>TC@}E_l{?bA+eI~~5#~EK42N}VA*NAtfT^Yp# zS#Mlf7WXh#6`5U3If8z@rfKwBmeFg<^k!Iz8AGs&Y4mH0WbuRhIHmHb5nlTett|dT zzn=Z=DJ^OKp~Ve;f_TkuI>KhZMj?K@cC*ZjwH)Juui+SdA`zBxJec*HQ?rgsVLyxC zx-rhql_XxG*E5aSxFnBNb^^Fx%$3CmzjA-3cf@6d9f0|=;2nXit7vc}-zu@1W39@1 zdxov(AAzJ>Gi^1S7rY_hHSN<{Ls>4s&JO4L5hVL8YTlgT6@i@D+L@Na%#|@}u6F1z zfuyyZb}SzQ`U9F3(9i<8-=q<{!MN>g9BjsCHTe93?={e`&FID`y7C8w$(rKv1XQ_R zU-(U;rX->~lKqjAenO>yX5!9estDeK#U?aj0FfZzz@DtF%DrpU})^V9Z!7^RcpP6*T*P{NHpTaOMUlBi_RQiu&Dnh|ECHo{7*^!|35)9cEtby literal 0 HcmV?d00001 diff --git a/en/components/themes.md b/en/components/themes.md index 956f99ee35..5053bde5a7 100644 --- a/en/components/themes.md +++ b/en/components/themes.md @@ -31,9 +31,9 @@ The last concept revolves around typography. Although we have a default typeface ### Generating Color Palettes -Our theming library is based on Sass. If you used the **Ignite UI CLI** to bootstrap your app, you can specify the style in the **angular-cli.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. +Our theming library is based on Sass. If you used the **Ignite UI CLI** 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. -Our palettes accept arguments for `primary`, `secondary`, `info`, `success`, `warn`, and `error` colors. The primary color is the one that will be the more prominent color throughout your application. The secondary color is the one used on elements that are actionable, such as buttons, switches, sliders, etc. The only required arguments we require, though, are the ones for `primary` and `secondary` colors. We default the ones for `info`, `success`, `warn`, and `error` to a predefined set of our choosing. +Our palettes accept arguments for `primary`, `secondary`, `surface`, `info`, `success`, `warn`, and `error` colors. The primary color is the one that will be the more prominent color throughout your application. The secondary color is the one used on elements that are actionable, such as buttons, switches, sliders, etc. The surface color is used for the background color of the components. The only required arguments are the ones for `primary`, `secondary` and `surface` colors. We default the ones for `info`, `success`, `warn`, and `error` to a predefined set of our choosing. To get started with our first color palette, create an _scss_ file that would be the base file for your global theme. I will call mine _"my-app-theme.scss"_. @@ -45,17 +45,19 @@ To get started with our first color palette, create an _scss_ file that would be $company-color: #2ab759; // Some green shade I like $secondary-color: #f96a88; // Watermelon pink +$surface-color: #e5e5e5; // Light gray $my-color-palette: palette( $primary: $company-color, $secondary: $secondary-color, + $surface: $surface-color ); ``` -Now we have a palette, that contains exactly 74 colors! Whoa, wait, what? How did that happen? You provided 2 and got 74? Where did the other 72 colors come from? -Let's stop here to explain what just happened as it's quite important. When you provided `primary` and `secondary` colors, we took those and generated shades and accent colors for each one. Basically now in your palette you have 2 sub-palettes for `primary` and `secondary` colors. Each sub-palette contains 12 additional color variations based on the original color. 4 of the 12 colors are lighter shades of your original color, and 4 are darker. The remaining 4 colors are more exaggerated 'accent' versions of the original color. With the original color that makes for a total of 13 colors in each palette. +Now we have a palette, that contains exactly 216 colors! Whoa, wait, what? How did that happen? You provided 3 and got 216? Where did the other 213 colors come from? +Let's stop here to explain what just happened as it's quite important. When you provided `primary`, `secondary` and `surface` colors, we took those and generated shades and accent colors for each one. Basically now in your palette you have 3 sub-palettes for `primary`, `secondary` and `surface` colors. Each sub-palette contains 13 additional color variations based on the original color. 5 of the 13 colors are lighter shades of your original color, and 4 are darker. The remaining 4 colors are more exaggerated 'accent' versions of the original color. With the original color that makes for a total of 14 colors in each palette. -With so many colors in each sub-palette you may be wondering, how on Earth will I know which one is which, right? It's quite simple, really. Each of the colors in the sub-palette has a number. We assign the number `500` to the original color. The lighter shades start from `100` and range to `400`. The darker shades start from `600` and range to `900`. The accent colors have string names `A100`, `A200`, `A400`, and `A700`, respectively. Okay, but now that's only 26 out of 72. Don't worry, there's another sub-palette we give you. One that consists of gray 'colors', called `grays`. It's just like the other two color sub-palettes, but doesn't include any accent variations. Good, now we're up to 26 + 9 for a total of 35 colors. That is still a long way from 74. Where do the other 39 colors come from? Let's solve the final puzzle. Remember you can also have 4 additional colors for `info`, `success`, `warn` and `error`. So that leaves another 35 colors unaccounted for. Remember the count for the `primary`, `secondary`, and `grays` sub-palettes was exactly 35? The other 35 remaining colors are contrast text colors for each of the colors in the `primary`, `secondary`, and `grays` sub-palettes. +With so many colors in each sub-palette you may be wondering, how on Earth will I know which one is which, right? It's quite simple, really. Each of the colors in the sub-palette has a number. We assign the number `500` to the original color. The lighter shades start from `50` and range to `400`. The darker shades start from `600` and range to `900`. The accent colors have string names `A100`, `A200`, `A400`, and `A700`, respectively. Okay, but now that's only 42 out of 216. Don't worry, there's another sub-palette we give you. One that consists of gray 'colors', called `grays`. It's just like the other two color sub-palettes, but doesn't include any accent variations. Good, now we're up to 42 + 10 for a total of 52 colors. That is still a long way from 216. Where do the other 164 colors come from? Let's solve the final puzzle. Remember you can also have 4 additional colors for `info`, `success`, `warn` and `error`. So that leaves another 56 colors unaccounted for. Remember the count for the `primary`, `secondary`, `surface`, `info`, `success`, `warn`, `error` and `grays` sub-palettes was exactly is exactly 108, which is the half of the 216 colors. The remaining half of the colors are the contrast text colors for each color variant, they all have `-contrast` as a suffix in their variable name, and they are either black or white. Got it? Good! But how does one access any of the colors in the palette? @@ -63,12 +65,12 @@ Got it? Good! But how does one access any of the colors in the palette? #### Getting Sub-Palette Colors -We provide a function that is easy to remember and use `igx-color`. It takes three arguments - `palette`, `color`, and `variant`; +We provide a function that is easy to remember and use `color`. It takes three arguments - `palette`, `color`, and `variant`; ```scss -$my-primary-600: color($my-palette, "primary", 600); -$my-primary-A700: color($my-palette, "secondary", "A700"); -$my-warning-color: color($my-palette, "warn"); +$my-primary-600: color($my-color-palette, "primary", 600); +$my-primary-A700: color($my-color-palette, "secondary", "A700"); +$my-warning-color: color($my-color-palette, "warn"); // sample usage .my-awesome-class { @@ -102,7 +104,7 @@ $my-primary-800-text: contrast-color($my-palette, "primary", 600); If you've included the _"igniteui-angular.css"_ file in your application project, now is a good time to remove it. We are going to use our own _"my-app-theme.scss"_ file to generate our own theme. -Let's start from our very first example on this page. This time, though, we're going to be including two mixins `core` and `theme`; For now `core` doesn't accept any arguments. `theme`, however, does accept 2 - `$palette` and `$exclude`. For now, we'll only talk about the `$palette` argument. We'll take a deeper look at what `$exclude` does later on when we talk about individual component themes. +Let's start from our very first example on this page. This time, though, we're going to be including two mixins `core` and `theme`; For now `core` doesn't accept any arguments. `theme`, however, does accept a few - `$palette`, `$schema`, `$exclude`, `$roundness`, `$elevation`, `$elevations`. For now, we'll only talk about the `$palette` argument. > [!IMPORTANT] > Including `core` before `theme` is essential. The `core` mixin provides all base definitions needed for `theme` to work. @@ -116,10 +118,12 @@ Let's start from our very first example on this page. This time, though, we're g $company-color: #2ab759; // Some green shade I like $secondary-color: #f96a88; // Watermelon pink +$surface-color: #e5e5e5; // Light gray $my-color-palette: palette( $primary: $company-color, $secondary: $secondary-color, + $surface: $surface-color ); // IMPORTANT: Make sure you always include core first! @@ -130,9 +134,7 @@ $my-color-palette: palette( That's it. Your application will now use the colors from your newly generated palette. -
-### Customizing Typography (WIP) In its current state, the defining custom typography is limited to changing the `font family` of the application. We'll be updating this functionality with subsequent releases. Our intent is to provide a robust way to customize the typography in your application. diff --git a/en/components/themes/.DS_Store b/en/components/themes/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..ae0c22e0c9007f2e22e25ffef3ea20d2a4fda5d3 GIT binary patch literal 6148 zcmeHKO>fgM7=GOamQq#f0VITkWQl7v8rUWzE}@JASAyUGs3c3YMPzZ+q${YZlsoWS zxbs8!FPz|cZ4a#{)r{P8}H{iL>IA`-)C8W8n}$cHm}H;`;FZf9S!maXAN zq5FubrkoU&RINq33a5Zm;D1wq*KU_GD&XgIdHwFu8Kut)b(|C`K@@KhPvCpMv?0ga zLXNebg8Pv+#eZ9g_t0mKz2SJdUvYOOu0vytg~wFmmw~aNcky|JO)p0$ohVkSLmtHDWBp3NOd6j3gQSatc zRn~D{W)n@w(+nYRU*~12W;K8CV=Rt5V=*z={ z{l%i~-@14I@r%)i;;d9(FnXB44y&ze@dCag^JnJg(WER?d4f8Q??Sy#&{EL}O`y$~ zPEp>VWs4b?-z[!WARNING] > Some components do not use colors from the palettes. In those instances, you will have to target the component CSS variables directly to modify their colors. diff --git a/en/components/themes/palettes.md b/en/components/themes/palettes.md index 06af9949b0..d2b00086ce 100644 --- a/en/components/themes/palettes.md +++ b/en/components/themes/palettes.md @@ -11,7 +11,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI ## Overview -Ignite UI for Angular exposes over 80 color variants as CSS variables for 8 base colors - `primary`, `secondary`, `gray`, `info`, `success`, `warn`, `error`, and `surface`. +Ignite UI for Angular exposes over 80 color variants as CSS variables for 8 base colors - `primary`, `secondary`, `surface`, `gray`, `info`, `success`, `warn`, `error`. The `primary`, `secondary`, and `gray` colors follow the [2014 Material Design Color Palette](https://material.io/design/color/the-color-system.html#tools-for-picking-colors). This means these colors include the following variants: @@ -39,104 +39,78 @@ The `primary`, `secondary`, and `gray` colors follow the [2014 Material Design C
-As the table above shows, the `gray` color doesn't include the `A100`, `A200`, `A400`, and `A700` variants, while the `primary` and `secondary` colors contain all 14 color variants. We include 5 additional colors that are not part of the 2014 Material Design Color Palette - `info`, `success`, `warn`, `error`, and `surface`. +As the table above shows, the `gray` color doesn't include the `A100`, `A200`, `A400`, and `A700` variants, while the `primary` and `secondary` colors contain all 14 color variants. We include 5 additional colors that are not part of the 2014 Material Design Color Palette - `info`, `success`, `warn`, `error` and `surface`. On top of the aforementioned colors, we also include **Level AAA** [WCAG](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) compliant `contrast` colors for each color variant. This means that you can safely use the corresponding `contrast` color variants as foreground colors for the base color variant. > [!NOTE] -> Contrast colors are generated at build-time by the Sass theming engine. Overriding the CSS variables will not update the corresponding contrast colors. +> Contrast colors are generated at build-time by the Sass theming engine based on the main variables color (primary, secondary, etc.). -Here's an excerpt of the `primary` color as declared in the Light Material Palette: +Here's an excerpt of the `primary` variable color as declared in the Light Material Palette: ```css :root { - --ig-primary-h: 204deg; - --ig-primary-s: 100%; - --ig-primary-l: 50%; - --ig-primary-a: 1; - --ig-primary-50: hsla( - var(--ig-primary-h), - calc(var(--ig-primary-s) * 1.23), - calc(var(--ig-primary-l) * 1.78), - var(--ig-primary-a) - ); - --ig-primary-100: hsla( - var(--ig-primary-h), - calc(var(--ig-primary-s) * 0.8), - calc(var(--ig-primary-l) * 1.66), - var(--ig-primary-a) - ); - --ig-primary-200: hsla( - var(--ig-primary-h), - calc(var(--ig-primary-s) * 0.64), - calc(var(--ig-primary-l) * 1.43), - var(--ig-primary-a) - ); - // ... - --ig-primary-50-contrast: black; - --ig-primary-100-contrast: black; - --ig-primary-200-contrast: black; - // ... + //... + --ig-primary-500: #09f; + --ig-primary-500-contrast: black; + --ig-primary-600: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.89)); + --ig-primary-600-contrast: black; + --ig-primary-700: hsl(from var(--ig-primary-500) h calc(s * 1.26) calc(l * 0.81)); + //... + --ig-secondary-400: hsl(from var(--ig-secondary-500) h calc(s * 0.875) calc(l * 1.08)); + --ig-secondary-400-contrast: black; + --ig-secondary-500: #df1b74; + --ig-secondary-500-contrast: white; + --ig-secondary-600: hsl(from var(--ig-secondary-500) h calc(s * 1.26) calc(l * 0.89)); + --ig-secondary-600-contrast: white; + //... } ``` -All primary colors variants are derived from 4 base variables - `--ig-primary-h`, `--ig-primary-s`, `--ig-primary-l`, and `--ig-primary-a`. Each one of these variables holds the [HSLA](https://drafts.csswg.org/css-color/#the-hsl-notation) parts for a single color. HSLA stands for `hue`, `saturation`, `lightness`, and `alpha`. It's another color scheme used to describe colors. We decided to use this approach as it allows us to modify all variants of the `primary`, `secondary` and other colors at runtime. +All primary color variants are derived from one base variable color variant - `--ig-primary-500`. The same goes for the other color variables `--ig-secondary-500`, `--ig-surface-500`, etc. The other variants are generated through the relative color function `hsl()` which takes the main variable color variant `500` and changes it's `staturation` and `lightness` according to the variable variant which is assigned on (`600`,`700`, etc.). We decided to use this approach as it allows us to modify all variants of the `primary`, `secondary`, `surface` and other colors at runtime. + +> [!WARNING] +> Because the Contrast colors are not generated at runtime like the rest, if we change the main color variant(`500`), the contrast color would not be updated. We would need to change it manually. ## Defining Palettes -If you wanted to change the color variants for a color from the palette, you can do so by overriding its HSLA values in your stylesheets. For instance, changing the primary colors is as easy as writing: +If you wanted to change the color variants for a color from the palette, you can do so by overriding its `500` color variant. For instance, changing the primary colors is as easy as writing: ```css -/* The HSLA representation of orange (#ffa500) */ -/* hsla(38.8,100%,50%, 1); */ :root { - --ig-primary-h: 38.8deg; - --ig-primary-s: 100%; - --ig-primary-l: 50%; - --ig-primary-a: 1; + --ig-primary-500: #09f; } ``` This will automatically update all the other primary variants. -You will notice that color variants for each color are monochromatic. This is because all color variants are generated from the HSLA variables. +You will notice that color variants for each color are monochromatic. This is because all color variants are generated with the relative color function `hsl()` ## Scoping We've seen that overriding colors in the palette is relatively easy. We can update the _global_ palette by scoping color variants to the `:root` selector in the `styles.css` file of our application: -Let's say your corporate primary color is `#9f349c` and you want to create primary variants for it. Here's how you would go about doing this. -First get the HEX representation of the color in the HSLA color space. In this case it's 302deg for hue, 51% for saturation, 41% for lightness and 1 for alpha. Having derived the HSLA values, all you need to do to update the primary palette to this color is replace the global h, s, and l values for the primary palette: +Let's say your corporate primary color is `#9f349c` and you want to create primary variants for it. All you need to do is to replace the `--ig-primary-500` variable with the desired color in any color value type - RGB, HEX, etc. ```css :root { - --ig-primary-h: 302deg; - --ig-primary-s: 51%; - --ig-primary-l: 41%; + --ig-primary-500: #9f349c; } ``` -This will not automatically calculate the contrast color for each primary color variant. There are many tools out there that will help you determine if a specific color has enough contrast when used in combination with another color. You can use the built-in contrast checker in Chrome when determining the contrast color you want to pick for each color variant. We provide a Sass function for generating color palettes at build-time. If you prefer that we generate all color variants and their contrast colors for you from your own colors, check out the [Palettes with Sass](./sass/palettes.md) section of the documentation. +This will automatically calculate each primary color variant and it's contrast color, thanks to the Sass function for generating color palettes at build-time that we provide. If you want to see more about it, you can check out the [Palettes with Sass](./sass/palettes.md) section of the documentation. Apart from having a single global palette, you can also create several palettes scoped to other CSS selectors. For example, we can have a blue and red palette scoped to class selectors: ```css /* styles.css */ -/* cornflowerblue hsl(218.5,79.2%,66.1%) */ .blue-theme { - --ig-primary-h: 218.5deg; - --ig-primary-s: 79.2%; - --ig-primary-l: 66.1%; - --ig-primary-a: 1; + --ig-primary-500: #0008ff; } -/* brick red hsl(351.7,57%,52.5%) */ .red-theme { - --ig-primary-h: 351.7deg; - --ig-primary-s: 57%; - --ig-primary-l: 52.5%; - --ig-primary-a: 1; + --ig-primary-500: #ff0400; } ``` @@ -152,7 +126,7 @@ Let's look at the material avatar component theme. It uses the _400_ variant of ```css igx-avatar { - --ig-gray-400: 146deg, 36%, 64%; + --ig-gray-400: #efefef; } ``` @@ -168,33 +142,26 @@ To make this a bit clearer, below is a list of some `gray` and `surface` color v *Material Light:* ```css :root { - /* surface is set to white, i.e. ligthness 100% */ - --ig-surface-h: 0deg; - --ig-surface-s: 0%; - --ig-surface-l: 100%; - --ig-surface-a: 1; - --ig-gray-h: 0deg; - - /* grays are based on black to contrast the surface color */ - --ig-gray-h: 0%; - --ig-gray-s: 0%; - --ig-gray-900: var(--ig-gray-h), var(--ig-gray-s), 13%; + //... + /* surface is set to light color*/ + --ig-surface-500: white; + //... + /* grays are based on dark gray to contrast the surface color */ + --ig-gray-500: hsl(0, 0%, 62%); + //... } ``` *Material Dark:* ```css :root { - /* surface is a dark shade of gray, i.e. lightness only at 13% */ - --ig-surface-h: 0deg; - --ig-surface-s: 0%; - --ig-surface-l: 13%; - --ig-surface-a: 1; - - /* grays are based on white to contrast the surface color */ - --ig-gray-h: 0deg; - --ig-gray-s: 0%; - --ig-gray-900: var(--ig-gray-h), var(--ig-gray-s), 98%; + //... + /* surface is set to dark color*/ + --ig-surface-500: #222; + //... + /* grays are based on light gray to contrast the surface color */ + --ig-gray-500: hsl(0, 0%, 74%); + //... } ``` @@ -203,7 +170,15 @@ Be mindful when changing the `gray` and `surface` color variants as they are use ## Other Colors So far we've covered the `primary`, `secondary`, `gray`, and `surface` color variants and how you can override them. There are four more colors - `info`, `success`, `warn`, and `error`. They are usually used to set the colors in different states. For example, the `igx-input-group` component uses these colors in its input validation states. -They can be changed as the first three variants. Just update their `h`, `s`, and `l` variables. +They can be changed as the other color variants, all we need to do it to set the `500` variant and all of the other varints will be generated. +```css +:root { + --ig-info-500: #1377d5; + --ig-success-500: #4eb862; + --ig-warn-500: #faa419; + --ig-error-500: #ff134a; +} +``` ## Additional Resources diff --git a/en/components/themes/sass/.DS_Store b/en/components/themes/sass/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..218afe85c5c18b211a7fea81dc1f6a2bf660efb0 GIT binary patch literal 6148 zcmeHK%Z}496uoW>O{Y|f1V{)8DH7WO-K4lb>AWrF)w{5TrSOs=X0l9Zu z647NEVYg3cs`h+@UNX9cbV?CgBYXwQdihl7#Z|p1;JWBZNMuFeLND0ze zj#oM|dskq(7%#!x12B`n&zyZL@Ey#UQ;4zOmc40ZT<~u~DLGOEjWXn=v#fk6u?fbLmvi3xX zB=}kOgQsz{7`j)E1<(ALM>9o;!w4=fp2a*Ai@uoiFjd@ve&95m#?ZaKTprvzYJ1(g z-8-wcx9oNgJ8kdi@L;uSI9G4pzW;dmCYf;Y9`68SI7O7nsLb03R0=Ab4Q4zMTq-PC zm!Ob9?8w#NN~=q2G<(#1jaNK zsHx0cF_@;K-7|hYgKLeNPRv|Bm>HRw8wyjSqkm7i6YFWTxmCa_u&F>*S6zAjKm7gu zf0JZuRspNPf29DcoeWO;cqMbTZoQm5Ydxe_NYbR=TBD*MGsm$i$fNigk}^E=WC7SS UxYmdknEeq@GT6*2@J|)^0eCC%JOBUy literal 0 HcmV?d00001 diff --git a/en/components/themes/sass/configuration.md b/en/components/themes/sass/configuration.md index fb77a6eb5e..d5bfe307ce 100644 --- a/en/components/themes/sass/configuration.md +++ b/en/components/themes/sass/configuration.md @@ -22,18 +22,15 @@ Here's a list of global Sass variables forwarded in the main theming module: The Ignite UI for Angular themes ship with custom scrollbar styles that allow you to change the width and/or the colors of all scrollbars in your application. To apply the included styles, make sure to set the `ig-scrollbar` class to an element that contains your root app component. -To customize the scrollbar further, you can create a new theme that extends the existing [`scrollbar-theme`]({environment:sassApiUrl}/index.html#function-scrollbar-theme) and accepts the `$schema`, `$thumb-background`, `$track-background` and the `$scrollbar-size` parameters. +To customize the scrollbar further, you can create a new scrollbar style with the [`scrollbar-theme`]({environment:sassApiUrl}/index.html#function-scrollbar-theme) function. The function accepts arguments for style changes on the scrollbar. We can customize the scrollbar size, color, border, min-height... and many more. ```scss // app.component.scss -$my-scrollbar-theme: scrollbar-theme($thumb-background: black, $track-background: gray); +//Here we set the scrollbar to have size of 16px, scrollbar thumb to be in color pink, and scrolblar track to be in color green +$my-scrollbar-theme: scrollbar-theme($sb-size: 16px, $sb-thumb-bg-color: pink, $sb-track-bg-color: green); -@include scrollbar($my-scrollbar-theme); -``` -The parameters can also be directly applied to the scrollbar function to prevent the creation of additional themes. -```scss -// app.component.scss -@include scrollbar(scrollbar-theme($scrollbar-size: 16px)); +//We use 'css-vars' mixin for generating the css variables with the new scrollbar values. +@include css-vars($my-scrollbar-theme); ```
diff --git a/en/components/themes/sass/palettes.md b/en/components/themes/sass/palettes.md index c7822e0a7a..a76d96233d 100644 --- a/en/components/themes/sass/palettes.md +++ b/en/components/themes/sass/palettes.md @@ -9,7 +9,8 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
## Overview -Palettes in the context of Ignite UI for Angular are declared as [Sass Maps](https://sass-lang.com/documentation/values/maps) with the keys of those map being the palette colors (`primary`, `secondary`, `gray`, etc.). Each color is in turn a map itself and has all color variants listed as keys. The values assigned to those color variants are the actual colors used throughout all component themes. All palette maps are generated programatically by the palette function. The function accepts arguments for `primary`, `secondary`, `gray`, `surface`, `info`, `success`, `warn`, and `error` colors. The `primary` color is usually your brand color. It is mostly used to style static elements, such as the `igx-navbar` component. The secondary color is the one used on elements that are actionable, such as buttons, switches, sliders, etc. The only required arguments are the ones for `primary` and `secondary` colors. The surface color is used to color the 'surface' of some components, such as cards, menus, date/time pickers, banners sheets, etc. We default the colors for `surface`, `gray`, `info`, `success`, `warn`, and `error` to a predefined set of our choosing. +Palettes in the context of Ignite UI for Angular are declared as [Sass Maps](https://sass-lang.com/documentation/values/maps) with the keys of those map being the palette colors (`primary`, `secondary`, `surface`, etc.). Each color is in turn a map itself and has all color variants listed as keys. The values assigned to those color variants are the actual colors used throughout all component themes. All palette maps are generated programatically by the palette function. The function accepts arguments for `primary`, `secondary`, `surface`, `gray`, `info`, `success`, `warn`, and `error` colors. The `primary` color is usually your brand color. It is mostly used to style static elements, such as the `igx-navbar` component. The `secondary` color is the one used on elements that are actionable, such as buttons, switches, sliders, etc. +The `surface` color is the one used for background color of some components, such as cards, menus, date/time pickers, banners sheets, etc.. The only required arguments are the ones for `primary`, `secondary` and `surface` colors. We default the colors for `surface`, `gray`, `info`, `success`, `warn`, and `error` to a predefined set of our choosing. To get started with your first color palette, create an _scss_ file that would be the base file for your global theme. I will call mine _"_variables.scss"_. @@ -19,11 +20,12 @@ To get started with your first color palette, create an _scss_ file that would b $melon-palette: palette( $primary: #2ab759, $secondary: #f96a88, + $surface: #e5e5e5 ); ``` >[!WARNING] -> The value you pass to `$primary`, `$secondary`, or any other color **must be of type color**. You cannot pass CSS variables as arguments as those can't be resolved at Sass build-time. +> The value you pass to `$primary`, `$secondary` and `surface` or any other color **must be of type color**. You cannot pass CSS variables as arguments as those can't be resolved at Sass build-time. We created a palette that contains variants for all colors in it, including automatically created text contrast colors for each variant. If you haven't checked [the documentation](../palettes.md) regarding palettes with CSS variables, go check it out now. It contains information about all the color variants of a palette. @@ -33,124 +35,116 @@ In case you want to manually create your palette, or create the palette generati ```scss $handmade-palette: ( - primary: ( - 50: to-hsl(#e6eff8), + 'primary': ( + 50: #e6eff8, '50-contrast': black, - 100: to-hsl(#bfd7f2), + 100: #bfd7f2, '100-contrast': black, - 200: to-hsl(#98bfec), + 200: #98bfec, '200-contrast': black, - 300: to-hsl(#85b5e9), + 300: #85b5e9, '300-contrast': white, - 400: to-hsl(#73a6e4), + 400: #73a6e4, '400-contrast': white, - 500: to-hsl(#6797de), + 500: #6797de, '500-contrast': white, - 600: to-hsl(#3681dd), + 600: #3681dd, '600-contrast': white, - 700: to-hsl(#357fda), + 700: #357fda, '700-contrast': white, - 800: to-hsl(#306dc8), + 800: #306dc8, '800-contrast': white, - 900: to-hsl(#284ea8), + 900: #284ea8, '900-contrast': white, - 'A100': to-hsl(#98bfec), + 'A100': #98bfec, 'A100-contrast': white, - 'A200': to-hsl(#73a6e4), + 'A200': #73a6e4, 'A200-contrast': white, - 'A400': to-hsl(#3681dd), + 'A400': #3681dd, 'A400-contrast': white, - 'A700': to-hsl(#284ea8), + 'A700': #284ea8, 'A700-contrast': white ), - secondary: ( - 50: to-hsl(#fef7e2), + 'secondary': ( + 50: #fef7e2, '50-contrast': black, - 100: to-hsl(#fdeab7), + 100: #fdeab7, '100-contrast': black, - 200: to-hsl(#fbdd89), + 200: #fbdd89, '200-contrast': black, - 300: to-hsl(#fad15c), + 300: #fad15c, '300-contrast': black, - 400: to-hsl(#f9c63f), + 400: #f9c63f, '400-contrast': black, - 500: to-hsl(#f7bd32), + 500: #f7bd32, '500-contrast': white, - 600: to-hsl(#f6b02d), + 600: #f6b02d, '600-contrast': white, - 700: to-hsl(#f49e2a), + 700: #f49e2a, '700-contrast': white, - 800: to-hsl(#f38e28), + 800: #f38e28, '800-contrast': white, - 900: to-hsl(#f38e28), + 900: #f38e28, '900-contrast': white, - 'A100': to-hsl(#fbdd89), + 'A100': #fbdd89, 'A100-contrast': black, - 'A200': to-hsl(#f9c63f), + 'A200': #f9c63f, 'A200-contrast': black, - 'A400': to-hsl(#f6b02d), + 'A400': #f6b02d, 'A400-contrast': white, - 'A700': to-hsl(#f38e28), + 'A700': #f38e28, 'A700-contrast': white ), - gray: ( - 50: to-hsl(#fff), + 'gray': ( + 50: #fff, '50-contrast': black, - 100: to-hsl(#fafafa), + 100: #fafafa, '100-contrast': black, - 200: to-hsl(#f5f5f5), + 200: #f5f5f5, '200-contrast': black, - 300: to-hsl(#f0f0f0), + 300: #f0f0f0, '300-contrast': black, - 400: to-hsl(#dedede), + 400: #dedede, '400-contrast': black, - 500: to-hsl(#b3b2b2), + 500: #b3b2b2, '500-contrast': black, - 600: to-hsl(#979696), + 600: #979696, '600-contrast': white, - 700: to-hsl(#7b7a7a), + 700: #7b7a7a, '700-contrast': white, - 800: to-hsl(#404040), + 800: #404040, '800-contrast': white, - 900: to-hsl(#1a1a1a), + 900: #1a1a1a, '900-contrast': white ), - info: ( - 500: to-hsl(rgb(18, 118, 211)), + 'info': ( + 500: rgb(18, 118, 211), '500-contrast': black ), - success: ( - 500: to-hsl(rgb(76, 184, 96)), + 'success': ( + 500: rgb(76, 184, 96), '500-contrast': black ), - warn: ( - 500: to-hsl(rgb(251, 178, 60)), + 'warn': ( + 500: rgb(251, 178, 60), '500-contrast': black ), - error: ( - 500: to-hsl(rgb(255, 20, 75)), + 'error': ( + 500: rgb(255, 20, 75), '500-contrast': black ), - surface: ( - 500: to-hsl(rgb(255, 255, 255)), + 'surface': ( + 500: rgb(255, 255, 255), '500-contrast': black ) ); -:root { - --ig-primary-a: 1; - --ig-secondary-a: 1; - --ig-info-a: 1; - --ig-success-a: 1; - --ig-warn-a: 1; - --ig-error-a: 1; - --ig-gray-a: 1; - --ig-surface-a: 1; -} ``` -
-The `to-hsl()` function takes a color, no matter the color space, and returns its hue, saturation, and lightness values in a comma-separated list, which will be used when declaring the CSS variables for each shade in the palette. The `alpha` value for each palette color(primary, secondary, gray, etc.) must be initialized separately. +>[!WARNING] +> It's important to set the string map keys to be between quatation marks - `'primary'`, `'secondary'`, `'gray'`, etc. + +
## Predefined Palettes We provide predefined light and dark palettes, which you can use along with our schemas to create themes for your components: @@ -170,15 +164,6 @@ We provide predefined light and dark palettes, which you can use along with our - $dark-bootstrap-palette - $dark-indigo-palette -We also provide a few additional palettes that you can use: - -- Light Additional Palettes - - $light-green-palette - - $light-purple-palette -- Dark Additional Palettes - - $dark-green-palette - - $dark-purple-palette - You can mix and match all light palettes with a light schema of your choice and vice versa - all dark palettes with a dark schema that you think will best match your needs and vision. ## The Default Palette @@ -194,6 +179,7 @@ For example, you could have the following Sass files in your app. $my-palette: palette( $primary: #2ab759, $secondary: #f96a88, + $surface: #e5e5e5 ); $default-palette: $my-palette; @@ -220,7 +206,7 @@ This ensures that the same palette, declared in our `_variables.scss` file is us ## Grayscale Colors -Similar to the `primary` and `secondary` colors, you can provide another color to the `palette` function that will be used to generate shades of gray. The default color used to generate the `gray` palette in all light themes is `#000`, or better known as `black`. The `gray` color variants are mainly used for setting text colors across components. Modifying the value is useful when changing the background or surface colors in your application. For instance, if your application uses a darker surface background, setting the `gray` color to `white` is sensible, and will force all text colors to be based on shades of `white`. +Similar to the `primary`, `secondary` and `surface` colors, you can provide another color to the `palette` function that will be used to generate shades of gray. The default color used to generate the `gray` palette in all light themes is `#000`, or better known as `black`. The `gray` color variants are mainly used for setting text colors across components. Modifying the value is useful when changing the background or surface colors in your application. For instance, if your application uses a darker surface background, setting the `gray` color to `white` is sensible, and will force all text colors to be based on shades of `white`. To generate a palette that uses `white` for its gray shades: @@ -228,11 +214,13 @@ To generate a palette that uses `white` for its gray shades: // Import the Ignite UI themes library first $company-color: #2ab759; /* Some green shade I like */ $secondary-color: #f96a88; /* Watermelon pink */ +$surface-color: #e5e5e5 /* Light gray for backgrounds/ */ $grayscale-base: #fff; /* Used to generate shades of gray */ $my-color-palette: palette( $primary: $company-color, $secondary: $secondary-color, + $surface: $surface-color, $gray: $grayscale-base ); ``` @@ -241,7 +229,7 @@ $my-color-palette: palette( ## Colors Variants -We provide a function that is easy to remember and use - `color`. It can take up to three arguments - `palette`, `color`, and `variant`; +We provide a function that is easy to remember and use - `color`. It can take up to four arguments - `palette`, `color`, `variant` and `opacity`; ```scss // Get the primary CSS variable reference of the 500 color variant @@ -250,12 +238,17 @@ $my-primary-500: color(); // Get the primary CSS variable reference of the 600 color variant $my-primary-600: color($variant: 600); +// Get the primary CSS variable reference of the 600 color variant with .5 opacity +$my-primary-600-opacity: color($variant: 600, $opacity: .5); + // Get the secondary A700 color variant as a HEX value from $my-palette $my-primary-A700: color($my-palette, 'secondary', 'A700'); // Get the warn 500 color variant as HEX value from $my-palette $my-warning-color: color($my-palette, 'warn'); + + .my-awesome-class { background: $my-primary-600; border-color: $my-primary-A700; @@ -272,7 +265,7 @@ If you omit the `$palette` argument, you will get a string referencing the corre ## Contrast Text Colors -Similar to how we retrieve color variants, there's a way to get the contrast text color for each of the color variants in the palette. +Similar to how we retrieve color variants, there's a way to get the contrast text color for each of the color variants in the palette with the function `contrast-color`, accepts the same type and number of arguments as the `color` function. ```scss $my-primary-800: color($my-palette, 'primary', 600); @@ -326,6 +319,7 @@ Here's an example: $my-palette: palette( $primary: #2ab759, $secondary: #f96a88, + $surface: #e5e5e5 ); @include palette($my-palette); diff --git a/en/components/themes/sass/presets/bootstrap.md b/en/components/themes/sass/presets/bootstrap.md index 39e38c1278..83574539e2 100644 --- a/en/components/themes/sass/presets/bootstrap.md +++ b/en/components/themes/sass/presets/bootstrap.md @@ -10,6 +10,9 @@ In order to switch from `Material` to `Bootstrap`, you can use the [theme]({envi // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); @include theme($palette: $light-bootstrap-palette, $schema: $light-bootstrap-schema); + +// We can also include the Indigo font and font scaling +@include typography($font-family: $bootstrap-typeface, $type-scale: $bootstrap-type-scale); ``` ## Bootstrap Dark Theme @@ -20,6 +23,8 @@ In order to switch from `Material` to `Bootstrap`, you can use the [theme]({envi // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); @include theme($palette: $dark-bootstrap-palette, $schema: $dark-bootstrap-schema); + +@include typography($font-family: $bootstrap-typeface, $type-scale: $bootstrap-type-scale); ``` ## API Overview diff --git a/en/components/themes/sass/presets/fluent.md b/en/components/themes/sass/presets/fluent.md index 8e7673b090..5b225623eb 100644 --- a/en/components/themes/sass/presets/fluent.md +++ b/en/components/themes/sass/presets/fluent.md @@ -13,6 +13,9 @@ We also support Word and Excel palettes. To use them just pass one of the two *_ // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); @include theme($palette: $light-fluent-palette, $schema: $light-fluent-schema); + +// We can also include the Indigo font and font scaling +@include typography($font-family: $fluent-typeface, $type-scale: $fluent-type-scale); ``` ## Fluent Dark Theme @@ -23,6 +26,8 @@ We also support Word and Excel palettes. To use them just pass one of the two *_ // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); @include theme($palette: $dark-fluent-palette, $schema: $dark-fluent-schema); + +@include typography($font-family: $fluent-typeface, $type-scale: $fluent-type-scale); ``` ## API Overview diff --git a/en/components/themes/sass/presets/indigo.md b/en/components/themes/sass/presets/indigo.md index 541c5f4748..990b55e376 100644 --- a/en/components/themes/sass/presets/indigo.md +++ b/en/components/themes/sass/presets/indigo.md @@ -5,9 +5,15 @@ In order to switch from `Material` to `Indigo`, you can use the [theme]({environ ## Indigo Light Theme ```scss -@import '~igniteui-angular/lib/core/styles/themes/index'; +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); @include theme($palette: $light-indigo-palette, $schema: $light-indigo-schema); + +// We can also include the Indigo font and font scaling +@include typography($font-family: $indigo-typeface, $type-scale: $indigo-type-scale); ``` ## Indigo Dark Theme @@ -18,6 +24,8 @@ In order to switch from `Material` to `Indigo`, you can use the [theme]({environ // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); @include theme($palette: $dark-indigo-palette, $schema: $dark-indigo-schema); + +@include typography($font-family: $indigo-typeface, $type-scale: $indigo-type-scale); ``` ## API Overview diff --git a/en/components/themes/sass/presets/material.md b/en/components/themes/sass/presets/material.md index 0ac61f6166..a385593263 100644 --- a/en/components/themes/sass/presets/material.md +++ b/en/components/themes/sass/presets/material.md @@ -8,6 +8,9 @@ The *__light__* version of the Material theme is the default theme in Ignite UI // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); @include theme($palette: $light-material-palette, $schema: $light-material-schema); + +// We can also include the Material font and font scaling +@include typography($font-family: $material-typeface, $type-scale: $material-type-scale); ``` ## Material Dark Theme @@ -18,6 +21,8 @@ The *__light__* version of the Material theme is the default theme in Ignite UI // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); @include theme($palette: $dark-material-palette, $schema: $dark-material-schema); + +@include typography($font-family: $material-typeface, $type-scale: $material-type-scale); ``` If you want to use only the dark schema, but with your own palette you have to manually do the following: diff --git a/en/components/themes/sass/schemas.md b/en/components/themes/sass/schemas.md index b0a90f6069..b8ca245267 100644 --- a/en/components/themes/sass/schemas.md +++ b/en/components/themes/sass/schemas.md @@ -17,17 +17,37 @@ Schemas are like recipes. They are simple Sass maps, similar to JSON that allow Let's take a look at the light Material Avatar schema: ```scss -$_light-avatar: extend( - $_square-shape-avatar, - ( - background: ( - color: ('gray', 400) +$light-avatar: ( + background: ( + color: ( + 'gray', + 400, + 0.54, ), - + ), + color: ( color: ( - color: ('gray', 800) + 'gray', + 800, + 0.96, ), - ) + ), + icon-color: ( + color: ( + 'gray', + 800, + 0.96, + ), + ), + border-radius: rem(8px), + size: ( + sizable: ( + rem(40px), + rem(64px), + rem(88px), + ), + ), + default-size: 1, ); ``` @@ -42,7 +62,7 @@ We can also add other functions and arguments to the `background` map as key val Let's see how the schema will change when we make this addition: ```scss -$_light-avatar: ( +$light-avatar: ( icon-background: ( color: ('gray', 400), to-opaque: #fff @@ -59,7 +79,7 @@ The result of the `color` function call will automatically be passed as the firs As you saw from the example above. Schemas are simple maps and as such can be extended by overriding some of their properties. You might want to _extend_ the material avatar schema by only changing its `background` property, without having to copy all other properties manually. This is easily done using the `extend` function we provide. ```scss -$my-avatar-schema: extend($_light-avatar, ( +$my-avatar-schema: extend($light-avatar, ( background: limegreen )); ``` @@ -85,12 +105,13 @@ We use the light and dark schemas accordingly with the light and dark palettes t ## Consuming Schemas Until now we have shown what a component schema is and how you can create one, but we have not talked about how you can use schemas in your Sass project. -Individual component schemas are bundled up in a global schema map for all components we have. So the `$_light-avatar` schema is part of the global `$light-material-schema`. The `$light-material-schema` maps component schemas to component names. The `$light-material-schema` looks something like this: +Individual component schemas are bundled up in a global schema map for all components we have. So the `$light-avatar` schema is stored in the `$material-avatar` variable, which is then used in the global `$light-material-schema`. The `$light-material-schema` map contains all component names as keys, and their corresponding schemas as values. The `$light-material-schema` looks something like this: ```scss $light-material-schema: ( - igx-avatar: $_light-avatar, - igx-badge: $_light-badge, + action-strip: $material-action-strip, + avatar: $material-avatar, + badge: $material-badge, ... ); ``` @@ -99,7 +120,7 @@ We do this so we can pass the entire `$light-material-schema` to the `theme` mix ```scss $my-light-schema: extend($light-material-schema, ( - igx-avatar: $my-avatar-schema + avatar: $my-avatar-schema )); ``` @@ -117,7 +138,7 @@ Avatars in your global theme will now have use limegreen color for their backgro Some component schemas, like the button schema, have property definitions for roundness. This means that you can change the default button roundness for all buttons. -Finally, let's see how individual component themes can use the schema we created above. +Let's see how individual component themes can use the schema we created above. ```scss $my-avatar-theme: avatar-theme( @@ -125,6 +146,23 @@ $my-avatar-theme: avatar-theme( ); ``` +Currently the most used use case for schemas is if we want a specific element to have a different theme than the global one. +For example if we had `$light-material-schema` applied for our global theme, and we wanted only one specific avatar component to use `$light-indigo-schema` we can do the following: + +```scss +//We only get the avatar part of the light-indigo-schema +$indigo-avatar: map.get($light-indigo-schema, avatar); + +//We include the speicfic schematic to a class which we can then set on the avatar component that we want +.diff-avatar { + @include css-vars( + avatar-theme( + $schema: $indigo-avatar + ) + ); +} +``` + ## Conclusions Although schemas require a deeper knowledge of our theming library compared to theme functions and mixins, they allow us to declare component themes without increasing the size of the produced CSS. Another benefit of using schemas is how reusable and extensible they are as they are simple Sass maps. You can mix and match component schemas to create global theme schemas. From adbaf495691434b9e9ead850aaeae438f1f0231f Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 18 Dec 2024 15:41:45 +0200 Subject: [PATCH 16/25] refactor(*): additional changes to the docs --- en/components/display-density.md | 5 +- en/components/themes/index.md | 8 +- en/components/themes/palettes.md | 41 +++---- en/components/themes/sass/elevations.md | 35 +----- en/components/themes/sass/palettes.md | 142 +++++++++--------------- en/components/themes/sass/schemas.md | 40 ++----- en/components/themes/sass/typography.md | 27 +++-- 7 files changed, 108 insertions(+), 190 deletions(-) diff --git a/en/components/display-density.md b/en/components/display-density.md index 12d05b9e4a..03da9d7e8c 100644 --- a/en/components/display-density.md +++ b/en/components/display-density.md @@ -6,7 +6,10 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI # Size -Size configuration can significantly improve the visual representation of large amounts of data. In Ignite UI for Angular, we provide a pre-defined set of options – large, medium, and small. +Size configuration can significantly improve the visual representation of large amounts of data. In Ignite UI for Angular, we provide a pre-defined set of options: +- **large** +- **medium** +- **small** Using the `--ig-size` custom CSS property, you can configure the size on an application or a component level. diff --git a/en/components/themes/index.md b/en/components/themes/index.md index bf02884ffe..c96d0e154e 100644 --- a/en/components/themes/index.md +++ b/en/components/themes/index.md @@ -14,10 +14,10 @@ Ignite UI for Angular allows you to modify the styles of all component themes us ## Basic Usage Ignite UI for Angular includes the following themes as part of its package: - - Material - - Bootstrap - - Fluent - - Indigo +- Material +- Bootstrap +- Fluent +- Indigo All themes have light and dark variants as well as support for left-to-right(LTR) and right-to-left(RTL) content by default. The easiest way to start using any of the bundled themes in your application is by specifying the path to a CSS theme file in your `angular.json` configuration. For example, if you wanted to use the dark Material theme, you would include the path to the theme file like so: diff --git a/en/components/themes/palettes.md b/en/components/themes/palettes.md index d2b00086ce..a8ae08ae38 100644 --- a/en/components/themes/palettes.md +++ b/en/components/themes/palettes.md @@ -18,30 +18,31 @@ The `primary`, `secondary`, and `gray` colors follow the [2014 Material Design C - + - - - - - - - - - - - - - - + + + + + + + + + + + + + +
All*Primary & Secondary Only*Primary & Secondary Only
**50****100****200****300****400****500****600****700****800****900***A100**A200**A400**A700*50100200300400500600700800900A100A200A400A700
+ As the table above shows, the `gray` color doesn't include the `A100`, `A200`, `A400`, and `A700` variants, while the `primary` and `secondary` colors contain all 14 color variants. We include 5 additional colors that are not part of the 2014 Material Design Color Palette - `info`, `success`, `warn`, `error` and `surface`. -On top of the aforementioned colors, we also include **Level AAA** [WCAG](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) compliant `contrast` colors for each color variant. This means that you can safely use the corresponding `contrast` color variants as foreground colors for the base color variant. +On top of the aforementioned colors, we also include **Level AA** [WCAG](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) compliant `contrast` colors for each color variant. This means that you can safely use the corresponding `contrast` color variants as foreground colors for the base color variant. > [!NOTE] > Contrast colors are generated at build-time by the Sass theming engine based on the main variables color (primary, secondary, etc.). @@ -67,10 +68,10 @@ Here's an excerpt of the `primary` variable color as declared in the Light Mater } ``` -All primary color variants are derived from one base variable color variant - `--ig-primary-500`. The same goes for the other color variables `--ig-secondary-500`, `--ig-surface-500`, etc. The other variants are generated through the relative color function `hsl()` which takes the main variable color variant `500` and changes it's `staturation` and `lightness` according to the variable variant which is assigned on (`600`,`700`, etc.). We decided to use this approach as it allows us to modify all variants of the `primary`, `secondary`, `surface` and other colors at runtime. +All primary color variants are derived from one base variable color variant `--ig-primary-500`. The same goes for the other color variables `--ig-secondary-500`, `--ig-surface-500`, etc. The other variants are generated through the relative color function `hsl()` which takes the main variable color variant `500` and changes it's `staturation` and `lightness` according to the variable variant which is assigned on (`600`,`700`, etc.). We decided to use this approach as it allows us to modify all variants of the `primary`, `secondary`, `surface` and other colors at runtime. > [!WARNING] -> Because the Contrast colors are not generated at runtime like the rest, if we change the main color variant(`500`), the contrast color would not be updated. We would need to change it manually. +> Because the contrast colors are not generated at CSS runtime like the rest, if we change the main color variant(`500`), the contrast color would not be updated. We would need to change them manually. This behavior will be improved upon in an upcoming release, where the contrast colors will also be calculated at CSS runtime. ## Defining Palettes @@ -84,7 +85,7 @@ If you wanted to change the color variants for a color from the palette, you can This will automatically update all the other primary variants. -You will notice that color variants for each color are monochromatic. This is because all color variants are generated with the relative color function `hsl()` +You will notice that color variants for each color are monochromatic. This is because all color variants are generated with the relative color function `hsl()`. ## Scoping @@ -98,7 +99,7 @@ Let's say your corporate primary color is `#9f349c` and you want to create prima } ``` -This will automatically calculate each primary color variant and it's contrast color, thanks to the Sass function for generating color palettes at build-time that we provide. If you want to see more about it, you can check out the [Palettes with Sass](./sass/palettes.md) section of the documentation. +This will automatically alter each primary color variant. Apart from having a single global palette, you can also create several palettes scoped to other CSS selectors. For example, we can have a blue and red palette scoped to class selectors: diff --git a/en/components/themes/sass/elevations.md b/en/components/themes/sass/elevations.md index f3a03f0666..a8374295ba 100644 --- a/en/components/themes/sass/elevations.md +++ b/en/components/themes/sass/elevations.md @@ -66,17 +66,6 @@ In addition to this, you can tell the theme to ignore/not use elevations complet ); ``` -Some component themes also accept the `$elevations` parameter to allow you to pass custom elevation for their instances only. - -For instance, the card component does support passing custom elevations. To find out which components accept a custom elevations map, take a look at their Sass documentation. Each component uses only specific levels from the elevations map, those too are listed in the component's Sass docs. - -```scss -@include card(card-theme( - //... - $elevations: $my-elevations, -)); -``` - Since the `elevation` function returns a list of box shadows, you can use the return value of that function to modify only certain elevations in your component themes. ```scss @@ -84,18 +73,7 @@ $card-theme: card-theme( $resting-shadow: elevation(10) ); -@include card($card-theme); -``` - -This compiles to: - -```css -.igx-card { - box-shadow: - 0 6px 6px -3px rgba(0, 0, 0, 0.26), - 0 10px 14px 1px rgba(0, 0, 0, 0.12), - 0 4px 18px 3px rgba(0, 0, 0, 0.08); -} +@include css-vars($card-theme); ``` You can also pass simple box shadows without taking advantage of the `elevation` function: @@ -105,16 +83,7 @@ $card-theme: card-theme( ); .my-card { - @include card($card-theme); -} -``` - -Here is the result from the above snippet: - -```scss -.my-card .igx-card { - /* ... */ - box-shadow: 0 10px 10px 10px #666; + @include css-vars($card-theme); } ```
diff --git a/en/components/themes/sass/palettes.md b/en/components/themes/sass/palettes.md index a76d96233d..285c8632d0 100644 --- a/en/components/themes/sass/palettes.md +++ b/en/components/themes/sass/palettes.md @@ -12,7 +12,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI Palettes in the context of Ignite UI for Angular are declared as [Sass Maps](https://sass-lang.com/documentation/values/maps) with the keys of those map being the palette colors (`primary`, `secondary`, `surface`, etc.). Each color is in turn a map itself and has all color variants listed as keys. The values assigned to those color variants are the actual colors used throughout all component themes. All palette maps are generated programatically by the palette function. The function accepts arguments for `primary`, `secondary`, `surface`, `gray`, `info`, `success`, `warn`, and `error` colors. The `primary` color is usually your brand color. It is mostly used to style static elements, such as the `igx-navbar` component. The `secondary` color is the one used on elements that are actionable, such as buttons, switches, sliders, etc. The `surface` color is the one used for background color of some components, such as cards, menus, date/time pickers, banners sheets, etc.. The only required arguments are the ones for `primary`, `secondary` and `surface` colors. We default the colors for `surface`, `gray`, `info`, `success`, `warn`, and `error` to a predefined set of our choosing. -To get started with your first color palette, create an _scss_ file that would be the base file for your global theme. I will call mine _"_variables.scss"_. +To get started with your first color palette, create an _scss_ file that would be the base file for your global theme. I will call mine _`_variables.scss`_. ```scss // _variables.scss @@ -36,25 +36,25 @@ In case you want to manually create your palette, or create the palette generati ```scss $handmade-palette: ( 'primary': ( - 50: #e6eff8, + '50': #e6eff8, '50-contrast': black, - 100: #bfd7f2, + '100': #bfd7f2, '100-contrast': black, - 200: #98bfec, + '200': #98bfec, '200-contrast': black, - 300: #85b5e9, + '300': #85b5e9, '300-contrast': white, - 400: #73a6e4, + '400': #73a6e4, '400-contrast': white, - 500: #6797de, + '500': #6797de, '500-contrast': white, - 600: #3681dd, + '600': #3681dd, '600-contrast': white, - 700: #357fda, + '700': #357fda, '700-contrast': white, - 800: #306dc8, + '800': #306dc8, '800-contrast': white, - 900: #284ea8, + '900': #284ea8, '900-contrast': white, 'A100': #98bfec, 'A100-contrast': white, @@ -66,25 +66,25 @@ $handmade-palette: ( 'A700-contrast': white ), 'secondary': ( - 50: #fef7e2, + '50': #fef7e2, '50-contrast': black, - 100: #fdeab7, + '100': #fdeab7, '100-contrast': black, - 200: #fbdd89, + '200': #fbdd89, '200-contrast': black, - 300: #fad15c, + '300': #fad15c, '300-contrast': black, - 400: #f9c63f, + '400': #f9c63f, '400-contrast': black, - 500: #f7bd32, + '500': #f7bd32, '500-contrast': white, - 600: #f6b02d, + '600': #f6b02d, '600-contrast': white, - 700: #f49e2a, + '700': #f49e2a, '700-contrast': white, - 800: #f38e28, + '800': #f38e28, '800-contrast': white, - 900: #f38e28, + '900': #f38e28, '900-contrast': white, 'A100': #fbdd89, 'A100-contrast': black, @@ -96,45 +96,45 @@ $handmade-palette: ( 'A700-contrast': white ), 'gray': ( - 50: #fff, + '50': #fff, '50-contrast': black, - 100: #fafafa, + '100': #fafafa, '100-contrast': black, - 200: #f5f5f5, + '200': #f5f5f5, '200-contrast': black, - 300: #f0f0f0, + '300': #f0f0f0, '300-contrast': black, - 400: #dedede, + '400': #dedede, '400-contrast': black, - 500: #b3b2b2, + '500': #b3b2b2, '500-contrast': black, - 600: #979696, + '600': #979696, '600-contrast': white, - 700: #7b7a7a, + '700': #7b7a7a, '700-contrast': white, - 800: #404040, + '800': #404040, '800-contrast': white, - 900: #1a1a1a, + '900': #1a1a1a, '900-contrast': white ), 'info': ( - 500: rgb(18, 118, 211), + '500': rgb(18, 118, 211), '500-contrast': black ), 'success': ( - 500: rgb(76, 184, 96), + '500': rgb(76, 184, 96), '500-contrast': black ), 'warn': ( - 500: rgb(251, 178, 60), + '500': rgb(251, 178, 60), '500-contrast': black ), 'error': ( - 500: rgb(255, 20, 75), + '500': rgb(255, 20, 75), '500-contrast': black ), 'surface': ( - 500: rgb(255, 255, 255), + '500': rgb(255, 255, 255), '500-contrast': black ) ); @@ -142,7 +142,7 @@ $handmade-palette: ( ``` >[!WARNING] -> It's important to set the string map keys to be between quatation marks - `'primary'`, `'secondary'`, `'gray'`, etc. +> It's important to set the map keys as strings, explicitly between quotation marks - `'primary'`, `'secondary'`, `'gray'`, etc. The same applies for all color variants - `500`, `500-contrast`, etc.
@@ -150,60 +150,22 @@ $handmade-palette: ( We provide predefined light and dark palettes, which you can use along with our schemas to create themes for your components: - Light Palettes - - $light-material-palette - - $light-fluent-excel-palette - - $light-fluent-word-palette - - $light-fluent-palette - - $light-bootstrap-palette - - $light-indigo-palette + - `$light-material-palette` + - `$light-fluent-excel-palette` + - `$light-fluent-word-palette` + - `$light-fluent-palette` + - `$light-bootstrap-palette` + - `$light-indigo-palette` - Dark Palettes - - $dark-material-palette - - $dark-fluent-excel-palette - - $dark-fluent-word-palette - - $dark-fluent-palette - - $dark-bootstrap-palette - - $dark-indigo-palette + - `$dark-material-palette` + - `$dark-fluent-excel-palette` + - `$dark-fluent-word-palette` + - `$dark-fluent-palette` + - `$dark-bootstrap-palette` + - `$dark-indigo-palette` You can mix and match all light palettes with a light schema of your choice and vice versa - all dark palettes with a dark schema that you think will best match your needs and vision. -## The Default Palette -The `theme` mixin takes a palette(see the previous section) as one of its arguments. The passed palette is assigned to the global `$default-palette` variable. This palette stored in this variable is used across the Sass library as fallback palette, whenever a palette is expected, but not explicitly provided by the user. - -You can use this knowledge to your advantage to allow you to re-use the same palette across multiple Sass documents in your application. - -For example, you could have the following Sass files in your app. - -```scss -// src/styles/_variables.scss - -$my-palette: palette( - $primary: #2ab759, - $secondary: #f96a88, - $surface: #e5e5e5 -); - -$default-palette: $my-palette; -``` - -In your main styles file: -```scss -// src/styles/styles.scss -@use 'variables' as *; - -@include theme($palette: $my-palette); -``` - -In a component `.scss` file: -```scss -@use '../styles/styles/variables' as *; - -:host { - background: color($variant: 900); -} -``` - -This ensures that the same palette, declared in our `_variables.scss` file is used across all Sass files - ## Grayscale Colors Similar to the `primary`, `secondary` and `surface` colors, you can provide another color to the `palette` function that will be used to generate shades of gray. The default color used to generate the `gray` palette in all light themes is `#000`, or better known as `black`. The `gray` color variants are mainly used for setting text colors across components. Modifying the value is useful when changing the background or surface colors in your application. For instance, if your application uses a darker surface background, setting the `gray` color to `white` is sensible, and will force all text colors to be based on shades of `white`. @@ -232,13 +194,13 @@ $my-color-palette: palette( We provide a function that is easy to remember and use - `color`. It can take up to four arguments - `palette`, `color`, `variant` and `opacity`; ```scss -// Get the primary CSS variable reference of the 500 color variant +// Get the primary color as CSS variable reference to the 500 color variant $my-primary-500: color(); -// Get the primary CSS variable reference of the 600 color variant +// Get the primary color as CSS variable reference to the 600 color variant $my-primary-600: color($variant: 600); -// Get the primary CSS variable reference of the 600 color variant with .5 opacity +// Get the primary color as CSS variable reference to the 600 color variant with .5 opacity $my-primary-600-opacity: color($variant: 600, $opacity: .5); // Get the secondary A700 color variant as a HEX value from $my-palette diff --git a/en/components/themes/sass/schemas.md b/en/components/themes/sass/schemas.md index b8ca245267..30b56a30a2 100644 --- a/en/components/themes/sass/schemas.md +++ b/en/components/themes/sass/schemas.md @@ -57,22 +57,6 @@ Let's take the `background` property for example. It tells the avatar theme what *The `background` can be assigned any value, that is, a value that can be assigned to the CSS `background-color` property.* You can also assign a map to `background`, like in the sample above. When you assign a map to the `background` property, the map should contain functions as the key names (e.g. `color`), and arguments for the functions as values for said keys. We do this to be able to resolve the values later on, when the avatar theme is being built. See, because we don't know the palette a user might pass to the avatar theme, we should be able to resolve it later on, only when the palette is known. -We can also add other functions and arguments to the `background` map as key value pairs. For instance we may want to run the resolved result from `color: ('gray', 400)` through the `to-opaque` function we have, to resolve the HEX value for the `400` color variant of the `gray` palette, which is usually represented in rgba. - -Let's see how the schema will change when we make this addition: - -```scss -$light-avatar: ( - icon-background: ( - color: ('gray', 400), - to-opaque: #fff - ), - ... -); -``` - -The result of the `color` function call will automatically be passed as the first argument to the `to-opaque` function. Since `to-opaque` accepts a second argument for the background color, we provide it as the value. If the function doesn't accept any additional arguments, you should assign an empty list `()` as its value. -
## Extending Schemas @@ -90,15 +74,15 @@ Now the value of `$my-avatar-schema` will contain all properties of `$_light-ava We provide predefined light and dark schemas that we use in our theme presets: - Light Schemas - - $light-material-schema - - $light-fluent-schema - - $light-bootstrap-schema - - $light-indigo-schema + - `$light-material-schema` + - `$light-fluent-schema` + - `$light-bootstrap-schema` + - `$light-indigo-schema` - Dark Schemas - - $dark-material-schema - - $dark-fluent-schema - - $dark-bootstrap-schema - - $dark-indigo-schema + - `$dark-material-schema` + - `$dark-fluent-schema` + - `$dark-bootstrap-schema` + - `$dark-indigo-schema` We use the light and dark schemas accordingly with the light and dark palettes to create the component themes. For example, using the `$light-material-schema` along with the `$light-material-palette` will help us create all of the light material component themes. And vice versa - using the `$dark-material-schema` along with the `$dark-material-palette` will give us the dark material component themes. @@ -134,7 +118,7 @@ Now we can pass all that to the global theme mixin: ); ``` -Avatars in your global theme will now have use limegreen color for their background. +Avatars in your global theme will now use limegreen color for their background. Some component schemas, like the button schema, have property definitions for roundness. This means that you can change the default button roundness for all buttons. @@ -150,11 +134,11 @@ Currently the most used use case for schemas is if we want a specific element to For example if we had `$light-material-schema` applied for our global theme, and we wanted only one specific avatar component to use `$light-indigo-schema` we can do the following: ```scss -//We only get the avatar part of the light-indigo-schema +// We only get the avatar part of the light-indigo-schema $indigo-avatar: map.get($light-indigo-schema, avatar); -//We include the speicfic schematic to a class which we can then set on the avatar component that we want -.diff-avatar { +// We include the specific schema to a class which we can then set on the avatar component that we want +.indigo-avatar { @include css-vars( avatar-theme( $schema: $indigo-avatar diff --git a/en/components/themes/sass/typography.md b/en/components/themes/sass/typography.md index a76e0cd831..f682df935a 100644 --- a/en/components/themes/sass/typography.md +++ b/en/components/themes/sass/typography.md @@ -170,33 +170,32 @@ $card-categories: ( We no longer include the `typography` mixin by passing it the `$my-type-scale` scale with our modification to the `h6` category. Now all we do is pass the custom h6 style we created to the `type-style-vars` mixin. -Also with the `card-typography` mixin we can change all of the elements type scales with a different ones. In the exmaple above, we set the `title-small` key in the `$card-categories` map to have type scale value of `subtitle-1`, which will result in making the small title in our card component a little bit bigger. This is because by default the card component is using type scale `subtitle-2` which is smaller in font size than the `subtitle-1` type scale which we just set with the `card-typography` mixin. +Using the card-typography mixin, we can update the typography styles for all elements in the card component. In the example above, the title-small key in the $card-categories map is assigned the subtitle-1 type style. This change makes the small title in the card slightly larger. By default, the card component uses the subtitle-2 type style for the small title, which has a smaller font size than subtitle-1. The mixin allows us to override this default and apply the new style. -## Units Converting +## Converting Units -We also have three typography function for converting property units. -With the functions we can convert `px` units to `em` and `rem` and also `em` and `rem` units to `px`. -All we need to do is to call one of the three functions and pass the number that we want to convert. +We also have three typography functions for converting property units. With the functions we can convert `px` units to `em` or `rem`, and also `em` or `rem` units to `px`. +All we need to do is call one of the three functions and pass a value that we want to convert. ### To 'px' ```scss - .my-component { - margin: px(3.23rem); - } +.my-component { + margin: px(3.23rem); +} ``` ### To 'rem' ```scss - .my-component { - margin: rem(10px) rem(5px); - } +.my-component { + margin: rem(10px) rem(5px); +} ``` ### To 'em' ```scss - .my-component { - margin: em(10px) em(5px); - } +.my-component { + margin: em(10px) em(5px); +} ``` ## CSS Classes From 05e7480acc52282cda25ab6f81cf959dbfec558b Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Thu, 19 Dec 2024 13:56:53 +0200 Subject: [PATCH 17/25] refactor(themes): updating docs --- en/components/badge.md | 39 +++------------------- en/components/themes/sass/configuration.md | 4 +-- en/components/themes/sass/schemas.md | 4 +-- en/components/themes/sass/typography.md | 9 +++++ 4 files changed, 17 insertions(+), 39 deletions(-) diff --git a/en/components/badge.md b/en/components/badge.md index ee15af22f8..0f516db26c 100644 --- a/en/components/badge.md +++ b/en/components/badge.md @@ -302,11 +302,11 @@ Following the simplest approach, we create a new theme that extends the [`badge- ```scss $custom-badge-theme: badge-theme( - $border-color: white, - $border-width: 1px, + $schema: $light-bootstrap-schema, $icon-color: white, $text-color: black, - $shadow: 3px 2px 5px 0px rgba(0,0,0,0.4) + $shadow: 3px 2px 5px 0px rgba(0,0,0,0.4), + $border-radius: 15px ); ``` @@ -314,43 +314,12 @@ $custom-badge-theme: badge-theme(
-The last step is to **include** the component theme in our application. - -If `$legacy-support` is set to `true`, include the **component theme** like that: - -```scss - @include badge($custom-badge-theme); -``` ->[!NOTE] ->If the component is using an [`Emulated`](themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` - -```scss -:host { - ::ng-deep { - @include badge($custom-badge-theme); - } -} -``` - -
- -If `$legacy-support` is set to `false`(default), include the component **css variables** like that: +To include the new theme we use the `css-vars` mixin: ```scss @include css-vars($custom-badge-theme); ``` ->[!NOTE] ->If the component is using an [`Emulated`](themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, you still have to use `:host` because you need a global selector in order to override the variables. - -```scss -:host { - @include css-vars($custom-badge-theme); -} -``` - -Don't forget to include the themes in the same way as it was demonstrated above. - ### Demo Date: Thu, 19 Dec 2024 15:21:45 +0200 Subject: [PATCH 18/25] refactor(theming): fix some more items --- en/components/themes/misc/printing-styles.md | 2 +- en/components/themes/sass/component-themes.md | 19 ++---------------- en/components/themes/sass/global-themes.md | 20 +++++++++---------- en/components/themes/sass/presets/material.md | 5 ++++- en/components/themes/sass/roundness.md | 8 ++++---- en/components/toc.yml | 2 +- 6 files changed, 22 insertions(+), 34 deletions(-) diff --git a/en/components/themes/misc/printing-styles.md b/en/components/themes/misc/printing-styles.md index 76cbc64e31..3dc3d932d2 100644 --- a/en/components/themes/misc/printing-styles.md +++ b/en/components/themes/misc/printing-styles.md @@ -23,7 +23,7 @@ You can do that in your theme `SCSS` file: // @import '~igniteui-angular/lib/core/styles/themes/index'; // Turn the print styles off by setting the $print-layout param to false. -core($print-layout: false) +@include core($print-layout: false) // Add the theme and the palette. @include theme($default-palette); diff --git a/en/components/themes/sass/component-themes.md b/en/components/themes/sass/component-themes.md index 13c7c60a1d..48d11e9443 100644 --- a/en/components/themes/sass/component-themes.md +++ b/en/components/themes/sass/component-themes.md @@ -109,24 +109,9 @@ In a component template: So far we've explored ways to create themes that are globally scoped, and are included in a single Sass file. However, this is not always desirable, and in some instances you will want the Sass file to be bound to a specific component. In those cases we have to take View Encapsulation, and specifically how it is emulated in Angular, into consideration. -The Angular team has adopted 3 strategies for View Encapsulation - Emulated(default), ShadowDom, and None. To learn more about each of these strategies, take a look at the [Angular Documentation](https://angular.io/api/core/ViewEncapsulation). We will take a closer look at how to handle theming of Ignite UI for Angular components that are part of View Encapsulated parent components. +The Angular team has adopted 3 strategies for View Encapsulation - Emulated(default), ShadowDom, and None. To learn more about each of these strategies, take a look at the [Angular Documentation](https://angular.dev/api/core/ViewEncapsulation). We will take a closer look at how to handle theming of Ignite UI for Angular components that are part of View Encapsulated parent components. -What exactly does `Emulated` View Encapsulation mean, anyway? This type of View Encapsulation does not take advantage of the Shadow DOM specification, instead it employs a way to bind styles for a component and its children by using a unique attribute identifier applied on the host element. Any style rules you add to a stylesheet of a View Encapsulated component that target some inner selector will not apply because they do not reference the unique attribute of the host element. To be able to 'penetrate' this encapsulation we have to use some View Encapsulation penetration strategy. Right now, in Angular this strategy is `::ng-deep`; it allows you to target any inner selector, which is encapsulated by its host element. It's good practice to use `::ng-deep` if you're dealing with CSS rules, instead of CSS variables and you want to customize a single instance of a component. We'll provide an example for that in the next section. - -```scss -// Import the theming module -@use "igniteui-angular/theming" as *; - -$avatar-royalblue-theme: avatar-theme( - $icon-color: royalblue, -); - -:host ::ng-deep { - @include css-vars($avatar-royalblue-theme); -} -``` - -
+What exactly does `Emulated` View Encapsulation mean, anyway? This type of View Encapsulation does not take advantage of the Shadow DOM specification, instead it employs a way to bind styles for a component and its children by using a unique attribute identifier applied on the host element. Let's take a look at an example using CSS variables. Let's create an avatar theme that is bound to specific parent component. diff --git a/en/components/themes/sass/global-themes.md b/en/components/themes/sass/global-themes.md index a3c67535fe..3d2db54b3b 100644 --- a/en/components/themes/sass/global-themes.md +++ b/en/components/themes/sass/global-themes.md @@ -17,23 +17,23 @@ To generate a global theme we're going to be including two mixins `core` and `th ### Core mixin
-| Name | Type | Default | Description | +| Name | Type | Default | Description | | :-----------------------: | :-----: | :-----: | :-----------------------------------------------------------------------: | -| `$print-layout` | boolean | true | Include/exclude the styles for printing. | -| `$enhanced-accessibility` | boolean | false | Switches component colors and other properties to more accessible values. | +| `$print-layout` | boolean | true | Include/exclude the styles for printing. | +| `$enhanced-accessibility` | boolean | false | Switches component colors and other properties to more accessible values. | ### Theme mixins
-| Name | Type | Default | Description | +| Name | Type | Default | Description | | :-----------: | :-----: | :----------------------: | :----------------------------------------------------------------------------------------------------------: | -| `$palette` | map | null | The palette map to be used to by the default themes of all components. | -| `$schema` | map | `$light-material-schema` | The schema used as basis for styling the components. | -| `$exclude` | list | () | A list of component themes to be excluded from the global theme. | -| `$roundness` | Number | 1 | Sets the global roundness factor for all components (the value can be any decimal fraction between 0 and 1). | -| `$elevation` | boolean | `true` | Turns on/off elevations for all components in the theme. | -| `$elevations` | Map | `$material-elevations` | The elevation map to be used by all component themes. | +| `$palette` | map | `null` | The palette map to be used to by the default themes of all components. | +| `$schema` | map | `$light-material-schema` | The schema used as basis for styling the components. | +| `$exclude` | list | `()` | A list of component themes to be excluded from the global theme. | +| `$roundness` | Number | `null` | Sets the global roundness factor for all components (the value can be any decimal fraction between 0 and 1). | +| `$elevation` | boolean | `true` | Turns on/off elevations for all components in the theme. | +| `$elevations` | Map | `$material-elevations` | The elevation map to be used by all component themes. | Let's create a custom global theme that will use the primary, secondary and surface colors of our company. diff --git a/en/components/themes/sass/presets/material.md b/en/components/themes/sass/presets/material.md index a385593263..2fca237960 100644 --- a/en/components/themes/sass/presets/material.md +++ b/en/components/themes/sass/presets/material.md @@ -20,7 +20,10 @@ The *__light__* version of the Material theme is the default theme in Ignite UI // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; @include core(); -@include theme($palette: $dark-material-palette, $schema: $dark-material-schema); +@include theme( + $palette: $dark-material-palette, + $schema: $dark-material-schema +); @include typography($font-family: $material-typeface, $type-scale: $material-type-scale); ``` diff --git a/en/components/themes/sass/roundness.md b/en/components/themes/sass/roundness.md index 672ee3946b..ad6a1c09c4 100644 --- a/en/components/themes/sass/roundness.md +++ b/en/components/themes/sass/roundness.md @@ -15,14 +15,14 @@ Border radius is defined in the [theme schema](https://github.com/IgniteUI/ignit $light-toast: extend( $default-elevation-toast, ( - ..., - border-radius: ( - border-radius: ( + ..., + border-radius: ( + border-radius: ( rem(26px), rem(0), rem(26px), ), - ), + ), ) ); ``` diff --git a/en/components/toc.yml b/en/components/toc.yml index f83ea1f9be..430bf7b77c 100644 --- a/en/components/toc.yml +++ b/en/components/toc.yml @@ -929,7 +929,7 @@ - name: Printing styles href: themes/misc/printing-styles.md new: false - - name: Angular Theming + - name: Angular Material Theming href: themes/misc/angular-material-theming.md new: false updated: false From 11396322f34aa308fd370b3686bfd13b9e601051 Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Tue, 31 Dec 2024 10:02:50 +0200 Subject: [PATCH 19/25] refactor(themes): updating docs --- en/components/action-strip.md | 118 ++--- en/components/autocomplete.md | 3 +- en/components/badge.md | 9 +- en/components/button-group.md | 116 ++--- en/components/button.md | 97 ++-- en/components/checkbox.md | 35 +- en/components/chip.md | 239 ++++----- en/components/circular-progress.md | 156 +++--- en/components/dialog.md | 1 - en/components/divider.md | 3 +- en/components/drop-down-virtual.md | 4 +- en/components/drop-down.md | 465 +++++++++--------- en/components/for-of.md | 4 +- en/components/icon-button.md | 2 +- en/components/icon.md | 110 ++--- en/components/input-group.md | 19 - en/components/label-input.md | 98 ++-- en/components/linear-progress.md | 183 +++---- en/components/navbar.md | 280 ++++++----- en/components/navdrawer.md | 341 +++++++------ en/components/query-builder.md | 365 +++++++------- en/components/radio-button.md | 124 +++-- en/components/ripple.md | 89 ++-- en/components/select.md | 410 ++++++++------- en/components/slider/slider.md | 428 ++++++++-------- en/components/switch.md | 90 +--- en/components/texthighlight.md | 279 ++++++----- .../themes/sass/presets/bootstrap.md | 26 +- en/components/themes/sass/presets/fluent.md | 36 +- en/components/themes/sass/presets/indigo.md | 28 +- en/components/themes/sass/presets/material.md | 41 +- en/components/themes/sass/typography.md | 102 ++-- en/components/tooltip.md | 237 +++++---- 33 files changed, 2280 insertions(+), 2258 deletions(-) diff --git a/en/components/action-strip.md b/en/components/action-strip.md index 31c989bf17..4832ad8d22 100644 --- a/en/components/action-strip.md +++ b/en/components/action-strip.md @@ -5,21 +5,18 @@ _keywords: Angular Action Strip component, Angular Action Strip directive, Angul --- # Angular Action Strip Directive Overview +

The Ignite UI for Angular Action Strip component provides an overlay area containing one or more actions allowing additional UI and functionality to be shown on top of a specific target container upon user interaction e.g. hover. The container should be positioned relatively as the Action Strip attempts to overlay it and is itself positioned absolutely. Despite overlapped by an Action Strip, the main interactions and user access to the target container remain available.

-
- ## Angular Action Strip Example - -
## Getting Started with Ignite UI for Angular Action Strip @@ -30,9 +27,9 @@ To get started with the Ignite UI for Angular Action Strip component, first you ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. -The next step is to import the `IgxActionStripModule` in your **app.module.ts** file. +The next step is to import the `IgxActionStripModule` in your **app.module.ts** file. ```typescript // app.module.ts @@ -80,46 +77,47 @@ export class HomeComponent {} Now that you have the Ignite UI for Angular Action Strip module or directives imported, you can start with a basic configuration of the `igx-action-strip` component. ## Using the Angular Action Strip Component + To initialize and position the Action Strip correctly, it needs to be inside a relatively positioned container: ```html
- - - -
+ + + +
+
``` By default, the Action Strip will be visible, but this can be configured via the [`hidden`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html#hidden) @Input property. ### Menu look and feel + For scenarios where more than three action items will be shown, it is best to use [`IgxActionStripMenuItem`]({environment:angularApiUrl}/classes/igxactionstripmenuitemdirective.html) directive. Any item within the Action Strip marked with the `*igxActionStripMenuItem` structural directive will be shown in a dropdown, revealed upon toggling the more button i.e. the three dots representing the last action. ```html
- - - - - + + + + +
``` - - ### Reusing the Action Strip The same Action Strip instance can be used in multiple places in the document as long as the actions need not be visible simultaneously for them. @@ -129,25 +127,25 @@ The best way to do so is via the [`show`]({environment:angularApiUrl}/classes/ig > [!NOTE] > The `show` API method uses [Angular Renderer2](https://angular.io/api/core/Renderer2) to append the Action Strip to that `element`. - ## Usage in Grids The Action Strip provides additional functionality and UI for the IgxGrid. This can be utilized via grid action components and we are providing two default ones: + - [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html) - includes functionality and UI related to grid editing. It allows you to quickly toggle edit mode for cells or rows, depending on the value of the `rowEditable` option of the grid and whether deleting rows is allowed. - [`IgxGridPinningActionsComponent`]({environment:angularApiUrl}/classes/igxgridpinningactionscomponent.html) - includes functionality and UI related to grid row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts. ```html - - + - - - - + + + + ``` + > [!NOTE] > These components inherit [`IgxGridActionsBaseDirective`]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html) and when creating a custom grid action component, it should also inherit `IgxGridActionsBaseDirective`. @@ -165,78 +163,68 @@ This can be utilized via grid action components and we are providing two default ## Styling To customize the Action Strip, you first need to import the `index` file, where all styling functions and mixins are located. + ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` + Next, we have to create a new theme that extends the `action-strip-theme` and pass the parameters which we'd like to change: + ```scss $custom-strip: action-strip-theme( - $background: rgba(150, 133, 143, 0.4), - $actions-background: rgba(109, 121, 147, 0.6), - $icon-color: null, - $delete-action: null, - $actions-border-radius: 0 + $background: rgba(150, 133, 143, 0.4), + $actions-background: rgba(109, 121, 147, 0.6), + $icon-color: null, + $delete-action: null, + $actions-border-radius: 0, ); ``` The last step is to include the newly created component theme in our application. -When `$legacy-support` is set to `false`(default), include the component css variables like this: ```scss @include css-vars($custom-strip); ``` -When `$legacy-support` is set to `true`, include the component theme like this: -```scss -@include action-strip($custom-strip); -``` - -## Known Issues and Limitations - -- Using the Action Strip component on IE11 requires the explicit import of the array polyfill in polyfill.ts of the angular application. - - ```typescript - import 'core-js/es7/array'; - ``` - ## API and Style References For more detailed information regarding the Action Strip API, refer to the following links: -* [`IgxActionStripComponent API`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html) + +- [`IgxActionStripComponent API`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html) The following built-in CSS styles helped us achieve this Action Strip layout: -* [`IgxActionStripComponent Styles`]({environment:sassApiUrl}/index.html#function-action-strip-theme) +- [`IgxActionStripComponent Styles`]({environment:sassApiUrl}/index.html#function-action-strip-theme) Additional components and/or directives that can be used within the Action Strip: -* [`IgxGridActionsBaseDirective `]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html) -* [`IgxGridPinningActionsComponent`]({environment:angularApiUrl}/classes/igxgridpinningactionscomponent.html) -* [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html) -* [`IgxDividerDirective`]({environment:angularApiUrl}/classes/igxdividerdirective.html) - +- [`IgxGridActionsBaseDirective `]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html) +- [`IgxGridPinningActionsComponent`]({environment:angularApiUrl}/classes/igxgridpinningactionscomponent.html) +- [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html) +- [`IgxDividerDirective`]({environment:angularApiUrl}/classes/igxdividerdirective.html)
## Theming Dependencies -* [IgxButton Theme]({environment:sassApiUrl}/index.html#function-button-theme) -* [IgxRipple Theme]({environment:sassApiUrl}/index.html#function-ripple-theme) -* [IgxDropDown Theme]({environment:sassApiUrl}/index.html#function-drop-down-theme) -* [IgxIcon Theme]({environment:sassApiUrl}/index.html#function-icon-theme) + +- [IgxButton Theme]({environment:sassApiUrl}/index.html#function-button-theme) +- [IgxRipple Theme]({environment:sassApiUrl}/index.html#function-ripple-theme) +- [IgxDropDown Theme]({environment:sassApiUrl}/index.html#function-drop-down-theme) +- [IgxIcon Theme]({environment:sassApiUrl}/index.html#function-icon-theme) ## Additional Resources
Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/en/components/autocomplete.md b/en/components/autocomplete.md index 813007b0ec..4510c869a9 100644 --- a/en/components/autocomplete.md +++ b/en/components/autocomplete.md @@ -11,7 +11,6 @@ Angular Autocomplete is a search box directive that enables users to easily find The [`igxAutocomplete`]({environment:angularApiUrl}/classes/igxautocompletedirective.html) directive provides a way to enhance a text input by showing an [`igxDropDown`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) with suggested options, provided by the developer. The suggestions will show once you start typing in the text input or use the `Arrow Up`/`Arrow Down` keys.

-
## Angular Autocomplete Example @@ -256,7 +255,7 @@ The `drop-down` component, used as provider for suggestions, will expose the fol ## Styling Every component has its own theme. -To get the `igxAutocomplete` styled, you have style its containing components. In our case, we need to use both the [input-group-theme]({environment:sassApiUrl}/index.html#function-input-group-theme) and the [drop-down-theme]({environment:sassApiUrl}/index.html#function-drop-down-theme). +To get the `igxAutocomplete` styled, you have to style its containing components. In our case, these are the [input-group-theme]({environment:sassApiUrl}/index.html#function-input-group-theme) and the [drop-down-theme]({environment:sassApiUrl}/index.html#function-drop-down-theme). Take a look at the [`igxInputGroup`](input-group.md#styling) and the [`igxDropdown`](drop-down.md#styling) styling sections to get a better understanding of how to style those two components. diff --git a/en/components/badge.md b/en/components/badge.md index 0f516db26c..ebb4161795 100644 --- a/en/components/badge.md +++ b/en/components/badge.md @@ -6,7 +6,6 @@ _keywords: Angular Badge component, Angular Badge control, Ignite UI for Angular # Angular Badge Component Overview

Angular Badge is a component used in conjunction with avatars, navigation menus, or other components in an application when a visual notification is needed. Badges are usually designed as icons with a predefined style to communicate information, success, warnings, or errors.

-
## Angular Badge Example @@ -302,18 +301,12 @@ Following the simplest approach, we create a new theme that extends the [`badge- ```scss $custom-badge-theme: badge-theme( - $schema: $light-bootstrap-schema, + $border-radius: 15px, $icon-color: white, $text-color: black, - $shadow: 3px 2px 5px 0px rgba(0,0,0,0.4), - $border-radius: 15px ); ``` -### Including Themes - -
- To include the new theme we use the `css-vars` mixin: ```scss diff --git a/en/components/button-group.md b/en/components/button-group.md index 73c839119b..961aad6848 100644 --- a/en/components/button-group.md +++ b/en/components/button-group.md @@ -5,6 +5,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Angular Button Group Component Overview +

Angular Button Group component is used to organize buttons into styled button groups with horizontal/vertical alignment, single/multiple selection and toggling.

## Angular Button Group Example @@ -24,9 +25,9 @@ To get started with the Ignite UI for Angular Button Group component, first you ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. -The next step is to import the `IgxButtonGroupModule` in your **app.module.ts** file. +The next step is to import the `IgxButtonGroupModule` in your **app.module.ts** file. ```typescript // app.module.ts @@ -89,24 +90,25 @@ Use the [`igx-buttongroup`]({environment:angularApiUrl}/classes/igxbuttongroupco ```html - - - - + + + + ``` ## Examples ### Alignment + Use the [`alignment`]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html#alignment) input property to set the orientation of the buttons in the button group. ```typescript @@ -122,14 +124,13 @@ public alignment = ButtonGroupAlignment.vertical; ```html - - - - + + + + ``` - @@ -139,7 +140,8 @@ public alignment = ButtonGroupAlignment.vertical; ### Selection -In order to configure the `igx-buttongroup` selection, you could use its [selectionMode]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html#selectionMode) property. This property accepts the following three modes: +In order to configure the `igx-buttongroup` selection, you could use its [selectionMode]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html#selectionMode) property. This property accepts the following three modes: + - **single** - default selection mode of the button group. A single button can be selected/deselected by the user. - **singleRequired** - mimics a radio group behavior. Only one button can be selected and once initial selection is made, deselection is not possible through user interaction. - **multi** - multiple buttons in the group can be selected and deselected. @@ -151,14 +153,14 @@ The sample below demonstrates the exposed `igx-buttongroup` selection modes: iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-4" > - ### Size + The `--ig-size` CSS custom property can be used to control the size of the button group. ```scss /* sample.component.scss */ igx-buttongroup { - --ig-size: var(--ig-size-small); + --ig-size: var(--ig-size-small); } ``` @@ -167,14 +169,13 @@ igx-buttongroup { ``` - - ### Custom toggle buttons + Use the [`values`]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html#values) input property to set an array of customized buttons in the button group. ```typescript @@ -237,16 +238,17 @@ public ngOnInit() { ```html - + ``` - - ## Styling To get started with styling the button group, we need to import the `index` file, where all the theme functions and component mixins live: @@ -256,76 +258,60 @@ To get started with styling the button group, we need to import the `index` file // 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 [`button-group-theme`]({environment:sassApiUrl}/index.html#function-button-group-theme) and accepts some of the parameters that style the button group's items in their different states. ```scss $custom-button-group: button-group-theme( - $item-text-color: #fdfdfd, - $item-background: #2f4d6a, - $item-hover-text-color: #fdfdfd, - $item-hover-background: #1f3347, - $item-selected-text-color: #fdfdfd, - $item-selected-background: #1f3347, - $item-selected-hover-background: #1f3347, - $disabled-text-color: gray, - $disabled-background-color: lightgray + $item-text-color: #fdfdfd, + $item-background: #2f4d6a, + $item-hover-text-color: #fdfdfd, + $item-hover-background: #1f3347, + $item-selected-text-color: #fdfdfd, + $item-selected-background: #1f3347, + $item-selected-hover-background: #1f3347, + $disabled-text-color: gray, + $disabled-background-color: lightgray, ); ``` As seen, the `button-group-theme` exposes some useful parameters for basic styling of its items. If you want to drill deeper and change some button specific parameters, you can create a new theme that extends the `button-theme` and scope it under the respective button group class. -### Using CSS variables - The last step is to include the component's theme. ```scss @include css-vars($custom-button-group); ``` -### Using Theme Overrides - -In order to style components for older browsers, like Internet Explorer 11, we have to use a different approach, since it doesn't support CSS variables. - -If the component is using the [`Emulated`](themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`. To prevent the custom theme to leak into other components, be sure to include the `:host` selector before `::ng-deep`: - -```scss -:host { - ::ng-deep { - @include button-group($custom-button-group); - } -} -``` - ### Demo - - ## API References +
-* [IgxButtonGroupComponent]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html) -* [IgxButtonGroup Styles]({environment:sassApiUrl}/index.html#function-button-group-theme) -* [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html) -* [IgxButton Styles]({environment:sassApiUrl}/index.html#function-button-theme) +- [IgxButtonGroupComponent]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html) +- [IgxButtonGroup Styles]({environment:sassApiUrl}/index.html#function-button-group-theme) +- [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html) +- [IgxButton Styles]({environment:sassApiUrl}/index.html#function-button-theme) ## Theming Dependencies -* [IgxIcon Theme]({environment:sassApiUrl}/index.html#function-icon-theme) -* [IgxButton Theme]({environment:sassApiUrl}/index.html#function-button-theme) -* [IgxRipple Theme]({environment:sassApiUrl}/index.html#function-ripple-theme) + +- [IgxIcon Theme]({environment:sassApiUrl}/index.html#function-icon-theme) +- [IgxButton Theme]({environment:sassApiUrl}/index.html#function-button-theme) +- [IgxRipple Theme]({environment:sassApiUrl}/index.html#function-ripple-theme) ## Additional Resources +
Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) - +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/en/components/button.md b/en/components/button.md index ef6eeb826d..fea710da45 100644 --- a/en/components/button.md +++ b/en/components/button.md @@ -11,6 +11,7 @@ Angular Button directive is used for creating and adding actionable buttons to a The Ignite UI for Angular Button directive is intended to turn any button, span, div, or anchor element into a fully functional button. You can use the following Angular Button types - Flat Button, Contained Button, Outlined Button, and Floating Action Button. With customizable colors, options to create themes and change the Angular Button Style and enabling users to choose the button size and more. ## Angular Button Example + We have created the Angular Button example below to show you how different button types can appear and look like when they are styled with a border or when a transparent background is applied.
@@ -30,9 +31,9 @@ To get started with the Ignite UI for Angular Button directive, first you need t ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. -The next step is to import the `IgxButtonModule` in your **app.module.ts** file. +The next step is to import the `IgxButtonModule` in your **app.module.ts** file. ```typescript // app.module.ts @@ -109,7 +110,7 @@ Analogically, we can switch to outlined type: ### Icon Button -As of version `17.1.0` the IgniteUI for Angular exposes a new `igxIconButton` directive intended to turn icons into fully functional buttons. You can read more about the [*Icon Button here*](icon-button.md). +As of version `17.1.0` the IgniteUI for Angular exposes a new `igxIconButton` directive intended to turn icons into fully functional buttons. You can read more about the [_Icon Button here_](icon-button.md). ```html ``` ->[!NOTE] ->To get the extended FAB text styled properly, use `` or `
` tags. +> [!NOTE] +> To get the extended FAB text styled properly, use `` or `
` tags.
- ### Inactive Icon If you want to disable an icon, you can use the [`active`]({environment:angularApiUrl}/classes/igxiconcomponent.html#active) property: @@ -89,6 +88,7 @@ If you want to disable an icon, you can use the [`active`]({environment:angularA ```html volume_off ``` +
@@ -111,22 +111,23 @@ You can customize the icons using CSS. To change an icon size use the `--size` C ```scss .custom-size { - --size: 56px; + --size: 56px; } ``` +
## SVG Icons -You can also use an SVG image as an icon. First, inject the [`IgxIconService`]({environment:angularApiUrl}/classes/igxiconservice.html) dependency. In this example we will inject it in a component's constructor but you can use it wherever it is needed in your code. +You can also use an SVG image as an icon. First, inject the [`IgxIconService`]({environment:angularApiUrl}/classes/igxiconservice.html) dependency. In this example we will inject it in a component's constructor but you can use it wherever it is needed in your code. Use the [`addSvgIcon`]({environment:angularApiUrl}/classes/igxiconservice.html#addSvgIcon) method to import the SVG file in cache. When the SVG is cached, it can be used anywhere in the application. The icon name and file URL path are the method's mandatory parameters; family can be specified as well. After that, you can use the SVG files in the HTML markup. Alternatively, you can use the `addSvgIconFromText` method to import an SVG file, providing the SVG text content instead of the file URL. -* Have in mind that if there are two icons with the same name and the same family, the SVG icon will be displayed with priority. -* It is better not to provide image width and height in the SVG file. -* You may need additional polyfill scripts ("polyfills") for Internet Explorer. +- Have in mind that if there are two icons with the same name and the same family, the SVG icon will be displayed with priority. +- It is better not to provide image width and height in the SVG file. +- You may need additional polyfill scripts ("polyfills") for Internet Explorer. ```typescript constructor(private iconService: IgxIconService) { } @@ -141,7 +142,6 @@ public ngOnInit() { ``` - @@ -152,10 +152,13 @@ public ngOnInit() { Additionally, users can take advantage of the latest Material icons and their design variations included in the newly created [`Material Symbols Library`](https://fonts.google.com/icons). To start using Material Symbols, first you have to add the library to your application: ```html - + ``` -Then we need to inject the [`IgxIconService`]({environment:angularApiUrl}/classes/igxiconservice.html) dependency and make use of its `setFamily` method so that Material Symbols can work with `igx-icon`: +Then we need to inject the [`IgxIconService`]({environment:angularApiUrl}/classes/igxiconservice.html) dependency and make use of its `setFamily` method so that Material Symbols can work with `igx-icon`: ```ts constructor(private iconService: IgxIconService) { } @@ -169,16 +172,16 @@ public ngOnInit() { Now, we are ready to add the desired icon into our markup and customize it using adjustable font styles: ```html - + ``` ```scss .custom-icon { - font-variation-settings: - 'FILL' 0, - 'wght' 200, - 'GRAD' 0, - 'opsz' 40 + font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 40; } ``` @@ -191,12 +194,11 @@ To learn more about Material Symbols styles please visit their [`official docume ## Server-side Rendering Note ->[!NOTE] +> [!NOTE] > In case you have implemented server side rendering logic in your application using Angular Universal and have used the `IgxIconService` to register icons, this may cause the following exception: -

-`XMLHttpRequest is not defined. Could not fetch SVG from url.` -

-In order to avoid this, execute the listed steps: +>

> `XMLHttpRequest is not defined. Could not fetch SVG from url.` >

+> In order to avoid this, execute the listed steps: +
  1. Install `xmlhttprequest`: @@ -204,13 +206,15 @@ Install `xmlhttprequest`: ```cmd npm i xmlhttprequest ``` +
  2. -On the top of your `server.ts` file, add: +On the top of your `server.ts` file, add: ```typescript -(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest; +(global as any).XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; ``` +
@@ -223,37 +227,21 @@ To get started with styling the icons, 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 [`icon-theme`]({environment:sassApiUrl}/index.html#function-icon-theme) and accepts the parameters, required to customize the icon as desired. +Following the simplest approach, we create a new theme that extends the [`icon-theme`]({environment:sassApiUrl}/index.html#function-icon-theme) and accepts the parameters, required to customize the icon as desired. ```scss $custom-icon-theme: icon-theme( $color: #1481b8, - $disabled-color: #494949 + $disabled-color: #494949, ); -``` - -### Using CSS variables - -The last step is to pass the custom icon theme in our application: - -```scss - @include css-vars($custom-icon-theme); ``` -### Using Theme Overrides - -In order to style components for older browsers, like Internet Explorer 11, we have to use a different approach, since it doesn't support CSS variables. - -If the component is using the [`Emulated`](themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`. To prevent the custom theme to leak into other components, be sure to include the `:host` selector before `::ng-deep`: +The last step is to pass the custom icon theme in our application: ```scss -:host { - ::ng-deep { - @include icon($custom-icon-theme); - } -} +@include css-vars($custom-icon-theme); ``` ### Demo @@ -275,11 +263,13 @@ igx-icon { ``` Or you can use the universal `--igx-icon-size` variable to target all instances: + ```html
``` + ```scss .my-app { --igx-icon-size: 50px; @@ -290,22 +280,24 @@ You can also use one of the predefined sizes, assigning it to the `--ig-size` va ```scss igx-icon { - --ig-size: var(--ig-size-medium); + --ig-size: var(--ig-size-medium); } ``` Learn more about it in the [Size](display-density.md) article. ## API References +
-* [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) -* [IgxIconComponent Styles]({environment:sassApiUrl}/index.html#function-icon-theme) +- [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) +- [IgxIconComponent Styles]({environment:sassApiUrl}/index.html#function-icon-theme) ## Additional Resources +
Our community is active and always welcoming to new ideas. -* [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) +- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/en/components/input-group.md b/en/components/input-group.md index 857f72c34e..c2d7dc6422 100644 --- a/en/components/input-group.md +++ b/en/components/input-group.md @@ -6,7 +6,6 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI # Angular Input Group Component Overview The `IgxInputGroupComponent` allows the user to enhance input elements like input, select, textarea, etc. This can be achieved by adding custom content like text, icons, buttons, custom validation, floating label, etc., on either side of them, as a prefix, suffix, or hint. -
## Angular Input Group Example @@ -463,30 +462,12 @@ $custom-input-group: input-group-theme( ); ``` -### Using CSS variables - The last step is to include the newly created theme: ```scss @include css-vars($custom-input-group); ``` -### Using Theme Overrides - -In order to style components for older browsers, like Internet Explorer 11, we have to use the [input group mixin]({environment:sassApiUrl}/index.html#mixin-igx-input-group), since it doesn't support CSS variables. - -However, if we just leave the include statement, as shown in the previous step, our styles will not properly apply - while our text color has properly changed, the bottom border and the background remain the same. This is because our component is using the [`Emulated`](themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation. The `input` and `label` elements are part of that view, so their styles are applied correctly. The bottom border, on the other hand, is generated by the `igx-input-group` component and is **not** affected by the styles of our component. - -In order to style the border, we have to `penetrate` this encapsulation using `::ng-deep`. To prevent the custom theme to leak into other components, we also need to make sure that we scope the styles with a `:host` selector before the `::ng-deep`: - -```scss -:host { - ::ng-deep { - @include input-group($custom-input-group); - } -} -``` - ### Demo diff --git a/en/components/label-input.md b/en/components/label-input.md index 945944583f..9376fc7070 100644 --- a/en/components/label-input.md +++ b/en/components/label-input.md @@ -5,9 +5,8 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Angular Label & Input Directives Overview -The Ignite UI for Angular Input and Label directives are used to decorate and style single-line or multi-line input elements in an `igx-input-group` component. -
+The Ignite UI for Angular Input and Label directives are used to decorate and style single-line or multi-line input elements in an `igx-input-group` component. ## Angular Label & Input Example @@ -26,7 +25,7 @@ To get started with the Ignite UI for Angular Label and Input directives, first ng add igniteui-angular ``` -For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. +For a complete introduction to the Ignite UI for Angular, read the [_getting started_](general/getting-started.md) topic. The next step is to import the `IgxInputGroupModule` in your **app.module.ts** file. @@ -51,31 +50,32 @@ Alternatively, as of `16.0.0` you can import the `IgxLabelDirective`, `IgxInputD ```typescript // home.component.ts -import { FormsModule } from '@angular/forms'; -import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular'; +import { FormsModule } from "@angular/forms"; +import { IGX_INPUT_GROUP_DIRECTIVES } from "igniteui-angular"; // import { IGX_INPUT_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package @Component({ - selector: 'app-home', - template: ` + selector: "app-home", + template: ` - - + + - `, - styleUrls: ['home.component.scss'], - standalone: true, - imports: [IGX_INPUT_GROUP_DIRECTIVES, FormsModule] - /* or imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, FormsModule] */ + `, + styleUrls: ["home.component.scss"], + standalone: true, + imports: [IGX_INPUT_GROUP_DIRECTIVES, FormsModule], + /* or imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, FormsModule] */ }) export class HomeComponent { - public fullName = 'John Doe'; + public fullName = "John Doe"; } ``` Now that you have the Ignite UI for Angular Input Group module or directives imported, you can start using the `igxLabel` and `igxInput` directives and the `igx-input-group` component. ## Using the Angular Label & Input + The default styling of the Label and Input directives follows the text fields specification in the Material Design [**guidelines**](https://material.io/guidelines/components/text-fields.html). @@ -83,24 +83,24 @@ To use the [`igxInput`]({environment:angularApiUrl}/classes/igxinputdirective.ht ```html - - + + ``` The `igxInput` directive could be applied to `` and `