@routa/ui-vue 0.1.0

package/src/badge/style/index.css

@@ -0,0 +1,232 @@
+.l-badge {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+  width: fit-content;
+}
+
+.l-badge__content {
+  /* --- Theme Variables --- */
+  --l-badge-bg: var(--l-color-danger);
+  --l-badge-text: var(--l-color-danger-content);
+  --l-badge-border: transparent;
+
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--l-spacing-10);
+  height: var(--l-spacing-10);
+  padding: 0 var(--l-spacing-3);
+  font-size: var(--l-font-size-sm);
+  font-weight: 600;
+  line-height: 1;
+  color: var(--l-badge-text);
+  background: var(--l-badge-bg);
+  border-radius: var(--l-spacing-5);
+  border: none;
+  white-space: nowrap;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+  transform-origin: center center;
+  pointer-events: none;
+}
+
+/* --- Placement --- */
+.l-badge__content.is-fixed {
+  position: absolute;
+}
+
+.l-badge__content.is-top-right {
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+}
+
+.l-badge__content.is-top-left {
+  top: 0;
+  left: 0;
+  right: auto;
+  transform: translate(-50%, -50%);
+}
+
+.l-badge__content.is-bottom-right {
+  top: auto;
+  bottom: 0;
+  right: 0;
+  transform: translate(50%, 50%);
+}
+
+.l-badge__content.is-bottom-left {
+  top: auto;
+  bottom: 0;
+  left: 0;
+  right: auto;
+  transform: translate(-50%, 50%);
+}
+
+/* --- Single Digit --- */
+.l-badge__content.is-single-digit {
+  width: var(--l-spacing-10);
+  padding: 0;
+}
+
+/* --- Dot Mode --- */
+.l-badge__content.is-dot {
+  width: var(--l-spacing-5);
+  min-width: var(--l-spacing-5);
+  height: var(--l-spacing-5);
+  padding: 0;
+  border-radius: 50%;
+}
+
+/* --- Semantic Types --- */
+.l-badge__content--primary {
+  --l-badge-bg: var(--l-color-primary);
+  --l-badge-text: var(--l-color-primary-content);
+}
+
+.l-badge__content--success {
+  --l-badge-bg: var(--l-color-success);
+  --l-badge-text: var(--l-color-success-content);
+}
+
+.l-badge__content--warning {
+  --l-badge-bg: var(--l-color-warning);
+  --l-badge-text: var(--l-color-warning-content);
+}
+
+.l-badge__content--danger {
+  --l-badge-bg: var(--l-color-danger);
+  --l-badge-text: var(--l-color-danger-content);
+}
+
+.l-badge__content--info {
+  --l-badge-bg: var(--l-color-neutral);
+  --l-badge-text: var(--l-color-neutral-content);
+}
+
+/* --- Variants --- */
+.l-badge__content--subtle {
+  background: color-mix(in srgb, var(--l-badge-bg), transparent 85%);
+  color: var(--l-badge-bg);
+  border: 1.5px solid color-mix(in srgb, var(--l-badge-bg), transparent 70%);
+  backdrop-filter: blur(4px);
+}
+
+.l-badge__content--outline {
+  background: var(--l-bg-surface);
+  color: var(--l-badge-bg);
+  border: 1.5px solid var(--l-badge-bg);
+}
+
+/* --- Processing (Pulse Animation) --- */
+.l-badge__content.is-processing::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  box-shadow: 0 0 0 0 var(--l-badge-bg);
+  animation: l-badge-pulse 2s infinite cubic-bezier(0, 0, 0.2, 1);
+  opacity: 0.6;
+}
+
+@keyframes l-badge-pulse {
+  0% {
+    box-shadow: 0 0 0 0 var(--l-badge-bg);
+    opacity: 0.8;
+  }
+
+  70% {
+    box-shadow: 0 0 0 6px var(--l-badge-bg);
+    opacity: 0;
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 var(--l-badge-bg);
+    opacity: 0;
+  }
+}
+
+/* --- Animations --- */
+.l-zoom-in-center-enter-active,
+.l-zoom-in-center-leave-active {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+.l-zoom-in-center-enter-from,
+.l-zoom-in-center-leave-to {
+  opacity: 0;
+  transform: translate(50%, -50%) scale(0);
+}
+
+/* Fix transform for different placements during animation */
+.l-badge__content.is-top-right.l-zoom-in-center-enter-from,
+.l-badge__content.is-top-right.l-zoom-in-center-leave-to {
+  transform: translate(50%, -50%) scale(0);
+}
+
+.l-badge__content.is-top-left.l-zoom-in-center-enter-from,
+.l-badge__content.is-top-left.l-zoom-in-center-leave-to {
+  transform: translate(-50%, -50%) scale(0);
+}
+
+.l-badge__content.is-bottom-right.l-zoom-in-center-enter-from,
+.l-badge__content.is-bottom-right.l-zoom-in-center-leave-to {
+  transform: translate(50%, 50%) scale(0);
+}
+
+.l-badge__content.is-bottom-left.l-zoom-in-center-enter-from,
+.l-badge__content.is-bottom-left.l-zoom-in-center-leave-to {
+  transform: translate(-50%, 50%) scale(0);
+}
+
+/* --- Sizes Adaptation --- */
+
+/* Medium Size (16px) */
+.l-badge__content--md {
+  min-width: var(--l-spacing-8);
+  height: var(--l-spacing-8);
+  padding: 0 var(--l-spacing-2);
+  font-size: var(--l-font-size-11);
+  border-radius: var(--l-spacing-4);
+}
+
+.l-badge__content--md.is-single-digit {
+  width: var(--l-spacing-8);
+  padding: 0;
+}
+
+.l-badge__content--md.is-dot {
+  width: var(--l-spacing-4);
+  min-width: var(--l-spacing-4);
+  height: var(--l-spacing-4);
+  padding: 0;
+}
+
+/* Small Size (12px) */
+.l-badge__content--sm {
+  min-width: var(--l-spacing-6);
+  height: var(--l-spacing-6);
+  padding: 0 var(--l-spacing-1-5);
+  font-size: var(--l-font-size-10);
+  border-radius: var(--l-spacing-3);
+}
+
+.l-badge__content--sm.is-single-digit {
+  width: var(--l-spacing-6);
+  padding: 0;
+}
+
+.l-badge__content--sm.is-dot {
+  width: var(--l-spacing-3);
+  min-width: var(--l-spacing-3);
+  height: var(--l-spacing-3);
+  padding: 0;
+}

package/src/base.css

@@ -0,0 +1,4 @@
+@import "@routa/theme/tokens/primitives.css";
+@import "@routa/theme/tokens/semantic.css";
+@import "@routa/theme/tokens/typography.css";
+@import "./styles/reset.css";

package/src/breadcrumb/style/index.css

@@ -0,0 +1,75 @@
+.l-breadcrumb {
+  width: 100%;
+}
+
+.l-breadcrumb__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.l-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.l-breadcrumb__link,
+.l-breadcrumb__text {
+  color: var(--l-text-muted);
+  font-size: 14px;
+  line-height: 1.5;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.l-breadcrumb__link:hover {
+  color: var(--l-color-primary);
+}
+
+.l-breadcrumb__item.is-current .l-breadcrumb__text {
+  color: var(--l-text-main);
+  font-weight: 600;
+}
+
+.l-breadcrumb__item.is-disabled .l-breadcrumb__text {
+  opacity: 0.56;
+}
+
+.l-breadcrumb__separator {
+  color: color-mix(in srgb, var(--l-text-muted), transparent 18%);
+  user-select: none;
+}
+
+.l-breadcrumb__item:last-child .l-breadcrumb__separator {
+  display: none;
+}
+
+/* --- Sizes Adaptation --- */
+
+/* Small Size */
+.l-breadcrumb--sm .l-breadcrumb__list,
+.l-breadcrumb--sm .l-breadcrumb__item {
+  gap: 6px;
+}
+
+.l-breadcrumb--sm .l-breadcrumb__link,
+.l-breadcrumb--sm .l-breadcrumb__text {
+  font-size: 12px;
+}
+
+/* Large Size */
+.l-breadcrumb--lg .l-breadcrumb__list,
+.l-breadcrumb--lg .l-breadcrumb__item {
+  gap: 12px;
+}
+
+.l-breadcrumb--lg .l-breadcrumb__link,
+.l-breadcrumb--lg .l-breadcrumb__text {
+  font-size: 16px;
+}

package/src/button/style/index.css

@@ -0,0 +1,242 @@
+.l-button {
+  /* --- Default Theme Variables (Modified by Types) --- */
+  --l-button-theme-color: var(--l-color-primary);
+  --l-button-theme-content: var(--l-color-primary-content);
+
+  /* --- Functional Variables (Applied by Variants) --- */
+  --l-button-bg: transparent;
+  --l-button-text: currentColor;
+  --l-button-border: transparent;
+  --l-button-hover-bg: transparent;
+  --l-button-active-bg: transparent;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--l-spacing-2);
+  border-radius: var(--l-radius-control);
+  font-family: var(--l-font-family);
+  font-weight: var(--l-font-weight-medium);
+  cursor: pointer;
+  transition:
+    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  border: var(--l-spacing-0-5) solid var(--l-button-border);
+  background: var(--l-button-bg);
+  color: var(--l-button-text);
+  outline: none;
+  position: relative;
+  overflow: hidden;
+  white-space: nowrap;
+  flex-shrink: 0;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+/* .l-button + .l-button {
+  margin-left: 10px;
+} */
+
+/* --- Types (Semantic Colors) --- */
+.l-button--type-primary {
+  --l-button-theme-color: var(--l-color-primary);
+  --l-button-theme-content: var(--l-color-primary-content);
+}
+
+.l-button--type-default {
+  --l-button-theme-color: var(--l-color-neutral-content);
+  --l-button-theme-content: var(--l-color-neutral-content);
+  --l-button-theme-bg-fallback: var(--l-color-neutral);
+}
+
+.l-button--type-success {
+  --l-button-theme-color: var(--l-color-success);
+  --l-button-theme-content: var(--l-color-success-content);
+}
+
+.l-button--type-warning {
+  --l-button-theme-color: var(--l-color-warning);
+  --l-button-theme-content: var(--l-color-warning-content);
+}
+
+.l-button--type-danger {
+  --l-button-theme-color: var(--l-color-danger);
+  --l-button-theme-content: var(--l-color-danger-content);
+}
+
+/* --- Variants (Visual States) --- */
+.l-button--variant-solid {
+  --l-button-bg: var(--l-button-custom-color, var(--l-button-theme-color));
+  --l-button-text: var(--l-button-theme-content);
+  --l-button-hover-bg: color-mix(in srgb, var(--l-button-theme-color), white 15%);
+  --l-button-active-bg: color-mix(in srgb, var(--l-button-theme-color), black 10%);
+}
+
+/* Special case: default solid should be gray */
+.l-button--type-default.l-button--variant-solid {
+  --l-button-bg: var(--l-button-custom-color, var(--l-color-neutral-hover));
+  --l-button-hover-bg: var(--l-button-custom-color, var(--l-color-neutral-hover));
+  --l-button-active-bg: var(--l-button-custom-color, var(--l-color-neutral-border));
+}
+
+.l-button--variant-outline {
+  --l-button-bg: transparent;
+  --l-button-text: var(--l-button-theme-color);
+  --l-button-border: var(--l-button-theme-color);
+  --l-button-hover-bg: color-mix(in srgb, var(--l-button-theme-color), transparent 90%);
+  --l-button-active-bg: color-mix(in srgb, var(--l-button-theme-color), transparent 80%);
+}
+
+.l-button--variant-ghost {
+  --l-button-bg: transparent;
+  --l-button-text: var(--l-button-theme-color);
+  --l-button-border: color-mix(in srgb, var(--l-button-theme-color), transparent 75%);
+  --l-button-hover-bg: color-mix(in srgb, var(--l-button-theme-color), transparent 92%);
+  --l-button-active-bg: color-mix(in srgb, var(--l-button-theme-color), transparent 84%);
+}
+
+.l-button--variant-text {
+  --l-button-bg: transparent;
+  --l-button-text: var(--l-button-theme-color);
+  --l-button-border: transparent;
+  --l-button-hover-bg: color-mix(in srgb, var(--l-button-theme-color), transparent 92%);
+}
+
+/* --- Custom Size Logic --- */
+.l-button--custom {
+  height: var(--l-button-custom-size);
+  padding: 0 calc(var(--l-button-custom-size) * 0.4);
+}
+
+.l-button--custom.l-button--icon-only,
+.l-button--custom.l-button--shape-circle,
+.l-button--custom.l-button--shape-square {
+  width: var(--l-button-custom-size);
+  padding: 0;
+}
+
+/* Interaction States */
+.l-button:hover:not(.is-disabled):not(.is-loading) {
+  background-color: var(--l-button-hover-bg);
+  transform: translateY(-1px);
+}
+
+.l-button:active:not(.is-disabled):not(.is-loading) {
+  background-color: var(--l-button-active-bg);
+  transform: translateY(0);
+}
+
+/* Shapes & Sizes */
+.l-button.l-button--shape-circle {
+  border-radius: 50%;
+  aspect-ratio: 1/1;
+  padding: 0;
+}
+
+.l-button.l-button--shape-square {
+  aspect-ratio: 1/1;
+  padding: 0;
+}
+
+.l-button.l-button--shape-round {
+  border-radius: var(--l-radius-full);
+}
+
+.l-button--sm {
+  padding: var(--l-spacing-2) var(--l-spacing-6);
+  font-size: var(--l-font-size-sm);
+  height: var(--l-size-sm);
+}
+
+.l-button--md {
+  padding: var(--l-spacing-4) var(--l-spacing-10);
+  font-size: var(--l-font-size-sm);
+  height: var(--l-size-md);
+}
+
+.l-button--lg {
+  padding: var(--l-spacing-6) var(--l-spacing-16);
+  font-size: var(--l-font-size-base);
+  height: var(--l-size-lg);
+}
+
+.l-button--block {
+  display: flex;
+  width: 100%;
+}
+
+.l-button.l-button--icon-only {
+  width: var(--l-size-md);
+  padding: 0;
+}
+
+.l-button--icon-only.l-button--sm {
+  width: var(--l-size-sm);
+}
+
+.l-button--icon-only.l-button--lg {
+  width: var(--l-size-lg);
+}
+
+/* Global States */
+.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  filter: grayscale(0.5);
+}
+
+.is-loading {
+  cursor: wait;
+  opacity: 0.8;
+  pointer-events: none;
+}
+
+.l-button__loader {
+  width: 1.2em;
+  height: 1.2em;
+  border: var(--l-spacing-1) solid currentColor;
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  animation: l-spin 0.8s linear infinite;
+  /* 确保在内容之上显示 */
+  position: absolute;
+}
+
+@keyframes l-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Loader Fade Transition */
+.l-fade-enter-active,
+.l-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.l-fade-enter-from,
+.l-fade-leave-to {
+  opacity: 0;
+}
+
+.l-button__content,
+.l-button__icon-prefix,
+.l-button__icon-suffix {
+  display: inline-flex;
+  align-items: center;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.is-loading .l-button__content,
+.is-loading .l-button__icon-prefix,
+.is-loading .l-button__icon-suffix {
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.l-button__icon-prefix,
+.l-button__icon-suffix {
+  font-size: 1.1em;
+}

package/src/card/style/index.css

@@ -0,0 +1,60 @@
+.l-card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid color-mix(in srgb, var(--l-input-border), transparent 18%);
+  border-radius: var(--l-radius-surface);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--l-bg-surface), white 8%), var(--l-bg-surface));
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
+  color: var(--l-text-main);
+  overflow: hidden;
+}
+
+.l-card--sm .l-card__header,
+.l-card--sm .l-card__body,
+.l-card--sm .l-card__footer {
+  padding: 14px 16px;
+}
+
+.l-card--md .l-card__header,
+.l-card--md .l-card__body,
+.l-card--md .l-card__footer {
+  padding: 18px 20px;
+}
+
+.l-card--lg .l-card__header,
+.l-card--lg .l-card__body,
+.l-card--lg .l-card__footer {
+  padding: 24px;
+}
+
+.l-card__header,
+.l-card__footer {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.l-card__header {
+  border-bottom: 1px solid color-mix(in srgb, var(--l-input-border), transparent 30%);
+}
+
+.l-card__body {
+  min-width: 0;
+}
+
+.l-card__footer {
+  border-top: 1px solid color-mix(in srgb, var(--l-input-border), transparent 30%);
+}
+
+.l-card__title {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+.l-card__subtitle {
+  color: var(--l-text-muted);
+  font-size: 13px;
+  line-height: 1.5;
+}