From 950c4c46f10622846393e037632a2e7a371d013f Mon Sep 17 00:00:00 2001 From: sivanova Date: Fri, 4 Apr 2025 14:57:31 +0300 Subject: [PATCH 1/5] refactor(grid-toolbar): bundle styles with component --- .../core/styles/themes/generators/_base.scss | 14 +- .../grids/toolbar/grid-toolbar.component.scss | 4 + .../grids/toolbar/grid-toolbar.component.ts | 3 + .../src/lib/grids/toolbar/themes/_base.scss | 153 ++++++++++++++++++ .../lib/grids/toolbar/themes/dark/_index.scss | 6 + .../grids/toolbar/themes/dark/_tokens.scss | 7 + .../grids/toolbar/themes/light/_index.scss | 6 + .../grids/toolbar/themes/light/_tokens.scss | 8 + .../grids/toolbar/themes/shared/_index.scss | 1 + .../grids/toolbar/themes/shared/_indigo.scss | 12 ++ 10 files changed, 207 insertions(+), 7 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.scss create mode 100644 projects/igniteui-angular/src/lib/grids/toolbar/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/grids/toolbar/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/grids/toolbar/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/grids/toolbar/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/grids/toolbar/themes/shared/_indigo.scss diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index 8514f76c6ac..daed84bd8dc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -440,13 +440,13 @@ @include grid-summary($grid-summary-theme-map); } - @if is-used('igx-grid-toolbar', $exclude) { - $grid-toolbar-theme-map: grid-toolbar-theme( - $schema: $schema, - ); - $grid-toolbar-theme-map: meta.call($theme-handler, $grid-toolbar-theme-map); - @include grid-toolbar($grid-toolbar-theme-map); - } + // @if is-used('igx-grid-toolbar', $exclude) { + // $grid-toolbar-theme-map: grid-toolbar-theme( + // $schema: $schema, + // ); + // $grid-toolbar-theme-map: meta.call($theme-handler, $grid-toolbar-theme-map); + // @include grid-toolbar($grid-toolbar-theme-map); + // } @if is-used('igx-pivot-data-selector', $exclude) { $pivot-data-selector-theme-map: pivot-data-selector-theme( diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.scss b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts index 877ab3f9f1d..c150837cb2e 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts @@ -6,6 +6,7 @@ import { Inject, Input, OnDestroy, + ViewEncapsulation, booleanAttribute } from '@angular/core'; import { Subscription } from 'rxjs'; @@ -37,6 +38,8 @@ import { NgTemplateOutlet } from '@angular/common'; @Component({ selector: 'igx-grid-toolbar', templateUrl: './grid-toolbar.component.html', + styleUrl: 'grid-toolbar.component.css', + encapsulation: ViewEncapsulation.None, providers: [{ provide: IgxToolbarToken, useExisting: IgxGridToolbarComponent }], imports: [IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, NgTemplateOutlet, IgxLinearProgressBarComponent] }) diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/_base.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/_base.scss new file mode 100644 index 00000000000..4a242714b78 --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/_base.scss @@ -0,0 +1,153 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'igniteui-theming/sass/color/functions' as *; +@use 'styles/themes/standalone' as *; +@use './light/tokens' as *; + +$_theme: $material; + +@include layer(base) { + @include b(igx-grid-toolbar) { + @include sizable(); + + --component-size: var(--ig-size, var(--ig-size-large)); + position: relative; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + grid-row: 1; + font-size: rem(16px); + border-bottom: rem(1px) solid var-get($_theme, 'border-color'); + background: var-get($_theme, 'background-color'); + height: auto; + min-height: var-get($_theme, 'size'); + padding-block: 0; + padding-inline-start: pad-inline(rem(12px), rem(16px), rem(24px)); + padding-inline-end: pad-inline(rem(8px), rem(12px), rem(16px)); + + [igxButton] { + margin-inline-start: pad-inline(rem(8px), rem(12px), rem(16px)); + + &:first-of-type { + margin-inline-start: 0; + } + + &:last-of-type { + margin-inline-end: 0; + } + } + + &[dir='rtl'] { + text-align: end; + + [igxButton] { + margin-inline-start: 0; + margin-inline-end: rem(8); + + &:last-child { + margin-inline-end: 0; + } + } + } + + @include e(title) { + @include ellipsis(); + + color: var-get($_theme, 'title-text-color'); + flex: 1 1 auto; + max-width: 40ch; + margin-inline-end: rem(16px); + + &:empty { + display: none; + } + + &:empty + .igx-grid-toolbar__custom-content:empty { + + igx-grid-toolbar-actions { + width: 100%; + margin-inline-start: 0; + justify-content: flex-end; + } + } + } + + @include e(custom-content) { + display: flex; + flex-wrap: wrap; + flex-grow: 1; + justify-content: flex-end; + margin-inline-end: rem(16px); + + &:empty { + display: none; + } + } + + @include e(actions) { + display: flex; + align-items: center; + flex-flow: row wrap; + margin-inline-start: auto; + gap: rem(16px); + + > * { + display: flex; + } + + &:empty { + display: none; + } + } + + @include e(progress-bar) { + position: absolute; + width: 100%; + inset-inline-start: 0; + inset-inline-end: 0; + bottom: rem(-1px); + height: rem(2px); + overflow: hidden; + background: var-get($_theme, 'background-color'); + + igx-linear-bar > * { + border-radius: 0; + + &:first-child > div { + background: color($color: 'secondary'); + } + } + } + + @include e(dropdown){ + position: relative; + } + + @include e(dd-list){ + list-style: none; + background: var-get($_theme, 'dropdown-background'); + margin: 0; + padding: 0; + box-shadow: var(--ig-elevation-8); + } + + @include e(dd-list-items){ + cursor: pointer; + position: relative; + padding: rem(8px) rem(16px); + color: var-get($_theme, 'item-text-color'); + white-space: nowrap; + + &:hover { + background: var-get($_theme, 'item-hover-background'); + color: var-get($_theme, 'item-hover-text-color'); + } + + &:focus { + background: var-get($_theme, 'item-focus-background'); + color: var-get($_theme, 'item-focus-text-color'); + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/_index.scss new file mode 100644 index 00000000000..cdef66badae --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-grid-toolbar, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/_tokens.scss new file mode 100644 index 00000000000..0fd8015c692 --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/grid-toolbar' as *; + +$material: digest-schema($dark-material-grid-toolbar); +$bootstrap: digest-schema($dark-bootstrap-grid-toolbar); +$fluent: digest-schema($dark-fluent-grid-toolbar); +$indigo: digest-schema($dark-indigo-grid-toolbar); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/_index.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/_index.scss new file mode 100644 index 00000000000..ee15160643d --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-grid-toolbar, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/_tokens.scss new file mode 100644 index 00000000000..f346b0a54c3 --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/grid-toolbar' as *; + +$base: digest-schema($light-grid-toolbar); +$material: digest-schema($material-grid-toolbar); +$bootstrap: digest-schema($bootstrap-grid-toolbar); +$fluent: digest-schema($fluent-grid-toolbar); +$indigo: digest-schema($indigo-grid-toolbar); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/shared/_index.scss new file mode 100644 index 00000000000..ca3dd3bc266 --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/shared/_index.scss @@ -0,0 +1 @@ +@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/shared/_indigo.scss new file mode 100644 index 00000000000..3f050cc3911 --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/shared/_indigo.scss @@ -0,0 +1,12 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; + +@include themed-block(igx-grid-toolbar, indigo) { + padding-inline-end: pad-inline(rem(12px), rem(16px), rem(24px)); + + @include e(title) { + // should be fixed + @extend .ig-typography__h6 !optional; + } +} From f78e08f3b2d696e5164a26b9b86accb7967e6908 Mon Sep 17 00:00:00 2001 From: sivanova Date: Tue, 15 Apr 2025 13:12:13 +0300 Subject: [PATCH 2/5] refactor(toolbar): split schemas --- .../lib/core/styles/themes/_standalone.scss | 1 + .../src/lib/grids/toolbar/themes/_base.scss | 18 ++++++++++-------- .../lib/grids/toolbar/themes/light/_index.scss | 8 ++------ .../grids/toolbar/themes/light/_tokens.scss | 8 -------- .../toolbar/themes/light/list/_index.scss | 6 ++++++ .../toolbar/themes/light/list/_tokens.scss | 12 ++++++++++++ .../toolbar/themes/light/toolbar/_index.scss | 6 ++++++ .../toolbar/themes/light/toolbar/_tokens.scss | 12 ++++++++++++ 8 files changed, 49 insertions(+), 22 deletions(-) delete mode 100644 projects/igniteui-angular/src/lib/grids/toolbar/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_index.scss create mode 100644 projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/grids/toolbar/themes/light/toolbar/_index.scss create mode 100644 projects/igniteui-angular/src/lib/grids/toolbar/themes/light/toolbar/_tokens.scss diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss index 61db54a7ddf..0181fd84e77 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_standalone.scss @@ -1,3 +1,4 @@ +@use 'sass:list'; @use 'sass:map'; @use 'igniteui-theming/sass/bem' as *; @use 'igniteui-theming/sass/themes' as *; diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/_base.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/_base.scss index 4a242714b78..7cb8e0b81fe 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/_base.scss @@ -3,9 +3,11 @@ @use 'igniteui-theming/sass/typography' as *; @use 'igniteui-theming/sass/color/functions' as *; @use 'styles/themes/standalone' as *; -@use './light/tokens' as *; +@use './light/list/tokens' as *; +@use './light/toolbar/tokens' as *; -$_theme: $material; +$_theme: $material-toolbar; +$_theme-dd: $material-list; @include layer(base) { @include b(igx-grid-toolbar) { @@ -126,7 +128,7 @@ $_theme: $material; @include e(dd-list){ list-style: none; - background: var-get($_theme, 'dropdown-background'); + background: var-get($_theme-dd, 'dropdown-background'); margin: 0; padding: 0; box-shadow: var(--ig-elevation-8); @@ -136,17 +138,17 @@ $_theme: $material; cursor: pointer; position: relative; padding: rem(8px) rem(16px); - color: var-get($_theme, 'item-text-color'); + color: var-get($_theme-dd, 'item-text-color'); white-space: nowrap; &:hover { - background: var-get($_theme, 'item-hover-background'); - color: var-get($_theme, 'item-hover-text-color'); + background: var-get($_theme-dd, 'item-hover-background'); + color: var-get($_theme-dd, 'item-hover-text-color'); } &:focus { - background: var-get($_theme, 'item-focus-background'); - color: var-get($_theme, 'item-focus-text-color'); + background: var-get($_theme-dd, 'item-focus-background'); + color: var-get($_theme-dd, 'item-focus-text-color'); } } } diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/_index.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/_index.scss index ee15160643d..2dbb65d7690 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/_index.scss +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/_index.scss @@ -1,6 +1,2 @@ -@use 'sass:meta'; -@use 'tokens'; -@use 'styles/themes/standalone' as *; - -$tokens: meta.module-variables(tokens); -@include themes(igx-grid-toolbar, $tokens, light); +@forward 'list/index'; +@forward 'toolbar/index'; \ No newline at end of file diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/_tokens.scss deleted file mode 100644 index f346b0a54c3..00000000000 --- a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/_tokens.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/themes/schemas/components/light/grid-toolbar' as *; - -$base: digest-schema($light-grid-toolbar); -$material: digest-schema($material-grid-toolbar); -$bootstrap: digest-schema($bootstrap-grid-toolbar); -$fluent: digest-schema($fluent-grid-toolbar); -$indigo: digest-schema($indigo-grid-toolbar); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_index.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_index.scss new file mode 100644 index 00000000000..3a42f7a7c79 --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-grid-toolbar__dd-list, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_tokens.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_tokens.scss new file mode 100644 index 00000000000..5e7ee0b9856 --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_tokens.scss @@ -0,0 +1,12 @@ +@use 'sass:list'; +@use 'styles/themes/standalone' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/grid-toolbar' as *; + +$props: ('background-color', 'title-text-color'); + +$base-list: list.nth(split-map(digest-schema($light-grid-toolbar), $props), 2); +$material-list: list.nth(split-map(digest-schema($material-grid-toolbar), $props), 2); +$bootstrap-list: list.nth(split-map(digest-schema($bootstrap-grid-toolbar), $props), 2); +$fluent-list: list.nth(split-map(digest-schema($fluent-grid-toolbar), $props), 2); +$indigo-list: list.nth(split-map(digest-schema($indigo-grid-toolbar), $props), 2); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/toolbar/_index.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/toolbar/_index.scss new file mode 100644 index 00000000000..ee15160643d --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/toolbar/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-grid-toolbar, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/toolbar/_tokens.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/toolbar/_tokens.scss new file mode 100644 index 00000000000..88d85341797 --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/toolbar/_tokens.scss @@ -0,0 +1,12 @@ +@use 'sass:list'; +@use 'styles/themes/standalone' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/grid-toolbar' as *; + +$props: ('background-color', 'title-text-color', 'border-color', 'size'); + +$base-toolbar: list.nth(split-map(digest-schema($light-grid-toolbar), $props), 1); +$material-toolbar: list.nth(split-map(digest-schema($material-grid-toolbar), $props), 1); +$bootstrap-toolbar: list.nth(split-map(digest-schema($bootstrap-grid-toolbar), $props), 1); +$fluent-toolbar: list.nth(split-map(digest-schema($fluent-grid-toolbar), $props), 1); +$indigo-toolbar: list.nth(split-map(digest-schema($indigo-grid-toolbar), $props), 1); From 143685c81883b3c55e2f32fc3733c258e5db737c Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Tue, 15 Apr 2025 15:45:32 +0300 Subject: [PATCH 3/5] fix(toolbar): style token declarations and module forwarding --- .../src/lib/grids/toolbar/themes/_base.scss | 10 +++++----- .../src/lib/grids/toolbar/themes/light/_index.scss | 4 ++-- .../lib/grids/toolbar/themes/light/list/_index.scss | 4 ++-- .../lib/grids/toolbar/themes/light/list/_tokens.scss | 10 +++++----- .../lib/grids/toolbar/themes/light/toolbar/_index.scss | 5 +++-- .../grids/toolbar/themes/light/toolbar/_tokens.scss | 10 +++++----- 6 files changed, 22 insertions(+), 21 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/_base.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/_base.scss index 7cb8e0b81fe..2fed7b09a8a 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/_base.scss @@ -3,11 +3,11 @@ @use 'igniteui-theming/sass/typography' as *; @use 'igniteui-theming/sass/color/functions' as *; @use 'styles/themes/standalone' as *; -@use './light/list/tokens' as *; -@use './light/toolbar/tokens' as *; +@use './light/list/tokens' as list; +@use './light/toolbar/tokens' as toolbar; -$_theme: $material-toolbar; -$_theme-dd: $material-list; +$_theme: toolbar.$base; +$_theme-dd: list.$base; @include layer(base) { @include b(igx-grid-toolbar) { @@ -58,7 +58,7 @@ $_theme-dd: $material-list; @include ellipsis(); color: var-get($_theme, 'title-text-color'); - flex: 1 1 auto; + flex: 1 1 auto; max-width: 40ch; margin-inline-end: rem(16px); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/_index.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/_index.scss index 2dbb65d7690..ba5a4ee60fb 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/_index.scss +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/_index.scss @@ -1,2 +1,2 @@ -@forward 'list/index'; -@forward 'toolbar/index'; \ No newline at end of file +@forward 'list'; +@forward 'toolbar'; diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_index.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_index.scss index 3a42f7a7c79..9721402a134 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_index.scss +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_index.scss @@ -2,5 +2,5 @@ @use 'tokens'; @use 'styles/themes/standalone' as *; -$tokens: meta.module-variables(tokens); -@include themes(igx-grid-toolbar__dd-list, $tokens, light); +$list-tokens: meta.module-variables(tokens); +@include themes(igx-grid-toolbar__dd-list, $list-tokens, light); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_tokens.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_tokens.scss index 5e7ee0b9856..9418f7d3011 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_tokens.scss +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_tokens.scss @@ -5,8 +5,8 @@ $props: ('background-color', 'title-text-color'); -$base-list: list.nth(split-map(digest-schema($light-grid-toolbar), $props), 2); -$material-list: list.nth(split-map(digest-schema($material-grid-toolbar), $props), 2); -$bootstrap-list: list.nth(split-map(digest-schema($bootstrap-grid-toolbar), $props), 2); -$fluent-list: list.nth(split-map(digest-schema($fluent-grid-toolbar), $props), 2); -$indigo-list: list.nth(split-map(digest-schema($indigo-grid-toolbar), $props), 2); +$base: list.nth(split-map(digest-schema($light-grid-toolbar), $props), 2); +$material: list.nth(split-map(digest-schema($material-grid-toolbar), $props), 2); +$bootstrap: list.nth(split-map(digest-schema($bootstrap-grid-toolbar), $props), 2); +$fluent: list.nth(split-map(digest-schema($fluent-grid-toolbar), $props), 2); +$indigo: list.nth(split-map(digest-schema($indigo-grid-toolbar), $props), 2); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/toolbar/_index.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/toolbar/_index.scss index ee15160643d..04406368d49 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/toolbar/_index.scss +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/toolbar/_index.scss @@ -1,6 +1,7 @@ @use 'sass:meta'; +@use 'sass:map'; @use 'tokens'; @use 'styles/themes/standalone' as *; -$tokens: meta.module-variables(tokens); -@include themes(igx-grid-toolbar, $tokens, light); +$toolbar-tokens: map.remove(meta.module-variables(tokens), 'props'); +@include themes(igx-grid-toolbar, $toolbar-tokens, light); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/toolbar/_tokens.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/toolbar/_tokens.scss index 88d85341797..8526205ff2b 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/toolbar/_tokens.scss +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/toolbar/_tokens.scss @@ -5,8 +5,8 @@ $props: ('background-color', 'title-text-color', 'border-color', 'size'); -$base-toolbar: list.nth(split-map(digest-schema($light-grid-toolbar), $props), 1); -$material-toolbar: list.nth(split-map(digest-schema($material-grid-toolbar), $props), 1); -$bootstrap-toolbar: list.nth(split-map(digest-schema($bootstrap-grid-toolbar), $props), 1); -$fluent-toolbar: list.nth(split-map(digest-schema($fluent-grid-toolbar), $props), 1); -$indigo-toolbar: list.nth(split-map(digest-schema($indigo-grid-toolbar), $props), 1); +$base: list.nth(split-map(digest-schema($light-grid-toolbar), $props), 1); +$material: list.nth(split-map(digest-schema($material-grid-toolbar), $props), 1); +$bootstrap: list.nth(split-map(digest-schema($bootstrap-grid-toolbar), $props), 1); +$fluent: list.nth(split-map(digest-schema($fluent-grid-toolbar), $props), 1); +$indigo: list.nth(split-map(digest-schema($indigo-grid-toolbar), $props), 1); From 2d14825b918c988579193c88b8b101674313c435 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 16 Apr 2025 10:41:16 +0300 Subject: [PATCH 4/5] refactor(toolbar): add h6 to indigo title --- .../src/lib/grids/toolbar/themes/shared/_indigo.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/shared/_indigo.scss index 3f050cc3911..8894860b5d0 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/shared/_indigo.scss @@ -7,6 +7,6 @@ @include e(title) { // should be fixed - @extend .ig-typography__h6 !optional; + @include type-style(h6); } } From 4c708bc8e2b4b38a3e28e0e939e4be253eba5f05 Mon Sep 17 00:00:00 2001 From: sivanova Date: Wed, 16 Apr 2025 11:12:28 +0300 Subject: [PATCH 5/5] refactor(toolbar): dark schemas --- .../src/lib/grids/toolbar/themes/dark/_index.scss | 8 ++------ .../src/lib/grids/toolbar/themes/dark/_tokens.scss | 7 ------- .../lib/grids/toolbar/themes/dark/list/_index.scss | 6 ++++++ .../lib/grids/toolbar/themes/dark/list/_tokens.scss | 11 +++++++++++ .../lib/grids/toolbar/themes/dark/toolbar/_index.scss | 7 +++++++ .../grids/toolbar/themes/dark/toolbar/_tokens.scss | 11 +++++++++++ .../lib/grids/toolbar/themes/light/list/_tokens.scss | 2 +- 7 files changed, 38 insertions(+), 14 deletions(-) delete mode 100644 projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/list/_index.scss create mode 100644 projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/list/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/toolbar/_index.scss create mode 100644 projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/toolbar/_tokens.scss diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/_index.scss index cdef66badae..ba5a4ee60fb 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/_index.scss +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/_index.scss @@ -1,6 +1,2 @@ -@use 'sass:meta'; -@use 'tokens'; -@use 'styles/themes/standalone' as *; - -$tokens: meta.module-variables(tokens); -@include themes(igx-grid-toolbar, $tokens, dark); +@forward 'list'; +@forward 'toolbar'; diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/_tokens.scss deleted file mode 100644 index 0fd8015c692..00000000000 --- a/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/_tokens.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'igniteui-theming/sass/themes' as *; -@use 'igniteui-theming/sass/themes/schemas/components/dark/grid-toolbar' as *; - -$material: digest-schema($dark-material-grid-toolbar); -$bootstrap: digest-schema($dark-bootstrap-grid-toolbar); -$fluent: digest-schema($dark-fluent-grid-toolbar); -$indigo: digest-schema($dark-indigo-grid-toolbar); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/list/_index.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/list/_index.scss new file mode 100644 index 00000000000..ff88e3fb56c --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/list/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$list-tokens: meta.module-variables(tokens); +@include themes(igx-grid-toolbar__dd-list, $list-tokens, dark); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/list/_tokens.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/list/_tokens.scss new file mode 100644 index 00000000000..e7f900a7fb1 --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/list/_tokens.scss @@ -0,0 +1,11 @@ +@use 'sass:list'; +@use 'styles/themes/standalone' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/grid-toolbar' as *; + +$props: ('background-color', 'title-text-color', 'border-color', 'size'); + +$material: list.nth(split-map(digest-schema($dark-material-grid-toolbar), $props), 2); +$bootstrap: list.nth(split-map(digest-schema($dark-bootstrap-grid-toolbar), $props), 2); +$fluent: list.nth(split-map(digest-schema($dark-fluent-grid-toolbar), $props), 2); +$indigo: list.nth(split-map(digest-schema($dark-indigo-grid-toolbar), $props), 2); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/toolbar/_index.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/toolbar/_index.scss new file mode 100644 index 00000000000..b91e53b68f5 --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/toolbar/_index.scss @@ -0,0 +1,7 @@ +@use 'sass:meta'; +@use 'sass:map'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$toolbar-tokens: map.remove(meta.module-variables(tokens), 'props'); +@include themes(igx-grid-toolbar, $toolbar-tokens, dark); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/toolbar/_tokens.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/toolbar/_tokens.scss new file mode 100644 index 00000000000..9154c469099 --- /dev/null +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/dark/toolbar/_tokens.scss @@ -0,0 +1,11 @@ +@use 'sass:list'; +@use 'styles/themes/standalone' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/grid-toolbar' as *; + +$props: ('background-color', 'title-text-color', 'border-color', 'size'); + +$material: list.nth(split-map(digest-schema($dark-material-grid-toolbar), $props), 1); +$bootstrap: list.nth(split-map(digest-schema($dark-bootstrap-grid-toolbar), $props), 1); +$fluent: list.nth(split-map(digest-schema($dark-fluent-grid-toolbar), $props), 1); +$indigo: list.nth(split-map(digest-schema($dark-indigo-grid-toolbar), $props), 1); diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_tokens.scss b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_tokens.scss index 9418f7d3011..6af07f6cebe 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_tokens.scss +++ b/projects/igniteui-angular/src/lib/grids/toolbar/themes/light/list/_tokens.scss @@ -3,7 +3,7 @@ @use 'igniteui-theming/sass/themes' as *; @use 'igniteui-theming/sass/themes/schemas/components/light/grid-toolbar' as *; -$props: ('background-color', 'title-text-color'); +$props: ('background-color', 'title-text-color', 'border-color', 'size'); $base: list.nth(split-map(digest-schema($light-grid-toolbar), $props), 2); $material: list.nth(split-map(digest-schema($material-grid-toolbar), $props), 2);