neoris/openvidu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor SCSS to use @use and @forward for design tokens

Browse Source 
- Updated all SCSS files to replace @import with @use and @forward for better modularity and maintainability.
- Adjusted mixin calls to reference the new design tokens structure.
- Ensured consistent usage of design tokens across various components including login, meeting, and recordings pages.
- Improved organization of design tokens and mixins for a cleaner codebase.
This commit is contained in:
Carlos Santos 2025-10-03 14:07:34 +02:00
parent 4bd66fc53a
commit b0c29a6a4a
35 changed files with 439 additions and 432 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.scss
View File

@ -1,4 +1,4 @@
@import '../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../src/assets/styles/design-tokens';
#dashboard-container, #dashboard-container,
mat-sidenav-container { mat-sidenav-container {

34
frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.scss
View File

@ -1,5 +1,5 @@
// Import design system utilities // Import design system utilities
@import '../../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../../src/assets/styles/design-tokens';
// === DIALOG CONTAINER === // === DIALOG CONTAINER ===
::ng-deep { ::ng-deep {
@ -15,7 +15,7 @@
:host { :host {
.dialog-container { .dialog-container {
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
display: block; display: block;
animation: dialogFadeIn 0.2s ease-out; animation: dialogFadeIn 0.2s ease-out;
} }
@ -36,8 +36,8 @@
// === DIALOG TITLE === // === DIALOG TITLE ===
.dialog-title { .dialog-title {
@extend .ov-text-center; @extend .ov-text-center;
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
@include ov-flex-center; @include design-tokens.ov-flex-center;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
color: var(--ov-meet-text-primary); color: var(--ov-meet-text-primary);
font-size: var(--ov-meet-font-size-xl) !important; font-size: var(--ov-meet-font-size-xl) !important;
@ -47,14 +47,14 @@
line-height: var(--ov-meet-line-height-tight); line-height: var(--ov-meet-line-height-tight);
.dialog-icon { .dialog-icon {
@include ov-icon(md); @include design-tokens.ov-icon(md);
color: var(--ov-meet-text-secondary); color: var(--ov-meet-text-secondary);
} }
} }
// === DIALOG CONTENT === // === DIALOG CONTENT ===
::ng-deep mat-dialog-content { ::ng-deep mat-dialog-content {
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
color: var(--ov-meet-text-secondary); color: var(--ov-meet-text-secondary);
font-size: var(--ov-meet-font-size-md) !important; font-size: var(--ov-meet-font-size-md) !important;
line-height: var(--ov-meet-line-height-relaxed); line-height: var(--ov-meet-line-height-relaxed);
@ -67,7 +67,7 @@
} }
.force-checkbox-container { .force-checkbox-container {
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
margin-top: var(--ov-meet-spacing-lg); margin-top: var(--ov-meet-spacing-lg);
padding: var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-md);
border: 1px solid var(--ov-meet-border-color); border: 1px solid var(--ov-meet-border-color);
@ -93,7 +93,7 @@
margin-top: var(--ov-meet-spacing-xs); margin-top: var(--ov-meet-spacing-xs);
.warning-icon { .warning-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
color: var(--ov-meet-color-warning); color: var(--ov-meet-color-warning);
flex-shrink: 0; flex-shrink: 0;
margin-top: 2px; // Align with first line of text margin-top: 2px; // Align with first line of text
@ -112,7 +112,7 @@
// === DIALOG ACTIONS === // === DIALOG ACTIONS ===
.dialog-action { .dialog-action {
@include ov-flex-center; @include design-tokens.ov-flex-center;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
padding: var(--ov-meet-spacing-lg); padding: var(--ov-meet-spacing-lg);
margin: 0; margin: 0;
@ -120,15 +120,15 @@
// Button styling // Button styling
button { button {
@include ov-button-base; @include design-tokens.ov-button-base;
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
@include ov-flex-center; @include design-tokens.ov-flex-center;
gap: var(--ov-meet-spacing-xs); gap: var(--ov-meet-spacing-xs);
min-width: 80px; min-width: 80px;
margin: 0; // Reset default margin margin: 0; // Reset default margin
mat-icon { mat-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
} }
// Cancel/Secondary button // Cancel/Secondary button
@ -138,7 +138,7 @@
background: transparent; background: transparent;
&:hover { &:hover {
@include ov-hover-lift(-1px); @include design-tokens.ov-hover-lift(-1px);
background: var(--ov-meet-surface-hover); background: var(--ov-meet-surface-hover);
color: var(--ov-meet-text-primary); color: var(--ov-meet-text-primary);
} }
@ -149,7 +149,7 @@
color: var(--ov-meet-text-on-primary); color: var(--ov-meet-text-on-primary);
&:hover { &:hover {
@include ov-hover-lift(-1px); @include design-tokens.ov-hover-lift(-1px);
} }
&:active { &:active {
@ -176,7 +176,7 @@
} }
// === RESPONSIVE DESIGN === // === RESPONSIVE DESIGN ===
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
.dialog-title { .dialog-title {
font-size: var(--ov-meet-font-size-lg); font-size: var(--ov-meet-font-size-lg);
padding: var(--ov-meet-spacing-md) var(--ov-meet-spacing-md) 0; padding: var(--ov-meet-spacing-md) var(--ov-meet-spacing-md) 0;
@ -184,7 +184,7 @@
gap: var(--ov-meet-spacing-xs); gap: var(--ov-meet-spacing-xs);
.dialog-icon { .dialog-icon {
@include ov-icon(lg); @include design-tokens.ov-icon(lg);
} }
} }

34
frontend/projects/shared-meet-components/src/lib/components/dialogs/delete-room-dialog/delete-room-dialog.component.scss
View File

@ -1,5 +1,5 @@
// Import design system utilities // Import design system utilities
@import '../../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../../src/assets/styles/design-tokens';
// === DIALOG CONTAINER === // === DIALOG CONTAINER ===
::ng-deep { ::ng-deep {
@ -15,7 +15,7 @@
:host { :host {
.dialog-container { .dialog-container {
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
display: block; display: block;
animation: dialogFadeIn 0.2s ease-out; animation: dialogFadeIn 0.2s ease-out;
} }
@ -36,8 +36,8 @@
// === DIALOG TITLE === // === DIALOG TITLE ===
.dialog-title { .dialog-title {
@extend .ov-text-center; @extend .ov-text-center;
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
@include ov-flex-center; @include design-tokens.ov-flex-center;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
color: var(--ov-meet-text-primary); color: var(--ov-meet-text-primary);
font-size: var(--ov-meet-font-size-xl) !important; font-size: var(--ov-meet-font-size-xl) !important;
@ -47,14 +47,14 @@
line-height: var(--ov-meet-line-height-tight); line-height: var(--ov-meet-line-height-tight);
.dialog-icon { .dialog-icon {
@include ov-icon(md); @include design-tokens.ov-icon(md);
color: var(--ov-meet-color-error); color: var(--ov-meet-color-error);
} }
} }
// === DIALOG CONTENT === // === DIALOG CONTENT ===
::ng-deep mat-dialog-content { ::ng-deep mat-dialog-content {
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
color: var(--ov-meet-text-secondary); color: var(--ov-meet-text-secondary);
font-size: var(--ov-meet-font-size-md) !important; font-size: var(--ov-meet-font-size-md) !important;
line-height: var(--ov-meet-line-height-relaxed); line-height: var(--ov-meet-line-height-relaxed);
@ -80,7 +80,7 @@
// === POLICY OPTIONS CONTAINER === // === POLICY OPTIONS CONTAINER ===
.policy-options-container { .policy-options-container {
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
margin-top: var(--ov-meet-spacing-md); margin-top: var(--ov-meet-spacing-md);
padding: var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-md);
background: var(--ov-meet-surface-variant); background: var(--ov-meet-surface-variant);
@ -111,7 +111,7 @@
} }
.policy-option { .policy-option {
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
display: flex !important; display: flex !important;
align-items: flex-start; align-items: flex-start;
width: 100%; width: 100%;
@ -167,7 +167,7 @@
// === DIALOG ACTIONS === // === DIALOG ACTIONS ===
.dialog-action { .dialog-action {
@include ov-flex-center; @include design-tokens.ov-flex-center;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
padding: var(--ov-meet-spacing-lg); padding: var(--ov-meet-spacing-lg);
margin: 0; margin: 0;
@ -175,15 +175,15 @@
// Button styling // Button styling
button { button {
@include ov-button-base; @include design-tokens.ov-button-base;
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
@include ov-flex-center; @include design-tokens.ov-flex-center;
gap: var(--ov-meet-spacing-xs); gap: var(--ov-meet-spacing-xs);
min-width: 100px; min-width: 100px;
margin: 0; margin: 0;
mat-icon { mat-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
} }
// Cancel/Secondary button // Cancel/Secondary button
@ -193,7 +193,7 @@
background: transparent; background: transparent;
&:hover { &:hover {
@include ov-hover-lift(-1px); @include design-tokens.ov-hover-lift(-1px);
background: var(--ov-meet-surface-hover); background: var(--ov-meet-surface-hover);
color: var(--ov-meet-text-primary); color: var(--ov-meet-text-primary);
} }
@ -206,7 +206,7 @@
color: var(--ov-meet-text-on-error); color: var(--ov-meet-text-on-error);
&:hover { &:hover {
@include ov-hover-lift(-1px); @include design-tokens.ov-hover-lift(-1px);
background: var(--ov-meet-color-error); background: var(--ov-meet-color-error);
filter: brightness(0.9); filter: brightness(0.9);
} }
@ -224,7 +224,7 @@
} }
// === RESPONSIVE DESIGN === // === RESPONSIVE DESIGN ===
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
.dialog-title { .dialog-title {
font-size: var(--ov-meet-font-size-lg); font-size: var(--ov-meet-font-size-lg);
padding: var(--ov-meet-spacing-md) var(--ov-meet-spacing-md) 0; padding: var(--ov-meet-spacing-md) var(--ov-meet-spacing-md) 0;
@ -232,7 +232,7 @@
gap: var(--ov-meet-spacing-xs); gap: var(--ov-meet-spacing-xs);
.dialog-icon { .dialog-icon {
@include ov-icon(lg); @include design-tokens.ov-icon(lg);
} }
} }

58
frontend/projects/shared-meet-components/src/lib/components/dialogs/share-recording-dialog/share-recording-dialog.component.scss
View File

@ -1,10 +1,10 @@
@import '../../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../../src/assets/styles/design-tokens';
.share-recording-dialog { .share-recording-dialog {
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
.dialog-title { .dialog-title {
@include ov-flex-center; @include design-tokens.ov-flex-center;
justify-content: flex-start; justify-content: flex-start;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
margin: 0; margin: 0;
@ -14,23 +14,23 @@
color: var(--ov-meet-text-primary); color: var(--ov-meet-text-primary);
.title-icon { .title-icon {
@include ov-icon(md); @include design-tokens.ov-icon(md);
} }
} }
.dialog-content { .dialog-content {
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
padding: var(--ov-meet-spacing-xl); padding: var(--ov-meet-spacing-xl);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--ov-meet-spacing-lg); gap: var(--ov-meet-spacing-lg);
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
min-width: 400px; min-width: 400px;
padding: var(--ov-meet-spacing-lg); padding: var(--ov-meet-spacing-lg);
} }
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
min-width: 320px; min-width: 320px;
padding: var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-md);
} }
@ -49,7 +49,7 @@
} }
.error-message { .error-message {
@include ov-flex-center; @include design-tokens.ov-flex-center;
justify-content: flex-start; justify-content: flex-start;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
padding: var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-md);
@ -59,7 +59,7 @@
color: var(--ov-meet-color-error); color: var(--ov-meet-color-error);
.error-icon { .error-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
} }
.error-text { .error-text {
@ -75,7 +75,7 @@
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
.access-option { .access-option {
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
border: 1px solid var(--ov-meet-border-color); border: 1px solid var(--ov-meet-border-color);
border-radius: var(--ov-meet-radius-sm); border-radius: var(--ov-meet-radius-sm);
padding: var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-md);
@ -92,13 +92,13 @@
} }
.option-content { .option-content {
@include ov-flex-center; @include design-tokens.ov-flex-center;
justify-content: flex-start; justify-content: flex-start;
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
margin-left: var(--ov-meet-spacing-lg); margin-left: var(--ov-meet-spacing-lg);
.option-icon { .option-icon {
@include ov-icon(md); @include design-tokens.ov-icon(md);
color: var(--ov-meet-text-secondary); color: var(--ov-meet-text-secondary);
} }
@ -124,11 +124,11 @@
} }
.generate-section { .generate-section {
@include ov-flex-center; @include design-tokens.ov-flex-center;
justify-content: center; justify-content: center;
.loading-state { .loading-state {
@include ov-flex-center; @include design-tokens.ov-flex-center;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
color: var(--ov-meet-text-secondary); color: var(--ov-meet-text-secondary);
@ -139,12 +139,12 @@
} }
.generate-button { .generate-button {
@include ov-button-base; @include design-tokens.ov-button-base;
@include ov-flex-center; @include design-tokens.ov-flex-center;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
mat-icon { mat-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
} }
} }
} }
@ -172,13 +172,13 @@
} }
.url-prefix-icon { .url-prefix-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
color: var(--ov-meet-text-secondary); color: var(--ov-meet-text-secondary);
margin-right: var(--ov-meet-spacing-xs); margin-right: var(--ov-meet-spacing-xs);
} }
.copy-button { .copy-button {
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
color: var(--ov-meet-text-secondary); color: var(--ov-meet-text-secondary);
&:hover { &:hover {
@ -192,13 +192,13 @@
} }
mat-icon { mat-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
} }
} }
} }
.copy-success-message { .copy-success-message {
@include ov-flex-center; @include design-tokens.ov-flex-center;
justify-content: center; justify-content: center;
gap: var(--ov-meet-spacing-xs); gap: var(--ov-meet-spacing-xs);
margin-top: var(--ov-meet-spacing-sm); margin-top: var(--ov-meet-spacing-sm);
@ -211,18 +211,18 @@
font-weight: var(--ov-meet-font-weight-medium); font-weight: var(--ov-meet-font-weight-medium);
mat-icon { mat-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
} }
} }
} }
.url-actions { .url-actions {
@include ov-flex-center; @include design-tokens.ov-flex-center;
justify-content: center; justify-content: center;
margin-top: var(--ov-meet-spacing-md); margin-top: var(--ov-meet-spacing-md);
.back-button { .back-button {
@include ov-flex-center; @include design-tokens.ov-flex-center;
gap: var(--ov-meet-spacing-xs); gap: var(--ov-meet-spacing-xs);
color: var(--ov-meet-text-secondary); color: var(--ov-meet-text-secondary);
@ -232,7 +232,7 @@
} }
mat-icon { mat-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
} }
} }
} }
@ -240,26 +240,26 @@
} }
.dialog-actions { .dialog-actions {
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
padding: var(--ov-meet-spacing-md) var(--ov-meet-spacing-xl) var(--ov-meet-spacing-lg); padding: var(--ov-meet-spacing-md) var(--ov-meet-spacing-xl) var(--ov-meet-spacing-lg);
border-top: 1px solid var(--ov-meet-border-color-light); border-top: 1px solid var(--ov-meet-border-color-light);
justify-content: flex-end; justify-content: flex-end;
.close-button { .close-button {
@include ov-flex-center; @include design-tokens.ov-flex-center;
gap: var(--ov-meet-spacing-xs); gap: var(--ov-meet-spacing-xs);
color: var(--ov-meet-text-primary); color: var(--ov-meet-text-primary);
background: var(--ov-meet-surface-hover); background: var(--ov-meet-surface-hover);
mat-icon { mat-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
} }
} }
} }
} }
// Responsive adjustments // Responsive adjustments
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
.share-recording-dialog { .share-recording-dialog {
.dialog-content { .dialog-content {
min-width: 280px; min-width: 280px;

2
frontend/projects/shared-meet-components/src/lib/components/logo-selector/logo-selector.component.scss
View File

@ -1,4 +1,4 @@
@import '../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../src/assets/styles/design-tokens';
// Form styling // Form styling
.form-section { .form-section {

4
frontend/projects/shared-meet-components/src/lib/components/pro-feature-badge/pro-feature-badge.component.scss
View File

@ -1,4 +1,4 @@
@import '../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../src/assets/styles/design-tokens';
.pro-badge { .pro-badge {
position: absolute; position: absolute;
@ -18,6 +18,6 @@
z-index: 2; z-index: 2;
mat-icon { mat-icon {
@include ov-icon(xs); @include design-tokens.ov-icon(xs);
} }
} }

46
frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.scss
View File

@ -1,12 +1,12 @@
@import '../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../src/assets/styles/design-tokens';
// === MOBILE CARDS VIEW === // === MOBILE CARDS VIEW ===
.cards-container { .cards-container {
@include ov-grid-responsive(280px); @include design-tokens.ov-grid-responsive(280px);
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
padding: var(--ov-meet-spacing-md) 0; padding: var(--ov-meet-spacing-md) 0;
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
padding: var(--ov-meet-spacing-sm) 0; padding: var(--ov-meet-spacing-sm) 0;
@ -14,8 +14,8 @@
} }
.recording-card { .recording-card {
@include ov-card; @include design-tokens.ov-card;
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
@ -29,10 +29,10 @@
} }
&:hover:not(.selected-card) { &:hover:not(.selected-card) {
@include ov-hover-lift(-2px); @include design-tokens.ov-hover-lift(-2px);
} }
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
} }
} }
@ -67,7 +67,7 @@
flex-direction: column; flex-direction: column;
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
} }
@ -85,7 +85,7 @@
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
.detail-icon { .detail-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
color: var(--ov-meet-text-secondary); color: var(--ov-meet-text-secondary);
margin-top: 2px; margin-top: 2px;
flex-shrink: 0; flex-shrink: 0;
@ -152,7 +152,7 @@
margin-top: var(--ov-meet-spacing-sm); margin-top: var(--ov-meet-spacing-sm);
.action-button { .action-button {
@include ov-icon(lg); @include design-tokens.ov-icon(lg);
padding: 0; padding: 0;
width: 40px; width: 40px;
@ -165,7 +165,7 @@
} }
} }
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
gap: var(--ov-meet-spacing-xs); gap: var(--ov-meet-spacing-xs);
} }
@ -182,7 +182,7 @@
margin-bottom: 0; margin-bottom: 0;
// Responsive toolbar adjustments // Responsive toolbar adjustments
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
.toolbar-center { .toolbar-center {
z-index: 1000; z-index: 1000;
position: fixed; position: fixed;
@ -206,7 +206,7 @@
} }
} }
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
flex-wrap: wrap; flex-wrap: wrap;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
@ -240,7 +240,7 @@
@extend .ov-table-container; @extend .ov-table-container;
margin-top: 0; margin-top: 0;
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
overflow-x: auto; overflow-x: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
@ -274,7 +274,7 @@
} }
} }
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
.mat-column-duration, .mat-column-duration,
.mat-column-size { .mat-column-size {
display: none; display: none;
@ -295,7 +295,7 @@
min-width: 0; min-width: 0;
.room-name { .room-name {
@include ov-text-truncate; @include design-tokens.ov-text-truncate;
font-weight: var(--ov-meet-font-weight-medium); font-weight: var(--ov-meet-font-weight-medium);
margin-bottom: 2px; margin-bottom: 2px;
@ -306,7 +306,7 @@
} }
.room-id { .room-id {
@include ov-text-truncate; @include design-tokens.ov-text-truncate;
font-size: var(--ov-meet-font-size-xs); font-size: var(--ov-meet-font-size-xs);
color: var(--ov-meet-text-secondary); color: var(--ov-meet-text-secondary);
@ -327,7 +327,7 @@
letter-spacing: 0.5px; letter-spacing: 0.5px;
.status-icon { .status-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
margin: 0; margin: 0;
} }
@ -338,12 +338,12 @@
} }
} }
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
padding: var(--ov-meet-spacing-xxs) var(--ov-meet-spacing-xs); padding: var(--ov-meet-spacing-xxs) var(--ov-meet-spacing-xs);
font-size: var(--ov-meet-font-size-xs); font-size: var(--ov-meet-font-size-xs);
.status-icon { .status-icon {
@include ov-icon(xs); @include design-tokens.ov-icon(xs);
} }
} }
} }
@ -364,7 +364,7 @@
.action-buttons { .action-buttons {
@extend .ov-action-buttons; @extend .ov-action-buttons;
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
.play-btn, .play-btn,
.download-btn { .download-btn {
display: none; display: none;
@ -380,7 +380,7 @@
@extend .ov-empty-state; @extend .ov-empty-state;
.getting-started-actions { .getting-started-actions {
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
flex-direction: column; flex-direction: column;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
@ -399,7 +399,7 @@
@extend .ov-focus-visible; @extend .ov-focus-visible;
} }
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
.mat-mdc-icon-button { .mat-mdc-icon-button {
min-width: 44px; min-width: 44px;
min-height: 44px; min-height: 44px;

10
frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.scss
View File

@ -1,4 +1,4 @@
@import '../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../src/assets/styles/design-tokens';
// Use utility classes for rooms toolbar // Use utility classes for rooms toolbar
.rooms-toolbar { .rooms-toolbar {
@ -138,12 +138,12 @@
width: fit-content; width: fit-content;
.status-icon { .status-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
} }
} }
.meeting-end-info-icon { .meeting-end-info-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
&.meeting-end-close { &.meeting-end-close {
color: var(--ov-meet-color-warning); color: var(--ov-meet-color-warning);
@ -175,7 +175,7 @@
text-transform: uppercase; text-transform: uppercase;
.deletion-icon { .deletion-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
} }
} }
@ -282,7 +282,7 @@
@extend .ov-empty-state; @extend .ov-empty-state;
.empty-icon { .empty-icon {
@include ov-icon(xl); @include design-tokens.ov-icon(xl);
color: var(--ov-meet-text-hint); color: var(--ov-meet-text-hint);
margin-bottom: var(--ov-meet-spacing-lg); margin-bottom: var(--ov-meet-spacing-lg);
display: block; display: block;

18
frontend/projects/shared-meet-components/src/lib/components/selectable-card/selectable-card.component.scss
View File

@ -1,8 +1,8 @@
@import '../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../src/assets/styles/design-tokens';
.option-card { .option-card {
@include ov-card; @include design-tokens.ov-card;
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
border: 2px solid transparent; border: 2px solid transparent;
@ -12,7 +12,7 @@
flex-direction: column; flex-direction: column;
&:hover:not(.no-hover):not(.selected) { &:hover:not(.no-hover):not(.selected) {
@include ov-hover-lift(-2px); @include design-tokens.ov-hover-lift(-2px);
} }
&.selected { &.selected {
@ -42,9 +42,9 @@
z-index: 2; z-index: 2;
.selection-icon { .selection-icon {
@include ov-icon(md); @include design-tokens.ov-icon(md);
color: var(--ov-meet-text-hint); color: var(--ov-meet-text-hint);
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
&.selected { &.selected {
color: var(--ov-meet-color-primary); color: var(--ov-meet-color-primary);
@ -69,7 +69,7 @@
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
display: block; display: block;
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
} }
// &:hover img { // &:hover img {
@ -86,8 +86,8 @@
font-weight: var(--ov-meet-font-weight-semibold); font-weight: var(--ov-meet-font-weight-semibold);
.option-icon { .option-icon {
@include ov-icon(md); @include design-tokens.ov-icon(md);
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
} }
.option-title { .option-title {

12
frontend/projects/shared-meet-components/src/lib/components/share-meeting-link/share-meeting-link.component.scss
View File

@ -1,4 +1,4 @@
@import '../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../src/assets/styles/design-tokens';
.meeting-url-badge { .meeting-url-badge {
margin: var(--ov-meet-spacing-sm) auto; margin: var(--ov-meet-spacing-sm) auto;
@ -43,8 +43,8 @@
margin: var(--ov-meet-spacing-sm); margin: var(--ov-meet-spacing-sm);
} }
.meeting-url-badge-container { .meeting-url-badge-container {
@include ov-flex-center; @include design-tokens.ov-flex-center;
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-md);
background-color: var(--ov-surface-color); // Use ov-components variable background-color: var(--ov-surface-color); // Use ov-components variable
@ -73,7 +73,7 @@
} }
.copy-url-btn { .copy-url-btn {
@include ov-button-base; @include design-tokens.ov-button-base;
width: 32px; width: 32px;
height: 32px; height: 32px;
min-width: 32px; min-width: 32px;
@ -84,7 +84,7 @@
border: 0; border: 0;
.mat-icon { .mat-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
} }
&:hover { &:hover {
@ -95,7 +95,7 @@
} }
} }
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
.meeting-url-badge-container { .meeting-url-badge-container {
margin: var(--ov-meet-spacing-md) auto; margin: var(--ov-meet-spacing-md) auto;
padding: var(--ov-meet-spacing-xs) var(--ov-meet-spacing-sm); padding: var(--ov-meet-spacing-xs) var(--ov-meet-spacing-sm);

8
frontend/projects/shared-meet-components/src/lib/components/step-indicator/step-indicator.component.scss
View File

@ -1,4 +1,4 @@
@import '../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../src/assets/styles/design-tokens';
.step-indicator-wrapper { .step-indicator-wrapper {
width: 100%; width: 100%;
@ -8,7 +8,7 @@
&[data-layout='vertical-sidebar'] { &[data-layout='vertical-sidebar'] {
.wizard-stepper { .wizard-stepper {
padding: var(--ov-meet-spacing-lg); padding: var(--ov-meet-spacing-lg);
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
::ng-deep { ::ng-deep {
.mat-stepper-vertical { .mat-stepper-vertical {
@ -53,7 +53,7 @@
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
padding: var(--ov-meet-spacing-md) var(--ov-meet-spacing-xs); padding: var(--ov-meet-spacing-md) var(--ov-meet-spacing-xs);
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
::ng-deep { ::ng-deep {
.mat-step-text-label { .mat-step-text-label {
@ -120,7 +120,7 @@
background-color: var(--ov-meet-surface-variant); background-color: var(--ov-meet-surface-variant);
border-radius: var(--ov-meet-radius-md); border-radius: var(--ov-meet-radius-md);
margin-bottom: var(--ov-meet-spacing-md); margin-bottom: var(--ov-meet-spacing-md);
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
::ng-deep { ::ng-deep {
.mat-stepper-vertical { .mat-stepper-vertical {

14
frontend/projects/shared-meet-components/src/lib/components/wizard-nav/wizard-nav.component.scss
View File

@ -1,11 +1,11 @@
@import '../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../src/assets/styles/design-tokens';
.wizard-navigation { .wizard-navigation {
width: 100%; width: 100%;
padding: var(--ov-meet-spacing-md) 0 0 0; padding: var(--ov-meet-spacing-md) 0 0 0;
.nav-buttons { .nav-buttons {
@include ov-container; @include design-tokens.ov-container;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -26,7 +26,7 @@
} }
button { button {
@include ov-button-base; @include design-tokens.ov-button-base;
border-radius: var(--ov-meet-radius-sm); border-radius: var(--ov-meet-radius-sm);
min-width: 120px; min-width: 120px;
@ -103,7 +103,7 @@
} }
mat-icon { mat-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
margin: 0 var(--ov-meet-spacing-xs); margin: 0 var(--ov-meet-spacing-xs);
&.leading-icon { &.leading-icon {
@ -119,7 +119,7 @@
} }
} }
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
padding: var(--ov-meet-spacing-md) 0; padding: var(--ov-meet-spacing-md) 0;
.nav-buttons { .nav-buttons {
@ -146,7 +146,7 @@
} }
} }
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
.nav-buttons { .nav-buttons {
.nav-group { .nav-group {
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
@ -202,7 +202,7 @@
padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-md);
mat-icon { mat-icon {
@include ov-icon(xs); @include design-tokens.ov-icon(xs);
} }
} }
} }

12
frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.scss
View File

@ -1,4 +1,4 @@
@import '../../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../../src/assets/styles/design-tokens';
.ov-page-container { .ov-page-container {
button { button {
@ -54,18 +54,18 @@
margin: var(--ov-meet-spacing-lg) 0; margin: var(--ov-meet-spacing-lg) 0;
// Tablet and larger - maintain 4 columns // Tablet and larger - maintain 4 columns
@include ov-tablet-up { @include design-tokens.ov-tablet-up {
gap: var(--ov-meet-spacing-xs); gap: var(--ov-meet-spacing-xs);
} }
// Small tablets - 2 columns // Small tablets - 2 columns
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: var(--ov-meet-spacing-lg); gap: var(--ov-meet-spacing-lg);
} }
// Mobile - single column // Mobile - single column
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
} }
@ -207,7 +207,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
flex-direction: column; flex-direction: column;
.mat-mdc-button, .mat-mdc-button,
@ -218,7 +218,7 @@
} }
} }
@include ov-tablet-up { @include design-tokens.ov-tablet-up {
justify-content: flex-start; justify-content: flex-start;
button:first-child { button:first-child {

2
frontend/projects/shared-meet-components/src/lib/pages/console/console.component.scss
View File

@ -1,5 +1,5 @@
@import '../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../src/assets/styles/design-tokens';
::ng-deep { ::ng-deep {
mat-slide-toggle { mat-slide-toggle {

4
frontend/projects/shared-meet-components/src/lib/pages/console/embedded/embedded.component.scss
View File

@ -1,4 +1,4 @@
@import '../../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../../src/assets/styles/design-tokens';
.ov-page-container { .ov-page-container {
button { button {
@ -113,7 +113,7 @@
border-color: var(--ov-meet-color-error); border-color: var(--ov-meet-color-error);
} }
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
flex-direction: column; flex-direction: column;
.mat-mdc-button, .mat-mdc-button,

36
frontend/projects/shared-meet-components/src/lib/pages/console/overview/overview.component.scss
View File

@ -1,4 +1,4 @@
@import '../../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../../src/assets/styles/design-tokens';
// Welcome State Styles // Welcome State Styles
.welcome-content { .welcome-content {
@ -29,20 +29,20 @@
} }
.getting-started-grid { .getting-started-grid {
@include ov-grid-responsive(280px); @include design-tokens.ov-grid-responsive(280px);
margin-top: var(--ov-meet-spacing-lg); margin-top: var(--ov-meet-spacing-lg);
} }
.feature-card { .feature-card {
@include ov-card; @include design-tokens.ov-card;
@include ov-hover-lift(-5px); @include design-tokens.ov-hover-lift(-5px);
text-align: center; text-align: center;
mat-card-content { mat-card-content {
padding: var(--ov-meet-spacing-lg); padding: var(--ov-meet-spacing-lg);
mat-icon { mat-icon {
@include ov-icon(xl); @include design-tokens.ov-icon(xl);
margin-bottom: var(--ov-meet-spacing-md); margin-bottom: var(--ov-meet-spacing-md);
} }
@ -60,11 +60,11 @@
} }
button { button {
@include ov-button-base; @include design-tokens.ov-button-base;
width: 100%; width: 100%;
mat-icon { mat-icon {
@include ov-icon(md); @include design-tokens.ov-icon(md);
margin-right: var(--ov-meet-spacing-sm); margin-right: var(--ov-meet-spacing-sm);
} }
} }
@ -76,12 +76,12 @@
.dashboard-content { .dashboard-content {
padding: 5px; padding: 5px;
.quick-actions { .quick-actions {
@include ov-flex-center; @include design-tokens.ov-flex-center;
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
margin-bottom: var(--ov-meet-spacing-xxl); margin-bottom: var(--ov-meet-spacing-xxl);
button { button {
@include ov-button-base; @include design-tokens.ov-button-base;
mat-icon { mat-icon {
margin-right: var(--ov-meet-spacing-sm); margin-right: var(--ov-meet-spacing-sm);
@ -90,11 +90,11 @@
} }
.stats-grid { .stats-grid {
@include ov-grid-responsive(300px); @include design-tokens.ov-grid-responsive(300px);
} }
.stat-card { .stat-card {
@include ov-stat-card; @include design-tokens.ov-stat-card;
padding: 0; padding: 0;
mat-card-content { mat-card-content {
@ -106,7 +106,7 @@
.stat-icon { .stat-icon {
mat-icon { mat-icon {
@include ov-icon(xl); @include design-tokens.ov-icon(xl);
} }
} }
@ -119,7 +119,7 @@
gap: var(--ov-meet-spacing-xs); gap: var(--ov-meet-spacing-xs);
button { button {
@include ov-button-base; @include design-tokens.ov-button-base;
mat-icon { mat-icon {
margin-left: var(--ov-meet-spacing-xs); margin-left: var(--ov-meet-spacing-xs);
@ -133,7 +133,7 @@
// .recordings-card uses .ov-recording-icon // .recordings-card uses .ov-recording-icon
.action-card { .action-card {
@include ov-card; @include design-tokens.ov-card;
mat-card-content { mat-card-content {
display: flex; display: flex;
align-items: center; align-items: center;
@ -143,7 +143,7 @@
.action-icon { .action-icon {
mat-icon { mat-icon {
@include ov-icon(lg); @include design-tokens.ov-icon(lg);
} }
} }
@ -169,14 +169,14 @@
padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-lg) var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-lg) var(--ov-meet-spacing-md);
button { button {
@include ov-button-base; @include design-tokens.ov-button-base;
} }
} }
} }
} }
// Responsive Design using design tokens breakpoints // Responsive Design using design tokens breakpoints
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
.overview-container { .overview-container {
padding: var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-md);
} }
@ -205,7 +205,7 @@
} }
} }
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
.overview-header h1 { .overview-header h1 {
font-size: var(--ov-meet-font-size-xl); font-size: var(--ov-meet-font-size-xl);
} }

22
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-basic-creation/room-basic-creation.component.scss
View File

@ -1,8 +1,8 @@
@import '../../../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../../../src/assets/styles/design-tokens';
.room-basic-creation-page { .room-basic-creation-page {
@include ov-page-content; @include design-tokens.ov-page-content;
@include ov-container; @include design-tokens.ov-container;
padding: var(--ov-meet-spacing-xl); padding: var(--ov-meet-spacing-xl);
max-width: 600px; max-width: 600px;
@ -15,7 +15,7 @@
margin-bottom: var(--ov-meet-spacing-xl); margin-bottom: var(--ov-meet-spacing-xl);
.page-icon { .page-icon {
@include ov-icon(xxl); @include design-tokens.ov-icon(xxl);
color: var(--ov-meet-icon-rooms); color: var(--ov-meet-icon-rooms);
margin-top: var(--ov-meet-spacing-xs); margin-top: var(--ov-meet-spacing-xs);
} }
@ -67,7 +67,7 @@
// Icon styling in form fields // Icon styling in form fields
.mat-mdc-form-field-icon-suffix { .mat-mdc-form-field-icon-suffix {
mat-icon { mat-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
} }
} }
} }
@ -81,7 +81,7 @@
margin-top: var(--ov-meet-spacing-lg); margin-top: var(--ov-meet-spacing-lg);
.create-button { .create-button {
@include ov-button-base; @include design-tokens.ov-button-base;
flex: 1; flex: 1;
max-width: 200px; max-width: 200px;
background-color: var(--ov-meet-color-success); background-color: var(--ov-meet-color-success);
@ -89,7 +89,7 @@
box-shadow: var(--ov-meet-shadow-sm); box-shadow: var(--ov-meet-shadow-sm);
mat-icon { mat-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
margin-right: var(--ov-meet-spacing-xs); margin-right: var(--ov-meet-spacing-xs);
} }
@ -100,12 +100,12 @@
} }
.advanced-button { .advanced-button {
@include ov-button-base; @include design-tokens.ov-button-base;
flex: 1; flex: 1;
max-width: 200px; max-width: 200px;
mat-icon { mat-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
margin-right: var(--ov-meet-spacing-xs); margin-right: var(--ov-meet-spacing-xs);
} }
@ -118,7 +118,7 @@
} }
} }
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
padding: var(--ov-meet-spacing-lg); padding: var(--ov-meet-spacing-lg);
.page-header { .page-header {
@ -157,7 +157,7 @@
} }
} }
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
.page-content { .page-content {
.room-basic-creation-form { .room-basic-creation-form {
.action-buttons { .action-buttons {

24
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/room-wizard.component.scss
View File

@ -1,15 +1,15 @@
@import '../../../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../../../src/assets/styles/design-tokens';
.wizard-container { .wizard-container {
@include ov-container; @include design-tokens.ov-container;
@include ov-page-content; @include design-tokens.ov-page-content;
min-height: 600px; min-height: 600px;
gap: 0; gap: 0;
padding-top: 0; padding-top: 0;
} }
.wizard-header { .wizard-header {
@include ov-get-started-header; @include design-tokens.ov-get-started-header;
h2 { h2 {
margin-bottom: var(--ov-meet-spacing-md); margin-bottom: var(--ov-meet-spacing-md);
@ -27,7 +27,7 @@
} }
.step-content { .step-content {
@include ov-section-card; @include design-tokens.ov-section-card;
width: 100%; width: 100%;
max-width: 600px; max-width: 600px;
min-height: 450px; min-height: 450px;
@ -60,7 +60,7 @@
padding: var(--ov-meet-spacing-md) 0 0 0; padding: var(--ov-meet-spacing-md) 0 0 0;
} }
.cancel-button { .cancel-button {
@include ov-button-base; @include design-tokens.ov-button-base;
border-radius: var(--ov-meet-radius-sm); border-radius: var(--ov-meet-radius-sm);
min-width: 120px; min-width: 120px;
color: var(--ov-meet-text-secondary); color: var(--ov-meet-text-secondary);
@ -110,7 +110,7 @@
// Room Creation Loading State // Room Creation Loading State
.room-creation-loading { .room-creation-loading {
@include ov-flex-center; @include design-tokens.ov-flex-center;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
min-height: 400px; min-height: 400px;
@ -118,7 +118,7 @@
padding: var(--ov-meet-spacing-xl); padding: var(--ov-meet-spacing-xl);
.loading-content { .loading-content {
@include ov-flex-center; @include design-tokens.ov-flex-center;
flex-direction: column; flex-direction: column;
gap: var(--ov-meet-spacing-xl); gap: var(--ov-meet-spacing-xl);
width: 100%; width: 100%;
@ -127,12 +127,12 @@
margin-bottom: var(--ov-meet-spacing-lg); margin-bottom: var(--ov-meet-spacing-lg);
.loading-title { .loading-title {
@include ov-flex-center; @include design-tokens.ov-flex-center;
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
margin-bottom: var(--ov-meet-spacing-md); margin-bottom: var(--ov-meet-spacing-md);
.loading-icon { .loading-icon {
@include ov-icon(xl); @include design-tokens.ov-icon(xl);
animation: pulse 2s ease-in-out infinite; animation: pulse 2s ease-in-out infinite;
} }
@ -168,7 +168,7 @@
} }
// Responsive design using the system mixins // Responsive design using the system mixins
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
.wizard-container { .wizard-container {
padding: var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-md);
} }
@ -196,7 +196,7 @@
} }
} }
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
.wizard-header { .wizard-header {
h2 { h2 {
font-size: var(--ov-meet-font-size-lg); font-size: var(--ov-meet-font-size-lg);

16
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/recording-config/recording-config.component.scss
View File

@ -1,8 +1,8 @@
@import '../../../../../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../../../../../src/assets/styles/design-tokens';
.recording-config-step { .recording-config-step {
@include ov-page-content; @include design-tokens.ov-page-content;
@include ov-container; @include design-tokens.ov-container;
padding: var(--ov-meet-spacing-sm); padding: var(--ov-meet-spacing-sm);
@ -12,7 +12,7 @@
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
.step-icon { .step-icon {
@include ov-icon(xl); @include design-tokens.ov-icon(xl);
color: var(--ov-meet-icon-recordings); color: var(--ov-meet-icon-recordings);
margin-top: var(--ov-meet-spacing-xs); margin-top: var(--ov-meet-spacing-xs);
} }
@ -42,7 +42,7 @@
.recording-form { .recording-form {
.options-grid { .options-grid {
@include ov-grid-responsive(260px); @include design-tokens.ov-grid-responsive(260px);
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
} }
@ -57,7 +57,7 @@
margin-bottom: var(--ov-meet-spacing-lg); margin-bottom: var(--ov-meet-spacing-lg);
.access-icon { .access-icon {
@include ov-icon(md); @include design-tokens.ov-icon(md);
color: var(--ov-meet-icon-security); color: var(--ov-meet-icon-security);
margin-top: var(--ov-meet-spacing-xs); margin-top: var(--ov-meet-spacing-xs);
} }
@ -132,7 +132,7 @@
} }
// Responsive Design // Responsive Design
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
.step-header { .step-header {
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
@ -169,7 +169,7 @@
} }
} }
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
padding: var(--ov-meet-spacing-xs); padding: var(--ov-meet-spacing-xs);
.step-content .recording-form { .step-content .recording-form {

16
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/recording-layout/recording-layout.component.scss
View File

@ -1,8 +1,8 @@
@import '../../../../../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../../../../../src/assets/styles/design-tokens';
.recording-layout-step { .recording-layout-step {
@include ov-page-content; @include design-tokens.ov-page-content;
@include ov-container; @include design-tokens.ov-container;
padding: var(--ov-meet-spacing-sm); padding: var(--ov-meet-spacing-sm);
@ -12,7 +12,7 @@
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
.step-icon { .step-icon {
@include ov-icon(xl); @include design-tokens.ov-icon(xl);
color: var(--ov-meet-icon-recordings); color: var(--ov-meet-icon-recordings);
margin-top: var(--ov-meet-spacing-xs); margin-top: var(--ov-meet-spacing-xs);
} }
@ -42,11 +42,11 @@
.layout-form { .layout-form {
.options-grid { .options-grid {
@include ov-grid-responsive(280px); @include design-tokens.ov-grid-responsive(280px);
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
// Custom layout for recording layout selector // Custom layout for recording layout selector
@include ov-tablet-up { @include design-tokens.ov-tablet-up {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
max-width: 900px; max-width: 900px;
margin: 0 auto; margin: 0 auto;
@ -84,7 +84,7 @@
} }
// Responsive Design // Responsive Design
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
.step-header { .step-header {
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
@ -123,7 +123,7 @@
} }
} }
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
padding: var(--ov-meet-spacing-xs); padding: var(--ov-meet-spacing-xs);
.step-content .layout-form .options-grid { .step-content .layout-form .options-grid {

16
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/recording-trigger/recording-trigger.component.scss
View File

@ -1,8 +1,8 @@
@import '../../../../../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../../../../../src/assets/styles/design-tokens';
.recording-trigger-step { .recording-trigger-step {
@include ov-page-content; @include design-tokens.ov-page-content;
@include ov-container; @include design-tokens.ov-container;
padding: var(--ov-meet-spacing-sm); padding: var(--ov-meet-spacing-sm);
@ -13,7 +13,7 @@
margin-bottom: var(--ov-meet-spacing-md); margin-bottom: var(--ov-meet-spacing-md);
.step-icon { .step-icon {
@include ov-icon(lg); @include design-tokens.ov-icon(lg);
color: var(--ov-meet-icon-recordings); color: var(--ov-meet-icon-recordings);
margin-top: var(--ov-meet-spacing-xs); margin-top: var(--ov-meet-spacing-xs);
} }
@ -43,11 +43,11 @@
.trigger-form { .trigger-form {
.options-grid { .options-grid {
@include ov-grid-responsive(260px); @include design-tokens.ov-grid-responsive(260px);
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
// On larger screens, limit to 3 cards per row // On larger screens, limit to 3 cards per row
@include ov-tablet-up { @include design-tokens.ov-tablet-up {
justify-content: space-between; justify-content: space-between;
} }
} }
@ -55,7 +55,7 @@
} }
// Responsive Design // Responsive Design
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
.step-header { .step-header {
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
@ -74,7 +74,7 @@
} }
} }
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
padding: var(--ov-meet-spacing-xs); padding: var(--ov-meet-spacing-xs);
.step-content .trigger-form .options-grid { .step-content .trigger-form .options-grid {

12
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-config/room-config.component.scss
View File

@ -1,8 +1,8 @@
@import '../../../../../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../../../../../src/assets/styles/design-tokens';
.room-config-step { .room-config-step {
@include ov-page-content; @include design-tokens.ov-page-content;
@include ov-container; @include design-tokens.ov-container;
padding: var(--ov-meet-spacing-sm); padding: var(--ov-meet-spacing-sm);
@ -13,7 +13,7 @@
margin-bottom: var(--ov-meet-spacing-lg); margin-bottom: var(--ov-meet-spacing-lg);
.step-icon { .step-icon {
@include ov-icon(xl); @include design-tokens.ov-icon(xl);
color: var(--ov-meet-icon-settings); color: var(--ov-meet-icon-settings);
margin-top: var(--ov-meet-spacing-xs); margin-top: var(--ov-meet-spacing-xs);
} }
@ -60,7 +60,7 @@
} }
.config-card { .config-card {
@include ov-card; @include design-tokens.ov-card;
border: 2px solid var(--ov-meet-border-secondary); border: 2px solid var(--ov-meet-border-secondary);
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
cursor: default; cursor: default;
@ -88,7 +88,7 @@
flex: 1; flex: 1;
.feature-icon { .feature-icon {
@include ov-icon(lg); @include design-tokens.ov-icon(lg);
color: var(--ov-meet-icon-primary); color: var(--ov-meet-icon-primary);
margin-top: var(--ov-meet-spacing-xs); margin-top: var(--ov-meet-spacing-xs);
} }

26
frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-details/room-details.component.scss
View File

@ -1,8 +1,8 @@
@import '../../../../../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../../../../../src/assets/styles/design-tokens';
.room-details-step { .room-details-step {
@include ov-page-content; @include design-tokens.ov-page-content;
@include ov-container; @include design-tokens.ov-container;
padding: var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-md);
@ -13,7 +13,7 @@
// margin-bottom: var(--ov-meet-spacing-xl); // margin-bottom: var(--ov-meet-spacing-xl);
.step-icon { .step-icon {
@include ov-icon(xl); @include design-tokens.ov-icon(xl);
color: var(--ov-meet-icon-rooms); color: var(--ov-meet-icon-rooms);
margin-top: var(--ov-meet-spacing-xs); margin-top: var(--ov-meet-spacing-xs);
} }
@ -42,7 +42,7 @@
// margin-bottom: var(--ov-meet-spacing-xl); // margin-bottom: var(--ov-meet-spacing-xl);
.room-details-form { .room-details-form {
@include ov-grid-responsive(280px); @include design-tokens.ov-grid-responsive(280px);
gap: var(--ov-meet-spacing-lg); gap: var(--ov-meet-spacing-lg);
.form-field { .form-field {
@ -66,23 +66,23 @@
// Icon styling in form fields // Icon styling in form fields
.mat-mdc-form-field-icon-suffix { .mat-mdc-form-field-icon-suffix {
mat-icon { mat-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
} }
} }
.mat-datepicker-toggle { .mat-datepicker-toggle {
mat-icon { mat-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
} }
} }
// Clear button styling // Clear button styling
.clear-date-button { .clear-date-button {
@include ov-button-base; @include design-tokens.ov-button-base;
padding: var(--ov-meet-spacing-xs); padding: var(--ov-meet-spacing-xs);
mat-icon { mat-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
} }
} }
} }
@ -122,7 +122,7 @@
color: var(--ov-meet-text-primary); color: var(--ov-meet-text-primary);
.policies-icon { .policies-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
color: var(--ov-meet-primary); color: var(--ov-meet-primary);
} }
} }
@ -162,7 +162,7 @@
border-left: 3px solid var(--ov-meet-primary); border-left: 3px solid var(--ov-meet-primary);
.hint-icon { .hint-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
color: var(--ov-meet-color-warning); color: var(--ov-meet-color-warning);
} }
@ -176,7 +176,7 @@
} }
} }
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
.step-header { .step-header {
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
@ -220,7 +220,7 @@
} }
} }
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
.step-content { .step-content {
.room-details-form { .room-details-form {
grid-template-columns: 1fr; grid-template-columns: 1fr;

4
frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.scss
View File

@ -1,4 +1,4 @@
@import '../../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../../src/assets/styles/design-tokens';
.form-field-header { .form-field-header {
position: relative; position: relative;
@ -105,7 +105,7 @@
border-color: var(--ov-meet-color-error); border-color: var(--ov-meet-color-error);
} }
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
flex-direction: column; flex-direction: column;
.mat-mdc-button, .mat-mdc-button,

4
frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.ts
View File

@ -17,7 +17,7 @@ import { MatInputModule } from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select'; import { MatSelectModule } from '@angular/material/select';
import { MatTooltipModule } from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import { ProFeatureBadgeComponent } from '@lib/components'; // import { ProFeatureBadgeComponent } from '@lib/components';
import { AuthService, GlobalConfigService, NotificationService } from '@lib/services'; import { AuthService, GlobalConfigService, NotificationService } from '@lib/services';
import { AuthMode } from '@lib/typings/ce'; import { AuthMode } from '@lib/typings/ce';
@ -34,7 +34,7 @@ import { AuthMode } from '@lib/typings/ce';
MatProgressSpinnerModule, MatProgressSpinnerModule,
MatDividerModule, MatDividerModule,
ReactiveFormsModule, ReactiveFormsModule,
ProFeatureBadgeComponent // ProFeatureBadgeComponent
], ],
templateUrl: './users-permissions.component.html', templateUrl: './users-permissions.component.html',
styleUrl: './users-permissions.component.scss' styleUrl: './users-permissions.component.scss'

46
frontend/projects/shared-meet-components/src/lib/pages/error/error.component.scss
View File

@ -1,14 +1,14 @@
@import '../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../src/assets/styles/design-tokens';
.error-page { .error-page {
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
@include ov-flex-center; @include design-tokens.ov-flex-center;
min-height: 100vh; min-height: 100vh;
background: var(--ov-meet-background-color); background: var(--ov-meet-background-color);
padding: var(--ov-meet-spacing-lg); padding: var(--ov-meet-spacing-lg);
.error-container { .error-container {
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -16,7 +16,7 @@
max-width: 800px; max-width: 800px;
width: 100%; width: 100%;
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
flex-direction: column; flex-direction: column;
gap: var(--ov-meet-spacing-xl); gap: var(--ov-meet-spacing-xl);
text-align: center; text-align: center;
@ -29,15 +29,15 @@
gap: var(--ov-meet-spacing-lg); gap: var(--ov-meet-spacing-lg);
.error-icon-section { .error-icon-section {
@include ov-flex-center; @include design-tokens.ov-flex-center;
justify-content: flex-start; justify-content: flex-start;
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
justify-content: center; justify-content: center;
} }
.error-main-icon { .error-main-icon {
@include ov-icon(xl); @include design-tokens.ov-icon(xl);
color: var(--ov-meet-color-error); color: var(--ov-meet-color-error);
background: rgba(var(--ov-meet-color-error), 0.1); background: rgba(var(--ov-meet-color-error), 0.1);
border-radius: var(--ov-meet-radius-circle); border-radius: var(--ov-meet-radius-circle);
@ -56,7 +56,7 @@
color: var(--ov-meet-text-primary); color: var(--ov-meet-text-primary);
line-height: var(--ov-meet-line-height-tight); line-height: var(--ov-meet-line-height-tight);
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
font-size: var(--ov-meet-font-size-xl); font-size: var(--ov-meet-font-size-xl);
} }
} }
@ -68,11 +68,11 @@
line-height: var(--ov-meet-line-height-normal); line-height: var(--ov-meet-line-height-normal);
max-width: 400px; max-width: 400px;
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
max-width: none; max-width: none;
} }
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
font-size: var(--ov-meet-font-size-sm); font-size: var(--ov-meet-font-size-sm);
} }
} }
@ -83,18 +83,18 @@
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
margin-top: var(--ov-meet-spacing-md); margin-top: var(--ov-meet-spacing-md);
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
justify-content: center; justify-content: center;
} }
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.action-button { .action-button {
@include ov-button-base; @include design-tokens.ov-button-base;
@include ov-flex-center; @include design-tokens.ov-flex-center;
gap: var(--ov-meet-spacing-xs); gap: var(--ov-meet-spacing-xs);
min-width: 120px; min-width: 120px;
@ -110,10 +110,10 @@
} }
mat-icon { mat-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
} }
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
min-width: 200px; min-width: 200px;
} }
} }
@ -122,14 +122,14 @@
.error-illustration { .error-illustration {
flex: 1; flex: 1;
@include ov-flex-center; @include design-tokens.ov-flex-center;
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
order: -1; order: -1;
} }
.illustration-container { .illustration-container {
@include ov-flex-center; @include design-tokens.ov-flex-center;
flex-direction: column; flex-direction: column;
gap: var(--ov-meet-spacing-lg); gap: var(--ov-meet-spacing-lg);
opacity: 0.6; opacity: 0.6;
@ -140,7 +140,7 @@
height: 120px; height: 120px;
color: var(--ov-meet-text-hint); color: var(--ov-meet-text-hint);
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
font-size: 80px; font-size: 80px;
width: 80px; width: 80px;
height: 80px; height: 80px;
@ -158,7 +158,7 @@
font-weight: var(--ov-meet-font-weight-bold); font-weight: var(--ov-meet-font-weight-bold);
color: var(--ov-meet-text-secondary); color: var(--ov-meet-text-secondary);
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
font-size: var(--ov-meet-font-size-lg); font-size: var(--ov-meet-font-size-lg);
} }
} }
@ -179,7 +179,7 @@
} }
// Enhanced responsive design // Enhanced responsive design
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
.error-page { .error-page {
padding: var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-md);

30
frontend/projects/shared-meet-components/src/lib/pages/login/login.component.scss
View File

@ -1,16 +1,16 @@
@import '../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../src/assets/styles/design-tokens';
// Login Page Container - Full height centered layout // Login Page Container - Full height centered layout
.ov-page-container { .ov-page-container {
@include ov-flex-center; @include design-tokens.ov-flex-center;
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
min-height: 100vh; min-height: 100vh;
background: var(--ov-meet-background-color); background: var(--ov-meet-background-color);
padding: var(--ov-meet-spacing-lg); padding: var(--ov-meet-spacing-lg);
} }
.login-page-content { .login-page-content {
@include ov-flex-center; @include design-tokens.ov-flex-center;
flex-direction: column; flex-direction: column;
// gap: var(--ov-meet-spacing-xl); // gap: var(--ov-meet-spacing-xl);
width: 100%; width: 100%;
@ -19,10 +19,10 @@
// Login Header - Using get-started-header mixin for consistency // Login Header - Using get-started-header mixin for consistency
.get-started-header { .get-started-header {
@include ov-get-started-header; @include design-tokens.ov-get-started-header;
.login-icon { .login-icon {
@include ov-icon(xl); @include design-tokens.ov-icon(xl);
margin-bottom: var(--ov-meet-spacing-md); margin-bottom: var(--ov-meet-spacing-md);
} }
@ -52,8 +52,8 @@
// Login Card - Form section // Login Card - Form section
.login-card { .login-card {
@include ov-card; @include design-tokens.ov-card;
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
flex: 1; flex: 1;
box-shadow: none; box-shadow: none;
border-radius: 0; border-radius: 0;
@ -75,7 +75,7 @@
width: 100%; width: 100%;
mat-icon { mat-icon {
@include ov-icon(md); @include design-tokens.ov-icon(md);
color: var(--ov-meet-text-secondary); color: var(--ov-meet-text-secondary);
} }
} }
@ -92,7 +92,7 @@
margin-top: var(--ov-meet-spacing-md); margin-top: var(--ov-meet-spacing-md);
.primary-button { .primary-button {
@include ov-button-base; @include design-tokens.ov-button-base;
width: 100%; width: 100%;
padding: var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-md);
font-size: var(--ov-meet-font-size-md); font-size: var(--ov-meet-font-size-md);
@ -103,8 +103,8 @@
// Brand Section - Visual branding area // Brand Section - Visual branding area
.brand-section { .brand-section {
@include ov-flex-center; @include design-tokens.ov-flex-center;
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
flex: 1; flex: 1;
background: var(--ov-meet-color-secondary); background: var(--ov-meet-color-secondary);
padding: var(--ov-meet-spacing-xl); padding: var(--ov-meet-spacing-xl);
@ -123,7 +123,7 @@
} }
// Responsive design using design system breakpoints // Responsive design using design system breakpoints
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
.ov-page-container { .ov-page-container {
padding: var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-md);
} }
@ -157,7 +157,7 @@
} }
} }
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
.ov-page-container { .ov-page-container {
padding: var(--ov-meet-spacing-sm); padding: var(--ov-meet-spacing-sm);
} }
@ -190,7 +190,7 @@
.get-started-header { .get-started-header {
.login-icon { .login-icon {
@include ov-icon(lg); @include design-tokens.ov-icon(lg);
} }
h1 { h1 {

26
frontend/projects/shared-meet-components/src/lib/pages/meeting/end-meeting/end-meeting.component.scss
View File

@ -1,7 +1,7 @@
@import '../../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../../src/assets/styles/design-tokens';
.disconnected-container { .disconnected-container {
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -11,7 +11,7 @@
} }
.disconnect-content { .disconnect-content {
@include ov-card; @include design-tokens.ov-card;
max-width: 520px; max-width: 520px;
width: 100%; width: 100%;
text-align: center; text-align: center;
@ -19,7 +19,7 @@
background: var(--ov-meet-surface-elevated); background: var(--ov-meet-surface-elevated);
box-shadow: var(--ov-meet-shadow-lg); box-shadow: var(--ov-meet-shadow-lg);
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
padding: var(--ov-meet-spacing-xl); padding: var(--ov-meet-spacing-xl);
margin: var(--ov-meet-spacing-md); margin: var(--ov-meet-spacing-md);
max-width: calc(100vw - 2 * var(--ov-meet-spacing-md)); max-width: calc(100vw - 2 * var(--ov-meet-spacing-md));
@ -31,6 +31,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative;
.logo-image { .logo-image {
width: 50px; width: 50px;
@ -39,7 +40,7 @@
display: block; display: block;
transition: all var(--ov-meet-transition-normal); transition: all var(--ov-meet-transition-normal);
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
width: 40px; width: 40px;
} }
} }
@ -53,13 +54,12 @@
border-radius: var(--ov-meet-radius-circle); border-radius: var(--ov-meet-radius-circle);
z-index: -1; z-index: -1;
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
width: 64px; width: 64px;
height: 64px; height: 64px;
} }
} }
position: relative;
} }
.disconnect-message { .disconnect-message {
@ -72,7 +72,7 @@
margin: 0 0 var(--ov-meet-spacing-sm) 0; margin: 0 0 var(--ov-meet-spacing-sm) 0;
line-height: var(--ov-meet-line-height-tight); line-height: var(--ov-meet-line-height-tight);
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
font-size: var(--ov-meet-font-size-xl); font-size: var(--ov-meet-font-size-xl);
} }
} }
@ -86,7 +86,7 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
font-size: var(--ov-meet-font-size-sm); font-size: var(--ov-meet-font-size-sm);
} }
} }
@ -107,7 +107,7 @@
font-weight: var(--ov-meet-font-weight-medium); font-weight: var(--ov-meet-font-weight-medium);
} }
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
.footer-text { .footer-text {
font-size: var(--ov-meet-font-size-xs); font-size: var(--ov-meet-font-size-xs);
flex-direction: column; flex-direction: column;
@ -116,12 +116,12 @@
} }
.quick-actions { .quick-actions {
@include ov-flex-center; @include design-tokens.ov-flex-center;
margin-top: var(--ov-meet-spacing-md); margin-top: var(--ov-meet-spacing-md);
.quick-action-button { .quick-action-button {
@include ov-button-base; @include design-tokens.ov-button-base;
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);

36
frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.scss
View File

@ -1,9 +1,9 @@
@import '../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../src/assets/styles/design-tokens';
// Room Access Container - Main layout using design tokens // Room Access Container - Main layout using design tokens
.room-access-container { .room-access-container {
@include ov-container; @include design-tokens.ov-container;
@include ov-page-content; @include design-tokens.ov-page-content;
padding-top: var(--ov-meet-spacing-xxl); padding-top: var(--ov-meet-spacing-xxl);
background: var(--ov-meet-background-color); background: var(--ov-meet-background-color);
gap: 0; gap: 0;
@ -11,14 +11,14 @@
// Room Header - Clean title section // Room Header - Clean title section
.room-header { .room-header {
@include ov-flex-center; @include design-tokens.ov-flex-center;
flex-direction: column; flex-direction: column;
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
margin-bottom: var(--ov-meet-spacing-xxl); margin-bottom: var(--ov-meet-spacing-xxl);
text-align: center; text-align: center;
.room-icon { .room-icon {
@include ov-icon(xl); @include design-tokens.ov-icon(xl);
color: var(--ov-meet-icon-rooms); color: var(--ov-meet-icon-rooms);
margin-bottom: var(--ov-meet-spacing-sm); margin-bottom: var(--ov-meet-spacing-sm);
} }
@ -36,7 +36,7 @@
// Action Cards Grid - Responsive layout // Action Cards Grid - Responsive layout
.action-cards-grid { .action-cards-grid {
@include ov-grid-responsive(320px); @include design-tokens.ov-grid-responsive(320px);
gap: var(--ov-meet-spacing-xl); gap: var(--ov-meet-spacing-xl);
margin-bottom: var(--ov-meet-spacing-xxl); margin-bottom: var(--ov-meet-spacing-xxl);
justify-content: center; justify-content: center;
@ -52,7 +52,7 @@
} }
} }
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: var(--ov-meet-spacing-lg); gap: var(--ov-meet-spacing-lg);
@ -67,9 +67,9 @@
// Action Card Base - Consistent card styling // Action Card Base - Consistent card styling
.action-card { .action-card {
@include ov-card; @include design-tokens.ov-card;
@include ov-hover-lift(-4px); @include design-tokens.ov-hover-lift(-4px);
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
min-height: 300px; min-height: 300px;
@ -86,7 +86,7 @@
flex-shrink: 0; flex-shrink: 0;
.card-icon { .card-icon {
@include ov-icon(lg); @include design-tokens.ov-icon(lg);
flex-shrink: 0; flex-shrink: 0;
} }
@ -139,13 +139,13 @@
} }
.room-closed-message { .room-closed-message {
@include ov-flex-center; @include design-tokens.ov-flex-center;
flex-direction: column; flex-direction: column;
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
text-align: center; text-align: center;
.warning-icon { .warning-icon {
@include ov-icon(xl); @include design-tokens.ov-icon(xl);
color: var(--ov-meet-color-warning); color: var(--ov-meet-color-warning);
} }
@ -184,7 +184,7 @@
} }
.join-button { .join-button {
@include ov-button-base; @include design-tokens.ov-button-base;
height: 56px; height: 56px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -212,7 +212,7 @@
} }
.recordings-button { .recordings-button {
@include ov-button-base; @include design-tokens.ov-button-base;
height: 56px; height: 56px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -223,7 +223,7 @@
// Quick Actions - Footer actions // Quick Actions - Footer actions
.quick-actions { .quick-actions {
@include ov-flex-center; @include design-tokens.ov-flex-center;
margin-top: var(--ov-meet-spacing-xl); margin-top: var(--ov-meet-spacing-xl);
.quick-action-button { .quick-action-button {
@ -231,7 +231,7 @@
align-items: center; align-items: center;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
color: var(--ov-meet-text-secondary); color: var(--ov-meet-text-secondary);
@include ov-theme-transition; @include design-tokens.ov-theme-transition;
&:hover { &:hover {
color: var(--ov-meet-text-primary); color: var(--ov-meet-text-primary);
@ -257,7 +257,7 @@
} }
// Responsive adjustments // Responsive adjustments
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
.room-access-container { .room-access-container {
padding: 0; padding: 0;
padding-top: var(--ov-meet-spacing-sm); padding-top: var(--ov-meet-spacing-sm);

32
frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.scss
View File

@ -1,4 +1,4 @@
@import '../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../src/assets/styles/design-tokens';
.ov-page-container { .ov-page-container {
height: 100vh; height: 100vh;
@ -6,8 +6,8 @@
} }
.recordings-page-header { .recordings-page-header {
@include ov-container; @include design-tokens.ov-container;
@include ov-page-content; @include design-tokens.ov-page-content;
gap: 0; gap: 0;
padding-bottom: 0; padding-bottom: 0;
padding-top: var(--ov-meet-spacing-xxl); padding-top: var(--ov-meet-spacing-xxl);
@ -16,13 +16,13 @@
// Room Header // Room Header
.recordings-header { .recordings-header {
@include ov-flex-center; @include design-tokens.ov-flex-center;
flex-direction: row; flex-direction: row;
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
text-align: center; text-align: center;
.room-icon { .room-icon {
@include ov-icon(xl); @include design-tokens.ov-icon(xl);
color: var(--ov-meet-icon-recordings); color: var(--ov-meet-icon-recordings);
margin-bottom: var(--ov-meet-spacing-sm); margin-bottom: var(--ov-meet-spacing-sm);
} }
@ -46,23 +46,23 @@
// === CONTENT SECTIONS === // === CONTENT SECTIONS ===
.recordings-content { .recordings-content {
@include ov-container; @include design-tokens.ov-container;
@include ov-page-content; @include design-tokens.ov-page-content;
margin-top: var(--ov-meet-spacing-xl); margin-top: var(--ov-meet-spacing-xl);
flex: 1; flex: 1;
padding-bottom: var(--ov-meet-spacing-xl); // Add bottom padding for better UX padding-bottom: var(--ov-meet-spacing-xl); // Add bottom padding for better UX
} }
.recordings-loading-container { .recordings-loading-container {
@include ov-container; @include design-tokens.ov-container;
@include ov-flex-center; @include design-tokens.ov-flex-center;
min-height: 60vh; min-height: 60vh;
padding: var(--ov-meet-spacing-xxl); padding: var(--ov-meet-spacing-xxl);
} }
.loading-card { .loading-card {
@include ov-card; @include design-tokens.ov-card;
@include ov-flex-center; @include design-tokens.ov-flex-center;
flex-direction: column; flex-direction: column;
gap: var(--ov-meet-spacing-lg); gap: var(--ov-meet-spacing-lg);
text-align: center; text-align: center;
@ -70,7 +70,7 @@
padding: var(--ov-meet-spacing-xxl); padding: var(--ov-meet-spacing-xxl);
.loading-icon { .loading-icon {
@include ov-icon(xl); @include design-tokens.ov-icon(xl);
color: var(--ov-meet-icon-recordings); color: var(--ov-meet-icon-recordings);
margin-bottom: var(--ov-meet-spacing-md); margin-bottom: var(--ov-meet-spacing-md);
} }
@ -96,7 +96,7 @@
// === RESPONSIVE DESIGN === // === RESPONSIVE DESIGN ===
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
.recordings-page-header { .recordings-page-header {
padding-top: var(--ov-meet-spacing-lg); padding-top: var(--ov-meet-spacing-lg);
gap: var(--ov-meet-spacing-lg); gap: var(--ov-meet-spacing-lg);
@ -104,7 +104,7 @@
.recordings-header { .recordings-header {
.room-icon { .room-icon {
@include ov-icon(lg); @include design-tokens.ov-icon(lg);
} }
.room-info { .room-info {
@ -127,7 +127,7 @@
} }
} }
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
.recordings-page-header { .recordings-page-header {
padding: var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-md);
} }
@ -142,7 +142,7 @@
padding: var(--ov-meet-spacing-lg); padding: var(--ov-meet-spacing-lg);
.loading-icon { .loading-icon {
@include ov-icon(lg); @include design-tokens.ov-icon(lg);
} }
.loading-title { .loading-title {

68
frontend/projects/shared-meet-components/src/lib/pages/view-recording/view-recording.component.scss
View File

@ -1,4 +1,4 @@
@import '../../../../../../src/assets/styles/design-tokens'; @use '../../../../../../src/assets/styles/design-tokens';
// === MOBILE RESPONSIVE EXPERIENCE === // === MOBILE RESPONSIVE EXPERIENCE ===
@ -10,7 +10,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@include ov-tablet-up { @include design-tokens.ov-tablet-up {
display: none; // Hide on tablet and desktop display: none; // Hide on tablet and desktop
} }
} }
@ -38,7 +38,7 @@
flex-shrink: 0; flex-shrink: 0;
mat-icon { mat-icon {
@include ov-icon(md); @include design-tokens.ov-icon(md);
} }
} }
@ -66,13 +66,13 @@
.recording-date, .recording-date,
.recording-duration { .recording-duration {
@include ov-flex-center; @include design-tokens.ov-flex-center;
gap: var(--ov-meet-spacing-xs); gap: var(--ov-meet-spacing-xs);
font-size: var(--ov-meet-font-size-xs); font-size: var(--ov-meet-font-size-xs);
color: var(--ov-meet-text-secondary); color: var(--ov-meet-text-secondary);
mat-icon { mat-icon {
@include ov-icon(xs); @include design-tokens.ov-icon(xs);
} }
} }
} }
@ -94,14 +94,14 @@
} }
mat-icon { mat-icon {
@include ov-icon(md); @include design-tokens.ov-icon(md);
} }
} }
} }
} }
.status-bar { .status-bar {
@include ov-flex-center; @include design-tokens.ov-flex-center;
gap: var(--ov-meet-spacing-xs); gap: var(--ov-meet-spacing-xs);
justify-content: center; justify-content: center;
background: color-mix(in srgb, var(--ov-meet-color-warning) 12%, transparent); background: color-mix(in srgb, var(--ov-meet-color-warning) 12%, transparent);
@ -111,7 +111,7 @@
color: var(--ov-meet-color-warning); color: var(--ov-meet-color-warning);
.status-icon { .status-icon {
@include ov-icon(xs); @include design-tokens.ov-icon(xs);
} }
.status-text { .status-text {
@ -146,7 +146,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
@include ov-flex-center; @include design-tokens.ov-flex-center;
flex-direction: column; flex-direction: column;
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
background: var(--ov-meet-background-color); background: var(--ov-meet-background-color);
@ -157,7 +157,7 @@
.video-error-container, .video-error-container,
.video-unavailable-container { .video-unavailable-container {
@include ov-flex-center; @include design-tokens.ov-flex-center;
min-height: 300px; min-height: 300px;
background: var(--ov-meet-surface-color); background: var(--ov-meet-surface-color);
border-radius: var(--ov-meet-radius-lg); border-radius: var(--ov-meet-radius-lg);
@ -172,7 +172,7 @@
.error-icon, .error-icon,
.status-icon { .status-icon {
@include ov-icon(xl); @include design-tokens.ov-icon(xl);
margin-bottom: var(--ov-meet-spacing-md); margin-bottom: var(--ov-meet-spacing-md);
} }
@ -199,7 +199,7 @@
} }
button { button {
@include ov-button-base; @include design-tokens.ov-button-base;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
@ -210,8 +210,8 @@
// === MAIN PAGE LAYOUT === // === MAIN PAGE LAYOUT ===
.recording-page-content { .recording-page-content {
@include ov-container; @include design-tokens.ov-container;
@include ov-page-content; @include design-tokens.ov-page-content;
max-width: 1000px; max-width: 1000px;
padding-top: var(--ov-meet-spacing-xl); padding-top: var(--ov-meet-spacing-xl);
} }
@ -219,7 +219,7 @@
// === LOADING STATES === // === LOADING STATES ===
.loading-container { .loading-container {
@include ov-flex-center; @include design-tokens.ov-flex-center;
flex-direction: column; flex-direction: column;
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
height: 60vh; height: 60vh;
@ -235,7 +235,7 @@
// === ERROR STATES === // === ERROR STATES ===
.error-container { .error-container {
@include ov-flex-center; @include design-tokens.ov-flex-center;
min-height: 60vh; min-height: 60vh;
padding: var(--ov-meet-spacing-xl); padding: var(--ov-meet-spacing-xl);
@ -244,7 +244,7 @@
max-width: 500px; max-width: 500px;
.error-icon { .error-icon {
@include ov-icon(xl); @include design-tokens.ov-icon(xl);
color: var(--ov-meet-color-error); color: var(--ov-meet-color-error);
margin-bottom: var(--ov-meet-spacing-md); margin-bottom: var(--ov-meet-spacing-md);
} }
@ -270,7 +270,7 @@
flex-wrap: wrap; flex-wrap: wrap;
button { button {
@include ov-button-base; @include design-tokens.ov-button-base;
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
@ -290,7 +290,7 @@
align-items: flex-start; align-items: flex-start;
gap: var(--ov-meet-spacing-lg); gap: var(--ov-meet-spacing-lg);
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
} }
@ -311,7 +311,7 @@
color: var(--ov-meet-text-primary); color: var(--ov-meet-text-primary);
line-height: var(--ov-meet-line-height-tight); line-height: var(--ov-meet-line-height-tight);
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
font-size: var(--ov-meet-font-size-xxl); font-size: var(--ov-meet-font-size-xxl);
} }
} }
@ -322,31 +322,31 @@
gap: var(--ov-meet-spacing-lg); gap: var(--ov-meet-spacing-lg);
margin-bottom: var(--ov-meet-spacing-sm); margin-bottom: var(--ov-meet-spacing-sm);
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
flex-direction: column; flex-direction: column;
gap: var(--ov-meet-spacing-xs); gap: var(--ov-meet-spacing-xs);
} }
.recording-date, .recording-date,
.recording-duration { .recording-duration {
@include ov-flex-center; @include design-tokens.ov-flex-center;
gap: var(--ov-meet-spacing-xs); gap: var(--ov-meet-spacing-xs);
font-size: var(--ov-meet-font-size-sm); font-size: var(--ov-meet-font-size-sm);
color: var(--ov-meet-text-secondary); color: var(--ov-meet-text-secondary);
mat-icon { mat-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
} }
} }
} }
.recording-status { .recording-status {
@include ov-flex-center; @include design-tokens.ov-flex-center;
gap: var(--ov-meet-spacing-xs); gap: var(--ov-meet-spacing-xs);
justify-content: flex-start; justify-content: flex-start;
.status-icon { .status-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
&.complete { &.complete {
color: var(--ov-meet-color-success); color: var(--ov-meet-color-success);
@ -401,7 +401,7 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
@include ov-flex-center; @include design-tokens.ov-flex-center;
flex-direction: column; flex-direction: column;
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
background: var(--ov-meet-surface-color); background: var(--ov-meet-surface-color);
@ -412,7 +412,7 @@
.video-error-container, .video-error-container,
.video-unavailable-container { .video-unavailable-container {
@include ov-flex-center; @include design-tokens.ov-flex-center;
min-height: 300px; min-height: 300px;
background: var(--ov-meet-surface-color); background: var(--ov-meet-surface-color);
border-radius: var(--ov-meet-radius-lg); border-radius: var(--ov-meet-radius-lg);
@ -426,7 +426,7 @@
.error-icon, .error-icon,
.status-icon { .status-icon {
@include ov-icon(xl); @include design-tokens.ov-icon(xl);
margin-bottom: var(--ov-meet-spacing-md); margin-bottom: var(--ov-meet-spacing-md);
} }
@ -453,7 +453,7 @@
} }
button { button {
@include ov-button-base; @include design-tokens.ov-button-base;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
@ -469,13 +469,13 @@
align-self: self-end; align-self: self-end;
.primary-actions { .primary-actions {
@include ov-flex-center; @include design-tokens.ov-flex-center;
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
flex-wrap: wrap; flex-wrap: wrap;
justify-content: end; justify-content: end;
.action-btn { .action-btn {
@include ov-button-base; @include design-tokens.ov-button-base;
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
@ -483,7 +483,7 @@
height: 48px; height: 48px;
mat-icon { mat-icon {
@include ov-icon(sm); @include design-tokens.ov-icon(sm);
} }
} }
} }
@ -491,7 +491,7 @@
// === RESPONSIVE ADJUSTMENTS === // === RESPONSIVE ADJUSTMENTS ===
@include ov-mobile-down { @include design-tokens.ov-mobile-down {
.recording-page-content { .recording-page-content {
padding: var(--ov-meet-spacing-lg); padding: var(--ov-meet-spacing-lg);
padding-top: var(--ov-meet-spacing-xl); padding-top: var(--ov-meet-spacing-xl);
@ -508,7 +508,7 @@
} }
} }
@include ov-tablet-down { @include design-tokens.ov-tablet-down {
.video-section { .video-section {
.video-error-container, .video-error-container,
.video-unavailable-container { .video-unavailable-container {

16
frontend/src/assets/styles/_design-tokens.scss
View File

@ -1,24 +1,24 @@
// Design Tokens - Centralized design variable system for OpenVidu Meet // Design Tokens - Centralized design variable system for OpenVidu Meet
// This file imports all modular design system files to maintain the same public API // This file forwards all modular design system files to maintain the same public API
// while organizing the code in a more maintainable structure // while organizing the code in a more maintainable structure
// Core tokens (colors, spacing, typography, etc.) // Core tokens (colors, spacing, typography, etc.)
@import 'tokens-core'; @forward 'tokens-core';
// Theme-specific variables (light/dark themes) // Theme-specific variables (light/dark themes)
@import 'tokens-themes'; @forward 'tokens-themes';
// Layout-related mixins (containers, grids, positioning) // Layout-related mixins (containers, grids, positioning)
@import 'mixins-layout'; @forward 'mixins-layout';
// Component-specific mixins (cards, buttons, headers) // Component-specific mixins (cards, buttons, headers)
@import 'mixins-components'; @forward 'mixins-components';
// Responsive design utilities // Responsive design utilities
@import 'mixins-responsive'; @forward 'mixins-responsive';
// Animation keyframes and classes // Animation keyframes and classes
@import 'animations'; @forward 'animations';
// Utility classes // Utility classes
@import 'utilities'; @forward 'utilities';

13
frontend/src/assets/styles/_mixins-components.scss
View File

@ -1,9 +1,12 @@
// Component Mixins - Specific mixins for UI components like cards, buttons, headers // Component Mixins - Specific mixins for UI components like cards, buttons, headers
// This file contains mixins for specific component patterns // This file contains mixins for specific component patterns
@use 'mixins-layout' as layout;
@use 'mixins-responsive' as responsive;
// Mixin for consistent cards // Mixin for consistent cards
@mixin ov-card { @mixin ov-card {
@include ov-theme-transition; @include layout.ov-theme-transition;
background: var(--ov-meet-card-background); background: var(--ov-meet-card-background);
border-radius: var(--ov-meet-card-border-radius); border-radius: var(--ov-meet-card-border-radius);
box-shadow: var(--ov-meet-card-shadow); box-shadow: var(--ov-meet-card-shadow);
@ -20,7 +23,7 @@
// Mixin for consistent buttons // Mixin for consistent buttons
@mixin ov-button-base { @mixin ov-button-base {
@include ov-theme-transition; @include layout.ov-theme-transition;
border-radius: var(--ov-meet-button-border-radius); border-radius: var(--ov-meet-button-border-radius);
font-weight: var(--ov-meet-button-font-weight); font-weight: var(--ov-meet-button-font-weight);
transition: transition:
@ -33,7 +36,7 @@
// Mixin for statistics and metrics // Mixin for statistics and metrics
@mixin ov-stat-card { @mixin ov-stat-card {
@include ov-card; @include ov-card;
@include ov-hover-lift(-2px); @include layout.ov-hover-lift(-2px);
.stat-content { .stat-content {
.stat-number { .stat-number {
@ -129,7 +132,7 @@
color: var(--ov-meet-text-primary); color: var(--ov-meet-text-primary);
text-transform: uppercase; text-transform: uppercase;
@include ov-tablet-down { @include responsive.ov-tablet-down {
font-size: var(--ov-meet-font-size-lg); font-size: var(--ov-meet-font-size-lg);
} }
} }
@ -141,7 +144,7 @@
} }
.section-icon { .section-icon {
@include ov-icon(lg); @include layout.ov-icon(lg);
color: var(--ov-meet-text-secondary); color: var(--ov-meet-text-secondary);
} }
} }

166
frontend/src/assets/styles/_utilities.scss
View File

@ -1,6 +1,10 @@
// Utility Classes - Helper classes for common styling patterns // Utility Classes - Helper classes for common styling patterns
// This file contains reusable utility classes // This file contains reusable utility classes
@use 'mixins-layout' as layout;
@use 'mixins-components' as components;
@use 'mixins-responsive' as responsive;
// === UTILITY CLASSES === // === UTILITY CLASSES ===
.ov-text-center { .ov-text-center {
@ -8,11 +12,11 @@
} }
.ov-text-truncate { .ov-text-truncate {
@include ov-text-truncate; @include layout.ov-text-truncate;
} }
.ov-flex-center { .ov-flex-center {
@include ov-flex-center; @include layout.ov-flex-center;
} }
.ov-meet-dialog { .ov-meet-dialog {
border-radius: var(--ov-meet-spacing-md); border-radius: var(--ov-meet-spacing-md);
@ -20,7 +24,7 @@
} }
.primary-button { .primary-button {
@include ov-button-base; @include components.ov-button-base;
background-color: var(--ov-meet-color-secondary); background-color: var(--ov-meet-color-secondary);
color: var(--ov-meet-text-on-secondary) !important; color: var(--ov-meet-text-on-secondary) !important;
@ -88,50 +92,50 @@
// === THEME CLASSES === // === THEME CLASSES ===
.ov-theme-transition { .ov-theme-transition {
@include ov-theme-transition; @include layout.ov-theme-transition;
} }
// === CONCEPTUAL ICON CLASSES === // === CONCEPTUAL ICON CLASSES ===
// Apply these classes directly to mat-icon elements for consistent conceptual colors // Apply these classes directly to mat-icon elements for consistent conceptual colors
.ov-room-icon { .ov-room-icon {
color: var(--ov-meet-icon-rooms) !important; color: var(--ov-meet-icon-rooms) !important;
@include ov-theme-transition; @include layout.ov-theme-transition;
} }
.ov-recording-icon { .ov-recording-icon {
color: var(--ov-meet-icon-recordings) !important; color: var(--ov-meet-icon-recordings) !important;
@include ov-theme-transition; @include layout.ov-theme-transition;
} }
.ov-users-permissions { .ov-users-permissions {
color: var(--ov-meet-icon-users-permissions) !important; color: var(--ov-meet-icon-users-permissions) !important;
@include ov-theme-transition; @include layout.ov-theme-transition;
} }
.ov-settings-icon { .ov-settings-icon {
color: var(--ov-meet-icon-settings) !important; color: var(--ov-meet-icon-settings) !important;
@include ov-theme-transition; @include layout.ov-theme-transition;
} }
.ov-developer-icon { .ov-developer-icon {
color: var(--ov-meet-icon-developer) !important; color: var(--ov-meet-icon-developer) !important;
@include ov-theme-transition; @include layout.ov-theme-transition;
} }
.ov-about-icon { .ov-about-icon {
color: var(--ov-meet-icon-about) !important; color: var(--ov-meet-icon-about) !important;
@include ov-theme-transition; @include layout.ov-theme-transition;
} }
.ov-surface { .ov-surface {
background-color: var(--ov-meet-surface-color); background-color: var(--ov-meet-surface-color);
color: var(--ov-meet-text-on-surface); color: var(--ov-meet-text-on-surface);
@include ov-theme-transition; @include layout.ov-theme-transition;
} }
.ov-background { .ov-background {
background-color: var(--ov-meet-background-color); background-color: var(--ov-meet-background-color);
color: var(--ov-meet-text-on-background); color: var(--ov-meet-text-on-background);
@include ov-theme-transition; @include layout.ov-theme-transition;
} }
.ov-text-primary { .ov-text-primary {
@ -239,7 +243,7 @@
color: var(--ov-meet-color-primary); color: var(--ov-meet-color-primary);
.selection-icon { .selection-icon {
@include ov-icon(md); @include layout.ov-icon(md);
} }
.selection-text { .selection-text {
@ -255,7 +259,7 @@
gap: var(--ov-meet-spacing-xs); gap: var(--ov-meet-spacing-xs);
button { button {
@include ov-theme-transition; @include layout.ov-theme-transition;
&[color='warn'] { &[color='warn'] {
color: var(--ov-meet-color-error); color: var(--ov-meet-color-error);
@ -384,7 +388,7 @@
font-weight: var(--ov-meet-font-weight-medium); font-weight: var(--ov-meet-font-weight-medium);
mat-icon { mat-icon {
@include ov-icon(sm); @include layout.ov-icon(sm);
} }
.status-label { .status-label {
@ -418,7 +422,7 @@
.mat-mdc-icon-button { .mat-mdc-icon-button {
.mat-icon { .mat-icon {
@include ov-icon(sm); @include layout.ov-icon(sm);
} }
&:hover { &:hover {
@ -454,7 +458,7 @@
// Empty State // Empty State
.ov-empty-state { .ov-empty-state {
@include ov-card; @include components.ov-card;
text-align: center; text-align: center;
margin: var(--ov-meet-spacing-xl) 0; margin: var(--ov-meet-spacing-xl) 0;
@ -479,10 +483,10 @@
.action-buttons { .action-buttons {
.refresh-btn { .refresh-btn {
@include ov-button-base; @include components.ov-button-base;
mat-icon { mat-icon {
@include ov-icon(md); @include layout.ov-icon(md);
margin-right: var(--ov-meet-spacing-sm); margin-right: var(--ov-meet-spacing-sm);
} }
} }
@ -492,7 +496,7 @@
// === NAVIGATION UTILITIES === // === NAVIGATION UTILITIES ===
// For console navigation and sidebar components // For console navigation and sidebar components
.meet-toolbar { .meet-toolbar {
@include ov-theme-transition; @include layout.ov-theme-transition;
background-color: var(--ov-meet-surface-color); background-color: var(--ov-meet-surface-color);
} }
@ -500,7 +504,7 @@
position: fixed; position: fixed;
top: 0; top: 0;
z-index: 2; z-index: 2;
@include ov-theme-transition; @include layout.ov-theme-transition;
.toolbar-title { .toolbar-title {
font-size: var(--ov-meet-font-size-xxl); font-size: var(--ov-meet-font-size-xxl);
@ -514,11 +518,11 @@
} }
.ov-sidenav { .ov-sidenav {
@include ov-theme-transition; @include layout.ov-theme-transition;
background-color: var(--ov-meet-surface-color); background-color: var(--ov-meet-surface-color);
padding-top: 3.5rem; padding-top: 3.5rem;
@include ov-tablet-up { @include responsive.ov-tablet-up {
padding-top: 4rem; padding-top: 4rem;
} }
@ -550,7 +554,7 @@
.ov-sidenav-content { .ov-sidenav-content {
padding-top: 3.5rem; padding-top: 3.5rem;
@include ov-tablet-up { @include responsive.ov-tablet-up {
padding-top: 4rem; padding-top: 4rem;
} }
@ -560,7 +564,7 @@
} }
.page-content { .page-content {
@include ov-container; @include layout.ov-container;
} }
} }
@ -569,7 +573,7 @@
text-align: justify; text-align: justify;
transition: var(--ov-meet-transition-normal); transition: var(--ov-meet-transition-normal);
border-radius: var(--ov-meet-radius-sm); border-radius: var(--ov-meet-radius-sm);
@include ov-theme-transition; @include layout.ov-theme-transition;
&:hover { &:hover {
background-color: var(--ov-meet-surface-hover) !important; background-color: var(--ov-meet-surface-hover) !important;
@ -590,13 +594,13 @@
font-size: var(--ov-meet-font-size-xs); font-size: var(--ov-meet-font-size-xs);
color: var(--ov-text-hint); color: var(--ov-text-hint);
text-align: center; text-align: center;
@include ov-theme-transition; @include layout.ov-theme-transition;
} }
.ov-nav-separator { .ov-nav-separator {
margin: 0; margin: 0;
border-top: 1px solid var(--ov-border-color); border-top: 1px solid var(--ov-border-color);
@include ov-theme-transition; @include layout.ov-theme-transition;
} }
// === MENU AND FILTER UTILITIES === // === MENU AND FILTER UTILITIES ===
@ -635,7 +639,7 @@
// Toolbar Responsive Patterns // Toolbar Responsive Patterns
.ov-data-toolbar { .ov-data-toolbar {
background-color: var(--ov-meet-background-color) !important; background-color: var(--ov-meet-background-color) !important;
@include ov-tablet-down { @include responsive.ov-tablet-down {
padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-md);
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
@ -656,7 +660,7 @@
} }
} }
@include ov-mobile-down { @include responsive.ov-mobile-down {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
@ -694,7 +698,7 @@
// Table Responsive Patterns // Table Responsive Patterns
.ov-table-container { .ov-table-container {
@include ov-mobile-down { @include responsive.ov-mobile-down {
margin: 0 calc(-1 * var(--ov-meet-spacing-sm)); margin: 0 calc(-1 * var(--ov-meet-spacing-sm));
border-radius: var(--ov-meet-radius-sm); border-radius: var(--ov-meet-radius-sm);
border-left: none; border-left: none;
@ -704,7 +708,7 @@
.ov-data-table { .ov-data-table {
background-color: rgba(var(--ov-meet-surface-color), 0.8); background-color: rgba(var(--ov-meet-surface-color), 0.8);
@include ov-tablet-down { @include responsive.ov-tablet-down {
.mat-mdc-header-cell, .mat-mdc-header-cell,
.mat-mdc-cell { .mat-mdc-cell {
padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-xs); padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-xs);
@ -721,7 +725,7 @@
} }
} }
@include ov-mobile-down { @include responsive.ov-mobile-down {
font-size: var(--ov-meet-font-size-xs); font-size: var(--ov-meet-font-size-xs);
.mat-mdc-header-cell { .mat-mdc-header-cell {
@ -747,7 +751,7 @@
} }
.ov-action-buttons { .ov-action-buttons {
@include ov-mobile-down { @include responsive.ov-mobile-down {
.mat-mdc-icon-button { .mat-mdc-icon-button {
width: 28px; width: 28px;
height: 28px; height: 28px;
@ -763,7 +767,7 @@
} }
.ov-empty-state { .ov-empty-state {
@include ov-mobile-down { @include responsive.ov-mobile-down {
padding: var(--ov-meet-spacing-xl) var(--ov-meet-spacing-lg); padding: var(--ov-meet-spacing-xl) var(--ov-meet-spacing-lg);
.empty-icon { .empty-icon {
@ -870,7 +874,7 @@
gap: var(--ov-meet-spacing-lg); gap: var(--ov-meet-spacing-lg);
align-items: flex-start; align-items: flex-start;
@include ov-tablet-down { @include responsive.ov-tablet-down {
flex-direction: column; flex-direction: column;
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
} }
@ -893,7 +897,7 @@
} }
mat-icon { mat-icon {
@include ov-icon(xl); @include layout.ov-icon(xl);
color: var(--ov-meet-text-hint); color: var(--ov-meet-text-hint);
} }
} }
@ -914,10 +918,10 @@
} }
button { button {
@include ov-button-base; @include components.ov-button-base;
mat-icon { mat-icon {
@include ov-icon(sm); @include layout.ov-icon(sm);
} }
} }
} }
@ -938,12 +942,12 @@
justify-content: center; justify-content: center;
animation: fadeIn 0.5s ease-out; animation: fadeIn 0.5s ease-out;
@include ov-tablet-down { @include responsive.ov-tablet-down {
padding: var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-md);
min-height: 50vh; min-height: 50vh;
} }
@include ov-mobile-down { @include responsive.ov-mobile-down {
padding: var(--ov-meet-spacing-lg); padding: var(--ov-meet-spacing-lg);
min-height: 40vh; min-height: 40vh;
} }
@ -964,7 +968,7 @@
margin-bottom: var(--ov-meet-spacing-md); margin-bottom: var(--ov-meet-spacing-md);
.loading-icon { .loading-icon {
@include ov-icon(xl); @include layout.ov-icon(xl);
animation: pulse 2s ease-in-out infinite; animation: pulse 2s ease-in-out infinite;
} }
@ -1005,31 +1009,31 @@
height: 100%; height: 100%;
overflow: auto; overflow: auto;
button { button {
@include ov-button-base; @include components.ov-button-base;
padding: var(--ov-meet-spacing-xs); padding: var(--ov-meet-spacing-xs);
} }
@include ov-tablet-down { @include responsive.ov-tablet-down {
padding: var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-md);
} }
@include ov-mobile-down { @include responsive.ov-mobile-down {
padding: var(--ov-meet-spacing-lg); padding: var(--ov-meet-spacing-lg);
} }
.page-header { .page-header {
@include ov-page-header; @include components.ov-page-header;
} }
.page-content { .page-content {
@include ov-page-content; @include components.ov-page-content;
} }
.get-started-header { .get-started-header {
@include ov-get-started-header; @include components.ov-get-started-header;
} }
.section-card { .section-card {
@include ov-section-card; @include components.ov-section-card;
} }
.section-divider { .section-divider {
@ -1047,7 +1051,7 @@
align-items: center; align-items: center;
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
@include ov-mobile-down { @include responsive.ov-mobile-down {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
@ -1059,13 +1063,13 @@
align-items: center; align-items: center;
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
@include ov-mobile-down { @include responsive.ov-mobile-down {
justify-content: center; justify-content: center;
} }
} }
.refresh-btn { .refresh-btn {
@include ov-theme-transition; @include layout.ov-theme-transition;
border-radius: var(--ov-meet-radius-circle); border-radius: var(--ov-meet-radius-circle);
&:hover:not([disabled]) { &:hover:not([disabled]) {
@ -1077,13 +1081,13 @@
} }
mat-icon { mat-icon {
@include ov-icon(md); @include layout.ov-icon(md);
} }
} }
} }
.ov-table-page-container { .ov-table-page-container {
@include ov-card; @include components.ov-card;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -1109,7 +1113,7 @@
color: var(--ov-meet-text-secondary); color: var(--ov-meet-text-secondary);
.no-results-icon { .no-results-icon {
@include ov-icon(lg); @include layout.ov-icon(lg);
color: var(--ov-meet-text-hint); color: var(--ov-meet-text-hint);
margin-bottom: var(--ov-meet-spacing-md); margin-bottom: var(--ov-meet-spacing-md);
display: block; display: block;
@ -1129,7 +1133,7 @@
button { button {
mat-icon { mat-icon {
@include ov-icon(sm); @include layout.ov-icon(sm);
margin-right: var(--ov-meet-spacing-xs); margin-right: var(--ov-meet-spacing-xs);
} }
} }
@ -1164,7 +1168,7 @@
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
padding: var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-md);
@include ov-mobile-down { @include responsive.ov-mobile-down {
flex-direction: column; flex-direction: column;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
} }
@ -1185,13 +1189,13 @@
border-color: var(--ov-border-color); border-color: var(--ov-border-color);
} }
@include ov-tablet-down { @include responsive.ov-tablet-down {
min-width: 100%; min-width: 100%;
} }
} }
.copy-api-key-btn { .copy-api-key-btn {
@include ov-button-base; @include components.ov-button-base;
background-color: var(--ov-meet-color-primary); background-color: var(--ov-meet-color-primary);
color: white; color: white;
@ -1200,11 +1204,11 @@
} }
mat-icon { mat-icon {
@include ov-icon(md); @include layout.ov-icon(md);
margin-right: var(--ov-meet-spacing-sm); margin-right: var(--ov-meet-spacing-sm);
} }
@include ov-mobile-down { @include responsive.ov-mobile-down {
width: 100%; width: 100%;
justify-content: center; justify-content: center;
} }
@ -1221,7 +1225,7 @@
align-items: center; align-items: center;
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
@include ov-mobile-down { @include responsive.ov-mobile-down {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
@ -1237,7 +1241,7 @@
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
justify-content: flex-end; justify-content: flex-end;
@include ov-mobile-down { @include responsive.ov-mobile-down {
justify-content: center; justify-content: center;
} }
} }
@ -1266,7 +1270,7 @@
} }
.field-icon { .field-icon {
@include ov-icon(md); @include layout.ov-icon(md);
color: var(--ov-meet-text-secondary); color: var(--ov-meet-text-secondary);
} }
} }
@ -1288,7 +1292,7 @@
align-items: center; align-items: center;
gap: var(--ov-meet-spacing-sm); gap: var(--ov-meet-spacing-sm);
@include ov-mobile-down { @include responsive.ov-mobile-down {
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
} }
@ -1314,10 +1318,10 @@
border-top: 1px solid var(--ov-border-color-light); border-top: 1px solid var(--ov-border-color-light);
button { button {
@include ov-button-base; @include components.ov-button-base;
mat-icon { mat-icon {
@include ov-icon(md); @include layout.ov-icon(md);
margin-right: var(--ov-meet-spacing-sm); margin-right: var(--ov-meet-spacing-sm);
} }
} }
@ -1384,15 +1388,15 @@
} }
.ov-feature-card { .ov-feature-card {
@include ov-card; @include components.ov-card;
@include ov-hover-lift(-5px); @include layout.ov-hover-lift(-5px);
text-align: center; text-align: center;
mat-card-content { mat-card-content {
padding: var(--ov-meet-spacing-lg); padding: var(--ov-meet-spacing-lg);
mat-icon { mat-icon {
@include ov-icon(xl); @include layout.ov-icon(xl);
margin-bottom: var(--ov-meet-spacing-md); margin-bottom: var(--ov-meet-spacing-md);
} }
@ -1410,11 +1414,11 @@
} }
button { button {
@include ov-button-base; @include components.ov-button-base;
width: 100%; width: 100%;
mat-icon { mat-icon {
@include ov-icon(md); @include layout.ov-icon(md);
margin-right: var(--ov-meet-spacing-sm); margin-right: var(--ov-meet-spacing-sm);
} }
} }
@ -1422,17 +1426,17 @@
} }
.ov-getting-started-grid { .ov-getting-started-grid {
@include ov-grid-responsive(280px); @include layout.ov-grid-responsive(280px);
margin-top: var(--ov-meet-spacing-lg); margin-top: var(--ov-meet-spacing-lg);
} }
.ov-quick-actions { .ov-quick-actions {
@include ov-flex-center; @include layout.ov-flex-center;
gap: var(--ov-meet-spacing-md); gap: var(--ov-meet-spacing-md);
margin-bottom: var(--ov-meet-spacing-xxl); margin-bottom: var(--ov-meet-spacing-xxl);
button { button {
@include ov-button-base; @include components.ov-button-base;
mat-icon { mat-icon {
margin-right: var(--ov-meet-spacing-sm); margin-right: var(--ov-meet-spacing-sm);
@ -1441,16 +1445,16 @@
} }
.ov-stats-grid { .ov-stats-grid {
@include ov-grid-responsive(300px); @include layout.ov-grid-responsive(300px);
} }
.ov-stats-card { .ov-stats-card {
@include ov-card; @include components.ov-card;
text-align: center; text-align: center;
@include ov-theme-transition; @include layout.ov-theme-transition;
&:hover { &:hover {
@include ov-hover-lift(-3px); @include layout.ov-hover-lift(-3px);
} }
.stats-content { .stats-content {
@ -1458,7 +1462,7 @@
} }
.stats-icon { .stats-icon {
@include ov-icon(lg); @include layout.ov-icon(lg);
margin-bottom: var(--ov-meet-spacing-sm); margin-bottom: var(--ov-meet-spacing-sm);
} }
@ -1488,7 +1492,7 @@
gap: var(--ov-meet-spacing-xs); gap: var(--ov-meet-spacing-xs);
button { button {
@include ov-button-base; @include components.ov-button-base;
mat-icon { mat-icon {
margin-left: var(--ov-meet-spacing-xs); margin-left: var(--ov-meet-spacing-xs);

2
frontend/src/styles.scss
View File

@ -1,6 +1,6 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use './assets/styles/openvidu-theme.scss'; @use './assets/styles/openvidu-theme.scss';
@import './assets/styles/design-tokens'; @use './assets/styles/design-tokens';
@include mat.elevation-classes(); @include mat.elevation-classes();
@include mat.app-background(); @include mat.app-background();