@semi-kit/theme 1.2.15 → 1.2.19

package/lib/base.css

@@ -0,0 +1,16 @@
+:root {
+  --padding: 12px;
+  --margin: 12px;
+  --border-radius-small: 4px;
+  --border-radius-default: 6px;
+  --border-radius-large: 8px;
+  --primary-color: #0052d9;
+  --info-color: #909399;
+  --error-color: #f56c6c;
+  --success-color: #67c23a;
+  --warning-color: #e6a23c;
+  --placeholder-color: #f3f3f3;
+  --placeholder-color-dark: #18181c;
+  --duration: 0.2s;
+}
+

package/lib/base.less

@@ -0,0 +1,120 @@
+html,
+body,
+#app,
+#base-layout,
+.n-config-provider {
+  height: 100%;
+  width: 100%;
+}
+
+html,
+body,
+#app {
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+  color: unset;
+}
+
+// -------------------------------------------------------------------------------------------- > Router View Transition
+
+// Zoom Out
+.zoom-out-enter-active,
+.zoom-out-leave-active {
+  transition:
+    opacity 0.1s ease-in-out,
+    transform 0.15s ease-out;
+}
+.zoom-out-enter-from,
+.zoom-out-leave-to {
+  opacity: 0;
+  transform: scale(0);
+}
+
+// Zoom Fade
+.zoom-fade-enter-active,
+.zoom-fade-leave-active {
+  transition:
+    transform 0.2s,
+    opacity 0.3s ease-out;
+}
+.zoom-fade-enter-from {
+  opacity: 0;
+  transform: scale(0.92);
+}
+.zoom-fade-leave-to {
+  opacity: 0;
+  transform: scale(1.06);
+}
+
+// Fade Scale
+.fade-scale-leave-active,
+.fade-scale-enter-active {
+  transition: all 0.28s;
+}
+.fade-scale-enter-from {
+  opacity: 0;
+  transform: scale(1.2);
+}
+.fade-scale-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+// Fade Slide
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+  transition: all var(--duration);
+}
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+// Fade Bottom
+.fade-bottom-enter-active,
+.fade-bottom-leave-active {
+  transition:
+    opacity 0.25s,
+    transform 0.3s;
+}
+.fade-bottom-enter-from {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+.fade-bottom-leave-to {
+  opacity: 0;
+  transform: translateY(10%);
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  cursor: pointer;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #bfbfbf;
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #999999;
+}
+
+::-webkit-scrollbar-thumb:active {
+  background-color: #999999;
+}
+

package/lib/hooks/use-app-theme/index.d.mts

@@ -1,6 +1,72 @@
 import * as vue0 from "vue";
-import { GlobalThemeOverrides } from "naive-ui";
 declare const useAppTheme: () => {
-  theme: vue0.ComputedRef<GlobalThemeOverrides>;
+  theme: vue0.ComputedRef<{
+    common: {
+      borderRadiusSmall: string;
+      scrollbarWidth: string;
+      scrollbarHeight: string;
+      scrollbarBorderRadius: string;
+    };
+    DataTable: {
+      thColor: string;
+    };
+    Card: {
+      paddingSmall: string;
+      paddingMedium: string;
+      paddingLarge: string;
+      paddingHuge: string;
+    };
+    Dialog: {
+      padding: string;
+      closeMargin: string;
+      contentMargin: string;
+    };
+    Drawer: {
+      bodyPadding: string;
+      footerPadding: string;
+    };
+  } & {
+    common: {
+      infoColor: string;
+      infoColorHover: string;
+      infoColorPressed: string;
+      infoColorSuppl: string;
+      successColor: string;
+      successColorHover: string;
+      successColorPressed: string;
+      successColorSuppl: string;
+      warningColor: string;
+      warningColorHover: string;
+      warningColorPressed: string;
+      warningColorSuppl: string;
+      errorColor: string;
+      errorColorHover: string;
+      errorColorPressed: string;
+      errorColorSuppl: string;
+    };
+  } & {
+    common: {
+      primaryColor: string | undefined;
+      primaryColorHover: string;
+      primaryColorPressed: string | undefined;
+      borderRadius: string;
+    };
+    Tag: {
+      borderRadius: string;
+    };
+    Layout: {
+      headerColor: string | undefined;
+    };
+    Menu: {
+      itemColorActive: string | undefined;
+      itemColorActiveCollapsed: string | undefined;
+      itemColorActiveHover: string | undefined;
+      itemColorHover: string;
+      itemTextColorActive: string;
+      itemTextColorActiveHover: string;
+      itemIconColorActive: string;
+      itemIconColorActiveHover: string;
+    };
+  }>;
 };
 export { useAppTheme };

package/lib/hooks/use-app-theme/index.mjs

@@ -1 +1 @@
-import{darkTheme}from"../../themes/dark.mjs";import{lightTheme}from"../../themes/light.mjs";import"../../themes/index.mjs";import{getAppProvider}from"@semi-kit/component";import{computed}from"vue";import{merge}from"es-toolkit/compat";import{usePreferredDark}from"@vueuse/core";const useAppTheme=()=>{let o=computed(()=>usePreferredDark().value);return{theme:computed(()=>{let i=o.value?darkTheme:lightTheme,{primaryColor:a,radius:s}=getAppProvider()?.theme?.value??{};return merge({},i,{common:{primaryColor:a,primaryColorHover:`${a}D9`,primaryColorPressed:a,borderRadius:`${s}px`},Tag:{borderRadius:`${s}px`},Layout:{headerColor:a},Menu:{itemColorActive:a,itemColorActiveCollapsed:a,itemColorActiveHover:a,itemColorHover:`${a}13`,itemTextColorActive:`white`,itemTextColorActiveHover:`white`,itemIconColorActive:`white`,itemIconColorActiveHover:`white`}})})}};export{useAppTheme};
+import{darkTheme}from"../../themes/dark.mjs";import{lightTheme}from"../../themes/light.mjs";import"../../themes/index.mjs";import{merge}from"es-toolkit/compat";import{getAppProvider}from"@semi-kit/component";import{computed}from"vue";import{usePreferredDark}from"@vueuse/core";const useAppTheme=()=>{let o=computed(()=>usePreferredDark().value);return{theme:computed(()=>{let i=o.value?darkTheme:lightTheme,{primaryColor:a,radius:s}=getAppProvider()?.theme?.value??{};return merge({},i,{common:{primaryColor:a,primaryColorHover:`${a}D9`,primaryColorPressed:a,borderRadius:`${s}px`},Tag:{borderRadius:`${s}px`},Layout:{headerColor:a},Menu:{itemColorActive:a,itemColorActiveCollapsed:a,itemColorActiveHover:a,itemColorHover:`${a}13`,itemTextColorActive:`white`,itemTextColorActiveHover:`white`,itemIconColorActive:`white`,itemIconColorActiveHover:`white`}})})}};export{useAppTheme};

package/lib/index.d.mts

@@ -1,5 +1,4 @@
 import { useAppTheme } from "./hooks/use-app-theme/index.mjs";
 import "./hooks/index.mjs";
-import { AppVarsType } from "./vars/type.mjs";
 import { appVars } from "./vars/index.mjs";
-export { type AppVarsType, appVars, useAppTheme };
+export { appVars, useAppTheme };

package/lib/themes/_common.d.mts

@@ -1,3 +1,27 @@
-import { GlobalThemeOverrides } from "naive-ui";
-declare const _commonTheme: GlobalThemeOverrides;
+declare const _commonTheme: {
+  common: {
+    borderRadiusSmall: string;
+    scrollbarWidth: string;
+    scrollbarHeight: string;
+    scrollbarBorderRadius: string;
+  };
+  DataTable: {
+    thColor: string;
+  };
+  Card: {
+    paddingSmall: string;
+    paddingMedium: string;
+    paddingLarge: string;
+    paddingHuge: string;
+  };
+  Dialog: {
+    padding: string;
+    closeMargin: string;
+    contentMargin: string;
+  };
+  Drawer: {
+    bodyPadding: string;
+    footerPadding: string;
+  };
+};
 export { _commonTheme };

package/lib/themes/dark.d.mts

@@ -1,3 +1,46 @@
-import { GlobalThemeOverrides } from "naive-ui";
-declare const darkTheme: GlobalThemeOverrides;
+declare const darkTheme: {
+  common: {
+    borderRadiusSmall: string;
+    scrollbarWidth: string;
+    scrollbarHeight: string;
+    scrollbarBorderRadius: string;
+  };
+  DataTable: {
+    thColor: string;
+  };
+  Card: {
+    paddingSmall: string;
+    paddingMedium: string;
+    paddingLarge: string;
+    paddingHuge: string;
+  };
+  Dialog: {
+    padding: string;
+    closeMargin: string;
+    contentMargin: string;
+  };
+  Drawer: {
+    bodyPadding: string;
+    footerPadding: string;
+  };
+} & {
+  common: {
+    infoColor: string;
+    infoColorHover: string;
+    infoColorPressed: string;
+    infoColorSuppl: string;
+    successColor: string;
+    successColorHover: string;
+    successColorPressed: string;
+    successColorSuppl: string;
+    warningColor: string;
+    warningColorHover: string;
+    warningColorPressed: string;
+    warningColorSuppl: string;
+    errorColor: string;
+    errorColorHover: string;
+    errorColorPressed: string;
+    errorColorSuppl: string;
+  };
+};
 export { darkTheme };

package/lib/themes/light.d.mts

@@ -1,3 +1,46 @@
-import { GlobalThemeOverrides } from "naive-ui";
-declare const lightTheme: GlobalThemeOverrides;
+declare const lightTheme: {
+  common: {
+    borderRadiusSmall: string;
+    scrollbarWidth: string;
+    scrollbarHeight: string;
+    scrollbarBorderRadius: string;
+  };
+  DataTable: {
+    thColor: string;
+  };
+  Card: {
+    paddingSmall: string;
+    paddingMedium: string;
+    paddingLarge: string;
+    paddingHuge: string;
+  };
+  Dialog: {
+    padding: string;
+    closeMargin: string;
+    contentMargin: string;
+  };
+  Drawer: {
+    bodyPadding: string;
+    footerPadding: string;
+  };
+} & {
+  common: {
+    infoColor: string;
+    infoColorHover: string;
+    infoColorPressed: string;
+    infoColorSuppl: string;
+    successColor: string;
+    successColorHover: string;
+    successColorPressed: string;
+    successColorSuppl: string;
+    warningColor: string;
+    warningColorHover: string;
+    warningColorPressed: string;
+    warningColorSuppl: string;
+    errorColor: string;
+    errorColorHover: string;
+    errorColorPressed: string;
+    errorColorSuppl: string;
+  };
+};
 export { lightTheme };

package/lib/vars/index.d.mts

@@ -1,3 +1,18 @@
-import { AppVarsType } from "./type.mjs";
-declare const appVars: AppVarsType;
+declare const appVars: {
+  spacing: number;
+  borderRadiusSmall: number;
+  borderRadiusMiddle: number;
+  borderRadiusLarge: number;
+  placeholderColor: string;
+  placeholderColorDark: string;
+  margin: string;
+  padding: string;
+  scrollbarSize: number;
+  defaultPrimaryColor: string;
+  sidePanelWidth: number;
+  formItemFixedWidth: number;
+  componentWidth: number;
+  componentWidthMiddle: number;
+  componentWidthLarge: number;
+};
 export { appVars };

package/lib/vars/type.d.mts

@@ -1,18 +1 @@
-type AppVarsType = {
-  margin: string;
-  padding: string;
-  placeholderColor: string;
-  placeholderColorDark: string;
-  borderRadiusSmall: number;
-  borderRadiusMiddle: number;
-  borderRadiusLarge: number;
-  scrollbarSize: number;
-  spacing: number;
-  defaultPrimaryColor: string;
-  sidePanelWidth: number;
-  formItemFixedWidth: number;
-  componentWidth: number;
-  componentWidthMiddle: number;
-  componentWidthLarge: number;
-};
-export { AppVarsType };
+export { };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semi-kit/theme",
-  "version": "1.2.15",
+  "version": "1.2.19",
   "description": "Theme and style presets",
   "type": "module",
   "author": "lijiaheng <jahnli@163.com>",
@@ -24,7 +24,9 @@
     "./themes/light": "./lib/themes/light.mjs",
     "./vars": "./lib/vars/index.mjs",
     "./vars/type": "./lib/vars/type.mjs",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./base.css": "./lib/base.css",
+    "./base.less": "./lib/base.less"
   },
   "scripts": {
     "build": "tsdown",