[simeonoff]

Documents Ignite UI Theming 30, which ships with Ignite UI for Angular 22.3.0 and Ignite UI for Web Components 7.5.0: the new fitted palette generator, the surface roles, and the deprecation of the numbered surface shades.

Changes

• Palette Generation (new, Angular and cross-platform): how the fitted generator builds a palette: seeds and scales, hue and gamut, contrast targets, scale presets, the gray anchor, and the surface roles. Also covers the deprecated numbered surface shades, how the container contrast is measured, and troubleshooting.
• Palettes (Angular and cross-platform): the surface roles next to the shade variants, how legacy and fitted shades behave when overridden at runtime, and overriding the surface roles instead of --ig-surface-500. The Web Components version notes that the components read the roles from 7.5.0 on.
• Palettes with Sass (Angular): $scales, $generator, $shade-generator, the surface roles in hand-written palette maps, and migrating off the numbered surface shades.
• Update Guide (Angular): new 22.2.x to 22.3.x section covering what the ng update migration changes, what it reports, and what to review by hand.
• Themes Overview (cross-platform): compiling an igniteui-theming stylesheet in React, Web Components, and Blazor, and using it without a Sass toolchain.
• Accessibility (Angular, EN and JP): adds the Angular copies of the topic that both TOCs already link to.
• TOCs: Palette Generation added with the new label.

Samples

The topics mark where the palette demos go with commented-out <Sample … wc> embeds. They depend on:

• feat(themes): add the Ignite UI Theming palette demos igniteui-wc-examples#1300, which publishes the demos under samples/themes/palettes
• feat(sample): add a wc prop for samples shared by every platform igniteui-astro-components#138, which adds the wc prop to <Sample>

Once both are merged, a follow-up PR adds wcDemosBaseUrl to the docs config and uncomments the embeds.

Related

• refactor: update to version 30.0.0 of Ignite UI Theming igniteui-angular#17766

Checklist:

• check topic's TOC/menu and paragraph headings
• Include TOC topic labels in the topic content when it has a valuable update, is new, or is considered preview / beta
• link to other topics using ./page.mdx or ../relative/path.mdx (.mdx extension required)
• at the References section at the end of the topic add links to topics, samples, etc
• reference API documentation instead of adding a section with API

• use valid component names - [Data] Grid, IgxSelectComponent, <igx-combo>
• use spell checker tool (VS Code, Grammarly, Microsoft Editor)
• add inline code blocks for the names of classes / tags / properties
• add language descriptor for the code blocks
• check if links function by running the check-api/mdx npm commands
• check if sample is working and fully visible in the topic (samples pending, see above)
• check if sample is working and fully visible in the StackBlitz (samples pending, see above)
• check if code blocks match the code in StackBlitz demo (samples pending, see above)
• add or update meaningful llms.description metadata and run npm run check:llms-metadata

• follow SEO guidelines to fill topic's metadata (SEO guidelines)

• do not resolve requested changes (leave that to the reviewer)