chore: update deps

packages/styles/src/common/entry.scss

@@ -0,0 +1,51 @@
+$max-child: 5;
+
+@for $i from 1 through $max-child {
+  * > .enter-x:nth-child(#{$i}) {
+    transform: translateX(50px);
+  }
+
+  * > .-enter-x:nth-child(#{$i}) {
+    transform: translateX(-50px);
+  }
+
+  * > .enter-x:nth-child(#{$i}),
+  * > .-enter-x:nth-child(#{$i}) {
+    // z-index: 10 - $i;
+    opacity: 0;
+    animation: enter-x-animation 0.3s ease-in-out 0.2s;
+    animation-delay: 0.1s * $i;
+    animation-fill-mode: forwards;
+  }
+
+  * > .enter-y:nth-child(#{$i}) {
+    transform: translateY(50px);
+  }
+
+  * > .-enter-y:nth-child(#{$i}) {
+    transform: translateY(-50px);
+  }
+
+  * > .enter-y:nth-child(#{$i}),
+  * > .-enter-y:nth-child(#{$i}) {
+    // z-index: 10 - $i;
+    opacity: 0;
+    animation: enter-y-animation 0.3s ease-in-out 0.2s;
+    animation-delay: 0.1s * $i;
+    animation-fill-mode: forwards;
+  }
+}
+
+@keyframes enter-x-animation {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes enter-y-animation {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

packages/styles/src/common/nprogress.css

@@ -0,0 +1,79 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  @apply bg-primary;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1031;
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  position: absolute;
+  right: 0;
+  display: block;
+  width: 100px;
+  height: 100%;
+  box-shadow:
+    0 0 10px hsl(var(--color-primary)),
+    0 0 5px hsl(var(--color-primary));
+  opacity: 1;
+  transform: rotate(3deg) translate(0, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  position: fixed;
+  top: 15px;
+  right: 15px;
+  z-index: 1031;
+  display: block;
+}
+
+#nprogress .spinner-icon {
+  box-sizing: border-box;
+  width: 18px;
+  height: 18px;
+  border: solid 2px transparent;
+  border-top-color: hsl(var(--color-primary));
+  border-left-color: hsl(var(--color-primary));
+  border-radius: 50%;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  position: relative;
+  overflow: hidden;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

packages/styles/src/index.scss

@@ -0,0 +1,4 @@
+@import './tokens/light';
+@import './tokens/dark';
+@import './common/nprogress.css';
+// @import './common/entry';

packages/styles/src/index.ts

@@ -1,3 +1,4 @@
+import './index.scss';
 import '@vben-core/design/tailwind';
 
 import '@vben-core/design';

packages/styles/src/tokens/dark.scss

@@ -0,0 +1,6 @@
+:root.dark {
+  /* authentication */
+  --color-authentication: hsl(240deg 11% 2%);
+
+  color-scheme: dark;
+}

packages/styles/src/tokens/light.scss

@@ -0,0 +1,9 @@
+/* https://gavin-yyc.github.io/colorconvert/ */
+:root {
+  --font-geist-sans: 'geist-sans', -apple-system, blinkmacsystemfont, 'Segoe UI',
+    roboto, helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol';
+
+  /* authentication */
+  --color-authentication: hsl(231deg 61% 44%);
+}