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 d6cc49d5..9793b05d 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 @@ -20,7 +20,7 @@ width: 70px; border-radius: var(--ov-video-radius); border: 2px solid var(--ov-text-primary-color); - color: var(--ov-video-background); + color: var(--ov-video-background, var(--ov-text-primary-color)); } #poster-text { diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.scss index a4be27c3..29c01f03 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.scss @@ -12,12 +12,12 @@ padding: 3px; font-size: 11px; border-radius: var(--ov-surface-radius); - background-color: var(--ov-primary-action-color); + background-color: var(--ov-secondary-action-color); } .activity-icon { display: inherit; - background-color: var(--ov-primary-action-color); + background-color: var(--ov-secondary-action-color); border-radius: var(--ov-surface-radius); margin: 10px 0px !important; padding: 10px; 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 cde20948..3640e5ac 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 @@ -9,7 +9,7 @@ } #broadcasting-icon { - color: var(--ov-broadcasting-color) !important; + color: var(--ov-broadcasting-color, #5903ca) !important; } .broadcasting-duration { @@ -26,12 +26,12 @@ } .started { - background-color: var(--ov-broadcasting-color) !important; + background-color: var(--ov-broadcasting-color, #5903ca) !important; color: var(--ov-text-primary-color); } .activity-icon.started { - background-color: var(--ov-broadcasting-color) !important; + background-color: var(--ov-broadcasting-color, #5903ca) !important; color: var(--ov-text-primary-color); } 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 07f30254..5ff965d5 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 @@ -539,7 +539,7 @@ #start-recording-btn { width: 100%; background-color: var(--ov-primary-action-color); - color: var(--ov-text-surface-color); + color: var(--ov-text-primary-color); border-radius: var(--ov-surface-radius); } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.scss index e7712d61..33520888 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.scss @@ -22,8 +22,8 @@ .effect-button { margin: 5px; border-radius: var(--ov-surface-radius); - background-color: var(--ov-primary-action-color); - color: var(--ov-secondary-action-color); + background-color: var(--ov-secondary-action-color); + color: var(--ov-text-surface-color); width: 60px; height: 60px; line-height: inherit; diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.scss index 05eb9656..033cbbd6 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.scss @@ -27,8 +27,8 @@ .input-container { height: 65px; display: flex; - background-color: var(--ov-input-background); - border: 1px solid var(--ov-border-color); + background-color: var(--ov-input-background, var(--ov-secondary-action-color)); + border: 1px solid var(--ov-border-color, var(--ov-secondary-action-color)); padding: 10px 5px 10px 10px; margin: 10px; border-radius: var(--ov-surface-radius); @@ -90,13 +90,13 @@ max-width: 95%; font-size: 14px; word-break: break-all; - background-color: var(--ov-primary-action-color); + background-color: var(--ov-secondary-action-color); } #send-btn { - border-radius: var(--ov-surface-radius); - color: var(--ov-secondary-action-color); background-color: var(--ov-primary-action-color); + color: var(--ov-text-primary-color); + border-radius: var(--ov-surface-radius); align-self: center; height: 75px; } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.scss index af9e74d0..aa0a6146 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.scss @@ -25,7 +25,7 @@ // Menu styling - Desktop/Tablet default .item-menu { flex-shrink: 0; - border-right: 1px solid var(--ov-border-color); + border-right: 1px solid var(--ov-border-color, var(--ov-secondary-action-color)); width: 180px; min-width: 180px; padding-right: 16px; @@ -186,7 +186,7 @@ ::ng-deep .mat-mdc-list-item-unscoped-content, mat-icon { - color: var(--ov-secondary-action-color) !important; + color: var(--ov-text-primary-color) !important; } } 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 af4cb109..95efefb9 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 @@ -137,7 +137,7 @@ min-width: 48px; min-height: 48px; background: var(--ov-primary-action-color); - color: var(--ov-secondary-action-color); + color: var(--ov-text-primary-color); border-radius: 16px; padding: 0; @@ -243,8 +243,8 @@ .join-button { width: 100%; height: 56px; - background: var(--ov-focus-color, #4285f4); - color: white; + background: var(--ov-primary-action-color); + color: var(--ov-text-primary-color); border-radius: var(--ov-surface-radius); font-size: 16px; font-weight: 600; @@ -257,7 +257,7 @@ box-shadow: 0 2px 8px rgba(66, 133, 244, 0.2); &:hover:not([disabled]) { - background: var(--ov-primary-action-hover, #3367d6); + background: color-mix(in srgb, var(--ov-primary-action-color), var(--ov-secondary-action-color) 10%); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(66, 133, 244, 0.3); } 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 d82d7e5e..8e8d5788 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 @@ -31,10 +31,10 @@ transition: all 0.2s ease; &.device-enabled { - color: var(--ov-focus-color); + color: var(--ov-text-primary-color); mat-icon { - color: var(--ov-focus-color); + color: var(--ov-text-primary-color); } } @@ -224,7 +224,7 @@ } &.selected { - background-color: var(--ov-active-color); + background-color: var(--ov-secondary-action-color); mat-icon { color: var(--ov-text-surface-color); @@ -321,7 +321,7 @@ } &.selected { - background-color: var(--ov-active-color); + background-color: var(--ov-secondary-action-color); .check-icon { color: var(--ov-text-surface-color); diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.scss index 75e16ba7..97fa89fe 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.scss @@ -8,7 +8,7 @@ .participant-name-container { background-color: var(--ov-primary-action-color); padding: 5px; - color: var(--ov-secondary-action-color); + color: var(--ov-text-primary-color); font-weight: 400; border-radius: var(--ov-video-radius); } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.scss index d3c16431..454c7460 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.scss @@ -21,7 +21,7 @@ button { border-radius: var(--ov-toolbar-buttons-radius); - color: var(--ov-secondary-action-color); + color: var(--ov-text-primary-color); &.disabled { background-color: var(--ov-error-color) !important; @@ -33,7 +33,7 @@ button:not(.mat-mdc-menu-item) ::ng-deep button:not(mat-menu-item), ::ng-deep button:not(#screenshare-menu) { background-color: var(--ov-primary-action-color); - color: var(--ov-secondary-action-color); + color: var(--ov-text-primary-color); margin: 6px; transition: all 0.2s ease-in-out; @@ -106,11 +106,11 @@ } ::ng-deep #toolbar-broadcasting-btn > .mat-icon { - color: var(--ov-broadcasting-color) !important; + color: var(--ov-broadcasting-color, #5903ca) !important; } ::ng-deep #recording-btn > .mat-icon { - color: var(--ov-recording-color) !important; + color: var(--ov-recording-color, var(--ov-error-color)) !important; } ::ng-deep .mat-mdc-menu-panel { @@ -141,14 +141,14 @@ /* Animation for recording blinking */ @keyframes blinker-recording { 50% { - background-color: var(--ov-recording-color); + background-color: var(--ov-recording-color, var(--ov-error-color)); } } /* Animation for broadcasting blinking */ @keyframes blinker-broadcasting { 50% { - background-color: var(--ov-broadcasting-color); + background-color: var(--ov-broadcasting-color, #5903ca); } } diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.scss index e54608b3..462b9d58 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.scss @@ -1,7 +1,7 @@ :host { .panel-button { border-radius: var(--ov-toolbar-buttons-radius); - color: var(--ov-secondary-action-color); + color: var(--ov-text-primary-color); } .active-btn, @@ -21,8 +21,8 @@ } // FAB-style trigger button .fab-menu-trigger { - color: var(--ov-secondary-action-color); background-color: var(--ov-primary-action-color); + color: var(--ov-text-primary-color); transition: all 0.2s ease-in-out; height: 36px; width: 36px; @@ -62,7 +62,7 @@ ::ng-deep .panels-menu { .panel-menu-item { background-color: var(--ov-primary-action-color) !important; - color: var(--ov-secondary-action-color) !important; + color: var(--ov-text-primary-color) !important; border-radius: var(--ov-toolbar-buttons-radius) !important; min-height: 36px !important; padding: 8px !important; @@ -70,7 +70,7 @@ height: 36px !important; width: 36px !important; display: flex !important; - box-shadow: 0 2px 4px color-mix(in srgb, var(--ov-secondary-action-color) 100%, transparent); + box-shadow: 0 2px 4px color-mix(in srgb, var(--ov-text-primary-color) 100%, transparent); transition: box-shadow 0.2s ease, transform 0.2s ease; diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss index 6dd15b65..678e75a6 100644 --- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss +++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss @@ -109,7 +109,7 @@ background-color: var(--ov-error-color); } .broadcasting-tag { - background-color: var(--ov-broadcasting-color); + background-color: var(--ov-broadcasting-color, #5903ca); } .recording-tag mat-icon, @@ -138,14 +138,14 @@ /* Animation for recording blinking */ @keyframes blinker-recording { 50% { - background-color: var(--ov-recording-color); + background-color: var(--ov-recording-color, var(--ov-error-color)); } } /* Animation for broadcasting blinking */ @keyframes blinker-broadcasting { 50% { - background-color: var(--ov-broadcasting-color); + background-color: var(--ov-broadcasting-color, #5903ca); } } @@ -198,10 +198,10 @@ color: var(--ov-text-surface-color) !important; } ::ng-deep #toolbar-broadcasting-btn > .mat-icon { - color: var(--ov-broadcasting-color) !important; + color: var(--ov-broadcasting-color, #5903ca) !important; } ::ng-deep #recording-btn > .mat-icon { - color: var(--ov-recording-color) !important; + color: var(--ov-recording-color, var(--ov-error-color)) !important; } ::ng-deep .mat-mdc-menu-panel { 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 6f3740c6..918a972b 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 @@ -76,18 +76,18 @@ export interface OpenViduThemeVariables { * @internal */ export const OPENVIDU_COMPONENTS_LIGHT_THEME: OpenViduThemeVariables = { - '--ov-background-color': '#f0f0f0', + '--ov-background-color': '#f5f5f5', '--ov-surface-color': '#ffffff', '--ov-surface-container-color': '#f8f9fa', '--ov-surface-container-high-color': '#f0f0f0', - '--ov-primary-action-color': '#d3d7d8', - '--ov-primary-action-color-lighter': '#c1cbce', - '--ov-secondary-action-color': '#6e6d6d', + '--ov-primary-action-color': '#e6e1e1', + '--ov-primary-action-color-lighter': '#f3f3f3', + '--ov-secondary-action-color': '#e7e7e7ff', '--ov-accent-action-color': '#bddfe7', '--ov-error-color': '#dc3545', '--ov-warn-color': '#eea300', '--ov-success-color': '#28a745', - '--ov-text-primary-color': '#212529', + '--ov-text-primary-color': '#4e4f50', '--ov-text-surface-color': '#212529', '--ov-text-secondary-color': '#6c757d', '--ov-text-disabled-color': '#adb5bd', @@ -119,8 +119,8 @@ export const OPENVIDU_COMPONENTS_DARK_THEME: OpenViduThemeVariables = { '--ov-surface-container-color': '#3a3a3a', '--ov-surface-container-high-color': '#474747', '--ov-primary-action-color': '#4a4e4e', - '--ov-primary-action-color-lighter': '#93a5a8', - '--ov-secondary-action-color': '#e1e1e1', + '--ov-primary-action-color-lighter': '#c2c2c2', + '--ov-secondary-action-color': '#5c5c5cff', '--ov-accent-action-color': '#009ab9', '--ov-error-color': '#dc3545', '--ov-warn-color': '#eea300',