ov-components: clean css variables

openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.scss

@@ -19,7 +19,6 @@
 	max-width: 300px;
 	min-width: 300px;
 	border-radius: 10px;
-	box-shadow: var(--ov-shadow-low);
 }
 
 .form-btn {

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/avatar-profile/avatar-profile.component.scss

@@ -1,7 +1,7 @@
 .poster {
 	height: 100%;
 	width: 100%;
-	background-color: var(--ov-video-background);
+	background-color: var(--ov-video-background, var(--ov-primary-action-color));
 	position: absolute;
 	z-index: 888;
 	border-radius: var(--ov-video-radius);

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/media-element/media-element.component.scss

@@ -9,5 +9,5 @@ video {
 	border: 0;
 	font-size: 100%;
 	border-radius: var(--ov-video-radius);
-	background-color: var(--ov-video-background);
+	background-color: var(--ov-video-background, var(--ov-primary-action-color));
 }

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.scss

@@ -102,7 +102,6 @@ mat-expansion-panel {
 .input-container {
 	height: 25px;
 	display: flex;
-	background-color: var(--ov-input-background);
 	padding: 10px;
 	margin: 10px;
 	border-radius: var(--ov-surface-radius);

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss

@@ -171,7 +171,7 @@
 	}
 
 	.recording-card {
-		background: var(--ov-surface-container-color);
+		background: var(--ov-surface-container-color, var(--ov-surface-color));
 		border: 1px solid rgba(0, 102, 204, 0.1);
 		border-radius: var(--ov-surface-radius);
 		padding: 8px;

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss

@@ -88,7 +88,7 @@
 				aspect-ratio: 4/3;
 				border-radius: var(--ov-surface-radius) var(--ov-surface-radius) 0 0;
 				overflow: hidden;
-				background: var(--ov-video-background);
+				background: var(--ov-video-background, var(--ov-primary-action-color));
 
 				.video-frame {
 					width: 100%;
@@ -184,7 +184,6 @@
 
 						.mat-mdc-text-field-wrapper {
 							border-radius: var(--ov-surface-radius);
-							background-color: var(--ov-input-background, #f8f9fa);
 							border: 1px solid var(--ov-border-color, #e0e0e0);
 							transition: all 0.2s ease;
 

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.scss

@@ -85,7 +85,7 @@
 	width: 100%;
 	height: 100%;
 	z-index: 1000;
-	background-color: var(--ov-video-background);
+	background-color: var(--ov-video-background, var(--ov-primary-action-color));
 	opacity: 80%;
 	position: absolute;
 }
@@ -112,10 +112,10 @@
 }
 
 ::ng-deep .mat-mdc-input-element {
-	caret-color: var(--ov-video-background);
+	caret-color: var(--ov-video-background, var(--ov-primary-action-color));
 }
 ::ng-deep .mat-primary .mat-mdc-option.mat-selected:not(.mat-option-disabled) {
-	color: var(--ov-video-background);
+	color: var(--ov-video-background, var(--ov-primary-action-color)) !important;
 }
 
 /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/selector-shared.scss

@@ -15,7 +15,6 @@
 			border-radius: 12px;
 			overflow: hidden;
 			transition: all 0.2s ease;
-			box-shadow: var(--ov-shadow-low);
 
 			.toggle-section {
 				display: flex;
@@ -47,12 +46,6 @@
 					}
 				}
 
-				&[disabled] {
-					background: var(--ov-gray-alpha-50);
-					color: var(--ov-gray-alpha-80);
-					cursor: not-allowed;
-				}
-
 				mat-icon {
 					font-size: 20px;
 					width: 20px;
@@ -70,7 +63,6 @@
 				height: 48px;
 				border: none;
 				background: transparent;
-				border-left: 1px solid var(--ov-black-alpha-10);
 				border-radius: 0;
 				padding: 0;
 				color: var(--ov-text-secondary-color, #666);

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss

@@ -40,7 +40,7 @@
 
 // Video-specific additional styles
 ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
-	border-bottom-color: var(--ov-primary-action-color-lighter) !important;
+	border-bottom-color: var(--ov-primary-action-color) !important;
 }
 
 ::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple) {

openvidu-components-angular/projects/openvidu-components-angular/src/lib/config/THEME.md

@@ -134,7 +134,6 @@ this.themeService.currentVariables$.subscribe(variables => {
 | `--ov-background-color` | Primary background color | `#ffffff` | `#1f2020` |
 | `--ov-surface-color` | Surface/card background | `#ffffff` | `#2d2d2d` |
 | `--ov-surface-container-color` | Container surfaces | `#f8f9fa` | `#3a3a3a` |
-| `--ov-surface-container-high-color` | Elevated surfaces | `#f0f0f0` | `#474747` |
 
 ### Action Colors
 
@@ -167,8 +166,6 @@ this.themeService.currentVariables$.subscribe(variables => {
 | Variable | Description | Light Default | Dark Default |
 |----------|-------------|---------------|--------------|
 | `--ov-hover-color` | Hover background | `#f8f9fa` | `#4a4a4a` |
-| `--ov-active-color` | Active state | `rgba(66, 133, 244, 0.08)` | `rgba(66, 133, 244, 0.2)` |
-| `--ov-focus-color` | Focus ring color | `#4285f4` | `#5294ff` |
 | `--ov-disabled-background` | Disabled background | `#f8f9fa` | `#3a3a3a` |
 | `--ov-disabled-border-color` | Disabled borders | `#dee2e6` | `#555555` |
 
@@ -176,9 +173,7 @@ this.themeService.currentVariables$.subscribe(variables => {
 
 | Variable | Description | Light Default | Dark Default |
 |----------|-------------|---------------|--------------|
-| `--ov-input-background` | Input backgrounds | `#ffffff` | `#3a3a3a` |
 | `--ov-border-color` | Default borders | `#ced4da` | `#555555` |
-| `--ov-border-focus-color` | Focused borders | `#4285f4` | `#5294ff` |
 
 ### Layout & Spacing
 
@@ -205,17 +200,8 @@ this.themeService.currentVariables$.subscribe(variables => {
 | Variable | Description | Default |
 |----------|-------------|---------|
 | `--ov-video-background` | Video element background | `#000000` |
-| `--ov-audio-wave-color` | Audio wave visualization | `var(--ov-accent-action-color)` |
 | `--ov-captions-height` | Captions panel height | `250px` |
 
-### Shadow & Elevation
-
-| Variable | Description | Default |
-|----------|-------------|---------|
-| `--ov-shadow-low` | Low elevation shadow | `0 2px 8px rgba(0, 0, 0, 0.1)` |
-| `--ov-shadow-medium` | Medium elevation shadow | `0 4px 20px rgba(0, 0, 0, 0.1)` |
-| `--ov-shadow-high` | High elevation shadow | `0 8px 32px rgba(0, 0, 0, 0.12)` |
-| `--ov-border-shadow` | Border shadow | `1px 1px 5px 0px rgba(0, 0, 0, 0.2)` |
 
 ## Angular Material Integration
 

openvidu-components-angular/projects/openvidu-components-angular/src/lib/config/theme.scss

@@ -7,11 +7,9 @@
 		--ov-background-color: #{mat.get-theme-color($theme, background)};
 		--ov-surface-color: #{mat.get-theme-color($theme, surface)};
 		--ov-surface-container-color: #{mat.get-theme-color($theme, surface-container)};
-		--ov-surface-container-high-color: #{mat.get-theme-color($theme, surface-container-high)};
 
 		// === Action Colors (Primary, Secondary, Accent) ===
 		--ov-primary-action-color: #{mat.get-theme-color($theme, primary)};
-		--ov-primary-action-color-lighter: #{mat.get-theme-color($theme, primary-container)};
 		--ov-secondary-action-color: #{mat.get-theme-color($theme, secondary)};
 		--ov-accent-action-color: #{mat.get-theme-color($theme, tertiary)};
 
@@ -28,15 +26,11 @@
 
 		// === Interactive States ===
 		--ov-hover-color: #{mat.get-theme-color($theme, surface-container-highest)};
-		--ov-active-color: #{mat.get-theme-color($theme, primary-container)};
-		--ov-focus-color: #{mat.get-theme-color($theme, primary)};
 		--ov-disabled-background: #{mat.get-theme-color($theme, surface-container-low)};
 		--ov-disabled-border-color: #{mat.get-theme-color($theme, outline-variant)};
 
 		// === Input & Form Colors ===
-		--ov-input-background: #{mat.get-theme-color($theme, surface-container)};
 		--ov-border-color: #{mat.get-theme-color($theme, outline-variant)};
-		--ov-border-focus-color: #{mat.get-theme-color($theme, primary)};
 	}
 }
 
@@ -47,11 +41,9 @@
 		--ov-background-color: #1f2020;
 		--ov-surface-color: #2d2d2d;
 		--ov-surface-container-color: #3a3a3a;
-		--ov-surface-container-high-color: #474747;
 
 		// === Action Colors ===
 		--ov-primary-action-color: #4a5a5d;
-		--ov-primary-action-color-lighter: #5a6a6d;
 		--ov-secondary-action-color: #e1e1e1;
 		--ov-accent-action-color: #00b3d6;
 
@@ -68,15 +60,11 @@
 
 		// === Interactive States ===
 		--ov-hover-color: #4a4a4a;
-		--ov-active-color: rgba(66, 133, 244, 0.2);
-		--ov-focus-color: #5294ff;
 		--ov-disabled-background: #3a3a3a;
 		--ov-disabled-border-color: #555555;
 
 		// === Input & Form Colors ===
-		--ov-input-background: #3a3a3a;
 		--ov-border-color: #555555;
-		--ov-border-focus-color: #5294ff;
 	}
 }
 
@@ -87,11 +75,9 @@
 		--ov-background-color: #ffffff;
 		--ov-surface-color: #ffffff;
 		--ov-surface-container-color: #f8f9fa;
-		--ov-surface-container-high-color: #f0f0f0;
 
 		// === Action Colors ===
 		--ov-primary-action-color: #273235;
-		--ov-primary-action-color-lighter: #394649;
 		--ov-secondary-action-color: #6c757d;
 		--ov-accent-action-color: #0089ab;
 
@@ -108,15 +94,11 @@
 
 		// === Interactive States ===
 		--ov-hover-color: #f8f9fa;
-		--ov-active-color: rgba(66, 133, 244, 0.08);
-		--ov-focus-color: #4285f4;
 		--ov-disabled-background: #f8f9fa;
 		--ov-disabled-border-color: #dee2e6;
 
 		// === Input & Form Colors ===
-		--ov-input-background: #ffffff;
 		--ov-border-color: #ced4da;
-		--ov-border-focus-color: #4285f4;
 	}
 }
 

openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/theme.model.ts

@@ -17,11 +17,9 @@ export interface OpenViduThemeVariables {
 	'--ov-background-color'?: string;
 	'--ov-surface-color'?: string;
 	'--ov-surface-container-color'?: string;
-	'--ov-surface-container-high-color'?: string;
 
 	// === Action Colors ===
 	'--ov-primary-action-color'?: string;
-	'--ov-primary-action-color-lighter'?: string;
 	'--ov-secondary-action-color'?: string;
 	'--ov-accent-action-color'?: string;
 
@@ -38,15 +36,11 @@ export interface OpenViduThemeVariables {
 
 	// === Interactive States ===
 	'--ov-hover-color'?: string;
-	'--ov-active-color'?: string;
-	'--ov-focus-color'?: string;
 	'--ov-disabled-background'?: string;
 	'--ov-disabled-border-color'?: string;
 
 	// === Input & Form Colors ===
-	'--ov-input-background'?: string;
 	'--ov-border-color'?: string;
-	'--ov-border-focus-color'?: string;
 
 	// === Layout & Spacing ===
 	'--ov-toolbar-buttons-radius'?: string;
@@ -64,7 +58,6 @@ export interface OpenViduThemeVariables {
 
 	// === Video/Media Specific ===
 	'--ov-video-background'?: string;
-	'--ov-audio-wave-color'?: string;
 	'--ov-captions-height'?: string;
 
 	// Allow for custom variables
@@ -79,9 +72,7 @@ export const OPENVIDU_COMPONENTS_LIGHT_THEME: OpenViduThemeVariables = {
 	'--ov-background-color': '#f5f5f5',
 	'--ov-surface-color': '#ffffff',
 	'--ov-surface-container-color': '#f8f9fa',
-	'--ov-surface-container-high-color': '#f0f0f0',
 	'--ov-primary-action-color': '#d6d6d6ff',
-	'--ov-primary-action-color-lighter': '#f3f3f3',
 	'--ov-secondary-action-color': '#d6d6d6ff',
 	'--ov-accent-action-color': '#a9e3f0ff',
 	'--ov-error-color': '#dc3545',
@@ -92,13 +83,9 @@ export const OPENVIDU_COMPONENTS_LIGHT_THEME: OpenViduThemeVariables = {
 	'--ov-text-secondary-color': '#6c757d',
 	'--ov-text-disabled-color': '#adb5bd',
 	'--ov-hover-color': '#f8f9fa',
-	'--ov-active-color': '#4285f4',
-	'--ov-focus-color': '#4285f4',
 	'--ov-disabled-background': '#f8f9fa',
 	'--ov-disabled-border-color': '#dee2e6',
-	'--ov-input-background': '#ffffff',
 	'--ov-border-color': '#ced4da',
-	'--ov-border-focus-color': '#4285f4',
 	'--ov-activity-status-color': '#c8cdd6',
 	'--ov-broadcasting-color': '#8837f1',
 	'--ov-video-background': '#000000',
@@ -117,9 +104,7 @@ export const OPENVIDU_COMPONENTS_DARK_THEME: OpenViduThemeVariables = {
 	'--ov-background-color': '#1f2020',
 	'--ov-surface-color': '#2d2d2d',
 	'--ov-surface-container-color': '#3a3a3a',
-	'--ov-surface-container-high-color': '#474747',
 	'--ov-primary-action-color': '#4a4e4e',
-	'--ov-primary-action-color-lighter': '#c2c2c2',
 	'--ov-secondary-action-color': '#5c5c5cff',
 	'--ov-accent-action-color': '#009ab9',
 	'--ov-error-color': '#dc3545',
@@ -130,13 +115,9 @@ export const OPENVIDU_COMPONENTS_DARK_THEME: OpenViduThemeVariables = {
 	'--ov-text-secondary-color': '#b3b3b3',
 	'--ov-text-disabled-color': '#666666',
 	'--ov-hover-color': '#4a4a4a',
-	'--ov-active-color': '#4285f4',
-	'--ov-focus-color': '#5294ff',
 	'--ov-disabled-background': '#3a3a3a',
 	'--ov-disabled-border-color': '#555555',
-	'--ov-input-background': '#3a3a3a',
 	'--ov-border-color': '#555555',
-	'--ov-border-focus-color': '#5294ff',
 	'--ov-activity-status-color': '#c8cdd6',
 	'--ov-broadcasting-color': '#9d5af3',
 	'--ov-video-background': '#000000',

openvidu-components-angular/src/styles.scss

@@ -40,11 +40,9 @@ body {
 	--ov-background-color: var(--mat-sys-background, #1f2020);
 	--ov-surface-color: var(--mat-sys-surface, #ffffff);
 	--ov-surface-container-color: var(--mat-sys-surface-container, #f3f3f3);
-	--ov-surface-container-high-color: var(--mat-sys-surface-container-high, #e6e6e6);
 
 	// === Action Colors (Primary, Secondary, Accent) ===
 	--ov-primary-action-color: var(--mat-sys-primary, #273235);
-	--ov-primary-action-color-lighter: var(--mat-sys-primary-container, #394649);
 	--ov-secondary-action-color: var(--mat-sys-secondary, #f1f1f1);
 	--ov-accent-action-color: var(--mat-sys-tertiary, #0089ab);
 
@@ -61,21 +59,11 @@ body {
 
 	// === Interactive States ===
 	--ov-hover-color: var(--mat-sys-surface-container-highest, #f5f5f5);
-	--ov-active-color: var(--mat-sys-primary-container, rgba(66, 133, 244, 0.08));
-	--ov-focus-color: var(--mat-sys-primary, #4285f4);
 	--ov-disabled-background: var(--mat-sys-surface-container-low, #f5f5f5);
 	--ov-disabled-border-color: var(--mat-sys-outline-variant, #ddd);
 
 	// === Input & Form Colors ===
-	--ov-input-background: var(--mat-sys-surface-container, #f8f9fa);
 	--ov-border-color: var(--mat-sys-outline-variant, #e0e0e0);
-	--ov-border-focus-color: var(--mat-sys-primary, #4285f4);
-
-	// === Shadow & Elevation ===
-	--ov-shadow-low: 0 2px 8px rgba(0, 0, 0, 0.1);
-	--ov-shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.1);
-	--ov-shadow-high: 0 8px 32px rgba(0, 0, 0, 0.12);
-	--ov-border-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.2);
 
 	// === Layout & Spacing ===
 	--ov-toolbar-buttons-radius: 50%;
@@ -91,20 +79,8 @@ body {
 	--ov-selection-color-btn: #afafaf;
 	--ov-activity-status-color: #afafaf;
 
-	// === Alpha/Transparency Variants ===
-	--ov-primary-alpha-08: rgba(66, 133, 244, 0.08);
-	--ov-primary-alpha-10: rgba(66, 133, 244, 0.1);
-	--ov-error-alpha-10: rgba(211, 47, 47, 0.1);
-	--ov-warning-alpha-10: rgba(255, 193, 7, 0.1);
-	--ov-warning-alpha-30: rgba(255, 193, 7, 0.3);
-	--ov-black-alpha-10: rgba(0, 0, 0, 0.1);
-	--ov-white-alpha-70: rgba(255, 255, 255, 0.7);
-	--ov-white-alpha-90: rgba(255, 255, 255, 0.9);
-	--ov-gray-alpha-50: rgba(150, 150, 150, 0.5);
-	--ov-gray-alpha-80: rgba(150, 150, 150, 0.8);
 
 	// === Video/Media Specific ===
 	--ov-video-background: #000000;
-	--ov-audio-wave-color: var(--ov-accent-action-color);
 	--ov-captions-height: 250px;
 }