@tencentcloud/roomkit-electron-vue3 2.8.2 → 2.9.0

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

@@ -68,7 +68,7 @@ const toggleShow = () => {
   z-index: 1000;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--uikit-color-black-3);
 }
 
 .container {
@@ -79,8 +79,8 @@ const toggleShow = () => {
   width: 100%;
   min-height: 120px;
   padding: 20px 12px 36px;
-  background-color: #fff;
   border-radius: 18px 18px 0 0;
+  background-color: var(--bg-color-operate);
 
   .container-close {
     display: flex;
@@ -93,7 +93,7 @@ const toggleShow = () => {
     margin-bottom: 12px;
     font-size: 18px;
     font-weight: 500;
-    color: #4f586b;
+    color: var(--text-color-primary);
   }
 }
 </style>

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

@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, withDefaults, defineProps } from 'vue';
 
 interface Props {
   type?: 'primary' | 'danger';
@@ -53,21 +53,21 @@ const badgeClass = computed(() => [
     padding: 1px 6px;
     font-size: 12px;
     font-weight: bold;
-    color: var(--white-color);
     border-radius: 10px;
     transform: translateY(-50%) translateX(100%);
+    color: var(--uikit-color-white-1);
   }
 }
 
 .tui-badge-primary {
   .tui-badge-count {
-    background-color: var(--active-color-1);
+    background-color: var(--text-color-link);
   }
 }
 
 .tui-badge-danger {
   .tui-badge-count {
-    background-color: var(--red-color-2);
+    background-color: var(--text-color-error);
   }
 }
 

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

@@ -56,83 +56,75 @@ const buttonClassList = computed(() => [
 </script>
 
 <style lang="scss" scoped>
-.tui-theme-white .button-primary {
-  --shadow-color: rgba(213, 224, 242, 0.6);
-}
-
-.tui-theme-black .button-primary {
-  --shadow-color: rgba(28, 102, 229, 0.2);
-}
-
 .tui-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-weight: 400;
   line-height: 22px;
-  color: var(--font-color-7);
   text-align: center;
   white-space: nowrap;
   cursor: pointer;
-  background-color: var(--active-color-1);
-  border: 1px solid var(--active-color-1);
+  background-color: var(--button-color-primary-default);
+  border: 1px solid var(--button-color-primary-default);
+  color: var(--text-color-button);
   outline: none;
   transition: background-color 0.2s ease-in-out;
 
   &:hover {
-    background: #144fb6;
-    border: 1px solid #144fb6;
+    border-color: var(--text-color-link);
+    border: 1px solid var(--text-color-link);
     outline: none;
   }
 }
 
 .tui-button-plain.tui-button-primary {
-  color: #0961f7;
-  background: #ecf5ff;
-  border-color: #b3d8ff;
+  background: var(--uikit-color-white-2);
+  border-color: var(--text-color-link);
+  color: var(--text-color-link);
 }
 
 .tui-button-plain.tui-button-primary:hover {
-  color: #fff;
-  background: #409eff;
-  border-color: #409eff;
+  color: var(--uikit-color-white-1);
+  background: var(--uikit-color-theme-5);
+  border-color: var(--uikit-color-theme-5);
 }
 
 .tui-button-plain.tui-button-info {
-  color: #909399;
-  background: #f4f4f5;
-  border-color: #d3d4d6;
+  color: var(--uikit-color-gray-7);
+  background: var(--uikit-color-white-1);
+  border-color: var(--uikit-color-white-2);
 }
 
 .tui-button-plain.tui-button-info:hover {
-  color: #fff;
-  background: #909399;
-  border-color: #909399;
+  color: var(--uikit-color-white-1);
+  background: var(--uikit-color-gray-7);
+  border-color: var(--uikit-color-gray-7);
 }
 
 .tui-button-plain.tui-button-danger {
   font-weight: 500;
-  color: #f56c6c;
-  background: #fef0f0;
-  border-color: #fbc4c4;
+  color: var(--uikit-color-red-6);
+  background: var(--uikit-color-white-1);
+  border-color: var(--uikit-color-red-6);
 }
 
 .tui-button-plain.tui-button-danger:hover {
-  color: #fff;
-  background: #f56c6c;
-  border-color: #f56c6c;
+  color: var(--uikit-color-white-1);
+  background: var(--uikit-color-red-6);
+  border-color: var(--uikit-color-red-6);
 }
 
 .tui-button-primary {
   font-size: 14px;
   font-weight: 500;
   line-height: 22px;
-  color: var(--active-color-2);
   background-color: transparent;
-  border: 1px solid var(--active-color-2);
+  border: 1px solid var(--text-color-link);
+  color: var(--text-color-link);
 
   &:hover {
-    background-color: var(--shadow-color);
+    background-color: var(--uikit-color-black-8);
   }
 }
 
@@ -160,20 +152,4 @@ const buttonClassList = computed(() => [
   display: flex;
   margin-right: 5px;
 }
-
-.tui-button-text {
-  color: var(--font-color-4);
-  background-color: transparent;
-  border: 0 solid transparent;
-
-  &:hover {
-    color: var(--font-color-4);
-    background-color: transparent;
-    border: 0 solid transparent;
-  }
-
-  &::after {
-    border: none;
-  }
-}
 </style>

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

@@ -60,19 +60,19 @@ function handleValueChange(event: any) {
 }
 
 input {
-  color: var(--title-color);
   cursor: pointer;
-  border: 1px solid var(--stroke-color);
   border-radius: 4px;
+  color: var(--bg-color-secondary);
+  border: 1px solid var(--stroke-color-module);
 }
 
 input:focus {
-  border-color: var(--active-color-1);
   outline: 0;
+  border-color: var(--text-color-link);
 }
 
 input:disabled {
   cursor: not-allowed;
-  background-color: var(--background-color-9);
+  background-color: var(--bg-color-function);
 }
 </style>

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

@@ -229,10 +229,10 @@ const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
   min-width: 222px;
   padding: 5px;
   font-size: 12px;
-  color: #000;
-  background-color: #fff;
-  border: 1px solid var(--stroke-color);
   border-radius: 4px;
+  background-color: var(--bg-color-dialog);
+  color: var(--text-color-primary);
+  border: 1px solid var(--stroke-color-module);
 }
 
 .picker-header {
@@ -246,7 +246,7 @@ const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
   .current-time {
     width: 80%;
     font-weight: bold;
-    color: black;
+    color: var(--text-color-primary);
   }
 }
 
@@ -256,10 +256,11 @@ const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
   cursor: pointer;
   background-color: transparent;
   border: none;
+  color: var(--text-color-primary);
 }
 
 .arrow:hover {
-  color: #409eff;
+  color: var(--text-color-link);
 }
 
 .picker-weekdays {
@@ -271,7 +272,6 @@ const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
   padding: 5px;
   line-height: initial;
   text-align: center;
-  background-color: #fff;
 }
 
 .picker-body {
@@ -285,16 +285,15 @@ const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
   line-height: initial;
   text-align: center;
   cursor: pointer;
-  background-color: #fff;
 }
 
 .day:hover {
-  background-color: #ecf5ff;
+  background-color: var(--uikit-color-white-2);
 }
 
 .day.selected {
-  color: white;
-  background-color: #409eff;
+  color: var(--uikit-color-white-1);
+  background-color: var(--text-color-link);
 }
 
 .day.today .today-dot {
@@ -304,13 +303,13 @@ const weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
   display: inline-block;
   width: 5px;
   height: 5px;
-  background-color: #409eff;
   border-radius: 50%;
   transform: translateX(-50%);
+  background-color: var(--text-color-link);
 }
 
 .day.past {
-  color: #ccc;
+  color: var(--uikit-color-gray-7);
   pointer-events: none;
 }
 </style>

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

@@ -170,7 +170,7 @@ function handleOverlayClick(event: any) {
   left: 0;
 
   &.overlay {
-    background-color: rgba(15, 16, 20, 0.6);
+    background-color: var(--uikit-color-black-3);
   }
 }
 
@@ -183,10 +183,9 @@ function handleOverlayClick(event: any) {
   display: flex;
   flex-direction: column;
   width: var(--tui-dialog-width, 50%);
-  background-color: #fff;
   border-radius: 20px;
-  box-shadow: 0 3px 1px #e9f0fb;
   transform: translate(-50%, -50%);
+  background-color: var(--bg-color-dialog);
 
   .tui-dialog-header {
     position: relative;
@@ -194,7 +193,7 @@ function handleOverlayClick(event: any) {
     align-items: center;
     height: 64px;
     padding: 0 24px;
-    box-shadow: 0 7px 10px -5px rgba(230, 236, 245, 0.8);
+    border-bottom: 1px solid var(--stroke-color-primary);
 
     .tui-dialog-header-title {
       display: flex;
@@ -205,7 +204,7 @@ function handleOverlayClick(event: any) {
         font-style: normal;
         font-weight: 600;
         line-height: 24px;
-        color: #0f1014;
+        color: var(--text-color-primary);
       }
     }
 
@@ -218,9 +217,9 @@ function handleOverlayClick(event: any) {
       justify-content: center;
       width: 32px;
       height: 32px;
-      color: #4f586b;
       cursor: pointer;
       transform: translateY(-50%);
+      color: var(--text-color-primary);
     }
   }
 
@@ -231,7 +230,7 @@ function handleOverlayClick(event: any) {
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
-    color: #4f586b;
+    color: var(--text-color-primary);
   }
 
   .tui-dialog-footer {

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

@@ -41,7 +41,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue';
+import {
+  ref,
+  watch,
+  computed,
+  withDefaults,
+  defineProps,
+  defineEmits,
+} from 'vue';
 import SvgIcon from './SvgIcon.vue';
 import CloseIcon from '../icons/CloseIcon.vue';
 import { addSuffix } from '../../../utils/utils';
@@ -140,30 +147,21 @@ function handleOverlayClick() {
   z-index: 2007;
 
   &.overlay {
-    background-color: rgba(15, 16, 20, 0.6);
+    background-color: var(--uikit-color-black-3);
   }
 }
 
-.tui-theme-white .drawer-container {
-  --background-color: var(--background-color-1);
-  --box-shadow: 0px 2px 4px rgba(32, 77, 141, 0.03),
-    0px 6px 10px rgba(32, 77, 141, 0.06), 0px 3px 14px rgba(32, 77, 141, 0.05);
-}
-
-.tui-theme-black .drawer-container {
-  --background-color: var(--background-color-2);
-  --box-shadow: 0px -8px 30px rgba(15, 16, 20, 0.5);
-}
-
 .drawer-container {
   position: absolute;
   right: 0;
   display: flex;
   flex-direction: column;
   height: 100%;
-  background-color: var(--background-color);
   border-radius: 8px 0 0 8px;
-  box-shadow: var(--box-shadow);
+  background-color: var(--bg-color-operate);
+  box-shadow:
+    0px 12px 26px var(--uikit-color-black-8),
+    0px 8px 12px var(--uikit-color-black-8);
 
   .drawer-header {
     position: relative;
@@ -171,14 +169,14 @@ function handleOverlayClick() {
     align-items: center;
     height: 64px;
     padding: 0 20px;
-    box-shadow: 0 1px 0 var(--stroke-color);
+    box-shadow: 0px 1px 0 var(--stroke-color-primary);
 
     .drawer-header-title {
       font-size: 16px;
       font-style: normal;
       font-weight: 600;
       line-height: 24px;
-      color: var(--font-color-1);
+      color: var(--text-color-primary);
     }
 
     .close {
@@ -190,9 +188,9 @@ function handleOverlayClick() {
       justify-content: center;
       width: 32px;
       height: 32px;
-      color: var(--font-color-1);
       cursor: pointer;
       transform: translateY(-50%);
+      color: var(--text-color-primary);
     }
   }
 

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

@@ -8,51 +8,49 @@
   * Use <icon-button :icon="chatIcon"><icon-button> in template
 -->
 <template>
-  <div :class="[themeClass]">
-    <div class="icon-button-container">
-      <div
-        v-if="isMobile"
-        v-tap="handleClickEvent"
-        :class="['icon-content', iconContentClass, `${disabled && 'disabled'}`]"
-      >
-        <slot></slot>
-        <svg-icon v-if="icon" :icon="icon" />
-        <span class="title">{{ title }}</span>
-      </div>
-      <div
-        v-else
-        :class="['icon-content', iconContentClass, `${disabled && 'disabled'}`]"
-        @click="handleClickEvent"
-      >
-        <slot></slot>
-        <svg-icon v-if="icon" :icon="icon" />
-        <svg-icon
-          v-if="isNotSupport"
-          class="unsupport-icon"
-          :icon="UnSupportIcon"
-        />
-        <span class="title">
-          {{ title }}
-          <slot name="title"></slot>
-        </span>
-      </div>
-      <div
-        v-if="hasMore"
-        ref="moreSpanRef"
-        class="icon-arrow"
-        @click="$emit('click-more')"
-      >
-        <svg-icon :icon="ArrowUp" />
-      </div>
+  <div class="icon-button-container">
+    <div
+      v-if="isMobile"
+      v-tap="handleClickEvent"
+      :class="['icon-content', iconContentClass, `${disabled && 'disabled'}`]"
+    >
+      <slot></slot>
+      <svg-icon v-if="icon" :icon="icon" />
+      <span class="title">{{ title }}</span>
+    </div>
+    <div
+      v-else
+      :class="['icon-content', iconContentClass, `${disabled && 'disabled'}`]"
+      @click="handleClickEvent"
+    >
+      <slot></slot>
+      <svg-icon v-if="icon" :icon="icon" />
+      <svg-icon
+        v-if="isNotSupport"
+        class="unsupport-icon"
+        :icon="UnSupportIcon"
+      />
+      <span class="title">
+        {{ title }}
+        <slot name="title"></slot>
+      </span>
+    </div>
+    <div
+      v-if="hasMore"
+      ref="moreSpanRef"
+      class="icon-arrow"
+      @click="$emit('click-more')"
+    >
+      <svg-icon :icon="ArrowUp" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { withDefaults, computed, defineProps, defineEmits } from 'vue';
 import SvgIcon from './SvgIcon.vue';
 import ArrowUp from '../icons/ArrowUpIcon.vue';
 import { IconButtonLayout } from '../../../constants/room';
-import { computed } from 'vue';
 import { isMobile } from '../../../utils/environment';
 import UnSupportIcon from '../icons/UnSupportIcon.vue';
 import vTap from '../../../directives/vTap';
@@ -67,7 +65,6 @@ interface Props {
   layout?: IconButtonLayout;
   icon?: Component | null;
   isNotSupport?: boolean;
-  theme?: 'white' | 'black';
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -79,14 +76,9 @@ const props = withDefaults(defineProps<Props>(), {
   isActive: false,
   layout: IconButtonLayout.VERTICAl,
   isNotSupport: false,
-  theme: undefined,
 });
 const emit = defineEmits(['click-icon', 'click-more']);
 
-const themeClass = computed(() =>
-  props.theme ? `tui-theme-${props.theme}` : ''
-);
-
 const iconContentClass = computed(() => {
   if (props.layout === IconButtonLayout.HORIZONTAL) {
     return 'icon-content-horizontal';
@@ -100,29 +92,20 @@ const handleClickEvent = () => {
 </script>
 
 <style lang="scss" scoped>
-.tui-theme-black .icon-button-container {
-  --icon-button-hover: rgba(46, 50, 61, 0.7);
-}
-
-.tui-theme-white .icon-button-container {
-  --icon-button-hover: rgba(79, 88, 107, 0.05);
-}
-
 .icon-button-container {
   position: relative;
   display: flex;
   align-items: center;
-  color: var(--font-color-1);
   cursor: pointer;
+  color: var(--text-color-primary);
 
   .icon-content {
     &.disabled {
       cursor: not-allowed;
       opacity: 0.4;
     }
-
     &:hover {
-      background: var(--icon-button-hover);
+      background: var(--button-color-secondary-hover);
     }
   }
 
@@ -171,7 +154,7 @@ const handleClickEvent = () => {
     border-radius: 6px;
 
     &:hover {
-      background: var(--icon-button-hover);
+      background: var(--bg-color-input);
     }
   }
 }

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

@@ -1,8 +1,5 @@
 <template>
-  <div
-    ref="tuiInputRef"
-    :class="['tui-input', themeClass, !border && 'no-border']"
-  >
+  <div ref="tuiInputRef" :class="['tui-input', !border && 'no-border']">
     <input
       ref="inputRef"
       :value="modelValue"
@@ -28,7 +25,7 @@
     >
       <slot name="suffixIcon"></slot>
     </div>
-    <div v-if="showResults" class="results tui-theme-white">
+    <div v-if="showResults" class="results">
       <div
         v-for="(item, index) in searchResult"
         :key="index"
@@ -58,7 +55,6 @@ import {
 const slots = useSlots();
 
 interface Props {
-  theme?: 'white' | 'black';
   modelValue: string;
   placeholder?: string;
   disabled?: boolean;
@@ -81,7 +77,6 @@ interface Props {
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const props = withDefaults(defineProps<Props>(), {
-  theme: 'white',
   modelValue: '',
   placeholder: '',
   disabled: false,
@@ -92,10 +87,6 @@ const props = withDefaults(defineProps<Props>(), {
   align: 'left',
 });
 
-const themeClass = computed(() =>
-  props.theme ? `tui-theme-${props.theme}` : ''
-);
-
 const emit = defineEmits([
   'update:modelValue',
   'input',
@@ -202,19 +193,19 @@ input {
   height: 100%;
   padding: 10px 0 10px 16px;
   font-size: 14px;
-  color: var(--font-color-3);
-  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);
 }
 
 input:focus {
-  border-color: var(--active-color-1);
   outline: 0;
+  border-color: var(--text-color-link);
 }
 
 input:disabled {
-  background-color: var(--background-color-9);
+  background-color: var(--button-color-primary-disable);
 }
 
 .tui-input.no-border input {
@@ -239,9 +230,9 @@ input:disabled {
   max-height: 254px;
   padding: 7px 0;
   overflow: auto;
-  background-color: var(--background-color-7);
-  border: 1px solid var(--border-color);
   border-radius: 4px;
+  background-color: var(--bg-color-input);
+  border: 1px solid var(--stroke-color-module);
 
   &-item {
     display: flex;
@@ -252,8 +243,8 @@ input:disabled {
   }
 
   &-item:hover {
-    color: var(--active-color-2);
-    background-color: var(--hover-background-color-1);
+    background-color: var(--text-color-button-disable);
+    color: var(--text-color-link);
   }
 }
 </style>

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

@@ -26,12 +26,12 @@
   display: inline-block;
   max-height: 50px;
   padding: 10px;
-  color: #999;
   white-space: nowrap;
-  background: #f5f5f5;
   border-radius: 8px;
   transform: translateX(-50%);
-  
+  background-color: var(--uikit-color-white-2);
+  color: var(--uikit-color-gray-light-5);
+
   .t-message-text {
     font-size: .875rem;
     vertical-align: middle;