@tencentcloud/roomkit-electron-vue3 2.8.1 → 2.9.0

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

@@ -108,8 +108,8 @@ function handleControlClick(name: string) {
   padding: 0.7rem 0;
   padding-right: 24px;
   padding-left: 9px;
-  background-color: var(--background-color-2);
-  box-shadow: 0 -8px 30px var(--footer-shadow-color);
+  background-color: var(--bg-color-topbar);
+  box-shadow: 0 -8px 30px var(--uikit-color-black-8);
 
   .left-container {
     display: flex;

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

@@ -57,21 +57,6 @@ const {
 </script>
 
 <style lang="scss" scoped>
-.tui-theme-white .roomInfo-container {
-  --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 .roomInfo-container {
-  --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));
-}
-
 .conference-container {
   position: relative;
   min-width: 140px;
@@ -115,8 +100,10 @@ const {
   flex-direction: column;
   gap: 16px;
   padding: 20px;
-  background-color: var(--background-color-2);
-  filter: var(--filter-color);
+  background-color: var(--bg-color-dialog);
+  box-shadow:
+    0 2px 6px var(--uikit-color-black-8),
+    0 8px 18px var(--uikit-color-black-8);
   border-radius: 16px;
   transform: translateX(-50%);
 
@@ -131,23 +118,23 @@ const {
 
     .roomInfo-title {
       flex-basis: 30%;
-      color: var(--title-font-color);
+      color: var(--text-color-secondary);
     }
 
     .roomInfo-item {
       flex-basis: 50%;
       max-width: 300px;
       overflow: hidden;
-      color: var(--item-font-color);
       text-overflow: ellipsis;
       white-space: nowrap;
+      color: var(--text-color-primary);
     }
 
     .copy-container {
       display: flex;
       margin-left: auto;
-      color: var(--active-color-2);
       cursor: pointer;
+      color: var(--text-color-link);
 
       .copy {
         width: 20px;

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

@@ -118,17 +118,6 @@ async function saveUserName(userName: string) {
 }
 </script>
 <style lang="scss" scoped>
-.tui-theme-white .user-control-container {
-  --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 .user-control-container {
-  --filter-color: drop-shadow(0px 8px 40px rgba(23, 25, 31, 0.6))
-    drop-shadow(0px 4px 12px rgba(23, 25, 31, 0.4));
-}
-
 .user-info-container {
   position: relative;
 
@@ -148,9 +137,9 @@ async function saveUserName(userName: string) {
       margin-left: 10px;
       overflow: hidden;
       font-size: 16px;
-      color: var(--font-color);
       text-overflow: ellipsis;
       white-space: nowrap;
+      color: var(--text-color-primary);
     }
 
     .down-icon {
@@ -169,8 +158,10 @@ async function saveUserName(userName: string) {
     right: 0;
     min-width: 100px;
     padding: 10px;
-    background: #fff;
-    filter: var(--filter-color);
+    background: var(--bg-color-dialog);
+    filter: drop-shadow(0px 0px 4px var(--uikit-color-black-8))
+      drop-shadow(0px 4px 10px var(--uikit-color-black-8))
+      drop-shadow(0px 1px 14px var(--uikit-color-black-8));
     border-radius: 8px;
 
     &::before {
@@ -181,7 +172,7 @@ async function saveUserName(userName: string) {
       content: '';
       border-top: 10px solid transparent;
       border-right: 10px solid transparent;
-      border-bottom: 10px solid #fff;
+      border-bottom: 10px solid var(--bg-color-dialog);
       border-left: 10px solid transparent;
     }
 
@@ -199,7 +190,7 @@ async function saveUserName(userName: string) {
     .user-control-item-head {
       height: 20px;
       font-size: 14px;
-      color: #4f586b;
+      color: var(--text-color-secondary);
       text-align: center;
       cursor: pointer;
     }

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