Merge pull request #1661 from nextcloud/enh/noid/use-primary-element

Use the color-primary-element* variables

Author: szaimen

apps/viewer/src/components/ImageEditor.vue

@@ -72,16 +72,16 @@ export default {
 						'bg-secondary': 'var(--color-main-background)',
 						'bg-primary': 'var(--color-background-dark)',
 						// Accent
-						'accent-primary': 'var(--color-primary)',
+						'accent-primary': 'var(--color-primary-element)',
 						// Use by the slider
-						'border-active-bottom': 'var(--color-primary)',
+						'border-active-bottom': 'var(--color-primary-element)',
 						'icons-primary': 'var(--color-main-text)',
 						// Active state
 						'bg-primary-active': 'var(--color-background-dark)',
 						'bg-primary-hover': 'var(--color-background-hover)',
 						'accent-primary-active': 'var(--color-main-text)',
 						// Used by the save button
-						'accent-primary-hover': 'var(--color-primary)',
+						'accent-primary-hover': 'var(--color-primary-element)',
 
 						warning: 'var(--color-error)',
 					},
@@ -329,7 +329,7 @@ export default {
 		}
 	}
 	&[color='primary'] {
-		color: var(--color-primary-text)  !important;
+		color: var(--color-primary-element-text)  !important;
 		background-color: var(--color-primary-element) !important;
 		&:hover,
 		&:focus {

apps/viewer/src/components/Videos.vue

@@ -183,7 +183,7 @@ video {
 
 			&:hover,
 			&:focus {
-				color: var(--color-primary-text);
+				color: var(--color-primary-element-text);
 				background-color: var(--color-primary-element);
 			}
 		}

apps/viewer/src/mixins/Plyr.scss

@@ -1,7 +1,7 @@
 // Shared style between video and audio component for plyr
 & {
 	// https://github.com/sampotts/plyr#customizing-the-css
-	--plyr-color-main: var(--color-primary);
+	--plyr-color-main: var(--color-primary-element);
 	--plyr-control-icon-size: 18px;
 	--plyr-menu-background: var(--color-main-background);
 	--plyr-menu-color: var(--color-main-text);
@@ -46,7 +46,7 @@
 		&.plyr__control--overlaid {
 			width: var(--plyr-button-size);
 			height: var(--plyr-button-size);
-			color: var(--color-primary-text);
+			color: var(--color-primary-element-text);
 			background-color: var(--color-primary-element);
 
 			--plyr-button-size: 50px;