diff --git a/frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.scss b/frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.scss index c7d5388..deb6b89 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/components/console-nav/console-nav.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../src/assets/styles/design-tokens'; #dashboard-container, mat-sidenav-container { diff --git a/frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.scss b/frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.scss index a7625e2..4174a3c 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/components/dialogs/basic-dialog/dialog.component.scss @@ -1,5 +1,5 @@ // Import design system utilities -@import '../../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../../src/assets/styles/design-tokens'; // === DIALOG CONTAINER === ::ng-deep { @@ -15,7 +15,7 @@ :host { .dialog-container { - @include ov-theme-transition; + @include design-tokens.ov-theme-transition; display: block; animation: dialogFadeIn 0.2s ease-out; } @@ -36,8 +36,8 @@ // === DIALOG TITLE === .dialog-title { @extend .ov-text-center; - @include ov-theme-transition; - @include ov-flex-center; + @include design-tokens.ov-theme-transition; + @include design-tokens.ov-flex-center; gap: var(--ov-meet-spacing-sm); color: var(--ov-meet-text-primary); font-size: var(--ov-meet-font-size-xl) !important; @@ -47,14 +47,14 @@ line-height: var(--ov-meet-line-height-tight); .dialog-icon { - @include ov-icon(md); + @include design-tokens.ov-icon(md); color: var(--ov-meet-text-secondary); } } // === DIALOG CONTENT === ::ng-deep mat-dialog-content { - @include ov-theme-transition; + @include design-tokens.ov-theme-transition; color: var(--ov-meet-text-secondary); font-size: var(--ov-meet-font-size-md) !important; line-height: var(--ov-meet-line-height-relaxed); @@ -67,7 +67,7 @@ } .force-checkbox-container { - @include ov-theme-transition; + @include design-tokens.ov-theme-transition; margin-top: var(--ov-meet-spacing-lg); padding: var(--ov-meet-spacing-md); border: 1px solid var(--ov-meet-border-color); @@ -93,7 +93,7 @@ margin-top: var(--ov-meet-spacing-xs); .warning-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); color: var(--ov-meet-color-warning); flex-shrink: 0; margin-top: 2px; // Align with first line of text @@ -112,7 +112,7 @@ // === DIALOG ACTIONS === .dialog-action { - @include ov-flex-center; + @include design-tokens.ov-flex-center; gap: var(--ov-meet-spacing-sm); padding: var(--ov-meet-spacing-lg); margin: 0; @@ -120,15 +120,15 @@ // Button styling button { - @include ov-button-base; - @include ov-theme-transition; - @include ov-flex-center; + @include design-tokens.ov-button-base; + @include design-tokens.ov-theme-transition; + @include design-tokens.ov-flex-center; gap: var(--ov-meet-spacing-xs); min-width: 80px; margin: 0; // Reset default margin mat-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); } // Cancel/Secondary button @@ -138,7 +138,7 @@ background: transparent; &:hover { - @include ov-hover-lift(-1px); + @include design-tokens.ov-hover-lift(-1px); background: var(--ov-meet-surface-hover); color: var(--ov-meet-text-primary); } @@ -149,7 +149,7 @@ color: var(--ov-meet-text-on-primary); &:hover { - @include ov-hover-lift(-1px); + @include design-tokens.ov-hover-lift(-1px); } &:active { @@ -176,7 +176,7 @@ } // === RESPONSIVE DESIGN === -@include ov-mobile-down { +@include design-tokens.ov-mobile-down { .dialog-title { font-size: var(--ov-meet-font-size-lg); padding: var(--ov-meet-spacing-md) var(--ov-meet-spacing-md) 0; @@ -184,7 +184,7 @@ gap: var(--ov-meet-spacing-xs); .dialog-icon { - @include ov-icon(lg); + @include design-tokens.ov-icon(lg); } } diff --git a/frontend/projects/shared-meet-components/src/lib/components/dialogs/delete-room-dialog/delete-room-dialog.component.scss b/frontend/projects/shared-meet-components/src/lib/components/dialogs/delete-room-dialog/delete-room-dialog.component.scss index 477d7d8..3e20822 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/dialogs/delete-room-dialog/delete-room-dialog.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/components/dialogs/delete-room-dialog/delete-room-dialog.component.scss @@ -1,5 +1,5 @@ // Import design system utilities -@import '../../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../../src/assets/styles/design-tokens'; // === DIALOG CONTAINER === ::ng-deep { @@ -15,7 +15,7 @@ :host { .dialog-container { - @include ov-theme-transition; + @include design-tokens.ov-theme-transition; display: block; animation: dialogFadeIn 0.2s ease-out; } @@ -36,8 +36,8 @@ // === DIALOG TITLE === .dialog-title { @extend .ov-text-center; - @include ov-theme-transition; - @include ov-flex-center; + @include design-tokens.ov-theme-transition; + @include design-tokens.ov-flex-center; gap: var(--ov-meet-spacing-sm); color: var(--ov-meet-text-primary); font-size: var(--ov-meet-font-size-xl) !important; @@ -47,14 +47,14 @@ line-height: var(--ov-meet-line-height-tight); .dialog-icon { - @include ov-icon(md); + @include design-tokens.ov-icon(md); color: var(--ov-meet-color-error); } } // === DIALOG CONTENT === ::ng-deep mat-dialog-content { - @include ov-theme-transition; + @include design-tokens.ov-theme-transition; color: var(--ov-meet-text-secondary); font-size: var(--ov-meet-font-size-md) !important; line-height: var(--ov-meet-line-height-relaxed); @@ -80,7 +80,7 @@ // === POLICY OPTIONS CONTAINER === .policy-options-container { - @include ov-theme-transition; + @include design-tokens.ov-theme-transition; margin-top: var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-md); background: var(--ov-meet-surface-variant); @@ -111,7 +111,7 @@ } .policy-option { - @include ov-theme-transition; + @include design-tokens.ov-theme-transition; display: flex !important; align-items: flex-start; width: 100%; @@ -167,7 +167,7 @@ // === DIALOG ACTIONS === .dialog-action { - @include ov-flex-center; + @include design-tokens.ov-flex-center; gap: var(--ov-meet-spacing-sm); padding: var(--ov-meet-spacing-lg); margin: 0; @@ -175,15 +175,15 @@ // Button styling button { - @include ov-button-base; - @include ov-theme-transition; - @include ov-flex-center; + @include design-tokens.ov-button-base; + @include design-tokens.ov-theme-transition; + @include design-tokens.ov-flex-center; gap: var(--ov-meet-spacing-xs); min-width: 100px; margin: 0; mat-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); } // Cancel/Secondary button @@ -193,7 +193,7 @@ background: transparent; &:hover { - @include ov-hover-lift(-1px); + @include design-tokens.ov-hover-lift(-1px); background: var(--ov-meet-surface-hover); color: var(--ov-meet-text-primary); } @@ -206,7 +206,7 @@ color: var(--ov-meet-text-on-error); &:hover { - @include ov-hover-lift(-1px); + @include design-tokens.ov-hover-lift(-1px); background: var(--ov-meet-color-error); filter: brightness(0.9); } @@ -224,7 +224,7 @@ } // === RESPONSIVE DESIGN === -@include ov-mobile-down { +@include design-tokens.ov-mobile-down { .dialog-title { font-size: var(--ov-meet-font-size-lg); padding: var(--ov-meet-spacing-md) var(--ov-meet-spacing-md) 0; @@ -232,7 +232,7 @@ gap: var(--ov-meet-spacing-xs); .dialog-icon { - @include ov-icon(lg); + @include design-tokens.ov-icon(lg); } } diff --git a/frontend/projects/shared-meet-components/src/lib/components/dialogs/share-recording-dialog/share-recording-dialog.component.scss b/frontend/projects/shared-meet-components/src/lib/components/dialogs/share-recording-dialog/share-recording-dialog.component.scss index 39c25ed..47e691d 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/dialogs/share-recording-dialog/share-recording-dialog.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/components/dialogs/share-recording-dialog/share-recording-dialog.component.scss @@ -1,10 +1,10 @@ -@import '../../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../../src/assets/styles/design-tokens'; .share-recording-dialog { - @include ov-theme-transition; + @include design-tokens.ov-theme-transition; .dialog-title { - @include ov-flex-center; + @include design-tokens.ov-flex-center; justify-content: flex-start; gap: var(--ov-meet-spacing-sm); margin: 0; @@ -14,23 +14,23 @@ color: var(--ov-meet-text-primary); .title-icon { - @include ov-icon(md); + @include design-tokens.ov-icon(md); } } .dialog-content { - @include ov-theme-transition; + @include design-tokens.ov-theme-transition; padding: var(--ov-meet-spacing-xl); display: flex; flex-direction: column; gap: var(--ov-meet-spacing-lg); - @include ov-tablet-down { + @include design-tokens.ov-tablet-down { min-width: 400px; padding: var(--ov-meet-spacing-lg); } - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { min-width: 320px; padding: var(--ov-meet-spacing-md); } @@ -49,7 +49,7 @@ } .error-message { - @include ov-flex-center; + @include design-tokens.ov-flex-center; justify-content: flex-start; gap: var(--ov-meet-spacing-sm); padding: var(--ov-meet-spacing-md); @@ -59,7 +59,7 @@ color: var(--ov-meet-color-error); .error-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); } .error-text { @@ -75,7 +75,7 @@ gap: var(--ov-meet-spacing-sm); .access-option { - @include ov-theme-transition; + @include design-tokens.ov-theme-transition; border: 1px solid var(--ov-meet-border-color); border-radius: var(--ov-meet-radius-sm); padding: var(--ov-meet-spacing-md); @@ -92,13 +92,13 @@ } .option-content { - @include ov-flex-center; + @include design-tokens.ov-flex-center; justify-content: flex-start; gap: var(--ov-meet-spacing-md); margin-left: var(--ov-meet-spacing-lg); .option-icon { - @include ov-icon(md); + @include design-tokens.ov-icon(md); color: var(--ov-meet-text-secondary); } @@ -124,11 +124,11 @@ } .generate-section { - @include ov-flex-center; + @include design-tokens.ov-flex-center; justify-content: center; .loading-state { - @include ov-flex-center; + @include design-tokens.ov-flex-center; gap: var(--ov-meet-spacing-sm); color: var(--ov-meet-text-secondary); @@ -139,12 +139,12 @@ } .generate-button { - @include ov-button-base; - @include ov-flex-center; + @include design-tokens.ov-button-base; + @include design-tokens.ov-flex-center; gap: var(--ov-meet-spacing-sm); mat-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); } } } @@ -172,13 +172,13 @@ } .url-prefix-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); color: var(--ov-meet-text-secondary); margin-right: var(--ov-meet-spacing-xs); } .copy-button { - @include ov-theme-transition; + @include design-tokens.ov-theme-transition; color: var(--ov-meet-text-secondary); &:hover { @@ -192,13 +192,13 @@ } mat-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); } } } .copy-success-message { - @include ov-flex-center; + @include design-tokens.ov-flex-center; justify-content: center; gap: var(--ov-meet-spacing-xs); margin-top: var(--ov-meet-spacing-sm); @@ -211,18 +211,18 @@ font-weight: var(--ov-meet-font-weight-medium); mat-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); } } } .url-actions { - @include ov-flex-center; + @include design-tokens.ov-flex-center; justify-content: center; margin-top: var(--ov-meet-spacing-md); .back-button { - @include ov-flex-center; + @include design-tokens.ov-flex-center; gap: var(--ov-meet-spacing-xs); color: var(--ov-meet-text-secondary); @@ -232,7 +232,7 @@ } mat-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); } } } @@ -240,26 +240,26 @@ } .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); border-top: 1px solid var(--ov-meet-border-color-light); justify-content: flex-end; .close-button { - @include ov-flex-center; + @include design-tokens.ov-flex-center; gap: var(--ov-meet-spacing-xs); color: var(--ov-meet-text-primary); background: var(--ov-meet-surface-hover); mat-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); } } } } // Responsive adjustments -@include ov-mobile-down { +@include design-tokens.ov-mobile-down { .share-recording-dialog { .dialog-content { min-width: 280px; diff --git a/frontend/projects/shared-meet-components/src/lib/components/logo-selector/logo-selector.component.scss b/frontend/projects/shared-meet-components/src/lib/components/logo-selector/logo-selector.component.scss index 2ee0af7..b1d74af 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/logo-selector/logo-selector.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/components/logo-selector/logo-selector.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../src/assets/styles/design-tokens'; // Form styling .form-section { diff --git a/frontend/projects/shared-meet-components/src/lib/components/pro-feature-badge/pro-feature-badge.component.scss b/frontend/projects/shared-meet-components/src/lib/components/pro-feature-badge/pro-feature-badge.component.scss index a2f48c3..b7a0e20 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/pro-feature-badge/pro-feature-badge.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/components/pro-feature-badge/pro-feature-badge.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../src/assets/styles/design-tokens'; .pro-badge { position: absolute; @@ -18,6 +18,6 @@ z-index: 2; mat-icon { - @include ov-icon(xs); + @include design-tokens.ov-icon(xs); } } diff --git a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.scss b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.scss index a6e652b..66c0897 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.scss @@ -1,12 +1,12 @@ -@import '../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../src/assets/styles/design-tokens'; // === MOBILE CARDS VIEW === .cards-container { - @include ov-grid-responsive(280px); + @include design-tokens.ov-grid-responsive(280px); gap: var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-md) 0; - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { grid-template-columns: 1fr; gap: var(--ov-meet-spacing-sm); padding: var(--ov-meet-spacing-sm) 0; @@ -14,8 +14,8 @@ } .recording-card { - @include ov-card; - @include ov-theme-transition; + @include design-tokens.ov-card; + @include design-tokens.ov-theme-transition; display: flex; flex-direction: column; gap: var(--ov-meet-spacing-md); @@ -29,10 +29,10 @@ } &: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); } } @@ -67,7 +67,7 @@ flex-direction: column; gap: var(--ov-meet-spacing-md); - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { gap: var(--ov-meet-spacing-sm); } @@ -85,7 +85,7 @@ gap: var(--ov-meet-spacing-sm); .detail-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); color: var(--ov-meet-text-secondary); margin-top: 2px; flex-shrink: 0; @@ -152,7 +152,7 @@ margin-top: var(--ov-meet-spacing-sm); .action-button { - @include ov-icon(lg); + @include design-tokens.ov-icon(lg); padding: 0; width: 40px; @@ -165,7 +165,7 @@ } } - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { gap: var(--ov-meet-spacing-xs); } @@ -182,7 +182,7 @@ margin-bottom: 0; // Responsive toolbar adjustments - @include ov-tablet-down { + @include design-tokens.ov-tablet-down { .toolbar-center { z-index: 1000; position: fixed; @@ -206,7 +206,7 @@ } } - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { flex-wrap: wrap; gap: var(--ov-meet-spacing-sm); @@ -240,7 +240,7 @@ @extend .ov-table-container; margin-top: 0; - @include ov-tablet-down { + @include design-tokens.ov-tablet-down { overflow-x: auto; -webkit-overflow-scrolling: touch; } @@ -274,7 +274,7 @@ } } - @include ov-tablet-down { + @include design-tokens.ov-tablet-down { .mat-column-duration, .mat-column-size { display: none; @@ -295,7 +295,7 @@ min-width: 0; .room-name { - @include ov-text-truncate; + @include design-tokens.ov-text-truncate; font-weight: var(--ov-meet-font-weight-medium); margin-bottom: 2px; @@ -306,7 +306,7 @@ } .room-id { - @include ov-text-truncate; + @include design-tokens.ov-text-truncate; font-size: var(--ov-meet-font-size-xs); color: var(--ov-meet-text-secondary); @@ -327,7 +327,7 @@ letter-spacing: 0.5px; .status-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); 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); font-size: var(--ov-meet-font-size-xs); .status-icon { - @include ov-icon(xs); + @include design-tokens.ov-icon(xs); } } } @@ -364,7 +364,7 @@ .action-buttons { @extend .ov-action-buttons; - @include ov-tablet-down { + @include design-tokens.ov-tablet-down { .play-btn, .download-btn { display: none; @@ -380,7 +380,7 @@ @extend .ov-empty-state; .getting-started-actions { - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { flex-direction: column; gap: var(--ov-meet-spacing-sm); @@ -399,7 +399,7 @@ @extend .ov-focus-visible; } -@include ov-mobile-down { +@include design-tokens.ov-mobile-down { .mat-mdc-icon-button { min-width: 44px; min-height: 44px; diff --git a/frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.scss b/frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.scss index d8883dd..5fa15ce 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/components/rooms-lists/rooms-lists.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../src/assets/styles/design-tokens'; // Use utility classes for rooms toolbar .rooms-toolbar { @@ -138,12 +138,12 @@ width: fit-content; .status-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); } } .meeting-end-info-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); &.meeting-end-close { color: var(--ov-meet-color-warning); @@ -175,7 +175,7 @@ text-transform: uppercase; .deletion-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); } } @@ -282,7 +282,7 @@ @extend .ov-empty-state; .empty-icon { - @include ov-icon(xl); + @include design-tokens.ov-icon(xl); color: var(--ov-meet-text-hint); margin-bottom: var(--ov-meet-spacing-lg); display: block; diff --git a/frontend/projects/shared-meet-components/src/lib/components/selectable-card/selectable-card.component.scss b/frontend/projects/shared-meet-components/src/lib/components/selectable-card/selectable-card.component.scss index 4741cc1..82b026a 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/selectable-card/selectable-card.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/components/selectable-card/selectable-card.component.scss @@ -1,8 +1,8 @@ -@import '../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../src/assets/styles/design-tokens'; .option-card { - @include ov-card; - @include ov-theme-transition; + @include design-tokens.ov-card; + @include design-tokens.ov-theme-transition; position: relative; cursor: pointer; border: 2px solid transparent; @@ -12,7 +12,7 @@ flex-direction: column; &:hover:not(.no-hover):not(.selected) { - @include ov-hover-lift(-2px); + @include design-tokens.ov-hover-lift(-2px); } &.selected { @@ -42,9 +42,9 @@ z-index: 2; .selection-icon { - @include ov-icon(md); + @include design-tokens.ov-icon(md); color: var(--ov-meet-text-hint); - @include ov-theme-transition; + @include design-tokens.ov-theme-transition; &.selected { color: var(--ov-meet-color-primary); @@ -69,7 +69,7 @@ height: 100%; object-fit: cover; display: block; - @include ov-theme-transition; + @include design-tokens.ov-theme-transition; } // &:hover img { @@ -86,8 +86,8 @@ font-weight: var(--ov-meet-font-weight-semibold); .option-icon { - @include ov-icon(md); - @include ov-theme-transition; + @include design-tokens.ov-icon(md); + @include design-tokens.ov-theme-transition; } .option-title { diff --git a/frontend/projects/shared-meet-components/src/lib/components/share-meeting-link/share-meeting-link.component.scss b/frontend/projects/shared-meet-components/src/lib/components/share-meeting-link/share-meeting-link.component.scss index 57b2ff0..62cb746 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/share-meeting-link/share-meeting-link.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/components/share-meeting-link/share-meeting-link.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../src/assets/styles/design-tokens'; .meeting-url-badge { margin: var(--ov-meet-spacing-sm) auto; @@ -43,8 +43,8 @@ margin: var(--ov-meet-spacing-sm); } .meeting-url-badge-container { - @include ov-flex-center; - @include ov-theme-transition; + @include design-tokens.ov-flex-center; + @include design-tokens.ov-theme-transition; gap: var(--ov-meet-spacing-sm); padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-md); background-color: var(--ov-surface-color); // Use ov-components variable @@ -73,7 +73,7 @@ } .copy-url-btn { - @include ov-button-base; + @include design-tokens.ov-button-base; width: 32px; height: 32px; min-width: 32px; @@ -84,7 +84,7 @@ border: 0; .mat-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); } &:hover { @@ -95,7 +95,7 @@ } } -@include ov-mobile-down { +@include design-tokens.ov-mobile-down { .meeting-url-badge-container { margin: var(--ov-meet-spacing-md) auto; padding: var(--ov-meet-spacing-xs) var(--ov-meet-spacing-sm); diff --git a/frontend/projects/shared-meet-components/src/lib/components/step-indicator/step-indicator.component.scss b/frontend/projects/shared-meet-components/src/lib/components/step-indicator/step-indicator.component.scss index 79e6f3a..8cef087 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/step-indicator/step-indicator.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/components/step-indicator/step-indicator.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../src/assets/styles/design-tokens'; .step-indicator-wrapper { width: 100%; @@ -8,7 +8,7 @@ &[data-layout='vertical-sidebar'] { .wizard-stepper { padding: var(--ov-meet-spacing-lg); - @include ov-theme-transition; + @include design-tokens.ov-theme-transition; ::ng-deep { .mat-stepper-vertical { @@ -53,7 +53,7 @@ width: 100%; max-width: 100%; padding: var(--ov-meet-spacing-md) var(--ov-meet-spacing-xs); - @include ov-theme-transition; + @include design-tokens.ov-theme-transition; ::ng-deep { .mat-step-text-label { @@ -120,7 +120,7 @@ background-color: var(--ov-meet-surface-variant); border-radius: var(--ov-meet-radius-md); margin-bottom: var(--ov-meet-spacing-md); - @include ov-theme-transition; + @include design-tokens.ov-theme-transition; ::ng-deep { .mat-stepper-vertical { diff --git a/frontend/projects/shared-meet-components/src/lib/components/wizard-nav/wizard-nav.component.scss b/frontend/projects/shared-meet-components/src/lib/components/wizard-nav/wizard-nav.component.scss index fdbf3a5..b1f4845 100644 --- a/frontend/projects/shared-meet-components/src/lib/components/wizard-nav/wizard-nav.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/components/wizard-nav/wizard-nav.component.scss @@ -1,11 +1,11 @@ -@import '../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../src/assets/styles/design-tokens'; .wizard-navigation { width: 100%; padding: var(--ov-meet-spacing-md) 0 0 0; .nav-buttons { - @include ov-container; + @include design-tokens.ov-container; display: flex; align-items: center; justify-content: space-between; @@ -26,7 +26,7 @@ } button { - @include ov-button-base; + @include design-tokens.ov-button-base; border-radius: var(--ov-meet-radius-sm); min-width: 120px; @@ -103,7 +103,7 @@ } mat-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); margin: 0 var(--ov-meet-spacing-xs); &.leading-icon { @@ -119,7 +119,7 @@ } } - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { padding: var(--ov-meet-spacing-md) 0; .nav-buttons { @@ -146,7 +146,7 @@ } } - @include ov-tablet-down { + @include design-tokens.ov-tablet-down { .nav-buttons { .nav-group { gap: var(--ov-meet-spacing-sm); @@ -202,7 +202,7 @@ padding: var(--ov-meet-spacing-sm) var(--ov-meet-spacing-md); mat-icon { - @include ov-icon(xs); + @include design-tokens.ov-icon(xs); } } } diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.scss index 61b67ea..b9f6e21 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/config/config.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../../src/assets/styles/design-tokens'; .ov-page-container { button { @@ -54,18 +54,18 @@ margin: var(--ov-meet-spacing-lg) 0; // Tablet and larger - maintain 4 columns - @include ov-tablet-up { + @include design-tokens.ov-tablet-up { gap: var(--ov-meet-spacing-xs); } // Small tablets - 2 columns - @include ov-tablet-down { + @include design-tokens.ov-tablet-down { grid-template-columns: repeat(2, 1fr); gap: var(--ov-meet-spacing-lg); } // Mobile - single column - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { grid-template-columns: 1fr; gap: var(--ov-meet-spacing-md); } @@ -207,7 +207,7 @@ display: flex; flex-wrap: wrap; - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { flex-direction: column; .mat-mdc-button, @@ -218,7 +218,7 @@ } } - @include ov-tablet-up { + @include design-tokens.ov-tablet-up { justify-content: flex-start; button:first-child { diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/console.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/console/console.component.scss index 51150ec..0c1f193 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/console.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/console.component.scss @@ -1,5 +1,5 @@ -@import '../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../src/assets/styles/design-tokens'; ::ng-deep { mat-slide-toggle { diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/embedded/embedded.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/console/embedded/embedded.component.scss index c13b55f..89f697a 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/embedded/embedded.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/embedded/embedded.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../../src/assets/styles/design-tokens'; .ov-page-container { button { @@ -113,7 +113,7 @@ border-color: var(--ov-meet-color-error); } - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { flex-direction: column; .mat-mdc-button, diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/overview/overview.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/console/overview/overview.component.scss index 6ab8180..88510c4 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/overview/overview.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/overview/overview.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../../src/assets/styles/design-tokens'; // Welcome State Styles .welcome-content { @@ -29,20 +29,20 @@ } .getting-started-grid { - @include ov-grid-responsive(280px); + @include design-tokens.ov-grid-responsive(280px); margin-top: var(--ov-meet-spacing-lg); } .feature-card { - @include ov-card; - @include ov-hover-lift(-5px); + @include design-tokens.ov-card; + @include design-tokens.ov-hover-lift(-5px); text-align: center; mat-card-content { padding: var(--ov-meet-spacing-lg); mat-icon { - @include ov-icon(xl); + @include design-tokens.ov-icon(xl); margin-bottom: var(--ov-meet-spacing-md); } @@ -60,11 +60,11 @@ } button { - @include ov-button-base; + @include design-tokens.ov-button-base; width: 100%; mat-icon { - @include ov-icon(md); + @include design-tokens.ov-icon(md); margin-right: var(--ov-meet-spacing-sm); } } @@ -76,12 +76,12 @@ .dashboard-content { padding: 5px; .quick-actions { - @include ov-flex-center; + @include design-tokens.ov-flex-center; gap: var(--ov-meet-spacing-md); margin-bottom: var(--ov-meet-spacing-xxl); button { - @include ov-button-base; + @include design-tokens.ov-button-base; mat-icon { margin-right: var(--ov-meet-spacing-sm); @@ -90,11 +90,11 @@ } .stats-grid { - @include ov-grid-responsive(300px); + @include design-tokens.ov-grid-responsive(300px); } .stat-card { - @include ov-stat-card; + @include design-tokens.ov-stat-card; padding: 0; mat-card-content { @@ -106,7 +106,7 @@ .stat-icon { mat-icon { - @include ov-icon(xl); + @include design-tokens.ov-icon(xl); } } @@ -119,7 +119,7 @@ gap: var(--ov-meet-spacing-xs); button { - @include ov-button-base; + @include design-tokens.ov-button-base; mat-icon { margin-left: var(--ov-meet-spacing-xs); @@ -133,7 +133,7 @@ // .recordings-card uses .ov-recording-icon .action-card { - @include ov-card; + @include design-tokens.ov-card; mat-card-content { display: flex; align-items: center; @@ -143,7 +143,7 @@ .action-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); button { - @include ov-button-base; + @include design-tokens.ov-button-base; } } } } // Responsive Design using design tokens breakpoints -@include ov-tablet-down { +@include design-tokens.ov-tablet-down { .overview-container { padding: var(--ov-meet-spacing-md); } @@ -205,7 +205,7 @@ } } -@include ov-mobile-down { +@include design-tokens.ov-mobile-down { .overview-header h1 { font-size: var(--ov-meet-font-size-xl); } diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-basic-creation/room-basic-creation.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-basic-creation/room-basic-creation.component.scss index 4d8ba35..7df0698 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-basic-creation/room-basic-creation.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-basic-creation/room-basic-creation.component.scss @@ -1,8 +1,8 @@ -@import '../../../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../../../src/assets/styles/design-tokens'; .room-basic-creation-page { - @include ov-page-content; - @include ov-container; + @include design-tokens.ov-page-content; + @include design-tokens.ov-container; padding: var(--ov-meet-spacing-xl); max-width: 600px; @@ -15,7 +15,7 @@ margin-bottom: var(--ov-meet-spacing-xl); .page-icon { - @include ov-icon(xxl); + @include design-tokens.ov-icon(xxl); color: var(--ov-meet-icon-rooms); margin-top: var(--ov-meet-spacing-xs); } @@ -67,7 +67,7 @@ // Icon styling in form fields .mat-mdc-form-field-icon-suffix { mat-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); } } } @@ -81,7 +81,7 @@ margin-top: var(--ov-meet-spacing-lg); .create-button { - @include ov-button-base; + @include design-tokens.ov-button-base; flex: 1; max-width: 200px; background-color: var(--ov-meet-color-success); @@ -89,7 +89,7 @@ box-shadow: var(--ov-meet-shadow-sm); mat-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); margin-right: var(--ov-meet-spacing-xs); } @@ -100,12 +100,12 @@ } .advanced-button { - @include ov-button-base; + @include design-tokens.ov-button-base; flex: 1; max-width: 200px; mat-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); 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); .page-header { @@ -157,7 +157,7 @@ } } - @include ov-tablet-down { + @include design-tokens.ov-tablet-down { .page-content { .room-basic-creation-form { .action-buttons { diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/room-wizard.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/room-wizard.component.scss index 022dd2e..777eef8 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/room-wizard.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/room-wizard.component.scss @@ -1,15 +1,15 @@ -@import '../../../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../../../src/assets/styles/design-tokens'; .wizard-container { - @include ov-container; - @include ov-page-content; + @include design-tokens.ov-container; + @include design-tokens.ov-page-content; min-height: 600px; gap: 0; padding-top: 0; } .wizard-header { - @include ov-get-started-header; + @include design-tokens.ov-get-started-header; h2 { margin-bottom: var(--ov-meet-spacing-md); @@ -27,7 +27,7 @@ } .step-content { - @include ov-section-card; + @include design-tokens.ov-section-card; width: 100%; max-width: 600px; min-height: 450px; @@ -60,7 +60,7 @@ padding: var(--ov-meet-spacing-md) 0 0 0; } .cancel-button { - @include ov-button-base; + @include design-tokens.ov-button-base; border-radius: var(--ov-meet-radius-sm); min-width: 120px; color: var(--ov-meet-text-secondary); @@ -110,7 +110,7 @@ // Room Creation Loading State .room-creation-loading { - @include ov-flex-center; + @include design-tokens.ov-flex-center; flex-direction: column; height: 100%; min-height: 400px; @@ -118,7 +118,7 @@ padding: var(--ov-meet-spacing-xl); .loading-content { - @include ov-flex-center; + @include design-tokens.ov-flex-center; flex-direction: column; gap: var(--ov-meet-spacing-xl); width: 100%; @@ -127,12 +127,12 @@ margin-bottom: var(--ov-meet-spacing-lg); .loading-title { - @include ov-flex-center; + @include design-tokens.ov-flex-center; gap: var(--ov-meet-spacing-md); margin-bottom: var(--ov-meet-spacing-md); .loading-icon { - @include ov-icon(xl); + @include design-tokens.ov-icon(xl); animation: pulse 2s ease-in-out infinite; } @@ -168,7 +168,7 @@ } // Responsive design using the system mixins -@include ov-tablet-down { +@include design-tokens.ov-tablet-down { .wizard-container { padding: var(--ov-meet-spacing-md); } @@ -196,7 +196,7 @@ } } -@include ov-mobile-down { +@include design-tokens.ov-mobile-down { .wizard-header { h2 { font-size: var(--ov-meet-font-size-lg); diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/recording-config/recording-config.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/recording-config/recording-config.component.scss index 0dfd389..b07c8c4 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/recording-config/recording-config.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/recording-config/recording-config.component.scss @@ -1,8 +1,8 @@ -@import '../../../../../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../../../../../src/assets/styles/design-tokens'; .recording-config-step { - @include ov-page-content; - @include ov-container; + @include design-tokens.ov-page-content; + @include design-tokens.ov-container; padding: var(--ov-meet-spacing-sm); @@ -12,7 +12,7 @@ gap: var(--ov-meet-spacing-sm); .step-icon { - @include ov-icon(xl); + @include design-tokens.ov-icon(xl); color: var(--ov-meet-icon-recordings); margin-top: var(--ov-meet-spacing-xs); } @@ -42,7 +42,7 @@ .recording-form { .options-grid { - @include ov-grid-responsive(260px); + @include design-tokens.ov-grid-responsive(260px); gap: var(--ov-meet-spacing-md); } @@ -57,7 +57,7 @@ margin-bottom: var(--ov-meet-spacing-lg); .access-icon { - @include ov-icon(md); + @include design-tokens.ov-icon(md); color: var(--ov-meet-icon-security); margin-top: var(--ov-meet-spacing-xs); } @@ -132,7 +132,7 @@ } // Responsive Design - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { .step-header { flex-direction: column; text-align: center; @@ -169,7 +169,7 @@ } } - @include ov-tablet-down { + @include design-tokens.ov-tablet-down { padding: var(--ov-meet-spacing-xs); .step-content .recording-form { diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/recording-layout/recording-layout.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/recording-layout/recording-layout.component.scss index 9d046af..2878350 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/recording-layout/recording-layout.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/recording-layout/recording-layout.component.scss @@ -1,8 +1,8 @@ -@import '../../../../../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../../../../../src/assets/styles/design-tokens'; .recording-layout-step { - @include ov-page-content; - @include ov-container; + @include design-tokens.ov-page-content; + @include design-tokens.ov-container; padding: var(--ov-meet-spacing-sm); @@ -12,7 +12,7 @@ gap: var(--ov-meet-spacing-sm); .step-icon { - @include ov-icon(xl); + @include design-tokens.ov-icon(xl); color: var(--ov-meet-icon-recordings); margin-top: var(--ov-meet-spacing-xs); } @@ -42,11 +42,11 @@ .layout-form { .options-grid { - @include ov-grid-responsive(280px); + @include design-tokens.ov-grid-responsive(280px); gap: var(--ov-meet-spacing-md); // Custom layout for recording layout selector - @include ov-tablet-up { + @include design-tokens.ov-tablet-up { grid-template-columns: repeat(3, 1fr); max-width: 900px; margin: 0 auto; @@ -84,7 +84,7 @@ } // Responsive Design - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { .step-header { flex-direction: column; text-align: center; @@ -123,7 +123,7 @@ } } - @include ov-tablet-down { + @include design-tokens.ov-tablet-down { padding: var(--ov-meet-spacing-xs); .step-content .layout-form .options-grid { diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/recording-trigger/recording-trigger.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/recording-trigger/recording-trigger.component.scss index e08d7b1..82b2f52 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/recording-trigger/recording-trigger.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/recording-trigger/recording-trigger.component.scss @@ -1,8 +1,8 @@ -@import '../../../../../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../../../../../src/assets/styles/design-tokens'; .recording-trigger-step { - @include ov-page-content; - @include ov-container; + @include design-tokens.ov-page-content; + @include design-tokens.ov-container; padding: var(--ov-meet-spacing-sm); @@ -13,7 +13,7 @@ margin-bottom: var(--ov-meet-spacing-md); .step-icon { - @include ov-icon(lg); + @include design-tokens.ov-icon(lg); color: var(--ov-meet-icon-recordings); margin-top: var(--ov-meet-spacing-xs); } @@ -43,11 +43,11 @@ .trigger-form { .options-grid { - @include ov-grid-responsive(260px); + @include design-tokens.ov-grid-responsive(260px); gap: var(--ov-meet-spacing-md); // On larger screens, limit to 3 cards per row - @include ov-tablet-up { + @include design-tokens.ov-tablet-up { justify-content: space-between; } } @@ -55,7 +55,7 @@ } // Responsive Design - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { .step-header { flex-direction: column; text-align: center; @@ -74,7 +74,7 @@ } } - @include ov-tablet-down { + @include design-tokens.ov-tablet-down { padding: var(--ov-meet-spacing-xs); .step-content .trigger-form .options-grid { diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-config/room-config.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-config/room-config.component.scss index 03114a8..69a8167 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-config/room-config.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-config/room-config.component.scss @@ -1,8 +1,8 @@ -@import '../../../../../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../../../../../src/assets/styles/design-tokens'; .room-config-step { - @include ov-page-content; - @include ov-container; + @include design-tokens.ov-page-content; + @include design-tokens.ov-container; padding: var(--ov-meet-spacing-sm); @@ -13,7 +13,7 @@ margin-bottom: var(--ov-meet-spacing-lg); .step-icon { - @include ov-icon(xl); + @include design-tokens.ov-icon(xl); color: var(--ov-meet-icon-settings); margin-top: var(--ov-meet-spacing-xs); } @@ -60,7 +60,7 @@ } .config-card { - @include ov-card; + @include design-tokens.ov-card; border: 2px solid var(--ov-meet-border-secondary); transition: all 0.2s ease-in-out; cursor: default; @@ -88,7 +88,7 @@ flex: 1; .feature-icon { - @include ov-icon(lg); + @include design-tokens.ov-icon(lg); color: var(--ov-meet-icon-primary); margin-top: var(--ov-meet-spacing-xs); } diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-details/room-details.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-details/room-details.component.scss index 41a78ea..1a6ca98 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-details/room-details.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/rooms/room-wizard/steps/room-details/room-details.component.scss @@ -1,8 +1,8 @@ -@import '../../../../../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../../../../../src/assets/styles/design-tokens'; .room-details-step { - @include ov-page-content; - @include ov-container; + @include design-tokens.ov-page-content; + @include design-tokens.ov-container; padding: var(--ov-meet-spacing-md); @@ -13,7 +13,7 @@ // margin-bottom: var(--ov-meet-spacing-xl); .step-icon { - @include ov-icon(xl); + @include design-tokens.ov-icon(xl); color: var(--ov-meet-icon-rooms); margin-top: var(--ov-meet-spacing-xs); } @@ -42,7 +42,7 @@ // margin-bottom: var(--ov-meet-spacing-xl); .room-details-form { - @include ov-grid-responsive(280px); + @include design-tokens.ov-grid-responsive(280px); gap: var(--ov-meet-spacing-lg); .form-field { @@ -66,23 +66,23 @@ // Icon styling in form fields .mat-mdc-form-field-icon-suffix { mat-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); } } .mat-datepicker-toggle { mat-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); } } // Clear button styling .clear-date-button { - @include ov-button-base; + @include design-tokens.ov-button-base; padding: var(--ov-meet-spacing-xs); mat-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); } } } @@ -122,7 +122,7 @@ color: var(--ov-meet-text-primary); .policies-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); color: var(--ov-meet-primary); } } @@ -162,7 +162,7 @@ border-left: 3px solid var(--ov-meet-primary); .hint-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); color: var(--ov-meet-color-warning); } @@ -176,7 +176,7 @@ } } - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { .step-header { flex-direction: column; text-align: center; @@ -220,7 +220,7 @@ } } - @include ov-tablet-down { + @include design-tokens.ov-tablet-down { .step-content { .room-details-form { grid-template-columns: 1fr; diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.scss index 539e928..63bf748 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../../src/assets/styles/design-tokens'; .form-field-header { position: relative; @@ -105,7 +105,7 @@ border-color: var(--ov-meet-color-error); } - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { flex-direction: column; .mat-mdc-button, diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.ts index d9e761e..f64d38c 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.ts +++ b/frontend/projects/shared-meet-components/src/lib/pages/console/users-permissions/users-permissions.component.ts @@ -17,7 +17,7 @@ import { MatInputModule } from '@angular/material/input'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatSelectModule } from '@angular/material/select'; import { MatTooltipModule } from '@angular/material/tooltip'; -import { ProFeatureBadgeComponent } from '@lib/components'; +// import { ProFeatureBadgeComponent } from '@lib/components'; import { AuthService, GlobalConfigService, NotificationService } from '@lib/services'; import { AuthMode } from '@lib/typings/ce'; @@ -34,7 +34,7 @@ import { AuthMode } from '@lib/typings/ce'; MatProgressSpinnerModule, MatDividerModule, ReactiveFormsModule, - ProFeatureBadgeComponent + // ProFeatureBadgeComponent ], templateUrl: './users-permissions.component.html', styleUrl: './users-permissions.component.scss' diff --git a/frontend/projects/shared-meet-components/src/lib/pages/error/error.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/error/error.component.scss index a637a5e..303c0e8 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/error/error.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/error/error.component.scss @@ -1,14 +1,14 @@ -@import '../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../src/assets/styles/design-tokens'; .error-page { - @include ov-theme-transition; - @include ov-flex-center; + @include design-tokens.ov-theme-transition; + @include design-tokens.ov-flex-center; min-height: 100vh; background: var(--ov-meet-background-color); padding: var(--ov-meet-spacing-lg); .error-container { - @include ov-theme-transition; + @include design-tokens.ov-theme-transition; display: flex; flex-direction: row; align-items: center; @@ -16,7 +16,7 @@ max-width: 800px; width: 100%; - @include ov-tablet-down { + @include design-tokens.ov-tablet-down { flex-direction: column; gap: var(--ov-meet-spacing-xl); text-align: center; @@ -29,15 +29,15 @@ gap: var(--ov-meet-spacing-lg); .error-icon-section { - @include ov-flex-center; + @include design-tokens.ov-flex-center; justify-content: flex-start; - @include ov-tablet-down { + @include design-tokens.ov-tablet-down { justify-content: center; } .error-main-icon { - @include ov-icon(xl); + @include design-tokens.ov-icon(xl); color: var(--ov-meet-color-error); background: rgba(var(--ov-meet-color-error), 0.1); border-radius: var(--ov-meet-radius-circle); @@ -56,7 +56,7 @@ color: var(--ov-meet-text-primary); 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); } } @@ -68,11 +68,11 @@ line-height: var(--ov-meet-line-height-normal); max-width: 400px; - @include ov-tablet-down { + @include design-tokens.ov-tablet-down { max-width: none; } - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { font-size: var(--ov-meet-font-size-sm); } } @@ -83,18 +83,18 @@ gap: 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; } - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { flex-direction: column; align-items: center; } .action-button { - @include ov-button-base; - @include ov-flex-center; + @include design-tokens.ov-button-base; + @include design-tokens.ov-flex-center; gap: var(--ov-meet-spacing-xs); min-width: 120px; @@ -110,10 +110,10 @@ } 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; } } @@ -122,14 +122,14 @@ .error-illustration { flex: 1; - @include ov-flex-center; + @include design-tokens.ov-flex-center; - @include ov-tablet-down { + @include design-tokens.ov-tablet-down { order: -1; } .illustration-container { - @include ov-flex-center; + @include design-tokens.ov-flex-center; flex-direction: column; gap: var(--ov-meet-spacing-lg); opacity: 0.6; @@ -140,7 +140,7 @@ height: 120px; color: var(--ov-meet-text-hint); - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { font-size: 80px; width: 80px; height: 80px; @@ -158,7 +158,7 @@ font-weight: var(--ov-meet-font-weight-bold); color: var(--ov-meet-text-secondary); - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { font-size: var(--ov-meet-font-size-lg); } } @@ -179,7 +179,7 @@ } // Enhanced responsive design -@include ov-mobile-down { +@include design-tokens.ov-mobile-down { .error-page { padding: var(--ov-meet-spacing-md); diff --git a/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.scss index 26ca643..f552a11 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/login/login.component.scss @@ -1,16 +1,16 @@ -@import '../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../src/assets/styles/design-tokens'; // Login Page Container - Full height centered layout .ov-page-container { - @include ov-flex-center; - @include ov-theme-transition; + @include design-tokens.ov-flex-center; + @include design-tokens.ov-theme-transition; min-height: 100vh; background: var(--ov-meet-background-color); padding: var(--ov-meet-spacing-lg); } .login-page-content { - @include ov-flex-center; + @include design-tokens.ov-flex-center; flex-direction: column; // gap: var(--ov-meet-spacing-xl); width: 100%; @@ -19,10 +19,10 @@ // Login Header - Using get-started-header mixin for consistency .get-started-header { - @include ov-get-started-header; + @include design-tokens.ov-get-started-header; .login-icon { - @include ov-icon(xl); + @include design-tokens.ov-icon(xl); margin-bottom: var(--ov-meet-spacing-md); } @@ -52,8 +52,8 @@ // Login Card - Form section .login-card { - @include ov-card; - @include ov-theme-transition; + @include design-tokens.ov-card; + @include design-tokens.ov-theme-transition; flex: 1; box-shadow: none; border-radius: 0; @@ -75,7 +75,7 @@ width: 100%; mat-icon { - @include ov-icon(md); + @include design-tokens.ov-icon(md); color: var(--ov-meet-text-secondary); } } @@ -92,7 +92,7 @@ margin-top: var(--ov-meet-spacing-md); .primary-button { - @include ov-button-base; + @include design-tokens.ov-button-base; width: 100%; padding: var(--ov-meet-spacing-md); font-size: var(--ov-meet-font-size-md); @@ -103,8 +103,8 @@ // Brand Section - Visual branding area .brand-section { - @include ov-flex-center; - @include ov-theme-transition; + @include design-tokens.ov-flex-center; + @include design-tokens.ov-theme-transition; flex: 1; background: var(--ov-meet-color-secondary); padding: var(--ov-meet-spacing-xl); @@ -123,7 +123,7 @@ } // Responsive design using design system breakpoints -@include ov-tablet-down { +@include design-tokens.ov-tablet-down { .ov-page-container { padding: var(--ov-meet-spacing-md); } @@ -157,7 +157,7 @@ } } -@include ov-mobile-down { +@include design-tokens.ov-mobile-down { .ov-page-container { padding: var(--ov-meet-spacing-sm); } @@ -190,7 +190,7 @@ .get-started-header { .login-icon { - @include ov-icon(lg); + @include design-tokens.ov-icon(lg); } h1 { diff --git a/frontend/projects/shared-meet-components/src/lib/pages/meeting/end-meeting/end-meeting.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/meeting/end-meeting/end-meeting.component.scss index 7913d4c..b0a298e 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/meeting/end-meeting/end-meeting.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/meeting/end-meeting/end-meeting.component.scss @@ -1,7 +1,7 @@ -@import '../../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../../src/assets/styles/design-tokens'; .disconnected-container { - @include ov-theme-transition; + @include design-tokens.ov-theme-transition; display: flex; justify-content: center; align-items: center; @@ -11,7 +11,7 @@ } .disconnect-content { - @include ov-card; + @include design-tokens.ov-card; max-width: 520px; width: 100%; text-align: center; @@ -19,7 +19,7 @@ background: var(--ov-meet-surface-elevated); box-shadow: var(--ov-meet-shadow-lg); - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { padding: var(--ov-meet-spacing-xl); margin: var(--ov-meet-spacing-md); max-width: calc(100vw - 2 * var(--ov-meet-spacing-md)); @@ -31,6 +31,7 @@ display: flex; justify-content: center; align-items: center; + position: relative; .logo-image { width: 50px; @@ -39,7 +40,7 @@ display: block; transition: all var(--ov-meet-transition-normal); - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { width: 40px; } } @@ -53,13 +54,12 @@ border-radius: var(--ov-meet-radius-circle); z-index: -1; - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { width: 64px; height: 64px; } } - position: relative; } .disconnect-message { @@ -72,7 +72,7 @@ margin: 0 0 var(--ov-meet-spacing-sm) 0; 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); } } @@ -86,7 +86,7 @@ margin-left: auto; margin-right: auto; - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { font-size: var(--ov-meet-font-size-sm); } } @@ -107,7 +107,7 @@ font-weight: var(--ov-meet-font-weight-medium); } - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { .footer-text { font-size: var(--ov-meet-font-size-xs); flex-direction: column; @@ -116,12 +116,12 @@ } .quick-actions { - @include ov-flex-center; + @include design-tokens.ov-flex-center; margin-top: var(--ov-meet-spacing-md); .quick-action-button { - @include ov-button-base; - @include ov-theme-transition; + @include design-tokens.ov-button-base; + @include design-tokens.ov-theme-transition; display: flex; align-items: center; gap: var(--ov-meet-spacing-sm); diff --git a/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.scss index 571bb14..97ebf04 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.scss @@ -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 { - @include ov-container; - @include ov-page-content; + @include design-tokens.ov-container; + @include design-tokens.ov-page-content; padding-top: var(--ov-meet-spacing-xxl); background: var(--ov-meet-background-color); gap: 0; @@ -11,14 +11,14 @@ // Room Header - Clean title section .room-header { - @include ov-flex-center; + @include design-tokens.ov-flex-center; flex-direction: column; gap: var(--ov-meet-spacing-md); margin-bottom: var(--ov-meet-spacing-xxl); text-align: center; .room-icon { - @include ov-icon(xl); + @include design-tokens.ov-icon(xl); color: var(--ov-meet-icon-rooms); margin-bottom: var(--ov-meet-spacing-sm); } @@ -36,7 +36,7 @@ // Action Cards Grid - Responsive layout .action-cards-grid { - @include ov-grid-responsive(320px); + @include design-tokens.ov-grid-responsive(320px); gap: var(--ov-meet-spacing-xl); margin-bottom: var(--ov-meet-spacing-xxl); justify-content: center; @@ -52,7 +52,7 @@ } } - @include ov-tablet-down { + @include design-tokens.ov-tablet-down { grid-template-columns: 1fr; gap: var(--ov-meet-spacing-lg); @@ -67,9 +67,9 @@ // Action Card Base - Consistent card styling .action-card { - @include ov-card; - @include ov-hover-lift(-4px); - @include ov-theme-transition; + @include design-tokens.ov-card; + @include design-tokens.ov-hover-lift(-4px); + @include design-tokens.ov-theme-transition; padding: 0; overflow: hidden; min-height: 300px; @@ -86,7 +86,7 @@ flex-shrink: 0; .card-icon { - @include ov-icon(lg); + @include design-tokens.ov-icon(lg); flex-shrink: 0; } @@ -139,13 +139,13 @@ } .room-closed-message { - @include ov-flex-center; + @include design-tokens.ov-flex-center; flex-direction: column; gap: var(--ov-meet-spacing-md); text-align: center; .warning-icon { - @include ov-icon(xl); + @include design-tokens.ov-icon(xl); color: var(--ov-meet-color-warning); } @@ -184,7 +184,7 @@ } .join-button { - @include ov-button-base; + @include design-tokens.ov-button-base; height: 56px; display: flex; align-items: center; @@ -212,7 +212,7 @@ } .recordings-button { - @include ov-button-base; + @include design-tokens.ov-button-base; height: 56px; display: flex; align-items: center; @@ -223,7 +223,7 @@ // Quick Actions - Footer actions .quick-actions { - @include ov-flex-center; + @include design-tokens.ov-flex-center; margin-top: var(--ov-meet-spacing-xl); .quick-action-button { @@ -231,7 +231,7 @@ align-items: center; gap: var(--ov-meet-spacing-sm); color: var(--ov-meet-text-secondary); - @include ov-theme-transition; + @include design-tokens.ov-theme-transition; &:hover { color: var(--ov-meet-text-primary); @@ -257,7 +257,7 @@ } // Responsive adjustments -@include ov-mobile-down { +@include design-tokens.ov-mobile-down { .room-access-container { padding: 0; padding-top: var(--ov-meet-spacing-sm); diff --git a/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.scss index dca1528..37b5409 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/room-recordings/room-recordings.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../src/assets/styles/design-tokens'; .ov-page-container { height: 100vh; @@ -6,8 +6,8 @@ } .recordings-page-header { - @include ov-container; - @include ov-page-content; + @include design-tokens.ov-container; + @include design-tokens.ov-page-content; gap: 0; padding-bottom: 0; padding-top: var(--ov-meet-spacing-xxl); @@ -16,13 +16,13 @@ // Room Header .recordings-header { - @include ov-flex-center; + @include design-tokens.ov-flex-center; flex-direction: row; gap: var(--ov-meet-spacing-md); text-align: center; .room-icon { - @include ov-icon(xl); + @include design-tokens.ov-icon(xl); color: var(--ov-meet-icon-recordings); margin-bottom: var(--ov-meet-spacing-sm); } @@ -46,23 +46,23 @@ // === CONTENT SECTIONS === .recordings-content { - @include ov-container; - @include ov-page-content; + @include design-tokens.ov-container; + @include design-tokens.ov-page-content; margin-top: var(--ov-meet-spacing-xl); flex: 1; padding-bottom: var(--ov-meet-spacing-xl); // Add bottom padding for better UX } .recordings-loading-container { - @include ov-container; - @include ov-flex-center; + @include design-tokens.ov-container; + @include design-tokens.ov-flex-center; min-height: 60vh; padding: var(--ov-meet-spacing-xxl); } .loading-card { - @include ov-card; - @include ov-flex-center; + @include design-tokens.ov-card; + @include design-tokens.ov-flex-center; flex-direction: column; gap: var(--ov-meet-spacing-lg); text-align: center; @@ -70,7 +70,7 @@ padding: var(--ov-meet-spacing-xxl); .loading-icon { - @include ov-icon(xl); + @include design-tokens.ov-icon(xl); color: var(--ov-meet-icon-recordings); margin-bottom: var(--ov-meet-spacing-md); } @@ -96,7 +96,7 @@ // === RESPONSIVE DESIGN === -@include ov-tablet-down { +@include design-tokens.ov-tablet-down { .recordings-page-header { padding-top: var(--ov-meet-spacing-lg); gap: var(--ov-meet-spacing-lg); @@ -104,7 +104,7 @@ .recordings-header { .room-icon { - @include ov-icon(lg); + @include design-tokens.ov-icon(lg); } .room-info { @@ -127,7 +127,7 @@ } } -@include ov-mobile-down { +@include design-tokens.ov-mobile-down { .recordings-page-header { padding: var(--ov-meet-spacing-md); } @@ -142,7 +142,7 @@ padding: var(--ov-meet-spacing-lg); .loading-icon { - @include ov-icon(lg); + @include design-tokens.ov-icon(lg); } .loading-title { diff --git a/frontend/projects/shared-meet-components/src/lib/pages/view-recording/view-recording.component.scss b/frontend/projects/shared-meet-components/src/lib/pages/view-recording/view-recording.component.scss index a3c3cef..355d98e 100644 --- a/frontend/projects/shared-meet-components/src/lib/pages/view-recording/view-recording.component.scss +++ b/frontend/projects/shared-meet-components/src/lib/pages/view-recording/view-recording.component.scss @@ -1,4 +1,4 @@ -@import '../../../../../../src/assets/styles/design-tokens'; +@use '../../../../../../src/assets/styles/design-tokens'; // === MOBILE RESPONSIVE EXPERIENCE === @@ -10,7 +10,7 @@ display: flex; flex-direction: column; - @include ov-tablet-up { + @include design-tokens.ov-tablet-up { display: none; // Hide on tablet and desktop } } @@ -38,7 +38,7 @@ flex-shrink: 0; mat-icon { - @include ov-icon(md); + @include design-tokens.ov-icon(md); } } @@ -66,13 +66,13 @@ .recording-date, .recording-duration { - @include ov-flex-center; + @include design-tokens.ov-flex-center; gap: var(--ov-meet-spacing-xs); font-size: var(--ov-meet-font-size-xs); color: var(--ov-meet-text-secondary); mat-icon { - @include ov-icon(xs); + @include design-tokens.ov-icon(xs); } } } @@ -94,14 +94,14 @@ } mat-icon { - @include ov-icon(md); + @include design-tokens.ov-icon(md); } } } } .status-bar { - @include ov-flex-center; + @include design-tokens.ov-flex-center; gap: var(--ov-meet-spacing-xs); justify-content: center; background: color-mix(in srgb, var(--ov-meet-color-warning) 12%, transparent); @@ -111,7 +111,7 @@ color: var(--ov-meet-color-warning); .status-icon { - @include ov-icon(xs); + @include design-tokens.ov-icon(xs); } .status-text { @@ -146,7 +146,7 @@ left: 0; width: 100%; height: 100%; - @include ov-flex-center; + @include design-tokens.ov-flex-center; flex-direction: column; gap: var(--ov-meet-spacing-md); background: var(--ov-meet-background-color); @@ -157,7 +157,7 @@ .video-error-container, .video-unavailable-container { - @include ov-flex-center; + @include design-tokens.ov-flex-center; min-height: 300px; background: var(--ov-meet-surface-color); border-radius: var(--ov-meet-radius-lg); @@ -172,7 +172,7 @@ .error-icon, .status-icon { - @include ov-icon(xl); + @include design-tokens.ov-icon(xl); margin-bottom: var(--ov-meet-spacing-md); } @@ -199,7 +199,7 @@ } button { - @include ov-button-base; + @include design-tokens.ov-button-base; display: inline-flex; align-items: center; gap: var(--ov-meet-spacing-sm); @@ -210,8 +210,8 @@ // === MAIN PAGE LAYOUT === .recording-page-content { - @include ov-container; - @include ov-page-content; + @include design-tokens.ov-container; + @include design-tokens.ov-page-content; max-width: 1000px; padding-top: var(--ov-meet-spacing-xl); } @@ -219,7 +219,7 @@ // === LOADING STATES === .loading-container { - @include ov-flex-center; + @include design-tokens.ov-flex-center; flex-direction: column; gap: var(--ov-meet-spacing-md); height: 60vh; @@ -235,7 +235,7 @@ // === ERROR STATES === .error-container { - @include ov-flex-center; + @include design-tokens.ov-flex-center; min-height: 60vh; padding: var(--ov-meet-spacing-xl); @@ -244,7 +244,7 @@ max-width: 500px; .error-icon { - @include ov-icon(xl); + @include design-tokens.ov-icon(xl); color: var(--ov-meet-color-error); margin-bottom: var(--ov-meet-spacing-md); } @@ -270,7 +270,7 @@ flex-wrap: wrap; button { - @include ov-button-base; + @include design-tokens.ov-button-base; display: flex; align-items: center; gap: var(--ov-meet-spacing-sm); @@ -290,7 +290,7 @@ align-items: flex-start; gap: var(--ov-meet-spacing-lg); - @include ov-tablet-down { + @include design-tokens.ov-tablet-down { flex-direction: column; align-items: stretch; } @@ -311,7 +311,7 @@ color: var(--ov-meet-text-primary); 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); } } @@ -322,31 +322,31 @@ gap: var(--ov-meet-spacing-lg); margin-bottom: var(--ov-meet-spacing-sm); - @include ov-mobile-down { + @include design-tokens.ov-mobile-down { flex-direction: column; gap: var(--ov-meet-spacing-xs); } .recording-date, .recording-duration { - @include ov-flex-center; + @include design-tokens.ov-flex-center; gap: var(--ov-meet-spacing-xs); font-size: var(--ov-meet-font-size-sm); color: var(--ov-meet-text-secondary); mat-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); } } } .recording-status { - @include ov-flex-center; + @include design-tokens.ov-flex-center; gap: var(--ov-meet-spacing-xs); justify-content: flex-start; .status-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); &.complete { color: var(--ov-meet-color-success); @@ -401,7 +401,7 @@ left: 0; width: 100%; height: 100%; - @include ov-flex-center; + @include design-tokens.ov-flex-center; flex-direction: column; gap: var(--ov-meet-spacing-md); background: var(--ov-meet-surface-color); @@ -412,7 +412,7 @@ .video-error-container, .video-unavailable-container { - @include ov-flex-center; + @include design-tokens.ov-flex-center; min-height: 300px; background: var(--ov-meet-surface-color); border-radius: var(--ov-meet-radius-lg); @@ -426,7 +426,7 @@ .error-icon, .status-icon { - @include ov-icon(xl); + @include design-tokens.ov-icon(xl); margin-bottom: var(--ov-meet-spacing-md); } @@ -453,7 +453,7 @@ } button { - @include ov-button-base; + @include design-tokens.ov-button-base; display: inline-flex; align-items: center; gap: var(--ov-meet-spacing-sm); @@ -469,13 +469,13 @@ align-self: self-end; .primary-actions { - @include ov-flex-center; + @include design-tokens.ov-flex-center; gap: var(--ov-meet-spacing-md); flex-wrap: wrap; justify-content: end; .action-btn { - @include ov-button-base; + @include design-tokens.ov-button-base; display: flex; align-items: center; gap: var(--ov-meet-spacing-sm); @@ -483,7 +483,7 @@ height: 48px; mat-icon { - @include ov-icon(sm); + @include design-tokens.ov-icon(sm); } } } @@ -491,7 +491,7 @@ // === RESPONSIVE ADJUSTMENTS === -@include ov-mobile-down { +@include design-tokens.ov-mobile-down { .recording-page-content { padding: var(--ov-meet-spacing-lg); padding-top: var(--ov-meet-spacing-xl); @@ -508,7 +508,7 @@ } } -@include ov-tablet-down { +@include design-tokens.ov-tablet-down { .video-section { .video-error-container, .video-unavailable-container { diff --git a/frontend/src/assets/styles/_design-tokens.scss b/frontend/src/assets/styles/_design-tokens.scss index 62d22ee..90879aa 100644 --- a/frontend/src/assets/styles/_design-tokens.scss +++ b/frontend/src/assets/styles/_design-tokens.scss @@ -1,24 +1,24 @@ // 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 // Core tokens (colors, spacing, typography, etc.) -@import 'tokens-core'; +@forward 'tokens-core'; // Theme-specific variables (light/dark themes) -@import 'tokens-themes'; +@forward 'tokens-themes'; // Layout-related mixins (containers, grids, positioning) -@import 'mixins-layout'; +@forward 'mixins-layout'; // Component-specific mixins (cards, buttons, headers) -@import 'mixins-components'; +@forward 'mixins-components'; // Responsive design utilities -@import 'mixins-responsive'; +@forward 'mixins-responsive'; // Animation keyframes and classes -@import 'animations'; +@forward 'animations'; // Utility classes -@import 'utilities'; +@forward 'utilities'; diff --git a/frontend/src/assets/styles/_mixins-components.scss b/frontend/src/assets/styles/_mixins-components.scss index 476d1c0..42c0740 100644 --- a/frontend/src/assets/styles/_mixins-components.scss +++ b/frontend/src/assets/styles/_mixins-components.scss @@ -1,9 +1,12 @@ // Component Mixins - Specific mixins for UI components like cards, buttons, headers // This file contains mixins for specific component patterns +@use 'mixins-layout' as layout; +@use 'mixins-responsive' as responsive; + // Mixin for consistent cards @mixin ov-card { - @include ov-theme-transition; + @include layout.ov-theme-transition; background: var(--ov-meet-card-background); border-radius: var(--ov-meet-card-border-radius); box-shadow: var(--ov-meet-card-shadow); @@ -20,7 +23,7 @@ // Mixin for consistent buttons @mixin ov-button-base { - @include ov-theme-transition; + @include layout.ov-theme-transition; border-radius: var(--ov-meet-button-border-radius); font-weight: var(--ov-meet-button-font-weight); transition: @@ -33,7 +36,7 @@ // Mixin for statistics and metrics @mixin ov-stat-card { @include ov-card; - @include ov-hover-lift(-2px); + @include layout.ov-hover-lift(-2px); .stat-content { .stat-number { @@ -129,7 +132,7 @@ color: var(--ov-meet-text-primary); text-transform: uppercase; - @include ov-tablet-down { + @include responsive.ov-tablet-down { font-size: var(--ov-meet-font-size-lg); } } @@ -141,7 +144,7 @@ } .section-icon { - @include ov-icon(lg); + @include layout.ov-icon(lg); color: var(--ov-meet-text-secondary); } } diff --git a/frontend/src/assets/styles/_utilities.scss b/frontend/src/assets/styles/_utilities.scss index 03e0f2c..386d662 100644 --- a/frontend/src/assets/styles/_utilities.scss +++ b/frontend/src/assets/styles/_utilities.scss @@ -1,6 +1,10 @@ // Utility Classes - Helper classes for common styling patterns // This file contains reusable utility classes +@use 'mixins-layout' as layout; +@use 'mixins-components' as components; +@use 'mixins-responsive' as responsive; + // === UTILITY CLASSES === .ov-text-center { @@ -8,11 +12,11 @@ } .ov-text-truncate { - @include ov-text-truncate; + @include layout.ov-text-truncate; } .ov-flex-center { - @include ov-flex-center; + @include layout.ov-flex-center; } .ov-meet-dialog { border-radius: var(--ov-meet-spacing-md); @@ -20,7 +24,7 @@ } .primary-button { - @include ov-button-base; + @include components.ov-button-base; background-color: var(--ov-meet-color-secondary); color: var(--ov-meet-text-on-secondary) !important; @@ -88,50 +92,50 @@ // === THEME CLASSES === .ov-theme-transition { - @include ov-theme-transition; + @include layout.ov-theme-transition; } // === CONCEPTUAL ICON CLASSES === // Apply these classes directly to mat-icon elements for consistent conceptual colors .ov-room-icon { color: var(--ov-meet-icon-rooms) !important; - @include ov-theme-transition; + @include layout.ov-theme-transition; } .ov-recording-icon { color: var(--ov-meet-icon-recordings) !important; - @include ov-theme-transition; + @include layout.ov-theme-transition; } .ov-users-permissions { color: var(--ov-meet-icon-users-permissions) !important; - @include ov-theme-transition; + @include layout.ov-theme-transition; } .ov-settings-icon { color: var(--ov-meet-icon-settings) !important; - @include ov-theme-transition; + @include layout.ov-theme-transition; } .ov-developer-icon { color: var(--ov-meet-icon-developer) !important; - @include ov-theme-transition; + @include layout.ov-theme-transition; } .ov-about-icon { color: var(--ov-meet-icon-about) !important; - @include ov-theme-transition; + @include layout.ov-theme-transition; } .ov-surface { background-color: var(--ov-meet-surface-color); color: var(--ov-meet-text-on-surface); - @include ov-theme-transition; + @include layout.ov-theme-transition; } .ov-background { background-color: var(--ov-meet-background-color); color: var(--ov-meet-text-on-background); - @include ov-theme-transition; + @include layout.ov-theme-transition; } .ov-text-primary { @@ -239,7 +243,7 @@ color: var(--ov-meet-color-primary); .selection-icon { - @include ov-icon(md); + @include layout.ov-icon(md); } .selection-text { @@ -255,7 +259,7 @@ gap: var(--ov-meet-spacing-xs); button { - @include ov-theme-transition; + @include layout.ov-theme-transition; &[color='warn'] { color: var(--ov-meet-color-error); @@ -384,7 +388,7 @@ font-weight: var(--ov-meet-font-weight-medium); mat-icon { - @include ov-icon(sm); + @include layout.ov-icon(sm); } .status-label { @@ -418,7 +422,7 @@ .mat-mdc-icon-button { .mat-icon { - @include ov-icon(sm); + @include layout.ov-icon(sm); } &:hover { @@ -454,7 +458,7 @@ // Empty State .ov-empty-state { - @include ov-card; + @include components.ov-card; text-align: center; margin: var(--ov-meet-spacing-xl) 0; @@ -479,10 +483,10 @@ .action-buttons { .refresh-btn { - @include ov-button-base; + @include components.ov-button-base; mat-icon { - @include ov-icon(md); + @include layout.ov-icon(md); margin-right: var(--ov-meet-spacing-sm); } } @@ -492,7 +496,7 @@ // === NAVIGATION UTILITIES === // For console navigation and sidebar components .meet-toolbar { - @include ov-theme-transition; + @include layout.ov-theme-transition; background-color: var(--ov-meet-surface-color); } @@ -500,7 +504,7 @@ position: fixed; top: 0; z-index: 2; - @include ov-theme-transition; + @include layout.ov-theme-transition; .toolbar-title { font-size: var(--ov-meet-font-size-xxl); @@ -514,11 +518,11 @@ } .ov-sidenav { - @include ov-theme-transition; + @include layout.ov-theme-transition; background-color: var(--ov-meet-surface-color); padding-top: 3.5rem; - @include ov-tablet-up { + @include responsive.ov-tablet-up { padding-top: 4rem; } @@ -550,7 +554,7 @@ .ov-sidenav-content { padding-top: 3.5rem; - @include ov-tablet-up { + @include responsive.ov-tablet-up { padding-top: 4rem; } @@ -560,7 +564,7 @@ } .page-content { - @include ov-container; + @include layout.ov-container; } } @@ -569,7 +573,7 @@ text-align: justify; transition: var(--ov-meet-transition-normal); border-radius: var(--ov-meet-radius-sm); - @include ov-theme-transition; + @include layout.ov-theme-transition; &:hover { background-color: var(--ov-meet-surface-hover) !important; @@ -590,13 +594,13 @@ font-size: var(--ov-meet-font-size-xs); color: var(--ov-text-hint); text-align: center; - @include ov-theme-transition; + @include layout.ov-theme-transition; } .ov-nav-separator { margin: 0; border-top: 1px solid var(--ov-border-color); - @include ov-theme-transition; + @include layout.ov-theme-transition; } // === MENU AND FILTER UTILITIES === @@ -635,7 +639,7 @@ // Toolbar Responsive Patterns .ov-data-toolbar { 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); gap: var(--ov-meet-spacing-sm); @@ -656,7 +660,7 @@ } } - @include ov-mobile-down { + @include responsive.ov-mobile-down { flex-direction: column; align-items: stretch; gap: var(--ov-meet-spacing-sm); @@ -694,7 +698,7 @@ // Table Responsive Patterns .ov-table-container { - @include ov-mobile-down { + @include responsive.ov-mobile-down { margin: 0 calc(-1 * var(--ov-meet-spacing-sm)); border-radius: var(--ov-meet-radius-sm); border-left: none; @@ -704,7 +708,7 @@ .ov-data-table { 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-cell { 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); .mat-mdc-header-cell { @@ -747,7 +751,7 @@ } .ov-action-buttons { - @include ov-mobile-down { + @include responsive.ov-mobile-down { .mat-mdc-icon-button { width: 28px; height: 28px; @@ -763,7 +767,7 @@ } .ov-empty-state { - @include ov-mobile-down { + @include responsive.ov-mobile-down { padding: var(--ov-meet-spacing-xl) var(--ov-meet-spacing-lg); .empty-icon { @@ -870,7 +874,7 @@ gap: var(--ov-meet-spacing-lg); align-items: flex-start; - @include ov-tablet-down { + @include responsive.ov-tablet-down { flex-direction: column; gap: var(--ov-meet-spacing-md); } @@ -893,7 +897,7 @@ } mat-icon { - @include ov-icon(xl); + @include layout.ov-icon(xl); color: var(--ov-meet-text-hint); } } @@ -914,10 +918,10 @@ } button { - @include ov-button-base; + @include components.ov-button-base; mat-icon { - @include ov-icon(sm); + @include layout.ov-icon(sm); } } } @@ -938,12 +942,12 @@ justify-content: center; animation: fadeIn 0.5s ease-out; - @include ov-tablet-down { + @include responsive.ov-tablet-down { padding: var(--ov-meet-spacing-md); min-height: 50vh; } - @include ov-mobile-down { + @include responsive.ov-mobile-down { padding: var(--ov-meet-spacing-lg); min-height: 40vh; } @@ -964,7 +968,7 @@ margin-bottom: var(--ov-meet-spacing-md); .loading-icon { - @include ov-icon(xl); + @include layout.ov-icon(xl); animation: pulse 2s ease-in-out infinite; } @@ -1005,31 +1009,31 @@ height: 100%; overflow: auto; button { - @include ov-button-base; + @include components.ov-button-base; padding: var(--ov-meet-spacing-xs); } - @include ov-tablet-down { + @include responsive.ov-tablet-down { padding: var(--ov-meet-spacing-md); } - @include ov-mobile-down { + @include responsive.ov-mobile-down { padding: var(--ov-meet-spacing-lg); } .page-header { - @include ov-page-header; + @include components.ov-page-header; } .page-content { - @include ov-page-content; + @include components.ov-page-content; } .get-started-header { - @include ov-get-started-header; + @include components.ov-get-started-header; } .section-card { - @include ov-section-card; + @include components.ov-section-card; } .section-divider { @@ -1047,7 +1051,7 @@ align-items: center; gap: var(--ov-meet-spacing-md); - @include ov-mobile-down { + @include responsive.ov-mobile-down { flex-direction: column; align-items: stretch; gap: var(--ov-meet-spacing-sm); @@ -1059,13 +1063,13 @@ align-items: center; gap: var(--ov-meet-spacing-md); - @include ov-mobile-down { + @include responsive.ov-mobile-down { justify-content: center; } } .refresh-btn { - @include ov-theme-transition; + @include layout.ov-theme-transition; border-radius: var(--ov-meet-radius-circle); &:hover:not([disabled]) { @@ -1077,13 +1081,13 @@ } mat-icon { - @include ov-icon(md); + @include layout.ov-icon(md); } } } .ov-table-page-container { - @include ov-card; + @include components.ov-card; padding: 0; overflow: hidden; position: relative; @@ -1109,7 +1113,7 @@ color: var(--ov-meet-text-secondary); .no-results-icon { - @include ov-icon(lg); + @include layout.ov-icon(lg); color: var(--ov-meet-text-hint); margin-bottom: var(--ov-meet-spacing-md); display: block; @@ -1129,7 +1133,7 @@ button { mat-icon { - @include ov-icon(sm); + @include layout.ov-icon(sm); margin-right: var(--ov-meet-spacing-xs); } } @@ -1164,7 +1168,7 @@ gap: var(--ov-meet-spacing-md); padding: var(--ov-meet-spacing-md); - @include ov-mobile-down { + @include responsive.ov-mobile-down { flex-direction: column; gap: var(--ov-meet-spacing-sm); } @@ -1185,13 +1189,13 @@ border-color: var(--ov-border-color); } - @include ov-tablet-down { + @include responsive.ov-tablet-down { min-width: 100%; } } .copy-api-key-btn { - @include ov-button-base; + @include components.ov-button-base; background-color: var(--ov-meet-color-primary); color: white; @@ -1200,11 +1204,11 @@ } mat-icon { - @include ov-icon(md); + @include layout.ov-icon(md); margin-right: var(--ov-meet-spacing-sm); } - @include ov-mobile-down { + @include responsive.ov-mobile-down { width: 100%; justify-content: center; } @@ -1221,7 +1225,7 @@ align-items: center; gap: var(--ov-meet-spacing-md); - @include ov-mobile-down { + @include responsive.ov-mobile-down { flex-direction: column; align-items: stretch; gap: var(--ov-meet-spacing-sm); @@ -1237,7 +1241,7 @@ gap: var(--ov-meet-spacing-sm); justify-content: flex-end; - @include ov-mobile-down { + @include responsive.ov-mobile-down { justify-content: center; } } @@ -1266,7 +1270,7 @@ } .field-icon { - @include ov-icon(md); + @include layout.ov-icon(md); color: var(--ov-meet-text-secondary); } } @@ -1288,7 +1292,7 @@ align-items: center; gap: var(--ov-meet-spacing-sm); - @include ov-mobile-down { + @include responsive.ov-mobile-down { flex-direction: column; align-items: stretch; } @@ -1314,10 +1318,10 @@ border-top: 1px solid var(--ov-border-color-light); button { - @include ov-button-base; + @include components.ov-button-base; mat-icon { - @include ov-icon(md); + @include layout.ov-icon(md); margin-right: var(--ov-meet-spacing-sm); } } @@ -1384,15 +1388,15 @@ } .ov-feature-card { - @include ov-card; - @include ov-hover-lift(-5px); + @include components.ov-card; + @include layout.ov-hover-lift(-5px); text-align: center; mat-card-content { padding: var(--ov-meet-spacing-lg); mat-icon { - @include ov-icon(xl); + @include layout.ov-icon(xl); margin-bottom: var(--ov-meet-spacing-md); } @@ -1410,11 +1414,11 @@ } button { - @include ov-button-base; + @include components.ov-button-base; width: 100%; mat-icon { - @include ov-icon(md); + @include layout.ov-icon(md); margin-right: var(--ov-meet-spacing-sm); } } @@ -1422,17 +1426,17 @@ } .ov-getting-started-grid { - @include ov-grid-responsive(280px); + @include layout.ov-grid-responsive(280px); margin-top: var(--ov-meet-spacing-lg); } .ov-quick-actions { - @include ov-flex-center; + @include layout.ov-flex-center; gap: var(--ov-meet-spacing-md); margin-bottom: var(--ov-meet-spacing-xxl); button { - @include ov-button-base; + @include components.ov-button-base; mat-icon { margin-right: var(--ov-meet-spacing-sm); @@ -1441,16 +1445,16 @@ } .ov-stats-grid { - @include ov-grid-responsive(300px); + @include layout.ov-grid-responsive(300px); } .ov-stats-card { - @include ov-card; + @include components.ov-card; text-align: center; - @include ov-theme-transition; + @include layout.ov-theme-transition; &:hover { - @include ov-hover-lift(-3px); + @include layout.ov-hover-lift(-3px); } .stats-content { @@ -1458,7 +1462,7 @@ } .stats-icon { - @include ov-icon(lg); + @include layout.ov-icon(lg); margin-bottom: var(--ov-meet-spacing-sm); } @@ -1488,7 +1492,7 @@ gap: var(--ov-meet-spacing-xs); button { - @include ov-button-base; + @include components.ov-button-base; mat-icon { margin-left: var(--ov-meet-spacing-xs); diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 82f3e68..3eff77c 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -1,6 +1,6 @@ @use '@angular/material' as mat; @use './assets/styles/openvidu-theme.scss'; -@import './assets/styles/design-tokens'; +@use './assets/styles/design-tokens'; @include mat.elevation-classes(); @include mat.app-background();