mini-starter/mini/src/tcb-theme.css

/* TCB Shop Demo 主题变量和颜色系统集成 */
/* 集成到当前小程序项目，保持与Tailwind CSS兼容 */

/* ===== 主题变量系统 ===== */
:root {
  /* 主要主题色 */
  --tcb-primary-color: #fa4126;
  --tcb-primary-text-color: #fa550f;

  /* TDesign 组件主题变量 */
  --td-input-placeholder-text-color: #bbbbbb;
  --td-input-text-color: #333333;
  --td-tab-bar-color: #bbb;
  --td-tab-bar-active-color: #333;
  --td-cascader-active-color: #fa4126;
  --td-switch-checked-color: #34c759;
  --td-button-default-bg-color: #fa4126;
  --td-button-default-border-color: #fa4126;
  --td-checkbox-icon-checked-color: #fa4126;

  /* TDesign Tabs 组件主题变量 */
  --td-tab-font-size: 28rpx;
  --td-tab-nav-bg-color: #fff;
  --td-tab-item-color: #333;
  --td-tab-item-active-color: #fa550f;
  --td-tab-item-disabled-color: rgba(0, 0, 0, 0.26);
  --td-tab-track-color: #fa550f;
  --td-tab-track-width: 32rpx;
  --td-tab-track-thickness: 6rpx;
  --td-tab-track-radius: 8rpx;
  --td-tab-item-height: 96rpx;
  --td-tab-icon-size: 36rpx;
  --td-tab-border-color: #e7e7e7;
  --td-tab-item-tag-bg: #f3f3f3;
  --td-tab-item-tag-active-bg: rgba(250, 85, 15, 0.1);
  --td-tab-item-tag-height: 64rpx;
}

/* ===== 语义化颜色类 ===== */

/* 文字颜色类 */
.text-primary {
  color: #fa550f;
}

.text-success {
  color: #5fb446;
}

.text-warn {
  color: #ec8131;
}

.text-danger {
  color: #de1c24;
}

/* 背景颜色类 */
.bg-primary {
  background-color: #fa550f;
}

.bg-success {
  background-color: #5fb446;
}

.bg-warn {
  background-color: #ec8131;
}

.bg-danger {
  background-color: #de1c24;
}

/* ===== 层级颜色类 ===== */

/* 文字层级颜色 */
.text-title {
  color: #282828;
}

.text-normal {
  color: #5d5d5d;
}

.text-small {
  color: #9b9b9b;
}

.text-minor {
  color: #ececec;
}

.text-border {
  color: #eeeeee;
}

/* 背景层级颜色 */
.bg-title {
  background-color: #282828;
}

.bg-normal {
  background-color: #5d5d5d;
}

.bg-small {
  background-color: #9b9b9b;
}

.bg-minor {
  background-color: #ececec;
}

.bg-border {
  background-color: #eeeeee;
}

/* ===== 边框颜色类 ===== */
.border-primary {
  border-color: #fa550f;
}

.border-success {
  border-color: #5fb446;
}

.border-warn {
  border-color: #ec8131;
}

.border-danger {
  border-color: #de1c24;
}

.border-title {
  border-color: #282828;
}

.border-normal {
  border-color: #5d5d5d;
}

.border-small {
  border-color: #9b9b9b;
}

.border-minor {
  border-color: #ececec;
}

/* ===== 按钮样式类 ===== */
.btn-primary {
  background-color: #fa4126;
  border-color: #fa4126;
  color: white;
}

.btn-primary:active {
  background-color: #e03a22;
  border-color: #e03a22;
}

.btn-success {
  background-color: #5fb446;
  border-color: #5fb446;
  color: white;
}

.btn-success:active {
  background-color: #4f9a3a;
  border-color: #4f9a3a;
}

.btn-warn {
  background-color: #ec8131;
  border-color: #ec8131;
  color: white;
}

.btn-warn:active {
  background-color: #d6732c;
  border-color: #d6732c;
}

.btn-danger {
  background-color: #de1c24;
  border-color: #de1c24;
  color: white;
}

.btn-danger:active {
  background-color: #c5181f;
  border-color: #c5181f;
}

/* ===== 状态指示器类 ===== */
.status-primary {
  color: #fa550f;
  background-color: rgba(250, 85, 15, 0.1);
}

.status-success {
  color: #5fb446;
  background-color: rgba(95, 180, 70, 0.1);
}

.status-warn {
  color: #ec8131;
  background-color: rgba(236, 129, 49, 0.1);
}

.status-danger {
  color: #de1c24;
  background-color: rgba(222, 28, 36, 0.1);
}

/* ===== 图标颜色类 ===== */
.icon-primary {
  color: #fa550f;
}

.icon-success {
  color: #5fb446;
}

.icon-warn {
  color: #ec8131;
}

.icon-danger {
  color: #de1c24;
}

.icon-title {
  color: #282828;
}

.icon-normal {
  color: #5d5d5d;
}

.icon-small {
  color: #9b9b9b;
}

/* ===== 阴影效果类 ===== */
.shadow-primary {
  box-shadow: 0 2rpx 8rpx rgba(250, 85, 15, 0.15);
}

.shadow-success {
  box-shadow: 0 2rpx 8rpx rgba(95, 180, 70, 0.15);
}

.shadow-warn {
  box-shadow: 0 2rpx 8rpx rgba(236, 129, 49, 0.15);
}

.shadow-danger {
  box-shadow: 0 2rpx 8rpx rgba(222, 28, 36, 0.15);
}

/* ===== 渐变背景类 ===== */
.gradient-primary {
  background: linear-gradient(135deg, #fa4126, #fa550f);
}

.gradient-success {
  background: linear-gradient(135deg, #5fb446, #4f9a3a);
}

.gradient-warn {
  background: linear-gradient(135deg, #ec8131, #d6732c);
}

.gradient-danger {
  background: linear-gradient(135deg, #de1c24, #c5181f);
}

/* ===== 透明度工具类 ===== */
.opacity-10 {
  opacity: 0.1;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

/* ===== 字体大小系统 ===== */
/* 从20rpx到82rpx的完整字体大小类名 */
.fs-20 { font-size: 20rpx; }
.fs-22 { font-size: 22rpx; }
.fs-24 { font-size: 24rpx; }
.fs-26 { font-size: 26rpx; }
.fs-28 { font-size: 28rpx; }
.fs-30 { font-size: 30rpx; }
.fs-32 { font-size: 32rpx; }
.fs-34 { font-size: 34rpx; }
.fs-36 { font-size: 36rpx; }
.fs-38 { font-size: 38rpx; }
.fs-40 { font-size: 40rpx; }
.fs-42 { font-size: 42rpx; }
.fs-44 { font-size: 44rpx; }
.fs-46 { font-size: 46rpx; }
.fs-48 { font-size: 48rpx; }
.fs-50 { font-size: 50rpx; }
.fs-52 { font-size: 52rpx; }
.fs-54 { font-size: 54rpx; }
.fs-56 { font-size: 56rpx; }
.fs-58 { font-size: 58rpx; }
.fs-60 { font-size: 60rpx; }
.fs-62 { font-size: 62rpx; }
.fs-64 { font-size: 64rpx; }
.fs-66 { font-size: 66rpx; }
.fs-68 { font-size: 68rpx; }
.fs-70 { font-size: 70rpx; }
.fs-72 { font-size: 72rpx; }
.fs-74 { font-size: 74rpx; }
.fs-76 { font-size: 76rpx; }
.fs-78 { font-size: 78rpx; }
.fs-80 { font-size: 80rpx; }
.fs-82 { font-size: 82rpx; }

/* ===== 字重系统 ===== */
.fw-super { font-weight: 800; }
.fw-main { font-weight: 600; }
.fw-normal { font-weight: 400; }
.fw-minor { font-weight: 300; }

/* ===== 文本处理工具类 ===== */
/* 行高工具类 */
.lh-1 { line-height: 1; }
.lh-1-2 { line-height: 1.2; }
.lh-1-4 { line-height: 1.4; }
.lh-1-6 { line-height: 1.6; }
.lh-1-8 { line-height: 1.8; }

/* 多行文本截断工具类 */
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* ===== Flex布局工具类 ===== */
/* 对齐类 */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

/* 分布类 */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

/* 方向类 */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col-reverse { flex-direction: column-reverse; }

/* 换行类 */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* ===== 间距系统 ===== */
/* 基于rpx的padding工具类 */
.p-4 { padding: 4rpx; }
.p-8 { padding: 8rpx; }
.p-12 { padding: 12rpx; }
.p-16 { padding: 16rpx; }
.p-20 { padding: 20rpx; }
.p-24 { padding: 24rpx; }
.p-28 { padding: 28rpx; }
.p-32 { padding: 32rpx; }

/* 方向特定padding */
.pt-4 { padding-top: 4rpx; }
.pr-4 { padding-right: 4rpx; }
.pb-4 { padding-bottom: 4rpx; }
.pl-4 { padding-left: 4rpx; }

.pt-8 { padding-top: 8rpx; }
.pr-8 { padding-right: 8rpx; }
.pb-8 { padding-bottom: 8rpx; }
.pl-8 { padding-left: 8rpx; }

.pt-12 { padding-top: 12rpx; }
.pr-12 { padding-right: 12rpx; }
.pb-12 { padding-bottom: 12rpx; }
.pl-12 { padding-left: 12rpx; }

.pt-16 { padding-top: 16rpx; }
.pr-16 { padding-right: 16rpx; }
.pb-16 { padding-bottom: 16rpx; }
.pl-16 { padding-left: 16rpx; }

.pt-20 { padding-top: 20rpx; }
.pr-20 { padding-right: 20rpx; }
.pb-20 { padding-bottom: 20rpx; }
.pl-20 { padding-left: 20rpx; }

.pt-24 { padding-top: 24rpx; }
.pr-24 { padding-right: 24rpx; }
.pb-24 { padding-bottom: 24rpx; }
.pl-24 { padding-left: 24rpx; }

.pt-28 { padding-top: 28rpx; }
.pr-28 { padding-right: 28rpx; }
.pb-28 { padding-bottom: 28rpx; }
.pl-28 { padding-left: 28rpx; }

.pt-32 { padding-top: 32rpx; }
.pr-32 { padding-right: 32rpx; }
.pb-32 { padding-bottom: 32rpx; }
.pl-32 { padding-left: 32rpx; }

/* 基于rpx的margin工具类 */
.m-4 { margin: 4rpx; }
.m-8 { margin: 8rpx; }
.m-12 { margin: 12rpx; }
.m-16 { margin: 16rpx; }
.m-20 { margin: 20rpx; }
.m-24 { margin: 24rpx; }
.m-28 { margin: 28rpx; }
.m-32 { margin: 32rpx; }

/* 方向特定margin */
.mt-4 { margin-top: 4rpx; }
.mr-4 { margin-right: 4rpx; }
.mb-4 { margin-bottom: 4rpx; }
.ml-4 { margin-left: 4rpx; }

.mt-8 { margin-top: 8rpx; }
.mr-8 { margin-right: 8rpx; }
.mb-8 { margin-bottom: 8rpx; }
.ml-8 { margin-left: 8rpx; }

.mt-12 { margin-top: 12rpx; }
.mr-12 { margin-right: 12rpx; }
.mb-12 { margin-bottom: 12rpx; }
.ml-12 { margin-left: 12rpx; }

.mt-16 { margin-top: 16rpx; }
.mr-16 { margin-right: 16rpx; }
.mb-16 { margin-bottom: 16rpx; }
.ml-16 { margin-left: 16rpx; }

.mt-20 { margin-top: 20rpx; }
.mr-20 { margin-right: 20rpx; }
.mb-20 { margin-bottom: 20rpx; }
.ml-20 { margin-left: 20rpx; }

.mt-24 { margin-top: 24rpx; }
.mr-24 { margin-right: 24rpx; }
.mb-24 { margin-bottom: 24rpx; }
.ml-24 { margin-left: 24rpx; }

.mt-28 { margin-top: 28rpx; }
.mr-28 { margin-right: 28rpx; }
.mb-28 { margin-bottom: 28rpx; }
.ml-28 { margin-left: 28rpx; }

.mt-32 { margin-top: 32rpx; }
.mr-32 { margin-right: 32rpx; }
.mb-32 { margin-bottom: 32rpx; }
.ml-32 { margin-left: 32rpx; }

/* ===== 边框处理 ===== */
/* 1px边框处理方案 */
.border-1 {
  border-width: 1rpx;
  border-style: solid;
}

/* 边框颜色和样式工具类 */
.border-solid { border-style: solid; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }





/* ===== 兼容性处理 ===== */
/* 确保与现有Tailwind CSS样式兼容 */
/* 这些类名不会与Tailwind CSS的默认类名冲突 */

/* 响应式设计支持 */
@media (max-width: 375px) {
  .text-title {
    font-size: 16rpx;
  }

  .text-normal {
    font-size: 14rpx;
  }

  .text-small {
    font-size: 12rpx;
  }
}

@media (min-width: 768px) {
  .text-title {
    font-size: 18rpx;
  }

  .text-normal {
    font-size: 16rpx;
  }

  .text-small {
    font-size: 14rpx;
  }
}