@tencentcloud/roomkit-electron-vue3 2.8.2 → 2.9.0

package/src/TUIRoom/components/RoomHeader/index/InfoControl.vue

@@ -61,9 +61,9 @@ function handleDocumentClick(event: MouseEvent) {
     right: 0;
     display: flex;
     padding: 20px;
-    background-color: $toolBarBackgroundColor;
+    background-color: var(--bg-color-topbar);
     border-radius: 4px;
-    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.3);
+    box-shadow: 0 1px 10px 0 var(--uikit-color-black-5);
 
     .layout-item {
       position: relative;
@@ -71,7 +71,7 @@ function handleDocumentClick(event: MouseEvent) {
       height: 133px;
       padding: 20px 30px 39px;
       cursor: pointer;
-      background-color: $primaryColor;
+      background-color: var(--bg-color-operate);
       border: 1px solid transparent;
       border-radius: 2px;
 
@@ -80,12 +80,12 @@ function handleDocumentClick(event: MouseEvent) {
       }
 
       &:hover {
-        border: 1px solid $primaryHighLightColor;
+        border: 1px solid var(--stroke-color-primary);
         border-radius: 2px;
       }
 
       &.checked {
-        border: 1px solid $primaryHighLightColor;
+        border: 1px solid var(--stroke-color-primary);
         border-radius: 2px;
 
         &::after {
@@ -126,7 +126,7 @@ function handleDocumentClick(event: MouseEvent) {
         .layout-block {
           width: 38px;
           height: 22px;
-          background-color: $layoutBlockColor;
+          background-color: var(--bg-color-operate);
         }
       }
     }
@@ -139,7 +139,7 @@ function handleDocumentClick(event: MouseEvent) {
         .left-container {
           width: 90px;
           height: 74px;
-          background-color: $layoutBlockColor;
+          background-color: var(--bg-color-operate);
         }
 
         .right-container {
@@ -152,7 +152,7 @@ function handleDocumentClick(event: MouseEvent) {
           > div {
             width: 27px;
             height: 16px;
-            background-color: $layoutBlockColor;
+            background-color: var(--bg-color-operate);
           }
         }
       }
@@ -174,14 +174,14 @@ function handleDocumentClick(event: MouseEvent) {
           > div {
             width: 28px;
             height: 16px;
-            background-color: $layoutBlockColor;
+            background-color: var(--bg-color-operate);
           }
         }
 
         .bottom-container {
           width: 120px;
           height: 55px;
-          background-color: $layoutBlockColor;
+          background-color: var(--bg-color-operate);
         }
       }
     }

package/src/TUIRoom/components/RoomHeader/index/LayoutControl.vue

@@ -135,19 +135,6 @@ function handleClickOutSide() {
 </script>
 
 <style lang="scss" scoped>
-.tui-theme-black .layout-container {
-  --background-color: var(--background-color-2);
-  --box-shadow: 0px 0px 40px rgba(23, 25, 31, 0.6),
-    0px 0px 12px rgba(23, 25, 31, 0.4);
-  --block-background-color: var(--background-color-3);
-}
-
-.tui-theme-white .layout-container {
-  --background-color: var(--background-color-1);
-  --box-shadow: 0px 3px 8px #e9f0fb;
-  --block-background-color: #e4eaf7;
-}
-
 .layout-container {
   position: relative;
 
@@ -157,9 +144,11 @@ function handleClickOutSide() {
     left: 0;
     display: flex;
     padding: 16px 16px 6px;
-    background-color: var(--background-color);
     border-radius: 8px;
-    box-shadow: var(--box-shadow);
+    background-color: var(--bg-color-dialog);
+    box-shadow:
+      0 2px 6px var(--uikit-color-black-8),
+      0 8px 18px var(--uikit-color-black-8);
 
     .layout-item {
       position: relative;
@@ -180,7 +169,7 @@ function handleClickOutSide() {
       &:hover,
       &.checked {
         .layout-block-container {
-          border: 2px solid var(--active-color-1);
+          border: 2px solid var(--text-color-link);
         }
       }
 
@@ -191,14 +180,14 @@ function handleClickOutSide() {
         font-size: 12px;
         font-weight: 400;
         line-height: 24px;
-        color: var(--font-color-1);
         text-align: center;
+        color: var(--text-color-primary);
       }
 
       &.checked {
         .layout-title {
           font-weight: 500;
-          color: var(--active-color-1);
+          color: var(--text-color-link);
         }
       }
     }
@@ -212,7 +201,7 @@ function handleClickOutSide() {
         .layout-block {
           width: 38px;
           height: 24px;
-          background-color: var(--block-background-color);
+          background-color: var(--tab-color-option);
 
           &:nth-child(1) {
             border-top-left-radius: 4px;
@@ -241,9 +230,9 @@ function handleClickOutSide() {
         .left-container {
           width: 78px;
           height: 100%;
-          background-color: var(--block-background-color);
           border-top-left-radius: 4px;
           border-bottom-left-radius: 4px;
+          background-color: var(--tab-color-option);
         }
 
         .right-container {
@@ -256,7 +245,7 @@ function handleClickOutSide() {
           > div {
             width: 38px;
             height: 24px;
-            background-color: var(--block-background-color);
+            background-color: var(--tab-color-option);
 
             &:nth-child(1) {
               border-top-right-radius: 4px;
@@ -286,7 +275,7 @@ function handleClickOutSide() {
           > div {
             width: 38px;
             height: 24px;
-            background-color: var(--block-background-color);
+            background-color: var(--tab-color-option);
 
             &:nth-child(1) {
               border-top-left-radius: 4px;
@@ -301,9 +290,9 @@ function handleClickOutSide() {
         .bottom-container {
           width: 118px;
           height: 50px;
-          background-color: var(--block-background-color);
           border-bottom-right-radius: 4px;
           border-bottom-left-radius: 4px;
+          background-color: var(--tab-color-option);
         }
       }
     }

package/src/TUIRoom/components/RoomHeader/index/NetworkInfo.vue

@@ -161,21 +161,6 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-.tui-theme-white .network-info-board {
-  --title-font-color: var(--font-color-1);
-  --item-font-color: var(--font-color-6);
-  --filter-color: drop-shadow(0px 0px 4px rgba(32, 77, 141, 0.03))
-    drop-shadow(0px 4px 10px rgba(32, 77, 141, 0.06))
-    drop-shadow(0px 1px 14px rgba(32, 77, 141, 0.05));
-}
-
-.tui-theme-black .network-info-board {
-  --title-font-color: #8f9ab2;
-  --item-font-color: var(--font-color-1);
-  --filter-color: drop-shadow(0px 8px 40px rgba(23, 25, 31, 0.6))
-    drop-shadow(0px 4px 12px rgba(23, 25, 31, 0.4));
-}
-
 .network-info-container {
   position: relative;
 
@@ -185,9 +170,11 @@ onUnmounted(() => {
     width: 161px;
     height: 130px;
     padding: 24px;
-    background-color: var(--background-color-2);
-    filter: var(--filter-color);
     border-radius: 10px;
+    background-color: var(--bg-color-dialog);
+    box-shadow:
+      0 2px 6px var(--uikit-color-black-8),
+      0 8px 18px var(--uikit-color-black-8);
 
     .network-state {
       margin-bottom: 18px;
@@ -200,7 +187,7 @@ onUnmounted(() => {
       font-size: 14px;
       font-weight: 400;
       line-height: 20px;
-      color: var(--title-font-color);
+      color: var(--text-color-secondary);
 
       .title-latency {
         font-weight: 500;
@@ -211,7 +198,7 @@ onUnmounted(() => {
         display: flex;
         flex-direction: column;
         font-weight: 500;
-        color: var(--item-font-color);
+        color: var(--text-color-primary);
 
         .network-detail-packet-item {
           display: flex;
@@ -225,19 +212,19 @@ onUnmounted(() => {
   }
 
   .title-type-success {
-    color: #27c39f;
+    color: var(--text-color-success);
   }
 
   .title-type-warning {
-    color: #f39843;
+    color: var(--text-color-warning);
   }
 
   .title-type-danger {
-    color: #ed414d;
+    color: var(--text-color-error);
   }
 
   .title-type-info {
-    color: #4f586b;
+    color: var(--text-color-tertiary);
   }
 }
 </style>

package/src/TUIRoom/components/RoomHome/RoomControl/index.vue

@@ -368,16 +368,18 @@ onBeforeUnmount(async () => {
   width: 760px;
   height: 544px;
   padding: 20px 20px 32px;
-  background-color: var(--background-color);
   border-radius: 24px;
-  box-shadow: var(--box-shadow);
+  background-color: var(--bg-color-operate);
+  box-shadow:
+    0px 2px 6px var(--uikit-color-black-8),
+    0px 8px 18px var(--uikit-color-black-8);
 
   .stream-preview-container {
     position: relative;
     width: 100%;
     height: 400px;
     overflow: hidden;
-    background-color: #000;
+    background-color: var(--uikit-color-black-1);
     border-radius: 8px;
 
     .stream-preview {
@@ -402,7 +404,7 @@ onBeforeUnmount(async () => {
         font-size: 22px;
         font-weight: 400;
         line-height: 34px;
-        color: #4f586b;
+        color: var(--uikit-color-gray-7);
       }
 
       .loading {
@@ -475,19 +477,19 @@ onBeforeUnmount(async () => {
           bottom: calc(100% + 8px);
           left: 50%;
           cursor: pointer;
-          background-color: #fff;
           border-radius: 10px;
           box-shadow:
-            0 2px 4px rgba(32, 77, 141, 0.03),
-            0 6px 10px rgba(32, 77, 141, 0.06),
-            0 3px 14px rgba(32, 77, 141, 0.05);
+            0 2px 4px var(--uikit-color-black-8),
+            0 6px 10px var(--uikit-color-black-8),
+            0 3px 14px var(--uikit-color-black-8);
           transform: translateX(-50%);
+          background-color: var(--dropdown-color-default);
 
           .create-room-item {
             display: flex;
             justify-content: space-between;
             padding: 19px 32px;
-            color: #4f586b;
+            color: var(--text-color-primary);
             transition:
               background-color 0s,
               color 0s;
@@ -509,7 +511,9 @@ onBeforeUnmount(async () => {
             }
 
             &:hover {
-              color: var(--active-color-1);
+              border-radius: 10px;
+              background-color: var(--dropdown-color-hover);
+              color: var(--text-color-link);
 
               .create-room-option {
                 font-weight: 500;
@@ -532,26 +536,23 @@ onBeforeUnmount(async () => {
           height: 60px;
           padding: 0 14px;
           line-height: 60px;
-          background-color: var(--background-color);
-          border: 2px solid var(--active-color-1);
           border-radius: 30px;
-
+          background-color: var(--bg-color-operate);
+          border: 2px solid var(--button-color-primary-default);
           .input {
             max-width: 140px;
             padding: 0;
             font-size: 20px;
             font-weight: 500;
             line-height: 28px;
-            color: var(--font-color-1);
             background-color: transparent;
             border: 0;
             outline: none;
-
-            --input-placeholder-color: rgba(143, 154, 178, 0.7);
+            color: var(--text-color-secondary);
 
             &::placeholder {
               // https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
-              color: var(--input-placeholder-color);
+              color: var(--uikit-color-gray-7);
             }
           }
 
@@ -564,12 +565,12 @@ onBeforeUnmount(async () => {
             justify-content: center;
             width: 40px;
             height: 40px;
-            background-color: #90b3f0;
             border-radius: 26px;
+            background-color: var(--button-color-primary-disable);
 
             &.active {
               cursor: pointer;
-              background-color: var(--active-color-1);
+              background-color: var(--button-color-primary-active);
             }
           }
         }
@@ -582,18 +583,6 @@ onBeforeUnmount(async () => {
   }
 }
 
-.tui-theme-white .control-container {
-  --background-color: #fff;
-  --box-shadow: 0px 8px 30px 0px rgba(197, 210, 229, 0.3),
-    0px 2px 3px 0px rgba(197, 210, 229, 0.3);
-}
-
-.tui-theme-black .control-container {
-  --background-color: rgba(79, 88, 107, 0.3);
-  --box-shadow: 0px 4px 30px 0px rgba(34, 38, 46, 0.3),
-    0px 0px 3px 0px rgba(34, 38, 46, 0.3);
-}
-
 @keyframes loading-rotate {
   0% {
     transform: rotate(0deg);

package/src/TUIRoom/components/RoomInvite/index.vue

@@ -97,9 +97,9 @@ const {
   justify-content: center;
   width: 100px;
   padding: 5px 10px;
-  background-color: var(--background-color-2);
   border-radius: 15px;
-  box-shadow: 0 -8px 30px var(--footer-shadow-color);
+  background-color: var(--bg-color-dialog);
+  box-shadow: 0 -8px 30px var(--uikit-color-black-8);
 
   .invite-item {
     display: flex;
@@ -136,7 +136,7 @@ const {
     font-size: 14px;
     font-weight: 400;
     line-height: 20px;
-    color: #4f586b;
+    color: var(--text-color-secondary);
 
     .invite-member-title {
       flex-basis: 18%;
@@ -154,17 +154,9 @@ const {
       width: 20px;
       height: 20px;
       margin-left: 8px;
-      color: var(--active-color-1);
       cursor: pointer;
+      color: var(--text-color-link);
     }
   }
 }
-
-.tui-theme-black .invite-container {
-  --hover-bg-color: rgba(79, 88, 107, 0.2);
-}
-
-.tui-theme-white .invite-container {
-  --hover-bg-color: rgba(213, 224, 242, 0.3);
-}
 </style>

package/src/TUIRoom/components/RoomMore/index.vue

@@ -38,7 +38,7 @@ const { t, onCopy, handleClick, email, isZH } = useRoomMoreControl();
     display: flex;
 
     .email-icon {
-      color: #7c85a6;
+      color: var(--uikit-color-gray-7);
     }
 
     .more-notice {
@@ -48,7 +48,7 @@ const { t, onCopy, handleClick, email, isZH } = useRoomMoreControl();
       font-size: 14px;
       font-weight: 400;
       line-height: 22px;
-      color: var(--font-color-5);
+      color: var(--text-color-primary);
     }
   }
 
@@ -66,7 +66,7 @@ const { t, onCopy, handleClick, email, isZH } = useRoomMoreControl();
         font-size: 14px;
         font-weight: 400;
         line-height: 22px;
-        color: var(--font-color-5);
+        color: var(--text-color-primary);
       }
 
       .join-button {
@@ -85,14 +85,14 @@ const { t, onCopy, handleClick, email, isZH } = useRoomMoreControl();
         font-size: 14px;
         font-weight: 500;
         line-height: 22px;
-        color: var(--font-color-6);
         text-overflow: ellipsis;
         white-space: nowrap;
-        background-color: var(--background-color-7);
-        border: 1px solid var(--border-color);
         border-radius: 8px;
         outline: none;
         transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+        color: var(--text-color-primary);
+        background-color: var(--bg-color-input);
+        border: 1px solid var(--stroke-color-module);
       }
 
       .copy-icon {
@@ -105,6 +105,7 @@ const { t, onCopy, handleClick, email, isZH } = useRoomMoreControl();
         width: 32px;
         height: 32px;
         cursor: pointer;
+        color: var(--text-color-link);
       }
     }
   }

package/src/TUIRoom/components/RoomSetting/index.vue

@@ -33,13 +33,11 @@
             v-if="activeSettingTab === 'audio'"
             class="setting-tab"
             :mode="SettingMode.DETAIL"
-            theme="white"
           />
           <video-setting-tab
             v-else-if="activeSettingTab === 'video'"
             class="setting-tab"
             :with-preview="true"
-            theme="white"
           />
         </div>
       </div>
@@ -96,7 +94,7 @@ function handleOverlayClick(event: any) {
   z-index: 2007;
 
   &.overlay {
-    background-color: rgba(15, 16, 20, 0.6);
+    background-color: var(--uikit-color-black-3);
   }
 }
 
@@ -108,9 +106,9 @@ function handleOverlayClick(event: any) {
   flex-direction: column;
   width: 610px;
   height: 590px;
-  background-color: #fff;
   border-radius: 20px;
   transform: translate(-50%, -50%);
+  background-color: var(--bg-color-dialog);
 
   .setting-header {
     position: relative;
@@ -118,8 +116,7 @@ function handleOverlayClick(event: any) {
     flex-direction: row;
     justify-content: space-between;
     height: 64px;
-    border-bottom: 1px solid rgba(235, 240, 247, 1);
-    box-shadow: 0 7px 10px -5px rgba(230, 236, 245, 0.8);
+    border-bottom: 1px solid var(--stroke-color-primary);
 
     .close-icon {
       position: absolute;
@@ -130,9 +127,9 @@ function handleOverlayClick(event: any) {
       justify-content: center;
       width: 32px;
       height: 32px;
-      color: #4f586b;
       cursor: pointer;
       transform: translateY(-50%);
+      color: var(--text-color-primary);
     }
 
     .setting-title {
@@ -142,7 +139,7 @@ function handleOverlayClick(event: any) {
       font-style: normal;
       font-weight: 600;
       line-height: 24px;
-      color: #000;
+      color: var(--text-color-primary);
     }
   }
 
@@ -153,8 +150,8 @@ function handleOverlayClick(event: any) {
     .setting-tabs {
       width: 170px;
       padding-top: 7px;
-      background-color: #f0f3fa;
       border-bottom-left-radius: 10px;
+      background-color: var(--bg-color-default);
 
       .tabs-title {
         position: relative;
@@ -164,13 +161,13 @@ function handleOverlayClick(event: any) {
         font-size: 14px;
         font-weight: 400;
         line-height: 36px;
-        color: #4f586b;
         cursor: pointer;
+        color: var(--text-color-secondary);
 
         &.active {
           font-weight: 400;
-          color: #fff;
-          background-color: #1c66e5;
+          color: var(--uikit-color-white-1);
+          background-color: var(--uikit-color-theme-5);
         }
       }
     }
@@ -178,7 +175,7 @@ function handleOverlayClick(event: any) {
     .divide-line {
       width: 1px;
       height: 100%;
-      background: var(--divide-line-color-setting);
+      background: var(--stroke-color-primary);
     }
 
     .setting-content {

package/src/TUIRoom/components/ScheduleConference/ConferenceDetail.vue

@@ -88,12 +88,12 @@ const getStatusTextAndClass = (status?: TUIConferenceStatus | null) => {
   font-size: 14px;
   font-weight: 400;
   line-height: 20px;
-  color: #4f586b;
+  color: var(--text-color-secondary);
 
   .detail-title {
     width: 84px;
     margin-right: 12px;
-    color: #2b2e38;
+    color: var(--text-color-primary);
   }
 
   .detail-info {
@@ -117,8 +117,8 @@ const getStatusTextAndClass = (status?: TUIConferenceStatus | null) => {
   .copy-container {
     display: flex;
     margin-left: 6px;
-    color: var(--active-color-2);
     cursor: pointer;
+    color: var(--text-color-link);
 
     .copy {
       width: 20px;
@@ -141,7 +141,7 @@ const getStatusTextAndClass = (status?: TUIConferenceStatus | null) => {
 
   .detail-info {
     justify-content: flex-end;
-    color: rgba(43, 46, 56, 0.7);
+    color: var(--text-color-primary);
   }
 
   .detail-item {
@@ -150,14 +150,14 @@ const getStatusTextAndClass = (status?: TUIConferenceStatus | null) => {
 }
 
 .status-not-start {
-  color: var(--font-color-10);
+  color: var(--text-color-button-disable);
 }
 
 .status-running {
-  color: var(--active-color-1);
+  color: var(--text-color-link);
 }
 
 .status-finished {
-  color: #b2bbd1;
+  color: var(--uikit-color-gray-7);
 }
 </style>

package/src/TUIRoom/components/ScheduleConference/Contacts.vue

@@ -309,25 +309,25 @@ watch(
         min-width: 10px;
         margin-right: 10px;
         margin-left: auto;
-        color: #6b758a;
+        color: var(--uikit-color-gray-5);
         cursor: pointer;
       }
     }
 
     &-item:hover {
-      background-color: #ecf5ff;
+      background-color: var(--list-color-hover);
     }
   }
 
   .contact {
     width: 50%;
     padding-right: 1rem;
-    border-right: 1px solid #e5e5e5;
+    border-right: 1px solid var(--stroke-color-module);
 
     .contact-search {
       &-input.focus {
         .search-icon {
-          color: var(--active-color-1);
+          color: var(--text-color-link);
         }
       }
     }
@@ -344,6 +344,17 @@ watch(
         text-align: center;
       }
     }
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    ::-webkit-scrollbar {
+      width: 6px;
+    }
+    ::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      background-color: var(--stroke-color-secondary);
+    }
   }
 
   .chosen {
@@ -397,7 +408,7 @@ watch(
       &-item {
         height: 46px;
         line-height: 46px;
-        border-bottom: 1px solid rgba(221, 226, 235, 0.3);
+        border-bottom: 1px solid var(--stroke-color-primary);
       }
     }
   }
@@ -413,7 +424,7 @@ watch(
   .chosen-member {
     font-size: 14px;
     font-weight: 400;
-    color: #22262e;
+    color: var(--text-color-secondary);
   }
 
   .form-attendees:hover {