From 5bbb21f294c4c8011030c99f618ea424f9ece30c Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Thu, 24 Sep 2026 17:32:50 +0300 Subject: [PATCH 1/2] fix(samples): update button group and switch overview styling --- samples/inputs/button-group/overview/src/index.css | 9 +++++---- samples/inputs/switches/overview/src/index.css | 3 +-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/samples/inputs/button-group/overview/src/index.css b/samples/inputs/button-group/overview/src/index.css index 2190c366e5..c01ecaef91 100644 --- a/samples/inputs/button-group/overview/src/index.css +++ b/samples/inputs/button-group/overview/src/index.css @@ -15,12 +15,13 @@ igc-button-group { } .album-title { - font-size: 0.875rem; + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; font-weight: 400; - line-height: 1.429; - letter-spacing: 0.0178571em; + line-height: 20px; + letter-spacing: 0.3px; margin-block: 0 0.5rem; - color: var(--ig-primary-500); } .album-photos { diff --git a/samples/inputs/switches/overview/src/index.css b/samples/inputs/switches/overview/src/index.css index 38aea371df..e7017a0029 100644 --- a/samples/inputs/switches/overview/src/index.css +++ b/samples/inputs/switches/overview/src/index.css @@ -20,7 +20,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 { @@ -48,7 +48,6 @@ white-space: normal; & .option__label { - font-size: 16px; color: var(--ig-gray-900); } From d64ec3b1a3ccbf66afb50fe7711f8c578db6becd Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Sat, 26 Sep 2026 19:08:08 +0300 Subject: [PATCH 2/2] fix(badge): update badge samples styling --- browser/public/meta.json | 2 +- browser/src/navigation/SamplesBrowser.json | 2 +- samples/inputs/badge/dot/src/index.css | 14 +++++++----- samples/inputs/badge/icon/src/index.css | 17 ++++++-------- samples/inputs/badge/outlined/src/index.css | 22 +++++-------------- samples/inputs/badge/overview/src/index.css | 22 +++++++++++-------- samples/inputs/badge/shape/src/index.css | 12 ++++++++-- samples/inputs/badge/shape/src/index.tsx | 8 +++---- samples/inputs/badge/size/src/index.css | 4 ++-- samples/inputs/badge/styling/src/index.css | 4 ---- .../badge/tailwind-styling/src/index.css | 6 ----- samples/inputs/badge/type/src/index.css | 8 ++----- samples/inputs/badge/variants/src/index.css | 10 ++------- .../inputs/switches/overview/src/index.css | 5 ++++- 14 files changed, 60 insertions(+), 76 deletions(-) diff --git a/browser/public/meta.json b/browser/public/meta.json index 528f88907d..6aa6fe7be7 100644 --- a/browser/public/meta.json +++ b/browser/public/meta.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-10 00:01:40","note":"this file is auto-generated"} +{"version":"23.2.915","date":"2026-09-26 16:46:30","note":"this file is auto-generated"} \ No newline at end of file diff --git a/browser/src/navigation/SamplesBrowser.json b/browser/src/navigation/SamplesBrowser.json index 528f88907d..6aa6fe7be7 100644 --- a/browser/src/navigation/SamplesBrowser.json +++ b/browser/src/navigation/SamplesBrowser.json @@ -1 +1 @@ -{"version":"23.2.915","date":"2026-09-10 00:01:40","note":"this file is auto-generated"} +{"version":"23.2.915","date":"2026-09-26 16:46:30","note":"this file is auto-generated"} \ No newline at end of file diff --git a/samples/inputs/badge/dot/src/index.css b/samples/inputs/badge/dot/src/index.css index 4419879348..87c39c5125 100644 --- a/samples/inputs/badge/dot/src/index.css +++ b/samples/inputs/badge/dot/src/index.css @@ -6,10 +6,6 @@ igc-badge { --ig-badge-dot-size: 0.5rem; } -igc-avatar { - --size: 40px; -} - .icon-example igc-badge, .avatar-example igc-badge, .nav-icon igc-badge { @@ -44,7 +40,6 @@ igc-avatar { } .icon-example, -.avatar-example, .icon-circle { display: flex; align-items: center; @@ -52,6 +47,13 @@ igc-avatar { height: 36px; } +.avatar-example { + display: inline-flex; + align-items: center; + width: fit-content; + height: fit-content; +} + .icon-circle { justify-content: center; border-radius: 50%; @@ -125,7 +127,7 @@ igc-avatar { } .nav-item.active { - color: var(--ig-primary-800); + color: var(--ig-primary-500); } .nav-icon { diff --git a/samples/inputs/badge/icon/src/index.css b/samples/inputs/badge/icon/src/index.css index 892ad58c6e..37eb5982d2 100644 --- a/samples/inputs/badge/icon/src/index.css +++ b/samples/inputs/badge/icon/src/index.css @@ -1,18 +1,12 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -igc-avatar { - --size: 40px; - --ig-avatar-background: var(--ig-gray-400); - --ig-avatar-color: var(--ig-gray-800); -} - igc-badge igc-icon { - color: var(--ig-gray-50); + color: #fff; } .badge-star igc-icon { - color: var(--ig-gray-900); + color: #000000; } .icon-wrapper > igc-badge { @@ -50,8 +44,10 @@ igc-badge igc-icon { display: flex; flex-direction: column; align-items: center; + justify-content: flex-end; gap: 6px; min-width: 56px; + min-height: 66px; } .badge-icon-item span { @@ -68,8 +64,9 @@ igc-badge igc-icon { .avatar-wrapper { position: relative; - display: flex; + display: inline-flex; align-items: center; justify-content: center; - height: 40px; + width: fit-content; + height: fit-content; } diff --git a/samples/inputs/badge/outlined/src/index.css b/samples/inputs/badge/outlined/src/index.css index 262863328b..fe94d82fce 100644 --- a/samples/inputs/badge/outlined/src/index.css +++ b/samples/inputs/badge/outlined/src/index.css @@ -5,16 +5,6 @@ igc-badge { --ig-size: var(--ig-size-small); } -igc-avatar { - --size: 40px; - --ig-avatar-background: var(--ig-gray-400); - --ig-avatar-color: var(--ig-gray-800); -} - -.outlined-example igc-avatar igc-icon { - color: var(--ig-gray-50); -} - .outlined-example:nth-child(2) igc-badge { inset-block-start: auto; inset-block-end: -6px; @@ -27,10 +17,6 @@ igc-avatar { inset-inline-end: -10px; } -.icon-circle igc-icon { - font-size: 20px; -} - .badge-outlined { display: flex; align-items: center; @@ -58,15 +44,19 @@ igc-avatar { height: 36px; background: var(--ig-gray-200); color: var(--ig-gray-800); + + igc-icon { + --ig-icon-size: 18px; + } } igc-badge::part(base), igc-badge igc-icon { - color: var(--ig-gray-50); + color: #fff; } igc-badge igc-icon { - fill: var(--ig-gray-50); + fill: #fff; } .steps { diff --git a/samples/inputs/badge/overview/src/index.css b/samples/inputs/badge/overview/src/index.css index d304ba139c..87c4ae81bf 100644 --- a/samples/inputs/badge/overview/src/index.css +++ b/samples/inputs/badge/overview/src/index.css @@ -1,10 +1,6 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -igc-avatar { - --size: 40px; -} - igc-icon { color: var(--ig-gray-700); font-size: 1.5rem; @@ -19,11 +15,11 @@ igc-badge { igc-badge::part(base), igc-badge igc-icon { - color: var(--ig-gray-50); + color: #fff; } igc-badge igc-icon { - fill: var(--ig-gray-50); + fill: #fff; } .avatar-example igc-badge { @@ -33,12 +29,13 @@ igc-badge igc-icon { } .avatar-example igc-icon { - color: var(--ig-gray-50); - fill: var(--ig-gray-50); + color: #fff; + fill: #fff; } .event-example igc-chip { --ig-size: var(--ig-size-large); + --ig-chip-background: var(--ig-gray-300); } .event-example igc-chip::part(base) { @@ -56,7 +53,7 @@ igc-badge igc-icon { } .icon-example igc-badge::part(base) { - color: var(--ig-gray-50); + color: #fff; } .notification-example igc-badge { @@ -91,3 +88,10 @@ igc-badge igc-icon { width: 2.5rem; height: 2.5rem; } + +.avatar-example { + min-width: auto; + min-height: auto; + width: fit-content; + height: fit-content; +} diff --git a/samples/inputs/badge/shape/src/index.css b/samples/inputs/badge/shape/src/index.css index f6e6b4da52..a9115f9888 100644 --- a/samples/inputs/badge/shape/src/index.css +++ b/samples/inputs/badge/shape/src/index.css @@ -3,11 +3,11 @@ igc-badge::part(base), igc-badge igc-icon { - color: var(--ig-gray-50); + color: #fff; } igc-badge igc-icon { - fill: var(--ig-gray-50); + fill: #fff; } .badge-shape { @@ -38,6 +38,14 @@ igc-badge igc-icon { letter-spacing: 0.3px; } +.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/shape/src/index.tsx b/samples/inputs/badge/shape/src/index.tsx index 91cdd7f710..bcea12a030 100644 --- a/samples/inputs/badge/shape/src/index.tsx +++ b/samples/inputs/badge/shape/src/index.tsx @@ -16,20 +16,20 @@ export default function BadgeShape(): JSX.Element {
Rounded - + - 2 + 2
Square - + - 2 + 2 diff --git a/samples/inputs/badge/size/src/index.css b/samples/inputs/badge/size/src/index.css index 6e6cc5197c..3eb4bd1571 100644 --- a/samples/inputs/badge/size/src/index.css +++ b/samples/inputs/badge/size/src/index.css @@ -3,11 +3,11 @@ igc-badge::part(base), igc-badge igc-icon { - color: var(--ig-gray-50); + color: #fff; } igc-badge igc-icon { - fill: var(--ig-gray-50); + fill: #fff; } .badge-size { diff --git a/samples/inputs/badge/styling/src/index.css b/samples/inputs/badge/styling/src/index.css index dd46d8149c..3bdfd5dee9 100644 --- a/samples/inputs/badge/styling/src/index.css +++ b/samples/inputs/badge/styling/src/index.css @@ -48,10 +48,6 @@ igc-badge { transform: translate(-50%, -50%); } -.styling-item igc-avatar { - --size: 40px; -} - .styling-item.green igc-avatar { --icon-color: var(--ig-success-900); --ig-avatar-background: var(--ig-success-200); diff --git a/samples/inputs/badge/tailwind-styling/src/index.css b/samples/inputs/badge/tailwind-styling/src/index.css index d98898d2b6..936485850f 100644 --- a/samples/inputs/badge/tailwind-styling/src/index.css +++ b/samples/inputs/badge/tailwind-styling/src/index.css @@ -9,12 +9,6 @@ igc-badge { --ig-size: var(--ig-size-small); } -igc-avatar { - --size: 40px; - --ig-avatar-background: var(--ig-gray-400); - --ig-avatar-color: var(--ig-gray-800); -} - igc-avatar igc-icon { color: var(--ig-gray-800); } diff --git a/samples/inputs/badge/type/src/index.css b/samples/inputs/badge/type/src/index.css index d6398f8cdf..ce540f4014 100644 --- a/samples/inputs/badge/type/src/index.css +++ b/samples/inputs/badge/type/src/index.css @@ -1,10 +1,6 @@ /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -igc-avatar { - --size: 40px; -} - igc-badge { --ig-size: var(--ig-size-small); position: absolute; @@ -14,11 +10,11 @@ igc-badge { .badge-type igc-badge::part(base), .badge-type igc-badge igc-icon { - color: var(--ig-gray-50); + color: #fff; } .badge-type igc-badge igc-icon { - fill: var(--ig-gray-50); + fill: #fff; } .badge-type { diff --git a/samples/inputs/badge/variants/src/index.css b/samples/inputs/badge/variants/src/index.css index 81710d4ed0..e74899599a 100644 --- a/samples/inputs/badge/variants/src/index.css +++ b/samples/inputs/badge/variants/src/index.css @@ -10,17 +10,11 @@ igc-badge { .variant-item:not(:nth-child(4)) igc-badge::part(base), .variant-item:not(:nth-child(4)) igc-badge igc-icon { - color: var(--ig-gray-50); + color: #fff; } .variant-item:not(:nth-child(4)) igc-badge igc-icon { - fill: var(--ig-gray-50); -} - -igc-avatar { - --ig-size: var(--ig-size-small); - --ig-avatar-background: var(--ig-gray-400); - --ig-avatar-color: var(--ig-gray-800); + fill: #fff; } .variant-item:first-child igc-avatar igc-icon, diff --git a/samples/inputs/switches/overview/src/index.css b/samples/inputs/switches/overview/src/index.css index e7017a0029..b4879c3234 100644 --- a/samples/inputs/switches/overview/src/index.css +++ b/samples/inputs/switches/overview/src/index.css @@ -48,11 +48,14 @@ white-space: normal; & .option__label { + font: 400 16px / 24px "Titillium Web", sans-serif; + letter-spacing: 0.15px; color: var(--ig-gray-900); } & .option__hint { - font-size: 13px; + font: 400 14px / 20px "Titillium Web", sans-serif; + letter-spacing: 0.25px; color: var(--ig-gray-700); } } \ No newline at end of file