diff --git a/src/components/avatar/themes/avatar.base.scss b/src/components/avatar/themes/avatar.base.scss index 1b7e3a5b30..e8bf8df806 100644 --- a/src/components/avatar/themes/avatar.base.scss +++ b/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; + } +} diff --git a/src/components/badge/themes/badge.base.scss b/src/components/badge/themes/badge.base.scss index d8e9284d0e..b4ba01eee1 100644 --- a/src/components/badge/themes/badge.base.scss +++ b/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; + } +} diff --git a/src/components/banner/themes/banner.base.scss b/src/components/banner/themes/banner.base.scss index e28b5b1d89..1116d1fa56 100644 --- a/src/components/banner/themes/banner.base.scss +++ b/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; + } +} diff --git a/src/components/banner/themes/shared/banner.indigo.scss b/src/components/banner/themes/shared/banner.indigo.scss index c076e72b60..1409c0216d 100644 --- a/src/components/banner/themes/shared/banner.indigo.scss +++ b/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; + } +} diff --git a/src/components/calendar/themes/calendar.base.scss b/src/components/calendar/themes/calendar.base.scss index cc47471990..aa9482dcda 100644 --- a/src/components/calendar/themes/calendar.base.scss +++ b/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; + } +} diff --git a/src/components/calendar/themes/days-view.base.scss b/src/components/calendar/themes/days-view.base.scss index 103a53a67c..05c5072473 100644 --- a/src/components/calendar/themes/days-view.base.scss +++ b/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; + } + } +} diff --git a/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss index 604f49f03d..f7b681fb2a 100644 --- a/src/components/calendar/themes/shared/bootstrap/calendar.bootstrap.scss +++ b/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; + } +} diff --git a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss index 17193bc74f..e315e4b3ee 100644 --- a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss +++ b/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); + } + } + } +} diff --git a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss index 33c01b8e46..d23925d6b7 100644 --- a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss +++ b/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; + } + } +} diff --git a/src/components/calendar/themes/shared/indigo/calendar.indigo.scss b/src/components/calendar/themes/shared/indigo/calendar.indigo.scss index 524ab62e87..c1a9604eef 100644 --- a/src/components/calendar/themes/shared/indigo/calendar.indigo.scss +++ b/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; + } + } +} diff --git a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss index 6422159932..86f718295e 100644 --- a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss +++ b/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; + } +} diff --git a/src/components/calendar/themes/shared/material/days-view.material.scss b/src/components/calendar/themes/shared/material/days-view.material.scss index 23ed1ed5b8..e91cfba382 100644 --- a/src/components/calendar/themes/shared/material/days-view.material.scss +++ b/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; + } + } +} diff --git a/src/components/calendar/themes/year-month-view.base.scss b/src/components/calendar/themes/year-month-view.base.scss index a0306142ba..803ca78cb3 100644 --- a/src/components/calendar/themes/year-month-view.base.scss +++ b/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; + } + } +} diff --git a/src/components/card/themes/container.base.scss b/src/components/card/themes/container.base.scss index aa92c6234c..29bdd6a6ec 100644 --- a/src/components/card/themes/container.base.scss +++ b/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; + } +} diff --git a/src/components/carousel/themes/carousel.base.scss b/src/components/carousel/themes/carousel.base.scss index 55f567b0c0..dbfb07707e 100644 --- a/src/components/carousel/themes/carousel.base.scss +++ b/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; + } + } +} \ No newline at end of file diff --git a/src/components/carousel/themes/shared/carousel.indigo.scss b/src/components/carousel/themes/shared/carousel.indigo.scss index 0a00409cda..3c7560c718 100644 --- a/src/components/carousel/themes/shared/carousel.indigo.scss +++ b/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; + } + } +} \ No newline at end of file diff --git a/src/components/chat/themes/chat.base.scss b/src/components/chat/themes/chat.base.scss index afc009d643..02ec2ce8b9 100644 --- a/src/components/chat/themes/chat.base.scss +++ b/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; + } +} diff --git a/src/components/chat/themes/message.base.scss b/src/components/chat/themes/message.base.scss index c22222d39a..e46e80674a 100644 --- a/src/components/chat/themes/message.base.scss +++ b/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; + } +} diff --git a/src/components/checkbox/themes/checkbox.base.scss b/src/components/checkbox/themes/checkbox.base.scss index a5a653a05f..c426e8fa83 100644 --- a/src/components/checkbox/themes/checkbox.base.scss +++ b/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; + } +} diff --git a/src/components/checkbox/themes/shared/checkbox/checkbox.bootstrap.scss b/src/components/checkbox/themes/shared/checkbox/checkbox.bootstrap.scss index cb48ab2ad1..e4529101ec 100644 --- a/src/components/checkbox/themes/shared/checkbox/checkbox.bootstrap.scss +++ b/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; + } +} diff --git a/src/components/checkbox/themes/shared/checkbox/checkbox.fluent.scss b/src/components/checkbox/themes/shared/checkbox/checkbox.fluent.scss index 32019a8efe..350b5616fc 100644 --- a/src/components/checkbox/themes/shared/checkbox/checkbox.fluent.scss +++ b/src/components/checkbox/themes/shared/checkbox/checkbox.fluent.scss @@ -243,3 +243,22 @@ $disabled-fill-color: var-get($theme, 'disabled-fill-color'); } } } + +@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; + } + + :host([indeterminate]) [part~='control'] { + --fill-color: CanvasText; + --fill-color-hover: CanvasText; + } +} diff --git a/src/components/checkbox/themes/shared/switch/switch.bootstrap.scss b/src/components/checkbox/themes/shared/switch/switch.bootstrap.scss index 12000e2054..7de9a007ef 100644 --- a/src/components/checkbox/themes/shared/switch/switch.bootstrap.scss +++ b/src/components/checkbox/themes/shared/switch/switch.bootstrap.scss @@ -77,3 +77,13 @@ $theme: $bootstrap; border-color: var-get($theme, 'track-on-disabled-color'); } } + +@media (forced-colors: active) { + [part~='thumb'] { + border: rem(5px) solid CanvasText; + } + + [part='control focused'] [part='thumb'] { + outline-width: rem(1px); + } +} diff --git a/src/components/checkbox/themes/shared/switch/switch.fluent.scss b/src/components/checkbox/themes/shared/switch/switch.fluent.scss index 93dbf3fec8..5d069a658c 100644 --- a/src/components/checkbox/themes/shared/switch/switch.fluent.scss +++ b/src/components/checkbox/themes/shared/switch/switch.fluent.scss @@ -72,3 +72,9 @@ $theme: $fluent; border-color: var-get($theme, 'track-on-disabled-color'); } } + +@media (forced-colors: active) { + [part~='thumb'] { + border: rem(6px) solid CanvasText; + } +} diff --git a/src/components/checkbox/themes/shared/switch/switch.indigo.scss b/src/components/checkbox/themes/shared/switch/switch.indigo.scss index 929e86c920..bc5072516d 100644 --- a/src/components/checkbox/themes/shared/switch/switch.indigo.scss +++ b/src/components/checkbox/themes/shared/switch/switch.indigo.scss @@ -63,3 +63,13 @@ $border-width: rem(1px); border-color: transparent; } } + +@media (forced-colors: active) { + [part~='thumb'] { + border: rem(4px) solid CanvasText; + } + + [part~='control focused'] [part~='thumb'] { + outline-width: rem(1px); + } +} diff --git a/src/components/checkbox/themes/shared/switch/switch.material.scss b/src/components/checkbox/themes/shared/switch/switch.material.scss index 6a322e6a89..1aade0baf1 100644 --- a/src/components/checkbox/themes/shared/switch/switch.material.scss +++ b/src/components/checkbox/themes/shared/switch/switch.material.scss @@ -110,3 +110,13 @@ $ripple-radius: calc(#{$ripple-size} / 2); box-shadow: var-get($theme, 'disabled-elevation'); } } + +@media (forced-colors: active) { + [part~='thumb'] { + border: rem(10px) solid CanvasText; + + &:hover { + border-width: rem(4px); + } + } +} diff --git a/src/components/checkbox/themes/switch.base.scss b/src/components/checkbox/themes/switch.base.scss index 3c2c3d2355..677f60109a 100644 --- a/src/components/checkbox/themes/switch.base.scss +++ b/src/components/checkbox/themes/switch.base.scss @@ -81,3 +81,29 @@ input[type='checkbox'] { margin-inline-start: var(--thumb-offset); } } + +@media (forced-colors: active) { + [part~='thumb']:hover { + border-width: rem(2px); + } + + [part='control focused'] [part~='thumb'], + [part='control checked focused'] [part='thumb checked'] { + outline: rem(2px) solid Highlight; + transition: none; + } + + :host([disabled]), + :host(:disabled) { + --border-disabled-color: GrayText; + --label-disabled-color: GrayText; + + [part~='thumb'] { + border-color: GrayText; + } + + [part~='base'] [part~='control'][part~='checked'] { + border-color: GrayText; + } + } +} diff --git a/src/components/color-picker/themes/color-picker.base.scss b/src/components/color-picker/themes/color-picker.base.scss index 70e37b6bc9..ce8df9aa17 100644 --- a/src/components/color-picker/themes/color-picker.base.scss +++ b/src/components/color-picker/themes/color-picker.base.scss @@ -148,3 +148,18 @@ :host([required]) [part='label']::after { content: '*'; } + +@media (forced-colors: active) { + :host { + [part~='anchor']::before, + [part='picker-canvas'], + [part='hue']::-webkit-slider-runnable-track, + [part~='anchor'][part~='input-mode'] { + forced-color-adjust: none; + } + + [part='hue']::-webkit-slider-runnable-track { + outline: rem(1px) solid CanvasText; + } + } +} \ No newline at end of file diff --git a/src/components/combo/themes/combo-item.base.scss b/src/components/combo/themes/combo-item.base.scss index 89994ba437..c8ba32ef03 100644 --- a/src/components/combo/themes/combo-item.base.scss +++ b/src/components/combo/themes/combo-item.base.scss @@ -21,3 +21,9 @@ igc-checkbox { pointer-events: none; } + +@media (forced-colors: active) { + igc-checkbox::part(control)::after { + border-color: CanvasText; + } +} \ No newline at end of file diff --git a/src/components/combo/themes/combo.base.scss b/src/components/combo/themes/combo.base.scss index d889ee4b3c..d714ad0256 100644 --- a/src/components/combo/themes/combo.base.scss +++ b/src/components/combo/themes/combo.base.scss @@ -106,3 +106,38 @@ background: transparent; } } + +@media (forced-colors: active) { + [part~='list-wrapper'] { + border: rem(1px) solid CanvasText; + } + + :host(:disabled) igc-validator::part(helper-text), + :host([disabled]) igc-validator::part(helper-text) { + color: GrayText; + } + + :host(:disabled), + :host([disabled]), + :host(:disabled) igc-input, + :host([disabled]) igc-input { + --disabled-text-color: GrayText; + --toggle-button-foreground-disabled: GrayText; + } + + :host(:disabled) igc-input::part(container), + :host([disabled]) igc-input::part(container) { + border-color: GrayText; + } +} + +@media (forced-colors: active) { + [part~='active'] { + outline: rem(1px) solid CanvasText; + outline-offset: rem(-1px); + } + + [part~='selected'] { + color: Highlight; + } +} \ No newline at end of file diff --git a/src/components/combo/themes/shared/combo.bootstrap.scss b/src/components/combo/themes/shared/combo.bootstrap.scss index 1d21f9503f..5f94ff907e 100644 --- a/src/components/combo/themes/shared/combo.bootstrap.scss +++ b/src/components/combo/themes/shared/combo.bootstrap.scss @@ -124,3 +124,14 @@ $dropdown-theme: dropdown-theme.$bootstrap; border-inline-start: rem(1px) solid var(--border-color); } } + +@media (forced-colors: active) { + :host igc-input::part(input) { + border-color: CanvasText; + } + + :host(:disabled) igc-input::part(input), + :host([disabled]) igc-input::part(input) { + border-color: GrayText; + } +} diff --git a/src/components/date-picker/themes/date-picker.base.scss b/src/components/date-picker/themes/date-picker.base.scss index 41225834f5..c8fb4389b7 100644 --- a/src/components/date-picker/themes/date-picker.base.scss +++ b/src/components/date-picker/themes/date-picker.base.scss @@ -60,3 +60,16 @@ gap: rem(8px); } } + +@media (forced-colors: active) { + :host igc-focus-trap { + igc-calendar { + border: rem(1px) solid CanvasText; + } + + [part~='actions'] { + border: rem(1px) solid CanvasText; + border-block-start: 0; + } + } +} diff --git a/src/components/date-range-picker/date-range-picker.base.scss b/src/components/date-range-picker/date-range-picker.base.scss index cd0569c5a4..d084cad769 100644 --- a/src/components/date-range-picker/date-range-picker.base.scss +++ b/src/components/date-range-picker/date-range-picker.base.scss @@ -82,3 +82,18 @@ igc-date-time-input { width: 100%; min-width: 0; } + +@media (forced-colors: active) { + :host igc-focus-trap { + max-width: calc(var(--min-width) * 2.02); + + igc-calendar { + border: rem(1px) solid CanvasText; + } + + [part~='actions'] { + border: 1px solid CanvasText; + border-block-start: 0; + } + } +} \ No newline at end of file diff --git a/src/components/date-range-picker/predefined-ranges-area.base.scss b/src/components/date-range-picker/predefined-ranges-area.base.scss index 5ea4003258..547321eaea 100644 --- a/src/components/date-range-picker/predefined-ranges-area.base.scss +++ b/src/components/date-range-picker/predefined-ranges-area.base.scss @@ -16,3 +16,14 @@ max-height: #{sizable(rem(84px), rem(96px), rem(120px))}; overflow-y: auto; } + +@media (forced-colors: active) { + :host { + border: 1px solid CanvasText; + border-block-start: 0; + + igc-chip::part(base) { + border: rem(1px) solid CanvasText; + } + } +} diff --git a/src/components/divider/themes/divider.base.scss b/src/components/divider/themes/divider.base.scss index 160545f096..c675c88724 100644 --- a/src/components/divider/themes/divider.base.scss +++ b/src/components/divider/themes/divider.base.scss @@ -22,3 +22,21 @@ min-width: rem(1px); width: rem(1px); } + +@media (forced-colors: active) { + :host(:not([vertical]))::after { + border: rem(3px) solid canvasText; + } + + :host(:not([vertical])[type='dashed'])::after { + border-style: dashed; + } + + :host([vertical]:not([type='dashed']))::after { + border-inline-start: rem(3px) solid canvasText; + } + + :host([vertical][type='dashed']) { + border-inline-start: rem(1px) dashed canvasText; + } +} diff --git a/src/components/dropdown/themes/dropdown-item.base.scss b/src/components/dropdown/themes/dropdown-item.base.scss index b969338c8f..100508c78f 100644 --- a/src/components/dropdown/themes/dropdown-item.base.scss +++ b/src/components/dropdown/themes/dropdown-item.base.scss @@ -50,3 +50,27 @@ margin-inline-start: pad-inline(rem(8px)); } + +@media (forced-colors: active) { + :host(:hover), + :host([selected]) { + color: Highlight !important; + + ::slotted(igc-icon) { + color: Highlight !important; + } + } + + :host([disabled]) { + color: GrayText !important; + + ::slotted(igc-icon) { + color: GrayText !important; + } + } + + :host([active]) { + outline: rem(1px) solid CanvasText; + outline-offset: rem(-1px); + } +} diff --git a/src/components/dropdown/themes/dropdown.base.scss b/src/components/dropdown/themes/dropdown.base.scss index 32dd5e7188..6cdf59b965 100644 --- a/src/components/dropdown/themes/dropdown.base.scss +++ b/src/components/dropdown/themes/dropdown.base.scss @@ -11,3 +11,9 @@ min-width: rem(112px); z-index: 10005; } + +@media (forced-colors: active) { + :host [part='base'] { + border: rem(1px) solid CanvasText; + } +} diff --git a/src/components/file-input/themes/file-input.base.scss b/src/components/file-input/themes/file-input.base.scss index 2dfc160843..21963d6e56 100644 --- a/src/components/file-input/themes/file-input.base.scss +++ b/src/components/file-input/themes/file-input.base.scss @@ -113,3 +113,9 @@ $theme-file-input: file-input.$base; background: var-get($theme-file-input, 'file-names-background--disabled') } } + +@media (forced-colors: active) { + :host [part~='file-selector-button'] { + padding-inline-end: rem(12px); + } +} diff --git a/src/components/file-input/themes/shared/file-input.bootstrap.scss b/src/components/file-input/themes/shared/file-input.bootstrap.scss index 33fc75de45..eef1e5de6c 100644 --- a/src/components/file-input/themes/shared/file-input.bootstrap.scss +++ b/src/components/file-input/themes/shared/file-input.bootstrap.scss @@ -109,3 +109,9 @@ $theme-file-input: file-input.$bootstrap; --disabled-border-color: var(--input-border-color); } } + +@media (forced-colors: active) { + :host [part~='file-selector-button'] { + padding-inline-end: 0; + } +} diff --git a/src/components/input/themes/shared/input.indigo.scss b/src/components/input/themes/shared/input.indigo.scss index cd6bf6330a..03306a4101 100644 --- a/src/components/input/themes/shared/input.indigo.scss +++ b/src/components/input/themes/shared/input.indigo.scss @@ -225,3 +225,9 @@ $transition-duration: .25s; color: var-get($theme, 'disabled-text-color'); } } + +@media (forced-colors: active) { + :host [part~='container']::after { + content: unset; + } +} \ No newline at end of file diff --git a/src/components/input/themes/shared/input.material.scss b/src/components/input/themes/shared/input.material.scss index 9f8b72cdb7..3a4b0ddf7c 100644 --- a/src/components/input/themes/shared/input.material.scss +++ b/src/components/input/themes/shared/input.material.scss @@ -769,3 +769,19 @@ $fs: rem(16px) !default; @include floated-notch(); } } + +@media (forced-colors: active) { + :host(:not([outlined])) [part~='container'] [part='notch'] { + border-top: none; + } + + :host(:not([outlined])) [part~='container'] { + outline: rem(1px) solid CanvasText; + border-bottom: none; + border-radius: var-get($theme, 'box-border-radius'); + + &::after { + content: unset; + } + } +} diff --git a/src/components/list/themes/item.base.scss b/src/components/list/themes/item.base.scss index dcb890e3e5..85360c3de1 100644 --- a/src/components/list/themes/item.base.scss +++ b/src/components/list/themes/item.base.scss @@ -55,3 +55,11 @@ [part='subtitle'] { @include type-style('body-2'); } + +@media (forced-colors: active) { + :host([selected]), + :host([selected]:last-of-type) { + outline: rem(1px) solid Highlight; + outline-offset: rem(-1px); + } +} diff --git a/src/components/nav-drawer/themes/item.base.scss b/src/components/nav-drawer/themes/item.base.scss index 5b13b617e9..a9abce2fde 100644 --- a/src/components/nav-drawer/themes/item.base.scss +++ b/src/components/nav-drawer/themes/item.base.scss @@ -40,3 +40,16 @@ cursor: initial; pointer-events: none; } + +@media (forced-colors: active) { + [part~='base']:hover, + [part~='base']:focus-within { + outline: rem(1px) solid CanvasText; + outline-offset: rem(-1px); + } + + :host([active]) [part~='base'] { + --item-active-icon-color: Highlight; + --item-active-text-color: Highlight; + } +} \ No newline at end of file diff --git a/src/components/progress/themes/linear/linear.progress.base.scss b/src/components/progress/themes/linear/linear.progress.base.scss index 4bd00780f6..09d03bc10e 100644 --- a/src/components/progress/themes/linear/linear.progress.base.scss +++ b/src/components/progress/themes/linear/linear.progress.base.scss @@ -168,3 +168,15 @@ [part~='hidden'] { display: none; } + +@media (forced-colors: active) { + :host { + [part~='track'] { + outline: rem(1px) solid CanvasText; + } + + [part~='fill'] { + border: rem(2px) solid CanvasText; + } + } +} diff --git a/src/components/progress/themes/linear/shared/linear.progress.bootstrap.scss b/src/components/progress/themes/linear/shared/linear.progress.bootstrap.scss new file mode 100644 index 0000000000..d19f3d20e9 --- /dev/null +++ b/src/components/progress/themes/linear/shared/linear.progress.bootstrap.scss @@ -0,0 +1,12 @@ +@use 'styles/utilities' as *; +@use '../light/themes' as *; + +$theme: $bootstrap; + +@media (forced-colors: active) { + :host { + [part~='fill'] { + border-width: rem(8px); + } + } +} \ No newline at end of file diff --git a/src/components/progress/themes/linear/themes.ts b/src/components/progress/themes/linear/themes.ts index e2c0737bb6..b7d4d620ca 100644 --- a/src/components/progress/themes/linear/themes.ts +++ b/src/components/progress/themes/linear/themes.ts @@ -13,6 +13,7 @@ import { styles as fluentLight } from './light/linear.progress.fluent.css.js'; import { styles as indigoLight } from './light/linear.progress.indigo.css.js'; import { styles as materialLight } from './light/linear.progress.material.css.js'; import { styles as sharedLight } from './light/linear.progress.shared.css.js'; +import { styles as bootstrap } from './shared/linear.progress.bootstrap.css.js'; // Shared Styles import { styles as fluent } from './shared/linear.progress.fluent.css.js'; import { styles as indigo } from './shared/linear.progress.indigo.css.js'; @@ -22,7 +23,7 @@ const light = { ${sharedLight} `, bootstrap: css` - ${bootstrapLight} + ${bootstrap} ${bootstrapLight} `, material: css` ${materialLight} @@ -40,7 +41,7 @@ const dark = { ${sharedDark} `, bootstrap: css` - ${bootstrapDark} + ${bootstrap} ${bootstrapDark} `, material: css` ${materialDark} diff --git a/src/components/radio/themes/radio.base.scss b/src/components/radio/themes/radio.base.scss index 31edb82376..bc334544eb 100644 --- a/src/components/radio/themes/radio.base.scss +++ b/src/components/radio/themes/radio.base.scss @@ -70,3 +70,35 @@ input[type='radio'] { pointer-events: none; user-select: none; } + +@media (forced-colors: active) { + [part='control checked'] { + &::before { + border: rem(10px) solid CanvasText; + } + } + + :host(:hover) [part~='base'] [part='control checked'] { + &::before { + border: rem(4px) solid CanvasText; + } + } + + [part='base checked focused'] { + outline: rem(1px) solid Highlight; + outline-offset: rem(4px); + } + + :host([disabled]) [part~='base'], + :host(:disabled) [part~='base'] { + --disabled-label-color: GrayText; + --disabled-color: GrayText; + + [part='control checked'] { + &::after, + &::before { + border-color: GrayText; + } + } + } +} diff --git a/src/components/radio/themes/shared/radio.bootstrap.scss b/src/components/radio/themes/shared/radio.bootstrap.scss index b18b145d93..a374d6533e 100644 --- a/src/components/radio/themes/shared/radio.bootstrap.scss +++ b/src/components/radio/themes/shared/radio.bootstrap.scss @@ -137,3 +137,11 @@ $theme: $bootstrap; } } } + +@media (forced-colors: active) { + [part='control checked'] { + &::before { + border-width: rem(8px); + } + } +} diff --git a/src/components/radio/themes/shared/radio.indigo.scss b/src/components/radio/themes/shared/radio.indigo.scss index 7be15cf683..e70e43edb5 100644 --- a/src/components/radio/themes/shared/radio.indigo.scss +++ b/src/components/radio/themes/shared/radio.indigo.scss @@ -128,3 +128,11 @@ $theme: $indigo; } } } + +@media (forced-colors: active) { + [part='control checked'] { + &::before { + border-width: rem(8px); + } + } +} diff --git a/src/components/resize-container/themes/resize-container.base.scss b/src/components/resize-container/themes/resize-container.base.scss new file mode 100644 index 0000000000..a5a2f70a8f --- /dev/null +++ b/src/components/resize-container/themes/resize-container.base.scss @@ -0,0 +1,60 @@ +@use 'styles/common/component'; +@use 'styles/utilities' as *; + +%indicator { + --_size: #{rem(11px)}; + + display: inline-flex; + visibility: var(--resize-visibility); + position: absolute; + z-index: 1; +} + +:host { + display: contents; +} + +[part~='resize-base'] { + position: relative; + height: 100%; +} + +[part='trigger-side'], +[part='trigger'], +[part='trigger-bottom'] { + @extend %indicator; +} + +[part='trigger-side'] { + top: calc(50% - var(--_size)); + right: calc(var(--_size) / 2 * -1); + cursor: e-resize; +} + +[part='trigger'] { + bottom: calc(var(--_size) / 2 * -1); + right: calc(var(--_size) / 2 * -1); + cursor: se-resize; +} + +[part='trigger-bottom'] { + left: calc(50% - var(--_size)); + bottom: calc(var(--_size) / 2 * -1); + cursor: s-resize; +} + +[part='trigger']:focus { + outline: none; +} + +@media (forced-colors: active) { + [part~='trigger-side'], + [part~='trigger'], + [part~='trigger-bottom'] { + border: rem(1px) solid Highlight; + } + + [part~='resize-base'][part~='active']::after { + --resize-indicator: Highlight; + } +} diff --git a/src/components/select/themes/select.base.scss b/src/components/select/themes/select.base.scss index 2b2541b39f..d31948303e 100644 --- a/src/components/select/themes/select.base.scss +++ b/src/components/select/themes/select.base.scss @@ -52,3 +52,27 @@ igc-validator { [name='suffix']::slotted(*) { display: flex; } + +@media (forced-colors: active) { + [part~='list-wrapper'] { + border: rem(1px) solid CanvasText; + } + + :host(:disabled) igc-validator::part(helper-text), + :host([disabled]) igc-validator::part(helper-text) { + color: GrayText; + } + + :host(:disabled), + :host([disabled]), + :host(:disabled) igc-input, + :host([disabled]) igc-input { + --disabled-text-color: GrayText; + --toggle-button-foreground-disabled: GrayText; + } + + :host(:disabled) igc-input::part(container), + :host([disabled]) igc-input::part(container) { + border-color: GrayText; + } +} diff --git a/src/components/select/themes/shared/select.bootstrap.scss b/src/components/select/themes/shared/select.bootstrap.scss index d4fc0d183b..85a1bb14d4 100644 --- a/src/components/select/themes/shared/select.bootstrap.scss +++ b/src/components/select/themes/shared/select.bootstrap.scss @@ -76,3 +76,14 @@ $dropdown-theme: dropdown-theme.$bootstrap; border-inline-start: rem(1px) solid var(--border-color); } } + +@media (forced-colors: active) { + :host igc-input::part(input) { + border-color: CanvasText !important; + } + + :host(:disabled) igc-input::part(input), + :host([disabled]) igc-input::part(input) { + border-color: GrayText; + } +} diff --git a/src/components/select/themes/shared/select.material.scss b/src/components/select/themes/shared/select.material.scss index a7687d4679..e6d0e046e8 100644 --- a/src/components/select/themes/shared/select.material.scss +++ b/src/components/select/themes/shared/select.material.scss @@ -111,4 +111,4 @@ $active-border-width: rem(2px) !default; igc-input::part(filled) + igc-input::part(notch) { border-top-color: transparent; } -} +} \ No newline at end of file diff --git a/src/components/slider/themes/shared/slider.material.scss b/src/components/slider/themes/shared/slider.material.scss index 78024d5a5a..8985a7323a 100644 --- a/src/components/slider/themes/shared/slider.material.scss +++ b/src/components/slider/themes/shared/slider.material.scss @@ -74,3 +74,9 @@ $thumb-radius: math.div($thumb-size, 2); color: var-get($theme, 'disabled-fill-track-color'); } } + +@media (forced-colors: active) { + [part~='thumb'][part~='focused'] { + border: rem(1px) solid; + } +} diff --git a/src/components/slider/themes/slider.base.scss b/src/components/slider/themes/slider.base.scss index f5c7dc767b..067e63f6fa 100644 --- a/src/components/slider/themes/slider.base.scss +++ b/src/components/slider/themes/slider.base.scss @@ -192,3 +192,32 @@ slot { pointer-events: none; cursor: initial; } + +@media (forced-colors: active) { + [part='tick'] { + --tick-color: CanvasText; + } + + [part='track'], + [part='thumb'], + [part='thumb-label-inner'] { + border: rem(1px) solid CanvasText; + } + + [part~='thumbs'] [part~='thumb'][part~='focused'] { + border-color: Highlight; + } + + [part~='thumbs'] [part='thumb-label-inner'] { + &::after { + border-top: none; + } + } + + :host(:disabled) { + [part='track'], + [part~='thumbs'] [part='thumb'] { + border-color: GrayText; + } + } +} diff --git a/src/components/snackbar/themes/snackbar.base.scss b/src/components/snackbar/themes/snackbar.base.scss index e121b73ca5..b69cee47f9 100644 --- a/src/components/snackbar/themes/snackbar.base.scss +++ b/src/components/snackbar/themes/snackbar.base.scss @@ -62,3 +62,9 @@ display: none; } } + +@media (forced-colors: active) { + [part='base'] { + border: rem(1px) solid CanvasText; + } +} diff --git a/src/components/splitter/themes/splitter.base.scss b/src/components/splitter/themes/splitter.base.scss index f644cff638..d3af40f840 100644 --- a/src/components/splitter/themes/splitter.base.scss +++ b/src/components/splitter/themes/splitter.base.scss @@ -110,3 +110,17 @@ margin-inline-end: rem(48px); } } + +@media (forced-colors: active) { + [part='splitter-bar'] { + border: rem(1px) solid CanvasText; + + &:focus { + border-color: Highlight; + } + } + + [part='drag-handle'] { + border: rem(2px) solid CanvasText; + } +} diff --git a/src/components/stepper/themes/step/step.base.scss b/src/components/stepper/themes/step/step.base.scss index 23120dda99..8a98ae7501 100644 --- a/src/components/stepper/themes/step/step.base.scss +++ b/src/components/stepper/themes/step/step.base.scss @@ -288,3 +288,25 @@ cursor: default; } } + +@media (forced-colors: active) { + [part~='indicator'] { + border: rem(1px) solid CanvasText; + } + + [part~='header'] { + &:hover, + &:focus { + outline-offset: rem(-1px); + background: none !important; + } + + &:hover { + outline: rem(1px) solid CanvasText; + } + + &:focus { + outline: rem(1px) solid Highlight; + } + } +} diff --git a/src/components/tabs/themes/shared/tab/tab.bootstrap.scss b/src/components/tabs/themes/shared/tab/tab.bootstrap.scss index 6453f30d76..2b6f142862 100644 --- a/src/components/tabs/themes/shared/tab/tab.bootstrap.scss +++ b/src/components/tabs/themes/shared/tab/tab.bootstrap.scss @@ -128,3 +128,25 @@ $theme: $bootstrap; } } } + +@media (forced-colors: active) { + :host([selected]) [part~='tab-header']::before { + border: rem(1px) solid CanvasText; + border-bottom: 0; + } + + :host([selected]) [part~='tab-header']:focus::before { + outline: rem(1px) solid Highlight; + outline-offset: rem(-1px); + } + + :host(:not([selected])) [part~='tab-header']::before { + --_border-size: 0; + + border-bottom: rem(1px) solid CanvasText; + } + + :host(:not([selected])) [part~='tab-header']:hover::before { + border: rem(1px) solid CanvasText; + } +} diff --git a/src/components/tabs/themes/shared/tab/tab.fluent.scss b/src/components/tabs/themes/shared/tab/tab.fluent.scss index c2c222ec7d..6a33dc54ef 100644 --- a/src/components/tabs/themes/shared/tab/tab.fluent.scss +++ b/src/components/tabs/themes/shared/tab/tab.fluent.scss @@ -17,3 +17,14 @@ $theme: $fluent; font-weight: 700; } } + +@media (forced-colors: active) { + [part~='tab-header'] { + border: none; + transition: none; + + &:focus { + --border-color--hover: Highlight; + } + } +} diff --git a/src/components/tabs/themes/shared/tab/tab.indigo.scss b/src/components/tabs/themes/shared/tab/tab.indigo.scss index 5f78fcb6c6..eaa5da111b 100644 --- a/src/components/tabs/themes/shared/tab/tab.indigo.scss +++ b/src/components/tabs/themes/shared/tab/tab.indigo.scss @@ -28,4 +28,20 @@ $theme: $indigo; @include type-style('subtitle-2'); text-transform: uppercase; -} \ No newline at end of file +} + +@media (forced-colors: active) { + :host [part~='tab-header'] { + border-top: 0; + + &:hover { + outline: rem(1px) solid CanvasText; + outline-offset: rem(-1px); + } + } + + :host([selected]) [part~='tab-header']:focus { + outline: rem(1px) solid Highlight; + outline-offset: rem(-1px); + } +} diff --git a/src/components/tabs/themes/shared/tab/tab.material.scss b/src/components/tabs/themes/shared/tab/tab.material.scss index 07613df815..166182b323 100644 --- a/src/components/tabs/themes/shared/tab/tab.material.scss +++ b/src/components/tabs/themes/shared/tab/tab.material.scss @@ -54,3 +54,22 @@ $theme: $material; ::slotted(igc-icon) { --size: #{rem(24px)}; } + +@media (forced-colors: active) { + [part~='tab-header'] { + border: none; + + &:hover { + outline: rem(1px) solid CanvasText; + outline-offset: rem(-1px); + } + + &:focus { + border: none; + } + + &::before { + inset: 0; + } + } +} diff --git a/src/components/tabs/themes/shared/tabs/tabs.fluent.scss b/src/components/tabs/themes/shared/tabs/tabs.fluent.scss index 5aab46375e..ae83031d43 100644 --- a/src/components/tabs/themes/shared/tabs/tabs.fluent.scss +++ b/src/components/tabs/themes/shared/tabs/tabs.fluent.scss @@ -28,3 +28,9 @@ igc-icon-button[disabled]::part(base) { background: var-get($theme, 'indicator-color'); } } + +@media (forced-colors: active) { + [part~='selected-indicator'] span { + border: rem(1px) solid CanvasText; + } +} diff --git a/src/components/tabs/themes/shared/tabs/tabs.indigo.scss b/src/components/tabs/themes/shared/tabs/tabs.indigo.scss index 26542f6a5c..b06bcceb5b 100644 --- a/src/components/tabs/themes/shared/tabs/tabs.indigo.scss +++ b/src/components/tabs/themes/shared/tabs/tabs.indigo.scss @@ -81,3 +81,9 @@ igc-icon-button::part(icon) { z-index: 2; } + +@media (forced-colors: active) { + [part~='selected-indicator'] span { + border-bottom: rem(3px) solid CanvasText; + } +} diff --git a/src/components/tabs/themes/shared/tabs/tabs.material.scss b/src/components/tabs/themes/shared/tabs/tabs.material.scss index bc6935f219..2308bb854e 100644 --- a/src/components/tabs/themes/shared/tabs/tabs.material.scss +++ b/src/components/tabs/themes/shared/tabs/tabs.material.scss @@ -21,4 +21,10 @@ $theme: $material; igc-icon-button:hover::part(icon) { color: var(--hover-foreground); -} \ No newline at end of file +} + +@media (forced-colors: active) { + [part~='selected-indicator'] span { + border: rem(1px) solid CanvasText; + } +} diff --git a/src/components/tabs/themes/tab.base.scss b/src/components/tabs/themes/tab.base.scss index 32f7ac2dd6..0b03922355 100644 --- a/src/components/tabs/themes/tab.base.scss +++ b/src/components/tabs/themes/tab.base.scss @@ -94,3 +94,10 @@ } } +@media (forced-colors: active) { + :host([selected]) [part~='tab-header']:focus::before { + outline: rem(1px) solid Highlight; + outline-offset: rem(-1px); + } +} + diff --git a/src/components/textarea/themes/shared/textarea.bootstrap.scss b/src/components/textarea/themes/shared/textarea.bootstrap.scss index 99fbe6ac39..580b7cb2c8 100644 --- a/src/components/textarea/themes/shared/textarea.bootstrap.scss +++ b/src/components/textarea/themes/shared/textarea.bootstrap.scss @@ -181,3 +181,20 @@ textarea { border-inline-end: rem(1px) solid var(--border-color); } } + +@media (forced-colors: active) { + :host(:focus-within) [part~='container'] { + --border-color: Highlight; + } + + :host([disabled]), + :host(:disabled) { + [part~='container'] { + --disabled-border-color: GrayText; + } + + [part~='label'] { + color: GrayText; + } + } +} diff --git a/src/components/textarea/themes/shared/textarea.common.scss b/src/components/textarea/themes/shared/textarea.common.scss index ba4e1b1354..77c5b9fd05 100644 --- a/src/components/textarea/themes/shared/textarea.common.scss +++ b/src/components/textarea/themes/shared/textarea.common.scss @@ -145,3 +145,17 @@ textarea { ::slotted([slot='prefix']) { padding-inline: var(--affix-padding); } + +@media (forced-colors: active) { + :host([disabled]), + :host(:disabled) { + ::part(helper-text) { + color: GrayText; + } + + ::slotted([slot='prefix']), + ::slotted([slot='suffix']) { + --color: GrayText; + } + } +} diff --git a/src/components/textarea/themes/shared/textarea.fluent.scss b/src/components/textarea/themes/shared/textarea.fluent.scss index 1af5eee482..0f8273753f 100644 --- a/src/components/textarea/themes/shared/textarea.fluent.scss +++ b/src/components/textarea/themes/shared/textarea.fluent.scss @@ -128,3 +128,20 @@ textarea { } } } + +@media (forced-colors: active) { + :host(:focus-within) [part~='container'] { + border-color: Highlight; + } + + :host([disabled]), + :host(:disabled) { + [part~='container'] { + border-color: GrayText; + } + + [part~='label'] { + color: GrayText; + } + } +} diff --git a/src/components/textarea/themes/shared/textarea.indigo.scss b/src/components/textarea/themes/shared/textarea.indigo.scss index 44e66909d2..0081565466 100644 --- a/src/components/textarea/themes/shared/textarea.indigo.scss +++ b/src/components/textarea/themes/shared/textarea.indigo.scss @@ -148,3 +148,15 @@ textarea { } } } + +@media (forced-colors: active) { + :host(:focus-within) { + --focused-bottom-line-color: Highlight; + } + + :host([disabled]), + :host(:disabled) { + --disabled-text-color: GrayText; + --disabled-bottom-line-color: GrayText; + } +} diff --git a/src/components/textarea/themes/shared/textarea.material.scss b/src/components/textarea/themes/shared/textarea.material.scss index 353e060b4c..0638a7ab8b 100644 --- a/src/components/textarea/themes/shared/textarea.material.scss +++ b/src/components/textarea/themes/shared/textarea.material.scss @@ -473,3 +473,50 @@ textarea { border-color: var-get($theme, 'disabled-border-color'); } } + +@media (forced-colors: active) { + :host(:not([outlined]):focus-within) [part~='container'] { + outline-color: Highlight; + } + + :host(:focus-within) { + --focused-border-color: Highlight; + + [part~='label'] { + color: Highlight; + } + } + + :host([outlined]:focus-within) [part='notch'] { + border-block-start-color: Highlight !important; + } + + :host([disabled]), + :host(:disabled) { + --disabled-border-color: GrayText; + --disabled-bottom-line-color: GrayText; + + [part~='label'] { + color: GrayText; + } + + [part~='notch'] { + border-block-start-color: GrayText !important; + } + } + + :host([outlined]:not(:focus-within)) [part~='container'][part~='filled'] [part='notch'], + :host([outlined]:not(:focus-within)) [part~='container'][part~='placeholder'] [part='notch'] { + border-block-start-width: rem(1px); + } + + :host(:not([outlined])) { + [part~='container'] { + outline: 1px solid CanvasText; + + &::after { + content: unset; + } + } + } +} diff --git a/src/components/tile-manager/themes/tile.base.scss b/src/components/tile-manager/themes/tile.base.scss index 6bee35d300..454786f371 100644 --- a/src/components/tile-manager/themes/tile.base.scss +++ b/src/components/tile-manager/themes/tile.base.scss @@ -150,3 +150,19 @@ margin-inline-start: auto; flex-shrink: 0; } + +@media (forced-colors: active) { + [part~='trigger'], + [part~='trigger-side'], + [part~='trigger-bottom'] { + border: rem(1px) solid CanvasText; + + &:hover { + border-color: Highlight; + } + } + + [part~='base']:not([part~='resizable']):hover::after { + --hover-border-color: Highlight; + } +} \ No newline at end of file diff --git a/src/components/toast/themes/toast.base.scss b/src/components/toast/themes/toast.base.scss index bc96094550..be19578eb6 100644 --- a/src/components/toast/themes/toast.base.scss +++ b/src/components/toast/themes/toast.base.scss @@ -42,3 +42,9 @@ :host(:not([open])) { display: none; } + +@media (forced-colors: active) { + :host { + border: rem(1px) solid CanvasText; + } +} diff --git a/src/components/tooltip/themes/tooltip.base.scss b/src/components/tooltip/themes/tooltip.base.scss index 3abfd3a32a..ed1dadd6d3 100644 --- a/src/components/tooltip/themes/tooltip.base.scss +++ b/src/components/tooltip/themes/tooltip.base.scss @@ -51,3 +51,9 @@ slot[name='close-button'] { --component-size: 1; } } + +@media (forced-colors: active) { + :host [part~='base'] { + border: rem(1px) solid CanvasText; + } +} diff --git a/src/components/tree/themes/item.base.scss b/src/components/tree/themes/item.base.scss index 1ba0b6946d..abe95b70c8 100644 --- a/src/components/tree/themes/item.base.scss +++ b/src/components/tree/themes/item.base.scss @@ -104,3 +104,17 @@ pointer-events: none; } } + +@media (forced-colors: active) { + :host [part~='wrapper']::after { + outline-offset: rem(-1px); + } + + :host [part~='wrapper'][part~='active']::after { + outline: rem(1px) solid CanvasText; + } + + :host [part~='wrapper'][part~='focused']::after { + outline: rem(1px) solid Highlight; + } +} diff --git a/src/components/validation-container/themes/validator.base.scss b/src/components/validation-container/themes/validator.base.scss index 2ea7ba8227..c7e7496a1f 100644 --- a/src/components/validation-container/themes/validator.base.scss +++ b/src/components/validation-container/themes/validator.base.scss @@ -30,3 +30,15 @@ [part~='empty'] { display: none !important; } + +@media (forced-colors: active) { + :host { + [part~='validation-message'] { + color: GrayText; + } + + igc-icon { + color: GrayText !important; + } + } +}