@jasperdai/uikit-base-component-uni 0.7.0

package/README.md

@@ -0,0 +1,34 @@
+# uni-uikit-provider
+
+## 1 Usage
+
+### 1.1 Use UIKitProvider Components
+
+```vue
+<script lang="ts" setup>
+import { UIKitProvider } from '@tencentcloud/uikit-base-component-uni';
+</script>
+
+<template>
+  <UIKitProvider theme="light">
+
+  </UIKitProvider>
+</template>
+```
+
+### 1.2 Use Hook useUIKit
+
+```vue
+<template>
+  <div>{{ theme }}</div>
+  <button @click="setTheme('dark')">set theme to dark</button>
+  <button @click="setTheme('light')">set theme to light</button>
+</template>
+
+<script lang="ts" setup>
+import { useUIKit } from '@tencentcloud/uikit-base-component-uni';
+
+const { theme, setTheme } = useUIKit();
+</script>
+
+```

package/dist/UIKitProvider.vue_vue_type_script_setup_true_lang-DrvJZLfH.js

@@ -0,0 +1,22 @@
+import { defineComponent as r, createBlock as m, openBlock as n, withCtx as p, renderSlot as i } from "vue";
+import s from "./providers/UIKitProvider/contexts/ThemeProvider/ThemeProvider.js";
+const l = /* @__PURE__ */ r({
+  __name: "UIKitProvider",
+  props: {
+    theme: { default: "light" }
+  },
+  setup(e) {
+    const t = e;
+    return (o, a) => (n(), m(s, {
+      theme: t.theme
+    }, {
+      default: p(() => [
+        i(o.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["theme"]));
+  }
+});
+export {
+  l as _
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { useUIKit, uikitProvider } from './providers/UIKitProvider/index';
+
+export { uikitProvider, useUIKit, };

package/dist/index.js

@@ -0,0 +1,6 @@
+import { _ as e } from "./UIKitProvider.vue_vue_type_script_setup_true_lang-DrvJZLfH.js";
+import { useUIKit as t } from "./providers/UIKitProvider/contexts/UIKitProvider/useUIKitProvider.js";
+export {
+  e as uikitProvider,
+  t as useUIKit
+};

package/dist/providers/UIKitProvider/contexts/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,24 @@
+import { defineComponent as n, createElementBlock as c, openBlock as a, normalizeClass as m, unref as i, renderSlot as l } from "vue";
+import { useTheme as p } from "./useThemeProvider.js";
+const u = /* @__PURE__ */ n({
+  __name: "ThemeProvider",
+  props: {
+    theme: { default: "light" }
+  },
+  setup(e) {
+    const o = e, { setTheme: t, uikitThemeClass: r } = p();
+    return t(o.theme), (s, f) => (a(), c("div", {
+      class: m(["uikit-theme-context", i(r)])
+    }, [
+      l(s.$slots, "default", {}, void 0, !0)
+    ], 2));
+  }
+}), d = (e, o) => {
+  const t = e.__vccOpts || e;
+  for (const [r, s] of o)
+    t[r] = s;
+  return t;
+}, v = /* @__PURE__ */ d(u, [["__scopeId", "data-v-760f1a5e"]]);
+export {
+  v as default
+};

package/dist/providers/UIKitProvider/contexts/ThemeProvider/ThemeProvider.vue.d.ts

@@ -0,0 +1,39 @@
+
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    theme?: string;
+}>, {
+    theme: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    theme?: string;
+}>, {
+    theme: string;
+}>>> & Readonly<{}>, {
+    theme: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/providers/UIKitProvider/contexts/ThemeProvider/useThemeProvider.d.ts

@@ -0,0 +1,5 @@
+export declare function useTheme(): {
+    theme: import('vue').Ref<string, string>;
+    setTheme: (newTheme: string) => void;
+    uikitThemeClass: import('vue').ComputedRef<string>;
+};

package/dist/providers/UIKitProvider/contexts/ThemeProvider/useThemeProvider.js

@@ -0,0 +1,18 @@
+import { ref as s, computed as u } from "vue";
+const t = s(""), o = ["light", "dark"], i = u(() => `tui-theme-${t.value}`);
+function m() {
+  function r(e) {
+    if (o.includes(e))
+      t.value = e;
+    else
+      throw new Error(`Theme "${e}" is not supported. Supported themes: [${o.join(", ")}]`);
+  }
+  return {
+    theme: t,
+    setTheme: r,
+    uikitThemeClass: i
+  };
+}
+export {
+  m as useTheme
+};

package/dist/providers/UIKitProvider/contexts/UIKitProvider/UIKitProvider.js

@@ -0,0 +1,4 @@
+import { _ as f } from "../../../../UIKitProvider.vue_vue_type_script_setup_true_lang-DrvJZLfH.js";
+export {
+  f as default
+};

package/dist/providers/UIKitProvider/contexts/UIKitProvider/UIKitProvider.vue.d.ts

@@ -0,0 +1,38 @@
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    theme?: string;
+}>, {
+    theme: string;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    theme?: string;
+}>, {
+    theme: string;
+}>>> & Readonly<{}>, {
+    theme: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/providers/UIKitProvider/contexts/UIKitProvider/useUIKitProvider.d.ts

@@ -0,0 +1,5 @@
+export declare function useUIKit(): {
+    theme: import('vue').Ref<string, string>;
+    setTheme: (newTheme: string) => void;
+    uikitThemeClass: import('vue').ComputedRef<string>;
+};

package/dist/providers/UIKitProvider/contexts/UIKitProvider/useUIKitProvider.js

@@ -0,0 +1,9 @@
+import { useTheme as e } from "../ThemeProvider/useThemeProvider.js";
+function n() {
+  return {
+    ...e()
+  };
+}
+export {
+  n as useUIKit
+};

package/dist/providers/UIKitProvider/index.d.ts

@@ -0,0 +1,4 @@
+import { default as uikitProvider } from './contexts/UIKitProvider/UIKitProvider.vue';
+import { useUIKit } from './contexts/UIKitProvider/useUIKitProvider';
+
+export { uikitProvider, useUIKit, };

package/dist/providers/UIKitProvider/index.js

@@ -0,0 +1,6 @@
+import { _ as e } from "../../UIKitProvider.vue_vue_type_script_setup_true_lang-DrvJZLfH.js";
+import { useUIKit as t } from "./contexts/UIKitProvider/useUIKitProvider.js";
+export {
+  e as uikitProvider,
+  t as useUIKit
+};

package/dist/styles/index.css

@@ -0,0 +1 @@
+.tui-theme-dark{--uikit-color-theme-1: #1C2333;--uikit-color-theme-2: #243047;--uikit-color-theme-3: #2F4875;--uikit-color-theme-4: #305BA6;--uikit-color-theme-5: #2B6AD6;--uikit-color-theme-6: #4086FF;--uikit-color-theme-7: #5C9DFF;--uikit-color-theme-8: #78B0FF;--uikit-color-theme-9: #9CC7FF;--uikit-color-theme-10: #C2DEFF;--uikit-color-black-1: rgba(0, 0, 0, 100%);--uikit-color-black-2: rgba(0, 0, 0, 90%);--uikit-color-black-3: rgba(0, 0, 0, 72%);--uikit-color-black-4: rgba(0, 0, 0, 55%);--uikit-color-black-5: rgba(0, 0, 0, 40%);--uikit-color-black-6: rgba(0, 0, 0, 25%);--uikit-color-black-7: rgba(0, 0, 0, 12%);--uikit-color-black-8: rgba(0, 0, 0, 6%);--uikit-color-white-1: rgba(255, 255, 255, 100%);--uikit-color-white-2: rgba(255, 255, 255, 93%);--uikit-color-white-3: rgba(255, 255, 255, 75%);--uikit-color-white-4: rgba(255, 255, 255, 55%);--uikit-color-white-5: rgba(255, 255, 255, 42%);--uikit-color-white-6: rgba(255, 255, 255, 30%);--uikit-color-white-7: rgba(255, 255, 255, 14%);--uikit-color-gray-1: #131417;--uikit-color-gray-2: #1F2024;--uikit-color-gray-3: #2B2C30;--uikit-color-gray-4: #3A3C42;--uikit-color-gray-5: #48494F;--uikit-color-gray-6: #54565C;--uikit-color-gray-7: #676A70;--uikit-color-green-1: #1A2620;--uikit-color-green-2: #22352C;--uikit-color-green-3: #2F4F3F;--uikit-color-green-4: #377355;--uikit-color-green-5: #368F65;--uikit-color-green-6: #38A673;--uikit-color-green-7: #62B58B;--uikit-color-green-8: #8BC7A9;--uikit-color-green-9: #A9D4BD;--uikit-color-green-10: #C8E5D5;--uikit-color-red-1: #2B1C1F;--uikit-color-red-2: #422324;--uikit-color-red-3: #613234;--uikit-color-red-4: #8A4242;--uikit-color-red-5: #C2544E;--uikit-color-red-6: #E6594C;--uikit-color-red-7: #E57A6E;--uikit-color-red-8: #F3A599;--uikit-color-red-9: #FACBC3;--uikit-color-red-10: #FAE4DE;--uikit-color-orange-1: #211A19;--uikit-color-orange-2: #35231A;--uikit-color-orange-3: #462E1F;--uikit-color-orange-4: #653C21;--uikit-color-orange-5: #96562A;--uikit-color-orange-6: #E37F32;--uikit-color-orange-7: #E39552;--uikit-color-orange-8: #EEAD72;--uikit-color-orange-9: #F7CFA4;--uikit-color-orange-10: #F9E9D1;--uikit-color-transparent: rgba(255, 255, 255, 0%);--text-color-primary: var(--uikit-color-white-2);--text-color-secondary: var(--uikit-color-white-4);--text-color-tertiary: var(--uikit-color-white-6);--text-color-disabled: var(--uikit-color-white-7);--text-color-button: var(--uikit-color-white-1);--text-color-button-disabled: var(--uikit-color-white-5);--text-color-link: var(--uikit-color-theme-6);--text-color-link-hover: var(--uikit-color-theme-5);--text-color-link-active: var(--uikit-color-theme-7);--text-color-link-disabled: var(--uikit-color-theme-2);--text-color-anti-primary: var(--uikit-color-black-2);--text-color-anti-secondary: var(--uikit-color-black-4);--text-color-warning: var(--uikit-color-orange-6);--text-color-success: var(--uikit-color-green-6);--text-color-error: var(--uikit-color-red-6);--bg-color-topbar: var(--uikit-color-gray-1);--bg-color-operate: var(--uikit-color-gray-2);--bg-color-dialog: var(--uikit-color-gray-2);--bg-color-dialog-module: var(--uikit-color-gray-3);--bg-color-entrycard: var(--uikit-color-gray-3);--bg-color-function: var(--uikit-color-gray-4);--bg-color-bottombar: var(--uikit-color-gray-3);--bg-color-input: var(--uikit-color-gray-3);--bg-color-bubble-reciprocal: var(--uikit-color-gray-3);--bg-color-bubble-own: var(--uikit-color-theme-7);--bg-color-default: var(--uikit-color-gray-1);--bg-color-tag-mask: var(--uikit-color-black-4);--bg-color-element-mask: var(--uikit-color-black-6);--bg-color-mask: var(--uikit-color-black-4);--bg-color-mask-disappeared: var(--uikit-color-black-8);--bg-color-mask-begin: var(--uikit-color-black-2);--stroke-color-primary: var(--uikit-color-gray-4);--stroke-color-secondary: var(--uikit-color-gray-3);--stroke-color-module: var(--uikit-color-gray-5);--shadow-color: var(--uikit-color-black-8);--list-color-default: var(--uikit-color-gray-2);--list-color-hover: var(--uikit-color-gray-3);--list-color-focused: var(--uikit-color-theme-2);--button-color-primary-default: var(--uikit-color-theme-6);--button-color-primary-hover: var(--uikit-color-theme-5);--button-color-primary-active: var(--uikit-color-theme-7);--button-color-primary-disabled: var(--uikit-color-theme-2);--button-color-secondary-default: var(--uikit-color-gray-4);--button-color-secondary-hover: var(--uikit-color-gray-3);--button-color-secondary-active: var(--uikit-color-gray-5);--button-color-secondary-disabled: var(--uikit-color-gray-3);--button-color-accept: var(--uikit-color-green-6);--button-color-hangup: var(--uikit-color-red-6);--button-color-on: var(--uikit-color-white-1);--button-color-off: var(--uikit-color-black-5);--dropdown-color-default: var(--uikit-color-gray-3);--dropdown-color-hover: var(--uikit-color-gray-4);--dropdown-color-active: var(--uikit-color-gray-2);--scroll-bar-color-default: var(--uikit-color-white-7);--scroll-bar-color-hover: var(--uikit-color-white-6);--floating-color-default: var(--uikit-color-gray-3);--floating-color-operate: var(--uikit-color-gray-4);--checkbox-color-selected: var(--uikit-color-theme-5);--toast-color-warning: var(--uikit-color-orange-2);--toast-color-success: var(--uikit-color-green-2);--toast-color-error: var(--uikit-color-red-2);--toast-color-default: var(--uikit-color-theme-2);--switch-color-off: var(--uikit-color-gray-4);--switch-color-on: var(--uikit-color-theme-5);--switch-color-button: var(--uikit-color-white-1);--slider-color-filled: var(--uikit-color-theme-5);--slider-color-empty: var(--uikit-color-gray-5);--slider-color-button: var(--uikit-color-white-1);--tab-color-selected: var(--uikit-color-gray-5);--tab-color-unselected: var(--uikit-color-gray-4);--tab-color-option: var(--uikit-color-gray-4)}.tui-theme-light{--uikit-color-theme-1: #EBF3FF;--uikit-color-theme-2: #CCE2FF;--uikit-color-theme-3: #ADCFFF;--uikit-color-theme-4: #7AAFFF;--uikit-color-theme-5: #4588F5;--uikit-color-theme-6: #1C66E5;--uikit-color-theme-7: #0D49BF;--uikit-color-theme-8: #033099;--uikit-color-theme-9: #001F73;--uikit-color-theme-10: #00124D;--uikit-color-black-1: rgba(0, 0, 0, 100%);--uikit-color-black-2: rgba(0, 0, 0, 90%);--uikit-color-black-3: rgba(0, 0, 0, 72%);--uikit-color-black-4: rgba(0, 0, 0, 55%);--uikit-color-black-5: rgba(0, 0, 0, 40%);--uikit-color-black-6: rgba(0, 0, 0, 25%);--uikit-color-black-7: rgba(0, 0, 0, 12%);--uikit-color-black-8: rgba(0, 0, 0, 6%);--uikit-color-white-1: rgba(255, 255, 255, 100%);--uikit-color-white-2: rgba(255, 255, 255, 93%);--uikit-color-white-3: rgba(255, 255, 255, 75%);--uikit-color-white-4: rgba(255, 255, 255, 55%);--uikit-color-white-5: rgba(255, 255, 255, 42%);--uikit-color-white-6: rgba(255, 255, 255, 30%);--uikit-color-white-7: rgba(255, 255, 255, 14%);--uikit-color-gray-1: #F9FAFC;--uikit-color-gray-2: #F0F2F7;--uikit-color-gray-3: #E6E9F0;--uikit-color-gray-4: #D1D4DE;--uikit-color-gray-5: #C0C3CC;--uikit-color-gray-6: #B3B6BE;--uikit-color-gray-7: #A5A9B0;--uikit-color-green-1: #DCFAE9;--uikit-color-green-2: #B6F0D1;--uikit-color-green-3: #84E3B5;--uikit-color-green-4: #5AD69E;--uikit-color-green-5: #3CC98C;--uikit-color-green-6: #0ABF77;--uikit-color-green-7: #09A768;--uikit-color-green-8: #078F59;--uikit-color-green-9: #067049;--uikit-color-green-10: #044D37;--uikit-color-red-1: #FFE7E6;--uikit-color-red-2: #FCC9C7;--uikit-color-red-3: #FAAEAC;--uikit-color-red-4: #F58989;--uikit-color-red-5: #E86666;--uikit-color-red-6: #E54545;--uikit-color-red-7: #C93439;--uikit-color-red-8: #AD2934;--uikit-color-red-9: #8F222D;--uikit-color-red-10: #6B1A27;--uikit-color-orange-1: #FFEEDB;--uikit-color-orange-2: #FFD6B2;--uikit-color-orange-3: #FFBE85;--uikit-color-orange-4: #FFA455;--uikit-color-orange-5: #FF8B2B;--uikit-color-orange-6: #FF7200;--uikit-color-orange-7: #E05D00;--uikit-color-orange-8: #BF4900;--uikit-color-orange-9: #8F370B;--uikit-color-orange-10: #662200;--uikit-color-transparent: rgba(255, 255, 255, 0%);--text-color-primary: var(--uikit-color-black-2);--text-color-secondary: var(--uikit-color-black-4);--text-color-tertiary: var(--uikit-color-black-5);--text-color-disabled: var(--uikit-color-black-6);--text-color-button: var(--uikit-color-white-1);--text-color-button-disabled: var(--uikit-color-white-1);--text-color-link: var(--uikit-color-theme-6);--text-color-link-hover: var(--uikit-color-theme-5);--text-color-link-active: var(--uikit-color-theme-7);--text-color-link-disabled: var(--uikit-color-theme-2);--text-color-anti-primary: var(--uikit-color-black-2);--text-color-anti-secondary: var(--uikit-color-black-4);--text-color-warning: var(--uikit-color-orange-6);--text-color-success: var(--uikit-color-green-6);--text-color-error: var(--uikit-color-red-6);--bg-color-topbar: var(--uikit-color-gray-1);--bg-color-operate: var(--uikit-color-white-1);--bg-color-dialog: var(--uikit-color-white-1);--bg-color-dialog-module: var(--uikit-color-gray-2);--bg-color-entrycard: var(--uikit-color-gray-2);--bg-color-function: var(--uikit-color-gray-2);--bg-color-bottombar: var(--uikit-color-white-1);--bg-color-input: var(--uikit-color-gray-2);--bg-color-bubble-reciprocal: var(--uikit-color-gray-2);--bg-color-bubble-own: var(--uikit-color-theme-2);--bg-color-default: var(--uikit-color-gray-2);--bg-color-tag-mask: var(--uikit-color-white-4);--bg-color-element-mask: var(--uikit-color-black-6);--bg-color-mask: var(--uikit-color-black-4);--bg-color-mask-disappeared: var(--uikit-color-white-7);--bg-color-mask-begin: var(--uikit-color-white-1);--stroke-color-primary: var(--uikit-color-gray-3);--stroke-color-secondary: var(--uikit-color-gray-2);--stroke-color-module: var(--uikit-color-gray-3);--shadow-color: var(--uikit-color-black-8);--list-color-default: var(--uikit-color-white-1);--list-color-hover: var(--uikit-color-gray-1);--list-color-focused: var(--uikit-color-theme-1);--button-color-primary-default: var(--uikit-color-theme-6);--button-color-primary-hover: var(--uikit-color-theme-5);--button-color-primary-active: var(--uikit-color-theme-7);--button-color-primary-disabled: var(--uikit-color-theme-2);--button-color-secondary-default: var(--uikit-color-gray-2);--button-color-secondary-hover: var(--uikit-color-gray-1);--button-color-secondary-active: var(--uikit-color-gray-3);--button-color-secondary-disabled: var(--uikit-color-gray-1);--button-color-accept: var(--uikit-color-green-6);--button-color-hangup: var(--uikit-color-red-6);--button-color-on: var(--uikit-color-white-1);--button-color-off: var(--uikit-color-black-5);--dropdown-color-default: var(--uikit-color-white-1);--dropdown-color-hover: var(--uikit-color-gray-1);--dropdown-color-active: var(--uikit-color-theme-2);--scroll-bar-color-default: var(--uikit-color-black-7);--scroll-bar-color-hover: var(--uikit-color-black-6);--floating-color-default: var(--uikit-color-white-1);--floating-color-operate: var(--uikit-color-gray-2);--checkbox-color-selected: var(--uikit-color-theme-6);--toast-color-warning: var(--uikit-color-orange-1);--toast-color-success: var(--uikit-color-green-1);--toast-color-error: var(--uikit-color-red-1);--toast-color-default: var(--uikit-color-theme-1);--switch-color-off: var(--uikit-color-gray-4);--switch-color-on: var(--uikit-color-theme-6);--switch-color-button: var(--uikit-color-white-1);--slider-color-filled: var(--uikit-color-theme-6);--slider-color-empty: var(--uikit-color-gray-3);--slider-color-button: var(--uikit-color-white-1);--tab-color-selected: var(--uikit-color-theme-2);--tab-color-unselected: var(--uikit-color-gray-2);--tab-color-option: var(--uikit-color-gray-3)}.uikit-theme-context[data-v-760f1a5e]{width:100%;height:100%}

package/dist/styles/styles/themes/dark.scss

@@ -0,0 +1,167 @@
+.tui-theme-dark {
+  --uikit-color-theme-1: #1C2333;
+  --uikit-color-theme-2: #243047;
+  --uikit-color-theme-3: #2F4875;
+  --uikit-color-theme-4: #305BA6;
+  --uikit-color-theme-5: #2B6AD6;
+  --uikit-color-theme-6: #4086FF;
+  --uikit-color-theme-7: #5C9DFF;
+  --uikit-color-theme-8: #78B0FF;
+  --uikit-color-theme-9: #9CC7FF;
+  --uikit-color-theme-10: #C2DEFF;
+
+  --uikit-color-black-1: rgba(0, 0, 0, 100%);
+  --uikit-color-black-2: rgba(0, 0, 0, 90%);
+  --uikit-color-black-3: rgba(0, 0, 0, 72%);
+  --uikit-color-black-4: rgba(0, 0, 0, 55%);
+  --uikit-color-black-5: rgba(0, 0, 0, 40%);
+  --uikit-color-black-6: rgba(0, 0, 0, 25%);
+  --uikit-color-black-7: rgba(0, 0, 0, 12%);
+  --uikit-color-black-8: rgba(0, 0, 0, 6%);
+  --uikit-color-white-1: rgba(255, 255, 255, 100%);
+  --uikit-color-white-2: rgba(255, 255, 255, 93%);
+  --uikit-color-white-3: rgba(255, 255, 255, 75%);
+  --uikit-color-white-4: rgba(255, 255, 255, 55%);
+  --uikit-color-white-5: rgba(255, 255, 255, 42%);
+  --uikit-color-white-6: rgba(255, 255, 255, 30%);
+  --uikit-color-white-7: rgba(255, 255, 255, 14%);
+  --uikit-color-gray-1: #131417;
+  --uikit-color-gray-2: #1F2024;
+  --uikit-color-gray-3: #2B2C30;
+  --uikit-color-gray-4: #3A3C42;
+  --uikit-color-gray-5: #48494F;
+  --uikit-color-gray-6: #54565C;
+  --uikit-color-gray-7: #676A70;
+  --uikit-color-green-1: #1A2620;
+  --uikit-color-green-2: #22352C;
+  --uikit-color-green-3: #2F4F3F;
+  --uikit-color-green-4: #377355;
+  --uikit-color-green-5: #368F65;
+  --uikit-color-green-6: #38A673;
+  --uikit-color-green-7: #62B58B;
+  --uikit-color-green-8: #8BC7A9;
+  --uikit-color-green-9: #A9D4BD;
+  --uikit-color-green-10: #C8E5D5;
+  --uikit-color-red-1: #2B1C1F;
+  --uikit-color-red-2: #422324;
+  --uikit-color-red-3: #613234;
+  --uikit-color-red-4: #8A4242;
+  --uikit-color-red-5: #C2544E;
+  --uikit-color-red-6: #E6594C;
+  --uikit-color-red-7: #E57A6E;
+  --uikit-color-red-8: #F3A599;
+  --uikit-color-red-9: #FACBC3;
+  --uikit-color-red-10: #FAE4DE;
+  --uikit-color-orange-1: #211A19;
+  --uikit-color-orange-2: #35231A;
+  --uikit-color-orange-3: #462E1F;
+  --uikit-color-orange-4: #653C21;
+  --uikit-color-orange-5: #96562A;
+  --uikit-color-orange-6: #E37F32;
+  --uikit-color-orange-7: #E39552;
+  --uikit-color-orange-8: #EEAD72;
+  --uikit-color-orange-9: #F7CFA4;
+  --uikit-color-orange-10: #F9E9D1;
+  --uikit-color-transparent: rgba(255, 255, 255, 0%);
+
+  // text
+  --text-color-primary: var(--uikit-color-white-2);
+  --text-color-secondary: var(--uikit-color-white-4);
+  --text-color-tertiary: var(--uikit-color-white-6);
+  --text-color-disabled: var(--uikit-color-white-7);
+  --text-color-button: var(--uikit-color-white-1);
+  --text-color-button-disabled: var(--uikit-color-white-5);
+  --text-color-link: var(--uikit-color-theme-6);
+  --text-color-link-hover: var(--uikit-color-theme-5);
+  --text-color-link-active: var(--uikit-color-theme-7);
+  --text-color-link-disabled: var(--uikit-color-theme-2);
+  --text-color-anti-primary: var(--uikit-color-black-2);
+  --text-color-anti-secondary: var(--uikit-color-black-4);
+  --text-color-warning: var(--uikit-color-orange-6);
+  --text-color-success: var(--uikit-color-green-6);
+  --text-color-error: var(--uikit-color-red-6);
+
+  // background
+  --bg-color-topbar: var(--uikit-color-gray-1);
+  --bg-color-operate: var(--uikit-color-gray-2);
+  --bg-color-dialog: var(--uikit-color-gray-2);
+  --bg-color-dialog-module: var(--uikit-color-gray-3);
+  --bg-color-entrycard: var(--uikit-color-gray-3);
+  --bg-color-function: var(--uikit-color-gray-4);
+  --bg-color-bottombar: var(--uikit-color-gray-3);
+  --bg-color-input: var(--uikit-color-gray-3);
+  --bg-color-bubble-reciprocal: var(--uikit-color-gray-3);
+  --bg-color-bubble-own: var(--uikit-color-theme-7);
+  --bg-color-default: var(--uikit-color-gray-1);
+  --bg-color-tag-mask: var(--uikit-color-black-4);
+  --bg-color-element-mask: var(--uikit-color-black-6);
+  --bg-color-mask: var(--uikit-color-black-4);
+  --bg-color-mask-disappeared: var(--uikit-color-black-8);
+  --bg-color-mask-begin: var(--uikit-color-black-2);
+
+  // border
+  --stroke-color-primary: var(--uikit-color-gray-4);
+  --stroke-color-secondary: var(--uikit-color-gray-3);
+  --stroke-color-module: var(--uikit-color-gray-5);
+
+  // shadow
+  --shadow-color: var(--uikit-color-black-8);
+
+  // status
+  --list-color-default: var(--uikit-color-gray-2);
+  --list-color-hover: var(--uikit-color-gray-3);
+  --list-color-focused: var(--uikit-color-theme-2);
+
+  // button
+  --button-color-primary-default: var(--uikit-color-theme-6);
+  --button-color-primary-hover: var(--uikit-color-theme-5);
+  --button-color-primary-active: var(--uikit-color-theme-7);
+  --button-color-primary-disabled: var(--uikit-color-theme-2);
+  --button-color-secondary-default: var(--uikit-color-gray-4);
+  --button-color-secondary-hover: var(--uikit-color-gray-3);
+  --button-color-secondary-active: var(--uikit-color-gray-5);
+  --button-color-secondary-disabled: var(--uikit-color-gray-3);
+  --button-color-accept: var(--uikit-color-green-6);
+  --button-color-hangup: var(--uikit-color-red-6);
+  --button-color-on: var(--uikit-color-white-1);
+  --button-color-off: var(--uikit-color-black-5);
+
+  // dropdown
+  --dropdown-color-default: var(--uikit-color-gray-3);
+  --dropdown-color-hover: var(--uikit-color-gray-4);
+  --dropdown-color-active: var(--uikit-color-gray-2);
+
+  // scroll-bar
+  --scroll-bar-color-default: var(--uikit-color-white-7);
+  --scroll-bar-color-hover: var(--uikit-color-white-6);
+
+  // floating
+  --floating-color-default: var(--uikit-color-gray-3);
+  --floating-color-operate: var(--uikit-color-gray-4);
+
+  // checkbox
+  --checkbox-color-selected: var(--uikit-color-theme-5);
+
+  // toast
+  --toast-color-warning: var(--uikit-color-orange-2);
+  --toast-color-success: var(--uikit-color-green-2);
+  --toast-color-error: var(--uikit-color-red-2);
+  --toast-color-default: var(--uikit-color-theme-2);
+
+  // switch
+  --switch-color-off: var(--uikit-color-gray-4);
+  --switch-color-on: var(--uikit-color-theme-5);
+  --switch-color-button: var(--uikit-color-white-1);
+
+  // slider
+  --slider-color-filled: var(--uikit-color-theme-5);
+  --slider-color-empty: var(--uikit-color-gray-5);
+  --slider-color-button: var(--uikit-color-white-1);
+
+  // tab
+  --tab-color-selected: var(--uikit-color-gray-5);
+  --tab-color-unselected: var(--uikit-color-gray-4);
+  --tab-color-option: var(--uikit-color-gray-4);
+
+  // todo-tag
+}

package/dist/styles/styles/themes/light.scss

@@ -0,0 +1,167 @@
+.tui-theme-light {
+  --uikit-color-theme-1: #EBF3FF;
+  --uikit-color-theme-2: #CCE2FF;
+  --uikit-color-theme-3: #ADCFFF;
+  --uikit-color-theme-4: #7AAFFF;
+  --uikit-color-theme-5: #4588F5;
+  --uikit-color-theme-6: #1C66E5;
+  --uikit-color-theme-7: #0D49BF;
+  --uikit-color-theme-8: #033099;
+  --uikit-color-theme-9: #001F73;
+  --uikit-color-theme-10: #00124D;
+
+  --uikit-color-black-1: rgba(0, 0, 0, 100%);
+  --uikit-color-black-2: rgba(0, 0, 0, 90%);
+  --uikit-color-black-3: rgba(0, 0, 0, 72%);
+  --uikit-color-black-4: rgba(0, 0, 0, 55%);
+  --uikit-color-black-5: rgba(0, 0, 0, 40%);
+  --uikit-color-black-6: rgba(0, 0, 0, 25%);
+  --uikit-color-black-7: rgba(0, 0, 0, 12%);
+  --uikit-color-black-8: rgba(0, 0, 0, 6%);
+  --uikit-color-white-1: rgba(255, 255, 255, 100%);
+  --uikit-color-white-2: rgba(255, 255, 255, 93%);
+  --uikit-color-white-3: rgba(255, 255, 255, 75%);
+  --uikit-color-white-4: rgba(255, 255, 255, 55%);
+  --uikit-color-white-5: rgba(255, 255, 255, 42%);
+  --uikit-color-white-6: rgba(255, 255, 255, 30%);
+  --uikit-color-white-7: rgba(255, 255, 255, 14%);
+  --uikit-color-gray-1: #F9FAFC;
+  --uikit-color-gray-2: #F0F2F7;
+  --uikit-color-gray-3: #E6E9F0;
+  --uikit-color-gray-4: #D1D4DE;
+  --uikit-color-gray-5: #C0C3CC;
+  --uikit-color-gray-6: #B3B6BE;
+  --uikit-color-gray-7: #A5A9B0;
+  --uikit-color-green-1: #DCFAE9;
+  --uikit-color-green-2: #B6F0D1;
+  --uikit-color-green-3: #84E3B5;
+  --uikit-color-green-4: #5AD69E;
+  --uikit-color-green-5: #3CC98C;
+  --uikit-color-green-6: #0ABF77;
+  --uikit-color-green-7: #09A768;
+  --uikit-color-green-8: #078F59;
+  --uikit-color-green-9: #067049;
+  --uikit-color-green-10: #044D37;
+  --uikit-color-red-1: #FFE7E6;
+  --uikit-color-red-2: #FCC9C7;
+  --uikit-color-red-3: #FAAEAC;
+  --uikit-color-red-4: #F58989;
+  --uikit-color-red-5: #E86666;
+  --uikit-color-red-6: #E54545;
+  --uikit-color-red-7: #C93439;
+  --uikit-color-red-8: #AD2934;
+  --uikit-color-red-9: #8F222D;
+  --uikit-color-red-10: #6B1A27;
+  --uikit-color-orange-1: #FFEEDB;
+  --uikit-color-orange-2: #FFD6B2;
+  --uikit-color-orange-3: #FFBE85;
+  --uikit-color-orange-4: #FFA455;
+  --uikit-color-orange-5: #FF8B2B;
+  --uikit-color-orange-6: #FF7200;
+  --uikit-color-orange-7: #E05D00;
+  --uikit-color-orange-8: #BF4900;
+  --uikit-color-orange-9: #8F370B;
+  --uikit-color-orange-10: #662200;
+  --uikit-color-transparent: rgba(255, 255, 255, 0%);
+
+  // text
+  --text-color-primary: var(--uikit-color-black-2);
+  --text-color-secondary: var(--uikit-color-black-4);
+  --text-color-tertiary: var(--uikit-color-black-5);
+  --text-color-disabled: var(--uikit-color-black-6);
+  --text-color-button: var(--uikit-color-white-1);
+  --text-color-button-disabled: var(--uikit-color-white-1);
+  --text-color-link: var(--uikit-color-theme-6);
+  --text-color-link-hover: var(--uikit-color-theme-5);
+  --text-color-link-active: var(--uikit-color-theme-7);
+  --text-color-link-disabled: var(--uikit-color-theme-2);
+  --text-color-anti-primary: var(--uikit-color-black-2);
+  --text-color-anti-secondary: var(--uikit-color-black-4);
+  --text-color-warning: var(--uikit-color-orange-6);
+  --text-color-success: var(--uikit-color-green-6);
+  --text-color-error: var(--uikit-color-red-6);
+
+  // background
+  --bg-color-topbar: var(--uikit-color-gray-1);
+  --bg-color-operate: var(--uikit-color-white-1);
+  --bg-color-dialog: var(--uikit-color-white-1);
+  --bg-color-dialog-module: var(--uikit-color-gray-2);
+  --bg-color-entrycard: var(--uikit-color-gray-2);
+  --bg-color-function: var(--uikit-color-gray-2);
+  --bg-color-bottombar: var(--uikit-color-white-1);
+  --bg-color-input: var(--uikit-color-gray-2);
+  --bg-color-bubble-reciprocal: var(--uikit-color-gray-2);
+  --bg-color-bubble-own: var(--uikit-color-theme-2);
+  --bg-color-default: var(--uikit-color-gray-2);
+  --bg-color-tag-mask: var(--uikit-color-white-4);
+  --bg-color-element-mask: var(--uikit-color-black-6);
+  --bg-color-mask: var(--uikit-color-black-4);
+  --bg-color-mask-disappeared: var(--uikit-color-white-7);
+  --bg-color-mask-begin: var(--uikit-color-white-1);
+
+  // border
+  --stroke-color-primary: var(--uikit-color-gray-3);
+  --stroke-color-secondary: var(--uikit-color-gray-2);
+  --stroke-color-module: var(--uikit-color-gray-3);
+
+  // shadow
+  --shadow-color: var(--uikit-color-black-8);
+
+  // status
+  --list-color-default: var(--uikit-color-white-1);
+  --list-color-hover: var(--uikit-color-gray-1);
+  --list-color-focused: var(--uikit-color-theme-1);
+
+  // button
+  --button-color-primary-default: var(--uikit-color-theme-6);
+  --button-color-primary-hover: var(--uikit-color-theme-5);
+  --button-color-primary-active: var(--uikit-color-theme-7);
+  --button-color-primary-disabled: var(--uikit-color-theme-2);
+  --button-color-secondary-default: var(--uikit-color-gray-2);
+  --button-color-secondary-hover: var(--uikit-color-gray-1);
+  --button-color-secondary-active: var(--uikit-color-gray-3);
+  --button-color-secondary-disabled: var(--uikit-color-gray-1);
+  --button-color-accept: var(--uikit-color-green-6);
+  --button-color-hangup: var(--uikit-color-red-6);
+  --button-color-on: var(--uikit-color-white-1);
+  --button-color-off: var(--uikit-color-black-5);
+
+  // dropdown
+  --dropdown-color-default: var(--uikit-color-white-1);
+  --dropdown-color-hover: var(--uikit-color-gray-1);
+  --dropdown-color-active: var(--uikit-color-theme-2);
+
+  // scroll-bar
+  --scroll-bar-color-default: var(--uikit-color-black-7);
+  --scroll-bar-color-hover: var(--uikit-color-black-6);
+
+  // floating
+  --floating-color-default: var(--uikit-color-white-1);
+  --floating-color-operate: var(--uikit-color-gray-2);
+
+  // checkbox
+  --checkbox-color-selected: var(--uikit-color-theme-6);
+
+  // toast
+  --toast-color-warning: var(--uikit-color-orange-1);
+  --toast-color-success: var(--uikit-color-green-1);
+  --toast-color-error: var(--uikit-color-red-1);
+  --toast-color-default: var(--uikit-color-theme-1);
+
+  // switch
+  --switch-color-off: var(--uikit-color-gray-4);
+  --switch-color-on: var(--uikit-color-theme-6);
+  --switch-color-button: var(--uikit-color-white-1);
+
+  // slider
+  --slider-color-filled: var(--uikit-color-theme-6);
+  --slider-color-empty: var(--uikit-color-gray-3);
+  --slider-color-button: var(--uikit-color-white-1);
+
+  // tab
+  --tab-color-selected: var(--uikit-color-theme-2);
+  --tab-color-unselected: var(--uikit-color-gray-2);
+  --tab-color-option: var(--uikit-color-gray-3);
+
+  // todo-tag
+}

package/dist/styles/styles/variables.scss

@@ -0,0 +1,3 @@
+
+@import './themes/dark';
+@import './themes/light';

package/dist/vite-env.d.js

@@ -0,0 +1 @@
+

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@jasperdai/uikit-base-component-uni",
+  "version": "0.7.0",
+  "type": "module",
+  "main": "./src/index.ts",
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "build-storybook": "storybook build",
+    "publish": "npm publish --access public"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.21"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@originjs/vite-plugin-commonjs": "^1.0.3",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "sass": "^1.72.0",
+    "storybook": "^8.4.4",
+    "typescript": "^5.5.4",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.7.3",
+    "vue-tsc": "^2.0.6",
+    "glob": "^11.0.0",
+    "vite-plugin-lib-inject-css": "^2.1.1",
+    "vite-plugin-static-copy": "^2.2.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+import { useUIKit, uikitProvider } from './providers/UIKitProvider/index';
+
+export {
+  uikitProvider,
+  useUIKit,
+};

package/src/providers/UIKitProvider/contexts/ThemeProvider/ThemeProvider.vue

@@ -0,0 +1,27 @@
+<template>
+  <div :class="['uikit-theme-context', uikitThemeClass]">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTheme } from './useThemeProvider';
+import '../../styles/variables.scss';
+
+const props = withDefaults(defineProps<{
+  theme?: string;
+}>(), {
+  theme: 'light',
+});
+
+const { setTheme, uikitThemeClass } = useTheme();
+
+setTheme(props.theme);
+</script>
+
+<style lang="scss" scoped>
+.uikit-theme-context {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/providers/UIKitProvider/contexts/ThemeProvider/useThemeProvider.ts

@@ -0,0 +1,21 @@
+import { ref, computed } from 'vue';
+
+const theme = ref('');
+const supportedThemes = ['light', 'dark'];
+const uikitThemeClass = computed(() => `tui-theme-${theme.value}`);
+
+export function useTheme() {
+  function setTheme(newTheme: string): void {
+    if (supportedThemes.includes(newTheme)) {
+      theme.value = newTheme;
+    } else {
+      throw new Error(`Theme "${newTheme}" is not supported. Supported themes: [${supportedThemes.join(', ')}]`);
+    }
+  }
+
+  return {
+    theme,
+    setTheme,
+    uikitThemeClass,
+  }
+}

package/src/providers/UIKitProvider/contexts/UIKitProvider/UIKitProvider.vue

@@ -0,0 +1,16 @@
+<template>
+  <ThemeProvider :theme="props.theme">
+    <slot></slot>
+  </ThemeProvider>
+</template>
+
+<script setup lang="ts">
+import { withDefaults } from 'vue';
+import ThemeProvider from '../ThemeProvider/ThemeProvider.vue';
+
+const props = withDefaults(defineProps<{
+  theme?: string;
+}>(), {
+  theme: 'light',
+});
+</script>

package/src/providers/UIKitProvider/contexts/UIKitProvider/useUIKitProvider.ts

@@ -0,0 +1,9 @@
+import { useTheme } from '../ThemeProvider/useThemeProvider';
+
+export function useUIKit(){
+  const themeContext = useTheme();
+  return {
+    ...themeContext,
+  };
+}
+

package/src/providers/UIKitProvider/index.ts

@@ -0,0 +1,7 @@
+import uikitProvider from './contexts/UIKitProvider/UIKitProvider.vue';
+import { useUIKit } from './contexts/UIKitProvider/useUIKitProvider';
+
+export {
+  uikitProvider,
+  useUIKit,
+};

package/src/providers/UIKitProvider/styles/themes/dark.scss

@@ -0,0 +1,167 @@
+.tui-theme-dark {
+  --uikit-color-theme-1: #1C2333;
+  --uikit-color-theme-2: #243047;
+  --uikit-color-theme-3: #2F4875;
+  --uikit-color-theme-4: #305BA6;
+  --uikit-color-theme-5: #2B6AD6;
+  --uikit-color-theme-6: #4086FF;
+  --uikit-color-theme-7: #5C9DFF;
+  --uikit-color-theme-8: #78B0FF;
+  --uikit-color-theme-9: #9CC7FF;
+  --uikit-color-theme-10: #C2DEFF;
+
+  --uikit-color-black-1: rgba(0, 0, 0, 100%);
+  --uikit-color-black-2: rgba(0, 0, 0, 90%);
+  --uikit-color-black-3: rgba(0, 0, 0, 72%);
+  --uikit-color-black-4: rgba(0, 0, 0, 55%);
+  --uikit-color-black-5: rgba(0, 0, 0, 40%);
+  --uikit-color-black-6: rgba(0, 0, 0, 25%);
+  --uikit-color-black-7: rgba(0, 0, 0, 12%);
+  --uikit-color-black-8: rgba(0, 0, 0, 6%);
+  --uikit-color-white-1: rgba(255, 255, 255, 100%);
+  --uikit-color-white-2: rgba(255, 255, 255, 93%);
+  --uikit-color-white-3: rgba(255, 255, 255, 75%);
+  --uikit-color-white-4: rgba(255, 255, 255, 55%);
+  --uikit-color-white-5: rgba(255, 255, 255, 42%);
+  --uikit-color-white-6: rgba(255, 255, 255, 30%);
+  --uikit-color-white-7: rgba(255, 255, 255, 14%);
+  --uikit-color-gray-1: #131417;
+  --uikit-color-gray-2: #1F2024;
+  --uikit-color-gray-3: #2B2C30;
+  --uikit-color-gray-4: #3A3C42;
+  --uikit-color-gray-5: #48494F;
+  --uikit-color-gray-6: #54565C;
+  --uikit-color-gray-7: #676A70;
+  --uikit-color-green-1: #1A2620;
+  --uikit-color-green-2: #22352C;
+  --uikit-color-green-3: #2F4F3F;
+  --uikit-color-green-4: #377355;
+  --uikit-color-green-5: #368F65;
+  --uikit-color-green-6: #38A673;
+  --uikit-color-green-7: #62B58B;
+  --uikit-color-green-8: #8BC7A9;
+  --uikit-color-green-9: #A9D4BD;
+  --uikit-color-green-10: #C8E5D5;
+  --uikit-color-red-1: #2B1C1F;
+  --uikit-color-red-2: #422324;
+  --uikit-color-red-3: #613234;
+  --uikit-color-red-4: #8A4242;
+  --uikit-color-red-5: #C2544E;
+  --uikit-color-red-6: #E6594C;
+  --uikit-color-red-7: #E57A6E;
+  --uikit-color-red-8: #F3A599;
+  --uikit-color-red-9: #FACBC3;
+  --uikit-color-red-10: #FAE4DE;
+  --uikit-color-orange-1: #211A19;
+  --uikit-color-orange-2: #35231A;
+  --uikit-color-orange-3: #462E1F;
+  --uikit-color-orange-4: #653C21;
+  --uikit-color-orange-5: #96562A;
+  --uikit-color-orange-6: #E37F32;
+  --uikit-color-orange-7: #E39552;
+  --uikit-color-orange-8: #EEAD72;
+  --uikit-color-orange-9: #F7CFA4;
+  --uikit-color-orange-10: #F9E9D1;
+  --uikit-color-transparent: rgba(255, 255, 255, 0%);
+
+  // text
+  --text-color-primary: var(--uikit-color-white-2);
+  --text-color-secondary: var(--uikit-color-white-4);
+  --text-color-tertiary: var(--uikit-color-white-6);
+  --text-color-disabled: var(--uikit-color-white-7);
+  --text-color-button: var(--uikit-color-white-1);
+  --text-color-button-disabled: var(--uikit-color-white-5);
+  --text-color-link: var(--uikit-color-theme-6);
+  --text-color-link-hover: var(--uikit-color-theme-5);
+  --text-color-link-active: var(--uikit-color-theme-7);
+  --text-color-link-disabled: var(--uikit-color-theme-2);
+  --text-color-anti-primary: var(--uikit-color-black-2);
+  --text-color-anti-secondary: var(--uikit-color-black-4);
+  --text-color-warning: var(--uikit-color-orange-6);
+  --text-color-success: var(--uikit-color-green-6);
+  --text-color-error: var(--uikit-color-red-6);
+
+  // background
+  --bg-color-topbar: var(--uikit-color-gray-1);
+  --bg-color-operate: var(--uikit-color-gray-2);
+  --bg-color-dialog: var(--uikit-color-gray-2);
+  --bg-color-dialog-module: var(--uikit-color-gray-3);
+  --bg-color-entrycard: var(--uikit-color-gray-3);
+  --bg-color-function: var(--uikit-color-gray-4);
+  --bg-color-bottombar: var(--uikit-color-gray-3);
+  --bg-color-input: var(--uikit-color-gray-3);
+  --bg-color-bubble-reciprocal: var(--uikit-color-gray-3);
+  --bg-color-bubble-own: var(--uikit-color-theme-7);
+  --bg-color-default: var(--uikit-color-gray-1);
+  --bg-color-tag-mask: var(--uikit-color-black-4);
+  --bg-color-element-mask: var(--uikit-color-black-6);
+  --bg-color-mask: var(--uikit-color-black-4);
+  --bg-color-mask-disappeared: var(--uikit-color-black-8);
+  --bg-color-mask-begin: var(--uikit-color-black-2);
+
+  // border
+  --stroke-color-primary: var(--uikit-color-gray-4);
+  --stroke-color-secondary: var(--uikit-color-gray-3);
+  --stroke-color-module: var(--uikit-color-gray-5);
+
+  // shadow
+  --shadow-color: var(--uikit-color-black-8);
+
+  // status
+  --list-color-default: var(--uikit-color-gray-2);
+  --list-color-hover: var(--uikit-color-gray-3);
+  --list-color-focused: var(--uikit-color-theme-2);
+
+  // button
+  --button-color-primary-default: var(--uikit-color-theme-6);
+  --button-color-primary-hover: var(--uikit-color-theme-5);
+  --button-color-primary-active: var(--uikit-color-theme-7);
+  --button-color-primary-disabled: var(--uikit-color-theme-2);
+  --button-color-secondary-default: var(--uikit-color-gray-4);
+  --button-color-secondary-hover: var(--uikit-color-gray-3);
+  --button-color-secondary-active: var(--uikit-color-gray-5);
+  --button-color-secondary-disabled: var(--uikit-color-gray-3);
+  --button-color-accept: var(--uikit-color-green-6);
+  --button-color-hangup: var(--uikit-color-red-6);
+  --button-color-on: var(--uikit-color-white-1);
+  --button-color-off: var(--uikit-color-black-5);
+
+  // dropdown
+  --dropdown-color-default: var(--uikit-color-gray-3);
+  --dropdown-color-hover: var(--uikit-color-gray-4);
+  --dropdown-color-active: var(--uikit-color-gray-2);
+
+  // scroll-bar
+  --scroll-bar-color-default: var(--uikit-color-white-7);
+  --scroll-bar-color-hover: var(--uikit-color-white-6);
+
+  // floating
+  --floating-color-default: var(--uikit-color-gray-3);
+  --floating-color-operate: var(--uikit-color-gray-4);
+
+  // checkbox
+  --checkbox-color-selected: var(--uikit-color-theme-5);
+
+  // toast
+  --toast-color-warning: var(--uikit-color-orange-2);
+  --toast-color-success: var(--uikit-color-green-2);
+  --toast-color-error: var(--uikit-color-red-2);
+  --toast-color-default: var(--uikit-color-theme-2);
+
+  // switch
+  --switch-color-off: var(--uikit-color-gray-4);
+  --switch-color-on: var(--uikit-color-theme-5);
+  --switch-color-button: var(--uikit-color-white-1);
+
+  // slider
+  --slider-color-filled: var(--uikit-color-theme-5);
+  --slider-color-empty: var(--uikit-color-gray-5);
+  --slider-color-button: var(--uikit-color-white-1);
+
+  // tab
+  --tab-color-selected: var(--uikit-color-gray-5);
+  --tab-color-unselected: var(--uikit-color-gray-4);
+  --tab-color-option: var(--uikit-color-gray-4);
+
+  // todo-tag
+}

package/src/providers/UIKitProvider/styles/themes/light.scss

@@ -0,0 +1,167 @@
+.tui-theme-light {
+  --uikit-color-theme-1: #EBF3FF;
+  --uikit-color-theme-2: #CCE2FF;
+  --uikit-color-theme-3: #ADCFFF;
+  --uikit-color-theme-4: #7AAFFF;
+  --uikit-color-theme-5: #4588F5;
+  --uikit-color-theme-6: #1C66E5;
+  --uikit-color-theme-7: #0D49BF;
+  --uikit-color-theme-8: #033099;
+  --uikit-color-theme-9: #001F73;
+  --uikit-color-theme-10: #00124D;
+
+  --uikit-color-black-1: rgba(0, 0, 0, 100%);
+  --uikit-color-black-2: rgba(0, 0, 0, 90%);
+  --uikit-color-black-3: rgba(0, 0, 0, 72%);
+  --uikit-color-black-4: rgba(0, 0, 0, 55%);
+  --uikit-color-black-5: rgba(0, 0, 0, 40%);
+  --uikit-color-black-6: rgba(0, 0, 0, 25%);
+  --uikit-color-black-7: rgba(0, 0, 0, 12%);
+  --uikit-color-black-8: rgba(0, 0, 0, 6%);
+  --uikit-color-white-1: rgba(255, 255, 255, 100%);
+  --uikit-color-white-2: rgba(255, 255, 255, 93%);
+  --uikit-color-white-3: rgba(255, 255, 255, 75%);
+  --uikit-color-white-4: rgba(255, 255, 255, 55%);
+  --uikit-color-white-5: rgba(255, 255, 255, 42%);
+  --uikit-color-white-6: rgba(255, 255, 255, 30%);
+  --uikit-color-white-7: rgba(255, 255, 255, 14%);
+  --uikit-color-gray-1: #F9FAFC;
+  --uikit-color-gray-2: #F0F2F7;
+  --uikit-color-gray-3: #E6E9F0;
+  --uikit-color-gray-4: #D1D4DE;
+  --uikit-color-gray-5: #C0C3CC;
+  --uikit-color-gray-6: #B3B6BE;
+  --uikit-color-gray-7: #A5A9B0;
+  --uikit-color-green-1: #DCFAE9;
+  --uikit-color-green-2: #B6F0D1;
+  --uikit-color-green-3: #84E3B5;
+  --uikit-color-green-4: #5AD69E;
+  --uikit-color-green-5: #3CC98C;
+  --uikit-color-green-6: #0ABF77;
+  --uikit-color-green-7: #09A768;
+  --uikit-color-green-8: #078F59;
+  --uikit-color-green-9: #067049;
+  --uikit-color-green-10: #044D37;
+  --uikit-color-red-1: #FFE7E6;
+  --uikit-color-red-2: #FCC9C7;
+  --uikit-color-red-3: #FAAEAC;
+  --uikit-color-red-4: #F58989;
+  --uikit-color-red-5: #E86666;
+  --uikit-color-red-6: #E54545;
+  --uikit-color-red-7: #C93439;
+  --uikit-color-red-8: #AD2934;
+  --uikit-color-red-9: #8F222D;
+  --uikit-color-red-10: #6B1A27;
+  --uikit-color-orange-1: #FFEEDB;
+  --uikit-color-orange-2: #FFD6B2;
+  --uikit-color-orange-3: #FFBE85;
+  --uikit-color-orange-4: #FFA455;
+  --uikit-color-orange-5: #FF8B2B;
+  --uikit-color-orange-6: #FF7200;
+  --uikit-color-orange-7: #E05D00;
+  --uikit-color-orange-8: #BF4900;
+  --uikit-color-orange-9: #8F370B;
+  --uikit-color-orange-10: #662200;
+  --uikit-color-transparent: rgba(255, 255, 255, 0%);
+
+  // text
+  --text-color-primary: var(--uikit-color-black-2);
+  --text-color-secondary: var(--uikit-color-black-4);
+  --text-color-tertiary: var(--uikit-color-black-5);
+  --text-color-disabled: var(--uikit-color-black-6);
+  --text-color-button: var(--uikit-color-white-1);
+  --text-color-button-disabled: var(--uikit-color-white-1);
+  --text-color-link: var(--uikit-color-theme-6);
+  --text-color-link-hover: var(--uikit-color-theme-5);
+  --text-color-link-active: var(--uikit-color-theme-7);
+  --text-color-link-disabled: var(--uikit-color-theme-2);
+  --text-color-anti-primary: var(--uikit-color-black-2);
+  --text-color-anti-secondary: var(--uikit-color-black-4);
+  --text-color-warning: var(--uikit-color-orange-6);
+  --text-color-success: var(--uikit-color-green-6);
+  --text-color-error: var(--uikit-color-red-6);
+
+  // background
+  --bg-color-topbar: var(--uikit-color-gray-1);
+  --bg-color-operate: var(--uikit-color-white-1);
+  --bg-color-dialog: var(--uikit-color-white-1);
+  --bg-color-dialog-module: var(--uikit-color-gray-2);
+  --bg-color-entrycard: var(--uikit-color-gray-2);
+  --bg-color-function: var(--uikit-color-gray-2);
+  --bg-color-bottombar: var(--uikit-color-white-1);
+  --bg-color-input: var(--uikit-color-gray-2);
+  --bg-color-bubble-reciprocal: var(--uikit-color-gray-2);
+  --bg-color-bubble-own: var(--uikit-color-theme-2);
+  --bg-color-default: var(--uikit-color-gray-2);
+  --bg-color-tag-mask: var(--uikit-color-white-4);
+  --bg-color-element-mask: var(--uikit-color-black-6);
+  --bg-color-mask: var(--uikit-color-black-4);
+  --bg-color-mask-disappeared: var(--uikit-color-white-7);
+  --bg-color-mask-begin: var(--uikit-color-white-1);
+
+  // border
+  --stroke-color-primary: var(--uikit-color-gray-3);
+  --stroke-color-secondary: var(--uikit-color-gray-2);
+  --stroke-color-module: var(--uikit-color-gray-3);
+
+  // shadow
+  --shadow-color: var(--uikit-color-black-8);
+
+  // status
+  --list-color-default: var(--uikit-color-white-1);
+  --list-color-hover: var(--uikit-color-gray-1);
+  --list-color-focused: var(--uikit-color-theme-1);
+
+  // button
+  --button-color-primary-default: var(--uikit-color-theme-6);
+  --button-color-primary-hover: var(--uikit-color-theme-5);
+  --button-color-primary-active: var(--uikit-color-theme-7);
+  --button-color-primary-disabled: var(--uikit-color-theme-2);
+  --button-color-secondary-default: var(--uikit-color-gray-2);
+  --button-color-secondary-hover: var(--uikit-color-gray-1);
+  --button-color-secondary-active: var(--uikit-color-gray-3);
+  --button-color-secondary-disabled: var(--uikit-color-gray-1);
+  --button-color-accept: var(--uikit-color-green-6);
+  --button-color-hangup: var(--uikit-color-red-6);
+  --button-color-on: var(--uikit-color-white-1);
+  --button-color-off: var(--uikit-color-black-5);
+
+  // dropdown
+  --dropdown-color-default: var(--uikit-color-white-1);
+  --dropdown-color-hover: var(--uikit-color-gray-1);
+  --dropdown-color-active: var(--uikit-color-theme-2);
+
+  // scroll-bar
+  --scroll-bar-color-default: var(--uikit-color-black-7);
+  --scroll-bar-color-hover: var(--uikit-color-black-6);
+
+  // floating
+  --floating-color-default: var(--uikit-color-white-1);
+  --floating-color-operate: var(--uikit-color-gray-2);
+
+  // checkbox
+  --checkbox-color-selected: var(--uikit-color-theme-6);
+
+  // toast
+  --toast-color-warning: var(--uikit-color-orange-1);
+  --toast-color-success: var(--uikit-color-green-1);
+  --toast-color-error: var(--uikit-color-red-1);
+  --toast-color-default: var(--uikit-color-theme-1);
+
+  // switch
+  --switch-color-off: var(--uikit-color-gray-4);
+  --switch-color-on: var(--uikit-color-theme-6);
+  --switch-color-button: var(--uikit-color-white-1);
+
+  // slider
+  --slider-color-filled: var(--uikit-color-theme-6);
+  --slider-color-empty: var(--uikit-color-gray-3);
+  --slider-color-button: var(--uikit-color-white-1);
+
+  // tab
+  --tab-color-selected: var(--uikit-color-theme-2);
+  --tab-color-unselected: var(--uikit-color-gray-2);
+  --tab-color-option: var(--uikit-color-gray-3);
+
+  // todo-tag
+}

package/src/providers/UIKitProvider/styles/variables.scss

@@ -0,0 +1,3 @@
+
+@import './themes/dark';
+@import './themes/light';

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+// / <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,66 @@
+import { extname, relative, resolve } from 'path';
+import { fileURLToPath } from 'node:url';
+import { glob } from 'glob';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import vue from '@vitejs/plugin-vue';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+import { peerDependencies } from './package.json';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, '/src'),
+    },
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: [
+        ...Object.keys(peerDependencies),
+      ],
+      input: getInputEntries(),
+      output: {
+        assetFileNames: 'styles/index[extname]',
+        entryFileNames: '[name].js',
+      },
+    },
+  },
+  plugins: [
+    vue(),
+    dts({
+      include: ['src/**/*.ts', 'src/**/*.vue'],
+    }),
+    viteStaticCopy({
+      targets: [
+        {
+          src: './src/providers/UIKitProvider/styles',
+          dest: 'styles',
+        },
+      ],
+    }),
+  ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+      },
+    },
+  },
+});
+
+function getInputEntries() {
+  const inputEntries = Object.fromEntries(
+    glob.sync('src/**/*.{ts,vue}', {}).map(file => [
+      relative(
+        'src',
+        file.slice(0, file.length - extname(file).length),
+      ),
+      fileURLToPath(new URL(file, import.meta.url)),
+    ]),
+  );
+  return inputEntries;
+}