@plus-vben5/design 1.0.0-beta.1

package/dist/bem.scss

@@ -0,0 +1,34 @@
+@forward './constants';
+
+@mixin b($block) {
+  $B: $namespace + '-' + $block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin e($name) {
+  @at-root {
+    &#{$element-separator}#{$name} {
+      @content;
+    }
+  }
+}
+
+@mixin m($name) {
+  @at-root {
+    &#{$modifier-separator}#{$name} {
+      @content;
+    }
+  }
+}
+
+// block__element.is-active {}
+@mixin is($state, $prefix: $state-prefix) {
+  @at-root {
+    &.#{$prefix}-#{$state} {
+      @content;
+    }
+  }
+}

package/dist/constants.scss

@@ -0,0 +1,5 @@
+$namespace: 'vben' !default;
+$common-separator: '-' !default;
+$element-separator: '__' !default;
+$modifier-separator: '--' !default;
+$state-prefix: 'is' !default;

package/dist/design.css

@@ -0,0 +1 @@
+:root{--popup-z-index: 2000;--font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--background: 0 0% 100%;--background-deep: 216 20.11% 95.47%;--foreground: 210 6% 21%;--card: 0 0% 100%;--card-foreground: 222.2 84% 4.9%;--popover: 0 0% 100%;--popover-foreground: 222.2 84% 4.9%;--muted: 240 4.8% 95.9%;--muted-foreground: 240 3.8% 46.1%;--primary: 212 100% 45%;--primary-foreground: 0 0% 98%;--destructive: 359.33 100% 65.1%;--destructive-foreground: 0 0% 98%;--info: 240, 5%, 96%;--info-foreground: 220, 4%, 58%;--success: 144 57% 58%;--success-foreground: 0 0% 98%;--warning: 42 84% 61%;--warning-foreground: 0 0% 98%;--secondary: 240 5% 96%;--secondary-foreground: 240 6% 10%;--accent: 240 5% 96%;--accent-dark: 216 14% 93%;--accent-darker: 216 11% 91%;--accent-lighter: 240 0% 98%;--accent-hover: 200deg 10% 90%;--accent-foreground: 240 6% 10%;--heavy: 192deg 9.43% 89.61%;--heavy-foreground: var(--accent-foreground);--border: 240 5.9% 90%;--input: 240deg 5.88% 90%;--input-placeholder: 217 10.6% 65%;--input-background: 0 0% 100%;--ring: 222.2 84% 4.9%;--radius: .5rem;--overlay: 0 0% 0% / 45%;--overlay-content: 0 0% 95% / 45%;--font-size-base: 16px;--menu-font-size: calc(var(--font-size-base) * .875);--sidebar: 0 0% 100%;--sidebar-deep: 0 0% 100%;--menu: var(--sidebar);--header: 0 0% 100%;accent-color:var(--primary);color-scheme:light}[data-theme=violet]{--foreground: 224 71.4% 4.1%;--card: 0 0% 100%;--card-foreground: 224 71.4% 4.1%;--popover: 0 0% 100%;--popover-foreground: 224 71.4% 4.1%;--primary-foreground: 210 20% 98%;--secondary: 220 14.3% 95.9%;--secondary-foreground: 220.9 39.3% 11%;--muted: 220 14.3% 95.9%;--muted-foreground: 220 8.9% 46.1%;--accent: 220 14.3% 95.9%;--accent-foreground: 220.9 39.3% 11%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 210 20% 98%;--border: 220 13% 91%;--input: 220 13% 91%;--ring: 262.1 83.3% 57.8%}[data-theme=pink],[data-theme=rose]{--foreground: 240 10% 3.9%;--card: 0 0% 100%;--card-foreground: 240 10% 3.9%;--popover: 0 0% 100%;--popover-foreground: 240 10% 3.9%;--primary-foreground: 355.7 100% 97.3%;--secondary: 240 4.8% 95.9%;--secondary-foreground: 240 5.9% 10%;--muted: 240 4.8% 95.9%;--muted-foreground: 240 3.8% 46.1%;--accent: 240 4.8% 95.9%;--accent-foreground: 240 5.9% 10%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 0 0% 98%;--border: 240 5.9% 90%;--input: 240 5.9% 90%;--ring: 346.8 77.2% 49.8%}[data-theme=sky-blue],[data-theme=deep-blue]{--foreground: 222.2 84% 4.9%;--card: 0 0% 100%;--card-foreground: 222.2 84% 4.9%;--popover: 0 0% 100%;--popover-foreground: 222.2 84% 4.9%;--primary-foreground: 210 40% 98%;--secondary: 210 40% 96.1%;--secondary-foreground: 222.2 47.4% 11.2%;--muted: 210 40% 96.1%;--muted-foreground: 215.4 16.3% 46.9%;--accent: 210 40% 96.1%;--accent-foreground: 222.2 47.4% 11.2%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 210 40% 98%;--border: 214.3 31.8% 91.4%;--input: 214.3 31.8% 91.4%;--ring: 221.2 83.2% 53.3%}[data-theme=green],[data-theme=deep-green]{--foreground: 240 10% 3.9%;--card: 0 0% 100%;--card-foreground: 240 10% 3.9%;--popover: 0 0% 100%;--popover-foreground: 240 10% 3.9%;--primary-foreground: 355.7 100% 97.3%;--secondary: 240 4.8% 95.9%;--secondary-foreground: 240 5.9% 10%;--muted: 240 4.8% 95.9%;--muted-foreground: 240 3.8% 46.1%;--accent: 240 4.8% 95.9%;--accent-foreground: 240 5.9% 10%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 0 0% 98%;--border: 240 5.9% 90%;--input: 240 5.9% 90%;--ring: 142.1 76.2% 36.3%}[data-theme=orange]{--foreground: 20 14.3% 4.1%;--card: 0 0% 100%;--card-foreground: 20 14.3% 4.1%;--popover: 0 0% 100%;--popover-foreground: 20 14.3% 4.1%;--primary-foreground: 60 9.1% 97.8%;--secondary: 60 4.8% 95.9%;--secondary-foreground: 24 9.8% 10%;--muted: 60 4.8% 95.9%;--muted-foreground: 25 5.3% 44.7%;--accent: 60 4.8% 95.9%;--accent-foreground: 24 9.8% 10%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 60 9.1% 97.8%;--border: 20 5.9% 90%;--input: 20 5.9% 90%;--ring: 24.6 95% 53.1%}[data-theme=yellow]{--foreground: 20 14.3% 4.1%;--card: 0 0% 100%;--card-foreground: 20 14.3% 4.1%;--popover: 0 0% 100%;--popover-foreground: 20 14.3% 4.1%;--primary-foreground: 26 83.3% 14.1%;--secondary: 60 4.8% 95.9%;--secondary-foreground: 24 9.8% 10%;--muted: 60 4.8% 95.9%;--muted-foreground: 25 5.3% 44.7%;--accent: 60 4.8% 95.9%;--accent-foreground: 24 9.8% 10%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 60 9.1% 97.8%;--border: 20 5.9% 90%;--input: 20 5.9% 90%;--ring: 20 14.3% 4.1%}[data-theme=zinc]{--foreground: 240 10% 3.9%;--card: 0 0% 100%;--card-foreground: 240 10% 3.9%;--popover: 0 0% 100%;--popover-foreground: 240 10% 3.9%;--primary-foreground: 0 0% 98%;--secondary: 240 4.8% 95.9%;--secondary-foreground: 240 5.9% 10%;--muted: 240 4.8% 95.9%;--muted-foreground: 240 3.8% 46.1%;--accent: 240 4.8% 95.9%;--accent-foreground: 240 5.9% 10%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 0 0% 98%;--border: 240 5.9% 90%;--input: 240 5.9% 90%;--ring: 240 5.9% 10%}[data-theme=neutral]{--foreground: 0 0% 3.9%;--card: 0 0% 100%;--card-foreground: 0 0% 3.9%;--popover: 0 0% 100%;--popover-foreground: 0 0% 3.9%;--primary-foreground: 0 0% 98%;--secondary: 0 0% 96.1%;--secondary-foreground: 0 0% 9%;--muted: 0 0% 96.1%;--muted-foreground: 0 0% 45.1%;--accent: 0 0% 96.1%;--accent-foreground: 0 0% 9%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 0 0% 98%;--border: 0 0% 89.8%;--input: 0 0% 89.8%;--ring: 0 0% 3.9%}[data-theme=slate]{--foreground: 222.2 84% 4.9%;--card: 0 0% 100%;--card-foreground: 222.2 84% 4.9%;--popover: 0 0% 100%;--popover-foreground: 222.2 84% 4.9%;--primary-foreground: 210 40% 98%;--secondary: 210 40% 96.1%;--secondary-foreground: 222.2 47.4% 11.2%;--muted: 210 40% 96.1%;--muted-foreground: 215.4 16.3% 46.9%;--accent: 210 40% 96.1%;--accent-foreground: 222.2 47.4% 11.2%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 210 40% 98%;--border: 214.3 31.8% 91.4%;--input: 214.3 31.8% 91.4%;--ring: 222.2 84% 4.9%}[data-theme=gray]{--foreground: 224 71.4% 4.1%;--card: 0 0% 100%;--card-foreground: 224 71.4% 4.1%;--popover: 0 0% 100%;--popover-foreground: 224 71.4% 4.1%;--primary-foreground: 210 20% 98%;--secondary: 220 14.3% 95.9%;--secondary-foreground: 220.9 39.3% 11%;--muted: 220 14.3% 95.9%;--muted-foreground: 220 8.9% 46.1%;--accent: 220 14.3% 95.9%;--accent-foreground: 220.9 39.3% 11%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 210 20% 98%;--border: 220 13% 91%;--input: 220 13% 91%;--ring: 224 71.4% 4.1%}.dark,.dark[data-theme=custom],.dark[data-theme=default]{--background: 222.34deg 10.43% 12.27%;--background-deep: 220deg 13.06% 9%;--foreground: 0 0% 95%;--card: 222.34deg 10.43% 12.27%;--card-foreground: 210 40% 98%;--popover: 0 0% 14.2%;--popover-foreground: 210 40% 98%;--muted: 240 3.7% 15.9%;--muted-foreground: 240 5% 64.9%;--primary-foreground: 0 0% 98%;--destructive: 359.21 68.47% 56.47%;--destructive-foreground: 0 0% 98%;--info: 180, 1.54%, 12.75%;--info-foreground: 220, 4%, 58%;--success: 144 57% 58%;--success-foreground: 0 0% 98%;--warning: 42 84% 61%;--warning-foreground: 0 0% 98%;--secondary: 240 5% 17%;--secondary-foreground: 0 0% 98%;--accent: 216 5% 19%;--accent-dark: 240 0% 22%;--accent-darker: 240 0% 26%;--accent-lighter: 216 5% 12%;--accent-hover: 216 5% 24%;--accent-foreground: 0 0% 98%;--heavy: 216 5% 24%;--heavy-foreground: var(--accent-foreground);--border: 240 3.7% 22%;--input: 0deg 0% 100% / 10%;--input-placeholder: 218deg 11% 65%;--input-background: 0deg 0% 100% / 5%;--ring: 222.2 84% 4.9%;--radius: .5rem;--overlay: 0deg 0% 0% / 40%;--overlay-content: 0deg 0% 0% / 40%;--font-size-base: 16px;--sidebar: 222.34deg 10.43% 12.27%;--sidebar-deep: 220deg 13.06% 9%;--menu: var(--sidebar);--header: 222.34deg 10.43% 12.27%;color-scheme:dark}.dark[data-theme=violet],[data-theme=violet] .dark{--background: 224 71.4% 4.1%;--background-deep: var(--background);--foreground: 210 20% 98%;--card: 224 71.4% 4.1%;--card-foreground: 210 20% 98%;--popover: 224 71.4% 4.1%;--popover-foreground: 210 20% 98%;--primary-foreground: 210 20% 98%;--secondary: 215 27.9% 16.9%;--secondary-foreground: 210 20% 98%;--muted: 215 27.9% 16.9%;--muted-foreground: 217.9 10.6% 64.9%;--accent: 215 27.9% 16.9%;--accent-foreground: 210 20% 98%;--destructive: 359.21 68.47% 56.47%;--destructive-foreground: 210 20% 98%;--border: 215 27.9% 16.9%;--input: 215 27.9% 16.9%;--ring: 263.4 70% 50.4%;--sidebar: 224 71.4% 4.1%;--sidebar-deep: 224 71.4% 4.1%;--header: 224 71.4% 4.1%}.dark[data-theme=pink],[data-theme=pink] .dark{--background: 20 14.3% 4.1%;--background-deep: var(--background);--foreground: 0 0% 95%;--card: 0 0% 9%;--card-foreground: 0 0% 95%;--popover: 0 0% 9%;--popover-foreground: 0 0% 95%;--primary-foreground: 355.7 100% 97.3%;--secondary: 240 3.7% 15.9%;--secondary-foreground: 0 0% 98%;--muted: 0 0% 15%;--muted-foreground: 240 5% 64.9%;--accent: 12 6.5% 15.1%;--accent-foreground: 0 0% 98%;--destructive: 359.21 68.47% 56.47%;--destructive-foreground: 0 85.7% 97.3%;--border: 240 3.7% 15.9%;--input: 240 3.7% 15.9%;--ring: 346.8 77.2% 49.8%;--sidebar: 20 14.3% 4.1%;--sidebar-deep: 20 14.3% 4.1%;--header: 20 14.3% 4.1%}.dark[data-theme=rose],[data-theme=rose] .dark{--background: 0 0% 3.9%;--background-deep: var(--background);--foreground: 0 0% 98%;--card: 0 0% 3.9%;--card-foreground: 0 0% 98%;--popover: 0 0% 3.9%;--popover-foreground: 0 0% 98%;--primary-foreground: 0 85.7% 97.3%;--secondary: 0 0% 14.9%;--secondary-foreground: 0 0% 98%;--muted: 0 0% 14.9%;--muted-foreground: 0 0% 63.9%;--accent: 0 0% 14.9%;--accent-foreground: 0 0% 98%;--destructive: 359.21 68.47% 56.47%;--destructive-foreground: 0 0% 98%;--border: 0 0% 14.9%;--input: 0 0% 14.9%;--ring: 0 72.2% 50.6%;--sidebar: 0 0% 3.9%;--sidebar-deep: 0 0% 3.9%;--header: 0 0% 3.9%}.dark[data-theme=sky-blue],[data-theme=sky-blue] .dark,.dark[data-theme=deep-blue],[data-theme=deep-blue] .dark{--background: 222.2 84% 4.9%;--background-deep: var(--background);--foreground: 210 40% 98%;--card: 222.2 84% 4.9%;--card-foreground: 210 40% 98%;--popover: 222.2 84% 4.9%;--popover-foreground: 210 40% 98%;--primary-foreground: 210 20% 98%;--secondary: 217.2 32.6% 17.5%;--secondary-foreground: 210 40% 98%;--muted: 217.2 32.6% 17.5%;--muted-foreground: 215 20.2% 65.1%;--accent: 217.2 32.6% 17.5%;--accent-foreground: 210 40% 98%;--destructive: 359.21 68.47% 56.47%;--destructive-foreground: 210 40% 98%;--border: 217.2 32.6% 17.5%;--input: 217.2 32.6% 17.5%;--ring: 224.3 76.3% 48%;--sidebar: 222.2 84% 4.9%;--sidebar-deep: 222.2 84% 4.9%;--header: 222.2 84% 4.9%}.dark[data-theme=green],[data-theme=green] .dark,.dark[data-theme=deep-green],[data-theme=deep-green] .dark{--background: 20 14.3% 4.1%;--background-deep: var(--background);--foreground: 0 0% 95%;--card: 24 9.8% 6%;--card-foreground: 0 0% 95%;--popover: 0 0% 9%;--popover-foreground: 0 0% 95%;--primary-foreground: 210 20% 98%;--secondary: 240 3.7% 15.9%;--secondary-foreground: 0 0% 98%;--muted: 0 0% 15%;--muted-foreground: 240 5% 64.9%;--accent: 12 6.5% 15.1%;--accent-foreground: 0 0% 98%;--destructive: 359.21 68.47% 56.47%;--destructive-foreground: 0 85.7% 97.3%;--border: 240 3.7% 15.9%;--input: 240 3.7% 15.9%;--ring: 142.4 71.8% 29.2%;--sidebar: 20 14.3% 4.1%;--sidebar-deep: 20 14.3% 4.1%;--header: 20 14.3% 4.1%}.dark[data-theme=orange],[data-theme=orange] .dark{--background: 20 14.3% 4.1%;--background-deep: var(--background);--foreground: 60 9.1% 97.8%;--card: 20 14.3% 4.1%;--card-foreground: 60 9.1% 97.8%;--popover: 20 14.3% 4.1%;--popover-foreground: 60 9.1% 97.8%;--primary-foreground: 60 9.1% 97.8%;--secondary: 12 6.5% 15.1%;--secondary-foreground: 60 9.1% 97.8%;--muted: 12 6.5% 15.1%;--muted-foreground: 24 5.4% 63.9%;--accent: 12 6.5% 15.1%;--accent-foreground: 60 9.1% 97.8%;--destructive: 0 72.2% 50.6%;--destructive-foreground: 60 9.1% 97.8%;--border: 12 6.5% 15.1%;--input: 12 6.5% 15.1%;--ring: 20.5 90.2% 48.2%;--sidebar: 20 14.3% 4.1%;--sidebar-deep: 20 14.3% 4.1%;--header: 20 14.3% 4.1%}.dark[data-theme=yellow],[data-theme=yellow] .dark{--background: 20 14.3% 4.1%;--background-deep: var(--background);--foreground: 60 9.1% 97.8%;--card: 20 14.3% 4.1%;--card-foreground: 60 9.1% 97.8%;--popover: 20 14.3% 4.1%;--popover-foreground: 60 9.1% 97.8%;--primary-foreground: 26 83.3% 14.1%;--secondary: 12 6.5% 15.1%;--secondary-foreground: 60 9.1% 97.8%;--muted: 12 6.5% 15.1%;--muted-foreground: 24 5.4% 63.9%;--accent: 12 6.5% 15.1%;--accent-foreground: 60 9.1% 97.8%;--destructive: 359.21 68.47% 56.47%;--destructive-foreground: 60 9.1% 97.8%;--border: 12 6.5% 15.1%;--input: 12 6.5% 15.1%;--ring: 35.5 91.7% 32.9%;--sidebar: 20 14.3% 4.1%;--sidebar-deep: 20 14.3% 4.1%;--header: 20 14.3% 4.1%}.dark[data-theme=zinc],[data-theme=zinc] .dark{--background: 240 10% 3.9%;--background-deep: var(--background);--foreground: 0 0% 98%;--card: 240 10% 3.9%;--card-foreground: 0 0% 98%;--popover: 240 10% 3.9%;--popover-foreground: 0 0% 98%;--primary-foreground: 240 5.9% 10%;--secondary: 240 3.7% 15.9%;--secondary-foreground: 0 0% 98%;--muted: 240 3.7% 15.9%;--muted-foreground: 240 5% 64.9%;--accent: 240 3.7% 15.9%;--accent-foreground: 0 0% 98%;--destructive: 359.21 68.47% 56.47%;--destructive-foreground: 0 0% 98%;--border: 240 3.7% 15.9%;--input: 240 3.7% 15.9%;--ring: 240 4.9% 83.9%;--sidebar: 240 10% 3.9%;--sidebar-deep: 240 10% 3.9%;--header: 240 10% 3.9%}.dark[data-theme=neutral],[data-theme=neutral] .dark{--background: 0 0% 3.9%;--background-deep: var(--background);--foreground: 0 0% 98%;--card: 0 0% 3.9%;--card-foreground: 0 0% 98%;--popover: 0 0% 3.9%;--popover-foreground: 0 0% 98%;--primary-foreground: 0 0% 9%;--secondary: 0 0% 14.9%;--secondary-foreground: 0 0% 98%;--muted: 0 0% 14.9%;--muted-foreground: 0 0% 63.9%;--accent: 0 0% 14.9%;--accent-foreground: 0 0% 98%;--destructive: 359.21 68.47% 56.47%;--destructive-foreground: 0 0% 98%;--border: 0 0% 14.9%;--input: 0 0% 14.9%;--ring: 0 0% 83.1%;--sidebar: 0 0% 3.9%;--sidebar-deep: 0 0% 3.9%;--header: 0 0% 3.9%}.dark[data-theme=slate],[data-theme=slate] .dark{--background: 222.2 84% 4.9%;--background-deep: var(--background);--foreground: 210 40% 98%;--card: 222.2 84% 4.9%;--card-foreground: 210 40% 98%;--popover: 222.2 84% 4.9%;--popover-foreground: 210 40% 98%;--primary-foreground: 222.2 47.4% 11.2%;--secondary: 217.2 32.6% 17.5%;--secondary-foreground: 210 40% 98%;--muted: 217.2 32.6% 17.5%;--muted-foreground: 215 20.2% 65.1%;--accent: 217.2 32.6% 17.5%;--accent-foreground: 210 40% 98%;--destructive: 359.21 68.47% 56.47%;--destructive-foreground: 210 40% 98%;--border: 217.2 32.6% 17.5%;--input: 217.2 32.6% 17.5%;--ring: 212.7 26.8% 83.9;--sidebar: 222.2 84% 4.9%;--sidebar-deep: 222.2 84% 4.9%;--header: 222.2 84% 4.9%}.dark[data-theme=gray],[data-theme=gray] .dark{--background: 224 71.4% 4.1%;--background-deep: var(--background);--foreground: 210 20% 98%;--card: 224 71.4% 4.1%;--card-foreground: 210 20% 98%;--popover: 224 71.4% 4.1%;--popover-foreground: 210 20% 98%;--primary-foreground: 220.9 39.3% 11%;--secondary: 215 27.9% 16.9%;--secondary-foreground: 210 20% 98%;--muted: 215 27.9% 16.9%;--muted-foreground: 217.9 10.6% 64.9%;--accent: 215 27.9% 16.9%;--accent-foreground: 210 20% 98%;--destructive: 359.21 68.47% 56.47%;--destructive-foreground: 210 20% 98%;--border: 215 27.9% 16.9%;--input: 215 27.9% 16.9%;--ring: 216 12.2% 83.9%;--sidebar: 224 71.4% 4.1%;--sidebar-deep: 224 71.4% 4.1%;--header: 224 71.4% 4.1%}@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;font-size:var(--font-size-base, 16px);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}#app,body,html{@apply size-full;}body{min-height:100vh}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[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{@apply m-0 appearance-none;}html:not([data-platform=macOs]) ::-webkit-scrollbar{@apply h-[10px] w-[10px];}html:not([data-platform=macOs]) ::-webkit-scrollbar-thumb{@apply bg-border rounded-sm border-none;}html:not([data-platform=macOs]) ::-webkit-scrollbar-track{@apply rounded-sm border-none bg-transparent shadow-none;}html:not([data-platform=macOs]) ::-webkit-scrollbar-button{@apply hidden;}}@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;}.vben-link{@apply text-primary hover:text-primary-hover active:text-primary-active cursor-pointer;}.card-box{@apply bg-card text-card-foreground border-border rounded-xl border;}}html.invert-mode{@apply invert;}html.grayscale-mode{@apply grayscale;}.slide-up-enter-active,.slide-up-leave-active{transition:.25s cubic-bezier(.25,.8,.5,1)}.slide-up-move{transition:transform .3s}.slide-up-enter-from,.slide-up-leave-to{opacity:0;transform:translateY(-15px)}.slide-down-enter-active,.slide-down-leave-active{transition:.25s cubic-bezier(.25,.8,.5,1)}.slide-down-move{transition:transform .3s}.slide-down-enter-from,.slide-down-leave-to{opacity:0;transform:translateY(15px)}.slide-left-enter-active,.slide-left-leave-active{transition:.25s cubic-bezier(.25,.8,.5,1)}.slide-left-move{transition:transform .3s}.slide-left-enter-from,.slide-left-leave-to{opacity:0;transform:translate(-15px)}.slide-right-enter-active,.slide-right-leave-active{transition:.25s cubic-bezier(.25,.8,.5,1)}.slide-right-move{transition:transform .3s}.slide-right-enter-from,.slide-right-leave-to{opacity:0;transform:translate(15px)}.fade-transition-enter-active,.fade-transition-leave-active{transition:opacity .2s ease-in-out}.fade-transition-enter-from,.fade-transition-leave-to{opacity:0}.fade-enter-active,.fade-leave-active{transition:opacity .2s ease-in-out}.fade-enter-from,.fade-leave-to{opacity:0}.fade-slide-leave-active,.fade-slide-enter-active{transition:all .3s}.fade-slide-enter-from{opacity:0;transform:translate(-30px)}.fade-slide-leave-to{opacity:0;transform:translate(30px)}.fade-down-enter-active,.fade-down-leave-active{transition:opacity .25s,transform .3s}.fade-down-enter-from{opacity:0;transform:translateY(-10%)}.fade-down-leave-to{opacity:0;transform:translateY(10%)}.fade-scale-leave-active,.fade-scale-enter-active{transition:all .28s}.fade-scale-enter-from{opacity:0;transform:scale(1.2)}.fade-scale-leave-to{opacity:0;transform:scale(.8)}.fade-up-enter-active,.fade-up-leave-active{transition:opacity .2s,transform .25s}.fade-up-enter-from{opacity:0;transform:translateY(10%)}.fade-up-leave-to{opacity:0;transform:translateY(-10%)}@keyframes fade-slide{0%{opacity:0;transform:translate(-30px)}50%{opacity:1}to{opacity:0;transform:translate(30px)}}@keyframes fade{0%{opacity:0}50%{opacity:1}to{opacity:0}}@keyframes fade-up{0%{opacity:0;transform:translateY(10%)}50%{opacity:1}to{opacity:0;transform:translateY(-10%)}}@keyframes fade-down{0%{opacity:0;transform:translateY(-10%)}50%{opacity:1}to{opacity:0;transform:translateY(10%)}}.fade-slow{animation:fade 3s infinite}.fade-slide-slow{animation:fade-slide 3s infinite}.fade-up-slow{animation:fade-up 3s infinite}.fade-down-slow{animation:fade-down 3s infinite}.collapse-transition{transition:.2s height ease-in-out,.2s padding-top ease-in-out,.2s padding-bottom ease-in-out}.collapse-transition-leave-active,.collapse-transition-enter-active{transition:.2s max-height ease-in-out,.2s padding-top ease-in-out,.2s margin-top ease-in-out}#nprogress{@apply pointer-events-none;}#nprogress .bar{@apply bg-primary fixed left-0 top-0 z-[1031] h-[2px] w-full;}#nprogress .peg{@apply absolute right-0 block h-full w-[100px];box-shadow:0 0 10px hsl(var(--primary)),0 0 5px hsl(var(--primary));opacity:1;transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{@apply fixed right-4 top-4 z-[1031] block;}#nprogress .spinner-icon{@apply border-t-primary border-l-primary size-4 rounded-full border-[2px] border-solid border-transparent;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{@apply relative overflow-hidden;}.nprogress-custom-parent #nprogress .spinner,.nprogress-custom-parent #nprogress .bar{@apply absolute;}@keyframes nprogress-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.side-content{animation-duration:.3s;animation-timing-function:cubic-bezier(.16,1,.3,1)}.side-content[data-side=top]{animation-name:slide-up}.side-content[data-side=bottom]{animation-name:slide-down}.side-content[data-side=left]{animation-name:slide-left}.side-content[data-side=right]{animation-name:slide-right}.breadcrumb-transition-enter-active{transition:transform .4s cubic-bezier(.76,0,.24,1),opacity .4s cubic-bezier(.76,0,.24,1)}.breadcrumb-transition-leave-active{display:none}.breadcrumb-transition-enter-from{opacity:0;transform:translate(30px) skew(-30deg)}@keyframes slide-down{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-left{0%{opacity:0;transform:translate(-50px)}to{opacity:1;transform:translate(0)}}@keyframes slide-right{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}@keyframes slide-up{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}.z-popup{z-index:var(--popup-z-index)}@keyframes shrink{0%{transform:scale(1)}50%{transform:scale(.9)}to{transform:scale(1)}}

package/dist/index.mjs

@@ -0,0 +1 @@
+

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@plus-vben5/design",
+  "version": "1.0.0-beta.1",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/@vben-core/base/design"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm vite build",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    "./bem": {
+      "development": "./src/scss-bem/bem.scss",
+      "default": "./dist/bem.scss"
+    },
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/design.css"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "default": "./dist/index.mjs"
+      }
+    }
+  }
+}

package/src/css/global.css

@@ -0,0 +1,161 @@
+@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;
+
+    font-size: var(--font-size-base, 16px);
+    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;
+
+    /* -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale; */
+  }
+
+  #app,
+  body,
+  html {
+    @apply size-full;
+
+    /* scrollbar-gutter: stable; */
+  }
+
+  body {
+    min-height: 100vh;
+
+    /* pointer-events: auto !important; */
+
+    /* overflow: overlay; */
+
+    /* -webkit-font-smoothing: antialiased; */
+
+    /* -moz-osx-font-smoothing: grayscale; */
+  }
+
+  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;
+  }
+
+  /* 只有非mac下才进行调整，mac下使用默认滚动条 */
+  html:not([data-platform='macOs']) {
+    ::-webkit-scrollbar {
+      @apply h-[10px] w-[10px];
+    }
+
+    ::-webkit-scrollbar-thumb {
+      @apply bg-border rounded-sm border-none;
+    }
+
+    ::-webkit-scrollbar-track {
+      @apply rounded-sm border-none bg-transparent shadow-none;
+    }
+
+    ::-webkit-scrollbar-button {
+      @apply hidden;
+    }
+  }
+}
+
+@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;
+  }
+
+  .vben-link {
+    @apply text-primary hover:text-primary-hover active:text-primary-active cursor-pointer;
+  }
+
+  .card-box {
+    @apply bg-card text-card-foreground border-border rounded-xl border;
+  }
+}
+
+html.invert-mode {
+  @apply invert;
+}
+
+html.grayscale-mode {
+  @apply grayscale;
+}

package/src/css/nprogress.css

@@ -0,0 +1,59 @@
+/* Make clicks pass-through */
+#nprogress {
+  @apply pointer-events-none;
+}
+
+#nprogress .bar {
+  @apply bg-primary fixed left-0 top-0 z-[1031] h-[2px] w-full;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  @apply absolute right-0 block h-full w-[100px];
+
+  box-shadow:
+    0 0 10px hsl(var(--primary)),
+    0 0 5px hsl(var(--primary));
+  opacity: 1;
+  transform: rotate(3deg) translate(0, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  @apply fixed right-4 top-4 z-[1031] block;
+}
+
+#nprogress .spinner-icon {
+  @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 {
+  @apply relative overflow-hidden;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  @apply absolute;
+}
+
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/css/transition.css

@@ -0,0 +1,236 @@
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.slide-up-move {
+  transition: transform 0.3s;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(-15px);
+}
+
+.slide-down-enter-active,
+.slide-down-leave-active {
+  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.slide-down-move {
+  transition: transform 0.3s;
+}
+
+.slide-down-enter-from,
+.slide-down-leave-to {
+  opacity: 0;
+  transform: translateY(15px);
+}
+
+.slide-left-enter-active,
+.slide-left-leave-active {
+  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.slide-left-move {
+  transition: transform 0.3s;
+}
+
+.slide-left-enter-from,
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translate(-15px);
+}
+
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: 0.25s cubic-bezier(0.25, 0.8, 0.5, 1);
+}
+
+.slide-right-move {
+  transition: transform 0.3s;
+}
+
+.slide-right-enter-from,
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translate(15px);
+}
+
+.fade-transition-enter-active,
+.fade-transition-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-transition-enter-from,
+.fade-transition-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+  transition: all 0.3s;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translate(-30px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translate(30px);
+}
+
+.fade-down-enter-active,
+.fade-down-leave-active {
+  transition:
+    opacity 0.25s,
+    transform 0.3s;
+}
+
+.fade-down-enter-from {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+
+.fade-down-leave-to {
+  opacity: 0;
+  transform: translateY(10%);
+}
+
+.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-up-enter-active,
+.fade-up-leave-active {
+  transition:
+    opacity 0.2s,
+    transform 0.25s;
+}
+
+.fade-up-enter-from {
+  opacity: 0;
+  transform: translateY(10%);
+}
+
+.fade-up-leave-to {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+
+@keyframes fade-slide {
+  0% {
+    opacity: 0;
+    transform: translate(-30px);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(30px);
+  }
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes fade-up {
+  0% {
+    opacity: 0;
+    transform: translateY(10%);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+}
+
+@keyframes fade-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-10%);
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(10%);
+  }
+}
+
+.fade-slow {
+  animation: fade 3s infinite;
+}
+
+.fade-slide-slow {
+  animation: fade-slide 3s infinite;
+}
+
+.fade-up-slow {
+  animation: fade-up 3s infinite;
+}
+
+.fade-down-slow {
+  animation: fade-down 3s infinite;
+}
+
+.collapse-transition {
+  transition:
+    0.2s height ease-in-out,
+    0.2s padding-top ease-in-out,
+    0.2s padding-bottom ease-in-out;
+}
+
+.collapse-transition-leave-active,
+.collapse-transition-enter-active {
+  transition:
+    0.2s max-height ease-in-out,
+    0.2s padding-top ease-in-out,
+    0.2s margin-top ease-in-out;
+}

package/src/css/ui.css

@@ -0,0 +1,101 @@
+.side-content {
+  animation-duration: 0.3s;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.side-content[data-side='top'] {
+  animation-name: slide-up;
+}
+
+.side-content[data-side='bottom'] {
+  animation-name: slide-down;
+}
+
+.side-content[data-side='left'] {
+  animation-name: slide-left;
+}
+
+.side-content[data-side='right'] {
+  animation-name: slide-right;
+}
+
+.breadcrumb-transition-enter-active {
+  transition:
+    transform 0.4s cubic-bezier(0.76, 0, 0.24, 1),
+    opacity 0.4s cubic-bezier(0.76, 0, 0.24, 1);
+}
+
+.breadcrumb-transition-leave-active {
+  display: none;
+}
+
+.breadcrumb-transition-enter-from {
+  opacity: 0;
+  transform: translateX(30px) skewX(-30deg);
+}
+
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(50px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-left {
+  from {
+    opacity: 0;
+    transform: translateX(-50px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-right {
+  from {
+    opacity: 0;
+    transform: translateX(50px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(-50px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.z-popup {
+  z-index: var(--popup-z-index);
+}
+
+@keyframes shrink {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.9);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}