Merge pull request #294 from wpmudev/fix/high-contrast

Fix/high contrast
wpmudev · Jun 28, 2024 · 05e2213 · 05e2213
2 parents 4d8a4dd + a8fd673
commit 05e2213
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 7 deletions.
diff --git a/packages/assets/css/src/scss/_components/_accordion/_accordion-elements/_build-item.scss b/packages/assets/css/src/scss/_components/_accordion/_accordion-elements/_build-item.scss
@@ -62,7 +62,6 @@
 						.sui-box-group {
 							padding-top: $spacing-xl;
 							padding-bottom: $spacing-xl;
-							border-top: $border-width-sm solid $color-extended-neutral-80;
 						}
 					}
 				}

diff --git a/packages/assets/css/src/scss/_components/_accordion/_accordion-elements/_build-panel.scss b/packages/assets/css/src/scss/_components/_accordion/_accordion-elements/_build-panel.scss
@@ -29,7 +29,7 @@
 					border-radius: $border-radius-md;
 				}
 
-				@include modifier(no-shadow-content) {
+				@include modifier(content-no-shadow) {
 					border-radius: $border-radius-md;
 				}
 			}
@@ -42,10 +42,18 @@
 		// Block wrapper.
 		@include block($block) {
 			@include element(panel) {
-				@include modifier(content) {
+				@include modifier(content, content-no-shadow) {
 					border: $border-width-sm solid $color-extended-neutral-0;
 				}
 			}
+
+			@include modifier(flushed) {
+				@include modifies-element(panel) {
+					.sui-#{$block}__panel--content {
+						border: none;
+					}
+				}
+			}
 		}
 	}
 }
diff --git a/packages/assets/css/src/scss/_components/_accordion/_states/_edit-expanded.scss b/packages/assets/css/src/scss/_components/_accordion/_states/_edit-expanded.scss
@@ -42,6 +42,7 @@
 
 				.sui-#{$block}__item--footer {
 					padding-top: $spacing-xl;
+					border: none;
 				}
 			}
 		}

diff --git a/packages/assets/css/src/scss/_components/_button/_modifiers/_button-color.scss b/packages/assets/css/src/scss/_components/_button/_modifiers/_button-color.scss
@@ -153,12 +153,15 @@ $colors-high-contrast: (
 							}
 
 							&.sui-#{$block-name}--focus {
-								border-color: $value;
 								background: transparent;
 								color: inherit;
 								@if $name == white {
 									color: $value;
 								}
+
+								&:after {
+									border-color: $value;
+								}
 							}
 						} @else if $theme == secondary {
 							border-color: $value;

diff --git a/packages/assets/css/src/scss/_components/_color-picker/_elements/_build-color-picker.scss b/packages/assets/css/src/scss/_components/_color-picker/_elements/_build-color-picker.scss
@@ -130,6 +130,7 @@
 
 				@include modifier(select) {
 					outline-color: $color-extended-neutral-0;
+					color: $color-extended-neutral-0;
 				}
 			}
 		}

diff --git a/packages/assets/css/src/scss/_components/_navigation/_elements/_navigation-brand.scss b/packages/assets/css/src/scss/_components/_navigation/_elements/_navigation-brand.scss
@@ -58,4 +58,16 @@
 			}
 		}
 	}
+
+	// DIR: Left to right.
+	// THEME: Dark.
+	@include sui-class($rtl: false, $theme: dark) {
+		@include block($block) {
+			@include element(info) {
+				@include modifier(desc) {
+					color: $color-extended-neutral-0;
+				}
+			}
+		}
+	}
 }
diff --git a/packages/assets/css/src/scss/_components/_navigation/_elements/_navigation-container.scss b/packages/assets/css/src/scss/_components/_navigation/_elements/_navigation-container.scss
@@ -51,6 +51,16 @@
 	@include sui-class($rtl: false, $theme: dark) {
 		@include block($block) {
 			border: $border-width-sm solid $color-extended-neutral-0;
+
+			.sui-dropdown__popover {
+				.sui-dropdown__menu-item {
+					color: $color-extended-neutral-0;
+
+					&.sui-dropdown__menu-item--hover {
+						color: $color-extended-neutral-100;
+					}
+				}
+			}
 		}
 	}
 }
diff --git a/packages/assets/css/src/scss/_components/_table/_table-elements/_build-table-row.scss b/packages/assets/css/src/scss/_components/_table/_table-elements/_build-table-row.scss
@@ -62,6 +62,12 @@
 				}
 			}
 
+			@include element(table) {
+				@include modifier(footer) {
+					border-top: $border-width-sm solid $color-extended-neutral-80;
+				}
+			}
+
 			@include modifier(sticky) {
 				@include modifies-element(body) {
 					td {
@@ -116,17 +122,28 @@
 		// Block wrapper.
 		@include block($block) {
 			@include element(row) {
-				box-shadow: 0 -#{$shadow-offset-2xs} 0 0 $color-extended-neutral-0,
-					0 -#{$shadow-offset-2xs} 0 0 $color-extended-neutral-0;
+				border-color: $color-extended-neutral-0;
 
 				@include modifier(expanded, content) {
 					background: $color-extended-neutral-100;
 				}
 
+				@include modifier(expanded) {
+					.sui-#{$block}__cell--sticky {
+						background: $color-extended-neutral-100;
+					}
+				}
+
 				@include modifier(content) {
 					box-shadow: unset;
 				}
 			}
+
+			@include element(table) {
+				@include modifier(footer) {
+					border-color: $color-extended-neutral-0;
+				}
+			}
 		}
 	}
 }
diff --git a/packages/assets/css/src/scss/_components/_tabs/_tabs-elements/_build-container.scss b/packages/assets/css/src/scss/_components/_tabs/_tabs-elements/_build-container.scss
@@ -23,4 +23,13 @@
 			overflow: hidden;
 		}
 	}
+
+	// DIR: Left to right.
+	// THEME: Dark.
+	@include sui-class($rtl: false, $theme: dark) {
+		// Block wrapper.
+		@include block($block) {
+			border-color: $color-extended-neutral-0;
+		}
+	}
 }
diff --git a/packages/ui/accordion/src/accordion-item.tsx b/packages/ui/accordion/src/accordion-item.tsx
@@ -95,7 +95,7 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
 	// Panel content className
 	const panelContentClassName = contentShadow
 		? "sui-accordion__panel--content"
-		: "sui-accordion__panel--content-no-shadow"
+		: "sui-accordion__panel--content sui-accordion__panel--content-no-shadow"
 
 	// Render the AccordionItem component with proper accessibility attributes.
 	return (