@tencentcloud/roomkit-electron-vue3 2.8.2 → 2.9.0

package/src/TUIRoom/components/common/base/Message/_mixins.scss

@@ -1,47 +1,19 @@
 @mixin success_color() {
-  .tui-theme-white & {
-    color: #00B89C;
-    background-color: #EBFFFA;
-  }
-
-  .tui-theme-black & {
-    color: #1CEACB;
-    background-color: #19423C;
-  }
+  color: var(--text-color-success);
+  background-color: var(--toast-color-success);
 }
 
 @mixin err_color() {
-  .tui-theme-white & {
-    color: #E04343;
-    background-color: #FFEBEE;
-  }
-
-  .tui-theme-black & {
-    color: #F46262;
-    background-color: #421414;
-  }
+  color: var(--text-color-error);
+  background-color: var(--toast-color-error);
 }
 
 @mixin warning_color() {
-  .tui-theme-white & {
-    color: #E59753;
-    background-color: #FFF4EB;
-  }
-
-  .tui-theme-black & {
-    color: #FFAD66;
-    background-color: #3F2712;
-  }
+  color: var(--text-color-warning);
+  background-color: var(--toast-color-warning);
 }
 
 @mixin info_color() {
-  .tui-theme-white & {
-    color: #494F6A;
-    background-color: #EBF2FF;
-  }
-
-  .tui-theme-black & {
-    color: #DCE7FA;
-    background-color: #4A506B;
-  }
+  color: var(--text-color-primary);
+  background-color: var(--toast-color-default);
 }

package/src/TUIRoom/components/common/base/MessageBox/index.vue

@@ -157,7 +157,7 @@ onMounted(async () => {
   height: 100%;
 
   &.overlay {
-    background-color: rgba(15, 16, 20, 0.6);
+    background-color: var(--uikit-color-black-3);
   }
 }
 
@@ -168,9 +168,9 @@ onMounted(async () => {
   display: flex;
   flex-direction: column;
   width: 480px;
-  background-color: var(--white-color);
   border-radius: 20px;
   transform: translate(-50%, -50%);
+  background-color: var(--bg-color-dialog);
 
   .tui-message-box-header {
     position: relative;
@@ -178,15 +178,15 @@ onMounted(async () => {
     align-items: center;
     height: 64px;
     padding: 0 24px;
-    color: var(--title-color);
-    box-shadow: 0 7px 10px -5px rgba(230, 236, 245, 0.8);
+    color: var(--text-color-primary);
+    border-bottom: 1px solid var(--stroke-color-primary);
 
     .tui-dialog-header-title {
       font-size: 16px;
       font-style: normal;
       font-weight: 600;
       line-height: 24px;
-      color: #0f1014;
+      color: var(--text-color-primary);
     }
 
     .close {
@@ -198,9 +198,9 @@ onMounted(async () => {
       justify-content: center;
       width: 32px;
       height: 32px;
-      color: #4f586b;
       cursor: pointer;
       transform: translateY(-50%);
+      color: var(--text-color-primary);
     }
   }
 
@@ -211,7 +211,7 @@ onMounted(async () => {
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
-    color: #4f586b;
+    color: var(--text-color-primary);
   }
 
   .tui-message-box-footer {
@@ -234,10 +234,10 @@ onMounted(async () => {
   min-width: 80vw;
   max-width: 80vw;
   font-style: normal;
-  color: var(--black-color);
-  background-color: #fff;
   border-radius: 8px;
   transform: translate(-50%, -50%);
+  background-color: var(--bg-color-dialog);
+  color: var(--text-color-primary);
 
   .tui-message-box-header {
     box-sizing: border-box;
@@ -257,15 +257,15 @@ onMounted(async () => {
     padding: 0 24px 20px;
     font-size: 14px;
     font-weight: 400;
-    color: var(--font-color-4);
     text-align: center;
+    color: var(--text-color-secondary);
   }
 
   .tui-message-box-footer {
     display: flex;
     justify-content: space-around;
     width: 100%;
-    border-top: 1px solid #d5e0f2;
+    border-top: 1px solid var(--stroke-color-module);
 
     .button-container {
       display: flex;
@@ -274,7 +274,7 @@ onMounted(async () => {
       padding: 11px 0;
 
       &:not(:first-child) {
-        border-left: 1px solid #d5e0f2;
+        border-left: 1px solid var(--stroke-color-module);
       }
     }
 
@@ -284,10 +284,10 @@ onMounted(async () => {
     }
 
     .confirm-button {
-      color: var(--active-color-1);
       text-align: center;
-      background-color: #fff;
       border: none;
+      color: var(--text-color-link);
+      background-color: var(--bg-color-dialog);
     }
   }
 }

package/src/TUIRoom/components/common/base/Notification/index.vue

@@ -40,7 +40,14 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, onMounted } from 'vue';
+import {
+  ref,
+  watch,
+  onMounted,
+  withDefaults,
+  defineProps,
+  defineEmits,
+} from 'vue';
 import TuiButton from '../Button.vue';
 import SvgIcon from '../SvgIcon.vue';
 import CloseIcon from '../../icons/CloseIcon.vue';
@@ -116,13 +123,14 @@ onMounted(async () => {
     height: 44px;
     margin: 0 10px;
     text-align: center;
-    background-color: #fff;
     border-radius: 10px;
+    background-color: var(--bg-color-dialog);
+    box-shadow: 0 3px 8px var(--uikit-color-black-8);
 
     .tui-notification-mobile-icon {
       padding: 0 10px;
       margin-left: 4px;
-      color: #000;
+      color: var(--text-color-primary);
     }
 
     .tui-notification-mobile-content {
@@ -130,16 +138,16 @@ onMounted(async () => {
       font-size: 15px;
       font-weight: 400;
       line-height: 44px;
-      color: #181820;
+      color: var(--text-color-secondary);
     }
 
     .tui-notification-mobile-check {
       padding: 0 12px;
       margin: 6px 10px 6px 0;
       line-height: 34px;
-      color: #fff;
-      background-color: #1c66e5;
       border-radius: 10px;
+      color: var(--text-color-primary);
+      background-color: var(--text-color-link);
     }
   }
 
@@ -150,10 +158,9 @@ onMounted(async () => {
     display: flex;
     flex-direction: column;
     width: 400px;
-    background-color: var(--white-color);
-    filter: drop-shadow(0 0 1px rgba(5, 5, 5, 0.1))
-      drop-shadow(0 3px 8px rgba(233, 240, 251, 0.5));
     border-radius: 20px;
+    background-color: var(--bg-color-dialog);
+    box-shadow: 0 3px 8px var(--uikit-color-black-8);
 
     .tui-notification-header {
       position: relative;
@@ -162,7 +169,7 @@ onMounted(async () => {
       height: 64px;
       padding: 0 24px;
       font-weight: 500;
-      color: var(--title-color);
+      color: var(--text-color-primary);
 
       .tui-notification-title {
         max-width: 300px;
@@ -180,9 +187,9 @@ onMounted(async () => {
         justify-content: center;
         width: 32px;
         height: 32px;
-        color: #4f586b;
         cursor: pointer;
         transform: translateY(-50%);
+        color: var(--text-color-primary);
       }
     }
   }

package/src/TUIRoom/components/common/base/Option/index.vue

@@ -84,16 +84,16 @@ function handleChooseOption() {
 .option-container {
   padding: 6px 15px;
   overflow: hidden;
-  color: #000;
+  color: var(--text-color-primary);
   white-space: nowrap;
   cursor: pointer;
 
   &.active {
-    color: var(--active-color-2);
+    color: var(--text-color-link);
   }
 
   &:hover {
-    background-color: var(--hover-background-color);
+    background-color: var(--dropdown-color-hover);
   }
 
   .option-content {
@@ -102,12 +102,4 @@ function handleChooseOption() {
     line-height: 22px;
   }
 }
-
-.tui-theme-white .option-container {
-  --hover-background-color: rgba(213, 224, 242, 0.5);
-}
-
-.tui-theme-black .option-container {
-  --hover-background-color: rgba(213, 224, 242, 0.5);
-}
 </style>

package/src/TUIRoom/components/common/base/Select/index.vue

@@ -2,7 +2,7 @@
   <div
     ref="selectContainerRef"
     v-click-outside="handleClickOutside"
-    :class="['select-container', themeClass]"
+    class="select-container"
   >
     <div
       :class="['select-content', { disabled: disabled }]"
@@ -56,7 +56,7 @@ const { nextZIndex } = useZIndex();
 interface Props {
   modelValue: string | number | boolean | object;
   disabled?: boolean;
-  theme?: 'white' | 'black';
+  theme?: 'light' | 'dark';
   customSelectContentStyle?: StyleValue;
 }
 
@@ -71,9 +71,6 @@ const selectedLabel = ref('');
 const selectContainerRef = ref();
 const selectDropDownRef = ref();
 const dropDirection = ref('down');
-const themeClass = computed(() =>
-  props.theme ? `tui-theme-${props.theme}` : ''
-);
 
 watch(
   () => props.modelValue,
@@ -182,16 +179,17 @@ function handleClickOutside() {
     align-items: center;
     height: 42px;
     padding: 0 16px;
-    color: var(--font-color-3);
     cursor: pointer;
-    background-color: var(--background-color-7);
-    border: 1px solid var(--border-color);
     border-radius: 8px;
+    background-color: var(--bg-color-input);
+    color: var(--text-color-primary);
+    border: 1px solid var(--stroke-color-module);
 
     &.disabled {
-      color: #8f9ab2;
       cursor: not-allowed;
-      background-color: rgba(255, 255, 255, 0.5);
+      border: 1px solid var(--stroke-color-module);
+      background-color: var(--bg-color-input);
+      color: var(--text-color-disable);
     }
 
     .select-text {
@@ -222,9 +220,10 @@ function handleClickOutside() {
     max-height: 254px;
     padding: 7px 0;
     overflow: auto;
-    background-color: var(--background-color-7);
-    border: 1px solid var(--border-color);
     border-radius: 8px;
+    background-color: var(--bg-color-input);
+    color: var(--text-color-primary);
+    border: 1px solid var(--stroke-color-primary);
 
     &.down {
       top: calc(100% + 6px);

package/src/TUIRoom/components/common/base/Slider.vue

@@ -118,14 +118,14 @@ onUnmounted(() => {
   position: relative;
   width: 160px;
   height: 3px;
-  background-color: #ddd;
+  background-color: var(--uikit-color-white-2);
   cursor: pointer;
 }
 
 .slider-track {
   position: absolute;
   height: 100%;
-  background-color: var(--active-color-1);
+  background-color: var(--text-color-link);
 }
 
 .slider-thumb {
@@ -134,19 +134,18 @@ onUnmounted(() => {
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background-color: #fff;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   transform: translate(-50%, -50%);
   transition: box-shadow 0.2s;
   cursor: pointer;
+  background-color: var(--uikit-color-white-1);
 }
 
 .slider-thumb-active {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 4px 8px var(--uikit-color-black-5);
 }
 
 .slider-thumb-disabled {
-  background-color: #ccc;
+  background-color: var(--uikit-color-gray-light-5);
   cursor: not-allowed;
 }
 </style>

package/src/TUIRoom/components/common/base/Swiper.vue

@@ -158,7 +158,7 @@ function handleTouchEnd(event: TouchEvent) {
       width: 8px;
       height: 8px;
       margin: 5px;
-      background: #fff;
+      background-color: var(--uikit-color-white-1);
       border-radius: 20px;
       opacity: 0.6;
     }
@@ -167,7 +167,7 @@ function handleTouchEnd(event: TouchEvent) {
       width: 8px;
       height: 8px;
       margin: 5px;
-      background: #fff;
+      background-color: var(--uikit-color-white-1);
       border-radius: 20px;
       opacity: 1;
     }

package/src/TUIRoom/components/common/base/Timepicker/index.vue

@@ -2,7 +2,6 @@
   <div class="container">
     <TuiSelect
       v-model="selectedTime"
-      theme="white"
       class="timepicker-select"
       :teleported="false"
       :custom-select-content-style="{ 'font-weight': 400 }"
@@ -10,7 +9,6 @@
       <TuiOption
         v-for="time in timeOptions"
         :key="time"
-        theme="white"
         :value="time"
         :label="time"
         :custom-option-content-style="{ 'font-weight': 400 }"

package/src/TUIRoom/components/common/base/TuiSwitch.vue

@@ -1,9 +1,6 @@
 <template>
   <div
-    :class="[
-      props.modelValue ? 'switch-container' : 'switch-container-active',
-      themeClass,
-    ]"
+    :class="[props.modelValue ? 'switch-container' : 'switch-container-active']"
     @click="toggleSwitch"
   >
     <div class="switch-core"></div>
@@ -11,16 +8,11 @@
 </template>
 
 <script lang="ts" setup>
-import { defineProps, defineEmits, computed } from 'vue';
+import { defineProps, defineEmits } from 'vue';
 interface Props {
   modelValue: boolean;
-  theme?: 'white' | 'black';
 }
 
-const themeClass = computed(() =>
-  props.theme ? `tui-theme-${props.theme}` : ''
-);
-
 const props = defineProps<Props>();
 
 const emit = defineEmits(['update:modelValue']);
@@ -31,10 +23,6 @@ function toggleSwitch() {
 </script>
 
 <style lang="scss" scoped>
-.tui-theme-white.switch-container-active {
-  background-color: #bdbdbd;
-}
-
 .switch-container,
 .switch-container-active {
   position: relative;
@@ -42,27 +30,23 @@ function toggleSwitch() {
   width: 40px;
   height: 20px;
   cursor: pointer;
-  background-color: var(--active-color-1);
   border-radius: 20px;
   transition: background-color 0.3s;
-
+  background-color: var(--switch-color-on);
   .switch-core {
     position: absolute;
     top: 2px;
     left: 2px;
     width: 40%;
     height: 80%;
-    background-color: #fff;
     border-radius: 50%;
-    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
     transition: transform 0.3s !important;
     transform: translateX(20px);
+    background-color: var(--switch-color-button);
   }
 }
 
 .switch-container-active {
-  background-color: var(--background-color-6);
-
   .switch-core {
     transform: translateX(0);
   }

package/src/TUIRoom/components/common/icons/AIIcon.vue

@@ -26,19 +26,19 @@
     />
     <path
       d="M16 7.14014V16.7283"
-      stroke="#4791FF"
+      stroke="currentColor"
       stroke-width="2"
       stroke-linejoin="bevel"
     />
     <path
       d="M7 16.729C7 15.9108 10.2727 7.729 10.2727 7.729C10.2727 7.729 13.5455 15.9108 13.5455 16.729"
-      stroke="#4791FF"
+      stroke="currentColor"
       stroke-width="2"
       stroke-linejoin="bevel"
     />
     <path
       d="M8.5 14H12"
-      stroke="#4791FF "
+      stroke="currentColor"
       stroke-width="2"
       stroke-linejoin="bevel"
     />

package/src/TUIRoom/components/common/icons/BasicBeautyIcon.vue

@@ -16,7 +16,7 @@
       <path
         id="Vector_2"
         d="M14.4872 4.12929L15.1531 3.75286V3.75286C15.7384 3.42193 16.4607 3.85698 16.442 4.52912L16.3273 8.63684C16.3191 8.92817 16.4385 9.20856 16.6541 9.40463L17.4452 10.1239L18.0105 10.638"
-        stroke="#4791FF"
+        stroke="currentColor"
         stroke-width="1.7"
         stroke-linecap="square"
       />

package/src/TUIRoom/components/common/icons/CameraOffIcon.vue

@@ -26,7 +26,7 @@
     />
     <path
       d="M5 9H8.5"
-      style="stroke: var(--active-color-2); stroke-opacity: 1"
+      style="stroke: var(--uikit-color-theme-5); stroke-opacity: 1"
       stroke-width="1.7"
     />
   </svg>

package/src/TUIRoom/components/common/icons/CameraOnIcon.vue

@@ -16,7 +16,7 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M8.50007 9.85H5.00007V8.15H8.50007V9.85Z"
-      style="fill: var(--active-color-2); fill-opacity: 1"
+      fill="currentColor"
     />
   </svg>
 </template>

package/src/TUIRoom/components/common/icons/ChatIcon.vue

@@ -16,7 +16,7 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M12.5002 13.85H7.50022V12.15H12.5002V13.85Z"
-      style="fill: var(--active-color-2); fill-opacity: 1"
+      fill="currentColor"
     />
     <path
       fill-rule="evenodd"

package/src/TUIRoom/components/common/icons/CloseBeautyIcon.vue

@@ -14,13 +14,13 @@
           cx="16"
           cy="16"
           r="12.8667"
-          stroke="#4F586B"
+          stroke="currentColor"
           stroke-width="2"
         />
         <path
           id="Vector 186"
           d="M25.6001 6.40002L6.40015 25.6"
-          stroke="#4F586B"
+          stroke="currentColor"
           stroke-width="2"
         />
       </g>

package/src/TUIRoom/components/common/icons/FullScreenIcon.vue

@@ -16,7 +16,7 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M12.4984 8.37383H16.1484V12.0238H17.8484V7.52383V6.67383H16.9984H12.4984V8.37383ZM11.4984 15.6738H7.84844L7.84844 12.0238H6.14844V16.5238V17.3738H6.99844H11.4984V15.6738Z"
-      style="fill: var(--active-color-2); fill-opacity: 1"
+      fill="currentColor"
     />
   </svg>
 </template>

package/src/TUIRoom/components/common/icons/InviteIcon.vue

@@ -15,7 +15,7 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M18.65 10.15V7.5H20.35V10.15H23V11.85H20.35V14.5H18.65V11.85H16V10.15H18.65Z"
-      style="fill: var(--active-color-2); fill-opacity: 1"
+      fill="currentColor"
     />
   </svg>
 </template>

package/src/TUIRoom/components/common/icons/ManageMemberIcon.vue

@@ -8,7 +8,7 @@
   >
     <path
       d="M20.3014 17.1248H22.0014V21.9711H20.3014L20.3014 17.1248Z"
-      style="fill: var(--active-color-2); fill-opacity: 1"
+      fill="currentColor"
     />
     <path
       d="M15.8069 9.88067L16.0944 9.30134C16.5447 8.39395 16.7987 7.37073 16.7987 6.28332C16.7987 5.03365 16.4616 3.86271 15.8734 2.85648L17.342 1.99976C18.0773 3.25755 18.4987 4.72123 18.4987 6.28332C18.4987 7.63875 18.1815 8.92007 17.6172 10.0571C19.7235 11.3189 21.2703 12.7764 21.7991 14.9998C21.9288 15.5452 21.9095 15.9137 21.9095 15.9137L20.2095 15.9196C20.2095 15.9196 20.2063 15.5247 20.035 14.9998C19.5311 13.4551 18.3358 12.4693 16.7435 11.5154L16.1887 11.1831C15.7412 10.915 15.5749 10.348 15.8069 9.88067Z"

package/src/TUIRoom/components/common/icons/MoreIcon.vue

@@ -25,7 +25,6 @@
       width="8.3"
       height="8.3"
       rx="4.15"
-      style="stroke: var(--active-color-2); stroke-opacity: 1"
       stroke-width="1.7"
     />
     <rect
@@ -43,7 +42,7 @@
       width="3.5"
       height="3.5"
       rx="1.75"
-      style="fill: var(--active-color-2); fill-opacity: 1"
+      fill="currentColor"
     />
     <rect
       x="2.35"

package/src/TUIRoom/components/common/icons/RuddyBeautyIcon.vue

@@ -10,32 +10,37 @@
       <path
         id="Ellipse 349"
         d="M27 15C27 21.6274 21.6274 27 15 27C8.37258 27 3 21.6274 3 15C3 12.1605 3.98496 9.55384 5.63267 7.49904C6.3356 6.62243 7.159 5.84657 8.07758 5.19665C10.0333 3.81292 12.4202 3 15 3C21.6274 3 27 8.37258 27 15Z"
-        stroke="#4F586B"
+        stroke="currentColor"
         stroke-width="2"
       />
       <path
         id="Ellipse 352"
         d="M18 17C18 18.6569 16.6569 20 15 20C13.3431 20 12 18.6569 12 17"
-        stroke="#4F586B"
+        stroke="currentColor"
+        stroke-width="2"
+      />
+      <path
+        id="Vector 195"
+        d="M8 11L6 15"
+        stroke="currentColor"
         stroke-width="2"
       />
-      <path id="Vector 195" d="M8 11L6 15" stroke="#4F586B" stroke-width="2" />
       <path
         id="Vector 197"
         d="M20 11L18 15"
-        stroke="#4F586B"
+        stroke="currentColor"
         stroke-width="2"
       />
       <path
         id="Vector 196"
         d="M12 11L10 15"
-        stroke="#4F586B"
+        stroke="currentColor"
         stroke-width="2"
       />
       <path
         id="Vector 198"
         d="M24 11L22 15"
-        stroke="#4F586B"
+        stroke="currentColor"
         stroke-width="2"
       />
     </g>

package/src/TUIRoom/components/common/icons/ScreenShareIcon.vue

@@ -25,7 +25,7 @@
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M15.5718 10.3704L12.5716 7.64965L12.0006 7.13184L11.4296 7.64967L8.42969 10.3702L9.57172 11.6295L11.1507 10.1975V13.4999H12.8507V10.1977L14.4298 11.6297L15.5718 10.3704Z"
-      style="fill: var(--active-color-2); fill-opacity: 1"
+      fill="currentColor"
     />
   </svg>
 </template>