30.1.0

A fix release. It changes how scoped component tokens apply when included inside another selector, makes the spacing and sizing registrations work inside selectors, lets runtime surface overrides reach components in legacy palettes, and makes $scales family maps and the fit_color_scale MCP tool work as documented. It also warns when a deprecated Sass API is used.

Themes

Scoped tokens inside another selector

tokens($theme, $mode: 'scoped') included inside a selector no longer declares the component's tokens on that selector. The tokens go on the component inside it, and on the selector itself only when it is the component:

.promo {
  @include tokens(tooltip-theme($background: red), $mode: 'scoped', $scope: '.igx-tooltip');
}

// 30.0.0
.promo, .promo .igx-tooltip { --background: red; … }

// 30.1.0
.promo .igx-tooltip, .promo:where(.igx-tooltip) { --background: red; … }

Before, every element inside .promo inherited the tooltip's generic tokens (--background, --foreground, …), so for example every grid toolbar in the section turned red. A class placed on the component itself (<igx-avatar class="vip">) still gets the tokens. :where() keeps its specificity unchanged, so a later .vip { --background: … } rule still wins. A theme map without a selector and with no $scope still targets the parent (&). (IgniteUI/igniteui-angular#17901)

To restyle a component for a whole section, use the default global mode. .promo { @include tokens(tooltip-theme(…)); } declares only --ig-tooltip-* tokens, which no other component reads.

Derived grid inputs

The grid, grid toolbar, paginator, column actions, Excel-style filtering and query builder schemas now declare the background, foreground and accent-color inputs their theme functions accept, with the value initial. These components no longer pick up a generic --background, --foreground or --accent-color declared on an ancestor or on :root.

Spacing and sizing

• spacing() and sizing() emit their @property rules (--ig-spacing, --ig-size-small|medium|large) at the stylesheet root. When these mixins were included inside a selector or a media query, the rules were nested and the browser dropped them. (#652)
• The pad() function and the sizable() mixin fall back to the initial values (--ig-spacing: 1, --ig-size-medium: 2) when the properties aren't registered.

Tabs

When $tab-ripple-color isn't passed, tabs-theme() now derives it from $item-active-background / $item-background with adaptive-contrast() instead of text-contrast(). Before, when the background was a CSS variable, text-contrast() returned the background itself, so the ripple was the same color as the tab.

Palettes

• Legacy surfaces follow --ig-surface-500 at runtime. In palettes built with the legacy generator, which includes all the built-in palettes, --ig-surface-base is now var(--ig-surface-500) instead of a copy of its value. Overriding --ig-surface-500 at runtime reaches components again. The compiled colors are the same. Fitted palettes are unchanged; there, --ig-surface-500 already points to --ig-surface-base.
• $scales maps keyed by family now reach palette(). (#634)
  • A top-level (anchor: …) is read as one spec for every family. Each family keeps its default range and curve.
  • A spec without a range takes the family's default range, and also its default curve unless the spec sets one. A range without a curve is still a straight line.
  • An unquoted white is accepted as an anchor. A color such as #fff is still rejected, with an error that says to quote the keyword.
  • palette() warns about $scales keys it ignores: unknown family names, a surface key, and extra keys next to range/curve/anchor in a single spec.
  • palette() warns once that the legacy generator ignores $scales.

Deprecations

The following APIs now print a deprecation warning, once per compilation:

API	Use instead
css-vars($theme)	tokens($theme)
text-contrast()	adaptive-contrast()
to-opaque()	CSS color-mix()
to-hsl()	Nothing. It will be removed in a future release.

The library itself no longer calls any of them, and all the SassDoc examples use tokens().

MCP server

• fit_color_scale takes a family parameter that sets the key of the returned $scales map. name is now only a label. If family is omitted and name is a family name, in any case, it still sets the key. The tool explains the gray anchor and links the scales guidance by its theming:// URI.
• Scales schema: family maps are no longer reduced to an empty spec, so per-family scales reach the generated Sass. Unknown family keys, a surface key, and single specs mixed with family keys are rejected, each with its own message at the right path.
• Web Components theme template now matches the library (#639):
  • The progress counters are registered as <number>, so fractional progress labels work.
  • Sizes are registered with sizing() instead of being set as plain variables.
  • Adds the tile manager view transitions and the .ig-scrollbar utility class. The scrollbar variables are emitted for custom palettes too, and the Indigo track uses gray 200.
  • The @property rules, tile manager transitions and .ig-scrollbar sit outside the generated theme() mixin, so including that mixin under a selector doesn't scope them.
  • The React and Blazor examples are generated from the same template. This fixes the dark examples, which referenced undefined variables.

Dependencies

• zod is upgraded from 3 to 4 (runtime dependency). In the generated TypeScript types for the JSON palettes, shade maps are now Partial<Record<Shade, string>>. Shade maps never required every key, and the type now says so.
• happy-dom 21 (preview, dev only), actions/setup-node and transitive security updates (body-parser, fast-uri, qs).