ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
9
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ov-components: update color variables to enhance UI consistency across components

master
Carlos Santos 2025-09-26 18:06:44 +02:00
parent 1bbb9784cd
commit db20af15e6
14 changed files with 47 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 {

4
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.scss
View File

@ -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;

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

@ -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);
}

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

@ -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);
}

4
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.scss
View File

@ -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;

10
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.scss
View File

@ -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;
}

4
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.scss
View File

@ -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;
}
}

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

@ -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);
}

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

@ -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);

2
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.scss
View File

@ -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);
}

12
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.scss
View File

@ -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);
}
}

8
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.scss
View File

@ -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;

10
openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss
View File

@ -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 {

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

@ -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',