fix(NcModal): Adjust modal header name and actions

- Fix size and margin of header name to work with new server styles on Nextcloud 30+
- Fix focus-visible, hover and open color of header actions on bright color theme

Signed-off-by: Ferdinand Thiessen <[email protected]>

src/components/NcModal/NcModal.vue

@@ -19,6 +19,9 @@ depending on whether you require the Modal to stay within the DOM or not. Do not
 			:outTransition="true"
 			:hasNext="true"
 			:hasPrevious="true">
+			<template #actions>
+				<NcActionCaption name="Some action" />
+			</template>
 			<div class="modal__content">Hello world</div>
 		</NcModal>
 	</div>
@@ -200,7 +203,7 @@ export default {
 				<div class="modal-header">
 					<h2 v-if="name.trim() !== ''"
 						:id="'modal-name-' + randId"
-						class="modal-name">
+						class="modal-header__name">
 						{{ name }}
 					</h2>
 					<div class="icons-menu">
@@ -239,7 +242,7 @@ export default {
 
 						<!-- Actions menu -->
 						<NcActions class="header-actions" :inline="inlineActions">
-							<!-- @slot List of actions to show -->
+							<!-- @slot Actions to show (one or more NcAction* components) -->
 							<slot name="actions" />
 						</NcActions>
 
@@ -823,22 +826,22 @@ export default {
 	overflow: hidden;
 	transition: opacity 250ms, visibility 250ms;
 
-	.modal-name {
+	&__name {
 		overflow-x: hidden;
 		box-sizing: border-box;
 		width: 100%;
 		padding: 0 #{$clickable-area * 3} 0 12px; // maximum actions is 3
 		transition: padding ease 100ms;
 		white-space: nowrap;
 		text-overflow: ellipsis;
-		color: #fff;
-		font-size: $icon-margin;
-		margin-bottom: 0;
+		color: #fff; // Always rendered on dark background
+		font-size: $icon-size;
+		margin-block: 0;
 	}
 
 	// On wider screens the name can be centered
 	@media only screen and (min-width: $breakpoint-mobile) {
-		.modal-name {
+		&__name {
 			padding-left: #{$clickable-area * 3}; // maximum actions is 3
 			text-align: center;
 		}
@@ -889,10 +892,6 @@ export default {
 			}
 		}
 
-		.header-actions {
-			color: white;
-		}
-
 		&:deep() .action-item {
 			margin: math.div($header-height - $clickable-area, 2);
 
@@ -906,9 +905,27 @@ export default {
 			}
 		}
 
-		:deep(button) {
-			// force white instead of default main text
+		// The modal ignores the color theme and adds a black backdrop
+		// so we need to add custom color of the actions toggle
+		.header-actions {
+			--open-background-color: #3e3e3e;
 			color: #fff;
+
+			:deep(button) {
+				// force white instead of default main text
+				color: #fff;
+
+				&:hover, &:active {
+					// Also fix the hover color
+					background-color: var(--open-background-color) !important;
+				}
+
+				// Fix the focus visible color
+				&:focus-visible {
+					box-shadow: none !important;
+					outline: 2px solid #fff !important;
+				}
+			}
 		}
 
 		// Force the Actions menu icon to be the same size as other icons