@dt-frames/ui 2.0.24 → 4.0.1

package/dist/es/layout/styles/css/animation.css

@@ -0,0 +1,299 @@
+.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);
+}
+
+.outline-box {
+    border-radius: calc(var(--radius) - 2px);
+    cursor: pointer;
+    position: relative;
+    outline-color: hsl(var(--border));
+    outline-style: solid;
+    outline-width: 1px;
+}
+
+.outline-box::after {
+    border-radius: calc(var(--radius) - 4px);
+    height: 0;
+    left: 50%;
+    opacity: 0;
+    outline-color: transparent;
+    outline-style: solid;
+    outline-width: 2px;
+    position: absolute;
+    top: 50%;
+    transition-duration: .3s;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(.4,0,.2,1);
+    width: 1px;
+    z-index: 20;
+    animation-duration: .3s;
+    content: '';
+}
+
+.outline-box.outline-box-active {
+    outline-color: hsl(var(--primary));
+    outline-style: solid;
+    outline-width: 2px;
+}
+
+.outline-box.outline-box-active::after {
+    display: none;
+}
+
+.outline-box:not(.outline-box-active):hover::after {
+    outline-color: hsl(var(--primary));
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    opacity: 1;
+    padding: .25rem;
+}
+
+.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/dist/es/layout/styles/css/dark.css

@@ -0,0 +1,232 @@
+.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%;
+
+    --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%;
+
+    --sidebar: 222.34deg 10.43% 12.27%;
+    --sidebar-deep: 220deg 13.06% 9%;
+    --menu: var(--sidebar);
+    
+    --border: 240 3.7% 22%;
+
+    --header: 222.34deg 10.43% 12.27%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
+    --popover: 0 0% 14.2%;
+    --popover-foreground: 210 40% 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%;
+
+    /* 遮罩颜色 */
+    --overlay: 0deg 0% 0% / 40%;
+    --overlay-content: 0deg 0% 0% / 40%;
+
+    color-scheme: dark;
+}
+
+.dark[data-theme='violet'], [data-theme='violet'] .dark {
+    --accent: 215 27.9% 16.9%;
+    --accent-foreground: 210 20% 98%;
+    --background: 224 71.4% 4.1%;
+    --background-deep: var(--background);
+    --border: 215 27.9% 16.9%;
+    --foreground: 210 20% 98%;
+    --header: 224 71.4% 4.1%;
+    --muted: 215 27.9% 16.9%;
+    --muted-foreground: 217.9 10.6% 64.9%;
+    --sidebar: 224 71.4% 4.1%;
+    --sidebar-deep: 224 71.4% 4.1%;
+}
+
+.dark[data-theme='pink'], [data-theme='pink'] .dark {
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 0 0% 98%;
+    --background: 20 14.3% 4.1%;
+    --background-deep: var(--background);
+    --border: 240 3.7% 15.9%;
+    --foreground: 0 0% 95%;
+    --header: 20 14.3% 4.1%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 240 5% 64.9%;
+    --sidebar: 20 14.3% 4.1%;
+    --sidebar-deep: 20 14.3% 4.1%;
+}
+
+.dark[data-theme='rose'], [data-theme='rose'] .dark {
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --background: 0 0% 3.9%;
+    --background-deep: var(--background);
+    --border: 0 0% 14.9%;
+    --foreground: 0 0% 98%;
+    --header: 0 0% 3.9%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --sidebar: 0 0% 3.9%;
+    --sidebar-deep: 0 0% 3.9%;
+}
+
+.dark[data-theme='sky-blue'], [data-theme='sky-blue'] .dark {
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --background: 222.2 84% 4.9%;
+    --background-deep: var(--background);
+    --border: 217.2 32.6% 17.5%;
+    --foreground: 210 40% 98%;
+    --header: 222.2 84% 4.9%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --sidebar: 222.2 84% 4.9%;
+    --sidebar-deep: 222.2 84% 4.9%;
+}
+
+.dark[data-theme='deep-blue'], [data-theme='deep-blue'] .dark {
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --background: 222.2 84% 4.9%;
+    --background-deep: var(--background);
+    --border: 217.2 32.6% 17.5%;
+    --foreground: 210 40% 98%;
+    --header: 222.2 84% 4.9%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --sidebar: 222.2 84% 4.9%;
+    --sidebar-deep: 222.2 84% 4.9%;
+}
+
+.dark[data-theme='green'], [data-theme='green'] .dark {
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 0 0% 98%;
+    --background: 20 14.3% 4.1%;
+    --background-deep: var(--background);
+    --border: 240 3.7% 15.9%;
+    --foreground: 0 0% 95%;
+    --header: 20 14.3% 4.1%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 240 5% 64.9%;
+    --sidebar: 20 14.3% 4.1%;
+    --sidebar-deep: 20 14.3% 4.1%;
+}
+
+.dark[data-theme='deep-green'], [data-theme='deep-green'] .dark {
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 0 0% 98%;
+    --background: 20 14.3% 4.1%;
+    --background-deep: var(--background);
+    --border: 240 3.7% 15.9%;
+    --foreground: 0 0% 95%;
+    --header: 20 14.3% 4.1%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 240 5% 64.9%;
+    --sidebar: 20 14.3% 4.1%;
+    --sidebar-deep: 20 14.3% 4.1%;
+}
+
+.dark[data-theme='orange'], [data-theme='orange'] .dark {
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --background: 20 14.3% 4.1%;
+    --background-deep: var(--background);
+    --border: 12 6.5% 15.1%;
+    --foreground: 60 9.1% 97.8%;
+    --header: 20 14.3% 4.1%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --sidebar: 20 14.3% 4.1%;
+    --sidebar-deep: 20 14.3% 4.1%;
+}
+
+.dark[data-theme='yellow'], [data-theme='yellow'] .dark {
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --background: 20 14.3% 4.1%;
+    --background-deep: var(--background);
+    --border: 12 6.5% 15.1%;
+    --foreground: 60 9.1% 97.8%;
+    --header: 20 14.3% 4.1%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --sidebar: 20 14.3% 4.1%;
+    --sidebar-deep: 20 14.3% 4.1%;
+}
+
+.dark[data-theme='zinc'], [data-theme='zinc'] .dark {
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --background: 240 10% 3.9%;
+    --background-deep: var(--background);
+    --border: 240 3.7% 15.9%;
+    --foreground: 0 0% 98%;
+    --header: 240 10% 3.9%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --sidebar: 240 10% 3.9%;
+    --sidebar-deep: 240 10% 3.9%;
+}
+
+.dark[data-theme='neutral'], [data-theme='neutral'] .dark {
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --background: 0 0% 3.9%;
+    --background-deep: var(--background);
+    --border: 0 0% 14.9%;
+    --foreground: 0 0% 98%;
+    --header: 0 0% 3.9%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --sidebar: 0 0% 3.9%;
+    --sidebar-deep: 0 0% 3.9%;
+}
+
+.dark[data-theme='slate'], [data-theme='slate'] .dark {
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --background: 222.2 84% 4.9%;
+    --background-deep: var(--background);
+    --border: 217.2 32.6% 17.5%;
+    --foreground: 210 40% 98%;
+    --header: 222.2 84% 4.9%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --sidebar: 222.2 84% 4.9%;
+    --sidebar-deep: 222.2 84% 4.9%;
+}
+
+.dark[data-theme='gray'], [data-theme='gray'] .dark {
+    --accent: 215 27.9% 16.9%;
+    --accent-foreground: 210 20% 98%;
+    --background: 224 71.4% 4.1%;
+    --background-deep: var(--background);
+    --border: 215 27.9% 16.9%;
+    --foreground: 210 20% 98%;
+    --header: 224 71.4% 4.1%;
+    --muted: 215 27.9% 16.9%;
+    --muted-foreground: 217.9 10.6% 64.9%;
+    --sidebar: 224 71.4% 4.1%;
+    --sidebar-deep: 224 71.4% 4.1%;
+}

package/dist/es/layout/styles/css/default.css

@@ -0,0 +1,174 @@
+:root {
+    --background: 0 0% 100%;
+
+    /* 主体区域背景色 */
+    --background-deep: 216 20.11% 95.47%;
+    --foreground: 210 6% 21%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --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%;
+
+    --sidebar: 0 0% 100%;
+    --sidebar-deep: 0 0% 100%;
+    --menu: var(--sidebar);
+
+    --border: 240 5.9% 90%;
+
+    --header: 0 0% 100%;
+
+    --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%;
+
+    /* 遮罩颜色 */
+    --overlay: 0 0% 0% / 45%;
+    --overlay-content: 0 0% 95% / 45%;
+
+    /* 基本文字大小 */
+    --font-size-base: 16px;
+
+    accent-color: var(--primary);
+    color-scheme: light;
+}
+
+[data-theme='violet'] {
+    --accent: 220 14.3% 95.9%;
+    --accent-foreground: 220.9 39.3% 11%;
+    --border: 220 13% 91%;
+    --foreground: 224 71.4% 4.1%;
+    --muted: 220 14.3% 95.9%;
+    --muted-foreground: 220 8.9% 46.1%;
+}
+
+[data-theme='pink'] {
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --border: 240 5.9% 90%;
+    --foreground: 240 10% 3.9%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+}
+
+[data-theme='rose'] {
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --border: 240 5.9% 90%;
+    --foreground: 240 10% 3.9%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+}
+
+[data-theme='sky-blue'] {
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --border: 214.3 31.8% 91.4%;
+    --foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+}
+
+[data-theme='deep-blue'] {
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --border: 214.3 31.8% 91.4%;
+    --foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+}
+
+[data-theme='green'] {
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --border: 240 5.9% 90%;
+    --foreground: 240 10% 3.9%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+}
+
+[data-theme='deep-green'] {
+    --foreground: 240 10% 3.9%;
+    --accent: 240 4.8% 95.9%;
+    --border: 240 5.9% 90%;
+    --accent-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+}
+
+[data-theme='orange'] {
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+    --border: 20 5.9% 90%;
+    --foreground: 20 14.3% 4.1%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+}
+
+[data-theme='yellow'] {
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+    --border: 20 5.9% 90%;
+    --foreground: 20 14.3% 4.1%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+}
+
+[data-theme='zinc'] {
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --border: 240 5.9% 90%;
+    --foreground: 240 10% 3.9%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+}
+
+[data-theme='neutral'] {
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --border: 0 0% 89.8%;
+    --foreground: 0 0% 3.9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+}
+
+[data-theme='slate'] {
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --border: 214.3 31.8% 91.4%;
+    --foreground: 222.2 84% 4.9%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+}
+
+[data-theme='gray'] {
+    --accent: 220 14.3% 95.9%;
+    --accent-foreground: 220.9 39.3% 11%;
+    --border: 220 13% 91%;
+    --foreground: 224 71.4% 4.1%;
+    --muted: 220 14.3% 95.9%;
+    --muted-foreground: 220 8.9% 46.1%;
+}