fix: fix known problems

packages/@core/shared/design/src/css/global.css

@@ -0,0 +1,125 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  *,
+  ::after,
+  ::before {
+    @apply border-border;
+
+    box-sizing: border-box;
+    border-style: solid;
+    border-width: 0;
+  }
+
+  html {
+    @apply text-foreground bg-background font-sans text-[100%];
+
+    font-variation-settings: normal;
+    line-height: 1.15;
+    text-size-adjust: 100%;
+    font-synthesis-weight: none;
+    scroll-behavior: smooth;
+    text-rendering: optimizelegibility;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  html.invert-mode {
+    @apply invert;
+  }
+
+  html.grayscale-mode {
+    @apply grayscale;
+  }
+
+  #app,
+  body,
+  html {
+    @apply size-full overscroll-none;
+  }
+
+  body {
+    min-height: 100vh;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  a,
+  a:active,
+  a:hover,
+  a:link,
+  a:visited {
+    @apply no-underline;
+  }
+
+  ::view-transition-new(root),
+  ::view-transition-old(root) {
+    @apply animate-none mix-blend-normal;
+  }
+
+  ::view-transition-old(root) {
+    @apply z-[1];
+  }
+
+  ::view-transition-new(root) {
+    @apply z-[2147483646];
+  }
+
+  html.dark::view-transition-old(root) {
+    @apply z-[2147483646];
+  }
+
+  html.dark::view-transition-new(root) {
+    @apply z-[1];
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    @apply opacity-100;
+  }
+
+  input:-webkit-autofill {
+    @apply border-none;
+
+    box-shadow: 0 0 0 1000px transparent inset;
+  }
+
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    @apply m-0 appearance-none;
+  }
+}
+
+@layer components {
+  .flex-center {
+    @apply flex items-center justify-center;
+  }
+
+  .flex-col-center {
+    @apply flex flex-col items-center justify-center;
+  }
+
+  .outline-box {
+    @apply outline-border relative cursor-pointer rounded-md p-1 outline outline-1;
+  }
+
+  .outline-box::after {
+    @apply absolute left-1/2 top-1/2 z-20 h-0 w-[1px] rounded-sm opacity-0 outline outline-2 outline-transparent transition-all duration-300 content-[""];
+  }
+
+  .outline-box.outline-box-active {
+    @apply outline-primary outline outline-2;
+  }
+
+  .outline-box.outline-box-active::after {
+    display: none;
+  }
+
+  .outline-box:not(.outline-box-active):hover::after {
+    @apply outline-primary left-0 top-0 h-full w-full p-1 opacity-100;
+  }
+
+  .card-box {
+    @apply bg-card text-card-foreground border-border rounded-xl border shadow;
+  }
+}

packages/@core/shared/design/src/css/nprogress.css

@@ -1,26 +1,16 @@
 /* Make clicks pass-through */
 #nprogress {
-  pointer-events: none;
+  @apply pointer-events-none;
 }
 
 #nprogress .bar {
-  @apply bg-primary;
-
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1031;
-  width: 100%;
-  height: 2px;
+  @apply bg-primary fixed left-0 top-0 z-[1031] h-[2px] w-full;
 }
 
 /* Fancy blur effect */
 #nprogress .peg {
-  position: absolute;
-  right: 0;
-  display: block;
-  width: 100px;
-  height: 100%;
+  @apply absolute right-0 block h-full w-[100px];
+
   box-shadow:
     0 0 10px hsl(var(--primary)),
     0 0 5px hsl(var(--primary));
@@ -30,32 +20,22 @@
 
 /* Remove these to get rid of the spinner */
 #nprogress .spinner {
-  position: fixed;
-  top: 15px;
-  right: 15px;
-  z-index: 1031;
-  display: block;
+  @apply fixed right-4 top-4 z-[1031] block;
 }
 
 #nprogress .spinner-icon {
-  box-sizing: border-box;
-  width: 18px;
-  height: 18px;
-  border: solid 2px transparent;
-  border-top-color: hsl(var(--primary));
-  border-left-color: hsl(var(--primary));
-  border-radius: 50%;
+  @apply border-t-primary border-l-primary size-4 rounded-full border-[2px] border-solid border-transparent;
+
   animation: nprogress-spinner 400ms linear infinite;
 }
 
 .nprogress-custom-parent {
-  position: relative;
-  overflow: hidden;
+  @apply relative overflow-hidden;
 }
 
 .nprogress-custom-parent #nprogress .spinner,
 .nprogress-custom-parent #nprogress .bar {
-  position: absolute;
+  @apply absolute;
 }
 
 @keyframes nprogress-spinner {

packages/@core/shared/design/src/css/tailwind.css

@@ -1,43 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  html {
-    @apply font-sans;
-  }
-}
-
-@layer components {
-  .flex-center {
-    @apply flex items-center justify-center;
-  }
-
-  .flex-col-center {
-    @apply flex flex-col items-center justify-center;
-  }
-
-  .outline-box {
-    @apply outline-border relative cursor-pointer rounded-md p-1 outline outline-1;
-  }
-
-  .outline-box::after {
-    @apply absolute left-1/2 top-1/2 z-20 h-0 w-[1px] rounded-sm opacity-0 outline outline-2 outline-transparent transition-all duration-300 content-[""];
-  }
-
-  .outline-box.outline-box-active {
-    @apply outline-primary outline outline-2;
-  }
-
-  .outline-box.outline-box-active::after {
-    display: none;
-  }
-
-  .outline-box:not(.outline-box-active):hover::after {
-    @apply outline-primary left-0 top-0 h-full w-full p-1 opacity-100;
-  }
-
-  .card-box {
-    @apply bg-card text-card-foreground border-border rounded-xl border shadow;
-  }
-}

packages/@core/shared/design/src/design-tokens/dark/index.css

@@ -87,6 +87,7 @@
 
   --sidebar: 222.34deg 10.43% 12.27%;
   --sidebar-deep: 220deg 13.06% 9%;
+  --menu: var(--sidebar);
 
   color-scheme: dark;
 }

packages/@core/shared/design/src/design-tokens/default/index.css

@@ -90,6 +90,7 @@
   /* menu */
   --sidebar: 0 0% 100%;
   --sidebar-deep: 210 11.11% 96.47%;
+  --menu: var(--sidebar);
 
   accent-color: var(--primary);
   color-scheme: light;

packages/@core/shared/design/src/index.ts

@@ -1,5 +1,5 @@
 import './scss/index.scss';
-import './css/tailwind.css';
+import './css/global.css';
 import './css/nprogress.css';
 import './design-tokens';
 

packages/@core/shared/design/src/scss/base.scss

@@ -1,90 +0,0 @@
-#app,
-body,
-html {
-  width: 100%;
-  height: 100%;
-  overscroll-behavior: none;
-}
-
-*,
-::after,
-::before {
-  @apply border-border;
-
-  box-sizing: border-box;
-  border-style: solid;
-  border-width: 0;
-}
-
-html.invert-mode {
-  @apply invert;
-}
-
-html.grayscale-mode {
-  @apply grayscale;
-}
-
-html {
-  @apply text-foreground bg-background;
-
-  font-size: 100%;
-  font-variation-settings: normal;
-  line-height: 1.15;
-  text-size-adjust: 100%;
-  font-synthesis-weight: none;
-  scroll-behavior: smooth;
-  text-rendering: optimizelegibility;
-  -webkit-tap-highlight-color: transparent;
-}
-
-body {
-  min-height: 100vh;
-}
-
-a,
-a:active,
-a:hover,
-a:link,
-a:visited {
-  /* color: inherit; */
-  text-decoration: none;
-}
-
-::view-transition-new(root),
-::view-transition-old(root) {
-  mix-blend-mode: normal;
-  animation: none;
-}
-
-::view-transition-old(root) {
-  z-index: 1;
-}
-
-::view-transition-new(root) {
-  z-index: 2147483646;
-}
-
-html.dark::view-transition-old(root) {
-  z-index: 2147483646;
-}
-
-html.dark::view-transition-new(root) {
-  z-index: 1;
-}
-
-input::placeholder,
-textarea::placeholder {
-  /* color: hsl(var(--color-input-placeholder)) !important; */
-  opacity: 1;
-}
-
-input:-webkit-autofill {
-  border: none;
-  box-shadow: 0 0 0 1000px transparent inset;
-}
-
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
-  margin: 0;
-  appearance: none;
-}

packages/@core/shared/design/src/scss/index.scss

@@ -1,4 +1,3 @@
 /** css 样式重置 */
 @import 'modern-normalize/modern-normalize.css';
-@import './base';
 @import './transition';