fix(button): hcm for ghost icon color contrast (#9904)

kinueng · tay1orjones · kodiakhq[bot] · web-flow · commit 3f7fbdf5b1df · 2021-10-20T17:09:38.000Z
* fix(button): hcm for ghost icon color contrast - #9903 * fix(button): hcm iconOnly fill fix, mirror to styles package Co-authored-by: Taylor Jones <taylor.jones826@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
@@ -523,6 +523,15 @@
   .#{$prefix}--btn:focus {
     @include high-contrast-mode('focus');
   }
+
+  // Windows HCM fix
+  // stylelint-disable-next-line no-duplicate-selectors
+  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only
+    .#{$prefix}--btn__icon
+    path:not([data-icon-path]):not([fill='none']),
+  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon {
+    @include high-contrast-mode('icon-fill');
+  }
 }
 
 @include exports('button') {
diff --git a/packages/styles/scss/components/button/_button.scss b/packages/styles/scss/components/button/_button.scss
@@ -525,4 +525,13 @@
   .#{$prefix}--btn:focus {
     @include high-contrast-mode('focus');
   }
+
+  // Windows HCM fix
+  // stylelint-disable-next-line no-duplicate-selectors
+  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only
+    .#{$prefix}--btn__icon
+    path:not([data-icon-path]):not([fill='none']),
+  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon {
+    @include high-contrast-mode('icon-fill');
+  }
 }

Original file line number	Diff line number	Diff line change
`@@ -525,4 +525,13 @@`
`525`	`525`	`.#{$prefix}--btn:focus {`
`526`	`526`	`@include high-contrast-mode('focus');`
`527`	`527`	`}`
	`528`	`+`
	`529`	`+ // Windows HCM fix`
	`530`	`+ // stylelint-disable-next-line no-duplicate-selectors`
	`531`	`+ .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only`
	`532`	`+ .#{$prefix}--btn__icon`
	`533`	`+ path:not([data-icon-path]):not([fill='none']),`
	`534`	`+ .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon {`
	`535`	`+ @include high-contrast-mode('icon-fill');`
	`536`	`+ }`
`528`	`537`	`}`