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; width: 70px;
border-radius: var(--ov-video-radius); border-radius: var(--ov-video-radius);
border: 2px solid var(--ov-text-primary-color); 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 { #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; padding: 3px;
font-size: 11px; font-size: 11px;
border-radius: var(--ov-surface-radius); border-radius: var(--ov-surface-radius);
background-color: var(--ov-primary-action-color); background-color: var(--ov-secondary-action-color);
} }
.activity-icon { .activity-icon {
display: inherit; display: inherit;
background-color: var(--ov-primary-action-color); background-color: var(--ov-secondary-action-color);
border-radius: var(--ov-surface-radius); border-radius: var(--ov-surface-radius);
margin: 10px 0px !important; margin: 10px 0px !important;
padding: 10px; 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 { #broadcasting-icon {
color: var(--ov-broadcasting-color) !important; color: var(--ov-broadcasting-color, #5903ca) !important;
} }
.broadcasting-duration { .broadcasting-duration {
@ -26,12 +26,12 @@
} }
.started { .started {
background-color: var(--ov-broadcasting-color) !important; background-color: var(--ov-broadcasting-color, #5903ca) !important;
color: var(--ov-text-primary-color); color: var(--ov-text-primary-color);
} }
.activity-icon.started { .activity-icon.started {
background-color: var(--ov-broadcasting-color) !important; background-color: var(--ov-broadcasting-color, #5903ca) !important;
color: var(--ov-text-primary-color); 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 { #start-recording-btn {
width: 100%; width: 100%;
background-color: var(--ov-primary-action-color); 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); 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 { .effect-button {
margin: 5px; margin: 5px;
border-radius: var(--ov-surface-radius); border-radius: var(--ov-surface-radius);
background-color: var(--ov-primary-action-color); background-color: var(--ov-secondary-action-color);
color: var(--ov-secondary-action-color); color: var(--ov-text-surface-color);
width: 60px; width: 60px;
height: 60px; height: 60px;
line-height: inherit; 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 { .input-container {
height: 65px; height: 65px;
display: flex; display: flex;
background-color: var(--ov-input-background); background-color: var(--ov-input-background, var(--ov-secondary-action-color));
border: 1px solid var(--ov-border-color); border: 1px solid var(--ov-border-color, var(--ov-secondary-action-color));
padding: 10px 5px 10px 10px; padding: 10px 5px 10px 10px;
margin: 10px; margin: 10px;
border-radius: var(--ov-surface-radius); border-radius: var(--ov-surface-radius);
@ -90,13 +90,13 @@
max-width: 95%; max-width: 95%;
font-size: 14px; font-size: 14px;
word-break: break-all; word-break: break-all;
background-color: var(--ov-primary-action-color); background-color: var(--ov-secondary-action-color);
} }
#send-btn { #send-btn {
border-radius: var(--ov-surface-radius);
color: var(--ov-secondary-action-color);
background-color: var(--ov-primary-action-color); background-color: var(--ov-primary-action-color);
color: var(--ov-text-primary-color);
border-radius: var(--ov-surface-radius);
align-self: center; align-self: center;
height: 75px; 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 // Menu styling - Desktop/Tablet default
.item-menu { .item-menu {
flex-shrink: 0; 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; width: 180px;
min-width: 180px; min-width: 180px;
padding-right: 16px; padding-right: 16px;
@ -186,7 +186,7 @@
::ng-deep .mat-mdc-list-item-unscoped-content, ::ng-deep .mat-mdc-list-item-unscoped-content,
mat-icon { 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-width: 48px;
min-height: 48px; min-height: 48px;
background: var(--ov-primary-action-color); background: var(--ov-primary-action-color);
color: var(--ov-secondary-action-color); color: var(--ov-text-primary-color);
border-radius: 16px; border-radius: 16px;
padding: 0; padding: 0;
@ -243,8 +243,8 @@
.join-button { .join-button {
width: 100%; width: 100%;
height: 56px; height: 56px;
background: var(--ov-focus-color, #4285f4); background: var(--ov-primary-action-color);
color: white; color: var(--ov-text-primary-color);
border-radius: var(--ov-surface-radius); border-radius: var(--ov-surface-radius);
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
@ -257,7 +257,7 @@
box-shadow: 0 2px 8px rgba(66, 133, 244, 0.2); box-shadow: 0 2px 8px rgba(66, 133, 244, 0.2);
&:hover:not([disabled]) { &: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); transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(66, 133, 244, 0.3); 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; transition: all 0.2s ease;
&.device-enabled { &.device-enabled {
color: var(--ov-focus-color); color: var(--ov-text-primary-color);
mat-icon { mat-icon {
color: var(--ov-focus-color); color: var(--ov-text-primary-color);
} }
} }
@ -224,7 +224,7 @@
} }
&.selected { &.selected {
background-color: var(--ov-active-color); background-color: var(--ov-secondary-action-color);
mat-icon { mat-icon {
color: var(--ov-text-surface-color); color: var(--ov-text-surface-color);
@ -321,7 +321,7 @@
} }
&.selected { &.selected {
background-color: var(--ov-active-color); background-color: var(--ov-secondary-action-color);
.check-icon { .check-icon {
color: var(--ov-text-surface-color); 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 { .participant-name-container {
background-color: var(--ov-primary-action-color); background-color: var(--ov-primary-action-color);
padding: 5px; padding: 5px;
color: var(--ov-secondary-action-color); color: var(--ov-text-primary-color);
font-weight: 400; font-weight: 400;
border-radius: var(--ov-video-radius); 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 { button {
border-radius: var(--ov-toolbar-buttons-radius); border-radius: var(--ov-toolbar-buttons-radius);
color: var(--ov-secondary-action-color); color: var(--ov-text-primary-color);
&.disabled { &.disabled {
background-color: var(--ov-error-color) !important; background-color: var(--ov-error-color) !important;
@ -33,7 +33,7 @@
button:not(.mat-mdc-menu-item) ::ng-deep button:not(mat-menu-item), button:not(.mat-mdc-menu-item) ::ng-deep button:not(mat-menu-item),
::ng-deep button:not(#screenshare-menu) { ::ng-deep button:not(#screenshare-menu) {
background-color: var(--ov-primary-action-color); background-color: var(--ov-primary-action-color);
color: var(--ov-secondary-action-color); color: var(--ov-text-primary-color);
margin: 6px; margin: 6px;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
@ -106,11 +106,11 @@
} }
::ng-deep #toolbar-broadcasting-btn > .mat-icon { ::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 { ::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 { ::ng-deep .mat-mdc-menu-panel {
@ -141,14 +141,14 @@
/* Animation for recording blinking */ /* Animation for recording blinking */
@keyframes blinker-recording { @keyframes blinker-recording {
50% { 50% {
background-color: var(--ov-recording-color); background-color: var(--ov-recording-color, var(--ov-error-color));
} }
} }
/* Animation for broadcasting blinking */ /* Animation for broadcasting blinking */
@keyframes blinker-broadcasting { @keyframes blinker-broadcasting {
50% { 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 { :host {
.panel-button { .panel-button {
border-radius: var(--ov-toolbar-buttons-radius); border-radius: var(--ov-toolbar-buttons-radius);
color: var(--ov-secondary-action-color); color: var(--ov-text-primary-color);
} }
.active-btn, .active-btn,
@ -21,8 +21,8 @@
} }
// FAB-style trigger button // FAB-style trigger button
.fab-menu-trigger { .fab-menu-trigger {
color: var(--ov-secondary-action-color);
background-color: var(--ov-primary-action-color); background-color: var(--ov-primary-action-color);
color: var(--ov-text-primary-color);
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
height: 36px; height: 36px;
width: 36px; width: 36px;
@ -62,7 +62,7 @@
::ng-deep .panels-menu { ::ng-deep .panels-menu {
.panel-menu-item { .panel-menu-item {
background-color: var(--ov-primary-action-color) !important; 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; border-radius: var(--ov-toolbar-buttons-radius) !important;
min-height: 36px !important; min-height: 36px !important;
padding: 8px !important; padding: 8px !important;
@ -70,7 +70,7 @@
height: 36px !important; height: 36px !important;
width: 36px !important; width: 36px !important;
display: flex !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: transition:
box-shadow 0.2s ease, box-shadow 0.2s ease,
transform 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); background-color: var(--ov-error-color);
} }
.broadcasting-tag { .broadcasting-tag {
background-color: var(--ov-broadcasting-color); background-color: var(--ov-broadcasting-color, #5903ca);
} }
.recording-tag mat-icon, .recording-tag mat-icon,
@ -138,14 +138,14 @@
/* Animation for recording blinking */ /* Animation for recording blinking */
@keyframes blinker-recording { @keyframes blinker-recording {
50% { 50% {
background-color: var(--ov-recording-color); background-color: var(--ov-recording-color, var(--ov-error-color));
} }
} }
/* Animation for broadcasting blinking */ /* Animation for broadcasting blinking */
@keyframes blinker-broadcasting { @keyframes blinker-broadcasting {
50% { 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; color: var(--ov-text-surface-color) !important;
} }
::ng-deep #toolbar-broadcasting-btn > .mat-icon { ::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 { ::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 { ::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 * @internal
*/ */
export const OPENVIDU_COMPONENTS_LIGHT_THEME: OpenViduThemeVariables = { export const OPENVIDU_COMPONENTS_LIGHT_THEME: OpenViduThemeVariables = {
'--ov-background-color': '#f0f0f0', '--ov-background-color': '#f5f5f5',
'--ov-surface-color': '#ffffff', '--ov-surface-color': '#ffffff',
'--ov-surface-container-color': '#f8f9fa', '--ov-surface-container-color': '#f8f9fa',
'--ov-surface-container-high-color': '#f0f0f0', '--ov-surface-container-high-color': '#f0f0f0',
'--ov-primary-action-color': '#d3d7d8', '--ov-primary-action-color': '#e6e1e1',
'--ov-primary-action-color-lighter': '#c1cbce', '--ov-primary-action-color-lighter': '#f3f3f3',
'--ov-secondary-action-color': '#6e6d6d', '--ov-secondary-action-color': '#e7e7e7ff',
'--ov-accent-action-color': '#bddfe7', '--ov-accent-action-color': '#bddfe7',
'--ov-error-color': '#dc3545', '--ov-error-color': '#dc3545',
'--ov-warn-color': '#eea300', '--ov-warn-color': '#eea300',
'--ov-success-color': '#28a745', '--ov-success-color': '#28a745',
'--ov-text-primary-color': '#212529', '--ov-text-primary-color': '#4e4f50',
'--ov-text-surface-color': '#212529', '--ov-text-surface-color': '#212529',
'--ov-text-secondary-color': '#6c757d', '--ov-text-secondary-color': '#6c757d',
'--ov-text-disabled-color': '#adb5bd', '--ov-text-disabled-color': '#adb5bd',
@ -119,8 +119,8 @@ export const OPENVIDU_COMPONENTS_DARK_THEME: OpenViduThemeVariables = {
'--ov-surface-container-color': '#3a3a3a', '--ov-surface-container-color': '#3a3a3a',
'--ov-surface-container-high-color': '#474747', '--ov-surface-container-high-color': '#474747',
'--ov-primary-action-color': '#4a4e4e', '--ov-primary-action-color': '#4a4e4e',
'--ov-primary-action-color-lighter': '#93a5a8', '--ov-primary-action-color-lighter': '#c2c2c2',
'--ov-secondary-action-color': '#e1e1e1', '--ov-secondary-action-color': '#5c5c5cff',
'--ov-accent-action-color': '#009ab9', '--ov-accent-action-color': '#009ab9',
'--ov-error-color': '#dc3545', '--ov-error-color': '#dc3545',
'--ov-warn-color': '#eea300', '--ov-warn-color': '#eea300',