diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.scss index 24e29e70..4476300f 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.scss +++ b/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 { diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/avatar-profile/avatar-profile.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/avatar-profile/avatar-profile.component.scss index 9793b05d..9ec7407b 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/avatar-profile/avatar-profile.component.scss +++ b/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); diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/media-element/media-element.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/media-element/media-element.component.scss index ccb06802..7e493214 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/media-element/media-element.component.scss +++ b/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)); } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.scss index da2a55c4..c14c4f7f 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.scss +++ b/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); diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss index 0beec416..76fd4cd1 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss +++ b/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; diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss index e62c2405..1599c825 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss +++ b/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; diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.scss index 2d7338c9..1e42bcaa 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.scss +++ b/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. */ diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/selector-shared.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/selector-shared.scss index c101c8ec..3eb31317 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/selector-shared.scss +++ b/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); diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss index daf3e5ed..798e878c 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss +++ b/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) { diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/config/THEME.md b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/config/THEME.md index 7f1c2194..75e8593f 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/config/THEME.md +++ b/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 diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/config/theme.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/config/theme.scss index dd0f7c50..4d4f3c65 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/config/theme.scss +++ b/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; } } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/theme.model.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/theme.model.ts index fa3b97c2..7ae8c867 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/models/theme.model.ts +++ b/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', diff --git a/openvidu-components-angular/src/styles.scss b/openvidu-components-angular/src/styles.scss index 65241dd5..1a0cdbd9 100644 --- a/openvidu-components-angular/src/styles.scss +++ b/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; }