Use the color-primary-element* variables

Signed-off-by: Simon L <[email protected]>
nextcloud · May 13, 2023 · 251cfe6 · 251cfe6
1 parent 701e409
commit 251cfe6
Show file tree

Hide file tree

Showing 25 changed files with 81 additions and 81 deletions.
diff --git a/apps/dashboard/src/DashboardApp.vue b/apps/dashboard/src/DashboardApp.vue
@@ -386,7 +386,7 @@ export default {
 	background-attachment: fixed;
 
 	> h2 {
-		color: var(--color-primary-text);
+		color: var(--color-primary-element-text);
 		text-align: center;
 		font-size: 32px;
 		line-height: 130%;
@@ -561,7 +561,7 @@ export default {
 			}
 
 			&:hover {
-				border-color: var(--color-primary);
+				border-color: var(--color-primary-element);
 			}
 		}
 
@@ -577,7 +577,7 @@ export default {
 		}
 
 		input:focus + label {
-			border-color: var(--color-primary);
+			border-color: var(--color-primary-element);
 		}
 	}
 

diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
@@ -23,7 +23,7 @@
 	background-color: var(--color-background-hover);
 }
 .actions .button a:active {
-	background-color: var(--color-primary-light);
+	background-color: var(--color-primary-element-light);
 }
 
 .actions.creatable {
@@ -117,7 +117,7 @@
 }
 
 .file-drag, .file-drag .files-filestable tbody tr, .file-drag .files-filestable tbody tr:hover {
-	background-color: var(--color-primary-light) !important;
+	background-color: var(--color-primary-element-light) !important;
 }
 
 .app-files #app-content.dir-drop {
@@ -129,7 +129,7 @@
 }
 
 .app-files #app-content.dir-drop .files-filestable tbody tr.dropping-to-dir{
-	background-color: var(--color-primary-light) !important;
+	background-color: var(--color-primary-element-light) !important;
 }
 
 /* icons for sidebar */
@@ -202,7 +202,7 @@ table tr.mouseOver td {
 .files-filestable tbody tr.highlighted .name:focus,
 .files-filestable tbody tr.selected,
 .files-filestable tbody tr.searchresult {
-	background-color: var(--color-primary-light);
+	background-color: var(--color-primary-element-light);
 }
 
 tbody a { color: var(--color-main-text); }
@@ -551,7 +551,7 @@ table td.selection {
 		background-color: var(--color-background-hover);
 		border-radius: var(--border-radius-pill);
 		outline: none !important;
-		border: 2px solid var(--color-primary) !important;
+		border: 2px solid var(--color-primary-element) !important;
 		padding: 14px;
 	}
 }
@@ -1303,7 +1303,7 @@ table.dragshadow td.size {
 
 	&:focus-visible,
 	#showgridview:focus-visible + & {
-		box-shadow: inset 0 0 0 2px var(--color-primary) !important;
+		box-shadow: inset 0 0 0 2px var(--color-primary-element) !important;
 	}
 }
 

diff --git a/apps/files/css/upload.scss b/apps/files/css/upload.scss
@@ -58,7 +58,7 @@
 	left: -1px;
 	position: absolute;
 	overflow: hidden;
-	background-color: var(--color-primary);
+	background-color: var(--color-primary-element);
 }
 #uploadprogressbar .label {
 	top: 8px;
@@ -68,7 +68,7 @@
 	font-weight: normal;
 }
 #uploadprogressbar .label.inner {
-	color: var(--color-primary-text);
+	color: var(--color-primary-element-text);
 	position: absolute;
 	display: block;
 	width: 200px;

diff --git a/apps/files/src/components/TemplatePreview.vue b/apps/files/src/components/TemplatePreview.vue
@@ -182,7 +182,7 @@ export default {
 		border-radius: var(--border-radius-large);
 
 		input:checked + label > & {
-			border-color: var(--color-primary);
+			border-color: var(--color-primary-element);
 		}
 
 		&--failed {

diff --git a/apps/files_sharing/src/components/SharingEntryLink.vue b/apps/files_sharing/src/components/SharingEntryLink.vue
@@ -904,7 +904,7 @@ export default {
 	}
 
 	::v-deep .avatar-link-share {
-		background-color: var(--color-primary);
+		background-color: var(--color-primary-element);
 	}
 
 	.sharing-entry__action--public-upload {

diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
@@ -135,18 +135,18 @@ select {
 	display: inline-block;
 	margin: 16px;
 	padding: 14px 20px;
-	background-color: var(--color-primary);
+	background-color: var(--color-primary-element);
 	color: #fff;
 	border-radius: var(--border-radius-pill);
-	border: 1px solid var(--color-primary);
+	border: 1px solid var(--color-primary-element);
 	box-shadow: 0 2px 9px var(--color-box-shadow);
 
 	&:active,
 	&:hover,
 	&:focus {
-		color: var(--color-primary);
-		background-color: var(--color-primary-text);
-		border-color: var(--color-primary) !important;
+		color: var(--color-primary-element);
+		background-color: var(--color-primary-element-text);
+		border-color: var(--color-primary-element) !important;
 	}
 
 	&.icon-file {
@@ -281,7 +281,7 @@ select {
 				}
 
 				&.active {
-					box-shadow: inset 2px 0 var(--color-primary);
+					box-shadow: inset 2px 0 var(--color-primary-element);
 
 					.menuitem-text {
 						font-weight: bold;

diff --git a/apps/settings/src/components/BasicSettings/BackgroundJob.vue b/apps/settings/src/components/BasicSettings/BackgroundJob.vue
@@ -196,15 +196,15 @@ export default {
 	margin-top: 8px;
 	padding: 5px;
 	border-radius: var(--border-radius);
-	color: var(--color-primary-text);
+	color: var(--color-primary-element-text);
 	background-color: var(--color-error);
 	width: initial;
 }
 .warning {
 	margin-top: 8px;
 	padding: 5px;
 	border-radius: var(--border-radius);
-	color: var(--color-primary-text);
+	color: var(--color-primary-element-text);
 	background-color: var(--color-warning);
 	width: initial;
 }

diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
@@ -161,12 +161,12 @@ export default {
 	&__header {
 		height: 70px;
 		border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
-		background-color: var(--color-primary);
+		background-color: var(--color-primary-element);
 		background-image: var(--gradient-primary-background);
 
 		span {
 			bottom: 0;
-			color: var(--color-primary-text);
+			color: var(--color-primary-element-text);
 			font-size: 18px;
 			font-weight: bold;
 			margin: 0 4px 8px 0;

diff --git a/apps/settings/src/components/PersonalInfo/shared/FederationControlAction.vue b/apps/settings/src/components/PersonalInfo/shared/FederationControlAction.vue
@@ -98,7 +98,7 @@ export default {
 	}
 
 	.federation-actions__btn--active {
-		background-color: var(--color-primary-light) !important;
-		box-shadow: inset 2px 0 var(--color-primary) !important;
+		background-color: var(--color-primary-element-light) !important;
+		box-shadow: inset 2px 0 var(--color-primary-element) !important;
 	}
 </style>
diff --git a/apps/theming/src/AdminTheming.vue b/apps/theming/src/AdminTheming.vue
@@ -299,7 +299,7 @@ export default {
 		/* This is basically https://github.com/nextcloud/server/blob/master/core/css/guest.css
 		   But without the user variables. That way the admin can preview the render as guest*/
 		/* As guest, there is no user color color-background-plain */
-		background-color: var(--color-primary-default, #0082c9);
+		background-color: var(--color-primary-element-default, #0082c9);
 		/* As guest, there is no user background (--image-background)
 		1. Empty background if defined
 		2. Else default background

diff --git a/apps/theming/src/components/BackgroundSettings.vue b/apps/theming/src/components/BackgroundSettings.vue
@@ -356,7 +356,7 @@ export default {
 		&:hover,
 		&:focus {
 			// Use theme color primary, see inline css variable in template
-			border: 2px solid var(--border-color, var(--color-primary)) !important;
+			border: 2px solid var(--border-color, var(--color-primary-element)) !important;
 		}
 
 		// Icon

diff --git a/apps/user_status/src/components/OnlineStatusSelect.vue b/apps/user_status/src/components/OnlineStatusSelect.vue
@@ -122,7 +122,7 @@ $label-padding: 8px;
 	&__input:checked + &__label,
 	&__input:focus + &__label,
 	&__label:hover {
-		border-color: var(--color-primary);
+		border-color: var(--color-primary-element);
 	}
 
 	&__label:active {

diff --git a/apps/workflowengine/src/styles/operation.scss b/apps/workflowengine/src/styles/operation.scss
@@ -48,7 +48,7 @@ small {
 .colored:not(.more) {
 	background-color: var(--color-primary-element);
 	h3, small {
-		color: var(--color-primary-text)
+		color: var(--color-primary-element-text)
 	}
 }
 

diff --git a/core/css/apps.scss b/core/css/apps.scss
@@ -208,7 +208,7 @@ kbd {
 				}
 			}
 			a:focus-visible {
-				box-shadow: var(--color-primary) inset 0 0 0 2px;
+				box-shadow: var(--color-primary-element) inset 0 0 0 2px;
 				outline: none;
 			}
 			&.active,
@@ -217,7 +217,7 @@ kbd {
 			a.active {
 				&,
 				> a {
-					background-color: var(--color-primary-light);
+					background-color: var(--color-primary-element-light);
 				}
 			}
 
@@ -276,7 +276,7 @@ kbd {
 						&,
 						> a {
 							border-radius: var(--border-radius-pill);
-							background-color: var(--color-primary-light);
+							background-color: var(--color-primary-element-light);
 						}
 					}
 
@@ -433,7 +433,7 @@ kbd {
 			&:focus-visible {
 				opacity: 1;
 				border-width: 0;
-				box-shadow: inset 0 0 0 2px var(--color-primary);
+				box-shadow: inset 0 0 0 2px var(--color-primary-element);
 				background: none;
 			}
 		}
@@ -533,8 +533,8 @@ kbd {
 				span {
 					padding: 2px 5px;
 					border-radius: 10px;
-					background-color: var(--color-primary);
-					color: var(--color-primary-text);
+					background-color: var(--color-primary-element);
+					color: var(--color-primary-element-text);
 				}
 			}
 		}
@@ -860,7 +860,7 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
 		}
 
 		&:focus-visible {
-			box-shadow: 0 0 0 2px inset var(--color-primary) !important;
+			box-shadow: 0 0 0 2px inset var(--color-primary-element) !important;
 			background-position: 12px center;
 		}
 	}
@@ -1119,7 +1119,7 @@ $outter-margin: math.div($popoveritem-height - $popovericon-size, 2);
 			}
 			&.active {
 				border-radius: var(--border-radius-pill);
-				background-color: var(--color-primary-light);
+				background-color: var(--color-primary-element-light);
 			}
 			/* prevent .action class to break the design */
 			&.action {

diff --git a/core/css/guest.scss b/core/css/guest.scss
@@ -28,7 +28,7 @@ body {
 	color: var(--color-text);
 	text-align: center;
 	/* As guest, there is no color-background-plain */
-	background-color: var(--color-background-plain, var(--color-primary-default, #0082c9));
+	background-color: var(--color-background-plain, var(--color-primary-element-default, #0082c9));
 	/* As guest, there is no user background (--image-background)
 	1. User background if logged in ('no' if removed, that way the variable is _defined_)
 	2. Empty background if enabled ('yes' is used, that way the variable is _defined_)
@@ -309,7 +309,7 @@ button.primary:not(:disabled):hover,
 button.primary:not(:disabled):focus,
 a.primary:not(:disabled):hover,
 a.primary:not(:disabled):focus {
-	color: var(--color-primary-text);
+	color: var(--color-primary-element-text);
 }
 
 /* Checkboxes - white only for login */
@@ -419,7 +419,7 @@ form input[type='checkbox']+label {
 form .warning input[type='checkbox']:hover+label,
 form .warning input[type='checkbox']:focus+label,
 form .warning input[type='checkbox']+label {
-	color: var(--color-primary-text) !important;
+	color: var(--color-primary-element-text) !important;
 }
 
 .body-login-container.two-factor {

diff --git a/core/css/header.scss b/core/css/header.scss
@@ -31,7 +31,7 @@
 		width: 12px;
 		height: 2px;
 		border-radius: 3px;
-		background-color: var(--color-primary-text);
+		background-color: var(--color-primary-element-text);
 		left: 50%;
 		opacity: 1;
 	}
@@ -207,7 +207,7 @@
 /* TODO: move into minimal css file for public shared template */
 /* only used for public share pages now as we have the app icons when logged in */
 .header-appname {
-	color: var(--color-primary-text);
+	color: var(--color-primary-element-text);
 	font-size: 16px;
 	font-weight: bold;
 	margin: 0;
@@ -220,7 +220,7 @@
 }
 
 .header-shared-by  {
-	color: var(--color-primary-text);
+	color: var(--color-primary-element-text);
 	position: relative;
 	font-weight: 300;
 	font-size: 11px;