@kupola/kupola 1.2.0

package/css/animations.css

@@ -0,0 +1,224 @@
+/* Animations and Transitions */
+
+/* Button hover and active */
+.ds-btn {
+  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
+}
+
+.ds-btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.ds-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.ds-btn--loading .icon {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Card hover */
+.ds-card {
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.ds-card:hover {
+  border-color: var(--border-neutral-l2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Input focus */
+.ds-input {
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.ds-input:focus {
+  border-color: var(--bg-brand);
+  box-shadow: 0 0 0 3px var(--bg-brand-popup);
+}
+
+/* Modal animation */
+.ds-modal {
+  animation: fadeIn 0.2s ease, slideUp 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(20px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+/* Sidebar transition */
+.ds-dashboard__sidebar {
+  transition: transform 0.3s ease;
+}
+
+.ds-dashboard__sidebar.is-collapsed {
+  transform: translateX(-100%);
+}
+
+/* Tab transition */
+.ds-tabs__item {
+  transition: color 0.2s ease, border-color 0.2s ease;
+}
+
+/* Navigation list item */
+.ds-navlist__item {
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.ds-navlist__item:hover {
+  background-color: var(--bg-overlay-l1);
+}
+
+.ds-navlist__item.is-active:hover {
+  background-color: var(--bg-brand);
+  color: var(--text-onbrand);
+}
+
+.ds-navlist__item.is-active:hover .icon {
+  filter: brightness(0) saturate(100%) invert(1);
+}
+
+/* Badge pulse */
+.ds-badge--pulse {
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(50, 240, 140, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 6px rgba(50, 240, 140, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(50, 240, 140, 0);
+  }
+}
+
+/* Status indicator */
+.ds-status-dot {
+  animation: blink 2s infinite;
+}
+
+@keyframes blink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+/* Progress bar */
+.ds-progress__bar {
+  transition: width 0.3s ease;
+}
+
+/* Table row hover */
+.ds-table tbody tr {
+  transition: background-color 0.15s ease;
+}
+
+.ds-table tbody tr:hover {
+  background-color: var(--bg-overlay-l1);
+}
+
+/* Tag fade */
+.ds-tag {
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+/* Alert dismiss */
+.ds-alert {
+  animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.ds-alert.is-dismissed {
+  animation: slideOut 0.3s ease forwards;
+}
+
+@keyframes slideOut {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+/* Scrollbar style */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--bg-base-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--border-neutral-l2);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--border-neutral-l3);
+}
+
+/* Selection color */
+::selection {
+  background-color: var(--bg-brand-popup);
+  color: var(--text-brand);
+}
+
+/* Brand theme transition */
+[data-brand] {
+  transition: --bg-brand 0.3s ease, --text-brand 0.3s ease;
+}
+
+/* Theme transition */
+[data-theme] {
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* Focus ring */
+.focus-ring:focus-visible {
+  outline: 2px solid var(--bg-brand);
+  outline-offset: 2px;
+}

package/css/brand-themes.css

@@ -0,0 +1,300 @@
+/* ===== Brand Color Themes ===== */
+/* 仅替换品牌绿色系，其他颜色保持不变 */
+
+/* 翠绿色（默认）- 原品牌色 */
+[data-brand="green"] {
+  --bg-brand: #32F08C;
+  --bg-brand-hover: #0FDC78;
+  --bg-brand-disabled: rgba(50, 240, 140, 0.2);
+  --bg-brand-popup: rgba(50, 240, 140, 0.12);
+  --text-brand: #32F08C;
+  --text-brand-hover: #0FDC78;
+  --icon-brand: #32F08C;
+  --icon-brand-hover: #0FDC78;
+  --border-brand: #32F08C;
+  --text-onbrand: #0C0C0D;
+  --icon-onbrand: #0C0C0D;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 雄黄 - 橙色系 */
+[data-brand="xionghuang"] {
+  --bg-brand: #FF9900;
+  --bg-brand-hover: #E68A00;
+  --bg-brand-disabled: rgba(255, 153, 0, 0.2);
+  --bg-brand-popup: rgba(255, 153, 0, 0.12);
+  --text-brand: #FF9900;
+  --text-brand-hover: #E68A00;
+  --icon-brand: #FF9900;
+  --icon-brand-hover: #E68A00;
+  --border-brand: #FF9900;
+  --text-onbrand: #0C0C0D;
+  --icon-onbrand: #0C0C0D;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 姜黄 - 黄色系 */
+[data-brand="jianghuang"] {
+  --bg-brand: #E2C027;
+  --bg-brand-hover: #C9AB1F;
+  --bg-brand-disabled: rgba(226, 192, 39, 0.2);
+  --bg-brand-popup: rgba(226, 192, 39, 0.12);
+  --text-brand: #E2C027;
+  --text-brand-hover: #C9AB1F;
+  --icon-brand: #E2C027;
+  --icon-brand-hover: #C9AB1F;
+  --border-brand: #E2C027;
+  --text-onbrand: #0C0C0D;
+  --icon-onbrand: #0C0C0D;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 蓝绿 - 青色系 */
+[data-brand="lanlv"] {
+  --bg-brand: #12A182;
+  --bg-brand-hover: #0F8F70;
+  --bg-brand-disabled: rgba(18, 161, 130, 0.2);
+  --bg-brand-popup: rgba(18, 161, 130, 0.12);
+  --text-brand: #12A182;
+  --text-brand-hover: #0F8F70;
+  --icon-brand: #12A182;
+  --icon-brand-hover: #0F8F70;
+  --border-brand: #12A182;
+  --text-onbrand: #FFFFFF;
+  --icon-onbrand: #FFFFFF;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 孔雀蓝 - 蓝绿色系 */
+[data-brand="kongquelan"] {
+  --bg-brand: #0EB0C9;
+  --bg-brand-hover: #0C99B0;
+  --bg-brand-disabled: rgba(14, 176, 201, 0.2);
+  --bg-brand-popup: rgba(14, 176, 201, 0.12);
+  --text-brand: #0EB0C9;
+  --text-brand-hover: #0C99B0;
+  --icon-brand: #0EB0C9;
+  --icon-brand-hover: #0C99B0;
+  --border-brand: #0EB0C9;
+  --text-onbrand: #0C0C0D;
+  --icon-onbrand: #0C0C0D;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 玫瑰紫 - 紫色系 */
+[data-brand="meiguizi"] {
+  --bg-brand: #BA2F7B;
+  --bg-brand-hover: #A5296D;
+  --bg-brand-disabled: rgba(186, 47, 123, 0.2);
+  --bg-brand-popup: rgba(186, 47, 123, 0.12);
+  --text-brand: #BA2F7B;
+  --text-brand-hover: #A5296D;
+  --icon-brand: #BA2F7B;
+  --icon-brand-hover: #A5296D;
+  --border-brand: #BA2F7B;
+  --text-onbrand: #FFFFFF;
+  --icon-onbrand: #FFFFFF;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 柿红 - 红色系 */
+[data-brand="shihong"] {
+  --bg-brand: #F2481B;
+  --bg-brand-hover: #D94018;
+  --bg-brand-disabled: rgba(242, 72, 27, 0.2);
+  --bg-brand-popup: rgba(242, 72, 27, 0.12);
+  --text-brand: #F2481B;
+  --text-brand-hover: #D94018;
+  --icon-brand: #F2481B;
+  --icon-brand-hover: #D94018;
+  --border-brand: #F2481B;
+  --text-onbrand: #FFFFFF;
+  --icon-onbrand: #FFFFFF;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 紫云 - 淡紫色系 */
+[data-brand="quhong"] {
+  --bg-brand: #B1A6CC;
+  --bg-brand-hover: #9E92B5;
+  --bg-brand-disabled: rgba(177, 166, 204, 0.2);
+  --bg-brand-popup: rgba(177, 166, 204, 0.12);
+  --text-brand: #B1A6CC;
+  --text-brand-hover: #9E92B5;
+  --icon-brand: #B1A6CC;
+  --icon-brand-hover: #9E92B5;
+  --border-brand: #B1A6CC;
+  --text-onbrand: #0C0C0D;
+  --icon-onbrand: #0C0C0D;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 山茶红 - 红色系（与曲红相同） */
+[data-brand="shanchahong"] {
+  --bg-brand: #F05A46;
+  --bg-brand-hover: #D9503F;
+  --bg-brand-disabled: rgba(240, 90, 70, 0.2);
+  --bg-brand-popup: rgba(240, 90, 70, 0.12);
+  --text-brand: #F05A46;
+  --text-brand-hover: #D9503F;
+  --icon-brand: #F05A46;
+  --icon-brand-hover: #D9503F;
+  --border-brand: #F05A46;
+  --text-onbrand: #FFFFFF;
+  --icon-onbrand: #FFFFFF;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 曾青 - 蓝紫色系 */
+[data-brand="zengqing"] {
+  --bg-brand: #535164;
+  --bg-brand-hover: #4A4859;
+  --bg-brand-disabled: rgba(83, 81, 100, 0.2);
+  --bg-brand-popup: rgba(83, 81, 100, 0.12);
+  --text-brand: #535164;
+  --text-brand-hover: #4A4859;
+  --icon-brand: #535164;
+  --icon-brand-hover: #4A4859;
+  --border-brand: #535164;
+  --text-onbrand: #FFFFFF;
+  --icon-onbrand: #FFFFFF;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 柔蓝 - 蓝色系 */
+[data-brand="roulan"] {
+  --bg-brand: #106898;
+  --bg-brand-hover: #0E5C87;
+  --bg-brand-disabled: rgba(16, 104, 152, 0.2);
+  --bg-brand-popup: rgba(16, 104, 152, 0.12);
+  --text-brand: #106898;
+  --text-brand-hover: #0E5C87;
+  --icon-brand: #106898;
+  --icon-brand-hover: #0E5C87;
+  --border-brand: #106898;
+  --text-onbrand: #FFFFFF;
+  --icon-onbrand: #FFFFFF;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 浅色主题下的品牌色适配 */
+[data-theme="light"][data-brand="green"] {
+  --bg-brand: #32F08C;
+  --bg-brand-hover: #0FDC78;
+  --bg-brand-popup: rgba(50, 240, 140, 0.15);
+}
+
+[data-theme="light"][data-brand="xionghuang"] {
+  --bg-brand: #FF9900;
+  --bg-brand-hover: #E68A00;
+  --bg-brand-popup: rgba(255, 153, 0, 0.15);
+}
+
+[data-theme="light"][data-brand="jianghuang"] {
+  --bg-brand: #E2C027;
+  --bg-brand-hover: #C9AB1F;
+  --bg-brand-popup: rgba(226, 192, 39, 0.15);
+}
+
+[data-theme="light"][data-brand="lanlv"] {
+  --bg-brand: #12A182;
+  --bg-brand-hover: #0F8F70;
+  --bg-brand-popup: rgba(18, 161, 130, 0.15);
+}
+
+[data-theme="light"][data-brand="kongquelan"] {
+  --bg-brand: #0EB0C9;
+  --bg-brand-hover: #0C99B0;
+  --bg-brand-popup: rgba(14, 176, 201, 0.15);
+}
+
+[data-theme="light"][data-brand="meiguizi"] {
+  --bg-brand: #BA2F7B;
+  --bg-brand-hover: #A5296D;
+  --bg-brand-popup: rgba(186, 47, 123, 0.15);
+}
+
+[data-theme="light"][data-brand="shihong"] {
+  --bg-brand: #F2481B;
+  --bg-brand-hover: #D94018;
+  --bg-brand-popup: rgba(242, 72, 27, 0.15);
+}
+
+[data-theme="light"][data-brand="quhong"] {
+  --bg-brand: #B1A6CC;
+  --bg-brand-hover: #9E92B5;
+  --bg-brand-popup: rgba(177, 166, 204, 0.15);
+}
+
+[data-theme="light"][data-brand="shanchahong"] {
+  --bg-brand: #F05A46;
+  --bg-brand-hover: #D9503F;
+  --bg-brand-popup: rgba(240, 90, 70, 0.15);
+}
+
+[data-theme="light"][data-brand="zengqing"] {
+  --bg-brand: #535164;
+  --bg-brand-hover: #4A4859;
+  --bg-brand-popup: rgba(83, 81, 100, 0.15);
+}
+
+[data-theme="light"][data-brand="roulan"] {
+  --bg-brand: #106898;
+  --bg-brand-hover: #0E5C87;
+  --bg-brand-popup: rgba(16, 104, 152, 0.15);
+}