@admin-core/design 0.2.0 → 0.2.1

package/src/css/ui.css

@@ -0,0 +1,117 @@
+/* UI 组件样式 */
+
+/* ========== 侧边内容动画 ========== */
+.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);
+  }
+}

package/src/css/utilities.css

@@ -0,0 +1,138 @@
+/**
+ * 自定义工具类
+ * 基于设计令牌的颜色工具类
+ * 
+ * 手动定义透明度变体以支持 bg-primary/10 等用法
+ */
+@layer utilities {
+  /* 背景色工具类 - 完整不透明度 */
+  .bg-primary {
+    background-color: hsl(var(--primary));
+  }
+
+  /* 背景色透明度变体 */
+  .bg-primary\/10 {
+    background-color: hsl(var(--primary) / 0.1);
+  }
+
+  .bg-primary\/30 {
+    background-color: hsl(var(--primary) / 0.3);
+  }
+
+  .bg-primary\/50 {
+    background-color: hsl(var(--primary) / 0.5);
+  }
+
+  .bg-primary\/70 {
+    background-color: hsl(var(--primary) / 0.7);
+  }
+
+  .bg-primary\/90 {
+    background-color: hsl(var(--primary) / 0.9);
+  }
+
+  /* 其他背景色 */
+  .bg-secondary {
+    background-color: hsl(var(--secondary));
+  }
+
+  .bg-accent {
+    background-color: hsl(var(--accent));
+  }
+
+  .bg-muted {
+    background-color: hsl(var(--muted));
+  }
+
+  .bg-destructive {
+    background-color: hsl(var(--destructive));
+  }
+
+  .bg-success {
+    background-color: hsl(var(--success));
+  }
+
+  .bg-warning {
+    background-color: hsl(var(--warning));
+  }
+
+  .bg-info {
+    background-color: hsl(var(--info));
+  }
+
+  .bg-card {
+    background-color: hsl(var(--card));
+  }
+
+  .bg-background {
+    background-color: hsl(var(--background));
+  }
+
+  .bg-input-background {
+    background-color: hsl(var(--input-background));
+  }
+
+  .bg-header {
+    background-color: hsl(var(--header));
+  }
+
+  /* 文字颜色工具类 */
+  .text-primary-foreground {
+    color: hsl(var(--primary-foreground));
+  }
+
+  .text-secondary-foreground {
+    color: hsl(var(--secondary-foreground));
+  }
+
+  .text-accent-foreground {
+    color: hsl(var(--accent-foreground));
+  }
+
+  .text-muted-foreground {
+    color: hsl(var(--muted-foreground));
+  }
+
+  .text-destructive-foreground {
+    color: hsl(var(--destructive-foreground));
+  }
+
+  .text-success-foreground {
+    color: hsl(var(--success-foreground));
+  }
+
+  .text-warning-foreground {
+    color: hsl(var(--warning-foreground));
+  }
+
+  .text-info-foreground {
+    color: hsl(var(--info-foreground));
+  }
+
+  .text-card-foreground {
+    color: hsl(var(--card-foreground));
+  }
+
+  .text-foreground {
+    color: hsl(var(--foreground));
+  }
+
+  .text-input-placeholder {
+    color: hsl(var(--input-placeholder));
+  }
+
+  /* 边框颜色工具类 */
+  .border-border {
+    border-color: hsl(var(--border));
+  }
+
+  .border-input {
+    border-color: hsl(var(--input));
+  }
+
+  /* Ring 颜色 */
+  .ring-ring {
+    --tw-ring-color: hsl(var(--ring));
+  }
+}
+

package/src/tokens/dark.css

@@ -0,0 +1,406 @@
+/**
+ * 暗色主题 CSS 变量定义 - 2026流行色系列
+ */
+.dark {
+  --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: 212 100% 50%;
+  --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-foreground: 0 0% 98%;
+  --border: 240 3.7% 22%;
+  --input: 0 0% 100% / 10%;
+  --input-placeholder: 218 11% 65%;
+  --input-background: 0 0% 100% / 5%;
+  --ring: 222.2 84% 4.9%;
+  --radius: 0.5rem;
+  --overlay: 0 0% 0% / 40%;
+  --overlay-content: 0 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='slate'],
+[data-theme='slate'] .dark {
+  --background: 215 25% 10%;
+  --background-deep: 215 30% 8%;
+  --foreground: 215 10% 92%;
+  --card: 215 25% 12%;
+  --card-foreground: 215 10% 92%;
+  --popover: 215 25% 14%;
+  --popover-foreground: 215 10% 92%;
+  --primary: 215 25% 50%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 215 20% 20%;
+  --secondary-foreground: 215 10% 92%;
+  --muted: 215 20% 20%;
+  --muted-foreground: 215 10% 65%;
+  --accent: 215 20% 22%;
+  --accent-foreground: 215 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 215 20% 22%;
+  --input: 215 20% 22%;
+  --ring: 215 25% 50%;
+  --sidebar: 215 25% 10%;
+  --sidebar-deep: 215 30% 8%;
+  --header: 215 25% 10%;
+}
+
+.dark[data-theme='burnished-lilac'],
+[data-theme='burnished-lilac'] .dark {
+  --background: 280 25% 10%;
+  --background-deep: 280 30% 8%;
+  --foreground: 280 10% 92%;
+  --card: 280 25% 12%;
+  --card-foreground: 280 10% 92%;
+  --popover: 280 25% 14%;
+  --popover-foreground: 280 10% 92%;
+  --primary: 280 40% 65%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 280 20% 20%;
+  --secondary-foreground: 280 10% 92%;
+  --muted: 280 20% 20%;
+  --muted-foreground: 280 10% 65%;
+  --accent: 280 20% 22%;
+  --accent-foreground: 280 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 280 20% 22%;
+  --input: 280 20% 22%;
+  --ring: 280 40% 65%;
+  --sidebar: 280 25% 10%;
+  --sidebar-deep: 280 30% 8%;
+  --header: 280 25% 10%;
+}
+
+.dark[data-theme='teaberry'],
+[data-theme='teaberry'] .dark {
+  --background: 345 30% 10%;
+  --background-deep: 345 35% 8%;
+  --foreground: 345 10% 92%;
+  --card: 345 30% 12%;
+  --card-foreground: 345 10% 92%;
+  --popover: 345 30% 14%;
+  --popover-foreground: 345 10% 92%;
+  --primary: 345 75% 60%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 345 25% 20%;
+  --secondary-foreground: 345 10% 92%;
+  --muted: 345 25% 20%;
+  --muted-foreground: 345 10% 65%;
+  --accent: 345 25% 22%;
+  --accent-foreground: 345 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 345 25% 22%;
+  --input: 345 25% 22%;
+  --ring: 345 75% 60%;
+  --sidebar: 345 30% 10%;
+  --sidebar-deep: 345 35% 8%;
+  --header: 345 30% 10%;
+}
+
+.dark[data-theme='amaranth'],
+[data-theme='amaranth'] .dark {
+  --background: 310 30% 10%;
+  --background-deep: 310 35% 8%;
+  --foreground: 310 10% 92%;
+  --card: 310 30% 12%;
+  --card-foreground: 310 10% 92%;
+  --popover: 310 30% 14%;
+  --popover-foreground: 310 10% 92%;
+  --primary: 310 65% 50%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 310 25% 20%;
+  --secondary-foreground: 310 10% 92%;
+  --muted: 310 25% 20%;
+  --muted-foreground: 310 10% 65%;
+  --accent: 310 25% 22%;
+  --accent-foreground: 310 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 310 25% 22%;
+  --input: 310 25% 22%;
+  --ring: 310 65% 50%;
+  --sidebar: 310 30% 10%;
+  --sidebar-deep: 310 35% 8%;
+  --header: 310 30% 10%;
+}
+
+.dark[data-theme='pulse-blue'],
+[data-theme='pulse-blue'] .dark {
+  --background: 200 30% 10%;
+  --background-deep: 200 35% 8%;
+  --foreground: 200 10% 92%;
+  --card: 200 30% 12%;
+  --card-foreground: 200 10% 92%;
+  --popover: 200 30% 14%;
+  --popover-foreground: 200 10% 92%;
+  --primary: 200 85% 55%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 200 25% 20%;
+  --secondary-foreground: 200 10% 92%;
+  --muted: 200 25% 20%;
+  --muted-foreground: 200 10% 65%;
+  --accent: 200 25% 22%;
+  --accent-foreground: 200 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 200 25% 22%;
+  --input: 200 25% 22%;
+  --ring: 200 85% 55%;
+  --sidebar: 200 30% 10%;
+  --sidebar-deep: 200 35% 8%;
+  --header: 200 30% 10%;
+}
+
+.dark[data-theme='deep-teal'],
+[data-theme='deep-teal'] .dark {
+  --background: 180 30% 10%;
+  --background-deep: 180 35% 8%;
+  --foreground: 180 10% 92%;
+  --card: 180 30% 12%;
+  --card-foreground: 180 10% 92%;
+  --popover: 180 30% 14%;
+  --popover-foreground: 180 10% 92%;
+  --primary: 180 70% 40%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 180 25% 20%;
+  --secondary-foreground: 180 10% 92%;
+  --muted: 180 25% 20%;
+  --muted-foreground: 180 10% 65%;
+  --accent: 180 25% 22%;
+  --accent-foreground: 180 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 180 25% 22%;
+  --input: 180 25% 22%;
+  --ring: 180 70% 40%;
+  --sidebar: 180 30% 10%;
+  --sidebar-deep: 180 35% 8%;
+  --header: 180 30% 10%;
+}
+
+.dark[data-theme='mermaid-aqua'],
+[data-theme='mermaid-aqua'] .dark {
+  --background: 185 30% 10%;
+  --background-deep: 185 35% 8%;
+  --foreground: 185 10% 92%;
+  --card: 185 30% 12%;
+  --card-foreground: 185 10% 92%;
+  --popover: 185 30% 14%;
+  --popover-foreground: 185 10% 92%;
+  --primary: 185 75% 60%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 185 25% 20%;
+  --secondary-foreground: 185 10% 92%;
+  --muted: 185 25% 20%;
+  --muted-foreground: 185 10% 65%;
+  --accent: 185 25% 22%;
+  --accent-foreground: 185 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 185 25% 22%;
+  --input: 185 25% 22%;
+  --ring: 185 75% 60%;
+  --sidebar: 185 30% 10%;
+  --sidebar-deep: 185 35% 8%;
+  --header: 185 30% 10%;
+}
+
+.dark[data-theme='pearl-purple'],
+[data-theme='pearl-purple'] .dark {
+  --background: 270 25% 10%;
+  --background-deep: 270 30% 8%;
+  --foreground: 270 10% 92%;
+  --card: 270 25% 12%;
+  --card-foreground: 270 10% 92%;
+  --popover: 270 25% 14%;
+  --popover-foreground: 270 10% 92%;
+  --primary: 270 50% 70%;
+  --primary-foreground: 270 30% 20%;
+  --secondary: 270 20% 20%;
+  --secondary-foreground: 270 10% 92%;
+  --muted: 270 20% 20%;
+  --muted-foreground: 270 10% 65%;
+  --accent: 270 20% 22%;
+  --accent-foreground: 270 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 270 20% 22%;
+  --input: 270 20% 22%;
+  --ring: 270 50% 70%;
+  --sidebar: 270 25% 10%;
+  --sidebar-deep: 270 30% 8%;
+  --header: 270 25% 10%;
+}
+
+.dark[data-theme='burgundy'],
+[data-theme='burgundy'] .dark {
+  --background: 345 30% 10%;
+  --background-deep: 345 35% 8%;
+  --foreground: 345 10% 92%;
+  --card: 345 30% 12%;
+  --card-foreground: 345 10% 92%;
+  --popover: 345 30% 14%;
+  --popover-foreground: 345 10% 92%;
+  --primary: 345 70% 45%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 345 25% 20%;
+  --secondary-foreground: 345 10% 92%;
+  --muted: 345 25% 20%;
+  --muted-foreground: 345 10% 65%;
+  --accent: 345 25% 22%;
+  --accent-foreground: 345 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 345 25% 22%;
+  --input: 345 25% 22%;
+  --ring: 345 70% 45%;
+  --sidebar: 345 30% 10%;
+  --sidebar-deep: 345 35% 8%;
+  --header: 345 30% 10%;
+}
+
+.dark[data-theme='burnt-sienna'],
+[data-theme='burnt-sienna'] .dark {
+  --background: 15 30% 10%;
+  --background-deep: 15 35% 8%;
+  --foreground: 15 10% 92%;
+  --card: 15 30% 12%;
+  --card-foreground: 15 10% 92%;
+  --popover: 15 30% 14%;
+  --popover-foreground: 15 10% 92%;
+  --primary: 15 65% 55%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 15 25% 20%;
+  --secondary-foreground: 15 10% 92%;
+  --muted: 15 25% 20%;
+  --muted-foreground: 15 10% 65%;
+  --accent: 15 25% 22%;
+  --accent-foreground: 15 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 15 25% 22%;
+  --input: 15 25% 22%;
+  --ring: 15 65% 55%;
+  --sidebar: 15 30% 10%;
+  --sidebar-deep: 15 35% 8%;
+  --header: 15 30% 10%;
+}
+
+.dark[data-theme='olive-sage'],
+[data-theme='olive-sage'] .dark {
+  --background: 80 25% 10%;
+  --background-deep: 80 30% 8%;
+  --foreground: 80 10% 92%;
+  --card: 80 25% 12%;
+  --card-foreground: 80 10% 92%;
+  --popover: 80 25% 14%;
+  --popover-foreground: 80 10% 92%;
+  --primary: 80 35% 50%;
+  --primary-foreground: 0 0% 98%;
+  --secondary: 80 20% 20%;
+  --secondary-foreground: 80 10% 92%;
+  --muted: 80 20% 20%;
+  --muted-foreground: 80 10% 65%;
+  --accent: 80 20% 22%;
+  --accent-foreground: 80 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 80 20% 22%;
+  --input: 80 20% 22%;
+  --ring: 80 35% 50%;
+  --sidebar: 80 25% 10%;
+  --sidebar-deep: 80 30% 8%;
+  --header: 80 25% 10%;
+}
+
+.dark[data-theme='champagne-gold'],
+[data-theme='champagne-gold'] .dark {
+  --background: 45 30% 10%;
+  --background-deep: 45 35% 8%;
+  --foreground: 45 10% 92%;
+  --card: 45 30% 12%;
+  --card-foreground: 45 10% 92%;
+  --popover: 45 30% 14%;
+  --popover-foreground: 45 10% 92%;
+  --primary: 45 60% 65%;
+  --primary-foreground: 45 30% 20%;
+  --secondary: 45 25% 20%;
+  --secondary-foreground: 45 10% 92%;
+  --muted: 45 25% 20%;
+  --muted-foreground: 45 10% 65%;
+  --accent: 45 25% 22%;
+  --accent-foreground: 45 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 45 25% 22%;
+  --input: 45 25% 22%;
+  --ring: 45 60% 65%;
+  --sidebar: 45 30% 10%;
+  --sidebar-deep: 45 35% 8%;
+  --header: 45 30% 10%;
+}
+
+.dark[data-theme='dusty-rose'],
+[data-theme='dusty-rose'] .dark {
+  --background: 350 25% 10%;
+  --background-deep: 350 30% 8%;
+  --foreground: 350 10% 92%;
+  --card: 350 25% 12%;
+  --card-foreground: 350 10% 92%;
+  --popover: 350 25% 14%;
+  --popover-foreground: 350 10% 92%;
+  --primary: 350 45% 70%;
+  --primary-foreground: 350 25% 20%;
+  --secondary: 350 20% 20%;
+  --secondary-foreground: 350 10% 92%;
+  --muted: 350 20% 20%;
+  --muted-foreground: 350 10% 65%;
+  --accent: 350 20% 22%;
+  --accent-foreground: 350 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 350 20% 22%;
+  --input: 350 20% 22%;
+  --ring: 350 45% 70%;
+  --sidebar: 350 25% 10%;
+  --sidebar-deep: 350 30% 8%;
+  --header: 350 25% 10%;
+}
+
+.dark[data-theme='citrus-green'],
+[data-theme='citrus-green'] .dark {
+  --background: 75 30% 10%;
+  --background-deep: 75 35% 8%;
+  --foreground: 75 10% 92%;
+  --card: 75 30% 12%;
+  --card-foreground: 75 10% 92%;
+  --popover: 75 30% 14%;
+  --popover-foreground: 75 10% 92%;
+  --primary: 75 75% 55%;
+  --primary-foreground: 75 30% 15%;
+  --secondary: 75 25% 20%;
+  --secondary-foreground: 75 10% 92%;
+  --muted: 75 25% 20%;
+  --muted-foreground: 75 10% 65%;
+  --accent: 75 25% 22%;
+  --accent-foreground: 75 10% 92%;
+  --destructive: 0 68% 56%;
+  --border: 75 25% 22%;
+  --input: 75 25% 22%;
+  --ring: 75 75% 55%;
+  --sidebar: 75 30% 10%;
+  --sidebar-deep: 75 35% 8%;
+  --header: 75 30% 10%;
+}

package/src/tokens/index.ts

@@ -0,0 +1,6 @@
+/**
+ * 设计令牌
+ * 导入浅色主题和暗色主题的 CSS 变量
+ */
+import './light.css';
+import './dark.css';