@semi-kit/theme 1.4.14 → 1.4.16

package/lib/base.css

@@ -1,11 +1,11 @@
-:root {
-  --padding: 12px;
-  --margin: 12px;
-  --border-radius-small: 4px;
-  --border-radius-default: 6px;
-  --border-radius-large: 8px;
-  --placeholder-color: #f3f3f3;
-  --placeholder-color-dark: #18181c;
-  --duration: 0.2s;
-}
-
+:root {
+  --padding: 12px;
+  --margin: 12px;
+  --border-radius-small: 4px;
+  --border-radius-default: 6px;
+  --border-radius-large: 8px;
+  --placeholder-color: #f3f3f3;
+  --placeholder-color-dark: #18181c;
+  --duration: 0.2s;
+}
+

package/lib/base.less

@@ -1,120 +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;
-}
-
+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/index.d.mts

@@ -1,2 +1,2 @@
-import { useAppTheme } from "./use-app-theme/index.mjs";
+import { useAppTheme } from "./use-app-theme.mjs";
 export { useAppTheme };

package/lib/hooks/index.mjs

@@ -1 +1 @@
-import{useAppTheme}from"./use-app-theme/index.mjs";export{useAppTheme};
+import{useAppTheme}from"./use-app-theme.mjs";export{useAppTheme};

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

@@ -0,0 +1 @@
+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 fontSizeMap={small:`12px`,middle:void 0,large:`16px`},useAppTheme=()=>{let s=computed(()=>usePreferredDark().value);return{theme:computed(()=>{let a=s.value?darkTheme:lightTheme,{primaryColor:o,radius:c,fontSize:l}=getAppProvider()?.theme?.value??{},u=fontSizeMap[l??`middle`];return merge({},a,{common:{primaryColor:o,primaryColorHover:`${o}D9`,primaryColorPressed:o,borderRadius:`${c}px`,fontSize:u,fontSizeSmall:u,fontSizeMedium:u,fontSizeLarge:u},Tag:{borderRadius:`${c}px`},Layout:{headerColor:o},Form:{labelFontSizeLeftMedium:u,feedbackFontSizeMedium:u},Drawer:{titleFontSize:u},Tabs:{tabFontSizeMedium:u},Menu:{itemColorActive:o,itemColorActiveCollapsed:o,itemColorActiveHover:o,itemColorHover:`${o}13`,itemTextColorActive:`white`,itemTextColorActiveHover:`white`,itemIconColorActive:`white`,itemIconColorActiveHover:`white`}})})}};export{useAppTheme};

package/lib/index.d.mts

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

package/lib/index.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semi-kit/theme",
-  "version": "1.4.14",
+  "version": "1.4.16",
   "description": "Theme and style presets",
   "type": "module",
   "author": "lijiaheng <jahnli@163.com>",
@@ -17,7 +17,7 @@
   "exports": {
     ".": "./lib/index.mjs",
     "./hooks": "./lib/hooks/index.mjs",
-    "./hooks/use-app-theme": "./lib/hooks/use-app-theme/index.mjs",
+    "./hooks/use-app-theme": "./lib/hooks/use-app-theme.mjs",
     "./themes": "./lib/themes/index.mjs",
     "./themes/_common": "./lib/themes/_common.mjs",
     "./themes/dark": "./lib/themes/dark.mjs",

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

@@ -1 +0,0 @@
-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};