30.2.0

A feature release. It adds a tile manager theme, a public theme-markers() mixin for declaring the active theme, and theme parameters for tokens the input group and combo schemas already had. The MCP server now resolves components by their selectors and React/Blazor names, and its component theme tool tells agents how to cover both the light and dark variants.

Themes

Tile manager

A new tile-manager-theme() function styles the tile manager and its tiles:

$my-tile-manager-theme: tile-manager-theme(
  $background: #eee,
  $tile-background: white,
);

@include tokens($my-tile-manager-theme);

$tile-background is the primary token. When it's set, the header and content backgrounds follow it, and the title and content text colors are derived from those backgrounds with adaptive-contrast(). The theme also takes the border, hover border, divider, drag-and-drop placeholder, overlay and ghost colors, the border radius, and the resting and drag shadows. The shadows default to the schema's resting-elevation and drag-elevation.

The Tailwind utilities include a tile-manager utility for tile-background. (#667)

Theme markers

The new theme-markers($theme, $variant) mixin declares --ig-theme and --ig-theme-variant in the current scope. The markers inherit, so include the mixin where the active theme is declared, such as :root, or on an element whose subtree uses another theme:

:root {
  @include theme-markers(material, light);
}

// Output
:root {
  --ig-theme: material;
  --ig-theme-variant: light;
}

null and values that aren't strings are skipped. An unquoted indigo, which Sass reads as a color keyword, is accepted. tokens($mode: 'scoped') and the Tailwind component utilities emit the markers through this mixin, so their compiled output is unchanged. (#668)

Input group

• input-group-theme() takes a $filled-secondary-color parameter, the label color in the filled state. When it isn't passed and $idle-secondary-color is, it follows $idle-secondary-color.
• The schemas now declare filled-secondary-color for every theme, so the filled label matches the idle label by default:
  • Material and Bootstrap light: gray 700, was gray 600
  • Fluent light: gray 900
  • Indigo light: gray 600
  • Fluent dark: gray 800
  • Indigo dark: gray 50 contrast at 60%

Combo

combo-theme() takes $case-icon-color and $case-icon-color-active, the colors of the case-sensitive icon in the search input. The schema already had these tokens, but the theme couldn't override them.

Color picker

The unused swatch-preview-border-radius token is removed from the color picker schema. No component read it, but --swatch-preview-border-radius is no longer in the generated output.

Documentation

SassDoc now marks the theme parameters that only Ignite UI for Angular uses:

• chip ghost colors and shadow
• expansion panel $expanded-margin
• input success and warning colors, and the success shadow
• tabs ripple colors
• tree $drop-area-color

It also documents the rating $value-label and $disabled-value-label parameters and fixes the combo-theme() example. (#659)

MCP server

• Component names resolve from selectors. The component theme, component tokens and layout tools accept a component's key, its Angular or Web Components selector, or its React or Blazor name (nav-drawer, igc-nav-drawer, IgrNavDrawer). The metadata now lists React and Blazor names for all components, and search matches them.
• Light and dark guidance. create_component_theme explains that each call produces one variant and that the dark variant usually needs different token values. Each response ends with a note on generating the other variant, with an example of the theme's selector scoped under a dark-mode selector. The note says to put that selector on html or body so overlay content is included. (#660)
• Tile manager. Adds metadata for the tile manager and its tiles: selectors for every platform, aliases (tiles, dashboard tiles), and resting-shadow/drag-shadow token aliases. (#667)