Merge pull request #5656 from nextcloud-libraries/fix/modal-header

fix(NcModal): Adjust modal header name and actions

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>
@@ -197,10 +200,10 @@ export default {
 			tabindex="-1">
 			<!-- Header -->
 			<transition name="fade-visibility" appear>
-				<div class="modal-header">
+				<div class="modal-header" data-theme-dark>
 					<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,21 @@ 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;
+		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 +891,6 @@ export default {
 			}
 		}
 
-		.header-actions {
-			color: white;
-		}
-
 		&:deep() .action-item {
 			margin: math.div($header-height - $clickable-area, 2);
 
@@ -906,9 +904,11 @@ export default {
 			}
 		}
 
-		:deep(button) {
-			// force white instead of default main text
-			color: #fff;
+		// The modal ignores the color theme and adds a black backdrop
+		// so we need to add custom color of the actions toggle
+		.header-actions :deep(button:focus-visible) {
+			box-shadow: none !important;
+			outline: 2px solid #fff !important;
 		}
 
 		// Force the Actions menu icon to be the same size as other icons

styleguide/assets/additional.css

@@ -4,6 +4,7 @@
  */
 @import 'default.css';
 @import 'server.css';
+@import 'dark.css';
 
 div[data-preview] * {
 	box-sizing: border-box;

styleguide/assets/dark.css

@@ -0,0 +1,89 @@
+[data-theme-dark] {
+	--color-main-background:#171717;
+	--color-main-background-rgb:23,23,23;
+	--color-main-background-translucent:rgba(var(--color-main-background-rgb), .97);
+	--color-main-background-blur:rgba(var(--color-main-background-rgb), .85);
+	--filter-background-blur:blur(25px);
+	--gradient-main-background:var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%;
+	--color-background-hover:#212121;
+	--color-background-dark:#292929;
+	--color-background-darker:#3b3b3b;
+	--color-placeholder-light:#313131;
+	--color-placeholder-dark:#4a4a4a;
+	--color-main-text:#EBEBEB;
+	--color-text-maxcontrast:#999999;
+	--color-text-maxcontrast-default:#999999;
+	--color-text-maxcontrast-background-blur:#a8a8a8;
+	--color-text-light:var(--color-main-text);
+	--color-text-lighter:var(--color-text-maxcontrast);
+	--color-scrollbar:#3d3d3d;
+	--color-error:#FF3333;
+	--color-error-rgb:255,51,51;
+	--color-error-hover:#ff6666;
+	--color-error-text:#ff8080;
+	--color-warning:#FFCC00;
+	--color-warning-rgb:255,204,0;
+	--color-warning-hover:#ffd633;
+	--color-warning-text:#FFCC00;
+	--color-success:#3B973B;
+	--color-success-rgb:59,151,59;
+	--color-success-hover:#4cb94c;
+	--color-success-text:#5ec05e;
+	--color-info:#00AEFF;
+	--color-info-rgb:0,174,255;
+	--color-info-hover:#33beff;
+	--color-info-text:#00AEFF;
+	--color-favorite:#ffde00;
+	--color-loading-light:#777;
+	--color-loading-dark:#CCC;
+	--color-box-shadow-rgb:0,0,0;
+	--color-box-shadow:#000000;
+	--color-border:#292929;
+	--color-border-dark:#3b3b3b;
+	--color-border-maxcontrast:#7d7d7d;
+	--font-face:system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+	--default-font-size:15px;
+	--animation-quick:100ms;
+	--animation-slow:300ms;
+	--border-width-input:1px;
+	--border-width-input-focused:2px;
+	--border-radius:3px;
+	--border-radius-large:10px;
+	--border-radius-rounded:28px;
+	--border-radius-element:10px;
+	--border-radius-pill:100px;
+	--default-clickable-area:44px;
+	--default-line-height:24px;
+	--default-grid-baseline:4px;
+	--header-height:50px;
+	--navigation-width:300px;
+	--sidebar-min-width:300px;
+	--sidebar-max-width:500px;
+	--list-min-width:200px;
+	--list-max-width:300px;
+	--header-menu-item-height:44px;
+	--header-menu-profile-item-height:66px;
+	--breakpoint-mobile:1024px;
+	--background-invert-if-dark:invert(100%);
+	--background-invert-if-bright:no;
+	--background-image-invert-if-bright:no;
+	--primary-invert-if-bright:invert(100%);
+	--primary-invert-if-dark:no;
+	--color-primary:#00679e;
+	--color-primary-text:#ffffff;
+	--color-primary-hover:#045783;
+	--color-primary-light:#14232c;
+	--color-primary-light-text:#99c2d8;
+	--color-primary-light-hover:#1e2d35;
+	--color-primary-element:#0091f2;
+	--color-primary-element-hover:#079cff;
+	--color-primary-element-text:#000000;
+	--color-primary-element-text-dark:#0a0a0a;
+	--color-primary-element-light:#14232c;
+	--color-primary-element-light-hover:#1e2d35;
+	--color-primary-element-light-text:#99d3f9;
+	--gradient-primary-background:linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
+	--color-background-plain:#00679e;
+	--color-background-plain-text:#ffffff;
+	--image-background: url('./img/background/kamil-porembinski-clouds.jpg');
+}