ov-components: Updated css color variables

OpenVidu · Nov 5, 2024 · ada5984 · ada5984
1 parent 1d91d6f
commit ada5984
Show file tree

Hide file tree

Showing 37 changed files with 433 additions and 348 deletions.
diff --git a/openvidu-components-angular/e2e/webcomponent-app/index.html b/openvidu-components-angular/e2e/webcomponent-app/index.html
@@ -11,23 +11,23 @@
 
 		<style>
 			:root {
-				--ov-primary-color: #303030;
-				--ov-secondary-color: #3e3f3f;
-				--ov-tertiary-color: #598eff;
-				--ov-warn-color: #eb5144;
-				--ov-accent-color: #ffae35;
+				--ov-background-color: #303030;
+				--ov-secondary-action-color: #3e3f3f;
+				--ov-accent-action-color: #598eff;
+				--ov-error-color: #eb5144;
+				--ov-accent-action-color: #ffae35;
 				--ov-light-color: #e6e6e6;
 
-				--ov-logo-background-color: #3a3d3d;
-				--ov-text-color: #ffffff;
+				--ov-secondary-action-color: #3a3d3d;
+				--ov-text-primary-color: #ffffff;
 
-				--ov-panel-text-color: #1d1d1d;
-				--ov-panel-background: #ffffff;
+				--ov-text-primary-color: #1d1d1d;
+				--ov-surface-color: #ffffff;
 
 				--ov-buttons-radius: 50%;
 				--ov-leave-button-radius: 10px;
 				--ov-video-radius: 5px;
-				--ov-panel-radius: 5px;
+				--ov-surface-radius: 5px;
 			}
 		</style>
 	</head>

diff --git a/openvidu-components-angular/projects/openvidu-components-angular/README.md b/openvidu-components-angular/projects/openvidu-components-angular/README.md
@@ -54,24 +54,28 @@ You can also customize the styles in your `styles.scss` file:
 
 ```scss
 :root {
-	--ov-primary-color: #303030;
-	--ov-secondary-color: #3e3f3f;
-	--ov-tertiary-color: #598eff;
-	--ov-warn-color: #eb5144;
-	--ov-accent-color: #ffae35;
-	--ov-light-color: #e6e6e6;
+	/* Basic colors */
+	--ov-background-color: #303030; // Background color
+	--ov-surface-color: #ffffff; // Surfaces colors (panels, dialogs)
 
-	--ov-logo-background-color: #3a3d3d;
+	/* Text colors */
+	--ov-text-primary-color: #ffffff; // Text color over primary background
+	--ov-text-surface-color: #1d1d1d; // Text color over surface background
 
-	--ov-text-color: #ffffff;
+	/* Action colors */
+	--ov-primary-action-color: #273235; // Primary color for buttons, etc.
+	--ov-secondary-action-color: #f1f1f1; // Secondary color for buttons, etc.
+	--ov-accent-action-color: #0089ab; // Color for highlighted elements
 
-	--ov-panel-text-color: #1d1d1d;
-	--ov-panel-background: #ffffff;
+	/* Status colors */
+	--ov-error-color: #eb5144; // Error color
+	--ov-warn-color: #ffba53; // Warning color
 
+	/* Radius */
 	--ov-buttons-radius: 50%;
 	--ov-leave-button-radius: 10px;
 	--ov-video-radius: 5px;
-	--ov-panel-radius: 5px;
+	--ov-surface-radius: 5px;
 }
 ```
 

diff --git a/.../openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.scss b/.../openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.scss
@@ -4,16 +4,16 @@
 
 .header {
 	height: 50px;
-	background-color: var(--ov-secondary-color);
-	color: var(--ov-text-color);
+	background-color: var(--ov-secondary-action-color);
+	color: var(--ov-text-primary-color);
 }
 
 .logout-btn {
-	color: var(--ov-text-color);
+	color: var(--ov-text-primary-color);
 }
 
 .dashboard-body {
-	background-color: var(--ov-secondary-color);
+	background-color: var(--ov-secondary-action-color);
 	height: calc(100% - 75px);
 }
 .toolbar-spacer {
@@ -41,17 +41,17 @@
 
 #sort-menu-btn {
 	margin-left: 5px;
-	background-color: var(--ov-panel-background);
-	color: var(--ov-panel-text-color);
+	background-color: var(--ov-surface-color);
+	color: var(--ov-text-primary-color);
 }
 
 .search-bar {
 	height: 95%;
 	width: 30%;
 	display: flex;
-	background-color: var(--ov-panel-background);
+	background-color: var(--ov-surface-color);
 	padding: 0px 10px;
-	border-radius: var(--ov-panel-radius);
+	border-radius: var(--ov-surface-radius);
 }
 
 #search-input {
@@ -87,7 +87,7 @@
 }
 
 .recordings-container {
-	background-color: var(--ov-secondary-color);
+	background-color: var(--ov-secondary-action-color);
 	height: calc(100% - 50px);
 	overflow-y: auto;
 	overflow-x: hidden;
@@ -106,7 +106,7 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		background-color: var(--ov-panel-background);
+		background-color: var(--ov-surface-color);
 	}
 }
 
@@ -135,18 +135,18 @@
 	margin-right: -50%;
 	top: 50%;
 	left: 50%;
-	background-color: var(--ov-logo-background-color);
-	border-radius: var(--ov-panel-radius);
+	background-color: var(--ov-secondary-action-color);
+	border-radius: var(--ov-surface-radius);
 }
 
 .video-btns button #play {
-	color: var(--ov-text-color);
+	color: var(--ov-text-primary-color);
 }
 .video-btns button #download {
-	color: var(--ov-tertiary-color);
+	color: var(--ov-accent-action-color);
 }
 .video-btns button #delete {
-	color: var(--ov-warn-color);
+	color: var(--ov-error-color);
 }
 
 .video-info-container > div {
@@ -167,7 +167,7 @@
 
 .video-card-tag {
 	font-size: 13px;
-	color: var(--ov-panel-text-color);
+	color: var(--ov-text-primary-color);
 	font-weight: bold;
 }
 
@@ -204,16 +204,16 @@
     transform: translateX(-50%);
 
 	.load-more-btn {
-		background-color: var(--ov-panel-background);
-		color: var(--ov-panel-text-color);
-		border-radius: var(--ov-panel-radius);
+		background-color: var(--ov-surface-color);
+		color: var(--ov-text-primary-color);
+		border-radius: var(--ov-surface-radius);
 	}
 }
 
 .footer {
 	height: 25px;
-	background-color: var(--ov-primary-color);
-	color: var(--ov-text-color);
+	background-color: var(--ov-background-color);
+	color: var(--ov-text-primary-color);
 	position: absolute;
 	bottom: 0;
 	left: 0;
@@ -225,7 +225,7 @@
 	gap: 2px;
 }
 .footer a {
-	color: var(--ov-tertiary-color);
+	color: var(--ov-accent-action-color);
 	padding-left: 5px;
 }
 
@@ -234,7 +234,7 @@
 	width: 100%;
 	display: table;
 	text-align: center;
-	color: var(--ov-text-color);
+	color: var(--ov-text-primary-color);
 }
 /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
 ::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {

diff --git a/...projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.scss b/...projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.scss
@@ -1,20 +1,20 @@
 .header {
 	height: 50px;
-	background-color: var(--ov-primary-color);
-	color: var(--ov-text-color);
+	background-color: var(--ov-background-color);
+	color: var(--ov-text-primary-color);
 }
 
 .center-container {
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	height: 100vh;
-	background-color: var(--ov-secondary-color);
+	background-color: var(--ov-secondary-action-color);
 }
 
 .card-container {
 	text-align: center;
-	background-color: var(--ov-panel-background);
+	background-color: var(--ov-surface-color);
 	padding: 10px;
 	max-width: 300px;
 	min-width: 300px;
@@ -23,8 +23,8 @@
 }
 
 .form-btn {
-	background-color: var(--ov-tertiary-color) !important;
-	color: var(--ov-text-color) !important;
+	background-color: var(--ov-accent-action-color) !important;
+	color: var(--ov-text-primary-color) !important;
 }
 
 .form-field,
@@ -33,5 +33,5 @@
 }
 
 ::ng-deep .mat-mdc-progress-spinner {
-	--mdc-circular-progress-active-indicator-color: var(--ov-tertiary-color);
+	--mdc-circular-progress-active-indicator-color: var(--ov-accent-action-color);
 }
diff --git a/...jects/openvidu-components-angular/src/lib/components/audio-wave/audio-wave.component.scss b/...jects/openvidu-components-angular/src/lib/components/audio-wave/audio-wave.component.scss
@@ -23,13 +23,13 @@
 }
 
 .audio-container{
-	background-color: var(--ov-tertiary-color);
+	background-color: var(--ov-accent-action-color);
 	padding: 5px;
 	max-width: 15px;
 	max-height: 15px;
 	height: 15px;
 	width: 15px;
-	border-radius: var(--ov-video-radius);
+	border-radius: var(--ov-surface-radius);
 	display: flex;
 	justify-content: space-between;
 }
@@ -38,7 +38,7 @@
 	margin: auto;
 	height: 80%;
 	width: 3px;
-	background: var(--ov-text-color);
+	background: var(--ov-text-primary-color);
 	border-radius: 8px;
 }
 

diff --git a/...envidu-components-angular/src/lib/components/avatar-profile/avatar-profile.component.scss b/...envidu-components-angular/src/lib/components/avatar-profile/avatar-profile.component.scss
@@ -19,7 +19,7 @@
     height: 70px;
     width: 70px;
 	border-radius: var(--ov-video-radius);
-	border: 2px solid var(--ov-text-color);
+	border: 2px solid var(--ov-text-primary-color);
 	color: #000000;
 }
 

diff --git a/.../projects/openvidu-components-angular/src/lib/components/captions/captions.component.scss b/.../projects/openvidu-components-angular/src/lib/components/captions/captions.component.scss
@@ -29,7 +29,7 @@
 .error-container {
 	display: grid;
 	text-align: center;
-	color: var(--ov-text-color);
+	color: var(--ov-text-primary-color);
 	font-size: 18px;
 }
 
@@ -43,7 +43,7 @@ mat-spinner {
 }
 
 ::ng-deep .mat-mdc-progress-spinner {
-	--mdc-circular-progress-active-indicator-color: var(--ov-tertiary-color);
+	--mdc-circular-progress-active-indicator-color: var(--ov-accent-action-color);
 }
 
 /*
@@ -160,8 +160,8 @@ mat-spinner {
 }
 
 #caption-settings-btn {
-	color: var(--ov-text-color);
-	background-color: var(--ov-secondary-color);
+	color: var(--ov-text-primary-color);
+	background-color: var(--ov-secondary-action-color);
 }
 #caption-settings-icon {
 	font-size: 15px;
@@ -190,12 +190,12 @@ mat-spinner {
 
 .caption-text,
 #speaker {
-	color: var(--ov-text-color);
+	color: var(--ov-text-primary-color);
 	font-family: 'Roboto', arial, sans-serif;
 }
 
 .caption-text {
-	background-color: var(--ov-logo-background-color);
+	background-color: var(--ov-secondary-action-color);
 	padding: 4.5px;
 	line-height: 1.6;
 	word-break: break-word;

diff --git a/...ects/openvidu-components-angular/src/lib/components/dialogs/delete-recording.component.ts b/...ects/openvidu-components-angular/src/lib/components/dialogs/delete-recording.component.ts
@@ -7,13 +7,33 @@ import { MatDialogRef } from '@angular/material/dialog';
 @Component({
 	selector: 'app-delete-dialog',
 	template: `
-		<div mat-dialog-content>{{'PANEL.RECORDING.DELETE_QUESTION' | translate}}</div>
+		<div mat-dialog-content>{{ 'PANEL.RECORDING.DELETE_QUESTION' | translate }}</div>
 		<div mat-dialog-actions>
-			<button mat-button (click)="close()">{{'PANEL.RECORDING.CANCEL' | translate }}</button>
-			<button mat-button cdkFocusInitial (click)="close(true)" id="delete-recording-confirm-btn">{{'PANEL.RECORDING.DELETE' | translate}}</button>
+			<button mat-button [disableRipple]="true" (click)="close()">{{ 'PANEL.RECORDING.CANCEL' | translate }}</button>
+			<button [disableRipple]="true" mat-button cdkFocusInitial (click)="close(true)" id="delete-recording-confirm-btn">
+				{{ 'PANEL.RECORDING.DELETE' | translate }}
+			</button>
 		</div>
 	`,
-	styles: [``]
+	styles: [
+		`
+			::ng-deep .mat-mdc-dialog-surface {
+				background-color: var(--ov-surface-color);
+				border-radius: var(--ov-surface-radius);
+			}
+			#delete-recording-confirm-btn {
+				background-color: var(--ov-error-color);
+				color: var(--ov-text-primary-color);
+			}
+			.mat-mdc-button,
+			.mat-mdc-button:not(:disabled),
+			::ng-deep .mat-mdc-button .mat-mdc-button-persistent-ripple::before {
+				color: var(--ov-text-primary-color);
+				background-color: var(--ov-primary-action-color) !important;
+				border-radius: var(--ov-surface-radius);
+			}
+		`
+	]
 })
 export class DeleteDialogComponent {
 	constructor(public dialogRef: MatDialogRef<DeleteDialogComponent>) {}