@trtc/calls-uikit-vue 4.1.0

package/src/Components/components/base/TKImage/TKImage.ts

@@ -0,0 +1,34 @@
+export const Fit = ['fill', 'contain', 'cover'] as const;
+export const MiniProgramImageFitMap = {
+  fill: 'scaleToFill',
+  contain: 'aspectFit',
+  cover: 'aspectFill',
+} as const;
+export const ImageProps = {
+  width: {
+    type: String,
+    default: '320px',
+  },
+  height: {
+    type: String,
+    default: '240px',
+  },
+  src: {
+    type: String,
+  },
+  fit: {
+    type: String,
+    values: Fit,
+    default: 'fill',
+  },
+  customStyle: {
+    type: Object,
+  },
+  defaultSrc: {
+    type: String,
+  },
+} as const;
+
+export const imageEmits = {
+  error: (evt) => evt,
+};

package/src/Components/components/base/TKImage/TKImage.vue

@@ -0,0 +1,77 @@
+<template>
+  <div :class="classname" :style="[imgStyle]">
+    <template v-if="hasLoadError && !defaultSrc">
+      <slot name="error" />
+    </template>
+    <template v-else>
+      <img
+        v-if="!IN_WX_MINI_APP"
+        :class="imageClassName"
+        :src="imgSrc"
+        :style="{ objectFit }"
+        @error="handleError"
+      />
+      <image
+        v-if="IN_WX_MINI_APP"
+        :class="imageClassName"
+        :src="imgSrc"
+        :mode="objectFit"
+        @error="handleError"
+      />
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed, watch } from '../../../../adapter-vue';
+import { IN_WX_MINI_APP, classNames } from '../util';
+import { ImageProps, MiniProgramImageFitMap, imageEmits } from './TKImage';
+import { PREFIX } from '../constants/index';
+
+const props = defineProps(ImageProps);
+const emit = defineEmits(imageEmits);
+const hasLoadError = ref(false);
+const imgSrc = ref(props.src);
+
+watch(() => props.src, () => {
+  hasLoadError.value = false;
+  imgSrc.value = props.src;
+});
+
+const classname = computed(() => classNames([`${PREFIX}-image`]));
+const imgStyle = computed(() => {
+  return {
+    "width": props.width,
+    "height": props.height,
+    ...props.customStyle,
+  }
+})
+const imageClassName = computed(() => classNames([
+  `${PREFIX}-image_inner`,
+]));
+const objectFit = computed(() => {
+  if (IN_WX_MINI_APP) {
+    return MiniProgramImageFitMap[props.fit] || MiniProgramImageFitMap.cover;
+  } else {
+    return props.fit;
+  }
+});
+
+function handleError(e) {
+  hasLoadError.value = true;
+  imgSrc.value = props.defaultSrc;
+  emit('error', e);
+}
+</script>
+
+<style lang="scss">
+@import './style/TKImage.scss';
+</style>

package/src/Components/components/base/TKImage/style/TKImage.scss

@@ -0,0 +1,20 @@
+@import '../../styles/var.scss';
+@import '../../styles/common.scss';
+
+// image标签
+.#{$PREFIX}-image {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  vertical-align: middle;
+
+  width: 300px;
+  height: 225px;
+
+  .#{$PREFIX}-image_inner {
+    width: 100%;
+    height: 100%;
+  }
+}

package/src/Components/components/base/TKText/TKText.ts

@@ -0,0 +1,24 @@
+export const TextProps = {
+  width: {
+    type: String,
+  },
+  color: {
+    type: String,
+  },
+  size: {
+    type: String,
+  },
+  weight: {
+    type: Number,
+  },
+  truncated: {
+    type: Boolean,
+    default: false,
+  },
+  lineClamp: {
+    type: Number,
+  },
+  textStyle: {
+    type: Object,
+  },
+};

package/src/Components/components/base/TKText/TKText.vue

@@ -0,0 +1,43 @@
+<template>
+  <span :class="textClassName" :style="[style]" @click="handleClick">
+    <slot></slot>
+  </span>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from '../../../../adapter-vue';
+import { TextProps } from './TKText';
+import { PREFIX } from '../constants/index';
+import { classNames, filterObject } from '../util';
+
+const props = defineProps(TextProps);
+const emit = defineEmits(['click']);
+const textClassName = classNames([
+  `${PREFIX}-text`,
+  {[`${PREFIX}-text--line-clamp`]: props.lineClamp},
+]);
+const style = computed(() => (filterObject({
+  maxWidth: props.width,
+  fontSize: props.size,
+  fontWeight: props.weight,
+  color: props.color,
+  textOverflow: props.truncated ? 'ellipsis' : 'auto',
+  '-webkit-line-clamp': props.lineClamp,
+  ...props.textStyle,
+})));
+const handleClick = () => {
+  emit('click');
+};
+</script>
+
+<style lang="scss">
+@import './style/TKText.scss';
+</style>

package/src/Components/components/base/TKText/style/TKText.scss

@@ -0,0 +1,19 @@
+@import '../../styles/var.scss';
+@import '../../styles/common.scss';
+
+.#{$PREFIX}-text {
+  display: inline-block;
+  overflow: hidden;
+  text-align: center;
+  line-height: normal;
+  white-space: nowrap;
+  font-weight: $--tk-font-weight-base;
+  font-size: $--tk-font-size-base;
+  color: $--tk-text-color-primary;
+
+  &.#{$PREFIX}-text--line-clamp {
+    display: -webkit-inline-box;
+    -webkit-box-orient: vertical;
+    white-space: normal;
+  }
+}

package/src/Components/components/base/ToggleWindow/ToggleWindow.ts

@@ -0,0 +1,19 @@
+export const ToggleWindowProps = {
+  bigWindow: {
+    type: String,
+  },
+  showSmallWindow: {
+    type: Boolean,
+    default: true,
+  },
+  smallWindowWidth: {
+    type: String,
+    default: '30%',
+  },
+  smallWindowHeight: {
+    type: String,
+    default: '30%',
+  },
+} as const;
+
+export const ToggleWindowEmits = ['toggle'];

package/src/Components/components/base/ToggleWindow/ToggleWindow.vue

@@ -0,0 +1,46 @@
+<template>
+  <div :class="toggleWindowContainerClassName">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { watch, provide, toRef, ref } from '../../../../adapter-vue';
+import { ToggleWindowProps, ToggleWindowEmits } from './ToggleWindow';
+import { ToggleWindowContextKey } from './constant';
+import { PREFIX } from '../constants/index';
+
+const props = defineProps(ToggleWindowProps);
+const emit = defineEmits(ToggleWindowEmits);
+
+const currentBigWindow = ref(props.bigWindow);
+const toggleWindowContainerClassName = `${PREFIX}-toggle-window`;
+const toggleWindow = (value) => {
+  currentBigWindow.value = value;
+  emit('toggle', value);
+};
+
+watch(() => props.bigWindow, () => {  
+  currentBigWindow.value = props.bigWindow;
+});
+
+provide(ToggleWindowContextKey, {
+  bigWindow: currentBigWindow,
+  toggleWindow,
+  smallWindowWidth: toRef(props, 'smallWindowWidth'),
+  smallWindowHeight: toRef(props, 'smallWindowHeight'),
+  showSmallWindow: toRef(props, 'showSmallWindow'),
+});
+</script>
+
+<style lang="scss">
+@import './style/ToggleWindow.scss';
+</style>

package/src/Components/components/base/ToggleWindow/ToggleWindowItem/ToggleWindowItem.ts

@@ -0,0 +1,5 @@
+export const ToggleWindowItemProps = {
+  value: {
+    type: String,
+  },
+} as const;

package/src/Components/components/base/ToggleWindow/ToggleWindowItem/ToggleWindowItem.vue

@@ -0,0 +1,62 @@
+<template>
+  <div
+    :class="classname"
+    :style="[windowItemStyle]"
+    @click="() => toggleWindow(value)"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { computed, inject } from '../../../../../adapter-vue';
+import { ToggleWindowItemProps } from './ToggleWindowItem';
+import { ToggleWindowContextKey } from '../constant';
+import { classNames, IS_PC } from '../../util';
+import { PREFIX } from '../../constants/index';
+
+const props = defineProps(ToggleWindowItemProps);
+
+const {
+  bigWindow,
+  toggleWindow,
+  smallWindowWidth, 
+  smallWindowHeight,
+  showSmallWindow,
+} = inject(ToggleWindowContextKey);
+const classname = computed(() => classNames([
+  `${PREFIX}-toggle-window-item`,
+  `${PREFIX}-toggle-window-item--${bigWindow.value === props.value ? 'big' : 'small'}`,
+  {
+    pc: IS_PC,
+    mobile: !IS_PC,
+  },
+]));
+
+const windowItemStyle = computed(() => {
+  let style: any = {};
+  if (bigWindow.value !== props.value) {
+    style = { width: smallWindowWidth.value, height: smallWindowHeight.value };
+    
+    if (!showSmallWindow.value) {
+      style.visibility = 'hidden';
+    } else {
+      style.visibility = '';
+    }
+  }
+
+  return style;
+});
+</script>
+
+<style lang="scss">
+@import './style/ToggleWindowItem.scss';
+</style>

package/src/Components/components/base/ToggleWindow/ToggleWindowItem/style/ToggleWindowItem.scss

@@ -0,0 +1,38 @@
+@import '../../../styles/var.scss';
+@import '../../../styles/common.scss';
+
+.#{$PREFIX}-toggle-window-item {
+  height: 100%;
+  position: absolute;
+
+  &.#{$PREFIX}-toggle-window-item--big {
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+  }
+
+  &.mobile {
+    &.#{$PREFIX}-toggle-window-item--small {
+      z-index: 1;
+      width: 24.3% !important;
+      height: 19.7% !important;
+      border-radius: 5px;
+      left: 98%;
+      top: 8%;
+      transform: translateX(-100%);
+      overflow: hidden;
+    }
+  }
+
+  &.pc {
+    &.#{$PREFIX}-toggle-window-item--small {
+      top: 2%;
+      left: 2%;
+      width: 22%;
+      height: 21%;
+      border-radius: 12px;
+      overflow: hidden;
+      z-index: 1;
+    }
+  }
+}

package/src/Components/components/base/ToggleWindow/constant.ts

@@ -0,0 +1 @@
+export const ToggleWindowContextKey = 'ToggleWindowContextKey';

package/src/Components/components/base/ToggleWindow/style/ToggleWindow.scss

@@ -0,0 +1,7 @@
+@import '../../styles/var.scss';
+@import '../../styles/common.scss';
+
+.#{$PREFIX}-toggle-window {
+  height: 100%;
+  position: relative;
+}

package/src/Components/components/base/assets/message/close.svg

@@ -0,0 +1,5 @@
+    
+<svg t="1700123766247" class="icon" viewBox="0 0 1024 1024" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" p-id="6301" width="16" height="16">
+    <path d="M557.2 512l233.4-233.4c12.5-12.5 12.5-32.8 0-45.2s-32.8-12.5-45.2 0L512 466.8 278.6 233.4c-12.5-12.5-32.8-12.5-45.2 0s-12.5 32.8 0 45.2L466.8 512 233.4 745.4c-12.5 12.5-12.5 32.8 0 45.2 6.2 6.2 14.4 9.4 22.6 9.4s16.4-3.1 22.6-9.4L512 557.2l233.4 233.4c6.2 6.2 14.4 9.4 22.6 9.4s16.4-3.1 22.6-9.4c12.5-12.5 12.5-32.8 0-45.2L557.2 512z" p-id="6301" fill="#73767a"></path>
+</svg>

package/src/Components/components/base/assets/message/error.svg

@@ -0,0 +1 @@
+<svg t="1700123349738" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6300" width="16" height="16"><path d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m129.29219 233.447619l-129.267809 129.29219-129.316571-129.29219-51.736381 51.736381 129.316571 129.267809-129.316571 129.316571 51.736381 51.736381L512 563.687619l129.29219 129.316571 51.736381-51.73638L563.687619 512l129.316571-129.29219-51.73638-51.736381z" p-id="6301" fill="#d54941"></path></svg>

package/src/Components/components/base/assets/message/info.svg

@@ -0,0 +1 @@
+<svg t="1700123274686" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5050" width="16" height="16"><path d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m36.571429 341.333333h-73.142858v292.571428h73.142858V438.857143z m0-121.904762h-73.142858v73.142857h73.142858v-73.142857z" p-id="5051" fill="#0052d9"></path></svg>

package/src/Components/components/base/assets/message/success.svg

@@ -0,0 +1 @@
+<svg t="1700121539788" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4018" width="16" height="16"><path d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m193.194667 218.331428L447.21981 581.315048l-103.936-107.812572-52.662858 50.761143 156.379429 162.230857 310.662095-319.683047-52.467809-50.956191z" p-id="4019" fill="#2ba471"></path></svg>

package/src/Components/components/base/assets/message/warning.svg

@@ -0,0 +1 @@
+<svg t="1700123274686" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5050" width="16" height="16"><path d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m36.571429 341.333333h-73.142858v292.571428h73.142858V438.857143z m0-121.904762h-73.142858v73.142857h73.142858v-73.142857z" p-id="5051" fill="#e37318"></path></svg>

package/src/Components/components/base/constants/index.ts

@@ -0,0 +1,8 @@
+export const PREFIX = 'tk';
+
+export const NAME = {
+  SUCCESS: 'success',
+  INFO: 'info',
+  WARNING: 'warning',
+  ERROR: 'error',
+};

package/src/Components/components/base/hooks/useListenerEvent.ts

@@ -0,0 +1,36 @@
+
+/**
+* @function 给目标元素添加事件监听
+* @description 给目标元素添加事件监听
+* @param {HTMLElement} 需要监听的元素,，为空默认window.document
+* @param {String} 事件名
+* @param {Function} 回调函数
+* @param {Object} 监听事件的选项，同addEventListener的options参数
+* @return {void} 返回停止监听的函数
+* @example
+*   useListenEvent(btnEl, 'click', () => { console.log('click btn');});
+*/
+export function useListenEvent(event: string, handler: Function, options: object): () => any;
+export function useListenEvent(target: HTMLElement, event: string, handler: Function, options: object): () => any;
+export function useListenEvent(...args: any[]) {
+  let target = window?.document;
+  let event = '';
+  let handler = () => {};
+  let options = {};
+
+  if (typeof args[0] === 'string') {
+    [event, handler, options] = args;
+  } else {
+    [target, event, handler, options] = args;
+  }
+
+  if (!target) {
+    return;
+  }
+
+  target?.addEventListener(event, handler, options);
+
+  return () => {
+    target?.removeEventListener(event, handler, options);
+  };
+}

package/src/Components/components/base/hooks/useOnClickOutSide.ts

@@ -0,0 +1,27 @@
+import { onMounted, onUnmounted, unref } from '../../../../adapter-vue';
+import { useListenEvent } from './useListenerEvent';
+
+export function useOnClickOutSide(targetEls: any[], handler: () => any) {
+  let stop = () => {};
+
+  onMounted(() => {
+    const listener = (event: Event) => {
+      const targets = targetEls.map(targetEl => unref(targetEl));
+      const paths = event.composedPath();
+      const rs = [];
+
+      for (let i = 0; i < targets.length; i++) {
+        rs[i] = paths.includes(targets[i]);
+      }
+
+      if (rs.every(item => !item)) {
+        handler();
+      }
+    };
+    stop = useListenEvent('click', listener, { passive: true });
+  });
+
+  onUnmounted(() => {
+    stop?.();
+  });
+}

package/src/Components/components/base/styles/common.scss

@@ -0,0 +1,43 @@
+@import './var.scss';
+
+$justify-content:(
+  start: flex-start, 
+  center: center,
+  end: flex-end, 
+  'space-between': space-between,
+  'space-around': space-around,
+  'space-evenly': space-evenly,
+);
+
+$align-items:(
+  center: center,
+  start: flex-start,
+  end: flex-end,
+  stretch: stretch,
+  baseline: baseline,
+);
+
+@each $name, $value in $justify-content {
+  .#{$PREFIX}-justify-#{$name} {
+    justify-content: $value;
+  }
+}
+
+@each $name, $value in $align-items {
+  .#{$PREFIX}-align-#{$name} {
+    align-items: $value;
+  }
+}
+
+.#{$PREFIX}-blur {
+  backdrop-filter: blur($--tk-backdrop-filter-default);
+  -webkit-backdrop-filter: blur($--tk-backdrop-filter-default);
+}
+
+.#{$PREFIX}-round {
+  border-radius: $--tk-border-radius-round;
+}
+
+.#{$PREFIX}-circle {
+  border-radius: $--tk-border-radius-circle;
+}

package/src/Components/components/base/styles/var.scss

@@ -0,0 +1,132 @@
+$PREFIX: 'tk';
+
+$--tk-color-white: #ffffff;
+$--tk-color-black: #000000;
+$--tk-color-primary-rgb: 64, 158, 255;
+$--tk-color-success-rgb: 103, 194, 58;
+$--tk-color-warning-rgb: 230, 162, 60;
+$--tk-color-danger-rgb: 245, 108, 108;
+$--tk-color-error-rgb: 245, 108, 108;
+$--tk-color-info-rgb: 144, 147, 153;
+$--tk-font-weight-base: 400;
+$--tk-font-size-extra-large: 20px;
+$--tk-font-size-large: 18px;
+$--tk-font-size-medium: 16px;
+$--tk-font-size-base: 14px;
+$--tk-font-size-small: 13px;
+$--tk-button-size-small: 24px;
+$--tk-button-size-middle: 32px;
+$--tk-button-size-large: 40px;
+$--tk-font-size-extra-small: 12px;
+$--tk-font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5fae\8f6f\96c5\9ed1", Arial, sans-serif;
+$--tk-font-weight-primary: 500;
+$--tk-font-line-height-primary: 24px;
+$--tk-index-normal: 1;
+$--tk-index-top: 1000;
+$--tk-index-popper: 2000;
+$--tk-border-radius-base: 4px;
+$--tk-border-radius-small: 2px;
+$--tk-border-radius-round: 20px;
+$--tk-border-radius-circle: 100%;
+$--tk-transition-duration: .3s;
+$--tk-transition-duration-fast: .2s;
+$--tk-transition-function-ease-in-out-bezier: cubic-bezier(.645, .045, .355, 1);
+$--tk-transition-function-fast-bezier: cubic-bezier(.23, 1, .32, 1);
+$--tk-transition-all: all var(--tk-transition-duration) var(--tk-transition-function-ease-in-out-bezier);
+$--tk-transition-fade: opacity var(--tk-transition-duration) var(--tk-transition-function-fast-bezier);
+$--tk-transition-md-fade: transform var(--tk-transition-duration) var(--tk-transition-function-fast-bezier), opacity var(--tk-transition-duration) var(--tk-transition-function-fast-bezier);
+$--tk-transition-fade-linear: opacity var(--tk-transition-duration-fast) linear;
+$--tk-transition-border: border-color var(--tk-transition-duration-fast) var(--tk-transition-function-ease-in-out-bezier);
+$--tk-transition-box-shadow: box-shadow var(--tk-transition-duration-fast) var(--tk-transition-function-ease-in-out-bezier);
+$--tk-transition-color: color var(--tk-transition-duration-fast) var(--tk-transition-function-ease-in-out-bezier);
+$--tk-component-size-large: 40px;
+$--tk-component-size: 32px;
+$--tk-component-size-small: 24px;
+$--tk-backdrop-filter-default: 12px;
+$--tk-color-white: #ffffff;
+$--tk-color-black: #000000;
+$--tk-color-primary: #409eff;
+$--tk-color-primary-light-3: #79bbff;
+$--tk-color-primary-light-5: #a0cfff;
+$--tk-color-primary-light-7: #c6e2ff;
+$--tk-color-primary-light-8: #d9ecff;
+$--tk-color-primary-light-9: #ecf5ff;
+$--tk-color-primary-dark-2: #337ecc;
+$--tk-color-success: #67c23a;
+$--tk-color-success-light-3: #95d475;
+$--tk-color-success-light-5: #b3e19d;
+$--tk-color-success-light-7: #d1edc4;
+$--tk-color-success-light-8: #e1f3d8;
+$--tk-color-success-light-9: #f0f9eb;
+$--tk-color-success-dark-2: #529b2e;
+$--tk-color-warning: #e6a23c;
+$--tk-color-warning-light-3: #eebe77;
+$--tk-color-warning-light-5: #f3d19e;
+$--tk-color-warning-light-7: #f8e3c5;
+$--tk-color-warning-light-8: #faecd8;
+$--tk-color-warning-light-9: #fdf6ec;
+$--tk-color-warning-dark-2: #b88230;
+$--tk-color-danger: #f56c6c;
+$--tk-color-danger-light-3: #f89898;
+$--tk-color-danger-light-5: #fab6b6;
+$--tk-color-danger-light-7: #fcd3d3;
+$--tk-color-danger-light-8: #fde2e2;
+$--tk-color-danger-light-9: #fef0f0;
+$--tk-color-danger-dark-2: #c45656;
+$--tk-color-error: #f56c6c;
+$--tk-color-error-light-3: #f89898;
+$--tk-color-error-light-5: #fab6b6;
+$--tk-color-error-light-7: #fcd3d3;
+$--tk-color-error-light-8: #fde2e2;
+$--tk-color-error-light-9: #fef0f0;
+$--tk-color-error-dark-2: #c45656;
+$--tk-color-info: #909399;
+$--tk-color-info-light-3: #b1b3b8;
+$--tk-color-info-light-5: #c8c9cc;
+$--tk-color-info-light-7: #dedfe0;
+$--tk-color-info-light-8: #e9e9eb;
+$--tk-color-info-light-9: #f4f4f5;
+$--tk-color-info-dark-2: #73767a;
+$--tk-bg-color: #ffffff;
+$--tk-bg-color-page: #f2f3f5;
+$--tk-bg-color-overlay: #ffffff;
+$--tk-text-color-primary: #303133;
+$--tk-text-color-regular: #606266;
+$--tk-text-color-secondary: #909399;
+$--tk-text-color-placeholder: #a8abb2;
+$--tk-text-color-disabled: #c0c4cc;
+$--tk-border-color: #dcdfe6;
+$--tk-border-color-light: #e4e7ed;
+$--tk-border-color-lighter: #ebeef5;
+$--tk-border-color-extra-light: #f2f6fc;
+$--tk-border-color-dark: #d4d7de;
+$--tk-border-color-darker: #cdd0d6;
+$--tk-fill-color: #f0f2f5;
+$--tk-fill-color-light: #f5f7fa;
+$--tk-fill-color-lighter: #fafafa;
+$--tk-fill-color-extra-light: #fafcff;
+$--tk-fill-color-dark: #ebedf0;
+$--tk-fill-color-darker: #e6e8eb;
+$--tk-fill-color-blank: #ffffff;
+$--tk-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);
+$--tk-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, .12);
+$--tk-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .12);
+$--tk-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16);
+$--tk-disabled-bg-color: var(--tk-fill-color-light);
+$--tk-disabled-text-color: var(--tk-text-color-placeholder);
+$--tk-disabled-border-color: var(--tk-border-color-light);
+$--tk-overlay-color: rgba(0, 0, 0, .8);
+$--tk-overlay-color-light: rgba(0, 0, 0, .7);
+$--tk-overlay-color-lighter: rgba(0, 0, 0, .5);
+$--tk-mask-color: rgba(255, 255, 255, .9);
+$--tk-mask-color-extra-light: rgba(255, 255, 255, .3);
+$--tk-border-width: 1px;
+$--tk-border-style: solid;
+$--tk-border-color-hover: var(--tk-text-color-disabled);
+$--tk-border: var(--tk-border-width) var(--tk-border-style) var(--tk-border-color);
+$--tk-svg-monochrome-grey: var(--tk-border-color);
+
+$--tk-loading-border-width: 2px;
+$--tk-loading-border-style: $--tk-border-style;
+$--tk-loading-primary-color: $--tk-color-white;
+$--tk-loading-other-color: transparent;