feat(themes): add forced-colors media styles

src/components/avatar/themes/avatar.base.scss

@@ -35,3 +35,9 @@ img {
 :host([shape='square']) [part='base'] {
     border-radius: 0;
 }
+
+@media (forced-colors: active) {
+    [part='base'] {
+        border: rem(1px) solid CanvasText;
+    }
+}

src/components/badge/themes/badge.base.scss

@@ -57,3 +57,9 @@
 :host([dot]) [part~='base'] {
     border-radius: calc(var(--_badge-size) * 2);
 }
+
+@media (forced-colors: active) {
+    [part~='base'] {
+        border: rem(1px) solid CanvasText;
+    }
+}

src/components/banner/themes/banner.base.scss

@@ -61,3 +61,9 @@
 :host([open]) [part~='base'] {
     height: auto;
 }
+
+@media (forced-colors: active) {
+    [part~='spacer'] {
+        border-block-end: rem(1px) solid CanvasText;
+    }
+}

src/components/banner/themes/shared/banner.indigo.scss

@@ -31,3 +31,9 @@ $theme: $indigo;
 
     color: var-get($theme, 'banner-message-color');
 }
+
+@media (forced-colors: active) {
+    [part~='spacer'] {
+        border: rem(1px) solid CanvasText;
+    }
+}

src/components/calendar/themes/calendar.base.scss

@@ -168,3 +168,9 @@
 .aria-off-screen {
     @include hide-default();
 }
+
+@media (forced-colors: active) {
+    [part~='header'] {
+        border: rem(1px) solid CanvasText;
+    }
+}

src/components/calendar/themes/days-view.base.scss

@@ -160,3 +160,40 @@ $row-gap: rem(4px);
 [part~='hidden'] {
     visibility: hidden;
 }
+
+@media (forced-colors: active) {
+    :host {
+        [part~='current'] {
+            --date-current-border-color: LinkText;
+            --date-current-hover-border-color: LinkText;
+            --date-current-focus-border-color: LinkText;
+        }
+
+        [part~='inactive'] [part~='inactive'] {
+            border: none;
+        }
+
+        [part~='selected'] {
+            --date-selected-border-color: Highlight;
+            --date-selected-focus-border-color: Highlight;
+            --date-selected-hover-border-color: Highlight;
+            --date-selected-current-border-color: Highlight;
+            --date-selected-current-focus-border-color: Highlight;
+            --date-selected-current-hover-border-color: Highlight;
+        }
+
+        [part~='disabled'] {
+            --date-border-color: GrayText;
+            --date-disabled-foreground: GrayText;
+        }
+
+        [part~='date'][part~='last'][part~='range'][part~='preview'],
+        [part~='date'][part~='first'][part~='range'][part~='preview'] {
+            border-block: 0;
+        }
+
+        [part~='date'][part~='range'] {
+            --date-range-border-color: Highlight;
+        }
+    }
+}

src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss

@@ -110,3 +110,27 @@ $theme: $bootstrap;
         color: var-get($theme, 'navigation-focus-color');
     }
 }
+
+@media (forced-colors: active) {
+    [part~='content'] {
+        border: rem(1px) solid CanvasText;
+    }
+
+    :host(:not([header-orientation='vertical'])) [part~="header"] {
+        border-block-end: none;
+    }
+
+    :host([header-orientation='vertical']) {
+        [part~='content'] {
+            border-inline-start: none;
+        }
+
+        [part~='navigation'] {
+            border-block-start: rem(1px) solid CanvasText;
+        }
+    }
+
+    :host:has([part~='header']) [part~='content'] {
+        border-block-start: none;
+    }
+}

src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss

@@ -635,3 +635,31 @@ $border-size: rem(1px);
     }
 }
 
+@media (forced-colors: active) {
+    :host {
+        [part~='date'] {
+            border-block: none;
+        }
+
+        [part~='special'] [part~='special']::after {
+            width: var-get($theme, 'inner-size');
+            height: var-get($theme, 'inner-size');
+        }
+
+        [part~='date'][part~='range'][part~='selected'] {
+            border-block: rem(1px) solid Highlight;
+
+            &[part~='first'],
+            &[part~='last'] {
+                border-block: 0;
+            }
+        }
+
+        [part~='date'][part~='last'][part~='range'][part~='preview'],
+        [part~='date'][part~='first'][part~='range'][part~='preview'] {
+            &::after {
+                border-block-width: rem(3px);
+            }
+        }
+    }
+}

src/components/calendar/themes/shared/fluent/days-view.fluent.scss

@@ -725,3 +725,39 @@ $fake-bg-position: calc(50% - (var-get($theme, 'size') / 2));
         background: var-get($theme, 'date-selected-range-focus-background');
     }
 }
+
+@media (forced-colors: active) {
+    :host {
+        [part~='date'] {
+            border-block: none;
+        }
+
+        [part~='selected'] {
+            --date-selected-current-border-color: LinkText;
+            --date-selected-current-focus-border-color: LinkText;
+        }
+
+        [part~='week-number-inner']::after {
+            height: rem(6px);
+            bottom: 100%;
+        }
+
+        [part~='date'][part~='range'][part~='selected'] {
+            border-block: rem(1px) solid Highlight;
+
+            &[part~='first'],
+            &[part~='last'] {
+                border-block: 0;
+
+                &::before {
+                    border-block-color: Highlight;
+                    border-inline-color: Highlight;
+                }
+            }
+        }
+
+        [part~='date'][part~='range'][part~='preview'] {
+            border-block: rem(1px) solid CanvasText;
+        }
+    }
+}

src/components/calendar/themes/shared/indigo/calendar.indigo.scss

@@ -125,3 +125,23 @@ $theme: $indigo;
 [part='header-date'] {
     @include type-style('h5');
 }
+
+@media (forced-colors: active) {
+    [part~='content'] {
+        border: rem(1px) solid CanvasText;
+    }
+
+    :host:has([part~='header']) [part~='content'] {
+        border-block-start: none;
+    }
+
+    :host([header-orientation='vertical']) {
+        [part~='content'] {
+            border-inline-start: none;
+        }
+
+        [part~='navigation'] {
+            border-block-start: rem(1px) solid CanvasText;
+        }
+    }
+}

src/components/calendar/themes/shared/indigo/days-view.indigo.scss

@@ -688,3 +688,23 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
         background: var-get($theme, 'date-selected-range-focus-background');
     }
 }
+
+@media (forced-colors: active) {
+    [part~='week-number-inner'] {
+        border-block: none;
+
+        &::after {
+            height: rem(6px);
+            bottom: 100%;
+            border-inline: rem(1px) solid CanvasText;
+        }
+    }
+
+    [part~='days-row']:first-of-type [part~='week-number-inner'] {
+        border-block-start: rem(1px) solid CanvasText;
+    }
+
+    [part~='days-row']:last-of-type [part~='week-number-inner'] {
+        border-block-end: rem(1px) solid CanvasText;
+    }
+}

src/components/calendar/themes/shared/material/days-view.material.scss

@@ -476,3 +476,21 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
         background: var-get($theme, 'date-selected-range-focus-background');
     }
 }
+
+@media (forced-colors: active) {
+    [part~='special'] [part~='special'] {
+        border-width: rem(2px);
+    }
+
+    [part~='week-number-inner']::after {
+        height: rem(6px);
+        bottom: 100%;
+    }
+
+    [part~='date'][part~='range'][part~='selected'] {
+        &[part~='first'],
+        &[part~='last'] {
+            border-block: 0;
+        }
+    }
+}

src/components/calendar/themes/year-month-view.base.scss

@@ -40,3 +40,26 @@
     margin: 0;
 }
 
+@media (forced-colors: active) {
+    :host {
+        [part~='month'] [part~='month-inner'],
+        [part~='year'] [part~='year-inner'] {
+            outline-offset: rem(-1px);
+        }
+
+        [part~='month']:hover [part~='month-inner'],
+        [part~='year']:hover [part~='year-inner'] {
+            outline: rem(1px) solid CanvasText;
+        }
+
+        [part~='current'] [part~='current'],
+        [part~='current']:hover [part~='current'] {
+            outline: rem(1px) solid LinkText;
+        }
+
+        [part~='selected'] [part~='selected'],
+        [part~='selected']:hover [part~='selected'] {
+            outline: rem(1px) solid Highlight;
+        }
+    }
+}

src/components/card/themes/container.base.scss

@@ -25,3 +25,9 @@
     backface-visibility: hidden;
     transition: box-shadow .1s ease-out;
 }
+
+@media (forced-colors: active) {
+    :host([elevated]) {
+        border: rem(1px) solid CanvasText;
+    }
+}

src/components/carousel/themes/carousel.base.scss

@@ -169,3 +169,15 @@ igc-button::part(base) {
         padding: pad-block(rem(4px)) pad-inline(rem(6px));
     }
 }
+
+@media (forced-colors: active) {
+    :host {
+        [part='dot active']::after {
+            border: rem(3px) solid CanvasText;
+        }
+
+        [part~='dot']:hover {
+            border-color: Highlight;
+        }
+    }
+}

src/components/carousel/themes/shared/carousel.indigo.scss

@@ -104,3 +104,11 @@ igc-carousel-indicator {
     min-width: rem(16px);
     min-height: rem(16px);
 }
+
+@media (forced-colors: active) {
+    :host {
+        [part~='dot']::after {
+            border: rem(4px) solid CanvasText;
+        }
+    }
+}

src/components/chat/themes/chat.base.scss

@@ -180,3 +180,9 @@ igc-list-item::part(title) {
       transform: scale(1.1);
     }
 }
+
+@media (forced-colors: active) {
+    [part~='header'] {
+        border-block-end: rem(1px) solid CanvasText;
+    }
+}

src/components/chat/themes/message.base.scss

@@ -58,3 +58,9 @@
     max-width: rem(576px);
     width: fit-content;
 }
+
+@media (forced-colors: active) {
+    [part~='message-container'] {
+        border: rem(1px) solid CanvasText;
+    }
+}

src/components/checkbox/themes/checkbox.base.scss

@@ -108,3 +108,28 @@ label {
         order: -1;
     }
 }
+
+@media (forced-colors: active) {
+    [part~='control'] {
+        --tick-color: CanvasText;
+    }
+
+    :host([disabled]) [part~='base'],
+    :host(:disabled) [part~='base'] {
+        [part~='control']::after,
+        [part~='control'] {
+            --disabled-tick-color: GrayText;
+
+            border-color: GrayText;
+        }
+
+        [part~='label'] {
+            color: GrayText;
+        }
+    }
+
+    :host(:focus) [part~='control']::after,
+    :host(:hover) [part~='control']::after {
+        border-color: Highlight !important;
+    }
+}

src/components/checkbox/themes/shared/checkbox/checkbox.bootstrap.scss

@@ -180,3 +180,17 @@ $theme: $bootstrap;
         box-shadow: none;
     }
 }
+
+@media (forced-colors: active) {
+    :host [part~='control'] {
+        --fill-color: transparent;
+        --fill-color-hover: transparent;
+
+        border: rem(1px) solid CanvasText;
+    }
+
+    :host(:focus) [part~='control'],
+    :host(:hover) [part~='control'] {
+        border-color: Highlight;
+    }
+}