@zhang_jifan/fanui 2.1.0

package/dist/modules/fanui-alert.css

@@ -0,0 +1,575 @@
+/* fanUI v2.1.0 · module: alert（独立产物，自带令牌） */
+.fanui-alert {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--fanui-space-3);
+  padding: var(--fanui-space-3) var(--fanui-space-4);
+  font-size: var(--fanui-font-size-base);
+  line-height: 1.6;
+  color: var(--fanui-color-text);
+  background-color: var(--fanui-color-surface-sunken);
+  border: 1px solid var(--fanui-color-border);
+  border-inline-start: 3px solid var(--fanui-color-text-subtle);
+  border-radius: var(--fanui-radius-md);
+  box-sizing: border-box;
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-alert.is-hidden, .fanui-alert[hidden] {
+  display: none;
+}
+.fanui-alert__icon {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-top: 1px;
+  font-size: 16px;
+  line-height: 1;
+}
+.fanui-alert__content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.fanui-alert__title {
+  margin: 0 0 2px;
+  font-size: var(--fanui-font-size-base);
+  font-weight: 600;
+  line-height: 1.5;
+  color: var(--fanui-color-text-strong);
+}
+.fanui-alert__desc {
+  margin: 0;
+  font-size: var(--fanui-font-size-base);
+  color: var(--fanui-color-text-muted);
+  word-break: break-word;
+}
+.fanui-alert__actions {
+  margin-top: var(--fanui-space-3);
+  display: flex;
+  align-items: center;
+  gap: var(--fanui-space-2);
+}
+.fanui-alert__close {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  margin: -2px -4px 0 0;
+  padding: 0;
+  font-size: 14px;
+  line-height: 1;
+  color: inherit;
+  opacity: 0.6;
+  background: none;
+  border: 0;
+  border-radius: var(--fanui-radius-sm);
+  cursor: pointer;
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-alert__close:hover {
+  opacity: 1;
+  background-color: rgba(15, 23, 42, 0.08);
+}
+.fanui-alert__close:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 var(--fanui-focus-ring-offset, 1px) var(--fanui-color-surface, #fff), 0 0 0 calc(var(--fanui-focus-ring-offset, 1px) + var(--fanui-focus-ring-width, 3px)) var(--fanui-focus-ring-color, rgba(14, 116, 144, 0.3));
+}
+@media (forced-colors: active) {
+  .fanui-alert__close:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+}
+.fanui-alert ul, .fanui-alert ol {
+  margin: var(--fanui-space-2) 0 0;
+  padding-inline-start: 1.25em;
+  color: var(--fanui-color-text-muted);
+}
+
+.fanui-alert--primary {
+  background-color: var(--fanui-primary-soft, rgba(14, 116, 144, 0.1));
+  border-color: var(--fanui-primary-border, rgba(14, 116, 144, 0.28));
+  border-left-color: var(--fanui-primary, #0e7490);
+}
+.fanui-alert--primary .fanui-alert__icon {
+  color: var(--fanui-primary, #0e7490);
+}
+.fanui-alert--primary .fanui-alert__title {
+  color: rgb(4.062745098%, 33.662745098%, 41.7882352941%);
+}
+.fanui-alert--primary .fanui-alert__desc {
+  color: rgb(4.831372549%, 40.031372549%, 49.6941176471%);
+}
+[data-fanui-theme=dark] .fanui-alert--primary {
+  background-color: rgba(14, 116, 144, 0.16);
+  border-color: rgba(14, 116, 144, 0.34);
+}
+[data-fanui-theme=dark] .fanui-alert--primary .fanui-alert__title {
+  color: var(--fanui-primary-ink, rgb(35.7333333333%, 62.9333333333%, 70.4%));
+}
+[data-fanui-theme=dark] .fanui-alert--primary .fanui-alert__desc {
+  color: var(--fanui-primary, rgb(16.831372549%, 52.031372549%, 61.6941176471%));
+}
+
+.fanui-alert--solid.fanui-alert--primary {
+  background-color: var(--fanui-primary, #0e7490);
+  border-color: var(--fanui-primary, #0e7490);
+  border-left-color: rgb(4.1176470588%, 34.1176470588%, 42.3529411765%);
+  color: var(--fanui-primary-fg, #ffffff);
+}
+.fanui-alert--solid.fanui-alert--primary .fanui-alert__title,
+.fanui-alert--solid.fanui-alert--primary .fanui-alert__desc,
+.fanui-alert--solid.fanui-alert--primary .fanui-alert__icon {
+  color: inherit;
+}
+.fanui-alert--solid.fanui-alert--primary .fanui-alert__desc {
+  opacity: 0.88;
+}
+
+.fanui-alert--outline.fanui-alert--primary {
+  background-color: transparent;
+  border-color: rgba(14, 116, 144, 0.45);
+  border-left-color: var(--fanui-primary, #0e7490);
+}
+.fanui-alert--outline.fanui-alert--primary .fanui-alert__icon {
+  color: var(--fanui-primary, #0e7490);
+}
+
+.fanui-alert--accent {
+  background-color: var(--fanui-accent-soft, rgba(124, 58, 237, 0.1));
+  border-color: var(--fanui-accent-border, rgba(124, 58, 237, 0.28));
+  border-left-color: var(--fanui-accent, #7c3aed);
+}
+.fanui-alert--accent .fanui-alert__icon {
+  color: var(--fanui-accent, #7c3aed);
+}
+.fanui-alert--accent .fanui-alert__title {
+  color: rgb(35.9843137255%, 16.831372549%, 68.7764705882%);
+}
+.fanui-alert--accent .fanui-alert__desc {
+  color: rgb(42.7921568627%, 20.0156862745%, 81.7882352941%);
+}
+[data-fanui-theme=dark] .fanui-alert--accent {
+  background-color: rgba(124, 58, 237, 0.16);
+  border-color: rgba(124, 58, 237, 0.34);
+}
+[data-fanui-theme=dark] .fanui-alert--accent .fanui-alert__title {
+  color: var(--fanui-accent-ink, rgb(65.0666666667%, 47.4666666667%, 95.2%));
+}
+[data-fanui-theme=dark] .fanui-alert--accent .fanui-alert__desc {
+  color: var(--fanui-accent, rgb(54.7921568627%, 32.0156862745%, 93.7882352941%));
+}
+
+.fanui-alert--solid.fanui-alert--accent {
+  background-color: var(--fanui-accent, #7c3aed);
+  border-color: var(--fanui-accent, #7c3aed);
+  border-left-color: rgb(36.4705882353%, 17.0588235294%, 69.7058823529%);
+  color: var(--fanui-accent-fg, #ffffff);
+}
+.fanui-alert--solid.fanui-alert--accent .fanui-alert__title,
+.fanui-alert--solid.fanui-alert--accent .fanui-alert__desc,
+.fanui-alert--solid.fanui-alert--accent .fanui-alert__icon {
+  color: inherit;
+}
+.fanui-alert--solid.fanui-alert--accent .fanui-alert__desc {
+  opacity: 0.88;
+}
+
+.fanui-alert--outline.fanui-alert--accent {
+  background-color: transparent;
+  border-color: rgba(124, 58, 237, 0.45);
+  border-left-color: var(--fanui-accent, #7c3aed);
+}
+.fanui-alert--outline.fanui-alert--accent .fanui-alert__icon {
+  color: var(--fanui-accent, #7c3aed);
+}
+
+.fanui-alert--success {
+  background-color: var(--fanui-success-soft, rgba(4, 120, 87, 0.1));
+  border-color: var(--fanui-success-border, rgba(4, 120, 87, 0.28));
+  border-left-color: var(--fanui-success, #047857);
+}
+.fanui-alert--success .fanui-alert__icon {
+  color: var(--fanui-success, #047857);
+}
+.fanui-alert--success .fanui-alert__title {
+  color: rgb(1.1607843137%, 34.8235294118%, 25.2470588235%);
+}
+.fanui-alert--success .fanui-alert__desc {
+  color: rgb(1.3803921569%, 41.4117647059%, 30.0235294118%);
+}
+[data-fanui-theme=dark] .fanui-alert--success {
+  background-color: rgba(4, 120, 87, 0.16);
+  border-color: rgba(4, 120, 87, 0.34);
+}
+[data-fanui-theme=dark] .fanui-alert--success .fanui-alert__title {
+  color: var(--fanui-success-ink, rgb(33.0666666667%, 64%, 55.2%));
+}
+[data-fanui-theme=dark] .fanui-alert--success .fanui-alert__desc {
+  color: var(--fanui-success, rgb(13.3803921569%, 53.4117647059%, 42.0235294118%));
+}
+
+.fanui-alert--solid.fanui-alert--success {
+  background-color: var(--fanui-success, #047857);
+  border-color: var(--fanui-success, #047857);
+  border-left-color: rgb(1.1764705882%, 35.2941176471%, 25.5882352941%);
+  color: var(--fanui-success-fg, #ffffff);
+}
+.fanui-alert--solid.fanui-alert--success .fanui-alert__title,
+.fanui-alert--solid.fanui-alert--success .fanui-alert__desc,
+.fanui-alert--solid.fanui-alert--success .fanui-alert__icon {
+  color: inherit;
+}
+.fanui-alert--solid.fanui-alert--success .fanui-alert__desc {
+  opacity: 0.88;
+}
+
+.fanui-alert--outline.fanui-alert--success {
+  background-color: transparent;
+  border-color: rgba(4, 120, 87, 0.45);
+  border-left-color: var(--fanui-success, #047857);
+}
+.fanui-alert--outline.fanui-alert--success .fanui-alert__icon {
+  color: var(--fanui-success, #047857);
+}
+
+.fanui-alert--warning {
+  background-color: var(--fanui-warning-soft, rgba(180, 83, 9, 0.1));
+  border-color: var(--fanui-warning-border, rgba(180, 83, 9, 0.28));
+  border-left-color: var(--fanui-warning, #b45309);
+}
+.fanui-alert--warning .fanui-alert__icon {
+  color: var(--fanui-warning, #b45309);
+}
+.fanui-alert--warning .fanui-alert__title {
+  color: rgb(52.2352941176%, 24.0862745098%, 2.6117647059%);
+}
+.fanui-alert--warning .fanui-alert__desc {
+  color: rgb(62.1176470588%, 28.6431372549%, 3.1058823529%);
+}
+[data-fanui-theme=dark] .fanui-alert--warning {
+  background-color: rgba(180, 83, 9, 0.16);
+  border-color: rgba(180, 83, 9, 0.34);
+}
+[data-fanui-theme=dark] .fanui-alert--warning .fanui-alert__title {
+  color: var(--fanui-warning-ink, rgb(80%, 54.1333333333%, 34.4%));
+}
+[data-fanui-theme=dark] .fanui-alert--warning .fanui-alert__desc {
+  color: var(--fanui-warning, rgb(74.1176470588%, 40.6431372549%, 15.1058823529%));
+}
+
+.fanui-alert--solid.fanui-alert--warning {
+  background-color: var(--fanui-warning, #b45309);
+  border-color: var(--fanui-warning, #b45309);
+  border-left-color: rgb(52.9411764706%, 24.4117647059%, 2.6470588235%);
+  color: var(--fanui-warning-fg, #ffffff);
+}
+.fanui-alert--solid.fanui-alert--warning .fanui-alert__title,
+.fanui-alert--solid.fanui-alert--warning .fanui-alert__desc,
+.fanui-alert--solid.fanui-alert--warning .fanui-alert__icon {
+  color: inherit;
+}
+.fanui-alert--solid.fanui-alert--warning .fanui-alert__desc {
+  opacity: 0.88;
+}
+
+.fanui-alert--outline.fanui-alert--warning {
+  background-color: transparent;
+  border-color: rgba(180, 83, 9, 0.45);
+  border-left-color: var(--fanui-warning, #b45309);
+}
+.fanui-alert--outline.fanui-alert--warning .fanui-alert__icon {
+  color: var(--fanui-warning, #b45309);
+}
+
+.fanui-alert--danger {
+  background-color: var(--fanui-danger-soft, rgba(185, 28, 28, 0.1));
+  border-color: var(--fanui-danger-border, rgba(185, 28, 28, 0.28));
+  border-left-color: var(--fanui-danger, #b91c1c);
+}
+.fanui-alert--danger .fanui-alert__icon {
+  color: var(--fanui-danger, #b91c1c);
+}
+.fanui-alert--danger .fanui-alert__title {
+  color: rgb(53.6862745098%, 8.1254901961%, 8.1254901961%);
+}
+.fanui-alert--danger .fanui-alert__desc {
+  color: rgb(63.8431372549%, 9.662745098%, 9.662745098%);
+}
+[data-fanui-theme=dark] .fanui-alert--danger {
+  background-color: rgba(185, 28, 28, 0.16);
+  border-color: rgba(185, 28, 28, 0.34);
+}
+[data-fanui-theme=dark] .fanui-alert--danger .fanui-alert__title {
+  color: var(--fanui-danger-ink, rgb(81.3333333333%, 39.4666666667%, 39.4666666667%));
+}
+[data-fanui-theme=dark] .fanui-alert--danger .fanui-alert__desc {
+  color: var(--fanui-danger, rgb(75.8431372549%, 21.662745098%, 21.662745098%));
+}
+
+.fanui-alert--solid.fanui-alert--danger {
+  background-color: var(--fanui-danger, #b91c1c);
+  border-color: var(--fanui-danger, #b91c1c);
+  border-left-color: rgb(54.4117647059%, 8.2352941176%, 8.2352941176%);
+  color: var(--fanui-danger-fg, #ffffff);
+}
+.fanui-alert--solid.fanui-alert--danger .fanui-alert__title,
+.fanui-alert--solid.fanui-alert--danger .fanui-alert__desc,
+.fanui-alert--solid.fanui-alert--danger .fanui-alert__icon {
+  color: inherit;
+}
+.fanui-alert--solid.fanui-alert--danger .fanui-alert__desc {
+  opacity: 0.88;
+}
+
+.fanui-alert--outline.fanui-alert--danger {
+  background-color: transparent;
+  border-color: rgba(185, 28, 28, 0.45);
+  border-left-color: var(--fanui-danger, #b91c1c);
+}
+.fanui-alert--outline.fanui-alert--danger .fanui-alert__icon {
+  color: var(--fanui-danger, #b91c1c);
+}
+
+.fanui-alert--info {
+  background-color: var(--fanui-info-soft, rgba(3, 105, 161, 0.1));
+  border-color: var(--fanui-info-border, rgba(3, 105, 161, 0.28));
+  border-left-color: var(--fanui-info, #0369a1);
+}
+.fanui-alert--info .fanui-alert__icon {
+  color: var(--fanui-info, #0369a1);
+}
+.fanui-alert--info .fanui-alert__title {
+  color: rgb(0.8705882353%, 30.4705882353%, 46.7215686275%);
+}
+.fanui-alert--info .fanui-alert__desc {
+  color: rgb(1.0352941176%, 36.2352941176%, 55.5607843137%);
+}
+[data-fanui-theme=dark] .fanui-alert--info {
+  background-color: rgba(3, 105, 161, 0.16);
+  border-color: rgba(3, 105, 161, 0.34);
+}
+[data-fanui-theme=dark] .fanui-alert--info .fanui-alert__title {
+  color: var(--fanui-info-ink, rgb(32.8%, 60%, 74.9333333333%));
+}
+[data-fanui-theme=dark] .fanui-alert--info .fanui-alert__desc {
+  color: var(--fanui-info, rgb(13.0352941176%, 48.2352941176%, 67.5607843137%));
+}
+
+.fanui-alert--solid.fanui-alert--info {
+  background-color: var(--fanui-info, #0369a1);
+  border-color: var(--fanui-info, #0369a1);
+  border-left-color: rgb(0.8823529412%, 30.8823529412%, 47.3529411765%);
+  color: var(--fanui-info-fg, #ffffff);
+}
+.fanui-alert--solid.fanui-alert--info .fanui-alert__title,
+.fanui-alert--solid.fanui-alert--info .fanui-alert__desc,
+.fanui-alert--solid.fanui-alert--info .fanui-alert__icon {
+  color: inherit;
+}
+.fanui-alert--solid.fanui-alert--info .fanui-alert__desc {
+  opacity: 0.88;
+}
+
+.fanui-alert--outline.fanui-alert--info {
+  background-color: transparent;
+  border-color: rgba(3, 105, 161, 0.45);
+  border-left-color: var(--fanui-info, #0369a1);
+}
+.fanui-alert--outline.fanui-alert--info .fanui-alert__icon {
+  color: var(--fanui-info, #0369a1);
+}
+
+.fanui-alert--sm {
+  padding: var(--fanui-space-2) var(--fanui-space-3);
+  font-size: var(--fanui-font-size-sm);
+}
+.fanui-alert--sm .fanui-alert__icon {
+  width: 16px;
+  height: 16px;
+  font-size: 14px;
+}
+
+.fanui-alert--lg {
+  padding: var(--fanui-space-4) var(--fanui-space-5);
+}
+.fanui-alert--lg .fanui-alert__title {
+  font-size: var(--fanui-font-size-md);
+}
+
+.fanui-alert--center {
+  align-items: center;
+  text-align: center;
+  flex-direction: column;
+}
+.fanui-alert--center .fanui-alert__icon {
+  margin-top: 0;
+}
+
+.fanui-alert--flat {
+  border-radius: 0;
+  border-inline-start-width: 0;
+  border-top-width: 0;
+  border-inline-end-width: 0;
+}
+
+.fanui-alert--bordered-all {
+  border-inline-start-width: 1px;
+}
+
+.fanui-alert--banner {
+  border-radius: 0;
+  border-width: 0 0 1px 0;
+  border-inline-start-width: 0;
+  padding: var(--fanui-space-3) var(--fanui-container-px, 16px);
+  justify-content: center;
+}
+.fanui-alert--banner .fanui-alert__content {
+  flex: 0 1 auto;
+  display: flex;
+  align-items: center;
+  gap: var(--fanui-space-2);
+  flex-wrap: wrap;
+}
+
+.fanui-alert--inline {
+  display: inline-flex;
+  padding: 4px 10px;
+  font-size: var(--fanui-font-size-sm);
+  border-radius: var(--fanui-radius-full);
+  border-inline-start-width: 1px;
+}
+
+.fanui-toast-region {
+  position: fixed;
+  top: var(--fanui-space-5);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: var(--fanui-z-toast, 1090);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--fanui-space-3);
+  pointer-events: none;
+  max-width: min(92vw, 480px);
+}
+.fanui-toast-region--top-right {
+  left: auto;
+  right: var(--fanui-space-5);
+  transform: none;
+  align-items: flex-end;
+}
+.fanui-toast-region--top-left {
+  left: var(--fanui-space-5);
+  transform: none;
+  align-items: flex-start;
+}
+.fanui-toast-region--bottom {
+  top: auto;
+  bottom: var(--fanui-space-5);
+}
+.fanui-toast-region--bottom-right {
+  top: auto;
+  bottom: var(--fanui-space-5);
+  left: auto;
+  right: var(--fanui-space-5);
+  transform: none;
+  align-items: flex-end;
+}
+
+.fanui-toast {
+  display: flex;
+  align-items: center;
+  gap: var(--fanui-space-3);
+  padding: var(--fanui-space-3) var(--fanui-space-4);
+  min-width: 220px;
+  pointer-events: none;
+  font-size: var(--fanui-font-size-base);
+  color: var(--fanui-color-text);
+  background-color: var(--fanui-color-surface);
+  border: 1px solid var(--fanui-color-border);
+  border-radius: var(--fanui-radius-md);
+  box-shadow: var(--fanui-shadow-lg);
+  animation: fanui-toast-in 200ms cubic-bezier(0, 0, 0.2, 1) both;
+}
+.fanui-toast--interactive {
+  pointer-events: auto;
+}
+.fanui-toast__icon {
+  flex: 0 0 auto;
+  display: flex;
+  font-size: 16px;
+}
+.fanui-toast__content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.fanui-toast__title {
+  font-weight: 600;
+  color: var(--fanui-color-text-strong);
+}
+.fanui-toast__desc {
+  font-size: var(--fanui-font-size-sm);
+  color: var(--fanui-color-text-muted);
+}
+.fanui-toast__actions {
+  display: flex;
+  gap: var(--fanui-space-2);
+  margin-inline-start: var(--fanui-space-2);
+  flex: 0 0 auto;
+}
+.fanui-toast.is-leaving {
+  animation: fanui-fade-out 200ms cubic-bezier(0.4, 0, 1, 1) both;
+}
+.fanui-toast--primary {
+  border-inline-start: 3px solid var(--fanui-primary, #0e7490);
+}
+.fanui-toast--primary .fanui-toast__icon {
+  color: var(--fanui-primary, #0e7490);
+}
+.fanui-toast--accent {
+  border-inline-start: 3px solid var(--fanui-accent, #7c3aed);
+}
+.fanui-toast--accent .fanui-toast__icon {
+  color: var(--fanui-accent, #7c3aed);
+}
+.fanui-toast--success {
+  border-inline-start: 3px solid var(--fanui-success, #047857);
+}
+.fanui-toast--success .fanui-toast__icon {
+  color: var(--fanui-success, #047857);
+}
+.fanui-toast--warning {
+  border-inline-start: 3px solid var(--fanui-warning, #b45309);
+}
+.fanui-toast--warning .fanui-toast__icon {
+  color: var(--fanui-warning, #b45309);
+}
+.fanui-toast--danger {
+  border-inline-start: 3px solid var(--fanui-danger, #b91c1c);
+}
+.fanui-toast--danger .fanui-toast__icon {
+  color: var(--fanui-danger, #b91c1c);
+}
+.fanui-toast--info {
+  border-inline-start: 3px solid var(--fanui-info, #0369a1);
+}
+.fanui-toast--info .fanui-toast__icon {
+  color: var(--fanui-info, #0369a1);
+}
+.fanui-toast--solid {
+  background-color: var(--fanui-color-text-strong);
+  color: var(--fanui-color-surface);
+  border-color: transparent;
+}
+.fanui-toast--solid .fanui-toast__title {
+  color: inherit;
+}
+.fanui-toast--solid .fanui-toast__desc {
+  color: rgba(255, 255, 255, 0.72);
+}