.ul-blockquote {
  box-sizing: border-box;
  padding: $space-md;
  margin: 0 $space-md $space-md 0;
  border-left: 4px solid $color-border;
  background-color: $color-bg;
  border-radius: $radius-base;
  width: 240px; // 示例宽度，确保在 flex 布局中换行

  &__main {
    color: $color-text-secondary;
    font-size: $font-size-base;
    line-height: $line-height-base;
  }

  // 循环生成所有主题色变体
  @each $name, $color in $theme-colors {
    &.#{$name} {
      border-left-color: $color;
      background-color: map-get(map-get($theme-color-variants, $name), "light");

      // 对于深色主题进行微调
      @if $name == "dark" {
        background-color: $color-dark-base;
        .ul-blockquote__main {
          color: $color-white;
        }
      } @else {
        .ul-blockquote__main {
          color: map-get(map-get($theme-color-variants, $name), "base");
        }
      }
    }
  }
}

.ul-blockquote {
  box-sizing: border-box;
  padding: 16px;
  margin: 0 16px 16px 0;
  border-left: 4px solid var(--ul-color-border);
  background-color: var(--ul-color-bg);
  border-radius: 4px;
  width: 240px;
}
.ul-blockquote__main {
  color: var(--ul-color-text-secondary);
  font-size: 14px;
  line-height: 1.5;
}
.ul-blockquote.primary {
  border-left-color: var(--ul-color-primary-base);
  background-color: var(--ul-color-primary-light);
}
.ul-blockquote.primary .ul-blockquote__main {
  color: var(--ul-color-primary-base);
}
.ul-blockquote.success {
  border-left-color: var(--ul-color-success-base);
  background-color: var(--ul-color-success-light);
}
.ul-blockquote.success .ul-blockquote__main {
  color: var(--ul-color-success-base);
}
.ul-blockquote.danger {
  border-left-color: var(--ul-color-danger-base);
  background-color: var(--ul-color-danger-light);
}
.ul-blockquote.danger .ul-blockquote__main {
  color: var(--ul-color-danger-base);
}
.ul-blockquote.warning {
  border-left-color: var(--ul-color-warning-base);
  background-color: var(--ul-color-warning-light);
}
.ul-blockquote.warning .ul-blockquote__main {
  color: var(--ul-color-warning-base);
}
.ul-blockquote.info {
  border-left-color: var(--ul-color-info-base);
  background-color: var(--ul-color-info-light);
}
.ul-blockquote.info .ul-blockquote__main {
  color: var(--ul-color-info-base);
}
.ul-blockquote.dark {
  border-left-color: var(--ul-color-dark-base);
  background-color: var(--ul-color-dark-light);
  background-color: var(--ul-color-dark-base);
}
.ul-blockquote.dark .ul-blockquote__main {
  color: var(--ul-color-white);
}
.ul-blockquote.light {
  border-left-color: var(--ul-color-light-base);
  background-color: var(--ul-color-light-light);
}
.ul-blockquote.light .ul-blockquote__main {
  color: var(--ul-color-light-base);
}
.ul-blockquote.gray {
  border-left-color: var(--ul-color-gray-base);
  background-color: var(--ul-color-gray-light);
}
.ul-blockquote.gray .ul-blockquote__main {
  color: var(--ul-color-gray-base);
}

<view class="ul-flex ul-flex-wrap">
    <!-- 基础样式 -->
    <view class="ul-blockquote">
        <view class="ul-blockquote__main">这是一个基础样式的引用区块，用于突出显示重要信息。</view>
    </view>
    <!-- 主要状态 -->
    <view class="ul-blockquote primary">
        <view class="ul-blockquote__main">这是一个主要状态的引用区块，通常用于强调核心内容。 </view>
    </view>
    <!-- 成功状态 -->
    <view class="ul-blockquote success">
        <view class="ul-blockquote__main">这是一个成功状态的引用区块，适用于表示成功或完成的操作提示。</view>
    </view>
    <!-- 警告状态 -->
    <view class="ul-blockquote warning">
        <view class="ul-blockquote__main">这是一个警告状态的引用区块，用于提醒用户注意潜在问题。</view>
    </view>
    <!-- 危险状态 -->
    <view class="ul-blockquote danger">
        <view class="ul-blockquote__main">这是一个危险状态的引用区块，用于警示用户危险或错误信息。</view>
    </view>
    <!-- 信息状态 -->
    <view class="ul-blockquote info">
        <view class="ul-blockquote__main">这是一个信息状态的引用区块，用于展示一般性信息。</view>
    </view>
    <!-- 深色状态 -->
    <view class="ul-blockquote dark">
        <view class="ul-blockquote__main">这是一个深色状态的引用区块，适用于深色主题或特殊设计。</view>
    </view>
</view>