tdesign-mobile-vue/esm/_common/style/mobile/_variables.less

tdesign-mobile-vue

// 公共前缀
@prefix: t;

// 颜色色板
@brand-color-1: var(--td-brand-color-1, #f2f3ff);
@brand-color-2: var(--td-brand-color-2, #d9e1ff);
@brand-color-3: var(--td-brand-color-3, #b5c7ff);
@brand-color-4: var(--td-brand-color-4, #8eabff);
@brand-color-5: var(--td-brand-color-5, #618dff);
@brand-color-6: var(--td-brand-color-6, #366ef4);
@brand-color-7: var(--td-brand-color-7, #0052d9);
@brand-color-8: var(--td-brand-color-8, #003cab);
@brand-color-9: var(--td-brand-color-9, #002a7c);
@brand-color-10: var(--td-brand-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, 8px);
@spacer-1: var(--td-spacer-1, 12px); // 间距-小-x
@spacer-2: var(--td-spacer-2, 16px); // 间距-小
@spacer-3: var(--td-spacer-3, 24px); // 间距-中
@spacer-4: var(--td-spacer-4, 32px); // 间距-大
@spacer-5: var(--td-spacer-5, 48px); // 间距-大-x
@spacer-6: var(--td-spacer-6, 80px); // 间距-大-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, 10px);
@font-size-xs: var(--td-font-size-xs, @font-size); // 字号-一级字号
@font-size-s: var(--td-font-size-s, 12px); // 字号-二级字号
@font-size-base: var(--td-font-size-base, 14px); // 字号-三级字号
@font-size-m: var(--td-font-size-m, 16px); // 字号-二级字号
@font-size-l: var(--td-font-size-l, 18px); // 字号-四级字号
@font-size-xl: var(--td-font-size-xl, 20px); // 字号-五级字号
@font-size-xxl: var(--td-font-size-xxl, 36px);

@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);
@font-link-medium: var(--td-font-link-medium);
@font-link-large: var(--td-font-link-large);
@font-mark-extraSmall: var(--td-font-mark-extraSmall);
@font-mark-small: var(--td-font-mark-small);
@font-mark-medium: var(--td-font-mark-medium);
@font-mark-large: var(--td-font-mark-large);
@font-body-extraSmall: var(--td-font-body-extraSmall);
@font-body-small: var(--td-font-body-small);
@font-body-medium: var(--td-font-body-medium);
@font-body-large: var(--td-font-body-large);
@font-title-small: var(--td-font-title-small);
@font-title-medium: var(--td-font-title-medium);
@font-title-large: var(--td-font-title-large);
@font-title-extraLarge: var(--td-font-title-extraLarge);
@font-headline-small: var(--td-font-headline-small);
@font-headline-medium: var(--td-font-headline-medium);
@font-headline-large: var(--td-font-headline-large);
@font-display-medium: var(--td-font-display-medium);
@font-display-large: var(--td-font-display-large);

// 圆角
@radius-small: var(--td-radius-small, 3px);
@radius-default: var(--td-radius-default, 6px);
@radius-large: var(--td-radius-large, 9px);
@radius-extraLarge: var(--td-radius-extraLarge, 12px);
@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); // 色彩 - page
@bg-color-container: var(--td-bg-color-container, @font-white-1); // 色彩 - 容器
@bg-color-container-active: var(--td-bg-color-container-active, @gray-color-3); // 色彩 - 容器 - active

@bg-color-secondarycontainer: var(--td-bg-color-secondarycontainer, @gray-color-1); // 色彩 - 次级容器
@bg-color-secondarycontainer-active: var(
  --td-bg-color-secondarycontainer-active,
  @gray-color-4
); // 色彩 - 次级容器 - active

@bg-color-component: var(--td-bg-color-component, @gray-color-3); // 色彩  - 组件
@bg-color-component-active: var(--td-bg-color-component-active, @gray-color-6); // 色彩 - 组件 - active
@bg-color-component-disabled: var(--td-bg-color-component-disabled, @gray-color-2); // 色彩 - 组件 - disabled

@bg-color-secondarycomponent: var(--td-bg-color-secondarycomponent, @gray-color-4);
@bg-color-secondarycomponent-active: var(--td-bg-color-secondarycomponent-active, @gray-color-6);

@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, @brand-color-7);
@brand-color-active: var(--td-brand-color-active, @brand-color-8);
@brand-color-disabled: var(--td-brand-color-disabled, @brand-color-3);
@brand-color-focus: var(--td-brand-color-focus, @brand-color-1);
@brand-color-light: var(--td-brand-color-light, @brand-color-1);
@brand-color-light-active: var(--td-brand-color-light-active, @brand-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;