From e7f767e5ff6d54c9fef93fcf76543223bad44b4a Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 25 Aug 2026 15:00:21 +0300 Subject: [PATCH 01/15] refactor(button-group): update styles and simplify layout structure across all samples --- .../button-group-alignment.component.html | 6 +- .../button-group-alignment.component.scss | 46 ++++---- .../button-group-custom-toggle.component.html | 4 +- .../button-group-custom-toggle.component.scss | 14 +-- ...on-group-interaction-states.component.html | 37 +++--- ...on-group-interaction-states.component.scss | 109 +++++++++++++----- .../button-group-layout.component.html | 5 +- .../button-group-layout.component.scss | 25 ++-- .../button-group-overview.component.html | 6 +- .../button-group-overview.component.scss | 33 +++--- .../button-group-selection.component.html | 26 ++--- .../button-group-selection.component.scss | 59 ++++++---- .../button-group-size.component.html | 18 +-- .../button-group-size.component.scss | 72 +++++++----- .../button-group-states.component.html | 38 +++--- .../button-group-states.component.scss | 100 +++++++++++----- .../button-group-styling.component.html | 12 +- .../button-group-styling.component.scss | 14 ++- .../button-group-styling/layout.scss | 13 --- ...tton-group-tailwind-styling.component.html | 13 +-- ...tton-group-tailwind-styling.component.scss | 24 ++-- .../button-group-tailwind-styling/layout.scss | 16 --- 22 files changed, 391 insertions(+), 299 deletions(-) delete mode 100644 src/app/data-entries/buttonGroup/button-group-styling/layout.scss delete mode 100644 src/app/data-entries/buttonGroup/button-group-tailwind-styling/layout.scss diff --git a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.html b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.html index 4bf378781..e4d6a8727 100644 --- a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.html +++ b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.html @@ -1,6 +1,6 @@ -
+
@for (alignment of alignments; track alignment.value) { -
+
{{ alignment.label }} @for (city of cities; track city) { @@ -9,4 +9,4 @@
} -
+ diff --git a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss index d8f1c1233..976bd2fe8 100644 --- a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss @@ -1,35 +1,31 @@ -.button-group-alignment { - display: flex; - align-items: flex-start; - justify-content: center; - gap: 60px; - padding: 24px; +@use 'igniteui-theming' as *; + +:host { + display: grid; + place-items: center; + height: 100vh; } -.button-group-alignment-item { +.sample-layout { display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - gap: 16px; + gap: rem(32px); + align-items: start; + justify-content: center; + flex-wrap: wrap; } -.button-group-alignment-item igx-buttongroup { - width: 240px; +.sample-inner-layout { + display: grid; + gap: rem(8px); + align-items: start; } -.button-group-alignment-item:first-child igx-buttongroup { - width: 320px; +igx-buttongroup { + min-width: rem(280px); } -.button-group-alignment-item span { - width: 100%; - text-align: center; - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; +span { + @include type-style('body-2'); + + color: var(--ig-gray-700); } diff --git a/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.html b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.html index 6c27c58e2..03fc4ff1f 100644 --- a/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.html +++ b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.html @@ -1,3 +1 @@ -
- -
+ diff --git a/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss index 157e28c3c..3eb8ea51c 100644 --- a/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss @@ -1,11 +1,11 @@ -.button-group-custom-toggle { - display: flex; - justify-content: center; - align-items: center; - min-height: 7rem; +@use 'igniteui-theming' as *; + +:host { + display: grid; + place-items: center; + height: 100vh; } igx-buttongroup { - display: inline-block; - width: 300px; + max-width: rem(300px); } diff --git a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.html b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.html index 49b20d26b..21bcea7b6 100644 --- a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.html +++ b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.html @@ -1,28 +1,31 @@ -
-
+
+
@for (state of states; track state) { {{ getLabel(state) }} } -
+ @for (row of rows; track row.label) { -
+
{{ row.label }} @for (state of states; track state) { - - - +
+ {{ getLabel(state) }} + + + +
} -
+ }
diff --git a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss index c78233443..abe560524 100644 --- a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss @@ -1,73 +1,118 @@ -.button-group-interaction-states { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - gap: 20px; - padding: 20px; +@use "igniteui-theming/sass/typography" as *; + +:host { + container-type: inline-size; + display: grid; + grid-template-columns: minmax(0, 1fr); + align-content: center; + height: 100vh; } -.button-group-interaction-states-row { +.states-matrix { display: grid; - grid-template-columns: 120px 164px 164px 164px; + grid-template-columns: auto repeat(3, minmax(rem(124px), 1fr)); + gap: rem(16px); + inline-size: 100%; + max-inline-size: rem(680px); + margin-inline: auto; +} + +.states-row { + display: grid; + grid-column: 1 / -1; + grid-template-columns: subgrid; align-items: center; - gap: 16px; } -.button-group-interaction-states .row-label, -.button-group-interaction-states .column-label { - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; +.row-label, +.column-label, +.cell-label { + @include type-style("body-2") { + margin: 0; + } + + color: var(--ig-gray-700); } -.button-group-interaction-states .column-label { +.column-label, +.cell-label { text-align: center; } -.button-group-interaction-states igx-buttongroup { - width: 164px; +.cell-label { + display: none; } -.button-group-interaction-states button { - width: 100%; - gap: 4px; +.state-cell { + display: grid; + gap: rem(4px); +} + +igx-icon { + --ig-icon-size: #{rem(16px)}; +} + +@container (width < 34rem) { + .states-matrix { + grid-template-columns: minmax(0, 1fr); + } + + .states-row { + grid-template-columns: repeat(auto-fit, minmax(rem(150px), 1fr)); + } + + header.states-row { + display: none; + } + + .row-label { + grid-column: 1 / -1; + } + + .cell-label { + display: block; + text-align: start; + margin-block-start: rem(16px); + } + + .state-cell { + margin-inline-end: rem(8px); + } } -.button-group-interaction-states igx-icon { - --ig-icon-size: 16px; +// WARNING START: Demo overrides only. Do not copy to production. +// Forced state classes are used here solely to present all component states visually. +igx-buttongroup{ + pointer-events: none; } -.button-group-interaction-states button.state-hover:not(.state-selected) { +.state-hover:not(.state-selected) { background: var(--item-hover-background); border-color: var(--item-hover-border-color); color: var(--item-hover-text-color); } -.button-group-interaction-states button.state-idle.state-selected { +.state-idle.state-selected { background: var(--item-active-background); border-color: var(--item-active-border-color); color: var(--item-active-text-color); } -.button-group-interaction-states button.state-focused:not(.state-selected) { +.state-focused:not(.state-selected) { background: var(--item-focused-hover-background); border-color: var(--item-focused-hover-border-color); color: var(--item-focused-hover-text-color); } -.button-group-interaction-states button.state-hover.state-selected { +.state-hover.state-selected { background: var(--item-selected-active-background); border-color: var(--item-selected-active-border-color); color: var(--item-selected-hover-text-color); } -.button-group-interaction-states button.state-focused.state-selected { +.state-focused.state-selected { background: var(--item-selected-active-background); border-color: var(--item-selected-active-border-color); color: var(--item-focused-hover-text-color); } +// WARNING END diff --git a/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.html b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.html index f2cee52a0..bc87b5145 100644 --- a/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.html +++ b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.html @@ -1,10 +1,9 @@ -
+
@for (layout of layouts; track layout.value) { } - @for (layout of layouts; track layout.value) { } -
+ diff --git a/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss index fc95cf401..9b0b34eb7 100644 --- a/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss @@ -1,21 +1,20 @@ -.button-group-layout { +@use 'igniteui-theming' as *; + +:host { + display: grid; + place-items: center; + height: 100vh; +} + +.sample-layout { display: flex; - flex-direction: row; align-items: center; justify-content: center; - gap: 80px; - min-height: 5.5rem; + flex-wrap: wrap; + gap: rem(60px); } igx-buttongroup { - display: inline-block; max-width: 400px; -} - -.button-group-layout button { - min-width: 100px; -} - -.button-group-layout igx-icon { - --ig-icon-size: 20px; + min-width: 280px; } diff --git a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.html b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.html index e6f995b8d..ee2f12c63 100644 --- a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.html +++ b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.html @@ -1,4 +1,4 @@ -
+
+ diff --git a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss index 128e5f6f9..37cdf8360 100644 --- a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss @@ -1,31 +1,32 @@ -.button-group-overview { - display: flex; - flex-direction: column; - align-items: center; +@use 'igniteui-theming' as *; + +:host { + display: grid; + place-items: center; + height: 100vh; } -igx-buttongroup { - display: block; - width: 280px; - max-width: 100%; +.sample-layout { + display: grid; + width: rem(280px); + gap: rem(8px); } -.album { - margin-top: 8px; - width: 280px; - max-width: 100%; +igx-buttongroup { + max-width: rem(280px); } .album-title { - display: inline-block; - margin-bottom: 8px; - color: #1f89d4; + @include type-style('body-2'); + + margin-block: 0 rem(8px); + color: var(--ig-primary-500); } .album-photos { display: grid; grid-template-columns: repeat(2, 1fr); - gap: 4px; + gap: rem(4px); } .album-photos img { diff --git a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.html b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.html index 65ff4542c..c904dd7fc 100644 --- a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.html +++ b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.html @@ -1,18 +1,16 @@
@for (mode of selectionModes; track mode.value) { -
- {{ mode.label }} - - - - - -
+ {{ mode.label }} + + + + + }
diff --git a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss index 7e52239fa..d800411f8 100644 --- a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss @@ -1,30 +1,45 @@ -.selection-samples { - display: flex; - justify-content: center; - flex-direction: column; - align-items: flex-start; - gap: 35px; - padding-left: 48px; +@use 'igniteui-theming' as *; + +:host { + container-type: inline-size; + display: grid; + grid-template-columns: minmax(0, 1fr); + align-content: center; + height: 100vh; } -.selection-sample { - display: flex; +.selection-samples { + display: grid; + grid-template-columns: auto minmax(rem(180px), 1fr); align-items: center; - gap: 30px; + gap: rem(24px) rem(32px); + inline-size: 100%; + max-inline-size: rem(380px); + margin-inline: auto; +} + +.sample-label { + @include type-style('body-2'); + + color: var(--ig-gray-700); + text-align: end; } -.selection-sample > span { - width: 120px; - text-align: right; - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; +igx-buttongroup { + inline-size: 100%; } -.selection-sample igx-buttongroup { - width: 200px; +@container (width < 22rem) { + .selection-samples { + grid-template-columns: minmax(0, 1fr); + gap: rem(4px); + } + + .sample-label { + text-align: start; + + &:not(:first-of-type) { + margin-block-start: rem(16px); + } + } } diff --git a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.html b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.html index 57418c0d5..bfc42db3f 100644 --- a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.html +++ b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.html @@ -1,16 +1,10 @@
@for (size of sizes; track size) { -
- {{ getLabel(size) }} - - @for (city of cities; track city) { - - } - -
+ {{ getLabel(size) }} + + @for (city of cities; track city) { + + } + }
diff --git a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss index 7d9127e01..f93f2c76f 100644 --- a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss @@ -1,41 +1,53 @@ -.button-group-size { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - gap: 32px; - padding: 13px; - padding-left: 3rem; +@use 'igniteui-theming' as *; + +:host { + container-type: inline-size; + display: grid; + grid-template-columns: minmax(0, 1fr); + place-items: center; + height: 100vh; } -.button-group-size-item { - display: flex; - flex-direction: row; +.button-group-size { + display: grid; + grid-template-columns: auto minmax(rem(240px), 1fr); align-items: center; - justify-content: flex-start; - gap: 32px; + gap: rem(24px) rem(32px); + inline-size: 100%; + max-inline-size: rem(480px); + margin-inline: auto; } -.button-group-size-item span { - width: 52px; - text-align: right; - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; -} +.sample-label { + @include type-style('body-2'); -.button-group-small button { - min-width: 90px; + color: var(--ig-gray-700); + text-align: end; } -.button-group-medium button { - min-width: 100px; +igx-buttongroup { + &:nth-of-type(1n) { + --ig-size: var(--ig-size-small); + } + &:nth-of-type(2n) { + --ig-size: var(--ig-size-medium); + } + &:nth-of-type(3n) { + --ig-size: var(--ig-size-large); + } } -.button-group-large button { - min-width: 110px; +@container (width < 22rem) { + .button-group-size { + grid-template-columns: minmax(0, 1fr); + gap: rem(4px); + } + + .sample-label { + text-align: start; + + &:not(:first-of-type) { + margin-block-start: rem(16px); + } + } } diff --git a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html index 81234c33d..ffa5eb8aa 100644 --- a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html +++ b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html @@ -1,26 +1,32 @@ -
-
+
+
Enabled Disabled -
+ @for (row of rows; track row.label) { -
+
{{ row.label }} - - - +
+ Enabled + + + +
- - - -
+
+ Disabled + + + +
+ }
diff --git a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss index c823cd934..a9d63aa09 100644 --- a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss @@ -1,41 +1,89 @@ -.button-group-states { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - gap: 20px; - padding: 20px; +@use 'igniteui-theming' as *; + +:host { + container-type: inline-size; + display: grid; + grid-template-columns: minmax(0, 1fr); + align-content: center; + height: 100vh; } -.button-group-states-row { +.states-matrix { + --state-columns: 2; + display: grid; - grid-template-columns: 120px 160px 160px; + grid-template-columns: auto repeat(var(--state-columns), minmax(rem(120px), 1fr)); + gap: rem(16px); + inline-size: 100%; + max-inline-size: rem(520px); + margin-inline: auto; +} + +.states-row { + display: grid; + grid-column: 1 / -1; + grid-template-columns: subgrid; align-items: center; - gap: 16px; -} - -.button-group-states .row-label, -.button-group-states .column-label { - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; +} + +.row-label, +.column-label, +.cell-label { + @include type-style('body-2'); + + color: var(--ig-gray-700); +} + +.column-label, +.cell-label { text-align: center; } -.button-group-states igx-buttongroup { - width: 160px; +.cell-label { + display: none; +} + +.state-cell { + display: grid; + gap: rem(4px); +} + +// Too narrow for the matrix: drop the header, let the cells wrap, and move +// each column label into the cell it describes. +@container (width < 24rem) { + .states-matrix { + grid-template-columns: minmax(0, 1fr); + } + + .states-row { + grid-template-columns: repeat(auto-fit, minmax(rem(140px), 1fr)); + column-gap: rem(8px); + } + + header.states-row { + display: none; + } + + .row-label { + grid-column: 1 / -1; + } + + .cell-label { + display: block; + text-align: start; + margin-block-start: rem(16px); + } } -.button-group-states button { - width: 100%; +// WARNING START: Demo overrides only. Do not copy to production. +// Forced state classes are used here solely to present all component states visually. +igx-buttongroup { + pointer-events: none; } -.button-group-states button.state-idle.state-selected { +button.state-idle.state-selected { background: var(--item-active-background); border-color: var(--item-active-border-color); color: var(--item-active-text-color); } +// WARNING END diff --git a/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.html b/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.html index c59162f0a..1a47dc7e8 100644 --- a/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.html +++ b/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.html @@ -1,7 +1,5 @@ -
- - @for (layout of layouts; track layout) { - - } - -
+ + @for (layout of layouts; track layout) { + + } + diff --git a/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.scss b/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.scss index 4475acc9d..34bed7af8 100644 --- a/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-styling/button-group-styling.component.scss @@ -1,7 +1,19 @@ -@use "layout.scss" as *; @use "igniteui-angular/theming" as *; +:host { + display: grid; + place-items: center; + height: 100vh; +} + +igx-buttongroup { + display: inline-block; + width: 100%; + max-width: rem(400px); +} + $custom-button-group: button-group-theme( + $border-radius: 4px, $item-text-color: #4a5a66, $item-background: #cfe8fb, $item-border-color: #4da3e8, diff --git a/src/app/data-entries/buttonGroup/button-group-styling/layout.scss b/src/app/data-entries/buttonGroup/button-group-styling/layout.scss deleted file mode 100644 index 544499ade..000000000 --- a/src/app/data-entries/buttonGroup/button-group-styling/layout.scss +++ /dev/null @@ -1,13 +0,0 @@ -.button-group-styling { - display: flex; - align-items: center; - justify-content: center; - min-height: 7rem; -} - -igx-buttongroup { - width: 420px; - border: 2px solid #4da3e8; - border-radius: 4px; - overflow: hidden; -} diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.html b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.html index 8a1bc14d8..4ea6203b5 100644 --- a/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.html +++ b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.html @@ -1,7 +1,6 @@ -
- - @for (view of views; track view) { - - } - -
+ + @for (view of views; track view) { + + } + diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.scss b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.scss index 2c28a2607..f83f399b9 100644 --- a/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/button-group-tailwind-styling.component.scss @@ -1,15 +1,13 @@ -@use "layout.scss"; +@use 'igniteui-theming' as *; -.button-group-style { - --item-text-color: #6d28d9; - --item-background: #ffffff; - --item-border-color: #c4b5fd; - --item-hover-text-color: #6d28d9; - --item-hover-background: #fae8ff; - --item-hover-border-color: #c4b5fd; - --item-selected-text-color: #ffffff; - --item-selected-background: #7c3aed; - --item-selected-border-color: #c4b5fd; - --item-selected-hover-text-color: #ffffff; - --item-selected-hover-background: #7c3aed; +:host { + display: grid; + place-items: center; + height: 100vh; +} + +igx-buttongroup { + display: inline-block; + width: 100%; + max-width: rem(400px); } diff --git a/src/app/data-entries/buttonGroup/button-group-tailwind-styling/layout.scss b/src/app/data-entries/buttonGroup/button-group-tailwind-styling/layout.scss deleted file mode 100644 index 4b18df3f1..000000000 --- a/src/app/data-entries/buttonGroup/button-group-tailwind-styling/layout.scss +++ /dev/null @@ -1,16 +0,0 @@ -.button-group-tailwind-styling { - display: flex; - align-items: center; - justify-content: center; - min-height: 7rem; - width: 100%; - padding: 1.5rem; - box-sizing: border-box; - background: #f5f3ff; -} - -.button-group-tailwind-styling igx-buttongroup { - width: 420px; - max-width: 100%; - overflow: hidden; -} From ae7231c07e995c3d829a8f7cd3d5ca2ced17936e Mon Sep 17 00:00:00 2001 From: desig9stein Date: Tue, 25 Aug 2026 16:12:13 +0300 Subject: [PATCH 02/15] fix(button-group): remove unused additionalFiles property from styling config --- live-editing/configs/ButtonGroupConfigGenerator.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/live-editing/configs/ButtonGroupConfigGenerator.ts b/live-editing/configs/ButtonGroupConfigGenerator.ts index 9db78ec06..64aeafcbc 100644 --- a/live-editing/configs/ButtonGroupConfigGenerator.ts +++ b/live-editing/configs/ButtonGroupConfigGenerator.ts @@ -69,7 +69,6 @@ export class ButtonGroupConfigGenerator implements IConfigGenerator { // button group styling configs.push(new Config({ component: 'ButtonGroupStylingComponent', - additionalFiles: ["/src/app/data-entries/buttonGroup/button-group-styling/layout.scss"], appConfig: BaseAppConfig, shortenComponentPathBy: "/data-entries/buttonGroup/" })); From 09bca81d315555e3a035ad41efd12182e9f8c69b Mon Sep 17 00:00:00 2001 From: desig9stein Date: Wed, 26 Aug 2026 16:27:16 +0300 Subject: [PATCH 03/15] fix(button-group): update disabled state and alignment styles --- .../button-group-alignment.component.scss | 1 + .../button-group-states/button-group-states.component.html | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss index 976bd2fe8..1c0cc5f9c 100644 --- a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss @@ -28,4 +28,5 @@ span { @include type-style('body-2'); color: var(--ig-gray-700); + text-align: center; } diff --git a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html index ffa5eb8aa..9579f87be 100644 --- a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html +++ b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html @@ -23,8 +23,8 @@
Disabled - - + +
From e8edca1c2bdba16f2b0c569df283a181d971186a Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Thu, 27 Aug 2026 11:58:18 +0300 Subject: [PATCH 04/15] fix(button-group): update labels styling --- .../button-group-alignment.component.scss | 10 +++++++--- .../button-group-interaction-states.component.scss | 11 ++++++----- .../button-group-selection.component.scss | 9 ++++++--- .../button-group-size.component.scss | 9 ++++++--- .../button-group-states.component.scss | 9 ++++++--- 5 files changed, 31 insertions(+), 17 deletions(-) diff --git a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss index 1c0cc5f9c..6c7d08561 100644 --- a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss @@ -25,8 +25,12 @@ igx-buttongroup { } span { - @include type-style('body-2'); - - color: var(--ig-gray-700); + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.3px; + margin: 0.5rem; text-align: center; } diff --git a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss index abe560524..593da69c7 100644 --- a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss @@ -27,11 +27,12 @@ .row-label, .column-label, .cell-label { - @include type-style("body-2") { - margin: 0; - } - - color: var(--ig-gray-700); + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.3px; } .column-label, diff --git a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss index d800411f8..afb830974 100644 --- a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss @@ -19,9 +19,12 @@ } .sample-label { - @include type-style('body-2'); - - color: var(--ig-gray-700); + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.3px; text-align: end; } diff --git a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss index f93f2c76f..812cd70bc 100644 --- a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss @@ -19,9 +19,12 @@ } .sample-label { - @include type-style('body-2'); - - color: var(--ig-gray-700); + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.3px; text-align: end; } diff --git a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss index a9d63aa09..4a2654b91 100644 --- a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss @@ -29,9 +29,12 @@ .row-label, .column-label, .cell-label { - @include type-style('body-2'); - - color: var(--ig-gray-700); + color: #556c86; + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.3px; } .column-label, From e04d647708cbf3625842064b65a59ecf15f5757a Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Thu, 27 Aug 2026 13:26:21 +0300 Subject: [PATCH 05/15] fix(button-group): update labels styling --- .../button-group-alignment.component.scss | 8 ++++---- .../button-group-interaction-states.component.scss | 6 +++--- .../button-group-selection.component.scss | 6 +++--- .../button-group-size/button-group-size.component.scss | 6 +++--- .../button-group-states.component.scss | 6 +++--- 5 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss index 6c7d08561..5bd676074 100644 --- a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss @@ -27,10 +27,10 @@ igx-buttongroup { span { color: #556c86; font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; + font-size: rem(13px); font-weight: 400; - line-height: 20px; - letter-spacing: 0.3px; - margin: 0.5rem; + line-height: rem(20px); + letter-spacing: rem(0.3px); + margin: rem(8px); text-align: center; } diff --git a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss index 593da69c7..145d01863 100644 --- a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss @@ -29,10 +29,10 @@ .cell-label { color: #556c86; font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; + font-size: rem(13px); font-weight: 400; - line-height: 20px; - letter-spacing: 0.3px; + line-height: rem(20px); + letter-spacing: rem(0.3px); } .column-label, diff --git a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss index afb830974..084bb878a 100644 --- a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss @@ -21,10 +21,10 @@ .sample-label { color: #556c86; font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; + font-size: rem(13px); font-weight: 400; - line-height: 20px; - letter-spacing: 0.3px; + line-height: rem(20px); + letter-spacing: rem(0.3px); text-align: end; } diff --git a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss index 812cd70bc..b47f86170 100644 --- a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss @@ -21,10 +21,10 @@ .sample-label { color: #556c86; font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; + font-size: rem(13px); font-weight: 400; - line-height: 20px; - letter-spacing: 0.3px; + line-height: rem(20px); + letter-spacing: rem(0.3px); text-align: end; } diff --git a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss index 4a2654b91..e26e7f449 100644 --- a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss @@ -31,10 +31,10 @@ .cell-label { color: #556c86; font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; + font-size: rem(13px); font-weight: 400; - line-height: 20px; - letter-spacing: 0.3px; + line-height: rem(20px); + letter-spacing: rem(0.3px); } .column-label, From 95d8242aed109e22e999180be6da581d52abf7c6 Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Mon, 31 Aug 2026 08:59:09 +0300 Subject: [PATCH 06/15] fix(samples): update styling content --- .../badge/badge-dot/badge-dot.component.scss | 8 ++++++-- .../badge/badge-icon/badge-icon.component.scss | 7 ++++++- .../badge/badge-shape/badge-shape.component.scss | 7 ++++++- .../badge/badge-size/badge-size.component.scss | 7 ++++++- .../badge/badge-type/badge-type.component.scss | 7 ++++++- .../badge-variants/badge-variants.component.scss | 7 ++++++- .../button-group-alignment.component.scss | 2 +- ...button-group-interaction-states.component.scss | 2 +- .../button-group-selection.component.scss | 2 +- .../button-group-size.component.scss | 2 +- .../button-group-states.component.scss | 2 +- .../avatar-shape/avatar-shape.component.scss | 5 +++++ .../avatar/avatar-size/avatar-size.component.scss | 5 +++++ .../avatar-variants.component.scss | 5 +++++ src/styles.scss | 15 --------------- 15 files changed, 56 insertions(+), 27 deletions(-) diff --git a/src/app/data-display/badge/badge-dot/badge-dot.component.scss b/src/app/data-display/badge/badge-dot/badge-dot.component.scss index db1defa58..ffb028247 100644 --- a/src/app/data-display/badge/badge-dot/badge-dot.component.scss +++ b/src/app/data-display/badge/badge-dot/badge-dot.component.scss @@ -2,7 +2,7 @@ @use "igniteui-theming/sass/typography" as *; :host { - --sample-accent: #0057a9; + --sample-accent: var(--ig-primary-800); display: grid; grid-auto-flow: column; @@ -21,6 +21,10 @@ igx-badge { translate: -50% -50%; } +igx-avatar.icon-anchor { + --ig-avatar-background: var(--ig-gray-300); +} + $anchors: icon, avatar; @each $anchor in $anchors { @@ -70,7 +74,7 @@ $anchors: icon, avatar; } .unread { - color: var(--sample-accent); + color: var(--ig-gray-900); font-weight: 600; } diff --git a/src/app/data-display/badge/badge-icon/badge-icon.component.scss b/src/app/data-display/badge/badge-icon/badge-icon.component.scss index 5dccea83e..5f295bcc0 100644 --- a/src/app/data-display/badge/badge-icon/badge-icon.component.scss +++ b/src/app/data-display/badge/badge-icon/badge-icon.component.scss @@ -30,7 +30,12 @@ span { grid-row: 2; text-align: center; - color: var(--ig-gray-700); + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); } igx-badge:last-of-type { diff --git a/src/app/data-display/badge/badge-shape/badge-shape.component.scss b/src/app/data-display/badge/badge-shape/badge-shape.component.scss index 8e7dfd50b..5d38bab74 100644 --- a/src/app/data-display/badge/badge-shape/badge-shape.component.scss +++ b/src/app/data-display/badge/badge-shape/badge-shape.component.scss @@ -13,7 +13,12 @@ span { justify-self: end; - color: var(--ig-gray-700); + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); @include type-style("body-2") { margin: 0; diff --git a/src/app/data-display/badge/badge-size/badge-size.component.scss b/src/app/data-display/badge/badge-size/badge-size.component.scss index bdedf7a51..7f2108c1b 100644 --- a/src/app/data-display/badge/badge-size/badge-size.component.scss +++ b/src/app/data-display/badge/badge-size/badge-size.component.scss @@ -13,7 +13,12 @@ span { justify-self: end; - color: var(--ig-gray-700); + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); @include type-style("body-2") { margin: 0; diff --git a/src/app/data-display/badge/badge-type/badge-type.component.scss b/src/app/data-display/badge/badge-type/badge-type.component.scss index 9b22c0114..ae272a6dc 100644 --- a/src/app/data-display/badge/badge-type/badge-type.component.scss +++ b/src/app/data-display/badge/badge-type/badge-type.component.scss @@ -24,7 +24,12 @@ igx-avatar { span { grid-row: 2; text-align: center; - color: var(--ig-gray-700); + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); @include type-style("caption") { margin: 0; diff --git a/src/app/data-display/badge/badge-variants/badge-variants.component.scss b/src/app/data-display/badge/badge-variants/badge-variants.component.scss index 7cbd9ac60..8f88e19da 100644 --- a/src/app/data-display/badge/badge-variants/badge-variants.component.scss +++ b/src/app/data-display/badge/badge-variants/badge-variants.component.scss @@ -22,7 +22,12 @@ igx-avatar { span { grid-row: 2; text-align: center; - color: var(--ig-gray-700); + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); @include type-style("body-2") { margin: 0; diff --git a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss index 5bd676074..a91d9b616 100644 --- a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss @@ -25,7 +25,7 @@ igx-buttongroup { } span { - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: rem(13px); font-weight: 400; diff --git a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss index 145d01863..419d6c408 100644 --- a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss @@ -27,7 +27,7 @@ .row-label, .column-label, .cell-label { - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: rem(13px); font-weight: 400; diff --git a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss index 084bb878a..5bf42ecfb 100644 --- a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss @@ -19,7 +19,7 @@ } .sample-label { - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: rem(13px); font-weight: 400; diff --git a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss index b47f86170..abbbb870c 100644 --- a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss @@ -19,7 +19,7 @@ } .sample-label { - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: rem(13px); font-weight: 400; diff --git a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss index e26e7f449..62bf5bf0e 100644 --- a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss @@ -29,7 +29,7 @@ .row-label, .column-label, .cell-label { - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: rem(13px); font-weight: 400; diff --git a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss index a6a47666f..cbaac2cdc 100644 --- a/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss +++ b/src/app/layouts/avatar/avatar-shape/avatar-shape.component.scss @@ -23,6 +23,11 @@ span { grid-row: 2; text-align: center; color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); @include type-style("body-1") { margin: 0; diff --git a/src/app/layouts/avatar/avatar-size/avatar-size.component.scss b/src/app/layouts/avatar/avatar-size/avatar-size.component.scss index 79f4204bb..119e5278c 100644 --- a/src/app/layouts/avatar/avatar-size/avatar-size.component.scss +++ b/src/app/layouts/avatar/avatar-size/avatar-size.component.scss @@ -21,6 +21,11 @@ span { grid-row: 2; text-align: center; color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); @include type-style("body-1") { margin: 0; diff --git a/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss b/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss index a4c56b17f..25fc17d77 100644 --- a/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss +++ b/src/app/layouts/avatar/avatar-variants/avatar-variants.component.scss @@ -24,6 +24,11 @@ $avatars: circle, square, rounded; grid-row: 2; text-align: center; color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: rem(13px); + font-weight: 400; + line-height: rem(20px); + letter-spacing: rem(0.3px); @include type-style("body-1") { margin: 0; diff --git a/src/styles.scss b/src/styles.scss index 8c144ff6d..16c8722ea 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -19,21 +19,6 @@ body { margin: 0; } -body.custom-body:has( - app-badge-overview, - app-badge-styling, - app-badge-dot, - app-badge-type, - app-badge-icon, - app-badge-size, - app-badge-shape, - app-badge-variants, - app-badge-outlined, - app-badge-tailwind-styling -) { - background: transparent; -} - @include core(); @include typography(); @include theme( From 20637f1c95ac1db5195cb3dc537189572e1d021d Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Tue, 8 Sep 2026 17:50:43 +0300 Subject: [PATCH 07/15] fix(button-group): update samples to use bootstrap --- .../_bootstrap-button-group-theme.scss | 100 ++++++++++++++++++ .../button-group-alignment.component.scss | 1 + .../button-group-custom-toggle.component.scss | 3 +- ...on-group-interaction-states.component.scss | 41 +++---- .../button-group-layout.component.scss | 1 + .../button-group-overview.component.scss | 1 + .../button-group-selection.component.scss | 1 + .../button-group-size.component.scss | 15 +++ .../button-group-states.component.scss | 7 +- 9 files changed, 146 insertions(+), 24 deletions(-) create mode 100644 src/app/data-entries/buttonGroup/_bootstrap-button-group-theme.scss diff --git a/src/app/data-entries/buttonGroup/_bootstrap-button-group-theme.scss b/src/app/data-entries/buttonGroup/_bootstrap-button-group-theme.scss new file mode 100644 index 000000000..58b8463d7 --- /dev/null +++ b/src/app/data-entries/buttonGroup/_bootstrap-button-group-theme.scss @@ -0,0 +1,100 @@ +@use 'igniteui-angular/theming' as *; + +$bs-primary: color($light-bootstrap-palette, 'primary', 500); +$bs-primary-hover: color($light-bootstrap-palette, 'primary', 600); +$bs-primary-active: color($light-bootstrap-palette, 'primary', 700); +$bs-primary-hover-light: mix(#fff, $bs-primary-hover, 3%); +$bs-primary-focus-dark: mix(#000, color($light-bootstrap-palette, 'primary', 800), 8%); +$bs-on-primary: #fff; + +:host, +igx-buttongroup { + --ig-theme: bootstrap; + --ig-theme-variant: light; + + @include typography( + $font-family: $bootstrap-typeface, + $type-scale: $bootstrap-type-scale + ); + + @include tokens( + button-group-theme( + $schema: $light-bootstrap-schema, + $item-background: $bs-primary, + $item-text-color: $bs-on-primary, + $item-icon-color: $bs-on-primary, + $item-border-color: $bs-primary, + $item-hover-background: $bs-primary-hover-light, + $item-hover-text-color: $bs-on-primary, + $item-hover-icon-color: $bs-on-primary, + $item-hover-border-color: $bs-primary-hover-light, + $item-focused-background: $bs-primary-hover-light, + $item-focused-text-color: $bs-on-primary, + $item-focused-border-color: $bs-primary-hover-light, + $item-focused-hover-background: $bs-primary-hover, + $item-focused-hover-text-color: $bs-on-primary, + $item-focused-hover-border-color: $bs-primary-hover, + $item-selected-background: $bs-primary-active, + $item-selected-text-color: $bs-on-primary, + $item-selected-icon-color: $bs-on-primary, + $item-selected-border-color: $bs-primary-active, + $item-selected-hover-background: $bs-primary-focus-dark, + $item-selected-hover-text-color: $bs-on-primary, + $item-selected-hover-icon-color: $bs-on-primary, + $item-selected-hover-border-color: $bs-primary-focus-dark, + $item-selected-focus-background: $bs-primary-focus-dark, + $item-selected-focus-hover-background: $bs-primary-hover + ) + ); +} + +:host ::ng-deep igx-buttongroup button.igx-button-group__item { + background: $bs-primary; + color: $bs-on-primary; + border-color: $bs-primary; + border-radius: 0; + text-transform: none; +} + +:host ::ng-deep igx-buttongroup .igx-button-group__buttons-container { + border-radius: 4px; +} + +:host ::ng-deep igx-buttongroup button.igx-button-group__item:first-of-type { + border-start-start-radius: 4px; + border-end-start-radius: 4px; +} + +:host ::ng-deep igx-buttongroup button.igx-button-group__item:last-of-type { + border-start-end-radius: 4px; + border-end-end-radius: 4px; +} + +:host ::ng-deep igx-buttongroup button.igx-button-group__item:hover { + background: $bs-primary-hover; + color: $bs-on-primary; + border-color: $bs-primary-hover; +} + +:host ::ng-deep igx-buttongroup button.igx-button-group__item--selected { + background: $bs-primary-active; + color: $bs-on-primary; + border-color: $bs-primary-active; +} + +:host ::ng-deep igx-buttongroup button.igx-button-group__item:disabled { + background: color($light-bootstrap-palette, 'primary', 50); + color: color($light-bootstrap-palette, 'primary', 200); + border-color: color($light-bootstrap-palette, 'primary', 50); + cursor: not-allowed; +} + +:host ::ng-deep igx-buttongroup button.igx-button-group__item--selected:disabled { + background: color($light-bootstrap-palette, 'primary', 100); + color: color($light-bootstrap-palette, 'primary', 200); + border-color: color($light-bootstrap-palette, 'primary', 100); +} + +:host ::ng-deep igx-buttongroup button.igx-button-group__item igx-icon { + color: $bs-on-primary; +} diff --git a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss index a91d9b616..dc9ba93f7 100644 --- a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss @@ -1,3 +1,4 @@ +@use '../_bootstrap-button-group-theme'; @use 'igniteui-theming' as *; :host { diff --git a/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss index 3eb8ea51c..892029cc8 100644 --- a/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss @@ -1,3 +1,4 @@ +@use '../_bootstrap-button-group-theme'; @use 'igniteui-theming' as *; :host { @@ -7,5 +8,5 @@ } igx-buttongroup { - max-width: rem(300px); + inline-size: rem(180px); } diff --git a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss index 419d6c408..fb5e67665 100644 --- a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss @@ -1,3 +1,4 @@ +@use '../_bootstrap-button-group-theme'; @use "igniteui-theming/sass/typography" as *; :host { @@ -87,33 +88,33 @@ igx-buttongroup{ pointer-events: none; } -.state-hover:not(.state-selected) { - background: var(--item-hover-background); - border-color: var(--item-hover-border-color); - color: var(--item-hover-text-color); +.igx-button-group__item.state-hover:not(.state-selected) { + background: var(--ig-button-group-item-hover-background); + border-color: var(--ig-button-group-item-hover-border-color); + color: var(--ig-button-group-item-hover-text-color); } -.state-idle.state-selected { - background: var(--item-active-background); - border-color: var(--item-active-border-color); - color: var(--item-active-text-color); +.igx-button-group__item.state-idle.state-selected { + background: var(--ig-button-group-item-selected-background); + border-color: var(--ig-button-group-item-selected-border-color); + color: var(--ig-button-group-item-selected-text-color); } -.state-focused:not(.state-selected) { - background: var(--item-focused-hover-background); - border-color: var(--item-focused-hover-border-color); - color: var(--item-focused-hover-text-color); +.igx-button-group__item.state-focused:not(.state-selected) { + background: var(--ig-button-group-item-focused-background); + border-color: var(--ig-button-group-item-focused-border-color); + color: var(--ig-button-group-item-focused-text-color); } -.state-hover.state-selected { - background: var(--item-selected-active-background); - border-color: var(--item-selected-active-border-color); - color: var(--item-selected-hover-text-color); +.igx-button-group__item.state-hover.state-selected { + background: var(--ig-button-group-item-selected-hover-background); + border-color: var(--ig-button-group-item-selected-hover-border-color); + color: var(--ig-button-group-item-selected-hover-text-color); } -.state-focused.state-selected { - background: var(--item-selected-active-background); - border-color: var(--item-selected-active-border-color); - color: var(--item-focused-hover-text-color); +.igx-button-group__item.state-focused.state-selected { + background: var(--ig-button-group-item-selected-focus-background); + border-color: var(--ig-button-group-item-selected-hover-border-color); + color: var(--ig-button-group-item-selected-text-color); } // WARNING END diff --git a/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss index 9b0b34eb7..a045a9540 100644 --- a/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss @@ -1,3 +1,4 @@ +@use '../_bootstrap-button-group-theme'; @use 'igniteui-theming' as *; :host { diff --git a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss index 37cdf8360..0b081959e 100644 --- a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss @@ -1,3 +1,4 @@ +@use '../_bootstrap-button-group-theme'; @use 'igniteui-theming' as *; :host { diff --git a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss index 5bf42ecfb..75918ad9d 100644 --- a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss @@ -1,3 +1,4 @@ +@use '../_bootstrap-button-group-theme'; @use 'igniteui-theming' as *; :host { diff --git a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss index abbbb870c..0605a62f7 100644 --- a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss @@ -1,3 +1,4 @@ +@use '../_bootstrap-button-group-theme'; @use 'igniteui-theming' as *; :host { @@ -31,12 +32,26 @@ igx-buttongroup { &:nth-of-type(1n) { --ig-size: var(--ig-size-small); + + ::ng-deep button.igx-button-group__item { + min-height: rem(32px); + } } + &:nth-of-type(2n) { --ig-size: var(--ig-size-medium); + + ::ng-deep button.igx-button-group__item { + min-height: rem(40px); + } } + &:nth-of-type(3n) { --ig-size: var(--ig-size-large); + + ::ng-deep button.igx-button-group__item { + min-height: rem(48px); + } } } diff --git a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss index 62bf5bf0e..1b5ab7625 100644 --- a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss @@ -1,3 +1,4 @@ +@use '../_bootstrap-button-group-theme'; @use 'igniteui-theming' as *; :host { @@ -85,8 +86,8 @@ igx-buttongroup { } button.state-idle.state-selected { - background: var(--item-active-background); - border-color: var(--item-active-border-color); - color: var(--item-active-text-color); + background: var(--ig-button-group-item-selected-background); + border-color: var(--ig-button-group-item-selected-border-color); + color: var(--ig-button-group-item-selected-text-color); } // WARNING END From 797d37b694e2f630dd594700227c6080e2471e6b Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Thu, 10 Sep 2026 11:43:06 +0300 Subject: [PATCH 08/15] fix(badge): update outlined sample css --- .../badge/badge-outlined/badge-outlined.component.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss b/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss index 7f7ef7321..4dd987fdd 100644 --- a/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss +++ b/src/app/data-display/badge/badge-outlined/badge-outlined.component.scss @@ -7,7 +7,7 @@ place-content: center; place-items: center; column-gap: rem(60px); - min-height: 7rem; + min-height: 100vh; padding-inline: rem(16px); ::ng-deep { @@ -55,7 +55,7 @@ igx-stepper { --ig-stepper-step-separator-style: dashed; --ig-stepper-step-separator-color: var(--ig-gray-400); - max-width: rem(316px); + inline-size: rem(320px); } span[igxStepIndicator] { From 08c4d5cc15544670c2d88f15c2ad88268471c3bb Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 23 Sep 2026 15:44:54 +0300 Subject: [PATCH 09/15] fix(button): remove hardcoded bootstrap theme --- .../button/_bootstrap-button-theme.scss | 61 ------------------- .../button-contained.component.scss | 2 - .../button-download.component.scss | 2 - .../button-fab/button-fab.component.scss | 2 - .../button-flat/button-flat.component.scss | 2 - .../button-interaction-states.component.scss | 1 - .../button-layout.component.scss | 2 - .../button-outlined.component.scss | 2 - .../button-overview.component.scss | 2 - .../button-size/button-size.component.scss | 2 - .../button-states.component.scss | 2 - 11 files changed, 80 deletions(-) delete mode 100644 src/app/data-entries/button/_bootstrap-button-theme.scss diff --git a/src/app/data-entries/button/_bootstrap-button-theme.scss b/src/app/data-entries/button/_bootstrap-button-theme.scss deleted file mode 100644 index 6ce81fd33..000000000 --- a/src/app/data-entries/button/_bootstrap-button-theme.scss +++ /dev/null @@ -1,61 +0,0 @@ -@use 'igniteui-angular/theming' as *; -@use 'igniteui-angular/lib/core/styles/components/button/button-component' as button; -@use 'igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light'; -@use 'igniteui-theming/sass/typography/presets' as typography-presets; - -:host ::ng-deep { - @include typography( - $font-family: typography-presets.$bootstrap-typeface, - $type-scale: typography-presets.$bootstrap-type-scale - ); - - @include button( - $flat: flat-button-theme( - $schema: $light-bootstrap-schema, - $foreground: color($light-bootstrap-palette, 'primary'), - $hover-foreground: color($light-bootstrap-palette, 'primary'), - $disabled-foreground: color($light-bootstrap-palette, 'primary', 200) - ), - $contained: contained-button-theme( - $schema: $light-bootstrap-schema, - $background: color($light-bootstrap-palette, 'primary'), - $foreground: var(--ig-gray-50), - $hover-background: color($light-bootstrap-palette, 'primary', 600), - $hover-foreground: var(--ig-gray-50), - $focus-background: color($light-bootstrap-palette, 'primary', 800), - $focus-foreground: var(--ig-gray-50), - $focus-hover-background: color($light-bootstrap-palette, 'primary', 600), - $focus-hover-foreground: var(--ig-gray-50), - $disabled-background: color($light-bootstrap-palette, 'primary', 50), - $disabled-foreground: color($light-bootstrap-palette, 'primary', 200) - ), - $outlined: outlined-button-theme( - $schema: $light-bootstrap-schema, - $foreground: color($light-bootstrap-palette, 'primary'), - $hover-background: color($light-bootstrap-palette, 'primary'), - $hover-foreground: var(--ig-gray-50), - $disabled-foreground: color($light-bootstrap-palette, 'primary', 200), - $disabled-border-color: color($light-bootstrap-palette, 'primary', 50) - ), - $fab: fab-button-theme( - $schema: $light-bootstrap-schema, - $background: color($light-bootstrap-palette, 'secondary'), - $foreground: var(--ig-gray-50), - $hover-background: color($light-bootstrap-palette, 'primary'), - $hover-foreground: var(--ig-gray-50), - $disabled-background: color($light-bootstrap-palette, 'gray', 300), - $disabled-foreground: color($light-bootstrap-palette, 'gray', 500), - $resting-shadow: none, - $hover-shadow: none - ) - ); - @include button.component(); - - [igxButton] { - --ig-size: var(--ig-size-medium); - } - - button[igxButton='fab'] { - --ig-size: var(--ig-size-large); - } -} diff --git a/src/app/data-entries/button/button-contained/button-contained.component.scss b/src/app/data-entries/button/button-contained/button-contained.component.scss index 2bfc8c508..c98e6acd1 100644 --- a/src/app/data-entries/button/button-contained/button-contained.component.scss +++ b/src/app/data-entries/button/button-contained/button-contained.component.scss @@ -1,5 +1,3 @@ -@use '../_bootstrap-button-theme'; - .button-sample { display: flex; padding: 2.5rem; diff --git a/src/app/data-entries/button/button-download/button-download.component.scss b/src/app/data-entries/button/button-download/button-download.component.scss index 54492fe32..080967734 100644 --- a/src/app/data-entries/button/button-download/button-download.component.scss +++ b/src/app/data-entries/button/button-download/button-download.component.scss @@ -1,5 +1,3 @@ -@use '../_bootstrap-button-theme'; - .button-sample { display: flex; padding: 2.5rem; diff --git a/src/app/data-entries/button/button-fab/button-fab.component.scss b/src/app/data-entries/button/button-fab/button-fab.component.scss index 8bb51245d..d41b93c4b 100644 --- a/src/app/data-entries/button/button-fab/button-fab.component.scss +++ b/src/app/data-entries/button/button-fab/button-fab.component.scss @@ -1,5 +1,3 @@ -@use '../_bootstrap-button-theme'; - .button-sample { display: flex; padding: 2rem; diff --git a/src/app/data-entries/button/button-flat/button-flat.component.scss b/src/app/data-entries/button/button-flat/button-flat.component.scss index 2bfc8c508..c98e6acd1 100644 --- a/src/app/data-entries/button/button-flat/button-flat.component.scss +++ b/src/app/data-entries/button/button-flat/button-flat.component.scss @@ -1,5 +1,3 @@ -@use '../_bootstrap-button-theme'; - .button-sample { display: flex; padding: 2.5rem; diff --git a/src/app/data-entries/button/button-interaction-states/button-interaction-states.component.scss b/src/app/data-entries/button/button-interaction-states/button-interaction-states.component.scss index bb5a34685..02a12c790 100644 --- a/src/app/data-entries/button/button-interaction-states/button-interaction-states.component.scss +++ b/src/app/data-entries/button/button-interaction-states/button-interaction-states.component.scss @@ -1,4 +1,3 @@ -@use '../_bootstrap-button-theme'; @use "igniteui-angular/theming" as *; .button-container { diff --git a/src/app/data-entries/button/button-layout/button-layout.component.scss b/src/app/data-entries/button/button-layout/button-layout.component.scss index 770c65f29..7b8cb2563 100644 --- a/src/app/data-entries/button/button-layout/button-layout.component.scss +++ b/src/app/data-entries/button/button-layout/button-layout.component.scss @@ -1,5 +1,3 @@ -@use '../_bootstrap-button-theme'; - .button-container { display: flex; align-items: center; diff --git a/src/app/data-entries/button/button-outlined/button-outlined.component.scss b/src/app/data-entries/button/button-outlined/button-outlined.component.scss index 2bfc8c508..c98e6acd1 100644 --- a/src/app/data-entries/button/button-outlined/button-outlined.component.scss +++ b/src/app/data-entries/button/button-outlined/button-outlined.component.scss @@ -1,5 +1,3 @@ -@use '../_bootstrap-button-theme'; - .button-sample { display: flex; padding: 2.5rem; diff --git a/src/app/data-entries/button/button-overview/button-overview.component.scss b/src/app/data-entries/button/button-overview/button-overview.component.scss index e464378d4..6c2b3ea3c 100644 --- a/src/app/data-entries/button/button-overview/button-overview.component.scss +++ b/src/app/data-entries/button/button-overview/button-overview.component.scss @@ -1,5 +1,3 @@ -@use '../_bootstrap-button-theme'; - .form { display: flex; justify-content: center; diff --git a/src/app/data-entries/button/button-size/button-size.component.scss b/src/app/data-entries/button/button-size/button-size.component.scss index 2b0a6afd1..58d897c92 100644 --- a/src/app/data-entries/button/button-size/button-size.component.scss +++ b/src/app/data-entries/button/button-size/button-size.component.scss @@ -1,5 +1,3 @@ -@use '../_bootstrap-button-theme'; - :host { display: flex; justify-content: center; diff --git a/src/app/data-entries/button/button-states/button-states.component.scss b/src/app/data-entries/button/button-states/button-states.component.scss index ac098876d..3b224d140 100644 --- a/src/app/data-entries/button/button-states/button-states.component.scss +++ b/src/app/data-entries/button/button-states/button-states.component.scss @@ -1,5 +1,3 @@ -@use '../_bootstrap-button-theme'; - .button-container { display: flex; justify-content: center; From a40bf7deea40732f82d4eeef850af6144e5170db Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 23 Sep 2026 15:47:12 +0300 Subject: [PATCH 10/15] fix(*): change style layer order so Tailwind Preflight does not override theme --- src/index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/index.html b/src/index.html index 65e26031d..84b261710 100644 --- a/src/index.html +++ b/src/index.html @@ -3,6 +3,10 @@ + + Angular Demos From 0ff37660337c723638a7a1dc0254cfaa7251ddbf Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 23 Sep 2026 15:50:45 +0300 Subject: [PATCH 11/15] fix(button-group): remove hardcoded bootstrap theme --- .../_bootstrap-button-group-theme.scss | 100 ------------------ .../button-group-alignment.component.scss | 1 - .../button-group-custom-toggle.component.scss | 1 - ...on-group-interaction-states.component.scss | 1 - .../button-group-layout.component.scss | 1 - .../button-group-overview.component.scss | 1 - .../button-group-selection.component.scss | 1 - .../button-group-size.component.scss | 1 - .../button-group-states.component.scss | 1 - 9 files changed, 108 deletions(-) delete mode 100644 src/app/data-entries/buttonGroup/_bootstrap-button-group-theme.scss diff --git a/src/app/data-entries/buttonGroup/_bootstrap-button-group-theme.scss b/src/app/data-entries/buttonGroup/_bootstrap-button-group-theme.scss deleted file mode 100644 index 58b8463d7..000000000 --- a/src/app/data-entries/buttonGroup/_bootstrap-button-group-theme.scss +++ /dev/null @@ -1,100 +0,0 @@ -@use 'igniteui-angular/theming' as *; - -$bs-primary: color($light-bootstrap-palette, 'primary', 500); -$bs-primary-hover: color($light-bootstrap-palette, 'primary', 600); -$bs-primary-active: color($light-bootstrap-palette, 'primary', 700); -$bs-primary-hover-light: mix(#fff, $bs-primary-hover, 3%); -$bs-primary-focus-dark: mix(#000, color($light-bootstrap-palette, 'primary', 800), 8%); -$bs-on-primary: #fff; - -:host, -igx-buttongroup { - --ig-theme: bootstrap; - --ig-theme-variant: light; - - @include typography( - $font-family: $bootstrap-typeface, - $type-scale: $bootstrap-type-scale - ); - - @include tokens( - button-group-theme( - $schema: $light-bootstrap-schema, - $item-background: $bs-primary, - $item-text-color: $bs-on-primary, - $item-icon-color: $bs-on-primary, - $item-border-color: $bs-primary, - $item-hover-background: $bs-primary-hover-light, - $item-hover-text-color: $bs-on-primary, - $item-hover-icon-color: $bs-on-primary, - $item-hover-border-color: $bs-primary-hover-light, - $item-focused-background: $bs-primary-hover-light, - $item-focused-text-color: $bs-on-primary, - $item-focused-border-color: $bs-primary-hover-light, - $item-focused-hover-background: $bs-primary-hover, - $item-focused-hover-text-color: $bs-on-primary, - $item-focused-hover-border-color: $bs-primary-hover, - $item-selected-background: $bs-primary-active, - $item-selected-text-color: $bs-on-primary, - $item-selected-icon-color: $bs-on-primary, - $item-selected-border-color: $bs-primary-active, - $item-selected-hover-background: $bs-primary-focus-dark, - $item-selected-hover-text-color: $bs-on-primary, - $item-selected-hover-icon-color: $bs-on-primary, - $item-selected-hover-border-color: $bs-primary-focus-dark, - $item-selected-focus-background: $bs-primary-focus-dark, - $item-selected-focus-hover-background: $bs-primary-hover - ) - ); -} - -:host ::ng-deep igx-buttongroup button.igx-button-group__item { - background: $bs-primary; - color: $bs-on-primary; - border-color: $bs-primary; - border-radius: 0; - text-transform: none; -} - -:host ::ng-deep igx-buttongroup .igx-button-group__buttons-container { - border-radius: 4px; -} - -:host ::ng-deep igx-buttongroup button.igx-button-group__item:first-of-type { - border-start-start-radius: 4px; - border-end-start-radius: 4px; -} - -:host ::ng-deep igx-buttongroup button.igx-button-group__item:last-of-type { - border-start-end-radius: 4px; - border-end-end-radius: 4px; -} - -:host ::ng-deep igx-buttongroup button.igx-button-group__item:hover { - background: $bs-primary-hover; - color: $bs-on-primary; - border-color: $bs-primary-hover; -} - -:host ::ng-deep igx-buttongroup button.igx-button-group__item--selected { - background: $bs-primary-active; - color: $bs-on-primary; - border-color: $bs-primary-active; -} - -:host ::ng-deep igx-buttongroup button.igx-button-group__item:disabled { - background: color($light-bootstrap-palette, 'primary', 50); - color: color($light-bootstrap-palette, 'primary', 200); - border-color: color($light-bootstrap-palette, 'primary', 50); - cursor: not-allowed; -} - -:host ::ng-deep igx-buttongroup button.igx-button-group__item--selected:disabled { - background: color($light-bootstrap-palette, 'primary', 100); - color: color($light-bootstrap-palette, 'primary', 200); - border-color: color($light-bootstrap-palette, 'primary', 100); -} - -:host ::ng-deep igx-buttongroup button.igx-button-group__item igx-icon { - color: $bs-on-primary; -} diff --git a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss index dc9ba93f7..a91d9b616 100644 --- a/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-alignment/button-group-alignment.component.scss @@ -1,4 +1,3 @@ -@use '../_bootstrap-button-group-theme'; @use 'igniteui-theming' as *; :host { diff --git a/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss index 892029cc8..134b02ca0 100644 --- a/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-custom-toggle/button-group-custom-toggle.component.scss @@ -1,4 +1,3 @@ -@use '../_bootstrap-button-group-theme'; @use 'igniteui-theming' as *; :host { diff --git a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss index fb5e67665..1a6ddadfb 100644 --- a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss @@ -1,4 +1,3 @@ -@use '../_bootstrap-button-group-theme'; @use "igniteui-theming/sass/typography" as *; :host { diff --git a/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss index a045a9540..9b0b34eb7 100644 --- a/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-layout/button-group-layout.component.scss @@ -1,4 +1,3 @@ -@use '../_bootstrap-button-group-theme'; @use 'igniteui-theming' as *; :host { diff --git a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss index 0b081959e..37cdf8360 100644 --- a/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-overview/button-group-overview.component.scss @@ -1,4 +1,3 @@ -@use '../_bootstrap-button-group-theme'; @use 'igniteui-theming' as *; :host { diff --git a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss index 75918ad9d..5bf42ecfb 100644 --- a/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-selection/button-group-selection.component.scss @@ -1,4 +1,3 @@ -@use '../_bootstrap-button-group-theme'; @use 'igniteui-theming' as *; :host { diff --git a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss index 0605a62f7..d1e5c076b 100644 --- a/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-size/button-group-size.component.scss @@ -1,4 +1,3 @@ -@use '../_bootstrap-button-group-theme'; @use 'igniteui-theming' as *; :host { diff --git a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss index 1b5ab7625..3cfebfd64 100644 --- a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss @@ -1,4 +1,3 @@ -@use '../_bootstrap-button-group-theme'; @use 'igniteui-theming' as *; :host { From bc50495180e36a1d0abb964d298f08e5405ae660 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 23 Sep 2026 16:13:12 +0300 Subject: [PATCH 12/15] fix(button-group): interaction states sample dark theme --- ...on-group-interaction-states.component.scss | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss index 1a6ddadfb..3619484b4 100644 --- a/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-interaction-states/button-group-interaction-states.component.scss @@ -88,32 +88,32 @@ igx-buttongroup{ } .igx-button-group__item.state-hover:not(.state-selected) { - background: var(--ig-button-group-item-hover-background); - border-color: var(--ig-button-group-item-hover-border-color); - color: var(--ig-button-group-item-hover-text-color); + background: var(--item-hover-background); + border-color: var(--item-hover-border-color); + color: var(--item-hover-text-color); } .igx-button-group__item.state-idle.state-selected { - background: var(--ig-button-group-item-selected-background); - border-color: var(--ig-button-group-item-selected-border-color); - color: var(--ig-button-group-item-selected-text-color); + background: var(--item-selected-background); + border-color: var(--item-selected-border-color); + color: var(--item-selected-text-color); } .igx-button-group__item.state-focused:not(.state-selected) { - background: var(--ig-button-group-item-focused-background); - border-color: var(--ig-button-group-item-focused-border-color); - color: var(--ig-button-group-item-focused-text-color); + background: var(--item-focused-background); + border-color: var(--item-focused-border-color); + color: var(--item-focused-text-color); } .igx-button-group__item.state-hover.state-selected { - background: var(--ig-button-group-item-selected-hover-background); - border-color: var(--ig-button-group-item-selected-hover-border-color); - color: var(--ig-button-group-item-selected-hover-text-color); + background: var(--item-selected-hover-background); + border-color: var(--item-selected-hover-border-color); + color: var(--item-selected-hover-text-color); } .igx-button-group__item.state-focused.state-selected { - background: var(--ig-button-group-item-selected-focus-background); - border-color: var(--ig-button-group-item-selected-hover-border-color); - color: var(--ig-button-group-item-selected-text-color); + background: var(--item-selected-focus-background); + border-color: var(--item-selected-hover-border-color); + color: var(--item-selected-text-color); } // WARNING END From 292f379e1032bcda023793e3667eeecee163c8e2 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 23 Sep 2026 16:13:25 +0300 Subject: [PATCH 13/15] fix(button-group): states sample dark theme --- .../button-group-states.component.html | 4 +--- .../button-group-states.component.scss | 8 +------- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html index 9579f87be..de47bb98d 100644 --- a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html +++ b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.html @@ -15,9 +15,7 @@ + [selected]="row.selected">Device diff --git a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss index 3cfebfd64..813e4e490 100644 --- a/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss +++ b/src/app/data-entries/buttonGroup/button-group-states/button-group-states.component.scss @@ -79,14 +79,8 @@ } // WARNING START: Demo overrides only. Do not copy to production. -// Forced state classes are used here solely to present all component states visually. +// Interaction is disabled so the matrix stays a static picture of each state. igx-buttongroup { pointer-events: none; } - -button.state-idle.state-selected { - background: var(--ig-button-group-item-selected-background); - border-color: var(--ig-button-group-item-selected-border-color); - color: var(--ig-button-group-item-selected-text-color); -} // WARNING END From 8a3a03199c62313a6dc4ba787d917286f34df4e7 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 23 Sep 2026 16:35:50 +0300 Subject: [PATCH 14/15] fix(switch): remove hardcoded bootstrap theme --- .../data-entries/switch/switch-bootstrap.scss | 65 ------------------- .../switch-disabled.component.scss | 8 --- .../switch-enabled.component.scss | 8 --- .../switch-layout.component.scss | 8 --- .../switch-overview.component.scss | 8 --- .../switch-selected.component.scss | 8 --- .../switch-styling.component.scss | 7 -- .../switch-tailwind-styling.component.scss | 4 -- 8 files changed, 116 deletions(-) delete mode 100644 src/app/data-entries/switch/switch-bootstrap.scss diff --git a/src/app/data-entries/switch/switch-bootstrap.scss b/src/app/data-entries/switch/switch-bootstrap.scss deleted file mode 100644 index 3212de833..000000000 --- a/src/app/data-entries/switch/switch-bootstrap.scss +++ /dev/null @@ -1,65 +0,0 @@ -@use "igniteui-angular/theming" as *; - -// Bootstrap switch geometry, aligned with the Bootstrap form-switch proportions. -@mixin bootstrap-switch { - :host ::ng-deep igx-switch { - --switch-width: #{rem(32px)}; - --switch-height: #{rem(16px)}; - --switch-thumb-size: #{rem(9px)}; - --switch-on-offset: #{rem(3px)}; - --switch-off-offset: #{rem(3px)}; - - ::ng-deep { - .igx-switch__composite { - box-sizing: border-box; - } - - .igx-switch__composite-thumb { - width: #{rem(9px)}; - height: #{rem(9px)}; - min-width: #{rem(9px)}; - box-shadow: none; - } - - .igx-switch__thumb { - width: #{rem(9px)}; - height: #{rem(9px)}; - min-width: #{rem(9px)}; - } - - .igx-switch__composite-thumb, - .igx-switch__thumb { - inline-size: #{rem(9px)}; - block-size: #{rem(9px)}; - min-inline-size: #{rem(9px)}; - max-inline-size: #{rem(9px)}; - min-block-size: #{rem(9px)}; - max-block-size: #{rem(9px)}; - } - } - - &.igx-switch--checked:not(.igx-switch--disabled) ::ng-deep .igx-switch__composite-thumb { - transform: translateX(#{rem(18px)}); - } - - &.igx-switch--checked:not(.igx-switch--disabled) ::ng-deep .igx-switch__composite { - background: var(--ig-primary-500); - } - - &.igx-switch--disabled ::ng-deep .igx-switch__composite-thumb { - transform: translateX(#{rem(3px)}) translateY(-1px); - } - - &.igx-switch--disabled.igx-switch--checked ::ng-deep .igx-switch__composite-thumb { - transform: translateX(#{rem(18px)}) translateY(0); - } - } - - :host ::ng-deep igx-switch.igx-switch--disabled.igx-switch--checked .igx-switch__composite-thumb { - transform: translateX(#{rem(18px)}) translateY(0); - } - - :host ::ng-deep igx-switch:not(.igx-switch--disabled) { - --track-on-color: var(--ig-primary-500); - } -} diff --git a/src/app/data-entries/switch/switch-disabled/switch-disabled.component.scss b/src/app/data-entries/switch/switch-disabled/switch-disabled.component.scss index 7adeb2efb..28c0265f9 100644 --- a/src/app/data-entries/switch/switch-disabled/switch-disabled.component.scss +++ b/src/app/data-entries/switch/switch-disabled/switch-disabled.component.scss @@ -1,9 +1,3 @@ -@use "igniteui-angular/theming" as *; -@use "sass:map"; -@use "../switch-bootstrap" as switch-bootstrap; - -@include switch-bootstrap.bootstrap-switch; - :host { display: flex; min-block-size: 100%; @@ -11,8 +5,6 @@ place-content: center; place-items: center; padding: 16px; - - @include tokens(switch-theme($schema: map.get($light-bootstrap-schema, switch))); } .states { diff --git a/src/app/data-entries/switch/switch-enabled/switch-enabled.component.scss b/src/app/data-entries/switch/switch-enabled/switch-enabled.component.scss index 331ca49c3..d36f357ba 100644 --- a/src/app/data-entries/switch/switch-enabled/switch-enabled.component.scss +++ b/src/app/data-entries/switch/switch-enabled/switch-enabled.component.scss @@ -1,16 +1,8 @@ -@use "igniteui-angular/theming" as *; -@use "sass:map"; -@use "../switch-bootstrap" as switch-bootstrap; - -@include switch-bootstrap.bootstrap-switch; - :host { display: flex; place-content: center; place-items: center; padding: 16px; - - @include tokens(switch-theme($schema: map.get($light-bootstrap-schema, switch))); } .states { diff --git a/src/app/data-entries/switch/switch-layout/switch-layout.component.scss b/src/app/data-entries/switch/switch-layout/switch-layout.component.scss index c281c7302..9cb1380aa 100644 --- a/src/app/data-entries/switch/switch-layout/switch-layout.component.scss +++ b/src/app/data-entries/switch/switch-layout/switch-layout.component.scss @@ -1,9 +1,3 @@ -@use "igniteui-angular/theming" as *; -@use "sass:map"; -@use "../switch-bootstrap" as switch-bootstrap; - -@include switch-bootstrap.bootstrap-switch; - :host { display: flex; min-block-size: 100%; @@ -11,8 +5,6 @@ place-content: center; place-items: center; padding: 16px; - - @include tokens(switch-theme($schema: map.get($light-bootstrap-schema, switch))); } .variants { diff --git a/src/app/data-entries/switch/switch-overview/switch-overview.component.scss b/src/app/data-entries/switch/switch-overview/switch-overview.component.scss index 289bdc242..d55abd625 100644 --- a/src/app/data-entries/switch/switch-overview/switch-overview.component.scss +++ b/src/app/data-entries/switch/switch-overview/switch-overview.component.scss @@ -1,16 +1,8 @@ -@use "igniteui-angular/theming" as *; -@use "sass:map"; -@use "../switch-bootstrap" as switch-bootstrap; - -@include switch-bootstrap.bootstrap-switch; - :host { display: flex; place-content: center; place-items: center; padding: 16px; - - @include tokens(switch-theme($schema: map.get($light-bootstrap-schema, switch))); } .notifications { diff --git a/src/app/data-entries/switch/switch-selected/switch-selected.component.scss b/src/app/data-entries/switch/switch-selected/switch-selected.component.scss index 58683f9b6..3b46e3454 100644 --- a/src/app/data-entries/switch/switch-selected/switch-selected.component.scss +++ b/src/app/data-entries/switch/switch-selected/switch-selected.component.scss @@ -1,16 +1,8 @@ -@use "igniteui-angular/theming" as *; -@use "sass:map"; -@use "../switch-bootstrap" as switch-bootstrap; - -@include switch-bootstrap.bootstrap-switch; - :host { display: flex; place-content: center; place-items: center; padding: 16px; - - @include tokens(switch-theme($schema: map.get($light-bootstrap-schema, switch))); } .states { diff --git a/src/app/data-entries/switch/switch-styling/switch-styling.component.scss b/src/app/data-entries/switch/switch-styling/switch-styling.component.scss index 49bbd9abd..1bcc8dcda 100644 --- a/src/app/data-entries/switch/switch-styling/switch-styling.component.scss +++ b/src/app/data-entries/switch/switch-styling/switch-styling.component.scss @@ -1,8 +1,4 @@ @use "igniteui-angular/theming" as *; -@use "sass:map"; -@use "../switch-bootstrap" as switch-bootstrap; - -@include switch-bootstrap.bootstrap-switch; :host ::ng-deep igx-switch .igx-switch__thumb { min-width: 10px; @@ -19,9 +15,6 @@ place-items: center; min-block-size: 100%; padding: 1rem; - - @include tokens(switch-theme($schema: map.get($light-bootstrap-schema, switch))); - @include tokens(radio-theme($schema: map.get($light-bootstrap-schema, radio))); } .security { diff --git a/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.scss b/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.scss index e5b4f5cd3..20b66dbc1 100644 --- a/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.scss +++ b/src/app/data-entries/switch/switch-tailwind-styling/switch-tailwind-styling.component.scss @@ -1,7 +1,3 @@ -@use "../switch-bootstrap" as switch-bootstrap; - -@include switch-bootstrap.bootstrap-switch; - :host ::ng-deep igx-switch .igx-switch__thumb { min-width: 10px; } From db35ed7504caf7a4a7b72a7a5b539d856cc83d4a Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 23 Sep 2026 16:36:17 +0300 Subject: [PATCH 15/15] fix(switch): change overview sample h6 to secondary color --- .../switch/switch-overview/switch-overview.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/data-entries/switch/switch-overview/switch-overview.component.scss b/src/app/data-entries/switch/switch-overview/switch-overview.component.scss index d55abd625..4eb2dd76b 100644 --- a/src/app/data-entries/switch/switch-overview/switch-overview.component.scss +++ b/src/app/data-entries/switch/switch-overview/switch-overview.component.scss @@ -18,7 +18,7 @@ font: 400 10px / 16px "Titillium Web", sans-serif; letter-spacing: 1.5px; text-transform: uppercase; - color: var(--ig-primary-500); + color: var(--ig-secondary-500); } .notifications__row {