@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/common/style/_variables.less

@@ -0,0 +1,232 @@
+// 公共前缀
+@prefix: t;
+
+@primary-color-1: var(--td-primary-color-1, #f2f3ff);
+@primary-color-2: var(--td-primary-color-2, #d9e1ff);
+@primary-color-3: var(--td-primary-color-3, #b5c7ff);
+@primary-color-4: var(--td-primary-color-4, #8eabff);
+@primary-color-5: var(--td-primary-color-5, #618dff);
+@primary-color-6: var(--td-primary-color-6, #366ef4);
+@primary-color-7: var(--td-primary-color-7, #0052d9);
+@primary-color-8: var(--td-primary-color-8, #003cab);
+@primary-color-9: var(--td-primary-color-9, #002a7c);
+@primary-color-10: var(--td-primary-color-10, #001a57);
+
+@error-color-1: var(--td-error-color-1, #fff0ed);
+@error-color-2: var(--td-error-color-2, #ffd8d2);
+@error-color-3: var(--td-error-color-3, #ffb9b0);
+@error-color-4: var(--td-error-color-4, #ff9285);
+@error-color-5: var(--td-error-color-5, #f6685d);
+@error-color-6: var(--td-error-color-6, #d54941);
+@error-color-7: var(--td-error-color-7, #ad352f);
+@error-color-8: var(--td-error-color-8, #881f1c);
+@error-color-9: var(--td-error-color-9, #68070a);
+@error-color-10: var(--td-error-color-10, #490002);
+
+@warning-color-1: var(--td-warning-color-1, #fff1e9);
+@warning-color-2: var(--td-warning-color-2, #ffd9c2);
+@warning-color-3: var(--td-warning-color-3, #ffb98c);
+@warning-color-4: var(--td-warning-color-4, #fa9550);
+@warning-color-5: var(--td-warning-color-5, #e37318);
+@warning-color-6: var(--td-warning-color-6, #be5a00);
+@warning-color-7: var(--td-warning-color-7, #954500);
+@warning-color-8: var(--td-warning-color-8, #713300);
+@warning-color-9: var(--td-warning-color-9, #532300);
+@warning-color-10: var(--td-warning-color-10, #3b1700);
+
+@success-color-1: var(--td-success-color-1, #e3f9e9);
+@success-color-2: var(--td-success-color-2, #c6f3d7);
+@success-color-3: var(--td-success-color-3, #92dab2);
+@success-color-4: var(--td-success-color-4, #56c08d);
+@success-color-5: var(--td-success-color-5, #2ba471);
+@success-color-6: var(--td-success-color-6, #008858);
+@success-color-7: var(--td-success-color-7, #006c45);
+@success-color-8: var(--td-success-color-8, #005334);
+@success-color-9: var(--td-success-color-9, #003b23);
+@success-color-10: var(--td-success-color-10, #002515);
+
+@gray-color-1: var(--td-gray-color-1, #f3f3f3);
+@gray-color-2: var(--td-gray-color-2, #eeeeee);
+@gray-color-3: var(--td-gray-color-3, #e7e7e7);
+@gray-color-4: var(--td-gray-color-4, #dcdcdc);
+@gray-color-5: var(--td-gray-color-5, #c5c5c5);
+@gray-color-6: var(--td-gray-color-6, #a6a6a6);
+@gray-color-7: var(--td-gray-color-7, #8b8b8b);
+@gray-color-8: var(--td-gray-color-8, #777777);
+@gray-color-9: var(--td-gray-color-9, #5e5e5e);
+@gray-color-10: var(--td-gray-color-10, #4b4b4b);
+@gray-color-11: var(--td-gray-color-11, #383838);
+@gray-color-12: var(--td-gray-color-12, #2c2c2c);
+@gray-color-13: var(--td-gray-color-13, #242424);
+@gray-color-14: var(--td-gray-color-14, #181818);
+
+@font-gray-1: var(--td-font-gray-1, rgba(0, 0, 0, 0.9));
+@font-gray-2: var(--td-font-gray-2, rgba(0, 0, 0, 0.6));
+@font-gray-3: var(--td-font-gray-3, rgba(0, 0, 0, 0.4));
+@font-gray-4: var(--td-font-gray-4, rgba(0, 0, 0, 0.26));
+
+@font-white-1: var(--td-font-white-1, rgba(255, 255, 255, 1));
+@font-white-2: var(--td-font-white-2, rgba(255, 255, 255, 0.55));
+@font-white-3: var(--td-font-white-3, rgba(255, 255, 255, 0.35));
+@font-white-4: var(--td-font-white-4, rgba(255, 255, 255, 0.22));
+
+// 边框色
+@border-color: var(--td-border-color, @gray-color-3);
+
+// Spacer
+@spacer: var(--td-spacer, 16rpx);
+@spacer-1: var(--td-spacer-1, 24rpx); // 间距-小-x
+@spacer-2: var(--td-spacer-2, 32rpx); // 间距-小
+@spacer-3: var(--td-spacer-3, 48rpx); // 间距-中
+@spacer-4: var(--td-spacer-4, 64rpx); // 间距-大
+@spacer-5: var(--td-spacer-5, 96rpx); // 间距-大-x
+@spacer-6: var(--td-spacer-6, 160rpx); // 间距-大-xx
+
+@text-line-height: var(--td-line-height-body-extraSmall, 16px);
+@text-line-height-xs: var(--td-line-height-body-extraSmall, @text-line-height);
+@text-line-height-s: var(--td-line-height-body-small, 20px);
+@text-line-height-base: var(--td-line-height-title-small, 22px);
+@text-line-height-m: var(--td-line-height-title-medium, 24px);
+@text-line-height-l: var(--td-line-height-title-large, 26px);
+@text-line-height-xl: var(--td-line-height-title-extraLarge, 28px);
+@text-line-height-xxl: var(--td-line-height-headline-large, 44px);
+
+// Font
+@font-size: var(--td-font-size, 20rpx);
+@font-size-xs: var(--td-font-size-xs, @font-size); // 字号-一级字号
+@font-size-s: var(--td-font-size-s, 24rpx); // 字号-二级字号
+@font-size-base: var(--td-font-size-base, 28rpx); // 字号-三级字号
+@font-size-m: var(--td-font-size-m, 32rpx); // 字号-二级字号
+@font-size-l: var(--td-font-size-l, 36rpx); // 字号-四级字号
+@font-size-xl: var(--td-font-size-xl, 40rpx); // 字号-五级字号
+@font-size-xxl: var(--td-font-size-xxl, 72rpx);
+
+@font-family: var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular); // 字体-磅数-常规
+@font-family-medium: var(--td-font-family-medium, PingFang SC, Microsoft YaHei, Arial Medium); // 字体-磅数-粗体
+
+// 使用以下与Design Token对应的font token开发组件对应字体、行高
+@font-link-small: var(--td-font-link-small, 24rpx / 40rpx @font-family);
+@font-link-medium: var(--td-font-link-medium, 28rpx / 44rpx @font-family);
+@font-link-large: var(--td-font-link-large, 32rpx / 48rpx @font-family);
+@font-mark-extraSmall: var(--td-font-mark-extraSmall, 600 20rpx / 32rpx @font-family);
+@font-mark-small: var(--td-font-mark-small, 600 24rpx / 40rpx @font-family);
+@font-mark-medium: var(--td-font-mark-medium, 600 28rpx / 44rpx @font-family);
+@font-mark-large: var(--td-font-mark-large, 600 32rpx / 48rpx @font-family);
+@font-body-extraSmall: var(--td-font-body-extraSmall, 20rpx / 32rpx @font-family);
+@font-body-small: var(--td-font-body-small, 24rpx / 40rpx @font-family);
+@font-body-medium: var(--td-font-body-medium, 28rpx / 44rpx @font-family);
+@font-body-large: var(--td-font-body-large, 32rpx / 48rpx @font-family);
+@font-title-small: var(--td-font-title-small, 600 28rpx / 44rpx @font-family);
+@font-title-medium: var(--td-font-title-medium, 600 32rpx / 48rpx @font-family);
+@font-title-large: var(--td-font-title-large, 600 36rpx / 52rpx @font-family);
+@font-title-extraLarge: var(--td-font-title-extraLarge, 600 40rpx / 56rpx @font-family);
+@font-headline-small: var(--td-font-headline-small, 600 48rpx / 64rpx @font-family);
+@font-headline-medium: var(--td-font-headline-medium, 600 56rpx / 72rpx @font-family);
+@font-headline-large: var(--td-font-headline-large, 600 72rpx / 88rpx @font-family);
+@font-display-medium: var(--td-font-display-medium, 600 96rpx / 112rpx @font-family);
+@font-display-large: var(--td-font-display-large, 600 128rpx / 144rpx @font-family);
+
+// 圆角
+@radius-small: var(--td-radius-small, 6rpx);
+@radius-default: var(--td-radius-default, 12rpx);
+@radius-large: var(--td-radius-large, 18rpx);
+@radius-extraLarge: var(--td-radius-extraLarge, 24rpx);
+@radius-round: var(--td-radius-round, 999px);
+@radius-circle: var(--td-radius-circle, 50%);
+
+// 阴影
+@shadow-1: var(
+  --td-shadow-1,
+  0 1px 10px rgba(0, 0, 0, 5%),
+  0 4px 5px rgba(0, 0, 0, 8%),
+  0 2px 4px -1px rgba(0, 0, 0, 12%)
+);
+@shadow-2: var(
+  --td-shadow-2,
+  0 3px 14px 2px rgba(0, 0, 0, 5%),
+  0 8px 10px 1px rgba(0, 0, 0, 6%),
+  0 5px 5px -3px rgba(0, 0, 0, 10%)
+);
+@shadow-3: var(
+  --td-shadow-3,
+  0 6px 30px 5px rgba(0, 0, 0, 5%),
+  0 16px 24px 2px rgba(0, 0, 0, 4%),
+  0 8px 10px -5px rgba(0, 0, 0, 8%)
+);
+@shadow-4: var(--td-shadow-4, 0 2px 8px 0 rgba(0, 0, 0, 0.06));
+
+// 动画
+@anim-time-fn-easing: var(--td-anim-time-fn-easing, cubic-bezier(0.38, 0, 0.24, 1));
+@anim-time-fn-ease-out: var(--td-anim-time-fn-ease-out, cubic-bezier(0, 0, 0.15, 1));
+@anim-time-fn-ease-in: var(--td-anim-time-fn-ease-in, cubic-bezier(0.82, 0, 1, 0.9));
+@anim-duration-base: var(--td-anim-duration-base, 0.2s);
+@anim-duration-moderate: var(--td-anim-duration-moderate, 0.24s);
+@anim-duration-slow: var(--td-anim-duration-slow, 0.28s);
+
+// 容器
+@bg-color-page: var(--td-bg-color-page, @gray-color-1);
+@bg-color-container: var(--td-bg-color-container, @font-white-1);
+@bg-color-container-active: var(--td-bg-color-container-active, @gray-color-3);
+
+@bg-color-secondarycontainer: var(--td-bg-color-secondarycontainer, @gray-color-1);
+@bg-color-secondarycontainer-active: var(--td-bg-color-secondarycontainer-active, @gray-color-4);
+
+@bg-color-component: var(--td-bg-color-component, @gray-color-3);
+@bg-color-component-active: var(--td-bg-color-component-active, @gray-color-6);
+@bg-color-component-disabled: var(--td-bg-color-component-disabled, @gray-color-2);
+
+@bg-color-secondarycomponent: var(--td-bg-color-secondarycomponent, @gray-color-4);
+@bg-color-secondarycomponent-active: var(--td-bg-color-secondarycomponent-active, @gray-color-6);
+
+// 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
+@bg-color-specialcomponent: var(--td-bg-color-specialcomponent, #fff);
+
+@component-stroke: var(--td-component-stroke, @gray-color-3);
+@border-level-1-color: var(--td-border-level-1-color, @gray-color-3);
+@component-border: var(--td-component-border, @gray-color-4);
+@border-level-2-color: var(--td-border-level-2-color, @gray-color-4);
+
+// 主题
+@brand-color: var(--td-brand-color, @primary-color-7);
+@brand-color-active: var(--td-brand-color-active, @primary-color-8);
+@brand-color-disabled: var(--td-brand-color-disabled, @primary-color-3);
+@brand-color-focus: var(--td-brand-color-focus, @primary-color-1);
+@brand-color-light: var(--td-brand-color-light, @primary-color-1);
+@brand-color-light-active: var(--td-brand-color-light-active, @primary-color-2);
+
+@error-color: var(--td-error-color, @error-color-6);
+@error-color-active: var(--td-error-color-active, @error-color-7);
+@error-color-disabled: var(--td-error-color-disabled, @error-color-3);
+@error-color-focus: var(--td-error-color-focus, @error-color-2);
+@error-color-light: var(--td-error-color-light, @error-color-1);
+
+@warning-color: var(--td-warning-color, @warning-color-5);
+@warning-color-active: var(--td-warning-color-active, @warning-color-6);
+@warning-color-disabled: var(--td-warning-color-disabled, @warning-color-3);
+@warning-color-focus: var(--td-warning-color-focus, @warning-color-2);
+@warning-color-light: var(--td-warning-color-light, @warning-color-1);
+
+@success-color: var(--td-success-color, @success-color-5);
+@success-color-active: var(--td-success-color-active, @success-color-6);
+@success-color-disabled: var(--td-success-color-disabled, @success-color-3);
+@success-color-focus: var(--td-success-color-focus, @success-color-2);
+@success-color-light: var(--td-success-color-light, @success-color-1);
+
+// 文字
+@text-color-primary: var(--td-text-color-primary, @font-gray-1);
+@text-color-secondary: var(--td-text-color-secondary, @font-gray-2);
+@text-color-placeholder: var(--td-text-color-placeholder, @font-gray-3);
+@text-color-disabled: var(--td-text-color-disabled, @font-gray-4);
+@text-color-anti: var(--td-text-color-anti, @font-white-1);
+@text-color-brand: var(--td-text-color-brand, @brand-color);
+@text-color-link: var(--td-text-color-link, @brand-color);
+
+// 定位
+@position-fixed-top: var(--td-position-fixed-top, 0);
+
+// 遮罩
+@mask-active: var(--td-mask-active, rgba(0, 0, 0, 0.6)); // 遮罩-弹出
+@mask-disabled: var(--td-mask-disabled, rgba(255, 255, 255, 0.6)); // 遮罩-禁用
+@mask-bg: var(--td-mask-background, rgba(255, 255, 255, 0.96)); // 二维码遮罩
+
+@text-line-height: 1.5;

package/dist/common/style/base.less

@@ -0,0 +1,4 @@
+// 变量
+@import './_variables.less';
+
+@import './mixins/_index.less';

package/dist/common/style/index.css

@@ -0,0 +1,13 @@
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}

package/dist/common/style/mixins/_border.less

@@ -0,0 +1,34 @@
+@import '../_variables.less';
+
+.border(@position: bottom, @border-color: @component-border) {
+  position: relative;
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: if(@position = top, 0, unset);
+    bottom: if(@position = bottom, 0, unset);
+    left: if(@position = left, 0, unset);
+    right: if(@position = right, 0, unset);
+    background-color: @border-color;
+  }
+}
+
+.border(@position: bottom, @border-color: @gray-color-1) when(@position = bottom) , (@position = top) {
+  &::after {
+    height: 1px;
+    left: 0;
+    right: 0;
+    transform: scaleY(0.5);
+  }
+}
+
+.border(@position: bottom, @border-color: @gray-color-1) when(@position = left),(@position = right) {
+  &::after {
+    width: 1px;
+    top: 0;
+    bottom: 0;
+    transform: scaleX(0.5);
+  }
+}

package/dist/common/style/mixins/_clearfix.less

@@ -0,0 +1,7 @@
+.clearfix() {
+  &::after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+}

package/dist/common/style/mixins/_cursor.less

@@ -0,0 +1,6 @@
+.cursor-pointer() {
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+  user-select: none;
+}

package/dist/common/style/mixins/_ellipsis.less

@@ -0,0 +1,15 @@
+.ellipsis(@w:auto) {
+  width: @w;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+}
+
+.ellipsisLn(@line) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: @line;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}

package/dist/common/style/mixins/_hairline.less

@@ -0,0 +1,55 @@
+@import '../_variables.less';
+
+.hairline-base() {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+}
+
+.hairline(@color: @border-level-1-color) {
+  .hairline-base();
+  top: -50%;
+  right: -50%;
+  bottom: -50%;
+  left: -50%;
+  border: 1px solid @color;
+  transform: scale(0.5);
+}
+
+.hairline-top(@color: @border-level-1-color) {
+  .hairline-base();
+  right: 0;
+  left: 0;
+  top: 0;
+  border-top: 1px solid @color;
+  transform: scaleY(0.5);
+  transform-origin: 0 0;
+}
+
+.hairline-bottom(@color: @border-level-1-color, @width: 1px) {
+  .hairline-base();
+  right: 0;
+  left: 0;
+  bottom: 0;
+  border-bottom: @width solid @color;
+  transform: scaleY(0.5);
+}
+
+.hairline-left(@color: @border-level-1-color) {
+  .hairline-base();
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid @color;
+  transform: scaleX(0.5);
+}
+
+.hairline-right(@color: @border-level-1-color) {
+  .hairline-base();
+  top: 0;
+  bottom: 0;
+  right: 0;
+  border-right: 1px solid @color;
+  transform: scaleX(0.5);
+}

package/dist/common/style/mixins/_index.less

@@ -0,0 +1,6 @@
+@import './_clearfix.less';
+@import './_hairline.less';
+@import './_ellipsis.less';
+@import './_cursor.less';
+@import './_border.less';
+@import './_other.less';

package/dist/common/style/mixins/_other.less

@@ -0,0 +1,14 @@
+// 屏幕中不显示, 但可被读屏
+.sr-only() {
+  &--sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    clip-path: inset(50%);
+    border: 0;
+  }
+}