diff --git a/samples/inputs/badge/dot/wwwroot/index.css b/samples/inputs/badge/dot/wwwroot/index.css
index be8cfd550..892fc2ebb 100644
--- a/samples/inputs/badge/dot/wwwroot/index.css
+++ b/samples/inputs/badge/dot/wwwroot/index.css
@@ -89,16 +89,6 @@ igc-avatar {
width: 12px;
}
-.row-indicator igc-badge,
-.nav-icon igc-badge {
- --ig-badge-background-color: #0057A9;
-}
-
-.row-indicator igc-badge::part(base),
-.nav-icon igc-badge::part(base) {
- background-color: #0057A9;
-}
-
.row-title {
flex: 1;
}
@@ -109,7 +99,7 @@ igc-avatar {
}
.row-time.unread {
- color: #0057A9;
+ color: var(--ig-gray-900);
font-weight: 600;
}
@@ -133,7 +123,7 @@ igc-avatar {
align-items: center;
gap: 4px;
min-width: 56px;
- color: #556c86;
+ color: var(--ig-gray-600);
font-family: "Aktiv Grotesk", sans-serif;
font-size: 13px;
font-weight: 400;
@@ -143,12 +133,12 @@ igc-avatar {
}
.nav-item.active {
- color: #0057A9;
+ color: var(--ig-primary-800);
}
.nav-item.active igc-icon {
- color: #0057A9;
- fill: #0057A9;
+ color: var(--ig-primary-800);;
+ fill: var(--ig-primary-800);
}
.nav-icon {
diff --git a/samples/inputs/badge/icon/App.razor b/samples/inputs/badge/icon/App.razor
index 86a106336..252f08f81 100644
--- a/samples/inputs/badge/icon/App.razor
+++ b/samples/inputs/badge/icon/App.razor
@@ -1,5 +1,7 @@
@using IgniteUI.Blazor.Controls
+
+
@foreach (var item in Badges)
{
diff --git a/samples/inputs/badge/icon/wwwroot/index.css b/samples/inputs/badge/icon/wwwroot/index.css
index 291aabb8d..ab331c561 100644
--- a/samples/inputs/badge/icon/wwwroot/index.css
+++ b/samples/inputs/badge/icon/wwwroot/index.css
@@ -5,30 +5,14 @@ https://dl.infragistics.com/x/css//samples/
igc-avatar {
--size: 40px;
- --ig-avatar-background: var(--ig-gray-700);
- --ig-avatar-color: var(--ig-gray-50);
-}
-
-igc-badge[variant="info"] {
- --ig-badge-background-color: #0057A9;
-}
-
-igc-badge[variant="info"]::part(base) {
- background-color: #0057A9;
+ --ig-avatar-background: var(--ig-gray-400);
+ --ig-avatar-color: var(--ig-gray-800);
}
igc-badge igc-icon {
color: var(--ig-gray-50);
}
-igc-badge.badge-settings[variant="info"] {
- --ig-badge-background-color: #0070BA;
-}
-
-igc-badge.badge-settings[variant="info"]::part(base) {
- background-color: #0070BA;
-}
-
.badge-star igc-icon {
color: var(--ig-gray-900);
}
@@ -73,7 +57,7 @@ igc-badge.badge-settings[variant="info"]::part(base) {
}
.badge-icon-item span {
- color: #556c86;
+ color: var(--ig-gray-600);
font-family: "Aktiv Grotesk", sans-serif;
font-size: 13px;
font-weight: 400;
diff --git a/samples/inputs/badge/outlined/App.razor b/samples/inputs/badge/outlined/App.razor
index 37b0bf61b..376b41e18 100644
--- a/samples/inputs/badge/outlined/App.razor
+++ b/samples/inputs/badge/outlined/App.razor
@@ -1,11 +1,13 @@
@using IgniteUI.Blazor.Controls
+
+
23
+ 23
2
-
Payment
Rounded
@@ -13,11 +15,11 @@
Square
-
+
- 2
-
+ 2
+
diff --git a/samples/inputs/badge/shape/wwwroot/index.css b/samples/inputs/badge/shape/wwwroot/index.css
index 848568fea..67aa8571f 100644
--- a/samples/inputs/badge/shape/wwwroot/index.css
+++ b/samples/inputs/badge/shape/wwwroot/index.css
@@ -22,7 +22,7 @@ https://dl.infragistics.com/x/css//samples/
.row-label {
justify-self: end;
- color: #556c86;
+ color: var(--ig-gray-600);
font-family: "Aktiv Grotesk", sans-serif;
font-size: 13px;
font-weight: 400;
@@ -34,20 +34,3 @@ https://dl.infragistics.com/x/css//samples/
.badge-small {
--ig-size: var(--ig-size-small);
}
-
-.badge-info-blue {
- --ig-badge-background-color: #0057A9;
-}
-
-.badge-info-blue::part(base) {
- background-color: #0057A9;
-}
-
-igc-badge::part(base),
-igc-badge igc-icon {
- color: var(--ig-gray-50);
-}
-
-igc-badge igc-icon {
- fill: var(--ig-gray-50);
-}
\ No newline at end of file
diff --git a/samples/inputs/badge/size/App.razor b/samples/inputs/badge/size/App.razor
index 8aa29c3c2..d15ba3df0 100644
--- a/samples/inputs/badge/size/App.razor
+++ b/samples/inputs/badge/size/App.razor
@@ -1,10 +1,12 @@
@using IgniteUI.Blazor.Controls
+
+
Small
2
+ 2
@@ -12,7 +14,7 @@
Medium
2
+ 2
@@ -20,7 +22,7 @@
Large
2
+ 2
diff --git a/samples/inputs/badge/size/wwwroot/index.css b/samples/inputs/badge/size/wwwroot/index.css
index 6007fa025..f99fed283 100644
--- a/samples/inputs/badge/size/wwwroot/index.css
+++ b/samples/inputs/badge/size/wwwroot/index.css
@@ -23,7 +23,7 @@ https://dl.infragistics.com/x/css//samples/
.row-label {
justify-self: end;
- color: #556c86;
+ color: var(--ig-gray-600);
font-family: "Aktiv Grotesk", sans-serif;
font-size: 13px;
font-weight: 400;
@@ -32,23 +32,6 @@ https://dl.infragistics.com/x/css//samples/
letter-spacing: 0.3px;
}
-.badge-info-blue {
- --ig-badge-background-color: #0057A9;
-}
-
-.badge-info-blue::part(base) {
- background-color: #0057A9;
-}
-
-igc-badge::part(base),
-igc-badge igc-icon {
- color: var(--ig-gray-50);
-}
-
-igc-badge igc-icon {
- fill: var(--ig-gray-50);
-}
-
.badge-large { --ig-size: var(--ig-size-large); }
.badge-medium { --ig-size: var(--ig-size-medium); }
.badge-small { --ig-size: var(--ig-size-small); }
diff --git a/samples/inputs/badge/styling/App.razor b/samples/inputs/badge/styling/App.razor
index 5c332265b..f51a62092 100644
--- a/samples/inputs/badge/styling/App.razor
+++ b/samples/inputs/badge/styling/App.razor
@@ -1,5 +1,7 @@
@using IgniteUI.Blazor.Controls
+
+
diff --git a/samples/inputs/badge/styling/wwwroot/index.css b/samples/inputs/badge/styling/wwwroot/index.css
index 1e95a64f3..3a697578c 100644
--- a/samples/inputs/badge/styling/wwwroot/index.css
+++ b/samples/inputs/badge/styling/wwwroot/index.css
@@ -55,9 +55,9 @@ igc-badge {
}
.styling-item.green igc-avatar {
- --icon-color: #248436;
- --ig-avatar-background: #A9CEB0;
- --ig-avatar-color: #248436;
+ --icon-color: var(--ig-success-900);
+ --ig-avatar-background: var(--ig-success-200);
+ --ig-avatar-color: var(--ig-success-900);
}
.styling-item.pink igc-avatar {
diff --git a/samples/inputs/badge/tailwind-styling/App.razor b/samples/inputs/badge/tailwind-styling/App.razor
index 1746c5a62..6fab69552 100644
--- a/samples/inputs/badge/tailwind-styling/App.razor
+++ b/samples/inputs/badge/tailwind-styling/App.razor
@@ -1,5 +1,7 @@
@using IgniteUI.Blazor.Controls
+
+
diff --git a/samples/inputs/badge/type/wwwroot/index.css b/samples/inputs/badge/type/wwwroot/index.css
index 947bf1231..d27c20c28 100644
--- a/samples/inputs/badge/type/wwwroot/index.css
+++ b/samples/inputs/badge/type/wwwroot/index.css
@@ -54,7 +54,7 @@ igc-badge {
}
.badge-type-item span {
- color: #556c86;
+ color: var(--ig-gray-600);
font-family: "Aktiv Grotesk", sans-serif;
font-size: 13px;
font-weight: 400;
diff --git a/samples/inputs/badge/variants/App.razor b/samples/inputs/badge/variants/App.razor
index 95453d8f6..ff774c659 100644
--- a/samples/inputs/badge/variants/App.razor
+++ b/samples/inputs/badge/variants/App.razor
@@ -1,19 +1,21 @@
@using IgniteUI.Blazor.Controls
+
+
- 2
+ 2
Primary
+
@@ -34,7 +36,7 @@
- 2
+ 2
Warn
diff --git a/samples/inputs/badge/variants/wwwroot/index.css b/samples/inputs/badge/variants/wwwroot/index.css
index d98cdaf11..d2a219394 100644
--- a/samples/inputs/badge/variants/wwwroot/index.css
+++ b/samples/inputs/badge/variants/wwwroot/index.css
@@ -12,13 +12,13 @@ igc-badge {
igc-avatar {
--ig-size: var(--ig-size-small);
- --ig-avatar-background: var(--ig-gray-700);
- --ig-avatar-color: var(--ig-gray-50);
+ --ig-avatar-background: var(--ig-gray-400);
+ --ig-avatar-color: var(--ig-gray-800);
}
.variant-item:first-child igc-avatar igc-icon,
.variant-item:nth-child(4) igc-avatar igc-icon {
- color: var(--ig-gray-50);
+ color: var(--ig-gray-800);
}
.badge-variants {
@@ -39,7 +39,7 @@ igc-avatar {
}
.variant-item span {
- color: #556c86;
+ color: var(--ig-gray-600);
font-family: "Aktiv Grotesk", sans-serif;
font-size: 13px;
font-weight: 400;
@@ -52,33 +52,3 @@ igc-avatar {
position: relative;
display: flex;
}
-
-.badge-info-blue {
- --ig-badge-background-color: #0057A9;
-}
-
-.badge-info-blue::part(base) {
- background-color: #0057A9;
-}
-
-.badge-primary-blue {
- --ig-badge-background-color: #0070BA;
-}
-
-.badge-primary-blue::part(base) {
- background-color: #0070BA;
-}
-
-.badge-warning-black::part(base) {
- background-color: #FAA419;
- color: #000;
-}
-
-igc-badge::part(base),
-igc-badge igc-icon {
- color: var(--ig-gray-50);
-}
-
-igc-badge igc-icon {
- fill: var(--ig-gray-50);
-}
diff --git a/samples/inputs/button-group/alignment/App.razor b/samples/inputs/button-group/alignment/App.razor
index 8710d6828..b73491637 100644
--- a/samples/inputs/button-group/alignment/App.razor
+++ b/samples/inputs/button-group/alignment/App.razor
@@ -2,10 +2,10 @@
-
+
@foreach (var alignment in Alignments)
{
-
+
@(alignment == ContentOrientation.Horizontal ? "Horizontal" : "Vertical")
@foreach (var city in Cities)
diff --git a/samples/inputs/button-group/alignment/wwwroot/index.css b/samples/inputs/button-group/alignment/wwwroot/index.css
index 1fd57b2c2..7c6fd3ed9 100644
--- a/samples/inputs/button-group/alignment/wwwroot/index.css
+++ b/samples/inputs/button-group/alignment/wwwroot/index.css
@@ -1,42 +1,34 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
-
-igc-ripple {
- --color: gray;
+.states-container {
+ display: grid;
+ place-items: center;
+ height: 100vh;
}
-.button-group-alignment {
+.sample-layout {
display: flex;
- align-items: flex-start;
+ gap: 2rem;
+ align-items: start;
justify-content: center;
- gap: 60px;
- padding: 13px;
-}
-
-.button-group-alignment-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: flex-start;
- gap: 16px;
+ flex-wrap: wrap;
}
-.button-group-alignment-item igc-button-group {
- width: 240px;
+.sample-inner-layout {
+ display: grid;
+ gap: 0.5rem;
+ align-items: start;
}
-.button-group-alignment-item:first-child igc-button-group {
- width: 320px;
+igc-button-group {
+ width: 17.5rem;
}
-.button-group-alignment-item span {
- width: 100%;
- text-align: center;
- color: #556c86;
+.sample-layout span {
+ color: var(--ig-gray-600);
font-family: "Aktiv Grotesk", sans-serif;
font-size: 13px;
font-weight: 400;
- font-style: normal;
line-height: 20px;
letter-spacing: 0.3px;
+ margin: 0.5rem;
+ text-align: center;
}
diff --git a/samples/inputs/button-group/custom-toggle/App.razor b/samples/inputs/button-group/custom-toggle/App.razor
index 12890a18a..5ace7e57f 100644
--- a/samples/inputs/button-group/custom-toggle/App.razor
+++ b/samples/inputs/button-group/custom-toggle/App.razor
@@ -2,7 +2,7 @@
-
+
-
diff --git a/samples/inputs/button-group/interaction-states/wwwroot/index.css b/samples/inputs/button-group/interaction-states/wwwroot/index.css
index e0463cc63..f0c69bfcb 100644
--- a/samples/inputs/button-group/interaction-states/wwwroot/index.css
+++ b/samples/inputs/button-group/interaction-states/wwwroot/index.css
@@ -1,79 +1,117 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
-
-igc-ripple {
- --color: gray;
+.states-container {
+ container-type: inline-size;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr);
+ align-content: center;
+ height: 100vh;
}
-.button-group-states {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- gap: 20px;
- padding: 16px;
+.states-matrix {
+ display: grid;
+ grid-template-columns: auto repeat(3, minmax(7.75rem, 1fr));
+ gap: 1rem;
+ inline-size: 100%;
+ max-inline-size: 42.5rem;
+ margin-inline: auto;
}
-.button-group-states-row {
+.states-row {
display: grid;
- grid-template-columns: 120px 164px 164px 164px;
+ 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;
+.row-label,
+.column-label,
+.cell-label {
+ color: var(--ig-gray-600);
font-family: "Aktiv Grotesk", sans-serif;
font-size: 13px;
font-weight: 400;
- font-style: normal;
line-height: 20px;
letter-spacing: 0.3px;
}
-.button-group-states .column-label {
+.column-label,
+.cell-label {
text-align: center;
}
-.button-group-states igc-button-group {
- width: 164px;
+.cell-label {
+ display: none;
+}
+
+.state-cell {
+ display: grid;
+ gap: 0.25rem;
+}
+
+igc-icon {
+ --ig-icon-size: 1rem;
}
-.button-group-states igc-toggle-button {
- width: 100%;
+@container not (width >= 34rem) {
+ .states-matrix {
+ grid-template-columns: minmax(0, 1fr);
+ }
+
+ .states-row {
+ grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr));
+ }
+
+ header.states-row {
+ display: none;
+ }
+
+ .row-label {
+ grid-column: 1 / -1;
+ }
+
+ .cell-label {
+ display: block;
+ text-align: start;
+ margin-block-start: 1rem;
+ }
+
+ .state-cell {
+ margin-inline-end: 0.5rem;
+ }
}
-.button-group-states igc-icon {
- font-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. */
+igc-button-group {
+ pointer-events: none;
}
-.button-group-states igc-toggle-button[selected]::part(toggle) {
+igc-toggle-button[selected]::part(toggle) {
background: var(--item-active-background);
border-color: var(--item-active-border-color);
color: var(--item-hover-text-color);
}
-.button-group-states igc-toggle-button.state-hover:not([selected])::part(toggle) {
+.states-row igc-toggle-button.state-hover:not([selected])::part(toggle) {
background: var(--item-hover-background);
border-color: var(--item-hover-border-color);
color: var(--item-hover-text-color);
}
-.button-group-states igc-toggle-button.state-focused:not([selected])::part(toggle) {
+.states-row igc-toggle-button.state-focused:not([selected])::part(toggle) {
background: var(--item-focused-hover-background);
border-color: var(--item-focused-hover-border-color);
color: var(--item-focused-hover-text-color);
}
-.button-group-states igc-toggle-button.state-hover[selected]::part(toggle) {
+.states-row igc-toggle-button.state-hover[selected]::part(toggle) {
background: var(--item-selected-active-background);
border-color: var(--item-selected-active-border-color);
color: var(--item-selected-hover-text-color);
}
-.button-group-states igc-toggle-button.state-focused[selected]::part(toggle) {
+.states-row igc-toggle-button.state-focused[selected]::part(toggle) {
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/samples/inputs/button-group/layout/App.razor b/samples/inputs/button-group/layout/App.razor
index 2adb0a876..c907260dc 100644
--- a/samples/inputs/button-group/layout/App.razor
+++ b/samples/inputs/button-group/layout/App.razor
@@ -2,7 +2,7 @@
-
+
Left
Center
diff --git a/samples/inputs/button-group/layout/wwwroot/index.css b/samples/inputs/button-group/layout/wwwroot/index.css
index cfc3d9fe5..87b64d4e5 100644
--- a/samples/inputs/button-group/layout/wwwroot/index.css
+++ b/samples/inputs/button-group/layout/wwwroot/index.css
@@ -1,22 +1,28 @@
-/* shared styles are loaded from: */
-/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
-
-igc-ripple {
- --color: gray;
+.states-container {
+ display: grid;
+ place-items: center;
+ height: 100vh;
}
-.button-group-layout {
+.sample-layout {
display: flex;
+ flex-direction: row;
align-items: center;
justify-content: center;
gap: 80px;
- min-height: 6rem;
+ min-height: 5.5rem;
+}
+
+igc-button-group {
+ display: inline-block;
+ max-width: 400px;
}
-.button-group-layout igc-toggle-button {
+.sample-layout igc-toggle-button {
min-width: 100px;
}
-.button-group-layout igc-icon {
- --size: 20px;
+.sample-layout igc-icon {
+ --ig-size: 20px;
+ --igc-icon-size: 20px;
}
diff --git a/samples/inputs/button-group/overview/App.razor b/samples/inputs/button-group/overview/App.razor
index b7ee24468..95a903e02 100644
--- a/samples/inputs/button-group/overview/App.razor
+++ b/samples/inputs/button-group/overview/App.razor
@@ -2,19 +2,21 @@
-
-
- Device
- Cloud
-
+
+
+
+ Device
+ Cloud
+
-
- Trip around the world
-
diff --git a/samples/inputs/button-group/overview/wwwroot/index.css b/samples/inputs/button-group/overview/wwwroot/index.css
index ba9fa9f23..28e680c29 100644
--- a/samples/inputs/button-group/overview/wwwroot/index.css
+++ b/samples/inputs/button-group/overview/wwwroot/index.css
@@ -1,39 +1,36 @@
-.container.sample {
- display: flex;
- flex-direction: column;
- align-items: center;
+.states-container {
+ display: grid;
+ place-items: center;
+ height: 100vh;
}
-igc-button-group {
- display: block;
- width: 280px;
- max-width: 100%;
-}
-
-igc-ripple {
- --color: gray;
+.sample-layout {
+ display: grid;
+ width: 17.5rem;
+ gap: 0.5rem;
}
-.album {
- margin-top: 8px;
- width: 280px;
- max-width: 100%;
+igc-button-group {
+ max-width: 17.5rem;
}
.album-title {
- display: inline-block;
- margin-bottom: 8px;
- color: #1f89d4;
+ font-size: 0.875rem;
+ font-weight: 400;
+ line-height: 1.429;
+ letter-spacing: 0.0178571em;
+ margin-block: 0 0.5rem;
+ color: var(--ig-primary-500);
}
.album-photos {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 4px;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 0.25rem;
}
.album-photos img {
- width: 100%;
- object-fit: cover;
- display: block;
+ width: 100%;
+ object-fit: cover;
+ display: block;
}
\ No newline at end of file
diff --git a/samples/inputs/button-group/selection/App.razor b/samples/inputs/button-group/selection/App.razor
index 0ad30e107..53d62f39e 100644
--- a/samples/inputs/button-group/selection/App.razor
+++ b/samples/inputs/button-group/selection/App.razor
@@ -2,60 +2,24 @@
-
-
-
- @foreach (var photo in Photos)
- {
- 
- }
+
+
Trip around the world
+
+ @foreach (var photo in Photos)
+ {
+
+ }
+
+
@foreach (var selection in modes)
{
-
diff --git a/samples/inputs/button-group/selection/wwwroot/index.css b/samples/inputs/button-group/selection/wwwroot/index.css
index ee6fdfb0f..352a14cc3 100644
--- a/samples/inputs/button-group/selection/wwwroot/index.css
+++ b/samples/inputs/button-group/selection/wwwroot/index.css
@@ -1,39 +1,46 @@
-/*
-CSS styles are loaded from the shared CSS file located at:
-https://dl.infragistics.com/x/css//samples/
-*/
+.states-container {
+ container-type: inline-size;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr);
+ align-content: center;
+ height: 100vh;
+}
.selection-samples {
- display: flex;
- justify-content: center;
- flex-direction: column;
- align-items: flex-start;
- gap: 28px;
- padding-left: 32px;
+ display: grid;
+ grid-template-columns: auto minmax(11.25rem, 1fr);
+ align-items: center;
+ gap: 1.5rem 2rem;
+ inline-size: 100%;
+ max-inline-size: 23.75rem;
+ margin-inline: auto;
}
-.selection-sample {
- display: flex;
- align-items: center;
- gap: 30px;
+.sample-label {
+ color: var(--ig-gray-600);
+ font-family: "Aktiv Grotesk", sans-serif;
+ font-size: 13px;
+ font-weight: 400;
+ line-height: 20px;
+ letter-spacing: 0.3px;
+ 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;
+igc-button-group {
+ inline-size: 100%;
}
-.selection-sample igc-button-group {
- width: 200px;
-}
+@container not (width >= 22rem) {
+ .selection-samples {
+ grid-template-columns: minmax(0, 1fr);
+ gap: 0.25rem;
+ }
+
+ .sample-label {
+ text-align: start;
+ }
-igc-ripple {
- --color: gray;
+ .sample-label:not(:first-of-type) {
+ margin-block-start: 1rem;
+ }
}
\ No newline at end of file
diff --git a/samples/inputs/button-group/size/App.razor b/samples/inputs/button-group/size/App.razor
index 930e37368..20e1c1ebc 100644
--- a/samples/inputs/button-group/size/App.razor
+++ b/samples/inputs/button-group/size/App.razor
@@ -2,26 +2,28 @@
-
- @(selection == ButtonGroupSelection.SingleRequired ? "Single-Required" : selection.ToString())
+ @(selection == ButtonGroupSelection.SingleRequired ? "Single-Required" : selection.ToString())
-
-
-
-
-
-
+
+
+
+
+
+
-
}