From 9ed80e04b7dc6ff3d222ec346b823c527ea092fa Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 10 Sep 2026 15:46:42 +0300 Subject: [PATCH 1/3] docs(angular): consolidate duplicate theming topics into themes/index.mdx Closes #558 --- .../src/content/en/components/themes.mdx | 169 ------------------ .../content/en/components/themes/index.mdx | 164 +++++++++-------- src/content.config.ts | 1 - 3 files changed, 92 insertions(+), 242 deletions(-) delete mode 100644 docs/angular/src/content/en/components/themes.mdx diff --git a/docs/angular/src/content/en/components/themes.mdx b/docs/angular/src/content/en/components/themes.mdx deleted file mode 100644 index da4dccf952..0000000000 --- a/docs/angular/src/content/en/components/themes.mdx +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Theming Component - Native Angular | Ignite UI for Angular | MIT license -description: The Ignite UI for Angular Theming component was developed through SASS with a low-difficulty API that offers restyling of one component, multiple components, or the entire suite. -keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Native Angular Components, Angular Theming Component, Angular Theming -license: MIT -llms: - description: "With only a few lines of code, users can easily change the theming for their components." ---- - -import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; - -# Themes - -With only a few lines of code, users can easily change the theming for their components. Being developed through SASS, the API use is low-difficulty and offers restyling of one component, multiple components, or the entire suite. - -## The Essence of a Theme - -Since **IgniteUI for Angular** bases its component designs on the **Material Design Guidelines**, we try to get as close as possible to colors, sizes, and overall look and feel of our components to those created by Google. - -Our approach to theming is based around several simple concepts. - -### Palettes - -The first concept is the one of palettes of colors. As in any visual tool, colors are the main difference between one application and another. The Material Design Guidelines prescribe predefined palettes of colors that range in hue and lightness for a base color. There's a good reason for that. They really want to ensure good color matching and contrast between the background colors and the foreground text colors. This is great, but limiting at the same time. If you wanted to have your own custom palette that matches your branding, you would be out of luck. We recognize this is a problem, so we invented an algorithm that would generate Material-like palettes from base colors you provide. Even more, we also generate contrast text colors for each hue in the palette. - -### Themes - -The second concept is the one of themes. Palettes, wouldn't do much good if they weren't used by a theme. So we have themes for each component, and a global one, that styles the entire application and every component in it. You simply pass your generated palette to the global theme, we take care of the rest. You can, of course, style each component individually to your liking. We will take a closer look at how to do that later in this article. - -### Typography - -The last concept revolves around typography. Although we have a default typeface choice, we really want to give you the power to style your application in every single way. Typography is such an important part of that. We provide a method for changing the font family, the sizes and weights for headings, subheadings and paragraph texts in your app. - - -Theming **requires** [**Sass**](https://github.com/sass/node-sass). - - -## 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.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`, `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 some 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"_. - -```scss -@use "igniteui-angular/theming" as *; - -// IMPORTANT: Prior to Ignite UI for Angular version 13 use: -// @import '~igniteui-angular/lib/core/styles/themes/index'; - -$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 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 `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? - - - -### Getting Sub-Palette Colors - -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-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 { - background: $my-primary-600; - border-color: $my-primary-A700; -} - -.warning-bg { - background: $my-warning-color; -} -``` - - - -### Getting Contrast Text Colors - -Similar to how we get sub-palette colors, there's a way to get the contrast text color for each of the colors in the sub-palettes. - -```scss -$my-primary-800: color($my-palette, "primary", 600); -$my-primary-800-text: contrast-color($my-palette, "primary", 600); -// sample usage - -.my-awesome-article { - background: $my-primary-800; - color: $my-primary-800-text; -} -``` - -## Generating a Theme - -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 a few - `$palette`, `$schema`, `$exclude`, `$roundness`, `$elevation`, `$elevations`. For now, we'll only talk about the `$palette` argument. - - -Including `core` before `theme` is essential. The `core` mixin provides all base definitions needed for `theme` to work. - - -```scss -// Import the IgniteUI themes library first -@use "igniteui-angular/theming" as *; - -// IMPORTANT: Prior to Ignite UI for Angular version 13 use: -// @import '~igniteui-angular/lib/core/styles/themes/index'; - -$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! -@include core(); -// Pass the color palette we generated to the theme mixin -@include theme($my-color-palette); -``` - -That's it. Your application will now use the colors from your newly generated palette. - - -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. - -To customize the typography use the `typography` mixin. It takes exactly one argument - `config`. - - -Including `typography` after `core` is essential. This is subject to change in future releases. - - -```scss -// Import the IgniteUI themes library first -@use "igniteui-angular/theming" as *; - -// IMPORTANT: Prior to Ignite UI for Angular version 13 use: -// @import '~igniteui-angular/lib/core/styles/themes/index'; - -// IMPORTANT: Make sure you always include core first! -@include core(); -// Include typography before theme -@include typography( - $config: ( - font-family: "Comic Sans MS", - ) -); -@include theme($default-palette); -``` diff --git a/docs/angular/src/content/en/components/themes/index.mdx b/docs/angular/src/content/en/components/themes/index.mdx index 39a4a5dadb..997ac13efd 100644 --- a/docs/angular/src/content/en/components/themes/index.mdx +++ b/docs/angular/src/content/en/components/themes/index.mdx @@ -1,9 +1,10 @@ --- -title: Theming Engine - Angular | Ignite UI for Angular -description: The Ignite UI for Angular Theming engine was developed through SASS with a low-difficulty API that offers restyling of one component, multiple components, or the entire application. -keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Native Angular Components, Angular Theming Engine, Angular Theming +title: Theming +description: Ignite UI for Angular theming lets you restyle components with CSS custom properties and an optional Sass engine, from a single component to your entire application. +keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Native Angular Components, Angular Theming Engine, Angular Theming, CSS variables, Sass theming, palettes, elevations, roundness llms: - description: "Ignite UI for Angular allows you to modify the styles of all component themes using CSS variables." + description: "Ignite UI for Angular allows you to modify the styles of all component themes using CSS variables, or go deeper with its Sass theming engine." +last_updated: "2026-09-10" --- import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; @@ -11,23 +12,25 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro' # Theming -Ignite UI for Angular allows you to modify the styles of all component themes using CSS variables. If you really wanted to dig deep, we provide a powerful Sass theming engine that allows you to create global component themes tailored to your specific design language that work in all modern browsers. +Ignite UI for Angular allows you to modify the styles of all component themes using CSS variables, or go deeper with a powerful Sass theming engine that lets you create global or component themes tailored to your specific design language, in all modern browsers. -This document describes the theming system in Ignite UI for Angular from version 12 forward. Starting with version 12 **CSS variables are the recommended way to modify the global and component themes**. -You can still use the Sass theming library as you would've prior to version 12. +This document describes the theming system in Ignite UI for Angular from version 12 forward. Starting with version 12, **CSS variables are the recommended way to modify the global and component themes**. The Sass theming library is still available and works alongside CSS variables. -## Basic Usage +## Key Features -Ignite UI for Angular includes the following themes as part of its package: +| Feature | Description | Benefit | +| :------ | :----------- | :------ | +| Bundled design-system themes | Material, Bootstrap, Fluent, and Indigo themes, each with light and dark variants and built-in LTR/RTL support. | Get a production-ready look with a single stylesheet reference — no build step required. | +| CSS custom properties | Every theme exposes color, elevation, typography, and configuration values as `--ig-*` CSS variables. | Restyle components at runtime, per-application or per-instance, without recompiling Sass. | +| Sass theming engine | The same Sass API used internally to build every bundled theme, exposed as public mixins and functions. | Generate palettes, exclude unused component tokens, and build fully custom themes at compile time. | +| Global and local component variables | Each component exposes a global (`--ig-[component]-*`) and a local (`--*`) variable for the same property. | Override a look application-wide, then selectively override individual instances without extra CSS specificity tricks. | +| Configurable roundness and elevation | Single `--ig-radius-factor` and `--ig-elevation-factor` variables scale every component's corners and shadows. | Change the overall shape and depth of the UI without touching individual component styles. | -- Material -- Bootstrap -- Fluent -- Indigo +## Bundled Themes -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: +All themes ship with light and dark variants and support left-to-right (LTR) and right-to-left (RTL) content by default. The easiest way to use a bundled theme is to reference its CSS file in your `angular.json` configuration. For example, to use the dark Material theme: ```json "styles": [ @@ -37,7 +40,7 @@ All themes have light and dark variants as well as support for left-to-right(LTR ``` -If you've installed the Ignite UI for Angular package using `ng add igniteui-angular`, you will have noticed that we've already added `igniteui-angular.css` to the styles array. +If you installed Ignite UI for Angular using `ng add igniteui-angular`, `igniteui-angular.css` is already added to the styles array for you. Here's the full list of themes included in the styles folder: @@ -58,19 +61,15 @@ Here's the full list of themes included in the styles folder: | **Indigo Light** | `node_modules/igniteui-angular/styles/igniteui-indigo-light.css` | | **Indigo Dark** | `node_modules/igniteui-angular/styles/igniteui-indigo-dark.css` | -As you can see, we ship Ignite UI for Angular with a substantial amount of themes. +All bundled themes are compiled from the same Sass source, using the theming engine's public `mixins` and `functions`. If Sass isn't your thing, that's fine — every compiled theme also exposes its values as [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), so you can restyle it without a Sass build step. You can also combine both approaches in the same project. -This is not the end of our theming story, though. All themes are compiled from Sass source and are built using our powerful theming engine. This engine contains Sass `mixins` and `functions` many of which are publicly exposed, which allows you to completely redesign all components in your application. +## Customizing with CSS Variables -If Sass isn't your thing that's completely fine, we've made it easy to modify the compiled themes using [custom CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), or otherwise known as CSS variables. You can still use Sass in combination with CSS variables. +Every bundled CSS theme declares its variables in the `:root` scope, covering `colors`, `shadows`, `typography`, and `configuration`. Changing any of them updates the corresponding component styles across your application. -## Global Variables +### Palette Colors -If you inspect any of the CSS themes above, you will notice that there are quite a few CSS variables included in the `:root` scope; We include variables for `colors`, `shadows`, `typography`, and `configuration`. Modifying any of these variables will allow you to customize the overall look and feel of the theme and conversely the components. - -What most people look for when modifying a theme is changing the default colors used by the components. - -If you wanted to change the primary and secondary colors, all you have to do is type the following in your `styles.css` file: +To change the primary and secondary colors, set the corresponding variables in your `styles.css` file: ```css /* styles.css */ @@ -81,17 +80,15 @@ If you wanted to change the primary and secondary colors, all you have to do is } ``` -Let's break down the names of these color variables. The `ig` prefix is there as a unique identifier to indicate that this variable is part of an Ignite UI for Angular theme, `primary` is the color variable name, and `500` stands for the color variant. We will take a deeper look at palettes in the [Palettes](/themes/palettes) section of the documentation. For now all you need to know is that we have several base color variables (primary, secondary, surface, success, info, etc.) that include different shades or _variants_ that are all generated from the main color variants. The `500` color variants that we set in the above example are considered the main variable color and all of the other variants for the given color variable are generated from the `500` variant. - -Changing these variants, you can completely overhaul the entire palette. +The `ig` prefix identifies the variable as part of an Ignite UI for Angular theme, `primary` names the color variable, and `500` is the color variant. Ignite UI for Angular ships several base color variables (`primary`, `secondary`, `surface`, `success`, `info`, and more), each with a range of variants generated from its `500` (main) value. Changing the `500` variant regenerates the rest of that color's palette. See [Palettes](/themes/palettes) for the full list of variants. -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. -To find out which palette colors are used by what component, take a look at the . +Some components do not use colors from the palettes. In those instances, target the component's CSS variables directly to modify their colors. To find out which palette colors a component uses, see the . -Likewise, changing the `elevations`(shadows) is just as easy. We include 25 elevation levels (0-24). -Here's a simplified version of what those variables look like: +### Elevations + +Elevations (shadows) work the same way, across 25 levels (0–24): ```css /* styles.css */ @@ -107,43 +104,37 @@ Here's a simplified version of what those variables look like: } ``` -These are essentially stacked CSS [`box-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) declarations. You can replace them with any other valid `box-shadow` value. The higher the elevation level number is, the bigger the shadow is. Again, different components use different elevation levels, to find out which elevation levels are used by which component, take look at the . We will take a deeper look at elevations in the [Elevations](/themes/elevations) of the documentation. +Each variable is a stacked CSS [`box-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) declaration; you can replace any of them with another valid `box-shadow` value. The higher the elevation level, the larger the shadow. Different components use different elevation levels by default — see [Elevations](/themes/elevations) for the full breakdown, and the for which level each component uses. -## Configuration +### Roundness and Elevation Factor -There are several variables that allow you to configure the global behavior of the theme: +Two variables configure component shape and depth globally: -### Roundness +- `--ig-radius-factor` sets the radius factor of all components. The default is `1`. Set it to `0` to make every component's corners square: -To configure the radius factor of all components you can change the value of the `--ig-radius-factor` variable. The default value is 1, meaning the default radius factor is used across component themes. + ```css + /* Makes all components appear blocky in shape */ + :root { + --ig-radius-factor: 0; + } + ``` -Example: +- `--ig-elevation-factor` sets the elevation (shadow) factor of all components. The default is `1`. Set it to `0` to remove shadows entirely: -```css -/* Makes all components appear blocky in shape */ -:root { - --ig-radius-factor: 0; -} -``` + ```css + /* Makes all components appear flat (no shadows) */ + :root { + --ig-elevation-factor: 0; + } + ``` -### Elevation Factor +See [Roundness](/themes/roundness) to scope `--ig-radius-factor` to individual components instead of the whole application. -To configure the elevation factor of all components you can change the value of the `--ig-elevation-factor` variable. The default value is 1, meaning the default elevations are used across component themes. +### Component Variables -Example: +Every component exposes two variables for each themeable property: a **global** variable (prefixed `--ig-[component-name]-`) and a **local** variable (`--*`). Both modify the same property; the difference is scope. Global variables apply from any parent selector to all instances of a component. Local variables apply only to the instances matched by the selector that sets them, and always take priority over the global variable. -```css -/* Makes all components appear flat (no-shadows) */ -:root { - --ig-elevation-factor: 0; -} -``` - -## Component Variables - -All components provide the ability to modify their themes using component-specific CSS variables. Each component exposes two variables that modify the same property. The exposed variables can be thought of as `global` and `local`. They both modify the component theme in the same way, the only difference is that `global` variables have the `igx-[component-name]` prefix attached to the variable name and can be used from parent selectors to style child components, while `local` variables are specific to a component instance. - -Let's look at an example. Say you wanted to modify the background of the avatar. The avatar looks for the following CSS variables that modify its background: +For example, the avatar component looks for `--ig-avatar-background` (global) and `--background` (local): ```css /* styles.css */ @@ -156,12 +147,7 @@ igx-avatar { } ``` -The snippet above will set the background in all avatars to orange. - -The avatar component will look for the `--background` variable first. If explicitly set, it will take its value. In other words, `local` variables have higher priority and will work **only** if applied to the `igx-avatar` directly, either by using its tag selector or any other selector that targets `igx-avatar`. -The global `--ig-avatar-background` can be thought of as _fallback_ variable. It's going to be used only if the local `--background` is not explicitly overridden. - -For the curious, here's how this is implemented internally in the avatar: +This sets the background of every avatar to orange, because the local `--background` variable overrides the global one wherever it's set on `igx-avatar` directly. Here's how the avatar implements this internally: ```css igx-avatar { @@ -170,9 +156,7 @@ igx-avatar { } ``` -You would generally use _global_ variables when you want to apply changes to all instances of a component while _local_ variables target specific component instances and will always override the global variable. - -Here's another example: +Use the global variable to restyle all instances of a component at once; use the local variable to target specific instances. For example: ```html {/* app.component.html */} @@ -201,21 +185,57 @@ igx-avatar { } ``` -Avatars `AB` and `CD` will use the globally set _lavender_ color as background, while avatars `EF` and `GH` will have _purple_ backgrounds. +Avatars `AB` and `CD` use the globally set _lavender_ background, while avatars `EF` and `GH` — scoped under `contacts.component.css` — use _purple_. -**Each component has all of its theme properties documented in the styling section of the component documentation.** +**Each component documents its own theme properties in the styling section of its topic.** -This should be all you need to get you started with theming. You can modify global palette colors, elevations, and change component theme properties by creating global and local component themes. If you want to learn more, we have extensive documentation covering topics like **Palettes**, **Elevations**, **Typography**, and **Theming with Sass** in depth. +## Sass Theming Engine -## Additional Resources +If CSS variables don't give you enough control — for example, you need several reusable theme variants of the same component, or you want to tree-shake the generated CSS down to only the components you use — use the Sass theming engine directly. It exposes the same `palette`, `core`, and `theme` APIs used to build every bundled theme: + +```scss +// Import the theming module +@use "igniteui-angular/theming" as *; + +$my-color-palette: palette( + $primary: #2ab759, + $secondary: #f96a88, + $surface: #e5e5e5 +); + +// IMPORTANT: Always include core() first — it provides the base +// definitions theme() depends on. +@include core(); +@include theme($my-color-palette); +``` + +See [Theming with Sass](/themes/sass) for the full concept breakdown — palettes, schemas, typography, roundness, elevations, and animations — and how to build global or component-scoped themes with it. + +## Accessibility -Related topics: +Palette colors and their contrast text colors are generated together: every color variant in a palette has a matching `-contrast` variant (black or white) chosen for readable contrast against it, retrievable with the Sass `contrast-color` function. See [Palettes](/themes/palettes) for how to read a variant's contrast color. + +The `core()` Sass mixin accepts an `$enhanced-accessibility` argument (default `false`). Enabling it switches chart color brushes to a color-blind–friendly palette instead of the regular one: + +```scss +@include core($enhanced-accessibility: true); +``` + +## API References + +- + +## Next Steps - [Palettes](/themes/palettes) - [Elevations](/themes/elevations) - [Typography](/themes/typography) +- [Roundness](/themes/roundness) +- [Spacing](/themes/spacing) - [Theming with Sass](/themes/sass) +## 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) diff --git a/src/content.config.ts b/src/content.config.ts index 1fc7dcdd96..bf19164b3c 100644 --- a/src/content.config.ts +++ b/src/content.config.ts @@ -12,7 +12,6 @@ export const collections = { 'grids_templates/**', 'style-guide.mdx', 'themes/sass/presets/**', - 'themes.mdx', ], extendSchema: z.object({ tableOfContents: z From cb22fc373fcd10df6553b6aeedc85678e38ec826 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 10 Sep 2026 15:54:40 +0300 Subject: [PATCH 2/3] fix(docs): repoint stale themes.mdx links to themes/sass after theming consolidation --- .../general/cli/step-by-step-guide-using-angular-schematics.mdx | 2 +- .../en/components/general/cli/step-by-step-guide-using-cli.mdx | 2 +- .../src/content/en/components/general/getting-started.mdx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-angular-schematics.mdx b/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-angular-schematics.mdx index b45d6134fd..dbac01d08c 100644 --- a/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-angular-schematics.mdx +++ b/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-angular-schematics.mdx @@ -79,7 +79,7 @@ If you select **side-nav** or **side-nav-mini**, the wizard will prompt you with Two theme options are available: - **default** - includes a pre-compiled CSS file (`igniteui-angular.css`) with the default Ignite UI for Angular Material-based theme in `angular.json` -- **custom** - generates a color palette and theme configuration using the [Theming API](../../themes.mdx) in `app/styles.scss`, ready for customization +- **custom** - generates a color palette and theme configuration using the [Theming API](../../themes/sass/index.mdx) in `app/styles.scss`, ready for customization Step by step prompt: choose default or custom theme diff --git a/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-cli.mdx b/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-cli.mdx index 66c4165524..9db761e032 100644 --- a/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-cli.mdx +++ b/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-cli.mdx @@ -67,7 +67,7 @@ If you select **Side Navigation** or **Side Navigation Mini**, the wizard will p Step by step auth question prompt -The next step is to choose a theme for your application. Selecting the default option includes a pre-compiled CSS file (`igniteui-angular.css`) with the default Ignite UI for Angular theme in your project's `angular.json`. The custom option generates a color palette and theme configuration using the [Theming API](../../themes.mdx) in `app/styles.scss`. +The next step is to choose a theme for your application. Selecting the default option includes a pre-compiled CSS file (`igniteui-angular.css`) with the default Ignite UI for Angular theme in your project's `angular.json`. The custom option generates a color palette and theme configuration using the [Theming API](../../themes/sass/index.mdx) in `app/styles.scss`. Step by step new project theme selection diff --git a/docs/angular/src/content/en/components/general/getting-started.mdx b/docs/angular/src/content/en/components/general/getting-started.mdx index cc324d0c46..40a8286a1c 100644 --- a/docs/angular/src/content/en/components/general/getting-started.mdx +++ b/docs/angular/src/content/en/components/general/getting-started.mdx @@ -88,7 +88,7 @@ If you already have an Angular project or prefer to work entirely within the Ang ng new --style=scss ``` -SCSS is recommended because the [Ignite UI for Angular Theming Library](../themes.mdx) is built on it and `ng add` configures the default theme automatically. Then add Ignite UI for Angular: +SCSS is recommended because the [Ignite UI for Angular Theming Library](../themes/sass/index.mdx) is built on it and `ng add` configures the default theme automatically. Then add Ignite UI for Angular: ```cmd ng add igniteui-angular From ac5ce2f45dfdd991d14feb7a92e5657719fcaa9c Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Fri, 25 Sep 2026 14:36:08 +0300 Subject: [PATCH 3/3] docs(themes): address review feedback on theming overview --- docs/angular/src/content/en/components/themes/index.mdx | 6 +++--- .../src/content/en/components/themes/sass/global-themes.mdx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/angular/src/content/en/components/themes/index.mdx b/docs/angular/src/content/en/components/themes/index.mdx index 997ac13efd..2cf51d7828 100644 --- a/docs/angular/src/content/en/components/themes/index.mdx +++ b/docs/angular/src/content/en/components/themes/index.mdx @@ -83,7 +83,7 @@ To change the primary and secondary colors, set the corresponding variables in y The `ig` prefix identifies the variable as part of an Ignite UI for Angular theme, `primary` names the color variable, and `500` is the color variant. Ignite UI for Angular ships several base color variables (`primary`, `secondary`, `surface`, `success`, `info`, and more), each with a range of variants generated from its `500` (main) value. Changing the `500` variant regenerates the rest of that color's palette. See [Palettes](/themes/palettes) for the full list of variants. -Some components do not use colors from the palettes. In those instances, target the component's CSS variables directly to modify their colors. To find out which palette colors a component uses, see the . +Some components do not use colors from the palettes. In those instances, target the component's CSS variables directly to modify their colors. To find out which palette colors a component uses, see the . ### Elevations @@ -104,7 +104,7 @@ Elevations (shadows) work the same way, across 25 levels (0–24): } ``` -Each variable is a stacked CSS [`box-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) declaration; you can replace any of them with another valid `box-shadow` value. The higher the elevation level, the larger the shadow. Different components use different elevation levels by default — see [Elevations](/themes/elevations) for the full breakdown, and the for which level each component uses. +Each variable is a stacked CSS [`box-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) declaration; you can replace any of them with another valid `box-shadow` value. The higher the elevation level, the larger the shadow. Different components use different elevation levels by default — see [Elevations](/themes/elevations) for the full breakdown, and the for which level each component uses. ### Roundness and Elevation Factor @@ -213,7 +213,7 @@ See [Theming with Sass](/themes/sass) for the full concept breakdown — palette ## Accessibility -Palette colors and their contrast text colors are generated together: every color variant in a palette has a matching `-contrast` variant (black or white) chosen for readable contrast against it, retrievable with the Sass `contrast-color` function. See [Palettes](/themes/palettes) for how to read a variant's contrast color. +Palette colors and their contrast text colors are generated together: every color variant in a palette has a matching `-contrast` variant (black or white) chosen for readable contrast against it, retrievable with the Sass `contrast-color` function — see [Contrast Text Colors](/themes/sass/palettes#contrast-text-colors). Compiled themes also expose each one as a `--ig-*-contrast` CSS variable; see [Palettes](/themes/palettes). The `core()` Sass mixin accepts an `$enhanced-accessibility` argument (default `false`). Enabling it switches chart color brushes to a color-blind–friendly palette instead of the regular one: diff --git a/docs/angular/src/content/en/components/themes/sass/global-themes.mdx b/docs/angular/src/content/en/components/themes/sass/global-themes.mdx index 80c034cc4c..3e4f694b76 100644 --- a/docs/angular/src/content/en/components/themes/sass/global-themes.mdx +++ b/docs/angular/src/content/en/components/themes/sass/global-themes.mdx @@ -30,7 +30,7 @@ To generate a global theme we're going to be including two mixins `core` and `th | 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. | +| `$enhanced-accessibility` | boolean | false | Switches chart color brushes to a color-blind–friendly palette. | ### Theme mixins