feat: add low/high contrast themes (#1041)

ychhabra-eightfold · web-flow · commit 61556d469fd0 · 2025-10-16T18:41:20.000+05:30
diff --git a/src/components/Avatar/avatar.module.scss b/src/components/Avatar/avatar.module.scss
@@ -110,6 +110,7 @@
 .image-style,
 .avatar-img-wrapper {
   border-radius: var(--avatar-border-radius);
+  border: var(--avatar-border);
   position: relative;
 
   &.round {
@@ -133,6 +134,7 @@
   .wrapper-style {
     &:focus-visible {
       box-shadow: var(--focus-visible-box-shadow);
+      @include focus-visible-forced-colors();
     }
   }
 }
diff --git a/src/components/Badge/badge.module.scss b/src/components/Badge/badge.module.scss
@@ -9,6 +9,7 @@
   padding: 0 $space-xxs;
   width: fit-content;
   height: fit-content;
+  forced-color-adjust: none; /* prevents system from overriding */
 
   &-large {
     border-radius: calc(var(--badge-border-radius) + 2px);
diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
@@ -415,6 +415,10 @@
 
   &.ai-agent {
     color: var(--button-ai-agent-text-color);
+    border-width: var(--button-ai-agent-border-width);
+    border-style: var(--button-ai-agent-border-style);
+    border-color: var(--button-ai-agent-border-color);
+
     &.focus-visible,
     &:focus-visible {
       outline: 2px solid var(--button-ai-agent-focus-visible-outline-color);
@@ -1356,6 +1360,9 @@
   --color: var(--button-neutral-text-color);
   color: var(--color);
   background: var(--bg);
+  border-width: var(--button-neutral-border-width);
+  border-style: var(--button-neutral-border-style);
+  border-color: var(--button-neutral-border-color);
 
   .loader-dot {
     background: var(--color);
@@ -1380,6 +1387,9 @@
   --bg: var(--button-system-ui-background-color);
   --color: var(--button-system-ui-text-color);
   color: var(--color);
+  border-width: var(--button-system-ui-border-width);
+  border-style: var(--button-system-ui-border-style);
+  border-color: var(--button-system-ui-border-color);
 
   .loader-dot {
     background: var(--color);
@@ -1554,6 +1564,9 @@
   --color: var(--button-two-state-text-color);
   background: var(--bg);
   color: var(--color);
+  border-width: var(--button-two-state-border-width);
+  border-style: var(--button-two-state-border-style);
+  border-color: var(--button-two-state-border-color);
 
   .loader {
     background: var(--bg);
@@ -1892,6 +1905,7 @@
     &.focus-visible,
     &:focus-visible {
       box-shadow: var(--focus-visible-box-shadow);
+      @include focus-visible-forced-colors();
 
       &.drop-shadow {
         box-shadow: var(--focus-visible-box-shadow), $shadow-object-s;
diff --git a/src/components/Card/card.module.scss b/src/components/Card/card.module.scss
@@ -166,6 +166,7 @@
     &.focus-visible,
     &:focus-visible {
       box-shadow: var(--focus-visible-box-shadow);
+      @include focus-visible-forced-colors();
 
       &.drop-shadow {
         box-shadow: var(--focus-visible-box-shadow), $shadow-object-s;
diff --git a/src/components/CheckBox/checkbox.module.scss b/src/components/CheckBox/checkbox.module.scss
@@ -934,6 +934,7 @@
       background: var(--check-box-pill-container-active-background-color);
       box-shadow: var(--focus-visible-box-shadow);
       color: var(--check-box-pill-container-active-text-color);
+      @include focus-visible-forced-colors();
 
       input[type='checkbox'] {
         &:checked {
diff --git a/src/components/DateTimePicker/Internal/ocpicker.module.scss b/src/components/DateTimePicker/Internal/ocpicker.module.scss
@@ -2864,12 +2864,14 @@
     &-focused {
       border-color: transparent;
       box-shadow: var(--focus-visible-box-shadow);
+      @include focus-visible-forced-colors();
     }
 
     &-partial {
       &-focused {
         border-color: transparent;
         box-shadow: var(--focus-visible-box-shadow), $picker-box-shadow;
+        @include focus-visible-forced-colors();
       }
     }
   }
diff --git a/src/components/Dialog/BaseDialog/base-dialog.module.scss b/src/components/Dialog/BaseDialog/base-dialog.module.scss
@@ -23,6 +23,7 @@ $dialog-body-bottom-shadow: inset 0 -11px 8px -10px
     border-radius: $border-radius-xl;
     box-shadow: $shadow-object-l;
     opacity: 0;
+    border: var(--dialog-border);
 
     .header {
       display: flex;
diff --git a/src/components/Drawer/drawer.module.scss b/src/components/Drawer/drawer.module.scss
@@ -179,6 +179,7 @@ $handle_height: 40px;
     &.focus-visible,
     &:focus-visible {
       box-shadow: var(--focus-visible-box-shadow) inset;
+      @include focus-visible-forced-colors();
     }
   }
 }
diff --git a/src/components/Dropdown/dropdown.module.scss b/src/components/Dropdown/dropdown.module.scss
@@ -11,6 +11,7 @@
     &:focus-visible {
       outline: none;
       box-shadow: var(--focus-visible-box-shadow);
+      @include focus-visible-forced-colors();
     }
 
     &.disabled {
@@ -34,6 +35,7 @@
   z-index: $z-index-400;
   max-height: min(45vh, 600px);
   overflow-y: auto;
+  border: var(--dropdown-border);
 
   &.open {
     animation-name: slideUpIn;
@@ -64,6 +66,7 @@
   .dropdown-wrapper {
     &:focus-visible {
       box-shadow: var(--focus-visible-box-shadow);
+      @include focus-visible-forced-colors();
     }
   }
 }
diff --git a/src/components/Inputs/input.module.scss b/src/components/Inputs/input.module.scss
@@ -1750,6 +1750,7 @@
       &:focus-visible {
         border-color: var(--input-background-color);
         box-shadow: var(--focus-visible-box-shadow);
+        @include focus-visible-forced-colors();
 
         &.underline {
           border-color: transparent;
@@ -1784,6 +1785,7 @@
       &:focus-visible {
         background: transparent;
         box-shadow: var(--focus-visible-box-shadow);
+        @include focus-visible-forced-colors();
 
         svg {
           color: var(--grey-color);
@@ -1796,6 +1798,7 @@
       &:focus-visible {
         border-color: var(--input-background-color);
         box-shadow: var(--focus-visible-box-shadow);
+        @include focus-visible-forced-colors();
 
         &.underline {
           border-color: transparent;
diff --git a/src/components/Link/link.module.scss b/src/components/Link/link.module.scss
@@ -109,6 +109,7 @@
     &:focus-visible {
       box-shadow: var(--focus-visible-box-shadow);
       text-decoration: underline;
+      @include focus-visible-forced-colors();
     }
   }
 }
diff --git a/src/components/LinkButton/linkbutton.module.scss b/src/components/LinkButton/linkbutton.module.scss
@@ -1140,6 +1140,7 @@ a.link-button-rtl {
     &.focus-visible,
     &:focus-visible {
       box-shadow: var(--focus-visible-box-shadow);
+      @include focus-visible-forced-colors();
 
       &.drop-shadow {
         box-shadow: var(--focus-visible-box-shadow), $shadow-object-s;
diff --git a/src/components/Loader/loader.module.scss b/src/components/Loader/loader.module.scss
@@ -3,9 +3,10 @@
 
   .dot {
     --translate: -2px;
-    background: var(--primary-color);
+    background: var(--loader-dot-color);
     border-radius: 50%;
     margin: 0 $space-xxxs;
+    forced-color-adjust: none; /* prevents system from overriding */
 
     &.small {
       width: 4px;
diff --git a/src/components/MatchScore/matchScore.module.scss b/src/components/MatchScore/matchScore.module.scss
@@ -24,6 +24,7 @@ $indicator-size: $space-s;
     border-radius: 50%;
     margin-top: $space-xxxs;
     margin-right: $space-xxs;
+    forced-color-adjust: none; /* prevents system from overriding */
 
     &.full {
       background: var(--match-score-background-color);
diff --git a/src/components/Menu/MenuItem/menuItem.module.scss b/src/components/Menu/MenuItem/menuItem.module.scss
@@ -268,6 +268,7 @@
     &:focus-visible,
     &:focus-within {
       box-shadow: var(--focus-visible-box-shadow);
+      @include focus-visible-forced-colors();
     }
 
     &.disruptive {
diff --git a/src/components/Panel/panel.module.scss b/src/components/Panel/panel.module.scss
@@ -17,6 +17,7 @@
     box-shadow: $shadow-panel-right;
     transition: all $motion-duration-extra-fast $motion-easing-easeinout 0s;
     overflow: auto;
+    outline: var(--panel-outline);
 
     &.left,
     &.right {
@@ -87,6 +88,10 @@
       display: flex;
       justify-content: space-between;
 
+      @media (forced-colors: active) {
+        border-bottom: solid 1px var(--border-color);
+      }
+
       &-button {
         margin-right: $space-m;
       }
@@ -194,6 +199,10 @@
     align-items: center;
     background: $eightfold-logo-gradient-dark;
 
+    @media (forced-colors: active) {
+      border-bottom: solid 1px var(--border-color);
+    }
+
     .header-title {
       @include octuple-h4();
       padding: 0;
diff --git a/src/components/Pills/pills.module.scss b/src/components/Pills/pills.module.scss
@@ -11,6 +11,7 @@
   width: fit-content;
   display: flex;
   align-items: center;
+  border: var(--pill-border);
 
   .label {
     font-family: var(--font-stack-full);
@@ -711,6 +712,7 @@
     &.focus-visible,
     &:focus-visible {
       box-shadow: var(--focus-visible-box-shadow);
+      @include focus-visible-forced-colors();
     }
   }
 }
diff --git a/src/components/Progress/progress.module.scss b/src/components/Progress/progress.module.scss
@@ -2,6 +2,7 @@
   @include reset-component();
 
   display: inline-block;
+  forced-color-adjust: none; /* prevents system from overriding */
 
   &-line {
     font-size: $text-font-size-2;
diff --git a/src/components/RadioButton/radio.module.scss b/src/components/RadioButton/radio.module.scss
@@ -551,6 +551,7 @@
       background: var(--radio-button-pill-container-active-background-color);
       box-shadow: var(--focus-visible-box-shadow);
       color: var(--radio-button-pill-container-active-text-color);
+      @include focus-visible-forced-colors();
 
       input[type='radio'] {
         &:checked {
diff --git a/src/components/Skeleton/skeleton.module.scss b/src/components/Skeleton/skeleton.module.scss
@@ -9,6 +9,7 @@ $skeleton-wave-animation: wave 1.6s linear 0.5s infinite;
 
 .skeleton {
   background: var(--skeleton-background-color);
+  forced-color-adjust: none; /* prevents system from overriding */
 
   &.pulse {
     animation: $skeleton-pulse-animation;
@@ -29,6 +30,7 @@ $skeleton-wave-animation: wave 1.6s linear 0.5s infinite;
       left: 0;
       right: 0;
       top: 0;
+      forced-color-adjust: none; /* prevents system from overriding */
     }
   }
 
diff --git a/src/components/Skill/skill.module.scss b/src/components/Skill/skill.module.scss
@@ -1226,6 +1226,7 @@ $skill-svg-xsmall-height: 18px;
     &.focus-visible,
     &:focus-visible {
       box-shadow: var(--focus-visible-box-shadow);
+      @include focus-visible-forced-colors();
 
       &.drop-shadow {
         box-shadow: var(--focus-visible-box-shadow), $shadow-object-s;
diff --git a/src/components/Slider/slider.module.scss b/src/components/Slider/slider.module.scss
@@ -71,6 +71,7 @@ $small-min-label-text-only-offset-with-steps: 8px;
   font-family: var(--font-stack-full);
   height: $medium-slider-height + $medium-label-height;
   position: relative;
+  forced-color-adjust: none; /* prevents system from overriding */
 
   .slider {
     position: relative;
@@ -177,6 +178,7 @@ $small-min-label-text-only-offset-with-steps: 8px;
     position: absolute;
     top: $medium-rail-top;
     width: 100%;
+    forced-color-adjust: none; /* prevents system from overriding */
   }
 
   // The slider rail needs to be 2px thinner than the track to prevent layered border-radius flicker.
diff --git a/src/components/Snackbar/snackbar.module.scss b/src/components/Snackbar/snackbar.module.scss
@@ -9,6 +9,7 @@
     forwards;
   margin-bottom: $space-s;
   background-color: var(--white-color);
+  border: var(--snackbar-border);
 
   .content-wrapper {
     display: flex;
diff --git a/src/components/Tabs/tabs.module.scss b/src/components/Tabs/tabs.module.scss
@@ -59,11 +59,12 @@
     .tab-indicator {
       position: absolute;
       z-index: 1;
-      height: $space-xxxs;
+      height: var(--tab-indicator-height);
       bottom: 0;
       width: calc(100% - #{$space-xl});
       background: var(--tab-indicator-color);
       border-radius: $space-xxs $space-xxs 0 0;
+      forced-color-adjust: none; /* prevents system from overriding */
     }
 
     .label {
@@ -92,6 +93,7 @@
     &:focus-visible {
       box-shadow: inset var(--focus-visible-box-shadow);
       outline: none;
+      @include focus-visible-forced-colors();
     }
 
     &-rtl {
@@ -1180,6 +1182,7 @@
       &.focus-visible,
       &:focus-visible {
         box-shadow: var(--focus-visible-box-shadow);
+        @include focus-visible-forced-colors();
       }
     }
   }
diff --git a/src/components/Tooltip/tooltip.module.scss b/src/components/Tooltip/tooltip.module.scss
@@ -32,6 +32,10 @@ $tooltip-arrow-shadow: 0px 1px 2px rgba(15, 20, 31, 0.12);
   text-align: center;
   z-index: $z-index-400;
 
+  @media (prefers-contrast: more), (forced-colors: active) {
+    border: var(--tooltip-border-light);
+  }
+
   &.bordered {
     border: var(--tooltip-border-light);
   }
@@ -88,6 +92,15 @@ $tooltip-arrow-shadow: 0px 1px 2px rgba(15, 20, 31, 0.12);
   &.drop-shadow {
     .arrow {
       box-shadow: $tooltip-arrow-shadow;
+      @media (forced-colors: active) {
+        border-color: CanvasText;
+        border-style: solid;
+        border-width: 1px;
+        border-left-color: transparent;
+        border-top-color: transparent;
+        forced-color-adjust: none; /* optional - preserve color */
+        background: Canvas;
+      }
     }
   }
 
@@ -238,6 +251,7 @@ $tooltip-arrow-shadow: 0px 1px 2px rgba(15, 20, 31, 0.12);
           position: absolute;
           right: 0;
           top: 0;
+          @include focus-visible-forced-colors();
         }
       }
     }
diff --git a/src/components/Upload/upload.module.scss b/src/components/Upload/upload.module.scss
@@ -1126,6 +1126,7 @@ $upload-picture-card-size: 104px;
         &.focus-visible,
         &:focus-visible {
           box-shadow: var(--focus-visible-box-shadow);
+          @include focus-visible-forced-colors();
 
           &.drop-shadow {
             box-shadow: var(--focus-visible-box-shadow), $shadow-object-s;
diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss
diff --git a/src/styles/main.scss b/src/styles/main.scss
diff --git a/src/styles/themes/_a11y-contrast.scss b/src/styles/themes/_a11y-contrast.scss
diff --git a/src/styles/themes/_default-theme.scss b/src/styles/themes/_default-theme.scss

Original file line number	Diff line number	Diff line change
`@@ -110,6 +110,7 @@`
`110`	`110`	`.image-style,`
`111`	`111`	`.avatar-img-wrapper {`
`112`	`112`	`border-radius: var(--avatar-border-radius);`
	`113`	`+ border: var(--avatar-border);`
`113`	`114`	`position: relative;`
`114`	`115`
`115`	`116`	`&.round {`
`@@ -133,6 +134,7 @@`
`133`	`134`	`.wrapper-style {`
`134`	`135`	`&:focus-visible {`
`135`	`136`	`box-shadow: var(--focus-visible-box-shadow);`
	`137`	`+ @include focus-visible-forced-colors();`
`136`	`138`	`}`
`137`	`139`	`}`
`138`	`140`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2864,12 +2864,14 @@`
`2864`	`2864`	`&-focused {`
`2865`	`2865`	`border-color: transparent;`
`2866`	`2866`	`box-shadow: var(--focus-visible-box-shadow);`
	`2867`	`+ @include focus-visible-forced-colors();`
`2867`	`2868`	`}`
`2868`	`2869`
`2869`	`2870`	`&-partial {`
`2870`	`2871`	`&-focused {`
`2871`	`2872`	`border-color: transparent;`
`2872`	`2873`	`box-shadow: var(--focus-visible-box-shadow), $picker-box-shadow;`
	`2874`	`+ @include focus-visible-forced-colors();`
`2873`	`2875`	`}`
`2874`	`2876`	`}`
`2875`	`2877`	`}`
Original file line number	Diff line number	Diff line change
`@@ -179,6 +179,7 @@ $handle_height: 40px;`
`179`	`179`	`&.focus-visible,`
`180`	`180`	`&:focus-visible {`
`181`	`181`	`box-shadow: var(--focus-visible-box-shadow) inset;`
	`182`	`+ @include focus-visible-forced-colors();`
`182`	`183`	`}`
`183`	`184`	`}`
`184`	`185`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,7 @@`
`11`	`11`	`&:focus-visible {`
`12`	`12`	`outline: none;`
`13`	`13`	`box-shadow: var(--focus-visible-box-shadow);`
	`14`	`+ @include focus-visible-forced-colors();`
`14`	`15`	`}`
`15`	`16`
`16`	`17`	`&.disabled {`
`@@ -34,6 +35,7 @@`
`34`	`35`	`z-index: $z-index-400;`
`35`	`36`	`max-height: min(45vh, 600px);`
`36`	`37`	`overflow-y: auto;`
	`38`	`+ border: var(--dropdown-border);`
`37`	`39`
`38`	`40`	`&.open {`
`39`	`41`	`animation-name: slideUpIn;`
`@@ -64,6 +66,7 @@`
`64`	`66`	`.dropdown-wrapper {`
`65`	`67`	`&:focus-visible {`
`66`	`68`	`box-shadow: var(--focus-visible-box-shadow);`
	`69`	`+ @include focus-visible-forced-colors();`
`67`	`70`	`}`
`68`	`71`	`}`
`69`	`72`	`}`