Use the color-primary-element* variables

Signed-off-by: Simon L <szaimen@e.mail.de>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

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);
 		}
 	}
 

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;
 	}
 }
 

apps/files/css/upload.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["upload.scss"],"names":[],"mappings":"AAAA,QACC,sBACA,YACA,WACA,qBACA,gBACA,gBACA,mBACA,kBACA,YAED,qBACC,kBACA,cACA,WACA,YACA,WACA,iBACA,eACA,WACA,YAED,iCACA,+FAEA,gDACC,sBAGD,uBACC,qBACA,mBACA,YACA,gBAED,0CACC,YACA,gBAED,mBACC,sCACA,sEACA,eACA,kBACA,WACA,YACA,YACA,qBACA,kBAEA,yCACC,gBAGF,yEACC,wBACA,SACA,UACA,kBACA,gBACA,sCAED,0BACC,QACA,UACA,gBACA,mBACA,mBAED,gCACC,gCACA,kBACA,cACA,YAED,gCACC,kBACA,6BAED,4BACC,cAED,2BACC,aAGD,yBACC,yBACA,4BAGD,uBACC,2BACA,yBACA,wBACA,sBACA,qBACA,iBACA,mBAGD,0HAGC,8BACA,4BACA,2BACA,yBACA,wBACA,oBAED,0CACC,cAED,6BACC,WAED,0BACC,eACA,gBAED,+CACC,iBAED,sCACC,YAED,gCACC,mBACA,6BAED,iCACC,gBAED,4CACC,aAED,iCACC,WACA,YAED,2CACC,WACA,qBACA,WAED,6BACC,WACA,YACA,uBACA,4BACA,0BACA,WAGD,qEAEC,WACA,UAED,kCACC,gBACA,iBAED,sDACC,WAED,sCACC,YAED,iCACC,sBACA,kBACA,SAED,sCACC,sBAGD,gCACC,WACA,iBAEA,wCACC,WAIF,mBACC,0CACA,uCACA,qCACA,kCAGD,sCACE,4BACA,qCAEF,mCACE,4BACA,qCAEF,iCACE,4BACA,qCAEF,8BACE,4BACA","file":"upload.css"}
+{"version":3,"sourceRoot":"","sources":["upload.scss"],"names":[],"mappings":"AAAA,QACC,sBACA,YACA,WACA,qBACA,gBACA,gBACA,mBACA,kBACA,YAED,qBACC,kBACA,cACA,WACA,YACA,WACA,iBACA,eACA,WACA,YAED,iCACA,+FAEA,gDACC,sBAGD,uBACC,qBACA,mBACA,YACA,gBAED,0CACC,YACA,gBAED,mBACC,sCACA,sEACA,eACA,kBACA,WACA,YACA,YACA,qBACA,kBAEA,yCACC,gBAGF,yEACC,wBACA,SACA,UACA,kBACA,gBACA,8CAED,0BACC,QACA,UACA,gBACA,mBACA,mBAED,gCACC,wCACA,kBACA,cACA,YAED,gCACC,kBACA,6BAED,4BACC,cAED,2BACC,aAGD,yBACC,yBACA,4BAGD,uBACC,2BACA,yBACA,wBACA,sBACA,qBACA,iBACA,mBAGD,0HAGC,8BACA,4BACA,2BACA,yBACA,wBACA,oBAED,0CACC,cAED,6BACC,WAED,0BACC,eACA,gBAED,+CACC,iBAED,sCACC,YAED,gCACC,mBACA,6BAED,iCACC,gBAED,4CACC,aAED,iCACC,WACA,YAED,2CACC,WACA,qBACA,WAED,6BACC,WACA,YACA,uBACA,4BACA,0BACA,WAGD,qEAEC,WACA,UAED,kCACC,gBACA,iBAED,sDACC,WAED,sCACC,YAED,iCACC,sBACA,kBACA,SAED,sCACC,sBAGD,gCACC,WACA,iBAEA,wCACC,WAIF,mBACC,0CACA,uCACA,qCACA,kCAGD,sCACE,4BACA,qCAEF,mCACE,4BACA,qCAEF,iCACE,4BACA,qCAEF,8BACE,4BACA","file":"upload.css"}

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;

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 {

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 {

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;

apps/settings/src/components/BasicSettings/BackgroundJob.vue

@@ -196,7 +196,7 @@ 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;
 }
@@ -204,7 +204,7 @@ 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-warning);
 	width: initial;
 }

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;

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>

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

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

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 {

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)
 	}
 }
 

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 {

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 {

core/css/header.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["header.scss","variables.scss"],"names":[],"mappings":"AAiBA,mBAEC,yBACA,sBACA,qBACA,6PACC,aAGD,+QACC,YACA,kBACA,2BACA,WACA,WACA,kBACA,2CACA,SACA,UAGD,gLACC,WAIA,kPACC,WAGD,+HACC,SAOH,+DAGC,oBACA,kBACA,MACA,WACA,aACA,OC2Ce,KD1Cf,sBACA,8BAID,WACC,cACA,kBACA,kBACA,wBACA,sBACA,UACA,mBACA,aACA,eACA,gBACA,WAEA,mCACC,UAaD,gCACC,8CACA,sDACA,yCACA,sBACA,aACA,kBACA,gBAfD,gBACA,oCAgBC,UACA,SACA,SACA,gBAEA,kDACC,aAID,sCACC,gCACA,iDACA,YACA,YACA,SACA,QACA,kBACA,oBACA,WAGD,uEAEC,iCAzCF,gBACA,oCA4CA,cACC,oBACA,yFACA,4BACA,wBACA,2BACA,WACA,kBACA,UACA,QACA,WAEA,gFAGD,kCACC,aACA,mBACA,cAGD,sFAEC,oBACA,mBAGD,0CACC,SACA,mBACA,YAGD,4CACC,yBACA,cAKA,qDAEC,YACA,kBACA,6EACC,aACA,uBACA,mBACA,MC3EY,KD4EZ,YACA,eACA,YACA,UACA,aAEA,yFACC,UAGD,yGACC,aASL,0CACC,YAKD,gBACC,gCACA,eACA,iBACA,SACA,UACA,kBACA,gBACA,uBAEA,cAGD,kBACC,gCACA,kBACA,gBACA,eACA,iBACA,gBACA,uBAID,cACC,kBACA,gBACA,aACA,WACA,SACA,aACA,aACA,eACA,SAEA,2BACC,IC1Ic,KDiJf,gDACC,mBACA,eAED,gJAEC,qBACA,YACA","file":"header.css"}
+{"version":3,"sourceRoot":"","sources":["header.scss","variables.scss"],"names":[],"mappings":"AAiBA,mBAEC,yBACA,sBACA,qBACA,6PACC,aAGD,+QACC,YACA,kBACA,2BACA,WACA,WACA,kBACA,mDACA,SACA,UAGD,gLACC,WAIA,kPACC,WAGD,+HACC,SAOH,+DAGC,oBACA,kBACA,MACA,WACA,aACA,OC2Ce,KD1Cf,sBACA,8BAID,WACC,cACA,kBACA,kBACA,wBACA,sBACA,UACA,mBACA,aACA,eACA,gBACA,WAEA,mCACC,UAaD,gCACC,8CACA,sDACA,yCACA,sBACA,aACA,kBACA,gBAfD,gBACA,oCAgBC,UACA,SACA,SACA,gBAEA,kDACC,aAID,sCACC,gCACA,iDACA,YACA,YACA,SACA,QACA,kBACA,oBACA,WAGD,uEAEC,iCAzCF,gBACA,oCA4CA,cACC,oBACA,yFACA,4BACA,wBACA,2BACA,WACA,kBACA,UACA,QACA,WAEA,gFAGD,kCACC,aACA,mBACA,cAGD,sFAEC,oBACA,mBAGD,0CACC,SACA,mBACA,YAGD,4CACC,yBACA,cAKA,qDAEC,YACA,kBACA,6EACC,aACA,uBACA,mBACA,MC3EY,KD4EZ,YACA,eACA,YACA,UACA,aAEA,yFACC,UAGD,yGACC,aASL,0CACC,YAKD,gBACC,wCACA,eACA,iBACA,SACA,UACA,kBACA,gBACA,uBAEA,cAGD,kBACC,wCACA,kBACA,gBACA,eACA,iBACA,gBACA,uBAID,cACC,kBACA,gBACA,aACA,WACA,SACA,aACA,aACA,eACA,SAEA,2BACC,IC1Ic,KDiJf,gDACC,mBACA,eAED,gJAEC,qBACA,YACA","file":"header.css"}

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;

core/css/inputs.scss

@@ -88,7 +88,7 @@ button:not(
 			color: var(--color-text-light);
 		}
 		&:focus-visible {
-			box-shadow: 0 0 0 2px var(--color-primary);
+			box-shadow: 0 0 0 2px var(--color-primary-element);
 		}
 	}
 	&:disabled {
@@ -107,13 +107,13 @@ button:not(
 	&.primary {
 		background-color: var(--color-primary-element);
 		border-color: var(--color-primary-element);
-		color: var(--color-primary-text);
+		color: var(--color-primary-element-text);
 		cursor: pointer;
 
 		/* Apply border to primary button if on log in page (and not in a dark container) or if in header */
 		#body-login :not(.body-login-container) &,
 		#header & {
-			border-color: var(--color-primary-text);
+			border-color: var(--color-primary-element-text);
 		}
 
 		&:not(:disabled) {
@@ -592,7 +592,7 @@ div.select2-container-multi {
 		padding: 6px;
 		min-height: 44px;
 		&:focus-within {
-			border-color: var(--color-primary)
+			border-color: var(--color-primary-element)
 		}
 		.select2-search-choice {
 			line-height: 20px;
@@ -643,7 +643,7 @@ div.select2-container {
 		padding: 6px 12px;
 		min-height: 44px;
 		&:focus-within {
-			border-color: var(--color-primary)
+			border-color: var(--color-primary-element)
 		}
 		.select2-search-choice {
 			line-height: 20px;
@@ -779,12 +779,12 @@ progress:not(.vue) {
 	}
 	&::-moz-progress-bar {
 		border-radius: var(--border-radius);
-		background: var(--color-primary);
+		background: var(--color-primary-element);
 		transition: 250ms all ease-in-out;
 	}
 	&::-webkit-progress-value {
 		border-radius: var(--border-radius);
-		background: var(--color-primary);
+		background: var(--color-primary-element);
 		transition: 250ms all ease-in-out;
 	}
 }

core/css/public.css

@@ -1 +1 @@
-#body-public .header-right #header-primary-action a{color:var(--color-primary-text)}#body-public .header-right #header-secondary-action ul li{min-width:270px}#body-public .header-right #header-secondary-action #header-actions-toggle{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0);filter:var(--background-invert-if-dark)}#body-public .header-right #header-secondary-action #header-actions-toggle:hover,#body-public .header-right #header-secondary-action #header-actions-toggle:focus,#body-public .header-right #header-secondary-action #header-actions-toggle:active{opacity:1}#body-public .header-right #header-secondary-action #external-share-menu-item form{display:flex}#body-public .header-right #header-secondary-action #external-share-menu-item .hidden{display:none}#body-public .header-right #header-secondary-action #external-share-menu-item #save-button-confirm{flex-grow:0}#body-public #content{min-height:calc(100% - 65px)}#body-public.layout-base #content{padding-top:0}#body-public p.info{margin:20px auto;text-shadow:0 0 2px rgba(0,0,0,.4);-moz-user-select:none;-ms-user-select:none;user-select:none}#body-public p.info,#body-public form fieldset legend,#body-public #datadirContent label,#body-public form fieldset .warning-info,#body-public form input[type=checkbox]+label{text-align:center}#body-public footer{position:fixed;display:flex;align-items:center;justify-content:center;height:65px;flex-direction:column;bottom:0;width:calc(100% - 16px);margin:8px;background-color:var(--color-main-background);border-radius:var(--border-radius-large)}#body-public footer p{text-align:center;color:var(--color-text-lighter)}#body-public footer p a{color:var(--color-text-lighter);font-weight:bold;white-space:nowrap;padding:10px;margin:-10px;line-height:200%}/*# sourceMappingURL=public.css.map */
+#body-public .header-right #header-primary-action a{color:var(--color-primary-element-text)}#body-public .header-right #header-secondary-action ul li{min-width:270px}#body-public .header-right #header-secondary-action #header-actions-toggle{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0);filter:var(--background-invert-if-dark)}#body-public .header-right #header-secondary-action #header-actions-toggle:hover,#body-public .header-right #header-secondary-action #header-actions-toggle:focus,#body-public .header-right #header-secondary-action #header-actions-toggle:active{opacity:1}#body-public .header-right #header-secondary-action #external-share-menu-item form{display:flex}#body-public .header-right #header-secondary-action #external-share-menu-item .hidden{display:none}#body-public .header-right #header-secondary-action #external-share-menu-item #save-button-confirm{flex-grow:0}#body-public #content{min-height:calc(100% - 65px)}#body-public.layout-base #content{padding-top:0}#body-public p.info{margin:20px auto;text-shadow:0 0 2px rgba(0,0,0,.4);-moz-user-select:none;-ms-user-select:none;user-select:none}#body-public p.info,#body-public form fieldset legend,#body-public #datadirContent label,#body-public form fieldset .warning-info,#body-public form input[type=checkbox]+label{text-align:center}#body-public footer{position:fixed;display:flex;align-items:center;justify-content:center;height:65px;flex-direction:column;bottom:0;width:calc(100% - 16px);margin:8px;background-color:var(--color-main-background);border-radius:var(--border-radius-large)}#body-public footer p{text-align:center;color:var(--color-text-lighter)}#body-public footer p a{color:var(--color-text-lighter);font-weight:bold;white-space:nowrap;padding:10px;margin:-10px;line-height:200%}/*# sourceMappingURL=public.css.map */

core/css/public.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["public.scss"],"names":[],"mappings":"AAKE,oDACC,gCAIA,0DACC,gBAED,2EACC,+BACA,2BACA,wCAEA,oPAGC,UAID,mFACC,aAED,sFACC,aAED,mGACC,YAMJ,sBAEC,6BAKD,kCACC,cAGD,oBACC,iBACA,mCACA,sBACA,qBACA,iBAED,+KAIC,kBAID,oBACC,eACA,aACA,mBACA,uBACA,OArEc,KAsEd,sBACA,SACA,wBACA,WACA,8CACA,yCACA,sBACC,kBACA,gCACA,wBACC,gCACA,iBACA,mBAEA,aACA,aACA","file":"public.css"}
+{"version":3,"sourceRoot":"","sources":["public.scss"],"names":[],"mappings":"AAKE,oDACC,wCAIA,0DACC,gBAED,2EACC,+BACA,2BACA,wCAEA,oPAGC,UAID,mFACC,aAED,sFACC,aAED,mGACC,YAMJ,sBAEC,6BAKD,kCACC,cAGD,oBACC,iBACA,mCACA,sBACA,qBACA,iBAED,+KAIC,kBAID,oBACC,eACA,aACA,mBACA,uBACA,OArEc,KAsEd,sBACA,SACA,wBACA,WACA,8CACA,yCACA,sBACC,kBACA,gCACA,wBACC,gCACA,iBACA,mBAEA,aACA,aACA","file":"public.css"}

core/css/public.scss

@@ -4,7 +4,7 @@ $footer-height: 65px;
 	.header-right {
 
 		#header-primary-action a {
-			color: var(--color-primary-text);
+			color: var(--color-primary-element-text);
 		}
 
 		#header-secondary-action {

core/css/styles.scss

@@ -36,7 +36,7 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr
 /** Let vue apps handle the focus themselves */
 .content:not(#content-vue) :focus-visible,
 .app-navigation:not(#app-navigation-vue) :focus-visible {
-	box-shadow: inset 0 0 0 2px var(--color-primary);
+	box-shadow: inset 0 0 0 2px var(--color-primary-element);
 	outline: none;
 }
 
@@ -140,7 +140,7 @@ body {
 	z-index: 9000;
 	text-align: center;
 	background-color: var(--color-background-darker);
-	color: var(--color-primary-text);
+	color: var(--color-primary-element-text);
 	line-height: 125%;
 	font-size: 24px;
 	div {
@@ -151,7 +151,7 @@ body {
 		margin: 0px auto;
 	}
 	a {
-		color: var(--color-primary-text);
+		color: var(--color-primary-element-text);
 		border-bottom: 2px dotted var(--color-main-background);
 		&:hover, &:focus {
 			color: var(--color-primary-element-text-dark);
@@ -186,7 +186,7 @@ body {
 
 ::selection {
 	background-color: var(--color-primary-element);
-	color: var(--color-primary-text);
+	color: var(--color-primary-element-text);
 }
 
 
@@ -266,7 +266,7 @@ body {
 	opacity: .8;
 }
 #show:focus-visible + label, #dbpassword-toggle:focus-visible + label, #personal-show:focus-visible + label {
-	box-shadow: var(--color-primary) 0 0 0 2px;
+	box-shadow: var(--color-primary-element) 0 0 0 2px;
 	opacity: 1;
 	border-radius: 9999px;
 }
@@ -519,8 +519,8 @@ code {
 			&.ui-datepicker-current-day a.ui-state-active,
 			.ui-state-hover,
 			.ui-state-focus {
-				background-color: var(--color-primary);
-				color: var(--color-primary-text);
+				background-color: var(--color-primary-element);
+				color: var(--color-primary-element-text);
 				font-weight: bold;
 			}
 
@@ -591,8 +591,8 @@ code {
 			&.ui-timepicker-minute-cell a.ui-state-active,
 			.ui-state-hover,
 			.ui-state-focus {
-				background-color: var(--color-primary);
-				color: var(--color-primary-text);
+				background-color: var(--color-primary-element);
+				color: var(--color-primary-element-text);
 				font-weight: bold;
 			}
 
@@ -684,7 +684,7 @@ code {
 		&:hover,
 		&:active,
 		&:focus {
-			box-shadow: 0 0 0 2px var(--color-primary);
+			box-shadow: 0 0 0 2px var(--color-primary-element);
 			opacity: 1;
 		}
 	}

core/css/toast.css

@@ -1 +1 @@
-.toastify.toast{min-width:200px;background:none;background-color:var(--color-main-background);color:var(--color-main-text);box-shadow:0 0 6px 0 var(--color-box-shadow);padding:12px;padding-right:34px;margin-top:45px;position:fixed;z-index:9000;border-radius:var(--border-radius)}.toastify.toast .toast-close{position:absolute;top:0;right:0;width:38px;opacity:.4;padding:12px;background-image:var(--icon-close-dark);background-position:center;background-repeat:no-repeat;text-indent:200%;white-space:nowrap;overflow:hidden}.toastify.toast .toast-close:hover,.toastify.toast .toast-close:focus,.toastify.toast .toast-close:active{cursor:pointer;opacity:1}.toastify.toastify-top{right:10px}.toast-error{border-left:3px solid var(--color-error)}.toast-info{border-left:3px solid var(--color-primary)}.toast-warning{border-left:3px solid var(--color-warning)}.toast-success{border-left:3px solid var(--color-success)}/*# sourceMappingURL=toast.css.map */
+.toastify.toast{min-width:200px;background:none;background-color:var(--color-main-background);color:var(--color-main-text);box-shadow:0 0 6px 0 var(--color-box-shadow);padding:12px;padding-right:34px;margin-top:45px;position:fixed;z-index:9000;border-radius:var(--border-radius)}.toastify.toast .toast-close{position:absolute;top:0;right:0;width:38px;opacity:.4;padding:12px;background-image:var(--icon-close-dark);background-position:center;background-repeat:no-repeat;text-indent:200%;white-space:nowrap;overflow:hidden}.toastify.toast .toast-close:hover,.toastify.toast .toast-close:focus,.toastify.toast .toast-close:active{cursor:pointer;opacity:1}.toastify.toastify-top{right:10px}.toast-error{border-left:3px solid var(--color-error)}.toast-info{border-left:3px solid var(--color-primary-element)}.toast-warning{border-left:3px solid var(--color-warning)}.toast-success{border-left:3px solid var(--color-success)}/*# sourceMappingURL=toast.css.map */

core/css/toast.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["toast.scss","functions.scss"],"names":[],"mappings":"AAGA,gBACC,gBACA,gBACA,8CACA,6BACA,6CACA,aACA,mBACA,gBACA,eACA,aACA,mCAEA,6BACC,kBACA,MACA,QACA,WACA,WACA,aC2CD,wCDzCC,2BACA,4BACA,iBACA,mBACA,gBAEA,0GACC,eACA,UAIH,uBACC,WAGD,aACC,yCAED,YACC,2CAED,eACC,2CAED,eACC","file":"toast.css"}
+{"version":3,"sourceRoot":"","sources":["toast.scss","functions.scss"],"names":[],"mappings":"AAGA,gBACC,gBACA,gBACA,8CACA,6BACA,6CACA,aACA,mBACA,gBACA,eACA,aACA,mCAEA,6BACC,kBACA,MACA,QACA,WACA,WACA,aC2CD,wCDzCC,2BACA,4BACA,iBACA,mBACA,gBAEA,0GACC,eACA,UAIH,uBACC,WAGD,aACC,yCAED,YACC,mDAED,eACC,2CAED,eACC","file":"toast.css"}

core/css/toast.scss

@@ -42,7 +42,7 @@
 	border-left: 3px solid var(--color-error);
 }
 .toast-info {
-	border-left: 3px solid var(--color-primary);
+	border-left: 3px solid var(--color-primary-element);
 }
 .toast-warning {
 	border-left: 3px solid var(--color-warning);

core/src/components/AppMenu.vue

@@ -161,7 +161,7 @@ $header-icon-size: 20px;
 				width: 12px;
 				height: 5px;
 				border-radius: 3px;
-				background-color: var(--color-primary-text);
+				background-color: var(--color-primary-element-text);
 				left: 50%;
 				bottom: 6px;
 				display: block;
@@ -178,7 +178,7 @@ $header-icon-size: 20px;
 			width: calc(100% - 4px);
 			height: calc(100% - 4px);
 			margin: 2px;
-			color: var(--color-primary-text);
+			color: var(--color-primary-element-text);
 			position: relative;
 		}
 
@@ -194,7 +194,7 @@ $header-icon-size: 20px;
 			opacity: 0;
 			position: absolute;
 			font-size: 12px;
-			color: var(--color-primary-text);
+			color: var(--color-primary-element-text);
 			text-align: center;
 			bottom: -5px;
 			left: 50%;
@@ -253,7 +253,7 @@ $header-icon-size: 20px;
 
 	/* Remove all background and align text color if not expanded */
 	&:not([aria-expanded="true"]) {
-		color: var(--color-primary-text);
+		color: var(--color-primary-element-text);
 
 		&:hover {
 			opacity: 1;
@@ -290,7 +290,7 @@ $header-icon-size: 20px;
 	content: "";
 	width: 8px;
 	height: 8px;
-	background-color: var(--color-primary-text);
+	background-color: var(--color-primary-element-text);
 	border-radius: 50%;
 	position: absolute;
 	display: block;

core/src/components/Profile/PrimaryActionButton.vue

@@ -61,7 +61,7 @@ export default {
 	computed: {
 		colorPrimaryText() {
 			// For some reason the returned string has prepended whitespace
-			return getComputedStyle(document.body).getPropertyValue('--color-primary-text').trim()
+			return getComputedStyle(document.body).getPropertyValue('--color-primary-element-text').trim()
 		},
 	},
 }
@@ -77,7 +77,7 @@ export default {
 		line-height: 44px;
 		text-align: center;
 		border-radius: var(--border-radius-pill);
-		color: var(--color-primary-text);
+		color: var(--color-primary-element-text);
 		background-color: var(--color-primary-element);
 		overflow: hidden;
 		white-space: nowrap;

core/src/jquery/css/jquery-ui-fixes.scss

@@ -52,7 +52,7 @@
 .ui-state-active,
 .ui-widget-content .ui-state-active,
 .ui-widget-header .ui-state-active {
-	border: 1px solid var(--color-primary);
+	border: 1px solid var(--color-primary-element);
 	background: var(--color-main-background) none;
 	font-weight: bold;
 	color: var(--color-main-text);
@@ -223,9 +223,9 @@
 }
 
 .ui-button.primary {
-	background-color: var(--color-primary);
-	color: var(--color-primary-text);
-	border: 1px solid var(--color-primary-text);
+	background-color: var(--color-primary-element);
+	color: var(--color-primary-element-text);
+	border: 1px solid var(--color-primary-element-text);
 }
 
 // fix ui-buttons on hover

core/src/views/Profile.vue

@@ -361,9 +361,9 @@ $content-max-width: 640px;
 				border: none;
 				margin-left: 18px;
 				margin-top: 2px;
-				color: var(--color-primary-element);
-				background-color: var(--color-primary-text);
-				box-shadow: 0 0 0 2px var(--color-primary-text);
+				color: var(--color-primary-element-text);
+				background-color: var(--color-primary-element);
+				box-shadow: 0 0 0 2px var(--color-primary-element);
 				border-radius: var(--border-radius-pill);
 				padding: 0 18px;
 				font-size: var(--default-font-size);
@@ -374,7 +374,7 @@ $content-max-width: 640px;
 				&:hover,
 				&:focus,
 				&:active {
-					color: var(--color-primary-element);
+					color: var(--color-primary-element-light-text);
 					background-color: var(--color-primary-element-light);
 				}
 

core/src/views/UserMenu.vue

@@ -85,7 +85,7 @@ export default {
 				opacity: 1 !important;
 				&:focus-visible {
 					.user-menu__avatar {
-						border: 2px solid var(--color-primary-text);
+						border: 2px solid var(--color-primary-element);
 					}
 				}
 			}
@@ -104,7 +104,7 @@ export default {
 		&:active,
 		&:focus,
 		&:hover {
-			border: 2px solid var(--color-primary-text);
+			border: 2px solid var(--color-primary-element-text);
 		}
 	}
 
@@ -138,13 +138,13 @@ export default {
 
 						&:focus-visible {
 							background-color: var(--color-background-hover) !important;
-							box-shadow: inset 0 0 0 2px var(--color-primary) !important;
+							box-shadow: inset 0 0 0 2px var(--color-primary-element) !important;
 							outline: none !important;
 						}
 
 						&:active,
 						&.active {
-							background-color: var(--color-primary-light);
+							background-color: var(--color-primary-element-light);
 						}
 
 						span {