Skip to content

docs(grid): update styling sections to match the samples #336

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
simeonoff merged 3 commits into from
Jun 22, 2026
Merged

docs(grid): update styling sections to match the samples #336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f5e0663
docs(): update grid styling sections to match the samples
adrianptrv Jun 17, 2026
80de51c
Merge branch 'vnext' into apetrov/update-styling-samples
adrianptrv Jun 17, 2026
1cf1aa6
Merge branch 'vnext' into apetrov/update-styling-samples
simeonoff Jun 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 9 additions & 12 deletions docs/angular/src/content/en/components/hierarchicalgrid/hierarchical-grid.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,17 +338,14 @@ Next, create a new theme, that extends the <ApiLink kind="sass" module="themes"
</DocsAside>

```scss
$custom-theme: grid-theme(
$cell-active-border-color: #ffcd0f,
$cell-selected-background: #6f6f6f,
$row-hover-background: #f8e495,
$row-selected-background: #8d8d8d,
$header-background: #494949,
$header-text-color: #fff,
$expand-icon-color: #ffcd0f,
$expand-icon-hover-color: #e0b710,
$resize-line-color: #ffcd0f,
$row-highlight: #ffcd0f
$background: #292826;
$foreground: #eeece1;
$accent: #ffcd0f;

$custom-grid: grid-theme(
$background: $background,
$foreground: $foreground,
$accent-color: $accent,
);
```

Expand All @@ -362,7 +359,7 @@ The easiest way to apply your theme is with a `sass` `@include` statement in the

```scss
:host {
@include tokens($custom-theme);
@include tokens($custom-grid);
}
```

Expand Down
21 changes: 9 additions & 12 deletions docs/angular/src/content/en/components/treegrid/tree-grid.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,17 +303,14 @@ There is no specific `sass` tree grid function.
</DocsAside>

```scss
$custom-theme: grid-theme(
$cell-active-border-color: #ffcd0f,
$cell-selected-background: #6f6f6f,
$row-hover-background: #f8e495,
$row-selected-background: #8d8d8d,
$header-background: #494949,
$header-text-color: #fff,
$expand-icon-color: #ffcd0f,
$expand-icon-hover-color: #e0b710,
$resize-line-color: #ffcd0f,
$row-highlight: #ffcd0f
$background: #292826;
$foreground: #eeece1;
$accent: #ffcd0f;

$custom-grid: grid-theme(
$background: $background,
$foreground: $foreground,
$accent-color: $accent,
);
```

Expand All @@ -325,7 +322,7 @@ The last step is to **include** the component theme in our application.

```scss
:host {
@include tokens($custom-theme);
@include tokens($custom-grid);
}
```

Expand Down
22 changes: 3 additions & 19 deletions docs/angular/src/content/en/grids_templates/advanced-filtering.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,9 @@ Since the Advanced Filtering dialog uses the <ApiLink type="QueryBuilder" /> com

```scss
$custom-query-builder: query-builder-theme(
$header-foreground: #512da8
$background: #1f2836,
$foreground: #f5f6e6,
$accent-color: #f5f6e6
);
```

Expand All @@ -262,15 +264,6 @@ Instead of hardcoding the color values like we just did, we can achieve greater
The last step is to **include** the component theme in our application.

```scss
$custom-query-builder: query-builder-theme(
$header-foreground: #512da8,
$color-expression-group-and: #eb0000,
$color-expression-group-or: #0000f3,
$subquery-header-background: var(--ig-gray-300),
$subquery-border-color: var(--ig-warn-500),
$subquery-border-radius: rem(4px)
);

igx-advanced-filtering-dialog {
@include tokens($custom-query-builder);
}
Expand All @@ -285,15 +278,6 @@ If the component is using an [`Emulated`](/themes/sass/component-themes#view-enc
</DocsAside>

```scss
$custom-query-builder: query-builder-theme(
$header-foreground: #512da8,
$color-expression-group-and: #eb0000,
$color-expression-group-or: #0000f3,
$subquery-header-background: var(--ig-gray-300),
$subquery-border-color: var(--ig-warn-500),
$subquery-border-radius: rem(4px)
);

:host {
::ng-deep {
igx-advanced-filtering-dialog {
Expand Down
38 changes: 33 additions & 5 deletions docs/angular/src/content/en/grids_templates/cell-editing.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -581,22 +581,50 @@ $color-palette: palette(
We can now define the theme using our palette. The cells are styled by the <ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} />, so we can use that to generate a theme for our {ComponentName}:

```scss
$custom-grid-theme: grid-theme(
$grid-theme: grid-theme(
$cell-editing-background: $blue,
$cell-editing-foreground: $white,
$cell-active-border-color: $blue,
$cell-edited-value-color: $white,
$cell-active-border-color: $white,
$edit-mode-color: color($color-palette, "secondary", 200)
$edit-mode-color: color($color: "secondary", $variant: 200)
);
```

### Applying the theme

The easiest way to apply our theme is with a `sass` `@include` statement in the global styles file:
The last step is to **include** the custom palette and grid themes.

<ComponentBlock for="Grid">

```scss
igx-grid {
@include palette($color-palette);
@include tokens($grid-theme);
}
```

</ComponentBlock>
<ComponentBlock for="TreeGrid">

```scss
@include grid($custom-grid-theme);
igx-tree-grid {
@include palette($color-palette);
@include tokens($grid-theme);
}
```

</ComponentBlock>
<ComponentBlock for="HierarchicalGrid">

```scss
igx-hierarchical-grid {
@include palette($color-palette);
@include tokens($grid-theme);
}
```

</ComponentBlock>

### Demo

In addition to the steps above, we can also style the controls that are used for the cells' editing templates: [`input-group`](/input-group#styling), [`datepicker`](/date-picker#styling) & [`checkbox`](/checkbox#styling)
Expand Down
22 changes: 22 additions & 0 deletions docs/angular/src/content/en/grids_templates/column-resizing.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,12 +314,34 @@ To get started with the styling of the {ComponentTitle} column resize line, we n

The simplest approach to achieve this is to create a new theme that extends the <ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> and accepts many parameters as well as the `$resize-line-color` parameter.

<ComponentBlock for="Grid">

``` scss
$custom-grid-theme: grid-theme(
$resize-line-color: #0288d1
);
```

</ComponentBlock>
<ComponentBlock for="TreeGrid">

``` scss
$custom-grid-theme: grid-theme(
$resize-line-color: #dc38e8
);
```

</ComponentBlock>
<ComponentBlock for="HierarchicalGrid">

``` scss
$custom-grid-theme: grid-theme(
$resize-line-color: #07ea07
);
```

</ComponentBlock>

<DocsAside type="info">
Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the <ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> and <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> functions. Please refer to [`Palettes`](/themes/sass/palettes) topic for detailed guidance on how to use them.
</DocsAside>
Expand Down
44 changes: 28 additions & 16 deletions docs/angular/src/content/en/grids_templates/column-selection.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,44 +130,56 @@ Following the simplest approach, let's define our custom **theme**.
<ComponentBlock for="TreeGrid">

```scss
$custom-grid-theme: grid-theme(
$row-selected-background: #011627,
$row-selected-text-color: #ecaa53,
$row-selected-hover-background: #011627,
$header-selected-text-color: #ecaa53,
$header-selected-background: #011627,
$expand-icon-color: #ecaa53,
$expand-icon-hover-color: #b64b80
$background: #0b0119;
$foreground: #eeece1;
$accent: #f6b560;

$grid-theme: grid-theme(
$background: $background,
$foreground: $foreground,
$accent-color: $accent,

$row-selected-background: #012724,
$row-selected-text-color: $accent,
$header-selected-text-color: $accent,
$header-selected-background: #012427,

$row-selected-hover-background: hsl(from #012427 h s 10%),
$row-selected-hover-text-color: $accent,
);
```

</ComponentBlock>
<ComponentBlock for="Grid, HierarchicalGrid, PivotGrid">

```scss
$background: #011627;
$accent: #ecaa53;

$custom-grid-theme: grid-theme(
$row-selected-background: #011627,
$row-selected-text-color: #ecaa53,
$row-selected-hover-background: #011627,
$header-selected-text-color: #ecaa53,
$header-selected-background: #011627
$row-selected-background: $background,
$row-selected-text-color: $accent,
$row-selected-hover-background: hsl(from $background h s 10%),
$row-selected-hover-text-color: $accent,
$header-selected-text-color: $accent,
$header-selected-background: $background,
);
```

</ComponentBlock>


The <ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> accepts several parameters but those are the five responsible for changing the appearance of all selected columns:

- **$row-selected-background** - sets the background of the selected fraction.
- **$row-selected-text-color** - sets the text color of the selected fraction
- **$row-selected-hover-background** - sets the color of the hovered cell or bunch of cells.
- **$row-selected-hover-background** - sets the color of the hovered cell or group of cells.
- **$row-selected-hover-text-color** - sets the text color of the hovered cell or group of cells.
- **$header-selected-text-color** - sets the text color of the selected column header
- **$header-selected-background** - sets the background color of the selected column header.

### Using CSS Variables

The last step is to include the custom `igx-grid` theme.
The last step is to **include** the custom grid theme.

```scss
:host {
Expand Down
Loading
Loading